:root {
  --navy: #215f51;
  --navy-2: #2c7361;
  --teal: #2d7661;
  --teal-dark: #1f5f50;
  --teal-soft: #edf6e7;
  --blue-soft: #f1f6ec;
  --amber: #b85b16;
  --amber-soft: #fff1e5;
  --green: #2d745b;
  --green-soft: #edf7e8;
  --ink: #21332d;
  --muted: #61736c;
  --line: #dce5df;
  --canvas: #f6f8f5;
  --shadow: 0 7px 22px rgba(31, 82, 69, .075);
  --radius: 12px;
  --orange: #f47b20;
  --light-green: #a7ce48;
}

.app-header { height: 78px; }
.brand { gap: 14px; }
.brand-logo { width: 108px; height: 58px; display: block; object-fit: contain; object-position: center; }
.brand-product { padding-left: 14px; border-left: 1px solid var(--line); }
.brand-product strong, .brand-product small { display: block; }
.brand-product strong { color: var(--navy); font-size: 14px; }
.brand-product small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.brand-mark { display: none; }

main { padding-top: 28px; }
.page-head { margin-bottom: 20px; }
.summary-strip { margin-bottom: 18px; }
.summary-item, .route-card, .panel, .client-recap, .option-inner { border-radius: var(--radius); }
.summary-item { padding: 16px 18px; }
.button, .icon-button { border-radius: 9px; }
.button:hover { transform: none; }
.route-card:hover { transform: none; border-color: #c7d8cf; box-shadow: var(--shadow); }
.route-card-top { padding-top: 18px; }
.route-people { padding-bottom: 14px; }
.status, .date-chip, .demo-badge { border-radius: 999px; }

.notice { color: #7a4218; background: var(--amber-soft); border-color: #efc69f; }
.notice-icon { color: #9d4e14; background: rgba(244, 123, 32, .15); }
.tag, .constraint {
  display: inline-flex; align-items: center; min-height: 24px; padding: 5px 9px;
  color: #984d17; background: var(--amber-soft); border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.2;
}
.constraint-none { color: var(--muted); background: #f0f3f1; }
.success, .status-updated, .recommended { color: var(--green); background: var(--green-soft); }
.recommended { border: 1px solid #cfe2b7; }

.options { align-items: stretch; gap: 18px; }
.option { min-width: 0; height: 100%; display: block; cursor: pointer; }
.option-inner {
  min-height: 282px; height: 100%; padding: 20px; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); box-shadow: none;
  transition: border-color .15s, background .15s;
}
.option:hover .option-inner { transform: none; border-color: #b9cdc2; }
.option-recommended .option-inner { background: #f6faef; border-color: #cbdcae; }
.option input:checked + .option-inner { border: 2px solid var(--teal); box-shadow: none; padding: 19px; }
.option input:focus-visible + .option-inner { outline: 3px solid rgba(45,118,97,.22); }
.option-number { min-height: 23px; }
.radio-ui { width: 17px; height: 17px; flex: 0 0 auto; border: 1.5px solid #9eafa6; background: var(--white); }
.option input:checked + .option-inner .radio-ui { border: 5px solid var(--teal); }
.option h3 { margin-top: 15px; }
.option-stats { margin-top: auto; }
.option-stats li { align-items: baseline; }

.legend-a, .marker-route.marker-a { background: #236b5b; }
.legend-b, .marker-route.marker-b { background: #6b914d; }
.legend-new-client, .marker-new-client { background: var(--orange); }
.legend-new-client { box-shadow: 0 0 0 3px #fff0e3, 0 0 0 4px var(--orange); }
.marker-new-client { box-shadow: 0 0 0 4px rgba(255,238,224,.95), 0 2px 9px rgba(112,58,15,.32); }

.map-card .map-marker { width: 16px; height: 16px; margin: 6px; border-width: 1.5px; font-size: 0; box-shadow: 0 1px 4px rgba(31,73,62,.3); }
.map-card .marker-new-client { width: 20px; height: 20px; margin: 4px; }
.map-card .marker-new-client::before { content: "+"; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; }
.map-card .map-meta { min-height: 34px; }
.map-card .map-disclaimer { font-size: 9px; }
.map-detail .route-map { height: 400px; }
.map-meta { background: #fbfcfa; }

.stop { min-height: 67px; }
.stop.is-new { background: #fff8f1; }
.stop.is-new .stop-name::after { color: #9a4d15; background: var(--amber-soft); border-radius: 999px; }

@media (max-width: 900px) {
  .option-inner { min-height: auto; }
}
@media (max-width: 650px) {
  .app-header { min-height: 74px; }
  .brand-logo { width: 88px; height: 48px; }
  .brand-product { display: none; }
  .map-detail .route-map { height: 350px; }
}