/* HSK1 site — shared additions: 顶部导航 / 语言切换 / 练习题 / 下载卡片 */

/* 手机优先：基础字号略放大，按钮更大 */
html{font-size:16px}
@media (max-width:640px){html{font-size:17px}}

/* 顶部导航 */
.topbar-inner{height:auto;min-height:60px;padding:8px 0;gap:14px;flex-wrap:wrap}
.brand{gap:10px;flex:0 0 auto}
.brand-mark{width:34px;height:34px;border-radius:10px;font-size:17px}
.brand-text strong{font-size:15px}
.brand-text span{font-size:11.5px;color:var(--muted)}

.mainnav{display:flex;align-items:center;gap:4px;flex:1 1 auto;justify-content:center;flex-wrap:wrap}
.mainnav a{
  text-decoration:none;color:var(--ink-soft);font-size:14.5px;font-weight:600;
  padding:8px 12px;border-radius:10px;white-space:nowrap;transition:.15s;
}
.mainnav a:hover{background:var(--accent-soft);color:var(--accent)}
.mainnav a.on{background:var(--accent);color:#fff}
@media (max-width:820px){
  .mainnav{order:3;flex:1 1 100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .mainnav a{padding:7px 10px;font-size:14px}
}

/* 语言切换 */
.langsw{
  display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:#fff;flex:0 0 auto;margin-left:auto;
}
.langsw button{
  font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;color:var(--muted);
  padding:7px 13px;cursor:pointer;line-height:1.2;
}
.langsw button.on{background:var(--accent);color:#fff}
.langsw button+button{border-left:1px solid var(--line)}

/* 老挝语为主时，中文辅助行变淡 */
body.lang-lo .zh-hint{color:var(--muted);font-size:13px}
body.lang-zh .lo-hint{display:none}

/* 首页 */
.home-hero{padding:44px 0 10px;text-align:center}
.home-hero h1{font-size:clamp(28px,6vw,46px);line-height:1.25;margin:0 0 14px;letter-spacing:-.01em}
.home-hero .sub{font-size:clamp(15px,2.4vw,18px);color:var(--ink-soft);max-width:720px;margin:0 auto 22px}
.cta{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  font-size:17px;padding:15px 34px;border-radius:14px;box-shadow:var(--shadow);
}
.cta:hover{background:#0b5a4b}
.cta-note{display:block;margin-top:10px;font-size:13px;color:var(--muted)}

/* 路径图 */
.pathline{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:26px 0 6px}
.pathline .step{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--ink);
}
.pathline .step i{font-style:normal;color:var(--accent);font-weight:800}
.pathline .arrow{color:var(--muted);align-self:center}

/* 练习题 */
.quiz-wrap{max-width:760px;margin:0 auto}
.q-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.q-no{font-size:12.5px;font-weight:800;color:var(--accent);letter-spacing:.06em}
.q-type{font-size:12px;color:var(--muted)}
.q-stem{font-size:19px;font-weight:600;line-height:1.5;margin:0 0 4px}
.q-stem .blank{color:var(--warm);font-weight:800;letter-spacing:.1em}
.q-py{font-size:13.5px;color:var(--accent);margin:0 0 14px;letter-spacing:.02em}
.opts{display:grid;gap:9px}
.opt{
  text-align:left;font:inherit;font-size:16px;line-height:1.45;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.12s;
}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt b{color:var(--muted);font-weight:700;margin-right:8px}
.opt.right{border-color:#1E9E6A;background:#E9F7F0}
.opt.wrong{border-color:#C2453B;background:#FBEDEB}
.opt.dim{opacity:.55}
.q-exp{margin-top:12px;font-size:13.5px;color:var(--ink-soft);background:var(--paper);border-left:3px solid var(--accent);padding:9px 12px;border-radius:0 8px 8px 0}
.quiz-bar{
  position:sticky;bottom:0;background:rgba(251,247,240,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:12px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.quiz-bar .stat{font-size:14px;color:var(--ink-soft);margin-right:auto}
.btn-solid{background:var(--accent);color:#fff;border:0;border-radius:12px;font:inherit;font-weight:700;padding:12px 22px;cursor:pointer}
.btn-solid:disabled{opacity:.45;cursor:default}
.result{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;margin-bottom:16px}
.result .score{font-size:44px;font-weight:800;color:var(--accent);line-height:1.1}
.result .score small{font-size:16px;color:var(--muted);font-weight:600}
.result p{margin:8px 0 0;color:var(--ink-soft);font-size:14.5px}

/* 课次列表 */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lesson-card{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;transition:.15s;
}
.lesson-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.lesson-card .no{font-size:12px;font-weight:800;color:var(--warm);letter-spacing:.08em}
.lesson-card .zh{font-size:17px;font-weight:700;margin:2px 0 3px}
.lesson-card .py{font-size:12.5px;color:var(--accent)}
.lesson-card .lo{font-size:13px;color:var(--muted);font-family:"Noto Sans Lao","Leelawadee UI","Phetsarath OT","Lao UI",sans-serif}
.lesson-card .done{margin-top:8px;font-size:12px;color:#1E9E6A;font-weight:700}

/* 下载卡片 */
.dl-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.dl-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.dl-card h3{margin:0 0 6px;font-size:17px}
.dl-card p{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft)}
.dl-card .meta{font-size:12px;color:var(--muted);margin-bottom:12px}
.dl-card a{
  display:inline-block;text-decoration:none;background:var(--accent);color:#fff;font-weight:700;
  font-size:14.5px;padding:10px 18px;border-radius:11px;
}

/* 小练习（拼音页） */
.lo-body{
  display:block;margin:8px 0 0;font-family:"Noto Sans Lao","Leelawadee UI","Phetsarath OT","Lao UI",sans-serif;
  font-size:14.5px;line-height:1.75;color:var(--ink-soft);
  background:var(--accent-soft);border-radius:8px;padding:8px 11px;
}
body.lang-zh .lo-body{display:none}

.mini-drill{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.mini-q{font-size:20px;font-weight:700;margin:0 0 12px}
.mini-fb{margin-top:12px;font-size:14px;color:var(--ink-soft);min-height:22px}
.mini-fb.ok{color:#1E9E6A;font-weight:700}
.mini-fb.no{color:#C2453B;font-weight:700}

/* HSK1 / HSK2 级别页签 */
.lv-tabs{display:flex;gap:8px;margin:16px 0 0;flex-wrap:wrap}
.lv-tab{padding:7px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:14px;background:#fff}
.lv-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}


/* HSK 3.0 品牌名较长（老挝语无空格），标题必须能断行，避免手机横向溢出 */
.home-hero h1, .home-hero .sub, .hero h1, .hero .sub, .hero p{overflow-wrap:anywhere;word-break:break-word}
body.lang-lo .home-hero h1{font-size:clamp(23px,5.2vw,40px);line-height:1.35;letter-spacing:0}
body.lang-lo .home-hero .sub{font-size:clamp(14px,2.2vw,17px)}
@media (max-width:430px){
  .home-hero{padding:30px 0 6px}
  body.lang-lo .home-hero h1{font-size:22px}
}