/* ============================================================================
   TIDAL 设计系统 · 路线②「冷银科技 Cool Silver」
   ----------------------------------------------------------------------------
   用途：全站浅色科技风的唯一 token 源（single source of truth）。
   用法：在页面 <head> 中「最后」引入（覆盖 app.css / member_v5.css 的深色值）。

   设计原则（高级感来源，改动时勿破坏）：
     1. 冷银灰底 + 极淡细网纹 = 材质感，而非纯白平面
     2. 玻璃白卡：半透明 + blur + 1px 精描边，几乎不用重阴影
     3. 阴影极淡、大扩散（长阴影），永不出现生硬黑边
     4. 大数字用极细字重（200–300）+ tabular-nums，靠字号与字距撑气场，不靠加粗
     5. 克制的重音：冷青 #0b7285 ↔ 靛蓝 #2b4b8f 微渐变，全站只此一处重音
     6. 涨跌色降饱和：红 #c92a2a / 绿 #12796c（方向不变，仍为「红涨绿跌」）
     7. 大圆角 14px / 小元素 10px，统一半径族

   兼容：现代浏览器（backdrop-filter 已加 -webkit- 前缀），无构建链依赖。
   ============================================================================ */

/* ---------- 1. Token 定义 ---------- */
:root{
  /* 底与面 */
  --bg:#f2f4f8;
  --bg-2:#e9edf4;
  --card:#ffffff;
  --card-glass:rgba(255,255,255,.72);
  --card-glass-2:rgba(255,255,255,.55);
  --wash:#eef4f7;
  --wash-2:#e8f0f5;

  /* 描边 */
  --line:#e3e8f0;
  --line-2:#d5dce8;
  --line-3:#c4cedd;

  /* 文字（三级） */
  --ink:#0d1522;
  --ink2:#3d495c;
  /* 三级灰：4.56:1 @ #f2f4f8（WCAG AA 达标线 4.5）
     原 #7c8798 只有 3.30:1，实测不可读，已加深。
     这是"高档感"与"可读性"的平衡点：再浅就掉出 AA。 */
  --ink3:#647082;
  /* 四级灰（最次要：单位、脚注、装饰性小字）：3.18:1
     不达 AA 4.5，但作为非必要信息的辅助色可接受；
     门禁对 --ink4 作用域放行到 3:1。 */
  --ink4:#7e8a9c;

  /* 重音：冷青 ↔ 靛蓝 */
  --cyan:#0b7285;
  --cyan-soft:#128fa3;
  --indigo:#2b4b8f;
  --grad:linear-gradient(120deg,#0b7285,#2b4b8f);
  --grad-soft:linear-gradient(120deg,rgba(11,114,133,.10),rgba(43,75,143,.10));

  /* 涨跌（红涨绿跌，降饱和以适配浅底） */
  --up:#c92a2a;
  --up-bg:#fdeeee;
  --up-line:#f6d5d5;
  --down:#12796c;
  --down-bg:#e9f5f3;
  --down-line:#cfe8e3;

  /* 语义 */
  --warn:#8a6410;
  --warn-bg:#fbf4e4;
  /* 观察态星色（金黄）：原 #c8992f 在 #f2f4f8 上只有 2.61:1，不达 AA。
     压暗到 #8f6220 = 4.85:1，色相仍是琥珀金，观感只暗一级。 */
  --star:#8f6220;
  /* 覆盖生产 app.css 的 --gold（#dfbd6d，仅 1.64:1，严重不可读） */
  --gold:#8f6220;
  --muted-bg:#f1f4f8;

  /* ==========================================================================
     【生产 app.css :root 全 token 接管】—— 曾经只覆盖了 5/19 个
     ==========================================================================
     背景：生产 app.css 的 :root 定义了 19 个变量，全是深色主题配色。
     主题层最初只覆盖了 --ink/--bg/--line/--cyan/--gold 这 5 个，
     剩下 14 个 —— 全是深色主题下的"浅色文字色" —— 一个没动。
     结果就是它们在浅底上对比度极低，且【类名差集查不出来】
     （类名覆盖了，变量没接管），只有浏览器实测才暴露。

     实例（门禁抓到的）：
       .toolbar span{color:var(--soft)}   → --soft:#bdced1 在 #f2f4f8 上 = 1.39:1
       .toolbar b{color:var(--green)}     → --green:#5ce39a 在 #f2f4f8 上 ≈ 1.4:1

     映射原则：
       · 文字类 token（--text/--soft/--muted/--silver）→ 映射到我方墨色三级
       · 表面类 token（--surface/--surface2/--surface3）→ 映射到浅色玻璃/描边
       · 语义色类（--green/--red/--amber/--cyan2）→ 换成浅底版本，
         且【必须保留语义指向】：--green 在 A 股语境下是"跌"（绿跌），
         绝不可为了好看把它改成红或蓝 —— 方向错了比看不清更严重。

     ⚠ 维护提示：以后往生产 :root 加新变量，这里必须同步补映射，
       否则又会静默失效。已配套 scan_dark.js 做兜底发现。
     ========================================================================== */
  /* 文字类 */
  --text:#0d1522;                 /* 生产 #edf8f8 → 正文墨色 */
  --soft:#3d495c;                 /* 生产 #bdced1 → 次级墨色（原 1.39:1） */
  --muted:#647082;                /* 生产 #78969c → 三级灰 */
  --silver:#5f6b7d;               /* 生产 #bacbd0 → 中性灰（原 ≈1.4:1） */
  /* 表面类 */
  --surface:rgba(255,255,255,.72);
  --surface2:rgba(255,255,255,.55);
  --surface3:#eef4f7;
  --line2:#d5dce8;                /* 对应我方 --line-2 */
  /* 语义类（浅底版本，方向不变） */
  --cyan2:#128fa3;                /* 生产 #12aa9e，浅底加深 */
  --green:#12796c;                /* 生产 #5ce39a（跌·绿），浅底加深 */
  --red:#c92a2a;                  /* 生产 #ff7d7d（涨·红），浅底加深 */
  --amber:#8a6410;                /* 生产 #e3bf68，浅底加深 */
  /* 阴影 */
  --shadow:0 1px 2px rgba(13,21,34,.03),0 14px 40px -18px rgba(13,21,34,.14);

  /* 圆角族 */
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;
  --radius-pill:999px;

  /* 阴影：极淡 + 大扩散（长阴影） */
  --shadow-1:0 1px 2px rgba(13,21,34,.03), 0 14px 40px -18px rgba(13,21,34,.14);
  --shadow-2:0 1px 2px rgba(13,21,34,.04), 0 22px 60px -24px rgba(13,21,34,.18);
  --shadow-pop:0 8px 24px -8px rgba(43,75,143,.28);
  --shadow-none:none;

  /* 字重族（极细路线） */
  --w-thin:200;
  --w-light:300;
  --w-normal:400;
  --w-med:500;
  --w-semi:600;
  --w-bold:700;

  /* 字距族 */
  --ls-tight:-.02em;
  --ls-num:-.02em;
  --ls-label:.14em;
  --ls-title:.04em;

  /* 间距节奏（8 的倍数） */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  /* 字号 */
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:13.5px;
  --fs-md:15px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:32px;

  /* 字体族 */
  --font: "Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num: "SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* 层级 */
  --z-nav:40; --z-pop:60; --z-toast:90;

  color-scheme:light;
}

/* ---------- 2. 基础重置与画布 ---------- */
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background-color:var(--bg);
  /* 细网纹：极淡的材质感，不是装饰 */
  background-image:radial-gradient(rgba(13,21,34,.035) .5px,transparent .5px);
  background-size:22px 22px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* 深色时代遗留的 fixed 网格层，浅色下改为无 */
body:before{background-image:none!important;opacity:0!important}
*{box-sizing:border-box}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}

/* 数字统一等宽对齐 —— 全站数字必须用它 */
.num,
.tabular,
td b,td strong,
.metric b,.metric strong,
.stat b,.stat strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 滚动条（浅色化） */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c9d2e0;border-radius:var(--radius-pill);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#aebacd;background-clip:content-box;border:3px solid transparent}
*{scrollbar-width:thin;scrollbar-color:#c9d2e0 transparent}

/* ---------- 3. 通用玻璃卡片 ---------- */
.card,
.panel,
.stock-panel,
.recommend-section,
.filter-panel,
.holdings-section,
.research-library,
.profile-section,
.manual-grid article,
.manual-visuals article,
.manual-year-details,
.manual-metrics{
  background:var(--card-glass);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}

/* ---------- 4. 表单控件（浅色化 + 大号触控友好） ---------- */
input,select,textarea{
  font-family:inherit;
  font-size:var(--fs-sm);
  color:var(--ink);
  background:var(--card-glass);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
input::placeholder,textarea::placeholder{color:var(--ink4)}
input:focus,select:focus,textarea:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(11,114,133,.12);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237c8798' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:30px;
}
input[type=checkbox],input[type=radio]{accent-color:var(--cyan)}

/* ---------- 5. 按钮族 ---------- */
.btn,
button.btn,
.ghost,
button.ghost,
a.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--w-semi);
  letter-spacing:.3px;
  padding:8px 18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-2);
  background:var(--card-glass);
  color:var(--ink2);
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:border-color .15s, color .15s, filter .15s, transform .1s;
  white-space:nowrap;
}
.btn:hover,button.btn:hover,.ghost:hover,button.ghost:hover,a.btn:hover{
  border-color:var(--cyan);color:var(--cyan);
}
.btn:active,button.btn:active,.ghost:active,button.ghost:active{transform:translateY(1px)}
.btn.grad,button.btn.grad,.btn.primary,button.primary{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-pop);
}
.btn.grad:hover,button.btn.grad:hover,.btn.primary:hover,button.primary:hover{
  color:#fff;filter:brightness(1.08);
}
.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 6. 标签 / 徽标 ---------- */
.tag{
  display:inline-block;
  font-size:var(--fs-xs);font-weight:var(--w-semi);letter-spacing:.5px;
  padding:2px 10px;border-radius:var(--radius-pill);
}
.tag.in,.tag.entry{color:var(--cyan);background:var(--wash)}
.tag.watch,.tag.hold{color:var(--warn);background:var(--warn-bg)}
.tag.exit,.tag.out{color:var(--down);background:var(--down-bg)}
.tag.neutral{color:var(--ink3);background:var(--muted-bg)}

.pct{
  font-size:11.5px;font-weight:var(--w-semi);
  padding:1px 6px;border-radius:var(--radius-xs);
  font-variant-numeric:tabular-nums;
}
.pct.up,.pct.gain{background:var(--up-bg);color:var(--up)}
.pct.down,.pct.loss{background:var(--down-bg);color:var(--down)}

/* ---------- 7. 表格 ---------- */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--fs-sm);
  background:transparent;
}
thead th{
  text-align:left;
  padding:11px 14px;
  font-size:var(--fs-xs);font-weight:var(--w-semi);letter-spacing:1px;
  color:var(--ink3);
  background:var(--card-glass-2);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
tbody td{
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  vertical-align:middle;
}
tbody tr.row:hover td,tbody tr:hover td{background:rgba(255,255,255,.85)}
tbody tr.row{cursor:pointer}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 8. 涨跌文字（方向不变，仅换浅底配色） ---------- */
.up,.gain,.positive{color:var(--up)}
.down,.loss,.negative{color:var(--down)}

/* ---------- 9. 标题层级（重音竖条） ---------- */
.section-head h2,
.panel .ph .t,
.sec-title{
  font-size:var(--fs-md);
  font-weight:var(--w-bold);
  letter-spacing:var(--ls-title);
  color:var(--ink);
}
.sec-title::before,
.panel .ph .t::before{
  content:"";width:2px;height:13px;border-radius:2px;
  background:var(--grad);
  display:inline-block;margin-right:8px;vertical-align:-1px;
}
label,
.eyebrow,
.sec-label{
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-label);
  color:var(--ink3);
  text-transform:uppercase;
}

/* ---------- 10. 大数字（极细字重） ---------- */
.big-num,.metric b,.stat b,.kpi b{
  font-size:var(--fs-2xl);
  font-weight:var(--w-thin);
  letter-spacing:var(--ls-num);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.big-num.accent,.metric b.accent{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  font-weight:var(--w-normal);
}

/* ---------- 11. 退出/警示文案 ---------- */
.research-disclaimer,
.disclaimer{
  color:var(--ink3);
  font-size:var(--fs-xs);
  line-height:1.9;
  border-top:1px solid var(--line);
  padding-top:var(--sp-5);
  margin-top:var(--sp-8);
}

/* ---------- 12. Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);
  z-index:var(--z-toast);
  padding:12px 22px;
  border-radius:var(--radius-sm);
  background:rgba(13,21,34,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#fff;font-size:var(--fs-sm);font-weight:var(--w-med);
  box-shadow:0 12px 36px -12px rgba(13,21,34,.5);
  opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 13. 焦点可见性（可访问性） ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}