/* ============ Dropshipping Empire, kraft warehouse design system ============ */
:root{
  --kraft:#C9A679;
  --kraft-mid:#B9905F;
  --kraft-dark:#9C7A4F;
  --kraft-deep:#7A5C38;
  --label:#F7F4EC;
  --label-dim:#EDE7D8;
  --ink:#1B1A17;
  --ink-soft:#4A463D;
  --yellow:#F2C230;
  --yellow-deep:#D6A411;
  --green:#2F6B3F;
  --green-lt:#4E8A5C;
  --red:#C2362B;
  --red-lt:#D8564A;
  --tape:#E3CFA3;
  --slate:#6B7A8F;
  --route:#3C6E9E;
  --express:#E07A1F;
  --line:2px solid var(--ink);
  --stencil:'Big Shoulders Stencil Display', 'Arial Narrow', Impact, sans-serif;
  --body:'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --shadow:3px 3px 0 var(--kraft-deep);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background-color:var(--kraft);
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.028) 0 2px, rgba(0,0,0,0) 2px 5px);
  font-size:14px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:800}
a{color:inherit}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
svg{flex:0 0 auto}
.ic{width:20px;height:20px}
.big-ic{width:40px;height:40px}
.btn .ic{width:16px;height:16px}
.stencil{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.green{color:var(--green)} .red{color:var(--red)} .dim{color:var(--ink-soft)}
.hide{display:none !important}

/* ============ App shell ============ */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
#main{display:flex;flex:1;min-height:0;gap:0}
#content{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:14px 16px 28px}
#content.cols{display:block}

/* ============ HUD ============ */
#hud{
  position:relative;z-index:40;
  background:var(--label);
  border-bottom:3px solid var(--ink);
  padding:8px 12px 11px;
  display:flex;align-items:stretch;gap:6px;
}
#hud::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background-image:radial-gradient(circle, var(--kraft) 1px, transparent 1.6px);
  background-size:7px 3px;background-position:0 0;
}
.hud-cell{display:flex;flex-direction:column;justify-content:center;padding:2px 12px;position:relative}
.hud-cell + .hud-cell::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--kraft-dark);opacity:.6}
.hud-label{font-size:9.5px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.hud-empire{min-width:150px;flex-direction:row;align-items:center;gap:10px}
.hud-empire .logo{flex:0 0 38px;width:38px;height:38px;background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--kraft-deep);display:grid;place-items:center}
.hud-empire .logo svg{width:26px;height:26px;display:block}
.hud-empire .ename{display:flex;flex-direction:column;min-width:0}
.hud-empire .name{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:17px;line-height:1;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-empire .lvl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kraft-deep);margin-top:3px;white-space:nowrap}
.hud-money .amt{font-family:var(--stencil);font-weight:800;font-size:30px;line-height:1;letter-spacing:.01em}
.hud-money .delta{font-family:var(--mono);font-size:11px;font-weight:600;margin-left:8px}
.hud-money .row{display:flex;align-items:baseline;white-space:nowrap}
.stars{display:inline-flex;gap:1px;font-size:15px;line-height:1}
.stars .s{color:var(--kraft-dark)} .stars .s.on{color:var(--yellow-deep)}
.hud-rep .score{font-family:var(--mono);font-weight:600;font-size:12px;margin-left:6px}
.hud-inv{min-width:130px}
.bar{height:9px;border:1.5px solid var(--ink);background:var(--label-dim);margin-top:4px;position:relative}
.bar>i{display:block;height:100%;background:var(--green)}
.bar.warn>i{background:var(--yellow)}
.bar.crit>i{background:var(--red)}
.hud-inv .fig{font-family:var(--mono);font-size:11px;font-weight:600}
.hud-orders .figs{font-family:var(--mono);font-size:12px;font-weight:600;display:flex;gap:9px;flex-wrap:wrap}
.hud-orders .figs b{font-weight:600}
.pill{border:1.5px solid var(--ink);padding:0 5px;font-size:10px;font-weight:700}
.pill.open{background:var(--label-dim)}
.pill.ship{background:var(--green);color:var(--label);border-color:var(--green)}
.pill.late{background:var(--red);color:var(--label);border-color:var(--red)}
.hud-day{min-width:104px}
.hud-day .clock{font-family:var(--mono);font-weight:600;font-size:13px}
.speeds{display:flex;gap:3px;margin-top:4px}
.spd{border:1.5px solid var(--ink);background:var(--label-dim);font-family:var(--mono);font-weight:600;font-size:10px;padding:2px 6px;min-width:26px}
.spd.on{background:var(--ink);color:var(--label)}
.hud-end{margin-left:auto;display:flex;align-items:center;padding-left:8px}
.hud-end .btn{white-space:nowrap}
.hud-end .col{display:flex;flex-direction:column;gap:5px;align-items:stretch}

/* ============ Buttons ============ */
.btn{
  border:2px solid var(--ink);background:var(--yellow);color:var(--ink);
  font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;
  padding:8px 13px;min-height:38px;line-height:1;
  box-shadow:2px 2px 0 var(--kraft-deep);
  transition:transform .05s, box-shadow .05s, background .1s;
}
.btn:hover{background:#F7CE4C}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--kraft-deep)}
.btn.ghost{background:var(--label);color:var(--ink)}
.btn.ghost:hover{background:var(--label-dim)}
.btn.dark{background:var(--ink);color:var(--label)}
.btn.green{background:var(--green);color:var(--label);border-color:var(--ink)}
.btn.green:hover{background:var(--green-lt)}
.btn.red{background:var(--red);color:var(--label)}
.btn.red:hover{background:var(--red-lt)}
.btn.sm{font-size:11px;padding:5px 9px;min-height:30px}
.btn.block{display:block;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ============ Left rail ============ */
#rail{width:186px;flex:0 0 186px;background:var(--kraft-dark);border-right:3px solid var(--ink);overflow-y:auto;padding:10px 0 30px}
.tab{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--kraft-mid);border:0;border-top:1.5px solid rgba(0,0,0,.18);border-bottom:1.5px solid rgba(0,0,0,.28);
  color:var(--ink);padding:12px 12px;font-family:var(--stencil);font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;font-size:15px;
}
.tab .ic{flex:0 0 20px;height:20px;opacity:.9}
.tab:hover{background:#C79E6B}
.tab.on{background:var(--label);border-right:0;position:relative;z-index:2;box-shadow:inset 4px 0 0 var(--ink)}
.rail-foot{margin-top:14px;padding:14px 12px;font-family:var(--stencil);font-weight:800;text-transform:uppercase;
  font-size:15px;line-height:1.15;color:var(--ink);border-top:2px dashed var(--kraft-deep);letter-spacing:.03em}
.rf-tag{margin-bottom:10px}
.rf-lang-t{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:6px}
.rf-lang-t .ic{width:14px;height:14px}
.langbtn{border:1.5px solid var(--ink);background:var(--kraft-mid);font-family:var(--mono);font-weight:600;
  font-size:10px;padding:3px 6px;min-height:24px;letter-spacing:0}
.langbtn.on{background:var(--ink);color:var(--label)}
.langbtn:hover{background:var(--yellow)}

/* ============ Panels (cardboard flap) ============ */
.panel{background:var(--label);border:var(--line);box-shadow:var(--shadow);margin-bottom:14px;position:relative}
.panel-head{
  background:var(--kraft-dark);color:var(--ink);
  border-bottom:2px solid var(--ink);
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  position:relative;
}
.panel-head .t{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:16px}
.panel-head .ic{width:19px;height:19px}
.panel-head::after{ /* folded corner notch */
  content:"";position:absolute;top:0;right:0;border-width:0 15px 15px 0;border-style:solid;
  border-color:transparent var(--label) transparent transparent;
}
.panel-head .sub{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.panel-body{padding:12px}
.panel-body.tight{padding:0}
.tape{
  position:absolute;width:74px;height:20px;background:var(--tape);opacity:.85;
  border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 0 rgba(0,0,0,.08);pointer-events:none;
}
.tape.tl{top:-9px;left:14px;transform:rotate(-4deg)}
.tape.tr{top:-9px;right:14px;transform:rotate(4deg)}
.tape.br{bottom:-9px;right:20px;transform:rotate(-3deg)}

/* One opaque sticky slab holds the title bar and the sub-tab row, so the
   active section's header can never be overlapped by its own tab row or by
   any panel scrolling underneath it. */
.screen-top{position:sticky;top:0;z-index:30;background:var(--kraft);padding-top:2px;margin-bottom:12px}
.screen-top::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;
  background:linear-gradient(var(--kraft),rgba(201,166,121,0))}
.screen-head{display:flex;align-items:center;gap:12px;margin-bottom:0;flex-wrap:wrap;background:var(--kraft)}
.screen-top .subtabs{margin-bottom:0}
.screen-head .big-ic{width:40px;height:40px;flex:0 0 40px}
.screen-title{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:30px;line-height:.95;letter-spacing:.01em}
.screen-sub{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.screen-head .spacer{flex:1}

/* ============ Sub-tabs ============ */
.subtabs{display:flex;gap:0;border-bottom:2px solid var(--ink);margin-bottom:12px;flex-wrap:wrap}
.subtab{
  border:2px solid var(--ink);border-bottom:0;background:var(--kraft-mid);
  font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  font-size:13px;padding:7px 14px;margin-right:-2px;margin-bottom:-2px;
}
.subtab.on{background:var(--label)}

/* ============ Grids ============ */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.gauto{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

/* ============ Tables ============ */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{
  background:var(--kraft-dark);color:var(--ink);font-family:var(--stencil);font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;text-align:left;
  padding:7px 9px;border:1.5px solid var(--ink);white-space:nowrap;
}
.tbl td{padding:7px 9px;border:1.5px solid var(--kraft-dark);font-size:12.5px;vertical-align:middle}
.tbl td.num,.tbl th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.tbl tbody tr:nth-child(even){background:#F1ECDF}
.ledger th{background:var(--ink);color:var(--label)}
.ledger td{border-color:var(--ink-soft)}
.ledger td.num{font-weight:600}

/* ============ Shipping label cards ============ */
.barcode{background:
  repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 13px,var(--ink) 13px 14px,transparent 14px 18px,var(--ink) 18px 20px,transparent 20px 23px);
  background-size:120px 100%;border-bottom:1.5px dashed var(--ink)}
.lbl{
  background:var(--label);border:1.5px solid var(--ink);position:relative;
  font-size:11px;overflow:hidden;
}
.lbl .barcode{height:30px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 13px,var(--ink) 13px 14px,transparent 14px 18px,var(--ink) 18px 20px,transparent 20px 23px);
  background-size:120px 100%;border-bottom:1.5px dashed var(--ink)}
.lbl .body{padding:7px 8px 8px}
.lbl .oid{font-family:var(--mono);font-weight:600;font-size:10.5px;display:flex;justify-content:space-between;align-items:center}
.lbl .ship{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.lbl .cust{font-weight:700;font-size:12px;line-height:1.2}
.lbl .city{font-size:10.5px;color:var(--ink-soft)}
.lbl .item{display:flex;gap:7px;align-items:center;margin-top:6px}
.lbl .item .box{flex:0 0 34px}
.lbl .item .nm{font-weight:600;font-size:11px;line-height:1.15}
.lbl .item .qty{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.lbl .row2{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:6px}
.lbl .price{font-family:var(--mono);font-weight:600;font-size:12px}
.badge{
  border:1.5px solid var(--ink);font-family:var(--stencil);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:10.5px;padding:2px 6px;line-height:1;display:inline-block;
}
.badge.economy{background:var(--slate);color:var(--label)}
.badge.standard{background:var(--route);color:var(--label)}
.badge.express{background:var(--express);color:var(--label)}
.eta{font-family:var(--mono);font-size:10px;font-weight:600}
.stamp{
  position:absolute;pointer-events:none;font-family:var(--stencil);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;border:3px solid currentColor;padding:2px 9px;font-size:16px;line-height:1;
  opacity:.82;mix-blend-mode:multiply;
}
.stamp.green{color:var(--green);transform:rotate(-8deg)}
.stamp.red{color:var(--red);transform:rotate(6deg)}
.stamp.grey{color:var(--slate);transform:rotate(-5deg)}
.lbl .stamp{top:52%;left:13%}
.mini .stamp{top:auto;left:auto}

/* mini label on conveyor */
.mini{
  background:var(--label);border:1.5px solid var(--ink);padding:6px 7px;position:relative;
  box-shadow:2px 2px 0 rgba(0,0,0,.25);font-size:10px;flex:0 0 auto;width:100%;
}
.mini .barcode{height:20px}
.mini .oid{font-family:var(--mono);font-weight:600;font-size:9.5px;display:flex;justify-content:space-between}
.mini .cust{font-weight:700;font-size:11px;margin-top:3px}
.mini .city{font-size:9.5px;color:var(--ink-soft)}
.mini .item{display:flex;gap:6px;align-items:center;margin-top:4px}
.mini .item .box{flex:0 0 26px}
.mini .nm{font-size:10px;font-weight:600;line-height:1.1}
.mini .row2{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:5px}
.mini .badge{font-size:9px;padding:1px 5px}
.mini .price{font-family:var(--mono);font-weight:600;font-size:11px}

/* ============ Conveyor ============ */
#conveyor{
  width:302px;flex:0 0 302px;background:var(--kraft-deep);border-left:3px solid var(--ink);
  display:flex;flex-direction:column;min-height:0;
}
#conveyor .cv-head{
  background:var(--kraft-dark);border-bottom:2px solid var(--ink);padding:8px 12px;display:flex;align-items:center;gap:8px;
}
#conveyor .cv-head .t{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
#conveyor .cv-head .n{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:12px;background:var(--label);border:1.5px solid var(--ink);padding:0 6px}
#conveyor .cv-belt{
  flex:1;min-height:0;overflow-y:auto;padding:0 10px;
  background:
    radial-gradient(circle at 9px 0, #5a4629 5px, rgba(0,0,0,0) 5.6px) 0 0/18px 22px repeat-y,
    radial-gradient(circle at calc(100% - 9px) 0, #5a4629 5px, rgba(0,0,0,0) 5.6px) 0 0/18px 22px repeat-y,
    repeating-linear-gradient(0deg,#3a2d1c 0 10px,#473822 10px 11px,#3f311e 11px 21px);
}
.cv-idle{opacity:.85;border-style:dashed}
.cv-idle .cust{font-family:var(--stencil);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#conveyor .cv-belt .inner{padding:12px 4px;display:flex;flex-direction:column;gap:12px}
#conveyor .cv-empty{color:#D8C7A6;text-align:center;padding:24px 10px;font-size:12px}
.cv-alert{background:var(--red);color:var(--label);border:2px solid var(--ink);padding:8px 10px;text-align:center;font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* mobile conveyor strip */
#conv-mobile{display:none}

/* ============ Product box (SVG injected) */
.pbox{display:block}
.pbox svg{display:block;width:100%;height:auto}

/* ============ Floor plan / image panels ============ */
.floor-wrap{position:relative;border:2px solid var(--ink);background:var(--kraft);overflow:hidden;width:100%;aspect-ratio:996/736}
.floor-wrap.sq{aspect-ratio:1/1}
.floor-wrap img{display:block;width:100%;height:100%;object-fit:contain}
.floor-overlay{position:absolute;inset:0;pointer-events:none}
.rack-pin{position:absolute;transform:translate(-50%,-50%);background:var(--yellow);border:2px solid var(--ink);
  font-family:var(--mono);font-weight:600;font-size:11px;padding:1px 6px;box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.rack-pin.full{background:var(--green);color:var(--label)}
.rack-pin.empty{background:var(--red);color:var(--label)}
/* A locked region is marked as a red printed area over the map itself,
   never as a block with the place name written on it again. */
.region-lock{position:absolute;transform:translate(-50%,-50%);width:30%;height:30%;border-radius:50%;
  pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(circle, rgba(194,54,43,.5) 0%, rgba(194,54,43,.34) 52%, rgba(194,54,43,.12) 70%, rgba(194,54,43,0) 76%)}
.region-lock::after{content:"";position:absolute;inset:16%;border:2px dashed rgba(194,54,43,.75);border-radius:50%}

/* ============ Selection style: floor brackets ============ */
.pick{position:relative;cursor:pointer}
.pick.on::before,.pick.on::after{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  border:3px solid var(--yellow);
}
.pick.on::after{
  inset:-5px;border:0;
  background:
    linear-gradient(var(--yellow),var(--yellow)) left top/14px 3px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) left top/3px 14px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) right top/14px 3px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) right top/3px 14px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) left bottom/14px 3px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) left bottom/3px 14px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) right bottom/14px 3px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) right bottom/3px 14px no-repeat;
}
.pick.on::before{border:0}

/* ============ Hazard stripes ============ */
.hazard{background:repeating-linear-gradient(45deg,var(--yellow) 0 16px,var(--ink) 16px 32px);
  color:var(--ink);border:2px solid var(--ink)}
.hazard-box{background:repeating-linear-gradient(45deg,rgba(0,0,0,.9) 0 12px,rgba(242,194,48,.92) 12px 24px);
  border:2px solid var(--ink)}
.lock-hazard{position:relative;overflow:hidden;pointer-events:none}
.tag .ic{width:12px;height:12px;vertical-align:-2px}
.lock-hazard::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(27,26,23,.86) 0 10px,rgba(242,194,48,.86) 10px 20px);
  pointer-events:none;opacity:.92}

/* ============ Stat blocks ============ */
.stat{border:var(--line);background:var(--label);padding:10px 12px;box-shadow:var(--shadow)}
.stat .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.stat .v{font-family:var(--stencil);font-weight:800;font-size:24px;line-height:1}
.stat .v.mono{font-family:var(--mono);font-weight:600;font-size:19px}
.stat .s{font-size:11px;margin-top:2px}

/* ============ Product cards ============ */
.card{background:var(--label);border:var(--line);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px;position:relative}
.card .box-wrap{background:var(--kraft);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;padding:8px;height:104px}
.card .box-wrap .pbox{width:82px}
.card .nm{font-weight:700;font-size:13px;line-height:1.15}
.card .sub{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.card .prices{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12px}
.card .foot{margin-top:auto;display:flex;gap:6px}
.tape-tag{position:absolute;top:-8px;left:10px;background:var(--tape);opacity:.9;font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;transform:rotate(-3deg);border:1px solid rgba(0,0,0,.12)}

/* grade stamp */
.grade{display:inline-block;font-family:var(--stencil);font-weight:800;border:2px solid currentColor;
  padding:0 6px;font-size:14px;line-height:1.3;transform:rotate(-4deg)}

/* price stepper */
.stepper{display:inline-flex;border:1.5px solid var(--ink)}
.stepper button{background:var(--label-dim);border:0;font-family:var(--mono);font-weight:600;font-size:13px;width:26px;height:26px}
.stepper button:hover{background:var(--yellow)}
.stepper .pv{font-family:var(--mono);font-weight:600;font-size:12px;width:60px;text-align:center;border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);display:grid;place-items:center;background:var(--label)}

/* star row for reviews */
.stampstars{font-size:14px;letter-spacing:1px}

/* flyer */
.flyer{background:var(--label);border:2px solid var(--ink);padding:12px;position:relative;transform:rotate(-.6deg)}
.flyer h4{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.02em}
.flyer .big{font-family:var(--stencil);font-weight:800;font-size:30px;line-height:1}

/* ID badge */
.badge-card{background:var(--label);border:2px solid var(--ink);display:flex;gap:10px;padding:10px;position:relative}
.badge-card .clip{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:34px;height:9px;background:var(--slate);border:1.5px solid var(--ink);border-radius:3px}
.badge-card .av{border:2px solid var(--ink);background:var(--kraft);width:52px;height:62px;display:grid;place-items:center}

/* competitor card */
.rival{background:var(--label);border:2px solid var(--ink);padding:12px;position:relative;box-shadow:var(--shadow)}
.rival .emblem{width:54px;height:54px;border:2px solid var(--ink);background:var(--kraft-dark);display:grid;place-items:center;font-family:var(--stencil);font-weight:800;font-size:26px}
.rival .idx{font-family:var(--mono);font-weight:600}

/* milestone stamp */
.mile{background:var(--label);border:2px solid var(--ink);padding:12px;box-shadow:var(--shadow);position:relative;text-align:center}
.mile .nil{font-family:var(--stencil);font-weight:800;font-size:54px;line-height:1;color:var(--kraft-dark);opacity:.5}
.mile.done .nil{color:var(--green);opacity:1;transform:rotate(-6deg);border:3px solid var(--green);display:inline-block;padding:0 12px}
.mile .mt{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:15px;margin-top:8px}

/* chart */
.chart{display:flex;align-items:flex-end;gap:2px;height:120px;border-bottom:2px solid var(--ink);padding:0 2px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart .bar{width:100%;background:var(--green);border:1px solid var(--ink)}
.chart .bar.neg{background:var(--red)}
.chart .x{font-family:var(--mono);font-size:8px;margin-top:2px}
.spark{width:100%;height:60px}

/* toast / floating money */
.flybox{position:fixed;z-index:120;width:24px;height:24px;background:#C99E6C;border:2px solid var(--ink);
  box-shadow:2px 2px 0 rgba(0,0,0,.25);pointer-events:none;animation:flybox .7s cubic-bezier(.3,.1,.6,1) forwards}
.flybox::after{content:"";position:absolute;left:0;right:0;top:6px;height:5px;background:var(--yellow);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
@keyframes flybox{from{transform:translate(0,0) scale(1) rotate(0)}to{transform:translate(34vw,-34vh) scale(.5) rotate(200deg);opacity:0}}
#floaters{position:fixed;right:22px;top:78px;z-index:80;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.floater{font-family:var(--mono);font-weight:600;font-size:15px;background:var(--label);border:2px solid var(--ink);padding:4px 9px;box-shadow:2px 2px 0 var(--kraft-deep);animation:floatup 1.4s ease-out forwards}
@keyframes floatup{0%{transform:translateY(8px);opacity:0}15%{opacity:1}100%{transform:translateY(-26px);opacity:0}}

/* toast notifications */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:92vw}
.toast{background:var(--ink);color:var(--label);border:2px solid var(--yellow);padding:9px 14px;font-weight:600;font-size:13px;
  box-shadow:3px 3px 0 var(--kraft-deep);animation:pop .25s ease-out}
.toast.warn{border-color:var(--red);background:var(--red)}
.toast.good{border-color:var(--green);background:var(--green)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* end-of-day receipt */
#receipt{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:100;width:min(420px,94vw);
  background:var(--label);border:2px solid var(--ink);border-top:0;box-shadow:0 8px 0 rgba(0,0,0,.2);
  padding:16px 18px;animation:printdown .5s ease-out}
#receipt .rh{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:22px;text-align:center;letter-spacing:.03em}
#receipt .perf{border-top:2px dashed var(--ink);margin:8px 0}
#receipt .rline{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;padding:2px 0}
#receipt .rline.total{border-top:2px solid var(--ink);margin-top:4px;padding-top:6px;font-weight:600;font-size:15px}
@keyframes printdown{from{transform:translate(-50%,-100%)}to{transform:translate(-50%,0)}}

/* big celebration stamp */
.celebrate{position:fixed;inset:0;z-index:110;display:grid;place-items:center;pointer-events:none}
.celebrate .bigstamp{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:clamp(38px,11vw,110px);
  color:var(--green);border:8px solid var(--green);padding:6px 28px;transform:rotate(-7deg);opacity:0;
  animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards;background:rgba(247,244,236,.85)}
@keyframes slam{0%{transform:scale(1.6) rotate(-7deg);opacity:0}70%{transform:scale(1) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-7deg);opacity:1}}

/* small helpers */
.muted{color:var(--ink-soft)}
.tiny{font-size:10.5px}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.rowflex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag{display:inline-block;border:1.5px solid var(--ink);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;background:var(--label-dim)}
.tag.g{background:var(--green);color:var(--label);border-color:var(--ink)}
.tag.r{background:var(--red);color:var(--label)}
.tag.y{background:var(--yellow)}
.hr{height:2px;background:var(--kraft-dark);margin:12px 0;border:0}
.notice{border:2px solid var(--ink);background:var(--label-dim);padding:9px 11px;font-size:12px}
.notice.danger{background:#F7E4E1;border-color:var(--red)}
.notice.good{background:#E6EFE7;border-color:var(--green)}
.empty{border:2px dashed var(--kraft-dark);padding:26px;text-align:center;color:var(--ink-soft);font-weight:600}

/* scrollbars */
#content::-webkit-scrollbar,#rail::-webkit-scrollbar,.cv-belt::-webkit-scrollbar{width:10px}
#content::-webkit-scrollbar-thumb,#rail::-webkit-scrollbar-thumb,.cv-belt::-webkit-scrollbar-thumb{background:var(--kraft-dark);border:2px solid var(--kraft)}
.cv-belt::-webkit-scrollbar-thumb{border-color:var(--kraft-deep)}

/* ============ Mobile ============ */
#bottombar{display:none}
#sheet{display:none}

@media (max-width:1023px){
  body{font-size:13px}
  /* On phones the whole page scrolls as ONE piece in the document. The HUD and
     the incoming-orders strip scroll away with the content, so the active
     section gets the full height and nothing is trapped in a nested scroll
     area behind #bottombar. Only #bottombar stays fixed. */
  #app{height:auto;min-height:100dvh;overflow:visible}
  #main{flex-direction:column;flex:none;overflow:visible}
  #rail{display:none}
  #conveyor{display:none}
  /* money floaters clear the End Day button: anchored lower-left on phones */
  #floaters{left:16px;right:auto;top:auto;bottom:64px;align-items:flex-start}
  #content{padding:10px 10px 90px;overflow:visible;min-height:0;flex:none}
  #hud{flex-wrap:wrap;padding:7px 9px 10px;gap:2px}
  .hud-cell{padding:2px 8px}
  .hud-cell + .hud-cell::before{display:none}
  .hud-empire{order:1;flex:1 1 100%;min-width:0;border-bottom:1px dashed var(--kraft-dark);padding-bottom:6px;margin-bottom:2px;flex-direction:row;align-items:center;gap:8px}
  .hud-empire .logo{flex:0 0 32px;width:32px;height:32px}
  .hud-empire .logo svg{width:22px;height:22px}
  .hud-empire .lvl{margin-top:0}
  .hud-money{order:2;flex:1 1 45%}
  .hud-money .amt{font-size:24px}
  .hud-rep{order:3;flex:1 1 45%}
  .hud-inv{order:4;flex:1 1 46%}
  .hud-orders{order:5;flex:1 1 46%}
  .hud-day{order:6;flex:1 1 100%;flex-direction:row;align-items:center;gap:10px;border-top:1px dashed var(--kraft-dark);padding-top:6px;margin-top:2px;min-width:0}
  .hud-day .clock{font-size:14px}
  .speeds{margin-top:0}
  .hud-end{order:7;flex:1 1 100%;margin-left:0;padding-left:0}
  .hud-end .col{width:100%;flex-direction:row}
  .hud-end .col .btn{flex:1}

  #conv-mobile{display:block;background:var(--kraft-deep);border-bottom:3px solid var(--ink);padding:8px 0}
  #conv-mobile .cvm-label{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--label);padding:0 12px 6px;display:flex;justify-content:space-between;align-items:center}
  #conv-mobile .strip{display:flex;gap:9px;overflow-x:auto;padding:0 12px 8px;scroll-snap-type:x mandatory}
  #conv-mobile .strip .mini{width:180px;scroll-snap-align:start}
  #conv-mobile .strip::-webkit-scrollbar{height:8px}
  #conv-mobile .strip::-webkit-scrollbar-thumb{background:var(--kraft-dark)}

  .g2,.g3,.g4{grid-template-columns:1fr}
  .gauto{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .screen-title{font-size:24px}
  .screen-head{margin-bottom:9px}
  .panel-body{padding:10px}
  .stat .v{font-size:20px}
  .tbl{font-size:11.5px}
  .tbl th,.tbl td{padding:5px 6px}
  .tbl.ledger-wrap{display:block;overflow-x:auto}

  #bottombar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--kraft-dark);border-top:3px solid var(--ink);
  }
  #bottombar .btab{
    flex:1;background:transparent;border:0;border-right:1.5px solid rgba(0,0,0,.25);
    display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 9px;
    font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:11px;color:var(--ink);min-height:56px;
  }
  #bottombar .btab .ic{width:22px;height:22px}
  #bottombar .btab.on{background:var(--label)}

  #sheet{display:none;position:fixed;inset:0;z-index:70;background:rgba(27,26,23,.5)}
  #sheet.open{display:block}
  #sheet .panel{position:absolute;left:0;right:0;bottom:0;margin:0;border-left:0;border-right:0;border-bottom:0;
    max-height:74vh;overflow-y:auto;animation:sheetup .25s ease-out}
  @keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
  #sheet .sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  #sheet .sheettab{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--label);border:2px solid var(--ink);
    padding:12px;font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:13px;box-shadow:var(--shadow)}
  #sheet .sheettab .ic{width:26px;height:26px}

  .chart{height:90px}
}

@media (max-width:400px){
  .hud-money .amt{font-size:21px}
  .screen-title{font-size:21px}
}

/* short viewports (landscape phones): pack the HUD into one or two rows,
   drop the mobile conveyor strip (the Orders tab still holds them), and
   scale the illustrated panels down by width so nothing is ever clipped */
@media (max-height:620px){
  #hud{padding:5px 8px 6px;gap:2px;flex-wrap:wrap}
  .hud-cell{padding:1px 9px}
  .hud-cell + .hud-cell::before{display:block}
  .hud-empire{flex:0 0 auto;flex-direction:row;align-items:center;border:0;padding-bottom:1px;margin-bottom:0;gap:6px}
  .hud-empire .logo{flex:0 0 28px;width:28px;height:28px}
  .hud-empire .logo svg{width:19px;height:19px}
  .hud-empire .name{font-size:14px}
  .hud-empire .lvl{font-size:9px;margin-top:1px}
  .hud-money{flex:1 1 auto}
  .hud-money .amt{font-size:21px}
  .hud-rep,.hud-inv,.hud-orders,.hud-day{flex:0 0 auto;border:0;padding-top:2px;margin-top:0}
  .hud-orders .figs{gap:6px}
  .hud-label{margin-bottom:1px}
  .hud-end{flex:0 0 auto;width:auto;margin-left:auto;padding-left:6px}
  .hud-end .col{flex-direction:row;width:auto}
  .hud-end .col .btn{flex:0 0 auto}
  #conv-mobile{display:none}
  #content{padding:8px 10px 72px}
  .stat .v{font-size:18px}
  #bottombar .btab{min-height:46px;padding:5px 2px 6px}
  .floor-wrap{max-width:100%;margin-left:auto;margin-right:auto}
  .floor-wrap.sq{max-width:100%}
  .screen-head{margin-bottom:8px}
  .screen-title{font-size:22px}
}

/* ============ Motion ============ */
.lang-block{margin-top:14px;border-top:2px dashed var(--kraft-dark);padding-top:12px}
.lang-title{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--ink)}
.lang-title .ic{width:16px;height:16px}
.lang-btns{display:flex;flex-wrap:wrap;gap:8px}
.spacer{flex:1}
.tbl-wrap{overflow-x:auto}
#conveyor .cv-belt{animation:beltslide 1.1s linear infinite}
@keyframes beltslide{
  from{background-position:0 0,0 0,0 0}
  to{background-position:0 22px,0 22px,0 21px}
}
.mini.slide-in{animation:slidestack .3s cubic-bezier(.2,1.35,.4,1)}
@keyframes slidestack{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}}
#conveyor .cv-belt .mini{animation:bob 3.2s ease-in-out infinite}
#conveyor .cv-belt .mini.slide-in{animation:slidestack .3s cubic-bezier(.2,1.35,.4,1), bob 3.2s ease-in-out .3s infinite}
#conveyor .cv-belt .inner .mini:nth-child(2n){animation-delay:.5s}
#conveyor .cv-belt .inner .mini:nth-child(3n){animation-delay:1s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#conv-mobile .strip .mini{animation:bob 3.2s ease-in-out infinite}
#conv-mobile .strip .mini:nth-child(2n){animation-delay:.5s}
.rack-pin.empty{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.pill.late{animation:latepulse 1.6s ease-in-out infinite}
@keyframes latepulse{0%,100%{box-shadow:0 0 0 0 rgba(194,54,43,0)}50%{box-shadow:0 0 0 3px rgba(194,54,43,.35)}}
.hud-money .amt{transition:none}
.stamp.green{animation:stampgreen .18s ease-out}
.stamp.red{animation:stampred .18s ease-out}
@keyframes stampgreen{0%{transform:scale(1.5) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:.82}}
@keyframes stampred{0%{transform:scale(1.5) rotate(6deg);opacity:0}100%{transform:scale(1) rotate(6deg);opacity:.82}}
.hud-inv .bar>i{transition:width .4s ease}
.bar>i{transition:width .4s ease}
.card{transition:box-shadow .12s, transform .12s}
.card.pick:hover{transform:translateY(-2px)}
.pick{cursor:pointer}
.shake{animation:shake .18s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition:none !important}
}