*{box-sizing:border-box}body{margin:0;font:14px system-ui,Arial;color:#172536;background:#f4f7fb}header{display:flex;align-items:center;gap:9px;padding:10px 15px;background:#fff;border-bottom:1px solid #dce4ee;flex-wrap:wrap;position:relative;z-index:500}h1{font-size:17px;margin:0 12px 0 0}button,select,input{font:inherit;border:1px solid #c8d5e4;border-radius:8px;background:white;padding:8px;color:#172536}button{cursor:pointer}button:hover{background:#eaf3ff}button.primary{background:#1976d2;color:#fff;border-color:#1976d2}#map{height:calc(100dvh - 65px);min-height:420px}#status{font-size:12px;color:#51677f}#clock{font-weight:800;font-variant-numeric:tabular-nums}#panel{position:absolute;z-index:1000;top:76px;right:12px;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto;background:#fff;border:1px solid #dce4ee;border-radius:14px;box-shadow:0 12px 50px #16334d45;padding:16px}#panel[hidden],#login[hidden]{display:none}.section{border-top:1px solid #e0e7f0;padding:13px 0}.section:first-child{border:0}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}.row>*{min-width:0}.grow{flex:1}label{display:block;margin:8px 0}input[type=file]{max-width:100%;width:100%}input[type=checkbox]{accent-color:#1976d2}.muted{font-size:12px;color:#64768c}.trace{border:1px solid #e0e7f0;border-radius:10px;padding:9px;margin:7px 0}.trace.active{border-color:#1976d2;background:#f0f7ff}.trace button{padding:5px}.small{font-size:12px}.warn{color:#a35a10}.vehicle-icon{border:2px solid white;border-radius:20px;background:#d71920;color:white;font-weight:800;font-size:12px;white-space:nowrap;text-align:center;padding:5px 7px;box-shadow:0 2px 9px #0005}.vehicle-icon.tram{background:#d71920}.vehicle-icon.frozen{background:#66778b}.stop-icon{width:8px;height:8px;border:0;border-radius:6px;background:#1685f8;box-shadow:0 1px 5px #0005;display:flex;align-items:center;justify-content:center;color:#fff}.stop-icon svg{width:6px;height:6px;display:block}.catalog-stop-icon{width:8px;height:8px;border:0;border-radius:6px;background:#1685f8;box-shadow:0 1px 5px #0005;display:flex;align-items:center;justify-content:center;color:#fff}.catalog-stop-icon svg{width:6px;height:6px;display:block}.catalog-bend-icon{background:#fff;border:3px solid #ff9800;border-radius:4px;width:13px;height:13px;box-shadow:0 1px 5px #0006}#login{position:absolute;top:85px;left:50%;transform:translateX(-50%);z-index:1200;width:min(370px,calc(100vw - 24px));padding:18px;background:white;box-shadow:0 12px 50px #0003;border-radius:14px}#login input{width:100%}#loginMsg{color:#b23838}.editnote{background:#eff6ff;padding:10px;border-radius:9px}.segmentbutton{font-size:12px}.badge{display:inline-block;border-radius:6px;padding:2px 6px;background:#e8f1fa}.leaflet-container{font-family:system-ui,Arial} @media(max-width:760px){header{gap:5px;padding:7px}header h1{width:100%}#map{height:calc(100dvh - 105px)}#panel{top:108px;max-height:calc(100dvh - 115px)}}

[hidden]{display:none!important}
:root{--header-height:65px}
#map{height:calc(100dvh - var(--header-height));min-height:280px}
#panel{top:calc(var(--header-height) + 10px);max-height:calc(100dvh - var(--header-height) - 24px)}
#login{top:calc(var(--header-height) + 20px)}
#login label{font-size:12px;margin:12px 0 5px}
#adminFields{border:0;margin:0;padding:0;min-width:0}
#adminFields:disabled{opacity:.65}
#syncStatus{font-size:12px;padding:5px 8px;border-radius:6px;background:#e8f1fa}
#syncStatus[data-kind=error],#syncStatus[data-kind=conflict]{background:#fff0e9;color:#963310}
#syncStatus[data-kind=ok]{background:#e7f5eb;color:#235b35}
#syncStatus[data-kind=busy]{background:#edf1ff;color:#354777}
#syncAlert{position:fixed;z-index:1500;left:12px;bottom:18px;max-width:min(560px,calc(100vw - 24px));padding:14px;
background:#fffaf0;border:1px solid #ddb476;border-radius:10px;box-shadow:0 6px 24px #0002}
#syncAlert strong{display:block;font-size:13px;overflow-wrap:anywhere}
#syncAlert p{margin:4px 0 0}
#accountInfo{overflow-wrap:anywhere}
#panel input[type=password]{width:100%}
#panel button:disabled{cursor:not-allowed}
#login .row{flex-wrap:wrap}
#login #password{width:100%;flex-basis:100%}
@media(max-width:760px){
 #map{height:calc(100dvh - var(--header-height))}
 #panel{top:calc(var(--header-height) + 8px);max-height:calc(100dvh - var(--header-height) - 16px)}
 #syncAlert{bottom:8px}#syncAlert button{padding:6px;font-size:12px}
}
