:root{--bg:#141517;--panel:#1d1f22;--card:#212428;--line:#33373c;--ink:#e8e8e8;--mute:#9aa0a6;--accent:#ffb020;--ok:#1f6b3a;--bad:#6f2626}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.view{position:fixed;inset:0;overflow:auto}.view.center{display:flex;align-items:center;justify-content:center}
.accent{color:var(--accent)}.mute{color:var(--mute)}.small{font-size:12px}.grow{flex:1}.err{color:#ff7a7a;min-height:1.4em;margin-top:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.btn{display:inline-block;padding:8px 13px;border-radius:7px;border:1px solid var(--line);background:#2a2d32;color:var(--ink);cursor:pointer;font:inherit}
.btn:hover{background:#343840}.btn.ok{background:var(--ok);border-color:#2c8a4c}.btn.ok:hover{background:#237a43}
.btn.bad{background:var(--bad);border-color:#8f3434}.btn.small{padding:4px 9px;font-size:12px}.btn.big{padding:12px 20px;font-size:16px}.btn.wide{width:100%;margin-top:6px}
.bar{height:46px;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;background:#333}
.b-accepted,.b-confirmed{background:#1f6b3a}.b-rejected{background:#6f2626}.b-draft{background:#5a4a1a}.b-corrected{background:#1f4f7a}.b-review{background:#6a3fa0}
.auth{width:400px}.auth form{margin-top:14px}.auth .hint{font-size:12px;color:var(--mute);margin-top:10px}.auth h1{margin:0 0 4px}.auth label{display:block;margin:10px 0 0;color:var(--mute);font-size:12px}
input{width:100%;padding:9px;margin-top:4px;background:#15171a;color:var(--ink);border:1px solid #444;border-radius:6px;font:inherit}
.tabs{display:flex;gap:4px;margin:14px 0 4px}.tabs button{flex:1;background:none;border:1px solid var(--line);color:var(--mute);padding:6px;border-radius:6px;cursor:pointer;font:inherit}
.tabs button.on{background:#2d3036;color:var(--ink)}.tabs.small button{flex:none;padding:3px 9px;font-size:12px}
.home{max-width:1060px;margin:24px auto;display:grid;grid-template-columns:1.2fr 1fr;gap:18px;padding:0 16px;align-items:start}
.hero{grid-row:span 3}.lvl{display:flex;gap:14px;align-items:center}
.lvl-badge{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd070,#c77a00);color:#231500;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center}
.meter{height:9px;background:#2b2e33;border-radius:5px;overflow:hidden;margin:5px 0}.meter>div{height:100%;background:linear-gradient(90deg,#ffb020,#ffd070);width:0;transition:width .4s}
.wide-meter{width:220px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.stat{background:#1a1c1f;border:1px solid var(--line);border-radius:9px;padding:10px 12px}.stat b{display:block;font-size:22px}.stat span{color:var(--mute);font-size:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.board table{width:100%;border-collapse:collapse}.board td{padding:6px 4px;border-bottom:1px solid #2a2d31}.board tr.me td{color:var(--accent);font-weight:600}
.board td.n{text-align:right;color:var(--mute)}.row-between{display:flex;justify-content:space-between;align-items:center}.row-between h3{margin:0}
.small-card ol{padding-left:18px}
.done{text-align:center;width:560px}.done .actions{justify-content:center}.done .stats{text-align:left}.big-emoji{font-size:54px}
.pts{color:var(--accent);font-weight:700}
.nofeat{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:4;background:#2b2440;border:1px solid #6a4fb0;color:#e2d8ff;padding:7px 14px;border-radius:8px;font-size:13px;margin-left:-145px;pointer-events:none}
.tag{float:right;font-size:11px;padding:1px 7px;border-radius:9px;background:#2d3036;color:var(--mute)}.tag.new{background:#233a5c;color:#9cc7ff}.tag.old{background:#1f3b2a;color:#8fe0aa}
/* annotator */
#main{position:absolute;top:46px;bottom:0;left:0;right:290px}
#stage{position:absolute;inset:0;overflow:hidden;cursor:crosshair;background:#0d0e0f}
#wrap{position:absolute;left:0;top:0;transform-origin:0 0}#wrap img{display:block;user-select:none;-webkit-user-drag:none}
#wrap svg{position:absolute;left:0;top:0;overflow:visible}
#side{position:absolute;top:46px;bottom:0;right:0;width:290px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
.sec{padding:10px 12px;border-bottom:1px solid var(--line)}.sec.tight{padding-bottom:4px}.sec h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.sec.btns{display:flex;gap:6px;flex-wrap:wrap}.sec input[type=range]{padding:0}
.cls{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;cursor:pointer}.cls:hover{background:#2a2d31}.cls.cur{background:#30343a;outline:1px solid #555}
.chip{width:12px;height:12px;border-radius:3px;flex:none}.key{margin-left:auto;color:var(--mute);font-family:ui-monospace,Menlo,monospace}
#boxes{flex:1;overflow:auto;padding:6px 8px}
.row{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:12px}.row:hover{background:#2a2d31}.row.sel{background:#3a3f46}.row .src{margin-left:auto;color:var(--mute)}
.sub{font-size:12px;padding:3px 4px;border-radius:4px;cursor:pointer}.sub:hover{background:#2a2d31}.sub.on{background:#3a3f46}
.pop{position:fixed;display:none;background:#25282c;border:1px solid #555;border-radius:8px;padding:6px;z-index:10;box-shadow:0 6px 24px #000a}.pop .cls{min-width:200px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2f34;border:1px solid #555;padding:8px 14px;border-radius:8px;display:none;z-index:20}
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:30}
.help{max-width:760px;max-height:85vh;overflow:auto}.help td{padding:3px 14px 3px 0;vertical-align:top}.help td:first-child{font-family:ui-monospace,Menlo,monospace;color:#ffd27a;white-space:nowrap}
.mission .meter.tall{height:16px;border-radius:8px}.mission h3,.badges-card h3{margin:0}
.rank{margin:14px 0 0;font-size:15px}.rank b{color:var(--accent)}.tier{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:10px;background:linear-gradient(90deg,#7a4dff,#ff5ac8);color:#fff;font-weight:700;font-size:12px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;margin-top:10px}
.badge-i{text-align:center;padding:8px 4px;border-radius:9px;background:#1a1c1f;border:1px solid var(--line);font-size:11px;position:relative}
.badge-i .ic{font-size:26px;display:block}.badge-i.locked{opacity:.38;filter:grayscale(1)}
.badge-i .bar{height:3px;background:#2b2e33;border-radius:2px;margin-top:4px;overflow:hidden}.badge-i .bar div{height:100%;background:var(--accent)}
.unlock{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:#2a2240;border:1px solid #7a4dff;border-radius:12px;padding:12px 18px;z-index:40;font-size:15px;box-shadow:0 8px 30px #000c;animation:pop .35s ease-out}
.unlock .ic{font-size:30px;vertical-align:middle;margin-right:8px}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.small-card{grid-column:1/-1}
@media (max-width:820px){.home{grid-template-columns:1fr}.hero{grid-row:auto}.done,.auth{width:92vw}}
.sets-wrap{max-width:1060px;margin:24px auto;padding:0 16px}.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.set{cursor:pointer;transition:border-color .15s}.set:hover{border-color:var(--accent)}.set.cur{border-color:#7a6a3a}.set h3{margin:0}
.set .pl{margin-top:12px;font-size:13px}.meter.mine>div{background:linear-gradient(90deg,#4f8bff,#8fb8ff)}
.img-err{position:absolute;top:40%;left:50%;transform:translateX(-50%);background:#3a2323;border:1px solid #8f3434;padding:10px 16px;border-radius:8px}