.zonemap{margin:18px 0;padding:16px;background:linear-gradient(180deg,#11191b,#101314);border:1px solid #37545d;border-radius:14px}
.zonemap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.zonemap-head h3{margin:4px 0 7px;font-size:21px}
.zonemap-head p{margin:0;max-width:760px;color:#bfd2d8;line-height:1.45}
.zonemap-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:430px}
.zonemap-controls label{display:flex;align-items:center;gap:6px;padding:7px 9px;background:#172024;border:1px solid #31474e;border-radius:999px;color:#dce9ec;font-size:12px;cursor:pointer}
.zonemap-controls input{width:auto;margin:0;accent-color:#d49a35}
.zonemap-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:14px;margin-top:15px}
.zonemap-overview-wrap{position:relative;align-self:start;border:1px solid #354a51;border-radius:12px;overflow:hidden;background:#0d1214}
.zonemap-canvas{display:block;width:100%;height:auto;cursor:crosshair}
.zonemap-tooltip{position:absolute;z-index:5;pointer-events:none;max-width:250px;padding:8px 10px;border:1px solid #52717b;border-radius:8px;background:rgba(8,13,15,.94);box-shadow:0 8px 22px rgba(0,0,0,.4);font-size:11px}
.zonemap-tooltip strong,.zonemap-tooltip span{display:block}
.zonemap-tooltip strong{color:#fff;margin-bottom:3px}
.zonemap-tooltip span{color:#b8cdd3;line-height:1.35}
.zonemap-detail-panel{min-width:0;display:flex;flex-direction:column;gap:10px}
.zonemap-speed{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;background:#151d20;border:1px solid #30444a;border-radius:10px}
.zonemap-speed label{font-size:12px;color:#bcd0d6;font-weight:700}
.zonemap-speed>div{display:flex;align-items:center;gap:9px;flex:1;justify-content:flex-end}
.zonemap-speed input{max-width:190px;padding:0;accent-color:#d49a35}
.zonemap-speed strong{min-width:72px;text-align:right;color:#fff;font-size:13px}
.zonemap-detail{display:block;width:100%;height:auto;border:1px solid #354a51;border-radius:12px;background:#0d1214}
.zonemap-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.zonemap-readout article{display:flex;flex-direction:column;gap:4px;padding:10px;background:#121a1d;border:1px solid #2d4249;border-radius:10px}
.zonemap-readout article>span{color:#8faab2;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.zonemap-readout article strong{color:#fff;font-size:13px;line-height:1.3}
.zonemap-readout article small{color:#aebfc4;font-size:10px;line-height:1.35}
.zonemap-advice{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:#211b12;border:1px solid #5a401b;border-radius:10px}
.zonemap-advice strong{color:#f0c46b;font-size:12px}
.zonemap-advice span{color:#dcc79f;font-size:11px;line-height:1.4}
.zonemap-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border:1px solid #31474e;border-radius:10px;background:#131b1e}
.zonemap-note strong{color:#8bdcff;white-space:nowrap;font-size:12px}
.zonemap-note span{color:#b9cbd0;font-size:12px;line-height:1.4}
@media(max-width:1180px){.zonemap-layout{grid-template-columns:1fr}.zonemap-detail-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}.zonemap-speed{grid-column:1/-1}.zonemap-readout{align-content:start}}
@media(max-width:760px){.zonemap-head{flex-direction:column}.zonemap-controls{justify-content:flex-start}.zonemap-layout,.zonemap-detail-panel{display:flex;flex-direction:column}.zonemap-readout{grid-template-columns:1fr}.zonemap-note{flex-direction:column}.zonemap-speed{align-items:flex-start;flex-direction:column}.zonemap-speed>div{width:100%;justify-content:space-between}}