:root {
    --brand: #2563eb;
    --bg: #f8fafc;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --card: #ffffff;
    --green: #059669;
    --yellow: #d97706;
    --red: #dc2626;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.sidebar { background:#fff; border-right:1px solid var(--border); padding:20px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; margin-bottom:28px; }
.brand span, .brand-mark { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:var(--brand); color:#fff; border-radius:12px; font-weight:900; }
.sidebar nav { display:grid; gap:6px; }
.sidebar nav a { padding:12px 14px; color:var(--muted); border-radius:14px; font-weight:700; }
.sidebar nav a.active, .sidebar nav a:hover { background:#eff6ff; color:var(--brand); }
.org-switcher { position:absolute; left:20px; right:20px; bottom:20px; display:grid; gap:4px; border:1px solid var(--border); border-radius:18px; padding:14px; }
.org-switcher small { color:var(--muted); }

.main { min-width:0; padding:0 24px 32px; }
.topbar { height:72px; display:flex; align-items:center; justify-content:flex-end; gap:12px; position:relative; }
.topbar input { margin-right:auto; width:min(520px,45vw); border:1px solid var(--border); border-radius:14px; padding:12px 14px; outline:none; }
.primary, .button { border:0; background:var(--brand); color:white; border-radius:14px; padding:12px 16px; font-weight:900; display:inline-flex; justify-content:center; align-items:center; }
.ghost { border:1px solid var(--border); background:white; color:var(--text); border-radius:14px; padding:11px 15px; font-weight:800; }
.create-menu { position:absolute; top:64px; right:0; background:white; border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 50px rgba(15,23,42,.12); padding:8px; display:none; z-index:10; width:230px; }
.create-menu.show { display:grid; }
.create-menu button { background:white; border:0; text-align:left; padding:11px 12px; border-radius:12px; font-weight:700; }
.create-menu button:hover { background:#f1f5f9; }

.page-title h1 { margin:0; font-size:34px; }
.page-title p { color:var(--muted); margin-top:6px; }
.setup-card { margin-top:24px; background:linear-gradient(135deg,#eff6ff,#fff); border:1px solid #bfdbfe; border-radius:24px; padding:22px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.setup-card h2 { margin:0 0 6px; }
.setup-card p { margin:0; color:var(--muted); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:24px; box-shadow:0 10px 30px rgba(15,23,42,.06); padding:22px; }
.card span { color:var(--muted); font-weight:800; }
.card strong { display:block; font-size:34px; margin-top:8px; }
.card small { color:var(--green); font-weight:800; }
.content-grid { display:grid; grid-template-columns:1fr 360px; gap:16px; margin-top:16px; align-items:start; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.module { border:1px solid var(--border); border-radius:18px; padding:16px; display:grid; gap:8px; }
.module.enabled { background:#ecfdf5; border-color:#bbf7d0; }
.module.enabled span { color:var(--green); }
.health { display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding:12px 0; }
.ok { color:var(--green); }
.warn { color:var(--yellow); }
.muted { color:var(--muted); }
.full { width:100%; margin-top:16px; justify-content:center; }

.modal, .settings { position:fixed; inset:0; background:rgba(15,23,42,.35); display:none; place-items:center; z-index:30; padding:24px; }
.modal.show, .settings.show { display:grid; }
.modal-card, .settings-card { position:relative; width:min(760px,100%); background:white; border-radius:26px; padding:28px; box-shadow:0 20px 70px rgba(15,23,42,.2); }
.close { position:absolute; top:18px; right:18px; border:0; background:#f1f5f9; border-radius:50%; width:36px; height:36px; }
.custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:18px; }
.custom-grid label { display:block; padding:8px 0; color:#334155; font-weight:700; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

/* Installer */
.installer-body { background:linear-gradient(135deg,#eff6ff,#f8fafc); min-height:100vh; }
.installer-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.installer-card { width:100%; max-width:780px; background:white; border:1px solid var(--border); border-radius:28px; padding:28px; box-shadow:0 20px 50px rgba(15,23,42,.1); }
.installer-card h1 { margin:12px 0 8px; }
.install-steps { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.install-steps span { background:#f1f5f9; color:var(--muted); padding:8px 10px; border-radius:999px; font-size:13px; font-weight:900; }
.install-steps span.active { background:#eff6ff; color:var(--brand); }
.check-list { display:grid; gap:10px; margin:20px 0; }
.check-list div { display:flex; justify-content:space-between; border:1px solid var(--border); border-radius:14px; padding:12px; }
.status-ok { color:var(--green); font-weight:900; }
.status-bad { color:var(--red); font-weight:900; }
.form-grid { display:grid; gap:14px; }
.form-grid label { display:grid; gap:6px; font-weight:800; color:#334155; }
.form-grid input, .form-grid select { width:100%; border:1px solid var(--border); border-radius:14px; padding:12px 14px; outline:none; }
.check-row { display:flex!important; align-items:center; gap:10px; }
.check-row input { width:auto; }
.alert-bad, .alert-good { border-radius:18px; padding:14px; margin:14px 0; }
.alert-bad { background:#fef2f2; color:#991b1b; }
.alert-good { background:#ecfdf5; color:#065f46; }

@media (max-width:1100px) {
    .app-shell { grid-template-columns:1fr; }
    .sidebar { display:none; }
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .content-grid { grid-template-columns:1fr; }
    .module-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
    .main { padding:0 14px 24px; }
    .topbar { height:auto; padding:16px 0; flex-direction:column; align-items:stretch; }
    .topbar input { width:100%; max-width:none; }
    .kpi-grid, .module-grid, .custom-grid { grid-template-columns:1fr; }
    .setup-card { flex-direction:column; align-items:flex-start; }
    .page-title h1 { font-size:28px; }
    .card { border-radius:18px; padding:18px; }
}