/* ============================================================
   琴行家长端 · 移动端样式
   视觉方向：深夜音乐厅 / 印刷乐谱 —— 深墨底 + 香槟金，数字用衬线
   设计原则：留白比信息更贵，金色是唯一的强调色
   ============================================================ */

/* ---- 色板（浅色「琴谱」 / 深色「夜场」成对定义） ---- */
:root{
  --font-serif:Georgia,"Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif;

  --l-bg:#F4F1EB;   --l-card:#FFFFFF;  --l-card2:#F8F5F0;
  --l-ink:#1B1D22;  --l-ink2:#4E525B;  --l-ink3:#8C8F98;  --l-line:#E6E2DA;
  --l-brand:#9C7C3E; --l-brand-soft:rgba(156,124,62,.085); --l-brand-line:rgba(156,124,62,.26);
  --l-on-brand:#241C09;
  --l-btn:#C9A961;
  --l-bar-lo:#8F6F35; --l-bar-hi:#C9A961;
  --l-teal:#2F6B4F; --l-teal-soft:rgba(47,107,79,.075);  --l-teal-line:rgba(47,107,79,.2);
  --l-amber:#8A6318;--l-amber-soft:rgba(138,99,24,.085); --l-amber-line:rgba(138,99,24,.2);
  --l-red:#A33A36;  --l-red-soft:rgba(163,58,54,.08);
  --l-hair:rgba(27,29,34,.08);
  --l-top-glow:rgba(255,255,255,0);
  --l-staff:rgba(27,29,34,.045);
  --l-shadow:0 2px 7px rgba(27,29,34,.09);

  --d-bg:#0A0B0F;   --d-card:#14161C;  --d-card2:#1B1E26;
  --d-ink:#F2EFE8;  --d-ink2:#A6A9B4;  --d-ink3:#6C6F7B;  --d-line:#24272F;
  --d-brand:#C9A961; --d-brand-soft:rgba(201,169,97,.12); --d-brand-line:rgba(201,169,97,.3);
  --d-on-brand:#0A0B0F;
  --d-btn:#C9A961;
  --d-bar-lo:#8A733F; --d-bar-hi:#E3CB92;
  --d-teal:#7FD1AE; --d-teal-soft:rgba(127,209,174,.11);  --d-teal-line:rgba(127,209,174,.26);
  --d-amber:#E0B969;--d-amber-soft:rgba(224,185,105,.12); --d-amber-line:rgba(224,185,105,.3);
  --d-red:#E8908D;  --d-red-soft:rgba(232,144,141,.11);
  --d-hair:rgba(255,255,255,.07);
  --d-top-glow:rgba(255,255,255,.05);
  --d-staff:rgba(201,169,97,.10);
  --d-shadow:0 2px 10px rgba(0,0,0,.28);
}

/* 默认与手动指定浅色 */
:root, :root[data-theme="light"]{
  --bg:var(--l-bg); --card:var(--l-card); --card2:var(--l-card2);
  --ink:var(--l-ink); --ink2:var(--l-ink2); --ink3:var(--l-ink3); --line:var(--l-line);
  --brand:var(--l-brand); --brand-soft:var(--l-brand-soft); --brand-line:var(--l-brand-line);
  --on-brand:var(--l-on-brand); --btn-bg:var(--l-btn);
  --bar-lo:var(--l-bar-lo); --bar-hi:var(--l-bar-hi);
  --teal:var(--l-teal); --teal-soft:var(--l-teal-soft); --teal-line:var(--l-teal-line);
  --amber:var(--l-amber); --amber-soft:var(--l-amber-soft); --amber-line:var(--l-amber-line);
  --red:var(--l-red); --red-soft:var(--l-red-soft);
  --hair:var(--l-hair); --top-glow:var(--l-top-glow); --staff:var(--l-staff); --shadow:var(--l-shadow);
  color-scheme:light;
}
/* 手动指定深色 */
:root[data-theme="dark"]{
  --bg:var(--d-bg); --card:var(--d-card); --card2:var(--d-card2);
  --ink:var(--d-ink); --ink2:var(--d-ink2); --ink3:var(--d-ink3); --line:var(--d-line);
  --brand:var(--d-brand); --brand-soft:var(--d-brand-soft); --brand-line:var(--d-brand-line);
  --on-brand:var(--d-on-brand); --btn-bg:var(--d-btn);
  --bar-lo:var(--d-bar-lo); --bar-hi:var(--d-bar-hi);
  --teal:var(--d-teal); --teal-soft:var(--d-teal-soft); --teal-line:var(--d-teal-line);
  --amber:var(--d-amber); --amber-soft:var(--d-amber-soft); --amber-line:var(--d-amber-line);
  --red:var(--d-red); --red-soft:var(--d-red-soft);
  --hair:var(--d-hair); --top-glow:var(--d-top-glow); --staff:var(--d-staff); --shadow:var(--d-shadow);
  color-scheme:dark;
}
/* 跟随系统 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:var(--d-bg); --card:var(--d-card); --card2:var(--d-card2);
    --ink:var(--d-ink); --ink2:var(--d-ink2); --ink3:var(--d-ink3); --line:var(--d-line);
    --brand:var(--d-brand); --brand-soft:var(--d-brand-soft); --brand-line:var(--d-brand-line);
    --on-brand:var(--d-on-brand); --btn-bg:var(--d-btn);
  --bar-lo:var(--d-bar-lo); --bar-hi:var(--d-bar-hi);
    --teal:var(--d-teal); --teal-soft:var(--d-teal-soft); --teal-line:var(--d-teal-line);
    --amber:var(--d-amber); --amber-soft:var(--d-amber-soft); --amber-line:var(--d-amber-line);
    --red:var(--d-red); --red-soft:var(--d-red-soft);
    --hair:var(--d-hair); --top-glow:var(--d-top-glow); --staff:var(--d-staff); --shadow:var(--d-shadow);
    color-scheme:dark;
  }
}

:root{ --radius:20px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 家长端容器化：干掉浏览器外壳带来的三大手势冲突
   1) 下拉刷新  → 滚动收进 #scroller，浏览器够不到页面顶部
   2) 上下滑露出地址栏 → 页面本身不滚动，高度锁死为视口高
   3) 左右滑＝前进/后退 → 见 app.js 的手势接管
   仅作用于 <body class="app">，teacher/install 页保持原生滚动 */
html{-webkit-text-size-adjust:100%}
html,body{
  margin:0;padding:0;
  overscroll-behavior-y:none;          /* Chrome/iOS16.4+：禁掉橡皮筋与下拉刷新 */
  -webkit-overflow-scrolling:touch;
}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.6;
  max-width:520px; margin:0 auto; min-height:100vh;
  padding-bottom:calc(78px + var(--safe-b));
  -webkit-font-smoothing:antialiased;
  transition:background .25s, color .25s;
}
body.app{
  height:100vh; height:100dvh;         /* dvh：跟随地址栏收缩，iOS 老版由 JS 兜底 */
  max-height:100dvh; overflow:hidden;  /* 页面本身不滚动 */
  display:flex; flex-direction:column;
  padding:0;
}
/* 注意：这里不能写 touch-action:pan-y。祖先的 touch-action 会限制所有后代，
   话题 chips 的横向滑动会一起失效。横向手势由 app.js 精确接管（排除 .chips）。 */
body.app > main{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;       /* 惯性到顶即止，不冒泡到页面 */
  padding-bottom:calc(86px + var(--safe-b));
}
body.app > header.hd{position:static;flex:0 0 auto}
button,input{font-family:inherit}
img,svg{display:block}

/* ============ 吸顶栏 ============ */
header.hd{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  padding:calc(var(--safe-t) + 12px) 18px 11px;
  border-bottom:0.5px solid transparent;
  transition:border-color .2s, background .25s;
}
header.hd.stuck{border-bottom-color:var(--hair);background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.hd-row{display:flex;align-items:center;gap:11px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:0 0 40px;
  border:1px solid var(--brand-line)}
.hd-name{font-size:16.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.hd-sub{font-size:12px;color:var(--ink3);line-height:1.3;margin-top:1px}
/* teacher.html / install.html 复用的旧结构 */
.top{display:flex;align-items:center;gap:12px}
.top h1{margin:0;font-size:17px;font-weight:600}
.top p{margin:2px 0 0;font-size:12.5px;color:var(--ink3)}

.hd-icos{margin-left:auto;display:flex;gap:2px}
.ico-btn{width:36px;height:36px;border:0;background:transparent;border-radius:11px;
  display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;padding:0}
.ico-btn:active{background:var(--card2)}
.ico-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ============ 通用卡片 ============ */
main{padding:4px 16px 24px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:12px;
  border:0.5px solid var(--hair);box-shadow:inset 0 1px 0 var(--top-glow);
  transition:background .25s,border-color .25s}
.card h2{margin:0 0 3px;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.card h2 .r{float:right;font-size:12px;font-weight:400;color:var(--ink3)}
.card .meta{font-size:12.5px;color:var(--ink3);margin:0 0 10px}
.sec-title{font-size:12.5px;font-weight:600;color:var(--ink3);margin:20px 4px 9px;letter-spacing:.06em;
  display:flex;align-items:center;gap:7px}
.sec-title::before{content:'';width:3px;height:11px;border-radius:2px;background:var(--brand);opacity:.8;flex:0 0 3px}

.bar{height:5px;border-radius:99px;background:var(--card2);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px;
  transition:width .6s cubic-bezier(.22,1,.36,1)}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 0;border-bottom:0.5px solid var(--hair);font-size:14px}
.row:last-child{border-bottom:0}
.row .v{color:var(--ink3);font-size:13px;flex:0 0 auto}
.row .l{flex:1;min-width:0}
.row .l .s{font-size:12px;color:var(--ink3);margin-top:1px}

.badge{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--brand-soft);
  color:var(--brand);font-weight:500;border:0.5px solid var(--brand-line);
  margin-left:7px;vertical-align:1px;white-space:nowrap}
.badge.t{background:var(--teal-soft);color:var(--teal);border-color:var(--teal-line)}
.badge.a{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}

/* ============ 按钮 ============ */
.btn{display:block;width:100%;border:0;background:var(--btn-bg);color:var(--on-brand);
  border-radius:15px;padding:14px 0;font-size:15.5px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--shadow);
  transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.985)}
.btn.ghost{background:var(--card);border:0.5px solid var(--brand-line);color:var(--brand);box-shadow:none}
.btn.gray{background:var(--card2);color:var(--ink2);border:0;box-shadow:none}
.btn:disabled{opacity:.45;transform:none}
.btnrow{display:flex;gap:8px;margin-top:10px}
.btnrow .btn{margin-top:0}

/* ============ 英雄卡：五线谱 + 音符水印 ============ */
.hero{background:var(--card);border-radius:var(--radius);padding:20px 17px 16px;margin-bottom:12px;
  border:0.5px solid var(--hair);box-shadow:inset 0 1px 0 var(--top-glow);
  position:relative;overflow:hidden}
/* 谱线：极淡的金色横纹，斜向渐隐，像一页没写完的乐谱 */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 11px, var(--staff) 11px 11.6px);
  -webkit-mask-image:linear-gradient(102deg,#000 0 46%,transparent 76%);
  mask-image:linear-gradient(102deg,#000 0 46%,transparent 76%);
}
.hero-top,.hero-kicker,.hero-date,.hero-big,.hero-sub,.chart,.chart-note{position:relative;z-index:1}
.hero-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.hero-kicker{font-size:12px;color:var(--ink3);letter-spacing:.08em}
.hero-date{font-size:12px;color:var(--ink3);letter-spacing:.04em}
.hero-big{font-family:var(--font-serif);font-size:29px;font-weight:600;letter-spacing:-.02em;
  margin:8px 0 0;line-height:1.25}
.hero-big small{font-family:inherit;font-size:14px;font-weight:400;color:var(--ink3);letter-spacing:0}
.hero-big .em{color:var(--brand)}
.hero-sub{font-size:13px;color:var(--ink2);margin-top:4px;min-height:20px}
.hero-bal{display:inline-flex;align-items:center;margin-top:10px;padding:5px 12px;
  border-radius:999px;font-size:12.5px;letter-spacing:.02em;
  color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line)}
.hero-bal[hidden]{display:none}
.hero-bal.low{font-weight:500}

/* 7 天柱状图 */
.chart{display:flex;align-items:flex-end;gap:6px;height:62px;margin:16px 0 2px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
/* 柱子用固定像素基准高度：内部 <i> 的百分比高度才解析得出来
   （flex 项上用 height:% 或 calc(%) 在部分内核里会算成 0，柱子就消失了） */
.chart .bk{width:100%;max-width:22px;height:40px;flex:0 0 40px;border-radius:5px;background:var(--card2);
  min-height:4px;position:relative;overflow:hidden}
/* 填充：底部沉、顶部亮的金色渐变，有金属质感 */
.chart .bk i{position:absolute;left:0;right:0;bottom:0;border-radius:4px;
  background:linear-gradient(to top,var(--bar-lo),var(--bar-hi));
  transition:height .6s cubic-bezier(.22,1,.36,1)}
.chart .col.today .bk i{box-shadow:0 0 0 0.5px var(--brand-line)}
.chart .col .d{font-size:10.5px;color:var(--ink3);line-height:1}
.chart .col.today .d{color:var(--brand);font-weight:600}
.chart-note{font-size:11.5px;color:var(--ink3);text-align:right;margin-top:5px;letter-spacing:.03em}

/* ============ 问一句 ============ */
.askbox{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.askbox .field{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);
  border:0.5px solid var(--hair);border-radius:15px;padding:0 13px;height:46px;
  box-shadow:inset 0 1px 0 var(--top-glow)}
.askbox .field svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--ink3);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.askbox input{flex:1;border:0;background:transparent;font-size:14.5px;color:var(--ink);outline:none;min-width:0}
.askbox input::placeholder{color:var(--ink3)}
.askbox button.ask{height:46px;flex:0 0 auto;border:0;background:var(--brand-soft);
  color:var(--brand);border-radius:15px;padding:0 17px;font-size:14px;font-weight:600;
  cursor:pointer;border:0.5px solid var(--brand-line)}
.askbox button.ask:active{opacity:.7}

.chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 2px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin-bottom:12px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;border:0.5px solid var(--hair);background:var(--card);border-radius:99px;
  padding:6px 13px;font-size:12.5px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.chips button:active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}

.answer{background:var(--brand-soft);border-radius:15px;padding:13px 15px;font-size:13.5px;
  color:var(--ink);margin-bottom:12px;display:none;border:0.5px solid var(--brand-line)}
.answer.show{display:block;animation:pop .22s ease}
.answer .who{font-size:11.5px;color:var(--brand);opacity:.8;margin-bottom:4px;font-weight:600;letter-spacing:.06em}

@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ 上次课要点 ============ */
.seg{display:flex;gap:4px;background:var(--card2);border-radius:12px;padding:3px;margin-bottom:12px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:7px 0;
  font-size:12.5px;color:var(--ink2);cursor:pointer;transition:.2s}
.seg button.on{background:var(--card);color:var(--brand);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.note{font-size:14px;color:var(--ink);background:var(--card2);border-radius:13px;
  padding:13px 14px;margin:0;line-height:1.7}
.note.warnnote{background:var(--amber-soft);color:var(--amber)}
.hw{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:13.5px;color:var(--ink2);
  background:var(--teal-soft);border-radius:13px;padding:12px 14px;border:0.5px solid var(--teal-line)}
.hw b{font-weight:500;color:var(--teal);flex:1}
.hw .k{flex:0 0 auto;font-size:12px;color:var(--teal);opacity:.8}

/* ============ 下次课 / 积分 ============ */
.nextwrap{display:flex;align-items:center;gap:12px}
.nextwrap .cal{flex:0 0 48px;height:52px;border-radius:13px;background:var(--brand-soft);
  color:var(--brand);display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:0.5px solid var(--brand-line)}
.nextwrap .cal .m{font-size:10.5px;opacity:.85;line-height:1;letter-spacing:.06em}
.nextwrap .cal .dd{font-family:var(--font-serif);font-size:19px;font-weight:600;line-height:1.2}
.nextwrap .info{flex:1;min-width:0}
.nextwrap .info .t{font-size:15px;font-weight:500}
.nextwrap .info .s{font-size:12.5px;color:var(--ink3);margin-top:1px}
.countdown{flex:0 0 auto;text-align:center;padding-left:11px;border-left:0.5px solid var(--hair)}
.countdown .n{font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--brand);line-height:1.1}
.countdown .u{font-size:11px;color:var(--ink3)}

.goalrow{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px}
.goalrow .g{flex:1;min-width:0;color:var(--ink2)}
.goalrow .g b{color:var(--ink);font-weight:600}
.goalrow .pts{flex:0 0 auto;font-size:12.5px;color:var(--amber);background:var(--amber-soft);
  border:0.5px solid var(--amber-line);border-radius:99px;padding:3px 10px;font-weight:600}

/* ============ 雷达图 / 里程碑 ============ */
.radar{width:100%;height:210px;display:block}
.msl{display:flex;gap:11px;padding:11px 0;border-bottom:0.5px solid var(--hair)}
.msl:last-child{border-bottom:0}
.msl .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:8px;flex:0 0 7px;
  box-shadow:0 0 0 3px var(--brand-soft)}
.msl .t{font-size:14px}
.msl .d{font-size:12.5px;color:var(--ink3)}

/* ============ 兑换 ============ */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--card2);border-radius:15px;padding:14px;border:0.5px solid var(--hair)}
.stat .lbl{font-size:12px;color:var(--ink3);letter-spacing:.04em}
.stat .val{font-family:var(--font-serif);font-size:24px;font-weight:600;margin-top:3px;letter-spacing:-.02em}
.reward{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 0;border-bottom:0.5px solid var(--hair)}
.reward:last-child{border-bottom:0}
.reward .n{font-size:14px}
.reward .c{font-size:12px;color:var(--ink3);margin-top:2px}
.reward button{border:0.5px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);
  border-radius:11px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.reward button:active{opacity:.7}
.reward button:disabled{background:var(--card2);border-color:transparent;color:var(--ink3);cursor:default}
.reward.lock{opacity:.6}

.calbox{background:var(--teal-soft);border:0.5px solid var(--teal-line);border-radius:13px;
  padding:13px;margin-top:10px;font-size:13px;color:var(--teal)}
.calbox code{font-size:11.5px;word-break:break-all;color:var(--teal);
  background:color-mix(in srgb, var(--card) 70%, transparent);
  padding:7px 9px;border-radius:8px;display:block;margin-top:6px;user-select:all}

.kv{display:flex;justify-content:space-between;align-items:center;padding:12px 0;
  border-bottom:0.5px solid var(--hair);font-size:14.5px;gap:10px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink)} .kv .v{color:var(--ink3);font-size:13px}
.switch{width:46px;height:28px;border-radius:99px;background:var(--card2);border:0.5px solid var(--hair);
  position:relative;cursor:pointer;flex:0 0 46px;transition:background .22s;padding:0}
.switch::after{content:'';position:absolute;top:2.5px;left:2.5px;width:22px;height:22px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s}
.switch.on{background:var(--brand);border-color:var(--brand)}
.switch.on::after{transform:translateX(18px);background:var(--on-brand)}

/* ============ 练琴全屏 ============ */
.pr{position:fixed;inset:0;z-index:80;
  background:radial-gradient(120% 90% at 50% 8%, var(--card) 0%, var(--bg) 62%);
  display:none;flex-direction:column;padding:calc(var(--safe-t) + 18px) 24px calc(var(--safe-b) + 24px);
  text-align:center}
.pr.on{display:flex;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pr .song{font-size:14px;color:var(--ink3);margin-top:6px;letter-spacing:.04em}
.pr .spacer{flex:1;display:flex;align-items:center;justify-content:center}
.pr .timer{font-family:var(--font-serif);font-size:68px;font-weight:400;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.pr .listening{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--teal);
  margin-top:16px;background:var(--teal-soft);border:0.5px solid var(--teal-line);
  border-radius:99px;padding:6px 14px}
.pr .listening .pulse{width:7px;height:7px;border-radius:50%;background:var(--teal);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.pr .tip{font-size:12.5px;color:var(--ink3);margin-top:16px;line-height:1.7}
.pr .acts{display:flex;gap:10px;margin-top:auto}
.pr .acts .btn{margin-top:0}
.pr .hint{font-size:11.5px;color:var(--ink3);margin-top:10px}

/* ============ 悬浮练琴按钮 ============ */
.fab{position:fixed;right:16px;bottom:calc(74px + var(--safe-b));z-index:35;
  width:56px;height:56px;border-radius:50%;border:0;background:var(--btn-bg);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 20px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .22s,transform .22s}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab:active{transform:scale(.93)}
.fab svg{width:24px;height:24px;fill:currentColor;stroke:none}

/* ============ 底部导航 ============ */
nav.tabs{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;display:flex;
  background:var(--bg);border-top:0.5px solid var(--hair);
  padding:7px 0 calc(6px + var(--safe-b));z-index:45}
nav.tabs button{flex:1;background:none;border:0;font-size:11px;color:var(--ink3);
  padding:5px 0 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:color .18s;position:relative}
nav.tabs button.on{color:var(--brand)}
nav.tabs button.on svg{stroke-width:2}
/* 选中项顶部的一小条金线，比单纯变色更精致 */
nav.tabs button.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:2.5px;border-radius:3px;background:var(--brand)}
nav.tabs svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ============ 装到桌面引导条（仅在浏览器里出现） ============ */
.install-tip{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:calc(var(--safe-t) + 9px) 14px 9px;
  background:var(--amber-soft);
  border-bottom:0.5px solid var(--amber-line);font-size:12.8px;line-height:1.45;color:var(--amber)}
.install-tip .it-x{margin-left:2px;flex:0 0 26px;width:26px;height:26px;border:0;border-radius:8px;
  background:transparent;color:var(--amber);font-size:17px;line-height:1;cursor:pointer;padding:0;opacity:.7}
.install-tip .it-go{margin-left:auto;flex:0 0 auto;border:0;border-radius:10px;padding:6px 13px;
  background:var(--amber);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.install-tip .it-go:active{opacity:.8}
.install-tip b{color:var(--amber);font-weight:600}

/* ============ 左右滑切页的跟随动效 ============ */
body.app > main.swiping{transition:transform .05s linear}
body.app > main.snapback{transition:transform .22s cubic-bezier(.2,.8,.2,1)}

/* ============ 提示 / 页脚 ============ */
.hide{display:none}
.toast{position:fixed;left:0;right:0;bottom:calc(86px + var(--safe-b));max-width:520px;margin:0 auto;
  padding:0 16px;opacity:0;transition:opacity .25s,transform .25s;transform:translateY(8px);
  pointer-events:none;z-index:90}
.toast.on{opacity:1;transform:none}
.toast div{background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 15px;
  font-size:13.5px;text-align:center;box-shadow:var(--shadow)}
.footnote{font-size:12px;color:var(--ink3);text-align:center;margin:18px 4px 0;line-height:1.7}

/* ---------------- 奖励商城 ---------------- */

.shop{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.shop-empty{padding:28px 8px;text-align:center;color:var(--ink3);font-size:13px;line-height:1.7}
.goods{background:var(--card2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.goods img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--card)}
.gph{width:100%;aspect-ratio:1;display:grid;place-items:center;color:var(--ink3);
  font-size:11px;background:var(--card)}
.gbody{padding:9px 10px 11px;display:flex;flex-direction:column;flex:1}
.gn{font-size:13px;line-height:1.35;min-height:35px}
.gm{font-size:12px;color:var(--brand);margin-top:2px}
.gs{font-size:11.5px;color:var(--ink3);margin:3px 0 8px}
.gbody button{height:32px;border-radius:9px;border:1px solid var(--brand-line);
  background:var(--brand-soft);color:var(--brand);font-size:12.5px;cursor:pointer;font-family:inherit}
.gbody button:disabled{opacity:.55;border-color:var(--line);background:transparent;color:var(--ink3)}
.goods.sold img{filter:grayscale(1);opacity:.5}

.vcs{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.vc{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;
  padding:11px 14px;display:flex;align-items:center;gap:12px;cursor:pointer}
.vcc{font-family:ui-monospace,Menlo,monospace;font-size:18px;letter-spacing:.12em;color:var(--brand)}
.vcn{font-size:12.5px;flex:1;min-width:0;line-height:1.4}
.vct{font-size:11px;color:var(--ink3);white-space:nowrap}

.vmask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:26px}
.vcard{background:var(--card);border:1px solid var(--brand-line);border-radius:18px;
  padding:26px 22px;width:100%;max-width:320px;text-align:center;box-shadow:var(--shadow)}
.vt{font-size:11.5px;color:var(--ink3);letter-spacing:.22em}
.vcode{font-family:ui-monospace,Menlo,monospace;font-size:38px;letter-spacing:.16em;
  color:var(--brand);margin:14px 0 6px}
.vname{font-size:14px}
.vtip{font-size:11.5px;color:var(--ink3);margin-top:9px;line-height:1.65}
.vbtn{margin-top:20px;width:100%;height:44px;border:0;border-radius:12px;
  background:var(--btn-bg);color:var(--on-brand);font-size:15px;font-weight:500;font-family:inherit}