:root { color-scheme: dark; --bg: #0f172a; --panel: #1e293b; --border: #334155; --text: #f8fafc; --muted: #94a3b8; --accent: #6366f1; --danger: #ef4444; --success: #10b981; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", sans-serif; display: grid; place-items: center; padding: 24px; }
.auth-panel { width: min(100%, 440px); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 28px; }
.admin-panel { width: min(100%, 900px); }
h1 { margin: 0 0 8px; font-size: 1.45rem; letter-spacing: 0; }
h2 { font-size: 1.05rem; margin: 28px 0 12px; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.5; }
label { display: block; margin: 16px 0 6px; color: #cbd5e1; font-size: .9rem; }
input, select { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
button, .button { border: 0; border-radius: 6px; padding: 10px 14px; background: var(--accent); color: white; font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
form > button { width: 100%; margin-top: 20px; }
.button.secondary, button.secondary { background: #334155; }
.button.danger, button.danger { background: var(--danger); }
.alert { padding: 10px 12px; border-radius: 6px; margin: 16px 0; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.5); }
.alert.success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.5); }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 20px; }
.actions form { margin: 0; }
.actions form > button { width: auto; margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); }
.inline-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.inline-form > div { flex: 1 1 160px; }
.inline-form > button { width: auto; margin: 0; }
.small { font-size: .82rem; }
@media (max-width: 680px) { .table-wrap { overflow-x: auto; } .auth-panel { padding: 20px; } }