/* ==========================================================================
   SafePath Tokyo — Nike Run Club-Inspired Premium UI
   Typography-first. Monochrome + Volt accent. Zero emoji.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:#0D0D0D;
    color:#F5F5F5;
    min-height:100dvh;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ========== SPLASH ========== */
.splash{
    position:fixed;inset:0;z-index:9999;
    background:#0D0D0D;
    display:flex;align-items:center;justify-content:center;
    animation:splashOut 0.5s ease 2s forwards;
}
.splash-inner{text-align:center}
.splash-logo{width:72px;height:72px;margin-bottom:20px}
.logo-shield{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.2s ease 0.3s forwards}
.logo-path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw 0.6s ease 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.splash-title{
    font-size:28px;font-weight:900;letter-spacing:0.25em;
    color:#CDFF64;margin-bottom:4px;
    opacity:0;animation:fadeUp 0.5s ease 0.8s forwards;
}
.splash-sub{
    font-size:11px;font-weight:700;letter-spacing:0.4em;color:#555;
    opacity:0;animation:fadeUp 0.5s ease 1.1s forwards;
}
@keyframes splashOut{to{opacity:0;pointer-events:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ========== APP SHELL ========== */
.app{display:flex;flex-direction:column;height:100dvh;max-width:430px;margin:0 auto;position:relative;overflow:hidden}
@media(min-width:431px){.app{border-left:1px solid #1a1a1a;border-right:1px solid #1a1a1a}}

/* ========== TAB PANELS ========== */
.tab-panel{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.tab-panel.active{display:flex}
.panel-scroll{flex:1;overflow-y:auto;padding-bottom:20px}
.panel-scroll::-webkit-scrollbar{width:0}
.panel-hdr{padding:20px 16px 16px;display:flex;align-items:center;gap:14px}
.panel-title{font-size:28px;font-weight:900;letter-spacing:-0.03em}
.settings-logo{width:44px;height:44px;border-radius:12px;object-fit:cover}

/* ========== ALERT STRIP ========== */
.alert-strip{
    display:flex;align-items:center;gap:8px;
    padding:8px 16px;background:#2A0A0A;flex-shrink:0;
}
.alert-dot{width:6px;height:6px;border-radius:50%;background:#EF4444;flex-shrink:0;animation:blink 1.5s infinite}
.alert-txt{font-size:12px;font-weight:600;color:#FCA5A5;flex:1}
.alert-tag{
    font-size:8px;font-weight:800;letter-spacing:0.1em;
    padding:2px 6px;background:#EF4444;color:#fff;border-radius:3px;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ========== MAP ========== */
.map-wrap{position:relative;flex:1;min-height:0}
#map{width:100%;height:100%;z-index:1}
.leaflet-tile-pane{filter:brightness(0.6) contrast(1.15) saturate(0) hue-rotate(180deg) invert(1)}
.leaflet-control-zoom a{background:#161616!important;color:#aaa!important;border-color:#282828!important;font-weight:700!important}
.leaflet-control-attribution{display:none!important}
.map-fabs{position:absolute;top:12px;right:12px;z-index:500;display:flex;flex-direction:column;gap:8px}
.fab{
    width:42px;height:42px;border-radius:12px;
    background:rgba(13,13,13,.92);border:1px solid #282828;
    color:#aaa;cursor:pointer;display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(8px);transition:all .15s;
}
.fab svg{width:18px;height:18px}
.fab:hover{background:#1a1a1a;color:#CDFF64;border-color:#CDFF64}

/* ========== BOTTOM SHEET ========== */
.sheet{
    position:relative;z-index:100;
    background:#0D0D0D;
    border-top-left-radius:20px;border-top-right-radius:20px;
    padding:0 16px;overflow-y:auto;
    max-height:50vh;flex-shrink:0;
    transition:max-height .35s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.6);
}
.sheet.expanded{max-height:85vh}
.sheet::-webkit-scrollbar{width:0}
.sheet-grip{display:flex;justify-content:center;padding:10px 0 4px;cursor:grab}
.grip-bar{width:36px;height:4px;border-radius:2px;background:#333}

/* ========== SEARCH ========== */
.search-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.search-box{
    flex:1;display:flex;align-items:center;gap:10px;
    background:#161616;border:1.5px solid #222;border-radius:14px;
    padding:4px 14px;transition:border-color .15s;
}
.search-box:focus-within{border-color:#CDFF64}
.s-icon{width:16px;height:16px;color:#555;flex-shrink:0}
.s-input{flex:1;background:transparent;border:none;outline:none;color:#f5f5f5;font-family:inherit;font-size:14px;padding:10px 0}
.s-input::placeholder{color:#444}
.mic{
    width:42px;height:42px;border-radius:12px;
    background:#161616;border:1.5px solid #222;
    color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .15s;flex-shrink:0;
}
.mic svg{width:18px;height:18px}
.mic:hover{color:#CDFF64;border-color:#CDFF64}
.mic.recording{color:#EF4444;border-color:#EF4444;animation:micP 1s ease-in-out infinite}
@keyframes micP{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ========== AI CARD ========== */
.ai-card{
    background:#161616;border-left:3px solid #CDFF64;
    border-radius:0 14px 14px 0;padding:12px 14px;margin-bottom:12px;
    animation:fadeUp .3s ease-out;
}
.ai-hdr{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ai-dot-live{width:6px;height:6px;border-radius:50%;background:#CDFF64;animation:blink 1.5s infinite}
.ai-lbl{font-size:10px;font-weight:800;color:#CDFF64;letter-spacing:0.1em}
.ai-txt{font-size:13px;line-height:1.65;color:#999}

/* ========== CHIPS ========== */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.chip{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:14px 2px 10px;background:#161616;border:1.5px solid #1e1e1e;
    border-radius:14px;color:#999;font-family:inherit;font-size:10px;
    font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:0.01em;
}
.chip svg{width:20px;height:20px}
.chip:hover{border-color:#CDFF64;color:#CDFF64;background:rgba(205,255,100,.03)}
.chip:active{transform:scale(.95)}

/* ========== SECTION LABELS (Nike-style) ========== */
.section-label{
    font-size:10px;font-weight:800;letter-spacing:0.14em;
    color:#555;padding:16px 0 10px;
    text-transform:uppercase;
}
.section-label.sm{padding:14px 0 8px}

/* ========== ANALYTICS (Nike Run Club stats) ========== */
.analytics{margin-bottom:16px}
.stat-grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:1px;background:#222;border-radius:16px;overflow:hidden;
    margin-bottom:2px;
}
.stat-cell{
    background:#161616;padding:18px 14px;
    display:flex;flex-direction:column;
}
.stat-cell:first-child{border-top-left-radius:16px}
.stat-cell:nth-child(2){border-top-right-radius:16px}
.stat-cell:nth-child(3){border-bottom-left-radius:16px}
.stat-cell:last-child{border-bottom-right-radius:16px}
.big-num{
    font-size:36px;font-weight:900;letter-spacing:-0.06em;
    line-height:1;color:#F5F5F5;
}
.stat-cell.accent .big-num{color:#CDFF64}
.big-unit{font-size:14px;font-weight:700;color:#666;margin-left:2px}
.stat-cell.accent .big-unit{color:#9DBF4D}
.stat-label{
    font-size:9px;font-weight:700;letter-spacing:0.12em;
    color:#555;margin-top:6px;text-transform:uppercase;
}

/* ========== BAR CHART ========== */
.bar-chart{display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-label{font-size:10px;font-weight:700;color:#666;min-width:38px;letter-spacing:0.02em}
.bar-track{flex:1;height:8px;background:#1a1a1a;border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.32,.72,0,1)}
.bar-fill.safe{background:#CDFF64}
.bar-fill.danger{background:#444}
.bar-val{font-size:11px;font-weight:700;color:#888;min-width:42px;text-align:right}
.bar-val.safe-c{color:#CDFF64}
.bar-val.danger-c{color:#EF4444}

/* ========== SHELTER CARD ========== */
.shelter-spot{margin-bottom:12px}
.spot-card{background:#161616;border:1px solid #1e1e1e;border-radius:16px;padding:16px;overflow:hidden}
.spot-top{margin-bottom:14px}
.spot-badge{
    display:inline-block;font-size:9px;font-weight:800;letter-spacing:0.1em;
    padding:3px 8px;border-radius:4px;margin-bottom:8px;
    background:rgba(205,255,100,.08);color:#CDFF64;
}
.spot-name{font-size:20px;font-weight:900;letter-spacing:-0.03em;line-height:1.15;margin-bottom:3px}
.spot-sub{font-size:12px;color:#555;font-weight:500}

.spot-metrics{display:flex;align-items:center;margin-bottom:14px}
.sm-metric{flex:1;text-align:center}
.sm-val{font-size:26px;font-weight:900;letter-spacing:-0.04em;line-height:1}
.sm-u{font-size:12px;font-weight:600;color:#555;margin-left:1px}
.sm-lbl{display:block;font-size:9px;font-weight:700;color:#444;letter-spacing:0.1em;margin-top:3px;text-transform:uppercase}
.sm-div{width:1px;height:30px;background:#222;flex-shrink:0}

.cap-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cap-lbl{font-size:10px;color:#555;font-weight:700;min-width:65px}
.cap-track{flex:1;height:5px;background:#1a1a1a;border-radius:3px;overflow:hidden}
.cap-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#CDFF64,#FBBF24);transition:width .6s cubic-bezier(.32,.72,0,1)}

.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{
    display:inline-flex;align-items:center;gap:4px;
    padding:4px 9px;background:#1a1a1a;border-radius:6px;
    font-size:10px;color:#777;font-weight:600;
}
.tag svg{width:12px;height:12px}
.tag.hi{color:#CDFF64;background:rgba(205,255,100,.05)}

/* ========== CTA ========== */
.cta{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:16px;margin:4px 0 16px;
    background:#CDFF64;color:#0D0D0D;border:none;border-radius:14px;
    font-family:inherit;font-size:14px;font-weight:900;
    letter-spacing:0.08em;cursor:pointer;transition:all .15s;
}
.cta svg{width:16px;height:16px}
.cta:hover{background:#D8FF7A;transform:translateY(-1px);box-shadow:0 8px 30px rgba(205,255,100,.15)}
.cta:active{transform:translateY(0);background:#B8E050}

/* ========== BOTTOM NAV ========== */
.bnav{
    display:flex;justify-content:space-around;
    padding:4px 0;padding-bottom:max(6px,env(safe-area-inset-bottom));
    background:#0D0D0D;border-top:1px solid #161616;
    flex-shrink:0;z-index:200;
}
.bn{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 14px;background:none;border:none;
    color:#444;font-size:9px;font-weight:700;font-family:inherit;
    cursor:pointer;transition:color .15s;letter-spacing:0.02em;
}
.bn svg{width:20px;height:20px}
.bn.active{color:#CDFF64}
.bn:hover{color:#888}

/* ========== SEARCH TAB — SHELTER LIST ========== */
.list{padding:0 16px}
.list-item{
    display:flex;align-items:center;gap:12px;
    padding:14px 0;border-bottom:1px solid #161616;
    cursor:pointer;transition:background .1s;
}
.list-item:hover{background:#111;margin:0 -16px;padding:14px 16px;border-radius:10px}
.li-icon{
    width:38px;height:38px;border-radius:10px;
    background:#161616;border:1.5px solid #222;
    display:flex;align-items:center;justify-content:center;
    color:#CDFF64;flex-shrink:0;
}
.li-icon svg{width:16px;height:16px}
.li-icon.aed{color:#F87171;border-color:rgba(248,113,113,.2)}
.li-body{flex:1;min-width:0}
.li-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{font-size:11px;color:#555;font-weight:500;margin-top:1px}
.li-dist{font-size:13px;font-weight:800;color:#CDFF64;flex-shrink:0}

/* ========== ALERTS TAB — TIMELINE ========== */
.timeline{padding:0 16px}
.tl-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #161616}
.tl-dot-wrap{display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0;padding-top:4px}
.tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tl-dot.red{background:#EF4444}
.tl-dot.amber{background:#FBBF24}
.tl-dot.green{background:#CDFF64}
.tl-line{width:1px;flex:1;background:#222;margin-top:4px}
.tl-body{flex:1}
.tl-title{font-size:13px;font-weight:700;margin-bottom:2px}
.tl-desc{font-size:12px;color:#666;line-height:1.5}
.tl-time{font-size:10px;color:#444;font-weight:600;margin-top:4px}

/* ========== SETTINGS ========== */
.setting-group{padding:0 16px 24px}
.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lg-btn{
    display:flex;align-items:center;gap:10px;
    padding:14px;background:#161616;border:1.5px solid #222;
    border-radius:12px;color:#999;font-family:inherit;font-size:14px;
    font-weight:600;cursor:pointer;transition:all .15s;
}
.lg-flag{font-size:20px}
.lg-btn.active{border-color:#CDFF64;color:#CDFF64;background:rgba(205,255,100,.03)}
.lg-btn:hover{border-color:#444}

.toggle-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;border-bottom:1px solid #161616;
    font-size:14px;font-weight:500;color:#ccc;
}
.toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.slider{
    position:absolute;inset:0;background:#333;border-radius:12px;
    cursor:pointer;transition:.2s;
}
.slider::before{
    content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;
    background:#888;border-radius:50%;transition:.2s;
}
.toggle input:checked + .slider{background:rgba(205,255,100,.2)}
.toggle input:checked + .slider::before{transform:translateX(20px);background:#CDFF64}

.about-text{font-size:13px;line-height:1.7;color:#666;margin-bottom:8px}
.about-ver{font-size:11px;color:#444;font-weight:600}

/* ========== LOADING ========== */
.ld{position:fixed;inset:0;background:rgba(13,13,13,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:9999}
.ld-ring{width:36px;height:36px;border:3px solid #222;border-top-color:#CDFF64;border-radius:50%;animation:spin .7s linear infinite}
.ld-txt{font-size:12px;color:#555;font-weight:600;letter-spacing:0.04em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== LEAFLET OVERRIDES ========== */
.dark-popup .leaflet-popup-content-wrapper{background:#161616;color:#eee;border-radius:10px;border:1px solid #282828;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.dark-popup .leaflet-popup-tip{background:#161616}
.dark-popup .leaflet-popup-close-button{color:#555}

/* Map markers */
.user-dot{width:14px;height:14px;background:#06B6D4;border-radius:50%;border:3px solid rgba(6,182,212,.3);position:relative}
.user-ring{position:absolute;inset:-6px;border:2px solid rgba(6,182,212,.2);border-radius:50%;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2);opacity:0}}
.shelter-pin{width:28px;height:28px;background:#0D0D0D;border:2px solid #CDFF64;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#CDFF64}
.shelter-pin.closed{border-color:#EF4444;color:#EF4444}
.aed-pin{width:22px;height:22px;background:#0D0D0D;border:2px solid #F87171;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#F87171}

/* ========== REPORT HAZARD FORM ========== */
.report-form{margin-bottom:12px}
.report-card{background:#161616;border:1px solid #1e1e1e;border-radius:16px;padding:16px;overflow:hidden}
.report-types{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.rtype{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:12px 4px 8px;background:#1a1a1a;border:1.5px solid #222;
    border-radius:10px;color:#888;font-family:inherit;font-size:9px;
    font-weight:700;cursor:pointer;transition:all .15s;
}
.rtype.active{border-color:#CDFF64;color:#CDFF64;background:rgba(205,255,100,.04)}
.rtype:hover{border-color:#444}
.report-notes{
    width:100%;background:#1a1a1a;border:1.5px solid #222;border-radius:10px;
    padding:10px 12px;color:#f5f5f5;font-family:inherit;font-size:13px;
    resize:none;outline:none;margin-bottom:10px;transition:border-color .15s;
}
.report-notes:focus{border-color:#CDFF64}
.report-notes::placeholder{color:#444}
.report-submit{
    width:100%;padding:14px;background:#EF4444;color:#fff;border:none;
    border-radius:12px;font-family:inherit;font-size:13px;font-weight:800;
    letter-spacing:0.06em;cursor:pointer;transition:all .15s;
}
.report-submit:hover{background:#DC2626;transform:translateY(-1px)}
.report-submit:active{transform:translateY(0)}
.report-submit.submitted{background:#22C55E;pointer-events:none}

/* Success toast */
.toast{
    position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-20px);
    background:#161616;border:1px solid #CDFF64;border-radius:12px;
    padding:12px 20px;color:#CDFF64;font-size:13px;font-weight:700;
    z-index:9999;opacity:0;transition:all .3s ease;pointer-events:none;
    box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Highlighted / selected shelter marker */
.shelter-pin.highlight{
    border-color:#fff;color:#fff;background:#CDFF64;
    animation:markerBounce .5s ease;
    box-shadow:0 0 12px rgba(205,255,100,.4);
}
@keyframes markerBounce{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(0.9)}100%{transform:scale(1)}}

/* AED highlight */
.aed-pin.highlight{
    border-color:#fff;background:#F87171;color:#fff;
    animation:markerBounce .5s ease;
    box-shadow:0 0 12px rgba(248,113,113,.4);
}

/* Hazard report marker */
.hazard-report-pin{
    width:26px;height:26px;background:#EF4444;border:2px solid #fff;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;animation:markerBounce .5s ease;
    box-shadow:0 0 12px rgba(239,68,68,.3);
}

/* Active chip indicator */
.chip.active-action{border-color:#CDFF64;color:#CDFF64;background:rgba(205,255,100,.06)}