.tsp-page { background: #f8faf5; }
.tsp-page > header { background: transparent; border-bottom: 1px solid #e4e9e0; padding: 16px 0 !important; }
.tsp-page > header h1 { font-size: 17px; font-weight: 600; }
.tsp-page > header h1 a, .tsp-page > header h1 a:hover { color: #193e38; }
.tsp-shell {
    --ink: #193e38;
    --muted: #647570;
    --green: #246b52;
    max-width: 1240px;
    margin: 24px auto 48px;
    padding: 0 28px;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tsp-shell * { box-sizing: border-box; }
.tsp-title { font-size: 26px; font-weight: 600; margin: 0 0 24px; }
.tsp-workspace { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 24px; align-items: start; }
.tsp-panel, .tsp-map-card, .tsp-results { border: 1px solid #dce4dd; border-radius: 16px; background: #fff; overflow: hidden; }
.tsp-panel { padding: 24px; }
.tsp-field { margin: 0 0 18px; }
.tsp-field label, .tsp-stops legend { display: block; font-size: 13px; font-weight: 650; margin: 0 0 8px; }
.tsp-stops { border: 0; padding: 0; min-width: 0; }
.tsp-stops legend { width: 100%; }
.tsp-label-row, .tsp-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#stop-count { float: right; font-size: 11px; color: var(--muted); white-space: nowrap; }
.tsp-shell input[type=text], .tsp-shell select {
    width: 100%; min-width: 0; min-height: 46px;
    border: 1px solid #ced9d1; border-radius: 8px;
    background: #fcfdfa; color: var(--ink);
    font: inherit; font-size: 16px; padding: 11px 12px;
}
.tsp-shell input::placeholder { color: #78867e; font-size: 14px; }
.tsp-shell :focus-visible { outline: 3px solid #a7cfae; outline-offset: 3px; }
.tsp-check { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 40px; margin: 0 0 18px; cursor: pointer; }
.tsp-check input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; }
.tsp-stop-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tsp-remove-stop { flex: 0 0 44px; height: 46px; background: none; border: 1px solid #dce4dd; border-radius: 8px; color: var(--muted); font-size: 24px; cursor: pointer; }
.tsp-remove-stop:hover { background: #f3f6ee; color: #a23b2c; }
.tsp-primary, .tsp-secondary { font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; min-height: 46px; padding: 11px 16px; cursor: pointer; }
.tsp-primary { width: 100%; background: var(--green); color: #fff; border: 1px solid var(--green); }
.tsp-primary:hover { background: #19523e; }
.tsp-primary:disabled { opacity: .55; cursor: wait; }
.tsp-secondary { background: #fff; color: var(--green); border: 1px solid #ced9d1; }
.tsp-text-button { background: none; border: 0; color: var(--green); font: inherit; font-size: 13px; min-height: 44px; cursor: pointer; padding: 4px; }
.tsp-text-button:hover { text-decoration: underline; }
.tsp-text-button:disabled { opacity: .5; cursor: default; text-decoration: none; }
#clear { display: block; margin: 12px auto 0; min-width: 120px; }
#clear.tsp-confirm-clear { color: #a23b2c; background: #fff1ec; border-radius: 8px; font-weight: 600; }
.tsp-status { font-size: 13px; line-height: 1.5; margin: 0; }
.tsp-status:not(:empty) { margin-top: 12px; }
.tsp-status[data-error=true], .tsp-notice { color: #a23b2c; }
.tsp-map-card { position: relative; background: #f0f3e9; }
#map { height: 460px; width: 100%; }
.tsp-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: #f0f3e9; background-image: linear-gradient(#dce4d955 1px, transparent 1px), linear-gradient(90deg, #dce4d955 1px, transparent 1px); background-size: 38px 38px; }
.tsp-map-empty svg { width: 290px; max-width: 90%; height: 165px; }
.tsp-map-empty circle { fill: #fff; stroke: #246b52; stroke-width: 5; }
.tsp-route-shadow { fill: none; stroke: #d0dfc8; stroke-width: 20; stroke-linecap: round; }
.tsp-route-line { fill: none; stroke: #246b52; stroke-width: 3; stroke-dasharray: 6 6; }
.tsp-results { padding: 24px; margin-top: 20px; }
.tsp-results h2 { text-align: left; font-size: 20px; font-weight: 650; margin: 0; }
.tsp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: #f3f6ee; border-radius: 10px; margin: 20px 0; padding: 18px 16px; }
.tsp-stats strong, .tsp-stats span { display: block; }
.tsp-stats strong { font-size: 21px; font-weight: 650; }
.tsp-stats span { font-size: 11px; color: var(--muted); margin-top: 5px; }
.tsp-itinerary { list-style: none; padding: 0; margin: 0; counter-reset: stop; }
.tsp-itinerary li { position: relative; padding: 0 0 24px 44px; min-height: 56px; overflow-wrap: anywhere; }
.tsp-itinerary li:last-child { padding-bottom: 0; }
.tsp-itinerary li:before { counter-increment: stop; content: counter(stop); position: absolute; left: 0; top: 0; background: #e9f1e5; color: var(--green); border-radius: 50%; width: 28px; height: 28px; text-align: center; line-height: 28px; font-size: 12px; font-weight: 700; }
.tsp-itinerary li:not(:last-child):after { content: ""; position: absolute; left: 13px; top: 33px; bottom: 5px; width: 1px; background: #dce4dd; }
.tsp-itinerary strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.tsp-itinerary small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.tsp-itinerary a { display: inline-block; font-size: 12px; color: var(--green); padding: 10px 0 0; min-height: 34px; }
.tsp-shell [hidden] { display: none !important; }
.tsp-page .pac-container { border-radius: 8px; font-family: inherit; }
.tsp-page .pac-item { min-height: 44px; padding: 8px; line-height: 28px; cursor: pointer; }
@media (max-width: 800px) {
    .tsp-workspace { grid-template-columns: 1fr; }
    .tsp-shell { max-width: 620px; padding: 0 18px; margin-top: 20px; }
    .tsp-title { font-size: 24px; margin-bottom: 20px; }
    .tsp-panel, .tsp-results { padding: 20px; }
    #map { height: 340px; }
    .tsp-stats { padding: 16px 12px; gap: 8px; }
    .tsp-stats strong { font-size: 18px; }
}