:root{
  --orange:#F97316; --orange-d:#D85A30; --teal:#0F6E56; --teal-l:#E1F5EE;
  --ink:#0F172A; --muted:#64748B; --line:#EAE7DF; --bg:#F7F5EF; --card:#fff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:'Nunito',system-ui,sans-serif; background:var(--bg); color:var(--ink);}
#app{max-width:480px; margin:0 auto; height:100vh; display:flex; flex-direction:column; background:var(--bg); position:relative;}

.top{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--card); border-bottom:1px solid var(--line); z-index:5;}
.logo{font-size:20px; font-weight:800; letter-spacing:-.6px;}
.logo .s{color:var(--orange-d);} .logo .g{color:var(--teal);}
.loc{font-size:13px; color:var(--muted); font-weight:700;}
.back-link{color:var(--muted); font-weight:800; text-decoration:none; font-size:14px; width:44px;}

.chips{display:flex; gap:8px; padding:12px 14px; overflow-x:auto; background:var(--card); border-bottom:1px solid var(--line); z-index:5;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; height:34px; padding:0 14px; border-radius:20px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;}
.chip.on{background:var(--teal); color:#fff; border-color:var(--teal);}
.chip .b{filter:grayscale(0);}

#map{flex:1; width:100%; z-index:1;}
.leaflet-container{background:#e8ede9;}

/* Custom pin markers */
.sg-pin{position:relative; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background:#fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 3px 10px rgba(15,23,42,.28); border:2px solid var(--orange);}
.sg-pin.later{border-color:var(--teal); opacity:.9;}
.sg-pin span{transform:rotate(45deg);}
.sg-pin.open::after{content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--orange); transform:rotate(45deg); animation:pulse 2s ease-out infinite; opacity:0;}
@keyframes pulse{0%{transform:rotate(45deg) scale(.7); opacity:.7;} 100%{transform:rotate(45deg) scale(1.5); opacity:0;}}

/* Bottom sheet */
.sheet{position:absolute; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; background:var(--card);
  border-radius:20px 20px 0 0; box-shadow:0 -6px 30px rgba(15,23,42,.14); max-height:52%; display:flex; flex-direction:column; z-index:4;}
.grip{width:40px; height:4px; background:#d9d5cc; border-radius:2px; margin:8px auto 4px;}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:6px 18px 10px;}
.sheet-head h2{margin:0; font-size:16px; font-weight:800;}
.alert-btn{background:var(--teal-l); color:var(--teal); border:none; border-radius:20px; padding:7px 14px; font-family:inherit; font-weight:800; font-size:13px; cursor:pointer;}

.list{overflow-y:auto; padding:0 0 20px;}
.trow{display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:1px solid var(--line); text-decoration:none; color:inherit; cursor:pointer;}
.trow:active{background:var(--bg);}
.tic{width:42px; height:42px; border-radius:11px; background:#FAECE7; display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto;}
.tmain{flex:1; min-width:0;}
.tname{margin:0; font-size:15px; font-weight:800;}
.tsub{margin:0; font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tstatus{flex:0 0 auto; font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px;}
.tstatus.open{color:var(--teal); background:var(--teal-l);}
.tstatus.later{color:var(--muted); background:var(--bg);}
.empty{padding:30px 20px; text-align:center; color:var(--muted); font-weight:600;}

/* Detail page */
.detail{overflow-y:auto; height:100vh; display:block;}
.truck-hero{text-align:center; padding:28px 20px 18px; background:var(--card); border-bottom:1px solid var(--line);}
.truck-emoji{font-size:52px; line-height:1; margin-bottom:8px;}
.truck-hero h1{margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:-.5px;}
.truck-cuisine{display:inline-block; font-size:13px; font-weight:800; color:var(--muted); background:var(--bg); padding:4px 12px; border-radius:20px;}
.truck-blurb{margin:12px 0 0; color:var(--muted); font-weight:600; font-size:14px;}
.status-card{margin:16px; padding:16px; border-radius:14px; background:var(--card); border:1px solid var(--line);}
.status-card.open{border-color:var(--teal); background:var(--teal-l);}
.status-card.off{text-align:center; color:var(--muted);}
.status-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.status-pill{font-size:13px; font-weight:800; padding:4px 11px; border-radius:20px;}
.status-pill.open{color:#fff; background:var(--teal);}
.status-pill.later{color:var(--muted); background:var(--bg);}
.status-hours{font-size:13px; font-weight:700; color:var(--ink);}
.status-place{font-size:16px; font-weight:800;}
.status-addr{font-size:13px; color:var(--muted); font-weight:600; margin-top:2px;}
#dmap{height:220px; margin:0 16px; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.links{padding:16px; display:flex; flex-direction:column; gap:8px;}
.linkrow{display:block; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); font-weight:800; font-size:15px;}
.linkrow:active{background:var(--bg);}

/* Alert modal */
.modal{position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:flex-end; justify-content:center; z-index:20;}
.modal.show{display:flex;}
.modal-card{background:var(--card); width:100%; max-width:480px; border-radius:20px 20px 0 0; padding:22px 20px 28px; position:relative; animation:slideUp .22s ease;}
@keyframes slideUp{from{transform:translateY(30px); opacity:.6;} to{transform:translateY(0); opacity:1;}}
.modal-card h3{margin:0 0 6px; font-size:21px; font-weight:800;}
.msub{margin:0 0 18px; color:var(--muted); font-weight:600; font-size:14px;}
.x{position:absolute; top:16px; right:16px; background:none; border:none; font-size:18px; color:var(--muted); cursor:pointer;}
.fl{display:block; font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;}
.acuisines{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:18px;}
.aopt{border:1px solid var(--line); background:#fff; border-radius:10px; padding:11px 8px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; color:var(--ink);}
.aopt.on{border-color:var(--teal); background:var(--teal-l); color:var(--teal);}
.adist{display:flex; gap:8px; margin-bottom:18px;}
.dchip{flex:1; border:1px solid var(--line); background:#fff; border-radius:20px; padding:10px 0; font-family:inherit; font-weight:800; font-size:13px; cursor:pointer; color:var(--ink);}
.dchip.on{background:var(--teal); color:#fff; border-color:var(--teal);}
.ainput{width:100%; height:48px; border:1px solid var(--line); border-radius:10px; padding:0 14px; font-family:inherit; font-size:15px; font-weight:600; margin-bottom:8px;}
.ainput.err{border-color:#E24B4A;}
.micro{font-size:12px; color:var(--muted); font-weight:600; margin:0 0 16px;}
.turn-on{width:100%; height:50px; border:none; border-radius:10px; background:var(--orange-d); color:#fff; font-family:inherit; font-size:16px; font-weight:800; cursor:pointer;}
.adone{text-align:center; padding:10px 0;}
.check{width:56px; height:56px; border-radius:50%; background:var(--teal-l); color:var(--teal); font-size:28px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}

.truck-cta{display:block; text-align:center; padding:16px; margin:4px 0 8px; color:var(--teal); font-weight:800; font-size:14px; text-decoration:none; border-top:1px solid var(--line);}
.truck-cta:active{background:var(--bg);}