df-ae-forms-package
Version:
A comprehensive React form preview component library with form controls, validation, and responsive design for Angular/Ionic integration
10 lines (9 loc) • 121 kB
CSS
/*
! EXTENDING THE SYSTEM
- Always use semantic variable names for clarity and maintainability.
- For component-level overrides, use CSS variable inheritance.
- Usage Example: .btn-primary { background: var(--df-color-primary); }
* THEME HANDLING: Light & Dark Modes
- For light mode, specify the variables in the :root selector.
- For dark mode, override necessary variables within a .dark or [data-theme="dark"] selector
*/:root{--df-color-primary:#303992;--df-color-secondary:#ff7032;--df-color-tertiary:#f3f3f8;--df-color-delete:#f04248;--df-color-white:#fff;--df-color-black:#121212;--df-color-container-background:#f4f4f4;--df-color-layout-background:#f4f4f4;--df-color-app-background:#f4f4f4;--df-color-fb-dash:#787ebb;--df-color-fb-scroll:#dee0ed;--df-color-fb-border:#e4e5ec;--df-color-fb-icon-bg:#f3f3f8;--df-color-fb-bg:#f4f4f4;--df-color-fb-container:#fff;--df-color-fb-input-bg:#f8fafc;--df-color-fb-accordion-bg:#303992;--df-color-fb-input-bg-hover:#f1f5f9;--df-color-fb-input-bg-disabled:#e2e8f0;--df-color-layout-active:#ffd4c2;--df-color-layout-border:#ffe0d2;--df-color-layout-fill:#fffaf8;--df-color-text-dark:#000;--df-color-text-light:#8c8c8c;--df-color-text-medium:#6b7280;--df-color-success-primary:#00df80;--df-color-success-light:#aef5d6;--df-color-success-disabled:#cef9e7;--df-color-success-muted:#e9fcf4;--df-color-error-primary:#f04248;--df-color-error-light:#fac4c5;--df-color-error-disabled:#feeeee;--df-color-error-muted:#feeff0;--df-color-error:#f04248;--df-color-warning-primary:#f96;--df-color-warning-light:#fff1b7;--df-color-warning-muted:#fff9e2;--df-color-warning-disabled:#fffbec;--df-color-warning-lightest:#fffbef;--df-color-instruction-primary:#303992;--df-color-instruction-light:#dee0ed;--df-color-instruction-gradient:linear-gradient(90deg,#303992,#006fd1);--df-color-primary-hover:#dadbeb;--df-color-primary-active:#303992;--df-color-primary-focus:#e4e5ec;--df-color-primary-disabled:#dadbeb;--df-color-primary-border:#f5f5fa;--df-color-primary-hover-text:#303992;--df-color-primary-light:#e4e5ec;--df-color-primary-grey:#787eb8;--df-color-primary-dark:#1a1d24;--df-color-primary-bg:#f3f3f8;--df-color-primary-medium:#8f95b2;--df-color-secondary-hover:#ffd4c2;--df-color-secondary-active:#d94f16;--df-color-secondary-focus:#ff8b59;--df-color-secondary-disabled:#ffe0d2;--df-color-secondary-hover-text:#ff7032;--df-color-tertiary-hover:#dadbeb;--df-color-tertiary-active:#f3f3f8;--df-color-tertiary-focus:#f3f3f8;--df-color-tertiary-disabled:#ffb38c;--df-color-tertiary-hover-text:#303992;--df-color-delete-hover:#fac4c5;--df-color-delete-active:#f04248;--df-color-delete-focus:#f04248;--df-color-delete-hover-text:#f04248;--df-color-skeleton-base:#e2e8f0;--df-color-skeleton-highlight:#f1f5f9;--rgba-color-primary:48,57,146;--rgba-color-secondary:255,112,50;--rgba-color-white:255,255,255;--rgba-color-black:18,18,18}.dark,[data-theme=dark]{--df-color-primary:#1a1d24;--df-color-secondary:#ff7032;--df-color-tertiary:#2c2e34;--df-color-delete:#f04248;--df-color-primary-hover:#2c2e34;--df-color-primary-active:#1a1d24;--df-color-primary-focus:#2c2e34;--df-color-primary-disabled:#2c2e34;--df-color-primary-border:#3a3d43;--df-color-primary-hover-text:#fff;--df-color-primary-light:#4a4e6d;--df-color-primary-grey:#4a4e6d;--df-color-primary-dark:#1a1d24;--df-color-primary-bg:#2c2e34;--df-color-primary-medium:#4a4e6d;--df-color-secondary-hover:#ff8b59;--df-color-secondary-active:#d94f16;--df-color-secondary-focus:#ff8b59;--df-color-secondary-disabled:#ff8b59;--df-color-secondary-hover-text:#fff;--df-color-tertiary-hover:#3a3d43;--df-color-tertiary-active:#2c2e34;--df-color-tertiary-focus:#3a3d43;--df-color-tertiary-disabled:#3a3d43;--df-color-tertiary-hover-text:#fff;--df-color-delete-hover:#ff6b6b;--df-color-delete-active:#f04248;--df-color-delete-focus:#f04248;--df-color-delete-hover-text:#fff;--df-color-delete-disabled:#ff6b6b;--df-color-fb-dash:#4a4e6d;--df-color-fb-scroll:#4a4e6d;--df-color-fb-border:#3a3d43;--df-color-fb-icon-bg:#2c2e34;--df-color-fb-bg:#181a20;--df-color-fb-container:#23262f;--df-color-fb-input-bg:#2c2e34;--df-color-fb-accordion-bg:#1a1d24;--df-color-fb-input-bg-hover:#3a3d43;--df-color-fb-input-bg-disabled:#1a1d24;--df-color-layout-active:#ffd4c2;--df-color-layout-border:#ffe0d2;--df-color-layout-fill:#fffaf8;--df-color-layout-background:#181a20;--df-color-container-background:#181a20;--df-color-app-background:#181a20;--df-color-text-dark:#fff;--df-color-text-light:#bdbdbd;--df-color-text-medium:#9ca3af;--df-color-success-primary:#00df80;--df-color-success-light:#aef5d6;--df-color-success-muted:#e9fcf4;--df-color-success-disabled:#cef9e7;--df-color-error-primary:#f04248;--df-color-error-light:#fac4c5;--df-color-error-muted:#feeff0;--df-color-error-disabled:#feeeee;--df-color-error:#f04248;--df-color-warning-primary:#ffd21e;--df-color-warning-light:#fff1b7;--df-color-warning-muted:#fff9e2;--df-color-warning-lightest:#fffbef;--df-color-warning-disabled:#fffbec;--df-color-instruction-primary:#1a1d24;--df-color-instruction-light:#4a4e6d;--df-color-instruction-gradient:linear-gradient(90deg,#1a1d24,#006fd1);--df-color-skeleton-base-dark:#3a3d43;--df-color-skeleton-highlight-dark:#4a4e6d}.form-control{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-control::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-control{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-control::placeholder{color:var(--df-color-text-light)!important}.form-control:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-control.is-invalid{border-color:var(--df-color-error-primary)}.form-control.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-control:disabled{cursor:not-allowed;opacity:.6}.form-control.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-control.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-control[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-control[readonly].form-textarea,.form-control[readonly][type=textarea]{background-color:#fff!important}fieldset{border:none;margin:0;padding:0}.form-label{color:var(--df-color-text-dark);display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin-bottom:.5rem}.form-label .required-indicator{color:var(--df-color-error-primary);margin-left:.25rem}.dark .form-label{color:var(--df-color-text-light)}.form-group{margin-bottom:1rem}.dark .form-group.checkbox-group .form-label,.dark .form-group.radio-group .form-label{color:var(--df-color-text-light)}.form-group.checkbox-group .mt-2.space-y-2,.form-group.radio-group .mt-2.space-y-2{background-color:#f8fafc;border:none;border-radius:8px;margin-top:.5rem;padding:.75rem}.dark .form-group.checkbox-group .mt-2.space-y-2,.dark .form-group.radio-group .mt-2.space-y-2{background-color:var(--df-color-fb-container)}.form-group.checkbox-group.label-left .form-label,.form-group.radio-group.label-left .form-label{flex-shrink:0;margin-bottom:0;margin-right:1rem;max-width:60%;min-width:60%;white-space:normal;word-break:break-word}.form-group.checkbox-group.label-left .input-wrapper,.form-group.radio-group.label-left .input-wrapper{flex:1;width:100%}.form-group.checkbox-group.label-left .mt-2.space-y-2,.form-group.radio-group.label-left .mt-2.space-y-2{margin-top:0}.form-group.checkbox-group.label-top .form-label,.form-group.radio-group.label-top .form-label{margin-bottom:.5rem;margin-right:0}.form-group.checkbox-group.label-top .input-wrapper,.form-group.radio-group.label-top .input-wrapper{width:100%}.form-group.label-top .form-label{margin-right:0}.form-group.label-top .input-wrapper{width:100%}.form-group .threshold-info{background:transparent;border:none;border-radius:0;color:#64748b;font-size:.675rem;margin-top:.5rem;padding:0}.form-group .dark .threshold-info{background:transparent;border:none;color:#9ca3af}.form-group.label-left .input-wrapper{flex:1;width:100%}.form-check{align-items:center;background-color:var(--df-color-fb-input-bg);border:none;border-radius:6px;display:flex;margin-bottom:.5rem;padding:.75rem 1rem;transition:all .2s ease}.form-check:hover{background-color:var(--df-color-fb-icon-bg)}.form-check:last-child{margin-bottom:0}.form-check input[type=checkbox],.form-check input[type=radio]{background-color:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:3px;cursor:pointer;height:18px;margin-right:.75rem;width:18px}.form-check input[type=checkbox]:focus,.form-check input[type=radio]:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.1);outline:none}.form-check input[type=checkbox]:disabled,.form-check input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.form-check input[type=radio]{border-radius:50%}.form-check input[type=checkbox]:checked,.form-check input[type=radio]:checked{background-color:var(--df-color-primary);border-color:var(--df-color-primary);color:var(--df-color-white)}.form-check label{color:var(--df-color-text-dark);cursor:pointer;flex:1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-size:.875rem;font-weight:400;line-height:1.5;margin-bottom:0}.form-check:disabled{cursor:not-allowed;opacity:.6}.form-check:disabled label{cursor:not-allowed}.dark .form-check{background-color:var(--df-color-fb-input-bg)}.dark .form-check:hover{background-color:var(--df-color-fb-icon-bg)}.dark .form-check label,.form-select{color:var(--df-color-text-dark)}.form-select{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-select::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-select{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-select::placeholder{color:var(--df-color-text-light)!important}.form-select:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-select.is-invalid{border-color:var(--df-color-error-primary)}.form-select.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-select:disabled{cursor:not-allowed;opacity:.6}.form-select.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-select.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-select[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-select[readonly].form-textarea,.form-select[readonly][type=textarea]{background-color:#fff!important}.form-group select.form-select,.form-select,.input-wrapper select.form-select,select.form-select{appearance:none!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E")!important;background-position:right .5rem center!important;background-repeat:no-repeat!important;background-size:1.5em 1.5em!important;padding-right:2.5rem!important}.form-textarea{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-textarea::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-textarea{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-textarea::placeholder{color:var(--df-color-text-light)!important}.form-textarea:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-textarea.is-invalid{border-color:var(--df-color-error-primary)}.form-textarea.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-textarea:disabled{cursor:not-allowed;opacity:.6}.form-textarea.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-textarea.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-textarea[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-textarea[readonly].form-textarea,.form-textarea[readonly][type=textarea]{background-color:#fff!important}.form-textarea{min-height:100px;resize:vertical}.form-date{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-date::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-date{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-date::placeholder{color:var(--df-color-text-light)!important}.form-date:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-date.is-invalid{border-color:var(--df-color-error-primary)}.form-date.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-date:disabled{cursor:not-allowed;opacity:.6}.form-date.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-date.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-date[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-date[readonly].form-textarea,.form-date[readonly][type=textarea]{background-color:#fff!important}.form-heading{color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:500;line-height:1.5}.form-heading.h1{font-size:2rem;font-weight:600}.form-heading.h2{font-size:1.5rem;font-weight:600}.form-heading.h3{font-size:1.25rem;font-weight:500}.form-heading.h4{font-size:1.125rem;font-weight:500}.form-heading.h5{font-size:1rem;font-weight:500}.form-heading.h6{font-size:.875rem;font-weight:500}.form-signature{border:1px solid var(--df-color-fb-border);border-radius:8px;cursor:crosshair;min-height:150px;transition:all .2s ease}.form-signature,.form-signature:focus{background:var(--df-color-fb-input-bg)}.form-signature:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-signature:hover{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .form-signature{border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-signature,.dark .form-signature:focus,.dark .form-signature:hover{background:var(--df-color-fb-input-bg)!important}.inline-options-grid{align-items:start;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.inline-options-grid .form-check{align-items:center;display:flex;height:auto;margin-bottom:0;min-height:auto;padding:.5rem .75rem}@media (max-width:768px){.inline-options-grid{gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.inline-options-grid .form-check{padding:.375rem .5rem}}@media (max-width:480px){.inline-options-grid{gap:.25rem;grid-template-columns:1fr}}.inline-layout .inline-options-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.vertical-layout .space-y-2{display:flex;flex-direction:column;gap:.5rem}.form-error-msg{color:var(--df-color-error-primary);display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin-top:.25rem;min-height:1.25rem}.file-upload-wrapper{position:relative;width:100%}.file-upload-area{border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.file-upload-area::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .file-upload-area{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .file-upload-area::placeholder{color:var(--df-color-text-light)!important}.file-upload-area:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.file-upload-area.is-invalid{border-color:var(--df-color-error-primary)}.file-upload-area.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.file-upload-area:disabled{cursor:not-allowed;opacity:.6}.file-upload-area.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.file-upload-area.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.file-upload-area[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.file-upload-area[readonly].form-textarea,.file-upload-area[readonly][type=textarea]{background-color:#fff!important}.file-upload-area{align-items:center;background:var(--df-color-fb-input-bg);border:2px dashed var(--df-color-fb-border);cursor:pointer;display:flex;justify-content:center;min-height:120px;position:relative;text-align:center;transition:all .2s ease-in-out}.file-upload-area:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.file-upload-area.drag-over{background:var(--df-color-primary-light);border-color:var(--df-color-primary);transform:scale(1.02)}.file-upload-area.disabled,.file-upload-area.readonly{background:var(--df-color-fb-input-bg-disabled);cursor:not-allowed;opacity:.6}.file-upload-area.error{background:var(--df-color-fb-input-bg);border-color:var(--df-color-error)}.dark .file-upload-area{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border);color:var(--df-color-text-light)}.dark .file-upload-area:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.dark .file-upload-area.drag-over{background:var(--df-color-primary-light)}.dark .file-upload-area.disabled,.dark .file-upload-area.readonly{background:var(--df-color-fb-input-bg-disabled)}.dark .file-upload-area.error{background:var(--df-color-fb-input-bg);border-color:var(--df-color-error)}.upload-placeholder{align-items:center;display:flex;flex-direction:column;gap:.5rem;padding:1rem}.upload-placeholder .upload-icon{font-size:2rem;opacity:.6}.upload-placeholder .upload-text p{color:var(--df-color-text-medium);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin:0}.upload-placeholder .upload-text p.upload-hint{color:var(--df-color-text-light);font-size:.875rem}.dark .upload-placeholder .upload-text p{color:var(--df-color-text-light)}.dark .upload-placeholder .upload-text p.upload-hint{color:var(--df-color-text-medium)}.file-list{flex-direction:column;gap:.5rem;width:100%}.file-item,.file-list{display:flex;padding:.5rem}.file-item{align-items:center;background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;gap:.75rem;transition:all .2s ease-in-out}.file-item:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.dark .file-item{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .file-item:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.file-preview{align-items:center;border-radius:4px;display:flex;flex-shrink:0;height:40px;justify-content:center;overflow:hidden;width:40px}.file-preview .file-image{height:100%;object-fit:cover;width:100%}.file-preview .file-icon{font-size:1.5rem;opacity:.8}.file-info{flex:1;min-width:0}.file-info .file-name{color:var(--df-color-text-dark);font-weight:500;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-info .file-name,.file-info .file-size{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5}.file-info .file-size{font-size:.75rem;font-weight:400}.dark .file-info .file-name,.file-info .file-size{color:var(--df-color-text-light)}.dark .file-info .file-size{color:var(--df-color-text-medium)}.file-remove{align-items:center;background:var(--df-color-error-light);border:none;border-radius:50%;color:var(--df-color-error);cursor:pointer;display:flex;flex-shrink:0;font-size:.75rem;height:24px;justify-content:center;transition:all .2s ease-in-out;width:24px}.file-remove:hover{background:var(--df-color-error);color:#fff;transform:scale(1.1)}.file-remove:focus{outline:2px solid var(--df-color-primary);outline-offset:2px}.dark .file-remove{background:var(--df-color-error-light);color:var(--df-color-error)}.dark .file-remove:hover{background:var(--df-color-error);color:#fff}.file-add-more{align-items:center;background:var(--df-color-primary);border:1px solid var(--df-color-primary);border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;margin-top:.75rem;padding:.625rem 1rem;transition:all .2s ease-in-out;width:100%}.file-add-more:hover{background:var(--df-color-primary-dark);border-color:var(--df-color-primary-dark);box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.file-add-more:active{box-shadow:0 1px 2px rgba(0,0,0,.1);transform:translateY(0)}.file-add-more:focus{outline:2px solid var(--df-color-primary);outline-offset:2px}.file-add-more .file-add-icon{stroke:currentColor;height:16px;width:16px}.file-add-more .file-add-text{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:500;line-height:1.5}.dark .file-add-more{background:var(--df-color-primary);border-color:var(--df-color-primary);color:#fff}.dark .file-add-more:hover{background:var(--df-color-primary-dark);border-color:var(--df-color-primary-dark)}.dark .file-add-more .file-add-text{color:#fff}.file-image-display{gap:1rem}.file-image-container,.file-image-display{display:flex;flex-direction:column;width:100%}.file-image-container{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:8px;gap:.75rem;padding:.75rem;transition:all .2s ease-in-out}.file-image-container:hover{border-color:var(--df-color-primary);box-shadow:0 2px 8px rgba(0,0,0,.1)}.dark .file-image-container{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .file-image-container:hover{border-color:var(--df-color-primary);box-shadow:0 2px 8px rgba(0,0,0,.2)}.file-image-preview{background:var(--df-color-fb-container);border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1);max-height:500px;object-fit:contain;width:100%}.dark .file-image-preview{background:var(--df-color-fb-container);box-shadow:0 2px 4px rgba(0,0,0,.3)}.file-image-info{display:flex;flex-direction:column;gap:.25rem}.file-image-info .file-name{color:var(--df-color-text-dark);font-weight:500;word-break:break-word}.file-image-info .file-name,.file-image-info .file-size{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5}.file-image-info .file-size{font-size:.75rem;font-weight:400}.dark .file-image-info .file-name,.file-image-info .file-size{color:var(--df-color-text-light)}.dark .file-image-info .file-size{color:var(--df-color-text-medium)}.file-other-files{border-top:1px solid var(--df-color-fb-border);display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem}.file-other-files .file-other-files-label{color:var(--df-color-text-medium);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-size:.875rem;font-weight:500;line-height:1.5;margin-bottom:.25rem}.dark .file-other-files{border-top-color:var(--df-color-fb-border)}.dark .file-other-files .file-other-files-label{color:var(--df-color-text-light)}.file-item-minimal{align-items:center;background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;display:flex;gap:.75rem;padding:.5rem;transition:all .2s ease-in-out}.file-item-minimal .file-icon{flex-shrink:0;font-size:1.25rem;opacity:.8}.file-item-minimal .file-info{flex:1;min-width:0}.file-item-minimal .file-info .file-name{color:var(--df-color-text-dark);font-size:14px;font-size:.875rem;font-weight:500;margin-bottom:.125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-minimal .file-info .file-name,.file-item-minimal .file-info .file-size{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5}.file-item-minimal .file-info .file-size{color:var(--df-color-text-light);font-size:14px;font-size:.75rem;font-weight:400}.dark .file-item-minimal{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .file-item-minimal .file-info .file-name{color:var(--df-color-text-light)}.dark .file-item-minimal .file-info .file-size{color:var(--df-color-text-medium)}.location-wrapper{position:relative;width:100%}.location-controls{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.location-btn{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.location-btn::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .location-btn{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .location-btn::placeholder{color:var(--df-color-text-light)!important}.location-btn:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.location-btn.is-invalid{border-color:var(--df-color-error-primary)}.location-btn.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.location-btn.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.location-btn.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.location-btn[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.location-btn[readonly].form-textarea,.location-btn[readonly][type=textarea]{background-color:#fff!important}.location-btn{align-items:center;background:var(--df-color-primary);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.75rem 1rem;transition:all .2s ease-in-out}.location-btn:hover:not(:disabled){background:var(--df-color-primary-dark);transform:translateY(-1px)}.location-btn:disabled{cursor:not-allowed;opacity:.6}.location-btn.loading{background:var(--df-color-primary-light);cursor:not-allowed}.location-btn.secondary{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);color:var(--df-color-text-dark)}.location-btn.secondary:hover:not(:disabled){background:var(--df-color-fb-border);transform:translateY(-1px)}.location-btn .loading-spinner{animation:spin 1s linear infinite}.location-clear-btn{align-items:center;background:var(--df-color-error-light);border:none;border-radius:50%;color:var(--df-color-error);cursor:pointer;display:flex;font-size:.875rem;height:32px;justify-content:center;transition:all .2s ease-in-out;width:32px}.location-clear-btn:hover:not(:disabled){background:var(--df-color-error);color:var(--df-color-error);transform:scale(1.1)}.location-clear-btn:active:not(:disabled){transform:scale(.95)}.location-clear-btn:disabled{cursor:not-allowed;opacity:.6}.dark .location-clear-btn{background:var(--df-color-error-light);color:var(--df-color-error)}.dark .location-clear-btn:hover:not(:disabled){background:var(--df-color-error);color:#fff}.location-display{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;margin-top:.5rem;padding:2.5rem 1rem 1rem;position:relative}.location-display .location-clear-btn{height:28px;position:absolute;right:.75rem;top:.75rem;width:28px;z-index:10}.location-display .location-accuracy,.location-display .location-address,.location-display .location-coordinates,.location-display .location-place-name,.location-display .location-timestamp{font-size:.875rem;margin-bottom:.5rem}.location-display .location-accuracy:last-child,.location-display .location-address:last-child,.location-display .location-coordinates:last-child,.location-display .location-place-name:last-child,.location-display .location-timestamp:last-child{margin-bottom:0}.location-display .location-accuracy strong,.location-display .location-address strong,.location-display .location-coordinates strong,.location-display .location-place-name strong,.location-display .location-timestamp strong{color:var(--df-color-text-dark);margin-right:.5rem}.dark .location-display{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .location-display strong{color:var(--df-color-text-light)}.location-error{background:var(--df-color-error-light);border-left:3px solid var(--df-color-error);border-radius:4px;color:var(--df-color-error);font-size:.875rem;margin-top:.5rem;padding:.5rem}.location-map-container{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:8px;margin-top:1rem;padding:1rem}.location-map-header{margin-bottom:1rem}.location-map-header h4{color:var(--df-color-text-dark);font-size:1rem;font-weight:600;margin:0 0 .5rem}.location-map-header p{color:var(--df-color-text-light);font-size:.875rem;margin:0}.location-search{margin-bottom:1rem}.search-form{width:100%}.search-input-group{align-items:center;display:flex;gap:.5rem}.search-input{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;color:var(--df-color-text-dark);flex:1;font-size:.875rem;padding:.75rem}.search-input:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px var(--df-color-primary-light);outline:none}.search-input:disabled{cursor:not-allowed;opacity:.6}.search-input::placeholder{color:var(--df-color-text-light)}.search-btn{align-items:center;background:var(--df-color-primary);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.75rem 1rem;transition:all .2s ease-in-out}.search-btn:hover:not(:disabled){background:var(--df-color-primary-dark)}.search-btn:disabled{cursor:not-allowed;opacity:.6}.search-btn .loading-spinner{animation:spin 1s linear infinite}.location-map{border-radius:6px;overflow:hidden;position:relative;transition:cursor .2s ease-in-out;user-select:none}.location-map:hover:not(.dragging){border-color:var(--df-color-primary)}.location-map.dragging{cursor:grabbing!important}.map-marker{color:var(--df-color-primary);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.map-marker.current-location{color:var(--df-color-success)}.map-marker.selected-location{color:var(--df-color-primary)}.map-center-indicator{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--df-color-primary)}.map-controls{display:flex;flex-direction:column;gap:.25rem;position:absolute;right:1rem;top:1rem;z-index:20}.map-zoom-btn{align-items:center;background:#fff;border:1px solid var(--df-color-fb-border);border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:pointer;display:flex;font-size:1.2rem;font-weight:700;height:32px;justify-content:center;transition:all .2s ease-in-out;width:32px}.map-zoom-btn:hover:not(:disabled){background:var(--df-color-fb-border);transform:scale(1.05)}.map-zoom-btn:disabled{cursor:not-allowed;opacity:.5}.location-loading{align-items:center;color:var(--df-color-text-medium);display:flex;font-size:.875rem;gap:.5rem;margin-top:1rem;padding:.75rem}.location-loading .loading-spinner{animation:spin 1s linear infinite}.location-map-instructions{background:var(--df-color-fb-border);border-radius:4px;font-size:.875rem;margin-top:1rem;padding:.75rem}.location-map-instructions p{color:var(--df-color-text-dark);font-weight:600;margin:0 0 .5rem}.location-map-instructions ul{margin:0;padding-left:1.5rem}.location-map-instructions ul li{color:var(--df-color-text-light);margin-bottom:.25rem}.dark .location-map-container{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .location-map-header h4{color:var(--df-color-text-light)}.dark .location-map-header p{color:var(--df-color-text-dark)}.dark .search-input{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border);color:var(--df-color-text-light)}.dark .search-input::placeholder{color:var(--df-color-text-dark)}.dark .map-zoom-btn{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border);color:var(--df-color-text-light)}.dark .location-map-instructions,.dark .map-zoom-btn:hover:not(:disabled){background:var(--df-color-fb-border)}.dark .location-map-instructions p{color:var(--df-color-text-light)}.dark .location-map-instructions li{color:var(--df-color-text-dark)}.instruction-group{width:100%}.instruction-label{color:var(--df-color-text-dark);font-size:16px!important;font-weight:600!important;margin-bottom:.75rem}.dark .instruction-label{color:var(--df-color-text-light)}.instruction-rich-editor{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;overflow:hidden;width:100%}.dark .instruction-rich-editor{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.instruction-toolbar{background:var(--df-color-fb-input-bg);border-bottom:1px solid var(--df-color-fb-border);flex-wrap:wrap;padding:.5rem}.instruction-toolbar,.instruction-toolbar .toolbar-group{align-items:center;display:flex;gap:0}.instruction-toolbar .toolbar-separator{background:var(--df-color-fb-border);height:24px;margin:0 .25rem;width:1px}.instruction-toolbar .toolbar-btn{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--df-color-text-medium);cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .2s ease-in-out;width:32px}.instruction-toolbar .toolbar-btn:hover{background:var(--df-color-fb-input-bg-hover);color:var(--df-color-text-dark)}.instruction-toolbar .toolbar-btn.active{background:var(--df-color-primary-light);color:var(--df-color-primary)}.instruction-toolbar .toolbar-btn:focus{outline:2px solid var(--df-color-primary);outline-offset:2px}.instruction-toolbar .toolbar-btn svg{height:16px;width:16px}.instruction-toolbar .color-picker-wrapper{align-items:center;display:flex;position:relative}.instruction-toolbar .color-picker-wrapper .color-picker-input{cursor:pointer;height:32px;opacity:0;position:absolute;width:32px;z-index:2}.instruction-toolbar .color-picker-wrapper .color-picker-label{align-items:center;border-radius:4px;cursor:pointer;display:flex;font-size:1rem;font-weight:600;height:32px;justify-content:center;transition:all .2s ease-in-out;width:32px}.instruction-toolbar .color-picker-wrapper .color-picker-label:hover{background:var(--df-color-fb-input-bg-hover)}.dark .instruction-toolbar{background:var(--df-color-fb-input-bg);border-bottom-color:var(--df-color-fb-border)}.dark .instruction-toolbar .toolbar-separator{background:var(--df-color-fb-border)}.dark .instruction-toolbar .toolbar-btn{color:var(--df-color-text-light)}.dark .instruction-toolbar .toolbar-btn:hover{background:var(--df-color-fb-input-bg-hover);color:var(--df-color-text-light)}.dark .instruction-toolbar .toolbar-btn.active{background:var(--df-color-primary-light);color:var(--df-color-primary)}.instruction-editor-content{background:var(--df-color-fb-input-bg);color:var(--df-color-text-dark);font-family:inherit;font-size:.875rem;line-height:1.5;min-height:120px;outline:none;overflow-y:auto;padding:.75rem;resize:none}.instruction-editor-content:empty:before{color:var(--df-color-text-light);content:attr(data-placeholder);pointer-events:none}.instruction-editor-content:focus{outline:none}.instruction-editor-content img{border-radius:4px;height:auto;margin:.5rem 0;max-width:100%}.instruction-editor-content ol,.instruction-editor-content ul{margin:.5rem 0;padding-left:1.5rem}.instruction-editor-content li{margin:.25rem 0}.dark .instruction-editor-content{background:var(--df-color-fb-input-bg);color:var(--df-color-text-light)}.dark .instruction-editor-content:empty:before{color:var(--df-color-text-dark)}.instruction-preview-wrapper{width:100%}.instruction-preview-wrapper.instruction-list-numbers .instruction-preview-content ol{list-style:decimal;padding-left:1.5rem}.instruction-preview-wrapper.instruction-list-bullets .instruction-preview-content ul{list-style:disc;padding-left:1.5rem}.instruction-preview-content{color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:500;line-height:1.5;line-height:1.6}.instruction-preview-content img{border-radius:4px;height:auto;margin:.5rem 0;max-width:100%}.instruction-preview-content ol,.instruction-preview-content ul{margin:.5rem 0;padding-left:1.5rem}.instruction-preview-content li{margin:.25rem 0}.dark .instruction-preview-content{color:var(--df-color-text-light)}.instruction-style-options{background:var(--df-color-fb-input-bg);gap:.5rem;margin-bottom:.75rem;padding:.5rem;z-index:1000}.instruction-style-options,.instruction-style-options .style-btn{border:1px solid var(--df-color-fb-border);border-radius:4px;display:flex;position:relative}.instruction-style-options .style-btn{align-items:center;background:transparent;cursor:pointer;height:32px;justify-content:center;padding:0;transition:all .2s ease-in-out;width:32px;z-index:1001}.instruction-style-options .style-btn .style-btn-icon{color:var(--df-color-text-medium);font-size:.875rem;font-weight:500}.instruction-style-options .style-btn:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.instruction-style-options .style-btn:hover .style-btn-icon{color:var(--df-color-primary)}.instruction-style-options .style-btn.active{background:var(--df-color-primary);border-color:var(--df-color-primary)}.instruction-style-options .style-btn.active .style-btn-icon{color:#fff}.instruction-style-options .style-btn:focus{outline:2px solid var(--df-color-primary);outline-offset:2px}.dark .instruction-style-options{background:var(--df-color-fb-input-bg)}.dark .instruction-style-options,.dark .instruction-style-options .style-btn{border-color:var(--df-color-fb-border)}.dark .instruction-style-options .style-btn .style-btn-icon{color:var(--df-color-text-light)}.dark .instruction-style-options .style-btn:hover{background:var(--df-color-fb-input-bg-hover)}.dark .instruction-style-options .style-btn.active{background:var(--df-color-primary);border-color:var(--df-color-primary)}.dark .instruction-style-options .style-btn.active .style-btn-icon{color:#fff}.instruction-edit-wrapper{margin-bottom:1rem;width:100%}.instruction-textarea{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out}.instruction-textarea::placeholder{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .instruction-textarea{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .instruction-textarea::placeholder{color:var(--df-color-text-light)!important}.instruction-textarea:focus{box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2)}.instruction-textarea.is-invalid{border-color:var(--df-color-error-primary)}.instruction-textarea.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.instruction-textarea:disabled{cursor:not-allowed;opacity:.6}.instruction-textarea.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.instruction-textarea.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.instruction-textarea[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.instruction-textarea[readonly].form-textarea,.instruction-textarea[readonly][type=textarea]{background-color:#fff!important}.instruction-textarea{font-family:inherit;font-size:.875rem;line-height:1.5;min-height:120px;padding:.75rem;resize:none;width:100%}.instruction-textarea:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 3px var(--df-color-primary-light);outline:none}.instruction-textarea::placeholder{color:var(--df-color-text-light)}.dark .instruction-textarea{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border);color:var(--df-color-text-light)}.dark .instruction-textarea::placeholder{color:var(--df-color-text-dark)}.instruction-list-wrapper,.instruction-preview{width:100%}.instruction-list-wrapper.instruction-list-none .instruction-list,.instruction-preview.instruction-list-none .instruction-list{list-style:none;padding-left:0}.instruction-list-wrapper.instruction-list-numbers .instruction-list,.instruction-preview.instruction-list-numbers .instruction-list{list-style:decimal;padding-left:1.5rem}.instruction-list-wrapper.instruction-list-bullets .instruction-list,.instruction-preview.instruction-list-bullets .instruction-list{list-style:disc;padding-left:1.5rem}.instruction-list-wrapper.instruction-list-alpha .instruction-list,.instruction-preview.instruction-list-alpha .instruction-list{list-style:lower-alpha;padding-left:1.5rem}.instruction-list{list-style-position:outside;margin:0;padding:0}.instruction-item{color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:500;line-height:1.5;line-height:1.6;margin-bottom:.5rem}.instruction-item:last-child{margin-bottom:0}.dark .instruction-item{color:var(--df-color-text-light)}.instruction-preview{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;margin-top:1rem;padding:.75rem}.dark .instruction-preview{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.instruction-empty{color:var(--df-color-text-light);font-style:italic;padding:1rem;text-align:center}.instruction-empty p{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin:0}.dark .instruction-empty{color:var(--df-color-text-dark)}.raise-issue-modal-overlay{align-items:center;background:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;overflow-y:auto;padding:1rem;position:fixed;right:0;top:0;z-index:9999}.raise-issue-modal{background:#fff;border-radius:.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);color:#1f2937;display:flex;flex-direction:column;max-height:90vh;max-width:700px;width:100%}.raise-issue-modal-header{align-items:center;background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:.5rem .5rem 0 0;display:flex;justify-content:space-between;padding:1.25rem 1.5rem}.raise-issue-modal-header-left{align-items:center;display:flex;gap:.75rem}.raise-issue-modal-icon{color:#f97316;flex-shrink:0}.raise-issue-modal-header-text{display:flex;flex-direction:column;gap:.125rem}.raise-issue-modal-title-main{color:#1f2937;font-size:1.125rem;font-weight:600}.raise-issue-modal-close{align-items:center;background:none;border:none;border-radius:.25rem;color:#6b7280;cursor:pointer;display:flex;justify-content:center;padding:.25rem;transition:background-color .2s ease}.raise-issue-modal-close:hover{background:rgba(0,0,0,.05);color:#1f2937}.raise-issue-modal-content{background:#fff;flex:1;overflow-y:auto;padding:1.5rem}.raise-issue-fields-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}.raise-issue-field{display:flex;flex-direction:column;gap:.5rem}.raise-issue-field-full-width{grid-column:1/-1}.raise-issue-field-label{color:#374151;font-size:.875rem;font-weight:500}.raise-issue-required{color:#ef4444;margin-left:.25rem}.raise-issue-field-label-with-icon{align-items:center;color:#374151;display:flex;font-size:.875rem;font-weight:500;gap:.5rem}.raise-issue-field-label-with-icon svg{color:#6b7280}.raise-issue-field-input,.raise-issue-field-select,.raise-issue-field-textarea{background:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#1f2937;font-family:inherit;font-size:.875rem;padding:.625rem .75rem;transition:border-color .2s ease,box-shadow .2s ease}.raise-issue-field-input::placeholder,.raise-issue-field-textarea::placeholder{color:#9ca3af}.raise-issue-field-readonly,.raise-issue-field-select:disabled{background:#f9fafb;color:#6b7280;cursor:not-allowed}.raise-issue-field-select:disabled{opacity:1}.raise-issue-field-input:focus,.raise-issue-field-select:focus,.raise-issue-field-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.raise-issue-field-textarea{min-height:100px;resize:vertical}.raise-issue-field-value-with-icon{align-items:center;background:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;color:#1f2937;display:flex;font-size:.875rem;gap:.5rem;padding:.625rem .75rem}.raise-issue-field-value-with-icon svg{color:#6b7280;flex-shrink:0}.raise-issue-priority-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.priority-button{border:2px solid;border-radius:.375rem;cursor:pointer;flex:1;font-size:.875rem;font-weight:600;min-width:80px;padding:.625rem 1rem;position:relative;transition:all .2s ease}.priority-button.priority-low{background:#f0f9ff;border-color:#7dd3fc;color:#0369a1}.priority-button.priority-low:hover{background:#e0f2fe;border-color:#38bdf8}.priority-button.priority-low.active{background:#0ea5e9;border-color:#0ea5e9;box-shadow:0 4px 6px -1px rgba(14,165,233,.3);color:#fff;transform:translateY(-1px)}.priority-button.priority-medium{background:#fff7ed;border-color:#f97316;color:#c2410c}.priority-button.priority-medium:hover{background:#ffedd5;border-color:#ea580c}.priority-button.priority-medium.active{background:#f97316;border-color:#f97316;box-shadow:0 4px 6px -1px rgba(249,115,22,.3);color:#fff;transform:translateY(-1px)}.priority-button.priority-high{background:#fef2f2;border-color:#ef4444;color:#dc2626}.priority-button.priority-high:hover{background:#fee2e2;border-color:#dc2626}.priority-button.priority-high.active{background:#ef4444;border-color:#ef4444;box-shadow:0 4px 6px -1px rgba(239,68,68,.3);color:#fff;transform:translateY(-1px)}.raise-issue-assignee-wrapper{align-items:center;display:flex;position:relative}.raise-issue