/* =====================================================================
   HashKey Investor Dashboard — Design System
   HashKey Capital 投资人门户:私人银行式的沉稳、留白、可信。
   语义契约见 readme.md —— 四套系统:方向 / 资产 / 期次 / 折算。
   铁律:状态不许只靠颜色(涨跌必带 ▲▼- 符号);数字一律 tabular mono;
        折算值必带 ≈ 且弱于原生币种值;估值基准日常驻可见。
   ===================================================================== */

:root {
  /* ---- 表面 ---- */
  --surface-page:  #f4f5f8;   /* 页面底 */
  --surface-card:  #ffffff;   /* 卡片 */
  --surface-inset: #eef0f4;   /* 卡内嵌入区(表头、代码块) */
  --surface-navy:  #0c2340;   /* 品牌深藏青:桅头、hero 区 */
  --surface-navy-2:#143156;   /* 藏青上的浮起面 */

  /* ---- 墨色 ---- */
  --ink-1: #16212e;           /* 主文字 */
  --ink-2: #5a6573;           /* 次级 */
  --ink-3: #9aa3ae;           /* 弱化(小数、折算、脚注) */
  --ink-on-navy:   #f2f5f9;
  --ink-on-navy-2: #94a6be;

  /* ---- 品牌 ---- */
  --brand:       #0b4fc0;     /* 交互蓝:链接、按钮、焦点 */
  --brand-hover: #0a45a8;
  --brand-bg:    #edf2fc;
  --gold:        #a9812e;     /* 点缀金:字标缀线、累计收益强调。永不承载状态 */
  --gold-soft:   #f6efe0;

  /* ---- 方向(默认亚洲:红涨绿跌;[data-market-palette="western"] 反转) ---- */
  --dir-up:      #c0392f;  --dir-up-bg:   #fbf0ef;
  --dir-down:    #0f7f4b;  --dir-down-bg: #edf6f1;
  --dir-flat:    #8a94a0;  --dir-flat-bg: #f0f2f5;

  /* ---- 资产(徽章必带 $ / ₿ 符号,颜色只是辅助) ---- */
  --asset-usd: #41546e;  --asset-usd-bg: #edf1f6;
  --asset-btc: #b06a12;  --asset-btc-bg: #fdf3e4;

  /* ---- 结果/反馈(admin 侧) ---- */
  --ok:   #0f7f4b;  --ok-bg:   #edf6f1;
  --warn: #a15c00;  --warn-bg: #fdf4e2;
  --err:  #b3261e;  --err-bg:  #fbeeed;
  --info: #0b4fc0;  --info-bg: #edf2fc;

  /* ---- 线与影 ---- */
  --line-1: #e4e7ec;          /* 常规 hairline */
  --line-2: #d2d7de;          /* 强分隔 */
  --shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2: 0 10px 32px rgba(16,24,40,.14);   /* 仅弹层 */
  --focus: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--brand);

  /* ---- 字族 ---- */
  --font-sans: -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", serif;   /* 只用于字标与桅头 */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 一切数字与 id */

  /* ---- 字阶 ---- */
  --fs-hero:    38px;  /* 总资产 */
  --fs-kpi:     26px;  /* KPI 数字 */
  --fs-title:   18px;  /* 卡片标题 */
  --fs-body:    14px;
  --fs-sub:     13px;
  --fs-caption: 11px;  /* UPPERCASE 标签,tracked */

  /* ---- 间距(4 基,客户端留白比运维台宽裕) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- 圆角 ---- */
  --radius-card: 12px;
  --radius-ctl:  8px;
  --radius-chip: 999px;
}

[data-market-palette="western"] {
  --dir-up:   #0f7f4b;  --dir-up-bg:   #edf6f1;
  --dir-down: #c0392f;  --dir-down-bg: #fbf0ef;
}
/* 显式 asian 规则:让局部元素(如设置弹窗预览)能在页面为 western 时还原红涨绿跌 */
[data-market-palette="asian"] {
  --dir-up:   #c0392f;  --dir-up-bg:   #fbf0ef;
  --dir-down: #0f7f4b;  --dir-down-bg: #edf6f1;
}


[data-theme="dark"] {
  --surface-page:  #0e141c;
  --surface-card:  #161e29;
  --surface-inset: #1d2735;
  --surface-navy:  #0a1a30;
  --surface-navy-2:#12294a;
  --ink-1: #e8edf3;  --ink-2: #9fabbb;  --ink-3: #67727f;
  --brand: #5590f0;  --brand-hover: #6d9ff2;  --brand-bg: #17263e;
  --gold:  #c89a45;  --gold-soft: #2b2517;
  --dir-up-bg: #38201d;  --dir-down-bg: #14301f;  --dir-flat-bg: #202834;
  --asset-usd: #8fa5c2;  --asset-usd-bg: #1c2736;
  --asset-btc: #d99a4e;  --asset-btc-bg: #2d2314;
  --ok-bg: #14301f;  --warn-bg: #2e2410;  --err-bg: #331714;  --info-bg: #17263e;
  --line-1: #26303d;  --line-2: #34404e;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 32px rgba(0,0,0,.5);
}

/* ============================ 基础 ============================ */

.hk-base {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 数字:一律走这个类。tabular 保证列对齐,小数用 .dec 弱化 */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num .dec { color: var(--ink-3); }
.num .unit { color: var(--ink-2); font-size: 0.72em; margin-left: 0.35em; letter-spacing: 0.02em; }

/* 折算值:≈ 前缀,整体弱一档。原生币种值永远是主角 */
.approx { color: var(--ink-2); }
.approx::before { content: "≈ "; color: var(--ink-3); }

/* UPPERCASE 小标签 */
.caption {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  font-weight: 500;
}

/* ============================ 卡片 ============================ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5) 0;
}
.card-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.01em; }
.card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* ============================ 徽章 ============================ */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px;
  border-radius: var(--radius-chip);
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
}
.chip .sym { font-family: var(--font-mono); font-weight: 600; }
.chip-usd { color: var(--asset-usd); background: var(--asset-usd-bg); }
.chip-btc { color: var(--asset-btc); background: var(--asset-btc-bg); }
.chip-period { color: var(--ink-2); background: var(--surface-inset); font-family: var(--font-mono); }
.chip-ok   { color: var(--ok);   background: var(--ok-bg); }
.chip-warn { color: var(--warn); background: var(--warn-bg); }
.chip-err  { color: var(--err);  background: var(--err-bg); }
.chip-info { color: var(--info); background: var(--info-bg); }

/* 涨跌:必须由使用方在文字里带 ▲ ▼ - 符号,类只管颜色 */
.delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.delta.up   { color: var(--dir-up); }
.delta.down { color: var(--dir-down); }
.delta.flat { color: var(--dir-flat); }
.delta-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-chip); font-size: 12px; }
.delta-chip.up   { color: var(--dir-up);   background: var(--dir-up-bg); }
.delta-chip.down { color: var(--dir-down); background: var(--dir-down-bg); }
.delta-chip.flat { color: var(--dir-flat); background: var(--dir-flat-bg); }

/* ============================ KPI ============================ */

.kpi { display: flex; flex-direction: column; gap: var(--sp-1); }
.kpi .kpi-label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); }
.kpi .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-kpi); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.kpi .kpi-sub { font-size: var(--fs-sub); color: var(--ink-2); }

/* ============================ 表格 ============================ */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.tbl th {
  text-align: left; padding: 8px 12px;
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); font-weight: 500;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-inset);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-1); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .r, .tbl th.r { text-align: right; }
.tbl tbody tr:hover { background: var(--surface-inset); }

/* ============================ 按钮与表单 ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-ctl);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: transparent; color: var(--ink-1); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-inset); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-ctl);
  background: var(--surface-card);
  color: var(--ink-1);
  font-family: var(--font-sans); font-size: var(--fs-body);
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.input.mono { font-family: var(--font-mono); letter-spacing: 0.35em; text-align: center; }

/* ============================ 桅头 ============================ */

.masthead {
  background: var(--surface-navy);
  color: var(--ink-on-navy);
}
.masthead .fund-name {
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
}
.masthead .rule-gold { height: 2px; background: linear-gradient(90deg, var(--gold), transparent); border: none; margin: 0; }

/* ============================ 页脚免责 ============================ */

.disclaimer {
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================ 弹窗与 Toast ============================ */
/* scrim 是整个系统唯一使用 blur 的地方(readme:透明/blur 只给弹层) */

.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 12, 24, .55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--surface-card); color: var(--ink-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  width: 100%; max-width: 420px;
}
.modal-head { padding: 18px 20px 0; font-size: 16px; font-weight: 600; }
.modal-body { padding: 10px 20px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 20px 20px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 101;
  background: var(--surface-navy); color: var(--ink-on-navy);
  padding: 10px 18px; border-radius: var(--radius-ctl);
  font-size: 13px; box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity 150ms ease-out;
}
.toast.show { opacity: 1; }