:root{--white:#fff;--page:#f5f6fa;--ink:#182033;--muted:#6e7688;--line:#e4e7ee;--danger:#b42318;--success:#087a55;--warning:#8a5a00;--shadow:0 12px 34px rgba(19,28,52,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;background:var(--page);color:var(--ink);font-size:14px}a{color:inherit}button,input,select,textarea{font:inherit}.muted{color:var(--muted)}
.page-content{width:min(1440px,100%);margin:0 auto;padding:30px 34px 60px;min-height:100vh}.with-sidebar .page-content{padding-left:304px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.page-heading h1{margin:2px 0 0;font-size:30px;line-height:1.15}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:800}.panel,.notice,.metric-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.panel{padding:20px;margin:0 0 20px}.notice{padding:15px 18px;margin:0 0 20px}.panel-title,.panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.panel h2{margin:0 0 16px;font-size:18px}.panel-title h2{margin:0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.metric-card{padding:18px}.metric-card span,.metric-card small{display:block;color:var(--muted)}.metric-card strong{display:block;font-size:24px;margin:8px 0}.content-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.detail-grid>div{padding:14px;border:1px solid var(--line);border-radius:10px}.detail-grid span,.detail-grid strong{display:block}.detail-grid span{color:var(--muted);font-size:12px;margin-bottom:5px}
.alert{padding:13px 15px;border-radius:10px;margin:0 0 18px;border:1px solid}.alert.error{color:#8a1c14;background:#fff0ee;border-color:#f4b5ae}.alert.success{color:#066448;background:#eafbf4;border-color:#a9e2ce}.alert.warning{color:#765000;background:#fff9df;border-color:#efd77b}.alert.info{color:#24506f;background:#edf7ff;border-color:#b9dcf3}.alert a{text-decoration:underline;font-weight:700}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:30px}.auth-card{width:min(470px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 20px 60px rgba(17,25,48,.14)}.auth-card-wide{width:min(780px,100%)}.auth-card h1{font-size:30px;margin:8px 0 20px}.auth-card form,.stack-form{display:grid;gap:11px}.auth-card label,.stack-form label{font-weight:700}.auth-card input,.auth-card select,.stack-form input,.stack-form select,.form-grid input,.form-grid select,.search-form input,.mini-form input,.mini-form select{width:100%;border:1px solid #cfd4df;background:#fff;color:var(--ink);padding:11px 12px;border-radius:9px;outline:none}.auth-card input:focus,.stack-form input:focus,.form-grid input:focus,.search-form input:focus{border-color:#888;box-shadow:0 0 0 3px rgba(80,90,110,.08)}.auth-note{color:var(--muted);line-height:1.5;font-size:12px;margin:17px 0 0}.auth-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 0}.auth-links a{font-weight:700}.brand-lockup{display:flex;align-items:center;gap:11px;margin-bottom:20px}.brand-lockup .brand-mark,.sidebar-brand .brand-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:900}.brand-lockup strong,.brand-lockup small{display:block}.brand-lockup strong{letter-spacing:.08em}.brand-lockup small{color:var(--muted);font-size:11px;margin-top:2px}.check-row{display:flex!important;align-items:center;gap:8px;font-weight:500!important;margin:4px 0}.check-row input{width:auto!important}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid label{font-weight:700}.form-grid label input,.form-grid label select{display:block;margin-top:6px}.form-button{display:flex;align-items:end}.inline-action{margin-top:15px}.danger-zone{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.btn,.small-btn{border:0;border-radius:9px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}.small-btn{padding:7px 10px;font-size:12px}.btn.danger{background:#b42318!important;color:#fff!important}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}th{background:#fafbfc;color:#50596b;font-size:11px;text-transform:uppercase;letter-spacing:.05em}td small{display:block;color:var(--muted);margin-top:4px}.mini-form{display:flex;align-items:center;gap:6px}.mini-form select,.mini-form input{padding:7px 8px;min-width:100px}.top-gap{margin-top:6px}.status-badge,.tier-badge,.role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800}.status-badge.verified{background:#e8f8f1;color:#087a55}.status-badge.pending{background:#fff6d8;color:#8a5a00}.button-badge{border:0;cursor:pointer}.tier-badge,.role-badge{background:#eef1f6;color:#384154}.sim-summary{display:flex;gap:5px;flex-wrap:wrap}.sim-summary span{border:1px solid var(--line);background:#fafbfc;border-radius:999px;padding:4px 7px;font-size:10px}.search-form{display:flex;gap:8px;width:min(520px,100%)}.search-form input{flex:1}.pagination{display:flex;justify-content:flex-end;gap:14px;align-items:center;margin-top:14px}.pagination a{font-weight:700}.privacy-note{font-size:12px}.app-sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:270px;padding:22px 16px;display:flex;flex-direction:column;overflow:auto}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 7px 18px;text-decoration:none}.sidebar-brand strong,.sidebar-brand small{display:block}.sidebar-brand strong{letter-spacing:.08em}.sidebar-brand small{font-size:10px;opacity:.7;margin-top:2px}.app-sidebar nav{display:grid;gap:4px}.nav-link{padding:10px 11px;border-radius:8px;text-decoration:none;font-weight:650;font-size:13px}.sidebar-logout{margin-top:auto;padding-top:18px}.sidebar-logout button{width:100%;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;border-radius:9px;padding:10px;cursor:pointer;font-weight:700}
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.app-sidebar{position:static;width:100%;height:auto}.app-sidebar nav{display:flex;overflow:auto;padding-bottom:5px}.nav-link{white-space:nowrap}.sidebar-logout{display:none}.with-sidebar .page-content{padding-left:18px}.page-content{padding:20px 18px 45px}.content-grid.two,.form-grid.two,.form-grid,.detail-grid,.metric-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start}.panel-toolbar{align-items:stretch;flex-direction:column}.auth-shell{padding:18px}.auth-card{padding:23px}.search-form{width:100%}}
/* Stage 5 - wallet/finance */
.top-gap{margin-top:14px}.wallet-focus{border:1px solid var(--line);border-radius:12px;padding:15px;background:#fafbfc}.wallet-focus>strong,.wallet-focus>span{display:block}.wallet-focus>span{color:var(--muted);margin-top:3px}.wallet-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}.wallet-strip span{padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:12px}.wallet-strip b{display:block;color:var(--ink);margin-top:4px;font-size:16px}.inline-finance-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:10px}.inline-finance-form label{font-weight:700;min-width:220px}.inline-finance-form input{display:block;margin-top:6px;width:100%;border:1px solid #cfd4df;background:#fff;color:var(--ink);padding:11px 12px;border-radius:9px}.code-value{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:.04em;padding:5px 8px;background:#fff;border:1px dashed currentColor;border-radius:7px;margin-left:6px}.funding-options{display:grid;gap:12px}.funding-options>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}.funding-options p{margin:6px 0 0}.btn:disabled,.small-btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:780px){.wallet-strip{grid-template-columns:1fr}.inline-finance-form{align-items:stretch;flex-direction:column}.inline-finance-form label{width:100%;min-width:0}.inline-finance-form .btn{width:100%}}

/* Stage 6 - SIM Management */
.add-sim-panel>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}.add-sim-panel>summary::-webkit-details-marker{display:none}.stage-note{margin:15px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.bulk-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px}.bulk-toolbar select{border:1px solid #cfd4df;background:#fff;padding:8px 10px;border-radius:8px}.sim-table-wrap{max-height:70vh}.sim-table th{position:sticky;top:0;z-index:2}.sim-table td{max-width:260px}.compact-cell-form{display:flex;align-items:center;gap:5px;min-width:145px}.compact-cell-form.wide{min-width:220px}.compact-cell-form input,.compact-cell-form select,.mini-reauth input{min-width:86px;max-width:155px;border:1px solid #d7dbe4;border-radius:7px;padding:7px;background:#fff}.compact-cell-form.wide input{max-width:210px}.compact-cell-form button{border:0;border-radius:7px;padding:7px 8px;font-weight:750;cursor:pointer;background:#eef1f6;color:#384154}.compact-cell-form button:disabled{opacity:.45}.sim-actions{display:flex;gap:5px;align-items:flex-start;flex-wrap:wrap;min-width:210px}.sim-actions form{margin:0}.sim-actions details,.sim-table details{position:relative}.sim-actions summary,.sim-table details summary{cursor:pointer;font-weight:750;font-size:12px}.mini-reauth{display:flex;gap:5px;margin-top:7px}.pin-form{margin:7px 0}.status-badge.danger{background:#fff0ee;color:#9a2319}.admin-sim-page code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.sim-table input[type=checkbox]{width:16px;height:16px}
@media(max-width:780px){.bulk-toolbar{align-items:stretch;flex-direction:column}.bulk-toolbar select,.bulk-toolbar button{width:100%}.sim-table-wrap{max-height:none}.compact-cell-form{min-width:135px}}

.small-btn.danger{background:#b42318;color:#fff}

/* Stage 8 - MTN transaction engines */
.stack-form textarea,.inline-finance-form select{width:100%;border:1px solid #cfd4df;background:#fff;color:var(--ink);padding:11px 12px;border-radius:9px;outline:none}.stack-form textarea{resize:vertical;min-height:110px}.rule-list{display:grid;gap:9px}.rule-list p{margin:0;padding:10px 12px;background:#fafbfc;border:1px solid var(--line);border-radius:9px;line-height:1.45}.airtime-page .mini-form input[type=password]{min-width:120px}.panel code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f2f4f7;padding:2px 5px;border-radius:5px}

/* Stage 12 — shared theme toggle, notifications and support tickets */
.ui-utility-dock{position:fixed;z-index:90;top:14px;right:18px;display:flex;align-items:center;gap:9px}.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 11px;border-radius:999px;box-shadow:var(--shadow);cursor:pointer;font-weight:800}.theme-toggle:hover{transform:translateY(-1px)}.notification-center{position:relative}.notification-center>summary{list-style:none;cursor:pointer;width:39px;height:39px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow);position:relative}.notification-center>summary::-webkit-details-marker{display:none}.notification-count{position:absolute;right:-4px;top:-5px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:#d92d20;color:#fff;font-size:10px;font-weight:900}.notification-dropdown{position:absolute;right:0;top:48px;width:min(390px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 20px 55px rgba(10,20,40,.2);padding:12px;max-height:70vh;overflow:auto}.notification-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 3px 9px;border-bottom:1px solid var(--line)}.notification-dropdown-head a{font-size:12px;font-weight:800}.notification-mini{padding:11px 4px;border-bottom:1px solid var(--line)}.notification-mini:last-child{border-bottom:0}.notification-mini.important{border-left:3px solid #d4a900;padding-left:9px}.notification-mini p{margin:5px 0 8px;white-space:normal;line-height:1.4;color:var(--muted)}.notification-mini form button{border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;padding:0;font-weight:800;font-size:11px}.notification-toast-stack{position:fixed;z-index:85;right:18px;bottom:18px;width:min(390px,calc(100vw - 36px));display:grid;gap:9px}.notification-toast{display:flex;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid #7b879e;border-radius:12px;padding:13px 14px;box-shadow:0 18px 44px rgba(12,25,45,.18)}.notification-toast.important{border-left-color:#d4a900}.notification-toast p{margin:5px 0 0;color:var(--muted);line-height:1.4}.notification-toast form button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:22px;line-height:1}.floating-whatsapp{position:fixed;z-index:80;right:20px;bottom:20px;display:flex;align-items:center;gap:7px;background:#18a957;color:#fff;text-decoration:none;font-weight:900;border-radius:999px;padding:13px 15px;box-shadow:0 14px 30px rgba(0,110,55,.28)}.notification-toast-stack~.floating-whatsapp{bottom:92px}.notification-list{display:grid;gap:10px}.notification-row{display:flex;justify-content:space-between;gap:15px;padding:15px;border:1px solid var(--line);border-radius:11px;background:#fafbfc}.notification-row.unread{border-left:4px solid #5865f2;background:#f7f8ff}.notification-row.important{border-left-color:#d4a900}.notification-title{display:flex;align-items:center;gap:8px}.notification-row p{margin:7px 0;line-height:1.5}.status-badge.warning{background:#fff4d6;color:#8a5a00}.support-ticket-grid{align-items:start}.ticket-thread{max-width:1000px}.ticket-messages{display:grid;gap:11px;margin:15px 0 20px}.ticket-message{max-width:78%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#f6f7fa}.ticket-message.user{justify-self:end;background:#f3efff}.ticket-message.admin{justify-self:start}.ticket-message p{white-space:pre-wrap;line-height:1.5}.ticket-message small{color:var(--muted)}.ticket-reply{max-width:760px}.status-badge.ticket-open{background:#edf4ff;color:#285a9a}.status-badge.ticket-in_progress{background:#fff4dd;color:#895700}.status-badge.ticket-answered{background:#e8f8f1;color:#087a55}.status-badge.ticket-closed{background:#eef1f6;color:#50596b}

/* Persistent dark mode for both Customer and Admin interfaces. */
body[data-theme="dark"]{color-scheme:dark;--page:#0e1420;--ink:#edf2fb;--muted:#9aa7ba;--line:#283448;--shadow:0 12px 34px rgba(0,0,0,.28);background:var(--page);color:var(--ink)}
body[data-theme="dark"] .panel,body[data-theme="dark"] .notice,body[data-theme="dark"] .metric-card,body[data-theme="dark"] .auth-card,body[data-theme="dark"] .notification-dropdown,body[data-theme="dark"] .notification-toast,body[data-theme="dark"] .theme-toggle{background:#151e2d;border-color:var(--line);color:var(--ink)}
body[data-theme="dark"] table{background:#151e2d;color:var(--ink)}body[data-theme="dark"] th{background:#1b2638;color:#b8c3d4}body[data-theme="dark"] th,body[data-theme="dark"] td{border-color:var(--line)}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea,body[data-theme="dark"] .auth-card input,body[data-theme="dark"] .auth-card select,body[data-theme="dark"] .stack-form input,body[data-theme="dark"] .stack-form select,body[data-theme="dark"] .stack-form textarea,body[data-theme="dark"] .form-grid input,body[data-theme="dark"] .form-grid select,body[data-theme="dark"] .search-form input,body[data-theme="dark"] .mini-form input,body[data-theme="dark"] .mini-form select,body[data-theme="dark"] .compact-cell-form input,body[data-theme="dark"] .compact-cell-form select,body[data-theme="dark"] .bulk-toolbar select,body[data-theme="dark"] .inline-finance-form input,body[data-theme="dark"] .inline-finance-form select{background:#101827;color:var(--ink);border-color:#334159}
body[data-theme="dark"] input::placeholder,body[data-theme="dark"] textarea::placeholder{color:#748198}body[data-theme="dark"] .detail-grid>div,body[data-theme="dark"] .wallet-focus,body[data-theme="dark"] .funding-options>div,body[data-theme="dark"] .rule-list p,body[data-theme="dark"] .sim-summary span,body[data-theme="dark"] .notification-row,body[data-theme="dark"] .ticket-message,body[data-theme="dark"] .report-tabs a{background:#111a29;border-color:var(--line);color:var(--ink)}body[data-theme="dark"] .ticket-message.user{background:#25182d}body[data-theme="dark"] .compact-cell-form button{background:#263247;color:#e8eef8}body[data-theme="dark"] .response-details pre,body[data-theme="dark"] .panel code{background:#0c1320;color:#dbe5f5;border-color:var(--line)}body[data-theme="dark"] .wallet-strip span{background:#101827;border-color:var(--line)}body[data-theme="dark"] .wallet-strip b{color:var(--ink)}body[data-theme="dark"] .report-filter-grid input,body[data-theme="dark"] .report-filter-grid select{background:#101827;color:var(--ink);border-color:#334159}
.user-interface[data-theme="dark"] .user-sidebar{background:#260620}.admin-interface[data-theme="dark"] .admin-sidebar{background:#071126}.user-interface[data-theme="dark"] .tier-badge{background:#4b3f00;color:#ffe86a}.admin-interface[data-theme="dark"] .role-badge{background:#3d341c;color:#f3d778}
.with-sidebar .page-content{padding-top:68px}
@media(max-width:780px){.ui-utility-dock{position:sticky;top:0;right:auto;justify-content:flex-end;padding:9px 12px;background:var(--page);z-index:95}.with-sidebar .page-content{padding-top:20px}.floating-whatsapp{right:14px;bottom:14px}.notification-toast-stack{right:12px;bottom:76px}.ticket-message{max-width:94%}}