/* ============================================================
   醒活派官网 · 公共基础样式
   设计令牌：V4 理性蓝（Corporate Trust）
   布局骨架：B3 分栏索引式（左 320px 固定索引 + 右内容切屏）
   全站无第三方依赖，直接静态部署
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 色彩 */
  --bg:#FFFFFF;            /* 页面底 */
  --tint:#F4F7FB;          /* 浅蓝灰区块底 */
  --tint-2:#EDF2FA;        /* 区块底-深一档 */
  --ink:#0F172A;           /* 主文字 / 深色底 */
  --muted:#5B6B82;         /* 次级文字 */
  --faint:#8A98AC;         /* 弱化文字 */
  --line:#E2E8F0;          /* 分隔线 */
  --line-2:#CFD9E8;        /* 分隔线-深一档 */
  --primary:#2F5FE0;       /* 品牌主色 */
  --primary-dark:#1E45B8;  /* 主色-深 */
  --primary-soft:#E8EFFD;  /* 主色-浅底 */
  --primary-line:#D3E0FA;  /* 主色-浅边 */
  --ok:#10B981;

  /* 字体 */
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 尺寸 */
  --side-w:320px;          /* 左栏宽 */
  --pad-x:60px;            /* 右区左右内边距 */
  --pad-y:52px;            /* 右区上下内边距 */
  --r:10px;                /* 常规圆角 */
  --r-lg:14px;             /* 大圆角 */

  /* 层级 */
  --z-side:20;
  --z-fade:1;
}

/* ---------- 2. 重置 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  font-size:15px;line-height:1.75;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;              /* 整页不滚动：切屏交互 */
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--primary);color:#fff}

/* 屏幕内滚动条（细样式，仅 PC 显示） */
.screen::-webkit-scrollbar{width:10px}
.screen::-webkit-scrollbar-thumb{background:#C9D4E4;border-radius:6px;border:3px solid #fff}
.screen::-webkit-scrollbar-track{background:transparent}

/* ---------- 3. 骨架：双栏 ---------- */
.shell{
  display:grid;
  grid-template-columns:var(--side-w) 1fr;
  height:100vh;
  min-width:0;
}

/* ---------- 4. 左栏（索引侧栏） ---------- */
.side{
  position:relative;z-index:var(--z-side);
  height:100vh;overflow-y:auto;
  background:var(--tint);
  border-right:1px solid var(--line);
  padding:34px 26px 28px;
  display:flex;flex-direction:column;
}
.side::-webkit-scrollbar{width:0}

.brand{margin-bottom:34px}
.brand .logo{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.brand .logo .mark{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.brand .sub{
  margin-top:8px;padding-left:36px;
  font-size:12px;color:var(--muted);letter-spacing:.02em;line-height:1.6;
}

/* 索引导航 */
.idx{display:grid;gap:3px}
.idx a{
  display:flex;align-items:baseline;gap:14px;
  padding:11px 14px;border-radius:8px;
  font-size:14.5px;color:#33415A;
  border-left:3px solid transparent;
  transition:background .18s ease,color .18s ease;
}
.idx a .n{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--faint);width:20px;flex:none;
}
.idx a:hover{background:#EBF0F8;color:var(--primary)}
.idx a.on{
  background:#fff;color:var(--primary);font-weight:700;
  border-left-color:var(--primary);
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.idx a.on .n{color:var(--primary)}

/* 左栏分组标题 */
.idx-group{
  font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--faint);padding:20px 14px 8px;
}

/* 左栏底部 */
.side-foot{margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.side-foot .addr{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:12px}
.side-foot .addr b{display:block;color:var(--ink);font-weight:600;font-size:12.5px;margin-bottom:2px}
.side-foot .copy{margin-top:14px;font-size:11px;color:var(--faint);line-height:1.6}

/* ---------- 5. 右区（切屏舞台） ---------- */
.main{position:relative;overflow:hidden;background:var(--bg)}
.screen{
  position:absolute;inset:0;
  padding:var(--pad-y) var(--pad-x);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transform:translateY(16px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.screen.active{opacity:1;visibility:visible;transform:none;z-index:var(--z-fade)}

/* ---------- 6. 通用排版组件 ---------- */
.kicker{
  display:inline-block;font-size:12px;font-weight:700;
  letter-spacing:.18em;color:var(--primary);text-transform:uppercase;
  margin-bottom:14px;
}
.screen h1{font-size:44px;line-height:1.22;font-weight:800;letter-spacing:-.03em}
.screen h2{font-size:28px;line-height:1.3;font-weight:800;letter-spacing:-.022em}
.lead{font-size:16px;color:#45566E;max-width:760px;margin-top:14px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* 章节头（屏内分组） */
.ch{margin-bottom:22px}
.ch .n{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--primary)}
.ch h2{margin-top:6px}
.ch p{font-size:14px;color:var(--muted);margin-top:8px;max-width:680px}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:600;
  padding:11px 24px;border-radius:8px;
  background:var(--primary);color:#fff;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-o{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-o:hover{background:var(--tint);border-color:#B9C6DA;transform:translateY(-1px)}
.btn-ink{background:var(--ink)}
.btn-ink:hover{background:#1D2939}
.btn-sm{font-size:13px;padding:8px 18px}

/* 卡片 */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.card:hover{
  box-shadow:0 10px 26px rgba(15,23,42,.09);
  transform:translateY(-2px);border-color:var(--line-2);
}

/* 标签行（英文小标） */
.tagline{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--faint);text-transform:uppercase;
}

/* 流程胶囊 */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flow span{
  font-size:12px;color:var(--primary-dark);
  background:var(--primary-soft);border:1px solid var(--primary-line);
  border-radius:6px;padding:3px 10px;white-space:nowrap;
}
.flow i{font-style:normal;color:#9FB0C8;font-size:11px}

/* NEW 徽标 */
.new{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;
  background:var(--primary);color:#fff;border-radius:4px;
  padding:2px 7px;margin-left:8px;vertical-align:2px;
}

/* 屏内数据条 */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.fact{padding:26px 24px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact b{display:block;font-size:34px;font-weight:300;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.fact b i{font-style:normal;font-size:15px;color:var(--primary);font-weight:600;margin-left:2px}
.fact small{display:block;font-size:12.5px;color:var(--muted);margin-top:8px}

/* 占位图（真机截图 / 地图） */
.ph{
  border:1px dashed var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,#F8FAFD,#EFF3F9);
  color:var(--faint);font-size:12px;text-align:center;line-height:1.9;
  display:grid;place-items:center;
}

/* ---------- 7. 响应式（窄屏自适应：侧栏转顶部横条，保持切屏） ---------- */
@media (max-width:1024px){
  :root{--pad-x:36px;--pad-y:40px}
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100vh}
  .side{
    height:auto;max-height:44vh;
    border-right:0;border-bottom:1px solid var(--line);
    padding:20px 24px 18px;overflow:visible;
  }
  .brand{margin-bottom:14px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  .brand .sub{margin-top:0;padding-left:0}
  .idx{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .idx-group{display:none}
  .idx a{border-left:0;border:1px solid var(--line);white-space:nowrap;padding:8px 14px;background:#fff}
  .idx a.on{border-color:var(--primary)}
  .idx a .n{width:auto}
  .side-foot{display:none}
  .screen h1{font-size:34px}
}
@media (max-width:720px){
  :root{--pad-x:22px;--pad-y:32px}
  .facts{grid-template-columns:1fr 1fr}
  .fact{border-bottom:1px solid var(--line)}
  .fact:nth-child(2n){border-right:0}
  .screen h1{font-size:28px}
  .screen h2{font-size:24px}
}

/* ---------- 8. 可访问性：系统偏好减少动效时，关闭切屏与组件过渡 ---------- */
@media (prefers-reduced-motion: reduce){
  .screen,.btn,.card{transition:none}
}