:root{
  --bg:#08090c; --panel:#0e1015; --panel2:#0b0d11; --line:#22262e; --line2:#31363f;
  --txt:#d6dae2; --dim:#6b7280; --acc:#7dd3fc; --acc2:#a78bfa;
  --ok:#4ade80; --err:#f87171; --danger:#f87171;
  --r:4px;
  --r-card:6px;
  --pad-x:clamp(10px,1.6vw,18px);
  --pad-y:clamp(8px,1vw,12px);
  --fs-base:clamp(12px,0.85vw + 0.6rem,14px);
  --fs-head:clamp(11px,0.7vw + 0.55rem,13px);
  --status-h:88px;
  --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter",sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace;
  --panel-solid:rgba(11,13,17,0.96);
}
*{box-sizing:border-box}
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--dim); }
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font-sans);margin:0;min-height:100vh;font-size:var(--fs-base);overflow-x:hidden;display:flex;flex-direction:column}
#crt{position:fixed;inset:0;pointer-events:none;z-index:120;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 4px)}
body.no-crt #crt{display:none}
.ui-icon{display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.18em;flex-shrink:0;pointer-events:none}
#bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0}

.tui-head{display:flex;align-items:center;justify-content:space-between;padding:10px var(--pad-x);border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:90}
.head-brand{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.brand-name{font-weight:700;letter-spacing:clamp(1px,0.3vw,3px);color:var(--acc);font-size:clamp(15px,0.9vw + 0.55rem,18px)}
.brand-ver{font-size:11px;color:var(--dim);border:1px solid var(--line);padding:2px 7px;border-radius:var(--r);white-space:nowrap}

.bottom-bar{position:sticky;bottom:0;z-index:90;display:flex;flex-direction:column;width:100%;background:var(--panel2);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,0.45);padding-bottom:max(4px,env(safe-area-inset-bottom))}
.bottom-search-row{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);padding:8px var(--pad-x);border-bottom:1px solid rgba(255,255,255,0.05)}
.search-input-wrap{flex:1 1 auto;min-width:140px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;transition:border-color .15s, box-shadow .15s}
.search-input-wrap:focus-within{border-color:var(--acc);box-shadow:0 0 12px rgba(125,211,252,0.15)}
.search-input-wrap .prompt-ps1{color:var(--ok);font-weight:700;font-size:12px;flex:0 0 auto;user-select:none;font-family:var(--font-mono)}
#cmd{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;color:var(--txt);font-family:var(--font-mono);font-size:clamp(12px,0.35vw + 0.72rem,14px);caret-color:transparent}
.search-input-wrap .caret{width:7px;height:14px;background:var(--acc);display:inline-block;animation:blink 1.05s steps(1) infinite;flex:0 0 auto}
#cmd:not(:focus)~.caret{opacity:.35;animation:none}
@keyframes blink{50%{opacity:0}}

.bottom-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.health{font-size:11px;color:var(--dim);white-space:nowrap}
.health.ok{color:var(--ok)}
.health.bad{color:var(--err)}
.health.ok:before{content:"● "}
.health.bad:before{content:"● "}

.header-drawer-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line2);color:var(--txt);padding:6px 11px;border-radius:var(--r);cursor:pointer;font-size:14px;transition:all .15s;line-height:1}
.header-drawer-btn:hover{border-color:var(--acc);color:var(--acc);background:rgba(125,211,252,0.08)}

.header-mode-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line2);color:var(--txt);padding:6px 12px;border-radius:var(--r);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.05em;transition:all .15s;line-height:1}
.header-mode-btn:hover{border-color:var(--acc);color:var(--acc);background:rgba(125,211,252,0.08)}
.header-mode-btn.lk21{border-color:#f59e0b;color:#fbbf24;background:rgba(245,158,11,0.1)}
.header-mode-btn.lk21:hover{border-color:#fbbf24;background:rgba(245,158,11,0.2)}
.header-mode-btn.bittv{border-color:#10b981;color:#34d399;background:rgba(16,185,129,0.12)}
.header-mode-btn.bittv:hover{border-color:#34d399;background:rgba(16,185,129,0.22)}
.sb-source.lk21, .tm-source-badge.lk21{border-color:#f59e0b;color:#fbbf24;background:rgba(245,158,11,0.12)}
.sb-source.bittv, .tm-source-badge.bittv{border-color:#10b981;color:#34d399;background:rgba(16,185,129,0.14)}


/* ---- DRAWER SLIDE-OVER NAVIGATION PANEL ---- */
.drawer-overlay{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end}
.drawer-overlay.hidden{display:none}
.drawer-backdrop{position:fixed;inset:0;background:rgba(4,5,8,.82);animation:fadeIn .2s ease-out}
.drawer-content{position:relative;z-index:201;width:min(340px,86vw);height:100%;background:var(--panel);border-left:1px solid var(--line2);display:flex;flex-direction:column;animation:slideLeft .25s cubic-bezier(0.16,1,0.3,1);box-shadow:-6px 0 24px rgba(0,0,0,0.5)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideLeft{from{transform:translateX(100%)}to{transform:translateX(0)}}

.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer-title{display:flex;align-items:baseline;gap:8px}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:18px}
.drawer-group{display:flex;flex-direction:column;gap:4px}
.drawer-group-label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--dim);margin-bottom:4px;padding-left:4px}
.drawer-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--txt);font:inherit;font-size:12px;cursor:pointer;text-align:left;transition:all .12s}
.drawer-item:hover{background:var(--panel2);border-color:var(--line);color:var(--acc)}
.drawer-item.active{background:rgba(125,211,252,0.1);border-color:rgba(125,211,252,0.3);color:var(--acc)}
.drawer-item.highlight{border-color:rgba(74,222,128,0.35);color:var(--ok)}
.drawer-item.highlight:hover{background:rgba(74,222,128,0.12);border-color:var(--ok)}
.drawer-item-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;font-size:14px}
.drawer-item-label{flex:1 1 auto}
.drawer-item-badge{font-size:10px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);padding:1px 5px;border-radius:var(--r);font-family:inherit}
.drawer-foot{padding:12px 16px;border-top:1px solid var(--line);background:var(--panel2);font-size:11px}
.drawer-foot-row{display:flex;align-items:center;justify-content:space-between}

/* ---- UPDATE MODAL STYLING ---- */
.update-sheet{width:min(620px,94vw);max-height:86vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:18px;gap:14px}
.update-body{display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.update-notes{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px;font-size:12px;line-height:1.6;color:var(--txt);max-height:48vh;overflow-y:auto;white-space:pre-wrap}
.update-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:4px}
.update-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--ok);color:#08090c;font-weight:700;font-size:12px;border:none;border-radius:var(--r);cursor:pointer;text-decoration:none;transition:opacity .15s}
.update-btn:hover{opacity:.88}

/* ---- RESUME MODAL STYLING ---- */
#resume-modal.overlay{z-index:160;backdrop-filter:blur(5px);background:rgba(4,5,8,0.82)}
.resume-sheet{width:min(490px,94vw);max-height:86vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:20px;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,0.7),0 0 1px rgba(56,189,248,0.3)}
.rm-anime-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px;margin:2px 0 4px}
.rm-badge-ep{display:inline-block;font-size:10px;font-weight:700;color:var(--cyan,#38bdf8);background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.3);padding:1px 6px;border-radius:4px;margin-right:6px;vertical-align:middle}
.rm-progress-wrap{display:flex;flex-direction:column;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.rm-progress-track{width:100%;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;position:relative}
.rm-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan,#38bdf8),#0ea5e9);box-shadow:0 0 10px rgba(56,189,248,0.5);border-radius:4px;transition:width 0.25s ease-out}
.rm-progress-labels{display:flex;align-items:center;justify-content:space-between;font-size:11px}
.rm-time-val{color:var(--cyan,#38bdf8);font-weight:700;font-family:var(--font-mono,monospace)}
.rm-percent-badge{font-size:10px;font-weight:700;color:var(--ok,#4ade80);background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.25);padding:1px 7px;border-radius:10px;letter-spacing:0.5px}
.rm-time-total{font-family:var(--font-mono,monospace)}
.resume-body{display:flex;flex-direction:column;gap:14px}
.resume-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-top:4px}
.btn-resume-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;background:var(--cyan,#38bdf8);color:#08090c;font-weight:700;font-size:13px;border:none;border-radius:var(--r);cursor:pointer;flex:1;min-width:180px;transition:opacity .15s,transform .1s,box-shadow .15s}
.btn-resume-primary:hover{opacity:.92;transform:scale(1.01)}
.btn-resume-primary:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 16px rgba(56,189,248,0.7)}
.btn-resume-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:var(--panel2);color:var(--txt);font-weight:600;font-size:13px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;flex:1;min-width:160px;transition:background .15s,border-color .15s,box-shadow .15s}
.btn-resume-secondary:hover{background:rgba(255,255,255,0.12);color:#fff}
.btn-resume-secondary:focus-visible{outline:2px solid var(--cyan,#38bdf8);outline-offset:2px;border-color:var(--cyan,#38bdf8);box-shadow:0 0 12px rgba(56,189,248,0.4)}
.btn-resume-cancel{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background:transparent;color:var(--dim);font-weight:600;font-size:13px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:all .15s}
.btn-resume-cancel:hover{border-color:var(--err,#ef4444);color:var(--err,#ef4444);background:rgba(239,68,68,0.08)}
.btn-resume-cancel:focus-visible{outline:2px solid var(--err,#ef4444);outline-offset:2px}
@media (max-width: 480px){.resume-actions{flex-direction:column}.btn-resume-primary,.btn-resume-secondary,.btn-resume-cancel{width:100%;min-width:unset}}
.update-btn.secondary{background:transparent;border:1px solid var(--line2);color:var(--txt);font-weight:400}
.update-btn.secondary:hover{border-color:var(--acc);color:var(--acc)}

main{width:100%;margin:0;padding:var(--pad-y) var(--pad-x) calc(var(--status-h) + 24px);position:relative;z-index:1;flex:1 0 auto}

.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px;flex-wrap:wrap}
.sec-title-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec-head h2{font-size:var(--fs-head);margin:0;letter-spacing:1px;text-transform:uppercase;color:var(--dim);font-weight:600}
.schedule-days-bar{display:inline-flex;margin:0;flex:0 0 auto;gap:3px;overflow-x:auto;max-width:100%;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.schedule-days-bar::-webkit-scrollbar{display:none}
.schedule-days-bar.hidden{display:none!important}
.schedule-days-bar button{padding:4px 9px;font-size:11px;white-space:nowrap;border-radius:4px;transition:all .15s}
.schedule-days-bar button.is-today::after{content:" •";color:var(--cyan);font-weight:bold}

/* BITTV DEDICATED REGION & CATEGORY FILTER BAR (MIRRORING APK) */
.bittv-filter-bar{display:flex;flex-direction:column;gap:5px;margin:6px 0 10px;padding:8px 10px;background:rgba(18,24,38,0.7);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-card);backdrop-filter:blur(8px)}
.bittv-filter-bar.hidden{display:none!important}
.bittv-filter-row{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bittv-filter-row::-webkit-scrollbar{display:none}
.bittv-filter-label{font-size:10px;font-weight:700;letter-spacing:0.5px;color:var(--dim);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;min-width:76px;font-family:var(--font-mono)}
.bittv-filter-label .ui-icon{width:12px;height:12px;color:var(--acc)}
.bittv-chips-scroll{display:inline-flex;align-items:center;gap:5px;flex:1}
.bittv-chip{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--dim);border-radius:5px;padding:4px 9px;font-size:11px;cursor:pointer;white-space:nowrap;transition:all .15s ease;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans)}
.bittv-chip:hover{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.25)}
.bittv-chip.active{background:var(--acc);color:#0b0f19;border-color:var(--acc);font-weight:700;box-shadow:0 0 8px rgba(0,240,255,0.3)}
.bittv-chip.bittv-refresh-chip{background:rgba(0,240,255,0.08);border-color:rgba(0,240,255,0.3);color:var(--acc);margin-left:auto}
.bittv-chip.bittv-refresh-chip:hover{background:rgba(0,240,255,0.2);color:#fff;border-color:var(--acc)}
.dim{color:var(--dim)}
.small{font-size:11px}
.link-btn{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:11px;text-decoration:underline;padding:0}
.link-btn:hover{color:var(--err)}
.hidden{display:none}

.rule{border:0;border-top:1px solid var(--line);margin:14px 0}

.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.hist-card{min-width:min(180px,75vw);background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;cursor:pointer;transition:border-color .12s}
.hist-card:hover{border-color:var(--acc)}
.hist-card b{font-size:12px;display:block;margin-bottom:3px;line-height:1.3}
.hist-card span{font-size:10px;color:var(--dim)}

.log{padding:2px 0;margin:0 0 10px;max-height:30vh;overflow-y:auto;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.log-line{font-size:12px;color:var(--dim);white-space:pre-wrap;word-break:break-word;padding:1px 0}
.log-err{color:var(--err)}
.log-ok{color:var(--ok)}
.log-cmd:before{content:"";}

#results{min-height:40px}
.trow{display:flex;align-items:baseline;gap:clamp(6px,1vw,12px);padding:3px 6px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;min-width:0;transition:background .1s;contain:content}
.trow:hover{background:var(--panel2)}
.trow.sel{background:var(--panel);border-color:var(--line2)}
.trow .tr-num{color:var(--dim);min-width:2.2em;text-align:right;font-size:11px;flex:0 0 auto}
.trow .tr-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow.sel .tr-title{color:var(--acc)}
.trow .tr-slug{color:var(--dim);font-size:10px;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}

/* Rich media row for search & schedule list */
.trow-media{display:flex!important;align-items:center!important;gap:clamp(8px,1vw,14px)!important;padding:5px 8px!important;min-height:56px!important;border:1px solid transparent}
.trow-media:hover{background:var(--panel2)}
.trow-media.sel{background:var(--panel);border-color:var(--line2)}
.tr-thumb-wrap{width:36px;height:48px;flex:0 0 36px;border-radius:var(--r);overflow:hidden;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.tr-thumb{width:100%;height:100%;object-fit:cover;display:block}
.tr-thumb-wrap.no-img{color:var(--dim)}
.tr-thumb-ph{font-size:11px;color:var(--dim);user-select:none}
.tr-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.tr-badge-col{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;min-width:82px}
.tr-badge-col .tr-day{font-size:11px;color:var(--dim);white-space:nowrap}
.tr-badge-col .tr-ep{font-size:11px;font-weight:700;color:var(--acc);white-space:nowrap}
.trow-media.today{border-left:3px solid var(--ok)!important;padding-left:7px!important}
.trow-media.today .tr-badge-col .tr-day,.trow-media.today .tr-badge-col .tr-ep{color:var(--ok)}
.trow-media.tomorrow{border-left:3px solid var(--acc)!important;padding-left:7px!important}
.trow-media.tomorrow .tr-badge-col .tr-day,.trow-media.tomorrow .tr-badge-col .tr-ep{color:var(--acc)}
.tr-meta{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.trow-up{display:grid!important;grid-template-columns:auto auto minmax(0,1fr);gap:clamp(6px,1vw,12px);align-items:baseline;min-width:0;min-height:24px;visibility:visible!important}
.trow-up .tr-day{color:var(--dim);font-size:11px;white-space:nowrap;min-width:0}
.trow-up .tr-ep{color:var(--acc);font-weight:600;font-size:12px;white-space:nowrap}
.trow-up .tr-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow-up.today{border-left:2px solid var(--ok);padding-left:6px}
.trow-up.today .tr-day{color:var(--ok)}
.trow-up.today .tr-ep{color:var(--ok)}
.trow-up.tomorrow{border-left:2px solid var(--acc);padding-left:6px}
.trow-up.tomorrow .tr-day{color:var(--acc)}
.trow-up.tomorrow .tr-ep{color:var(--acc)}

.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,14vw,150px),1fr));gap:clamp(8px,1vw,10px)}
.poster-card{background:transparent;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;cursor:pointer;position:relative;outline:none;min-width:0;transition:transform .15s ease,border-color .15s ease;contain:content}
.poster-card:hover,.poster-card.sel{border-color:var(--acc);transform:translateY(-2px)}
.poster-card.sel{background:var(--panel)}
.poster-card.unmapped{opacity:.45}
.poster-card.unmapped:hover{border-color:var(--err);transform:none}
.poster-card .pc-bad{position:absolute;top:4px;right:4px;font-size:10px;color:var(--err);background:rgba(8,9,12,.85);border:1px solid var(--err);padding:0 5px;border-radius:var(--r);font-family:var(--font-mono)}
.poster-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#12151c}
.poster-card .pc-thumb-ph{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(30,41,59,0.7),rgba(15,23,42,0.9));font-size:32px;color:rgba(255,255,255,0.25);border-bottom:1px solid var(--line)}
.poster-card .pc-idx{position:absolute;top:4px;left:4px;font-size:10px;color:var(--txt);background:rgba(8,9,12,.75);border:1px solid var(--line);padding:0 5px;border-radius:var(--r);font-family:var(--font-mono)}
.poster-body{padding:7px 8px}
.poster-body b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.35;min-height:2.7em;font-family:var(--font-sans);font-weight:600;color:#f1f5f9;white-space:normal}
.poster-meta{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono)}

/* EVENT MATCH CARD STYLING */
.poster-card.is-event{background:linear-gradient(180deg,rgba(30,41,59,0.5) 0%,rgba(15,23,42,0.85) 100%);border-color:rgba(255,255,255,0.12)}
.poster-card.is-event:hover{border-color:#ef4444;box-shadow:0 4px 16px rgba(239,68,68,0.25)}
.pc-event-matchup{width:100%;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);position:relative;border-bottom:1px solid var(--line);box-sizing:border-box}
.pc-event-topbar{position:absolute;top:5px;left:6px;right:6px;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-family:var(--font-mono)}
.pc-league-tag{background:rgba(0,0,0,0.65);padding:1px 6px;border-radius:4px;color:#38bdf8;font-weight:700;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(56,189,248,0.2)}
.pc-live-dot{background:#ef4444;color:#fff;font-weight:800;padding:1px 5px;border-radius:3px;font-size:8px;letter-spacing:0.5px;animation:pulse-live 1.6s infinite}
@keyframes pulse-live{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6}}
.pc-event-teams{display:flex;align-items:center;justify-content:space-between;width:100%;gap:4px;margin-top:10px}
.pc-team{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center;max-width:44%}
.pc-team img{width:36px!important;height:36px!important;object-fit:contain!important;aspect-ratio:auto!important;background:transparent!important;margin-bottom:3px}
.pc-team-name{font-size:10px;font-weight:700;color:#f1f5f9;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.pc-event-vs{font-family:var(--font-mono);font-size:10px;font-weight:800;color:#f59e0b;padding:2px 5px;background:rgba(245,158,11,0.18);border-radius:4px;border:1px solid rgba(245,158,11,0.35);flex-shrink:0}
.pc-event-jadwal{font-size:10px;color:#94a3b8;margin-top:8px;display:flex;align-items:center;gap:4px;font-family:var(--font-mono)}
.lane-card{min-width:clamp(110px,18vw,150px);max-width:clamp(110px,18vw,150px)}
.lane-card img{width:100%}

.empty{color:var(--dim);padding:clamp(18px,3vw,28px) 10px;border:1px dashed var(--line);border-radius:var(--r);text-align:center}
.empty-art{font-size:clamp(24px,4vw,34px);margin-bottom:6px}
.empty p{margin:0}

.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin:18px 0 12px;color:var(--dim);font-size:12px}
.pager.hidden{display:none!important}
.pager-btn{background:rgba(255,255,255,0.04);border:1px solid var(--line,rgba(255,255,255,0.12));color:var(--txt,#d6dae2);padding:6px 14px;border-radius:var(--r,6px);cursor:pointer;font-size:11px;font-family:var(--font-mono,monospace);font-weight:600;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px}
.pager-btn:hover:not(:disabled){background:rgba(0,219,235,0.12);border-color:var(--cyan,#00dbeb);color:var(--cyan,#00dbeb);box-shadow:0 0 10px rgba(0,219,235,0.2)}
.pager-btn:disabled{opacity:0.35;cursor:not-allowed;border-color:rgba(255,255,255,0.06);background:transparent;color:var(--dim)}
.pager-info{font-family:var(--font-mono,monospace);font-size:11.5px;color:var(--txt,#d6dae2);min-width:130px;text-align:center}


.statusbar{display:flex;gap:clamp(8px,1.5vw,16px);align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;margin:0;padding:5px var(--pad-x) 6px;background:transparent;font-size:10px;color:var(--dim)}
.statusbar b{color:var(--txt);font-weight:600}
.sb-shortcuts{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);flex-wrap:wrap}
.sb-meta{display:flex;align-items:center;gap:12px;margin-left:auto}
.sb-source{background:none;border:1px solid rgba(0,219,235,0.4);color:var(--cyan,#00dbeb);border-radius:3px;padding:2px 7px;cursor:pointer;font:inherit;font-size:10px;line-height:1.2;transition:all .15s}
.sb-source:hover{background:rgba(0,219,235,0.15)}
.sb-source.otaku{border-color:rgba(74,222,128,0.5);color:var(--ok,#4ade80)}
.sb-source.otaku:hover{background:rgba(74,222,128,0.15)}
.tm-source-badge{background:none;border:1px solid rgba(0,219,235,0.35);color:var(--cyan,#00dbeb);border-radius:3px;padding:1px 5px;cursor:pointer;font:inherit;font-size:9px;margin-left:6px;vertical-align:middle;transition:all .15s}
.tm-source-badge:hover{background:rgba(0,219,235,0.15)}
.tm-source-badge.otaku{border-color:rgba(74,222,128,0.4);color:var(--ok,#4ade80)}
.tm-source-badge.otaku:hover{background:rgba(74,222,128,0.15)}
.sb-view{color:var(--acc);white-space:nowrap;font-weight:600}

/* ---- help overlay ---- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(4,5,8,.78);display:flex;align-items:center;justify-content:center;padding:clamp(10px,2vw,18px)}
.overlay.hidden{display:none}
.help-sheet{width:min(680px,100%);max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:18px}
.help-body{margin:0;font:inherit;font-size:12px;line-height:1.6;color:var(--txt);white-space:pre-wrap}
/* Genre picker modal */
.genre-sheet{width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:18px;gap:10px}
.genre-search-row{display:flex;gap:8px;align-items:center}
.genre-search-row input{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:8px 10px;font:inherit;font-size:13px;outline:none}
.genre-search-row input:focus{border-color:var(--acc)}
.btn-genre-reset{white-space:nowrap;padding:7px 12px;font-size:11px}
.genre-status-bar{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
.genre-status-bar .active-label{color:#38bdf8;font-weight:700}
.genre-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;overflow:auto;max-height:56vh;padding:2px}
.genre-list button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:8px 10px;cursor:pointer;font:inherit;font-size:11px;text-align:left;display:flex;flex-direction:column;gap:2px;line-height:1.3;transition:all .15s}
.genre-list button:hover{border-color:var(--acc)}
.genre-list button.active{
  background:#1a283e;
  border-color:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,0.25);
}
.genre-list button.active .g-title{color:#38bdf8;font-weight:700}
.genre-list button.active .g-slug{color:rgba(56,189,248,0.7)}
.genre-list .g-slug{color:var(--dim);font-size:10px}
.genre-list .g-title{color:var(--txt)}
.genre-list .empty{padding:20px;color:var(--dim);font-size:12px;text-align:center;grid-column:1/-1}

/* Cross Filter Genre Bar */
.cf-genre-bar{display:flex;align-items:center;gap:8px}
.btn-cf-genre{
  background:var(--panel2);
  border:1px solid var(--line);
  color:var(--txt);
  border-radius:6px;
  padding:6px 12px;
  font:inherit;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .15s;
}
.btn-cf-genre:hover{border-color:#38bdf8;color:#38bdf8}
.btn-cf-genre.active{
  background:#1a283e;
  border-color:#38bdf8;
  color:#38bdf8;
  font-weight:700;
  box-shadow:0 0 8px rgba(56,189,248,0.2);
}
.btn-cf-genre-clear{
  background:transparent;
  border:1px solid var(--line);
  color:#ef4444;
  border-radius:6px;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s;
}
.btn-cf-genre-clear:hover{background:rgba(239,68,68,0.15);border-color:#ef4444}
.btn-cf-genre-clear.hidden{display:none}

/* ---- Catalog Cross-Filter Modal & Header Button ---- */
.catalog-filter-btn{background:var(--panel2);border:1px solid rgba(56,189,248,0.4);color:#38bdf8;padding:4px 10px;border-radius:var(--r);font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px;cursor:pointer;margin-left:8px;transition:all .15s}
.catalog-filter-btn:hover{background:rgba(56,189,248,0.15);border-color:#38bdf8}
.catalog-filter-btn.hidden{display:none}
.catalog-filter-sheet{width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:clamp(14px,2vw,20px)}
.cf-body{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-right:4px;max-height:64vh;scrollbar-width:thin}
.cf-group{display:flex;flex-direction:column;gap:6px}
.cf-label{font-size:10px;letter-spacing:1.5px;color:#38bdf8;font-weight:700;text-transform:uppercase}
.cf-chips{display:flex;flex-wrap:wrap;gap:6px}
.cf-chip{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:5px 11px;font:inherit;font-size:11px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s}
.cf-chip:hover{border-color:var(--line2);color:var(--txt)}
.cf-chip.active{background:#1a283e;color:#fff;border-color:#38bdf8;box-shadow:0 0 10px rgba(56,189,248,0.25)}
.cf-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--line)}
.btn-muted{background:var(--panel2);border:1px solid var(--line);color:#ef4444;cursor:pointer;padding:7px 14px;border-radius:var(--r);font:inherit;font-size:12px;font-weight:700;transition:all .15s}
.btn-muted:hover{background:rgba(239,68,68,0.1);border-color:#ef4444}
.btn-primary{background:#38bdf8;color:#0b132b;border:none;cursor:pointer;padding:7px 16px;border-radius:var(--r);font:inherit;font-size:12px;font-weight:700;transition:all .15s}
.btn-primary:hover{background:#7dd3fc;box-shadow:0 0 12px rgba(56,189,248,0.4)}

/* ---- modal (restyle ringan, struktur sama) ---- */
.sheet{width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:clamp(12px,2vw,18px);box-sizing:border-box}
.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;flex:0 0 auto;width:100%}
.sheet-head>div:first-child{min-width:0;flex:1 1 auto}
.eyebrow{font-size:10px;letter-spacing:3px;color:var(--acc)}
.sheet-head h2{margin:4px 0;font-size:clamp(15px,1.2vw + 0.5rem,19px);word-break:break-word}
.sheet-head-actions{display:flex;align-items:center;gap:8px}
.tm-bookmark-btn{background:var(--panel2);border:1px solid var(--line);color:#94a3b8;border-radius:var(--r);padding:6px 12px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.tm-bookmark-btn:hover{border-color:#fbbf24;color:#fbbf24;background:rgba(251,191,36,0.1)}
.tm-bookmark-btn.bookmarked{border-color:#fbbf24;color:#fbbf24;background:rgba(251,191,36,0.18)}
.seasons-bar{margin:10px 0 2px 0;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:6px}
.seasons-bar.hidden{display:none}
.seasons-label{font-size:10px;letter-spacing:1.5px;color:var(--dim);font-weight:700}
.seasons-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.season-chip{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:4px 9px;cursor:pointer;font:inherit;font-size:11px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:all .15s}
.season-chip:hover{border-color:var(--acc);color:var(--acc)}
.season-chip.prequel{border-color:rgba(56,189,248,0.4);color:#38bdf8}
.season-chip.prequel:hover{background:rgba(56,189,248,0.15)}
.season-chip.sequel{border-color:rgba(168,85,247,0.4);color:#c084fc}
.season-chip.sequel:hover{background:rgba(168,85,247,0.15)}
.season-chip.movie{border-color:rgba(234,179,8,0.4);color:#facc15}
.season-chip.movie:hover{background:rgba(234,179,8,0.15)}
.season-chip.special{border-color:rgba(52,211,153,0.4);color:#34d399}
.season-chip.special:hover{background:rgba(52,211,153,0.15)}
.season-chip.active{background:var(--acc);color:#04121f;border-color:var(--acc);font-weight:700}
/* DETAIL METADATA & SYNOPSIS (WEB DESKTOP) */
.detail-meta-box{margin:8px 0 2px 0;display:flex;flex-direction:column;gap:8px}
.detail-meta-box.hidden{display:none}
.detail-badges-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge-score{display:inline-flex;align-items:center;gap:4px;background:#241b0d;color:#f59e0b;border:1px solid #78350f;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:700}
.badge-score.hidden{display:none}
.badge-status{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:0.5px}
.badge-status.hidden{display:none}
.badge-status.finished{background:#0e281e;color:#10b981;border:1px solid #065f46}
.badge-status.ongoing{background:#0c2538;color:#38bdf8;border:1px solid #0369a1}
.detail-info-line{font-size:11px;color:#94a3b8}
.detail-genres-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.detail-genres-row.hidden{display:none}
.genre-pill{background:#151926;border:1px solid #232b3e;color:#cbd5e1;border-radius:4px;padding:3px 8px;font-size:11px;white-space:nowrap}
.tm-synopsis-box{background:#0c0e14;border:1px solid #1c202c;border-radius:6px;padding:10px 12px;margin-top:4px;display:flex;flex-direction:column;gap:6px}
.tm-synopsis-box.hidden{display:none}
.tm-synopsis-header{display:flex;align-items:center;justify-content:space-between}
.tm-synopsis-label{font-size:9.5px;letter-spacing:1.5px;color:#38bdf8;font-weight:700}
.tm-synopsis-text{margin:0;font-size:12px;line-height:1.55;color:#cbd5e1;white-space:pre-line}
.tm-synopsis-text.clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tm-synopsis-text.expanded{max-height:150px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.tm-synopsis-toggle{background:none;border:none;color:#38bdf8;font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:2px 0;align-self:flex-end;transition:color .15s}
.tm-synopsis-toggle:hover{color:#7dd3fc;text-decoration:underline}
.sheet-controls{display:flex;gap:clamp(6px,1vw,10px);align-items:center;flex-wrap:wrap;margin:12px 0;flex:0 0 auto;width:100%}
.seg{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex:0 0 auto}
.seg button{background:none;border:0;color:var(--dim);padding:clamp(6px,0.8vw,7px) clamp(11px,1.2vw,13px);cursor:pointer;font:inherit;font-size:11px}
.seg button.active{background:var(--acc);color:#04121f}
#ep-filter{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:7px 10px;font:inherit;font-size:12px;flex:1 1 130px;min-width:90px;outline:0;max-width:200px}
#ep-filter:focus{border-color:var(--acc)}
.tm-count{flex:0 0 auto}
.ep-ranges{display:flex;gap:6px;overflow-x:auto;padding:0 2px 10px 2px;scrollbar-width:thin;flex:0 0 auto;width:100%}
.ep-ranges.hidden{display:none!important}
.ep-range-chip{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:var(--r);padding:4px 10px;cursor:pointer;font:inherit;font-size:11px;white-space:nowrap;flex:0 0 auto}
.ep-range-chip:hover{border-color:var(--acc);color:var(--txt)}
.ep-range-chip.active{background:var(--acc);color:#04121f;border-color:var(--acc);font-weight:700}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;overflow-y:auto;padding:2px;flex:1 1 auto;width:100%;min-height:100px;box-sizing:border-box;scrollbar-width:thin}
.ep{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:clamp(9px,1vw,11px) 4px;cursor:pointer;font:inherit;font-size:13px;min-height:38px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s,background .15s}
.ep:hover{border-color:var(--acc);color:var(--acc)}
.ep.watched{border-color:#166534;color:var(--ok);background:rgba(16,185,129,0.06)}
.ep.last-watch{background:rgba(56,189,248,0.14);border:1.5px solid var(--acc,#38bdf8);color:var(--acc,#38bdf8);font-weight:700;box-shadow:0 0 10px rgba(56,189,248,0.35);position:relative}
.ep.last-watch:hover{background:rgba(56,189,248,0.22);box-shadow:0 0 14px rgba(56,189,248,0.5)}
.ep.last-watch .ep-badge-last{display:block;font-size:8px;font-weight:800;letter-spacing:0.5px;color:var(--acc,#38bdf8);line-height:1;margin-top:2px;text-transform:uppercase}
.icon-btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:5px 10px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.icon-btn:hover{border-color:var(--acc)}
.icon-btn.big{font-size:15px;padding:6px 12px}
button{font-family:inherit}

.player-shell{width:min(1280px,96vw);max-height:94vh;background:#05070a;border:1px solid var(--line2);border-radius:6px;padding:clamp(10px,1.5vw,18px);position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.player-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.player-title{font-size:clamp(13px,0.6vw + 0.7rem,15px);font-weight:700;min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-title .dim{margin-left:8px;font-weight:400}
.player-head-btns{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.player-head-btns button,.player-head-btns select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:6px 12px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:6px;line-height:1}
.player-head-btns select{padding:6px 10px;font-size:12px;font-weight:600;outline:none}
.player-head-btns select.server-select{border-color:rgba(0,219,235,0.4);color:var(--acc)}
.player-head-btns .hidden{display:none}
.player-head-btns button:hover,.player-head-btns select:hover,.player-head-btns select:focus{border-color:var(--acc)}
.ambient-stage{position:relative;border-radius:4px;background:#000;flex:1 1 auto;min-height:0}
.ambient-stage.idle{cursor:none}
.ambient-stage video{position:relative;z-index:2;width:100%;aspect-ratio:16/9;max-height:clamp(240px,66vh,640px);background:#000;display:block;border-radius:4px;object-fit:contain}
.player-shell.idle .player-foot,.player-shell.idle .player-hint{opacity:0;pointer-events:none}
.player-foot,.player-hint{transition:opacity .4s ease}
#ambient,#ambient-fallback{position:absolute;left:-60px;right:-60px;top:-60px;bottom:-60px;z-index:1;width:calc(100% + 120px);height:calc(100% + 120px);pointer-events:none;transform:translate3d(0,0,0)}
#ambient{filter:blur(24px) saturate(1.4);opacity:.45;will-change:transform,opacity}
#ambient-fallback{filter:blur(24px);opacity:.40;z-index:0;transition:background 1.2s ease;background:transparent;will-change:transform}
body.no-ambient #ambient,body.no-ambient #ambient-fallback{display:none}
.spinner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.spinner.hidden{display:none}
.ring{width:40px;height:40px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--acc);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.player-foot{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.player-foot>button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:8px 14px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:6px;line-height:1}
.player-foot>button:hover{border-color:var(--acc)}
.player-foot>button:disabled{opacity:.35;cursor:default}
.variants{display:flex;gap:6px;flex:1 1 auto;flex-wrap:wrap;min-width:0}
.variants button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:var(--r);padding:6px 12px;cursor:pointer;font:inherit;font-size:11px}
.variants button.active{background:var(--acc);color:#04121f;border-color:var(--acc)}
/* Subtitle picker dropdown di player foot. Selaras dengan tema UI Tatap:
   panel2 background + line border. Icon 💬 + native <select> dengan optik monospace. */
.sub-picker{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:4px 8px}
.sub-picker.hidden{display:none}
.sub-picker .sub-icon{display:inline-flex;align-items:center;font-size:13px;line-height:1;color:var(--dim);user-select:none}
.sub-picker select{background:transparent;border:0;color:var(--txt);font:inherit;font-size:11px;cursor:pointer;padding:3px 4px;outline:none;min-width:96px;max-width:200px}
.sub-picker select:focus{outline:1px solid var(--acc);outline-offset:-1px;border-radius:var(--r)}
.sub-picker select option{background:var(--panel);color:var(--txt);font-family:inherit}
.sub-size{display:flex;gap:4px}
.sub-size button{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:var(--r);padding:2px 7px;cursor:pointer;font:inherit;font-size:10px}
.sub-size button.active{background:var(--acc);color:#04121f;border-color:var(--acc)}
.sub-bg-btn{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:var(--r);padding:2px 7px;cursor:pointer;font:inherit;font-size:10px;display:inline-flex;align-items:center;gap:3px;line-height:1}
.sub-bg-btn:hover{border-color:var(--acc);color:var(--txt)}
.sub-bg-btn.active{background:var(--acc);color:#04121f;border-color:var(--acc)}
.sub-translate{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:var(--r);padding:2px 7px;cursor:pointer;font:inherit;font-size:10px;display:inline-flex;align-items:center;gap:3px;line-height:1}
.sub-style-picker{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:4px 8px}
.stage-sub-controls{display:none}
.ambient-stage:fullscreen .stage-sub-controls,
.ambient-stage:-webkit-full-screen .stage-sub-controls,
.ambient-stage.is-fs .stage-sub-controls,
#player-modal.is-fullscreen .stage-sub-controls{
  position:absolute;top:20px;right:20px;z-index:50;display:flex;align-items:center;gap:8px;
  background:rgba(15,23,42,0.88);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:24px;
  padding:6px 14px;box-shadow:0 4px 20px rgba(0,0,0,0.6);opacity:0;transition:opacity .25s ease;pointer-events:auto;
}
.ambient-stage:fullscreen:hover .stage-sub-controls,
.ambient-stage:-webkit-full-screen:hover .stage-sub-controls,
.ambient-stage:fullscreen .stage-sub-controls.active,
.ambient-stage:-webkit-full-screen .stage-sub-controls.active,
.ambient-stage.is-fs:hover .stage-sub-controls,
.ambient-stage.is-fs .stage-sub-controls.active,
#player-modal.is-fullscreen .stage-sub-controls:hover,
#player-modal.is-fullscreen .stage-sub-controls.active{
  opacity:1;
}
.stage-sub-controls .sub-icon{display:inline-flex;align-items:center;color:var(--acc);font-size:14px}

/* Gesture layer & OSD */
.gesture-stage{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gesture-ripple{position:absolute;top:0;bottom:0;width:40%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.gesture-ripple.left{left:0;border-radius:0 100% 100% 0/0 50% 50% 0;transform:scale(0.85)}
.gesture-ripple.right{right:0;border-radius:100% 0 0 100%/50% 0 0 50%;transform:scale(0.85)}
.gesture-ripple.active{opacity:1;transform:scale(1)}
.gesture-ripple .ripple-icon{display:inline-flex;align-items:center;justify-content:center;font-size:28px;line-height:1}
.gesture-ripple .ripple-text{font-size:13px;font-weight:700;margin-top:4px;letter-spacing:1px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}

.gesture-osd{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;background:var(--panel-solid);border:1px solid var(--line2);border-radius:24px;padding:8px 18px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.6);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.gesture-osd.hidden{opacity:0;transform:scale(0.9);pointer-events:none}
.gesture-osd .osd-icon{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
.gesture-osd .osd-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,0.15);border-radius:3px;overflow:hidden}
.gesture-osd .osd-bar{height:100%;background:var(--acc);border-radius:3px;transition:width .05s linear}
.gesture-osd .osd-val{font-size:12px;font-weight:600;min-width:38px;text-align:right;color:var(--txt)}

/* Overlay subtitle milik app: posisi di atas video, pointer tembus.
   Harmonis dan konsisten antara mode windowed dan fullscreen. */
.subs-overlay{position:absolute;left:0;right:0;bottom:7%;z-index:4;display:flex;justify-content:center;pointer-events:none;padding:0 6%;transition:bottom .2s ease}
.subs-overlay span{display:inline-block;max-width:100%;text-align:center;color:#fff;background:rgba(0,0,0,.72);
  padding:.2em .6em;border-radius:4px;line-height:1.45;font-weight:600;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 4px rgba(0,0,0,.8);font-family:inherit}
.subs-overlay span:empty{display:none;padding:0;background:transparent}
.subs-overlay.sz-s span{font-size:clamp(13px,1.1vw + .55rem,18px)}
.subs-overlay.sz-m span{font-size:clamp(16px,1.5vw + .65rem,24px)}
.subs-overlay.sz-l span{font-size:clamp(20px,2.0vw + .75rem,30px)}
.subs-overlay.sz-xl span{font-size:clamp(25px,2.6vw + .95rem,38px)}

/* Subtitle Background Modes */
.subs-overlay.sub-bg-none span{
  background:transparent !important;
  padding:0 !important;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000,
    0 3px 6px rgba(0,0,0,0.95) !important;
}
.subs-overlay.sub-bg-semi span{
  background:rgba(0,0,0,.72) !important;
  padding:.2em .6em !important;
  border-radius:4px;
}
.subs-overlay.sub-bg-solid span{
  background:rgba(0,0,0,.92) !important;
  padding:.2em .6em !important;
  border-radius:4px;
}

/* Floating Skip Opening / Ending Button */
.pm-skip-btn {
  position: absolute;
  right: 24px;
  bottom: 84px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--acc, #38bdf8);
  color: var(--acc, #38bdf8);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.25);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.2s ease;
  user-select: none;
}
.pm-skip-btn:hover {
  background: var(--acc, #38bdf8);
  color: #0b0f19;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.4);
}
.pm-skip-btn:active {
  transform: translateY(0) scale(0.98);
}
.pm-skip-btn.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px);
  display: none !important;
}
/* Body in fullscreen: no scrollbar */
body.is-player-fs {
  overflow: hidden !important;
}

#player-modal.is-fullscreen .pm-skip-btn,
.ambient-stage:fullscreen .pm-skip-btn,
.ambient-stage:-webkit-full-screen .pm-skip-btn,
.ambient-stage.is-fs .pm-skip-btn {
  right: 36px;
  bottom: 80px;
  font-size: 14.5px;
  padding: 10px 22px;
  z-index: 60 !important;
  display: inline-flex !important;
}
#player-modal.is-fullscreen .pm-skip-btn.hidden,
.ambient-stage:fullscreen .pm-skip-btn.hidden,
.ambient-stage:-webkit-full-screen .pm-skip-btn.hidden,
.ambient-stage.is-fs .pm-skip-btn.hidden {
  display: none !important;
}

/* Sembunyikan tombol fullscreen native Chromium agar fullscreen selalu di level container panggung (.ambient-stage) */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* Fullscreen styles for player modal & ambient-stage container */
#player-modal.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}
#player-modal.is-fullscreen .player-shell {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
}
#player-modal.is-fullscreen .player-head,
#player-modal.is-fullscreen .player-foot,
#player-modal.is-fullscreen .player-hint {
  display: none !important;
}
#player-modal.is-fullscreen .ambient-stage,
.ambient-stage:fullscreen,
.ambient-stage:-webkit-full-screen,
.ambient-stage.is-fs {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  flex: 1 1 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
#player-modal.is-fullscreen .ambient-stage video,
.ambient-stage:fullscreen video,
.ambient-stage:-webkit-full-screen video,
.ambient-stage.is-fs video {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: #000 !important;
  display: block !important;
  margin: auto !important;
}

#player-modal.is-fullscreen #ambient,
#player-modal.is-fullscreen #ambient-fallback,
.ambient-stage:fullscreen #ambient,
.ambient-stage:fullscreen #ambient-fallback,
.ambient-stage:-webkit-full-screen #ambient,
.ambient-stage:-webkit-full-screen #ambient-fallback,
.ambient-stage.is-fs #ambient,
.ambient-stage.is-fs #ambient-fallback {
  display: none !important;
}
#player-modal.is-fullscreen .subs-overlay,
.ambient-stage:fullscreen .subs-overlay,
.ambient-stage:-webkit-full-screen .subs-overlay,
.ambient-stage.is-fs .subs-overlay {
  bottom: 8% !important;
  padding: 0 6% !important;
  z-index: 40 !important;
}
.ambient-stage:fullscreen .subs-overlay.sz-s span,
.ambient-stage:-webkit-full-screen .subs-overlay.sz-s span,
#player-modal.is-fullscreen .subs-overlay.sz-s span {
  font-size: clamp(14px, 1.2vw + .6rem, 20px);
}
.ambient-stage:fullscreen .subs-overlay.sz-m span,
.ambient-stage:-webkit-full-screen .subs-overlay.sz-m span,
#player-modal.is-fullscreen .subs-overlay.sz-m span {
  font-size: clamp(18px, 1.6vw + .7rem, 26px);
}
.ambient-stage:fullscreen .subs-overlay.sz-l span,
.ambient-stage:-webkit-full-screen .subs-overlay.sz-l span,
#player-modal.is-fullscreen .subs-overlay.sz-l span {
  font-size: clamp(22px, 2.1vw + .85rem, 34px);
}
.ambient-stage:fullscreen .subs-overlay.sz-xl span,
.ambient-stage:-webkit-full-screen .subs-overlay.sz-xl span,
#player-modal.is-fullscreen .subs-overlay.sz-xl span {
  font-size: clamp(28px, 2.8vw + 1.1rem, 44px);
}

/* Native video cues (rendered when browser fullscreens the <video> directly) */
video::cue {
  color:#fff;background:rgba(0,0,0,.78);font-family:inherit;font-weight:600;line-height:1.45;font-size:1.25rem;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
video.sub-bg-none::cue {
  background: transparent !important;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 3px 6px rgba(0,0,0,0.95);
}
video.sub-bg-solid::cue {
  background: rgba(0,0,0,.94) !important;
}
video.sub-sz-s::cue { font-size: 1rem; }
video.sub-sz-m::cue { font-size: 1.25rem; }
video.sub-sz-l::cue { font-size: 1.55rem; }
video.sub-sz-xl::cue { font-size: 1.95rem; }

.player-foot{padding:8px 4px}
.player-foot>.variants{flex:0 1 auto;max-width:55%}
.player-foot>.sub-picker{flex:0 0 auto}
.player-hint{margin-top:8px;text-align:center;font-size:clamp(10px,0.3vw + 0.55rem,11px)}
.toast{position:fixed;bottom:calc(var(--status-h) + 60px);left:50%;transform:translateX(-50%);z-index:200;background:var(--panel);border:1px solid var(--acc);color:var(--txt);padding:9px 16px;border-radius:var(--r);font-size:12px;max-width:92vw;text-align:center}
.toast.hidden{display:none}

/* ==================== BREAKPOINTS ==================== */

/* small phones */
@media (max-width:480px){
  :root{--status-h:110px;--pad-x:12px}
  .tui-head .brand-ver{display:none}
  .bottom-search-row{padding:6px var(--pad-x);gap:8px}
  .search-input-wrap{padding:5px 8px}
  .statusbar{gap:6px;font-size:9px;padding:3px var(--pad-x) 4px}
  .sb-shortcuts{display:none}
  .sb-meta{width:100%;justify-content:space-between;margin-left:0}
  #cmd{font-size:13px}
  .caret{height:13px}
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px}
  .lane-card{min-width:108px;max-width:108px}
  .poster-card .pc-idx{font-size:9px;padding:0 4px}
  .poster-body{padding:5px 6px}
  .poster-body b{font-size:11px}
  .trow{padding:3px 6px;gap:6px}
  .trow .tr-slug{display:none}
  .trow-up{grid-template-columns:minmax(96px,32%)minmax(40px,16%)1fr;gap:6px}
  .trow-up .tr-day{font-size:10px}
  .trow-up .tr-ep{font-size:11px}
  .sheet-head h2{font-size:14px}
  .ep-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:5px}
  .ep{font-size:11px;padding:7px 2px;min-height:32px}
  .ep.last-watch .ep-badge-last{font-size:7px;letter-spacing:0.2px}
  .genre-sheet{padding:12px}
  .genre-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:64vh}
  .genre-list button{padding:6px 8px}
  .player-shell{width:100vw;height:100vh;max-height:100vh;border-radius:0;border-width:0;padding:8px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .ambient-stage video{max-height:72vh}
  .player-foot{gap:6px}
  .player-foot>button{padding:7px 10px;font-size:12px}
  .variants button{padding:5px 9px;font-size:10px}
  .sub-picker{padding:3px 6px}
  .sub-picker .sub-icon{font-size:12px}
  .sub-picker select{min-width:80px;font-size:10px;padding:2px 2px}
  .sub-size button{padding:2px 6px;font-size:9px}
  .sub-translate{padding:2px 6px;font-size:9px}
  .subs-overlay{bottom:9%;padding:0 4%}
  .player-hint{font-size:10px}
  #ambient,#ambient-fallback{left:-20px;right:-20px;top:-20px;bottom:-20px;width:calc(100% + 40px);height:calc(100% + 40px);filter:blur(16px)}
  .toast{bottom:calc(var(--status-h) + 20px)}
}

/* phones -> small tablets */
@media (min-width:481px) and (max-width:640px){
  :root{--status-h:90px;--pad-x:14px}
  .tui-head .brand-ver{display:none}
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .lane-card{min-width:118px;max-width:118px}
  .player-shell{padding:10px}
  #ambient,#ambient-fallback{left:-30px;right:-30px;top:-30px;bottom:-30px;width:calc(100% + 60px);height:calc(100% + 60px);filter:blur(20px)}
}

/* tablets */
@media (min-width:641px) and (max-width:900px){
  :root{--status-h:86px}
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
}

/* small desktop */
@media (min-width:901px) and (max-width:1280px){
  :root{--status-h:88px}
}

/* wide screens */
@media (min-width:1281px){
  :root{--pad-x:32px}
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .lane-card{min-width:140px;max-width:140px}
}

/* ultra-wide */
@media (min-width:1600px){
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .player-shell{width:min(1600px,94vw)}
}

/* short viewports (laptop landscape with player) */
@media (max-height:600px){
  .ambient-stage video{max-height:62vh}
}
@media (max-height:480px){
  .ambient-stage video{max-height:55vh}
  .player-foot>button{padding:5px 9px}
}

/* landscape phone: short & wide */
@media (max-height:500px) and (orientation:landscape){
  .ambient-stage video{max-height:62vh}
  .player-shell{padding:6px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .caret{animation:none;opacity:1}
  .ring{animation-duration:3s}
  .player-foot,.player-hint{transition:none}
}

/* Floating VM Auto-Reset Banner */
.vm-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  background: rgba(16, 20, 32, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(70, 140, 255, 0.45);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(50, 130, 255, 0.25);
  border-radius: 30px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #e4e9f5;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.vm-banner.hidden {
  display: none !important;
  opacity: 0;
  transform: translate(-50%, -10px);
}
.vm-banner.success {
  border-color: rgba(60, 210, 120, 0.6);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(60, 210, 120, 0.3);
  color: #a8f5c8;
}
.vm-banner.warning {
  border-color: rgba(255, 180, 50, 0.6);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 180, 50, 0.3);
  color: #ffe6aa;
}
.vm-banner-icon {
  font-size: 16px;
  display: inline-block;
}
.vm-spin {
  display: inline-block;
  animation: vmSpinAnim 1.2s linear infinite;
}
@keyframes vmSpinAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Inside Player Notice */
.pm-vm-notice {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background: rgba(14, 18, 28, 0.94);
  border: 1px solid rgba(80, 160, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 7px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #e6edfd;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
  pointer-events: none;
  transition: all 0.3s;
  max-width: 85vw;
}
.pm-vm-notice.hidden {
  display: none !important;
}
.pm-vm-notice.success {
  border-color: rgba(60, 210, 120, 0.6);
  color: #a8f5c8;
}
.pm-vm-notice.warning {
  border-color: rgba(255, 180, 50, 0.6);
  color: #ffe6aa;
}

/* ---- STB AUTH, ADMIN & NOBAR UI ---- */
.header-nobar-btn, .header-acc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line2); color: var(--txt);
  padding: 6px 10px; border-radius: var(--r); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; transition: all .15s;
}
.header-nobar-btn:hover, .header-acc-btn:hover { border-color: var(--acc); color: var(--acc); }
.header-nobar-btn.active { border-color: var(--ok); color: var(--ok); background: rgba(74, 222, 128, 0.12); }
.acc-role-badge {
  background: rgba(167, 139, 250, 0.18); color: var(--acc2);
  border: 1px solid rgba(167, 139, 250, 0.45); border-radius: 3px;
  padding: 1px 5px; font-size: 9px; letter-spacing: .06em;
}

.auth-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 7, 10, 0.96); backdrop-filter: blur(8px); padding: 16px;
}
.auth-overlay.hidden { display: none !important; }
.auth-card {
  width: min(390px, 96vw); background: var(--panel); border: 1px solid var(--line2);
  border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
}
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-sub { margin: 0; line-height: 1.45; }
.auth-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dim); }
.auth-lbl input, .stb-row-form input, .stb-row-form select {
  background: var(--panel2); border: 1px solid var(--line2); color: var(--txt);
  border-radius: var(--r); padding: 8px 10px; font: inherit; font-size: 13px; outline: none;
}
.auth-lbl input:focus, .stb-row-form input:focus { border-color: var(--acc); }
.auth-err {
  background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.45);
  color: var(--err); font-size: 12px; padding: 8px 10px; border-radius: var(--r);
}
.auth-err.hidden { display: none; }
.auth-btn { padding: 10px 14px; font-weight: 700; cursor: pointer; border-radius: var(--r); border: none; background: var(--acc); color: #08090c; }
.auth-btn:hover { opacity: .9; }

.stb-modal-sheet { width: min(740px, 95vw); max-height: 88vh; display: flex; flex-direction: column; gap: 14px; }
.stb-modal-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 2px; }
.stb-card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.stb-card h3 { margin: 0; font-size: 13px; color: var(--acc); letter-spacing: .03em; }
.stb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stb-row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stb-row-form input { flex: 1 1 150px; min-width: 120px; }

.btn-accent-sm, .btn-mini, .btn-danger-sm {
  border-radius: var(--r); padding: 7px 12px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s;
}
.btn-accent-sm { background: var(--acc); color: #08090c; }
.btn-accent-sm:hover { opacity: .9; }
.btn-mini { background: var(--panel); border-color: var(--line2); color: var(--txt); padding: 4px 9px; font-size: 11px; }
.btn-mini:hover { border-color: var(--acc); color: var(--acc); }
.btn-danger-sm { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.45); color: var(--err); }
.btn-danger-sm:hover { background: rgba(248, 113, 113, 0.25); }

.adm-users-list, .nb-rooms-list { display: flex; flex-direction: column; gap: 6px; }
.adm-user-row, .nb-room-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.adm-user-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.adm-user-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.nb-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.nb-room-banner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-color: rgba(74, 222, 128, 0.35); }
.nb-banner-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-banner-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-code-chip {
  background: rgba(125, 211, 252, 0.12); border: 1px solid rgba(125, 211, 252, 0.35);
  color: var(--acc); padding: 2px 7px; border-radius: var(--r); font-family: var(--font-mono); font-size: 12px;
}
.nb-role-pill {
  background: rgba(74, 222, 128, 0.16); color: var(--ok); border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 3px; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
}
.nb-role-pill.guest {
  background: rgba(125, 211, 252, 0.14); color: var(--acc); border-color: rgba(125, 211, 252, 0.4);
}
.nb-members { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-member-chip {
  padding: 4px 8px; border-radius: var(--r); font-size: 12px;
  background: var(--panel); border: 1px solid var(--line2); color: var(--txt);
}
.nb-member-chip.host { border-color: rgba(74, 222, 128, 0.45); color: var(--ok); }
.nb-chat-log {
  height: 150px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12px;
}
.nb-chat-line strong { color: var(--acc); }
.nb-chat-line.sys { color: var(--dim); font-style: italic; }

.pm-nobar-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 5px 14px; background: rgba(74, 222, 128, 0.08);
  border-bottom: 1px solid rgba(74, 222, 128, 0.25); font-size: 12px;
}
.pm-nobar-bar.hidden { display: none !important; }
.pm-nobar-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pm-nobar-actions { display: flex; align-items: center; gap: 6px; }
.nb-chat-preview { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }