*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --brand:#948ee3; --brand-d:#6f68c9; --brand-l:#f2f1fc;
  --bg:#f6f7fb; --card:#ffffff; --ink:#141726; --ink-2:#4b5068; --ink-3:#7d8298;
  --line:#e3e5ef; --line-2:#eef0f7; --ok:#0f9d6b; --warn:#b7791f; --bad:#c8324a;
  --radius:12px; --shadow:0 1px 2px rgba(20,23,38,.05),0 8px 24px rgba(20,23,38,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#9a94ea; --brand-d:#b6b1f2; --brand-l:#232640;
  --bg:#0f111c; --card:#181b2b; --ink:#eceef7; --ink-2:#b3b8cd; --ink-3:#858ba6;
  --line:#2b2f45; --line-2:#232739; --ok:#3ecf98; --warn:#e0aa4a; --bad:#f2708a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --brand:#9a94ea; --brand-d:#b6b1f2; --brand-l:#232640;
  --bg:#0f111c; --card:#181b2b; --ink:#eceef7; --ink-2:#b3b8cd; --ink-3:#858ba6;
  --line:#2b2f45; --line-2:#232739; --ok:#3ecf98; --warn:#e0aa4a; --bad:#f2708a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand-d)}

/* ---------- chrome ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 64px}
.top{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:24px}
.top-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.brandmark img{height:30px;width:auto;max-width:154px;border-radius:6px;object-fit:contain;background:#fff;padding:3px 6px;flex:none}
@media (max-width:620px){.brandmark img{height:26px;max-width:128px}}
.brandmark b{display:block;font-size:14px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandmark span{display:block;font-size:11.5px;color:var(--ink-3)}
.tabs{display:flex;gap:4px;background:var(--line-2);padding:4px;border-radius:10px}
.tabs button{border:0;background:transparent;color:var(--ink-2);padding:7px 14px;border-radius:7px;font-size:13.5px;font-weight:550}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(20,23,38,.08)}
@media (max-width:620px){.tabs button{padding:7px 9px;font-size:12.5px}}
.sync{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}

/* ---------- generic ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:20px}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:550;display:inline-flex;align-items:center;gap:7px;transition:.13s}
.btn:hover{border-color:var(--brand);color:var(--brand-d)}
.btn.primary{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--line-2);color:var(--ink)}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
label.f{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.in{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);transition:.13s}
.in:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.in.err{border-color:var(--bad)}
textarea.in{resize:vertical;min-height:66px}
.grid{display:grid;gap:14px}
.sec-h{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-d);margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.muted{color:var(--ink-3);font-size:13px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--brand-l);color:var(--brand-d)}
.modal{position:fixed;inset:0;background:rgba(8,10,18,.58);display:flex;align-items:center;justify-content:center;padding:20px;z-index:300}
.modal .box{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:430px;width:100%;padding:24px;box-shadow:0 24px 64px rgba(0,0,0,.34)}
.modal h3{font-size:17px;margin-bottom:7px}
.modal p{margin:0 0 16px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.steps{list-style:none;padding:0;margin:0 0 20px}
.steps li{display:flex;gap:11px;padding:8px 0;font-size:13.5px;color:var(--ink-2);align-items:flex-start;line-height:1.55}
.steps .n{flex:none;width:21px;height:21px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.steps b{color:var(--ink);word-break:break-all}
.modal .row{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
a.btn{text-decoration:none}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:550;z-index:200;transition:transform .26s cubic-bezier(.2,.9,.3,1);max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.empty{text-align:center;padding:56px 20px;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:6px}

/* ---------- entry layout ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:1080px){.split{grid-template-columns:minmax(0,1fr)}}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:560px){.f2,.f3{grid-template-columns:1fr}}

/* item rows */
.items{display:flex;flex-direction:column;gap:12px}
.irow{display:grid;grid-template-columns:repeat(5,1fr) 40px;gap:9px;align-items:end;
      padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--brand-l);position:relative}
.irow .nameCell{grid-column:1/-1}
.irow .in{padding:8px 9px;font-size:13.5px}
.irow label.f{font-size:10.5px;margin-bottom:4px}
.irow .idx{position:absolute;top:-8px;left:12px;background:var(--brand-d);color:#fff;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px}
.rm{border:1px solid var(--line);background:var(--card);color:var(--ink-3);height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.rm:hover{border-color:var(--bad);color:var(--bad)}
.lineamt{grid-column:1/-1;text-align:right;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;border-top:1px dashed var(--line);padding-top:9px;margin-top:2px}
.lineamt b{color:var(--ink)}
@media (max-width:620px){
  .irow{grid-template-columns:1fr 1fr}
  .irow .rm{grid-column:1/-1;padding:0 14px}
}

/* ---------- records / reports ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
table.data th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--brand-l)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.stat .v{font-size:22px;font-weight:660;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat.hi{background:var(--brand-d);border-color:var(--brand-d)}
.stat.hi .k{color:rgba(255,255,255,.8)} .stat.hi .v{color:#fff}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:18px}
.filters>div{min-width:150px}

/* ---------- invoice document ---------- */
.docpane{position:sticky;top:88px}
@media (max-width:1080px){.docpane{position:static}}
.docscroll{overflow:auto;background:var(--line-2);border-radius:var(--radius);padding:16px;border:1px solid var(--line)}
.doc{--acc:#948ee3;width:794px;min-height:1123px;background:#fff;color:#111;padding:38px 40px;font:12px/1.45 Arial,Helvetica,sans-serif;transform-origin:top left;position:relative;overflow:hidden}
.doc *{box-sizing:border-box}
/* A hairline round the whole sheet, matching the frame drawn in the PDF.
   Faint and thin on purpose: it should read as the edge of the paper, not
   compete with the invoice. ::before is already spoken for by Corporate
   Blue's accent bar, which sits outside this frame in the PDF too. */
.doc::after{content:'';position:absolute;inset:30px;border:1px solid #d5d5d5;pointer-events:none}
.doc.tpl-grid::after{border-color:#333;inset:22px}
.doc .co{font-size:21px;font-weight:700;letter-spacing:-.01em;color:#111;margin-bottom:8px}
.doc .meta{font-size:11px;line-height:1.75;color:#222}
.doc .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.doc .hd img.lg{width:70px;height:70px;object-fit:contain;border:1px solid #ddd;flex:none}
.doc hr{border:0;border-top:1px solid #d8d8d8;margin:16px 0 0}
.doc .ttl{text-align:center;color:var(--acc);font-size:20px;font-weight:700;margin:14px 0 20px}
.doc .parties{display:flex;justify-content:space-between;gap:24px;margin-bottom:18px}
.doc .parties .l{max-width:60%} .doc .parties .r{text-align:right}
.doc .lb{font-weight:700;font-size:11.5px;margin-bottom:7px}
.doc .nm{font-weight:700;font-size:12px;margin-bottom:4px}
.doc .ln{font-size:11px;line-height:1.7;color:#222}
.doc table.it{width:100%;border-collapse:collapse;margin-bottom:16px}
.doc table.it th{background:var(--acc);color:#fff;font-size:11px;font-weight:700;padding:7px 8px;text-align:left}
.doc table.it td{padding:8px;font-size:11px;border-bottom:1px solid #e6e6e6;vertical-align:top}
.doc table.it tr.tot td{font-weight:700;border-bottom:0;border-top:1px solid #cfcfcf;background:#fafafa}
.doc .r{text-align:right} .doc .c{text-align:center}
.doc .lower{display:flex;justify-content:space-between;gap:28px;margin-bottom:26px}
.doc .words{max-width:46%}
.doc .sum{width:46%;font-size:11.5px}
.doc .sum div.row{display:flex;justify-content:space-between;padding:6px 9px}
.doc .sum div.row.big{background:var(--acc);color:#fff;font-weight:700}
.doc .sum div.row.sep{border-top:1px solid #e0e0e0}
.doc .foot{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.doc .sig{text-align:center;min-width:210px}
.doc .sig img{height:52px;object-fit:contain;margin:6px 0 2px}
.doc .sig .who{font-weight:700;font-size:11.5px;margin-top:4px}
.zoomrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}


/* ---------- invoice templates ---------- */
.doc .body{display:block}

/* Modern Band ---------------------------------------------------------- */
.doc.tpl-band{padding:0}
.doc.tpl-band .body{padding:26px 40px 38px}
.doc.tpl-band .band{background:var(--acc);color:#fff;padding:26px 40px 22px}
.doc.tpl-band .band .bandtop{display:flex;justify-content:space-between;align-items:flex-start;gap:22px}
.doc.tpl-band .band .co{color:#fff;font-size:22px;margin-bottom:7px}
.doc.tpl-band .band .meta{color:rgba(255,255,255,.88)}
.doc.tpl-band .band img.lg{width:62px;height:62px;object-fit:contain;background:#fff;padding:5px;border:0;border-radius:8px;flex:none}
.doc.tpl-band .band .ttl{text-align:left;color:#fff;font-size:23px;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 0}
.doc.tpl-band table.it th{background:transparent;color:var(--acc);border-bottom:2px solid var(--acc)}
.doc.tpl-band table.it tbody tr:nth-child(odd) td{background:#f7f8fb}
.doc.tpl-band table.it tr.tot td{background:#eef0f6}

/* Minimal Mono --------------------------------------------------------- */
.doc.tpl-mono .co{font-size:17px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.doc.tpl-mono .ttl{text-align:left;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#111;font-weight:600;margin:18px 0 22px;padding-bottom:9px;border-bottom:2px solid #111}
.doc.tpl-mono .lb{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#666;font-weight:600}
.doc.tpl-mono table.it th{background:transparent;color:#111;border-bottom:1px solid #111;border-top:1px solid #111;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.doc.tpl-mono table.it td{border-bottom:1px solid #ededed}
.doc.tpl-mono table.it tr.tot td{background:transparent;border-top:1px solid #111}
.doc.tpl-mono .sum div.row.big{background:transparent;color:#111;border-top:2px solid #111;border-bottom:2px solid #111}
.doc.tpl-mono .hd img.lg{border:0}
.doc.tpl-mono hr{border-top-color:#111}

/* Corporate Blue ------------------------------------------------------- */
.doc.tpl-corp{padding-left:58px}
.doc.tpl-corp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--acc)}
.doc.tpl-corp .ttl{text-align:left;font-size:19px;letter-spacing:.04em}
.doc.tpl-corp .parties{gap:16px}
.doc.tpl-corp .parties .l,.doc.tpl-corp .parties .r{flex:1;border:1px solid #dfe3ea;border-top:3px solid var(--acc);padding:12px 14px;max-width:none}
.doc.tpl-corp .parties .r{text-align:right}
.doc.tpl-corp table.it tr.tot td{background:#eef3fa}

/* Compact Grid --------------------------------------------------------- */
.doc.tpl-grid{padding:30px 34px}
.doc.tpl-grid .hd{border:1px solid #333;padding:14px 16px}
.doc.tpl-grid hr{display:none}
.doc.tpl-grid .ttl{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#111;border:1px solid #333;border-top:0;padding:6px 0;margin:0 0 0}
.doc.tpl-grid .parties{gap:0;margin-bottom:0}
.doc.tpl-grid .parties .l,.doc.tpl-grid .parties .r{flex:1;border:1px solid #333;border-top:0;padding:10px 12px;max-width:none}
.doc.tpl-grid .parties .r{border-left:0;text-align:right}
.doc.tpl-grid table.it{margin-bottom:0;border:1px solid #333;border-top:0}
.doc.tpl-grid table.it th{background:#f0f0f0;color:#111;border:1px solid #333;border-top:0;padding:5px 6px;font-size:10px}
.doc.tpl-grid table.it td{border:1px solid #333;padding:5px 6px;font-size:10.5px}
.doc.tpl-grid table.it tr.tot td{background:#f6f6f6;border-top:1px solid #333}
.doc.tpl-grid .lower{margin:0 0 0;gap:0}
.doc.tpl-grid .words{max-width:none;flex:1;border:1px solid #333;border-top:0;border-right:0;padding:10px 12px}
.doc.tpl-grid .sum{width:46%;border:1px solid #333;border-top:0;padding:0}
.doc.tpl-grid .sum div.row{padding:5px 10px;border-bottom:1px solid #ddd}
.doc.tpl-grid .sum div.row.big{background:#f0f0f0;color:#111;border-top:1px solid #333;border-bottom:1px solid #333}
.doc.tpl-grid .foot{border:1px solid #333;border-top:0;padding:12px 14px}

/* Elegant Serif -------------------------------------------------------- */
.doc.tpl-serif{font-family:Georgia,'Times New Roman',serif;padding:44px 46px}
.doc.tpl-serif .hd{display:block;text-align:center}
.doc.tpl-serif .hd img.lg{width:58px;height:58px;border:0;margin:0 auto 10px;display:block}
.doc.tpl-serif .co{font-size:24px;letter-spacing:.02em;font-weight:400}
.doc.tpl-serif .meta{text-align:center}
.doc.tpl-serif hr{border-top:1px solid var(--acc);margin-top:18px}
.doc.tpl-serif .ttl{font-style:italic;font-weight:400;letter-spacing:.06em;font-size:21px}
.doc.tpl-serif table.it th{background:transparent;color:var(--acc);border-bottom:1px solid var(--acc);border-top:1px solid var(--acc);font-style:italic;font-weight:400;font-size:11.5px}
.doc.tpl-serif table.it td{border-bottom:1px solid #eee}
.doc.tpl-serif table.it tr.tot td{background:transparent;border-top:1px solid var(--acc)}
.doc.tpl-serif .sum div.row.big{background:transparent;color:var(--acc);border-top:1px solid var(--acc);border-bottom:1px solid var(--acc)}
.doc.tpl-serif .lb{font-style:italic;font-weight:400;color:var(--acc)}


/* Shared shapes ---------------------------------------------------------
   The composed designs are built from these rather than each having a block
   of its own. Every rule reads its colour from --acc, which the document sets
   inline, so a new design is an accent plus a list of shapes. */
.doc.sh-band{padding:0}
.doc.sh-band .body{padding:26px 40px 38px}
.doc.sh-band .band{background:var(--acc);color:#fff;padding:26px 40px 22px}
.doc.sh-band .band .bandtop{display:flex;justify-content:space-between;align-items:flex-start;gap:22px}
.doc.sh-band .band .co{color:#fff;font-size:22px;margin-bottom:7px}
.doc.sh-band .band .meta{color:rgba(255,255,255,.9)}
.doc.sh-band .band img.lg{width:62px;height:62px;object-fit:contain;background:#fff;padding:5px;border:0;border-radius:8px;flex:none}
.doc.sh-band .band .ttl{text-align:left;color:#fff;font-size:23px;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 0}

.doc.sh-center .hd{display:block;text-align:center}
.doc.sh-center .hd img.lg{width:56px;height:56px;border:0;margin:0 auto 10px;display:block}
.doc.sh-center .meta{text-align:center}
.doc.sh-center hr{border-top:1px solid var(--acc);margin-top:16px}
.doc.sh-center .ttl{text-align:center}

.doc.sh-bar{padding-left:58px}
.doc.sh-bar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--acc)}
.doc.sh-bar .ttl{text-align:left;font-size:19px;letter-spacing:.04em}

.doc.sh-panel .parties{gap:16px}
.doc.sh-panel .parties .l,.doc.sh-panel .parties .r{flex:1;border:1px solid #dfe3ea;border-top:3px solid var(--acc);padding:12px 14px;max-width:none}
.doc.sh-panel .parties .r{text-align:right}

.doc.sh-fill table.it tr.tot td{background:color-mix(in srgb,var(--acc) 10%,#fff)}

.doc.sh-stripe table.it th{background:transparent;color:var(--acc);border-bottom:2px solid var(--acc)}
.doc.sh-stripe table.it tbody tr:nth-child(odd) td{background:#f7f8fb}
.doc.sh-stripe table.it tr.tot td{background:#eef0f6}

.doc.sh-rule table.it th{background:transparent;color:var(--acc);border-top:1px solid var(--acc);border-bottom:1px solid var(--acc)}
.doc.sh-rule table.it td{border-bottom:1px solid #ededed}
.doc.sh-rule table.it tr.tot td{background:transparent;border-top:1px solid var(--acc)}
.doc.sh-rule .sum div.row.big{background:transparent;color:var(--acc);border-top:1px solid var(--acc);border-bottom:1px solid var(--acc)}
.doc.sh-rule hr{border-top-color:var(--acc)}

.doc.sh-caps .co{letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.doc.sh-caps .lb{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.doc.sh-caps .ttl{letter-spacing:.2em;text-transform:uppercase}

.doc.sh-serif{font-family:Georgia,'Times New Roman',serif}
.doc.sh-serif .co{font-weight:400;letter-spacing:.02em}
.doc.sh-serif .ttl{font-style:italic;font-weight:400;letter-spacing:.06em}
.doc.sh-serif table.it th{font-style:italic;font-weight:400}
.doc.sh-serif .lb{font-style:italic;font-weight:400;color:var(--acc)}

.doc.sh-grid{padding:30px 34px}
.doc.sh-grid .hd{border:1px solid var(--acc);padding:14px 16px}
.doc.sh-grid hr{display:none}
.doc.sh-grid .ttl{font-size:15px;border:1px solid var(--acc);border-top:0;padding:6px 0;margin:0;color:var(--acc)}
.doc.sh-grid .parties{gap:0;margin-bottom:0}
.doc.sh-grid .parties .l,.doc.sh-grid .parties .r{flex:1;border:1px solid var(--acc);border-top:0;padding:10px 12px;max-width:none}
.doc.sh-grid .parties .r{border-left:0;text-align:right}
.doc.sh-grid table.it{margin-bottom:0;border:1px solid var(--acc);border-top:0}
.doc.sh-grid table.it th{background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);border:1px solid var(--acc);border-top:0;padding:5px 6px;font-size:10px}
.doc.sh-grid table.it td{border:1px solid var(--acc);padding:5px 6px;font-size:10.5px}
.doc.sh-grid table.it tr.tot td{background:color-mix(in srgb,var(--acc) 8%,#fff)}
.doc.sh-grid .lower{margin:0;gap:0}
.doc.sh-grid .words{max-width:none;flex:1;border:1px solid var(--acc);border-top:0;border-right:0;padding:10px 12px}
.doc.sh-grid .sum{width:46%;border:1px solid var(--acc);border-top:0;padding:0}
.doc.sh-grid .sum div.row{padding:5px 10px;border-bottom:1px solid #ddd}
.doc.sh-grid .sum div.row.big{background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);border-top:1px solid var(--acc);border-bottom:1px solid var(--acc)}
.doc.sh-grid .foot{border:1px solid var(--acc);border-top:0;padding:12px 14px}
.doc.sh-grid.sh-band .band{margin-bottom:0}

/* Designs gallery ------------------------------------------------------ */
/* Four across, and each thumbnail the shape of the page it stands for.
   The aspect-ratio is what makes a wall of these readable: a design is
   recognised by its proportions long before its details are legible. */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}
.gcard{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;transition:.15s;position:relative}
.gcard:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.gcard.on{border-color:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 45%,transparent)}
.gcard.picked{border-color:var(--brand-d);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-d) 40%,transparent)}
.gcard.locked .gthumb{filter:grayscale(.55);opacity:.62}
.gthumb{aspect-ratio:210/297;overflow:hidden;background:#fff;border-bottom:1px solid var(--line);
  position:relative;cursor:zoom-in}
.gthumb .doc{transform-origin:top left;pointer-events:none;box-shadow:none;border-radius:0}
.gmeta{padding:10px 12px}
.gmeta b{display:block;font-size:13px;margin-bottom:2px}
.gmeta span{font-size:11.5px;color:var(--ink-3);line-height:1.45;display:block}
.gpick{display:flex;align-items:center;gap:7px;padding:9px 12px 11px;border-top:1px solid var(--line);
  font-size:12.5px;flex-wrap:wrap}
.gpick label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.gpick .btn{margin-left:auto;padding:4px 10px;font-size:12px}
.gbadge{position:absolute;top:9px;right:9px;z-index:2;background:var(--ok);color:#fff;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:99px;letter-spacing:.03em}
.glock{position:absolute;top:9px;left:9px;z-index:2;background:var(--ink);color:var(--card);font-size:10px;
  font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.03em}

/* Full-screen preview */
.gview{position:fixed;inset:0;z-index:99998;background:rgba(12,14,24,.72);
  padding:64px 26px 26px;overflow:auto;cursor:zoom-out}
/* Centred with auto margins rather than by flex alignment: a flex item taller
   than its container gets centred by pushing its own top off the top of the
   scroll area, which put the head of the invoice permanently out of reach the
   moment anybody zoomed in. */
.gview .sheet{background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform-origin:top center;cursor:default;margin:0 auto}
.gview .gbar{position:fixed;top:14px;right:14px;left:14px;display:flex;align-items:center;gap:10px;z-index:2}
.gview .gname{color:#fff;font-size:14px;font-weight:600;margin-right:auto;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.gview .gbtn{border:0;border-radius:9px;background:rgba(255,255,255,.94);color:#181b28;
  width:36px;height:36px;font-size:17px;line-height:1;cursor:pointer;font-weight:600}
.gview .gbtn.wide{width:auto;padding:0 13px;font-size:13px}
.gview .gbtn:disabled{opacity:.45;cursor:not-allowed}
.gview .gzoom{color:#fff;font-size:12.5px;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.tplbar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.tplbar select{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:13px}


/* ---------- companies ---------- */
.dirhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.dirhead h3{font-size:15px;margin-right:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ccard{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px;position:relative}
.ccard.on{border-color:var(--brand-d);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-d) 30%,transparent)}
.ccard h4{font-size:14.5px;margin-bottom:5px;padding-right:70px}
.ccard .cline{font-size:12.5px;color:var(--ink-2);line-height:1.6;white-space:pre-line}
.ccard .cgst{font-size:11.5px;color:var(--ink-3);margin-top:7px;font-variant-numeric:tabular-nums}
.ccard .cact{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.ccard .clogo{position:absolute;top:14px;right:14px;width:38px;height:38px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:#fff}
.ccard .cdef{position:absolute;top:14px;right:14px;background:var(--brand-d);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px}
.editor{border:1px solid var(--brand);border-radius:12px;background:var(--card);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.imgrow{display:flex;gap:16px;flex-wrap:wrap}
.imgbox{flex:1;min-width:190px}
.imgprev{height:86px;border:1px dashed var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;background:#fff;margin-bottom:8px;overflow:hidden}
.imgprev img{max-width:100%;max-height:78px;object-fit:contain}
.imgprev span{color:var(--ink-3);font-size:12px}
.emptydir{border:1px dashed var(--line);border-radius:12px;padding:30px 20px;text-align:center;color:var(--ink-3)}
.emptydir b{display:block;color:var(--ink-2);margin-bottom:5px;font-size:14px}
.partybox{border:1px solid var(--line);border-radius:10px;background:var(--brand-l);padding:11px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.6;white-space:pre-line;margin-top:9px}
/* ---------- print ---------- */
.notice{margin:0 20px 4px;padding:11px 14px;border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);color:var(--ink-2);font-size:13px;line-height:1.55}
.notice b{color:var(--ink)}
#printMount{display:none}
#orbin-print{display:none}
@media print{
  body{background:#fff}
  body.orbin-printing>*{display:none!important}
  body.orbin-printing>#orbin-print{display:block!important}
  #orbin-print .doc{width:auto;min-height:0;margin:0;box-shadow:none;transform:none!important}
  @page{size:A4;margin:12mm}
}

/* ==================================================================
   WordPress additions: theme reset, account screens, feedback
   ================================================================== */

/* Themes vary wildly, so the tool paints its own surface and resets the
   handful of inherited properties that break the layout. */
.orbin-ti-scope{color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.orbin-ti-scope *,.orbin-ti-scope *::before,.orbin-ti-scope *::after{box-sizing:border-box}
/* Only cap the width. Setting height:auto here would override the sized
   header and thumbnail images further up the stylesheet. */
.orbin-ti-scope img{max-width:100%}
.orbin-ti-scope button{font:inherit;cursor:pointer;text-transform:none;letter-spacing:normal}
.orbin-ti-scope input,.orbin-ti-scope select,.orbin-ti-scope textarea{font:inherit;color:inherit;max-width:100%}
.orbin-ti-scope h1,.orbin-ti-scope h2,.orbin-ti-scope h3,.orbin-ti-scope h4{margin:0;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.orbin-ti-scope p{margin:0}
.orbin-ti-scope a{box-shadow:none}
.orbin-noscript{max-width:620px;margin:56px auto;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--card)}


/* ---------------------------------------------------------- accounts */
.authwrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:36px 16px}
.authcard{width:100%;max-width:404px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px;box-shadow:var(--shadow)}
.authbrand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.authbrand img{height:30px;width:auto;max-width:150px;object-fit:contain;background:#fff;padding:3px 6px;border-radius:6px}
.authbrand b{display:block;font-size:14px}
.authbrand span{display:block;font-size:11.5px;color:var(--ink-3)}
.authcard h1{font-size:21px;margin-bottom:8px}
.authsub{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:20px}
.authcard .f{margin-top:16px}
.authcard .hint{font-size:12px;color:var(--ink-3);margin-top:6px}
.authcard .btn.wide{width:100%;justify-content:center;margin-top:20px;padding:11px 16px}
.authcard .btn.ghost.wide{margin-top:8px}
.authcard .code{text-align:center;font-size:26px;letter-spacing:.34em;font-weight:600;padding:12px}
.authfoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-2);text-align:center}
.authfoot a{color:var(--brand-d);text-decoration:none;font-weight:550}
.authfoot a:hover{text-decoration:underline}
.autherr{background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);
  color:var(--ink);border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:4px}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:14px}
.remember input{width:auto;margin:0}

/* ---------------------------------------------------------- feedback */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink-2);padding:8px 14px;border-radius:99px;
  font-size:13px;font-weight:550;transition:.13s}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

/* ==================================================================
   Full width

   The tool takes the whole screen, while the theme's own header and
   footer stay where they are. Removing the max-width here is only half
   of it — goFullWidth() in the JS neutralises the theme's containers
   between this element and <body>, since their class names differ from
   theme to theme and cannot be targeted reliably.
   ================================================================== */
/*
 * `.wrap` carries `margin:0 auto` from the base stylesheet. Inside a flex
 * container that is not a harmless centring rule: an auto margin on the cross
 * axis cancels `align-items:stretch`, so the item shrink-wraps its contents
 * instead of filling the pane. On desktop that left every screen floating in
 * the middle of a half-empty pane; on a phone it was worse, because the
 * records table has `min-width:720px`, so the wrap sized itself to 720 and
 * pushed the whole page off the side of the screen.
 *
 * The pane is a plain block now, and the margins are stated rather than left
 * to inherit an "auto" that means something different here.
 */
.orbin-ti-scope .wrap{max-width:1760px;margin:0 auto;width:100%;padding:0 24px 64px}
@media (max-width:620px){ .orbin-ti-scope .wrap{padding-left:14px;padding-right:14px} }

/* ==================================================================
   App shell: sidebar + main pane

   The branding used to sit here — a logo and product name repeating what
   the site header already says, on the one row that also had to hold
   seven tabs. Moving navigation into a sidebar gives the tables the full
   width and the nav room to grow.
   ================================================================== */
.shell{display:flex;align-items:stretch;min-height:70vh}

.side{flex:none;width:212px;border-right:1px solid var(--line);background:var(--card);
  padding:16px 12px;align-self:stretch}
.nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:transparent;color:var(--ink-2);padding:9px 11px;border-radius:9px;font-size:14px;
  font-weight:500;transition:.12s}
.nav button .ico{flex:none;opacity:.75}
.nav button:hover{background:var(--line-2);color:var(--ink)}
.nav button[aria-selected="true"]{background:var(--brand-d);color:#fff;font-weight:600}
.nav button[aria-selected="true"] .ico{opacity:1}

.mainpane{flex:1;min-width:0;display:block}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:13px 24px;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:24px}
/* flex-grow, not just margin-right:auto. The scope's own `h1{margin:0}` reset
   further up this file is more specific than a bare class, so an auto margin
   here would lose and the account chip would sit next to the heading instead
   of at the right-hand edge. */
.orbin-ti-scope .viewttl{flex:1 1 auto;min-width:0;margin:0 auto 0 0;
  font-size:17px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Narrow screens: the sidebar becomes a scrolling row across the top, so
   every section stays one tap away rather than behind a menu button. */
@media (max-width:900px){
  .shell{display:block}
  .side{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 0;background:var(--bg)}
  .nav{position:static;flex-direction:row;gap:6px;overflow-x:auto;padding:2px 14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav button{width:auto;flex:none;white-space:nowrap;padding:8px 13px;border-radius:99px;
    border:1px solid var(--line);background:var(--card);font-size:13.5px}
  .nav button .ico{display:none}
  .topbar{padding:11px 14px;margin-bottom:18px}
  .viewttl{font-size:16px}
}

/* ==================================================================
   The WordPress page heading

   The theme prints the page title above the shortcode, so the tool sat
   under a large "Tax Invoice" that duplicated its own top bar. The title
   is filtered out in PHP; these rules catch block themes that render it
   through a block rather than the_title().
   ================================================================== */
body.orbin-ti-page .entry-title,
body.orbin-ti-page .page-title,
body.orbin-ti-page .wp-block-post-title,
body.orbin-ti-page .entry-header .entry-title{display:none}

/* ==================================================================
   Password reveal
   ================================================================== */
.pw{position:relative;display:block}
.pw .in{padding-right:44px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;align-items:center;
  justify-content:center;width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--ink-3);
  border-radius:8px;transition:.13s}
.pw-eye:hover{color:var(--ink);background:var(--line-2)}
.pw-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pw-eye[aria-pressed="true"]{color:var(--brand-d)}

/* ==================================================================
   Account menu
   ================================================================== */
.sync{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);padding:5px 9px 5px 5px;border-radius:99px;font-size:13px;font-weight:550;transition:.13s;
  max-width:230px}
.acct-btn:hover{border-color:var(--brand)}
.acct-btn[aria-expanded="true"]{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.avatar{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-d);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.02em}
.acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-btn .caret{flex:none;color:var(--ink-3)}
@media (max-width:620px){.acct-name,.acct-btn .caret{display:none}.acct-btn{padding:4px;border-color:transparent}}

/* display:flex below beats the browser's own [hidden]{display:none}, so the
   closed menu would sit invisibly over the header and swallow every click on
   the tabs beneath it. Restate it. */
.acct-menu[hidden]{display:none}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:236px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(20,23,38,.16);padding:6px;
  display:flex;flex-direction:column}
.acct-head{padding:10px 11px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px;min-width:0}
.acct-head b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-head span{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
  padding:9px 11px;border-radius:8px;font-size:13.5px;font-weight:500;text-decoration:none;transition:.11s}
.acct-item:hover{background:var(--line-2);color:var(--ink)}
.acct-item.danger{color:var(--ink-2)}
.acct-item.danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}

/* ==================================================================
   Profile and settings
   ================================================================== */
.acctgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;max-width:920px}
.acctgrid .secttl{font-size:17px;margin-bottom:6px}
.acctgrid .in:disabled{background:var(--line-2);color:var(--ink-3);cursor:not-allowed}
.acctrow{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.okmsg{font-size:13px;font-weight:600;color:var(--ok)}


/* ==================================================================
   Tables on small screens

   The wrapper scrolls sideways, which is what makes a wide table usable at
   all on a phone — but only if the cells stop trying to fit. Dates were
   wrapping onto three lines to avoid scrolling that was already available.
   ================================================================== */
.orbin-ti-scope table.data td,
.orbin-ti-scope table.data th{white-space:nowrap}
.orbin-ti-scope table.data td.wrapcell{white-space:normal;min-width:150px}

/* Records on a phone: taxable value and GST come off the row. Both are
   visible the moment you open the invoice, and dropping them brings the
   Total, the Balance and the Open button into view without swiping —
   which is what someone reaching for their phone is actually after. */
@media (max-width:700px){
  .orbin-ti-scope table.data.recs{min-width:0}
  .orbin-ti-scope table.data.recs th:nth-child(4),
  .orbin-ti-scope table.data.recs td:nth-child(4),
  .orbin-ti-scope table.data.recs th:nth-child(5),
  .orbin-ti-scope table.data.recs td:nth-child(5){display:none}
  .orbin-ti-scope table.data.recs td,
  .orbin-ti-scope table.data.recs th{padding-left:8px;padding-right:8px;font-size:12.5px}
}

/* A table you can scroll should look like one. */
.orbin-ti-scope .tblwrap{position:relative}
@media (max-width:900px){
  .orbin-ti-scope .tblwrap{
    background:
      linear-gradient(to right,var(--card) 30%,transparent) left / 26px 100% no-repeat,
      linear-gradient(to left,var(--card) 30%,transparent) right / 26px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(20,23,38,.13),transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(20,23,38,.13),transparent) right / 12px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
}

/* ==================================================================
   Sizing to the space we actually get, not to the window

   Every breakpoint above is a media query, which asks how wide the
   browser window is. That is the wrong question here. This tool lives
   inside whatever column a WordPress theme hands it, and those two
   numbers can disagree wildly: a 1900px monitor showing a theme whose
   content column is 700px wide got the full desktop layout — sidebar,
   two-column form, five-across item rows — crammed into 700px, with
   labels wrapping onto three lines.

   Container queries ask the right question: how wide is *this element*.
   Everything below re-states the layout in those terms and, coming later
   in the file, wins wherever the browser supports it. The media queries
   above stay as the fallback for anything that does not.
   ================================================================== */
.orbin-ti-scope{container-type:inline-size;container-name:orbin}

/* ---- narrow: the tool has less room than a tablet ---- */
@container orbin (max-width: 900px){
  /* The sidebar folds away entirely; the menu button in the top bar takes
     over. A scrolling row of pills was reachable but never showed all seven
     sections at once, and the ones off the right-hand edge went unnoticed. */
  .orbin-ti-scope .shell{display:block}
  .orbin-ti-scope .side{display:none}
  .orbin-ti-scope .topbar{padding:9px 14px;margin-bottom:18px;gap:10px}
  .orbin-ti-scope .viewttl{font-size:16px}
}
@container orbin (min-width: 901px){
  .orbin-ti-scope .shell{display:flex}
  .orbin-ti-scope .burger{display:none}
  .orbin-ti-scope .side{display:block;width:212px;border-right:1px solid var(--line);border-bottom:0;padding:16px 12px;background:var(--card)}
  .orbin-ti-scope .nav{position:sticky;top:12px;flex-direction:column;gap:2px;overflow:visible;padding:0}
  .orbin-ti-scope .nav button{width:100%;white-space:normal;padding:9px 11px;border-radius:9px;border:0;
    background:transparent;font-size:14px}
  .orbin-ti-scope .nav button .ico{display:block}
  .orbin-ti-scope .nav button[aria-selected="true"]{background:var(--brand-d);color:#fff}
}

/* ---- the invoice form and its preview ---- */
@container orbin (max-width: 1080px){
  .orbin-ti-scope .split{grid-template-columns:minmax(0,1fr)}
  .orbin-ti-scope .docpane{position:static}
}
@container orbin (min-width: 1081px){
  .orbin-ti-scope .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
}
@container orbin (min-width: 1400px){
  .orbin-ti-scope .split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px}
}

/* ---- item rows ---- */
@container orbin (max-width: 620px){
  .orbin-ti-scope .irow{grid-template-columns:1fr 1fr}
  .orbin-ti-scope .irow .rm{grid-column:1/-1;padding:0 14px}
}
@container orbin (min-width: 621px) and (max-width: 899px){
  .orbin-ti-scope .irow{grid-template-columns:repeat(3,1fr) 40px}
  .orbin-ti-scope .irow .rm{grid-column:auto}
}
@container orbin (min-width: 900px){
  .orbin-ti-scope .irow{grid-template-columns:1.25fr .7fr .8fr 1.15fr .85fr 40px}
  .orbin-ti-scope .irow .rm{grid-column:auto}
}

/* ---- paired and tripled fields ---- */
@container orbin (max-width: 560px){ .f2,.f3{grid-template-columns:1fr} }
@container orbin (min-width: 561px){
  .orbin-ti-scope .f2{grid-template-columns:1fr 1fr}
  .orbin-ti-scope .f3{grid-template-columns:1fr 1fr 1fr}
}

/* ---- summary tiles: 2, 4, then 8 across ---- */
@container orbin (max-width: 759px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container orbin (min-width: 760px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@container orbin (min-width: 1500px){ .stats{grid-template-columns:repeat(8,minmax(0,1fr))} }

/* ---- card grids ---- */
@container orbin (max-width: 700px){
  .orbin-ti-scope .cards,.orbin-ti-scope .acctgrid{grid-template-columns:minmax(0,1fr)}
  .orbin-ti-scope .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container orbin (min-width: 701px){
  .orbin-ti-scope .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .orbin-ti-scope .acctgrid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
}
@container orbin (min-width: 1500px){
  .orbin-ti-scope .cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}

/* ---- padding and the account chip ---- */
@container orbin (max-width: 620px){
  .orbin-ti-scope .wrap{padding-left:14px;padding-right:14px}
  .orbin-ti-scope .acct-name,.orbin-ti-scope .acct-btn .caret{display:none}
  .orbin-ti-scope .acct-btn{padding:4px;border-color:transparent}
}
@container orbin (min-width: 621px){
  .orbin-ti-scope .acct-name{display:block}
  .orbin-ti-scope .acct-btn .caret{display:block}
}

/* ---- records table: drop the two derived columns when tight ---- */
@container orbin (max-width: 700px){
  .orbin-ti-scope table.data.recs{min-width:0}
  table.data.recs th:nth-child(4),table.data.recs td:nth-child(4),
  .orbin-ti-scope table.data.recs th:nth-child(5),.orbin-ti-scope table.data.recs td:nth-child(5){display:none}
  .orbin-ti-scope table.data.recs td,.orbin-ti-scope table.data.recs th{padding-left:8px;padding-right:8px;font-size:12.5px}
}


/* ==================================================================
   Menu button and panel

   Only rendered as visible below the sidebar breakpoint. The panel is
   anchored to the top bar rather than the page, so it opens directly
   under the button that summoned it whatever the tool is nested inside.
   ================================================================== */
.orbin-ti-scope .burger{display:none;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;padding:0;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:10px;transition:.13s}
.orbin-ti-scope .burger:hover{border-color:var(--brand);color:var(--brand-d)}
.orbin-ti-scope .burger:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.orbin-ti-scope .burger[aria-expanded="true"]{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

.orbin-ti-scope .navsheet[hidden]{display:none}
.orbin-ti-scope .navsheet{position:absolute;left:10px;right:10px;top:calc(100% + 6px);z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:7px;
  box-shadow:0 14px 40px rgba(20,23,38,.18);display:flex;flex-direction:column;gap:2px;
  max-height:70vh;overflow-y:auto}
.orbin-ti-scope .navsheet button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:transparent;color:var(--ink-2);padding:11px 12px;border-radius:9px;
  font-size:15px;font-weight:500;transition:.11s}
.orbin-ti-scope .navsheet button .ico{flex:none;opacity:.75;display:block}
.orbin-ti-scope .navsheet button:hover{background:var(--line-2);color:var(--ink)}
.orbin-ti-scope .navsheet button[aria-selected="true"]{
  background:var(--brand-d);color:#fff;font-weight:600}
.orbin-ti-scope .navsheet button[aria-selected="true"] .ico{opacity:1}

/* The panel is positioned against the top bar. `position:sticky` already
   makes that a containing block for absolute children, so no extra rule is
   needed — but the bar has to sit above the content it overlaps. */
.orbin-ti-scope .topbar{z-index:50}

/* Last word on the panel: once there is a sidebar again, it must not linger
   over it. Stated here, after the base styles, so order settles it rather
   than a specificity trick. */
@container orbin (min-width: 901px){
  .orbin-ti-scope .navsheet{display:none}
}

/* And the button that opens it. Both of these live after the base styles
   on purpose: the base rule sets `display:none`, and at equal specificity
   the later rule wins, so a "show it" rule written earlier in the file
   would never take effect. That has now caught me twice in this stylesheet;
   the layout switches all live down here for that reason. */
@container orbin (max-width: 900px){
  .orbin-ti-scope .burger{display:inline-flex}
}

/* ==================================================================
   Full-bleed fallback

   Used only when measuring failed to free the tool from its column.
   See goFullWidth() for why both methods exist.
   ================================================================== */
body.orbin-ti-page{overflow-x:clip}
.orbin-ti-scope.orbin-bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ==================================================================
   Item rows

   Five inputs and a delete. The delete used to be a 40px column holding a
   grey ×; it is now a small red bin, which says what it does and gives
   the width back to Price/Unit — the field that was being cut off.
   ================================================================== */
.orbin-ti-scope .irow .rm{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:34px;padding:0;border:1px solid transparent;background:transparent;
  color:var(--ink-3);border-radius:8px;align-self:end;margin-bottom:1px;transition:.13s}
.orbin-ti-scope .irow .rm:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);
  background:color-mix(in srgb,var(--bad) 10%,transparent)}
.orbin-ti-scope .irow .rm:focus-visible{outline:2px solid var(--bad);outline-offset:1px}
.orbin-ti-scope .irow .in{min-width:0}

/* ==================================================================
   Records: the list beside the invoice
   ================================================================== */
.orbin-ti-scope .recsplit{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.orbin-ti-scope .recleft,.orbin-ti-scope .recright{min-width:0}
.orbin-ti-scope .recempty{text-align:center;padding:54px 24px}
.orbin-ti-scope .recempty h3{font-size:16px;margin-bottom:8px}
.orbin-ti-scope .recempty .muted{max-width:340px;margin:0 auto;line-height:1.6}
.orbin-ti-scope table.data tbody tr.on{background:var(--brand-l)}
.orbin-ti-scope table.data tbody tr.on td:first-child{box-shadow:inset 3px 0 0 var(--brand-d)}

/* ==================================================================
   Companies: my businesses beside my customers
   ================================================================== */
.orbin-ti-scope .compsplit{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.orbin-ti-scope .compcol{min-width:0}

/* ==================================================================
   Reports: one column, and no sideways scrolling to read it

   These tables are wide by nature — nine columns of tax breakdown. Given
   the room they now have, they fit; the firm column wraps rather than
   forcing the rest off the edge.
   ================================================================== */
.orbin-ti-scope table.data.rep{min-width:0}
.orbin-ti-scope table.data.rep td,.orbin-ti-scope table.data.rep th{padding:10px 9px}
.orbin-ti-scope table.data.rep td.wrapcell,
.orbin-ti-scope table.data.rep th.wrapcell{white-space:normal;min-width:130px}

/* ==================================================================
   Where each section becomes two columns

   Last in the file, deliberately: these are the layout switches, and at
   equal specificity the later rule wins. Every one of them turns on the
   tool's own width, so a narrow theme column gets the stacked layout even
   on a wide monitor, and a full-width tool gets the desktop one.
   ================================================================== */

/* Records: list left, the invoice you picked right. Needs more room than
   the others because the list itself is a seven-column table. */
@container orbin (min-width: 1180px){
  .orbin-ti-scope .recsplit{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
}
/* Below that, one pane at a time — the list, or the invoice you opened. */
@container orbin (max-width: 1179px){
  .orbin-ti-scope .recsplit.has-open .recleft{display:none}
}

/* Companies: businesses left, customers right. */
@container orbin (min-width: 1000px){
  .orbin-ti-scope .compsplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
}

/* Designs: a wall of A4 thumbnails, four across once there is room. The
   container query is what governs here rather than the viewport, because the
   tool sits inside a theme and its own width is what matters. */
@container orbin (min-width: 760px){
  .orbin-ti-scope .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container orbin (min-width: 1020px){
  .orbin-ti-scope .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Company cards sit inside a column now, so they need less width each. */
@container orbin (min-width: 1000px){
  .orbin-ti-scope .cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* Item rows size to the form column they sit in, not to the whole tool.
   On a wide screen the form is only half the width — asking the tool would
   have said "plenty of room" and wrapped Price/Unit onto a second line,
   which is exactly the bug this replaces. */
.orbin-ti-scope .items{container-type:inline-size;container-name:items}

/* Price/Unit gets the most room, Qty the least — weighted by what is
   actually typed into them. */
@container items (min-width: 560px){
  .orbin-ti-scope .irow{grid-template-columns:1.15fr .62fr .9fr 1.25fr .86fr 30px;gap:9px}
  .orbin-ti-scope .irow .rm{grid-column:auto}
}
@container items (min-width: 400px) and (max-width: 559px){
  .orbin-ti-scope .irow{grid-template-columns:1fr 1fr 1fr 30px;gap:9px}
  .orbin-ti-scope .irow .rm{grid-column:auto}
}
@container items (max-width: 399px){
  .orbin-ti-scope .irow{grid-template-columns:1fr 1fr 30px;gap:9px}
  .orbin-ti-scope .irow .rm{grid-column:auto}
}

/* ==================================================================
   The records list sizes to its own pane

   In the two-pane view the list gets roughly half the screen, which is
   narrower than the whole tool. Asking the tool's width would give the
   wrong answer, so the pane is made a container in its own right and the
   list asks that instead.

   Taxable and GST come off first: both are visible in the invoice shown
   alongside, and losing them keeps the Total, the Balance and the Open
   button on screen without scrolling.
   ================================================================== */
.orbin-ti-scope .recleft{container-type:inline-size;container-name:reclist}

@container reclist (max-width: 760px){
  .orbin-ti-scope table.data.recs{min-width:0}
  .orbin-ti-scope table.data.recs th:nth-child(4),
  .orbin-ti-scope table.data.recs td:nth-child(4),
  .orbin-ti-scope table.data.recs th:nth-child(5),
  .orbin-ti-scope table.data.recs td:nth-child(5){display:none}
  .orbin-ti-scope table.data.recs td,
  .orbin-ti-scope table.data.recs th{padding-left:9px;padding-right:9px}
}
@container reclist (max-width: 560px){
  .orbin-ti-scope table.data.recs th:nth-child(7),
  .orbin-ti-scope table.data.recs td:nth-child(7){display:none}
  .orbin-ti-scope table.data.recs td,
  .orbin-ti-scope table.data.recs th{font-size:12.5px}
}
/* The firm name is the one column worth wrapping rather than truncating. */
.orbin-ti-scope table.data.recs td.wrapcell{white-space:normal;min-width:120px}

/* ==================================================================
   Billing
   ================================================================== */
.orbin-ti-scope .billgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.orbin-ti-scope .billcol{min-width:0}

.orbin-ti-scope .planhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.orbin-ti-scope .chip-plan{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:99px;background:var(--line-2);color:var(--ink-2);border:1px solid var(--line)}
.orbin-ti-scope .chip-plan.on{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

.orbin-ti-scope .usewrap{margin-top:18px}
.orbin-ti-scope .userow{display:flex;justify-content:space-between;gap:12px;font-size:14px;
  font-variant-numeric:tabular-nums}
.orbin-ti-scope .userow.muted{font-size:13px;color:var(--ink-3);margin-top:8px}
.orbin-ti-scope .usebar{height:10px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:10px}
.orbin-ti-scope .usebar i{display:block;height:100%;background:var(--brand-d);border-radius:99px;transition:width .25s}
.orbin-ti-scope .usebar.full i{background:var(--bad)}

.orbin-ti-scope .billstop,
.orbin-ti-scope .billwarn{border-radius:10px;padding:12px 14px;margin-top:16px;font-size:13.5px;line-height:1.6}
.orbin-ti-scope .billstop{background:color-mix(in srgb,var(--bad) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);color:var(--ink)}
.orbin-ti-scope .billwarn{background:color-mix(in srgb,var(--warn,#b8860b) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn,#b8860b) 35%,transparent);color:var(--ink)}

/* The refusal notice on the invoice form itself. Sits above Save, where the
   press happened, and holds its ground until the form is saved or cleared. */
.orbin-ti-scope .quotabar{margin-top:26px;padding:14px 16px;border-radius:11px;
  background:color-mix(in srgb,var(--bad) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 34%,transparent);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.orbin-ti-scope .quotabar b{font-size:14px;color:var(--ink)}
.orbin-ti-scope .quotabar span{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

.orbin-ti-scope .upgrade .price{font-size:32px;font-weight:700;letter-spacing:-.02em;margin:14px 0 4px}
.orbin-ti-scope .upgrade .price span{font-size:14px;font-weight:500;color:var(--ink-3);margin-left:8px;letter-spacing:0}

.orbin-ti-scope .paybox{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap;align-items:flex-start}
.orbin-ti-scope .payqr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  width:190px;flex:none}
.orbin-ti-scope .payqr img{display:block;width:100%;border-radius:7px}
.orbin-ti-scope .payside{flex:1;min-width:170px}
.orbin-ti-scope .payside .kv{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.orbin-ti-scope .payside .kv span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.orbin-ti-scope .payside .kv b{font-size:15px}
.orbin-ti-scope .payside .upi{word-break:break-all}

.orbin-ti-scope .payways{margin-top:20px;border-top:1px solid var(--line-2);padding-top:18px}
/* .hint is styled only inside the sign-in card, so the payment form needs its
   own rule or the small print prints at full body size. */
.orbin-ti-scope .payways .hint{font-size:12px;color:var(--ink-3);margin-top:6px}
.orbin-ti-scope .waytabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.orbin-ti-scope .waytab{border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  padding:8px 14px;border-radius:99px;font-size:13.5px;font-weight:550;transition:.13s}
.orbin-ti-scope .waytab:hover{border-color:var(--brand)}
.orbin-ti-scope .waytab.on{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

.orbin-ti-scope .shotdrop{border:1.5px dashed var(--line);border-radius:11px;background:var(--brand-l);
  min-height:110px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:12px;transition:.13s;overflow:hidden}
.orbin-ti-scope .shotdrop:hover{border-color:var(--brand)}
.orbin-ti-scope .shotdrop:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.orbin-ti-scope .shotdrop span{font-size:13.5px;color:var(--ink-3)}
.orbin-ti-scope .shotdrop img{max-height:210px;width:auto;border-radius:7px;display:block}

.orbin-ti-scope .waynote{background:var(--brand-l);border-radius:11px;padding:16px 18px;margin-top:16px}
.orbin-ti-scope .waynote p{font-size:14px;line-height:1.6;margin:0 0 10px}
.orbin-ti-scope .waynote ul{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.75;color:var(--ink-2)}

.orbin-ti-scope .billpend,
.orbin-ti-scope .billrej{border-radius:11px;padding:15px 17px;margin-top:20px;display:flex;
  flex-direction:column;gap:6px;font-size:13.5px;line-height:1.6}
.orbin-ti-scope .billpend{background:var(--brand-l);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.orbin-ti-scope .billrej{background:color-mix(in srgb,var(--bad) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 32%,transparent)}
.orbin-ti-scope .billpend b,.orbin-ti-scope .billrej b{font-size:14.5px}
.orbin-ti-scope .billpend span,.orbin-ti-scope .billrej span{color:var(--ink-2)}

/* The quota hint in the sidebar, once someone is running low. */
.orbin-ti-scope .navquota{margin-top:14px;padding:11px 12px;border-radius:9px;background:var(--brand-l);
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.orbin-ti-scope .navquota b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.orbin-ti-scope .navquota.out{background:color-mix(in srgb,var(--bad) 9%,transparent);
  border-color:color-mix(in srgb,var(--bad) 32%,transparent)}

@container orbin (min-width: 1100px){
  .orbin-ti-scope .billgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
}


/* ==================================================================
   Challans
   ================================================================== */

/* One item on a challan being written. Five things across: the number, the
   name, its unit, the quantity to send, and a way to take it off. The name
   takes whatever is left, because that is the part people read. */
.orbin-ti-scope .chitems{margin-top:6px;border-top:1px solid var(--line-2)}
.orbin-ti-scope .chrow{display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--line-2)}
.orbin-ti-scope .chrow .chn{width:26px;flex:none;color:var(--ink-3);font-size:12.5px;
  font-variant-numeric:tabular-nums;text-align:right}
.orbin-ti-scope .chrow .chname{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.4;
  overflow-wrap:anywhere}
.orbin-ti-scope .chrow .chunit{flex:none;width:66px;font-size:12px;color:var(--ink-3);
  text-align:center;text-transform:uppercase;letter-spacing:.03em}
.orbin-ti-scope .chrow .chqty{flex:none;width:84px;text-align:right;font-variant-numeric:tabular-nums}
.orbin-ti-scope .chrow .binbtn{flex:none}

/* The Add item picker. A dialog rather than an inline list because the
   catalogue can run to sixty rows, and choosing from sixty things while the
   challan scrolls underneath is worse than covering it. */
.orbin-ti-scope .pickwrap,.pickwrap{position:fixed;inset:0;z-index:9999;background:rgba(17,18,28,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.pickwrap *{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.pickwrap .pickcard{background:var(--card,#fff);color:var(--ink,#15161f);border-radius:16px;
  width:100%;max-width:620px;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(10,12,24,.34)}
.pickwrap .pickhead{display:flex;align-items:center;gap:10px;padding:18px 20px 12px}
.pickwrap .pickhead h2{margin:0;font-size:17px;font-weight:650;margin-right:auto}
.pickwrap .pickx{background:none;border:0;color:var(--ink-3,#6b7086);cursor:pointer;padding:4px;
  border-radius:8px;display:flex}
.pickwrap .pickx:hover{background:var(--line-2,#eef0f6);color:var(--ink,#15161f)}
.pickwrap .picktop{display:flex;gap:12px;align-items:center;padding:0 20px 12px;flex-wrap:wrap}
.pickwrap .pickall{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap}
.pickwrap .picktop .in{flex:1;min-width:150px}
.pickwrap .picklist{overflow:auto;border-top:1px solid var(--line-2,#eef0f6);
  border-bottom:1px solid var(--line-2,#eef0f6);padding:4px 0}
.pickwrap .pickrow{display:flex;align-items:center;gap:12px;padding:9px 20px;cursor:pointer;font-size:13.5px}
.pickwrap .pickrow:hover{background:var(--brand-l,#f2f1fc)}
.pickwrap .pkname{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.pickwrap .pkunit{flex:none;width:64px;font-size:11.5px;color:var(--ink-3,#6b7086);text-transform:uppercase;
  letter-spacing:.03em;text-align:center}
.pickwrap .pkqty{flex:none;width:56px;font-size:12px;color:var(--ink-3,#6b7086);text-align:right;
  font-variant-numeric:tabular-nums}
.pickwrap .pickfoot{display:flex;align-items:center;gap:10px;padding:14px 20px}
.pickwrap .pickfoot .muted{margin-right:auto;font-size:13px;color:var(--ink-3,#6b7086)}

/* The header strip above a saved challan. */
.orbin-ti-scope .chmeta{display:flex;flex-wrap:wrap;gap:22px 34px}
.orbin-ti-scope .chmeta > div{display:flex;flex-direction:column;gap:3px}
.orbin-ti-scope .chmeta span{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.orbin-ti-scope .chmeta b{font-size:14.5px}

/* The bill kept against a challan. */
.orbin-ti-scope .billbox{margin-top:20px}
.orbin-ti-scope .bbhead h3{font-size:15px;margin-bottom:10px}
.orbin-ti-scope .billfile{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--brand-l);flex-wrap:wrap}
.orbin-ti-scope .bfico{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  background:var(--brand-d);color:#fff;border-radius:6px;padding:5px 7px}
.orbin-ti-scope .bfname{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.orbin-ti-scope .bfmeta{flex:none;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---- records: the type filter and its pills ---- */
.orbin-ti-scope .recfilter{display:flex;gap:6px;padding:0 16px 12px;flex-wrap:wrap}
.orbin-ti-scope .rfbtn{border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.orbin-ti-scope .rfbtn:hover{border-color:var(--brand-d);color:var(--ink)}
.orbin-ti-scope .rfbtn.on{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.orbin-ti-scope .rfbtn .rfn{font-size:11.5px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums}

.orbin-ti-scope .tpill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
  border-radius:99px;padding:2px 8px;white-space:nowrap}
.orbin-ti-scope .tpill.invoice{background:var(--brand-l);color:var(--brand-d)}
.orbin-ti-scope .tpill.challan{background:color-mix(in srgb,var(--ok,#1f8a52) 13%,transparent);
  color:var(--ok,#1f8a52)}

/* ---- billing: two allowances, drawn alike ---- */
.orbin-ti-scope .meters{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.orbin-ti-scope .meter .userow b.out{color:var(--bad)}

/* ---- the challan document ---- */
.doc table.it.chal td,.doc table.it.chal th{padding:7px 8px}
.doc .chlower{display:block}
.doc .chlower .words{max-width:none}

/* ------------------------------------------------------- discount codes */
.orbin-ti-scope .promo{margin:18px 0 4px;padding:14px;border:1px dashed var(--line);border-radius:12px}
.orbin-ti-scope .promo.on{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-style:solid;border-color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}
.orbin-ti-scope .promo.on b{letter-spacing:.06em}
.orbin-ti-scope .promorow{display:flex;gap:8px;margin-top:6px}
.orbin-ti-scope .promorow .in{flex:1;text-transform:uppercase;letter-spacing:.08em}
.orbin-ti-scope .promoerr{margin-top:8px;font-size:13px;color:var(--bad);line-height:1.5}
.orbin-ti-scope .wasprice{color:var(--ink-3);font-weight:500;margin-right:8px;text-decoration-thickness:1.5px}

/* Payments not configured on this site yet. */
.orbin-ti-scope .paysetup{margin:18px 0 4px;padding:16px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg)}
.orbin-ti-scope .paysetup b{display:block;margin-bottom:6px}
.orbin-ti-scope .paysetup span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.6}

/* ------------------------------------------------- notices from the owner */
.orbin-ti-scope .notices{display:flex;flex-direction:column;gap:10px;
  padding:16px 26px 0;max-width:1180px;margin:0 auto;width:100%}
.orbin-ti-scope .notice{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.orbin-ti-scope .notice b{display:block;font-size:14px;margin-bottom:2px}
.orbin-ti-scope .notice span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.orbin-ti-scope .notice.good{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, var(--card))}
.orbin-ti-scope .notice.warn{border-color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, var(--card))}
.orbin-ti-scope .noticex{flex:none;border:0;background:none;cursor:pointer;font-size:20px;line-height:1;
  color:var(--ink-3);padding:0 2px}
.orbin-ti-scope .noticex:hover{color:var(--ink)}
@media (max-width:760px){.orbin-ti-scope .notices{padding:12px 16px 0}}

/* ----------------------------------------------------------- refer & earn */
.orbin-ti-scope .refgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  align-items:start;max-width:1100px}
.orbin-ti-scope .refhist{grid-column:1/-1}
.orbin-ti-scope .refbar{height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin:20px 0 10px}
.orbin-ti-scope .refbarin{height:100%;border-radius:99px;background:var(--brand);transition:width .35s ease}
.orbin-ti-scope .refprog b{font-size:15px}
.orbin-ti-scope .refprog span{color:var(--ink-2);font-size:13.5px;margin-left:8px}
.orbin-ti-scope .refstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.orbin-ti-scope .refstats b{display:block;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.orbin-ti-scope .refstats span{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.45;margin-top:4px}
.orbin-ti-scope .refcopy{display:flex;align-items:center;gap:10px;margin-top:6px}
.orbin-ti-scope .refcopy code{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);font-size:15px;letter-spacing:.1em;overflow-x:auto;white-space:nowrap}
.orbin-ti-scope .refcopy code.ln{font-size:12.5px;letter-spacing:0}
.orbin-ti-scope .tpill.confirmed{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.orbin-ti-scope .tpill.joined{background:color-mix(in srgb, var(--warn) 18%, transparent)}
.orbin-ti-scope .tpill.invited{background:var(--line)}

/* ------------------------------------------------------- closing an account */
.orbin-ti-scope .dangerzone{border-color:color-mix(in srgb, var(--bad) 35%, var(--line))}
.orbin-ti-scope .dangerzone .secttl{color:var(--bad)}
.orbin-ti-scope .btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.orbin-ti-scope .btn.danger:disabled{opacity:.5;cursor:not-allowed}
.modal{position:fixed;inset:0;z-index:99999;background:rgba(12,14,24,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal .modalcard{width:100%;max-width:440px;background:var(--card,#fff);color:var(--ink,#181b28);
  border-radius:16px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.32);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.modal .modalcard h2{font-size:19px;margin:0 0 6px}
.modal .dellist{margin:16px 0;padding:13px 15px;border-radius:11px;background:var(--bg,#f4f5f9)}
.modal .dellist b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3,#7d8298);margin-bottom:4px}
.modal .modalrow{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}