/* =========================================================
汉语之桥 · Es un Chino — Design System
Rice paper, ink, seal-red, jade. Staircase as structure.
(Reverted from a cooler blue/white palette back to the
original warm browns/neutrals/creams, per user request.)
========================================================= */
/* Google Fonts are loaded via +
in each page's (not via @import here, which would block this stylesheet
from parsing until the font CSS also finished loading -- slower). If you add
a new page template, make sure it includes those two tags before this
stylesheet, or text will render in the browser's fallback font until the
Google Fonts request happens to resolve separately. */
:root{
--paper: #F2ECDD;
--paper-dim: #E9E1CC;
--ink: #2A2420;
--ink-soft: #55493d;
--seal: #B23A2E;
--seal-dark: #8f2c22;
--jade: #4C7A6B;
--jade-dark: #375a4f;
--brass: #B8863B;
--line: rgba(42,36,32,0.14);
--card: #FBF8EF;
--radius: 4px;
--shadow: 0 1px 0 rgba(42,36,32,0.06);
--serif: 'Lora', 'Noto Serif SC', serif;
--sans: 'Inter', 'Noto Sans SC', sans-serif;
--zh-serif: 'Noto Serif SC', serif;
--zh-sans: 'Noto Sans SC', sans-serif;
}
/* =========================================================
2026 visual layer — calm study canvas + lively controls
Additive by design: this layer intentionally leaves the approved lesson,
game, audio, footer and mobile layout contracts untouched.
========================================================= */
:root{
/* Canonical HSK palette. These twelve values are the only authoritative
level colors; every level surface below references these custom properties. */
--hsk1-main:#1f8a70;
--hsk1-secondary:#e3f3ed;
--hsk2-main:#1e99a8;
--hsk2-secondary:#e3f1f3;
--hsk3-main:#d79b24;
--hsk3-secondary:#f3eee3;
--hsk4-main:#ea7a37;
--hsk4-secondary:#f3e9e3;
--hsk5-main:#e15645;
--hsk5-secondary:#f3e9e3;
--hsk6-main:#76507c;
--hsk6-secondary:#efe3f3;
--paper:#F7F5EF;
--paper-dim:#ECEFE9;
--card:#FFFDF9;
--ink:#263330;
--ink-soft:#64736F;
--seal:#F06449;
--seal-dark:#D94E36;
--jade:var(--hsk1-main);
--jade-dark:#174C46;
--brass:#F2B84B;
--pinyin:#C85D32;
--line:rgba(23,76,70,.14);
--radius:12px;
--shadow:0 8px 28px rgba(23,76,70,.07);
--hsk-accent:var(--hsk1-main);
--hsk-accent-soft:var(--hsk1-secondary);
--hsk-on-main:#fff;
}
body{background:var(--paper);}
.utility-bar{background:#113B37;}
.utility-bar a{color:rgba(255,255,255,.72);}
.utility-bar a:hover,.utility-bar a.active{color:#FFF;}
.topnav{background:rgba(255,253,249,.94); border-bottom-color:rgba(23,76,70,.12);}
.btn{border-radius:999px; background:var(--jade); border-color:var(--jade); color:#fff; box-shadow:0 5px 14px rgba(31,138,112,.18);}
.btn:hover{background:var(--jade-dark); border-color:var(--jade-dark); color:#fff;}
.btn.coral{background:var(--seal); border-color:var(--seal);}
.btn.coral:hover{background:var(--seal-dark); border-color:var(--seal-dark);}
.btn.ghost{background:transparent; color:var(--jade-dark); box-shadow:none;}
.card,.lesson-fold,.game-card{box-shadow:var(--shadow);}
/* A level keeps its identity everywhere without becoming a different site. */
.hsk-level-1{--hsk-accent:var(--hsk1-main);--hsk-accent-soft:var(--hsk1-secondary);--hsk-on-main:#fff;}
.hsk-level-2{--hsk-accent:var(--hsk2-main);--hsk-accent-soft:var(--hsk2-secondary);--hsk-on-main:#fff;}
.hsk-level-3{--hsk-accent:var(--hsk3-main);--hsk-accent-soft:var(--hsk3-secondary);--hsk-on-main:#2f2f2b;}
.hsk-level-4{--hsk-accent:var(--hsk4-main);--hsk-accent-soft:var(--hsk4-secondary);--hsk-on-main:#2f241e;}
.hsk-level-5{--hsk-accent:var(--hsk5-main);--hsk-accent-soft:var(--hsk5-secondary);--hsk-on-main:#1c1010;}
.hsk-level-6{--hsk-accent:var(--hsk6-main);--hsk-accent-soft:var(--hsk6-secondary);--hsk-on-main:#fff;}
body[class*="hsk-level-"] .hero .eyebrow,
body[class*="hsk-level-"] .lesson-fold .eyebrow,
body[class*="hsk-level-"] .stair-caption strong{color:var(--hsk-accent);}
body[class*="hsk-level-"] .badge,
body[class*="hsk-level-"] .progress-fill,
body[class*="hsk-level-"] .btn:not(.ghost){background:var(--hsk-accent);border-color:var(--hsk-accent);color:var(--hsk-on-main);}
body[class*="hsk-level-"] .lesson-fold>summary{border-left:4px solid var(--hsk-accent);}
body[class*="hsk-level-"] .lesson-fold[open]>summary,
body[class*="hsk-level-"] .notice{background:var(--hsk-accent-soft);}
/* Homepage-only composition */
.home-hero{padding:52px 0 46px;background:linear-gradient(135deg,#E7F2EC 0%,#F7F5EF 58%,#FFF0E9 100%);overflow:hidden;}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:center;gap:58px;}
.home-hero h1{max-width:710px;font-size:clamp(2.55rem,5.2vw,4.6rem);letter-spacing:-.035em;}
.home-hero h1 span{display:block;color:var(--jade-dark);font-style:italic;font-size:.62em;margin-top:12px;letter-spacing:-.02em;}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.home-proof{display:flex;gap:0;align-items:center;margin-top:22px;color:var(--ink-soft);font-size:.86rem;}
.home-proof span,.home-proof strong{padding:0 13px;border-right:1px solid var(--line);}
.home-proof :first-child{padding-left:0;}.home-proof :last-child{border-right:0;}
.home-hero-playground{position:relative;min-height:410px;display:flex;align-items:flex-end;justify-content:center;}
.hero-panda-bubble{position:absolute;top:0;right:3%;display:flex;align-items:center;gap:12px;z-index:2;}
.hero-panda-bubble img{width:118px;height:112px;object-fit:contain;filter:drop-shadow(0 9px 12px rgba(23,76,70,.15));}
.hero-panda-bubble span{background:#fff;border:2px solid var(--jade-dark);border-radius:18px 18px 18px 4px;padding:11px 15px;line-height:1.25;color:var(--jade-dark);transform:rotate(2deg);}
.home-hero .wotd{width:min(100%,390px);display:grid;justify-items:center;text-align:center;background:rgba(255,253,249,.94);border:1px solid rgba(23,76,70,.14);border-radius:28px;padding:42px 28px 26px;box-shadow:0 24px 50px rgba(23,76,70,.13);transform:rotate(-1deg);}
.home-hero .wotd-label{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--seal);font-weight:700;}
.home-hero .wotd-zh{font-size:5.2rem;line-height:1.2;color:var(--jade-dark);margin:8px 0 0;}
.home-hero .wotd-py{font-weight:700;color:var(--ink);}.home-hero .wotd-es{margin-bottom:18px;color:var(--ink-soft);}
.home-routes{padding-top:54px;}.route-grid{align-items:stretch;}
.route-card{position:relative;display:flex;flex-direction:column;min-height:245px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);overflow:hidden;transition:transform .2s,box-shadow .2s;}
.route-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(23,76,70,.12);text-decoration:none;}
.route-card::after{content:"";position:absolute;right:-32px;bottom:-48px;width:140px;height:140px;border-radius:50%;background:var(--route-color);opacity:.14;}
.route-card.beginner{--route-color:var(--hsk1-main);border-top:5px solid var(--hsk1-main)}.route-card.placement{--route-color:#F06449;border-top:5px solid #F06449}.route-card.teacher{--route-color:#F2B84B;border-top:5px solid #F2B84B}
.route-number{font-weight:800;color:var(--route-color);font-size:.8rem;letter-spacing:.12em;}.route-card h3{font-size:1.35rem;margin-top:22px;}.route-card p{color:var(--ink-soft);}.route-card strong{margin-top:auto;color:var(--jade-dark);}
.mini-lesson-shell{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding-top:46px;padding-bottom:46px;}
.mini-lesson-copy,.mini-question{align-self:center;}
.home-mini-lesson h2{font-size:clamp(2.15rem,4vw,3.45rem);line-height:1.18;color:var(--jade-dark);margin:14px 0 0;white-space:nowrap;}.home-mini-lesson .pinyin{margin:7px 0 24px;}.pinyin{letter-spacing:.04em;color:var(--pinyin);}.mini-translation{font-size:1.2rem;margin:0;}
.mini-question{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);}.mini-question summary{cursor:pointer;font-weight:700;}.mini-question[open] summary{margin-bottom:16px;color:var(--seal);}
.stair-step:nth-child(1){--step:var(--hsk1-main);--step-on:#fff}.stair-step:nth-child(2){--step:var(--hsk2-main);--step-on:#fff}.stair-step:nth-child(3){--step:var(--hsk3-main);--step-on:#2f2f2b}.stair-step:nth-child(4){--step:var(--hsk4-main);--step-on:#2f241e}.stair-step:nth-child(5){--step:var(--hsk5-main);--step-on:#1c1010}.stair-step:nth-child(6){--step:var(--hsk6-main);--step-on:#fff}
.stair-step{border-top:5px solid var(--step);}.stair-step .badge{background:var(--step);border-color:var(--step);color:var(--step-on);}.stair-step .cnt strong{color:var(--step);}
/* Bilingual About page */
.about-hero{background:linear-gradient(120deg,#E5F1EB,#FFF5ED);padding:58px 0;}.about-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;}.about-hero h1 span{display:block;margin-top:10px;color:var(--jade-dark);font-size:.7em;}.about-language-key{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft);}.key-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.key-dot.spanish{background:var(--seal)}.key-dot.chinese{background:var(--jade)}.key-dot.practice{background:var(--brass)}
.about-phrase-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 22px 45px rgba(23,76,70,.11);transform:rotate(1deg);}.about-phrase-card .zh{font-size:1.8rem;color:var(--jade-dark);}.about-stamp{position:absolute;right:18px;top:-18px;background:var(--seal);color:#fff;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;text-align:center;font-weight:800;transform:rotate(9deg)}
.bilingual-story{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:54px;padding-bottom:54px;}.language-column{padding:38px 42px;background:var(--card);border:1px solid var(--line);}.language-column:first-child{border-radius:24px 0 0 24px;border-right:0}.language-column:last-child{border-radius:0 24px 24px 0;background:#F0F6F2}.language-heading{display:flex;align-items:center;gap:12px;margin-bottom:24px}.language-heading>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--seal);color:#fff;font-weight:800}.chinese-copy .language-heading>span{background:var(--jade)}.chinese-copy p{font-size:1.04rem;line-height:1.9}.about-practice-grid{margin-top:26px}.practice-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}.practice-card summary{cursor:pointer;display:flex;flex-direction:column;gap:4px}.practice-card summary .zh{font-size:1.55rem;color:var(--jade-dark)}.practice-card summary small{color:var(--ink-soft)}.practice-card p{margin:16px 0 0}.about-cta{margin-top:28px;padding:22px 26px;border-radius:18px;background:#FFF2E9;display:flex;align-items:center;justify-content:space-between;gap:20px}.about-cta p{margin:0}
@media(max-width:760px){
.home-hero-grid,.about-hero-grid,.mini-lesson-shell,.bilingual-story{grid-template-columns:1fr;}
.home-hero{padding-top:34px}.home-hero h1{font-size:2.55rem}.home-hero-playground{min-height:360px;margin-top:10px}.hero-panda-bubble img{width:90px;height:86px}.home-hero .wotd{padding-top:46px}.home-proof{flex-wrap:wrap;row-gap:8px}.route-grid,.about-practice-grid{grid-template-columns:1fr}.route-card{min-height:210px}.mini-lesson-shell{gap:24px}.bilingual-story{padding-top:30px;padding-bottom:30px}.language-column{padding:27px 23px}.language-column:first-child{border-radius:20px 20px 0 0;border-right:1px solid var(--line);border-bottom:0}.language-column:last-child{border-radius:0 0 20px 20px}.about-cta{align-items:flex-start;flex-direction:column}.utility-bar .wrap{gap:12px;justify-content:center}.utility-bar a{font-size:.7rem}
}
@media(max-width:1040px) and (min-width:761px){
.home-mini-lesson h2{font-size:clamp(2.15rem,4.7vw,3rem);}
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
body::before{
content:"";
position:fixed; inset:0;
pointer-events:none;
z-index:0;
opacity:.5;
background-image:
radial-gradient(circle at 20% 30%, rgba(42,36,32,0.025) 0, transparent 45%),
radial-gradient(circle at 80% 70%, rgba(42,36,32,0.03) 0, transparent 50%);
}
a{color:var(--seal); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
outline:2px solid var(--jade); outline-offset:2px;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0 0 .5em; color:var(--ink);}
.zh{font-family:var(--zh-serif);}
.zh-sans{font-family:var(--zh-sans);}
p{margin:0 0 1em;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.narrow{max-width:760px;}
/* ---------- utility bar (secondary nav: Recursos recomendados, Docentes, Contacto) ---------- */
.utility-bar{
background:var(--ink); border-bottom:1px solid rgba(255,255,255,0.08);
}
.utility-bar .wrap{
display:flex; justify-content:flex-end; gap:22px; padding-top:7px; padding-bottom:7px; flex-wrap:wrap;
}
.utility-bar a{
color:rgba(242,236,221,0.65); font-size:.78rem; font-weight:500; letter-spacing:.01em;
}
.utility-bar a:hover{color:var(--paper); text-decoration:none;}
.utility-bar a.active{color:var(--brass); font-weight:700;}
/* ---------- top nav ---------- */
.topnav{
position:sticky; top:0; z-index:50;
background:rgba(242,236,221,0.92);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.topnav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand img{width:48px; height:46px; object-fit:contain; flex:0 0 auto;}
.brand-copy{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; line-height:1.05;}
.brand-name{display:block;}
.brand-tagline{display:block; margin-top:4px; font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft);}
.brand .chop{
width:34px; height:34px; border-radius:3px; background:var(--seal); color:var(--paper);
display:flex; align-items:center; justify-content:center; font-family:var(--zh-serif); font-size:1.1rem; flex-shrink:0;
}
.navlinks{display:flex; align-items:center; gap:22px; flex-wrap:wrap; font-size:.92rem; font-weight:500;}
.navlinks > a{color:var(--ink-soft);}
.navlinks > a:hover{color:var(--seal);}
.navlinks > a.active{color:var(--seal); font-weight:700;}
.navdrop{position:relative;}
.navdrop > .navdrop-btn{
background:none; border:none; font:inherit; font-size:.92rem; font-weight:500; color:var(--ink-soft);
cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; text-decoration:none;
}
.navdrop > .navdrop-btn:hover{color:var(--seal);}
.navdrop > .navdrop-btn.active{color:var(--seal); font-weight:700;}
.navdrop-btn .caret{font-size:.7em; transition:transform .15s;}
.navdrop-menu{
display:none; position:absolute; top:calc(100% + 12px); left:0; z-index:40;
background:var(--card); border:1px solid var(--paper-dim); border-radius:10px;
box-shadow:0 12px 28px rgba(42,36,32,.14); min-width:190px; padding:8px; flex-direction:column; gap:1px;
}
/* Invisible bridge covering the gap above the menu, so moving the mouse from the
button down to the menu doesn't pass outside .navdrop and drop the :hover state. */
.navdrop-menu::before{
content:""; position:absolute; top:-12px; left:0; right:0; height:12px; background:transparent;
}
.navdrop-menu a{color:var(--ink-soft); font-size:.9rem; padding:8px 10px; border-radius:2px; display:block;}
.navdrop-menu a:hover{background:var(--paper-dim); color:var(--seal); text-decoration:none;}
.navdrop-menu a.active{color:var(--seal); font-weight:600; background:var(--paper-dim);}
.navdrop-menu .menu-divider{border-top:1px solid var(--paper-dim); margin:6px 4px;}
@media (min-width:761px){
/* Dropdown open/close is driven by JS (mouseenter/mouseleave with a small close-delay),
not pure :hover -- this guarantees only one dropdown is ever open at a time, since
the script explicitly closes siblings. Pure :hover previously allowed two dropdowns
to appear open simultaneously when their boxes visually overlapped. :focus-within is
kept for keyboard navigation. */
.navdrop:hover > .navdrop-btn .caret{transform:rotate(180deg);}
}
.navdrop-menu.js-open{display:flex;}
.navdrop-menu.open{display:flex;}
/* ---------- level badge ---------- */
.badge{
display:inline-flex; align-items:center; gap:8px;
background:var(--ink); color:var(--paper);
font-family:var(--serif); font-weight:700; font-size:.85rem;
padding:6px 14px; border-radius:2px; letter-spacing:.04em;
}
.badge.jade{background:var(--jade);}
.badge.brass{background:var(--brass);}
.badge.seal{background:var(--seal);}
/* ---------- hero ---------- */
.hero{padding:64px 0 40px; position:relative; z-index:1;}
.hero .eyebrow{color:var(--seal); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; margin-bottom:14px;}
.hero h1{font-size:clamp(2rem, 4.2vw, 3.1rem); line-height:1.1; max-width:760px;}
.hero .lead{font-size:1.15rem; color:var(--ink-soft); max-width:620px;}
/* ---------- staircase (signature element) ---------- */
.staircase{margin:40px 0 20px; position:relative; z-index:1;}
.stair-row{
display:flex; align-items:stretch; gap:0; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--line);
}
.stair-step{
display:flex; flex-direction:column; justify-content:space-between;
background:var(--card);
border-right:1px solid var(--line);
padding:16px 14px;
text-decoration:none;
color:var(--ink);
transition:background .15s ease, transform .15s ease;
position:relative;
}
.stair-step:last-child{border-right:none;}
.stair-step:hover{background:var(--paper-dim); text-decoration:none; transform:translateY(-2px);}
.stair-step .lvl{font-family:var(--serif); font-weight:700; font-size:1.3rem;}
.stair-step .cnt{font-size:.72rem; color:var(--ink-soft); margin-top:6px;}
.stair-step .cnt strong{color:var(--seal); font-weight:700;}
.stair-caption{font-size:.8rem; color:var(--ink-soft); margin-top:10px; text-align:center;}
/* ---------- cards / grid ---------- */
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media(max-width:920px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-6{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr;} .grid-6{grid-template-columns:repeat(2,1fr);}}
.card{
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:22px; box-shadow:var(--shadow);
}
.card h3{font-size:1.05rem; margin-bottom:8px;}
.card .tag{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--jade); font-weight:700; margin-bottom:8px; display:block;}
/* FAQ accordion (native / -- accessible, no JS needed) */
.faq-list{max-width:900px; display:flex; flex-direction:column; gap:10px;}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:4px 20px;}
.faq-item summary{
cursor:pointer; font-weight:600; padding:16px 0; list-style:none; position:relative; padding-right:28px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
content:"+"; position:absolute; right:0; top:14px; font-size:1.3rem; color:var(--seal); font-weight:400; line-height:1;
}
.faq-item[open] summary::after{content:"−";}
.faq-item p{padding-bottom:18px; color:var(--ink-soft); margin:0;}
/* section chrome */
section{padding:44px 0; position:relative; z-index:1;}
section.alt{background:var(--paper-dim);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap;}
.section-head h2{font-size:1.6rem;}
.section-head .num{font-family:var(--serif); color:var(--brass); font-weight:700; margin-right:10px;}
hr.rule{border:none; border-top:1px solid var(--line); margin:36px 0;}
/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
caption{text-align:left; font-weight:600; margin-bottom:8px; color:var(--ink-soft); font-size:.85rem;}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem;}
th{background:var(--paper-dim); font-family:var(--serif); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
tr:last-child td{border-bottom:none;}
td.zh{font-family:var(--zh-serif); font-size:1.15rem;}
td.pinyin{color:var(--jade-dark); font-style:italic; font-family:var(--serif);}
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:8px;
background:var(--seal); color:var(--paper); font-weight:600; font-size:.92rem;
padding:11px 20px; border-radius:2px; border:none; cursor:pointer;
text-decoration:none; font-family:var(--sans);
transition:background .15s ease;
}
.btn:hover{background:var(--seal-dark); text-decoration:none;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.ghost:hover{background:var(--card);}
.btn.jade{background:var(--jade);}
.btn.jade:hover{background:var(--jade-dark);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
/* ---------- resource list ---------- */
.res-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.res-list li{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
.res-list .rtitle{font-weight:700; font-family:var(--serif);}
.res-list .rdesc{font-size:.87rem; color:var(--ink-soft); margin-top:2px;}
.res-list .rmeta{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--jade); font-weight:700; margin-left:8px;}
/* ---------- flashcard game ---------- */
.game-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center;}
.flashcard{
width:100%; max-width:360px; margin:0 auto 18px; height:200px;
background:var(--ink); color:var(--paper); border-radius:8px;
display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
cursor:pointer; user-select:none; padding:20px;
box-shadow:0 6px 0 rgba(42,36,32,0.15);
transition:transform .12s ease;
}
.flashcard:active{transform:translateY(3px);}
.flashcard .fc-zh{font-family:var(--zh-serif); font-size:2.6rem;}
.flashcard .fc-pinyin{font-family:var(--serif); font-style:italic; color:var(--pinyin); font-size:1.1rem;}
.flashcard .fc-es{font-size:1.1rem; font-weight:600;}
.flashcard .fc-hint{font-size:.72rem; opacity:.6; text-transform:uppercase; letter-spacing:.06em;}
.game-controls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
.game-stat{font-size:.85rem; color:var(--ink-soft); margin-top:10px;}
.game-footnote{font-size:.72rem; color:var(--ink-soft); margin-top:12px; opacity:.85;}
.game-footnote a{font-weight:600;}
.cache-note{font-size:.78rem; color:var(--ink-soft); margin:-6px 0 16px; opacity:.85;}
/* flashcard difficulty rating buttons */
.fc-rating-controls .fc-rate-dificil{border-color:var(--seal); color:var(--seal);}
.fc-rating-controls .fc-rate-dificil:hover{background:var(--seal); color:#fff;}
.fc-rating-controls .fc-rate-medio{border-color:var(--brass); color:var(--brass);}
.fc-rating-controls .fc-rate-medio:hover{background:var(--brass); color:#fff;}
/* level self-test */
.level-test-intro{max-width:520px; margin:0 auto; text-align:center;}
.level-test-intro p{margin-bottom:14px;}
.level-test-result{max-width:520px; margin:0 auto 16px; text-align:center; padding:20px; border-radius:var(--radius);}
.level-test-result.passed{background:rgba(76,122,107,.12); border:1px solid var(--jade);}
.level-test-result.not-yet{background:rgba(184,134,59,.1); border:1px solid var(--brass);}
.ltr-headline{font-size:1.3rem; font-weight:700; margin-bottom:8px;}
/* matching game */
.match-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:84px; gap:10px; max-width:520px; margin:0 auto;}
@media(max-width:520px){.match-grid{grid-template-columns:repeat(3,1fr);}}
.match-tile{
height:100%; width:100%; background:var(--ink); color:var(--paper); border-radius:2px;
display:flex; align-items:center; justify-content:center; cursor:pointer;
font-size:.82rem; line-height:1.15; padding:6px; text-align:center; border:none;
overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
.match-tile.zh{font-family:var(--zh-serif); font-size:1.4rem; -webkit-line-clamp:2;}
.match-tile.py{font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--brass);}
.match-tile.face-down{
font-family:var(--sans);
font-size:1.4rem;
font-style:normal;
font-weight:600;
color:var(--paper);
}
.match-tile.face-down.match-chinese{color:#fff;}
.match-tile.face-down.match-spanish,
.match-tile.face-down.match-pinyin{color:var(--brass);}
.match-tile.selected{background:var(--brass);}
.match-tile.correct{background:var(--jade); cursor:default;}
.match-tile.hidden-tile{visibility:hidden;}
/* quiz */
.quiz-q{font-size:1.15rem; font-weight:600; margin-bottom:16px;}
.quiz-opts{display:grid; gap:10px;}
.quiz-opt{
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:12px 16px; text-align:left; cursor:pointer; font-size:1rem; font-family:var(--sans); color:var(--ink);
}
.quiz-opt.correct{background:var(--jade); color:#fff; border-color:var(--jade-dark);}
.quiz-opt.wrong{background:var(--seal); color:#fff; border-color:var(--seal-dark);}
/* active recall and multi-skill diagnostic */
.recall-card{min-height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.recall-card>strong{font-family:var(--serif);font-size:1.35rem}.recall-label{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.recall-answer{border-top:1px solid var(--line);width:100%;padding-top:14px}.recall-answer .zh{display:block;font-size:2rem}.recall-answer .pinyin{display:block;margin-top:4px;color:var(--jade-dark)}
.diagnostic-skills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.diagnostic-skills span,.diagnostic-stage span{background:var(--paper-dim);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:.8rem;font-weight:700}
.diagnostic-stage{display:flex;align-items:center;gap:10px;margin-bottom:16px}.diagnostic-stage small{color:var(--ink-soft)}.level-test-zh{font-size:1.8rem}
.listen-play{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:14px 22px;font:600 1rem var(--sans);cursor:pointer}
.skill-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0;text-align:left}.skill-results>div{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:var(--radius);padding:12px}.skill-results strong{float:right}
.skill-meter{height:7px;clear:both;background:var(--line);border-radius:999px;margin-top:9px;overflow:hidden}.skill-meter i{display:block;height:100%;background:var(--jade);border-radius:inherit}
@media(max-width:560px){.skill-results{grid-template-columns:1fr}}
/* ---------- pronunciation buttons ---------- */
.speak-btn{
background:var(--brass); color:var(--ink); border:none; border-radius:50%;
width:26px; height:26px; font-size:.75rem; cursor:pointer; line-height:1;
display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
transition:transform .1s ease, background .15s ease;
}
.speak-btn:hover{background:#cf9c4c; transform:scale(1.08);}
.speak-btn:active{transform:scale(.94);}
.speak-btn-lg{width:38px; height:38px; font-size:1rem; margin-left:6px; background:var(--seal); color:var(--paper);}
.speak-btn-lg:hover{background:var(--seal-dark);}
td.zh .speak-btn{margin-left:8px;}
/* ---------- game feedback ---------- */
.game-msg{
margin-top:10px; font-weight:600; font-size:.95rem; color:var(--jade-dark);
animation: popIn .25s ease;
}
@keyframes popIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
/* ---------- entrance animation ---------- */
@media (prefers-reduced-motion: no-preference){
.fade-up{ animation: fadeUp .5s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
}
/* ---------- mobile nav toggle ---------- */
.nav-toggle{
display:none; background:none; border:1px solid var(--line); border-radius:4px;
width:38px; height:34px; cursor:pointer; color:var(--ink); font-size:1.1rem;
}
@media(max-width:760px){
/* The secondary desktop utility bar is intentionally omitted on phones.
Its destinations remain available in the main hamburger menu/footer. */
.utility-bar{display:none;}
.nav-toggle{display:block;position:relative;z-index:1002;touch-action:manipulation;}
.navlinks{
display:none; width:100%; flex-direction:column; gap:2px;
border-top:1px solid var(--line); margin-top:12px; padding-top:12px;
position:relative;z-index:1001;background:var(--card);
}
.navlinks.open{display:flex;}
.navlinks > a{padding:9px 4px; width:100%; text-align:left; align-self:stretch;}
.topnav .wrap{flex-wrap:wrap;}
.navdrop{width:100%;}
.navdrop > .navdrop-btn{width:100%; justify-content:space-between; padding:9px 4px;}
.navdrop-menu{
display:none; position:static; box-shadow:none; border:none; background:none;
padding:0 0 0 14px; min-width:0;
}
.navdrop-menu.open{display:flex;}
.navdrop-menu a{padding:8px 4px; font-size:.88rem;}
}
/* ---------- word of the day ---------- */
.wotd{
display:flex; align-items:center; gap:20px; flex-wrap:wrap;
background:var(--ink); color:var(--paper); border-radius:2px; padding:22px 26px;
margin-top:32px;
}
.wotd .wotd-zh{font-family:var(--zh-serif); font-size:2.8rem; color:var(--brass); line-height:1;}
.wotd .wotd-info{flex:1; min-width:180px;}
.wotd .wotd-py{font-family:var(--serif); font-style:italic; color:#cfc6b3; margin-bottom:2px;}
.wotd .wotd-es{font-weight:700; font-size:1.15rem;}
.wotd .wotd-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brass); margin-bottom:6px;}
/* ---------- lesson illustration ---------- */
.lesson-illus{
width:100%; max-width:340px; margin:0 auto; display:block;
}
.illus-frame{
background:var(--card); border:1px solid var(--line); border-radius:2px;
padding:18px; text-align:center;
}
/* ---------- lesson index (per-level lesson list) ---------- */
.lesson-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:760px){.lesson-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.lesson-grid{grid-template-columns:1fr;}}
.lesson-card{
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:16px 18px; text-decoration:none; color:var(--ink); display:block;
transition:transform .12s ease, background .12s ease;
}
.lesson-card:hover{transform:translateY(-2px); background:var(--paper-dim); text-decoration:none;}
.lesson-card .ln{font-family:var(--serif); font-weight:700; color:var(--seal); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;}
.lesson-card .lt{font-family:var(--zh-serif); font-size:1.3rem; margin:4px 0 2px;}
.lesson-card .lp{font-family:var(--serif); font-style:italic; color:var(--jade-dark); font-size:.85rem;}
.lesson-card.soon{opacity:.55; cursor:default; pointer-events:none;}
.lesson-card.soon .lt{color:var(--ink-soft); font-family:var(--sans); font-style:italic; font-size:1rem;}
/* ---------- culture / history page ---------- */
.chengyu-widget, .poem-widget{
background:var(--ink); color:var(--paper); border-radius:2px; padding:26px 30px;
}
.chengyu-widget .cy-zh{font-family:var(--zh-serif); font-size:2.4rem; color:var(--brass); margin-bottom:6px;}
.chengyu-widget .cy-py{font-family:var(--serif); font-style:italic; color:#cfc6b3; margin-bottom:10px;}
.chengyu-widget .cy-lit{font-size:.85rem; color:#cfc6b3; margin-bottom:6px;}
.poem-widget{font-family:var(--zh-serif);}
.poem-widget .pm-title{font-size:1.3rem; color:var(--brass); margin-bottom:4px; font-family:var(--zh-serif);}
.poem-widget .pm-author{font-family:var(--serif); font-style:italic; color:#cfc6b3; font-size:.85rem; margin-bottom:14px;}
.poem-widget .pm-line{font-size:1.25rem; line-height:1.9; margin-bottom:2px;}
.poem-widget .pm-py{font-family:var(--serif); font-style:italic; color:#a89f8c; font-size:.78rem; margin-bottom:10px;}
.poem-widget .pm-trans{font-family:var(--sans); color:#e8e2d2; font-size:.9rem; margin-top:14px; border-top:1px solid rgba(242,236,221,0.2); padding-top:12px;}
/* dynasty timeline */
.dynasty-line{position:relative; padding-left:26px; border-left:3px solid var(--brass); margin-top:30px;}
.dynasty-item{position:relative; margin-bottom:6px;}
.dynasty-item::before{
content:""; position:absolute; left:-33px; top:6px; width:14px; height:14px;
border-radius:50%; background:var(--seal); border:2px solid var(--paper);
}
.dynasty-btn{
width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:14px 18px; cursor:pointer; font-family:var(--sans); color:var(--ink); margin-bottom:8px;
display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.dynasty-btn:hover{background:var(--paper-dim);}
.dynasty-btn .dy-name{font-family:var(--serif); font-weight:700; font-size:1.05rem;}
.dynasty-btn .dy-years{font-size:.78rem; color:var(--ink-soft);}
.dynasty-panel{
display:none; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--seal);
border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; margin:-4px 0 14px;
}
.dynasty-panel.open{display:block;}
.dynasty-panel .dy-word{
margin-top:12px; background:var(--paper-dim); border-radius:4px; padding:10px 14px;
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.dynasty-panel .dy-word .zh{font-size:1.4rem;}
/* ---------- sentence builder game ---------- */
.sb-prompt{font-size:1.1rem; font-weight:600; margin-bottom:14px; text-align:center;}
.sb-answer{
min-height:52px; border:2px dashed var(--line); border-radius:2px; background:var(--paper);
display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; margin-bottom:14px;
}
.sb-tile{
background:var(--ink); color:var(--paper); font-family:var(--zh-serif); font-size:1.2rem;
padding:8px 14px; border-radius:5px; cursor:pointer; border:none;
}
.sb-tile.used{background:var(--paper-dim); color:var(--ink-soft); cursor:default;}
.sb-bank{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px;}
.sb-controls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
/* ---------- character story / etymology box ---------- */
.story-box{
background:var(--card); border:1px solid var(--line); border-radius:8px; padding:26px 30px;
display:flex; gap:26px; align-items:center; flex-wrap:wrap;
}
.story-box .story-char{
font-family:var(--zh-serif); font-size:4.5rem; color:var(--seal); line-height:1; flex-shrink:0;
background:var(--paper-dim); border-radius:8px; padding:14px 22px; text-align:center;
}
.story-box .story-text{flex:1; min-width:220px;}
.story-box .story-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--jade); font-weight:700; margin-bottom:8px;}
.character-note{margin:10px 0 0;font-size:.78rem;color:var(--ink-soft);line-height:1.5;}
/* ---------- lesson header (number under title) ---------- */
.lesson-head-block h1{margin-bottom:4px;}
.lesson-head-block .lesson-tag{
font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brass); font-weight:700; margin-bottom:8px;
}
.lesson-head-block .lesson-sub{color:#cfc6b3; margin:2px 0 0; font-size:.95rem;}
/* ---------- graded reader / stories ---------- */
.reader-card{
background:var(--card); border:1px solid var(--line); border-radius:10px;
padding:28px 30px; margin-bottom:22px;
}
.reader-accordion{background:var(--card);border:1px solid var(--line);border-radius:20px;margin-bottom:22px;overflow:hidden;box-shadow:0 16px 34px rgba(23,76,70,.08);}
.reader-accordion>summary{display:flex;align-items:center;gap:22px;cursor:pointer;list-style:none;padding:26px 30px;color:var(--ink);border-left:5px solid var(--hsk-accent,var(--jade));}
.reader-accordion>summary::-webkit-details-marker{display:none;}
.reader-accordion>summary::after{content:"＋";display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;margin-left:auto;border-radius:50%;background:var(--hsk-accent,var(--jade));color:#fff;font-size:1.55rem;font-weight:500;line-height:1;}
.reader-accordion[open]>summary{background:var(--hsk-accent-soft,#E3F3ED);border-bottom:1px solid var(--line);}
.reader-accordion[open]>summary::after{content:"−";}
.reader-summary-copy{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:6px;}.reader-summary-kicker{color:var(--hsk-accent,var(--jade));font-size:.86rem;font-weight:700;}.reader-summary-title{font-family:var(--serif);font-size:clamp(1.18rem,2vw,1.42rem);font-weight:700;line-height:1.3;overflow-wrap:anywhere;}.reader-summary-meta{color:var(--ink-soft);font-size:.88rem;line-height:1.45;}
.reader-accordion .reader-card{border:0;border-radius:0;margin:0;box-shadow:none;}
.story-genre{display:inline-flex;background:var(--hsk-accent-soft,#E3F3ED);color:var(--hsk-accent,var(--jade-dark));border-radius:999px;padding:5px 11px;font-size:.75rem;font-weight:700;margin:-6px 0 20px;}
.story-practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.story-practice{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper);}
.story-practice>summary,.practice-answer>summary{cursor:pointer;font-weight:700;color:var(--jade-dark);}
.story-practice p{font-size:.9rem;margin:12px 0 0;}.story-practice .zh{font-size:1.15rem;}
.practice-answer{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;}
.placement-disclaimer{max-width:720px;margin:18px auto 0;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft);font-size:.88rem;}
@media(max-width:760px){.story-practice-grid{grid-template-columns:1fr}.reader-accordion>summary{gap:14px;padding:20px 16px 20px 20px}.reader-accordion>summary::after{flex-basis:42px;width:42px;height:42px}.reader-summary-title{font-size:1.18rem}.reader-summary-meta{font-size:.82rem}}
/* Pinyin must remain readable on rice-paper and white cards. Yellow stays as
a playful UI accent, while romanization uses this higher-contrast orange. */
.pinyin,.py-line,.py-title,.fc-pinyin,.ge-py,.vocab-preview-chip .py,
.mw-py,.mw-example em,.rad-ex-row .py,.search-vocab-card .py,
.poem-card2 .pm-py2,.novel-char-row .py,.listen-reveal em,
td.pinyin,.placement-prompt .py{color:var(--pinyin)!important;}
.reader-title{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px;}
.reader-title .zh-title{font-family:var(--zh-serif); font-size:1.5rem; color:var(--ink);}
.reader-title .py-title{color:var(--ink-soft); font-style:italic; font-size:.95rem;}
.reader-es-title{color:var(--jade-dark); font-weight:600; margin-bottom:18px; font-size:1.05rem;}
.story-line{margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed var(--paper-dim);}
/* reading comprehension quiz (historias) */
.comp-quiz{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
.comp-quiz summary{cursor:pointer; font-weight:600; color:var(--jade-dark); padding:6px 0;}
.comp-quiz[open] summary{margin-bottom:12px;}
.comp-question{margin-bottom:18px;}
.comp-question:last-child{margin-bottom:0;}
.comp-q-text{font-weight:600; margin-bottom:10px;}
.comp-score-line{font-weight:600; color:var(--seal); margin-bottom:16px;}
/* grammar pattern drill (fill-in-the-blank) */
.gram-drill{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.gram-drill summary{cursor:pointer; font-weight:600; color:var(--jade-dark); padding:4px 0;}
.gram-drill[open] summary{margin-bottom:12px;}
.gram-drill-blank{font-family:var(--zh-serif); font-size:1.3rem;}
.gram-drill-es{color:var(--ink-soft); font-size:.88rem; margin-top:12px;}
/* listening comprehension */
.listen-play-row{text-align:center; margin-bottom:16px;}
.listen-play-btn{font-size:1rem;}
.listen-reveal{text-align:center; font-size:.9rem; color:var(--ink-soft); margin-bottom:16px; min-height:1.3em;}
.listen-reveal .zh{font-family:var(--zh-serif); font-size:1.15rem; color:var(--ink);}
.listen-reveal em{color:var(--brass); font-style:italic;}
.story-line:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.story-line .zh-line{
font-family:var(--zh-serif); font-size:1.35rem; color:var(--ink); line-height:1.7;
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.story-line .py-line{color:var(--pinyin); font-size:.88rem; margin:3px 0 6px; font-style:italic;}
.story-line .es-line{color:var(--ink-soft); font-size:.95rem;}
.gram-example{margin-top:14px; padding-top:14px; border-top:1px dashed var(--paper-dim);}
.gram-example:first-of-type{margin-top:16px;}
.gram-example .ge-es{color:var(--ink-soft); font-size:.88rem; margin-bottom:6px;}
.gram-example .ge-zh{font-family:var(--zh-serif); font-size:1.3rem; display:flex; align-items:center; gap:8px;}
.gram-example .ge-py{color:var(--pinyin); font-size:.85rem; font-style:italic; margin-top:2px;}
.reader-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft); margin-top:16px; padding-top:14px; border-top:1px solid var(--paper-dim);}
.reader-meta span{background:var(--paper-dim); padding:4px 10px; border-radius:20px;}
.reader-list-card{
display:block; background:var(--card); border:1px solid var(--line); border-radius:10px;
padding:20px 22px; margin-bottom:14px; transition:border-color .15s, transform .15s;
}
.reader-list-card:hover{border-color:var(--seal); transform:translateY(-2px); text-decoration:none;}
.reader-list-card .rlt-zh{font-family:var(--zh-serif); font-size:1.15rem; color:var(--ink);}
.reader-list-card .rlt-es{color:var(--ink-soft); font-size:.88rem; margin-top:4px;}
/* ---------- vocab preview strip on level index pages ---------- */
.vocab-preview-strip{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0 8px;}
.vocab-preview-chip{
background:var(--card); border:1px solid var(--line); border-radius:20px;
padding:7px 14px; display:flex; align-items:baseline; gap:7px; font-size:.85rem;
}
.vocab-preview-chip .zh{font-family:var(--zh-serif); font-size:1rem; color:var(--ink);}
.vocab-preview-chip .py{color:var(--pinyin); font-style:italic; font-size:.8rem;}
.vocab-preview-chip .es{color:var(--ink-soft); font-size:.8rem;}
.vocab-preview-more{font-size:.85rem; font-weight:600; color:var(--seal); padding:7px 4px;}
/* ---------- culture page tabs ---------- */
.culture-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; border-bottom:2px solid var(--line); padding-bottom:0;}
.culture-tab-btn{
background:none; border:none; font:inherit; font-size:.95rem; font-weight:600; color:var(--ink-soft);
padding:12px 18px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap;
}
.culture-tab-btn:hover{color:var(--ink);}
.culture-tab-btn.active{color:var(--seal); border-bottom-color:var(--seal);}
.culture-panel{display:none;}
.culture-panel.active{display:block;}
.culture-search{
width:100%; max-width:420px; padding:10px 14px; border:1px solid var(--line); border-radius:8px;
font-size:1rem; margin:18px 0;
}
.culture-count{color:var(--ink-soft); font-size:.85rem; margin-bottom:10px;}
.culture-subhead{font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--seal); margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--paper-dim);}
/* chengyu cards */
.cy-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px;}
.cy-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; cursor:pointer; transition:border-color .15s;}
.cy-card:hover{border-color:var(--seal);}
.cy-card .cy-zh2{font-family:var(--zh-serif); font-size:1.6rem; color:var(--seal); margin-bottom:2px;}
.cy-card .cy-py2{color:var(--ink-soft); font-style:italic; font-size:.85rem; margin-bottom:8px;}
.cy-card .cy-meaning2{font-size:.9rem; margin-bottom:0;}
.cy-card .cy-story2{display:none; font-size:.85rem; color:var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px dashed var(--paper-dim);}
.cy-card.open .cy-story2{display:block;}
.cy-card .cy-lit2{font-size:.78rem; color:var(--brass); margin-bottom:6px;}
/* poem cards */
.poem-grid{display:flex; flex-direction:column; gap:18px;}
.poem-card2{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px;}
.poem-card2 .pm-title2{font-family:var(--zh-serif); font-size:1.3rem; color:var(--ink);}
.poem-card2 .pm-author2{color:var(--ink-soft); font-style:italic; font-size:.85rem; margin-bottom:14px;}
.poem-card2 .pm-line2{font-family:var(--zh-serif); font-size:1.2rem; line-height:1.8;}
.poem-card2 .pm-py2{color:var(--brass); font-style:italic; font-size:.78rem; margin-bottom:8px;}
.poem-card2 .pm-trans2{font-size:.9rem; color:var(--ink-soft); margin-top:14px; padding-top:12px; border-top:1px solid var(--paper-dim);}
.poem-practice-btn{margin-top:14px;}
.poem-blank{
display:inline-block; min-width:1.4em; text-align:center; border-bottom:2px solid var(--seal);
color:transparent; user-select:none;
}
.poem-blank.filled{color:var(--jade-dark); border-bottom-color:var(--jade-dark); font-weight:700;}
.poem-blank.wrong{border-bottom-color:#c0392b;}
.poem-options{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0;}
.poem-opt-btn{
font-family:var(--zh-serif); font-size:1.1rem; background:var(--paper-dim); border:1px solid var(--line);
border-radius:8px; padding:8px 16px; cursor:pointer;
}
.poem-opt-btn:hover{border-color:var(--seal);}
.poem-opt-btn.correct{background:#d4ead9; border-color:var(--jade-dark);}
.poem-opt-btn.incorrect{background:#f5d5d0; border-color:#c0392b;}
.poem-opt-btn:disabled{cursor:default; opacity:.55;}
.poem-practice-status{font-size:.85rem; color:var(--ink-soft); margin-top:8px;}
/* festival cards */
.fest-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px;}
.fest-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px;}
.fest-card .fest-zh{font-family:var(--zh-serif); font-size:1.3rem; color:var(--ink);}
.fest-card .fest-py{color:var(--ink-soft); font-style:italic; font-size:.85rem;}
.fest-card .fest-when{font-size:.78rem; color:var(--brass); font-weight:600; margin:6px 0 10px; text-transform:uppercase; letter-spacing:.04em;}
.fest-card .fest-text{font-size:.9rem; margin-bottom:14px;}
.fest-word-chip{display:inline-flex; align-items:baseline; gap:6px; background:var(--paper-dim); border-radius:16px; padding:5px 12px; margin:2px 4px 2px 0; font-size:.82rem;}
.fest-word-chip .zh{font-family:var(--zh-serif);}
/* novel cards (四大名著) */
.novel-grid{display:flex; flex-direction:column; gap:16px;}
.novel-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px; cursor:pointer; transition:border-color .15s;}
.novel-card:hover{border-color:var(--seal);}
.novel-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.novel-zh{font-family:var(--zh-serif); font-size:1.5rem; color:var(--seal);}
.novel-py{color:var(--ink-soft); font-style:italic; font-size:.88rem; margin-top:2px;}
.novel-author{color:var(--brass); font-size:.78rem; margin-top:4px;}
.novel-caret{font-size:1.1em; color:var(--ink-soft); transition:transform .15s; flex-shrink:0;}
.novel-card.open .novel-caret{transform:rotate(180deg);}
.novel-blurb{font-size:.92rem; margin-top:12px;}
.novel-detail{display:none; margin-top:16px; padding-top:16px; border-top:1px dashed var(--paper-dim);}
.novel-card.open .novel-detail{display:block;}
.novel-why{font-size:.9rem; color:var(--ink-soft); margin-bottom:16px;}
.novel-characters h4, .novel-chengyu h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--jade); margin-bottom:8px;}
.novel-chengyu{margin-top:16px;}
.novel-chengyu-note{font-size:.85rem; color:var(--ink-soft); font-style:italic; margin-top:16px;}
.novel-char-row{display:flex; align-items:baseline; gap:10px; padding:6px 0; font-size:.88rem; flex-wrap:wrap;}
.novel-char-row .zh{font-family:var(--zh-serif); font-size:1.1rem; color:var(--ink); min-width:70px;}
.novel-char-row .py{color:var(--brass); font-style:italic; font-size:.82rem; min-width:110px;}
.novel-char-row .char-note{color:var(--ink-soft);}
/* pop culture cards (流行文化) */
.pop-filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.pop-cat-btn{
background:var(--paper-dim); border:1px solid var(--line); border-radius:20px;
padding:7px 16px; font-size:.85rem; cursor:pointer; color:var(--ink-soft);
}
.pop-cat-btn:hover{border-color:var(--seal);}
.pop-cat-btn.active{background:var(--seal); color:#fff; border-color:var(--seal);}
.pop-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px;}
.pop-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px;}
.pop-meta-row{display:flex; gap:8px; margin-bottom:10px;}
.pop-cat-tag{font-size:.72rem; background:var(--paper-dim); border-radius:12px; padding:3px 10px;}
.pop-era-tag{font-size:.72rem; color:var(--brass); font-weight:600; border:1px solid var(--brass); border-radius:12px; padding:3px 10px;}
.pop-zh{font-family:var(--zh-serif); font-size:1.3rem; color:var(--ink);}
.pop-py{color:var(--ink-soft); font-style:italic; font-size:.85rem; margin-top:2px;}
.pop-people{font-size:.78rem; color:var(--jade-dark); margin-top:6px; font-weight:600;}
.pop-blurb{font-size:.88rem; margin-top:10px;}
/* guia-para-hispanohablantes: errores comunes */
.mistake-grid{display:flex; flex-direction:column; gap:20px;}
.mistake-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.mistake-card h3{font-size:1.1rem; margin-bottom:14px;}
.mistake-wrong, .mistake-right{padding:12px 16px; border-radius:8px; margin-bottom:10px;}
.mistake-wrong{background:rgba(178,58,46,0.07); border:1px solid rgba(178,58,46,0.25);}
.mistake-right{background:rgba(76,122,107,0.08); border:1px solid rgba(76,122,107,0.3);}
.mistake-tag{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px;}
.wrong-tag{color:var(--seal);}
.right-tag{color:var(--jade-dark);}
.mistake-zh{font-family:var(--zh-serif); font-size:1.15rem;}
.mistake-py{color:var(--ink-soft); font-size:.85rem; font-style:italic; margin-top:2px;}
.mistake-explanation{font-size:.9rem; color:var(--ink-soft); margin-top:8px;}
/* guia-para-hispanohablantes: clasificadores */
.mw-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;}
.mw-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.mw-head{display:flex; align-items:baseline; gap:10px;}
.mw-zh{font-family:var(--zh-serif); font-size:1.4rem;}
.mw-py{color:var(--brass); font-style:italic; font-size:.9rem;}
.mw-category{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--jade-dark); font-weight:700; margin-top:6px;}
.mw-usage{font-size:.86rem; color:var(--ink-soft); margin-top:8px;}
.mw-example{font-size:.85rem; margin-top:10px; padding-top:10px; border-top:1px dashed var(--paper-dim);}
.mw-example .zh{font-family:var(--zh-serif); font-size:1.05rem;}
.mw-example em{color:var(--brass); font-style:italic;}
/* guia-para-hispanohablantes: radicales */
.rad-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;}
.rad-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.rad-head{display:flex; align-items:baseline; gap:10px;}
.rad-zh{font-family:var(--zh-serif); font-size:1.8rem; color:var(--seal);}
.rad-meaning{color:var(--ink-soft); font-weight:600;}
.rad-note{font-size:.8rem; color:var(--ink-soft); font-style:italic; margin-top:6px;}
.rad-examples{margin-top:10px; padding-top:10px; border-top:1px dashed var(--paper-dim);}
.rad-ex-row{display:flex; gap:8px; align-items:baseline; font-size:.85rem; padding:3px 0;}
.rad-ex-row .zh{font-family:var(--zh-serif); font-size:1.1rem; min-width:28px;}
.rad-ex-row .py{color:var(--brass); font-style:italic; min-width:70px;}
.rad-ex-row .es{color:var(--ink-soft);}
/* placement quiz */
.placement-level-tag{background:var(--paper-dim); border-radius:10px; padding:2px 10px; font-size:.78rem; font-weight:700; color:var(--seal);}
.placement-summary{max-width:400px; margin:20px auto 0; display:flex; flex-direction:column; gap:6px;}
.placement-row{display:flex; justify-content:space-between; font-size:.88rem; padding:6px 10px; background:var(--paper-dim); border-radius:6px;}
/* global search */
.search-group{margin-bottom:32px;}
.search-group h2{font-size:1.1rem; margin-bottom:14px; color:var(--jade-dark);}
.search-vocab-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px;}
.search-vocab-card{
display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
border-radius:var(--radius); padding:14px; text-decoration:none; color:inherit;
}
.search-vocab-card:hover{border-color:var(--seal);}
.search-vocab-card .zh{font-family:var(--zh-serif); font-size:1.2rem; color:var(--ink);}
.search-vocab-card .py{color:var(--brass); font-style:italic; font-size:.85rem;}
.search-vocab-card .es{font-size:.88rem; margin-top:2px;}
.search-loc{font-size:.72rem; color:var(--ink-soft); margin-top:8px;}
.search-list{display:flex; flex-direction:column; gap:2px;}
.search-list-row{
display:flex; justify-content:space-between; gap:12px; padding:10px 14px; text-decoration:none;
color:inherit; border-radius:6px;
}
.search-list-row:hover{background:var(--paper-dim);}
mark{background:rgba(184,134,59,0.3); color:inherit; border-radius:2px; padding:0 1px;}
/* certificate */
.cert-wrap{max-width:750px; margin:30px auto; box-shadow:0 20px 50px rgba(42,36,32,0.15);}
.cert-border{
border:3px double var(--brass); padding:50px 40px; text-align:center; background:var(--card);
position:relative;
}
.cert-chop{
font-family:var(--zh-serif); font-size:2.2rem; color:var(--seal); border:2px solid var(--seal);
width:64px; height:64px; display:flex; align-items:center; justify-content:center;
border-radius:8px; margin:0 auto 20px;
}
.cert-title{font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--ink); letter-spacing:.02em;}
.cert-sub{color:var(--ink-soft); font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; margin-top:4px;}
.cert-body{margin:36px 0;}
.cert-presented{color:var(--ink-soft); font-size:.95rem;}
.cert-name{font-family:var(--serif); font-size:2.2rem; font-weight:700; color:var(--seal); margin:10px 0; border-bottom:1px solid var(--paper-dim); display:inline-block; padding-bottom:8px;}
.cert-desc{color:var(--ink-soft); font-size:.95rem; margin-top:16px;}
.cert-level{font-size:1.3rem; font-weight:700; color:var(--jade-dark); margin-top:6px;}
.cert-score{color:var(--brass); font-size:.9rem; margin-top:10px; font-style:italic;}
.cert-footer{display:flex; justify-content:space-between; margin-top:40px; padding-top:16px; border-top:1px solid var(--paper-dim); font-size:.8rem; color:var(--ink-soft);}
.fest-word-chip .py{color:var(--jade-dark); font-style:italic; font-size:.78rem;}
/* hanzi story gallery */
.hanzi-filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.hanzi-lvl-btn{
background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 14px;
font-size:.85rem; cursor:pointer; font-weight:600; color:var(--ink-soft);
}
.hanzi-lvl-btn.active{background:var(--seal); border-color:var(--seal); color:#fff;}
.hanzi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.hanzi-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px;}
.hanzi-card .hz-char{font-family:var(--zh-serif); font-size:2rem; color:var(--seal); margin-bottom:6px;}
.hanzi-card .hz-label{margin-bottom:7px;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--jade-dark);}
.hanzi-card .hz-text{font-size:.85rem; color:var(--ink-soft); line-height:1.55;}
.hanzi-card .hz-link{display:inline-block; margin-top:10px; font-size:.78rem; font-weight:600; color:var(--jade-dark);}
.character-method-note{padding:14px 16px;border:1px solid var(--hsk3-main);border-radius:12px;background:var(--hsk3-secondary);color:var(--ink-soft);font-size:.88rem;line-height:1.55;}
/* ---------- grammar reference page ---------- */
.gram-filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.gram-lvl-btn{
background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 14px;
font-size:.85rem; cursor:pointer; font-weight:600; color:var(--ink-soft);
}
.gram-lvl-btn.active{background:var(--seal); border-color:var(--seal); color:#fff;}
.gram-grid{display:flex; flex-direction:column; gap:12px;}
.gram-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 22px;}
.gram-card .gc-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between;}
.gram-card .gc-pattern{font-family:var(--zh-serif); font-size:1.15rem; color:var(--seal); font-weight:700;}
.gram-card .gc-badge{font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:12px; background:var(--paper-dim); color:var(--ink-soft); white-space:nowrap;}
.gram-card .gc-exp{font-size:.9rem; margin:8px 0 10px;}
.gram-card .gc-ex{background:var(--paper-dim); border-radius:8px; padding:10px 12px; margin-bottom:6px;}
.gram-card .gc-ex .zh{font-family:var(--zh-serif); font-size:1.02rem;}
.gram-card .gc-ex .py{color:var(--jade-dark); font-style:italic; font-size:.8rem; display:block; margin:2px 0;}
.gram-card .gc-ex .es{font-size:.85rem; color:var(--ink-soft);}
.gram-card .gc-link{display:inline-block; margin-top:8px; font-size:.78rem; font-weight:600; color:var(--jade-dark);}
.load-more-wrap{display:flex; justify-content:center; margin-top:24px;}
.load-more-wrap [hidden]{display:none;}
/* ---------- progress page ---------- */
.progress-summary{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin:20px 0;}
.progress-lvl-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; text-align:center;}
.progress-lvl-card .plc-badge{font-size:.8rem; font-weight:700; margin-bottom:8px;}
.progress-lvl-card .plc-count{font-size:1.8rem; font-weight:700; color:var(--seal); font-family:var(--serif);}
.progress-lvl-card .plc-total{font-size:.82rem; color:var(--ink-soft);}
.progress-bar-track{background:var(--paper-dim); border-radius:2px; height:8px; margin-top:10px; overflow:hidden;}
.progress-bar-fill{background:var(--jade); height:100%; border-radius:2px; transition:width .3s;}
.continue-card{
background:var(--ink); color:var(--paper); border-radius:12px; padding:26px 30px;
display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:20px 0;
}
.continue-card .cc-label{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass); font-weight:700; margin-bottom:6px;}
.continue-card .cc-title{font-size:1.2rem; font-weight:700;}
.continue-card .cc-sub{font-size:.85rem; color:#cfc6b3; margin-top:2px;}
.continue-card .btn{background:var(--seal); color:#fff; border:none;}
.weak-word-row{
display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:8px;
}
.weak-word-row .ww-zh{font-family:var(--zh-serif); font-size:1.2rem;}
.weak-word-row .ww-py{color:var(--jade-dark); font-style:italic; font-size:.85rem; margin-left:8px;}
.weak-word-row .ww-es{color:var(--ink-soft); font-size:.85rem; margin-left:8px;}
.weak-word-row .ww-misses{font-size:.75rem; background:#f5d5d0; color:#a53b2a; padding:3px 9px; border-radius:12px; font-weight:700;}
.weak-word-pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px;}
.weak-word-page-status{font-size:.82rem;color:var(--ink-soft);font-weight:600;}
.weak-word-pagination .btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;}
.lesson-complete-btn{
display:inline-flex; align-items:center; gap:8px; background:var(--card); border:2px solid var(--line);
border-radius:8px; padding:10px 18px; font-weight:600; cursor:pointer; font-size:.95rem; color:var(--ink-soft);
}
.lesson-complete-btn.done{background:var(--jade); border-color:var(--jade); color:#fff;}
.empty-state{color:var(--ink-soft); padding:30px 0; text-align:center;}
/* ---------- footer ---------- */
.site-footer{padding:46px 0 24px; border-top:1px solid var(--line); background:var(--card); position:relative; z-index:1;}
.footer-grid{display:grid; grid-template-columns:minmax(230px,1.5fr) repeat(3,minmax(130px,1fr)); gap:34px;}
.footer-brand a{display:flex; align-items:center; gap:12px; color:var(--ink); font-family:var(--serif); font-size:1.18rem; font-weight:700;}
.footer-brand a:hover{text-decoration:none;}
.footer-brand img{width:72px; height:68px; object-fit:contain;}
.footer-brand .brand-tagline{font-size:.75rem; margin-top:5px;}
.footer-column{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.footer-column h2{font-family:var(--sans); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0 0 4px;}
.footer-column a{font-size:.86rem; color:var(--ink-soft);}
.footer-bottom{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line);}
.footer-disclaimer{font-size:.76rem; color:var(--ink-soft); line-height:1.6; max-width:820px; opacity:.85;}
.cookie-preferences{appearance:none; border:0; padding:0; background:none; color:var(--jade-dark); font:inherit; font-size:.86rem; cursor:pointer; text-align:left;}
.cookie-preferences:hover{text-decoration:underline;}
/* ---------- analytics consent ---------- */
.cookie-consent[hidden]{display:none;}
.cookie-consent{
position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9999;
width:min(680px,calc(100vw - 28px)); display:flex; align-items:center;
justify-content:space-between; gap:22px; padding:18px 20px;
color:var(--paper); background:var(--ink); border:1px solid rgba(255,255,255,.18);
border-radius:14px; box-shadow:0 18px 55px rgba(21,18,14,.34);
}
.cookie-consent-copy{min-width:0;}
.cookie-consent-copy strong{display:block; margin-bottom:4px; font-family:var(--serif); font-size:1.04rem;}
.cookie-consent-copy p{margin:0; color:#e5ddce; font-size:.84rem; line-height:1.5;}
.cookie-consent-copy a{display:inline-block; margin-top:5px; color:#fff; font-size:.8rem; text-decoration:underline;}
.cookie-consent-actions{display:flex; gap:9px; flex:0 0 auto;}
.cookie-consent .btn{margin:0; min-width:92px; justify-content:center;}
.cookie-consent .btn.ghost{color:var(--paper); border-color:rgba(255,255,255,.45); background:transparent;}
/* study streak */
.streak-layout{display:grid; grid-template-columns:minmax(240px, 340px) 1fr; gap:20px; align-items:stretch;}
.streak-cards{display:flex; flex-direction:column; gap:12px;}
.streak-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.streak-card-compact{display:flex; align-items:center; gap:14px; padding:12px 20px;}
.streak-card-top{display:flex; align-items:center; gap:14px;}
.streak-icon{font-size:1.8rem; line-height:1;}
.streak-num{font-size:1.7rem; font-weight:700; color:var(--seal); font-family:var(--serif); line-height:1.1;}
.streak-card-compact .streak-num{font-size:1.3rem;}
.streak-label{font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:2px;}
.streak-card-main{border-color:var(--seal);}
.streak-goal-text{font-size:.82rem; color:var(--ink-soft); margin:12px 0 8px;}
.streak-goal-track{background:var(--paper-dim); border-radius:20px; height:8px; overflow:hidden;}
.streak-goal-fill{background:var(--seal); height:100%; border-radius:20px; transition:width .3s;}
.streak-goal-count{font-size:.75rem; color:var(--ink-soft); text-align:right; margin:4px 0 0;}
.streak-cal-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column;}
.streak-cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.streak-cal-title{font-weight:700; font-family:var(--serif); text-transform:capitalize;}
.streak-cal-nav{
background:var(--paper-dim); border:none; border-radius:6px; width:30px; height:30px; font-size:1.1rem;
cursor:pointer; color:var(--ink);
}
.streak-cal-nav:hover{background:var(--line);}
.streak-cal-nav:disabled{opacity:.3; cursor:default;}
.streak-cal-nav:disabled:hover{background:var(--paper-dim);}
.streak-cal-weekdays{display:grid; grid-template-columns:repeat(7, 1fr); text-align:center; font-size:.78rem; color:var(--ink-soft); font-weight:700; margin-bottom:8px;}
.streak-cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; flex:1;}
.cal-cell{
aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.9rem;
border-radius:50%; color:var(--ink-soft);
}
.cal-empty{visibility:hidden;}
.cal-studied{background:var(--jade); color:#fff; font-weight:700;}
.cal-today{box-shadow:0 0 0 2px var(--seal) inset;}
.cal-today.cal-studied{box-shadow:0 0 0 2px var(--paper) inset;}
.site-footer p{font-size:.85rem; color:var(--ink-soft);}
@media(max-width:760px){
.footer-grid{grid-template-columns:1fr 1fr; gap:28px 22px;}
.footer-brand{grid-column:1/-1;}
.cookie-consent{bottom:10px; align-items:stretch; flex-direction:column; gap:14px; padding:17px;}
.cookie-consent-actions{width:100%;}
.cookie-consent-actions .btn{flex:1;}
}
@media(max-width:480px){
.footer-grid{grid-template-columns:1fr;}
.footer-brand{grid-column:auto;}
}
/* ---------- level page hero strip ---------- */
.level-strip{
background:var(--ink); color:var(--paper); padding:32px 0;
}
.level-strip .wrap{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.level-strip h1{color:var(--paper); margin:0; font-size:2rem;}
.level-strip .zh-big{font-family:var(--zh-serif); font-size:2.4rem; color:var(--brass);}
.strip-stats{display:flex; gap:28px; flex-wrap:wrap;}
.strip-stats div{text-align:left;}
.strip-stats .n{font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--paper);}
.strip-stats .l{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#cfc6b3;}
.level-nav{display:flex; gap:8px; flex-wrap:wrap;}
/* .btn.ghost normally uses dark ink-colored text with a near-invisible border,
which disappears against this section's dark background -- override with
light text/border so these links stay visible here. */
.level-strip .btn.ghost{background:rgba(242,236,221,0.08); color:var(--paper); border:1px solid rgba(242,236,221,0.4);}
.level-strip .btn.ghost:hover{background:rgba(242,236,221,0.18); border-color:rgba(242,236,221,0.6);}
.level-nav a{
width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1px solid rgba(242,236,221,0.3); color:var(--paper); font-family:var(--serif); font-weight:700; font-size:.85rem;
}
.level-nav a.current{background:var(--seal); border-color:var(--seal);}
.level-nav a:hover{background:rgba(242,236,221,0.15); text-decoration:none;}
.toc-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;}
.toc-card h3{font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; color:var(--jade); margin-bottom:12px;}
.toc-list{list-style:none; margin:0; padding:0;}
.toc-list li{border-bottom:1px solid var(--line);}
.toc-list li:last-child{border-bottom:none;}
.toc-list a{
display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:9px 2px; color:var(--ink); font-weight:600; font-size:.92rem;
}
.toc-list a:hover{color:var(--seal); text-decoration:none;}
.toc-list a .toc-n{color:var(--ink-soft); font-weight:400; font-size:.78rem; font-family:var(--serif); font-style:italic; white-space:nowrap;}
details summary::-webkit-details-marker{color:var(--jade);}
details summary{list-style:none;}
details summary::before{content:"▸ "; color:var(--jade);}
details[open] summary::before{content:"▾ "; }
/* checklists */
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{padding:8px 0 8px 30px; position:relative; border-bottom:1px solid var(--line);}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{content:"✓"; position:absolute; left:0; top:8px; color:var(--jade); font-weight:700;}
.pillbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.pill{background:var(--paper-dim); border:1px solid var(--line); border-radius:20px; padding:5px 14px; font-size:.78rem; font-weight:600; color:var(--ink-soft);}
.note{background:#efe6cf; border-left:3px solid var(--brass); padding:14px 18px; border-radius:0 4px 4px 0; font-size:.9rem;}
.note.teacher{border-left-color:var(--jade); background:#e4ede9;}
/* ---------- contact ---------- */
.contact-hero{text-align:center; padding-bottom:24px;}
.contact-hero h1,.contact-hero .lead{margin-left:auto; margin-right:auto;}
.contact-section{padding-top:28px;}
.contact-shell{max-width:720px;}
.contact-card{padding:clamp(24px,5vw,46px);}
.contact-form{display:grid; gap:20px;}
.form-honey{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.form-field{display:grid; gap:8px;}
.form-field label{font-weight:700; font-size:.9rem;}
.form-field input,.form-field textarea{
width:100%; border:1px solid var(--line); border-radius:var(--radius);
background:#fff; color:var(--ink); font:inherit; padding:12px 14px;
}
.form-field textarea{min-height:160px; resize:vertical;}
.form-field input:focus,.form-field textarea:focus{outline:3px solid rgba(178,58,46,.14); border-color:var(--seal);}
.form-actions{display:grid; gap:16px;}
.contact-submit{justify-self:start;}
.privacy-consent{display:flex; align-items:flex-start; gap:10px; color:var(--ink-soft); font-size:.84rem; line-height:1.55;}
.privacy-consent input{margin-top:4px;}
.form-note{font-size:.78rem; color:var(--ink-soft); margin:0;}
.notice.success{padding:20px; border-left:3px solid var(--jade); background:#e4ede9;}
/* ---------- teachers ---------- */
.teacher-hero{padding-bottom:52px;}
.teacher-hero h1{max-width:760px;}
.teacher-hero .lead{max-width:700px;}
.teacher-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.teacher-section-head{align-items:end;}
.teacher-section-head>p{max-width:520px; margin:0; color:var(--ink-soft);}
.teacher-feature-grid{margin-top:26px;}
.teacher-feature{position:relative; overflow:hidden;}
.teacher-icon{
display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px;
border-radius:50%; background:var(--paper-dim); color:var(--seal);
font-family:var(--zh-serif); font-size:1.35rem; font-weight:700;
}
.teacher-level-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px;}
.teacher-level{
display:grid; gap:9px; padding:22px; background:var(--card); border:1px solid var(--line);
border-radius:var(--radius); color:var(--ink); transition:transform .18s,border-color .18s;
}
.teacher-level:hover{transform:translateY(-2px); border-color:var(--brass); text-decoration:none;}
.teacher-level .badge{justify-self:start;}
.teacher-level>span:last-child{color:var(--ink-soft); font-size:.84rem;}
.teacher-level b{color:var(--seal);}
.teacher-steps{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.teacher-steps li{display:flex; gap:16px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);}
.teacher-steps li>span{flex:0 0 36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--seal); color:#fff; font-weight:700;}
.teacher-steps p{margin:6px 0 0; color:var(--ink-soft); font-size:.9rem;}
.teacher-links{margin-top:22px;}
.teacher-links a{color:var(--ink);}
.teacher-links a:hover{text-decoration:none; border-color:var(--brass);}
.teacher-links a>span{color:var(--jade); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700;}
.teacher-links a>b{color:var(--seal); font-size:.88rem;}
.teacher-cta-section{padding-top:20px;}
.teacher-cta{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:clamp(26px,5vw,48px); background:var(--ink); border-radius:var(--radius); color:var(--paper);}
.teacher-cta h2{color:var(--paper);}
.teacher-cta p{max-width:650px; color:#d9d1c0; margin-bottom:0;}
.teacher-cta .eyebrow{color:var(--brass);}
.teacher-cta .btn{flex:0 0 auto;}
.teacher-path-grid{margin-top:26px;}
.teacher-path{display:flex; flex-direction:column; align-items:flex-start;}
.teacher-path.free{border-top:4px solid var(--jade);}
.teacher-path.paid{border-top:4px solid var(--brass);}
.teacher-path-label{display:inline-flex; margin-bottom:14px; padding:5px 10px; border-radius:999px; background:var(--paper-dim); color:var(--ink-soft); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.teacher-path p{flex:1;}
.teacher-path a{color:var(--seal); font-weight:700;}
.teacher-preview-banner{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding:20px 22px; border:1px solid var(--line); border-left:4px solid var(--brass); border-radius:var(--radius); background:var(--card);}
.teacher-preview-banner p{margin:5px 0 0; color:var(--ink-soft); font-size:.88rem;}
.teacher-pack-list{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.teacher-pack{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.teacher-pack[open]{border-color:var(--brass);}
.teacher-pack>summary{cursor:pointer; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px; padding:16px 20px;}
.teacher-pack>summary::before{display:none;}
.teacher-pack-title{display:flex; flex-direction:column;}
.teacher-pack-title small{margin-top:2px; color:var(--ink-soft); font-size:.82rem;}
.teacher-pack-number{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--seal); color:#fff; font-weight:700;}
.teacher-pack-status{color:var(--ink-soft); font-size:.76rem;}
.teacher-pack-body{padding:20px; border-top:1px solid var(--line);}
.teacher-pack-goal{margin-top:0;}
.teacher-preview-tags{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0;}
.teacher-preview-tags span{padding:6px 10px; border-radius:999px; background:var(--paper-dim); color:var(--ink-soft); font-size:.76rem; font-weight:600;}
.teacher-preview-note{max-width:760px; color:var(--ink-soft); font-size:.86rem;}
.teacher-inclusion-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px;}
.teacher-inclusion-grid article{padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);}
.teacher-inclusion-grid article>b{color:var(--brass); font-family:var(--serif); font-size:1.1rem;}
.teacher-inclusion-grid h3{margin:10px 0 6px;}
.teacher-inclusion-grid p{margin:0; color:var(--ink-soft); font-size:.88rem;}
/* ---------- mobile refinements ---------- */
@media(max-width:760px){
.utility-bar .wrap{justify-content:center; gap:16px; text-align:center;}
.hero{padding:44px 0 28px;}
.level-strip{padding:24px 0;}
.cert-border{padding:28px 18px;}
.cert-name{font-size:1.5rem;}
.cert-title{font-size:1.4rem;}
.streak-cards{grid-template-columns:1fr;}
.streak-layout{grid-template-columns:1fr;}
.search-vocab-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
.mw-grid, .rad-grid{grid-template-columns:1fr;}
.cert-footer{flex-direction:column; gap:6px; text-align:center;}
.teacher-section-head{align-items:start;}
.teacher-level-grid,.teacher-steps{grid-template-columns:1fr;}
.teacher-inclusion-grid{grid-template-columns:repeat(2,1fr);}
.teacher-preview-banner{align-items:flex-start; flex-direction:column;}
.teacher-cta{align-items:flex-start; flex-direction:column;}
}
@media(max-width:480px){
.hero h1{font-size:1.7rem;}
.cert-name{font-size:1.25rem;}
.streak-cal-wrap{padding:14px;}
.teacher-inclusion-grid{grid-template-columns:1fr;}
.teacher-pack>summary{grid-template-columns:40px 1fr; padding:14px;}
.teacher-pack-status{grid-column:2;}
}
/* Audio availability feedback (shown only when browser speech fails). */
.speech-notice{
position:fixed;
left:50%;
bottom:24px;
z-index:10000;
max-width:min(92vw,520px);
padding:12px 16px;
border-radius:10px;
background:#263f38;
color:#fff;
box-shadow:0 8px 28px rgba(0,0,0,.22);
font-size:.9rem;
line-height:1.4;
opacity:0;
pointer-events:none;
transform:translate(-50%,12px);
transition:opacity .18s ease,transform .18s ease;
}
.speech-notice.show{opacity:1;transform:translate(-50%,0)}
.gram-drill-feedback{margin:14px 0 0;color:var(--ink-soft)}
/* ---------- restored lesson system (kept after teacher-page updates) ---------- */
@media(max-width:760px){
td.zh .speak-btn{display:flex;margin:8px auto 0;}
.stair-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;}
.stair-step{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.stair-step:nth-child(2n){border-right:none;}
.stair-step:nth-last-child(-n+2){border-bottom:none;}
}
@media(max-width:480px){
.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;}
.footer-brand{grid-column:1/-1;}
.footer-column{min-width:0;gap:7px;}
.footer-column h2{font-size:.64rem;letter-spacing:.035em;overflow-wrap:anywhere;}
.footer-column a,.footer-column .cookie-preferences{font-size:.72rem;line-height:1.3;overflow-wrap:anywhere;}
}
.lesson-overview{align-items:stretch;}
.lesson-overview>*,.objective-card,.toc-card{height:100%;}
.objective-card{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);}
.toc-card{padding:clamp(22px,3vw,32px);}
.dashboard-goal{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--jade);border-radius:var(--radius);}
.dashboard-goal p{margin:5px 0 0;color:var(--ink-soft);font-size:.88rem;}
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.route-card{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;}
.route-card:hover,.route-card.active{border-color:var(--brass);text-decoration:none;}
.route-card>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.route-state,.route-link{font-size:.76rem;color:var(--ink-soft);}
.route-link{color:var(--seal);font-weight:700;}
.recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.recent-card{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--line);background:var(--card);border-radius:var(--radius);color:var(--ink);text-decoration:none;}
.recent-card:hover{border-color:var(--brass);text-decoration:none;}
.recent-card span,.recent-card small{color:var(--ink-soft);font-size:.76rem;}
.pilot-mission{display:grid;gap:.35rem;margin-top:1.25rem;padding:1rem 1.1rem;border-left:4px solid var(--seal);background:color-mix(in srgb,var(--paper) 88%,var(--seal) 12%);border-radius:0 10px 10px 0;}
.pilot-mission span{color:var(--ink-soft);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.pilot-dialogue-card{width:100%;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 12px 35px rgba(31,28,24,.07);}
.pilot-dialogue-line{display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;padding:1.2rem;border-bottom:1px solid var(--line);}
.pilot-dialogue-line:last-child{border-bottom:0;}
.pilot-speaker{align-self:start;padding:.35rem .45rem;border-radius:999px;background:var(--ink);color:var(--paper);font:600 .85rem/1.2 "Noto Sans SC",sans-serif;text-align:center;}
.pilot-zh{color:var(--ink);font:600 1.28rem/1.55 "Noto Sans SC",sans-serif;}
.pilot-py{margin-top:.1rem;color:var(--seal);font-size:.92rem;}
.pilot-translation{margin-top:.45rem;}
.pilot-translation summary{color:var(--jade-dark);cursor:pointer;font-size:.82rem;font-weight:700;}
.pilot-translation p{margin:.45rem 0 0;color:var(--ink-soft);}
.pilot-tip,.pilot-production,.pilot-question,.pilot-result{padding:1.25rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);}
.equal-cards>*{height:100%;}
.lesson-more-section{padding-top:28px;padding-bottom:60px;}
.lesson-more,.lesson-fold{width:100%;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 12px 35px rgba(31,28,24,.06);}
.lesson-more>summary,.lesson-fold>summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:112px;padding:24px clamp(22px,4vw,38px);cursor:pointer;}
.lesson-more>summary::before,.lesson-fold>summary::before{display:none;}
.lesson-more>summary>span,.lesson-fold>summary>span{display:grid;gap:4px;}
.lesson-more>summary strong,.lesson-fold>summary strong{font-family:var(--serif);font-size:1.35rem;color:var(--ink);}
.lesson-more>summary small,.lesson-fold>summary small{max-width:470px;color:var(--ink-soft);text-align:right;line-height:1.5;}
.lesson-more>summary::after,.lesson-fold>summary::after{content:"+";flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--jade);color:#fff;font-size:1.35rem;}
.lesson-more[open]>summary,.lesson-fold[open]>summary{border-bottom:1px solid var(--line);}
.lesson-more[open]>summary::after,.lesson-fold[open]>summary::after{content:"−";}
.lesson-more-content{padding:0 clamp(22px,4vw,38px);}
.lesson-more-content>section{padding:42px 0;border-bottom:1px solid var(--line);}
.lesson-more-content>section:last-child{border-bottom:0;}
.lesson-fold-section{padding-top:28px;padding-bottom:28px;}
.lesson-fold-content{padding:32px clamp(22px,4vw,38px) 38px;}
.lesson-fold-content>.cache-note:first-child{margin-top:0;}
.pilot-tip p,.pilot-production p{margin:.75rem 0 0;}
.pilot-production{max-width:780px;border-top:4px solid var(--jade);}
.pilot-production .btn{margin-top:1rem;}
.pilot-help{margin-top:1rem!important;padding:.85rem 1rem;border-radius:10px;background:var(--paper-warm);color:var(--ink-soft);}
.pilot-check{display:grid;gap:1rem;width:100%;max-width:none;margin-top:1.5rem;}
.lesson-game-row{margin-top:20px;align-items:stretch;}
.lesson-game-row:first-of-type{margin-top:0;}
.lesson-game-row>.game-box{height:100%;}
.pilot-question p{margin-top:0;}
.pilot-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;}
.pilot-options button{min-height:46px;padding:.65rem .75rem;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;}
.pilot-options button:hover:not(:disabled){border-color:var(--jade);}
.pilot-options button.correct{border-color:#2f7d57;background:#e8f5ed;}
.pilot-options button.incorrect{border-color:var(--seal);background:#f9e8e5;}
.pilot-feedback{margin:.9rem 0 0!important;color:var(--ink-soft);}
.pilot-result{border:0;background:var(--ink);color:var(--paper);}
.pilot-result p{margin:.4rem 0 0;color:#e5dfd3;}
.writing-copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0 28px;}
.writing-copy-item{display:grid;gap:3px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.writing-copy-item .zh{font:600 1.45rem/1.35 var(--zh-sans);}
.writing-copy-item>span:not(.zh){color:var(--seal);font-size:.88rem;}
.writing-copy-item small{color:var(--ink-soft);}
.practice-task-list{display:grid;gap:14px;margin-top:22px;}
.practice-task{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--paper);}
.practice-task h3{margin:4px 0 8px;font-size:1.03rem;}
.practice-task p{margin:0 0 10px;}
.task-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--jade);color:#fff;font-weight:700;}
.task-source{margin:12px 0;padding:13px 15px;border-left:4px solid var(--brass);border-radius:0 9px 9px 0;background:var(--paper-warm);}
.answer-reveal{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.answer-reveal summary{cursor:pointer;color:var(--jade-dark);font-size:.86rem;font-weight:700;}
.answer-zh{margin-top:12px;font:600 1.15rem/1.55 var(--zh-sans);}
.answer-py{margin-top:3px;color:var(--seal);font-size:.9rem;}
.token-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.token-row span{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper-warm);font-family:var(--zh-sans);}
.culture-reflection{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.culture-reflection p{margin:10px 0 0;}
.cumulative-review-section{padding:36px 0;background:color-mix(in srgb,var(--paper-warm) 82%,var(--brass) 18%);}
.cumulative-review-card{padding:clamp(24px,4vw,42px);border:1px solid color-mix(in srgb,var(--line) 70%,var(--brass) 30%);border-radius:20px;background:var(--card);box-shadow:var(--shadow);}
.review-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin-top:24px;}
.review-chip-list{display:flex;flex-wrap:wrap;gap:9px;}
.review-chip{display:grid;gap:2px;min-width:105px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);}
.review-chip small{color:var(--ink-soft);}
.review-grammar-list{margin:0;padding-left:20px;}
.assessment-divider{display:flex;align-items:center;gap:14px;margin:30px 0 18px;color:var(--seal);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.assessment-divider::before,.assessment-divider::after{content:"";height:1px;flex:1;background:var(--line);}
.self-check-list{margin:12px 0 0;padding-left:20px;}
@media(max-width:760px){
.route-grid,.recent-grid{grid-template-columns:1fr;}
.dashboard-goal{align-items:flex-start;flex-direction:column;}
}
@media(max-width:640px){
.pilot-dialogue-line{grid-template-columns:52px minmax(0,1fr);gap:.75rem;padding:1rem;}
.pilot-speaker{font-size:.74rem;}
.pilot-zh{font-size:1.1rem;}
.pilot-options{grid-template-columns:1fr;}
.review-layout{grid-template-columns:1fr;}
.practice-task{grid-template-columns:32px minmax(0,1fr);padding:16px;gap:10px;}
.task-number{width:30px;height:30px;}
.lesson-more>summary,.lesson-fold>summary{align-items:flex-start;padding:20px;flex-wrap:wrap;gap:10px;}
.lesson-more>summary{min-height:0;}
.lesson-more>summary small,.lesson-fold>summary small{width:calc(100% - 50px);text-align:left;}
.lesson-more>summary::after,.lesson-fold>summary::after{margin-left:auto;margin-top:-44px;}
.lesson-fold-content{padding:24px 20px 30px;}
.toc-list a{align-items:flex-start;}
.toc-list a .toc-n{white-space:normal;text-align:right;}
}
/* ---------- placement assessment ---------- */
.placement-skill-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--paper-dim);color:var(--jade-dark);font-size:.75rem;font-weight:700;}
.placement-progress{height:7px;margin:12px 0 24px;overflow:hidden;border-radius:999px;background:var(--paper-dim);}
.placement-progress span{display:block;height:100%;border-radius:inherit;background:var(--jade);transition:width .25s ease;}
.placement-prompt{margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.placement-prompt .zh{font-size:1.35rem;}
.placement-listen{display:flex;align-items:center;gap:14px;}
.placement-listen .speak-btn{width:46px;height:46px;font-size:1.1rem;}
.placement-skill-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px auto 0;max-width:620px;}
.level-test-intro .placement-skill-summary{margin-bottom:28px;}
.level-test-intro .cache-note{display:block;margin:0 auto 18px;line-height:1.55;clear:both;}
.placement-skill-row{padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--card);}
.placement-skill-row b,.placement-skill-row span{display:block;}
.placement-skill-row span{margin-top:3px;color:var(--ink-soft);font-size:.82rem;}
@media(max-width:540px){
.placement-skill-summary{grid-template-columns:1fr;}
}
/* Level-page action links remain one coordinated row, wrapping only when the
viewport genuinely needs it. */
.level-strip-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;}
.vocab-load-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;}
.vocab-load-actions span{color:var(--ink-soft);font-size:.86rem;}
/* Final palette precedence: legacy component rules above retain their layout,
while these declarations own color and shape only. */
.utility-bar{background:#113B37;}
.topnav{background:rgba(255,253,249,.94);}
.btn{border-radius:999px;background:var(--jade);border-color:var(--jade);color:#fff;box-shadow:0 5px 14px rgba(31,138,112,.18);}
.btn:hover{background:var(--jade-dark);border-color:var(--jade-dark);color:#fff;}
.btn.coral{background:var(--seal);border-color:var(--seal);}.btn.coral:hover{background:var(--seal-dark);border-color:var(--seal-dark);}
.btn.ghost{background:transparent;color:var(--jade-dark);box-shadow:none;}
body[class*="hsk-level-"] .badge,
body[class*="hsk-level-"] .progress-fill,
body[class*="hsk-level-"] .btn:not(.ghost){background:var(--hsk-accent);border-color:var(--hsk-accent);}
body[class*="hsk-level-"] .lesson-fold>summary{border-left:4px solid var(--hsk-accent);}
/* ---------- breadcrumbs + contextual internal links ---------- */
.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:.82rem;color:#596763;font-weight:600;}
.breadcrumbs a{color:#344844;text-decoration:none;}.breadcrumbs a:hover{color:var(--seal-dark);text-decoration:underline;}
.level-strip .breadcrumbs{color:#d8d2c4}.level-strip .breadcrumbs a{color:#fff3df}.level-strip .breadcrumbs a:hover{color:#fff;}
.lesson-related{padding-top:24px;}
.lesson-related-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:.86rem;}
.lesson-related-links>span{font-weight:700;color:var(--ink-soft);margin-right:2px;}
.lesson-related-links a{padding:4px 9px;border-radius:999px;background:#edf5f2;color:var(--jade-dark);font-weight:700;}
/* ---------- tone practice reference ---------- */
.tone-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:24px;}
.tone-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center;box-shadow:var(--shadow);}
.tone-card .tone-number{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:800;}
.tone-card .tone-syllable{font-family:var(--zh-serif);font-size:2.5rem;line-height:1.15;color:var(--jade-dark);margin:8px 0 2px;}
.tone-card .tone-py{font-weight:800;color:var(--seal);}
.tone-contour{width:100%;height:52px;margin:8px auto 4px;display:block;}
.tone-practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.tone-practice-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;}
.tone-practice-card h3{margin-bottom:8px;}.tone-practice-card .zh{font-size:1.55rem;color:var(--jade-dark);}
.tone-rule{padding:18px 20px;border-left:4px solid var(--brass);background:#fff8e8;border-radius:0 14px 14px 0;margin:14px 0;}
.tone-listen-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
@media(max-width:800px){.tone-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tone-card:last-child{grid-column:1/-1}.tone-practice-grid{grid-template-columns:1fr;}}
/* ---------- optional project-support CTA ---------- */
.support-cta{position:relative;display:inline-block;}
.support-cta>summary{list-style:none;cursor:pointer;}.support-cta>summary::-webkit-details-marker{display:none;}
.support-popover{position:absolute;z-index:12;left:0;top:calc(100% + 8px);min-width:190px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:grid;gap:4px;}
.support-popover a{padding:9px 11px;border-radius:8px;color:var(--ink);font-weight:700;white-space:nowrap;}
.support-popover a:hover{background:#edf5f2;text-decoration:none;color:var(--jade-dark);}
@media(max-width:600px){.support-popover{left:auto;right:0;}}
.audio-fallback-note{max-width:760px;margin:12px 0 24px;padding:12px 14px;border:1px solid rgba(178,58,46,.2);border-radius:12px;background:rgba(178,58,46,.05);font-size:.94rem;}
/* ---------- expanded tone-practice exercises ---------- */
.tone-scale{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#edf5f2;color:var(--jade-dark);font-size:.7rem;font-weight:800;vertical-align:middle;}
.tone-action{min-height:86px;margin:8px 0 10px;font-size:.84rem;line-height:1.5;color:var(--ink-soft);text-align:left;}
.tone-gesture-tip{max-width:860px;margin:22px auto 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#fff8e8;color:var(--ink-soft);}
.tone-exercise-block{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);}
.tone-exercise-head{margin-bottom:18px}.tone-exercise-head h3{margin:7px 0 5px}.tone-exercise-head p{margin:0;color:var(--ink-soft);}
.tone-quiz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.tone-q{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;}
.tone-q-py{display:block;text-align:center;font-size:1.55rem;font-weight:800;color:var(--seal);margin-bottom:12px;}
.tone-choice-row{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;}
.tone-choice-row button{min-width:42px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:800;cursor:pointer;}
.tone-choice-row.wide button{min-width:88px;}
.tone-choice-row button:hover{border-color:var(--jade);background:#edf5f2;}
.tone-choice-row button.is-correct{border-color:var(--hsk1-main);background:var(--hsk1-secondary);color:#0f5f4e;}
.tone-choice-row button.is-wrong{border-color:#b23a2e;background:#fff0ed;color:#8e2e24;}
.tone-feedback{display:block;min-height:1.4em;margin-top:10px;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink-soft);}
.tone-feedback.ok{color:#0f6e58}.tone-feedback.no{color:#9b352b}
.tone-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.tone-pair-q p{margin:0 0 10px;text-align:center}.tone-listen-row.compact{justify-content:center;margin-top:10px}.tone-listen-row.compact .speak-btn{width:auto;padding:7px 10px;border-radius:10px;}
.tone-sandhi-list{display:grid;gap:10px}.tone-sandhi-q{display:grid;grid-template-columns:minmax(180px,1fr) auto;align-items:center;gap:14px;}.tone-sandhi-q .tone-feedback{grid-column:1/-1;margin-top:0;}
.tone-production-steps{margin:0;padding-left:1.3rem}.tone-production-steps li{margin:10px 0;line-height:1.6}.tone-production-steps .zh{font-size:1.1rem;color:var(--jade-dark);}
.tone-score-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:20px 0 28px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;}.tone-score-row p{margin:0;font-weight:700;color:var(--ink-soft);}
@media(max-width:1000px){.tone-quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tone-action{min-height:0;}}
@media(max-width:680px){.tone-quiz-grid,.tone-pair-grid{grid-template-columns:1fr}.tone-sandhi-q{grid-template-columns:1fr}.tone-sandhi-q .tone-choice-row{justify-content:flex-start}.tone-sandhi-q .tone-feedback{text-align:left}.tone-exercise-block{padding:17px}.tone-score-row{align-items:flex-start;}}
/* ---------- reference hub + pronunciation guide ---------- */
.reference-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px;}
.reference-hub-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .18s ease,border-color .18s ease;}
.reference-hub-card:hover{transform:translateY(-2px);border-color:rgba(31,138,112,.45);text-decoration:none;}
.reference-hub-card h3{margin:6px 0 7px}.reference-hub-card p{margin:0 0 10px;color:var(--ink-soft);}.reference-hub-card b{color:var(--jade-dark)}
.ref-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#edf5f2;color:var(--jade-dark);font-family:var(--zh-serif);font-size:1.7rem;font-weight:700;}
.level-link-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.pron-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.pron-pair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;}
.pron-pair{display:grid;gap:5px;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:var(--card);}
.pron-pair b{color:var(--seal);font-size:1.12rem}.pron-pair .zh{font-size:1.08rem;color:var(--jade-dark)}.pron-pair small{color:var(--ink-soft)}
.pron-example{font-size:1.25rem;color:var(--jade-dark);}
.pron-quiz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.pron-q{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);}.pron-q h3{margin:0 0 14px;font-size:1rem;line-height:1.5;}
.pron-options{display:grid;gap:8px;}.pron-options button{display:flex;align-items:flex-start;gap:9px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;}
.pron-options button>span{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;background:var(--paper-dim);font-weight:800;}
.pron-options button:hover{border-color:var(--jade);background:#edf5f2}.pron-options button.is-correct{border-color:var(--hsk1-main);background:var(--hsk1-secondary)}.pron-options button.is-wrong{border-color:#b23a2e;background:#fff0ed}
.pron-feedback{min-height:1.2em;margin:10px 0 0;font-size:.85rem;font-weight:800}.pron-feedback.ok{color:#0f6e58}.pron-feedback.no{color:#9b352b}.pron-explain{margin:5px 0 0;color:var(--ink-soft);font-size:.88rem;line-height:1.5;}
.production-ladder{max-width:820px;padding-left:1.4rem}.production-ladder li{margin:11px 0;line-height:1.6;}
/* ---------- end-of-level checkpoints ---------- */
.checkpoint-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}.checkpoint-intro h2{margin-top:0}.checkpoint-intro li{margin:8px 0;}
.checkpoint-rule{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff8e8}.checkpoint-rule strong{font-size:1.05rem;color:var(--brass-dark)}.checkpoint-rule p{margin-bottom:0;color:var(--ink-soft)}
.checkpoint-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0;padding:0;list-style:none}.checkpoint-map li{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.checkpoint-map li span{font-size:.82rem;color:var(--ink-soft)}
.checkpoint-list{max-width:980px}.checkpoint-task .tag{display:inline-flex;margin-bottom:6px}.checkpoint-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px;}
/* ---------- smarter progress review ---------- */
.review-now-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.review-now-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}.review-now-icon{font-size:1.6rem}.review-now-card h3{margin:6px 0}.review-now-card p{margin:0 0 14px;color:var(--ink-soft);font-size:.9rem;line-height:1.55}.weak-word-pagination{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}.weak-word-page-status{color:var(--ink-soft);font-size:.86rem;font-weight:700;}
/* ---------- accessibility + resilient interaction ---------- */
.skip-link{position:fixed;z-index:9999;top:8px;left:8px;transform:translateY(-180%);padding:10px 14px;border-radius:10px;background:#111;color:#fff;font-weight:800;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.skip-link:focus{transform:translateY(0);color:#fff;}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #d58a25;outline-offset:3px;}
button,.btn,.navdrop-btn,.nav-toggle{touch-action:manipulation;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}
@media(max-width:820px){.reference-hub-grid,.pron-principles,.pron-quiz,.checkpoint-map,.checkpoint-intro,.review-now-grid{grid-template-columns:1fr}.pron-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.reference-hub-card{grid-template-columns:50px minmax(0,1fr);padding:17px}.ref-icon{width:46px;height:46px;font-size:1.35rem}.pron-pair-grid{grid-template-columns:1fr}.checkpoint-actions .btn{width:100%;justify-content:center}}
/* ---------- mobile readability/performance guardrails ---------- */
.btn,.nav-toggle,.navdrop-btn{min-height:44px;}
.speak-btn{min-width:40px;min-height:40px;touch-action:manipulation;}
@media(max-width:640px){
table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
th,td{min-width:112px;}
.wrap{overflow-wrap:anywhere;}
}
/* ---------- contrast-safe interactive accents ---------- */
:root{--pinyin:#A64B2A;}
.btn:not(.ghost){background:var(--jade);border-color:var(--jade);color:#fff;}
.btn:not(.ghost):hover{background:#174C46;border-color:#174C46;color:#fff;}
.btn.coral{background:#B23A2E;border-color:#B23A2E;color:#fff;}.btn.coral:hover{background:#8F2C22;border-color:#8F2C22;color:#fff;}
body[class*="hsk-level-"] .badge,body[class*="hsk-level-"] .btn:not(.ghost){background:var(--hsk-accent);border-color:var(--hsk-accent);color:var(--hsk-on-main);}
body[class*="hsk-level-"] .progress-fill{background:var(--hsk-accent);}
/* ---------- next-release commercial + learning UI ---------- */
.level-materials-section{padding-top:6px;padding-bottom:28px;}
.level-materials{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fffdf9,#f3f7f4);box-shadow:var(--shadow);}
.level-materials h2{margin:5px 0 6px;font-size:1.35rem}.level-materials p{margin:0;color:var(--ink-soft);max-width:700px}.level-material-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}.level-material-actions .btn{white-space:nowrap}
.resource-disclosure-section{padding-top:12px;padding-bottom:20px}.resource-disclosure{padding:15px 18px;border:1px solid rgba(31,138,112,.24);border-radius:14px;background:#edf7f3;color:var(--ink-soft);line-height:1.55}.resource-disclosure strong{color:var(--jade-dark)}.resource-internal-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:.86rem}.resource-internal-links span{font-weight:800;color:var(--ink-soft)}.resource-internal-links a{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700}.affiliate-mark{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:#fff0e9;color:#9a452f;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.affiliate-context{margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff8e8;color:var(--ink-soft)}.affiliate-context a{font-weight:800}.affiliate-context small{display:inline-block;margin-left:6px;color:var(--ink-soft)}
.support-section{padding-top:34px;padding-bottom:34px}.support-panel{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#fff7ef,#f2f8f5);box-shadow:var(--shadow)}.support-panel h2{margin:5px 0 7px}.support-panel p{margin:0;max-width:720px;color:var(--ink-soft)}.about-support{padding-top:34px;padding-bottom:34px}
.pron-lab-nav-section{padding:0 0 10px}.pron-lab-nav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}.pron-lab-nav>span{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-right:5px}.pron-lab-nav a{padding:8px 12px;border-radius:999px;font-size:.88rem;font-weight:800;color:var(--jade-dark);border:1px solid transparent}.pron-lab-nav a:hover{background:#edf5f2;text-decoration:none}.pron-lab-nav a.active{background:var(--jade-dark);color:#fff}
.teacher-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.55fr);gap:40px;align-items:center}.teacher-mascot{text-align:center}.teacher-mascot img{width:min(100%,330px);height:auto;filter:drop-shadow(0 15px 20px rgba(23,76,70,.12))}.teacher-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.teacher-product{background:#fff;border:1px solid var(--line);border-top:5px solid var(--hsk-accent);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.teacher-product-head{display:flex;align-items:center;gap:12px}.teacher-product h3{margin:0}.teacher-product p{color:var(--ink-soft);min-height:3.2em}.teacher-product-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 13px}.teacher-product-actions .btn{font-size:.84rem}.teacher-product .badge,.teacher-product .btn:not(.ghost){background:var(--hsk-accent);border-color:var(--hsk-accent);color:var(--hsk-on-main)}.teacher-product .btn:not(.ghost):hover,.teacher-product .btn:not(.ghost):focus-visible{background:var(--hsk-accent-soft);border-color:var(--hsk-accent);color:var(--ink)}.teacher-product .btn.ghost{background:#fff;border-color:var(--hsk-accent);color:var(--ink)}.teacher-product .btn.ghost:hover,.teacher-product .btn.ghost:focus-visible{background:var(--hsk-accent);border-color:var(--hsk-accent);color:var(--hsk-on-main)}.teacher-free-link{display:inline-block;border-radius:8px;padding:5px 7px;margin-left:-7px;font-size:.82rem;font-weight:800;color:var(--ink);text-decoration-color:var(--hsk-accent);text-decoration-thickness:2px}.teacher-free-link:hover,.teacher-free-link:focus-visible{background:#fff;color:var(--ink);outline:2px solid var(--hsk-accent);outline-offset:2px}
.checkpoint-diagnostic{margin-top:20px}.checkpoint-diagnostic .game-box{margin-top:0}
@media(max-width:800px){.level-materials,.support-panel{align-items:flex-start;flex-direction:column}.teacher-hero-grid,.teacher-product-grid{grid-template-columns:1fr}.teacher-mascot{order:-1;text-align:left}.teacher-mascot img{width:180px}.level-material-actions{width:100%}.level-material-actions .btn{flex:1;text-align:center}}
@media(max-width:560px){.pron-lab-nav{align-items:stretch}.pron-lab-nav>span{width:100%}.pron-lab-nav a{flex:1;text-align:center}.teacher-product-actions .btn,.level-material-actions .btn{width:100%;flex:none}.support-panel{padding:20px}.level-materials{padding:18px}}
.reference-cluster{margin:0 0 30px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.reference-cluster-head{max-width:760px;margin-bottom:16px}.reference-cluster-head h3{margin:7px 0 6px;font-size:1.35rem}.reference-cluster-head p{margin:0;color:var(--ink-soft)}
.reference-hub-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.reference-hub-grid.two{grid-template-columns:1fr}.reference-cluster{padding:16px}}
/* ---------- 2026-08-30 final mobile + pronunciation polish ---------- */
/* Keep desktop hover feedback from becoming a sticky pre-selected answer on touch Safari. */
@media (hover:hover) and (pointer:fine){
}
@media (hover:none), (pointer:coarse){
.quiz-opt:hover{background:var(--card);}
.quiz-opt.correct:hover{background:var(--jade);}
.quiz-opt.wrong:hover{background:var(--seal);}
}
/* The skill label gets its own line above the explanatory sentence on small screens. */
@media(max-width:600px){
.diagnostic-stage{display:grid;grid-template-columns:1fr;gap:7px;align-items:start;}
.diagnostic-stage span{width:max-content;max-width:100%;}
.diagnostic-stage small{display:block;line-height:1.45;}
}
/* Keep the Chinese word and its audio control visually attached in narrow vocab tables. */
.vocab-zh-cell{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;white-space:nowrap;}
.vocab-zh-cell>.speak-btn{margin-left:0;flex:0 0 auto;}
@media(max-width:560px){
td.zh{vertical-align:top;}
.vocab-zh-cell{display:flex;width:max-content;max-width:100%;align-items:center;}
}
/* Stronger but still restrained CTAs. */
.home-actions .support-direct,.home-actions .support-cta>summary{border:2px solid var(--brass);background:var(--brass);color:var(--ink);}
.home-actions .support-direct:hover,.home-actions .support-cta>summary:hover{border-color:#cf9c4c;background:#cf9c4c;color:var(--ink);}
.home-actions .support-direct:focus-visible,.home-actions .support-cta>summary:focus-visible{outline:3px solid #80530d;outline-offset:3px;}
.teacher-home-cta{border:2px solid var(--jade-dark)!important;color:var(--jade-dark)!important;background:#f4faf7!important;}
.teacher-home-cta:hover{background:#e3f2ec!important;}
.level-material-actions .btn.ghost{border:2px solid var(--jade-dark);color:var(--jade-dark);background:#fff;}
.level-material-actions .btn.ghost:hover{background:var(--jade-dark);color:#fff;}
/* Home HSK staircase uses equal cells; vocabulary counts remain informational, not geometry. */
.stair-row .stair-step{flex:1 1 0!important;min-width:0;}
/* Restore the character to the About hero so the standalone “¿O no?” stamp has context. */
.about-phrase-card{position:relative;overflow:visible;}
.about-hero-panda{display:block;width:min(150px,42vw);height:auto;object-fit:contain;margin:-74px auto 6px;}
@media(max-width:760px){.about-hero-panda{margin:-35px auto 8px;width:130px;}}
/* Download collections and level packs. */
.teacher-collections{padding-bottom:18px;}
.teacher-collection-card{display:flex;flex-direction:column;min-height:180px;color:var(--ink);}
.teacher-collection-card span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--jade-dark);font-weight:800;}
.teacher-collection-card h3{margin-top:8px;flex:1;}
.teacher-collection-card b{color:var(--seal);}
.teacher-collection-card:hover{text-decoration:none;border-color:var(--jade);transform:translateY(-2px);}
/* One pronunciation laboratory, two keyboard-accessible panels. */
.pron-lab-tabs-section{padding:0 0 18px;position:sticky;top:0;z-index:20;background:linear-gradient(to bottom,var(--paper) 75%,rgba(247,245,239,0));}
.pron-lab-tabs{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow);}
.pron-lab-tabs button{min-height:52px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--jade-dark);font:800 .9rem var(--sans);padding:10px 16px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;}
.pron-lab-tabs button[aria-selected="true"]{background:var(--jade-dark);color:#fff;border-color:var(--jade-dark);}
.pron-lab-tabs button:hover{border-color:var(--jade);}
.pron-lab-panel[hidden]{display:none!important;}
.audio-provisional-note{margin-top:22px;max-width:760px;}
.pronunciation-target-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.pronunciation-target-actions .btn{padding:9px 12px;}
.pronunciation-assessment-section{padding:12px 0 36px;}
.pronunciation-assessment-shell{padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,var(--card),var(--hsk1-secondary));box-shadow:var(--shadow);}
.pronunciation-assessment-copy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);gap:30px;align-items:end;margin-bottom:22px;}
.pronunciation-assessment-copy h2{margin:6px 0 0;}.pronunciation-assessment-copy p{margin:0;color:var(--ink-soft);line-height:1.65;}
.pronunciation-target-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;}
.pronunciation-target{display:flex;flex-direction:column;padding:18px;border:1px solid rgba(31,138,112,.25);border-radius:16px;background:#fff;}
.pronunciation-target .zh{margin:0;font-size:1.65rem;color:var(--jade-dark);}.pronunciation-target .pinyin{margin:4px 0 10px;font-weight:800;}.pronunciation-target>p:not(.zh):not(.pinyin){margin:0 0 16px;color:var(--ink-soft);font-size:.86rem;line-height:1.5;}.pronunciation-target .btn{width:100%;margin-top:auto;}
.pronunciation-status{min-height:1.5em;margin:18px 0 0;color:var(--ink-soft);font-weight:700;}
.pronunciation-result{margin-top:12px;padding:18px 20px;border:1px solid var(--hsk1-main);border-radius:16px;background:#fff;}
.pronunciation-result-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}.pronunciation-result-head .tag{background:var(--hsk1-secondary);color:var(--jade-dark);}.pronunciation-result p{margin:7px 0;}.pronunciation-result .zh{color:var(--jade-dark);font-size:1.12rem;}
.pronunciation-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:14px 0;}.pronunciation-scores>div{padding:11px;border-radius:12px;background:var(--hsk1-secondary);text-align:center;}.pronunciation-scores dt{font-size:.72rem;color:var(--ink-soft);font-weight:700;}.pronunciation-scores dd{margin:3px 0 0;font-size:1.45rem;font-weight:800;color:var(--jade-dark);}
.browser-match strong{font-size:1.25rem;color:var(--jade-dark);}.pronunciation-result-note,.pronunciation-privacy{font-size:.82rem;color:var(--ink-soft);line-height:1.55;}.pronunciation-privacy{margin:13px 0 0;}.pronunciation-privacy a{font-weight:800;}
.pronunciation-lab-page .pron-lab-nav-section{display:none;}
.pronunciation-lab-page .speak-btn{vertical-align:middle;}
@media(max-width:560px){
.pron-lab-tabs{grid-template-columns:1fr 1fr;gap:6px;padding:6px;}
.pron-lab-tabs button{min-height:58px;padding:9px 8px;font-size:.82rem;}
.pronunciation-assessment-shell{padding:20px 16px;}.pronunciation-assessment-copy{grid-template-columns:1fr;gap:10px;}.pronunciation-target-grid,.pronunciation-scores{grid-template-columns:1fr;}
}
@media(min-width:561px) and (max-width:1000px){.pronunciation-target-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Button text should sit optically in the middle of CTA controls. */
.btn,.pron-lab-nav a,.teacher-product-actions .btn,.level-material-actions .btn{justify-content:center;text-align:center;line-height:1.25;}
/* ---------- 2026-08-30 small visual patch ---------- */
/* Exercise 4 contains longer labels than the single-syllable tone cards. */
.tone-written-test .tone-q-py{font-size:1.08rem;line-height:1.32;min-height:2.7em;display:flex;align-items:center;justify-content:center;}
@media(max-width:680px){.tone-written-test .tone-q-py{font-size:1rem;min-height:0;}}
/* HSK 3 requested palette: gold is dominant, warm cream is the secondary surface.
Dark text on gold preserves AA contrast where the accent is used as a fill. */
body.hsk-level-3 .badge,body.hsk-level-3 .btn:not(.ghost){color:#2f2f2b;}
body.hsk-level-3 .hero .eyebrow,body.hsk-level-3 .lesson-fold .eyebrow,body.hsk-level-3 .stair-caption strong,body.hsk-level-3 .story-genre{color:#76520f;}
/* Foundation 2.0: learner backups and teacher planning. */
.teacher-planner-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0; }
.teacher-planner-controls select, #backupUpload { max-width:100%; padding:10px; font:inherit; }
#teacherAssignment { display:block; width:100%; box-sizing:border-box; padding:12px; margin:12px 0; font:inherit; }
#teacherPlan li { margin:12px 0; }
#copia-progreso input, #copia-progreso label { display:block; margin:12px 0; }
#teacherAssignmentPrint { display:none; }
@media print {
body.print-teacher-plan > :not(main) { display:none !important; }
body.print-teacher-plan main > :not(#preparar-clase) { display:none !important; }
body.print-teacher-plan .teacher-planner-controls,
body.print-teacher-plan .teacher-actions,
body.print-teacher-plan #teacherStatus { display:none !important; }
body.print-teacher-plan #teacherAssignment { display:none; }
body.print-teacher-plan #teacherAssignmentPrint { display:block; white-space:pre-wrap; }
}
/* Compact desktop presentation; native scale on smaller screens and in print. */
@media screen and (min-width:1100px) and (pointer:fine){html{zoom:.9}}
@media print{html{zoom:1}}
.pm-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.pm-heading .pm-title2{margin:0}
.pm-heading .poem-audio-btn{flex-shrink:0;font-size:.85rem;padding:8px 14px}
.poem-option-label{align-self:center;min-width:65px;font-size:.85rem;font-weight:700}
.culture-panel[hidden]{display:none!important}
/* One compact, level-colored audio selector and responsive lesson actions. */
.audio-speed-control{--audio-accent:#1f8a70;--audio-tint:#e3f3ed;display:inline-flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:12px 0;padding:10px 14px;background:var(--audio-tint);border:1px solid var(--audio-accent);border-radius:14px;font-size:.9rem;font-weight:600;color:#243b35}
.audio-speed-control select{font:inherit;font-weight:600;color:#243b35;background:#fff;border:2px solid var(--audio-accent);border-radius:10px;padding:9px 12px;min-height:44px;cursor:pointer;box-shadow:0 2px 5px #0000000a}
.audio-speed-control select:hover{box-shadow:0 2px 8px #00000018}
.audio-speed-control select:focus-visible{outline:3px solid var(--audio-accent);outline-offset:3px}
.lesson-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:18px 0}
.lesson-actions .audio-speed-control{margin:0}
.lesson-actions .lesson-complete-btn{margin:0;min-height:44px}
@media(max-width:540px){.lesson-actions{align-items:stretch;flex-direction:column}.lesson-actions .audio-speed-control{justify-content:space-between}.lesson-actions .lesson-complete-btn{align-self:flex-start}.audio-speed-control{max-width:100%;box-sizing:border-box}}