:root { --bg:#0b1220; --fg:#eaf0ff; --muted:rgba(234,240,255,.75); --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.12); }

body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--fg); }
a { color:inherit; text-decoration:none; }
.container { max-width: 1100px; margin: 0 auto; padding: 18px; }

.topbar { position: sticky; top:0; z-index: 10; background: var(--bg); border-bottom:1px solid rgba(255,255,255,.08); padding: 12px 18px; display:flex; gap:16px; align-items:center; justify-content:space-between; }
.brand { font-weight: 900; letter-spacing: .2px; }
.nav { display:flex; flex-wrap:wrap; gap:10px; }
.nav a { padding: 6px 10px; border-radius: 12px; }
.nav a:hover { background: rgba(255,255,255,.08); }

.footer { opacity:.7; padding: 18px; text-align:center; border-top: 1px solid rgba(255,255,255,.08); }

.hero { display:grid; gap:14px; }
.banner { width:100%; border-radius: 16px; border:1px solid var(--border); }
.hero-text h1 { margin: 0; font-size: 34px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.card { max-width: 420px; background: var(--card); padding: 16px; border-radius: 16px; border: 1px solid var(--border); display:grid; gap: 10px; }
label { font-weight: 700; font-size: 14px; }
input { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,.25); color: #fff; }
button { padding: 10px 12px; border: 0; border-radius: 12px; font-weight: 800; background: #2b6cff; color: white; cursor: pointer; }
button:hover { filter: brightness(1.07); }

.alert { max-width:420px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,0,0,.12); border: 1px solid rgba(255,0,0,.25); }

.row { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.btn-secondary { padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.btn-secondary:hover { background: rgba(255,255,255,.10); }

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow:hidden; display:block; }
.tile-top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding: 10px 12px; }
.pill { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(43,108,255,.18); border: 1px solid rgba(43,108,255,.35); }
.thumb { aspect-ratio: 16/9; background: rgba(0,0,0,.25); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tile-title { padding: 12px; font-weight: 800; }