:root {
  --hud-header-height: 208px;
}

/* ============================================================================
   TESLA AERO-DP : Next-Gen Spatial Glass Cockpit HUD Stylesheet
   Zero-based Full-Bleed Map Architecture + Floating Glass Capsules & Decks
   ============================================================================ */

:root {
  /* Core Cyber-Dark Palette - 不透明度を高め地図透け文字潰れを防止 */
  --bg-void: #050811;
  --glass-surface: rgba(10, 16, 29, 0.94);
  --glass-surface-elevated: rgba(17, 25, 43, 0.97);
  --glass-card: rgba(22, 32, 54, 0.92);
  --glass-card-hover: rgba(30, 43, 72, 0.96);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.26);
  --glass-border-bright: rgba(56, 189, 248, 0.45);

  /* Text Hierarchy - コントラスト比大幅引き上げ */
  --text-primary: #ffffff;
  --text-secondary: #dbeafe;
  --text-muted: #94a3b8;

  /* Tesla & Telemetry Neon Accents */
  --tesla-red: #ff2a32;
  --tesla-red-glow: rgba(255, 42, 50, 0.35);
  --neon-cyan: #38bdf8;
  --neon-cyan-glow: rgba(56, 189, 248, 0.28);
  --neon-emerald: #10b981;
  --neon-emerald-glow: rgba(16, 185, 129, 0.28);
  --neon-purple: #a855f7;
  --neon-amber: #f59e0b;

  /* Typography */
  --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout dimensions */
  --hud-header-h: 58px;
  --left-deck-w: 415px;
  --right-deck-w: 425px;

  /* Shadows & Blur */
  --hud-shadow: 0 18px 42px -10px rgba(0, 0, 0, 0.72), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  --hud-blur: blur(22px) saturate(180%);
  --radius-capsule: 999px;
  --radius-panel: 18px;
  --radius-card: 13px;
  --radius-pill: 999px;
}

body.theme-light {
  --bg-void: #e2e8f0;
  --glass-surface: rgba(255, 255, 255, 0.96);
  --glass-surface-elevated: rgba(255, 255, 255, 0.98);
  --glass-card: #ffffff;
  --glass-card-hover: #f8fafc;
  --glass-border: rgba(15, 23, 42, 0.15);
  --glass-border-strong: rgba(15, 23, 42, 0.26);
  --glass-border-bright: rgba(2, 132, 199, 0.65);
  --text-primary: #090d16;
  --text-secondary: #1e293b;
  --text-muted: #475569;
  /* 昼間（白背景）で白飛びしない高視認性アクセントカラー */
  --tesla-red: #e11d48;
  --tesla-red-glow: rgba(225, 29, 72, 0.22);
  --neon-cyan: #0284c7;
  --neon-cyan-glow: rgba(2, 132, 199, 0.22);
  --neon-emerald: #059669;
  --neon-emerald-glow: rgba(5, 150, 105, 0.22);
  --neon-purple: #7c3aed;
  --neon-amber: #d97706;
  --hud-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.hidden {
  display: none !important;
}

.accent-cyan { color: var(--neon-cyan) !important; }
.accent-emerald { color: var(--neon-emerald) !important; }
.accent-gold { color: var(--neon-amber) !important; }
.accent-red { color: var(--tesla-red) !important; }

/* Custom Scrollbar for Floating Glass Decks */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.5);
}

/* ============================================================================
   1. SPATIAL COCKPIT SHELL & 16:9 IN-CAR FRAME
   ============================================================================ */
.spatial-cockpit-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none; /* Allow map interactions except on HUD children */
}

body.mode-16x9 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #111827 0%, #03050a 100%);
}

body.mode-16x9 .spatial-cockpit-shell {
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
}

/* Full-Bleed Map Stage */
.fullbleed-map-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
  background: #070b14;
}

/* Dark theme map tile enhancement */
body.theme-dark .leaflet-tile-pane {
  filter: brightness(0.96) contrast(1.08) saturate(1.15);
}

/* Subtle cyber vignette framing the map */
.spatial-vignette-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, transparent 52%, rgba(4, 8, 18, 0.55) 100%),
    linear-gradient(180deg, rgba(4, 8, 18, 0.5) 0%, transparent 14%, transparent 84%, rgba(4, 8, 18, 0.65) 100%);
}
body.theme-light .spatial-vignette-overlay {
  background: radial-gradient(circle at 50% 45%, transparent 65%, rgba(15, 23, 42, 0.12) 100%);
}

/* Shared Glassmorphic Primitives */
.glass-capsule {
  pointer-events: auto;
  background: var(--glass-surface);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--hud-shadow);
  border-radius: var(--radius-capsule);
}

.glass-panel {
  pointer-events: auto;
  background: var(--glass-surface);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--hud-shadow);
  border-radius: var(--radius-panel);
}

/* ============================================================================
   2. TOP FLOATING OMNI-COMMAND BAR
   ============================================================================ */
.omni-hud-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0 14px;
  flex-wrap: wrap;
  pointer-events: auto;
}

/* Brand Capsule */
.omni-brand-capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-emblem {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 42, 50, 0.22) 0%, rgba(255, 42, 50, 0.04) 70%);
  border: 1px solid rgba(255, 42, 50, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pulse-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 42, 50, 0.4);
  animation: hudPulse 2.6s infinite ease-out;
}

@keyframes hudPulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.28); opacity: 0; }
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.brand-name {
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
body.theme-light .brand-name {
  background: linear-gradient(90deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.engine-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(168, 85, 247, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: var(--neon-cyan);
  white-space: nowrap;
}

.brand-sub {
  display: inline-block;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand-disclaimer {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* Corridor Presets Capsule */
.omni-presets-capsule {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  overflow-x: auto;
  max-width: 100%;
}

.capsule-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-right: 4px;
}

.preset-chip {
  appearance: none;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}
body.theme-light .preset-chip {
  background: rgba(15, 23, 42, 0.05);
}

.preset-chip:hover {
  color: var(--text-primary);
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
}

.preset-chip.active {
  color: #ffffff;
  background: linear-gradient(135deg, #e82127 0%, #b91c1c 100%);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 14px rgba(232, 33, 39, 0.45);
}

/* KPI Strip Capsule */
.omni-kpi-capsule {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 16px;
}

.hud-metric {
  display: flex;
  flex-direction: column;
  min-width: 78px;
}
.hud-metric.metric-highlight {
  min-width: 145px;
  flex-shrink: 0;
}

.hud-metric-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.hud-metric-val {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
}

.hud-metric-sub {
  font-size: 9.5px;
  color: var(--text-muted);
}

.hud-divider {
  width: 1px;
  height: 26px;
  background: var(--glass-border);
}

/* Actions Capsule */
.omni-actions-capsule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.hud-action-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 32px;
  line-height: 1;
  transition: all 0.18s ease;
}
.hud-action-btn svg {
  flex-shrink: 0;
}
/* [v6.6.3 Fix] ライトモード時の上部ヘッダーアクションボタン・リンクボタンの高視認性コントラスト強化 */
body.theme-light .omni-icon-btn,
body.theme-light .hud-action-btn,
body.theme-light .hud-link-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

body.theme-light .omni-icon-btn svg,
body.theme-light .hud-action-btn svg,
body.theme-light .hud-link-btn svg {
  stroke: #0f172a;
}

body.theme-light .omni-icon-btn:hover,
body.theme-light .hud-action-btn:hover,
body.theme-light .hud-link-btn:hover {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.5) !important;
}

body.theme-light .omni-icon-btn:hover svg,
body.theme-light .hud-action-btn:hover svg,
body.theme-light .hud-link-btn:hover svg {
  stroke: #0284c7;
}

.hud-action-btn:hover {
  border-color: var(--neon-cyan);
  background: rgba(56, 189, 248, 0.14);
}

.hud-action-btn.active-glow {
  border-color: var(--neon-cyan);
  background: rgba(56, 189, 248, 0.18);
  color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan-glow);
}

.hud-btn-primary {
  background: linear-gradient(135deg, #e82127 0%, #be123c 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(232, 33, 39, 0.4);
}
.hud-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 33, 39, 0.6);
}

/* ============================================================================
   3. FLOATING PARAMETER CONTROL MATRIX (Collapsible Top Popover Deck)
   ============================================================================ */
.floating-config-deck {
  position: fixed;
  top: 64px;
  left: 14px;
  right: 14px;
  z-index: 10000;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px;
  background: var(--glass-surface-elevated);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--radius-panel, 18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.12);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.floating-config-deck.collapsed {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.config-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}

.config-deck-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-deck-title h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
}

.config-deck-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

.neon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.neon-dot.cyan {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}

.icon-close-btn {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
}
.icon-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: var(--tesla-red);
}

.config-grid-columns {
  display: grid;
  grid-template-columns: 1.05fr 1.1fr 1.15fr;
  gap: 18px;
}

.config-col {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 11px 13px;
}
body.theme-light .config-col {
  background: rgba(15, 23, 42, 0.025);
}

.col-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.col-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

.segmented-pill {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.28);
  padding: 2px;
  border-radius: 99px;
  border: 1px solid var(--glass-border);
}
body.theme-light .segmented-pill {
  background: rgba(15, 23, 42, 0.08);
}

.seg-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  cursor: pointer;
}
.seg-item.active {
  background: var(--neon-cyan);
  color: #030712;
}

/* Route Vector Inputs */
.route-vector-inputs {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vector-field label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.v-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.v-dot.start { background: var(--neon-emerald); box-shadow: 0 0 6px var(--neon-emerald); }
.v-dot.dest { background: var(--tesla-red); box-shadow: 0 0 6px var(--tesla-red); }

.vector-input-wrap {
  display: flex;
  gap: 5px;
}

.cyber-select {
  width: 100%;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.75);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  outline: none;
}
body.theme-light .cyber-select {
  background: #ffffff;
}
.cyber-select:focus {
  border-color: var(--neon-cyan);
}
.cyber-select-sm {
  padding: 4px 7px;
  font-size: 11px;
}

.map-pin-btn {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 4px 10px;
  min-height: 28px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.14s ease;
}
.map-pin-btn:hover {
  border-color: var(--neon-cyan);
  background: rgba(56, 189, 248, 0.15);
}
body.theme-light .map-pin-btn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}
body.theme-light .map-pin-btn:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
}

.vector-swap-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.waypoint-inline {
  flex: 1;
}

.cyber-mini-btn {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.cyber-mini-btn:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.map-pick-alert {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid var(--neon-cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

/* Vehicle & Battery Controls */
.chem-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--neon-emerald);
}

.vehicle-micro-specs {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.soc-slider-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.soc-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.cyber-range {
  width: 100%;
  height: 5px;
  accent-color: var(--neon-cyan);
  cursor: pointer;
}
.range-emerald { accent-color: var(--neon-emerald); }
.range-amber { accent-color: var(--neon-amber); }
.range-cyan { accent-color: var(--neon-cyan); }

.split-controls {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  align-items: center;
}

.split-controls-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.micro-label {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.sweet-spot-btn {
  appearance: none;
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.2));
  color: var(--neon-cyan);
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.sweet-spot-btn:hover {
  background: var(--neon-cyan);
  color: #030712;
  box-shadow: 0 0 12px var(--neon-cyan);
}

.cyber-details {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-secondary);
}
.cyber-details summary {
  cursor: pointer;
  font-weight: 600;
}
.rates-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.rates-mini-grid label {
  display: block;
  font-size: 9.5px;
  margin-bottom: 2px;
}
.cyber-num {
  width: 100%;
  padding: 3px 5px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.8);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
}
body.theme-light .cyber-num {
  background: #ffffff;
}

/* ============================================================================
   4. FLOATING SPATIAL WORKSPACE (Left Optimization Deck & Right Timeline)
   ============================================================================ */
.spatial-hud-workspace {
  position: relative;
  z-index: 10;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 10px 14px;
  gap: 14px;
  pointer-events: none;
}

/* RHD Driver-Side Swap (puts main optimization controls on the right) */
body.rhd-layout .spatial-hud-workspace {
  flex-direction: row-reverse;
}

.hud-left-deck {
  width: 390px;
  max-width: 34vw;
  max-height: calc(100dvh - var(--hud-header-h, 58px) - 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 32px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.hud-right-deck {
  width: 380px;
  max-width: 33vw;
  max-height: calc(100dvh - var(--hud-header-h, 58px) - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 32px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.deck-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 2px;
}

.deck-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
}

.deck-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.solver-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--neon-emerald);
  white-space: nowrap;
}

/* Config Deck Header Action Buttons */
.config-deck-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================================
   0. PRIMARY ROUTE & QUICK VECTOR CARD (Always Visible at First Glance)
   ============================================================================ */
.primary-route-card {
  background: linear-gradient(145deg, rgba(18, 27, 48, 0.94) 0%, rgba(10, 16, 30, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.38);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.65), 0 0 16px rgba(56, 189, 248, 0.1);
  border-radius: var(--radius-card);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
body.theme-light .primary-route-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.12);
}

.primary-route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-light .primary-route-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.primary-route-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.pulse-dot-red {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tesla-red);
  box-shadow: 0 0 8px var(--tesla-red);
  display: inline-block;
}

.primary-quick-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5px;
  align-items: center;
  padding-top: 3px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
body.theme-light .primary-quick-row {
  border-top-color: rgba(15, 23, 42, 0.08);
}

.quick-field-veh label,
.quick-soc-head label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  display: block;
}

.quick-soc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1px;
}

.primary-quick-actions {
  display: flex;
  gap: 4px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.quick-action-btn {
  flex: 1 1 80px;
  text-align: center;
  padding: 4px 6px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}
.quick-action-btn.primary {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.45);
  color: var(--neon-cyan);
}
.quick-action-btn.primary:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #ffffff;
}

/* A. Multi-Corridor Expressway Comparison Box */
.corridor-comparison-box {
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 9px 11px;
}

.corridor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.corridor-pills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.corridor-option-btn {
  appearance: none;
  text-align: left;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.18s ease;
}
.corridor-option-btn:hover {
  border-color: var(--neon-cyan);
}
.corridor-option-btn.active {
  border-color: var(--neon-cyan);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(59, 130, 246, 0.08));
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.corridor-opt-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 2px;
}

.corridor-opt-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

/* B. Pareto Verdict Card */
.verdict-card {
  position: relative;
  padding: 11px 12px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(232, 33, 39, 0.16) 0%, rgba(15, 23, 42, 0.82) 100%);
  border: 1px solid rgba(232, 33, 39, 0.42);
}

.verdict-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.verdict-chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 99px;
  background: var(--tesla-red);
  color: #ffffff;
}

.verdict-corridor-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neon-cyan);
  font-weight: 700;
}

.verdict-headline {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 4px;
}

.verdict-detail {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* C. 3-Strategy Comparison Cards */
.strategy-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.strategy-card {
  padding: 9px 11px;
  border-radius: var(--radius-card);
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all 0.18s ease;
}
.strategy-card:hover {
  background: var(--glass-card-hover);
  border-color: rgba(255, 255, 255, 0.25);
}
.strategy-card.selected {
  border-color: var(--neon-cyan);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(15, 23, 42, 0.85) 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.18);
}

.strat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.strat-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.strat-color-bar {
  width: 4px;
  height: 16px;
  border-radius: 4px;
}

.strat-name {
  font-size: 12px;
  font-weight: 800;
}

.strat-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.strat-metrics-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr 0.9fr;
  gap: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.strat-metric span {
  display: block;
  font-size: 9.5px;
  color: var(--text-muted);
}
.strat-metric strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

/* D. Trade-off Matrix & NEXCO Toll Penalty Box */
.tradeoff-matrix-box,
.speed-sweetspot-box {
  padding: 9px 11px;
  border-radius: var(--radius-card);
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  font-size: 11px;
}

.matrix-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--neon-cyan);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tradeoff-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tradeoff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

/* ============================================================================
   CENTER MAP FLOATING CONTROLS & LEGEND
   ============================================================================ */
.map-floating-controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  pointer-events: none;
  padding: 4px 0;
}

.map-top-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
  flex-wrap: wrap;
  max-width: 90%;
}

.map-filter-capsule {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
}

.map-filter-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
}
.map-filter-btn.active,
.map-filter-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  color: var(--neon-cyan);
}

.map-soc-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.soc-grad-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.grad-stop {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.grad-stop.s-high { background: #10b981; box-shadow: 0 0 6px #10b981; }
.grad-stop.s-mid  { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.grad-stop.s-low  { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.grad-stop.s-crit { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

.legend-sep {
  color: var(--text-muted);
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.legend-dot.sc-stop { background: var(--tesla-red); box-shadow: 0 0 6px var(--tesla-red); }
.legend-dot.sapa-stop { background: var(--neon-emerald); box-shadow: 0 0 6px var(--neon-emerald); }

/* ============================================================================
   RIGHT FLOATING DECK: TACTICAL CHARGING TIMELINE
   ============================================================================ */
.roundtrip-summary-box {
  padding: 9px 11px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), var(--glass-card));
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: var(--text-primary);
  font-size: 11px;
}
body.theme-light .roundtrip-summary-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(255, 255, 255, 0.95));
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Interactive Plan-B Backup Charger Swap Button */
.backup-charger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: var(--neon-amber);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
  text-align: left;
}
.backup-charger-btn:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: #f59e0b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.backup-charger-btn .swap-action-hint {
  margin-left: auto;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.3);
  color: #fff;
}

/* Break Style Preset Buttons (Quick Stop Duration) */
.break-style-pill-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 2px 0;
  flex-wrap: wrap;
}
.break-chip {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.break-chip:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--neon-cyan);
  color: var(--text-primary);
}
.break-chip.active {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #030712;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}
body.theme-light .break-chip {
  background: rgba(15, 23, 42, 0.05);
}

/* Stepper Buttons for Sliders (+ / - Buttons) */
.stepper-control-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.stepper-btn {
  appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.14s ease;
  user-select: none;
}
.stepper-btn:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: var(--neon-cyan);
  color: #fff;
  transform: scale(1.08);
}
.stepper-btn:active {
  transform: scale(0.94);
}
body.theme-light .stepper-btn {
  background: rgba(15, 23, 42, 0.08);
}

/* Wheel Size Quick Toggle (18" / 19" / 20") */
.wheel-size-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px;
  border-radius: 99px;
  border: 1px solid var(--glass-border);
}
body.theme-light .wheel-size-toggle {
  background: rgba(15, 23, 42, 0.06);
}
.wheel-chip {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wheel-chip.active {
  background: var(--neon-cyan);
  color: #030712;
}

/* Practical Modal Navigation Hint Guide */
.modal-hint-box {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.38);
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.5;
}
.modal-hint-box strong {
  color: var(--neon-emerald);
}

.mission-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.timeline-node {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius-card);
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  transition: border-color 0.18s ease;
}
.timeline-node:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.timeline-node.stop-sc {
  border-left: 3.5px solid var(--tesla-red);
}
.timeline-node.stop-sapa {
  border-left: 3.5px solid var(--neon-emerald);
}
.timeline-node.node-endpoint {
  border-left: 3.5px solid var(--neon-cyan);
}

.node-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.node-title {
  font-size: 12.5px;
  font-weight: 800;
}

.node-Tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 99px;
}
.node-Tag.sc {
  background: rgba(255, 42, 50, 0.18);
  color: #fca5a5;
  border: 1px solid rgba(255, 42, 50, 0.4);
}
.node-Tag.sapa {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.node-sub-meta {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Visual SoC Charge Progress Bar inside Stop Card */
.soc-charge-bar-wrap {
  margin: 6px 0;
}

.soc-charge-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}

.soc-visual-track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.soc-fill-arrival {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(148, 163, 184, 0.45);
}

.soc-fill-added {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-emerald));
}

.stop-kpi-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.micro-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.stop-slider-control {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--glass-border);
}

.backup-charger-box {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
}

/* ============================================================================
   5. BOTTOM FLOATING TELEMETRY RIBBON
   ============================================================================ */
.bottom-telemetry-dock {
  position: relative;
  z-index: 20;
  margin: 0 14px 10px 14px;
  padding: 9px 14px 12px 14px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .bottom-telemetry-dock:not(.dock-minimized):not(.minimized) {
    max-height: min(74dvh, calc(100dvh - var(--hud-header-h, 58px) - 20px));
  }
  .bottom-telemetry-dock .telemetry-canvas-body {
    min-height: 0;
    max-height: calc(74dvh - 58px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .bottom-telemetry-dock.dock-fullscreen {
    position: fixed !important;
    inset: 10px 14px 10px 14px !important;
    max-width: 1440px !important;
    z-index: 9999 !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    background: rgba(10, 15, 29, 0.96) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7) !important;
  }
  .bottom-telemetry-dock.dock-fullscreen .telemetry-canvas-body {
    max-height: calc(100dvh - 80px) !important;
  }
}

.bottom-telemetry-dock.minimized .telemetry-canvas-body,
.bottom-telemetry-dock.dock-minimized .telemetry-canvas-body {
  display: none !important;
}

.telemetry-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.telemetry-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.telemetry-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.telemetry-tab .tab-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neon-cyan);
  font-weight: 800;
}

.telemetry-tab.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(59, 130, 246, 0.14));
  border-color: var(--neon-cyan);
  color: var(--text-primary);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.22);
}

.telemetry-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================================
   3大グラフ並列グリッド ＆ カードコンテナ設計
   ============================================================================ */
.telemetry-canvas-body {
  width: 100%;
  margin: 0 auto;
  transition: all 0.2s ease;
}

/* [v6.5.0 Full Overhaul - ステップ6] 全表示モード時 (3-in-1 Dashboard Grid: ①・③を上段2カラム、情報量の多い②を下段全幅に配置してカードの文字詰まりを完全解消) */
.bottom-telemetry-dock.view-mode-all .telemetry-grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.bottom-telemetry-dock.view-mode-all #paneElevationSoc {
  grid-column: 1 / 2;
  order: 1;
}

.bottom-telemetry-dock.view-mode-all #paneTradeoffMatrix {
  grid-column: 2 / 3;
  order: 2;
}

.bottom-telemetry-dock.view-mode-all #paneSpeedOpt {
  grid-column: 1 / -1;
  order: 3;
}

/* 単一表示モード時 (Single Chart Focus) */
.bottom-telemetry-dock.view-mode-single .telemetry-grid-container {
  display: block;
}
.bottom-telemetry-dock.view-mode-single .telemetry-chart-card.hidden {
  display: none !important;
}

/* 共通カードスタイル */
.telemetry-chart-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.60);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 12px 12px 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  min-width: 0;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.telemetry-chart-card:hover {
  border-color: rgba(56, 189, 248, 0.40);
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.12);
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.chart-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.chart-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.chart-card-badge.cyan {
  background: rgba(56, 189, 248, 0.18);
  color: var(--neon-cyan);
  border: 1px solid rgba(56, 189, 248, 0.45);
}
.chart-card-badge.blue {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.45);
}
.chart-card-badge.emerald {
  background: rgba(16, 185, 129, 0.18);
  color: var(--neon-emerald);
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.chart-card-heading {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.chart-card-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.chart-card-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

.compare-selector-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.compare-selector-wrap .compare-label {
  font-size: 10px;
  color: var(--text-muted);
}

.canvas-holder {
  width: 100%;
  height: 210px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}

.bottom-telemetry-dock.view-mode-single .canvas-holder {
  height: 260px;
}

#paneSpeedOpt {
  display: flex;
  flex-direction: column;
}

#paneSpeedOpt .canvas-holder {
  height: 210px;
  flex-shrink: 0;
}

.bottom-telemetry-dock.view-mode-single #paneSpeedOpt .canvas-holder {
  height: 250px;
}

.speed-opt-summary-row {
  margin-top: 6px;
}

.bottom-telemetry-dock.view-mode-single #paneTradeoffMatrix .canvas-holder {
  height: 240px;
}

.tradeoff-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
.tradeoff-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-left: 3.5px solid #0284c7;
  font-size: 11px;
  transition: all 0.15s ease;
}
.tradeoff-card.active {
  background: rgba(2, 132, 199, 0.12);
  border-color: #0284c7;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.2);
}
body.theme-light .tradeoff-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.theme-light .tradeoff-card.active {
  background: #f0f9ff;
  border-color: #0284c7;
}
.tradeoff-card-title {
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tradeoff-card-metric {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--neon-cyan);
}
body.theme-light .tradeoff-card-metric {
  color: #0284c7;
}
.tradeoff-card-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

@media (max-width: 1100px) and (min-width: 769px) {
  .bottom-telemetry-dock.view-mode-all .telemetry-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ============================================================================
   6. LEAFLET CUSTOM CYBER MARKERS & POPUPS
   ============================================================================ */
.leaflet-popup-content-wrapper {
  background: var(--glass-surface-elevated) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border-bright);
  border-radius: 12px !important;
  box-shadow: var(--hud-shadow) !important;
}
.leaflet-popup-tip {
  background: var(--glass-surface-elevated) !important;
}

.sc-pin-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 800;
  color: #fff;
  transition: transform 0.15s ease;
}
.sc-pin-marker.active-stop {
  background: var(--tesla-red);
  border: 2px solid #ffffff;
  box-shadow: 0 0 16px var(--tesla-red), 0 0 30px rgba(255, 42, 50, 0.6);
}
.sc-pin-marker.active-sapa {
  background: var(--neon-emerald);
  border: 2px solid #ffffff;
  box-shadow: 0 0 16px var(--neon-emerald);
}

/* Animated Route Flow Line */
.route-energy-pulse {
  stroke-dasharray: 10, 18;
  animation: routeFlowAnim 1.4s linear infinite;
}
@keyframes routeFlowAnim {
  from { stroke-dashoffset: 28; }
  to   { stroke-dashoffset: 0; }
}

.cyber-modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: auto;
}

.cyber-modal-backdrop.hidden,
.modal-overlay.hidden,
.modal-overlay:not(.active) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.cyber-modal-card {
  position: relative;
  z-index: 10001;
  width: min(620px, 95vw);
  padding: 20px;
}

.modal-lead {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 10px 0 14px 0;
}

.modal-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.cyber-action-card {
  appearance: none;
  text-decoration: none;
  text-align: left;
  padding: 11px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: var(--glass-card);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cyber-action-card strong {
  font-size: 12px;
}
.cyber-action-card span {
  font-size: 10px;
  color: var(--text-secondary);
}
.cyber-action-card.primary {
  border-color: var(--tesla-red);
  background: linear-gradient(135deg, rgba(232, 33, 39, 0.22), rgba(15, 23, 42, 0.9));
}

.cyber-textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(5, 8, 17, 0.85);
  color: var(--text-primary);
  font-size: 11.5px;
  resize: vertical;
}

/* ============================================================================
   8. RESPONSIVE BREAKPOINTS (Tablet & Mobile)
   ============================================================================ */
@media (max-width: 1180px) {
  html, body {
    overflow-y: auto;
    height: auto;
  }
  .spatial-cockpit-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .fullbleed-map-stage {
    position: relative;
    height: 440px;
    order: 2;
  }
  .omni-hud-header {
    order: 1;
  }
  .floating-config-deck {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 8px 14px;
    order: 1;
  }
  .config-grid-columns {
    grid-template-columns: 1fr;
  }
  .spatial-hud-workspace {
    flex-direction: column !important;
    order: 3;
  }
  .hud-left-deck,
  .hud-right-deck {
    width: 100%;
    max-width: 100%;
  }
  .bottom-telemetry-dock {
    order: 4;
  }
}

/* CartoDB Dark Matter / Positron Base Styling */
.dark-map-tiles {
  /* CARTO Dark Matter is natively dark; no heavy invert filter needed */
}

/* ============================================================================
   9. MOBILE RESPONSIVE HUD & BOTTOM NAV TAB BAR (<= 768px)
   ============================================================================ */
.mobile-nav-tabbar {
  display: none;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    height: 100%;
    position: fixed;
    width: 100%;
  }

  .spatial-cockpit-shell,
  .app-container {
    height: 100%;
    min-height: 100%;
    max-width: 100vw !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    overflow-y: hidden;
    padding-bottom: 56px; /* space for bottom tab bar */
    box-sizing: border-box;
  }

  /* [v4.4.0 Fix] iOS Safari でのフォームタップ時「勝手な画面自動拡大（Auto-Zoom）」防止 */
  input[type="text"],
  input[type="number"],
  input[type="time"],
  select,
  textarea,
  .cyber-search-input,
  .cyber-select,
  .cyber-num {
    font-size: 16px !important;
  }

  /* Compact Top Header for Mobile (2段高機能グリッドHUD) */
  .omni-hud-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "kpis kpis" !important;
    gap: 4px 6px !important;
    padding: 5px 8px 4px 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    background: var(--glass-surface-elevated) !important;
    border-bottom: 1px solid var(--glass-border) !important;
  }

  .omni-brand-capsule {
    grid-area: brand;
    padding: 2px 0 !important;
    gap: 5px !important;
    flex-shrink: 0;
    min-width: 0 !important;
    max-width: calc(100vw - 165px) !important;
    overflow: visible !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .brand-titles {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  .omni-brand-capsule .brand-emblem {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  .omni-brand-capsule .brand-emblem svg {
    width: 12px !important;
    height: 12px !important;
  }
  .brand-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .brand-main {
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }
  .brand-sub {
    font-size: 8px !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .brand-disclaimer {
    display: block !important;
    font-size: 7.5px !important;
    line-height: 1.25 !important;
    color: var(--text-muted) !important;
    margin: 1px 0 0 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .version-pill {
    font-size: 8px !important;
    padding: 1px 4px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  .back-to-stable-pill {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(37, 99, 235, 0.45) 100%);
    border: 1px solid rgba(56, 189, 248, 0.65);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px;
  }
  body.theme-light .back-to-stable-pill {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
  }

  .omni-actions-capsule {
    grid-area: actions;
    padding: 0 !important;
    gap: 4px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .omni-actions-capsule .hud-action-btn span,
  .omni-actions-capsule #btnTogglePanelsLabel,
  .omni-actions-capsule #themeToggleLabel,
  .omni-actions-capsule #btnMainBlogLabel,
  .omni-actions-capsule #btnBackToStableLabel {
    display: none !important;
  }
  .hud-action-btn {
    padding: 3px 6px !important;
    font-size: 11px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #btnScreen16x9, #btnRhdSwap {
    display: none !important; /* Hide PC-specific controls on mobile */
  }

  /* 2段目：横幅100% KPIストリップ（Grid親押し広げ防止: min-width: 0） */
  .omni-kpi-capsule {
    grid-area: kpis;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    border-radius: 8px !important;
  }
  .omni-kpi-capsule::-webkit-scrollbar {
    display: none !important;
  }
  .omni-kpi-capsule .hud-metric {
    flex-shrink: 0;
    min-width: 0;
  }
  .hud-metric-label {
    display: block !important;
    font-size: 7.5px !important;
    color: var(--text-muted) !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
  }
  .hud-metric-sub,
  .hud-cost-subtext,
  .hud-speed-subtext,
  .hud-stops-subtext {
    display: none !important;
  }
  .hud-metric-val {
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  .hud-divider {
    height: 14px !important;
    margin: 0 1px !important;
  }
  .metric-benefit-highlight {
    padding: 2px 6px !important;
    border-radius: 6px !important;
  }
  #hudBenefitMain {
    font-size: 10px !important;
    letter-spacing: -0.02em !important;
  }
  .hud-benefit-subtext {
    font-size: 7px !important;
    white-space: nowrap !important;
  }

  /* 経由地入力行のスマホ最適化 */
  .waypoint-item-row {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
  .wp-index-badge {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }
  .wp-search-input {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  .wp-select-stay {
    width: 108px !important;
    min-width: 108px !important;
    min-height: 32px !important;
    padding: 2px 22px 2px 8px !important;
    font-size: 11px !important;
  }
  .waypoint-item-row .cyber-mini-btn {
    min-width: 24px !important;
    height: 30px !important;
    padding: 0 2px !important;
    font-size: 11px !important;
  }

  /* 速度別比較カードのスマホ最適化 */
  .speed-opt-summary-row {
    padding: 4px 2px;
    gap: 6px;
  }
  .speed-summary-card {
    min-width: 95px !important;
    padding: 6px 8px !important;
  }
  .speed-card-speed {
    font-size: 11px !important;
  }
  .speed-card-time {
    font-size: 12px !important;
  }

  /* 目玉機能クイックチップのスマホ最適化（見切れ完全解消・2行折り返し） */
  .speed-quick-switch-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .speed-mode-chip {
    font-size: 10px !important;
    padding: 6px 4px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-break: break-word !important;
    min-height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* タイムラインサマリーのスマホ最適化（ボタン縦積みで文字隠れ解消） */
  .hero-summary-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .hero-summary-kpis {
    font-size: 11.5px !important;
    gap: 4px 8px !important;
  }
  .hero-nav-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 36px !important;
    font-size: 12.5px !important;
  }
  .hero-benefit-ribbon {
    font-size: 10.5px !important;
    padding: 5px 8px !important;
    line-height: 1.35 !important;
  }

  /* 共有モーダルのスマホ1列カード化 */
  .modal-action-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cyber-modal-card {
    max-height: 85dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px !important;
  }

  /* Floating Config Deck on Mobile (全画面オーバーレイモーダル化 & 内部要素の完全レスポンシブ化) */
  .floating-config-deck {
    position: fixed !important;
    top: 12px !important;
    bottom: 12px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px) !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px 28px 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65) !important;
    order: 0 !important;
    margin: 0 !important;
  }
  .floating-config-deck.collapsed {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .floating-config-deck .config-deck-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    position: relative !important;
    padding-right: 36px !important;
    margin-bottom: 12px !important;
  }
  .floating-config-deck .config-deck-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .floating-config-deck .config-deck-title h2 {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .floating-config-deck .config-deck-hint {
    font-size: 10px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    color: var(--text-secondary) !important;
  }
  .floating-config-deck .config-deck-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .floating-config-deck .config-deck-actions .cyber-mini-btn {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .floating-config-deck .config-deck-actions .icon-close-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    z-index: 10 !important;
  }
  .floating-config-deck .config-grid-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .floating-config-deck .config-col {
    padding: 10px 12px !important;
  }
  .floating-config-deck .col-header-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .floating-config-deck .col-tag {
    font-size: 11px !important;
  }
  .floating-config-deck .chem-pill {
    font-size: 10px !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
  }
  .floating-config-deck .vehicle-micro-specs {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 10px !important;
    margin-top: 6px !important;
  }
  .floating-config-deck .vehicle-micro-specs span {
    white-space: normal !important;
  }
  .floating-config-deck .stepper-control-wrap {
    width: 100% !important;
  }

  /* [Issue #5 Fix] Mobile Spatial Cockpit: Strict vertical flexbox layout with zero overlap */
  #teslaAppRoot.spatial-cockpit-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .omni-hud-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    z-index: 30 !important;
  }

  /* 画面上部に常時ルートマップを配置（重なりゼロ） */
  #mapContainer.fullbleed-map-stage {
    display: block !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 30dvh !important;
    min-height: 175px !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  }

  /* 「地図」タブ選択時はマップを画面いっぱいに拡大（空白バグ完全撲滅） */
  body.mobile-view-map #mapContainer.fullbleed-map-stage,
  body.mobile-view-map #mapContainer {
    position: fixed !important;
    top: var(--hud-header-height, 208px) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--hud-header-height, 208px) - 56px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    flex: none !important;
    z-index: 10 !important;
    display: block !important;
  }

  .spatial-hud-workspace {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 54px !important;
    z-index: 10 !important;
  }

  body.mobile-view-map .spatial-hud-workspace {
    display: none !important;
  }

  .hud-left-deck,
  .hud-right-deck,
  .bottom-telemetry-dock {
    display: none !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 28px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(9, 13, 22, 0.98) !important;
    z-index: 10 !important;
  }

  body.mobile-view-route .hud-left-deck {
    display: flex !important;
    flex-direction: column !important;
  }

  body.mobile-view-timeline .hud-right-deck {
    display: flex !important;
    flex-direction: column !important;
  }

  body.mobile-view-charts .spatial-hud-workspace {
    display: none !important;
  }

  body.mobile-view-charts .bottom-telemetry-dock {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 76px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-view-charts .bottom-telemetry-dock .telemetry-canvas-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  body.mobile-view-charts .telemetry-grid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  body.mobile-view-charts .telemetry-chart-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 10px !important;
    padding: 10px 10px 12px 10px !important;
    scroll-margin-top: 10px !important;
  }
  body.mobile-view-charts .canvas-holder {
    height: 200px !important;
    min-height: 190px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Bottom Telemetry Dock in Mobile Tab View */
  .bottom-telemetry-dock {
    flex-direction: column;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .telemetry-dock-header {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    flex-shrink: 0;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .telemetry-tabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
  }
  #btnToggleTelemetrySize {
    display: none;
  }
  .telemetry-canvas-body {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    overflow-y: visible !important;
  }
  body.mobile-view-charts #paneSpeedOpt .canvas-holder {
    height: 210px !important;
    min-height: 200px !important;
    flex-shrink: 0;
  }
  body.mobile-view-charts .speed-opt-summary-row {
    margin-top: 8px !important;
    padding: 6px 2px 14px 2px !important;
    overflow-x: auto !important;
    flex-shrink: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-view-charts .speed-summary-card {
    min-width: 110px !important;
    padding: 8px 10px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  /* Map Floating Controls on Mobile */
  body.mobile-view-map .map-floating-controls {
    display: flex;
    z-index: 25;
    position: absolute;
    top: 60px;
    bottom: 70px;
    left: 10px;
    right: 10px;
  }
  body:not(.mobile-view-map) .map-floating-controls {
    display: none;
  }

  /* Fixed Mobile Bottom Navigation Tab Bar */
  .mobile-nav-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px !important;
    z-index: 9000 !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--glass-surface-elevated);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid var(--glass-border-bright);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
    padding: 0 4px;
  }

  .mobile-tab-btn {
    appearance: none;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition: all 0.16s ease;
    flex: 1;
    max-width: 90px;
  }

  .mobile-tab-btn .m-tab-icon {
    font-size: 16px;
    line-height: 1;
  }

  .mobile-tab-btn .m-tab-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .mobile-tab-btn.active {
    color: var(--neon-cyan);
    background: rgba(56, 189, 248, 0.12);
  }

  .mobile-tab-btn.active .m-tab-icon {
    transform: scale(1.15);
  }

  /* ==========================================================================
     [v4.4.0 最終版] スマホ画面幅(375px)完全最適化・横揺れ防止・ボタン切れ解消
     ========================================================================== */
  /* 横スクロールはみ出し(Horizontal Overflow)防止 */
  body, .spatial-cockpit-shell, .spatial-hud-workspace {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* プランカードグリッドのスマホ2x2または1カラム最適化 */
  .plan-card-grid,
  .strategy-grid,
  .plan-grid-3cols {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  @media (max-width: 360px) {
    .plan-card-grid,
    .strategy-grid,
    .plan-grid-3cols {
      grid-template-columns: 1fr !important;
    }
  }

  /* モーダル内ボタングループの折り返し許容 (375px見切れゼロ化) */
  #floatingConfigDeck .btn-group,
  #floatingConfigDeck .preset-group,
  #floatingConfigDeck .segmented-pill,
  #floatingConfigDeck .tariff-preset-chips,
  .btn-group,
  .preset-group,
  .preset-chips,
  .tariff-preset-chips,
  .segmented-pill {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #floatingConfigDeck .segmented-pill .seg-item,
  .segmented-pill .seg-item {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    text-align: center !important;
  }

  /* モーダル閉じるボタンのタップ領域を44x44pxに拡大 */
  #btnCloseConfigDeck,
  .icon-close-btn,
  .close-modal-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  /* 4タブ表示の確実な排他表示・フルスクリーン化 & モバイルタッチスクロール完全保証 */
  body.mobile-view-route .hud-left-deck {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: fixed !important;
    top: var(--hud-header-height, 208px) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    overscroll-behavior-y: contain !important;
    padding-top: 12px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  body.mobile-view-route .spatial-hud-workspace {
    pointer-events: auto !important;
  }
  body.mobile-view-route .hud-right-deck,
  body.mobile-view-route .bottom-telemetry-dock,
  body.mobile-view-route #mapContainer {
    display: none !important;
  }

  body.mobile-view-map #mapContainer {
    display: block !important;
    position: fixed !important;
    top: var(--hud-header-height, 208px) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--hud-header-height, 208px) - 56px - env(safe-area-inset-bottom, 0px)) !important;
    z-index: 50 !important;
  }
  body.mobile-view-map .spatial-hud-workspace,
  body.mobile-view-map .hud-left-deck,
  body.mobile-view-map .hud-right-deck,
  body.mobile-view-map .bottom-telemetry-dock {
    display: none !important;
  }

  body.mobile-view-timeline .hud-right-deck {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: fixed !important;
    top: var(--hud-header-height, 208px) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    overscroll-behavior-y: contain !important;
    padding-top: 12px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  body.mobile-view-timeline .spatial-hud-workspace {
    pointer-events: auto !important;
  }
  body.mobile-view-timeline .hud-left-deck,
  body.mobile-view-timeline .bottom-telemetry-dock,
  body.mobile-view-timeline #mapContainer {
    display: none !important;
  }

  body.mobile-view-charts .bottom-telemetry-dock {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: fixed !important;
    top: var(--hud-header-height, 208px) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  body.mobile-view-charts .spatial-hud-workspace,
  body.mobile-view-charts .hud-left-deck,
  body.mobile-view-charts .hud-right-deck,
  body.mobile-view-charts #mapContainer {
    display: none !important;
  }

}

/* ==========================================================================
   CAR-NAVIGATION MULTI-SEARCH (OMNI-SEARCH INPUT & AUTOCOMPLETE DRAWER)
   ========================================================================== */
.nav-search-field {
  position: relative;
  width: 100%;
  z-index: 5;
}
.nav-search-field:focus-within,
.nav-search-field.has-suggest-active {
  z-index: 500;
}

.nav-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--input-bg, rgba(15, 23, 42, 0.75));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 8px);
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.nav-search-input-wrap:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.28);
  background: rgba(15, 23, 42, 0.9);
}

.theme-light .nav-search-input-wrap:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.25);
  background: #ffffff;
}

.nav-search-icon {
  padding-left: 9px;
  padding-right: 4px;
  font-size: 13px;
  opacity: 0.85;
  user-select: none;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}

.cyber-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 5px;
  outline: none;
  box-sizing: border-box;
}

.cyber-search-input::placeholder {
  color: var(--text-tertiary, rgba(156, 163, 175, 0.7));
  font-weight: 400;
  font-size: 11.5px;
}

.cyber-search-input-sm {
  font-size: 11.5px;
  padding: 5px 4px;
}

.nav-clear-btn,
.nav-list-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  min-width: 28px;
  min-height: 28px;
  font-size: 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.14s ease;
  flex-shrink: 0;
}

.nav-clear-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.16);
}

.nav-list-btn:hover {
  color: var(--neon-cyan);
  background: rgba(56, 189, 248, 0.16);
}

.nav-suggestions-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 310px;
  overflow-y: auto;
  background: var(--glass-surface-elevated, rgba(15, 23, 42, 0.96));
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--neon-cyan);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.22);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 3px;
  box-sizing: border-box;
}

.theme-light .nav-suggestions-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(2, 132, 199, 0.6);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 16px rgba(2, 132, 199, 0.15);
}

.suggest-filter-tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 5px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--glass-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.suggest-filter-tabs::-webkit-scrollbar {
  display: none;
}

.suggest-tab-btn {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}

.suggest-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}

.suggest-tab-btn.active {
  color: var(--neon-cyan);
  background: rgba(56, 189, 248, 0.18);
  box-shadow: inset 0 0 6px rgba(56, 189, 248, 0.2);
}

.suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid transparent;
  gap: 8px;
  text-align: left;
}

.suggest-item:hover,
.suggest-item.highlighted {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(2px);
}

.theme-light .suggest-item:hover,
.theme-light .suggest-item.highlighted {
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.3);
}

.suggest-main-info {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  min-width: 0;
  flex: 1;
}

.suggest-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.suggest-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggest-detail {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggest-meta-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-sc {
  background: rgba(232, 33, 39, 0.2);
  color: #ff5252;
  border: 1px solid rgba(232, 33, 39, 0.4);
}

.badge-station {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.badge-landmark {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-postal {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.badge-address {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-sapa {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.suggest-empty-hint {
  padding: 14px 10px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 11.5px;
}

.suggest-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  font-size: 11.5px;
  color: var(--neon-cyan);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  .nav-suggestions-panel {
    max-height: 240px;
  }
}




/* ============================================================================
   6. V3.0 TRAVEL PLANNER & CAR-SAFE HUD EXTENSIONS
   ============================================================================ */

/* Multi-waypoint Builder List */
.multi-waypoints-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.waypoint-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 5px 8px;
  animation: fadeIn 0.2s ease;
}

.waypoint-item-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waypoint-item-meta {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.waypoint-del-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.waypoint-del-btn:hover {
  color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
}

.trip-builder-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.trip-builder-actions .cyber-mini-btn {
  flex: 1;
  min-height: 32px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stay-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.2);
  color: var(--neon-cyan);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

/* Hotel / Stay & Sentry Config Panel */
.stay-config-panel {
  margin-top: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  animation: fadeIn 0.22s ease;
}

.stay-config-panel.hidden {
  display: none !important;
}

.stay-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.stay-preset-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.stay-preset-chips .break-chip {
  font-size: 9.5px;
  padding: 3px 7px;
}

.stay-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* Schedule & Priority Row */
.schedule-priority-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.schedule-box, .priority-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schedule-box label, .priority-box label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

#priorityModeToggle {
  display: flex;
  width: 100%;
}

#priorityModeToggle .seg-item {
  flex: 1;
  padding: 5px 2px;
  font-size: 9.5px;
  text-align: center;
  white-space: nowrap;
}

/* Tesla In-Car Safe Browser Modal Elements */
.tesla-safe-box {
  margin-top: 12px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
}

.tesla-safe-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--neon-emerald);
  margin-bottom: 4px;
}

.tesla-safe-desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
}

/* [v4.5.2] ナビ転送モーダル下部: スマホ・PC用 Googleマップ経路起動 CTA */
.google-maps-bottom-cta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(16, 185, 129, 0.14));
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.google-maps-bottom-cta:hover {
  transform: translateY(-1px);
  border-color: var(--neon-cyan);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}

.gmbc-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.gmbc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gmbc-text strong {
  font-size: 12.5px;
  font-weight: 800;
}

.gmbc-text small {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.gmbc-arrow {
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--neon-cyan);
  flex-shrink: 0;
}

body.theme-light .google-maps-bottom-cta {
  background: linear-gradient(135deg, #e0f2fe, #dcfce7);
  border-color: #7dd3fc;
  color: #0f172a;
}

body.theme-light .gmbc-text small {
  color: #475569;
}

body.theme-light .gmbc-arrow {
  color: #0284c7;
}

.tesla-qr-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px;
  border-radius: 8px;
}

.qr-canvas-holder {
  width: 96px;
  height: 96px;
  background: #ffffff;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qr-canvas-holder svg, .qr-canvas-holder canvas {
  width: 100% !important;
  height: 100% !important;
}

.qr-url-desc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.btn-focus-charger-map {
  cursor: pointer;
  background: rgba(56, 189, 248, 0.12) !important;
  color: var(--neon-cyan) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  transition: all 0.18s ease;
}
.btn-focus-charger-map:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: var(--neon-cyan) !important;
}

/* Meal Timing Badges */
.meal-timing-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Touch screen & In-car 16:9 Optimization */
.stepper-btn {
  min-height: 36px !important;
  min-width: 36px !important;
  font-size: 16px !important;
}

.preset-chip, .break-chip, .seg-item {
  min-height: 32px;
}

/* Bottom Telemetry Dock Collapsible */
.bottom-telemetry-dock {
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.bottom-telemetry-dock.dock-minimized {
  padding-bottom: 6px;
}
.bottom-telemetry-dock.minimized .telemetry-canvas-body,
.bottom-telemetry-dock.dock-minimized .telemetry-canvas-body {
  display: none !important;
}

/* Mobile <= 768px: Persistent Top Map (34vh) + Fixed Scrollable Decks */
@media (max-width: 768px) {
  body.mobile-view-route,
  body.mobile-view-timeline,
  body.mobile-view-charts {
    overflow: hidden !important;
  }

  .mobile-view-route #mapContainer,
  .mobile-view-timeline #mapContainer {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 34vh !important;
    z-index: 10 !important;
    display: block !important;
  }

  .mobile-view-map #mapContainer {
    position: fixed !important;
    top: var(--hud-header-height, 208px) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--hud-header-height, 208px) - 56px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    z-index: 10 !important;
    display: block !important;
  }

  .spatial-hud-workspace {
    position: relative !important;
    z-index: 15 !important;
    padding-bottom: 70px !important;
  }

  .schedule-priority-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   7. UNOBTRUSIVE DISCLAIMER NOTE
   ============================================================================ */
.deck-disclaimer-note {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.deck-disclaimer-note p {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted, #71717a);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   v3.3 VISIBILITY & UI/UX OVERHAUL (高視認性・大型タイポグラフィ・レイアウト改善)
   ========================================================================== */

/* ダークモード時の地図タイル（本来のサイバーダークマップをクリアに表示） */
body.theme-dark .leaflet-tile-pane {
  filter: none;
}

/* 1. 上部ヘッダーの1行固定・KPI大型化（PC・タブレット・テスラ車載等 769px以上） */
@media (min-width: 769px) {
  .omni-hud-header {
    min-height: 52px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    flex-wrap: nowrap !important;
    gap: 8px;
    background: var(--glass-surface-elevated);
    border-bottom: 1px solid var(--glass-border-strong);
  }

  .omni-brand-capsule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  .brand-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    max-width: 280px !important;
  }

  .brand-main {
    font-size: 13px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    font-weight: 900;
  }

  .brand-sub {
    display: block !important;
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    color: var(--text-secondary) !important;
    font-weight: 700;
    white-space: nowrap;
    margin-top: 1px !important;
  }

  .version-pill {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }

  .back-to-stable-pill {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(37, 99, 235, 0.45) 100%);
    border: 1.5px solid rgba(56, 189, 248, 0.65);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .back-to-stable-pill .back-icon {
    font-size: 10px;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .back-to-stable-pill:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.55) 0%, rgba(37, 99, 235, 0.7) 100%);
    color: #ffffff !important;
    border-color: rgba(125, 211, 252, 0.9);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
  }
  .back-to-stable-pill:hover .back-icon {
    transform: translateX(-2px);
  }
  body.theme-light .back-to-stable-pill {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.32);
  }
  body.theme-light .back-to-stable-pill:hover {
    background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
    transform: translateY(-1px);
  }

  .brand-disclaimer {
    display: none !important; /* PCトップバーでは非表示にして中央KPIカプセルの表示領域を最優先確保 */
  }

  /* 中央 KPI カプセル（全5メトリック完全1行・見切れゼロ化設計） */
  .omni-kpi-capsule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: 860px;
    padding: 3px 8px;
    gap: 5px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid var(--glass-border-strong);
    box-sizing: border-box;
    overflow: hidden !important;
    border-radius: 9999px;
  }
  body.theme-light .omni-kpi-capsule {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .hud-metric {
    min-width: 0 !important;
    flex: 1 1 auto;
    padding: 0 2px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hud-metric.metric-highlight {
    min-width: 95px !important;
    flex: 1.2 1 auto;
  }

  .hud-metric-label {
    font-size: 8px !important;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap !important;
    letter-spacing: -0.02em;
  }

  .hud-metric-val {
    font-size: 12px !important;
    font-weight: 800;
    white-space: nowrap !important;
    line-height: 1.2;
  }

  .hud-divider {
    width: 1px;
    height: 20px;
    background: var(--glass-border);
    flex-shrink: 0;
  }

  /* 5番目: ツール最適化メリット強調カプセル（絶対に右端で切れない設定） */
  .omni-kpi-capsule .metric-benefit-highlight {
    min-width: max-content !important;
    flex: 1.6 1 auto !important;
    flex-shrink: 0 !important;
    padding: 2px 6px !important;
    border-radius: 6px;
    box-sizing: border-box;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
  }
  body.theme-light .omni-kpi-capsule .metric-benefit-highlight {
    background: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
  }

  #hudBenefitMain {
    font-size: 11px !important;
    font-weight: 800;
    color: #059669 !important;
    letter-spacing: -0.02em;
    white-space: nowrap !important;
    line-height: 1.2;
  }
  body.theme-light #hudBenefitMain {
    color: #047857 !important;
  }

  .hud-benefit-subtext {
    display: none !important; /* メイン数値を堂々強調して文字溢れを防止 */
  }

  .hud-cost-subtext,
  .hud-speed-subtext,
  .hud-stops-subtext {
    font-size: 7.5px !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  /* 右側アクションボタングループ */
  .omni-actions-capsule {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  .omni-icon-btn {
    height: 30px;
    padding: 0 6px;
    font-size: 10px !important;
    font-weight: 700;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 3px;
  }
  #badgeConfigCustomStatus {
    padding: 1px 4px !important;
    font-size: 8.5px !important;
  }

  /* 画面幅 1400px 未満でのスマート最適化 */
  @media (max-width: 1400px) {
    .omni-kpi-capsule {
      padding: 2px 6px !important;
      gap: 3px !important;
    }
    .omni-kpi-capsule .hud-metric-label {
      font-size: 7.5px !important;
    }
    .omni-kpi-capsule .hud-metric-val {
      font-size: 11px !important;
    }
    #hudBenefitMain {
      font-size: 10px !important;
    }
    .hud-cost-subtext,
    .hud-speed-subtext,
    .hud-stops-subtext {
      font-size: 7px !important;
      letter-spacing: -0.04em !important;
    }
    .omni-icon-btn {
      padding: 0 4px !important;
      font-size: 9.5px !important;
    }
  }

  /* 画面幅 1100px 未満（iPad縦横・小型PC・タブレット等）での全アクションボタンの均整アイコン化 */
  @media (max-width: 1100px) {
    .omni-actions-capsule .hud-action-btn span {
      display: none !important;
    }
    .omni-actions-capsule .hud-action-btn {
      padding: 0 8px !important;
      min-width: 32px !important;
      height: 32px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 8px !important;
    }
  }
}

/* 2. パネル全画面格納モード (地図を広く見るモード) */
body.map-immersive-mode .hud-left-deck {
  transform: translateX(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}

body.map-immersive-mode .hud-right-deck {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

body.map-immersive-mode #btnTogglePanels {
  background: var(--tesla-red);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* 3. 左パネル：定番ルートチップ・入力欄・ボタンの大型化＆1列スタック化 */
.hud-left-deck {
  width: var(--left-deck-w, 415px);
}

.hud-right-deck {
  width: var(--right-deck-w, 425px);
}

.preset-routes-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}

.preset-section-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.primary-route-card .omni-presets-capsule {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

.preset-route-chip {
  padding: 6px 11px;
  font-size: 12px !important;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
}

.deck-eyebrow {
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.deck-title {
  font-size: 15.5px !important;
  font-weight: 800;
}

.quick-action-btn,
.micro-pill {
  font-size: 12px !important;
  padding: 5px 10px !important;
  min-height: 30px;
}

.route-point-top label,
.quick-field-veh label,
.quick-field-soc label,
.schedule-box label,
.priority-mode-box label,
.field-item label {
  font-size: 12px !important;
  font-weight: 700;
  color: var(--text-secondary);
}

.hud-select,
.hud-input,
.cyber-select,
.cyber-num,
.cyber-search-input {
  min-height: 40px;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 700;
}

/* 2列詰め込みを解消し、文字切れゼロの1列スタックに */
.primary-quick-row {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.schedule-priority-row {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.wheel-chip,
.break-chip {
  min-height: 32px;
  padding: 5px 10px !important;
  font-size: 12px !important;
}

.soc-step-btn,
.stepper-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: 16px !important;
}

.soc-slider-row strong,
.soc-label-row strong {
  font-size: 16px !important;
  min-width: 46px;
}

.priority-seg-btn,
.seg-item {
  min-height: 38px;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

.stay-charging-inline-row {
  padding: 10px 12px !important;
  font-size: 12.5px !important;
}

.stay-toggle-label {
  font-size: 12.5px !important;
}

/* 4. 右パネル：3プラン比較カードの大型化・ハイコントラスト化 */
.strategy-comparison-grid,
.strategy-cards-grid {
  gap: 8px;
}

.strategy-card {
  padding: 10px 10px !important;
  gap: 6px !important;
  border-width: 1.5px;
}

.strategy-card.active,
.strategy-card.selected {
  background: linear-gradient(145deg, rgba(227, 25, 55, 0.22), rgba(15, 23, 42, 0.95)) !important;
  border-color: #f43f5e !important;
  box-shadow: 0 6px 20px rgba(227, 25, 55, 0.28) !important;
}

.strat-badge {
  font-size: 12px !important;
  font-weight: 800;
}

.strat-active-mark {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--tesla-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.strat-metric span {
  font-size: 11.5px !important;
  color: var(--text-secondary);
}

.strat-metric strong {
  font-size: 16px !important;
  font-weight: 800;
}

.strat-diff-pill {
  margin-top: 2px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 700;
  color: #93c5fd;
  text-align: center;
}

/* 5. タイムライン：走行区間コネクタ (Leg Connector) と充電カードの整理 */
.timeline-leg-connector {
  position: relative;
  z-index: 1;
  margin: 2px 0 2px 12px;
  padding: 5px 12px;
  border-left: 2px dashed rgba(59, 130, 246, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 0 8px 8px 0;
}

/* [v4.5.2] タイムライン: IC移動・準備の明示と検算行 */
.timeline-ic-chip {
  font-size: 10.5px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

.timeline-stop-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 2px 0 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.07);
  border: 1px dashed rgba(56, 189, 248, 0.3);
  font-size: 10.5px;
  color: var(--text-secondary);
}

.timeline-breakdown-total {
  color: var(--text-primary);
  font-weight: 700;
}

.timeline-ic-return {
  margin: -2px 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fbbf24;
}

.timeline-gap-row {
  margin: 2px 0 2px 12px;
  padding: 5px 10px;
  border-left: 2px dashed rgba(168, 85, 247, 0.55);
  background: rgba(168, 85, 247, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.timeline-total-equation {
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(56, 189, 248, 0.10));
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.tte-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--neon-emerald);
  margin-bottom: 4px;
}

.tte-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
}

.tte-body strong {
  font-size: 13px;
  color: var(--neon-cyan);
}

.tte-op {
  font-weight: 800;
  color: var(--text-muted);
}

.tte-detail {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

body.theme-light .timeline-ic-chip {
  color: #b45309;
  background: #fef3c7;
  border-color: #fcd34d;
}

body.theme-light .timeline-stop-breakdown {
  background: #f0f9ff;
  border-color: #bae6fd;
}

body.theme-light .timeline-ic-return {
  color: #b45309;
}

body.theme-light .timeline-gap-row {
  background: #faf5ff;
  border-left-color: #c084fc;
}

body.theme-light .timeline-total-equation {
  background: linear-gradient(135deg, #ecfdf5, #e0f2fe);
  border-color: #6ee7b7;
}

body.theme-light .tte-title {
  color: #047857;
}

body.theme-light .tte-body strong {
  color: #0369a1;
}

.timeline-node-card,
.timeline-node {
  padding: 12px 14px !important;
  gap: 8px !important;
}

.node-title {
  font-size: 14.5px !important;
  font-weight: 800;
}

.node-sub-meta {
  font-size: 12px !important;
  color: var(--text-secondary);
  line-height: 1.45;
}

.node-eta-badge {
  font-size: 12px !important;
  padding: 4px 9px !important;
}

.node-soc-progress,
.soc-charge-bar-wrap {
  padding: 8px 10px !important;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--glass-border);
}

.soc-range-labels,
.soc-charge-labels {
  font-size: 13px !important;
}

.soc-bar-track,
.soc-visual-track {
  height: 10px !important;
}

.stop-adjust-details {
  margin-top: 6px;
  background: var(--surface-card, rgba(15, 23, 42, 0.75));
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.stop-adjust-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  user-select: none;
  outline: none;
}

/* [添付画像バグ修正] ライトモード時の高コントラスト・クリーンデザイン */
body.theme-light .stop-adjust-details {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.theme-light .stop-adjust-details summary {
  color: #0f172a !important;
}

body.theme-light .stop-adjust-details .break-style-pill-group span {
  color: #475569 !important;
  font-weight: 600 !important;
}

body.theme-light .stop-adjust-details .break-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.theme-light .stop-adjust-details .break-chip:hover,
body.theme-light .stop-adjust-details .break-chip.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

body.theme-light .stop-adjust-details .soc-label-row span {
  color: #334155 !important;
  font-weight: 600 !important;
}

body.theme-light .stop-adjust-details .soc-label-row strong {
  color: #0369a1 !important;
  font-weight: 700 !important;
}

body.theme-light .stop-adjust-details .stepper-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* ダークモード時の高コントラスト・サイバーデザイン */
body.theme-dark .stop-adjust-details {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

body.theme-dark .stop-adjust-details summary {
  color: #f1f5f9 !important;
}

body.theme-dark .stop-adjust-details .break-style-pill-group span {
  color: #94a3b8 !important;
}

body.theme-dark .stop-adjust-details .soc-label-row span {
  color: #cbd5e1 !important;
}

.stop-expert-details summary {
  font-size: 12px !important;
}

/* ==========================================================================
   v3.4 ULTIMATE DAY-FIRST (LIGHT MODE) & COMPACT HIGH-VISIBILITY OVERHAUL
   ========================================================================== */

/* 1. 左パネルを縦長スクロール地獄から解放するスマートグリッド調整 */
.primary-route-card {
  padding: 10px 12px !important;
  gap: 7px !important;
}

.preset-routes-section {
  gap: 4px !important;
  padding-bottom: 6px !important;
}

.primary-route-card .omni-presets-capsule {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
  padding: 0 !important;
}

.preset-route-chip {
  padding: 5px 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-align: center;
  justify-content: center;
}

/* 車種はフル幅で見やすく、残量と時刻はスマートに整理 */
.primary-quick-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding-top: 6px !important;
}

.schedule-priority-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin-top: 4px !important;
  padding: 8px 10px !important;
}

.schedule-box {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.hud-select,
.hud-input,
.cyber-select,
.cyber-num,
.cyber-search-input {
  min-height: 36px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.priority-seg-btn,
.seg-item {
  min-height: 34px !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* 2. 立ち寄り先アイテム行（インライン黒背景の廃止とクラス化） */
.waypoint-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.wp-index-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--neon-cyan);
  min-width: 42px;
}

.wp-remove-danger {
  color: #ef4444 !important;
}

.btn-add-waypoint {
  color: var(--neon-cyan) !important;
  font-weight: 800 !important;
}

/* 3. 3プラン比較カードの2列×2段メトリクス化（文字潰れ解消＆大型数値強調） */
.strategy-card {
  padding: 10px 12px !important;
  gap: 6px !important;
  border-width: 1.5px !important;
}

.strat-badge-rec {
  background: rgba(2, 132, 199, 0.15) !important;
  color: var(--neon-cyan) !important;
  border: 1px solid rgba(2, 132, 199, 0.4) !important;
  font-weight: 800 !important;
}

.strat-metrics-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 10px !important;
  padding-top: 6px !important;
  margin-top: 2px !important;
}

.strat-metric span {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.strat-metric strong {
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.strat-metric-primary strong {
  font-size: 16.5px !important;
  font-weight: 900 !important;
}

.strat-val-time {
  color: var(--tesla-red) !important;
}

.strat-val-cost {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   4. DAY THEME (body.theme-light) 全コンポーネント完全ライト化（黒背景残りの完全撲滅）
   ========================================================================== */

body.theme-light .leaflet-tile-pane {
  filter: contrast(1.08) brightness(1.01) saturate(1.1);
}

body.theme-light .leaflet-container,
body.theme-light .fullbleed-map-stage {
  background: #cbd5e1 !important;
}

/* 上部ヘッダー */
body.theme-light .omni-hud-header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08) !important;
}

body.theme-light .brand-main {
  color: #090d16 !important;
  font-weight: 900 !important;
}

body.theme-light .brand-sub {
  color: #1e293b !important;
}

body.theme-light .brand-tagline {
  color: #475569 !important;
}

body.theme-light .version-pill {
  background: #fee2e2 !important;
  color: #be123c !important;
  border: 1px solid #fda4af !important;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 11px;
}

body.theme-light .omni-kpi-capsule {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body.theme-light .hud-metric-label {
  color: #475569 !important;
}

body.theme-light .hud-metric-val {
  color: #090d16 !important;
}

body.theme-light .metric-highlight .hud-metric-val {
  color: #e11d48 !important;
}

body.theme-light .omni-icon-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

body.theme-light .omni-icon-btn:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

body.theme-light .omni-icon-btn.hud-btn-primary {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
}

/* 左右パネル・設定ドロワー */
body.theme-light .hud-left-deck,
body.theme-light .hud-right-deck,
body.theme-light .floating-config-deck {
  background: rgba(248, 250, 252, 0.96) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.14) !important;
}

body.theme-light .primary-route-card,
body.theme-light .config-col {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

body.theme-light .deck-eyebrow {
  color: #e11d48 !important;
}

body.theme-light .deck-title {
  color: #090d16 !important;
}

body.theme-light .solver-badge,
body.theme-light .chem-pill {
  background: #ecfdf5 !important;
  border: 1px solid #6ee7b7 !important;
  color: #047857 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* 定番モデルコースチップ */
body.theme-light .preset-section-label {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.theme-light .preset-route-chip {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}

body.theme-light .preset-route-chip:hover {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

body.theme-light .preset-route-chip.active {
  background: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

/* 入力欄・検索ボックス・セレクト・ボタン */
body.theme-light .nav-search-input-wrap {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
}

body.theme-light .cyber-search-input {
  background: transparent !important;
  border: none !important;
  color: #090d16 !important;
  box-shadow: none !important;
}

body.theme-light .cyber-select,
body.theme-light .cyber-num,
body.theme-light .hud-select,
body.theme-light .hud-input {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #090d16 !important;
}

body.theme-light .waypoint-item-row {
  background: #f0f9ff !important;
  border: 1.5px solid #7dd3fc !important;
}

/* 【重要修正】宿泊・普通充電パネル (.stay-config-panel) の黒背景解消 */
body.theme-light .stay-config-panel {
  background: #f0f9ff !important;
  border: 1.5px solid #7dd3fc !important;
  color: #090d16 !important;
  box-shadow: inset 0 1px 3px rgba(2, 132, 199, 0.08) !important;
}

body.theme-light .stay-panel-header {
  color: #0369a1 !important;
}

body.theme-light .stay-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
  font-weight: 800 !important;
}

body.theme-light .schedule-priority-row {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.theme-light .segmented-pill,
body.theme-light .wheel-size-toggle {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .seg-item,
body.theme-light .wheel-chip {
  color: #334155 !important;
}

body.theme-light .seg-item.active,
body.theme-light .wheel-chip.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.3) !important;
}

body.theme-light .quick-action-btn,
body.theme-light .cyber-mini-btn,
body.theme-light .stepper-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-light .quick-action-btn.primary {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

/* 高速道路ルート比較ボックス (.corridor-comparison-box) */
body.theme-light .corridor-comparison-box {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body.theme-light .corridor-option-btn {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #090d16 !important;
}

body.theme-light .corridor-option-btn.active {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.16) !important;
}

/* 【最重要修正】AI最適結論バナー (.verdict-card) のドス黒い背景を完全解消！ */
body.theme-light .verdict-card {
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%) !important;
  border: 2px solid #f43f5e !important;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.12) !important;
}

body.theme-light .verdict-headline {
  color: #881337 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.theme-light .verdict-detail {
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.theme-light .verdict-corridor-tag {
  color: #be123c !important;
  font-weight: 800 !important;
}

/* 3プラン比較カード */
body.theme-light .strategy-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

body.theme-light .strategy-card.active,
body.theme-light .strategy-card.selected {
  background: linear-gradient(145deg, #f0f9ff 0%, #ffffff 100%) !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.18) !important;
}

body.theme-light .strat-name {
  color: #090d16 !important;
  font-size: 13.5px !important;
}

body.theme-light .strat-metrics-row {
  border-top: 1px solid #e2e8f0 !important;
}

body.theme-light .strat-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .strat-badge-rec {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #f59e0b !important;
}

body.theme-light .strat-diff-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.theme-light .strategy-card.selected .strat-diff-pill {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}

/* 玄人向け詳細分析ドロワー＆内訳ボックス */
body.theme-light .expert-analysis-drawer {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

body.theme-light .tradeoff-matrix-box,
body.theme-light .energy-physics-breakdown-box,
body.theme-light .speed-sweetspot-box {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #090d16 !important;
}

/* 右パネル：タイムライン＆充電スポットカード */
body.theme-light .timeline-leg-connector {
  background: #e0f2fe !important;
  border-left: 3px dashed #0284c7 !important;
  border-top: 1px solid #bae6fd !important;
  border-bottom: 1px solid #bae6fd !important;
  border-right: 1px solid #bae6fd !important;
  color: #0369a1 !important;
  font-weight: 800 !important;
}

body.theme-light .timeline-node {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
}

body.theme-light .timeline-node.stop-sc {
  border-left: 4px solid #e11d48 !important;
}

body.theme-light .timeline-node.stop-sapa {
  border-left: 4px solid #059669 !important;
}

body.theme-light .timeline-node.node-endpoint {
  border-left: 4px solid #0284c7 !important;
}

/* 白飛びしていたSC/SAPAタグ・食事バッジ・マイクロピルの高コントラスト化 */
body.theme-light .node-Tag.sc {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border: 1px solid #fda4af !important;
  font-size: 11px !important;
}

body.theme-light .node-Tag.sapa {
  background: #d1fae5 !important;
  color: #047857 !important;
  border: 1px solid #6ee7b7 !important;
  font-size: 11px !important;
}

body.theme-light .meal-timing-pill {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #f59e0b !important;
  font-weight: 800 !important;
}

body.theme-light .micro-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.theme-light .btn-focus-charger-map {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
}

body.theme-light .soc-visual-track {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .soc-fill-arrival {
  background: #64748b !important;
}

body.theme-light .node-soc-progress,
body.theme-light .soc-charge-bar-wrap {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #090d16 !important;
}

body.theme-light .soc-range-labels,
body.theme-light .soc-charge-labels {
  color: #090d16 !important;
}

body.theme-light .break-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

body.theme-light .break-chip.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* 地図上の中央フローティングコントロール＆凡例カプセル */
body.theme-light .map-filter-capsule,
body.theme-light .map-soc-legend {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12) !important;
}

body.theme-light .map-filter-btn {
  color: #334155 !important;
}

body.theme-light .map-filter-btn.active,
body.theme-light .map-filter-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* 下部テレメトリグラフドック */
body.theme-light .bottom-telemetry-dock {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.1) !important;
}

body.theme-light .telemetry-tab {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.theme-light .telemetry-tab.active {
  background: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}

body.theme-light .telemetry-tab.active .tab-idx {
  color: #bae6fd !important;
}

body.theme-light .telemetry-chart-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

body.theme-light .chart-card-heading {
  color: #090d16 !important;
}

body.theme-light .chart-card-hint {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

body.theme-light .chart-card-footer {
  border-top-color: #e2e8f0 !important;
  color: #64748b !important;
}

body.theme-light .canvas-holder {
  background: rgba(241, 245, 249, 0.7) !important;
}

/* 共有モーダル (#exportModal) の黒背景潰れ解消 */
body.theme-light .cyber-modal-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #090d16 !important;
}

body.theme-light .cyber-action-card {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #090d16 !important;
}

body.theme-light .cyber-action-card.primary {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6) !important;
  border-color: #e11d48 !important;
  color: #881337 !important;
}

body.theme-light .tesla-safe-box {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
}

body.theme-light .tesla-qr-container {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .cyber-textarea {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #090d16 !important;
}

/* 【最重要修正】スマホ表示 (<= 768px) で昼間モードなのに背景が真っ黒になるバグを完全修正 */
@media (max-width: 768px) {
  body.theme-light .hud-left-deck,
  body.theme-light .hud-right-deck,
  body.theme-light .bottom-telemetry-dock {
    background: #f8fafc !important;
    color: #090d16 !important;
  }

  body.theme-light .mobile-nav-tabbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
  }

  body.theme-light .mobile-tab-btn {
    color: #475569 !important;
  }

  body.theme-light .mobile-tab-btn.active {
    background: #e0f2fe !important;
    color: #0284c7 !important;
  }
}

/* ==========================================================================
   v3.5 MULTI-COMPARE TABLES, AMENITY BADGES & HERO SUMMARY STYLES
   ========================================================================== */

.season-preset-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.season-preset-box label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--text-secondary);
}

#seasonPresetToggle {
  display: flex;
  width: 100%;
}

#seasonPresetToggle .seg-item {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 4px 1px;
  font-size: 9.5px;
  letter-spacing: -0.03em;
}

/* 3大比較テーブル (.v35-compare-table) */
.compare-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  overflow-x: auto;
}

.v35-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  text-align: left;
}

.v35-compare-table th {
  padding: 5px 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--glass-border-strong);
  white-space: nowrap;
}

.v35-compare-table td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-primary);
  vertical-align: middle;
}

.v35-compare-table tr.row-highlight-ev {
  background: rgba(2, 132, 199, 0.14);
}

body.theme-light .v35-compare-table tr.row-highlight-ev {
  background: #e0f2fe !important;
}

.v35-compare-table tr:hover {
  background: rgba(56, 189, 248, 0.08);
}

.cmp-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
}

.cmp-pill.pill-win {
  background: var(--neon-cyan);
  color: #ffffff;
}

.compare-insight-note {
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  border-left: 3px solid var(--neon-cyan);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

body.theme-light .compare-insight-note {
  background: #f0f9ff !important;
  border-left: 3px solid #0284c7 !important;
  color: #1e293b !important;
}

/* 周辺施設アメニティバッジ (.sc-amenities-row) */
.sc-amenities-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

.sc-amenity-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.sc-amenity-pill.amenity-direct {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--neon-emerald);
}

.sc-amenity-pill.amenity-exit {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--neon-amber);
}

body.theme-light .sc-amenity-pill {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.theme-light .sc-amenity-pill.amenity-direct {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

body.theme-light .sc-amenity-pill.amenity-exit {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #b45309 !important;
}

/* 右パネル最上部：ヒーローサマリー＆ナビ送信バー */
.hero-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--glass-border);
}

.hero-summary-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--neon-emerald);
  margin-bottom: 2px;
}

.hero-summary-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--text-primary);
}

.hero-summary-kpis small {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.hero-nav-btn {
  flex-shrink: 0;
  height: 34px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  border-radius: 99px !important;
  white-space: nowrap;
}

.hero-summary-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.btn-swap-backup {
  cursor: pointer;
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: var(--neon-amber) !important;
  font-weight: 800 !important;
}

body.theme-light .btn-swap-backup {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

/* ==========================================================================
   v3.7 UX & POLISH ENHANCEMENTS (凡例刷新・定番コースアコーディオン・費用内訳・経由地任意指定)
   ========================================================================== */

/* 1. 合計費用の内訳表記 */
.hud-cost-subtext {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  letter-spacing: -0.01em;
  margin-top: 1px;
  white-space: nowrap;
}
body.theme-light .hud-cost-subtext {
  color: #475569;
}

/* 2. 定番モデルコースの折りたたみアコーディオン */
.preset-accordion {
  margin-bottom: 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--glass-surface-subtle, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  transition: all 0.2s ease;
}
body.theme-light .preset-accordion {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.preset-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  outline: none;
  list-style: none;
}
.preset-accordion-summary::-webkit-details-marker {
  display: none;
}
.preset-accordion-summary:hover {
  background: var(--glass-surface-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #ffffff);
}
body.theme-light .preset-accordion-summary:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.preset-summary-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
.preset-selected-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--neon-cyan, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.3);
  margin-left: auto;
  margin-right: 6px;
}
body.theme-light .preset-selected-badge {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}
.preset-caret {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--text-muted, #64748b);
}
.preset-accordion[open] .preset-caret {
  transform: rotate(180deg);
}
.preset-accordion[open] {
  padding-bottom: 6px;
  border-color: var(--glass-border-strong, rgba(56, 189, 248, 0.3));
}
.preset-accordion .omni-presets-capsule {
  padding: 6px 8px 2px 8px;
  border: none;
  background: transparent;
}

/* 3. 充電器表示トグルと残量凡例の刷新 */
.filter-capsule-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  margin-right: 4px;
}
body.theme-light .filter-capsule-label {
  color: #475569;
}
.soc-grad-bars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legend-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #ffffff);
}
body.theme-light .legend-bar-item {
  color: #1e293b;
}
.grad-bar {
  display: inline-block;
  width: 14px;
  height: 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.b-high { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
.b-mid  { background: #38bdf8; box-shadow: 0 0 6px rgba(56, 189, 248, 0.4); }
.b-low  { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.b-crit { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

.charger-pill-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  line-height: 1.2;
}
.sc-pill {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
body.theme-light .sc-pill {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.sapa-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
body.theme-light .sapa-pill {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

/* 4. グラフ凡例バッジ（メイン実線 vs 比較破線） */
.chart-legend-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  margin-right: 6px;
  white-space: nowrap;
}
body.theme-light .chart-legend-badge {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* 5. 経由地任意指定のサジェストボックス & 入力UI明確化 */
.waypoint-item-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  margin-bottom: 6px;
  background: var(--glass-surface-subtle, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 7px);
  box-sizing: border-box;
}
body.theme-light .waypoint-item-row {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.wp-index-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--neon-amber, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}
body.theme-light .wp-index-badge {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}
.wp-search-wrap {
  position: relative;
  flex: 1 1 180px;
  min-width: 170px;
}
.wp-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid var(--glass-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: all 0.18s ease;
}
.wp-search-input:focus {
  border-color: var(--neon-cyan, #38bdf8) !important;
  background: rgba(56, 189, 248, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}
body.theme-light .wp-search-input {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  color: #090d16 !important;
}
body.theme-light .wp-search-input:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
}
.wp-select-stay {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  width: 112px !important;
  min-width: 112px !important;
  min-height: 32px !important;
  padding: 4px 24px 4px 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}
.waypoint-item-row .cyber-mini-btn {
  flex-shrink: 0 !important;
  min-width: 28px !important;
  height: 32px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-suggest-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: min(280px, 82vw);
  z-index: 1200;
  max-height: 220px;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid var(--glass-border-strong, rgba(56, 189, 248, 0.4));
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
  margin-top: 2px;
}
body.theme-light .wp-suggest-panel {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 4. 地図視点コントロール・ルート全景ボタン */
.map-view-capsule {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  background: var(--glass-surface-translucent, rgba(15, 23, 42, 0.8));
  border: 1px solid var(--glass-border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 99px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
body.theme-light .map-view-capsule {
  background: rgba(255, 255, 255, 0.92);
  border-color: #cbd5e1;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.map-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.map-view-btn:hover {
  background: var(--glass-surface-hover, rgba(56, 189, 248, 0.15));
  color: var(--neon-cyan, #38bdf8);
}
body.theme-light .map-view-btn {
  color: #334155;
}
body.theme-light .map-view-btn:hover {
  background: #e0f2fe;
  color: #0369a1;
}

/* 5. HUD上部巡航速度・到着時刻サブテキスト */
.hud-speed-subtext {
  font-size: 10px;
  font-weight: 600;
  color: var(--neon-cyan, #38bdf8);
  margin-top: 2px;
  white-space: nowrap;
}
body.theme-light .hud-speed-subtext {
  color: #0284c7;
}

.hud-stops-subtext {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  white-space: nowrap;
}
body.theme-light .hud-stops-subtext {
  color: #64748b;
}

/* 6. クイック設定ホイール選択セレクトボックス */
.quick-wheel-row select {
  height: 28px;
  line-height: 28px;
}
body.theme-light .quick-wheel-row select {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* =========================================================================
   v3.7.2 UX・操作性・目玉機能・現在地・免責スタイル
   ========================================================================= */

/* 1. ブランド免責注意書き */
.brand-disclaimer {
  font-size: 10.5px;
  color: var(--text-secondary, #94a3b8);
  margin: 1px 0 0;
  line-height: 1.3;
  font-weight: 500;
  opacity: 0.9;
}
body.theme-light .brand-disclaimer {
  color: #64748b;
}

/* 2. GPS現在地取得ボタン */
.geo-btn {
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--neon-cyan, #38bdf8) !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  white-space: nowrap;
  gap: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.geo-btn:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}
body.theme-light .geo-btn {
  color: #0369a1 !important;
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
}
body.theme-light .geo-btn:hover {
  background: #bae6fd !important;
  border-color: #38bdf8 !important;
}

/* 3. 目玉機能: 最速巡航速度一発適用ボタン */
.hero-speed-card-wrap {
  margin: 8px 0 6px;
}
.hero-speed-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(232, 33, 39, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
  border: 1.5px solid rgba(232, 33, 39, 0.35);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.hero-speed-btn:hover {
  background: linear-gradient(135deg, rgba(232, 33, 39, 0.14) 0%, rgba(6, 182, 212, 0.14) 100%);
  border-color: var(--tesla-red, #e82127);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 33, 39, 0.18);
}
.hero-speed-btn:active {
  transform: translateY(0);
}
body.theme-light .hero-speed-btn {
  background: linear-gradient(135deg, #fff5f5 0%, #f0fdfa 100%);
  border-color: #fca5a5;
  box-shadow: 0 2px 6px rgba(232, 33, 39, 0.08);
}
body.theme-light .hero-speed-btn:hover {
  background: linear-gradient(135deg, #fee2e2 0%, #ccfbf1 100%);
  border-color: #ef4444;
}
.hero-speed-bolt {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(232, 33, 39, 0.4));
}
.hero-speed-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hero-speed-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tesla-red, #e82127);
  letter-spacing: -0.2px;
}
.hero-speed-sub {
  font-size: 10px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
body.theme-light .hero-speed-sub {
  color: #64748b;
}
.hero-speed-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  background: linear-gradient(135deg, #e82127, #ff4d4d);
  color: #ffffff;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 5px rgba(232, 33, 39, 0.3);
}

/* 4. 強調再計算ボタン */
.accent-recalc {
  background: linear-gradient(135deg, #0284c7, #06b6d4) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
}
.accent-recalc:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* =========================================================================
   v3.8.0 USER VALUE & COST/TIME ROI SHOWCASE STYLES (Day & Night Adaptive)
   ========================================================================= */

/* 1. 上部HUD 5番目: ツール最適化メリット強調カプセル */
.metric-benefit-highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(56, 189, 248, 0.12) 100%);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  box-sizing: border-box;
}
body.theme-light .metric-benefit-highlight {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
  border-color: #6ee7b7;
}
#hudBenefitMain {
  color: #10b981;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.theme-light #hudBenefitMain {
  color: #047857;
}
.hud-benefit-subtext {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  margin-top: 1px;
  white-space: nowrap;
}
body.theme-light .hud-benefit-subtext {
  color: #475569;
}

/* 2. 目玉機能サブ: 最速モード vs 電費コスパモード 2択クイックチップ */
.speed-quick-switch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 5px;
}
.speed-mode-chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  background: rgba(15, 23, 42, 0.5);
  color: var(--text-secondary, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
.speed-mode-chip .speed-chip-sub,
.speed-mode-chip #lblChipEcoSave,
.speed-mode-chip #lblChipFastestTime {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.9;
  display: block;
}
.speed-mode-chip:hover {
  border-color: var(--neon-cyan, #38bdf8);
  color: var(--text-primary, #ffffff);
}
.speed-mode-chip.active {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
  color: #34d399;
  font-weight: 800;
}
body.theme-light .speed-mode-chip {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}
body.theme-light .speed-mode-chip:hover {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0f172a;
}
body.theme-light .speed-mode-chip.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}

/* 3. 左パネル: このツールの最適化メリット (Before -> After 比較＆お財布提案カード) */
.value-showcase-card {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(14, 165, 233, 0.1) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
body.theme-light .value-showcase-card {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
  border-color: #34d399;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.1);
}
.value-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.value-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
}
body.theme-light .value-eyebrow {
  color: #047857;
}
.value-plan-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
  white-space: nowrap;
}
body.theme-light .value-plan-pill {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}
.value-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.value-kpi-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.theme-light .value-kpi-item {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.vk-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 2px;
}
body.theme-light .vk-label {
  color: #475569;
}
.vk-main {
  font-size: 15px;
  font-weight: 900;
  color: #34d399;
  line-height: 1.25;
}
.vk-main strong {
  font-size: 17px;
  font-family: var(--font-mono, monospace);
}
body.theme-light .vk-main {
  color: #047857;
}
.kpi-cost-win .vk-main {
  color: #fbbf24;
}
body.theme-light .kpi-cost-win .vk-main {
  color: #b45309;
}
.vk-sub {
  font-size: 10.5px;
  color: var(--text-secondary, #cbd5e1);
  margin-top: 3px;
  line-height: 1.35;
}
body.theme-light .vk-sub {
  color: #334155;
}
.smart-saver-row {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(16, 185, 129, 0.35);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.theme-light .smart-saver-row {
  border-top-color: #6ee7b7;
}
.smart-saver-title {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-secondary, #cbd5e1);
}
body.theme-light .smart-saver-title {
  color: #1e293b;
}
.smart-saver-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.smart-saver-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fcd34d;
  cursor: pointer;
  transition: all 0.15s ease;
}
.smart-saver-chip:hover {
  background: rgba(245, 158, 11, 0.28);
  transform: translateY(-1px);
}
body.theme-light .smart-saver-chip {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
body.theme-light .smart-saver-chip:hover {
  background: #fef3c7;
  border-color: #d97706;
}
.smart-saver-applied {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
body.theme-light .smart-saver-applied {
  background: #d1fae5;
  color: #065f46;
}

/* 4. 右パネル: 旅程ヒーローサマリー特典リボン ＆ 各充電ストップの時短・節約コールアウト */
.hero-benefit-ribbon {
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-size: 11.5px;
  color: var(--text-primary, #f8fafc);
  line-height: 1.4;
}
body.theme-light .hero-benefit-ribbon {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.stop-benefit-callout {
  margin: 6px 0;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.1);
  border-left: 3px solid #10b981;
  font-size: 11px;
  color: var(--text-primary, #f1f5f9);
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
body.theme-light .stop-benefit-callout {
  background: #f0fdf4;
  border-left-color: #059669;
  color: #0f172a;
}
.benefit-sub-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  white-space: nowrap;
}
body.theme-light .benefit-sub-tag {
  background: #dcfce7;
  color: #166534;
}

.speed-opt-summary-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 10px auto 0 auto;
  max-width: 1040px;
  width: 100%;
  padding: 6px 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 2;
  clear: both;
}
.speed-summary-card {
  flex: 1;
  min-width: 120px;
  scroll-snap-align: start;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: relative;
}
body.theme-light .speed-summary-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.speed-summary-card.is-sweet-spot {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(220, 38, 38, 0.06) 100%);
  border: 1.5px solid #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}
body.theme-light .speed-summary-card.is-sweet-spot {
  background: #fef2f2;
  border-color: #ef4444;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}
.speed-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
}
.speed-card-speed {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}
.speed-card-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  white-space: nowrap;
  flex-shrink: 0;
}
body.theme-light .speed-card-badge {
  background: #fee2e2;
  color: #b91c1c;
}
.speed-card-time {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.speed-summary-card.is-sweet-spot .speed-card-time {
  color: #ef4444;
  font-size: 14px;
}
body.theme-light .speed-summary-card.is-sweet-spot .speed-card-time {
  color: #dc2626;
}
.speed-card-diff {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
}
.speed-card-note {
  font-size: 9.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ============================================================================
   v3.9.0 SMARTPHONE FIRST-VIEW UX & BEFORE/AFTER ROI SHOWCASE ENHANCEMENTS
   ============================================================================ */

/* 1. ファーストビュー速報バー (#quickResultSummaryBar) */
.quick-result-summary-bar {
  margin: 8px 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(2, 132, 199, 0.14) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
body.theme-light .quick-result-summary-bar {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}
.qrs-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.qrs-plan-name {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-primary);
}
.qrs-plan-name small {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
}
.qrs-benefit-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
}
body.theme-light .qrs-benefit-pill {
  background: #d1fae5;
  color: #065f46;
  border-color: #34d399;
}
.qrs-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.qrs-metric {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
}
body.theme-light .qrs-metric {
  background: #ffffff;
  border-color: #cbd5e1;
}
.qrs-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
.qrs-val {
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
}
.qrs-val.cost {
  color: #f43f5e;
}
body.theme-light .qrs-val.cost {
  color: #e11d48;
}
.qrs-val.time {
  color: var(--text-primary);
}
.qrs-sub {
  font-size: 9.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qrs-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 480px) {
  .qrs-actions-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}
.qrs-jump-btn {
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-primary);
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
  transition: all 0.15s ease;
}
.qrs-jump-btn.primary {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  border-color: #0284c7;
  color: #ffffff;
}
body.theme-light .qrs-jump-btn {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
}
body.theme-light .qrs-jump-btn.primary {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #0369a1;
  color: #ffffff;
}

/* 2. 詳細スケジュール・季節・宿泊設定のスマート折りたたみ (.quick-subconfig-accordion) */
.quick-subconfig-accordion {
  margin: 6px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
body.theme-light .quick-subconfig-accordion {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.quick-subconfig-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-primary);
}
.quick-subconfig-summary::-webkit-details-marker {
  display: none;
}
.q-sub-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(56, 189, 248, 0.14);
  color: var(--neon-cyan);
  border: 1px solid rgba(56, 189, 248, 0.3);
  margin-left: auto;
  white-space: nowrap;
}
body.theme-light .q-sub-badge {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}
.quick-subconfig-body {
  padding: 6px 10px 10px;
  border-top: 1px solid var(--glass-border);
}
body.theme-light .quick-subconfig-body {
  border-top-color: #e2e8f0;
}

/* 3. Before ➔ After 視覚比較バー & 3大最適化カラクリ内訳 (#valueShowcaseCard 内) */
.vk-ba-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}
.vk-ba-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}
.ba-tag {
  width: 66px;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
.ba-tag.win {
  color: #10b981;
  font-weight: 800;
}
body.theme-light .ba-tag.win {
  color: #047857;
}
.ba-track {
  flex: 1;
  height: 7px;
  background: rgba(148, 163, 184, 0.22);
  border-radius: 99px;
  overflow: hidden;
}
body.theme-light .ba-track {
  background: #e2e8f0;
}
.ba-fill {
  height: 100%;
  background: #94a3b8;
  border-radius: 99px;
}
.ba-fill.win-time {
  background: linear-gradient(90deg, #10b981, #06b6d4);
}
.ba-fill.win-cost {
  background: linear-gradient(90deg, #f59e0b, #10b981);
}
.ba-val {
  min-width: 52px;
  text-align: right;
  font-size: 10px;
  color: var(--text-secondary);
}
.vk-ba-row.after .ba-val {
  color: var(--text-primary);
  font-weight: 800;
}

.value-breakdown-pills {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(16, 185, 129, 0.35);
}
body.theme-light .value-breakdown-pills {
  border-top-color: #6ee7b7;
}
.vb-pill {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-light .vb-pill {
  background: rgba(255, 255, 255, 0.85);
  border-color: #cbd5e1;
}
.vb-icon {
  font-size: 13px;
  line-height: 1.2;
  flex-shrink: 0;
}
.vb-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10.5px;
  line-height: 1.35;
}
.vb-text strong {
  color: var(--text-primary);
  font-weight: 800;
}
.vb-text span {
  color: var(--text-secondary);
  font-size: 10px;
}

/* 4. 速度別カードの選択中ハイライト & タップヒント */
.speed-summary-card.is-current-speed {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}
.speed-card-tap-hint {
  font-size: 9px;
  font-weight: 700;
  color: var(--neon-cyan);
  opacity: 0.85;
}
body.theme-light .speed-card-tap-hint {
  color: #0284c7;
}

/* 5. スマホ用ミニマップツールバー（PCでは非表示） */
.mobile-minimap-toolbar {
  display: none;
}

/* 6. スマホ（<= 768px）上部HUDの2段Bentoグリッド化＆ミニマップ最適化 */
@media (max-width: 768px) {
  /* 上部KPIカプセルを「4列主要KPI + 下段フル幅メリット強調バー」の2段構成にして豆粒文字と内訳消失を完全解消 */
  .omni-kpi-capsule {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    overflow-x: visible !important;
  }
  .omni-kpi-capsule .hud-divider {
    display: none !important;
  }
  .omni-kpi-capsule .hud-metric {
    min-width: 0 !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body.theme-light .omni-kpi-capsule .hud-metric {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
  }
  .omni-kpi-capsule .hud-metric-label {
    font-size: 7px !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  .omni-kpi-capsule .hud-metric-val {
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-align: center !important;
  }
  /* 充電＋高速内訳と巡航速度・距離内訳をスマホでも見切れ・重なりゼロで折り返し表示 */
  .omni-kpi-capsule .hud-cost-subtext,
  .omni-kpi-capsule .hud-speed-subtext,
  .omni-kpi-capsule .hud-dist-subtext,
  .omni-kpi-capsule .hud-stops-subtext {
    display: block !important;
    font-size: 6.8px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  /* 5番目の「🎁 ツール最適化メリット」を下段4列ぶち抜き（横幅100%）で大きく強調！ */
  .omni-kpi-capsule .metric-benefit-highlight {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 8px !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(2, 132, 199, 0.18) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
  }
  body.theme-light .omni-kpi-capsule .metric-benefit-highlight {
    background: linear-gradient(135deg, #d1fae5 0%, #e0f2fe 100%) !important;
    border-color: #10b981 !important;
  }
  #hudBenefitMain {
    font-size: 11.5px !important;
    font-weight: 900 !important;
  }
  .hud-benefit-subtext {
    display: none !important;
  }

  /* スマホミニマップ高さを20dvh (130〜160px) にスリム統一し、下部カードのファーストビュー領域を拡大 */
  body.mobile-view-route #mapContainer.fullbleed-map-stage,
  body.mobile-view-timeline #mapContainer.fullbleed-map-stage {
    position: relative !important;
    height: 20dvh !important;
    min-height: 128px !important;
    max-height: 165px !important;
    transition: height 0.2s ease, min-height 0.2s ease;
  }
  body.mobile-minimap-compact.mobile-view-route #mapContainer.fullbleed-map-stage,
  body.mobile-minimap-compact.mobile-view-timeline #mapContainer.fullbleed-map-stage {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }

  /* ミニマップ直下のサイズ切替＆全画面マップ移動バー */
  body.mobile-view-route .mobile-minimap-toolbar,
  body.mobile-view-timeline .mobile-minimap-toolbar {
    display: flex !important;
    order: 2 !important;
    pointer-events: auto !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 5px 10px;
    background: var(--glass-surface-elevated);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    z-index: 12;
  }
  body.theme-light .mobile-minimap-toolbar {
    background: #f1f5f9 !important;
    border-bottom-color: #cbd5e1 !important;
  }
  .minimap-tool-btn {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 99px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.14s ease;
  }
  .minimap-tool-btn.primary {
    color: var(--neon-cyan);
    border-color: rgba(56, 189, 248, 0.4);
  }
  body.theme-light .minimap-tool-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
  }
  body.theme-light .minimap-tool-btn.primary {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
  }

  /* スマホ時は value-kpi-grid を1列にして Before->After バーが横幅いっぱいで見やすくなるように最適化 */
  .value-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* 7. 超小型スマホ（iPhone SE等 <= 380px）でのsegmented-pill（季節・優先モード）＆HUDラベル完全フィット */
@media (max-width: 380px) {
  .segmented-pill {
    padding: 2px !important;
    gap: 2px !important;
  }
  .segmented-pill .seg-item {
    padding: 3px 4px !important;
    font-size: 9.5px !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }
  .omni-kpi-capsule .hud-metric-label {
    font-size: 6.5px !important;
    letter-spacing: -0.05em !important;
  }
}

/* =========================================================================
   8. TARIFFS & CHARGING COST ARCHITECTURE ENHANCEMENTS (v3.9.4)
   ========================================================================= */

/* HUD Header Cost Detail Pill */
.hud-metric-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.hud-cost-detail-pill {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.hud-cost-detail-pill:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: #10b981;
  transform: translateY(-1px);
}
body.theme-light .hud-cost-detail-pill {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

/* Detailed Config Deck Tariffs Section */
.config-deck-tariffs-strip {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-light .config-deck-tariffs-strip {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.tariffs-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.tariffs-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tariffs-sub-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

.accent-cost-btn {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.25)) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #34d399 !important;
  font-weight: 700;
}
body.theme-light .accent-cost-btn {
  background: #ecfdf5 !important;
  border-color: #34d399 !important;
  color: #065f46 !important;
}

.tariffs-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 1200px) {
  .tariffs-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tariffs-cards-grid {
    grid-template-columns: 1fr;
  }
}

.tariff-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
}
body.theme-light .tariff-card {
  background: rgba(15, 23, 42, 0.02);
}
.tariff-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
body.theme-light .tariff-card:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

.tariff-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tariff-card-head h4 {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.tariff-icon {
  font-size: 18px;
}

.tariff-rule-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 42, 50, 0.15);
  color: #ff4d55;
  border: 1px solid rgba(255, 42, 50, 0.3);
}
.tariff-rule-badge.sapa {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}
.tariff-rule-badge.home {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}
.tariff-rule-badge.gas {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.tariff-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 8px 0;
  flex: 1;
}

.tariff-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.preset-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.preset-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}
.preset-chip.active {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  font-weight: 700;
}
body.theme-light .preset-chip {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
body.theme-light .preset-chip.active {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
}

.tariff-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tariff-input-row label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.tariff-input-row .cyber-num {
  width: 72px;
  padding: 3px 6px;
  font-size: 12px;
  text-align: right;
}

.tariff-rules-knowledge-callout {
  display: flex;
  gap: 10px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius-card);
  padding: 9px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}
body.theme-light .tariff-rules-knowledge-callout {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #334155;
}
.tariff-rules-knowledge-callout .callout-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.tariff-rules-knowledge-callout ul {
  margin: 4px 0 0 0;
  padding-left: 18px;
}
.tariff-rules-knowledge-callout li {
  margin-bottom: 2px;
}
.tariff-rules-knowledge-callout code {
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* Stop Charge Cost Highlight Badge in Timeline Cards */
.stop-charge-cost-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 6px;
  padding: 4px 9px;
  margin: 6px 0 4px 0;
}
body.theme-light .stop-charge-cost-highlight {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.stop-charge-cost-highlight .cost-badge {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
}
.stop-charge-cost-highlight .cost-badge strong {
  color: #10b981;
  font-size: 13.5px;
  font-family: var(--font-mono);
}
.stop-charge-cost-highlight .cost-formula-badge {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* Cost Breakdown Modal Styling */
.cost-breakdown-card {
  max-width: 680px !important;
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
}
.cost-modal-section {
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 12px 14px;
}
body.theme-light .cost-modal-section {
  background: rgba(15, 23, 42, 0.02);
}
.cost-modal-section h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 6px;
}
.cost-table th {
  text-align: left;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-weight: 700;
  border-bottom: 1px solid var(--glass-border);
}
body.theme-light .cost-table th {
  background: #f1f5f9;
  color: #475569;
}
.cost-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
body.theme-light .cost-table td {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
.cost-table tr:last-child td {
  border-bottom: none;
}
.cost-table .mono {
  font-family: var(--font-mono);
}
.cost-formula-box {
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid #38bdf8;
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  line-height: 1.5;
  margin: 6px 0;
  color: var(--text-secondary);
}
body.theme-light .cost-formula-box {
  background: #f8fafc;
  border-left-color: #0284c7;
  color: #334155;
}
.btn-open-cost-breakdown-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-open-cost-breakdown-inline:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
}
body.theme-light .btn-open-cost-breakdown-inline {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

/* ============================================================================
   スピード別所要時間・詳細内訳（走行短縮 vs 充電増＋寄り道ロス）スタイル
   ============================================================================ */
.speed-tradeoff-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.speed-stack-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid var(--glass-border);
}
body.theme-light .speed-stack-legend {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.dot-drive { background: #38bdf8; }
.dot-charge { background: #10b981; }
.dot-exit { background: #f59e0b; }

.speed-stack-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 90px;
}
.speed-stack-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
body.theme-light .speed-stack-bar {
  background: #e2e8f0;
}
.stack-seg {
  height: 100%;
}
.stack-seg-drive { background: #38bdf8; }
.stack-seg-charge { background: #10b981; }
.stack-seg-exit { background: #f59e0b; }

.diff-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.diff-badge-gain {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.diff-badge-loss {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.diff-badge-best {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid #38bdf8;
}
.verdict-text-inline {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* ============================================================================
   夜間モード（ダークテーマ）高視認性・コントラスト最適化スタイル (v3.9.7)
   適用対象: body.theme-dark および body:not(.theme-light)
   ============================================================================ */

/* 1. バッジ（視認性向上） */
body.theme-dark .strat-badge,
body:not(.theme-light) .strat-badge,
body.theme-dark .q-sub-badge,
body:not(.theme-light) .q-sub-badge,
body.theme-dark .solver-badge,
body:not(.theme-light) .solver-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

body.theme-dark .strat-badge-rec,
body:not(.theme-light) .strat-badge-rec {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

/* 2. 補足ラベル・説明文・メタ情報 */
body.theme-dark .strat-metric span,
body:not(.theme-light) .strat-metric span,
body.theme-dark .verdict-detail,
body:not(.theme-light) .verdict-detail,
body.theme-dark .corridor-header,
body:not(.theme-light) .corridor-header,
body.theme-dark .corridor-opt-meta,
body:not(.theme-light) .corridor-opt-meta,
body.theme-dark .qrs-sub,
body:not(.theme-light) .qrs-sub,
body.theme-dark .qrs-lbl,
body:not(.theme-light) .qrs-lbl,
body.theme-dark .hero-speed-sub,
body:not(.theme-light) .hero-speed-sub,
body.theme-dark .quick-field-veh label,
body:not(.theme-light) .quick-field-veh label,
body.theme-dark .quick-soc-head label,
body:not(.theme-light) .quick-soc-head label,
body.theme-dark .tradeoff-row span,
body:not(.theme-light) .tradeoff-row span,
body.theme-dark .schedule-summary-sub,
body:not(.theme-light) .schedule-summary-sub,
body.theme-dark .timeline-stop-meta,
body:not(.theme-light) .timeline-stop-meta,
body.theme-dark .round-trip-kpi-sub,
body:not(.theme-light) .round-trip-kpi-sub {
  color: #cbd5e1 !important;
}

/* 3. シアン強調・アイブロウ */
body.theme-dark .accent-cyan,
body:not(.theme-light) .accent-cyan,
body.theme-dark .deck-eyebrow,
body:not(.theme-light) .deck-eyebrow {
  color: #38bdf8 !important;
}

/* 4. 右パネル・タイムライン・到着時刻・充電スポットカードの視認性確保 */
body.theme-dark .timeline-node,
body:not(.theme-light) .timeline-node {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #f8fafc !important;
}

body.theme-dark .timeline-node .node-time,
body:not(.theme-light) .timeline-node .node-time,
body.theme-dark .tactical-stop-card .stop-time,
body:not(.theme-light) .tactical-stop-card .stop-time {
  color: #38bdf8 !important;
  font-weight: 800 !important;
}

body.theme-dark .timeline-leg-connector,
body:not(.theme-light) .timeline-leg-connector {
  background: rgba(15, 23, 42, 0.6) !important;
  border-left: 2px dashed rgba(56, 189, 248, 0.45) !important;
  color: #94a3b8 !important;
}

body.theme-dark .tactical-stop-card,
body:not(.theme-light) .tactical-stop-card {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.theme-dark .tactical-stop-card:hover,
body:not(.theme-light) .tactical-stop-card:hover {
  border-color: rgba(56, 189, 248, 0.5) !important;
}

body.theme-dark .tactical-stop-card .stop-name,
body:not(.theme-light) .tactical-stop-card .stop-name {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
}

body.theme-dark .tactical-stop-card .stop-details,
body:not(.theme-light) .tactical-stop-card .stop-details {
  color: #cbd5e1 !important;
}

body.theme-dark .speed-stack-legend,
body:not(.theme-light) .speed-stack-legend {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}


/* ============================================================================
   v4.1.0 速度×空気抵抗 解説カード（ライト／ダーク両テーマで読みやすい配色）
   ============================================================================ */
.spd-physics-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.30);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.spd-physics-card .spc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 6px;
}
.spd-physics-card .spc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.spd-physics-card .spc-formula {
  font-size: 11px;
  font-weight: 600;
  color: #7dd3fc;
}
.spd-physics-card .spc-body {
  font-size: 11.5px;
  line-height: 1.6;
  color: #e2e8f0;
  margin: 0 0 8px 0;
}
.spd-physics-card .spc-body strong { color: #ffffff; }
.spd-physics-card .spc-chips {
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
}
.spd-physics-card .spc-c-eco  { color: #38bdf8; }
.spd-physics-card .spc-c-base { color: #34d399; }
.spd-physics-card .spc-c-120  { color: #fbbf24; }
.spd-physics-card .spc-c-over { color: #f87171; }
.spc-hint { font-size: 10px; color: var(--neon-cyan); }

body.theme-light .spd-physics-card {
  background: #f1f5f9;
  border-color: #94a3b8;
}
body.theme-light .spd-physics-card .spc-title { color: #0f172a; }
body.theme-light .spd-physics-card .spc-formula { color: #075985; }
body.theme-light .spd-physics-card .spc-body { color: #1e293b; }
body.theme-light .spd-physics-card .spc-body strong { color: #0f172a; }
body.theme-light .spd-physics-card .spc-c-eco  { color: #075985; }
body.theme-light .spd-physics-card .spc-c-base { color: #065f46; }
body.theme-light .spd-physics-card .spc-c-120  { color: #92400e; }
body.theme-light .spd-physics-card .spc-c-over { color: #991b1b; }
body.theme-light .spc-hint { color: #0369a1; }

/* 制限速度(120km/h)超過の参考表示行・カード */
.spd-compare-row.spd-row-over-limit { opacity: 0.78; }
.spd-compare-row.spd-row-over-limit:hover { background: transparent; }
.speed-summary-card.is-over-limit { opacity: 0.82; border-style: dashed; }

@media (max-width: 768px) {
  .spd-physics-card .spc-chips { flex-direction: column; gap: 3px; }
}

/* ==========================================================================
   [v4.3.0 / 2026-10-21] エッジケース・UI/UX 完全改修オーバーライド
   ========================================================================== */

/* 1-1 バツ印アイコン（SVG） */
.x-icon { display: inline-block; vertical-align: middle; pointer-events: none; }
.nav-clear-btn, .icon-close-btn, .wp-btn-remove, .alert-dismiss-btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* 1-2 サジェスト行：Flexで重なり排除 */
.nav-sug-item, .wp-suggest-panel .nav-sug-item {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px !important; position: static !important; min-width: 0;
}
.nav-sug-item > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-sug-item > span { position: static !important; flex-shrink: 0; white-space: nowrap; }

/* 1-3 上部HUDカード：文字切れ防止 */
.omni-kpi-capsule .hud-metric { min-width: max-content; flex-shrink: 0; }
.omni-kpi-capsule .hud-metric-label,
.omni-kpi-capsule .hud-metric-val,
.omni-kpi-capsule .hud-stops-subtext,
.omni-kpi-capsule .hud-benefit-subtext,
.omni-kpi-capsule .hud-cost-subtext,
.omni-kpi-capsule .hud-speed-subtext {
  overflow: visible !important; text-overflow: clip !important;
}
.omni-kpi-capsule .hud-metric-label { white-space: nowrap; }
.omni-kpi-capsule .metric-benefit-highlight .hud-metric-val { white-space: normal; }

/* 1-4 目的地タイトル折り返し */
.node-top-bar .node-title, .node-title {
  white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere;
  overflow: visible !important; text-overflow: clip !important; min-width: 0; flex: 1 1 auto;
}

/* 1-5 詳細設定セレクトボックス幅 */
.split-controls-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.floating-config-deck .cyber-select, .split-controls-3 .cyber-select {
  width: 100%; min-width: 0; padding-right: 28px; text-overflow: clip;
}

/* 2-3 常時表示の出発時刻（時刻末尾 08:00 の見切れ防止） */
.quick-field-dep { display: flex; flex-direction: column; gap: 2px; min-width: 112px; flex-shrink: 0; }
.quick-field-dep input[type="time"] { width: 100%; min-width: 112px; padding-left: 6px !important; padding-right: 4px !important; font-size: 12px !important; }

/* 2-4 カスタム中バッジ・片道注釈 */
.hud-custom-active-badge {
  margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 800; border-radius: 99px;
  background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.5);
  white-space: nowrap;
}
.hud-custom-active-badge.hidden { display: none !important; }
.stay-oneway-note { display: none; margin: 4px 0 6px; font-size: 10.5px; color: var(--text-secondary); }
.stay-config-panel.oneway-muted .stay-oneway-note { display: block; }
.stay-config-panel.oneway-muted .stay-inputs-grid,
.stay-config-panel.oneway-muted .stay-preset-chips { opacity: 0.55; }

/* 2-5 右パネル折りたたみ */
.deck-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deck-toggle-btn { white-space: nowrap; }
.hud-right-deck.collapsed > *:not(.deck-section-header) { display: none !important; }
.hud-right-deck.collapsed { max-height: 56px !important; min-height: 0 !important; overflow: hidden !important; }
.hud-right-deck.collapsed .deck-title { display: none; }

/* 4-4 低残量警告バナー（絶対配置による文字重なりを完全解消） */
.low-soc-alert-banner {
  position: relative;
  margin: 6px auto 4px auto;
  z-index: 100;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 680px);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  background: rgba(127, 29, 29, 0.96);
  color: #fee2e2;
  border: 1px solid #f87171;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.low-soc-alert-banner.hidden {
  display: none !important;
}
.low-soc-alert-banner .alert-text {
  flex: 1;
  pointer-events: auto !important;
}
.low-soc-alert-banner .alert-dismiss-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  pointer-events: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  transition: all 0.2s ease;
}
.low-soc-alert-banner .alert-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}
.low-soc-alert-banner .alert-dismiss-btn:active {
  transform: scale(0.95);
}
.low-soc-alert-banner .alert-dismiss-btn svg {
  pointer-events: none;
}
body.theme-light .low-soc-alert-banner {
  background: #fef2f2;
  color: #991b1b;
  border-color: #ef4444;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.2);
}
body.theme-light .low-soc-alert-banner .alert-dismiss-btn {
  background: rgba(153, 27, 27, 0.08);
  border: 1px solid rgba(153, 27, 27, 0.2);
  color: #991b1b;
}
body.theme-light .low-soc-alert-banner .alert-dismiss-btn:hover {
  background: rgba(153, 27, 27, 0.18);
}

/* [v4.4.0] 新型130kWチャデモ・SoC推奨バッジ・文字切れ完全防止 */
.soc-guide-badge:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.soc-guide-badge:active {
  transform: translateY(0);
}
.brand-nav-links {
  display: none !important;
}
.omni-kpi-capsule {
  gap: 8px !important;
  flex: 1 1 auto;
  justify-content: space-around;
  overflow-x: auto !important;
  scrollbar-width: none;
}
.omni-kpi-capsule::-webkit-scrollbar {
  display: none;
}
.omni-kpi-capsule .hud-metric {
  min-width: max-content !important;
  flex: 0 0 auto !important;
  padding: 0 4px !important;
  overflow: hidden !important;
}
.omni-kpi-capsule .hud-metric.metric-highlight {
  min-width: max-content !important;
}
.omni-kpi-capsule .metric-benefit-highlight {
  min-width: max-content !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}
.omni-kpi-capsule .hud-metric-val {
  white-space: nowrap !important;
}
.omni-kpi-capsule .hud-cost-subtext,
.omni-kpi-capsule .hud-speed-subtext,
.omni-kpi-capsule .hud-dist-subtext,
.omni-kpi-capsule .hud-stops-subtext {
  white-space: nowrap !important;
  font-size: 9.5px !important;
}
.omni-kpi-capsule .hud-cost-detail-pill {
  padding: 1px 6px;
  font-size: 9.5px;
  white-space: nowrap;
}
.hud-custom-active-badge {
  padding: 1px 6px !important;
  font-size: 9.5px !important;
  white-space: nowrap !important;
}
.omni-actions-capsule {
  gap: 4px !important;
  flex-shrink: 0;
}
.omni-icon-btn {
  padding: 0 7px !important;
  font-size: 10.5px !important;
}

/* ==========================================================================
   [v5.0] ワンタップ人気スポット・クイックチップ & 車種実走航続距離バッジ
   ========================================================================== */
.quick-chips-container {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-chips-category {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.quick-chips-cat-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 4px;
}
.quick-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.quick-chip-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.quick-chip-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  transform: translateY(-1px);
}
.theme-light .quick-chip-btn {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1e293b;
}
.theme-light .quick-chip-btn:hover {
  background: rgba(2, 132, 199, 0.12);
  border-color: rgba(2, 132, 199, 0.4);
  color: #0284c7;
}

/* 車種航続距離比較バッジ */
.vehicle-range-badge {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.09);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--text-primary, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.theme-light .vehicle-range-badge {
  background: rgba(2, 132, 199, 0.07);
  border-color: rgba(2, 132, 199, 0.22);
  color: #0f172a;
}
.vehicle-range-badge .wltc-val {
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.theme-light .vehicle-range-badge .wltc-val {
  color: #0284c7;
}
.vehicle-range-badge .real-val {
  color: #10b981;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.theme-light .vehicle-range-badge .real-val {
  color: #059669;
}

/* ==========================================================================
   [v5.0] 初心者向け結論ヒーローサマリー & プロ解析テレメトリ
   ========================================================================== */
.hero-verdict-summary {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(16, 185, 129, 0.14) 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary, #f1f5f9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: block;
}
.theme-light .hero-verdict-summary {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(2, 132, 199, 0.35);
  color: #0f172a;
}

/* スキップボタン */
.btn-skip-sc {
  background: rgba(244, 63, 94, 0.12) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  color: #fb7185 !important;
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  border-radius: 5px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-skip-sc:hover {
  background: rgba(244, 63, 94, 0.25) !important;
  border-color: rgba(244, 63, 94, 0.6) !important;
  color: #fff !important;
}

/* プロ解析・テレメトリスタイル */
.pro-telemetry-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pro-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.energy-4comp-stack {
  height: 22px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
  margin-bottom: 8px;
}
.energy-stack-seg {
  height: 100%;
  transition: width 0.3s ease;
  position: relative;
}
.energy-stack-seg.aero { background: #38bdf8; }
.energy-stack-seg.rolling { background: #f59e0b; }
.energy-stack-seg.grade { background: #ec4899; }
.energy-stack-seg.hvac { background: #10b981; }

.energy-4comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}
.energy-comp-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-light .energy-comp-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.energy-comp-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
}
.energy-comp-val {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #f1f5f9);
}
.theme-light .energy-comp-val {
  color: #0f172a;
}
.energy-comp-sub {
  font-size: 9.5px;
  color: var(--text-muted, #64748b);
}

.pro-table-wrap {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-light .pro-table-wrap {
  border-color: rgba(0, 0, 0, 0.08);
}
.pro-telemetry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}
.pro-telemetry-table th {
  background: rgba(255, 255, 255, 0.06);
  padding: 5px 8px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.theme-light .pro-telemetry-table th {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
.pro-telemetry-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.theme-light .pro-telemetry-table td {
  border-color: rgba(0, 0, 0, 0.05);
}

.pro-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
}
.pro-benchmark-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
}
.theme-light .pro-benchmark-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.pro-benchmark-card .bm-title {
  font-size: 10px;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
}
.pro-benchmark-card .bm-val {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: #38bdf8;
  margin-top: 2px;
}
.theme-light .pro-benchmark-card .bm-val {
  color: #0284c7;
}
.pro-benchmark-card .bm-sub {
  font-size: 9.5px;
  color: var(--text-muted, #64748b);
}



/* =========================================================================
   [v5.0.1 UX改革] 設定ステータス＆クイックアクセスカード ＆ 初期設定ガイダンス
   ========================================================================= */

/* ヘッダー設定ボタンのハイライト強調 */
.hud-btn-settings-highlight {
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  background: rgba(56, 189, 248, 0.12) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
  transition: all 0.2s ease;
}
.hud-btn-settings-highlight:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}
.hud-btn-settings-highlight:active {
  transform: translateY(0);
}
body.theme-light .hud-btn-settings-highlight {
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

/* 詳細設定モーダル内の初期設定ガイダンスバナー */
.config-default-guidance-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-primary, #f1f5f9);
}
.config-default-guidance-banner .guidance-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.config-default-guidance-banner .guidance-body strong {
  color: #38bdf8;
}
body.theme-light .config-default-guidance-banner {
  background: rgba(2, 132, 199, 0.06);
  border-color: rgba(2, 132, 199, 0.25);
  color: #1e293b;
}
body.theme-light .config-default-guidance-banner .guidance-body strong {
  color: #0284c7;
}

/* 左パネル：設定ステータス＆クイックアクセスカード */
.current-settings-summary-card {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease;
}
.current-settings-summary-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}
body.theme-light .current-settings-summary-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(2, 132, 199, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.settings-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}
.settings-summary-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
}
body.theme-light .settings-summary-title {
  color: #0f172a;
}
.settings-gear-icon {
  font-size: 13px;
}
.settings-status-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 9999px;
  white-space: nowrap;
}
.settings-status-pill.standard {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.settings-status-pill.customized {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.accent-settings-open {
  background: linear-gradient(135deg, #0284c7 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.accent-settings-open:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45);
}
.accent-settings-open:active {
  transform: translateY(0);
}

.settings-summary-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 8px;
}
body.theme-light .settings-summary-desc {
  color: #64748b;
}
.settings-summary-desc strong {
  color: var(--text-primary, #f1f5f9);
}
body.theme-light .settings-summary-desc strong {
  color: #0f172a;
}

.settings-chips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (max-width: 640px) {
  .settings-chips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.setting-chip-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: inherit;
}
.setting-chip-item:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}
.setting-chip-item:active {
  transform: translateY(0);
}
body.theme-light .setting-chip-item {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .setting-chip-item:hover {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.35);
}

.setting-chip-item .chip-label {
  font-size: 9.5px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  white-space: nowrap;
}
body.theme-light .setting-chip-item .chip-label {
  color: #64748b;
}

.setting-chip-item .chip-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-light .setting-chip-item .chip-val {
  color: #0f172a;
}
.setting-chip-item .chip-val.accent-amber {
  color: #fbbf24 !important;
}
body.theme-light .setting-chip-item .chip-val.accent-amber {
  color: #d97706 !important;
}
.setting-chip-item .chip-val.accent-cyan {
  color: #38bdf8 !important;
}
body.theme-light .setting-chip-item .chip-val.accent-cyan {
  color: #0284c7 !important;
}

/* フラッシュハイライトアニメーション（モーダル内の対象カードへジャンプした際） */
@keyframes flashTargetCard {
  0% { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.8), 0 0 20px rgba(56, 189, 248, 0.4); transform: scale(1.02); }
  50% { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.9), 0 0 28px rgba(56, 189, 248, 0.6); transform: scale(1.02); }
  100% { box-shadow: none; transform: scale(1); }
}
.flash-highlight {
  animation: flashTargetCard 2.0s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.8), 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

/* ==========================================================================
   [v5.1] マイカー優先ファーストビュー・クリーンタイムライン・履歴パーソナライズ・控えめバッジ
   ========================================================================== */

/* 1. マイカー＆出発バッテリーカード */
.primary-vehicle-card {
  background: var(--bg-card, rgba(15, 23, 42, 0.75));
  border: 1px solid var(--border-panel, rgba(56, 189, 248, 0.22));
  border-radius: 12px;
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
body.theme-light .primary-vehicle-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.card-section-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.card-section-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--neon-cyan, #38bdf8);
  letter-spacing: 0.02em;
}
body.theme-light .card-section-tag {
  color: #0284c7;
}

.primary-vehicle-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* [v5.8.1] マイカー＆バッテリー計画カード新スタイル（スライダー交差完全解消・スマートスタック型） */
.quick-soc-stack-card {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 9px;
  margin-bottom: 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
body.theme-light .quick-soc-stack-card {
  background: rgba(241, 245, 249, 0.75);
  border-color: #cbd5e1;
}

.quick-soc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  flex-wrap: wrap;
  gap: 4px;
}
.quick-soc-label-group {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.quick-soc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0 -2px;
}
body.theme-light .quick-soc-divider {
  background: #e2e8f0;
}

.quick-field-time#wrapTimeQuick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-sizing: border-box;
}
body.theme-light .quick-field-time#wrapTimeQuick {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.quick-time-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.quick-time-left .field-label-sm {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.quick-time-left .segmented-pill-sm {
  display: inline-flex;
}
.quick-time-left .seg-item {
  padding: 2.5px 7px;
  font-size: 10.5px;
  white-space: nowrap;
}

.quick-time-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.quick-time-right input[type="time"] {
  padding: 3px 4px;
  font-size: 12px;
  font-weight: 700;
  width: 110px;
  min-width: 110px;
}
.quick-time-right span {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  white-space: nowrap;
}
.field-label-sm {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 4px;
  display: block;
}
body.theme-light .field-label-sm {
  color: #475569;
}

/* 2. 最近のルート履歴ピルチップ */
.recent-routes-capsule {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
body.theme-light .recent-routes-capsule {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.recent-routes-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 5px;
}
.recent-routes-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.recent-route-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.recent-route-chip:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}
body.theme-light .recent-route-chip {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0369a1;
}
body.theme-light .recent-route-chip:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
}
.recent-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  border-radius: 50%;
  color: var(--text-muted, #94a3b8);
  transition: all 0.15s ease;
  margin-left: 2px;
}
.recent-chip-del:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 3. クリーンタイムライン入力UI */
.clean-timeline-inputs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.timeline-track-line {
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-left: 2px dashed rgba(56, 189, 248, 0.35);
  pointer-events: none;
  z-index: 1;
}
body.theme-light .timeline-track-line {
  border-left-color: #94a3b8;
}

.clean-field-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.clean-field-row .v-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.clean-field-row .v-dot.start {
  background: #38bdf8;
  border: 2px solid #0284c7;
}
.clean-field-row .v-dot.dest {
  background: #ef4444;
  border: 2px solid #dc2626;
}
.clean-field-row .v-dot.waypoint {
  background: #f8fafc;
  border: 2px solid #94a3b8;
}

.clean-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.clean-input-wrap:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
body.theme-light .clean-input-wrap {
  background: #ffffff;
  border-color: #cbd5e1;
}
body.theme-light .clean-input-wrap:focus-within {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.clean-search-input {
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #f1f5f9);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
}
body.theme-light .clean-search-input {
  color: #0f172a;
}
.clean-search-input::placeholder {
  color: #64748b;
  font-size: 12px;
}

.vector-mid-actions-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 22px;
  z-index: 2;
}
.btn-add-waypoint-clean {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--neon-cyan, #38bdf8);
  background: rgba(56, 189, 248, 0.08);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-add-waypoint-clean:hover {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.6);
}
body.theme-light .btn-add-waypoint-clean {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0284c7;
}

.btn-swap-clean {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-swap-clean:hover {
  color: #38bdf8;
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}
body.theme-light .btn-swap-clean {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
body.theme-light .btn-swap-clean:hover {
  color: #0284c7;
  border-color: #0284c7;
  background: #e0f2fe;
}

/* 4. 控えめテキストバッジ（サジェストリスト用） */
.clean-text-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.clean-text-badge.badge-station { color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); background: rgba(56, 189, 248, 0.1); }
.clean-text-badge.badge-sc { color: #e11d48; border-color: rgba(225, 29, 72, 0.3); background: rgba(225, 29, 72, 0.1); }
.clean-text-badge.badge-ic { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.1); }
.clean-text-badge.badge-landmark { color: #10b981; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.1); }
.clean-text-badge.badge-history { color: #a855f7; border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.1); }
.clean-text-badge.badge-home { color: #f97316; border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.1); }
body.theme-light .clean-text-badge.badge-station { color: #0284c7; border-color: #bae6fd; background: #f0f9ff; }
body.theme-light .clean-text-badge.badge-sc { color: #be123c; border-color: #fecdd3; background: #fff1f2; }
body.theme-light .clean-text-badge.badge-ic { color: #b45309; border-color: #fde68a; background: #fffbeb; }
body.theme-light .clean-text-badge.badge-landmark { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
body.theme-light .clean-text-badge.badge-history { color: #7e22ce; border-color: #e9d5ff; background: #faf5ff; }
body.theme-light .clean-text-badge.badge-home { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }

/* 5. 除外SC（スキップ）個別解除バッジリスト */
.excluded-sc-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.excluded-sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.excluded-sc-badge:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.6);
}
.excluded-sc-badge .unskip-x {
  font-size: 9px;
  background: rgba(239, 68, 68, 0.25);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* [v5.2.0 パッチ10] 夜間モード（body.dark-mode & デフォルトダーク）の明色CSS固定 */
body.dark-mode .pro-telemetry-table,
body.dark-mode .pro-telemetry-table th,
body.dark-mode .pro-telemetry-table td,
body.dark-mode .history-chip,
body.dark-mode .benchmark-card,
body.dark-mode .telemetry-section,
body.dark-mode .leg-card,
body:not(.theme-light) .pro-telemetry-table,
body:not(.theme-light) .pro-telemetry-table th,
body:not(.theme-light) .pro-telemetry-table td,
body:not(.theme-light) .history-chip,
body:not(.theme-light) .benchmark-card,
body:not(.theme-light) .telemetry-section,
body:not(.theme-light) .leg-card {
  color: #f1f5f9 !important;
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
body.dark-mode .history-chip:hover,
body:not(.theme-light) .history-chip:hover {
  background-color: #334155 !important;
}


/* [v5.3.0 パッチB & C] 必須充電スポットバッジ & 到着希望残量アクティブスタイル */
.quick-chip-btn.active {
  background: rgba(16, 185, 129, 0.25) !important;
  color: var(--neon-emerald, #10b981) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25) !important;
}
body.theme-light .quick-chip-btn.active {
  background: rgba(5, 150, 105, 0.18) !important;
  color: #059669 !important;
  border-color: rgba(5, 150, 105, 0.5) !important;
}

.forced-charger-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition: all 0.3s ease;
}
.forced-charger-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 14px;
  background: rgba(234, 179, 8, 0.16);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
}
.forced-charger-chip button {
  background: none;
  border: none;
  color: #facc15;
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
}
.forced-charger-chip button:hover {
  color: #ffffff;
}

/* ==========================================================================
   [v5.5.1] ルートナビゲーション情報拡充 (距離HUD・概要バー・区間累計残距離・プラン別距離)
   ========================================================================== */
.hud-dist-subtext {
  font-size: 9.5px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  line-height: 1.1;
  margin-top: 1px;
}

/* [v5.6.0] ルートナビ概要バー (文字溢れ・...省略を完全解消し2列グリッドで確実表示) */
.route-nav-metrics-bar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
}
body.theme-light .route-nav-metrics-bar {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.nav-metric-chip {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  min-width: 0;
  box-sizing: border-box;
}
body.theme-light .nav-metric-chip {
  background: #ffffff;
  border-color: #e2e8f0;
}
.nav-chip-icon {
  font-size: 16px !important;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.nav-chip-content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  overflow: visible !important;
  flex: 1 1 auto;
}
.nav-chip-label {
  font-size: 10px !important;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  line-height: 1.15;
  white-space: nowrap;
}
.nav-chip-val {
  font-size: 12.5px !important;
  font-weight: 800;
  color: var(--text-primary, #f1f5f9);
  line-height: 1.25;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
#navValHighway {
  font-size: 11.5px !important;
}
body.theme-light .nav-chip-val {
  color: #0f172a;
}
@media (max-width: 640px) {
  .route-nav-metrics-bar {
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  .nav-metric-chip {
    padding: 5px 6px !important;
  }
  .nav-chip-val {
    font-size: 12px !important;
  }
}

/* タイムライン区間 累計・残り距離表示 */
.timeline-nav-sub {
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}
body.theme-light .timeline-nav-sub {
  color: #0284c7;
}

/* 4大プラン比較カードの4列メトリクス */
.strategy-card .strat-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px;
}
@media (max-width: 640px) {
  .strategy-card .strat-metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================================================
   [v5.6.0 外科的コードパッチ] パッチ6, 7, 8, 9 スタイル統合
   ========================================================================= */

/* [v5.6.0 パッチ6] 夜間モード（body.dark-mode / body.theme-dark / デフォルトダーク）のチップ視認性向上 */
body.dark-mode button,
body.theme-dark button,
body:not(.theme-light) button,
body.dark-mode .chip,
body.theme-dark .chip,
body:not(.theme-light) .chip,
body.dark-mode [class*="chip"],
body.theme-dark [class*="chip"],
body:not(.theme-light) [class*="chip"],
body.dark-mode [class*="preset"],
body.theme-dark [class*="preset"],
body:not(.theme-light) [class*="preset"],
body.dark-mode [class*="history"],
body.theme-dark [class*="history"],
body:not(.theme-light) [class*="history"] {
  color: #e2e8f0;
}
body.dark-mode .target-soc-btn:not(.active),
body.dark-mode .soc-preset-btn:not(.active),
body.dark-mode .min-soc-chip:not(.active),
body.dark-mode .quick-chip-btn:not(.active),
body.theme-dark .target-soc-btn:not(.active),
body.theme-dark .soc-preset-btn:not(.active),
body.theme-dark .min-soc-chip:not(.active),
body.theme-dark .quick-chip-btn:not(.active),
body:not(.theme-light) .target-soc-btn:not(.active),
body:not(.theme-light) .soc-preset-btn:not(.active),
body:not(.theme-light) .min-soc-chip:not(.active),
body:not(.theme-light) .quick-chip-btn:not(.active) {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}
body.dark-mode .target-soc-btn.active,
body.dark-mode .soc-preset-btn.active,
body.dark-mode .min-soc-chip.active,
body.dark-mode .quick-chip-btn.active,
body.theme-dark .target-soc-btn.active,
body.theme-dark .soc-preset-btn.active,
body.theme-dark .min-soc-chip.active,
body.theme-dark .quick-chip-btn.active,
body:not(.theme-light) .target-soc-btn.active,
body:not(.theme-light) .soc-preset-btn.active,
body:not(.theme-light) .min-soc-chip.active,
body:not(.theme-light) .quick-chip-btn.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}

/* [v5.6.0 パッチ7] スマホ375px幅での区間別テレメトリテーブル横スクロール保証 */
.pro-telemetry-table-wrap,
.pro-table-wrap,
#proLegTelemetryTableWrap,
#proTelemetryTableContainer {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pro-telemetry-table th,
.pro-telemetry-table td {
  white-space: nowrap !important;
  padding: 8px 10px;
}

/* [v5.6.0 パッチ8] スマホ375px画面でのマップポップアップ画面外はみ出し防止＆右上地図移動トグルボタン */
.leaflet-popup-content-wrapper {
  max-width: 250px !important;
  box-sizing: border-box;
}
.leaflet-popup-content {
  margin: 10px 12px !important;
  line-height: 1.45 !important;
  font-size: 11.5px !important;
  word-break: break-word !important;
}
.map-drag-toggle-btn,
#btnToggleMapScroll {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1001;
  background: rgba(15, 23, 42, 0.85);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: auto !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
body.theme-light .map-drag-toggle-btn,
body.theme-light #btnToggleMapScroll {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
#btnToggleMapScroll.active {
  border-color: #38bdf8;
  color: #38bdf8;
}
body.theme-light #btnToggleMapScroll.active {
  border-color: #0284c7;
  color: #0284c7;
}

/* [v5.6.0 パッチ9] スマホ375px幅での上部ヘッダー・プランバー・入力欄省スペース化 */
@media (max-width: 640px) {
  .omni-hud-header {
    padding: 3px 6px !important;
  }
  .strategy-deck-bar,
  .quick-strategy-tabs,
  .strategy-tabs-bar {
    padding: 2px 4px !important;
  }
  #inputOriginQuick,
  #inputDestQuick,
  #inputOriginModal,
  #inputDestModal {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 13px !important;
  }
}



/* =========================================================================
   [v5.6.0] テスラ車載ブラウザ（15.4インチ / MCU2 Intel / MCU3 AMD Ryzen）専用スタイル
   ========================================================================= */

/* ステッパーコントロール ([-5][-1][+1][+5]) */
.stepper-control-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100%;
  margin-top: 4px;
}
.stepper-control-wrap .cyber-range {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 4px;
}
.stepper-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--text-primary, #f1f5f9);
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
body.theme-light .stepper-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.stepper-btn:active {
  transform: scale(0.95);
  background: var(--neon-cyan, #06b6d4) !important;
  color: #fff !important;
}

/* 車載ヘッダーボタン & QR送信ボタン */
.btn-tesla-car-mode {
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-tesla-car-mode.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}
.btn-qr-send-tesla {
  min-height: 38px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 6px;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
body.theme-light .btn-qr-send-tesla {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.btn-qr-send-tesla:hover, .btn-qr-send-tesla:active {
  background: #2563eb;
  color: #ffffff;
}

/* 車載オンスクリーンキーボード（OSK）対策：モーダルの上寄り配置 */
.cyber-modal-backdrop, .modal-overlay {
  align-items: flex-start !important;
  padding-top: 24px !important;
}
.cyber-modal-card, .qr-modal-card {
  max-height: 60vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 車載ディスプレイモード（body.tesla-car-mode）有効時 */
body.tesla-car-mode {
  font-size: 14px !important;
}
body.tesla-car-mode .omni-hud-header {
  height: auto !important;
  min-height: 58px !important;
  padding: 6px 16px !important;
}
body.tesla-car-mode .hud-metric-val {
  font-size: 18px !important;
}
body.tesla-car-mode .stepper-btn {
  min-width: 48px !important;
  min-height: 48px !important;
  font-size: 14px !important;
}
body.tesla-car-mode button,
body.tesla-car-mode select,
body.tesla-car-mode input[type="button"],
body.tesla-car-mode input[type="submit"] {
  min-height: 44px;
}
body.tesla-car-mode .nav-metric-chip {
  padding: 8px 10px !important;
}
body.tesla-car-mode .nav-chip-val {
  font-size: 14px !important;
}
body.tesla-car-mode .nav-chip-label {
  font-size: 11px !important;
}

/* ポップオーバーツールチップのタップ対応 */
.popover-tooltip-active {
  position: relative;
}
.popover-tooltip-active::after {
  content: attr(data-tooltip) !important;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  color: #f1f5f9;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 9999;
  pointer-events: auto;
}

/* ==========================================================================
   [v5.7.1] 無充電時（途中充電0回）のプラン同一・直行案内バナー & チップ装飾
   ========================================================================== */
.no-charge-same-route-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(6, 182, 212, 0.12) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
  box-sizing: border-box;
}
body.theme-light .no-charge-same-route-banner {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
  border-color: #6ee7b7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}
.no-charge-same-route-banner .ncs-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.no-charge-same-route-banner .ncs-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.no-charge-same-route-banner .ncs-title {
  font-size: 13px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: -0.2px;
}
body.theme-light .no-charge-same-route-banner .ncs-title {
  color: #065f46;
}
.no-charge-same-route-banner .ncs-desc {
  font-size: 11.5px;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.45;
}
body.theme-light .no-charge-same-route-banner .ncs-desc {
  color: #334155;
}
.no-charge-same-route-banner .ncs-desc strong {
  color: #38bdf8;
  font-weight: 700;
}
body.theme-light .no-charge-same-route-banner .ncs-desc strong {
  color: #0369a1;
}

/* プランカード内の無充電サブノート */
.strat-card-no-charge-sub {
  font-size: 10.5px;
  color: #10b981;
  font-weight: 700;
  margin-top: 4px;
  padding: 2px 6px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 4px;
  display: inline-block;
}
body.theme-light .strat-card-no-charge-sub {
  background: #d1fae5;
  color: #047857;
}

/* タイムライン側の無充電コールアウト */
.timeline-no-charge-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  box-sizing: border-box;
}
body.theme-light .timeline-no-charge-callout {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.timeline-no-charge-callout .tnc-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.timeline-no-charge-callout .tnc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline-no-charge-callout .tnc-text strong {
  font-size: 12.5px;
  color: #10b981;
  font-weight: 800;
}
body.theme-light .timeline-no-charge-callout .tnc-text strong {
  color: #065f46;
}
.timeline-no-charge-callout .tnc-text span {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.4;
}
body.theme-light .timeline-no-charge-callout .tnc-text span {
  color: #475569;
}

/* =========================================================================
   [v5.8.0] プロ解析・テレメトリ抜本刷新 ＆ UX最適化スタイル
   ========================================================================= */

/* プロ解析カードの内部スクロール & 快適パディング */
.telemetry-card-pro {
  min-height: 0;
}
.pro-telemetry-body {
  padding: 8px 10px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pro-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
}
body.theme-light .pro-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.pro-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--neon-cyan, #38bdf8);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
body.theme-light .pro-section-title {
  color: #0284c7;
}

/* ① 感度分析（What-if トルネード比較バー） */
.whatif-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.whatif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
}
body.theme-light .whatif-row {
  background: #f1f5f9;
}
.whatif-label {
  flex: 0 0 170px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.whatif-bar-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.whatif-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.whatif-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.whatif-bar-fill.gain {
  background: #10b981;
}
.whatif-bar-fill.loss {
  background: #ef4444;
}
.whatif-badge {
  flex: 0 0 100px;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 11px;
}
.whatif-badge.gain { color: #10b981; }
.whatif-badge.loss { color: #ef4444; }
.whatif-sub {
  flex: 0 0 130px;
  font-size: 10px;
  color: var(--text-secondary);
  text-align: right;
}

/* ② 急速充電テーパリング ＆ 切り上げ損益分岐点（Sweet Spot）診断 */
.taper-sweetspot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.sweetspot-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--glass-border);
  border-left: 3.5px solid #06b6d4;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
}
body.theme-light .sweetspot-card {
  background: #ffffff;
  border-color: #cbd5e1;
  border-left-color: #0284c7;
}
.sweetspot-title {
  font-weight: 800;
  font-size: 11.5px;
  margin-bottom: 4px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sweetspot-metrics {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.sweetspot-metric-item {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
body.theme-light .sweetspot-metric-item {
  background: #f8fafc;
}
.sweetspot-metric-label {
  font-size: 9.5px;
  color: var(--text-muted);
}
.sweetspot-metric-val {
  font-size: 12.5px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: var(--neon-cyan);
}
body.theme-light .sweetspot-metric-val {
  color: #0284c7;
}

/* ③ 9カラム区間別プロテレメトリ表 */
.pro-telemetry-table th {
  padding: 6px 8px;
  font-size: 10.5px;
}
.pro-telemetry-table td {
  padding: 6px 8px;
  font-size: 11px;
}
.leg-factor-stack {
  height: 6px;
  width: 70px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 2px;
}
.leg-margin-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.leg-margin-badge.safe {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.leg-margin-badge.warn {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ④ 4季節×悪天候ベンチマーク */
.season-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.season-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.theme-light .season-card {
  background: #ffffff;
  border-color: #e2e8f0;
}
.season-card.winter-worst {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.05);
}
.season-card-title {
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.season-card-val {
  font-size: 13.5px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: #38bdf8;
}
body.theme-light .season-card-val {
  color: #0284c7;
}
.season-card.winter-worst .season-card-val {
  color: #ef4444;
}
.season-card-sub {
  font-size: 9.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* ⑤ 左パネル速度比較スリム表（幅390pxでスクロールなしで綺麗に収まる） */
.speed-slim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.speed-slim-table th {
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--glass-border);
}
.speed-slim-table td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.speed-slim-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.speed-slim-row:hover {
  background: rgba(56, 189, 248, 0.08);
}
.speed-slim-row.active {
  background: rgba(56, 189, 248, 0.15);
  font-weight: 700;
}
.speed-slim-row.over-limit {
  opacity: 0.6;
}


/* =========================================================================
   [v6.4.1] 総走行距離（オドメーター1万km刻み）＆バッテリー劣化率 コントロールカード
   ========================================================================= */
.odo-deg-control-card {
  margin-top: 8px;
  margin-bottom: 6px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.odo-deg-control-card:hover {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.12);
}
.theme-light .odo-deg-control-card {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.odo-deg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.odo-deg-metric-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.odo-deg-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.odo-deg-value {
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}
.odo-deg-value small {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 1px;
}
.odo-deg-value.accent-cyan {
  color: #38bdf8;
}
.odo-deg-divider {
  width: 1px;
  height: 12px;
  background: var(--border-sub, rgba(255, 255, 255, 0.2));
}
.odo-guide-pill {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(6, 182, 212, 0.25);
  white-space: nowrap;
}

/* 1万km単位のクイック選択チップ群 */
.odo-preset-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.odo-chip {
  flex: 1 1 auto;
  min-width: 44px;
  padding: 3px 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-light .odo-chip {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}
.odo-chip:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.4);
  color: #38bdf8;
}
.odo-chip.active {
  background: rgba(6, 182, 212, 0.22);
  border-color: #06b6d4;
  color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}
.theme-light .odo-chip.active {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
  box-shadow: 0 0 6px rgba(2, 132, 199, 0.2);
}

/* ステッパー付き微調整バー */
.odo-adjust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.odo-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 190px;
}
.odo-step-btn {
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.odo-step-btn:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: #06b6d4;
  color: #38bdf8;
}
.odo-step-btn:active {
  transform: scale(0.96);
}
.odo-input-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 2px 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.theme-light .odo-input-box {
  background: #ffffff;
  border-color: #cbd5e1;
}
.odo-input-box:focus-within {
  border-color: #06b6d4;
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.35);
}
.odo-input-box input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  text-align: right;
  padding: 0;
}
.odo-unit {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: 3px;
  font-weight: 600;
}

.deg-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.deg-override-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.deg-input-box {
  width: 58px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 4px;
  padding: 2px 4px;
  transition: border-color 0.2s;
}
.theme-light .deg-input-box {
  background: #ffffff;
  border-color: #cbd5e1;
}
.deg-input-box:focus-within {
  border-color: #06b6d4;
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.35);
}
.deg-input-box input {
  width: 100%;
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  text-align: right;
  padding: 0;
}
.deg-unit {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: 2px;
  font-weight: 600;
}

/* =========================================================================
   [v6.4.2] 本格運用開始・旧版シミュレーター＆ブログ本サイト双方向ナビゲーションリンク
   ========================================================================= */

/* Brand Nav Links (Header) */
.brand-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
body.theme-light .brand-nav-links {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.brand-nav-link {
  color: var(--text-secondary, #94a3b8);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.brand-nav-link:hover {
  color: var(--neon-cyan, #38bdf8);
}
body.theme-light .brand-nav-link {
  color: #475569;
}
body.theme-light .brand-nav-link:hover {
  color: #0284c7;
}
.brand-nav-sep {
  color: var(--text-muted, #64748b);
  opacity: 0.5;
  font-size: 10px;
}
@media (max-width: 960px) {
  .brand-nav-links {
    display: none !important;
  }
}

/* Action Capsule Link Buttons */
.hud-link-btn {
  text-decoration: none !important;
  color: var(--text-secondary, #cbd5e1) !important;
}
.hud-link-btn:hover {
  color: var(--neon-cyan, #38bdf8) !important;
  border-color: var(--neon-cyan, #38bdf8) !important;
}
body.theme-light .hud-link-btn {
  color: #334155 !important;
}
body.theme-light .hud-link-btn:hover {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* Config Deck Related Links Card */
.config-deck-related-links-card {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
}
body.theme-light .config-deck-related-links-card {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.related-links-header {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neon-cyan, #38bdf8);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.theme-light .related-links-header {
  color: #0284c7;
}
.related-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.related-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary, #f1f5f9);
  transition: all 0.18s ease;
}
body.theme-light .related-link-item {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.related-link-item:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: var(--neon-cyan, #38bdf8);
  transform: translateY(-1px);
}
body.theme-light .related-link-item:hover {
  background: #f0f9ff;
  border-color: #0284c7;
}
.related-link-item .r-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.related-link-item .r-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.related-link-item .r-info strong {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-link-item .r-info small {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-light .related-link-item .r-info small {
  color: #64748b;
}
.related-link-item .r-arrow {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  flex-shrink: 0;
}

/* Left Deck Footer Navigation */
.deck-footer-nav {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-panel-subtle, rgba(255,255,255,0.08));
  font-size: 11px;
  color: var(--text-muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.theme-light .deck-footer-nav {
  border-top-color: #e2e8f0;
  color: #64748b;
}
.deck-footer-link {
  color: var(--text-secondary, #94a3b8);
  text-decoration: none;
  transition: color 0.15s ease;
}
.deck-footer-link:hover, .deck-footer-link.highlight:hover {
  color: var(--neon-cyan, #06b6d4);
}
.deck-footer-link.highlight {
  color: var(--neon-cyan, #38bdf8);
  font-weight: 600;
}
body.theme-light .deck-footer-link.highlight {
  color: #0284c7;
}
.deck-footer-sep {
  opacity: 0.4;
}

/* [v6.6.2] 目的地ホテル普通充電トグル UI（1行目をスッキリ保ち、コスト内訳は右端バッジ化） */
.dest-hotel-charge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.dest-hotel-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.dest-hotel-hint {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--neon-cyan, #38bdf8);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}