html,body{margin:0;height:100%;background:#0b1210;color:#e8efe9;font:14px/1.4 ui-sans-serif,system-ui;}
header{position:absolute;z-index:2;left:16px;top:12px;max-width:460px;}
h1{margin:0;font-size:20px;letter-spacing:.04em;}
button{margin-top:8px;padding:6px 12px;border:0;border-radius:4px;background:#d4a017;color:#111;font-weight:600;cursor:pointer;}
#c{display:block;width:100%;height:100%;cursor:crosshair;}
#status{margin-left:8px;opacity:.7;}
#alerts{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
#alerts .a{padding:5px 9px;border-left:3px solid #e5484d;background:#1c0f10;color:#f2d7d8;font-size:12.5px;border-radius:0 4px 4px 0;}
#alerts .a.sev3{border-color:#ff8d00;background:#211505;color:#ffe3bd;}
#panel{position:absolute;z-index:3;display:none;min-width:230px;max-width:320px;background:#101b16ee;border:1px solid #2c463a;border-radius:6px;padding:10px 12px;box-shadow:0 6px 24px #000a;backdrop-filter:blur(4px);}
#panel h3{margin:0 0 2px;font-size:15px;color:#ffd75e;}
#panel .sub{opacity:.65;font-size:12px;margin-bottom:6px;}
#panel .dep{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font-size:13px;}
#panel .dep b{color:#7fd4ff;font-weight:600;min-width:34px;}
#panel .dep .t{color:#cfe8d8;}
#panel .close{float:right;cursor:pointer;opacity:.6;margin-left:8px;}