.traffic-root,.traffic-root body{height:auto;min-height:100%;overflow:auto}
.traffic-page{background:radial-gradient(ellipse at 20% 0,#3f7158,#163e42 80%);font-size:18px}
.traffic-wrap{width:min(1120px,100%);margin:auto;padding:40px 28px 24px}
.traffic-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.traffic-header .eyebrow{margin:30px 0 12px;color:#a9c2a9;letter-spacing:3px}
.traffic-header h1{font-size:60px;font-weight:400;line-height:1;color:#f2d08a;text-shadow:0 4px #6c603c,2px 7px #15383a}
.traffic-connection{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#trafficStatus{color:#e4cf95;background:#36594e;border:1px solid #9bae7c77;padding:7px 11px;border-radius:5px}
#trafficStatus.online{color:#c0dfb5;border-color:#96c69c77}#trafficStatus.offline{color:#f3b6a2;border-color:#e1957955}
#trafficUpdated{font-size:12px;color:#b7c5ac}.traffic-connection button{font-size:12px}
.traffic-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.metric{padding:24px 22px}.metric p{color:#c5d1b9;margin-bottom:17px}.metric strong{font-size:66px;font-weight:400;line-height:1;color:#b8d5be;text-shadow:0 4px #28463e;display:block}
.metric.human strong{color:#f3cf80}.metric.bot strong{color:#c2b6dc}.metric.connection strong{color:#91c6e2}.metric small{display:block;font-size:12px;color:#acbeaa;margin-top:15px}
.traffic-chart{padding:26px 26px 21px;margin-top:26px}
.traffic-section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px}
.traffic-section-heading h2,.traffic-bottom h2{font-size:24px;font-weight:400;color:#dbdfc6}
.traffic-section-heading span{font-size:12px;color:#b8c9b0;display:flex;gap:8px;align-items:center}
.traffic-section-heading i{width:7px;height:7px;background:#edc277;display:inline-block;margin-left:12px}.traffic-section-heading i.room-key{background:#8bbfaa}
#trafficChart{display:block;width:100%;height:170px;overflow:visible}.chart-grid{fill:none;stroke:#88a27d25;stroke-width:1}.chart-line{fill:none;stroke:#edc277;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.room-line{stroke:#8bbfaa;stroke-width:2;stroke-dasharray:6 5}
.chart-caption{display:flex;justify-content:space-between;color:#9cb29c;font-size:12px;margin-top:13px}
.traffic-bottom{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:25px}.traffic-bottom section{padding:26px}.traffic-bottom h2{margin-bottom:18px}
.stage-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #84977c24}.stage-row span{display:flex;align-items:center;gap:10px;color:#c3d0b6}.stage-row strong{color:#e8c788;font-weight:400;font-size:24px}.stage-row i{width:7px;height:7px;background:#99a994;display:block}.stage-row i.playing-dot{background:#e9bc6a}.stage-row i.round-dot{background:#a393b6}.stage-row i.finished-dot{background:#779cb4}
.room-capacity{background:#223e42;height:7px;margin-top:20px;overflow:hidden;border-radius:2px}.room-capacity>div{height:100%;width:0;background:#9fc0a1;transition:width .35s}.traffic-stages>small{display:block;text-align:right;font-size:12px;color:#a8bfa6;margin-top:8px}
.traffic-service dl>div{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #84977c24}.traffic-service dt{color:#b7c9ad}.traffic-service dd{color:#edcd8c;text-align:right}.traffic-service p{font-size:12px;color:#9fb39e;line-height:1.8;margin-top:24px}
.traffic-footer{text-align:center;font-size:12px;letter-spacing:3px;color:#88a58e;margin:35px 0 5px}
@media(max-width:720px){.traffic-wrap{padding:25px 17px}.traffic-header{align-items:center;margin-bottom:25px}.traffic-header h1{font-size:42px}.traffic-header .eyebrow{font-size:9px;letter-spacing:1px;margin-top:24px}.traffic-connection{gap:8px}.traffic-summary{grid-template-columns:1fr 1fr;gap:14px}.metric{padding:20px 17px}.metric strong{font-size:54px}.metric p{font-size:18px;margin-bottom:14px}.metric small{font-size:10px}.traffic-chart{padding:20px 17px}.traffic-section-heading{align-items:flex-start}.traffic-section-heading h2{font-size:18px}.traffic-section-heading span{font-size:10px;gap:5px;flex-wrap:wrap;justify-content:flex-end}.traffic-bottom{grid-template-columns:1fr;gap:18px}.traffic-bottom section{padding:23px 20px}#trafficChart{height:130px}}

.stage-row .draft-dot{background:#bca5d9}