/* ==========================================================================
   Shisu Wiki · Modern UI (Dark) — Mobile-first 样式 + 桌面端专属覆盖
   结构：
   1) 基础变量/Reset（全端）
   2) Mobile 基础 UI（≤768px 默认）
   3) Tablet 覆盖（≥768px）
   4) Desktop 覆盖（≥1100px）
   5) 锚点跳转防遮挡（强力版 · 三重保险）
   ========================================================================== */

/* ========== 1) 基础变量与 Reset（全端通用） ========== */
:root{
  /* 色板 */
  --bg: #0b1220;
  --surface: #0f172a;
  --panel: #0d1324;
  --card: #0b162b;
  --text: #e6eaf3;
  --muted: #a5b4c8;
  --link: #9cc2ff;
  --primary-1: #22d3ee;
  --primary-2: #a78bfa;
  --accent-1: #34d399;
  --accent-2: #f472b6;

  /* 尺寸与效果 */
  --radius: 16px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 3px 12px rgba(0,0,0,.25);
  --border: 1px solid rgba(255,255,255,.08);
  --maxw: 1100px;
  --space: 16px;
  --header-h: 68px; /* 头部估算高度（手机） */

  /* 流体字号（桌面会覆盖） */
  --fz-1: clamp(20px, 5vw, 28px); /* h1 */
  --fz-2: clamp(18px, 4.3vw, 22px); /* h2 */
  --fz-3: clamp(16px, 3.8vw, 18px); /* h3 */

  /* 锚点留白（用于 hash 跳转/scrollIntoView） */
  --anchor-offset: calc(env(safe-area-inset-top, 0px) + 96px);
}
/* 支持 svh 的浏览器，用更稳的视口单位，自动适配头部高度变化 */
@supports (height: 1svh){
  :root{
    --anchor-offset: clamp(88px, 13svh, 140px);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; } /* iOS 避免自动放大 */
body{
  margin:0;
  color:var(--text);
  font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(900px 450px at 90% 0, rgba(34,211,238,.16), transparent 60%),
    var(--bg);
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); /* iOS Safe Area */
}

/* 链接 / 可访问性 */
a{ color:var(--link); text-decoration:none; transition:opacity .18s ease, transform .18s ease; }
a:hover{ opacity:.9; }
a:focus{ outline:2px solid rgba(167,139,250,.35); outline-offset:2px; border-radius:8px; }

/* 标题与文本（移动端基准） */
h1{ font-size:var(--fz-1); line-height:1.25; margin:.4rem 0 .2rem; font-weight:800; letter-spacing:.1px; }
h2{ font-size:var(--fz-2); line-height:1.30; margin:.8rem 0 .4rem; font-weight:700; }
h3{ font-size:var(--fz-3); line-height:1.30; margin:.8rem 0 .4rem; font-weight:700; }
p{ margin:.6rem 0; }
.muted{ opacity:.82; }

/* 代码、表格 */
code,kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#0a1224; border:var(--border); border-radius:8px; padding:2px 6px;
}
pre{ background:#0a1224; border:var(--border); border-radius:12px; padding:14px; overflow:auto; }
table{ width:100%; border-collapse:separate; border-spacing:0; border:var(--border); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); }
th,td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
tr:last-child td{ border-bottom:none; }
th{ text-align:left; background:rgba(255,255,255,.04); }

/* 动效降级 */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* 防止长链接/英文挤爆布局 */
*{ min-width:0; }
.wrap, .panel, .bd{ overflow-wrap:anywhere; word-break:break-word; }

/* 图片始终自适应 */
img, .figure img{ max-width:100%; height:auto; display:block; border-radius:14px; }

/* ========== 2) Mobile 基础 UI（≤768px 默认） ========== */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:var(--space); }
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow:hidden;
  margin: 12px 0;
}
.hd{ padding:16px 16px 0; }
.bd{ padding:16px; }

/* Header（sticky，但不覆盖正文） */
header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.55));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--border);
}
.nav{
  display:flex; justify-content:space-between; align-items:center;
  max-width:var(--maxw); margin:0 auto;
  padding:12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
}
.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:34px; height:34px; border-radius:12px;
  background:conic-gradient(from 120deg,var(--primary-1),var(--primary-2));
  box-shadow: var(--shadow-2);
}
.brand-name{ font-weight:900; letter-spacing:.2px; }

/* 顶部 tabs：手机上横向滑动 */
.tabs{ display:flex; gap:10px; overflow:auto hidden; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs a{
  flex:0 0 auto;
  padding:8px 12px; border-radius:12px;
  color:var(--text); opacity:.86; position:relative;
}
.tabs a:hover{ opacity:1; }
.tabs a.active{ opacity:1; font-weight:800; }
.tabs a.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background:linear-gradient(90deg,var(--primary-1),var(--primary-2)); border-radius:2px;
}

/* 列表 / 卡片 */
.card{
  background:linear-gradient(180deg, rgba(18,30,56,.9), rgba(13,19,36,.9));
  border: var(--border); border-radius: 14px;
  padding:14px; box-shadow: var(--shadow-2); margin:12px 0;
}
.list a{
  display:block; padding:12px 14px; border: var(--border);
  border-radius:12px; margin:10px 0; background:rgba(255,255,255,.02);
}
.list a:hover{ transform:translateY(-1px); }

/* 按钮（触控友好） */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px;
  padding:11px 16px; border-radius:14px; border:none; cursor:pointer;
  font-weight:800; color:#0a0f1d;
  background:linear-gradient(135deg,var(--primary-1),var(--primary-2));
  box-shadow: 0 10px 25px rgba(167,139,250,.25);
  transform:translateY(0); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow: 0 12px 30px rgba(167,139,250,.3); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; color:var(--text); border: var(--border); }

/* 步骤 */
.step{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.step .num{
  min-width:28px; height:28px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg,#22d3ee,#a78bfa); color:#0a0f1d; font-weight:900;
}

/* 布局：手机端单列；侧栏不吸顶（彻底不覆盖正文） */
.page-grid{ display:block; gap:12px; }
.sidenav{ position:static; top:auto; z-index:auto; }

/* “教程导航”在手机端变胶囊滚动条（不占高度、不吸顶） */
.sidenav .hd{ display:none; }
.sidenav .bd{ padding:0; }
.sidenav .list{
  display:flex; gap:10px; padding:10px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  background:rgba(255,255,255,.04);
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
}
.sidenav .list::-webkit-scrollbar{ display:none; }
.sidenav .list a{
  flex:0 0 auto; white-space:nowrap;
  padding:10px 12px; min-height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  font-weight:600;
}
.sidenav .list a[aria-current="page"], .sidenav .list a.active{
  border-color: rgba(167,139,250,.35);
  box-shadow: 0 4px 12px rgba(167,139,250,.18) inset;
}

/* 顶部按钮区域：手机铺满 */
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 4px; }
.btn-row .btn{ width:100%; }

/* 页脚 */
footer{ opacity:.75; padding:32px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); text-align:center; }

/* ========== 3) Tablet 覆盖（≥768px） ========== */
@media (min-width:768px){
  :root{
    --radius: 18px;
    --space: 18px;
    --header-h: 70px;
    --fz-1: clamp(24px, 3.4vw, 30px);
    --fz-2: clamp(20px, 2.6vw, 24px);
    --fz-3: clamp(18px, 2.2vw, 20px);
  }
  .hd{ padding:18px 18px 0; }
  .bd{ padding:18px; }
  .logo{ width:36px; height:36px; }
  .tabs{ gap:14px; overflow:visible; }
  .btn-row .btn{ width:auto; }
  .grid{ display:grid; gap:14px; }
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
}

/* ========== 4) Desktop 覆盖（≥1100px） ========== */
@media (min-width:1100px){
  :root{
    --radius: 20px;
    --space: 20px;
    --header-h: 76px;
    --fz-1: 30px; --fz-2: 22px; --fz-3: 18px;
  }
  .nav{ padding:14px 18px; }
  .wrap{ padding: var(--space); }
  .panel{ margin: 14px 0; }

  /* 两栏主布局 + 侧栏吸顶（仅桌面吸顶，不影响手机） */
  .page-grid{ display:grid; grid-template-columns:260px 1fr; gap:16px; }
  .sidenav{ position:sticky; top:76px; }

  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .tabs a{ margin:0 10px; }
}

/* ========== 5) 锚点跳转防遮挡（强力版 · 三重保险） ========== */
/* ① 页面级留白：所有滚动定位都会预留头部空间（含 hash 跳转 / scrollIntoView） */
html, body { scroll-padding-top: var(--anchor-offset); }

/* ② 目标块（含标题/面板/区段）优先使用 scroll-margin-top */
section[id], article[id],
h1[id], h2[id], h3[id], h4[id],
figure[id], .panel[id]{
  scroll-margin-top: var(--anchor-offset);
}

/* ③ 兜底：即便浏览器忽略上面两种，也通过 ::before 人为抬高锚点 */
section[id]::before, article[id]::before,
h1[id]::before, h2[id]::before, h3[id]::before, h4[id]::before,
figure[id]::before, .panel[id]::before{
  content:"";
  display:block;
  height: var(--anchor-offset);
  margin-top: calc(-1 * var(--anchor-offset));
  visibility:hidden;
  pointer-events:none;
}

/* 兜底：任何浮层不盖住正文（手机端尤其重要） */
header, .sidenav, .panel, .tabs{ z-index:auto; }
/* ===== 手机端：取消胶囊滚动，改为固定竖排列表 ===== */
@media (max-width: 767.98px){
  /* 导航块不吸顶、不覆盖正文 */
  .sidenav{ position: static; top:auto; z-index:auto; margin-bottom: 10px; }

  /* 显示侧栏标题，保持块级排版 */
  .sidenav .hd{ display:block; padding:8px 12px 6px; }
  .sidenav .bd{ padding:0; }

  /* 竖排列表：无横向滚动、无滚动条 */
  .sidenav .list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    overflow: visible;              /* ⬅ 关键：关闭横向滚动 */
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
  }
  .sidenav .list::-webkit-scrollbar{ display:none; }

  /* 链接项：竖排卡片样式，触控友好 */
  .sidenav .list a{
    display: block;
    margin: 0;
    padding: 12px;
    min-height: 44px;
    white-space: normal;            /* ⬅ 关键：允许换行 */
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    font-weight: 600;
  }
  .sidenav .list a[aria-current="page"], .sidenav .list a.active{
    border-color: rgba(167,139,250,.35);
    box-shadow: 0 4px 12px rgba(167,139,250,.18) inset;
  }

  /* 继续保留锚点防遮挡（若你已有，可忽略） */
  :root{ --header-h: 68px; }
  html, body { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  section[id], article[id], .panel[id], h1[id], h2[id], h3[id]{
    scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 96px);
  }
}
/* =========================
   手机端：固定竖排侧栏导航
   ========================= */
@media (max-width: 767.98px){
  /* 侧栏不吸顶，避免覆盖正文 */
  .sidenav{ position: static !important; top:auto !important; z-index:auto !important; margin-bottom: 10px; }

  /* 显示侧栏标题，去掉横向滚动容器 */
  .sidenav .hd{ display:block; padding:8px 12px 6px; }
  .sidenav .bd{ padding:0; }

  /* 竖排列表（无横向滚动、无胶囊） */
  .sidenav .list{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    overflow: visible !important;              /* 关键：禁用横向滚动 */
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
  }
  .sidenav .list::-webkit-scrollbar{ display:none; }

  .sidenav .list a{
    display: block !important;
    flex: none !important;
    margin: 0;
    padding: 12px;
    min-height: 44px;
    white-space: normal !important;            /* 允许换行 */
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    font-weight: 600;
  }
  .sidenav .list a[aria-current="page"], .sidenav .list a.active{
    border-color: rgba(167,139,250,.35);
    box-shadow: 0 4px 12px rgba(167,139,250,.18) inset;
  }

  /* 锚点滚动留白，防止被头部遮住 */
  :root{ --header-h: 68px; }
  html, body { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }
  [id]{ scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 88px); }
}

/* =========================
   平板/电脑端：恢复原样式
   （防止胶囊样式“泄漏”到桌面）
   ========================= */
@media (min-width: 768px){
  .page-grid{
    display: grid !important;
    grid-template-columns: 260px 1fr;
    gap: 16px;
  }
  .sidenav{
    position: sticky !important;
    top: 76px !important;
    z-index: 10; /* 你原站是多少用多少，确保不遮正文即可 */
  }
  .sidenav .list{
    display: block !important;                 /* 竖排 */
    overflow: visible !important;
    padding: 0;                                 /* 恢复原间距 */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .sidenav .list a{
    display: block !important;
    flex: none !important;
    white-space: normal !important;
    margin: 10px 0;
    padding: 12px 14px;
    border: var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    font-weight: 600;
  }
}