:root{--bg: #0b1220;--bg-elev: #111a2e;--bg-elev-2: #16213a;--border: #24314d;--border-strong: #33436a;--text: #e6ecf7;--text-dim: #9aa8c4;--text-faint: #6b7a99;--green: #22c55e;--green-bg: rgba(34, 197, 94, .14);--red: #ef4444;--red-bg: rgba(239, 68, 68, .14);--orange: #f59e0b;--orange-bg: rgba(245, 158, 11, .14);--grey: #64748b;--grey-bg: rgba(100, 116, 139, .16);--blue: #38bdf8;--blue-bg: rgba(56, 189, 248, .14);--radius: 12px;--radius-sm: 8px;--shadow: 0 6px 24px rgba(0, 0, 0, .35);--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2,h3{margin:0;font-weight:650}p{margin:.25rem 0}a{color:var(--blue);text-decoration:none}.mono{font-family:var(--mono);font-size:.9em}.btn{font:inherit;font-weight:550;color:var(--text);background:var(--bg-elev-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.5rem .9rem;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.btn:hover:not(:disabled){background:#1d2b4a;border-color:#41547f}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#1d4ed8;border-color:#2563eb;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#3b82f6}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:var(--bg-elev-2);color:var(--text)}.btn-danger{background:transparent;border-color:var(--red);color:var(--red)}.btn-danger:hover:not(:disabled){background:var(--red-bg)}.btn-sm{padding:.3rem .6rem;font-size:.85rem}.btn-block{width:100%}.field{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}.field>span{color:var(--text-dim);font-weight:550}.field input,.field select,.field textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.5rem .6rem}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}.field textarea{resize:vertical}.field-hint{color:var(--text-faint);font-size:.8rem}.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text)}.check input{width:1.1rem;height:1.1rem;accent-color:var(--blue)}.layout{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;gap:1.25rem;padding:.6rem 1.25rem;background:var(--bg-elev);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;flex-wrap:wrap}.topbar-brand{display:flex;align-items:center;gap:.5rem}.brand-mark{color:var(--blue);font-size:1.3rem}.brand-name{font-weight:700;letter-spacing:.02em}.topbar-nav{display:flex;gap:.25rem;flex:1;flex-wrap:wrap}.nav-link{color:var(--text-dim);padding:.4rem .8rem;border-radius:var(--radius-sm);font-weight:550;display:inline-flex;align-items:center;gap:.4rem}.nav-link:hover{color:var(--text);background:var(--bg-elev-2)}.nav-link.active{color:var(--text);background:var(--bg-elev-2);box-shadow:inset 0 -2px 0 var(--blue)}.topbar-right{display:flex;align-items:center;gap:.75rem}.topbar-clock{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:.9rem}.topbar-user{color:var(--text-dim);font-size:.9rem}.status-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font-size:.8rem;font-weight:650;border:1px solid var(--border-strong)}.status-pill .dot{width:.55rem;height:.55rem;border-radius:50%}.status-ok{color:var(--green);background:var(--green-bg)}.status-ok .dot{background:var(--green)}.status-degraded{color:var(--orange);background:var(--orange-bg)}.status-degraded .dot{background:var(--orange)}.sim-tag{background:var(--blue-bg);color:var(--blue);padding:0 .35rem;border-radius:4px;font-size:.7rem}.content{flex:1;padding:1.25rem;max-width:1600px;width:100%;margin:0 auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.page-title{font-size:1.5rem}.page-sub{color:var(--text-dim);font-size:.9rem}.page-controls{display:flex;gap:.5rem;align-items:center}.page-loading{color:var(--text-dim);padding:2rem 0;text-align:center}.empty-state{text-align:center;color:var(--text-dim);padding:3rem 1rem;border:1px dashed var(--border-strong);border-radius:var(--radius)}.empty-hint{color:var(--text-faint);font-size:.9rem}.form-error{background:var(--red-bg);border:1px solid var(--red);color:#fecaca;padding:.6rem .8rem;border-radius:var(--radius-sm);margin:.75rem 0;font-size:.9rem}.form-note{background:var(--blue-bg);border:1px solid var(--blue);color:#bae6fd;padding:.6rem .8rem;border-radius:var(--radius-sm);margin:.75rem 0;font-size:.9rem}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(1200px 600px at 50% -10%,#16233f 0%,var(--bg) 60%)}.login-card{width:100%;max-width:400px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem}.login-brand{text-align:center;margin-bottom:.5rem}.login-brand h1{font-size:1.4rem;margin-top:.4rem}.login-sub{color:var(--text-dim);font-size:.9rem}.gate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}.gate-card{background:var(--bg-elev);border:1px solid var(--border);border-top:3px solid var(--border-strong);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow)}.gate-card.state-green{border-top-color:var(--green)}.gate-card.state-red{border-top-color:var(--red)}.gate-card.state-orange{border-top-color:var(--orange)}.gate-card.state-blue{border-top-color:var(--blue)}.gate-card.state-grey{border-top-color:var(--grey)}.gate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.gate-title{display:flex;flex-direction:column}.gate-name{font-size:1.1rem}.gate-location,.gate-desc{color:var(--text-dim);font-size:.85rem}.gate-hint{color:var(--text-faint);font-size:.8rem}.state-badge{font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;white-space:nowrap;border:1px solid transparent}.state-badge.state-green{background:var(--green-bg);color:var(--green);border-color:var(--green)}.state-badge.state-red{background:var(--red-bg);color:var(--red);border-color:var(--red)}.state-badge.state-orange{background:var(--orange-bg);color:var(--orange);border-color:var(--orange)}.state-badge.state-blue{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}.state-badge.state-grey{background:var(--grey-bg);color:#cbd5e1;border-color:var(--grey)}.gate-media{position:relative;aspect-ratio:16 / 9;background:var(--bg);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}.gate-media img{width:100%;height:100%;object-fit:cover;display:block}.gate-media-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:.8rem;letter-spacing:.05em}.media-age{position:absolute;bottom:.4rem;right:.4rem;background:#000000b3;color:#e2e8f0;font-size:.7rem;padding:.15rem .45rem;border-radius:999px}.gate-conns{display:flex;gap:.75rem;flex-wrap:wrap}.conn{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-dim)}.conn-dot{width:.5rem;height:.5rem;border-radius:50%}.conn-ok{color:var(--green)}.conn-ok .conn-dot{background:var(--green)}.conn-down{color:var(--red)}.conn-down .conn-dot{background:var(--red)}.conn-unknown{color:var(--grey)}.conn-unknown .conn-dot{background:var(--grey)}.gate-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0}.gate-metrics>div{background:var(--bg-elev-2);border-radius:var(--radius-sm);padding:.4rem .5rem}.gate-metrics dt{color:var(--text-faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}.gate-metrics dd{margin:.15rem 0 0;font-weight:600;font-size:.9rem}.gate-reason{color:var(--text-dim);font-size:.8rem;font-style:italic}.gate-flags{display:flex;gap:.4rem;flex-wrap:wrap}.flag{font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-dim)}.flag-maint{color:var(--orange);border-color:var(--orange);background:var(--orange-bg)}.flag-auto{color:var(--blue);border-color:var(--blue);background:var(--blue-bg)}.flag-auto-off{color:var(--text-faint)}.flag-lock{color:var(--red);border-color:var(--red);background:var(--red-bg)}.gate-actions{display:flex;gap:.5rem;flex-wrap:wrap}.gate-actions .btn{flex:1;min-width:110px}.gate-live video{width:100%;border-radius:var(--radius-sm);background:#000;border:1px solid var(--border)}.gate-feedback{background:var(--blue-bg);border:1px solid var(--blue);color:#bae6fd;padding:.5rem .7rem;border-radius:var(--radius-sm);font-size:.85rem}.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem;flex-wrap:wrap}.tab{font:inherit;font-weight:550;color:var(--text-dim);background:transparent;border:none;padding:.5rem 1rem;cursor:pointer;border-bottom:2px solid transparent}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--blue)}.tab-toolbar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.admin-table,.events-table{width:100%;border-collapse:collapse;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.9rem}.admin-table th,.admin-table td,.events-table th,.events-table td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--border)}.admin-table th,.events-table th{background:var(--bg-elev-2);color:var(--text-dim);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}.admin-table tr:last-child td,.events-table tr:last-child td{border-bottom:none}.row-actions{display:flex;gap:.4rem;flex-wrap:wrap}.events-table .row-err{background:#ef44440f}.details-cell{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim)}.events-table-wrap{overflow-x:auto}.result-tag{font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}.result-ok{background:var(--green-bg);color:var(--green)}.result-err{background:var(--red-bg);color:var(--red)}.alert-list{display:flex;flex-direction:column;gap:.75rem}.alert-item{display:flex;justify-content:space-between;gap:1rem;background:var(--bg-elev);border:1px solid var(--border);border-left:4px solid var(--border-strong);border-radius:var(--radius);padding:.9rem 1rem;flex-wrap:wrap}.alert-item.priority-critical{border-left-color:var(--red)}.alert-item.priority-warning{border-left-color:var(--orange)}.alert-item.priority-info{border-left-color:var(--blue)}.alert-title-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.alert-title-row h3{font-size:1rem}.alert-msg{color:var(--text-dim);font-size:.9rem}.alert-meta{color:var(--text-faint);font-size:.8rem;display:flex;gap:.4rem;flex-wrap:wrap}.alert-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;justify-content:space-between}.alert-time{color:var(--text-faint);font-size:.8rem;font-variant-numeric:tabular-nums}.priority-tag{font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}.priority-critical{background:var(--red-bg);color:var(--red)}.priority-warning{background:var(--orange-bg);color:var(--orange)}.priority-info{background:var(--blue-bg);color:var(--blue)}.status-tag{font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}.status-open{background:var(--red-bg);color:var(--red)}.status-closed{background:var(--grey-bg);color:#cbd5e1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;z-index:50;overflow-y:auto}.modal{width:100%;max-width:520px;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow)}.modal-wide{max-width:760px}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.modal-title{font-size:1.1rem}.modal-body{padding:1.25rem}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-bottom:1rem}.field-wide{grid-column:1 / -1}.form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.settings-grid{display:flex;flex-direction:column;gap:.75rem;max-width:720px}.settings-grid h3{margin-top:.75rem;color:var(--text-dim);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);padding-bottom:.3rem}.settings-grid .field{max-width:320px}.badge{font-size:.7rem;font-weight:700;padding:.05rem .45rem;border-radius:999px}.badge-alert{background:var(--red);color:#fff}@media (max-width: 720px){.topbar{gap:.6rem;padding:.6rem}.topbar-nav{order:3;width:100%}.content{padding:.8rem}.gate-metrics{grid-template-columns:repeat(3,1fr)}.form-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.alert-item{flex-direction:column}.alert-actions{flex-direction:row;align-items:center;width:100%}}