*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, Roboto, Arial, sans-serif;display:flex;align-items:center;justify-content:center;background:#111;color:#fff}
.app{width:100%;max-width:420px;padding:28px;border-radius:14px;background:linear-gradient(180deg,#1a1a1a,#0f0f0f);box-shadow:0 8px 30px rgba(0,0,0,0.6);text-align:center}
h1{font-size:20px;margin-bottom:18px}
.eta{font-size:84px;font-weight:700;padding:20px;border-radius:12px}
.secondary{font-size:18px;margin-top:8px;color:#bbb}
.meta{margin-top:12px;font-size:13px;color:#999}
.controls{margin-top:16px}
button{padding:8px 12px;border-radius:8px;border:0;background:#222;color:#fff;cursor:pointer}
button:hover{opacity:0.95}
.warning{margin-top:12px;padding:10px;border-radius:8px;font-weight:700}
.hidden{display:none}

/* States */
.eta.ok{background:linear-gradient(180deg,#0f4,#090);color:#012}
.eta.far{background:linear-gradient(180deg,#2f8,#197);color:#012}
.eta.soon{background:linear-gradient(180deg,#ffb347,#ff6b6b);color:#3c0202}
.eta.arriving{background:linear-gradient(180deg,#ff3b3b,#ff0000);color:#fff}
.eta.unknown{background:linear-gradient(180deg,#333,#222);color:#ddd}

/* frantic flashing for urgent state */
@keyframes frantic {0%{box-shadow:0 0 0 0 rgba(255,0,0,0.7)}50%{box-shadow:0 0 40px 10px rgba(255,165,0,0.2)}100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}}
.eta.soon, .eta.arriving{animation:frantic 1s infinite}
.warning{background:#ff0033;color:#fff}