:root { --bg: #0b1220; --muted:#90a3b0; --card:#0f172a; --line:#1f2937; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: linear-gradient(180deg, #0b1220, #0b1220 40%, #0d1b2a 100%); color: #e5e7eb; display: grid; place-items: center; }


.card { width: min(920px, 92vw); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.logo { width: 64px; height: 64px; border-radius: 12px; }
header { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; margin-bottom: 12px; }
header h1 { margin: 0; font-size: 1.35rem; }
.muted { color: var(--muted); }
.bold { font-weight: 700; }


.btn { background: #2563eb; border: none; color: white; padding: 12px 16px; border-radius: 12px; cursor: pointer; font-weight: 700; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-outline { background: transparent; border: 1px solid #334155; color: #e5e7eb; }


.user-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; }
.avatar { width: 40px; height: 40px; border-radius: 999px; }


.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-top: 12px; }
.tile { border:1px solid var(--line); border-radius:12px; padding:16px; background: #111827; }


.error { color: #fca5a5; }