@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&family=Sora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root{
 --navy:#0F2F4F;
 --ink:#14213D;
 --slate:#5B6B82;
 --amber:#F2A93B;
 --amber-soft:#FCEFD9;
 --green:#1B7A4F;
 --green-dark:#0F5A38;
 --green-soft:#E4F3EA;
 --red:#D7263D;
 --red-soft:#FBE3E6;
 --mist:#F4F7FA;
 --surface:#FFFFFF;
 --line:#D9E1EA;
 --map:#E8EFF5;

 --radius:18px;
 --shadow:0 8px 30px rgba(15,47,79,.06);
}

*{box-sizing:border-box}

html,body{
 margin:0;
 min-height:100%;
 background:var(--mist);
 color:var(--ink);
 font-family:"Source Sans 3",sans-serif;
}

body{
 padding-bottom:86px;
}

h1,h2,h3,.z-brand{
 font-family:"Sora",sans-serif;
}

a{color:inherit}

.z-topbar{
 height:64px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 18px;
 background:rgba(244,247,250,.94);
 backdrop-filter:blur(14px);
 position:sticky;
 top:0;
 z-index:1200;
}

.z-brand{
 display:flex;
 align-items:center;
 gap:9px;
 text-decoration:none;
 color:var(--navy);
 font-weight:700;
 letter-spacing:.04em;
}

.z-logo{
 width:29px;
 height:34px;
 display:block;
}

.z-user{
 width:36px;
 height:36px;
 border-radius:50%;
 background:#DDEBE8;
 color:var(--navy);
 display:flex;
 align-items:center;
 justify-content:center;
 font-family:"Sora",sans-serif;
 font-size:13px;
 font-weight:700;
 text-decoration:none;
}

.z-page{
 width:min(100%,760px);
 margin:0 auto;
 padding:12px 16px 38px;
}

.z-title{
 font-size:30px;
 line-height:1.15;
 margin:8px 0 3px;
 color:var(--navy);
 letter-spacing:-.025em;
}

.z-subtitle{
 color:var(--slate);
 font-size:15px;
 margin-bottom:18px;
}

.z-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:17px;
 box-shadow:var(--shadow);
 margin-bottom:14px;
}

.z-card-title{
 font-family:"Sora",sans-serif;
 font-weight:600;
 color:var(--navy);
 font-size:16px;
}

.z-muted{
 color:var(--slate);
}

.z-chip{
 display:inline-flex;
 align-items:center;
 gap:5px;
 padding:5px 10px;
 border-radius:999px;
 font-size:12px;
 font-weight:600;
}

.z-chip-ok{
 background:var(--green-soft);
 color:var(--green-dark);
}

.z-chip-warn{
 background:var(--amber-soft);
 color:#7A4B06;
}

.z-chip-danger{
 background:var(--red-soft);
 color:#8A1526;
}

.z-btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:44px;
 border:0;
 border-radius:12px;
 padding:10px 15px;
 font:600 15px "Source Sans 3",sans-serif;
 text-decoration:none;
 cursor:pointer;
}

.z-btn-primary{
 background:var(--amber);
 color:var(--ink);
}

.z-btn-secondary{
 background:white;
 color:var(--navy);
 border:1px solid var(--line);
}

.z-btn-navy{
 background:var(--navy);
 color:white;
}

.z-field{
 width:100%;
 border:1px solid var(--line);
 border-radius:12px;
 padding:12px 13px;
 background:white;
 color:var(--ink);
 font:500 16px "Source Sans 3",sans-serif;
 outline:none;
}

.z-field:focus{
 border-color:var(--navy);
 box-shadow:0 0 0 3px rgba(15,47,79,.07);
}

.z-label{
 display:block;
 font-size:13px;
 font-weight:600;
 color:var(--ink);
 margin:14px 0 6px;
}

.material-symbols-rounded{
 font-size:22px;
 line-height:1;
}

.z-bottom-nav{
 position:fixed;
 left:0;
 right:0;
 bottom:0;
 height:78px;
 background:rgba(255,255,255,.97);
 border-top:1px solid var(--line);
 display:grid;
 grid-template-columns:repeat(6,1fr);
 z-index:2000;
 padding-bottom:env(safe-area-inset-bottom);
}

.z-bottom-nav a{
 min-width:0;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:3px;
 color:var(--slate);
 font-size:10.5px;
 font-weight:500;
 text-decoration:none;
}

.z-bottom-nav a .material-symbols-rounded{
 font-size:21px;
}

.z-bottom-nav a.active{
 color:var(--navy);
 font-weight:700;
}

.z-bottom-nav a.active .material-symbols-rounded{
 color:var(--amber);
}

.z-map-wrap{
 position:relative;
 border-radius:20px;
 overflow:hidden;
 border:1px solid var(--line);
 background:var(--map);
}

#map{
 width:100%;
 height:min(67vh,620px);
 min-height:470px;
}

.z-map-card{
 position:absolute;
 left:14px;
 right:14px;
 bottom:14px;
 z-index:700;
 background:rgba(255,255,255,.95);
 backdrop-filter:blur(10px);
 border:1px solid rgba(217,225,234,.9);
 border-radius:15px;
 padding:12px 14px;
 box-shadow:0 8px 25px rgba(15,47,79,.12);
}

.z-map-card strong{
 color:var(--navy);
}

.z-route-line{
 display:flex;
 align-items:center;
 gap:8px;
 color:var(--slate);
 font-size:13px;
 margin-top:4px;
}

.z-route-dot{
 width:8px;
 height:8px;
 border-radius:50%;
 background:var(--amber);
}

@media(min-width:800px){
 .z-bottom-nav{
   left:50%;
   transform:translateX(-50%);
   max-width:900px;
   border-left:1px solid var(--line);
   border-right:1px solid var(--line);
 }
}

.z-bottom-nav{
 grid-template-columns:repeat(auto-fit,minmax(52px,1fr));
}

.z-nav-icon-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.z-nav-badge{
    position:absolute;
    top:-7px;
    right:-11px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:999px;
    background:#D7263D;
    color:#fff;
    border:2px solid #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:700;
    line-height:1;
}

.hero-delayed{
    background:#FCEFD9;
    color:#7A4B06;
}

.hero-disconnected{
    background:#FBE3E6;
    color:#8A1526;
}