.traffic-metrics,.traffic-periods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.traffic-periods{grid-template-columns:repeat(4,minmax(0,1fr))}.traffic-metrics article,.traffic-periods article{padding:16px;background:#fff;border:1px solid var(--line);border-radius:9px}.traffic-metrics span,.traffic-periods span{display:block;color:var(--muted);font-size:12px}.traffic-metrics strong,.traffic-periods strong{display:block;margin-top:5px;color:var(--navy);font-size:26px}.traffic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.admin-list-card>h2{padding:17px 20px;margin:0;border-bottom:1px solid var(--line)}.compact-traffic-list>div{display:flex;justify-content:space-between;gap:15px;padding:11px 18px;border-bottom:1px solid var(--line)}.compact-traffic-list span{display:grid;gap:3px}.compact-traffic-list small{color:var(--muted)}.traffic-table,.security-table{min-width:760px}.security-mode{display:flex;justify-content:space-between;gap:24px;padding:18px 20px;margin-bottom:12px;background:#fff;border:1px solid var(--line);border-left:5px solid #c79827;border-radius:9px}.security-mode.mode-enforce{border-left-color:#b23b3b}.security-mode.mode-off{border-left-color:#7b8792}.security-mode>div>span{font-size:12px;color:var(--muted)}.security-mode>div>strong{display:block;font-size:24px;color:var(--navy)}.security-mode p{margin:5px 0 0;color:var(--muted)}.security-mode-form{display:grid;grid-template-columns:minmax(180px,260px) auto auto;gap:12px;align-items:end}.security-note,.form-warning{padding:10px 13px;background:#fff7df;border:1px solid #edd58e;border-radius:7px;color:#765a0c}.reason-chip{display:block;margin:2px 0;font-size:12px}.traffic-trend{background:#fff;border:1px solid var(--line);border-radius:9px;margin-top:18px}.traffic-trend summary{padding:14px 18px;cursor:pointer;font-weight:700}@media(max-width:900px){.traffic-metrics{grid-template-columns:repeat(3,1fr)}.traffic-periods{grid-template-columns:repeat(2,1fr)}.traffic-grid{grid-template-columns:1fr}.security-mode{flex-direction:column}.security-mode-form{grid-template-columns:1fr auto}}@media(max-width:600px){.traffic-metrics{grid-template-columns:repeat(2,1fr)}.security-mode-form{grid-template-columns:1fr}.security-mode-form button{width:100%}.page-heading{align-items:flex-start;flex-direction:column}}

.traffic-chart-card{margin-bottom:18px;overflow:hidden}.traffic-chart-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--line)}.traffic-chart-heading h2{margin:0;color:var(--navy)}.traffic-chart-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.traffic-chart-controls{display:flex;gap:10px;flex:0 0 auto}.traffic-chart-controls label{display:grid;gap:4px;color:var(--muted);font-size:12px}.traffic-chart-controls select{min-width:110px;padding:8px 30px 8px 10px}.traffic-chart-legend{display:flex;gap:18px;padding:12px 20px 0;font-weight:700}.traffic-chart-legend span::before{content:"";display:inline-block;width:20px;height:3px;margin:0 7px 3px 0;border-radius:2px;background:#1769aa}.traffic-chart-legend .uv::before{background:#d17b18}.traffic-chart-status{padding:34px 20px;text-align:center;color:var(--muted)}.traffic-chart-wrap{position:relative;width:100%;height:340px;padding:4px 12px 0}.traffic-chart-wrap canvas{display:block;width:100%;height:100%;touch-action:manipulation}.traffic-chart-tooltip{position:absolute;z-index:2;min-width:135px;padding:9px 11px;background:rgba(20,38,58,.94);border-radius:7px;color:#fff;line-height:1.55;font-size:12px;pointer-events:none;transform:translate(-50%,-110%);white-space:nowrap}.traffic-chart-peak{margin:8px 20px 18px;padding:10px 12px;background:#f5f8fb;border-radius:7px;color:var(--navy)}
@media(max-width:700px){.traffic-chart-heading{align-items:stretch;flex-direction:column}.traffic-chart-controls{width:100%}.traffic-chart-controls label{flex:1}.traffic-chart-controls select{width:100%;min-width:0}.traffic-chart-wrap{height:280px;padding-left:4px;padding-right:4px}.traffic-chart-tooltip{transform:translate(-50%,-105%)}}