@font-face {
  font-family: 'Eurostile Extended Bold';
  src: url('assets/fonts/EurostileExtendedBold.otf') format('opentype');
  font-weight: 700;
}
@font-face {
  font-family: 'Eurostile Regular';
  src: url('assets/fonts/EurostileRegular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Eurostile Bold Oblique';
  src: url('assets/fonts/EurostileBoldOblique.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Helvetica Neue Condensed';
  src: url('assets/fonts/HelveticaNeueCondensed.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  /* repaired copy of the packaged Eurostile-Black (tables rebuilt via
     fontTools; the original file had trailing junk data in glyf/hmtx that
     browsers' font sanitizers reject) */
  font-family: 'Eurostile Black';
  src: url('assets/fonts/EurostileBlack.woff') format('woff');
  font-weight: 400;
}

:root {
  --bg: #eef0f3;
  --panel-bg: #ffffff;
  --panel-border: #d8dbe1;
  --control-bg: #f4f5f7;
  --control-hover: #e8eaee;
  --text: #1d2330;
  --muted: #676c76;
  --accent-ui: #2f6fd8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.topbar h1 { margin: 0 0 4px; font-size: 22px; }
.topbar .subtitle { margin: 0 0 20px; color: var(--muted); font-size: 14px; }

.workspace {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.preview-pane {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  flex: 1 1 640px;
}

.stage-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stage-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}

/* Enlarged preview: scales the 300x420 card up for display without touching
   its internal geometry (the PNG export clones the card alone, unscaled). */
.stage-scale {
  width: 450px;   /* 300 x 1.5 */
  height: 630px;  /* 420 x 1.5 */
  position: relative;
}
.stage-scale .card {
  transform: scale(1.5);
  transform-origin: top left;
}

/* 3D flip between the front and back faces */
.flip-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.flip-scene {
  width: 450px;
  height: 630px;
  perspective: 1600px;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.flip-inner.flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }

.flip-btn {
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 30, 60, 0.08);
  transition: background 0.15s;
}
.flip-btn:hover { background: var(--control-hover); }

/* ============ CARD BASE ============ */
/* Both faces are 2.5in x 3.5in (180 x 252 pt), displayed at 300 x 420 px.
   Conversion: 1 pt = 5/3 px. Positions come from the source InDesign geometry. */

.card {
  position: relative;
  width: 300px;
  height: 420px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(25, 35, 60, 0.22);
  overflow: hidden;
  user-select: text;
}

.card [contenteditable="true"] {
  outline: none;
  cursor: text;
}
.card [contenteditable="true"]:hover {
  box-shadow: 0 0 0 1px rgba(79,142,247,0.6);
}
.card [contenteditable="true"]:focus {
  box-shadow: 0 0 0 2px var(--accent-ui);
  background: rgba(79,142,247,0.08);
}

/* Knockout/outlined type treatments from the source file */
.hollow-white {
  color: transparent;
  -webkit-text-stroke: 1.25px #fff;
}
.hollow-navy {
  color: transparent;
  -webkit-text-stroke: 0.85px var(--c-primary);
}

/* Team logo circles */
.logo-wrap { overflow: hidden; border-radius: 50%; }
.logo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-wrap img[src=""] { display: none; }
.logo-wrap .logo-ph {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Ccircle%20cx='20'%20cy='20'%20r='19'%20fill='white'%20stroke='%23999'%20stroke-width='1'/%3E%3Cpath%20d='M9%205q7%2015%200%2030M31%205q-7%2015%200%2030'%20fill='none'%20stroke='%23c0392b'%20stroke-width='2'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.logo-wrap.has-logo .logo-ph { display: none; }

/* ============ FRONT ============ */

/* Navy panel behind the photo: (13.68, 9) 157.32 x 230.76 pt, TL r18 / BR r9 */
.cf-frame-bg {
  position: absolute;
  left: 7.6%;
  top: 3.5714%;
  width: 87.4%;
  height: 91.5714%;
  background: var(--c-primary);
  border-radius: 30px 0 15px 0;
}

/* Photo frame: (15.84, 11.16) 153 x 217.08 pt, TL r22.5 / BR r9.
   The default photo is the exact crop embedded in the source PDF, placed at the
   PDF's own image rectangle; uploaded photos switch to cover-fit (.custom). */
.cf-photo-clip {
  position: absolute;
  left: 8.8%;
  top: 4.4286%;
  width: 85%;
  height: 86.1429%;
  border-radius: 37.5px 0 15px 0;
  overflow: hidden;
}
.cf-photo-img {
  position: absolute;
  left: -1.68px;
  top: -1.82px;
  width: 258.36px;
  height: 365.43px;
  object-fit: fill;
}
.cf-photo-img.custom {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.cf-shapes, .cb-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Vertical team name: reads bottom-to-top, baseline anchored at page
   (24.77, 199.08) pt per the PDF text matrix [0 13.02 -14 0 48.77 76.92]:
   14 pt Eurostile Extended Bold at 93% horizontal scale, white outline only.
   left = baseline x (41.28px) minus the measured font ascent (25px). */
.cf-team-name {
  position: absolute;
  left: 5.43%;
  top: 79.0%;
  transform-origin: 0 0;
  transform: rotate(-90deg) scaleX(0.93);
  font-family: 'Eurostile Extended Bold', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 23.33px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
}

/* RC rookie badge: frame (149.36, 13.5) 17.14 x 20.46 pt; shield outline
   traced from the source PDF's own vector path (white border, navy fill,
   pointed bottom). */
/* Brand badge, top-right inside the photo frame. The logo is a wide banner
   (~2.4:1), so height follows from the width rather than a fixed box. */
.cf-rookie {
  position: absolute;
  right: 9.5%;
  top: 6.2%;
  width: 27%;
  z-index: 4;
}
.rc-shield {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
}

/* Logo circle: (9, 207.44) 35.56 pt square */
.cf-logo-circle {
  position: absolute;
  left: 5%;
  top: 82.317%;
  width: 19.756%;
  height: 14.111%;
  z-index: 5;
}

/* MIKEY: 12 pt Eurostile Bold Oblique, white outline only (PDF: stroke-only
   text, 0.75 pt), baseline at page (46.8, 228.06) pt = (78, 380.1) px.
   top = baseline - measured ascent (20px). */
.cf-firstname {
  position: absolute;
  left: 26%;
  top: 85.74%;
  width: 40.8%;
  font-family: 'Eurostile Bold Oblique', Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  z-index: 2;
}

/* ACHTZIGER: 12 pt Eurostile Regular, solid white, baseline (78, 397.5) px;
   ascent 17px. */
.cf-lastname {
  position: absolute;
  left: 26%;
  top: 90.6%;
  width: 40.8%;
  font-family: 'Eurostile Regular', Arial, sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  z-index: 2;
}

/* INF/P: 9 pt Eurostile Extended Bold, white outline, right edge 165.98 pt,
   baseline ~394.2 px; ascent 16px. */
.cf-position {
  position: absolute;
  right: 7.8%;
  top: 90.05%;
  font-family: 'Eurostile Extended Bold', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  -webkit-text-stroke-width: 0.85px;
  z-index: 2;
}

.upload-hotspot {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}
.upload-hotspot:hover { background: rgba(79,142,247,0.9); }
.photo-hotspot { top: 8px; left: 40px; }
.logo-hotspot { left: 6px; bottom: 84px; }

/* ============ BACK ============ */
/* Reading orientation: 252 x 180 pt -> 420 x 300 px, rotated 90deg into the
   portrait card. All positions below are reading-space px (pt x 5/3). */

.card-back { background: var(--c-paper); }

/* rotate(-90deg): back text reads bottom-to-top on the portrait card,
   matching the PDF text matrices [0 s -s 0 ...] */
.cb-rotor {
  position: absolute;
  width: 420px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: var(--c-paper);
}

/* MA-1: right-aligned to reading x 401.25, baseline y 26.8 px (PDF text
   matrix); 11 pt; top = baseline - measured ascent (16px). */
.cb-cardnum {
  position: absolute;
  right: 18.75px;
  top: 10.8px;
  color: #fff;
  font-family: 'Eurostile Black', 'Eurostile Regular', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: 18.33px;
  line-height: normal;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  z-index: 2;
}

/* Logo: reading (12.96, 12.96) 35.56 pt square, on the navy block */
.cb-logo-circle {
  position: absolute;
  left: 21.6px;
  top: 21.6px;
  width: 59.3px;
  height: 59.3px;
  z-index: 2;
}

/* Headline: 12 pt, baseline y 59.6 px, text centered at reading x 256.9 px
   (PDF: spans 113.3..~400); top = baseline - ascent (17px). */
.cb-fullname {
  position: absolute;
  left: 92px;
  top: 41.6px; /* baseline 59.6 - Eurostile Black ascent 18 */
  width: 329.8px;
  margin: 0;
  text-align: center;
  font-family: 'Eurostile Black', 'Eurostile Regular', 'Arial Narrow', sans-serif;
  font-weight: 400;
  color: var(--c-primary);
  font-size: 20px;
  line-height: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

/* Bio: two center-aligned lines, baselines y 79.7 / 91.7 px (12 px leading);
   with line-height 12 and font metrics (a9,d2): first baseline = top + 9.5. */
.cb-bio {
  position: absolute;
  left: 92px;
  top: 70.2px;
  width: 313.2px;
  text-align: center;
  font-family: 'Helvetica Neue Condensed', Arial, sans-serif;
  font-size: 10px;
  line-height: 12px;
  color: var(--c-primary);
  z-index: 2;
}
.cb-bio b { font-weight: 700; }

/* Band row: tan cells at reading y 98.9..115.6 px; Season cell 19..73.8,
   stats cell 73.8..401 (contiguous, no gap). */
.cb-band-row {
  position: absolute;
  left: 19px;
  top: 98.9px;
  width: 382px;
  height: 16.7px;
  display: flex;
  z-index: 2;
}
.cb-band-cell {
  background: var(--c-band);
  color: var(--c-primary);
  font-family: 'Helvetica Neue Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 8.33px;
  line-height: 16.7px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.season-band { width: 54.8px; flex: 0 0 54.8px; padding-left: 2.4px; }
.stats-band { flex: 1 1 auto; text-align: center; color: #1a1a1a; }

/* Table rows: header baseline y 127.7, data 145.3, total 162.0 px; columns:
   Season 54.8 px then 15 x 21.81 px, numeric text centered. No grid lines. */
.cb-table-wrap {
  position: absolute;
  left: 19px;
  top: 115.6px;
  width: 382px;
  z-index: 2;
}
.cb-stats-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-family: 'Helvetica Neue Condensed', Arial, sans-serif;
  font-size: 8.33px;
}
.col-w-season { width: 54.8px; }
.col-w-stat { width: 21.81px; }
.cb-stats-table th, .cb-stats-table td {
  height: 17.6px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  border: none;
  font-weight: 400;
  color: #1a1a1a;
}
.cb-stats-table .total-row th, .cb-stats-table .total-row td { height: 16.7px; }
.cb-stats-table .col-season {
  text-align: left;
  padding-left: 2.4px;
}
.cb-stats-table th.col-season,
.cb-stats-table td.col-season { color: var(--c-primary); }
.cb-stats-table .total-row td {
  background: var(--c-primary);
  color: var(--c-paper);
}

/* Glossary: columns at reading x 18.8 / 152.9 / 287.1 px; abbreviation tab
   18.3 px; baselines start y 180.3 px with 8.33 px leading. */
.cb-glossary {
  position: absolute;
  left: 18.75px;
  top: 173.6px;
  width: 382.5px;
  display: grid;
  grid-template-rows: repeat(6, 8.33px);
  grid-template-columns: 134.15px 134.15px auto;
  grid-auto-flow: column;
  font-family: 'Helvetica Neue Condensed', Arial, sans-serif;
  font-size: 7.5px;
  line-height: 8.33px;
  color: #1a1a1a;
  z-index: 2;
}
.cb-glossary > div {
  padding-left: 18.3px;
  text-indent: -18.3px;
}
.cb-glossary b {
  font-weight: 700;
  display: inline-block;
  width: 18.3px;
  text-indent: 0;
}

/* Highlight: baselines y 250.1 / 262.1 / 274.1 px (12 px leading), bold navy;
   first baseline = top + 9.5 with (a9,d2). */
/* When the stats table is hidden, the highlight blurb reclaims that space
   and grows into it (no fixed height, so it just wraps more lines). */
.stats-hidden .cb-highlight { top: 95px; }

.cb-highlight {
  position: absolute;
  left: 18.75px;
  top: 240.6px;
  width: 382.5px;
  font-family: 'Helvetica Neue Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  color: var(--c-primary);
  z-index: 2;
}

/* Print run: right-aligned to reading x 401.25, baseline y 285 px, Courier
   10 pt gold; top = baseline - ascent (14px). */
.cb-printrun {
  position: absolute;
  right: 18.75px;
  top: 271px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 400;
  font-size: 16.67px;
  line-height: normal;
  color: var(--c-accent);
  text-align: right;
  white-space: nowrap;
  z-index: 3;
}

/* ============ PHOTO / LOGO CROPPER ============ */

.crop-modal {
  /* explicit display:none as the default so the [hidden] attribute is never
     silently overridden by this rule's own specificity */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 33, 0.55);
  padding: 20px;
}
.crop-modal:not([hidden]) {
  display: flex;
}
.crop-dialog {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 20px;
  width: 340px;
  max-width: 100%;
  box-shadow: 0 20px 50px rgba(20, 30, 60, 0.35);
}
.crop-dialog h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text);
}
.crop-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
}
.crop-stage {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.crop-frame {
  position: relative;
  overflow: hidden;
  background: #d9dbe0;
  box-shadow: 0 0 0 2000px rgba(20, 24, 33, 0.4);
  touch-action: none;
  cursor: grab;
}
.crop-frame:active { cursor: grabbing; }
.crop-frame img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
}
.crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 16px;
}
.crop-zoom-row input[type="range"] {
  flex: 1 1 auto;
}
.crop-actions {
  display: flex;
  gap: 10px;
}
.crop-actions .action-btn { margin-bottom: 0; }

/* ============ EDITOR PANEL ============ */

/* Two columns so the controls fit on screen without a long scroll.
   align-items:start keeps panels their natural height instead of stretching. */
.editor-pane {
  flex: 0 0 580px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 14px;
}
@media (max-width: 1180px) {
  .editor-pane { flex-basis: 300px; grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.panel h2 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.panel h3 {
  margin: 12px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 3px;
}
.panel h3:first-of-type { margin-top: 0; }

.text-row, .text-col {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.text-col { flex-direction: column; align-items: stretch; gap: 4px; }
.text-row > span, .text-col > span {
  flex: 0 0 82px;
  color: var(--muted);
}
.text-row select {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.text-row select:focus { outline: none; border-color: var(--accent-ui); }

.text-row input, .text-col textarea {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
}
.text-col textarea { resize: vertical; line-height: 1.4; }
.text-row input:focus, .text-col textarea:focus {
  outline: none;
  border-color: var(--accent-ui);
}

.file-btn, .action-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--control-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 9px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.file-btn:hover, .action-btn:hover { background: var(--control-hover); }
.file-btn input[type="file"] { display: none; }

.action-btn.primary {
  background: var(--accent-ui);
  border-color: var(--accent-ui);
  color: #fff;
  font-weight: 600;
}
.action-btn.primary:hover { background: #3a7de0; }

.check-row, .color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}
.color-row input[type="color"] {
  width: 40px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
}

.hint {
  font-size: 11.5px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* ============ CARD PACK ============ */

.pack-status {
  font-size: 12px;
  color: var(--muted);
  background: var(--control-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pack-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.pack-empty {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0;
  text-align: center;
}

.pack-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  background: var(--control-bg);
}
.pack-item.active {
  border-color: var(--accent-ui);
  background: rgba(47, 111, 216, 0.08);
}

.pack-thumb {
  width: 34px;
  height: 47.6px;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--panel-border);
}

.pack-item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.pack-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pack-item-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-item-actions {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}
.icon-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--panel-border);
  background: #fff;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.icon-btn:hover { background: var(--control-hover); }

.pack-export-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pack-export-row .action-btn { margin-bottom: 0; }

/* ============ ORDERING ============ */

.action-btn.order-btn {
  background: #1f8a4c;
  border-color: #1f8a4c;
  color: #fff;
  font-weight: 600;
}
.action-btn.order-btn:hover { background: #1a7642; }
.action-btn.order-btn:disabled { opacity: 0.6; cursor: default; }

.order-dialog { width: 380px; }

.order-summary {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text);
}
.order-summary .order-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.order-summary .order-total {
  border-top: 1px solid var(--panel-border);
  margin-top: 6px;
  padding-top: 7px;
  font-weight: 700;
}
.order-summary .order-muted { color: var(--muted); }

.order-progress { margin: 12px 0 4px; }
.order-progress-bar {
  height: 7px;
  background: var(--control-hover);
  border-radius: 4px;
  overflow: hidden;
}
.order-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-ui);
  transition: width 0.2s ease;
}
.order-progress-label {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
}

.csv-confirm {
  border: 1px solid var(--panel-border);
  background: var(--control-bg);
  border-radius: 8px;
  padding: 10px;
  margin: 4px 0 10px;
}
.csv-confirm-summary {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.csv-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.csv-confirm-actions .action-btn { margin-bottom: 0; }

@media (max-width: 980px) {
  .workspace { flex-direction: column; }
  .editor-pane { flex: 1 1 auto; width: 100%; }
}

/* ============ PRINT ============ */

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .app { max-width: none; padding: 0; margin: 0; }
  .preview-pane { gap: 0; display: block; }
  /* flatten the 3D flip so both faces print, one per page */
  .flip-area { display: block; }
  .flip-scene { width: auto; height: auto; perspective: none; }
  .flip-inner, .flip-inner.flipped { transform: none; transform-style: flat; transition: none; }
  .flip-face {
    position: static;
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    page-break-after: always;
  }
  .stage-scale { width: 2.5in; height: 3.5in; }
  .stage-scale .card {
    box-shadow: none;
    transform: scale(0.8); /* 300x420 px -> 2.5x3.5 in at 96 dpi */
    transform-origin: top left;
  }
}