:root{
  --paper:#FFFFFF;--ink:#0A0A0A;--g1:#F4F4F4;--g2:#E4E4E4;--g3:#9C9C9C;
  --txt2:#3F3F3F;          /* secondary text */
  --txt3:#565656;          /* label text */
  --pane:#0E0E0E;--pane-line:#262626;
  --font-d:"Archivo",sans-serif;--font-m:"IBM Plex Mono",monospace;--r:2px;
  --ease:cubic-bezier(.22,.75,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{
  background:#F4F4F4;color:var(--ink);font-family:var(--font-d);font-size:16.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(10,10,10,.035) 43px 44px),
    repeating-linear-gradient(90deg,transparent 0 43px,rgba(10,10,10,.035) 43px 44px);
}
::selection{background:var(--ink);color:var(--paper)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
input[type=text],input[type=email],input[type=password]{
  width:100%;font:inherit;padding:12px 13px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);
}
input:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
label{font-family:var(--font-m);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt3);display:block;margin:0 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:650;font-size:.9rem;padding:12px 22px;border-radius:var(--r);border:1.5px solid var(--ink);transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);text-align:center}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--g2)}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.4;pointer-events:none}
.mono{font-family:var(--font-m)}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* demo banner (white, bordered; header below is black) */
.demo-bar{background:var(--paper);color:var(--ink);border-bottom:1.5px solid var(--ink);font-family:var(--font-m);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;text-align:center;padding:7px 14px}

/* ---------- header (inverted) ---------- */
.hdr{background:var(--ink);color:#FFF}
.hdr-in{max-width:1210px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.hdr .mark{display:flex;align-items:center;gap:11px}
.hdr .mark b{font-weight:750;letter-spacing:.22em;font-size:.98rem;text-transform:uppercase;color:#FFF}
.hdr .mark span{font-family:var(--font-m);font-size:.68rem;color:#B9B9B9;letter-spacing:.12em;text-transform:uppercase}
.hdr-right{display:flex;align-items:center;gap:12px}
.plan-chip{font-family:var(--font-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid #FFF;border-radius:999px;padding:5px 12px;color:#FFF;white-space:nowrap}
.avatar{width:34px;height:34px;border-radius:50%;background:#FFF;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:750;font-size:.76rem;letter-spacing:.03em;flex:none}
.signout{font-family:var(--font-m);font-size:.68rem;letter-spacing:.08em;color:#C9C9C9;border-bottom:1px solid transparent;padding:8px 2px}
.signout:hover{color:#FFF;border-bottom-color:#FFF}

.shell{max-width:1210px;margin:0 auto;padding:30px 28px 70px}

/* views */
.view{display:none}
.view.on{display:block;animation:vin .35s ease}

/* ---------- auth ---------- */
.auth-stage{position:relative;overflow:hidden;padding:5vh 0 8vh}
.auth-bloom{position:absolute;right:-170px;top:-140px;width:520px;height:520px;color:var(--g2);pointer-events:none;animation:spinSlow 140s linear infinite}
.auth-wrap{max-width:460px;margin:0 auto;position:relative;z-index:1}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:30px 28px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:8px 8px 0 var(--g2)}
.auth-wrap .card,.setup-grid .card,.shell>.card{box-shadow:10px 10px 0 var(--g2)}
.auth-wrap .card:hover,.setup-grid .card:hover,.shell>.card:hover{transform:none;box-shadow:10px 10px 0 var(--g2)}
.auth-wrap .bloom-top{display:flex;justify-content:center;margin-bottom:14px}
.auth-wrap .bloom-top svg{transition:transform .5s var(--ease)}
.auth-wrap .bloom-top:hover svg{transform:rotate(72deg)}
.auth-wrap h1{font-weight:770;font-variation-settings:"wdth" 116;font-size:1.55rem;text-transform:uppercase;text-align:center;letter-spacing:-.01em}
.auth-wrap .sub{font-family:var(--font-m);font-size:.68rem;color:var(--txt3);text-align:center;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 20px}
.plan-pill{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:11px 13px;font-family:var(--font-m);font-size:.76rem;margin-bottom:18px}
.plan-pill span{color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;font-size:.64rem}
.plan-pill b{font-weight:500;color:var(--ink)}
.field{margin-bottom:14px}
.auth-wrap .btn{width:100%}
.alt{font-size:.85rem;color:var(--txt2);text-align:center;margin-top:16px}
.alt button{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.fine{font-family:var(--font-m);font-size:.68rem;color:var(--txt3);text-align:center;margin-top:18px;letter-spacing:.03em;line-height:1.8}
.fine a{color:var(--ink);font-weight:500}

/* ---------- setup ---------- */
.setup-head{margin-bottom:22px}
.steps-ind{font-family:var(--font-m);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);margin-bottom:8px}
.steps-ind b{color:var(--ink);font-weight:500}
h2.pg{font-weight:760;font-variation-settings:"wdth" 114;font-size:1.55rem;text-transform:uppercase;letter-spacing:-.01em}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.card-tag{font-family:var(--font-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.card-tag::after{content:"";flex:1;height:1.5px;background:var(--g2)}
.terms-box{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);height:262px;overflow-y:auto;padding:16px;font-family:var(--font-d);font-size:.86rem;line-height:1.65;color:var(--txt2)}
.terms-box h4{font-family:var(--font-d);color:var(--ink);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin:15px 0 4px}
.terms-box h4:first-child{margin-top:0}
.agree{display:flex;gap:11px;align-items:flex-start;margin:16px 0;font-size:.92rem;color:var(--ink)}
.agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.agree-note{font-family:var(--font-m);font-size:.68rem;color:var(--txt2);border-top:1.5px solid var(--g2);padding-top:12px;line-height:1.75}
.setup-grid .btn{width:100%;margin-top:14px}

/* ---------- app layout ---------- */
.app{display:grid;grid-template-columns:172px 1fr;gap:24px;align-items:start}
.rail{position:sticky;top:22px;display:flex;flex-direction:column;gap:4px}
.rail button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  padding:11px 13px;border:1.5px solid transparent;border-radius:var(--r);color:var(--txt2);transition:background .15s,color .15s;
}
.rail button:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.rail button[aria-current="true"]{background:var(--ink);color:#FFF;border-color:var(--ink)}
.rail .brand-bloom{margin:14px auto 0;opacity:.9}
.rail .brand-bloom svg{animation:spinSlow 40s linear infinite}

/* stat tiles */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:16px 16px 14px;transition:transform .15s,box-shadow .15s}
.stat:hover{transform:translateY(-2px);box-shadow:7px 7px 0 var(--g2)}
.stat .n{font-weight:780;font-variation-settings:"wdth" 118;font-size:1.55rem;letter-spacing:-.01em;line-height:1.1}
.stat .l{font-family:var(--font-m);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt3);margin-top:5px}

/* dropzone */
.dz{position:relative;overflow:hidden;border:2px dashed var(--ink);border-radius:var(--r);background:var(--paper);padding:32px 20px;text-align:center;cursor:pointer;transition:background .15s;margin-bottom:24px}
.dz:hover,.dz.hot{background:var(--g1)}
.dz .dz-bloom{position:absolute;right:-56px;top:-56px;width:170px;height:170px;color:var(--g2);pointer-events:none;animation:spinSlow 60s linear infinite}
.dz .dz-bloom{transition:color .18s var(--ease)}
.dz:hover .dz-bloom{color:var(--g3)}
.dz > *{position:relative;z-index:1}
.dz .big{font-weight:740;font-variation-settings:"wdth" 114;font-size:1.2rem;text-transform:uppercase}
.dz .sm{font-family:var(--font-m);font-size:.72rem;color:var(--txt2);margin-top:6px;letter-spacing:.05em}
.dz .fake-btn{display:inline-block;margin-top:14px;border:1.5px solid var(--ink);border-radius:var(--r);padding:9px 18px;font-weight:650;font-size:.85rem;background:var(--ink);color:var(--paper)}

/* two-column dash body */
.dash-cols{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:start}

/* batches */
.batches h3,.side h3{font-weight:720;font-variation-settings:"wdth" 112;font-size:1rem;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.batches h3 svg,.side h3 svg{flex:none}
.batch{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;display:grid;grid-template-columns:1.15fr 1.55fr;gap:16px;align-items:center;animation:vin .35s var(--ease);transition:transform .18s var(--ease),box-shadow .18s var(--ease);position:relative}
.batch:hover{transform:translateY(-2px);box-shadow:8px 8px 0 var(--g2)}
.batch.running::before{content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:4px;background:var(--ink);animation:pulse 1.8s infinite}
.b-file{display:flex;gap:12px;align-items:flex-start}
.f-ic{width:38px;height:38px;flex:none;border:1.5px solid var(--ink);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.8rem;font-weight:500;background:var(--paper)}
.f-ic svg{width:20px;height:20px;animation:spinSlow 5s linear infinite}
.b-name b{font-family:var(--font-m);font-size:.76rem;font-weight:500;word-break:break-all}
.b-name .meta{font-family:var(--font-m);color:var(--txt2);font-size:.68rem;margin-top:4px}
.stepper{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.stp{font-family:var(--font-m);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.stp.up{border:1.5px dashed var(--g3);color:var(--txt3)}
.stp.act{border:1.5px solid var(--ink);color:var(--ink);font-weight:500}
.stp.act::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:6px;animation:pulse 1.8s infinite;vertical-align:1px}
.stp.done{border:1.5px solid var(--ink);background:var(--ink);color:#FFF}
.bar{height:11px;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .5s linear}
.prog-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
.pct{font-family:var(--font-m);font-size:.76rem;font-weight:500;color:var(--ink)}
.eta-chip{font-family:var(--font-m);font-size:.62rem;letter-spacing:.06em;border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px;color:var(--ink);white-space:nowrap}
.b-done-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.valid-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;background:var(--ink);color:#FFF;border-radius:var(--r);padding:6px 11px}
.b-btns{display:flex;gap:8px;flex-wrap:wrap}
.purge-note{font-family:var(--font-m);font-size:.68rem;color:var(--txt3);text-align:center;padding:8px 0 2px}

/* side column */
.side .card{padding:20px;margin-bottom:16px}
.meter{height:16px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);overflow:hidden;position:relative}
.meter i{display:block;height:100%;background:var(--ink);width:0;transition:width .8s ease}
.meter .tick{position:absolute;top:0;bottom:0;width:1.5px;background:var(--g2)}
.nums{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:.72rem;color:var(--txt2);margin-top:9px}
.nums b{color:var(--ink);font-weight:500}
.cycle-mini{font-family:var(--font-m);font-size:.68rem;color:var(--txt3);margin-top:8px}
.schema-tbl{width:100%;border-collapse:collapse;font-family:var(--font-m);font-size:.74rem}
.schema-tbl td{padding:7px 2px;border-top:1px solid var(--g2)}
.schema-tbl tr:first-child td{border-top:none}
.schema-tbl td:first-child{color:var(--ink);font-weight:500}
.schema-tbl td:last-child{color:var(--txt3);text-align:right}
.ver-chip{font-family:var(--font-m);font-size:.6rem;letter-spacing:.1em;border:1.5px solid var(--ink);border-radius:999px;padding:3px 9px;margin-left:auto}
.side .mini{font-family:var(--font-m);font-size:.68rem;color:var(--txt2);margin-top:12px;line-height:1.7}
.side .mini a{color:var(--ink);font-weight:500;text-underline-offset:3px}
.feed{font-family:var(--font-m);font-size:.68rem;line-height:2;color:var(--txt2)}
.feed b{color:var(--ink);font-weight:500;margin-right:8px}

/* sub-views */
.pane-view{display:none}
.pane-view.on{display:block;animation:vin .35s ease}
.pg-top{margin-bottom:18px}
.pg-top h2{font-weight:760;font-variation-settings:"wdth" 114;font-size:1.55rem;text-transform:uppercase;letter-spacing:-.01em}
.pg-top p{font-size:.95rem;color:var(--txt2);margin-top:4px}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.card h3.ch{font-weight:720;font-variation-settings:"wdth" 112;font-size:1rem;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.card h3.ch svg{animation:spinSlow 26s linear infinite;flex:none}
.rtab{width:100%;border-collapse:collapse;font-size:.86rem}
.rtab th{font-family:var(--font-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);text-align:left;padding:9px 10px;border-bottom:2px solid var(--ink);font-weight:500}
.rtab td{padding:11px 10px;border-top:1px solid var(--g2);vertical-align:middle}
.rtab tr:first-child td{border-top:none}
.rtab .num{font-family:var(--font-m);font-size:.76rem;color:var(--ink);font-weight:500}
.fb{display:inline-block;vertical-align:middle;width:70px;height:7px;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;margin-right:8px;background:var(--paper)}
.fb i{display:block;height:100%;background:var(--ink)}
.rep-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rep-head .bn{font-family:var(--font-m);font-size:.76rem;font-weight:500}
.rep-head .bn small{display:block;color:var(--txt3);font-weight:400;font-size:.68rem;margin-top:3px}
.acc-chip{font-family:var(--font-m);font-size:.62rem;letter-spacing:.1em;background:var(--ink);color:#FFF;border-radius:999px;padding:5px 12px;white-space:nowrap}
.inv-amt{font-family:var(--font-m);font-weight:500;white-space:nowrap}
.paid{font-family:var(--font-m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:2px 9px}
.credit-note{font-family:var(--font-m);font-size:.66rem;color:var(--txt2);margin-top:10px}
.frow{margin-bottom:13px}
.tgl{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--g2);font-size:.9rem}
.tgl:first-of-type{border-top:none}
.tgl input{width:18px;height:18px;accent-color:var(--ink);flex:none}
.keyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-m);font-size:.8rem;border:1.5px solid var(--ink);border-radius:var(--r);padding:10px 12px;background:var(--g1)}
.keyrow code{letter-spacing:.06em}
.btn-sm{padding:9px 14px;font-size:.8rem}
.radio-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--g2);font-size:.9rem}
.radio-row:first-of-type{border-top:none}
.radio-row input{width:18px;height:18px;accent-color:var(--ink);margin-top:2px;flex:none}
.radio-row small{display:block;color:var(--txt3);font-family:var(--font-m);font-size:.66rem;margin-top:2px}
@media(max-width:960px){.setgrid{grid-template-columns:1fr}}

/* toast */
.toast{position:fixed;left:18px;bottom:18px;z-index:99;background:var(--ink);color:#FFF;border-radius:var(--r);padding:13px 16px;font-family:var(--font-m);font-size:.68rem;letter-spacing:.03em;box-shadow:7px 7px 0 rgba(10,10,10,.18);transform:translateY(140%);transition:transform .3s var(--ease);max-width:calc(100vw - 36px)}
.toast.on{transform:none}
.toast svg{vertical-align:-2px;margin-right:8px}

@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .rail button{white-space:nowrap}
  .rail .brand-bloom{display:none}
  .dash-cols{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .setup-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .batch{grid-template-columns:1fr;gap:12px}
  .hdr .mark span{display:none}
  .plan-chip{display:none}
  .stat .n{font-size:1.3rem}
}

/* batch details drawer */
.batch{cursor:pointer}
.batch.open{box-shadow:8px 8px 0 var(--g2)}
.b-toggle{position:absolute;right:14px;top:11px;font-family:var(--font-m);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt3);transition:color .18s var(--ease)}
.b-toggle:hover{color:var(--ink)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.b-detail{grid-column:1/-1;border-top:1.5px solid var(--g2);margin-top:2px;padding-top:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;animation:vin .3s ease;cursor:default}
.d-item b{display:block;font-family:var(--font-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);font-weight:500;margin-bottom:4px}
.d-item span{font-family:var(--font-m);font-size:.76rem;color:var(--ink);line-height:1.5;word-break:break-word}
.rep-flash{animation:repFlash 1.5s ease}
@keyframes repFlash{0%{box-shadow:0 0 0 3px var(--ink)}100%{box-shadow:0 0 0 0 rgba(10,10,10,0)}}
@media(max-width:620px){.b-detail{grid-template-columns:1fr 1fr}}

/* batch completion */
@keyframes stampin{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.batch .valid-chip{animation:stampin .3s var(--ease)}
.batch .b-done-row{animation:vin .35s var(--ease)}