:root { --bg:#0f1216; --panel:#171c22; --line:#262d36; --text:#e6e9ee; --muted:#8a94a3;
        --accent:#4aa8ff; --ok:#3ccf8e; --warn:#f2b84b; --bad:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header { display:flex; align-items:center; gap:18px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
header .brand { font-weight:700; font-size:18px; color:var(--text); margin-right:auto; }
header form { margin:0; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 24px; margin: 0 0 16px; } h2 { font-size: 18px; margin: 28px 0 12px; color: var(--muted); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; }
.narrow { max-width: 420px; margin: 40px auto; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.cam { display:block; color:var(--text); } .cam:hover { border-color: var(--accent); text-decoration:none; }
.cam .sub, .muted { color: var(--muted); font-size: 14px; }
.badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); margin-right:4px; }
.badge.ok { color:var(--ok); border-color:var(--ok); } .badge.warn { color:var(--warn); border-color:var(--warn); } .badge.bad { color:var(--bad); border-color:var(--bad); }
.player { width:100%; aspect-ratio:16/9; border:0; background:#000; border-radius:8px; }
.btn, button { display:inline-block; background:var(--accent); color:#04121f; border:0; border-radius:8px; padding:9px 16px; font-weight:600; cursor:pointer; font-size:14px; }
.btn.secondary, button.secondary { background:transparent; color:var(--text); border:1px solid var(--line); }
.linkbtn { background:none; border:0; color:var(--accent); padding:0; font-weight:400; }
form p { margin: 0 0 14px; } label { display:block; font-size:14px; margin-bottom:4px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select {
  width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:#0c0f13; color:var(--text); font-size:14px; }
input[type=checkbox] { transform: scale(1.15); margin-right: 6px; }
.helptext { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.errorlist { color: var(--bad); font-size: 13px; padding-left: 18px; margin: 4px 0; }
.messages { list-style:none; padding:0; margin:0 0 16px; } .messages li { padding:10px 14px; border-radius:8px; background:#12301f; border:1px solid var(--ok); }
.tabs a { margin-right: 14px; }
.cols { display:grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } @media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }

/* ---- camera page ---- */
.cam-head { display:flex; align-items:center; gap:12px; } .cam-head h1 { margin:0; }
.cam-layout { display:grid; grid-template-columns: minmax(0, 1fr); gap:16px; margin-top:12px; }
.cam-layout.ptz-open { grid-template-columns: minmax(0, 1fr) 290px; }
@media (max-width: 900px) { .cam-layout.ptz-open { grid-template-columns: minmax(0, 1fr); } }
.ptz-panel { padding:16px; align-self:start; }
.ptz-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ptz-pad { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.ptz-pad button, .ptz-zoom button { padding:14px 0; font-size:18px; touch-action:none; user-select:none; -webkit-user-select:none; }
.ptz-pad button:active, .ptz-zoom button:active { filter: brightness(1.25); }
.ptz-zoom { display:grid; grid-template-columns: 1fr 1fr; gap:6px; margin:10px 0 14px; }
.ptz-zoom button { font-size:15px; }
.ptz-panel input[type=range] { width:100%; }
.ptz-presets { display:flex; flex-wrap:wrap; gap:6px; font-size:14px; }
.ptz-presets button { padding:6px 10px; font-size:13px; }
.ptz-hint { font-size:12px; margin:14px 0 0; }
.ptz-msg { color: var(--warn); font-size:13px; min-height:1em; margin:6px 0 0; }
#ptz-toggle.active { background: var(--accent); color:#04121f; border-color: var(--accent); }
.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.tabs a { margin-right:0; }
.ptz-presets-box { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.ptz-presets-box summary { cursor:pointer; font-weight:600; }
.ptz-preset-row { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:6px; margin-top:10px; }
.ptz-preset-tools { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ptz-preset-tools button { padding:6px 10px; font-size:13px; }
button.danger { color: var(--bad); border-color: var(--bad); }
.player.yv-starting { opacity: 0; }
.player { transition: opacity .25s ease; }