:root{--blue:#001689;--orange:#f29100;--ink:#202735;--muted:#6d7684;--panel:#fff;--bg:#f4f6f9}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Arial,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column}
header{height:82px;background:#fff;border-top:5px solid var(--orange);border-bottom:1px solid #d8dde6;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;z-index:1001}
.eyebrow{margin:0 0 3px;color:var(--orange);font-size:10px;font-weight:700;letter-spacing:1.4px}h1{margin:0;color:var(--blue);font-size:22px}h2{margin:0 0 12px;color:var(--blue);font-size:15px}
.header-tools{display:flex;align-items:center;gap:22px}.zone-filter{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;font-weight:700}.zone-filter select{min-width:235px;border:1px solid #bfc7d4;border-radius:6px;background:#fff;color:var(--ink);padding:8px 30px 8px 9px}.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}#status-dot{width:9px;height:9px;border-radius:50%;background:#f2b705;box-shadow:0 0 0 3px #fff2bf}.status.ok #status-dot{background:#1f9d55;box-shadow:0 0 0 3px #d9f5e5}.status.error #status-dot{background:#d43838;box-shadow:0 0 0 3px #f8dada}
main{position:relative;flex:1;min-height:400px}#map{position:absolute;inset:0;background:#e9edf3}.panel{position:absolute;z-index:900;top:18px;right:18px;width:230px;background:rgba(255,255,255,.96);border:1px solid #d8dde6;border-radius:10px;box-shadow:0 8px 25px rgba(21,32,59,.18);padding:16px}
.panel label{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:13px;cursor:pointer}.panel input{accent-color:var(--blue)}.dot{display:inline-block;width:12px;height:12px;border-radius:50%}.dot.ed{background:#0067b1;border:2px solid #fff;box-shadow:0 0 0 1px #0067b1}.dot.aff{background:rgba(220,38,38,.45);border:2px solid #c81e1e}.divider{border-top:1px solid #e1e5eb;margin:13px 0}.panel p{margin:6px 0;color:var(--muted);font-size:12px}.panel strong{color:var(--ink);font-size:18px}.panel p:nth-of-type(2) strong{color:#9a6800}.panel button{width:100%;margin-top:10px;border:0;border-radius:6px;background:var(--blue);color:#fff;font-weight:700;padding:9px;cursor:pointer}.panel button:hover{background:#0029aa}.ed-tooltip{min-width:240px}.ed-tooltip .state{font-weight:700;color:#0067b1;margin-bottom:7px}.ed-tooltip.affected .state{color:#8a5b00}.ed-tooltip .record{padding:5px 0;border-top:1px solid #e3e6eb}.ed-tooltip b{color:#202735}
.affected-panel{position:absolute;z-index:900;left:18px;bottom:18px;width:320px;max-height:52%;overflow:hidden;background:rgba(255,255,255,.97);border:1px solid #d8dde6;border-radius:10px;box-shadow:0 8px 25px rgba(21,32,59,.18);padding:14px;display:flex;flex-direction:column}.affected-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.affected-heading h2{margin:0}.affected-heading button{border:0;background:transparent;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer}.affected-panel>p{margin:10px 0 0;color:var(--muted);font-size:12px}.affected-panel.collapsed{width:auto}.affected-panel.collapsed #affected-list,.affected-panel.collapsed #affected-empty{display:none}#affected-list{margin-top:9px;overflow:auto;border-top:1px solid #e1e5eb}.affected-item{display:block;width:100%;border:0;border-bottom:1px solid #e7e9ee;background:#fff;text-align:left;padding:9px 4px;cursor:pointer;color:var(--ink)}.affected-item:hover{background:#fff8dc}.affected-item strong{display:block;color:#8a5b00;font-size:12px}.affected-item span{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.3}#zone-counts{margin:9px 0;border-top:1px solid #e1e5eb;padding-top:6px}.zone-count{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--muted);font-size:10px}.zone-count b{color:#8a5b00;font-size:12px;white-space:nowrap}
.attention{margin-top:6px;padding:6px;background:#f1f7f3;border-left:3px solid #1f9d55;font-size:11px;line-height:1.4}.attention.pending{background:#fff6dc;border-left-color:#d59a00}.attention.none{background:#f3f4f6;border-left-color:#9aa1aa;color:#6d7684}#attention-status{font-size:10px;line-height:1.3}.zone-count{padding:5px 0!important;border-bottom:1px solid #eef0f3}.zone-count span{max-width:47%}.zone-count b{font-size:11px!important;text-align:right}.zone-count em{color:var(--muted);font-size:9px;font-style:normal;font-weight:400}.marker-key{display:grid;gap:5px;margin:8px 0;font-size:10px;color:var(--muted)}.marker-key span{display:flex;align-items:center;gap:7px}.sample{position:relative;display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #8b93a0}.sample.blue{background:#0067b1}.sample.green{background:#159947}.sample.yellow{background:#ffd400;border-color:#6f4b00}.sample.yellow i{position:absolute;left:3px;top:3px;width:4px;height:4px;border-radius:50%;background:#159947}
.failure-info{margin:0 0 7px;padding:6px;background:#fff7d6;border-left:3px solid #d59a00;color:#6f4b00;font-size:11px}
.export-button{border:0;border-radius:6px;background:#147a3c;color:#fff;padding:9px 13px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}.export-button:hover{background:#0f6531}.export-button:disabled{background:#aeb5bd;cursor:not-allowed}
footer{height:30px;background:#fff;border-top:1px solid #d8dde6;color:var(--muted);font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 12px;text-align:center}.leaflet-control-attribution{font-size:9px}
@media(max-width:700px){header{height:auto;padding:9px 12px;align-items:flex-start;gap:8px;flex-wrap:wrap}h1{font-size:17px}.header-tools{width:100%;gap:8px;justify-content:space-between}.zone-filter select{min-width:170px;max-width:190px}.status{font-size:10px}.panel{top:10px;right:10px;width:190px;padding:12px}.affected-panel{left:10px;bottom:10px;width:280px;max-height:42%}footer{height:auto;min-height:32px}}