:root{color-scheme:dark;--page:#050505;--panel:#24487e;--blue:#24487e;--line:#315f9f;--text:#edf2f8;--muted:#cfd7e2;--green:#a6e39e}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:4px}button{color:inherit;border:1px solid var(--line);border-radius:7px;background:#142d50;padding:9px 14px}button:hover{background:#24487e}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{background:var(--blue);border-bottom:1px solid #315f9f}.header-inner{max-width:1280px;margin:auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:20px}.brand{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--green);display:flex;align-items:center;gap:12px}.brand-mark{font-size:43px;line-height:1}.header-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.connection-badge{font-size:12px;color:#edf2f8}.connection-badge i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px}.host{font-size:11px;color:#cfd7e2}nav{background:#142d50;border-bottom:1px solid var(--line)}#tabs{max-width:1280px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:0 32px}#tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;padding:19px 10px;font-weight:600;color:#cfd7e2}#tabs button[aria-selected=true]{background:#24487e;color:var(--green);border-color:var(--green)}.count{font-size:11px;opacity:.65;margin-left:9px}main{max-width:1280px;margin:auto;padding:40px 32px 0}.library-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:38px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--muted);margin:0 0 9px}h1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;margin:0 0 12px}h1 span{color:var(--green)}p{margin:0 0 12px}.muted{color:var(--muted)}.source{display:flex;gap:15px;padding:18px 22px;border:1px solid var(--line);border-radius:10px;background:#142d50}.source .eyebrow{font-size:9px}.source p{margin:2px 0 5px;font-size:13px}.source small{font-size:10px;color:var(--muted)}.folder{font-size:34px;color:var(--green)}.toolbar{display:flex;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line)}#subtabs{display:flex;gap:8px;flex-wrap:wrap}#subtabs button{background:transparent;color:var(--muted);border-color:transparent}#subtabs button[aria-pressed=true]{color:var(--green);background:#142d50;border-color:#a6e39e}.search{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#142d50;border:1px solid var(--line);border-radius:7px}.search span{font-size:22px;line-height:1;color:var(--muted)}input{background:none;border:none;color:var(--text);width:200px;outline-offset:4px}.results-bar{display:flex;justify-content:space-between;align-items:center;margin:22px 0;color:var(--muted);font-size:12px}.results-bar p{margin:0}.results-bar select{background:transparent;color:var(--text);border:0;margin-left:8px;padding:5px}option{background:var(--panel)}.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.asset-card{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color .2s,transform .2s}.asset-card:hover{border-color:#a6e39e;transform:translateY(-3px)}.thumbnail{display:flex;position:relative;align-items:center;justify-content:center;width:100%;aspect-ratio:1.5;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;background:#142d50;overflow:hidden}.thumbnail img{width:100%;height:100%;object-fit:cover}.thumbnail:hover{background:#24487e}.format{position:absolute;top:12px;left:12px;border:1px solid #ffffff20;border-radius:4px;background:#000a;color:#edf2f8;font-size:9px;letter-spacing:1px;padding:3px 6px}.preview-hint{position:absolute;bottom:10px;right:10px;background:#000a;padding:3px 8px;font-size:10px;border-radius:4px}.card-body{padding:16px}.card-body h2{font-size:14px;font-weight:600;margin:0 0 6px}.card-meta{font-size:11px;color:var(--muted);margin:0 0 16px}.reveal{width:100%;background:transparent;border-color:#315f9f;color:#cfd7e2;font-size:11px;padding:8px}.waveform{height:75px;display:flex;align-items:center;justify-content:center;gap:3px;width:85%}.waveform i{display:block;flex:1;max-width:4px;border-radius:3px;background:var(--wave-color,var(--green));opacity:.75}.large-vfx{animation:pulse 2s infinite}@keyframes pulse{50%{filter:brightness(1.5);transform:scale(1.04)}}@media(prefers-reduced-motion:reduce){*,.large-vfx{animation:none!important;transition:none!important}}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0;margin-top:48px;font-size:11px;color:var(--muted)}#empty{text-align:center;padding:65px 20px}dialog{width:min(640px,calc(100% - 32px));padding:26px;background:#24487e;color:var(--text);border:1px solid #315f9f;border-radius:14px;max-height:90vh;overflow:auto}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}h2{margin:0;font-size:22px}.icon-button{font-size:24px;padding:0 10px;background:transparent}#preview-media{overflow:hidden;background:#142d50;border-radius:8px;display:flex;align-items:center;justify-content:center;min-height:180px}#preview-media img{width:100%;max-height:360px;object-fit:contain}audio{width:90%}dl{display:grid;grid-template-columns:85px 1fr;gap:9px;font-size:12px;margin:24px 0}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px}.primary{background:#397844;color:#fff;font-weight:600}.primary:hover{background:#2e6337}code{display:block;padding:15px;background:#142d50;border-radius:7px;overflow-wrap:anywhere;font-size:12px;margin:18px 0}#finder p{font-size:13px}#copy-status{margin-top:12px}@media(max-width:1000px){.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.source{max-width:320px}.host{display:none}}@media(max-width:760px){.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-heading{align-items:flex-start;flex-direction:column}.source{max-width:none;width:100%}.toolbar{flex-direction:column}.search input{width:100%}.header-inner{padding:16px 20px;min-height:76px}.brand{font-size:24px}main{padding:28px 20px 0}#tabs{padding:0 10px}.library-heading{margin-bottom:26px}h1{font-size:30px}.connection-badge{font-size:10px}.asset-grid{gap:12px}footer{gap:20px}}@media(max-width:420px){.asset-grid{grid-template-columns:1fr}.count{display:none}.dialog-actions{align-items:stretch;flex-direction:column}.brand{font-size:21px}}

.media-icon{font-size:48px;color:var(--green)}#pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:28px}button:disabled{opacity:.45;cursor:default}#library-error{padding:16px;border:1px solid #fca5a5;background:#7f1d1d;border-radius:8px;overflow-wrap:anywhere}.source{max-width:480px}.source p,.card-body h2{overflow-wrap:anywhere}#preview-media video{width:100%;max-height:360px}#preview-media p{padding:24px}.results-bar{gap:12px;flex-wrap:wrap}

/* Compact asset cards. All artwork stays inside its frame. */
main{padding-top:24px}.asset-card{display:flex;flex-direction:column}.card-body{display:flex;flex-direction:column;flex:1}.card-body .reveal{margin-top:auto}.card-meta{margin-bottom:16px}.thumbnail{flex-shrink:0;padding:18px}.thumbnail img,.thumbnail canvas{width:100%;height:100%;object-fit:contain;image-rendering:auto}.thumbnail.vfx canvas{image-rendering:pixelated}.thumbnail .preview-hint{opacity:0}.thumbnail:hover .preview-hint,.thumbnail:focus-visible .preview-hint{opacity:1}.audio-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:#142d50}.audio-actions audio{display:none}.audio-play{background:#397844;color:#fff;font-weight:600}.audio-download{font-size:12px;color:var(--muted);padding:9px 0}.audio-download:hover{color:var(--text)}.audio-status{width:100%;font-size:11px;color:var(--muted)}.audio-status:empty{display:none}#preview-media canvas{max-width:100%;max-height:360px;object-fit:contain;image-rendering:pixelated;width:100%;height:320px}#preview-media img{padding:20px}

.thumbnail img,.thumbnail canvas{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px)}

/* One density setting for every asset type, including narrow screens. */
:root{--card-size:180px}
.asset-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-size)),1fr));gap:12px;align-items:stretch}
.asset-card{min-width:0;border-radius:8px}
.card-body{padding:10px}
.card-body h2{font-size:12px;line-height:1.4;margin-bottom:5px}
.card-meta{font-size:10px;margin-bottom:10px}
.reveal{font-size:10px;padding:7px 4px}
.thumbnail{padding:10px}
.thumbnail img,.thumbnail canvas{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.audio-actions{padding:10px;gap:6px}
.audio-play{font-size:11px;padding:7px 9px}
.audio-download{font-size:11px;padding:7px 0}
.card-size-control{display:flex;align-items:center;gap:9px;white-space:nowrap}
#card-size{width:110px;max-width:28vw;margin:0;accent-color:var(--green);cursor:pointer}
#card-size-value{font-size:11px;color:var(--muted);min-width:40px;font-variant-numeric:tabular-nums}

#breadcrumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;color:var(--muted)}
#breadcrumbs button{background:transparent;border-color:transparent;font-size:12px;padding:6px 8px;overflow-wrap:anywhere;text-align:left}
#breadcrumbs button:hover{background:#24487e}#breadcrumbs button[aria-current]{color:var(--green)}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-size)),1fr));gap:12px;margin-bottom:20px}
.folder-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 8px;text-align:left;align-items:center;padding:12px;background:#142d50;min-width:0}
.folder-symbol{grid-row:span 2;font-size:27px;color:var(--green)}.folder-name{font-size:12px;overflow-wrap:anywhere}.folder-count{font-size:10px;color:var(--muted)}
.asset-location{font-size:10px;color:var(--muted);overflow-wrap:anywhere;margin-bottom:10px}

.brand{min-width:0}.brand-logo{display:block;width:280px;max-width:100%;height:auto}@media(max-width:600px){.brand-logo{width:200px}.header-meta{flex-shrink:0}}

.folder-symbol{display:block;width:26px;height:26px;object-fit:contain}

.header-controls{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-shrink:0}.header-controls #rescan{font-weight:600}@media(max-width:600px){.header-controls{gap:8px}.header-controls .header-meta{display:none}}

.asset-filters{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 0 0;font-size:12px}
.asset-filters label{display:flex;align-items:center;gap:8px;color:var(--muted)}
.asset-filters select{max-width:100%;padding:7px 9px;background:#142d50;border:1px solid var(--line);border-radius:6px;color:var(--text);font:inherit}
.asset-filters button{padding:7px 10px;font-size:12px}#filter-summary{font-size:11px}

/* Refresh treatment shared with GruntWorks. */
#rescan{background:#397844;color:#fff;border:0;border-radius:.5rem;padding:.5rem 1rem;min-width:5.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600}
#rescan:hover{background:#2e6337}
#rescan:disabled{opacity:.5;cursor:default}
#rescan:focus-visible{outline:2px solid #a6e39e;outline-offset:4px}

/* Shared GruntWorks palette and surface treatments. */
body{background-image:radial-gradient(circle at 50% 112%,rgb(37 72 126 / .18),transparent 35rem);min-height:100vh}
#tabs button:hover{background:var(--panel)}
.folder-card{background:var(--panel)}
.folder-card:hover{background:#142d50;border-color:var(--green)}
dialog{background:#142d50}
footer{background:#142d50}
.audio-play:hover{background:#2e6337}
#library-error{color:#fecaca}

/* Match GruntWorks' page shell and responsive header dimensions. */
body{display:flex;flex-direction:column;min-height:100vh}
body>header{position:sticky;top:0;z-index:50;flex-shrink:0}
.header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:80rem;width:100%;min-height:6.6rem;padding:1rem;gap:1rem}
.brand{width:18rem;max-width:100%}.brand-logo{width:100%;height:auto}
.header-controls{align-items:stretch;justify-self:end;min-height:4.6rem}
.header-meta{justify-content:center}
.header-controls #rescan{align-self:stretch}
main{width:100%;max-width:80rem;flex:1;margin:0 auto;padding-bottom:2rem}
.page-footer{width:100%;min-height:4rem;flex-shrink:0;display:block;margin:0;padding:0;border-top:1px solid #315f9f;background:#142d50}
.footer-inner{display:flex;align-items:center;justify-content:center;max-width:80rem;min-height:4.25rem;margin:0 auto;padding:.625rem 1rem}
@media(max-width:767px){
 .header-inner{gap:.5rem;min-height:5.5rem;padding:.75rem 1rem}
 .header-controls{min-height:4rem;gap:.5rem;align-items:center}
 .header-controls #rescan{min-height:64px;min-width:5.5rem;padding:.75rem 1rem;align-self:stretch}
 main{padding-top:1rem;padding-bottom:1rem}
}

.toolbar{align-items:center;flex-wrap:wrap}.toolbar .asset-filters{padding:0;flex:1}.toolbar .search{flex-shrink:0}#breadcrumbs:not([hidden]){margin-top:14px}@media(max-width:760px){.toolbar{align-items:stretch}.toolbar .search{width:100%}}

#grid.grouped-results{display:block}.result-category{margin-bottom:32px}.result-category>h2{font-size:16px;color:var(--green);margin:0 0 14px;scroll-margin-top:130px}.category-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;font-size:12px}.asset-filters select{max-width:180px}.toolbar .asset-filters{flex-basis:650px}

/* Same footer links and spacing as GruntWorks. */
.quick-links{background:#142d50;padding:.5rem 0;border:0}
.quick-links ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem 0;list-style:none;margin:0 auto;padding:.125rem 1rem;max-width:80rem}
.quick-links a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:.5rem;border-radius:.4rem;color:#cfd7e2;font-size:.875rem;font-weight:600;text-decoration:none}
.quick-links img{width:32px;height:32px;object-fit:contain}
.quick-links a:hover{background:#24487e;color:#a6e39e}
.quick-links a:focus-visible{outline:2px solid #a6e39e;outline-offset:2px}

/* Match GruntWorks: equal-width tabs across the full navigation container. */
body>nav{width:100%;flex-shrink:0}
#tabs{width:100%;max-width:80rem;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
#tabs button{min-height:60px;padding:1rem .5rem}
@media(max-width:767px){body>nav{overflow-x:auto}#tabs{grid-template-columns:repeat(4,minmax(max-content,1fr))}#tabs button{padding:1.25rem 1rem;white-space:nowrap}}

/* Compact filter fields share a single aligned toolbar. */
.toolbar{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:12px;padding-bottom:18px;overflow-x:auto}
.toolbar .asset-filters{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));flex:1 0 610px;gap:8px;padding:0;align-items:stretch}
.asset-filters label{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;min-width:0;padding:8px 10px;background:#142d50;border:1px solid #315f9f;border-radius:8px;color:#cfd7e2;font-size:10px;font-weight:600;letter-spacing:.3px}
.asset-filters label:hover{background:#24487e}.asset-filters label:focus-within{border-color:#a6e39e;outline:1px solid #a6e39e;outline-offset:1px}
.asset-filters label.filter-active{border-color:#a6e39e;color:#a6e39e}
.asset-filters select{display:block;width:100%;max-width:none;min-width:0;padding:0 2px 0 0;border:0;border-radius:0;background:transparent;color:#edf2f8;font-size:12px;font-weight:500;line-height:20px;letter-spacing:normal;cursor:pointer;text-overflow:ellipsis}
.asset-filters select:focus-visible{outline:none}
.toolbar .search{flex:0 0 220px;width:220px;min-width:180px;padding:8px 12px;border-radius:8px}
.toolbar .search input{width:100%;min-width:0;font-size:12px}
.result-info{display:flex;flex-direction:column;gap:8px;flex:1}.filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.filter-actions button{font-size:11px;padding:4px 8px;background:transparent}.filter-actions button:hover{background:#24487e}.filter-actions button:disabled{display:none}.filter-actions:has(#browse-folders[hidden]){display:none}
@media(max-width:760px){.toolbar{flex-direction:row;align-items:stretch;gap:8px}.toolbar .asset-filters{flex-basis:610px}.toolbar .search{width:200px;flex-basis:200px}}

/* GruntWorks uses Tailwind's default sans family, 16px, and bold tab labels. */
#tabs button{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:700;line-height:1.5rem;letter-spacing:normal}

.dialog-actions{flex-wrap:wrap}

/* Status typography and indicator dimensions match GruntWorks. */
.connection-badge{display:flex;align-items:center;gap:.6rem;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:.8rem;font-weight:700;line-height:1.5;color:#edf2f8;white-space:nowrap}
.connection-badge i{width:.65rem;height:.65rem;flex-shrink:0;margin:0}
@media(max-width:767px){.connection-badge{font-size:.75rem;gap:.35rem}.connection-badge i{width:.5rem;height:.5rem}}

.quick-links .dashboard-icon img { image-rendering: pixelated; }

/* Studio destinations on the left; platform and social links on the right. */
.footer-link-groups { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.25rem 1rem; max-width:80rem; margin:0 auto; padding:0 1rem; }
.quick-links .footer-link-groups ul { margin:0; padding:.125rem 0; justify-content:flex-start; }
.quick-links .footer-site-links { flex-shrink:0; }
.quick-links .footer-platform-links { margin-left:auto; }
@media(max-width:560px) { .quick-links .footer-platform-links { margin-left:0; } }

.choose-library{padding:28px;margin-bottom:24px;border:1px solid var(--line);border-radius:10px;background:#142d50;max-width:720px}.choose-library h1{font-size:24px}.choose-library p{max-width:580px}.choose-library .primary{margin-bottom:16px}.choose-library .muted{font-size:12px;margin-bottom:0}.folder-notice{font-size:12px;color:var(--muted);margin-bottom:18px;overflow-wrap:anywhere}#choose-folder{background:#142d50;font-weight:600;font-size:12px}.connection-badge i{background:#facc15}.connection-badge.is-connected i{background:#22c55e}@media(max-width:600px){.header-controls{flex-wrap:wrap;max-width:200px;justify-content:flex-end}#choose-folder{min-height:40px;padding:8px}.choose-library{padding:18px}}

/* Header actions share the same dimensions and corner radius. */
.header-controls #choose-folder{align-self:stretch;min-width:5.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600}
@media(max-width:767px){.header-controls #choose-folder{min-height:64px;padding:.75rem 1rem}}

.header-controls #choose-folder,.header-controls #rescan{width:9rem;min-width:9rem;flex:0 0 9rem}