:root{
  --navy-950:#070f1c; --navy-900:#0c1b2e; --navy-850:#0f223a; --navy-800:#142c47; --navy-700:#1c3a5c;
  --gold-500:#f5c518; --gold-400:#ffd84d;
  --white:#f4f7fb; --gray-300:#c3cfe0; --gray-400:#93a4bd; --gray-500:#6c7f9c;
  --ok:#3ecf8e; --busy:#f5a623;
  --font-head:'Baloo 2','Segoe UI Rounded',sans-serif;
  --font-body:'Inter','Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;margin:0;overscroll-behavior:none;}
body{
  background:var(--navy-900); color:var(--white); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  /* rispetta le safe-area di iPhone (notch/home indicator) quando installata come app */
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:var(--font-head);margin:0;}
button{font-family:inherit;cursor:pointer;border:none;}
input{font-family:inherit;}

.app{height:100vh;height:100dvh;display:flex;flex-direction:column;}

/* ---- topbar ---- */
.topbar{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--navy-950);border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.topbar img{height:30px;width:30px;border-radius:8px;}
.topbar span{font-family:var(--font-head);font-weight:700;font-size:1.05rem;}
.topbar .status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:auto;box-shadow:0 0 0 3px rgba(62,207,142,.25);}

/* ---- schermata inserimento riferimento ---- */
.screen-lookup{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:28px 26px; gap:18px;
}
.screen-lookup .hero-icon{font-size:3rem;text-align:center;}
.screen-lookup h1{font-size:1.5rem;text-align:center;line-height:1.3;}
.screen-lookup p{color:var(--gray-400);text-align:center;font-size:.92rem;margin:0;}
.lookup-field{
  display:flex;gap:10px;margin-top:6px;
}
.lookup-field input{
  flex:1;padding:15px 16px;border-radius:12px;border:1.5px solid var(--navy-700);
  background:var(--navy-850);color:var(--white);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;
  outline:none;
}
.lookup-field input:focus{border-color:var(--gold-500);}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-400),var(--gold-500));
  color:#241a02;font-weight:700;border-radius:100px;padding:15px 20px;font-size:1rem;
  box-shadow:0 10px 24px -8px rgba(245,197,24,.5);
}
.lookup-error{color:#ff8686;font-size:.85rem;text-align:center;min-height:1.2em;}
.lookup-hint{
  margin-top:24px;background:var(--navy-850);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:16px 18px;color:var(--gray-400);font-size:.85rem;line-height:1.5;
}

/* ---- schermata tracciamento ---- */
.screen-track{flex:1;display:none;flex-direction:column;position:relative;}
.screen-track.active{display:flex;}
.screen-lookup.hidden{display:none;}

#track-map{flex:1;min-height:0;}

.status-banner{
  position:absolute;top:16px;left:16px;right:16px;
  background:rgba(12,27,46,.92); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:600;
  z-index:500;
}
.status-banner .dot{width:9px;height:9px;border-radius:50%;background:var(--gold-500);flex-shrink:0;}
.status-banner.done .dot{background:var(--ok);}

.ride-card{
  background:var(--navy-950); border-top:1px solid rgba(255,255,255,.08);
  border-radius:22px 22px 0 0; padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.ride-card-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.taxi-avatar{
  width:52px;height:52px;border-radius:50%;background:var(--navy-800);
  border:2px solid var(--gold-500); display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  flex-shrink:0;
}
.ride-card-top h3{font-size:1.05rem;}
.ride-card-top p{margin:2px 0 0;color:var(--gray-400);font-size:.85rem;}
.eta-box{margin-left:auto;text-align:right;}
.eta-box b{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--gold-400);}
.eta-box span{font-size:.72rem;color:var(--gray-400);}

.ride-route{
  display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:14px;
}
.ride-route div{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--gray-300);}
.ride-route .marker{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.ride-route .marker.start{background:var(--gold-500);}
.ride-route .marker.end{background:var(--gray-500);}

.ride-actions{display:flex;gap:10px;}
.btn-call, .btn-new{
  flex:1;padding:13px;border-radius:100px;font-weight:700;font-size:.92rem;text-align:center;
}
.btn-call{background:rgba(62,207,142,.14);color:var(--ok);}
.btn-new{background:var(--navy-800);color:var(--gray-300);}

@media (min-width:520px){
  body{display:flex;justify-content:center;background:var(--navy-950);}
  .app{max-width:460px;box-shadow:0 0 60px rgba(0,0,0,.5);}
}