* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: #0b1020; color: #e5e7eb; }
.hidden { display: none !important; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: 380px; background: #111827; border: 1px solid #1f2937; border-radius: 16px; padding: 28px; display: grid; gap: 12px; }
.login-card h1 { margin: 0; }
.login-card p { margin: 0; color: #94a3b8; font-size: 14px; }
.login-card input { padding: 12px; border-radius: 10px; border: 1px solid #334155; background: #0f172a; color: #fff; }
.login-card button, .toolbar button, .sidebar-foot button, table button { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.error { color: #f87171; min-height: 18px; font-size: 14px; }
.link { color: #60a5fa; font-size: 14px; text-align: center; }
#admin-view { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: #111827; border-right: 1px solid #1f2937; display: flex; flex-direction: column; }
.brand { padding: 20px; font-weight: 700; border-bottom: 1px solid #1f2937; }
nav { display: grid; gap: 6px; padding: 12px; flex: 1; }
.nav { text-align: left; background: transparent; color: #cbd5e1; border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.nav.active, .nav:hover { background: #1f2937; border-color: #334155; }
.sidebar-foot { padding: 12px; border-top: 1px solid #1f2937; display: grid; gap: 8px; font-size: 13px; color: #94a3b8; }
.content { padding: 24px; overflow: auto; }
.page h2 { margin-top: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-card { background: #111827; border: 1px solid #1f2937; border-radius: 14px; padding: 18px; }
.stat-card .num { font-size: 28px; font-weight: 700; color: #60a5fa; }
.stat-card .label { color: #94a3b8; margin-top: 6px; font-size: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar input { padding: 8px 10px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #fff; }
table { width: 100%; border-collapse: collapse; background: #111827; border-radius: 12px; overflow: hidden; }
th, td { padding: 10px 12px; border-bottom: 1px solid #1f2937; text-align: left; font-size: 14px; vertical-align: top; }
th { background: #0f172a; color: #94a3b8; }
.status-active { color: #4ade80; }
.status-disabled { color: #f87171; }
.btn-danger { background: #dc2626; }
.btn-warn { background: #d97706; }