/* ============================================================
   心屿 MindIsle · app.css  (Palette A 暮色玫瑰 / DESIGN.md v2)
   多页面共享设计基座：tokens + 基础 + 组件 + 导航 + 各页样式
   ============================================================ */
:root{
  --font-serif:"Newsreader","Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;
  --font-sans:"Inter","Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --color-primary-700:#9B4C56; --color-primary-600:#B2606A; --color-primary-500:#C07B84; --color-primary-050:#F3E1E0;
  --color-accent-600:#B08446; --color-accent-500:#B08446; --color-accent-100:#EFE0C2; --color-accent-050:#F4EBDA; --color-accent-ink:#8A6224;
  --color-ink-900:#33262A; --color-ink-700:#5C4A48; --color-ink-500:#7C6A63; --color-ink-400:#9C8C82;
  --color-ink-100:#EADBCB; --color-ink-050:#F2E8DC;
  --color-bg:#FAF4ED; --color-surface:#FFFDFA; --color-surface-muted:#F2E8DC;
  --color-border:#EBDCCB; --color-border-strong:#D9C3AD;
  --color-success-600:#4C8A6B; --color-success-050:#E2EDE5;
  --color-error-600:#B9503F; --color-error-050:#F6E1DC;
  --shadow-xs:0 1px 2px rgba(60,42,36,.06);
  --shadow-sm:0 1px 3px rgba(60,42,36,.08),0 1px 2px rgba(60,42,36,.04);
  --shadow-md:0 4px 12px rgba(60,42,36,.08),0 2px 4px rgba(60,42,36,.05);
  --shadow-lg:0 12px 28px rgba(60,42,36,.10),0 4px 8px rgba(60,42,36,.06);
  --shadow-2xl:0 24px 60px rgba(60,42,36,.14);
  --radius:12px; --radius-lg:16px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--color-ink-900);background:var(--color-bg);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:inline-block;vertical-align:middle}
.container{max-width:1120px;margin:0 auto;padding:0 var(--s6)}
.container-narrow{max-width:820px;margin:0 auto;padding:0 var(--s6)}
main{display:block}
.serif{font-family:var(--font-serif)}
.eyebrow{font:600 13px/1 var(--font-sans);letter-spacing:.14em;color:var(--color-primary-600);margin-bottom:var(--s3)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--color-accent-500);margin-right:8px;vertical-align:1px}
h1,h2{font-family:var(--font-serif)}
section{padding:var(--s16) 0}
.sec-head{max-width:720px;margin-bottom:var(--s12)}
.sec-head h2{font-size:clamp(26px,3.4vw,34px);font-weight:650;line-height:1.2;letter-spacing:-.01em}
.sec-head p{margin-top:var(--s4);color:var(--color-ink-500);font-size:17px}
.muted{color:var(--color-ink-500)}
.center{text-align:center}
.center .sec-head{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--font-sans);
  border-radius:var(--radius);padding:14px 22px;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(178,96,106,.32)}
.btn-primary{background:var(--color-primary-600);color:#fff}
.btn-primary:hover{background:var(--color-primary-700);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-primary:active{background:#84414A;transform:translateY(0)}
.btn-secondary{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-ink-900)}
.btn-secondary:hover{background:var(--color-surface-muted)}
.btn-ghost{background:transparent;color:var(--color-primary-600);padding:12px 10px}
.btn-ghost:hover{background:var(--color-primary-050)}
.btn-danger{background:var(--color-error-600);color:#fff}
.btn-block{width:100%}
.btn-lg{padding:16px 26px;font-size:16px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none}

/* ---------- Nav (checkbox burger, no JS) ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,253,250,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--color-border)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:700;font-size:20px}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--color-primary-600);display:grid;place-items:center;color:#fff}
.nav-links{display:flex;gap:var(--s8);font-size:15px;color:var(--color-ink-700)}
.nav-links a{padding:8px 4px;position:relative}
.nav-links a:hover{color:var(--color-primary-600)}
.nav-links a.active{color:var(--color-primary-600);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;background:var(--color-primary-600);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:var(--s3)}
.nav-cta .login{font-size:15px;color:var(--color-ink-700)}
.nav-cta .login:hover{color:var(--color-primary-600)}
#nav-toggle{display:none}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--color-border-strong);border-radius:10px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--color-ink-700);background:var(--color-surface)}
.mobile-panel{display:none}
@media (max-width:860px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .nav-cta .login{display:none}
  .nav-cta .btn{display:none}
  .mobile-panel{display:none;border-top:1px solid var(--color-border);background:var(--color-surface)}
  .mobile-panel a{display:block;padding:14px var(--s6);border-bottom:1px solid var(--color-border);color:var(--color-ink-700)}
  .mobile-panel a:last-child{border-bottom:none}
  .mobile-panel .cta{margin:var(--s4) var(--s6)}
  #nav-toggle:checked ~ .mobile-panel{display:block}
}

/* ---------- Hero (landing) ---------- */
.hero{padding:var(--s24) 0 var(--s16)}
.hero-compact{padding:var(--s16) 0 var(--s12)}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s16);align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,56px);font-weight:700;line-height:1.06;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--color-primary-600)}
.hero .sub{margin-top:var(--s6);font-size:19px;line-height:1.7;color:var(--color-ink-700);max-width:32em}
.hero .cta{display:flex;gap:var(--s3);margin-top:var(--s8);flex-wrap:wrap}
.hero .trust{margin-top:var(--s6);font-size:14px;color:var(--color-ink-400)}
.hero .trust b{color:var(--color-ink-500);font-weight:600}

/* ---------- Page hero (sub-pages) ---------- */
.pagehero{padding:var(--s16) 0 var(--s8);text-align:center}
.pagehero h1{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.01em;line-height:1.1}
.pagehero .sub{margin:var(--s5) auto 0;max-width:36em;color:var(--color-ink-500);font-size:17px}
.pagehero .crumb{font-size:13px;color:var(--color-ink-400);margin-bottom:var(--s4)}
.pagehero .crumb a{color:var(--color-ink-500)}
.pagehero .crumb a:hover{color:var(--color-primary-600)}
.pagehero .crumb .sep{margin:0 6px;color:var(--color-ink-100)}

/* ---------- Cards / Grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--s6);box-shadow:var(--shadow-xs)}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--color-primary-050);color:var(--color-primary-600);display:grid;place-items:center;margin-bottom:var(--s4)}
.card h3{font-size:18px;font-weight:600;margin-bottom:6px}
.card p{font-size:14.5px;color:var(--color-ink-500);line-height:1.65}
.card--interactive{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);color:var(--color-primary-600);font-weight:600;font-size:14px}
.card .more:hover{color:var(--color-primary-700)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--s6)}
.step .n{width:34px;height:34px;border-radius:999px;background:var(--color-primary-600);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:var(--s4)}
.step h3{font-size:17px;font-weight:600;margin-bottom:6px}
.step p{color:var(--color-ink-500);font-size:14.5px}

/* ---------- Report preview / trait bar / radar ---------- */
.preview{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:var(--s6);box-shadow:var(--shadow-2xl)}
.preview .p-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}
.preview .p-title{font:600 13px/1 var(--font-sans);letter-spacing:.1em;color:var(--color-ink-400)}
.preview .lock{font:600 12px/1 var(--font-sans);color:var(--color-accent-ink);background:var(--color-accent-050);border:1px solid var(--color-accent-100);border-radius:999px;padding:5px 10px}
.preview h3{font-family:var(--font-serif);font-size:26px;font-weight:700;line-height:1.2}
.preview .sign{margin-top:var(--s2);font-size:15px;color:var(--color-accent-600)}
.trait{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-top:var(--s5)}
.trait .name{color:var(--color-ink-700)}
.trait .num{font-variant-numeric:tabular-nums;color:var(--color-ink-400)}
.trait-bar{height:8px;border-radius:999px;background:var(--color-surface-muted);margin-top:6px}
.trait-bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-primary-600),var(--color-accent-600))}
.preview .p-foot{margin-top:var(--s6);border-top:1px solid var(--color-border);padding-top:var(--s4);display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-ink-400)}
.preview .p-foot a{color:var(--color-primary-600);font-weight:600}

/* ---------- Dimension explainer (about) ---------- */
.dimrow{display:flex;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--color-border)}
.dimrow:last-child{border-bottom:none}
.dimrow .letter{flex:none;width:52px;height:52px;border-radius:14px;background:var(--color-primary-050);color:var(--color-primary-700);
  display:grid;place-items:center;font-family:var(--font-serif);font-weight:700;font-size:22px}
.dimrow h3{font-size:18px;font-weight:600;margin-bottom:2px}
.dimrow h3 span{font-size:13px;color:var(--color-ink-400);font-weight:400;margin-left:8px}
.dimrow p{color:var(--color-ink-500);font-size:14.5px}

/* ---------- Price ---------- */
.pricing-panel{background:var(--color-surface-muted)}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:stretch}
.price-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:var(--s8);display:flex;flex-direction:column;position:relative}
.price-card.featured{border:2px solid var(--color-primary-600);box-shadow:var(--shadow-md)}
.price-card .badge{position:absolute;top:-13px;left:var(--s8);background:var(--color-primary-600);color:#fff;font:600 12px/1 var(--font-sans);padding:6px 12px;border-radius:999px}
.price-card h3{font-family:var(--font-serif);font-size:22px;font-weight:700}
.price-card .amt{font:700 40px/1 var(--font-serif);margin:var(--s5) 0;color:var(--color-ink-900)}
.price-card .amt .cur{font-size:20px;color:var(--color-ink-500);margin-right:2px}
.price-card .amt .per{font:400 14px/1 var(--font-sans);color:var(--color-ink-400)}
.price-card ul{list-style:none;margin-bottom:var(--s6);flex:1}
.price-card li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px;color:var(--color-ink-700);border-bottom:1px dashed var(--color-border)}
.price-card li:last-child{border-bottom:none}
.price-card li svg{flex:none;margin-top:5px;color:var(--color-primary-600)}
.pay-note{margin-top:var(--s5);text-align:center;font-size:13px;color:var(--color-ink-400)}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;margin:0 auto}
details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:var(--s5) var(--s6);margin-bottom:var(--s3)}
details summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:22px;color:var(--color-ink-400);font-weight:400}
details[open] summary::after{content:"–";color:var(--color-primary-600)}
details p{margin-top:var(--s3);color:var(--color-ink-500);font-size:15px}

/* ---------- Forms / Auth ---------- */
.auth{min-height:calc(100vh - 220px);display:grid;place-items:center;padding:var(--s16) 0}
.auth-card{width:100%;max-width:440px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:20px;padding:var(--s8);box-shadow:var(--shadow-md)}
.auth-card h1{font-size:28px;font-weight:700;margin-bottom:6px}
.auth-card .hint{color:var(--color-ink-500);font-size:14.5px;margin-bottom:var(--s6)}
.field{margin-bottom:var(--s5)}
.field label{display:block;font:600 14px/1 var(--font-sans);color:var(--color-ink-700);margin-bottom:var(--s2)}
.input{width:100%;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius);
  padding:12px 14px;font:400 15px/1.6 var(--font-sans);color:var(--color-ink-900);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--color-ink-400)}
.input:focus{outline:none;border-color:var(--color-primary-600);box-shadow:0 0 0 3px rgba(178,96,106,.18)}
.field .help{margin-top:6px;font-size:13px;color:var(--color-ink-400)}
.field .help.rules{display:flex;gap:14px;flex-wrap:wrap}
.field .help.rules span.ok{color:var(--color-success-600)}
.field-error{color:var(--color-error-600);font-size:13px;margin-top:6px}
.code-row{display:flex;gap:var(--s3)}
.code-row .input{flex:1}
.pw-field{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--color-ink-400);
  cursor:pointer;padding:8px;font-size:13px}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--color-ink-700);margin-bottom:var(--s5)}
.checkbox input{margin-top:4px;accent-color:var(--color-primary-600)}
.form-alt{margin-top:var(--s5);text-align:center;font-size:14px;color:var(--color-ink-500)}
.form-alt a{color:var(--color-primary-600);font-weight:600}
.form-alt a:hover{color:var(--color-primary-700)}
.divider{display:flex;align-items:center;gap:12px;color:var(--color-ink-400);font-size:13px;margin:var(--s5) 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--color-border)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--color-primary-600);border-radius:20px;padding:var(--s16);text-align:center;color:#fff}
.cta-band h2{font-size:clamp(26px,3.6vw,36px);font-weight:700;color:#fff}
.cta-band p{color:#F3E1E0;margin:var(--s4) auto var(--s8);max-width:34em;font-size:16px}
.cta-band .btn{background:#FFFDFA;color:var(--color-primary-700)}
.cta-band .btn:hover{background:#fff;box-shadow:var(--shadow-lg)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--color-border);padding:var(--s12) 0 var(--s8);background:var(--color-bg)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s8)}
.foot .brand{margin-bottom:var(--s4)}
.foot p,.foot a{color:var(--color-ink-500);font-size:14px}
.foot h4{font:600 13px/1 var(--font-sans);color:var(--color-ink-400);letter-spacing:.08em;margin-bottom:var(--s4)}
.foot .links a{display:block;padding:5px 0}
.foot .links a:hover{color:var(--color-primary-600)}
.disclaim{margin-top:var(--s8);padding:var(--s5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);font-size:13px;color:var(--color-ink-400);line-height:1.6}
.copy{margin-top:var(--s6);display:flex;justify-content:space-between;font-size:13px;color:var(--color-ink-400);flex-wrap:wrap;gap:8px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero .grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-4{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  section{padding:var(--s12) 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ============================================================
   业务组件层（v3：答题 / 结果 / 报告 / 支付 / 账户 / 对比 / 反馈）
   ============================================================ */
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:var(--s8)}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-sans);border-radius:999px;padding:6px 12px}
.pill.ok{background:var(--color-success-050);color:var(--color-success-600)}
.pill.warn{background:var(--color-accent-050);color:var(--color-accent-ink)}
.pill.info{background:var(--color-primary-050);color:var(--color-primary-700)}
.empty{padding:var(--s12);text-align:center;color:var(--color-ink-400)}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:10px;width:min(92vw,420px)}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--color-ink-900);color:#FFFDFA;border-radius:14px;
  padding:13px 16px;font-size:14px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:var(--color-error-600)}
.toast.ok{background:#3F7A5D}

/* ---------- Modal ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(51,38,42,.44);backdrop-filter:blur(2px);z-index:400;display:grid;place-items:center;padding:var(--s5)}
.modal{width:min(92vw,420px);background:var(--color-surface);border-radius:20px;padding:var(--s8);box-shadow:var(--shadow-2xl)}
.modal h3{font-family:var(--font-serif);font-size:20px;font-weight:700;margin-bottom:var(--s3)}
.modal p{color:var(--color-ink-500);font-size:14.5px;margin-bottom:var(--s6)}
.modal .row{display:flex;gap:var(--s3);justify-content:flex-end}

/* ---------- Quiz ---------- */
.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}
.quiz-head .meta{font-size:14px;color:var(--color-ink-400)}
.q-track{height:6px;border-radius:999px;background:var(--color-surface-muted);overflow:hidden;margin-bottom:var(--s8)}
.q-track>i{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary-600),var(--color-accent-600));transition:width .3s ease}
.q-card{max-width:640px;margin:0 auto;text-align:center}
.q-card .q-no{font-size:13px;color:var(--color-ink-400);letter-spacing:.08em}
.q-card h2{font-family:var(--font-serif);font-size:clamp(22px,3vw,28px);font-weight:650;line-height:1.35;margin:var(--s4) 0 var(--s8)}
.options{display:flex;flex-direction:column;gap:var(--s3)}
.option{display:flex;align-items:center;gap:12px;border:1px solid var(--color-border-strong);border-radius:14px;
  padding:15px 18px;background:var(--color-surface);cursor:pointer;font-size:15.5px;color:var(--color-ink-700);
  transition:border-color .15s,background .15s,transform .1s}
.option:hover{border-color:var(--color-primary-500);background:var(--color-primary-050)}
.option.picked{border-color:var(--color-primary-600);background:var(--color-primary-050);color:var(--color-primary-700);font-weight:600}
.option .k{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--color-border-strong);
  display:grid;place-items:center;font-size:13px;color:var(--color-ink-400)}
.option.picked .k{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}
.q-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s8)}
.q-foot .hint{font-size:13px;color:var(--color-ink-400)}
.q-foot .ops{display:flex;gap:var(--s3)}

/* ---------- Result (免费结果) ---------- */
.result-hero{text-align:center;margin-bottom:var(--s8)}
.result-hero h1{font-family:var(--font-serif);font-size:clamp(26px,3.6vw,36px);font-weight:700}
.result-hero .sign{margin-top:var(--s3);color:var(--color-accent-600);font-size:16px}
.dim-list{display:flex;flex-direction:column;gap:var(--s5)}
.dim-item{display:grid;grid-template-columns:200px 1fr 88px;gap:var(--s4);align-items:center}
.dim-item .nm{font-weight:600}
.dim-item .nm span{display:block;font-size:12px;color:var(--color-ink-400);font-weight:400}
.dim-item .bar{height:12px;border-radius:999px;background:var(--color-surface-muted);overflow:hidden;position:relative}
.dim-item .bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-primary-600),var(--color-accent-600))}
.dim-item .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-ink-500);font-size:14px}
.dim-item .num b{color:var(--color-ink-900);font-size:17px}
.locked-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.locked-card{position:relative;border:1px dashed var(--color-border-strong);border-radius:16px;padding:var(--s5);background:var(--color-surface-muted);overflow:hidden}
.locked-card h4{font-size:15px;font-weight:600;margin-bottom:6px}
.locked-card p{font-size:13.5px;color:var(--color-ink-500)}
.locked-card .blur{filter:blur(4px);opacity:.55;user-select:none}

/* ---------- Report ---------- */
.rep-wrap{max-width:860px;margin:0 auto}
.rep-sec{margin-bottom:var(--s10)}
.rep-sec>h3{font-family:var(--font-serif);font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:var(--s5)}
.rep-sec>h3 .n{flex:none;width:28px;height:28px;border-radius:999px;background:var(--color-primary-050);color:var(--color-primary-700);
  display:grid;place-items:center;font-size:13px;font-family:var(--font-sans);font-weight:700}
.rep-para{font-size:15.5px;color:var(--color-ink-700);line-height:1.85}
.rep-para+.rep-para{margin-top:var(--s4)}
.rep-list{display:flex;flex-direction:column;gap:var(--s3)}
.rep-list .it{display:flex;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:var(--s4) var(--s5);font-size:15px;color:var(--color-ink-700)}
.rep-list .it .dot{flex:none;width:8px;height:8px;border-radius:999px;margin-top:10px;background:var(--color-primary-600)}
.facet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.facet{border:1px solid var(--color-border);border-radius:14px;padding:var(--s4) var(--s5);background:var(--color-surface)}
.facet .top{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;font-weight:600}
.facet .top .v{font-variant-numeric:tabular-nums;color:var(--color-ink-400);font-weight:400;font-size:13px}
.facet .note{font-size:13px;color:var(--color-ink-500);margin-top:4px}
.rec-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.rec-cat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:var(--s5)}
.rec-cat h4{font-size:15px;font-weight:650;margin-bottom:var(--s3);display:flex;align-items:center;gap:8px}
.rec-cat ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.rec-cat li{font-size:14px;color:var(--color-ink-700);padding-left:18px;position:relative;line-height:1.7}
.rec-cat li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:999px;background:var(--color-accent-500)}
.rep-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin:var(--s6) 0 var(--s10)}
.rep-disclaim{border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px;padding:var(--s5);font-size:13px;color:var(--color-ink-500);line-height:1.7}
/* 报告夜间阅读模式 */
html.rep-dark{--color-bg:#241B1E;--color-surface:#2E2327;--color-surface-muted:#3A2D31;
  --color-ink-900:#F5EDE4;--color-ink-700:#D8C9BE;--color-ink-500:#B7A69B;--color-ink-400:#96837A;
  --color-border:#43343A;--color-border-strong:#5A454C;--color-primary-050:#3B2B31;--color-primary-700:#E8B9BE;--color-primary-600:#C98992;
  --color-accent-050:#3D3324;--color-accent-ink:#E2C896;--color-accent-600:#C79A55}
html.rep-dark .nav{background:rgba(36,27,30,.92)}
html.rep-dark .toast{background:#43343A}

/* ---------- Checkout ---------- */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s5) 0}
.pay-channel{display:flex;align-items:center;gap:14px;border:1px solid var(--color-border-strong);border-radius:16px;
  padding:var(--s5);background:var(--color-surface);cursor:pointer;transition:border-color .15s,background .15s}
.pay-channel:hover{border-color:var(--color-primary-500)}
.pay-channel.picked{border-color:var(--color-primary-600);background:var(--color-primary-050)}
.pay-channel .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.pay-channel .ic.ali{background:#1677FF}
.pay-channel .ic.wx{background:#07C160}
.pay-channel h4{font-size:15.5px;font-weight:600}
.pay-channel p{font-size:13px;color:var(--color-ink-400)}
.sum-row{display:flex;justify-content:space-between;font-size:14.5px;padding:10px 0;border-bottom:1px dashed var(--color-border)}
.sum-row:last-child{border-bottom:none}
.sum-row .v{font-variant-numeric:tabular-nums}
.sum-total{font-size:17px;font-weight:700}
.sum-total .v{color:var(--color-primary-600);font-size:22px}

/* ---------- Account / Home ---------- */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.kv{display:flex;justify-content:space-between;font-size:14.5px;padding:10px 0;border-bottom:1px dashed var(--color-border)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--color-ink-400)}
.danger-zone{border:1px solid #E5B8AE;background:var(--color-error-050);border-radius:16px;padding:var(--s6)}
.danger-zone h4{color:var(--color-error-600);font-size:15px;font-weight:650;margin-bottom:var(--s3)}
.danger-zone p{font-size:13.5px;color:var(--color-ink-700);margin-bottom:var(--s4)}
.simple-table{width:100%;border-collapse:collapse;font-size:14px}
.simple-table th{font-size:12px;color:var(--color-ink-400);text-align:left;font-weight:600;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--color-border)}
.simple-table td{padding:11px 10px;border-bottom:1px solid var(--color-border);color:var(--color-ink-700)}
.simple-table tr:last-child td{border-bottom:none}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------- Coupons ---------- */
.coupon-row{display:flex;gap:var(--s3);align-items:flex-start}
.coupon-row .input{flex:1}
.coupon-msg{font-size:13px;margin-top:8px}
.coupon-msg.ok{color:var(--color-success-600)}
.coupon-msg.err{color:var(--color-error-600)}
.coupon-list{display:flex;flex-direction:column;gap:var(--s3)}
.coupon-item{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  border:1px dashed var(--color-border-strong);border-radius:14px;padding:var(--s4) var(--s5);background:var(--color-surface)}
.coupon-item .cp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--color-ink-700)}
.coupon-item .cp-desc{font-size:13px;color:var(--color-ink-400);margin-top:2px}
.coupon-banner{border:1px solid var(--color-accent-100);background:var(--color-accent-050);border-radius:16px;
  padding:var(--s4) var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.coupon-banner b{color:var(--color-accent-ink)}
.coupon-banner .cp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--color-accent-ink)}
.disc-row{color:var(--color-success-600)}

/* ---------- Compare ---------- */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.cmp-col h4{font-size:15px;font-weight:650;margin-bottom:var(--s4);color:var(--color-ink-700)}
.cmp-row{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:10px;padding:8px 0;font-size:14px}
.cmp-row .nm{color:var(--color-ink-700)}
.cmp-row .bar{height:10px;border-radius:999px;background:var(--color-surface-muted);overflow:hidden}
.cmp-row .bar>i{display:block;height:100%;border-radius:999px;background:var(--color-primary-600)}
.cmp-row.b>i{background:var(--color-accent-600)}
.cmp-row .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-ink-500);font-size:13px}

/* ---------- Responsive (业务) ---------- */
@media (max-width:860px){
  .locked-grid{grid-template-columns:1fr}
  .facet-grid{grid-template-columns:1fr}
  .rec-cols{grid-template-columns:1fr}
  .acct-grid{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:1fr}
  .dim-item{grid-template-columns:120px 1fr 80px}
}
@media (max-width:640px){
  .pay-grid{grid-template-columns:1fr}
  .dim-item{grid-template-columns:1fr;gap:6px}
  .dim-item .num{text-align:left}
}