:root{--bg:#f8fafc;--card:#fff;--accent:#1e3a8a;--muted:#6b7280}
*{box-sizing:border-box}html,body,#app{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:#111}
.topbar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px;background:linear-gradient(90deg,var(--accent),#2563eb);color:#fff}
.brand{margin:0;font-size:18px;font-weight:800}.brand span{font-weight:400}
.menu-btn{background:transparent;border:0;color:#fff;font-size:20px}
.nav{display:flex;flex-direction:column;background:var(--card);padding:10px;border-bottom:1px solid #e6e6e6}
.nav.hidden{display:none}.nav a{padding:10px 6px;text-decoration:none;color:var(--accent);font-weight:600;border-radius:6px}
.main{padding:16px}.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 4px 10px rgba(2,6,23,.06);margin-bottom:12px}
.input{display:block;width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:8px;margin:8px 0}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid #fff}
.row{display:flex;gap:8px;align-items:center}.small{font-size:13px;color:var(--muted)}
.points{background:#ecfccb;padding:8px;border-radius:8px;color:#365314;font-weight:700}
@media(min-width:700px){.app{max-width:820px;margin:0 auto}.nav{flex-direction:row;gap:8px}.nav.hidden{display:flex}.menu-btn{display:none}}