/* EVE-inspired UI: dark, angular, cyan accents, orange highlights */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg-0: #07090c;
  --bg-1: #0d1218;
  --bg-2: #131a23;
  --bg-3: #1a2433;
  --line: #2a3a52;
  --line-bright: #3d5778;
  --text: #c9d6e6;
  --text-dim: #6f7d92;
  --text-bright: #ecf3ff;
  --cyan: #4fc3ff;
  --cyan-glow: rgba(79, 195, 255, 0.55);
  --orange: #ff9b3d;
  --orange-glow: rgba(255, 155, 61, 0.6);
  --green: #6bd968;
  --red: #ff5757;
  --warning: #ffd24a;
}

html {
  min-height: 100%;
  background-color: var(--bg-0);
}
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(79, 195, 255, 0.07), transparent 50%),
    radial-gradient(ellipse at 80% 110%, rgba(255, 155, 61, 0.05), transparent 50%),
    var(--bg-0);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  /* Safety net against any single overflowing child forcing horizontal
     page scroll. Individual scroll areas (tables, manifest previews)
     still scroll internally via their own overflow-x: auto. */
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(79, 195, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Header bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
/* Centered variant — used on /track so the Rhea + wordmark sit in
   the visual center of the topbar regardless of the side columns. */
.topbar.topbar-centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.topbar.topbar-centered > .back-to-dash { justify-self: start; }
.topbar.topbar-centered > .brand-home-centered { justify-self: center; }
.topbar.topbar-centered > .topbar-right { justify-self: end; }

/* /order topbar right-side cluster: EVE clock first, Rhea glyph to
   its right. The glyph is still a .brand-home clickable. */
.order-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "← BACK TO DASHBOARD" link in the top-left of /order and /track. */
.back-to-dash {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, text-shadow 0.15s;
  margin-right: 10px;
}
.back-to-dash:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Clickable home-link wrapper around the Rhea glyph + wordmark. Reset
   anchor defaults so it inherits the same look as the previous static
   markup; add a subtle hover lift on the glyph to signal interactivity. */
.brand-home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.brand-home:hover .brand-glyph {
  filter: drop-shadow(0 0 10px var(--cyan-glow)) drop-shadow(0 0 3px var(--cyan-glow));
}
.brand-home:hover .brand-text,
.brand-home:hover .dash-brand-text {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
}

.brand-glyph {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--cyan);
  /* drop-shadow follows the actual diamond shape (not the bounding box),
     so the glow rims the diamond outline, not a rectangle. */
  filter: drop-shadow(0 0 6px var(--cyan-glow)) drop-shadow(0 0 2px var(--cyan-glow));
}
/* Smaller variant used in the /order topbar, where the diamond sits
   alongside the EVE clock as a compact identifier rather than the
   primary brand mark. */
.brand-glyph-sm { width: 22px; height: 22px; }
.brand-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-text {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--text-bright);
  text-transform: uppercase;
}
.brand-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.topbar-right {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Admin topbar variant — holds the EVE-login state + logout cluster
   that used to live inside the New Contract panel header. Tighter
   gap + buttons sit inline with the muted login-status text. */
.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-topbar-right .eve-login-status {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Admin tab nav. EVE-themed angular pills, cyan accent on the active tab,
   subtle hover lift. Sticky-ish at the top of admin-view. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 18px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--line);
}
.admin-tab {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-bottom: none;
  color: var(--text-dim);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  position: relative;
  bottom: -1px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.admin-tab:hover {
  color: var(--text);
  border-color: var(--line-bright);
}
.admin-tab.is-active {
  color: var(--cyan);
  background: var(--bg-1);
  border-color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
}
/* Each tab panel just stacks its children — the only job of the wrapper
   is to be hidden/shown by the tab switcher. */
.admin-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Retroactive-discount block inside the edit modal. Compact panel with
   source/rate/stacking selectors and an Apply button. */
.edit-discount-block {
  border: 1px solid var(--line);
  background: rgba(79, 195, 255, 0.03);
  padding: 12px 14px;
  margin: 8px 0;
}
.edit-discount-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.edit-discount-title {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.edit-discount-status {
  margin-top: 8px;
  font-size: 11px;
  min-height: 14px;
}
.edit-discount-status.ok { color: var(--green); }
.edit-discount-status.err { color: var(--red); }
.eve-clock {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

/* Panels */
.panel {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line);
  position: relative;
  margin-bottom: 24px;
}

.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--cyan);
}
.panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-2), var(--bg-1));
}

.panel-title {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-transform: uppercase;
}

.panel-body { padding: 20px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eve-login-status {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.eve-login-status.logged-in { color: var(--green); }

/* Forms */
label.field {
  display: block;
  margin-bottom: 14px;
}

label.field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--text-bright);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 12px var(--cyan-glow);
}
textarea { resize: vertical; min-height: 80px; font-family: 'Consolas', monospace; }

.row { display: flex; gap: 14px; }
.row > * { flex: 1; }

/* Origin / Destination grouped block */
.loc-block {
  border: 1px dashed var(--line);
  padding: 10px 12px 4px;
  margin-bottom: 14px;
  background: rgba(13, 18, 24, 0.4);
}
.loc-block-label {
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.85;
}
.loc-block .field { margin-bottom: 10px; }

/* Autocomplete combobox dropdown */
label.field {
  position: relative;
}
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 2px;
  background: var(--bg-1);
  border: 1px solid var(--cyan);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 12px var(--cyan-glow);
  max-height: 280px;
  overflow-y: auto;
}
.ac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-family: 'Consolas', monospace;
  font-size: 13px;
  transition: background 0.1s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active {
  background: rgba(79, 195, 255, 0.12);
}
.ac-item .ac-name { color: var(--text-bright); }
.ac-item .ac-sub {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Buttons */
.btn {
  appearance: none;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line-bright);
  color: var(--text-bright);
  padding: 9px 18px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  border-color: var(--cyan);
  color: var(--cyan);
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.15), rgba(79, 195, 255, 0.05));
}
.btn.primary:hover {
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.25), rgba(79, 195, 255, 0.1));
  box-shadow: 0 0 16px var(--cyan-glow);
}
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover { box-shadow: 0 0 10px rgba(255, 87, 87, 0.5); }
.btn.warn { border-color: var(--orange); color: var(--orange); }
.btn.warn:hover { box-shadow: 0 0 10px var(--orange-glow); }
.btn.sm { padding: 5px 10px; font-size: 10px; }

/* Login screen */
.login-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: 380px;
}
.login-box .panel-body { padding: 28px 24px; }
.login-box h2 {
  font-family: 'Consolas', monospace;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: var(--text-bright);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.login-box p {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.login-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 10px;
  font-family: 'Consolas', monospace;
}

/* Order list table */
.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', monospace;
  font-size: 13px;
}
.orders-table th, .orders-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.orders-table th {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-1);
}
.orders-table tr:hover td { background: rgba(79, 195, 255, 0.05); }
.orders-table .id { color: var(--cyan); }
.orders-table .actions { text-align: right; white-space: nowrap; }
.orders-table .actions .btn { margin-left: 6px; }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid;
}
.status-1 { color: var(--text-dim); border-color: var(--line-bright); }
.status-2 { color: var(--warning); border-color: var(--warning); }
.status-3 { color: var(--orange); border-color: var(--orange); box-shadow: 0 0 8px var(--orange-glow); }
.status-4 { color: var(--green); border-color: var(--green); }

/* Modal / drawer */
.overlay {
  position: fixed; inset: 0;
  background: rgba(2, 4, 7, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

/* Tracking page hero */
.track-hero {
  padding: 26px 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.track-hero-left { flex: 1 1 320px; min-width: 0; }
.track-hero-right { flex: 0 0 auto; }

.track-route {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.route-end {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.route-loc {
  font-family: 'Consolas', monospace;
  font-size: 24px;
  color: var(--text-bright);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
  line-height: 1.1;
}
.route-sub {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  margin-top: 4px;
  text-transform: uppercase;
}
.route-sub:empty { display: none; }
.route-arrow {
  color: var(--cyan);
  font-size: 20px;
  text-shadow: 0 0 8px var(--cyan-glow);
  align-self: center;
}

.track-id-line {
  margin-top: 10px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.track-id {
  color: var(--cyan);
  letter-spacing: 0.25em;
  font-size: 12px;
  margin-left: 4px;
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* ETA pill (right side of hero) — USPS-style eye-catcher */
.track-hero-right {
  border: 2px solid;
  padding: 22px 36px 18px;
  text-align: center;
  min-width: 320px;
  background: var(--bg-1);
  position: relative;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: all 0.2s;
}
.eta-status-label {
  font-family: 'Consolas', monospace;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.35em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.eta-time {
  font-family: 'Consolas', monospace;
  color: var(--text-bright);
}
.eta-time-main {
  font-size: 18px;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.eta-relative {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  color: var(--text);
}

.track-hero-right.eta-on-time {
  border-color: var(--green);
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.18), rgba(107, 217, 104, 0.05));
  box-shadow: 0 0 16px rgba(107, 217, 104, 0.35), inset 0 0 12px rgba(107, 217, 104, 0.1);
}
.track-hero-right.eta-on-time .eta-status-label {
  color: var(--green);
  text-shadow: 0 0 10px rgba(107, 217, 104, 0.6);
}

.track-hero-right.eta-delayed {
  border-color: var(--warning);
  background: linear-gradient(180deg, rgba(255, 210, 74, 0.18), rgba(255, 210, 74, 0.05));
  box-shadow: 0 0 16px rgba(255, 210, 74, 0.35), inset 0 0 12px rgba(255, 210, 74, 0.1);
}
.track-hero-right.eta-delayed .eta-status-label {
  color: var(--warning);
  text-shadow: 0 0 10px rgba(255, 210, 74, 0.6);
}

.track-hero-right.eta-late {
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(255, 87, 87, 0.18), rgba(255, 87, 87, 0.05));
  box-shadow: 0 0 16px rgba(255, 87, 87, 0.35), inset 0 0 12px rgba(255, 87, 87, 0.1);
  animation: pulse-late 2s ease-in-out infinite;
}
.track-hero-right.eta-late .eta-status-label {
  color: var(--red);
  text-shadow: 0 0 10px rgba(255, 87, 87, 0.6);
}
@keyframes pulse-late {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 87, 87, 0.3), inset 0 0 12px rgba(255, 87, 87, 0.1); }
  50%      { box-shadow: 0 0 22px rgba(255, 87, 87, 0.55), inset 0 0 16px rgba(255, 87, 87, 0.2); }
}

.track-hero-right.eta-unknown {
  border-color: var(--green);
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.10), rgba(107, 217, 104, 0.03));
}
.track-hero-right.eta-unknown .eta-status-label {
  color: var(--green);
  opacity: 0.85;
}

.track-hero-right.eta-unknown-purple {
  border-color: #a07ee6;
  background: linear-gradient(180deg, rgba(160, 126, 230, 0.20), rgba(160, 126, 230, 0.05));
  box-shadow: 0 0 16px rgba(160, 126, 230, 0.35), inset 0 0 12px rgba(160, 126, 230, 0.08);
}
.track-hero-right.eta-unknown-purple .eta-status-label {
  color: #c3a8ff;
  text-shadow: 0 0 12px rgba(160, 126, 230, 0.6);
}

.track-hero-right.eta-unknown-red {
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(255, 87, 87, 0.18), rgba(255, 87, 87, 0.04));
  box-shadow: 0 0 16px rgba(255, 87, 87, 0.35), inset 0 0 12px rgba(255, 87, 87, 0.08);
}
.track-hero-right.eta-unknown-red .eta-status-label {
  color: var(--red);
  text-shadow: 0 0 12px rgba(255, 87, 87, 0.6);
}

/* "Scheduled" — light-blue variant, planned but not yet en route. */
.track-hero-right.eta-scheduled {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.18), rgba(79, 195, 255, 0.05));
  box-shadow: 0 0 16px var(--cyan-glow), inset 0 0 12px rgba(79, 195, 255, 0.1);
}
.track-hero-right.eta-scheduled .eta-status-label {
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
}

/* Admin-set note rendered as a small subtitle inside the ETA pill —
   currently only surfaced for the three unknown-* statuses. */
.eta-note {
  margin-top: 8px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--text);
  opacity: 0.85;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.track-hero-right.eta-delivered {
  border-color: #4cff5a;
  background: linear-gradient(180deg, rgba(76, 255, 90, 0.22), rgba(76, 255, 90, 0.06));
  box-shadow: 0 0 18px rgba(76, 255, 90, 0.45), inset 0 0 14px rgba(76, 255, 90, 0.12);
}
.track-hero-right.eta-delivered .eta-status-label {
  color: #4cff5a;
  text-shadow: 0 0 14px rgba(76, 255, 90, 0.7);
}
.track-hero-right.eta-delivered .eta-time-main {
  color: #d6ffd9;
  letter-spacing: 0.2em;
}
.track-hero-right.eta-delivered .eta-relative {
  color: var(--text-dim);
  opacity: 1;
}

.steps {
  display: flex;
  padding: 30px 18px 36px;
  gap: 0;
  align-items: stretch;
}

.step {
  flex: 1;
  position: relative;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  --bg: var(--bg-2);
  --fg: var(--text-dim);
  --border: var(--line);
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  margin-left: -22px;
  transition: all 0.3s ease;
}
.step:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.step:last-child {
  border-right: 1px solid var(--border);
}

.step-inner {
  text-align: center;
  padding: 12px 18px 12px 30px;
  position: relative;
  z-index: 1;
}
.step:first-child .step-inner { padding-left: 18px; }

.step-num {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--fg);
  letter-spacing: 0.3em;
  margin-bottom: 4px;
  opacity: 0.7;
}
.step-label {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  color: var(--fg);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.step-time {
  font-family: 'Consolas', monospace;
  font-size: 10px;
  color: var(--fg);
  margin-top: 6px;
  letter-spacing: 0.15em;
  opacity: 0.7;
}

.step-edt {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed currentColor;
  color: var(--fg);
}
.step-edt .edt-label {
  font-family: 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 3px;
}
.step-edt .edt-time {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-shadow: 0 0 6px var(--orange-glow);
}

/* Completed steps */
.step.done {
  --bg: linear-gradient(180deg, rgba(79, 195, 255, 0.10), rgba(79, 195, 255, 0.04));
  --fg: var(--cyan);
  --border: var(--cyan);
}

/* Active step (currently here) */
.step.active {
  --bg: linear-gradient(180deg, rgba(255, 155, 61, 0.22), rgba(255, 155, 61, 0.08));
  --fg: var(--orange);
  --border: var(--orange);
  z-index: 5;
  filter: drop-shadow(0 0 14px var(--orange-glow));
  animation: pulse-active 2.4s ease-in-out infinite;
}
@keyframes pulse-active {
  0%, 100% { filter: drop-shadow(0 0 10px var(--orange-glow)); }
  50% { filter: drop-shadow(0 0 22px var(--orange-glow)); }
}
.step.active .step-label { text-shadow: 0 0 8px var(--orange-glow); }

/* Pending steps stay dim default */

/* Track details grid */
.track-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.detail {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.detail:nth-child(odd) { border-right: 1px solid var(--line); }
.detail-label {
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.detail-value {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  color: var(--text-bright);
  white-space: pre-wrap;
  word-break: break-word;
}

/* History log */
.history-list {
  list-style: none;
  font-family: 'Consolas', monospace;
  font-size: 13px;
}
.history-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.history-list li:last-child { border-bottom: none; }
.history-row-main {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.history-time { color: var(--text-dim); font-size: 12px; }
.history-desc {
  margin-top: 5px;
  margin-left: 14px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
}
/* Subtle color hint per history-event type — a thin left border makes
   ETA / EDT updates visually distinguishable from status advancements. */
.history-list li.history-eta { padding-left: 10px; border-left: 2px solid var(--cyan); }
.history-list li.history-edt { padding-left: 10px; border-left: 2px solid var(--orange); }
.history-list li.history-status { padding-left: 10px; border-left: 2px solid var(--green); }

/* Authentication-required screen (tracker login gate) */
.auth-required {
  max-width: 520px;
  margin: 40px auto;
}
.auth-required .panel-body {
  padding: 36px 32px;
  text-align: center;
}
.auth-required .auth-icon {
  font-size: 42px;
  margin-bottom: 12px;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
}
.auth-required .auth-title {
  font-family: 'Consolas', monospace;
  font-size: 16px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
  margin-bottom: 14px;
}
.auth-required .auth-line {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.auth-required .auth-line strong {
  color: var(--text-bright);
  letter-spacing: 0.12em;
}
.auth-required .auth-line.muted {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-bottom: 22px;
}
.auth-required .auth-line.muted:empty { margin-bottom: 0; }
.auth-required .btn.auth-login {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 26px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-decoration: none;
}
.auth-required .btn.auth-logout {
  display: block;
  margin: 14px auto 0;
}

/* Empty / error states */
.empty, .error-screen {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Consolas', monospace;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}
.error-screen .code {
  font-size: 56px;
  color: var(--red);
  letter-spacing: 0.2em;
  margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(255, 87, 87, 0.5);
}

/* Tracking link readout */
.share-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line);
}
.share-link code {
  flex: 1;
  font-size: 13px;
  color: var(--cyan);
  word-break: break-all;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--bg-2);
  border: 1px solid var(--cyan);
  padding: 10px 18px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  box-shadow: 0 0 16px var(--cyan-glow);
  z-index: 200;
  animation: slidein 0.3s ease;
}
@keyframes slidein {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast.err { border-color: var(--red); color: var(--red); box-shadow: 0 0 16px rgba(255, 87, 87, 0.5); }

/* Admin Coupons + Customers tables — same dark-table idiom as the
   existing admin contracts table. */
.coupons-table, .customers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  margin-top: 14px;
}
.coupons-table th, .customers-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.coupons-table td, .customers-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}
.coupons-table tbody tr:hover td,
.customers-table tbody tr:hover td {
  background: rgba(79, 195, 255, 0.04);
}
.coupons-table code, .customers-table code {
  font-family: 'Consolas', monospace;
  color: var(--cyan);
}
.coupon-create-form { margin-bottom: 12px; }

/* === Mini in-game contract preview ===
   Mimics the EVE "Create Contract — Confirm (4/4)" dialog so customers
   know exactly what they're about to set up in-game. Lives in a sticky
   sidebar to the right of the main column on wide screens, stacks below
   on mobile. */
.order-layout {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.order-layout > .panel { flex: 1; min-width: 0; }

/* Tracking page: main content keeps the full shell width (no flex
   compression). On wide enough viewports the contract preview floats
   outside the shell's right edge via fixed positioning. On narrower
   viewports it stacks below the main content. */
#track-view {
  display: block;
  position: relative;
}
#track-view .track-main {
  width: 100%;
  min-width: 0;
}

.contract-preview {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  background: linear-gradient(180deg, #0a121b 0%, #060a0f 100%);
  border: 1px solid #1f3046;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6) inset, 0 2px 8px rgba(0, 0, 0, 0.4);
  font-family: 'Consolas', 'Courier New', monospace;
  color: #b8c7d8;
  user-select: none;
}
.contract-preview-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #1a2530, #131a23);
  border-bottom: 1px solid #2a3a52;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.contract-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, #3f7d4d, #2d5f38);
  border: 1px solid #4d9460;
  color: #d3f0d9;
  font-size: 10px;
}
.contract-preview-titletxt {
  color: #d5e0ed;
}
.contract-preview-step {
  padding: 12px 14px 6px;
  color: #e1ebf6;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.contract-preview-rows {
  padding: 6px 14px 14px;
  margin: 0;
}
.cp-row {
  display: flex;
  padding: 5px 0;
  align-items: baseline;
  gap: 14px;
  font-size: 11.5px;
  line-height: 1.35;
}
.cp-row dt {
  flex: 0 0 auto;
  width: 105px;
  color: #97a7bb;
}
.cp-row dd {
  flex: 1;
  margin: 0;
  color: #d5e0ed;
  word-break: break-word;
}
/* Yellow/orange underlined "links" — matches EVE's clickable identifiers
   (location, recipient, destination). Not actually clickable; this is
   a visual mimic only. */
.cp-link {
  color: #f0a13a;
  text-decoration: underline;
  text-underline-offset: 1px;
}
.cp-link.is-empty {
  color: #6c7888;
  text-decoration: none;
  font-style: italic;
}
.cp-sep {
  border-top: 1px solid #1f3046;
  margin: 8px -14px 6px;
}

/* Purchase-only intent: hide the dl rows and show this instead so the
   right rail makes it obvious no in-game contract is expected from the
   customer. The whole aside is also visually dimmed via .is-disabled.
   Extra bottom margin so the box doesn't bump against whatever stacks
   below it on narrow viewports. */
.contract-preview.is-disabled .contract-preview-titlebar,
.contract-preview.is-disabled .contract-preview-step {
  opacity: 0.45;
  filter: grayscale(1);
}
.contract-preview.is-disabled { margin-bottom: 18px; }
.cp-no-contract {
  padding: 18px 6px 20px;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: var(--text-dim);
}
.cp-no-contract-icon {
  font-size: 24px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  opacity: 0.55;
}
.cp-no-contract-title {
  font-family: 'Consolas', monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.cp-no-contract-body {
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* Reward-confirmation modal — purchase-order pre-submit dialog. */
.reward-confirm-modal { width: 540px; }
.reward-confirm-intro {
  margin: 0 0 14px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.reward-confirm-rec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 12px;
  background: rgba(79, 195, 255, 0.05);
  border-left: 2px solid var(--cyan);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.reward-confirm-rec strong {
  color: var(--cyan);
  font-size: 13px;
  text-shadow: 0 0 6px var(--cyan-glow);
}
.reward-confirm-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.reward-confirm-hint {
  font-size: 10.5px;
  margin-top: 4px;
}
.reward-confirm-total {
  margin-top: 14px;
  padding: 10px 12px;
  border-top: 1px solid var(--cyan);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-family: 'Consolas', monospace;
}
.reward-confirm-total > span:first-child {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
}
.reward-confirm-total strong {
  color: var(--green);
  font-size: 18px;
  text-shadow: 0 0 8px rgba(107, 217, 104, 0.5);
}

/* Customer-committed reward block (track page, purchase orders only).
   Shows the reward + tip + total the customer chose at submit time so
   the courier knows what to put on the in-game contract. */
.customer-reward-block {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(107, 217, 104, 0.05);
  border-left: 2px solid var(--green);
  font-family: 'Consolas', monospace;
}
.customer-reward-title {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.customer-reward-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.customer-reward-row > span:first-child { color: var(--text-dim); }
.customer-reward-row strong {
  color: var(--text-bright);
  font-size: 13px;
}
.customer-reward-row.customer-reward-total {
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 8px;
}
.customer-reward-row.customer-reward-total strong {
  color: var(--green);
  font-size: 15px;
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}

/* Earned-milestone block on the tracking page. Cyan-accented panel
   that mirrors the same milestone catalog the dashboard renders. */
.milestone-panel {
  border-color: var(--cyan);
}
.milestone-panel::before,
.milestone-panel::after { border-color: var(--cyan); }
.milestone-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.milestone-ship-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 1px solid var(--cyan);
  background: var(--bg-0);
  filter: drop-shadow(0 0 6px var(--cyan-glow));
}
.milestone-text { flex: 1; min-width: 0; }
.milestone-title {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  margin-bottom: 6px;
}
.milestone-tier-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.milestone-tier-line strong {
  color: var(--text-bright);
  font-family: 'Consolas', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.milestone-discount-pill {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(107, 217, 104, 0.16);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}
.milestone-gifts { margin: 6px 0 8px; }
.milestone-gift {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 4px;
}
.milestone-gift strong { color: var(--text-bright); }
.milestone-gift-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.milestone-status {
  margin-top: 8px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.milestone-status.delivered { color: var(--green); text-shadow: 0 0 6px rgba(107, 217, 104, 0.5); }
.milestone-status.pending   { color: var(--warning); }

/* Admin impersonation banner — shown at the top of /dashboard,
   /order, /track when an admin has taken on a customer's tracker
   session via /api/admin/impersonate. Purple to look distinctly
   non-production (not cyan / orange like the other notices). */
.impersonation-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 0 18px;
  background: rgba(160, 126, 230, 0.10);
  border: 1px solid #a07ee6;
  color: #c3a8ff;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.impersonation-banner strong {
  color: #ecf3ff;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.impersonation-icon { font-size: 18px; line-height: 1; }
.impersonation-text { flex: 1; }
.impersonation-exit {
  border-color: #a07ee6;
  color: #c3a8ff;
}
.impersonation-exit:hover {
  background: rgba(160, 126, 230, 0.18);
  color: #ecf3ff;
}

/* Admin orders table — red outline + label on rows whose order has
   never been opened by an admin in the edit modal. Drops on the next
   render after admin clicks the row. */
.orders-table tr.unseen-order td {
  box-shadow: inset 2px 0 0 var(--red);
  background: rgba(255, 87, 87, 0.05);
}
.orders-table tr.unseen-order td:first-child {
  position: relative;
}
.unseen-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(255, 87, 87, 0.18);
  border: 1px solid var(--red);
  color: var(--red);
  font-family: Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(255, 87, 87, 0.5);
  vertical-align: middle;
}

/* Admin edit modal: earned-milestone delivery controls. Mirrors the
   same green-tinted family as the customer-reward callout but with a
   button to flip delivered state. */
.edit-milestone-block {
  border: 1px solid var(--cyan);
  background: rgba(79, 195, 255, 0.04);
  padding: 12px 14px;
  margin: 12px 0;
}
.edit-milestone-title {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.edit-milestone-body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 10px;
}
.edit-milestone-body strong { color: var(--text-bright); }
.edit-milestone-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.edit-milestone-status {
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.edit-milestone-status.delivered { color: var(--green); }
.edit-milestone-status.pending   { color: var(--warning); }

/* Admin edit modal: customer-committed reward callout. Same visual
   family as the edit-discount-block above it. */
.edit-customer-reward {
  border: 1px solid var(--green);
  background: rgba(107, 217, 104, 0.05);
  padding: 10px 14px;
  margin: 12px 0;
}
.edit-customer-reward-title {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.edit-customer-reward-body {
  font-family: Consolas, monospace;
  font-size: 13px;
  color: var(--text-bright);
}
.cp-calculator-btn {
  background: linear-gradient(180deg, #1a2530, #0e161e);
  border: 1px solid #3d5778;
  color: #d5e0ed;
  padding: 3px 12px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}
.cp-calculator-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}
.cp-calculator-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .order-layout { flex-direction: column; }
  .contract-preview { width: 100%; position: static; }
}

/* Track-page sidebar: on viewports wide enough to keep the aside outside
   the shell's max-width (1200px shell + 280px aside + gap ≈ 1520px),
   pin it via fixed positioning so it never compresses the main column.
   Below that, stack it under the main content. */
@media (min-width: 1320px) {
  #track-view .contract-preview {
    position: fixed;
    top: 90px;
    right: max(16px, calc((100vw - 1200px) / 2 - 300px));
    width: 280px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    z-index: 5;
  }
}
@media (max-width: 1319px) {
  #track-view .contract-preview {
    position: static;
    width: 100%;
    margin-top: 22px;
  }
}

/* Public /order page — request a JF run */
/* Welcome banner above the courier-request panel. "Lighter blue" callout
   styled as a cyan-tinted box (distinct from the dark .panel cards) with
   the Rhea diamond glyph beside the title, plus an Orders Finished badge
   that stretches the full height of the panel on the right. */
.welcome-panel {
  background: linear-gradient(135deg, rgba(79, 195, 255, 0.16), rgba(79, 195, 255, 0.05));
  border: 1px solid var(--cyan);
  border-radius: 2px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: 0 0 18px var(--cyan-glow) inset, 0 0 14px rgba(79, 195, 255, 0.18);
  display: flex;
  align-items: stretch;
  gap: 22px;
}
.welcome-main { flex: 1; min-width: 0; }
.welcome-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}
/* "Orders Finished" badge — embedded darker-blue panel on the right of
   the welcome banner. Stretches to the full height of the welcome panel
   (align-items: stretch on the parent) so its top/bottom edges align
   with the panel's content padding. Width is fixed; height tracks the
   panel's main column. */
.welcome-stats {
  background: rgba(7, 12, 22, 0.85);
  border: 1px solid var(--cyan);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 130px;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(79, 195, 255, 0.18) inset;
}
.welcome-stats-label {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 90px;
}
.welcome-stats-value {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-bright);
  text-shadow: 0 0 10px var(--cyan-glow);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.welcome-glyph {
  width: 56px;
  height: 56px;
  color: var(--cyan);
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px var(--cyan-glow));
}
.welcome-glyph svg { width: 100%; height: 100%; display: block; }
.welcome-title {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 22px;
  letter-spacing: 0.22em;
  color: var(--text-bright);
  text-shadow: 0 0 14px var(--cyan-glow);
}
.welcome-body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  text-align: center;
}

.order-blurb {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.55;
}
.fuel-line {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255, 155, 61, 0.06);
  border: 1px dashed var(--orange);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.fuel-line strong {
  color: var(--orange);
  font-size: 14px;
  text-shadow: 0 0 6px var(--orange-glow);
  letter-spacing: 0.04em;
}

.price-calc-body {
  padding-top: 4px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.price-row > span:first-child { color: var(--text-dim); }
.price-row strong {
  color: var(--text-bright);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.price-row.total {
  border-bottom: none;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cyan);
}
.price-row.total > span:first-child {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
}
.price-row.total strong {
  color: var(--text-bright);
  font-size: 16px;
  text-shadow: 0 0 8px var(--cyan-glow);
}
/* Wraps the strikethrough-original + discount-badge + final-price so
   flexbox space-between keeps the label on the left and the group on
   the right. */
.price-row-end {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.optional-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(107, 217, 104, 0.16);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}

/* Strike-through original price shown to the left of the discounted
   total when an earned discount applies. */
.reward-original {
  color: var(--text-dim);
  text-decoration: line-through;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
}
/* Small green "X% OFF" badge between the strike and the discounted total. */
.reward-discount-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(107, 217, 104, 0.18);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}
/* When discount is applied, the final number is green to reinforce. */
.price-row.total strong.discounted {
  color: var(--green);
  text-shadow: 0 0 8px rgba(107, 217, 104, 0.5);
}
/* Sub-note merged into the reward block — small font, right-aligned,
   sits immediately under the Recommended Reward total row. Replaces the
   older .price-discount-note callout. */
.price-row-subnote {
  margin: 2px 0 0;
  padding: 0 2px 0 0;
  text-align: right;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  line-height: 1.45;
}
.price-row-subnote .pc-final {
  color: var(--green);
  font-family: Consolas, 'Courier New', monospace;
  letter-spacing: 0.08em;
}
/* Parenthetical that explains the stacking mode for each layer
   (e.g. "(additive)", "(overrides earlier)"). Dimmer + italic so the
   rates themselves stay the visual priority. */
.price-row-subnote .pc-aside {
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.75;
}

/* "Add fit manually" panel — sibling to .manual-add-panel. Customer
   pastes an EFT fit + quantity → server-validated volumes filter out
   anything that's too big for a single Rhea trip. */
.manual-fit-panel {
  margin-top: 10px;
  padding: 12px;
  background: rgba(13, 18, 24, 0.55);
  border: 1px dashed var(--line-bright);
}
.manual-fit-panel textarea {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  min-height: 140px;
}
.manual-fit-status {
  margin-top: 6px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.manual-fit-status.ok  { color: var(--green); }
.manual-fit-status.err { color: var(--red); }

/* Contract-sent gate on the /order finalize step. Customer must
   confirm they've created the in-game courier contract before they
   can submit. Only shown for transport / mixed orders. */
.contract-sent-gate {
  margin: 16px 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 155, 61, 0.12), rgba(255, 155, 61, 0.04));
  border: 1px solid var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}
.contract-sent-title {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow: 0 0 8px var(--orange-glow);
  margin-bottom: 8px;
}
.contract-sent-body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
}
.contract-sent-body strong { color: var(--text-bright); }
.contract-sent-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.contract-sent-status {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.contract-sent-status.confirmed {
  color: var(--green);
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}

/* Coupon-code input status line — green/red feedback as the customer
   types. Lives next to the coupon input in the finalize step. */
.coupon-status {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  flex: 0 0 auto;
  align-self: center;
  min-width: 160px;
}
.coupon-status.ok  { color: var(--green); text-shadow: 0 0 6px rgba(107, 217, 104, 0.45); }
.coupon-status.err { color: var(--red);   text-shadow: 0 0 6px rgba(255, 87, 87, 0.45); }
.price-warning {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 210, 74, 0.06);
  border: 1px solid var(--warning);
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.price-warning strong { color: var(--warning); }

/* Inline route-section heads-up — used under the origin select when a
   PURCHASE order picks 4-HWWF as the sourcing station. Yellow-tinted
   to match other warnings. */
.route-warning {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 210, 74, 0.06);
  border: 1px solid var(--warning);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.route-warning strong { color: var(--warning); }
.route-warning .warn-icon {
  color: var(--warning);
  font-size: 14px;
  line-height: 1.4;
}

/* Field-section body padding for collapsible sections (m³, Price) */
.field-section-body {
  padding: 6px 0 4px;
}

/* "Or, enter total m³ directly" block under the manifest. The horizontal
   divider with the inline "or" label makes the alternative path obvious. */
.declared-m3 { margin-top: 18px; }
.declared-m3-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.declared-m3-divider::before,
.declared-m3-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.field-section-body > .field:last-child { margin-bottom: 0; }
.price-calc-gate {
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.price-disclaimer {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(79, 195, 255, 0.05);
  border-left: 2px solid var(--cyan);
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* Progressive disclosure on /order — each form phase lives in a
   .step-block. Later steps stay hidden until earlier ones are filled
   in; a subtle top divider separates adjacent visible steps. */
.step-block + .step-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-bright);
}
.step-heading {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
  text-shadow: 0 0 8px var(--cyan-glow);
}
.step-subheading {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}
.step-subheading strong { color: var(--text-bright); }

/* Order intent (purchase / transport / both) — top of /order form */
.intent-block {
  margin-bottom: 0;
  padding: 14px 16px;
  background: rgba(13, 18, 24, 0.55);
  border: 1px solid var(--line-bright);
}
.intent-question {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  line-height: 1.5;
}
.intent-question strong {
  color: var(--cyan);
  font-weight: 700;
  text-shadow: 0 0 6px var(--cyan-glow);
}
.intent-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.intent-option {
  flex: 1 1 180px;
  min-width: 150px;
  appearance: none;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  font: inherit;
}
.intent-option:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.intent-option.selected {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.18), rgba(79, 195, 255, 0.06));
  box-shadow: 0 0 12px var(--cyan-glow), inset 0 0 8px rgba(79, 195, 255, 0.08);
}
.intent-option-label {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.intent-option.selected .intent-option-label {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
}
.intent-option-sub {
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Cargo input-mode buttons (paste vs. m³) — visually mirror the intent
   buttons but use a separate class so JS selectors stay scoped and the
   two button groups don't clobber each other's selected state. */
.cargo-mode-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cargo-mode-btn {
  flex: 1 1 180px;
  min-width: 150px;
  appearance: none;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  font: inherit;
}
.cargo-mode-btn:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.cargo-mode-btn.selected {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.18), rgba(79, 195, 255, 0.06));
  box-shadow: 0 0 12px var(--cyan-glow), inset 0 0 8px rgba(79, 195, 255, 0.08);
}
.cargo-mode-label {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.cargo-mode-btn.selected .cargo-mode-label {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
}
.cargo-mode-sub {
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Wrapper for the per-intent cargo sub-blocks (purchase, transport). */
.cargo-block + .cargo-block { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.cargo-block-title {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.cargo-block-sub {
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 12px;
}
.cargo-block-sub strong { color: var(--text-bright); }
.m3-help {
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-family: 'Consolas', monospace;
}

/* Order intent badge in the admin contracts table */
.intent-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'Consolas', monospace;
  font-weight: 700;
  border: 1px solid;
  vertical-align: middle;
}
.intent-badge.purchase {
  color: var(--orange);
  border-color: var(--orange);
}
.intent-badge.mixed {
  color: #93dfff;
  border-color: rgba(147, 223, 255, 0.65);
}

/* Manifest sections on /order need a bit of vertical separation in mixed mode.
   When the preceding section is hidden (single-mode purchase or transport),
   suppress the gap so the visible section doesn't get phantom top spacing. */
.manifest-section + .manifest-section { margin-top: 22px; }
.manifest-section[hidden] + .manifest-section { margin-top: 0; }

/* Contract-address instruction shown inside the transport manifest section */
.contract-instruction {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(79, 195, 255, 0.07);
  border-left: 2px solid var(--cyan);
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.55;
}
.contract-instruction strong {
  color: var(--cyan);
  font-weight: 700;
  text-shadow: 0 0 6px var(--cyan-glow);
}

/* "Add item manually" inline panel */
.manual-add-panel {
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: rgba(13, 18, 24, 0.55);
  border: 1px dashed var(--line);
}
.manual-add-panel:not([hidden]) {
  animation: slidein 0.2s ease;
}
.manual-add-row { margin-bottom: 4px; }
.manual-add-row .field { margin-bottom: 0; }
.manual-add-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Autocomplete dropdown variant with icons (manual-add search) */
.manual-add-panel .autocomplete-dropdown { max-height: 240px; }
.manual-add-panel .ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}
.manual-add-panel .ac-item img,
.manual-add-panel .ac-item .ac-icon-fallback {
  width: 24px;
  height: 24px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.manual-add-panel .ac-item .ac-icon-fallback {
  border-style: dashed;
  border-color: var(--line-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
}
.manual-add-panel .ac-item .ac-text { flex: 1; min-width: 0; }
.manual-add-panel .ac-item .ac-name {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.order-actions .btn.primary { padding: 10px 24px; }
#order-logout {
  text-decoration: none;
  color: var(--text-dim);
}
.order-error {
  margin-top: 12px;
  padding: 9px 12px;
  background: rgba(255, 87, 87, 0.08);
  border: 1px solid var(--red);
  color: var(--red);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* Cargo-confirmation floating card (top-right of tracking page) */
.confirm-card {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 280px;
  z-index: 90;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--green);
  padding: 16px 18px;
  box-shadow: 0 0 22px rgba(107, 217, 104, 0.45), inset 0 0 12px rgba(107, 217, 104, 0.08);
  animation: slidein 0.35s ease;
}
.confirm-card .confirm-title {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 8px rgba(107, 217, 104, 0.5);
  margin-bottom: 10px;
}
.confirm-card .btn.confirm-btn {
  width: 100%;
  border-color: var(--green);
  color: var(--green);
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.18), rgba(107, 217, 104, 0.06));
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.confirm-card .btn.confirm-btn:hover {
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.3), rgba(107, 217, 104, 0.1));
  box-shadow: 0 0 14px rgba(107, 217, 104, 0.55);
}
.confirm-card .btn.confirm-btn:disabled { opacity: 0.6; cursor: default; }
.confirm-card .confirm-sub {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  line-height: 1.4;
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
}
.confirm-card .confirm-error {
  margin-top: 10px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--red);
}
.confirm-card.confirmed {
  border-color: var(--green);
  box-shadow: 0 0 14px rgba(107, 217, 104, 0.3);
  opacity: 0.92;
}

/* Courier-contract instruction panel (tracking page; only when transport is involved) */
.contract-instruction-panel {
  border-color: var(--green);
  box-shadow: inset 0 0 14px rgba(107, 217, 104, 0.06);
}
.contract-instruction-panel::before,
.contract-instruction-panel::after { border-color: var(--green); }
.contract-instruction-panel .panel-body {
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.10), rgba(107, 217, 104, 0.02));
  padding: 16px 22px;
}
.contract-instruction-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.contract-instruction-text { flex: 1; min-width: 220px; }
.contract-title {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 10px rgba(107, 217, 104, 0.55);
  margin-bottom: 6px;
}
.contract-body {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.contract-body strong {
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}
.btn.contract-done-btn {
  border-color: var(--green);
  color: var(--green);
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.20), rgba(107, 217, 104, 0.06));
  padding: 10px 26px;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.btn.contract-done-btn:hover {
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.32), rgba(107, 217, 104, 0.10));
  box-shadow: 0 0 16px rgba(107, 217, 104, 0.55);
}
.btn.contract-done-btn:disabled { opacity: 0.6; cursor: default; }
.contract-error {
  margin-top: 10px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--red);
}

/* Compact confirmed state after the customer clicks Done */
.contract-done-panel { border-color: var(--green); }
.contract-done-panel::before,
.contract-done-panel::after { border-color: var(--green); }
.contract-done-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--green);
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.06), rgba(107, 217, 104, 0.01));
}
.contract-done-check {
  font-size: 18px;
  text-shadow: 0 0 8px rgba(107, 217, 104, 0.55);
}

/* Admin orders-table contract badge (next to tracking ID) */
.contract-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'Consolas', monospace;
  font-weight: 700;
  border: 1px solid;
  vertical-align: middle;
}
.contract-badge.created {
  color: var(--green);
  border-color: var(--green);
}
.contract-badge.awaiting {
  color: var(--warning);
  border-color: var(--warning);
  opacity: 0.85;
}

/* Payment-pending notice (orange warning, yellow ⚠ icon) */
.payment-notice {
  border-color: var(--orange);
  box-shadow: inset 0 0 14px rgba(255, 155, 61, 0.06);
}
.payment-notice::before,
.payment-notice::after { border-color: var(--orange); }
.payment-notice .panel-body {
  background: linear-gradient(180deg, rgba(255, 155, 61, 0.10), rgba(255, 155, 61, 0.02));
  padding: 16px 22px;
}
.payment-notice-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.warn-icon {
  font-size: 36px;
  line-height: 1;
  color: var(--warning);
  text-shadow: 0 0 14px rgba(255, 210, 74, 0.6), 0 0 4px rgba(255, 210, 74, 0.9);
  flex-shrink: 0;
}
.payment-notice-text { min-width: 0; }
.payment-notice-title {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange);
  text-shadow: 0 0 10px var(--orange-glow);
  margin-bottom: 6px;
}
.payment-notice-body {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--text-bright);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.payment-notice-sub {
  font-family: 'Segoe UI', 'Tahoma', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Admin: confirmation toggle + invoice details section */
.check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(13, 18, 24, 0.4);
  border: 1px dashed var(--line);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.check-field input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--green);
  margin: 0;
}
.check-field .muted { font-size: 11px; opacity: 0.85; }

.field-section {
  border: 1px solid var(--line);
  background: rgba(13, 18, 24, 0.35);
  margin-bottom: 14px;
}
.field-section > summary {
  padding: 10px 14px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.field-section > summary::-webkit-details-marker { display: none; }
.field-section > summary::before { content: '▶ '; opacity: 0.7; }
.field-section[open] > summary::before { content: '▼ '; }
.field-section[open] {
  padding: 4px 14px 14px;
}
.field-section .field { margin-bottom: 10px; }
.field-section .field:last-child { margin-bottom: 0; }

#edit-confirm-status.confirmed { color: var(--green); }

/* Confirmation badge in orders table */
.conf-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid;
  font-family: 'Consolas', monospace;
}
.conf-badge.confirmed { color: var(--green); border-color: var(--green); }
.conf-badge.pending { color: var(--warning); border-color: var(--warning); opacity: 0.8; }

/* Misc */
.spacer { height: 16px; }
.muted { color: var(--text-dim); font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* Manifest tools bar (import button) */
.manifest-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -6px 0 12px;
}
.manifest-tools .muted { font-size: 11px; }

/* Asset-import modal: scrollable list of containers from EVE assets */
.asset-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-0);
  max-height: 420px;
  overflow-y: auto;
  margin-top: 6px;
}
.asset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: background 0.1s;
}
.asset-row:last-child { border-bottom: none; }
.asset-row:hover {
  background: rgba(79, 195, 255, 0.08);
}
.asset-row img {
  width: 32px;
  height: 32px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.asset-row .icon-fallback {
  width: 32px;
  height: 32px;
  background: var(--bg-1);
  border: 1px dashed var(--line-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.asset-row-text { flex: 1; min-width: 0; }
.asset-row-name {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-row-meta {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.asset-row-arrow {
  color: var(--cyan);
  font-size: 14px;
  opacity: 0.6;
}
.asset-row:hover .asset-row-arrow { opacity: 1; }
#asset-import-filter {
  width: 100%;
  margin-bottom: 4px;
}
#asset-import-status {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
#asset-import-status code {
  font-size: 11px;
  background: var(--bg-2);
  padding: 1px 5px;
  color: var(--cyan);
}

/* Manifest table (cargo items with icons + prices) */
.manifest-preview {
  margin: 6px 0 14px;
  /* Constrain to the parent column width — the table inside has
     white-space:nowrap on numeric columns, so without overflow:auto
     long ISK totals push the whole form column wider than its siblings.
     With this, the table scrolls horizontally within the preview if its
     content is too wide for the available space. */
  max-width: 100%;
  overflow-x: auto;
}
.manifest-preview:empty { display: none; }
.track-manifest { margin: 0; }

.manifest-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', monospace;
  font-size: 13px;
  background: var(--bg-1);
}
.manifest-table th, .manifest-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.manifest-table th {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-2);
  padding: 9px 12px;
  font-weight: 500;
}
.manifest-table th.num, .manifest-table td.num { text-align: right; white-space: nowrap; }
.manifest-table th.icon-col { width: 44px; padding-right: 0; }
.manifest-table .icon-cell {
  width: 44px;
  padding: 4px 0 4px 12px;
}
.manifest-table .icon-cell img {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  image-rendering: -webkit-optimize-contrast;
}
.manifest-table .icon-fallback {
  width: 32px;
  height: 32px;
  background: var(--bg-0);
  border: 1px dashed var(--line-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 16px;
}
.manifest-table .name-cell {
  color: var(--text-bright);
  font-size: 13px;
}
.manifest-table .name-cell .muted-sm {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-top: 2px;
  opacity: 0.85;
}
.manifest-table tr.unknown .name-cell { color: var(--text-dim); }
.manifest-table tbody tr:hover td { background: rgba(79, 195, 255, 0.04); }

/* Blueprint copy (BPC) rows: lighter-blue tag near name, yellow warning
   symbol next to the 0.00 placeholder price. */
.bpc-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #93dfff;
  background: rgba(147, 223, 255, 0.10);
  border: 1px solid rgba(147, 223, 255, 0.6);
  vertical-align: middle;
  cursor: help;
}
.bpc-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
}
.bpc-warn {
  color: var(--warning);
  cursor: help;
  text-shadow: 0 0 4px rgba(255, 210, 74, 0.5);
}
.manifest-table tr.bpc .icon-cell img {
  /* Subtle lighter-blue tint to reinforce that this is a copy, even if the
     /bpc image variant isn't visually distinct enough at 32px. */
  filter: brightness(1.05) saturate(0.9);
}

/* "Show more / Show all" expand row in long manifests */
.manifest-table tr.manifest-more td {
  background: var(--bg-1);
  padding: 10px 14px;
  text-align: center;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.manifest-table tr.manifest-more .more-text {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 14px;
}
.manifest-table tr.manifest-more .btn {
  margin: 0 4px;
}

.manifest-table tfoot tr.grand-total td {
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.10), rgba(79, 195, 255, 0.04));
  border-top: 1px solid var(--cyan);
  border-bottom: none;
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px;
}
.manifest-table tfoot tr.grand-total td.num {
  letter-spacing: 0.05em;
}
.manifest-table tfoot tr.grand-total td:nth-child(2),
.manifest-table tfoot tr.grand-total td:last-child {
  color: var(--text-bright);
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 0 8px var(--cyan-glow);
}

.manifest-empty {
  padding: 16px 18px;
  font-family: 'Consolas', monospace;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.15em;
}
.manifest-note {
  padding: 8px 14px;
  font-family: 'Consolas', monospace;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.15em;
  background: rgba(255, 155, 61, 0.06);
  border-top: 1px dashed var(--orange);
}

.raw-manifest {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.raw-manifest summary {
  padding: 8px 14px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.raw-manifest summary:hover { color: var(--cyan); }
.raw-manifest pre {
  padding: 0 18px 14px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* === Customer dashboard (/dashboard) === */

/* "VIRAL LOGISTICS" wordmark beside the Rhea diamond in the dashboard
   topbar. Same cyan as the diamond outline; bold, small. */
.dash-brand-text {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--cyan);
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--cyan-glow);
}

/* Global announcement banner. Sits between the topbar and the dashboard
   grid; hidden by default and revealed only when an admin has set
   non-empty text via /api/admin/announcement. Full-width, short. */
.dash-announcement {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(79, 195, 255, 0.14), rgba(79, 195, 255, 0.04));
  border: 1px solid var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow), inset 0 0 6px rgba(79, 195, 255, 0.08);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.dash-announcement-icon {
  flex-shrink: 0;
  color: var(--cyan);
  font-size: 18px;
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
.dash-announcement-text {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}


/* Two-region grid:
     row 1: account card (left) + rewards card (right)
     row 2: orders table (full width)
   The courier-request form was removed from the dashboard — new orders
   go through /order via the NEW ORDER button in the topbar. */
.dash-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-areas:
    "account rewards"
    "orders  orders";
  gap: 22px;
  align-items: start;
}
.dash-account-card     { grid-area: account; min-width: 0; }
.dash-rewards-card     { grid-area: rewards; margin-bottom: 0; min-width: 0; }
.dash-orders-section   { grid-area: orders; margin-bottom: 0; min-width: 0; }

/* Right-side cluster in the dashboard topbar — NEW ORDER button +
   EVE clock. Clock anchored rightmost; button just to its left. */
.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Green "+ NEW ORDER" CTA in the dashboard topbar, sits to the left of
   the EVE clock. */
.dash-new-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.20), rgba(107, 217, 104, 0.08));
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'Consolas', monospace;
  font-size: 12px;
  letter-spacing: 0.20em;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(107, 217, 104, 0.35);
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.dash-new-order-btn:hover {
  background: linear-gradient(180deg, rgba(107, 217, 104, 0.32), rgba(107, 217, 104, 0.14));
  box-shadow: 0 0 14px rgba(107, 217, 104, 0.55);
  color: #d2ffd1;
}
.dash-new-order-plus {
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  margin-top: -2px;
}

/* Customer-tier label under the character name in the account card.
   Static "VALUED CUSTOMER" for now; will be dynamic once the tier
   system is wired up. */
.dash-account-tier-label {
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  margin-top: -6px;
}

/* Account card — vertically-longer rectangle on the top-left. Portrait
   + name + lifetime stats + discount. */
.dash-account-card .panel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.dash-account-portrait img {
  width: 128px;
  height: 128px;
  border: 1px solid var(--line-bright);
  background: var(--bg-0);
  display: block;
}
.dash-account-name {
  font-family: 'Consolas', monospace;
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--text-bright);
  text-shadow: 0 0 10px var(--cyan-glow);
  text-transform: uppercase;
  word-break: break-word;
}
.dash-account-subline {
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: -8px;
}
.dash-account-stats {
  margin: 0;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dash-account-stats .cp-row {
  justify-content: space-between;
  padding: 4px 0;
}
.dash-account-stats .cp-row dt {
  color: var(--text-dim);
  width: auto;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.dash-account-stats .cp-row dd {
  color: var(--text-bright);
  font-size: 12px;
  text-align: right;
}
.dash-account-discount {
  width: 100%;
  text-align: center;
}
.dash-account-label {
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
#account-discount {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--text-bright);
}
.dash-account-actions { width: 100%; }
.dash-account-actions .btn { width: 100%; }

/* Filters row above the orders table. */
.dash-filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Orders table — same dark-themed table idiom as the admin one. The
   max-width:100% pins the wrap to its grid-item parent so long station
   names scroll INSIDE the wrap instead of pushing the page wider. */
.dash-orders-table-wrap { overflow-x: auto; max-width: 100%; }
.dash-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', monospace;
  font-size: 12px;
}
.dash-orders-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.dash-orders-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}
.dash-orders-table tbody tr:hover td {
  background: rgba(79, 195, 255, 0.04);
}
.dash-id-link {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dash-id-link:hover { text-shadow: 0 0 6px var(--cyan-glow); }
.dash-id-badges {
  margin-top: 4px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dash-badge {
  display: inline-block;
  padding: 1px 6px;
  font-family: 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.dash-badge-warn {
  color: var(--warning);
  border-color: var(--warning);
  background: rgba(255, 210, 74, 0.08);
}
.dash-badge-orange {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(255, 155, 61, 0.08);
}
.dash-route-arrow {
  color: var(--cyan);
  margin: 0 4px;
  opacity: 0.7;
}
.dash-route { color: var(--text-bright); }
.dash-eta, .dash-created { color: var(--text-dim); }
.dash-actions { text-align: right; }
.dash-orders-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-dim);
  font-family: 'Consolas', monospace;
  font-size: 13px;
}

.dash-discount-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(107, 217, 104, 0.16);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Rewards card — monthly four-milestone track. The previous lifetime-
   tier ladder CSS (.dash-tier-* / .dash-rewards-slot) is retained
   below in case we revive the tier system. */
.dash-rewards-card .panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-rewards-intro {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.dash-rewards-intro strong { color: var(--cyan); }

/* Monthly track — 4 milestone cells in a row, connected by short
   horizontal links. Each cell shows the ship render large, the ship
   name, the progress (X / 3), and the reward placeholder. State is
   driven by .complete / .active / .locked on the cell. */
.dash-monthly-milestones {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.dash-monthly-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.dash-monthly-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-monthly-icon {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--line-bright);
  background-color: var(--bg-0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, filter 0.2s;
}
.dash-monthly-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #06140a;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(107, 217, 104, 0.7);
}
.dash-monthly-cell.locked .dash-monthly-icon {
  filter: grayscale(1);
  opacity: 0.35;
}
.dash-monthly-cell.active .dash-monthly-icon {
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.dash-monthly-cell.complete .dash-monthly-icon {
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(107, 217, 104, 0.55);
}
.dash-monthly-ship-name {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-top: 2px;
}
.dash-monthly-cell.locked .dash-monthly-ship-name { color: var(--text-dim); }
.dash-monthly-cell.active .dash-monthly-ship-name { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.dash-monthly-cell.complete .dash-monthly-ship-name { color: var(--green); }
.dash-monthly-progress-count {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.dash-monthly-reward {
  margin-top: 2px;
  padding: 10px 10px;
  background: rgba(13, 18, 24, 0.55);
  border: 1px dashed var(--line);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  text-align: left;
}
.dash-monthly-reward-pct {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  text-align: center;
}
.dash-monthly-reward-pct-sub {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  text-align: center;
  margin-bottom: 6px;
}
.dash-monthly-gift {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.dash-monthly-gift:first-of-type { border-top: none; padding-top: 0; }
.dash-monthly-gift-name {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-bright);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-monthly-gift-items {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.dash-monthly-gift-items li {
  position: relative;
  padding-left: 12px;
}
.dash-monthly-gift-items li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cyan);
  opacity: 0.8;
  font-size: 9px;
  line-height: 1.6;
}
.dash-monthly-gift-note {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
  padding-left: 12px;
  line-height: 1.35;
}
.dash-monthly-cell.locked .dash-monthly-reward-pct {
  color: var(--text-dim);
  text-shadow: none;
  opacity: 0.7;
}
.dash-monthly-cell.locked .dash-monthly-gift-name { color: var(--text-dim); }
.dash-monthly-cell.locked .dash-monthly-gift-items li::before { color: var(--text-dim); }
.dash-monthly-cell.complete .dash-monthly-reward {
  border-color: var(--green);
  border-style: solid;
}
.dash-monthly-cell.complete .dash-monthly-reward-pct {
  color: var(--green);
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}
.dash-monthly-cell.complete .dash-monthly-gift-name { color: var(--green); }
.dash-monthly-cell.complete .dash-monthly-gift-items { color: var(--text); }
.dash-monthly-cell.complete .dash-monthly-gift-items li::before { color: var(--green); }

/* Connector between cells. Sits between two .dash-monthly-cell elements.
   Vertically aligned with the icon row, fixed height. */
.dash-monthly-link-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  /* Push the link down to the icon's vertical center (icons are at the
     top of each cell, 72px tall — half = 36px). */
  padding-top: 36px;
  margin: 0 -2px;
}
.dash-monthly-link {
  width: 18px;
  height: 2px;
  background: var(--line-bright);
  transition: background 0.2s, box-shadow 0.2s;
}
.dash-monthly-link.filled {
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow);
}
.dash-rewards-tiers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One tier (e.g. "Customer", "Valued Customer"). State on the parent
   drives the visual treatment of the name + status text. */
.dash-tier-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  flex-wrap: wrap;
}
.dash-tier-name {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-bright);
}
.dash-tier-status {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dash-tier-status.complete {
  color: var(--green);
  text-shadow: 0 0 6px rgba(107, 217, 104, 0.5);
}
.dash-tier-status.active   { color: var(--cyan); }
.dash-tier-row.locked   .dash-tier-name { color: var(--text-dim); }
.dash-tier-row.complete .dash-tier-name { color: var(--green); text-shadow: 0 0 6px rgba(107, 217, 104, 0.4); }
.dash-tier-row.active   .dash-tier-name { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }

.dash-tier-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  /* Defeat default align-items: stretch — keeps slots at their declared
     height instead of stretching to match the tallest item or the row
     height. Belt-and-suspenders alongside the explicit slot height. */
  align-items: flex-start;
  justify-content: flex-start;
}

/* Slot square — fixed 44x44 with the ship render as a background image.
   Using background-image (vs an <img> child) keeps the slot proportions
   locked regardless of image-load state. !important + min/max + align-
   self defeat any inherited flex-stretch from misbehaving parent
   layouts. Empty slots greyscale + dim; filled get a cyan border +
   glow (or green for completed-tier slots). */
.dash-rewards-slot {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  align-self: flex-start !important;
  /* The slot class names include "empty"/"filled" as state modifiers;
     the bare `.empty` selector elsewhere in this stylesheet adds 60px
     of padding for full-page empty-state placeholders, which would
     stretch our slot. Force padding to 0 to neutralize that. */
  padding: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--line-bright);
  background-color: var(--bg-0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color 0.2s, box-shadow 0.2s, filter 0.2s;
}
.dash-rewards-slot.empty {
  filter: grayscale(1);
  opacity: 0.32;
}
.dash-rewards-slot.filled {
  border-color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}
/* Completed-tier slots get a green tint to call out the "earned" state. */
.dash-tier-row.complete .dash-rewards-slot {
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(107, 217, 104, 0.4);
}

/* Mini ETA-status pill shown next to the workflow-status pill in the
   orders table. Smaller version of the eta-status colors from the
   tracking page hero. */
.eta-mini-pill {
  display: inline-block;
  padding: 1px 7px;
  font-family: 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid;
  margin-left: 4px;
  vertical-align: middle;
}
.eta-mini-on-time      { color: var(--green);   border-color: var(--green); }
.eta-mini-delayed      { color: var(--warning); border-color: var(--warning); }
.eta-mini-late         { color: var(--red);     border-color: var(--red); }
.eta-mini-unknown      { color: var(--green);   border-color: var(--green); opacity: 0.7; }
.eta-mini-unknown-purple { color: #c3a8ff;       border-color: #a07ee6; }
.eta-mini-unknown-red  { color: var(--red);     border-color: var(--red); }
.eta-mini-scheduled    { color: var(--cyan);    border-color: var(--cyan); }

/* Responsive */
@media (max-width: 720px) {
  .shell { padding: 20px 14px 48px; }
  .row { flex-direction: column; }

  .topbar { padding-bottom: 12px; margin-bottom: 18px; }
  .topbar-right { display: none; }
  .topbar-right.eve-clock { display: block; font-size: 9px; letter-spacing: 0.1em; }
  .brand-text { font-size: 14px; letter-spacing: 0.2em; }
  .brand-sub { font-size: 9px; letter-spacing: 0.2em; }

  .steps { padding: 14px 4px 18px; }
  .step-inner { padding: 10px 12px 10px 22px; }
  .step:first-child .step-inner { padding-left: 12px; }
  .step-label { font-size: 10px; letter-spacing: 0.08em; }
  .step-num { font-size: 8px; letter-spacing: 0.2em; }
  .step-time { font-size: 9px; letter-spacing: 0.05em; }
  .step-edt .edt-label { font-size: 8px; letter-spacing: 0.2em; }
  .step-edt .edt-time { font-size: 10px; letter-spacing: 0.08em; }

  .track-hero { gap: 14px; padding: 18px 16px 22px; }
  .track-hero-right { width: 100%; min-width: 0; padding: 16px 18px 12px; }
  .eta-status-label { font-size: 20px; letter-spacing: 0.22em; }
  .eta-time-main { font-size: 15px; }
  .eta-relative { font-size: 11px; }
  .route-loc { font-size: 16px; letter-spacing: 0.04em; }
  .route-arrow { font-size: 14px; }
  .track-id-line { font-size: 10px; letter-spacing: 0.2em; }

  .track-details { grid-template-columns: 1fr; }
  .detail { padding: 14px 16px; }
  .detail:nth-child(odd) { border-right: none; }

  .orders-table .hide-sm { display: none; }

  /* Manifest table: drop the wide price columns on mobile (keep m³ columns
     so freight capacity is still legible). At very narrow widths also drop
     per-unit m³ to save horizontal space. */
  .manifest-table th, .manifest-table td { padding: 6px 8px; font-size: 12px; }
  .manifest-table th.icon-col, .manifest-table .icon-cell { width: 36px; padding-left: 8px; }
  .manifest-table .icon-cell img, .manifest-table .icon-fallback { width: 26px; height: 26px; }
  .manifest-table .price-col { display: none; }
  .manifest-table tfoot tr.grand-total td { padding: 10px 8px; font-size: 11px; letter-spacing: 0.12em; }

  .panel-body { padding: 16px 14px; }
  .panel-header { padding: 10px 14px; }
  .panel-title { font-size: 11px; letter-spacing: 0.2em; }

  .history-list li { flex-direction: column; gap: 2px; align-items: flex-start; }
  .history-time { font-size: 10px; }

  /* Confirm card: full-width banner under the topbar on mobile */
  .confirm-card {
    position: static;
    width: auto;
    margin: 0 0 18px;
  }

  /* Payment-pending warning: tighter on small screens */
  .payment-notice .panel-body { padding: 14px 16px; }
  .warn-icon { font-size: 30px; }
  .payment-notice-title { font-size: 12px; letter-spacing: 0.25em; }
  .payment-notice-body { font-size: 12px; }
  .payment-notice-sub { font-size: 11px; }

  /* Tighter outer padding on mobile so the dashboard panels get the
     full viewport width instead of losing 48px to .shell padding. */
  .shell { padding: 18px 12px 48px; }
  /* Topbar can wrap when the brand + button + clock cluster don't fit
     on one row (small phones, NEW ORDER hidden / shown transitions). */
  .topbar { flex-wrap: wrap; row-gap: 10px; }

  /* Dashboard: stack the 3-region grid on mobile (account → rewards
     → orders). The form lives at /order now, not here. */
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "account" "rewards" "orders";
    gap: 16px;
  }
  .dash-new-order-btn {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.14em;
  }
  .dash-topbar-right { gap: 10px; }
  .dash-orders-table th, .dash-orders-table td { padding: 6px 8px; font-size: 11px; }
  .dash-orders-table .dash-eta { display: none; }
  .dash-account-portrait img { width: 96px; height: 96px; }
  .dash-rewards-slot {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
  }
  /* Monthly reward track: shrink the icons + connectors on mobile so
     four cells fit on a narrow viewport without horizontal scrolling. */
  .dash-monthly-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
  .dash-monthly-link { width: 10px; }
  .dash-monthly-link-wrap { padding-top: 28px; }
  .dash-monthly-ship-name { font-size: 9px; letter-spacing: 0.08em; }
  .dash-monthly-reward { font-size: 10px; }
  .dash-tier-status { font-size: 9px; letter-spacing: 0.08em; }

  /* Welcome banner on mobile: stack stats badge below the main column
     so the panel doesn't crowd horizontally on narrow screens. */
  .welcome-panel { padding: 16px 18px; flex-direction: column; gap: 14px; }
  .welcome-header { gap: 12px; margin-bottom: 10px; }
  .welcome-glyph { width: 44px; height: 44px; }
  .welcome-title { font-size: 16px; letter-spacing: 0.18em; line-height: 1.25; }
  .welcome-body { font-size: 13px; }
  .welcome-stats { width: auto; padding: 10px 12px; flex-direction: row; gap: 10px; }
  .welcome-stats-label { font-size: 9px; letter-spacing: 0.16em; max-width: none; }
  .welcome-stats-value { font-size: 22px; margin-top: 0; }
}

@media (max-width: 480px) {
  .manifest-table .vol-unit { display: none; }
  .route-loc { font-size: 14px; }
  .eta-status-label { font-size: 17px; letter-spacing: 0.18em; }
  .eta-time-main { font-size: 13px; }
}