:root {
  --bg: #020911;
  --panel: rgba(5, 18, 32, 0.82);
  --panel-2: rgba(7, 23, 40, 0.94);
  --panel-3: rgba(10, 32, 55, 0.86);
  --line: rgba(88, 127, 166, 0.25);
  --line-strong: rgba(62, 143, 255, 0.55);
  --blue: #1077ff;
  --blue-2: #0b5fd8;
  --green: #16e878;
  --red: #ff4352;
  --muted: #9badc3;
  --text: #f6fbff;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: #020911; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 72% 12%, rgba(19, 105, 255, 0.18), transparent 35%),
    linear-gradient(145deg, #03111f 0%, #061729 38%, #020812 100%);
}

button, input, select { font: inherit; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: 1; }
a { color: inherit; text-decoration: none; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.15; }

.camera-shell {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  overflow: hidden;
}

.camera-sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 14px 11px 190px;
  background: linear-gradient(180deg, rgba(4, 17, 31, 0.98), rgba(3, 13, 24, 0.98));
  border-right: 1px solid rgba(92, 143, 190, 0.19);
  box-shadow: 18px 0 42px rgba(0, 0, 0, 0.18);
}

.brand {
  display: grid;
  gap: 0;
  justify-items: start;
  padding: 0 16px;
  padding-top: 1px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand-mark {
  width: 37px;
  height: 37px;
  color: #1387ff;
  filter: drop-shadow(0 0 14px rgba(19, 135, 255, 0.28));
}

.brand-mark path {
  stroke-width: 4.2;
}

.brand-lockup strong {
  color: #fff;
  font-size: 31px;
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 900;
}

.brand span {
  margin-left: 49px;
  margin-top: -2px;
  color: #8297ad;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.075em;
}

.side-nav {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 0;
}

.side-nav a {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 14px;
  border-radius: 8px;
  color: #eef5ff;
  font-size: 14.5px;
  font-weight: 520;
}

.side-nav a.active {
  background: linear-gradient(135deg, #1287ff, #0758f2);
  box-shadow: 0 16px 36px rgba(9, 96, 255, 0.34);
}

.nav-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.08));
}

.nav-count {
  margin-left: auto;
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff3c48;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.box-card {
  height: 162px;
  min-height: 162px;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto auto;
  gap: 6px;
  align-self: end;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(70, 127, 180, 0.3);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(11, 37, 62, 0.72), rgba(6, 23, 40, 0.92));
}

.box-head {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 4px;
}

.shield {
  width: 31px;
  height: 31px;
  margin-top: 1px;
  flex: 0 0 auto;
  color: var(--green);
}

.box-head strong {
  display: block;
  margin: 0 0 2px;
  color: #fff;
  font-size: 14.5px;
  line-height: 1.05;
  font-weight: 850;
}

.online-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 800;
}

.online-dot:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px rgba(22, 232, 120, 0.75);
}

.box-card p, .box-card > span, .box-card small {
  margin: 0;
  color: #dbe8f8;
  font-size: 13px;
  line-height: 1.36;
}
.box-card p {
  margin-top: 1px;
  color: #f0f6ff;
  font-weight: 620;
  letter-spacing: 0.005em;
}
.box-card > span {
  margin-top: 3px;
}
.box-card small {
  color: #c6d3e3;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.camera-main {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: 54px auto minmax(0, 1fr) 112px;
  row-gap: 8px;
  column-gap: 14px;
  padding: 10px 18px 190px 18px;
  overflow: hidden;
}

.topbar {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.search {
  width: min(428px, 40vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  margin-left: 316px;
  border: 1px solid rgba(90, 139, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 40, 67, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.search span {
  width: 20px;
  height: 20px;
  color: #f4f9ff;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #d8e8fa;
  font-size: 14px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #e9f2ff;
  border-right: 1px solid rgba(110, 154, 196, 0.16);
  padding-right: 17px;
}

.bell svg {
  width: 24px;
  height: 24px;
}

.bell span {
  position: absolute;
  top: 1px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ff4352;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.account {
  display: grid;
  grid-template-columns: 42px auto 28px;
  align-items: center;
  gap: 10px;
}

.account [data-portal-logout] {
  display: none;
}

.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #187dff, #0758cf);
  color: #fff;
  font-weight: 900;
}

.account strong {
  display: block;
  font-size: 14px;
}

.account span {
  color: #aebdd0;
  font-size: 13px;
}

.ghost-icon, .header-icon, .back-button, .carousel-arrow {
  border: 1px solid rgba(88, 143, 190, 0.28);
  background: rgba(8, 27, 47, 0.78);
  color: #e8f3ff;
}

.ghost-icon {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
}

.camera-header {
  display: grid;
  grid-template-columns: 48px minmax(210px, auto) minmax(200px, auto) auto 1fr;
  align-items: center;
  gap: 14px;
}

.back-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.back-button svg { width: 28px; height: 28px; }

.camera-title h1 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.03;
  letter-spacing: 0.01em;
}

.camera-title p {
  margin: 5px 0 0;
  color: #d1ddec;
  font-size: 14.5px;
}
.sep { color: #678099; padding: 0 8px; }

.active-camera-summary {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 16px;
  border-left: 1px solid rgba(88, 143, 190, 0.24);
}

.active-camera-summary strong {
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 820;
}

.active-camera-summary span {
  color: #c6d6e8;
  font-size: 13px;
  white-space: nowrap;
}

.live-pill, .mode-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 37px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(0, 96, 72, 0.34);
  color: #a6ffd2;
  font-weight: 720;
}

.live-pill i, .mode-button i, .video-live i, .connection i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(22, 232, 120, 0.72);
}

.live-pill.offline {
  background: rgba(104, 124, 149, 0.18);
  color: #b7c4d1;
}
.live-pill.offline i { background: #6c8198; box-shadow: none; }

.camera-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mode-button {
  border: 1px solid rgba(88, 143, 190, 0.28);
  background: rgba(8, 27, 47, 0.78);
  color: #fff;
}

.quality-select {
  position: relative;
  min-width: 178px;
  height: 43px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.78);
}

.quality-select select {
  width: 100%;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  padding: 0 42px 0 16px;
  font-weight: 600;
}

.quality-select svg {
  position: absolute;
  right: 13px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  color: #fff;
}

.header-icon {
  width: 48px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.header-icon svg { width: 25px; height: 25px; color: #fff; }
.header-icon.primary {
  border-color: rgba(33, 142, 255, 0.9);
  background: linear-gradient(135deg, #107dff, #064edb);
  box-shadow: 0 0 18px rgba(16, 119, 255, 0.38);
}

.camera-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 12px;
}

.viewer-card, .control-panel, .camera-carousel, .function-bar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(9, 25, 43, 0.78), rgba(5, 16, 29, 0.92));
  box-shadow: var(--shadow);
}

.viewer-card {
  overflow: hidden;
  min-height: 0;
}

.video-frame {
  position: relative;
  min-height: 0;
  aspect-ratio: auto;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
    radial-gradient(circle at 55% 45%, rgba(26, 115, 255, 0.18), transparent 40%),
    #040b13;
}

.video-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #000;
}

.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #020812;
}

.video-frame:fullscreen video {
  position: relative;
  inset: auto;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  background-color: #000;
}

.video-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 30px;
  text-align: center;
  color: #dce8f6;
  background:
    radial-gradient(circle at 50% 42%, rgba(21, 117, 255, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(6, 25, 42, 0.78), rgba(2, 8, 18, 0.92));
}

.video-empty:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.58);
}
.video-empty > * { position: relative; }
.video-empty svg { width: 78px; height: 78px; color: #fff; }
.video-empty strong { font-size: 22px; }
.video-empty span { color: #b7c5d6; }
.video-empty.hidden { display: none; }

.video-top {
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  font-weight: 760;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
}

.fullscreen-exit {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 8;
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(3, 12, 22, 0.78);
  color: #fff;
  font-weight: 760;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}

.fullscreen-exit svg {
  width: 22px;
  height: 22px;
}

.video-frame:fullscreen .fullscreen-exit {
  display: inline-flex;
}

.video-frame:fullscreen .video-top {
  right: 130px;
}

.video-frame:fullscreen .floating-controls {
  bottom: 28px;
}

.video-frame:fullscreen .video-name {
  bottom: 30px;
}

.video-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.video-live i { background: #ff4052; box-shadow: 0 0 12px rgba(255, 64, 82, 0.7); }

.video-name {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 4;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(2, 10, 18, 0.62);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.floating-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  display: flex;
  transform: translateX(-50%);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(4, 17, 30, 0.93);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.floating-controls button {
  width: 70px;
  min-height: 61px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 0;
  border-right: 1px solid rgba(101, 133, 162, 0.18);
  background: transparent;
}

.floating-controls button:last-child { border-right: 0; width: 112px; }
.floating-controls svg { width: 26px; height: 26px; color: #fff; stroke-width: 2.25; }
.floating-controls button[disabled] svg { color: rgba(246, 251, 255, 0.78); }
.floating-controls span { font-size: 11px; }
.floating-controls strong {
  min-width: 31px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #fff;
  color: #09223d;
  font-size: 15px;
}

.control-panel {
  min-height: 0;
  padding: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;
}

.panel-page {
  display: grid;
  gap: 12px;
}

.panel-page[hidden] {
  display: none;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
}

.tabs button {
  min-height: 34px;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(9, 28, 49, 0.86);
  color: #b8c9db;
  font-weight: 760;
}

.tabs button.active {
  background: linear-gradient(135deg, #1688ff, #0755ef);
  color: #fff;
}

.control-panel h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

.panel-page[data-panel-page="control"] section:first-of-type {
  display: grid;
  grid-template-columns: 1fr 129px;
  gap: 12px;
}

.panel-page[data-panel-page="control"] section:first-of-type h2 {
  grid-column: 1 / -1;
}

.ptz-grid {
  width: 104px;
  height: 104px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88, 143, 190, 0.26);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(19, 98, 182, 0.28), rgba(8, 28, 49, 0.82) 52%, rgba(5, 17, 31, 0.9));
}

.ptz-grid button {
  position: absolute;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
}

.ptz-grid button:nth-child(1) { top: 12px; }
.ptz-grid button:nth-child(2) { left: 13px; }
.ptz-grid button:nth-child(3) {
  position: static;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(8, 32, 59, 0.88);
}
.ptz-grid button:nth-child(3) span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #116edf;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.04);
}
.ptz-grid button:nth-child(4) { right: 13px; }
.ptz-grid button:nth-child(5) { bottom: 12px; }
.ptz-grid svg { width: 16px; height: 16px; fill: currentColor; stroke: none; filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.13)); }

.zoom-stack {
  display: grid;
  gap: 8px;
}

.zoom-stack button, .zoom-stack output {
  min-height: 29px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.78);
  color: #f9fcff;
  font-weight: 760;
}

.zoom-stack output {
  justify-content: center;
}

.preset-grid, .function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.function-grid { grid-template-columns: repeat(4, 1fr); }

.preset-grid button, .function-grid button {
  min-height: 50px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  line-height: 1.08;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.78);
  color: #f8fbff;
  font-size: 11.5px;
}
.preset-grid button {
  cursor: pointer;
}
.preset-grid button.selected,
.preset-grid button[aria-pressed="true"] {
  border-color: rgba(64, 197, 164, 0.78);
  background: rgba(13, 74, 82, 0.82);
  box-shadow: inset 0 0 0 1px rgba(64, 197, 164, 0.2);
}
.preset-grid button:focus-visible,
.custom-zone-field input:focus-visible {
  outline: 2px solid rgba(86, 185, 255, 0.82);
  outline-offset: 2px;
}
.preset-grid svg, .function-grid svg { width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.08)); }
.preset-grid svg { fill: none; stroke-width: 2.25; }
.function-grid svg { fill: none; stroke-width: 2.25; }
.preset-grid button[disabled] svg,
.function-grid button[disabled] svg,
.zoom-stack button[disabled] {
  opacity: 0.82;
}
.custom-zone-field {
  min-height: 46px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.66);
  color: #d8e9f8;
  font-size: 12px;
  font-weight: 760;
}
.custom-zone-field[hidden] {
  display: none;
}
.custom-zone-field input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(88, 143, 190, 0.35);
  border-radius: 8px;
  background: rgba(2, 12, 24, 0.76);
  color: #f8fbff;
  font: inherit;
  font-weight: 700;
}

.settings-page section {
  padding: 0;
}

.setting-row,
.setting-toggle {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 0 13px;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.78);
  color: #f7fbff;
  font-size: 13px;
  font-weight: 680;
}

.setting-row select {
  min-width: 132px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-weight: 700;
  text-align: right;
}

.setting-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  order: 2;
}

.settings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-actions button {
  min-height: 50px;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.78);
  color: #fff;
  font-size: 12.5px;
  font-weight: 760;
}

.unavailable-note {
  margin: 0;
  padding: 12px 13px;
  border: 1px solid rgba(88, 143, 190, 0.24);
  border-radius: 8px;
  background: rgba(8, 27, 47, 0.6);
  color: #b9c7d7;
  font-size: 12.5px;
  line-height: 1.45;
}

.viewer-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-content: center;
  padding: 58px 24px 96px;
  background: rgba(2, 8, 18, 0.88);
}

.viewer-grid.hidden {
  display: none;
}

.grid-camera {
  min-height: 160px;
  display: grid;
  grid-template-rows: minmax(88px, 1fr) auto auto auto;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(88, 143, 190, 0.28);
  border-radius: 8px;
  background: rgba(9, 31, 52, 0.88);
  color: #fff;
  text-align: left;
}

.grid-camera.active {
  border-color: #1588ff;
  box-shadow: 0 0 0 2px rgba(21, 136, 255, 0.7);
}

.grid-thumb {
  min-height: 86px;
  overflow: hidden;
  border-radius: 6px;
  background: #020812;
}

.grid-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.grid-camera strong,
.grid-camera span,
.grid-camera em {
  margin-left: 2px;
}

.grid-camera > span:not(.grid-thumb) {
  color: #c5d1df;
  font-size: 13px;
}

.camera-carousel {
  min-height: 126px;
  display: grid;
  grid-template-columns: 43px 1fr 43px;
  gap: 22px;
  align-items: center;
  padding: 11px 19px;
}

.carousel-arrow {
  width: 43px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.carousel-arrow svg { width: 26px; height: 26px; }

.camera-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(286px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.camera-list::-webkit-scrollbar { display: none; }

.camera-tile {
  min-height: 108px;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(88, 143, 190, 0.25);
  border-radius: 8px;
  background: rgba(9, 31, 52, 0.82);
  color: #fff;
  text-align: left;
}

.camera-tile.active {
  border-color: #1588ff;
  box-shadow: 0 0 0 2px rgba(21, 136, 255, 0.8), 0 18px 42px rgba(0, 94, 255, 0.18);
}

.thumb {
  height: 86px;
  overflow: hidden;
  border-radius: 6px;
  background: #020812;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.04);
}
.thumb-empty {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 0 12px;
  color: rgba(230, 244, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.camera-tile strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
}
.camera-tile span {
  display: block;
  color: #c5d1df;
  margin-bottom: 12px;
}
.camera-state {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: #8effc2 !important;
  font-size: 13px;
  font-weight: 760;
}
.camera-state:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px rgba(22, 232, 120, 0.72);
}
.camera-state.offline {
  color: #c0cad8 !important;
}
.camera-state.offline:before {
  background: #718399;
  box-shadow: none;
}

.function-bar {
  position: fixed;
  left: 22px;
  right: 22px;
  bottom: 64px;
  z-index: 19;
  min-height: 118px;
  display: grid;
  grid-template-columns: repeat(9, minmax(110px, 1fr));
  overflow: hidden;
  margin: 0;
}

.function-bar button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 0;
  border-right: 1px solid rgba(88, 143, 190, 0.18);
  background: transparent;
  color: #fff;
  text-align: center;
}
.function-bar button:last-child { border-right: 0; }
.function-bar svg { width: 32px; height: 32px; color: #1688ff; stroke-width: 2.28; filter: drop-shadow(0 0 10px rgba(22, 136, 255, 0.24)); }
.function-bar button:not(:disabled) svg,
.function-bar button[data-fullscreen-bar] svg,
.function-bar button[data-preview] svg,
.function-bar button[data-quality-button] svg {
  color: #1688ff;
}
.function-bar button:disabled svg {
  color: rgba(22, 136, 255, 0.78);
}
.function-bar strong { font-size: 14px; font-weight: 680; }
.function-bar span { color: #b9c7d7; font-size: 13px; }

.camera-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 42px;
  min-height: 64px;
  padding: 0 22px 0 22px;
  margin: 0;
  border-top: 1px solid rgba(88, 143, 190, 0.18);
  background: linear-gradient(90deg, rgba(3, 13, 24, 0.98), rgba(3, 16, 31, 0.98) 52%, rgba(3, 13, 24, 0.98));
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.22);
  color: #e8f3ff;
}

.camera-footer div {
  justify-self: start;
  display: flex;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 24px;
}
.camera-footer strong {
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.camera-footer span, .camera-footer a {
  color: #c4d1df;
  font-size: 14px;
}
.connection {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #eaf4ff !important;
}
.connection i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(22, 232, 120, 0.72);
}
/* R11: barras de senal reales (antes: gradiente + clip-path, se veia incompleto) */
.connection .signal-bars {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(22, 232, 120, 0.45));
}
.connection .signal-bars path { stroke: var(--green); }
@media (max-width: 760px) {
  .connection { gap: 8px; }
}

@media (max-width: 1320px) {
  .camera-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .camera-sidebar { padding-bottom: 200px; }
  .camera-stage { grid-template-columns: minmax(0, 1fr) 330px; }
  .search { margin-left: 160px; }
  .floating-controls button { width: 62px; }
  .floating-controls button:last-child { width: 96px; }
  .function-bar { grid-template-columns: repeat(9, minmax(112px, 1fr)); }
}

@media (max-width: 1120px) {
  .camera-shell { grid-template-columns: 176px minmax(0, 1fr); }
  .camera-sidebar {
    padding-left: 9px;
    padding-right: 9px;
  }
  .brand {
    padding-left: 10px;
    padding-right: 10px;
  }
  .brand-lockup strong { font-size: 27px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand span { margin-left: 43px; }
  .side-nav a {
    min-height: 48px;
    gap: 12px;
    padding: 0 11px;
    font-size: 13.5px;
  }
  .box-card {
    padding: 12px;
    font-size: 12px;
  }
  .camera-main {
    padding-left: 14px;
    padding-right: 14px;
  }
  .topbar {
    gap: 12px;
  }
  .search {
    width: min(360px, 42vw);
    margin-left: 40px;
  }
  .camera-header {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .active-camera-summary {
    grid-column: 2 / -1;
    min-height: 42px;
    padding-left: 0;
    border-left: 0;
  }
  .camera-title h1 { font-size: 24px; }
  .camera-title p { font-size: 13px; }
  .camera-header-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .camera-stage {
    grid-template-columns: 1fr;
  }
  .video-frame {
    min-height: 360px;
  }
  .control-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .control-panel .tabs {
    grid-column: 1 / -1;
  }
  .panel-page[data-panel-page="control"] section:first-of-type {
    grid-template-columns: 154px minmax(120px, 1fr);
  }
  .function-bar {
    overflow-x: auto;
    grid-template-columns: repeat(9, minmax(132px, 1fr));
  }
}

@media (max-height: 860px) and (min-width: 1121px) {
  .camera-main {
    grid-template-rows: 56px auto minmax(330px, 1fr) auto auto 42px;
    row-gap: 8px;
  }
  .video-frame {
    min-height: 360px;
  }
  .camera-carousel {
    min-height: 112px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .camera-tile {
    min-height: 94px;
  }
  .thumb {
    height: 74px;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }
  .camera-shell {
    display: block;
    padding-bottom: 178px;
  }
  .camera-sidebar {
    position: relative;
    height: auto;
    grid-template-rows: auto auto;
    padding: 13px 12px;
  }
  .side-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .side-nav a {
    min-width: max-content;
  }
  .box-card {
    display: none;
  }
  .camera-main {
    min-height: auto;
    display: block;
    padding: 12px 12px 190px;
  }
  .topbar,
  .camera-header,
  .camera-stage,
  .camera-carousel {
    margin-bottom: 12px;
  }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .search {
    width: 100%;
    margin-left: 0;
  }
  .top-actions {
    width: 100%;
    justify-content: space-between;
  }
  .camera-header {
    display: grid;
    grid-template-columns: 46px 1fr;
  }
  .live-pill {
    grid-column: 2;
    width: max-content;
  }
  .active-camera-summary {
    grid-column: 1 / -1;
  }
  .camera-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .quality-select {
    min-width: 160px;
  }
  .video-frame {
    min-height: clamp(240px, 58vw, 420px);
  }
  .floating-controls {
    max-width: calc(100vw - 34px);
    overflow-x: auto;
  }
  .control-panel {
    display: grid;
    grid-template-columns: 1fr;
  }
  .panel-page[data-panel-page="control"] section:first-of-type {
    grid-template-columns: 1fr;
  }
  .preset-grid,
  .function-grid {
    /* R13: 4 columnas tambien en movil -> las 8 funciones siguen siendo 2 filas de 4 */
    grid-template-columns: repeat(4, 1fr);
  }
  .camera-carousel {
    grid-template-columns: 36px 1fr 36px;
    gap: 10px;
    padding: 9px;
  }
  .camera-list {
    grid-auto-columns: minmax(240px, 82vw);
  }
  .function-bar {
    left: 10px;
    right: 10px;
    bottom: 58px;
    min-height: 112px;
    grid-template-columns: repeat(9, minmax(118px, 1fr));
  }
  .camera-footer {
    min-height: 58px;
    padding: 0 12px;
    gap: 14px;
  }
  .camera-footer div {
    gap: 12px;
  }
  .camera-footer strong {
    font-size: 25px;
  }
  .camera-footer span,
  .camera-footer a {
    font-size: 12px;
  }
}

/* ============================================================================
   FIX LOCAL R09 — VIGIX LIVE (solo LOCAL, no desplegado).
   Ajustes de espacio/recorte, sin rediseñar:
     1) tarjeta de cámara pendiente sin línea vacía ni textos repetidos
     2) el resumen de cámara seleccionada respeta su columna (recorta con …)
     3) un solo botón de pantalla completa en la cabecera (ver camaras.html)
     4) las barras fijas reservan su altura real; si no cabe, la página desplaza
     5) el nombre del vídeo queda por encima de los controles flotantes
     6) el subtítulo del LIVE no parte la frase de estado
   ============================================================================ */

/* 1) cámara pendiente: se oculta la línea de ubicación vacía */
.camera-tile > span > span:empty { display: none; }

/* 2 y 6) cabecera: el título dispone de espacio y el resumen no invade el pill.
   Solo en escritorio ancho: en móvil/tablet se conservan las plantillas propias. */
@media (min-width: 1261px) {
  .camera-header { grid-template-columns: 48px minmax(180px, 1fr) 190px auto auto; }
}
.active-camera-summary { min-width: 0; overflow: hidden; }
.active-camera-summary strong,
.active-camera-summary span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camera-title p [data-system-status] { white-space: nowrap; }

/* 4) barras inferiores (barra de funciones + pie): dejan de ser "fijas" y pasan a
      ocupar su propia fila del layout (el CSS ya reservaba filas para ellas).
      Así no tapan nunca el vídeo, ni el carrusel, ni ningún contenido: disponen
      de su espacio y, si la pantalla es baja, la página desplaza en vertical. */
body { overflow-x: hidden; overflow-y: auto; }
.camera-shell { height: auto; min-height: 100vh; overflow: visible; padding-bottom: 10px; }
.camera-main {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  grid-template-rows: 54px auto minmax(0, 1fr) auto auto 64px;
  padding-bottom: 10px;
}
.function-bar,
.camera-footer { position: static; left: auto; right: auto; bottom: auto; }
@media (max-height: 860px) and (min-width: 1121px) {
  .camera-main { grid-template-rows: 56px auto minmax(330px, 1fr) auto auto 42px; }
}

/* 5) nombre del vídeo separado de la banda de controles */
.video-name { bottom: 92px; max-width: calc(100% - 36px); }
/* en móvil los controles flotantes ocupan dos filas: el nombre sube */
@media (max-width: 600px) {
  .video-name { bottom: 106px; }
}

/* responsive: en anchos donde la cabecera no cabe en una fila, se apila limpiamente */
@media (min-width: 1121px) and (max-width: 1260px) {
  .camera-header { grid-template-columns: 48px minmax(0, 1fr); }
  .active-camera-summary { grid-column: 1 / -1; min-height: 42px; padding-left: 0; border-left: 0; }
  .live-pill { grid-column: 2; width: max-content; }
  .camera-header-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* R10 — info del VIGIX PRO en el area principal (antes vivia en el sidebar).
   El sidebar ya es el componente canonico; aqui solo se da estilo a este bloque. */
.box-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.box-info .box-shield { width: 34px; height: 34px; display: grid; place-items: center; color: #1688ff; flex: 0 0 auto; }
.box-info .box-shield svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.box-info > div { min-width: 0; overflow: hidden; }
.box-info strong { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; line-height: 1.15; }
.box-info > div > span { display: block; color: #b9c7d7; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-info b, .box-info small { font-weight: 500; font-size: inherit; color: inherit; }
.box-info .dot-sep { color: #5b7794; font-style: normal; padding: 0 4px; }
.box-info .online-dot { font-size: 11px; }
@media (max-width: 760px) { .box-info { display: none; } }

/* R10 — marca movil en la cabecera de VIGIX LIVE (mismo elemento que en el resto de paginas) */
.mobile-brand { display: none; }
@media (max-width: 760px) {
  .mobile-brand { display: flex; align-items: center; gap: 8px; }
  .mobile-brand img { width: 96px; height: 30px; object-fit: contain; object-position: left center; }
}

/* ================= R14: estado de controles por capacidad =================
   R13 queda congelado: tamanos, margenes, gaps, radios, iconos y tipografia NO cambian.
   Solo se anade la senal visual ACTIVADO / DESACTIVADO y el cursor. */
.control-panel .panel-page button[disabled],
.floating-controls button[disabled],
.function-bar button[disabled] { cursor: not-allowed; }
.control-panel .panel-page button:not([disabled]) { cursor: pointer; }
.control-panel .panel-page button[disabled] svg { opacity: 0.5; }
.control-panel .panel-page button[disabled] span { opacity: 0.68; }
[data-video-frame] video { transform-origin: center center; transition: transform 180ms ease; }

/* R16 FASE 2C-B: panel superpuesto de Imagen/Deteccion.
   Solo posicionamiento absoluto: no modifica el flujo ni la geometria del panel (R13 intacto). */
.control-panel, .panel-control, .controls-panel { position: relative; }
.vigix-control-overlay {
  position: absolute; top: 8px; right: 8px; z-index: 30;
  width: min(300px, calc(100% - 16px)); max-height: 80%;
  overflow: auto; padding: 10px 12px; border-radius: 10px;
  background: rgba(12, 16, 22, 0.97); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  font-size: 12px; line-height: 1.3; color: #e8edf5;
}
.vigix-control-overlay header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.vigix-control-overlay header button { background: none; border: 0; color: #9fb0c7; font-size: 16px; cursor: pointer; }
.vigix-overlay-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.vigix-overlay-row select, .vigix-overlay-row input[type="range"] { max-width: 140px; }
/* R16 UI FIX LOCAL: indicador numerico visible y actualizado en vivo */
.vigix-overlay-row input[type="range"] { flex: 1 1 auto; }
.vigix-overlay-row .vigix-overlay-value { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; line-height: 18px; color: #dbe6f5; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 0 6px; }
.vigix-overlay-apply { margin-top: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
  background: #1f6feb; color: #fff; cursor: pointer; }

/* R23: aviso visible cuando la camara no confirma una orden */
.vigix-overlay-error { display: none; margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: #ffb4b4; }

/* R27: estado real leido de la camara junto al control */
.vigix-overlay-state { margin-left: 6px; font-size: 11px; color: #9fb0c7; white-space: nowrap; }