/* 大五人格 H5 · 编辑式高级设计系统 v2（无框架依赖，可离线运行）
 * 原则：克制的 ink + 暖纸底 + 单一主色；颜色只用于数据（五维）；
 * 强排版层级、杂志式 kicker、充足留白、真实 SVG 图标。 */
:root{
  --bg:#F7F3EC; --surface:#FFFFFF; --surface-2:#FCFAF6;
  --primary:#5B53D6; --primary-soft:#EDECFB; --primary-ink:#3D37A8;
  --ink:#17161F; --text:#2A2833; --muted:#6A6577; --faint:#857F90;
  --border:#EAE3D7; --border-2:#E2DBCD; --hair:#ECE6DC;
  --gold:#B08A4F;
  --o:#8B5CF6; --c:#3B82F6; --e:#F59E0B; --a:#10B981; --n:#06B6D4;
  --shadow:0 1px 2px rgba(30,25,50,.04), 0 8px 24px rgba(30,25,50,.06);
  --shadow-lg:0 4px 10px rgba(30,25,50,.08), 0 24px 56px rgba(30,25,50,.16);
  --ring:0 0 0 3px rgba(91,83,214,.4);
  --radius:18px; --radius-sm:13px; --r-pill:999px;
  --sp:20px;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  --font-serif:"Songti SC","Source Han Serif SC","Noto Serif SC",STSong,serif;
  --font-mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(rgba(120,105,75,.028) 1px, transparent 1px),
    radial-gradient(rgba(120,105,75,.022) 1px, transparent 1px);
  background-size:15px 15px, 23px 23px; background-position:0 0, 8px 12px; background-attachment:fixed;
}
:focus-visible{outline:none; box-shadow:var(--ring)}
.opt:focus-visible,.btn:focus-visible,.acc-head:focus-visible{box-shadow:var(--ring)}
.code-input:focus-visible{box-shadow:0 0 0 4px var(--primary-soft)}

#app{max-width:430px; margin:0 auto; min-height:100vh; position:relative; overflow-x:hidden}
@media(min-width:480px){ #app{box-shadow:var(--shadow-lg)} }
.page{display:none; padding:26px 22px 56px; animation:fade .4s cubic-bezier(.2,.7,.2,1)}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .page,*{animation:none!important; transition:none!important} }

h1,h2,h3{margin:0; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.serif{font-family:var(--font-serif); letter-spacing:0}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.small{font-size:13px} .center{text-align:center}
/* 维度英文全称：辅色、弱化（中文为主、英文为辅） */
.dim-en{font-family:var(--font-sans); font-weight:400; font-size:11px; color:var(--faint); letter-spacing:.01em}

/* 杂志式 kicker 段标题 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase; animation:fadeUp .45s ease backwards;}
.kicker{display:flex; align-items:center; gap:10px; margin:34px 2px 14px; color:var(--ink)}
.kicker .n{font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--primary); letter-spacing:.06em}
.kicker .ln{flex:0 0 22px; height:1px; background:var(--ink); opacity:.5}
.kicker .t{font-size:14px; font-weight:700; letter-spacing:.04em}
.kicker .en{margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase}

/* 胶囊 */
.pill{display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:var(--r-pill);
  background:var(--primary-soft); color:var(--primary-ink); font-size:13px; font-weight:600}
.pill.ghost{background:transparent; border:1px solid var(--border-2); color:var(--muted)}

/* 卡片 */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:16px}

/* 首页首屏 */
.home-hero{
  position:relative; overflow:hidden; min-height:292px; padding:22px 20px 18px;
  border:1px solid rgba(176,138,79,.24); border-radius:22px;
  background:
    radial-gradient(110% 76% at 100% 0%, rgba(176,138,79,.14) 0%, transparent 48%),
    linear-gradient(155deg,#fff 0%,#FBF7EF 54%,#EEEAFD 100%);
  box-shadow:0 12px 34px rgba(42,36,25,.09), inset 0 1px 0 rgba(255,255,255,.8);
}
.home-hero::before{
  content:""; position:absolute; inset:8px; border:1px solid rgba(176,138,79,.14);
  border-radius:18px; pointer-events:none;
}
.hero-copy{position:relative; z-index:2; max-width:304px}
.hero-copy h1{font-size:clamp(36px,9.7vw,44px); line-height:1.05; margin-top:12px; white-space:nowrap; animation:fadeUp .45s ease .08s backwards;}
.hero-copy p{margin:14px 0 0; max-width:254px; color:var(--muted); font-size:15px; line-height:1.7; animation:fadeUp .45s ease .16s backwards;}
.hero-mark{
  position:absolute; right:-22px; bottom:48px; width:172px; height:172px;
  border-radius:50%; opacity:.58; overflow:hidden; z-index:1;
  animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) .18s backwards;
}
.hero-mark .ring{position:absolute; inset:0; border:1px solid rgba(42,40,51,.13); border-radius:50%}
.hero-mark .r2{inset:31px}
.hero-mark .axis{position:absolute; left:50%; top:50%; width:1px; height:78px; background:rgba(42,40,51,.1); transform-origin:50% 0}
.hero-mark .a1{transform:rotate(0deg)}
.hero-mark .a2{transform:rotate(72deg)}
.hero-mark .a3{transform:rotate(144deg)}
.hero-mark i{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; background:rgba(255,255,255,.9); color:var(--c); font-family:var(--font-mono);
  font-style:normal; font-weight:800; font-size:12px; box-shadow:0 6px 14px rgba(30,25,50,.10);
}
.hero-stats{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(176,138,79,.24);
  padding-top:12px; gap:8px; animation:fadeUp .45s ease .32s backwards;
}
.hero-stats span{
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--muted);
  text-align:center; letter-spacing:.04em;
}
.code-card{margin-top:12px; padding:16px; border-radius:19px}
.code-card h3{margin-bottom:12px;font-size:17px; line-height:1.35}
.history-entry{display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px}
.history-entry h3{font-size:16px;margin-bottom:4px}
.history-entry p{margin:0}
.history-entry .btn{width:auto; white-space:nowrap}

/* 历史报告页 */
.history-hero{
  padding:24px 22px; border-radius:22px; border:1px solid var(--border);
  background:linear-gradient(180deg,#fff,#FCFAF6); box-shadow:var(--shadow); margin-bottom:16px;
}
.history-hero h1{font-size:34px; line-height:1.15; margin-top:8px}
.history-hero p{font-size:14px; line-height:1.7; margin:10px 0 16px}
.history-hero .btn{width:auto; min-width:164px}
.history-list-card{padding-top:8px; padding-bottom:8px}
.empty-state{text-align:center; padding:30px 10px}
.empty-state .mono{font-size:12px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase}
.empty-state p{margin:10px auto 0; max-width:280px; color:var(--muted); font-size:14px; line-height:1.7}

/* 按钮 */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:none; border-radius:var(--radius-sm); padding:16px; font-size:16px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:transform .12s, box-shadow .2s, background .2s, opacity .2s}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(91,83,214,.28)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(91,83,214,.36)}
.btn-primary:disabled{background:#D8D4F2; color:#fff; box-shadow:none; cursor:not-allowed; opacity:.92}
.btn-ghost{background:#fff; border:1px solid var(--border-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary)}
.btn-dark{background:var(--ink); color:#fff}
.btn-row{display:flex; gap:10px}
.btn.sm{padding:12px 14px; font-size:14px; border-radius:11px}
.btn svg{width:18px;height:18px}

/* 兑换码输入 */
.code-card .field-label{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.code-card .btn{padding:13px 14px}
.code-input{width:100%; padding:13px 14px; font-size:19px; font-family:var(--font-mono); font-weight:600;
  text-align:center; letter-spacing:.18em; border:1.5px solid var(--border-2);
  border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); text-transform:uppercase}
.code-input::placeholder{color:var(--faint); font-weight:400; letter-spacing:.1em}
.code-input:focus{outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px var(--primary-soft)}
.hint{font-size:13px; margin-top:6px; min-height:10px; color:var(--muted)}
.hint.err{color:#D8503C} .hint.ok{color:#0E9E6E}
.field-label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:9px; letter-spacing:.02em}

/* 首页五维色点 */
.dimdots{display:flex; justify-content:space-between; gap:6px; margin:16px 6px 10px; animation:fadeUp .45s ease .28s backwards;}
.dimdot{display:flex; flex-direction:column; align-items:center; gap:5px; flex:1 1 0; min-width:0}
.dimdot i{width:13px; height:13px; border-radius:50%}
.dimdot b{font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:700}
.dimdot span{font-size:11px; color:var(--muted); white-space:nowrap}

/* 首页“测什么”说明 */
.dimitem{display:grid; grid-template-columns:auto 1fr; gap:0 12px; padding:13px 0; border-bottom:1px solid var(--hair)}
.dimitem:last-child{border-bottom:none}
.dimitem .tag{width:9px;height:9px;border-radius:50%; margin-top:7px}
.dimitem b{color:var(--ink); font-weight:700; font-size:15px}
.dimitem p{margin:3px 0 0; grid-column:2; font-size:13px; color:var(--muted); line-height:1.55}

/* 「你会得到什么」价值条目（图标 + 标题 + 描述） */
.gain{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--hair); align-items:flex-start}
.gain:first-child{padding-top:2px} .gain:last-child{border:none; padding-bottom:2px}
.gain .gi{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none}
.gain .gi svg{width:18px;height:18px}
.gain b{display:block; font-size:15px; color:var(--ink); margin-bottom:3px}
.gain p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.6}

/* 通用要点列表 */
.bullets{display:flex; flex-direction:column; gap:14px}
.bullet{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text)}
.bullet .bi{flex:none; width:24px;height:24px; border-radius:7px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center}
.bullet .bi svg{width:15px;height:15px}

/* 答题页 */
.quiz-top{position:sticky; top:0; background:linear-gradient(var(--bg) 72%, transparent); padding:16px 22px 14px; z-index:20; margin:-26px -22px 0}
.quiz-bar{display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--muted)}
.quiz-bar #qCounter{font-family:var(--font-mono); font-weight:700; color:var(--ink); letter-spacing:.04em}
.progress{height:5px; background:var(--border); border-radius:99px; margin-top:12px; overflow:hidden}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--primary),#8079E6); border-radius:99px; transition:width .4s cubic-bezier(.2,.8,.2,1)}
.qtext{font-family:var(--font-serif); font-size:23px; line-height:1.58; text-align:center; color:var(--ink);
  padding:46px 6px 40px; min-height:128px; letter-spacing:.01em}
.opt{position:relative; width:100%; text-align:center; padding:16px 46px; margin-bottom:11px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border-2); background:#fff; font-size:16px; font-weight:500; color:var(--text);
  cursor:pointer; transition:transform .14s, border-color .16s, background .16s, color .16s; box-shadow:0 1px 2px rgba(30,25,50,.03)}
.opt:hover{border-color:var(--primary)}
.opt:active{transform:scale(.99)}
.opt.sel::after{content:""; position:absolute; right:18px; top:50%; width:6px; height:12px; margin-top:-8px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.opt .key{position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:12px;
  color:var(--faint); font-family:var(--font-mono)}
.opt.sel .key{color:rgba(255,255,255,.75)}
.opt[data-v="1"]{border-color:#C9CFE0} .opt[data-v="2"]{border-color:#CDD3E6}
.opt[data-v="3"]{border-color:#DCD6CA} .opt[data-v="4"]{border-color:#EFD6A6} .opt[data-v="5"]{border-color:#ECC987}
.opt.sel{background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(91,83,214,.26)}
.iconbtn{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;font-family:inherit;
  min-height:44px;min-width:44px;padding:4px 8px;border-radius:9px}
.iconbtn:hover{color:var(--ink)}

/* 里程碑 toast */
.toast{position:fixed; left:50%; top:16%; transform:translateX(-50%); z-index:60;
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); animation:pop .3s ease; white-space:nowrap}
@keyframes pop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

/* 结果页 Hero —— 杂志封面感 */
.hero{position:relative; background:
   radial-gradient(120% 80% at 100% 0%, #EFEBFF 0%, transparent 55%),
   linear-gradient(180deg,#FFFFFF, #FCFAFF);
  border:1px solid var(--border); border-radius:22px; padding:26px 24px 24px; box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden}
.hero .kk{display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase}
.hero .kk i{width:18px;height:1px;background:var(--gold);opacity:.7}
.hero h1{font-family:var(--font-serif); font-size:32px; line-height:1.3; margin:12px 0 0; color:var(--ink)}
.hero .ol{margin:12px 0 0; font-size:15px; color:var(--text); line-height:1.7}
.hero .rule{height:1px; background:var(--hair); margin:18px 0 16px}
/* 结果 Hero 内的五维概览：雷达 + 明细条形（紧凑布局，取代独立的「五维雷达」分节） */
.hero-radar{display:flex; justify-content:center; margin:0 0 -4px}
.hero-radar svg{width:100%; max-width:232px; height:auto}
.hero-bars{margin:6px 0 2px}
.pcode{display:flex; flex-direction:column; gap:4px}
.pcode .pl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--faint); text-transform:uppercase}
.pcode .pl b{font-family:var(--font-sans); font-weight:700; font-size:11.5px; letter-spacing:.04em; color:var(--muted); text-transform:none} /* 剖面码：中文为主 */
.pcode .pv{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.01em; white-space:nowrap} /* 单行不换行 */
.pcd{margin-right:3px} /* 维度组间距，五组单行排布 */
.pcd b{font-weight:800; margin-right:1px} /* 维度字母上色并与数字留缝，区隔 O 与 0 */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink);
  padding:7px 12px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--border-2)}
.chip i{width:9px;height:9px;border-radius:50%}
.chip.rel{background:var(--primary-soft); border-color:transparent; color:var(--primary-ink); cursor:pointer; font-family:inherit; font-weight:600}
.chip.rel:hover{background:#E4E2FA}
.chip.rel .qm{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:1px;
  border-radius:50%; background:var(--primary); color:#fff; font-size:10px; font-weight:700; line-height:1}

/* 条形分数（Hero 概览，紧凑） */
.bar{margin:0 0 12px}
.bar:last-child{margin-bottom:0}
.bar-head{display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:6px}
.bar-name{display:flex; flex-direction:column; line-height:1.2}
.bar-head b{font-weight:700; font-size:15px}
.bar-name .dim-en{margin-top:1px}
.bar-head .v{font-family:var(--font-mono); color:var(--muted); font-size:13px; font-weight:600}
.bar-track{height:9px; background:var(--border); border-radius:99px; overflow:hidden}
.bar-track > i{display:block; height:100%; border-radius:99px; transition:width 1s cubic-bezier(.2,.8,.2,1)}

/* 维度详情卡（折叠 + 折叠态预览 + 明确展开提示） */
.acc{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; background:#fff; transition:box-shadow .2s, border-color .2s}
.acc.open{box-shadow:var(--shadow); border-color:var(--border-2)}
/* 标题栏：浅色底 + 分隔线，与下方内容形成明确区分 */
.acc-head{display:flex; align-items:center; gap:11px; padding:15px 18px; cursor:pointer; width:100%; background:#F4F0E8; border:none; border-bottom:1px solid var(--border); font-family:inherit; text-align:left}
.acc-head:hover{background:#EEE9DF}
.acc-head .dot{width:11px;height:11px;border-radius:50%; flex:none}
.acc-head .nm{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.acc-head .nm b{font-weight:700; font-size:16px; color:var(--ink)}
.acc-head .nm .dim-en{margin-top:2px}
.acc-head .lv{margin-left:auto; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--muted)}
.acc-head .caret{flex:none; color:var(--primary); transition:transform .25s; display:flex}
.acc-head .caret svg{width:18px;height:18px}
.acc.open .caret{transform:rotate(180deg)}
.acc-preview{padding:14px 18px 16px; font-size:14px; color:var(--muted); line-height:1.6; background:#fff}
.acc.open .acc-preview{display:none}
.acc-body{padding:14px 18px 20px; display:none; background:#fff}
.acc.open .acc-body{display:block; animation:fade .3s ease}
.acc-body p{margin:8px 0 0; font-size:15px; color:var(--text); line-height:1.7}
.acc-body .lbl{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--primary);
  letter-spacing:.06em; margin-top:16px; text-transform:uppercase}
.acc-body .lbl::before{content:""; width:12px; height:1px; background:var(--primary); opacity:.5}

/* 子维度扫描 */
.facet{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair)}
.facet:last-child{border:none}
.facet .nm{font-weight:600; width:88px; flex:none; font-size:14px; color:var(--ink)}
.facet .mini{flex:1; height:7px; background:var(--border); border-radius:99px; overflow:hidden}
.facet .mini > i{display:block;height:100%;border-radius:99px; transition:width .9s cubic-bezier(.2,.8,.2,1)}
.facet .lv{font-size:12px; font-weight:600; width:24px; text-align:right; flex:none}
.facet .lv[data-l="高"]{color:var(--primary)} .facet .lv[data-l="低"]{color:var(--faint)} .facet .lv[data-l="中"]{color:var(--muted)}

/* 突出倾向 */
.topfacet{display:flex; gap:11px; padding:11px 0; align-items:baseline}
.topfacet:not(:last-child){border-bottom:1px solid var(--hair)}
.topfacet b{flex:none; width:78px; font-weight:700; font-size:14px}
.topfacet span{font-size:14px; color:var(--muted); line-height:1.55}

/* 场景建议 —— 真实 SVG 图标 */
.scene{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--hair)}
.scene:first-child{padding-top:2px} .scene:last-child{border:none; padding-bottom:2px}
.scene .ic{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none}
.scene .ic svg{width:20px;height:20px}
.scene b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px}
.scene p{margin:0; font-size:14px; color:var(--muted); line-height:1.6}

/* 历史记录 */
.hist-item{display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--hair); cursor:pointer; width:100%; background:none; border-left:0;border-right:0;border-top:0; text-align:left; font-family:inherit}
.hist-item:last-child{border-bottom:none}
.hist-item:hover .ht{color:var(--primary)}
.hist-main{flex:1; min-width:0}
.hist-main .ht{font-weight:700; font-size:15.5px; color:var(--ink); line-height:1.35; transition:color .16s}
.hist-main .hpc{font-family:var(--font-mono); font-size:12.5px; font-weight:700; margin-top:5px; letter-spacing:.02em}
.hist-main .hm{color:var(--muted); font-size:12px; margin-top:3px}
.hist-item .arr{margin-left:auto; color:var(--faint); align-self:center; white-space:nowrap}
.hist-dot{width:30px;height:30px;border-radius:10px;background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:800;flex:none; align-self:flex-start; margin-top:2px}

/* 分享卡（3:4，随视口高度收缩，避免溢出） */
.sharewrap{position:fixed; inset:0; background:rgba(20,18,35,.66); backdrop-filter:blur(3px); z-index:80; display:none;
  align-items:center; justify-content:center; padding:18px; overflow:auto}
.sharewrap.show{display:flex; flex-direction:column}
#shareCard{width:min(310px,46vh); aspect-ratio:3/4; border-radius:22px; overflow:hidden; position:relative; flex:none;
  background:radial-gradient(120% 70% at 0% 0%, #FFF4E2 0%, transparent 50%), linear-gradient(160deg,#F3EEFF 0%,#EAF6F6 100%);
  color:#241F3D; padding:7% 8%; display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
#shareCard .lead{font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; font-family:var(--font-mono)}
#shareCard .ttl{font-family:var(--font-serif); font-size:clamp(22px,7vh,30px); font-weight:700; line-height:1.25; margin:7px 0 0}
#shareCard .sbar{display:flex; flex-direction:column; gap:6px; margin:auto 0}
#shareCard .one{font-size:12.5px; opacity:.8; line-height:1.55}
#shareCard .scode{font-family:var(--font-mono); font-size:12px; font-weight:700; opacity:.6; letter-spacing:.08em; margin-top:8px}
#shareCard .foot{margin-top:14px; font-size:11px; opacity:.62; border-top:1px solid rgba(36,31,61,.2); padding-top:11px}
#shareCard .foot b{display:block; font-size:13px; opacity:.92; margin-bottom:2px; font-weight:700}
.sbar .row{display:flex; align-items:center; gap:9px; font-size:11px}
.sbar .row > span{width:13px; font-weight:700; font-family:var(--font-mono)}
.sbar .row .t{flex:1; height:6px; background:rgba(36,31,61,.13); border-radius:99px; overflow:hidden}
.sbar .row .t > i{display:block;height:100%;border-radius:99px}
.share-actions{display:flex; gap:10px; margin-top:16px; width:min(310px,46vh)}

/* 免责 / 杂项 */
.disclaimer{font-size:12px; color:var(--muted); line-height:1.65; margin-top:10px} /* 实质性免责文本用 muted 以达 AA 对比 */
.note-card{background:transparent; border:1px dashed var(--border-2); border-radius:var(--radius); padding:18px; margin-bottom:16px}
.note-card .hd{font-weight:700; color:var(--ink); font-size:14px; margin-bottom:6px}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%; display:inline-block;animation:spin .7s linear infinite}
.spinner.dark{border-color:#E2DBCD;border-top-color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}
.backbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.backbar button{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;font-family:inherit;padding:6px 0}
.backbar button:hover{color:var(--ink)}

/* 模态 */
.modal{position:fixed; inset:0; background:rgba(20,18,35,.5); backdrop-filter:blur(2px); z-index:70; display:none; align-items:flex-end; justify-content:center}
.modal.show{display:flex; animation:fade .25s ease}
.modal .sheet{background:#fff; width:100%; max-width:430px; border-radius:22px 22px 0 0; padding:26px 22px 34px; box-shadow:var(--shadow-lg)}
.modal h3{margin-bottom:8px; font-size:19px}