.sg-traffic { margin-bottom:2rem; background:#fff; color:#27372e; border:1px solid #dce7db; border-radius:16px; overflow:hidden; }
.sg-traffic header { background:linear-gradient(120deg,#eff5ec,#f9fbf8); padding:1.25rem clamp(1rem,3vw,1.7rem); border-bottom:1px solid #dce7db; }
.sg-traffic header p { font-size:.85rem; color:#516557; }
.sg-traffic header .sg-traffic-kicker { font-size:.68rem; font-weight:750; letter-spacing:.15em; color:#315844; }
.sg-traffic h2 { font-size:1.55rem; margin:.15rem 0 .25rem; }
.sg-traffic-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; padding:1rem clamp(1rem,3vw,1.7rem); }
.sg-traffic-totals div { background:#f6f8f5; border:1px solid #e3ebe1; border-radius:10px; padding:.65rem clamp(.45rem,2vw,.9rem); }
.sg-traffic-totals dt { font-size:.8rem; color:#516557; }
.sg-traffic-totals dd { font-size:clamp(1.45rem,4vw,2rem); font-weight:700; line-height:1.25; color:#254934; }
.sg-traffic-chart { padding:0 clamp(1rem,3vw,1.7rem) 1.1rem; }
.sg-traffic-chart-header { display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.sg-traffic-chart-header h3 { font-size:1rem; }
.sg-traffic-tabs { display:flex; flex-wrap:wrap; gap:.22rem; background:#f1f5ef; border-radius:9px; padding:.2rem; }
.sg-traffic-tabs button { font-size:.76rem; color:#315844; padding:.35rem .52rem; border-radius:7px; }
.sg-traffic-tabs button[aria-pressed=true] { color:#fff; background:#315844; }
.sg-traffic-tabs button:focus-visible { outline:2px solid #315844; outline-offset:2px; }
.sg-traffic-bars { display:grid; gap:.38rem; max-height:16rem; overflow:auto; }
.sg-traffic-bars li { display:grid; grid-template-columns:6rem minmax(0,1fr) minmax(2rem,auto); align-items:center; gap:.6rem; font-size:.8rem; }
.sg-traffic-bars strong { text-align:right; }
.sg-traffic-track { display:block; height:.48rem; border-radius:12px; background:#edf2eb; }
.sg-traffic-track span { display:block; height:100%; border-radius:inherit; background:#598368; }
.sg-traffic-foot,.sg-traffic-status { font-size:.78rem; color:#516557; margin-top:.8rem; }
.sg-traffic-status { padding:0 1rem 1rem; }
.sg-traffic-online { margin:0 clamp(1rem,3vw,1.7rem) 1rem; padding:.75rem .9rem; border:1px solid #e3ebe1; border-radius:10px; }
.sg-traffic-online-header { display:flex; justify-content:space-between; align-items:center; gap:.45rem; flex-wrap:wrap; }
.sg-traffic-online-header h3 { font-size:1rem; }
.sg-traffic-online-count { border-radius:20px; background:#e9f3e8; color:#28593b; padding:.2rem .6rem; font-size:.76rem; font-weight:700; }
.sg-traffic-online p { font-size:.77rem; color:#516557; margin-top:.25rem; }
.sg-traffic-online ul { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; max-height:9rem; overflow:auto; }
.sg-traffic-online li { display:flex; align-items:center; gap:.4rem; border-radius:20px; background:#f2f6f0; padding:.28rem .6rem; font-size:.8rem; overflow-wrap:anywhere; }
.sg-traffic-online li::before { content:""; width:.42rem; height:.42rem; border-radius:50%; background:#48815b; flex:none; }
.sg-traffic-online .sg-traffic-online-empty { margin-top:.55rem; }