:root{--ink:#2f241a;--muted:#74695e;--paper:#f5efe6;--card:#fff;--gold:#b47a25;--line:#e3d7c8;--ok:#1d7a4d;--off:#a33}
*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--paper);color:var(--ink)}
.traffic-header{height:76px;background:#29251f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;box-shadow:0 2px 10px #0003}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none}.brand img{width:54px;height:54px;object-fit:contain}.brand strong{font-size:20px;display:block}.brand span{font-size:13px;color:#e5c794}.back-link{color:#fff;text-decoration:none}
.traffic-page{max-width:1500px;margin:auto;padding:18px}.intro-card,.filter-bar,.workspace{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 20px #4b382015}.intro-card{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;margin-bottom:14px}.intro-card h1{margin:0 0 6px}.intro-card p{margin:0;color:var(--muted)}.summary{text-align:center;min-width:150px}.summary strong{display:block;font-size:34px;color:var(--gold)}.summary span{font-size:12px;color:var(--muted)}
.filter-bar{padding:12px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr auto;gap:10px;margin-bottom:14px}.filter-bar input,.filter-bar select,.filter-bar button{min-height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}.filter-bar button{cursor:pointer;background:#3e342b;color:#fff}
.workspace{display:grid;grid-template-columns:390px minmax(0,1fr);overflow:hidden;min-height:650px}.camera-panel{border-right:1px solid var(--line);max-height:650px;overflow:auto}.camera-list{padding:10px}.camera-item{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px;cursor:pointer;transition:.18s}.camera-item:hover,.camera-item.active{border-color:var(--gold);box-shadow:0 4px 12px #7e56231a}.camera-title{font-weight:700;margin-bottom:7px}.camera-address,.camera-road{font-size:13px;color:var(--muted);margin:3px 0}.camera-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px}.status{font-weight:700}.status.online{color:var(--ok)}.status.offline{color:var(--off)}.status.unknown{color:#806f55}.map-wrap,#trafficMap{height:650px}.state-box{padding:24px;text-align:center;color:var(--muted)}
.camera-marker{background:#3b3028;color:#fff;border:3px solid #d6a24c;border-radius:50%;width:34px!important;height:34px!important;display:grid;place-items:center;box-shadow:0 2px 8px #0004}.leaflet-popup-content-wrapper{border-radius:12px}.popup-title{font-weight:700;margin-bottom:5px}.popup-link{display:inline-block;margin-top:8px;color:#8a5517;font-weight:700}
.camera-modal[hidden]{display:none}.camera-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#000b}.modal-card{position:relative;width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 70px #0008}.modal-close{position:absolute;right:12px;top:8px;border:0;background:#fff;border-radius:50%;width:38px;height:38px;font-size:28px;cursor:pointer;z-index:2}.modal-media{background:#1e1e1e;min-height:260px;border-radius:12px;display:grid;place-items:center;overflow:hidden;color:#fff}.modal-media img,.modal-media video,.modal-media iframe{width:100%;min-height:360px;border:0;object-fit:contain}.modal-card h2{margin:16px 0 6px}.modal-card p{color:var(--muted)}.modal-meta{display:flex;flex-wrap:wrap;gap:8px}.modal-meta span{background:#f2ede5;border-radius:20px;padding:7px 10px;font-size:13px}.modal-credit{margin-top:12px;padding:10px;background:#faf6ef;border-left:4px solid var(--gold);font-size:13px}.modal-actions{display:flex;gap:10px;margin-top:16px}.modal-actions a{flex:1;text-align:center;text-decoration:none;background:#3c3128;color:#fff;border-radius:10px;padding:11px}.modal-actions a:last-child{background:var(--gold)}
@media(max-width:900px){.traffic-header{padding:8px 12px}.back-link{display:none}.traffic-page{padding:10px}.intro-card{align-items:flex-start}.summary{min-width:90px}.filter-bar{grid-template-columns:1fr 1fr}.filter-bar input{grid-column:1/-1}.workspace{grid-template-columns:1fr}.camera-panel{max-height:340px;border-right:0;border-bottom:1px solid var(--line)}.map-wrap,#trafficMap{height:520px}.modal-media img,.modal-media video,.modal-media iframe{min-height:240px}}

.camera-list-icon,.popup-camera-icon{display:inline-grid;place-items:center;vertical-align:middle}
.camera-list-icon{width:28px;height:28px;border-radius:50%;margin-right:6px;background:#f1ebe2}
.camera-marker-shell{background:transparent!important;border:0!important}
.camera-marker{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px #0007;font-size:18px}
.camera-marker.traffic{background:#b7791f}.camera-marker.surveillance{background:#3c4652}.camera-marker.weather{background:#24728a}.camera-marker.other{background:#6d4e7f}
.camera-marker.location-only{filter:saturate(.55);opacity:.88}.camera-marker.available{outline:3px solid #2d9a5c}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:#b7791f55}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:#3b3028;color:#fff;font-weight:700}
.traffic-popup{min-width:240px}.popup-heading{display:flex;gap:9px;align-items:center;margin-bottom:10px}.popup-camera-icon{width:34px;height:34px;border-radius:50%;background:#f2ece4}
.popup-category{font-size:12px;color:var(--muted);margin-top:2px}.popup-row{font-size:13px;margin:5px 0}.popup-status{font-weight:700;font-size:13px;margin-top:8px}.popup-status.online{color:var(--ok)}.popup-status.offline{color:var(--off)}.popup-status.unknown{color:#806f55}
.popup-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.popup-actions a{display:inline-block;text-decoration:none;border-radius:8px;padding:7px 9px;background:#3b3028;color:#fff;font-size:12px;font-weight:700}.popup-actions a:nth-child(2){background:var(--gold)}.popup-actions a:last-child{background:#eee7dd;color:#4b3828}