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

:root{

--acta-blue:#003366;
--acta-light:#0057b8;
--bg:#f4f7fb;
--card:#ffffff;
--border:#dce3ea;
--text:#1f2937;
--shadow:0 3px 12px rgba(0,0,0,.08);

}

html,
body{

height:100%;
overflow:hidden;

font-family:
Segoe UI,
Tahoma,
Arial,
sans-serif;

background:var(--bg);

}

.topbar{

height:72px;

background:var(--acta-blue);

color:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 20px;

box-shadow:0 2px 12px rgba(0,0,0,.15);

z-index:999;

}

.brand{

display:flex;

align-items:center;

gap:15px;

}

.logo{

height:50px;
width:auto;

}

.brand h1{

font-size:28px;
font-weight:700;

}

#subtitle{

font-size:13px;
opacity:.85;

}

.toolbar{

display:flex;
gap:10px;
align-items:center;

}

.toolbar select{

height:40px;

padding:0 10px;

border:none;

border-radius:8px;

}

#menuButton{

display:none;

width:44px;
height:40px;

border:none;

border-radius:8px;

font-size:20px;

cursor:pointer;

}

.main-layout{

display:flex;

height:calc(100vh - 72px);

}

#sidebar{

width:420px;

background:white;

overflow-y:auto;

padding:18px;

border-left:1px solid var(--border);

box-shadow:var(--shadow);

}

.sidebar-header{

margin-bottom:15px;

}

.sidebar-header h2{

font-size:28px;

color:var(--acta-blue);

}

#routeCount{

margin-top:4px;

font-size:13px;

color:#666;

}

.toolbar-buttons{

display:flex;

gap:10px;

margin-bottom:15px;

}

.toolbar-buttons button{

flex:1;

height:42px;

background:var(--acta-blue);

color:white;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

.toolbar-buttons button:hover{

background:var(--acta-light);

}

.search-panel{

margin-bottom:10px;

}

.search-panel input{

width:100%;

height:42px;

padding:0 12px;

border:1px solid var(--border);

border-radius:10px;

font-size:14px;

}

.options-panel{

padding:12px;

border-radius:10px;

background:#f8fafc;

border:1px solid var(--border);

margin-bottom:15px;

}

.options-panel label{

display:flex;

gap:10px;

align-items:center;

cursor:pointer;

}

#routesContainer{

display:flex;

flex-direction:column;

gap:10px;

padding-bottom:50px;

}

.route-card{

background:white;

border:1px solid var(--border);

border-radius:12px;

padding:14px;

display:flex;

justify-content:space-between;

align-items:flex-start;

cursor:pointer;

transition:.2s;

}

.route-card:hover{

transform:translateY(-2px);

box-shadow:var(--shadow);

}

.route-info{

display:flex;

gap:12px;

align-items:flex-start;

}

.route-color{

width:22px;

height:22px;

border-radius:50%;

flex-shrink:0;

margin-top:2px;

}

.route-code{

font-size:18px;

font-weight:700;

color:#111;

}

.route-name{

font-size:14px;

color:#555;

margin-top:2px;

line-height:1.4;

}

.route-card a{

color:var(--acta-light);

font-weight:600;

}

.route-toggle{

width:20px;
height:20px;

}

#map{

width:100%;
height:100%;

}

main{

flex:1;

}

.loading{

padding:30px;

text-align:center;

font-size:15px;

color:#666;

}

.leaflet-tooltip{

font-size:15px !important;

font-weight:600 !important;

padding:6px 10px !important;

}

.leaflet-popup-content{

font-size:15px;

}

@media(max-width:768px){

#menuButton{

display:block;

}

#sidebar{

position:fixed;

top:72px;

right:-420px;

width:350px;

height:calc(100vh - 72px);

transition:.3s;

z-index:999;

}

#sidebar.open{

right:0;

}

.brand h1{

font-size:22px;

}

}