:root{--bg: #0e1116;--bg-soft: #161b22;--bg-card: #1b2230;--bg-elevated: #212a3a;--border: #2b3445;--border-strong: #3a465c;--text: #e6edf3;--text-dim: #9aa7b8;--text-faint: #6b7787;--accent: #3fb6e0;--accent-strong: #2a93ba;--good: #3fb950;--warn: #d29922;--bad: #f85149;--bad-soft: rgba(248, 81, 73, .14);--good-soft: rgba(63, 185, 80, .14);--warn-soft: rgba(210, 153, 34, .14);--accent-soft: rgba(63, 182, 224, .12);--shadow: 0 8px 30px rgba(0, 0, 0, .35);--radius: 12px;--radius-sm: 8px;--gap: 1rem}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;font-weight:600}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-strong);padding:.55rem 1rem;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform 80ms ease}button:hover:not(:disabled){background:#283248;border-color:var(--accent-strong)}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#04161d;font-weight:600}button.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}button.danger{background:transparent;border-color:var(--bad);color:var(--bad)}button.danger:hover:not(:disabled){background:var(--bad-soft)}button.ghost{background:transparent;border-color:transparent}button.ghost:hover:not(:disabled){background:var(--bg-elevated);border-color:var(--border)}button.sm{padding:.35rem .7rem;font-size:.85rem}input,select,textarea{font:inherit;color:var(--text);background:var(--bg-soft);border:1px solid var(--border-strong);padding:.5rem .7rem;border-radius:var(--radius-sm);width:100%}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}textarea{min-height:4.5rem;resize:vertical}label{color:var(--text-dim);font-size:.85rem}.app-shell{min-height:100vh;display:flex;flex-direction:column}.appbar{display:flex;align-items:center;gap:1.25rem;padding:0 1.5rem;height:60px;background:var(--bg-soft);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.appbar .brand{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.05rem;letter-spacing:.2px}.appbar .brand .logo{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));display:grid;place-items:center;color:#04161d;font-weight:800}.appbar nav{display:flex;gap:.25rem}.appbar nav a{color:var(--text-dim);padding:.4rem .8rem;border-radius:var(--radius-sm);font-weight:500}.appbar nav a:hover{color:var(--text);background:var(--bg-elevated);text-decoration:none}.appbar nav a.active{color:var(--text);background:var(--accent-soft)}.appbar .spacer{flex:1}.appbar .user{display:flex;align-items:center;gap:.75rem;color:var(--text-dim);font-size:.9rem}.page{width:100%;max-width:1320px;margin:0 auto;padding:1.5rem}.page-title{font-size:1.4rem;margin-bottom:.25rem}.page-subtitle{color:var(--text-dim);margin-bottom:1.25rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem}.card h3{font-size:1rem;margin-bottom:.75rem;color:var(--text)}.section-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:.6rem}.badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-elevated);border:1px solid var(--border);padding:.15rem .6rem;border-radius:999px;font-size:.78rem;color:var(--text-dim)}.badge.good{color:var(--good);border-color:#3fb95066;background:var(--good-soft)}.badge.bad{color:var(--bad);border-color:#f8514966;background:var(--bad-soft)}.badge.warn{color:var(--warn);border-color:#d2992266;background:var(--warn-soft)}.badge.accent{color:var(--accent);border-color:#3fb6e066;background:var(--accent-soft)}.dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--text-faint);flex:none}.dot.online{background:var(--good);box-shadow:0 0 7px var(--good)}.dot.offline{background:var(--bad)}.error-banner,.info-banner{border-radius:var(--radius-sm);padding:.7rem 1rem;margin-bottom:1rem;font-size:.92rem}.error-banner{background:var(--bad-soft);border:1px solid var(--bad);color:#ffb3ae}.info-banner{background:var(--accent-soft);border:1px solid var(--accent-strong);color:var(--accent)}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,rgba(63,182,224,.1),transparent),var(--bg)}.login-card{width:min(100%,400px);background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:2rem}.login-card .brand{display:flex;align-items:center;gap:.7rem;margin-bottom:.25rem;font-size:1.3rem;font-weight:700}.login-card form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem}.field{display:flex;flex-direction:column;gap:.3rem}.hint{color:var(--text-faint);font-size:.82rem;margin-top:1rem;text-align:center}.live-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.25rem;align-items:start}@media (max-width: 1080px){.live-grid{grid-template-columns:1fr}}.video-stage{position:relative;background:#05080c;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;aspect-ratio:16 / 9;display:grid;place-items:center}.video-stage img{width:100%;height:100%;object-fit:contain;display:block}.video-stage .placeholder{color:var(--text-faint);text-align:center;padding:2rem}.video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.video-overlay .roi-box{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 1px #00000080}.video-overlay .roi-box.alert{border-color:var(--bad)}.video-overlay .roi-label{position:absolute;transform:translateY(-100%);background:var(--accent);color:#04161d;font-size:.7rem;font-weight:600;padding:.05rem .35rem;border-radius:4px 4px 0 0;white-space:nowrap}.video-hud{position:absolute;left:.75rem;bottom:.75rem;display:flex;gap:.4rem;flex-wrap:wrap}.video-hud .chip{background:#05080cb8;border:1px solid var(--border);border-radius:6px;padding:.15rem .5rem;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--text-dim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.video-live-tag{position:absolute;top:.75rem;left:.75rem;display:flex;align-items:center;gap:.35rem;background:#05080cb8;border-radius:6px;padding:.2rem .55rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.side-stack{display:flex;flex-direction:column;gap:1rem}.mode-switch{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}.mode-switch button{flex-direction:column;text-align:center;padding:.6rem .4rem;font-size:.85rem}.mode-switch button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.preset-bar{display:flex;flex-wrap:wrap;gap:.5rem}.preset-bar button{flex:1 0 auto}.ptz{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.ptz-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:.3rem}.ptz-pad button{padding:0;display:grid;place-items:center;font-size:1.1rem}.ptz-pad .center{font-size:.7rem;color:var(--text-faint)}.zoom-col{display:flex;flex-direction:column;gap:.3rem}.zoom-col button{width:44px;height:44px;padding:0}.ptz-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ptz-overlay .ptz-arrow{position:absolute;pointer-events:auto;width:56px;height:56px;display:grid;place-items:center;font-size:1.6rem;line-height:1;border-radius:50%;background:#05080c99;border:1px solid var(--border);color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ptz-overlay .ptz-arrow:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}.ptz-overlay .ptz-arrow.up{top:.75rem;left:50%;transform:translate(-50%)}.ptz-overlay .ptz-arrow.down{bottom:.75rem;left:50%;transform:translate(-50%)}.ptz-overlay .ptz-arrow.left{left:.75rem;top:50%;transform:translateY(-50%)}.ptz-overlay .ptz-arrow.right{right:.75rem;top:50%;transform:translateY(-50%)}.zoom-bar{display:flex;gap:.5rem;margin-top:.6rem}.zoom-bar button{flex:1;height:48px;font-size:1rem;font-weight:600}.confirm-dialog{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);width:min(100%,420px);padding:1.5rem}.confirm-dialog h3{margin:0 0 .5rem}@media (max-width: 640px){.ptz-overlay .ptz-arrow{width:64px;height:64px;font-size:1.9rem}}.engine-row{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--border)}.engine-row:first-of-type{border-top:none}.engine-row .name{font-weight:500}.engine-row .type{color:var(--text-faint);font-size:.78rem}.engine-row .spacer{flex:1}.engine-row .score{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:.85rem}.meter{height:6px;border-radius:999px;background:var(--bg-soft);overflow:hidden;border:1px solid var(--border);width:70px}.meter>span{display:block;height:100%;background:var(--accent)}.meter.alert>span{background:var(--bad)}.toolbar{display:flex;gap:.6rem;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap}.toolbar .grow{flex:1}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.capture-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .12s ease,transform .12s ease}.capture-card:hover{border-color:var(--accent-strong);transform:translateY(-2px)}.capture-card .thumb{aspect-ratio:16 / 9;background:#05080c;object-fit:cover;width:100%}.capture-card .body{padding:.7rem .85rem;display:flex;flex-direction:column;gap:.4rem}.capture-card .when{color:var(--text-dim);font-size:.82rem;font-variant-numeric:tabular-nums}.tag-row{display:flex;flex-wrap:wrap;gap:.3rem}.tag{background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;padding:.1rem .55rem;font-size:.75rem;color:var(--text-dim)}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:40;padding:1.5rem}.drawer{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);width:min(100%,900px);max-height:90vh;overflow:auto;display:grid;grid-template-columns:1.4fr 1fr}@media (max-width: 760px){.drawer{grid-template-columns:1fr}}.drawer .detail-image{background:#05080c;width:100%;object-fit:contain;max-height:90vh}.drawer .detail-body{padding:1.25rem;display:flex;flex-direction:column;gap:.85rem}.kv{display:grid;grid-template-columns:96px 1fr;gap:.4rem .75rem;font-size:.88rem}.kv .k{color:var(--text-faint)}.kv .v{color:var(--text);font-variant-numeric:tabular-nums}pre.analysis{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;font-size:.8rem;overflow:auto;color:var(--text-dim)}.timeline{display:flex;flex-direction:column;gap:.5rem}.event-row{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-left-width:3px;border-left-color:var(--warn);border-radius:var(--radius-sm)}.event-row.acked{opacity:.55;border-left-color:var(--border-strong)}.event-row .when{color:var(--text-dim);font-size:.82rem;font-variant-numeric:tabular-nums;min-width:130px}.event-row .grow{flex:1}.split{display:grid;grid-template-columns:280px 1fr;gap:1.25rem;align-items:start}@media (max-width: 900px){.split{grid-template-columns:1fr}}.list-item{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);cursor:pointer;margin-bottom:.5rem}.list-item.active{border-color:var(--accent);background:var(--accent-soft)}.list-item .sub{color:var(--text-dim);font-size:.82rem}.engine-card{border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:.85rem;background:var(--bg-card)}.engine-card .head{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}.engine-card .head .grow{flex:1}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media (max-width: 640px){.form-grid{grid-template-columns:1fr}}.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.switch input{display:none}.switch .track{width:38px;height:22px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--border-strong);position:relative;transition:background .12s ease}.switch .track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:var(--text-dim);transition:transform .12s ease}.switch input:checked+.track{background:var(--accent-soft);border-color:var(--accent)}.switch input:checked+.track:after{transform:translate(16px);background:var(--accent)}.spinner{display:inline-block;width:1rem;height:1rem;border:2px solid var(--text-faint);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty{text-align:center;color:var(--text-faint);padding:3rem 1rem}.row{display:flex;align-items:center;gap:.6rem}.wrap{flex-wrap:wrap}.muted{color:var(--text-dim)}