:root {
  --bg: #0b0e14;
  --surface: #121826;
  --card: #162033;
  --text: #e6e9ef;
  --muted: #a9b0bd;
  --primary: #4f7cff;
  --accent: #5be7a9;
  --danger: #ff6b6b;
  --border: #24304a;
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
a { color: var(--accent); text-decoration: none; }
.container { max-width: 1100px; margin: 5rem auto 3rem; padding: 0 1rem; }

.topbar { position: fixed; top:0; left:0; right:0; height:56px; background: var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 1rem; z-index:10; }
.brand a { color: var(--text); font-weight: 700; }
.nav { margin-left:1rem; display:flex; gap:1rem; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--text); }
.acct { margin-left:auto; display:flex; align-items:center; gap:.5rem; }

.card { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 1rem; margin-bottom:1rem; }
.card.link { display:block; }
.card .title { font-weight:700; }
.list { display:flex; flex-direction:column; gap:.75rem; }
.list-item { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; }

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: .75rem; }
.row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:.5rem .4rem; text-align:left; }

.btn { background:var(--primary); color:#fff; border:none; border-radius:10px; padding:.6rem .9rem; cursor:pointer; }
.btn:hover { opacity:.93; }
.btn.ghost { background: transparent; color: var(--text); border:1px solid var(--border); }
.btn.small { padding:.35rem .6rem; border-radius:8px; font-size:.9rem; }

.alert { background:#352a2a; border:1px solid #6e3a3a; border-radius:10px; padding:.7rem 1rem; margin:.6rem 0; }
.alert.success { background:#22352c; border-color:#396b53; }

.auth { display:grid; place-items:center; min-height:100vh; }
.auth-card { width:min(420px, 92vw); background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem; }
.auth-card h1 { margin-top:0; }
label { display:block; margin:.5rem 0; }
input, select { width:100%; padding:.55rem .65rem; border-radius:10px; background: var(--surface); color:var(--text); border:1px solid var(--border); }
details { margin-top:.5rem; }
.muted { color: var(--muted); font-size:.9rem; }