.ufm { --ufm-primary: var(--primary-600, #2563eb); --ufm-primary-hover: var(--primary-700, #1d4ed8); --ufm-primary-soft: color-mix(in srgb, var(--primary-500, #2563eb) 12%, transparent); --ufm-primary-border: color-mix(in srgb, var(--primary-500, #2563eb) 45%, var(--ufm-surface)); --ufm-primary-ring: color-mix(in srgb, var(--primary-500, #2563eb) 18%, transparent); --ufm-border: #e5e7eb; --ufm-surface: #fff; --ufm-muted: #6b7280; --ufm-text: #111827; --ufm-danger: #dc2626; color: var(--ufm-text); }
.ufm *, .ufm *::before, .ufm *::after { box-sizing: border-box; }
.ufm [x-cloak] { display: none !important; }
.ufm__layout { width: 100%; max-width: 80rem; min-height: calc(100vh - 12rem); margin: 0 auto; display: grid; align-content: start; gap: 1rem; }
.ufm__hero { border: 1px solid var(--ufm-border); border-radius: .85rem; background: var(--ufm-surface); padding: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.ufm__hero-main, .ufm__search-row, .ufm__section-heading, .ufm__title-row, .ufm__toolbar, .ufm__form-actions, .ufm__file-actions { display: flex; align-items: center; }
.ufm__hero-main, .ufm__search-row, .ufm__section-heading { justify-content: space-between; gap: 1rem; }
.ufm__hero-actions { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.ufm__storage-switcher { position: relative; }
.ufm__storage-trigger { display: inline-flex; min-height: 2.65rem; align-items: center; gap: .5rem; border: 1px solid var(--ufm-border); border-radius: .6rem; background: var(--ufm-surface); padding: .55rem .7rem; color: var(--ufm-text); font: inherit; font-size: .825rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / .03); }
.ufm__storage-trigger:hover { border-color: var(--ufm-primary-border); background: var(--ufm-primary-soft); color: var(--ufm-primary); }.ufm__storage-trigger > svg { width: 1.05rem; height: 1.05rem; color: var(--ufm-primary); }.ufm__storage-trigger .ufm__storage-chevron { width: .9rem; height: .9rem; margin-left: .1rem; color: var(--ufm-muted); }
.ufm__storage-menu { position: absolute; z-index: 30; top: calc(100% + .45rem); right: 0; width: 12rem; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .65rem; background: var(--ufm-surface); padding: .3rem; box-shadow: 0 14px 28px rgb(15 23 42 / .16); }.ufm__storage-menu button { display: flex; width: 100%; align-items: center; gap: .5rem; border: 0; border-radius: .45rem; background: transparent; padding: .55rem; color: var(--ufm-text); text-align: left; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }.ufm__storage-menu button:hover, .ufm__storage-menu button.is-active { background: var(--ufm-primary-soft); color: var(--ufm-primary); }.ufm__storage-menu svg { width: 1rem; height: 1rem; }.ufm__storage-check { margin-left: auto; color: var(--ufm-primary); }
.ufm__storage-indicator { display: inline-flex; align-items: center; gap: .4rem; color: var(--ufm-muted); font-size: .78rem; font-weight: 600; }.ufm__storage-indicator svg { width: 1rem; height: 1rem; color: var(--ufm-primary); }.ufm__storage-indicator-label { color: var(--ufm-muted); font-weight: 500; }.ufm__storage-indicator-label + span { color: var(--ufm-text); font-weight: 700; }
.ufm__eyebrow { margin: 0; color: var(--ufm-primary); font-size: .875rem; font-weight: 700; }
.ufm__title-row { gap: .5rem; margin-top: .25rem; }
.ufm__title { margin: 0; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.025em; }
.ufm__section-heading p, .ufm__item-count, .ufm__file-size { margin: .15rem 0 0; color: var(--ufm-muted); font-size: .8125rem; }
.ufm__breadcrumb { display: flex; min-width: 0; align-items: center; gap: .35rem; margin-top: .4rem; overflow-x: auto; padding: .1rem 0; color: var(--ufm-muted); font-size: .75rem; scrollbar-width: thin; }
.ufm__breadcrumb > * { flex: none; }.ufm__breadcrumb button { display: inline-flex; min-width: 0; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }.ufm__breadcrumb button:hover { color: var(--ufm-primary); }.ufm__breadcrumb svg { width: .85rem; height: .85rem; }.ufm__breadcrumb-back { display: inline-grid !important; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid var(--ufm-border) !important; border-radius: .4rem !important; background: var(--ufm-surface) !important; }.ufm__breadcrumb-back:hover { border-color: var(--ufm-primary-border) !important; background: var(--ufm-primary-soft) !important; }.ufm__breadcrumb-current { white-space: nowrap; color: var(--ufm-text); font-weight: 700; }.ufm__breadcrumb-separator { color: #9ca3af; }
.ufm__toolbar { flex-wrap: wrap; gap: .5rem; }
.ufm__upload-dropzone { display: grid; width: 100%; min-height: 10rem; place-items: center; border: 1px dashed #bfdbfe; border-radius: .7rem; background: #f8fbff; padding: 1rem; color: var(--ufm-muted); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }.ufm__upload-dropzone:hover, .ufm__upload-dropzone.is-dragging { border-color: var(--ufm-primary); background: var(--ufm-primary-soft); box-shadow: 0 0 0 3px rgb(37 99 235 / .12); }.ufm__upload-dropzone svg { width: 1.6rem; height: 1.6rem; color: var(--ufm-primary); }.ufm__upload-dropzone-title { margin-top: .35rem; color: var(--ufm-text); font-size: .85rem; font-weight: 700; }.ufm__upload-dropzone-help { margin-top: .2rem; font-size: .7rem; line-height: 1.25; }.ufm__upload-browse { margin-top: .5rem; border: 1px solid #dbe3ef; border-radius: .35rem; background: var(--ufm-surface); padding: .35rem .7rem; color: var(--ufm-primary); font-size: .72rem; font-weight: 700; }
.ufm__button, .ufm__back, .ufm__text-button, .ufm__file-actions button { border: 0; font: inherit; cursor: pointer; }
.ufm__button { display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; padding: .65rem 1rem; font-size: .875rem; font-weight: 700; transition: background .15s, border-color .15s, opacity .15s; }
.ufm__button--primary { background: var(--ufm-primary); color: #fff; }
.ufm__button--primary:hover { background: #1d4ed8; }
.ufm__button--secondary { background: var(--ufm-surface); color: #374151; border: 1px solid #d1d5db; }
.ufm__button--secondary:hover, .ufm__button--ghost:hover { background: #f9fafb; }
.ufm__button--ghost { background: transparent; color: #4b5563; }
.ufm__button:disabled { cursor: not-allowed; opacity: .45; }
.ufm__back { border-radius: .4rem; background: transparent; padding: .25rem .5rem; color: var(--ufm-muted); font-size: .875rem; font-weight: 700; }
.ufm__back:hover, .ufm__text-button:hover { background: #f3f4f6; color: var(--ufm-text); }
.ufm__loading { margin-top: .75rem; color: var(--ufm-primary); font-size: .875rem; font-weight: 600; }
.ufm__error { margin: .75rem 0 0; color: var(--ufm-danger); font-size: .875rem; font-weight: 600; }
.ufm__upload-hint { margin: .65rem 0 0; color: var(--ufm-muted); font-size: .75rem; }
.ufm__upload-queue { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding: .7rem .8rem; border: 1px solid #bfdbfe; border-radius: .65rem; background: var(--ufm-primary-soft); color: var(--ufm-text); font-size: .8rem; }.ufm__upload-queue strong, .ufm__upload-queue span { display: block; }.ufm__upload-queue span { margin-top: .15rem; color: var(--ufm-muted); }.ufm__upload-queue ul { max-width: 50%; max-height: 4.5rem; margin: 0; padding-left: 1rem; overflow: auto; color: var(--ufm-muted); font-size: .75rem; }
.ufm__search { position: relative; display: block; width: min(100%, 36rem); }
.ufm__search-icon { position: absolute; inset: 0 auto 0 1rem; display: grid; place-items: center; color: #9ca3af; font-size: 1.35rem; }
.ufm__search input, .ufm__folder-form input { width: 100%; border: 1px solid var(--ufm-border); border-radius: .75rem; background: #f9fafb; color: var(--ufm-text); font: inherit; outline: none; }
.ufm__search input { padding: .8rem 1rem .8rem 2.7rem; }
.ufm__search input:focus, .ufm__folder-form input:focus { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .15); background: var(--ufm-surface); }
.ufm__section { display: grid; gap: .6rem; }
.ufm__section-heading h2 { margin: 0; font-size: 1rem; }
.ufm__text-button { background: transparent; padding: .35rem .5rem; border-radius: .45rem; color: var(--ufm-primary); font-size: .875rem; font-weight: 700; }
.ufm__library-actions { display: flex; align-items: center; gap: .25rem; }
.ufm__options { position: relative; }
.ufm__icon-button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 0; border-radius: .45rem; background: transparent; color: #4b5563; cursor: pointer; }
.ufm__icon-button:hover, .ufm__icon-button[aria-expanded="true"] { background: #f3f4f6; color: var(--ufm-primary); }
.ufm__icon-button svg { width: 1.2rem; height: 1.2rem; }
.ufm__options-menu { position: absolute; z-index: 20; top: calc(100% + .45rem); right: 0; width: 16.5rem; padding: .45rem; border: 1px solid var(--ufm-border); border-radius: .7rem; background: var(--ufm-surface); box-shadow: 0 12px 28px rgb(0 0 0 / .14); }
.ufm__options-label { margin: .45rem .5rem .3rem; color: var(--ufm-muted); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ufm__option { display: flex; width: 100%; align-items: center; gap: .55rem; border: 0; border-radius: .45rem; background: transparent; padding: .55rem; color: var(--ufm-text); text-align: left; font: inherit; font-size: .8rem; cursor: pointer; }
.ufm__option:hover, .ufm__option.is-active { background: var(--ufm-primary-soft); color: var(--ufm-primary); }
.ufm__option svg { width: 1rem; height: 1rem; flex: none; }
.ufm__options-divider { height: 1px; margin: .45rem 0; background: var(--ufm-border); }
.ufm__sort-select { width: calc(100% - 1rem); margin: 0 .5rem .45rem; border: 1px solid var(--ufm-border); border-radius: .4rem; background: var(--ufm-surface); padding: .45rem; color: var(--ufm-text); font: inherit; font-size: .8rem; }
.ufm__folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ufm__folder-card, .ufm__new-folder-card, .ufm__file-card { border: 1px solid var(--ufm-border); border-radius: .75rem; background: var(--ufm-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .03); }
.ufm__folder-card { display: flex; align-items: center; gap: .65rem; min-height: 4.75rem; padding: .68rem; color: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ufm__folder-card:hover, .ufm__file-card:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 6px 14px rgb(0 0 0 / .08); }
.ufm__folder-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: .6rem; background: #fef3c7; color: #d97706; }
.ufm__folder-icon svg { width: 1.55rem; height: 1.55rem; }
.ufm__folder-copy { min-width: 0; flex: 1; }
.ufm__folder-name, .ufm__file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ufm__folder-meta { display: block; margin-top: .25rem; color: var(--ufm-muted); font-size: .75rem; }
.ufm__folder-arrow { color: #9ca3af; font-size: 1.1rem; }
.ufm__folder-card--renaming { cursor: default; border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .14); }
.ufm__rename-field { min-width: 0; flex: 1; }
.ufm__rename-field input { width: 100%; border: 1px solid #93c5fd; border-radius: .4rem; background: var(--ufm-surface); padding: .45rem .55rem; color: var(--ufm-text); font: inherit; font-size: .875rem; font-weight: 700; outline: 0; }
.ufm__rename-field input:focus { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .16); }
.ufm__rename-save, .ufm__rename-cancel { width: 1.8rem; height: 1.8rem; border: 0; border-radius: .4rem; background: transparent; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.ufm__rename-save { color: #16a34a; }.ufm__rename-save:hover { background: #dcfce7; }.ufm__rename-cancel { color: var(--ufm-danger); }.ufm__rename-cancel:hover { background: #fee2e2; }
.ufm__new-folder-card { min-height: 4.75rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-style: dashed; border-color: #93c5fd; background: var(--ufm-primary-soft); color: #1d4ed8; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.ufm__new-folder-card:hover { background: #dbeafe; }
.ufm__file-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.ufm__file-card { position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ufm__file-card--new { border-color: #60a5fa; animation: ufm-new-file 1.25s ease-in-out 3; }
.ufm__file-card--renaming { padding: .75rem; border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .14); }
.ufm__file-rename-field { display: block; margin-top: .75rem; }.ufm__file-rename-field input { width: 100%; border: 1px solid #93c5fd; border-radius: .4rem; background: var(--ufm-surface); padding: .45rem .55rem; color: var(--ufm-text); font: inherit; font-size: .875rem; font-weight: 700; outline: 0; }.ufm__file-rename-field input:focus { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .16); }
.ufm__file-select { display: block; width: 100%; border: 0; background: transparent; padding: .75rem; color: inherit; text-align: left; cursor: pointer; }
.ufm__file-preview { display: grid; height: 8.1rem; place-items: center; overflow: hidden; border-radius: .55rem; background: #f3f4f6; color: #3b82f6; }
.ufm__file-preview svg { width: 2.6rem; height: 2.6rem; }
.ufm__file-preview img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ufm__file-preview--folder { background: #fef3c7; color: #d97706; }
.ufm__document-icon { display: grid; width: 3.1rem; height: 3.7rem; place-items: end center; border-radius: .3rem; background: #64748b; color: white; font-size: .55rem; font-weight: 800; letter-spacing: .04em; overflow: hidden; }.ufm__document-icon span { width: 100%; padding: .3rem 0; background: rgb(0 0 0 / .2); text-align: center; }.ufm__document-icon--pdf { background: #dc2626; }.ufm__document-icon--word { background: #2563eb; }.ufm__document-icon--sheet { background: #16a34a; }.ufm__document-icon--text { background: #64748b; }
.ufm__file-name { margin-top: .75rem; font-size: .875rem; }
.ufm__file-actions { position: absolute; z-index: 2; top: 1rem; right: 1rem; gap: .2rem; border: 1px solid var(--ufm-border); border-radius: .55rem; background: color-mix(in srgb, var(--ufm-surface) 92%, transparent); padding: .2rem; box-shadow: 0 4px 10px rgb(0 0 0 / .1); opacity: 0; pointer-events: none; transform: translateY(-.2rem); transition: opacity .15s, transform .15s; }
.ufm__file-card:hover .ufm__file-actions, .ufm__file-card:focus-within .ufm__file-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ufm__file-action { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 0; border-radius: .4rem; background: transparent; color: var(--ufm-primary); cursor: pointer; }.ufm__file-action:hover { background: var(--ufm-primary-soft); }.ufm__file-action svg { width: 1rem; height: 1rem; }.ufm__file-action--danger { color: var(--ufm-danger); }.ufm__file-action--danger:hover { background: #fee2e2; }
.ufm__empty-state { border: 1px dashed #d1d5db; border-radius: .85rem; background: #f9fafb; padding: 2.25rem 1.25rem; text-align: center; }
.ufm__empty-state div { font-size: 2.5rem; }
.ufm__empty-state h3 { margin: .75rem 0 0; font-size: 1rem; }
.ufm__empty-state p { margin: .3rem 0 0; color: var(--ufm-muted); font-size: .875rem; }
.ufm__pagination { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: .25rem; }.ufm__pagination-icon, .ufm__pagination-page { display: grid; min-width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--ufm-border); border-radius: .45rem; background: var(--ufm-surface); color: var(--ufm-text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }.ufm__pagination-icon:hover, .ufm__pagination-page:hover { border-color: #93c5fd; color: var(--ufm-primary); }.ufm__pagination-icon svg { width: 1rem; height: 1rem; }.ufm__pagination-page.is-active { border-color: var(--ufm-primary); background: var(--ufm-primary); color: #fff; }.ufm__pagination-ellipsis { width: 1.25rem; color: var(--ufm-muted); text-align: center; }
.ufm__pagination-icon:disabled { border-color: var(--ufm-border); background: #f8fafc; color: #cbd5e1; cursor: not-allowed; }
.ufm__preview-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; }.ufm__preview-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .7); }.ufm__preview-dialog { position: relative; display: grid; max-width: min(90vw, 70rem); max-height: 90vh; overflow: hidden; border-radius: .8rem; background: #111827; box-shadow: 0 25px 50px rgb(0 0 0 / .35); }.ufm__preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; color: white; }.ufm__preview-header p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 700; }.ufm__preview-header button { border: 0; background: transparent; color: white; font-size: 1.4rem; cursor: pointer; }.ufm__preview-dialog > img { display: block; max-width: 100%; max-height: calc(90vh - 3.2rem); object-fit: contain; }
.ufm__upload-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; }.ufm__upload-dialog { position: relative; width: min(94vw, 42rem); max-height: 90vh; overflow: auto; border-radius: .8rem; background: var(--ufm-surface); padding: 1rem; box-shadow: 0 25px 50px rgb(0 0 0 / .35); }.ufm__upload-dialog .ufm__preview-header { margin: -1rem -1rem 1rem; background: #111827; }.ufm__preview-header span { display: block; margin-top: .15rem; color: #cbd5e1; font-size: .7rem; }.ufm__upload-review { margin-top: 1rem; }.ufm__upload-review-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; font-size: .8rem; }.ufm__upload-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }.ufm__upload-preview-card { position: relative; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .55rem; background: #f8fafc; padding: .4rem; text-align: center; }.ufm__upload-preview-card--new { border-color: #60a5fa; animation: ufm-new-file 1.25s ease-in-out 3; }.ufm__upload-preview-card img { display: block; width: 100%; aspect-ratio: 1; border-radius: .35rem; object-fit: cover; }.ufm__upload-preview-card > span { display: grid; aspect-ratio: 1; place-items: center; border-radius: .35rem; background: #e2e8f0; color: #64748b; font-size: .6rem; font-weight: 800; }.ufm__upload-preview-card p { overflow: hidden; margin: .35rem 0 0; text-overflow: ellipsis; white-space: nowrap; color: var(--ufm-text); font-size: .68rem; font-weight: 700; }.ufm__upload-preview-card em { display: block; margin-top: .15rem; color: #16a34a; font-size: .62rem; font-style: normal; font-weight: 700; }.ufm__upload-remove { position: absolute; top: .55rem; right: .55rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 0; border-radius: 999px; background: rgb(15 23 42 / .72); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }.ufm__upload-remove:hover { background: rgb(15 23 42 / .92); }.ufm__upload-remove--danger { background: rgb(220 38 38 / .88); }.ufm__upload-remove--danger:hover { background: #b91c1c; }.ufm__upload-remove svg { width: .78rem; height: .78rem; }.ufm__upload-review-hint { margin: .6rem 0 0; color: var(--ufm-muted); font-size: .72rem; }
.ufm__upload-review-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; font-size: .8rem; }
.ufm-picker { --ufm-primary: var(--primary-600, #2563eb); --ufm-primary-hover: var(--primary-700, #1d4ed8); --ufm-primary-soft: color-mix(in srgb, var(--primary-500, #2563eb) 12%, transparent); --ufm-primary-border: color-mix(in srgb, var(--primary-500, #2563eb) 45%, var(--ufm-surface)); --ufm-primary-ring: color-mix(in srgb, var(--primary-500, #2563eb) 18%, transparent); --ufm-border: #e5e7eb; --ufm-surface: #fff; --ufm-muted: #6b7280; --ufm-text: #111827; --ufm-danger: #dc2626; display: flex; gap: .5rem; color: var(--ufm-text); }.ufm-picker *, .ufm-picker *::before, .ufm-picker *::after { box-sizing: border-box; }.ufm-picker [x-cloak] { display: none !important; }.ufm-picker__modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 1rem; }.ufm-picker__backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / .6); }.ufm-picker__dialog { position: relative; display: grid; width: min(96vw, 75rem); height: min(86vh, 46rem); overflow: hidden; border-radius: .8rem; background: var(--ufm-surface); box-shadow: 0 25px 50px rgb(0 0 0 / .35); }.ufm-picker__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; background: #111827; color: #fff; }.ufm-picker__header strong, .ufm-picker__header span { display: block; }.ufm-picker__header strong { font-size: .9rem; }.ufm-picker__header span { margin-top: .15rem; color: #cbd5e1; font-size: .7rem; }.ufm-picker__header button { border: 0; background: transparent; color: #fff; font-size: 1.4rem; cursor: pointer; }.ufm-picker-explorer { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); background: var(--ufm-surface); }.ufm-picker-explorer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ufm-border); padding: .75rem .9rem; }.ufm-picker-explorer__location { display: flex; min-width: 0; align-items: center; gap: .45rem; color: var(--ufm-text); font-size: .85rem; font-weight: 700; }.ufm-picker-explorer__location > svg { width: 1.1rem; height: 1.1rem; flex: none; color: #d97706; }.ufm-picker-explorer__location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ufm-picker-explorer__location button { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 0; border-radius: .4rem; background: transparent; color: var(--ufm-text); cursor: pointer; }.ufm-picker-explorer__location button:hover { background: var(--ufm-primary-soft); color: var(--ufm-primary); }.ufm-picker-explorer__location button svg { width: 1rem; height: 1rem; }.ufm-picker-explorer__search { position: relative; width: min(100%, 18rem); }.ufm-picker-explorer__search svg { position: absolute; top: 50%; left: .65rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--ufm-muted); }.ufm-picker-explorer__search input { width: 100%; border: 1px solid var(--ufm-border); border-radius: .5rem; background: #f8fafc; padding: .5rem .65rem .5rem 2.1rem; color: var(--ufm-text); font: inherit; font-size: .8rem; outline: 0; }.ufm-picker-explorer__search input:focus { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .14); }.ufm-picker-explorer__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; gap: .7rem; overflow: auto; padding: .9rem; }.ufm-picker-explorer__item { min-width: 0; border: 1px solid var(--ufm-border); border-radius: .65rem; background: var(--ufm-surface); padding: .55rem; color: var(--ufm-text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }.ufm-picker-explorer__item:hover, .ufm-picker-explorer__item:focus { border-color: #93c5fd; box-shadow: 0 4px 12px rgb(0 0 0 / .08); outline: 0; transform: translateY(-1px); }.ufm-picker-explorer__thumbnail { display: grid; height: 6.5rem; place-items: center; overflow: hidden; border-radius: .45rem; background: #f3f4f6; color: #3b82f6; }.ufm-picker-explorer__thumbnail img { width: 100%; height: 100%; object-fit: cover; }.ufm-picker-explorer__thumbnail--folder { background: #fef3c7; color: #d97706; }.ufm-picker-explorer__thumbnail svg { width: 2.4rem; height: 2.4rem; }.ufm-picker-explorer__name { display: block; overflow: hidden; margin-top: .5rem; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; font-weight: 700; }.ufm-picker-explorer__meta { display: block; margin-top: .15rem; color: var(--ufm-muted); font-size: .68rem; }.ufm-picker-explorer__empty { display: grid; place-content: center; justify-items: center; gap: .45rem; color: var(--ufm-muted); text-align: center; }.ufm-picker-explorer__empty svg { width: 2.3rem; height: 2.3rem; color: #d97706; }.ufm-picker-explorer__empty strong { color: var(--ufm-text); font-size: .9rem; }.ufm-picker-explorer__empty span { font-size: .75rem; }
.ufm__selection-toolbar { display: flex; align-items: center; gap: .5rem; border: 1px solid #bfdbfe; border-radius: .65rem; background: var(--ufm-primary-soft); padding: .55rem .65rem; color: var(--ufm-text); font-size: .8rem; font-weight: 700; }.ufm__selection-toolbar span { margin-right: auto; }.ufm__button--danger { background: var(--ufm-danger); color: #fff; }.ufm__button--danger:hover { background: #b91c1c; }.ufm__button--danger svg { width: 1rem; height: 1rem; margin-right: .35rem; }.ufm__file-card--selected { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .14); }.ufm__selection-toggle { position: absolute; z-index: 3; top: .7rem; left: .7rem; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--ufm-border); border-radius: .45rem; background: color-mix(in srgb, var(--ufm-surface) 92%, transparent); color: transparent; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }.ufm__selection-toggle svg { width: 1rem; height: 1rem; }.ufm__file-card:hover .ufm__selection-toggle, .ufm__file-card:focus-within .ufm__selection-toggle, .ufm__file-card--selected .ufm__selection-toggle { opacity: 1; }.ufm__selection-toggle[aria-pressed="true"] { border-color: var(--ufm-primary); background: var(--ufm-primary); color: #fff; }
.ufm__folder-card-wrap { position: relative; }.ufm__folder-card-wrap .ufm__folder-card { width: 100%; }.ufm__folder-card-wrap:hover .ufm__selection-toggle, .ufm__folder-card-wrap:focus-within .ufm__selection-toggle, .ufm__folder-card-wrap--selected .ufm__selection-toggle { opacity: 1; }.ufm__folder-card-wrap--selected .ufm__folder-card { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / .14); }
.ufm-picker-explorer { grid-template-rows: auto minmax(0, 1fr); }.ufm-picker-explorer__toolbar-actions { display: flex; align-items: center; gap: .45rem; }.ufm-picker-explorer__options { position: relative; }.ufm-picker-explorer__icon-button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--ufm-border); border-radius: .45rem; background: var(--ufm-surface); color: var(--ufm-text); cursor: pointer; }.ufm-picker-explorer__icon-button:hover, .ufm-picker-explorer__icon-button[aria-expanded="true"] { border-color: #93c5fd; color: var(--ufm-primary); }.ufm-picker-explorer__icon-button svg { width: 1rem; height: 1rem; }.ufm-picker-explorer__options-menu { position: absolute; z-index: 5; top: calc(100% + .35rem); right: 0; width: 14.5rem; border: 1px solid var(--ufm-border); border-radius: .6rem; background: var(--ufm-surface); padding: .4rem; box-shadow: 0 12px 24px rgb(0 0 0 / .14); }.ufm-picker-explorer__options-menu p { margin: .35rem .4rem .25rem; color: var(--ufm-muted); font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.ufm-picker-explorer__options-menu button { display: block; width: 100%; border: 0; border-radius: .35rem; background: transparent; padding: .45rem; color: var(--ufm-text); text-align: left; font: inherit; font-size: .72rem; cursor: pointer; }.ufm-picker-explorer__options-menu button:hover, .ufm-picker-explorer__options-menu button.is-active { background: var(--ufm-primary-soft); color: var(--ufm-primary); }.ufm-picker-explorer__options-menu hr { height: 1px; margin: .35rem 0; border: 0; background: var(--ufm-border); }.ufm-picker-explorer__options-menu select { width: calc(100% - .8rem); margin: 0 .4rem .35rem; border: 1px solid var(--ufm-border); border-radius: .35rem; background: var(--ufm-surface); padding: .4rem; color: var(--ufm-text); font: inherit; font-size: .72rem; }.ufm-picker-explorer__upload-button { display: inline-flex; align-items: center; gap: .3rem; border: 0; border-radius: .45rem; background: var(--ufm-primary); padding: .52rem .65rem; color: #fff; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }.ufm-picker-explorer__upload-button:hover { background: #1d4ed8; }.ufm-picker-explorer__upload-button svg { width: .95rem; height: .95rem; }.ufm-picker-explorer__content { min-height: 0; overflow: auto; padding: .9rem; }.ufm-picker-explorer__section + .ufm-picker-explorer__section { margin-top: 1.15rem; }.ufm-picker-explorer__section h3 { margin: 0 0 .55rem; color: var(--ufm-text); font-size: .85rem; }.ufm-picker-explorer__empty-row { margin: 0; color: var(--ufm-muted); font-size: .75rem; }.ufm-picker-upload { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 1rem; }.ufm-picker-upload__backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / .6); }.ufm-picker-upload__dialog { position: relative; width: min(94vw, 34rem); overflow: hidden; border-radius: .75rem; background: var(--ufm-surface); box-shadow: 0 25px 50px rgb(0 0 0 / .35); }.ufm-picker-upload__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: #111827; padding: .7rem .9rem; color: #fff; }.ufm-picker-upload__header strong, .ufm-picker-upload__header span { display: block; }.ufm-picker-upload__header strong { font-size: .85rem; }.ufm-picker-upload__header span { margin-top: .15rem; color: #cbd5e1; font-size: .68rem; }.ufm-picker-upload__header button { border: 0; background: transparent; color: #fff; font-size: 1.35rem; cursor: pointer; }.ufm-picker-upload__dropzone { display: grid; min-height: 11rem; place-items: center; border: 1px dashed #93c5fd; margin: .9rem; border-radius: .65rem; background: #f8fbff; padding: 1rem; color: var(--ufm-muted); text-align: center; cursor: pointer; }.ufm-picker-upload__dropzone.is-dragging, .ufm-picker-upload__dropzone:hover { border-color: var(--ufm-primary); background: var(--ufm-primary-soft); }.ufm-picker-upload__dropzone svg { width: 1.65rem; height: 1.65rem; color: var(--ufm-primary); }.ufm-picker-upload__dropzone strong { margin-top: .4rem; color: var(--ufm-text); font-size: .82rem; }.ufm-picker-upload__dropzone span { margin-top: .2rem; font-size: .68rem; }.ufm-picker-upload__dropzone em { margin-top: .5rem; border: 1px solid var(--ufm-border); border-radius: .35rem; background: var(--ufm-surface); padding: .3rem .55rem; color: var(--ufm-primary); font-size: .7rem; font-style: normal; font-weight: 700; }.ufm-picker-upload__error, .ufm-picker-upload__success { margin: -.2rem .9rem .9rem; font-size: .75rem; font-weight: 700; }.ufm-picker-upload__error { color: var(--ufm-danger); }.ufm-picker-upload__success { color: #16a34a; }.ufm-picker-upload__progress { margin: 0 .9rem .9rem; }.ufm-picker-upload__progress > div { display: flex; justify-content: space-between; color: var(--ufm-muted); font-size: .72rem; font-weight: 700; }.ufm-picker-upload__progress i { display: block; height: .4rem; margin-top: .3rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }.ufm-picker-upload__progress b { display: block; width: 0; height: 100%; background: var(--ufm-primary); transition: width .15s ease; }
.ufm-uni-picker { display: grid; gap: .7rem; }.ufm-uni-picker-upload__dropzone { display: grid; min-height: 9rem; place-items: center; border: 1px dashed #93c5fd; border-radius: .7rem; background: #f8fbff; padding: 1rem; color: var(--ufm-muted); text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; }.ufm-uni-picker-upload__dropzone:hover, .ufm-uni-picker-upload__dropzone.is-dragging { border-color: var(--ufm-primary); background: var(--ufm-primary-soft); box-shadow: 0 0 0 3px rgb(37 99 235 / .12); }.ufm-uni-picker-upload__dropzone svg { width: 1.7rem; height: 1.7rem; color: var(--ufm-primary); }.ufm-uni-picker-upload__dropzone strong, .ufm-uni-picker-upload__dropzone span { display: block; }.ufm-uni-picker-upload__dropzone strong { margin-top: .4rem; color: var(--ufm-text); font-size: .85rem; }.ufm-uni-picker-upload__dropzone span { margin-top: .2rem; font-size: .72rem; }.ufm-uni-picker-upload__dropzone button { margin-top: .5rem; border: 1px solid var(--ufm-border); border-radius: .35rem; background: var(--ufm-surface); padding: .35rem .65rem; color: var(--ufm-primary); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }.ufm-uni-picker-upload__dropzone button:hover { background: var(--ufm-primary-soft); }.ufm-uni-picker-upload__progress { margin-top: .45rem; }.ufm-uni-picker-upload__progress span { color: var(--ufm-muted); font-size: .72rem; font-weight: 700; }.ufm-uni-picker-upload__progress i { display: block; height: .4rem; margin-top: .25rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }.ufm-uni-picker-upload__progress b { display: block; width: 0; height: 100%; background: var(--ufm-primary); transition: width .15s ease; }.ufm-uni-picker-upload__error { margin: .45rem 0 0; color: var(--ufm-danger); font-size: .75rem; font-weight: 700; }.ufm-uni-picker__library-button, .ufm-uni-picker__clear { display: inline-flex; width: fit-content; align-items: center; border: 0; border-radius: .45rem; background: transparent; padding: .35rem .45rem; color: var(--ufm-primary); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }.ufm-uni-picker__library-button:hover, .ufm-uni-picker__clear:hover { background: var(--ufm-primary-soft); }.ufm-uni-picker__library-button svg { width: 1rem; height: 1rem; margin-right: .35rem; }.ufm-uni-picker__selected { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }.ufm-uni-picker__selected.is-single { width: min(100%, 12rem); min-width: 8rem; grid-template-columns: minmax(0, 1fr); }.ufm-uni-picker__card { position: relative; min-width: 8rem; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .65rem; background: var(--ufm-surface); padding: .4rem; }.ufm-uni-picker__preview { display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; border: 0; border-radius: .4rem; background: #f3f4f6; color: var(--ufm-text); cursor: pointer; }.ufm-uni-picker__preview img { width: 100%; height: 100%; object-fit: cover; }.ufm-uni-picker__name { display: block; overflow: hidden; margin-top: .35rem; text-overflow: ellipsis; white-space: nowrap; color: var(--ufm-text); font-size: .7rem; font-weight: 700; }.ufm-uni-picker__remove { position: absolute; top: .65rem; right: .65rem; display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 0; border-radius: 999px; background: rgb(15 23 42 / .72); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }.ufm-uni-picker__remove svg { width: .85rem; height: .85rem; }.ufm-uni-picker__card:hover .ufm-uni-picker__remove, .ufm-uni-picker__card:focus-within .ufm-uni-picker__remove { opacity: 1; }.ufm-uni-picker__remove:hover { background: var(--ufm-danger); }.ufm-uni-picker__preview-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 1rem; }.ufm-uni-picker__preview-dialog { position: relative; max-width: min(90vw, 70rem); max-height: 90vh; overflow: hidden; border-radius: .75rem; background: #111827; box-shadow: 0 25px 50px rgb(0 0 0 / .35); }.ufm-uni-picker__preview-dialog button { position: absolute; z-index: 1; top: .45rem; right: .55rem; border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }.ufm-uni-picker__preview-dialog img { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; }
.ufm__upload-modal { z-index: 40; }
.ufm__upload-progress { margin-top: .8rem; }.ufm__upload-progress-label { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; color: var(--ufm-muted); font-size: .75rem; font-weight: 700; }.ufm__upload-progress-track { height: .45rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }.ufm__upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ufm-primary); transition: width .15s ease; }
.ufm__visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.dark .ufm { --ufm-border: rgb(255 255 255 / .12); --ufm-surface: #111827; --ufm-muted: #9ca3af; --ufm-text: #f9fafb; --ufm-primary-soft: rgb(37 99 235 / .14); }
.dark .ufm-picker { --ufm-border: rgb(255 255 255 / .12); --ufm-surface: #111827; --ufm-muted: #9ca3af; --ufm-text: #f9fafb; --ufm-primary-soft: rgb(37 99 235 / .14); }
.dark .ufm__search input, .dark .ufm__file-preview, .dark .ufm__empty-state, .dark .ufm__new-folder-card, .dark .ufm__preview-copy code, .dark .ufm__rename-field input, .dark .ufm__file-rename-field input { background: rgb(255 255 255 / .05); color: var(--ufm-text); }
.dark .ufm__new-folder-card:hover { background: var(--ufm-primary-soft); }
.dark .ufm__rename-action--save:hover { background: rgb(22 163 74 / .2); }
.dark .ufm__rename-action--cancel:hover { background: rgb(220 38 38 / .2); }
.dark .ufm__rename-save:hover { background: rgb(22 163 74 / .2); }
.dark .ufm__rename-cancel:hover { background: rgb(220 38 38 / .2); }
.dark .ufm-picker-explorer__search input, .dark .ufm-picker-explorer__thumbnail, .dark .ufm-picker-upload__preview-card { background: rgb(255 255 255 / .05); color: var(--ufm-text); }
.dark .ufm-uni-picker-upload__dropzone, .dark .ufm-uni-picker__preview { background: rgb(255 255 255 / .05); }
.dark .ufm__button--secondary { border-color: rgb(255 255 255 / .2); background: transparent; color: #e5e7eb; }
.dark .ufm__upload-dropzone { border-color: rgb(96 165 250 / .35); background: rgb(37 99 235 / .08); }.dark .ufm__upload-dropzone:hover, .dark .ufm__upload-dropzone.is-dragging { background: rgb(37 99 235 / .18); }.dark .ufm__upload-browse { border-color: rgb(255 255 255 / .15); background: rgb(255 255 255 / .08); }
.dark .ufm__icon-button { color: #d1d5db; }.dark .ufm__icon-button:hover, .dark .ufm__icon-button[aria-expanded="true"] { background: rgb(255 255 255 / .08); color: #93c5fd; }
.dark .ufm__button--secondary:hover, .dark .ufm__button--ghost:hover, .dark .ufm__back:hover, .dark .ufm__pagination-icon:hover, .dark .ufm__pagination-page:hover, .dark .ufm__text-button:hover { background: rgb(255 255 255 / .08); color: #93c5fd; }
.dark .ufm__pagination-icon:disabled { background: rgb(255 255 255 / .03); color: rgb(255 255 255 / .2); border-color: transparent; }
.dark .ufm__move-folder, .dark .ufm__move-cancel { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .1); }
.dark .ufm__move-folder:hover { background: var(--ufm-primary-soft); }
.dark .ufm__file-actions { border-color: rgb(255 255 255 / .1); }
@media (hover: none) { .ufm__file-actions { opacity: 1; pointer-events: auto; transform: none; } .ufm__selection-toggle { opacity: 1; } }
@keyframes ufm-new-file { 0%, 100% { box-shadow: 0 1px 2px rgb(0 0 0 / .03); background: var(--ufm-surface); } 50% { box-shadow: 0 0 0 4px rgb(59 130 246 / .23), 0 8px 18px rgb(37 99 235 / .14); background: var(--ufm-primary-soft); } }
@media (prefers-reduced-motion: reduce) { .ufm__file-card--new, .ufm__upload-preview-card--new { animation: none; box-shadow: 0 0 0 3px rgb(59 130 246 / .3); } }
@media (max-width: 72rem) { .ufm__file-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .ufm__folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ufm__file-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ufm-picker-explorer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ufm__hero-main, .ufm__search-row, .ufm__section-heading, .ufm-picker-explorer__toolbar { align-items: flex-start; flex-direction: column; } .ufm__search, .ufm-picker-explorer__search { width: 100%; } .ufm-picker-explorer__toolbar-actions { width: 100%; } .ufm-picker-explorer__search { flex: 1; } .ufm__folder-grid, .ufm__file-grid, .ufm__upload-preview-grid, .ufm-picker-explorer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ufm-picker__modal { padding: .5rem; } .ufm-picker__dialog { width: 100%; height: 92vh; } }
.ufm-uni-picker__selected.is-list { grid-template-columns: 1fr; }.ufm-uni-picker__selected.is-list .ufm-uni-picker__card { display: grid; min-height: 4rem; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: center; gap: .65rem; padding: .4rem; }.ufm-uni-picker__selected.is-list .ufm-uni-picker__preview { width: 3.25rem; height: 3.25rem; aspect-ratio: auto; }.ufm-uni-picker__selected.is-list .ufm-uni-picker__name { margin: 0; padding-right: 2rem; font-size: .78rem; }
.ufm-uni-picker__helper-text { margin: -.2rem 0 0; color: var(--ufm-muted); font-family: inherit; font-size: .875rem; font-weight: 400; line-height: 1.35; }
.ufm-picker__dialog { grid-template-rows: auto minmax(0, 1fr); }.ufm-picker__header { align-self: start; }
.ufm-picker__dialog:has(.ufm-picker-explorer__selection-footer) { grid-template-rows: auto minmax(0, 1fr); }.ufm-picker-explorer:has(.ufm-picker-explorer__selection-footer) { grid-template-rows: auto minmax(0, 1fr) auto; }.ufm-picker-explorer__item.is-selected { position: relative; border-color: var(--ufm-primary); background: var(--ufm-primary-soft); box-shadow: 0 0 0 3px rgb(37 99 235 / .2), 0 8px 16px rgb(37 99 235 / .1); }.ufm-picker-explorer__selection-check { position: absolute; z-index: 2; top: .65rem; right: .65rem; display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 2px solid var(--ufm-surface); border-radius: 999px; background: var(--ufm-primary); color: #fff; box-shadow: 0 2px 6px rgb(15 23 42 / .2); }.ufm-picker-explorer__selection-check svg { width: 1rem; height: 1rem; }.ufm-picker-explorer__item:disabled { cursor: not-allowed; opacity: .48; transform: none; }.ufm-picker-explorer__selection-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--ufm-border); background: var(--ufm-surface); padding: .65rem .9rem; }.ufm-picker-explorer__selection-footer strong, .ufm-picker-explorer__selection-footer span { display: block; }.ufm-picker-explorer__selection-footer strong { color: var(--ufm-text); font-size: .75rem; }.ufm-picker-explorer__selection-footer span { margin-top: .15rem; color: var(--ufm-danger); font-size: .68rem; }.ufm-picker-explorer__selection-footer button { border: 0; border-radius: .45rem; background: var(--ufm-primary); padding: .5rem .7rem; color: #fff; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }.ufm-picker-explorer__selection-footer button:disabled { cursor: not-allowed; opacity: .5; }
.ufm-picker-explorer__item { position: relative; }.ufm-picker__dialog:has(.ufm-picker-explorer__selection-footer) { grid-template-rows: auto minmax(0, 1fr); }.ufm-picker-explorer:has(.ufm-picker-explorer__selection-footer) { grid-template-rows: auto minmax(0, 1fr) auto; }.ufm-picker-explorer__item.is-selected { border-color: var(--ufm-primary); background: var(--ufm-primary-soft); box-shadow: 0 0 0 3px rgb(37 99 235 / .2), 0 8px 16px rgb(37 99 235 / .1); }.ufm-picker-explorer__selection-check { position: absolute; z-index: 2; top: .65rem; right: .65rem; display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 2px solid var(--ufm-surface); border-radius: 999px; background: var(--ufm-primary); color: #fff; box-shadow: 0 2px 6px rgb(15 23 42 / .2); pointer-events: none; }.ufm-picker-explorer__selection-check svg { width: 1rem; height: 1rem; }.ufm-picker-explorer__item:disabled { cursor: not-allowed; opacity: .48; transform: none; }.ufm-picker-explorer__selection-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--ufm-border); background: var(--ufm-surface); padding: .65rem .9rem; }.ufm-picker-explorer__selection-footer strong, .ufm-picker-explorer__selection-footer span { display: block; }.ufm-picker-explorer__selection-footer strong { color: var(--ufm-text); font-size: .75rem; }.ufm-picker-explorer__selection-footer span { margin-top: .15rem; color: var(--ufm-danger); font-size: .68rem; }.ufm-picker-explorer__selection-footer button { border: 0; border-radius: .45rem; background: var(--ufm-primary); padding: .5rem .7rem; color: #fff; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }.ufm-picker-explorer__selection-footer button:disabled { cursor: not-allowed; opacity: .5; }
.ufm, .ufm-picker { --ufm-primary: var(--primary-600, #2563eb); --ufm-primary-hover: var(--primary-700, #1d4ed8); --ufm-primary-soft: color-mix(in srgb, var(--primary-500, #2563eb) 12%, transparent); --ufm-primary-border: color-mix(in srgb, var(--primary-500, #2563eb) 45%, var(--ufm-surface)); --ufm-primary-ring: color-mix(in srgb, var(--primary-500, #2563eb) 18%, transparent); }.dark .ufm, .dark .ufm-picker { --ufm-primary-soft: color-mix(in srgb, var(--primary-500, #2563eb) 16%, transparent); }
.ufm__button--primary:hover, .ufm-picker-explorer__upload-button:hover, .ufm-picker-explorer__selection-footer button:hover { background: var(--ufm-primary-hover); }.ufm__upload-dropzone:hover, .ufm__upload-dropzone.is-dragging, .ufm-uni-picker-upload__dropzone:hover, .ufm-uni-picker-upload__dropzone.is-dragging { border-color: var(--ufm-primary); box-shadow: 0 0 0 3px var(--ufm-primary-ring); }.ufm__folder-card:hover, .ufm__file-card:hover, .ufm-picker-explorer__item:hover, .ufm-picker-explorer__item:focus, .ufm__pagination-icon:hover, .ufm__pagination-page:hover, .ufm-picker-explorer__icon-button:hover, .ufm-picker-explorer__icon-button[aria-expanded="true"] { border-color: var(--ufm-primary-border); }.ufm__search input:focus, .ufm__folder-form input:focus, .ufm__rename-field input:focus, .ufm__file-rename-field input:focus, .ufm-picker-explorer__search input:focus { box-shadow: 0 0 0 3px var(--ufm-primary-ring); }.ufm__new-folder-card { border-color: var(--ufm-primary-border); color: var(--ufm-primary); }.ufm-picker-explorer__item.is-selected { box-shadow: 0 0 0 3px var(--ufm-primary-ring), 0 8px 16px color-mix(in srgb, var(--ufm-primary) 10%, transparent); }
.ufm__folder-actions { position: absolute; z-index: 2; top: .45rem; right: .45rem; display: flex; border: 1px solid var(--ufm-border); border-radius: .55rem; background: color-mix(in srgb, var(--ufm-surface) 92%, transparent); padding: .2rem; box-shadow: 0 4px 10px rgb(0 0 0 / .1); opacity: 0; pointer-events: none; transform: translateY(-.2rem); transition: opacity .15s, transform .15s; }.ufm__folder-card-wrap:hover .ufm__folder-actions, .ufm__folder-card-wrap:focus-within .ufm__folder-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }.ufm__file-card--selected, .ufm__folder-card-wrap--selected .ufm__folder-card { border-color: var(--ufm-primary); background: var(--ufm-primary-soft); box-shadow: 0 0 0 3px var(--ufm-primary-ring), 0 8px 16px color-mix(in srgb, var(--ufm-primary) 10%, transparent); }.ufm__file-card, .ufm__folder-card-wrap { position: relative; }.ufm__selection-check { top: .5rem; right: .5rem; }
.ufm__file-card:focus-within:not(:hover) .ufm__file-actions, .ufm__folder-card-wrap:focus-within:not(:hover) .ufm__folder-actions { opacity: 0; pointer-events: none; transform: translateY(-.2rem); }.ufm__file-card:has(.ufm__file-action:focus-visible) .ufm__file-actions, .ufm__folder-card-wrap:has(.ufm__file-action:focus-visible) .ufm__folder-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ufm__file-actions { right: auto; left: 50%; transform: translate(-50%, -.2rem); }.ufm__file-card:hover .ufm__file-actions, .ufm__file-card:focus-within .ufm__file-actions { transform: translate(-50%, 0); }.ufm__file-card:focus-within:not(:hover) .ufm__file-actions { transform: translate(-50%, -.2rem); }.ufm__file-card:has(.ufm__file-action:focus-visible) .ufm__file-actions { transform: translate(-50%, 0); }
.ufm__file-action.is-selected { background: var(--ufm-primary); color: #fff; }.ufm__file-action.is-selected:hover { background: var(--ufm-primary-hover); color: #fff; }
.ufm__preview-dialog--details { width: min(94vw, 68rem); }.ufm__preview-body { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; }.ufm__preview-image { display: grid; min-width: 0; place-items: center; background: #0b1120; }.ufm__preview-image img { display: block; max-width: 100%; max-height: calc(90vh - 3.2rem); object-fit: contain; }.ufm__preview-details { overflow: auto; background: var(--ufm-surface); padding: 1rem; color: var(--ufm-text); }.ufm__preview-details h3 { margin: 0 0 1rem; font-size: .9rem; }.ufm__preview-details dl { margin: 0 0 1rem; }.ufm__preview-details dt { margin-top: .45rem; color: var(--ufm-muted); font-size: .7rem; font-weight: 700; }.ufm__preview-details dd { margin: .15rem 0 0; font-size: .78rem; word-break: break-word; }.ufm__preview-details p { margin: .9rem 0 .35rem; color: var(--ufm-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; }.ufm__preview-copy { display: flex; gap: .35rem; }.ufm__preview-copy code { min-width: 0; flex: 1; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .4rem; background: #f8fafc; padding: .4rem; color: var(--ufm-text); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.ufm__preview-copy button, .ufm__preview-rename { border: 0; border-radius: .4rem; background: var(--ufm-primary-soft); padding: .4rem .5rem; color: var(--ufm-primary); font-family: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }.ufm__preview-rename { display: inline-flex; align-items: center; gap: .35rem; width: 100%; justify-content: center; margin-top: 1rem; border: 1px solid var(--ufm-primary-border); }.ufm__preview-rename:hover, .ufm__preview-copy button:hover { background: var(--ufm-primary); color: #fff; }.ufm__preview-rename svg { width: .9rem; height: .9rem; } @media (max-width: 48rem) { .ufm__preview-body { grid-template-columns: 1fr; }.ufm__preview-image img { max-height: 55vh; }.ufm__preview-details { max-height: 35vh; } }
.ufm__rename-actions { display: flex; align-items: center; gap: .3rem; }.ufm__file-card--renaming .ufm__rename-actions { justify-content: flex-end; margin-top: .6rem; }.ufm__rename-action { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 0; border-radius: .4rem; background: transparent; cursor: pointer; }.ufm__rename-action svg { width: 1rem; height: 1rem; }.ufm__rename-action--save { color: #16a34a; }.ufm__rename-action--save:hover { background: #dcfce7; }.ufm__rename-action--cancel { color: var(--ufm-danger); }.ufm__rename-action--cancel:hover { background: #fee2e2; }.ufm__rename-action:focus-visible { outline: 2px solid var(--ufm-primary); outline-offset: 2px; }
.ufm__file-card--renaming { padding: 0; }
.ufm__file-rename-content { display: block; padding: .75rem; }
.ufm__file-card--renaming .ufm__file-actions, .ufm__file-card--renaming:focus-within:not(:hover) .ufm__file-actions { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ufm__file-rename-field { display: flex; align-items: center; gap: .15rem; }
.ufm__file-rename-field input { min-width: 0; flex: 1; }
.ufm__file-rename-extension { flex: none; color: var(--ufm-muted); font-size: .875rem; font-weight: 700; }
.ufm__option.is-active, .ufm-picker-explorer__options-menu button.is-active { display: flex; align-items: center; background: var(--ufm-primary); color: #fff; font-weight: 700; box-shadow: 0 1px 2px color-mix(in srgb, var(--ufm-primary) 35%, transparent); }
.ufm__upload-preview-card > .ufm__document-icon { display: grid; width: 3.1rem; height: 3.7rem; aspect-ratio: auto; place-items: end center; margin-inline: auto; border-radius: .3rem; background: #64748b; color: #fff; font-size: .55rem; font-weight: 800; letter-spacing: .04em; overflow: hidden; }
.ufm__upload-preview-card > .ufm__document-icon span { width: 100%; padding: .3rem 0; background: rgb(0 0 0 / .2); text-align: center; }
.ufm__upload-preview-card > .ufm__document-icon.ufm__document-icon--pdf { background: #dc2626; }
.ufm__upload-preview-card > .ufm__document-icon.ufm__document-icon--word { background: #2563eb; }
.ufm__upload-preview-card > .ufm__document-icon.ufm__document-icon--sheet { background: #16a34a; }
.ufm__preview-download { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .35rem; margin-top: .6rem; border: 1px solid var(--ufm-primary-border); border-radius: .4rem; background: var(--ufm-primary-soft); padding: .4rem .5rem; color: var(--ufm-primary); font-family: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.ufm__preview-download:hover { background: var(--ufm-primary); color: #fff; }
.ufm__preview-download svg { width: .9rem; height: .9rem; }

.ufm-picker-upload__review { border-top: 1px solid var(--ufm-border); padding: .85rem .9rem .95rem; }
.ufm-picker-upload__review-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .55rem; }
.ufm-picker-upload__review-heading > strong { color: var(--ufm-text); font-size: .78rem; }
.ufm-picker-upload__delete-all { border: 0; border-radius: .35rem; background: transparent; padding: .25rem .35rem; color: var(--ufm-danger); font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.ufm-picker-upload__delete-all:hover { background: #fef2f2; }
.ufm-picker-upload__preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.ufm-picker-upload__preview-card { position: relative; display: grid; min-width: 0; gap: .35rem; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .5rem; background: #f8fafc; padding: .35rem; color: var(--ufm-text); font-size: .65rem; font-weight: 700; }
.ufm-picker-upload__preview-card > img { display: block; width: 100%; aspect-ratio: 1; border-radius: .3rem; object-fit: cover; }
.ufm-picker-upload__preview-card > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ufm-picker-upload__preview-card > .ufm__document-icon { display: grid; width: 100%; aspect-ratio: 1; place-items: end center; border-radius: .3rem; background: #64748b; color: #fff; font-size: .55rem; font-weight: 800; letter-spacing: .04em; overflow: hidden; }
.ufm-picker-upload__preview-card > .ufm__document-icon span { width: 100%; padding: .3rem 0; background: rgb(0 0 0 / .2); text-align: center; }
.ufm-picker-upload__preview-card > .ufm__document-icon.ufm__document-icon--pdf { background: #dc2626; }
.ufm-picker-upload__preview-card > .ufm__document-icon.ufm__document-icon--word { background: #2563eb; }
.ufm-picker-upload__preview-card > .ufm__document-icon.ufm__document-icon--sheet { background: #16a34a; }
.ufm-picker-upload__remove { position: absolute; top: .55rem; right: .55rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 0; border-radius: 999px; background: rgb(220 38 38 / .9); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.ufm-picker-upload__preview-card:hover .ufm-picker-upload__remove, .ufm-picker-upload__preview-card:focus-within .ufm-picker-upload__remove { opacity: 1; }
.ufm-picker-upload__remove:hover { background: #b91c1c; }
.ufm-picker-upload__remove svg { width: .78rem; height: .78rem; }
.ufm-picker-explorer .fi-modal > .fi-modal-close-overlay, .ufm-picker-explorer .fi-modal > .fi-modal-window-ctn { z-index: 110; }

/* Folder browser used by the move dialog. */
.ufm__move-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; }
.ufm__move-backdrop { position: absolute; inset: 0; border: 0; background: rgb(15 23 42 / .62); cursor: default; }
.ufm__move-dialog { position: relative; display: flex; width: min(94vw, 52rem); max-height: min(44rem, calc(100vh - 2rem)); flex-direction: column; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .85rem; background: var(--ufm-surface); box-shadow: 0 24px 60px rgb(15 23 42 / .28); color: var(--ufm-text); }
.ufm__move-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ufm-border); padding: 1rem 1.15rem; }
.ufm__move-header h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.ufm__move-header p { margin: .3rem 0 0; color: var(--ufm-muted); font-size: .8rem; }
.ufm__move-close, .ufm__move-back { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border: 0; border-radius: .45rem; background: transparent; color: var(--ufm-muted); cursor: pointer; }
.ufm__move-close:hover, .ufm__move-back:hover { background: var(--ufm-primary-soft); color: var(--ufm-primary); }
.ufm__move-close svg, .ufm__move-back svg { width: 1.1rem; height: 1.1rem; }
.ufm__move-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--ufm-border); padding: .7rem 1.15rem; }
.ufm__move-breadcrumb { display: flex; min-width: 0; align-items: center; gap: .35rem; overflow: auto; color: var(--ufm-muted); font-size: .8rem; white-space: nowrap; }
.ufm__move-breadcrumb button { border: 0; background: transparent; padding: .2rem; color: var(--ufm-primary); font: inherit; cursor: pointer; }
.ufm__move-breadcrumb button:not(.ufm__move-back):hover { text-decoration: underline; }
.ufm__move-breadcrumb [aria-current="page"] { overflow: hidden; color: var(--ufm-text); font-weight: 700; text-overflow: ellipsis; }
.ufm__move-search { display: flex; width: min(100%, 15rem); flex: none; align-items: center; gap: .4rem; border: 1px solid var(--ufm-border); border-radius: .5rem; padding: .38rem .55rem; color: var(--ufm-muted); }
.ufm__move-search svg { width: .95rem; height: .95rem; flex: none; }
.ufm__move-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ufm-text); font: inherit; font-size: .8rem; }
.ufm__move-content { min-height: 15rem; overflow: auto; padding: 1rem 1.15rem; }
.ufm__move-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.ufm__move-folder { display: flex; min-height: 6.5rem; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .55rem; overflow: hidden; border: 1px solid var(--ufm-border); border-radius: .6rem; background: var(--ufm-surface); padding: .7rem; color: var(--ufm-text); text-align: left; font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; }
.ufm__move-folder:hover, .ufm__move-folder:focus-visible { border-color: var(--ufm-primary); background: var(--ufm-primary-soft); outline: 0; box-shadow: 0 0 0 3px var(--ufm-primary-ring); }
.ufm__move-folder > span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ufm__move-folder-icon { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .45rem; background: #fef3c7; color: #d97706; }
.ufm__move-folder-icon svg { width: 1.45rem; height: 1.45rem; }
.ufm__move-empty { display: grid; min-height: 13rem; place-content: center; justify-items: center; gap: .55rem; color: var(--ufm-muted); text-align: center; font-size: .85rem; }
.ufm__move-empty svg { width: 2rem; height: 2rem; color: #d97706; }
.ufm__move-empty p { margin: 0; }
.ufm__move-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ufm-border); padding: .85rem 1.15rem; }
.ufm__move-footer > div:first-child { display: grid; gap: .12rem; min-width: 0; }
.ufm__move-footer span, .ufm__move-footer small { color: var(--ufm-muted); font-size: .72rem; }
.ufm__move-footer strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.ufm__move-footer small { color: var(--ufm-danger); }
.ufm__move-footer-actions { display: flex; flex: none; gap: .5rem; }
.ufm__move-cancel, .ufm__move-confirm { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: .45rem; padding: .5rem .75rem; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.ufm__move-cancel { border: 1px solid var(--ufm-border); background: var(--ufm-surface); color: var(--ufm-text); }
.ufm__move-confirm { border: 1px solid var(--ufm-primary); background: var(--ufm-primary); color: #fff; }
.ufm__move-confirm:hover:not(:disabled) { background: var(--ufm-primary-hover); }
.ufm__move-confirm:disabled { opacity: .45; cursor: not-allowed; }
.ufm__move-confirm svg { width: 1rem; height: 1rem; }
@media (max-width: 40rem) { .ufm__move-toolbar, .ufm__move-footer { align-items: stretch; flex-direction: column; }.ufm__move-search { width: 100%; }.ufm__move-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ufm__move-footer-actions { justify-content: flex-end; }.ufm__move-content { min-height: 12rem; } }

/* File details preview */
.ufm__preview-dialog--details { display: grid; width: min(94vw, 72rem); height: min(90vh, 48rem); max-height: min(90vh, 48rem); grid-template-rows: auto minmax(0, 1fr); border: 1px solid rgb(255 255 255 / .14); border-radius: 1rem; box-shadow: 0 28px 76px rgb(15 23 42 / .38); }
.ufm__preview-header--details { min-height: 4.5rem; padding: .85rem 1rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
.ufm__preview-header--details > div { min-width: 0; }
.ufm__preview-header--details span { display: block; margin: 0 0 .15rem; color: #94a3b8; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ufm__preview-header--details p { overflow: hidden; margin: 0; color: #f8fafc; font-size: .92rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ufm__preview-header--details button { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border-radius: .5rem; color: #cbd5e1; font-size: 1.4rem; line-height: 1; }
.ufm__preview-header--details button:hover { background: rgb(255 255 255 / .12); color: #fff; }
.ufm__preview-body { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); }
.ufm__preview-image { min-height: 0; box-sizing: border-box; overflow: hidden; padding: 1.25rem; background: radial-gradient(circle at 50% 35%, #1e293b 0, #0b1120 68%); }
.ufm__preview-image img { width: auto; max-width: 100%; max-height: calc(90vh - 8rem); border-radius: .5rem; object-fit: contain; box-shadow: 0 12px 36px rgb(0 0 0 / .28); }
.ufm__preview-document { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; align-self: stretch; justify-self: stretch; border: 0; background: white; }
.ufm__preview-details { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: .85rem; padding: 0; overflow: hidden; }
.ufm__preview-details,
.ufm__preview-details button,
.ufm__preview-details code { font-family: inherit; }
.ufm__preview-details-content { display: flex; min-height: 0; flex-direction: column; gap: .75rem; overflow: auto; padding: 1.15rem 1.15rem 0; }
.ufm__preview-details-heading { display: flex; align-items: center; gap: .5rem; }
.ufm__preview-details-icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .5rem; background: var(--ufm-primary-soft); color: var(--ufm-primary); }
.ufm__preview-details-icon svg { width: 1rem; height: 1rem; }
.ufm__preview-details h3 { margin: 0; font-size: .92rem; }
.ufm__preview-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .9rem; margin: 0; padding: .85rem; border: 1px solid var(--ufm-border); border-radius: .65rem; background: #f8fafc; }
.ufm__preview-details dl > div { min-width: 0; }
.ufm__preview-details dt { margin: 0; font-size: .65rem; }
.ufm__preview-details dd { margin: .18rem 0 0; font-size: .76rem; }
.ufm__preview-copy-field { display: grid; min-width: 0; gap: .35rem; }
.ufm__preview-copy-field p { margin: 0; }
.ufm__preview-copy { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.ufm__preview-copy code { min-width: 0; overflow-x: auto; padding: .48rem .55rem; text-overflow: clip; scrollbar-width: none; -ms-overflow-style: none; }
.ufm__preview-copy code::-webkit-scrollbar { display: none; }
.ufm__preview-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .85rem 1.15rem 1rem; border-top: 1px solid var(--ufm-border); background: var(--ufm-surface); box-shadow: 0 -10px 24px rgb(15 23 42 / .05); }
.ufm__preview-download, .ufm__preview-open, .ufm__preview-rename { display: inline-flex; width: 100%; min-width: 0; min-height: 2.45rem; align-items: center; justify-content: center; gap: .4rem; margin: 0; padding: .5rem .7rem; font-size: .75rem; line-height: 1; white-space: nowrap; }
.ufm__preview-download { border: 1px solid var(--ufm-primary); border-radius: .45rem; background: var(--ufm-primary); color: #fff; font-family: inherit; font-weight: 700; cursor: pointer; }
.ufm__preview-actions.has-document-actions > .ufm__preview-download { grid-column: 1 / -1; }
.ufm__preview-download:hover { background: var(--ufm-primary-hover); border-color: var(--ufm-primary-hover); }
.ufm__preview-open { box-sizing: border-box; appearance: none; border: 1px solid var(--ufm-primary-border); border-radius: .45rem; background: var(--ufm-primary-soft); color: var(--ufm-primary); cursor: pointer; font-family: inherit; font-weight: 700; text-decoration: none; }
.ufm__preview-open:hover { background: var(--ufm-primary); color: #fff; }
.ufm__preview-download svg, .ufm__preview-rename svg { width: 1rem; height: 1rem; }

.dark .ufm__preview-details,
.dark .ufm__preview-actions { background: #111827; }
.dark .ufm__preview-details dl { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .05); }
.dark .ufm__preview-copy code { border-color: rgb(255 255 255 / .12); }

/* Move browser */
.ufm__move-dialog { border-radius: 1rem; }
.ufm__move-header { min-height: 5.4rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--ufm-primary-soft), var(--ufm-surface) 52%); }
.ufm__move-title-group { display: flex; min-width: 0; align-items: flex-start; gap: .75rem; }
.ufm__move-title-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: none; place-items: center; border: 1px solid var(--ufm-primary-border); border-radius: .6rem; background: var(--ufm-primary-soft); color: var(--ufm-primary); }
.ufm__move-title-icon svg { width: 1.2rem; height: 1.2rem; }
.ufm__move-title-group > div { min-width: 0; }
.ufm__move-title-group > div > span { display: block; margin-bottom: .12rem; color: var(--ufm-primary); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ufm__move-header h2 { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.ufm__move-header p { margin-top: .2rem; }
.ufm__move-close { border: 1px solid transparent; }
.ufm__move-footer { min-height: 4.75rem; padding: .8rem 1.25rem; background: #f8fafc; }
.ufm__move-footer > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .15rem .55rem; }
.ufm__move-destination-icon { grid-row: span 2; display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: .5rem; background: #fff; color: var(--ufm-primary); box-shadow: inset 0 0 0 1px var(--ufm-border); }
.ufm__move-destination-icon svg { width: 1rem; height: 1rem; }
.ufm__move-destination > div { display: grid; min-width: 0; gap: .1rem; }
.ufm__move-destination > div span { color: var(--ufm-muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ufm__move-footer strong { font-size: .8rem; }
.ufm__move-destination small { grid-column: 2; color: var(--ufm-danger); }
.ufm__move-cancel, .ufm__move-confirm { min-height: 2.35rem; padding: .5rem .85rem; }

@media (max-width: 48rem) {
    .ufm__preview-dialog--details { width: min(96vw, 36rem); }
    .ufm__preview-body { grid-template-columns: 1fr; overflow: auto; }
    .ufm__preview-image { min-height: 14rem; }
    .ufm__preview-image img { max-height: 42vh; }
    .ufm__preview-document { min-height: 42vh; }
    .ufm__preview-details { min-height: 18rem; max-height: none; }
    .ufm__preview-details-content { overflow: visible; }
    .ufm__preview-actions { position: sticky; bottom: 0; }
}

@media (max-width: 40rem) {
    .ufm__move-footer > div:first-child { width: 100%; }
    .ufm__move-footer-actions { width: 100%; }
    .ufm__move-cancel, .ufm__move-confirm { flex: 1; }
}