:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --text: #121826;
    --muted: #667085;
    --border: #e4e7ec;
    --accent: #111827;
    --accent-soft: #eef2ff;
    --success-bg: #ecfdf3;
    --success-text: #027a48;
    --error-bg: #fef3f2;
    --error-text: #b42318;
    --radius: 18px;
    --shadow: 0 12px 32px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}
a { color: inherit; }
button, input { font: inherit; }
.topbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(18px, 4vw, 54px);
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; }
.brand-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:#fff; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.user-chip { color:var(--muted); max-width:240px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.page-wrap { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:42px 0 64px; }
.auth-grid { min-height:calc(100vh - 175px); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px, 6vw, 80px); align-items:center; }
.hero-panel h1 { font-size:clamp(2.4rem, 6vw, 5rem); line-height:.98; margin:12px 0 22px; max-width:850px; letter-spacing:-.055em; }
.hero-panel p { font-size:1.08rem; line-height:1.75; max-width:720px; color:var(--muted); }
.eyebrow { display:inline-flex; font-size:.78rem; text-transform:uppercase; letter-spacing:.15em; font-weight:800; color:#475467; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.auth-card { padding:clamp(24px, 4vw, 38px); }
.auth-card h2 { font-size:1.8rem; margin:0 0 6px; }
.muted { color:var(--muted); margin-top:0; }
.form-stack { display:grid; gap:16px; margin-top:24px; }
.form-stack label { display:grid; gap:7px; font-size:.92rem; font-weight:650; }
input { width:100%; border:1px solid #d0d5dd; border-radius:12px; padding:13px 14px; outline:none; background:#fff; color:var(--text); }
input:focus { border-color:#667085; box-shadow:0 0 0 4px rgba(102,112,133,.12); }
.btn { border:0; border-radius:12px; padding:11px 15px; cursor:pointer; font-weight:750; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-ghost { background:#f2f4f7; color:#344054; }
.btn-block { width:100%; padding:14px 18px; }
.auth-foot { text-align:center; color:var(--muted); margin:20px 0 0; }
.auth-foot a { color:var(--text); font-weight:750; }
.alert { margin:0 0 18px; padding:13px 15px; border-radius:12px; line-height:1.5; }
.alert-success { background:var(--success-bg); color:var(--success-text); }
.alert-error { background:var(--error-bg); color:var(--error-text); }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.page-heading h1 { margin:8px 0 4px; font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.045em; }
.page-heading p { margin:0; color:var(--muted); }
.status-pill { display:inline-flex; padding:8px 11px; border-radius:999px; font-size:.78rem; font-weight:800; background:#f2f4f7; white-space:nowrap; }
.status-pending_payment { background:#fffaeb; color:#b54708; }
.status-active { background:var(--success-bg); color:var(--success-text); }
.metric-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.metric-card { padding:24px; min-height:210px; }
.metric-card strong { display:block; font-size:1.8rem; margin:12px 0 16px; }
.metric-label { color:var(--muted); font-size:.84rem; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.metric-card p, .next-stage p { color:var(--muted); line-height:1.65; margin-bottom:0; }
.next-stage { margin-top:18px; padding:26px; }
.next-stage h2 { margin:0; }
.stage-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.stage-strip span { border:1px solid var(--border); padding:9px 12px; border-radius:999px; font-size:.84rem; color:var(--muted); }
.stage-strip .done { background:var(--accent); color:#fff; border-color:var(--accent); }
@media (max-width: 860px) {
    .auth-grid { grid-template-columns:1fr; padding-top:10px; }
    .hero-panel h1 { font-size:clamp(2.2rem, 12vw, 4.2rem); }
    .metric-grid { grid-template-columns:1fr; }
    .page-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 560px) {
    .page-wrap { width:min(100% - 22px, 1180px); padding-top:24px; }
    .topbar { padding-inline:12px; }
    .brand span:last-child { display:none; }
    .user-chip { display:none; }
    .auth-card { border-radius:15px; }
}

/* Stage 2 — multitenancy */
select, textarea {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    padding: 13px 14px;
    outline: none;
    background: #fff;
    color: var(--text);
    font: inherit;
}
textarea { resize: vertical; min-height: 96px; }
select:focus, textarea:focus { border-color:#667085; box-shadow:0 0 0 4px rgba(102,112,133,.12); }
.tenant-chip {
    display: inline-flex;
    align-items: center;
    max-width: 280px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: .8rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-nav { background:#fff; border-bottom:1px solid var(--border); }
.app-nav-inner {
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:9px 0;
    scrollbar-width:thin;
}
.app-nav a {
    text-decoration:none;
    color:#475467;
    font-size:.9rem;
    font-weight:750;
    padding:9px 12px;
    border-radius:10px;
    white-space:nowrap;
}
.app-nav a:hover { background:#f2f4f7; color:var(--text); }
.notice-card { margin-top:18px; padding:24px 26px; }
.notice-card h2 { margin:8px 0; font-size:1.25rem; }
.notice-card p { color:var(--muted); line-height:1.65; margin-bottom:0; }
.section-card { padding:26px; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:20px; }
.section-heading h2 { margin:5px 0 0; }
.two-column-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); gap:18px; align-items:start; }
.sticky-card { position:sticky; top:140px; }
.data-list, .tenant-list { display:grid; gap:10px; }
.data-row, .tenant-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border:1px solid var(--border);
    border-radius:14px;
    padding:15px 16px;
    background:#fff;
}
.data-row > div, .tenant-row > div { min-width:0; }
.data-row strong, .tenant-row strong { display:block; }
.data-row span:not(.status-pill), .tenant-row span:not(.status-pill), .data-row small {
    display:block;
    margin-top:4px;
    color:var(--muted);
    overflow-wrap:anywhere;
}
.data-row small { font-size:.78rem; }
.btn-secondary { background:#eef2f6; color:#344054; }
.onboarding-grid { align-items:start; padding-top:32px; }
.status-suspended, .status-disabled, .status-cancelled { background:#fef3f2; color:#b42318; }
.status-pending, .status-pending_payment { background:#fffaeb; color:#b54708; }

@media (max-width: 900px) {
    .two-column-grid { grid-template-columns:1fr; }
    .sticky-card { position:static; }
}
@media (max-width: 700px) {
    .tenant-chip { display:none; }
    .data-row, .tenant-row { align-items:flex-start; }
    .app-nav-inner { width:min(100% - 22px, 1180px); }
}

/* Stage 3 — RBAC */
.row-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.choice-box { border:1px solid var(--border); border-radius:14px; padding:14px; display:grid; gap:9px; min-width:0; }
.choice-box legend { padding:0 7px; font-size:.82rem; font-weight:800; color:#475467; }
.check-row { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:10px !important; font-weight:600 !important; }
.check-row input[type="checkbox"] { width:17px; height:17px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--accent); }
.check-row > span { min-width:0; }
.check-row small { display:block; margin-top:2px; color:var(--muted); font-size:.72rem; font-weight:500; overflow-wrap:anywhere; }
.empty-state { border:1px dashed #d0d5dd; border-radius:14px; padding:28px; text-align:center; color:var(--muted); }
.role-list { display:grid; gap:14px; }
.role-card { border:1px solid var(--border); border-radius:16px; padding:18px; background:#fff; }
.role-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.role-card-head strong { display:block; font-size:1.05rem; }
.role-card-head small { display:block; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.permission-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.permission-tags span { padding:6px 8px; border-radius:8px; background:#f2f4f7; color:#475467; font-size:.73rem; font-weight:700; overflow-wrap:anywhere; }
.compact-form { margin-top:18px; }
.inline-danger-form { margin-top:10px; display:flex; justify-content:flex-end; }
.btn-danger { background:#fef3f2; color:#b42318; border:1px solid #fecdca; }
.small-text { font-size:.83rem; line-height:1.55; }
.staff-row { align-items:flex-start; }
.roles-grid { grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); }
@media (max-width: 900px) { .roles-grid { grid-template-columns:1fr; } }
@media (max-width: 620px) { .row-actions { width:100%; justify-content:flex-start; } .staff-row { flex-direction:column; } }
.forbidden-wrap { min-height:100vh; display:grid; place-items:center; padding-block:32px; }
.forbidden-card { max-width:650px; width:100%; }
.forbidden-card h1 { margin:10px 0; font-size:clamp(2rem, 6vw, 3.4rem); letter-spacing:-.045em; }
.forbidden-card .btn { display:inline-block; text-decoration:none; margin-top:12px; }

/* Stage 4 — Subscription & Billing */
.link-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.stage4-section { margin-top:18px; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.plan-card { padding:26px; display:flex; flex-direction:column; gap:12px; }
.plan-card h2 { margin:2px 0 0; }
.plan-card p { color:var(--muted); line-height:1.6; flex:1; }
.plan-price { font-size:1.8rem; font-weight:850; letter-spacing:-.03em; margin:6px 0 8px; }
.plan-price small { font-size:.78rem; color:var(--muted); font-weight:650; letter-spacing:0; }
.invoice-card { max-width:720px; margin:0 auto; padding:28px; }
.invoice-card h1 { margin:8px 0 18px; }
.invoice-line { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--border); }
.invoice-line.total { font-size:1.2rem; border-bottom:0; padding-top:20px; }
.status-paid { background:var(--success-bg); color:var(--success-text); }
.status-unpaid, .status-expired { background:#fffaeb; color:#b54708; }
.status-failed, .status-rejected, .status-error { background:#fef3f2; color:#b42318; }
@media (max-width:900px){ .plan-grid{grid-template-columns:1fr;} }

/* Stage 5 - onboarding & customization */
.setup-progress-badge{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}.setup-progress-badge strong{font-size:2rem;line-height:1}.setup-progress-badge span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}.setup-overview{margin-bottom:1.25rem}.setup-progress-track{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-bottom:1rem}.setup-progress-track span{display:block;height:100%;background:currentColor;border-radius:inherit;transition:width .25s ease}.setup-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.65rem}.setup-check{display:flex;align-items:center;gap:.6rem;padding:.75rem .85rem;border:1px solid #e5e7eb;border-radius:.8rem}.setup-check.is-done{font-weight:600}.setup-check-icon{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;background:#f3f4f6}.setup-check.is-done .setup-check-icon{background:#dcfce7}.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.form-grid label{display:flex;flex-direction:column;gap:.35rem;font-weight:600}.form-grid input[type=text],.form-grid input[type=number],.form-grid input[type=color],.form-grid input[type=file],.form-grid select,.form-grid textarea{width:100%;box-sizing:border-box}.field-span-2{grid-column:1/-1}.check-field{flex-direction:row!important;align-items:center;align-self:end;min-height:42px}.check-field input{width:auto}.setup-infrastructure-card{display:flex;flex-direction:column;justify-content:space-between}.setup-finish-card{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.setup-finish-card h2{margin:.25rem 0}.setup-finish-card p{margin:0}.btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:900px){.setup-grid{grid-template-columns:1fr}.setup-finish-card{align-items:flex-start;flex-direction:column}}@media(max-width:640px){.form-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.setup-progress-badge{align-items:flex-start}.setup-checklist{grid-template-columns:1fr}}

.brand-logo{width:34px;height:34px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--border);}