/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   kcip — "kb" theme. Loaded LAST on every page (landing, plans, support, legal, guides, dashboard, admin).
   Look: deep slate sky with a static starfield, flat slate cards, one neon-green action colour with dark text,
   small radii, coloured status pills, a gradient glow frame for the things that matter. No blur, no canvas,
   no animated gradients: it stays light on a modest laptop.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* shared palette */
  --bg:#0b1120;--bg2:#0f172a;--surf:#111c33;--surf2:#1b2740;
  --card:#162033;--card2:rgba(148,163,184,.06);--panel:#162033;
  --line:rgba(148,163,184,.16);--line2:rgba(148,163,184,.28);--border:rgba(148,163,184,.16);--border2:rgba(148,163,184,.3);
  --gr:83,252,24;--g:#53fc18;--g2:#3fd10f;--g3:#7dff4d;--gd:rgba(83,252,24,.12);--gd2:rgba(83,252,24,.07);
  --green:#53fc18;--green2:#3fd10f;
  --glow:0 0 0 1px rgba(83,252,24,.25),0 0 22px rgba(83,252,24,.18);--glow2:0 0 0 1px rgba(83,252,24,.4),0 0 32px rgba(83,252,24,.3);
  --cy:#38bdf8;--blue:#3b82f6;--blued:rgba(59,130,246,.14);--pu:#a78bfa;--purple:#a78bfa;--purpled:rgba(167,139,250,.14);
  --am:#facc15;--yellow:#facc15;--or:#fb923c;--orange:#fb923c;--oranged:rgba(251,146,60,.14);--rd:#f87171;--red:#ef4444;--redd:rgba(239,68,68,.14);
  --tx:#cbd5e1;--text:#cbd5e1;--hd:#f8fafc;--heading:#f8fafc;--mu:#94a3b8;--muted:#94a3b8;--mu2:#64748b;--muted2:#334155;
  --r:10px;--r1:8px;--r2:12px;--r3:16px;
  --sh:0 1px 0 rgba(255,255,255,.03) inset,0 14px 30px -20px rgba(0,0,0,.8);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 30px -20px rgba(0,0,0,.8);--shadow-lg:0 24px 60px -24px rgba(0,0,0,.85);
  --font:'Tajawal','Inter','Segoe UI',Tahoma,Arial,sans-serif;
}
html,body{background:#0b1120}
body{background:transparent;color:var(--tx)}

/* ── static starfield (one fixed layer, painted once) ── */
body::before{
  content:'';display:block!important;position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:#0b1120;
  background-image:
    radial-gradient(900px 520px at 85% -10%,rgba(83,252,24,.075),transparent 65%),
    radial-gradient(800px 560px at -8% 30%,rgba(59,130,246,.09),transparent 65%),
    radial-gradient(700px 500px at 60% 115%,rgba(139,92,246,.07),transparent 65%),
    radial-gradient(1.8px 1.8px at 58% 72%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(1.4px 1.4px at 66% 76%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(2.6px 2.6px at 66% 61%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.6px 1.6px at 13% 58%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(2.6px 2.6px at 12% 69%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.8px 1.8px at 77% 51%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(2.2px 2.2px at 80% 2%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.4px 1.4px at 8% 5%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.8px 1.8px at 77% 4%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.4px 1.4px at 57% 76%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.8px 1.8px at 82% 38%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.8px 1.8px at 85% 11%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 53% 71%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.4px 1.4px at 41% 98%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(2.2px 2.2px at 4% 9%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.6px 1.6px at 52% 14%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(2.6px 2.6px at 9% 3%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.2px 1.2px at 28% 27%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(1.8px 1.8px at 49% 91%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(2.6px 2.6px at 10% 73%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.6px 1.6px at 87% 35%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.2px 1.2px at 40% 43%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(1.4px 1.4px at 98% 16%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.2px 1.2px at 91% 13%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.4px 1.4px at 60% 63%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.4px 1.4px at 58% 66%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.8px 1.8px at 54% 83%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.4px 1.4px at 51% 54%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.6px 1.6px at 35% 76%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.8px 1.8px at 27% 24%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.4px 1.4px at 6% 19%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(2.2px 2.2px at 34% 2%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 38% 50%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(2.2px 2.2px at 12% 27%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.6px 1.6px at 2% 77%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.4px 1.4px at 80% 59%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(1.8px 1.8px at 74% 18%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.6px 1.6px at 81% 20%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(2.6px 2.6px at 79% 32%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(2.6px 2.6px at 21% 95%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.8px 1.8px at 88% 50%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.2px 1.2px at 54% 7%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.6px 1.6px at 5% 66%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.8px 1.8px at 95% 91%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.8px 1.8px at 54% 77%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(2.6px 2.6px at 67% 23%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.8px 1.8px at 17% 30%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.4px 1.4px at 36% 28%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.8px 1.8px at 9% 35%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(1.2px 1.2px at 32% 8%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(2.2px 2.2px at 37% 48%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.4px 1.4px at 12% 47%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(2.6px 2.6px at 43% 85%,rgba(226,232,240,0.7),transparent 62%),
    radial-gradient(1.2px 1.2px at 76% 5%,rgba(226,232,240,1),transparent 62%),
    radial-gradient(1.6px 1.6px at 46% 90%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(2.6px 2.6px at 3% 77%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(2.6px 2.6px at 62% 9%,rgba(226,232,240,0.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 41% 18%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(1.6px 1.6px at 58% 70%,rgba(226,232,240,0.55),transparent 62%),
    radial-gradient(2.6px 2.6px at 95% 95%,rgba(226,232,240,0.7),transparent 62%);
}
.kc-bg,.kc-bg::before,.kc-bg i{display:none!important;animation:none!important}
#kc-fx{display:none!important}

::selection{background:rgba(83,252,24,.28);color:#fff}
:focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:6px}
.grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--g)}

/* ── top bar (public pages) ── */
.top{background:rgba(11,17,32,.94);backdrop-filter:none;border-bottom:1px solid var(--line)}
.brand-mark{filter:none}
.brand-t b{letter-spacing:-.03em}
.nav a{border-radius:8px;font-weight:700}
.nav a:hover,.nav a.on{background:rgba(148,163,184,.1);color:#fff}

/* ── buttons: neon primary with dark text, slate secondary ── */
.btn{border-radius:8px;border:1px solid var(--line2);background:#1e293b;color:var(--hd);font-weight:800;box-shadow:none;transform:none!important;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,filter .15s}
.btn:hover{border-color:rgba(83,252,24,.6);color:var(--g);background:#243247}
.btn-p,.btn-g{background:var(--g);border:1px solid var(--g);color:#06120a;box-shadow:0 0 0 0 rgba(83,252,24,0)}
.btn-p:hover,.btn-g:hover{background:#6bff35;border-color:#6bff35;color:#06120a;filter:none;box-shadow:0 0 22px rgba(83,252,24,.38)}
.btn-lg{border-radius:10px}.btn-sm{border-radius:7px}
.btn-o{background:#1e293b;border:1px solid var(--line2);color:var(--hd)}
.btn-o:hover{background:#243247;border-color:rgba(83,252,24,.6);color:var(--g)}
.btn-r,.btn-d{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.btn-r:hover,.btn-d:hover{background:#ef4444;border-color:#ef4444;color:#fff}
.btn-b{background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.45);color:#93c5fd}
.btn-b:hover{background:#3b82f6;border-color:#3b82f6;color:#fff}
.btn-w{background:#fff;color:#0f172a;border-color:#fff}

/* ── cards: flat slate, thin border, no blur, no hover orbs ── */
.card,.acard,.gcard,.auth,.plc,.pk,.pcard,.vcard,.step,.feat,.mcard,.build,.sum,.faq details,.res-i,.stat-card,.bt,.rail-card,.hm-run,.hm-plan,.hm-stats,.hm-links,.trial,.banner{
  background:#162033;border:1px solid var(--line);border-radius:12px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.card::before,.stat-card::before,.rail-card::before,.bt::before,.card::after,.stat-card::after,.bt::after{display:none!important}
.card{animation:none}
.card:hover,.stat-card:hover,.bt:hover{transform:none;border-color:var(--line2)}
.plc:hover,.pk:hover,.feat:hover,.step:hover,.gcard:hover,.mcard:hover{transform:none;border-color:rgba(83,252,24,.45)}
.card-head{border-bottom:1px solid var(--line)}
.card-title,.card-h h2,.card-h h3{color:#fff}

/* the one gradient glow frame (hero card, featured package, the owner's attention cards) */
.auth,.plc.hot,.pk.hot,.pk.sel,.mcard.sel,.final .box,.hm-hero,.ov-warn{
  border:1px solid transparent;
  background:linear-gradient(#162033,#162033) padding-box,linear-gradient(135deg,#53fc18 0%,#38bdf8 55%,#8b5cf6 100%) border-box;
  box-shadow:0 0 38px -12px rgba(83,252,24,.35)}
.auth::before{display:none}

/* ── inputs ── */
.inp,input,textarea,select{background:#0b1220;border:1px solid #334155;border-radius:8px;color:#e8eef6}
.inp:hover,input:hover,textarea:hover,select:hover{border-color:#475569}
.inp:focus,input:focus,textarea:focus,select:focus{border-color:var(--g);background:#0b1220;box-shadow:0 0 0 3px rgba(83,252,24,.14);outline:none}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--g)}
input[type=checkbox],input[type=radio]{width:1.05em;height:1.05em;min-width:1.05em;padding:0;margin:0 0 0 8px;background:transparent;border:0;box-shadow:none;vertical-align:-.16em;cursor:pointer}
html[dir=rtl] input[type=checkbox],html[dir=rtl] input[type=radio]{margin:0 0 0 8px}
input[type=range]{padding:0;background:transparent;border:0;box-shadow:none}

/* ── pills / chips / section headings ── */
.pill,.bp,.otag{border-radius:6px}
.pill.g,.bp.g,.otag.g{background:rgba(83,252,24,.14);color:var(--g)}
.eyebrow{border-radius:6px;background:rgba(83,252,24,.1);border:1px solid rgba(83,252,24,.3);letter-spacing:.1em}
.badge{border-radius:99px}
.sec-h h2{letter-spacing:-.01em}
.sec-h h2::before{content:'';display:block;width:46px;height:3px;border-radius:3px;background:var(--g);margin:0 auto 14px;box-shadow:0 0 14px rgba(83,252,24,.6)}

/* ── modal + toast ── */
.ov{backdrop-filter:none;background:rgba(2,6,15,.82)}
.dlg{background:#162033;border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow-lg)}
#toast{background:#1e293b;border:1px solid var(--line2);border-radius:10px}

/* ── tables ── */
.tbl th{text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;color:#94a3b8;background:rgba(148,163,184,.05)}
.tbl td,.tbl th{border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:rgba(148,163,184,.05)}
.foot{background:rgba(11,17,32,.6);border-top:1px solid var(--line)}

/* ── landing specifics ── */
.hero-art::before{display:none}
.gband{background:#162033;border:1px solid rgba(255,198,92,.35);border-radius:12px}
.plc .go,.pk .go{border-radius:8px}
.faq details{border-radius:10px}
.tabs{background:#0b1220;border:1px solid var(--line);border-radius:10px}
.tabs button{border-radius:7px}
.tabs button.on{background:var(--g);color:#06120a;box-shadow:none}
.submit,.gph{border-radius:8px}
.seg button.on,.chip.on,.ptabs button.on{background:var(--g);color:#06120a;border-color:var(--g);box-shadow:none}

/* ═══ DASHBOARD SHELL ═══ */
#nav{background:#0b1220;backdrop-filter:none;border-inline-end:1px solid var(--line)}
#nav::after{display:none}
.nv-brand svg{animation:none;box-shadow:none;border-radius:10px}
#tabs-bar .tab{border-radius:8px;padding:8px 11px;gap:11px;font-weight:700;transition:background .15s,color .15s}
#tabs-bar .tab .tab-ico{width:auto;height:auto;background:transparent!important;box-shadow:none!important;font-size:17px}
#tabs-bar .tab:hover{background:rgba(148,163,184,.09);transform:none;color:#fff}
#tabs-bar .tab:hover .tab-ico{transform:none}
#tabs-bar .tab.active{background:rgba(83,252,24,.1);border-color:rgba(83,252,24,.28);box-shadow:none;color:var(--g)}
#tabs-bar .tab.active::after{box-shadow:none;animation:none;background:var(--g)}
.nv-sec{color:#64748b}
.nv-badge{background:var(--g);color:#06120a}
.nv-foot{border-top:1px solid var(--line)}
.nv-foot .admin-btn{background:var(--g);border:1px solid var(--g);color:#06120a;border-radius:8px;box-shadow:none}
.nv-foot .admin-btn:hover,.nv-foot .admin-btn.on{background:#6bff35;color:#06120a;box-shadow:0 0 22px rgba(83,252,24,.35)}
.nv-user{background:#162033;border:1px solid var(--line);border-radius:10px}
#topnav{background:rgba(11,17,32,.96);backdrop-filter:none;border-bottom:1px solid var(--line);height:64px;min-height:64px}
.ind{border-radius:6px;background:#162033;border:1px solid var(--line)}
.chatter-btn{border-radius:8px;background:#1e293b;border:1px solid var(--line2)}
.chatter-btn.on{background:rgba(83,252,24,.12);border-color:var(--g);color:var(--g);box-shadow:none}
.stat-card .s-ico{border-radius:10px}
.s-val,.bt-v{letter-spacing:-.02em}
.kc-help{background:var(--g)!important;color:#06120a!important;border-radius:10px!important;box-shadow:0 8px 24px -8px rgba(83,252,24,.55)!important}
.kc-help *{color:#06120a!important}

/* ═══ ADMIN ═══ */
/* the owner's panel is a full-width workspace: no channel rail, no bot controls, no support bubble */
body.adm-on #rail,body.adm-on .kc-help{display:none!important}
body.adm-on #topnav .ind,body.adm-on #topnav .refresh-btn,body.adm-on #topnav .chatter-btn,body.adm-on #topnav .tp-sep{display:none!important}
body.adm-on #layout{padding:20px clamp(16px,2.6vw,52px)}
body.adm-on #pane-admin{width:100%;max-width:1760px;margin-inline:auto}
.adm-nav{position:sticky;top:0;z-index:6;gap:2px;padding:0;background:#0b1120;border:0;border-bottom:1px solid var(--line);border-radius:0;backdrop-filter:none;margin-bottom:6px}
.adm-nav button{flex:0 0 auto;min-width:0;padding:13px 20px;border-radius:0;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;color:#94a3b8}
.adm-nav button:hover{background:rgba(148,163,184,.07);color:#fff}
.adm-nav button.on{background:transparent;box-shadow:none;color:var(--g);border-bottom-color:var(--g)}
.adm-nav .nb{background:var(--g);color:#06120a}
.adm-sec{gap:16px}
.biz-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.biz-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bt{padding:18px;border-radius:12px;border-inline-start:3px solid var(--c,var(--g))}
.adm-sum{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.adm-sum .box{background:#162033;border:1px solid var(--line);border-radius:10px}
.adm-grid{gap:16px}
.adm-grid>.card:only-child{grid-column:1/-1}
.adm-grp{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 -2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.adm-grp h3{font-size:16px;font-weight:900;color:#fff}
.adm-grp small{color:#64748b;font-size:12.5px}
.adm-chip{border-radius:6px}
.adm-chip.free{background:rgba(83,252,24,.14);color:var(--g)}
.adm-chip.used{background:rgba(250,204,21,.14);color:var(--yellow)}
.help,.adm-note{color:#94a3b8}
.help code,.adm-note code{background:#0b1220;border:1px solid var(--line);border-radius:6px;padding:1px 7px}

/* accordion cards (billing + system) */
.card.cf>.card-head{cursor:pointer;margin-bottom:0;border-bottom:0;padding-bottom:0}
.card.cf:not(.shut)>.card-head{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.card.cf>.card-head .card-title{gap:10px}
.cf-chev{font-style:normal;color:#64748b;margin-inline-start:6px;transition:transform .2s}
.card.cf.shut .cf-chev{transform:rotate(90deg)}
html[dir=rtl] .card.cf.shut .cf-chev{transform:rotate(-90deg)}
.card.cf.shut>:not(.card-head){display:none!important}
.card.cf.shut>.card-head .btn{display:none}
.card.cf>.card-head:hover .card-title{color:var(--g)}

/* payment readiness */
.pay-ready{border:1px solid var(--line)}
.pr-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.pr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pr-steps{grid-template-columns:minmax(0,1fr)}}
.pr-st{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:#0f172a;border:1px solid var(--line)}
.pr-st b{display:block;color:#fff;font-size:13.5px}
.pr-st small{display:block;color:#94a3b8;font-size:12px;line-height:1.7;margin-top:2px}
.pr-st.ok{border-color:rgba(83,252,24,.35)}
.pr-st.ok small{color:#86efac}
.pr-st.no{border-color:rgba(250,204,21,.4)}
.pr-n{flex:0 0 26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;background:#334155;color:#fff}
.pr-st.ok .pr-n{background:var(--g);color:#06120a}
.pr-st.no .pr-n{background:var(--yellow);color:#1a1400}
.pr-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pr-why{flex:1 1 320px;color:#94a3b8;font-size:12.5px;line-height:1.8}
.ov-warn{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:12px}
.ov-warn b{color:#fde68a}
.ov-warn span{flex:1 1 260px;color:#cbd5e1;font-size:13px}

/* ═══ packages editor (admin) ═══ */
.pkr{background:#0f172a;border:1px solid var(--line);border-radius:10px}

/* ═══ phone ═══ */
@media(max-width:900px){body.adm-on #layout{padding:12px}.adm-nav{overflow-x:auto;flex-wrap:nowrap}.adm-nav button{padding:11px 14px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* floating help bubble (plans / support pages) */
.helpfab{background:var(--g)!important;color:#06120a!important;border:0!important;border-radius:10px!important;box-shadow:0 8px 24px -8px rgba(83,252,24,.55)!important}
.helpfab *{color:#06120a!important}
.adm-sec[data-sec="system"] .adm-grid,.adm-sec[data-sec="billing"] .adm-grid{grid-template-columns:minmax(0,1fr)}
.pr-modes{grid-template-columns:minmax(0,1fr)!important}