.v2-page {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  line-height: 1.35;
}

.v2-page .hero {
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 28px rgba(16, 66, 110, 0.2);
}

.v2-page .hero h1 {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.v2-page .hero p {
  margin: 0;
  max-width: 920px;
}

.v2-example-link {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #4f6a86;
}

.v2-beta-note {
  margin-top: 8px;
  color: #567390;
  font-size: 0.8rem;
}

.v2-example-link a {
  font-weight: 800;
}

.v2-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

#v2-section-import { order: 1; }
#v2-section-runner { order: 2; }
#v2-section-pacing { order: 3; }
#v2-section-results { order: 4; }
#v2-section-ravitos { order: 5; }
#v2-section-passages { order: 6; }
#v2-section-profile { order: 7; }
#v2-section-nutrition { order: 8; }
#v2-section-nutrition-table { order: 9; }
#v2-section-map { order: 10; }
#v2-section-roadbook { order: 11; }
#v2-section-exports { order: 12; }
#v2-section-calculs { order: 13; }
#v2-section-debug { order: 14; }

.v2-card {
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--brand-line);
  box-shadow: 0 8px 20px rgba(16, 66, 110, 0.08);
}

.v2-card h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: var(--brand-blue);
}

.v2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.v2-section-toggle {
  border: 1px solid #b9d0eb;
  border-radius: 999px;
  background: #ecf4ff;
  color: #184e7d;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
}

.v2-card.is-collapsed > :not(.v2-section-head) {
  display: none;
}

.v2-card h3 {
  margin: 10px 0 6px;
  font-size: 1rem;
  color: #1a4f7d;
}

.v2-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.v2-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #c6daf0;
  background: #eef5ff;
  color: #1c517f;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 0.86rem;
}

.v2-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.v2-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.v2-field {
  display: grid;
  gap: 6px;
}

.v2-field label {
  font-weight: 700;
  color: #1a4f7d;
  font-size: 0.92rem;
}

.v2-field input,
.v2-field select,
.v2-field textarea {
  width: 100%;
  border: 1px solid #b9d0eb;
  background: #f9fcff;
  border-radius: 10px;
  padding: 9px 10px;
  color: #143d63;
  font: inherit;
}

.v2-static-field {
  width: 100%;
  border: 1px solid #b9d0eb;
  background: #f3f8ff;
  border-radius: 10px;
  padding: 9px 10px;
  color: #143d63;
  font: inherit;
  font-weight: 700;
}

.v2-field input[type="checkbox"] {
  width: auto;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #1f5e93;
}

.v2-field .v2-inline-note {
  display: block;
  margin-top: 2px;
  color: #5b7089;
  font-size: 0.82rem;
  line-height: 1.35;
}

.v2-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.v2-quick-note {
  flex: 1 1 100%;
  color: #5c7590;
  font-size: 0.83rem;
}

.v2-actions button {
  border: 1px solid #9fc0e4;
  background: #e8f2ff;
  color: #184e7d;
  border-radius: 10px;
  font-weight: 800;
  padding: 9px 13px;
  cursor: pointer;
}

.v2-actions button.primary {
  border-color: #0d4d8b;
  background: linear-gradient(135deg, #1b5f9b 0%, #124879 100%);
  color: #fff;
}

.v2-actions button:hover {
  filter: brightness(1.03);
}

.v2-actions button:disabled {
  opacity: 0.7;
  cursor: wait;
  filter: none;
}

.v2-status {
  margin-top: 10px;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #c8dbf1;
  background: #f6faff;
  color: #28537d;
  font-size: 0.9rem;
}

.v2-status.error {
  border-color: #eab8b8;
  background: #fff3f3;
  color: #812121;
}

.v2-status.warn-strong {
  border-color: #e1a72d;
  background: #fff7e8;
  color: #7a4a00;
  font-weight: 700;
}

.v2-track-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.v2-kpi {
  border-radius: 11px;
  border: 1px solid #c7dcf3;
  background: #f6faff;
  padding: 10px;
}

.v2-kpi .k {
  color: #557191;
  font-size: 0.83rem;
}

.v2-kpi .v {
  color: #0f4572;
  font-size: 1.1rem;
  font-weight: 900;
  margin-top: 3px;
}

.v2-kpi .n {
  margin-top: 4px;
  color: #5a7390;
  font-size: 0.76rem;
  line-height: 1.35;
}

.v2-ravito-head,
.v2-ravito-row {
  display: grid;
  grid-template-columns: 52px 1.45fr .75fr .95fr .72fr 1.2fr .8fr .95fr .72fr 108px;
  gap: 8px;
  align-items: center;
}

.v2-ravito-head {
  margin-top: 6px;
  margin-bottom: 6px;
  color: #2f608f;
  font-size: 0.84rem;
  font-weight: 700;
}

.v2-ravito-row {
  margin-bottom: 7px;
}

.v2-ravito-row .v2-rnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 10px;
  background: #edf4fe;
  border: 1px solid #c8dbf3;
  color: var(--brand-blue);
  font-weight: 700;
}

.v2-ravito-row button {
  border: 1px solid #efb26a;
  background: #f28a00;
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}

.v2-calc-line-title {
  margin: 12px 0 6px;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 8px;
}

.v2-calc-line-title.booster {
  color: #1f8f3a;
  background: #e8f8ee;
  border: 1px solid #bfeacb;
}

.v2-calc-line-title.perte {
  color: #b42318;
  background: #ffefef;
  border: 1px solid #f3c5c5;
}

.v2-stages-head,
.v2-stage-row {
  display: grid;
  grid-template-columns: 70px 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.v2-stages-head {
  margin: 6px 0 8px;
  color: #2f608f;
  font-weight: 700;
}

.v2-stage-row {
  margin-bottom: 8px;
}

.v2-stage-row input {
  width: 100%;
  border: 1px solid #bfd3ea;
  border-radius: 10px;
  padding: 8px;
  font: inherit;
}

.v2-stage-row button {
  border: 1px solid #efb26a;
  background: #f28a00;
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}

.v2-stage-row-static {
  margin-bottom: 10px;
}

.v2-slow-stages {
  display: grid;
  gap: 8px;
}

.v2-slow-stage-row {
  display: grid;
}

.v2-slow-stage-label {
  font-size: 0.82rem;
  color: #2f608f;
  font-weight: 700;
}

.v2-slow-stage-row button {
  border: 1px solid #efb26a;
  background: #f28a00;
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}

#v2-add-slow-stage-btn {
  border: 1px solid #9fc0e4;
  background: #e8f2ff;
  color: #184e7d;
  border-radius: 999px;
  font-weight: 800;
  padding: 9px 14px;
  cursor: pointer;
  width: fit-content;
}

.v2-table-wrap {
  overflow: auto;
}

.v2-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  min-width: 980px;
}

.v2-table th,
.v2-table td {
  border: 1px solid #d4e1f2;
  padding: 8px 10px;
  text-align: left;
  font-size: 0.9rem;
}

.v2-table th {
  background: #edf5ff;
  color: #194f7d;
  font-weight: 800;
}

.v2-table tr:nth-child(even) td {
  background: #fafcff;
}

.v2-main-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px;
}

.v2-main-metrics .v2-kpi .v {
  font-size: 1.06rem;
}

.v2-forecast-box {
  margin-top: 10px;
  border: 1px solid #bfd8f2;
  border-radius: 12px;
  background: #f4f9ff;
  padding: 10px;
}

.v2-forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.v2-forecast-item {
  border: 1px solid #cde0f4;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}

.v2-forecast-item .k {
  color: #5b7390;
  font-size: 0.82rem;
}

.v2-forecast-item .v {
  margin-top: 2px;
  font-size: 1.08rem;
  font-weight: 900;
  color: #124876;
}

.v2-forecast-item .n {
  margin-top: 3px;
  color: #5a7390;
  font-size: 0.76rem;
  line-height: 1.35;
}

.v2-profile-wrap {
  border: 1px solid #d2e2f4;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.v2-profile-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.v2-map-expand-btn {
  border: 1px solid #b9d0eb;
  border-radius: 999px;
  padding: 8px 12px;
  background: #edf5ff;
  color: #1f4f7f;
  font-weight: 700;
  cursor: pointer;
}

.v2-overlay-control {
  min-width: 230px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c8dbf3;
  border-radius: 999px;
  background: #eaf2fd;
  color: #0d4d8b;
  padding: 5px 10px;
}

.v2-overlay-control .k {
  font-size: 0.76rem;
  font-weight: 700;
  color: #5a7798;
  white-space: nowrap;
}

.v2-overlay-select {
  flex: 1 1 auto;
  min-width: 130px;
  border: 0;
  background: transparent;
  color: #0d4d8b;
  font: inherit;
  font-weight: 800;
  padding: 4px 2px;
}

.v2-profile-canvas {
  width: 100%;
  height: 360px;
  display: block;
  border-radius: 10px;
  border: 1px solid #d4e3f4;
  background: #f9fcff;
}

.v2-profile-legend {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-profile-legend span {
  border: 1px solid #c8dbf1;
  background: #f4f9ff;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #245783;
  padding: 5px 8px;
}

.v2-map-wrap {
  border: 1px solid #d2e2f4;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  position: relative;
}

.v2-map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.v2-map-controls label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1a4f7d;
}

.v2-map-controls select {
  min-width: 220px;
  border: 1px solid #b9d0eb;
  background: #f9fcff;
  border-radius: 10px;
  padding: 8px 10px;
  color: #143d63;
  font: inherit;
}

.v2-map-canvas {
  width: 100%;
  height: 360px;
  border-radius: 10px;
  border: 1px solid #d4e3f4;
  overflow: hidden;
  background: #f8fbff;
}

#v2-map-3d .maplibregl-canvas,
#v2-map-3d .maplibregl-canvas-container {
  border-radius: 10px;
}

#v2-map .leaflet-control-container,
#v2-map-3d .maplibregl-control-container {
  z-index: 430;
}

.v2-profile-wrap:fullscreen,
.v2-map-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  margin: 0;
  padding: 12px;
}

.v2-profile-wrap:fullscreen .v2-profile-canvas,
.v2-map-wrap:fullscreen .v2-map-canvas {
  height: calc(100vh - 32px);
}

.v2-map-empty {
  min-height: 72px;
  margin-top: 8px;
  display: grid;
  place-items: center;
  color: #6a8098;
  border-radius: 10px;
  border: 1px dashed #bfd2ea;
  background: #f8fbff;
}

.v2-help {
  border: 1px solid #c9dcf2;
  border-radius: 11px;
  background: #f5faff;
  padding: 10px;
  color: #224f7b;
  line-height: 1.58;
  font-size: 0.91rem;
}

.v2-roadbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.v2-roadbook-card {
  border: 1px solid #d8e7f9;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.v2-roadbook-title {
  color: var(--brand-blue);
  font-weight: 700;
  margin-bottom: 6px;
}

.v2-roadbook-meta {
  color: var(--brand-muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

.v2-roadbook-card svg {
  width: 100%;
  height: 86px;
  display: block;
  border-radius: 8px;
  background: #f7fbff;
}

.v2-export-actions button {
  min-width: 220px;
}

.v2-dialog {
  border: 0;
  padding: 0;
  border-radius: 16px;
  max-width: 560px;
  width: calc(100% - 24px);
}

.v2-dialog::backdrop {
  background: rgba(8, 28, 48, 0.45);
}

.v2-dialog-card {
  margin: 0;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.v2-dialog h3 {
  margin: 0;
}

.v2-dialog p {
  margin: 0;
  color: #4f6f8f;
}

.v2-dialog-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 8px;
}

.v2-dialog-options button,
.v2-dialog menu button {
  border: 1px solid #b9d0eb;
  border-radius: 10px;
  background: #eff6ff;
  color: #124b7d;
  padding: 9px 10px;
  font-weight: 700;
  cursor: pointer;
}

.v2-dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.v2-debug details {
  border: 1px solid #c8dbf2;
  border-radius: 10px;
  background: #f7fbff;
  overflow: hidden;
}

.v2-debug summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: #1f5787;
  padding: 10px 12px;
  border-bottom: 1px solid #d8e6f6;
}

.v2-debug summary::-webkit-details-marker {
  display: none;
}

.v2-debug-summary {
  border: 1px solid #c8dbf2;
  border-radius: 10px;
  background: #f7fbff;
  padding: 9px 10px;
  color: #255984;
  font-size: 0.86rem;
  line-height: 1.45;
  display: grid;
  gap: 2px;
}

.v2-debug-inner {
  padding: 10px;
}

.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #b6d2ef;
  background: #ecf5ff;
  color: #255984;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 9px;
}

.v2-badge.warn-strong {
  border-color: #e1a72d;
  background: #fff7e8;
  color: #7a4a00;
}

.v2-badge.badge-success {
  border-color: #9fd7ba;
  background: #ecfaf2;
  color: #166b40;
}

.v2-badge.badge-loading {
  border-color: #b5c9e6;
  background: #eef5ff;
  color: #1f5583;
}

.v2-badge.badge-error {
  border-color: #e8b2b2;
  background: #fff2f2;
  color: #8a2323;
}

.v2-badge.badge-standard {
  border-color: #9fd7ba;
  background: #ecfaf2;
  color: #166b40;
}

.v2-badge.badge-expert {
  border-color: #e1a72d;
  background: #fff7e8;
  color: #7a4a00;
}

.v2-footer-note {
  margin-top: 10px;
  color: #607a95;
  font-size: 0.82rem;
}

.v2-expert-warning {
  border-left: 3px solid #e1a72d;
  padding-left: 8px;
  color: #7a4a00;
}

.v2-expert-settings {
  border: 1px solid #d3e3f4;
  border-radius: 11px;
  background: #f8fbff;
  padding: 10px;
  margin-bottom: 10px;
}

.v2-expert-settings h3 {
  margin-top: 0;
}

.v2-debug-actions {
  margin-top: 8px;
}

@media (max-width: 920px) {
  .v2-ravito-head,
  .v2-ravito-row {
    grid-template-columns: 1fr 1fr;
  }

  .v2-ravito-head > div:nth-child(n+5):not(:last-child) {
    display: none;
  }

  .v2-ravito-row button {
    width: fit-content;
  }

  .v2-stages-head {
    display: none;
  }

  .v2-stage-row,
  .v2-slow-stage-row {
    grid-template-columns: 1fr;
  }

  .v2-export-actions button {
    min-width: 0;
    width: 100%;
  }

  .v2-profile-canvas,
  .v2-map-canvas {
    height: 300px;
  }
}