/* OPD Pilot Hub UI (v03.0.00) */
:root{
  --paper:#f4f8f5;--card:#fff;--ink:#16261e;--muted:#5d7066;--line:#d9e4dc;
  --accent:#0e7a5f;--accent-soft:#e3f2eb;--credit:#148a4e;--credit-soft:#e2f3e8;
  --debit:#b42318;--debit-soft:#fbeae7;--warn:#a16207;--warn-soft:#fbf0da;
  --violet:#7c3aed;--violet-soft:#f1eafd;
}
*{box-sizing:border-box}
/* the hidden attribute must win over any display: set by a utility class */
[hidden]{display:none !important}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.topbar{background:#0d3327;color:#fff}
.topbar__in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-weight:800;font-size:18px;color:#fff;letter-spacing:-.01em}
.brand span{color:#5fd3ae}.brand:hover{text-decoration:none}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-left:auto}
.nav__a{color:#cfe6db;padding:6px 11px;border-radius:7px;font-size:13.5px;font-weight:600}
.nav__a:hover{background:#164636;text-decoration:none;color:#fff}
.nav__a--on{background:#1b5642;color:#fff}
.nav__a--out{color:#9ec2b2}
.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 60px}
h1{font-size:24px;letter-spacing:-.01em;margin:6px 0 16px}
h2{font-size:18px;margin:28px 0 10px}
.muted{color:var(--muted)}.small{font-size:12.5px}
.grid{display:grid;gap:14px}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.card h3{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.stat--ok{color:var(--credit)}.stat--bad{color:var(--debit)}.stat--warn{color:var(--warn)}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13.5px}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;
  padding:12px 14px;border-bottom:1.5px solid var(--line);background:var(--card);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(14,122,95,.035)}
/* trailing action column hugs the right edge and never wraps */
.tbl th:last-child,.tbl td:last-child{text-align:right;white-space:nowrap;width:1%}
.tbl td:last-child .btn{vertical-align:middle}

/* Section header: a heading with an optional right-aligned action, with real
   breathing room above it so sections don't collide with preceding body copy. */
.sectionhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:38px 0 14px}
.sectionhead:first-child{margin-top:0}
.sectionhead h1,.sectionhead h2{margin:0}
.sectionhead__sub{flex-basis:100%;font-size:12.5px;color:var(--muted);margin:0}
.sectionhead > .btn{margin-left:auto}
.tblwrap{overflow-x:auto;border-radius:10px;
  /* scroll affordance: a soft shadow on the right edge while more columns remain */
  background:linear-gradient(90deg,var(--card) 30%,rgba(255,255,255,0)),
             linear-gradient(90deg,rgba(255,255,255,0),var(--card) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(13,51,39,.12),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(13,51,39,.12),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}

/* Search + toolbar above a list */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.toolbar input[type=search],.toolbar input[type=text]{padding:8px 12px;border:1.5px solid var(--line);
  border-radius:8px;font:inherit;min-width:230px;background:#fff}
.toolbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tbl th a{color:var(--muted);text-decoration:none;white-space:nowrap}
.tbl th a:hover{color:var(--accent)}
.tbl th a.on{color:var(--accent)}
.resultnote{font-size:12.5px;color:var(--muted);margin:-6px 0 12px}

/* ---------- tables become cards on small screens ---------- */
@media(max-width:760px){
  .tbl--cards{background:transparent;border:0}
  .tbl--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl--cards tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;margin-bottom:10px}
  .tbl--cards td{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
    padding:5px 0;border:0;text-align:right}
  .tbl--cards td::before{content:attr(data-label);flex:0 0 42%;text-align:left;
    font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .tbl--cards td:first-child{display:block;text-align:left;border-bottom:1px solid var(--line);
    padding-bottom:8px;margin-bottom:6px}
  .tbl--cards td:first-child::before{display:none}
  .tbl--cards td:empty{display:none}
  .tblwrap:has(.tbl--cards){overflow:visible;background:none}
}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:99px;padding:2px 9px;white-space:nowrap}
.chip--ok{background:var(--credit-soft);color:var(--credit)}
.chip--bad{background:var(--debit-soft);color:var(--debit)}
.chip--warn{background:var(--warn-soft);color:var(--warn)}
.chip--info{background:var(--violet-soft);color:var(--violet)}
.chip--dim{background:#eef2ef;color:var(--muted)}
.scopechip{font-size:10.5px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:2px 8px}
.scopechip--pay{background:#134634;color:#7fe0bd}.scopechip--view{background:#3a3f2b;color:#e5d98a}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:8px 16px;font-size:13.5px;font-weight:650;cursor:pointer}
.btn:hover{background:#0a6b52;text-decoration:none;color:#fff}
.btn--ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}
.btn--danger{background:var(--debit)}.btn--danger:hover{background:#93261c}
.btn--sm{padding:4px 10px;font-size:12.5px}
form.inline{display:inline}
.frm{display:grid;gap:12px;max-width:520px}
.frm label{font-size:12.5px;font-weight:700;color:var(--muted);display:block;margin-bottom:3px}
.frm input,.frm select,.frm textarea,.filter input,.filter select{width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.frm input:focus,.frm select:focus{outline:none;border-color:var(--accent)}
.frm--row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.frm--row>div{flex:1;min-width:130px}
/* Flash messages are toasts: fixed, out of flow, click to dismiss.
   Confirmations fade after 6s (JS); errors stay until dismissed. */
.flash{position:fixed;top:14px;right:14px;z-index:60;max-width:min(460px,calc(100vw - 28px));
  border-radius:10px;padding:12px 18px;font-weight:600;font-size:13.5px;border:1px solid;
  box-shadow:0 8px 24px rgba(13,51,39,.16);cursor:pointer;
  animation:flashIn .22s ease-out}
.flash + .flash{top:76px}
.flash--out{opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s}
.flash--ok{background:#eaf7f0;border-color:var(--credit);color:#0d6b3c}
.flash--err{background:#fdeeec;border-color:var(--debit);color:#8f1d14}
@keyframes flashIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.flash{animation:none}.flash--out{transition:none}}

/* ---------- modal dialogs ---------- */
dialog.modal{border:0;border-radius:14px;padding:0;width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);background:var(--card);color:var(--ink);
  box-shadow:0 24px 64px rgba(13,51,39,.28)}
dialog.modal::backdrop{background:rgba(13,51,39,.42)}
/* no-JS fallback: a server-rendered <dialog open> sits inline in the page flow */
dialog.modal:not(:modal){position:static;margin:16px 0;width:100%;max-height:none;
  border:1px solid var(--line);box-shadow:none}
.modal__head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.modal__head h2{margin:0;font-size:17px}
.modal__x{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;
  color:var(--muted);padding:2px 6px;border-radius:6px}
.modal__x:hover{background:var(--paper);color:var(--ink)}
.modal__body{padding:18px 22px;overflow-y:auto;max-height:calc(100vh - 210px)}
dialog.modal:not(:modal) .modal__body{max-height:none}
/* Modal forms don't carry .frm, so field styling is scoped here instead. */
.modal__body label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.modal__body input,.modal__body select,.modal__body textarea{
  display:block;width:100%;padding:9px 11px;border:1.5px solid var(--line);
  border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.modal__body textarea{resize:vertical;min-height:76px}
.modal__body input:focus,.modal__body select:focus,.modal__body textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;
  border-top:1px solid var(--line);background:var(--paper);
  border-radius:0 0 14px 14px;position:sticky;bottom:0}

/* ---------- sticky page header + tabs ---------- */
.pagehead{position:sticky;top:0;z-index:30;background:var(--paper);
  margin:-26px -20px 18px;padding:16px 20px 0;border-bottom:1px solid var(--line)}
.pagehead__in{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.pagehead h1{margin:0 0 2px}
.tabs{display:flex;gap:2px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs__a{padding:9px 15px;font-size:13.5px;font-weight:650;color:var(--muted);
  border-bottom:2.5px solid transparent;white-space:nowrap;border-radius:6px 6px 0 0}
.tabs__a:hover{color:var(--ink);background:var(--card);text-decoration:none}
.tabs__a--on{color:var(--accent);border-bottom-color:var(--accent);background:var(--card)}
.tabs__n{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;
  background:var(--warn);color:#fff;font-size:11px;font-weight:800;text-align:center}
@media(max-width:640px){.pagehead{margin:-18px -12px 14px;padding:14px 12px 0}}

/* ---------- settings ---------- */
.setgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:860px){.setgrid{grid-template-columns:minmax(0,1fr)}}
.setcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.setcard__h{padding:13px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.setcard__h h2{margin:0;font-size:15px}
.setcard__h p{margin:3px 0 0;font-size:12.5px;color:var(--muted);max-width:60ch}
.setcard__b{padding:16px 18px}
.setcard__b label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.setcard__b input,.setcard__b select,.setcard__b textarea{display:block;width:100%;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.setcard__b textarea{resize:vertical;min-height:74px}
.setcard__b input:focus,.setcard__b select:focus,.setcard__b textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.setcard__b .fgrid{margin-bottom:12px}
.switch{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:9px;background:var(--paper);cursor:pointer}
.switch input{width:auto !important;margin:0}
.switch span{font-size:13.5px;font-weight:650;color:var(--ink)}
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;margin-top:18px;
  padding:12px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 -4px 16px rgba(13,51,39,.06);z-index:20}

/* ---------- customer pay page ---------- */
.paypick{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 18px}
.paypick__a{display:flex;align-items:center;gap:9px;padding:12px 16px;border:2px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font-weight:650;font-size:13.5px;min-width:150px}
.paypick__a:hover{border-color:var(--accent);text-decoration:none;color:var(--ink)}
.paypick__a--on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.paybody{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.payqr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;line-height:0}
.payqr svg{display:block}
.paydetails{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.paydetails__r{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.paydetails__r:last-child{border-bottom:0}
.paydetails__k{flex:0 0 140px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.paydetails__r .btn{margin-left:auto}
@media(max-width:640px){.paybody{gap:14px}.paydetails__k{flex-basis:100%}.paydetails__r .btn{margin-left:0}}

/* field groups inside forms — turns a flat wall of inputs into readable blocks */
.fgroup{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.fgroup > legend, .fgroup__t{font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);padding:0 6px;margin-bottom:8px}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fgrid--2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.callout{background:var(--accent-soft);border:1px solid var(--accent);border-left-width:4px;border-radius:8px;padding:12px 16px;margin:14px 0;font-size:13.5px}
.warnout{background:var(--warn-soft);border:1px solid var(--warn);border-left-width:4px;border-radius:8px;padding:12px 16px;margin:14px 0;font-size:13.5px}
.mono{font-family:Consolas,ui-monospace,monospace;font-size:.9em}
.paircode{font-family:Consolas,ui-monospace,monospace;font-size:26px;font-weight:800;letter-spacing:.35em;color:var(--accent);background:var(--accent-soft);border-radius:8px;padding:8px 18px;display:inline-block}
.login{max-width:400px;margin:8vh auto 0}
.login .card{padding:26px}
.bar{height:8px;border-radius:5px;background:#e6ede8;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
.bar i.hot{background:var(--warn)}.bar i.over{background:var(--debit)}
.foot{max-width:1180px;margin:0 auto;padding:14px 20px 30px;color:var(--muted);font-size:12.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
details.card summary{cursor:pointer;font-weight:700}
@media(max-width:640px){
  .wrap{padding:18px 12px 50px}h1{font-size:20px}
  dialog.modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;margin:0}
  .modal__body{max-height:calc(100vh - 140px)}
  .modal__foot{border-radius:0}
  .flash{left:12px;right:12px;max-width:none}
  .frm--row>div{min-width:100%}
}

/* ---------- invoice document ---------- */
.invbody{background:var(--paper);padding:20px 14px 60px}
.invtools{max-width:840px;margin:0 auto 14px;display:flex;gap:10px;flex-wrap:wrap}
.invoice{max-width:840px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:34px 38px;position:relative;box-shadow:0 2px 10px rgba(13,51,39,.05)}
/* v03.39.02: ONE status heading — the document type and its status in a single badge on the heading's own
   line ("INVOICE | PAID", "TAX INVOICE | PART PAID"). It replaces the heading + a separate rotated stamp,
   which was first printed across the heading and then, moved under it, cost a whole extra row. Every state
   has one: PAID / CREDITED green, PART PAID violet, DUE amber, OVERDUE red, CANCELLED grey. */
.invbadge{display:inline-flex;align-items:stretch;border:2px solid var(--sb);border-radius:9px;overflow:hidden;
  margin:0 0 10px;line-height:1;vertical-align:top;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.invbadge__t{padding:7px 12px;font-size:17px;font-weight:800;letter-spacing:.08em;color:var(--ink);background:#fff}
.invbadge__s{display:flex;align-items:center;padding:0 11px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  color:#fff;background:var(--sb);white-space:nowrap}
.invbadge--paid{--sb:var(--credit)}.invbadge--part{--sb:var(--violet)}.invbadge--due{--sb:var(--warn)}
.invbadge--over{--sb:var(--debit)}.invbadge--void{--sb:var(--muted)}
.invbadge--void .invbadge__t{color:var(--muted)}
.invreason{margin:4px 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:13.5px}
.invhead{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:2px solid var(--line)}
.invlogo{max-height:52px;max-width:190px;display:block;margin-bottom:8px}
.invco{font-size:19px;font-weight:800;letter-spacing:-.01em}
.invco2{font-size:15px;font-weight:700}
.invsmall{font-size:12.5px;line-height:1.55;color:var(--muted)}
.invtitle{text-align:right;min-width:250px}
.invtitle__t{font-size:20px;font-weight:800;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.invmeta{margin-left:auto;font-size:12.5px;border-collapse:collapse}
.invmeta td{padding:2px 0 2px 14px;text-align:right;color:var(--muted)}
.invmeta td:last-child{color:var(--ink)}
.invbill{padding:16px 0}
.invtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.invtable th{background:var(--paper);text-align:left;padding:9px 10px;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1.5px solid var(--line)}
.invtable td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.invtable .r,.invtotals .r{text-align:right;font-variant-numeric:tabular-nums}
.invsub{font-size:11.5px;color:var(--muted);margin-top:2px}
.invtotals{display:flex;justify-content:flex-end;margin-top:14px}
.invtotals table{border-collapse:collapse;min-width:280px;font-size:13.5px}
.invtotals td{padding:6px 10px}
.invgrand td{border-top:2px solid var(--line);font-size:17px;font-weight:800;padding-top:10px}
.invwords{text-align:right;font-size:12.5px;color:var(--muted);margin:4px 0 0;font-style:italic}
.invpay{margin-top:24px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.invpay__t{background:var(--paper);padding:8px 14px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.invpay__b{display:flex;gap:18px;align-items:flex-start;padding:14px}
.invqr{line-height:0;flex:0 0 auto}
.invfoot{display:grid;grid-template-columns:1fr auto;gap:20px;margin-top:26px;
  padding-top:16px;border-top:1px solid var(--line)}
.invsign{text-align:center;font-size:12.5px;min-width:180px;align-self:end}
.invsign__l{border-top:1px solid var(--ink);margin:44px 0 6px}
@media(max-width:640px){.invoice{padding:20px 16px}.invhead{flex-direction:column;gap:14px}.invtitle{text-align:left;min-width:0}.invmeta{margin-left:0}
  .invmeta td{text-align:left;padding-left:0;padding-right:14px}.invfoot{grid-template-columns:1fr}}
@media print{
  .invtools,.topbar,.foot{display:none !important}
  .invbody{background:#fff;padding:0}
  .invoice{max-width:none;border:0;border-radius:0;box-shadow:none;padding:0}
  a[href]:after{content:none !important}
  .invtable th{background:#f2f2f2 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* --- WhatsApp template reference (v03.18.02) --- */
.tpl{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg2,#fafafa)}
.tpl>summary{cursor:pointer;padding:8px 11px;font-size:12.5px;font-weight:700;color:var(--muted);list-style:none}
.tpl>summary::-webkit-details-marker{display:none}
.tpl>summary::before{content:"+ ";font-weight:800}
.tpl[open]>summary::before{content:"- "}
.tpl[open]>summary{border-bottom:1px solid var(--line)}
.tpl>*:not(summary){margin:0;padding:0 11px}
.tpl>p:first-of-type{padding-top:10px}
.tpl>p:last-child{padding-bottom:11px}
.setcard__b .tpl__body{margin:8px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;resize:vertical;white-space:pre;overflow-wrap:normal;overflow-x:auto}

/* --- graded suspension control (v03.21.00) --- */
.susp{display:inline-block;position:relative}
.susp>summary{cursor:pointer;list-style:none;display:inline-block}
.susp>summary::-webkit-details-marker{display:none}
.susp__body{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);min-width:min(420px,90vw)}
.susp__opt{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.susp__opt:last-of-type{border-bottom:0}
.susp__opt input{margin-top:3px;width:auto;flex:0 0 auto}
.susp__list{margin:4px 0 0 16px;padding:0;font-size:12.5px;color:var(--muted);font-weight:400}
.susp__list li{margin:1px 0}

/* --- field tooltips + current-terms readout (v03.26.56) --- */
.tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);
  font-size:10px;font-weight:700;line-height:1;cursor:help;margin-left:5px;vertical-align:middle;
  user-select:none;flex:0 0 auto}
.tip:hover,.tip:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--card)}
.tip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.setcard__b label .tip,.frm label .tip{text-transform:none;letter-spacing:0}

.curterms{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:12px 14px;margin:10px 0 4px}
.curterms__h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.curterms__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px 14px}
.curterms__g>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.curterms__g span{font-size:11px;color:var(--muted)}
.curterms__g strong{font-size:13.5px;font-variant-numeric:tabular-nums}
.curterms__g strong.ovr{color:var(--warn)}

/* v03.32.00 Fleet: rollout progress bar + promote wizard boxes */
.pbar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;min-width:80px}
.pbar i{display:block;height:100%;background:var(--accent)}
.pbar i.ok{background:var(--credit)}.pbar i.bad{background:var(--debit)}.pbar i.warn{background:var(--warn)}
.wiz{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wiz .setcard{min-width:0}
.wiz label.opt{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:13.5px;cursor:pointer}
.wiz label.opt input{margin-top:3px}
.wiz .sel{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-top:6px}