/* ONEXTEAM Portal — built on the ONEXTEAM website template's tokens
   (warm orange accent, Manrope headings, Inter body, white cards, pill buttons). */
:root{
  --bg:#f6f7f9;--w:#fff;--ink:#111315;--mut:#6b727a;--ac:#FF7A1A;--ac2:#ff4d00;--acs:rgba(255,122,26,.12);
  --bd:#e4e7ea;--soft:#eef0f3;--logo:#fff;
  --ok:#14915a;--oks:rgba(20,145,90,.12);--warn:#b7791f;--warns:rgba(183,121,31,.14);
  --bad:#d63b2f;--bads:rgba(214,59,47,.11);--info:#2b6cb0;--infos:rgba(43,108,176,.12);
  --sh:0 8px 32px rgba(17,19,21,.06);--shl:0 30px 80px rgba(17,19,21,.22);
  --fd:Manrope,system-ui,sans-serif;--fb:Inter,system-ui,sans-serif;--fm:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1113;--w:#171a1e;--ink:#eef0f2;--mut:#9aa1a9;--acs:rgba(255,122,26,.17);--bd:#2a2f35;--soft:#1f2329;
  --ok:#3ccf8e;--oks:rgba(60,207,142,.14);--warn:#e8b04f;--warns:rgba(232,176,79,.15);--bad:#ff6b5f;--bads:rgba(255,107,95,.14);--info:#6aa7ec;--infos:rgba(106,167,236,.15);
  --sh:0 8px 32px rgba(0,0,0,.35);--shl:0 30px 80px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1113;--w:#171a1e;--ink:#eef0f2;--mut:#9aa1a9;--acs:rgba(255,122,26,.17);--bd:#2a2f35;--soft:#1f2329;
  --ok:#3ccf8e;--oks:rgba(60,207,142,.14);--warn:#e8b04f;--warns:rgba(232,176,79,.15);--bad:#ff6b5f;--bads:rgba(255,107,95,.14);--info:#6aa7ec;--infos:rgba(106,167,236,.15);
  --sh:0 8px 32px rgba(0,0,0,.35);--shl:0 30px 80px rgba(0,0,0,.6);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.55 var(--fb);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--fd);margin:0;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
p{margin:0}a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:8px}
.mut{color:var(--mut)}.small{font-size:12.5px}.center{text-align:center}.mt{margin-top:18px}.r{text-align:right}
.mono,code{font-family:var(--fm);font-size:12.5px}.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.lnk{color:var(--ac);font-weight:600}.lnk:hover{text-decoration:underline}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;font:600 13.5px var(--fd);border:1px solid var(--bd);background:var(--w);color:var(--ink);cursor:pointer;transition:background .2s,box-shadow .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{box-shadow:0 6px 20px rgba(17,19,21,.08);border-color:color-mix(in srgb,var(--bd),var(--ink) 15%)}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.pri:hover{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 10px 28px rgba(255,122,26,.35)}
.btn.sm{padding:6px 12px;font-size:12.5px}.btn.sm .ic{width:15px;height:15px}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--soft);box-shadow:none}
.btn.danger{color:var(--bad)}.btn.danger:hover{border-color:var(--bad)}
.btn.danger.solid{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.iconbtn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--bd);background:var(--w);cursor:pointer}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 2px var(--w)}

/* forms */
label{display:grid;gap:6px;font-size:12.5px;font-weight:600;color:var(--mut)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--w);font-size:14px;font-weight:400;color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
input:disabled{background:var(--soft);color:var(--mut)}
textarea{resize:vertical}
label.check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);font-weight:500;cursor:pointer}
label.check input{width:18px;height:18px;accent-color:var(--ac);flex:none}
fieldset{border:1px solid var(--bd);border-radius:16px;padding:16px;margin:0;display:grid;gap:12px}
legend{font:700 14px var(--fd);padding:0 6px;color:var(--ink)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ferr{color:var(--bad);font-weight:500;font-size:12.5px}
.form{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ft{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.note{font-size:12.5px;color:var(--mut);background:var(--soft);border-radius:12px;padding:10px 12px}

/* flash + secret */
.flash{padding:12px 16px;border-radius:14px;margin-bottom:14px;font-weight:500;border:1px solid transparent;transition:opacity .5s}
.flash.fade{opacity:0}
.f-success{background:var(--oks);color:var(--ok)}.f-error{background:var(--bads);color:var(--bad)}.f-info{background:var(--infos);color:var(--info)}
.secret{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;align-items:center;background:var(--w);border:1px dashed var(--ac);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.secret b{font-family:var(--fd)}.secret p{color:var(--mut);font-size:13px}
.secret dl{display:grid;grid-template-columns:auto auto;gap:4px 14px;margin:0}
.secret dt{color:var(--mut);font-size:12px}.secret dd{margin:0}
[data-copy]{cursor:pointer;background:var(--soft);padding:3px 8px;border-radius:8px}
[data-copy].copied{background:var(--oks);color:var(--ok)}

/* auth */
.authwrap{min-height:100%;display:grid;place-items:center;align-content:center;gap:16px;padding-block:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:radial-gradient(700px 420px at 85% -10%,var(--acs),transparent 70%),var(--bg)}
.authbox{width:100%;max-width:430px;background:var(--w);border:1px solid var(--bd);border-radius:26px;padding:30px;box-shadow:var(--sh);display:grid;gap:18px}
.authbox.wide{max-width:560px}
.authbox h1{font-size:24px;margin-top:8px}.authbox .mut{margin-top:4px}
.authwrap>.flash{width:100%;max-width:430px;margin:0}
.authfoot{color:var(--mut);font-size:12px}
.logo{display:inline-flex;align-items:center;background:var(--logo);border-radius:10px;padding:6px 10px;justify-self:start;border:1px solid var(--bd)}
.logo img{height:22px;width:auto;display:block}
.kick{display:inline-flex;align-items:center;gap:8px;font:700 11px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--ac)}
.kick i{width:7px;height:7px;border-radius:50%;background:var(--ac)}
.seg-radio{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--soft);padding:4px;border-radius:999px}
.seg-radio label{display:block;cursor:pointer}
.seg-radio input{position:absolute;opacity:0;width:1px;height:1px}
.seg-radio span{display:block;text-align:center;padding:8px;border-radius:999px;font:600 13px var(--fd);color:var(--mut)}
.seg-radio input:checked+span{background:var(--w);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.seg-radio input:focus-visible+span{outline:2px solid var(--ac)}

/* shell */
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100%}
.side{background:var(--w);border-right:1px solid var(--bd);padding:20px 14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:0 6px}
.who{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--soft)}
.who b{display:block;font:700 13px var(--fd)}.who small{color:var(--mut);font-size:11.5px;display:block}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;display:grid;place-items:center;font:700 13px var(--fd);flex:none}
.av.sm{width:36px;height:36px}
nav{display:grid;gap:2px}
.navlbl{font:700 10.5px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:12px 12px 4px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;font:600 13.5px var(--fd);color:var(--mut);transition:background .15s,color .15s}
nav a:hover{background:var(--soft);color:var(--ink)}
nav a.on{background:var(--acs);color:var(--ink)}
nav a.on .ic{color:var(--ac)}
nav .ct{margin-left:auto;background:var(--ac);color:#fff;border-radius:999px;font:700 11px var(--fd);padding:1px 7px;font-style:normal}
.sidefoot{margin-top:auto;display:flex;gap:4px;flex-wrap:wrap;border-top:1px solid var(--bd);padding-top:12px}
.sidefoot form{display:contents}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:10px;padding:12px max(28px,env(safe-area-inset-right,0px)) 12px max(28px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.crumb{font:700 14px var(--fd);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{padding-block:26px 64px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));width:100%;max-width:1320px}
.only-m{display:none}
.scrim{display:none}

/* page parts */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.top h1{font-size:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top p{color:var(--mut);margin-top:4px}
.back{display:inline-block;color:var(--mut);font-size:13px;font-weight:600;margin-bottom:6px}.back:hover{color:var(--ink)}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acts form{display:contents}
.grid{display:grid;gap:14px}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);margin-top:14px}
.card{background:var(--w);border:1px solid var(--bd);border-radius:20px;padding:20px;min-width:0}
.card.flush{padding:6px 20px}
.card h3{font-size:15px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.stat{display:block;transition:transform .2s,box-shadow .2s}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.stat small{display:block;color:var(--mut);font-size:12px;font-weight:600}
.stat b{display:block;font:800 28px var(--fd);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--mut)}
.stat.hl{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.stat.hl small,.stat.hl span{color:inherit;opacity:.7}
.okc{color:var(--ok)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.toolbar select{width:auto;min-width:160px}
.search{position:relative;flex:1 1 240px;max-width:380px}
.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mut);width:16px;height:16px}
.search input{padding-left:36px}
.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg a{padding:6px 14px;border-radius:999px;font:600 12.5px var(--fd);color:var(--mut)}
.seg a.on{background:var(--w);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* tables */
.tw{overflow-x:auto;margin:0 -20px;padding:0 20px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font:700 11px var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:12px 10px;border-bottom:1px solid var(--bd);white-space:nowrap}
th.r{text-align:right}
td{padding:12px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.rowlink{cursor:pointer;transition:background .15s}
tr.rowlink:hover td{background:var(--soft)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:600 11.5px var(--fd);white-space:nowrap;letter-spacing:0}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--oks);color:var(--ok)}.p-warn{background:var(--warns);color:var(--warn)}.p-bad{background:var(--bads);color:var(--bad)}.p-info{background:var(--infos);color:var(--info)}.p-mut{background:var(--soft);color:var(--mut)}
.empty{padding:36px 20px;text-align:center;color:var(--mut);display:grid;gap:6px;justify-items:center}
.empty b{color:var(--ink);font-family:var(--fd)}
.empty.big{padding:56px 24px;gap:12px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pager div{display:flex;gap:8px;align-items:center}

/* detail bits */
.dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:10px 18px;margin:0}
.dl dt{color:var(--mut);font-size:12.5px;font-weight:600}.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dl.tight{gap:4px 14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{background:var(--acs);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600}
.feed{list-style:none;margin:0;padding:0;display:grid}
.feed li{padding:10px 0 10px 16px;border-bottom:1px solid var(--bd);position:relative;display:grid;gap:2px}
.feed li:last-child{border-bottom:0}
.feed li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;background:var(--bd)}
.feed li.unread::before{background:var(--ac)}
.feed b{font-weight:600;font-size:13px}.feed small{color:var(--mut);font-size:12px}
.danger-zone{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-color:color-mix(in srgb,var(--bad),var(--bd) 70%)}
.danger-zone b{font-family:var(--fd)}
.reqs{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.req{display:grid;gap:12px;align-content:start}
.req-hd{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.req h3{margin:0}
.quote{background:var(--soft);border-radius:12px;padding:10px 12px;color:var(--mut);font-size:13px}
.nlist{list-style:none;margin:0;padding:0}
.nlist li{border-bottom:1px solid var(--bd)}.nlist li:last-child{border-bottom:0}
.nlist form{display:block}
.nlist button{all:unset;box-sizing:border-box;display:grid;gap:2px;width:100%;padding:14px 4px 14px 18px;cursor:pointer;position:relative}
.nlist button::before{content:"";position:absolute;left:2px;top:21px;width:7px;height:7px;border-radius:50%;background:var(--bd)}
.nlist li.unread button::before{background:var(--ac)}
.nlist b{font-family:var(--fd);font-size:13.5px}.nlist span{color:var(--mut);font-size:13px}.nlist small{color:var(--mut);font-size:12px}
.nlist button:hover b{color:var(--ac)}

/* dialog */
.ov{position:fixed;inset:0;background:rgba(10,12,14,.5);display:grid;place-items:center;padding:16px;z-index:60;backdrop-filter:blur(3px);animation:fi .15s ease}
.md{width:100%;max-width:440px;background:var(--w);border-radius:22px;border:1px solid var(--bd);padding:22px;display:grid;gap:14px;box-shadow:var(--shl);animation:pop .18s ease}
.md h2{font-size:18px}.md p{color:var(--mut)}
@keyframes fi{from{opacity:0}}@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}

/* responsive */
@media (max-width:1180px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:280px;max-width:86vw;z-index:40;transform:translateX(-102%);transition:transform .25s ease;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left,0px));box-shadow:var(--shl)}
  .side-open .side{transform:none}
  .side-open .scrim{display:block;position:fixed;inset:0;background:rgba(10,12,14,.45);z-index:35}
  .only-m{display:grid}
  .topbar{top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .content{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 56px}
  .tw{margin:0 -16px;padding:0 16px}
  .card{padding:16px}.card.flush{padding:4px 16px}
}
@media (max-width:600px){.row2{grid-template-columns:1fr}.top h1{font-size:22px}.stat b{font-size:23px}.authbox{padding:22px}.dl{grid-template-columns:1fr}.dl dt{margin-top:6px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--bg)}
.card h3 .btn.ghost{color:var(--ac);background:var(--acs)}.card h3 .btn.ghost:hover{background:var(--ac);color:#fff}

/* dashboard (step 2) */
.kgroup{margin-bottom:18px}
.klabel{font:700 11px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 10px 2px}
.stats.k6{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.stat.attn{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.stat em{font-style:normal;font-weight:700}.stat em.up{color:var(--ok)}.stat em.down{color:var(--bad)}
.stat.hl em.up,.stat.hl em.down{color:inherit}
.cols.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--bd);stroke-width:1}
.chart .axis{fill:var(--mut);font:500 11px var(--fb)}
.chart .line{fill:none;stroke:var(--ac);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .g0{stop-color:var(--ac);stop-opacity:.28}.chart .g1{stop-color:var(--ac);stop-opacity:0}
.chart .end{fill:var(--w);stroke:var(--ac);stroke-width:2.5}
.chart .hit rect{fill:transparent}.chart .hit:hover rect{fill:var(--acs)}
.alerts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alerts a,.alerts div{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--soft);transition:background .15s}
.alerts a:hover{background:var(--acs)}
.alerts b{font:800 18px var(--fd);min-width:34px;text-align:center;border-radius:10px;padding:2px 6px}
.alerts .t-warn b{background:var(--warns);color:var(--warn)}.alerts .t-info b{background:var(--infos);color:var(--info)}
.allclear{padding:18px;border-radius:14px;background:var(--oks);display:grid;gap:2px}.allclear b{color:var(--ok);font-family:var(--fd)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bl{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px}
.bt{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}.bt i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
td.rank{color:var(--mut);font-weight:700;width:28px}
@media (max-width:1180px){.cols.even{grid-template-columns:minmax(0,1fr)}}

/* services (step 3) */
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svcgrid,.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.svc{display:grid;gap:12px;align-content:start}
.svc.off{background:color-mix(in srgb,var(--w),var(--bg) 50%)}
.svc-hd{display:flex;gap:12px;align-items:center}
.svc-t{flex:1;min-width:0}.svc-t h3{margin:0;font-size:16px}.svc-t a:hover{color:var(--ac)}
.svc-d{font-size:13px;min-height:2.6em}
.svc-m{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:10px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.svc-m dt{font-size:11px;color:var(--mut);font-weight:600}.svc-m dd{margin:0;font:700 13px var(--fd)}
.warnline{font-size:12.5px;color:var(--warn);background:var(--warns);border-radius:10px;padding:6px 10px}
.sicon{width:44px;height:44px;border-radius:13px;object-fit:cover;flex:none;background:var(--soft)}
.sicon.ph{display:grid;place-items:center;background:var(--acs);color:var(--ac);font:800 15px var(--fd)}
.sicon.lg{width:64px;height:64px;border-radius:18px;font-size:20px}
.rows{display:grid;gap:10px}
.prow{display:grid;grid-template-columns:1.4fr repeat(6,minmax(0,1fr));gap:10px;align-items:end;padding:12px;border:1px solid var(--bd);border-radius:14px;background:var(--bg)}
.frow{display:grid;grid-template-columns:2fr 1fr 2fr;gap:10px;align-items:end;padding:12px;border:1px solid var(--bd);border-radius:14px;background:var(--bg)}
.prow label,.frow label{font-size:11.5px}
.prow-end{display:flex;justify-content:space-between;align-items:center;gap:8px;grid-column:1/-1}
.upl{display:grid;gap:10px;align-content:start}
.upl-prev{display:flex;align-items:center;min-height:64px}
.upl-prev.banner{height:96px;border-radius:14px;background:var(--soft);overflow:hidden;justify-content:center}
.upl-prev.banner img{width:100%;height:100%;object-fit:cover}
input[type=file]{padding:8px}
.sticky-ft{position:sticky;bottom:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);padding:12px 0;z-index:5}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input{width:auto;flex:1}.inline-form .w80{flex:0 0 90px}
.acts.end{justify-content:flex-end}
.catcard{display:grid;gap:12px;align-content:start;transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.catcard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--ac),var(--bd) 60%)}
.cbanner{margin:-20px -20px 0;height:120px;overflow:hidden;background:var(--soft)}.cbanner img{width:100%;height:100%;object-fit:cover}
.catfoot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--bd);padding-top:12px;flex-wrap:wrap}
.catfoot b{font:800 18px var(--fd)}
.sdetail{display:grid;gap:16px;margin:8px 0 14px;overflow:hidden}
.sbanner{margin:-20px -20px 0;max-height:240px;overflow:hidden}.sbanner img{width:100%;object-fit:cover;display:block}
.sd-hd{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}.sd-hd>div{flex:1;min-width:220px}.sd-hd h1{font-size:26px}
.mt-s{margin-top:10px}
.prose{color:var(--ink);max-width:70ch;line-height:1.7}
.plans{display:grid;gap:8px}
.plan{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--soft)}
.plan>div:first-child{display:grid;gap:2px}.plan b{font-family:var(--fd)}
.plan .pr{display:flex;gap:8px;align-items:baseline}.plan .pr b{font:800 17px var(--fd)}
.reqlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.reqlist li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--soft)}
@media (max-width:1180px){.prow{grid-template-columns:repeat(3,minmax(0,1fr))}.prow label:first-of-type{grid-column:1/-1}}
@media (max-width:700px){.row3,.frow{grid-template-columns:1fr}.prow{grid-template-columns:1fr 1fr}.svc-m{grid-template-columns:repeat(2,1fr)}}

/* partner management (step 4) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 14px;font:600 13.5px var(--fd);color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}.tabs a.on{color:var(--ink);border-bottom-color:var(--ac)}
.adjust{margin-bottom:16px;border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
td.pos{color:var(--ok);font-weight:600}td.neg{color:var(--bad);font-weight:600}
.discount-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.discount-bar b{font-family:var(--fd)}
.w120{width:120px}
tr.rowerr td{background:var(--bads)}
@media (max-width:700px){.stats.three{grid-template-columns:1fr}}
nav.tabs{display:flex}nav.tabs a{border-radius:0;gap:0}nav.tabs a.on{background:none}

/* orders (step 5) */
.orderform{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.ocol{display:grid;gap:14px}
.osum{position:sticky;top:76px;display:grid;gap:10px}
.srow{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.srow.tot{border-top:1px solid var(--bd);padding-top:10px;font:800 18px var(--fd)}
.err-inline{color:var(--bad);font-size:13px;background:var(--bads);padding:8px 10px;border-radius:10px}
.planpick{display:grid;gap:8px}
.pp{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--bd);border-radius:14px;cursor:pointer;color:var(--ink);font-weight:500;transition:border-color .15s,background .15s}
.pp input{width:18px;height:18px;accent-color:var(--ac);flex:none}
.pp-b{display:grid;flex:1}.pp-b b{font-family:var(--fd)}
.pp-p{font:800 16px var(--fd)}
.pp:has(input:checked){border-color:var(--ac);background:var(--acs)}
.qty{max-width:220px}
.seg a.hot{color:var(--ac)}
.progress{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.progress li{display:grid;gap:8px;font:600 12.5px var(--fd);color:var(--mut)}
.progress span{height:6px;border-radius:99px;background:var(--bd)}
.progress li.done span{background:var(--ac)}.progress li.now span{background:linear-gradient(90deg,var(--ac),var(--bd))}
.progress li.done,.progress li.now{color:var(--ink)}
.keys{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.keys li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.keys code{font-size:14px;letter-spacing:.04em;padding:6px 10px}
.deliver{border-color:color-mix(in srgb,var(--ok),var(--bd) 60%)}
pre.delivery{white-space:pre-wrap;word-break:break-word;background:var(--soft);border-radius:12px;padding:12px;margin:10px 0 0;font:500 13px var(--fm)}
.timeline{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid var(--bd);display:grid;gap:14px}
.timeline li{position:relative;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px var(--w)}
.timeline li.internal::before{background:var(--mut)}
.timeline p{font-size:13px;color:var(--ink);background:var(--soft);border-radius:10px;padding:8px 10px;margin-top:4px}
.actbox{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
@media (max-width:980px){.orderform{grid-template-columns:minmax(0,1fr)}.osum{position:static}}
/* Step 6: website API */
ol.steps{margin:6px 0 10px;padding-left:20px;display:grid;gap:6px}
ol.steps li{line-height:1.5}
/* Step 7: wallet */
nav.paytabs{margin-bottom:14px}
.payinfo{background:var(--soft);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.6;word-break:break-word}
.payinfo b{display:block;margin-bottom:4px}
.proofimg{max-width:100%;border-radius:12px;border:1px solid var(--bd)}
details.methodrow{border:1px solid var(--bd);border-radius:12px;padding:10px 14px;margin-bottom:8px}
details.methodrow summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.methodrow[open] summary{margin-bottom:10px}
/* CSP forbids inline styles: helpers instead */
.astart{align-content:start}
svg.bt{display:block;width:100%;height:8px;background:var(--soft);border-radius:99px;overflow:hidden}svg.bt rect{fill:var(--ac)}
/* Step 8: support, help */
ul.thread{list-style:none;margin:0;padding:0;display:grid;gap:14px}
ul.thread li{border:1px solid var(--bd);border-radius:14px;padding:12px 14px}
ul.thread li.staff{background:var(--acs);border-color:transparent}
ul.thread li.internal{background:var(--soft);border-style:dashed;border-color:var(--bd)}
ul.thread .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
ul.thread .who small{margin-left:auto}
ul.thread .msg{line-height:1.6;word-break:break-word}
img.tfile{display:block;max-width:260px;max-height:200px;margin-top:10px;border-radius:10px;border:1px solid var(--bd)}
ul.helplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
ul.helplist a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px}
ul.helplist a:hover{border-color:var(--ac)}
@media (max-width:700px){ul.helplist{grid-template-columns:1fr}}
.article{line-height:1.7;font-size:14.5px}
.article h3{margin:18px 0 6px}.article h3:first-child{margin-top:0}.article h4{margin:14px 0 4px}
.article ol,.article ul{padding-left:22px;margin:6px 0 12px}.article li{margin:4px 0}
.article code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.92em}
/* Step 8b: website editor, partner listings, messages */
.sitegrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
nav.sitenav{display:grid;gap:2px;background:var(--w);border:1px solid var(--bd);border-radius:14px;padding:8px;position:sticky;top:16px}
nav.sitenav a{padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:500}
nav.sitenav a:hover{background:var(--soft)}
nav.sitenav a.on{background:var(--acs);color:var(--ac2);font-weight:600}
.listfield{display:grid;gap:10px;border-top:1px solid var(--bd);padding-top:14px}
.listfield h4{margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.listfield .rows{display:grid;gap:10px}
fieldset.srow{border:1px solid var(--bd);border-radius:12px;padding:0;margin:0;min-width:0}
.srow-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--soft);border-radius:12px 12px 0 0;font-size:12.5px}
.srow-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
.srow-b label:has(textarea){grid-column:1/-1}
.imgfield{display:grid;gap:8px;justify-items:start}
.imgfield .lbl{font-size:12.5px;font-weight:600;color:var(--mut)}
.imgfield img{max-height:48px;max-width:220px;padding:8px;border:1px solid var(--bd);border-radius:10px;background:#0f1113}
.plogo{width:44px;height:44px;border-radius:10px;object-fit:contain;border:1px solid var(--bd);background:var(--soft);display:inline-grid;place-items:center;font:700 13px var(--fd);color:var(--mut);flex:none}
.plist{display:grid;gap:12px}
.pedit{border:1px solid var(--bd);border-radius:14px;background:var(--w)}
.pedit>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.pedit>summary::-webkit-details-marker{display:none}
.pedit>summary .pn{display:grid;gap:2px;min-width:0;flex:1}
.pedit>summary .pn small{color:var(--mut)}
.pedit[open]>summary{border-bottom:1px solid var(--bd)}
.pedit form{padding:14px}
.msgbody{white-space:pre-wrap;word-break:break-word;background:var(--soft);border-radius:10px;padding:12px;margin:8px 0;font-size:13.5px}
@media (max-width:900px){.sitegrid{grid-template-columns:minmax(0,1fr)}nav.sitenav{position:static;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.srow-b{grid-template-columns:minmax(0,1fr)}}
/* two-step sign-in and captcha */
.codes{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.codes code{display:block;text-align:center;padding:8px;font-size:14px;letter-spacing:.04em}
.qr{display:flex;justify-content:center;margin:6px 0}.qr svg{width:220px;height:220px;background:#fff;padding:8px;border-radius:12px}
.choice{display:grid;gap:6px}.choice .btn{margin-top:6px}
.brk{word-break:break-all}
.captcha{display:grid;gap:6px;font-size:13.5px}
.captcha .cf-turnstile,.captcha .g-recaptcha{min-height:65px}
details summary{cursor:pointer}

/* ===== Admin look v2: dark sidebar, refined top bar, full-width content ===== */
:root{--sb:#0d0f12;--sb2:#16191e;--sbt:#a3aab3;--sbh:#ffffff;--sbb:rgba(255,255,255,.07);--rad:16px;
  --sh1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)}
:root[data-theme="dark"]{--sb:#0a0b0d;--sb2:#13161a;--sh1:0 1px 2px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sb:#0a0b0d;--sb2:#13161a;--sh1:0 1px 2px rgba(0,0,0,.3)}}
body{font-size:14px;letter-spacing:-.003em}
.shell{grid-template-columns:252px minmax(0,1fr)}
.side{background:var(--sb);border-right:0;padding:18px 12px 12px;gap:10px;color:var(--sbt);scrollbar-width:thin;scrollbar-color:#2a2f36 transparent}
.side .brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 12px;border-bottom:1px solid var(--sbb)}
.side .brand .logo{background:#fff;border-radius:10px;padding:6px 10px;display:inline-flex}
.side .brand .logo img{height:20px;width:auto;display:block}
.brandtag{font:700 10px var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--ac);background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.25);padding:3px 8px;border-radius:999px}
.side .navlbl{color:#5d6670;font-size:10px;letter-spacing:.14em;padding:16px 12px 6px}
.side nav a{position:relative;color:var(--sbt);font:500 13.5px var(--fb);padding:8px 12px;border-radius:9px;gap:11px}
.side nav a .ic{width:17px;height:17px;opacity:.75}
.side nav a:hover{background:var(--sb2);color:var(--sbh)}
.side nav a:hover .ic{opacity:1}
.side nav a.on{background:linear-gradient(90deg,rgba(255,122,26,.18),rgba(255,122,26,.04));color:#fff;font-weight:600}
.side nav a.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--ac)}
.side nav a.on .ic{color:var(--ac);opacity:1}
.side nav .ct{background:var(--ac);font-size:10.5px;min-width:20px;text-align:center}
.side .sidefoot{border-top:1px solid var(--sbb);padding-top:12px;display:block}
.side .who{background:var(--sb2);border:1px solid var(--sbb);padding:9px 10px;border-radius:12px}
.side .who b{color:#fff;font-size:12.5px}.side .who small{color:#7d858e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.side .who .av{width:32px;height:32px;font-size:12px}

.topbar{min-height:62px;padding-top:10px;padding-bottom:10px;background:color-mix(in srgb,var(--w) 88%,transparent);gap:12px}
.crumb{display:flex;align-items:center;gap:8px;font:600 13.5px var(--fd);min-width:0}
.crumb span{color:var(--mut);font-weight:500}.crumb i{font-style:normal;color:var(--bd)}
.crumb b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.tsearch{position:relative;width:min(340px,32vw)}
.tsearch .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut)}
.tsearch input{padding:9px 12px 9px 36px;border-radius:10px;background:var(--bg);font-size:13px}
.iconbtn{border-radius:10px;width:38px;height:38px}
.topbar .btn.sm{padding:8px 14px;border-radius:10px}
.dd{position:relative}
.dd>summary{list-style:none;cursor:pointer}.dd>summary::-webkit-details-marker{display:none}
.dd>summary.av{border:2px solid var(--w);box-shadow:0 0 0 1px var(--bd)}
.ddm{position:absolute;top:calc(100% + 8px);left:auto;right:0;min-width:220px;background:var(--w);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--shl);padding:6px;display:grid;gap:1px;z-index:30;animation:pop .14s ease-out}
.ddm a,.ddm button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;border:0;background:none;font:500 13.5px var(--fb);color:var(--ink);text-align:left;cursor:pointer}
.ddm a:hover,.ddm button:hover{background:var(--soft)}
.ddm .ic{width:16px;height:16px;color:var(--mut)}
.ddm form{display:contents}
.ddh{padding:10px 10px 10px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.ddh b{display:block;font:700 13.5px var(--fd)}.ddh small{color:var(--mut);font-size:12px}

.content{max-width:1600px;padding-top:28px}
.top{margin-bottom:22px}
.top h1{font-size:24px;font-weight:800}
.card{border-radius:var(--rad);box-shadow:var(--sh1);padding:22px}
.card h3{font-size:14.5px;font-weight:700}
.grid{gap:16px}
.klabel{font:700 11px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:6px 0 10px}
.stat{position:relative;padding:20px 20px 18px}
.stat .sic{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--acs);color:var(--ac)}
.stat .sic .ic{width:19px;height:19px}
.stat small{font-size:12.5px;font-weight:600;padding-right:46px}
.stat b{font-size:30px;margin-top:10px}
.stat.hl{background:linear-gradient(135deg,#16191d,#0d0f12);border-color:#0d0f12;color:#fff}
.stat.hl .sic{background:rgba(255,122,26,.2);color:#ffb27a}
:root[data-theme="dark"] .stat.hl{background:linear-gradient(135deg,#2a1a0e,#1a1209);border-color:#3a2412}
a.stat:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,24,40,.1);border-color:color-mix(in srgb,var(--bd),var(--ac) 35%)}
.seg{background:var(--w);border:1px solid var(--bd);border-radius:10px;padding:3px}
.seg a{border-radius:7px}
.seg a.on{background:var(--ink);color:var(--bg);box-shadow:none}
th{background:var(--bg);font-size:10.5px;padding:11px 12px;border-bottom:1px solid var(--bd)}
th:first-child{border-top-left-radius:10px}th:last-child{border-top-right-radius:10px}
td{padding:13px 12px}
tbody tr{transition:background .12s}
tbody tr:hover td{background:color-mix(in srgb,var(--soft) 60%,transparent)}
.btn{border-radius:10px}
.btn.pri:hover{box-shadow:0 8px 22px rgba(255,122,26,.3)}
input,select,textarea{border-radius:10px}
.pill{border-radius:7px;padding:3px 9px}

/* partner logos */
.logo-prev{width:56px;height:56px;border-radius:14px;background:var(--soft);border:1px solid var(--bd);display:grid;place-items:center;overflow:hidden;font:800 16px var(--fd);color:var(--mut);flex:none}
.logo-prev img{width:100%;height:100%;object-fit:contain;background:#fff}
.logo-prev.sm{width:36px;height:36px;border-radius:10px;font-size:12px}
.logo-prev.lg{width:64px;height:64px}
.logo-pick{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo-pick>label:not(.check){flex:1 1 260px}
.acct{display:flex;gap:12px;align-items:center}
.pprof{display:flex;gap:14px;align-items:center}
.pprof b{font:700 15px var(--fd)}

@media (max-width:1100px){.tsearch{display:none}}
@media (max-width:900px){.side .navlbl{color:#6b737c}.hide-s{display:none}}
@media (max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}.crumb span,.crumb i{display:none}.topbar{gap:8px}}
@media (max-width:560px){.stats,.stats.k6{grid-template-columns:minmax(0,1fr)}.stat b{font-size:26px}.seg{flex-wrap:nowrap}.seg a{padding:6px 10px}}

/* ===== Dashboard v3: command center ===== */
:root[data-theme="dark"]{--bg:#0b0d10;--w:#14171c;--soft:#1b1f25;--bd:#242a31}
.hero-row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.hero,.hero2{position:relative;overflow:hidden;border-radius:20px;padding:26px 28px;color:#f3f4f6;border:1px solid #2a2418}
.hero{background:radial-gradient(120% 140% at 100% 0%,rgba(255,153,51,.30),transparent 55%),linear-gradient(120deg,#16181c 0%,#1c1a17 55%,#3a2a12 100%)}
.hero2{background:radial-gradient(120% 120% at 100% 100%,rgba(255,122,26,.22),transparent 60%),linear-gradient(160deg,#16181c,#1d1914)}
.hero-wave{position:absolute;right:0;top:0;width:46%;height:78%;opacity:.7;pointer-events:none}
.hero-wave path{fill:none;stroke:#f5a524;stroke-width:2.2;stroke-linecap:round}
.hero-wave path:nth-child(2){stroke:#ffcf6b;opacity:.75}.hero-wave path:nth-child(3){stroke:#ff7a1a;opacity:.6}
.hero>*:not(svg){position:relative}
.live{display:inline-flex;align-items:center;gap:7px;font:600 11.5px var(--fd);color:#4ade80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);padding:4px 11px;border-radius:999px}
.live i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.hero h1{font:800 28px var(--fd);margin:16px 0 6px;color:#fff}
.hero p{color:#c3c8cf;font-size:13.5px}
.hero-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn.gold{background:linear-gradient(180deg,#ffb238,#f59e0b);border-color:#f59e0b;color:#1a1204;font-weight:700}
.btn.gold:hover{box-shadow:0 10px 26px rgba(245,158,11,.4);color:#1a1204;border-color:#f59e0b}
.btn.glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#f3f4f6}
.btn.glass:hover{background:rgba(255,255,255,.12);box-shadow:none;border-color:rgba(255,255,255,.25)}
.btn b{font-weight:800;margin-left:2px}
.kick2{font:700 11.5px var(--fd);letter-spacing:.06em;text-transform:uppercase;color:#f5a524}
.hero2 h2{font:800 22px var(--fd);color:#fff;margin:12px 0 6px}
.hero2 p{color:#aab1ba;font-size:13px;margin-bottom:16px}
.seg.dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);margin-right:8px;margin-bottom:8px}
.seg.dark a{color:#c3c8cf}.seg.dark a.on{background:#f59e0b;color:#1a1204}
.analytics{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);margin-bottom:16px}
.card h3 .sub{display:block;font:500 12px var(--fb);color:var(--mut);margin-top:3px;letter-spacing:0}
.card h3 .big{font:800 20px var(--fd)}
.legend{display:flex;justify-content:space-between;font-size:12.5px;margin-top:6px}
.lg-ac{color:var(--ac);font-weight:600}.lg-ac::before{content:"● "}
.donut-wrap{display:grid;place-items:center;padding:6px 0 10px}
.donut{width:190px;height:190px;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:16}
.dn-bg{stroke:var(--soft)}
.dn-ok{stroke:#2dd4a0}.dn-bad{stroke:#f2626b}.dn-warn{stroke:#f5a524}.dn-info{stroke:#4f8cff}
.donut text{transform:rotate(90deg);transform-origin:70px 70px}
.dn-n{fill:var(--ink);font:800 26px var(--fd)}.dn-l{fill:var(--mut);font:500 10px var(--fb)}
.dlegend{list-style:none;margin:0;padding:0}
.dlegend li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--bd);font-size:13px}
.dlegend li span::before{content:"● "}
.dlegend .t-ok span{color:#2dd4a0}.dlegend .t-bad span{color:#f2626b}.dlegend .t-warn span{color:#f5a524}.dlegend .t-info span{color:#4f8cff}
.qcards{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:22px}
.qc{border-radius:18px;padding:18px;background:var(--w);border:1px solid var(--bd);display:grid;gap:14px}
.qc header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.qc header b{display:block;font:800 13.5px var(--fd);text-transform:uppercase;letter-spacing:.02em}
.qc header small{color:var(--mut);font-size:11.5px}
.qc header em{font-style:normal;font:700 11px var(--fd);padding:4px 10px;border-radius:999px;white-space:nowrap}
.qbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qbtns a{display:grid;place-items:center;text-align:center;padding:12px 8px;border-radius:12px;font:700 13px var(--fd);color:#141414;transition:transform .15s,filter .15s}
.qbtns a b{font:800 18px var(--fd)}
.qbtns a:hover{transform:translateY(-2px);filter:brightness(1.05)}
.qc footer{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut)}
.rate{width:100%;height:6px;display:block;margin-top:-8px}.rate .rb{fill:var(--soft)}
.qc-gold{border-color:rgba(245,158,11,.4)}.qc-gold header em{background:rgba(245,158,11,.15);color:#f5a524}
.qc-gold .qbtns a:first-child{background:linear-gradient(180deg,#f8b73f,#e2a019)}.qc-gold .qbtns a:last-child{background:linear-gradient(180deg,#ffd77a,#f0be4f)}.qc-gold .rf{fill:#f5a524}
.qc-blue{border-color:rgba(79,140,255,.4)}.qc-blue header em{background:rgba(79,140,255,.15);color:#6f9eff}
.qc-blue .qbtns a:first-child{background:linear-gradient(180deg,#5b93ff,#3d74e6);color:#fff}.qc-blue .qbtns a:last-child{background:linear-gradient(180deg,#9b8cff,#7c6cf0);color:#fff}.qc-blue .rf{fill:#4f8cff}
.qc-green{border-color:rgba(45,212,160,.4)}.qc-green header em{background:rgba(45,212,160,.15);color:#2dd4a0}
.qc-green .qbtns a:first-child{background:linear-gradient(180deg,#43dca9,#22b886)}.qc-green .qbtns a:last-child{background:linear-gradient(180deg,#5ee0e6,#2fc0cc)}.qc-green .rf{fill:#2dd4a0}
.qlinks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.qlinks a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--bd);transition:border-color .15s,background .15s}
.qlinks a:hover{border-color:var(--ac);background:var(--acs)}
.qlinks .ic{color:var(--ac)}.qlinks span{display:grid;font:600 13.5px var(--fd)}.qlinks small{font:400 12px var(--fb);color:var(--mut)}
@media (max-width:1180px){.hero-row,.analytics{grid-template-columns:minmax(0,1fr)}.qcards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.hero,.hero2{padding:20px}.hero h1{font-size:23px}.hero-wave{width:100%;opacity:.35}}
/* two-line analytics chart + theme button */
.mchart .mline{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mchart .mline.sg{stroke:#f5c542;filter:drop-shadow(0 0 6px rgba(245,197,66,.35))}
.mchart .mline.sa{stroke:#2dd4a0}
.mchart .sg-g0{stop-color:#f5c542;stop-opacity:.38}.mchart .sg-g1{stop-color:#f5c542;stop-opacity:0}
.mchart .sa-g0{stop-color:#2dd4a0;stop-opacity:.12}.mchart .sa-g1{stop-color:#2dd4a0;stop-opacity:0}
.mchart .grid{stroke-dasharray:3 5}
:root[data-theme="light"] .mchart .mline.sg{stroke:#e0a800}
.legend .lg-o{color:#f08a24;font-weight:600}.legend .lg-a{color:#22b886;font-weight:600}
.legend .lg-o::before,.legend .lg-a::before{content:"● "}
.legend b{color:var(--ink);margin-left:4px}
.rsel{width:auto;padding:8px 34px 8px 12px;font:600 13px var(--fd);background-color:var(--bg)}
.themebtn .t-sun{display:none}
:root[data-theme="dark"] .themebtn .t-moon{display:none}
:root[data-theme="dark"] .themebtn .t-sun{display:grid}
.themebtn span{display:grid}
fieldset.srow{display:block}
/* chart animation: lines draw in, areas fade up */
.mchart .mline{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.4,0,.2,1) .15s forwards}
.mchart .mline.sa{animation-delay:.45s}
.mchart .area{opacity:0;animation:fadein 1s ease-out .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.mchart .mline.sg{stroke-width:3}
.mchart .sg-g0{stop-opacity:.5}
.is-sample .mchart{opacity:.85}
@media (prefers-reduced-motion:reduce){.mchart .mline{stroke-dashoffset:0}.mchart .area{opacity:1}}

/* v1.8: notices, promo codes, reports */
.notice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border-radius:16px;border:1px solid var(--bd);background:var(--card);margin-bottom:14px;position:relative;overflow:hidden}
.notice::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--nc,var(--info))}
.notice-i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--ncs,var(--infos));color:var(--nc,var(--info))}
.notice-i svg{width:19px;height:19px}
.notice-b b{font-family:var(--fd);font-size:15px}.notice-b p{margin:4px 0 6px;font-size:13.5px;line-height:1.55}
.n-success{--nc:var(--ok);--ncs:var(--oks)}.n-warning{--nc:var(--warn);--ncs:var(--warns)}.n-danger{--nc:var(--bad);--ncs:var(--bads)}
.notice.is-off{opacity:.6}
.grid .notice{margin-bottom:0}
.notice-x{border:0;background:none;color:var(--mut);cursor:pointer;padding:4px;border-radius:8px}.notice-x:hover{color:var(--tx);background:var(--soft)}.notice-x svg{width:18px;height:18px}
.promo-box{display:grid;gap:6px;padding:12px;border:1px dashed var(--bd);border-radius:12px;background:var(--soft)}
.promo-box label{font-size:12.5px;font-weight:600}
.promo-in{display:flex;gap:8px}.promo-in input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.04em}
.promo-ok{margin:0;font-size:12.5px;color:var(--ok);font-weight:600;display:flex;align-items:center;gap:6px}.promo-ok svg{width:15px;height:15px}
.srow b.good{color:var(--ok)}
code.promo-code{font-weight:700;letter-spacing:.05em;cursor:pointer}
input.upper{text-transform:uppercase;letter-spacing:.04em}
tr.sel td{background:var(--soft)}
.reports{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.rep{display:grid;gap:10px;align-content:start}
.rep .rep-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--infos);color:var(--info)}.rep .rep-i svg{width:20px;height:20px}
.rep h3{margin:0}.rep p{margin:0;font-size:13px;color:var(--mut)}
.rep .btn{justify-self:start}
.repbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.repbar label{display:grid;gap:4px;font-size:12.5px;font-weight:600}
.repbar .chips{display:flex;gap:6px;flex-wrap:wrap}
.mt14{margin-top:14px}
.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.row2>*{min-width:0}input[type=datetime-local],input[type=date]{min-width:0;width:100%}
@media (max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}}
.promo-in .prefix{align-self:center;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.row2{align-items:start}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choose-c{display:grid;gap:6px;align-content:start;padding:18px;border:1px solid var(--bd);border-radius:18px;background:var(--soft);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.choose-c:hover{border-color:var(--ac,#ff7a00);transform:translateY(-2px)}
.choose-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,122,0,.14);color:#ff7a00}.choose-i svg{width:21px;height:21px}
.choose-c b{font-family:var(--fd);font-size:16px}.choose-c small{color:var(--mut);font-size:13px;line-height:1.5}
.choose-go{margin-top:6px;font-weight:600;color:#ff7a00;font-size:13.5px}
@media (max-width:560px){.choose{grid-template-columns:1fr}}
.fpresets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 12px}
/* Live chat inbox */
.lc{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;height:calc(100vh - 220px);min-height:480px}
.lc .card{padding:0;display:flex;flex-direction:column;overflow:hidden}
.lc-tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.lc-tabs button{border:0;background:transparent;color:var(--mut);font:600 12px var(--fd);padding:6px 10px;border-radius:999px;cursor:pointer}
.lc-tabs button.on{background:var(--acs);color:var(--ac)}
.lc-items{overflow-y:auto;flex:1}
.lc-empty{padding:16px}
.lc-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--bd);background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.lc-item:hover{background:var(--soft)}
.lc-item.on{background:var(--acs)}
.lc-ava{width:38px;height:38px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font:700 14px var(--fd);color:var(--ac)}
.lc-item b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-item small{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:var(--mut)}
.lc-badge{background:var(--ac);color:#fff;border-radius:999px;font:700 11px var(--fd);padding:1px 7px}
.lc-tag{font:600 10.5px var(--fd);padding:1px 7px;border-radius:999px;background:var(--soft);color:var(--mut)}
.lc-tag.h{background:#fde68a;color:#7c4a03}
.lc-none{margin:auto;text-align:center;display:grid;justify-items:center;gap:6px;padding:20px;color:var(--mut)}
.lc-none .ic{width:40px;height:40px}
.lc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.lc-hinfo{min-width:0}
.lc-hinfo b{display:block;font-size:15px}
.lc-hinfo small{display:block;font-size:12px}
.lc-hinfo a{color:var(--ac)}
.lc-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.lc-m{max-width:72%;display:flex;flex-direction:column}
.lc-m .b{padding:9px 13px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.45}
.lc-m .w{font-size:11px;color:var(--mut);margin:0 6px 3px}
.lc-m time{font-size:10.5px;color:var(--mut);margin:3px 6px 0}
.lc-m.v{align-self:flex-start}.lc-m.v .b{background:var(--w);border:1px solid var(--bd);border-bottom-left-radius:5px}
.lc-m.a,.lc-m.i{align-self:flex-end;align-items:flex-end}
.lc-m.a .b{background:var(--ac);color:#fff;border-bottom-right-radius:5px}
.lc-m.i .b{background:var(--acs);color:var(--ink);border-bottom-right-radius:5px}
.lc-m.s{align-self:center;max-width:90%}.lc-m.s .b{background:transparent;color:var(--mut);font-size:12px;text-align:center;padding:2px}
.lc-m.s time{display:none}
.lc-typing{align-self:flex-end;font-size:12px;color:var(--mut)}
.lc-form{display:flex;gap:10px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--bd)}
.lc-form textarea{flex:1;resize:none;min-height:46px;max-height:160px}
.lc-note{padding:0 16px 10px;margin:0}
@media (max-width:900px){.lc{grid-template-columns:1fr;height:auto}.lc-list{max-height:300px}.lc-thread{min-height:520px}}
.subbox{border:1px solid var(--bd);border-radius:14px;padding:12px 14px;display:grid;gap:10px;background:var(--bg)}
.subbox>b{display:flex;align-items:center;gap:8px;font-size:13.5px}
.plan-sum{border:1px solid var(--ac);background:var(--acs);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.plan-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan-sum b{font:700 14px var(--fd)}.plan-sum small{font-weight:600;color:var(--ac)}.plan-sum p{margin:0}
.plan-due{border:1px solid var(--ac);background:var(--acs);border-radius:16px;padding:14px 18px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.plan-due b{font:700 15px var(--fd)}