/*
 * Vistu site. The idea: the page is a TV. The top bar is an on-screen display with channel numbers,
 * the first screen is the player with a match on, and each section is a channel.
 * Brand: ink #0E1320, Vistu blue #4F7CFF. Sora for headings, IBM Plex Sans for text, Plex Mono for numbers.
 */
:root {
  --ink: #0E1320; --deep: #080B12; --panel: #121827; --line: #222B3D; --line2: #2E3850;
  --text: #E8ECF4; --muted: #8E99AD; --blue: #4F7CFF; --blue-soft: #8AB4F8; --live: #E5484D;
  --g-news: #5AB0FF; --g-sport: #4CD787; --g-movie: #B388FF; --g-doc: #3FD0C4;
  --pad: clamp(16px, 4vw, 56px);
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--deep); color: var(--text); font: 17px/1.55 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--blue-soft); }
h1, h2, h3 { font-family: Sora, 'IBM Plex Sans', sans-serif; letter-spacing: -0.025em; margin: 0; }
kbd, .kbdish { font: 500 12px 'IBM Plex Mono', monospace; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--text); background: var(--panel); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blue); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; border-radius: 4px; }

/* ---------- OSD top bar ---------- */
.osd { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 var(--pad);
  background: linear-gradient(rgba(8,11,18,.94), rgba(8,11,18,.86)); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
.osd-logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 600 22px Sora, sans-serif; letter-spacing: -0.03em; }
.osd-nav { display: flex; gap: 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.osd-nav::-webkit-scrollbar { display: none; }
.osd-nav a { display: flex; align-items: baseline; gap: 7px; padding: 7px 11px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.osd-nav a b { font: 500 11px 'IBM Plex Mono', monospace; color: #5d6880; }
.osd-nav a:hover, .osd-nav a.on { color: #fff; background: rgba(255,255,255,.06); }
.osd-nav a.on b { color: var(--blue-soft); }
.osd-right { display: flex; align-items: center; gap: 18px; }
.osd-support { color: var(--text); text-decoration: none; font-size: 14px; border: 1px solid var(--line2); padding: 6px 12px; border-radius: 8px; }
.osd-support:hover { border-color: var(--blue); }
.osd-link { color: var(--muted); text-decoration: none; font-size: 14px; } .osd-link:hover { color: #fff; }
.osd-clock { font: 500 15px 'IBM Plex Mono', monospace; color: #fff; letter-spacing: .04em; }
@media (max-width: 980px) { .osd-nav { display: none; } .osd { justify-content: space-between; } }

/* ---------- 01 live hero ---------- */
.live { position: relative; padding: 0 0 18px; background: #000; }
/* Copy at the top, info bar at the bottom, in normal flow: if they can't both fit, the screen grows instead of overlapping */
.live-screen { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: max(560px, min(calc(100svh - 60px), 62vw));
  padding: clamp(28px, 7vh, 80px) var(--pad) 28px; overflow: hidden; background: #050608; isolation: isolate; }
.live-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.live-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,12,.82) 0%, rgba(5,7,12,.45) 38%, transparent 62%), linear-gradient(transparent 45%, rgba(0,0,0,.88) 100%); }
.live-flash { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 5; }
.live-flash.on { animation: flash .38s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.live-num { position: absolute; top: 28px; right: var(--pad); font: 500 clamp(40px, 6vw, 84px)/1 'IBM Plex Mono', monospace; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; z-index: 6; }
.live-num.on { opacity: 1; }
.live-copy { position: relative; width: min(640px, 100%); z-index: 3; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #dfe6f5; margin: 0 0 18px;
  padding: 5px 10px; border-radius: 6px; background: rgba(229,72,77,.18); border: 1px solid rgba(229,72,77,.5); }
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tag .dot { animation: none; } }
.live-copy h1 { font-size: clamp(34px, min(5.2vw, 8.5vh), 68px); line-height: 1.02; font-weight: 700; text-wrap: balance; }
.live-copy .lede { font-size: clamp(16px, 1.5vw, 20px); color: #d3dae8; margin: 18px 0 26px; max-width: 34em; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; min-width: 168px; }
.store span { display: flex; flex-direction: column; font: 600 18px/1.1 Sora, sans-serif; letter-spacing: -0.01em; }
.store small { font: 500 11px 'IBM Plex Sans', sans-serif; letter-spacing: 0; opacity: .7; }
.store.soon { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); cursor: default; }

/* The Vistu info bar, as on a TV */
.live-bar { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 32px; align-items: end; color: #fff; }
.lb-chan { display: flex; gap: 14px; align-items: center; grid-column: 1 / -1; }
.lb-logo { width: 78px; height: 39px; border-radius: 8px; overflow: hidden; flex: none; }
.lb-logo svg { width: 100%; height: 100%; display: block; }
.lb-name { font: 400 clamp(20px, 2vw, 26px)/1.1 Roboto, sans-serif; display: block; }
.lb-chan small { font: 13px Roboto, sans-serif; opacity: .7; }
.lb-prog { grid-column: 1 / 3; font-family: Roboto, sans-serif; }
.lb-prog p { margin: 0; }
.lb-title { font-size: clamp(19px, 1.8vw, 24px); display: flex; align-items: center; gap: 10px; }
.live-badge { font: 700 11px Roboto, sans-serif; letter-spacing: .5px; background: #D32F2F; padding: 2px 6px; border-radius: 3px; }
.live-badge.new { background: var(--blue-soft); color: #0B1B33; }
.live-badge.none { display: none; }
.lb-time { display: flex; align-items: center; gap: 14px; font-size: 14px; opacity: .9; margin-top: 6px !important; }
.lb-track { width: min(240px, 30vw); height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.lb-track i { display: block; height: 100%; background: var(--blue-soft); transition: width .4s; }
.lb-next { font-size: 14px; opacity: .7; margin-top: 4px !important; }
.lb-remote { display: flex; flex-direction: column; gap: 8px; grid-column: 3; grid-row: 2; }
.lb-remote button { font: 500 13px 'IBM Plex Mono', monospace; color: #fff; background: rgba(20,26,40,.75); border: 1px solid rgba(255,255,255,.25); border-radius: 22px; padding: 10px 18px; cursor: pointer; backdrop-filter: blur(6px); }
.lb-remote button:hover { background: #fff; color: var(--ink); }
.live-hint { margin: 12px var(--pad) 0; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) {
  .live-screen { min-height: 0; padding: 28px var(--pad) 18px; }
  .stores .store { min-width: 0; flex: 1; }
  .lb-track { width: 70px; }
  .lb-time { gap: 10px; font-size: 13px; }
  .live-screen::before { background: linear-gradient(rgba(5,7,12,.7), rgba(5,7,12,.5) 40%, rgba(0,0,0,.92)); }
  .live-copy { width: auto; }
  .live-bar { grid-template-columns: 1fr auto; gap: 12px; }
  .lb-prog { grid-column: 1; }
  .lb-remote { grid-column: 2; }
}

/* ---------- channels (sections) ---------- */
.chan { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--pad) 0; }
.chan-head { display: grid; grid-template-columns: 120px 1fr; gap: 6px 28px; margin-bottom: 44px; max-width: 980px; }
.chan-num { grid-row: span 2; font: 500 13px 'IBM Plex Mono', monospace; color: var(--blue-soft); letter-spacing: .08em; padding-top: 14px; border-top: 2px solid var(--blue); align-self: start; }
.chan-head h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; font-weight: 600; text-wrap: balance; }
.chan-head p { color: #b8c1d3; font-size: 18px; margin: 12px 0 0; max-width: 40em; }
.chan-head p.big { font-size: clamp(19px, 1.8vw, 23px); color: #dfe5f0; }
@media (max-width: 700px) { .chan-head { grid-template-columns: 1fr; } .chan-num { grid-row: auto; width: max-content; } }

.mock { position: relative; width: 100%; }
.mock-inner { position: absolute; inset: 0; }
.mock .device { position: absolute; }
.mock-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock-note { color: var(--muted); font-size: 13px; margin: 18px 0 0; text-align: center; }
.mock-tv { max-width: 1100px; margin: 0 auto; }
.mock-phone { max-width: 300px; }
.pair { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: end; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } .pair .mock-phone { margin: 0 auto; width: 70%; } }
.mock-screens { max-width: 1100px; margin: 0 auto; }
.sc-dev { position: absolute; }

/* Features as a guide grid ("Tonight on Vistu") */
.tonight { margin-top: 72px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink); font-family: Roboto, 'IBM Plex Sans', sans-serif; }
.tonight-head, .tonight-row { display: grid; grid-template-columns: 150px repeat(8, 1fr); gap: 3px; }
.tonight-head { padding: 12px 3px 6px; font-size: 12px; color: var(--muted); }
.tonight-head span:first-child { padding-left: 14px; color: #dfe5f0; font-weight: 500; }
.tonight-head .t { grid-column: span 2; padding-left: 8px; border-left: 1px solid var(--line2); font-family: 'IBM Plex Mono', monospace; }
.tonight-row { padding: 0 3px 3px; }
.tonight-ch { background: #1B2230; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 500; border-radius: 4px; }
.tonight-cell { grid-column: span var(--span); position: relative; padding: 10px 12px 10px 16px; border-radius: 4px; background: #1A1F28; min-height: 62px; overflow: hidden; }
.tonight-cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g); }
.tonight-cell::after { content: ''; position: absolute; inset: 0; background: var(--g); opacity: .13; }
.tonight-cell b, .tonight-cell small { position: relative; z-index: 1; display: block; }
.tonight-cell b { font-weight: 500; font-size: 14px; }
.tonight-cell small { color: #a9b2c3; font-size: 12px; margin-top: 2px; }
.tonight-cell.on { background: #E3E6EB; color: var(--ink); }
.tonight-cell.on small { color: #3a4250; }
.tonight-cell.on::after, .tonight-cell.on::before { display: none; }
.g-news { --g: var(--g-news); } .g-sport { --g: var(--g-sport); } .g-movie { --g: var(--g-movie); } .g-doc { --g: var(--g-doc); }
@media (max-width: 860px) {
  .tonight-head { display: none; }
  .tonight-row { grid-template-columns: 1fr 1fr; padding: 3px; }
  .tonight-ch { grid-column: 1 / -1; padding: 10px 14px; }
  .tonight-cell { grid-column: span 1; }
}

/* Multiview screen (inside the TV mock, in dp) */
.ck .mv { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 6px; background: #000; }
.ck .mv-tile { position: relative; overflow: hidden; border-radius: 6px; cursor: pointer; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s; }
.ck .mv-tile .video { position: absolute; inset: 0; }
.ck .mv-tile.on { outline-color: #fff; }
.ck .mv-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.ck .mv-logo { width: 44px; height: 22px; border-radius: 4px; overflow: hidden; flex: none; }
.ck .mv-logo svg { width: 100%; height: 100%; display: block; }
.ck .mv-label b { display: block; font-size: 12px; font-weight: 500; }
.ck .mv-label small { display: block; font-size: 10px; opacity: .75; }
.ck .mv-sound { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .15s; }
.ck .mv-sound .ms { font-size: 18px; }
.ck .mv-tile.on .mv-sound { opacity: 1; }
.ck .mv-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 10px; color: rgba(255,255,255,.6); background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: 999px; white-space: nowrap; display: none; }

.platforms { list-style: none; padding: 0; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--muted); max-width: 900px; }
.platforms b { color: var(--text); font-weight: 500; }

/* 06 your playlist */
.playlist .chan-head h2 { font-size: clamp(34px, 5vw, 64px); }
.playlist-body { display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps b { font: 600 19px Sora, sans-serif; letter-spacing: -0.015em; }
.steps p { margin: 6px 0 0; color: #b0b9cb; }
.step-n { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font: 500 16px 'IBM Plex Mono', monospace; background: var(--panel); border: 1px solid var(--line2); color: var(--blue-soft); }
.step-n.lock { background: rgba(76,215,135,.12); border-color: rgba(76,215,135,.45); color: #4CD787; }
@media (max-width: 860px) { .playlist-body { grid-template-columns: 1fr; } .playlist-body .mock-phone { margin: 0 auto; width: 70%; } }

/* Download */
.get { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); background:
  radial-gradient(60% 120% at 50% 0%, rgba(79,124,255,.22), transparent 70%), var(--ink); }
.get-inner { max-width: var(--max); margin: 0 auto; padding: 90px var(--pad); text-align: center; }
.get h2 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; }
.get p { color: #b8c1d3; font-size: 19px; margin: 12px 0 28px; }
.get .stores { justify-content: center; }

/* ---------- inner pages ---------- */
.page { max-width: 820px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--pad) 40px; }
.page h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; font-weight: 700; margin-bottom: 16px; }
.page h2 { font-size: 24px; margin: 44px 0 10px; font-weight: 600; }
.page p, .page li { color: #c4ccdb; }
.page .lede { font-size: 19px; color: #dfe5f0; }
.page .meta { font: 500 13px 'IBM Plex Mono', monospace; color: var(--muted); }
.callout { border-left: 3px solid var(--blue); background: var(--panel); padding: 16px 20px; border-radius: 0 10px 10px 0; color: #dfe5f0; margin: 24px 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 14px 0; font: 600 17px Sora, sans-serif; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; font: 500 20px 'IBM Plex Mono', monospace; color: var(--blue-soft); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 16px; }

form.support { display: grid; gap: 18px; margin-top: 24px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
form.support label { display: grid; gap: 6px; font-size: 14px; color: #dfe5f0; font-weight: 500; }
form.support label small { color: var(--muted); font-weight: 400; }
form.support input, form.support select, form.support textarea { font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; }
form.support textarea { min-height: 170px; resize: vertical; }
form.support input:focus, form.support select:focus, form.support textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,124,255,.25); }
form.support .err { color: #FF8A8A; font-size: 13px; font-weight: 400; }
form.support .bad { border-color: #E5484D; }
.form-error { background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.4); color: #FFB4B4; padding: 12px 16px; border-radius: 10px; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.btn { font: 600 16px Sora, sans-serif; letter-spacing: -0.01em; color: #fff; background: var(--blue); border: 0; border-radius: 12px; padding: 14px 24px; cursor: pointer; justify-self: start; }
.btn:hover { background: #3f6af0; }
a.btn { text-decoration: none; display: inline-block; }
.credits-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.credits-table th, .credits-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: #c4ccdb; }
.credits-table th { color: var(--muted); font-weight: 500; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 36px var(--pad) 48px; background: var(--deep); }
.foot-row { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 8px; font: 600 20px Sora, sans-serif; letter-spacing: -0.03em; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: #fff; }
.foot-note { max-width: var(--max); margin: 20px auto 0; color: #6f7a8f; font-size: 13px; }
.foot-legal { max-width: var(--max); margin: 10px auto 0; color: #535d70; font-size: 12px; }

/* 06 supported devices: a TV "input" menu */
.inputs { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; gap: 6px; padding: 10px; border-radius: 16px; background: linear-gradient(rgba(27,34,48,.75), rgba(18,24,39,.9)); border: 1px solid var(--line); }
.input { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 12px; color: var(--text); outline: none; transition: background .12s, color .12s, transform .12s; }
.input-ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--blue-soft); }
.input-txt b { display: block; font: 600 17px Sora, sans-serif; letter-spacing: -0.015em; }
.input-txt small { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.input-store { font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
/* The highlighted row follows the pointer or keyboard focus, like a remote moving through a menu. */
a.input { text-decoration: none; }
.input:hover, .input:focus-visible, .inputs:not(:hover):not(:focus-within) .input.on { background: #E3E6EB; color: var(--ink); transform: scale(1.015); }
.input:hover .input-txt small, .input:focus-visible .input-txt small, .inputs:not(:hover):not(:focus-within) .input.on .input-txt small { color: #3a4250; }
.input:hover .input-ic, .input:focus-visible .input-ic, .inputs:not(:hover):not(:focus-within) .input.on .input-ic { background: var(--blue); color: #fff; }
.input:hover .input-store, .input:focus-visible .input-store, .inputs:not(:hover):not(:focus-within) .input.on .input-store { color: #3a4250; border-color: #b9c0cc; }
.input.fam-apple { grid-column: 1; } .input.fam-google, .input.fam-amazon { grid-column: 2; }
.inputs-note { color: var(--muted); font-size: 14px; margin: 18px 4px 0; max-width: 60em; }
@media (max-width: 860px) { .inputs { grid-template-columns: 1fr; } .inputs .input { grid-column: auto; } .input { grid-template-columns: 44px 1fr; } .input-ic { width: 44px; height: 44px; } .input-store { grid-column: 2; justify-self: start; } }
.platforms a { color: var(--blue-soft); text-decoration: none; }
.steps.install { margin-top: 28px; }
/* Fire TV in development: a "coming up" card, like a programme in the guide with no time yet */
.dev-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F2B04C; margin-right: 7px; vertical-align: 1px; animation: blink 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .dev-dot { animation: none; } }
.input-store.dev { color: #F5C67A; border-color: rgba(242,176,76,.45); background: rgba(242,176,76,.08); }
.input:hover .input-store.dev, .input:focus-visible .input-store.dev, .inputs:not(:hover):not(:focus-within) .input.on .input-store.dev { color: #7a4b00; border-color: rgba(176,110,0,.45); background: rgba(242,176,76,.18); }
.upnext { margin: 28px 0; padding: 22px 24px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(242,176,76,.10), rgba(27,34,48,.6) 55%); border: 1px solid rgba(242,176,76,.28); }
.upnext-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.upnext-badge { font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #F5C67A; border: 1px solid rgba(242,176,76,.45); border-radius: 999px; padding: 5px 11px; }
.upnext-time { font: 500 13px 'IBM Plex Mono', monospace; color: var(--muted); }
.page .upnext-title { font: 600 22px Sora, sans-serif; letter-spacing: -0.015em; color: #fff; margin: 16px 0 6px; }
.page .upnext-desc { margin: 0; color: #c4ccdb; }
.upnext-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 18px; overflow: hidden; }
.upnext-track i { display: block; height: 100%; width: 30%; border-radius: 2px; background: linear-gradient(90deg, transparent, #F2B04C, transparent); animation: upnext 2.6s ease-in-out infinite; }
@keyframes upnext { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .upnext-track i { animation: none; width: 100%; opacity: .35; } }
.install-url code { display: inline-block; font: 500 20px 'IBM Plex Mono', monospace; color: #fff; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 16px; letter-spacing: .02em; word-break: break-all; }

/* ---------- account ---------- */
.page.narrow { max-width: 560px; }
.aside { color: var(--muted); font-size: 14px; margin-top: 18px; }
.form-ok { background: rgba(76,215,135,.12); border: 1px solid rgba(76,215,135,.4); color: #b6f2cf; padding: 12px 16px; border-radius: 10px; }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn.ghost:hover { border-color: var(--blue); background: transparent; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn.danger { background: #c83a3f; } .btn.danger:hover { background: #b02f34; }
.linkish { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.linkish:hover { color: #fff; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.inline-form input { font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--line2); border-radius: 10px; padding: 11px 14px; min-width: 240px; }
.acct-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 24px 0 8px; }
.licence { border: 1px solid var(--line); border-radius: 14px; background: var(--ink); padding: 20px 22px; margin-top: 24px; }
.licence.problem { border-color: rgba(229,72,77,.45); }
.licence h2 { margin: 0; font-size: 22px; }
.lic-state { margin: 4px 0 14px; color: var(--muted); font-size: 14px; }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.place { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #161c29; }
.place.free { background: transparent; border: 1px dashed var(--line2); }
.place-n { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font: 500 13px 'IBM Plex Mono', monospace; background: rgba(79,124,255,.14); color: var(--blue-soft); }
.place-body b { display: block; font-weight: 600; }
.place-body small, .place-note { color: var(--muted); font-size: 13px; }
.place.free b { color: var(--muted); font-weight: 500; }
.acct-foot { display: flex; gap: 22px; align-items: center; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.acct-foot a { color: var(--muted); text-decoration: none; } .acct-foot a:hover { color: #fff; }
.tvcode { font: 500 1.1em 'IBM Plex Mono', monospace; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 2px 10px; letter-spacing: .08em; }
.tvcode-input { font: 500 24px 'IBM Plex Mono', monospace !important; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 640px) { .place { grid-template-columns: 34px 1fr; } .place form, .place-note { grid-column: 2; } .inline-form input { min-width: 0; flex: 1; } }