:root {
    --primary: #1e40af;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --accent: #06b6d4;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg: #f1f5f9;
    --surface: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
    --sidebar-text: rgba(255, 255, 255, 0.75);
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.12);
    --sidebar-active-bg: rgba(255, 255, 255, 0.18);
}
* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; margin:0; }

/* ── Setup / Login screen ── */
.setup-wrap { min-height: 100dvh; display:flex; align-items:center; justify-content:center; padding: 2rem 1.25rem; background:#f8fafc; }
.setup-card { width:100%; max-width: 420px; background:var(--surface); border-radius:20px; padding:2rem 1.75rem; box-shadow: 0 20px 60px rgba(15,23,42,.1), 0 4px 16px rgba(15,23,42,.06); }
.setup-icon { width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin-bottom:1rem; }
.setup-card h1 { font-size:1.3rem; font-weight:700; margin-bottom:.25rem; }
.setup-card p { font-size:.85rem; color:var(--text-muted); margin-bottom:1.25rem; }
.setup-card label { font-size:.8rem; font-weight:600; color:var(--text); margin-bottom:.3rem; display:block; }
.setup-card .form-control { border-radius:10px; padding:.6rem .8rem; border-color:var(--border); font-size:.9rem; margin-bottom:1rem; }
.setup-section-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin: 1rem 0 .5rem; padding-top:.5rem; border-top:1px dashed var(--border); }
.setup-section-label:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.btn-primary-app { background:var(--primary); border:none; border-radius:10px; padding:.65rem; font-weight:600; width:100%; color:#fff; transition:opacity .15s; }
.btn-primary-app:hover { opacity:.9; color:#fff; }

/* ── App layout ── */
.app-layout { display:flex; min-height:100dvh; }
.sidebar { width:230px; flex-shrink:0; background:linear-gradient(180deg,var(--primary-dark),var(--primary)); display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:1030; transition:transform .2s; }
.sidebar-brand { padding:1.4rem 1.25rem 1rem; display:flex; align-items:center; gap:.6rem; }
.sidebar-brand .icon { width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem; }
.sidebar-brand span { color:#fff; font-weight:700; font-size:1rem; }
.sidebar-nav { flex:1; padding: .5rem .75rem; display:flex; flex-direction:column; gap:.2rem; }
.sidebar-item { display:flex; align-items:center; gap:.7rem; padding:.65rem .85rem; border-radius:10px; background:none; border:none; color:var(--sidebar-text); font-size:.88rem; font-weight:500; text-align:left; cursor:pointer; transition:background .15s,color .15s; text-decoration:none; }
.sidebar-item i { width:18px; text-align:center; }
.sidebar-item:hover { background:var(--sidebar-hover); color:var(--sidebar-text-active); text-decoration:none; }
.sidebar-item.active { background:var(--sidebar-active-bg); color:var(--sidebar-text-active); }
.sidebar-footer { padding: .75rem; border-top:1px solid rgba(255,255,255,.12); }

.app-content { flex:1; margin-left:230px; display:flex; flex-direction:column; min-width:0; }
.app-header { background:var(--surface); border-bottom:1px solid var(--border); padding: 1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.app-header h4 { margin:0; font-size:1.1rem; font-weight:700; }
.app-header p { margin:0; font-size:.78rem; color:var(--text-muted); }
.app-main { flex:1; padding: 1.5rem; max-width:1100px; width:100%; margin:0 auto; }

.btn-mobile-toggle { display:none; border:1px solid var(--border); background:#fff; width:36px;height:36px;border-radius:8px; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .app-content { margin-left:0; }
    .btn-mobile-toggle { display:inline-flex; align-items:center; justify-content:center; }
}

/* ── Stat cards ── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.5rem; }
@media (max-width:767.98px){ .stat-grid { grid-template-columns:repeat(2,1fr); } }
.stat-card { background:var(--surface); border-radius:var(--radius-sm); padding:1rem 1.1rem; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; align-items:center; gap:.75rem; }
.stat-card .stat-icon { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0; }
.stat-icon.blue { background:#dbeafe; color:var(--primary); }
.stat-icon.green { background:#d1fae5; color:var(--success); }
.stat-icon.orange { background:#fef3c7; color:var(--warning); }
.stat-icon.red { background:#fee2e2; color:var(--danger); }
.stat-value { font-size:1.35rem; font-weight:700; line-height:1.15; }
.stat-label { font-size:.74rem; color:var(--text-muted); }

/* ── Section / cards ── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:.75rem; flex-wrap:wrap; }
.section-header h2 { font-size:1.05rem; font-weight:700; margin:0; }
.link-see-all { font-size:.82rem; font-weight:600; color:var(--primary); text-decoration:none; }
.link-see-all:hover { text-decoration:underline; }
.app-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.tenant-row { padding: 1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.tenant-row:last-child { border-bottom:none; }
.tenant-name { font-weight:700; font-size:.95rem; }
.tenant-meta { font-size:.78rem; color:var(--text-muted); }
.badge-status { font-size:.7rem; font-weight:600; padding:.32em .7em; border-radius:6px; white-space:nowrap; }
.badge-status.active { background:#d1fae5; color:#065f46; }
.badge-status.inactive { background:#fee2e2; color:#991b1b; }
.badge-quota { font-size:.72rem; font-weight:600; padding:.28em .6em; border-radius:6px; background:#dbeafe; color:#1e40af; }
.tenant-actions { margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap; }
.btn-icon-sm { width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;color:var(--text-muted);font-size:.8rem;transition:all .15s; cursor:pointer; }
.btn-icon-sm:hover { background:var(--bg); color:var(--text); }
.btn-icon-sm.danger:hover { background:#fee2e2; color:var(--danger); border-color:#fecaca; }

.empty-state { text-align:center; padding:3rem 1.5rem; color:var(--text-muted); }
.empty-state i { font-size:2.2rem; opacity:.35; margin-bottom:.75rem; display:block; }

.apikey-box { font-family:'DM Mono',monospace,monospace; font-size:.82rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.6rem .75rem; word-break:break-all; display:flex; align-items:center; gap:.5rem; }

#toastHost { position:fixed; bottom:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.app-toast { background:#111827; color:#fff; padding:.7rem 1rem; border-radius:10px; font-size:.85rem; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.5rem; min-width:220px; animation: toastIn .2s ease; }
.app-toast.ok i { color:var(--success); }
.app-toast.err { background:#7f1d1d; }
.app-toast.err i { color:#fecaca; }
@keyframes toastIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.skeleton { background: linear-gradient(90deg,#e2e8f0 25%,#eef2f6 37%,#e2e8f0 63%); background-size:400% 100%; animation: sk 1.4s ease infinite; border-radius:10px; height:70px; margin-bottom:.6rem; }
@keyframes sk { 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }