:root{font-family:Inter,Roobert,'Segoe UI',Arial,sans-serif;color-scheme:dark;--bg:#0e0e10;--surface:#18181b;--raised:#232329;--raised2:#2e2e36;--input:#101015;--text:#efeff1;--muted:#a4a4b2;--line:#383840;--accent:#9147ff;--accentHover:#772ce8;--accentText:#bf94ff;--warn:#ff6a78;--shadow:0 22px 75px #000a;--settings-bg:rgba(24,24,27,.98)}
body.light{color-scheme:light;--bg:#f2f2f5;--surface:#fff;--raised:#ececf1;--raised2:#dedee6;--input:#f8f8fa;--text:#202029;--muted:#626278;--line:#d2d2dd;--accent:#773ad9;--accentHover:#6326c6;--accentText:#6c31c7;--warn:#bf3348;--shadow:0 16px 55px #1d153025;--settings-bg:rgba(255,255,255,.98)}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;width:100%;height:100%}body{background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.btn{border:1px solid var(--line);border-radius:7px;padding:8px 12px;color:var(--text);background:var(--raised);font-size:12px;font-weight:700;min-height:34px;white-space:nowrap}.btn:hover:not(:disabled){background:var(--raised2)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover:not(:disabled){background:var(--accentHover)}.btn.subtle{background:var(--raised)}.btn.danger{color:var(--warn)}.btn.big{font-size:14px;padding:13px 22px}.btn.full{width:100%;margin-top:9px}.icon-btn{border:0;background:transparent;color:var(--muted);padding:6px 9px;font-size:18px;border-radius:6px;line-height:1}.icon-btn:hover{color:var(--text);background:var(--raised2)}.tiny{font-size:11px;color:var(--muted)}.topbar{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface);gap:12px}.brand{display:flex;align-items:center;gap:9px;font-size:15px;white-space:nowrap}.brand strong span{color:var(--accentText)}.brand-icon{background:var(--accent);color:white;font-size:16px;display:grid;place-items:center;border-radius:6px;width:26px;height:26px}.brand small{color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 5px;font-size:9px}.topactions{display:flex;gap:8px}.workspace{display:flex;height:calc(100vh - 57px);min-height:0}.main-column{min-width:0;flex:1;display:flex;flex-direction:column;background:var(--bg);position:relative}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;gap:14px}.empty-symbol{height:85px;width:85px;background:var(--raised);border:1px solid var(--line);color:var(--accentText);display:grid;place-items:center;border-radius:24px;font-size:52px}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--accentText);font-weight:800;margin:4px 0 0}.empty-state h1{font-size:clamp(23px,3vw,34px);letter-spacing:-.04em;margin:0}.empty-copy{max-width:540px;color:var(--muted);font-size:14px;line-height:1.55;margin:0}.player-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));grid-auto-rows:minmax(0,1fr);gap:8px;padding:10px;overflow:auto;align-content:start}.player-grid[data-count="1"]{grid-template-columns:minmax(0,min(100%,1100px));justify-content:center}.player-grid[data-count="2"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}.player-card{background:var(--surface);border:1px solid var(--line);border-radius:7px;min-width:0;overflow:hidden;display:flex;flex-direction:column;align-self:start}.player-head{display:flex;justify-content:space-between;align-items:center;min-height:34px;padding:4px 7px 4px 11px;gap:6px}.player-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.player-time{font-size:10px;color:var(--muted);white-space:nowrap}.player-actions{display:flex;gap:1px;align-items:center}.player-actions button{font-size:12px}.player-frame{aspect-ratio:16/9;position:relative;background:#000;min-height:300px}.player-frame>div{width:100%;height:100%}.player-unavailable{background:var(--input);padding:20px;display:grid;place-content:center;gap:10px;text-align:center;color:var(--muted);height:300px;font-size:12px}.player-grid[data-count="2"] .player-card{width:100%}.control-bar{border-top:1px solid var(--line);background:var(--surface);padding:8px 14px 12px;flex-shrink:0;position:relative}.timeline-row{position:relative}.timeline-row input{width:100%;margin:0;accent-color:var(--accent);cursor:pointer;height:15px}.timeline-hint{display:none;position:absolute;bottom:23px;left:50%;transform:translateX(-50%);padding:5px 8px;background:var(--raised);border:1px solid var(--line);border-radius:5px;font-size:10px;color:var(--muted);white-space:nowrap}.timeline-row:hover .timeline-hint{display:block}.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}.control-left,.control-right{display:flex;align-items:center;gap:8px}.readout{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.player-btn{min-width:38px;font-size:18px}.chat-column{width:340px;flex:0 0 340px;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;--chat-bg:var(--surface);--chat-text:var(--text);--chat-alt:var(--raised);--chat-font:1;--emote-size:1;--spacing:0px}.chat-heading{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line)}.chat-title{font-size:13px;font-weight:800}.chat-tabs{display:flex;overflow-x:auto;gap:5px;padding:8px;border-bottom:1px solid var(--line);flex-shrink:0}.chat-tab{background:var(--raised);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--text);border-radius:5px;padding:6px 8px;white-space:nowrap;cursor:pointer}.chat-tab.active{background:var(--accent);color:white;border-color:var(--accent)}.chat-status{font-size:11px;color:var(--muted);padding:9px 11px;border-bottom:1px solid var(--line);flex-shrink:0}.chat-status.error{color:var(--warn)}.chat-messages{background:var(--chat-bg);color:var(--chat-text);flex:1;min-height:0;overflow:auto;padding:8px 0;font-size:calc(14.4px * var(--chat-font));line-height:1.55;scrollbar-width:thin}.chat-message{padding:calc(2px + var(--spacing)/2) 10px;overflow-wrap:anywhere}.chat-column.alternate .chat-message:nth-child(even){background:var(--chat-alt)}.chat-time{color:var(--muted);font-size:.82em;margin-right:5px}.chat-user{font-weight:750;color:var(--user-color,#fe4d71)}.chat-badge{width:1.1em;height:1.1em;vertical-align:-.14em;margin-right:2px;object-fit:contain}.chat-emote{height:calc(31.2px * var(--emote-size));width:auto;max-width:calc(96px * var(--emote-size));object-fit:contain;vertical-align:middle}.chat-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);flex-shrink:0}.catchup{padding:9px;cursor:pointer;background:var(--raised);color:var(--accentText);border:1px solid var(--line);margin:5px;border-radius:6px}.chat-restore{position:fixed;right:10px;top:64px;border:1px solid var(--line);padding:9px;background:var(--raised);color:var(--text);border-radius:7px;z-index:8;cursor:pointer}
.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:center;padding:12px;background:#08070a87}.modal{width:min(640px,100%);max-height:min(92vh,850px);overflow:auto;background:var(--settings-bg);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:13px;position:relative}.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.modal-heading h2{font-size:20px;letter-spacing:-.03em;margin:0}.modal-heading p{font-size:12px;color:var(--muted);margin:6px 0 0}.tab-toggle{background:var(--raised);padding:4px;border-radius:8px;display:flex;gap:4px}.tab-toggle button{flex:1;background:none;color:var(--muted);font-weight:700;border:0;border-radius:6px;padding:8px;font-size:12px}.tab-toggle button.selected{background:var(--accent);color:#fff}.search-line{display:flex;gap:8px;margin:0;min-width:0}.search-line input{min-width:0;flex:1}.search-line input,.color-setting input[type=color]{border:1px solid var(--line);background:var(--input);border-radius:7px;color:var(--text);padding:9px 11px;font-size:12px}.helper-status{font-size:11px;color:var(--muted);min-height:16px}.helper-status.error{color:var(--warn)}.channel-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px}.channel-option{border:1px solid var(--line);border-radius:7px;background:var(--raised);padding:8px;display:flex;align-items:center;gap:9px;color:var(--text);text-align:left;min-width:0}.channel-option:hover{border-color:var(--accent)}.channel-option img,.selected-channel img{width:34px;height:34px;object-fit:cover;border-radius:50%;background:var(--raised2)}.channel-option span{display:flex;flex-direction:column;gap:2px;min-width:0}.channel-option strong{font-size:12px;overflow:hidden;text-overflow:ellipsis}.channel-option small{color:var(--muted);font-size:10px}.selected-channel{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;background:var(--raised);padding:8px}.selected-channel strong{font-size:12px;flex:1}.vod-results{display:flex;flex-direction:column;gap:9px;max-height:min(43vh,470px);overflow:auto;padding-right:5px}.vod-item{border:1px solid var(--line);border-radius:8px;background:var(--raised);overflow:hidden;display:grid;grid-template-columns:minmax(115px,180px) minmax(0,1fr);gap:10px}.vod-thumb{width:100%;height:100%;min-height:100px;object-fit:cover;background:var(--raised2)}.vod-info{display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px 9px 9px 0}.vod-info strong{font-size:13px;line-height:1.3;overflow-wrap:anywhere}.vod-info small{color:var(--muted);font-size:11px}.vod-info .btn{align-self:flex-start}.paste-line{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px}.paste-line>label{font-size:12px;font-weight:700}.compact-modal{max-width:400px}.compact-modal h2{margin:0;font-size:19px}.compact-modal p{color:var(--muted);font-size:13px}.end-buttons{display:flex;justify-content:flex-end;gap:8px}.settings-modal{width:min(560px,calc(100vw - 24px));gap:13px}.settings-heading{align-items:center;display:grid;grid-template-columns:1fr auto 1fr}.settings-heading .icon-btn{justify-self:end}.theme-switch{border:0;display:flex;gap:14px;margin:0;padding:0;align-items:center}.theme-switch label{font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:4px}.theme-switch input{accent-color:var(--accent)}.section-label{font-size:12px;font-weight:800;color:var(--accentText);border-bottom:1px solid var(--line);padding:6px 0}.setting-slider{display:flex;flex-direction:column;gap:7px}.setting-slider label{font-size:12px;display:flex;justify-content:space-between}.setting-slider output{color:var(--accentText);font-weight:800}.setting-slider input{appearance:none;width:100%;height:6px;border-radius:5px;background:linear-gradient(90deg,#868695 0%,#868695 var(--pct,50%),#34343d var(--pct,50%),#34343d 100%);cursor:pointer}.setting-slider input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;background:var(--accent);border:2px solid var(--surface);border-radius:50%;box-shadow:0 1px 4px #0006}.setting-slider input::-moz-range-thumb{width:12px;height:12px;background:var(--accent);border:2px solid var(--surface);border-radius:50%}.setting-check{font-size:12px;display:flex;align-items:center;gap:8px;min-height:26px;cursor:pointer}.setting-check input,.filter-list input{width:16px;height:16px;accent-color:var(--accent)}.setting-expander{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:8px}.filter-list{display:flex;flex-direction:column;gap:8px;border-left:2px solid var(--line);margin-left:12px;padding:5px 0 5px 13px}.filter-list label{font-size:11px;display:flex;gap:8px;align-items:center;cursor:pointer}.filter-list.disabled{opacity:.48}.color-setting{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:9px;border-top:1px solid var(--line);font-size:12px}.color-setting input[type=color]{width:39px;height:34px;padding:3px;cursor:pointer}.color-setting input[type=color]:disabled{opacity:.4;cursor:not-allowed}.toggle-group{display:flex;gap:12px;align-items:center}.toggle-group input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.reset-footer{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.confirm{font-size:11px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.confirm .btn{min-height:26px;padding:5px 8px}.toast{position:fixed;z-index:200;right:20px;bottom:20px;background:var(--raised);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:12px 17px;color:var(--text);font-size:12px;max-width:min(430px,calc(100vw - 24px))}
@media(max-width:900px){.chat-column{width:295px;flex-basis:295px}.player-grid{grid-template-columns:1fr}.player-frame{min-height:300px}.control-right .tiny{display:none}}@media(max-width:660px){.topbar{padding:0 9px}.brand small{display:none}.topactions{gap:4px}.topactions .btn{padding:7px 8px;font-size:11px}.chat-column{width:100%;flex-basis:auto;position:absolute;z-index:15;top:57px;bottom:0;right:0;left:0}.workspace{position:relative}.main-column{width:100%}.workspace:not(.show-mobile-chat) .chat-column{display:none}.workspace.show-mobile-chat .chat-restore{display:none}.player-grid{grid-auto-rows:auto}.control-row{flex-wrap:wrap}.modal{padding:14px}.settings-heading{grid-template-columns:1fr auto}.settings-heading .theme-switch{grid-column:1/-1;grid-row:2;justify-content:center}.vod-item{grid-template-columns:120px 1fr}.vod-thumb{min-height:90px}.vod-info strong{font-size:11px}}

.recent-section{border-bottom:1px solid var(--line);padding-bottom:10px}.recent-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.recent-head strong{font-size:11px;color:var(--muted)}.link-btn{border:0;background:transparent;color:var(--accentText);font-size:11px;font-weight:700;padding:5px 8px}.link-btn:hover{text-decoration:underline}

/* Twitch account authorization controls. Keep the user-facing status readable in both themes. */
.topactions .twitch-login { background: #9147ff; border: 1px solid #9147ff; color: #fff; }
.topactions .twitch-login:hover { background:#772ce8; border-color:#772ce8; }
.twitch-identity { color: var(--muted, #adadb8); font-size:12px; font-weight:600; max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width: 740px){ .twitch-identity {display:none;} .topactions .twitch-login {padding:6px;} }


/* VOD Watchers website v3 — extension-faithful visual layer.
   Website-only functionality remains, but the layout, spacing, menus, and player
   chrome follow the original browser extension instead of a dashboard aesthetic. */
:root {
  --bg:#0e0e10;--surface:#18181b;--raised:#2f2f35;--raised2:#3f3f46;
  --input:#0e0e10;--text:#efeff1;--muted:#adadb8;--line:#303039;
  --accent:#9147ff;--accentHover:#772ce8;--accentText:#bf94ff;
}
body.light{
  --bg:#f2f2f5;--surface:#fff;--raised:#e9e9ee;--raised2:#dedef0;
  --input:#fafafd;--text:#22222b;--muted:#646478;--line:#ccccd5;
}
/* Small top bar, central label, plus Add VOD at left just like the extension. */
.topbar{height:36px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--line);position:relative;flex-shrink:0}
.top-left{display:flex;align-items:center;position:relative;z-index:1}
.top-left #openAdd{font-size:12px;padding:5px 12px;min-height:26px;border:0;border-radius:6px}
.topbar .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-content:center;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none}
.topbar .brand strong{font-size:14px;color:var(--text);font-weight:600}
.topactions{margin-left:auto;gap:7px;align-items:center;position:relative;z-index:1}
.topactions .btn{font-size:11px;padding:4px 8px;min-height:25px;border-radius:4px}
.topactions #settingsOpen{font-size:15px;min-width:28px;padding:3px 6px}
.topactions .twitch-identity{font-size:10px;max-width:100px}
.topactions .twitch-login{font-size:11px}
.workspace{height:calc(100vh - 36px);background:var(--bg);min-height:0}
.main-column{position:relative;background:var(--bg);min-height:0}
/* Extension's narrow 340px right chat rail with its own header and tabs. */
.chat-column{flex-basis:340px;width:340px;background:var(--surface);border-left:1px solid var(--line)}
.chat-heading{height:39px;padding:0 12px;display:grid;grid-template-columns:1fr auto 1fr;border-bottom:0;flex-shrink:0}
.chat-title{grid-column:2;text-align:center;font-size:13px;font-weight:600;color:var(--text)}
#chatCollapse{grid-column:1;grid-row:1;justify-self:start;border:1px solid var(--line);background:var(--raised);color:var(--text);font-weight:700;border-radius:4px;padding:3px 8px;font-size:15px;line-height:1}
.chat-tabs{height:45px;gap:6px;padding:3px 12px 7px;align-items:center;flex-shrink:0;border-bottom:1px solid var(--line);overflow-x:auto}
.chat-tab{background:var(--raised);border:1px solid var(--line);border-radius:4px;font-size:11px;font-weight:600;padding:4px 10px;color:var(--text)}
.chat-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.chat-status{font-size:12px;padding:8px 10px;border:0;color:var(--muted)}
.chat-messages{padding:8px 0;line-height:1.6}
.chat-message{padding:calc(2px + var(--spacing)/2) 9px}
.chat-footer{padding:8px 11px;font-size:10px;color:var(--muted);border-color:var(--line)}
.chat-footer .btn{font-size:12px;font-weight:600;min-height:28px;padding:5px 9px;border-radius:5px;background:var(--raised)}
.chat-restore{top:43px;border-radius:4px;background:var(--raised);font-size:12px}
/* Flat, dense player cards and auto-wrapping 16:9 tiles like multiview. */
.player-grid{padding:8px;gap:2px;grid-auto-rows:max-content;align-content:center;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));overflow-y:auto}
.player-grid[data-count="1"]{grid-template-columns:minmax(0,min(100%,1100px))}
.player-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.player-grid[data-count="3"],.player-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.player-grid[data-count="5"],.player-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.player-card{align-self:center;width:100%;max-width:100%;background:#0b0b0d;border:1px solid #232328;border-radius:0;overflow:hidden}
body.light .player-card{background:#e8e8ef;border-color:#c9c9d3}
.player-head{height:24px;min-height:24px;background:#0b0b0d;padding:3px 8px;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;border-bottom:1px solid #1f1f23}
body.light .player-head{background:#e8e8ef;border-color:#c9c9d3}
.player-name{grid-column:2;font-size:11px;font-weight:600;text-align:center}
.player-time{font-size:10px}
.player-actions{grid-column:3;grid-row:1;justify-self:end}
.player-actions .icon-btn,.player-actions button{padding:0 2px;min-height:18px;font-size:12px}
.player-frame{aspect-ratio:16/9;background:#000;min-height:300px}
/* An embedded Twitch video must remain at least 400x300 per Twitch's rules.
   If space is too narrow, prefer a single column over violating the minimum. */
@media (max-width:1120px){
  .player-grid[data-count="3"],.player-grid[data-count="4"],.player-grid[data-count="5"],.player-grid[data-count="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){.player-grid[data-count="2"],.player-grid[data-count="3"],.player-grid[data-count="4"],.player-grid[data-count="5"],.player-grid[data-count="6"]{grid-template-columns:1fr}}
/* Extension's compact bottom-centered playback strip. */
.control-bar{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(600px,100%);padding:7px 12px 9px;background:transparent;border:0;border-radius:0;z-index:10;transition:background .2s,padding .2s,box-shadow .2s}
.control-bar:hover,.control-bar:focus-within{background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;box-shadow:0 -4px 16px #0008;padding:12px 20px}
.control-row{visibility:hidden;opacity:0;max-height:0;overflow:hidden;margin-top:0;transition:opacity .15s}
.control-bar:hover .control-row,.control-bar:focus-within .control-row{visibility:visible;opacity:1;max-height:90px;margin-top:7px;overflow:visible}
.timeline-row{height:12px;display:flex;align-items:center}
.control-bar:hover .timeline-row,.control-bar:focus-within .timeline-row{height:24px}
.timeline-row input{height:10px;margin:0;accent-color:#848494}
.control-row .btn{min-height:26px;padding:4px 8px;font-size:11px;border:0;background:var(--raised)}
.control-row .btn:hover{background:var(--accent);color:#fff}
.control-left{margin:0 auto;justify-content:center;gap:7px}
.control-right{position:absolute;right:12px;bottom:10px;gap:3px}
.control-right .tiny{display:none}
.control-right #clearAll{font-size:10px;padding:4px 6px}
.readout{font-size:11px}
/* No-VOD state: intentionally new to the website, but not a new dashboard style. */
.empty-state{background:var(--bg);padding:24px;gap:12px}
.empty-symbol{width:68px;height:68px;background:transparent;color:var(--accentText);border:0;border-radius:0;font-size:44px}
.empty-state h1{font-size:23px;letter-spacing:normal;font-weight:650}
.empty-copy{font-size:13px;max-width:415px;line-height:1.55}
.empty-state #firstVod{background:var(--accent);font-size:13px;padding:10px 16px;min-height:36px;border-radius:6px}
.empty-state .tiny{max-width:440px;line-height:1.5}
/* Add VOD, history, streamer results: use the extension's 560px centered modal. */
.modal-backdrop{background:transparent;padding:12px}
.modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:20px;border:1px solid #3f3f46;border-radius:12px;gap:11px;box-shadow:0 22px 75px #0009}
.modal-heading h2{font-size:19px;font-weight:700;letter-spacing:normal}
.modal-heading p{color:var(--muted);font-size:12px}
.add-modal{max-width:min(560px,calc(100vw - 32px));}
.search-line input{background:var(--input);border:1px solid var(--line);font-size:13px;border-radius:6px}
.channel-results{display:flex;flex-direction:column;gap:5px}
.channel-option{border:1px solid var(--line);background:var(--raised);border-radius:7px;padding:7px 10px;font-size:12px}
.selected-channel{padding:7px 10px;min-height:48px}
.vod-results{gap:12px;max-height:min(56vh,700px);padding:0 4px 0 0}
.vod-item{display:flex;flex-direction:column;gap:0;background:var(--raised);border:1px solid var(--line);border-radius:10px;flex:none}
.vod-thumb{width:100%;height:auto;min-height:0;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.vod-info{padding:12px 14px 14px;gap:9px;align-items:flex-start}
.vod-info strong{font-size:14px;line-height:1.4}
.vod-info .btn{padding:8px 12px}
.tab-toggle{padding:2px;background:var(--raised);gap:4px}
.tab-toggle button{font-size:11px;padding:7px 8px}
.recent-section{padding-bottom:8px}
/* The settings dialog is the extension's 560px charcoal panel, 98% opaque. */
.settings-modal{width:min(560px,calc(100vw - 32px));gap:15px;background:var(--settings-bg);border-radius:12px;padding:20px}
.settings-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.settings-heading h2{font-size:19px}
.theme-switch{justify-content:center;gap:13px}
.section-label{color:var(--accentText);padding:10px 0 5px;font-size:12px;border-bottom:1px solid var(--line)}
.setting-slider{gap:8px}
.setting-slider label{font-size:13px}
.setting-slider output{color:var(--accentText)}
.setting-slider input{height:6px}
.setting-expander,.color-setting{padding-top:12px;border-top:1px solid var(--line)}
.setting-check{font-size:13px;min-height:24px}
.color-setting{font-size:13px}
.setting-expander .icon-btn{background:var(--raised);border:1px solid var(--line);border-radius:5px;padding:2px 8px}
.settings-modal .btn{min-height:28px}
.reset-footer{padding-top:12px}
/* Keep the Twitch sign-in compact, but visually compatible with the extension. */
@media(max-width:720px){
  .topbar .brand{display:none}
  .topactions{gap:3px}
  .topactions .btn{font-size:10px;padding:3px 6px}
  .chat-column{position:absolute;right:0;top:0;bottom:0;width:min(340px,100%);z-index:11}
  .workspace:not(.show-mobile-chat) .chat-column{display:none}
  .workspace.show-mobile-chat .chat-restore{display:none}
  .player-grid{grid-template-columns:1fr!important;align-content:start}
  .settings-heading{grid-template-columns:1fr auto}
  .settings-heading .theme-switch{grid-column:1/-1;grid-row:2}
}

/* Extension-derived multi-video storyboard hover preview, 4-column maximum. */
.timeline-row{position:relative;overflow:visible}.timeline-preview{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:60;pointer-events:none;background:#141419;border:1px solid #43434d;border-radius:9px;box-shadow:0 12px 44px #000a;padding:8px;width:max-content;max-width:min(94vw,780px);color:#eeeef1}
.timeline-preview[hidden]{display:none!important}.preview-vods{display:grid;grid-template-columns:repeat(var(--preview-cols,1),minmax(145px,180px));gap:7px}.preview-tile{min-width:0;background:#222227;border-radius:5px;overflow:hidden}.preview-picture{aspect-ratio:16/9;background-color:#111115;background-repeat:no-repeat;display:grid;place-items:center;font-size:11px;text-align:center;color:#999;min-width:0}.preview-label{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:5px 7px;font-size:10px;white-space:nowrap;min-width:0}.preview-label strong{overflow:hidden;text-overflow:ellipsis}.preview-label span{color:#bebec7}.preview-off{opacity:.48}
@media(max-width:760px){.preview-vods{grid-template-columns:repeat(var(--preview-cols,1),minmax(94px,140px))}.timeline-preview{max-width:95vw}.preview-label{font-size:9px;flex-direction:column;align-items:start}}