/* SIMPLY FI website light theme = the router admin colors (light, violet). Loaded AFTER style.css + admin.css on every
   admin / login page (worker route /assets/sf-light.css, owner 2026-11-02 "update mo website ko theme"). */
:root{color-scheme:light;--bg:#eceefb;--bg2:#f4f5fc;--card:#ffffff;--card2:#ffffff;--field:#f6f7fe;--fline:#dcdff3;--line:#e3e5f6;--line2:#dcdff3;--txt:#20212e;--mut:#5c5f7a;--gold:#5b4fe0;--gold2:#6c63ff;--amber:#9a5b00;--blue:#2f6fd6;--green:#1c8c3e;--red:#b42318;--teal:#0f8a7c;--side:#ffffff;--sh:0 1px 2px rgba(43,45,66,.04),0 8px 24px rgba(91,79,224,.07)}
body{background:radial-gradient(ellipse at top,#ffffff 0,var(--bg) 55%) fixed var(--bg);color:var(--txt)}
body.shell{background:#eceefb}
body.auth{background:radial-gradient(ellipse at top,#ffffff 0,#eceefb 60%) fixed}
a{color:#5b4fe0}
::selection{background:rgba(108,99,255,.2)}
/* cards */
.card,.stat,.feat,.steps li{background:#fff;border:1px solid #e3e5f6;box-shadow:var(--sh)}
.stat{background:linear-gradient(160deg,#ffffff,#f7f7fd)}
.kpi{background:#fff;border-color:#e3e5f6}
.kpi .kic{background:rgba(108,99,255,.1);color:#5b4fe0}
.kpi.teal .kic{background:rgba(15,138,124,.1);color:#0f8a7c}
.kpi.green .kic{background:rgba(28,140,62,.1);color:#1c8c3e}
.kpi.blue .kic{background:rgba(47,111,214,.1);color:#2f6fd6}
/* sidebar */
.side{background:#ffffff;border-right:1px solid #e3e5f6}
.snav a{color:#393b51}
.snav a:hover{background:#f4f5fc;color:#20212e}
.snav a.on{background:rgba(108,99,255,.1);color:#5b4fe0;box-shadow:inset 3px 0 0 #6c63ff}
.side-foot{border-top-color:#e3e5f6}
.navt:checked~.side{box-shadow:20px 0 60px rgba(43,45,66,.18)}
.navt:checked~.scrim{background:rgba(32,33,46,.35)}
/* top bar = the router admin's violet bar */
.topbar{background:linear-gradient(90deg,#6c63ff,#8b7cf8);border-bottom:0;box-shadow:0 6px 18px rgba(91,79,224,.22)}
.topbar .crumb,.topbar .crumb b{color:#fff}
.topbar .crumb .muted{color:rgba(255,255,255,.78)}
.topbar .crumb .sep{color:rgba(255,255,255,.55)}
.topbar .iconbtn{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.topbar .iconbtn:hover{background:rgba(255,255,255,.22)}
.topbar .umenu summary{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.16)}
.topbar .umenu summary:hover{background:rgba(255,255,255,.24)}
.avatar{background:linear-gradient(145deg,#7f77ff,#6c63ff);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.drop{background:#fff;border-color:#dcdff3;color:#20212e;box-shadow:0 18px 40px rgba(43,45,66,.16)}
.drop .dh{border-bottom-color:#e3e5f6}
.drop a{color:#20212e}
.drop a:hover{background:#f4f5fc;color:#5b4fe0}
.iconbtn{color:#20212e}
.iconbtn:hover{background:#f4f5fc}
.top{border-bottom:1px solid #e3e5f6}
/* buttons */
.btn,button.btn{background:#6c63ff;color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(108,99,255,.22)}
.btn:hover,button.btn:hover{background:#5b4fe0}
.btn.ghost{background:#fff;color:#5b4fe0;border:1px solid #c9c6fb;box-shadow:none}
.btn.ghost:hover{background:#f4f3ff}
.btn.danger{background:#fdecea;color:#b42318;border:1px solid #f5c2bc;box-shadow:none}
.btn.danger:hover{background:#fbdcd8}
.btn.ok{background:#e9f7ef;color:#1c7a3a;border:1px solid #b9e3c8;box-shadow:none}
.plan-badge{background:#6c63ff;color:#fff}
.steps li:before{background:#6c63ff;color:#fff}
.seg{border-color:#e3e5f6}
.seg button.on{background:#f0efff;color:#5b4fe0}
.tabs a.on,.tabs a:hover{background:rgba(108,99,255,.1);border-color:rgba(108,99,255,.24);color:#5b4fe0}
.gbtn{background:#fff;color:#1f1f1f;border:1px solid #dcdff3}
/* forms */
input,select,textarea{background:#f6f7fe;color:#20212e;border-color:#dcdff3}
input:focus,select:focus,textarea:focus{outline:none;border-color:#6c63ff;box-shadow:0 0 0 3px rgba(108,99,255,.16)}
code{background:#f1f2fb;color:#3f3a8f;border-color:#e3e5f6}
.lic-summary{background:#f6f7fe;border-color:#e3e5f6}
/* pills */
.pill.ok{color:#1c8c3e;background:rgba(28,140,62,.08);border-color:rgba(28,140,62,.28)}
.pill.bad{color:#b42318;background:rgba(180,35,24,.07);border-color:rgba(180,35,24,.25)}
.pill.warn{color:#9a5b00;background:rgba(230,150,0,.1);border-color:rgba(200,130,0,.3)}
.pill.info,.pill.role-admin{color:#2f6fd6;background:rgba(47,111,214,.08);border-color:rgba(47,111,214,.25)}
.pill.gold,.pill.role-superadmin{color:#5b4fe0;background:rgba(108,99,255,.1);border-color:rgba(108,99,255,.3)}
.pill.role-distributor{color:#1c8c3e;background:rgba(28,140,62,.08);border-color:rgba(28,140,62,.25)}
.pill:not(.ok):not(.bad):not(.warn):not(.info):not(.gold):not([class*=role-]){color:#5c5f7a;background:#f4f5fc;border-color:#dcdff3}
/* alerts, banners, toasts, dialogs */
.alert{border-color:#e3e5f6}
.alert.ok{background:#e9f7ef;border:1px solid #b9e3c8;color:#1c7a3a}
.alert.err{background:#fdecea;border:1px solid #f5c2bc;color:#b42318}
.alert.warn{background:#fff6e5;border:1px solid #f3d29a;color:#8a5300}
.banner.warn{background:#fff6e5;border:1px solid #f3d29a;color:#8a5300}
.banner a{color:#5b4fe0}
.toast{background:#fff;color:#20212e;border:1px solid #e3e5f6;box-shadow:0 18px 40px rgba(43,45,66,.18)}
dialog.modal{background:#fff;color:#20212e;border-color:#dcdff3;box-shadow:0 30px 80px rgba(43,45,66,.25)}
dialog.modal::backdrop{background:rgba(32,33,46,.45)}
/* tables */
table.dt th{background:#f4f5fc;color:#5c5f7a}
table.dt tbody tr:hover td{background:#f7f7fd}
tbody tr:hover{background:#f7f7fd}
.evlist li{border-bottom-color:#eef0f8}
/* danger zones */
.danger-zone{border-color:#f5c2bc;background:linear-gradient(180deg,#fff5f4 0%,#fff 55%)}
.dzone{border-color:#f5c2bc;background:linear-gradient(180deg,#fff5f4,transparent)}
.foot{border-top-color:#e3e5f6}
/* the hidden menu checkbox got width:100% + margin from input{} and stuck out 4px (sideways scroll on every shell page) */
.navt{width:1px;height:1px;margin:0;left:0;top:0}