.file-upload{display:inline-flex;flex-direction:column;gap:var(--spacing-2);width:100%}.file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none}.file-upload__label{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--g-text-secondary)}.file-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-8) var(--g-spacing);border:2px dashed var(--g-border-color);border-radius:var(--g-radius);background:var(--g-background-subtle);cursor:pointer;transition:border-color var(--g-transition),background var(--g-transition);outline:none;text-align:center;user-select:none}.file-upload__dropzone:before{content:"";position:absolute;inset:0;background:#fff0;transition:background var(--g-transition);pointer-events:none;border-radius:inherit}.file-upload:not(.file-upload--disabled) .file-upload__dropzone:hover,.file-upload:not(.file-upload--disabled) .file-upload__dropzone:focus-visible{border-color:var(--g-border-color-emphasis)}.file-upload:not(.file-upload--disabled) .file-upload__dropzone:hover:before,.file-upload:not(.file-upload--disabled) .file-upload__dropzone:focus-visible:before{background:#ffffff0d}.file-upload--drag-over.file-upload--dropzone .file-upload__dropzone{border-color:var(--color-primary);border-style:solid}.file-upload--drag-over.file-upload--dropzone .file-upload__dropzone:before{background:#0066cc14}.file-upload--invalid .file-upload__dropzone{border-color:var(--color-danger)}.file-upload--compact .file-upload__dropzone{padding:var(--g-spacing);gap:var(--spacing-1)}.file-upload__dropzone-icon{font-size:2.5rem;color:var(--g-text-muted);transition:color var(--g-transition);line-height:1;display:flex}.file-upload:not(.file-upload--disabled) .file-upload__dropzone:hover .file-upload__dropzone-icon,.file-upload--drag-over .file-upload__dropzone-icon{color:var(--color-accent)}.file-upload--compact .file-upload__dropzone-icon{font-size:1.5rem}.file-upload__dropzone-text{display:flex;flex-direction:column;gap:var(--spacing-1)}.file-upload__dropzone-primary{font-size:var(--font-size-base);color:var(--g-text-secondary)}.file-upload--compact .file-upload__dropzone-primary{font-size:var(--font-size-sm)}.file-upload__dropzone-hint{font-size:var(--font-size-sm);color:var(--g-text-muted)}.file-upload__button-area{display:flex;align-items:center;flex-wrap:wrap;gap:var(--g-spacing-sm);padding:var(--spacing-1) 0}.file-upload--drag-over.file-upload--button .file-upload__button-area{outline:2px dashed var(--color-primary);outline-offset:4px;border-radius:var(--g-radius)}.file-upload__button{position:relative;display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--g-spacing-sm) var(--g-spacing);background:var(--g-background-elevated);border:var(--g-border-width) solid var(--g-border-color);border-radius:var(--g-radius);color:var(--g-text-secondary);font-size:var(--font-size-base);font-family:inherit;cursor:pointer;transition:border-color var(--g-transition),color var(--g-transition);white-space:nowrap}.file-upload__button:before{content:"";position:absolute;inset:0;background:#fff0;transition:background var(--g-transition);pointer-events:none;border-radius:inherit}@media(hover:hover){.file-upload__button:hover:not(:disabled){border-color:var(--g-border-color-emphasis)}.file-upload__button:hover:not(:disabled):before{background:#ffffff0d}}.file-upload__button:disabled{opacity:.5;cursor:not-allowed}.file-upload--compact .file-upload__button{padding:var(--spacing-1) var(--g-spacing-sm);font-size:var(--font-size-sm)}.file-upload__button-hint{font-size:var(--font-size-sm);color:var(--g-text-muted)}.file-upload__button-constraint{width:100%;font-size:var(--font-size-xs);color:var(--g-text-muted)}.file-upload__files{display:flex;flex-wrap:wrap;gap:var(--spacing-1)}.file-upload__error{font-size:var(--font-size-sm);color:var(--color-danger)}.file-upload--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}