* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Segoe UI', Arial, sans-serif; background: #1a1a2e; color: #e0e0e0; overflow: hidden; }

/* ── Header ── */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
  border-bottom: 2px solid #e94560;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
#header-top {
  display: flex; align-items: stretch; gap: 0;
  padding: 0; min-height: 56px;
}
#title-group {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.logo {
  background: #e94560; color: white; font-weight: 800; font-size: 12px;
  padding: 3px 9px; border-radius: 4px; letter-spacing: 0.5px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; line-height: 1.35;
}
.logo-title { white-space: nowrap; }
.logo-count  { font-weight: 500; font-size: 9px; opacity: 0.92; letter-spacing: 0; white-space: nowrap; }
#title-group h1 { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
#title-group .subtitle { font-size: 10px; color: #8ab4d8; white-space: nowrap; }

/* ── Active set title (central in header) ── */
#active-set-title-wrap {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 16px;
}
#active-set-title {
  font-size: 17px; font-weight: 700; color: #e8edf5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; letter-spacing: 0.15px; line-height: 1.2;
}
#map-subtitle {
  font-size: 10px; color: #6a90b8; text-align: center; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.1px;
}

/* ── Cart empty badge ── */
#cart-empty-badge {
  flex-shrink: 0; align-self: center; color: rgba(255,255,255,0.28);
  font-size: 11px; font-weight: 500; padding: 0 9px; height: 26px;
  display: inline-flex; align-items: center; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  white-space: nowrap; user-select: none;
}

/* ── Inline chip sections (history + cart in header) ── */
.hdr-chip-section {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; flex: 1; min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
/* Cart section capped at ~45% viewport so it can never crowd the title */
#cart-section { border-right: none; margin-left: auto; flex: 0 1 auto; max-width: 45vw; }
#history-section { display: none !important; } /* kept in DOM for JS, hidden from UI */
.chip-chips-wrap {
  display: flex; flex-wrap: wrap; gap: 3px;
  align-content: flex-start; flex: 1; min-width: 0;
  max-height: 44px; overflow: hidden; /* exactly 2 rows of 20px chips + 4px gap */
}
.chip-toggle-btn {
  flex-shrink: 0; align-self: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  color: #8ab4d8; border-radius: 6px; padding: 0 10px; height: 26px;
  display: inline-flex; align-items: center; box-sizing: border-box;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  cursor: pointer; white-space: nowrap; transition: all 0.18s;
}
.chip-toggle-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.chip-toggle-btn.hist-active { background: rgba(33,150,243,0.35); border-color: #2196f3; color: #fff; }
.chip-toggle-btn.cart-active { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
.chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 0 5px; height: 20px; box-sizing: border-box;
  font-size: 10px; font-family: 'Courier New', monospace; color: #ccc;
  cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.15s;
}
.chip:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.chip.hist-lit  { background: rgba(33,150,243,0.3);  border-color: #2196f3; color: #90caf9; }
.chip.cart-chip { border-color: rgba(76,175,138,0.5); color: #9de0c0; }
.chip.cart-lit  { background: rgba(76,175,138,0.3);  border-color: #4caf8a; color: #a5d6a7; }
#btn-download-cart {
  flex-shrink: 0; align-self: center; margin-left: 4px;
  background: rgba(76,175,138,0.15); border: 1px solid rgba(76,175,138,0.4);
  color: #4caf8a; border-radius: 6px; padding: 0 11px; height: 26px;
  display: inline-flex; align-items: center; box-sizing: border-box;
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
#btn-download-cart:hover { background: rgba(76,175,138,0.35); color: #fff; border-color: #4caf8a; }
#btn-clear-cart {
  flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 600;
  padding: 0 9px; height: 26px;
  display: inline-flex; align-items: center; box-sizing: border-box;
  background: rgba(220,80,60,0.15); border: 1px solid rgba(220,80,60,0.35);
  color: #e08070; border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
#btn-clear-cart:hover { background: rgba(220,80,60,0.35); color: #fff; border-color: #e05040; }

/* pdf-info-row: second row inside pdf-toolbar */
#pdf-info-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  padding: 4px 10px 6px; border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11px; color: #8ab4d8; overflow: hidden;
}
.pi-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-item b { color: #e0e0e0; font-weight: 600; }
.pi-sep { color: rgba(255,255,255,0.2); flex-shrink: 0; }
/* Spacer pushes the right-aligned source/license link buttons to the far
   right end of the info row. */
.pi-spacer { flex: 1 1 auto; }
/* Source / License link buttons. Hidden by default (display set inline);
   shown when the set's meta has a source_url / license_url respectively. */
.pi-link {
  display: inline-flex; align-items: center;
  padding: 2px 8px; flex-shrink: 0;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  color: #8ab4d8; text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pi-link:hover { background: rgba(76,175,138,0.25); border-color: #4caf8a; color: #fff; }

/* ── Map container ── */
#map {
  position: fixed; top: var(--hh, 60px); left: 0; right: 0; bottom: 0;
  z-index: 1;
  transition: background-color 2s ease;
  /* iOS Safari draws a blue selection rectangle when the user long-presses
     on any element. On the map that overlays the whole panel and is ugly —
     suppress it. Same treatment for the PDF panel canvases below.
     -webkit-touch-callout: none also blocks the "Open Image" sheet that
     would appear when long-pressing on an embedded image. */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#pdf-panel, #pdf-panel-2 {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Polar map — separate Leaflet instance shown over #map when a polar set is
   active (Web Mercator can't render the poles). Mirrors #map's box. */
#polar-map {
  position: fixed; top: var(--hh, 60px); left: 0; right: 0; bottom: 0;
  z-index: 2; display: none; background: #0a1020;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; user-select: none;
}
body.polar-mode #polar-map { display: block; }
#btn-exit-polar {
  position: fixed; top: calc(var(--hh, 60px) + 10px); left: 50%; transform: translateX(-50%);
  z-index: 1200; display: none;
  background: rgba(15,52,96,0.95); color: #cfe2ff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 7px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; backdrop-filter: blur(6px);
}
body.polar-mode #btn-exit-polar { display: block; }
#btn-exit-polar:hover { border-color: #e94560; color: #fff; }

/* ── Toolbar (floats over map, top-right) ── */
#toolbar {
  position: fixed; top: calc(var(--hh, 60px) + 10px); right: 10px;
  z-index: 1500;
  display: flex; flex-direction: column; gap: 6px;
  transition: right 0.2s;
}
.tb-btn {
  background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.18);
  color: #d0d8e8; border-radius: 7px; padding: 7px 13px; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  backdrop-filter: blur(6px); transition: all 0.18s; white-space: nowrap;
  text-align: left; width: 160px;
}
.tb-btn:hover { background: rgba(233,69,96,0.85); border-color: #e94560; color: #fff; }
.tb-btn.on { background: #e94560; border-color: #c73150; color: #fff; }
.tb-btn-kofi { width: auto; align-self: flex-end; display: inline-flex; align-items: center; background: rgba(15,52,96,0.93); border-color: rgba(255,255,255,0.18); color: #d0d8e8; }
.tb-btn-kofi:hover { background: rgba(233,69,96,0.85); border-color: #e94560; color: #fff; }

/* ── Search (floats over map, top-left) ── */
#search-wrap {
  position: fixed; top: calc(var(--hh, 60px) + 10px); left: 10px;
  z-index: 1500; display: flex; flex-direction: column; gap: 4px;
}
#search-row { display: flex; gap: 5px; align-items: center; }
#search-input {
  background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff; border-radius: 7px; padding: 7px 13px;
  font-size: 13px; width: 200px; outline: none;
  backdrop-filter: blur(6px);
}
#search-input::placeholder { color: #8ab4d8; }
#search-input:focus { border-color: #e94560; box-shadow: 0 0 0 2px rgba(233,69,96,0.25); }
#btn-clear-pins {
  background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.18);
  color: #8ab4d8; border-radius: 7px; padding: 7px 10px; cursor: pointer;
  font-size: 12px; backdrop-filter: blur(6px); white-space: nowrap;
  display: none; transition: all 0.18s;
}
#btn-clear-pins:hover { background: rgba(233,69,96,0.7); color: #fff; border-color: #e94560; }
/* Pin-drop mode toggle (square icon button) */
#btn-pin-mode {
  background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.18);
  color: #cfe2ff; border-radius: 7px; width: 36px; height: 36px; padding: 0;
  cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: all 0.18s;
}
#btn-pin-mode:hover { border-color: #ff9800; color: #fff; }
#btn-pin-mode.active {
  background: #ff9800; color: #fff; border-color: #ffb74d;
  box-shadow: 0 0 0 2px rgba(255,152,0,0.35);
}
/* Crosshair cursor while dropping pins */
.leaflet-container.cm-pin-cursor,
.leaflet-container.cm-pin-cursor .leaflet-interactive { cursor: crosshair; }
/* "Show all here" button inside a pin row */
.pin-show {
  background: rgba(76,175,138,0.18); border: 1px solid rgba(76,175,138,0.5);
  color: #9fe0c4; border-radius: 4px; padding: 1px 7px; cursor: pointer;
  font-size: 10px; flex-shrink: 0; line-height: 1.5; white-space: nowrap;
}
.pin-show:hover { background: rgba(76,175,138,0.42); color: #fff; }
#search-status {
  font-size: 11px; color: #8ab4d8; padding: 3px 6px;
  background: rgba(15,52,96,0.85); border-radius: 5px;
  display: none; backdrop-filter: blur(4px);
}
/* Search result pin marker */
.search-pin {
  background: #ff9800; border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
/* Pin list rows in search status */
.pin-row { display:flex; align-items:center; gap:4px; padding:2px 0; line-height:1.4; }
.pin-row + .pin-row { border-top: 1px solid rgba(255,255,255,0.07); }
.pin-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8ab4d8; font-size:11px; }
.pin-x { background:none; border:none; color:#6a8ab0; cursor:pointer; font-size:11px; padding:0 2px; flex-shrink:0; line-height:1; }
.pin-x:hover { color:#e94560; }
.pin-status-msg { font-size:11px; padding:1px 0; }

/* ── Viewer panels (symmetric location-1 / location-2 instances) ── */
/* Both panels share identical base CSS — they're interchangeable instances,
   not primary/secondary. Slot-1 (right) is the default position. Dual-pdf
   mode adds slot-1/slot-2 classes that split the screen 50/50. */
#pdf-panel, #pdf-panel-2 {
  position: fixed; right: 0; top: var(--hh, 60px); bottom: 0;
  width: 52%; background: #111;
  z-index: 1200;
  display: none; flex-direction: column;
  box-shadow: -4px 0 30px rgba(0,0,0,0.65);
}
#pdf-panel   { border-left: 3px solid #e94560; }
#pdf-panel-2 { border-left: 1px solid rgba(255,255,255,0.1); }
#pdf-panel.open, #pdf-panel-2.open { display: flex; }
#pdf-panel.fullscreen, #pdf-panel-2.fullscreen {
  top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important;
  z-index: 3000;
}

/* Resize handle on left edge */
#pdf-resize-handle {
  position: absolute; left: -5px; top: 0; bottom: 0; width: 10px;
  cursor: col-resize; z-index: 10;
  background: transparent;
}
#pdf-resize-handle:hover, #pdf-resize-handle.dragging {
  background: rgba(233,69,96,0.4);
}

#pdf-toolbar {
  display: flex; flex-direction: column;
  background: #0f3460; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pdf-badge {
  background: #e94560; color: #fff; font-family: monospace;
  font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.pdf-name { font-size: 12px; color: #8ab4d8; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-close-pdf, #btn-fullscreen-pdf, #btn-fit-pdf, #btn-dl-pdf, #btn-add-cart, #btn-refresh-pdf {
  flex-shrink: 0; border-radius: 6px; cursor: pointer;
  font-size: 12px; padding: 5px 11px; font-weight: 600; white-space: nowrap;
  transition: all 0.18s;
}
#btn-fullscreen-pdf, #btn-fit-pdf { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-fullscreen-pdf:hover, #btn-fit-pdf:hover { background: rgba(33,150,243,0.4); border-color: #2196f3; color: #fff; }
#btn-refresh-pdf { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; padding: 5px 9px; }
#btn-refresh-pdf:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
#btn-close-pdf { background: rgba(255,255,255,0.1); border: none; color: #ccc; }
#btn-close-pdf:hover { background: #e94560; color: #fff; }
#btn-dl-pdf { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-dl-pdf:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
#btn-add-cart { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-add-cart.in-cart { background: rgba(76,175,138,0.25); border-color: #4caf8a; color: #4caf8a; }
#btn-add-cart:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }

/* ── PDF frame + states ── */
#pdf-body { position: relative; flex: 1; overflow: hidden; background: #1a1a1a; cursor: grab; }
#pdf-body.dragging { cursor: grabbing; }
#pdf-canvas-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#pdf-canvas {
  position: absolute;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7);
  transform-origin: top left;
}
/* Image viewer canvases — same positioning as pdf-canvas; hidden until active */
#img-canvas, #img-canvas-2 {
  position: absolute;
  display: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7);
  transform-origin: 0 0;
}
#pdf-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: none; }

/* Loading spinner / progress */
#pdf-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(17,17,17,0.92); z-index: 10;
}
#pdf-loading-spinner {
  display: flex; flex-direction: column; align-items: center;
}
.spinner {
  width: 42px; height: 42px; border: 3px solid #333;
  border-top-color: #e94560; border-radius: 50%;
  animation: spin 0.75s linear infinite; margin-bottom: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
#pdf-loading p { color: #888; font-size: 13px; }

/* Error overlay — sits on top of shaded background */
#pdf-error {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(10,10,20,0.88); z-index: 20;
  padding: 24px; text-align: center;
}
#pdf-error.show { display: flex; }
.err-icon { font-size: 48px; margin-bottom: 14px; }
.err-title { font-size: 16px; font-weight: 700; color: #e94560; margin-bottom: 8px; }
.err-msg { font-size: 13px; color: #aaa; margin-bottom: 20px; max-width: 380px; line-height: 1.7; text-align: left; }
.err-msg code { background: #1a1a1a; padding: 5px 9px; border-radius: 4px; font-size: 13px; display: block; margin: 4px 0; color: #4caf8a; }
.err-msg b { color: #ccc; }
.err-links { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }
.err-link {
  display: block; padding: 9px 16px; border-radius: 7px; font-size: 12px;
  font-weight: 600; text-decoration: none; text-align: center; transition: all 0.18s;
}
.err-link-primary { background: #e94560; color: #fff; border: none; cursor: pointer; }
.err-link-primary:hover { background: #c73150; }
.err-link-secondary {
  background: transparent; color: #8ab4d8; border: 1px solid #8ab4d8;
}
.err-link-secondary:hover { border-color: #e94560; color: #e94560; }
.err-urls { margin-top: 16px; font-size: 10px; color: #555; text-align: left; width: 100%; max-width: 320px; }
.err-urls code { font-family: monospace; color: #666; font-size: 9px; display: block; word-break: break-all; margin-top: 2px; }
/* Debug info block — shown for fetch/decode errors */
#err-debug {
  background: #0d0d0d; border: 1px solid #222; border-radius: 6px;
  padding: 9px 13px; margin-bottom: 16px;
  font-family: 'Consolas', 'Monaco', monospace; font-size: 11px;
  color: #8ab4d8; word-break: break-all;
  max-width: 440px; width: 100%; line-height: 1.85;
  text-align: left;
  user-select: text; cursor: text;
}
/* On-demand download button */
#btn-ondemand-dl { background: #4caf8a; color: #fff; border: none; cursor: pointer; }
#btn-ondemand-dl:hover:not(:disabled) { background: #3d9b76; }
#btn-ondemand-dl:disabled { background: #2a5a48; color: #7fb3a0; cursor: not-allowed; }
#err-dl-status { font-size: 12px; text-align: center; padding: 3px 0; width: 100%; max-width: 320px; }


/* Scale bar — themed to match the navy controls (overrides Leaflet default
   white). Two stacked lines when both metric + imperial are on. */
.leaflet-control-scale { margin: 0 12px 14px 0; }
.leaflet-control-scale-line {
  background: rgba(15, 52, 96, 0.82);
  color: #e8f0ff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: none;
  border-radius: 0 0 3px 3px;
  padding: 1px 7px;
  font: 700 11px/1.45 'Courier New', monospace;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.leaflet-control-scale-line:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  margin-top: -1px;
}

/* Leaflet popup — thumbnail card style */
.leaflet-popup-content-wrapper {
  background: #0f3460; border: 1px solid rgba(233,69,96,0.5); color: #e0e0e0;
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  overflow: hidden; padding: 0;
}
.leaflet-popup-tip { background: #0f3460; }
.leaflet-popup-content { margin: 0; }
.pu-id { font-family: monospace; font-size: 14px; font-weight: 700; color: #e94560; }
.pu-sub { font-size: 11px; color: #8ab4d8; margin: 2px 0 0; }
.pu-compare {
  display: block; width: calc(100% - 16px); margin: 4px 8px 8px;
  background: rgba(76,175,138,0.18); border: 1px solid rgba(76,175,138,0.55);
  color: #4caf8a; border-radius: 4px; padding: 5px 0; font-size: 11px;
  font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.pu-compare:hover { background: rgba(76,175,138,0.4); color: #fff; border-color: #4caf8a; }

/* ── Segmented grid mode selector ── */
.tb-grid-select {
  display: inline-flex; gap: 2px; align-items: center;
  background: rgba(255,255,255,0.05); border-radius: 4px; padding: 3px;
}
.tb-grid-btn {
  background: rgba(15,52,96,0.75); border: 1px solid rgba(255,255,255,0.18);
  color: #d0d8e8; padding: 6px 11px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.18s; border-radius: 3px;
  font-family: 'Segoe UI', Arial, sans-serif; backdrop-filter: blur(4px);
}
.tb-grid-btn:hover { background: rgba(233,69,96,0.1); color: #fff; }
.tb-grid-btn.on {
  background: #e94560; color: white; border-color: #e94560;
}

/* ── Mobile-only nudges ("try us on desktop", etc) ─────────────────────────
   A small italic line in unobtrusive grey-blue. Populated by JS from
   mobile-nudges.txt. Hidden on desktop entirely so the dead-space slots
   don't add visual weight where the desktop UX is already fine. */
.mobile-nudge { display: none; }
body.mobile .mobile-nudge {
  display: block;
  margin: 14px auto 0;
  max-width: 460px;
  padding: 10px 14px;
  font-size: 12px; font-style: italic;
  color: #8ab4d8;
  text-align: center;
  background: rgba(72,136,238,0.06);
  border: 1px solid rgba(72,136,238,0.18);
  border-radius: 6px;
  line-height: 1.4;
}
/* ── Modal dialogs (welcome, help) ── */
#welcome-modal, #help-modal {
  display: none;
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#welcome-modal.show, #help-modal.show {
  display: flex;
}

/* Legal / policy modal — content loaded from /legal/*.md. High z-index so it
   sits above checkout, cart view, and the discovery browser when opened. */
#legal-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#legal-modal.show { display: flex; }
#legal-body h1 { font-size: 18px; margin: 0 0 10px; color: #fff; }
#legal-body h2 { font-size: 14px; margin: 16px 0 6px; color: #fff; }
#legal-body h3 { font-size: 13px; margin: 12px 0 6px; color: #fff; }
#legal-body a  { color: #8ab4d8; text-decoration: underline; }
.checkout-legal { font-size: 11px; color: #8aa0b0; text-align: center; margin: 12px 0 0; line-height: 1.5; }
.checkout-legal a { color: #8ab4d8; text-decoration: underline; cursor: pointer; }

/* Discovery Browser open-set confirmation. Same visual shell as the
   welcome/help modals but sits ABOVE the mb-overlay (which is z:6000)
   so the dialog can cover the browser cleanly. */
#mb-confirm-modal {
  display: none;
  position: fixed; inset: 0; z-index: 6500;
  background: rgba(0,0,0,0.70); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#mb-confirm-modal.show { display: flex; }
.mb-confirm-content { max-width: 380px; padding: 22px 22px 18px; }
.mb-confirm-content .modal-title { margin-bottom: 6px; }
.mb-confirm-content .modal-body p { font-size: 14px; line-height: 1.5; }
.mb-confirm-content .modal-btn-group { margin-top: 14px; }
/* Restyle the two confirm buttons to match the Collection (cart) header
   buttons — same pill shape, sizing, weight. No is transparent w/ border
   (cv-hdr-btn-back), Yes is the green CTA shape used by the Ko-fi /
   add-to-order buttons elsewhere in the cart view. */
.mb-confirm-content .modal-close-btn {
  background: transparent !important;
  color: #e8edf5 !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 40px;
  transition: all 0.15s !important;
}
.mb-confirm-content .modal-close-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.70) !important;
  color: #fff !important;
}
/* Yes = green CTA pill. Active state (mid-tap) brightens to give the
   user immediate "I pressed it" feedback even before the dialog closes. */
.mb-confirm-yes {
  background: rgba(34,160,80,0.18) !important;
  border: 1px solid rgba(34,160,80,0.45) !important;
  color: #6dcf96 !important;
}
.mb-confirm-yes:hover { background: rgba(34,160,80,0.35) !important; color: #fff !important; }
.mb-confirm-yes:active,
.mb-confirm-content .modal-close-btn:active {
  transform: scale(0.97);
  filter: brightness(1.15);
}
.modal-content {
  background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
  border: 1px solid rgba(233,69,96,0.3);
  border-radius: 8px; max-width: 520px; width: 90%;
  max-height: 90vh; overflow-y: auto;
  padding: 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.modal-title {
  font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.modal-body {
  font-size: 13px; line-height: 1.6; color: #d0d0d0; margin-bottom: 20px;
}
.modal-body p { margin-bottom: 12px; }
.modal-body ul { margin: 12px 0 12px 20px; }
.modal-body li { margin-bottom: 6px; }
.modal-close-btn {
  background: #e94560; color: white; border: none;
  padding: 8px 18px; border-radius: 5px; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: background 0.18s;
}
.modal-close-btn:hover { background: #c73150; }
.modal-btn-group {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.modal-btn-group .modal-close-btn { flex: 1; }
.modal-btn-group button { flex: 1 1 auto; }

/* ── Cart View (full-screen overlay) ── */
#cart-view {
  display: none; position: fixed; inset: 0; z-index: 5000;
  background: linear-gradient(160deg, #0a1628 0%, #0d1f38 100%);
  flex-direction: column; font-family: inherit;
}
#cart-view.show { display: flex; }
#cv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 12px; flex-shrink: 0;
  background: rgba(72,136,238,0.08);
  border-bottom: 1px solid rgba(72,136,238,0.2);
  flex-wrap: wrap;
}
#cv-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#cv-title { font-size: 27px; font-weight: 700; color: #e8edf5; }
#cv-count-badge {
  font-size: 18px; color: #7a9ab8;
  background: rgba(255,255,255,0.07); padding: 3px 9px; border-radius: 10px;
}
#cv-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cv-currency-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  color: #7a9ab8; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  padding: 4px 8px;
  height: 30px;
}
#cv-currency-wrap span { letter-spacing: 0.5px; text-transform: uppercase; }
#cv-currency-select {
  background: transparent; color: #cfe1ff;
  border: none; outline: none; cursor: pointer;
  font-size: 12px; font-weight: 700;
  appearance: none; padding: 0 16px 0 0;
  background-image: linear-gradient(45deg, transparent 50%, #8ab4d8 50%),
                    linear-gradient(135deg, #8ab4d8 50%, transparent 50%);
  background-position: calc(100% - 9px) center, calc(100% - 4px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#cv-currency-select option { background: #1a1a2e; color: #e8edf5; }
.cv-hdr-btn {
  padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all 0.18s; white-space: nowrap;
  /* Align every header button to the tallest one (the two-line Ko-fi button)
     so the toolbar reads as a single row of uniform pills. */
  min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cv-hdr-btn-dl {
  background: rgba(72,136,238,0.18); border: 1px solid rgba(72,136,238,0.45); color: #90baf9;
}
.cv-hdr-btn-dl:hover { background: rgba(72,136,238,0.38); color: #fff; }
.cv-hdr-btn-kofi {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 14px;
  background: rgba(34,160,80,0.15); border: 1px solid rgba(34,160,80,0.4); color: #6dcf96;
}
.cv-hdr-btn-kofi:hover { background: rgba(34,160,80,0.35); color: #fff; }
.cv-kofi-sub { font-size: 10px; opacity: 0.8; }
.cv-hdr-btn-clear {
  background: transparent; border: 1px solid rgba(233,69,96,0.3); color: #e98a8a;
}
.cv-hdr-btn-clear:hover { background: rgba(233,69,96,0.15); color: #fff; }
.cv-hdr-btn-back {
  background: transparent; border: 1px solid rgba(255,255,255,0.40); color: #e8edf5;
}
.cv-hdr-btn-back:hover { border-color: rgba(255,255,255,0.70); color: #fff; background: rgba(255,255,255,0.06); }
#cv-progress-wrap { flex-shrink: 0; }
#cv-progress-track {
  width: 100%; height: 4px; background: rgba(255,255,255,0.1); overflow: hidden;
}
#cv-progress-fill {
  height: 100%; width: 0%; background: #4888ee; transition: width 0.3s;
}
#cv-body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; gap: 20px; align-items: flex-start;
}
#cv-item-list {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 12px;
}
/* Card has a FIXED width when collapsed so its internal flex layout (thumb,
   meta, actions) is stable. When has-quote we let it grow to fit the appended
   quote panel — but lock meta to its collapsed flex-basis so the buttons
   don't shift right. */
.cv-card { width: 480px; box-sizing: border-box; }
.cv-card.has-quote { width: auto; border-color: rgba(240, 200, 60, 0.4); }
.cv-card.has-quote.quote-error {
  border-color: rgba(233,69,96,0.6); background: rgba(233,69,96,0.05);
}
.cv-card.has-quote .cv-card-meta { flex: 0 0 132px; }
.cv-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(72,136,238,0.15);
  border-radius: 8px; padding: 12px; transition: border-color 0.15s;
}
.cv-card:hover { border-color: rgba(72,136,238,0.35); }
.cv-card-thumb-wrap { flex-shrink: 0; }
.cv-card-thumb {
  width: auto; height: auto; max-width: 200px; object-fit: contain;
  border-radius: 4px; display: block; background: rgba(0,0,0,0.3);
}
.cv-card-thumb-placeholder {
  width: 160px; height: 120px; border-radius: 4px;
  background: rgba(255,255,255,0.06); display: flex; align-items: center;
  justify-content: center; font-size: 22px; color: #4a6a8a;
}
.cv-card-meta { flex: 1; min-width: 0; }
.cv-card-name {
  font-size: 14px; font-weight: 700; color: #e8edf5; margin-bottom: 4px;
  overflow-wrap: anywhere;   /* break long IDs (e.g. TXU_PCLMAPS_OCLC_…) instead of overflowing under the buttons */
}
.cv-card-id-inline { font-size: 11px; font-weight: 400; color: #6a8ab0; font-family: monospace; }
.cv-card-region { font-size: 12px; font-weight: 600; color: #b8d4f0; margin-bottom: 2px; }
.cv-card-desc   { font-size: 11px; color: #8ab4d8; margin-bottom: 1px; }
.cv-card-series { font-size: 11px; color: #7a9cc8; margin-bottom: 1px; }
.cv-card-scale  { font-size: 11px; color: #5a7a98; margin-bottom: 5px; }
.cv-card-dims { font-size: 11px; color: #a0c0d8; margin-bottom: 3px; }
.cv-card-filename { font-size: 11px; color: #6a8ab0; font-family: monospace; margin-bottom: 4px; word-break: break-all; }
.cv-card-size-row { display: flex; align-items: center; gap: 6px; }
.cv-card-size { font-size: 11px; color: #6a8ab0; }
@keyframes cv-spin { to { transform: rotate(360deg); } }
.cv-card-status-loading { font-size: 12px; color: #6a8ab0; display: inline-block; animation: cv-spin 0.9s linear infinite; }
.cv-card-status-ready { font-size: 10px; color: #4caf80; }
.cv-card-status-error { font-size: 10px; color: #e57373; }
.cv-card-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.cv-btn-dl-item, .cv-btn-rm-item, .cv-btn-open-item {
  padding: 5px 10px; border-radius: 5px; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; transition: all 0.15s; white-space: nowrap;
}
.cv-btn-open-item { background: rgba(76,175,138,0.15); border: 1px solid rgba(76,175,138,0.4); color: #7fd4b2; }
.cv-btn-open-item:hover { background: rgba(76,175,138,0.35); color: #fff; }
.cv-btn-dl-item { background: rgba(72,136,238,0.15); border: 1px solid rgba(72,136,238,0.4); color: #90baf9; }
.cv-btn-dl-item:hover { background: rgba(72,136,238,0.35); color: #fff; }
.cv-btn-rm-item { background: transparent; border: 1px solid rgba(233,69,96,0.25); color: #e98a8a; }
.cv-btn-rm-item:hover { background: rgba(233,69,96,0.15); color: #fff; }
.cv-btn-quote-item {
  padding: 5px 10px; border-radius: 5px; cursor: pointer;
  font-size: 11px; font-weight: 600; transition: all 0.15s; white-space: nowrap;
  background: rgba(240, 200, 60, 0.15);
  border: 1px solid rgba(240, 200, 60, 0.5);
  color: #f0d860;
}
.cv-btn-quote-item:hover { background: rgba(240, 200, 60, 0.35); color: #fff; }

/* ── Print quote panel (appears when user clicks Print Quote) ── */
/* Quote panel is a flex child of .cv-card, appended after .cv-card-actions.
   Sized to its own content so the card grows by exactly the panel's width. */
.cv-card-quote {
  display: flex; gap: 12px; align-items: stretch;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(240,200,60,0.25);
  border-radius: 8px; padding: 12px;
  flex: 0 0 auto;
}
.cv-card.quote-error .cv-card-quote {
  border-color: rgba(233,69,96,0.6); background: rgba(233,69,96,0.05);
  flex-direction: column; gap: 4px; align-items: flex-start;
}
.cv-quote-info { display: flex; flex-direction: column; gap: 3px; }
/* Prevent text lines from wrapping — content drives panel width */
.cv-quote-label, .cv-quote-mapdims, .cv-quote-price,
.cv-quote-margin, .cv-quote-orient,
.cv-swap-sys, .cv-swap-size, .cv-swap-price { white-space: nowrap; }
.cv-quote-loading { color: #b0c8e0; font-size: 12px; padding: 8px 0; }
.cv-quote-err {
  color: #e98a8a; font-size: 12px; padding: 8px 10px;
  background: rgba(233,69,96,0.08); border-radius: 4px; flex: 1;
}
.cv-quote-err-title {
  color: #ff8a8a; font-weight: 700; font-size: 13px; margin-bottom: 6px;
}
.cv-quote-row { font-size: 11px; color: #d0c0c0; margin-bottom: 3px; }
.cv-quote-visual {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Explicit height; width auto-computes from SVG viewBox aspect ratio so the
   SVG visibly hugs its natural proportion (no surrounding box). */
.cv-quote-visual svg { display: block; height: 180px; width: auto; max-width: 180px; }
.cv-quote-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.cv-quote-label { font-size: 14px; font-weight: 700; color: #f0d860; }
.cv-quote-mapdims { font-size: 12px; color: #b8d4f0; }
.cv-quote-price { font-size: 16px; color: #e8edf5; margin-top: 4px; }
.cv-quote-margin { font-size: 12px; color: #8aa8c8; }
.cv-quote-orient { font-size: 12px; color: #8aa8c8; margin-bottom: 6px; }
.cv-quote-swap {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 4px; cursor: pointer;
  background: rgba(72,136,238,0.12); border: 1px solid rgba(72,136,238,0.35);
  color: #90baf9; text-align: left;
}
.cv-quote-swap:hover { background: rgba(72,136,238,0.3); color: #fff; }
.cv-swap-sys   { font-size: 12px; font-weight: 700; }
.cv-swap-size  { font-size: 11px; opacity: 0.85; }
.cv-swap-price { font-size: 13px; font-weight: 700; }
.cv-quote-prepare {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(72,136,238,0.5);
  border-radius: 6px;
  background: rgba(72,136,238,0.18);
  color: #cfe1ff;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.cv-quote-prepare:hover:not(:disabled) { background: rgba(72,136,238,0.32); color: #fff; }
.cv-quote-prepare:disabled { opacity: 0.6; cursor: progress; }
.cv-quote-prepare.cv-quote-ready {
  display: block;
  background: rgba(85,180,120,0.22);
  border-color: rgba(85,180,120,0.55);
  color: #c8efd5;
  text-decoration: none;
}
.cv-quote-prepare.cv-quote-ready:hover { background: rgba(85,180,120,0.36); color: #fff; }

/* ── Shipping estimator (Phase 5.2) ─────────────────────────────────────── */
/* Side panel at the left of the cart body, ~1/3 cart width when expanded.
   Hidden entirely when collapsed so the item list reclaims full width. */
#cv-shipping {
  flex: 0 0 33%;
  align-self: stretch;
  border: 1px solid rgba(72,136,238,0.25);
  border-radius: 8px;
  background: rgba(72,136,238,0.05);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: sticky; top: 0;
}
#cv-shipping.collapsed { display: none; }
#cv-shipping-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  color: #cfe1ff; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid rgba(72,136,238,0.18);
  background: rgba(72,136,238,0.08);
}
.cv-ship-label { flex: 0 0 auto; }
#cv-shipping-header #cv-currency-wrap { margin-left: 4px; }
#cv-shipping-header #cv-shipping-close { margin-left: auto; }
#cv-shipping-close {
  background: transparent; border: none; cursor: pointer;
  color: #8ab4d8; font-size: 16px; line-height: 1;
  padding: 4px 8px; border-radius: 4px;
}
#cv-shipping-close:hover { background: rgba(255,255,255,0.08); color: #e8edf5; }
#cv-shipping-body { padding: 14px 16px 16px; overflow-y: auto; }

/* Header toggle button. Highlights when the panel is open so the user has a
   clear way back to closing it from the toolbar too. */
.cv-hdr-btn-ship {
  background: rgba(72,136,238,0.18); border: 1px solid rgba(72,136,238,0.45); color: #90baf9;
  font-size: 18px;   /* 1.5× the default 12px header-button size */
  padding: 8px 18px;
}
.cv-hdr-btn-ship:hover { background: rgba(72,136,238,0.32); color: #fff; }
.cv-hdr-btn-ship.active {
  background: rgba(72,136,238,0.42); border-color: rgba(72,136,238,0.85); color: #fff;
}
.cv-ship-row {
  display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.cv-ship-row label {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #8aa8c8; text-transform: uppercase; letter-spacing: 0.4px;
}
.cv-ship-optional { text-transform: none; opacity: 0.7; letter-spacing: 0; }
.cv-ship-row select, .cv-ship-row input {
  background: rgba(13,13,20,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  padding: 8px 10px;
  color: #e8edf5;
  font-size: 13px;
  outline: none;
  /* Inputs report a long intrinsic width (~200px from the size attr) which
     was forcing them to wrap to their own row even in panels with plenty
     of horizontal space. width:100% + box-sizing:border-box lets them
     shrink to the parent label's flex-allocated width. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.cv-ship-row label { min-width: 0; }  /* allow flex shrink */
.cv-ship-row select:focus, .cv-ship-row input:focus { border-color: rgba(72,136,238,0.6); }
#cv-ship-submit {
  background: rgba(72,136,238,0.22);
  border: 1px solid rgba(72,136,238,0.55);
  color: #cfe1ff;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
#cv-ship-submit:hover:not(:disabled) { background: rgba(72,136,238,0.34); color: #fff; }
#cv-ship-submit:disabled { opacity: 0.6; cursor: progress; }
#cv-ship-status { font-size: 12px; color: #7a9ab8; margin-top: 8px; min-height: 16px; }
#cv-ship-status.err { color: #e94560; }
#cv-ship-results { margin-top: 12px; }
.cv-rate-table {
  width: 100%; border-collapse: collapse;
}
.cv-rate-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  align-items: center;
}
.cv-rate-row.cv-rate-cheapest {
  border-color: rgba(85,180,120,0.5);
  background: rgba(85,180,120,0.07);
}
.cv-rate-name { color: #e8edf5; font-weight: 600; font-size: 13px; }
.cv-rate-eta  { color: #8ab4d8; font-size: 12px; }
.cv-rate-price { color: #cfe1ff; font-weight: 700; font-size: 14px; }
.cv-rate-empty { color: #7a9ab8; font-style: italic; padding: 6px 0; }

/* Side-by-side button row for "Get rates" + "Generate all quotes". */
.cv-ship-btn-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
#cv-ship-quote-all {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #cfe1ff;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
#cv-ship-quote-all:hover:not(:disabled) { background: rgba(255,255,255,0.12); color: #fff; }
#cv-ship-quote-all:disabled { opacity: 0.65; cursor: progress; }

/* Three sections of the shipping result: per-item, explanation, options. */
.cv-ship-section { margin-top: 16px; }
.cv-ship-section:first-child { margin-top: 8px; }
.cv-ship-section-title {
  color: #8aa8c8; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.cv-itemship-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}
.cv-itemship-row:last-of-type { border-bottom: none; }
.cv-itemship-name { color: #cfe1ff; }
.cv-itemship-size { color: #7a9ab8; font-size: 11px; }
.cv-itemship-price { color: #cfe1ff; font-weight: 600; }
.cv-itemship-subtotal {
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: none;
  padding-top: 8px; margin-top: 4px;
  font-weight: 700;
}
.cv-itemship-subtotal .cv-itemship-name { color: #8aa8c8; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; }
.cv-itemship-subtotal .cv-itemship-price { color: #e8edf5; font-size: 13px; }

.cv-ship-explain {
  font-size: 12px; color: #8aa8c8; line-height: 1.55;
  padding: 8px 10px;
  background: rgba(72,136,238,0.06);
  border-radius: 5px;
}
.cv-ship-savings {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(85,180,120,0.12);
  border: 1px solid rgba(85,180,120,0.40);
  border-radius: 5px;
  color: #c8efd5;
  font-size: 12px; font-weight: 600;
}

/* ── Prepare Print Order panel (the right-side cart panel) ──────────────── */
.hidden { display: none; }

.cv-order-empty {
  padding: 16px 12px;
  text-align: center;
  color: #8aa8c8;
}
.cv-order-empty-title {
  color: #cfe1ff; font-weight: 700; font-size: 14px; margin-bottom: 6px;
}
.cv-order-empty-msg {
  font-size: 12px; line-height: 1.55; margin-bottom: 12px;
  color: #8aa8c8;
}
#cv-order-addall-empty, #cv-order-addall-btn {
  background: rgba(85,180,120,0.20);
  border: 1px solid rgba(85,180,120,0.50);
  color: #c8efd5;
  padding: 9px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
#cv-order-addall-empty:hover:not(:disabled), #cv-order-addall-btn:hover { background: rgba(85,180,120,0.34); color: #fff; }
#cv-order-addall-empty:disabled { opacity: 0.45; cursor: not-allowed; background: rgba(255,255,255,0.04); color: #6a7a8a; border-color: rgba(255,255,255,0.12); }
#cv-order-addall-bar { padding: 8px 4px 0; }

.cv-order-section {
  margin-bottom: 18px;
  border: 1px solid rgba(72,136,238,0.20);
  border-radius: 0 0 8px 8px;
  border-top: none;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.cv-order-section.hidden { display: none; }
.cv-order-actions {
  padding: 10px 12px;
  border-top: 1px solid rgba(72,136,238,0.10);
  display: flex; justify-content: flex-end;
}

/* Tab bar — Bundled vs Split. The split tab is only shown when the cart
   actually has items routing through different facilities. Active tab gets
   a saturated background; inactive tab is muted but still clickable. */
.cv-order-tabs {
  display: flex; gap: 0;
  margin-bottom: 0;
}
.cv-order-tabs.hidden { display: none; }
.cv-order-tab {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(72,136,238,0.20);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 11px 14px;
  color: #8aa8c8;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  transition: background 0.15s, color 0.15s;
}
.cv-order-tab + .cv-order-tab { margin-left: 4px; }
.cv-order-tab:hover { background: rgba(72,136,238,0.10); color: #cfe1ff; }
.cv-order-tab.active {
  background: rgba(72,136,238,0.18);
  color: #fff;
  border-color: rgba(72,136,238,0.55);
  cursor: default;
}
/* Allow the label to shrink + wrap (min-width:0 overrides the flex default of
   min-width:auto) so long labels like "Split Order by Delivery Time" wrap
   inside the narrow tab on mobile instead of overflowing. */
.cv-order-tab-label { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.cv-order-tab-hint  { color: #7a9ab8; font-size: 11px; font-weight: 400; font-style: italic; }
.cv-order-curbadge {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 1px 7px;
  color: #8aa8c8;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
}
.cv-order-tab.active .cv-order-curbadge {
  background: rgba(72,136,238,0.30);
  border-color: rgba(72,136,238,0.55);
  color: #cfe1ff;
}

.cv-order-next {
  background: rgba(72,136,238,0.32);
  border: 1px solid rgba(72,136,238,0.70);
  color: #fff;
  padding: 8px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.cv-order-next:hover:not(:disabled) { background: rgba(72,136,238,0.52); }
.cv-order-next:disabled { opacity: 0.45; cursor: not-allowed;
  background: rgba(255,255,255,0.04); color: #6a7a8a;
  border-color: rgba(255,255,255,0.12); }
.cv-order-table-wrap { overflow-x: auto; }
.cv-otab { width: 100%; border-collapse: collapse; font-size: 12px; }
.cv-otab th, .cv-otab td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left; color: #cfe1ff; vertical-align: middle;
}
.cv-otab th {
  color: #8aa8c8; font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cv-otab td.cv-otab-item { font-weight: 600; }
.cv-otab td.cv-otab-item small {
  display: block; color: #7a9ab8; font-weight: 400; font-size: 10px;
}
.cv-otab td.cv-otab-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-otab td.cv-otab-placeholder { color: #6a7a8a; font-style: italic; }
.cv-qty {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px; padding: 1px;
}
.cv-qty button {
  background: transparent; border: none; cursor: pointer;
  color: #cfe1ff; font-size: 13px; font-weight: 700;
  width: 22px; height: 22px; line-height: 1; border-radius: 4px;
}
.cv-qty button:hover:not(:disabled) { background: rgba(72,136,238,0.22); color: #fff; }
.cv-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.cv-qty .cv-qty-val {
  min-width: 18px; text-align: center;
  font-size: 12px; font-variant-numeric: tabular-nums; color: #e8edf5;
}
.cv-otab-rm {
  background: transparent; border: none; cursor: pointer;
  color: #e94560; font-size: 13px; padding: 3px 6px; border-radius: 3px;
  opacity: 0.55;
}
.cv-otab-rm:hover { background: rgba(233,69,96,0.16); opacity: 1; }
.cv-otot {
  padding: 10px 12px;
  background: rgba(72,136,238,0.06);
  border-top: 1px solid rgba(72,136,238,0.18);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px;
}
.cv-otot-label { color: #8aa8c8; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.cv-otot-math { color: #e8edf5; font-variant-numeric: tabular-nums; }
.cv-otot-math .cv-otot-total { font-weight: 700; color: #fff; }
.cv-otot-loc, .cv-otot-eta, .cv-otot-shipto { color: #8ab4d8; }
.cv-otot-shipto { flex-basis: 100%; margin-top: 2px; }
.cv-otot-loc-chip {
  display: inline-block;
  background: rgba(72,136,238,0.18);
  border: 1px solid rgba(72,136,238,0.40);
  border-radius: 9px;
  padding: 1px 7px; font-size: 10px; font-weight: 700;
  color: #cfe1ff; letter-spacing: 0.3px; margin-left: 4px;
}

#cv-order-calc {
  margin-top: 18px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.cv-order-calc-title {
  color: #cfe1ff; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.cv-order-calc-hint {
  color: #8aa8c8; font-size: 11px; line-height: 1.5;
  margin-bottom: 10px;
}

/* Print Quote button doubles as the "in print order" toggle. When the
   item is in the order, it stays yellow but with stronger fill so it
   reads as "currently active" without changing colour family. */
.cv-btn-quote-item.in-order {
  background: rgba(240, 200, 60, 0.35);
  color: #fff;
}
.cv-btn-quote-item.in-order:hover { background: rgba(240, 200, 60, 0.50); }
/* Oversized = no print product fits. Button still opens the quote panel
   (so the user sees the "Too large" explanation) but it's visually muted
   and we never let the item join an order. */
.cv-btn-quote-item.cv-btn-quote-unavailable {
  background: rgba(233,69,96,0.10);
  border-color: rgba(233,69,96,0.40);
  color: #e98a8a;
  cursor: help;
}
.cv-btn-quote-item.cv-btn-quote-unavailable:hover {
  background: rgba(233,69,96,0.20);
  color: #fff;
}

/* Split-order sub-groups — one per fulfillment region / ETA cluster. */
.cv-split-group {
  margin: 0 0 12px 0;
  border: 1px solid rgba(72,136,238,0.20);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.cv-split-group:last-child { margin-bottom: 0; }
.cv-split-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(72,136,238,0.05);
  border-bottom: 1px solid rgba(72,136,238,0.15);
  flex-wrap: wrap;
}
.cv-split-group-title {
  flex: 1;
  color: #cfe1ff; font-weight: 700; font-size: 12px;
  letter-spacing: 0.3px;
}

/* ── (legacy) Shipping system breakdown modal — kept for now ─────────── */
#ship-breakdown-modal {
  position: fixed; inset: 0; z-index: 7000;  /* above #cart-view (5000) */
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,18,0.78);
  padding: 32px;
}
#ship-breakdown-modal.hidden { display: none; }
#ship-breakdown-panel {
  width: 100%; max-width: 1100px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: #161827;
  border: 1px solid rgba(72,136,238,0.32);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
#ship-breakdown-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(170,120,220,0.10);
  border-bottom: 1px solid rgba(170,120,220,0.30);
  color: #e8edf5; font-weight: 700; font-size: 15px;
}
#ship-breakdown-header span { flex: 1; }
#ship-breakdown-close {
  background: transparent; border: none; cursor: pointer;
  color: #8ab4d8; font-size: 18px; padding: 4px 10px; border-radius: 4px;
}
#ship-breakdown-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
#ship-breakdown-meta {
  padding: 10px 18px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; color: #8aa8c8;
}
#ship-breakdown-body { padding: 16px 18px; overflow: auto; }
#ship-breakdown-loading { color: #8ab4d8; font-style: italic; padding: 12px 0; }
#ship-breakdown-error { color: #e94560; padding: 10px 0; }
.hidden { display: none; }

.bd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bd-table th, .bd-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
  color: #cfe1ff;
}
.bd-table th {
  color: #8aa8c8; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
  position: sticky; top: 0; background: #161827;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.bd-table tr.bd-row-slow td { background: rgba(220,170,40,0.08); }
.bd-table tr.bd-row-veryslow td { background: rgba(220,80,80,0.12); }
.bd-table td.bd-size { font-weight: 600; }
.bd-table td.bd-system {
  text-transform: uppercase; letter-spacing: 0.4px;
  font-size: 10px; color: #8aa8c8;
}
.bd-table td.bd-eta { color: #d4c898; font-variant-numeric: tabular-nums; }
.bd-table td.bd-rate-price { color: #cfe1ff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-table td.bd-rate-name { color: #8aa8c8; font-size: 11px; }
.bd-table td.bd-empty { color: #6a7a8a; font-style: italic; }
.bd-table td.bd-regions { line-height: 1.6; }
.bd-region-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 9px;
  background: rgba(72,136,238,0.18);
  border: 1px solid rgba(72,136,238,0.40);
  color: #cfe1ff;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.3px;
  margin-right: 2px;
}
.bd-regions.bd-region-single .bd-region-chip {
  background: rgba(220,80,80,0.18);
  border-color: rgba(220,80,80,0.50);
  color: #f6c2c2;
}
.bd-table td.bd-error { color: #e94560; font-size: 11px; }
#ship-breakdown-notes {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(72,136,238,0.06);
  border: 1px solid rgba(72,136,238,0.18);
  border-radius: 6px;
  font-size: 12px; color: #8aa8c8; line-height: 1.6;
}
#ship-breakdown-notes .bd-note-title {
  font-weight: 700; color: #cfe1ff; margin-bottom: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
#ship-breakdown-notes ul { margin: 4px 0 0 18px; padding: 0; }
#ship-breakdown-notes li { margin-bottom: 4px; }
.cv-quote-dpi {
  font-size: 12px;
  margin: 4px 0 2px;
  color: #8aa8c8;
}

@media (max-width: 500px) {
  #cv-item-list { grid-template-columns: 1fr; }
  #cv-header { flex-direction: column; align-items: flex-start; }
  .cv-hdr-btn { flex: 1; }
  .cv-card { width: 100%; flex-wrap: wrap; }
  .cv-card.has-quote .cv-card-meta { flex: 1 1 auto; }
  .cv-card-quote { width: 100%; min-width: 0; }
  .cv-quote-label, .cv-quote-mapdims, .cv-quote-price,
  .cv-quote-margin, .cv-quote-orient,
  .cv-swap-sys, .cv-swap-size, .cv-swap-price { white-space: normal; }
}

/* ── Undo toast ── */
#undo-toast {
  display: none;
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 4000;
  background: rgba(15, 52, 96, 0.95); border: 1px solid rgba(233,69,96,0.3);
  padding: 12px 18px; border-radius: 6px; color: #e0e0e0;
  font-size: 13px; white-space: nowrap;
}
#undo-toast.show { display: block; }
#undo-toast .undo-link {
  color: #4caf50; text-decoration: none; cursor: pointer;
  font-weight: 600; margin-left: 8px;
}
#undo-toast .undo-link:hover { color: #66bb6a; text-decoration: underline; }

/* ── PDF resize handle enhancement ── */
#pdf-resize-handle {
  background: rgba(255,255,255,0.08); border-left: 1px dashed rgba(255,255,255,0.25);
  transition: all 0.18s;
}
#pdf-resize-handle:hover {
  background: rgba(255,255,255,0.15); border-left-color: rgba(255,255,255,0.4);
}

/* ── PDF badge font fix ── */
.pdf-badge {
  font-family: 'Segoe UI', Arial, sans-serif; font-weight: 800;
}

/* ── Chip X hit target ── */
.chip-x {
  padding: 1px 4px; font-size: 10px; min-width: 12px; min-height: 12px;
  border-radius: 2px;
}
.chip-x:hover {
  background: rgba(233,69,96,0.3); color: #fff !important;
}

/* ── Zoom badge — absolutely positioned right of +/− buttons ── */
.zoom-badge {
  position: absolute; bottom: 10px; left: 50px; z-index: 1000;
  background: rgba(15,52,96,0.90); border: 1px solid rgba(255,255,255,0.18);
  color: #d0d8e8; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 5px;
  backdrop-filter: blur(4px); pointer-events: none;
  white-space: nowrap; font-family: 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* ── Browse Maps button ── */
#btn-browse-maps {
  background: rgba(15,52,96,0.90); border: 1px solid rgba(255,255,255,0.18);
  color: #d0d8e8; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 5px; cursor: pointer;
  font-family: 'Segoe UI', Arial, sans-serif; white-space: nowrap;
  transition: all 0.18s; line-height: 1.2;
}
#btn-browse-maps:hover { background: rgba(233,69,96,0.85); border-color: #e94560; color: #fff; }

/* ── Satellite roads overlay button (only visible when sat is on) ── */
#btn-roads { display: none; }
#btn-roads.sat-roads-active { background: #2196f3; border-color: #1565c0; color: #fff; }

/* ── Scroll speed selector (toolbar) ── */
#scroll-speed-group {
  display: flex; flex-shrink: 0; align-items: center; gap: 0;
  background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px; overflow: hidden; backdrop-filter: blur(6px);
}
#scroll-speed-label {
  font-size: 9px; font-weight: 600; color: #d0d8e8; padding: 2px 6px 2px 8px;
  border-right: 1px solid rgba(255,255,255,0.15); white-space: nowrap; flex-shrink: 0;
  line-height: 1.3; text-align: center;
}
.speed-btn {
  background: transparent; border: none; color: #b0c8e0;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.speed-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.speed-btn.on { background: rgba(33,150,243,0.35); color: #90caf9; }

/* ── Map Browser pan/zoom hint ── */
#mb-hint {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  background: rgba(10,20,40,0.75); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px; padding: 8px 12px; pointer-events: none;
  backdrop-filter: blur(6px);
}
#mb-hint { padding: 12px 16px; }
#mb-hint ul { list-style: none; margin: 0; padding: 0; }
#mb-hint li { display: block; font-size: 14px; color: #7a9ab8; line-height: 1.9; }
#mb-hint li b { color: #a0c4e0; font-weight: 700; }

/* ── Geo SVG outline in browser cards ── */
.mb-geo-svg-wrap {
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  min-height: 44px; padding-top: 4px;
}
.mb-geo-svg-wrap svg {
  width: 100%; height: auto; max-height: 60px;
  filter: drop-shadow(0 0 4px rgba(72,136,238,0.7)) drop-shadow(0 0 10px rgba(72,136,238,0.35));
  opacity: 0.88;
}

/* ── Map Browser Overlay ── */
#mb-overlay {
  display: none; position: fixed; inset: 0; z-index: 6000;
  background: rgba(5,10,20,0.96); backdrop-filter: blur(8px);
  flex-direction: column;
}
#mb-overlay.show { display: flex; }
#mb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(15,30,60,0.8);
}
#mb-header h2 { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
#mb-header-btns { display: flex; gap: 8px; align-items: center; }
#btn-mb-full,
#btn-mb-fit,
#btn-mb-recenter {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  color: #8ab4d8; border-radius: 6px; padding: 6px 14px; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: all 0.18s;
}
#btn-mb-full:hover,
#btn-mb-fit:hover,
#btn-mb-recenter:hover { background: rgba(33,150,243,0.3); border-color: #2196f3; color: #fff; }
#btn-mb-full.on { background: rgba(33,150,243,0.4); border-color: #2196f3; color: #fff; }
#btn-mb-close {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #ccc; border-radius: 6px; padding: 6px 14px; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: all 0.18s;
}
#btn-mb-close:hover { background: #e94560; color: #fff; border-color: #e94560; }
/* Mobile-only buttons / drawer — hidden on desktop, surfaced in the
   max-width:768px media query below. */
#btn-mb-menu      { display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #ccc; border-radius: 6px; padding: 6px 12px; font-size: 16px;
  font-weight: 700; cursor: pointer; transition: all 0.18s; }
#btn-mb-menu:hover { background: rgba(33,150,243,0.3); border-color: #2196f3; color: #fff; }
#btn-mb-menu.active { background: #2196f3; color: #fff; border-color: #2196f3; }
#mb-mobile-drawer { display: none; }
#mb-canvas {
  flex: 1; position: relative; overflow: hidden; cursor: grab;
  background: radial-gradient(ellipse at 30% 40%, rgba(15,52,96,0.22) 0%, transparent 70%);
}
#mb-canvas.dragging { cursor: grabbing; }
#mb-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#mb-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.mb-card {
  position: absolute; width: 142px; min-height: 192px; height: auto; box-sizing: border-box;
  border-radius: 10px; padding: 11px 12px 9px; cursor: pointer;
  display: flex; flex-direction: column; gap: 0;
  user-select: none; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
  border: 1.5px solid rgba(255,255,255,0.13); background: #0d1e32;
}
.mb-card:hover { border-color: rgba(255,255,255,0.35); box-shadow: 0 0 14px rgba(72,136,238,0.2); }
.mb-card.mb-on-path { border-color: #4888ee; background: #0e2040; box-shadow: 0 0 12px rgba(72,136,238,0.3); }
.mb-card.mb-set-card { background: #0b1e18; border-color: rgba(56,170,114,0.3); }
.mb-card.mb-set-card:hover { border-color: rgba(56,170,114,0.6); }
.mb-card.mb-set-card.mb-on-path { background: #0c2218; border-color: #38aa72; }
.mb-card.mb-active-set { background: #0e2c1e; border-color: #38aa72; box-shadow: 0 0 0 2px rgba(56,170,114,0.35); }
.mb-card.mb-selected-leaf { border-color: #5cddaa !important; box-shadow: 0 0 0 2px rgba(92,221,170,0.55), 0 0 20px rgba(56,170,114,0.22) !important; background: #0f3026 !important; }
.mb-card-title { font-size: 13px; font-weight: 800; color: #e8edf5; line-height: 1.2; overflow-wrap: break-word; }
.mb-card-sub { font-size: 10px; color: #4888ee; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.mb-card-sub2 { font-size: 10px; color: #7a9ab8; font-weight: 500; line-height: 1.3; margin-top: 2px; overflow-wrap: break-word; }
.mb-card-stats { font-size: 10px; color: #6a8ab0; line-height: 1.55; flex: 1; margin-top: 5px; }
.mb-card-stats div { overflow-wrap: break-word; }
.mb-stat-key { color: #4a6a88; }
.mb-stat-val { color: #8ab4d8; font-weight: 600; }
/* .mb-btn-open removed in v3.7.8 — leaf cards now open via tap +
   confirmation dialog instead of a per-card "▶ Open Set" button. */
#mb-zoom-btns {
  position: absolute; bottom: 16px; right: 16px; z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
}
.mb-zoom-btn {
  background: rgba(15,30,60,0.9); border: 1px solid rgba(255,255,255,0.2);
  color: #8ab4d8; border-radius: 6px; padding: 6px 10px; font-size: 15px;
  font-weight: 700; cursor: pointer; line-height: 1; transition: all 0.15s;
  width: 34px; text-align: center;
}
.mb-zoom-btn:hover { background: rgba(33,150,243,0.4); color: #fff; border-color: #2196f3; }
.mb-col-label {
  position: absolute; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; color: rgba(233,69,96,0.7); pointer-events: none;
}

#btn-fit-set {
  background: rgba(15,52,96,0.90); border: 1px solid rgba(255,255,255,0.18);
  color: #8ab4d8; font-size: 10px; padding: 0 8px; border-radius: 5px;
  cursor: pointer; transition: all 0.18s; line-height: 1.2; flex-shrink: 0;
  align-self: stretch; white-space: nowrap; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
#btn-fit-set:hover { background: rgba(76,175,138,0.4); border-color: #4caf8a; color: #fff; }

/* Header swap button — same look as Zoom-to-Grid, only revealed in
   compare mode (i.e. when both viewers hold a sheet). */
#btn-swap-viewers {
  display: none;
  background: rgba(15,52,96,0.90); border: 1px solid rgba(255,255,255,0.18);
  color: #8ab4d8; font-size: 10px; padding: 0 8px; border-radius: 5px;
  cursor: pointer; transition: all 0.18s; line-height: 1.2; flex-shrink: 0;
  align-self: stretch; white-space: nowrap; text-align: center;
  align-items: center; justify-content: center;
}
#btn-swap-viewers:hover { background: rgba(33,150,243,0.4); border-color: #2196f3; color: #fff; }
body.dual-pdf #btn-swap-viewers { display: flex; }

/* ── Download progress bar ── */
@keyframes dl-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(600%); }
}
.dl-shimmer {
  width: 20% !important; transition: none !important;
  animation: dl-shimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg,
    rgba(76,175,138,0.2), rgba(76,175,138,0.95),
    rgba(33,150,243,0.95), rgba(76,175,138,0.2)) !important;
}
#dl-progress-track {
  height: 6px; background: rgba(255,255,255,0.10);
  border-radius: 3px; overflow: hidden;
}
#dl-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4caf8a, #2196f3);
  border-radius: 3px; transition: width 0.25s ease;
}

/* ── PDF render-quality badge ── */
@keyframes render-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1.0;  }
}
#pdf-render-badge {
  display: none;
  position: absolute; top: 8px; right: 8px; z-index: 20;
  background: rgba(10,30,60,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  color: #8ab4d8; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 10px;
  backdrop-filter: blur(4px); pointer-events: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  animation: render-pulse 1.1s ease-in-out infinite;
  white-space: nowrap;
}
#pdf-render-badge.show { display: block; }

#img-zoom-badge,
#img-zoom-badge-2 {
  display: none;
  /* Along the bottom edge, just left of the +/- buttons (which sit at
     right:12, 32px wide). right:56 leaves a ~12px gap before them. */
  position: absolute; bottom: 12px; right: 56px; z-index: 15;
  background: rgba(10,30,60,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  color: #d0d8e8; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  backdrop-filter: blur(4px); pointer-events: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
#img-zoom-badge.show,
#img-zoom-badge-2.show { display: block; }

/* ── Focus rings ── */
button:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid #e94560; outline-offset: 2px; border-radius: 4px;
}

/* ── Chip text contrast ── */
.chip {
  color: #e6e6e6;
}
.chip:hover {
  color: #fff;
}

/* ── Shortcuts table ── */
.shortcuts-table {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 8px 16px; margin: 16px 0; font-size: 12px;
}
.shortcuts-table .key {
  background: rgba(255,255,255,0.08); padding: 4px 8px; border-radius: 3px;
  font-family: monospace; font-weight: 600; color: #e94560;
}
.shortcuts-table .desc {
  color: #d0d0d0; padding: 4px 0;
}

/* ── Map style selector popover ── */
.tb-style-wrap { position: relative; }
#btn-style-current { opacity: 0.85; font-weight: 500; }
#style-popover {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: rgba(15,52,96,0.97); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; padding: 6px; min-width: 240px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  z-index: 1800;
}
#style-popover.show { display: block; }
.style-hint { font-size: 10px; color: #8ab4d8; padding: 4px 8px 6px; text-transform: uppercase; letter-spacing: 0.6px; }
.style-opt {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; color: #e0e0e0;
  padding: 7px 10px; font-size: 12px; border-radius: 5px; cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.style-opt:hover { background: rgba(233,69,96,0.18); color: #fff; }
.style-opt.active { background: rgba(233,69,96,0.4); color: #fff; border-color: #e94560; }
.style-desc { color: #8ab4d8; font-size: 11px; font-weight: 400; margin-left: 2px; }
.style-opt.active .style-desc { color: #ffd9df; }

/* ── PI item improvements ── */
.pi-item {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pi-coords {
  flex: 0 1 auto;
}

/* ── Error link styling ── */
.err-link-secondary {
  display: inline-block; background: transparent; color: #8ab4d8;
  border: 1px solid #8ab4d8; padding: 5px 11px; border-radius: 4px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.18s; text-decoration: none; margin: 6px 6px 6px 0;
}
.err-link-secondary:hover {
  border-color: #e94560; color: #e94560;
}

/* ── PDF zoom buttons (bottom-right of viewer) ── */
#pdf-zoom-btns {
  position: absolute; bottom: 12px; right: 12px; z-index: 15;
  display: none; flex-direction: column; gap: 4px; align-items: center;
}
#pdf-panel.open #pdf-zoom-btns { display: flex; }
.pdf-zoom-btn {
  background: rgba(15,52,96,0.90); border: 1px solid rgba(255,255,255,0.18);
  color: #d0d8e8; width: 32px; height: 32px; border-radius: 6px;
  cursor: pointer; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: all 0.15s; line-height: 1;
  user-select: none;
}
.pdf-zoom-btn:hover { background: rgba(233,69,96,0.85); border-color: #e94560; color: #fff; }
.pdf-zoom-btn:active { transform: scale(0.90); }

/* ── Filmstrip panel ─────────────────────────────────────────────────────── */
#filmstrip-panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1900;
  background: rgba(8,16,36,0.97);
  border-top: 2px solid #e94560;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.7);
  display: none; flex-direction: column;
  backdrop-filter: blur(8px);
  /* Height is determined naturally by one row of cards — no max-height needed */
}
#filmstrip-panel.open { display: flex; }
#filmstrip-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.09); flex-shrink: 0;
}
#filmstrip-title { font-size: 14px; font-weight: 700; color: #fff; }
#filmstrip-edition-count {
  font-size: 11px; color: #8ab4d8; background: rgba(255,255,255,0.08);
  border-radius: 10px; padding: 2px 8px; white-space: nowrap;
}
#filmstrip-hint { font-size: 11px; color: #6a8aac; font-style: italic; }
#btn-filmstrip-close {
  margin-left: auto; background: none; border: none; color: #6a8aac;
  font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1;
}
#btn-filmstrip-close:hover { color: #e94560; }
#filmstrip-scroll {
  /* Single-row horizontal strip — scroll wheel/trackpad pans left-right */
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 10px 14px 12px; align-items: stretch;
  scrollbar-width: thin; scrollbar-color: #e94560 rgba(255,255,255,0.08);
}
#filmstrip-scroll::-webkit-scrollbar { height: 5px; }
#filmstrip-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
#filmstrip-scroll::-webkit-scrollbar-thumb { background: #e94560; border-radius: 3px; }
.fs-card {
  flex-shrink: 0; cursor: pointer; border-radius: 6px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.12); transition: border-color 0.15s, transform 0.15s;
  background: rgba(15,30,60,0.8); display: flex; flex-direction: column;
  width: auto; /* width follows the thumbnail */
}
.fs-card:hover { border-color: #e94560; transform: translateY(-3px); }
.fs-card.fs-active { border-color: #4caf8a; }
.fs-thumb {
  /* Full thumbnail, no cropping — letterboxed inside a fixed height */
  height: 160px; width: auto; max-width: 200px; min-width: 80px;
  object-fit: contain; background: #1a1a2e; display: block; flex-shrink: 0;
}
.fs-thumb-placeholder {
  width: 120px; height: 160px; background: #1a2a4a; display: flex;
  align-items: center; justify-content: center; font-size: 28px;
  color: rgba(255,255,255,0.15); flex-shrink: 0;
}
.fs-year { padding: 5px 7px 1px; font-size: 13px; font-weight: 700; color: #fff; text-align: center; }
.fs-series { padding: 1px 7px 4px; font-size: 10px; color: #8ab4d8; text-align: center; }
.fs-name { padding: 5px 7px 0; font-size: 11px; font-weight: 700; color: #cfe2ff; text-align: center;
  line-height: 1.25; overflow-wrap: anywhere; }
.fs-compare {
  display: block; width: 100%; background: rgba(33,150,243,0.15); border: none;
  border-top: 1px solid rgba(255,255,255,0.08); color: #8ab4d8;
  font-size: 10px; font-weight: 600; padding: 4px 0; cursor: pointer; flex-shrink: 0;
  letter-spacing: 0.3px; transition: background 0.15s, color 0.15s;
}
.fs-compare:hover { background: rgba(33,150,243,0.4); color: #fff; }

/* Second viewer panel — base CSS is now shared with #pdf-panel above. Only
   panel-2-specific tweaks here. */
#pdf-toolbar-2 {
  display: flex; flex-direction: column;
  background: #0f3460; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Secondary badge inherits .pdf-badge (red) so both panels look identical */
#pdf-info-row-2 {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  padding: 4px 10px 6px; border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11px; color: #8ab4d8; overflow: hidden;
}
/* Secondary panel action buttons (share same styles as primary equivalents) */
#btn-dl-pdf-2 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-dl-pdf-2:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
#btn-add-cart-2 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-add-cart-2.in-cart { background: rgba(76,175,138,0.25); border-color: #4caf8a; color: #4caf8a; }
#btn-add-cart-2:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
#btn-fit-pdf-2 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-fit-pdf-2:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
#btn-fullscreen-pdf-2 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-fullscreen-pdf-2:hover { background: rgba(76,175,138,0.35); border-color: #4caf8a; color: #fff; }
#btn-fullscreen-pdf-2 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #8ab4d8; }
#btn-fullscreen-pdf-2:hover { background: rgba(33,150,243,0.4); border-color: #2196f3; color: #fff; }
#btn-swap-pdf {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #8ab4d8; border-radius: 6px; cursor: pointer; font-size: 12px;
  padding: 5px 11px; font-weight: 600; transition: all 0.18s; flex-shrink: 0; white-space: nowrap;
}
#btn-swap-pdf:hover { background: rgba(33,150,243,0.3); border-color: #2196f3; color: #fff; }
#btn-close-pdf-2 { background: rgba(255,255,255,0.1); border: none; color: #ccc; }
#btn-close-pdf-2:hover { background: #e94560; color: #fff; }
#pdf-body-2 {
  position: relative; flex: 1; overflow: hidden; background: #1a1a1a; cursor: grab;
}
#pdf-body-2.dragging { cursor: grabbing; }
#pdf-canvas-wrap-2 {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#pdf-canvas-2 { position: absolute; box-shadow: 0 4px 24px rgba(0,0,0,0.7); transform-origin: top left; }
#pdf-loading-2 {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(17,17,17,0.92); z-index: 10;
}
#pdf-loading-spinner-2 { display: flex; flex-direction: column; align-items: center; }
/* Secondary US progress bar — reuses same structure/style as primary */
#pdf-us-progress-wrap-2 {
  display: none; flex-direction: column; align-items: center; gap: 10px; width: 60%; max-width: 320px;
}
#pdf-us-progress-wrap-2.show { display: flex; }
#pdf-us-track-2 {
  width: 100%; height: 8px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden;
}
#pdf-us-fill-2 {
  height: 100%; width: 0%; background: linear-gradient(90deg, #2196f3, #4caf8a);
  border-radius: 4px; transition: width 0.3s ease;
}
#pdf-us-label-2 { font-size: 12px; color: #8ab4d8; text-align: center; }
#pdf-us-title-2 { font-size: 13px; color: #ccc; text-align: center; }
/* Secondary render badge — same as primary */
#pdf-render-badge-2 {
  display: none;
  position: absolute; top: 8px; right: 8px; z-index: 20;
  background: rgba(10,30,60,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  color: #8ab4d8; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 10px;
  backdrop-filter: blur(4px); pointer-events: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  animation: render-pulse 1.1s ease-in-out infinite;
  white-space: nowrap;
}
#pdf-render-badge-2.show { display: block; }
/* Secondary zoom buttons — same layout as primary, shown when panel is open */
#pdf-zoom-btns-2 {
  position: absolute; bottom: 12px; right: 12px; z-index: 15;
  display: none; flex-direction: column; gap: 4px; align-items: center;
}
#pdf-panel-2.open #pdf-zoom-btns-2 { display: flex; }

/* ── US PDF loading: progress bar replaces spinner ───────────────────────── */
#pdf-us-progress-wrap {
  display: none; flex-direction: column; align-items: center; gap: 10px; width: 60%; max-width: 320px;
}
#pdf-us-progress-wrap.show { display: flex; }
#pdf-us-track {
  width: 100%; height: 8px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden;
}
#pdf-us-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, #2196f3, #4caf8a);
  border-radius: 4px; transition: width 0.3s ease;
}
#pdf-us-label { font-size: 12px; color: #8ab4d8; text-align: center; }
#pdf-us-title { font-size: 13px; color: #ccc; text-align: center; }

/* ── Preparing-map animation ─────────────────────────────────────────────── */
.pdf-preparing-wrap {
  display: none; flex-direction: column; align-items: center; gap: 14px;
}
.pdf-preparing-wrap.show { display: flex; }
.topo-ripple {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.topo-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid #4caf8a;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: topo-expand 2s ease-out infinite;
}
.topo-ring:nth-child(1) { animation-delay: 0s; }
.topo-ring:nth-child(2) { animation-delay: 0.5s; }
.topo-ring:nth-child(3) { animation-delay: 1s; }
.topo-ring:nth-child(4) { animation-delay: 1.5s; }
@keyframes topo-expand {
  0%   { width: 12px; height: 12px; opacity: 1; border-color: #4caf8a; }
  100% { width: 72px; height: 72px; opacity: 0; border-color: rgba(76,175,138,0.1); }
}
.topo-pin { font-size: 22px; position: relative; z-index: 1;
            filter: drop-shadow(0 0 6px rgba(76,175,138,0.7)); }
.preparing-lbl { font-size: 13px; color: #8ab4d8; }

/* ── Grid loading overlay (centered over the map during a set load) ───────── */
#grid-loading {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;            /* above the map + Leaflet controls, below modals */
  flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 32px; border-radius: 16px;
  background: rgba(15, 25, 36, 0.85);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  pointer-events: none;     /* never blocks map interaction */
}
#grid-loading.show { display: flex; }
#grid-loading .preparing-lbl { font-size: 15px; color: #cfe2ff; }

/* ── Unzip animation ─────────────────────────────────────────────────────── */
.pdf-unzip-wrap {
  display: none; flex-direction: column; align-items: center; gap: 12px;
}
.pdf-unzip-wrap.show { display: flex; }
.unzip-svg { width: 160px; height: 128px; overflow: visible; }
.unzip-zipper-pull { animation: zipper-pull 2s ease-in-out infinite; }
@keyframes zipper-pull {
  0%   { transform: translateX(0); }
  65%  { transform: translateX(-68px); }
  82%  { transform: translateX(-68px); }
  100% { transform: translateX(0); }
}
.unzip-man {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: man-lean 2s ease-in-out infinite;
}
@keyframes man-lean {
  0%   { transform: rotate(0deg); }
  65%  { transform: rotate(-11deg); }
  82%  { transform: rotate(-11deg); }
  100% { transform: rotate(0deg); }
}
.unzip-lbl { font-size: 13px; color: #8ab4d8; }

/* Dual-PDF body layout: map hidden, both panels fill the screen */
body.dual-pdf #map { display: none !important; }
body.dual-pdf #polar-map { display: none !important; }
body.dual-pdf #btn-exit-polar { display: none !important; }
body.dual-pdf #toolbar { display: none !important; }
body.dual-pdf #search-wrap { display: none !important; }
/* Dual mode: panels split into two halves via slot classes. Either viewer
   instance can hold either slot — assignment is purely via class on the
   panel element. Swap and slide-over-close just toggle which panel has
   which class. No DOM moves, no canvas pixel swaps, no PDF.js state
   transfer between instances. */
body.dual-pdf #pdf-panel.slot-1,
body.dual-pdf #pdf-panel-2.slot-1   { left: 50% !important; right: 0   !important; width: 50% !important; }
body.dual-pdf #pdf-panel.slot-2,
body.dual-pdf #pdf-panel-2.slot-2   { left: 0   !important; right: 50% !important; width: 50% !important; }

/* Slide-over animation — gated by body.viewer-sliding so initial open isn't
   animated. Both panels animate together: the surviving one slides over the
   closing one's slot. */
body.viewer-sliding #pdf-panel,
body.viewer-sliding #pdf-panel-2 {
  transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              right 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Fullscreen wins over the dual-mode 50% split for either panel. Without
   this override, primary's #pdf-panel.fullscreen has the same specificity as
   body.dual-pdf #pdf-panel but loses by source order, so the fullscreen
   class did nothing for the right-hand panel. */
body.dual-pdf #pdf-panel.fullscreen,
body.dual-pdf #pdf-panel-2.fullscreen {
  left: 0 !important; right: 0 !important; width: 100% !important; z-index: 3000;
}
body.dual-pdf #pdf-panel #pdf-resize-handle { display: none; }

/* ── Desktop: collapse toolbar into a hamburger when PDF viewer is open ── */
/* Toolbar keeps its original position/styling — it just hides until the
   hamburger is pressed, then pops back in place. No drawer, no overlay. */
body.pdf-open:not(.mobile) #toolbar { display: none; }
body.pdf-open:not(.mobile) #toolbar.mobile-open { display: flex; }
body.pdf-open:not(.mobile) #mobile-drawer-overlay { display: none !important; }
body.pdf-open:not(.mobile) #btn-mobile-menu {
  display: inline-flex; align-items: center; justify-content: center;
  position: fixed; top: calc(var(--hh, 60px) + 10px);
  right: calc(var(--pdf-panel-w, 52%) + 10px);
  z-index: 1490;
  background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.22);
  color: #d0d8e8; width: 40px; height: 40px; border-radius: 8px;
  font-size: 20px; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  transition: background 0.18s, border-color 0.18s, color 0.18s, right 0.18s;
}
body.pdf-open:not(.mobile) #btn-mobile-menu:hover {
  background: rgba(233,69,96,0.85); border-color: #e94560; color: #fff;
}
body.pdf-open:not(.mobile) #btn-mobile-menu.active {
  background: #e94560; border-color: #c73150; color: #fff;
}
/* When the toolbar is revealed, slide the hamburger left of it so it stays clickable */
body.pdf-open:not(.mobile) #toolbar.mobile-open ~ #btn-mobile-menu {
  right: calc(var(--pdf-panel-w, 52%) + 10px + 160px + 6px);
}
/* Comparison mode: the underlying map is hidden, so the floating hamburger has
   nothing to reveal — hide it on desktop too. (The mobile rule below already
   hides it whenever a PDF is open.) */
body.dual-pdf #btn-mobile-menu { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  (≤ 768 px)
   ════════════════════════════════════════════════════════════════════════════ */

/* Mobile-only elements — hidden on desktop */
#btn-mobile-menu       { display: none; }
#btn-view-cart-mobile  { display: none; }
#tb-search-row         { display: none; }
#pdf-mobile-bar        { display: none; }
#pdf-mobile-menu       { display: none; }

/* Drawer overlay — darkens map when toolbar drawer is open */
#mobile-drawer-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
#mobile-drawer-overlay.show { display: block; }

@media (max-width: 768px) {

  /* Info modal: keyboard shortcuts are useless on touch devices — hide
     the heading + table to save vertical space. */
  .info-shortcuts { display: none !important; }

  /* ── Discovery Browser mobile rework ─────────────────────────────────────
     Hide the desktop action buttons (Recenter / Fit / Full Tree) and the
     +/− zoom buttons; surface the actions via a ☰ menu next to the title.
     Pinch-zoom handles what +/− used to. */
  #mb-overlay #btn-mb-recenter,
  #mb-overlay #btn-mb-fit,
  #mb-overlay #btn-mb-full   { display: none !important; }
  #mb-overlay #mb-zoom-btns  { display: none !important; }
  #mb-overlay #btn-mb-menu   { display: inline-flex; }
  /* Compact button heights so they fit alongside the title comfortably */
  #mb-overlay #btn-mb-menu,
  #mb-overlay #btn-mb-close  {
    padding: 6px 10px; font-size: 14px; line-height: 1;
  }
  /* Narrower cards on mobile — matches the JS MB_W = 110 used by the
     world layout. Titles still wrap (overflow-wrap: break-word is on
     the base .mb-card rules) when an entry happens to be wide.
     min-height: auto lets each card shrink to its content; the world
     layout still allocates MB_H worth of vertical space per slot, so
     short cards just have breathing room below them. */
  .mb-card { width: 110px !important; min-height: auto !important; }
  /* Mobile drawer — slides down from the header on ☰ tap */
  #mb-mobile-drawer {
    position: absolute; top: 50px; right: 8px;
    background: #1a2035; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 6px;
    display: none; flex-direction: column; gap: 4px;
    z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    min-width: 160px;
  }
  #mb-mobile-drawer.open { display: flex; }
  #mb-mobile-drawer button {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #d8e2ee; padding: 10px 14px; font-size: 13px; font-weight: 600;
    border-radius: 6px; text-align: left; cursor: pointer;
  }
  #mb-mobile-drawer button:hover { background: rgba(76,175,138,0.25); border-color: #4caf8a; color: #fff; }
  /* Live zoom readout sits above the buttons. Background-less, smaller
     type so it reads as info rather than another action button. */
  #mb-mobile-drawer .mb-zoom-readout {
    color: #8ab4d8; font-size: 12px; font-weight: 600;
    padding: 6px 14px 4px; letter-spacing: 0.3px;
  }

  /* ── Header ── */
  #header-top {
    flex-wrap: wrap;
    min-height: auto;
  }

  /* Title group: logo + Discover Maps only, no right border */
  #title-group {
    flex: 1; min-width: 0;
    border-right: none;
    padding: 6px 10px;
    gap: 8px;
  }

  /* Active set title — second row, full width */
  #active-set-title-wrap {
    order: 10;
    flex-basis: 100%; width: 100%;
    padding: 4px 10px 7px;
    border-top: 1px solid rgba(255,255,255,0.08);
    align-items: flex-start;
  }
  #active-set-title { font-size: 13px; text-align: left; }
  #map-subtitle { text-align: left; }

  /* Cart section — hidden entirely on mobile (accessed via drawer) */
  #cart-section { display: none !important; }

  /* Hide original search (moved to drawer) */
  #search-wrap { display: none; }

  /* Hamburger — floats over map, top-right corner below header */
  #btn-mobile-menu {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: calc(var(--hh, 60px) + 10px); right: 10px; z-index: 1490;
    background: rgba(15,52,96,0.82); border: 1px solid rgba(255,255,255,0.22);
    color: #d0d8e8; width: 44px; height: 44px; border-radius: 8px;
    font-size: 22px; cursor: pointer; transition: all 0.18s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
  }
  #btn-mobile-menu.active,
  #btn-mobile-menu:active { background: rgba(233,69,96,0.9); color: #fff; border-color: #e94560; }
  /* Hide hamburger when PDF is open */
  body.pdf-open #btn-mobile-menu { display: none !important; }

  /* Hide desktop PDF toolbar on mobile — replaced by #pdf-mobile-bar */
  #pdf-toolbar { display: none !important; }

  /* PDF mobile bar — transparent overlay, top-right corner only */
  #pdf-mobile-bar {
    display: flex; align-items: center;
    position: absolute; top: 10px; right: 10px; left: auto;
    width: auto; z-index: 20;
    background: transparent; border: none;
    padding: 0; gap: 6px; height: auto; box-sizing: border-box;
  }
  #btn-pdf-mb-close {
    width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(10,20,40,0.55); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; border-radius: 9px; font-size: 19px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  #btn-pdf-mb-close:active { background: rgba(233,69,96,0.8); }
  #btn-pdf-mb-menu {
    width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(10,20,40,0.55); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; border-radius: 9px; font-size: 22px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  #btn-pdf-mb-menu.active,
  #btn-pdf-mb-menu:active { background: rgba(33,150,243,0.5); border-color: #2196f3; }

  /* PDF mobile menu — dropdown from top-right corner */
  #pdf-mobile-menu {
    display: none;
    position: absolute; top: 64px; right: 10px; left: auto;
    width: 260px; z-index: 19;
    background: rgba(10,20,40,0.96); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    padding: 12px;
    flex-direction: column; gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  }
  #pdf-mobile-menu.open { display: flex; }
  #pdf-mb-info {
    font-size: 11px; color: #8ab4d8; line-height: 1.8;
    padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #pdf-mb-info strong {
    display: block; font-size: 13px; color: #e0e8f8; font-weight: 600;
    margin-bottom: 4px;
  }
  .pdf-mb-action {
    width: 100%; padding: 10px 14px; border-radius: 7px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    color: #d0d8e8; font-size: 13px; font-weight: 600; text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.08s, filter 0.08s;
  }
  /* Tap feedback — brief scale + brightness change so the user gets an
     immediate "yes, I registered that" signal even when the action takes
     a moment (e.g. opening the Collection view, which does a layout +
     paint cycle). Also strengthens the border so the press is visible
     against the dark drawer background. */
  .pdf-mb-action:active {
    background: rgba(72,136,238,0.25);
    border-color: rgba(72,136,238,0.55);
    transform: scale(0.97);
    filter: brightness(1.1);
  }

  /* pdf-body fills entire panel — no top offset needed */
  #pdf-body { padding-top: 0; }

  /* Native iframe viewer — fills the pdf-body */
  #pdf-frame {
    display: block !important;
    position: absolute; inset: 0; width: 100%; height: 100%; border: none;
  }

  /* Leaflet zoom controls — hidden on mobile (pinch to zoom) */
  .leaflet-control-zoom { display: none !important; }

  /* Zoom badge — hide on mobile (no room beside hidden zoom controls) */
  .zoom-badge { display: none; }

  /* ── Toolbar → slide-in drawer ── */
  #toolbar {
    position: fixed;
    top: var(--hh, 60px); right: -280px; bottom: 0;
    width: 260px; z-index: 1450;
    flex-direction: column;
    background: rgba(8,16,36,0.98);
    border-left: 2px solid rgba(233,69,96,0.5);
    box-shadow: -4px 0 24px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    padding: 12px 8px;
    gap: 6px;
    overflow-y: auto;
    transition: right 0.25s ease;
  }
  #toolbar.mobile-open { right: 0 !important; }
  /* Prevent JS from repositioning toolbar on mobile */
  #toolbar:not(.mobile-open) { right: -280px !important; }

  /* Show drawer-only buttons */
  #btn-view-cart-mobile { display: block; }

  /* Hide zoom speed (irrelevant on touch) */
  #scroll-speed-group { display: none; }

  /* Mobile search row at bottom of drawer */
  #tb-search-row {
    display: block;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  #tb-search-input {
    width: 100%; box-sizing: border-box;
    background: rgba(15,52,96,0.93); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; border-radius: 7px; padding: 9px 13px;
    font-size: 13px; outline: none;
  }
  #tb-search-input::placeholder { color: #8ab4d8; }
  #tb-search-input:focus { border-color: #e94560; box-shadow: 0 0 0 2px rgba(233,69,96,0.25); }

  /* Map browser — hide hint card, touch-friendly */
  #mb-hint { display: none !important; }

  /* Full-width toolbar buttons in drawer */
  .tb-btn            { width: 100%; text-align: left; }
  .tb-grid-select    { width: 100%; }
  .tb-grid-btn       { flex: 1; }
  #scroll-speed-group { width: 100%; box-sizing: border-box; }

  /* ── Search ── */
  #search-input { width: calc(100vw - 120px); }

  /* ── Map — never shrink for PDF panel on mobile ── */
  #map { right: 0 !important; }

  /* ── PDF panel — full screen, edge to edge, no header ── */
  #pdf-panel {
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  #pdf-resize-handle { display: none !important; }
  /* Hide header & kill top gap when PDF is open on mobile */
  body.pdf-open #header  { display: none !important; }
  body.pdf-open #pdf-panel { top: 0 !important; }
  /* Ensure PDF panel sits on top and captures ALL touch events */
  body.pdf-open #pdf-panel {
    z-index: 3000 !important;
    pointer-events: all !important;
    touch-action: none !important;
  }
  /* Solid loading background on mobile — no map bleed-through */
  body.pdf-open #pdf-loading { background: #111 !important; }
  body.pdf-open #pdf-body { touch-action: none !important; }
  /* Hide PDF zoom +/- buttons on mobile */
  #pdf-zoom-btns { display: none !important; }
  /* PDF canvas — fills panel body on mobile (PDF.js used, not iframe) */
  body.pdf-open #pdf-canvas-wrap {
    display: flex !important;
    position: absolute; inset: 0;
  }
  /* Hide native iframe — PDF.js canvas used instead */
  #pdf-frame { display: none !important; }

  /* Tighten PDF toolbar for narrow screen */
  #pdf-info-row { display: none; } /* metadata row hidden on mobile */
  #btn-dl-pdf, #btn-add-cart, #btn-fullscreen-pdf, #btn-refresh-pdf {
    display: none; /* tucked away for now — close/fit stay visible */
  }
  #btn-close-pdf, #btn-fit-pdf {
    padding: 8px 14px;
    min-height: 40px;
    font-size: 13px;
  }
  .pdf-zoom-btn { width: 44px; height: 44px; font-size: 22px; }

  /* ── Disable dual-panel compare ── */
  /* Splitting a phone screen 50/50 is unusable. Compare is a desktop-only
     workflow — hide every entry point on mobile. */
  #pdf-panel-2        { display: none !important; }
  #btn-swap-pdf       { display: none !important; }
  #btn-swap-viewers   { display: none !important; }
  .fs-compare         { display: none !important; }
  .pu-compare         { display: none !important; }

  /* ── Touch targets ── */
  #btn-browse-maps { padding: 9px 12px; font-size: 12px; }
  #cart-empty-badge { height: 34px; font-size: 10px; }

  /* ── Filmstrip ── */
  .fs-thumb { height: 120px; }
  .fs-year  { font-size: 12px; }

  /* ── Collection (cart) view ─────────────────────────────────────────────
     Desktop layout puts items + shipping side-by-side (33% sticky panel).
     On mobile that's unusable — stack vertically, full-width, no stickiness.
     Internal card layout also needs to wrap onto multiple rows. */
  #cv-body {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }
  #cv-item-list { width: 100%; gap: 10px; }
  .cv-card {
    width: 100% !important;     /* override the 480px desktop rule */
    flex-wrap: wrap;
    padding: 10px;
  }
  /* Thumb + meta sit side-by-side on the top row; actions + quote wrap below */
  .cv-card-thumb-wrap { flex: 0 0 80px; }
  .cv-card-thumb      { width: 80px; height: 80px; }
  .cv-card-meta       { flex: 1 1 calc(100% - 96px); min-width: 0; }
  .cv-card-actions {
    flex: 1 1 100%; flex-direction: row; flex-wrap: wrap;
    gap: 6px; margin-top: 6px;
  }
  .cv-card-actions > * { flex: 1 1 auto; }
  .cv-card.has-quote .cv-card-meta { flex: 1 1 calc(100% - 96px); }
  .cv-card-quote {
    flex: 1 1 100%; width: 100%; min-width: 0;
    padding-top: 8px; margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  /* Shipping panel on mobile = full-screen overlay opened ONLY via the
     Cart button. Drops the in-flow position from above; sits above
     #cart-view (which is z-index 5000) so the X close button is reachable. */
  #cv-shipping {
    position: fixed; inset: 0;
    z-index: 6100;
    flex: none; width: 100%; height: 100%;
    border: none; border-radius: 0;
    background: #0a1428;
    align-self: auto;
  }
  #cv-shipping-header {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  #cv-shipping-body { padding: 10px 12px 12px; }
  /* Header buttons + currency picker stack instead of overflowing */
  #cv-currency-wrap { margin-left: 0; }
  /* Make the X close button easy to tap on touch screens */
  #cv-shipping-close { font-size: 22px; padding: 8px 14px; min-width: 44px; min-height: 44px; }

  /* Collection header: stack action buttons in a wrap-friendly row.
     The 500px rule already kicks in below this — keep these tweaks for the
     500–768px band where the desktop layout was busted but the 500px
     overrides hadn't fired yet. */
  #cv-header {
    padding: 10px 12px;
    gap: 8px;
  }
  #cv-header-left, #cv-header-right {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .cv-hdr-btn { font-size: 13px; padding: 8px 12px; }

  /* Shipping form: country / region selects on their own rows */
  .cv-ship-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cv-ship-row label {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* While a checkout modal is open, lock cart-side interactions. The modal
   sits above with its own z-index; this stops the user from changing qty
   or removing items while a payment intent is in flight (which would make
   the amount on Stripe inconsistent with what they're looking at). */
body.checkout-pending #cv-shipping,
body.checkout-pending #cv-item-list { pointer-events: none; opacity: 0.65; }

/* ─── Stripe Checkout modal (Phase 5.3) ────────────────────────────────────
   Three stages share the same card:
   1) #checkout-stage-prep  — spinner while print files bake + intent fetches
   2) #checkout-stage-pay   — Stripe Elements (Address + Payment) + Pay button
   3) #checkout-stage-done  — success confirmation
   .hidden swaps which stage shows. Backdrop is a separate sibling so the
   click-to-close works without bubbling through the card. */
#checkout-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
#checkout-modal.hidden { display: none; }
#checkout-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,12,24,0.78); backdrop-filter: blur(3px);
}
#checkout-modal-card {
  position: relative;
  width: min(560px, 92vw);
  max-height: 92vh; overflow-y: auto;
  background: #14182a;
  border: 1px solid rgba(72,136,238,0.30);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  color: #e8edf5;
}
#checkout-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(72,136,238,0.20);
  background: rgba(72,136,238,0.08);
  border-radius: 12px 12px 0 0;
}
.checkout-modal-title { flex: 1; font-size: 18px; font-weight: 700; text-align: right; }
/* "Back to Cart" replaces the old ✕ close. Backdrop clicks no longer
   close the modal — only this button does — so a stray click outside
   the card doesn't wipe the user's address/card entry. */
.checkout-modal-back {
  background: transparent; border: 1px solid rgba(255,255,255,0.40);
  color: #e8edf5; cursor: pointer;
  font-size: 14px; font-weight: 600;
  padding: 7px 14px; border-radius: 6px;
  transition: all 0.15s;
}
.checkout-modal-back:hover {
  border-color: rgba(255,255,255,0.70); color: #fff;
  background: rgba(255,255,255,0.06);
}
#checkout-modal-body { padding: 18px; }
.checkout-stage.hidden { display: none; }

/* Stage 1: prep / spinner */
#checkout-stage-prep { text-align: center; padding: 24px 8px; }
.checkout-prep-spinner {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border: 3px solid rgba(72,136,238,0.20);
  border-top-color: #4888ee;
  border-radius: 50%;
  animation: checkout-spin 0.9s linear infinite;
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }
.checkout-prep-msg { font-size: 16px; color: #cfe1ff; margin-bottom: 6px; }
.checkout-prep-msg.checkout-prep-error { color: #ff8a8a; }
.checkout-prep-sub { font-size: 13px; color: #8aa8c8; }

/* Per-map prep checklist. Populated by _renderCheckoutPrepList(); each
   <li> updates via _setPrepItemStatus(id, 'pending'|'active'|'done'|'failed'). */
#checkout-prep-list {
  list-style: none; padding: 0; margin: 16px auto 0;
  max-width: 460px; text-align: left;
}
#checkout-prep-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px; margin: 2px 0;
  font-size: 13px; line-height: 1.4;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  color: #aac;
}
#checkout-prep-list .prep-icon {
  flex: 0 0 16px; text-align: center;
  font-weight: 700; font-size: 14px;
  color: #6a8ab0;
}
#checkout-prep-list .prep-name   { flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#checkout-prep-list .prep-detail { flex: 0 0 auto; font-size: 11px; color: #7a9cc8; }

/* State styling — active rows pulse, done turns green, failed turns red */
#checkout-prep-list li.prep-active {
  background: rgba(72,136,238,0.10); color: #cfe1ff;
}
#checkout-prep-list li.prep-active .prep-icon {
  color: #4888ee;
  display: inline-block;
  animation: checkout-spin 0.9s linear infinite;
}
#checkout-prep-list li.prep-done   {
  background: rgba(76,175,138,0.10); color: #d8f0e4;
}
#checkout-prep-list li.prep-done   .prep-icon { color: #4caf8a; animation: none; }
#checkout-prep-list li.prep-failed {
  background: rgba(233,69,96,0.10); color: #f5d8de;
}
#checkout-prep-list li.prep-failed .prep-icon { color: #e94560; animation: none; }
#checkout-prep-list li.prep-failed .prep-detail { color: #e94560; }

/* Stage 2: Pay form */
#checkout-summary {
  background: rgba(72,136,238,0.08);
  border: 1px solid rgba(72,136,238,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 14px;
  display: grid; grid-template-columns: 1fr auto; row-gap: 5px;
}
#checkout-summary .ck-row-label { color: #8aa8c8; }
#checkout-summary .ck-row-value { color: #cfe1ff; text-align: right; font-variant-numeric: tabular-nums; }
#checkout-summary .ck-row-total .ck-row-value { color: #fff; font-weight: 700; }
#checkout-mode-badge {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f0d860;
  background: rgba(240,200,60,0.10);
  border: 1px solid rgba(240,200,60,0.35);
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
#checkout-mode-badge:empty { display: none; }
#checkout-form .checkout-field {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px;
  font-size: 14px; color: #8aa8c8;
}
.checkout-field-sub { opacity: 0.7; font-weight: 400; }
#checkout-form input[type="email"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(72,136,238,0.30);
  border-radius: 6px; padding: 10px 12px;
  color: #e8edf5; font-size: 15px;
}
#checkout-form input[type="email"]:focus {
  outline: none; border-color: rgba(72,136,238,0.70);
  background: rgba(255,255,255,0.06);
}
#checkout-address-element,
#checkout-payment-element { margin-bottom: 12px; }
.checkout-error {
  background: rgba(233,69,96,0.10);
  border: 1px solid rgba(233,69,96,0.40);
  color: #ffb3b8;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
}
.checkout-error.hidden { display: none; }
#checkout-submit-btn {
  width: 100%;
  background: #4888ee; border: 0; color: #fff;
  padding: 14px; border-radius: 6px; cursor: pointer;
  font-size: 16px; font-weight: 700;
  transition: background 0.15s, opacity 0.15s;
}
#checkout-submit-btn:hover:not(:disabled) { background: #5a99f5; }
#checkout-submit-btn:disabled { opacity: 0.55; cursor: progress; }

/* Stage 3: Done */
#checkout-stage-done { text-align: center; padding: 28px 8px; }
.checkout-done-icon {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 12px;
  background: rgba(85,180,120,0.18);
  border: 2px solid rgba(85,180,120,0.85);
  color: #6dcf96; font-size: 30px; font-weight: 700;
  border-radius: 50%;
}
.checkout-done-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: #cfe1ff; }
.checkout-done-msg { font-size: 14px; color: #8aa8c8; margin-bottom: 20px; line-height: 1.5; }
.checkout-done-msg small { font-size: 13px; }
.checkout-done-msg code { font-size: 13px; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; }
#checkout-stage-done button {
  background: rgba(72,136,238,0.18); border: 1px solid rgba(72,136,238,0.50);
  color: #90baf9; padding: 10px 22px; border-radius: 6px; cursor: pointer;
  font-size: 15px; font-weight: 600;
}
#checkout-stage-done button:hover { background: rgba(72,136,238,0.35); color: #fff; }

/* ── Mobile sheet-detail bottom sheet ─────────────────────────────────────────
   Shown when a map sheet is tapped on mobile (replaces the desktop viewer
   panel). The map opens in a native browser tab via "View map". */
#mobile-sheet { display: none; }
body.mobile #mobile-sheet.show { display: block; }
#mobile-sheet .ms-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(4, 10, 18, 0.55);
  animation: ms-fade 0.18s ease;
}
#mobile-sheet .ms-card {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4001;
  background: #14233a;
  border-top: 1px solid rgba(120,170,240,0.22);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom)) 18px;
  color: #eaf3ff;
  animation: ms-slide-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 80vh; overflow-y: auto;
}
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
#mobile-sheet .ms-head { display: flex; align-items: flex-start; gap: 12px; }
#mobile-sheet #ms-thumb {
  width: 64px; height: 64px; flex: 0 0 64px;
  object-fit: cover; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
#mobile-sheet .ms-titles { flex: 1 1 auto; min-width: 0; }
#mobile-sheet .ms-title {
  font-size: 18px; font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere;
}
#mobile-sheet .ms-sub {
  font-size: 13px; color: #8ab4d8; margin-top: 3px;
  overflow-wrap: anywhere;
}
#mobile-sheet .ms-x {
  flex: 0 0 auto; background: rgba(255,255,255,0.08);
  border: none; color: #cfe2ff; width: 32px; height: 32px;
  border-radius: 50%; font-size: 15px; cursor: pointer;
}
#mobile-sheet .ms-info {
  margin: 16px 0 4px 0; font-size: 14px; line-height: 1.6;
  color: #cfe2ff;
}
#mobile-sheet .ms-info .ms-row { display: flex; justify-content: space-between; gap: 12px; }
#mobile-sheet .ms-info .ms-row .k { color: #7f9cba; }
#mobile-sheet .ms-info .ms-row .v { text-align: right; overflow-wrap: anywhere; }
/* Small Source / License links under the info block. */
#mobile-sheet .ms-links {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0 0;
}
#mobile-sheet .ms-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; text-decoration: none;
  color: #9fc1ea; background: rgba(120,170,240,0.10);
  border: 1px solid rgba(120,170,240,0.30); border-radius: 6px;
  padding: 4px 9px; line-height: 1.2;
}
#mobile-sheet .ms-link:active { background: rgba(120,170,240,0.22); color: #fff; }
#mobile-sheet .ms-actions {
  display: flex; gap: 10px; margin-top: 18px;
}
#mobile-sheet .ms-btn {
  flex: 1 1 0; padding: 14px 10px; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer; border: none;
}
#mobile-sheet .ms-btn-primary { background: #3b82f6; color: #fff; }
#mobile-sheet .ms-btn-primary:active { background: #2f6fd6; }
#mobile-sheet .ms-btn-secondary {
  background: rgba(120,170,240,0.14);
  border: 1px solid rgba(120,170,240,0.40); color: #bcd6f5;
}
#mobile-sheet .ms-btn-secondary.in-cart {
  background: rgba(80,200,140,0.18);
  border-color: rgba(80,200,140,0.55); color: #8fe0b4;
}
/* Prep progress (download/convert) shown in place of the action buttons. */
#mobile-sheet #ms-progress { display: none; margin-top: 18px; }
#mobile-sheet.preparing .ms-actions { display: none; }
#mobile-sheet.preparing #ms-progress { display: block; }
#mobile-sheet .ms-prog-label { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
#mobile-sheet .ms-prog-track {
  height: 14px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.12);
}
#mobile-sheet .ms-prog-fill {
  height: 100%; width: 0%; border-radius: 8px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.3s ease;
}
#mobile-sheet .ms-prog-fill.indet { width: 38%; animation: ms-prog-slide 1.15s ease-in-out infinite; }
@keyframes ms-prog-slide { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }
#mobile-sheet .ms-prog-sub { font-size: 13px; opacity: 0.65; margin-top: 10px; min-height: 1.2em; }