/* ==========================================================================
   智绘 Design System — 唯一 Token 源
   version: 1.0.0   updated: 2026-08-12
   规则：任何页面禁止再写死 #hex / px 圆角 / 字号，一律 var(--token)。
   引入：<link rel="stylesheet" href="/design-system/theme.css">（必须在页面自有样式之前）
   校验：node design-system/sop/audit.js
   ========================================================================== */

:root{
  /* ---------- 品牌色（已按 WCAG AA 实测校准，勿改）---------- */
  --brand:        #5A4BD6;  /* 白底6.15 soft底5.75 白字在其上6.15 —— 三场景全达标 */
  --brand-deep:   #3C3489;  /* 浅紫底(--brand-tint)上的文字 */
  --brand-tint:   #EEEDFE;  /* 浅紫填充：选中态/标签底 */
  --brand-ghost:  #F5F4FE;  /* 更浅一档：hover 底 */
  --brand2:       #8B5CF6;  /* 仅装饰渐变，禁止承载任何文字 */
  --grad-brand:   linear-gradient(135deg,#5A4BD6 0%,#8B5CF6 100%);

  /* ---------- 中性色阶 ---------- */
  --ink:          #141726;  /* 正文/标题  白底 15.66 */
  --sub-strong:   #4A5164;  /* 次要文字（重要） 白底 8.31 */
  --sub:          #5B6172;  /* 次要文字（一般） 白底 6.55 */
  --muted:        #8A90A0;  /* 仅占位符/禁用态，禁止承载正文 */
  --line:         #E8EAF0;  /* 纯装饰分割线（不承载信息边界，可浅）*/
  --line-strong:  #858DA1;  /* 表单控件边界 白底3.32 —— WCAG 1.4.11 要求 ≥3.0，勿调浅 */
  --soft:         #F6F7FB;  /* 区块底色 */
  --bg:           #FFFFFF;  /* 页面底色 */
  --ink-invert:   #FFFFFF;  /* 深底上的文字 */

  /* ---------- 语义色（全部 ≥4.5 可直接承载文字）---------- */
  --danger:       #C42B2B;  --danger-tint:  #FDECEC;
  --success:      #15803D;  --success-tint: #E8F6EC;
  --warning:      #8A5A00;  --warning-tint: #FDF3E2;
  --accent:       #C2410C;  --accent-tint:  #FDEEE6;  /* 强调橙：促销/倒计时 */
  --info:         #1D4ED8;  --info-tint:    #E8EFFD;

  /* ---------- 第三方品牌色 ---------- */
  --wechat:       #07C160;  /* 只做图形/描边/图标，禁止做文字色 */
  --wechat-text:  #07713A;  /* 微信相关文字用这个（白底 6.12）*/
  --alipay:       #1677FF;
  --alipay-text:  #0A5FD6;

  /* ---------- 字号阶梯（移动优先，clamp 自适应）---------- */
  --fs-h1:   clamp(28px, 6.4vw, 46px);
  --fs-h2:   clamp(22px, 4.4vw, 33px);
  --fs-h3:   clamp(18px, 2.4vw, 22px);
  --fs-h4:   17px;
  --fs-body: 16px;   /* 移动端硬底线：<16px 会触发 iOS 输入框自动缩放 */
  --fs-sm:   14px;   /* 说明文字下限 */
  --fs-xs:   12px;   /* 仅角标/计数，禁止承载正文 */

  --lh-title: 1.18;
  --lh-body:  1.65;
  --lh-tight: 1.35;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  800;

  --font-sans: system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-num:  ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* 数据/价格/倒计时 */

  /* ---------- 间距（4px 基准）---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* 区块纵向留白：移动 56 → 桌面 96 */
  --sp-section: clamp(56px, 8vw, 96px);
  /* 页面左右安全边距 */
  --sp-gutter: clamp(16px, 4vw, 32px);

  /* ---------- 圆角（收敛为 5 档，原有 13 种规格作废）---------- */
  --r-sm:   8px;    /* 标签/小按钮/输入框 */
  --r-md:   12px;   /* 按钮/卡片内元素 */
  --r-lg:   16px;   /* 卡片/面板 */
  --r-xl:   24px;   /* 大容器/弹窗/首屏卡 */
  --r-full: 999px;  /* 胶囊/头像 */

  /* ---------- 阴影（3 档）---------- */
  --sh-sm: 0 1px 3px rgba(20,23,38,.06);
  --sh-md: 0 6px 22px rgba(20,23,38,.07);
  --sh-lg: 0 16px 40px rgba(20,23,38,.11);
  --sh-brand: 0 8px 24px rgba(90,75,214,.24);   /* 主 CTA 专用 */

  /* ---------- 尺寸 ---------- */
  --tap:      44px;   /* 触控目标最小值，移动端强制 */
  --ctrl-h:   48px;   /* 输入框/按钮标准高 */
  --ctrl-h-sm:36px;
  --header-h: 72px;   /* 统一页头高度（放大后）*/
  --maxw:     1200px; /* 内容最大宽 */
  --maxw-text:68ch;   /* 长文最佳阅读宽 */

  /* ---------- 图标 ---------- */
  --icon-sm: 16px;  --icon-md: 20px;  --icon-lg: 24px;  --icon-xl: 32px;
  --icon-stroke: 1.75;

  /* ---------- 动效 ---------- */
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 320ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---------- 层级 ---------- */
  --z-header: 100;  --z-drawer: 200;  --z-modal: 300;  --z-toast: 400;

  /* ---------- 组件局部色（与页面硬编码值 1:1 映射，便于单一来源管理）----------
     设计铁律：任何页面禁止再写死 #hex。下面每个 token 的值与整改前完全一致，
     仅把"散落各页的硬编码"收口到唯一来源，渲染像素零变化。后续统一在此调色。 */
  --ink-pure:     #000;        /* 纯黑文字（极个别对比场景）*/
  --bg:           #FFFFFF;     /* 复用页面底色（#fff 别名）*/

  --slate-900:    #0f172a;     /* 深石板文字 */
  --slate-600:    #475569;     /* 次级石板文字 */

  --side-bg:      #15172b;     /* 后台侧栏底 */
  --side-grad-end:#2a2d4a;     /* 后台渐变末端（深）*/
  --side-fg:      #c8cbe0;     /* 后台侧栏文字 */
  --side-fg-dim:  #71769a;     /* 后台侧栏分组标签 */
  --side-card:    #fafbff;     /* 后台卡片底 */

  --brand-500:    #5a4cf0;     /* 渐变紫（与 --brand 同族不同明度）*/
  --purple-500:   #a855f7;     /* 紫强调 */

  --ok-600:       #16a34a;     /* 成功绿（深）*/
  --ok-500:       #22c55e;     /* 成功绿（亮）*/
  --ok-bg:        #e7f8ee;     /* 成功浅底 */
  --ok-bg-2:      #f0fff7;     /* 成功更浅底 */
  --tint-indigo:  #e3e7ff;     /* 靛蓝浅底 */
  --tint-brand:   #eef0ff;     /* 品牌浅底（与 --brand-tint 同族）*/
  --tint-brand-2: #f6ecff;     /* 首页渐变末端（浅紫）*/

  --danger-600:   #dc2626;     /* 错误红（深）*/
  --danger-500:   #ef4444;     /* 错误红（亮）*/
  --danger-bg:    #fdeaea;     /* 错误浅底 */

  --amber-600:    #d97706;     /* 警告琥珀 */
  --amber-bg:     #fff4e0;     /* 警告浅底 */
  --orange-bg:    #fff7ed;     /* 橙浅底 */
  --orange-bg-2:  #fed7aa;     /* 橙更浅底 */
  --surface-slate:#f7f8fc;     /* 灰蓝表面 */
}

/* ==========================================================================
   基础重置 + 无障碍防御（这三段现状全站为 0，必须保留）
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* 中文标题禁止负字距（那是给拉丁字母的，中文会显挤） */
h1,h2,h3,h4{ letter-spacing:normal; line-height:var(--lh-title); margin:0 0 var(--sp-3); }
h1{ font-size:var(--fs-h1); font-weight:var(--fw-black); }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-bold); }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-bold); }
h4{ font-size:var(--fs-h4); font-weight:var(--fw-medium); }

img,svg,video{ max-width:100%; height:auto; display:block; }

/* 键盘焦点环：鼠标点击不显示，Tab 导航才显示 */
:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){ outline:none; }

/* 前庭障碍/晕动症用户：关闭所有位移动效 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* 屏幕阅读器专用文本（图标按钮必须配）*/
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 跳转到主内容（键盘用户第一个 Tab）*/
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-toast);
  background:var(--brand); color:#fff; padding:var(--sp-3) var(--sp-4);
  border-radius:0 0 var(--r-md) 0;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   布局原语（移动优先：基准单列，min-width 逐级增强）
   ========================================================================== */
.ds-container{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--sp-gutter);
}

.ds-section{ padding-block:var(--sp-section); }
.ds-section--soft{ background:var(--soft); }

.ds-grid{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:768px){
  .ds-grid--2,.ds-grid--3,.ds-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1160px){
  .ds-grid{ gap:var(--sp-5); }
  .ds-grid--3{ grid-template-columns:repeat(3,1fr); }
  .ds-grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* 横向滚动卡片流：移动端替代"挤成 6 列"的正解 */
.ds-scroller{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:var(--sp-3); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--sp-gutter); margin-inline:calc(var(--sp-gutter) * -1);
  scrollbar-width:none;
}
.ds-scroller::-webkit-scrollbar{ display:none; }
.ds-scroller > *{ scroll-snap-align:start; }
@media (min-width:768px){
  .ds-scroller{
    grid-auto-flow:row; grid-template-columns:repeat(3,1fr);
    overflow:visible; padding-inline:0; margin-inline:0;
  }
}

/* ==========================================================================
   组件原语
   ========================================================================== */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap); padding:0 var(--sp-5);
  font-family:inherit; font-size:var(--fs-body); font-weight:var(--fw-bold);
  border:1px solid transparent; border-radius:var(--r-md);
  cursor:pointer; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ds-btn:active{ transform:translateY(1px); }
.ds-btn:hover{ transform:translateY(-2px); }
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }

.ds-btn--primary{ background:var(--brand); color:var(--ink-invert); box-shadow:var(--sh-brand); }
.ds-btn--primary:hover{ background:var(--brand-deep); }

.ds-btn--ghost{ background:var(--brand-tint); color:var(--brand-deep); }
.ds-btn--ghost:hover{ background:#E4E2FD; }

.ds-btn--outline{ background:transparent; color:var(--brand); border-color:var(--line-strong); }
.ds-btn--outline:hover{ border-color:var(--brand); background:var(--brand-ghost); }

.ds-btn--danger{ background:var(--danger); color:var(--ink-invert); }
.ds-btn--wechat{ background:#fff; color:var(--wechat-text); border-color:var(--wechat); }

.ds-btn--block{ width:100%; }
.ds-btn--sm{ min-height:var(--ctrl-h-sm); padding:0 var(--sp-3); font-size:var(--fs-sm); }

/* 纯图标按钮：必须满足 44×44 触控区 */
.ds-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); padding:0;
  background:transparent; border:0; border-radius:var(--r-md);
  color:var(--sub-strong); cursor:pointer;
}
.ds-icon-btn:hover{ background:var(--soft); color:var(--ink); }

.ds-card{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-sm);
}
.ds-card--raised{ box-shadow:var(--sh-md); border-color:transparent; }

.ds-field{ display:block; margin-bottom:var(--sp-4); }
.ds-label{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--sub-strong); margin-bottom:var(--sp-2); }
.ds-input{
  width:100%; min-height:var(--ctrl-h);
  padding:0 var(--sp-4);
  font-family:inherit; font-size:var(--fs-body); color:var(--ink);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r-md);
}
.ds-input::placeholder{ color:var(--muted); }
.ds-input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); outline:none; }
.ds-input[aria-invalid="true"]{ border-color:var(--danger); }

/* 错误提示：颜色 + 图标 + 文字三重编码，不能只靠颜色传达 */
.ds-hint{ font-size:var(--fs-sm); color:var(--sub); margin-top:var(--sp-2); }
.ds-hint--error{ color:var(--danger); display:flex; align-items:center; gap:var(--sp-1); }

.ds-tag{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  background:var(--brand-tint); color:var(--brand-deep);
}

/* 图标统一：线性、跟随文字颜色、不随字号变形 */
.ds-icon{
  width:var(--icon-md); height:var(--icon-md);
  flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round;
}
.ds-icon--sm{ width:var(--icon-sm); height:var(--icon-sm); }
.ds-icon--lg{ width:var(--icon-lg); height:var(--icon-lg); }
.ds-icon--xl{ width:var(--icon-xl); height:var(--icon-xl); }

/* 移动端吸底 CTA 条（转化关键位）*/
.ds-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-header);
  display:flex; gap:var(--sp-3); align-items:center;
  padding:var(--sp-3) var(--sp-4);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
@media (min-width:900px){ .ds-sticky-cta{ display:none; } }

/* ==========================================================================
   统一站点公共组件：Header / Footer / 移动端抽屉
   规则：各页面禁止使用同名类名写覆盖样式；如需调整请改这里。
   ========================================================================== */

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  display:flex; align-items:center; gap:var(--sp-4);
  height:var(--header-h);
  padding:0 var(--sp-gutter);
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-weight:var(--fw-black); font-size:22px; color:var(--ink);
  text-decoration:none; flex-shrink:0;
  transition:opacity var(--dur-base) var(--ease);
}
.brand:hover{ opacity:.9; }
.brand:hover .mark{ transform:scale(1.06); }
.brand .mark{ display:block; width:34px; height:34px; border-radius:var(--r-md); transition:transform var(--dur-base) var(--ease); }
.brand-text{ color:var(--ink); }

.site-header .nav{
  display:none; align-items:center; gap:var(--sp-6); margin-left:auto;
}
.site-header .nav a{
  position:relative;
  color:var(--sub-strong); text-decoration:none;
  font-size:var(--fs-body); font-weight:var(--fw-medium);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-full);
  transition:color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.site-header .nav a::after{
  content:""; position:absolute; left:var(--sp-3); right:var(--sp-3); bottom:1px;
  height:2px; border-radius:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-base) var(--ease);
}
.site-header .nav a:hover{ color:var(--brand); background:var(--brand-ghost); }
.site-header .nav a:hover::after{ transform:scaleX(1); }

.header-actions{
  display:none; align-items:center; gap:var(--sp-4); margin-left:auto;
}

.nav-toggle{ margin-left:auto; }

@media (min-width:900px){
  .site-header .nav{ display:flex; }
  .header-actions{ display:flex; }
  .nav-toggle{ display:none; }
}

/* ---------- 移动端抽屉 ---------- */
.mobile-drawer{
  position:fixed; inset:0; z-index:var(--z-drawer);
  visibility:hidden; pointer-events:none;
}
.mobile-drawer.open{ visibility:visible; pointer-events:auto; }
.drawer-backdrop{
  position:absolute; inset:0; background:rgba(20,23,38,.45);
  opacity:0; transition:opacity var(--dur-base) var(--ease);
}
.mobile-drawer.open .drawer-backdrop{ opacity:1; }
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(82vw,320px);
  background:var(--bg); box-shadow:var(--sh-lg);
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease);
  display:flex; flex-direction:column; gap:6px;
  padding:72px var(--sp-5) var(--sp-6); overflow-y:auto;
}
.mobile-drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-panel a{
  padding:12px 4px; font-size:17px; font-weight:var(--fw-bold);
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
}
.drawer-cta{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }

/* ---------- Footer ---------- */
.site-footer{
  background:#0F1223; color:#B9BED1;
  padding:48px 0 28px; margin-top:60px; width:100%;
}
.foot-inner{ max-width:1080px; margin:0 auto; padding:0 20px; }
.foot-grid{
  display:grid; grid-template-columns:1fr; gap:32px;
}
.foot-brand .logo-row{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.foot-brand .logo-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,#5A4BD6,#8B5CF6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:17px;
}
.foot-brand .logo-name{ color:#fff; font-size:18px; font-weight:700; }
.foot-brand p{ font-size:13px; line-height:1.8; color:#B9BED1; opacity:.85; max-width:300px; }
.foot-col h4{ color:#F3F4FA; font-size:14px; font-weight:600; margin-bottom:14px; }
.foot-col a{
  display:block; color:#B9BED1; text-decoration:none;
  font-size:13px; line-height:2.2; transition:color .15s;
}
.foot-col a:hover{ color:#fff; }
.foot-divider{ border:0; border-top:1px solid rgba(255,255,255,.1); margin:32px 0 20px; }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  font-size:12px; color:#B9BED1; opacity:.8;
}
.foot-bottom a{ color:#B9BED1; text-decoration:none; }
.foot-bottom a:hover{ color:#fff; }

@media (min-width:560px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1/-1; }
}
@media (min-width:900px){
  .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .foot-brand{ grid-column:auto; }
}
@media (max-width:760px){
  .foot-bottom{ flex-direction:column; text-align:center; }
}