:root{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:#12131a;color:#e9e9f2;font:14px/1.6 "Microsoft YaHei",system-ui,sans-serif}
header{position:sticky;top:0;z-index:9;background:#12131af2;backdrop-filter:blur(8px);border-bottom:1px solid #272a36;padding:14px 20px 10px}
h1{margin:0 0 8px;font-size:20px}
h1 small{font-size:12px;color:#8f95ab;font-weight:400;margin-left:6px}
nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
nav button{background:#1d1f2a;color:#c9cee0;border:1px solid #2c3040;border-radius:999px;padding:5px 14px;cursor:pointer;font-size:13px}
nav button.on{background:#ffd76e;color:#1a1a1a;border-color:#ffd76e;font-weight:600}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#q{flex:1;min-width:220px;background:#1a1c26;border:1px solid #2c3040;color:#e9e9f2;border-radius:8px;padding:8px 12px}
.sw{font-size:13px;color:#a9b0c6}
main{padding:18px 20px 40px}
.sec{margin-bottom:34px}
.sec h2{font-size:17px;margin:0 0 4px;color:#ffd76e}
.sec .sub{color:#8f95ab;font-size:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
figure{margin:0;background:#1b1d27;border:1px solid #2a2e3c;border-radius:10px;padding:7px;text-align:center}
figure img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:7px;background:#0e0f14;pointer-events:none;user-select:none}
figcaption{font-size:12px;color:#c6cbdd;margin-top:5px;word-break:break-all}
.qk{display:inline-block;margin-top:6px;background:#2b6cff;color:#fff;text-decoration:none;border-radius:8px;padding:6px 14px;font-size:13px}
.qk.off{background:#2a2e3c;color:#8f95ab;pointer-events:none}
.hint{color:#8f95ab}
footer{border-top:1px solid #272a36;padding:16px 20px 40px;color:#8f95ab;font-size:12px}
footer .wm{color:#6d7488}
footer .notice{background:#1d1a12;border:1px solid #4a3f1e;color:#ffd76e;border-radius:8px;
  padding:10px 14px;font-size:12.5px;line-height:1.7;max-width:900px}
footer .notice strong{color:#ffe89a}
