/* ============================================================
   文山数字 · 八星磁场
   ============================================================ */

:root{
  --bg:          #0A090D;
  --bg-soft:     #100E15;
  --surface:     #16131C;
  --surface-2:   #1D1926;
  --surface-3:   #251F30;

  --line:        rgba(232,211,160,.10);
  --line-mid:    rgba(232,211,160,.18);
  --line-strong: rgba(232,211,160,.32);

  --gold:        #C9A961;
  --gold-hi:     #E9D5A3;
  --gold-dim:    rgba(201,169,97,.55);

  --text:        #EFEAE2;
  --text-2:      #A79FB4;
  --text-3:      #6D6679;

  --c-tianyi:    #E2B45C;
  --c-shengqi:   #4FBF9F;
  --c-yannian:   #6A9EE8;
  --c-fuwei:     #9C90B8;
  --c-huohai:    #E0913F;
  --c-liusha:    #D46A88;
  --c-wugui:     #A274DC;
  --c-jueming:   #D9554E;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

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

  --tabh: 62px;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

[hidden]{ display:none !important; }

html{ background:#050407; }

body{
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

/* 桌面端：做成居中的“手机画布” */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(201,169,97,.10), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(120,90,200,.07), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.app{
  position:relative;
  z-index:1;
  width:100%;
  max-width:540px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(700px 420px at 50% -8%, rgba(201,169,97,.09), transparent 62%),
    var(--bg);
  padding-bottom: calc(var(--tabh) + 18px);
  overflow:hidden;
}

@media (min-width:640px){
  .app{
    box-shadow: 0 0 0 1px rgba(232,211,160,.07), 0 40px 120px rgba(0,0,0,.7);
  }
  body{ padding: 0; }
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding: 14px 18px 12px;
  background: linear-gradient(to bottom, rgba(10,9,13,.94), rgba(10,9,13,.55) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }

.brand-mark{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  font-family:var(--serif);
  font-size:19px; font-weight:600;
  color: var(--gold-hi);
  border:1px solid var(--line-strong);
  border-radius:9px;
  background: linear-gradient(160deg, rgba(201,169,97,.18), rgba(201,169,97,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-name{ font-family:var(--serif); font-size:16px; letter-spacing:.10em; color:var(--text); }
.brand-sub{ font-size:10px; letter-spacing:.24em; color:var(--text-3); }

.icon-btn{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background: rgba(255,255,255,.03);
  color: var(--text-2);
  cursor:pointer;
  transition:.2s;
}
.icon-btn:hover{ color:var(--gold-hi); border-color:var(--line-mid); }
.icon-btn.back{ margin-right:-2px; }

/* 右上角客服：一枚小胶囊，金只描边不铺底 */
.btn-svc{
  flex:none; height:36px; min-width:56px; padding:0 13px; text-align:center;
  border:1px solid rgba(201,169,97,.26); border-radius:18px;
  background:rgba(201,169,97,.06);
  color:var(--gold-hi);
  font:11.5px/1 var(--serif); letter-spacing:.16em;
  cursor:pointer; transition:.2s;
}
.btn-svc:hover{ border-color:rgba(201,169,97,.48); background:rgba(201,169,97,.12); }
.btn-svc:active{ transform:translateY(1px); }
.btn-svc:disabled{ opacity:.55; cursor:default; }

/* 客服提示：一句话、一个号、一句尾注；点哪儿都收 */
.svc-tip{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.98);
  z-index:130; width:min(76vw,290px);
  padding:22px 20px 17px; text-align:center;
  background:rgba(24,20,30,.97);
  border:1px solid rgba(201,169,97,.32); border-radius:14px;
  box-shadow:0 26px 64px rgba(0,0,0,.58);
  opacity:0; cursor:pointer;
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.9,.3,1);
}
.svc-tip.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.svc-tip p{ font-size:12.5px; line-height:1.9; letter-spacing:.04em; color:var(--text-2); }
.svc-tip b{
  display:block; margin:11px 0 9px;
  font-family:var(--serif); font-size:23px; font-weight:400;
  letter-spacing:.10em; color:var(--gold-hi);
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
.svc-tip i{ display:block; font-style:normal; font-size:10.5px; letter-spacing:.08em; color:var(--text-3); }

/* ---------------- 视图切换 ---------------- */
main{ display:block; }

.view{
  display:none;
  padding: 0 18px;
  animation: viewIn .34s cubic-bezier(.22,.9,.3,1);
}
.view.is-active{ display:block; }

@keyframes viewIn{
  from{ opacity:0; transform: translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* ---------------- 首页 hero ---------------- */
.hero{
  position:relative;
  padding: 26px 4px 26px;
  overflow:visible;
}

.hero-glow{
  position:absolute; left:50%; top:-40px;
  width:420px; height:320px; transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(201,169,97,.14), transparent 70%);
  pointer-events:none;
  filter: blur(6px);
}

.astro{
  position:absolute; right:-40px; top:0;
  width:240px; height:240px;
  opacity:.5; pointer-events:none;
}
.astro-ring{
  position:absolute; inset:0; margin:auto;
  border-radius:50%;
  border:1px solid rgba(201,169,97,.16);
}
.astro-ring.r1{ width:230px; height:230px; }
.astro-ring.r2{ width:160px; height:160px; border-style:dashed; border-color:rgba(201,169,97,.14); }
.astro-ring.r3{ width:90px;  height:90px;  border-color:rgba(201,169,97,.20); }
.astro-dot{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background: var(--gold); box-shadow:0 0 8px rgba(201,169,97,.8);
}
.d1{ left:8px;  top:96px;  }
.d2{ right:22px; top:52px; width:3px; height:3px; opacity:.7;}
.d3{ left:70px; bottom:26px; width:4px; height:4px; opacity:.6;}
.d4{ right:56px; bottom:60px; width:3px; height:3px; opacity:.5;}

.eyebrow{
  position:relative;
  font-size:11px; letter-spacing:.34em;
  color: var(--gold-dim);
  margin-bottom:14px;
  padding-left:2px;
}

.hero h1{
  position:relative;
  font-family:var(--serif);
  font-size: 38px;
  line-height:1.22;
  font-weight:600;
  letter-spacing:.02em;
  color: var(--text);
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(100deg,#F4E4B8 0%, #C9A961 46%, #97753A 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.lead{
  position:relative;
  margin-top:14px;
  font-size:13.5px;
  line-height:1.9;
  color: var(--text-2);
}

/* ---------------- 卡片 ---------------- */
.card{
  position:relative;
  background: linear-gradient(180deg, rgba(29,25,38,.92), rgba(22,19,28,.86));
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding:16px;
  box-shadow: 0 20px 46px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
}

.input-card{
  margin-top:4px;
  backdrop-filter: blur(10px);
}

/* 分段控件 */
.seg{
  display:flex; gap:4px;
  padding:4px;
  background: rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.045);
  border-radius: 4px;
}
.seg-item{
  flex:1;
  padding:8px 4px;
  font-size:12.5px;
  font-family:var(--sans);
  color: var(--text-3);
  background:transparent;
  border:0; border-radius:3px;
  cursor:pointer;
  transition:.22s;
  white-space:nowrap;
}
.seg-item.is-on{
  color:#0F0D13;
  font-weight:600;
  background: linear-gradient(160deg,#EFDBA9,#C9A961);
  box-shadow: 0 4px 14px -4px rgba(201,169,97,.6);
}
/* 六个类目同行：字号略收，窄屏再收一档（只作用在顶部这一排，别动磁场链列表） */
.seg > .seg-item{ font-size:12px; padding:8px 2px; }
@media (max-width:360px){ .seg > .seg-item{ font-size:11px; } }

/* 输入框 */
.field{
  position:relative;
  margin-top:16px;
  display:flex; align-items:center;
  border-bottom:1px solid var(--line-mid);
  transition: border-color .25s;
}
.field:focus-within{ border-color: var(--gold); }

.field input{
  flex:1;
  width:100%;
  padding: 10px 30px 12px 2px;
  background:transparent;
  border:0; outline:none;
  color: var(--text);
  font-size: 21px;
  letter-spacing:.08em;
  font-variant-numeric: tabular-nums;
  font-family: var(--sans);
  caret-color: var(--gold);
}
.field input::placeholder{
  color: var(--text-3);
  font-size:16px;
  letter-spacing:.02em;
}

.clear-btn{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%;
  background: rgba(255,255,255,.10);
  border:0; color: var(--text-2);
  cursor:pointer;
}

.input-hint{
  margin-top:10px;
  font-size:11.5px;
  color: var(--text-3);
  letter-spacing:.02em;
  min-height:16px;
}
.input-hint.warn{ color:#E0913F; }

/* 主按钮 */
.btn-primary{
  margin-top:16px;
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px;
  border:1px solid transparent; border-radius: 14px;
  font-family:var(--sans);
  font-size:15px; font-weight:600;
  letter-spacing:.14em;
  color:#151017;
  background: linear-gradient(160deg,#F2E0B4 0%, #D3B26C 40%, #B08F49 100%);
  box-shadow: 0 12px 28px -12px rgba(201,169,97,.65), inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;
  transition: transform .18s, box-shadow .18s, filter .2s;
}
.btn-primary:active{ transform: scale(.985); }
.btn-primary:disabled{
  color: rgba(233,213,163,.42);
  background: rgba(201,169,97,.07);
  border:1px solid var(--line-mid);
  box-shadow:none;
  cursor:not-allowed;
}
.btn-primary svg{ transition: transform .2s; }
.btn-primary:not(:disabled):hover svg{ transform: translateX(3px); }

/* 示例 chip */
.samples{
  margin-top:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.samples-label{
  font-size:11px; letter-spacing:.16em; color:var(--text-3);
}
.chip{
  padding:5px 11px;
  font-size:11.5px;
  font-family:var(--sans);
  color: var(--text-2);
  background: rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:.2s;
  font-variant-numeric: tabular-nums;
}
.chip:hover{ color:var(--gold-hi); border-color:var(--line-mid); background:rgba(201,169,97,.07); }

/* ---------------- 快捷入口 ---------------- */
.quick-grid{
  margin-top:22px;
  display:grid; gap:10px;
}

.quick{
  display:grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap:12px;
  align-items:center;
  padding: 14px 16px;
  text-align:left;
  background: rgba(255,255,255,.022);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  cursor:pointer;
  transition:.22s;
}
.quick:hover{
  background: rgba(201,169,97,.055);
  border-color: var(--line-mid);
  transform: translateY(-1px);
}
.quick-ico{
  grid-row: 1 / span 2;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  color: var(--gold);
  background: rgba(201,169,97,.09);
  border:1px solid rgba(201,169,97,.16);
}
.quick-t{
  font-family:var(--serif);
  font-size:15px; letter-spacing:.10em;
}
.quick-d{
  font-size:11.5px; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.foot-note{
  margin: 26px 0 8px;
  text-align:center;
  font-size:11px;
  color: var(--text-3);
  letter-spacing:.06em;
}

/* ---------------- 通用页头 ---------------- */
.page-head{ padding: 18px 2px 16px; }
.page-head h2{
  font-family:var(--serif);
  font-size:26px; font-weight:600;
  letter-spacing:.06em;
}
.page-head p{
  margin-top:6px;
  font-size:12.5px; color:var(--text-2);
}

/* ============================================================
   结果页
   ============================================================ */
.result-top{
  padding: 8px 2px 0;
}
.result-label{
  font-size:10.5px; letter-spacing:.30em; color:var(--gold-dim);
}
/* 号码是这页的正题，字却一直用系统无衬线粗体，跟全站衬线气质脱节。
   改衬线、降字重，靠字号与留白立起来；字距收到 .04em，
   tabular-nums 保住逐位对齐，换行时不至于忽宽忽窄。 */
.result-num{
  margin-top:8px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing:.04em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  line-height:1.32;
}
.result-meta{
  margin-top:8px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.tag{
  font-size:10.5px;
  padding:3px 9px;
  border-radius:3px;
  letter-spacing:.08em;
  color:var(--text-2);
  background: rgba(255,255,255,.045);
  border:1px solid var(--line);
  letter-spacing:.04em;
}

/* ---------------- 规则说明 ---------------- */
.rule-list{ display:flex; flex-direction:column; gap:13px; margin-top:14px; }
.rule-row{ display:flex; gap:12px; align-items:flex-start; }
.rule-k{
  flex:none; width:92px;
  font-size:12px; line-height:1.72;
  color:var(--gold-dim);
  letter-spacing:.02em;
}
.rule-v{
  flex:1; min-width:0;
  font-size:12.5px; line-height:1.76;
  color:var(--text-2);
}
.rule-v b{ color:var(--text); font-weight:600; }
.rule-note{
  margin:16px 0 0; padding:12px 14px;
  border-radius:10px;
  background: rgba(201,169,97,.06);
  border:1px solid rgba(201,169,97,.16);
  font-size:12px; line-height:1.76;
  color:var(--text-2);
}
.rule-note b{ color:var(--gold-hi); font-weight:600; }

/* ---------------- 评分卡 ---------------- */
.score-card{
  margin-top:16px;
  padding:18px 18px 16px;
  border-color: rgba(232,211,160,.16);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gc) 12%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(29,25,38,.94), rgba(22,19,28,.88));
}
.sc-head{ display:flex; align-items:center; gap:16px; }
.sc-num{
  flex:none;
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--serif);
  line-height:1;
}
.sc-num b{
  font-size:42px; font-weight:600;
  color:var(--gc);
  letter-spacing:-.02em;
  text-shadow: 0 0 28px color-mix(in srgb, var(--gc) 42%, transparent);
}
.sc-num small{ font-size:12px; color:var(--text-3); letter-spacing:.04em; margin-left:2px; }
.sc-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.sc-grade{
  font-family:var(--serif);
  font-size:16px; letter-spacing:.06em;
  color:var(--text);
}
.sc-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.sc-tag{
  font-size:10.5px; letter-spacing:.05em;
  padding:3px 8px; border-radius:5px;
  border:1px solid var(--line);
  color:var(--text-2);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.sc-tag.ok{ color:#8FD8C0; border-color:rgba(79,191,159,.34); background:rgba(79,191,159,.10); }
.sc-tag.warn{ color:#EBBE76; border-color:rgba(224,145,63,.36); background:rgba(224,145,63,.11); }
.sc-tag.mute{ color:var(--text-3); }

.sc-line{
  margin:13px 0 0;
  font-size:12.5px; line-height:1.72;
  color:var(--text-2);
}

.sc-items{ margin-top:15px; display:flex; flex-direction:column; gap:9px; }
.sc-row{ display:flex; align-items:center; gap:9px; }
/* 评分行的名目。切勿再用 .sc-name——那个类属于八大磁场卡（21px 衬线），
   两边同名会把 80px 的行名撑成 21px，溢出压住进度条。 */
.sc-it{
  flex:none; width:80px; white-space:nowrap;
  font-size:11.5px; color:var(--text-2);
  letter-spacing:0;
  line-height:1.4;
}
.sc-bar{
  flex:1; height:6px; border-radius:999px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.32);
  overflow:hidden;
}
.sc-bar i{
  display:block; height:100%;
  width: var(--w, 0%);
  border-radius:999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 62%, transparent), var(--gc));
  animation: scGrow .62s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes scGrow{ from{ width:0; } to{ width: var(--w, 0%); } }
.sc-val{
  flex:none; width:52px;
  display:flex; align-items:baseline; justify-content:flex-end; gap:2px;
  font-size:12px; color:var(--text);
  font-variant-numeric: tabular-nums;
}
.sc-val small{ font-size:10px; color:var(--text-3); }

.sc-foot{
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--line);
  font-size:11px; line-height:1.7;
  color:var(--text-3);
}
.sc-foot b{ color:var(--text-2); font-weight:500; }

/* 环形占比 */
.ring-card{
  margin-top:16px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:20px 18px 18px;
}
.ring{
  position:relative;
  width:120px; height:120px; flex:none;
  border-radius:50%;
  background: conic-gradient(#252030 0deg 360deg);
  transition: background .6s ease;
}
.ring::after{
  content:"";
  position:absolute; inset:14px;
  border-radius:50%;
  background: #14111B;
  box-shadow: inset 0 0 0 1px rgba(232,211,160,.08);
}
.ring-center{
  position:absolute; inset:0;
  display:grid; place-content:center; text-align:center;
  z-index:2;
}
.ring-center b{
  display:block;
  font-size:24px; font-weight:600;
  font-family:var(--serif);
  color:var(--gold-hi);
  line-height:1.1;
}
.ring-center span{ font-size:10px; letter-spacing:.14em; color:var(--text-3); }

.ring-legend{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:7px 7px;
  width:100%;
}
.rl-item{
  display:flex; align-items:center; gap:6px;
  padding:4px 10px;
  font-size:11.5px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--text-2);
  min-width:0;
  line-height:1.5;
}
.rl-dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.rl-name{ letter-spacing:.06em; }
.rl-num{ color:var(--text-3); font-variant-numeric:tabular-nums; font-size:10.5px; }

/* 磁场链 */
.section{
  margin-top:26px;
}
.sec-head{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:12px;
  padding-left:2px;
}
.sec-title{
  font-family:var(--serif);
  font-size:15px; letter-spacing:.12em;
  color:var(--text);
}
.sec-note{
  font-size:11px; color:var(--text-3); letter-spacing:.04em;
}
.sec-line{
  flex:1; height:1px;
  background: linear-gradient(to right, var(--line-mid), transparent);
}

.chain{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px;
}

.pill{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  min-width:46px;
  padding:8px 7px 7px;
  border-radius:11px;
  background: var(--pc-bg);
  border:1px solid var(--pc-line);
  cursor:pointer;
  transition: transform .18s, box-shadow .2s, filter .2s;
  animation: pillIn .42s cubic-bezier(.2,.9,.3,1) backwards;
}
.pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px var(--pc-glow);
  filter: brightness(1.08);
}
.pill-d{
  font-size:16px; font-weight:600;
  letter-spacing:.06em;
  color: var(--pc-fg);
  font-variant-numeric: tabular-nums;
  line-height:1.2;
}
.pill-s{
  margin-top:2px;
  font-size:10px;
  letter-spacing:.06em;
  color: var(--pc-fg);
  opacity:.78;
  white-space:nowrap;
}
.pill .jia{
  position:absolute; top:-5px; right:-4px;
  font-size:8.5px;
  padding:0 4px;
  line-height:13px;
  border-radius:5px;
  background: #2A2434;
  color: var(--gold-hi);
  border:1px solid rgba(232,211,160,.28);
  letter-spacing:.02em;
}
.pill .lvl{
  position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  font-size:8px; letter-spacing:.06em;
  padding:0 5px; line-height:12px;
  border-radius:5px;
  background:#14111B;
  border:1px solid rgba(255,255,255,.10);
  color: var(--text-3);
}

@keyframes pillIn{
  from{ opacity:0; transform: translateY(8px) scale(.94); }
  to  { opacity:1; transform:none; }
}

/* 统计条 */
.stat-list{ display:grid; gap:9px; }
.stat-row{
  display:grid;
  grid-template-columns: 52px 1fr 30px;
  align-items:center;
  gap:10px;
}
.stat-name{
  font-size:12.5px;
  font-family:var(--serif);
  letter-spacing:.10em;
  color: var(--sc);
}
.stat-bar{
  display:block;
  height:7px; border-radius:99px;
  background: rgba(255,255,255,.05);
  overflow:hidden;
}
.stat-fill{
  display:block;
  height:100%;
  border-radius:99px;
  background: var(--sc);
  width: var(--w, 0%);
  animation: barGrow .8s cubic-bezier(.2,.9,.3,1) both;
  box-shadow: 0 0 12px -2px var(--sc);
}

@keyframes barGrow{
  from{ width:0; }
  to  { width: var(--w, 0%); }
}
.stat-n{
  text-align:right;
  font-size:12px;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.stat-n small{
  font-size:9px;
  color:var(--text-3);
  margin-left:2px;
  letter-spacing:0;
}

/* 制化 */
.zh-list{ display:grid; gap:9px; }
.zh-row{
  padding:12px 14px;
  background: rgba(255,255,255,.022);
  border:1px solid var(--line);
  border-left:2px solid var(--sc);
  border-radius:12px;
}
.zh-hd{ display:flex; align-items:center; gap:10px; }
.zh-name{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.10em;
  color: var(--sc);
}
.zh-dots{ display:flex; gap:3px; flex:1; }
.zh-dots i{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--sc);
  opacity:.55;
}
.zh-dots i.on{
  background: var(--sc);
  opacity:1;
  box-shadow: 0 0 8px -1px var(--sc);
}
.zh-tag{
  font-size:10px;
  letter-spacing:.06em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.zh-tag.ok{ color: var(--sc); background: rgba(255,255,255,.04); border-color: var(--line-mid); }
.zh-tag.warn{ color: var(--gold-hi); background: rgba(201,169,97,.10); border-color: rgba(201,169,97,.3); }
.zh-rule{
  margin-top:7px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--text-3);
}
.zh-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.7;
  color:var(--text-3);
}

/* 级别表 */
.lv-box{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.lv-row{
  display:grid;
  grid-template-columns: 46px 1fr 38px;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border-top:1px solid var(--line);
  font-size:12.5px;
}
.lv-row:first-child{ border-top:0; }
.lv-tag{ color: var(--gold-dim); letter-spacing:.10em; font-size:11px; }
.lv-pairs{ color: var(--text); letter-spacing:.14em; font-variant-numeric:tabular-nums; }
.lv-w{ text-align:right; color: var(--text-3); font-size:11px; }

/* 报告块 */
.report{ display:grid; gap:10px; }
.rep{
  padding:14px 15px;
  background: rgba(255,255,255,.022);
  border:1px solid var(--line);
  border-left:2px solid var(--gold-dim);
  border-radius: 12px;
}
.rep-t{
  font-size:11px; letter-spacing:.18em;
  color: var(--gold-dim);
  margin-bottom:7px;
}
.rep-c{ font-size:13px; line-height:1.85; color:var(--text-2); }
.rep-c b{ color: var(--text); font-weight:600; }
.rep-c .hl{ color: var(--gold-hi); }

/* 逐段列表（限定在 .seg-list 内，避免和输入卡的分段控件撞类名） */
.seg-list{ display:grid; gap:8px; }
.seg-list .seg-item{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  background: rgba(255,255,255,.022);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  transition:.2s;
}
.seg-list .seg-item:hover{ background: rgba(201,169,97,.05); border-color:var(--line-mid); }
.seg-digits{
  font-size:15px; font-weight:600;
  letter-spacing:.05em;
  color: var(--sc);
  font-variant-numeric:tabular-nums;
}
.seg-star{
  font-size:13px;
  color:var(--text);
  font-family:var(--serif);
  letter-spacing:.08em;
}
.seg-star small{
  font-family:var(--sans);
  font-size:10px;
  color:var(--text-3);
  letter-spacing:.04em;
  margin-left:6px;
}
.seg-arrow{ color:var(--text-3); }

/* ============================================================
   八大磁场
   ============================================================ */
.star-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-rows: 1fr;
  gap:10px;
}
.star-card{
  position:relative;
  text-align:left;
  padding:16px 14px;
  border-radius: var(--r-md);
  background:
    linear-gradient(160deg, var(--sc-a1), transparent 72%),
    rgba(255,255,255,.02);
  border:1px solid var(--sc-a2);
  color:var(--text);
  cursor:pointer;
  overflow:hidden;
  transition:.24s;
  min-height:104px;
  display:flex; flex-direction:column;
}
.star-card:hover{ transform:translateY(-2px); border-color: var(--sc-a3); }
.star-card::after{
  content:"";
  position:absolute; right:-18px; bottom:-26px;
  width:76px; height:76px; border-radius:50%;
  background: radial-gradient(closest-side, var(--sc-a2), transparent);
  opacity:.55;
}
.sc-name{
  font-family:var(--serif);
  font-size:21px; font-weight:600;
  letter-spacing:.14em;
  color: var(--sc);
}
.sc-pairs{
  margin-top:8px;
  font-size:10.5px;
  color:var(--text-2);
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  line-height:1.6;
  word-break:break-all;
}
.sc-badge{
  margin-top:auto;
  align-self:flex-start;
  font-size:10px;
  padding:2px 7px;
  border-radius:5px;
  letter-spacing:.08em;
  color: var(--sc);
  background: var(--sc-a1);
  border:1px solid var(--sc-a2);
}

.star-legend{
  margin-top:14px;
  display:flex; align-items:center; gap:14px;
  font-size:11px; color:var(--text-3);
  padding-left:2px;
}
.sl{ display:flex; align-items:center; gap:6px; }
.sl i{ width:14px; height:2px; border-radius:2px; display:block; }
.sl .ji i{ background: var(--c-tianyi); }
.sl .xiong i{ background: var(--c-jueming); }

.page-foot{
  margin-top:18px;
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.9;
  padding:0 2px;
}

/* ============================================================
   组合矩阵
   ============================================================ */
.matrix-wrap{
  background: rgba(255,255,255,.018);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  padding:12px 10px 10px;
  overflow-x:auto;
}
.matrix{
  display:grid;
  grid-template-columns: 26px repeat(8, minmax(0,1fr));
  gap:5px;
  min-width:300px;
}
.mx-corner{ }
.mx-head{
  font-family:var(--serif);
  font-size:11.5px;
  letter-spacing:.02em;
  text-align:center;
  color: var(--sc);
  padding-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
}
.mx-head.row{
  writing-mode: vertical-rl;
  text-orientation: upright;
  justify-self:center;
  padding:6px 0 0;
  letter-spacing:.08em;
  font-size:11px;
}
.mx-cell{
  aspect-ratio: 1;
  min-height:34px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1px;
  border-radius:7px;
  font-size:9px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.18s;
  color: var(--text-3);
  background: rgba(255,255,255,.03);
  padding:0;
  line-height:1.15;
  overflow:hidden;
}
.mx-cell span{ display:block; white-space:nowrap; }
  text-align:center;
  line-height:1.1;
  overflow:hidden;
}
.mx-cell.ok{
  color: var(--mc);
  background: var(--mc-bg);
  border-color: var(--mc-line);
}
.mx-cell.ok:hover{
  transform: scale(1.08);
  background: var(--mc-bg2);
  border-color: var(--mc);
}
.mx-cell.no{
  color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.012);
  cursor:not-allowed;
  font-size:12px;
}

.matrix-legend{
  margin-top:12px;
  display:flex; gap:16px;
  font-size:10.5px; color:var(--text-3);
  padding-left:2px;
}
.lg{ display:flex; align-items:center; gap:6px; }
.lg-dot{ width:8px; height:8px; border-radius:2px; display:block; }
.lg-dot.ok{ background: rgba(201,169,97,.7); }
.lg-dot.no{ background: rgba(255,255,255,.10); }

/* ============================================================
   改运文章
   ============================================================ */
.article{
  border:1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  margin-bottom:10px;
  overflow:hidden;
}
.article-head{
  width:100%;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  background:transparent;
  border:0; color:var(--text);
  text-align:left;
  cursor:pointer;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.08em;
}
.article-title{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.article-prev{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0;
  color:var(--text-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.article-idx{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gold-dim);
  border:1px solid var(--line-mid);
  border-radius:5px;
  padding:1px 6px;
}
.article-head .chev{
  margin-left:auto;
  color:var(--text-3);
  font-size:11px;
  opacity:.8;
  transition:.25s;
}
.article.open .chev{ transform: rotate(180deg); }
.article-body{
  display:none;
  padding: 0 16px 4px;
}
.article.open .article-body{ display:block; }
.article-body .rt{
  font-size:13.5px;
  line-height:1.95;
  color:var(--text-2);
  padding-bottom:18px;
}
.article-body .rt p{ margin-bottom:9px; }
.article-body .rt p:last-child{ margin-bottom:0; }
.article-body .rt .rt-h{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--gold-hi);
  margin:18px 0 8px;
  padding-left:10px;
  border-left:2px solid var(--gold-dim);
  line-height:1.7;
}
.article-body .rt .rt-h:first-child{ margin-top:4px; }
.article-body .rt .rt-h2{
  color:var(--text);
  font-weight:600;
  font-size:13.5px;
  margin:13px 0 5px;
}

/* ============================================================
   详情页
   ============================================================ */
.detail-hero{
  padding: 10px 2px 20px;
}
.dh-star{
  font-family:var(--serif);
  font-size:40px;
  font-weight:600;
  letter-spacing:.16em;
  color: var(--sc);
  line-height:1.15;
}
.dh-meta{
  margin-top:10px;
  display:flex; gap:8px; flex-wrap:wrap;
}

.dh-core{
  margin-top:16px;
  padding:16px 17px;
  border-radius:var(--r-md);
  background: linear-gradient(160deg, var(--sc-a1), rgba(255,255,255,.015));
  border:1px solid var(--sc-a2);
  font-size:13px;
  line-height:2;
  color:var(--text-2);
  white-space:pre-line;
}

.acc{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background: rgba(255,255,255,.017);
  overflow:hidden;
}
.acc-head{
  width:100%;
  display:flex; align-items:center;
  padding:13px 15px;
  background:transparent; border:0;
  color:var(--text); cursor:pointer;
  font-size:13px;
  letter-spacing:.10em;
  text-align:left;
}
.acc-head .dot{
  width:5px; height:5px; border-radius:50%;
  background: var(--sc); margin-right:9px; opacity:.8;
}
.acc-head .chev{ margin-left:auto; color:var(--text-3); transition:.25s; font-size:11px; opacity:.8; }
.acc.open .chev{ transform:rotate(180deg); }
.acc-body{
  display:none;
  padding: 0 15px 15px;
  font-size:13px;
  line-height:1.95;
  color:var(--text-2);
  white-space:pre-line;
}
.acc.open .acc-body{ display:block; }

/* ============================================================
   底部抽屉
   ============================================================ */
.sheet-mask{
  position:fixed; inset:0; z-index:80;
  background: rgba(4,3,7,.72);
  backdrop-filter: blur(3px);
  opacity:0; pointer-events:none;
  transition: opacity .28s;
}
.sheet-mask.on{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; z-index:90;
  left:50%; bottom:0;
  transform: translate(-50%, 101%);
  width:100%; max-width:540px;
  max-height: 86vh; max-height:86dvh;
  background: linear-gradient(180deg,#191520,#0F0D14);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-top:1px solid var(--line-mid);
  box-shadow: 0 -30px 70px -20px rgba(0,0,0,.9);
  transition: transform .34s cubic-bezier(.22,.9,.3,1);
  overflow:hidden;
}
.sheet.on{ transform: translate(-50%, 0); }

.sheet-inner{
  max-height: 86vh; max-height:86dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding: 8px 20px calc(26px + env(safe-area-inset-bottom));
}
.sheet-grip{
  width:38px; height:4px; border-radius:99px;
  background: rgba(255,255,255,.16);
  margin: 6px auto 14px;
}
.sheet h3{
  font-family:var(--serif);
  font-size:22px; font-weight:600;
  letter-spacing:.10em;
  color: var(--sc, var(--text));
}
.sheet .sub{
  margin-top:5px; font-size:11.5px; color:var(--text-3);
  letter-spacing:.06em;
}
.sheet p{
  font-size:13px; line-height:1.95; color:var(--text-2);
}

/* ============================================================
   底部 Tab
   ============================================================ */
.tabbar{
  position:fixed; z-index:60;
  left:50%; transform:translateX(-50%);
  bottom:0;
  width:100%; max-width:540px;
  height: calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display:grid; grid-template-columns: repeat(6,1fr);
  background: rgba(12,10,16,.86);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top:1px solid var(--line);
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:0; background:transparent;
  color: var(--text-3);
  font-size:10px;
  font-family:var(--sans);
  letter-spacing:.10em;
  text-decoration:none;
  cursor:pointer;
  transition:.22s;
  position:relative;
}
.tab.is-on{ color: var(--gold-hi); }
.tab.is-on::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2px; border-radius:0 0 3px 3px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* 滚动条 */
.sheet-inner::-webkit-scrollbar{ width:0; }
.matrix-wrap::-webkit-scrollbar{ height:0; }

/* ============================================================
   付费分层
   ============================================================ */

#view-result{ padding-bottom:76px; }

.ent-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  font-size:10px;
  letter-spacing:.1em;
  border-radius:3px;
  vertical-align:1px;
  font-family:var(--sans);
  font-weight:400;
}
.ent-badge.free{
  color:var(--text-3);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.ent-badge.vip{
  color:#12100A;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  box-shadow:0 2px 10px -3px rgba(201,169,97,.6);
}

/* ---- 锁定块 ---- */
.lock-box{
  padding:16px;
  border-radius:var(--r-md);
  background:linear-gradient(160deg, rgba(201,169,97,.06), rgba(255,255,255,.015));
  border:1px dashed var(--line-mid);
}
.lock-lead{
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-2);
}
.lock-lead b{ color:var(--gold-hi); font-weight:500; }
.lock-label{
  margin-top:8px;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--text-3);
}
.lock-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:10px 0 2px;
}
.lock-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  color:var(--sc);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.lock-chip b{
  font-weight:400;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.lock-skel{ display:grid; gap:7px; margin:13px 0 14px; }
.lock-skel i{
  display:block;
  height:8px;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.lock-skel i:nth-child(2){ width:82%; }
.lock-skel i:nth-child(3){ width:64%; }
.lock-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px;
  border-radius:12px;
  border:1px solid rgba(201,169,97,.34);
  background:rgba(201,169,97,.10);
  color:var(--gold-hi);
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:.2s;
}
.lock-btn:active{ transform:scale(.985); background:rgba(201,169,97,.18); }
/* 三号包名额：比主按钮轻一档，只做描边，别和「解锁」抢眼 */
.lock-btn.lock-alt{
  margin-top:8px;
  border-style:dashed;
  border-color:rgba(201,169,97,.26);
  background:transparent;
  color:var(--gold-dim);
  font-size:12px;
  letter-spacing:.04em;
}
.lock-btn.lock-alt:active{ background:rgba(201,169,97,.10); }

/* ---- 列表内锁定项 ---- */
.seg-item.locked{ opacity:.52; }
.seg-item.locked .seg-arrow{
  display:flex; align-items:center;
  color:var(--gold-dim);
  opacity:.95;
}

/* ---- 底部解锁条 ---- */
.pay-bar{
  position:fixed;
  z-index:55;
  left:50%;
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 10px);
  width:calc(100% - 28px);
  max-width:512px;
  display:flex; align-items:center; gap:12px;
  padding:11px 12px 11px 16px;
  border-radius:16px;
  background:rgba(24,20,30,.94);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(201,169,97,.28);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(201,169,97,.05);
  transform:translate(-50%,0);
  animation:paybarIn .35s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes paybarIn{
  from{ opacity:0; transform:translate(-50%,14px); }
  to{ opacity:1; transform:translate(-50%,0); }
}
.pb-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pb-txt b{
  font-size:13.5px; font-weight:500; color:var(--gold-hi);
  letter-spacing:.04em;
}
.pb-txt span{ font-size:10.5px; color:var(--text-3); letter-spacing:.04em; }
.pb-btn{
  flex:none;
  padding:9px 16px;
  border-radius:11px;
  border:0;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  color:#12100A;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 4px 14px -5px rgba(201,169,97,.7);
}
.pb-btn:active{ transform:scale(.97); }

/* ---- 解锁抽屉 ---- */
.pay-wrap h3{ font-size:20px; }
.pay-hero{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
}
.ph-t{
  font-size:12px;
  color:var(--text-2);
  letter-spacing:.04em;
  margin-bottom:10px;
  line-height:1.6;
}
.ph-l{ display:flex; flex-wrap:wrap; gap:5px; }
.ph-l span{
  font-size:10.5px;
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:.02em;
}
.ph-l .on{
  color:var(--gold-hi);
  background:rgba(201,169,97,.12);
  border:1px solid rgba(201,169,97,.24);
}
.ph-l .off{
  color:var(--text-3);
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.22);
}

.plan-list{ display:grid; gap:10px; margin-top:16px; }
.plan{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  padding:15px 15px 13px;
  border-radius:15px;
  border:1px solid var(--line-mid);
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  color:var(--text);
  font-family:var(--sans);
  cursor:pointer;
  transition:.22s;
}
.plan:hover{ border-color:rgba(201,169,97,.4); }
.plan.is-on{
  border-color:rgba(201,169,97,.55);
  background:linear-gradient(160deg, rgba(201,169,97,.12), rgba(201,169,97,.03));
}
.plan.is-paying{ opacity:.72; }
.plan-tag{
  position:absolute;
  top:0; right:14px;
  transform:translateY(-50%);
  padding:2px 9px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.08em;
  color:#12100A;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  box-shadow:0 3px 10px -3px rgba(201,169,97,.7);
}
.plan-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.plan-name{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.08em;
  color:var(--gold-hi);
}
.plan-price{
  font-size:20px;
  font-weight:500;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.plan-price i{ font-style:normal; font-size:12px; margin-right:1px; color:var(--gold-dim); }
.plan-price em{
  font-style:normal; font-size:10.5px;
  color:var(--text-3); margin-left:4px; font-weight:400;
}
.plan-desc{
  display:block;
  margin-top:3px;
  font-size:11.5px;
  color:var(--text-3);
}
.plan-perks{
  display:flex; flex-wrap:wrap; gap:5px 12px;
  margin-top:10px;
}
.perk{
  font-size:11px;
  color:var(--text-2);
  position:relative;
  padding-left:11px;
}
.perk::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--gold-dim);
}
.plan-cta{
  display:block;
  margin-top:12px;
  padding:9px;
  text-align:center;
  border-radius:10px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--gold-hi);
  background:rgba(201,169,97,.12);
  border:1px solid rgba(201,169,97,.26);
}
.plan.is-on .plan-cta{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  color:#12100A;
  border-color:transparent;
}
.pay-note{
  margin-top:14px;
  font-size:10.5px;
  line-height:1.7;
  text-align:center;
  color:var(--text-3);
}
.pay-reset{
  display:block;
  width:100%;
  margin-top:10px;
  padding:8px;
  border:0; background:transparent;
  color:var(--text-3);
  font-family:var(--sans);
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* ---- 长图入口与预览 ---- */
.poster-cta{ margin:6px 0 14px; }
.btn-ghost{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px;
  border-radius:13px;
  border:1px solid var(--line-mid);
  background:rgba(255,255,255,.025);
  color:var(--text-2);
  font-family:var(--sans);
  font-size:13.5px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:.2s;
}
.btn-ghost:hover{ border-color:rgba(201,169,97,.4); color:var(--gold-hi); }
.btn-ghost:active{ transform:scale(.99); }

.poster-wrap h3{ font-size:20px; }
.poster-prev{
  margin-top:14px;
  max-height:56vh;
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background:#07060A;
  -webkit-overflow-scrolling:touch;
}
.poster-prev::-webkit-scrollbar{ width:0; }
.poster-prev img{ display:block; width:100%; }
.poster-tip{
  margin-top:10px;
  font-size:11px;
  line-height:1.7;
  color:var(--text-3);
  text-align:center;
}
.poster-dl{ margin-top:12px; text-decoration:none; appearance:none; -webkit-appearance:none; }

/* ---- 轻提示 ---- */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--tabh) + 92px);
  transform:translate(-50%,10px);
  z-index:120;
  padding:10px 18px;
  border-radius:12px;
  background:rgba(32,27,40,.96);
  border:1px solid rgba(201,169,97,.3);
  color:var(--gold-hi);
  font-size:12.5px;
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:.28s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 12px 32px -10px rgba(0,0,0,.75);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* 小屏收敛 */
@media (max-width:380px){
  .hero h1{ font-size:33px; }
  .star-grid{ gap:8px; }
  .ring-card{ gap:12px; padding:15px; }
  .ring{ width:96px; height:96px; }
  .ring-legend{ gap:5px 8px; }
}

/* 减少动效 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
}

/* ---------------- v3 新增 ---------------- */
.sc-title{
  display:flex; align-items:baseline; gap:9px;
  margin:-2px 0 13px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  color: var(--gold-dim);
}
.sc-title span{
  font-weight:400; font-size:11px; letter-spacing:.02em;
  color: var(--text-3);
}
.sc-dom{
  margin:11px 0 0; padding:9px 11px;
  font-size:12.5px; line-height:1.72;
  color: var(--text-2);
  border-radius:9px;
  background: rgba(255,255,255,.035);
}
.sc-dom b{ color: var(--gc); font-weight:600; }

.pill-dangling{
  opacity:.6;
  border-style:dashed !important;
  background: rgba(255,255,255,.02) !important;
}
.pill-dangling .pill-s{ color: var(--text-3); }

.seg-item.dangling{ opacity:.72; }
.seg-item.dangling .seg-star small{ color: var(--text-3); }

.t4-row{ display:flex; gap:9px; flex-wrap:wrap; }
.t4-pill{
  flex:1 1 0; min-width:72px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:11px 8px 9px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  border-top:2px solid var(--sc);
  background: rgba(255,255,255,.03);
}
.t4-pill b{
  font-family: var(--serif);
  font-size:21px; line-height:1; letter-spacing:.06em;
  color: var(--sc);
}
.t4-pill small{ font-size:11px; color: var(--text-2); letter-spacing:.04em; }
.t4-note{
  margin:12px 0 0;
  font-size:11.5px; line-height:1.78; color: var(--text-3);
}

/* 磁场链下方的取位提示（首位 0/5 不单独成段） */
.chain-tip{
  margin:14px 0 0;
  padding:11px 13px;
  border-left:2px solid rgba(201,169,97,.45);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background: rgba(201,169,97,.045);
  font-size:11.5px; line-height:1.85; color: var(--text-2);
}
.chain-tip b{ color: var(--gold-hi); font-weight:600; }

/* ============================================================
   阅读边界（不作健康/投资判断、车牌不涉安全）
   ============================================================ */
/* 声明块：原来是一层边框＋圆角的盒子，盒里四条又各挂一根金线，框里套线，太重。
   宪章讲「线只用来分章，不用来围盒」——改成四条细引线分条，靠间距接下目录。
   上线不再加：目录末项底下已经有一条，再画一条隔 30px 又一道，读起来是双线。 */
.bounds{
  margin: 32px 0 8px;
  padding: 0;
}
.bd-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}
.bd-list li{
  display: grid;
  gap: 5px;
  padding-left: 13px;
  border-left: 1px solid rgba(201,169,97,.26);
}
/* 四条的名目不用无衬线粗体。宪章讲层级靠字号与字距，不靠加粗；
   这里改成衬线正文、字号提一档，让它像书里的条目名，不像网页小标题。 */
.bd-list b{
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: .10em;
}
.bd-list span{
  font-size: 12px;
  line-height: 1.72;
  color: var(--text-2);
}
.bd-foot{
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-2);
  letter-spacing: .04em;
}
/* 结果页脚注：与首页边界块呼应，但更轻 */
.foot-note b{ color: var(--text-2); font-weight: 600; }

/* ============================================================
   可以补什么
   ============================================================ */
.advice .ad-list{ display: grid; gap: 10px; }
.ad-item{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  padding: 14px 15px 14px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ad-idx{
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  border: 1px solid rgba(201,169,97,.34);
  background: rgba(201,169,97,.08);
  margin-top: 1px;
}
.ad-body{ font-size: 13px; line-height: 1.82; color: var(--text-2); }
.ad-body b{ color: var(--text); font-weight: 600; }
.ad-note{
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-3);
}
.ad-keep{
  margin-top: 12px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-2);
  background: rgba(79,191,159,.055);
  border: 1px solid rgba(79,191,159,.18);
}
.ad-keep b{ color: #4FBF9F; font-weight: 600; margin-right: 8px; }
.ad-foot{
  margin: 14px 2px 0;
  font-size: 11px;
  line-height: 1.72;
  color: var(--text-3);
}

/* ---------------- 换不了号，还能做什么 ----------------
   三条：分流 / 配数 / 行持。左一列单字头，右一段话 ——
   不做成卡片，卡片会让人以为这是三件可以勾掉的待办。
   这一节讲的不是「补什么」，是「怎么用」，所以不排成清单。 */
.rlf-list{ margin: 2px 0 0; }
.rlf-item{
  display: flex; gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.rlf-item:first-child{ border-top: 0; padding-top: 6px; }
.rlf-k{
  flex: none; width: 40px;
  font-family: var(--serif);
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--gold-hi);
  padding-top: 1px;
}
.rlf-v{
  flex: 1;
  font-size: 12.5px; line-height: 1.86;
  color: var(--text-2);
}
.rlf-v b{ font-weight: 400; color: var(--gold-hi); }

/* ============================================================
   学习栏：会员门槛 + 解读里的「学习处方」
   ============================================================ */

/* 快捷入口上的「会员」角标 */
.quick-tag{
  display:inline-block;
  margin-left:7px;
  padding:1px 6px;
  vertical-align:2px;
  font-family:var(--sans, inherit);
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--gold);
  background:rgba(201,169,97,.12);
  border:1px solid rgba(201,169,97,.28);
  border-radius:5px;
}

/* 未开通会员时的门槛页 */
.learn-lock{
  margin-top:6px;
  padding:24px 20px 20px;
  border:1px solid var(--line-mid);
  border-radius:var(--r-md);
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(201,169,97,.09), transparent 70%),
    rgba(255,255,255,.016);
  text-align:center;
}
.ll-badge{
  display:inline-block;
  padding:3px 10px;
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--gold);
  border:1px solid rgba(201,169,97,.3);
  border-radius:99px;
  background:rgba(201,169,97,.07);
}
.learn-lock h3{
  margin:14px 0 0;
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text);
}
.learn-lock p{
  margin:10px auto 0;
  max-width:340px;
  font-size:12.5px;
  line-height:1.85;
  color:var(--text-2);
  text-align:left;
}
.learn-lock p b{ color:var(--gold-hi); font-weight:600; }
.ll-list{
  margin:18px 0 0;
  padding:14px 16px;
  list-style:none;
  text-align:left;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
}
.ll-list li{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:7px 0;
  font-size:12px;
  line-height:1.7;
  color:var(--text-3);
  border-bottom:1px dashed rgba(255,255,255,.05);
}
.ll-list li:last-child{ border-bottom:0; padding-bottom:0; }
.ll-list li:first-child{ padding-top:0; }
.ll-list b{
  flex:none;
  min-width:78px;
  font-weight:600;
  color:var(--text);
}
.ll-btn{
  width:100%;
  margin-top:18px;
  padding:13px 0;
  font-size:13.5px;
  letter-spacing:.06em;
  color:#241C10;
  background:linear-gradient(180deg,#E4C784,#C9A961);
  border:0;
  border-radius:var(--r-sm);
  font-weight:600;
  cursor:pointer;
}
.ll-btn[disabled]{
  color:var(--text-3);
  background:rgba(255,255,255,.05);
  cursor:default;
}
.ll-foot{
  margin:12px 0 0!important;
  text-align:center!important;
  font-size:11px;
  color:var(--text-3);
}

/* 已开通时的顶部状态行 */
.learn-note{
  margin:0 0 12px;
  padding:9px 12px;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--gold-dim);
  border:1px solid rgba(201,169,97,.16);
  border-radius:var(--r-sm);
  background:rgba(201,169,97,.05);
}

/* 处方里的依据行（结构来源，不指向外部文本） */
.lp-src{
  display:block;
  margin-top:4px;
  font-size:10.5px;
  letter-spacing:.03em;
  color:var(--text-3);
}
/* 组合的主线标签：跟在星对后面，做弱化处理 */
.pr-topic{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  font-size:10px;
  letter-spacing:.05em;
  color:var(--gold-dim);
  background:rgba(201,169,97,.08);
  border:1px solid rgba(201,169,97,.18);
  border-radius:4px;
  vertical-align:1px;
}
.rep-c i,
.rep-c em{
  font-style:normal;
  color:var(--text);
  opacity:.94;
}

/* 去学习栏 */
.lp-go{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.lp-go-btn{
  flex:none;
  padding:9px 16px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--gold-hi);
  background:rgba(201,169,97,.08);
  border:1px solid rgba(201,169,97,.3);
  border-radius:99px;
  cursor:pointer;
}
.lp-go-btn:hover{ background:rgba(201,169,97,.14); }
.lp-go-note{
  font-size:10.5px;
  line-height:1.65;
  color:var(--text-3);
}

/* ============================================================
   流年：段序就是时间轴（第 N 年走第 N 段）
   ============================================================ */

.ly-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
}
.ly-f{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--text-3);
  white-space:nowrap;
}
.ly-f input{
  width:80px;
  padding:6px 8px;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  background:rgba(0,0,0,.3);
  border:1px solid var(--line-mid);
  border-radius:5px;
  outline:none;
}
.ly-f input::placeholder{ color:var(--text-3); }
.ly-f input:focus{ border-color:rgba(201,169,97,.45); }
.ly-hint{
  flex:1 1 140px;
  font-size:10.5px;
  line-height:1.6;
  color:var(--text-3);
  text-align:right;
}

.ly-now-box{
  margin:0 0 16px;
  padding:14px 15px;
  border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(90deg, rgba(201,169,97,.085), rgba(201,169,97,.015));
}
.ly-now-hd{
  margin-bottom:8px;
  font-family:var(--serif);
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--gold-hi);
}
.ly-now-box p{
  margin:0;
  font-size:12px;
  line-height:1.94;
  color:var(--text-2);
}
.ly-now-box b{ color:var(--text); font-weight:600; }

.ly-tip{
  margin:0 0 14px;
  font-size:11.5px;
  line-height:1.85;
  color:var(--text-3);
}

.ly-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.ly-row{
  padding:10px 12px;
  border:1px solid var(--line);
  border-left:2px solid var(--sc, var(--line-mid));
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(255,255,255,.016);
}
.ly-row.is-now{
  border-color:rgba(201,169,97,.28);
  border-left-color:var(--gold);
  background:rgba(201,169,97,.07);
}
.ly-hd{
  display:flex;
  align-items:center;
  gap:8px;
}
.ly-y{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.ly-i{
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--text-3);
}
.ly-tag{
  padding:1px 6px;
  font-size:9.5px;
  letter-spacing:.08em;
  color:#241C10;
  background:linear-gradient(180deg,#E4C784,#C9A961);
  border-radius:4px;
}
.ly-badge{
  margin-left:auto;
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  font-size:11.5px;
  color:var(--sc, var(--text-2));
}
.ly-badge i{
  font-style:normal;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--text-3);
}
.ly-x{
  margin-top:5px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--text-2);
}
.ly-row.is-now .ly-x{ color:var(--text); }

.ly-foot{
  margin:14px 0 0;
  font-size:10.5px;
  line-height:1.78;
  color:var(--text-3);
}
.ly-foot b{ color:var(--text-2); }

/* ============================================================
   账号 · 登录 · 订单 · 兑换（服务端权益）
   ============================================================ */

.icon-btn.is-on{ color:var(--gold-hi); }
.icon-btn.is-on::after{
  content:'';position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px rgba(201,169,97,.8);
}
.icon-btn{ position:relative; }

/* ---- 登录 / 注册 ---- */
.auth-wrap,.acc-wrap,.pay-wrap{ padding:2px 2px 4px; }
.auth-wrap h3,.acc-wrap h3{ margin:0 0 6px; font-family:var(--serif); font-size:17px; letter-spacing:.1em; color:var(--text); }
.auth-wrap .sub,.acc-wrap .sub{ font-size:11.5px; color:var(--text-3); letter-spacing:.04em; }

.auth-tabs{ display:flex; gap:6px; margin:16px 0 14px; }
.auth-tab{
  flex:1; padding:8px 0; border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--text-3); font:12.5px/1 var(--sans); cursor:pointer;
}
.auth-tab.on{ border-color:rgba(201,169,97,.45); background:rgba(201,169,97,.12); color:var(--gold-hi); }

.auth-f{ display:block; margin-bottom:10px; }
.auth-f span{ display:block; margin-bottom:5px; font-size:11px; letter-spacing:.08em; color:var(--text-3); }
.auth-f input{
  width:100%; padding:11px 12px; font-family:var(--sans); font-size:14px; letter-spacing:.04em;
  color:var(--text); background:rgba(0,0,0,.32); border:1px solid var(--line-mid);
  border-radius:7px; outline:none;
}
.auth-f input:focus{ border-color:rgba(201,169,97,.5); }
.auth-f input::placeholder{ color:var(--text-3); font-size:13px; letter-spacing:0; }

.auth-btn{
  display:block; width:100%; margin-top:14px; padding:12px 0;
  border:1px solid rgba(201,169,97,.5); border-radius:8px;
  background:linear-gradient(180deg, rgba(201,169,97,.22), rgba(201,169,97,.13));
  color:var(--gold-hi); font:13.5px/1.2 var(--sans); letter-spacing:.1em; cursor:pointer;
}
.auth-btn:disabled{ opacity:.55; }
.auth-note{ margin:12px 0 0; font-size:10.5px; line-height:1.8; color:var(--text-3); }
.auth-note b{ color:var(--text-2); }

/* ---- 兑换码 ---- */
.redeem{
  margin-top:16px; padding:13px 14px; border:1px dashed var(--line-mid);
  border-radius:9px; background:rgba(255,255,255,.015);
}
.redeem-hd{ font-size:11.5px; letter-spacing:.08em; color:var(--text-2); margin-bottom:9px; }
.redeem-row{ display:flex; gap:8px; }
.redeem-row input{
  flex:1; min-width:0; padding:9px 11px; font-family:var(--sans); font-size:13px;
  letter-spacing:.08em; color:var(--text); background:rgba(0,0,0,.32);
  border:1px solid var(--line-mid); border-radius:6px; outline:none;
}
.redeem-row input:focus{ border-color:rgba(201,169,97,.45); }
.redeem-row button{
  padding:9px 16px; border:1px solid rgba(201,169,97,.4); border-radius:6px;
  background:rgba(201,169,97,.14); color:var(--gold-hi); font:12.5px/1 var(--sans); cursor:pointer;
}
.redeem-tip{ margin-top:8px; font-size:10.5px; line-height:1.7; color:var(--text-3); }

/* ---- 订单（人工收款） ---- */
.pay-box{
  margin:16px 0 0; padding:13px 15px; border-left:2px solid var(--gold);
  border-radius:0 8px 8px 0; background:rgba(201,169,97,.07);
}
.pay-box-hd{ font-size:11px; letter-spacing:.12em; color:var(--gold-hi); margin-bottom:7px; }
.pay-box p{ margin:0; font-size:12.5px; line-height:1.85; color:var(--text-2); }
.pay-box-note{ margin-top:7px !important; font-size:11.5px !important; color:var(--text-3) !important; }
.pay-box-note b{ color:var(--gold-hi); font-family:var(--sans); letter-spacing:.06em; }

.pay-steps{ margin:16px 0 4px; display:flex; flex-direction:column; gap:9px; }
.ps{ display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.7; color:var(--text-2); }
.ps i{
  flex:0 0 18px; height:18px; margin-top:1px; border-radius:50%;
  border:1px solid rgba(201,169,97,.4); color:var(--gold-hi);
  font:10.5px/18px var(--sans); text-align:center; font-style:normal;
}

/* ---- 我的 ---- */
.acc-card{
  margin:14px 0 0; padding:15px; border:1px solid var(--line);
  border-radius:9px; background:rgba(255,255,255,.02);
}
.acc-phone{ font-family:var(--sans); font-size:16px; letter-spacing:.1em; color:var(--text); }
.acc-plan{ margin-top:6px; font-size:12px; letter-spacing:.06em; color:var(--gold-hi); }
.acc-nums{ margin-top:8px; font-size:11px; line-height:1.8; color:var(--text-3); }
.acc-credit{ margin-top:4px; font-size:11px; line-height:1.8; color:var(--gold-dim); }
.acc-btns{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.acc-btn{
  flex:1 1 auto; padding:10px 14px; border:1px solid rgba(201,169,97,.4); border-radius:7px;
  background:rgba(201,169,97,.14); color:var(--gold-hi); font:12.5px/1 var(--sans); cursor:pointer;
}
.acc-btn.ghost{ background:transparent; border-color:var(--line-mid); color:var(--text-2); }

/* 分享码：一枚码，一张小码图；只在「我的」里出现，不铺金。
   页面上不出现层级、编号、上级——那些只在后台台账里。 */
.acc-inv{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.ai-hd{ display:flex; align-items:baseline; gap:9px; }
.ai-hd b{ font-family:var(--serif); font-size:12.5px; font-weight:400; letter-spacing:.20em; color:var(--gold-hi); }
.ai-body{ display:flex; align-items:center; gap:14px; margin-top:11px; }
.ai-txt{ flex:1; min-width:0; }
.ai-code{ font-family:var(--sans); font-size:21px; letter-spacing:.34em; color:var(--text); }
.ai-link{ margin-top:6px; font-size:11px; letter-spacing:.02em; color:var(--text-3); word-break:break-all; }
.ai-copy{
  margin-top:10px; padding:7px 13px; border:1px solid rgba(201,169,97,.4); border-radius:3px;
  background:rgba(201,169,97,.10); color:var(--gold-hi);
  font:11.5px/1 var(--sans); letter-spacing:.08em; cursor:pointer;
}
.ai-copy:active{ opacity:.6; }
.ai-qr{ width:120px; height:120px; flex:none; border-radius:6px; background:#fff; }

.ord-list{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.ord-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.015);
  font-size:12px; color:var(--text-2);
}
.ord-id{ font-family:var(--sans); color:var(--text-3); font-size:11px; }
.ord-p{ flex:1; }
.ord-a{ font-family:var(--sans); letter-spacing:.04em; }
.ord-s{ font-size:10.5px; padding:1px 7px; border-radius:20px; border:1px solid var(--line-mid); }
.ord-s.paid{ color:var(--gold-hi); border-color:rgba(201,169,97,.45); }
.ord-s.pending{ color:var(--text-2); }
.ord-s.cancelled{ color:var(--text-3); text-decoration:line-through; }
.ord-d{ font-size:10.5px; color:var(--text-3); }

.ll-btn.ghost{
  margin-top:8px; background:transparent; border-color:var(--line-mid); color:var(--text-2);
}

/* ---------------- 馆号与馆训 ---------------- */
.hall-sign{
  font-family: var(--serif);
  font-size:12px;
  color: var(--gold-dim);
  letter-spacing:.30em;
  text-indent:.30em;
  margin-bottom:11px;
}

.hall-foot{
  margin: 28px 16px 24px;
  text-align:center;
}
.hall-foot .hf-line{
  height:1px; width:64px; margin:0 auto;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
/* 治历宗旨：主标一句、副标列所依之书 */
.hall-foot .hf-slogan{
  margin: 13px 0 0;
  font-family: var(--serif);
  font-size:13px;
  color: var(--gold-hi);
  letter-spacing:.20em;
  text-indent:.20em;
}
.hall-foot .hf-src{
  margin: 6px 0 13px;
  font-size:10px;
  line-height:1.95;
  color: var(--gold-dim);
  letter-spacing:0;
  padding: 0 10px;
}
.hall-foot .hf-src span{ display:block; white-space:nowrap; }
.hall-foot .hf-bracket{
  margin: 11px 0;
  font-family: var(--serif);
  font-size:11px;
  color: var(--gold-dim);
  letter-spacing:.22em;
}
.hall-foot .hf-name{
  margin: 5px 0 7px;
  font-family: var(--serif);
  font-size:17px;
  color: var(--gold-hi);
  letter-spacing:.28em;
  text-indent:.28em;
}

/* 排盘等待与失败 */
.res-wait{
  padding: 90px 24px;
  text-align:center;
  font-size:13px;
  color: var(--text-3);
  letter-spacing:.08em;
  line-height:1.9;
}
/* 失败重试用的小胶囊。原名 .btn-ghost，与页面下方的全宽按钮撞了，
   会把「生成分享长图」压成小胶囊，故另起名。 */
.btn-retry{
  display:inline-block;
  padding: 8px 22px;
  border-radius: 20px;
  border:1px solid var(--line-mid);
  background:transparent;
  color: var(--gold-dim);
  font-family: var(--sans);
  font-size:12.5px;
  letter-spacing:.1em;
  cursor:pointer;
}

/* ============================================================
   自黄历带日期进来：首页那一天的条
   ============================================================ */
.hl-day{
  margin: 0 16px 14px;
  padding: 14px 15px 13px;
  border-radius: 14px;
  border:1px solid var(--line-mid);
  background: linear-gradient(160deg, rgba(201,169,97,.075), rgba(201,169,97,.02) 60%, transparent);
}
.hl-day .hld-hd{
  display:flex; align-items:center; gap:8px;
  margin-bottom:9px;
}
.hl-day .hld-tag{
  font-size:10.5px; letter-spacing:.14em;
  color: var(--gold-dim);
  border:1px solid rgba(201,169,97,.32);
  border-radius:3px; padding:1.5px 5px;
  flex:none;
}
.hl-day .hld-date{
  font-size:12px; color: var(--text-3);
  letter-spacing:.06em;
  flex:1;
}
.hl-day .hld-x{
  flex:none; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color: var(--text-3);
  cursor:pointer; padding:0;
}
.hl-day .hld-day{
  font-family: var(--serif);
  font-size:17.5px;
  color: var(--gold-hi);
  letter-spacing:.12em;
  line-height:1.5;
  margin-bottom:8px;
}
.hl-day .hld-yiji{
  display:grid; gap:3px;
  font-size:12.5px; line-height:1.75;
}
.hl-day .hld-row{
  display:flex; gap:8px; align-items:baseline;
}
.hl-day .hld-k{
  flex:none; min-width:26px;
  font-family: var(--serif);
  font-size:11px; font-weight:500;
  color: var(--gold-dim); letter-spacing:.08em;
}
.hl-day .hld-v{ color: var(--text-2); }
.hl-day .hld-bits{
  display:flex; flex-wrap:wrap; gap:5px;
  margin-top:9px;
}
.hl-day .hld-bit{
  font-size:11px; color: var(--text-3);
  border:1px solid var(--line);
  border-radius:3px; padding:1px 6px;
  letter-spacing:.06em;
}
.hl-day .hld-tip{
  margin:10px 0 0;
  font-size:12px; line-height:1.85;
  color: var(--text-3);
}

/* 结果页顶部的「当日合参」 */
.res-day{
  margin: 0 0 14px;
  padding: 12px 15px 13px;
  border-radius: 10px;
  border:1px solid var(--line);
  background: rgba(201,169,97,.045);
}
.res-day-hd{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px;
  font-size:12px; line-height:1.7;
}
.res-day-k{
  flex:none;
  font-size:10.5px; letter-spacing:.14em;
  color: var(--gold-dim);
  border:1px solid rgba(201,169,97,.3);
  border-radius:3px; padding:1px 5px;
}
.res-day-d{ color: var(--text-2); }
.res-day-more{
  margin-left:auto; flex:none;
  font-size:11px; letter-spacing:.06em;
  color: var(--gold-dim);
  text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.28);
  padding-bottom:1px;
}
.res-day-more:active{ opacity:.7; }
.res-day-b{
  margin-top:8px;
  font-size:11.5px; line-height:1.75;
  color: var(--text-3);
}

/* 五行合参的一行断语 */
.res-day-c{
  display:flex; align-items:baseline; gap:9px;
  margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line);
}
.rdc-tone{
  flex:none;
  font-family: var(--serif);
  font-size:11px; letter-spacing:.1em;
  padding:1.5px 7px;
  border-radius:3px;
  border:1px solid currentColor;
}
.rdc-txt{ font-size:13px; line-height:1.7; color: var(--text); }
.res-day-c.t-shun .rdc-tone{ color:#7FD9BC; }
.res-day-c.t-shun .rdc-txt{ color:#C4E9DC; }
.res-day-c.t-ping .rdc-tone{ color: var(--text-3); }
.res-day-c.t-hao  .rdc-tone{ color:#D9A55E; }
.res-day-c.t-zhi  .rdc-tone{ color:#D9796E; }
.res-day-note{
  margin-top:7px;
  font-size:10.5px; line-height:1.7;
  color: var(--text-3); opacity:.75;
}

/* 我的 · 黄历收藏入口 */
.acc-link{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line);
  font-size:12px; letter-spacing:.06em;
  color: var(--text-2);
  text-decoration:none;
}
.acc-link-v{ color: var(--gold-dim); }

/* ---------------- 首页 · 今日通书 ---------------- */
.today-hl{
  display:flex; align-items:center; gap:12px;
  margin: 2px 18px 12px;
  padding: 11px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background: linear-gradient(140deg, rgba(201,169,97,.10), rgba(201,169,97,.02) 58%, transparent);
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
.today-hl[hidden]{ display:none; }
.today-hl:active{ background: var(--surface-2); }
.thl-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:40px; flex:0 0 40px;
}
.thl-date b{
  font-family: var(--serif);
  font-size:25px; line-height:1; font-weight:500;
  color: var(--gold-hi);
}
.thl-date i{
  font-style:normal; margin-top:4px;
  font-size:9.5px; letter-spacing:.06em;
  color: var(--text-3);
}
.thl-main{ flex:1; min-width:0; }
.thl-1{
  display:block;
  font-size:12.5px; letter-spacing:.04em;
  color: var(--text);
}
.thl-2{
  display:block; margin-top:4px;
  font-size:11.5px; letter-spacing:.03em;
  color: var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thl-2 em{
  font-style:normal; color: var(--gold);
  margin-right:5px; letter-spacing:.10em;
}
.thl-arrow{ color: var(--gold-dim); flex:0 0 auto; }

/* 六栏之后窄屏收紧一点，字不能挤到看不清 */
@media (max-width:380px){
  .tab{ font-size:9.5px; letter-spacing:.06em; gap:2px; }
  .tab svg{ width:19px; height:19px; }
}

/* ---- 今日运程横条（首页） ---- */
.today-dy{
  display:flex; align-items:center; gap:11px;
  margin: 0 18px 12px;
  padding: 12px 13px;
  border:1px solid rgba(201,169,97,.24);
  border-radius:14px;
  background: linear-gradient(120deg, rgba(201,169,97,.13), rgba(201,169,97,.03) 62%, transparent);
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
  transition:.2s;
}
.today-dy:active{ background: var(--surface-2); }
.tdy-mark{
  flex:none;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px;
  border:1px solid rgba(201,169,97,.34);
  background: rgba(201,169,97,.08);
  font-family: var(--serif);
  font-size:19px; color: var(--gold-hi);
}
.tdy-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tdy-main b{
  font-family: var(--serif);
  font-size:14.5px; font-weight:400;
  color: var(--gold-hi);
  letter-spacing:.08em;
}
.tdy-main i{
  font-style:normal;
  font-size:10.5px; line-height:1.5;
  color: var(--text-3);
  letter-spacing:.02em;
}
.tdy-tag{
  flex:none;
  font-size:9.5px; letter-spacing:.06em;
  color: var(--gold-dim);
  border:1px solid rgba(201,169,97,.26);
  border-radius:2px;
  padding: 2px 7px;
}
.tdy-arrow{ flex:none; color: var(--gold-dim); }

/* ============================================================
   美学宪章 · 精修层
   ------------------------------------------------------------
   三条纪律：
   一、金只用来指路，不用来铺地。满屏金等于没有重点。
   二、线只用来分章，不用来围盒。三个方块并排，是模板；一条目录，是书。
   三、层级靠字号与字距拉开，不靠加粗、阴影、发光。
   ============================================================ */

/* ---- 一、印章：方寸之间，两重描边 ---- */
.brand-mark{
  width:32px; height:32px;
  border-radius:4px;
  font-size:18px; font-weight:500;
  letter-spacing:0;
  border:1px solid rgba(201,169,97,.5);
  background: linear-gradient(158deg, rgba(201,169,97,.13), rgba(201,169,97,.02));
  box-shadow:none;
  position:relative;
}
.brand-mark::after{
  content:'';
  position:absolute; inset:3px;
  border:1px solid rgba(201,169,97,.16);
  border-radius:2px;
  pointer-events:none;
}
.brand-name{ font-size:15.5px; letter-spacing:.14em; }
.brand-sub{ font-size:9px; letter-spacing:.34em; color:rgba(109,102,121,.92); }

/* ---- 二、页眉那行小字：先有线，后有声 ---- */
/* 这一行现在是「钩子」不是「标签」：原来 .3em 的疏排用在九个字上，
   读起来像编号像铭牌；收到 .2em 才读得成一句话。 */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.2em;
  color:var(--gold-dim);
  margin-bottom:15px;
}
.eyebrow::before{
  content:'';
  width:24px; height:1px; flex:none;
  background:linear-gradient(90deg, rgba(201,169,97,.8), rgba(201,169,97,0));
}

/* ---- 三、主标题：贴着纸的笔画，不是贴了金箔的广告字 ---- */
.hero{ padding: 24px 4px 24px; }
.hero h1{
  font-size:37px;
  font-weight:500;
  line-height:1.24;
  letter-spacing:.05em;
}
.hero h1 em{ position:relative; }
/* 第二行下面一条极细的墨线，收得住气 */
.hero h1 em::after{
  content:'';
  position:absolute; left:2px; bottom:-7px;
  width:58px; height:1px;
  background:linear-gradient(90deg, rgba(201,169,97,.75), rgba(201,169,97,0));
}
.lead{
  margin-top:18px;
  font-size:13px;
  line-height:2;
  letter-spacing:.02em;
  color:var(--text-2);
}

/* ---- 四、三张入口卡 → 一卷目录 ---- */
.quick-grid{
  margin-top:26px;
  display:block;
  border-top:1px solid var(--line);
}
.quick{
  display:grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows:auto auto;
  column-gap:13px;
  align-items:center;
  width:100%;
  padding:15px 4px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  transition: background .22s, padding-left .22s;
}
.quick:hover{
  background: linear-gradient(90deg, rgba(201,169,97,.055), transparent 72%);
  border-color: var(--line);
  transform:none;
  padding-left:9px;
}
.quick-ico{
  width:34px; height:34px;
  border-radius:50%;
  color:var(--gold-dim);
  background:transparent;
  border:1px solid rgba(201,169,97,.22);
}
.quick:hover .quick-ico{ color:var(--gold-hi); border-color:rgba(201,169,97,.42); }
.quick-t{ font-size:15px; letter-spacing:.14em; font-weight:400; }
.quick-d{ font-size:11px; letter-spacing:.03em; color:var(--text-3); margin-top:3px; }
.quick-tag{
  font-size:9px; letter-spacing:.14em;
  padding:1px 5px; margin-left:7px;
  border:1px solid rgba(201,169,97,.3);
  border-radius:2px;
  color:var(--gold-dim);
  vertical-align:2px;
}

/* ---- 五、两条今日横条：一套语法 ---- */
.today-hl{
  margin:4px 18px 10px;
  padding:12px 13px;
  border-radius:13px;
  border-color:rgba(201,169,97,.2);
  background: linear-gradient(120deg, rgba(201,169,97,.10), rgba(201,169,97,.02) 62%, transparent);
}
.today-dy{
  margin:0 18px 14px;
  padding:12px 13px;
  border-radius:13px;
  border-color:rgba(201,169,97,.2);
}
.thl-date b{ font-size:24px; font-weight:400; }
.thl-1{ letter-spacing:.06em; }

/* ---- 六、输入：留白比装饰更值钱 ---- */
.input-card{ border-radius:18px; }
.field{ margin-top:20px; }
.field input::placeholder{
  font-size:14px;
  letter-spacing:.1em;
  color:rgba(109,102,121,.85);
}
.btn-primary{
  margin-top:20px;
  letter-spacing:.2em;
  font-weight:500;
  border-radius:13px;
}
.samples{ margin-top:16px; }
.samples-label{ letter-spacing:.2em; font-size:10px; }
.chip{
  border-radius:3px;
  border-color:rgba(232,211,160,.12);
  color:var(--text-3);
  background:transparent;
  font-size:11px;
  letter-spacing:.04em;
}
.chip:hover{ color:var(--gold-hi); border-color:rgba(201,169,97,.34); }

/* ---- 七、章节抬头：一线一题 ---- */
.page-head h2{ font-size:25px; font-weight:500; letter-spacing:.1em; }
.sec-title{ letter-spacing:.16em; }

/* ---- 八、翻页：进来时轻轻落一下，不是整块弹出来 ---- */
.view.is-active{ animation: viewRise .4s cubic-bezier(.2,.72,.2,1) both; }
@keyframes viewRise{
  from{ opacity:0; transform: translateY(7px); }
  to{ opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .view.is-active{ animation:none; }
  .quick{ transition:none; }
}

/* ============================================================
   2026-11-10 · 导航并入与说明层重写
   ------------------------------------------------------------
   一、底栏由六栏收为五栏：主页 / 运势 / 黄历 / 知识 / 我的。
      磁场与组合并进「知识」，不再单占一栏。
   二、说明层只讲能做什么、不宜作何用、馆中是哪一家 —— 不再讲算法。
   三、磁场页的流年一节收进会员，此处只留一句话与一个入口。
   ============================================================ */

.tabbar{ grid-template-columns: repeat(5,1fr); }
/* 「我的」不再挂状态点：底栏六栏收五栏已经够安静，点一下就知道登没登 */

/* 说明层：功能五条，一条一引线，与首页声明同一形制 */
.info-list{
  list-style:none; margin:15px 0 0; padding:0;
  display:grid; gap:13px;
}
.info-list li{
  display:grid; gap:4px;
  padding-left:13px;
  border-left:1px solid rgba(201,169,97,.26);
}
.info-list b{
  font-family:var(--serif);
  font-size:13.5px; font-weight:400;
  letter-spacing:.10em;
  color:var(--text);
}
.info-list span{
  font-size:12.5px; line-height:1.95;
  color:var(--text-3);
}

/* 流年一节的收口：只留一句，方法与入口都在会员那边 */
.rule-lock{
  margin:26px 0 0;
  padding-top:16px;
  border-top:1px dashed var(--line);
  display:grid;
  grid-template-columns:44px 1fr;
  column-gap:12px;
  align-items:start;
}
.rule-lock .rl-k{
  font-family:var(--serif);
  font-size:11.5px; letter-spacing:.16em;
  color:var(--gold-dim);
  padding-top:2px;
}
.rule-lock .rl-v{
  font-size:12.5px; line-height:1.95;
  color:var(--text-3);
  letter-spacing:.02em;
}
.rule-lock .rl-v b{ font-weight:400; color:var(--text-2); }
.rule-lock .rl-go{
  grid-column:2; justify-self:start;
  margin-top:9px; padding:0;
  border:0; background:transparent;
  font-family:var(--serif);
  font-size:12.5px; letter-spacing:.10em;
  color:var(--gold-dim);
  cursor:pointer;
  transition:.2s;
}
.rule-lock .rl-go i{ font-style:normal; margin-left:6px; }
.rule-lock .rl-go:hover{ color:var(--gold-hi); }

/* 说明层里的声明块紧接章节题，章节题已经有线，别再叠一层上边线和大空档 */
.sheet-inner .bounds{
  margin:14px 0 6px;
  padding-top:0;
  border-top:0;
}
/* 馆训放在说明层末尾，与上面隔开一段，别贴住 */
.sheet-inner .hall-foot{ margin:34px 8px 8px; }

/* ---------------- 查过的号（2026-11-10） ----------------
   首页一排：跟示例并排，用一线分开，不另起一块。
   我的页一栏：行与行之间只有一条细线，不围盒。 */
.recent{
  margin-top:15px; padding-top:13px;
  border-top:1px solid var(--line);
  display:flex; align-items:flex-start; gap:8px;
  flex-wrap:nowrap;
}
.recent[hidden]{ display:none; }
/* 标头钉在左上角，标签在它右边自己折行；标头不跟着换到下一行 */
.recent-k{
  flex:0 0 auto; padding-top:7px;
  font-size:10px; letter-spacing:.2em; color:var(--text-3);
}
.recent-row{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:7px; }
.recent-chip{
  max-width:47%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.acc-recent{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.arc-n{ font-size:10px; letter-spacing:.08em; color:var(--text-3); }
.acc-nums-box{ margin-top:8px; }
.arc-empty{
  margin:0;
  font-size:11.5px; line-height:1.9; letter-spacing:.04em; color:var(--text-3);
}
.arow{ display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.045); }
.arow-main{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:baseline; gap:9px;
  padding:11px 0;
  background:none; border:0; text-align:left; cursor:pointer;
  font-family:var(--sans); color:var(--text-2);
}
.ar-t{ flex:0 0 auto; font-size:10px; letter-spacing:.14em; color:var(--text-3); }
.ar-v{
  flex:1 1 auto; min-width:0;
  font-size:13px; letter-spacing:.05em; color:var(--text);
  font-variant-numeric: tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ar-d{ flex:0 0 auto; font-size:10px; letter-spacing:.06em; color:var(--text-3); }
.arow-main:hover .ar-v{ color:var(--gold-hi); }
.arow-del{
  flex:0 0 auto; margin-left:4px; padding:8px 0 8px 12px;
  background:none; border:0; cursor:pointer;
  font-size:10.5px; letter-spacing:.1em; color:var(--text-3);
}
.arow-del:hover{ color:#cf8a68; }
.arc-clear{
  display:block; width:100%; margin:10px 0 2px; padding:8px 0;
  background:none; border:0; cursor:pointer;
  font-size:11px; letter-spacing:.12em; color:var(--text-3);
}
.arc-clear:hover{ color:var(--gold-hi); }
.arc-clear[data-armed]{ color:#cf8a68; }