:root{--brand:#1f5f8b;--bg:#f4f5f7;--card:#fff;--ink:#1d2330;--muted:#6b7280;--line:#e4e7ec;--ok:#1f8a4c;--warn:#b45309;--bad:#c0392b;--radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.5 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:20px;margin:0;font-weight:600}h2{font-size:22px;margin:0 0 12px}h3{font-size:15px;margin:0 0 10px;font-weight:600}
code{background:#f1f3f5;padding:1px 5px;border-radius:4px;font-size:12px}
.small{font-size:12px}.muted{color:var(--muted)}.r{text-align:right}.c{text-align:center}.nowrap{white-space:nowrap}
.pos{color:var(--ok)}.neg{color:var(--bad)}.big{font-size:22px;font-weight:600}
/* shell */
.shell{display:flex;min-height:100vh}
.side{width:228px;flex:none;background:#121826;color:#cbd2dc;padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{color:#fff;font-weight:600;font-size:15px;padding:4px 8px 14px;border-bottom:1px solid #263041;margin-bottom:12px}
.side nav a{display:flex;justify-content:space-between;align-items:center;color:#cbd2dc;padding:5px 10px;border-radius:6px;margin:1px 0}
.side nav a:hover{background:#1e2738;text-decoration:none;color:#fff}
.side nav a.on{background:var(--brand);color:#fff}
.nav-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7d8899;margin:12px 10px 3px}
.side button.nav-h{display:flex;align-items:center;gap:6px;width:calc(100% - 8px);margin:10px 4px 2px;padding:4px 6px;background:none;border:0;border-radius:5px;cursor:pointer;font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7d8899;text-align:left}
.side button.nav-h:hover{color:#cbd2dc;background:#1a2231}
.side button.nav-h span:first-child{flex:1}
.nav-caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 3px 0;transition:transform .15s}
.nav-sec.shut .nav-caret{transform:rotate(-45deg);margin:0 3px 0 0}
.nav-sec.shut .nav-items{display:none}
.nav-sum{display:none}.nav-sec.shut .nav-sum{display:inline-block}
.nav-all{margin:2px 10px 0;font-size:11px;color:#5d6778}.nav-all button{background:none;border:0;padding:0;color:#7d8899;cursor:pointer;font:inherit}.nav-all button:hover{color:#cbd2dc;text-decoration:underline}
.new-btn{display:block;text-align:center;margin:0 4px 10px;background:var(--brand)!important;color:#fff!important;border-color:transparent!important}
.pill{background:#e8590c;color:#fff;border-radius:10px;font-size:11px;padding:0 7px;line-height:18px}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{flex:1}.top .who{color:var(--muted);font-size:13px}
.menu{display:none;background:none;border:0;font-size:20px;cursor:pointer}
.content{padding:20px 24px 60px;max-width:1280px}
/* cards & layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
.card.flush{padding:0;overflow-x:auto}.card .pad,.pad{padding:14px 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:start}
.grid2>.card{margin:0}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.toolbar.filters{justify-content:flex-start}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.row.spread{justify-content:space-between;align-items:flex-start}
.row.inline{gap:6px;align-items:center;margin:4px 0}
.grow{flex:1 1 220px}
form.inline{display:inline}
/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.kpi span{display:block;color:var(--muted);font-size:12px}.kpi b{font-size:20px;font-weight:600}
.kpi.warn b{color:var(--bad)}
/* tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-weight:500;color:var(--muted);font-size:12px;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr:hover td{background:#fafcff}
.tbl tfoot td{font-weight:600;background:#fafbfc}
.tbl tr.dim td{opacity:.55}
.tbl .empty{text-align:center;color:var(--muted);padding:28px}
.tbl.bank td.act{min-width:360px}
.report .tbl tr.section th{background:none;color:var(--ink);font-size:13px;padding-top:16px}
.report .tbl tr.sub td{font-weight:600;border-top:1px solid #cfd4dc}
.report .tbl tr.grand td{font-weight:700;font-size:16px;border-top:2px solid var(--ink)}
/* forms */
.form label,label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-bottom:10px}
label.check{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:13px;margin-bottom:10px}
label.check>input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:0}
label.check.long{align-items:flex-start}label.check.long>input[type=checkbox]{margin-top:2px}
label small{font-size:11px;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #cfd4dc;border-radius:6px;padding:7px 9px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 35%,transparent);border-color:var(--brand)}
input[type=checkbox],input[type=radio]{width:auto;padding:0}
input[type=color]{padding:2px;height:36px;width:60px}
textarea{resize:vertical}
.narrow{width:110px}
.form.compact label{margin-bottom:8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;padding:7px 13px;border-radius:6px;border:1px solid #cfd4dc;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:#f6f7f9;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:#efc2bd}.btn.small{padding:4px 9px;font-size:12px}.btn.wide{width:100%;justify-content:center;padding:10px}
.btn.link,.link{background:none;border:0;color:var(--brand);cursor:pointer;padding:0;font:inherit}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions-card form,.actions-card>.btn{display:block;margin-bottom:8px}.actions-card .btn{width:100%;justify-content:center}
.actions-card input{width:100%;font-size:11px}
/* tabs, badges, flash */
.tabs{display:flex;gap:2px;background:#e9ecf0;border-radius:7px;padding:3px;flex-wrap:wrap}
.tabs a{padding:5px 11px;border-radius:5px;color:var(--ink);font-size:13px}.tabs a.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}.tabs a:hover{text-decoration:none}
.tabs .pill{background:#9aa3af}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#eef0f3;color:#4b5563;font-weight:500;white-space:nowrap}
.b-paid,.b-accepted,.b-matched,.b-recorded,.b-active,.b-issued,.b-applied{background:#e3f4ea;color:#17703c}
.b-sent,.b-viewed,.b-open{background:#e6f0fa;color:#1d5a91}
.b-partial,.b-new{background:#fff4dc;color:#8a5a00}
.b-overdue,.b-declined,.b-unmatched,.b-suspended{background:#fde8e6;color:#a8291c}
.b-draft,.b-void,.b-duplicate,.b-cancelled,.b-ignored,.b-ended,.b-paused,.b-expired,.b-converted{background:#eef0f3;color:#5f6773}
.b-pop{background:#ede7fb;color:#5b3fb0}
.flash{margin:14px 24px 0;padding:10px 14px;border-radius:6px;background:#e9f2fb;border:1px solid #c9def3}
.content .flash,.card .flash,.auth-box .flash{margin:0 0 14px}
.flash.ok{background:#e7f6ec;border-color:#bfe5cc}.flash.err{background:#fdecea;border-color:#f5c6c0}
/* dashboard */
.setup .steps{margin:0;padding-left:20px}.setup li{margin:4px 0}.setup li.done{color:var(--muted);text-decoration:line-through}
.todo ul{margin:0;padding-left:18px}.todo li{margin:4px 0}
.bars{display:flex;gap:14px;align-items:flex-end;height:180px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;gap:6px}
.bar-col span{font-size:11px;color:var(--muted)}
.bar-pair{flex:1;display:flex;gap:3px;align-items:flex-end;width:100%;justify-content:center}
.bar{width:40%;max-width:22px;border-radius:3px 3px 0 0;min-height:2px}
.bar.inv,.sw.inv{background:var(--brand)}.bar.rec,.sw.rec{background:#54b37d}
.legend{font-size:12px;color:var(--muted);margin-top:8px}.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px}
/* documents */
.items td{padding:6px}.items input,.items select,.items textarea{width:100%}
.items .c-item{width:160px}.items .c-desc{min-width:240px;width:36%}.items .c-qty{width:70px}.items .c-price{width:110px}.items .c-disc{width:70px}.items .c-vat{width:40px}.items .c-cat{width:150px}.items .c-amt{width:120px}
.items td.amt{padding-top:13px;white-space:nowrap}
.rm{font-size:18px;color:var(--muted)}
.totals{margin:10px 18px 14px auto;max-width:320px}
.totals div{display:flex;justify-content:space-between;padding:4px 0}.totals .grand{border-top:1px solid var(--line);font-weight:600;font-size:15px;padding-top:7px}
.paper .paper-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}
.paper-title{font-size:20px;font-weight:700;color:var(--brand);letter-spacing:.03em}
.logo-prev{max-height:60px;max-width:200px}.auth-logo{max-height:80px;max-width:240px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#f1f3f5;border-radius:14px;padding:3px 4px 3px 10px;margin:0 6px 6px 0;font-size:12px}
.chip button{border:0;background:#dde1e6;border-radius:50%;width:18px;height:18px;line-height:16px;cursor:pointer}
.contact{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.contact form{display:inline}
.pager{display:flex;gap:4px;flex-wrap:wrap}.pager a{padding:4px 10px;border:1px solid var(--line);border-radius:5px;background:#fff}.pager a.on{background:var(--brand);color:#fff}
/* bank */
.bulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px}
.bulk label{margin:0}
tr.matched td,tr.categorised td{background:#fcfdfc}
.suggest{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.score{font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px}.score.shi{background:#e3f4ea;color:#17703c}.score.smid{background:#fff4dc;color:#8a5a00}.score.slo{background:#eef0f3;color:#5f6773}
.txn-actions summary{cursor:pointer;color:var(--brand)}
.txn-actions select{max-width:190px}.txn-actions .client-pick{width:220px}
pre.raw{white-space:pre-wrap;word-break:break-word;background:#f7f8fa;border:1px solid var(--line);border-radius:6px;padding:12px;font-size:12px;max-height:600px;overflow:auto}
/* public / auth */
body.bare{background:var(--bg)}
.auth-box{max-width:420px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px}
.auth-box label{color:var(--muted)}.auth-box input{width:100%}
.public-wrap{max-width:900px;margin:24px auto;padding:0 16px}
.public-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pay-box{background:#f7fafd;border:1px solid #d6e4f2;border-radius:8px;padding:14px;margin-top:16px}
.quote-actions{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
@media (max-width:900px){
  .side{position:fixed;left:-240px;z-index:20;transition:left .2s}.side.open{left:0}
  .menu{display:block}.content{padding:14px}.doc-layout{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}
  .top .who{display:none}.tbl.bank td.act{min-width:240px}
}
@media print{.side,.top,.toolbar,.btns{display:none}.content{padding:0}}
.tbl th.r{text-align:right}.tbl th.c{text-align:center}
.link.small{font-size:12px;margin-left:6px}
.progress{height:8px;background:#eef0f3;border-radius:4px;overflow:hidden}.progress div{height:100%;background:var(--brand);transition:width .3s}
[hidden]{display:none!important}
.sig-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.sig-preview{border:1px solid var(--line);border-radius:6px;padding:4px 16px 16px;background:#fff;font-family:Segoe UI,Arial,sans-serif}
.recipients input[type=radio]{width:16px;height:16px}
.approve-form input{margin-bottom:6px}
@media (max-width:900px){.sig-grid{grid-template-columns:1fr}}
.color-pick{display:flex;gap:6px;align-items:center}.color-pick input[type=color]{width:44px;height:36px;padding:2px}
#brandHex{font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}
.brand-swatch{display:flex;gap:6px;align-self:center}.brand-swatch span{color:#fff;font-size:11px;padding:6px 10px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.side nav a.on,.new-btn{background:var(--brand2,var(--brand))!important}
.pay-box{border-color:var(--brand2,#d6e4f2)!important;border-left-width:3px!important}
.paper-title{color:var(--brand)}
.side nav a.on,.new-btn{color:var(--on-brand2,#fff)!important}
.btn.primary,.pager a.on{color:var(--on-brand,#fff)}
.inline-pair{display:flex;gap:6px;align-items:center}
.send-to{border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
.send-to-h{font-size:13px;font-weight:600;margin-bottom:6px}
.send-to-list{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{border:1px solid var(--line);border-radius:18px;padding:5px 12px;margin:0;background:#fafbfc;cursor:pointer}
.chip-check:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff)}
.send-to-note{margin-top:6px}
.txn-actions select[name=payment_id]{max-width:340px}
.qr-wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:10px 0 18px}
#qr{width:200px;height:200px;background:#fff;padding:4px;border:1px solid var(--line);border-radius:6px}#qr svg{width:100%;height:100%}
code.secret{font-size:16px;letter-spacing:1px;display:inline-block;padding:8px 10px}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:10px 0}.codes code{font-size:14px;padding:6px 8px;text-align:center}
.codes-card{border-color:#f0c36d;background:#fffbf0}
@media print{.codes-card{border:0}.grid2,.top,.side{display:none}}
.eye{font-size:13px;opacity:.75;cursor:help}
.recon-check{border-top:1px solid var(--line);background:#fafbfc}.recon-check.ok b{color:#17703c}.recon-check.bad{background:#fff6f5}.recon-check .row.spread{margin:2px 0}
.warnc{color:#8a5a00;font-weight:600}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px}
.recon-kpis .kpi input{font-size:18px;font-weight:600;width:100%;margin-top:2px}.kpi.good b{color:#17703c}
tr.jl td{background:#fbfaf5}
.addons{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.addons .card{margin:0}.addon.on{border-color:var(--brand2,var(--brand))}
.sms-ev{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
pre.log{background:#f6f7f9;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px;max-height:280px;overflow:auto;white-space:pre-wrap;margin:8px 0 0}
.kpi small{display:block;font-size:12px;margin-top:2px}
/* statement import (bank2ofx) */
.b2o-drop{text-align:center;cursor:pointer;border:2px dashed var(--line);padding:26px 16px}.b2o-drop.over,.b2o-drop:hover{border-color:var(--brand2,var(--brand))}.b2o-drop.has-file{padding:14px}
.b2o-icon{font-size:28px}.b2o-title{margin:6px 0}
.b2o-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;margin-top:10px}
.b2o-facts{display:flex;flex-wrap:wrap;gap:6px 28px;margin:10px 0}.b2o-facts dt{font-size:12px;color:var(--muted)}.b2o-facts dd{margin:0;font-weight:600}
.b2o-stats{margin-bottom:8px}.b2o-stats .kpi b{font-size:16px}
.b2o-recon{padding:8px 12px;border-radius:6px;font-size:13px}.b2o-recon.ok{background:#e3f4ea;color:#17703c}.b2o-recon.bad{background:#fde8e6;color:#a8291c}.b2o-recon.na{background:#f3f4f6;color:var(--muted)}
.b2o-table{max-height:520px;overflow:auto;border-top:1px solid var(--line)}
.b2o-tx input{border:1px solid transparent;background:transparent;padding:3px 5px;width:100%;font:inherit}.b2o-tx input:hover,.b2o-tx input:focus{border-color:var(--line);background:#fff}
.b2o-tx td:first-child{width:150px}.b2o-tx td:nth-child(3){width:130px}.b2o-amt{text-align:right}.b2o-amt.neg{color:var(--bad,#a8291c)}.b2o-amt.pos{color:#17703c}
tr.b2o-bad td{background:#fff6f5}
.b2o-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}.b2o-dot.ok{background:#2f9e5b}.b2o-dot.bad{background:#d23f31}.b2o-dot.none{background:#c9ced6}
.bm-preview{width:100%;height:78vh;min-height:520px;border:1px solid var(--line);border-radius:6px;background:#f7f8fa}
.bm-img{max-width:100%;border:1px solid var(--line);border-radius:6px}
.bm-why{font-size:12px;color:#5f6773;margin:2px 0 8px}
.bm-new[hidden]{display:none}
.items input.client{display:block;width:100%;margin-top:4px;font-size:12px;padding:4px 6px}

.ctabs{display:flex;gap:4px;border-bottom:2px solid #e4e7ec;margin:4px 0 16px;overflow-x:auto}
.ctabs a{padding:9px 14px;color:var(--muted,#6b7280);font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.ctabs a:hover{color:var(--ink);text-decoration:none}
.ctabs a.on{color:var(--brand,#1f5f8b);border-bottom-color:var(--brand,#1f5f8b)}
.ctabs .n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#eef1f5;color:#4b5563;font-size:11px;font-weight:600;text-align:center;margin-left:3px}
.staff-banner{background:#fff4d6;border-bottom:1px solid #f0d58c;color:#5c4400;padding:9px 16px;font-size:13px;text-align:center}
.staff-banner a{font-weight:600;margin-left:6px}
.tpl-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-bottom:20px}
.tpl-edit>.card{margin:0}
.tpl-frame{width:100%;height:960px;border:1px solid var(--line);border-radius:6px;background:#fff}
h4.sub{margin:16px 0 6px;font-size:13px;color:var(--muted,#667)}
.row.wrap{flex-wrap:wrap}
.tpl-var{text-decoration:none}
@media (max-width:1100px){.tpl-edit{grid-template-columns:1fr}}
/* Nexus Hosting Suite service / domain pages (WHMCS-style) */
.hx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px}
.hx-top form.jump{display:flex;gap:6px;flex:1;min-width:260px;max-width:640px}.hx-top form.jump select{flex:1}
.hx-top .btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hx-more{position:relative}.hx-more>summary{list-style:none;cursor:pointer}.hx-more>summary::-webkit-details-marker{display:none}
.hx-more>div{position:absolute;right:0;top:110%;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.08);min-width:200px;z-index:20;padding:4px 0}
.hx-more>div a{display:block;padding:7px 14px;color:var(--ink);font-size:13px}.hx-more>div a:hover{background:var(--bg);text-decoration:none}
.hx-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;align-items:center;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 12%,#fff),#fff 40%);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:12px}
.hx-sum .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.hx-sum .v{font-size:18px;color:var(--ok);font-weight:500;white-space:nowrap}.hx-sum .v.ink{color:var(--ink);font-size:15px;font-weight:600;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.hx-usage{border:1px dashed color-mix(in srgb,var(--brand) 55%,#fff);border-radius:var(--radius);padding:10px 14px;margin-bottom:12px;text-align:center;font-size:12px}
.hx-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;max-width:420px;margin:6px auto 4px}.hx-bar span{display:block;height:100%;background:var(--brand)}
.hx-grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hx-grid>tbody>tr>th{width:16%;text-align:left;font-size:12.5px;font-weight:600;background:color-mix(in srgb,var(--brand) 5%,#fff);padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.hx-grid>tbody>tr>td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:middle;width:34%}
.hx-grid input:not([type=checkbox]):not([type=radio]),.hx-grid select{max-width:320px;width:100%;padding:6px 8px;font-size:13px}
.hx-grid textarea{width:100%;min-height:80px}
.hx-grid .inl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.hx-grid .inl input{width:auto}
.hx-cmds{display:flex;gap:6px;flex-wrap:wrap}.hx-cmds .btn{font-size:12px;padding:5px 10px}
.hx-sub{font-size:12px;border-collapse:collapse}.hx-sub th,.hx-sub td{border:1px solid var(--line);padding:4px 8px;text-align:left}.hx-sub th{background:color-mix(in srgb,var(--brand) 5%,#fff);font-size:11px;text-transform:uppercase}
.hx-save{display:flex;justify-content:center;gap:8px;margin:14px 0 20px}
.hx-toggle{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:12.5px}
@media (max-width:900px){.hx-grid>tbody>tr>th,.hx-grid>tbody>tr>td{display:block;width:auto}}
.hx-grid label.hx-toggle{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0 16px 0 0;font-weight:400}
.hx-grid label.hx-toggle input{width:auto;margin:0}
.hx-grid .inl input,.hx-grid .inl select{width:auto;flex:0 1 auto}
.hx-cmds{align-items:center}.hx-cmds>span.inl{display:inline-flex;gap:6px;align-items:center}
.hx-grid td .inl{display:flex}
.pay-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.pay-btns .btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px;min-width:170px;text-align:left;background:#fff}
.pay-btns .btn b{font-size:15px}.pay-btns .btn span{font-size:12px;color:#6b7280;font-weight:400}
.pay-btns .btn.pay-main{border:2px solid #0070ba;box-shadow:0 0 0 3px rgba(0,112,186,.12)}.pay-btns .btn.pay-main b{color:#003087}
.pay-btns .btn:hover{border-color:var(--brand,#1f5f8b)}
.pay-btns .btn{max-width:100%;box-sizing:border-box}.pay-btns .btn span{white-space:normal}
.pay-btns .btn.pay-recurring{border:2px solid var(--brand,#1f5f8b);background:color-mix(in srgb,var(--brand,#1f5f8b) 6%,#fff)}.pay-btns .btn.pay-recurring b::before{content:"↻ ";color:var(--brand,#1f5f8b)}
.pay-logo{height:28px;max-width:150px;object-fit:contain;object-position:left center}
.pay-btns .btn.has-logo{gap:6px}
.tbl .pay-logo{height:24px}

/* on/off switch */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;margin:0;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:relative;width:38px;height:22px;border-radius:11px;background:#c5cad3;transition:background .15s;flex:none}
.switch .slider:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+.slider{background:#2e9d5b}.switch input:checked+.slider:after{transform:translateX(16px)}
.switch input:focus-visible+.slider{outline:2px solid #1d5a91;outline-offset:2px}
.content.wide{max-width:1720px}.content.wide.full{max-width:none}
/* sign-in pages (WHMCS admin style): grey page, logo above a white panel, fields with icons, remember me + Login on one row */
body.bare{background:#eef1f5}
.auth-logo-top{text-align:center;margin:56px auto 18px}.auth-logo-top img{max-height:70px;max-width:260px}.auth-logo-top .auth-name{font-size:22px;font-weight:600;color:var(--ink)}
.auth-box{max-width:400px;margin:0 auto 18px;background:#fff;border:1px solid #dde2ea;border-top:4px solid var(--brand);border-radius:6px;padding:26px 28px 22px;box-shadow:0 2px 14px rgba(20,30,50,.07)}
body.bare > .auth-box:first-child,.flash + .auth-box{margin-top:56px}
.auth-box h2{font-size:18px;margin:0 0 4px}.auth-box .auth-sub{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.auth-field{position:relative;margin-bottom:12px}.auth-field svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8a94a6;pointer-events:none}
.auth-field input{width:100%;padding:10px 12px 10px 36px;font-size:14px;border:1px solid #cfd5df;border-radius:4px;background:#fff}.auth-field input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.auth-row label.check{flex-direction:row;align-items:center;gap:6px;margin:0;color:var(--ink);font-size:13px;cursor:pointer}
.auth-row .btn.primary{padding:9px 24px;font-size:14px;border-radius:4px}
.auth-links{display:flex;justify-content:space-between;font-size:12.5px;margin-top:16px;padding-top:12px;border-top:1px solid #eef0f4}
.auth-foot{text-align:center;font-size:11.5px;color:#8a94a6;margin:0 auto 40px;max-width:400px}
/* sign-in page: coloured panel + form (Settings › Sign-in page) */
body.bare:has(.lp-wrap){background:linear-gradient(135deg,#dff1fb 0%,#eef1f8 45%,#e4e8f5 100%);min-height:100vh}
body.bare:has(.lp-wrap) > .flash{display:none}
.lp-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.lp-card{display:grid;grid-template-columns:1fr 1fr;width:min(1080px,100%);min-height:560px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(20,40,90,.16)}
.lp-side{position:relative;color:#fff;padding:64px 48px;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--lp2) 35%,transparent) 0%,transparent 55%),linear-gradient(160deg,var(--lp1) 0%,color-mix(in srgb,var(--lp1) 55%,var(--lp2)) 55%,var(--lp2) 100%)}
.lp-logo{margin-bottom:42px}.lp-logo img{max-height:110px;max-width:320px;display:block}.lp-tile{display:inline-block;background:#fff;border-radius:12px;padding:12px 16px}.lp-tile img{max-height:70px}
.lp-name{font-size:30px;font-weight:800;letter-spacing:.3px;color:var(--lpa)}
.lp-head{font-size:30px;line-height:1.25;font-weight:700;margin:0 0 30px;max-width:420px;color:#fff}
.lp-points{list-style:none;padding:0;margin:0;display:grid;gap:16px}.lp-points li{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.92)}
.lp-ic{flex:none;width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--lpa)}.lp-ic svg{width:19px;height:19px}
.lp-main{display:flex;align-items:center;justify-content:center;padding:48px 40px}
.lp-form{width:100%;max-width:390px}
.lp-title{text-align:center;font-size:28px;font-weight:600;margin:0;color:#111827}.lp-sub{text-align:center;color:#4b5563;margin:6px 0 30px;font-size:15px}
.lp-label{display:block;font-size:14px;font-weight:600;color:#111827;margin-bottom:18px}
.lp-input{position:relative;display:block;margin-top:7px}.lp-input input{width:100%;padding:14px 44px 14px 14px;font-size:15px;border:1px solid #cbd2dc;border-radius:10px;background:#fff;color:#111827}
.lp-input input:focus{outline:0;border-color:var(--lpb);box-shadow:0 0 0 3px color-mix(in srgb,var(--lpb) 15%,transparent)}
.lp-input svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#6b7280;pointer-events:none}
.lp-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px;font-size:14px}.lp-row a{font-weight:600;color:var(--lpb)}
.lp-check{display:flex;flex-direction:row;align-items:center;gap:7px;margin:0;color:#374151;font-weight:600;font-size:14px;cursor:pointer}
.lp-btn{display:block;width:100%;margin-top:16px;padding:15px;border:0;border-radius:10px;background:var(--lpb);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}.lp-btn:hover{filter:brightness(1.12)}
.lp-alt{text-align:center;font-size:13px;color:#6b7280;margin-top:18px}
.lp-form .flash{margin:0 0 16px}
.lp-foot{color:#6b7280;font-size:13px;margin:22px 0 0;text-align:center}
@media(max-width:820px){.lp-card{grid-template-columns:1fr;min-height:0;border-radius:16px}.lp-side{padding:28px 26px}.lp-logo{margin-bottom:16px}.lp-head{font-size:20px;margin:0}.lp-points{display:none}.lp-main{padding:30px 22px}}
.lp-foot a{color:inherit;text-decoration:none}.lp-foot a:hover{text-decoration:underline}
.cpick{position:relative}.cpick .cp-list{position:absolute;z-index:40;left:0;right:0;top:100%;margin-top:2px;background:#fff;border:1px solid #d6dbe1;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:320px;overflow-y:auto}
.cpick .cp-item{padding:8px 12px;cursor:pointer;font-size:14px;line-height:1.35;border-bottom:1px solid #f1f3f6}.cpick .cp-item.on,.cpick .cp-item:hover{background:#f3f6fb}.cpick .cp-none{padding:10px 12px;font-size:13px;color:#6b7280}

/* SSL padlocks */
.ssl-lock{display:inline-flex;vertical-align:-2px;margin:0 4px 0 2px;cursor:help}.ssl-lock svg{width:15px;height:15px}
.ssl-lock.ok{color:#1e8e3e}.ssl-lock.bad{color:#d93025}.ssl-lock.unk{color:#9aa0a6}
.hx-sum .ssl-note{font-size:11px;color:var(--muted)}
.hx-move:not([open]){display:none}.hx-move{border-left:3px solid var(--brand)}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));border-top:1px solid var(--line)}.auto-grid>div{padding:14px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}.auto-grid b{font-size:22px;font-weight:600}.auto-grid span{font-size:13px;color:var(--muted)}
.host-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}.host-strip a{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:var(--radius);text-decoration:none;color:var(--ink);border:1px solid var(--line)}.host-strip a b{display:block;font-size:22px}.host-strip a span{font-size:13.5px}.host-strip svg{width:34px;height:34px;opacity:.8}

/* side menu: logo, icons, collapse to an icon rail (remembered in this browser) */
.side .brand{display:flex;align-items:center;gap:8px;padding:2px 4px 12px}
.brand-id{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:#fff!important;text-decoration:none!important}
.brand-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:6px 10px;flex:1;min-width:0;height:52px}
.brand-logo img{max-width:100%;max-height:40px;object-fit:contain;display:block}
.brand-mark{flex:none;width:32px;height:32px;border-radius:8px;background:var(--brand2,var(--brand));color:var(--on-brand2,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-toggle{flex:none;background:none;border:0;color:#7d8899;cursor:pointer;padding:5px;border-radius:6px;display:flex}
.nav-toggle:hover{background:#1e2738;color:#fff}
.side nav a{justify-content:flex-start;gap:10px}
.side nav a .ico{flex:none;opacity:.8}
.side nav a.on .ico,.side nav a:hover .ico{opacity:1}
.side nav a .lbl{flex:1;min-width:0}
.side,.main{transition:width .15s}
@media (min-width:901px){
  .nav-mini .side{width:64px;padding:14px 8px;overflow-x:hidden}
  .nav-mini .side .brand{flex-direction:column;padding:2px 0 10px}
  .nav-mini .brand-name,.nav-mini .side nav a .lbl,.nav-mini .side .nav-h,.nav-mini .nav-all,.nav-mini .new-btn .lbl{display:none}
  .nav-mini .brand-logo{width:44px;height:44px;flex:none;padding:4px}
  .nav-mini .brand-logo img{max-height:36px}
  .nav-mini .nav-toggle svg{transform:rotate(180deg)}
  .nav-mini .new-btn{display:flex!important;justify-content:center;align-items:center;width:auto;margin:0 2px 8px;padding:7px 0;font-size:18px;line-height:1}
  .nav-mini .nav-sec.shut .nav-items{display:block}
  .nav-mini .nav-sec{border-top:1px solid #263041;margin-top:6px;padding-top:6px}
  .nav-mini .side nav a{justify-content:center;padding:8px 0;position:relative}
  .nav-mini .side nav a .ico{opacity:1}
  .nav-mini .side nav a .pill{position:absolute;top:1px;right:2px;font-size:9px;padding:0 4px;min-width:0}
}
.paynow-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand2,var(--brand));border-radius:10px;padding:10px 14px;margin:0 0 12px;color:inherit;text-decoration:none!important}
.paynow-bar:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
@media print{.paynow-bar{display:none}}

.soon-day{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 18px;border-top:1px solid var(--line)}.soon-date{display:flex;flex-direction:column}.soon-groups details{padding:2px 0}.soon-groups summary{cursor:pointer}.soon-groups ul{margin:6px 0 8px 18px;padding:0;font-size:13px}.soon-groups li{margin:2px 0}
@media (max-width:640px){.soon-day{grid-template-columns:1fr;gap:4px}}