:root{--bg:#0b0f1a;--panel:#11182a;--panel-2:#1a2238;--text:#e8ecff;--muted:#96a3c8;--accent:#7c4dff;--good:#31d0aa;--danger:#ff5f6d}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
.app-shell{min-height:100vh;max-width:520px;margin:0 auto;padding-bottom:74px}
.topbar{position:sticky;top:0;background:rgba(11,15,26,.95);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #202c4a;z-index:8}
.screen{display:none;padding:14px}.screen.active{display:block}
.card{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid #263457;border-radius:16px;padding:12px;margin-bottom:12px}
.hero{display:flex;gap:12px;align-items:center}
.avatar{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:#222d4a}
.row{display:flex;align-items:center}.between{justify-content:space-between}.gap{gap:8px;flex-wrap:wrap}.tight{padding-left:18px;margin:6px 0}
input,select,textarea,button{width:100%;background:#0d1426;color:var(--text);border:1px solid #2c3c64;border-radius:12px;padding:10px;margin-top:6px}
label{display:block;margin-bottom:8px;color:var(--muted);font-size:.92rem}
button{cursor:pointer}.primary{background:var(--accent);border-color:transparent;font-weight:600}.danger{background:var(--danger);border-color:transparent}
.chip{padding:4px 10px;border-radius:100px;background:#212b49;color:#c8b4ff;font-size:.85rem}
.progress{height:10px;border-radius:999px;background:#212b49;overflow:hidden;margin:8px 0}.progress>div{height:100%;width:0%;background:linear-gradient(90deg,#5c8cff,var(--accent))}
.meta{color:var(--muted);font-size:.86rem}.motd-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quest-complete{border-color:var(--good)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);display:grid;grid-template-columns:repeat(5,1fr);background:#0f1629;border-top:1px solid #253457}
.bottom-nav button{border:0;border-radius:0;background:transparent;padding:11px 6px;color:var(--muted);margin:0}.bottom-nav button.active{color:#fff;background:#1b2645}
.buttonlike{background:#0d1426;color:var(--text);border:1px solid #2c3c64;border-radius:12px;padding:10px;text-align:center}
dialog{border:0;background:transparent;width:100%;max-width:520px}dialog::backdrop{background:rgba(0,0,0,.65)}
.badge{padding:8px;border:1px solid #2c3c64;border-radius:10px;margin-bottom:6px}.badge.done{border-color:var(--good)}.mini-bar{height:8px;background:#212b49;border-radius:999px;overflow:hidden;margin:6px 0}.mini-bar>div{height:100%;background:#6f7dff}