/* ── VEKTOR DESIGN SYSTEM · SOS GUINCHO ── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0!important}

:root{
  --black:#000000;
  --surface:#0d0d0d;
  --surface2:#181818;
  --ink:#f0f0fa;
  --ink-mid:rgba(240,240,250,0.6);
  --ink-dim:rgba(240,240,250,0.28);
  --gold:#5BA3E8;
  --gold-dark:#1549C5;
  --ghost-bg:rgba(240,240,250,0.07);
  --ghost-bd:rgba(240,240,250,0.28);
  --line:rgba(240,240,250,0.1);
  --danger:#FF5F57;
}

html,body{
  background:#000;color:var(--ink);
  font-family:'Rajdhani',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

#app{
  max-width:520px;
  margin:0 auto;
  padding:24px 20px 48px;
}

/* ── TOPBAR ── */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  border:1px solid var(--line);
  background:var(--surface);
  margin-bottom:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:6px;height:28px;
  background:var(--gold);
  box-shadow:0 0 14px rgba(91,163,232,0.55);
}
.brand-text{
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;letter-spacing:.22em;
  color:var(--ink);line-height:1;
}
.brand-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:4px;
}
.phase-status{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}

/* ── PHASE ── */
.phase.hidden{display:none}

/* ── CARD ── */
.card,.track-card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:32px 26px;
}
.card.center{text-align:center}

.card-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.card-eyebrow::before{
  content:'';width:28px;height:1px;background:var(--gold);
  flex-shrink:0;
}
.card.center .card-eyebrow{justify-content:center}

.card-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:48px;line-height:.95;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);
  margin-bottom:14px;
  filter:drop-shadow(0 0 32px rgba(240,240,250,0.06));
}
.card-title-sm{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
.card-sub{
  font-family:'Rajdhani',sans-serif;font-weight:300;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mid);
  margin-bottom:28px;line-height:1.6;
}
.card-sub.mono-sub{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;
  color:var(--gold);
}

/* ── FORM ── */
.field{margin-bottom:18px}
label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:8px;
}
.loc-row{display:flex;gap:8px;align-items:stretch}
.loc-row input{flex:1}
.loc-btn{
  flex-shrink:0;
  width:46px;
  background:rgba(91,163,232,0.08);
  border:1px solid var(--gold);
  color:var(--gold);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.loc-btn:hover{background:var(--gold);color:#000}
.loc-btn.loading svg{animation:geoSpin 1s linear infinite}
.loc-btn.success{background:var(--gold);color:#000}
@keyframes geoSpin{to{transform:rotate(360deg)}}
.field-hint{
  font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);
  margin-top:8px;
}
.field-hint.error{color:var(--danger)}
.field-hint.success{color:var(--gold)}
input,select{
  width:100%;
  background:#000;
  border:1px solid var(--line);
  color:var(--ink);
  padding:14px 16px;
  font-family:'Rajdhani',sans-serif;font-weight:500;
  font-size:14px;letter-spacing:.06em;
  outline:none;
  transition:border-color .2s;
}
input:focus,select:focus{border-color:var(--gold)}
select{
  appearance:none;-webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-mid) 50%),
    linear-gradient(135deg,var(--ink-mid) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

/* ── BUTTONS ── */
.btn-gold{
  width:100%;margin-top:8px;
  padding:16px 24px;
  background:var(--gold);
  border:none;color:#fff;
  font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;
  transition:background .2s;
}
.btn-gold:hover{background:var(--gold-dark)}
.btn-arrow{
  font-family:'JetBrains Mono',monospace;font-weight:400;
  font-size:14px;
}

.btn-ghost{
  flex:1;
  padding:14px 18px;
  background:var(--ghost-bg);
  border:1px solid var(--ghost-bd);
  color:var(--ink);
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.btn-ghost:hover{
  background:rgba(240,240,250,0.12);
  border-color:rgba(240,240,250,0.5);
}

/* ── PHASE 2 · RADAR ── */
.radar{
  position:relative;
  width:140px;height:140px;
  margin:18px auto 28px;
}
.radar-ring{
  position:absolute;inset:0;
  border:1px solid var(--gold);
  animation:pulse 2s infinite ease-out;
}
.radar-ring.r2{animation-delay:.66s}
.radar-ring.r3{animation-delay:1.33s}
.radar-core{
  position:absolute;left:50%;top:50%;
  width:12px;height:12px;background:var(--gold);
  transform:translate(-50%,-50%);
  box-shadow:0 0 30px var(--gold);
}
@keyframes pulse{
  0%{transform:scale(.3);opacity:1}
  100%{transform:scale(1.4);opacity:0}
}
.progress{
  width:100%;height:2px;
  background:var(--line);
  margin-top:24px;
}
.progress-bar{
  height:100%;background:var(--gold);
  width:0%;transition:width .3s;
}

/* ── PHASE 3 · TRACKING ── */
.track-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;margin-bottom:20px;
}
.countdown{
  font-family:'Bebas Neue',sans-serif;
  font-size:44px;letter-spacing:.04em;
  color:var(--gold);line-height:1;
  filter:drop-shadow(0 0 16px rgba(91,163,232,0.35));
}

.map-wrap{
  position:relative;width:100%;height:280px;
  background:#000;
  border:1px solid var(--line);
  overflow:hidden;
}
#map3d{position:absolute;inset:0;width:100%;height:100%}

/* MapLibre overrides — Vektor look */
.maplibregl-canvas{outline:none}
.maplibregl-ctrl-attrib{
  background:rgba(0,0,0,0.6)!important;
  font-family:'JetBrains Mono',monospace!important;
  font-size:8px!important;letter-spacing:.06em!important;
  color:var(--ink-dim)!important;
  padding:2px 6px!important;
}
.maplibregl-ctrl-attrib a{color:var(--ink-mid)!important}
.maplibregl-ctrl-attrib-button{display:none!important}

/* destination pin (broken Vektor scooter) */
.m-pin-dest{
  position:relative;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.m-pin-ring{
  position:absolute;inset:0;
  border:1px solid var(--danger);
  background:rgba(255,95,87,0.06);
  animation:pinPulse 2s infinite ease-out;
}
.m-pin-ring-2{animation-delay:1s}
@keyframes pinPulse{
  0%{transform:scale(.4);opacity:1}
  100%{transform:scale(1.3);opacity:0}
}
.m-pin-scooter{
  position:relative;width:28px;height:28px;
  background:rgba(0,0,0,0.78);
  padding:3px;border:1px solid var(--danger);
  filter:drop-shadow(0 0 6px rgba(255,95,87,0.6));
}

/* tow truck marker */
.m-truck{
  width:40px;height:24px;
  filter:drop-shadow(0 0 10px rgba(91,163,232,0.7));
  pointer-events:none;
}
.m-truck svg{width:100%;height:100%;display:block}

.map-overlay-tl{
  position:absolute;top:10px;left:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mid);
  background:rgba(0,0,0,0.6);
  padding:5px 10px;
  border:1px solid var(--line);
}
.map-overlay-tr{position:absolute;top:10px;right:12px}
.compass{
  width:36px;height:36px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.6);
  position:relative;
}
.compass-n{
  position:absolute;top:2px;left:50%;
  transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.1em;
  color:var(--gold);
}
.compass-arrow{
  position:absolute;left:50%;top:50%;
  width:1px;height:14px;background:var(--danger);
  transform:translate(-50%,-100%);
}
.map-bottom-bar{
  position:absolute;bottom:0;left:0;right:0;height:30px;
  background:rgba(0,0,0,0.78);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  gap:10px;padding:0 14px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
}
.mb-tag{color:var(--ink-dim)}
.mb-name{color:var(--ink)}
.mb-eta{color:var(--gold);font-weight:500}
.mb-divider{
  width:1px;height:12px;background:var(--line);
}

.flash{
  position:absolute;inset:0;background:#fff;
  opacity:0;pointer-events:none;
  transition:opacity .6s;
}
.flash.on{opacity:1}

/* ── INFO GRID ── */
.info-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  margin-top:20px;
  border:1px solid var(--line);
}
.info-block{
  background:#000;
  padding:16px 14px;
}
.info-label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:8px;
}
.info-value{
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;letter-spacing:.04em;
  color:var(--ink);
}

/* ── ACTIONS ── */
.actions{
  display:flex;gap:12px;
  margin-top:20px;
}
.btn-cancel-mini{
  flex:0 0 46px;padding:0;
  background:rgba(255,95,87,0.08);
  border-color:rgba(255,95,87,0.5);
  color:var(--danger);
  display:flex;align-items:center;justify-content:center;
}
.btn-cancel-mini:hover{
  background:var(--danger);color:#000;border-color:var(--danger);
}

/* ── CANCEL (phase 2) ── */
.btn-ghost-cancel{
  width:100%;margin-top:24px;padding:14px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-dim);
  font-family:'Rajdhani',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.btn-ghost-cancel:hover{
  color:var(--danger);border-color:var(--danger);
}

/* ── PHASE 4 · CHECK ── */
.check-mark{
  width:72px;height:72px;
  border:1px solid var(--gold);
  margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(91,163,232,0.35);
}
.check-mark svg{width:46px;height:46px}

/* ── RESPONSIVE ── */
@media(max-width:380px){
  #app{padding:16px 14px 32px}
  .card,.track-card{padding:24px 18px}
  .card-title{font-size:40px}
  .countdown{font-size:36px}
  .info-value{font-size:20px}
  .map-wrap{height:240px}
}