/* 套路直播 · 小红书式生活直播发现站：仅本地系统字体 */
:root {
--coral: #ff355b;
--coral-deep: #e6274b;
--coral-soft: #fff0f3;
--paper: #ffffff;
--warm-white: #fcfbf8;
--warm-mist: #f6f3ee;
--cream: #fff9ee;
--line: #ebe6e1;
--line-strong: #ded6ce;
--ink: #263337;
--ink-soft: #435359;
--muted: #788184;
--sage: #8faa93;
--sage-deep: #56735d;
--sage-soft: #edf4ed;
--apricot: #f5bd70;
--apricot-soft: #fff5e3;
--lilac: #a996d1;
--lilac-soft: #f2effb;
--shadow-xs: 0 3px 10px rgba(53, 42, 35, .04);
--shadow-sm: 0 8px 24px rgba(53, 42, 35, .07);
--shadow-md: 0 15px 36px rgba(53, 42, 35, .10);
--sidebar-width: 220px;
--radius: 16px;
--radius-sm: 12px;
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
scroll-behavior: smooth;
scroll-padding-top: 20px;
}

body {
min-width: 320px;
margin: 0;
padding-left: var(--sidebar-width);
color: var(--ink);
background: var(--warm-white);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

body.is-dialog-open { overflow: hidden; }

img {
display: block;
max-width: 100%;
height: auto;
}

svg { display: block; flex: none; }

a {
color: inherit;
text-decoration: none;
transition: color .2s ease;
}

a:hover { color: var(--coral-deep); }

button,
input,
textarea,
select { color: inherit; font: inherit; }

button { cursor: pointer; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(255, 53, 91, .34);
outline-offset: 3px;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin-top: 0; }

h1, h2, h3, h4 {
color: var(--ink);
font-weight: 750;
line-height: 1.24;
letter-spacing: -.035em;
}

h1 { font-size: 22px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }
p { margin-bottom: 1em; }
ul, ol { padding-left: 1.25em; }

::selection { color: #fff; background: var(--coral); }

.wrap {
width: min(1280px, calc(100% - 48px));
margin-right: auto;
margin-left: auto;
}

#main-content { overflow: clip; }

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }

.kicker {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
color: var(--coral-deep);
font-size: 11px;
font-weight: 800;
line-height: 1.35;
letter-spacing: .11em;
text-transform: uppercase;
}

.kicker::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--coral);
content: "";
}

.pill,
.taglite,
.editor-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 25px;
padding: 4px 9px;
border: 1px solid transparent;
border-radius: 999px;
color: var(--coral-deep);
background: var(--coral-soft);
font-size: 11px;
font-weight: 750;
line-height: 1.1;
white-space: nowrap;
}

.taglite { color: var(--sage-deep); background: var(--sage-soft); }

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
padding: 9px 15px;
border: 1px solid var(--coral);
border-radius: 999px;
color: #fff;
background: var(--coral);
box-shadow: 0 8px 18px rgba(255, 53, 91, .17);
font-size: 13px;
font-weight: 750;
line-height: 1.2;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.btn:hover {
color: #fff;
border-color: var(--coral-deep);
background: var(--coral-deep);
box-shadow: 0 11px 22px rgba(255, 53, 91, .24);
transform: translateY(-1px);
}

.btn svg { width: 17px; height: 17px; }
.btn-orange { color: #fff; background: var(--coral); border-color: var(--coral); }
.btn-ghost,
.btn.btn-ghost {
color: var(--ink-soft);
border-color: var(--line-strong);
background: #fff;
box-shadow: none;
}

.btn-ghost:hover,
.btn.btn-ghost:hover {
color: var(--coral-deep);
border-color: #ffc6d1;
background: var(--coral-soft);
}

/* Desktop: a quiet fixed navigation rail. */
.site-header {
position: fixed;
z-index: 60;
inset: 0 auto 0 0;
width: var(--sidebar-width);
border-right: 1px solid var(--line);
background: rgba(255, 255, 255, .97);
}

.sidebar-inner {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
padding: 24px;
}

.brand,
.site-brand {
display: inline-flex;
align-items: center;
gap: 10px;
width: max-content;
max-width: 100%;
color: var(--ink);
}

.brand:hover,
.site-brand:hover { color: var(--ink); }

.brand-icon { width: 30px; height: 30px; object-fit: contain; }

.brand-text { display: grid; gap: 0; line-height: 1; }
.brand-text strong {
color: var(--ink);
font-size: 18px;
font-weight: 850;
letter-spacing: -.08em;
}

.brand-text small {
margin-top: 4px;
color: var(--muted);
font-size: 11px;
font-weight: 650;
letter-spacing: .04em;
}

.nav-toggle { display: none; }

.header-nav {
display: flex;
flex-direction: column;
gap: 4px;
width: 170px;
margin-top: 40px;
}

.header-nav a {
display: flex;
align-items: center;
gap: 12px;
width: 170px;
min-height: 46px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 12px;
color: var(--ink-soft);
font-size: 14px;
font-weight: 650;
line-height: 1.2;
}

.header-nav a svg,
.header-nav a img {
width: 22px;
height: 22px;
color: var(--sage-deep);
object-fit: contain;
}

.header-nav a:hover { color: var(--coral-deep); background: #fff8f9; }
.header-nav a.active,
.header-nav a.is-active,
.header-nav a[aria-current="page"] { color: var(--coral-deep); background: var(--coral-soft); }
.header-nav a.active svg,
.header-nav a.is-active svg,
.header-nav a[aria-current="page"] svg { color: var(--coral); }

.sidebar-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 170px;
min-height: 39px;
margin-top: auto;
padding: 8px 12px;
border: 1px solid #d9e6da;
border-radius: 12px;
color: var(--sage-deep);
background: var(--sage-soft);
font-size: 13px;
font-weight: 750;
}

.sidebar-action:hover { color: #3f5f48; border-color: var(--sage); background: #e3f0e3; }

/* Search follows the rail and stays at the first right-content line. */
.search-bar {
border-bottom: 1px solid var(--line);
background: rgba(252, 251, 248, .92);
}

.search-bar .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 66px;
}

.search-form {
display: flex;
align-items: center;
flex: 1 1 auto;
max-width: 510px;
min-width: 0;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 10px;
background: #fff;
}

.search-form label {
flex: 0 0 auto;
padding-left: 12px;
color: var(--muted);
font-size: 11px;
white-space: nowrap;
}

.search-form input {
width: 100%;
min-width: 0;
height: 36px;
padding: 0 10px;
border: 0;
outline: 0;
color: var(--ink);
background: transparent;
font-size: 13px;
}

.search-form input::placeholder { color: #a0a6a7; }
.search-form:focus-within { border-color: #ffa0b2; box-shadow: 0 0 0 3px rgba(255, 53, 91, .10); }

.search-form button {
align-self: stretch;
flex: 0 0 auto;
padding: 0 14px;
border: 0;
color: #fff;
background: var(--coral);
font-size: 12px;
font-weight: 750;
}

.search-form button:hover { background: var(--coral-deep); }

.header-note {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--sage-deep);
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}

.header-note::before {
width: 8px;
height: 8px;
border-radius: 3px;
background: var(--apricot);
content: "";
}

.header-note span + span::before { margin-right: 6px; color: #b7bfbb; content: "·"; }

.breadcrumb { border-bottom: 1px solid rgba(235, 230, 225, .78); background: #fff; }
.breadcrumb .wrap {
display: flex;
align-items: center;
gap: 8px;
min-height: 43px;
padding-top: 14px;
padding-bottom: 14px;
color: var(--muted);
font-size: 12px;
line-height: 1.2;
}

.breadcrumb a:last-child { overflow: hidden; color: var(--ink-soft); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb span { color: #b5b0aa; }

/* Blocks and two compact home hero variants used by generated pages. */
.block { padding: 28px 0; }
.block + .block { padding-top: 20px; }
.block-soft { background: linear-gradient(180deg, rgba(242, 239, 251, .58), rgba(252, 251, 248, 0)); }
.block-warm { background: linear-gradient(180deg, rgba(255, 245, 227, .72), rgba(252, 251, 248, 0)); }
.block-green { background: linear-gradient(180deg, rgba(237, 244, 237, .82), rgba(252, 251, 248, 0)); }
.block-blue { background: linear-gradient(180deg, rgba(242, 239, 251, .88), rgba(252, 251, 248, 0)); }

.block-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 17px;
}

.block-head > div { min-width: 0; }
.block-head h2 { margin-bottom: 3px; font-size: 24px; }
.block-head .muted,
.block-head p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.block-head .btn { flex: none; }

.discovery-hero {
padding: 25px 0 14px;
background: radial-gradient(circle at 82% 18%, rgba(245, 189, 112, .20), transparent 20%), radial-gradient(circle at 68% 82%, rgba(169, 150, 209, .12), transparent 24%), var(--warm-white);
}

.discovery-hero .intro-line {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
min-height: 118px;
padding: 20px 0;
}

.discovery-hero .intro-line > div { min-width: 0; }
.discovery-hero h1 { margin-bottom: 1px; color: var(--coral-deep); font-size: 22px; font-weight: 850; letter-spacing: -.065em; }
.discovery-title { margin: 0 0 7px; font-size: 30px; font-weight: 820; }
.discovery-hero p { max-width: 650px; margin-bottom: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.discovery-hero .intro-line > .btn,
.discovery-hero .intro-line > a.btn { flex: none; margin-bottom: 3px; }

.home-hero { padding: 25px 0 16px; background: var(--warm-white); }
.home-hero .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); align-items: center; gap: 28px; min-height: 155px; }
.hero-copy h1 { margin-bottom: 2px; color: var(--coral-deep); font-size: 22px; }
.hero-title { margin-bottom: 7px; font-size: 30px; font-weight: 820; line-height: 1.16; letter-spacing: -.045em; }
.hero-desc { max-width: 670px; margin-bottom: 10px; color: var(--ink-soft); font-size: 14px; }
.hero-media { align-self: stretch; min-height: 130px; overflow: hidden; border-radius: var(--radius); }
.hero-media img { width: 100%; height: 100%; max-height: 190px; object-fit: cover; }
.hero-actions,
.hero-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-actions { margin-top: 12px; }
.hero-metrics { gap: 17px; margin-top: 13px; }
.hero-metric { display: flex; align-items: baseline; gap: 4px; color: var(--muted); font-size: 11px; }
.hero-metric strong { color: var(--ink); font-size: 16px; }
.world-cup { color: #8c6523; background: var(--apricot-soft); }

/* Tabs never wrap, which preserves compact mobile discovery. */
.discovery-toolbar { padding: 8px 0 17px; }
.channel-nav,
.tabs,
.filter-tabs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.channel-nav::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.filter-tabs::-webkit-scrollbar { display: none; }

.tab-button {
flex: 0 0 auto;
min-height: 34px;
padding: 7px 13px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-soft);
background: #fff;
font-size: 13px;
font-weight: 680;
line-height: 1.1;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.tab-button:hover { color: var(--coral-deep); border-color: #ffc3d0; background: #fff8f9; }
.tab-button.active,
.tab-button.is-active,
.tab-button[aria-selected="true"],
.tab-button[aria-pressed="true"] { color: #fff; border-color: var(--coral); background: var(--coral); box-shadow: 0 6px 14px rgba(255, 53, 91, .16); }
.filter-area { min-width: 0; }
.filter-area > .channel-nav,
.filter-area > .tabs { margin-bottom: 16px; }
.filter-area [hidden] { display: none !important; }

/* Editor’s three-image band. */
.editorial-picks,
.editor-picks,
.home-editorial { padding: 8px 0 19px; }

.editor-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; align-items: stretch; }
.editor-card { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink); box-shadow: var(--shadow-xs); }
.editor-card .thumb-button,
.editor-card > a .thumb-button { position: relative; display: block; width: 100%; height: 220px; padding: 0; overflow: hidden; border: 0; border-radius: inherit; background: #e5e1dc; text-align: left; }
.editor-card:first-child .thumb-button { height: 250px; }
.editor-card .thumb-button img,
.editor-card .thumb-button .thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.editor-card:nth-child(2) .thumb-button img,
.editor-card:nth-child(2) .thumb-button .thumb { object-position: 50% 38%; }
.editor-card:nth-child(3) .thumb-button img,
.editor-card:nth-child(3) .thumb-button .thumb { object-position: 50% 30%; }
.editor-card:hover .thumb-button img,
.editor-card:hover .thumb-button .thumb { transform: scale(1.035); }
.editor-card .editor-tag { position: absolute; z-index: 2; top: 12px; left: 12px; color: #fff; background: rgba(38, 51, 55, .72); backdrop-filter: blur(7px); }
.editor-caption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 42px 14px 14px; color: #fff; background: linear-gradient(transparent, rgba(20, 27, 28, .78)); }
.editor-caption h3 { margin: 0 0 3px; color: #fff; font-size: 18px; line-height: 1.28; }
.editor-caption p,
.editor-caption .host-line,
.editor-caption .editor-host { margin: 0; color: rgba(255, 255, 255, .88); font-size: 12px; }

/* Four clear columns keep filtering stable while image ratios provide a living rhythm. */
.live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.live-card { min-width: 0; overflow: hidden; border: 1px solid rgba(235, 230, 225, .92); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-xs); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.live-card:hover { border-color: #f5cbd3; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.live-card .thumb-button,
.room-panel .thumb-button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 13px 13px 0 0; background: #eee8e2; aspect-ratio: 3 / 4; }
.live-card:nth-child(3n + 2) .thumb-button { aspect-ratio: 4 / 5; }
.live-card .thumb-button .thumb,
.live-card .thumb-button img,
.room-panel .thumb-button .thumb,
.room-panel .thumb-button img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s ease; }
.live-card:hover .thumb-button .thumb,
.live-card:hover .thumb-button img,
.room-panel .thumb-button:hover .thumb,
.room-panel .thumb-button:hover img { transform: scale(1.035); }
.live-badge { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 4px 7px; border-radius: 7px; color: #fff; background: rgba(255, 53, 91, .93); box-shadow: 0 2px 8px rgba(101, 30, 43, .16); font-size: 11px; font-weight: 750; line-height: 1.15; }
.play-button { position: absolute; z-index: 3; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding-left: 2px; border-radius: 50%; color: var(--coral); background: rgba(255, 255, 255, .96); box-shadow: 0 8px 22px rgba(30, 28, 25, .18); opacity: 0; transform: translate(-50%, -44%) scale(.88); transition: opacity .2s ease, transform .2s ease; }
.play-button svg { width: 22px; height: 22px; }
.thumb-button:hover .play-button,
.thumb-button:focus-visible .play-button,
.live-card:focus-within .play-button { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.live-info { padding: 8px 8px 9px; }
.live-title { display: -webkit-box; margin: 0 0 4px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 760; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.live-title a:hover { color: var(--coral-deep); }
.meta-line { margin: 0 0 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.host-line { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }

.featured-live-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: stretch; }
.daily-note { position: relative; overflow: hidden; padding: 20px; border: 1px solid #f1ddb9; border-radius: var(--radius); background: var(--cream); }
.daily-note::after { position: absolute; right: -30px; bottom: -36px; width: 130px; height: 130px; border-radius: 50%; background: rgba(245, 189, 112, .25); content: ""; }
.daily-note > * { position: relative; z-index: 1; }
.daily-note h3 { margin-bottom: 8px; font-size: 18px; }
.daily-note p { color: var(--ink-soft); font-size: 13px; }
.daily-note .pill { color: #8d6523; background: #fff0d4; }

.replay-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.replay-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.replay-card .thumb-button,
.replay-card .replay-cover { position: relative; flex: 0 0 82px; width: 82px; height: 62px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: #e8e2db; }
.replay-card img { width: 100%; height: 100%; object-fit: cover; }
.replay-copy { min-width: 0; }
.replay-copy h3 { display: -webkit-box; margin: 0 0 5px; overflow: hidden; font-size: 14px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.time-pill { display: inline-flex; padding: 3px 6px; border-radius: 6px; color: var(--muted); background: var(--warm-mist); font-size: 10px; line-height: 1; }

/* Common lower-density content blocks. */
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.topic-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-xs); }
.topic-card .pill { margin-bottom: 10px; }
.topic-card h3 { margin-bottom: 7px; font-size: 16px; }
.topic-card p { margin-bottom: 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.68; }
.topic-card a:not(.btn) { color: var(--coral-deep); font-size: 13px; font-weight: 720; }
.topic-card a:not(.btn):hover { color: var(--ink); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-xs); }
.panel h3 { margin-bottom: 9px; font-size: 19px; }
.panel p,
.panel li { color: var(--ink-soft); font-size: 14px; }
.panel > img:not(.qrcode):not([class*="qr"]),
.panel picture > img:not(.qrcode) { width: 100%; margin-bottom: 16px; border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; }
.panel img.qrcode,
.panel .qr img,
.qr img { width: 96px; height: 96px; aspect-ratio: 1; object-fit: contain; }
.tagline { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }

/* Inner-page title block. */
.page-hero { padding: 28px 0; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 84% 15%, rgba(143, 170, 147, .14), transparent 21%), linear-gradient(105deg, #fff 0%, var(--sage-soft) 100%); }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 26px; align-items: center; }
.page-intro { min-width: 0; }
.page-intro h1 { margin: 0 0 3px; color: var(--coral-deep); font-size: 22px; }
.page-title,
h2.page-title { margin: 0 0 8px; font-size: 30px; font-weight: 820; }
.page-intro p { max-width: 830px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.page-image { width: 100%; max-height: 220px; border-radius: 14px; object-fit: cover; }

/* Hosts, rank rows, and replay pages. */
.host-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.host-card { display: flex; align-items: flex-start; gap: 13px; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-xs); }
.host-avatar { display: block; flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: var(--lilac-soft); box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.text-avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--sage); font-size: 22px; font-weight: 800; }
.host-copy { min-width: 0; }
.host-copy .pill { margin-bottom: 6px; }
.host-copy h3 { margin: 0 0 5px; font-size: 15px; }
.host-copy p { margin-bottom: 7px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.host-copy .small { color: var(--muted); font-size: 12px; }
.host-copy .btn { min-height: 32px; padding: 7px 10px; font-size: 12px; }
.host-copy > a:not(.btn) { display: inline-block; margin-top: 7px; color: var(--coral-deep); font-size: 12px; font-weight: 700; }
.host-spotlight { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.host-spotlight .portrait-thumbnail,
.host-spotlight .thumb,
.host-spotlight > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.host-spotlight .host-copy,
.host-spotlight .spotlight-copy { padding: 24px; }
.leaderboard { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.leader-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 67px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.leader-row:last-child { border-bottom: 0; }
.leader-row:hover { color: var(--ink); background: #fffafb; }
.rank-no { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; color: var(--coral-deep); background: var(--coral-soft); font-size: 12px; font-weight: 850; line-height: 1; }
.leader-copy { min-width: 0; }
.leader-copy h3 { margin: 0 0 2px; font-size: 15px; }
.leader-copy p { margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.replay-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.replay-layout > .panel { position: sticky; top: 18px; }
.replay-layout .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.replay-layout .live-card:nth-child(3n + 2) .thumb-button { aspect-ratio: 3 / 4; }
.app-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr); gap: 28px; align-items: center; }
.app-shot { width: 100%; height: auto; max-height: 420px; margin: 0 auto; object-fit: contain; }
.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.qr { display: grid; justify-items: start; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; }
.qr img { padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.partner-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.partner { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 54px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: #fff; font-size: 12px; font-weight: 650; text-align: center; }
.partner img { width: 32px; height: 32px; object-fit: contain; }
.partner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.step { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.step > img,
.step picture > img { width: 100%; max-height: 190px; aspect-ratio: 16 / 10; object-fit: cover; }
.step > .pill,
.step > h3,
.step > p,
.step > a { margin-right: 16px; margin-left: 16px; }
.step > .pill { margin-top: 14px; margin-bottom: 8px; }
.step h3 { margin-bottom: 6px; font-size: 17px; }
.step p { color: var(--ink-soft); font-size: 14px; }
.step > a { display: inline-block; margin-bottom: 16px; color: var(--coral-deep); font-size: 13px; font-weight: 720; }

/* Reviews, questions, and tidy long reading. */
.reviews { padding: 0; }
.reviews > h2 { margin-bottom: 13px; font-size: 21px; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.review { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.review-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; color: var(--sage-deep); background: var(--sage-soft); font-size: 13px; font-weight: 800; }
.review > div { min-width: 0; }
.review h3 { margin: 0 0 3px; font-size: 14px; }
.review p { margin: 0 0 5px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.review-time { color: var(--muted); font-size: 11px; }
.faq-list { display: grid; gap: 10px; }
.faq { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.faq summary { position: relative; padding-right: 24px; color: var(--ink); font-size: 15px; font-weight: 730; line-height: 1.5; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; top: 0; right: 2px; color: var(--coral); font-size: 20px; font-weight: 400; content: "+"; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.news-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-xs); }
.news-card > a { display: block; overflow: hidden; }
.news-card > a img,
.news-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .35s ease; }
.news-card:hover > a img { transform: scale(1.025); }
.news-copy { padding: 14px; }
.news-copy .pill { margin-bottom: 8px; }
.news-copy h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.36; }
.news-copy p { display: -webkit-box; margin-bottom: 9px; overflow: hidden; color: var(--ink-soft); font-size: 13px; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.news-copy .meta-line { font-size: 11px; }
.qa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.qa-card { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.qa-card > div { min-width: 0; }
.qa-card h3 { margin: 0 0 6px; font-size: 16px; }
.qa-card p { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: var(--ink-soft); font-size: 13px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.qa-card a:not(h3 a) { color: var(--coral-deep); font-size: 12px; font-weight: 720; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: start; }
.article-main { min-width: 0; }
.article-main > .pill { margin-bottom: 10px; }
.article-main > h1 { margin: 0 0 3px; color: var(--coral-deep); font-size: 22px; }
.article-title,
h2.article-title { margin: 0 0 10px; font-size: 28px; font-weight: 820; line-height: 1.23; }
.article-main > .meta-line { margin-bottom: 20px; }
.article-main > p { max-width: 780px; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }
.article-main > img,
.article-main > figure img,
.article-main > picture img { width: 100%; max-height: 420px; margin: 20px 0; border-radius: var(--radius); object-fit: cover; }
.article-body { max-width: 780px; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }
.article-body h3 { margin: 24px 0 9px; color: var(--ink); font-size: 21px; }
.article-body p { margin-bottom: 15px; }
.article-sidebar { display: grid; gap: 14px; }
.side-box { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.side-box h2 { margin-bottom: 10px; font-size: 17px; }
.side-box p { margin-bottom: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.side-box p:last-child { margin-bottom: 0; }
.side-box a:hover { color: var(--coral-deep); }

/* Room page, playlist, and supporting card styles. */
.room-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.room-panel .thumb-button { height: 100%; min-height: 300px; max-height: 400px; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.room-panel .play-button { width: 46px; height: 46px; }
.room-panel .panel { display: flex; flex-direction: column; justify-content: center; }
.playlist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.playlist-button { padding: 8px 11px; border: 1px solid #ffc5d1; border-radius: 999px; color: var(--coral-deep); background: #fff; font-size: 12px; font-weight: 700; }
.playlist-button:hover { color: #fff; border-color: var(--coral); background: var(--coral); }
.chapter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.chapter { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.chapter .pill { margin-bottom: 9px; }
.chapter h3 { margin-bottom: 7px; font-size: 17px; }
.chapter p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.sport-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.sport-card { position: relative; min-height: 260px; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.sport-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.sport-header { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-height: 260px; padding: 18px; color: #fff; background: linear-gradient(180deg, rgba(28, 35, 36, .08), rgba(25, 32, 33, .82)); }
.sport-header .pill { color: #fff; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.sport-header h3 { margin: auto 0 7px; color: #fff; font-size: 21px; }
.sport-header p { margin-bottom: 15px; color: rgba(255, 255, 255, .9); font-size: 13px; }
.sport-header .btn { min-height: 35px; padding: 8px 12px; }
.contact-list { display: grid; gap: 7px; padding: 0; list-style: none; }
.contact-list li { color: var(--ink-soft); font-size: 14px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.share-buttons button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-soft); background: #fff; font-size: 12px; font-weight: 650; }
.share-buttons button:hover { color: var(--coral-deep); border-color: #ffc6d1; background: var(--coral-soft); }
.home-social { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 20px; align-items: center; }
.home-social .qr img { width: 96px; height: 96px; }

/* Footer follows body padding naturally: never add an extra left margin. */
.site-footer,
footer {
margin-top: 20px;
border-top: 1px solid var(--line);
background: #fff;
}

.footer-inner,
.site-footer .wrap,
footer .wrap {
padding-top: 29px;
padding-bottom: 19px;
}

.footer-columns {
display: grid;
grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
gap: 22px;
}

.footer-brand {
display: flex;
align-items: flex-start;
gap: 10px;
}

.footer-brand .brand-icon,
.footer-brand > img {
width: 42px;
height: 42px;
object-fit: contain;
}

.footer-brand .brand-text strong,
.footer-brand strong {
font-size: 22px;
}

.footer-brand p {
margin: 9px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.65;
}

.footer-column {
min-width: 0;
}

.footer-column h4 {
margin: 0 0 10px;
color: var(--ink);
font-size: 15px;
font-weight: 760;
}

.footer-column ul {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}

.footer-column li,
.footer-column p,
.footer-contact {
overflow-wrap: anywhere;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}

.footer-column a:hover {
color: var(--coral-deep);
}

.footer-qr,
.footer-column .qr-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}

.footer-qr img,
.footer-column .qr img {
width: 90px;
height: 90px;
padding: 4px;
border: 1px solid var(--line);
border-radius: 8px;
object-fit: contain;
}

.footer-note {
margin: 20px 0 0;
padding-top: 13px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
line-height: 1.65;
}

.copyright {
margin: 8px 0 0;
color: #92999a;
font-size: 12px;
}

/* Native dialog video shell */
.video-dialog,
dialog.video-dialog {
width: min(92vw, 820px);
max-width: 820px;
padding: 0;
overflow: visible;
border: 0;
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-md);
}

.video-dialog::backdrop,
dialog.video-dialog::backdrop {
background: rgba(31, 38, 39, .56);
}

.dialog-inner {
position: relative;
padding: 18px;
}

.dialog-inner video {
display: block;
width: 100%;
max-height: 55vh;
border-radius: 11px;
background: #182021;
}

.dialog-title {
margin: 0 32px 12px 0;
font-size: 17px;
}

.dialog-close {
position: absolute;
z-index: 2;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--ink);
background: var(--warm-mist);
font-size: 20px;
line-height: 1;
}

.dialog-close svg {
width: 16px;
height: 16px;
}

.dialog-close:hover {
color: var(--coral-deep);
background: var(--coral-soft);
}

#toast,
.toast {
position: fixed;
z-index: 100;
right: 24px;
bottom: 24px;
display: none;
max-width: min(360px, calc(100vw - 32px));
padding: 10px 14px;
border-radius: 10px;
color: #fff;
background: #33444a;
box-shadow: var(--shadow-md);
font-size: 13px;
line-height: 1.45;
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}

#toast.show,
.toast.show,
#toast.is-visible,
#toast.visible,
.toast.is-visible,
.toast.visible {
display: block;
opacity: 1 !important;
transform: translateY(0);
}

.app-tabbar {
display: none;
}

/* Responsive: the information feed becomes compact, not poster-first. */
@media (max-width: 900px) {
:root {
--sidebar-width: 0px;
}

body {
padding-left: 0;
padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

html {
scroll-padding-top: 104px;
}

.wrap {
width: calc(100% - 24px);
}

.site-header {
position: sticky;
inset: 0 auto auto 0;
width: 100%;
height: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, .97);
}

.sidebar-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
min-height: 56px;
padding: 10px 12px;
}

.brand-icon {
width: 29px;
height: 29px;
}

.brand-text strong {
font-size: 17px;
}

.brand-text small {
font-size: 10px;
}

.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--ink);
background: #fff;
}

.nav-toggle svg {
width: 21px;
height: 21px;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
color: var(--coral-deep);
border-color: #ffc6d1;
background: var(--coral-soft);
}

.header-nav {
position: absolute;
z-index: 3;
top: calc(100% + 1px);
right: 0;
left: 0;
display: none;
width: 100%;
max-height: calc(100vh - 58px);
margin: 0;
padding: 10px 12px 12px;
overflow-y: auto;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, .99);
box-shadow: var(--shadow-sm);
}

.site-header.is-open .header-nav,
.header-nav.is-open,
.header-nav.open,
.nav-toggle[aria-expanded="true"] + .header-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.header-nav a {
width: 100%;
min-height: 42px;
padding: 9px;
font-size: 13px;
}

.header-nav a svg,
.header-nav a img {
width: 19px;
height: 19px;
}

.sidebar-action {
display: none;
}

.search-bar {
background: #fff;
}

.search-bar .wrap {
min-height: 44px;
gap: 0;
}

.search-form {
max-width: none;
}

.search-form label {
min-height: 32px;
border-radius: 8px;
}

.search-form input {
height: 30px;
font-size: 12px;
}

.search-form button {
min-width: 48px;
padding: 0 10px;
font-size: 11px;
}

.header-note {
display: none;
}

.breadcrumb .wrap {
min-height: 36px;
padding-top: 10px;
padding-bottom: 10px;
}

.block {
padding: 24px 0;
}

.block + .block {
padding-top: 16px;
}

.block-head {
align-items: flex-end;
gap: 10px;
margin-bottom: 14px;
}

.block-head h2 {
font-size: 20px;
}

.block-head .muted,
.block-head p {
font-size: 13px;
}

.block-head .btn {
min-height: 33px;
padding: 7px 10px;
font-size: 11px;
}

.discovery-hero {
padding: 12px 0 5px;
}

.discovery-hero .intro-line {
display: block;
min-height: 0;
padding: 10px 0 13px;
}

.discovery-hero .intro-line > .btn,
.discovery-hero .intro-line > a.btn {
display: none;
}

.discovery-hero h1,
.hero-copy h1,
.page-intro h1 {
font-size: 22px;
}

.discovery-title,
.hero-title,
.page-title,
h2.page-title {
font-size: 22px;
}

.discovery-hero p,
.hero-desc {
font-size: 13px;
}

.home-hero {
padding: 13px 0 8px;
}

.home-hero .hero-inner {
display: block;
min-height: 0;
}

.hero-media {
display: none;
}

.hero-actions {
display: none;
}

.hero-metrics {
margin-top: 9px;
}

.hero-metric {
font-size: 10px;
}

.hero-metric strong {
font-size: 14px;
}

.world-cup {
display: none;
}

.discovery-toolbar {
padding: 5px 0 13px;
}

.channel-nav,
.tabs,
.filter-tabs {
gap: 7px;
margin-right: -12px;
padding-right: 12px;
}

.tab-button {
min-height: 31px;
padding: 6px 11px;
font-size: 12px;
}

.filter-area > .channel-nav,
.filter-area > .tabs {
margin-bottom: 12px;
}

.editor-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.editor-card:first-child {
grid-column: span 2;
}

.editor-card .thumb-button,
.editor-card:first-child .thumb-button {
height: 130px;
}

.editor-card:first-child .thumb-button {
height: 150px;
}

.editor-caption {
padding: 35px 10px 10px;
}

.editor-caption h3 {
font-size: 15px;
}

.editor-caption p,
.editor-caption .host-line,
.editor-caption .editor-host {
font-size: 11px;
}

.editor-card .editor-tag {
top: 8px;
left: 8px;
}

.live-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.live-card .thumb-button {
border-radius: 12px 12px 0 0;
}

.live-info {
padding: 7px 7px 8px;
}

.live-title {
margin-bottom: 3px;
font-size: 14px;
}

.meta-line,
.host-line {
font-size: 11px;
}

.play-button {
width: 34px;
height: 34px;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

.play-button svg {
width: 20px;
height: 20px;
}

.live-badge {
top: 7px;
left: 7px;
font-size: 10px;
}

.featured-live-layout {
display: block;
}

.featured-live-layout .daily-note {
display: none;
}

.replay-strip {
display: flex;
gap: 10px;
margin-right: -12px;
padding-right: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}

.replay-strip::-webkit-scrollbar {
display: none;
}

.replay-card {
flex: 0 0 80vw;
scroll-snap-align: start;
}

.topic-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.topic-card {
padding: 14px;
}

.topic-card h3 {
font-size: 15px;
}

.topic-card p {
font-size: 13px;
}

.page-hero {
padding: 19px 0;
}

.page-hero-inner {
grid-template-columns: 1fr;
gap: 16px;
}

.page-title,
h2.page-title {
margin-bottom: 7px;
}

.page-intro p {
font-size: 14px;
}

.page-image {
height: 180px;
max-height: none;
}

.split,
.app-layout,
.room-panel {
grid-template-columns: 1fr;
gap: 14px;
}

.panel {
padding: 17px;
}

.host-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.host-card {
display: block;
padding: 14px;
}

.host-avatar {
margin-bottom: 10px;
}

.host-spotlight {
grid-template-columns: 1fr;
}

.host-spotlight .portrait-thumbnail,
.host-spotlight .thumb,
.host-spotlight > img {
min-height: 200px;
max-height: 260px;
}

.host-spotlight .host-copy,
.host-spotlight .spotlight-copy {
padding: 18px;
}

.leader-row {
grid-template-columns: 31px minmax(0, 1fr);
gap: 10px;
}

.leader-row .pill {
display: none;
}

.replay-layout {
grid-template-columns: 1fr;
gap: 14px;
}

.replay-layout > .panel {
position: static;
}

.replay-layout .live-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-layout .app-shot {
order: 2;
max-height: 360px;
}

.partner-wall {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}

.partner {
min-height: 48px;
padding: 7px 5px;
font-size: 11px;
}

.partner img {
width: 27px;
height: 27px;
}

.step-grid,
.review-grid,
.news-grid,
.qa-list,
.chapter-list {
grid-template-columns: 1fr;
gap: 10px;
}

.step > img,
.step picture > img {
max-height: 190px;
}

.review {
padding: 13px;
}

.news-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-copy {
padding: 11px;
}

.news-copy h3 {
font-size: 14px;
}

.news-copy p {
font-size: 12px;
}

.article-layout {
grid-template-columns: 1fr;
gap: 18px;
}

.article-sidebar {
display: none;
}

.article-main > h1 {
font-size: 22px;
}

.article-title,
h2.article-title {
font-size: 23px;
}

.article-main > p,
.article-body {
font-size: 15px;
line-height: 1.85;
}

.article-body h3 {
margin-top: 21px;
font-size: 19px;
}

.article-main > img,
.article-main > figure img,
.article-main > picture img {
margin: 16px 0;
max-height: 310px;
}

.room-panel .thumb-button {
min-height: 0;
height: auto;
max-height: none;
}

.room-panel .play-button {
width: 40px;
height: 40px;
}

.chapter {
padding: 16px;
}

.sport-grid {
grid-template-columns: 1fr;
gap: 10px;
}

.sport-card,
.sport-header {
min-height: 220px;
}

.home-social {
grid-template-columns: 1fr;
}

.footer-inner,
.site-footer .wrap,
footer .wrap {
padding-top: 24px;
padding-bottom: 13px;
}

.footer-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 15px;
}

.footer-brand {
grid-column: span 2;
}

.footer-qr img,
.footer-column .qr img {
width: 76px;
height: 76px;
}

#toast,
.toast {
right: 12px;
bottom: calc(78px + env(safe-area-inset-bottom));
}

.app-tabbar {
position: fixed;
z-index: 55;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
height: calc(62px + env(safe-area-inset-bottom));
padding: 5px 5px env(safe-area-inset-bottom);
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, .98);
box-shadow: 0 -4px 18px rgba(53, 42, 35, .06);
}

.app-tabbar a,
.app-tabbar button {
display: grid;
place-items: center;
align-content: center;
gap: 2px;
min-width: 0;
padding: 0 3px;
border: 0;
color: var(--muted);
background: transparent;
font-size: 10px;
font-weight: 650;
line-height: 1.1;
}

.app-tabbar svg,
.app-tabbar img {
width: 22px;
height: 22px;
object-fit: contain;
}

.app-tabbar a.active,
.app-tabbar a[aria-current="page"],
.app-tabbar button.active {
color: var(--coral);
}

.app-tabbar .publish,
.app-tabbar [data-publish] {
color: var(--coral-deep);
}

.app-tabbar .publish svg,
.app-tabbar [data-publish] svg {
width: 27px;
height: 27px;
padding: 5px;
border-radius: 10px;
color: #fff;
background: var(--coral);
}

.app-tabbar .publish span,
.app-tabbar [data-publish] span {
display: block;
}

.video-dialog,
dialog.video-dialog {
width: 92vw;
}

.dialog-inner {
padding: 14px;
}
}

@media (max-width: 410px) {
.footer-columns {
grid-template-columns: 1fr;
}

.footer-brand {
grid-column: auto;
}

.footer-qr,
.footer-column .qr-grid {
grid-template-columns: repeat(2, 90px);
}

.host-grid {
grid-template-columns: 1fr 1fr;
}

.host-card {
padding: 12px;
}

.host-avatar {
width: 57px;
height: 57px;
}

.topic-card {
padding: 12px;
}
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}


/* Actual JS state classes: both initial and switched values remain supported. */
.header-nav a.is-active { color: var(--coral-deep); background: var(--coral-soft); }
.tab-button.is-active,
.tab-button[aria-pressed="true"] { color: #fff; border-color: var(--coral); background: var(--coral); }
#toast.is-visible,
#toast.visible,
.toast.is-visible,
.toast.visible { display: block; opacity: 1 !important; transform: translateY(0); }
@media (max-width: 900px) {
.app-tabbar a.is-active,
.app-tabbar button.is-active { color: var(--coral); }
}

/* 公共页脚的实际H2与日期/集中说明合同 */
.footer-column h2 {
margin-bottom: 12px;
font-size: 15px;
letter-spacing: 0;
}
.footer-disclaimer {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
line-height: 1.7;
}
.footer-meta {
margin-bottom: 0;
color: var(--muted);
font-size: 12px;
}

.footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 22px;
}
.footer-logo img {
flex: 0 0 42px;
width: 42px;
height: 42px;
object-fit: contain;
}