.camera-page [hidden]{display:none!important}
.camera-tabs{display:flex;gap:6px;padding:5px;border:1px solid #ffffff17;border-radius:14px;background:#071321a8;width:max-content}
.camera-tabs button{border:0;border-radius:10px;padding:10px 16px;background:transparent;color:#8299ad;font-weight:850;cursor:pointer}
.camera-tabs button.active{background:#69e4c41c;color:#9df2dd;box-shadow:inset 0 0 0 1px #69e4c43d}
.camera-traffic-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}
.camera-traffic-head h3{margin:0 0 5px;font-size:clamp(22px,3vw,34px)}
.camera-traffic-head p{margin:0;max-width:720px;color:#8ea5b8;line-height:1.5}
.camera-traffic-controls{display:flex;align-items:end;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.camera-traffic-controls label{display:grid;gap:4px;color:#8ea5b8;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.camera-traffic-controls input{min-height:42px;border:1px solid #ffffff20;border-radius:11px;background:#0b192c;color:#e6f2fb;padding:8px 11px;color-scheme:dark}
.camera-traffic-controls button,.camera-traffic-controls a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:0;border-radius:11px;padding:10px 14px;font-weight:850;text-decoration:none;cursor:pointer}
.camera-traffic-controls button:disabled{opacity:.45;cursor:not-allowed}
.camera-traffic-message{min-height:20px;margin:0 0 8px;color:#79d8be;font-size:12px}
.camera-traffic-message.is-error{color:#ff9aa2}
.camera-traffic-disabled{border-color:#e3ad5545!important;background:linear-gradient(145deg,#392b19e8,#172237f2)!important}
.camera-traffic-disabled strong{color:#ffd594}
.camera-traffic-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.camera-traffic-cards article,.camera-traffic-chart-card,.camera-traffic-table-card{border:1px solid #ffffff17;background:linear-gradient(145deg,#10243bf0,#0b192cf5);box-shadow:0 18px 55px #02091442}
.camera-traffic-cards article{display:grid;gap:7px;min-height:104px;padding:17px;border-radius:17px}
.camera-traffic-cards span{color:#7f98ad;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.camera-traffic-cards strong{font-size:clamp(20px,3vw,30px);color:#e9f5fc}
.camera-traffic-freshness{margin:9px 3px;color:#7991a5;font-size:11px}
.camera-traffic-chart-card{margin-top:11px;padding:17px;border-radius:19px}
.camera-traffic-chart-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.camera-traffic-chart-card header strong{font-size:14px}.camera-traffic-chart-card header span{color:#91a8ba;font-size:12px}
.camera-traffic-bars{height:230px;display:grid;grid-template-columns:repeat(24,minmax(3px,1fr));align-items:end;gap:5px;border-bottom:1px solid #ffffff25;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#ffffff0c 25%)}
.camera-traffic-bar{height:var(--bar-height);min-height:1px;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#82efd4,#2c9bc9);box-shadow:0 -3px 14px #60d7cc22}
.camera-traffic-axis{display:flex;justify-content:space-between;margin-top:7px;color:#71899d;font-size:10px;font-variant-numeric:tabular-nums}
.camera-traffic-chart-card.compact{padding-bottom:12px}
.camera-traffic-bars.quarter{height:80px;grid-template-columns:repeat(96,minmax(1px,1fr));gap:2px;background:none}
.camera-traffic-bars.quarter .camera-traffic-bar{border-radius:2px;background:#39a9d4}
.camera-traffic-table-card{margin-top:11px;padding:17px;border-radius:19px}.camera-traffic-table-card h4{margin:0 0 12px}
.camera-traffic-table-card>div{overflow:auto}.camera-traffic-table-card table{width:100%;border-collapse:collapse;font-size:12px}
.camera-traffic-table-card th,.camera-traffic-table-card td{padding:10px;border-bottom:1px solid #ffffff10;text-align:left;white-space:nowrap}
.camera-traffic-table-card th{color:#7890a6;text-transform:uppercase;font-size:10px;letter-spacing:.07em}
.camera-traffic-table-card td{color:#d9e7f3;font-variant-numeric:tabular-nums}
.camera-traffic-notes{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}
.camera-traffic-notes .camera-note{border:1px solid #ffffff17;background:#0b192cf5;border-radius:17px}
@media(max-width:900px){.camera-traffic-head{align-items:start;flex-direction:column}.camera-traffic-controls{justify-content:flex-start}.camera-traffic-cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.camera-tabs{width:100%}.camera-tabs button{flex:1;padding:9px}.camera-traffic-controls{width:100%}.camera-traffic-controls label{width:100%}.camera-traffic-controls input{width:100%}.camera-traffic-controls button,.camera-traffic-controls a{flex:1 1 45%;text-align:center}.camera-traffic-cards{grid-template-columns:1fr}.camera-traffic-chart-card{padding:12px}.camera-traffic-bars{height:180px;gap:2px}.camera-traffic-bars.quarter{gap:1px}.camera-traffic-notes{grid-template-columns:1fr}}