/* ==========================================================================
   臻途 · AF88 皮肤「夜台 · 夔金」  theme-af88.css
   --------------------------------------------------------------------------
   设计语言（一句话）：赌台夜色 + 铜金钣金 + 等宽数字 + 图纸取景角标。
   加载顺序：必须在本页内联 <style> 之后（同特异性下后者胜出）。
   回滚：删掉 index.html 里那一行 <link> 即可，原样式一行未动。

   两套皮肤：
     默认            dark  —— 夜台（近黑台面 + 铜金描边）
     html[data-skin="light"]     —— 票根（宣纸米黄 + 深金印刷）
   顶栏与底栏在所有皮肤下都保持深色金属导轨，这是本设计的固定签名。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  color-scheme: dark;

  /* 层级 */
  --p-bg:#0a0b0d;
  --p-bg-2:#101216;
  --p-panel:#14171c;
  --p-panel-2:#191d23;
  --p-panel-3:#1f242b;
  --p-line:#262b33;
  --p-line-2:#333a44;
  --p-fill:rgba(255,255,255,.035);
  --p-input:rgba(255,255,255,.03);
  --p-input-2:#1b1f26;
  --p-console:#08090b;
  --p-console-text:#c2bcae;

  /* 文本 */
  --p-text:#e9e6df;
  --p-text-2:#c2bcae;
  --p-muted:#7b8290;

  /* 强调：铜金 */
  --p-gold:#c9a24c;
  --p-gold-2:#e6c877;
  --p-gold-3:#8a6f2c;
  --p-gold-rgb:201,162,76;

  /* 语义色（RGB 分量，便于做同色系半透明） */
  --p-up:#3ecf8e;      --p-up-rgb:62,207,142;
  --p-down:#e0524d;    --p-down-rgb:224,82,77;
  --p-warn:#e0a33d;    --p-warn-rgb:224,163,61;
  --p-info:#7f93ad;    --p-info-rgb:127,147,173;

  /* 形状与字族 */
  --p-r:3px;
  --p-r-sm:2px;
  --p-mono:ui-monospace,SFMono-Regular,"JetBrains Mono","Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --p-serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",SimSun,serif;
}

html[data-skin="light"]{
  color-scheme: light;

  --p-bg:#efe9dd;
  --p-bg-2:#e8e1d2;
  --p-panel:#fbf7ee;
  --p-panel-2:#f6f0e4;
  --p-panel-3:#efe8da;
  --p-line:#cfc4ac;
  --p-line-2:#b3a582;
  --p-fill:rgba(0,0,0,.035);
  --p-input:rgba(0,0,0,.028);
  --p-input-2:#fffdf7;
  --p-console:#26221b;
  --p-console-text:#c8bfa9;

  --p-text:#221d15;
  --p-text-2:#3d362c;
  --p-muted:#7a6f5c;

  --p-gold:#8a6a1c;
  --p-gold-2:#6f5314;
  --p-gold-3:#b08e33;
  --p-gold-rgb:138,106,28;

  --p-up:#1c7f5a;      --p-up-rgb:28,127,90;
  --p-down:#b3352f;    --p-down-rgb:179,53,47;
  --p-warn:#9a6a13;    --p-warn-rgb:154,106,19;
  --p-info:#4b6076;    --p-info-rgb:75,96,118;
}

/* ---------- 2. 接管原变量：让旧规则自动跟随新皮肤 ---------- */
:root{
  --bg:var(--p-bg);
  --panel:var(--p-panel);
  --line:var(--p-line);
  --text:var(--p-text);
  --muted:var(--p-muted);
  --purple:var(--p-gold);
  --purple-dark:var(--p-gold-2);
  --cyan:var(--p-info);
  --green:var(--p-up);
  --red:var(--p-down);
  --gold:var(--p-warn);
  --radius:var(--p-r);
  --shadow:none;            /* 全站取消 soft 阴影，改用描边 + 角标分层 */
}

/* ---------- 3. 台面：网格 + 顶部金线刻度（签名元素） ---------- */
html,body{ background-color:var(--p-bg); }
body{
  background-image:
    radial-gradient(120% 80% at 50% -12%, rgba(var(--p-gold-rgb),.07), transparent 62%),
    linear-gradient(rgba(var(--p-gold-rgb),.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--p-gold-rgb),.028) 1px, transparent 1px),
    linear-gradient(180deg, var(--p-bg-2), var(--p-bg) 58%);
  background-size:auto, 34px 34px, 34px 34px, auto;
  background-attachment:fixed;
  color:var(--p-text);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:5px; z-index:60; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(var(--p-gold-rgb),.55) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, transparent, rgba(var(--p-gold-rgb),.28), transparent);
  opacity:.55;
}
::selection{ background:rgba(var(--p-gold-rgb),.32); color:#fff; }
:focus-visible{ outline:1px solid var(--p-gold); outline-offset:2px; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--p-line-2); border-radius:0; }
::-webkit-scrollbar-track{ background:transparent; }
::placeholder{ color:var(--p-muted); opacity:.75; }

/* ---------- 4. 顶栏：深色金属铭牌 ---------- */
.topbar{
  padding:12px 14px 11px; gap:8px;
  background:linear-gradient(180deg,#1b1f26,#101318);
  border:0;
  border-bottom:1px solid rgba(var(--p-gold-rgb),.4);
  box-shadow:0 12px 26px rgba(0,0,0,.5);
  border-radius:0;
}
/* 顶栏靠 -14px 出血铺满屏宽；clip 把它裁到屏幕内，避免 4px 横向溢出 */
.shell{ overflow-x:clip; }
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--p-gold-rgb),.95), transparent);
}
.brand{ gap:9px; flex:1 1 auto; min-width:0; }
.brand > div{ min-width:0; }
.brand-icon{
  width:32px; height:32px; border-radius:var(--p-r-sm);
  background:rgba(var(--p-gold-rgb),.08);
  border:1px solid rgba(var(--p-gold-rgb),.5);
  font-size:15px;
  filter:sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.08);
}
.brand-title{
  font-family:var(--p-serif); font-weight:600; font-size:15px;
  letter-spacing:.08em; color:#f5f0e3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-title #gameName{ color:var(--p-gold-2); }
.brand-sub{
  font-family:var(--p-mono); font-size:8.5px; letter-spacing:.3em;
  color:#8b93a1; margin-top:3px; white-space:nowrap;
}
.switcher{
  flex-shrink:0; padding:6px 9px; border-radius:var(--p-r-sm);
  background:rgba(var(--p-gold-rgb),.08);
  border:1px solid rgba(var(--p-gold-rgb),.45);
  color:var(--p-gold-2); font-family:var(--p-mono); font-size:10.5px;
  letter-spacing:.04em; box-shadow:none;
}
.switcher:active{ background:rgba(var(--p-gold-rgb),.2); }
.skin-toggle{
  flex-shrink:0; min-width:42px; height:30px; padding:0 7px;
  border-radius:var(--p-r-sm);
  border:1px solid rgba(var(--p-gold-rgb),.45);
  background:rgba(var(--p-gold-rgb),.08);
  color:var(--p-gold-2);
  font-family:var(--p-mono); font-size:9.5px; letter-spacing:.1em;
}
@media (max-width:372px){
  .brand-sub{ display:none; }
}

/* ---------- 5. 游戏下拉 ---------- */
.game-menu{
  border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
  border:1px solid rgba(var(--p-gold-rgb),.32);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  padding:6px 0;
}
.menu-group{
  padding:11px 16px 5px; color:var(--p-gold);
  font-family:var(--p-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}
.menu-item{ border-bottom:1px solid var(--p-line); }
.menu-item:last-child{ border-bottom:0; }
.menu-item:active{ background:rgba(var(--p-gold-rgb),.08); }
.menu-item.selected{
  background:linear-gradient(90deg, rgba(var(--p-gold-rgb),.16), transparent 70%);
  color:var(--p-gold-2); font-weight:600;
  box-shadow:inset 2px 0 0 rgba(var(--p-gold-rgb),.9);
}
.menu-item.selected:after{ color:var(--p-gold-2); }

/* ---------- 6. 免责声明：票据边注 ---------- */
.disclaimer{
  margin-top:12px; padding:9px 12px;
  border-radius:0; background:rgba(var(--p-gold-rgb),.05);
  border-left:2px solid rgba(var(--p-gold-rgb),.6);
  color:var(--p-muted); font-size:10.5px; line-height:1.75; letter-spacing:.02em;
}
.disclaimer .ico{ filter:grayscale(1) brightness(1.45); opacity:.8; }

/* ---------- 7. 卡片：钣金面 + 图纸取景角标 ---------- */
.card, .login-card, .strategy-card, .menu-item-row, .group-sheet, .sheet{
  background:linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
  border:1px solid var(--p-line);
  border-radius:var(--p-r);
  box-shadow:none;
}
.card, .login-card, .strategy-card, .menu-item-row{ position:relative; }
.card::after, .login-card::after, .strategy-card::after, .menu-item-row::after{
  content:""; position:absolute; top:-1px; right:-1px; width:13px; height:13px;
  border-top:1px solid rgba(var(--p-gold-rgb),.7);
  border-right:1px solid rgba(var(--p-gold-rgb),.7);
  pointer-events:none;
}
.card::before, .login-card::before, .strategy-card::before, .menu-item-row::before{
  content:""; position:absolute; bottom:-1px; left:-1px; width:13px; height:13px;
  border-bottom:1px solid rgba(var(--p-gold-rgb),.7);
  border-left:1px solid rgba(var(--p-gold-rgb),.7);
  pointer-events:none;
}
.page.active{ animation:p-in .2s ease; }
@keyframes p-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- 8. 账号卡 ---------- */
.login-status-tag{
  padding:3px 9px; border-radius:var(--p-r-sm);
  background:transparent; border:1px solid var(--p-down); color:var(--p-down);
  font-family:var(--p-mono); font-size:10px; letter-spacing:.16em; font-weight:600;
}
.login-status-tag.online{ background:transparent; border-color:var(--p-up); color:var(--p-up); }
.login-balance{ font-family:var(--p-mono); font-size:11px; color:var(--p-muted); }
.login-balance b{ font-family:var(--p-mono); font-variant-numeric:tabular-nums; color:var(--p-gold-2); font-size:17px; }
.login-prompt{
  margin-top:12px; padding:10px 14px; border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, var(--p-panel-3), var(--p-panel));
  border:1px solid rgba(var(--p-gold-rgb),.45);
  color:#f0ebdd; box-shadow:none; letter-spacing:.06em;
}
html[data-skin="light"] .login-prompt{ color:var(--p-text); }
.login-prompt .reaper{ filter:grayscale(1) brightness(1.5); }
.login-hint{ font-size:11px; line-height:1.75; }
.refresh-btn{
  margin-top:12px; height:42px; border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.18), rgba(var(--p-gold-rgb),.05));
  border:1px solid rgba(var(--p-gold-rgb),.5);
  color:var(--p-gold-2); box-shadow:none;
  font-family:var(--p-mono); font-size:12px; letter-spacing:.1em;
}

/* ---------- 9. 快捷操作：钣金键（主/次分明，不再三色虹） ---------- */
.action-grid{ gap:8px; }
.act{
  border-radius:var(--p-r-sm); box-shadow:none;
  background:linear-gradient(180deg, var(--p-panel-3), var(--p-panel));
  border:1px solid var(--p-line-2); color:var(--p-text-2);
  font-family:var(--p-mono); font-weight:600; font-size:11px; letter-spacing:.08em;
}
.act .emo{ font-size:16px; filter:grayscale(1) brightness(1.5); }
.act.purple{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.26), rgba(var(--p-gold-rgb),.08));
  border-color:rgba(var(--p-gold-rgb),.6); color:var(--p-gold-2);
}
.act.purple .emo{ filter:sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.1); }
.act.gold{
  background:linear-gradient(180deg, var(--p-panel-3), var(--p-panel));
  border-color:rgba(var(--p-warn-rgb),.5); color:var(--p-warn);
}
.act.green{
  background:linear-gradient(180deg, var(--p-panel-3), var(--p-panel));
  border-color:rgba(var(--p-up-rgb),.5); color:var(--p-up);
}
.act:active{ transform:translateY(1px) scale(.985); }

/* ---------- 10. 被杀统计：金箔台面 ---------- */
.kill-card{
  margin-top:14px; padding:16px 14px 14px;
  border-radius:var(--p-r);
  background:
    linear-gradient(180deg, rgba(var(--p-gold-rgb),.08), transparent 55%),
    linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
  border:1px solid rgba(var(--p-gold-rgb),.32);
  box-shadow:none;
}
.kill-title{
  margin:-30px auto 12px; padding:7px 16px; border-radius:var(--p-r-sm);
  background:linear-gradient(180deg,#242a32,#12161b);
  border:1px solid rgba(var(--p-gold-rgb),.45);
  box-shadow:0 3px 0 rgba(var(--p-gold-rgb),.3);
  color:var(--p-gold-2);
  font-family:var(--p-serif); font-weight:600; font-size:12.5px; letter-spacing:.18em;
}
.kill-item{ color:var(--p-muted); font-size:10.5px; }
.kill-item b{ font-family:var(--p-mono); font-variant-numeric:tabular-nums; color:var(--p-gold-2); font-size:19px; }
.skull{
  width:26px; height:23px; border-radius:var(--p-r-sm);
  background:linear-gradient(145deg,#232a34,#12161c);
  border:1px solid rgba(var(--p-gold-rgb),.3);
  color:var(--p-gold-2);
}

/* ---------- 11. 走势图：金线金柱 ---------- */
.trend-card{
  margin-top:0; padding:15px 14px 13px;
  border-radius:var(--p-r);
  background:linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
  border:1px solid var(--p-line);
  box-shadow:none;
}
.trend-head h3{ font-family:var(--p-serif); font-size:14px; letter-spacing:.14em; color:var(--p-text); }
.trend-badge{
  border-radius:var(--p-r-sm); padding:2px 7px;
  color:var(--p-gold); background:rgba(var(--p-gold-rgb),.1);
  border:1px solid rgba(var(--p-gold-rgb),.35);
  font-family:var(--p-mono); font-size:9px; letter-spacing:.08em;
}
.trend-refresh{
  border-radius:var(--p-r-sm); background:transparent;
  border:1px solid var(--p-line-2); color:var(--p-muted);
  font-family:var(--p-mono); font-size:10px;
}
.trend-refresh:active{ border-color:rgba(var(--p-gold-rgb),.55); color:var(--p-gold-2); }
/* 数据来源：实时 / 离线快照 —— 颜色点 + 等宽小字，与按钮区分 */
.trend-live{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--p-mono); font-size:9.5px; letter-spacing:.1em;
}
.trend-live::before{ content:""; width:6px; height:6px; border-radius:1px; background:currentColor; }
.trend-live.live{ color:var(--p-up); }
.trend-live.live::before{ box-shadow:0 0 8px rgba(var(--p-up-rgb),.8); }
.trend-live.stale{ color:var(--p-warn); }
.trend-bar{ border-radius:1px 1px 0 0; background:linear-gradient(180deg, var(--p-gold-2), var(--p-gold-3)); }
.trend-bar-item.hot .trend-bar{ background:linear-gradient(180deg,#f0837c,var(--p-down)); }
.trend-bar-val{ font-family:var(--p-mono); color:var(--p-text-2); }
.trend-bar-item.hot .trend-bar-val{ color:var(--p-down); }
.trend-note{ border-top:1px dashed var(--p-line-2); }
.trend-lg i{ border-radius:0; }

/* ---------- 12b. 走势图 v2：累计榜 + 逐期网格（替换原来的彩虹折线） ---------- */
.trend-summary{ font-size:12px; line-height:1.75; color:var(--p-text); margin-bottom:12px; }
.trend-summary b{ font-weight:600; }
.trend-summary b.hot{ color:var(--p-down); }
.trend-upd{ margin-left:8px; font-family:var(--p-mono); font-size:10px; color:var(--p-muted); }

/* ① 累计出局榜：横向条，按次数排序 */
.trank{ display:grid; gap:6px; }
.trank-row{ display:grid; grid-template-columns:54px 1fr 32px; align-items:center; gap:8px; }
.trank-name{ font-size:11px; color:var(--p-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trank-track{ height:10px; border-radius:1px; background:var(--p-line); opacity:.85; overflow:hidden; }
.trank-track i{ display:block; height:100%; border-radius:1px; background:linear-gradient(90deg, var(--p-gold-3), var(--p-gold-2)); }
/* 三级热度 */
.trank-row.top .trank-track{ opacity:1; }
.trank-row.top .trank-track i{ background:linear-gradient(90deg,#8c2f2b,var(--p-down)); }
.trank-row.top .trank-name{ color:var(--p-down); font-weight:600; }
.trank-row.top .trank-val{ color:var(--p-down); }
.trank-row.warm .trank-track{ opacity:1; }
.trank-row.cold .trank-track i{ background:var(--p-line-2); opacity:.75; }
.trank-row.cold .trank-name, .trank-row.cold .trank-val{ color:var(--p-muted); }
.trank-val{ text-align:right; font-family:var(--p-mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--p-gold-2); }

/* ② 逐期走势网格：行=房间、列=期、亮格=该期被出局 */
.tgrid-wrap{ margin-top:15px; padding-top:13px; border-top:1px dashed var(--p-line-2); }
.tgrid-head, .tgrid-row{
  display:grid; grid-template-columns:54px 1fr 32px; align-items:center; gap:8px;
}
.tgrid-head{ margin-bottom:7px; }
.tgrid-head .tgrid-name, .tgrid-head .tgrid-streak, .tgrid-axis{
  font-family:var(--p-mono); font-size:9px; letter-spacing:.1em; color:var(--p-muted);
}
.tgrid-streak{ text-align:right; }
.tgrid-row{ padding:2px 0; }
.tgrid-name{ font-size:10.5px; color:var(--p-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgrid-row.hot .tgrid-name{ color:var(--p-down); font-weight:600; }
.tgrid-cells{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px; }
.tgrid-cells i{ height:12px; border-radius:1px; background:var(--p-line); opacity:.72; }
/* 最左列 = 最新一期：整列描边环 + 被杀格光圈（格子只有 ~5px，靠描边环保证看得清） */
.tgrid-cells i.now{
  background:rgba(var(--p-gold-rgb),.16); opacity:1;
  box-shadow:inset 0 0 0 1px rgba(var(--p-gold-rgb),.5);
}
.tgrid-cells i.on{ opacity:1; background:linear-gradient(180deg, var(--p-gold-2), var(--p-gold)); }
.tgrid-cells i.on.now{
  background:linear-gradient(180deg,#fff0c2,var(--p-gold-2));
  box-shadow:inset 0 0 0 1px var(--p-gold-2), 0 0 8px rgba(var(--p-gold-rgb),.85);
}
.tgrid-cells i.on.run{
  background:linear-gradient(180deg,#f0837c,var(--p-down));
  box-shadow:0 0 6px rgba(var(--p-down-rgb),.6);
}
.tgrid-cells i.on.run.now{
  box-shadow:inset 0 0 0 1px #ffd9d4, 0 0 10px rgba(var(--p-down-rgb),.95);
}
.tgrid-row .tgrid-streak{ font-family:var(--p-mono); font-size:11px; font-weight:700; color:var(--p-down); }
.tgrid-foot{ margin-top:11px; font-size:10px; line-height:1.85; color:var(--p-muted); }
.tgrid-foot b{ font-weight:600; color:var(--p-text-2); }
.tgrid-foot b.g{ color:var(--p-gold-2); }
.tgrid-foot b.r{ color:var(--p-down); }

/* ---------- 12c. 实时状态条（1 秒轮询）：期号 / 倒计时 / 上期杀手 / 连杀 ---------- */
.tstat{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px;
  margin:2px 0 10px; padding:9px 11px;
  border:1px solid rgba(var(--p-gold-rgb),.26); border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.07), transparent);
  font-family:var(--p-mono); font-size:11px; color:var(--p-text-2);
  transition:border-color .2s ease, background .2s ease;
}
.tstat-main{ display:inline-flex; align-items:center; gap:6px; color:var(--p-text); }
.tstat-dot{
  width:6px; height:6px; border-radius:50%; background:var(--p-up);
  box-shadow:0 0 8px rgba(var(--p-up-rgb),.8); animation:p-pulse 1.6s infinite;
}
.tstat-num{ font-family:var(--p-mono); font-size:15px; font-weight:700; color:var(--p-gold-2); }
.tstat-kv{ color:var(--p-muted); }
.tstat-kv b{ color:var(--p-gold-2); font-weight:600; }
/* 临界 10 秒内转朱砂：一眼看出要开奖了 */
.tstat.urgent{
  border-color:rgba(var(--p-down-rgb),.45);
  background:linear-gradient(180deg, rgba(var(--p-down-rgb),.1), transparent);
}
.tstat.urgent .tstat-dot{ background:var(--p-down); box-shadow:0 0 10px rgba(var(--p-down-rgb),.95); }
.tstat.urgent .tstat-num{ color:var(--p-down); }

/* ---------- 13. 运行卡：台面铭牌 + 金线扫掠 ---------- */
.run-card{
  margin-top:14px; padding:16px; border-radius:var(--p-r);
  background:linear-gradient(180deg,#1a1e25,#0e1116);
  border:1px solid rgba(var(--p-gold-rgb),.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.55);
  color:#f0ebdd; position:relative; overflow:hidden;
}
.run-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(var(--p-gold-rgb),.9), transparent);
  animation:p-sweep 2.8s linear infinite;
}
@keyframes p-sweep{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
.run-state{ font-family:var(--p-mono); font-size:12px; letter-spacing:.1em; }
.run-sub{ margin-top:6px; font-size:11px; line-height:1.7; color:#98a0ae; }
.run-dot{ border-radius:1px; background:var(--p-warn); box-shadow:0 0 0 3px rgba(var(--p-warn-rgb),.16); }
.run-dot.live{
  background:var(--p-up);
  box-shadow:0 0 0 3px rgba(var(--p-up-rgb),.18), 0 0 12px rgba(var(--p-up-rgb),.7);
  animation:p-pulse 1.5s infinite;
}
@keyframes p-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ---------- 13. 收益卡：账本 ---------- */
.profit-card{
  margin-top:14px; padding:16px; border-radius:var(--p-r);
  background:
    linear-gradient(180deg, rgba(var(--p-gold-rgb),.07), transparent 60%),
    linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
  border:1px solid rgba(var(--p-gold-rgb),.3);
  box-shadow:none; color:var(--p-text);
}
.profit-head{ font-family:var(--p-mono); font-size:12px; letter-spacing:.1em; color:var(--p-text-2); }
.profit-id{ font-size:10px; color:var(--p-muted); }
.profit-renew{ border-radius:var(--p-r-sm); background:rgba(var(--p-gold-rgb),.16); color:var(--p-gold-2); font-family:var(--p-mono); }
.profit-renew.no{ background:rgba(var(--p-warn-rgb),.16); color:var(--p-warn); }
.profit-grid{ gap:8px; margin-top:12px; }
.profit-item{
  background:var(--p-fill); border:1px solid var(--p-line);
  border-radius:var(--p-r-sm); padding:11px 6px;
}
.profit-label{ font-size:10.5px; color:var(--p-muted); letter-spacing:.04em; }
.profit-val{ font-family:var(--p-mono); font-variant-numeric:tabular-nums; font-size:19px; font-weight:700; color:var(--p-gold-2); }
.profit-link{
  margin-top:12px; border-radius:var(--p-r-sm);
  background:var(--p-fill); border:1px solid var(--p-line-2);
  color:var(--p-text-2); font-family:var(--p-mono); font-size:12px; letter-spacing:.08em;
}
.profit-link:active{ background:rgba(var(--p-gold-rgb),.12); color:var(--p-gold-2); }

/* ---------- 14. 群入口 ---------- */
.group-banner{
  border-radius:var(--p-r);
  background:linear-gradient(180deg, rgba(var(--p-up-rgb),.12), rgba(var(--p-up-rgb),.03));
  border:1px solid rgba(var(--p-up-rgb),.4);
  box-shadow:none; color:var(--p-text);
}
.group-banner .gb-ico{ filter:grayscale(1) brightness(1.5); }
.group-banner .gb-text small{ color:var(--p-muted); }
.group-banner .gb-go{
  border-radius:var(--p-r-sm); background:rgba(var(--p-up-rgb),.16);
  border:1px solid rgba(var(--p-up-rgb),.38);
  color:var(--p-up); font-family:var(--p-mono); font-size:11px;
}
.group-join-btn{
  border-radius:var(--p-r);
  background:linear-gradient(180deg, rgba(var(--p-up-rgb),.2), rgba(var(--p-up-rgb),.07));
  border:1px solid rgba(var(--p-up-rgb),.45);
  box-shadow:none; color:var(--p-up);
  font-family:var(--p-serif); letter-spacing:.16em;
}
#groupButton{
  background:linear-gradient(180deg, rgba(var(--p-up-rgb),.1), transparent) !important;
  border:1px solid rgba(var(--p-up-rgb),.42) !important;
}
#groupButton .menu-ico.cyan{ background:rgba(var(--p-up-rgb),.16); }

/* ---------- 15. 表格：票据双线 ---------- */
table{ font-size:10.5px; }
th, td{ padding:8px 6px; border-bottom:1px solid var(--p-line); }
th{
  background:transparent; color:var(--p-gold);
  font-family:var(--p-mono); font-size:9.5px; letter-spacing:.12em; font-weight:600;
  border-bottom:1px solid rgba(var(--p-gold-rgb),.38);
}
td{ font-variant-numeric:tabular-nums; }
tbody tr:nth-child(even) td{ background:var(--p-fill); }
.positive{ color:var(--p-up); }
.negative{ color:var(--p-down); }
.muted{ color:var(--p-muted); }

/* ---------- 16. 面板 / 字段 / 控件 ---------- */
.section-title{
  margin:20px 0 12px; padding-top:16px;
  border-top:1px dashed var(--p-line-2);
  color:var(--p-gold);
  font-family:var(--p-serif); font-weight:600; font-size:13px; letter-spacing:.22em;
}
.section-title .dot{ width:10px; height:1px; border-radius:0; background:rgba(var(--p-gold-rgb),.9); }
.section-title .sub{ font-family:var(--p-mono); letter-spacing:.04em; }
.panel-head strong{ font-family:var(--p-serif); letter-spacing:.14em; }
.link-button{
  color:var(--p-info); font-family:var(--p-mono); font-size:11px;
  border-bottom:1px dashed rgba(var(--p-info-rgb),.5); padding-bottom:1px;
}
.field label{ font-family:var(--p-mono); font-size:11px; letter-spacing:.06em; }
.field label span{ color:var(--p-muted); }
.form-card{ padding:16px; }

select, input{
  height:44px; border-radius:var(--p-r-sm);
  border:1px solid var(--p-line-2);
  background:var(--p-input);
  color:var(--p-text);
  font-variant-numeric:tabular-nums;
}
select:focus, input:focus{
  border-color:var(--p-gold);
  box-shadow:0 0 0 2px rgba(var(--p-gold-rgb),.16);
  background:var(--p-input-2);
}
select option{ background:var(--p-input-2); color:var(--p-text); }

.toggle-row{ font-size:12.5px; }
.toggle{
  width:42px; height:24px; border-radius:var(--p-r-sm);
  background:var(--p-line); border:1px solid var(--p-line-2);
}
.toggle:after{
  width:16px; height:16px; top:3px; left:3px;
  border-radius:1px; background:#f4f2ed; box-shadow:none;
}
.toggle.on{ background:rgba(var(--p-gold-rgb),.22); border-color:rgba(var(--p-gold-rgb),.7); }
.toggle.on:after{ left:21px; background:var(--p-gold-2); }

.compact-grid input, .compact-grid select{ height:40px; }

.primary{
  height:44px; border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, var(--p-gold-2), var(--p-gold));
  border:1px solid var(--p-gold-3);
  color:#1a1408;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px rgba(0,0,0,.35);
  font-family:var(--p-mono); font-weight:700; font-size:14px; letter-spacing:.14em;
}
.primary:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.35); }
.secondary{
  height:44px; border-radius:var(--p-r-sm);
  background:var(--p-fill); border:1px solid var(--p-line-2);
  color:var(--p-text-2); font-family:var(--p-mono); letter-spacing:.08em;
}
.secondary:active{ background:rgba(var(--p-gold-rgb),.1); color:var(--p-gold-2); }

/* ---------- 17. 标签页 / 碎片 ---------- */
.subtabs{ gap:6px; }
.subtab{
  border-radius:var(--p-r-sm); background:var(--p-panel);
  border:1px solid var(--p-line); color:var(--p-muted);
  font-family:var(--p-mono); font-size:12px; letter-spacing:.08em;
}
.subtab.active{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.24), rgba(var(--p-gold-rgb),.08));
  border-color:rgba(var(--p-gold-rgb),.6);
  color:var(--p-gold-2); box-shadow:none;
}
.chip{
  border-radius:var(--p-r-sm); background:transparent;
  border:1px solid var(--p-line-2); color:var(--p-muted);
  font-family:var(--p-mono); font-size:10.5px; letter-spacing:.08em;
}
.chip.active{
  background:rgba(var(--p-gold-rgb),.16);
  border-color:rgba(var(--p-gold-rgb),.65);
  color:var(--p-gold-2);
}
.history-banner{
  border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.18), rgba(var(--p-gold-rgb),.05));
  border:1px solid rgba(var(--p-gold-rgb),.42);
  color:var(--p-gold-2); box-shadow:none;
  font-family:var(--p-mono); font-size:12px; letter-spacing:.08em;
}
.ctrl-title{ font-family:var(--p-serif); letter-spacing:.14em; }
.ctrl-toggle .dot-mini{ border-radius:1px; background:var(--p-gold); }
.ctrl-toggle.off .dot-mini{ background:var(--p-line-2); }
.ctrl-display{ font-family:var(--p-mono); font-size:10px; }
.log-filter .chip{ letter-spacing:.06em; }
#liveCfgHint{
  background:rgba(var(--p-up-rgb),.08) !important;
  border:1px solid rgba(var(--p-up-rgb),.28) !important;
  border-radius:var(--p-r-sm) !important;
  color:var(--p-up) !important;
}

/* ---------- 18. 日志：终端 ---------- */
.logs{
  padding:12px; border-radius:var(--p-r-sm);
  background:var(--p-console);
  border:1px solid var(--p-line);
}
.log-line{
  grid-template-columns:58px 1fr;
  border-bottom:1px solid rgba(127,147,173,.12);
  font-family:var(--p-mono); font-size:10.5px; letter-spacing:0;
  color:var(--p-console-text);
}
.log-line time{ color:var(--p-muted); }
.log-line.bet{ color:var(--p-gold-2); }
.log-line.settle{ color:var(--p-up); }
.log-line.warn{ color:var(--p-warn); }
.log-line.error{ color:var(--p-down); }

/* ---------- 19. 策略卡 ---------- */
.strategy-market{ gap:8px; }
.strategy-card{ padding:13px; grid-template-columns:54px 1fr auto; }
.strategy-card:active{ transform:scale(.995); }
.strategy-card.selected{
  border-color:rgba(var(--p-gold-rgb),.6);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.1), var(--p-panel));
  box-shadow:inset 2px 0 0 rgba(var(--p-gold-rgb),.8);
}
.strategy-rate{
  width:54px; height:54px; border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, rgba(var(--p-up-rgb),.22), rgba(var(--p-up-rgb),.05));
  border:1px solid rgba(var(--p-up-rgb),.45);
  color:var(--p-up); box-shadow:none;
  font-family:var(--p-mono); font-variant-numeric:tabular-nums;
}
.strategy-rate.low{
  background:linear-gradient(180deg, var(--p-panel-3), var(--p-panel));
  border-color:var(--p-line-2); color:var(--p-muted);
}
.strategy-rate.neutral{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.22), rgba(var(--p-gold-rgb),.05));
  border-color:rgba(var(--p-gold-rgb),.45); color:var(--p-gold-2);
}
.strategy-info h3{ font-family:var(--p-serif); letter-spacing:.1em; }
.strategy-tag{
  border-radius:var(--p-r-sm); background:var(--p-fill);
  border:1px solid var(--p-line); color:var(--p-text-2);
  font-family:var(--p-mono); font-size:9.5px;
}
.strategy-tag.official{
  background:rgba(var(--p-warn-rgb),.12); border-color:rgba(var(--p-warn-rgb),.35); color:var(--p-warn);
}
.strategy-action .primary{ height:34px; border-radius:var(--p-r-sm); font-size:11px; letter-spacing:.06em; }
.strategy-meta-row b{ font-family:var(--p-mono); color:var(--p-gold-2); }
.strategy-current{
  border-radius:var(--p-r-sm);
  border:1px solid rgba(var(--p-gold-rgb),.45);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.1), var(--p-panel));
  box-shadow:none;
}
.sc-name{ font-family:var(--p-serif); letter-spacing:.1em; }
.sc-meta{ font-family:var(--p-mono); }
.sc-change{ color:var(--p-gold-2); font-family:var(--p-mono); }
.strategy-rank-table th, .strategy-rank-table td{ border-bottom:1px solid var(--p-line); }
.strategy-rank-table th{ color:var(--p-gold); font-family:var(--p-mono); letter-spacing:.1em; }

/* ---------- 20. 我的：设置行 / 菜单行 ---------- */
.setting-row{ border-bottom:1px dashed var(--p-line-2); font-size:12.5px; }
.setting-action{ color:var(--p-info); font-family:var(--p-mono); font-size:11px; }
.menu-item-row{ padding:14px 15px; gap:13px; }
.menu-item-row:active{
  transform:scale(.99);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.1), var(--p-panel));
  box-shadow:none;
}
.menu-ico{
  width:38px; height:38px; border-radius:var(--p-r-sm);
  background:var(--p-fill); border:1px solid var(--p-line-2);
  font-size:17px;
  filter:grayscale(1) brightness(1.5);
}
.menu-ico.cyan{ background:rgba(var(--p-up-rgb),.12); border-color:rgba(var(--p-up-rgb),.35); }
.menu-ico.blue{ background:rgba(var(--p-info-rgb),.12); border-color:rgba(var(--p-info-rgb),.35); }
.menu-ico.red{ background:rgba(var(--p-down-rgb),.12); border-color:rgba(var(--p-down-rgb),.35); }
.menu-ico.purple{ background:rgba(var(--p-gold-rgb),.12); border-color:rgba(var(--p-gold-rgb),.35); }
.menu-text b{ font-family:var(--p-serif); font-size:15px; letter-spacing:.1em; font-weight:600; }
.menu-text small{ font-size:11px; }
.menu-arrow{ color:var(--p-muted); }

/* ---------- 21. 底部：深色导轨 ---------- */
.bottom-nav{
  gap:4px;
  background:linear-gradient(180deg, rgba(18,21,26,.95), rgba(9,10,12,.995));
  border-top:1px solid var(--p-line-2);
  box-shadow:0 -16px 34px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}
.nav-btn{
  height:52px; border-radius:var(--p-r-sm);
  color:#767e8c;
  font-family:var(--p-mono); font-size:10px; letter-spacing:.14em;
}
.nav-btn .ico{ font-size:18px; filter:grayscale(1) brightness(1.35); }
.nav-btn.active{
  color:var(--p-gold-2); background:transparent;
  box-shadow:inset 0 -2px 0 rgba(var(--p-gold-rgb),.9);
}
.nav-btn.active .ico{ filter:sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.15); transform:none; }

/* ---------- 22. 悬浮运行键：铜印 ---------- */
.fab{
  width:196px; height:50px; border-radius:var(--p-r-sm);
  background:linear-gradient(180deg, var(--p-gold-2), var(--p-gold));
  border:1px solid var(--p-gold-3);
  color:#1a1408;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 14px 30px rgba(0,0,0,.5);
  font-family:var(--p-mono); font-weight:700; font-size:14px; letter-spacing:.16em;
}
.fab.stop{
  background:linear-gradient(180deg,#e6685f,#b23a34);
  border-color:#8c2b26; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px rgba(120,30,26,.45);
}

/* ---------- 23. 弹窗 ---------- */
.overlay{ background:rgba(4,5,7,.68); backdrop-filter:blur(7px) saturate(.9); }
.sheet{
  padding:22px 20px 20px; border-radius:4px;
  border:1px solid rgba(var(--p-gold-rgb),.35);
  box-shadow:0 32px 80px rgba(0,0,0,.62);
}
.sheet-head h2{ font-family:var(--p-serif); letter-spacing:.12em; }
.sheet-head p{ font-size:11.5px; line-height:1.75; }
.close{
  width:30px; height:30px; border-radius:var(--p-r-sm);
  background:var(--p-fill); border:1px solid var(--p-line-2);
  color:var(--p-text-2); font-family:var(--p-mono);
}
.verify-box{
  border-radius:var(--p-r-sm); background:var(--p-fill);
  border:1px solid var(--p-line); border-left:2px solid rgba(var(--p-gold-rgb),.6);
}
.verify-box strong{ font-family:var(--p-mono); font-variant-numeric:tabular-nums; color:var(--p-gold-2); }
.verify-box small{ font-family:var(--p-mono); font-size:10px; letter-spacing:.08em; }
.steps{ gap:6px; }
.step{
  border-radius:var(--p-r-sm); background:var(--p-fill);
  border:1px solid var(--p-line); color:var(--p-muted);
}
.step.current{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.24), rgba(var(--p-gold-rgb),.08));
  border-color:rgba(var(--p-gold-rgb),.6); color:var(--p-gold-2);
}
.step b{ font-family:var(--p-mono); }
.hint, .hint-text{ font-size:11px; line-height:1.75; }
.token-link{
  color:var(--p-gold); font-family:var(--p-mono); font-size:12px;
  text-decoration:none; border-bottom:1px dashed rgba(var(--p-gold-rgb),.55);
  padding-bottom:1px;
}
.group-qr, .group-empty{
  border-radius:var(--p-r-sm);
  background:var(--p-fill); border:1px solid var(--p-line);
}
.group-empty{ border-style:dashed; border-color:var(--p-line-2); }
.toast{
  border-radius:var(--p-r-sm);
  background:linear-gradient(180deg,#1d2128,#0d1014);
  border:1px solid rgba(var(--p-gold-rgb),.5);
  color:var(--p-gold-2);
  font-family:var(--p-mono); font-size:11px; letter-spacing:.06em;
  box-shadow:0 14px 34px rgba(0,0,0,.6);
}

/* ---------- 24. emoji 单色化（JS 把文字里的 emoji 包成 .p-emo） ---------- */
.p-emo{
  display:inline-block; vertical-align:baseline;
  filter:grayscale(1) brightness(1.45) contrast(1.05);
}

/* ---------- 25. 票根（浅色）专属微调：单色图标要压深才看得见 ---------- */
html[data-skin="light"] .act .emo,
html[data-skin="light"] .p-emo,
html[data-skin="light"] .menu-ico,
html[data-skin="light"] .gb-ico,
html[data-skin="light"] .disclaimer .ico,
html[data-skin="light"] .login-prompt .reaper{
  filter:grayscale(1) brightness(.58) contrast(1.15);
}
html[data-skin="light"] .menu-item-row:active{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.1), var(--p-panel-2));
}
html[data-skin="light"] .kill-title{
  background:linear-gradient(180deg,#33291a,#1e180e);
  border-color:rgba(var(--p-gold-rgb),.6);
}

/* ---------- 25. 平台层：大厅 / 平台卡 / 建设中 ---------- */
/* 返回平台大厅 */
.back-hub{
  flex-shrink:0; width:30px; height:30px; margin-right:1px;
  border-radius:var(--p-r-sm);
  border:1px solid rgba(var(--p-gold-rgb),.45);
  background:rgba(var(--p-gold-rgb),.08);
  color:var(--p-gold-2); font-family:var(--p-mono); font-size:14px; line-height:1;
}
.back-hub:active{ background:rgba(var(--p-gold-rgb),.22); }
/* 品牌图标改为平台代号字（衬线金字），比 emoji 更像铭牌 */
.brand-icon.mark{
  filter:none;
  font-family:var(--p-serif); font-size:18px; font-weight:600;
  color:var(--p-gold-2);
}
.topbar.hub-mode .switcher{ display:none; }

/* 大厅头部铭牌 */
.hub-hero{
  position:relative; margin-top:14px; padding:18px 16px 16px;
  border:1px solid rgba(var(--p-gold-rgb),.32); border-radius:var(--p-r);
  background:
    linear-gradient(180deg, rgba(var(--p-gold-rgb),.09), transparent 62%),
    linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
}
.hub-hero::after{
  content:""; position:absolute; top:-1px; right:-1px; width:15px; height:15px;
  border-top:1px solid rgba(var(--p-gold-rgb),.75);
  border-right:1px solid rgba(var(--p-gold-rgb),.75);
}
.hub-hero h1{
  margin:0; font-family:var(--p-serif); font-size:22px; font-weight:600;
  letter-spacing:.18em; color:var(--p-text);
}
.hub-hero p{ margin:9px 0 0; font-size:11.5px; line-height:1.85; color:var(--p-muted); }
.hub-stamps{ display:flex; flex-wrap:wrap; gap:6px 15px; margin-top:13px; }
.hub-stamp{
  display:inline-flex; align-items:center; gap:5px;
  padding:0; border:0; background:transparent;
  color:var(--p-muted); font-family:var(--p-mono); font-size:10px; letter-spacing:.08em;
}
.hub-stamp::before{ content:""; width:5px; height:5px; border-radius:1px; background:currentColor; }
.hub-stamp.on{ color:var(--p-up); }
.hub-stamp.on::before{ box-shadow:0 0 7px rgba(var(--p-up-rgb),.75); }
.hub-stamp.warn{ color:var(--p-warn); }

/* 平台卡 */
.platform-list{ display:grid; gap:10px; }
.platform-card{
  position:relative; width:100%; display:block; text-align:left;
  padding:14px 14px 13px;
  border:1px solid var(--p-line); border-radius:var(--p-r);
  background:linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
}
.platform-card.ready{ border-color:rgba(var(--p-gold-rgb),.42); }
/* 未开放平台不再整卡压暗 —— 那会把里面的按钮一起压成"禁用脸"。
   只压暗说明性文字，操作按钮保持正常亮度。 */
.platform-card.soon .pf-mark,
.platform-card.soon .pf-name,
.platform-card.soon .pf-desc,
.platform-card.soon .pf-kv{ opacity:.76; }
.platform-card:active{
  transform:translateY(1px) scale(.995);
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.11), var(--p-panel));
}
@media (hover:hover){
  .platform-card:hover{
    border-color:rgba(var(--p-gold-rgb),.6);
    background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.08), var(--p-panel));
  }
}
.pf-top{ display:flex; align-items:center; gap:11px; }
.pf-mark{
  flex-shrink:0; width:42px; height:42px; display:grid; place-items:center;
  border-radius:var(--p-r-sm);
  border:1px solid rgba(var(--p-gold-rgb),.45); background:rgba(var(--p-gold-rgb),.09);
  color:var(--p-gold-2); font-family:var(--p-serif); font-size:19px; font-weight:600;
}
.platform-card.soon .pf-mark{ border-color:var(--p-line-2); background:var(--p-fill); color:var(--p-muted); }
.pf-title{ min-width:0; }
.pf-name{ display:block; font-family:var(--p-serif); font-size:16px; font-weight:600; letter-spacing:.12em; color:var(--p-text); }
.pf-line{ display:block; margin-top:4px; font-size:10px; color:var(--p-muted); font-family:var(--p-mono); letter-spacing:.04em; }
/* 状态 ≠ 按钮：状态用「色点 + 文字」，不带边框，不参与点击暗示 */
.pf-state{
  margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  border:0; background:transparent; padding:0; white-space:nowrap;
  font-family:var(--p-mono); font-size:9.5px; letter-spacing:.14em; font-weight:600;
}
.pf-state::before{ content:""; width:6px; height:6px; border-radius:1px; background:currentColor; }
.pf-state.ready{ color:var(--p-up); }
.pf-state.ready::before{ box-shadow:0 0 8px rgba(var(--p-up-rgb),.8); }
.pf-state.soon{ color:var(--p-muted); }
.pf-desc{ display:block; margin:11px 0 0; font-size:11.5px; line-height:1.7; color:var(--p-text-2); }
.pf-foot{
  margin-top:12px; padding-top:11px; border-top:1px dashed var(--p-line-2);
  display:flex; align-items:center; gap:10px;
}
.pf-kv{ font-family:var(--p-mono); font-size:10px; color:var(--p-muted); }
.pf-kv b{ color:var(--p-text-2); font-weight:500; }
/* 平台卡的操作按钮：做成"有厚度"的实体键，一眼能点 */
.pf-go{
  margin-left:auto; flex-shrink:0;
  min-width:88px; height:34px; padding:0 13px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--p-r-sm);
  font-family:var(--p-mono); font-size:11.5px; letter-spacing:.1em;
}
.platform-card.ready .pf-go{
  background:linear-gradient(180deg, var(--p-gold-2), var(--p-gold));
  border:1px solid var(--p-gold-3); color:#1a1408; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 rgba(var(--p-gold-rgb),.35), 0 8px 16px rgba(0,0,0,.28);
}
.platform-card.ready:active .pf-go{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(var(--p-gold-rgb),.35);
}
/* 未开放平台：改描边金 + 淡金底（明确"可点"），不再是灰色死键 */
.platform-card.soon .pf-go{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.16), rgba(var(--p-gold-rgb),.05));
  border:1px solid rgba(var(--p-gold-rgb),.5);
  color:var(--p-gold-2); font-weight:600;
}
.platform-card.soon:active .pf-go{ background:rgba(var(--p-gold-rgb),.24); }
@media (hover:hover){
  .pf-go:hover{ filter:brightness(1.07); }
}

.hub-note{
  margin-top:18px; padding-top:13px; border-top:1px dashed var(--p-line-2);
  font-size:10.5px; line-height:1.9; color:var(--p-muted);
}

/* 建设中面板 */
.build-panel{
  margin-top:14px; padding:20px 16px 18px;
  border:1px solid rgba(var(--p-gold-rgb),.3); border-radius:var(--p-r);
  background:
    repeating-linear-gradient(135deg, rgba(var(--p-gold-rgb),.05) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--p-panel-2), var(--p-panel));
}
.build-panel h2{ margin:0; font-family:var(--p-serif); font-size:19px; letter-spacing:.16em; color:var(--p-text); }
.build-panel .bp-tag{
  display:inline-block; margin-left:8px; padding:3px 8px; vertical-align:middle;
  border:1px solid rgba(var(--p-warn-rgb),.5); background:rgba(var(--p-warn-rgb),.08);
  color:var(--p-warn); border-radius:var(--p-r-sm);
  font-family:var(--p-mono); font-size:9.5px; letter-spacing:.14em;
}
.build-panel p{ margin:12px 0 0; font-size:12px; line-height:1.9; color:var(--p-text-2); }
.build-list{ margin-top:15px; display:grid; gap:7px; }
.build-item{
  display:flex; align-items:center; gap:9px; padding:10px 12px;
  border:1px dashed var(--p-line-2); border-radius:var(--p-r-sm);
  font-size:11.5px; color:var(--p-muted); background:var(--p-fill);
}
.build-item b{ color:var(--p-text-2); font-weight:500; }
.build-item .dot-s{ flex-shrink:0; width:6px; height:6px; border-radius:1px; background:var(--p-line-2); }
.build-actions{ margin-top:16px; display:grid; gap:8px; }

/* ---------- 26. 可点性（affordance）：信息 / 次操作 / 主操作 三级分明 ----------
   旧问题：状态标签和按钮都是"细描边 + 透明底"，长得一样 → 分不清哪个能点。
   规则：信息 = 无色点文字；次操作 = 淡金填充 + 金边；主操作 = 实心金 + 厚度。
   注意 button:active 的特异性要低于 .act:active / .fab:active 等，避免盖掉它们自己的动画。 */
button{ transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
button:active{ transform:translateY(1px); }
button[disabled]:active{ transform:none; }

.secondary{
  background:linear-gradient(180deg, rgba(var(--p-gold-rgb),.16), rgba(var(--p-gold-rgb),.06));
  border:1px solid rgba(var(--p-gold-rgb),.42);
  color:var(--p-gold-2);
}
.secondary:active{ background:rgba(var(--p-gold-rgb),.24); }
.chip{ background:var(--p-fill); }

@media (hover:hover){
  .chip:hover, .subtab:hover{ border-color:rgba(var(--p-gold-rgb),.5); color:var(--p-gold-2); }
  .secondary:hover{ border-color:rgba(var(--p-gold-rgb),.65); }
  .back-hub:hover, .skin-toggle:hover, .switcher:hover, .trend-refresh:hover{
    background:rgba(var(--p-gold-rgb),.18); color:var(--p-gold-2);
  }
  .setting-action:hover, .link-button:hover{ color:var(--p-gold-2); border-bottom-color:var(--p-gold-2); }
}
.subtab:active, .chip:active, .setting-action:active, .link-button:active{ opacity:.62; }

/* 票根（浅色）下金色实心按钮改近白字：深金字压在深金底上只有约 3.6:1，偏糊 */
html[data-skin="light"] .primary,
html[data-skin="light"] .fab,
html[data-skin="light"] .platform-card.ready .pf-go{ color:#fdfaf1; }

/* ---------- 27. 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}