:root{
    --bg:#0b1220;
    --panel:#0f172a;
    --text:#e5e7eb;
    --blue:#3b82f6;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:system-ui;
    background:var(--bg);
    color:var(--text);
}

/* HEADER */
header{
    height:72px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    background:rgba(15,23,42,0.9);
    position:sticky;
    top:0;
    z-index:2000;
}

.logo{font-weight:700}

#search{
    flex:1;
    height:40px;
    border-radius:10px;
    border:none;
    padding:0 10px;
}

#profileBtn, #updatesBtn{
    height:40px;
    border:none;
    border-radius:10px;
    background:var(--blue);
    color:white;
    padding:0 12px;
    cursor:pointer;
}

/* MAP */
#map{
    width:100%;
    height:calc(100vh - 140px);
}

/* LOCATE */
#locateBtn{
    position:fixed;
    right:16px;
    bottom:120px;
    width:52px;
    height:52px;
    border-radius:50%;
    border:none;
    background:var(--blue);
    color:white;
    font-size:20px;
    z-index:1000;
}

/* PANEL */
.station-panel{
    position:fixed;
    top:0;
    right:-420px;
    width:380px;
    height:100vh;
    background:var(--panel);
    padding:20px;
    transition:.25s;
    z-index:5000;
}

.station-panel.open{
    right:0;
}

/* MODAL */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:9999;
}

.modal-content{
    width:420px;
    max-width:92%;
    margin:10% auto;
    background:var(--panel);
    padding:18px;
    border-radius:12px;
}

textarea{
    width:100%;
    height:90px;
}

/* =========================
   UPDATES (BOTTOM SHEET FIX)
========================= */

#updatesOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    display:none;
    z-index:5000;
}

#updatesOverlay.show{
    display:block;
}

/* desktop default */
#updates{
    position:fixed;
    left:0;
    right:0;
    bottom:-65%;
    height:55%;
    max-height:420px;
    background:var(--panel);
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    padding:16px;
    transition:.28s ease;
    z-index:6000;
    overflow:auto;
}

/* open */
#updates.open{
    bottom:0;
}

/* ===== MOBILE FIX ===== */
@media(max-width:768px){

    #updates{
        height:42%;          /* 🔥 было 55% — стало компактнее */
        max-height:320px;    /* 🔥 ограничение высоты */
        bottom:-50%;
        border-top-left-radius:18px;
        border-top-right-radius:18px;
    }

    /* маленький “peek” эффект */
    #updates.open{
        bottom:0;
    }

    /* делаем ощущение “панели” */
    #updates::before{
        content:"";
        width:40px;
        height:4px;
        background:rgba(255,255,255,0.25);
        border-radius:10px;
        display:block;
        margin:0 auto 10px auto;
    }
}