/* Scoped library layout: thumbnails, selection and metadata never share implicit grid cells. */
#tab-media { --ml-line: color-mix(in srgb, var(--text) 12%, transparent); --ml-soft: color-mix(in srgb, var(--surface) 88%, transparent); }
#tab-media .ml-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0 26px; }
#tab-media .ml-heading h2 { margin:8px 0; font-size:28px; letter-spacing:-.7px; }
#tab-media .ml-heading h2 span { display:inline-block; font-size:14px; font-weight:400; letter-spacing:0; color:var(--muted); margin-left:16px; }
#tab-media .ml-heading p { color:var(--muted); margin:0; font-size:13px; }
#tab-media .ml-workspace { display:grid; grid-template-columns:220px minmax(0,1fr); border:1px solid var(--ml-line); border-radius:20px; overflow:hidden; background:var(--ml-soft); }
#tab-media [hidden] { display:none!important; }
#tab-media .ml-sidebar { padding:22px 14px; border-right:1px solid var(--ml-line); min-width:0; background:color-mix(in srgb,var(--surface) 80%,transparent); }
#tab-media .ml-sidebar-title { display:flex; justify-content:space-between; padding:0 10px 18px; font-size:13px; }
#tab-media .ml-sidebar-title span { color:var(--muted); }
#mediaBedFolderTree { display:grid; gap:4px; max-height:460px; overflow:auto; }
#mediaBedFolderTree button { display:flex; align-items:center; gap:8px; width:100%; border:0; border-radius:9px; padding:11px 10px; text-align:left; color:var(--muted); background:transparent; cursor:pointer; min-width:0; font:inherit; font-size:12px; }
#mediaBedFolderTree button:hover { background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--text); }
#mediaBedFolderTree button[aria-current="true"] { color:var(--accent2); background:color-mix(in srgb,var(--accent2) 10%,transparent); }
#mediaBedFolderTree button span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mediaBedFolderTree button small { opacity:.7; }
#tab-media .ml-folder-tools { margin:20px 6px; font-size:12px; }
#tab-media summary { cursor:pointer; color:var(--text); }
#tab-media .ml-folder-tools label { font-size:11px; color:var(--muted); }
#tab-media .ml-storage { margin:24px 10px 0; border-top:1px solid var(--ml-line); padding-top:18px; }
#tab-media .ml-storage small { font-size:10px; color:var(--muted); }
#tab-media .ml-storage .workshop-quota-copy { font-size:10px; gap:4px; flex-wrap:wrap; }
#tab-media .ml-main { padding:24px; min-width:0; }
#tab-media .ml-import { border:1px solid var(--ml-line); border-radius:12px; margin-bottom:28px; background:color-mix(in srgb,var(--accent) 3%,transparent); }
#tab-media .ml-import > summary { display:flex; justify-content:space-between; gap:12px; padding:16px 18px; font-size:13px; font-weight:600; }
#tab-media .ml-import summary small { color:var(--muted); font-size:11px; font-weight:400; }
#tab-media .ml-import-body { border-top:1px solid var(--ml-line); padding:18px; }
#tab-media .ml-import-grid { display:grid; grid-template-columns:1fr 1fr 1.2fr; align-items:start; gap:16px; }
#tab-media label { font-size:12px; }
#tab-media .ml-import-grid label { margin-top:0; }
#tab-media .ml-drop { display:flex; align-items:center; gap:14px; border:1px dashed var(--ml-line); border-radius:10px; padding:18px; margin-top:16px; flex-wrap:wrap; }
#tab-media .ml-drop > span { flex:1; font-size:12px; color:var(--muted); min-width:100px; }
#tab-media .ml-drag { outline:2px dashed var(--accent2); outline-offset:-6px; }
#tab-media .ml-queue { display:grid; gap:6px; max-height:260px; overflow:auto; margin-top:12px; }
#tab-media .ml-queue-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,190px) auto; align-items:center; gap:10px; font-size:12px; padding:6px 0; }
#tab-media .ml-queue-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tab-media .ml-queue-row select { margin:0; }
#tab-media .ml-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
#tab-media .ml-toolbar h3 { font-size:19px; margin:0 0 4px; overflow-wrap:anywhere; }
#tab-media .ml-toolbar > div > span { color:var(--muted); font-size:11px; }
#tab-media .ml-search-row { display:flex; gap:8px; min-width:0; flex-wrap:wrap; justify-content:flex-end; }
#tab-media .ml-search-row input { width:230px; flex:1; min-width:120px; margin:0; }
#tab-media .ml-search-row select { width:auto; margin:0; }
#tab-media .ml-inline { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
#tab-media .ml-inline select { margin:0; width:auto; max-width:240px; }
#tab-media .ml-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
#tab-media .ml-actions > small { font-size:10px; color:var(--muted); }
#tab-media .ml-check { display:inline-flex; align-items:center; gap:6px; color:var(--muted); margin:0; font-size:11px; }
#tab-media .ml-check input { width:14px; margin:0; }
#tab-media .ml-selection { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 0; border-block:1px solid var(--ml-line); }
#mediaBedSelectionCount { font-size:11px; color:var(--muted); }
#tab-media .ml-operation { display:flex; align-items:center; gap:8px; min-height:38px; margin:4px 0; font-size:12px; }
#mediaBedStatus { flex:1; overflow-wrap:anywhere; }
#tab-media .ml-operation button:disabled { display:none; }
#tab-media .media-bed-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr)); align-items:start; gap:18px; }
#tab-media .media-bed-item { position:relative; display:flex; flex-direction:column; padding:0; gap:0; min-width:0; overflow:hidden; border-radius:13px; border:1px solid var(--ml-line); background:color-mix(in srgb,var(--surface) 94%,transparent); transition:border-color .18s,box-shadow .18s; }
#tab-media .media-bed-item:hover { transform:none; border-color:color-mix(in srgb,var(--accent2) 45%,var(--ml-line)); box-shadow:0 8px 22px #00000012; }
#tab-media .media-bed-item.is-selected { border-color:var(--accent2); }
#tab-media .media-bed-select { position:absolute; z-index:1; top:10px; left:10px; display:grid; place-items:center; width:29px; height:29px; border-radius:8px; margin:0; padding:0; background:color-mix(in srgb,var(--surface) 90%,transparent); border:1px solid var(--ml-line); }
#tab-media .media-bed-select input { width:15px; height:15px; margin:0; accent-color:var(--accent2); }
#tab-media .media-bed-preview { position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4/3; min-height:0; padding:12px; border:0; border-radius:0; background:repeating-conic-gradient(#7f899208 0% 25%,transparent 0% 50%) 50% / 20px 20px; cursor:zoom-in; }
#tab-media .media-bed-preview img { display:block; width:100%; height:100%; max-height:100%; object-fit:contain; border-radius:3px; }
#tab-media .media-bed-preview .ml-audio-art { color:var(--accent2); font-size:48px; text-align:center; }
#tab-media .media-bed-preview .ml-audio-art small { display:block; font-size:11px; letter-spacing:3px; color:var(--muted); }
#tab-media .media-bed-body { padding:15px; gap:10px; }
#tab-media .media-bed-body h4 { font-size:14px; font-weight:600; line-height:1.5; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-media .ml-meta { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--muted); }
#tab-media .ml-path { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-media .ml-tags { display:flex; gap:4px; flex-wrap:wrap; min-height:20px; }
#tab-media .ml-tags button { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; border-radius:5px; background:color-mix(in srgb,var(--accent2) 7%,transparent); color:var(--accent2); font-size:10px; padding:3px 6px; cursor:pointer; }
#tab-media .media-bed-actions { display:flex; justify-content:flex-start; gap:6px; margin:0; border-top:1px solid var(--ml-line); padding-top:10px; }
#tab-media .media-bed-actions .btn { font-size:11px; padding:6px 8px; }
#tab-media .ml-card-more { width:100%; font-size:11px; }
#tab-media .ml-card-more summary { color:var(--muted); }
#tab-media .ml-card-more .ml-inline { padding-top:8px; }
#tab-media .ml-empty { grid-column:1/-1; text-align:center; padding:65px 20px; color:var(--muted); border:1px dashed var(--ml-line); border-radius:12px; }
#tab-media .ml-empty strong { display:block; color:var(--text); font-size:17px; margin-bottom:10px; }
#tab-media .ml-empty p { font-size:12px; margin:0; }
#tab-media .ml-advanced { margin-top:30px; padding-top:16px; border-top:1px solid var(--ml-line); font-size:11px; color:var(--muted); }
.ml-sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden; clip-path:inset(50%); }
.ml-preview-dialog { width:min(1200px,94vw); max-width:94vw; height:min(900px,92vh); max-height:92vh; margin:auto; padding:0; border:1px solid var(--border); border-radius:16px; background:var(--surface,#121722); color:var(--text,#eee); box-shadow:0 30px 100px #0008; }
.ml-preview-dialog::backdrop { background:#050914cc; backdrop-filter:blur(8px); }
.ml-preview-dialog[open] { display:flex; flex-direction:column; }
.ml-preview-dialog header,.ml-preview-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; flex-shrink:0; }
.ml-preview-dialog header h3 { margin:0 0 4px; font-size:16px; overflow-wrap:anywhere; }
.ml-preview-dialog header small { color:var(--muted); font-size:11px; }
.ml-preview-content { flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; background:#080c1277; padding:16px; }
.ml-preview-content img { width:100%; height:100%; object-fit:contain; }
.ml-preview-content.is-original { display:block; }
.ml-preview-content.is-original img { width:auto; height:auto; max-width:none; max-height:none; margin:auto; }
.ml-preview-content audio { width:min(600px,90%); }
@media(max-width:1100px) { #tab-media .ml-workspace { grid-template-columns:190px minmax(0,1fr); } #tab-media .ml-main { padding:18px; } #tab-media .ml-toolbar { align-items:flex-start; flex-direction:column; } #tab-media .ml-search-row { width:100%; } #tab-media .ml-import-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { #tab-media .ml-heading { align-items:flex-start; } #tab-media .ml-heading h2 span { display:block; margin:8px 0 0; } #tab-media .ml-workspace { display:block; } #tab-media .ml-sidebar { border-right:0; border-bottom:1px solid var(--ml-line); padding:16px; } #mediaBedFolderTree { display:flex; max-height:120px; flex-wrap:wrap; } #mediaBedFolderTree button { width:auto; max-width:100%; } #tab-media .ml-storage { margin:12px 0 0; } #tab-media .ml-folder-tools { margin:14px 0 0; } #tab-media .ml-import summary small { display:none; } #tab-media .ml-main { padding:16px; } #tab-media .ml-selection > .ml-inline { width:100%; } #tab-media .ml-queue-row { grid-template-columns:minmax(0,1fr) 110px auto; } #tab-media .ml-heading > .btn { flex-shrink:0; } }