/* static/css/style.css
   结构：1 主题令牌 → 2 基础 → 3 页头/搜索 → 4 首页(Hero/轮播/列表) → 5 文章页 → 6 弹窗/浮层 → 7 响应式 → 8 减弱动效 */

/* ============ 1. 主题令牌 ============
   只手写 3 个基础变量（--bg/--ink/--ac），其余全部 color-mix() 派生，
   这样新增/调整主题只改 3 行；html 上的 data-se 属性由 <head> 内联脚本在首屏前设置。 */
:root        { --bg:#F5F5F7; --ink:#1D1D1F; --ac:#0071E3; }
[data-se="1"]{ --bg:#0D1117; --ink:#C9D1D9; --ac:#00D4AA; }
[data-se="2"]{ --bg:#FFF6F9; --ink:#7A2F45; --ac:#FF2D87; }
[data-se="3"]{ --bg:#1A2E1A; --ink:#C8E0C8; --ac:#FFB74D; }

:root {
  --lift:#fff;            /* 亮色主题：卡片向白色提亮 */
  --ck:55%;               /* 卡片里保留多少 --bg */
  color-scheme: light;
  --max:1600px;
  --gut:clamp(16px, 8vw, 220px);
  --hd:124px;             /* 页头高度回退值，JS 量到真实高度后覆盖 */
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
/* 暗色主题：向文字色提亮，并改用描边代替重阴影 */
[data-se="1"],[data-se="3"] { --lift:var(--ink); --ck:93%; color-scheme: dark; }

:root {
  /* 派生令牌。--muted 取 78% 是为了让 4 套主题的次要文字都 ≥ WCAG AA 4.5:1（樱粉主题最紧，已核算） */
  --card:   color-mix(in srgb, var(--bg) var(--ck), var(--lift));
  --muted:  color-mix(in srgb, var(--ink) 78%, var(--bg));
  --line:   color-mix(in srgb, var(--ink) 14%, var(--bg));
  --ac-soft:color-mix(in srgb, var(--ac) 12%, var(--bg));
  /* 强调色做小号文字时对比度不够（尤其樱粉），所以文字用向 ink 靠拢的 --ac-ink，--ac 只做填充/描边 */
  --ac-ink: color-mix(in srgb, var(--ac) 55%, var(--ink));
  --glass:  color-mix(in srgb, var(--bg) 72%, transparent);
  --sh: 0 14px 40px -14px color-mix(in srgb, var(--ink) 30%, transparent), 0 0 0 1px var(--line);
}
[data-se="1"],[data-se="3"] { --sh: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, var(--bg)); }

/* ============ 2. 基础 ============ */
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }   /* 防止组件自己的 display 把 hidden 覆盖掉 */
html { -webkit-text-size-adjust:100%; scrollbar-gutter:stable; scroll-behavior:smooth; }
body {
  margin:0; padding-top:var(--hd);       /* 页头是 fixed，这里留出位置；隐藏页头时内容不跳动 */
  background:var(--bg); color:var(--ink);
  font:400 16px/1.7 var(--f); -webkit-font-smoothing:antialiased;
  transition:background-color .2s, color .2s;
}
body.noscroll { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img { max-width:100%; }
:focus-visible { outline:2px solid var(--ac); outline-offset:2px; }
.wrap { width:min(var(--max), 100% - var(--gut)*2); margin-inline:auto; }

/* ============ 3. 页头 / 搜索 ============ */
.hot { position:fixed; inset:0 0 auto 0; height:56px; z-index:49; pointer-events:none; }
.hd-off .hot { pointer-events:auto; }    /* 页头隐藏时，顶部 56px 接住轻触，避免点穿到下层内容 */
.hd {
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-top:env(safe-area-inset-top);
  background:var(--glass); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
  transition:transform .22s ease;        /* 只动 transform，避免布局重排 */
}
.hd-off .hd { transform:translateY(-102%); }
.r1 { display:flex; align-items:center; gap:16px; height:72px; }
.brand { display:flex; align-items:center; gap:7px; font-weight:800; font-size:22px; letter-spacing:-.02em; white-space:nowrap; }
.brand i { width:8px; height:8px; border-radius:50%; background:var(--ac); transform:translateY(-5px); }

.srch { position:relative; flex:1; min-width:0; }
.sbox {
  display:flex; align-items:center; height:52px; padding:0 6px;
  border:1px solid var(--line); border-radius:99px; background:var(--card);
  transition:border-color .15s, box-shadow .15s;
}
.srch.on .sbox { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft); }
.sico,.sclr { flex:none; width:44px; height:44px; display:grid; place-items:center; color:var(--muted); border-radius:50%; }
.sclr { font-size:22px; line-height:1; }
.sbox input {
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font:inherit; font-size:16px; color:inherit;     /* 16px：iOS 聚焦不会自动放大页面 */
  -webkit-appearance:none; appearance:none;
}
.sbox input::placeholder { color:var(--muted); }
.sbox input::-webkit-search-cancel-button { display:none; }

/* 搜索下拉面板：92% 不透明 + 毛玻璃，可隐约透出下层 */
.sp {
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60;
  max-height:min(60vh,520px); overflow:auto; overscroll-behavior:contain; padding:8px;
  background:var(--glass); border:1px solid var(--line); border-radius:0 0 18px 18px; box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
}
.sp-h { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; font-size:13px; color:var(--muted); }
.sp-h button { color:var(--ac-ink); min-height:32px; padding:0 8px; }
.sp-e { padding:22px 12px; text-align:center; color:var(--muted); font-size:14px; }
.rc { display:flex; align-items:center; border-radius:12px; }
.rc-t { flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 10px; text-align:left; }
.rc-t span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-t svg { flex:none; color:var(--muted); }
.rc-x { flex:none; width:44px; height:44px; color:var(--muted); font-size:20px; }
.sr { display:block; padding:10px 12px; border-radius:12px; }
.sr b { display:block; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr small { display:block; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc:hover,.sr:hover,.rc.act,.sr.act { background:var(--ac-soft); }
.mask { position:fixed; inset:0; z-index:45; background:transparent; }

.ibtn { flex:none; width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--card); transition:transform .15s; }
.ibtn:active { transform:scale(.94); }
.uwrap { position:relative; flex:none; }
.ubtn { height:52px; padding:0 22px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); border-radius:99px; background:var(--card); }
.ubtn[data-in] { font-weight:700; }
.umenu { position:absolute; right:0; top:calc(100% + 8px); min-width:150px; padding:6px; z-index:60; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh); }
.umenu button { display:block; width:100%; min-height:44px; padding:0 14px; text-align:left; border-radius:10px; }
.umenu button:hover { background:var(--ac-soft); }

.tabs { display:flex; gap:6px; padding:0 0 12px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:none; display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:99px; color:var(--muted); font-size:17px; transition:background-color .15s, color .15s; }
.tab:hover { color:var(--ink); }
.tab.on { background:var(--ink); color:var(--bg); }   /* 激活态用 ink/bg 反色：4 套主题对比度都最高 */

/* ============ 4. 首页 ============ */
.hero { position:relative; overflow:hidden; background:radial-gradient(1100px 520px at 88% 30%, var(--ac-soft), transparent 70%); }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;min-height:0; gap:24px; padding-block:6px; }
.eyebrow { margin:0 0 18px; font-size:14px; font-weight:800; letter-spacing:.18em; color:var(--ac-ink); }
.hero h1 { margin:0; font-size:clamp(56px, 9.5vw, 116px); line-height:1.05; font-weight:800; letter-spacing:-.045em; }
.hero p.sub { margin:12px 0 0 0; font-size:clamp(17px,1.6vw,22px); color:var(--muted); letter-spacing:.02em; }

/* 同心圆：外框静止并"吸附"三个带投影的圆点，内层圆做涌浪 */
.orb {--k:0.86;--S: calc(clamp(220px, 26vw, 320px) * var(--k));--R:calc(var(--S) / 2);position:relative;width:var(--S);aspect-ratio:1 / 1;min-width:var(--S);margin-right:2vw;}
.rg { position:absolute; border-radius:50%; border:2px solid var(--line); }
.r1 { inset:0; border-color:color-mix(in srgb,var(--ac) 28%,var(--line)); }
.rz {inset:auto 0 0 0;height:46%;border:2px dashed color-mix(in srgb,var(--ac) 28%,var(--line));border-top-color:transparent;border-radius:50% 50% 0 0; border-width:1px}
.r2 { inset:11.5%; border:1px dashed color-mix(in srgb,var(--ac) 40%,var(--line)); animation:swell 5.2s ease-in-out infinite; }
.r3 { inset:28%;   border-color:color-mix(in srgb,var(--ac) 34%,var(--line)); animation:swell 5.2s ease-in-out -1.3s infinite; }
.r4 { inset:43%;   border-color:color-mix(in srgb,var(--ac) 45%,var(--line)); background:var(--ac-soft); animation:swell 5.2s ease-in-out -2.6s infinite; }
@keyframes swell { 0%,100% { transform:scale(.92); opacity:.45; } 50% { transform:scale(1.05); opacity:1; } }
.trk { position:absolute; inset:0; animation:spin 52s linear infinite; }
@keyframes spin  { to { transform:rotate(360deg); } }
@keyframes spinr { to { transform:rotate(-360deg); } }
/* 三层嵌套：.dt 负责落到圆周上的位置；.dc 抵消静态角度；.dl 抵消公转 → 圆点跟着外圈走，文字始终保持正向 */
.dt { position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateY(calc(var(--R) * -1)); }
.dc { position:absolute; left:0; top:0; transform:rotate(calc(var(--a) * -1)); }
.dc::before {
  content:""; position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%;
  background:var(--ac); box-shadow:0 0 0 4px var(--ac-soft), 0 6px 12px color-mix(in srgb, var(--ac) 45%, transparent);
}
.dl { position:absolute; left:0; top:0; transform-origin:0 0; animation:spinr 52s linear infinite; }
.dl b { position:absolute; left:16px; top:-10px; white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--ac-ink); }

.sh { display:flex; align-items:center; gap:16px; margin:-12px 0 -1px 0; }
.sh h2 { margin:0; font-size:15px; font-weight:800; }
.sh i { flex:1; height:1px; background:var(--line); }
.sh small { font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--ac-ink); }

/* 轮播：原生 scroll-snap 负责触摸/滚轮横滑，JS 只补自动播放与鼠标拖动 */
.car {
  --sw:min(500px, 86vw);
  position:relative; display:flex; gap:28px; padding:0 calc(50% - var(--sw)/2) 4px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab;
}
.car::-webkit-scrollbar { display:none; }
.car.drag { scroll-snap-type:none; cursor:grabbing; user-select:none; }

.sl {flex:0 0 var(--sw); min-width:0; scroll-snap-align:center;position:relative;border:none;transition:background-color .2s;}
.sl::before,.sl::after {content:"";position:absolute;top:12px; bottom:12px;width:10px;border:1px solid color-mix(in srgb, var(--ac) 65%, transparent);}
.sl::before {left:0;border-right:none;}
.sl::after {right:0;border-left:none;}
.sl:hover { background:var(--ac-soft); }
.sl a { display:block; padding:10px 22px 2px; }
.sl .it-t { font-size:clamp(20px,2.4vw,20px); line-height:1; letter-spacing:-.02em; }
.sl .it-s { margin:1px 0 2px; font-size:clamp(15px,1.5vw,15px); }
.go { color:var(--ac-ink); }

.lh { display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 0; padding-bottom:-4px; border-bottom:6px solid var(--line); }
.lh h2,.lh h1 {color:var(--ac-ink); margin:15px 0 -15px 0; font-size:clamp(26px,3vw,34px); font-weight:800; letter-spacing:-.02em; }
.lh small { font-size:12px; letter-spacing:.14em; color:var(--muted); font-weight:700; }

/* 列表：PC 两列，手机一列；三行：标题 / 摘要 / 日期+标签 */
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:52px; }
.it { position:relative; border-bottom:1px solid var(--line); min-width:0; }
.it-a { display:block; padding:24px 24px 20px 2px; min-width:0; }
.it-t { display:flex; align-items:center; gap:8px; min-width:0; margin:0; font-size:19px; line-height:1.4; font-weight:800; letter-spacing:-.01em; transition:color .15s; }
.it-t .t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.it-a:hover .it-t { color:var(--ac-ink); }
.it-s { margin:-4px 0 5px; font-size:15px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.it-m { display:flex; align-items:center; gap:20px; min-width:0; overflow:hidden; white-space:nowrap; font-size:13px; color:var(--muted); }
.chip { flex:none; padding:0 10px; line-height:22px; font-size:12.5px; color:var(--ac-ink); background:var(--ac-soft); border:1px solid color-mix(in srgb, var(--ac) 40%, var(--line)); border-radius:99px; }
.pin { flex:none; padding:0 8px; line-height:20px; font-size:11.5px; font-weight:700; color:var(--bg); background:var(--ink); border-radius:6px; }
.fav { position:absolute; right:-6px; top:14px; width:44px; height:44px; display:grid; place-items:center; color:var(--muted); border-radius:50%; transition:color .15s, transform .15s; }
.fav:hover { color:var(--ac-ink); }
.fav:active { transform:scale(.88); }
.fav svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fav.on { color:var(--ac); }
.fav.on svg { fill:currentColor; }
.js .it.late { display:none; }           /* 首屏之外的条目：JS 初始化前先藏住，避免闪一下全部 */
.morew { display:flex; justify-content:center; padding:28px 0 8px; }
.more { height:46px; padding:0 30px; border:1px solid var(--line); border-radius:99px; background:var(--card); transition:border-color .15s; }
.more:hover { border-color:var(--ac); }
.empty { padding:56px 12px; text-align:center; color:var(--muted); }
.qchip { display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:14px; color:var(--muted); }
.qchip button { color:var(--ac-ink); min-height:32px; }
.ft { padding:72px 16px 56px; text-align:center; font-size:22px; font-weight:700; letter-spacing:.02em; color:var(--muted); }

/* 页脚：留白 + 发丝线 + 左品牌右导航 + 底部版权栏。不堆装饰，靠层级和克制显得高级 */
.ft { margin-top:96px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.ft-in { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; padding:56px 0 40px; }
.ft-brand b { display:flex; align-items:center; gap:7px; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.ft-brand b i { width:7px; height:7px; border-radius:50%; background:var(--ac); transform:translateY(-4px); }   /* 与页头品牌点呼应 */
.ft-brand p { margin:10px 0 0; max-width:34ch; line-height:1.8; }
.ft-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 28px; }
.ft-nav a {
  display:inline-flex; align-items:center; min-height:44px; color:var(--muted);
  background:linear-gradient(var(--ac),var(--ac)) left bottom 10px / 0 1px no-repeat;   /* 悬停时细下划线从左向右划出 */
  transition:color .2s, background-size .25s;
}
.ft-nav a:hover { color:var(--ink); background-size:100% 1px; }
.ft-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0 28px; border-top:1px solid var(--line); font-size:13px; }
.ft-top { min-height:44px; padding:0 4px; color:var(--muted); transition:color .2s; }
.ft-top:hover { color:var(--ink); }
 
/* 分类页 */
.terms { display:flex; flex-wrap:wrap; gap:10px; padding:24px 0; }
.terms a { padding:8px 18px; border:1px solid var(--line); border-radius:99px; background:var(--card); }

/* ============ 5. 文章页 ============ */
.art-wrap { display:grid; grid-template-columns:minmax(0,720px) 220px; gap:56px; justify-content:center; padding-top:28px; width:min(1100px, 100% - var(--gut)*2); margin-inline:auto; }
.art { min-width:0; }
.back-i { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-left:-8px; padding:0 8px; color:var(--muted); }
.back-i:hover { color:var(--ink); }
.art h1 { margin:6px 0 14px; font-size:clamp(28px,4.4vw,42px); line-height:1.25; font-weight:800; letter-spacing:-.025em; }
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:14px; color:var(--muted); }
.meta a:hover { color:var(--ac-ink); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.tags a { padding:0 10px; line-height:24px; font-size:13px; color:var(--ac-ink); background:var(--ac-soft); border:1px solid color-mix(in srgb, var(--ac) 40%, var(--line)); border-radius:99px; }

.prose { margin-top:28px; font-size:17px; line-height:1.9; overflow-wrap:anywhere; }
.prose > :first-child { margin-top:0; }
.prose h2,.prose h3 { scroll-margin-top:calc(var(--hd) + 16px); line-height:1.4; letter-spacing:-.01em; }
.prose h2 { margin:2.2em 0 .7em; font-size:1.6em; padding-bottom:.3em; border-bottom:1px solid var(--line); }
.prose h3 { margin:1.8em 0 .6em; font-size:1.25em; }
.prose p,.prose ul,.prose ol { margin:1em 0; }
.prose a { color:var(--ac-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--ac) 50%, transparent); }
.prose img { height:auto; border-radius:12px; }
.prose hr { border:0; height:1px; background:var(--line); margin:2em 0; }
.prose blockquote { margin:1.2em 0; padding:.2em 1.1em; border-left:3px solid var(--ac); color:var(--muted); background:var(--ac-soft); border-radius:0 10px 10px 0; }
.prose code { padding:.15em .4em; font-size:.88em; background:var(--card); border:1px solid var(--line); border-radius:6px; }
.prose pre { margin:1.2em 0; padding:16px 18px; overflow-x:auto; border-radius:12px; line-height:1.6; font-size:14px; }
.prose pre code { padding:0; background:none; border:0; color:inherit; }
.prose table { display:block; overflow-x:auto; border-collapse:collapse; margin:1.2em 0; }
.prose th,.prose td { padding:8px 14px; border:1px solid var(--line); }
.prose th { background:var(--card); }
.prose mark { color:inherit; padding:0 .25em; border-radius:4px; background:color-mix(in srgb, var(--ac) 28%, transparent); }   /* Obsidian ==高亮== */
.callout { margin:1.2em 0; padding:12px 16px; border:1px solid color-mix(in srgb, var(--ac) 40%, var(--line)); background:var(--ac-soft); border-radius:12px; }
.callout > summary,.co-t { font-weight:800; color:var(--ac-ink); cursor:default; }
.callout > summary { cursor:pointer; }
.co-b > :first-child { margin-top:.5em; } .co-b > :last-child { margin-bottom:0; }
.wl { color:var(--ac-ink); border-bottom:1px dashed currentColor; }
.wl.miss { color:var(--muted); border-bottom-style:dotted; }

.toc-side { position:sticky; top:calc(var(--hd) + 24px); align-self:start; max-height:calc(100dvh - var(--hd) - 48px); overflow:auto; font-size:14px; }
.toc-side b,.toc-fold summary { font-size:13px; letter-spacing:.1em; color:var(--muted); }
.toc a { display:block; padding:5px 0 5px 12px; border-left:1px solid var(--line); color:var(--muted); line-height:1.5; }
.toc a.l3 { padding-left:26px; font-size:13.5px; }
.toc a:hover { color:var(--ink); }
.toc a.on { color:var(--ac-ink); border-left-color:var(--ac); font-weight:700; }
.toc-fold { display:none; margin-top:20px; padding:4px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.toc-fold summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }

.acts { display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.abtn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border:1px solid var(--line); border-radius:99px; background:var(--card); transition:border-color .15s; }
.abtn:hover { border-color:var(--ac); }
.abtn.fav { position:static; width:auto; height:auto; min-height:44px; padding:0 20px; border-radius:99px; color:inherit; }
.abtn.fav.on { color:var(--ac-ink); border-color:var(--ac); }

.rel { margin-top:56px; }
.rel .lh { margin-top:0; }
.rel .lh h2 { font-size:22px; }

/* 返回按钮：页头被手势隐藏后，悄然浮现在左上角 */
.back { position:fixed; z-index:49; left:max(12px, env(safe-area-inset-left)); top:calc(122px + env(safe-area-inset-top)); width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .22s, transform .22s; }
.hd-off .back { opacity:1; transform:none; pointer-events:auto; }

/* ============ 6. 弹窗 / 浮层 ============ */
.md { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; background:color-mix(in srgb, var(--ink) 38%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .18s; }
.md.in { opacity:1; }
.md-box { position:relative; width:min(400px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:28px 24px 24px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh); transform:translateY(8px) scale(.98); transition:transform .2s; }
.md.in .md-box { transform:none; }
.md-box.wide { width:min(520px,100%); }
.md-x { position:absolute; right:6px; top:6px; width:44px; height:44px; display:grid; place-items:center; font-size:26px; line-height:1; color:var(--muted); border-radius:50%; }
.md-x:hover { color:var(--ink); }
.md-box h2 { margin:0 0 16px; font-size:20px; }
.seg { display:flex; gap:4px; padding:4px; margin:0 0 20px; border-radius:99px; background:var(--bg); border:1px solid var(--line); }
.seg button { flex:1; height:40px; border-radius:99px; color:var(--muted); }
.seg button.on { background:var(--ink); color:var(--bg); font-weight:700; }
.fld { display:block; margin-bottom:14px; }
.fld span { display:block; margin-bottom:6px; font-size:13px; color:var(--muted); }
.fld input { width:100%; height:46px; padding:0 14px; font:inherit; font-size:16px; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:12px; outline:0; }
.fld input:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft); }
.err { min-height:20px; margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--ac-ink); }
.btn { width:100%; height:46px; border-radius:99px; background:var(--ink); color:var(--bg); font-weight:700; }
.btn:disabled { opacity:.6; cursor:wait; }
.fr { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.fr-a { flex:1; min-width:0; padding:12px 0; }
.fr-a b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-a small { color:var(--muted); }
.fr-x { flex:none; min-height:44px; padding:0 10px; color:var(--ac-ink); }
.shg { display:grid; gap:10px; }
.shg .abtn { justify-content:center; }
.card-box { margin-top:16px; text-align:center; }
.card-box canvas { width:100%; max-width:320px; height:auto; border:1px solid var(--line); border-radius:12px; }
.card-box .row { display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:90; max-width:calc(100% - 32px); padding:10px 20px; border-radius:99px; background:var(--ink); color:var(--bg); font-size:14px; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.on { opacity:1; transform:translate(-50%,0); }

/* ============ 7. 响应式 ============ */
@media (max-width:1080px) {
  .art-wrap { grid-template-columns:minmax(0,720px); }
  .toc-side { display:none; }
  .toc-fold { display:block; }
}
@media (max-width:899px) {
  .hero .wrap { grid-template-columns:1fr; min-height:250px;align-items:flex-start;padding-block:28px 0}
  .orb { --S:210px; --R:105px; position:absolute; right:-36px; top:18px; margin:0; opacity:.55; pointer-events:none; }
}
@media (max-width:720px) {
  :root { --hd:112px; }
  .r1 { gap:8px; height:60px; }
  .brand { font-size:19px; }
  .ibtn,.ubtn { height:44px; }
  .ibtn { width:44px; }
  .ubtn { padding:0 14px; max-width:130px; font-size:14px; }
  /* 移动端搜索框收起为图标，点开后占满整行 */
  .srch { flex:1; display:flex; justify-content:flex-end; }
  .sbox { border:0; background:none; padding:0; height:44px; box-shadow:none !important; }
  .sbox input,.sclr { display:none; }
  .hd.s-open .brand,.hd.s-open .ibtn,.hd.s-open .uwrap { display:none; }
  .hd.s-open .srch { justify-content:stretch; }
  .hd.s-open .sbox { flex:1; border:1px solid var(--ac); background:var(--card); padding:0 6px; }
  .hd.s-open .sbox input { display:block; }
  .hd.s-open .sclr:not([hidden]) { display:grid; }
  .tab { height:44px; padding:0 16px; font-size:16px; }
  .grid { grid-template-columns:1fr; }
  .it-a { padding-top:20px; }
  .prose { font-size:16.5px; }
  .ft { font-size:18px; }
}
@media (max-width:420px) { .hero h1 { font-size:52px; } }

/* ============ 8. 减弱动效 ============ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* 密码/明文切换👀  */
.pwd-wrap { position: relative; display: flex; }
.pwd-wrap input { flex: 1; padding-right: 2.5rem; }
.pwd-toggle {
  position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%);
  border: 0; background: none; cursor: pointer;
  color: var(--ink); font-size: 1rem;
}