/* ACBuy Spreadsheet - independent guide. Design DNA: status rail + ledger, brand green #31B38C. */
:root{
  --brand:#31B38C; --brand-deep:#0F7A5C; --wash:#EAF6F1;
  --ink:#1A2433; --muted:#4B5A66; --line:#DDE5E1; --warn:#9A5B00;
  --paper:#F5F8F6; --bg:#fff;
  --wrap:1100px; --r:12px;
  --shadow:0 1px 2px rgba(26,36,51,.06), 0 8px 24px rgba(26,36,51,.05);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Work Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.65; overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:Outfit,system-ui,sans-serif;line-height:1.18;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.4rem,1.14rem + 1.1vw,1.95rem);font-weight:600}
h3{font-size:1.12rem;font-weight:600}
p{margin:0 0 1em;max-width:72ch}
ul,ol{max-width:72ch}
a{color:var(--brand-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#0b5f47}
:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:60}
.skip:focus{left:8px;top:8px}
.mono,.num,.chip-num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.brandmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:Outfit,sans-serif;font-weight:700;font-size:1.05rem;padding:10px 0;min-height:44px;margin-right:auto}
/* 硬门 34（agent 站型）：页眉用该代理的**官方** Logo，深浅底各一套。
   官方标是纯文字标「acbuy」，所以后面跟本站自己的 Spreadsheet 字样，
   连起来读是「acbuy Spreadsheet」—— 不重复写一遍 ACBuy。
   ⚠️ favicon 仍是本站自己的标记，不是官方 Logo：把代购方的标挂到标签页上
   等于宣称「这就是 ACBuy 官网」，和 /about/ 的独立声明打架。 */
.bm-logo{display:inline-flex;flex:none;line-height:0}
.bm-logo img{display:block;width:78px;height:26px}
.bm-txt{font-weight:700}
.bm-txt span{color:var(--brand-deep)}
/* 旧的纯色方块站标已被官方 Logo 取代，样式留着会在暗色下多出一个绿方块 */
.navtoggle{display:none;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font:inherit;font-weight:600;cursor:pointer}
.mainnav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap;max-width:none}
.mainnav a{display:inline-flex;align-items:center;padding:11px;min-height:46px;line-height:24px;border-radius:9px;
  color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500;white-space:nowrap}
.mainnav a:hover{background:var(--wash);color:var(--ink)}
.mainnav a[aria-current=page]{color:var(--ink);background:var(--wash);box-shadow:inset 0 -2px 0 var(--brand)}

/* hero */
.hero{background:linear-gradient(180deg,var(--wash) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.hero-in{padding:52px 20px 46px;max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.hero p.lede{font-size:1.12rem;color:var(--muted);max-width:60ch}
.hero .kicker{font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-deep);margin:0 0 14px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* 硬门 1：搜索框是 hero 的核心部件。它挂在 .hero-in 外面、.hero 里面 ——
   塞进左栏会被挤成一小截，而门对「占 hero 宽 < 45%」是要报 WARN 的。 */
/* 它现在是 .hero-in 这个栅格里的一个**整行**项（grid-column:1/-1），
   所以不要再自己加 max-width 和左右 padding，否则会在 hero 的内边距上再叠一层。 */
.findbar{grid-column:1/-1;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* label 必须整行独占，否则会被拉到输入框旁边、把按钮挤到下一行 */
.findbar label{flex:1 0 100%;font-size:.84rem;color:var(--muted);margin:0}
.findbar input[type=search]{flex:1 1 420px;min-width:0;font:inherit;font-size:1.02rem;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.findbar input[type=search]:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.findbar button{font:inherit;font-weight:600;padding:14px 26px;min-height:48px;
  border:1px solid transparent;border-radius:10px;background:var(--brand-fill,var(--brand));
  color:#fff;cursor:pointer}
.findbar button:hover{filter:brightness(.94)}
.findnote{flex:1 0 100%;margin:2px 0 0;font-size:.8rem;color:var(--muted)}

/* 附属入口：窄条文字链，不是按钮（硬门 1⑤） */
.hero-sub{grid-column:1/-1;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.hero-sub a{font-size:.9rem;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding:6px 2px;min-height:32px;display:inline-flex;align-items:center}
.hero-sub a:hover{color:var(--ink);border-bottom-color:var(--brand)}
@media (max-width:600px){
  .findbar input[type=search]{flex:1 0 100%}
  .findbar button{flex:1 0 100%}
}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;
  border-radius:11px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--brand-deep);color:#fff}
.btn-primary:hover{background:#0b5f47;color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{background:var(--wash);color:var(--ink)}
.hero-fig{margin:0}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.hero-card h2{font-size:1rem;margin-bottom:10px}
.hero-card ol{margin:0;padding-left:18px;font-size:.95rem;color:var(--muted)}
.hero-card li{margin-bottom:6px}

/* crumbs */
.crumbs{padding:18px 0 0}
.crumbs ol{display:flex;gap:8px;list-style:none;margin:0;padding:0;font-size:.86rem;color:var(--muted);flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}

/* bands */
.band{padding:44px 0;border-bottom:1px solid var(--line)}
.band:last-of-type{border-bottom:0}
.band .eyebrow{font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-deep);margin:0 0 8px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center}
.split.fig-left .split-text{order:2}
.split.fig-left .split-fig{order:1}
.split-fig{min-width:0}
.fig{margin:0}
/* 硬门 4「上下堆叠时对齐宽度」：通栏段里正文被收在 718px 的阅读行宽，图却能撑到 1060px，
   实测差 32%（门的 WARN 线是 15%、ERROR 线是 40%）。把通栏图收到 820px：
   与正文差 12.4% 过门，同时仍是 1100px 原生图的 74.5% —— 远高于硬门 3③ 的 0.55 下界。
   不收到 718px 是因为那会把截图里的 UI 字再压一档，而硬门 3③ 防的正是「读不出字」。 */
   ⚠️ 不能一刀切：通栏段里「图上面那一块」有两种宽度 —— 正文段被收在 718px 的阅读行宽，
   而表格 / 清单 / 步骤条是满宽 1060px。第一版给所有通栏图封 820px，结果正文那几处过了，
   表格那几处反过来被判「图 820 / 文 1060，差 23%」。所以按**相邻兄弟**分流：
   紧跟段落的图收到 820，紧跟表格清单的图不封顶、跟着一起满宽。 */
.band.wide .fig{margin-inline:auto}
.band.wide p + .fig{max-width:820px}

/* 硬门 3②「只缩不放」：原来是 width:100%，于是 428px 的官方 banner 落进 511px 的槽
   会被拉到 119%，在 1x 屏上就是糊的。改成 max-width:100% + width:auto —— 图自己带着
   真实的 width/height 属性（build.img() 从 image_sizes.SIZES 写进去），
   所以槽比图宽时按原生尺寸停住，槽比图窄时才缩。居中免得小图贴左边显得掉了一块。 */
.fig img,.fig .fig-svg{display:block;max-width:100%;width:auto;height:auto;
  margin-inline:auto;border-radius:10px}
.fig.shot img{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.fig.plain img{border-radius:10px}
figcaption{font-size:.84rem;color:var(--muted);margin-top:10px;line-height:1.5}
.fig-svg{border:1px solid var(--line);background:#fff}

/* ledger */
.ledger-wrap{overflow-x:auto;margin:8px 0 18px;border:1px solid var(--line);border-radius:var(--r)}
table.ledger{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
table.ledger caption{caption-side:top;text-align:left;padding:14px 16px 6px;color:var(--muted);font-size:.88rem}
table.ledger th,table.ledger td{padding:12px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
table.ledger thead th{background:var(--paper);border-top:0;font-size:.82rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
table.ledger tbody th{font-weight:600;width:38%}
table.ledger td.num{font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--brand-deep);white-space:nowrap}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:6px 0 18px;padding:0;max-width:none}
.chips li{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:10px;padding:12px 16px;min-width:150px}
.chip-num{font-size:1.15rem;color:var(--ink)}
.chip-lab{font-size:.85rem;color:var(--muted)}

/* cards */
.cards{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:18px;max-width:none}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.flow{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.card h3{margin-bottom:6px}
.card p{font-size:.95rem;color:var(--muted);margin:0}
.card .fig{margin-top:14px}

/* category grid */
.cat-grid{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-width:none}
.cat-grid a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease;min-height:44px}
.cat-grid a:hover{border-color:var(--brand);background:var(--wash)}
/* ⚠️ 这三条原本挤在一行里，中间是**字面的反斜杠 n** 而不是换行（heredoc 吃掉的）。
   CSS 把 `\n.cat-grid.broad` 读成「元素 n 且带这两个类」的选择器，永远匹配不上 ——
   所以下面这两条从写下那天起就没生效过，而所有检查脚本都是 0 ERROR。2026-10-09 修。 */
.cat-grid.broad{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.cat-grid.broad .cat-note{font-size:.82rem}

/* 16 格品类墙（硬门 2②③ + 30）。四列到两列，每格一张真实商品图。
   `aspect-ratio:1` + 写死的 width/height 让 16 张图同时进场也不抖（硬门 62 的 CLS）。 */
.cat-grid.wall16{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.cat-grid.wall16 a{padding:0;overflow:hidden;gap:0}
.cat-shot{display:block;aspect-ratio:1;background:var(--wash);overflow:hidden}
.cat-shot img{display:block;width:100%;height:100%;object-fit:cover}
.cat-grid.wall16 .cat-top{padding:10px 12px 0;align-items:baseline}
.cat-grid.wall16 .cat-note{padding:4px 12px 12px;font-size:.8rem;line-height:1.45}
@media (max-width:600px){
  /* 必须是 minmax(0,1fr) 不能是 1fr：网格项默认 min-width:auto（＝min-content），
     图片把它撑到内容宽，两列加起来比视口还宽 —— 375 实测横向溢出 24px。
     只有 ERROR 级的 check_uiux 会报，逐元素查 getBoundingClientRect 才定位得到。 */
  .cat-grid.wall16{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-grid.wall16 .cat-note{font-size:.78rem}
}
.cat-grid .cat-name{font-family:Outfit,sans-serif;font-weight:600}
.cat-grid .cat-note{font-size:.86rem;color:var(--muted)}
.cat-grid .cat-dest{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand-deep)}
.cat-grid .cat-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line);color:var(--brand-deep)}
.cat-ico{flex:none;color:var(--brand-deep)}
.cat-grid a:hover .cat-ico{color:var(--ink)}

/* qa */
details.qa{border:1px solid var(--line);border-radius:10px;padding:0;margin:0 0 10px;background:#fff}
details.qa summary{cursor:pointer;padding:14px 18px;font-weight:600;min-height:44px;display:flex;align-items:center;
  gap:10px;list-style:none}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::before{content:"+";font-family:"JetBrains Mono",monospace;color:var(--brand-deep);flex:none}
details.qa[open] summary::before{content:"\2212"}
details.qa .qa-body{padding:0 18px 16px}
details.qa .qa-body p:last-child{margin-bottom:0}

/* callouts */
.note{border:1px solid var(--line);border-left:4px solid var(--brand-deep);background:var(--paper);
  border-radius:10px;padding:14px 18px;margin:0 0 18px}
.note.warn{border-left-color:var(--warn);background:#FFFAF2}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}
.src{font-size:.84rem;color:var(--muted)}
.src a{color:var(--muted)}

/* tool */
.tool .toolbox{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff;box-shadow:var(--shadow)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.88rem;font-weight:600;color:var(--muted)}
.field input,.field select{min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--brand-deep)}
.tool-out{margin-top:6px;border-top:1px solid var(--line);padding-top:16px}
.tool-out dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:0}
.tool-out dt{color:var(--muted);font-size:.94rem}
.tool-out dd{margin:0;font-family:"JetBrains Mono",monospace;font-weight:600;text-align:right}
.tool-out .verdict{margin-top:14px;font-weight:600}
.tool-out .verdict.ok{color:var(--brand-deep)}
.tool-out .verdict.warn{color:var(--warn)}

/* rail list used in prose */
.steps{list-style:none;margin:0;padding:0;max-width:none}
.steps li{position:relative;padding:0 0 22px 34px;border-left:2px solid var(--line);margin-left:9px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--brand-deep)}
.steps li h3{margin:0 0 4px}
.steps li p{margin:0 0 6px;color:var(--muted);font-size:.97rem}
.state-chain{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0;max-width:none}
.state-chain li{font-family:"JetBrains Mono",monospace;font-size:.78rem;background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:5px 9px;color:var(--muted)}

/* home module list */
.modules{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));max-width:none}
.modules li{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff;
  display:flex;flex-direction:column}
.modules h3{margin-bottom:6px}
.modules p{font-size:.95rem;color:var(--muted);flex:1}
.modules .more{font-weight:600;font-size:.92rem;margin:0}
/* 同一个老毛病，三处都只写了 min-height：短标签（Home / Getting help / Choosing a route）
   横向不够 44px。统一补 min-width —— 文字仍左对齐，视觉不变，命中区向右补足。 */
/* 选择器不能限定在 .modules 下：`p.more` 在别的版式里也用（实测首页还有 6 处
   在 .modules 之外，渲染高只有 18px）。按 .more 全局给，才不会漏。 */
.more a{display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;min-width:44px}
.crumbs a{display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;min-width:44px}
/* hero 窄条：现在只有 3 条，升到 44px 不会撞硬门 1⑤ 的「≥36px 高的大按钮 ≤3 个」上限 */
.hero-sub a{min-height:44px}

/* footer */
.site-foot{background:var(--ink);color:#D7DEE4;margin-top:56px;font-size:.94rem}
.foot-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-block:44px 28px}
.site-foot h2{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:#8FA2AC;font-family:"JetBrains Mono",monospace}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:2px}
/* 硬门 60 的 44px 触点：原来只写了 min-height，而「Home」「Help」「Costs」这类
   短标签**不够宽**（实测 35-40px）—— 触点不达标是卡在宽度上，不是高度上。
   min-width 把命中区向右补足，文字仍然左对齐，视觉不变。 */
.site-foot li a{display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:44px;min-width:44px;padding:4px 0}
.site-foot a{color:#D7DEE4}
.site-foot a:hover{color:#fff}
.foot-brand{font-family:Outfit,sans-serif;font-weight:700;color:#fff;font-size:1.05rem;margin:0 0 10px}
.foot-note{color:#9FB0BA;font-size:.9rem;max-width:52ch}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);padding-block:20px 34px;color:#8FA2AC;font-size:.85rem}
.foot-legal p{max-width:80ch;margin:0 0 8px}
.foot-legal .copy{color:#7D8F99}

/* responsive */
@media (max-width:900px){
  /* 窄屏单列时用 order 把搜索框提到右栏那张卡**之前** —— 用户点名「搜索框要排在
     Hero 文案下面」，不提的话堆叠顺序是 文案 → 五步卡 → 搜索框，搜索框会掉出首屏。
     自动门不报这个（卡片不是按钮，DOM 顺序也没变），只有看 375 整页截图才发现。 */
  .hero-in{grid-template-columns:1fr;gap:22px;padding-top:38px}
  .hero-text{order:1}
  .findbar{order:2}
  .hero-sub{order:3}
  .hero-fig{order:4}
  .split{grid-template-columns:1fr;gap:24px}
  .split.fig-left .split-text,.split.fig-left .split-fig{order:initial}
  .foot-in{grid-template-columns:1fr 1fr;gap:24px}
  .foot-col:first-child{grid-column:1/-1}
  .cards.two{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .navtoggle{display:inline-flex;align-items:center}
  .mainnav{display:none;width:100%;order:3;padding-bottom:10px}
  .mainnav.open{display:block}
  .mainnav ul{flex-direction:column;gap:0}
  .mainnav a{display:block;padding:12px 10px;border-radius:8px}
  .band{padding:34px 0}
}
@media (max-width:420px){
  .chips li{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0E1620;--ink:#E7EDEA;--muted:#A9B8BF;--line:#25333F;--paper:#141F2A;--wash:#132A24;
    --brand-deep:#5FD3AE;--warn:#E0A75C}
  body{background:var(--bg)}
  .site-head{background:rgba(14,22,32,.92)}
  .navtoggle,.card,.modules li,.note,.hero-card,.tool .toolbox,details.qa,.cat-grid a,.field input,.field select,
  .fig-svg,.fig.shot img{background:#111C26}
  .hero{background:linear-gradient(180deg,#132A24 0%,#0E1620 100%)}
  .btn-primary{background:#1F9C77;color:#04140F}
  .btn-primary:hover{background:#2CB68C;color:#04140F}
  .btn-ghost{background:#111C26;color:var(--ink)}
  table.ledger thead th{background:#141F2A}
  .site-foot{background:#08111A}
  .fig.shot img{padding:2px}
}