/* ============ Material Design 3 — dark tokens ============ */
:root{
  /* ---- canonical MD3 system tokens (source of truth) ---- */
  --md-sys-color-primary:#3ea6ff;--md-sys-color-on-primary:#0a3d6b;--md-sys-color-primary-container:#203d53;--md-sys-color-on-primary-container:#c5dfff;
  --md-sys-color-secondary:#aaaaaa;--md-sys-color-on-secondary:#0f0f0f;--md-sys-color-secondary-container:#272727;--md-sys-color-on-secondary-container:#f1f1f1;
  --md-sys-color-tertiary:#aaaaaa;--md-sys-color-on-tertiary:#0f0f0f;--md-sys-color-tertiary-container:#272727;--md-sys-color-on-tertiary-container:#f1f1f1;
  --md-sys-color-error:#f2b8b5;--md-sys-color-on-error:#601410;--md-sys-color-error-container:#8c1d18;--md-sys-color-on-error-container:#f9dedc;
  --md-sys-color-surface:#0f0f0f;--md-sys-color-on-surface:#f1f1f1;--md-sys-color-on-surface-variant:#aaaaaa;
  --md-sys-color-surface-container-lowest:#0a0a0a;--md-sys-color-surface-container-low:#1a1a1a;--md-sys-color-surface-container:#212121;--md-sys-color-surface-container-high:#272727;--md-sys-color-surface-container-highest:#383838;
  --md-sys-color-outline:#717171;--md-sys-color-outline-variant:#303030;--md-sys-color-scrim:rgba(0,0,0,.6);
  --md-sys-color-inverse-surface:#f1f1f1;--md-sys-color-inverse-on-surface:#0f0f0f;--md-sys-color-inverse-primary:#065fd4;
  /* ---- canonical shape scale (incl. Expressive increased steps) ---- */
  --md-sys-shape-corner-none:0px;--md-sys-shape-corner-extra-small:4px;--md-sys-shape-corner-small:8px;--md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;--md-sys-shape-corner-large-increased:20px;--md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-extra-large-increased:32px;--md-sys-shape-corner-extra-extra-large:48px;--md-sys-shape-corner-full:999px;
  /* ---- canonical motion ---- */
  --md-sys-motion-easing-standard:cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-emphasized:cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(.05,.7,.1,1);
  --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(.3,0,.8,.15);
  --md-sys-motion-duration-short4:200ms;--md-sys-motion-duration-medium2:300ms;--md-sys-motion-duration-medium4:400ms;--md-sys-motion-duration-long2:500ms;
  /* ---- back-compat aliases: existing var(--primary) etc. keep working ---- */
  --primary:var(--md-sys-color-primary);--on-primary:var(--md-sys-color-on-primary);--primary-container:var(--md-sys-color-primary-container);--on-primary-container:var(--md-sys-color-on-primary-container);
  --secondary:var(--md-sys-color-secondary);--on-secondary:var(--md-sys-color-on-secondary);--secondary-container:var(--md-sys-color-secondary-container);--on-secondary-container:var(--md-sys-color-on-secondary-container);
  --tertiary:var(--md-sys-color-tertiary);--on-tertiary:var(--md-sys-color-on-tertiary);--tertiary-container:var(--md-sys-color-tertiary-container);--on-tertiary-container:var(--md-sys-color-on-tertiary-container);
  --error:var(--md-sys-color-error);--on-error:var(--md-sys-color-on-error);--error-container:var(--md-sys-color-error-container);--on-error-container:var(--md-sys-color-on-error-container);
  --surface:var(--md-sys-color-surface);--on-surface:var(--md-sys-color-on-surface);--on-surface-variant:var(--md-sys-color-on-surface-variant);
  --surface-c-lowest:var(--md-sys-color-surface-container-lowest);--surface-c-low:var(--md-sys-color-surface-container-low);--surface-c:var(--md-sys-color-surface-container);--surface-c-high:var(--md-sys-color-surface-container-high);--surface-c-highest:var(--md-sys-color-surface-container-highest);
  --outline:var(--md-sys-color-outline);--outline-variant:var(--md-sys-color-outline-variant);--scrim:var(--md-sys-color-scrim);
  --inverse-surface:var(--md-sys-color-inverse-surface);--inverse-on-surface:var(--md-sys-color-inverse-on-surface);
  --brand:#ff0000;
  --bar-h:64px;
  /* outlined text-field palette (Google sign-in style) + per-surface label notch bg */
  --field-bg:var(--surface);--field-border:#747775;--field-border-hover:#e3e3e3;--field-focus:#a8c7fa;--field-fg:#e3e3e3;--field-label:#9aa0a6;
  --yt-red:#ff0033;--yt-track:rgba(255,255,255,.2);--yt-buf:rgba(255,255,255,.4);--yt-hov:rgba(255,255,255,.5);--yt-menu-bg:rgba(28,28,28,.92);
  --sh-xs:var(--md-sys-shape-corner-extra-small);--sh-sm:var(--md-sys-shape-corner-small);--sh-md:var(--md-sys-shape-corner-medium);--sh-lg:var(--md-sys-shape-corner-large);--sh-xl:var(--md-sys-shape-corner-extra-large);--sh-xl-inc:var(--md-sys-shape-corner-extra-large-increased);--sh-full:var(--md-sys-shape-corner-full);
  --el1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --el2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --el3:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
  --ease:var(--md-sys-motion-easing-standard);--ease-emph:var(--md-sys-motion-easing-emphasized);--ease-emph-accel:var(--md-sys-motion-easing-emphasized-accelerate);--ease-out:var(--md-sys-motion-easing-emphasized-decelerate);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--surface);color:var(--on-surface);font-family:Roboto,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
.muted{color:var(--on-surface-variant)}
.hidden,[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--primary) 30%,transparent)}

/* type scale */
:root{
  --md-ref-typeface-brand:'Roboto Flex',Roboto,system-ui,sans-serif;
  --md-ref-typeface-plain:Roboto,system-ui,sans-serif;
  --md-sys-typescale-display-small:400 36px/44px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small:400 24px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-emphasized:500 24px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large:400 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-emphasized:500 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium:500 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large:400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium:400 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large:500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium:500 12px/16px var(--md-ref-typeface-plain);
}
.display-s{font:var(--md-sys-typescale-display-small);letter-spacing:0}
.headline-s{font:var(--md-sys-typescale-headline-small-emphasized);letter-spacing:0}
.title-l{font:var(--md-sys-typescale-title-large-emphasized)}
.title-m{font:var(--md-sys-typescale-title-medium);letter-spacing:.15px}
.body-l{font:var(--md-sys-typescale-body-large);letter-spacing:.5px}
.body-m{font:var(--md-sys-typescale-body-medium);letter-spacing:.25px}
.label-l{font:var(--md-sys-typescale-label-large);letter-spacing:.1px}
.label-m{font:var(--md-sys-typescale-label-medium);letter-spacing:.5px}

/* Material Symbols */
.mi{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;user-select:none;vertical-align:middle;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.mi.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* brand logo mark: rounded red square + white play triangle */
.logo-mark{width:36px;height:36px;border-radius:9px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark::after{content:'';width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}

/* ============ Top app bar ============ */
.app-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;height:var(--bar-h);padding:0 16px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--outline-variant)}
.app-bar .brand{border-radius:8px}
.app-bar .brand:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.app-bar .brand{display:inline-flex;align-items:center;gap:12px;font:500 20px/1 Roboto;color:var(--on-surface)}
.app-bar .brand .logo-mark{width:30px;height:30px;border-radius:7px}
.app-bar .brand .logo-mark::after{border-width:7px 0 7px 11px;margin-left:2px}
.brand svg{height:22px;width:auto;display:block}
.brand-sub{font:500 11px/1 Roboto;letter-spacing:.8px;text-transform:uppercase;color:var(--on-surface-variant);background:var(--surface-c-high);padding:4px 8px;border-radius:var(--sh-sm)}
.spacer{flex:1}

/* ============ Buttons ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border:0;border-radius:var(--sh-full);font:500 14px/1 Roboto;letter-spacing:.1px;cursor:pointer;overflow:hidden;white-space:nowrap;transition:box-shadow .2s var(--ease);color:var(--on-surface);background:transparent}
.btn .mi{font-size:18px}
.btn::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s}
.btn:hover::before{opacity:.08}.btn:active::before{opacity:.12}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn:disabled{opacity:.38;pointer-events:none}
.btn.filled{background:var(--primary);color:var(--on-primary)}
.btn.filled:hover{box-shadow:var(--el1)}
.btn.tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn.outlined{border:1px solid var(--outline);color:var(--primary)}
.btn.text{padding:0 12px;color:var(--primary)}
.btn.danger.filled{background:var(--error-container);color:var(--on-error-container)}
.btn.block{width:100%}

.icon-btn{position:relative;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--sh-full);background:transparent;color:var(--on-surface-variant);cursor:pointer;overflow:hidden;flex-shrink:0;text-decoration:none}
.icon-btn::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;border-radius:inherit}
.icon-btn:hover::before{opacity:.08}.icon-btn:active::before{opacity:.12}
.icon-btn:hover{color:var(--on-surface)}
.icon-btn.sel{color:var(--primary)}
.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(pointer:coarse){.icon-btn{min-width:48px;min-height:48px}}

/* fab-ish */
.fab{height:48px;padding:0 20px;border-radius:var(--sh-lg);box-shadow:none}
.fab:hover{box-shadow:var(--el2)}

/* ============ Cards / surfaces ============ */
.card{background:var(--surface-c-low);border-radius:var(--sh-md);overflow:hidden;box-shadow:var(--el1);--field-bg:var(--surface-c-low)}
.card.outlined{border:1px solid var(--outline);background:var(--surface)}
.surface-pad{padding:20px}

/* ============ Text fields (outlined, app-wide — same as the login form) ============ */
.tf,.otf{position:relative;display:block}
.tf input,.tf textarea,.otf input{width:100%;height:56px;background:transparent;color:var(--field-fg);border:1px solid var(--field-border);border-radius:4px;padding:0 15px;font:400 16px var(--md-ref-typeface-plain);outline:none;transition:border-color .1s;color-scheme:dark}
.tf textarea{height:auto;min-height:120px;padding:17px 15px;line-height:1.5;resize:vertical}
.tf input::placeholder,.tf textarea::placeholder,.otf input::placeholder{color:transparent}
.tf input:hover,.tf textarea:hover,.otf input:hover{border-color:var(--field-border-hover)}
.tf input:focus,.tf textarea:focus,.otf input:focus{border:2px solid var(--field-focus);padding:0 14px}
.tf textarea:focus{padding:16px 14px}
.tf>span,.otf>span{position:absolute;left:9px;top:18px;padding:0 6px;background:var(--field-bg);color:var(--field-label);font:400 16px/1 var(--md-ref-typeface-plain);pointer-events:none;transition:top .18s var(--ease),font-size .18s var(--ease),color .18s var(--ease),letter-spacing .18s var(--ease)}
.tf input:focus+span,.tf input:not(:placeholder-shown)+span,.tf textarea:focus+span,.tf textarea:not(:placeholder-shown)+span,.otf input:focus+span,.otf input:not(:placeholder-shown)+span{top:-8px;font-size:12px;letter-spacing:.4px}
.tf input:focus+span,.tf textarea:focus+span,.otf input:focus+span{color:var(--field-focus)}
.tf input:-webkit-autofill,.tf input:-webkit-autofill:focus,.otf input:-webkit-autofill,.otf input:-webkit-autofill:focus{-webkit-text-fill-color:var(--field-fg);-webkit-box-shadow:0 0 0 1000px var(--field-bg) inset;caret-color:var(--field-fg)}

/* select + number (outlined, matches text fields) */
.sel-field{width:100%;height:48px;background:transparent;color:var(--field-fg);border:1px solid var(--field-border);border-radius:4px;padding:0 12px;font:400 15px/1.2 var(--md-ref-typeface-plain);outline:none;cursor:pointer;color-scheme:dark;transition:border-color .1s}
.sel-field:hover{border-color:var(--field-border-hover)}
.sel-field:focus{border:2px solid var(--field-focus);padding:0 11px}
/* the closed control follows color-scheme, but the popup listbox is drawn by the OS and
   ignores it — style <option> explicitly so the open dropdown stays dark on every platform */
.sel-field option{background-color:#1f1f1f;color:#e3e3e3;padding:8px}
.sel-field option:checked,.sel-field option:hover{background-color:var(--primary);color:var(--on-primary)}
.num-field{width:90px;height:48px;background:transparent;color:var(--field-fg);border:1px solid var(--field-border);border-radius:4px;padding:0 12px;font:400 15px var(--md-ref-typeface-plain);outline:none;color-scheme:dark;transition:border-color .1s}
.num-field:hover{border-color:var(--field-border-hover)}
.num-field:focus{border:2px solid var(--field-focus);padding:0 11px}

/* ============ Switch (MD3) ============ */
.switch{position:relative;display:inline-block;width:52px;height:32px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch .track{position:absolute;inset:0;background:var(--surface-c-highest);border:2px solid var(--outline);border-radius:var(--sh-full);transition:.2s var(--ease)}
.switch .knob{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:var(--sh-full);background:var(--outline);transition:.2s var(--ease)}
.switch input:checked~.track{background:var(--primary);border-color:var(--primary)}
.switch input:checked~.knob{left:24px;width:24px;height:24px;background:var(--on-primary)}
.switch input:focus-visible~.track{outline:2px solid var(--primary);outline-offset:2px}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.opt-row .label-l{color:var(--on-surface)}

/* ============ Dialog (native <dialog>) ============ */
dialog.dlg{position:fixed;inset:0;margin:auto;width:min(560px,92vw);max-height:88vh;border:0;border-radius:var(--sh-lg);background:var(--surface-c-high);color:var(--on-surface);padding:24px;box-shadow:var(--el3);--field-bg:var(--surface-c-high)}
dialog.dlg::backdrop{background:var(--scrim)}
dialog.dlg[open]::backdrop{animation:scrim-in var(--md-sys-motion-duration-medium4) var(--ease-out)}
@keyframes scrim-in{from{opacity:0}}
dialog.dlg[open]{display:flex;flex-direction:column;animation:dlg-in var(--md-sys-motion-duration-medium4) var(--ease-out)}
@keyframes dlg-in{from{opacity:0;transform:scale(.96)}}
.dlg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dlg-title{font:400 22px/28px Roboto}
.dlg-head{flex-shrink:0}
.dlg-body{display:flex;flex-direction:column;gap:16px;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--outline-variant) transparent}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;flex-shrink:0}

/* ============ Menu ============ */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 4px);min-width:200px;max-height:min(60vh,360px);overflow:auto;background:var(--surface-c-high);border-radius:var(--sh-xs);box-shadow:var(--el2);padding:8px 0;z-index:30;transform-origin:top right;animation:menu-in .12s var(--ease-out)}
.menu.up{top:auto;bottom:calc(100% + 4px);transform-origin:bottom right}
@keyframes menu-in{from{opacity:0;transform:scale(.92)}}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:0 16px;height:48px;background:none;border:0;color:var(--on-surface);font:400 14px Roboto;text-align:left;cursor:pointer;text-decoration:none}
.menu-item .mi{font-size:20px;color:var(--on-surface-variant)}
.menu-item:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.menu-item:focus-visible{outline:none;background:color-mix(in srgb,var(--on-surface) 12%,transparent)}
.menu-item.danger{color:var(--error)}.menu-item.danger .mi{color:var(--error)}
.menu-sep{height:1px;background:var(--outline-variant);margin:8px 0}

/* ============ List ============ */
.list{display:flex;flex-direction:column;gap:2px}
.list-item{display:flex;align-items:center;gap:16px;padding:12px;border-radius:var(--sh-md);transition:background .12s var(--ease)}
.list-item:hover{background:var(--surface-c-low)}
.li-thumb{position:relative;width:168px;aspect-ratio:16/9;border-radius:var(--sh-md);overflow:hidden;background:#000;flex-shrink:0}
.li-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.li-thumb.ph{display:grid;place-items:center;background:var(--surface-c-highest)}
.li-thumb.ph .mi{font-size:32px;color:var(--outline)}
.li-thumb::after{content:'play_arrow';font-family:'Material Symbols Rounded';font-feature-settings:'liga';font-size:38px;color:#fff;position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);opacity:0;transition:opacity .15s var(--ease);pointer-events:none}
.list-item:hover .li-thumb:not(.ph)::after{opacity:1}
.li-thumb .dur{position:absolute;right:6px;bottom:6px;z-index:1;background:rgba(0,0,0,.8);color:#fff;font:500 11px Roboto;padding:1px 5px;border-radius:var(--sh-xs)}
.li-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.li-title{font:500 16px/22px Roboto;color:var(--on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-sub{font:400 13px/18px Roboto;color:var(--on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--sh-sm);font:500 11px/1 Roboto;letter-spacing:.3px}
.badge.ok{background:#234c33;color:#a6f4c5}
.badge.work{background:#4a3a1e;color:#ffe08a}
.badge.err{background:var(--error-container);color:var(--on-error-container)}
.badge.muted{background:var(--surface-c-highest);color:var(--on-surface-variant)}

/* ============ Progress ============ */
.linear{height:4px;border-radius:var(--sh-full);background:var(--secondary-container);overflow:hidden}
.linear>span{display:block;height:100%;width:0;background:var(--primary);border-radius:inherit;transition:width .15s}
.linear.indet>span{width:40%;animation:indet 1.2s infinite var(--ease)}
@keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* ============ Snackbar ============ */
#snackbar{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);display:flex;align-items:center;min-height:48px;background:var(--inverse-surface);color:var(--inverse-on-surface);padding:14px 16px;border-radius:var(--sh-xs);box-shadow:var(--el3);font:var(--md-sys-typescale-body-medium);opacity:0;pointer-events:none;transition:.2s var(--ease);z-index:200;max-width:90vw}
#snackbar.show{opacity:1;transform:translate(-50%,0)}

/* ============ Copy rows (share / embed) ============ */
.cr{display:flex;flex-direction:column;gap:6px}
.cr>span{font:500 11px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--on-surface-variant)}
.cr-row{display:flex;gap:8px;align-items:stretch}
.cr-row input{flex:1;min-width:0;background:var(--surface-c-lowest);border:1px solid var(--outline-variant);color:var(--on-surface);border-radius:var(--sh-sm);padding:11px 14px;font:13px ui-monospace,Consolas,monospace;outline:none}
.cr-row input:focus{border-color:var(--primary)}
.copy-btn{flex-shrink:0;padding:0 20px;border-radius:var(--sh-full);font-weight:600}

/* ============ Placeholder page ============ */
.placeholder{min-height:calc(100dvh - var(--bar-h));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.placeholder .logo-mark{width:72px;height:72px;border-radius:18px}
.placeholder .logo-mark::after{border-width:16px 0 16px 26px;margin-left:5px}
.hero-logo{display:inline-flex}
.hero-logo svg{height:48px;width:auto;display:block}

/* ============ Watch / player page (YouTube layout) ============ */
.watch{max-width:1096px;margin:0 auto;padding:24px 24px 80px}
.player-shell{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:12px}
.watch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:14px 0 14px}
.watch-title{font:700 20px/28px Roboto;letter-spacing:0;color:var(--on-surface);margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.wa-action{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border:0;border-radius:var(--sh-full);background:var(--surface-c-high);color:var(--on-surface);font:500 14px/1 Roboto;cursor:pointer;white-space:nowrap;flex-shrink:0}
.wa-action .mi{font-size:21px}
.wa-action:hover{background:var(--surface-c-highest)}
.desc-box{background:var(--surface-c-high);border-radius:12px;padding:12px;white-space:pre-wrap;word-break:break-word;color:var(--on-surface);font:400 14px/20px Roboto}
.desc-box .meta{font-weight:500;margin-bottom:4px}
.desc-box .meta:last-child{margin-bottom:0}

/* ============ Embed ============ */
html.embed,body.embed{width:100%;height:100%;margin:0;background:#000;overflow:hidden}
.embed-root{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000}
.embed-root .player{width:100%;height:100%}

/* ============ Login ============ */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:#202124}
.login-card{width:100%;max-width:900px;background:#111113;border-radius:28px;padding:48px 56px;display:flex;gap:56px;align-items:flex-start;--field-bg:#111113}
.login-left{flex:1;min-width:180px}
.login-right{flex:1;min-width:0;max-width:400px}
.login-logo{margin-bottom:28px}
.login-logo svg{height:36px;width:auto;display:block}
.login-title{font:400 44px/52px var(--md-ref-typeface-brand);color:#e3e3e3;margin:0 0 8px}
.login-sub{font:400 14px/20px var(--md-ref-typeface-plain);color:#e3e3e3}
.otf{margin-top:24px}
.login-right .otf:first-child{margin-top:0}
.login .err-text{margin-top:8px}
.login-actions{display:flex;justify-content:flex-end;margin-top:24px}
.btn.gbtn{background:#a8c7fa;color:#062e6f}
.btn.gbtn::before{display:none}
.btn.gbtn:hover{background:color-mix(in srgb,#a8c7fa 88%,#fff);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.err-text{color:var(--error);font:400 13px/18px Roboto;min-height:18px}
@media(max-width:640px){.login-card{flex-direction:column;gap:28px;padding:32px 24px}.login-right{max-width:100%;width:100%}}
@media(max-width:400px){.login-card{padding:24px 16px}}

/* ============ Admin dashboard ============ */
.admin{max-width:1100px;margin:0 auto;padding:24px 24px 64px}
/* overview stat cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.stat{display:flex;align-items:center;gap:16px;background:var(--surface-c-low);border-radius:var(--sh-lg);padding:18px 22px}
.stat-ic{font-size:26px;width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--sh-full);background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.stat-body{display:flex;flex-direction:column;min-width:0}
.stat-k{font:500 26px/1.2 Roboto;color:var(--on-surface);font-variant-numeric:tabular-nums}
.stat-l{font:400 13px/1.4 Roboto;color:var(--on-surface-variant)}
/* section header with count */
.section-head{display:flex;align-items:center;gap:10px;margin:28px 0 12px}
.section-head .section-title{margin:0}
.count-chip{font:500 13px/1 Roboto;color:var(--on-surface-variant);background:var(--surface-c-high);padding:5px 10px;border-radius:var(--sh-full)}
@media(max-width:720px){.stats{grid-template-columns:1fr;gap:12px}.stat{padding:14px 18px}}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;border:2px dashed var(--outline);border-radius:var(--sh-md);color:var(--on-surface-variant);cursor:pointer;text-align:center;padding:24px;transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent);color:var(--on-surface)}
.dropzone.over{transform:scale(1.005)}
.dropzone .mi{font-size:40px;color:var(--primary);transition:transform .15s var(--ease)}
.dropzone.over .mi{transform:translateY(-2px) scale(1.08)}
.uprow{display:flex;gap:12px;align-items:flex-end;margin-top:16px;flex-wrap:wrap}
.uprow .tf{flex:1;min-width:200px}
.uprow .btn{height:56px;padding:0 28px}
.uprow .btn .mi{font-size:20px}
.section-title{margin:28px 0 12px}
.banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--sh-md);background:var(--error-container);color:var(--on-error-container);margin-bottom:16px}

/* ============ YouTube-style custom player (built by player.js) ============ */
.player{position:relative;width:100%;height:100%;background:#000;overflow:hidden;font-family:Roboto,sans-serif;outline:none;--played:0%;--buf:0%;--hov:0%;--vol:100%}
.player video{width:100%;height:100%;object-fit:contain;background:#000;display:block;cursor:pointer}
.player:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.player.playing.idle,.player.playing.idle video{cursor:none}
/* large play button (YouTube 68x48) */
.big-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;padding:0;border:0;background:none;cursor:pointer;z-index:4}
.big-play svg{width:68px;height:48px;display:block}
.big-play .ytbg{fill:#212121;fill-opacity:.8;transition:fill .4s var(--ease-out),fill-opacity .4s var(--ease-out)}
.big-play:hover .ytbg,.big-play:focus-visible .ytbg{fill:#f00;fill-opacity:1}
.big-play:focus-visible{outline:none}
/* replay overlay */
.replay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:var(--sh-full);background:rgba(0,0,0,.6);border:0;display:grid;place-items:center;cursor:pointer;z-index:4}
.replay svg{width:34px;height:34px;fill:#fff}
.replay:hover{background:rgba(0,0,0,.75)}
.replay:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* click bezel */
.bezel{position:absolute;top:50%;left:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:var(--sh-full);background:rgba(0,0,0,.5);display:grid;place-items:center;pointer-events:none;z-index:5;animation:bezel .5s var(--ease-out) forwards}
.bezel svg{width:48px;height:48px;fill:#fff}
@keyframes bezel{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.3)}}
/* buffering spinner */
.spin{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:var(--sh-full);animation:spin .8s linear infinite;z-index:4}
@keyframes spin{to{transform:rotate(360deg)}}
/* controls + bottom gradient */
.ctrls{position:absolute;inset-inline:0;bottom:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:0;opacity:0;transition:opacity .2s var(--ease)}
.ctrls::before{content:'';position:absolute;left:0;right:0;bottom:0;height:196px;pointer-events:none;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.7) 0,rgba(0,0,0,.55) 16px,rgba(0,0,0,.35) 50px,rgba(0,0,0,.12) 100px,transparent 196px)}
.player.show .ctrls,.player:not(.playing) .ctrls{opacity:1}
/* progress bar */
.scrub{position:relative;height:16px;display:flex;align-items:center;padding:0 12px;cursor:pointer;touch-action:none}
.scrub:focus-visible{outline:none}
.scrub .track{position:relative;width:100%;height:3px;background:var(--yt-track);border-radius:2px;transition:height .1s var(--ease)}
.scrub:hover .track,.scrub:focus-visible .track{height:5px;border-radius:0}
.scrub:focus-visible .track{box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.scrub .buf{position:absolute;inset-block:0;left:0;width:var(--buf);background:var(--yt-buf)}
.scrub .hov{position:absolute;inset-block:0;left:0;width:var(--hov);background:var(--yt-hov)}
.scrub .played{position:absolute;inset-block:0;left:0;width:var(--played);background:linear-gradient(90deg,#ff0033 80%,#ff2791)}
.scrub .knob{position:absolute;top:50%;left:var(--played);width:13px;height:13px;margin-left:-6.5px;border-radius:var(--sh-full);background:var(--yt-red);transform:translateY(-50%) scale(0);transition:transform .1s var(--ease)}
.scrub:hover .knob,.scrub:focus-visible .knob{transform:translateY(-50%) scale(1)}
.scrub .tip{position:absolute;left:0;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#fff;font:500 12px Roboto;padding:4px 6px;border-radius:2px;pointer-events:none;opacity:0;white-space:nowrap}
.scrub:hover .tip{opacity:1}
/* control row */
.crow{display:flex;align-items:center;height:48px;color:#fff;padding:0 8px}
.cbtn{width:48px;height:48px;display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer;padding:0;opacity:.92;transition:opacity .1s var(--ease),transform .15s var(--ease)}
.cbtn:hover{opacity:1}
.cbtn:focus-visible{outline:2px solid #fff;outline-offset:-8px;opacity:1}
.cbtn.open{opacity:1;transform:rotate(30deg)}
.cbtn svg{width:100%;height:100%;fill:#fff}
.cbtn .mi{color:#fff;font-size:22px;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.ptime{font:500 14px/1 Roboto;padding:0 8px;white-space:nowrap;color:#eee;font-variant-numeric:tabular-nums;text-shadow:0 0 2px rgba(0,0,0,.5)}
.cspace{flex:1}
/* volume */
.vol{display:flex;align-items:center}
.volr{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:3px;border-radius:2px;background:linear-gradient(#fff,#fff) 0/var(--vol) 100% no-repeat,rgba(255,255,255,.3);cursor:pointer;vertical-align:middle;transition:width .2s var(--ease),opacity .2s var(--ease),margin .2s var(--ease)}
.vol:hover .volr,.volr:focus-visible{width:52px;opacity:1;margin:0 6px}
.volr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0;cursor:pointer}
.volr::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.volr::-moz-range-track{height:3px;background:transparent}
/* settings menu */
.smenu{position:absolute;right:12px;bottom:55px;background:var(--yt-menu-bg);border-radius:12px;padding:8px 0;min-width:210px;box-shadow:0 0 5px rgba(0,0,0,.5);z-index:6;color:#fff}
.sitem{display:flex;align-items:center;gap:10px;width:100%;height:40px;background:none;border:0;color:#fff;text-align:left;padding:0 16px 0 8px;cursor:pointer;font:400 13px Roboto}
.sitem:hover{background:rgba(255,255,255,.1)}
.sitem:focus-visible{outline:none;background:rgba(255,255,255,.15)}
.sitem.on{font-weight:500}
.sitem .chk{width:24px;height:24px;display:grid;place-items:center;flex-shrink:0}
.sitem .chk svg{width:18px;height:18px;fill:#fff}

@media(max-width:600px){
  :root{--bar-h:56px}
  .watch,.admin{padding:16px 16px 48px}
  dialog.dlg{padding:16px;border-radius:var(--sh-lg);max-height:92vh}
  .dlg-actions{flex-direction:column-reverse}
  .dlg-actions .btn{width:100%}
  .list-item{gap:12px;padding:8px 4px}
  .li-thumb{width:120px}
}
@media(max-width:420px){.li-thumb{width:96px}.brand-sub{display:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .spin{animation:spin 1.2s linear infinite!important}
  .linear.indet>span{animation:indet 2s infinite linear!important}
}