/* ============================================================
   04 — COMPONENTS
   ============================================================ */

/* ---------------------------- buttons ---------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:38px;padding:0 18px;border:1px solid var(--line);border-radius:999px;
  background:var(--glass);color:var(--text);font:500 13.5px/1 var(--ui);cursor:pointer;
  transition:border-color .16s,color .16s,transform .16s,box-shadow .16s,background .16s;
  white-space:nowrap;overflow:hidden;
}
.btn:hover{border-color:rgba(46,107,255,.55);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-primary,.btn-volt,.btn-brass{
  background:var(--spectrum);border-color:transparent;color:var(--void);font-weight:600;
  box-shadow:0 10px 34px -14px rgba(46,107,255,.9);
}
.btn-primary::after,.btn-volt::after,.btn-brass::after{
  content:"";position:absolute;top:0;bottom:0;width:44px;left:-60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .5s ease;
}
.btn-primary:hover::after,.btn-volt:hover::after,.btn-brass:hover::after{left:120%}
.btn-primary:hover,.btn-volt:hover,.btn-brass:hover{box-shadow:0 16px 44px -12px rgba(46,107,255,1)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--dim)}
.btn-ghost:hover{color:var(--text);border-color:var(--line)}
.btn-danger{background:transparent;border-color:rgba(255,90,110,.45);color:var(--rose)}
.btn-danger:hover{background:rgba(255,90,110,.12);border-color:var(--rose)}
.btn-lg{height:48px;padding:0 26px;font-size:15px}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btns.mt{margin-top:28px}

/* ---------------------------- fields ----------------------- */
.fld{display:block}
.fld > .lbl{margin-bottom:7px}
.fld input,.fld select,.fld textarea{
  width:100%;height:38px;padding:0 12px;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-sm);
  font:400 13px/1.3 var(--mono);transition:border-color .15s,box-shadow .15s,background .15s;
}
html[data-theme="day"] .fld input,html[data-theme="day"] .fld select{background:#fff}
.fld textarea{height:auto;padding:10px 12px}
.fld input:focus,.fld select:focus{border-color:var(--blue);box-shadow:var(--ring);outline:none}
.fld input::placeholder{color:var(--faint)}
.chk{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--blue);flex:0 0 auto}
.toggle{
  position:relative;width:40px;height:22px;border-radius:999px;flex:0 0 auto;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--line);transition:background .18s,border-color .18s;
}
.toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--faint);transition:transform .18s,background .18s;
}
.toggle[aria-checked="true"]{background:var(--spectrum);border-color:transparent}
.toggle[aria-checked="true"]::after{transform:translateX(18px);background:#fff}

/* ---------------------------- panels ----------------------- */
.panel-hd{
  display:flex;align-items:center;gap:12px;padding:0 var(--pad);height:46px;
  border-bottom:1px solid var(--line);
}
.panel-hd .act{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel-bd{padding:var(--pad)}
.panel-bd.flush{padding:0;overflow-x:auto}

/* ---------------------------- stats ------------------------ */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.stat{
  position:relative;padding:18px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  contain:layout;   /* layout only: paint containment would clip tooltips and popovers */
  display:block;min-width:0;overflow:hidden;transition:border-color .18s,transform .18s;
}
.stat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--spectrum);opacity:.5;
}
a.stat:hover{border-color:rgba(46,107,255,.45);transform:translateY(-2px)}
.stat .v{font:600 30px/1.05 var(--display);letter-spacing:-.04em;margin-top:12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.stat .d{font:400 11.5px/1 var(--mono);color:var(--faint);letter-spacing:0}
.stat svg{margin-top:10px}

/* ---------------------------- chips ------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;
}
.chip.buy{color:var(--mint);border-color:rgba(43,227,160,.42);background:rgba(43,227,160,.09)}
.chip.sell{color:var(--rose);border-color:rgba(255,90,110,.42);background:rgba(255,90,110,.09)}
.chip.close,.chip.modify{color:var(--cyan);border-color:rgba(34,224,255,.42);background:rgba(34,224,255,.09)}
.chip.cancel{color:var(--gold);border-color:rgba(255,201,60,.42);background:rgba(255,201,60,.09)}
.chip.grad{border-color:transparent;background:var(--spectrum-soft);color:var(--cyan)}
.status{display:inline-flex;align-items:center;gap:8px;font:400 12.5px/1 var(--mono);color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--faint)}
.dot.live{background:var(--mint);box-shadow:0 0 12px rgba(43,227,160,.8)}
.dot.idle{background:var(--gold)}
.dot.offline{background:var(--faint);opacity:.5}
.dot.halted{background:var(--rose);box-shadow:0 0 12px rgba(255,90,110,.8)}
.lat{
  font:500 11.5px/1 var(--mono);padding:4px 8px;border-radius:999px;
  border:1px solid rgba(46,107,255,.4);color:var(--cyan);display:inline-block;
}
.lat.warn{border-color:rgba(255,201,60,.45);color:var(--gold)}
.lat.bad{border-color:rgba(255,90,110,.45);color:var(--rose)}

/* ================= THE SPLIT — signature ==================== */
.split{position:relative;border-radius:var(--r);overflow:hidden}
.split-hd{
  display:flex;align-items:center;gap:12px;padding:0 var(--pad);height:48px;
  border-bottom:1px solid var(--line);
}
.split-scale{position:relative;height:30px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.split-scale i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.split-scale span{position:absolute;top:9px;font:400 10px/1 var(--mono);color:var(--faint);transform:translateX(4px);white-space:nowrap}
.split-rows{--barL:224px;--barR:108px}
.split-scale{--barL:224px;--barR:108px}
.split-row{
  display:grid;grid-template-columns:76px 130px 1fr 76px;align-items:center;
  height:34px;padding:0 var(--pad);border-bottom:1px solid var(--line-2);cursor:pointer;
  animation:rowin .18s cubic-bezier(.2,.7,.3,1);
}
.split-row:last-child{border-bottom:0}
.split-row:hover{background:rgba(46,107,255,.07)}
.split-row .sr-t{font:400 11px/1 var(--mono);color:var(--faint)}
.split-row .sr-s{font:400 11.5px/1 var(--mono);color:var(--text);display:flex;gap:8px;align-items:center;overflow:hidden}
.split-row .sr-ms{font:500 12px/1 var(--mono);text-align:right}
.split-bar{
  position:relative;height:16px;border-radius:999px;overflow:hidden;margin-right:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
}
.split-bar .seg{position:absolute;top:0;bottom:0}
.seg.s1{background:rgba(34,224,255,.4)}
.seg.s2{background:var(--cyan)}
.seg.s3{background:var(--blue)}
.seg.s4{background:var(--violet)}
.split-bar .mask{
  position:absolute;top:0;bottom:0;right:0;background:var(--deep);
  border-left:2px solid #fff;box-shadow:-6px 0 16px -2px rgba(255,255,255,.5);
}
html[data-theme="day"] .split-bar .mask{background:#fff;border-left-color:var(--blue);box-shadow:-6px 0 14px -3px rgba(35,82,224,.4)}
.split-bar.dead .seg{background:var(--rose);opacity:.5}
.split-bar.dead .mask{border-left-color:var(--rose);box-shadow:-6px 0 16px -2px rgba(255,90,110,.6)}
.split-row.dead .sr-ms{color:var(--rose)}
.split-legend{display:flex;gap:18px;flex-wrap:wrap;padding:12px var(--pad);border-top:1px solid var(--line)}
.split-legend span{font:400 11px/1 var(--mono);color:var(--dim);display:flex;align-items:center;gap:7px}
.split-legend i{width:14px;height:6px;border-radius:999px;display:block}
@keyframes rowin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------------------------- tickets ---------------------- */
.tape{font-family:var(--mono);font-size:12.5px}
.rc{
  position:relative;padding:11px var(--pad) 11px 20px;cursor:pointer;
  border-bottom:1px solid var(--line-2);animation:rowin .18s cubic-bezier(.2,.7,.3,1);
}
.rc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--faint)}
.rc.filled::before{background:var(--mint);box-shadow:0 0 14px rgba(43,227,160,.6)}
.rc.rejected::before{background:var(--rose);box-shadow:0 0 14px rgba(255,90,110,.6)}
.rc.expired::before{background:var(--gold)}
.rc.pending::before,.rc.dry::before{background:var(--blue)}
.rc:hover{background:rgba(255,255,255,.03)}
.rc:last-child{border-bottom:0}
.rc-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc-hd .t{color:var(--faint);font-size:11.5px}
.rc-hd .sym{color:var(--text);font-weight:500}
.rc-hd .lead-dots{flex:1;min-width:8px}
.rc-hd .st{font-weight:500;letter-spacing:.08em;font-size:11px}
.rc-hd .st.filled{color:var(--mint)}
.rc-hd .st.rejected{color:var(--rose)}
.rc-hd .st.expired{color:var(--gold)}
.rc-hd .st.pending,.rc-hd .st.dry{color:var(--cyan)}
.rc-bd{margin-top:9px;display:none;padding-left:14px;border-left:1px solid var(--line)}
.rc.open .rc-bd{display:block}
.rc-line{display:flex;gap:12px;align-items:baseline;padding:2px 0;font-size:12px}
.rc-line .k{color:var(--faint);min-width:112px;flex:0 0 auto}
.rc-line .lead-dots{display:none}
.rc-line .v{color:var(--text)}
.rc-line .v.fix{color:var(--cyan)}
.rc-block{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;font-family:var(--mono);font-size:12px;line-height:1.65;
  white-space:pre;overflow-x:auto;color:var(--text);
}
html[data-theme="day"] .rc-block{background:#F3F5FB}

/* ---------------------------- tables ----------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--glass)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:580px}
table.tbl th{
  position:sticky;top:0;z-index:2;text-align:left;
  font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:13px 16px;background:var(--lift);border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl th.r,table.tbl td.r{text-align:right}
table.tbl td{padding:0 16px;height:var(--row);border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover td{background:rgba(46,107,255,.07)}
table.tbl td.m,table.tbl td.r{font-family:var(--mono);font-variant-numeric:tabular-nums}
table.tbl.ref td:first-child{font-family:var(--mono);color:var(--cyan);white-space:nowrap;font-size:12.5px}
table.tbl.tall td{height:auto;padding:11px 16px;vertical-align:top}

/* ---------------------------- copy field ------------------- */
.copyfield{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:999px;padding:0 8px 0 16px;height:42px;
}
.copyfield.big{height:58px;padding-left:20px;border-radius:var(--r)}
.copyfield .val{flex:1;font-family:var(--mono);font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copyfield.big .val{font-size:16px}
.copyfield .val.masked{letter-spacing:.16em;color:var(--dim)}

/* ---------------------------- misc ------------------------- */
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:36px var(--pad);text-align:center}
.empty .mark{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;background:var(--spectrum-soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--cyan);font:500 15px/1 var(--mono)}
.empty p{color:var(--dim);margin:0 0 16px}

.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:var(--gap);flex-wrap:wrap}
.tabs button{
  background:none;border:1px solid transparent;border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0;
  color:var(--dim);cursor:pointer;font:500 13.5px/1 var(--ui);padding:12px 16px;
  display:flex;align-items:center;gap:9px;margin-bottom:-1px;position:relative;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);background:var(--glass);border-color:var(--line)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--spectrum)}
.tabs .cnt{font:400 11px/1 var(--mono);color:var(--faint)}

.note{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:var(--glass);padding:15px 17px 15px 19px;font-size:13.5px;margin:0 0 14px;overflow:hidden;
}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.note.warn::before{background:var(--gold)}
.note.bad::before{background:var(--rose)}
.note.good::before{background:var(--mint)}
.note b{display:block;margin-bottom:4px}
.note p:last-child{margin-bottom:0}

.pre{
  position:relative;background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 17px;font-family:var(--mono);font-size:12.5px;line-height:1.75;
  overflow-x:auto;white-space:pre;margin:0 0 14px;
}
html[data-theme="day"] .pre{background:#F3F5FB}
.pre .cm{color:var(--faint)}
.pre .p{color:var(--cyan)}
.copy-wrap{position:relative}
.copy-wrap > .btn{position:absolute;top:10px;right:10px}

.meter{height:6px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--spectrum);border-radius:999px}
.meter.hi i{background:linear-gradient(90deg,var(--gold),#FF9B3C)}
.meter.max i{background:linear-gradient(90deg,var(--rose),#FF8A5A)}
.flash-up{animation:fu .5s ease-out}
@keyframes fu{0%{color:var(--mint)}100%{color:inherit}}
.skel{background:rgba(255,255,255,.06);border-radius:var(--r-sm);position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:sweep2 1.3s infinite}
@keyframes sweep2{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{
  position:relative;padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  contain:layout;   /* layout only: paint containment would clip tooltips and popovers */
  transition:transform .2s,border-color .2s;
}
.plan:hover{transform:translateY(-3px);border-color:rgba(46,107,255,.4)}
.plan.pick{background:var(--spectrum-soft);border-color:transparent}
.plan .flag{
  position:absolute;top:-11px;left:24px;background:var(--spectrum);color:var(--void);
  font:600 10px/1 var(--mono);letter-spacing:.12em;padding:6px 11px;border-radius:999px;text-transform:uppercase;
}
.plan .price{font:700 42px/1 var(--display);letter-spacing:-.05em;margin:14px 0 4px}
.plan .price small{font-size:13px;color:var(--faint);font-weight:400;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:20px 0 0;font-size:13px;color:var(--dim)}
.plan li{padding:9px 0;border-top:1px solid var(--line-2);display:flex;gap:10px}
.plan li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);margin-top:7px;flex:0 0 auto}
.plan .btn{width:100%;margin-top:20px}

/* faq */
details.faq{
  border:1px solid var(--line);border-radius:var(--r);background:var(--glass);margin-bottom:10px;
  transition:border-color .18s;
}
details.faq[open]{border-color:rgba(46,107,255,.35)}
details.faq summary{cursor:pointer;padding:17px 20px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"";width:9px;height:9px;border-right:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);
  transform:rotate(45deg);transition:transform .2s;flex:0 0 auto;
}
details.faq[open] summary::after{transform:rotate(-135deg)}
details.faq .ans{padding:0 20px 18px;color:var(--dim)}

/* account cards */
.acct{padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);position:relative;overflow:hidden}
.acct.down{border-color:rgba(255,201,60,.35)}
.acct.down::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.acct-hd{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.acct-hd .who{font-weight:600;font-size:15px}
.acct dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12.5px}
.acct dt{color:var(--faint)}
.acct dd{margin:0;font-family:var(--mono);text-align:right}

/* builder output */
#alertOut{
  font-family:var(--mono);font-size:16px;line-height:1.7;padding:18px;
  word-break:break-all;white-space:pre-wrap;min-height:104px;
}
#alertOut .p{color:var(--cyan)}
#alertOut .k{color:var(--text)}
#alertOut .caret{display:inline-block;width:9px;height:17px;background:var(--cyan);vertical-align:-3px;animation:blink 1s steps(1) infinite;border-radius:1px}
@keyframes blink{50%{opacity:0}}
.errs{display:grid;gap:8px}
.err{border:1px solid rgba(255,90,110,.3);border-left:3px solid var(--rose);border-radius:var(--r-sm);background:var(--glass);padding:11px 14px;font-size:12.5px}
.okline{border:1px solid rgba(43,227,160,.3);border-left:3px solid var(--mint);border-radius:var(--r-sm);background:var(--glass);padding:11px 14px;font-size:12.5px}

/* palette, drawer, toasts */
.scrim{position:fixed;inset:0;background:rgba(2,4,10,.72);backdrop-filter:blur(6px);z-index:110;display:grid;place-items:start center;padding-top:12vh}
.modal{width:min(580px,92vw);background:var(--lift);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 40px 90px -40px #000;overflow:hidden}
.modal input.cmd{width:100%;height:52px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);font:400 15px/1 var(--mono);padding:0 20px}
.modal input.cmd:focus{outline:none}
.cmdlist{max-height:340px;overflow-y:auto}
.cmdlist a{display:flex;gap:12px;align-items:center;padding:12px 20px;color:var(--dim);font-size:13.5px}
.cmdlist a:hover,.cmdlist a.sel{background:rgba(46,107,255,.14);color:var(--text)}
.cmdlist a .k{margin-left:auto;font:400 11px/1 var(--mono);color:var(--faint)}
.drawer-scrim{position:fixed;inset:0;background:rgba(2,4,10,.66);backdrop-filter:blur(4px);z-index:100}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--lift);
  border-left:1px solid var(--line);z-index:101;overflow-y:auto;
  box-shadow:-40px 0 90px -50px #000;animation:slidein .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes slidein{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.drawer-hd{display:flex;align-items:center;gap:12px;padding:0 18px;height:60px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--lift);z-index:2}
.drawer-bd{padding:18px;display:grid;gap:18px}
.toasts{position:fixed;right:20px;bottom:20px;z-index:130;display:grid;gap:10px}
.toast{
  background:var(--lift);border:1px solid var(--line);border-left:3px solid var(--mint);
  border-radius:var(--r-sm);padding:13px 17px;font-size:13.5px;min-width:240px;
  box-shadow:0 24px 60px -30px #000;animation:rowin .18s ease-out;
}

/* ---------------------------- responsive ------------------- */
@media(max-width:1180px){
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .plans{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .split-rows,.split-scale{--barL:128px;--barR:88px}
  .split-row{grid-template-columns:62px 54px 1fr 62px;padding:0 12px}
  .split-row .sr-s{font-size:10.5px}
}
@media(max-width:768px){
  table.tbl.stackable{min-width:0}
  table.tbl.stackable thead{display:none}
  table.tbl.stackable tr{display:block;border-bottom:1px solid var(--line);padding:12px 16px}
  table.tbl.stackable tr:last-child{border-bottom:0}
  table.tbl.stackable td{display:flex;justify-content:space-between;gap:14px;height:auto;padding:4px 0;border:0;text-align:right}
  table.tbl.stackable td::before{
    content:attr(data-k);font:500 10.5px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--faint);text-align:left;
  }
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .plans{grid-template-columns:1fr}
  .rc-line{flex-direction:column;gap:0}
  .rc-line .k{min-width:0}
}
@media(max-width:380px){.stats{grid-template-columns:1fr}}