/* =====================================================================
 * 博士 Boshi 官网 · 排版布局规范 layout.css  v1（2026-11-03 北京时间）
 * 用法：在 style.css 之前引用 <link rel="stylesheet" href="layout.css">
 * 职责划分：本文件只管 字号阶梯/行高/字重/间距尺度/栅格/断点。
 * 色值、字体族、圆角、阴影由视觉设计BOT的 tokens.css 定义，本文件只引用：
 *   --color-bg/surface/surface-2/border/primary/primary-hover/accent/text/text-muted/up/down/warning,
 *   --font-sans, --font-mono, --radius-sm/md/lg, --shadow-card
 * 引用顺序：tokens.css → layout.css → 页面样式。
 * 字体：系统字体优先（PingFang SC、Microsoft YaHei），不打包中文字体。
 * 截至 2026-11-03 05:35（北京时间）tokens.css 尚未产出；在其就绪前，下方
 * var() 带回退值（取自现有 style.css），【待视觉设计确认】。
 * 间距基准：4/8px；断点：手机<768 / 平板768-1199 / 桌面≥1200
 * ===================================================================== */
:root{
  /* ---- 字号层级（桌面值；平板/手机在下方媒体查询覆盖） ---- */
  --fs-h1:44px;   /* 首页主标题 */
  --fs-h2:32px;   /* 页面标题/区块标题 */
  --fs-h3:22px;   /* 卡片标题 */
  --fs-h4:18px;   /* 小标题、FAQ 问题 */
  --fs-lead:20px; /* 副标题/导语 */
  --fs-body:16px; /* 正文 */
  --fs-small:14px;/* 辅助说明、风险提示 */
  --fs-xs:12px;   /* 版权、标签 */
  --fs-price:32px;/* 价格数字 */

  /* ---- 行高 ---- */
  --lh-tight:1.25; /* H1-H2 */
  --lh-head:1.4;   /* H3-H4 */
  --lh-body:1.75;  /* 中文正文 */
  --lh-small:1.6;  /* 辅助 */

  /* ---- 字重 ---- */
  --fw-regular:400; --fw-medium:500; --fw-bold:600;

  /* ---- 间距尺度（4/8 基准） ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ---- 组件间距 ---- */
  --section-y:var(--sp-8);   /* 区块上下内边距 */
  --hero-top:var(--sp-9);    /* 首屏顶部 */
  --hero-bottom:var(--sp-8);
  --card-pad:var(--sp-5);    /* 卡片内边距 */
  --card-gap:var(--sp-5);    /* 卡片之间 */
  --stack-gap:var(--sp-4);   /* 段落/元素纵向堆叠 */
  --btn-gap:var(--sp-3);     /* 按钮组间距 */
  --head-gap:var(--sp-3);    /* 标题与下方内容 */
  --nav-h:64px;

  /* ---- 栅格 ---- */
  --container:1200px;        /* 内容最大宽度 */
  --container-narrow:760px;  /* FAQ/购卡表单/长文 */
  --gutter:24px;             /* 列间距 */
  --page-pad:32px;           /* 容器左右留白 */
  --cols:12;
}

/* 平板 768–1199 */
@media (max-width:1199px){
  :root{ --fs-h1:36px; --fs-h2:28px; --fs-h3:20px; --fs-lead:18px; --fs-price:28px;
         --section-y:var(--sp-7); --hero-top:var(--sp-8); --gutter:20px; --page-pad:24px; --cols:8; }
}
/* 手机 <768 */
@media (max-width:767px){
  :root{ --fs-h1:28px; --fs-h2:24px; --fs-h3:18px; --fs-h4:16px; --fs-lead:16px; --fs-price:26px;
         --section-y:var(--sp-6); --hero-top:var(--sp-7); --hero-bottom:var(--sp-6);
         --card-pad:var(--sp-4); --card-gap:var(--sp-4); --gutter:16px; --page-pad:16px;
         --nav-h:56px; --cols:4; }
}

/* ===================== 基础排版 ===================== */
body{font-family:var(--font-sans,"PingFang SC","Microsoft YaHei",sans-serif);color:var(--color-text,#d8e0ec);background:var(--color-bg,#0b0f17);font-size:var(--fs-body);line-height:var(--lh-body);
     -webkit-font-smoothing:antialiased;text-size-adjust:100%}
h1,h2,h3,h4{color:var(--color-text,#d8e0ec);margin:0 0 var(--head-gap);font-weight:var(--fw-bold)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
h3{font-size:var(--fs-h3);line-height:var(--lh-head)}
h4{font-size:var(--fs-h4);line-height:var(--lh-head)}
p{margin:0 0 var(--stack-gap)}
.lead{font-size:var(--fs-lead);max-width:40em}
.note,small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted,#8a97ab)}
.num{font-family:var(--font-mono,Consolas,monospace);font-variant-numeric:tabular-nums}

/* ===================== 栅格 ===================== */
.l-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--page-pad)}
.l-narrow{max-width:var(--container-narrow);margin-inline:auto}
.l-section{padding-block:var(--section-y)}
.l-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gutter)}
/* 跨列：桌面 12 列，平板 8 列，手机 4 列 */
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}
.span-8{grid-column:span 8}.span-12{grid-column:1/-1}
/* 常用卡片阵列：桌面 4/3/2 列 → 平板 2 列 → 手机 1 列 */
.l-cards-4{display:grid;gap:var(--card-gap);grid-template-columns:repeat(4,1fr)}
.l-cards-3{display:grid;gap:var(--card-gap);grid-template-columns:repeat(3,1fr)}
.l-cards-2{display:grid;gap:var(--card-gap);grid-template-columns:repeat(2,1fr)}
@media (max-width:1199px){
  .span-3{grid-column:span 4}.span-4{grid-column:span 4}.span-6,.span-8{grid-column:1/-1}
  .l-cards-4,.l-cards-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .span-3,.span-4,.span-6,.span-8{grid-column:1/-1}
  .l-cards-4,.l-cards-3,.l-cards-2{grid-template-columns:1fr}
}

/* ===================== 组件间距 ===================== */
.l-hero{padding:var(--hero-top) 0 var(--hero-bottom)}
.l-card{padding:var(--card-pad);background:var(--color-bg,#FFFFFF);border:1px solid var(--color-border,#E3E8EF);box-shadow:var(--shadow-card,none);border-radius:var(--radius-md,10px)}
.l-btns{display:flex;flex-wrap:wrap;gap:var(--btn-gap);margin-top:var(--sp-5)}
.l-btn{min-height:44px;padding:0 var(--sp-5);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm,6px)}
.l-notice{border-left:4px solid var(--color-warning,#8A5F00);background:#FFF6E0;color:#6B4A00}
.l-nav{height:var(--nav-h);display:flex;align-items:center;gap:var(--sp-5)}
.l-stack>*+*{margin-top:var(--stack-gap)}

/* ===================== 手机端适配 ===================== */
@media (max-width:767px){
  .l-btns .l-btn{flex:1 1 100%}            /* 按钮通栏 */
  .l-nav{gap:var(--sp-3);overflow-x:auto;white-space:nowrap;scrollbar-width:none} /* 导航横滑，或改汉堡菜单 */
  input,select,textarea{font-size:16px}   /* 防 iOS 聚焦放大 */
  .num-break{word-break:break-all}        /* SHA256 等长串换行 */
}

/* ===== 浅色版区块与层级（05:50 北京时间，详见 light-surfaces.md；色值以 tokens.css 为准） ===== */
:root{
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(16,24,40,.06);
  --elev-2: 0 4px 12px rgba(16,24,40,.08);
  --elev-3: 0 12px 32px rgba(16,24,40,.12);
  --border-default: 1px solid var(--color-border, #E3E8EF);
}
.l-section{background:var(--color-bg,#fff)}
.l-section--alt{background:var(--color-surface,#F5F7FA)}
.l-footer{background:var(--color-surface-2,#EEF2F8);border-top:var(--border-default)}
a{color:var(--color-primary-strong,#1F63D6)}
a:hover{color:#1A56C0}
.l-section + .l-section:not(.l-section--alt):not(:has(+ .l-section--alt)){border-top:var(--border-default)}
.l-card{border:var(--border-default);box-shadow:var(--elev-1);transition:box-shadow .15s}
.l-card:hover{box-shadow:var(--elev-2)}
.l-section--alt .l-card{box-shadow:var(--elev-0);background:var(--color-bg,#fff)}
.l-notice{border-left:4px solid var(--color-warning,#8A5F00);background:#FFF6E0;color:#6B4A00}