:root{
  --ink:#1A1A1A;
  --subtle:#6B7280;
  --accent:#0F62FE;
  --due-bg:#E6F4EA;
  --line:#D9DCE3;
  --white:#FFFFFF;
  --writebg:#FFFDF5;
  --app-bg:#F3F4F6;
  --panel-bg:#FFFFFF;
  --ticket-font:'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;
  --ui-font:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--ui-font);
  background:var(--app-bg);
  color:var(--ink);
}

/* ============ APP SHELL ============ */
.app{
  display:grid;
  grid-template-columns: 420px 1fr;
  min-height:100vh;
}

.panel-input{
  background:var(--panel-bg);
  border-right:1px solid var(--line);
  padding:24px;
  overflow-y:auto;
  max-height:100vh;
}

.panel-header{margin-bottom:20px;}
.brand{font-size:22px;font-weight:800;letter-spacing:0.5px;color:var(--ink);}
.brand-sub{font-size:13px;color:var(--accent);font-weight:600;margin-top:2px;}

.step{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step-label{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.hint{font-size:12.5px;color:var(--subtle);margin:0 0 10px 0;line-height:1.4;}

textarea#rawInput{
  width:100%;
  min-height:140px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:6px;
  resize:vertical;
  margin-bottom:10px;
  background:#FAFAFA;
}

.btn{
  display:inline-block;
  border:none;
  border-radius:6px;
  padding:10px 18px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  font-family:var(--ui-font);
}
.btn-primary{background:var(--ink);color:#fff;width:100%;}
.btn-primary:hover{background:#333;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:#0b4fd1;}

.parse-status{
  font-size:12.5px;
  margin-top:8px;
  min-height:16px;
  color:var(--accent);
  font-weight:600;
}
.parse-status.warn{color:#B45309;}

fieldset{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px 14px;
  margin:0 0 14px 0;
}
legend{
  font-size:12px;
  font-weight:700;
  color:var(--subtle);
  text-transform:uppercase;
  letter-spacing:0.4px;
  padding:0 6px;
}
.micro{font-size:10.5px;color:var(--subtle);font-weight:400;text-transform:none;letter-spacing:0;}

.row{display:flex;gap:8px;margin-bottom:8px;}
.row:last-child{margin-bottom:0;}
label{
  display:flex;
  flex-direction:column;
  font-size:11px;
  font-weight:600;
  color:var(--subtle);
  gap:3px;
  flex:1;
}
label.narrow{flex:0 0 64px;}
label.grow{flex:1 1 100%;}

input[type=text], input[type=number], input[type=date], select, textarea{
  font-family:var(--ui-font);
  font-size:13px;
  font-weight:400;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:5px;
  padding:6px 8px;
  width:100%;
}
textarea{resize:vertical;font-size:12.5px;}

/* ============ PREVIEW PANEL ============ */
.panel-preview{
  overflow-y:auto;
  max-height:100vh;
}
.preview-toolbar{
  position:sticky;
  top:0;
  background:var(--panel-bg);
  border-bottom:1px solid var(--line);
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:10;
}
.filename{font-size:13px;font-weight:700;color:var(--subtle);font-family:ui-monospace, monospace;}

.page-wrap{
  display:flex;
  justify-content:center;
  padding:32px 16px 64px;
}

/* ============ TICKET (print-accurate) ============
   8.5in x 11in page, 0.1875in margins -> content 8.125in x 10.625in
   Rendered at 96px/in for screen, exact size; scaled down via transform for comfortable viewing. */
.ticket{
  width:8.125in;
  min-height:10.625in;
  background:#fff;
  font-family:var(--ticket-font);
  color:var(--ink);
  box-shadow:0 4px 24px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  padding:0;
}

.t-bar{height:6px;background:var(--accent);flex:0 0 auto;}

.t-header{
  display:grid;
  grid-template-columns: 4fr 9fr 4fr;
  gap:10px;
  padding:4px 0 3px;
}
.t-title{display:flex;flex-direction:column;justify-content:flex-end;}
.t-title .name{font-size:26px;font-weight:800;line-height:1;}
.t-title .sub{font-size:14px;font-weight:700;color:var(--accent);margin-top:3px;}

.t-printon{border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.t-printon-head{background:var(--accent);color:#fff;font-size:12px;font-weight:700;text-align:center;padding:4px 0;}
.t-printon-opts{display:grid;grid-template-columns:1fr 1fr 1fr;}
.t-printon-opts div{border-right:1px solid var(--line);text-align:center;font-size:24px;font-weight:800;padding:10px 0;}
.t-printon-opts div:last-child{border-right:none;}

.t-shipdate{background:var(--due-bg);border:1px solid var(--line);border-radius:2px;text-align:center;padding:6px 0;}
.t-shipdate .label{font-size:12px;font-weight:700;color:var(--ink);}
.t-shipdate .val{font-size:23px;font-weight:800;line-height:1.15;}
.t-shipdate .mustby{font-size:12px;font-weight:700;color:var(--subtle);}
.t-shipdate .mustby b{color:var(--ink);}

.t-orderrow{padding:3px 0 2px;}
.t-orderrow .lbl{font-size:12px;font-weight:700;color:var(--subtle);}
.t-orderrow-main{display:flex;align-items:flex-end;gap:8px;margin-top:2px;}
.t-orderrow-main .num{font-size:20px;font-weight:800;}
.t-orderrow-main .of{font-size:13px;font-weight:700;color:var(--subtle);}
.t-orderrow-main .barcode{flex:1;display:flex;justify-content:center;align-items:flex-end;}
.t-orderrow-main .barcode svg{height:52px;}

.t-infostrip{
  display:grid;
  grid-template-columns: 4fr 5fr 4fr 4fr;
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:6px;
}
.t-infostrip .cell{padding-left:2px;}
.t-infostrip .k{font-size:12px;font-weight:700;color:var(--subtle);}
.t-infostrip .v{font-size:12px;margin-top:2px;padding-left:2px;}

.t-sectionhead{
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;
  padding:2px 8px;margin-top:4px;
}

.t-itemdesc{font-size:14.5px;font-weight:800;padding:3px 2px 3px;}

.t-specstrip{
  display:flex;
  align-items:flex-start;
  padding-top:1px;
  border-top:1px solid var(--line);
}
.t-specstrip .qtybox{flex:0 0 11%;}
.t-specstrip .cell{flex:1 1 0;}
.t-specstrip .cell:nth-child(2){flex:1.3 1 0;}
.t-specstrip .qtybox{border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:6px;min-height:56px;}
.t-specstrip .qtybox .k{font-size:12px;font-weight:700;color:var(--subtle);align-self:flex-start;padding:2px 0 0 4px;}
.t-specstrip .qtybox .v{font-size:28px;font-weight:800;padding:4px 0 8px;}
.t-specstrip .cell{padding-left:6px;}
.t-specstrip .k{font-size:12px;font-weight:700;color:var(--subtle);}
.t-specstrip .v{font-size:12px;margin-top:2px;}

.t-prodgrid{
  display:flex;
  flex-direction:column;
  margin-top:6px;
}
.t-prodrow{
  display:flex;
  gap:0;
}
.t-prodrow .pbox{flex:0 0 29.41%; align-self:flex-start;}
.t-prodrow .gap{flex:0 0 5.88%;}
.t-prodgrid .gap{}
.pbox{border:1px solid var(--line);display:flex;flex-direction:column;margin-bottom:2px;min-height:152px;}
.pbox .head{flex-shrink:0;}
.pbox .foot{flex-shrink:0;}
.pbox .head{background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;padding:3px 8px;}
.pbox .body{padding:6px 8px;font-size:12px;font-style:italic;line-height:1.35;flex-shrink:0;}
.pbox .body.emph{
  font-style:normal;font-weight:700;font-size:12.5px;text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.pbox .writeline{background:var(--writebg);border-top:1px solid var(--line);min-height:15px;}
.pbox .extra{padding:4px 8px;font-size:12px;font-weight:700;color:var(--subtle);border-top:1px solid var(--line);}
.pbox .foot{
  display:flex;justify-content:space-between;
  font-size:12px;font-weight:700;color:var(--subtle);
  padding:3px 8px;border-top:1px solid var(--line);
}

.t-shiprow{
  display:grid;
  grid-template-columns: 5fr 5fr 2fr 2fr 3fr;
  border:1px solid var(--line);
  border-top:none;
  margin-top:0;
  break-inside:avoid;
  page-break-inside:avoid;
}
.t-shiprow > div{border-right:1px solid var(--line);padding:2px 8px;display:flex;flex-direction:column;}
.t-shiprow > div:last-child{border-right:none;}
.ship-barcode{align-items:center;justify-content:flex-end;}
.ship-barcode svg{height:42px;margin-top:3px;}
.ship-barcode .num{font-size:16px;font-weight:800;margin-top:2px;}
.ship-barcode .via{font-size:12px;font-weight:700;margin-top:auto;padding-top:10px;}
.ship-to .k{font-size:12px;font-weight:700;color:var(--subtle);}
.ship-to .v{font-size:12px;margin-top:3px;line-height:1.4;}
.ship-method .k{font-size:12px;font-weight:700;color:var(--subtle);}
.ship-method .v{font-size:12px;margin-top:2px;font-weight:700;}
.ship-method .k2{font-size:12px;font-weight:700;color:var(--subtle);margin-top:8px;}
.ship-qty .k{font-size:12px;font-weight:700;color:var(--subtle);}
.ship-qty .writebox{background:var(--writebg);min-height:20px;margin:2px 0 8px;}
.ship-mailer .k{font-size:12px;font-weight:700;color:var(--subtle);}
.ship-mailer .v{font-size:22px;font-weight:800;margin-top:4px;}

.t-footbar{height:6px;background:var(--accent);margin-top:auto;}

.ticket-body{padding:0 0.1875in;flex:1;display:flex;flex-direction:column;}

/* ============ PRINT ============ */
@media print{
  @page{ size: 8.5in 11in; margin: 0.1875in; }
  body{background:#fff;}
  .no-print{display:none !important;}
  .app{display:block;}
  .panel-preview{overflow:visible;max-height:none;}
  .page-wrap{padding:0;}
  .ticket{box-shadow:none;width:100%;min-height:0;}
}

/* ============ RESPONSIVE (screen only) ============ */
@media screen and (max-width: 980px){
  .app{grid-template-columns:1fr;}
  .panel-input{max-height:none;border-right:none;border-bottom:1px solid var(--line);}
  .panel-preview{max-height:none;}
  .ticket{width:100%;max-width:8.125in;}
}