:root {
  --bg: #050b14;
  --bg-soft: #081321;
  --panel: rgba(10, 24, 40, .76);
  --panel-strong: rgba(11, 27, 46, .94);
  --panel-hover: rgba(14, 35, 59, .92);
  --line: rgba(137, 187, 255, .16);
  --line-strong: rgba(56, 202, 255, .55);
  --text: #f3f8ff;
  --muted: #91a2b8;
  --cyan: #22d3ee;
  --blue: #4f8cff;
  --purple: #a855f7;
  --green: #3ee6a8;
  --amber: #f6c85f;
  --red: #ff647c;
  --shadow: 0 18px 55px rgba(0, 0, 0, .34);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --sidebar: 260px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --motion: 1;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(34, 211, 238, .09), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(168, 85, 247, .08), transparent 32%),
    linear-gradient(145deg, #040a12 0%, #07101d 48%, #030811 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }

.ambient {
  position: fixed;
  inset: auto;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
.ambient-a { left: -160px; top: 12%; background: var(--cyan); }
.ambient-b { right: -180px; bottom: -80px; background: var(--purple); }

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  text-align: center;
  background: #040a12;
  transition: opacity .45s ease, visibility .45s ease;
}
.splash.is-hidden { opacity: 0; visibility: hidden; }
.splash-logo, .brand-mark {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, .55));
}
.logo-screen {
  position: absolute;
  inset: 6px 4px 17px;
  border: 3px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#07111f, #07111f) padding-box,
    linear-gradient(135deg, var(--cyan), var(--blue), var(--purple)) border-box;
}
.logo-stand {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 28px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 -8px 0 -1px rgba(79, 140, 255, .9);
}
.splash h1 { margin: 0; font-size: 1.55rem; }
.splash p { margin: 8px 0 0; color: var(--muted); }

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--safe-top);
}
.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(11, 27, 46, .88), rgba(7, 17, 31, .78));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.sidebar {
  position: sticky;
  top: var(--safe-top);
  height: calc(100vh - var(--safe-top));
  height: calc(100dvh - var(--safe-top));
  border-width: 0 1px 0 0;
  border-radius: 0;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { width: 44px; height: 44px; margin: 0; flex: 0 0 auto; }
.brand strong { display: block; font-size: .98rem; letter-spacing: .01em; }
.brand span { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; }
.desktop-nav { display: grid; gap: 7px; }
.nav-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-item svg, .button svg, .icon-button svg, .section-icon svg, .metric-icon svg, .empty-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:hover { color: var(--text); background: rgba(255, 255, 255, .035); transform: translateX(2px); }
.nav-item.active {
  color: var(--cyan);
  border-color: rgba(34, 211, 238, .24);
  background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(79, 140, 255, .06));
  box-shadow: inset 3px 0 0 var(--cyan), 0 0 24px rgba(34, 211, 238, .08);
}
.sidebar-footer { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.mini-status {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  border-radius: 14px;
  padding: 10px 11px;
}
.mini-status strong, .mini-status span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-status strong { font-size: .8rem; }
.mini-status span { color: var(--muted); font-size: .68rem; margin-top: 2px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.status-dot.online { background: var(--green); box-shadow: 0 0 12px rgba(62, 230, 168, .85); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 12px rgba(255, 100, 124, .65); }
.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
}
.icon-button:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .35); }

.main-area { min-width: 0; padding: 0 34px 44px; }
.topbar {
  position: sticky;
  top: var(--safe-top);
  z-index: 30;
  min-height: 94px;
  padding: 18px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(180deg, rgba(5, 11, 20, .96) 0%, rgba(5, 11, 20, .74) 68%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eyebrow { margin: 0 0 4px; color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: .66rem; }
.topbar h1 { margin: 0; font-size: clamp(1.45rem, 2.2vw, 2.1rem); letter-spacing: -.03em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 14px;
  min-height: 43px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 700;
  font-size: .82rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary {
  color: #03131d;
  background: linear-gradient(135deg, #58e9ff, #5b96ff);
  box-shadow: 0 8px 28px rgba(34, 211, 238, .22);
}
.button-purple {
  color: white;
  background: linear-gradient(135deg, #7b61ff, #b752ef);
  box-shadow: 0 8px 28px rgba(168, 85, 247, .2);
}
.button-danger { color: #ffdce3; background: rgba(255, 100, 124, .1); border-color: rgba(255, 100, 124, .28); }
.button-ghost { color: var(--muted); background: rgba(255, 255, 255, .025); border-color: var(--line); }
.button-ghost:hover { color: var(--text); border-color: rgba(34, 211, 238, .35); }
.button-small { min-height: 36px; padding: 0 12px; border-radius: 11px; font-size: .75rem; }
.profile-button {
  width: 43px;
  height: 43px;
  border: 1px solid rgba(168, 85, 247, .35);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(79, 140, 255, .18), rgba(168, 85, 247, .18));
  color: #e5d6ff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(168, 85, 247, .07);
}
.page-container { max-width: 1540px; margin: 0 auto; }
.page-enter { animation: pageIn calc(.38s * var(--motion)) ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); align-items: start; }
.stack { display: grid; gap: 18px; }
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(11, 27, 46, .78), rgba(6, 16, 29, .84));
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(34, 211, 238, .035), transparent 35%, rgba(168, 85, 247, .025));
}
.card-padding { padding: 20px; }
.neon-border { border-color: rgba(34, 211, 238, .34); box-shadow: 0 0 0 1px rgba(34, 211, 238, .06), 0 14px 45px rgba(0, 0, 0, .28), 0 0 35px rgba(34, 211, 238, .07); }
.purple-border { border-color: rgba(168, 85, 247, .33); box-shadow: 0 14px 45px rgba(0,0,0,.25), 0 0 34px rgba(168,85,247,.065); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-heading-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 1.02rem; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.section-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .15);
  flex: 0 0 auto;
}
.section-icon.purple { color: #bd7aff; background: rgba(168, 85, 247, .09); border-color: rgba(168, 85, 247, .18); }
.link-button { border: 0; background: transparent; color: #b877ff; cursor: pointer; font-weight: 700; font-size: .78rem; }

.device-card { padding: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.device-art {
  width: 145px;
  height: 82px;
  position: relative;
  border-radius: 14px;
  background: linear-gradient(165deg, #1d2530, #090d12 68%);
  box-shadow: 0 18px 28px rgba(0,0,0,.42), inset 0 1px 1px rgba(255,255,255,.08);
  transform: perspective(500px) rotateX(5deg) rotateY(-8deg);
}
.device-art::before { content:"DAHUA"; position:absolute; left:16px; top:20px; color:#9ca7b2; font-size:.58rem; font-weight:800; letter-spacing:.08em; }
.device-art::after { content:""; position:absolute; right:15px; bottom:13px; width:7px; height:4px; border-radius:6px; background:var(--blue); box-shadow:0 0 12px var(--blue); }
.device-info { min-width: 0; }
.device-info .label, .device-output .label { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.device-info h2 { margin: 5px 0 12px; font-size: 1.45rem; }
.device-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .78rem; }
.device-meta strong { color: var(--text); font-weight: 600; }
.device-output { min-width: 190px; padding-left: 22px; border-left: 1px solid var(--line); }
.output-active { display: flex; align-items: center; gap: 9px; margin: 8px 0 5px; color: var(--green); font-weight: 800; }
.output-active svg { width: 20px; height: 20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.output-resolution { color: var(--muted); font-size: .78rem; }

.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { padding: 17px; display: flex; align-items: center; gap: 13px; }
.metric-icon { width: 42px; height: 42px; border-radius: 13px; display:grid; place-items:center; color:var(--cyan); background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.14); }
.metric-icon.purple { color:#bd7aff; background:rgba(168,85,247,.08); border-color:rgba(168,85,247,.14); }
.metric-icon.green { color:var(--green); background:rgba(62,230,168,.07); border-color:rgba(62,230,168,.14); }
.metric-icon.amber { color:var(--amber); background:rgba(246,200,95,.07); border-color:rgba(246,200,95,.14); }
.metric-card strong { display:block; font-size:1.18rem; }
.metric-card span { display:block; margin-top:3px; color:var(--muted); font-size:.72rem; }

.layout-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.layout-button {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.022);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
}
.layout-button:hover { color: var(--text); border-color: rgba(34,211,238,.25); }
.layout-button.active { color: var(--cyan); border-color: var(--line-strong); background: linear-gradient(145deg, rgba(34,211,238,.1), rgba(79,140,255,.08)); box-shadow: inset 0 0 18px rgba(34,211,238,.08), 0 0 22px rgba(34,211,238,.08); }
.grid-icon { display:grid; grid-template-columns:repeat(var(--grid-cols, 2), 4px); grid-auto-rows:4px; gap:2px; }
.grid-icon i { display:block; width:4px; height:4px; border:1px solid currentColor; border-radius:1px; }

.preview-shell { border: 1px solid rgba(79,140,255,.22); border-radius: 18px; overflow: hidden; background:#02060b; min-height: 330px; }
.camera-grid { display: grid; width: 100%; height: 100%; min-height: inherit; gap: 2px; background:#0f1a26; }
.camera-grid.layout-1 { grid-template-columns:1fr; }
.camera-grid.layout-4 { grid-template-columns:repeat(2,1fr); }
.camera-grid.layout-8 { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); }
.camera-grid.layout-9 { grid-template-columns:repeat(3,1fr); }
.camera-grid.layout-16 { grid-template-columns:repeat(4,1fr); }
.camera-tile {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(1,5,9,.9)),
    radial-gradient(circle at 68% 22%, rgba(34,211,238,.2), transparent 22%),
    linear-gradient(145deg, #12283c, #07111d 55%, #132238);
  cursor: pointer;
  color: white;
  text-align: left;
}
.camera-tile::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background-image:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.04) 49%, rgba(255,255,255,.04) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,255,255,.025) 49%, rgba(255,255,255,.025) 51%, transparent 52%);
  background-size:42px 42px;
}
.camera-tile:nth-child(3n+2) { background: linear-gradient(180deg, transparent 55%, rgba(1,5,9,.9)), radial-gradient(circle at 26% 28%, rgba(168,85,247,.17), transparent 23%), linear-gradient(145deg,#1a203b,#080d1a 58%,#172139); }
.camera-tile:nth-child(3n) { background: linear-gradient(180deg, transparent 55%, rgba(1,5,9,.9)), radial-gradient(circle at 70% 30%, rgba(62,230,168,.15), transparent 23%), linear-gradient(145deg,#142a2f,#071015 58%,#102637); }
.camera-tile:hover { outline:1px solid rgba(34,211,238,.55); outline-offset:-1px; }
.camera-label { position:absolute; left:10px; top:9px; z-index:2; display:flex; align-items:center; gap:7px; font-size:.72rem; text-shadow:0 1px 6px #000; }
.camera-label .status-dot { width:7px; height:7px; }
.camera-number { position:absolute; right:10px; bottom:8px; z-index:2; color:rgba(255,255,255,.5); font-size:.62rem; letter-spacing:.08em; }
.camera-focus-icon { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); opacity:.13; }
.camera-focus-icon svg { width:46px;height:46px;fill:none;stroke:white;stroke-width:1.3; }
.preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; }
.preview-toolbar-left { color:var(--muted); font-size:.75rem; }
.preview-toolbar-right { display:flex; gap:8px; }

.preset-grid { grid-template-columns: repeat(5, minmax(125px, 1fr)); }
.preset-card {
  position:relative;
  min-height:132px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.024);
  cursor:pointer;
  text-align:left;
  overflow:hidden;
}
.preset-card::after { content:""; position:absolute; width:90px;height:90px;border-radius:50%; right:-45px;bottom:-45px;background:var(--preset-glow,var(--cyan));filter:blur(36px);opacity:.16; }
.preset-card:hover { border-color:rgba(34,211,238,.34); transform:translateY(-2px); }
.preset-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--preset-glow,var(--cyan));background:color-mix(in srgb, var(--preset-glow,var(--cyan)) 9%, transparent);border:1px solid color-mix(in srgb, var(--preset-glow,var(--cyan)) 18%, transparent); }
.preset-icon svg { width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.preset-card strong { display:block; margin-top:14px; font-size:.84rem; }
.preset-card span { display:block; margin-top:4px; color:var(--muted); font-size:.68rem; }
.preset-card .preset-menu { position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:9px; }
.preset-card .preset-menu:hover { background:rgba(255,255,255,.05);color:white; }

.tour-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; }
.tour-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.select, .input, .textarea {
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(3,10,18,.7);
  color:var(--text);
  padding:0 13px;
  outline:none;
}
.textarea { min-height:100px; padding-top:12px; resize:vertical; }
.select:focus, .input:focus, .textarea:focus { border-color:rgba(34,211,238,.55); box-shadow:0 0 0 3px rgba(34,211,238,.08); }
.field { display:grid; gap:7px; }
.field label { color:var(--muted); font-size:.72rem; font-weight:700; }
.field-hint { color:var(--muted); font-size:.66rem; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.switch { position:relative; width:56px; height:31px; display:inline-flex; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.switch-track { position:absolute; inset:0; border-radius:999px; background:#172538; border:1px solid var(--line); cursor:pointer; transition:.2s ease; }
.switch-track::after { content:""; position:absolute; left:4px; top:4px; width:21px; height:21px; border-radius:50%; background:#c9d4df; transition:.2s ease; }
.switch input:checked + .switch-track { background:linear-gradient(90deg,#078dc4,#19d2ee);border-color:rgba(34,211,238,.7);box-shadow:0 0 18px rgba(34,211,238,.28); }
.switch input:checked + .switch-track::after { transform:translateX(25px); background:white; box-shadow:0 0 12px rgba(255,255,255,.8); }

.list { display:grid; gap:10px; }
.list-row {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:64px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.02);
}
.list-row:hover { background:rgba(255,255,255,.033); border-color:rgba(34,211,238,.19); }
.list-avatar { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--cyan);background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.14);font-weight:800;font-size:.72rem; }
.list-main { min-width:0; }
.list-main strong { display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem; }
.list-main span { display:block;margin-top:4px;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.list-actions { display:flex;gap:7px; }
.badge { display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:0 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.66rem;font-weight:800; }
.badge.success { color:var(--green);border-color:rgba(62,230,168,.22);background:rgba(62,230,168,.06); }
.badge.warning { color:var(--amber);border-color:rgba(246,200,95,.22);background:rgba(246,200,95,.06); }
.badge.danger { color:var(--red);border-color:rgba(255,100,124,.22);background:rgba(255,100,124,.06); }

.camera-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.camera-card { overflow:hidden; }
.camera-thumb { height:140px; position:relative; background:radial-gradient(circle at 75% 25%,rgba(34,211,238,.2),transparent 28%),linear-gradient(145deg,#162d40,#07101b 60%,#0b2135); }
.camera-thumb::after { content:"LIVE";position:absolute;right:10px;top:10px;padding:4px 7px;border-radius:999px;background:rgba(3,10,18,.7);color:var(--green);font-size:.58rem;font-weight:900;letter-spacing:.08em;border:1px solid rgba(62,230,168,.2); }
.camera-card-body { padding:14px; }
.camera-card-title { display:flex;justify-content:space-between;gap:10px;align-items:flex-start; }
.camera-card h3 { margin:0;font-size:.88rem; }
.camera-card p { margin:5px 0 0;color:var(--muted);font-size:.68rem; }
.camera-card-footer { display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; }
.table { width:100%;border-collapse:collapse;min-width:720px; }
.table th,.table td { padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.74rem; }
.table th { color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;background:rgba(255,255,255,.022); }
.table tr:last-child td { border-bottom:0; }
.table td:last-child,.table th:last-child { text-align:right; }

.empty-state { min-height:240px;display:grid;place-content:center;text-align:center;padding:26px; }
.empty-icon { width:62px;height:62px;border-radius:20px;display:grid;place-items:center;margin:0 auto 14px;color:var(--cyan);background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.16); }
.empty-icon svg { width:30px;height:30px; }
.empty-state h3 { margin:0; }
.empty-state p { max-width:420px;margin:8px auto 18px;color:var(--muted);font-size:.78rem;line-height:1.6; }

.quick-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.quick-action { min-height:88px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.022);color:var(--text);text-align:left;padding:14px;cursor:pointer; }
.quick-action:hover { border-color:rgba(34,211,238,.3);background:rgba(34,211,238,.04); }
.quick-action strong { display:block;font-size:.78rem; }
.quick-action span { display:block;margin-top:5px;color:var(--muted);font-size:.66rem;line-height:1.45; }

.modal-backdrop { position:fixed;inset:0;z-index:80;background:rgba(0,4,9,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }
.modal { position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,620px);max-height:min(88vh,760px);overflow:auto;border-radius:24px;padding:20px; }
.modal-header { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px; }
.modal-header h2 { margin:0;font-size:1.1rem; }
.modal-header p { margin:5px 0 0;color:var(--muted);font-size:.75rem; }
.modal-close { border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);width:38px;height:38px;border-radius:12px;cursor:pointer; }
.modal-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line); }
.camera-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
.camera-option { min-height:70px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);padding:11px;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left; }
.camera-option:hover { border-color:rgba(34,211,238,.38);background:rgba(34,211,238,.04); }
.camera-option strong { display:block;font-size:.78rem; }
.camera-option span { display:block;margin-top:4px;color:var(--muted);font-size:.65rem; }

.toast-region { position:fixed;z-index:120;right:20px;bottom:24px;display:grid;gap:10px;width:min(92vw,360px);pointer-events:none;padding-bottom:var(--safe-bottom); }
.toast { border:1px solid rgba(34,211,238,.25);border-radius:15px;background:rgba(8,22,38,.96);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 26px rgba(34,211,238,.07);padding:13px 14px;display:flex;align-items:flex-start;gap:10px;animation:toastIn .25s ease both; }
.toast.success { border-color:rgba(62,230,168,.28); }
.toast.error { border-color:rgba(255,100,124,.28); }
.toast-icon { width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:rgba(34,211,238,.08);color:var(--cyan);flex:0 0 auto; }
.toast.success .toast-icon { color:var(--green);background:rgba(62,230,168,.08); }
.toast.error .toast-icon { color:var(--red);background:rgba(255,100,124,.08); }
.toast strong { display:block;font-size:.76rem; }
.toast p { margin:4px 0 0;color:var(--muted);font-size:.68rem;line-height:1.45; }
@keyframes toastIn { from { opacity:0;transform:translateY(10px) scale(.98); } to { opacity:1;transform:none; } }
.offline-banner { position:fixed;z-index:125;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#381d24;border:1px solid rgba(255,100,124,.35);color:#ffd7df;font-size:.72rem;box-shadow:0 12px 30px rgba(0,0,0,.36); }

.mobile-nav { display:none; }

@media (max-width: 1180px) {
  :root { --sidebar: 220px; }
  .main-area { padding-left:24px;padding-right:24px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .camera-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .preset-grid { grid-template-columns:repeat(3,minmax(135px,1fr)); }
  .device-art { width:120px; }
}

@media (max-width: 860px) {
  .app-shell { display:block; padding-bottom:calc(84px + var(--safe-bottom)); }
  .sidebar { display:none; }
  .main-area { padding:0 16px 24px; }
  .topbar { min-height:82px;padding-top:12px; }
  .topbar-actions .button { width:42px;padding:0;font-size:0; }
  .topbar-actions .button svg { width:19px;height:19px; }
  .dashboard-grid,.grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .camera-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .device-card { grid-template-columns:90px minmax(0,1fr);gap:14px;padding:17px; }
  .device-art { width:88px;height:58px; }
  .device-output { grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:14px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px; }
  .device-output .label { display:none; }
  .output-active { margin:0; }
  .layout-selector { grid-template-columns:repeat(5,minmax(54px,1fr));overflow:auto; }
  .layout-button { min-width:58px;min-height:54px; }
  .preview-shell { min-height:300px; }
  .preset-grid { display:flex;overflow:auto;padding-bottom:4px;scroll-snap-type:x proximity; }
  .preset-card { min-width:145px;scroll-snap-align:start; }
  .mobile-nav { display:grid;position:fixed;z-index:60;left:12px;right:12px;bottom:calc(10px + var(--safe-bottom));height:66px;border-radius:21px;grid-template-columns:repeat(5,1fr);padding:7px 5px; }
  .mobile-nav .nav-item { min-height:52px;padding:0;display:grid;place-items:center;gap:2px;border-radius:15px;font-size:.58rem;text-align:center; }
  .mobile-nav .nav-item svg { width:20px;height:20px; }
  .mobile-nav .nav-item.active { box-shadow:inset 0 -2px 0 var(--cyan),0 0 22px rgba(34,211,238,.08); }
  .mobile-nav .nav-item span { display:block; }
  .toast-region { bottom:calc(90px + var(--safe-bottom));right:12px; }
  .offline-banner { bottom:calc(88px + var(--safe-bottom));white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis; }
}

@media (max-width: 560px) {
  .topbar h1 { font-size:1.35rem; }
  .eyebrow { font-size:.6rem; }
  .profile-button { display:none; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .metric-card { padding:13px;gap:10px; }
  .metric-icon { width:37px;height:37px; }
  .metric-card strong { font-size:1rem; }
  .card-padding { padding:16px; }
  .section-heading { align-items:flex-start; }
  .section-heading p { font-size:.7rem; }
  .layout-selector { gap:7px; }
  .layout-button { gap:6px; }
  .camera-grid.layout-8,.camera-grid.layout-16 { grid-template-columns:repeat(2,1fr); }
  .camera-grid.layout-8 { grid-template-rows:repeat(4,1fr); }
  .camera-grid.layout-16 { grid-template-columns:repeat(4,1fr); }
  .camera-tile { min-height:90px; }
  .preview-shell { min-height:290px; }
  .preview-toolbar { align-items:flex-start;flex-direction:column; }
  .preview-toolbar-right { width:100%; }
  .preview-toolbar-right .button { flex:1; }
  .camera-cards { grid-template-columns:1fr; }
  .camera-thumb { height:175px; }
  .form-grid,.camera-picker { grid-template-columns:1fr; }
  .tour-row { grid-template-columns:1fr; }
  .tour-row .switch { position:absolute;right:17px;top:17px; }
  .modal { width:calc(100vw - 20px);padding:16px;max-height:calc(100dvh - 32px); }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .button { width:100%; }
  .table-wrap { border-radius:13px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* Laravel production additions */
.profile-menu{display:flex;align-items:center;gap:10px}.profile-menu form{margin:0}.login-body{min-height:100vh;overflow:auto}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;z-index:2}.login-card{width:min(480px,100%);padding:34px;border-radius:28px}.login-brand{margin-bottom:32px}.login-card h1{font-size:clamp(2rem,5vw,3rem);margin:4px 0 8px}.login-subtitle{color:var(--muted);line-height:1.65;margin-bottom:24px}.login-button{width:100%;justify-content:center}.login-error,.login-success{padding:13px 15px;border-radius:14px;margin:12px 0 18px}.login-error{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.35);color:#fecdd3}.login-success{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);color:#a7f3d0}.update-wrap{width:min(1100px,calc(100% - 32px));margin:0 auto;padding:28px 0 60px;position:relative;z-index:2;display:grid;gap:20px}.update-top{display:flex;justify-content:space-between;align-items:center}.field-hint{line-height:1.55}.device-warning{padding:13px;border-radius:14px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.25);color:#fde68a}.agent-badge{display:inline-flex;gap:7px;align-items:center}
@media(max-width:700px){.profile-menu>a{display:none}.login-card{padding:24px}.update-wrap{width:min(100% - 20px,1100px);padding-top:14px}}

/* v1.1.2: status kamera yang belum dapat disahkan tidak lagi dipaparkan sebagai offline. */
.status-dot.unknown { background: var(--amber); box-shadow: 0 0 12px rgba(251, 191, 36, .65); }
.badge.warning { color: var(--amber); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); }

/* v1.1.4: authenticated JPEG preview uploaded by the Local Agent. */
.camera-preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity .2s ease;
  background: #02060b;
  pointer-events: none;
}
.camera-preview-image.is-loaded { opacity: 1; }
.camera-tile.has-preview::before,
.camera-thumb.has-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1,5,9,.15), transparent 40%, rgba(1,5,9,.82));
  pointer-events: none;
}
.camera-thumb { overflow: hidden; }
.camera-thumb .camera-label { z-index: 3; }
.camera-thumb::after { z-index: 3; }
.preview-live-badge {
  position: absolute;
  right: 10px;
  top: 9px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(3,10,18,.72);
  color: var(--cyan);
  border: 1px solid rgba(34,211,238,.22);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .72;
}
.camera-thumb .preview-live-badge { right: 10px; top: 10px; }
.camera-thumb.has-preview::after { content: "LIVE"; }
.camera-focus-icon { z-index: 2; }

/* v1.2.0: Adaptive Live View semua kamera melalui Local Agent. */
.live-page-heading { align-items:center; }
.live-view-actions { display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap; }
.select-compact { width:auto;min-width:72px;height:36px;padding:0 28px 0 10px;font-size:.7rem;border-radius:11px; }
.live-status-card { border-color:rgba(62,230,168,.18);background:linear-gradient(145deg,rgba(7,22,35,.96),rgba(6,13,25,.94)); }
.live-status-card.compact { padding:14px 16px;margin-bottom:16px; }
.live-status-card.compact .section-heading { margin:0; }
.live-status-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px; }
.live-status-grid .list-row { min-width:0;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);padding:10px; }
.live-camera-grid .camera-thumb { background:#02070d; }
.preview-live-badge { color:var(--green);border-color:rgba(62,230,168,.28);background:rgba(3,16,18,.76);box-shadow:0 0 16px rgba(62,230,168,.1); }
.preview-live-badge.waiting { color:var(--amber);border-color:rgba(251,191,36,.3);background:rgba(28,19,4,.8);box-shadow:none; }
.camera-thumb::after { display:none !important; }
.camera-card .camera-thumb.has-preview { box-shadow:inset 0 0 0 1px rgba(62,230,168,.16); }

@media (max-width: 860px) {
  .live-page-heading { align-items:flex-start;flex-direction:column; }
  .live-view-actions { width:100%;justify-content:flex-start; }
  .live-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .live-view-actions .button { flex:1; }
  .live-view-actions .badge { width:100%;justify-content:center; }
  .select-compact { flex:0 0 84px; }
  .live-status-grid { grid-template-columns:1fr; }
}

/* v1.3.0: Dahua PTZ controls and favourite points. */
.badge.purple {
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, .38);
  background: rgba(126, 34, 206, .12);
  box-shadow: 0 0 14px rgba(168, 85, 247, .08);
}
.camera-badges,.camera-card-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ptz-layout{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:stretch}
.ptz-preview-card{overflow:hidden;min-height:520px;display:flex;flex-direction:column}
.ptz-preview{min-height:420px;flex:1;border-radius:0;background:#02060b}
.ptz-preview-info{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-top:1px solid var(--line);background:rgba(4,12,23,.92)}
.ptz-preview-info h3,.ptz-favorite-head h3{margin:0 0 4px}.ptz-preview-info p,.ptz-favorite-head p{margin:0;color:var(--muted);font-size:.78rem}
.ptz-control-card{display:flex;flex-direction:column;gap:18px;min-height:520px}
.ptz-speed-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.018)}
.ptz-speed-row label{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ptz-range{width:100%;accent-color:var(--purple);cursor:pointer}
.ptz-pad{width:min(330px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;border-radius:24px;background:linear-gradient(145deg,rgba(10,25,43,.88),rgba(4,10,20,.94));border:1px solid rgba(124,58,237,.24);box-shadow:inset 0 0 32px rgba(62,20,130,.12),0 18px 45px rgba(0,0,0,.22)}
.ptz-key{aspect-ratio:1;border-radius:18px;border:1px solid rgba(34,211,238,.24);background:linear-gradient(145deg,rgba(13,37,57,.92),rgba(5,16,29,.98));color:var(--cyan);display:grid;place-items:center;font-size:1.45rem;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ptz-key svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.ptz-key:hover,.ptz-key:focus-visible{border-color:rgba(34,211,238,.7);box-shadow:0 0 20px rgba(34,211,238,.16);outline:none}
.ptz-key:active,.ptz-key.is-active{transform:scale(.94);background:rgba(34,211,238,.14);box-shadow:0 0 25px rgba(34,211,238,.22)}
.ptz-key.diagonal{color:#c4b5fd;border-color:rgba(168,85,247,.25)}
.ptz-key.stop{color:#fda4af;border-color:rgba(244,63,94,.35);background:rgba(76,5,25,.35);font-size:1rem}
.ptz-lens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ptz-lens-grid .button{justify-content:center;min-height:44px}
.ptz-camera-select{max-width:min(350px,100%)}
.ptz-favorites{align-items:stretch}
.ptz-favorite-card{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.ptz-favorite-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--cyan),var(--purple));opacity:.55}
.ptz-favorite-card.home{border-color:rgba(168,85,247,.42);box-shadow:0 0 22px rgba(126,34,206,.1)}
.ptz-favorite-card.home::after{content:"HOME";position:absolute;top:10px;right:-30px;width:105px;text-align:center;transform:rotate(38deg);font-size:.55rem;font-weight:900;letter-spacing:.12em;color:#ede9fe;background:rgba(126,34,206,.75);padding:3px 0}
.ptz-favorite-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;min-width:0}
.ptz-favorite-head>div:nth-child(2){min-width:0}.ptz-favorite-head h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.error-text{margin:0;color:#fda4af;font-size:.72rem;line-height:1.45;padding:8px 10px;border-radius:10px;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.18)}

@media (max-width:1050px){
  .ptz-layout{grid-template-columns:1fr}.ptz-preview-card,.ptz-control-card{min-height:auto}.ptz-preview{min-height:420px}
}
@media (max-width:700px){
  .ptz-preview{min-height:300px}.ptz-preview-info{align-items:flex-start;padding:14px 16px}.ptz-pad{gap:8px;padding:10px;border-radius:20px}.ptz-key{border-radius:15px}.ptz-lens-grid{grid-template-columns:1fr 1fr}.ptz-camera-select{width:100%;max-width:none}.camera-card-actions{width:100%;justify-content:stretch}.camera-card-actions .button{flex:1;justify-content:center}
}
@media (max-width:430px){
  .ptz-preview{min-height:230px}.ptz-speed-row{grid-template-columns:1fr auto}.ptz-speed-row label{grid-column:1/-1}.ptz-lens-grid{grid-template-columns:1fr}.ptz-favorite-head{grid-template-columns:auto 1fr}.ptz-favorite-head>.badge{grid-column:1/-1;width:max-content}.ptz-key{font-size:1.25rem}
}