/* =========================================================
   安心就医 · 视觉系统
   设计语言：温润 · 东方现代 —— 雾蓝白底、静谧蓝主色、宋体标题
   面向长者：大字号、高对比、大点击区域（≥ 48px）、清晰的层次
   ========================================================= */
:root {
  --fs: 20px;

  /* 底色与文字 */
  --bg: #f1f6fb;
  --bg-2: #e5eef6;
  --surface: #ffffff;
  --surface-2: #edf3f9;
  --ink: #17273a;
  --ink-2: #3b4e62;
  --muted: #5b6c80;
  --line: #dce6f0;
  --line-2: #c8d6e4;

  /* 静谧蓝（主色） */
  --brand: #2f6f9e;
  --brand-600: #265d87;
  --brand-700: #1b4565;
  --brand-300: #8ab8d9;
  --brand-soft: #e2eef7;
  --brand-tint: #f1f7fc;

  /* 辅助色 / 暖金（星星、焦点框） */
  --accent: #5b74b8;
  --accent-ink: #3c4f8a;
  --accent-soft: #e9edf8;
  --gold: #e3a646;
  --gold-soft: #eaf2fa;

  --danger: #c0392b;
  --danger-soft: #fbe6e2;
  --ok: #2d8a4e;
  --ok-soft: #e3f3e8;
  --blue: #2c5db0;
  --blue-soft: #e6edf9;
  --purple: #7448bd;
  --purple-soft: #efe8fa;

  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 22px;
  --radius-sm: 14px;
  --sh-1: 0 1px 2px rgba(23, 36, 51, .04), 0 2px 6px rgba(23, 36, 51, .04);
  --sh-2: 0 1px 2px rgba(23, 36, 51, .05), 0 14px 34px -12px rgba(23, 36, 51, .16);
  --sh-3: 0 2px 6px rgba(23, 36, 51, .06), 0 28px 60px -18px rgba(27, 69, 101, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-w: 292px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
  background:
    radial-gradient(900px 520px at 105% -8%, rgba(138, 184, 217, .22), transparent 62%),
    radial-gradient(700px 480px at -10% 110%, rgba(138, 184, 217, .14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-underline-offset: 3px; }
svg[viewBox="0 0 24 24"] {
  width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 14px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
::selection { background: var(--brand-soft); }

/* =============== 布局 =============== */
.layout { display: flex; min-height: 100vh; }

.nav {
  width: var(--nav-w); flex: none;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 26px 18px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 14px; padding: 2px 8px 26px; text-decoration: none; color: inherit; }
.brand-logo { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 8px 14px rgba(27, 69, 101, .28)); }
.brand-logo svg, .tb-logo svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--serif); font-weight: 900; font-size: 1.32rem; letter-spacing: .06em; line-height: 1.2; color: var(--brand-700); }
.brand-sub { font-size: .66rem; color: var(--muted); letter-spacing: .04em; margin-top: 2px; }

.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.nav-group {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8a99a9; padding: 16px 14px 6px;
}
.nav-group:first-child { padding-top: 0; }
.nav-list a {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 9px 12px; border-radius: 16px; min-height: 52px;
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .92rem;
  transition: background .2s var(--ease), color .2s;
}
.nav-list a:hover { background: rgba(47, 111, 158, .06); color: var(--ink); }
.nav-list a.active { background: #fff; color: var(--brand-700); font-weight: 700; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
.nav-list a.active::before {
  content: ""; position: absolute; left: -18px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand);
}
.nav-list .ico {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2); transition: all .2s var(--ease);
}
.nav-list a.active .ico { background: linear-gradient(145deg, var(--brand), var(--brand-700)); color: #fff; box-shadow: 0 6px 14px -4px rgba(27,69,101,.5); }

.nav-foot { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }
.sos {
  display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(135deg, #fff4ef, #fde5da); border: 1px solid #f6cdbb; color: var(--accent-ink);
}
.sos .sos-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--danger); color: #fff; flex: none; box-shadow: 0 6px 14px -4px rgba(192,57,43,.55); }
.sos b { display: block; font-size: .9rem; color: var(--danger); }
.sos small { display: block; font-size: .7rem; line-height: 1.4; color: #8a4a33; }
.nav-foot .btn { justify-content: flex-start; }

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 40px;
  background: rgba(241, 246, 251, .78);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid rgba(220, 230, 240, .8);
}
.page-title { display: none; }
.tb-brand { display: none; align-items: center; gap: 10px; text-decoration: none; color: var(--brand-700); font-family: var(--serif); font-weight: 900; font-size: 1.1rem; letter-spacing: .05em; }
.tb-logo { width: 38px; height: 38px; }
.tb-date { flex: 1; color: var(--muted); font-size: .85rem; font-weight: 500; letter-spacing: .02em; }
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-switch { display: flex; background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--sh-1); }
.lang-switch button {
  border: 0; background: none; padding: 6px 15px; border-radius: 999px; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--ink-2); min-height: 40px; transition: all .2s var(--ease);
}
.lang-switch button.on { background: var(--brand); color: #fff; box-shadow: 0 4px 10px -3px rgba(27,69,101,.45); }
.icon-btn {
  width: 50px; height: 50px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,.85); display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  box-shadow: var(--sh-1); transition: all .2s var(--ease);
}
.icon-btn:hover { background: #fff; color: var(--brand); transform: translateY(-1px); }
.menu-btn { display: none; }

.main { padding: 34px 40px 80px; max-width: 1240px; width: 100%; margin: 0 auto; outline: none; }

/* 页面进入动效（只在切换页面时） */
.main.enter > * { animation: rise .6s var(--ease) both; }
.main.enter > *:nth-child(2) { animation-delay: .05s; }
.main.enter > *:nth-child(3) { animation-delay: .1s; }
.main.enter > *:nth-child(4) { animation-delay: .15s; }
.main.enter > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* =============== 页头 =============== */
.page-head {
  display: flex; align-items: center; gap: 22px; margin-bottom: 30px; padding-bottom: 26px;
  border-bottom: 1px solid var(--line); position: relative;
}
.page-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--gold)); }
.ph-icon {
  width: 74px; height: 74px; border-radius: 24px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--c1, #4a8bbd), var(--c2, #1b4565));
  box-shadow: 0 16px 30px -12px var(--c3, rgba(27,69,101,.6)), inset 0 1px 0 rgba(255,255,255,.25);
}
.ph-icon svg { width: 34px; height: 34px; stroke-width: 1.7; }
.ph-icon[data-tone="purple"] { --c1: #9067d6; --c2: #4f2c8c; --c3: rgba(79,44,140,.5); }
.ph-icon[data-tone="blue"] { --c1: #4a7fd6; --c2: #1f437f; --c3: rgba(31,67,127,.5); }
.ph-icon[data-tone="accent"] { --c1: #7f95d3; --c2: #46589e; --c3: rgba(70,88,158,.5); }
.ph-icon[data-tone="danger"] { --c1: #e46a5c; --c2: #9b2a1f; --c3: rgba(155,42,31,.5); }
.ph-icon[data-tone="ok"] { --c1: #4caf74; --c2: #1d6a3b; --c3: rgba(29,106,59,.5); }
.ph-text { flex: 1; min-width: 0; }
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 2px; }
.page-head h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 2.05rem; line-height: 1.2; letter-spacing: .02em; }
.page-head p { margin: 8px 0 0; color: var(--ink-2); font-size: .98rem; max-width: 46em; }
.ph-actions { display: flex; gap: 10px; flex-wrap: wrap; align-self: flex-end; }

/* =============== 通用组件 =============== */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--sh-2); position: relative;
}
.card + .card { margin-top: 18px; }
.card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 38px 0 16px; flex-wrap: wrap; }
.section-head:first-child { margin-top: 0; }
.section-head h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead { color: var(--ink-2); margin: 0 0 18px; font-size: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 10px 22px; border-radius: 16px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--sh-1);
  transition: transform .15s var(--ease), background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover { background: var(--surface-2); border-color: #b3c5d6; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary {
  background: linear-gradient(180deg, #3577a6, var(--brand-600)); border-color: var(--brand-700); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px -10px rgba(27,69,101,.7);
}
.btn.primary:hover { background: linear-gradient(180deg, #2c6a96, var(--brand-700)); }
.btn.accent {
  background: linear-gradient(180deg, #5f78c2, #46589e); border-color: #3a4a8e; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px -10px rgba(58,74,142,.7);
}
.btn.danger { color: var(--danger); border-color: #efc3bc; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand); box-shadow: none; }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.sm { min-height: 44px; padding: 6px 16px; font-size: .84rem; border-radius: 13px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.recording { background: var(--danger); border-color: var(--danger); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 50% { box-shadow: 0 0 0 12px rgba(192,57,43,0); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2); line-height: 1.6; font-family: var(--sans);
}
.chip svg { width: 1em; height: 1em; }
.chip.brand { background: var(--brand-soft); color: var(--brand-700); }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.blue { background: var(--blue-soft); color: var(--blue); }
.chip.purple { background: var(--purple-soft); color: var(--purple); }

.empty {
  text-align: center; padding: 44px 20px; color: var(--muted);
  border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: rgba(255,255,255,.6);
}
.empty svg { width: 46px; height: 46px; margin-bottom: 10px; color: var(--brand-300); stroke-width: 1.5; }

/* 表单 */
.form { display: grid; gap: 18px; }
.field label, .field .label { display: block; font-weight: 700; margin-bottom: 7px; font-size: .88rem; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; min-height: 56px; padding: 12px 16px;
  border: 1.5px solid var(--line-2); border-radius: 14px; background: #fbfdff; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b61' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.55; }
.input:hover { border-color: #b3c5d6; }
.input:focus { border-color: var(--brand); outline: none; background: #fff; box-shadow: 0 0 0 5px rgba(47,111,158,.12); }
.input:disabled { opacity: .55; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fbfdff; font-size: .9rem; font-weight: 500;
  min-height: 52px; transition: all .15s;
}
.check input { width: 22px; height: 22px; accent-color: var(--brand); }
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-700); font-weight: 700; box-shadow: 0 0 0 3px rgba(47,111,158,.08); }

/* 色调块 */
.tone-brand { background: var(--brand-soft); color: var(--brand); }
.tone-accent { background: var(--accent-soft); color: var(--accent); }
.tone-blue { background: var(--blue-soft); color: var(--blue); }
.tone-purple { background: var(--purple-soft); color: var(--purple); }
.tone-danger { background: var(--danger-soft); color: var(--danger); }
.tone-ok { background: var(--ok-soft); color: var(--ok); }

/* =============== 首页 =============== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 10px;
  border-radius: 30px; padding: 40px 0 40px 44px; color: #fff;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(200, 228, 250, .22), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(138, 184, 217, .35), transparent 60%),
    linear-gradient(135deg, #3a7cab 0%, #265d87 45%, #1b4565 100%);
  box-shadow: var(--sh-3);
}
.hero::before { /* 细点阵纹理 */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.hero .eyebrow { color: #d5e9f8; }
.hero h2 { margin: 6px 0 8px; font-family: var(--serif); font-weight: 900; font-size: 2.6rem; line-height: 1.15; letter-spacing: .04em; }
.hero p { margin: 0; color: rgba(255,255,255,.82); font-size: 1rem; max-width: 30em; }
.hero-art { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; margin: -40px 0 -40px 0; }
.hero-art svg { width: 100%; max-width: 440px; height: auto; display: block; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 26px; max-width: 540px; }
.glance .g {
  display: flex; flex-direction: column; min-width: 0;
  padding: 13px 15px; border-radius: 18px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  transition: background .2s, transform .2s var(--ease);
}
.glance .g:hover { background: rgba(255,255,255,.17); transform: translateY(-2px); }
.glance .gk { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #d5e9f8; }
.glance .gv { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.glance .gv small { font-family: var(--sans); font-size: .55em; font-weight: 500; opacity: .8; }
.glance .gs { font-size: .76rem; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.quick a {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: var(--sh-2);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.quick a:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.quick a::after {
  content: "→"; position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: var(--muted); background: var(--surface-2); transition: all .25s var(--ease);
}
.quick a:hover::after { background: var(--brand); color: #fff; transform: translateX(3px); }
.quick .qi { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; }
.quick .qi svg { width: 27px; height: 27px; }
.quick .qt { font-size: 1.02rem; line-height: 1.3; }
.quick small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; line-height: 1.4; margin-top: 3px; }

/* 提醒 */
.reminder { display: flex; gap: 18px; align-items: flex-start; }
.reminder + .reminder { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.when {
  flex: none; width: 86px; text-align: center; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.when .m { display: block; font-size: .72rem; font-weight: 700; padding: 4px 0; background: var(--accent); color: #fff; letter-spacing: .06em; }
.when .d { font-family: var(--serif); font-size: 1.9rem; font-weight: 900; line-height: 1.25; padding-top: 4px; color: var(--ink); }
.when .rel { font-size: .7rem; padding-bottom: 8px; font-weight: 700; color: var(--accent-ink); }
.when.today .m { background: var(--danger); }
.when.today .rel { color: var(--danger); }
.reminder .body { flex: 1; min-width: 0; }
.reminder h3 { margin: 0; font-size: 1.08rem; }
.todo { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
.todo li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; padding: 6px 10px; margin: 0 -10px; border-radius: 12px; transition: background .15s; }
.todo li:hover { background: var(--surface-2); }
.todo input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--ok); flex: none; cursor: pointer; }
.todo li.done span { text-decoration: line-through; color: var(--muted); }
.todo .warn { color: var(--danger); font-weight: 700; }
.progress { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.progress i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand-300), var(--brand)); transition: width .4s var(--ease); }

/* 今日用药时间线 */
.timeline { position: relative; }
.slot { display: flex; align-items: flex-start; gap: 16px; padding: 10px 0; position: relative; }
.slot .t {
  width: 74px; flex: none; font-weight: 700; color: var(--brand-700); font-size: .84rem;
  display: flex; align-items: center; gap: 8px; padding-top: 6px;
}
.slot .t::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); flex: none; }
.slot:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 30px; bottom: -10px; width: 2px; background: var(--brand-soft); }
.slot .meds { flex: 1; display: grid; gap: 6px; font-size: .9rem; }
.slot .meds div { background: var(--surface-2); border-radius: 12px; padding: 7px 12px; }

.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mini-stats > div { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; }
.mini-stats b { font-family: var(--serif); font-size: 1.35rem; display: block; line-height: 1.3; }

/* =============== 列表项 =============== */
.item { display: flex; gap: 18px; align-items: flex-start; overflow: hidden; }
.card.item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--stripe, transparent); }
.avatar {
  flex: none; width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.avatar svg { width: 28px; height: 28px; }
.item .body { flex: 1; min-width: 0; }
.item h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.meta { display: grid; gap: 7px; margin-top: 12px; font-size: .88rem; color: var(--ink-2); }
.meta div { display: flex; gap: 10px; align-items: flex-start; }
.meta svg { margin-top: 5px; color: var(--brand-300); width: 1em; height: 1em; }
.item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.appt {
  margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--gold-soft); color: #2c4f73;
  font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: 8px; border: 1px solid #cfe0ef;
}
.appt.none { background: var(--surface-2); color: var(--muted); font-weight: 500; border-color: transparent; }
.drive-line { margin-top: 8px; padding: 9px 14px; border-radius: 14px; background: var(--brand-tint); border: 1px solid var(--brand-soft); color: var(--brand-700); font-size: .86rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* =============== 就医指南 =============== */
.guide-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; counter-reset: s; }
.gstep {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 14px 16px;
  text-align: center; box-shadow: var(--sh-1);
}
.gstep:not(:last-child)::after {
  content: ""; position: absolute; right: -14px; top: 36px; width: 14px; height: 2px; background: var(--brand-300);
}
.gstep .n {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; color: #fff; background: linear-gradient(145deg, #4a8bbd, var(--brand-700));
  box-shadow: 0 6px 14px -5px rgba(27,69,101,.6);
}
.gstep b { display: block; font-size: .92rem; }
.gstep span { font-size: .74rem; color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }
details.topic {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1);
  overflow: hidden; transition: box-shadow .25s;
}
details.topic[open] { box-shadow: var(--sh-2); }
details.topic + details.topic { margin-top: 14px; }
details.topic summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 22px; min-height: 84px; }
details.topic summary:hover { background: var(--brand-tint); }
details.topic summary::-webkit-details-marker { display: none; }
details.topic summary .ti { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }
details.topic summary .ti svg { width: 26px; height: 26px; }
details.topic summary h3 { margin: 0; font-size: 1.1rem; font-family: var(--serif); font-weight: 700; }
details.topic summary p { margin: 0; font-size: .82rem; color: var(--muted); }
details.topic summary .chev { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); transition: transform .3s var(--ease); flex: none; }
details.topic[open] summary .chev { transform: rotate(180deg); background: var(--brand); color: #fff; }
.topic-body { padding: 4px 26px 26px 90px; }
.topic-body h4 { margin: 20px 0 6px; font-size: 1rem; color: var(--brand-700); font-family: var(--serif); }
.topic-body p, .topic-body li { font-size: .98rem; }
.topic-body ul { padding-left: 1.2em; margin: 6px 0; }
.topic-body li + li { margin-top: 5px; }
.topic-body li::marker { color: var(--brand-300); }
.tip { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--gold-soft); color: #2c4f73; font-size: .92rem; border-left: 4px solid var(--gold); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.compare > div { border-radius: 18px; padding: 16px 18px; color: var(--ink); }
.compare > .tone-brand { background: var(--brand-tint); border: 1px solid var(--brand-soft); }
.compare > .tone-blue { background: #f1f5fc; border: 1px solid var(--blue-soft); }
.compare h5 { margin: 0 0 6px; font-size: 1rem; font-family: var(--serif); }
.compare > .tone-brand h5 { color: var(--brand-700); }
.compare > .tone-blue h5 { color: var(--blue); }
.compare ul { margin: 0; }
.term { display: grid; grid-template-columns: 170px 1fr; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.term dt, .term dd { padding: 10px 16px; border-top: 1px solid var(--line); }
.term dt:first-of-type, .term dt:first-of-type + dd { border-top: 0; }
.term dt { font-weight: 700; background: var(--surface-2); }
.term dd { margin: 0; color: var(--ink-2); }
.term dt small { display: block; font-weight: 500; color: var(--muted); font-size: .74rem; }

/* =============== 问题清单 =============== */
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 15px 18px; border-radius: 18px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); transition: all .15s;
}
.q-item:hover { border-color: #bfd7ea; }
.q-item.picked { border-color: var(--brand); background: var(--brand-tint); }
ol.q-list .q-item { cursor: default; box-shadow: var(--sh-1); }
.q-item input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--brand); margin-top: 3px; flex: none; }
.q-item .qt { flex: 1; min-width: 0; }
.q-item .qt b { font-weight: 500; display: block; }
.q-item .qt i { font-style: normal; color: var(--muted); font-size: .84rem; display: block; margin-top: 3px; }
.q-num { font-family: var(--serif); font-weight: 900; color: var(--brand); min-width: 1.6em; font-size: 1.1rem; }
.q-item .q-tools { display: flex; gap: 2px; }
.tiny-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; color: var(--muted); display: grid; place-items: center; transition: all .15s; }
.tiny-btn:hover { background: var(--brand-soft); color: var(--brand); }
.tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1.5px solid var(--line-2); background: #fbfdff; border-radius: 999px; padding: 8px 18px; cursor: pointer;
  font-size: .88rem; font-weight: 600; min-height: 48px; transition: all .15s;
}
.pill:hover { border-color: var(--brand-300); }
.pill.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px -6px rgba(27,69,101,.6); }
.group-title { font-size: .95rem; margin: 22px 0 10px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =============== 健康记录 =============== */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px 14px; box-shadow: var(--sh-2); }
.stat .k { font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.stat .v { font-family: var(--serif); font-size: 2rem; font-weight: 900; line-height: 1.2; margin-top: 6px; }
.stat .u { font-family: var(--sans); font-size: .76rem; color: var(--muted); font-weight: 500; }
.stat .s { font-size: .76rem; margin-top: 2px; }
.spark { width: 100%; height: 46px; margin-top: 10px; display: block; }
.spark svg { width: 100%; height: 46px; display: block; }
.log-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.log-table th, .log-table td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log-table tbody tr:last-child td { border-bottom: 0; }
.log-table tbody tr:hover { background: var(--brand-tint); }
.log-table th { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
.hi { color: var(--danger); font-weight: 700; }
.summary-box { background: #fafcff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; font-size: .9rem; white-space: pre-wrap; line-height: 1.75; font-family: var(--sans); max-height: 55vh; overflow: auto; margin: 0; }

/* =============== 翻译 =============== */
.conv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.conv-btn {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.conv-btn:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.conv-btn .ci { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; color: #fff; }
.conv-btn .ci svg { width: 26px; height: 26px; }
.conv-btn b { display: block; font-size: 1rem; }
.conv-btn small { display: block; color: var(--muted); font-size: .76rem; }
.conv-btn.me .ci { background: linear-gradient(145deg, #4a8bbd, var(--brand-700)); }
.conv-btn.en .ci { background: linear-gradient(145deg, #4a7fd6, #1f437f); }
.conv-btn.es .ci { background: linear-gradient(145deg, #9067d6, #4f2c8c); }
.conv-btn.recording { background: var(--danger-soft); border-color: var(--danger); animation: pulse 1.2s infinite; }
.tr-langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.tr-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-2); overflow: hidden; display: flex; flex-direction: column; }
.tr-pane.out { background: linear-gradient(180deg, #fafcff, #f2f7fc); }
.tr-pane textarea { border: 0; width: 100%; min-height: 200px; padding: 20px 22px; font-size: 1.2rem; resize: vertical; background: transparent; line-height: 1.6; flex: 1; }
.tr-pane textarea:focus { outline: none; }
.tr-out { min-height: 200px; padding: 20px 22px; font-size: 1.32rem; white-space: pre-wrap; line-height: 1.6; flex: 1; font-weight: 500; }
.tr-out.placeholder { color: #97a6b6; font-weight: 400; }
.tr-bar { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(237,243,249,.7); flex-wrap: wrap; align-items: center; }
.tr-bar .grow { flex: 1; }
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.phrase-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.phrases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.phrase {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px 14px 20px;
  cursor: pointer; box-shadow: var(--sh-1); position: relative; transition: all .2s var(--ease);
}
.phrase::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.phrase:hover { border-color: var(--brand-300); transform: translateY(-2px); box-shadow: var(--sh-2); }
.phrase b { display: block; font-weight: 600; }
.phrase i { display: block; font-style: normal; color: var(--muted); font-size: .84rem; margin-top: 2px; }

.showcard {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 70px 34px;
  background: radial-gradient(800px 500px at 50% 0%, #eef6fd, #fbfdff 60%);
}
.showcard-text { font-size: clamp(28px, 6vw, 66px); line-height: 1.4; font-weight: 700; text-align: center; max-width: 1050px; white-space: pre-wrap; overflow-y: auto; max-height: 100%; }
.showcard-text small { display: block; font-size: .45em; font-weight: 500; color: var(--muted); margin-top: 26px; }
.showcard-close { position: absolute; top: 20px; right: 20px; width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh-2); }
.showcard-close svg { width: 30px; height: 30px; }

/* =============== 文件 =============== */
.files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.file {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; max-width: 100%; font-size: .84rem;
}
.file:hover { border-color: var(--brand-300); }
.file .thumb { width: 46px; height: 46px; border-radius: 10px; background: #fff center/cover no-repeat; display: grid; place-items: center; color: var(--danger); flex: none; }
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.dropzone { display: block; border: 2px dashed var(--line-2); border-radius: 18px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; background: #fbfdff; transition: all .2s; }
.dropzone:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.dropzone svg { width: 30px; height: 30px; }
.viewer img { max-width: 100%; border-radius: 14px; display: block; margin: 0 auto; }
.viewer iframe { width: 100%; height: 70vh; border: 0; border-radius: 14px; }

/* =============== 弹窗 / 提示 =============== */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(16, 32, 50, .5); backdrop-filter: blur(4px); animation: fade .2s ease both; }
.modal-card {
  position: relative; background: var(--bg); border-radius: 28px; width: 100%; max-width: 700px; max-height: 92vh;
  display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: pop .3s var(--ease) both;
}
.modal-card.wide { max-width: 940px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1.3rem; font-family: var(--serif); font-weight: 900; }
.modal-body { padding: 24px 26px; overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.98); } }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 16px; z-index: 120; pointer-events: none;
  transition: all .3s var(--ease); font-weight: 600; max-width: calc(100% - 32px); box-shadow: var(--sh-3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.tabbar { display: none; }

.notice { padding: 14px 18px; border-radius: 16px; background: var(--blue-soft); color: #1f3f78; font-size: .84rem; display: flex; gap: 12px; align-items: flex-start; border: 1px solid #d3def3; }
.notice svg { margin-top: 3px; }
.notice.calm { background: rgba(255,255,255,.6); color: var(--muted); border-color: var(--line); }

/* =============== 看病地图 =============== */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 20px; margin-top: 20px; align-items: start; }
.map-box {
  position: sticky; top: 100px; z-index: 0;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); background: #e3ebf3;
}
#map { height: calc(100vh - 140px); min-height: 460px; font-family: inherit; }
.leaflet-container { font: inherit; font-size: .8rem; }
.leaflet-tile-pane { filter: saturate(.8); }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--sh-2) !important; border-radius: 14px !important; overflow: hidden; }
.leaflet-control-zoom a { width: 46px !important; height: 46px !important; line-height: 46px !important; font-size: 22px !important; color: var(--ink) !important; }
.leaflet-tooltip { font-size: .84rem; font-weight: 700; padding: 5px 12px; border-radius: 10px; border: 0; box-shadow: var(--sh-2); }
.side-title { font-family: var(--serif); font-size: 1.15rem; margin: 24px 0 12px; }
.dest-list { display: grid; gap: 10px; }
.dest {
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; cursor: pointer; transition: all .15s;
}
.dest:hover { border-color: var(--brand-300); }
.dest.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 4px rgba(47,111,158,.08); }
.dest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dest-body b { font-size: .94rem; line-height: 1.35; }
.dest-body small { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.dest-body .when-line { color: #2c4f73; font-weight: 700; display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.drive-chip { flex: none; font-weight: 700; color: var(--brand); font-size: .84rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; background: var(--brand-soft); padding: 4px 10px; border-radius: 999px; }
.drive-chip:empty { display: none; }
.avatar.sm { width: 46px; height: 46px; border-radius: 14px; }
.avatar.sm svg { width: 22px; height: 22px; }
.route-panel { border: 0; color: #fff; background: linear-gradient(150deg, #3a7cab, #1b4565); box-shadow: var(--sh-3); overflow: hidden; }
.route-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.2px); background-size: 18px 18px; mask-image: linear-gradient(200deg, #000, transparent 60%); pointer-events: none; }
.route-panel > * { position: relative; }
.route-panel h3 { margin: 4px 0 2px; font-size: 1.25rem; font-family: var(--serif); }
.route-panel .muted { color: rgba(255,255,255,.72); }
.route-panel > .small.muted:first-child { display: flex; align-items: center; gap: 6px; color: #d5e9f8; font-weight: 700; letter-spacing: .04em; }
.route-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.route-stats > div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; }
.route-stats .k { font-size: .74rem; font-weight: 700; color: #d5e9f8; display: flex; gap: 6px; align-items: center; }
.route-stats .v { font-family: var(--serif); font-size: 1.7rem; font-weight: 900; line-height: 1.25; }
.route-stats .v small { font-family: var(--sans); font-size: .55em; font-weight: 500; opacity: .75; }
.leave { margin-top: 12px; display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--ink); }
.leave > svg { margin-top: 4px; color: var(--accent); }
.leave b { font-size: 1.1rem; color: var(--accent-ink); font-family: var(--serif); }
.leave .small { color: var(--muted); }
.route-panel .btn:not(.primary) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; box-shadow: none; }
.route-panel .btn.primary { background: linear-gradient(180deg, #d5e9f8, #a9cfec); color: #173350; border-color: #8dbbdd; }
.pin-wrap { background: none; border: 0; }
.pin {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: grid; place-items: center; background: var(--blue); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.pin svg { transform: rotate(45deg); color: #fff; width: 18px; height: 18px; }
.pin.home { background: var(--gold); }
.pin.test { background: var(--purple); }
.pin.sel { background: var(--brand-700); transform: rotate(-45deg) scale(1.22); }

/* =============== 健脑游戏：列表页 =============== */
.gm-promo {
  display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: linear-gradient(120deg, #f4eefc, #fff 70%); border: 1px solid #e3d8f5; box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s;
}
.gm-promo:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.gm-promo-e { font-size: 2rem; line-height: 1; }
.gm-promo-t { flex: 1; min-width: 0; }
.gm-promo-t b { display: block; font-family: var(--serif); font-size: 1.1rem; }
.gm-promo-t small { color: var(--muted); font-size: .8rem; }
.gm-arrow { font-weight: 700; color: var(--purple); }
.gm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.gm-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; box-shadow: var(--sh-1); }
.gm-stat span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.gm-stat b { display: block; font-family: var(--serif); font-weight: 900; font-size: 1.8rem; line-height: 1.3; }
.gm-stat b small { font-size: .55em; color: var(--muted); font-weight: 600; }
.gm-stat .progress { margin-top: 6px; }
.gm-gold { color: #b67a12; }
.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gm-card {
  display: flex; align-items: center; gap: 18px; text-align: left; width: 100%; cursor: pointer; padding: 18px 20px; min-height: 124px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-2); transition: transform .22s var(--ease), box-shadow .22s, border-color .2s;
}
.gm-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--brand-300); }
.gm-e { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; font-size: 2.2rem; flex: none; }
.gm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; }
.gm-body > b { font-family: var(--serif); font-size: 1.2rem; font-weight: 900; line-height: 1.3; }
.gm-body > small { color: var(--ink-2); font-size: .84rem; line-height: 1.4; }
.g-stars i { font-style: normal; color: #d5dee8; }
.g-stars i.on { color: var(--gold); }

/* =============== 健脑游戏：全屏舞台 =============== */
.game-stage { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; outline: none; background: radial-gradient(800px 420px at 90% -10%, rgba(138,184,217,.22), transparent 60%), var(--bg); }
.gs-head { display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: rgba(255,255,255,.85); border-bottom: 1px solid var(--line); flex: none; }
.gs-head h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 1.25rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-meta { font-size: .86rem; font-weight: 700; color: var(--brand-700); white-space: nowrap; }
.gs-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gs-inner { max-width: 760px; margin: 0 auto; padding: 26px 20px calc(40px + env(safe-area-inset-bottom)); }
.g-big { min-height: 66px; font-size: 1.1rem; padding: 12px 34px; border-radius: 18px; }
.g-intro { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.g-intro-e { width: 110px; height: 110px; border-radius: 32px; display: grid; place-items: center; font-size: 3.4rem; }
.g-intro h3 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 1.9rem; }
.g-how { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 22px; box-shadow: var(--sh-1); width: 100%; }
.g-how p { margin: 6px 0 12px; font-size: 1.05rem; }
.g-levels { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-levels .pill { min-height: 56px; padding: 8px 26px; font-size: 1rem; }

.g-q { text-align: center; margin-bottom: 18px; font-size: 1.15rem; font-weight: 600; }
.g-p { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; }
.g-fb { min-height: 2em; text-align: center; margin: 16px 0 0; font-size: 1.05rem; color: var(--ink-2); }
.g-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.g-actions.col .btn { width: min(100%, 380px); }
.g-opts { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
.g-opt {
  position: relative; min-height: 84px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--line-2); border-radius: 20px; cursor: pointer; font-size: 1.3rem; font-weight: 700; box-shadow: var(--sh-1); transition: transform .12s var(--ease), border-color .15s;
}
.g-opt:hover:not(:disabled) { border-color: var(--brand); }
.g-opt:active:not(:disabled) { transform: scale(.97); }
.g-opt.ok { background: var(--ok-soft); border-color: var(--ok); color: #14572e; }
.g-opt.no { background: var(--danger-soft); border-color: var(--danger); color: #7c2219; }
.g-opt.ok::after, .g-opt.no::after { position: absolute; top: 4px; right: 9px; font-size: .9rem; font-weight: 900; }
.g-opt.ok::after { content: "✓"; color: var(--ok); }
.g-opt.no::after { content: "✗"; color: var(--danger); }
.g-opt.shake, .g-pick.shake { animation: shake .35s; border-color: var(--accent); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.g-grid { gap: 8px; max-width: 520px; margin: 0 auto; }
.g-grid .g-opt { min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 14px; }
.g-grid .g-opt.ok::after, .g-grid .g-opt.no::after { display: none; }
.g-em { font-size: clamp(1.5rem, 7vw, 2.5rem); line-height: 1; }
.g-numcell { font-size: clamp(1.3rem, 6vw, 2rem); font-weight: 900; }
.g-numcell.ok { opacity: .5; }
.g-next { display: inline-grid; place-items: center; min-width: 76px; height: 76px; padding: 0 12px; border-radius: 22px; background: var(--brand); color: #fff; font-family: var(--serif); font-size: 2.3rem; font-weight: 900; }
.g-num { font-family: var(--serif); font-size: 1.7rem; font-weight: 900; }
.g-char { font-family: var(--serif); font-size: 2.1rem; font-weight: 900; }
.g-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.g-word { font-size: clamp(4rem, 18vw, 6.4rem); font-weight: 900; line-height: 1.15; font-family: var(--serif); }
.g-clock { width: min(68vw, 260px); height: auto; display: block; margin: 8px auto 0; filter: drop-shadow(0 10px 18px rgba(27,69,101,.18)); }
.g-bill { background: #fafcff; border: 1px dashed var(--line-2); border-radius: 18px; padding: 14px 22px; max-width: 400px; margin: 0 auto 16px; font-size: 1.2rem; font-weight: 500; }
.g-bill div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; }
.g-bill b { font-family: var(--serif); }
.g-idiom { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.g-idiom span { width: clamp(62px, 19vw, 92px); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 2px solid var(--line-2); border-radius: 16px; font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 9vw, 3.1rem); }
.g-idiom .blank, .g-saying .blank { background: var(--gold-soft); border: 2px dashed var(--gold); color: #2c4f73; }
.g-saying { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; line-height: 1.5; }
.g-saying .blank { display: inline-block; padding: 0 22px; border-radius: 10px; }
.g-cards { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; }
.g-card { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; }
.g-in { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .4s var(--ease); }
.g-card.flip .g-in { transform: rotateY(180deg); }
.g-f, .g-b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.g-f { background: linear-gradient(145deg, #4a8bbd, var(--brand-700)); color: rgba(255,255,255,.65); font-family: var(--serif); font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 900; box-shadow: var(--sh-1); }
.g-b { background: #fff; border: 2px solid var(--line-2); font-size: clamp(2rem, 10vw, 3.3rem); transform: rotateY(180deg); }
.g-card.matched .g-b { background: var(--ok-soft); border-color: var(--ok); }
.g-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 480px; margin: 0 auto; }
.g-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1.15; cursor: pointer;
  border: 3px solid transparent; border-radius: 26px; background: color-mix(in srgb, var(--c) 16%, #fff); transition: transform .12s, background .12s, box-shadow .12s;
}
.g-tile span { font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1; }
.g-tile b { font-size: 1.15rem; }
.g-tile:disabled { cursor: default; color: inherit; }
.g-tile.on { background: var(--c); border-color: #fff; color: #fff; transform: scale(1.05); box-shadow: 0 0 0 5px var(--c), 0 14px 30px -8px var(--c); }
.g-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.g-li { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-1); }
.g-li span { font-size: 2.8rem; line-height: 1.15; }
.g-li b { font-size: 1.15rem; }
.g-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; }
.g-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 104px; padding: 8px 4px; background: #fff; border: 2px solid var(--line-2); border-radius: 18px; cursor: pointer; }
.g-pick span { font-size: 2.1rem; line-height: 1.15; }
.g-pick b { font-size: .95rem; }
.g-pick.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(47,111,158,.15); }
.g-pick.ok { border-color: var(--ok); background: var(--ok-soft); }
.g-pick.no { border-color: var(--danger); background: var(--danger-soft); }
.g-pick.miss { border: 2px dashed var(--ok); }
.g-pick:disabled { cursor: default; color: inherit; }
.g-result { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 22px; }
.g-result-stars { font-size: 4rem; line-height: 1.1; letter-spacing: .08em; }
.g-result h3 { margin: 10px 0 4px; font-family: var(--serif); font-weight: 900; font-size: 2.1rem; }
.g-detail { margin: 6px 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--brand-700); }
.g-actions.col { width: 100%; }
@media (max-width: 640px) {
  .gm-promo { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .gm-promo-t { flex: 1 1 60%; }
  .gm-arrow { display: none; }
  .gm-stats { gap: 8px; }
  .gm-stat { padding: 12px; }
  .gm-stat b { font-size: 1.3rem; }
  .gm-grid { grid-template-columns: 1fr; gap: 12px; }
  .gm-e { width: 64px; height: 64px; border-radius: 20px; font-size: 1.9rem; }
  .gs-head { padding: 8px 12px; gap: 8px; }
  .gs-head h2 { font-size: 1.05rem; }
  .gs-exit { min-height: 46px; padding: 6px 12px; }
  .gs-meta { font-size: .74rem; }
  .gs-inner { padding: 16px 12px calc(30px + env(safe-area-inset-bottom)); }
  .g-opts { gap: 8px; }
  .g-grid { gap: 5px; }
  .g-opt { min-height: 74px; }
}

/* =============== 健脑游戏：大字大图（长者优先，放在后面以覆盖上面的尺寸） =============== */
.gm-body > b { font-size: 1.42rem; }
.gm-body > small { font-size: 1rem; }
.gm-e { width: 92px; height: 92px; font-size: 2.8rem; }
.gm-tags .chip { font-size: .86rem; }
.gs-head { padding: 14px 24px; }
.gs-head h2 { font-size: 1.55rem; }
.gs-meta { font-size: 1.1rem; }
.gs-exit { min-height: 58px; font-size: 1.05rem; }
.g-big { min-height: 76px; font-size: 1.3rem; }
.g-intro h3 { font-size: 2.3rem; }
.g-intro-e { width: 130px; height: 130px; font-size: 4.2rem; }
.g-how p { font-size: 1.3rem; line-height: 1.65; }
.g-levels b, .g-how > b { font-size: 1.15rem; }
.g-levels .pill { min-height: 70px; padding: 8px 30px; font-size: 1.25rem; }
.g-q, .g-p { font-size: 1.45rem; }
.g-fb { font-size: 1.3rem; }
.g-opt { min-height: 104px; font-size: 1.7rem; border-radius: 22px; }
.g-num { font-size: 2.2rem; }
.g-char { font-size: 2.8rem; }
.g-dot { width: 34px; height: 34px; }
.g-grid .g-opt { font-size: 1.7rem; }
.g-em { font-size: clamp(2rem, 9vw, 3.4rem); }
.g-numcell { font-size: clamp(1.7rem, 8vw, 2.7rem); }
.g-clock { width: min(76vw, 320px); }
.g-bill { font-size: 1.5rem; max-width: 460px; }
.g-saying { font-size: 1.85rem; }
.g-tile b { font-size: 1.45rem; }
.g-li b { font-size: 1.4rem; }
.g-li span { font-size: 3.4rem; }
.g-pick b { font-size: 1.2rem; }
.g-pick span { font-size: 2.7rem; }
.g-picks { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.g-pick { min-height: 124px; }
.g-result h3 { font-size: 2.5rem; }
.g-detail { font-size: 1.35rem; }
.g-status { text-align: center; font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; min-height: 2.6em; color: var(--brand-700); }
.g-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.g-tools .btn { flex: 1 1 130px; max-width: 240px; padding: 10px 12px; }
.g-opt.hint-src, .hint-src { outline: 5px solid var(--gold); outline-offset: 1px; }

/* 蜘蛛纸牌 */
.sp-board {
  --cw: min(calc((min(100vw, 760px) - 40px - (var(--cols) - 1) * 6px) / var(--cols)), 124px);
  --strip: calc(var(--cw) * .62 + 12px);
  display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); justify-content: center; gap: 6px; align-items: start;
}
.sp-col { min-height: calc(var(--cw) * 1.4 + 10px); padding: 2px; border-radius: 14px; background: rgba(47,111,158,.09); border: 3px solid transparent; display: flex; flex-direction: column; cursor: pointer; }
.sp-col.dest { border-color: var(--gold); background: var(--gold-soft); }
.sp-col.hint-dst { border-color: var(--gold); background: var(--gold-soft); }
.sp-card {
  position: relative; flex: none; width: 100%; height: calc(var(--cw) * 1.4); padding: 3px 0 0 5px; border: 2px solid #9fb4c9; border-radius: 10px;
  background: #fff; color: #14202e; cursor: pointer; text-align: left; display: block; box-shadow: 0 1px 3px rgba(23,36,51,.2); font-family: var(--serif);
}
.sp-card.after-up { margin-top: calc(var(--cw) * -1.4 + var(--strip)); }
.sp-card.after-down { margin-top: calc(var(--cw) * -1.4 + 20px); }
.sp-card.red { color: #b3261e; }
.sp-card.down { background: repeating-linear-gradient(45deg, #4a8bbd, #4a8bbd 5px, #2f6f9e 5px, #2f6f9e 10px); cursor: default; }
.sp-card.picked { background: #fff3cf; border-color: var(--gold); }
.sp-rank { position: absolute; top: 2px; left: 4px; display: block; font-weight: 900; font-size: min(calc(var(--cw) * .52), 2.7rem); line-height: 1.05; white-space: nowrap; letter-spacing: -.03em; }
.sp-rank i { font-style: normal; font-size: .8em; }
.sp-big { position: absolute; right: 6px; bottom: 2px; font-size: min(calc(var(--cw) * .62), 3.2rem); line-height: 1.1; }

/* 麻将配对 */
.mj-board { position: relative; width: min(100%, calc((100vh - 330px) * var(--cols) / (var(--rows) * 1.28))); aspect-ratio: var(--cols) / calc(var(--rows) * 1.28); min-width: min(100%, 320px); margin: 0 auto; }
.mj-tile {
  position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: block;
}
.mj-tile span {
  position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 12px; font-family: var(--serif); font-weight: 900; line-height: 1;
  font-size: clamp(2.2rem, 11vw, 3.8rem); background: linear-gradient(160deg, #ffffff, #eef3f8); border: 2px solid #9fb4c9; box-shadow: 0 4px 0 #8fb0cc, 0 7px 10px rgba(23,36,51,.2);
}
.mj-tile.locked span { filter: grayscale(.7) brightness(.82); opacity: .62; box-shadow: 0 2px 0 #8fb0cc; }
.mj-tile.picked span { background: #fff3cf; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold), 0 4px 0 #c79a3e; }
.mj-tile.hint-src { outline: none; }
.mj-tile.hint-src span { box-shadow: 0 0 0 5px var(--gold); }

.g-levels .pill.g-lvl { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 78px; border-radius: 20px; padding: 6px 22px; line-height: 1.25; }
.g-lvl b { font-size: 1.2rem; }
.g-lvl small { font-size: 1rem; font-weight: 600; }
.gm-lvls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.gm-lv { padding: 2px 10px; border-radius: 999px; font-size: .84rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.gm-lv.on { background: var(--gold-soft); color: #2c4f73; }

/* 说明页：“看演示”和“开始”固定在底部，不用往下翻 */
.g-intro .g-actions.col { position: sticky; bottom: 0; flex-direction: row; justify-content: center; margin-top: 4px; padding: 12px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(241,246,251,0), var(--bg) 22%); }
.g-intro .g-actions.col .btn { flex: 1 1 0; width: auto; max-width: 300px; padding: 10px 8px; }
@media (max-width: 640px) { .g-intro-e { width: 84px; height: 84px; font-size: 2.8rem; border-radius: 24px; } .g-intro { gap: 12px; } .gs-inner:has(.g-intro) { padding-bottom: 4px; } }

.fam-step { margin-top: 14px; }
.card + .fam-step, .fam-step + .fam-step { margin-top: 14px; }
.fam-label { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 900; font-size: 1.2rem; margin-bottom: 14px; }
.fam-n { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--brand); font-size: 1.1rem; }
.fam-mail { overflow-wrap: anywhere; }
.fam-rows { display: grid; gap: 10px; }
.fam-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.fam-row b { font-size: 1.1rem; }
.fam-row .btn, #famMailAll { min-height: 60px; }
a.btn.off { opacity: .45; pointer-events: none; }
#famPreview.muted { color: var(--muted); }
@media (max-width: 640px) { .fam-row .row { width: 100%; } .fam-row .row .btn { flex: 1; } }

/* 游戏演示 */
.gs-cap { display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; padding: 12px 18px; background: var(--brand-soft); border-bottom: 1px solid var(--line); text-align: center; min-height: 4.6rem; }
.gs-cap b { font-size: 1.35rem; line-height: 1.4; color: var(--brand-700); }
.gs-cap .chip { flex: none; font-size: .9rem; }
.gs-body.demo { pointer-events: none; }
.gs-finger { position: fixed; z-index: 95; left: 50%; top: 60%; font-size: 3.6rem; line-height: 1; transform: translate(-50%, 0); pointer-events: none; transition: left .7s var(--ease), top .7s var(--ease); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.gs-finger.press { transform: translate(-50%, 0) scale(.82); }

/* 棋类公用：棋盘大小跟随屏幕，棋子尽量大 */
.bd-wrap {
  --bw: min(calc(min(100vw, 760px) - 32px), calc((100vh - 320px) * var(--w) / var(--h)));
  --cell: calc(var(--bw) / var(--w));
  position: relative; width: var(--bw); height: calc(var(--cell) * var(--h)); margin: 0 auto; border-radius: 12px; background: #e3edf6;
}
.bd-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-lines line { stroke: #4d6a85; stroke-width: .03; }
.bd-lines text { fill: #4d6a85; font-family: var(--serif); font-weight: 700; }
.bd-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--w), 1fr); grid-template-rows: repeat(var(--h), 1fr); }
.bd-c { position: relative; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; min-width: 0; min-height: 0; }
.bd-c.last::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: rgba(227,166,70,.35); }
.bd-c.picked::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; background: rgba(227,166,70,.75); }
.bd-c.tg::after { content: ""; position: absolute; width: 42%; height: 42%; border-radius: 50%; background: var(--brand); opacity: .75; }
.bd-c.tg-cap::after { content: ""; position: absolute; inset: 2%; border-radius: 50%; border: 4px solid #c0392b; }
.bd-c.hint-src { outline: 4px solid var(--gold); outline-offset: -3px; border-radius: 10px; }
.stone { position: relative; width: 88%; height: 88%; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.stone.bk { background: radial-gradient(circle at 34% 30%, #5b6877, #10161d 70%); }
.stone.wh { background: radial-gradient(circle at 34% 30%, #fff, #d4dde6 80%); border: 1px solid #9fb4c9; }
.stone.last::after { content: ""; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: #e3a646; }
.stone.won { outline: 4px solid var(--gold); }
.xq { background: #eaf1f8; }
.xq-p { position: relative; width: 92%; height: 92%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #e6edf4 80%); border: 3px solid currentColor; font-family: var(--serif); font-weight: 900; font-size: calc(var(--cell) * .58); line-height: 1; box-shadow: 0 3px 5px rgba(0,0,0,.3); }
.xq-p.red { color: #b3261e; }
.xq-p.blk { color: #16222e; }
.ch { overflow: hidden; }
.bd-c.light { background: #e8f0f8; }
.bd-c.dark { background: #8fb0cc; }
.ch .bd-c.last::before, .ch .bd-c.picked::before { inset: 0; border-radius: 0; }
.ch-p { position: relative; font-size: calc(var(--cell) * .86); line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Apple Symbols", "DejaVu Sans", sans-serif; }
.ch-p.me { color: #fff; -webkit-text-stroke: 1.6px #14202e; }
.ch-p.ai { color: #14202e; }

/* 跳棋 */
.cc-board { --bw: min(calc(min(100vw, 620px) - 28px), calc((100vh - 320px) * var(--w) / (var(--h) * .9))); position: relative; width: var(--bw); height: calc(var(--bw) * var(--h) * .9 / var(--w)); margin: 0 auto; }
.cc-c { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cc-c::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: #cfdeec; box-shadow: inset 0 2px 4px rgba(27,69,101,.3); }
.cc-c.mine::before { background: #bcd6ee; }
.cc-c.goal::before { background: #f4dfb0; }
.cc-c.last::before { box-shadow: 0 0 0 3px var(--gold); }
.cc-c.dest::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(227,166,70,.45); }
.cc-c.hint-src { outline: none; }
.cc-c.hint-src::before { background: var(--gold); box-shadow: 0 0 0 5px var(--gold); }
.ball { position: relative; width: 88%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 3px 5px rgba(0,0,0,.35); }
.ball.me { background: radial-gradient(circle at 34% 30%, #9fd0f5, #1f5f99 72%); }
.ball.ai { background: radial-gradient(circle at 34% 30%, #ffe9a8, #cf8a12 72%); }
.cc-c.picked .ball { outline: 4px solid var(--gold); }

/* 花果消消乐 */
.cr-board { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 5px; width: min(100%, calc(100vh - 340px)); min-width: min(100%, 300px); margin: 0 auto; padding: 8px; border-radius: 20px; background: #dbe7f2; }
.cr-cell { aspect-ratio: 1; min-width: 0; overflow: hidden; padding: 0; display: grid; place-items: center; border: 3px solid transparent; border-radius: 14px; background: #fff; cursor: pointer; font-size: clamp(1.4rem, calc(60vw / var(--n)), 3.4rem); line-height: 1; transition: transform .25s var(--ease), opacity .3s; }
.cr-cell.picked { background: #fff3cf; border-color: var(--gold); }
.cr-cell.glow { border: 3px dashed var(--brand); background: var(--brand-soft); }
.cr-cell.pop { transform: scale(.3); opacity: 0; }
.cr-cell.hint-src { outline: 4px solid var(--gold); outline-offset: 0; }

/* 叠花砖 */
.gb-play { display: flex; justify-content: center; align-items: flex-start; gap: 12px; }
.gb-board {
  --cell: min(calc((min(100vw, 760px) - 54px - var(--side, 92px) - (var(--w) - 1) * 3px) / var(--w)), calc((100vh - 400px) / var(--h)), 64px);
  display: grid; grid-template-columns: repeat(var(--w), var(--cell)); grid-auto-rows: var(--cell); gap: 3px; padding: 6px; border-radius: 18px; background: #dbe7f2; box-shadow: inset 0 2px 8px rgba(27,69,101,.18);
}
.gb-play.solo .gb-board { --side: 0px; }
.gb-c { display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.62); font-style: normal; color: rgba(255,255,255,.9); font-size: calc(var(--cell, 30px) * .58); line-height: 1; min-width: 0; min-height: 0; overflow: hidden; }
.gb-c.on { background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.gb-c.ghost { background: color-mix(in srgb, var(--c) 28%, #fff); border: 2px dashed var(--c); }
.gb-c.flash { background: #fff; color: var(--gold); }
.gb-c.blank { background: transparent; }
.gb-next { width: 80px; flex: none; text-align: center; font-size: 1.05rem; }
.gb-next-g { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 24px; gap: 2px; margin-top: 6px; padding: 5px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.gb-next-g .gb-c { font-size: .85rem; border-radius: 5px; }
.gb-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin: 16px auto 0; }
.gb-key { min-height: 96px; padding: 4px; flex-direction: column; gap: 0; border-radius: 20px; }
.gb-key b { font-size: 2.3rem; line-height: 1.1; }
.gb-key small { font-size: 1.1rem; font-weight: 700; }
@media (max-width: 640px) {
  .gm-e { width: 76px; height: 76px; font-size: 2.3rem; }
  .gs-head { flex-wrap: wrap; padding: 8px 12px; row-gap: 2px; }
  .gs-head h2 { font-size: 1.3rem; }
  .gs-meta { flex-basis: 100%; text-align: center; font-size: 1.05rem; order: 3; }
  .gs-meta:empty { display: none; }
  .g-opt { min-height: 92px; }
  .g-status { font-size: 1.2rem; }
  .sp-board { --cw: min(calc((100vw - 32px - (var(--cols) - 1) * 4px) / var(--cols)), 124px); gap: 4px; }
  .gb-key { min-height: 84px; }
  .gb-board { --side: 66px; }
  .gb-next { width: 58px; font-size: .9rem; }
  .gb-next-g { grid-auto-rows: 15px; padding: 3px; }
  .gb-next-g .gb-c { font-size: .6rem; border-radius: 3px; }
  .gb-play { gap: 6px; }
  .g-tools .btn { font-size: 1.15rem; }
}

/* =============== 住院须知 =============== */
.hosp-card { padding: 22px 24px; }
.hosp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hosp-head h3 { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.hosp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hosp-list li { position: relative; padding-left: 26px; font-size: .94rem; line-height: 1.6; }
.hosp-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-300); box-shadow: 0 0 0 4px var(--brand-tint); }
.hosp-list b { color: var(--brand-700); }
.pack-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.pack-list label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-radius: 12px; cursor: pointer; min-height: 52px; }
.pack-list label:hover { background: var(--surface-2); }
.pack-list input { width: 24px; height: 24px; accent-color: var(--ok); margin-top: 3px; flex: none; }
.pack-list small { display: block; color: var(--muted); font-size: .76rem; }
.pack-list label.done > span { color: var(--muted); text-decoration: line-through; }

/* =============== 护士沟通卡（屏幕 + 打印共用） =============== */
.sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 28px 30px 20px; box-shadow: var(--sh-2);
  color: #1b1b1b; scroll-margin-top: 100px;
}
.sheet-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid var(--brand); }
.sheet-logo { width: 56px; height: 56px; flex: none; }
.sheet-logo svg { width: 100%; height: 100%; display: block; }
.sheet-title h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 1.7rem; line-height: 1.2; }
.sheet-title h2 span { font-family: var(--sans); font-weight: 700; font-size: .62em; color: var(--brand); margin-left: 8px; letter-spacing: .02em; }
.sheet-title p { margin: 4px 0 0; font-size: .84rem; color: #444; }
.sheet-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; margin: 16px 0 6px; }
.sheet-info label { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.5px solid #bbb; padding: 4px 0; }
.sheet-info label > span { flex: none; font-weight: 700; font-size: .84rem; }
.sheet-info label i { font-style: normal; font-weight: 500; color: #666; font-size: .9em; }
.sheet-info input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: .95rem; padding: 4px 2px; min-height: 40px; }
.sheet-info input:focus { outline: none; background: var(--gold-soft); border-radius: 6px; }
.sheet-info .fixed b { font-size: .84rem; font-weight: 600; }
.sheet h3 { margin: 18px 0 10px; font-size: 1.05rem; font-family: var(--serif); font-weight: 900; display: flex; align-items: baseline; gap: 10px; }
.sheet h3 span { font-family: var(--sans); font-size: .8em; font-weight: 700; color: var(--brand); }
.sheet h3::after { content: ""; flex: 1; height: 1px; background: #ddd; align-self: center; }

.pain-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.pain-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 0; cursor: pointer;
  border: 0; background: none; border-radius: 12px;
}
.pain-cell:hover { background: var(--surface-2); }
.pain-cell .face, .pain-cell .face-gap { width: 100%; max-width: 44px; height: 44px; }
.pain-cell b {
  width: 100%; display: block; text-align: center; padding: 6px 0; border-radius: 8px; color: #fff; font-size: 1.15rem; font-weight: 900;
  background: var(--pc); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pain-labels { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: 6px; text-align: center; }
.pain-labels .pl { border-top: 2px solid #ccc; padding-top: 4px; line-height: 1.25; }
.pain-labels b { display: block; font-size: .78rem; }
.pain-labels span { display: block; font-size: .66rem; color: #555; }
.pl0 { grid-column: 1; } .pl1 { grid-column: 2 / 5; } .pl2 { grid-column: 5 / 8; } .pl3 { grid-column: 8 / 11; } .pl4 { grid-column: 11; }

.ns-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ns-item {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 8px 12px; border: 1.5px solid #dce6f0; border-radius: 14px; background: #fff; min-height: 58px; transition: all .15s;
}
.ns-item:hover { border-color: var(--brand); background: var(--brand-tint); transform: translateY(-1px); }
.ns-e { font-size: 1.5rem; line-height: 1; width: 1.6em; text-align: center; flex: none; }
.ns-t b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.ns-t span { display: block; font-size: .74rem; color: #555; line-height: 1.3; }
.ns-feel .ns-item { border-color: #d9e3ef; }
.ns-answer .ns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheet-foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid #ddd; font-size: .7rem; color: #777; text-align: center; }

.big-pain { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.big-pain .face { width: 1.6em; height: 1.6em; }
.big-pain b { font-size: 1.6em; color: #fff; background: var(--pc); border-radius: 20px; padding: 0 .35em; line-height: 1.3; }
.big-pain span { font-size: .8em; color: var(--muted); }

/* =============== 打印 =============== */
@page { size: letter; margin: 0.4in; }
@media print {
  body.print-card .main > *:not(#nurseSheet) { display: none !important; }
  body.print-card .main { padding: 0 !important; max-width: none; }
  body.print-card .main-wrap, body.print-card .layout { display: block; }
  body.print-card .toast, body.print-card .modal, body.print-card .showcard { display: none !important; }
  body.print-card { font-size: 12.5px; }
  .sheet { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .sheet-head { padding-bottom: 8px; }
  .sheet-title h2 { font-size: 22pt; }
  .sheet-title p { font-size: 9.5pt; }
  .sheet-info { margin: 10px 0 2px; gap: 2px 20px; }
  .sheet-info input { min-height: 0; padding: 2px; font-size: 11pt; }
  .sheet-info label > span, .sheet-info .fixed b { font-size: 10pt; }
  .sheet h3 { margin: 9px 0 5px; font-size: 13pt; }
  .pain-cell { padding: 0; gap: 3px; }
  .pain-cell .face, .pain-cell .face-gap { height: 30px; max-width: 30px; }
  .pain-cell b { font-size: 13pt; padding: 2px 0; }
  .pain-labels { margin-top: 3px; }
  .pain-labels b { font-size: 9pt; } .pain-labels span { font-size: 8pt; }
  .ns-grid { gap: 4px; }
  .ns-item { min-height: 0; padding: 3px 8px; gap: 8px; border-radius: 8px; break-inside: avoid; }
  .ns-t b, .ns-t span { line-height: 1.25; }
  .ns-e { font-size: 15pt; }
  .ns-t b { font-size: 12.5pt; }
  .ns-t span { font-size: 8.5pt; color: #333; }
  .sheet-foot { margin-top: 8px; padding-top: 6px; font-size: 8pt; }
  .sheet, .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .main.enter > * { animation: none !important; }
}
@media print {
  .nav, .topbar, .tabbar, .no-print, .modal-backdrop, .modal-head .icon-btn { display: none !important; }
  body { background: #fff; }
  .modal { position: static; padding: 0; }
  .modal-card { box-shadow: none; max-height: none; background: #fff; animation: none; }
  .summary-box { max-height: none; border: 0; }
}

/* =============== 响应式 =============== */
@media (max-width: 1180px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gstep:nth-child(3)::after { display: none; }
  .map-layout { grid-template-columns: 1fr; }
  .map-box { position: relative; top: auto; }
  #map { height: 50vh; min-height: 320px; }
  .hero { grid-template-columns: 1fr; padding: 34px 34px 0; }
  .hero-art { margin: 0 -34px; justify-content: center; }
  .hero-art svg { max-width: 520px; }
}
@media (max-width: 900px) {
  :root { --fs: 19px; }
  .menu-btn { display: grid; }
  .tb-brand { display: flex; flex: 1; }
  .tb-date { display: none; }
  .nav {
    position: fixed; left: 0; top: 0; z-index: 70; height: 100vh; transform: translateX(-105%);
    transition: transform .3s var(--ease); box-shadow: 20px 0 60px rgba(0,0,0,.18); background: #f8fbfe;
  }
  body.nav-open .nav { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(16,32,50,.4); z-index: 65; backdrop-filter: blur(2px); }
  .topbar { padding: 10px 16px; gap: 10px; }
  .main { padding: 22px 16px 130px; }
  .grid-2, .grid-3, .tr-grid, .conv { grid-template-columns: 1fr; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 24px; padding: 6px; box-shadow: var(--sh-3);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px;
    text-decoration: none; color: var(--muted); font-size: .66rem; font-weight: 700; border-radius: 18px;
  }
  .tabbar a svg { width: 26px; height: 26px; }
  .tabbar a.active { color: #fff; background: linear-gradient(145deg, var(--brand), var(--brand-700)); }
  .toast { bottom: 110px; }
  .page-head { gap: 16px; }
  .ph-icon { width: 60px; height: 60px; border-radius: 20px; }
  .ph-icon svg { width: 28px; height: 28px; }
  .page-head h2 { font-size: 1.65rem; }
  .ph-actions { width: 100%; }
  .page-head { flex-wrap: wrap; }
  .topic-body { padding: 4px 20px 22px; }
}
@media (max-width: 640px) {
  .lang-switch button { padding: 6px 9px; }
  #settingsBtn { display: none; }
  .tb-brand span:last-child { display: none; }
  .hero { padding: 26px 22px 0; border-radius: 26px; }
  .hero h2 { font-size: 2rem; }
  .hero-art { margin: -44px -22px 0; }
  .hero-art svg { max-width: 380px; margin-left: auto; }
  .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .glance .g { padding: 10px 11px; }
  .glance .gv { font-size: 1.2rem; }
  .quick { gap: 12px; }
  .quick a { padding: 16px; }
  .quick a::after { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .phrases { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .term { grid-template-columns: 1fr; }
  .term dd { border-top: 0; padding-top: 0; }
  .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gstep::after { display: none; }
  .card { padding: 18px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-card { border-radius: 28px 28px 0 0; max-height: 94vh; }
  .avatar { width: 50px; height: 50px; border-radius: 16px; font-size: 1.05rem; }
  .reminder { gap: 14px; }
  .when { width: 70px; }
  .when .d { font-size: 1.5rem; }
  .ph-actions .btn { flex: 1; }
  .pack-list { grid-template-columns: 1fr; }
  .sheet { padding: 20px 14px 16px; border-radius: 22px; }
  .sheet-title h2 { font-size: 1.3rem; }
  .sheet-title h2 span { display: block; margin: 2px 0 0; }
  .sheet-info { grid-template-columns: 1fr; }
  .ns-grid, .ns-answer .ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-item { padding: 8px; gap: 6px; }
  .ns-e { font-size: 1.25rem; }
  .pain-scale, .pain-labels { gap: 2px; }
  .pain-cell b { font-size: .9rem; border-radius: 6px; }
  .pain-labels b { font-size: .64rem; } .pain-labels span { display: none; }
  .stat .v { font-size: 1.6rem; }
  .mini-stats b { font-size: 1.15rem; }
}

/* =========================================================
   安可 · 高端主题（放在最后，统一覆盖）
   深海军蓝侧栏 + 香槟金点缀 + 更克制的留白与层次
   ========================================================= */
:root { --navy: #0c2238; --navy-2: #143a5e; --lux: #c8a25a; --lux-2: #a37c2c; --line: #dfe7f0; }
body { background: radial-gradient(1100px 560px at 108% -12%, rgba(138,184,217,.22), transparent 62%), linear-gradient(180deg, #f5f8fc, #eef3f9); background-attachment: fixed; }
.nav { background: linear-gradient(185deg, #123253 0%, #0c2238 55%, #081828 100%); border-right: 0; box-shadow: 8px 0 40px -18px rgba(8,24,40,.55); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.brand-name { color: #fff; font-size: 1.5rem; letter-spacing: .12em; display: flex; align-items: baseline; gap: 9px; }
.brand-latin { font-style: normal; font-family: var(--sans); font-weight: 700; font-size: .56rem; letter-spacing: .28em; color: var(--lux); }
.brand-sub { color: rgba(255,255,255,.58); }
.brand-logo { filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.nav-group { color: rgba(255,255,255,.4); }
.nav-list a { color: rgba(255,255,255,.76); }
.nav-list a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-list a.active { background: rgba(255,255,255,.11); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.nav-list a.active::before { background: linear-gradient(#e6cb8f, var(--lux)); }
.nav-list .ico { background: rgba(255,255,255,.08); color: rgba(255,255,255,.86); }
.nav-list a.active .ico { background: linear-gradient(145deg, #ecd49c, #b98f43); color: #0c2238; box-shadow: 0 8px 16px -6px rgba(0,0,0,.6); }
.nav-foot .btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.nav-foot .btn:hover { background: rgba(255,255,255,.15); }
.topbar { background: rgba(245,248,252,.8); border-bottom-color: rgba(223,231,240,.9); }
.tb-brand { color: var(--navy); letter-spacing: .1em; }
.lang-switch button.on, .tabbar a.active { background: linear-gradient(145deg, #1f5687, var(--navy)); }
.eyebrow { color: var(--lux-2); letter-spacing: .2em; }
.page-head h2 { font-size: 2.2rem; letter-spacing: .04em; color: var(--navy); }
.page-head::after { width: 84px; background: linear-gradient(90deg, var(--lux), rgba(200,162,90,0)); }
.section-head h2 { color: var(--navy); }
.section-head h2::before { content: ""; width: 5px; height: 1.05em; border-radius: 3px; background: linear-gradient(#e6cb8f, var(--lux)); flex: none; }
.card { border-color: var(--line); box-shadow: 0 1px 2px rgba(12,34,56,.04), 0 18px 40px -22px rgba(12,34,56,.22); }
.btn.primary { background: linear-gradient(180deg, #25608f, #163f66); border-color: #12365a; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 22px -12px rgba(12,34,56,.75); }
.btn.primary:hover { background: linear-gradient(180deg, #1f5682, #103252); }
.hero {
  background:
    radial-gradient(620px 320px at 92% -6%, rgba(232,206,150,.26), transparent 60%),
    radial-gradient(520px 420px at -4% 104%, rgba(74,139,189,.42), transparent 62%),
    linear-gradient(135deg, #17456f 0%, #0f2c4a 48%, #091b2e 100%);
  box-shadow: 0 2px 6px rgba(12,34,56,.08), 0 34px 70px -26px rgba(9,27,46,.6);
}
.hero .eyebrow { color: #e6cb8f; }
.hero h2 { letter-spacing: .08em; }
.glance .gk { color: #e6cb8f; }
.quick a:hover::after { background: var(--navy); }

/* 积分 */
.gm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-points { background: linear-gradient(150deg, #17456f, #0c2238); color: #fff; border: 0; }
.gm-points span { color: #e6cb8f; }
.gm-points small { display: block; margin-top: 4px; font-size: .74rem; color: rgba(255,255,255,.7); }
.gm-points .progress { background: rgba(255,255,255,.18); }
.gm-points .progress i { background: linear-gradient(90deg, #f3dca4, var(--lux)); }
.g-pts { margin: 8px 0 4px; padding: 10px 22px; border-radius: 18px; background: linear-gradient(150deg, #17456f, #0c2238); color: #fff; font-size: 1.15rem; display: flex; flex-direction: column; align-items: center; }
.g-pts b { font-family: var(--serif); font-size: 2.2rem; color: #f3dca4; line-height: 1.1; }
.g-pts span { font-size: .95rem; color: rgba(255,255,255,.75); }
.g-rankup { margin: 8px 0 0; font-size: 1.3rem; font-weight: 700; color: var(--lux-2); }
.g-levels .tag-group { justify-content: center; }
.g-levels .pill.g-lvl { min-height: 72px; padding: 6px 14px; min-width: 96px; }
.gm-lvt { font-size: .8rem; font-weight: 700; color: var(--muted); align-self: center; }

/* 数独 */
.sd-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, calc(100vh - 440px), 560px); min-width: min(100%, 300px); margin: 0 auto; border: 4px solid var(--navy); border-radius: 12px; overflow: hidden; background: #fff; }
.sd-c { aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid #c8d6e4; border-bottom: 1px solid #c8d6e4; background: #fff; font-family: var(--serif); font-weight: 900; font-size: clamp(1.3rem, calc(56vw / var(--n)), 2.6rem); color: var(--navy); cursor: pointer; min-width: 0; }
.sd-c.br { border-right: 3px solid var(--navy); }
.sd-c.bb { border-bottom: 3px solid var(--navy); }
.sd-c.given { background: #edf3f9; cursor: default; }
.sd-c.done { color: #1b8549; }
.sd-c.picked { background: #fff3cf; box-shadow: inset 0 0 0 3px var(--gold); }
.sd-c.shake { animation: shake .35s; background: var(--danger-soft); }
.sd-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.sd-n { min-width: 62px; min-height: 66px; padding: 4px; font-family: var(--serif); font-size: 1.9rem; }
/* 连连看 */
.lk-board { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 7px; width: min(100%, calc((100vh - 330px) * 1), 560px); margin: 0 auto; }
.lk-t, .lk-e { aspect-ratio: 1; min-width: 0; }
.lk-t { padding: 0; border: 3px solid transparent; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #b9cde0, 0 6px 10px rgba(12,34,56,.14); font-size: clamp(1.7rem, calc(58vw / var(--n)), 3.4rem); line-height: 1; cursor: pointer; }
.lk-t.picked { background: #fff3cf; border-color: var(--gold); }
/* 数字华容道 */
.sl-board { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; width: min(100%, calc(100vh - 330px), 480px); margin: 0 auto; padding: 10px; border-radius: 22px; background: #d6e3ef; }
.sl-t, .sl-e { aspect-ratio: 1; min-width: 0; }
.sl-t { padding: 0; border: 0; border-radius: 16px; background: linear-gradient(160deg, #fff, #e9f0f7); box-shadow: 0 4px 0 #9fb8d0; font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, calc(60vw / var(--n)), 3.6rem); color: var(--navy); cursor: pointer; }
.sl-t.home { background: linear-gradient(160deg, #eaf7ee, #d3ecdb); color: #17603a; box-shadow: 0 4px 0 #9cc9ac; }
/* 算 24 点 */
.c24-goal { text-align: center; font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; }
.c24-goal b { font-family: var(--serif); font-size: 2.4rem; color: var(--lux-2); margin-left: 6px; }
.c24-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.c24-card { width: clamp(76px, 20vw, 120px); aspect-ratio: .78; padding: 0; border: 3px solid #b9cde0; border-radius: 18px; background: #fff; box-shadow: 0 6px 14px rgba(12,34,56,.16); font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 9vw, 3.4rem); color: var(--navy); cursor: pointer; }
.c24-card.picked { background: #fff3cf; border-color: var(--gold); transform: translateY(-6px); }
.c24-ops { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.c24-op { width: 78px; min-height: 78px; padding: 0; font-size: 2.4rem; font-weight: 900; border-radius: 50%; }
.c24-op.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* 黑白棋 */
.rv { background: #2f6f9e; padding: 0; overflow: hidden; }
.rv .bd-c { border: 1px solid rgba(255,255,255,.28); }
.rv .bd-c.tg::after { background: #f3dca4; opacity: .9; width: 30%; height: 30%; }

/* 音乐页面 */
.mu-player { border-radius: 26px; padding: 22px 24px; color: #fff; background: radial-gradient(520px 260px at 100% 0%, rgba(232,206,150,.2), transparent 60%), linear-gradient(140deg, #17456f, #0c2238 60%, #081828); box-shadow: 0 30px 60px -28px rgba(9,27,46,.7); scroll-margin-top: 96px; }
.mu-top { display: flex; align-items: center; gap: 16px; }
.mu-art { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; font-size: 2.4rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); flex: none; }
.mu-player.playing .mu-art { animation: muPulse 2.6s ease-in-out infinite; }
@keyframes muPulse { 50% { box-shadow: 0 0 0 10px rgba(232,206,150,.14); } }
.mu-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mu-info small { color: #e6cb8f; font-weight: 700; letter-spacing: .12em; font-size: .72rem; }
.mu-info b { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-info span { font-size: .85rem; color: rgba(255,255,255,.7); }
.mu-info i { font-style: normal; margin-right: 10px; }
.mu-ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.mu-btn { flex: none; padding: 0; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }
.mu-btn.main { width: 72px; height: 72px; background: linear-gradient(145deg, #f3dca4, #c8983f); color: #0c2238; border: 0; font-size: 1.7rem; box-shadow: 0 12px 24px -10px rgba(0,0,0,.6); }
.mu-btn:disabled { opacity: .35; cursor: default; }
.mu-lyrics { margin-top: 16px; max-height: 15.5rem; overflow-y: auto; text-align: center; scroll-behavior: smooth; }
.mu-lyrics:empty { display: none; }
.k-line { margin: 0; padding: 5px 0; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1.5; opacity: .5; transition: opacity .3s, transform .3s; white-space: pre-wrap; }
.k-line.on, .k-line.plain { opacity: 1; }
.k-line.on { transform: scale(1.08); }
.kc { background-image: linear-gradient(90deg, #f6d98c var(--p, 0%), #dbe6f2 var(--p, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.k-none { margin: 0; color: rgba(255,255,255,.7); font-size: 1rem; }
.mu-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem; }
.mu-vol { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; }
.mu-vol input { flex: 1; accent-color: #e6cb8f; height: 30px; }
.mu-timer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mu-pill { min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.mu-pill.on { background: #e6cb8f; color: #0c2238; border-color: #e6cb8f; }
.mu-cats { margin: 22px 0 14px; }
.mu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mu-item { display: flex; flex-direction: column; gap: 6px; }
.mu-track { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 14px 18px; min-height: 96px; border-radius: 22px; border: 1.5px solid var(--line); background: #fff; box-shadow: 0 14px 30px -22px rgba(12,34,56,.35); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.mu-track:hover { transform: translateY(-2px); border-color: var(--brand-300); }
.mu-track.on { border-color: var(--lux); background: #fffaf0; box-shadow: 0 0 0 4px rgba(200,162,90,.18); }
.mu-e { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: var(--brand-soft); flex: none; }
.mu-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mu-t b { font-family: var(--serif); font-size: 1.2rem; }
.mu-t small { color: var(--muted); font-size: .86rem; }
.mu-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.mu-go { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--navy); flex: none; }
.mu-track.on .mu-go { background: var(--lux); color: #fff; }
.mu-add { margin-bottom: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mu-add p { margin: 0; flex: 1 1 240px; }

/* 关于页面 */
.ab-hero { position: relative; overflow: hidden; border-radius: 32px; padding: 56px 52px 44px; color: #fff; background: radial-gradient(700px 380px at 100% 0%, rgba(232,206,150,.24), transparent 60%), radial-gradient(600px 460px at 0% 100%, rgba(74,139,189,.4), transparent 62%), linear-gradient(135deg, #17456f, #0f2c4a 48%, #071625); box-shadow: 0 40px 80px -30px rgba(9,27,46,.7); }
.ab-logo { display: block; width: 72px; height: 72px; margin-bottom: 22px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.45)); }
.ab-logo svg { width: 100%; height: 100%; display: block; }
.ab-hero .eyebrow { color: #e6cb8f; }
.ab-hero h2 { margin: 8px 0 14px; font-family: var(--serif); font-weight: 900; font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.3; letter-spacing: .03em; }
.ab-hero p { margin: 0; max-width: 40em; font-size: 1.1rem; color: rgba(255,255,255,.82); }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.ab-stats > div { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.ab-stats b { display: block; font-family: var(--serif); font-size: 2.8rem; line-height: 1.1; color: #f3dca4; }
.ab-stats span { font-size: .86rem; color: rgba(255,255,255,.78); }
.ab-card h3 { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); margin-bottom: 8px; }
.ab-card p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.ab-e { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.ab-how { display: flex; gap: 18px; align-items: flex-start; }
.ab-n { font-family: var(--serif); font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--lux); }
.ab-val { border-top: 4px solid var(--lux); }
.ab-road { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; font-size: 1rem; }
.ab-road li::marker { color: var(--lux-2); font-weight: 700; }
.ab-cta { margin: 28px 0 0; padding: 24px 28px; border-radius: 22px; background: #fffaf0; border: 1px solid #ecdcb6; font-family: var(--serif); font-size: 1.15rem; color: var(--navy); text-align: center; }

@media (max-width: 900px) {
  .mu-player { scroll-margin-top: 84px; }
  .mu-list { grid-template-columns: 1fr; }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .page-head h2 { font-size: 1.75rem; }
  .gm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-player { padding: 16px; border-radius: 22px; }
  .mu-art { width: 56px; height: 56px; font-size: 1.8rem; border-radius: 16px; }
  .mu-info b { font-size: 1.2rem; white-space: normal; }
  .mu-btn { width: 52px; height: 52px; }
  .mu-btn.main { width: 62px; height: 62px; }
  .mu-lyrics { max-height: 12rem; }
  .k-line { font-size: 1.25rem; }
  .ab-hero { padding: 34px 22px 26px; border-radius: 26px; }
  .ab-stats b { font-size: 2.1rem; }
  .g-levels .pill.g-lvl { min-width: 84px; padding: 6px 8px; }
  .sd-n { min-width: 54px; min-height: 58px; font-size: 1.6rem; }
  .c24-op { width: 68px; min-height: 68px; }
}
.sl-t, .sd-c, .lk-t, .c24-card { line-height: 1; overflow: hidden; }
@media print { .nav, .mu-player { display: none !important; } body { background: #fff !important; } }
/* YouTube 收藏 */
.mu-yt { aspect-ratio: 16 / 9; width: 100%; max-width: 640px; margin: 0 auto 16px; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.mu-yt iframe, .mu-yt > div { width: 100%; height: 100%; display: block; border: 0; }
.mu-art, .mu-e { overflow: hidden; }
.mu-art img, .mu-e img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-ytadd { margin-bottom: 14px; display: grid; gap: 16px; }
.mu-step { display: flex; gap: 14px; align-items: flex-start; }
.mu-step > b { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--navy); font-family: var(--serif); font-size: 1.1rem; }
.mu-step > div { flex: 1; min-width: 0; }
.mu-step label { display: block; font-weight: 700; margin-bottom: 8px; }
.mu-step .row { flex-wrap: nowrap; }
.mu-step .input { flex: 1; min-width: 0; }
@media (max-width: 640px) { .mu-step .row { flex-wrap: wrap; } .mu-step .row .btn { width: 100%; } }
/* ========== 拍照识别 / 实时口译 / 家人分享 ========== */
.tool-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.tool-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; min-height: 110px; border-radius: 24px; border: 0; cursor: pointer; color: #fff;
  background: radial-gradient(400px 200px at 100% 0%, rgba(232,206,150,.22), transparent 60%), linear-gradient(140deg, #1f5687, #0c2238); box-shadow: 0 20px 40px -24px rgba(12,34,56,.7); transition: transform .2s var(--ease); }
.tool-card:hover { transform: translateY(-3px); }
.tool-e { width: 64px; height: 64px; flex: none; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; background: rgba(255,255,255,.12); }
.tool-card b { display: block; font-family: var(--serif); font-size: 1.3rem; }
.tool-card small { display: block; color: rgba(255,255,255,.78); font-size: .86rem; line-height: 1.45; margin-top: 2px; }
.tool-card .mu-go { background: rgba(255,255,255,.15); color: #fff; }
.ocr-prev { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); max-height: 280px; overflow-y: auto; }
.ocr-prog { margin-top: 14px; }
.ocr-out { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--brand-tint); border: 1px solid var(--brand-soft); }
.ocr-out p { margin: 6px 0 10px; font-size: 1.15rem; white-space: pre-wrap; }
.live { position: fixed; inset: 0; z-index: 92; display: flex; flex-direction: column; background: linear-gradient(180deg, #0f2c4a, #081828); color: #fff; }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.live-head h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; }
.live-opts { gap: 8px; }
.live-opts .check { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; min-height: 44px; }
.live-opts .pill { min-height: 40px; padding: 4px 14px; }
.live-opts .icon-btn { width: 44px; height: 44px; }
.live-list { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.live-empty { margin: auto; text-align: center; font-size: 1.2rem; color: rgba(255,255,255,.75); max-width: 30em; }
.live-item { max-width: 88%; padding: 12px 16px; border-radius: 20px; }
.live-item.doc { align-self: flex-start; background: rgba(255,255,255,.1); border-bottom-left-radius: 6px; }
.live-item.me { align-self: flex-end; background: linear-gradient(145deg, #f3dca4, #c8983f); color: #0c2238; border-bottom-right-radius: 6px; }
.live-item small { display: block; font-size: .86rem; opacity: .75; }
.live-item p { margin: 4px 0 0; font-size: 1.55rem; font-weight: 700; line-height: 1.4; font-family: var(--serif); }
.live-interim { min-height: 1.6em; padding: 0 20px; font-size: 1.05rem; color: #e6cb8f; font-style: italic; }
.live-tip { margin: 6px 18px 0; font-size: .78rem; color: rgba(255,255,255,.6); }
.live-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }
.live-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 24px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; min-height: 116px; }
.live-btn span { font-size: 2rem; }
.live-btn b { font-size: 1.3rem; }
.live-btn small { font-size: .82rem; opacity: .8; }
.live-btn.on { background: #c0392b; border-color: #ff8b7e; animation: pulse 1.4s infinite; }
.share-card { margin-bottom: 14px; }
.share-qr { width: min(80vw, 280px); margin: 8px auto 0; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.share-qr svg { width: 100%; height: auto; display: block; }
.shared-head h2 { margin: 4px 0; font-family: var(--serif); font-size: 2rem; color: var(--navy); }
.shared-sec { margin-top: 14px; }
.shared-sec h3 { font-family: var(--serif); font-size: 1.25rem; }
.shared-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.shared-list li { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.install-box { padding: 14px 16px; border-radius: 16px; background: var(--brand-tint); border: 1px solid var(--brand-soft); }

/* ========== 运动 ========== */
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ex-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 18px 14px 14px; min-height: 150px; border-radius: 26px; border: 1px solid var(--line); background: #fff; cursor: pointer; box-shadow: 0 16px 34px -24px rgba(12,34,56,.4); transition: transform .2s var(--ease); }
.ex-card:hover { transform: translateY(-3px); }
.ex-card-art { width: 110px; height: 130px; flex: none; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #cfe6f5, #eaf3e6); }
.ex-baduanjin .ex-card-art { background: linear-gradient(180deg, #d6ead8, #f3f1df); }
.ex-qigong .ex-card-art { background: linear-gradient(180deg, #2b4f7a, #8fb6d8); }
.ex-chairyoga .ex-card-art { background: linear-gradient(180deg, #f6dcc6, #f7efe2); }
.ex-dance .ex-card-art { background: linear-gradient(180deg, #f3c9d8, #fbe9c9); }
.ex-card-art svg { width: 100%; height: 100%; }
.ex-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ex-card-body b { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); }
.ex-card-body small { color: var(--ink-2); font-size: .9rem; }
.ex-yt-search { display: flex; flex-wrap: wrap; gap: 10px; }
.ex-yt { aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; overflow: hidden; background: #000; }
.ex-yt iframe { width: 100%; height: 100%; border: 0; }
.fg-leg, .fg-body, .fg-arm, .fg-shoulder { fill: none; stroke: #2f6f9e; stroke-linecap: round; stroke-linejoin: round; }
.fg-leg { stroke-width: 15; stroke: #1f5687; }
.fg-body { stroke-width: 24; }
.fg-shoulder { stroke-width: 16; }
.fg-arm { stroke-width: 12; stroke: #3d82b8; }
.fg-hand { fill: #f1c9a5; }
.fg-head { fill: #f1c9a5; stroke: #e2b48c; stroke-width: 1.5; }
.fg-face { fill: rgba(120,70,40,.28); }
.fg-shadow { fill: rgba(12,34,56,.14); }
.fg-chair rect { fill: #b98a5e; }
.ex-stage { position: fixed; inset: 0; z-index: 93; display: flex; flex-direction: column; overflow: hidden; color: var(--navy); }
.ex-sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #bfe0f3 0%, #e4f1f7 52%, #f6f2e4 100%); }
.ex-sun { position: absolute; top: 9%; right: 12%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff6d9, #ffd98a 60%, rgba(255,217,138,0) 72%); animation: exSun 9s ease-in-out infinite; }
.ex-cloud { position: absolute; height: 34px; border-radius: 34px; background: rgba(255,255,255,.85); filter: blur(1px); }
.ex-cloud.c1 { top: 14%; width: 170px; animation: exCloud 70s linear infinite; }
.ex-cloud.c2 { top: 26%; width: 120px; animation: exCloud 95s linear infinite -40s; opacity: .7; }
.ex-hill { position: absolute; bottom: -40px; border-radius: 50%; }
.ex-hill.h1 { left: -15%; width: 80%; height: 240px; background: #b9dcc2; }
.ex-hill.h2 { right: -20%; width: 90%; height: 280px; background: #a5d1b6; }
@keyframes exCloud { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
@keyframes exSun { 50% { transform: scale(1.06); } }
.ex-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: rgba(255,255,255,.55); backdrop-filter: blur(8px); }
.ex-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-size: 1.4rem; }
.ex-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-toggles .check { min-height: 44px; background: rgba(255,255,255,.75); }
.ex-main { flex: 1; overflow-y: auto; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
.ex-start, .ex-play { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.ex-fig { width: 100%; max-height: calc(100vh - 230px); display: block; filter: drop-shadow(0 18px 24px rgba(12,34,56,.18)); }
.ex-figwrap { position: relative; }
.ex-breath { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); padding: 6px 18px; border-radius: 999px; font-size: 1.2rem; font-weight: 700; background: rgba(255,255,255,.8); }
.ex-breath:empty { display: none; }
.ex-breath.inhale { color: #1f6f4a; }
.ex-breath.exhale { color: #2f6f9e; }
.ex-panel, .ex-start-body { background: rgba(255,255,255,.82); backdrop-filter: blur(8px); border-radius: 26px; padding: 22px 24px; box-shadow: 0 24px 50px -28px rgba(12,34,56,.45); }
.ex-count { font-size: .9rem; font-weight: 700; letter-spacing: .1em; color: var(--lux-2); }
.ex-panel h3 { margin: 4px 0 6px; font-family: var(--serif); font-size: 2rem; line-height: 1.25; }
.ex-panel p { margin: 0; font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); min-height: 3.2em; }
.ex-ring { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ex-ring .progress { flex: 1; height: 10px; margin: 0; }
.ex-ring span { font-weight: 700; min-width: 6em; text-align: right; }
.ex-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ex-dots i { width: 14px; height: 14px; border-radius: 50%; background: #d5dee8; }
.ex-dots i.done { background: var(--brand-300); }
.ex-dots i.on { background: var(--lux); transform: scale(1.25); }
.ex-ctl { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; margin-top: 18px; }
.ex-ready { font-size: 1.25rem; font-weight: 600; margin: 0 0 12px; text-align: center; }
.ex-steps { margin: 14px 0; padding-left: 1.5em; display: grid; gap: 4px; font-size: 1.05rem; }
.ex-start-body .btn.g-big { width: 100%; }
.ex-safety { margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.ex-done { max-width: 520px; margin: 6vh auto 0; text-align: center; background: rgba(255,255,255,.85); border-radius: 28px; padding: 30px 24px; }
.ex-medal { font-size: 4.4rem; }
.ex-done h3 { font-family: var(--serif); font-size: 2rem; margin: 6px 0; }
.ex-done p { font-size: 1.15rem; }
@media (max-width: 900px) {
  .tool-cards, .ex-grid { grid-template-columns: 1fr; }
  .ex-start, .ex-play { grid-template-columns: 1fr; gap: 12px; }
  .ex-fig { max-height: 42vh; }
  .ex-panel h3 { font-size: 1.55rem; }
  .ex-panel p { font-size: 1.05rem; min-height: 0; }
}
@media (max-width: 640px) {
  .live-item p { font-size: 1.3rem; }
  .live-head h2 { font-size: 1.15rem; }
  .ex-head h2 { font-size: 1.1rem; }
  .ex-card-art { width: 92px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) { .ex-cloud, .ex-sun { animation: none; } }.ex-breath { top: auto; bottom: 2%; }
.ex-head h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .ex-toggles .check { padding: 6px 10px; font-size: .85rem; } .ex-toggles .check .tg-t { display: none; } }.ex-ctl .btn { padding: 10px 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .ex-head { padding: 8px 12px; gap: 8px; }
  .ex-head h2 { flex: 1 1 auto; font-size: 1.15rem; }
  .ex-toggles { width: 100%; order: 3; justify-content: flex-start; }
  .ex-toggles .check { min-height: 40px; }
  .ex-toggles .check .tg-t { display: inline; }
}
/* ---------- 用药时间表 ---------- */
.med-sched { padding: 6px 0; overflow: hidden; }
.ms-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.ms-row:first-child { border-top: 0; }
.ms-row.ms-none { opacity: .62; }
.ms-time { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; }
.ms-ico { font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-tint); flex: none; }
.ms-bb .ms-ico, .ms-ab .ms-ico { background: #fff4dc; }
.ms-bl .ms-ico, .ms-al .ms-ico { background: #e8f4ff; }
.ms-bd .ms-ico, .ms-ad .ms-ico { background: #fde9e2; }
.ms-bed .ms-ico { background: #ebe7fb; }
.ms-meds { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 16px; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: inherit; cursor: pointer; text-align: left; }
.ms-pill b { font-size: 1.05rem; color: var(--ink); }
.ms-pill span { font-size: .88rem; color: var(--muted); }
.ms-pill:hover { border-color: var(--brand); background: var(--brand-tint); }
.med-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 1rem; }
.med-dl dt { color: var(--muted); white-space: nowrap; }
.med-dl dd { margin: 0; color: var(--ink); word-break: break-word; }
.med-dl dd small { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slot-g { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.6); }
.slot-gl { font-size: .88rem; font-weight: 700; color: var(--muted); }
.slot-g .check { width: 100%; }
.freq-line { margin-top: 8px; font-weight: 700; color: var(--brand-700); }
.med-table td, .med-table th { vertical-align: top; }

/* ---------- 讲中文的送药药房 ---------- */
.ph-find .row { flex-wrap: wrap; gap: 8px; }
.ph-ask { margin: 10px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; }
.ph-ask li { padding: 10px 12px; border-radius: 14px; background: var(--brand-tint); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-ask li > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.ph-ask li span { color: var(--muted); font-size: .92rem; }
.ph-card .meta > div { display: flex; gap: 8px; align-items: flex-start; }

@media (max-width: 640px) {
  .ms-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .ms-time { font-size: 1.05rem; }
  .ms-pill { flex: 1 1 calc(50% - 8px); }
  .slot-grid { grid-template-columns: 1fr; }
}

/* ---------- 手机适配加强 ---------- */
main, .main { overflow-wrap: break-word; }
.grid > *, .tool-cards > *, .ex-grid > *, .sheet-info > *, .ns-grid > * { min-width: 0; }
.tiny-btn { flex: none; }
.todo li { align-items: center; }
.todo-l { display: flex; gap: 12px; align-items: center; flex: 1; min-height: 44px; cursor: pointer; }
.todo input { width: 28px; height: 28px; margin-top: 0; }
.todo-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 1.4rem; text-decoration: none; color: var(--brand); }
.todo-go:hover { background: var(--brand-tint); }
.todo li.done .todo-l span { text-decoration: line-through; color: var(--muted); }
@media (max-width: 860px) {
  .tabbar a { font-size: .74rem; min-height: 56px; justify-content: center; }
  .tool-cards, .ex-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lang-switch button { min-width: 40px; min-height: 44px; padding: 6px 8px; }
  .tb-brand { min-height: 44px; }
  .eyebrow { font-size: .76rem; }
  .glance .gk, .glance .gv small, .when .m, .when .rel, .mu-info small, .gm-card small, main small { font-size: max(.76rem, 14px); }
  .sheet-info { grid-template-columns: minmax(0, 1fr); }
  .sheet-foot { font-size: .76rem; }
  .pain-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 8px; }
  .pain-labels b { font-size: .76rem; }
  .mu-vol input { height: 44px; }
}
@media (max-width: 380px) {
  .topbar { padding: 8px 10px; gap: 6px; }
  .lang-switch button { min-width: 38px; padding: 6px 6px; }
  .main { padding-left: 12px; padding-right: 12px; }
  .card { padding: 16px; }
}
.tabbar a { white-space: nowrap; overflow: hidden; }
@media (max-width: 380px) {
  .tabbar a { font-size: .68rem; letter-spacing: -.02em; padding-left: 0; padding-right: 0; }
  .tabbar { left: 6px; right: 6px; padding: 5px; }
  .glance { gap: 6px; }
  .glance .g { padding: 9px 8px; }
  .glance .gv { font-size: 1.05rem; white-space: nowrap; }
}
@media (max-width: 640px) {
  .pain-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .pain-labels .pl { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); text-align: left; }
  .pain-labels .pl b { white-space: nowrap; }
}
@media (max-width: 640px) {
  .pain-labels .pl { border-top: 0; }
  .pain-labels .pl b::before { font-weight: 900; color: var(--brand); margin-right: 5px; }
  .pl0 b::before { content: "0"; } .pl1 b::before { content: "1–3"; } .pl2 b::before { content: "4–6"; } .pl3 b::before { content: "7–9"; } .pl4 b::before { content: "10"; }
}

/* ---------- 打电话助手 ---------- */
.cl-how-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cl-how-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--brand-tint); font-size: 1rem; line-height: 1.45; }
.cl-how-steps li span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy, #0c2238); color: #fff; font-weight: 900; }
.cl-tasks { margin-top: 16px; }
.cl-task { display: flex; gap: 16px; align-items: center; text-align: left; font: inherit; cursor: pointer; border: 2px solid transparent; min-height: 120px; transition: transform .15s, border-color .15s; color: inherit; }
.cl-task:hover { transform: translateY(-2px); border-color: var(--brand); }
.cl-task-ico { font-size: 2.6rem; width: 72px; height: 72px; flex: none; display: grid; place-items: center; border-radius: 22px; background: #e8f4ff; }
.cl-task.ins .cl-task-ico { background: #eaf7ee; }
.cl-task b { display: block; font-size: 1.3rem; font-family: var(--serif); }
.cl-task small { display: block; margin-top: 4px; color: var(--muted); font-size: .98rem; line-height: 1.45; }
.cl-setup .form { gap: 18px; }
.cl-fs { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 6px; margin: 0; }
.cl-fs legend { font-weight: 800; padding: 0 6px; color: var(--brand-700); }
.cl-slots-ed { display: flex; flex-direction: column; gap: 8px; }
.cl-slot { display: grid; grid-template-columns: 170px 150px 130px 1fr 44px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cl-slot-txt { font-weight: 700; color: var(--brand-700); }
.cl-slot:not(:has(input[type=time])) { grid-template-columns: 170px 150px 1fr 44px; }
.cl-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cl-add .input { flex: 1 1 220px; }
.cl-heard { min-height: 1.4em; margin-top: 6px; color: var(--brand-700); font-weight: 600; }
.cl-sub-f { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px 34px; }
.cl-big { min-height: 56px; font-size: 1.15rem; padding: 12px 24px; }
.btn.recording { background: #fde9e2; border-color: var(--danger); color: var(--danger); }
.cl-h-item { padding: 0; overflow: hidden; }
.cl-h-item summary { display: flex; gap: 12px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; min-height: 56px; }
.cl-h-item summary::-webkit-details-marker { display: none; }
.cl-h-ico { font-size: 1.6rem; }
.cl-h-main b { display: block; }
.cl-h-main small { color: var(--muted); }
.cl-h-item[open] > :not(summary) { margin: 0 18px 16px; }
.cl-hist { display: flex; flex-direction: column; gap: 10px; }
.cl-tr { font-size: .95rem; }
.cl-tr p { display: flex; gap: 8px; margin: 6px 0; }
.cl-tr small { display: block; color: var(--muted); }
/* 通话窗口 */
.cl-box { overflow: hidden; }
.cl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.cl-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cl-dial { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cl-label { width: 100%; color: rgba(255,255,255,.7); }
.cl-num { font-size: 2.3rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: .03em; font-family: var(--serif); }
.cl-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; color: rgba(255,255,255,.9); }
.cl-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-menu:empty { display: none; }
.cl-key { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 14px; background: rgba(230,203,143,.18); border: 1px solid rgba(230,203,143,.4); font-size: 1.05rem; }
.cl-key b { color: #e6cb8f; }
.cl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.08); }
.cl-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); flex: none; }
.cl-status.on .cl-dot, .cl-dot.on { background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: clPulse 1.4s infinite; }
@keyframes clPulse { 70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.cl-auto { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; align-self: flex-start; min-height: 48px; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-box .btn:not(.primary):not(.danger):not(.ok) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.cl-big.ok, .btn.ok { background: linear-gradient(145deg, #22c55e, #15803d); border-color: #15803d; color: #fff; }
.cl-picked { font-size: 2rem; font-weight: 900; color: #4ade80; font-family: var(--serif); animation: clFlash 1s ease-in-out 3; }
@keyframes clFlash { 50% { opacity: .35; } }
.cl-sub { margin: 0; color: rgba(255,255,255,.8); font-size: 1.05rem; }
.cl-h { margin: 0; font-size: 1.3rem; font-family: var(--serif); }
.cl-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cl-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; border-radius: 22px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; text-align: center; min-height: 150px; }
.cl-opt span { font-size: 2.6rem; }
.cl-opt b { font-size: 1.35rem; }
.cl-opt small { color: rgba(255,255,255,.75); font-size: .95rem; }
.cl-opt.ai { border-color: #e6cb8f; background: rgba(230,203,143,.14); }
.cl-opt:disabled { opacity: .45; cursor: not-allowed; }
.cl-slots { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; font-size: 1.15rem; }
.cl-slots li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-box .tiny-btn { color: rgba(255,255,255,.8); }
.cl-box .input { background: rgba(255,255,255,.95); }
.cl-box .cl-heard { color: #e6cb8f; }
.cl-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.cl-bar b { flex: 1; font-size: 1.15rem; }
.cl-take { background: linear-gradient(145deg, #f3dca4, #c8983f) !important; color: #0c2238 !important; border: 0 !important; min-height: 52px; font-size: 1.1rem; }
.cl-lines { min-height: 160px; }
.cl-zh { font-size: 1.15rem !important; font-family: var(--sans) !important; opacity: .85; font-weight: 600 !important; }
.cl-self .cl-phr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cl-ph { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; }
.cl-ph p { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.cl-ph small { color: rgba(255,255,255,.75); font-size: .98rem; }
.cl-res { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.08); }
.cl-res.ok { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.35); }
.cl-res.warn { background: rgba(230,203,143,.14); border: 1px solid rgba(230,203,143,.35); }
.cl-res-t { font-size: 1.3rem; font-weight: 800; line-height: 1.45; }
.cl-res-big { font-size: 1.9rem; font-weight: 900; font-family: var(--serif); margin: 8px 0 12px; }
.cl-sugg p { margin: 4px 0; font-style: italic; }
.cl-ans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.cl-ans dt { font-weight: 700; opacity: .8; margin-top: 8px; }
.cl-ans dd { margin: 0; }
.cl-ans dd b { font-size: 1.25rem; display: block; }
.cl-ans dd small { display: block; opacity: .75; }
.cl-ref { font-family: ui-monospace, monospace; letter-spacing: .08em; }
.card .cl-res { background: var(--surface-2); }
.card .cl-res.ok { background: #eaf7ee; border-color: #bfe5c9; }
.card .cl-res.warn { background: #fff4dc; border-color: #f0dca8; }
.card .cl-res-big { font-size: 1.5rem; }
@media (max-width: 860px) {
  .cl-how-steps { grid-template-columns: minmax(0, 1fr); }
  .cl-slot, .cl-slot:not(:has(input[type=time])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .cl-slot input[type=date] { grid-column: 1; } .cl-slot select { grid-column: 2; }
  .cl-slot .tiny-btn { grid-column: 3; grid-row: 1; }
  .cl-slot input[type=time] { grid-column: 1 / 3; }
  .cl-slot-txt { grid-column: 1 / -1; }
  .cl-self .cl-phr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cl-task { min-height: 0; padding: 16px; }
  .cl-task-ico { width: 60px; height: 60px; font-size: 2.1rem; }
  .cl-num { font-size: 1.9rem; }
  .cl-choose { grid-template-columns: minmax(0, 1fr); }
  .cl-opt { min-height: 0; flex-direction: row; text-align: left; padding: 14px; }
  .cl-opt span { font-size: 2.2rem; }
  .cl-actions .btn { flex: 1 1 auto; }
  .cl-sub-f { margin-left: 0; }
}
@media (max-width: 640px) {
  .cl-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
  .cl-opt span { grid-row: 1 / 3; }
  .cl-opt b, .cl-opt small { grid-column: 2; }
  .cl-status .btn { margin-left: auto; }
}