:root{--coal:#0A0A0B;--raise:#141618;--line:#2A2D31;--ember:#FF6B1A;--hot:#FF9A52;--bone:#F6F0E8;--stone:#A69E91}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--coal);color:var(--bone);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
.btn{display:block;width:100%;min-height:54px;border:0;border-radius:12px;background:var(--ember);color:#111;font-weight:800;font-size:17px;letter-spacing:.02em;cursor:pointer}
.btn:active{background:var(--hot)}
.btn.ghost{background:transparent;color:var(--bone);border:2px solid var(--line)}
/* login */
body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 0,#22160d 0,var(--coal) 60%)}
.login-card{width:100%;max-width:400px;background:var(--raise);border:1px solid var(--line);border-top:4px solid var(--ember);border-radius:16px;padding:28px 22px}
.login-card .logo{display:block;width:230px;max-width:80%;margin:0 auto 6px}
.login-card h1{text-align:center;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin:6px 0 22px}
label{display:block;font-size:14px;color:var(--stone);margin-bottom:16px}
input,textarea,select{display:block;width:100%;margin-top:6px;min-height:52px;padding:12px 14px;background:#0d0e10;border:1.5px solid var(--line);border-radius:10px;font-size:17px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ember)}
.pw{position:relative;display:block}.pw input{padding-right:58px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);margin-top:3px;width:50px;height:46px;border:0;background:none;color:var(--stone);cursor:pointer}
.eye .slash{display:none}.eye.on .slash{display:inline}.eye.on{color:var(--ember)}
.err{background:#3a1410;border:1px solid #7a2a1d;color:#ffb8a8;padding:10px 12px;border-radius:10px;font-size:15px}
/* app */
.hdr{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#16181A;border-bottom:3px solid var(--ember)}
.hdr .logo{height:34px}
.hdr-r{display:flex;gap:8px}
.chip{min-height:40px;padding:8px 14px;border-radius:20px;border:1.5px solid var(--line);background:none;color:var(--bone);font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
#root{max-width:720px;margin:0 auto;padding:16px 14px 120px}
.meta{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:18px}
.meta h1{margin:0 0 12px;font-size:22px}
.prog{font-size:14px;color:var(--stone);margin-top:4px}.prog b{color:var(--hot)}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--ember);transition:width .2s}
.topic{margin:26px 0 10px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);border-bottom:1px solid var(--line);padding-bottom:6px}
.q{background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.q.done{border-left:4px solid var(--ember)}
.qt{display:flex;gap:10px;font-weight:600;font-size:16.5px}
.qn{flex:0 0 30px;height:30px;border-radius:50%;background:#2a1a0f;color:var(--hot);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.hint{font-size:12.5px;color:var(--stone);margin:8px 0 0 40px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 10px}
.opt{min-height:46px;padding:10px 16px;border-radius:24px;border:1.5px solid var(--line);background:#0d0e10;font-size:15.5px;font-weight:600;cursor:pointer}
.opt[aria-pressed=true]{background:var(--ember);border-color:var(--ember);color:#111}
.q textarea{min-height:56px;resize:vertical;font-size:16px}
.actions{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(10,10,11,.96);border-top:1px solid var(--line)}
.actions .btn{flex:1}.actions .ghost{flex:0 0 34%}
.saved{position:fixed;right:14px;bottom:86px;background:#16181A;border:1px solid var(--line);padding:6px 12px;border-radius:16px;font-size:13px;color:var(--stone);opacity:0;transition:opacity .3s}
.saved.show{opacity:1}