/* THEME: warm — cream paper, serif headings, warm amber accent, soft pill shapes */
:root { --bg:#fbf7ef; --fg:#3d3229; --muted:#7d6f5f; --accent:#c2660a; --card:#fffdf8; --line:#eadfce; --radius:22px; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--fg); line-height:1.65; }
a { color:var(--accent); text-decoration:none; }
h1,h2,h3,.brand { font-family:Georgia,"Times New Roman",serif; }
.site-header { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; padding:1.1rem 1.4rem; background:var(--card); border-bottom:2px solid var(--line); }
.brand { font-weight:700; font-size:1.3rem; color:var(--accent); }
.site-header nav { display:flex; flex-wrap:wrap; gap:.2rem .85rem; font-size:.93rem; }
.site-header nav a { color:var(--muted); padding:.3rem .7rem; border-radius:999px; }
.site-header nav a[aria-current], .site-header nav a:hover { color:#fff; background:var(--accent); }
main { max-width:920px; margin:0 auto; padding:1.75rem 1.25rem 3rem; }
.hero { padding:2.4rem 0 1.4rem; text-align:center; }
.hero h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .5rem; color:#332a20; }
.hero-split { text-align:left; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
@media (max-width:760px){ .hero-split{grid-template-columns:1fr;} }
.lede { color:var(--muted); font-size:1.08rem; margin:.25rem 0 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; margin:1.25rem 0; box-shadow:0 6px 18px rgba(120,90,40,.08); }
.card h2 { margin-top:0; }
.content h2 { margin-top:2.1rem; color:#332a20; }
label { display:block; font-weight:600; margin:.75rem 0 .25rem; }
input, select { width:100%; padding:.65rem .9rem; border:1px solid var(--line); border-radius:999px; font:inherit; background:#fff; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,102,10,.14); }
button.btn { margin-top:1rem; background:var(--accent); color:#fff; border:0; padding:.7rem 1.4rem; border-radius:999px; font:inherit; font-weight:700; cursor:pointer; }
.calc-result { margin-top:1rem; background:#f7ecdb; border-radius:16px; padding:1rem 1.2rem; font-size:1.25rem; font-weight:800; color:#7a4a08; min-height:1em; }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; margin-top:1rem; }
.tool-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem; color:var(--fg); transition:transform .12s ease; }
.tool-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.tool-card h3 { margin:.35rem 0 .25rem; font-size:1.05rem; }
.tool-card p { margin:0; color:var(--muted); font-size:.9rem; }
.tool-icon { font-size:1.5rem; }
.tool-tag { display:inline-block; margin-top:.5rem; font-size:.8rem; color:var(--accent); font-weight:700; }
details { border:1px solid var(--line); border-radius:16px; padding:.7rem 1rem; margin:.5rem 0; background:var(--card); }
summary { font-weight:700; cursor:pointer; }
.ad-slot { margin:1.5rem auto; max-width:920px; text-align:center; }
.ad-slot:empty { display:none; }
/* 未填充的广告位整块折叠：AdSense 只在填充时给 <ins> 写 data-ad-status="filled"，
   否则空广告位会在内容之间撑出几百像素空白。 */
.ad-slot:has(ins.adsbygoogle:not([data-ad-status="filled"])) { display:none; }
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }
.ad-slot ins.adsbygoogle { min-height:0; }
.site-footer { border-top:2px solid var(--line); padding:1.25rem; text-align:center; color:var(--muted); font-size:.9rem; }

/* ---------- 深度内容元素：技术参考资料所需的表格 / 公式 / 引用块 ---------- */
.content table { width:100%; border-collapse:collapse; margin:1.3rem 0; font-family:"Segoe UI",system-ui,sans-serif; font-size:.92rem; }
.content th, .content td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); }
.content th { color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.content td:last-child, .content th:last-child { text-align:right; }
.content tbody tr:hover { background:rgba(194,102,10,.05); }
.content ul, .content ol { padding-left:1.35rem; }
.content li { margin:.45rem 0; }
.content code { background:rgba(61,50,41,.07); padding:.1rem .35rem; border-radius:5px; font-size:.9em; }
/* 计算器正下方的规范提示块 —— 本站独有的结构元素 */
.nec-note { border-left:4px solid var(--accent); background:var(--card); border:1px solid var(--line);
  border-left-width:4px; border-radius:var(--radius); padding:1rem 1.25rem; margin:1.5rem 0; font-size:.98rem; }
.nec-note strong { color:var(--accent); }
/* 公式块 */
.formula { font-family:ui-monospace,Consolas,"Courier New",monospace; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1.1rem; margin:1.1rem 0;
  font-size:.95rem; overflow-x:auto; }
/* 权威来源与最后核对日期 */
.sources { border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:1.1rem 1.35rem; margin:1.6rem 0; font-size:.95rem; }
.sources h3 { margin:0 0 .5rem; font-size:1.02rem; font-family:Georgia,serif; }
.sources ul { margin:.5rem 0 0; }
.sources li { color:var(--muted); }
.last-updated { color:var(--muted); font-size:.86rem; margin:.8rem 0 0; }
/* 表单辅助类（引擎共用） */
.hint { color:var(--muted); font-size:.92rem; margin:0 0 .3rem; }
button.btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); margin-left:.5rem; }
/* 电阻色环表：多列并排 */
.rc-row { display:flex; flex-wrap:wrap; gap:.8rem; }
.rc-row .rc-cell { flex:1 1 128px; min-width:0; }

/* 联盟推荐区（Amazon Associates）
   合规要求：Amazon 声明语句必须在含联盟链接的页面上清晰可见，不能藏在小字里。 */
.affiliate-block { border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:1.1rem 1.35rem; margin:1.6rem 0; font-size:.95rem; }
.affiliate-block h3 { margin:0 0 .4rem; font-size:1.02rem; }
.affiliate-block ul { margin:.5rem 0 0; padding-left:1.25rem; }
.affiliate-block li { margin:.5rem 0; color:var(--muted); }
.affiliate-block a { color:var(--accent); font-weight:600; text-decoration:underline; }
.affiliate-disclosure { margin:.9rem 0 0; padding-top:.65rem; border-top:1px solid var(--line);
  font-size:.84rem; line-height:1.5; color:var(--muted); }
.affiliate-disclosure strong { color:var(--fg); font-weight:600; }

/* 参考表格 —— 数据资产型内容（既是页面价值，也是外链钓饵） */
.table-wrap { overflow-x: auto; margin: 1.2rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table th, .data-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.data-table th { font-weight: 600; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table td:last-child, .data-table th:last-child { text-align: right; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* 分类式首页（home_categories → 一个分类一个区块，工具以方框网格铺开） */
.home-hero { padding-bottom:.2rem; }
.cat-jump { display:flex; flex-wrap:wrap; gap:.4rem; margin:1.1rem 0 0; }
.cat-jump a { display:inline-flex; align-items:center; gap:.35rem; font-size:.84rem; padding:.4rem .75rem;
  border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--fg);
  text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.cat-jump a:hover { border-color:var(--c1, var(--accent)); transform:translateY(-1px); }
.cat-section { margin:2.2rem 0 0; scroll-margin-top:5.5rem; }
.cat-head { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.cat-icon { flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:12px; display:grid; place-items:center;
  font-size:1.2rem; line-height:1; color:#fff;
  background:linear-gradient(135deg, var(--c1, var(--accent)), var(--c2, var(--accent))); }
.cat-text { flex:1 1 auto; min-width:0; }
.cat-head h2 { margin:0; font-size:1.15rem; letter-spacing:-.01em; }
.cat-head p { margin:.15rem 0 0; color:var(--muted); font-size:.87rem; }
.cat-count { flex:0 0 auto; font-size:.75rem; color:var(--muted); border:1px solid var(--line);
  border-radius:99px; padding:.2rem .6rem; white-space:nowrap; }
@media (max-width:560px) { .cat-count { display:none; } }

/* 页脚信任页链接（about / privacy） */
.site-footer .footer-links { display:flex; flex-wrap:wrap; gap:.2rem 1rem; margin-top:.5rem; font-size:.85rem; }
.site-footer .footer-links a { color:var(--muted); text-decoration:none; }
.site-footer .footer-links a:hover { color:var(--fg); text-decoration:underline; }

/* ── 站点配图（2026-10-20 为 handybackyard 新增；全部是**新增选择器**，
       class 只出现在带配图的页面 ⇒ 无这些元素的站点渲染零变化，见当日提交说明） ── */
.page-banner { margin:0 0 1.75rem; border-radius:var(--radius,18px); overflow:hidden;
  background:var(--card,#fff); box-shadow:0 12px 32px rgba(43,33,24,.09); }
.page-banner img { display:block; width:100%; height:auto; aspect-ratio:1200 / 360; object-fit:cover; }

.tool-card.has-img { display:flex; flex-direction:column; }
.tc-img { display:block; width:100%; height:auto; aspect-ratio:1200 / 360; object-fit:cover;
  border-radius:calc(var(--radius,18px) - 6px); margin-bottom:.7rem; background:#f3ece0; }

figure.hb-fig { margin:2.1rem 0; padding:0; }
figure.hb-fig img { display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid var(--line,rgba(43,33,24,.1)); background:#fff; }
figure.hb-fig figcaption { margin-top:.7rem; font-size:.9rem; line-height:1.6;
  color:var(--muted,#6b5b4b); text-align:center; }

.hb-plants { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:.85rem; margin:1.8rem 0; }
.hb-plant { display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.85rem .4rem .75rem; border-radius:14px; background:var(--card,#fff);
  border:1px solid var(--line,rgba(43,33,24,.08)); text-align:center; }
.hb-plant img { width:58px; height:58px; }
.hb-plant b { font-size:.82rem; font-weight:700; line-height:1.25; color:var(--fg,#2b2118); }
.hb-plant span { font-size:.74rem; line-height:1.3; color:var(--muted,#8a7458); }

.hb-legend { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:.4rem 0 0; font-size:.82rem; color:var(--muted,#6b5b4b); }
.hb-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:.35rem; vertical-align:-1px; }

@media (max-width:640px) {
  .page-banner img, .tc-img { aspect-ratio:16 / 9; }
  figure.hb-fig { margin:1.5rem 0; }
  .hb-plants { grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); }
  .hb-plant img { width:48px; height:48px; }
}

.embed-bar { margin-top:14px; padding-top:12px; border-top:1px dashed rgba(128,128,128,.35);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.embed-btn { font:inherit; font-size:14px; padding:7px 14px; border-radius:8px; cursor:pointer;
  border:1px solid currentColor; background:transparent; color:inherit; }
.embed-btn:hover { opacity:.75; }
.embed-hint { font-size:13px; opacity:.7; }
/* 语言切换器：用 inherit/currentColor 写，深浅主题都不必改 5 份主题文件 */
.lang-switch { display:inline-flex; align-items:center; gap:2px; margin-left:auto;
  font-size:13px; letter-spacing:.01em; }
.lang-switch a, .lang-switch .lang-cur { padding:4px 9px; border-radius:999px; text-decoration:none; color:inherit; }
.lang-switch a { opacity:.62; }
.lang-switch a:hover { opacity:1; }
.lang-switch a[aria-current], .lang-switch .lang-cur { opacity:1; font-weight:600;
  background:color-mix(in srgb, currentColor 12%, transparent); }
@media (max-width:640px){ .lang-switch { font-size:12px; } .lang-switch a, .lang-switch .lang-cur { padding:3px 7px; } }