/* ===================================================================
   base.css — 设计令牌 (Design Tokens) + Reset
   TradingSkill dApp · Matrix Cyberpunk 主题
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- 背景（中性炭黑，去绿味）---- */
  --bg:   #0c0e10;
  --bg2:  #121417;
  --bg3:  #16191d;
  --bg4:  #1c2025;

  /* ---- 边框（中性低对比）---- */
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.16);

  /* ---- 主强调色（克制的祖母绿，仅关键处使用）---- */
  --accent:      #29c07e;
  --accent2:     #21a86c;
  --accent-glow: rgba(41, 192, 126, 0.14);
  --accent-dim:  rgba(41, 192, 126, 0.06);

  /* ---- 语义色 ---- */
  --green:  #29c07e;
  --red:    #e5577a;
  --blue:   #5b8def;
  --orange: #e8954a;
  --gold:   #e0b341;
  --purple: #9a86e0;

  /* ---- 文本（中性灰白）---- */
  --text:  #eceef1;
  --text2: rgba(236, 238, 241, 0.52);
  --text3: rgba(236, 238, 241, 0.30);
  --gray:  rgba(236, 238, 241, 0.40);

  /* ---- 安全区（iPhone 刘海/底栏）---- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ---- 布局尺寸 ---- */
  --header-h: 52px;
  --nav-h:    60px;
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 18px;
  --tap-min:   44px;   /* 触控最小点击区 */

  /* ---- 移动端框宽（桌面宽屏下居中显示为手机框）---- */
  --app-w: 480px;

  /* ---- 间距标尺 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
}

/* ===== BASE ===== */
html {
  height: 100%;
  overflow: hidden;       /* 阻止 iOS 弹性回弹 */
  position: fixed;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  background: #000;          /* 框外底色（宽屏留边）*/
  color: var(--text);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;                /* 整体偏细 */
  line-height: 1.55;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;       /* 细字更清晰 */
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  position: fixed;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

/* ===== 全局溢出防护 =====
   SVG 图表/长文本在 grid·flex 子项中易撑破布局，统一兜底。 */
svg { max-width: 100%; display: block; }
.app-main { width: 100%; max-width: 100%; overflow-x: hidden; }
.card { max-width: 100%; overflow: hidden; }
/* 图表容器负 margin 归零，避免横向溢出 */
.quant-chart, .node-spark, .signal-spark, .escrow-trend, .ti-trend,
.quant-bars { margin-left: 0 !important; margin-right: 0 !important; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ===== 等宽数字（金额对齐）===== */
.mono, .tnum {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
}

/* ===== 字重统一调细 =====
   设计稿字体偏纤细：标题用 600（原 800/900），正文 300，弱化文字 400。
   全局兜底降一档，避免各页面散落的 800/900 过粗。 */
h1, .page-title, .hero-title { font-weight: 600; }
h2, h3, .section-title { font-weight: 500; }
b, strong { font-weight: 600; }

/* ===== 通用工具类 ===== */
.green { color: var(--accent) !important; }
.red   { color: var(--red) !important; }
.muted { color: var(--text2); }
.glow  {  }
.t-up  { color: var(--accent); }
.t-dn  { color: var(--red); }

/* 取消 300ms 点击延迟 */
a, button, [onclick], .nav-item, .menu-item, .lang-item,
.btn, .tab, .cta-btn { touch-action: manipulation; }