:root { --fg:#111; --bg:#fbfdff; --muted:#58606a; --line:rgba(16,40,80,0.06); --focus:#0b61ff; --accent-1:#0b61ff; --accent-2:#00c2a8; --accent-3:#ffd166; }
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0; background:linear-gradient(180deg,var(--bg),#ffffff); color:var(--fg);
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.topbar { padding:18px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:white; }
.brand { margin:0; font-size:20px; font-weight:800; letter-spacing:.3px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.12); }

.layout { max-width:960px; margin:0 auto; padding:16px 20px 40px; display:grid; gap:16px; }
.controls { display:grid; gap:12px; align-content:start; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row.small { color:var(--muted); font-size:12px; }

.btn {
  appearance:none; border:1px solid var(--line); background:linear-gradient(180deg,#ffffff,#f6f8fb);
  color:var(--fg); padding:12px 16px; border-radius:999px; cursor:pointer; font-weight:700;
  box-shadow: 0 6px 18px rgba(16,40,80,0.04); transition:box-shadow .12s ease, opacity .15s;
}
.btn.primary { background: linear-gradient(90deg,#f0f6ff,#f4fdf9); color:var(--fg); border:1px solid rgba(11,97,255,0.08); box-shadow:0 8px 24px rgba(11,97,255,0.06); }
.btn:disabled { opacity:.65; cursor:not-allowed; }
.btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.btn:hover:not(:disabled) { transform:none; box-shadow:0 12px 30px rgba(16,40,80,0.06); }

.input {
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; min-width:260px;
  transition:border-color .15s ease, box-shadow .15s ease; font-size:14px;
}
#cameraSelect { min-width:180px; max-width:40%; }
.input:disabled { background:#fafafa; color:#999; }
.input:focus { outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.06); }

.switch { display:flex; gap:8px; align-items:center; user-select:none; }

.stage { display:flex; justify-content:center; }
.video-wrap {
  position:relative; width:50%; aspect-ratio:16/9;
  background:linear-gradient(180deg,#0b1b2b, rgba(11,97,255,0.12));
  border:1px solid rgba(11,97,255,0.12); border-radius:16px; overflow:hidden;
}
video, canvas { position:absolute; inset:0; width:100%; height:100%; }
canvas { pointer-events:none; }

.foot { padding:16px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

.badge {
  position:absolute; top:12px; left:12px; background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(250,250,255,0.9));
  color:#111; padding:4px 8px; border-radius:999px; font-weight:600; font-size:12px;
  backdrop-filter:saturate(180%) blur(6px);
}

.box { position:absolute; border:2px solid rgba(0,0,0,.85); border-radius:6px; }
.label {
  position:absolute; top:-26px; left:-2px; background:rgba(0,0,0,.85); color:#fff;
  padding:4px 6px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap;
}

.found { display:grid; gap:8px; }
.found-title { margin:0; font-size:16px; font-weight:700; }
.found-list { list-style:none; padding:8px; margin:0; border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f6fcff); border:1px solid var(--line); box-shadow:0 8px 30px rgba(16,40,80,0.04);
}
.found-list li { display:flex; justify-content:space-between; padding:8px 10px; border-top:1px solid rgba(0,0,0,0.03); }
.found-list li.alarm { background: linear-gradient(90deg, rgba(255,240,240,0.95), rgba(255,230,230,0.95)); border-left:4px solid #d9534f; }
.alarm-note {
  margin-top:8px; padding:10px; border-radius:8px;
  background: #fff7f7; border:1px solid #f5c2c2; color:#7a1f1f; font-weight:700;
  display:none;
}
.found-list .name { font-weight:600; }
.found-list .count { color:var(--muted); }

/* Modal styles */
.modal {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.45); z-index:60; padding:20px;
}
.modal[aria-hidden="true"] { display:none; }
.modal-card {
  width:720px; max-width:96%; background:linear-gradient(180deg,#ffffff,#f7fbff);
  border-radius:14px; box-shadow:0 20px 60px rgba(11,97,255,0.12); padding:18px; border:1px solid rgba(11,97,255,0.06);
}
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { padding:8px 12px; border-radius:8px; background:transparent; border:1px solid transparent; cursor:pointer; }
.tab.active { background:linear-gradient(90deg,#f6f8ff,#eef6ff); border-color:rgba(16,40,80,0.06); font-weight:700; }

/* Tab panels */
.tab-panel { display:block; }
.tab-panel.hidden { display:none; }

.alarm-settings { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; max-height:240px; overflow:auto; }
.alarm-item { display:flex; justify-content:space-between; align-items:center; padding:8px; border-radius:8px; background:linear-gradient(180deg,#fff,#fafcff); border:1px solid var(--line); }
.alarm-item .cls { font-weight:600; }