:root{
  --bg:#0f1117; --bg2:#151923; --card:#1a1f2b; --line:#262c3a; --line2:#323a4c;
  --text:#e8ebf2; --muted:#9aa3b5; --accent:#8b5cf6; --accent-ink:#ffffff;
  --red:#f87171; --amber:#fbbf24; --blue:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.015em;line-height:1.2}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)} .small{font-size:13px}
.mt{margin-top:18px} .mb{margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;font:600 14px Inter,sans-serif;border:1px solid transparent;cursor:pointer;transition:.15s;color:var(--text);background:var(--card)}
.btn-primary{background:var(--accent);color:var(--accent-ink)} .btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line2);background:transparent} .btn-ghost:hover{background:var(--bg2)}
.btn-danger{background:rgba(248,113,113,.12);color:var(--red);border-color:rgba(248,113,113,.3)}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn.block{width:100%}

label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--text);font:15px Inter,sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
input[type=color]{padding:4px;height:44px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}

.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;border:1px solid}
.alert-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#86efac}
.alert-error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#fca5a5}
.alert-warn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.3);color:#fcd34d}

/* auth pages */
.auth{min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:radial-gradient(600px 400px at 80% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px}
.auth-card.wide{max-width:560px}
.auth-brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-weight:700;font-size:20px;color:var(--text);margin-bottom:26px}
.auth h1{font-size:26px;margin-bottom:6px}
.auth-foot{margin-top:20px;text-align:center;font-size:14px;color:var(--muted)}

/* app shell */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .auth-brand{margin:4px 8px 26px;font-size:18px}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:500;margin-bottom:2px}
.side nav a:hover{background:var(--card);color:var(--text)}
.side nav a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.side nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side .who{margin-top:auto;padding:14px 12px;border-top:1px solid var(--line);font-size:13px}
.side .who b{display:block;color:var(--text)}
.main{padding:28px 32px 60px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.topbar h1{font-size:26px}
.mobile-top{display:none}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat small{color:var(--muted);font-size:13px}
.stat b{display:block;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:26px;margin-top:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:22px}
.panel h2{font-size:17px;margin-bottom:14px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.panel-head h2{margin:0}
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .actions{display:flex;gap:6px;flex-wrap:wrap}
.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}

.tag{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:600}
.tag-success,.tag-active,.tag-online{background:rgba(34,197,94,.14);color:#4ade80}
.tag-pending,.tag-trial,.tag-unused,.tag-unknown{background:rgba(96,165,250,.14);color:var(--blue)}
.tag-failed,.tag-suspended,.tag-offline{background:rgba(248,113,113,.14);color:var(--red)}
.tag-cancelled,.tag-expired{background:rgba(154,163,181,.14);color:var(--muted)}

.chart{display:flex;align-items:flex-end;gap:8px;height:180px;padding:10px 0 26px}
.chart .b{flex:1;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent));border-radius:6px 6px 2px 2px;position:relative;min-height:3px}
.chart .b span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap}
.chart .b em{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-style:normal;color:var(--muted);white-space:nowrap}

pre.code{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:12.5px;overflow:auto;white-space:pre;color:#c7d2e0}
.copybox{display:flex;gap:8px}
.copybox input{font-family:ui-monospace,monospace;font-size:13px}
.empty{text-align:center;padding:30px;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.filters>div{min-width:150px}
.filters label{margin-top:0}

@media (max-width:1000px){
  .cards{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
}
@media (max-width:800px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:-260px;width:250px;z-index:40;transition:.2s}
  .nav-open .side{left:0;box-shadow:20px 0 60px rgba(0,0,0,.6)}
  .mobile-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:30}
  .mobile-top .auth-brand{margin:0;font-size:17px}
  .main{padding:20px 16px 50px}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media print{
  .side,.mobile-top,.topbar,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .shell{display:block}.main{padding:0}
}

/* nav section labels + PPPoE bits */
.side nav .nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#6b7386;padding:14px 12px 6px}
.side{overflow-y:auto}
.tag-suspended{background:rgba(251,191,36,.14);color:var(--amber)}
.days-low{color:var(--amber);font-weight:600}.days-out{color:var(--red);font-weight:600}
.tabs-inline{display:flex;gap:6px;flex-wrap:wrap}
.tabs-inline a{padding:7px 12px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:500;border:1px solid var(--line)}
.tabs-inline a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
dialog{margin:auto;background:var(--card);color:var(--text);border:1px solid var(--line2);border-radius:16px;padding:22px;width:min(460px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}

.cols>*{min-width:0}
pre.code{max-width:100%}

/* ===================== forms: sign-in extras ===================== */
.label-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.label-row label{margin-bottom:6px}
.label-row a{margin-bottom:6px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:70px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--card);color:var(--muted);border-radius:8px;padding:6px 10px;font:600 12.5px Inter,sans-serif;cursor:pointer}
.pw-toggle:hover{color:var(--text)}
.otp-input{font:700 28px ui-monospace,Menlo,monospace;letter-spacing:.5em;text-align:center;padding:14px 10px 14px 24px}
label.check{display:flex;align-items:center;gap:9px;color:var(--text);font-size:14px;margin-top:14px;cursor:pointer}
label.check input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.device-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.device-row:first-of-type{border-top:0}
table.kv td{padding:8px 0;border:0}
table.kv td:first-child{width:40%;padding-right:12px}

/* ===================== responsive ===================== */
html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%}
.main{padding-bottom:96px}                 /* room for the WhatsApp button */
.nav-backdrop{display:none}
.copybox input{min-width:0}
.actions form{display:inline-flex}

/* large screens: keep lines readable */
@media (min-width:1600px){
  body{font-size:15.5px}
  .main{max-width:1560px}
  .cards{gap:20px}
}

/* tablets */
@media (max-width:1100px){
  .main{padding:24px 22px 96px}
}

/* phones & small tablets: off-canvas menu */
@media (max-width:800px){
  body.nav-open{overflow:hidden}
  .side{top:0;height:100vh;height:100dvh;padding-top:18px}
  .nav-open .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}
  .mobile-top{gap:10px}
  .topbar{margin-bottom:18px}
  .topbar>div,.topbar>form{flex-wrap:wrap}
  dialog{width:min(520px,96vw);padding:18px}
}

/* phones */
@media (max-width:600px){
  body{font-size:14.5px}
  input,select,textarea{font-size:16px}    /* stops iOS zooming into fields */
  .main{padding:16px 12px 96px}
  .topbar h1{font-size:22px}
  .topbar{align-items:flex-start}
  .topbar .btn{flex:1 1 auto}
  .topbar>div,.topbar>form{width:100%}
  .topbar>form input{flex:1;min-width:0}
  .cards{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .stat{padding:14px}
  .stat b{font-size:20px;word-break:break-word}
  .panel{padding:16px 14px;border-radius:12px;margin-bottom:16px}
  .cols{gap:16px}
  .filters>div{min-width:0;flex:1 1 100%}
  .filters>div:last-child:has(.btn){flex:0 0 auto}
  .table-wrap{margin:0 -14px;padding:0 14px;-webkit-overflow-scrolling:touch}
  table{font-size:13.5px}
  th{padding:9px 8px;white-space:nowrap}
  td{padding:10px 8px}
  td .actions{flex-wrap:nowrap}
  .chart{gap:3px;height:150px}
  .chart .b span{font-size:9.5px}
  pre.code{font-size:11px;padding:10px}
  .copybox{flex-wrap:wrap}
  .copybox .btn{flex:1}
  .tabs-inline{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;width:100%}
  .tabs-inline a{white-space:nowrap}
  .auth{padding:18px 12px;place-items:start center}
  .auth-card{padding:24px 18px;border-radius:16px;margin-top:4vh}
  .auth h1{font-size:23px}
  .otp-input{font-size:24px;letter-spacing:.4em}
  .device-row{flex-wrap:wrap}
}

/* very small phones */
@media (max-width:340px){
  .cards{grid-template-columns:1fr}
  .mobile-top .auth-brand{font-size:15px}
}

/* ---- Network controls, speeds, devices ---- */
.alert-info{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.3);color:#93c5fd}
.switch{margin:0;display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);cursor:pointer;color:var(--text)}
.switch:first-of-type{border-top:0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .knob{flex:0 0 40px;height:22px;border-radius:99px;background:var(--line2);position:relative;transition:.15s;margin-top:2px}
.switch .knob:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked + .knob{background:var(--accent)}
.switch input:checked + .knob:after{left:21px}
.switch input:focus-visible + .knob{outline:2px solid var(--accent);outline-offset:2px}
.switch b{display:block;font-size:14.5px}
.switch small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.switch.locked{opacity:.55;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{padding:5px 10px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--text);font:600 12.5px Inter,sans-serif;cursor:pointer}
.chip:hover,.chip.on{border-color:var(--accent);color:var(--accent)}
.unit-input{display:flex;align-items:stretch}
.unit-input input{border-top-right-radius:0;border-bottom-right-radius:0}
.unit-input span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line2);border-left:0;border-radius:0 10px 10px 0;color:var(--muted);font-size:13px;white-space:nowrap}
.fieldset{border:1px solid var(--line);border-radius:12px;padding:4px 14px 14px;margin-top:16px}
.fieldset legend{padding:0 6px;font-size:13px;color:var(--muted);font-weight:600}
.upsell{font-size:12px;font-weight:600;color:var(--amber);margin-left:6px}
.speed{font-size:13px;white-space:nowrap;line-height:1.35}

/* ---- M-Pesa mode picker, earnings ---- */
.paymode{display:grid;gap:10px;margin:6px 0 4px}
.pm-card{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px;border:1px solid var(--line2);border-radius:12px;cursor:pointer;color:var(--text)}
.pm-card:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pm-card input{width:auto;margin-top:3px;accent-color:var(--accent)}
.pm-card b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14.5px}
.pm-card small{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.big-money{font:700 34px 'Space Grotesk',Inter,sans-serif;margin:4px 0 2px}
.tag-sent,.tag-review{background:rgba(251,191,36,.14);color:var(--amber)}

/* ---- Light dashboard theme (Settings → Appearance). "System" is resolved to light/dark in <head>. ---- */
:root[data-theme=light]{
  --bg:#f4f6fb; --bg2:#eef1f7; --card:#ffffff; --line:#e3e7ef; --line2:#d4dae6;
  --text:#141a26; --muted:#5d677a; --red:#dc2626; --amber:#b45309; --blue:#2563eb;
  color-scheme:light;
}
:root[data-theme=dark]{color-scheme:dark}
:root[data-theme=light] .panel,:root[data-theme=light] .stat{box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px -6px rgba(16,24,40,.08)}
:root[data-theme=light] .alert-success{color:#166534}
:root[data-theme=light] .alert-error{color:#991b1b}
:root[data-theme=light] .alert-warn{color:#92400e;background:rgba(251,191,36,.14)}
:root[data-theme=light] .alert-info{color:#1e40af}
:root[data-theme=light] .tag-success,:root[data-theme=light] .tag-active,:root[data-theme=light] .tag-online{color:#15803d}
:root[data-theme=light] pre.code{color:#1f2937}
:root[data-theme=light] .side nav .nav-label{color:#8a93a6}
:root[data-theme=light] .switch .knob{background:#cfd6e3}
:root[data-theme=light] .nav-open .side{box-shadow:20px 0 60px rgba(0,0,0,.18)}
.theme-toggle{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);margin:10px 0 4px}
.theme-toggle button{flex:1;border:0;background:transparent;color:var(--muted);padding:6px 0;border-radius:7px;cursor:pointer;font:600 12px Inter,sans-serif}
.theme-toggle button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 2px var(--card)}
.swatch.on,.swatch:has(input:checked){border-color:var(--text)}
.swatch input{display:none}

/* ---- Portal design page ---- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-top:8px}
.theme-card{margin:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;color:var(--text);background:var(--card)}
.theme-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.theme-card input{display:none}
.theme-card .sw{height:58px;display:flex;align-items:flex-end;gap:4px;padding:8px}
.theme-card .sw i{display:block;width:16px;height:16px;border-radius:5px;background:#fff;opacity:.9}
.theme-card b{display:block;padding:7px 10px;font-size:13px}
.design-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.phone{position:sticky;top:18px;border:10px solid #0b0d12;border-radius:36px;overflow:hidden;height:760px;background:#fff;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.phone iframe{width:100%;height:100%;border:0;display:block}
.badge-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.badge-row:first-child{border-top:0}
.bchips{display:flex;gap:5px;flex-wrap:wrap}
.bchip{margin:0;width:24px;height:24px;border-radius:7px;cursor:pointer;border:2px solid transparent;position:relative}
.bchip:has(input:checked){border-color:var(--text)}
.bchip input{display:none}
.bchip.auto{background:conic-gradient(#b45309,#94a3b8,#ca8a04,#059669,#2563eb,#7c3aed,#b45309)}
@media (max-width:1100px){.design-wrap{grid-template-columns:1fr}.phone{position:static;height:640px;max-width:380px;margin:0 auto}}