:root{
  --bg:#0b0e14; --bg2:#0f131b; --panel:#151b25; --card:#1a212e; --card-h:#222b3a;
  --text:#e8eef6; --dim:#8f9aab; --line:#28303e;
  --gold:#f5a623; --gold2:#ffc75a; --green:#2fd47a; --red:#ff5b5b; --blue:#4aa3ff; --pink:#fb7299;
  --r:14px; --sh:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;padding-bottom:40px}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 14px}

/* header */
.hd{position:sticky;top:0;z-index:60;background:rgba(11,14,20,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);max-width:1000px;margin:0 auto;padding:12px 14px}
.hd-in{display:contents}
.hd-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--gold);letter-spacing:.4px}
.logo i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--gold),var(--gold2));display:inline-block;position:relative}
.logo i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(11,14,20,.55)}
.nav{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--panel);color:var(--dim);border:1px solid var(--line)}
.nav a.on{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#12161f;border-color:transparent}
.crumb{font-size:12px;color:var(--dim);margin-top:10px}
.crumb a{color:var(--dim)}

/* notice */
.notice{margin:14px 0 0;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.28);border-radius:var(--r);padding:10px 13px;font-size:12.5px;color:var(--gold2);line-height:1.6}
.notice b{color:var(--gold)}

/* hero */
.hero{padding:18px 0 4px}
.hero h1{font-size:24px;font-weight:800;letter-spacing:.5px}
.hero .sub{color:var(--dim);font-size:13px;margin-top:6px}
.hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* badges */
.b{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;border:1px solid transparent;white-space:nowrap}
.b-tier{background:rgba(245,166,35,.15);color:var(--gold);border-color:rgba(245,166,35,.35)}
.b-cat{background:rgba(74,163,255,.13);color:var(--blue);border-color:rgba(74,163,255,.3)}
.b-mode-fh{background:rgba(47,212,122,.12);color:var(--green);border-color:rgba(47,212,122,.3)}
.b-mode-zb{background:rgba(255,91,91,.12);color:#ff8a8a;border-color:rgba(255,91,91,.3)}
.b-src{background:rgba(251,114,153,.12);color:var(--pink);border-color:rgba(251,114,153,.3)}
.b-web{background:rgba(143,154,171,.14);color:var(--dim);border-color:var(--line)}

/* same-type nav */
.rel{margin:16px 0 6px}
.rel h3{font-size:12px;color:var(--dim);font-weight:600;margin-bottom:8px;letter-spacing:.5px}
.rel-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.rel-list::-webkit-scrollbar{display:none}
.rel-list a{flex:0 0 auto;padding:8px 13px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:600}
.rel-list a.on{border-color:var(--gold);color:var(--gold);background:rgba(245,166,35,.1)}
.rel-list a:hover{border-color:var(--gold)}

/* filters */
.filters{position:sticky;top:96px;z-index:40;background:rgba(11,14,20,.94);backdrop-filter:blur(8px);padding:10px 0;margin:6px 0 4px;border-bottom:1px solid var(--line)}
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.frow + .frow{margin-top:8px}
.flbl{font-size:11px;color:var(--dim);min-width:52px}
.chip{font-size:12.5px;padding:6px 13px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--dim);cursor:pointer;user-select:none}
.chip:hover{color:var(--text)}
.chip.on{background:var(--gold);color:#12161f;border-color:transparent;font-weight:700}
.chip.warn{border-color:rgba(255,91,91,.4);color:#ff8a8a}
input[type=search],select{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--text);font-size:13px;outline:none;min-width:0;flex:1}
.budget{display:flex;align-items:center;gap:8px;flex:1;min-width:180px}
.budget input[type=range]{flex:1;accent-color:var(--gold);min-width:90px}
.budget .val{font-size:12px;color:var(--gold);font-weight:700;white-space:nowrap;min-width:52px}

/* section title */
.stitle{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;margin:22px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line);scroll-margin-top:160px}
.stitle .n{font-size:12px;font-weight:500;color:var(--dim);background:var(--panel);padding:3px 9px;border-radius:999px;border:1px solid var(--line)}

/* category group on list page */
.catgroup{margin-bottom:8px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.wcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;color:var(--text)}
.wcard:hover{border-color:var(--gold);background:var(--card-h)}
.wcard .wn{font-size:15px;font-weight:700;line-height:1.3;word-break:break-word}
.wcard .wc{font-size:11.5px;color:var(--dim);margin-top:5px}
.wcard .wcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--gold);margin-top:7px;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard .wt{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* code card */
.cc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.cc-top{display:flex;gap:10px;align-items:flex-start;padding:13px 14px}
.cc-main{flex:1;min-width:0}
.cc-name{font-size:15px;font-weight:700;line-height:1.4}
.cc-code{display:inline-flex;align-items:center;gap:8px;margin-top:9px;background:var(--bg2);border:1px dashed var(--line);border-radius:9px;padding:7px 11px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:600;letter-spacing:1px;color:var(--gold);cursor:pointer;user-select:all;max-width:100%;overflow:auto}
.cc-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--dim)}
.cc-side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0}
.coin{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:800;color:var(--gold2)}
.coin::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#ffe9a8,var(--gold) 70%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);flex-shrink:0}
.btn{border:none;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-copy{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#12161f;font-size:13px;padding:9px 16px}
.btn-copy:active{transform:scale(.96)}
.btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--dim);font-size:11.5px;padding:6px 11px}
.btn-ghost:hover{color:var(--gold);border-color:var(--gold)}
.cc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--dim);flex-wrap:wrap}
.cc-foot a{color:var(--blue);font-size:11.5px}
.empty{text-align:center;padding:50px 16px;color:var(--dim)}
.empty h3{color:var(--text);font-size:17px;margin-bottom:6px}

/* guide / steps */
.steps{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:14px 0}
.steps h3{font-size:13px;color:var(--gold);margin-bottom:10px}
.steps ol{list-style:none;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:6px 0 6px 30px;font-size:13px;color:var(--dim)}
.steps li::before{content:counter(st);position:absolute;left:0;top:6px;width:21px;height:21px;border-radius:6px;background:var(--panel);border:1px solid var(--line);color:var(--gold);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* secrets */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;margin-top:12px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.scard .sm{font-size:12.5px;color:var(--dim);font-weight:600}
.scard .sv{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;font-weight:800;letter-spacing:5px;color:var(--gold);cursor:pointer;line-height:1.2;margin:6px 0 8px}
.scard .sw{font-size:11.5px;color:var(--dim);line-height:1.5}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:200;display:none;align-items:center;justify-content:center;padding:18px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:86vh;border-radius:10px}
.lb .x{position:absolute;top:16px;right:20px;color:#fff;font-size:30px;cursor:pointer;line-height:1}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(90px);background:var(--green);color:#06231a;padding:12px 22px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:var(--sh);opacity:0;transition:.25s;z-index:300;max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red);color:#2b0808}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:210;display:none;align-items:flex-end;justify-content:center}
.modal.on{display:flex}
.modal-in{background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px;width:100%;max-width:560px;max-height:80vh;overflow:auto}
@media(min-width:640px){.modal{align-items:center}.modal-in{border-radius:18px}}
.modal h3{font-size:16px;margin-bottom:4px}
.modal .close{float:right;color:var(--dim);font-size:24px;cursor:pointer;line-height:1;margin-top:-4px}

/* guide */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.gcard .gh{padding:13px 14px}
.gcard .gt{font-size:15.5px;font-weight:700}
.gcard .gd{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.6}
.gcard .gb{padding:0 14px 14px}
.gcard .gl{font-size:12px;color:var(--gold);font-weight:700;margin-bottom:7px}
.glist{list-style:none;counter-reset:pt}
.glist li{counter-increment:pt;position:relative;padding:7px 0 7px 30px;font-size:13px;border-bottom:1px dashed var(--line)}
.glist li:last-child{border-bottom:none}
.glist li::before{content:counter(pt);position:absolute;left:0;top:7px;width:21px;height:21px;border-radius:6px;background:var(--panel);border:1px solid var(--line);color:var(--gold);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.glist.clip li:nth-child(n+6){display:none}
.gmore{display:inline-block;margin-top:8px;font-size:12px;color:var(--blue);cursor:pointer}
.gtip{margin-top:10px;background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.25);border-radius:10px;padding:9px 12px}
.gtip .t{font-size:11.5px;font-weight:700;color:var(--gold);margin-bottom:5px}
.gtip li{font-size:12px;color:var(--dim);padding:2px 0 2px 13px;position:relative;list-style:none;line-height:1.55}
.gtip li::before{content:"!";position:absolute;left:0;top:2px;color:var(--red);font-weight:700;font-size:11px}
.gfoot{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--dim);flex-wrap:wrap}

/* mfg */
.shot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.shot img{display:block;width:100%;height:auto;background:#fff;cursor:zoom-in}
.shot .hint{position:absolute;right:10px;bottom:10px;background:rgba(11,14,20,.82);color:var(--dim);font-size:11px;padding:4px 10px;border-radius:999px}
.links{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.links a{font-size:12px;padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--dim)}
.links a:hover{color:var(--gold);border-color:var(--gold)}

.ft{text-align:center;padding:28px 14px;color:var(--dim);font-size:11.5px;line-height:1.8}
#toTop{position:fixed;right:14px;bottom:20px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(21,27,37,.94);color:var(--dim);font-size:17px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:70}
#toTop.on{display:flex}

/* 浅色主题 */
html[data-theme=light]{
  --bg:#f4f6fa; --bg2:#ffffff; --panel:#ffffff; --card:#ffffff; --card-h:#f7f9fc;
  --text:#151a23; --dim:#5b6779; --line:#dfe4ec;
  --gold:#b26a00; --gold2:#8a5200; --green:#0f8a4d; --red:#d13c3c; --blue:#1f6fd0; --pink:#d94b78;
  --sh:0 10px 30px rgba(20,30,50,.12)
}
html[data-theme=light] body{background:var(--bg)}
html[data-theme=light] .hd{background:rgba(244,246,250,.94)}
html[data-theme=light] .filters{background:rgba(244,246,250,.94)}
html[data-theme=light] .cc-code{background:#f2f5fa}
html[data-theme=light] .shot img{background:#fff}
html[data-theme=light] .tab,html[data-theme=light] .nav a{box-shadow:0 1px 2px rgba(20,30,50,.05)}

.theme-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--dim);font-size:16px;cursor:pointer;flex-shrink:0}
.theme-btn:hover{color:var(--gold);border-color:var(--gold)}
.hero-act{margin-top:12px}
.hero-act .btn-copy{font-size:12.5px;padding:8px 14px}
.rel-list a em{font-style:normal;color:var(--gold);font-size:11px;margin-left:4px}
.b-stale{background:rgba(255,91,91,.12);color:#ff8a8a;border-color:rgba(255,91,91,.3)}
html[data-theme=light] .b-stale{background:rgba(209,60,60,.1);color:#c03434}

.pick-search{position:relative;margin:14px 0 4px}
.pick-search input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:var(--text);font-size:14px;outline:none}
.pick-search input:focus{border-color:var(--gold)}
.pick-res{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);z-index:50;display:none;max-height:320px;overflow:auto}
.pick-res.on{display:block}
.pick-res a{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--line)}
.pick-res a:last-child{border-bottom:none}
.pick-res a:hover{background:var(--card-h);color:var(--gold)}
.pick-res a span{color:var(--dim);font-size:11.5px}
.pick-res .none{padding:12px 14px;font-size:13px;color:var(--dim)}