html,body{

margin:0;

height:100%;

overflow:hidden;

font-family:Arial;

background:#081018;

}

#topbar{

position:fixed;

top:0;

left:0;

right:0;

height:260px;

display:flex;

align-items:center;

background:#111827;

padding:0 20px;

z-index:1000;

box-shadow:0 0 25px rgba(0,0,0,.5);

}

#logo{

height:240px;

margin-right:20px;

}

#title{

color:white;

font-size:38px;

font-weight:bold;

}

#subtitle{

font-size:14px;

color:#6ad8ff;

}

#searchBox{

margin-left:auto;

width:420px;

padding:12px;

font-size:17px;

border-radius:8px;

border:none;

}

#searchButton{

margin-left:10px;

padding:12px 20px;

font-size:17px;

background:#0d8bff;

color:white;

border:none;

border-radius:8px;

cursor:pointer;

}

#sidebar{

position:fixed;

top:260px;

left:0;

bottom:0;

width:420px;

background:#162130;

color:white;

padding:15px;

overflow:auto;

}

#map{

position:fixed;

top:260px;

left:420px;

right:0;

bottom:0;

}

/* ---------- RazMaps Glass Theme ---------- */

#topbar{
    height:110px !important;
    background:rgba(8,18,35,.82) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.10);
    padding:10px 25px !important;
}

#logo{
    height:95px !important;
    width:auto;
}

#title{
    font-size:32px !important;
}

#subtitle{
    font-size:15px !important;
    opacity:.85;
}

#sidebar{
    width:275px !important;
    top:110px !important;
    background:rgba(10,18,32,.72) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-right:1px solid rgba(255,255,255,.08);
}

#map{
    left:275px !important;
    top:110px !important;
}

#searchBox{
    width:420px !important;
}

#searchButton{
    margin-left:10px;
}


/* Ultra Glass */

#topbar{
    background:rgba(8,18,35,.55) !important;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
}

#sidebar{
    background:rgba(8,18,35,.50) !important;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
}


/* ===== FINAL LOGO OVERRIDE ===== */

#topbar img,
img#logo,
#logo{
    height:120px !important;
    width:auto !important;
    max-height:none !important;
    max-width:none !important;
    display:block !important;
    object-fit:contain !important;
    flex-shrink:0 !important;
}

#topbar{
    height:115px !important;
}

#sidebar{
    top:115px !important;
}

#map{
    top:115px !important;
}



#layers{
position:absolute;
top:125px;
right:20px;
z-index:99999;
display:flex;
gap:8px;
padding:10px;
border-radius:14px;
background:rgba(10,20,35,.35);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}

#layers button{
background:rgba(255,255,255,.18);
color:#fff;
border:1px solid rgba(255,255,255,.20);
padding:8px 14px;
border-radius:8px;
cursor:pointer;
font-size:14px;
}

#layers button:hover{
background:#2d7fff;
}


#sidebarTabs{

display:flex;
flex-wrap:wrap;
gap:6px;
padding:10px;

}

.tabButton{

background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:white;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
font-size:13px;

}

.tabButton.active{

background:#3b82f6;

}


/* ===== RazMaps Floating Glass Header ===== */

header,
.navbar,
#navbar,
.topbar{

    background:rgba(15,25,40,.10) !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.12);

    box-shadow:none !important;

    height:58px !important;
    min-height:58px !important;

}

header * ,
.navbar * ,
#navbar * ,
.topbar *{

    line-height:58px;

}

#map{

    top:58px !important;

}

body{

    padding-top:58px !important;

}


/* ===== RazMaps Ultra-Clear Header ===== */

header,
.navbar,
#navbar,
.topbar{

    background:rgba(15,25,40,.08) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    box-shadow:none !important;

    border-bottom:1px solid rgba(255,255,255,.10);

    height:52px !important;
    min-height:52px !important;

}

header *,
.navbar *,
#navbar *,
.topbar *{

    line-height:52px !important;

}

#map{

    top:52px !important;

}

body{

    padding-top:52px !important;

}