:root { --ink:#17181c; --muted:#7a808c; --bg:#f5f6f8; --line:#e8eaee; --brand:#2f6bff; --brand-soft:#eaf0ff; --ok:#1fa971; --ok-soft:#e4f6ee; --warn:#e8890c; --warn-soft:#fff3df; --danger:#e5566d; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.65 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:24px; padding:10px 28px; background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; } .ver { font-size:12px; color:var(--brand); background:var(--brand-soft); padding:1px 8px; border-radius:10px; margin-left:4px; }
.tabs { display:flex; gap:6px; flex:1; } .tabs button { border:0; background:none; padding:8px 18px; border-radius:20px; font-size:15px; cursor:pointer; color:var(--muted); position:relative; }
.tabs button.on { background:var(--ink); color:#fff; } .badge { position:absolute; top:0; right:2px; background:var(--warn); color:#fff; font-style:normal; font-size:11px; border-radius:9px; padding:0 6px; }
.who { font-size:13px; color:var(--muted); } .who a { color:var(--brand); text-decoration:none; }
main { max-width:1180px; margin:20px auto 60px; padding:0 20px; }
.card { background:#fff; border-radius:18px; padding:22px 24px; margin-bottom:18px; box-shadow:0 2px 14px rgba(23,24,28,.04); }
.center { text-align:center; max-width:560px; margin:60px auto; } .grid2 { display:grid; grid-template-columns:1fr 1.15fr; gap:18px; align-items:start; }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } .top { flex-wrap:wrap; gap:8px; } }
h2,h3 { margin:0 0 10px; } .sub { color:var(--muted); font-size:13px; font-weight:400; } .tip { color:#9aa0ab; font-size:12.5px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; } .between { justify-content:space-between; } .row.center { justify-content:center; }
.btn { border:1px solid var(--line); background:#fff; padding:9px 18px; border-radius:12px; cursor:pointer; font-size:14.5px; } .btn:hover { border-color:#c9ccd3; }
.btn.brand { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 6px 16px rgba(47,107,255,.25); } .btn.ghost { background:transparent; } .btn.small { padding:4px 12px; font-size:13px; border-radius:9px; } .btn.dark { background:var(--ink); color:#fff; border-color:var(--ink); }
input, textarea, select { border:1px solid var(--line); border-radius:12px; padding:9px 12px; font:inherit; background:#fff; } textarea { width:100%; resize:vertical; } #q { flex:1; }
.drop { border:2px dashed #cfd3dc; border-radius:16px; padding:32px 16px; text-align:center; cursor:pointer; transition:.15s; } .drop.hot, .drop:focus { border-color:var(--brand); background:var(--brand-soft); outline:0; }
.big { font-size:42px; line-height:1.2; } .link { color:var(--brand); cursor:pointer; text-decoration:underline; }
.preview img { max-width:100%; max-height:300px; border-radius:12px; display:block; margin-bottom:8px; }
hr { border:0; border-top:1px solid var(--line); margin:18px 0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; } .chip { padding:3px 14px; border-radius:20px; border:1px solid var(--line); background:#fff; font-size:13.5px; color:var(--muted); cursor:pointer; } .chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.tag { display:inline-block; padding:1px 10px; border-radius:7px; font-size:12px; font-weight:600; margin-right:6px; background:#f0f1f4; color:var(--muted); }
.empty { text-align:center; padding:50px 10px; color:#8b9099; }
.err { color:var(--danger); min-height:1.4em; } .busy { color:var(--brand); } .center .err { margin:6px 0; }
.q { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #f1f2f5; } .q .bar { width:5px; border-radius:3px; } .q .body { flex:1; cursor:pointer; } .q .qt { margin:4px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ops { display:flex; gap:12px; align-items:center; font-size:13px; } .ops a { color:var(--brand); cursor:pointer; } .ops a.del { color:var(--danger); } .star { font-size:20px; cursor:pointer; color:#c9ccd3; user-select:none; } .star.on { color:#f5b301; }
.qcard { font-size:18px; font-weight:600; line-height:1.7; margin:10px 0; }
.warn { background:var(--warn-soft); border-radius:14px; padding:12px 16px; margin:10px 0; color:#8a5a10; font-size:14px; } .warn b { color:var(--warn); }
.fig { background:#f7f8fa; border-radius:12px; padding:10px 14px; margin:8px 0; } .fml { display:inline-block; background:#f1f4ff; color:#1b46b8; border-radius:8px; padding:2px 10px; margin:3px 6px 3px 0; font-family:Consolas,monospace; }
.step { border-left:3px solid #e3e5ea; margin:14px 0 14px 10px; padding-left:18px; } .step.on { border-color:var(--brand); } .step h4 { margin:0 0 6px; }
.hint { background:var(--brand-soft); color:#1b46b8; border-radius:12px; padding:10px 14px; } .ans { background:var(--ok-soft); color:#0f7a52; border-radius:12px; padding:12px 16px; font-size:17px; font-weight:700; }
.pit { background:var(--warn-soft); color:#8a5a10; border-radius:12px; padding:8px 14px; margin-top:8px; font-size:14px; } .vari { background:#f7f8fa; border-radius:10px; padding:8px 12px; margin:6px 0; }
.chat .b1 { background:#eef2ff; border-radius:14px 14px 3px 14px; padding:8px 14px; margin:8px 0 4px 60px; } .chat .b2 { background:#f5f6f8; border-radius:14px 14px 14px 3px; padding:8px 14px; margin:4px 60px 10px 0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } .stat { background:#fff; border-radius:16px; padding:18px; text-align:center; } .stat b { font-size:30px; display:block; }
.bars .brow { display:grid; grid-template-columns:90px 1fr 60px; gap:10px; align-items:center; margin:8px 0; } .track { height:10px; background:#eef0f3; border-radius:6px; overflow:hidden; } .fill { height:10px; border-radius:6px; background:var(--ink); }
.flash { background:#fff; border-radius:20px; padding:30px 34px; box-shadow:0 8px 30px rgba(23,24,28,.06); min-height:240px; } .flash .qcard { font-size:21px; }
.progress { height:8px; background:#e3e5ea; border-radius:5px; overflow:hidden; margin-bottom:16px; } .progress div { height:8px; background:var(--brand); transition:.3s; }
.pq { display:flex; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin:8px 0; cursor:pointer; } .pq.on { border-color:var(--brand); background:#f6f9ff; } .pq .n { width:28px; height:28px; border-radius:8px; background:#f0f1f4; text-align:center; font-weight:700; flex-shrink:0; } .pq.on .n { background:var(--brand); color:#fff; }
.aitip { font-size:12.5px; color:#9aa0ab; background:#f0f1f4; border-radius:10px; padding:8px 12px; margin:10px 0; }