:root {
  --ctl-sidebar: #101828;
  --ctl-sidebar-soft: #182230;
  --ctl-accent: #6558f5;
  --ctl-accent-dark: #5145cd;
  --ctl-accent-soft: #f0efff;
  --ctl-cyan: #06aed4;
  --ctl-bg: #f6f7fb;
  --ctl-surface: #ffffff;
  --ctl-text: #182230;
  --ctl-muted: #667085;
  --ctl-border: #e7e9f0;
  --ctl-success: #079455;
  --ctl-warning: #dc6803;
  --ctl-danger: #d92d20;
  --ctl-sidebar-width: 272px;
  --ctl-radius: 18px;
  --ctl-shadow: 0 1px 2px rgba(16, 24, 40, .02), 0 12px 32px rgba(16, 24, 40, .055);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ctl-bg); }
body { min-height: 100vh; margin: 0; color: var(--ctl-text); background: var(--ctl-bg); font-family: Inter, Manrope, "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ctl-accent); }
a:hover { color: var(--ctl-accent-dark); }

/* Application shell */
.control-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--ctl-sidebar-width); padding: 26px 18px 18px; display: flex; flex-direction: column; color: #fff; overflow-y: auto; background: radial-gradient(circle at 12% 3%, rgba(101, 88, 245, .3), transparent 25%), linear-gradient(180deg, #111b2e 0%, var(--ctl-sidebar) 48%, #0c1422 100%); border-right: 1px solid rgba(255, 255, 255, .06); }
.control-brand { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 10px; color: #fff; text-decoration: none; }
.control-brand:hover { color: #fff; }
.control-brand-mark { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; font-size: 21px; background: linear-gradient(135deg, #8075ff, #5145cd); box-shadow: 0 10px 24px rgba(101, 88, 245, .34), inset 0 1px 0 rgba(255, 255, 255, .25); }
.control-brand-copy { display: grid; line-height: 1.1; }
.control-brand-copy strong { font-size: 19px; letter-spacing: -.025em; }
.control-brand-copy small { margin-top: 5px; color: #98a2b3; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.control-nav-label { margin: 38px 14px 10px; color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.control-nav { display: grid; gap: 7px; }
.control-nav a { position: relative; display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 14px; color: #98a2b3; border-radius: 13px; text-decoration: none; font-size: 14px; font-weight: 650; transition: .2s ease; }
.control-nav a i { font-size: 20px; }
.control-nav a:hover { color: #fff; background: rgba(255, 255, 255, .065); transform: translateX(2px); }
.control-nav a.active { color: #fff; background: linear-gradient(90deg, rgba(101, 88, 245, .95), rgba(101, 88, 245, .66)); box-shadow: 0 10px 24px rgba(39, 32, 117, .32); }
.control-nav a.active::after { content: ""; position: absolute; right: 13px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .13); }
.control-sidebar-spacer { flex: 1 1 auto; min-height: 28px; }
.control-system-state { display: flex; gap: 11px; align-items: flex-start; margin: 0 5px 15px; padding: 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .035); }
.control-live-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; flex: 0 0 auto; background: #32d583; box-shadow: 0 0 0 5px rgba(50, 213, 131, .11); }
.control-system-state div { display: grid; }
.control-system-state strong { font-size: 12px; font-weight: 700; }
.control-system-state small { margin-top: 4px; color: #7f8a9c; font-size: 10px; }
.control-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 8px 2px; border-top: 1px solid rgba(255, 255, 255, .075); }
.control-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: #344054; font-size: 12px; font-weight: 800; }
.control-user-copy { min-width: 0; display: grid; flex: 1; }
.control-user-copy strong { overflow: hidden; color: #f2f4f7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.control-user-copy small { overflow: hidden; margin-top: 3px; color: #667085; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.control-sidebar-user > a { width: 34px; height: 34px; display: grid; place-items: center; color: #98a2b3; border-radius: 10px; text-decoration: none; }
.control-sidebar-user > a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.control-sidebar-backdrop { display: none; }
.control-shell { min-height: 100vh; margin-left: var(--ctl-sidebar-width); display: flex; flex-direction: column; }
.control-topbar { position: sticky; top: 0; z-index: 1020; min-height: 82px; padding: 14px clamp(20px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(255, 255, 255, .88); border-bottom: 1px solid rgba(231, 233, 240, .9); backdrop-filter: blur(18px); }
.control-topbar-start { display: flex; align-items: center; gap: 13px; min-width: 0; }
.control-topbar-start > div { display: grid; min-width: 0; }
.control-topbar-start strong { overflow: hidden; margin-top: 3px; color: var(--ctl-text); font-size: 16px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.control-breadcrumb { color: #98a2b3; font-size: 11px; font-weight: 650; }
.control-menu-toggle { width: 42px; height: 42px; display: none; place-items: center; color: var(--ctl-text); border: 1px solid var(--ctl-border); border-radius: 12px; background: #fff; font-size: 20px; }
.control-topbar-actions { display: flex; align-items: center; gap: 12px; }
.control-date { display: inline-flex; align-items: center; gap: 8px; color: var(--ctl-muted); font-size: 12px; font-weight: 600; }
.control-date i { font-size: 16px; }
.control-quick-add { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; color: #fff; border-radius: 12px; background: var(--ctl-accent); box-shadow: 0 8px 18px rgba(101, 88, 245, .22); text-decoration: none; font-size: 13px; font-weight: 750; }
.control-quick-add:hover { color: #fff; background: var(--ctl-accent-dark); transform: translateY(-1px); }
.control-main { flex: 1 0 auto; padding: 34px clamp(20px, 3vw, 42px) 48px; }
.control-content { width: 100%; max-width: 1500px; margin: 0 auto; }
.control-footer { min-height: 58px; padding: 0 clamp(20px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; color: #98a2b3; border-top: 1px solid var(--ctl-border); font-size: 11px; }

/* Reusable page elements */
.control-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; border: 0; border-radius: 14px; box-shadow: var(--ctl-shadow); }
.control-alert i { font-size: 19px; }
.control-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.control-title h1 { margin: 5px 0 0; color: #101828; font-size: clamp(26px, 3vw, 35px); font-weight: 760; letter-spacing: -.04em; }
.control-title p { max-width: 680px; margin: 8px 0 0; color: var(--ctl-muted); font-size: 14px; }
.control-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--ctl-accent); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.control-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 99px; background: var(--ctl-accent); }
.control-title-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.control-title .btn, .control-card .btn { min-height: 42px; border-radius: 11px; font-size: 13px; font-weight: 700; }
.control-title .btn-primary, .control-card .btn-primary { border-color: var(--ctl-accent); background: var(--ctl-accent); box-shadow: 0 7px 16px rgba(101, 88, 245, .18); }
.control-title .btn-primary:hover, .control-card .btn-primary:hover { border-color: var(--ctl-accent-dark); background: var(--ctl-accent-dark); }
.control-title .btn-outline-primary, .control-card .btn-outline-primary { color: var(--ctl-accent); border-color: #cbc7ff; }
.control-title .btn-outline-primary:hover, .control-card .btn-outline-primary:hover { color: #fff; border-color: var(--ctl-accent); background: var(--ctl-accent); }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.metric-card { position: relative; min-height: 142px; padding: 20px; overflow: hidden; background: var(--ctl-surface); border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); box-shadow: var(--ctl-shadow); }
.metric-card::after { content: ""; position: absolute; right: -28px; bottom: -36px; width: 92px; height: 92px; border-radius: 50%; background: var(--metric-soft, #f2f4f7); opacity: .8; }
.metric-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-icon { width: 39px; height: 39px; display: grid; place-items: center; color: var(--metric-color, var(--ctl-accent)); border-radius: 12px; background: var(--metric-soft, var(--ctl-accent-soft)); font-size: 19px; }
.metric-trend { color: #98a2b3; font-size: 10px; font-weight: 750; }
.metric-card strong { position: relative; z-index: 1; display: block; margin-top: 16px; color: #101828; font-size: 28px; line-height: 1; letter-spacing: -.035em; }
.metric-card > span, .metric-label { position: relative; z-index: 1; display: block; margin-top: 7px; color: var(--ctl-muted); font-size: 11px; font-weight: 650; }
.metric-purple { --metric-color: #6558f5; --metric-soft: #efedff; }
.metric-green { --metric-color: #079455; --metric-soft: #ecfdf3; }
.metric-blue { --metric-color: #1570ef; --metric-soft: #eff8ff; }
.metric-cyan { --metric-color: #0891b2; --metric-soft: #ecfeff; }
.metric-orange { --metric-color: #dc6803; --metric-soft: #fff4ed; }
.metric-red { --metric-color: #d92d20; --metric-soft: #fef3f2; }
.control-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); gap: 20px; align-items: start; }
.control-card { margin-bottom: 20px; padding: 24px; background: var(--ctl-surface); border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); box-shadow: var(--ctl-shadow); }
.control-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.control-card-title { display: flex; align-items: center; gap: 12px; }
.control-card-title > i { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ctl-accent); border-radius: 11px; background: var(--ctl-accent-soft); font-size: 18px; }
.control-card h2 { margin: 0; color: #101828; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.control-card-head p, .control-card > p { margin: 5px 0 0; color: var(--ctl-muted); font-size: 12px; }
.control-card-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ctl-accent); text-decoration: none; font-size: 12px; font-weight: 750; }
.control-health { padding: 25px; color: #fff; background: linear-gradient(145deg, #17233a, #101828 68%); border: 0; }
.control-health h2 { color: #fff; }
.health-score { display: flex; align-items: flex-end; gap: 8px; margin: 23px 0 16px; }
.health-score strong { font-size: 46px; line-height: .9; letter-spacing: -.05em; }
.health-score span { color: #98a2b3; font-size: 12px; }
.health-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.health-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8075ff, #22d3ee); }
.health-list { display: grid; gap: 12px; margin-top: 23px; }
.health-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #98a2b3; font-size: 11px; }
.health-row b { color: #f2f4f7; font-size: 12px; }
.control-action-list { display: grid; gap: 10px; }
.control-action-list a { display: flex; align-items: center; gap: 12px; padding: 13px; color: var(--ctl-text); border: 1px solid var(--ctl-border); border-radius: 13px; text-decoration: none; transition: .18s ease; }
.control-action-list a:hover { border-color: #cbc7ff; background: #fafaff; transform: translateY(-1px); }
.control-action-list i { width: 35px; height: 35px; display: grid; place-items: center; color: var(--ctl-accent); border-radius: 10px; background: var(--ctl-accent-soft); font-size: 17px; }
.control-action-list span { display: grid; flex: 1; }
.control-action-list strong { font-size: 12px; }
.control-action-list small { margin-top: 3px; color: var(--ctl-muted); font-size: 10px; }
.control-action-list > a > .ri-arrow-right-s-line { width: auto; height: auto; color: #98a2b3; background: transparent; }

/* Tables */
.control-table-wrap { margin: 0 -8px -8px; overflow-x: auto; }
.control-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.control-table thead th { padding: 12px 14px; color: #98a2b3; border: 0; border-bottom: 1px solid var(--ctl-border); background: #fcfcfd; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.control-table tbody td { padding: 16px 14px; color: #475467; border: 0; border-bottom: 1px solid #f0f1f5; font-size: 12px; vertical-align: middle; }
.control-table tbody tr:last-child td { border-bottom: 0; }
.control-table tbody tr { transition: background .16s ease; }
.control-table tbody tr:hover { background: #fafaff; }
.company-cell { display: flex; align-items: center; gap: 11px; min-width: 190px; }
.company-avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ctl-accent); border-radius: 12px; background: var(--ctl-accent-soft); font-size: 12px; font-weight: 850; }
.company-cell-copy { display: grid; min-width: 0; }
.company-cell-copy strong { overflow: hidden; color: #101828; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.company-cell-copy small { overflow: hidden; max-width: 220px; margin-top: 4px; color: #98a2b3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-link { display: inline-flex; align-items: center; gap: 6px; color: #475467; text-decoration: none; font-weight: 650; }
.workspace-link:hover { color: var(--ctl-accent); }
.table-action { width: 36px; height: 36px; display: inline-grid; place-items: center; color: #475467; border: 1px solid var(--ctl-border); border-radius: 10px; background: #fff; text-decoration: none; font-size: 17px; }
.table-action:hover { color: #fff; border-color: var(--ctl-accent); background: var(--ctl-accent); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: #344054; border-radius: 999px; background: #f2f4f7; font-size: 10px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-active, .status-trialing, .status-complete, .status-ready { color: #067647; background: #ecfdf3; }
.status-cancelled, .status-expired, .status-failed, .status-suspended { color: #b42318; background: #fef3f2; }
.status-provisioning, .status-past_due, .status-paused, .status-scheduled { color: #b54708; background: #fffaeb; }
.control-empty { padding: 44px 20px !important; color: #98a2b3 !important; text-align: center; }

/* Companies */
.company-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.summary-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; color: #475467; border: 1px solid var(--ctl-border); border-radius: 999px; background: #fff; font-size: 10px; font-weight: 700; }
.summary-chip b { color: #101828; }
.control-search { position: relative; width: min(320px, 100%); }
.control-search i { position: absolute; top: 50%; left: 13px; z-index: 1; color: #98a2b3; font-size: 17px; transform: translateY(-50%); }
.control-search input { min-height: 42px; padding-left: 40px; border-color: var(--ctl-border); border-radius: 11px; font-size: 12px; }
.provision-card { padding: 0; overflow: hidden; }
.provision-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; color: #fff; background: linear-gradient(120deg, #151f34, #2f286e); }
.provision-card-head h2 { color: #fff; }
.provision-card-head p { margin: 5px 0 0; color: #b9c0ce; font-size: 11px; }
.provision-step { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .09); font-size: 12px; font-weight: 800; }
.provision-body { padding: 25px; }
.form-section { margin-bottom: 25px; padding-bottom: 22px; border-bottom: 1px solid var(--ctl-border); }
.form-section:last-of-type { margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; }
.form-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #344054; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.form-section-title i { color: var(--ctl-accent); font-size: 17px; }
.form-label { margin-bottom: 7px; color: #475467; font-size: 11px; font-weight: 700; }
.form-control, .form-select, .input-group-text { min-height: 43px; border-color: #dfe2ea; border-radius: 10px; font-size: 12px; }
.form-control:focus, .form-select:focus { border-color: #9b92ff; box-shadow: 0 0 0 4px rgba(101, 88, 245, .1); }
.input-group > .form-control { border-radius: 10px 0 0 10px; }
.input-group > .input-group-text { max-width: 180px; overflow: hidden; color: #667085; border-radius: 0 10px 10px 0; background: #f8f9fc; font-size: 10px; text-overflow: ellipsis; }
.form-text { color: #98a2b3; font-size: 10px; }
.provision-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 4px; }
.provision-submit span { color: var(--ctl-muted); font-size: 10px; }

/* Tenant detail */
.tenant-identity { display: flex; align-items: center; gap: 15px; }
.tenant-mark { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border-radius: 17px; background: linear-gradient(135deg, var(--tenant-color, #6558f5), #101828); box-shadow: 0 10px 22px rgba(101, 88, 245, .2); font-size: 17px; font-weight: 850; }
.tenant-meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.tenant-meta-line span:not(.status-pill) { color: var(--ctl-muted); font-size: 11px; }
.tenant-tabs { position: sticky; top: 82px; z-index: 10; display: flex; gap: 5px; margin: -6px 0 24px; padding: 7px; overflow-x: auto; border: 1px solid var(--ctl-border); border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 25px rgba(16, 24, 40, .045); backdrop-filter: blur(12px); }
.tenant-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: #667085; border-radius: 9px; text-decoration: none; font-size: 10px; font-weight: 750; white-space: nowrap; }
.tenant-tabs a:hover { color: var(--ctl-accent); background: var(--ctl-accent-soft); }
.tenant-tabs i { font-size: 15px; }
.tenant-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.tenant-metric { min-height: 110px; padding: 18px; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--ctl-border); border-radius: 16px; box-shadow: var(--ctl-shadow); }
.tenant-metric i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ctl-accent); border-radius: 13px; background: var(--ctl-accent-soft); font-size: 19px; }
.tenant-metric div { display: grid; min-width: 0; }
.tenant-metric span { color: #98a2b3; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tenant-metric strong { overflow: hidden; margin-top: 7px; color: #101828; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.section-anchor { scroll-margin-top: 165px; }
.settings-card { padding: 0; overflow: hidden; }
.settings-card .control-card-head { margin: 0; padding: 21px 24px; border-bottom: 1px solid var(--ctl-border); background: #fcfcfd; }
.settings-card-body { padding: 24px; }
.settings-save { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ctl-border); }
.module-groups { display: grid; gap: 19px; }
.module-group { padding: 17px; border: 1px solid var(--ctl-border); border-radius: 15px; background: #fcfcfd; }
.module-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.module-group-head strong { color: #344054; font-size: 11px; text-transform: capitalize; }
.module-group-head span { color: #98a2b3; font-size: 9px; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.module-item { display: block; padding: 12px 13px; border: 1px solid #e7e9f0; border-radius: 11px; background: #fff; cursor: pointer; transition: .16s ease; }
.module-item:hover { border-color: #cbc7ff; transform: translateY(-1px); }
.module-item .form-check { min-height: 20px; margin: 0; }
.module-item .form-check-label { color: #344054; font-size: 11px; }
.module-item small { display: block; margin: 5px 0 0 33px; color: #98a2b3; font-size: 9px; }
.form-check-input:checked { border-color: var(--ctl-accent); background-color: var(--ctl-accent); }
.branding-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 22px; }
.brand-preview { position: relative; min-height: 230px; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; border-radius: 17px; background: var(--brand-color, #405189); }
.brand-preview::before, .brand-preview::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.brand-preview::before { width: 190px; height: 190px; top: -80px; right: -55px; }
.brand-preview::after { width: 110px; height: 110px; right: 55px; bottom: -62px; }
.brand-preview-top, .brand-preview-bottom { position: relative; z-index: 1; }
.brand-preview-top { display: flex; align-items: center; gap: 10px; }
.brand-preview-logo { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .15); font-weight: 850; }
.brand-preview strong { display: block; font-size: 21px; letter-spacing: -.03em; }
.brand-preview span { display: block; margin-top: 5px; color: rgba(255, 255, 255, .7); font-size: 10px; }
.brand-preview-nav { display: flex; gap: 7px; margin-top: 16px; }
.brand-preview-nav i { width: 29px; height: 6px; display: block; border-radius: 99px; background: rgba(255, 255, 255, .19); }
.upload-tile { min-height: 105px; padding: 13px; border: 1px dashed #cfd3df; border-radius: 12px; background: #fcfcfd; }
.upload-tile label { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #475467; font-size: 10px; font-weight: 750; }
.upload-tile label i { color: var(--ctl-accent); font-size: 16px; }
.upload-tile .form-control { min-height: 36px; padding: 6px; font-size: 9px; }
.upload-tile .form-check-label { margin: 0; color: #98a2b3; font-size: 9px; }
.activity-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #344054; font-size: 10px; }

/* Authentication */
.control-auth { min-height: 100vh; background: #0f172a; }
.control-auth-main { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .95fr) minmax(460px, 1.05fr); }
.login-story { position: relative; padding: clamp(42px, 6vw, 86px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; background: linear-gradient(150deg, #17233a, #111827 62%, #201b4f); }
.login-story::before { content: ""; position: absolute; width: 520px; height: 520px; top: -260px; right: -210px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(101, 88, 245, .04), 0 0 0 140px rgba(101, 88, 245, .025); }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.login-brand .control-brand-mark { width: 46px; height: 46px; }
.login-brand strong { display: block; font-size: 18px; }
.login-brand small { display: block; margin-top: 3px; color: #98a2b3; font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.login-story-content { position: relative; z-index: 1; max-width: 560px; margin: auto 0; }
.login-story-content .control-eyebrow { color: #a9a2ff; }
.login-story-content .control-eyebrow::before { background: #a9a2ff; }
.login-story h1 { margin: 22px 0 18px; font-size: clamp(38px, 5vw, 64px); font-weight: 760; line-height: 1.04; letter-spacing: -.055em; }
.login-story h1 span { color: #a9a2ff; }
.login-story p { max-width: 500px; margin: 0; color: #aab2c0; font-size: 14px; line-height: 1.8; }
.login-proof { display: flex; gap: 25px; flex-wrap: wrap; margin-top: 35px; }
.login-proof span { display: inline-flex; align-items: center; gap: 7px; color: #d0d5dd; font-size: 10px; font-weight: 650; }
.login-proof i { color: #32d583; font-size: 15px; }
.login-story-footer { position: relative; z-index: 1; color: #667085; font-size: 10px; }
.login-panel { padding: 38px; display: grid; place-items: center; background: #f8f9fc; }
.login-card { width: min(430px, 100%); padding: 38px; background: #fff; border: 1px solid var(--ctl-border); border-radius: 22px; box-shadow: 0 24px 70px rgba(16, 24, 40, .12); }
.login-card-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 25px; color: var(--ctl-accent); border-radius: 14px; background: var(--ctl-accent-soft); font-size: 22px; }
.login-card h2 { margin: 0; color: #101828; font-size: 25px; letter-spacing: -.035em; }
.login-card > p { margin: 9px 0 27px; color: var(--ctl-muted); font-size: 12px; line-height: 1.6; }
.login-card .form-control { min-height: 48px; padding-left: 43px; }
.login-input { position: relative; }
.login-input > i { position: absolute; top: 50%; left: 15px; z-index: 2; color: #98a2b3; font-size: 17px; transform: translateY(-50%); }
.login-card .btn { min-height: 49px; margin-top: 8px; border: 0; border-radius: 12px; background: var(--ctl-accent); font-size: 13px; font-weight: 750; box-shadow: 0 10px 22px rgba(101, 88, 245, .24); }
.login-card .btn:hover { background: var(--ctl-accent-dark); }
.login-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; color: #98a2b3; font-size: 9px; }

@media (max-width: 1280px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .branding-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1040px) {
  .control-sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .control-shell { margin-left: 0; }
  .control-menu-toggle { display: grid; }
  .control-sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; border: 0; background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px); }
  .control-sidebar-open .control-sidebar { transform: translateX(0); }
  .control-sidebar-open .control-sidebar-backdrop { display: block; }
  .control-dashboard-grid { grid-template-columns: 1fr; }
  .tenant-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-shell { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-panel { min-height: 100vh; }
}
@media (max-width: 720px) {
  .control-topbar { min-height: 72px; padding: 10px 14px; }
  .control-topbar-actions .control-date { display: none; }
  .control-quick-add { width: 42px; padding: 0; justify-content: center; }
  .control-quick-add span { display: none; }
  .control-main { padding: 24px 14px 38px; }
  .control-title { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .control-title-actions { width: 100%; }
  .control-title-actions .btn { flex: 1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card { min-height: 132px; padding: 16px; }
  .control-card { padding: 18px; border-radius: 15px; }
  .control-card-head { align-items: flex-start; }
  .control-card-title > i { display: none; }
  .control-search { width: 100%; }
  .provision-card { padding: 0; }
  .provision-card-head, .provision-body { padding: 19px; }
  .provision-submit { align-items: stretch; flex-direction: column; }
  .tenant-tabs { top: 72px; margin-top: 0; }
  .tenant-metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tenant-metric { min-height: 96px; padding: 14px; }
  .tenant-identity { align-items: flex-start; }
  .tenant-mark { width: 46px; height: 46px; border-radius: 14px; }
  .module-grid { grid-template-columns: 1fr; }
  .settings-card { padding: 0; }
  .settings-card .control-card-head, .settings-card-body { padding: 18px; }
  .login-panel { padding: 18px; }
  .login-card { padding: 27px 22px; }
  .control-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; }
}
@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 118px; }
  .tenant-metric-grid { grid-template-columns: 1fr; }
}