:root {
  --wlstm-ink: #142d32;
  --wlstm-muted: #668187;
  --wlstm-border: #d8e5e4;
  --wlstm-surface: #f6faf9;
  --wlstm-accent: #1f7a72;
  --wlstm-accent-dark: #155c56;
  --wlstm-danger: #aa423a;
}

.wlstm-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 2rem auto;
  padding: clamp(1.25rem, 4vw, 2.75rem);
  color: var(--wlstm-ink);
  background: linear-gradient(145deg, #ffffff 0%, var(--wlstm-surface) 100%);
  border: 1px solid var(--wlstm-border);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(20, 45, 50, .09);
  font-family: inherit;
}
.wlstm-shell *, .wlstm-shell *::before, .wlstm-shell *::after { box-sizing: border-box; }
.wlstm-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; }
.wlstm-kicker { margin:0 0 .35rem; color:var(--wlstm-accent); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.wlstm-shell h2 { margin:0; font-size:clamp(1.65rem, 4vw, 2.45rem); letter-spacing:-.04em; line-height:1.04; }
.wlstm-live-pill { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border:1px solid #cce5e0; border-radius:999px; color:var(--wlstm-accent-dark); background:#f0fbf8; white-space:nowrap; font-size:.8rem; font-weight:700; }
.wlstm-live-pill span { width:.45rem; height:.45rem; border-radius:50%; background:#3bb998; box-shadow:0 0 0 4px rgba(59,185,152,.15); }
.wlstm-form { margin-bottom:1.25rem; }
.wlstm-form label { display:block; margin-bottom:.45rem; color:var(--wlstm-muted); font-size:.82rem; font-weight:700; }
.wlstm-form-row { display:flex; gap:.65rem; }
.wlstm-form input { min-width:0; flex:1; border:1px solid #bed3d1; border-radius:10px; padding:.85rem 1rem; color:var(--wlstm-ink); background:#fff; font:inherit; }
.wlstm-form input:focus { outline:3px solid rgba(31,122,114,.16); border-color:var(--wlstm-accent); }
.wlstm-form button { border:0; border-radius:10px; padding:.85rem 1.15rem; color:#fff; background:var(--wlstm-accent); font:inherit; font-weight:800; cursor:pointer; transition:background .2s, transform .2s; }
.wlstm-form button:hover { background:var(--wlstm-accent-dark); transform:translateY(-1px); }
.wlstm-feedback { min-height:1.25rem; margin:.5rem 0 1rem; color:var(--wlstm-muted); font-size:.9rem; }
.wlstm-feedback.is-error { color:var(--wlstm-danger); font-weight:650; }
.wlstm-feedback.is-loading { color:var(--wlstm-accent-dark); }
.wlstm-summary { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin-bottom:1.2rem; overflow:hidden; border:1px solid var(--wlstm-border); border-radius:14px; background:var(--wlstm-border); }
.wlstm-summary > div { min-width:0; padding:1rem; background:#fff; }
.wlstm-label { display:block; margin-bottom:.35rem; color:var(--wlstm-muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.wlstm-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; }
.wlstm-map { position:relative; min-height:clamp(420px, 72vh, 860px); overflow:hidden; border-radius:16px; background:#eaf3f1; }
.wlstm-map .leaflet-container { min-height:clamp(420px, 72vh, 860px); font-family:inherit; }
.wlstm-live-marker { position:relative; display:flex; align-items:flex-end; justify-content:center; width:26px !important; height:34px !important; }
.wlstm-live-marker-pulse { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:22px; height:22px; border:2px solid rgba(220,38,38,.45); border-radius:50%; animation:wlstm-pulse 1.8s ease-out infinite; }
.wlstm-live-marker-pin { position:relative; z-index:1; font-size:26px; line-height:1; filter:drop-shadow(0 2px 5px rgba(127,29,29,.5)); }
.wlstm-live-marker-label { position:absolute; left:32px; bottom:2px; max-width:200px; padding:.35rem .55rem; border:1px solid rgba(127,29,29,.15); border-radius:7px; color:#7f1d1d; background:#fff; box-shadow:0 3px 12px rgba(20,45,50,.16); font-size:.72rem; font-weight:700; line-height:1.25; }
.wlstm-live-marker-label strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; font-weight:800; }
.wlstm-live-marker-label span { display:block; margin-top:.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; color:var(--wlstm-muted); font-weight:600; }
.wlstm-status-tooltip { border:0; border-radius:7px; color:#7f1d1d; background:#fff; box-shadow:0 3px 12px rgba(20,45,50,.16); font-weight:800; }
.wlstm-status-tooltip::before { border-top-color:#fff; }
@keyframes wlstm-pulse { 0% { transform:scale(.65); opacity:.8; } 70%, 100% { transform:scale(1.35); opacity:0; } }
.wlstm-route-marker { display:flex; align-items:center; justify-content:center; width:22px !important; height:22px !important; }
.wlstm-route-marker-badge { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(20,45,50,.3); }
.wlstm-route-marker-origin .wlstm-route-marker-badge { color:#2563eb; border:2px solid #2563eb; }
.wlstm-route-marker-destination .wlstm-route-marker-badge { color:#7f1d1d; border:2px solid #7f1d1d; }
.wlstm-route-marker-label { position:absolute; left:26px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; max-width:160px; padding:.3rem .55rem; border-radius:7px; background:#fff; box-shadow:0 3px 12px rgba(20,45,50,.16); font-size:.68rem; line-height:1.25; white-space:nowrap; }
.wlstm-route-marker-label strong { font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.62rem; }
.wlstm-route-marker-label span { color:var(--wlstm-muted); font-weight:600; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.wlstm-route-marker-origin .wlstm-route-marker-label { border:1px solid rgba(37,99,235,.18); }
.wlstm-route-marker-origin .wlstm-route-marker-label strong { color:#2563eb; }
.wlstm-route-marker-destination .wlstm-route-marker-label { border:1px solid rgba(127,29,29,.15); left:auto; right:26px; }
.wlstm-route-marker-destination .wlstm-route-marker-label strong { color:#7f1d1d; }
.wlstm-map.is-empty { display:flex; align-items:center; justify-content:center; }
.wlstm-map-empty { position:absolute; z-index:500; top:50%; left:50%; width:min(310px, calc(100% - 2rem)); transform:translate(-50%, -50%); padding:2rem; text-align:center; color:var(--wlstm-muted); background:rgba(255,255,255,.88); border:1px solid var(--wlstm-border); border-radius:14px; box-shadow:0 10px 28px rgba(20,45,50,.08); }
.wlstm-map-empty-icon { display:block; margin-bottom:.65rem; color:var(--wlstm-accent); font-size:2rem; }
.wlstm-map-empty p { margin:0; line-height:1.5; }
.wlstm-map-load-error { position:static; transform:none; width:100%; max-width:420px; }
.wlstm-map-load-error .wlstm-map-empty-icon { color:var(--wlstm-danger); }
.wlstm-route-line { animation:wlstm-dash-flow .9s linear infinite; filter:drop-shadow(0 0 4px rgba(220,38,38,.85)); }
@keyframes wlstm-dash-flow { to { stroke-dashoffset:-18; } }
.wlstm-below-map { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.25rem; }
.wlstm-updated { color:var(--wlstm-muted); font-size:.8rem; line-height:1.5; }
.wlstm-timeline h3 { margin:0 0 .85rem; font-size:1rem; }
.wlstm-timeline ol { position:relative; display:grid; gap:0; margin:0; padding:0; list-style:none; }
.wlstm-timeline ol::before { content:""; position:absolute; top:9px; bottom:9px; left:5px; width:1px; background:var(--wlstm-border); }
.wlstm-timeline li { position:relative; display:flex; gap:.8rem; padding:0 0 1rem; }
.wlstm-timeline li:last-child { padding-bottom:0; }
.wlstm-dot { position:relative; z-index:1; flex:none; width:11px; height:11px; margin-top:.2rem; border:3px solid #d6ebe6; border-radius:50%; background:var(--wlstm-accent); }
.wlstm-timeline li:not(.is-current) .wlstm-dot { background:#fff; border-color:#bdd0ce; }
.wlstm-timeline strong, .wlstm-timeline span, .wlstm-timeline time { display:block; }
.wlstm-timeline strong { font-size:.9rem; }
.wlstm-timeline span, .wlstm-timeline time { margin-top:.18rem; color:var(--wlstm-muted); font-size:.8rem; }
@media (max-width: 680px) {
  .wlstm-shell { margin: 1rem auto; border-radius: 16px; }
  .wlstm-header { flex-direction:column; }
  .wlstm-form-row, .wlstm-below-map { display:flex; flex-direction:column; }
  .wlstm-form button { width:100%; }
  .wlstm-summary { grid-template-columns:1fr 1fr; }
  .wlstm-summary > div { padding:.8rem 1rem; }
  .wlstm-map, .wlstm-map .leaflet-container { min-height:clamp(320px, 58vh, 520px); }
  .wlstm-live-marker-label { max-width:140px; font-size:.68rem; }
  .wlstm-live-marker-label strong, .wlstm-live-marker-label span { max-width:130px; }
  .wlstm-route-marker-label { max-width:120px; font-size:.62rem; padding:.25rem .45rem; }
  .wlstm-route-marker-label span { max-width:110px; }
}