:root{color-scheme:dark;font:14px Arial,sans-serif;background:#191919;color:#e6e3df}*{box-sizing:border-box}body{margin:0;overflow:hidden}header{height:52px;display:flex;gap:16px;align-items:center;padding:8px 16px;background:#222;border-bottom:1px solid #444}header strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button,select{font:inherit;color:inherit;background:#303030;border:1px solid #555;border-radius:7px;padding:8px 12px;cursor:pointer}button:hover,button[aria-pressed=true]{border-color:#c5ab89;background:#40392f}button:focus-visible,select:focus-visible{outline:2px solid #c5ab89;outline-offset:2px}#stage{position:relative;width:100vw;height:calc(100dvh - 52px);display:grid;place-items:center}#viewport{position:relative;width:100%;height:100%;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#overlays{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .18s;pointer-events:none;overflow:hidden}#overlays{right:auto;bottom:auto;overflow:visible}#overlays.visible{opacity:1}.overlayText{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.3;padding:10px 14px;border-radius:5px;font-family:Segoe UI,sans-serif;display:inline-block;max-width:100%;min-width:40px}.overlayText span{font-family:inherit}#overlays *{pointer-events:none!important}#views{position:absolute;bottom:16px;max-width:calc(100% - 24px);display:flex;gap:8px;overflow-x:auto;padding:4px;border-radius:12px;background:#19191999}#views:empty{display:none}#views button{flex:none;width:126px;padding:0;overflow:hidden;text-align:left}#views img{width:124px;height:70px;object-fit:contain;background:#191919;display:block}#views span{display:block;padding:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}#notice{position:absolute;top:16px;left:50%;transform:translateX(-50%);max-width:90%;background:#242424ed;padding:12px 20px;border-radius:8px;pointer-events:none}#notice:empty{display:none}dialog{width:340px;max-width:90vw;border:1px solid #666;border-radius:12px;background:#222;padding:24px}dialog::backdrop{background:#0008}dialog label{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:18px 0}dialog button{margin:4px}#catalogue{position:absolute;inset:0;overflow:auto;background:#191919;padding:32px;display:flex;gap:20px;align-content:flex-start;flex-wrap:wrap}#catalogue[hidden]{display:none}#catalogue button{width:210px;height:250px}#catalogue img{width:180px;height:180px;object-fit:contain;display:block;margin:auto}#revision{font-size:12px;color:#bcb5ac}@media(prefers-reduced-motion:reduce){#overlays{transition:none}}@media(max-width:600px){#views button{width:96px}#views img{width:94px;height:54px}header{gap:8px;padding:8px}}

#loadingScreen{position:absolute;inset:0;z-index:30;background:#191919;opacity:1;transition:opacity .35s;overflow:hidden;pointer-events:all}#loadingScreen[hidden]{display:none}#loadingScreen.leaving{opacity:0;pointer-events:none}#loadingSnapshot{width:100%;height:100%;object-fit:contain;filter:blur(5px) brightness(.38)}.loadingCard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,80%);display:grid;gap:16px;text-align:center;color:#eee}#loadingProgress{width:100%;height:6px;accent-color:#ccc}#notice{z-index:31}@media(prefers-reduced-motion:reduce){#loadingScreen{transition:none}}
/* Collection browser: neutral Project Catalog surfaces, scoped read-only navigation. */
button:hover,button[aria-pressed=true]{border-color:#aaa;background:#3a3a3a}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #ddd;outline-offset:2px}[hidden]{display:none!important}
#catalogue{padding:0;display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;overflow:hidden;color:#e7e7e7;font-family:'Segoe UI',Arial,sans-serif}
#catalogue button{width:auto;height:36px;padding:7px 12px}#catalogue input,#catalogue select,.audienceFilters input,.audienceFilters select{font:inherit;color:inherit;background:#222;border:1px solid #414141;border-radius:6px;padding:8px 10px;min-width:0}
.audienceSidebar{padding:28px 16px;border-right:1px solid #333;background:#202020;overflow:auto}.audienceSidebar h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#aaa;margin:0 12px 20px}.audienceCollection{padding:12px;background:#373737;border:1px solid #505050;border-radius:7px;overflow-wrap:anywhere}.audienceSidebar small{display:block;margin:12px;color:#aaa}
.audienceMain{min-width:0;overflow:auto;padding:28px;display:flex;flex-direction:column;gap:20px}.audienceHeading{display:flex;align-items:center;gap:20px}.audienceHeading h1{font-size:22px;margin:0;overflow-wrap:anywhere;max-width:45%}.audienceHeading input{flex:1;width:100%}.audienceTools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.audienceCount{font-size:12px;color:#aaa;margin-right:auto}.audienceSortLabel{font-size:12px;color:#aaa}.audienceViewModes{display:flex;gap:4px}.audienceViewModes button{display:flex;align-items:center;justify-content:center}
.audienceResults.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;align-content:start}.audienceCard{color:inherit;text-decoration:none;background:#222;border:1px solid #393939;border-radius:10px;overflow:hidden;min-width:0;display:flex;flex-direction:column}.audienceCard:hover{border-color:#aaa;background:#272727}.audiencePreview{height:210px;background:#191919;display:flex;align-items:center;justify-content:center}#catalogue .audiencePreview img{width:100%;height:100%;object-fit:contain;margin:0}.audienceCardInfo{padding:16px;display:grid;gap:10px;min-width:0}.audienceCardInfo strong{overflow-wrap:anywhere}.audienceInventory,.audienceCardInfo time{font-size:12px;color:#aaa}.audienceCardInfo time{line-height:1.5}
.audienceResults.list{display:flex;flex-direction:column;gap:8px}.list .audienceCard{flex-direction:row;align-items:center}.list .audiencePreview{width:96px;height:90px;flex:none}.list .audienceCardInfo{flex:1;grid-template-columns:minmax(0,1fr) minmax(60px,.5fr) minmax(140px,.8fr);align-items:center;gap:16px}.audiencePaging{margin-top:auto;min-height:50px;display:flex;gap:12px;align-items:center;justify-content:flex-end;border-top:1px solid #333;padding-top:12px;font-size:12px;color:#aaa}.audiencePaging button:disabled{opacity:.4;cursor:default}.audienceEmpty{color:#aaa;text-align:center;padding:35px}.audienceFilters{width:440px;max-height:85dvh;overflow:auto}.audienceFilters label{display:grid;grid-template-columns:1fr 1.3fr}.audienceFilterActions{display:flex;justify-content:space-between;gap:10px}
@media(max-width:760px){#catalogue{grid-template-columns:150px minmax(0,1fr)}.audienceMain{padding:16px;gap:16px}.audienceHeading{flex-direction:column;align-items:stretch;gap:12px}.audienceHeading h1{max-width:none;font-size:20px}.audienceSidebar{padding:24px 10px}.audienceResults.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.list .audienceCardInfo{grid-template-columns:1fr;gap:5px}}
@media(max-width:520px){#catalogue{display:flex;flex-direction:column}.audienceSidebar{flex:none;border-right:0;border-bottom:1px solid #333;padding:10px 16px;display:flex;align-items:center;gap:12px}.audienceSidebar h2{margin:0;flex:none}.audienceCollection{padding:6px 10px;min-width:0;font-size:12px}.audienceSidebar small{margin:0 0 0 auto}.audienceMain{flex:1}.audienceTools{gap:8px}.audienceSortLabel{display:none}.audienceTools select{max-width:155px}.audienceCount{flex:1}.audienceResults.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.audiencePreview{height:150px}.audienceCardInfo{padding:12px;gap:8px}.audienceCardInfo strong{font-size:13px}.audienceCardInfo time{font-size:11px}.audienceFilters label{grid-template-columns:1fr;gap:6px}}

@media(max-width:520px){.audienceTools{display:grid;grid-template-columns:auto 1fr auto}.audienceTools>button{grid-column:1}.audienceCount{grid-column:2 / 4}.audienceTools>select{grid-column:1 / 3;max-width:none}.audienceViewModes{grid-column:3}}

/* Fixed browser frame; only results scroll, never the navigation/footer. */
#catalogue{align-content:stretch;grid-template-rows:minmax(0,1fr);flex-wrap:nowrap}
.audienceSidebar{min-height:0}
.audienceMain{min-height:0;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding-bottom:12px}
.audienceContent{min-height:0;min-width:0;overflow:auto;scrollbar-gutter:stable;padding:2px}
.audiencePaging{margin-top:0;flex-shrink:0}
@media(max-width:520px){.audienceMain{flex:1;min-height:0}}

/* Collection count belongs to its row; a compact rail opens the default-collapsed panel. */
.audienceSidebarHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.audienceSidebarHeader h2{margin:0 0 0 8px;min-width:0}
#catalogue .audienceSidebarToggle{flex:none;width:34px;height:34px;padding:7px;display:flex;align-items:center;justify-content:center}
.audienceSidebarToggle[aria-expanded=true] svg{transform:scaleX(-1)}
.audienceCollection{display:flex;align-items:center;gap:12px;min-width:0}
.audienceCollectionName{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audienceCollectionCount{flex:none;font-size:12px;color:#bbb;font-variant-numeric:tabular-nums}
#catalogue.sidebarCollapsed{grid-template-columns:52px minmax(0,1fr)}
.sidebarCollapsed .audienceSidebar{padding:20px 8px}
.sidebarCollapsed .audienceSidebarHeader{justify-content:center;margin:0}
@media(max-width:520px){.audienceSidebar{gap:10px}.audienceSidebarHeader{margin:0;flex:none}.audienceSidebarHeader h2{display:none}.audienceCollection{flex:1}.sidebarCollapsed .audienceSidebar{padding:8px 16px}.sidebarCollapsed .audienceSidebarHeader{justify-content:flex-start}}

/* Shared desktop focus: contained within controls, never clipped outside a panel. */
:focus { outline: none !important; }
:focus-visible { box-shadow: inset 0 0 0 2px #888 !important; }
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: -2px !important; }
}

/* Native portal owns navigation; do not render a second collection sidebar. */
#catalogue.desktopPortalCatalogue{grid-template-columns:minmax(0,1fr)}
.desktopPortalCatalogue>.audienceSidebar{display:none}

/* Desktop shell owns account/settings. Keep Back to Library in the model view. */
.desktopPortal:has(#catalogue:not([hidden]))>header{display:none}
.desktopPortal:has(#catalogue:not([hidden])) #stage{height:100dvh}
.desktopPortal #settings{display:none}
#catalogue .audienceViewModes{display:flex;gap:0;padding:2px;border:1px solid #3b3b3b;border-radius:8px;background:#202020}
#catalogue .audienceViewModes button{display:grid;width:29px;height:27px;padding:0;place-items:center;border:0;border-radius:5px;color:#7b7b7b;background:transparent;cursor:pointer}
#catalogue .audienceViewModes button[aria-pressed=true]{color:#eee;background:#3a3a3a;box-shadow:inset 0 0 0 1px #505050}
#catalogue .audienceRefresh{display:grid;place-items:center;width:36px;padding:0}
#catalogue .audienceResults.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--audience-card-size,240px)),1fr))}

/* Selection is an overlay: no card or toolbar layout moves when selection changes. */
.desktopPortalCatalogue .audienceCard{position:relative}
.desktopPortalCatalogue .audienceCard:is(.selected,:focus-visible){box-shadow:none!important}
.desktopPortalCatalogue .audienceCard:is(.selected,:focus-visible)::after{content:"";position:absolute;inset:0;border:2px solid #b8b8b8;border-radius:inherit;pointer-events:none;z-index:1}
@media(forced-colors:active){.desktopPortalCatalogue .audienceCard:is(.selected,:focus-visible)::after{border-color:Highlight}}

body>header #library{background:transparent;border-color:transparent;padding:6px 8px;min-width:36px}body>header #library:hover{background:#333}

.catalogueLoader{display:none;position:absolute;inset:0;place-items:center;pointer-events:none;background:#191919;z-index:20}.catalogueLoader progress{width:min(280px,60%);height:5px;accent-color:#ddd}.catalogueLoading .catalogueLoader{display:grid}.catalogueLoading #catalogue{visibility:hidden}