/* ============================================================
   clash for ios · 「TestFlight 邀请函」暖纸风
   base.css —— 设计令牌 / reset / 排版 / 按钮 / 页头页脚 / 通用面板
   ============================================================ */

:root{
  /* —— 色彩令牌 —— */
  --bg:#F8F1E4;               /* 暖米白纸底 */
  --bg-panel:#FFFBF2;         /* 纸白卡面 */
  --bg-panel2:#FBE9D2;        /* 信封内衬浅杏 */
  --border:#D9C8AC;           /* 墨线描边(浅) */
  --accent:#DE5C08;           /* 烘焙橙(全站唯一主色) */
  --accent-dark:#B84904;      /* 烘焙橙深 */
  --ink:#26211A;              /* 深墨正文 */
  --ink-muted:#6E6250;        /* 次要文字 */
  --success:#3F8F4F;
  --warn:#C98A0F;
  --error:#C03B2A;

  /* —— 形状与投影 —— */
  --radius-s:10px;
  --radius-m:12px;
  --radius-l:14px;
  --shadow-card:0 1px 0 rgba(38,33,26,.05),0 14px 28px -14px rgba(38,33,26,.28);
  --shadow-soft:0 8px 18px -10px rgba(38,33,26,.22);
  --halo:rgba(222,92,8,.06);
  --paper-halo:rgba(251,233,210,.85);

  /* —— 字体 —— */
  --font-display:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* —— 版心与节奏 —— */
  --gutter:32px;
  --wrap-max:1200px;

  /* —— 纸纹颗粒(极浅 SVG feTurbulence 平铺) —— */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  --grain-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
a{color:var(--ink);text-decoration:none;}
ul,ol{list-style-position:inside;}
::selection{background:var(--accent);color:var(--bg-panel);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.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;}

/* 纸纹颗粒覆层(极浅,不挡交互) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--grain);
  background-repeat:repeat;
}

/* ---------- 版心与区块节奏 ---------- */
.wrap{
  max-width:var(--wrap-max);
  margin-left:auto;
  margin-right:auto;
  padding-inline:var(--gutter);
}
/* 区块节奏只声明纵向,严禁 padding:Ypx 0 简写 */
.folio{
  padding-top:56px;
  padding-bottom:56px;
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.25;
  color:var(--ink);
}
h1{font-size:clamp(34px,6vw,60px);letter-spacing:-0.02em;}
h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px;}
h3{font-size:19px;margin-bottom:10px;}
h4{font-size:16px;margin-bottom:8px;}
.mono{font-family:var(--font-mono);}
.muted{color:var(--ink-muted);}

/* 等宽小签(区块编号/索引条) */
.kicker{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent-dark);
  border:1px solid var(--accent);
  border-radius:6px;
  padding:2px 8px;
  letter-spacing:.06em;
  margin-bottom:12px;
}

/* 正文排版容器(教程/文章/手册) */
.prose{max-width:820px;}
.prose p{margin-bottom:14px;line-height:1.8;font-size:15.5px;}
.prose strong{color:var(--accent-dark);font-weight:700;}
.prose a{
  color:var(--ink);
  border-bottom:2px solid var(--accent);
  padding-bottom:1px;
  transition:color .15s ease;
}
.prose a:hover{color:var(--accent-dark);}
.prose h2{margin-top:40px;margin-bottom:14px;}
.prose h3{margin-top:26px;}
.prose ul{list-style:none;margin-bottom:16px;}
.prose ul>li{position:relative;padding-left:20px;margin-bottom:8px;line-height:1.75;}
.prose ul>li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:9px;
  height:2px;
  background:var(--accent);
}
.prose ol{list-style:none;counter-reset:step;margin-bottom:16px;}
.prose ol>li{
  counter-increment:step;
  position:relative;
  padding-left:42px;
  margin-bottom:12px;
  line-height:1.75;
}
.prose ol>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  width:27px;
  height:27px;
  border:1px solid var(--accent);
  border-radius:50%;
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-panel);
}
.prose blockquote{
  border-left:4px solid var(--accent);
  background:var(--bg-panel2);
  border-radius:var(--radius-s);
  padding:12px 18px;
  margin-bottom:16px;
  color:var(--ink);
}
.prose img{border-radius:var(--radius-m);border:1px solid var(--border);}

/* 代码 */
pre{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:14px 16px;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:13.5px;
  line-height:1.7;
  margin-bottom:16px;
  box-shadow:var(--shadow-soft);
}
pre code{background:none;border:none;padding:0;font-size:inherit;}
code{
  font-family:var(--font-mono);
  font-size:.92em;
  background:var(--bg-panel2);
  border-radius:6px;
  padding:1px 6px;
}

/* ---------- 按钮 ---------- */
.btn-accept{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent);
  color:var(--bg-panel);
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  padding:13px 34px;
  border-radius:999px;
  border:1px solid var(--accent-dark);
  box-shadow:0 3px 0 var(--accent-dark),var(--shadow-soft);
  transition:transform .15s ease,box-shadow .15s ease;
  cursor:pointer;
}
.btn-accept:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 0 var(--accent-dark),var(--shadow-soft);
}
.btn-accept .arrow{font-size:14px;}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bg-panel);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  padding:12px 28px;
  border-radius:999px;
  border:1px solid var(--ink);
  box-shadow:0 2px 0 var(--border);
  transition:transform .15s ease,color .15s ease,border-color .15s ease;
  cursor:pointer;
}
.btn-ghost:hover{
  transform:translateY(-2px);
  color:var(--accent-dark);
  border-color:var(--accent-dark);
}
.btn-sm{padding:9px 20px;font-size:14px;}
.is-off{opacity:.45;pointer-events:none;box-shadow:none;transform:none;}
.link-tutorial{
  font-size:14px;
  color:var(--ink);
  border-bottom:2px solid var(--accent);
  padding-bottom:1px;
  transition:color .15s ease;
}
.link-tutorial:hover{color:var(--accent-dark);}

/* ---------- 通用面板 ---------- */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-soft);
  padding:22px 24px;
}
.panel--grain{background-image:var(--grain-card);}
.panel--lining{background:var(--bg-panel2);}

/* ---------- 页头(dotsep 极简一行) ---------- */
#site-header{position:relative;z-index:30;}
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:18px var(--gutter) 14px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:30px;height:30px;display:block;flex-shrink:0;}
.brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.02em;
  text-transform:lowercase;
  white-space:nowrap;
}
.top-tools{display:flex;align-items:center;gap:14px;}
.nav-line{display:flex;align-items:center;gap:14px;font-size:15px;}
.nav-line a{
  color:var(--ink);
  padding:2px 1px;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.nav-line a:hover{color:var(--accent-dark);border-bottom-color:var(--accent);}
.nav-line a.on{
  color:var(--accent-dark);
  border-bottom-color:var(--accent);
  font-weight:600;
}
.nav-sep{color:var(--ink-muted);user-select:none;font-size:14px;}

.lang-box{position:relative;}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--ink-muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 14px;
  background:var(--bg-panel);
  cursor:pointer;
  white-space:nowrap;
}
.lang-switch .caret{font-size:11px;}
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:152px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  padding:6px;
  list-style:none;
  display:none;
  z-index:60;
}
.lang-box.open .lang-menu{display:block;}
.lang-menu li{list-style:none;}
.lang-menu a{
  display:flex;
  align-items:center;
  padding:9px 12px;
  border-radius:8px;
  font-size:14px;
  color:var(--ink);
}
.lang-menu a:hover{background:var(--bg-panel2);}
.lang-menu a.now{color:var(--accent-dark);font-weight:600;}

.nav-burger{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  color:var(--ink);
  cursor:pointer;
  flex-shrink:0;
}
.nav-burger:hover{color:var(--accent-dark);border-color:var(--accent);}

/* ---------- 页脚 ---------- */
#site-footer{position:relative;z-index:1;}
.site-foot{
  margin-top:72px;
  border-top:1px solid var(--border);
  background:var(--bg-panel);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr 1.5fr .8fr;
  gap:30px;
  max-width:var(--wrap-max);
  margin:0 auto;
  padding-top:44px;
  padding-bottom:30px;
  padding-inline:var(--gutter);
}
.foot-grid>*{min-width:0;}
.foot-brand .brand{margin-bottom:12px;}
.foot-about{font-size:13.5px;color:var(--ink-muted);line-height:1.7;}
.foot-h{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--ink-muted);
  margin-bottom:12px;
}
.foot-nav a{
  display:block;
  padding-top:4px;
  padding-bottom:4px;
  font-size:14px;
  color:var(--ink);
  border-bottom:2px solid transparent;
  width:fit-content;
  max-width:100%;
  overflow-wrap:anywhere;
  transition:color .15s ease,border-color .15s ease;
}
.foot-nav a:hover{color:var(--accent-dark);border-bottom-color:var(--accent);}
.foot-hot{display:flex;flex-wrap:wrap;gap:8px;}
.foot-hot a{
  font-size:12.5px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 11px;
  color:var(--ink-muted);
  background:var(--bg);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  transition:color .15s ease,border-color .15s ease;
}
.foot-hot a:hover{color:var(--accent-dark);border-color:var(--accent);}
.foot-legal{border-top:1px dashed var(--border);}
.foot-legal-in{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding-top:16px;
  padding-bottom:18px;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--ink-muted);
}
.foot-legal-in a{
  color:var(--ink-muted);
  border-bottom:1px solid var(--border);
  transition:color .15s ease,border-color .15s ease;
}
.foot-legal-in a:hover{color:var(--accent-dark);border-color:var(--accent);}

/* ---------- 滚动淡入 ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.shown{opacity:1;transform:none;}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .nav-line{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:50;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--bg-panel); /* 抽屉面板:完全不透明实色 */
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-card);
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-top:4px;
    padding-bottom:8px;
  }
  html.nav-open .nav-line{display:flex;}
  html.nav-open{overflow:hidden;} /* 锁背景滚动,禁止穿透 */
  .nav-line a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:46px;
    padding:12px var(--gutter);
    border-bottom:1px dashed var(--border);
    font-size:15.5px;
  }
  .nav-line a:last-child{border-bottom:none;}
  .nav-line a.on{
    border-bottom:1px dashed var(--border);
    border-left:3px solid var(--accent);
    background:var(--bg-panel2);
  }
  .nav-sep{display:none;}
  .top-tools{margin-left:auto;gap:10px;} /* 窄屏工具区必须仍贴最右 */
  .nav-burger{display:inline-flex;}
  /* 页脚四列在窄屏挤不下:长单词无法断行会撑出横向滚动,先折成两列 */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
}
@media (max-width:640px){
  :root{--gutter:20px;}
  .folio{padding-top:40px;padding-bottom:40px;}
  h2{font-size:22px;}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:22px;}
}
@media (max-width:420px){
  :root{--gutter:16px;}
  .brand-name{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}