/* ==========================================================================
   MOXIE MECHANIQ — OFFICIAL BRAND & RESPONSIVE AUTOMOTIVE UI SYSTEM
   - Moxie Deep Navy:      #061831 / #0A2246
   - Shop Crimson Red:     #E60012 / #C2000F
   - Scout Electric Blue:  #0077FF / #005CE6
   - ROI Emerald Green:    #059669 / #10B981
   ========================================================================== */

:root {
  --moxie-navy: #061831;
  --moxie-navy-light: #0d2850;
  --shop-red: #e60012;
  --shop-red-dark: #b8000e;
  --scout-blue: #0077ff;
  --scout-blue-dark: #0055cc;
  --emerald: #10b981;
  --amber: #f59e0b;

  /* Daylight Shop Theme */
  --bg: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-subtle: #e2e8f0;
  --fg: #061831;
  --fg-muted: #475569;
  --border: #cbd5e1;
  --card-shadow: 0 4px 16px rgba(6, 24, 49, 0.08);
}

html.dark {
  /* Garage Tactical Dark Theme (Default) */
  --bg: #050e1d;
  --bg-elevated: #0b1c36;
  --bg-subtle: #11284a;
  --fg: #f8fafc;
  --fg-muted: #94a3b8;
  --border: #1e3a5f;
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, select, input {
  font-family: inherit;
}

/* ==========================================================================
   HEADER & HUD BAR
   ========================================================================== */
.app-header {
  background: var(--bg-elevated);
  border-bottom: 2px solid var(--border);
  padding: 0.85rem 1.25rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--card-shadow);
}

.header-brand-row {
  max-width: 1360px;
  margin: 0 auto 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--shop-red), #99000c);
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -1px;
  box-shadow: 0 4px 12px rgba(230, 0, 18, 0.35);
}

.brand-logo-mark span {
  color: #7dd3fc;
}

.brand-title-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.brand-title-line h1 {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.brand-title-line h1 span {
  color: var(--scout-blue);
}

.world-pill {
  background: rgba(230, 0, 18, 0.16);
  color: #ff4d5a;
  border: 1px solid rgba(230, 0, 18, 0.45);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

.brand-subtitle {
  font-size: 0.78rem;
  color: var(--fg-muted);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.demo-switcher-box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-subtle);
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
}

.demo-switcher-box label {
  font-weight: 700;
  color: var(--fg-muted);
}

.demo-switcher-box select {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.28rem 0.5rem;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

.theme-toggle-btn {
  background: var(--bg-subtle);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.42rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* HUD BAR */
.stats-hud-bar {
  max-width: 1360px;
  margin: 0 auto 0.75rem;
  display: grid;
  grid-template-columns: 1.3fr 1.6fr 1fr 0.8fr 0.8fr;
  gap: 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-hud {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.rank-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hud-label {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--fg-muted);
  letter-spacing: 0.5px;
}

.hud-value {
  font-size: 0.92rem;
  font-weight: 800;
}

.hud-value small {
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--fg-muted);
}

.money-text {
  color: var(--emerald);
}

.rep-good {
  color: #38bdf8;
}

.rep-warn {
  color: var(--amber);
}

.streak-text {
  color: #fb923c;
}

.xp-hud .hud-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  margin-bottom: 0.28rem;
}

.xp-progress-track {
  width: 100%;
  height: 8px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.xp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--scout-blue), var(--emerald));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* MAIN NAVIGATION TABS */
.main-nav-tabs {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
}

.nav-tab-btn {
  background: transparent;
  color: var(--fg-muted);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.nav-tab-btn:hover {
  color: var(--fg);
}

.nav-tab-btn.active {
  color: var(--fg);
  border-bottom-color: var(--shop-red);
  background: rgba(230, 0, 18, 0.08);
}

.tab-pill {
  font-size: 0.68rem;
  background: var(--bg-subtle);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  color: var(--fg-muted);
}

/* ==========================================================================
   MAIN CONTAINER & ACTIVE SERVICE BAY
   ========================================================================== */
.app-main-container {
  max-width: 1360px;
  margin: 1.1rem auto 3rem;
  padding: 0 1.25rem;
}

.dispatch-strip-wrapper {
  margin-bottom: 0.9rem;
}

.dispatch-strip-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fg-muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
}

.dispatch-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 0.55rem;
}

.ro-selector-card {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ro-selector-card:hover {
  border-color: var(--scout-blue);
  transform: translateY(-1px);
}

.ro-selector-card.active {
  border-color: var(--shop-red);
  box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.25);
}

.ro-selector-card.completed {
  border-color: rgba(16, 185, 129, 0.55);
}

.ro-selector-card.locked {
  opacity: 0.62;
}

.ro-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}

.ro-num {
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--scout-blue);
}

.ro-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.ro-vehicle-name {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RO MASTER HEADER */
.ro-master-header {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 0.9rem;
  box-shadow: var(--card-shadow);
}

.ro-header-left {
  flex: 1;
}

.ro-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.ro-tag {
  background: var(--shop-red);
  color: #fff;
  font-weight: 900;
  font-size: 0.76rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

.vehicle-tag {
  font-weight: 800;
  font-size: 0.95rem;
}

.customer-tag {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.module-helper-link {
  background: rgba(0, 119, 255, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(0, 119, 255, 0.4);
  border-radius: 6px;
  padding: 0.22rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.concern-callout {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--amber);
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}

.advisor-note {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.ro-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 215px;
}

.flag-timer-box {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  text-align: right;
}

.flag-timer-box.timer-good {
  border-color: rgba(16, 185, 129, 0.5);
}

.flag-timer-box.timer-over {
  border-color: var(--shop-red);
}

.timer-title {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--fg-muted);
}

.timer-digits span {
  font-size: 1.35rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.timer-digits small {
  font-size: 0.8rem;
  color: var(--fg-muted);
  margin-left: 0.25rem;
}

.timer-sub {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--emerald);
}

.reset-ro-btn {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
  margin-top: 0.4rem;
}

/* 3C WORKFLOW STEPPER */
.workflow-stepper-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.workflow-step-pill {
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.workflow-step-pill.current {
  background: var(--scout-blue);
  color: #fff;
  border-color: var(--scout-blue);
}

.workflow-step-pill.done {
  border-color: var(--emerald);
  color: var(--emerald);
}

.step-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

/* FEEDBACK BANNER */
.bay-feedback-banner {
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.9rem;
  border-left: 5px solid var(--scout-blue);
  background: var(--bg-elevated);
}

.bay-feedback-banner.banner-success {
  border-left-color: var(--emerald);
  background: rgba(16, 185, 129, 0.12);
}

.bay-feedback-banner.banner-warn {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, 0.13);
}

.bay-feedback-banner.banner-error {
  border-left-color: var(--shop-red);
  background: rgba(230, 0, 18, 0.14);
}

.banner-title {
  font-weight: 900;
  font-size: 0.92rem;
  margin-bottom: 0.18rem;
}

.banner-msg {
  font-size: 0.85rem;
}

/* STEP 2: INSPECT & TEST (TOOLBOX + INTERACTIVE SVG DIAGRAM + SCRATCHPAD) */
.bay-inspect-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1rem;
  align-items: start;
}

.toolbox-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.85rem;
}

.toolbox-header {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--fg-muted);
  margin-bottom: 0.55rem;
}

.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 0.45rem;
}

.toolbox-item-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.toolbox-item-btn:hover {
  border-color: var(--scout-blue);
}

.toolbox-item-btn.active {
  border-color: var(--scout-blue);
  background: rgba(0, 119, 255, 0.16);
  box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.25);
}

.toolbox-item-btn.locked {
  opacity: 0.5;
}

.tool-icon {
  font-size: 1.2rem;
}

.tool-name {
  font-size: 0.75rem;
  font-weight: 800;
}

.tool-cost {
  font-size: 0.66rem;
  color: var(--fg-muted);
}

/* BRAKE SCHEMATIC SVG */
.brake-schematic-wrapper {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: var(--card-shadow);
}

.schematic-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.76rem;
  margin-bottom: 0.55rem;
}

.schematic-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--fg-muted);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  display: inline-block;
}

.brake-schematic-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #1e3a5f;
}

@keyframes pulseRingAnim {
  0% { transform: scale(0.96); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 0.45; }
  100% { transform: scale(0.96); opacity: 0.9; }
}

.diagram-hotspot-group:hover circle {
  filter: brightness(1.2);
}

.schematic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.55rem;
  font-size: 0.73rem;
  color: var(--fg-muted);
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.3rem;
}

/* SCRATCHPAD */
.scratchpad-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.95rem;
  box-shadow: var(--card-shadow);
}

.scratchpad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.scratchpad-header h3 {
  font-size: 0.95rem;
}

.evidence-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--fg-muted);
}

.evidence-pill.ready {
  background: rgba(16, 185, 129, 0.18);
  color: var(--emerald);
}

.scratchpad-empty {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 1.1rem;
  font-size: 0.84rem;
  color: var(--fg-muted);
  margin-bottom: 0.85rem;
}

.scratchpad-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 0.85rem;
}

.scratchpad-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--emerald);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
}

.scratchpad-item.item-fail {
  border-left-color: var(--shop-red);
}

.scratchpad-item.item-warn {
  border-left-color: var(--amber);
}

.scratchpad-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.status-pill {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

.pill-fail { background: rgba(230, 0, 18, 0.2); color: #ff4d5a; }
.pill-warn { background: rgba(245, 158, 11, 0.2); color: var(--amber); }
.pill-pass { background: rgba(16, 185, 129, 0.2); color: var(--emerald); }

.scratchpad-reading {
  margin-bottom: 0.2rem;
}

.scratchpad-spec {
  font-size: 0.73rem;
  color: var(--fg-muted);
}

.scratchpad-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* STEP CARDS & CHOICE BUTTONS */
.bay-step-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--card-shadow);
}

.step-card-header {
  margin-bottom: 1rem;
}

.step-card-header h2 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.step-card-header p {
  font-size: 0.88rem;
  color: var(--fg-muted);
}

.options-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.choice-card-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.15s ease;
}

.choice-card-btn:hover {
  border-color: var(--scout-blue);
  background: var(--bg-subtle);
}

.choice-Time-badge {
  background: var(--bg-subtle);
  color: var(--scout-blue);
  font-weight: 800;
  font-size: 0.74rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.mini-evidence-strip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.78rem;
}

.mini-ev-tag {
  background: var(--bg-subtle);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

.mini-ev-tag.tag-fail {
  border: 1px solid var(--shop-red);
}

.primary-action-btn {
  background: linear-gradient(135deg, var(--scout-blue), var(--scout-blue-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.primary-action-btn:hover {
  filter: brightness(1.1);
}

.secondary-action-btn {
  background: var(--bg-subtle);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.secondary-warn-btn {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.back-link-btn {
  margin-top: 0.9rem;
  background: transparent;
  color: var(--fg-muted);
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* PAYSTUB SUMMARY CARD */
.paystub-header {
  margin-bottom: 1rem;
}

.paystub-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.18);
  color: var(--emerald);
  font-weight: 900;
  font-size: 0.75rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

.paystub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.paystub-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.paystub-metric span {
  font-size: 0.74rem;
  color: var(--fg-muted);
}

.paystub-metric strong {
  font-size: 1.05rem;
}

.bonus-green {
  color: var(--emerald);
}

.paystub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* ==========================================================================
   TAB 2: ACADEMY FIELD GUIDE & PRINTABLE SHOP CHECKLISTS
   ========================================================================== */
.module-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.module-select-card {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  text-align: left;
  cursor: pointer;
}

.module-select-card.active {
  border-color: var(--scout-blue);
  box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.25);
}

.mod-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.mod-code-pill {
  background: rgba(0, 119, 255, 0.16);
  color: #60a5fa;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.mod-done-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.module-select-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
}

.module-select-card p {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.module-subtabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.subtab-btn {
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.subtab-btn.active {
  background: var(--scout-blue);
  color: #fff;
  border-color: var(--scout-blue);
}

.module-content-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.35rem;
  box-shadow: var(--card-shadow);
}

.lesson-header h2 {
  font-size: 1.25rem;
  margin: 0.4rem 0 1rem;
}

.lesson-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.lesson-point-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

.point-num {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--scout-blue);
  margin-bottom: 0.25rem;
}

.lesson-point-card h3 {
  font-size: 0.96rem;
  margin-bottom: 0.4rem;
}

.lesson-point-card p {
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.spec-table-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.1rem;
}

.spec-table-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.65rem;
}

.tech-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tech-spec-table th, .tech-spec-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.spec-val {
  color: var(--emerald);
  font-weight: 700;
}

.comparison-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.comp-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

.comp-good { border-color: rgba(16, 185, 129, 0.5); }
.comp-bad { border-color: rgba(230, 0, 18, 0.5); }

.comp-badge {
  font-weight: 900;
  font-size: 0.82rem;
  margin-bottom: 0.65rem;
}

.comp-card ul {
  padding-left: 1.2rem;
  font-size: 0.86rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pro-takeaway-box {
  background: rgba(0, 119, 255, 0.12);
  border-left: 4px solid var(--scout-blue);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
}

.linked-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.linked-job-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.linked-job-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
}

/* QUIZ CARDS */
.quiz-questions-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}

.quiz-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

.quiz-q-title {
  font-size: 0.94rem;
  margin-bottom: 0.75rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quiz-opt-btn {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  text-align: left;
  font-size: 0.86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.quiz-opt-btn.opt-selected {
  border-color: var(--scout-blue);
  background: rgba(0, 119, 255, 0.14);
}

.quiz-opt-btn.opt-correct {
  border-color: var(--emerald);
  background: rgba(16, 185, 129, 0.16);
}

.quiz-opt-btn.opt-wrong {
  border-color: var(--shop-red);
  background: rgba(230, 0, 18, 0.16);
}

.opt-letter {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.76rem;
  flex-shrink: 0;
}

.quiz-explanation {
  margin-top: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.84rem;
}

.exp-pass { background: rgba(16, 185, 129, 0.14); border-left: 4px solid var(--emerald); }
.exp-fail { background: rgba(230, 0, 18, 0.14); border-left: 4px solid var(--shop-red); }

/* PRINTABLE SHOP-FLOOR CHECKLIST */
.checklist-toolbar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.84rem;
}

.print-pdf-btn {
  background: var(--shop-red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
}

.print-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
}

.print-brand {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--scout-blue);
  letter-spacing: 0.5px;
}

.print-stamp-box {
  border: 2px solid var(--shop-red);
  color: var(--shop-red);
  font-weight: 900;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
}

.print-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.meta-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.meta-field input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.84rem;
  font-weight: 600;
}

.checklist-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
}

.checklist-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.checklist-row.is-checked {
  border-color: var(--emerald);
  background: rgba(16, 185, 129, 0.08);
}

.step-num-box {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.print-signoff-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1rem;
}

.sig-line {
  border-bottom: 1.5px solid var(--fg-muted);
  height: 28px;
  margin-bottom: 0.35rem;
}

.sig-caption {
  font-size: 0.74rem;
  color: var(--fg-muted);
}

/* ==========================================================================
   TAB 3: ASE A5 PREP MODE
   ========================================================================== */
.ase-readiness-hero {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--card-shadow);
}

.readiness-score-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 6px solid var(--emerald);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.score-num {
  font-size: 1.65rem;
  font-weight: 900;
}

.score-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--fg-muted);
}

.readiness-hero-info h2 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.readiness-hero-info p {
  font-size: 0.86rem;
  color: var(--fg-muted);
  margin-bottom: 0.75rem;
}

.ase-mode-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ase-mode-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.ase-mode-btn.active {
  background: var(--scout-blue);
  color: #fff;
  border-color: var(--scout-blue);
}

.ase-exam-runner-card, .ase-breakdown-panel, .ase-guide-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--card-shadow);
}

.exam-runner-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cat-code-badge, .format-badge {
  background: var(--bg-subtle);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  margin-right: 0.4rem;
}

.exam-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.finish-exam-btn {
  background: var(--shop-red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.38rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.q-dots-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.q-nav-dot {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.q-nav-dot.current {
  border-color: var(--scout-blue);
  box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.3);
  color: var(--fg);
}

.q-nav-dot.correct { background: rgba(16, 185, 129, 0.25); border-color: var(--emerald); color: var(--emerald); }
.q-nav-dot.wrong { background: rgba(230, 0, 18, 0.25); border-color: var(--shop-red); color: #ff4d5a; }

.exam-q-prompt {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.exam-runner-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.ase-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.ase-cat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
}

.ase-cat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  margin-bottom: 0.45rem;
}

.cat-progress-bar {
  height: 7px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.cat-progress-fill {
  height: 100%;
  border-radius: 999px;
}

.ase-cat-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--fg-muted);
}

.cat-drill-link {
  background: transparent;
  color: #60a5fa;
  border: none;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}

.ase-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.ase-guide-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

.guide-icon {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

.ase-guide-card h4 {
  margin-bottom: 0.35rem;
}

.ase-guide-card p {
  font-size: 0.84rem;
  color: var(--fg-muted);
}

/* ==========================================================================
   TAB 4: CAREER LADDER & WORLDS MAP
   ========================================================================== */
.section-block {
  margin-bottom: 2rem;
}

.section-block h2 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.section-block > p {
  font-size: 0.86rem;
  color: var(--fg-muted);
  margin-bottom: 0.9rem;
}

.career-ranks-grid, .worlds-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}

.career-rank-card, .world-map-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.career-rank-card.current-rank, .world-map-card.world-active {
  border-color: var(--shop-red);
  box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.22);
}

.rank-card-header, .world-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rank-num-pill {
  color: #fff;
  font-weight: 900;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.rank-pay-pill {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--emerald);
}

.you-are-here {
  background: var(--shop-red);
  color: #fff;
  font-size: 0.64rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.35rem;
}

.rank-ase-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #60a5fa;
}

.world-icon {
  font-size: 1.4rem;
}

.world-code-badge {
  font-weight: 900;
  font-size: 0.88rem;
}

.world-status-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--fg-muted);
}

.world-status-pill.live {
  background: rgba(16, 185, 129, 0.2);
  color: var(--emerald);
}

/* ==========================================================================
   RESPONSIVE & PRINT MEDIA QUERIES
   ========================================================================== */
@media (max-width: 960px) {
  .stats-hud-bar {
    grid-template-columns: 1fr 1fr;
  }
  .bay-inspect-grid {
    grid-template-columns: 1fr;
  }
  .ro-master-header {
    flex-direction: column;
  }
  .ro-header-right {
    align-items: stretch;
  }
  .workflow-stepper-bar {
    grid-template-columns: 1fr 1fr;
  }
  .ase-readiness-hero {
    flex-direction: column;
    text-align: center;
  }
}

@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print {
    display: none !important;
  }
  .app-main-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .module-content-panel {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .checklist-row {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #000000 !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   PHASE 2 & 3 EXPANSION STYLES — WORLD FILTER & COACH / SHOP-OWNER PORTAL
   ========================================================================== */
.world-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.world-filter-pill {
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.world-filter-pill:hover {
  border-color: var(--scout-blue);
  color: var(--fg);
}

.world-filter-pill.active {
  background: var(--scout-blue);
  color: #ffffff;
  border-color: var(--scout-blue);
}

.coach-roster-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.coach-tech-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.15rem;
  box-shadow: var(--card-shadow);
}

.coach-tech-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.coach-tech-top h3 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.coach-tech-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kpi-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
}

.coach-readiness-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.mini-bar-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}

.mini-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  margin-bottom: 0.3rem;
}

.coach-tech-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}

.weak-area-note {
  color: var(--amber);
}

.coach-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.coach-guide-card, .bundle-tier-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: var(--card-shadow);
}

.coach-guide-card h3, .bundle-tier-card h3 {
  font-size: 1rem;
}

.huddle-steps-list, .bundle-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--fg-muted);
}

.bundle-tier-card.flagship-bundle {
  border-color: var(--shop-red);
  box-shadow: 0 0 0 2px rgba(230, 0, 18, 0.25);
}

.flagship-ribbon {
  background: var(--shop-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  align-self: flex-start;
}

.bundle-price {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--emerald);
}

.bundle-audience {
  font-size: 0.78rem;
  font-weight: 700;
  color: #60a5fa;
}

/* ==========================================================================
   HANDS-ON INTERACTIVE INSTRUMENT BENCH, DVOM LCD & BAY CURVEBALL STYLES
   ========================================================================== */
.interactive-bench-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--scout-blue);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  box-shadow: var(--card-shadow);
}

.bench-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.65rem;
}

.bench-mini-btn {
  background: linear-gradient(135deg, var(--scout-blue), var(--scout-blue-dark));
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 0.38rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.bench-mini-btn:hover {
  filter: brightness(1.12);
}

.bench-body-grid {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dial-gauge-svg-box {
  background: #061428;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
}

.bench-controls-col {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.spec-fail-text {
  color: #ff4d5a;
  font-weight: 900;
}

.spec-pass-text {
  color: var(--emerald);
  font-weight: 800;
}

.interactive-range-slider {
  width: 100%;
  accent-color: var(--scout-blue);
  cursor: pointer;
}

.slider-hint {
  font-size: 0.74rem;
  color: var(--fg-muted);
}

.dvom-lcd-screen {
  background: #091e16;
  border: 2px solid #10b981;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dvom-lcd-screen.lcd-alert {
  background: #2b0912;
  border-color: var(--shop-red);
}

.lcd-main-digits {
  font-size: 0.98rem;
  font-weight: 900;
  color: #34d399;
  margin-bottom: 0.2rem;
}

.dvom-lcd-screen.lcd-alert .lcd-main-digits {
  color: #fda4af;
}

.lcd-sub-caption {
  font-size: 0.75rem;
  color: #cbd5e1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bench-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.curveball-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--amber);
  border-radius: 12px;
  padding: 0.95rem;
  margin-top: 0.9rem;
  box-shadow: var(--card-shadow);
}

.curveball-badge {
  display: inline-block;
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 900;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
}

.curveball-prompt {
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
}

/* ==========================================================================
   INTERACTIVE COCKPIT ROAD-TEST SIMULATOR & TACTILE 3C STORY BUILDER
   ========================================================================== */
.cockpit-simulator-card {
  background: var(--bg);
  border: 1.5px solid var(--scout-blue);
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.85rem;
  box-shadow: var(--card-shadow);
}

.cockpit-simulator-card.cockpit-alert-border {
  border-color: var(--shop-red);
}

.cockpit-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cockpit-mode-tag {
  display: inline-block;
  background: rgba(0, 119, 255, 0.16);
  color: var(--scout-blue);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-right: 0.45rem;
}

.dash-lights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dash-warning-pill {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  border: 1px solid var(--amber);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.16rem 0.55rem;
  border-radius: 6px;
}

.dash-warning-pill.pill-ready {
  background: rgba(16, 185, 129, 0.16);
  color: var(--emerald);
  border-color: var(--emerald);
}

.cockpit-gauges-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

@media (max-width: 780px) {
  .cockpit-gauges-grid {
    grid-template-columns: 1fr;
  }
}

.cockpit-cluster-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem;
  text-align: center;
}

.gauge-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--scout-blue);
  font-variant-numeric: tabular-nums;
}

.gauge-val small {
  font-size: 0.7rem;
  color: var(--fg-muted);
}

.gauge-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--fg-muted);
}

.steering-wheel-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wheel-status-lbl {
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 0.2rem;
}

@keyframes wheelShakeHard {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-11deg); }
  75% { transform: rotate(11deg); }
}

@keyframes wheelShakeMild {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

.steering-svg.shake-hard {
  animation: wheelShakeHard 0.14s infinite ease-in-out;
}

.steering-svg.shake-mild {
  animation: wheelShakeMild 0.22s infinite ease-in-out;
}

.steering-svg.tilt-left {
  transform: rotate(-18deg);
  transition: transform 0.25s ease;
}

.pedal-feel-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
}

.pedal-feel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}

.cockpit-symptom-readout {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.cockpit-symptom-readout.readout-alert {
  background: rgba(230, 0, 18, 0.14);
  border: 1px solid var(--shop-red);
}

.cockpit-symptom-readout.readout-ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--emerald);
}

.cockpit-driver-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.cockpit-ctrl-btn {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.42rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cockpit-ctrl-btn:hover {
  border-color: var(--scout-blue);
}

.cockpit-ctrl-btn.active {
  background: rgba(0, 119, 255, 0.18);
  border-color: var(--scout-blue);
  color: #60a5fa;
}

/* TACTILE 3C STORY BUILDER */
.story-builder-wrapper {
  margin-top: 0.85rem;
}

.builder-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.builder-slot-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
}

.slot-badge {
  display: inline-block;
  background: var(--bg-subtle);
  color: var(--scout-blue);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  margin-bottom: 0.55rem;
}

.assembled-ro-preview {
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  font-size: 0.84rem;
}

.assembled-ro-preview.preview-ready {
  border-style: solid;
  border-color: var(--emerald);
  background: rgba(16, 185, 129, 0.08);
}

.preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
}

/* ==========================================================================
   COURTESY DVI (GREEN/YELLOW/RED + PHOTO), DVOM PROBE SELECTOR,
   TECH PASSPORT & LEADERBOARD + MOBILE BOTTOM THUMB BAR
   ========================================================================== */
.dvi-inspection-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--scout-blue);
  border-radius: 12px;
  padding: 0.95rem;
  margin-top: 0.9rem;
  box-shadow: var(--card-shadow);
}

.dvi-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.dvi-rows-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dvi-item-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dvi-item-row.dvi-row-correct {
  border-left: 4px solid var(--emerald);
}

.dvi-item-row.dvi-row-wrong {
  border-left: 4px solid var(--shop-red);
}

.dvi-comp-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

.dvi-finding-text {
  font-size: 0.76rem;
  color: var(--fg-muted);
}

.dvi-photo-badge {
  font-size: 0.72rem;
  color: var(--emerald);
  font-weight: 700;
  margin-top: 0.15rem;
}

.dvi-controls-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dvi-tag-btn, .dvi-photo-btn {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.dvi-tag-btn.tag-green.active {
  background: rgba(16, 185, 129, 0.22);
  border-color: var(--emerald);
  color: var(--emerald);
}

.dvi-tag-btn.tag-yellow.active {
  background: rgba(245, 158, 11, 0.22);
  border-color: var(--amber);
  color: var(--amber);
}

.dvi-tag-btn.tag-red.active {
  background: rgba(230, 0, 18, 0.22);
  border-color: var(--shop-red);
  color: #ff6b78;
}

.dvi-photo-btn.snapped {
  background: rgba(0, 119, 255, 0.18);
  border-color: var(--scout-blue);
  color: #60a5fa;
}

/* DVOM PROBE PINOUT SELECTOR */
.probe-selector-box {
  background: var(--bg-elevated);
  border: 1.5px solid #10b981;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.probe-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  font-size: 0.82rem;
}

.probe-dropdowns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 720px) {
  .probe-dropdowns-grid {
    grid-template-columns: 1fr;
  }
}

.probe-lead-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.probe-lead-col.lead-red label { color: #ff4d5a; }
.probe-lead-col.lead-black label { color: #94a3b8; }

.probe-lead-col select {
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* PRINTABLE TECH PASSPORT & RPM TALENT SKILL CARD */
.tech-passport-certificate {
  background: var(--bg-elevated);
  border: 2px solid var(--scout-blue);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--card-shadow);
}

.passport-top-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.passport-identity-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.9rem;
}

.passport-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.passport-input-group input {
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.45rem 0.65rem;
  font-size: 0.84rem;
  font-weight: 700;
  width: 100%;
}

.passport-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 0.65rem;
}

.passport-metric-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}

.pm-label {
  font-size: 0.68rem;
  font-weight: 900;
  color: var(--fg-muted);
}

.pm-val {
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0.15rem 0;
}

.pm-sub {
  font-size: 0.74rem;
  color: var(--fg-muted);
}

.passport-worlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 0.45rem;
}

.passport-world-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}

.passport-world-chip.chip-verified {
  border-color: var(--emerald);
  background: rgba(16, 185, 129, 0.1);
}

.passport-world-chip.chip-verified small {
  color: var(--emerald);
  font-weight: 800;
}

.passport-signatures-row {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.78rem;
}

/* ROSTER LEADERBOARD TABLE */
.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.roster-table th, .roster-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.roster-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg);
}

/* MOBILE STICKY BOTTOM THUMB-BAR NAVIGATION */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 780px) {
  body {
    padding-bottom: 66px;
  }
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--bg-elevated);
    border-top: 1.5px solid var(--border);
    padding: 0.3rem 0.2rem;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45);
  }
  .mobile-bottom-nav button {
    background: transparent;
    color: var(--fg-muted);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-size: 1rem;
    padding: 0.2rem 0.1rem;
    cursor: pointer;
  }
  .mobile-bottom-nav button small {
    font-size: 0.62rem;
    font-weight: 800;
  }
  .mobile-bottom-nav button.active {
    color: var(--scout-blue);
  }
}

/* ==========================================================================
   STEP 4 TORQUE WRENCH & 5-LUG STAR PATTERN + FOREMAN COACHING HINTS
   ========================================================================== */
.step4-interactive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

@media (max-width: 900px) {
  .step4-interactive-grid {
    grid-template-columns: 1fr;
  }
}

.torque-bench-layout {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.foreman-hint-wrapper {
  margin-top: 0.65rem;
}

.foreman-ask-btn {
  width: 100%;
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
  border: 1px dashed var(--amber);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.foreman-hint-card {
  margin-top: 0.45rem;
  background: var(--bg);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   GAME JUICE (FLOATING POPUPS & CONFETTI), CUSTOMER PERSONA MOOD STRIP,
   DREAM BAY SHOWCASE, ACHIEVEMENT TROPHIES & FRIDAY 4:45 PM WAITER RUSH
   ========================================================================== */
@keyframes floatUpFade {
  0% { opacity: 1; transform: translateY(0) scale(0.95); }
  100% { opacity: 0; transform: translateY(-64px) scale(1.1); }
}

.moxie-floating-juice {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 1.05rem;
  font-weight: 900;
  color: #10b981;
  background: rgba(6, 24, 49, 0.92);
  border: 1.5px solid currentColor;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  animation: floatUpFade 1.2s ease-out forwards;
}

@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(88vh) rotate(540deg); }
}

.moxie-confetti-piece {
  position: fixed;
  z-index: 9998;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  pointer-events: none;
  animation: confettiFall 1.8s ease-out forwards;
}

/* CUSTOMER PERSONA & LIVE MOOD STRIP */
.customer-persona-strip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--scout-blue);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  display: grid;
  grid-template-columns: auto 1fr 220px;
  gap: 0.85rem;
  align-items: center;
  box-shadow: var(--card-shadow);
}

@media (max-width: 820px) {
  .customer-persona-strip {
    grid-template-columns: 1fr;
  }
}

.persona-avatar-bubble {
  font-size: 2.1rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0.35rem 0.6rem;
  text-align: center;
}

.persona-top-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

.persona-wait-pill {
  background: var(--bg-subtle);
  color: var(--scout-blue);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
}

.persona-funny-quote {
  font-size: 0.83rem;
  font-style: italic;
  color: #fde047;
}

html:not(.dark) .persona-funny-quote {
  color: #b45309;
}

.persona-mood-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
}

/* DREAM BAY SHOWCASE */
.dream-bay-showcase-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--scout-blue);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--card-shadow);
}

.dream-bay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  font-size: 0.84rem;
}

.dream-bay-customizer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.floor-swatch-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.24rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.floor-swatch-btn.active {
  border-color: var(--scout-blue);
  background: rgba(0, 119, 255, 0.18);
  color: #60a5fa;
}

/* ACHIEVEMENT TROPHY SHELF */
.achievement-shelf-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--amber);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin: 1.1rem 0;
  box-shadow: var(--card-shadow);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.65rem;
}

.achievement-badge-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.achievement-badge-card.ach-unlocked {
  border-color: var(--emerald);
  background: rgba(16, 185, 129, 0.08);
}

.achievement-badge-card.ach-locked {
  opacity: 0.58;
}

.ach-icon {
  font-size: 1.65rem;
}

.ach-title {
  font-size: 0.8rem;
  font-weight: 900;
}

.ach-desc {
  font-size: 0.72rem;
  color: var(--fg-muted);
}

/* FRIDAY 4:45 PM WAITER RUSH ARCADE CARD */
.waiter-rush-banner {
  background: var(--bg-elevated);
  border: 2px solid var(--shop-red);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: var(--card-shadow);
}

.rush-banner-left {
  flex: 1;
  min-width: 260px;
}

.rush-banner-right {
  text-align: right;
}

.rush-hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.rush-car-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}