:root{
    --bg:#0B0E1A;
    --bg2:#141a2e;
    --card:#161d33;
    --borda:#26304d;
    --texto:#eef2ff;
    --suave:#8e99b8;
    --teal:#1AA6A0;
    --teal-claro:#3fd1c9;
    --coral:#FF5A36;
    --amarelo:#ffc94d;
    --raio:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
    background:radial-gradient(120% 60% at 50% 0%, #17203b 0%, var(--bg) 60%) fixed, var(--bg);
    color:var(--texto);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    min-height:100vh;
    display:flex;flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);
}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--teal-claro)}

/* topo */
.topo{
    display:flex;align-items:center;justify-content:space-between;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);font-size:1.15rem}
.marca img{border-radius:9px}
.marca b{color:var(--teal-claro)}
.topo-link{
    text-decoration:none;font-weight:600;font-size:.95rem;
    padding:8px 14px;border:1px solid var(--borda);border-radius:999px;background:var(--bg2);
}

main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:8px 16px 24px}

/* busca */
.mic-area{display:flex;flex-direction:column;align-items:center;gap:12px;margin:18px 0 22px}
.mic{
    width:148px;height:148px;border-radius:50%;border:0;cursor:pointer;
    background:radial-gradient(circle at 35% 30%, #ff7a5c, var(--coral) 60%, #d93e1c);
    box-shadow:0 14px 40px rgba(255,90,54,.35), inset 0 -6px 14px rgba(0,0,0,.2);
    display:grid;place-items:center;transition:transform .15s;
}
.mic:active{transform:scale(.95)}
.mic svg{width:62px;height:62px;fill:#fff}
.mic.ouvindo{animation:pulso 1.2s infinite}
@keyframes pulso{
    0%{box-shadow:0 0 0 0 rgba(255,90,54,.6)}
    100%{box-shadow:0 0 0 34px rgba(255,90,54,0)}
}
.mic-dica{color:var(--suave);font-size:1rem;text-align:center;min-height:1.4em}
.mic-dica b{color:var(--texto)}

.busca{display:flex;gap:10px}
.busca input{
    flex:1;min-width:0;height:60px;border-radius:14px;border:2px solid var(--borda);
    background:var(--bg2);padding:0 18px;font-size:1.6rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;outline:none;
}
.busca input:focus{border-color:var(--teal)}
.busca input::placeholder{color:#4d5878;font-weight:500;text-transform:none;letter-spacing:0;font-size:1.1rem}
.btn{
    height:60px;padding:0 22px;border-radius:14px;border:0;cursor:pointer;font-weight:700;font-size:1.05rem;
    background:var(--teal);color:#fff;
}
.btn:active{filter:brightness(.9)}
.btn-sec{background:var(--bg2);border:1px solid var(--borda);color:var(--texto)}
.btn-perigo{background:transparent;border:1px solid #6b2a1d;color:#ff8a70}

.sugestoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
    padding:8px 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--borda);
    font-weight:700;cursor:pointer;font-size:.95rem;
}

/* resultado */
.resultado{
    margin-top:22px;border-radius:24px;padding:22px 20px 20px;
    background:linear-gradient(160deg,#18243f,#121829);
    border:1px solid var(--borda);text-align:center;
    animation:entra .25s ease-out;
}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.res-rota{font-size:1rem;color:var(--suave);text-transform:uppercase;letter-spacing:.12em}
.res-rota b{display:block;font-size:2.4rem;color:var(--texto);letter-spacing:.03em;margin-top:2px}
.res-pos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 12px}
.res-caixa{background:rgba(26,166,160,.12);border:2px solid var(--teal);border-radius:18px;padding:12px 6px}
.res-caixa small{display:block;color:var(--teal-claro);font-weight:700;letter-spacing:.14em;font-size:.8rem}
.res-caixa strong{display:block;font-size:4.2rem;line-height:1.05;font-weight:800}
.res-hora{color:var(--suave);font-size:.9rem}
.res-hora.velho{color:var(--amarelo);font-weight:600}
.res-vazio{border-color:#6b2a1d;background:linear-gradient(160deg,#2a1714,#161212)}
.res-vazio .res-rota b{color:#ff8a70}

/* mapa */
.mapa-titulo{margin:24px 0 8px;font-size:.85rem;color:var(--suave);text-transform:uppercase;letter-spacing:.12em}
.mapa{overflow-x:auto;border-radius:14px;border:1px solid var(--borda);background:var(--bg2)}
.mapa table{border-collapse:collapse;width:100%;font-size:.85rem}
.mapa th{color:var(--suave);font-weight:600;padding:6px 4px;position:sticky;top:0;background:var(--bg2)}
.mapa th.lin{position:sticky;left:0}
.mapa td{border:1px solid var(--borda);text-align:center;padding:6px 4px;min-width:44px;height:34px;font-weight:700}
.mapa td.vazio{color:#39425f}
.mapa td.alvo{background:var(--coral);color:#fff}
.mapa td.dup{background:#4a3a10;color:var(--amarelo)}
.mapa td[data-rota]{cursor:pointer}

/* cadastro */
.cartao{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:16px;margin-bottom:16px}
.cartao h2{font-size:1rem;margin:0 0 12px;color:var(--suave);text-transform:uppercase;letter-spacing:.1em}
.campos{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.campo label{display:block;font-size:.8rem;color:var(--suave);margin-bottom:4px;font-weight:600}
.campo input{
    width:100%;height:56px;border-radius:12px;border:2px solid var(--borda);background:var(--bg2);
    padding:0 12px;font-size:1.4rem;font-weight:700;text-transform:uppercase;outline:none;text-align:center;
}
.campo input:focus{border-color:var(--teal)}
.acoes{display:flex;gap:10px;margin-top:12px}
.acoes .btn{flex:1}
.lista{width:100%;border-collapse:collapse}
.lista td{padding:10px 6px;border-bottom:1px solid var(--borda);font-weight:600}
.lista td.r{font-size:1.1rem}
.lista td.p{color:var(--teal-claro)}
.lista td.h{color:var(--suave);font-size:.8rem;font-weight:400}
.lista td.h.velho{color:var(--amarelo)}
.lista button{background:none;border:0;color:var(--suave);cursor:pointer;padding:6px 8px;font-size:1.1rem}
.resumo{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--suave)}
.resumo b{color:var(--texto);font-size:1.3rem}
textarea{
    width:100%;min-height:130px;border-radius:12px;border:2px solid var(--borda);background:var(--bg2);
    padding:10px;font-size:1rem;outline:none;
}
details summary{cursor:pointer;color:var(--suave);font-weight:600}
.pin-box{max-width:320px;margin:40px auto;text-align:center}
.pin-box input{
    width:100%;height:64px;border-radius:14px;border:2px solid var(--borda);background:var(--bg2);
    text-align:center;font-size:2rem;letter-spacing:.4em;outline:none;margin:14px 0;
}
.vazio-msg{color:var(--suave);text-align:center;padding:12px}

/* instalar */
.instalar{
    display:none;margin-top:26px;padding:14px 16px;border-radius:16px;border:1px dashed var(--borda);
    align-items:center;gap:12px;font-size:.92rem;color:var(--suave);
}
.instalar img{border-radius:10px}
.instalar.mostra{display:flex}
.instalar .btn{height:42px;padding:0 14px;font-size:.9rem;margin-left:auto;flex-shrink:0}

.rodape{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px;color:var(--suave);font-size:.85rem}
.rodape b{color:var(--texto)}

.toast{
    position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
    background:#0f1527;border:1px solid var(--borda);padding:12px 18px;border-radius:12px;
    opacity:0;pointer-events:none;transition:.2s;max-width:90vw;font-weight:600;z-index:9;
}
.toast.mostra{opacity:1;transform:translateX(-50%)}

@media (max-width:380px){
    .res-caixa strong{font-size:3.4rem}
    .campos{grid-template-columns:1fr 1fr}
    .campos .campo:first-child{grid-column:1/-1}
}