@charset "utf-8";
/* ==========================================================================
   凹3镜像 (ao3archive.com) — 站点样式表
   设计语言参考 Airbnb Design System：4px 间距基准 / 8-14-32-9999 圆角 /
   #ff385c 单一强调色 / 中性色底 / 多层柔和阴影 / 移动优先
   ========================================================================== */

/* ============================ [1] 设计令牌 ============================ */
:root{
  /* 色彩 */
  --c-primary:#ff385c;
  --c-primary-dark:#e00b41;
  --c-bg:#ffffff;
  --c-surface:#f2f2f2;
  --c-surface-2:#fafafa;
  --c-text:#222222;
  --c-muted:#6a6a6a;
  --c-disabled:#c1c1c1;
  --c-inverse:#ffffff;
  --c-border:#dddddd;
  --c-border-muted:#b0b0b0;
  /* 状态色（仅用于图标+文案双编码，不单独承载信息） */
  --c-ok:#0a7d4b;
  --c-ok-bg:#e8f6ee;
  --c-warn:#8a5300;
  --c-warn-bg:#fdf3e2;
  --c-dead:#8a1f2c;
  --c-dead-bg:#fdecee;

  /* 间距 4px 基准 */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px;

  /* 圆角 */
  --r-sm:8px; --r-md:14px; --r-lg:32px; --r-full:9999px;

  /* 阴影 */
  --e-card:rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.16) 0 2px 4px 0;
  --e-search:rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px 0, rgba(0,0,0,.1) 0 4px 8px 0;
  --e-pop:rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.1) 0 8px 24px 0;

  /* 字体 */
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;

  /* 层级 */
  --z-header:50; --z-pop:99; --z-modal:100;

  --maxw:1200px;
}

/* ======================= [2] 基础重置与排版 ======================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:var(--f-sans);font-size:15px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(26px,5.2vw,42px)}
h2{font-size:clamp(21px,3.4vw,29px)}
h3{font-size:clamp(16px,2vw,19px)}
h4{font-size:16px}
p{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-text);text-decoration:none;transition:color .2s ease-out}
a:hover{color:var(--c-muted)}
strong{font-weight:600}
code,kbd{font-family:var(--f-mono);font-size:.9em}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:rgba(255,56,92,.16)}

.lead{font-size:clamp(15px,1.7vw,17px);color:var(--c-muted);line-height:1.75}
.muted{color:var(--c-muted)}
.cap{font-size:12px;color:var(--c-muted);line-height:1.5}
.small{font-size:13px}

/* ========================= [3] 布局容器 ========================= */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-5)}
section{scroll-margin-top:76px}
.sect{padding-block:var(--s-8)}
.sect--surface{background:var(--c-surface-2);border-block:1px solid var(--c-border)}
.sect-head{margin-bottom:var(--s-6);max-width:760px}
.sect-head h2{margin-bottom:var(--s-3)}
.eyebrow{
  display:inline-block;margin-bottom:var(--s-3);padding:5px 12px;
  font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--c-primary);background:rgba(255,56,92,.08);border-radius:var(--r-full);
}
.grid{display:grid;gap:var(--s-6)}
.divider{height:1px;background:var(--c-border);border:0;margin-block:var(--s-7)}
/* ======================= [4] 页头与导航 ======================= */
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-modal)}
.skip:focus{left:var(--s-4);top:var(--s-4);padding:10px 16px;background:var(--c-bg);
  border:1px solid var(--c-border);border-radius:var(--r-sm);box-shadow:var(--e-pop)}

.hdr{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--c-border);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:62px}
.logo{display:flex;align-items:center;gap:var(--s-2);font-size:17px;font-weight:600;flex-shrink:0}
.logo:hover{color:var(--c-text)}
.logo-mark{
  width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;
  background:var(--c-primary);color:var(--c-inverse);border-radius:var(--r-sm);
  font-size:14px;font-weight:600;letter-spacing:-.02em;
}
.logo-sub{font-size:11px;font-weight:400;color:var(--c-muted);letter-spacing:.02em}

.nav{display:none;align-items:center;gap:var(--s-1)}
.nav a{
  position:relative;padding:8px 12px;font-size:14px;color:var(--c-muted);
  border-radius:var(--r-sm);transition:background-color .2s,color .2s;
}
.nav a:hover{color:var(--c-text);background:var(--c-surface)}
.nav a[aria-current="page"]{color:var(--c-text);font-weight:500}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--c-text);border-radius:2px;
}
.hdr .hdr-cta{display:none}

.burger{
  width:44px;height:44px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--c-border);border-radius:var(--r-sm);
  cursor:pointer;transition:background-color .2s;
}
.burger:hover{background:var(--c-surface)}
.burger span{display:block;width:18px;height:2px;background:var(--c-text);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{display:none;border-top:1px solid var(--c-border);background:var(--c-bg);padding-block:var(--s-2) var(--s-4)}
.drawer.open{display:block}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px var(--s-1);font-size:15px;border-bottom:1px solid var(--c-border);
}
.drawer a:last-child{border-bottom:0}
.drawer a::after{content:"›";color:var(--c-disabled);font-size:18px}

/* =========================== [5] 按钮 =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:12px 22px;font-family:inherit;font-size:15px;font-weight:600;
  border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;text-align:center;
  transition:background-color .2s ease-out,transform .1s ease-out,box-shadow .2s,color .2s;
}
.btn--primary{background:var(--c-primary);color:var(--c-inverse)}
.btn--primary:hover{background:var(--c-primary-dark);color:var(--c-inverse)}
.btn--primary:active{transform:scale(.97)}
.btn--outline{background:var(--c-bg);color:var(--c-text);border-color:var(--c-border-muted)}
.btn--outline:hover{background:var(--c-surface);color:var(--c-text)}
.btn--outline:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--c-text);font-weight:400;padding:10px 14px}
.btn--ghost:hover{background:var(--c-surface);color:var(--c-text)}
.btn--sm{min-height:38px;padding:9px 16px;font-size:14px}
.btn--lg{min-height:50px;padding:15px 30px;font-size:16px}
.btn--block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--c-surface);color:var(--c-border-muted);
  border-color:var(--c-border);cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
/* ====================== [6] 首屏 Hero 与搜索 ====================== */
.hero{position:relative;padding-block:var(--s-8) var(--s-7);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 46% at 82% 4%,rgba(255,56,92,.09),transparent 62%),
    radial-gradient(46% 40% at 6% 0%,rgba(255,56,92,.05),transparent 60%);
}
.hero h1{margin-bottom:var(--s-4)}
.hero h1 em{font-style:normal;color:var(--c-primary)}
.hero .lead{max-width:660px;margin-bottom:var(--s-5)}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  margin-bottom:var(--s-6);font-size:13px;color:var(--c-muted);
}
.hero-meta span{display:inline-flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:var(--r-full);background:var(--c-ok);flex-shrink:0}
.dot--live{box-shadow:0 0 0 0 rgba(10,125,75,.5);animation:pulse 2.4s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 7px rgba(10,125,75,0)}
  100%{box-shadow:0 0 0 0 rgba(10,125,75,0)}
}

/* 搜索/筛选条 —— 32px 圆角 + 浮层阴影 */
.searchbar{
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-lg);
  box-shadow:var(--e-search);padding:5px 5px 5px var(--s-5);
  transition:box-shadow .2s ease-in-out;max-width:620px;
}
.searchbar:hover{box-shadow:var(--e-pop)}
.searchbar:focus-within{box-shadow:var(--e-pop),0 0 0 2px rgba(34,34,34,.14)}
.searchbar svg{flex-shrink:0;color:var(--c-muted)}
.searchbar input{
  flex:1;min-width:0;padding:12px 0;font-family:inherit;font-size:15px;color:var(--c-text);
  background:transparent;border:0;outline:none;
}
.searchbar input::placeholder{color:var(--c-muted)}
.searchbar .btn{border-radius:var(--r-full);width:46px;height:46px;min-height:46px;padding:0;flex-shrink:0}

/* 筛选胶囊 */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.chip{
  min-height:38px;padding:8px 15px;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-full);cursor:pointer;transition:all .18s ease-out;
}
.chip:hover{border-color:var(--c-text);background:var(--c-surface)}
.chip[aria-pressed="true"]{background:var(--c-text);color:var(--c-inverse);border-color:var(--c-text)}
.chip[aria-pressed="true"]:hover{background:#000}

/* ========================= [7] 数据概览 ========================= */
.stats{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.stat{
  padding:var(--s-5) var(--s-4);background:var(--c-bg);
  border:1px solid var(--c-border);border-radius:var(--r-md);
}
.stat b{display:block;font-size:clamp(22px,4vw,30px);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.stat b i{font-style:normal;font-size:.55em;font-weight:500;color:var(--c-muted);margin-left:2px}
.stat span{display:block;margin-top:6px;font-size:13px;color:var(--c-muted)}
/* ===================== [8] 卡片与镜像列表 ===================== */
.card{
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:var(--s-5);transition:box-shadow .2s ease-out,transform .2s ease-out,border-color .2s;
}
.card--link:hover{box-shadow:var(--e-card);transform:translateY(-2px);border-color:transparent}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--c-muted);font-size:14px}
.card-ico{
  width:40px;height:40px;margin-bottom:var(--s-4);display:grid;place-items:center;
  background:var(--c-surface);border-radius:var(--r-sm);font-size:19px;
}
.cards-3{grid-template-columns:1fr}
.cards-2{grid-template-columns:1fr}
.cards-4{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}

/* 镜像卡片 */
.mirrors{grid-template-columns:1fr;gap:var(--s-3)}
.mirror{
  display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md);
  transition:box-shadow .2s ease-out,transform .2s ease-out,border-color .2s;
}
.mirror:hover{box-shadow:var(--e-card);transform:translateY(-2px);border-color:transparent}
.mirror.is-hidden{display:none}
.mirror-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.mirror-id{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.mirror-fav{
  width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;
  background:var(--c-surface);border-radius:var(--r-sm);
  font-size:13px;font-weight:600;color:var(--c-text);letter-spacing:-.02em;
}
.mirror-host{
  font-size:15px;font-weight:600;word-break:break-all;line-height:1.35;
  font-family:var(--f-mono);letter-spacing:-.02em;
}
.mirror-note{font-size:13px;color:var(--c-muted);line-height:1.6}
.mirror-tags{display:flex;flex-wrap:wrap;gap:6px}
.mirror-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--c-border);
}
.mirror-foot .btn{flex-shrink:0}
.copy{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:8px 12px;
  font-family:inherit;font-size:13px;color:var(--c-muted);background:transparent;
  border:1px solid var(--c-border);border-radius:var(--r-sm);cursor:pointer;
  transition:all .18s;
}
.copy:hover{color:var(--c-text);background:var(--c-surface);border-color:var(--c-border-muted)}
.copy.done{color:var(--c-ok);border-color:var(--c-ok);background:var(--c-ok-bg)}
.empty{
  display:none;padding:var(--s-8) var(--s-5);text-align:center;color:var(--c-muted);
  background:var(--c-surface-2);border:1px dashed var(--c-border);border-radius:var(--r-md);
}
.empty.show{display:block}

/* ====================== [9] 徽标与状态 ====================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;
  border-radius:var(--r-full);background:var(--c-surface);color:var(--c-text);
}
.badge--ok{background:var(--c-ok-bg);color:var(--c-ok)}
.badge--warn{background:var(--c-warn-bg);color:var(--c-warn)}
.badge--dead{background:var(--c-dead-bg);color:var(--c-dead)}
.badge--line{background:transparent;border:1px solid var(--c-border);color:var(--c-muted);font-weight:500}
.badge--pri{background:rgba(255,56,92,.1);color:var(--c-primary-dark)}
.badge i{font-style:normal}

/* ========== [10] 内容模块：步骤 / 表格 / 折叠 / 时间线 / 提示条 ========== */
/* 步骤 */
.steps{counter-reset:s;display:grid;gap:var(--s-4)}
.step{
  position:relative;counter-increment:s;padding:var(--s-5) var(--s-5) var(--s-5) 60px;
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md);
}
.step::before{
  content:counter(s);position:absolute;left:var(--s-5);top:var(--s-5);
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--c-primary);color:var(--c-inverse);border-radius:var(--r-full);
  font-size:13px;font-weight:600;
}
.step h3{margin-bottom:6px;font-size:16px}
.step p{font-size:14px;color:var(--c-muted)}

/* 表格 */
.tw{overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
caption{padding:var(--s-4);font-size:13px;color:var(--c-muted);text-align:left;border-bottom:1px solid var(--c-border)}
th,td{padding:13px var(--s-4);text-align:left;border-bottom:1px solid var(--c-border);vertical-align:top}
th{background:var(--c-surface-2);font-weight:600;font-size:13px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--c-surface-2)}
td code{font-size:12.5px;word-break:break-all}

/* 折叠 FAQ */
.acc{border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;background:var(--c-bg)}
.acc+.acc{margin-top:var(--s-3)}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);font-size:15px;font-weight:500;cursor:pointer;
  list-style:none;transition:background-color .2s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--c-surface-2)}
.acc summary::after{
  content:"+";flex-shrink:0;font-size:20px;font-weight:400;color:var(--c-muted);
  transition:transform .25s ease;line-height:1;
}
.acc[open] summary::after{transform:rotate(45deg)}
.acc[open] summary{border-bottom:1px solid var(--c-border)}
.acc-body{padding:var(--s-4) var(--s-5) var(--s-5);font-size:14px;color:var(--c-muted);line-height:1.75}
.acc-body p+p{margin-top:var(--s-3)}
.acc-body ul{margin-top:var(--s-2);padding-left:var(--s-5)}
.acc-body li{list-style:disc;margin-bottom:5px}

/* 时间线 */
.tl{position:relative;padding-left:var(--s-6)}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--c-border)}
.tl-item{position:relative;padding-bottom:var(--s-6)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:calc(-1 * var(--s-6) + 1px);top:6px;
  width:12px;height:12px;border-radius:var(--r-full);
  background:var(--c-bg);border:2px solid var(--c-border-muted);
}
.tl-item--now::before{background:var(--c-primary);border-color:var(--c-primary)}
.tl-date{font-size:12px;font-weight:600;color:var(--c-muted);font-variant-numeric:tabular-nums}
.tl-item h3{margin:5px 0 5px;font-size:15px}
.tl-item p{font-size:14px;color:var(--c-muted)}

/* 提示条 */
.note{
  display:flex;gap:var(--s-3);padding:var(--s-4) var(--s-5);
  background:var(--c-surface-2);border:1px solid var(--c-border);
  border-left:3px solid var(--c-border-muted);border-radius:var(--r-sm);
  font-size:14px;line-height:1.7;
}
.note b{display:block;margin-bottom:2px}
.note--info{background:#f4f8fd;border-color:#d6e4f5;border-left-color:#4a7fb5}
.note--warn{background:var(--c-warn-bg);border-color:#f0dcb8;border-left-color:#c98b1e}
.note--pri{background:rgba(255,56,92,.05);border-color:rgba(255,56,92,.2);border-left-color:var(--c-primary)}
.note-ico{flex-shrink:0;font-size:17px;line-height:1.4}
.notes{display:grid;gap:var(--s-3)}

/* 有序清单 */
.list{display:grid;gap:var(--s-3)}
.list li{display:flex;gap:var(--s-3);font-size:14px;line-height:1.7;color:var(--c-muted)}
.list li b{color:var(--c-text)}
.list-ico{flex-shrink:0;color:var(--c-primary);font-weight:600}
/* ========================== [11] 中间页 ========================== */
.go{
  min-height:calc(100vh - 62px);display:flex;align-items:center;justify-content:center;
  padding:var(--s-7) var(--s-5);background:var(--c-surface-2);
}
.go-card{
  width:100%;max-width:600px;padding:var(--s-6) var(--s-5);text-align:center;
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md);
  box-shadow:var(--e-pop);
}
.go-ico{
  width:56px;height:56px;margin:0 auto var(--s-5);display:grid;place-items:center;
  background:rgba(255,56,92,.09);border-radius:var(--r-full);
  color:var(--c-primary);font-size:24px;
}
.go-card h1{font-size:clamp(20px,4vw,26px);margin-bottom:var(--s-3)}
.go-card>.lead{font-size:14px;margin-bottom:var(--s-5)}
.go-target{
  margin-bottom:var(--s-5);padding:var(--s-4);text-align:left;
  background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);
}
.go-target dt{font-size:12px;color:var(--c-muted);margin-bottom:var(--s-1)}
.go-target dd{
  margin:0 0 var(--s-3);font-family:var(--f-mono);font-size:14px;font-weight:600;
  word-break:break-all;line-height:1.5;
}
.go-target dd:last-of-type{margin-bottom:0}
.go-target dd .badge{font-family:var(--f-sans)}
.go-actions{display:grid;gap:var(--s-3);margin-bottom:var(--s-5)}
.go-actions .btn--lg{width:100%}
.go-back{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}
.go-tips{
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--c-border);
  text-align:left;
}
.go-tips h2{font-size:14px;margin-bottom:var(--s-3)}
.go-tips li{
  display:flex;gap:var(--s-2);margin-bottom:var(--s-2);
  font-size:13px;color:var(--c-muted);line-height:1.65;
}
.go-tips li::before{content:"·";color:var(--c-primary);font-weight:700;flex-shrink:0}
.go-err{display:none}
.go-err.show{display:block}
.go-ok.hide{display:none}

/* ========================== [12] 页脚 ========================== */
.ftr{margin-top:var(--s-8);padding-top:var(--s-8);background:var(--c-surface-2);border-top:1px solid var(--c-border)}
.ftr-grid{display:grid;gap:var(--s-6);padding-bottom:var(--s-7)}
.ftr-brand p{margin-top:var(--s-3);font-size:13px;color:var(--c-muted);max-width:340px;line-height:1.7}
.ftr h2{font-size:13px;font-weight:600;margin-bottom:var(--s-3);letter-spacing:.02em}
.ftr ul{display:grid;gap:10px}
.ftr li a{font-size:13px;color:var(--c-muted)}
.ftr li a:hover{color:var(--c-text)}
.ftr-bot{
  padding-block:var(--s-5);border-top:1px solid var(--c-border);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;
}
.ftr-bot p{font-size:12px;color:var(--c-muted);line-height:1.7}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.ftr-bot nav a{font-size:12px;color:var(--c-muted)}

/* 面包屑 */
.bc{padding-block:var(--s-4);font-size:13px;color:var(--c-muted)}
.bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bc li{display:flex;align-items:center;gap:6px}
.bc li+li::before{content:"/";color:var(--c-disabled)}
.bc a{color:var(--c-muted)}
.bc a:hover{color:var(--c-text)}
.bc [aria-current="page"]{color:var(--c-text)}

/* 页内锚点导航 */
.toc{
  padding:var(--s-5);background:var(--c-surface-2);
  border:1px solid var(--c-border);border-radius:var(--r-md);margin-bottom:var(--s-7);
}
.toc h2{font-size:13px;margin-bottom:var(--s-3);color:var(--c-muted);font-weight:600}
.toc ol{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.toc a{
  display:inline-block;padding:7px 13px;font-size:13px;background:var(--c-bg);
  border:1px solid var(--c-border);border-radius:var(--r-full);transition:all .18s;
}
.toc a:hover{border-color:var(--c-text);color:var(--c-text);background:var(--c-bg)}

/* CTA 区块 */
.cta{
  padding:var(--s-7) var(--s-5);text-align:center;background:var(--c-text);
  color:var(--c-inverse);border-radius:var(--r-md);
}
.cta h2{margin-bottom:var(--s-3);color:var(--c-inverse)}
.cta p{max-width:520px;margin:0 auto var(--s-5);color:rgba(255,255,255,.72);font-size:15px;line-height:1.7}
.cta .btn-row{justify-content:center}
.cta .btn--outline{background:transparent;color:var(--c-inverse);border-color:rgba(255,255,255,.4)}
.cta .btn--outline:hover{background:rgba(255,255,255,.1);color:var(--c-inverse);border-color:var(--c-inverse)}
/* ========================= [13] 工具类 ========================= */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mt-7{margin-top:var(--s-7)}
.mb-4{margin-bottom:var(--s-4)}
.mb-5{margin-bottom:var(--s-5)}
.mb-6{margin-bottom:var(--s-6)}
.tac{text-align:center}
.nowrap{white-space:nowrap}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
.reveal.in{opacity:1;transform:none}

/* ====================== [14] 响应式断点 ====================== */
@media (min-width:600px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .cards-2{grid-template-columns:repeat(2,1fr)}
  .go-card{padding:var(--s-8) var(--s-7)}
  .go-actions{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:744px){
  body{font-size:15.5px}
  .wrap{padding-inline:var(--s-6)}
  .sect{padding-block:var(--s-9)}
  .hero{padding-block:var(--s-9) var(--s-8)}
  .mirrors{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(3,1fr)}
  .cards-4{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .hdr-cta{display:inline-flex}
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr}
  .go-tips{text-align:left}
}
@media (min-width:950px){
  .nav{display:flex}
  .burger,.drawer{display:none !important}
  .sect{padding-block:64px}
  .hero{padding-block:64px var(--s-9)}
  .mirrors{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:start}
  .toc{position:sticky;top:78px}
}
@media (min-width:1128px){
  .wrap{padding-inline:var(--s-7)}
  .hero h1{max-width:15ch}
}

/* ==================== [15] 无障碍与降级 ==================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .hdr,.ftr,.burger,.drawer,.chips,.searchbar,.cta,.copy,.toast{display:none !important}
  body{font-size:12pt;color:#000}
  .mirror,.card{border:1px solid #999;break-inside:avoid;box-shadow:none}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}
@supports not (backdrop-filter:blur(12px)){
  .hdr{background:#fff}
}

/* ==================== [16] 镜像地址防复制 ==================== */
/* 首页出现的站点地址一律不参与文本选中，避免被整段复制带走；
   复制事件兜底拦截与提示见 assets/js/no-copy.js。
   两种标注方式：
     · data-nocopy 容器内的 .mirror-host —— 镜像列表卡片（index.html 的 #mirrorList）
     · .addr —— 正文/表格/标题里单独提到的地址，如 <code class="addr">ao3-cn.com</code> */
[data-nocopy] .mirror-host,
.addr{-webkit-user-select:none;user-select:none}

.toast{
  position:fixed;left:50%;bottom:var(--s-7);z-index:var(--z-modal);
  max-width:calc(100vw - var(--s-8));padding:12px 18px;
  background:var(--c-text);color:var(--c-inverse);border-radius:var(--r-full);
  font-size:13px;line-height:1.5;text-align:center;box-shadow:var(--e-pop);
  opacity:0;transform:translate(-50%,12px);pointer-events:none;
  transition:opacity .2s ease-out,transform .2s ease-out;
}
.toast.show{opacity:1;transform:translate(-50%,0)}