:root{
    --primary:#0f172a;
    --secondary:#1d4ed8;
    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --bg:#edf2f7;
    --glass:rgba(255,255,255,.85);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    font-family:'Poppins',sans-serif;
}

.hero{
    background:linear-gradient(135deg,#0f172a,#1d4ed8);
    color:#fff;
    border-radius:20px;
    padding:35px;
    margin-bottom:25px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.glass{
    background:var(--glass);
    backdrop-filter:blur(18px);
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.river-card{
    transition:.35s;
    cursor:pointer;
}

.river-card:hover{
    transform:translateY(-8px);
}

.status{
    display:inline-block;
    padding:6px 14px;
    border-radius:30px;
    color:#fff;
    font-size:13px;
}

.normal{
    background:var(--success);
}

.warning{
    background:var(--warning);
}

.danger{
    background:var(--danger);
}
#mapArea{
    height:550px;
    width:100%;
    border-radius:18px;
    overflow:hidden;
}

.leaflet-container{
    border-radius:18px;
}