/* Kuaizhi 快知 web UI, rounds 1-3. Spec: docs/design_handoff_kuaizhi_v1/README.md, then v2/ and v3/README.md
   Reading-screen type is in em so the A / A+ / A++ control (--size) scales it; top-bar chrome stays in px. */

/* ---- Design tokens (round-1 handoff's tokens.css, pasted unchanged; --muted-row added in round 2) ---- */
:root{
  --bg:#FAF6EE; --card:#FFFFFF; --ink:#1B1815; --ink2:#4A433B;
  --line:#DDD4C3; --line-strong:#857A69;
  --accent:#A4231A; --accent-ink:#FFFFFF; --accent-text:#A4231A; --accent-soft:#F7E7E2;
  --skel:#ECE5D8; --focus:#1446C8; --muted-row:#F3EEE4;
  --src-1:#1F6F78; --src-2:#5A4FA0;
  --size:22px;                       /* A=22, A+=26, A++=30 (TV base 32) */
  --r-btn:12px; --r-btn-lg:14px; --r-card:16px; --r-panel:18px;
  --tap:56px; --tap-primary:64px; --tap-audio:72px;
  --font-hant:"PingFang TC","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-hans:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
}
/* Dark follows the device unless Settings › 畫面顏色 picks one: app.js sets html[data-theme=light|dark]. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#14120F; --card:#1F1C18; --ink:#F4EFE6; --ink2:#CEC6B8;
  --line:#38332C; --line-strong:#7A7264;
  --accent:#FF8C78; --accent-ink:#1A0B08; --accent-text:#FF8C78; --accent-soft:#3B201B;
  --skel:#2C2823; --focus:#FFD25C; --muted-row:#25211C;
  --src-1:#6FC3CC; --src-2:#ADA4E8;
}}
:root[data-theme=dark]{
  --bg:#14120F; --card:#1F1C18; --ink:#F4EFE6; --ink2:#CEC6B8;
  --line:#38332C; --line-strong:#7A7264;
  --accent:#FF8C78; --accent-ink:#1A0B08; --accent-text:#FF8C78; --accent-soft:#3B201B;
  --skel:#2C2823; --focus:#FFD25C; --muted-row:#25211C;
  --src-1:#6FC3CC; --src-2:#ADA4E8;
}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
html:lang(zh-Hant) body{font-family:var(--font-hant)}
html:lang(zh-Hans) body{font-family:var(--font-hans)}
body{margin:0;background:var(--bg);color:var(--ink);font-size:var(--size);line-height:1.7;font-weight:400}
:focus-visible{outline:5px solid var(--focus);outline-offset:4px}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
/* First run sets html lang="zh" and shows both scripts; each language button carries its own lang. */
body{font-family:"PingFang TC","PingFang SC","Noto Sans CJK TC","Noto Sans CJK SC","Microsoft JhengHei",system-ui,sans-serif;min-height:100vh;-webkit-text-size-adjust:100%}
[lang="zh-Hant"]{font-family:var(--font-hant)}
[lang="zh-Hans"]{font-family:var(--font-hans)}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.4}
.ic{flex:none;width:24px;height:24px}
.tv-only{display:none}
@media not all and (min-width:1280px){.tv-only{display:none !important}}

/* ---- Buttons ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:var(--tap);padding:0 14px;border:2px solid var(--line-strong);border-radius:var(--r-btn);background:var(--card);color:var(--ink);font-weight:700;line-height:1.4;text-align:center;text-decoration:none}
.btn-accent{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.btn-ink{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn-primary{width:100%;min-height:var(--tap-primary);border-radius:var(--r-btn-lg);font-size:.95em;font-weight:800}
.btn-primary .ic{width:26px;height:26px}
.btn-audio{width:100%;min-height:var(--tap-audio);border-radius:var(--r-btn-lg);font-weight:800}
.btn-audio .ic{width:26px;height:26px}

/* ---- Top bar (px chrome) ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(20px,calc((100% - 720px) / 2));border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:9px;line-height:1}
.wm-zh{font-size:28px;font-weight:800;letter-spacing:.06em}
.wm-dot{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.wm-en{font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--ink2)}
.chrome-btn{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 18px;border:2px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);font-size:20px;font-weight:700;line-height:1.2}
.chrome-btn .ic{width:22px;height:22px}
.chrome-btn.back{gap:4px;padding:0 20px 0 12px}
.chrome-btn.back .ic{width:24px;height:24px}
.pos{font-size:18px;font-weight:600;color:var(--ink2)}
.sizebtn{padding:0 16px}
.sb-a1{font-size:22px;font-weight:800}
.sb-a2{margin-left:-6px;font-size:15px;font-weight:800}

/* ---- Bottom tab bar (round 2): 今日 / 直播 / 重溫 / 設定, on every screen but First run ---- */
:root{--tabbar-h:calc(96px + env(safe-area-inset-bottom))} /* 8 + 66 + 20 padding + 2 border */
body:not(.v-first){padding-bottom:calc(var(--tabbar-h) + 14px)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px max(10px,calc((100% - 760px) / 2)) calc(20px + env(safe-area-inset-bottom));border-top:2px solid var(--line-strong);background:var(--bg)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:66px;padding:0;border:0;border-radius:14px;background:none;color:var(--ink);font-size:19px;font-weight:800;line-height:1.2}
.tab .ic{width:28px;height:28px}
.tab.sel{background:var(--ink);color:var(--bg)}

/* ---- Pages ---- */
.page,.today-grid{display:flex;flex-direction:column;gap:18px;width:100%;max-width:760px;margin:0 auto;padding:20px 20px 32px}
.date,.sub{font-size:.82em;font-weight:500;color:var(--ink2)}
.title{font-size:1.45em;line-height:1.35;font-weight:800}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---- Today: phone stacks rail + feed into one column, ordered as in the mock ---- */
.rail,.feed{display:contents}
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}.o8{order:8}.o9{order:9}

.play-main{display:flex;align-items:center;gap:16px;width:100%;min-height:96px;padding:14px 20px;border:0;border-radius:var(--r-panel);background:var(--accent);color:var(--accent-ink);text-align:left}
.play-dot{display:flex;align-items:center;justify-content:center;flex:none;width:60px;height:60px;border-radius:50%;background:var(--accent-ink);color:var(--accent)}
.play-dot .ic{width:26px;height:26px}
.play-text{display:flex;flex-direction:column}
.play-label{font-size:1.1em;font-weight:800;line-height:1.35}
.play-sub{font-size:.76em;font-weight:500}

/* Today header (1a): date + title left, weather chip right; a warning is never hidden */
.today-grid{gap:16px;padding-top:16px}
.today-top{display:flex;flex-direction:column;gap:12px}
.today-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.today-head .date{font-size:.78em}
.today-head .title{font-size:1.4em;line-height:1.3}
.wx-chip{display:flex;align-items:center;gap:6px;flex:none;min-height:56px;padding:0 2px 2px;border:0;background:none;color:var(--ink);font-size:.78em;font-weight:700;line-height:1.3}
.wx-chip .wx-ic{width:26px;height:26px}
.tap-note{font-size:.72em;font-weight:500;line-height:1.55;color:var(--ink2)}

/* Compact story row: one button per story */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:14px 16px 14px 18px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--card);color:var(--ink);text-align:left}
.row.now{padding:12.5px 14.5px 12.5px 16.5px;border:3px solid var(--accent)}
.row-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.row-h{font-size:1.05em;font-weight:700;line-height:1.45;text-wrap:pretty}
.row-time{font-size:.72em;font-weight:500;line-height:1.4;color:var(--ink2)}
.row>.ic{width:22px;height:22px;color:var(--line-strong)}

.segs{display:flex;gap:6px}
.seg{flex:1;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--line) var(--p,0%))}

.ctl{display:flex;align-items:center;gap:12px}
.ctl-label{flex:none;font-size:.8em;font-weight:600;color:var(--ink2)}
.ctl-row{display:flex;flex:1;gap:8px}
.opt{flex:1;min-height:56px;padding:0 4px;border:2px solid var(--line-strong);border-radius:var(--r-btn);background:var(--card);color:var(--ink);font-size:20px;font-weight:700;line-height:1}
.opt.sel{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.sz{font-weight:800}.sz0{font-size:18px}.sz1{font-size:23px}.sz2{font-size:28px}
.ctl-row.tall .opt{min-height:64px}
.regionctl,.partctl{flex-direction:column;align-items:stretch;gap:8px}
.partctl .ctl-row{display:grid;grid-template-columns:repeat(2,1fr)} /* a replay's half-hour parts, two to a row */
.ctl-row.wrap{flex-wrap:wrap}
.opt.rg{flex:1 0 auto;padding:0 14px}

/* Episodes and story cards */
.ep{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.src{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;padding-bottom:8px;border-bottom:2px solid var(--line-strong)}
.swatch{flex:none;width:14px;height:14px;border-radius:3px}
.src-name{font-size:.88em;font-weight:800}
.src-show{font-size:.72em;font-weight:500;color:var(--ink2)}
.card{display:flex;flex-direction:column;gap:10px;padding:18px 20px 16px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.card.now{padding:16.5px 18.5px 14.5px;border:3px solid var(--accent)}
.card-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
.card h3{font-size:1.14em;font-weight:700;line-height:1.45;text-wrap:pretty}
.card p{text-wrap:pretty}
.pill{font-size:.72em;font-weight:800;padding:2px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text)}
.meta{font-size:.74em;font-weight:500;line-height:1.55;color:var(--ink2)}
.card-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.card-actions .btn{flex:1 1 auto;font-size:.8em}
.ai-note{margin-top:8px;font-size:.78em;font-weight:500;line-height:1.6;color:var(--ink2)}
.end{padding-top:8px;text-align:center;font-size:.78em;font-weight:600;color:var(--ink2)}

/* States */
.loading-text{font-size:.9em;font-weight:600;color:var(--ink2)}
.skel-card{display:flex;flex-direction:column;gap:12px;padding:20px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.skel-card span{height:18px;border-radius:6px;background:var(--skel)}
.skel-card span:first-child{width:72%;height:26px}
.skel-card span:last-child{width:88%}
.notice{display:flex;flex-direction:column;gap:14px;padding:24px 20px;border:1.5px solid var(--line);border-radius:var(--r-panel);background:var(--card)}
.notice.offline{gap:12px;padding:20px;border:3px solid var(--ink)}
.notice-title{font-size:1.2em;font-weight:800;line-height:1.4}
.notice.novoice{border:3px solid var(--accent)}
.cached{margin-top:6px;font-size:.85em;font-weight:700;color:var(--ink2)}

/* ---- Shared player bar (round 2, px chrome): above the tab bar on every screen while something plays ---- */
body.has-bar:not(.v-first){padding-bottom:calc(var(--tabbar-h) + 8px + 84px + 14px)}
.pbar{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + 8px);z-index:9;display:flex;align-items:center;gap:12px;max-width:736px;margin:0 auto;padding:10px 10px 10px 18px;border-radius:18px;background:var(--accent);color:var(--accent-ink)}
.pbar-open{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;min-height:64px;padding:0;border:0;background:none;color:inherit;line-height:1.35;text-align:left}
.pbar-status{display:flex;align-items:center;font-size:15px;font-weight:700}
.pbar-title{overflow:hidden;font-size:19px;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.pbar .live-dot{width:10px;height:10px;background:var(--accent-ink)}
.pbar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:none;width:76px;height:64px;padding:0;border:0;border-radius:14px;background:var(--accent-ink);color:var(--accent);font-size:15px;font-weight:800;line-height:1.2}
.pbar-btn .ic{width:24px;height:24px}
.pbar :focus-visible{outline-color:var(--accent-ink)}
/* 1b reading first: the play button waits in the bar's place */
.pbar.idle{padding:0}
.pbar-play{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:10px 18px;border:0;border-radius:18px;background:none;color:inherit}
.pbar-play>.ic{width:28px;height:28px}
.pbar-play .pbar-open{min-height:0}
.pbar.idle .pbar-title{font-size:21px}

/* The playing element lives outside #app; a TV picture is laid over .live-slot.screen, audio sits off-screen. */
.media-host{position:absolute;left:-10000px;top:0;width:320px;height:180px;overflow:hidden;pointer-events:none}
.media-host.placed{z-index:5;border-radius:12px;background:#000;pointer-events:auto}
.media-host>*{display:block;width:100%;height:100%;border:0}

/* ---- Full player (v=player) ---- */
.fullplayer{gap:16px;padding-top:18px}
.fp-src{display:flex;align-items:center;gap:10px}
.fp-name{font-size:.86em;font-weight:800}
.fp-time{font-size:.72em;font-weight:500;color:var(--ink2)}
.fp-status{display:flex;align-items:center;font-size:.8em;font-weight:700;color:var(--accent-text)}
.fp-h{font-size:1.3em;line-height:1.4;font-weight:800;text-wrap:pretty}
.fp-h.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:1.05em} /* YouTube titles run long */
.fp-s{line-height:1.75;text-wrap:pretty}
.say.on{padding:2px 4px;border-radius:6px;background:var(--accent-soft);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fp-ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:10px;margin-top:4px}
.fp-ctl.one{grid-template-columns:minmax(0,1fr)}
.fp-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:96px;padding:6px 4px;border:2px solid var(--line-strong);border-radius:16px;background:var(--card);color:var(--ink);font-size:.8em;font-weight:800;line-height:1.3}
.fp-btn .ic{width:28px;height:28px}
.fp-btn.main{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-size:.9em}
.fp-btn.main .ic{width:34px;height:34px}
.fp-note{font-size:.72em;font-weight:500;line-height:1.55;color:var(--ink2)}
.now-block{display:flex;flex-direction:column;gap:12px}
.now-block:empty{display:none}

/* ---- Story ---- */
.story-page{gap:16px}
.story-h{font-size:1.35em;line-height:1.4;font-weight:800;text-wrap:pretty}
.story-s{font-size:1.05em;line-height:1.75;text-wrap:pretty}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:4px}
.span2{grid-column:1 / -1}
.story-grid .btn-audio{font-size:1em}
.ext{display:flex;flex-direction:column;gap:2px;min-height:56px;padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none}
.ext-1{font-size:.85em;font-weight:800;line-height:1.45}
.ext-2{font-size:.7em;font-weight:500;line-height:1.5;color:var(--ink2)}
.note-box{font-size:.72em;font-weight:500;line-height:1.6;color:var(--ink2)}
.btn-nav{min-height:64px;border-radius:14px;font-size:.88em;font-weight:800}

/* ---- Settings ---- */
.settings{gap:28px}
.set{display:flex;flex-direction:column;gap:12px}
.set h2{font-size:.9em;font-weight:800}
.langrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;padding:8px 18px;border:3px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);text-align:left}
.langrow.sel{border-color:var(--ink)}
.lr-text{display:flex;flex-direction:column}
.lr-label{font-size:1em;font-weight:800;line-height:1.35}
.lr-sub{font-size:.74em;font-weight:500;color:var(--ink2)}
.radio{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:3px solid var(--line-strong);border-radius:50%}
.radio span{width:14px;height:14px;border-radius:50%}
.langrow.sel .radio{border-color:var(--ink)}
.langrow.sel .radio span{background:var(--ink)}
.preview{padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card)}
.help-body{font-size:.88em}
.helpcard{display:flex;flex-direction:column;gap:12px;padding:16px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.kv{display:flex;flex-direction:column}
.kv.divider{padding-top:12px;border-top:1px solid var(--line)}
.k{font-size:.76em;font-weight:600;color:var(--ink2)}
.v{font-size:1.05em;font-weight:800}

/* ---- Live TV / radio (not in the round-1 mocks; built from the Past days row and the player panel) ---- */
.chans{display:flex;flex-direction:column;gap:12px}
.chan{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:84px;padding:10px 18px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;text-decoration:none}
.chan.sel{padding:9px 17px;border:3px solid var(--accent)}
.chan-text{display:flex;flex-direction:column;min-width:0}
.chan-name{font-size:1em;font-weight:800;line-height:1.35}
.chan-note{font-size:.74em;font-weight:500;line-height:1.5;color:var(--ink2)}
.chan-go{display:flex;align-items:center;gap:8px;flex:none;font-size:.8em;font-weight:700;color:var(--ink2)}
.chan.sel .chan-go{color:var(--accent-text)}
.chan.off{border-style:dashed;background:transparent}
.chan.off .chan-name{color:var(--ink2)}
.chan.rp .chan-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.92em} /* YouTube titles run long */
.live-dot{display:inline-block;flex:none;width:12px;height:12px;margin-right:8px;border-radius:50%;background:var(--accent);animation:live-pulse 1.6s ease-in-out infinite}
.chan-go .live-dot{margin-right:0}
@keyframes live-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live-slot.gone{display:none}
.live-slot.screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000}
.live-err{padding:12px 14px;border:2px solid var(--ink);border-radius:12px;font-size:.88em;font-weight:700;line-height:1.5}
.live-note{font-size:.76em;font-weight:500;line-height:1.55;color:var(--ink2)}

/* ---- 直播 round 2 (2a / 2b): 電台 / 電視 switch, what plays now, group cards and group screens ---- */
.live{gap:16px}
.live-title{font-size:1.4em;line-height:1.3}
.seg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border-radius:16px;background:var(--skel)}
.seg2-btn{min-height:56px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:.9em;font-weight:800;line-height:1.3}
.seg2-btn.sel{background:var(--ink);color:var(--bg)}
.now-head{display:flex;align-items:center;gap:10px;font-size:.86em;font-weight:800}
.now-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.live-rows{display:flex;flex-direction:column;gap:12px}
.live-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:72px;padding:8px 16px 8px 18px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);text-align:left}
.live-row.sel{padding:7px 15px 7px 17px;border:3px solid var(--accent)}
.lr-name{min-width:0;font-size:.92em;font-weight:800;line-height:1.35}
.lr-go{display:flex;align-items:center;flex:none;font-size:.76em;font-weight:800}
.live-row.sel .lr-go{color:var(--accent-text)}
.group{display:flex;flex-direction:column;border:2px solid var(--line-strong);border-radius:16px;background:var(--card);overflow:hidden}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 18px 6px}
.group-title{font-size:.9em;font-weight:800;line-height:1.35}
.group-count{flex:none;font-size:.72em;font-weight:700;color:var(--ink2)}
.group-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:6px 18px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--ink);text-align:left;text-decoration:none}
.gr-label{min-width:0;font-size:.84em;font-weight:700;line-height:1.4}
.gr-meta{flex:none;font-size:.7em;font-weight:800;color:var(--ink2)}
.group-foot{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:60px;border:0;border-top:2px solid var(--line-strong);border-radius:0;background:var(--muted-row);color:var(--ink);font-size:.84em;font-weight:800}
.group-foot .ic{width:22px;height:22px}
.trail{font-size:.74em;font-weight:600;color:var(--ink2)}
.live .sub{font-size:.76em}
.group-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:76px;padding:8px 14px 8px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--muted-row);color:var(--ink);text-align:left;text-decoration:none}
.gi-text{display:flex;flex-direction:column;min-width:0}
.gi-name{font-size:.92em;font-weight:800;line-height:1.35}
.gi-note{font-size:.68em;font-weight:500;line-height:1.45;color:var(--ink2)}
.gi-pill{flex:none;max-width:48%;padding:4px 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font-size:.68em;font-weight:800;line-height:1.4;text-align:center}
.live-foot{font-size:.7em;font-weight:500;line-height:1.5;color:var(--ink2)}
.group-row .gr-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* YouTube titles run long */

/* 重溫 › 電台節目 / 電視節目 (2d): programmes under fixed date headings */
.day-sec{display:flex;flex-direction:column;gap:12px}
.day-head{padding-bottom:6px;border-bottom:2px solid var(--line-strong);font-size:.8em;font-weight:800;line-height:1.4}
.rp-row{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:10px 16px 10px 14px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);text-align:left}
.rp-row.sel{padding:9px 15px 9px 13px;border:3px solid var(--accent)}
.rp-dot{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.rp-dot .ic{width:22px;height:22px}
.rp-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rp-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;font-weight:800;line-height:1.4}
.rp-meta{font-size:.68em;font-weight:500;line-height:1.45;color:var(--ink2)}
.rp-row.sel .rp-meta{color:var(--accent-text);font-weight:700}

/* ---- 重溫 (round 3, CatchupBDay / CatchupB / Day): search, 按日子 | 按電台, two-column tiles; one day ---- */
.catch{gap:10px;padding-top:16px}
.catch-head{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.catch .sub{font-size:.76em;line-height:1.5}
.srch{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:0 18px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);font-size:.86em;font-weight:700;line-height:1.3;text-align:left}
.srch small{margin-left:auto;font-size:.78em;font-weight:500;color:var(--ink2)}
.catch-sw{margin-top:4px}
.catch-sw .seg2-btn{min-height:60px}
.catch .sw-note{font-size:.68em}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;min-height:112px;padding:12px 14px;border:2px solid var(--line-strong);border-radius:16px;background:var(--card);color:var(--ink);line-height:1.3;text-align:left}
.tile.day-tile{gap:2px}
.tile.now{padding:11px 13px;border:3px solid var(--ink)}
.t-nm{display:flex;align-items:center;gap:4px;font-size:.8em;font-weight:800}
.day-tile .t-nm{font-size:.95em}
.t-star{display:flex;color:var(--accent-text)}
.t-star .ic{width:18px;height:18px}
.t-al{font-size:.68em;font-weight:700;color:var(--ink2)}
.t-st{margin-top:auto;font-size:.68em;font-weight:700;color:var(--ink2)}
.t-st.hot{font-weight:800;color:var(--accent-text)}
.end-rule{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:.68em;font-weight:600;color:var(--ink2)}
.end-rule i{flex:1;height:1px;background:var(--line)}
.news-row{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:8px 14px 8px 18px;border:3px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);line-height:1.35;text-align:left}
.news-row>.ic:last-child{width:22px;height:22px;color:var(--line-strong)}
.catch .seg2{margin-top:6px}
.dh{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px}
.dh span{font-size:.86em;font-weight:700;color:var(--ink2)}
.ep-row{gap:12px;min-height:68px;padding:6px 14px}
.ep-row.sel{padding:5px 13px}
.ep-row .rp-dot{width:44px;height:44px}
.ep-row .rp-dot .ic{width:20px;height:20px}
.ep-row .rp-title{font-size:.84em}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.pg{gap:4px;padding:0 8px;font-size:.78em}

/* Station page (Brand) and programme page (Programme) */
.aka{display:flex;flex-wrap:wrap;gap:8px}
.aka span{padding:2px 10px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--card);font-size:.68em;font-weight:700;line-height:1.5}
.fav-wrap{display:flex;flex-direction:column;gap:6px}
.fav-btn{width:100%;min-height:64px;border-radius:14px;font-size:.9em;font-weight:800}
.fav-btn.saved{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.catch .sec span{font-size:.84em;font-weight:700;color:var(--ink2)}
.catch .live-rows{gap:10px}
.bl-row{display:flex;align-items:center;gap:12px;width:100%;min-height:84px;padding:8px 14px 8px 18px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);line-height:1.35;text-align:left;text-decoration:none}
.bl-row.sel{padding:7px 13px 7px 17px;border:3px solid var(--accent)}
.bl-row.later{background:var(--muted-row);border-width:1.5px;border-color:var(--line)}
.bl-row .fr-nm{display:flex;align-items:center}
.bl-row .live-dot{width:10px;height:10px;margin-right:6px}
.bl-go{display:flex;align-items:center;flex:none;font-size:.76em;font-weight:800;color:var(--accent-text)}
.bl-go.ink{color:var(--ink2)}
.bl-go .live-dot{margin-right:6px}
.pg-row{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:8px 14px 8px 18px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);line-height:1.35;text-align:left}
.pg-row>.ic{width:22px;height:22px;color:var(--line-strong)}
.pg-row .fr-nm{display:flex;align-items:center;gap:4px}
.brand-page .ext{margin-top:8px}
.prog-head{display:flex;flex-direction:column;gap:4px}
.prog-meta{font-size:.72em;font-weight:500;line-height:1.5;color:var(--ink2)}
.prog-play{border-radius:16px}
.prog-play .play-label{font-size:1.05em}
.prog-play .play-sub{font-size:.72em;font-weight:600}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.part{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:72px;padding:8px 16px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--ink);line-height:1.35;text-align:left}
.part.sel{padding:7px 15px;border:3px solid var(--accent)}
.part b{font-size:.86em;font-weight:800}
.part span{font-size:.68em;font-weight:600;color:var(--ink2)}
.prog-page .day-head{margin-top:6px}

/* 搵 (Search / SearchEmpty) */
.search-page{gap:10px}
.lbl{font-size:.76em;font-weight:800;line-height:1.3}
.field{display:flex;align-items:center;gap:6px;min-width:0;min-height:64px;padding:0 6px 0 16px;border:3px solid var(--ink);border-radius:14px;background:var(--card)}
.field:focus-within{outline:5px solid var(--focus);outline-offset:2px}
.field input{flex:1;min-width:0;min-height:56px;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:1.05em;font-weight:700}
.field input::-webkit-search-cancel-button{display:none}
.clr{flex:none;min-height:48px;padding:0 12px;border:0;border-radius:10px;background:var(--skel);color:var(--ink);font-size:.68em;font-weight:800}
#sr{display:flex;flex-direction:column;gap:10px}
.cnt{font-size:.72em;font-weight:600;color:var(--ink2)}
.sr-row{min-height:76px}
.sr-row .fr-nm{display:block}
mark{padding:0 3px;border-radius:4px;background:var(--accent-soft);color:var(--ink);font-weight:800}
.fav-mark{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--accent-text)}
.fav-mark .ic{width:16px;height:16px}
.miss{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:2px solid var(--line-strong);border-radius:16px;background:var(--muted-row);line-height:1.5}
.miss-h{font-size:.95em;font-weight:800}
.miss-b{font-size:.74em;font-weight:500;color:var(--ink2)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.chip{display:flex;align-items:center;justify-content:center;min-width:0;min-height:56px;padding:0 8px;border:2px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);font-size:.8em;font-weight:800;line-height:1.2;overflow-wrap:anywhere}

/* 直播 (Live): station-led rows with a second line, 我的最愛 first; 今日's 有新一集 row; First run step 2 */
.live-row{min-height:76px}
.lr-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.lr-meta{font-size:.68em;font-weight:500;line-height:1.45;color:var(--ink2)}
.fav-head .ic{width:22px;height:22px;color:var(--accent-text)}
.nudge{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:8px 14px 8px 16px;border:2px solid var(--accent);border-radius:14px;background:var(--accent-soft);color:var(--ink);line-height:1.35;text-align:left}
.nudge>.ic:first-child{width:24px;height:24px;color:var(--accent-text)}
.nudge>.ic:last-child{width:22px;height:22px;color:var(--line-strong)}
.nudge-h{font-size:.8em;font-weight:800}
.nudge-s{font-size:.68em;font-weight:600;color:var(--ink2)}
body.v-start{padding-bottom:24px}
.start{gap:14px;padding-top:20px}
.start-head{display:flex;flex-direction:column;gap:6px}
.tile.pick.on{padding:11px 13px;border:3px solid var(--accent);background:var(--accent-soft)}
.p-ck{display:flex;align-items:center;gap:4px;margin-top:auto;font-size:.68em;font-weight:800;color:var(--accent-text)}
.p-ck .ic{width:18px;height:18px}
.start-btns{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.start-btns .btn{font-size:.9em}

/* ---- 我的 (round 3, docs/design_handoff_kuaizhi_v3: Mine / MineEmpty / MineEdit): 我的最愛 on top, settings below ---- */
.mine{gap:14px;padding-top:16px}
.mine-head{display:flex;flex-direction:column;gap:2px}
.mine .sub{font-size:.76em;line-height:1.5}
.sub-title{font-size:1.3em}
.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:.86em;font-weight:800;line-height:1.3}
.chrome-btn.org{font-size:18px}
.set-head{margin-top:26px;padding-bottom:8px;border-bottom:2px solid var(--line-strong)}
.mine .settings{display:flex;flex-direction:column;gap:28px}
.fr{display:flex;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);overflow:hidden}
.fr-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:84px;padding:10px 10px 10px 14px;border:0;border-radius:0;background:none;color:var(--ink);line-height:1.35;text-align:left;text-decoration:none}
.fr-more{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:72px;padding:0;border:0;border-left:1.5px solid var(--line);border-radius:0;background:var(--muted-row);color:var(--ink);font-size:15px;font-weight:800;line-height:1.3}
.fr-more .ic{width:20px;height:20px}
.pc{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.pc .ic{width:22px;height:22px}
.fr-tx{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.fr-nm{font-size:.86em;font-weight:800;line-height:1.35}
.fr-mt{font-size:.68em;font-weight:500;line-height:1.45;color:var(--ink2)}
.fr-mt b{font-weight:800;color:var(--accent-text)}
.new{display:inline-block;margin-right:4px;padding:0 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:800}
.hint{font-size:.68em;font-weight:500;line-height:1.5;color:var(--ink2)}
.btn.two-line{flex-direction:column;align-items:flex-start;gap:0;width:100%;min-height:76px;padding:8px 18px;border-radius:14px;text-align:left}
.tl-1{font-size:.86em;font-weight:800}
.tl-2{font-size:.68em;font-weight:500;color:var(--ink2)}
.empty-box{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:2px dashed var(--line-strong);border-radius:16px;background:var(--muted-row);line-height:1.5}
.eb-h{font-size:.9em;font-weight:800}
.eb-b{font-size:.74em;font-weight:500;color:var(--ink2)}
.sr{display:flex;align-items:center;gap:12px;min-height:80px;padding:8px 8px 8px 18px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);line-height:1.35}
.add{display:flex;align-items:center;gap:6px;flex:none;min-height:60px;padding:0 14px;border:2px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);font-size:.72em;font-weight:800}
.add .ic{width:20px;height:20px}
.add.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.inbox{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:3px solid var(--accent);border-radius:16px;background:var(--accent-soft)}
.inbox-h{font-size:1em;font-weight:800;line-height:1.35}
.inbox-sub{font-size:.74em;font-weight:500;color:var(--ink2)}
.inbox-list{display:flex;flex-direction:column;gap:4px;margin:0;padding-left:1.1em;font-size:.8em;line-height:1.5}
.linkbox{padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-size:16px;line-height:1.5;word-break:break-all;user-select:all}
/* 整理 */
.me-card{display:flex;flex-direction:column;gap:10px;padding:12px 12px 12px 16px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);line-height:1.35}
.me-card.confirm{padding:11px 11px 11px 15px;border:3px solid var(--accent)}
.me-hd{display:flex;align-items:center;gap:12px}
.me-no{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--skel);font-size:.72em;font-weight:800}
.me-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.me-acts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.me-a{display:flex;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:0 6px;border:2px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);font-size:.72em;font-weight:800}
.me-a .ic{width:20px;height:20px}
.me-a.danger{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.me-ask{font-size:.8em;font-weight:800;color:var(--accent-text)}

/* ---- Weather (Markham, Environment Canada) ---- */
.wx{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.wx-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.wx-place{font-size:.85em;font-weight:800}
.wx-now{display:flex;align-items:center;gap:8px}
.wx-ic{width:30px;height:30px}
.wx-temp{font-size:1.3em;font-weight:800;line-height:1.2}
.wx-text{font-size:.85em;font-weight:600}
.wx-warn{padding:10px 12px;border:2px solid var(--accent);border-radius:12px;color:var(--accent-text);font-size:.85em;font-weight:800;line-height:1.5}
.wx-ps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.wx-p{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-name{font-size:.74em;font-weight:700;color:var(--ink2)}
.wx-row{display:flex;align-items:center;gap:4px}
.wx-row .wx-ic{width:24px;height:24px}
.wx-t{font-size:.8em;font-weight:800;white-space:nowrap}
.wx-d{font-size:.7em;font-weight:500;line-height:1.45}
.wx-credit{font-size:.62em;font-weight:500;color:var(--ink2)}
.wx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.wx-btn{font-size:.72em}
.wx-btn .ic{width:22px;height:22px}
.wx-msg{font-size:.76em;font-weight:700;line-height:1.5;color:var(--ink2)}
.live-news .card h3{font-size:1.05em}

/* ---- First run (px: shown before a text size is chosen) ---- */
.first{display:flex;flex-direction:column;justify-content:center;gap:40px;max-width:520px;min-height:100vh;margin:0 auto;padding:40px 24px}
.brand{display:flex;flex-direction:column;align-items:center;gap:18px}
.appicon{display:flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:24px;background:var(--accent);color:var(--accent-ink);font-size:38px;font-weight:800;letter-spacing:.02em;line-height:1}
.wordmark.lg{gap:10px}
.wordmark.lg .wm-zh{font-size:34px}
.wordmark.lg .wm-dot{width:9px;height:9px}
.wordmark.lg .wm-en{font-size:18px}
.first-btns{display:flex;flex-direction:column;gap:16px}
.lang-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:128px;padding:16px;border:3px solid var(--line-strong);border-radius:20px;background:var(--card);color:var(--ink)}
.lb-label{font-size:40px;font-weight:800;line-height:1.3}
.lb-sub{font-size:20px;font-weight:500;color:var(--ink2)}

/* ---- TV box (>= 1280 px; mocks at 1920 x 1080, base 32 px set by app.js) ---- */
@media (min-width:1280px){
  :focus-visible{outline-width:8px;outline-offset:6px}
  .phone-only{display:none !important}
  span.tv-only{display:inline}
  body.v-today{overflow:hidden}
  body:not(.v-first){padding-bottom:0}

  .today-grid{display:grid;grid-template-columns:640px minmax(0,1fr);gap:0;max-width:none;height:100vh;padding:0}
  .rail>*,.feed>*{order:0}
  .rail{display:flex;flex-direction:column;gap:28px;padding:64px 56px 48px 72px;border-right:2px solid var(--line);overflow-y:auto}
  .feed{display:flex;flex-direction:column;gap:22px;padding:64px 80px 64px 72px;overflow-y:auto}
  .feed>*{max-width:1060px}
  .tv-brand{display:flex;align-items:center;gap:18px}
  .appicon.sm{width:84px;height:84px;border-radius:20px;font-size:30px}
  .tv-brand .wm-en{font-size:22px;letter-spacing:.16em}
  .rail .date{font-size:30px}
  .rail .title{font-size:64px;line-height:1.3}
  .play-main{min-height:150px;gap:24px;padding:20px 28px;border-radius:24px}
  .play-dot{width:92px;height:92px}
  .play-dot .ic{width:40px;height:40px}
  .play-label{font-size:42px;line-height:1.3}
  .play-sub{font-size:28px}
  body.has-bar:not(.v-first){padding-bottom:180px}
  .pbar{left:72px;right:72px;bottom:32px;max-width:none;gap:24px;padding:16px 16px 16px 32px;border-radius:24px}
  .pbar.in-rail{position:static;margin:0;padding:20px 20px 20px 28px}
  .pbar-status{font-size:26px}
  .pbar-title{font-size:34px}
  .pbar.in-rail .pbar-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pbar .live-dot{width:16px;height:16px}
  .pbar-btn{width:150px;height:104px;border-radius:18px;font-size:26px}
  .pbar-btn .ic{width:36px;height:36px}
  .pbar :focus-visible{outline-width:8px}
  .fullplayer .segs{gap:8px}
  .fullplayer .seg{height:14px;border-radius:7px}
  .fp-ctl{max-width:1100px;gap:24px}
  .fp-btn{min-height:120px;border-width:3px;border-radius:20px}
  .fp-btn .ic{width:36px;height:36px}
  .fp-btn.main .ic{width:44px;height:44px}
  .rail .ctl{gap:16px}
  .rail .ctl-label{font-size:28px}
  .rail .ctl-row{gap:12px}
  .rail .opt{min-height:72px;border-width:3px;border-radius:14px;font-size:28px;font-weight:800}
  .rail .sizectl .opt{min-height:80px}
  .rail .opt.rg{padding:0 18px}
  .tv-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .tv-nav .btn{min-height:96px;border-width:3px;border-radius:18px;font-size:34px;font-weight:800}
  .tv-nav .btn.sel{border-color:var(--ink);background:var(--ink);color:var(--bg)}
  .remote{display:block;margin-top:auto;font-size:24px;font-weight:600;color:var(--ink2)}
  .sz0{font-size:26px}.sz1{font-size:32px}.sz2{font-size:38px}

  .ep{gap:22px;margin-top:0}
  .src{column-gap:16px;padding-bottom:10px;border-bottom-width:3px}
  .swatch{width:20px;height:20px;border-radius:4px}
  .src-name{font-size:1.0625em}
  .src-show{font-size:.875em}
  .card{padding:26px 32px;border-width:2px;border-radius:22px}
  .today-grid{padding-top:0}
  .rail .today-head .date{font-size:30px}
  .rail .today-head .title{font-size:64px;line-height:1.3}
  .wx-chip{gap:12px;min-height:80px;font-size:30px}
  .wx-chip .wx-ic{width:44px;height:44px}
  .rail .wx-warn{font-size:26px}
  .tap-note{font-size:.75em}
  .row{gap:24px;padding:24px 32px;border-width:2px;border-radius:22px}
  .row.now{padding:22px 30px;border-width:4px}
  .row-h{font-size:1.25em;line-height:1.4}
  .row-time{font-size:.75em}
  .row>.ic{width:36px;height:36px}
  .card.now{padding:24px 30px;border-width:4px}
  .card-head{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px}
  .card h3{font-size:1.25em;line-height:1.4}
  .pill{padding:2px 16px;font-size:.75em}
  .meta{font-size:.75em}
  .card-actions .btn{flex:0 1 auto;min-height:72px;padding:0 28px;border-width:3px;font-size:.75em}

  /* Story (and Past days / Settings, which follow the TV Story layout) */
  .topbar{padding:56px 72px 0;border-bottom:0}
  .chrome-btn.back{gap:8px;min-height:88px;padding:0 34px 0 22px;border-width:3px;border-radius:18px;font-size:34px;font-weight:800}
  .chrome-btn.back .ic{width:38px;height:38px}
  .pos{font-size:30px}
  .page{gap:24px;max-width:1544px;margin:0;padding:36px 72px 56px}
  .story-page .src-name{font-size:1em}
  .story-h{font-size:2em;line-height:1.35}
  .story-s{font-size:1.3125em;line-height:1.7}
  .story-grid{display:flex;flex-wrap:wrap;gap:24px;margin-top:12px}
  .story-grid .btn{width:auto;min-height:104px;padding:0 40px;border-width:3px;border-radius:20px;font-size:34px;font-weight:800}
  .story-grid .btn-accent{font-size:36px}
  .story-grid .ic{width:34px;height:34px}
  .story-grid .prev{display:none}
  .story-grid .ext{flex-basis:100%;max-width:1240px;padding:20px 32px;border-width:2px;border-radius:20px}
  .note-box{order:9;flex-basis:100%;margin:12px 0 0;padding:0;border:0;background:none;font-size:.8125em}
  .langrow{min-height:96px;padding:12px 28px}
  .btn-primary,.ctl-row.tall .opt{min-height:88px;border-width:3px}
  .settings .opt:not(.sz){border-width:3px;font-size:28px}
  .tv-nav .btn .ic{width:34px;height:34px}
  .wx{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 40px;padding:22px 32px;border-width:2px;border-radius:22px}
  .wx-head{flex-direction:column;align-items:flex-start;gap:4px}
  .wx-ic{width:44px;height:44px}
  .wx-row .wx-ic{width:32px;height:32px}
  .wx-ps{flex:1;gap:24px;padding:0 0 0 36px;border-top:0;border-left:2px solid var(--line)}
  .wx-warn,.wx-msg,.wx-foot{flex-basis:100%}
  .wx-btn{min-height:72px;padding:0 28px;border-width:3px;font-size:.75em}
  .live{max-width:1240px}
  .seg2{max-width:760px;padding:8px;border-radius:20px}
  .seg2-btn{min-height:80px;border-radius:14px}
  .now-dot{width:18px;height:18px}
  .live-row{min-height:104px;padding:12px 28px;border-width:3px}
  .live-row.sel{padding:12px 28px;border-width:4px}
  .group{border-width:3px;border-radius:22px}
  .group-head{padding:20px 28px 10px}
  .group-row{min-height:88px;padding:10px 28px}
  .group-foot{min-height:88px;border-top-width:3px}
  .group-foot .ic{width:32px;height:32px}
  .group-item{min-height:104px;padding:12px 28px;border-width:2px}
  .rp-row{gap:24px;min-height:104px;padding:12px 28px 12px 20px;border-width:3px}
  .rp-row.sel{padding:12px 28px 12px 20px;border-width:4px}
  .rp-dot{width:72px;height:72px}
  .rp-dot .ic{width:32px;height:32px}
  .day-head{border-bottom-width:3px}
  .chan{min-height:104px;padding:12px 28px;border-width:3px}
  .chan.sel{padding:12px 28px;border-width:4px}
  .live-dot{width:18px;height:18px}
  .fullplayer .btn-audio,.fullplayer a.btn{min-height:96px;border-width:3px;border-radius:18px;font-size:34px}
  .live-slot.screen{max-width:1240px}
  .first{max-width:760px}
  .lang-big{min-height:160px}

  /* Round 3 screens: the reading column of 直播, remote-sized rows (tiles stay two columns) */
  .catch,.mine{max-width:1240px}
  .catch,.mine,.search-page{gap:20px}
  .tile{min-height:150px;padding:18px 24px;border-width:3px;border-radius:22px}
  .tile.now,.tile.pick.on{padding:17px 23px;border-width:4px}
  .t-star .ic,.p-ck .ic{width:28px;height:28px}
  .srch,.field,.fav-btn,.btn.two-line,.news-row{min-height:96px;border-width:3px;border-radius:18px}
  .srch .ic,.fav-btn .ic{width:34px;height:34px}
  .fr,.sr,.me-card{border-width:3px;border-radius:20px}
  .fr-main{min-height:112px;padding:14px 20px;gap:20px}
  .fr-more{width:120px;font-size:26px}
  .pc{width:72px;height:72px}
  .pc .ic{width:32px;height:32px}
  .bl-row,.pg-row,.sr-row,.ep-row,.live-row{min-height:104px;padding:12px 28px;border-width:3px}
  .bl-row.sel,.ep-row.sel,.live-row.sel{padding:12px 28px;border-width:4px}
  .pg-row>.ic,.news-row>.ic:last-child,.nudge>.ic:last-child{width:36px;height:36px}
  .ep-row .rp-dot{width:64px;height:64px}
  .part{min-height:104px;padding:12px 24px;border-width:3px}
  .part.sel{padding:12px 24px;border-width:4px}
  .chip,.add,.me-a{min-height:80px;border-width:3px}
  .clr{min-height:72px;padding:0 20px}
  .nudge{min-height:96px;border-width:3px}
  .pager{gap:24px}
  .chrome-btn.org{min-height:80px;font-size:28px}
}