/* ============ 心屿 · 液态玻璃设计系统 ============ */
:root {
  --bg: #070714;
  --ink: #f2f3fb;
  --ink-2: rgba(228, 231, 248, .64);
  --ink-3: rgba(228, 231, 248, .40);
  --line: rgba(255, 255, 255, .13);
  --glass: rgba(255, 255, 255, .055);
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --good: #34d399;
  --info: #60a5fa;
  --warn: #fbbf24;
  --bad: #fb7185;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --blur: blur(22px) saturate(150%);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: rgba(139, 92, 246, .45); }

/* ---------- 背景：流动光斑 + 颗粒 ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #101028 0%, #070714 60%); }
.blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .5; will-change: transform; }
.b1 { width: 62vmax; height: 62vmax; left: -22vmax; top: -18vmax; background: radial-gradient(circle at 35% 35%, #7c3aed, transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width: 52vmax; height: 52vmax; right: -20vmax; top: 12vmax; background: radial-gradient(circle at 60% 40%, #0891b2, transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.b3 { width: 48vmax; height: 48vmax; left: 8vmax; bottom: -24vmax; background: radial-gradient(circle at 50% 50%, #db2777, transparent 65%); opacity: .34; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(9vmax, 7vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-8vmax, -6vmax) scale(1.08); } }
@keyframes drift3 { to { transform: translate(6vmax, -9vmax) scale(1.15); } }
.grain { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

/* ---------- 玻璃材质 ---------- */
.glass {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 45%, rgba(255,255,255,.065));
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 44px rgba(2, 3, 16, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 18% -8%, rgba(255,255,255,.16), transparent 55%);
}

/* ---------- 布局 ---------- */
.app { max-width: 480px; margin: 0 auto; padding: 18px 16px calc(96px + var(--safe-b)); min-height: 100vh; }
.app.immersive { padding-bottom: calc(28px + var(--safe-b)); }
.view { animation: fadeUp .45s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stack > * + * { margin-top: 14px; }

/* ---------- 顶栏 ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 16px; }
.logo-orb {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, #8b5cf6, #22d3ee, #f472b6, #8b5cf6);
  box-shadow: 0 4px 18px rgba(139, 92, 246, .5), inset 0 0 10px rgba(255,255,255,.35);
  position: relative;
}
.logo-orb::after { content: ""; position: absolute; left: 7px; top: 6px; width: 12px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(1px); transform: rotate(-24deg); }
.brand { font-size: 1.06rem; font-weight: 700; letter-spacing: .06em; }
.brand small { display: block; font-size: .62rem; font-weight: 400; color: var(--ink-3); letter-spacing: .28em; }
.topbar .spacer { flex: 1; }
.icon-btn { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.icon-btn svg { width: 18px; height: 18px; fill: var(--ink-2); }

/* ---------- 首页 ---------- */
.hero { padding: 26px 22px 24px; overflow: hidden; }
.hero h1 { font-size: 1.72rem; line-height: 1.32; font-weight: 800; letter-spacing: .02em; }
.hero h1 .grad { background: linear-gradient(100deg, #c4b5fd, #67e8f9 55%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin-top: 10px; color: var(--ink-2); font-size: .86rem; }
.hero-stats { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.stat-pill { font-size: .7rem; color: var(--ink-2); padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.announce { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: var(--r-md); font-size: .76rem; color: var(--ink-2); background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .3); }
.announce .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex: none; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.chips { display: flex; gap: 8px; margin: 18px 0 14px; }
.chip { padding: 8px 16px; border-radius: 999px; font-size: .8rem; color: var(--ink-2); background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: all .25s; }
.chip.on { color: #fff; background: linear-gradient(120deg, rgba(139,92,246,.85), rgba(34,211,238,.7)); border-color: transparent; box-shadow: 0 6px 20px rgba(139, 92, 246, .4); }

.test-card { display: flex; gap: 14px; align-items: center; padding: 16px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.test-card:active { transform: scale(.98); }
.test-emoji {
  width: 52px; height: 52px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(140deg, var(--g1), var(--g2));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--g1) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  position: relative;
}
.test-emoji::after { content: ""; position: absolute; left: 8px; top: 6px; width: 16px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(2px); transform: rotate(-20deg); }
.test-info { flex: 1; min-width: 0; }
.test-info h3 { font-size: .98rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hot-badge { font-size: .58rem; font-weight: 600; color: #fda4af; background: rgba(244, 63, 94, .16); border: 1px solid rgba(244, 63, 94, .35); padding: 1px 7px; border-radius: 999px; }
.test-info p { font-size: .72rem; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test-meta { display: flex; gap: 6px; margin-top: 7px; }
.meta-tag { font-size: .62rem; color: var(--ink-2); padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); }
.test-arrow { color: var(--ink-3); font-size: 1.1rem; flex: none; }

.section-title { font-size: .8rem; color: var(--ink-3); letter-spacing: .2em; margin: 22px 2px 10px; }
.foot-note { margin-top: 26px; text-align: center; font-size: .68rem; color: var(--ink-3); line-height: 1.9; }
.foot-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 测评介绍页 ---------- */
.intro-hero { padding: 28px 22px; text-align: center; overflow: hidden; }
.intro-emoji { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 28px; display: grid; place-items: center; font-size: 2.5rem; background: linear-gradient(140deg, var(--g1), var(--g2)); box-shadow: 0 14px 40px color-mix(in srgb, var(--g1) 50%, transparent), inset 0 2px 0 rgba(255,255,255,.4); position: relative; }
.intro-emoji::after { content: ""; position: absolute; left: 14px; top: 10px; width: 26px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(3px); transform: rotate(-20deg); }
.intro-hero h1 { font-size: 1.4rem; font-weight: 800; }
.intro-hero .sub { color: var(--ink-2); font-size: .8rem; margin-top: 4px; }
.intro-tags { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.info-card { padding: 18px 20px; }
.info-card h4 { font-size: .78rem; color: var(--ink-3); letter-spacing: .14em; margin-bottom: 8px; }
.info-card p { font-size: .86rem; color: var(--ink-2); }
.info-card p + p { margin-top: 8px; }
.note-card { padding: 14px 18px; font-size: .74rem; color: var(--ink-3); border-radius: var(--r-md); background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .22); }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 18px; font-size: .92rem; font-weight: 600; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: transform .15s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(120deg, #8b5cf6, #6366f1 45%, #06b6d4); border: none; color: #fff; box-shadow: 0 10px 30px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-block { display: flex; width: 100%; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.btn-sm { padding: 9px 16px; font-size: .8rem; border-radius: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- 答题页 ---------- */
.quiz-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.quiz-head .back { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); font-size: 1.05rem; color: var(--ink-2); }
.quiz-head .qt { flex: 1; min-width: 0; }
.quiz-head .qt h2 { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-head .qt span { font-size: .68rem; color: var(--ink-3); }
.progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 22px; }
.progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #22d3ee); box-shadow: 0 0 12px rgba(34, 211, 238, .7); transition: width .35s cubic-bezier(.22, .9, .3, 1); position: relative; }
.progress i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.8s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.q-card { padding: 26px 22px; min-height: 150px; }
.q-card.slide { animation: slideIn .32s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.q-num { font-size: .68rem; letter-spacing: .22em; color: var(--cyan); margin-bottom: 10px; }
.q-text { font-size: 1.12rem; font-weight: 700; line-height: 1.6; }
.q-hint { font-size: .72rem; color: var(--ink-3); margin-top: 10px; }

.opts { margin-top: 18px; display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: var(--r-md); font-size: .9rem; color: var(--ink);
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: all .2s; animation: fadeUp .4s both;
}
.opt:nth-child(2) { animation-delay: .05s; } .opt:nth-child(3) { animation-delay: .1s; }
.opt:nth-child(4) { animation-delay: .15s; } .opt:nth-child(5) { animation-delay: .2s; }
.opt .key { width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--ink-2); background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.opt:active { transform: scale(.98); }
.opt.picked { border-color: rgba(34, 211, 238, .8); background: linear-gradient(120deg, rgba(139,92,246,.35), rgba(34,211,238,.22)); box-shadow: 0 0 24px rgba(34, 211, 238, .35), inset 0 1px 0 rgba(255,255,255,.25); }
.opt.picked .key { background: linear-gradient(120deg, #8b5cf6, #22d3ee); color: #fff; border-color: transparent; }
.quiz-foot { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--ink-3); }

/* ---------- 结果页 ---------- */
.result-hero { padding: 28px 22px 24px; text-align: center; overflow: hidden; }
.result-hero .r-title { font-size: .78rem; color: var(--ink-3); letter-spacing: .12em; }
.score-wrap { position: relative; width: 190px; height: 190px; margin: 14px auto 6px; }
.score-wrap canvas { width: 190px; height: 190px; }
.score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-center .num { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #e9d5ff, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.score-center .of { font-size: .68rem; color: var(--ink-3); }
.type-big { font-size: 1.7rem; font-weight: 800; margin: 18px 0 4px; }
.type-emoji { font-size: 3.4rem; margin-top: 14px; filter: drop-shadow(0 8px 22px rgba(139, 92, 246, .5)); }
.band-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 18px; border-radius: 999px; font-size: .84rem; font-weight: 700; border: 1px solid; }
.band-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.tone-good { color: var(--good); background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .4); }
.tone-info { color: var(--info); background: rgba(96, 165, 250, .1); border-color: rgba(96, 165, 250, .4); }
.tone-warn { color: var(--warn); background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .4); }
.tone-bad { color: var(--bad); background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .4); }

.card { padding: 20px; }
.card h3 { font-size: .92rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card h3 .bar { width: 4px; height: 15px; border-radius: 4px; background: linear-gradient(180deg, #8b5cf6, #22d3ee); }
.card p { font-size: .85rem; color: var(--ink-2); }
.card p + p { margin-top: 8px; }
.advice-list { list-style: none; margin-top: 4px; }
.advice-list li { position: relative; padding: 8px 0 8px 22px; font-size: .82rem; color: var(--ink-2); border-bottom: 1px dashed rgba(255,255,255,.07); }
.advice-list li:last-child { border-bottom: none; }
.advice-list li::before { content: "✦"; position: absolute; left: 2px; color: var(--cyan); font-size: .7rem; }

.dim-row { margin-top: 12px; }
.dim-row .dim-head { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 6px; }
.dim-row .dim-head b { font-weight: 600; }
.dim-row .dim-head span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dim-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dim-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--g1, #8b5cf6), var(--g2, #22d3ee)); box-shadow: 0 0 10px rgba(34, 211, 238, .5); width: 0; transition: width 1s cubic-bezier(.22, .9, .3, 1); }
.radar-wrap { display: grid; place-items: center; padding: 8px 0 2px; }
.radar-wrap canvas { width: 260px; height: 240px; }

.care-card { padding: 18px 20px; border-radius: var(--r-lg); background: linear-gradient(150deg, rgba(251,113,133,.16), rgba(139,92,246,.12)); border: 1px solid rgba(251, 113, 133, .4); }
.care-card h3 { font-size: .92rem; color: #fecdd3; margin-bottom: 8px; }
.care-card p { font-size: .8rem; color: var(--ink-2); }
.care-card .hotline { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hotline a { padding: 9px 16px; border-radius: 14px; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }

/* 锁定报告 */
.lock-card { overflow: hidden; }
.lock-preview { position: relative; padding: 4px 0 0; }
.lock-preview .sk { height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); margin-bottom: 10px; }
.lock-preview .sk:nth-child(1) { width: 92%; } .lock-preview .sk:nth-child(2) { width: 78%; }
.lock-preview .sk:nth-child(3) { width: 85%; } .lock-preview .sk:nth-child(4) { width: 60%; }
.lock-veil { position: absolute; inset: -6px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, rgba(10,10,26,.1), rgba(10,10,26,.72) 70%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 12px; }
.lock-veil .lock-ico { font-size: 1.5rem; filter: drop-shadow(0 4px 14px rgba(139, 92, 246, .6)); }
.lock-veil span { font-size: .74rem; color: var(--ink-2); }
.price-line { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 12px; }
.price-line .price { font-size: 1.5rem; font-weight: 800; color: #fbbf24; }
.price-line .unit { font-size: .72rem; color: var(--ink-3); }
.unlock-actions { display: grid; gap: 10px; }

.disclaimer { font-size: .68rem; color: var(--ink-3); text-align: center; line-height: 1.9; padding: 4px 10px; }
.result-actions { display: flex; gap: 10px; }
.result-actions .btn { flex: 1; }

/* ---------- 报告页 ---------- */
.report-head { padding: 24px 22px; text-align: center; }
.report-head .tag { font-size: .66rem; letter-spacing: .26em; color: var(--cyan); }
.report-head h1 { font-size: 1.24rem; font-weight: 800; margin-top: 8px; line-height: 1.5; }
.report-head .sub { font-size: .74rem; color: var(--ink-3); margin-top: 6px; }
.report-section { padding: 20px; }
.report-section h3 { font-size: .94rem; font-weight: 700; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.report-section h3 .idx { width: 22px; height: 22px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .68rem; background: linear-gradient(120deg, #8b5cf6, #22d3ee); color: #fff; }
.report-section p { font-size: .84rem; color: var(--ink-2); }
.report-section p + p { margin-top: 9px; }
.plan-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.plan-item:last-child { border-bottom: none; }
.plan-item .d { flex: none; width: 56px; font-size: .7rem; font-weight: 700; color: var(--cyan); padding-top: 2px; }
.plan-item .t { font-size: .82rem; color: var(--ink-2); }

/* ---------- 我的 / 关于 ---------- */
.page-head { padding: 8px 2px 18px; }
.page-head h1 { font-size: 1.4rem; font-weight: 800; }
.page-head p { font-size: .78rem; color: var(--ink-3); margin-top: 4px; }
.history-card { display: flex; align-items: center; gap: 13px; padding: 15px 16px; }
.history-card .h-emoji { width: 44px; height: 44px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; background: linear-gradient(140deg, var(--g1), var(--g2)); }
.history-card .h-info { flex: 1; min-width: 0; }
.history-card .h-info h3 { font-size: .9rem; font-weight: 700; }
.history-card .h-info span { font-size: .68rem; color: var(--ink-3); }
.h-score { flex: none; text-align: right; }
.h-score b { display: block; font-size: 1rem; font-weight: 800; }
.h-score span { font-size: .62rem; color: var(--ink-3); }
.h-del { flex: none; color: var(--ink-3); font-size: 1rem; padding: 6px; }
.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.empty .orb { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; background: conic-gradient(from 210deg, rgba(139,92,246,.7), rgba(34,211,238,.6), rgba(244,114,182,.6), rgba(139,92,246,.7)); filter: blur(.5px); box-shadow: 0 12px 40px rgba(139, 92, 246, .4); animation: pulse 3s infinite; }
.empty p { font-size: .82rem; }
.about-block { padding: 20px; }
.about-block h3 { font-size: .94rem; font-weight: 700; margin-bottom: 8px; }
.about-block p { font-size: .82rem; color: var(--ink-2); }
.about-block p + p { margin-top: 8px; }
.hotline-grid { display: grid; gap: 10px; margin-top: 10px; }
.hotline-grid a { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: .82rem; }
.hotline-grid a b { color: var(--cyan); font-variant-numeric: tabular-nums; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + var(--safe-b)); z-index: 40;
  width: min(440px, calc(100% - 28px));
  display: flex; padding: 8px; border-radius: 24px;
}
.tabbar.hide { display: none; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 5px; border-radius: 17px; color: var(--ink-3); font-size: .64rem; transition: all .25s; }
.tab svg { width: 20px; height: 20px; fill: currentColor; }
.tab.on { color: #fff; background: linear-gradient(120deg, rgba(139,92,246,.5), rgba(34,211,238,.35)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* ---------- 弹窗 / 提示 ---------- */
.modal-mask { position: fixed; inset: 0; z-index: 90; background: rgba(4, 4, 14, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .25s both; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(480px, 100%); max-height: 86vh; overflow-y: auto; border-radius: 28px 28px 0 0; padding: 26px 22px calc(26px + var(--safe-b)); animation: sheetUp .35s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } }
.modal .grab { width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: -10px auto 18px; }
.modal h3 { font-size: 1.06rem; font-weight: 800; margin-bottom: 6px; }
.modal .m-sub { font-size: .78rem; color: var(--ink-3); margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .74rem; color: var(--ink-3); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 15px; font-size: .92rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); outline: none; transition: border .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { border-color: rgba(34, 211, 238, .7); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
.modal .m-actions { display: grid; gap: 10px; margin-top: 18px; }

#toast-root { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { padding: 13px 18px; border-radius: 16px; font-size: .82rem; text-align: center; background: rgba(20, 20, 40, .85); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 10px 34px rgba(0,0,0,.5); animation: toastIn .3s cubic-bezier(.22, .9, .3, 1) both; }
.toast.err { border-color: rgba(251, 113, 133, .5); color: #fecdd3; }
.toast.ok { border-color: rgba(52, 211, 153, .5); color: #a7f3d0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } }

/* ---------- 支付 ---------- */
.pay-qr { display: grid; place-items: center; margin: 4px 0 14px; }
.pay-qr img { width: 212px; height: 212px; border-radius: 18px; border: 1px solid var(--line); background: #fff; padding: 8px; box-shadow: 0 10px 34px rgba(0,0,0,.45); }
.pay-status { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-size: .78rem; color: var(--ink-2); }
.pay-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 1.6s infinite; flex: none; }

/* ---------- 管理后台 ---------- */
.admin-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.admin-head h1 { font-size: 1.2rem; font-weight: 800; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat-card { padding: 18px; text-align: center; }
.stat-card b { display: block; font-size: 1.7rem; font-weight: 800; background: linear-gradient(120deg, #c4b5fd, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-card span { font-size: .72rem; color: var(--ink-3); }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 520px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
th { color: var(--ink-3); font-weight: 600; font-size: .7rem; letter-spacing: .08em; }
td .st { padding: 2px 9px; border-radius: 999px; font-size: .66rem; border: 1px solid; }
.st-unused { color: var(--good); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.st-used { color: var(--info); border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.08); }
.st-revoked { color: var(--bad); border-color: rgba(251,113,133,.4); background: rgba(251,113,133,.08); }
.code-cell { font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .06em; }
.row-actions button { font-size: .7rem; color: var(--ink-3); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); }
.row-actions button:hover { color: var(--bad); border-color: rgba(251,113,133,.5); }
.login-card { max-width: 380px; margin: 14vh auto 0; padding: 30px 26px; text-align: center; }
.login-card .logo-orb { margin: 0 auto 16px; width: 54px; height: 54px; }
.login-card h1 { font-size: 1.16rem; font-weight: 800; margin-bottom: 4px; }
.login-card p { font-size: .76rem; color: var(--ink-3); margin-bottom: 20px; }

/* ---------- 响应式 & 无障碍 ---------- */
@media (min-width: 520px) {
  .app { padding-top: 28px; }
  .modal { border-radius: 28px; margin-bottom: 4vh; }
  .modal-mask { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}