*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0f1117;color:#e1e4e8;min-height:100vh}
#app{max-width:1400px;margin:0 auto;padding:12px}

/* ALARM BAR */
.alarm-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:#5a0000;border:2px solid #f85149;border-radius:10px;margin-bottom:12px;animation:alarm-flash 1s infinite}
.alarm-bar.hidden{display:none}
.alarm-bar.muted{animation:none;background:#3a1a1a;border-color:#6e3030}
.alarm-icon{font-size:1.8rem;animation:alarm-shake .3s infinite}
.alarm-bar.muted .alarm-icon{animation:none}
.alarm-text{flex:1;font-size:1.1rem;font-weight:700;color:#ff6b6b}
.btn-mute{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:.85rem}
.btn-mute:hover{background:rgba(255,255,255,.2)}
.btn-ack{background:#238636;color:#fff;border:none;padding:8px 18px;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:600}
.btn-ack:hover{background:#2ea043}
@keyframes alarm-flash{0%,100%{background:#5a0000}50%{background:#8a0000}}
@keyframes alarm-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

/* HEADER */
header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #21262d}
h1{font-size:1.2rem;color:#58a6ff;white-space:nowrap}
#stats{display:flex;gap:5px}
.badge{padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:600;cursor:default}
.badge.up{background:#1a3a2a;color:#3fb950}
.badge.down{background:#3a1a1a;color:#f85149}
.badge.paused{background:#1a1a2a;color:#8b949e}
#search{background:#161b22;border:1px solid #30363d;color:#e1e4e8;padding:5px 10px;border-radius:6px;font-size:.8rem;width:150px}
#search:focus{outline:none;border-color:#58a6ff}
#sort-by{background:#161b22;border:1px solid #30363d;color:#8b949e;padding:5px 8px;border-radius:6px;font-size:.75rem}
#filters{display:flex;gap:2px}
#filters button{background:#21262d;color:#8b949e;border:none;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:.72rem;transition:all .15s}
#filters button:hover{background:#30363d}
#filters button.active{background:#1f6feb;color:#fff}
.btn-primary{background:#238636;color:#fff;border:none;padding:5px 14px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500}
.btn-primary:hover{background:#2ea043}
.btn-secondary{background:#21262d;color:#8b949e;border:1px solid #30363d;padding:5px 14px;border-radius:6px;cursor:pointer;font-size:.8rem}

/* DOWN SECTION */
#down-section{margin-bottom:8px}
.down-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 16px;background:#2d1214;border:1px solid #f85149;border-radius:8px;margin-bottom:4px;animation:down-pulse 2s infinite}
.down-card.acked{animation:none;border-color:#6e3030;background:#1e1012}
.down-card .dc-name{font-weight:600;font-size:.9rem;color:#ff8080}
.down-card .dc-url{font-size:.72rem;color:#8b4040;word-break:break-all}
.down-card .dc-error{font-size:.78rem;color:#e06060;margin-top:4px}
.down-card .dc-time{font-size:.7rem;color:#6e3030;margin-top:2px}
.down-card .dc-ip{font-size:.7rem;color:#6e3030}
.down-card .dc-actions{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.btn-ack-one{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:.72rem;font-weight:600}
.btn-ack-one:hover{background:rgba(255,255,255,.25)}
.btn-ack-one.acked{color:#3fb950;border-color:#238636;background:#1a3a2a}
.down-card .btn-icon,.dc-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#ffcccc;font-size:.75rem;padding:4px 10px;border-radius:4px;opacity:1;cursor:pointer}
.down-card .btn-icon:hover,.dc-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.dc-actions{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
@keyframes down-pulse{0%,100%{opacity:1}50%{opacity:.85}}

/* MONITORS LIST */
#monitors{display:grid;gap:3px}
.monitor{display:grid;grid-template-columns:10px 1fr 110px 40px 55px 55px 120px;align-items:center;gap:8px;padding:6px 12px;background:#161b22;border-radius:5px;border:1px solid #21262d;transition:all .15s;cursor:pointer;font-size:.82rem}
.monitor:hover{border-color:#30363d;background:#1c2129}
.monitor.down{border-left:3px solid #f85149;background:#1a1015}
.monitor.paused{opacity:.45}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.up{background:#3fb950}
.dot.down{background:#f85149;animation:pulse 1.5s infinite}
.dot.pending{background:#d29922}
.dot.paused{background:#484f58}
.monitor .name{min-width:0;overflow:hidden}
.monitor .mname{font-weight:500;color:#c9d1d9;font-size:.82rem}
.monitor .url{color:#484f58;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.monitor .kw{background:#1a2a3a;color:#58a6ff;padding:0 4px;border-radius:2px;font-size:.6rem;margin-left:4px}
.monitor .group{color:#484f58;font-size:.65rem;background:#21262d;padding:0 5px;border-radius:2px;margin-left:3px}
.monitor .ip{color:#6e7681;font-size:.72rem;text-align:left;font-family:monospace}
.monitor .interval{color:#6e7681;font-size:.72rem;text-align:center}
.monitor .uptime{color:#8b949e;font-size:.78rem;text-align:right}
.monitor .uptime.warn{color:#d29922}
.monitor .ms{color:#8b949e;font-size:.78rem;text-align:right}
.monitor .ms.slow{color:#d29922}
.monitor .actions{display:flex;gap:2px;justify-content:flex-end;flex-shrink:0;white-space:nowrap}
.btn-icon{background:#21262d;border:1px solid #30363d;cursor:pointer;font-size:.82rem;padding:3px 7px;border-radius:4px;opacity:.85;transition:all .15s;color:#c9d1d9}
.btn-icon:hover{opacity:1;background:#30363d;border-color:#484f58}
.btn-sm{font-size:.75rem;padding:2px 6px}
.btn-del-sm{color:#f85149;border-color:#6e3030}
.btn-del-sm:hover{background:#3a1a1a;border-color:#f85149}

footer{margin-top:12px;text-align:center;color:#484f58;font-size:.68rem;padding:6px}

/* MODAL */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:100;justify-content:center;align-items:flex-start;padding-top:40px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal-box{background:#161b22;border:1px solid #30363d;border-radius:10px;padding:20px;width:480px;max-width:95vw}
.modal-wide{width:700px}
.modal-box h2{margin-bottom:14px;font-size:1rem;color:#e1e4e8}
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.form-row label{width:110px;font-size:.8rem;color:#8b949e;flex-shrink:0}
.form-row input,.form-row select{flex:1;background:#0d1117;border:1px solid #30363d;color:#e1e4e8;padding:6px 8px;border-radius:5px;font-size:.82rem}
.form-row input:focus,.form-row select:focus{outline:none;border-color:#58a6ff}
.form-row input[type="checkbox"]{width:auto;flex:none;margin-right:4px}
.form-actions{display:flex;gap:6px;margin-top:14px;justify-content:flex-end}

/* DETAIL */
.detail-header{margin-bottom:12px}
.detail-header h2{color:#e1e4e8;margin-bottom:3px;font-size:1rem}
.detail-header a{color:#58a6ff;font-size:.8rem;text-decoration:none}
.detail-info{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:12px;padding:10px;background:#0d1117;border-radius:6px;font-size:.8rem;color:#8b949e}
.detail-info b{color:#e1e4e8}
h3{color:#e1e4e8;margin:10px 0 6px;font-size:.9rem}
.history-list{max-height:350px;overflow-y:auto;font-size:.75rem}
.history-item{display:flex;align-items:center;gap:6px;padding:3px 6px;border-bottom:1px solid #21262d}
.history-item .dot{width:7px;height:7px;flex-shrink:0}
.history-item.down{color:#f85149}
.history-item.up{color:#8b949e}
.btn-close-detail{margin-top:12px;background:#21262d;color:#8b949e;border:1px solid #30363d;padding:6px 16px;border-radius:5px;cursor:pointer;font-size:.8rem;width:100%}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;padding:10px 20px;border-radius:8px;font-size:.85rem;z-index:200;transition:opacity .3s}
.toast.hidden{opacity:0;pointer-events:none}
.toast.success{background:#1a3a2a;color:#3fb950;border:1px solid #238636}
.toast.error{background:#3a1a1a;color:#f85149;border:1px solid #da3633}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:768px){
  .monitor{grid-template-columns:10px 1fr 50px 55px;font-size:.75rem}
  .monitor .ip,.monitor .actions,.monitor .interval{display:none}
  #search{width:100px}
  .modal-box{padding:14px}
  .form-row{flex-direction:column;align-items:stretch;gap:3px}
  .form-row label{width:auto}
}