:root{
  --bg:#f4f4f4;
  --surface:#ffffff;
  --surface-2:#f7f7f7;
  --surface-3:#eceff3;
  --panel:#ffffff;
  --panel2:#f3f5f8;
  --line:rgba(17,24,39,.12);
  --line-strong:rgba(17,24,39,.20);
  --text:#121722;
  --muted:#687385;
  --soft:#8f99a8;
  --accent:#1688ff;
  --accent-2:#7658ff;
  --green:#149a69;
  --danger:#d64d67;
  --topbar:rgba(255,255,255,.96);
  --sidebar:#fff;
  --shadow:0 12px 34px rgba(24,34,51,.08);
  --shadow-soft:0 6px 20px rgba(24,34,51,.055);
  --radius:16px;
  --max:1600px;
}
html[data-theme="dark"]{
  --bg:#1f1f1f;
  --surface:#242424;
  --surface-2:#202020;
  --surface-3:#2b2b2b;
  --panel:#242424;
  --panel2:#2a2a2a;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.18);
  --text:#f4f4f4;
  --muted:#a9adb5;
  --soft:#7f858f;
  --accent:#2b97ff;
  --accent-2:#9277ff;
  --green:#55d5a2;
  --danger:#ff7d92;
  --topbar:rgba(8,8,8,.97);
  --sidebar:#070707;
  --shadow:0 18px 45px rgba(0,0,0,.28);
  --shadow-soft:0 8px 24px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;transition:background .2s ease,color .2s ease}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
img{max-width:100%}
::selection{background:rgba(22,136,255,.22)}

/* Header */
.topbar{height:72px;display:flex;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:80;background:var(--topbar);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.01);overflow:visible}
.brand-logo{position:relative;display:flex;align-items:center;width:184px;max-width:34vw;height:40px;flex:0 0 auto;overflow:hidden}
.brand-logo .brand-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center}
.brand-logo .brand-image-dark{display:none!important}
.brand-logo .brand-image-light{display:block!important}
html[data-theme="dark"] .brand-logo .brand-image-dark{display:block!important}
html[data-theme="dark"] .brand-logo .brand-image-light{display:none!important}
.brand-logo.mark-only{width:40px;height:40px;max-width:none}
.brand-logo.mark-only img{width:100%;height:100%;object-fit:contain;object-position:center}
.global-search{flex:1;max-width:720px;margin:0 auto;display:flex;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.global-search:focus-within{border-color:rgba(22,136,255,.6);box-shadow:0 0 0 3px rgba(22,136,255,.10)}
.global-search input{width:100%;height:40px;padding:0 14px;background:transparent;color:var(--text);border:0;outline:0;font-size:13px}
.global-search input::placeholder{color:var(--soft)}
.global-search button{width:52px;border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;font-size:18px}
.top-actions{display:flex;align-items:center;gap:9px;position:relative;z-index:100}
.icon-btn,.theme-cycle{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--text);cursor:pointer;transition:.18s ease}
.icon-btn:hover,.theme-cycle:hover{background:var(--surface-3);transform:translateY(-1px)}
.profile-chip{display:flex;align-items:center;gap:8px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3) center/cover;border:1px solid var(--line);font-weight:900;font-size:13px}
.profile-name{font-size:12px;color:var(--text);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-menu{position:relative;z-index:101}
.profile-trigger{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:3px 9px 3px 3px;color:inherit;cursor:pointer;transition:.18s ease}
.profile-trigger:hover{background:var(--surface-3)}
.caret{font-size:10px;opacity:.68}
.account-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:255px;padding:9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);display:none;z-index:1000}
.account-menu.open .account-dropdown{display:block;animation:dropIn .14s ease-out}
@keyframes dropIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.account-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.account-head strong{display:block;font-size:14px}.account-head small{display:block;font-size:12px;color:var(--muted);margin-top:2px;word-break:break-word}
.account-dropdown a{display:block;padding:9px 10px;border-radius:9px;font-size:13px}
.account-dropdown a:hover{background:var(--surface-3)}
.menu-label{padding:9px 10px 6px;font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:900;text-transform:uppercase}
.theme-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 10px 10px}
.theme-btn{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:9px;padding:9px 10px;font-size:12px;font-weight:800;cursor:pointer}
.theme-btn:hover{background:var(--surface-3)}
.theme-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}

/* Buttons */
.btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);padding:9px 14px;border-radius:9px;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s ease;min-height:39px}
.btn:hover{background:var(--surface-3);transform:translateY(-1px)}
.btn.primary{background:#111722;color:#fff;border-color:#111722}
html[data-theme="dark"] .btn.primary{background:#fff;color:#111;border-color:#fff}
.btn.primary:hover{filter:brightness(.94)}
.btn.accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.btn.danger{background:rgba(214,77,103,.08);border-color:rgba(214,77,103,.25);color:var(--danger)}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

/* App shell / YouTube-inspired information architecture */
.app-layout{display:grid;grid-template-columns:226px minmax(0,1fr);min-height:calc(100vh - 72px)}
.sidebar{position:sticky;top:72px;height:calc(100vh - 72px);border-right:1px solid var(--line);background:var(--sidebar);padding:14px 12px;display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin}
.sidebar nav{display:grid;gap:2px}
.sidebar nav a{padding:9px 11px;border-radius:8px;color:var(--muted);font-size:13px;display:flex;gap:12px;align-items:center;position:relative}
.sidebar nav a:hover{background:var(--surface-3);color:var(--text)}
.sidebar nav a.active{background:var(--surface-3);color:var(--text);font-weight:800}
.sidebar nav a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--accent),var(--accent-2))}
.sidebar nav a span{width:20px;text-align:center;font-size:15px}
.nav-section{font-size:10px;letter-spacing:.12em;color:var(--soft);font-weight:900;padding:17px 11px 6px;border-top:1px solid var(--line);margin-top:8px}
.nav-section:first-of-type{border-top:0;margin-top:0}
.sidebar-foot{margin-top:auto;padding:14px 11px;font-size:10px;color:var(--soft);line-height:1.65;border-top:1px solid var(--line)}
.app-main{min-width:0;padding:0 28px 70px}
.topic-strip{height:56px;margin:0 -28px 24px;padding:0 28px;display:flex;align-items:center;gap:0;overflow:auto;white-space:nowrap;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%, transparent);backdrop-filter:blur(14px);position:sticky;top:72px;z-index:50;scrollbar-width:none}
.topic-strip::-webkit-scrollbar{display:none}
.topic-strip a{position:relative;padding:8px 13px;font-size:12px;color:var(--muted);font-weight:600}
.topic-strip a+a::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:linear-gradient(var(--accent),var(--accent-2));opacity:.75}
.topic-strip a:hover,.topic-strip a.active{color:var(--text)}
.topic-strip a.active{font-weight:900}
.topic-strip a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* Feature / landing */
.hero{min-height:420px;border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(90deg,rgba(5,8,13,.94),rgba(5,8,13,.63) 47%,rgba(5,8,13,.08)),linear-gradient(0deg,rgba(5,8,13,.72),transparent 55%),url('../images/talen.jpg') 76% 30%/cover no-repeat;color:#fff;box-shadow:var(--shadow-soft)}
.hero.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);align-items:center;gap:28px;padding:40px 40px 36px;background:var(--surface);color:var(--text);border-color:var(--line);position:relative;isolation:isolate}
.hero.hero-split::before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-210px;top:-240px;background:linear-gradient(135deg,rgba(22,136,255,.18),rgba(118,88,255,.12));z-index:-1}
.hero.hero-split::after{content:"ON QUED";position:absolute;left:38px;bottom:12px;font-size:84px;line-height:1;font-weight:900;letter-spacing:.08em;color:var(--text);opacity:.025;z-index:-1;pointer-events:none}
.hero-copy{max-width:650px;position:relative;z-index:2}
.kicker{font-size:10px;letter-spacing:.18em;font-weight:950;color:var(--accent);text-transform:uppercase}
.hero h1{font-size:clamp(48px,6vw,88px);line-height:.88;letter-spacing:-.055em;margin:10px 0 15px;font-weight:500}
.hero.hero-split h1{font-weight:350;letter-spacing:-.052em}
.hero p{font-size:15px;line-height:1.64;max-width:610px;margin:0;color:#e6e9ef}
.hero.hero-split p{color:var(--muted)}
.hero-media{height:330px;display:grid;grid-template-columns:1fr 1fr;gap:10px;transform:skewX(-6deg);transform-origin:center;position:relative}
.hero-media::before{content:"";position:absolute;inset:12% 8%;background:linear-gradient(135deg,rgba(22,136,255,.18),rgba(118,88,255,.18));filter:blur(42px);z-index:-1}
.mosaic-tile{min-width:0;overflow:hidden;border-radius:8px;background:var(--surface-3);box-shadow:var(--shadow-soft);position:relative}
.mosaic-tile:nth-child(1){transform:translateY(-8px)}
.mosaic-tile:nth-child(2){transform:translateY(14px)}
.mosaic-tile:nth-child(3){transform:translateY(-2px)}
.mosaic-tile:nth-child(4){transform:translateY(20px)}
.mosaic-tile img{width:100%;height:100%;display:block;object-fit:cover;transform:skewX(6deg) scale(1.09)}
.mosaic-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.16),transparent 48%);pointer-events:none}

.landing-main{max-width:var(--max);margin:0 auto;padding:24px 28px 70px;position:relative;overflow:hidden}
.landing-main::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;left:-330px;top:260px;background:linear-gradient(145deg,rgba(22,136,255,.11),rgba(118,88,255,.08));z-index:-1}
.landing-hero{min-height:620px;margin-top:6px}
.landing-hero .hero-media{height:410px}
.landing-hero .hero-copy{max-width:680px}
.landing-hero .hero-copy p{font-size:16px}
.landing-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--muted)}
.landing-eyebrow::before{content:"";width:32px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

.next-card{display:grid;grid-template-columns:250px minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:22px;padding:13px;border-radius:15px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft)}
.next-card img{width:100%;height:138px;object-fit:cover;border-radius:10px}
.next-card h3{font-size:20px;margin:5px 0 4px;letter-spacing:-.02em}
.next-card p{font-size:13px;line-height:1.55}
.countdown{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;padding:13px 15px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:13px}
.countdown small{display:block;color:var(--accent);font-size:8px;letter-spacing:.15em;margin-bottom:4px}

/* Content rails and cards */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:30px 0 13px}
.section-head h1,.section-head h2{margin:0;letter-spacing:-.025em;font-weight:650}
.section-head h1{font-size:30px}.section-head h2{font-size:22px}
.section-head p{margin:3px 0 0;font-size:12px}
.muted,.meta{color:var(--muted)}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.video-card{min-width:0;border-radius:14px;padding:0 0 9px;transition:background .18s ease,transform .18s ease;overflow:hidden}
.video-card:hover{background:var(--surface);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.video-thumb{aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:var(--surface-3);position:relative}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}
.video-card:hover .video-thumb img{transform:scale(1.035)}
.duration{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.78);color:#fff;padding:3px 6px;border-radius:4px;font-size:10px;font-weight:700}
.premium-badge{position:absolute;left:7px;top:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:8px;font-weight:950;letter-spacing:.08em;padding:4px 6px;border-radius:4px}
.watch-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.watch-progress b{display:block;height:100%;background:var(--accent)}
.video-info{padding:0 4px}
.video-info h3{font-size:13px;line-height:1.35;margin:8px 0 3px;font-weight:700}
.video-info .meta{font-size:11px}
.empty-state{grid-column:1/-1;border:1px dashed var(--line-strong);border-radius:15px;padding:42px 24px;text-align:center;background:var(--surface)}
.empty-mark{font-size:34px;color:var(--accent)}.empty-state h3{margin:8px 0 4px}.empty-state p{margin:0;color:var(--muted);font-size:13px}
.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.content-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-soft);transition:.18s ease}
.content-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.content-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.content-card .body{padding:15px}.content-card h3{margin:5px 0 7px}.content-card p{color:var(--muted);line-height:1.55;font-size:12px}
.pill{display:inline-block;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 8px;font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.04em}

/* Auth */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;background:radial-gradient(circle at 17% 10%,rgba(22,136,255,.10),transparent 30%),radial-gradient(circle at 82% 17%,rgba(118,88,255,.08),transparent 32%),var(--bg)}
.auth-theme-toggle{position:fixed;top:18px;right:18px;z-index:30}
.auth-shell,.auth{width:min(940px,100%);display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.auth{grid-template-columns:1fr}
.auth-art{min-height:545px;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(5,7,11,.91),rgba(5,7,11,.10)),url('../images/shardling.jpg') center/cover;color:#fff}
.auth-art .muted{color:#d4d8df}.auth-art .kicker{color:#8bcaff}
.auth-box{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;background:var(--surface)}
.auth-box .brand-logo{width:210px;max-width:100%;height:46px;margin-bottom:18px}
.auth-box h1{margin:4px 0 4px;letter-spacing:-.035em}
.field{margin-top:13px}.field label{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:9px;padding:10px 12px;outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(22,136,255,.65);box-shadow:0 0 0 3px rgba(22,136,255,.09)}
.field input,.field select{height:43px}.field textarea{min-height:120px;resize:vertical}.field input:disabled{background:var(--surface-2);color:var(--soft)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.full{grid-column:1/-1}
.error,.success,.notice{padding:11px 13px;border-radius:9px;margin:12px 0;font-size:12px}.error{background:rgba(214,77,103,.08);border:1px solid rgba(214,77,103,.24);color:var(--danger)}.success{background:rgba(20,154,105,.08);border:1px solid rgba(20,154,105,.24);color:var(--green)}.notice{background:rgba(22,136,255,.08);border:1px solid rgba(22,136,255,.20);color:var(--accent)}

/* Watch */
.watch-page{max-width:1500px;margin:auto;padding:24px}
.watch-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px}
.player-shell{aspect-ratio:16/9;background:#000;border-radius:14px;border:1px solid var(--line);overflow:hidden;position:relative;box-shadow:var(--shadow-soft)}
.player-shell iframe,.player-shell video{width:100%;height:100%;border:0;background:#000}.player-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.12)),var(--poster) center/cover}.player-placeholder .big-play{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#080a0d;font-size:25px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.watch-title h1{margin:13px 0 7px;letter-spacing:-.03em}.watch-actions{display:flex;gap:8px;flex-wrap:wrap}.side-panel{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:15px;margin-bottom:14px;box-shadow:var(--shadow-soft)}
.mini-row{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.mini-row:first-of-type{border-top:0}.mini-row img{width:70px;height:70px;object-fit:cover;border-radius:9px}

/* Admin / forms */
.admin-wrap{width:min(1320px,calc(100% - 32px));margin:28px auto 70px}.admin-nav{display:flex;gap:8px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.stat{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:19px;box-shadow:var(--shadow-soft)}.stat b{display:block;font-size:29px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.table{width:100%;border-collapse:collapse;background:var(--surface);min-width:760px}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:top}.table th{color:var(--muted);background:var(--surface-2)}.admin-card{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:21px;margin:18px 0;box-shadow:var(--shadow-soft)}

/* Settings */
.settings-card{max-width:850px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:23px;box-shadow:var(--shadow-soft)}
.settings-title-row h2{margin:6px 0}.settings-title-row p{margin:0 0 8px}.appearance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:21px 0}.theme-option{display:block;cursor:pointer;border:2px solid var(--line);border-radius:14px;padding:12px;background:var(--surface-2);transition:.18s ease}.theme-option:hover{transform:translateY(-2px)}.theme-option.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,136,255,.10)}.theme-option input{position:absolute;opacity:0;pointer-events:none}.theme-preview{display:block;overflow:hidden;border-radius:10px;height:140px;border:1px solid var(--line)}.theme-preview .preview-bar{display:block;height:27px}.theme-preview .preview-body{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:22px 11px}.theme-preview .preview-body i{display:block;height:58px;border-radius:7px}.dark-preview{background:#202020}.dark-preview .preview-bar{background:#080808}.dark-preview .preview-body i{background:#303030}.light-preview{background:#f4f4f4}.light-preview .preview-bar{background:#fff}.light-preview .preview-body i{background:#fff;border:1px solid #d8dde5}.theme-copy{display:block;padding:10px 3px 2px}.theme-copy strong{display:block;font-size:14px}.theme-copy small{display:block;color:var(--muted);font-size:11px;margin-top:3px}

/* Footer */
.site-footer{max-width:var(--max);margin:50px auto 0;border-top:1px solid var(--line);padding:24px 0;color:var(--soft);font-size:11px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
code{background:var(--surface-3);padding:2px 5px;border-radius:4px}

/* Queue affordance: visual only for now; behavior remains unchanged. */
.queue-hint{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);background:var(--surface);border-radius:10px;color:var(--muted);font-size:12px}

@media(max-width:1180px){
  .video-grid{grid-template-columns:repeat(3,1fr)}
  .next-card{grid-template-columns:200px 1fr}.next-card .countdown{grid-column:2}
  .content-grid{grid-template-columns:repeat(2,1fr)}
  .watch-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero.hero-split{grid-template-columns:1fr minmax(320px,.8fr)}
  .hero-media{height:300px}
}
@media(max-width:880px){
  .appearance-grid{grid-template-columns:1fr}
  .app-layout{display:block}.sidebar{display:none}.app-main{padding:0 18px 60px}.topic-strip{margin:0 -18px 20px;padding:0 18px}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .global-search{display:none}.profile-name{display:none}
  .next-card{grid-template-columns:1fr}.next-card .countdown{grid-column:auto}.next-card img{height:190px}
  .auth-shell{grid-template-columns:1fr}.auth-art{min-height:310px}
  .form-grid{grid-template-columns:1fr}.full{grid-column:auto}
  .hero.hero-split{grid-template-columns:1fr;min-height:auto;padding:30px}.hero-media{height:300px;margin-top:8px}
  .landing-hero{min-height:auto}.landing-hero .hero-media{height:330px}
}
@media(max-width:560px){
  .topbar{padding:0 13px;gap:10px;height:64px}.brand-logo{width:145px;height:34px;max-width:46vw}.theme-cycle{width:35px;height:35px}.profile-trigger{padding-right:5px}
  .app-layout{min-height:calc(100vh - 64px)}.topic-strip{top:64px;height:49px}
  .video-grid,.content-grid,.stats{grid-template-columns:1fr}
  .hero{padding:23px;min-height:460px}.hero.hero-split{padding:24px 20px;border-radius:13px}.hero h1{font-size:49px}.hero-media{height:260px;gap:7px}
  .landing-main{padding:16px 14px 50px}.landing-hero{margin-top:0}.landing-hero .hero-media{height:260px}
  .auth-box{padding:32px 25px}.auth-box .brand-logo{width:178px;height:40px}.app-main{padding:0 14px 50px}.topic-strip{margin:0 -14px 18px;padding:0 14px}.watch-page{padding:14px}
  .next-card{padding:10px}.next-card img{height:180px}.section-head h1{font-size:26px}
}