/* ==========================================================================
   tokens.css —— 由 ops/design/tokens.json 自动生成
   版本 2.0.0 · 校验 2026-11-15
   DO NOT EDIT：改视觉先改 tokens.json，再重跑 gen_css.py
   视觉真相：甲方 11-13 定版七图 + panorama/index.html 现行 :root
   ========================================================================== */

:root{
  /* —— 品牌色 —— */
  --brand: #004898;
  --brand2: #008cd4;
  --brandsoft: #e8f2fc;
  --brandlight: #3b8ef5;
  /* —— 强调色（深调给文字，亮调给图示）—— */
  --teal: #0d7f78;
  --tealbright: #17BFA6;
  --tealsoft: #ddf3f1;
  /* —— 文字 —— */
  --ink: #16202e;
  --ink2: #4d5a6b;
  --ink3: #7b8798;
  /* —— 底与线 —— */
  --bg: #f5f7fa;
  --card: #ffffff;
  --line: #e3e9f0;
  --line2: #cbd5e1;
  /* —— 语义色（底纹 + 深字，不用实色块）—— */
  --ok: #15803d;  --oksoft: #e7f5ec;
  --warn: #b45309;  --warnsoft: #fdf3e3;
  --danger: #b3261e;  --dangersoft: #fdecea;
  --violet: #5b3fa8;  --violetsoft: #efeafb;

  /* —— 渐变 —— */
  --grad-primary: linear-gradient(135deg, #004898 0%, #008cd4 100%);
  --grad-accent: linear-gradient(90deg, #008cd4 0%, #17BFA6 100%);
  --grad-cta: linear-gradient(90deg, #004898 0%, #008cd4 48%, #17BFA6 100%);

  /* —— 形状 —— */
  --r_card: 14px;
  --r_btn: 10px;
  --r_modal: 16px;
  --r_pill: 999px;
  --r_img: 16px;
  --r_panel: 22px;
  --r_phone: 34px;
  --r: var(--r_card);

  /* —— 投影 —— */
  --shadow-card: 0 1px 2px rgba(16,32,52,.06), 0 8px 24px -12px rgba(16,32,52,.16);
  --shadow-float: 0 4px 12px rgba(16,32,52,.08), 0 20px 48px -16px rgba(16,32,52,.24);
  --shadow-panel: 0 2px 6px rgba(16,32,52,.05), 0 24px 60px -20px rgba(16,32,52,.20), 0 0 0 1px rgba(255,255,255,.9) inset;
  --shadow: var(--shadow-card);

  /* —— 字体 —— */
  --font: 'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-page_title: 15px;
  --fs-card_title: 14px;
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-tiny: 11px;
  --fs-table_head: 11px;
  --fs-num_hero: 22px;
  --lh-body: 1.65;
  --lh-title: 1.35;

  /* —— 间距 —— */
  --pad-page_pad_pc: 24px 32px;
  --pad-page_pad_mobile: 16px;
  --pad-gap: 12px;
  --pad-gutter: 24px;

  /* —— 海报层：七图统一的几何背景语言 —— */
  --poster-bg: linear-gradient(135deg,#f7fbff 0%,#eef6fd 45%,#f3fbf9 100%);
  --poster-band_left: linear-gradient(120deg, rgba(23,191,166,.85) 0%, rgba(0,140,212,.55) 60%, rgba(0,72,152,.25) 100%);
  --poster-band_right: linear-gradient(215deg, #004898 0%, #008cd4 45%, rgba(23,191,166,.65) 100%);
  --poster-arc: repeating-radial-gradient(circle at 12% 8%, transparent 0 44px, rgba(0,140,212,.10) 44px 45px);

  /* —— 版式骨架 —— */
  --lay-brand_head_h: 96px;
  --lay-panel_max_w: 1280px;
  --lay-side_w: 240px;
  --lay-right_w: 320px;
  --lay-phone_w: 272px;
  --lay-phone_h: 560px;
  --lay-tabbar_h: 56px;
  --lay-tab_items: 首页 / 问答 / 合同 / 我的;

  /* —— 动效 —— */
  --t-fast: 150ms ease;
  --t-base: 220ms cubic-bezier(.4,0,.2,1);
}

/* —— 基础重置 —— */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;line-height:var(--lh-title);font-weight:800;letter-spacing:-.01em}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* —— 数字等宽：金额/面积/件数一律用此类 —— */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* —— 页面底色晕染（跑道/球场剪影 ≤8% 透明度）—— */
.page-bg{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,140,212,.10), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(23,191,166,.08), transparent 55%),
    var(--bg);
  min-height:100vh;
}

/* —— 海报式几何背景：左下青绿斜带 / 右上蓝斜带 / 同心跑道弧线 —— */
/* 三处缺一就不像甲方定版图；透明度全部压在 12% 以内，不伤正文对比度 */
.poster-bg{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--poster-bg);min-height:100vh;
}
.poster-bg::before,.poster-bg::after{content:'';position:absolute;z-index:-1;pointer-events:none}
.poster-bg::before{
  /* 左下青绿→蓝斜切带：细长直边，不要大圆角椭圆（甲方图是斜切带不是圆球） */
  left:-24%;bottom:-30%;width:96%;height:46%;
  background:var(--poster-band_left);
  transform:rotate(-14deg);border-radius:0 12% 0 0;opacity:.42;
  filter:blur(2px);
}
.poster-bg::after{
  /* 右上蓝色斜切带 */
  right:-22%;top:-34%;width:76%;height:52%;
  background:var(--poster-band_right);
  transform:rotate(18deg);border-radius:0 0 0 14%;opacity:.40;
  filter:blur(2px);
}
.poster-arc{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--poster-arc);opacity:.9;
}

/* —— 焦点可见（键盘可达）—— */
:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:4px}