:root{--bg:#f4f8fc;--card:#fff;--text:#10243f;--muted:#607089;--primary:#1e9fe6;--navy:#062a54;--red:#e62129;--border:#dbe7f2;--shadow:0 12px 35px rgba(6,42,84,.10)}
[data-theme=dark]{--bg:#071524;--card:#0d2238;--text:#ecf6ff;--muted:#a9bdd1;--primary:#31b7ff;--navy:#061628;--red:#ff4b55;--border:#23435f;--shadow:0 12px 35px rgba(0,0,0,.35)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}a{text-decoration:none;color:inherit}.topbar{height:76px;background:linear-gradient(90deg,var(--navy),#0b72a8);color:white;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}.brand{display:flex;gap:14px;align-items:center}.brand img{height:52px;width:52px;object-fit:contain;background:white;border-radius:12px;padding:3px}.brand h1{font-size:18px;margin:0}.brand small{color:#d8f2ff}.top-actions{display:flex;gap:10px;align-items:center}.btn,.select{border:1px solid var(--border);border-radius:11px;padding:10px 14px;background:var(--card);color:var(--text);font-weight:700}.btn.red{background:var(--red);color:white;border-color:transparent}.btn.ghost{background:rgba(255,255,255,.16);color:white;border-color:rgba(255,255,255,.35)}.pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16)}.layout{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 76px)}.sidebar{background:var(--card);border-right:1px solid var(--border);padding:18px;position:sticky;top:76px;height:calc(100vh - 76px)}.sidebar a{display:block;padding:13px 14px;border-radius:13px;margin-bottom:8px;color:var(--text);font-weight:700}.sidebar a:hover{background:rgba(30,159,230,.13);color:var(--primary)}.main{padding:24px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.card h2,.card h3{margin-top:0}.kpi{font-size:30px;font-weight:900;color:var(--primary)}.kpi.red{color:var(--red)}table{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden}th,td{padding:12px;border-bottom:1px solid var(--border);text-align:left}th{background:rgba(30,159,230,.12)}input,select,textarea{width:100%;padding:11px 12px;margin:6px 0 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}label{font-weight:800}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.progress{height:15px;background:rgba(96,112,137,.22);border-radius:99px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,var(--primary),#64d3ff)}.bar.red{background:linear-gradient(90deg,var(--red),#ff8c91)}.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(30,159,230,.14);color:var(--primary);font-weight:800}.badge.red{background:rgba(230,33,41,.14);color:var(--red)}.notice{border-left:5px solid var(--red);padding:12px;background:rgba(230,33,41,.08);border-radius:12px}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),#189fe3)}.login-card{width:min(440px,92vw);background:var(--card);color:var(--text);border-radius:24px;padding:28px;box-shadow:0 25px 70px rgba(0,0,0,.25)}.login-card img{width:82px;display:block;margin:auto}.muted{color:var(--muted)}.readonly{opacity:.75}.material-frame{width:100%;height:420px;border:1px solid var(--border);border-radius:14px;background:var(--bg)}@media(max-width:800px){.topbar{height:auto;align-items:flex-start;gap:10px;flex-direction:column}.top-actions{flex-wrap:wrap}.layout{grid-template-columns:1fr}.sidebar{height:auto;position:relative;top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}.main{padding:14px}.brand h1{font-size:15px}}


.menu-line{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}.select.compact{width:auto;min-width:140px}.welcome-pill{max-width:260px;overflow:hidden;text-overflow:ellipsis}.payment-box{border:2px solid rgba(230,33,41,.35);background:linear-gradient(135deg,rgba(30,159,230,.10),rgba(230,33,41,.08));}.paybill-no{font-size:28px;font-weight:900;color:var(--red)}.cash-ban{font-weight:900;color:var(--red);letter-spacing:.04em}.success{border-left:5px solid #1da75b;padding:12px;background:rgba(29,167,91,.10);border-radius:12px}.action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}@media(max-width:900px){.menu-line{width:100%;justify-content:flex-start;flex-wrap:wrap;white-space:normal}.welcome-pill{max-width:100%}.select.compact{min-width:120px}.topbar{padding:10px 14px}}

/* Professional two-column login page - Safe Ride brand palette */
:root{
  --sr-sky:#58ccf7;
  --sr-yellow:#ffd800;
  --sr-red:#e11d2e;
  --sr-black:#221f20;
  --sr-white:#ffffff;
  --sr-deep-sky:#01a5f0;
}
.login-pro-page{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:36px 18px;background:radial-gradient(circle at top left,rgba(88,204,247,.36),transparent 32%),linear-gradient(135deg,#eefaff 0%,#ffffff 48%,#f6fbff 100%)}
[data-theme=dark] .login-pro-page{background:radial-gradient(circle at top left,rgba(1,165,240,.22),transparent 30%),linear-gradient(135deg,#071524 0%,#0d2238 52%,#111111 100%)}
.login-pro-shell{width:min(1120px,100%);display:grid;grid-template-columns:1.08fr .92fr;border-radius:32px;overflow:hidden;box-shadow:0 28px 90px rgba(34,31,32,.18);border:1px solid rgba(1,165,240,.18);background:var(--card)}
.login-brand-panel{position:relative;overflow:hidden;padding:42px;color:var(--sr-white);background:linear-gradient(145deg,var(--sr-deep-sky) 0%,#087bb8 58%,var(--sr-black) 100%)}
.login-brand-panel:after{content:"";position:absolute;inset:auto -60px -80px auto;width:280px;height:280px;border-radius:50%;background:rgba(255,216,0,.18)}
.brand-glow{position:absolute;border-radius:50%;filter:blur(8px);opacity:.55}.glow-one{width:130px;height:130px;background:var(--sr-yellow);right:38px;top:42px}.glow-two{width:170px;height:170px;background:var(--sr-red);left:-70px;bottom:42px;opacity:.30}
.login-logo-wrap{width:104px;height:104px;background:var(--sr-white);border-radius:26px;display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.22);position:relative;z-index:2}.login-logo-wrap img{width:86px;height:86px;object-fit:contain}
.login-eyebrow{margin:32px 0 8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#eafaff;font-size:12px}.login-brand-panel h1{font-size:46px;line-height:1.05;margin:0 0 18px;position:relative;z-index:2}.login-brand-panel h1 span{color:var(--sr-yellow)}.login-copy{font-size:16px;line-height:1.65;max-width:560px;color:#ecfbff;position:relative;z-index:2}
.brand-stripes{display:flex;gap:10px;margin:28px 0;position:relative;z-index:2}.brand-stripes span{height:8px;border-radius:99px;display:block}.brand-stripes span:nth-child(1){width:92px;background:var(--sr-yellow)}.brand-stripes span:nth-child(2){width:58px;background:var(--sr-red)}.brand-stripes span:nth-child(3){width:110px;background:var(--sr-sky)}.brand-stripes span:nth-child(4){width:48px;background:var(--sr-white)}
.login-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative;z-index:2}.login-feature-grid div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:15px}.login-feature-grid b{display:block;font-size:16px}.login-feature-grid small{display:block;color:#eafaff;margin-top:3px}.strict-note{display:inline-block;margin-top:22px;padding:10px 14px;border-radius:999px;background:var(--sr-red);color:white;font-weight:900;letter-spacing:.04em;position:relative;z-index:2}
.login-form-panel{padding:42px;background:var(--card);color:var(--text)}.login-mini-top{display:inline-flex;align-items:center;gap:8px;background:rgba(1,165,240,.10);color:var(--sr-deep-sky);font-weight:900;border:1px solid rgba(1,165,240,.18);border-radius:999px;padding:8px 12px}.status-dot{width:10px;height:10px;background:#1da75b;border-radius:50%;box-shadow:0 0 0 5px rgba(29,167,91,.14)}.login-form-panel h2{font-size:32px;margin:18px 0 8px}.professional-login-form{margin-top:20px}.input-shell{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:16px;background:var(--bg);padding:0 13px;margin:7px 0 14px}.input-shell span{width:24px;text-align:center}.input-shell input{border:0;background:transparent;margin:0;padding:14px 0;outline:0}.login-submit{width:100%;border:0;background:linear-gradient(90deg,var(--sr-deep-sky),var(--sr-sky));color:var(--sr-black);font-weight:950;font-size:16px;padding:14px 18px;border-radius:16px;box-shadow:0 12px 28px rgba(1,165,240,.24)}.login-submit:hover{filter:brightness(.98);transform:translateY(-1px)}.login-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-weight:800}.login-links a:first-child{color:var(--sr-red)}.login-links a:last-child{color:var(--sr-deep-sky)}.professional-demo{margin-top:22px;background:linear-gradient(135deg,rgba(88,204,247,.13),rgba(255,216,0,.14));border:1px solid rgba(1,165,240,.16);border-radius:18px;padding:16px}.professional-demo h3{margin:0 0 8px}.professional-demo p{margin:6px 0}.policy-text{margin-top:14px;color:var(--muted)}
@media(max-width:900px){.login-pro-shell{grid-template-columns:1fr;border-radius:24px}.login-brand-panel,.login-form-panel{padding:28px}.login-brand-panel h1{font-size:34px}.login-feature-grid{grid-template-columns:1fr}.login-pro-page{padding:20px 12px}}
@media(max-width:520px){.login-links{flex-direction:column}.brand-stripes span:nth-child(3){display:none}.login-brand-panel,.login-form-panel{padding:22px}.login-logo-wrap{width:88px;height:88px}.login-logo-wrap img{width:72px;height:72px}}

/* Final Safe Ride branding upgrades */
:root{--sky:#58ccf7;--skyDeep:#01a5f0;--header:#5dccfe;--yellow:#ffd800;--red:#e11d2e;--black:#221f20;--white:#ffffff;--panel:#ffffff;--text:#221f20;--muted:#65737e;--line:#d8edf8;--shadow:0 16px 40px rgba(1,165,240,.14)}
html[data-theme="dark"]{--panel:#182129;--text:#f4fbff;--muted:#b7c8d4;--line:#2b3c48;--shadow:0 16px 40px rgba(0,0,0,.25);background:#0f161d;color:var(--text)}
body{background:linear-gradient(135deg,rgba(93,204,254,.12),rgba(255,216,0,.08));color:var(--text)}
.topbar{background:#5dccfe!important;border-bottom:4px solid var(--yellow);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;box-shadow:var(--shadow);position:sticky;top:0;z-index:9}.brand{display:flex;align-items:center;gap:12px}.brand img{width:58px;height:58px;object-fit:contain;background:#fff;border:4px solid var(--yellow);border-radius:50%}.brand h1{font-size:24px;line-height:1;margin:0;color:var(--black);letter-spacing:.5px;text-shadow:1px 1px 0 #fff}.brand small{font-weight:700;color:#04445e}.top-actions,.menu-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.btn,.select,input,textarea{border-radius:12px}.btn{border:0;padding:10px 14px;background:var(--skyDeep);color:white;text-decoration:none;display:inline-block;font-weight:800;cursor:pointer}.btn.red,.cash-ban{background:var(--red)!important;color:#fff}.btn.yellow{background:var(--yellow);color:var(--black)}.btn.ghost{background:rgba(255,255,255,.85);color:var(--black);border:1px solid rgba(0,0,0,.08)}.select.compact{height:40px;border:1px solid rgba(0,0,0,.12);background:white;padding:0 10px}.welcome-pill{background:#fff;color:var(--black);border-left:6px solid var(--red);padding:9px 12px;border-radius:999px;font-weight:800}.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 85px)}.sidebar{background:linear-gradient(180deg,var(--black),#111);padding:18px}.sidebar a{display:block;color:#fff;text-decoration:none;padding:11px 13px;border-radius:12px;margin:5px 0;font-weight:700}.sidebar a:hover{background:var(--skyDeep);color:#fff}.main{padding:22px;max-width:1300px;width:100%;box-sizing:border-box}.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}.grid,.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.stat{background:linear-gradient(135deg,rgba(93,204,254,.18),rgba(255,216,0,.12));padding:15px;border-radius:18px;border:1px solid var(--line)}.stat .num{font-size:28px;font-weight:900;color:var(--skyDeep)}.stat .label{color:var(--muted);font-weight:700}.progress{height:15px;background:#e6eef3;border-radius:999px;overflow:hidden;border:1px solid var(--line)}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--skyDeep),var(--yellow));border-radius:999px}.progress.red span{background:linear-gradient(90deg,var(--red),var(--yellow))}.badge{display:inline-block;border-radius:999px;padding:5px 10px;background:rgba(93,204,254,.2);font-weight:800}.badge.red{background:var(--red);color:#fff}.badge.yellow{background:var(--yellow);color:var(--black)}table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px}th{background:var(--black);color:#fff}td,th{padding:10px;border-bottom:1px solid var(--line);text-align:left}input,select,textarea{width:100%;padding:11px;border:1px solid var(--line);background:var(--panel);color:var(--text);box-sizing:border-box}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end}.muted{color:var(--muted)}.success{background:#e8fff1;border-left:5px solid #18a957;padding:10px;border-radius:10px}.error{background:#fff1f1;border-left:5px solid var(--red);padding:10px;border-radius:10px}.paybill-no{font-size:26px;font-weight:900;color:var(--red)}.view-only{user-select:none}.view-only iframe{width:100%;min-height:420px;border:0;border-radius:16px;background:#eef8ff}.material-card{border:1px dashed var(--skyDeep);padding:14px;border-radius:16px;background:rgba(93,204,254,.08)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}.login-brand{background:linear-gradient(135deg,#5dccfe,#01a5f0);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;color:#221f20}.login-brand img{width:180px;height:180px;object-fit:contain;background:#fff;border:8px solid #ffd800;border-radius:50%;box-shadow:var(--shadow)}.login-brand h1{font-size:44px;text-align:center;margin:20px 0 8px;text-shadow:2px 2px #fff}.login-card-wrap{display:flex;align-items:center;justify-content:center;padding:30px;background:linear-gradient(135deg,#fff,rgba(255,216,0,.10))}.login-card{width:min(440px,100%);background:var(--panel);border-radius:26px;padding:28px;box-shadow:var(--shadow);border-top:8px solid var(--yellow)}
@media(max-width:850px){.layout{grid-template-columns:1fr}.sidebar{position:static}.topbar{align-items:flex-start}.brand h1{font-size:18px}.login-shell{grid-template-columns:1fr}.login-brand{padding:24px}.login-brand h1{font-size:28px}.top-actions{justify-content:flex-start}.main{padding:14px}}

/* Super Admin dashboard matching attached reference */
.dashboard-pro{max-width:1600px}.dash-welcome{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.dash-welcome h2{margin:0 0 4px}.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px;margin-bottom:16px}.dash-kpi{display:flex;align-items:center;gap:15px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.dash-kpi strong{display:block;font-size:26px;font-weight:950}.dash-kpi span{display:block;font-weight:900}.dash-kpi small{display:block;color:var(--muted)}.kpi-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:rgba(1,165,240,.13)}.dash-kpi.green{background:linear-gradient(135deg,#fff,#edfff4)}.dash-kpi.orange{background:linear-gradient(135deg,#fff,#fff4df)}.dash-kpi.red{background:linear-gradient(135deg,#fff,#ffe8ea)}.dash-kpi.red strong{color:var(--red)}.dash-grid-main{display:grid;grid-template-columns:2fr .8fr;gap:18px}.span-2{min-width:0}.dash-card{margin-top:0}.card-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}.card-head h3{margin:0}.card-head a{color:var(--skyDeep);font-weight:900}.clean-table th{background:transparent;color:var(--text);font-size:13px}.clean-table td{font-size:13px}.mini-progress{width:86px;height:10px;background:#dfe9f1;border-radius:999px;display:inline-block;vertical-align:middle;margin-right:8px;overflow:hidden}.mini-progress span{display:block;height:100%;background:#0d7bea;border-radius:999px}.mini-progress.green span{background:#14a84a}.branch-line{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;gap:10px}.branch-line span{color:var(--muted)}.branch-total{display:flex;justify-content:space-between;padding-top:12px}.pay-panel{border:2px solid var(--skyDeep);background:linear-gradient(135deg,#fff,rgba(93,204,254,.08))}.pay-form{grid-template-columns:1.2fr 1fr 1fr 1fr 1.1fr 1.1fr}.unlock-note{align-self:stretch;display:flex;align-items:center;background:#eafaf0;color:#14753a;border:1px solid #bfeacd;border-radius:13px;padding:12px;font-weight:800}.lock-btn{align-self:end;width:100%;background:#087bea}.message-line{border-bottom:1px solid var(--line);padding:10px 0}.message-line b,.message-line span,.message-line small{display:block}.message-line small{color:var(--muted)}.message-line.warn{background:#fff7f7;border-radius:12px;padding:10px;margin:8px 0}.full{width:100%;text-align:center;margin-top:10px}.quick-actions{margin-top:0}.quick-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px}.green-btn{background:#16ad55}.purple-btn{background:#8257e6}.orange-btn{background:#ff9800}.sky-btn{background:#0aa7f5}.sidebar:before{content:"SAFE RIDE AFRICA\A Safety Beyond....";white-space:pre;display:block;color:#fff;font-size:19px;font-weight:950;text-align:center;border-bottom:1px solid rgba(255,255,255,.18);padding:12px 4px 18px;margin-bottom:10px}.sidebar:after{content:"Powered by Interswan Creations\A https://interswancreations.com/";white-space:pre;display:block;color:#dff7ff;font-size:12px;line-height:1.6;margin-top:28px;border-top:1px solid rgba(255,255,255,.15);padding-top:14px}
@media(max-width:1150px){.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-grid-main{grid-template-columns:1fr}.pay-form{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.dash-kpis,.pay-form,.quick-grid{grid-template-columns:1fr}.dash-welcome{align-items:flex-start;flex-direction:column}.dash-kpi strong{font-size:22px}.clean-table{font-size:12px;display:block;overflow-x:auto}}


/* 2026 responsive branding + global footer update */
.brand h1{font-size:clamp(16px,2.2vw,24px);max-width:760px;line-height:1.15}
.site-footer{background:#061628;color:#eaf8ff;text-align:center;padding:18px 12px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;border-top:4px solid var(--yellow);font-weight:700}.site-footer a{color:var(--yellow);text-decoration:none}.table-wrap{width:100%;overflow-x:auto}.sidebar:before{content:"SAFE RIDE AFRICA\A DRIVING SCHOOL LIMITED\A Safety Beyond....";font-size:15px}.sidebar:after{content:"Powered by Interswan Creations\A Contact +254728611828\A https://interswancreations.com/"}
@media(max-width:900px){.topbar{position:relative;flex-direction:column;align-items:stretch}.brand{align-items:center}.brand h1{font-size:18px}.brand img{width:50px;height:50px}.top-actions,.menu-line{justify-content:center}.layout{display:block}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sidebar:before,.sidebar:after{grid-column:1/-1}.sidebar a{margin:0}.main{width:100%;overflow:hidden}.card{padding:14px;border-radius:16px}table{display:block;overflow-x:auto;white-space:nowrap}.form-grid,.grid,.stats-grid{grid-template-columns:1fr!important}}
@media(max-width:520px){.sidebar{grid-template-columns:1fr}.brand{flex-direction:column;text-align:center}.welcome-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}.btn{width:100%;text-align:center}.site-footer{flex-direction:column;gap:6px}.dash-kpis{grid-template-columns:1fr!important}}


/* HostAfrica production visibility fixes */
[data-theme=dark] .dash-kpi.green,[data-theme=dark] .dash-kpi.orange,[data-theme=dark] .dash-kpi.red,[data-theme=dark] .pay-panel{background:linear-gradient(135deg,var(--card),rgba(88,204,247,.08));color:var(--text)}
[data-theme=dark] .unlock-note{background:rgba(20,168,74,.15);color:#d8ffe6;border-color:rgba(20,168,74,.35)}
[data-theme=dark] .message-line.warn{background:rgba(230,33,41,.12)}
[data-theme=dark] th{background:rgba(88,204,247,.16);color:var(--text)}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background:#081b2d;color:#ecf6ff;border-color:#365a78}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#a9bdd1}
.dashboard-pro .card,.dashboard-pro .dash-kpi{border-radius:20px}
.dashboard-pro .dash-kpis{align-items:stretch}
@media(max-width:760px){.dash-grid-main,.dash-kpis,.quick-grid,.pay-form{grid-template-columns:1fr!important}.card-head{align-items:flex-start;flex-direction:column;gap:8px}}

/* Final responsive and proportional logo fixes */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);align-items:center;gap:28px;padding:34px 24px;max-width:1200px;margin:0 auto}
.hero img{width:min(280px,80vw);max-height:220px;object-fit:contain;justify-self:center;background:transparent;border-radius:18px}
.hero h2{font-size:clamp(28px,4vw,48px);line-height:1.05;margin:12px 0}.hero p{font-size:clamp(15px,2vw,18px);line-height:1.6;max-width:680px}
img{max-width:100%;height:auto}.card,.dash-card,.login-card,.login-pro-shell{max-width:100%}.table-wrap, .responsive-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:720px}.clean-table{min-width:760px}
[data-theme=dark] .card,[data-theme=dark] .dash-card,[data-theme=dark] .stat,[data-theme=dark] .login-card,[data-theme=dark] .login-form-panel{background:var(--card)!important;color:var(--text)!important;border-color:var(--border)!important}
[data-theme=dark] .muted,[data-theme=dark] small{color:var(--muted)!important}[data-theme=dark] .success{background:rgba(29,167,91,.13)!important;color:#d8ffe6!important}[data-theme=dark] .error{background:rgba(230,33,41,.13)!important;color:#ffe7e9!important}
@media(max-width:900px){.hero{grid-template-columns:1fr;text-align:center;padding:24px 14px}.hero img{width:min(210px,72vw);max-height:170px}.layout{min-height:auto}.topbar{gap:12px}.brand{justify-content:center}.menu-line,.top-actions{width:100%}.main{padding:12px}.dash-grid-main{gap:12px}}
@media(max-width:560px){.hero img{width:min(170px,65vw);max-height:140px}.hero h2{font-size:28px}.brand img{width:44px!important;height:44px!important}.brand h1{font-size:16px!important}.login-brand img{width:130px!important;height:130px!important}.login-logo-wrap{width:86px;height:86px}.login-logo-wrap img{width:70px;height:70px}table{min-width:640px}}

/* 2026 single-database responsive polish + exact logo proportion rule */
:root{--header-logo-size:58px;--index-logo-size:116px}
.brand img{width:var(--header-logo-size)!important;height:var(--header-logo-size)!important;flex:0 0 var(--header-logo-size)}
.hero img{width:var(--index-logo-size)!important;height:var(--index-logo-size)!important;max-width:calc(var(--header-logo-size) * 2)!important;max-height:calc(var(--header-logo-size) * 2)!important;object-fit:contain!important;justify-self:center!important}
html,body{max-width:100%;overflow-x:hidden}.main,.layout,.topbar,.card,.hero{max-width:100%;box-sizing:border-box}.hero{overflow:hidden}.sidebar{box-sizing:border-box}.topbar{min-width:0}.brand{min-width:0}.brand h1{overflow-wrap:anywhere}.top-actions{min-width:0}input,select,textarea,button{max-width:100%}.card{overflow-wrap:anywhere}.table-wrap,table{max-width:100%}
@media(max-width:900px){:root{--header-logo-size:50px;--index-logo-size:100px}.topbar{position:relative!important}.layout{grid-template-columns:1fr!important}.sidebar{position:static!important;width:100%!important;height:auto!important}.main{padding:12px!important}.hero{grid-template-columns:1fr!important;text-align:center!important;gap:16px!important}.hero img{margin:auto!important}.grid,.stats-grid,.form-grid,.dash-kpis,.dash-grid-main,.quick-grid,.pay-form{grid-template-columns:1fr!important}}
@media(max-width:560px){:root{--header-logo-size:44px;--index-logo-size:88px}.brand{flex-direction:row!important;text-align:left!important}.brand h1{font-size:15px!important}.brand small{font-size:12px!important}.top-actions,.menu-line{justify-content:stretch!important}.btn,.select.compact{width:100%!important}.sidebar{grid-template-columns:1fr!important}table,.clean-table{min-width:640px}.hero h2{font-size:26px!important}}

/* Local/cPanel responsive final fixes */
img, video, canvas, svg { max-width: 100%; height: auto; }
.container, .dashboard, .content, main { max-width: 100%; box-sizing: border-box; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }
.header-logo, .navbar-logo, .brand-logo { max-height: 48px; width: auto; object-fit: contain; }
.index-logo, .hero-logo, .home-logo { max-height: 96px; width: auto; object-fit: contain; }
@media (max-width: 768px) {
  .header-logo, .navbar-logo, .brand-logo { max-height: 38px; }
  .index-logo, .hero-logo, .home-logo { max-height: 76px; }
  .dashboard-grid, .cards, .stats-grid { grid-template-columns: 1fr !important; }
  .sidebar { width: 100%; position: relative; }
  .content, main { padding: 12px !important; margin-left: 0 !important; }
  table { font-size: 14px; }
}


/* FINAL 2026: light/dark full visibility and proportional toggles */
:root{color-scheme:light;--surface:#ffffff;--surface2:#f4f9ff;--textStrong:#061628;--focus:#ffcc00}
[data-theme=dark]{color-scheme:dark;--surface:#071524;--surface2:#0b2238;--textStrong:#f5fbff;--focus:#5dccfe}
body,[data-theme=dark] body{background:var(--bg)!important;color:var(--text)!important}.topbar,.card,.dash-card,.stat,.dash-kpi,.login-card,.login-form-panel{color:var(--text)!important}.top-actions .btn,.top-actions select,.theme-btn,.select.compact{height:42px;min-width:120px;border-radius:999px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.top-actions select{display:block;padding:0 14px;background:var(--card);color:var(--text);border:1px solid var(--border)}
[data-theme=dark] .topbar,[data-theme=dark] .card,[data-theme=dark] .dash-card,[data-theme=dark] .stat,[data-theme=dark] .dash-kpi,[data-theme=dark] .login-card,[data-theme=dark] .login-form-panel{background:#0b2238!important;color:#f5fbff!important;border-color:#244866!important}
[data-theme=dark] a{color:#76d8ff}[data-theme=dark] .btn{color:#fff!important}[data-theme=dark] .btn.ghost{background:#102f4a!important;color:#f5fbff!important;border:1px solid #5dccfe!important}[data-theme=dark] .muted,[data-theme=dark] small,[data-theme=dark] label{color:#c7d8e8!important}
[data-theme=dark] table,[data-theme=dark] td,[data-theme=dark] th{color:#f5fbff!important;border-color:#244866!important}[data-theme=dark] tr{background:#0b2238!important}[data-theme=dark] tr:nth-child(even){background:#092037!important}[data-theme=dark] th{background:#123655!important;color:#ffffff!important}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background:#061628!important;color:#ffffff!important;border-color:#5a7894!important}[data-theme=dark] input:focus,[data-theme=dark] select:focus,[data-theme=dark] textarea:focus{outline:3px solid rgba(93,204,254,.25);border-color:#5dccfe!important}
.material-card.view-only{user-select:none;border:1px dashed var(--skyDeep);border-radius:12px;padding:10px;background:rgba(93,204,254,.08)}.no-download,.view-only{-webkit-user-select:none;user-select:none}.notice{border-left:5px solid var(--skyDeep);background:rgba(93,204,254,.10)}
@media(max-width:760px){.top-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}.top-actions .welcome-pill,.top-actions .btn.red{grid-column:1/-1}.top-actions .btn,.top-actions select{width:100%;min-width:0}.dash-welcome,.card-head{flex-direction:column;align-items:flex-start!important}.clean-table,table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.form-grid{grid-template-columns:1fr!important}.sidebar a{font-size:14px;padding:12px}}


/* FINAL SUPER ADMIN PANEL MENU/TOGGLE FIX */
.topbar{gap:16px!important;min-height:76px!important;height:auto!important;flex-wrap:wrap!important}
.topbar .brand{flex:1 1 360px!important;min-width:260px!important}
.topbar .top-actions.menu-line{flex:0 1 auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;white-space:normal!important}
.topbar .top-actions .btn,.topbar .top-actions select,.topbar .theme-btn,.topbar .select.compact{height:40px!important;min-height:40px!important;max-height:40px!important;padding:0 14px!important;border-radius:999px!important;font-size:14px!important;line-height:1!important;margin:0!important;box-sizing:border-box!important;width:auto!important;min-width:112px!important}
.topbar .welcome-pill{height:40px!important;max-width:230px!important;display:inline-flex!important;align-items:center!important;margin:0!important;font-size:14px!important;background:rgba(255,255,255,.18)!important;color:#fff!important}
.admin .sidebar,.sidebar{overflow-y:auto!important}.sidebar a{min-height:42px!important;display:flex!important;align-items:center!important;line-height:1.2!important}
.layout{align-items:stretch!important}.main.dashboard-pro{min-width:0!important}.dash-kpis,.dash-grid-main,.quick-grid{min-width:0!important}.dash-kpi,.dash-card,.card{min-width:0!important}
@media(max-width:980px){.topbar .brand{flex:1 1 100%!important}.topbar .top-actions.menu-line{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.topbar .top-actions .btn,.topbar .top-actions select,.topbar .theme-btn,.topbar .select.compact{width:100%!important;min-width:0!important}.topbar .welcome-pill{grid-column:1/-1!important;max-width:none!important;width:100%!important}.topbar .btn.red{grid-column:1/-1!important}}
@media(max-width:520px){.topbar .top-actions.menu-line{grid-template-columns:1fr!important}.brand img{width:44px!important;height:44px!important}.brand h1{font-size:14px!important}.brand small{font-size:11px!important}.sidebar{grid-template-columns:1fr!important}.sidebar a{font-size:13px!important}}

/* Final progress and install-ready responsive refinements */
.progress-row{display:grid;gap:6px;margin:8px 0 12px;min-width:160px}.progress-row b{font-size:13px;color:var(--text)}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.dash-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}.topbar .top-actions.menu-line{align-items:center!important}.topbar .top-actions .btn,.topbar .top-actions select,.topbar .theme-btn,.topbar .select.compact{height:40px!important;line-height:40px!important;padding-top:0!important;padding-bottom:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle!important}.topbar .top-actions select{display:inline-block!important}.main img, .card img{max-width:100%;height:auto}@media(max-width:700px){.dash-kpis,.stats-grid,.grid{grid-template-columns:1fr!important}.topbar .top-actions.menu-line{display:grid!important;grid-template-columns:1fr!important}.topbar .top-actions .btn,.topbar .top-actions select,.topbar .theme-btn,.topbar .select.compact{width:100%!important}.layout{display:block!important}.sidebar{display:grid!important;grid-template-columns:1fr!important}}