/* =========================================================
   猫安 · 全站共用样式
   换配色：只改下面 :root 里这几行色号，全站九页一起变。
   ========================================================= */
:root{
  --paper:#F7F5F0;
  --surface:#FFFFFF;
  --ink:#20231F;
  --ink-soft:#5C625C;
  --ink-faint:#8A8F88;
  --teal:#2C6E63;
  --teal-bright:#3C9384;
  --teal-wash:#E7EFEC;
  --amber:#D8893F;
  --danger:#B43A30;
  --danger-wash:#F7E7E3;
  --line:#E4E2D9;
  --radius:13px;
  --maxw:1180px;
  --maxw-read:760px;
  --cjk:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--cjk);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap.read{max-width:var(--maxw-read)}
a{color:inherit}

/* ---------- 顶栏 ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:58px}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:18px;letter-spacing:.5px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);transform:translateY(-2px)}
.brand small{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-faint)}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{font-size:14px;color:var(--ink-soft);text-decoration:none;padding:6px 11px;border-radius:8px;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--teal-wash);color:var(--teal)}

/* ---------- 首页：搜索区 ---------- */
.hero{text-align:center;padding:54px 0 30px;max-width:680px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before,.eyebrow::after{content:"";width:16px;height:1.5px;background:var(--amber)}
.hero h1{font-size:clamp(26px,4.8vw,40px);line-height:1.18;font-weight:800;letter-spacing:-.5px;margin:14px 0 10px}
.hero .lead{font-size:clamp(14px,2vw,16px);color:var(--ink-soft);margin-bottom:24px}
.searchbox{position:relative;display:flex;align-items:center}
.searchbox svg{position:absolute;left:18px;color:var(--ink-faint)}
#q{width:100%;font-family:var(--cjk);font-size:16px;color:var(--ink);padding:16px 18px 16px 48px;border:1.5px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 10px 30px -20px rgba(44,110,99,.5);transition:border-color .15s,box-shadow .15s}
#q:focus{outline:none;border-color:var(--teal-bright);box-shadow:0 0 0 4px var(--teal-wash),0 10px 30px -20px rgba(44,110,99,.5)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.chip{font-size:12.5px;color:var(--teal);background:var(--teal-wash);border:1px solid #D3E2DD;padding:5px 12px;border-radius:999px;cursor:pointer;transition:background .15s}
.chip:hover{background:#D9E7E2}
.chip .h{color:var(--ink-faint);font-family:var(--mono);font-size:10.5px;margin-right:5px}

/* ---------- 首页：板块网格 ---------- */
.board{padding:6px 0 10px}
.cols{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:8px}
.col-title{display:none}
.cards-inner{display:flex;flex-direction:column;gap:13px;flex:1}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 15px 14px;flex:1;transition:transform .16s,box-shadow .16s,border-color .16s;min-height:118px}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(44,110,99,.45);border-color:var(--teal-bright)}
.card .ic{font-size:20px;line-height:1;margin-bottom:9px}
.card h3{font-size:15px;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.card h3 .arr{color:var(--teal-bright);font-weight:400;transition:transform .16s}
.card:hover h3 .arr{transform:translateX(3px)}
.card p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.card .status{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;color:var(--amber);border:1px dashed #D8B98D;background:#FBF3E8;padding:2px 7px;border-radius:999px}
.card.tbd{background:#FBFAF7;border-style:dashed;cursor:default}
.card.tbd:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card.tbd h3{color:var(--ink-soft)}
.empty{display:none;text-align:center;padding:50px 0;color:var(--ink-soft)}
.empty.show{display:block}
.empty .em-k{font-family:var(--mono);color:var(--ink)}
.is-hidden{display:none !important}

/* ---------- 子页：页头 ---------- */
.page-head{padding:30px 0 6px;max-width:var(--maxw-read);margin:0 auto}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);text-decoration:none;margin-bottom:14px;transition:color .15s}
.back:hover{color:var(--teal)}
.page-head h1{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.3px;margin:10px 0 8px}
.page-head .page-lead{font-size:15px;color:var(--ink-soft);line-height:1.6}

/* 区块间距 */
.block{max-width:var(--maxw-read);margin:22px auto 0}
.block-label{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);margin:30px auto 10px;max-width:var(--maxw-read);display:flex;align-items:center;gap:9px}
.block-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- 积木1：讲解 ---------- */
.explain{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.explain h2{font-size:19px;margin-bottom:10px}
.explain p{font-size:14.8px;color:var(--ink);margin-bottom:10px}
.explain p:last-child{margin-bottom:0}
.explain ul{margin:4px 0 10px;padding-left:20px}
.explain li{font-size:14.6px;margin-bottom:6px}
.explain .warn{color:var(--danger);font-weight:600}

/* ---------- 积木2：清单 ---------- */
.checklist{background:var(--ink);color:#EDEEEA;border-radius:var(--radius);padding:22px 22px 12px}
.checklist .ttl{font-size:18px;color:#fff;margin-bottom:2px}
.checklist .sub{font-size:12.5px;color:#9AA39D;margin-bottom:14px}
.checklist ul{list-style:none}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid #34382F;cursor:pointer;font-size:14.6px;line-height:1.5;user-select:none}
.checklist li:first-of-type{border-top:none}
.checklist .box{flex:0 0 20px;height:20px;border:1.6px solid #5A6058;border-radius:6px;margin-top:2px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.checklist .box svg{opacity:0;transition:opacity .12s}
.checklist li.done .box{background:var(--teal-bright);border-color:var(--teal-bright)}
.checklist li.done .box svg{opacity:1}
.checklist li.done .t{color:#7E867E;text-decoration:line-through}

/* ---------- 积木3：决策树 ---------- */
.tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.tree .step{display:none}
.tree .step.show{display:block;margin-bottom:6px}
.tree .q{font-size:15.5px;font-weight:600;margin-bottom:12px}
.tree .opts{display:flex;flex-wrap:wrap;gap:10px}
.tree button{font-family:var(--cjk);font-size:14px;color:var(--teal);background:var(--teal-wash);border:1px solid #CFE0DB;padding:9px 18px;border-radius:10px;cursor:pointer;transition:background .15s,transform .12s}
.tree button:hover{background:#D9E7E2;transform:translateY(-1px)}
.tree button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.tree .tree-result{margin-top:16px;padding:16px 18px;background:var(--teal-wash);border:1px solid #CFE0DB;border-radius:11px;font-size:14.5px;display:none}
.tree .tree-result.show{display:block}
.tree .tree-result b{color:var(--teal)}
.tree .tree-result a{color:var(--teal);font-weight:600}

/* ---------- 积木4：分类速查 ---------- */
.lookup{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.tab{font-size:13.5px;color:var(--ink-soft);background:none;border:1px solid var(--line);padding:7px 15px;border-radius:999px;cursor:pointer;font-family:var(--cjk);transition:all .15s}
.tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
.item{font-size:14px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:11px 13px;cursor:pointer;font-family:var(--cjk);color:var(--ink);transition:all .15s;display:flex;justify-content:space-between;align-items:center;gap:6px}
.item:hover{border-color:var(--teal-bright);background:var(--teal-wash)}
.item .lvl{font-size:10px;font-family:var(--mono);padding:2px 6px;border-radius:5px;background:var(--danger-wash);color:var(--danger);white-space:nowrap}
.cat{display:none}
.cat.active{display:block}

/* 详情弹层 */
.detail-mask{position:fixed;inset:0;background:rgba(32,35,31,.42);display:none;align-items:center;justify-content:center;padding:20px;z-index:80}
.detail-mask.show{display:flex}
.detail{background:var(--surface);border-radius:16px;max-width:480px;width:100%;max-height:84vh;overflow:auto;padding:24px}
.detail .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.detail h3{font-size:20px}
.detail .close{border:none;background:var(--paper);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:17px;color:var(--ink-soft);flex:0 0 auto}
.detail .meta{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-bottom:14px}
.detail .row{margin-bottom:13px}
.detail .row .k{font-size:11.5px;font-family:var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--teal);margin-bottom:3px}
.detail .row .v{font-size:14.3px;line-height:1.55}
.detail .row.danger .k{color:var(--danger)}
.detail .row.danger .v{color:var(--danger);font-weight:600}

/* ---------- 页脚 ---------- */
footer{margin-top:50px;border-top:1px solid var(--line);background:#F1EFE8}
footer .wrap{padding:30px 24px 42px}
.draft{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--amber);border:1px dashed #D8B98D;background:#FBF3E8;padding:6px 12px;border-radius:999px;margin-bottom:13px}
.disclaim{font-size:13px;color:var(--ink-soft);max-width:680px;line-height:1.6}
.disclaim b{color:var(--ink)}

/* ---------- 动画 / 可访问性 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
a:focus-visible,input:focus-visible,button:focus-visible,.chip:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px;border-radius:8px}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .nav-links{display:none}
  .hero{padding:36px 0 24px}
  .cols{grid-template-columns:1fr;gap:24px}
  .col-title{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
  .col-title b{color:var(--teal);font-weight:600}
  .col-title::after{content:"";flex:1;height:1px;background:var(--line)}
  .col[data-grid] .cards-inner{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .card{min-height:96px;padding:14px 13px}
}
@media (max-width:430px){
  .col[data-grid] .cards-inner{grid-template-columns:1fr}
}