:root{
    --bg:#0b1220;
    --surface:#0f1a2b;
    --surface-2:#142035;
    --text:#e6efff;
    --muted:#8aa0bd;
    --line:#21304a;

    --fire:#ff3b3b;
    --trouble:#ffb300;
    --test:#2fb0ff;
    --drill:#1dd1a1;
    --disable:#9e9e9e;
    --ok:#2e7d32;
    --blocked:#b71c1c;

    --accent:#3e7bff;
    --radius:10px;
    --shadow:0 10px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    margin:0; background:linear-gradient(180deg, #0a1020, var(--bg)); color:var(--text);
}

.topbar{
    position:sticky; top:0; z-index:20;
    background:linear-gradient(180deg, #0c152a, #0b1528);
    border-bottom:1px solid #0e223f;
    color:#fff; padding:12px 18px;
    display:flex; align-items:center; gap:18px;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand img{height:22px; width:auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.topbar a{color:#cfe0ff; text-decoration:none; padding:6px 10px; border-radius:8px}
.topbar a:hover{background:#122545}
.socket-dot{width:10px; height:10px; border-radius:10px; display:inline-block; margin-left:8px; background:#888}
.socket-up{background:#22c55e} .socket-down{background:#ef4444}

.container{max-width:1100px; margin:24px auto; padding:0 18px}

.btn{ padding:7px 12px; border:1px solid #2a3d5f; border-radius:8px; text-decoration:none; display:inline-flex; gap:8px; align-items:center; color:#cfe0ff; background:#102039}
.btn:hover{background:#142642}
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff}
.btn.danger{ background:#c62828; border-color:#c62828; color:#fff }

.table{width:100%; border-collapse: collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px 12px; text-align:left}
.table thead th{background:var(--surface-2); color:#d7e6ff; font-weight:700}

.form label{display:block; margin:12px 0; color:#dbe8ff}
.form input,.form textarea{
    width:100%; padding:10px 12px; background:#0e1a2d; color:var(--text);
    border:1px solid var(--line); border-radius:8px; outline:none
}
.form input:focus,.form textarea:focus{border-color:#3c73ff; box-shadow:0 0 0 3px rgba(60,115,255,.25)}
.checkbox{display:flex; align-items:center; gap:8px}

.badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 8px; border-radius:999px; font-size:.85rem; font-weight:600; letter-spacing:.2px;
    background:#1b2742; color:#cfe0ff; border:1px solid #2a3d5f;
}
.badge.ok{background:#14331a; color:#c4f3cf; border-color:#225e2b}
.badge.muted{opacity:.7}

.list{list-style:none; padding:0; margin:0}
.list li{
    background:var(--surface);
    border:1px solid var(--line);
    border-left:6px solid #415b8a;
    border-radius:8px;
    padding:10px 12px; margin:10px 0;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.list li .top{
    display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom:6px;
}
.meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.acc{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-weight:700; color:#d7e6ff}
.desc{font-weight:600}
.ts{color:var(--muted); font-size:.9rem}
.sub{color:#cfe0ff}

.kind-fire{ border-left-color: var(--fire) }
.kind-trouble{ border-left-color: var(--trouble) }
.kind-test{ border-left-color: var(--test) }
.kind-drill{ border-left-color: var(--drill) }
.kind-disable{ border-left-color: var(--disable) }
.kind-general{ border-left-color: #4d7cff }

.status-RESTORED .desc{ color:#a7f3d0 }
.status-TRIGGERED .desc{ color:#ffd5d5 }

.list li.blocked{ opacity:.8; filter:saturate(.8) }

.actions{margin-top:14px}
.help{color:var(--muted); margin:4px 0 10px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px}
code{background:#0c1a30; border:1px solid #203256; padding:2px 6px; border-radius:6px}
h1{margin:10px 0 16px; font-size:1.4rem; letter-spacing:.2px}

.form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow);
}

.form fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 18px 0;
    background: var(--surface-2);
}
.form legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--accent);
}

.form label {
    margin-bottom: 12px;
    font-weight: 500;
}
.form input,
.form textarea {
    margin-top: 6px;
}

.form .checkbox {
    padding: 6px 0;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding-left: 8px;
}

.form .actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}