:root{color-scheme:dark;--bg:#0b111c;--card:#152031;--line:#293a4c;--text:#e9f2ff;--muted:#9bb0c7;--aqua:#65d9ed;--green:#7fe5b2}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 87% 0%,#193551,transparent 50%),var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:1230px;margin:auto;padding:25px clamp(13px,3vw,36px) 60px}
header{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:25px}
.brand{display:flex;gap:12px;align-items:center}.symbol{display:grid;place-items:center;width:47px;height:47px;border-radius:14px;color:#b9faff;font-size:24px;background:linear-gradient(135deg,#246b7c,#263a5a)}h1{font-size:25px;margin:0;letter-spacing:-.8px}h2{font-size:16px;margin:0 0 16px}h3{font-size:23px;line-height:1.27;letter-spacing:-.4px;overflow-wrap:anywhere;margin:14px 0}
small,.minor{font-size:12px;color:var(--muted)}.minor{overflow-wrap:anywhere}.topright,.split{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.topright{justify-content:flex-end}
.status{font-size:12px;color:var(--green);background:#153b30;border:1px solid #225d4b;border-radius:99px;padding:6px 11px}.status.bad{color:#ffbcb6;background:#422d35;border-color:#925057}
button,select,input{font:inherit}button,select{background:#203144;color:var(--text);border:1px solid #395067;border-radius:10px;padding:8px 12px;cursor:pointer}
input{background:#101925;color:var(--text);border:1px solid #395067;border-radius:10px;padding:10px}input:focus,button:focus,select:focus{outline:2px solid var(--aqua);outline-offset:2px}
button:hover{background:#2c4a5d}.tabs{display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}.tabs button{border:0;background:transparent;color:var(--muted);font-weight:650}.tabs button.selected{background:#24445a;color:#c3faff}
.view{display:none}.view.on{display:block}article{border:1px solid var(--line);border-radius:16px;background:linear-gradient(165deg,#172334,#121b29);padding:20px;min-width:0}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:15px}
.metrics label,article label{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-bottom:11px}
.metrics strong{display:block;font-size:32px;line-height:1.2;letter-spacing:-1px;font-variant-numeric:tabular-nums}.metrics small{display:block;margin-top:10px}.green{color:var(--green)}.cyan{color:var(--aqua)}
.columns{display:grid;grid-template-columns:1.45fr 1fr;gap:15px;margin-top:15px}.columns+.columns{grid-template-columns:1fr 1fr}
.tag{display:inline-block;background:#193a4b;color:#b9edfb;border:1px solid #316179;border-radius:8px;font-size:11px;padding:4px 8px}
.progress{height:11px;border-radius:99px;background:#2b394d;overflow:hidden;margin:15px 0 10px}.progress div{height:100%;width:0;background:linear-gradient(90deg,#398eaa,#76e2e8);border-radius:99px;transition:width .5s}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.facts small{display:block}.facts b{display:block;font-size:17px;margin-top:3px}
.num{font-size:31px;font-weight:750;margin-top:-5px}.semi{font-size:19px;font-weight:700;margin-top:0}.empty{text-align:center;background:#111c29;border:1px dashed #3b5065;border-radius:10px;padding:22px;color:var(--muted)}
.chart{height:205px;display:flex;align-items:flex-end;gap:7px;margin:14px 0;border-bottom:1px solid #456071}
.barcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;flex:1;height:100%;min-width:8px;background:transparent;border:0;padding:0;border-radius:0}
.barcol:hover{background:transparent}.barcol .column{height:var(--height);min-height:3px;border-radius:5px 5px 0 0;background:#39798a;width:min(100%,36px);transition:height .3s}.barcol.active .column,.barcol:hover .column{background:var(--aqua)}.barcol span{font-size:10px;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.filters input{flex:1;min-width:200px}.table{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}td,th{padding:12px 10px;text-align:left;border-bottom:1px solid #2b3849;vertical-align:top}th{color:#b2c7dc}td:nth-child(2){min-width:250px;overflow-wrap:anywhere}
.pill{display:inline-block;padding:3px 7px;border-radius:7px;background:#214357;color:#c1e8ff;font-size:11px;white-space:nowrap}.pill.skip{background:#4b371c;color:#ffdda8}.pill.ok{background:#193f32;color:#aff5ce}
.session{padding:15px 0;border-top:1px solid #2b3c4e}.session:first-child{border-top:none}.session strong{display:block;font-size:17px;margin:6px 0}.session p{margin:0;color:var(--muted);font-size:12px}
footer{color:var(--muted);font-size:11px;margin-top:25px}
.gate{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#0a111bee;padding:15px;z-index:10}.gate.on{display:flex}.gatebox{background:#192839;border:1px solid #3a586e;border-radius:17px;padding:26px;max-width:430px;width:100%}.gatebox input{width:100%;margin:14px 0}.gatebox p{color:var(--muted)}.error{color:#ffaab0!important;font-size:12px}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.columns,.columns+.columns{grid-template-columns:1fr}}
@media(max-width:540px){.wrap{padding:17px 12px 34px}article{padding:16px}.metrics{gap:9px}.metrics strong{font-size:27px}h1{font-size:21px}h3{font-size:20px}.chart{gap:4px}.topright{justify-content:flex-start}.tabs button{padding:8px 10px}.facts b{font-size:14px}}
.friend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.friend-card{background:#111d2d;border:1px solid #2d4154;border-radius:14px;overflow:hidden;min-width:0}
.friend-head{padding:17px 18px 13px;border-bottom:1px solid #2a3c4d;background:linear-gradient(125deg,#192f42,#162437)}
.friend-head h3{margin:0 0 4px;font-size:18px;letter-spacing:-.3px}
.friend-items{padding:3px 14px 10px;max-height:530px;overflow:auto}
.friend-title{display:flex;align-items:flex-start;gap:10px;padding:12px 4px;border-bottom:1px solid #26394b}
.friend-title:last-child{border-bottom:0}
.mediaicon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:39px;padding:3px 5px;font-weight:750;font-size:10px;background:#204455;color:#a6e8fb;border-radius:6px}
.friend-name{min-width:0;overflow-wrap:anywhere}.friend-name strong{display:block;font-size:14px;line-height:1.36}
.friend-name small{display:block;margin-top:5px}
@media(max-width:710px){.friend-grid{grid-template-columns:1fr}.friend-items{max-height:440px}}

/* Consolidated tabs: compression overview, history, processed files, and system health. */
.stacked{display:grid;gap:15px;margin-top:15px}
.stacked>article{min-width:0}
.system-metrics>article strong.bigtemp,.system-metrics>article strong.loadnums{font-size:29px;letter-spacing:-.8px;display:block;line-height:1.3}
.system-metrics>article strong.loadnums{font-size:21px;letter-spacing:-.35px;overflow-wrap:anywhere}
.system-metrics>article small{margin-top:9px}
@media(max-width:900px){.system-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.system-metrics strong.bigtemp{font-size:25px}.system-metrics strong.loadnums{font-size:17px}}

.content-panel{margin-top:16px}.content-list{margin-top:14px;border-top:1px solid var(--line)}
.content-row{padding:15px 4px;border-bottom:1px solid #293a4c}.content-row:last-child{border-bottom:0}
.content-line{display:flex;align-items:start;gap:12px}.content-name{flex:1;min-width:0;overflow-wrap:anywhere}
.content-name strong{display:block;font-size:15px;line-height:1.35}.content-name small{display:block;margin-top:5px;color:var(--muted)}
.content-row .pill{flex-shrink:0}.episode-details{font-size:12px;margin-top:8px}.episode-details summary{color:var(--aqua);cursor:pointer}
.episode-list{padding:7px 0 2px;color:var(--muted);max-height:240px;overflow:auto}.episode-list div{padding:4px 0}
.torrent-name{font-size:14px;overflow-wrap:anywhere;flex:1;min-width:0}.torrentbar{height:8px;margin:11px 0 9px}
.content-row>.split:last-child{align-items:start}.content-row>.split:last-child small{font-size:11px}

/* Beacons are visual activity indicators, not notifications or background polling. */
.tabs button .activity-beacon{display:none;width:9px;height:9px;margin-left:7px;vertical-align:middle;border-radius:50%;background:#ff9e35;box-shadow:0 0 0 2px #ff9e3520,0 0 8px #ff9e3570}
.tabs button .activity-beacon.on{display:inline-block;animation:beacon-pulse 1.8s ease-in-out infinite}
@keyframes beacon-pulse{0%,100%{opacity:1;box-shadow:0 0 0 2px #ff9e3520,0 0 9px #ff9e3560}50%{opacity:.7;box-shadow:0 0 0 5px #ff9e3517,0 0 13px #ff9e35aa}}
@media(prefers-reduced-motion:reduce){.tabs button .activity-beacon.on{animation:none}}

/* Plex brand icon replaces the old circular header glyph. */
.brand .symbol{background:transparent;border-radius:0;overflow:hidden}
.brand .symbol img{display:block;width:47px;height:47px;object-fit:contain}

/* External title links: exact IMDb when available, Rotten Tomatoes search fallback. */
.media-info-link{display:inline-block;color:var(--text);font-weight:700;text-decoration:none;font-size:15px;line-height:1.35}
.media-info-link:hover{color:#e5a00d;text-decoration:underline}.media-info-link:focus{outline:2px solid #e5a00d;outline-offset:2px;border-radius:3px}
.media-info-source{display:inline-block;margin-left:7px;padding:1px 5px;border-radius:5px;background:#26384a;color:var(--muted);font-size:9px;vertical-align:2px}
.media-episode-link{color:var(--aqua);text-decoration:none}.media-episode-link:hover{text-decoration:underline;color:#e5a00d}
.media-poster-link{display:block;flex:0 0 58px;border-radius:8px;line-height:0}.media-poster-link:focus{outline:2px solid #e5a00d;outline-offset:2px}.media-poster-link:hover .plex-thumb{border-color:#e5a00d}

.plex-thumb{width:58px;height:87px;object-fit:cover;border-radius:8px;background:#111c29;border:1px solid #31455a;flex:0 0 58px}
.plex-thumb-empty{display:grid;place-items:center;color:#e5a00d;font-size:11px;font-weight:700}
@media(max-width:540px){.media-poster-link{flex-basis:50px}.plex-thumb{width:50px;height:75px;flex-basis:50px}.content-line{gap:8px}}

/* Plex activity artwork and external metadata links. */
.activity-session{display:flex;align-items:flex-start;gap:14px}.activity-session-body{min-width:0;flex:1}.activity-session-body .media-info-link{display:block;margin:6px 0 2px}.activity-session-body .media-info-source{margin-left:0;margin-bottom:5px}
.activity-thumb{display:block;width:62px;height:93px;object-fit:cover;border-radius:8px;background:#111c29;border:1px solid #31455a}
.activity-thumb-empty{display:grid;place-items:center;color:#e5a00d;font-size:10px;font-weight:700}
.activity-poster-link{display:block;flex:0 0 62px;border-radius:8px;line-height:0}.activity-poster-link:hover .activity-thumb{border-color:#e5a00d}.activity-poster-link:focus{outline:2px solid #e5a00d;outline-offset:2px}
.friend-thumb{display:block;width:46px;height:69px;object-fit:cover;border-radius:7px;background:#111c29;border:1px solid #31455a}
.friend-poster-link{display:block;flex:0 0 46px;border-radius:7px;line-height:0}.friend-poster-link:hover .friend-thumb{border-color:#e5a00d}.friend-poster-link:focus{outline:2px solid #e5a00d;outline-offset:2px}
.friend-title-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.friend-media-link{color:var(--text);font-weight:700;text-decoration:none;line-height:1.35}.friend-media-link:hover{color:#e5a00d;text-decoration:underline}
@media(max-width:540px){.activity-thumb{width:54px;height:81px}.activity-poster-link{flex-basis:54px}.friend-thumb{width:42px;height:63px}.friend-poster-link{flex-basis:42px}}

.available-download{margin-top:16px}
.external-browse-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid #31455a;border-radius:12px;background:#111c29}
.external-browse-card strong{display:block;font-size:16px;margin-bottom:4px}
.external-browse-card p{margin:0}.external-browse-card+.external-browse-card{margin-top:12px}
.external-browse-button{display:inline-block;white-space:nowrap;text-decoration:none;background:#203144;color:var(--text);border:1px solid #395067;border-radius:10px;padding:9px 13px;font-weight:650}
.external-browse-button:hover{background:#2c4a5d;color:#e5a00d}
.external-browse-button:focus{outline:2px solid var(--aqua);outline-offset:2px}
@media(max-width:640px){.external-browse-card{align-items:flex-start;flex-direction:column}.external-browse-button{width:100%;text-align:center}}

/* Main dashboard panels are collapsed by default. */
.collapsible>.collapse-head{display:flex;align-items:center;gap:10px;min-height:30px;cursor:pointer;border-radius:8px}
.collapsible>.collapse-head:hover h2{color:#e5a00d}
.collapsible>.collapse-head:focus{outline:none}
.collapsible>.collapse-head:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.collapsible>.collapse-head select,.collapsible>.collapse-head input,.collapsible>.collapse-head a{cursor:auto}
.collapsible>.collapse-head>h2,.collapsible>.collapse-head>div:first-child{min-width:0}
.collapsible>.collapse-head>h2{margin:0;flex:1}
.collapsible>.collapse-head.split>div:first-child{flex:1}
.collapsible>.collapse-body{margin-top:12px}
.collapsible.collapsed>.collapse-body{display:none}
.collapse-toggle{margin-left:auto;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid #31455a;border-radius:8px;background:#152231;color:var(--text);cursor:pointer}
.collapse-toggle span{display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}
.collapsible.collapsed .collapse-toggle span{transform:rotate(-45deg)}
.collapse-toggle:hover{border-color:#e5a00d;color:#e5a00d}
.collapse-toggle:focus{outline:2px solid var(--aqua);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.collapse-toggle span{transition:none}}

.compression-current{gap:8px}
.compression-note{margin:0;padding:0 4px;color:var(--muted);font-size:12px;line-height:1.55}
.compression-note strong,.compression-note b{color:var(--text)}
.compression-note code{color:var(--muted);font:inherit}

.compression-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.compression-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.compression-metrics{grid-template-columns:1fr}}

/* Space savings history line graph */
#chart.chart{height:auto;display:block;margin:14px 0;border-bottom:0;overflow-x:auto}
.history-line-svg{display:block;width:100%;min-width:620px;height:auto;overflow:visible}
.history-grid{stroke:#31455a;stroke-width:1;stroke-dasharray:4 6}
.history-line{fill:none;stroke:var(--aqua);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.history-point{fill:#162638;stroke:var(--aqua);stroke-width:3;cursor:pointer;transition:r .12s ease,fill .12s ease}
.history-point:hover,.history-point:focus,.history-point.active{fill:var(--aqua);outline:none}
.history-point:focus-visible{stroke-width:5}
.history-x-label,.history-y-label{fill:var(--muted);font-size:12px;pointer-events:none}
@media(max-width:650px){.history-line-svg{min-width:720px}}
@media(prefers-reduced-motion:reduce){.history-point{transition:none}}

/* Plex account authentication */
.plex-auth-box{text-align:center;max-width:420px}
.plex-auth-icon{display:block;width:58px;height:58px;object-fit:contain;margin:0 auto 14px}
.plex-auth-box h2{font-size:22px;margin:0 0 8px}
.plex-auth-box p{margin:8px 0 16px}
.plex-auth-button{width:100%;background:#e5a00d;border-color:#e5a00d;color:#111;font-weight:750;padding:11px 14px}
.plex-auth-button:hover{background:#f0ae12}
.plex-auth-button:disabled{opacity:.6;cursor:wait}
.auth-signout{background:transparent;color:var(--muted);border-color:#31455a}
.auth-signout:hover{color:var(--text)}
#authstatus{min-height:18px;margin-top:13px}
