/* 体育生 · y5o5o1.cn
小红书式生活编辑册：莓红、鼠尾草、杏黄、暖白 */

:root {
--berry: #d44258;
--berry-deep: #ac3045;
--berry-soft: #f9e5e9;
--sage: #638777;
--sage-deep: #476a5b;
--sage-soft: #e9f0eb;
--apricot: #edba66;
--apricot-deep: #bd8533;
--apricot-soft: #fff1d8;
--warm-white: #fcfaf5;
--paper: #fffefa;
--ink: #342d2b;
--text: #514947;
--muted: #7d7470;
--line: #e8ddd5;
--line-strong: #d9cbc2;
--shadow: 0 10px 28px rgba(94, 66, 57, .08);
--shadow-hover: 0 15px 34px rgba(94, 66, 57, .14);
--radius: 18px;
--radius-sm: 12px;
--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
background: var(--warm-white);
}

body {
min-width: 320px;
margin: 0;
padding: 0;
overflow-x: hidden;
background: var(--warm-white);
color: var(--text);
font-family: var(--font);
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

main,
header,
footer,
section,
article,
aside,
nav,
div {
min-width: 0;
}

img,
svg,
video {
display: block;
max-width: 100%;
}

img {
width: auto;
height: auto;
}

a {
color: inherit;
text-decoration: none;
}

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

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

button {
cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
cursor: not-allowed;
}

:focus-visible {
outline: 3px solid rgba(99, 135, 119, .45);
outline-offset: 3px;
}

h1,
h2,
h3,
h4,
p {
word-break: break-word;
}

h1,
h2,
h3,
h4 {
margin-top: 0;
color: var(--ink);
}

h3 {
line-height: 1.4;
}

p {
margin: 0 0 1em;
}

p:last-child {
margin-bottom: 0;
}

ul,
ol {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

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

.muted {
color: var(--muted);
}

.small {
font-size: 13px;
line-height: 1.65;
}

.date-text {
white-space: nowrap;
}

.kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 9px;
color: var(--sage-deep);
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.4;
text-transform: uppercase;
}

.kicker::before {
width: 20px;
height: 2px;
background: var(--berry);
border-radius: 999px;
content: "";
}

.pill,
.tag,
.date-pill,
.live-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
max-width: 100%;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 12px;
font-weight: 750;
line-height: 1.3;
white-space: nowrap;
}

.pill,
.tag {
background: var(--sage-soft);
border-color: #d2e0d6;
color: var(--sage-deep);
}

.tagline {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
padding: 9px 15px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
text-align: center;
transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.btn:hover {
transform: translateY(-1px);
}

.btn-primary,
.btn-orange {
background: var(--berry);
border-color: var(--berry);
color: #fff;
box-shadow: 0 6px 14px rgba(212, 66, 88, .2);
}

.btn-primary:hover,
.btn-orange:hover {
background: var(--berry-deep);
border-color: var(--berry-deep);
color: #fff;
}

.btn-green {
background: var(--sage);
border-color: var(--sage);
color: #fff;
box-shadow: 0 6px 14px rgba(99, 135, 119, .2);
}

.btn-green:hover {
background: var(--sage-deep);
border-color: var(--sage-deep);
color: #fff;
}

.btn-ghost {
background: rgba(255, 255, 255, .66);
border-color: var(--line-strong);
color: var(--sage-deep);
}

.btn-ghost:hover {
background: var(--sage-soft);
border-color: var(--sage);
color: var(--sage-deep);
}

.panel,
.card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

.panel {
padding: 22px;
}

/* 普通图像保留原比例；视频封面、头像、二维码及 APP 图由专属规则控制。 */
.panel > img:not(.thumb):not(.host-avatar):not(.leader-thumb):not(.app-shot),
.briefing > img:not(.thumb):not(.host-avatar):not(.leader-thumb):not(.app-shot) {
width: 100%;
height: auto;
max-height: 320px;
margin: 0 auto 16px;
object-fit: contain;
}

.breadcrumb {
margin: 0;
padding: 11px 0;
border-bottom: 1px solid rgba(232, 221, 213, .72);
color: var(--muted);
font-size: 13px;
}

.breadcrumb > .wrap {
display: flex;
flex-wrap: wrap;
gap: 5px 9px;
}

.breadcrumb a:hover {
color: var(--berry-deep);
}

.breadcrumb span[aria-hidden="true"] {
color: var(--apricot-deep);
}

/* Header: PC 七项横向导航，搜索置于其下。 */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(252, 250, 245, .93);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(14px);
}

.site-header > .header-main,
.site-header > .wrap.header-main,
.site-header > .wrap.header-inner {
display: flex;
align-items: center;
min-height: 72px;
gap: 18px;
}

.brand,
.brand-link {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
color: var(--ink);
}

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

.brand-logo {
width: 40px;
height: 40px;
flex: 0 0 40px;
object-fit: contain;
}

.brand-text {
display: grid;
gap: 3px;
line-height: 1.05;
}

.brand-name,
.brand-text strong {
color: var(--berry-deep);
font-size: 18px;
font-weight: 800;
letter-spacing: .04em;
}

.brand-tagline,
.brand-text small {
color: var(--muted);
font-size: 10px;
letter-spacing: .05em;
}

.primary-nav,
.main-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
min-width: 0;
margin-left: auto;
}

.primary-nav .nav-link,
.main-nav > a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 7px;
border: 1px solid transparent;
border-radius: 999px;
color: var(--text);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.primary-nav .nav-link:hover,
.primary-nav .nav-link.is-active,
.primary-nav .nav-link.active,
.primary-nav .nav-link[aria-current="page"],
.main-nav > a:hover,
.main-nav > a.is-active,
.main-nav > a.active,
.main-nav > a[aria-current="page"] {
background: var(--berry-soft);
border-color: #edc0c9;
color: var(--berry-deep);
}

.nav-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
object-fit: contain;
}

.menu-toggle {
display: none;
width: 42px;
height: 38px;
padding: 6px 8px;
margin-left: auto;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 10px;
}

.menu-toggle span {
display: block;
width: 20px;
height: 2px;
margin: 4px auto;
background: var(--berry);
border-radius: 999px;
transform-origin: center;
transition: opacity 150ms ease, transform 150ms ease;
}

.menu-toggle.is-active span:nth-child(1),
body.menu-open .menu-toggle span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2),
body.menu-open .menu-toggle span:nth-child(2) {
opacity: 0;
}

.menu-toggle.is-active span:nth-child(3),
body.menu-open .menu-toggle span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}

.search-strip {
background: #f4f0e8;
border-bottom: 1px solid var(--line);
}

.search-strip > .wrap {
padding-top: 8px;
padding-bottom: 8px;
}

.search-form {
display: flex;
align-items: center;
gap: 9px;
max-width: 720px;
margin: 0 auto;
}

.search-form label {
flex: 0 0 auto;
color: var(--sage-deep);
font-size: 13px;
font-weight: 750;
white-space: nowrap;
}

.search-form input {
width: 0;
min-width: 0;
flex: 1 1 0;
height: 36px;
padding: 6px 12px;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--ink);
outline: 0;
}

.search-form input::placeholder {
color: #a89d97;
}

.search-form input:focus {
border-color: var(--sage);
box-shadow: 0 0 0 3px rgba(99, 135, 119, .14);
}

.search-form button {
flex: 0 0 auto;
min-height: 36px;
padding: 6px 16px;
background: var(--sage);
border: 1px solid var(--sage);
border-radius: 999px;
color: #fff;
font-size: 13px;
font-weight: 750;
line-height: 1;
}

.search-form button:hover {
background: var(--sage-deep);
border-color: var(--sage-deep);
}

/* Tabs and channel filters */
.tabs,
.channel-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.tab-button,
.tab-button[data-filter] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 35px;
padding: 6px 13px;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--text);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tab-button:hover,
.tab-button.active,
.tab-button.is-active,
.tab-button[aria-pressed="true"] {
background: var(--sage);
border-color: var(--sage);
color: #fff;
}

.filter-area {
margin-bottom: 22px;
padding: 15px;
background: var(--sage-soft);
border: 1px solid #d3e0d6;
border-radius: var(--radius-sm);
}

.filter-area > .channel-nav,
.filter-area > .channel-nav.tabs {
width: 100%;
margin-bottom: 15px;
}

/* Home: lifestyle editorial hero */
.lifestyle-hero,
.pov-hero {
padding: 38px 0 42px;
background:
radial-gradient(circle at 91% 11%, rgba(237, 186, 102, .35), transparent 22rem),
radial-gradient(circle at 5% 92%, rgba(99, 135, 119, .17), transparent 25rem),
linear-gradient(114deg, #fff7f4 0%, var(--warm-white) 53%, #f1f5ed 100%);
border-bottom: 1px solid var(--line);
}

.hero-editorial {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
gap: clamp(26px, 4vw, 62px);
align-items: center;
}

.hero-copy {
max-width: 530px;
padding: 16px 0;
}

.hero-copy h1,
.intro-line h1 {
margin: 0;
color: var(--berry-deep);
font-size: clamp(36px, 4.2vw, 52px);
font-weight: 850;
letter-spacing: -.055em;
line-height: 1.1;
}

.hero-title,
.pov-title {
margin: 10px 0 13px;
color: var(--ink);
font-size: clamp(23px, 2.35vw, 31px);
font-weight: 760;
letter-spacing: -.03em;
line-height: 1.25;
}

.hero-copy p,
.intro-line p {
max-width: 490px;
margin: 0;
color: var(--text);
font-size: 16px;
line-height: 1.8;
}

.hero-feature,
.thumb-button {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
background: #eadcd3;
border: 0;
border-radius: var(--radius);
color: #fff;
text-align: left;
isolation: isolate;
}

.hero-feature {
min-height: 336px;
box-shadow: var(--shadow);
}

.thumb-button .thumb {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
height: auto;
object-fit: cover;
}

.hero-feature .thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}

.hero-feature::after,
.thumb-button::after {
position: absolute;
inset: auto 0 0;
z-index: 1;
height: 47%;
background: linear-gradient(transparent, rgba(52, 45, 43, .55));
content: "";
pointer-events: none;
}

.thumb-button:hover,
.thumb-button:focus-visible {
box-shadow: 0 0 0 3px rgba(212, 66, 88, .24);
}

.play-button {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: rgba(252, 250, 245, .95);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 50%;
color: var(--berry);
box-shadow: 0 6px 16px rgba(52, 45, 43, .16);
transform: translate(-50%, -50%);
transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.play-button svg {
width: 19px;
height: 19px;
margin-left: 2px;
fill: currentColor;
}

.thumb-button:hover .play-button,
.thumb-button:focus-visible .play-button {
background: var(--berry);
color: #fff;
transform: translate(-50%, -50%) scale(1.07);
}

.live-badge {
position: absolute;
z-index: 3;
top: 11px;
left: 11px;
background: var(--berry);
border-color: rgba(255, 255, 255, .5);
color: #fff;
box-shadow: 0 3px 9px rgba(172, 48, 69, .2);
}

.live-badge::before {
width: 6px;
height: 6px;
margin-right: 5px;
background: #fff;
border-radius: 50%;
content: "";
}

.hero-shortcuts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}

.hero-editorial + .hero-shortcuts {
margin-top: 22px;
}

.quick-link {
display: grid;
grid-template-columns: minmax(0, 1fr) 23px;
grid-template-rows: auto auto;
column-gap: 7px;
align-content: center;
min-height: 77px;
padding: 12px 13px;
background: rgba(255, 254, 250, .84);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 4px 10px rgba(94, 66, 57, .04);
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.quick-link:nth-child(2) {
background: var(--sage-soft);
}

.quick-link:nth-child(3) {
background: var(--apricot-soft);
}

.quick-link:nth-child(4) {
background: var(--berry-soft);
}

.quick-link:hover {
border-color: rgba(212, 66, 88, .4);
box-shadow: var(--shadow);
transform: translateY(-2px);
}

.quick-link > span {
overflow: hidden;
color: var(--ink);
font-size: 15px;
font-weight: 780;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}

.quick-link small {
overflow: hidden;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}

.quick-link svg {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
width: 23px;
height: 23px;
color: var(--berry);
}

/* Legacy intro markup is visually shaped into the same editorial family. */
.pov-hero .intro-line {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: 10px 20px;
margin-bottom: 19px;
}

.pov-hero .intro-line > div {
flex: 1 1 600px;
}

.pov-hero .pov-title {
margin-top: 8px;
}

.pov-hero .intro-line p {
margin-top: 8px;
}

.pov-hero .hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(270px, .8fr);
gap: 16px;
}

.pov-hero .hero-shortcuts {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 0;
}

.pov-hero .quick-link {
min-height: 0;
}

/* Section rhythm and color blocks */
.block {
padding: 54px 0;
}

.block-mint,
.block-green {
background: linear-gradient(180deg, rgba(233, 240, 235, .92), rgba(252, 250, 245, .88));
}

.block-rose {
background: linear-gradient(180deg, rgba(249, 229, 233, .76), rgba(252, 250, 245, .94));
}

.block-apricot,
.block-warm {
background: linear-gradient(180deg, rgba(255, 241, 216, .74), rgba(252, 250, 245, .94));
}

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

.block-head > div {
min-width: 0;
}

.block-head > div > h2,
.section-title {
margin: 0;
color: var(--ink);
font-size: clamp(24px, 2.55vw, 32px);
font-weight: 800;
letter-spacing: -.04em;
line-height: 1.25;
}

.block-head > div > h2 + p {
max-width: 710px;
margin: 7px 0 0;
color: var(--muted);
}

.block-head > .btn {
flex: 0 0 auto;
}

/* Video cards */
.live-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}

.live-card {
min-width: 0;
overflow: hidden;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 4px 13px rgba(94, 66, 57, .05);
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.live-card[hidden] {
display: none;
}

.live-card:hover {
border-color: #e7adb8;
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}

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

.live-card > .thumb-button > .thumb {
width: 100%;
aspect-ratio: 3 / 4;
height: auto;
object-fit: cover;
}

.live-card .play-button {
width: 40px;
height: 40px;
opacity: 0;
}

.live-card:hover .play-button,
.live-card .thumb-button:focus-visible .play-button {
opacity: 1;
}

.live-info {
padding: 12px 13px 14px;
}

.live-title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 780;
line-height: 1.42;
}

.live-title a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.meta-line,
.host-line {
overflow: hidden;
min-width: 0;
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
text-overflow: ellipsis;
white-space: nowrap;
}

.meta-line {
margin-bottom: 3px;
}

.host-line {
color: var(--sage-deep);
}

/* Page hero */
.page-hero {
padding: 40px 0;
background:
radial-gradient(circle at 88% 15%, rgba(237, 186, 102, .28), transparent 19rem),
linear-gradient(112deg, #fff7f6, var(--warm-white) 59%, #edf3ed);
border-bottom: 1px solid var(--line);
}

.page-hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
gap: clamp(24px, 4vw, 54px);
align-items: center;
}

.page-intro {
min-width: 0;
}

.page-intro h1 {
margin: 0 0 8px;
color: var(--berry-deep);
font-size: clamp(32px, 3.7vw, 46px);
font-weight: 840;
letter-spacing: -.05em;
line-height: 1.12;
}

.page-intro .page-title {
margin: 0;
color: var(--ink);
font-size: clamp(23px, 2.35vw, 30px);
font-weight: 760;
letter-spacing: -.03em;
line-height: 1.3;
}

.page-intro .page-title + p,
.page-intro > p {
max-width: 700px;
margin: 12px 0 0;
color: var(--text);
line-height: 1.8;
}

.page-image,
.page-hero-inner > img.page-image {
justify-self: center;
width: 100%;
height: auto;
max-height: 300px;
object-fit: contain;
}

.page-hero-inner > .page-image:only-child,
.page-hero-inner > .page-intro:only-child {
grid-column: 1 / -1;
}

.page-hero-inner > .page-intro:only-child {
max-width: 820px;
}

/* Generic content arrangements */
.section {
padding: 54px 0;
}

.content-grid,
.split,
.contact-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: start;
}

.split > img:not(.thumb),
.split > picture > img:not(.thumb) {
width: 100%;
height: auto;
max-height: 320px;
border-radius: var(--radius);
object-fit: contain;
}

.briefing {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 16px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
}

.briefing > img {
width: 100%;
height: auto;
max-height: 120px;
object-fit: contain;
}

.feature-list {
display: grid;
gap: 10px;
}

.feature-list li,
.panel li:not(.contact-tile) {
position: relative;
padding-left: 19px;
}

.feature-list li::before,
.panel li:not(.contact-tile)::before {
position: absolute;
top: .73em;
left: 0;
width: 7px;
height: 7px;
background: var(--berry);
border-radius: 50%;
content: "";
}

/* Ranking: top three editorial cards, not a podium. */
.popular-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.popular-card {
overflow: hidden;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 4px 13px rgba(94, 66, 57, .05);
}

.popular-card > img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
padding: 10px 10px 0;
object-fit: contain;
}

.popular-copy {
padding: 13px 15px 16px;
}

.popular-copy h3 {
margin: 7px 0 4px;
font-size: 18px;
}

.popular-copy p {
margin-bottom: 8px;
color: var(--muted);
font-size: 13px;
}

.popular-copy strong {
display: block;
margin-bottom: 12px;
color: var(--berry-deep);
font-size: 14px;
}

.leaderboard {
display: grid;
gap: 9px;
}

.leader-row {
display: grid;
grid-template-columns: 34px 52px minmax(0, 1fr) 82px;
gap: 11px;
align-items: center;
min-width: 0;
padding: 10px 12px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
transition: background-color 150ms ease, border-color 150ms ease;
}

.leader-row:hover {
background: #fff7f5;
border-color: #e9bdc5;
}

.rank-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
background: var(--apricot-soft);
border-radius: 9px;
color: var(--apricot-deep);
font-size: 13px;
font-weight: 850;
font-variant-numeric: tabular-nums;
}

.leader-row:nth-child(1) .rank-no {
background: #f6dc94;
color: #765418;
}

.leader-row:nth-child(2) .rank-no {
background: #e7ece8;
color: var(--sage-deep);
}

.leader-row:nth-child(3) .rank-no {
background: var(--berry-soft);
color: var(--berry-deep);
}

.leader-thumb {
width: 52px;
height: 52px;
border: 1px solid #eadbd2;
border-radius: 12px;
object-fit: cover;
}

.leader-copy {
min-width: 0;
}

.leader-copy h3 {
overflow: hidden;
margin: 0 0 2px;
font-size: 15px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}

.leader-copy p {
overflow: hidden;
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}

.rank-score {
display: grid;
justify-items: end;
min-width: 0;
text-align: right;
}

.score-value {
color: var(--berry-deep);
font-size: 16px;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}

.score-label {
color: var(--muted);
font-size: 11px;
line-height: 1.35;
white-space: nowrap;
}

.date-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-bottom: 16px;
}

.date-ticket,
.date-pill {
background: var(--apricot-soft);
border-color: #efd49c;
color: var(--apricot-deep);
}

/* Topics, rooms and chapters */
.topic-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.topic-card {
padding: 19px;
background: var(--paper);
border: 1px solid var(--line);
border-top: 4px solid var(--sage);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(94, 66, 57, .04);
}

.topic-card:nth-child(3n + 2) {
border-top-color: var(--berry);
}

.topic-card:nth-child(3n) {
border-top-color: var(--apricot);
}

.topic-card h3 {
margin: 10px 0 7px;
font-size: 18px;
}

.topic-card p {
color: var(--muted);
font-size: 14px;
}

.topic-card a {
color: var(--sage-deep);
font-size: 14px;
font-weight: 750;
}

.topic-card a:hover {
color: var(--berry-deep);
}

.replay-layout {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 22px;
align-items: start;
}

.replay-layout > aside.panel {
position: sticky;
top: 136px;
}

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

.room-panel {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 24px;
align-items: center;
}

.room-panel .thumb-button .thumb {
aspect-ratio: 4 / 3;
}

.playlist {
display: grid;
gap: 10px;
margin-bottom: 20px;
}

.playlist-button {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-height: 66px;
padding: 8px 13px 8px 8px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 13px;
color: var(--ink);
font-weight: 720;
line-height: 1.4;
text-align: left;
transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.playlist-button::before {
display: grid;
place-items: center;
width: 84px;
align-self: stretch;
background: linear-gradient(135deg, var(--sage-soft), var(--apricot-soft));
border-radius: 9px;
color: var(--berry);
content: "章节";
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
}

.playlist-button:has(img)::before {
display: none;
}

.playlist-button:has(img) {
grid-template-columns: 84px minmax(0, 1fr) auto;
}

.playlist-button img {
width: 84px;
height: 50px;
border-radius: 9px;
object-fit: cover;
}

.playlist-button::after {
color: var(--berry);
content: "播放";
font-size: 12px;
font-weight: 750;
}

.playlist-button:hover,
.playlist-button:focus-visible,
.playlist-button.is-active,
.playlist-button.active {
background: #fff7f5;
border-color: #e7b4be;
transform: translateX(2px);
}

.chapter-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.chapter {
padding: 16px;
background: rgba(255, 254, 250, .7);
border: 1px solid var(--line);
border-radius: 14px;
}

.chapter h3 {
margin: 9px 0 5px;
font-size: 16px;
}

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

/* Hosts */
.host-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.host-card {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 17px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(94, 66, 57, .04);
}

.host-avatar {
width: 78px;
height: 78px;
border: 3px solid var(--berry-soft);
border-radius: 50%;
object-fit: cover;
}

.host-copy {
min-width: 0;
}

.host-copy h3 {
margin: 7px 0 4px;
font-size: 17px;
}

.host-copy p {
color: var(--muted);
font-size: 13px;
}

.host-copy .btn {
min-height: 35px;
padding: 7px 11px;
font-size: 13px;
}

/* APP: preserve the complete 4:3 product visual. */
.app-layout {
display: grid;
grid-template-columns: minmax(480px, 1fr) minmax(0, 1fr);
gap: clamp(26px, 4vw, 54px);
align-items: center;
}

.app-shot,
.app-layout > img.app-shot {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
margin: 0 auto;
object-fit: contain;
}

.app-layout > .panel {
width: 100%;
}

.app-layout .panel ul {
display: grid;
gap: 8px;
margin: 15px 0;
}

[data-app-placeholder],
.app-download-placeholder {
pointer-events: none;
opacity: .62;
filter: saturate(.72);
}

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

.qr {
display: grid;
grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 8px;
background: #fffdf8;
border: 1px solid var(--line);
border-radius: 12px;
}

.qr > img {
width: 104px;
height: 104px;
max-width: 104px;
max-height: 104px;
border: 1px solid #e5d8cd;
border-radius: 8px;
object-fit: cover;
}

.qr > span,
.qr figcaption {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}

/* Contact, partner and review groups */
.contact-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
margin: 16px 0;
}

.contact-tile {
min-width: 0;
padding: 12px;
background: #fffdf8;
border: 1px solid var(--line);
border-radius: 12px;
}

.contact-tile:nth-child(3n + 2) {
background: var(--sage-soft);
}

.contact-tile:nth-child(3n) {
background: var(--apricot-soft);
}

.contact-tile span,
.contact-tile small {
display: block;
color: var(--muted);
font-size: 12px;
}

.contact-tile strong,
.contact-tile a {
display: block;
overflow-wrap: anywhere;
margin-top: 3px;
color: var(--sage-deep);
font-size: 14px;
font-weight: 750;
}

.partner-wall {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.partner-wall a,
.partner-wall div,
.partner {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
color: var(--text);
font-size: 13px;
font-weight: 700;
}

.partner-wall img,
.partner img {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: contain;
}

.partner-wall span,
.partner span {
white-space: nowrap;
}

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

.step {
padding: 12px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(94, 66, 57, .04);
}

.step > img {
width: 100%;
aspect-ratio: 3 / 2;
height: auto;
margin-bottom: 12px;
border-radius: 12px;
background: var(--apricot-soft);
object-fit: contain;
}

.step > .pill {
background: var(--berry-soft);
border-color: #edc1ca;
color: var(--berry-deep);
}

.step h3 {
margin: 8px 0 5px;
font-size: 17px;
}

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

.step > a {
color: var(--sage-deep);
font-size: 13px;
font-weight: 750;
}

.reviews {
margin: 0;
}

.reviews > h2 {
margin: 0 0 15px;
font-size: 22px;
}

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

.review {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 10px;
padding: 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
}

.review-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--berry-soft);
border-radius: 50%;
color: var(--berry-deep);
font-size: 13px;
font-weight: 850;
}

.review:nth-child(3n + 2) .review-avatar {
background: var(--sage-soft);
color: var(--sage-deep);
}

.review:nth-child(3n) .review-avatar {
background: var(--apricot-soft);
color: var(--apricot-deep);
}

.review h3 {
margin: 0 0 3px;
font-size: 14px;
}

.review p {
color: var(--text);
font-size: 13px;
line-height: 1.6;
}

.review-time {
display: block;
margin-top: 5px;
color: var(--muted);
font-size: 11px;
}

.share-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 15px 0;
}

.share-buttons button,
.share-button,
.footer-mcp {
min-height: 34px;
padding: 6px 11px;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--sage-deep);
font-size: 12px;
font-weight: 700;
}

.share-buttons button:hover,
.share-button:hover,
.footer-mcp:hover {
background: var(--sage-soft);
border-color: var(--sage);
}

/* News cards: fixed 3:2 lead media with copy contained in the card. */
.news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.news-card {
display: flex;
min-width: 0;
overflow: hidden;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(94, 66, 57, .04);
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.news-card:hover {
border-color: #e8b9c2;
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}

.news-card > a:first-child {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
flex: 0 0 auto;
overflow: hidden;
background: var(--sage-soft);
}

.news-card > a:first-child img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 220ms ease;
}

.news-card:hover > a:first-child img {
transform: scale(1.025);
}

.news-copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding: 14px 15px 15px;
}

.news-copy h3 {
margin: 9px 0 6px;
font-size: 17px;
line-height: 1.42;
}

.news-copy h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.news-copy > p {
display: -webkit-box;
overflow: hidden;
margin-bottom: 10px;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}

.news-copy .meta-line {
width: 100%;
margin-top: auto;
color: var(--sage-deep);
}

/* Q&A and article reading */
.qa-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.qa-card {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 17px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 15px;
}

.qa-card h3 {
margin: 0 0 6px;
font-size: 17px;
}

.qa-card p {
color: var(--muted);
font-size: 13px;
}

.qa-card a:not(h3 a) {
color: var(--sage-deep);
font-size: 13px;
font-weight: 750;
}

.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 34px;
align-items: start;
}

.article-main {
min-width: 0;
padding: clamp(18px, 3vw, 34px);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

.article-main > h1 {
margin: 11px 0 7px;
color: var(--berry-deep);
font-size: clamp(30px, 3.3vw, 42px);
letter-spacing: -.04em;
line-height: 1.16;
}

.article-title {
margin: 0 0 10px;
font-size: clamp(23px, 2.4vw, 30px);
line-height: 1.34;
}

.article-main > img:not(.thumb):not(.host-avatar):not(.leader-thumb),
.article-main > picture > img:not(.thumb):not(.host-avatar):not(.leader-thumb),
.article-body img {
width: 100%;
height: auto;
max-height: 400px;
margin: 22px auto;
border-radius: 12px;
object-fit: contain;
}

.article-main > p {
font-size: 16px;
line-height: 1.95;
}

.article-body {
margin-top: 22px;
}

.article-body h3 {
margin: 30px 0 9px;
color: var(--sage-deep);
font-size: 20px;
line-height: 1.45;
}

.article-body p {
font-size: 16px;
line-height: 1.95;
}

.article-sidebar {
display: grid;
gap: 14px;
position: sticky;
top: 136px;
}

.side-box {
padding: 17px;
background: rgba(255, 254, 250, .8);
border: 1px solid var(--line);
border-radius: 15px;
}

.side-box h2 {
margin: 0 0 11px;
font-size: 18px;
}

.side-box p {
padding-bottom: 9px;
margin-bottom: 9px;
border-bottom: 1px dashed var(--line);
font-size: 13px;
line-height: 1.55;
}

.side-box p:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}

.side-box a {
color: var(--sage-deep);
}

.faq-list {
display: grid;
gap: 10px;
}

.faq-list details,
.faq {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 13px;
transition: background-color 150ms ease, border-color 150ms ease;
}

.faq-list details[open] {
background: #fff9f7;
border-color: #e8bec6;
}

.faq-list summary {
position: relative;
padding: 14px 44px 14px 16px;
color: var(--ink);
cursor: pointer;
font-weight: 750;
list-style: none;
}

.faq-list summary::-webkit-details-marker {
display: none;
}

.faq-list summary::after {
position: absolute;
top: 11px;
right: 16px;
color: var(--berry);
content: "+";
font-size: 23px;
font-weight: 400;
line-height: 1;
transition: transform 150ms ease;
}

.faq-list details[open] summary::after {
transform: rotate(45deg);
}

.faq-list details > p {
padding: 0 16px 15px;
color: var(--text);
}

/* Footer: new contract and existing aliases. */
.site-footer {
margin-top: 32px;
background: #f1eee7;
border-top: 1px solid var(--line);
color: var(--text);
}

.footer-inner,
.footer-columns {
display: grid;
grid-template-columns: 1.15fr 1.25fr 1fr;
gap: 28px;
padding-top: 38px;
padding-bottom: 30px;
}

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

.footer-brand .logo,
.footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 13px;
color: var(--berry-deep);
font-size: 18px;
font-weight: 820;
}

.footer-brand .logo img,
.footer-logo img {
width: 40px;
height: 40px;
object-fit: contain;
}

.footer-brand > p,
.footer-brand-column > p {
max-width: 340px;
color: var(--muted);
font-size: 13px;
}

.foot-nav h3,
.footer-column h3,
.footer-links h3,
.foot-contact h3 {
margin: 2px 0 12px;
font-size: 15px;
}

.footer-links,
.footer-nav-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px 9px;
}

.footer-links a,
.footer-nav-list a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text);
font-size: 13px;
line-height: 1.45;
}

.footer-links a:hover,
.footer-nav-list a:hover {
color: var(--berry-deep);
}

.foot-contact .contact-tiles,
.footer-contact-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
}

.footer-contact-list li {
min-width: 0;
padding: 8px;
background: rgba(255, 254, 250, .62);
border: 1px solid rgba(217, 203, 194, .75);
border-radius: 10px;
}

.footer-contact-label {
display: block;
color: var(--muted);
font-size: 11px;
}

.footer-contact-value {
display: block;
overflow-wrap: anywhere;
margin-top: 2px;
color: var(--sage-deep);
font-size: 12px;
font-weight: 750;
}

.footer-service-list {
display: grid;
gap: 6px;
margin-bottom: 14px;
}

.footer-service-list a {
color: var(--sage-deep);
font-size: 13px;
font-weight: 700;
}

.footer-qr-grid .qr {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}

.footer-qr-grid .qr > img {
width: 78px;
height: 78px;
}

.footer-disclaimer,
.footer-note {
width: min(1200px, calc(100% - 48px));
padding: 12px 0;
margin: 0 auto;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 12px;
}

.footer-bottom,
.copyright {
border-top: 1px solid var(--line);
}

.footer-bottom > .wrap,
.copyright-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 50px;
}

.footer-bottom p,
.copyright p {
margin: 0;
color: var(--muted);
font-size: 12px;
}

/* Five-item mobile bottom navigation. */
.mobile-tabbar.fixed,
.app-tabbar.fixed {
display: none;
}

/* Toast and local video dialog. */
.toast,
#siteToast {
position: fixed;
z-index: 90;
bottom: 24px;
left: 50%;
max-width: min(420px, calc(100% - 32px));
padding: 10px 15px;
background: var(--ink);
border-radius: 999px;
color: #fff;
font-size: 13px;
line-height: 1.45;
text-align: center;
box-shadow: 0 8px 24px rgba(52, 45, 43, .22);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 12px);
transition: opacity 150ms ease, transform 150ms ease;
}

.toast.is-visible,
#siteToast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}

.video-dialog {
width: min(760px, calc(100% - 32px));
max-width: 760px;
padding: 0;
background: transparent;
border: 0;
}

.video-dialog::backdrop {
background: rgba(52, 45, 43, .52);
backdrop-filter: blur(3px);
}

.video-dialog-body,
.video-dialog-panel {
position: relative;
padding: 24px;
background: var(--warm-white);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: var(--radius);
box-shadow: 0 20px 56px rgba(52, 45, 43, .28);
}

.video-dialog h2 {
padding-right: 58px;
margin: 0 0 14px;
font-size: 21px;
}

.video-stage {
overflow: hidden;
background: #3e3633;
border-radius: 13px;
}

.video-stage video,
.video-dialog video {
width: 100%;
height: auto;
background: #3e3633;
}

.video-dialog p {
margin: 10px 0 0;
color: var(--muted);
font-size: 13px;
}

.dialog-close,
[data-dialog-close] {
position: absolute;
top: 14px;
right: 14px;
min-width: 38px;
min-height: 33px;
padding: 5px 9px;
background: var(--berry-soft);
border: 1px solid #efc4cc;
border-radius: 999px;
color: var(--berry-deep);
font-size: 12px;
font-weight: 750;
}

/* 1024px and below */
@media (max-width: 1024px) {
.primary-nav .nav-link,
.main-nav > a {
padding-right: 5px;
padding-left: 5px;
font-size: 12px;
}

.hero-editorial {
grid-template-columns: minmax(0, .9fr) minmax(330px, 1.05fr);
}

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

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

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

.app-layout {
grid-template-columns: minmax(420px, 1fr) minmax(0, 1fr);
gap: 24px;
}

.footer-inner,
.footer-columns {
grid-template-columns: 1fr 1fr;
}

.footer-brand,
.footer-brand-column {
grid-column: 1 / -1;
}
}

/* Mobile: menu is in normal document flow, never an overlay. */
@media (max-width: 760px) {
body {
padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

.wrap,
.footer-disclaimer,
.footer-note {
width: min(1200px, calc(100% - 28px));
}

.site-header > .header-main,
.site-header > .wrap.header-main,
.site-header > .wrap.header-inner {
min-height: 62px;
flex-wrap: wrap;
gap: 10px;
}

.brand-logo {
width: 36px;
height: 36px;
flex-basis: 36px;
}

.brand-name,
.brand-text strong {
font-size: 16px;
}

.menu-toggle {
display: block;
}

.primary-nav,
.main-nav {
display: none;
width: 100%;
flex: 0 0 100%;
flex-wrap: wrap;
justify-content: flex-start;
gap: 6px;
padding: 0 0 11px;
margin: 0;
border-top: 1px solid var(--line);
}

.primary-nav.is-open,
.main-nav.is-open {
display: flex;
}

.primary-nav .nav-link,
.main-nav > a {
flex: 0 1 auto;
padding: 7px 9px;
font-size: 13px;
}

.search-strip > .wrap {
padding-top: 7px;
padding-bottom: 7px;
}

.search-form {
gap: 7px;
}

.search-form label {
font-size: 12px;
}

.search-form input {
height: 34px;
}

.search-form button {
min-height: 34px;
padding-right: 12px;
padding-left: 12px;
}

.breadcrumb {
padding: 8px 0;
font-size: 12px;
}

.lifestyle-hero,
.pov-hero {
padding: 25px 0 28px;
}

.hero-editorial,
.pov-hero .hero-grid {
grid-template-columns: 1fr;
gap: 18px;
}

.hero-copy {
padding: 0;
}

.hero-copy h1,
.intro-line h1 {
font-size: clamp(34px, 10vw, 42px);
}

.hero-title,
.pov-title {
font-size: 23px;
}

.hero-copy p,
.intro-line p {
font-size: 15px;
}

.hero-feature {
min-height: 250px;
}

.hero-shortcuts,
.hero-editorial + .hero-shortcuts,
.pov-hero .hero-shortcuts {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 7px;
margin-top: 12px;
}

.quick-link {
grid-template-columns: minmax(0, auto) minmax(0, 1fr) 20px;
grid-template-rows: 1fr;
min-height: 42px;
padding: 8px 10px;
}

.quick-link > span {
font-size: 14px;
}

.quick-link small {
align-self: center;
font-size: 11px;
text-align: right;
}

.quick-link svg {
grid-column: 3;
grid-row: 1;
width: 20px;
height: 20px;
}

.pov-hero .intro-line {
align-items: start;
margin-bottom: 15px;
}

.pov-hero .date-text {
font-size: 11px;
}

.block,
.section {
padding: 38px 0;
}

.block-head {
align-items: flex-start;
flex-direction: column;
gap: 11px;
margin-bottom: 18px;
}

.block-head > div > h2,
.section-title {
font-size: 24px;
}

.block-head > .btn {
min-height: 35px;
padding: 7px 12px;
}

.tabs,
.channel-nav {
gap: 7px;
}

.tab-button,
.tab-button[data-filter] {
min-height: 33px;
padding: 6px 10px;
font-size: 12px;
}

.filter-area {
padding: 12px;
}

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

.live-info {
padding: 10px;
}

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

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

.live-card .play-button {
opacity: .92;
}

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

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

.page-intro h1 {
font-size: 34px;
}

.page-intro .page-title {
font-size: 23px;
}

.page-image,
.page-hero-inner > img.page-image {
max-height: 250px;
}

.content-grid,
.split,
.contact-layout,
.room-panel {
grid-template-columns: 1fr;
gap: 16px;
}

.panel {
padding: 17px;
}

.briefing {
grid-template-columns: 76px minmax(0, 1fr);
gap: 12px;
padding: 13px;
}

.popular-grid,
.topic-grid,
.host-grid,
.step-grid,
.chapter-list,
.review-grid {
grid-template-columns: 1fr;
gap: 12px;
}

.popular-card > img {
max-height: none;
}

.leader-row {
grid-template-columns: 30px 46px minmax(0, 1fr) 67px;
gap: 8px;
padding: 9px;
}

.rank-no {
width: 27px;
height: 27px;
font-size: 12px;
}

.leader-thumb {
width: 46px;
height: 46px;
}

.leader-copy h3 {
font-size: 13px;
}

.leader-copy p {
font-size: 11px;
}

.score-value {
font-size: 13px;
}

.score-label {
font-size: 10px;
}

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

.replay-layout > aside.panel,
.article-sidebar {
position: static;
}

.playlist-button {
grid-template-columns: 70px minmax(0, 1fr) auto;
gap: 9px;
min-height: 58px;
padding-right: 9px;
font-size: 13px;
}

.playlist-button::before {
width: 70px;
}

.playlist-button img {
width: 70px;
height: 42px;
}

.host-card {
grid-template-columns: 70px minmax(0, 1fr);
gap: 12px;
padding: 14px;
}

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

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

.app-shot,
.app-layout > img.app-shot {
width: 100%;
min-width: 0;
}

.qr-grid {
gap: 8px;
}

.qr {
grid-template-columns: 76px minmax(0, 1fr);
gap: 8px;
padding: 7px;
}

.qr > img {
width: 76px;
height: 76px;
max-width: 76px;
max-height: 76px;
}

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

.contact-tile {
padding: 10px;
}

.contact-tile strong,
.contact-tile a {
font-size: 12px;
}

.partner-wall {
gap: 7px;
}

.partner-wall a,
.partner-wall div,
.partner {
padding: 7px 8px;
font-size: 12px;
}

.partner-wall img,
.partner img {
width: 28px;
height: 28px;
}

.news-grid {
grid-template-columns: 1fr;
gap: 11px;
}

.news-card {
display: grid;
grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
align-items: stretch;
}

.news-card > a:first-child {
width: 100%;
height: 100%;
min-height: 126px;
aspect-ratio: auto;
}

.news-copy {
min-height: 0;
padding: 11px 12px;
}

.news-copy .pill {
min-height: 22px;
padding: 3px 7px;
font-size: 10px;
}

.news-copy h3 {
margin: 5px 0 3px;
font-size: 15px;
}

.news-copy > p {
margin-bottom: 5px;
font-size: 12px;
line-height: 1.5;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.news-copy .meta-line {
font-size: 10px;
}

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

.qa-card {
padding: 14px;
}

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

.article-main {
padding: 17px;
}

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

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

.footer-inner,
.footer-columns {
grid-template-columns: 1fr;
gap: 23px;
padding-top: 30px;
padding-bottom: 25px;
}

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

.footer-links,
.footer-nav-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.foot-contact .contact-tiles,
.footer-contact-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-bottom > .wrap,
.copyright-inner {
align-items: flex-start;
flex-direction: column;
justify-content: center;
min-height: 54px;
}

.mobile-tabbar.fixed,
.app-tabbar.fixed {
position: fixed;
z-index: 60;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
min-height: calc(57px + env(safe-area-inset-bottom));
padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
background: rgba(255, 254, 250, .96);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 15px rgba(94, 66, 57, .07);
backdrop-filter: blur(12px);
}

.mobile-tabbar.fixed .tab-item,
.app-tabbar.fixed a {
display: grid;
place-items: center;
gap: 1px;
min-width: 0;
padding: 1px;
color: var(--muted);
font-size: 10px;
font-weight: 700;
line-height: 1.25;
}

.mobile-tabbar.fixed .tab-item.is-active,
.mobile-tabbar.fixed .tab-item[aria-current="page"],
.app-tabbar.fixed a.is-active,
.app-tabbar.fixed a[aria-current="page"] {
color: var(--berry);
}

.mobile-tabbar.fixed svg,
.app-tabbar.fixed svg {
width: 21px;
height: 21px;
}

.toast,
#siteToast {
bottom: calc(74px + env(safe-area-inset-bottom));
}

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

.video-dialog-body,
.video-dialog-panel {
padding: 18px;
}
}

@media (max-width: 390px) {
.wrap,
.footer-disclaimer,
.footer-note {
width: calc(100% - 24px);
}

.brand-tagline,
.brand-text small {
display: none;
}

.quick-link {
grid-template-columns: minmax(0, auto) minmax(0, 1fr) 18px;
padding-right: 8px;
padding-left: 8px;
}

.quick-link > span {
font-size: 13px;
}

.quick-link small {
font-size: 10px;
}

.quick-link svg {
width: 18px;
height: 18px;
}

.live-grid {
gap: 8px;
}

.live-info {
padding: 9px;
}

.leader-row {
grid-template-columns: 26px 42px minmax(0, 1fr) 60px;
gap: 6px;
padding: 8px;
}

.rank-no {
width: 25px;
height: 25px;
}

.leader-thumb {
width: 42px;
height: 42px;
}

.score-value {
font-size: 12px;
}

.score-label {
font-size: 9px;
}

.contact-tile {
padding: 8px;
}

.contact-tile span {
font-size: 11px;
}

.qr {
grid-template-columns: 64px minmax(0, 1fr);
}

.qr > img {
width: 64px;
height: 64px;
max-width: 64px;
max-height: 64px;
}
}

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

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

/* 公共组件真实合同：品牌链接容器与40px图形分离。 */
.header-main .brand-link{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;width:auto;height:auto;white-space:nowrap;}
.header-main .brand-logo{display:block;width:40px;height:40px;flex:0 0 40px;object-fit:contain;}
.header-main .brand-copy{display:grid;gap:4px;white-space:nowrap;}
.header-main .brand-name{white-space:nowrap;}
.header-main .brand-tagline{white-space:nowrap;}
.footer-brand .logo{width:40px;height:40px;flex:0 0 40px;object-fit:contain;}
.footer-brand-name,.footer-title{font-weight:800;font-size:17px;color:var(--berry-deep);margin:0 0 12px;}
.footer-update{white-space:nowrap;}
.video-dialog-heading{padding-right:54px;}
@media(max-width:768px){
.header-main .brand-link{gap:8px;}
.header-main .brand-name{font-size:18px;line-height:1.2;}
.header-main .brand-tagline{font-size:10px;line-height:1.3;}
.search-form label{flex:0 0 auto;white-space:nowrap;font-size:12px;}
.search-form input{min-width:0;flex:1 1 auto;}
.search-form button{flex:0 0 auto;white-space:nowrap;}
.lifestyle-hero{padding:18px 0;}
.hero-editorial{gap:12px;}
.hero-copy h1{font-size:30px;line-height:1.18;margin:6px 0;}
.hero-copy .hero-title{font-size:22px;line-height:1.3;margin:4px 0 8px;}
.hero-copy .hero-title br{display:none;}
.hero-copy>p{font-size:13px;line-height:1.6;margin:0 0 8px;}
.hero-copy .kicker{font-size:11px;}
.hero-copy .tagline{gap:4px;}
.hero-copy .pill{font-size:10px;min-height:22px;padding:3px 7px;}
.hero-editorial .hero-feature{height:178px;min-height:0;aspect-ratio:auto;background:var(--sage-soft);}
.hero-editorial .hero-feature .thumb{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;}
.hero-shortcuts{margin-top:10px;gap:5px;}
.hero-shortcuts .quick-link{min-height:34px;padding:7px 9px;}
.block{padding:28px 0;}
.block-head{align-items:flex-start;gap:10px;margin-bottom:14px;}
.block-head h2{font-size:21px;line-height:1.35;}
.block-head .btn{min-height:32px;white-space:nowrap;padding:7px 10px;font-size:11px;}
.footer-contact .contact-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}

.footer-bottom.wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding-top:14px;padding-bottom:14px;}
.footer-bottom.wrap p{margin:0;}
@media(max-width:768px){.footer-bottom.wrap{flex-wrap:wrap;justify-content:flex-start;gap:7px 14px;min-height:0;}.footer-bottom-logo{display:none;}.footer-bottom.wrap p{font-size:11px;}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr));}}