:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #0f0f14; color: #f3f3f6; }

.topbar { display:flex; gap:12px; align-items:center; padding:12px 16px; background:#161622; position:sticky; top:0; }
.brand { font-weight:700; }
.nav { display:flex; gap:8px; flex-wrap:wrap; }
.nav-btn { background:#23233a; color:#f3f3f6; border:0; padding:8px 10px; border-radius:10px; cursor:pointer; }
.nav-btn:hover { filter:brightness(1.1); }
button:disabled { cursor: not-allowed; }

.userbox { margin-left:auto; display:flex; gap:10px; align-items:center; }
.muted { opacity:.8; font-size:.9rem; }
.hidden { display:none !important; }
.app { padding:16px; }

.card { background:#161622; border:1px solid #26263a; border-radius:16px; padding:14px; margin-bottom:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.badge { background:#23233a; padding:6px 10px; border-radius:999px; font-size:.9rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }

.field { background:#23233a; border:1px solid #2f2f4a; border-radius:16px; padding:12px; cursor:pointer; min-height:92px; display:flex; flex-direction:column; justify-content:space-between; }
.field.ready { outline: 2px solid rgba(120, 255, 180, .35); }
.field .title { font-weight:700; }
.field .small { font-size:.85rem; opacity:.85; }