:root {
    --bg: #f5f6fa;
    --panel: #ffffff;
    --text: #172033;
    --muted: #667085;
    --line: #e5e7ef;
    --primary: #111827;
    --primary-soft: #eef2ff;
    --success: #087443;
    --warning: #a15c00;
    --danger: #b42318;
    --radius: 16px;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; background:var(--bg); color:var(--text); }
a { color: inherit; text-decoration: none; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width: 270px; background:#0e1422; color:#fff; padding:22px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.brand-mark { width:42px; height:42px; border-radius:14px; background:#fff; color:#0e1422; display:grid; place-items:center; font-weight:900; }
.brand span { display:block; color:#aab3c5; font-size:13px; margin-top:2px; }
.sidebar nav { display:grid; gap:6px; }
.sidebar nav a { padding:12px 14px; border-radius:12px; color:#d8deea; font-weight:600; }
.sidebar nav a:hover, .sidebar nav a.active { background:#1d2638; color:#fff; }
.main { flex:1; min-width:0; }
.topbar { padding:24px 30px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#fff; }
.topbar h1 { margin:0; font-size:25px; }
.topbar p { margin:6px 0 0; color:var(--muted); }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.content { padding:28px 30px; }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 8px 24px rgba(15,23,42,.04); }
.card h2, .card h3 { margin-top:0; }
.stat { font-size:32px; font-weight:800; }
.muted { color:var(--muted); }
.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; }
th, td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#fafafa; font-size:13px; color:#475467; }
tr:last-child td { border-bottom:0; }
.form { display:grid; gap:16px; max-width:1050px; }
.form-row { display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display:grid; gap:6px; font-weight:700; font-size:14px; }
input, select, textarea { width:100%; padding:11px 12px; border:1px solid #cfd4df; border-radius:12px; font:inherit; background:#fff; }
textarea { min-height:120px; }
.check-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
.check-grid label, .inline-check { display:flex; align-items:center; gap:8px; font-weight:600; }
.check-grid input, .inline-check input { width:auto; }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:var(--primary); color:#fff; border:1px solid var(--primary); font-weight:800; cursor:pointer; }
.btn.secondary { background:#fff; color:#111827; border-color:#d0d5dd; }
.btn.danger { background:#b42318; border-color:#b42318; }
.btn.small { padding:7px 10px; font-size:13px; }
.badge { display:inline-flex; align-items:center; padding:4px 9px; border-radius:99px; font-size:12px; font-weight:800; background:#eef2ff; color:#3538cd; }
.badge.active, .badge.success { background:#ecfdf3; color:#067647; }
.badge.suspended, .badge.warning, .badge.expired_grace { background:#fffaeb; color:#b54708; }
.badge.expired, .badge.revoked, .badge.danger { background:#fef3f2; color:#b42318; }
.alert { padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:#fff; margin-bottom:16px; }
.alert-success { border-color:#abefc6; background:#ecfdf3; color:#067647; }
.alert-danger { border-color:#fecdca; background:#fef3f2; color:#b42318; }
.alert-info { border-color:#b2ddff; background:#eff8ff; color:#175cd3; }
.kv { display:grid; grid-template-columns:190px 1fr; gap:8px; margin:8px 0; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:#f2f4f7; border-radius:10px; padding:7px 9px; display:inline-block; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(430px,100%); }
@media (max-width: 900px) {
    .app-shell { display:block; }
    .sidebar { position:relative; width:100%; height:auto; }
    .topbar { display:block; }
    .topbar-actions { margin-top:14px; }
    .grid-2, .grid-3, .grid-4, .form-row, .check-grid { grid-template-columns:1fr; }
}
.badge.trial { background:#f0f9ff; color:#026aa2; }
.badge.pending, .badge.not_configured { background:#fffaeb; color:#b54708; }
.badge.ready, .badge.deployed { background:#ecfdf3; color:#067647; }
.badge.error, .badge.revoked, .badge.expired { background:#fef3f2; color:#b42318; }