:root {
  --bg: #f7fbff;
  --panel: rgba(255, 255, 255, 0.84);
  --line: rgba(55, 116, 178, 0.16);
  --line-strong: rgba(55, 116, 178, 0.28);
  --text: #132033;
  --muted: #65748a;
  --amber: #2f80ed;
  --amber-soft: rgba(47, 128, 237, 0.12);
  --mint: #16856f;
  --mint-soft: rgba(22, 133, 111, 0.11);
  --danger: #c94646;
  --danger-soft: rgba(201, 70, 70, 0.1);
  --warning: #af6b15;
  --warning-soft: rgba(175, 107, 21, 0.12);
  --blue-soft: rgba(111, 174, 242, 0.18);
  --blue-wash: rgba(218, 236, 255, 0.78);
  --shadow: 0 22px 60px rgba(39, 101, 165, 0.14);
  --radius: 24px;
  --radius-sm: 16px;
  --font-body: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  --font-display: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scrollbar-gutter: stable;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f5f8fb 42%, #eef4f8 100%),
    #f4f8fb;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(221, 231, 240, 0.34), transparent 18%, transparent 82%, rgba(221, 231, 240, 0.3)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 36%);
  opacity: 0.72;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(224, 233, 242, 0.28), rgba(255, 255, 255, 0) 28%);
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1880px, calc(100vw - 20px));
  margin: 0 auto;
  padding: 24px 0 18px;
}

@media (min-width: 1121px) {
  body.dashboard-page {
    overflow: hidden;
  }

  .dashboard-page .app-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px 0 12px;
  }

  .dashboard-page .topbar {
    min-height: 72px;
    margin-bottom: 0;
  }

  .dashboard-page .metric-card {
    min-height: 52px;
    padding: 7px 11px;
  }

  .dashboard-page .control-grid {
    height: 100%;
    min-height: 0;
    margin-top: 0;
  }

  .dashboard-page .panel {
    padding: 10px;
  }

  .dashboard-page .panel__head {
    margin-bottom: 8px;
  }

  .dashboard-page .panel--preview {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-self: stretch;
  }

  .dashboard-page .preview-frame {
    min-height: 0;
    max-height: none;
  }

  .dashboard-page .control-stack {
    gap: 8px;
  }

  .dashboard-page .subpanel {
    padding: 9px;
  }

  .dashboard-page .status-board {
    margin-bottom: 10px;
  }

  .dashboard-page .readout {
    padding: 8px 10px;
  }

  .dashboard-page .range-grid,
  .dashboard-page .manual-step-control {
    gap: 8px;
  }

  .dashboard-page .range-grid,
  .dashboard-page .manual-step-control,
  .dashboard-page .action-row--point,
  .dashboard-page .mini-status,
  .dashboard-page .range-summary {
    margin-top: 6px;
  }

  .dashboard-page .range-summary,
  .dashboard-page .mini-status {
    padding: 7px 9px;
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  margin-bottom: 14px;
}

.topbar__brand {
  display: grid;
  align-content: center;
  gap: 0;
}

.topbar__title-row {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.topbar__title-row--system {
  align-items: baseline;
  gap: 8px 12px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.topbar__title-row > * {
  min-width: 0;
}

.topbar > :first-child {
  flex: 0 1 auto;
  min-width: 0;
}

.topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}

.topbar__switchbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.topbar__title,
.masthead h2,
.panel h2,
.subpanel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.04em;
}

.topbar__title {
  font-size: clamp(1.85rem, 2.5vw, 2.7rem);
  line-height: 0.96;
}

.topbar__title--system {
  max-width: none;
  font-size: clamp(1.42rem, 1.95vw, 1.96rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.topbar__system-icon {
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  color: #eef9ff;
  background:
    linear-gradient(135deg, #13d2ff 0%, #2f6dff 52%, #15266b 100%);
  border: 1px solid rgba(157, 220, 255, 0.72);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(41, 111, 232, 0.3),
    0 0 18px rgba(19, 210, 255, 0.22);
}

.topbar__system-icon::before {
  content: "";
  position: absolute;
  inset: 7px 5px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  opacity: 0.75;
}

.topbar__system-icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(206, 245, 255, 0.42);
  border-radius: 8px;
}

.topbar__system-icon svg {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  filter: drop-shadow(0 0 8px rgba(174, 241, 255, 0.56));
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row--system,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row--system {
  gap: 10px;
}

.topbar__section {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar__title-row .topbar__section {
  margin-left: 4px;
}

.topbar__section--system {
  min-height: auto;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: none;
}

.dashboard-statusbar {
  display: grid;
  min-width: 0;
}

.dashboard-statusbar + .masthead {
  margin-top: 14px;
}

.topbar__statusline {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.topbar__statusline--full {
  width: 100%;
}

.topbar__statusline .alert-strip--statusline {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 74px;
  padding: 14px 16px;
  gap: 12px;
}

.topbar__statusline .alert-strip--statusline .alert-strip__text {
  gap: 4px;
  grid-auto-flow: row;
  grid-auto-columns: auto;
}

.topbar__statusline .alert-strip--statusline .alert-strip__label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.topbar__statusline .alert-strip--statusline .alert-strip__message {
  font-size: 0.83rem;
  line-height: 1.45;
}

.topbar__statusline .alert-strip--statusline .alert-strip__hint {
  display: none;
}

.topbar-status-card {
  display: grid;
  align-content: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 74px;
  padding: 13px 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.topbar-status-card--point-task {
  align-content: start;
  grid-template-rows: auto auto minmax(0, 1fr);
  row-gap: 8px;
}

.topbar-status-card > span {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.topbar-status-card > strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.08;
  letter-spacing: 0.04em;
}

.topbar-status-card strong[data-tone="ok"] {
  color: var(--mint);
}

.topbar-status-card strong[data-tone="warn"] {
  color: var(--amber);
}

.topbar-status-card strong[data-tone="error"] {
  color: var(--danger);
}

.topbar-status-card__steps {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: 168px;
  overflow: auto;
  padding-right: 2px;
}

.topbar-step {
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.topbar-step--success {
  border-color: rgba(140, 224, 197, 0.24);
  background: rgba(140, 224, 197, 0.08);
}

.topbar-step--error {
  border-color: rgba(255, 117, 109, 0.3);
  background: rgba(255, 117, 109, 0.08);
}

.topbar-step--warning {
  border-color: rgba(228, 170, 86, 0.26);
  background: rgba(228, 170, 86, 0.08);
}

.topbar-step--idle {
  opacity: 0.88;
}

.topbar-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}

.topbar-step__index {
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}

.topbar-step__time {
  white-space: nowrap;
}

.topbar-step__title {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.35;
}

.topbar-step__detail {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.page-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.page-nav__link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.page-nav__link--active {
  color: #1b1207;
  background: linear-gradient(135deg, var(--amber) 0%, #cb8b35 100%);
}

.user-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  white-space: nowrap;
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(620px, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.masthead--metrics-only {
  grid-template-columns: minmax(0, 1fr);
}

.masthead__copy,
.metric-card,
.panel,
.alert-strip {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.masthead__copy {
  padding: 14px 18px;
}

.masthead__copy::after,
.metric-card::after,
.panel::after,
.alert-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.masthead__text {
  max-width: none;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.headline-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.metric-card {
  display: grid;
  align-content: start;
  row-gap: 5px;
  min-height: 56px;
  padding: 8px 12px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 1px;
  font-family: var(--font-display);
  font-size: 1.34rem;
  line-height: 1.02;
  letter-spacing: 0.04em;
}

.metric-card strong[data-tone="ok"] {
  color: var(--mint);
}

.metric-card strong[data-tone="warn"] {
  color: var(--amber);
}

.metric-card strong[data-tone="error"] {
  color: var(--danger);
}

.alert-strip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 0;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.alert-strip--topbar {
  flex: 1 1 420px;
  min-width: 320px;
  max-width: 640px;
  min-height: 46px;
  width: auto;
  margin-top: 0;
  padding: 0 16px;
  gap: 12px;
  border-radius: 999px;
  align-items: center;
  overflow: hidden;
}

.alert-strip--topbar .alert-strip__text {
  flex: 1 1 auto;
  min-width: 0;
  grid-auto-flow: column;
  grid-auto-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.alert-strip--topbar .alert-strip__label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.alert-strip--topbar .alert-strip__message {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-strip--topbar .alert-strip__hint {
  flex: 0 0 auto;
  font-size: 0.74rem;
  white-space: nowrap;
}

.alert-strip--readonly {
  cursor: default;
}

.alert-strip[data-tone="ok"] {
  border-color: rgba(140, 224, 197, 0.32);
  color: var(--mint);
  background: linear-gradient(90deg, var(--mint-soft), rgba(17, 23, 31, 0.92));
}

.alert-strip[data-tone="warn"] {
  border-color: rgba(228, 170, 86, 0.4);
  color: var(--amber);
  background: linear-gradient(90deg, var(--amber-soft), rgba(17, 23, 31, 0.92));
}

.alert-strip[data-tone="error"] {
  border-color: rgba(255, 117, 109, 0.4);
  color: var(--danger);
  background: linear-gradient(90deg, var(--danger-soft), rgba(17, 23, 31, 0.92));
}

.alert-strip__text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.alert-strip__label {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.alert-strip__message {
  display: block;
  color: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-strip__hint {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 0.78rem;
  opacity: 0.82;
  white-space: nowrap;
}

.control-grid {
  display: grid;
  grid-template-columns: minmax(332px, 360px) minmax(620px, 1.14fr) minmax(438px, 0.94fr);
  grid-template-areas: "config control preview";
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}

.sidebar-stack {
  grid-area: config;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
  align-content: stretch;
}

.profiles-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.camera-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.camera-current-banner {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(140, 224, 197, 0.28);
  background: linear-gradient(135deg, rgba(140, 224, 197, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.camera-current-banner[data-tone="ok"],
.camera-current-banner[data-tone="current"] {
  border-color: rgba(140, 224, 197, 0.34);
}

.camera-current-banner[data-tone="warn"] {
  border-color: rgba(228, 170, 86, 0.34);
  background: linear-gradient(135deg, rgba(228, 170, 86, 0.14), rgba(255, 255, 255, 0.03));
}

.camera-current-banner[data-tone="error"] {
  border-color: rgba(255, 117, 109, 0.34);
  background: linear-gradient(135deg, rgba(255, 117, 109, 0.14), rgba(255, 255, 255, 0.03));
}

.camera-current-banner[data-tone="neutral"] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.camera-current-banner__label {
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.camera-current-banner strong {
  font-size: 1.02rem;
  line-height: 1.2;
}

.camera-current-banner span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.tasks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.panel {
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%),
    var(--panel);
}

.panel--config,
.panel--status,
.panel--control,
.panel--preview {
  min-height: 0;
}

.panel--config,
.panel--status {
  display: grid;
  grid-template-rows: auto auto;
  height: 100%;
}

.panel--control {
  grid-area: control;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.panel--preview {
  grid-area: preview;
  display: grid;
  grid-template-rows: auto minmax(248px, 280px) auto auto;
  gap: 8px;
  height: auto;
  align-self: start;
  align-content: start;
}

.panel__head,
.subpanel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.panel__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.panel__head {
  margin-bottom: 10px;
}

.panel--config > .panel__head,
.panel--status > .panel__head,
.panel--control > .panel__head,
.panel--preview > .panel__head {
  margin-bottom: 0;
}

.panel__badge,
.ghost-button,
.primary-button,
.ptz-button,
.thumb-card span,
.mini-status,
.profile-chip {
  border-radius: 999px;
}

.panel__badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  white-space: nowrap;
  font-size: 0.86rem;
}

.ghost-button,
.primary-button,
.ptz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.ghost-button:hover,
.primary-button:hover,
.ptz-button:hover {
  transform: translateY(-1px);
}

.ghost-button {
  min-height: 32px;
  padding: 0 11px;
  font-size: 0.84rem;
}

.ghost-button--danger {
  border-color: rgba(255, 117, 109, 0.34);
  color: var(--danger);
}

.primary-button {
  min-height: 36px;
  padding: 0 13px;
  background: linear-gradient(135deg, var(--amber) 0%, #cb8b35 100%);
  color: #180f06;
  font-weight: 700;
  border-color: rgba(228, 170, 86, 0.55);
  font-size: 0.84rem;
}

.ghost-button:hover,
.ptz-button:hover {
  border-color: rgba(228, 170, 86, 0.44);
  background: rgba(228, 170, 86, 0.08);
}

.primary-button:hover {
  border-color: rgba(228, 170, 86, 0.88);
}

button:disabled {
  opacity: 0.56;
  cursor: wait;
  transform: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(140, 224, 197, 0.72);
  outline-offset: 2px;
}

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

.form-grid label,
.inline-form label,
.slider-column label {
  display: grid;
  gap: 6px;
}

.form-grid span,
.inline-form span,
.slider-column span,
.helper-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.form-grid__full {
  grid-column: 1 / -1;
}

input,
select {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
}

select {
  color-scheme: dark;
}

select option {
  background: #11171f;
  color: var(--text);
}

select optgroup {
  background: #0d1218;
  color: var(--amber);
}

code {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--amber);
  font-size: 0.76rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.helper-block {
  display: grid;
  gap: 10px;
}

.config-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  height: 100%;
  align-content: start;
}

.config-card--compact {
  grid-template-rows: auto auto;
}

.config-card__camera {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(145deg, rgba(228, 170, 86, 0.08), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.025);
}

.config-card__camera-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.config-card__camera-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.52rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.config-card__camera-link:hover {
  color: var(--amber);
}

.config-card__camera-link:focus-visible {
  outline: 2px solid rgba(140, 224, 197, 0.72);
  outline-offset: 4px;
}

.config-card__camera-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.config-card__camera-stake {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.panel--config,
.panel--status {
  gap: 12px;
}

.config-card__summary {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(228, 170, 86, 0.1), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.025);
  text-align: left;
  color: inherit;
  font: inherit;
}

.config-card__summary-head,
.config-card__summary-foot,
.config-card__switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.config-card__section-label,
.config-card__target-label {
  color: var(--amber);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.config-card__stream-chip,
.config-card__switch-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(228, 170, 86, 0.25);
  background: rgba(228, 170, 86, 0.1);
  color: var(--amber);
  font-size: 0.76rem;
  white-space: nowrap;
}

.config-card__switch-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.config-card__switch-status[data-tone="current"] {
  border-color: rgba(140, 224, 197, 0.28);
  background: rgba(140, 224, 197, 0.1);
  color: var(--mint);
}

.config-card__switch-status[data-tone="pending"] {
  border-color: rgba(228, 170, 86, 0.25);
  background: rgba(228, 170, 86, 0.1);
  color: var(--amber);
}

.config-card__switch-status[data-tone="muted"] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.config-card__title {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.config-card__title strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.52rem;
  line-height: 0.92;
  letter-spacing: 0.04em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.config-card__switcher-head strong,
.config-card__target strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.config-card__hint {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.config-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.config-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.74rem;
}

.config-card__switcher {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.config-card__switch-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.config-card__switch-controls > .primary-button {
  min-width: 118px;
}

.active-camera-modal__panel {
  width: min(700px, calc(100vw - 28px));
}

.active-camera-modal .config-modal__head span {
  display: none;
}

.active-camera-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  max-height: min(64vh, 620px);
  overflow: auto;
  padding-right: 2px;
}

.active-camera-picker-empty {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  line-height: 1.55;
}

.active-camera-picker-item {
  display: block;
  min-height: 90px;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.02);
}

.active-camera-picker-item--current {
  border-color: rgba(140, 224, 197, 0.34);
  background:
    linear-gradient(180deg, rgba(140, 224, 197, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
}

.active-camera-picker-item__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 7px;
  min-height: 72px;
}

.active-camera-picker-item__name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-camera-picker-item__chips {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  white-space: nowrap;
}

.active-camera-picker-item__summary .profile-chip {
  min-height: 22px;
  padding-inline: 7px;
  font-size: 0.68rem;
}

.active-camera-picker-item__action {
  width: 100%;
  min-height: 28px;
  padding-inline: 8px;
  font-size: 0.78rem;
}

.active-camera-picker-item__head,
.active-camera-picker-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.active-camera-picker-item__title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.active-camera-picker-item__title strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.active-camera-picker-item__host {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.active-camera-picker-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.active-camera-picker-item__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.74rem;
}

.config-card__target {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.form-grid--readonly {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: start;
}

.form-grid--readonly label {
  gap: 4px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.015);
}

.form-grid--readonly span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-grid--readonly input,
.form-grid--readonly select {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.82rem;
}

.form-grid--readonly > .helper-block {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.form-grid--readonly > .helper-block > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.015);
}

.form-grid--readonly code {
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.74rem;
  line-height: 1.4;
}

.config-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.config-card__actions > * {
  width: 100%;
}

.config-card input[readonly],
.config-card select:disabled {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.config-card select:disabled {
  -webkit-text-fill-color: var(--text);
}

.config-card code {
  color: var(--text);
}

.config-modal {
  width: min(1080px, calc(100vw - 20px));
  border: none;
  padding: 0;
  background: transparent;
}

.config-modal::backdrop {
  background: rgba(4, 7, 10, 0.82);
  backdrop-filter: blur(10px);
}

.config-modal__panel {
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 20%),
    rgba(10, 14, 19, 0.96);
  box-shadow: var(--shadow);
  padding: 16px;
}

.config-modal__head,
.config-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.config-modal__head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.05em;
}

.config-modal__head span {
  color: var(--muted);
  font-size: 0.84rem;
}

.config-modal__body {
  margin-top: 12px;
}

.task-modal__panel {
  width: min(980px, calc(100vw - 20px));
}

.task-modal__panel .config-modal__body {
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding-right: 4px;
}

.camera-modal__panel {
  width: min(760px, calc(100vw - 20px));
  padding: 8px 10px;
  border-radius: 16px;
}

.camera-modal__panel .config-modal__head {
  gap: 8px;
}

.camera-modal__title {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
}

.camera-modal__panel .config-modal__body {
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding-right: 4px;
  margin-top: 4px;
}

.camera-modal__panel .form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px 8px;
  align-items: end;
}

.camera-form-section {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin-top: 2px;
  padding: 8px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.camera-form-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.camera-form-section strong {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
}

.camera-form-section span {
  color: var(--muted);
  font-size: 0.72rem;
}

.camera-form-section--execution {
  margin-top: 6px;
}

.camera-modal__panel .camera-field--text {
  grid-column: span 4;
}

.camera-modal__panel .camera-field--number {
  grid-column: span 3;
}

.camera-modal__panel .camera-field--output {
  grid-column: 1 / -1;
}

.camera-modal__panel .form-grid label,
.camera-modal__panel .inline-form label {
  min-width: 0;
  gap: 3px;
}

.camera-modal__panel .form-grid span,
.camera-modal__panel .inline-form span,
.camera-modal__panel .helper-label {
  font-size: 0.72rem;
}

.camera-modal__panel input,
.camera-modal__panel select {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
}

.camera-modal__panel .helper-block {
  gap: 4px;
  padding: 5px 8px;
}

.camera-modal__panel .inline-form {
  gap: 5px;
  max-width: 460px;
  margin-top: 3px;
}

.camera-modal__panel code {
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 1.38;
}

.camera-modal__panel .form-actions {
  align-items: center;
  gap: 6px;
  padding-top: 0;
}

.form-actions {
  display: flex;
  gap: 8px;
}

.profile-autosave-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-right: auto;
  color: #5b6b82;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.profile-autosave-status:empty {
  display: none;
}

.profile-autosave-status[data-tone="ok"] {
  color: #0f8d78;
}

.profile-autosave-status[data-tone="warn"] {
  color: #bf6b13;
}

.profile-autosave-status[data-tone="error"] {
  color: #c83e3e;
}

.status-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.status-board--inside {
  margin-top: 10px;
}

.status-board--sidebar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
  align-content: stretch;
  height: auto;
}

.readout {
  display: grid;
  align-content: start;
  padding: 9px 11px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.readout span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.readout strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.05em;
}

.readout__meta {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.control-stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
  min-height: 0;
  height: 100%;
  align-content: start;
}

.subpanel {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.subpanel--sidebar {
  margin-top: 0;
}

.subpanel--sidebar .status-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-note,
.range-summary {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  line-height: 1.6;
}

.subpanel__hint {
  color: var(--muted);
  font-size: 0.76rem;
}

.range-grid {
  display: grid;
  grid-template-columns: 88px repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.range-grid__head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding-inline: 8px;
  border-radius: 11px;
  background: rgba(47, 128, 237, 0.06);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.range-grid__head svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: #3a75d6;
}

.range-grid__label {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.range-grid input {
  min-width: 0;
}

.pad-and-sliders {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  margin-top: 10px;
}

.ptz-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ptz-button {
  min-height: 46px;
  padding: 0 12px;
  font-size: 0.9rem;
}

.ptz-button--stop {
  background: rgba(255, 117, 109, 0.12);
  border-color: rgba(255, 117, 109, 0.38);
  color: var(--danger);
  font-weight: 700;
}

.ptz-button--zoom {
  min-height: 42px;
}

.slider-column {
  display: grid;
  gap: 10px;
}

.slider-column strong {
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.zoom-row,
.action-row {
  display: flex;
  gap: 8px;
}

.action-row--point {
  margin-top: 10px;
  align-items: stretch;
}

.inline-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.inline-form--triplet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-step-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 148px));
  gap: 12px;
  justify-content: start;
  margin-top: 8px;
}

.manual-step-control label {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.manual-step-control span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.manual-step-control input {
  width: 100%;
  min-height: 34px;
  padding-inline: 8px;
}

.action-row--point .primary-button {
  width: 100%;
}

.mini-status {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.84rem;
}

.panel__status-summary {
  margin-top: 10px;
}

.task-log {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.task-log__title {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.task-log__list {
  display: grid;
  gap: 8px;
}

.task-log__entry {
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.task-log__entry--success {
  border-color: rgba(140, 224, 197, 0.24);
  background: rgba(140, 224, 197, 0.08);
}

.task-log__entry--error {
  border-color: rgba(255, 117, 109, 0.3);
  background: rgba(255, 117, 109, 0.08);
}

.task-log__entry--warning {
  border-color: rgba(228, 170, 86, 0.26);
  background: rgba(228, 170, 86, 0.08);
}

.task-log__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.76rem;
}

.task-log__level {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.task-log__message {
  margin-top: 5px;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.task-log__details {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  word-break: break-word;
}

.camera-connectivity-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.camera-connectivity-summary__item,
.camera-connectivity-day {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.camera-connectivity-summary__item span,
.camera-connectivity-day span,
.camera-connectivity-day small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.camera-connectivity-summary__item strong,
.camera-connectivity-day strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.camera-connectivity-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.camera-connectivity-records .task-log__list {
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.camera-connectivity-timeline {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.camera-connectivity-timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.camera-connectivity-timeline__head strong {
  color: var(--text);
  font-size: 0.98rem;
}

.camera-connectivity-timeline__head span {
  color: var(--muted);
  font-size: 0.76rem;
}

.camera-connectivity-timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, minmax(42px, 1fr));
  gap: 6px;
  padding-top: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.camera-connectivity-timeline__track::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 7%;
  right: 7%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47, 128, 237, 0.18), rgba(22, 133, 111, 0.2));
}

.camera-connectivity-timeline__point {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  text-align: center;
}

.camera-connectivity-timeline__node {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.86);
}

.camera-connectivity-timeline__point strong {
  color: var(--text);
  font-size: 0.72rem;
}

.camera-connectivity-timeline__point small {
  color: var(--muted);
  font-size: 0.64rem;
  white-space: nowrap;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camera-connectivity-timeline__point[data-status="online"] {
  color: var(--mint);
}

.camera-connectivity-timeline__point[data-status="partial"] {
  color: var(--warning);
}

.camera-connectivity-timeline__point[data-status="offline"] {
  color: var(--danger);
}

.camera-connectivity-timeline__point[data-status="unknown"] {
  color: #95a3b8;
}

.camera-connectivity-timeline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 0.76rem;
}

.camera-connectivity-timeline__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.camera-connectivity-timeline__legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.camera-connectivity-timeline__legend span[data-status="online"] {
  color: var(--mint);
}

.camera-connectivity-timeline__legend span[data-status="partial"] {
  color: var(--warning);
}

.camera-connectivity-timeline__legend span[data-status="offline"] {
  color: var(--danger);
}

.camera-connectivity-timeline__legend span[data-status="unknown"] {
  color: #95a3b8;
}

@media (max-width: 760px) {
  .camera-connectivity-summary,
  .camera-connectivity-days {
    grid-template-columns: 1fr;
  }

  .camera-connectivity-timeline__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.toggle-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.toggle-field input {
  width: auto;
  min-height: auto;
}

.preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 248px;
  height: 100%;
  max-height: 280px;
  padding: 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent 45%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 24px
    );
}

.preview-frame.has-image {
  cursor: zoom-in;
}

.preview-frame::before,
.preview-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-color: rgba(228, 170, 86, 0.5);
  pointer-events: none;
}

.preview-frame::before {
  top: 12px;
  left: 12px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.preview-frame::after {
  right: 12px;
  bottom: 12px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.preview-frame img {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  object-position: center 56%;
  display: none;
}

.preview-frame.has-image img {
  display: block;
}

.preview-frame.has-image .preview-empty {
  display: none;
}

.preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--muted);
}

.preview-empty span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--font-display);
  font-size: 3.2rem;
  letter-spacing: 0.14em;
}

.preview-history {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.preview-history__label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-history__viewport {
  position: relative;
  min-width: 0;
}

.preview-meta {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.meta-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.84rem;
}

.meta-line strong {
  color: var(--text);
  font-weight: 500;
  max-width: 68%;
  text-align: right;
  overflow-wrap: anywhere;
}

.meta-line--file {
  grid-column: 1 / -1;
}

.meta-line--capture-times {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 18px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.meta-line--capture-times::-webkit-scrollbar {
  display: none;
}

.meta-time-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.meta-line--capture-times .meta-time-pair strong {
  max-width: none;
  text-align: left;
}

.dashboard-page .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) auto;
  align-items: flex-start;
  gap: 12px 16px;
  min-height: 76px;
  margin-bottom: 12px;
}

.dashboard-page .topbar__brand {
  flex: 1 1 520px;
  gap: 6px;
  min-width: 0;
}

.dashboard-page .topbar__title-row {
  flex-wrap: nowrap;
  gap: 8px 10px;
}

.dashboard-page .topbar__actions {
  display: grid;
  justify-items: end;
  align-content: start;
  align-items: start;
  gap: 8px;
  flex: 0 1 680px;
}

.dashboard-page .topbar__switchbar {
  width: auto;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-page .topbar__title {
  font-size: clamp(1.94rem, 2.35vw, 2.56rem);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .topbar__section {
  min-height: auto;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.dashboard-page .topbar__subtitle {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .page-nav {
  padding: 7px;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dashboard-page .page-nav__link {
  min-height: 34px;
  padding: 0 14px;
  font-weight: 500;
}

.dashboard-page .page-nav__link--active {
  box-shadow: 0 10px 20px rgba(228, 170, 86, 0.2);
}

.dashboard-page .user-bar {
  width: auto;
  justify-content: flex-end;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.02);
}

.dashboard-page .user-chip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.dashboard-page .dashboard-statusbar {
  position: relative;
}

.dashboard-page .dashboard-statusbar::before {
  content: "";
  position: absolute;
  inset: -4px 0 auto;
  height: 60px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(228, 170, 86, 0.08), transparent 72%);
  opacity: 0.7;
  pointer-events: none;
}

.dashboard-page .topbar__statusline {
  position: relative;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(132px, 1fr));
  gap: 10px;
}

.dashboard-page .topbar__statusline .alert-strip--statusline,
.dashboard-page .topbar-status-card {
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dashboard-page .topbar__statusline .alert-strip--statusline .alert-strip__text {
  gap: 6px;
}

.dashboard-page .topbar__statusline .alert-strip--statusline .alert-strip__label,
.dashboard-page .topbar-status-card > span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.dashboard-page .topbar__statusline .alert-strip--statusline .alert-strip__message {
  display: block;
  font-size: 0.84rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .topbar-status-card > strong {
  margin-top: 6px;
  font-size: 1.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .control-grid {
  grid-template-columns: minmax(312px, 0.9fr) minmax(540px, 1.15fr) minmax(390px, 0.95fr);
  gap: 12px;
  margin-top: 12px;
}

.dashboard-page .sidebar-stack {
  gap: 12px;
}

.dashboard-page .panel {
  padding: 14px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(228, 170, 86, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 26%),
    var(--panel);
}

.dashboard-page .panel__head,
.dashboard-page .subpanel__head {
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-page .panel__head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-page .panel--config > .panel__head,
.dashboard-page .panel--status > .panel__head,
.dashboard-page .panel--control > .panel__head,
.dashboard-page .panel--preview > .panel__head {
  margin-bottom: 8px;
}

.dashboard-page .panel__head-copy,
.dashboard-page .subpanel__head-copy {
  display: grid;
  gap: 2px;
  flex: 1 1 280px;
  min-width: 0;
}

.dashboard-page .eyebrow {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.16em;
}

.dashboard-page .panel h2 {
  font-size: 1.28rem;
  line-height: 1.02;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .subpanel h3 {
  font-size: 1.08rem;
  line-height: 1.08;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .panel__caption,
.dashboard-page .subpanel__caption {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .control-stack {
  gap: 10px;
}

.dashboard-page .panel__tools .ghost-button {
  min-width: 108px;
}

.dashboard-page .subpanel {
  padding: 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(140, 224, 197, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.025);
}

.dashboard-page .subpanel__head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dashboard-page .subpanel__hint {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .config-card__camera {
  gap: 6px;
  padding: 10px 12px;
  border-radius: 20px;
}

.dashboard-page .config-card__section-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.dashboard-page .config-card__camera-link {
  font-size: 1.24rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .config-card__camera-meta {
  font-size: 0.76rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .status-board--sidebar {
  gap: 8px;
}

.dashboard-page .readout {
  padding: 10px 11px;
  border-radius: 18px;
}

.dashboard-page .readout span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.dashboard-page .readout strong {
  font-size: 1.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .readout__meta {
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .range-summary,
.dashboard-page .mini-status {
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .action-row {
  gap: 8px;
}

.dashboard-page .action-row > .ghost-button,
.dashboard-page .action-row > .primary-button {
  flex: 1 1 0;
}

.dashboard-page .action-row--point .primary-button {
  min-height: 38px;
}

.dashboard-page .panel--preview {
  grid-template-rows: auto minmax(270px, 1fr) auto auto;
  gap: 8px;
  align-self: stretch;
}

.dashboard-page .preview-frame {
  min-height: 270px;
  max-height: none;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 28%, rgba(228, 170, 86, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 24px
    );
}

.dashboard-page .preview-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.dashboard-page .meta-line {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
}

.dashboard-page .meta-line strong {
  max-width: 100%;
  font-size: 0.84rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .panel__badge,
.dashboard-page .page-nav__link,
.dashboard-page .user-chip,
.dashboard-page .ghost-button,
.dashboard-page .primary-button {
  font-size: 0.8rem;
  white-space: nowrap;
}

.dashboard-page .preview-empty {
  padding: 14px;
}

.dashboard-page .preview-empty p {
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.gallery-empty {
  display: grid;
  place-items: center;
  min-height: 72px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--muted);
}

.login-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 126, 95, 0.18), transparent 18%),
    radial-gradient(circle at 82% 16%, rgba(255, 196, 87, 0.18), transparent 20%),
    radial-gradient(circle at 78% 82%, rgba(72, 198, 239, 0.16), transparent 24%),
    radial-gradient(circle at 24% 84%, rgba(145, 106, 255, 0.12), transparent 22%);
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 35%, rgba(10, 14, 19, 0.94)),
    rgba(17, 23, 31, 0.9);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.login-card__title {
  white-space: nowrap;
  font-size: clamp(1rem, 2.7vw, 2rem);
}

.login-card__text {
  margin: 10px 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.login-shell::before,
.login-shell::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 44vw;
  height: 44vw;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.login-shell::before {
  top: -14vw;
  left: -10vw;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 209, 102, 0.86), transparent 26%),
    radial-gradient(circle at 68% 40%, rgba(255, 126, 95, 0.88), transparent 30%),
    radial-gradient(circle at 48% 72%, rgba(119, 93, 255, 0.72), transparent 34%);
  animation: loginAuroraDrift 18s ease-in-out infinite alternate;
}

.login-shell::after {
  right: -12vw;
  bottom: -16vw;
  background:
    radial-gradient(circle at 38% 34%, rgba(72, 198, 239, 0.82), transparent 28%),
    radial-gradient(circle at 68% 48%, rgba(0, 245, 212, 0.6), transparent 30%),
    radial-gradient(circle at 48% 72%, rgba(255, 91, 146, 0.5), transparent 34%);
  animation: loginAuroraDriftReverse 22s ease-in-out infinite alternate;
}

.login-card::before,
.login-card::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.login-card::before {
  top: -30%;
  right: -8%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 87, 0.2), transparent 65%);
  filter: blur(4px);
  animation: loginHaloPulse 10s ease-in-out infinite;
}

.login-card::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.08) 26%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%);
  opacity: 0.72;
  animation: loginCardSheen 8.6s ease-in-out infinite;
}

.login-form {
  display: grid;
  gap: 12px;
}

.login-form label {
  display: grid;
  gap: 6px;
}

.login-card__alert {
  margin-top: 14px;
  cursor: default;
}

.login-card__alert[hidden] {
  display: none;
}

@keyframes loginAuroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(8vw, 4vh, 0) scale(1.12) rotate(10deg);
  }
  100% {
    transform: translate3d(2vw, 12vh, 0) scale(0.94) rotate(-8deg);
  }
}

@keyframes loginAuroraDriftReverse {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02) rotate(0deg);
  }
  50% {
    transform: translate3d(-9vw, -6vh, 0) scale(0.92) rotate(-12deg);
  }
  100% {
    transform: translate3d(-2vw, -12vh, 0) scale(1.14) rotate(7deg);
  }
}

@keyframes loginCardSheen {
  0%,
  100% {
    transform: translateX(-20%);
    opacity: 0.42;
  }
  50% {
    transform: translateX(18%);
    opacity: 0.88;
  }
}

@keyframes loginHaloPulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.52;
  }
  50% {
    transform: scale(1.16);
    opacity: 0.86;
  }
}

.thumb-card {
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  cursor: zoom-in;
}

.thumb-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.thumb-card span {
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-modal {
  width: fit-content;
  max-width: calc(100vw - 32px);
  padding: 0;
  border: none;
  background: transparent;
}

.image-modal::backdrop {
  background:
    radial-gradient(circle at top, rgba(228, 170, 86, 0.12), transparent 32%),
    rgba(4, 7, 10, 0.84);
  backdrop-filter: blur(10px);
}

.image-modal__panel {
  position: relative;
  width: fit-content;
  max-width: calc(100vw - 32px);
  padding: 58px 14px 14px;
  overflow: visible;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    rgba(10, 14, 19, 0.96);
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.55);
}

.image-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
}

.image-modal__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 64px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(175, 205, 244, 0.78);
  background: rgba(247, 251, 255, 0.92);
  color: #1f5f9d;
  box-shadow: 0 16px 34px rgba(5, 26, 56, 0.28);
  transform: translateY(-50%);
}

.image-modal__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.image-modal__nav--prev {
  left: 18px;
}

.image-modal__nav--next {
  right: 18px;
}

.image-modal__nav:not(:disabled):hover {
  border-color: rgba(141, 185, 244, 0.95);
  background: rgba(255, 255, 255, 0.98);
  color: #15548f;
}

.image-modal__nav:disabled {
  opacity: 0.36;
  cursor: default;
  box-shadow: none;
}

.image-modal__nav[hidden] {
  display: none;
}

.image-modal__frame {
  display: grid;
  place-items: center;
  width: fit-content;
  min-width: min(360px, calc(100vw - 72px));
  max-width: calc(100vw - 76px);
  max-height: min(78vh, 900px);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 62%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 46%);
  overflow: hidden;
}

.image-modal__frame img {
  display: block;
  max-width: calc(100vw - 100px);
  max-height: min(76vh, 860px);
  object-fit: contain;
  object-position: center;
}

.image-modal__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}

.image-modal__text {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.image-modal__text strong {
  display: block;
  font-size: 1rem;
}

.image-modal__text span {
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.image-modal__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
}

.image-modal__open svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analysis-image-modal__controls {
  position: absolute;
  top: 12px;
  right: 88px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(175, 205, 244, 0.48);
  background: rgba(247, 251, 255, 0.92);
  box-shadow: 0 12px 28px rgba(5, 26, 56, 0.18);
}

.analysis-image-modal__view {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #3a5e87;
  background: transparent;
  box-shadow: none;
}

.analysis-image-modal__view:hover:not(:disabled) {
  color: #15548f;
  background: rgba(255, 255, 255, 0.92);
}

.analysis-image-modal__view.is-active {
  color: #15548f;
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(141, 185, 244, 0.92);
  box-shadow: 0 8px 18px rgba(5, 26, 56, 0.12);
}

.analysis-image-modal__view:disabled {
  opacity: 0.42;
  cursor: default;
}

.analysis-image-modal__frame {
  position: relative;
}

.analysis-image-modal__media {
  position: relative;
  display: inline-block;
  max-width: calc(100vw - 100px);
  max-height: min(76vh, 860px);
}

.analysis-image-modal__media > img {
  display: block;
}

.analysis-image-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.analysis-image-modal__overlay[hidden] {
  display: none;
}

.analysis-image-modal__overlay .analysis-detection-layer--modal {
  inset: 0;
}

.log-modal {
  width: min(92vw, 980px);
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
}

.log-modal::backdrop {
  background:
    radial-gradient(circle at top, rgba(228, 170, 86, 0.12), transparent 32%),
    rgba(4, 7, 10, 0.82);
  backdrop-filter: blur(10px);
}

.log-modal__panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    rgba(10, 14, 19, 0.96);
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.55);
}

.log-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.log-modal__head strong {
  display: block;
  font-size: 1.02rem;
}

.log-modal__head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.log-modal__actions {
  display: flex;
  gap: 8px;
}

.profile-list {
  display: grid;
  gap: 10px;
}

.camera-toolbar,
.camera-toolbar__group,
.view-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.camera-toolbar {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.camera-toolbar__group {
  flex-wrap: wrap;
}

.camera-management-title {
  margin: 0;
}

.app-page--cameras .camera-toolbar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.app-page--cameras .camera-toolbar__group,
.app-page--cameras .camera-toolbar__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.app-page--cameras .camera-toolbar__actions {
  margin-left: auto;
}

.app-page--cameras .camera-toolbar__status {
  flex: 1 1 min(34vw, 560px);
  min-width: 280px;
  max-width: 560px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-page--cameras .camera-toolbar__status #profiles-alert-message {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .app-page--cameras .camera-toolbar__status {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline: 0;
  }
}

.app-page--cameras .view-switch {
  flex-wrap: nowrap;
}

.toolbar-field {
  display: grid;
  gap: 6px;
  min-width: min(320px, 100%);
}

.app-page--cameras .toolbar-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-page--cameras .toolbar-field span {
  white-space: nowrap;
}

.toolbar-field span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toolbar-field select {
  min-width: 220px;
}

.app-page--cameras .toolbar-field select {
  min-width: 190px;
}

.app-page--cameras #profiles-group-select {
  min-width: 150px;
}

.app-page--cameras .toolbar-select {
  position: relative;
  flex: 0 0 auto;
  min-width: 190px;
}

.app-page--cameras .toolbar-select[data-select-id="profiles-group-select"],
.app-page--cameras .toolbar-select[data-select-id="connectivity-group-select"] {
  min-width: 150px;
}

.toolbar-select__native {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.toolbar-select__button {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid rgba(55, 116, 178, 0.16);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.toolbar-select__button:hover,
.toolbar-select--open .toolbar-select__button {
  border-color: rgba(47, 128, 237, 0.48);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.08);
}

.toolbar-select__button:focus-visible {
  outline: 2px solid rgba(47, 128, 237, 0.52);
  outline-offset: 2px;
}

.toolbar-select__value {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.toolbar-select__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.toolbar-select--open .toolbar-select__button svg {
  transform: rotate(180deg);
}

.toolbar-select__menu {
  position: fixed;
  z-index: 5000;
  display: grid;
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(55, 116, 178, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(28, 67, 108, 0.2);
}

.toolbar-select__menu[hidden] {
  display: none;
}

.toolbar-select__option {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.toolbar-select__option i {
  color: transparent;
  font-style: normal;
  font-weight: 800;
}

.toolbar-select__option:hover,
.toolbar-select__option:focus-visible {
  outline: none;
  background: rgba(47, 128, 237, 0.1);
}

.toolbar-select__option--selected {
  color: #ffffff;
  background: #2f80ed;
}

.toolbar-select__option--selected:hover,
.toolbar-select__option--selected:focus-visible {
  background: #2375e6;
}

.toolbar-select__option--selected i {
  color: currentColor;
}

.toolbar-select__option:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.view-switch {
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  flex-wrap: wrap;
}

.view-switch__button {
  min-width: 72px;
}

.view-switch__button--active,
.view-switch__button[aria-pressed="true"] {
  border-color: rgba(228, 170, 86, 0.36);
  background: rgba(228, 170, 86, 0.12);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(228, 170, 86, 0.18);
}

.camera-list {
  min-width: 0;
}

.camera-list--cards {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}

.camera-list--compact {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

.camera-list--list {
  display: block;
}

.camera-list--table {
  display: block;
}

.camera-list--grouped {
  display: grid;
  gap: 14px;
}

.camera-group-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.camera-group-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(55, 116, 178, 0.16);
}

.camera-group-section__head strong {
  color: var(--text);
  font-size: 1rem;
}

.camera-group-section__head span {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.camera-group-section__body--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}

.camera-group-section__body--compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

.camera-group-section__body--table {
  display: block;
}

.camera-group-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.camera-group-form label {
  display: grid;
  gap: 6px;
}

.camera-group-form label span,
.camera-group-item label span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.camera-group-list {
  display: grid;
  gap: 8px;
}

.camera-group-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  background: rgba(255, 255, 255, 0.026);
}

.camera-group-item label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.task-toolbar--compact {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
}

.task-toolbar__title {
  margin: 0;
  white-space: nowrap;
}

.task-toolbar__spacer {
  flex: 1 1 auto;
  min-width: 16px;
}

.task-toolbar__summary,
.task-view-switch,
.task-toolbar__primary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-toolbar--compact .task-toolbar__summary,
.task-toolbar--compact .task-toolbar__primary-actions,
.task-toolbar--compact .task-bulk-actions,
.task-toolbar--compact .task-view-switch {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.task-toolbar--compact .task-bulk-actions {
  margin-left: 0;
}

.task-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.task-select-all,
.task-select-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(55, 116, 178, 0.22);
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-select-control {
  min-height: 28px;
  padding-inline: 9px;
  font-size: 0.76rem;
}

.task-select-all input,
.task-select-control input {
  width: 15px;
  min-height: 15px;
  accent-color: #2f80ed;
}

.task-card__head-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.task-summary-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.9rem;
}

.task-summary-chip--error {
  border-color: rgba(255, 117, 109, 0.3);
  color: var(--danger);
}

.task-view-button--active {
  border-color: rgba(228, 170, 86, 0.36);
  background: rgba(228, 170, 86, 0.12);
  color: var(--amber);
}

.task-list {
  min-width: 0;
}

.task-list--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}

.task-list--table,
.task-list--grouped {
  display: block;
}

.task-card {
  height: 100%;
}

.task-card__advanced {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #6f84a3;
  font-size: 0.78rem;
  font-weight: 800;
}

.task-card__advanced span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(55, 116, 178, 0.12);
  background: rgba(239, 247, 255, 0.48);
}

.task-field-title {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.task-weekday-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.task-weekday-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 0.82rem;
}

.task-waypoint-editor {
  display: grid;
  gap: 10px;
}

.task-waypoint-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-waypoint-list {
  display: grid;
  gap: 10px;
}

.task-waypoint-card {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.028);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    opacity 0.16s ease;
}

.task-waypoint-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.task-waypoint-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-waypoint-card__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

.task-waypoint-preset-select {
  width: clamp(130px, 16vw, 176px);
  min-width: 0;
}

.task-waypoint-card__head strong {
  font-size: 0.95rem;
}

.task-waypoint-drag {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(47, 128, 237, 0.26);
  background: linear-gradient(180deg, rgba(239, 247, 255, 0.98), rgba(223, 237, 255, 0.92));
  color: #1769c2;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 18px rgba(47, 128, 237, 0.12);
  cursor: grab;
  user-select: none;
}

.task-waypoint-drag:active {
  cursor: grabbing;
}

.task-waypoint-card--dragging {
  opacity: 0.55;
  transform: scale(0.99);
}

.task-waypoint-card--drop-target {
  border-color: rgba(47, 128, 237, 0.58);
  box-shadow: inset 0 0 0 1px rgba(47, 128, 237, 0.18), 0 10px 26px rgba(47, 128, 237, 0.14);
}

.task-waypoint-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
}

.task-waypoint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.task-waypoint-grid--compact {
  grid-template-columns:
    minmax(120px, 1.08fr)
    minmax(76px, 0.72fr)
    minmax(76px, 0.72fr)
    minmax(76px, 0.72fr)
    minmax(92px, 0.76fr)
    minmax(92px, 0.76fr)
    minmax(150px, 1.22fr);
  align-items: end;
}

.task-waypoint-grid--inspection {
  grid-template-columns: minmax(210px, 0.82fr) minmax(0, 1.38fr);
  align-items: start;
}

.task-waypoint-grid--inspection > .task-time-window-editor {
  grid-column: 1 / -1;
}

.task-waypoint-field--select,
.task-waypoint-detail-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  position: relative;
}

.task-waypoint-picker {
  position: relative;
  min-width: 0;
}

.task-waypoint-picker__trigger {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 34px 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(138, 184, 238, 0.4);
  background: rgba(255, 255, 255, 0.98);
  color: #12263f;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.task-waypoint-picker__trigger::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5b7eb2;
  border-bottom: 2px solid #5b7eb2;
  transform: translateY(-62%) rotate(45deg);
  transition: transform 0.16s ease;
}

.task-waypoint-picker.is-open .task-waypoint-picker__trigger {
  border-color: rgba(47, 128, 237, 0.48);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.12);
}

.task-waypoint-picker.is-open .task-waypoint-picker__trigger::after {
  transform: translateY(-28%) rotate(225deg);
}

.task-waypoint-picker--selected .task-waypoint-picker__trigger {
  background: rgba(246, 250, 255, 0.98);
}

.task-waypoint-picker--disabled .task-waypoint-picker__trigger {
  cursor: not-allowed;
  opacity: 0.78;
}

.task-waypoint-picker__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  color: #6d7f9e;
  white-space: nowrap;
}

.task-waypoint-picker__trigger strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 800;
}

.task-waypoint-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 42;
  min-width: 100%;
  width: min(320px, calc(100vw - 56px));
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(117, 161, 223, 0.34);
  background: rgba(255, 255, 255, 0.995);
  box-shadow: 0 20px 44px rgba(25, 73, 128, 0.18);
}

.task-waypoint-picker__panel-head {
  margin-bottom: 6px;
  color: #6d7f9e;
  font-size: 0.7rem;
  font-weight: 800;
}

.task-waypoint-picker__options {
  display: grid;
  gap: 6px;
  max-height: 242px;
  overflow: auto;
}

.task-waypoint-picker__option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(243, 248, 255, 0.92);
  color: #173353;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.task-waypoint-picker__option:hover,
.task-waypoint-picker__option:focus-visible {
  border-color: rgba(47, 128, 237, 0.3);
  background: rgba(234, 244, 255, 0.98);
  outline: none;
}

.task-waypoint-picker__option.is-active {
  border-color: rgba(47, 128, 237, 0.4);
  background: rgba(228, 240, 255, 0.98);
}

.task-waypoint-picker__option strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
}

.task-waypoint-picker__option em {
  color: #5d7391;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.task-waypoint-readonly {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 0;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(47, 128, 237, 0.16);
  background: rgba(47, 128, 237, 0.045);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.task-waypoint-readonly__title,
.task-waypoint-readonly__facts {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}

.task-waypoint-readonly__title strong {
  color: var(--text);
  white-space: nowrap;
}

.task-waypoint-readonly__title em {
  min-width: 0;
  color: #5a6e87;
  font-style: normal;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-waypoint-readonly__facts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(47, 128, 237, 0.06);
  color: #1a2c42;
  font-size: 0.75rem;
  font-weight: 800;
}

.task-waypoint-readonly__facts b {
  color: #1769c2;
}

.task-waypoint-readonly--empty {
  color: rgba(111, 132, 163, 0.86);
  border-style: dashed;
}

.task-waypoint-time-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.task-waypoint-field--select > span,
.task-waypoint-inline-label,
.task-time-flag,
.task-waypoint-duration-label {
  color: #61728e;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.task-waypoint-field-head,
.task-waypoint-duration-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 18px;
}

.task-time-flag {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 18px;
}

.task-time-flag input {
  flex: 0 0 16px;
  width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: #2f80ed;
}

.task-waypoint-time-input {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.task-waypoint-duration-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.task-waypoint-duration-label > em {
  font-style: normal;
}

.task-time-window-editor {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.task-time-window-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
}

.task-time-window-editor__head > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-time-window-editor__head strong {
  color: #263c58;
  font-size: 0.76rem;
}

.task-time-window-editor__head span {
  color: #70829c;
  font-size: 0.7rem;
  font-weight: 750;
}

.task-time-window-add {
  min-height: 28px;
  padding: 3px 9px;
  font-size: 0.72rem;
}

.task-time-window-list {
  display: grid;
  gap: 6px;
}

.task-time-window-row {
  display: grid;
  grid-template-columns: 24px minmax(118px, 1fr) 16px minmax(118px, 1fr) minmax(126px, 0.92fr) 30px;
  align-items: end;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(111, 160, 218, 0.24);
  border-radius: 10px;
  background: rgba(241, 248, 255, 0.72);
}

.task-time-window-row__number {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(47, 128, 237, 0.1);
  color: #2273d1;
  font-size: 0.7rem;
  font-weight: 850;
}

.task-time-window-control {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-time-window-control__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.task-time-window-control__head > span,
.task-time-window-control > span:first-child,
.task-time-window-include span {
  color: #61728e;
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.2;
  white-space: nowrap;
}

.task-time-window-control input {
  width: 100%;
  min-width: 0;
}

.task-time-window-include {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.task-time-window-include input {
  flex: 0 0 15px;
  width: 15px;
  max-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  accent-color: #2f80ed;
  box-shadow: none;
}

.task-time-window-row__arrow {
  align-self: center;
  color: #6f88a8;
  font-size: 0.86rem;
  font-weight: 850;
}

.task-time-window-duration-input {
  display: grid;
  grid-template-columns: minmax(58px, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.task-time-window-duration-input em {
  color: #61728e;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.task-time-window-remove {
  width: 28px;
  height: 28px;
  align-self: center;
  padding: 0;
  border-radius: 999px;
  color: #b13f3f;
  background: #fffafa;
  border-color: rgba(201, 70, 70, 0.28);
  line-height: 1;
}

.task-time-window-remove:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.task-waypoint-field--remark {
  min-width: 0;
}

.task-status-chip {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0;
}

.task-status-chip--waiting {
  border-color: rgba(47, 128, 237, 0.26);
  background: rgba(47, 128, 237, 0.08);
  color: #1769c2;
}

.task-status-chip--pending {
  border-color: rgba(228, 170, 86, 0.34);
  background: rgba(228, 170, 86, 0.1);
  color: #b56b16;
}

.task-status-chip--active {
  border-color: rgba(26, 150, 130, 0.34);
  background: rgba(26, 150, 130, 0.11);
  color: #0f8d78;
}

.task-status-chip--disabled,
.task-status-chip--unknown {
  border-color: rgba(113, 132, 158, 0.24);
  background: rgba(113, 132, 158, 0.08);
  color: #62738a;
}

.task-status-chip--error {
  border-color: rgba(255, 117, 109, 0.34);
  background: rgba(255, 117, 109, 0.1);
  color: var(--danger);
}

.task-waypoint-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  background: rgba(239, 247, 255, 0.56);
}

.task-waypoint-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #48617d;
  font-size: 0.78rem;
  font-weight: 800;
}

.task-waypoint-summary__head strong {
  color: #1769c2;
  font-size: 0.78rem;
}

.task-waypoint-summary__list {
  display: grid;
  gap: 7px;
}

.task-waypoint-summary__row {
  display: grid;
  grid-template-columns: minmax(110px, 0.76fr) minmax(132px, 0.94fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 255, 0.74));
  box-shadow: inset 3px 0 0 rgba(47, 128, 237, 0.42);
}

.task-waypoint-summary__index,
.task-waypoint-summary__detail {
  min-width: 0;
}

.task-waypoint-summary__index {
  display: grid;
  gap: 3px;
}

.task-waypoint-summary__index strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-waypoint-summary__index span {
  color: #6f84a3;
  font-size: 0.76rem;
  font-weight: 800;
}

.task-waypoint-summary__ptz {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.task-waypoint-summary__ptz span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(47, 128, 237, 0.18);
  background: rgba(47, 128, 237, 0.06);
  color: #1a2c42;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.task-waypoint-summary__ptz b {
  color: #1769c2;
  font-weight: 900;
}

.task-waypoint-summary__detail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #5f7189;
  font-size: 0.8rem;
  line-height: 1.35;
}

.task-waypoint-summary__action {
  color: #0f766e;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.task-waypoint-summary__detail em {
  min-width: 0;
  max-width: 100%;
  color: #48617d;
  font-style: normal;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .task-waypoint-summary__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.task-table-wrap {
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.task-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.task-table th,
.task-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  vertical-align: top;
}

.task-table th {
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-table__header-content {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #3e5876;
  letter-spacing: 0.04em;
  text-transform: none;
}

.task-table__header-content svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #2f80ed;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edge-logs-modal .config-modal__panel {
  padding: 12px 14px;
}

.edge-logs-modal .config-modal__head > div:first-child {
  min-width: 0;
}

.edge-logs-modal #edge-logs-subtitle {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-logs-modal .config-modal__body {
  margin-top: 8px;
}

.edge-logs-modal .task-log {
  margin-top: 0;
}

.task-table tbody tr:last-child td {
  border-bottom: none;
}

.task-table__row--active {
  background: rgba(140, 224, 197, 0.07);
}

.task-table__index-cell {
  width: 88px;
  white-space: nowrap;
}

.task-table__index-control {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.task-table__index-control .task-select-control--icon-only {
  flex: 0 0 18px;
  width: 18px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-table__index-control .task-select-control--icon-only input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.task-table__row-number {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 128, 237, 0.28);
  border-radius: 999px;
  background: rgba(47, 128, 237, 0.08);
  color: #176fd1;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.task-cell__title {
  color: var(--text);
  font-weight: 700;
}

.task-cell__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.task-inline-log {
  display: grid;
  gap: 3px;
}

.task-inline-log strong {
  color: var(--text);
  font-size: 0.8rem;
}

.task-inline-log span,
.task-inline-empty {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.task-actions-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.task-group-list {
  display: grid;
  gap: 14px;
}

.task-group {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.task-group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.task-group__head strong {
  display: block;
  font-size: 1rem;
}

.task-group__head span,
.task-group__meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.task-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.task-group__item {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.task-group__item--active {
  border-color: rgba(140, 224, 197, 0.32);
  background: rgba(140, 224, 197, 0.08);
}

.task-group__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.task-group__item-head strong {
  font-size: 0.95rem;
}

.task-group__item-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.profile-card {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.profile-card--active {
  border-color: rgba(140, 224, 197, 0.44);
  background: linear-gradient(180deg, rgba(140, 224, 197, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(140, 224, 197, 0.16),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

.profile-card--active::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mint), rgba(140, 224, 197, 0.3));
}

.profile-card--compact {
  padding: 12px;
}

.profile-card--compact .profile-card__meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 8px;
}

.profile-card--compact .profile-card__actions {
  margin-top: 10px;
}

.profile-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.profile-card__head > div:first-child {
  min-width: 0;
}

.profile-card__title-row,
.camera-table__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-card__head h3 {
  margin: 0;
  font-size: 1rem;
}

.profile-card__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.profile-card__device {
  display: block;
  max-width: 100%;
  margin-top: 5px;
  color: #48617d;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card__device--empty {
  color: #8a98aa;
  font-weight: 600;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  color: var(--amber);
  font-size: 0.74rem;
  white-space: nowrap;
}

.profile-chip--current {
  border-color: rgba(140, 224, 197, 0.28);
  background: rgba(140, 224, 197, 0.1);
  color: var(--mint);
}

.profile-chip--saved {
  border-color: rgba(228, 170, 86, 0.25);
  background: rgba(228, 170, 86, 0.08);
  color: var(--amber);
}

.profile-chip--ok {
  border-color: rgba(140, 224, 197, 0.28);
  background: rgba(140, 224, 197, 0.1);
  color: var(--mint);
}

.profile-chip--warn {
  border-color: rgba(228, 170, 86, 0.25);
  background: rgba(228, 170, 86, 0.08);
  color: var(--amber);
}

.profile-chip--error {
  border-color: rgba(255, 117, 109, 0.3);
  background: rgba(255, 117, 109, 0.08);
  color: var(--danger);
}

.profile-chip--neutral {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.profile-chip--edge {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.profile-chip {
  appearance: none;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  margin: 0;
  cursor: pointer;
}

.camera-connectivity-button:hover,
.camera-connectivity-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.profile-current-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(140, 224, 197, 0.32);
  background: rgba(140, 224, 197, 0.12);
  color: var(--mint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-card__chips {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.8rem;
}

.profile-card__meta-output {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.profile-card__edge-binding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  color: #31506f;
  background: rgba(47, 128, 237, 0.07);
  border: 1px solid rgba(47, 128, 237, 0.16);
  border-radius: 8px;
}

.profile-card__edge-binding--bound {
  background: rgba(22, 133, 111, 0.08);
  border-color: rgba(22, 133, 111, 0.18);
}

.profile-card__edge-binding--empty {
  background: rgba(101, 116, 138, 0.06);
  border-color: rgba(101, 116, 138, 0.14);
}

.profile-card__edge-binding strong,
.profile-card__edge-binding span,
.profile-card__edge-binding em {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card__edge-binding strong {
  color: #0f766e;
}

.profile-card__edge-binding--empty strong {
  color: #65748a;
}

.profile-card__edge-binding em {
  color: var(--muted);
  font-style: normal;
}

.camera-table {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    rgba(255, 255, 255, 0.024);
}

.camera-table__header,
.camera-table__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.08fr) minmax(190px, 1fr) minmax(180px, 0.96fr) minmax(170px, 0.9fr) minmax(200px, 1fr) minmax(150px, 0.72fr) minmax(210px, 0.9fr);
  gap: 12px;
  padding: 12px 14px;
}

.camera-table__header {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.camera-table__row {
  align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.camera-table__row:not(.camera-table__row--active) {
  background: rgba(255, 255, 255, 0.026);
}

.camera-table__row:not(.camera-table__row--active):nth-of-type(even) {
  background: rgba(47, 128, 237, 0.055);
}

.camera-table__row:not(.camera-table__row--active):hover {
  background: rgba(228, 170, 86, 0.06);
}

.camera-table__row:last-child {
  border-bottom: none;
}

.camera-table__row--active {
  background: linear-gradient(90deg, rgba(140, 224, 197, 0.14), rgba(255, 255, 255, 0.02) 22%, rgba(255, 255, 255, 0.02));
  box-shadow: inset 4px 0 0 rgba(140, 224, 197, 0.72);
}

.camera-table__cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.camera-table__cell strong,
.camera-table__cell span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.camera-table__cell strong {
  color: var(--text);
  font-size: 0.88rem;
}

.camera-table__cell span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.camera-table__cell--actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.camera-table__cell--status .profile-chip {
  display: inline-flex;
  width: fit-content;
}

.camera-table__cell--edge .profile-chip {
  display: inline-flex;
  width: fit-content;
}

.camera-ledger-list {
  display: grid;
  gap: 10px;
}

.camera-ledger-list__item {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(420px, 1.5fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(180, 206, 235, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(50, 104, 160, 0.08);
}

.camera-ledger-list__item--active {
  border-color: rgba(30, 150, 130, 0.42);
  background: linear-gradient(90deg, rgba(226, 250, 243, 0.94), rgba(255, 255, 255, 0.88));
  box-shadow: inset 4px 0 0 rgba(30, 150, 130, 0.74), 0 14px 32px rgba(50, 104, 160, 0.1);
}

.camera-ledger-list__main,
.camera-ledger-list__detail {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.camera-ledger-list__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.camera-ledger-list__title-row strong {
  min-width: 0;
  color: #0f2a44;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.camera-ledger-list__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

.camera-ledger-list__facts .profile-card__device {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.camera-ledger-list__details {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(140px, 0.9fr) minmax(140px, 0.95fr) minmax(150px, 0.95fr);
  gap: 12px;
  min-width: 0;
}

.camera-ledger-list__detail::before {
  content: attr(data-label);
  color: #6a7d95;
  font-size: 0.72rem;
  font-weight: 700;
}

.camera-ledger-list__detail strong,
.camera-ledger-list__detail span {
  display: block;
  min-width: 0;
  color: #536983;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.camera-ledger-list__detail strong {
  color: #162a40;
  font-size: 0.84rem;
}

.camera-ledger-list__detail .profile-chip {
  display: inline-flex;
  width: fit-content;
}

.camera-ledger-list__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 190px;
}

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  max-height: 470px;
  overflow: auto;
}

.event-list--modal {
  max-height: min(66vh, 720px);
  padding-right: 4px;
}

.event-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.event-item strong {
  display: block;
  font-size: 0.86rem;
}

.event-item span,
.event-item time {
  color: var(--muted);
  font-size: 0.74rem;
}

.event-item--ok {
  border-color: rgba(140, 224, 197, 0.22);
}

.event-item--warn {
  border-color: rgba(228, 170, 86, 0.22);
}

.event-item--error {
  border-color: rgba(255, 117, 109, 0.22);
}

.masthead--gallery {
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, 0.92fr);
}

.headline-metrics--gallery .metric-card strong {
  font-size: 1.22rem;
}

.gallery-layout {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.gallery-panel {
  min-width: 0;
}

.gallery-filter-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.gallery-filter-form label {
  display: grid;
  gap: 6px;
}

.gallery-filter-form__actions {
  display: flex;
  align-items: end;
  gap: 8px;
  grid-column: span 2;
}

.gallery-pagination {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.gallery-pagination--head {
  justify-content: flex-end;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.gallery-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 24%),
    rgba(255, 255, 255, 0.024);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.gallery-card:hover {
  transform: translateY(-2px);
  border-color: rgba(228, 170, 86, 0.28);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.gallery-card--selected {
  border-color: rgba(228, 170, 86, 0.4);
  box-shadow: 0 16px 34px rgba(228, 170, 86, 0.12);
}

.gallery-card__media {
  aspect-ratio: 16 / 9;
  width: 100%;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

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

.gallery-card__body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.gallery-card__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gallery-card__delete {
  min-height: 28px;
  padding-inline: 10px;
}

.gallery-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gallery-card__quick-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  margin-left: auto;
}

.gallery-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  cursor: pointer;
}

.gallery-check__input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--amber);
}

.gallery-check__input:disabled + .gallery-check__label {
  opacity: 0.5;
}

.gallery-check__label {
  user-select: none;
}

.gallery-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(228, 170, 86, 0.22);
  background: rgba(228, 170, 86, 0.1);
  color: var(--amber);
  font-size: 0.72rem;
  white-space: nowrap;
}

.gallery-pill--muted {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.gallery-pill--camera {
  border-color: rgba(140, 224, 197, 0.28);
  background: rgba(140, 224, 197, 0.1);
  color: var(--mint);
}

.gallery-pill--ptz {
  border-color: rgba(47, 128, 237, 0.2);
  background: rgba(47, 128, 237, 0.08);
  color: #2f80ed;
}

.gallery-card__title {
  display: block;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-card__meta,
.gallery-card__ptz,
.gallery-card__path,
.gallery-card__footer {
  color: var(--muted);
  font-size: 0.76rem;
}

.gallery-card__path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-card__capture-meta {
  display: flex;
  gap: 6px 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.gallery-card__capture-meta::-webkit-scrollbar {
  display: none;
}

.gallery-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gallery-card__footer a {
  color: var(--text);
  text-decoration: none;
}

.gallery-card__footer a:hover {
  color: var(--amber);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

@media (max-width: 1480px) {
  .dashboard-page .control-grid {
    gap: 16px;
  }

  .dashboard-page .topbar__statusline {
    grid-template-columns: minmax(0, 1.22fr) repeat(4, minmax(124px, 1fr));
  }

  .headline-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .control-grid {
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-areas:
      "config preview"
      "control preview";
    min-height: auto;
    align-items: start;
  }

  .sidebar-stack,
  .panel--status,
  .panel--control,
  .panel--preview,
  .control-stack,
  .preview-frame {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 1120px) {
  .dashboard-page .topbar {
    grid-template-columns: 1fr;
  }

  .dashboard-page .topbar__actions {
    justify-items: start;
  }

  .dashboard-page .topbar__switchbar,
  .dashboard-page .user-bar {
    width: auto;
    justify-content: flex-start;
  }

  .dashboard-page .topbar__title-row {
    flex-wrap: wrap;
  }

  .dashboard-page .topbar__title,
  .dashboard-page .topbar__subtitle,
  .dashboard-page .panel h2,
  .dashboard-page .subpanel h3,
  .dashboard-page .panel__caption,
  .dashboard-page .subpanel__caption,
  .dashboard-page .range-summary,
  .dashboard-page .mini-status,
  .dashboard-page .preview-empty p {
    white-space: normal;
  }

  .dashboard-page .dashboard-statusbar::before {
    display: none;
  }

  .dashboard-page .topbar__subtitle {
    max-width: none;
  }

  .dashboard-page .panel__caption,
  .dashboard-page .subpanel__caption {
    max-width: none;
  }

  .dashboard-page .preview-meta {
    grid-template-columns: 1fr;
  }

  .topbar,
  .masthead,
  .profiles-layout,
  .tasks-layout,
  .masthead--gallery {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gallery-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-page--images .gallery-filter-panel .gallery-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-pagination--head {
    justify-content: flex-start;
  }

  .control-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "config"
      "control"
      "preview";
    min-height: auto;
    align-items: start;
  }

  .alert-strip--topbar {
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }

  .topbar__title-row {
    align-items: start;
    gap: 8px;
  }

  .topbar__switchbar {
    justify-content: flex-start;
  }

  .topbar__statusline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar__statusline .alert-strip--statusline {
    max-width: 100%;
  }

  .alert-strip--topbar {
    flex-basis: 100%;
    gap: 6px 10px;
  }

  .topbar__section {
    font-size: 0.72rem;
  }

  .form-grid--readonly {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-stack,
  .panel--config,
  .panel--status,
  .panel--control,
  .panel--preview,
  .control-stack,
  .preview-frame {
    height: auto;
    min-height: 0;
  }

  .preview-frame {
    min-height: 240px;
  }

  .sidebar-stack,
  .control-stack,
  .panel--preview {
    grid-template-rows: auto;
  }

  .pad-and-sliders,
  .inline-form,
  .status-board {
    grid-template-columns: 1fr;
  }

  .config-card__camera-main,
  .active-camera-picker-item__head,
  .active-camera-picker-item__foot {
    align-items: flex-start;
  }

  .camera-table__header,
  .camera-table__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camera-table__cell--actions {
    grid-column: 1 / -1;
  }

  .range-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-step-control {
    grid-template-columns: repeat(3, minmax(118px, 136px));
    justify-content: start;
  }

  .range-grid__head {
    display: none;
  }

  .range-grid__label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .dashboard-page .topbar__section {
    padding-left: 0;
    border-left: 0;
  }

  .dashboard-page .topbar__switchbar,
  .dashboard-page .user-bar {
    width: 100%;
  }

  .dashboard-page .meta-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-page .meta-line strong {
    max-width: 100%;
    text-align: left;
  }

  .dashboard-page .subpanel__hint {
    width: fit-content;
  }

  .app-shell {
    width: min(100vw - 12px, 100%);
    padding-top: 18px;
  }

  .topbar__statusline {
    grid-template-columns: 1fr;
  }

  .headline-metrics,
  .form-grid,
  .form-grid--scan,
  .gallery-filter-form,
  .gallery-strip,
  .gallery-grid,
  .profile-card__meta,
  .profiles-layout,
  .tasks-layout,
  .camera-list--cards,
  .camera-list--compact,
  .task-waypoint-grid,
  .status-board {
    grid-template-columns: 1fr;
  }

  .app-page--images .gallery-filter-panel .gallery-filter-form {
    grid-template-columns: 1fr;
  }

  .camera-modal__panel .form-grid,
  .camera-modal__panel .inline-form {
    grid-template-columns: 1fr;
  }

  .camera-modal__panel .camera-field--text,
  .camera-modal__panel .camera-field--number,
  .camera-modal__panel .camera-field--output {
    grid-column: 1 / -1;
  }

  .app-page--images .gallery-filter-panel .gallery-filter-form__actions {
    grid-column: 1 / -1;
  }

  .form-grid--readonly > .helper-block {
    grid-template-columns: 1fr;
  }

  .alert-strip:not(.alert-strip--topbar),
  .log-modal__head,
  .log-modal__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .range-grid {
    grid-template-columns: 1fr;
  }

  .manual-step-control {
    grid-template-columns: 1fr;
  }

  .page-nav,
  .topbar__switchbar,
  .panel__tools,
  .task-toolbar,
  .task-toolbar__summary,
  .task-toolbar__primary-actions,
  .task-view-switch,
  .camera-toolbar,
  .camera-toolbar__group,
  .view-switch,
  .form-actions,
  .zoom-row,
  .action-row,
  .profile-card__actions,
  .camera-table__cell--actions,
  .task-actions-inline,
  .config-card__actions,
  .gallery-filter-form__actions,
  .gallery-pagination,
  .gallery-card__tools {
    flex-direction: column;
  }

  .config-card__switch-controls,
  .config-card__actions {
    grid-template-columns: 1fr;
  }

  .active-camera-picker-item__head,
  .active-camera-picker-item__foot {
    flex-direction: column;
  }

  .task-list--cards,
  .task-group__grid {
    grid-template-columns: 1fr;
  }

  .toolbar-field {
    min-width: 100%;
  }

  .toolbar-field select,
  .toolbar-select,
  .view-switch__button {
    width: 100%;
  }

  .camera-table {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: none;
    background: transparent;
  }

  .camera-table__header {
    display: none;
  }

  .camera-table__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
  }

  .camera-table__cell {
    padding: 0;
  }

  .camera-table__cell::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .camera-table__cell--actions {
    grid-column: auto;
  }


  .camera-ledger-list__item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .camera-ledger-list__details {
    grid-template-columns: 1fr;
  }

  .camera-ledger-list__actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .task-group__head {
    flex-direction: column;
  }

  .preview-frame {
    min-height: 260px;
  }

  .image-modal {
    width: fit-content;
    max-width: calc(100vw - 12px);
  }

  .image-modal__panel {
    max-width: calc(100vw - 12px);
    padding: 54px 10px 10px;
    border-radius: 16px;
  }

  .image-modal__frame {
    min-width: min(320px, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    min-height: 0;
    padding: 8px;
  }

  .image-modal__frame img {
    max-width: calc(100vw - 60px);
    max-height: min(72vh, 520px);
  }

  .image-modal__nav {
    width: 34px;
    height: 52px;
  }

  .image-modal__nav--prev {
    left: 8px;
  }

  .image-modal__nav--next {
    right: 8px;
  }

  .image-modal__meta {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-image-modal__controls {
    right: 70px;
    left: 14px;
    justify-content: flex-start;
  }

  .analysis-image-modal__view {
    padding-inline: 10px;
  }

  .image-modal__open {
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  .log-modal {
    width: min(100vw - 12px, 100%);
  }

.log-modal__panel {
    padding: 14px;
    border-radius: 22px;
  }
}

body.dashboard-page {
  overflow: hidden;
  font-size: 14px;
}

.dashboard-page .app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  width: min(1720px, calc(100vw - 40px));
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 14px 0 12px;
  overflow: hidden;
}

.dashboard-page .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) auto;
  align-items: end;
  gap: 14px 20px;
  min-height: 0;
  margin-bottom: 0;
}

.dashboard-page .topbar__brand {
  gap: 10px;
}

.dashboard-page .topbar__kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(228, 170, 86, 0.22);
  background: rgba(228, 170, 86, 0.08);
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dashboard-page .topbar__title-row {
  align-items: end;
  gap: 10px 14px;
  flex-wrap: wrap;
}

.dashboard-page .topbar__title {
  max-width: 14ch;
  font-size: clamp(2.4rem, 3.9vw, 4.15rem);
  line-height: 0.92;
  letter-spacing: 0.05em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page .topbar__title--single-line {
  max-width: none;
  font-size: clamp(1.9rem, 2.7vw, 3.3rem);
  white-space: nowrap;
}

.dashboard-page .topbar__title--single-line.topbar__title--system {
  font-size: clamp(1.38rem, 1.95vw, 2rem);
  line-height: 1.04;
}

.dashboard-page .topbar__section {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.dashboard-page .topbar__subtitle {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page .topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.dashboard-page .topbar__switchbar {
  flex: 0 0 auto;
  min-width: auto;
  justify-content: flex-end;
}

.dashboard-page .page-nav {
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  flex-wrap: nowrap;
}

.dashboard-page .page-nav__link {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.84rem;
}

.dashboard-page .user-bar {
  flex: 0 0 auto;
  gap: 10px;
  padding: 5px;
}

.dashboard-page .dashboard-main {
  display: grid;
  gap: 0;
  min-height: 0;
  height: auto;
}

.dashboard-page .dashboard-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(500px, 1.12fr) minmax(320px, 0.86fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.dashboard-page .dashboard-column {
  min-height: 0;
}

.dashboard-page .dashboard-column--left {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.dashboard-page .stage-brief,
.dashboard-page .stage-preview,
.dashboard-page .panel--status,
.dashboard-page .panel--control {
  min-height: 0;
}

.dashboard-page .stage-preview,
.dashboard-page .panel--status,
.dashboard-page .panel--control {
  height: 100%;
}

.dashboard-page .stage-brief {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(228, 170, 86, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    var(--panel);
}

.dashboard-page .stage-brief__copy {
  display: grid;
  gap: 8px;
}

.dashboard-page .dashboard-statusbar {
  margin: 0;
  min-height: 0;
}

.dashboard-page .dashboard-statusbar::before {
  inset: -8px 0 auto;
  height: 76px;
}

.dashboard-page .topbar__statusline {
  grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-page .topbar__statusline .alert-strip--statusline,
.dashboard-page .topbar-status-card {
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 20px;
}

.dashboard-page .topbar__statusline .alert-strip--statusline {
  align-items: flex-start;
}

.dashboard-page .topbar__statusline .alert-strip--statusline .alert-strip__text {
  gap: 8px;
}

.dashboard-page .topbar__statusline .alert-strip--statusline .alert-strip__message,
.dashboard-page .topbar-status-card > strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page .topbar__statusline .alert-strip--statusline .alert-strip__message {
  font-size: 0.9rem;
  line-height: 1.35;
}

.dashboard-page .topbar-status-card {
  align-content: start;
}

.dashboard-page .topbar-status-card > span {
  font-size: 0.76rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.dashboard-page .topbar-status-card > strong {
  margin-top: 4px;
  font-size: 1.16rem;
  line-height: 1.12;
}

.dashboard-page .stage-camera {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.dashboard-page .stage-camera__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-page .stage-camera__copy {
  display: grid;
  gap: 2px;
  max-width: 40rem;
}

.dashboard-page .stage-camera__copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.02;
  letter-spacing: 0.04em;
}

.dashboard-page .stage-camera__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.dashboard-page .config-card__camera {
  gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
}

.dashboard-page .config-card__camera-main {
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.dashboard-page .config-card__camera-link {
  font-size: clamp(1.12rem, 1.45vw, 1.42rem);
  line-height: 1.06;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page .config-card__camera-meta {
  font-size: 0.74rem;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page .stage-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-self: stretch;
  padding: 14px 16px;
  border-radius: 26px;
  overflow: hidden;
}

.dashboard-page .stage-preview .panel__head {
  margin-bottom: 0;
  padding-bottom: 8px;
}

.dashboard-page .stage-preview .preview-frame {
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: 16px;
  border-radius: 20px;
}

.dashboard-page .stage-preview .preview-frame img {
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}

.dashboard-page .stage-preview .preview-empty {
  padding: 16px;
}

.dashboard-page .stage-preview .preview-empty span {
  font-size: clamp(2.7rem, 4.2vw, 3.8rem);
}

.dashboard-page .stage-preview .preview-empty p {
  max-width: 20rem;
  margin: 0;
  white-space: normal;
  line-height: 1.45;
}

.dashboard-page .preview-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

.dashboard-page .meta-line {
  min-height: 56px;
  gap: 4px;
}

.dashboard-page .meta-line strong {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.dashboard-page .panel--status {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 14px 16px;
  border-radius: 26px;
  overflow: hidden;
}

.dashboard-page .panel--control {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 14px 16px;
  border-radius: 26px;
  overflow: hidden;
}

.dashboard-page .panel h2,
.dashboard-page .subpanel h3,
.dashboard-page .panel__caption,
.dashboard-page .subpanel__caption,
.dashboard-page .range-summary,
.dashboard-page .mini-status,
.dashboard-page .readout strong,
.dashboard-page .readout__meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page .panel h2 {
  font-size: 1.24rem;
  line-height: 1.04;
}

.dashboard-page .subpanel h3 {
  font-size: 1.02rem;
  line-height: 1.08;
}

.dashboard-page .panel__caption,
.dashboard-page .subpanel__caption {
  font-size: 0.74rem;
  line-height: 1.35;
}

.dashboard-page .readout {
  min-height: 82px;
  padding: 10px 12px;
  border-radius: 16px;
}

.dashboard-page .readout strong {
  font-size: 1.12rem;
}

.dashboard-page .readout__meta {
  line-height: 1.28;
}

.dashboard-page .manual-step-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-page .manual-step-control label {
  min-height: 78px;
  padding: 8px 9px 10px;
}

.dashboard-page .manual-step-control span {
  white-space: normal;
  line-height: 1.2;
}

.dashboard-page .range-grid,
.dashboard-page .form-grid--scan,
.dashboard-page .action-row {
  gap: 6px;
}

.dashboard-page .mini-status,
.dashboard-page .range-summary {
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 0.74rem;
  line-height: 1.35;
}

.dashboard-page .subpanel {
  padding: 12px;
  border-radius: 18px;
}

.dashboard-page .subpanel__head {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.dashboard-page input,
.dashboard-page select {
  min-height: 36px;
  border-radius: 12px;
}

.dashboard-page .control-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  height: 100%;
}

.dashboard-page .control-stack > .subpanel:last-child {
  min-height: 0;
  overflow: auto;
}

@media (max-width: 1480px) {
  .dashboard-page .app-shell {
    width: min(100vw - 28px, 100%);
    padding: 12px 0 10px;
  }

  .dashboard-page .dashboard-workbench {
    grid-template-columns: minmax(250px, 0.68fr) minmax(440px, 1.06fr) minmax(290px, 0.78fr);
  }

  .dashboard-page .topbar__title {
    max-width: 16ch;
    font-size: clamp(2.15rem, 3.7vw, 3.5rem);
  }

  .dashboard-page .topbar__title--single-line {
    max-width: none;
    font-size: clamp(1.72rem, 2.45vw, 2.9rem);
  }

  .dashboard-page .stage-preview .preview-empty span {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
  }
}

@media (max-width: 1120px) {
  body.dashboard-page {
    overflow: auto;
  }

  .dashboard-page .app-shell {
    display: block;
    width: min(100vw - 20px, 100%);
    height: auto;
    min-height: 0;
    padding-top: 18px;
    overflow: visible;
  }

  .dashboard-page .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dashboard-page .topbar__actions {
    justify-items: start;
  }

  .dashboard-page .topbar__switchbar,
  .dashboard-page .user-bar {
    width: auto;
    justify-content: flex-start;
  }

  .dashboard-page .dashboard-workbench,
  .dashboard-page .dashboard-column--left {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .dashboard-page .topbar__statusline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-page .topbar__statusline .alert-strip--statusline {
    grid-column: 1 / -1;
    min-height: 92px;
  }

  .dashboard-page .stage-preview .preview-frame {
    min-height: 320px;
  }

  .dashboard-page .status-board--sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-page {
    font-size: 13px;
  }

  .dashboard-page .topbar__title {
    max-width: none;
    font-size: clamp(1.92rem, 10vw, 2.7rem);
  }

  .dashboard-page .topbar__title--single-line {
    font-size: clamp(1.12rem, 4.2vw, 1.7rem);
    white-space: nowrap;
  }

  .dashboard-page .page-nav,
  .dashboard-page .user-bar {
    width: 100%;
  }

  .dashboard-page .page-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 24px;
  }

  .dashboard-page .page-nav__link {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }

  .dashboard-page .stage-brief,
  .dashboard-page .stage-preview,
  .dashboard-page .panel--status,
  .dashboard-page .panel--control {
    padding: 16px;
    border-radius: 24px;
  }

  .dashboard-page .stage-camera {
    padding: 14px;
    border-radius: 20px;
  }

  .dashboard-page .manual-step-control {
    grid-template-columns: 1fr;
  }

  .dashboard-page .status-board--sidebar,
  .dashboard-page .preview-meta {
    grid-template-columns: 1fr;
  }

  .dashboard-page .stage-preview .preview-frame {
    min-height: 260px;
    padding: 18px;
  }

  .dashboard-page .stage-preview .preview-frame img {
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
  }
}

body.app-page:not(.dashboard-page):not(.app-page--login) {
  overflow: auto;
  font-size: 14px;
}

.app-shell--section {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  width: min(1720px, calc(100vw - 32px));
  padding: 20px 0 32px;
}

.workspace-stage {
  position: relative;
  min-width: 0;
  margin: 0;
  align-self: start;
  scroll-margin-top: 20px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  min-height: 0;
  margin-bottom: 0;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__brand {
  display: grid;
  gap: 10px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(228, 170, 86, 0.22);
  background: rgba(228, 170, 86, 0.08);
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__title {
  max-width: 14ch;
  font-size: clamp(2.15rem, 3.85vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: 0.05em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__section {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__subtitle {
  max-width: 74ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.68;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__switchbar {
  flex: 0 0 auto;
  min-width: auto;
  justify-content: flex-end;
}

.app-page:not(.dashboard-page):not(.app-page--login) .page-nav {
  gap: 10px;
  padding: 8px;
  flex-wrap: nowrap;
}

.app-page:not(.dashboard-page):not(.app-page--login) .page-nav__link {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.84rem;
}

.app-page:not(.dashboard-page):not(.app-page--login) .user-bar {
  flex: 0 0 auto;
  gap: 10px;
  padding: 5px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .dashboard-statusbar {
  margin: 0;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline {
  grid-template-columns: minmax(0, 1.65fr) repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline .alert-strip--statusline,
.app-page:not(.dashboard-page):not(.app-page--login) .topbar-status-card {
  min-height: 102px;
  padding: 16px 18px;
  border-radius: 24px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline .alert-strip--statusline {
  align-items: flex-start;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline .alert-strip--statusline .alert-strip__text {
  gap: 8px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline .alert-strip--statusline .alert-strip__message,
.app-page:not(.dashboard-page):not(.app-page--login) .topbar-status-card > strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.section-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 16px;
  align-items: stretch;
}

.section-hero__primary,
.section-hero__sidebar,
.panel--section {
  min-height: 0;
  padding: 20px;
  border-radius: 30px;
}

.panel--section-hero {
  background:
    radial-gradient(circle at top left, rgba(228, 170, 86, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
    var(--panel);
}

.section-hero__primary {
  display: grid;
  gap: 18px;
  align-content: start;
}

.section-hero__copy {
  display: grid;
  gap: 12px;
}

.section-hero__copy h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3.35rem);
  line-height: 0.94;
  letter-spacing: 0.05em;
}

.section-hero__text {
  max-width: 64ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.74;
}

.section-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.section-highlight {
  display: grid;
  gap: 8px;
  min-height: 104px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.section-highlight span {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-highlight strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.08;
  letter-spacing: 0.04em;
  white-space: normal;
}

.section-hero__sidebar {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  align-content: start;
}

.section-hero__sidebar .panel__head {
  margin-bottom: 0;
}

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

.overview-metric {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.overview-metric span {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.overview-metric strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.08;
  letter-spacing: 0.04em;
  white-space: normal;
}

.section-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.4fr);
  gap: 16px;
  align-items: start;
}

.section-main-layout--gallery {
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 1fr);
}

.section-main-layout .panel__head {
  margin-bottom: 14px;
}

.section-main-layout .panel__head-copy {
  display: grid;
  gap: 5px;
}

.section-sidebar {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 18px;
}

.panel--guide {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    var(--panel);
}

.guide-list {
  display: grid;
  gap: 12px;
}

.guide-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.guide-item strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.35;
}

.guide-item span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.62;
}

.app-page--cameras .camera-current-banner {
  margin-top: 0;
}

.app-page--cameras .section-hero__primary--cameras,
.app-page--tasks .section-hero__primary--tasks,
.app-page--images .section-hero--gallery .section-hero__primary--gallery {
  display: grid;
  gap: 10px;
}

.app-page--cameras .section-hero__primary--cameras .overview-metrics,
.app-page--tasks .section-hero__primary--tasks .overview-metrics,
.app-page--images .section-hero--gallery .section-hero__primary--gallery .overview-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.app-page--cameras .section-hero__primary--cameras .mini-status,
.app-page--tasks .section-hero__primary--tasks .mini-status,
.app-page--images .section-hero--gallery .section-hero__primary--gallery .mini-status {
  margin-top: 0;
}

.app-page--cameras .section-hero__sidebar--cameras,
.app-page--tasks .section-hero__sidebar--tasks,
.app-page--images .section-hero--gallery .section-hero__sidebar--gallery {
  display: grid;
  align-content: start;
  gap: 10px;
}

.app-page--cameras .section-main-layout--cameras,
.app-page--images .section-main-layout--cameras {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.app-page--cameras .camera-management-layout,
.app-page--images .camera-management-layout,
.app-page--algorithms .algorithm-management-layout {
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.camera-section-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  padding: 34px 14px;
  border: 0;
  border-right: 1px solid rgba(78, 128, 190, 0.18);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(249, 252, 255, 0.97) 0%, rgba(213, 231, 255, 0.94) 100%);
  box-shadow: 10px 0 26px rgba(46, 93, 154, 0.11);
}

.camera-section-tab {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 82px;
  padding: 10px 8px;
  color: #5f6f82;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.camera-section-tab svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-section-tab span {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.camera-section-tab:hover {
  color: #246fc8;
  background: rgba(218, 238, 255, 0.68);
}

.camera-section-tab--active,
.camera-section-tab[aria-pressed="true"] {
  color: #1673f7;
  background: rgba(185, 224, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(74, 155, 248, 0.18);
}

.camera-management-content {
  display: grid;
  min-width: 0;
}

.camera-management-content--images {
  gap: 14px;
  align-content: start;
}

.camera-section-panel {
  min-width: 0;
}

.camera-connectivity-panel .panel__head {
  align-items: center;
}

.camera-connectivity-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.camera-connectivity-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 340px));
  justify-content: start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.camera-connectivity-toolbar .toolbar-field {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

.camera-connectivity-toolbar .toolbar-field select {
  min-width: 190px;
}

.camera-connectivity-settings-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.camera-connectivity-settings-modal {
  width: min(560px, calc(100vw - 28px));
}

.camera-connectivity-settings-modal .log-modal__panel {
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
}

.camera-connectivity-settings-modal .log-modal__head {
  align-items: center;
  gap: 10px;
}

.camera-connectivity-settings-modal .log-modal__head strong {
  font-size: 0.98rem;
}

.camera-connectivity-settings-modal .log-modal__actions .ghost-button,
.camera-connectivity-settings-modal .primary-button {
  min-height: 36px;
  padding-inline: 14px;
}

.camera-connectivity-settings-form label {
  display: grid;
  gap: 5px;
}

.camera-connectivity-settings-form label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.camera-connectivity-settings-alert {
  min-height: 34px;
  margin-top: 0;
  padding: 8px 12px;
  line-height: 1.35;
}

.camera-connectivity-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.camera-connectivity-summary-card {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  background: rgba(255, 255, 255, 0.68);
}

.camera-connectivity-summary-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.camera-connectivity-summary-card strong {
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camera-connectivity-summary-card[data-tone="ok"] strong {
  color: var(--mint);
}

.camera-connectivity-summary-card[data-tone="warn"] strong {
  color: var(--amber);
}

.camera-connectivity-summary-card[data-tone="error"] strong {
  color: var(--danger);
}

.camera-connectivity-table {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  background: rgba(255, 255, 255, 0.54);
}

.camera-connectivity-table__header,
.camera-connectivity-table__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 0.92fr) minmax(190px, 1fr) minmax(160px, 0.82fr) minmax(150px, 0.76fr) minmax(170px, 0.76fr);
  gap: 10px;
  padding: 12px 14px;
}

.camera-connectivity-table__header {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(55, 116, 178, 0.14);
}

.camera-connectivity-table__row {
  align-items: start;
  border-bottom: 1px solid rgba(55, 116, 178, 0.1);
}

.camera-connectivity-table__row:last-child {
  border-bottom: 0;
}

.camera-connectivity-table__row:hover {
  background: rgba(47, 128, 237, 0.055);
}

.camera-connectivity-table__cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.camera-connectivity-table__cell strong,
.camera-connectivity-table__cell span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.camera-connectivity-table__cell strong {
  color: var(--text);
  font-size: 0.88rem;
}

.camera-connectivity-table__cell span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.camera-connectivity-table__cell .profile-chip {
  width: fit-content;
}

.camera-connectivity-table__cell--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.camera-credential-alert,
.camera-credential-form-note {
  margin-bottom: 12px;
}

.camera-credential-alert[data-tone="ok"],
.camera-credential-form-note[data-tone="ok"] {
  color: #0f8d78;
}

.camera-credential-alert[data-tone="warn"],
.camera-credential-form-note[data-tone="warn"] {
  color: #bf6b13;
}

.camera-credential-alert[data-tone="error"],
.camera-credential-form-note[data-tone="error"] {
  color: #c83e3e;
}

.camera-credential-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}

.camera-credential-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(55, 116, 178, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 251, 255, 0.68));
  box-shadow: 0 14px 26px rgba(45, 92, 160, 0.08);
}

.camera-credential-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(55, 116, 178, 0.12);
}

.camera-credential-card__head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.camera-credential-card__head strong {
  color: #0f766e;
  font-size: 1.08rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camera-credential-card__head span,
.camera-credential-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.camera-credential-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.camera-credential-card__fields label {
  display: grid;
  gap: 6px;
}

.camera-credential-card__fields label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.camera-credential-card__fields input {
  min-height: 38px;
}

@media (max-width: 980px) {
  .app-page--cameras .camera-management-layout,
  .app-page--images .camera-management-layout,
  .app-page--algorithms .algorithm-management-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .camera-section-sidebar {
    display: flex;
    min-height: 0;
    padding: 10px;
    overflow-x: auto;
  }

  .camera-connectivity-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .camera-section-tab {
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    justify-content: center;
    min-width: 136px;
    min-height: 58px;
  }

  .camera-connectivity-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camera-credential-list,
  .camera-credential-card__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .camera-connectivity-table__header {
    display: none;
  }

  .camera-connectivity-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .camera-connectivity-table__cell {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
  }

  .camera-connectivity-table__cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
  }

  .camera-connectivity-table__cell--actions {
    display: flex;
    align-items: center;
  }

  .camera-connectivity-table__cell--actions::before {
    flex: 0 0 92px;
  }
}

@media (max-width: 560px) {
  .camera-connectivity-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .camera-connectivity-settings-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app-page--cameras .camera-list-alert {
  margin: 0 0 14px;
}

.app-page--cameras .camera-list-alert[data-tone="ok"] {
  color: var(--mint);
}

.app-page--cameras .camera-list-alert[data-tone="warn"] {
  color: var(--amber);
}

.app-page--cameras .camera-list-alert[data-tone="error"] {
  color: var(--danger);
}

.app-page--tasks .section-main-layout--tasks {
  grid-template-columns: 1fr;
}

.app-page--images .section-hero__copy h2 {
  max-width: 13ch;
}

.app-page--images .section-hero--gallery {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

.app-page--images .gallery-filter-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.app-page--images .gallery-filter-panel--flat {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-page--images .gallery-filter-panel__head {
  align-items: start;
  margin-bottom: 0;
}

.app-page--images .gallery-filter-panel .gallery-filter-form {
  grid-template-columns:
    minmax(150px, 1.05fr)
    minmax(160px, 1.18fr)
    minmax(124px, 0.9fr)
    minmax(124px, 0.9fr)
    minmax(94px, 0.68fr)
    auto;
  align-items: end;
  gap: 10px;
  padding: 0;
}

.app-page--images .gallery-filter-panel .gallery-filter-form__actions {
  grid-column: auto;
  align-self: end;
  justify-content: flex-end;
  white-space: nowrap;
}

.app-page--images .gallery-filter-panel--flat .gallery-filter-form__actions {
  align-items: end;
}

.app-page--images .gallery-filter-panel--flat .gallery-filter-form__actions .ghost-button,
.app-page--images .gallery-filter-panel--flat .gallery-filter-form__actions .primary-button {
  min-height: 42px;
}

.app-page--images .gallery-filter-status {
  margin: 0;
}

.app-page--images .gallery-filter-status[data-tone="ok"] {
  color: var(--mint);
}

.app-page--images .gallery-filter-status[data-tone="warn"] {
  color: var(--amber);
}

.app-page--images .gallery-filter-status[data-tone="error"] {
  color: var(--danger);
}

.app-page--images .section-hero--gallery .section-hero__sidebar--gallery .panel__head {
  align-items: start;
}

.app-page--images .section-hero--gallery .section-hero__sidebar--gallery .gallery-filter-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-page--images .section-hero--gallery .section-hero__sidebar--gallery .gallery-filter-form__actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.app-page--images .section-main-layout--gallery-results {
  grid-template-columns: 1fr;
}

.app-page--images .section-main-layout--gallery-results .gallery-panel--results {
  min-height: 560px;
}

.app-page--login .login-shell {
  background:
    radial-gradient(circle at 14% 18%, rgba(228, 170, 86, 0.22), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(140, 224, 197, 0.16), transparent 22%),
    radial-gradient(circle at 74% 84%, rgba(255, 117, 109, 0.12), transparent 24%),
    linear-gradient(180deg, #0b1015 0%, #06080b 100%);
}

.app-page--login .login-shell::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 209, 102, 0.82), transparent 26%),
    radial-gradient(circle at 68% 40%, rgba(255, 126, 95, 0.62), transparent 30%),
    radial-gradient(circle at 48% 72%, rgba(140, 224, 197, 0.48), transparent 34%);
}

.app-page--login .login-shell::after {
  background:
    radial-gradient(circle at 38% 34%, rgba(140, 224, 197, 0.72), transparent 28%),
    radial-gradient(circle at 68% 48%, rgba(228, 170, 86, 0.42), transparent 30%),
    radial-gradient(circle at 48% 72%, rgba(255, 117, 109, 0.34), transparent 34%);
}

.login-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 460px);
  gap: 28px;
  width: min(1180px, 100%);
  align-items: center;
}

.login-layout--simple {
  grid-template-columns: minmax(320px, 460px);
  justify-content: center;
  width: min(460px, 100%);
}

.login-hero {
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2vw, 20px);
}

.login-hero__title {
  max-width: 10ch;
  font-size: clamp(2.8rem, 5.2vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: 0.05em;
  white-space: normal;
}

.login-hero__text {
  max-width: 62ch;
  margin: 0;
  color: rgba(246, 242, 234, 0.9);
  font-size: 0.98rem;
  line-height: 1.78;
}

.login-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.login-pillar {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(10, 14, 19, 0.32);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}

.login-pillar span {
  color: var(--amber);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login-pillar strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.12;
  letter-spacing: 0.04em;
  white-space: normal;
}

.login-hero__footer {
  display: grid;
  gap: 10px;
  max-width: 34rem;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.login-hero__footer p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.login-hero__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(140, 224, 197, 0.24);
  background: rgba(140, 224, 197, 0.1);
  color: var(--mint);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.app-page--login .login-card {
  width: 100%;
  padding: 28px;
  border-radius: 30px;
}

.app-page--login .login-layout--simple .login-card {
  width: min(460px, 100%);
}

.app-page--login .login-card__title {
  max-width: none;
  white-space: normal;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 0.94;
  text-align: center;
}

.app-page--login .login-card__text {
  margin: 0 0 18px;
  color: var(--muted);
}

.app-page--login .login-card__footnote {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.app-page--login .login-form {
  display: grid;
  gap: 14px;
}

.app-page--login .login-form .primary-button {
  margin-top: 4px;
  min-height: 42px;
}

@media (max-width: 1480px) {
  .app-shell--section {
    width: min(100vw - 24px, 100%);
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__title {
    max-width: 16ch;
    font-size: clamp(2rem, 3.7vw, 3.3rem);
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline .alert-strip--statusline {
    grid-column: 1 / -1;
  }

  .section-hero,
  .section-main-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  }

  .section-main-layout--gallery {
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
  }

  .section-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .app-shell--section {
    width: min(100vw - 18px, 100%);
    padding-top: 18px;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__actions {
    justify-items: start;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__switchbar,
  .app-page:not(.dashboard-page):not(.app-page--login) .user-bar {
    width: auto;
    justify-content: flex-start;
  }

  .section-hero,
  .section-main-layout,
  .section-main-layout--gallery {
    grid-template-columns: 1fr;
  }

  .section-sidebar,
  .app-page--images .section-main-layout--gallery .gallery-panel--filters {
    position: static;
  }

  .app-page--cameras .section-hero__primary--cameras .overview-metrics,
  .app-page--tasks .section-hero__primary--tasks .overview-metrics,
  .app-page--images .section-hero--gallery .section-hero__primary--gallery .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-page--images .section-hero--gallery .section-hero__sidebar--gallery .gallery-filter-form {
    grid-template-columns: 1fr;
  }

  .app-page--images .gallery-filter-panel .gallery-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-page--images .gallery-filter-panel .gallery-filter-form__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .section-hero__copy h2 {
    max-width: 14ch;
  }

  .login-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .login-layout--simple {
    width: min(460px, 100%);
  }
}

@media (max-width: 760px) {
  .app-shell--section {
    width: min(100vw - 12px, 100%);
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__title {
    max-width: none;
    font-size: clamp(1.9rem, 10vw, 2.7rem);
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .page-nav,
  .app-page:not(.dashboard-page):not(.app-page--login) .user-bar {
    width: 100%;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .page-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 24px;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .page-nav__link {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .topbar__statusline,
  .section-highlight-grid,
  .overview-metrics,
  .login-pillar-grid {
    grid-template-columns: 1fr;
  }

  .section-hero__primary,
  .section-hero__sidebar,
  .panel--section,
  .app-page--login .login-card {
    padding: 16px;
    border-radius: 24px;
  }

  .section-hero__copy h2,
  .app-page--images .section-hero__copy h2 {
    max-width: none;
    font-size: clamp(1.9rem, 9vw, 2.6rem);
  }

  .app-page--cameras .section-hero .section-hero__sidebar--cameras .overview-metrics,
  .app-page--tasks .section-hero .section-hero__sidebar--tasks .overview-metrics,
  .app-page--images .section-hero--gallery .section-hero__sidebar--gallery .overview-metrics {
    grid-template-columns: 1fr;
  }

  .login-hero {
    padding: 4px 0;
  }

  .login-hero__title {
    max-width: none;
    font-size: clamp(2.15rem, 12vw, 3.1rem);
  }

  .login-pillar {
    min-height: 0;
  }
}

/* Refined dashboard workbench layout for the control page only. */
body.dashboard-page.dashboard-page--refined {
  overflow: auto;
}

.dashboard-page.dashboard-page--refined .app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  width: min(1680px, calc(100vw - 24px));
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 10px 0 18px;
  align-content: start;
  overflow: visible;
}

.dashboard-page.dashboard-page--refined .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 16px;
  min-height: 0;
  margin-bottom: 0;
}

.dashboard-page.dashboard-page--refined .topbar__brand {
  gap: 8px;
}

.dashboard-page.dashboard-page--refined .topbar__kicker,
.dashboard-page.dashboard-page--refined .topbar__section,
.dashboard-page.dashboard-page--refined .eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.dashboard-page.dashboard-page--refined .topbar__section--system {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.dashboard-page.dashboard-page--refined .topbar__title-row {
  gap: 8px 12px;
}

.dashboard-page.dashboard-page--refined .topbar__title--single-line {
  font-size: clamp(1.7rem, 2.35vw, 2.75rem);
}

.dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
  font-size: clamp(1.28rem, 1.72vw, 1.82rem);
  line-height: 1.06;
}

.dashboard-page.dashboard-page--refined .topbar__actions {
  gap: 8px;
}

.dashboard-page.dashboard-page--refined .page-nav {
  gap: 8px;
  padding: 6px;
}

.dashboard-page.dashboard-page--refined .page-nav__link {
  min-height: 38px;
  padding-inline: 15px;
  font-size: 0.94rem;
}

.dashboard-page.dashboard-page--refined .ghost-button,
.dashboard-page.dashboard-page--refined .primary-button,
.dashboard-page.dashboard-page--refined .user-chip,
.dashboard-page.dashboard-page--refined .panel__badge {
  min-height: 34px;
  padding-inline: 13px;
}

.dashboard-page.dashboard-page--refined .panel,
.dashboard-page.dashboard-page--refined .subpanel,
.dashboard-page.dashboard-page--refined .stage-camera,
.dashboard-page.dashboard-page--refined .meta-line,
.dashboard-page.dashboard-page--refined .preview-frame {
  box-shadow: none;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar {
  min-height: 0;
  margin: 0;
}

.dashboard-page.dashboard-page--refined .topbar__statusline {
  grid-template-columns: minmax(232px, 1.28fr) repeat(4, minmax(144px, 1fr));
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline,
.dashboard-page.dashboard-page--refined .topbar-status-card {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 18px;
}

.dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline {
  align-items: start;
}

.dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline .alert-strip__text {
  gap: 8px;
  grid-template-rows: minmax(1.05rem, auto) auto;
  align-content: start;
}

.dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline .alert-strip__message {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.24;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline .alert-strip__label {
  min-height: 1.05rem;
  font-size: 0.74rem;
  line-height: 1.08;
  letter-spacing: 0.08em;
}

.dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline .alert-strip__hint {
  font-size: 0.68rem;
  opacity: 0.72;
}

.dashboard-page.dashboard-page--refined .topbar-status-card {
  display: grid;
  grid-template-rows: minmax(1.15rem, auto) auto;
  align-content: start;
  gap: 9px;
}

.dashboard-page.dashboard-page--refined .topbar-status-card > span {
  display: block;
  min-height: 1.15rem;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.08;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-page.dashboard-page--refined .topbar-status-card > strong {
  margin-top: 0;
  font-size: 1.18rem;
  line-height: 1.04;
}

.dashboard-page.dashboard-page--refined .dashboard-main {
  min-height: 0;
  overflow: visible;
}

.dashboard-page.dashboard-page--refined .dashboard-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(540px, 1.12fr) minmax(300px, 360px);
  gap: 10px;
  align-items: start;
  height: auto;
  min-height: 0;
}

.dashboard-page.dashboard-page--refined .dashboard-column--left {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-self: stretch;
  gap: 10px;
  min-height: 0;
}

.dashboard-page.dashboard-page--refined .stage-brief,
.dashboard-page.dashboard-page--refined .panel--status,
.dashboard-page.dashboard-page--refined .panel--control,
.dashboard-page.dashboard-page--refined .stage-preview {
  min-height: 0;
  height: auto;
  padding: 12px 14px;
  border-radius: 22px;
  overflow: visible;
}

.dashboard-page.dashboard-page--refined .stage-brief {
  display: grid;
  gap: 10px;
  background:
    radial-gradient(circle at top left, rgba(228, 170, 86, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.016)),
    var(--panel);
}

.dashboard-page.dashboard-page--refined .stage-brief--merged {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.dashboard-page.dashboard-page--refined .stage-brief__copy {
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .stage-camera {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
}

.dashboard-page.dashboard-page--refined .stage-status {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
  align-content: start;
  min-height: 0;
  margin-top: clamp(16px, 2.4vh, 28px);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-page.dashboard-page--refined .stage-status__panel {
  gap: 8px;
  border-color: rgba(55, 116, 178, 0.16);
  background:
    radial-gradient(circle at top right, rgba(47, 128, 237, 0.06), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)),
    var(--panel);
}

.dashboard-page.dashboard-page--refined .stage-status__panel .status-board--sidebar {
  height: auto;
}

.dashboard-page.dashboard-page--refined .stage-camera__head {
  gap: 8px 12px;
}

.dashboard-page.dashboard-page--refined .stage-camera__copy {
  gap: 2px;
}

.dashboard-page.dashboard-page--refined .stage-camera__copy h3 {
  font-size: 1.08rem;
  line-height: 1.04;
}

.dashboard-page.dashboard-page--refined .stage-camera__copy p,
.dashboard-page.dashboard-page--refined .config-card__camera-meta,
.dashboard-page.dashboard-page--refined .panel__caption,
.dashboard-page.dashboard-page--refined .subpanel__caption {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-page.dashboard-page--refined .config-card__camera {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-page.dashboard-page--refined .config-card__camera-main {
  gap: 8px 10px;
}

.dashboard-page.dashboard-page--refined .config-card__camera-link {
  font-size: clamp(1.08rem, 1.4vw, 1.42rem);
  line-height: 1.05;
}

.dashboard-page.dashboard-page--refined .profile-chip {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 0.74rem;
}

.dashboard-page.dashboard-page--refined .panel__head,
.dashboard-page.dashboard-page--refined .subpanel__head {
  gap: 8px 10px;
}

.dashboard-page.dashboard-page--refined .panel__head {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.dashboard-page.dashboard-page--refined .panel__head-copy,
.dashboard-page.dashboard-page--refined .subpanel__head-copy {
  gap: 2px;
}

.dashboard-page.dashboard-page--refined .panel__tools {
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .panel__tools .ghost-button,
.dashboard-page.dashboard-page--refined .stage-camera__head .ghost-button {
  min-width: 92px;
}

.dashboard-page.dashboard-page--refined .stage-status .panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 10px;
}

.dashboard-page.dashboard-page--refined .stage-status__panel #ptz-status-title {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .stage-status__panel #ptz-status-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .stage-status .panel__tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: end;
  gap: 6px;
  margin-top: 22px;
}

.dashboard-page.dashboard-page--refined .stage-status .panel__tools .ghost-button {
  min-width: 86px;
  min-height: 32px;
  padding-inline: 10px;
}

.dashboard-page.dashboard-page--refined .panel--status .panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 10px;
}

.dashboard-page.dashboard-page--refined .panel--status .panel__tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: end;
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .panel--status .panel__tools .ghost-button {
  min-width: 86px;
  min-height: 32px;
  padding-inline: 10px;
}

.dashboard-page.dashboard-page--refined .panel h2 {
  font-size: 1.18rem;
  line-height: 1.05;
}

.dashboard-page.dashboard-page--refined .subpanel h3 {
  font-size: 0.98rem;
  line-height: 1.08;
}

.dashboard-page.dashboard-page--refined .subpanel__hint {
  min-height: 26px;
  padding-inline: 8px;
  font-size: 0.68rem;
  line-height: 1.15;
}

.dashboard-page.dashboard-page--refined .panel--status {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
}

.dashboard-page.dashboard-page--refined .status-board--sidebar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: stretch;
  align-self: stretch;
  min-height: 0;
  height: 100%;
}

.dashboard-page.dashboard-page--refined .readout {
  min-height: 66px;
  padding: 8px 9px;
  border-radius: 15px;
}

.dashboard-page.dashboard-page--refined .readout span {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.dashboard-page.dashboard-page--refined .readout strong {
  font-size: 1rem;
}

.dashboard-page.dashboard-page--refined .readout__meta {
  font-size: 0.68rem;
  line-height: 1.2;
}

.dashboard-page.dashboard-page--refined .panel__status-summary {
  margin-top: 4px;
}

.dashboard-page.dashboard-page--refined .panel--control {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
}

.dashboard-page.dashboard-page--refined .control-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  align-items: start;
  min-height: 0;
  height: auto;
}

.dashboard-page.dashboard-page--refined .subpanel {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: 12px;
  border-radius: 18px;
  overflow: visible;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture {
  gap: 8px;
  padding-bottom: 10px;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .subpanel__head {
  align-items: center;
  flex-wrap: nowrap;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .subpanel__head-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .control-stack > .subpanel:last-child {
  overflow: visible;
}

.dashboard-page.dashboard-page--refined .manual-step-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.dashboard-page.dashboard-page--refined .manual-step-control label {
  min-width: 0;
  min-height: 78px;
  padding: 8px 9px 10px;
  border-radius: 14px;
  overflow: hidden;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .manual-step-control {
  margin-top: 4px;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .manual-step-control label {
  min-height: 66px;
  padding-block: 7px 8px;
}

.dashboard-page.dashboard-page--refined .manual-step-control span {
  min-width: 0;
  max-width: 100%;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page.dashboard-page--refined .range-grid {
  gap: 6px;
  margin-top: 6px;
}

.dashboard-page.dashboard-page--refined .range-grid__head {
  min-height: 32px;
  padding-inline: 8px;
  font-size: 0.9rem;
}

.dashboard-page.dashboard-page--refined .range-grid__head svg {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
}

.dashboard-page.dashboard-page--refined .range-grid__label {
  min-height: 32px;
  padding-inline: 8px;
  font-size: 0.94rem;
}

.dashboard-page.dashboard-page--refined .form-grid--scan,
.dashboard-page.dashboard-page--refined .action-row {
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .form-grid--scan {
  margin-top: 14px;
}

.dashboard-page.dashboard-page--refined .form-grid--scan label {
  gap: 4px;
}

.dashboard-page.dashboard-page--refined input,
.dashboard-page.dashboard-page--refined select {
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding-inline: 10px;
  border-radius: 11px;
}

.dashboard-page.dashboard-page--refined .action-row--point {
  margin-top: 8px;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .action-row--point {
  margin-top: 6px;
}

.dashboard-page.dashboard-page--refined .range-summary,
.dashboard-page.dashboard-page--refined .mini-status {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 0.74rem;
  line-height: 1.35;
}

.dashboard-page.dashboard-page--refined .action-row > .ghost-button,
.dashboard-page.dashboard-page--refined .action-row > .primary-button {
  flex: 1 1 0;
}

.dashboard-page.dashboard-page--refined .stage-preview {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 8px;
  align-content: start;
  align-self: start;
  background:
    radial-gradient(circle at top center, rgba(140, 224, 197, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 15, 22, 0.96), rgba(11, 19, 28, 0.98)),
    var(--panel);
  border: 1px solid rgba(140, 224, 197, 0.1);
}

.dashboard-page.dashboard-page--refined .stage-preview .panel__head {
  align-items: start;
}

.dashboard-page.dashboard-page--refined .stage-preview #preview-title:empty {
  display: none;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
  min-height: 252px;
  height: auto;
  max-height: min(42vh, 360px);
  aspect-ratio: 16 / 9;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(140, 224, 197, 0.14);
  background:
    radial-gradient(circle at center, rgba(140, 224, 197, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(6, 12, 18, 0.96), rgba(8, 14, 21, 0.99));
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame img {
  inset: 12px 10px 10px 6px;
  width: calc(100% - 16px);
  height: calc(100% - 22px);
  object-position: center 62%;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame::before,
.dashboard-page.dashboard-page--refined .stage-preview .preview-frame::after {
  width: 28px;
  height: 28px;
  border-color: rgba(140, 224, 197, 0.44);
}

.dashboard-page.dashboard-page--refined .stage-preview .panel__badge {
  min-width: 92px;
  justify-content: center;
  border-color: rgba(140, 224, 197, 0.18);
  background: rgba(140, 224, 197, 0.08);
  color: var(--text);
}

.dashboard-page.dashboard-page--refined .stage-preview .panel__badge[hidden] {
  display: none;
}

.dashboard-page.dashboard-page--refined .preview-empty {
  padding: 16px;
}

.dashboard-page.dashboard-page--refined .preview-empty span {
  font-size: clamp(2.5rem, 4.2vw, 3.6rem);
}

.dashboard-page.dashboard-page--refined .preview-empty p {
  max-width: 100%;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .preview-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .preview-history {
  gap: 8px;
}

.dashboard-page.dashboard-page--refined .preview-history__label {
  color: var(--amber);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.dashboard-page.dashboard-page--refined .meta-line {
  min-height: 54px;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(140, 224, 197, 0.08);
}

.dashboard-page.dashboard-page--refined .meta-line span {
  font-size: 0.72rem;
}

.dashboard-page.dashboard-page--refined .meta-line strong {
  font-size: 0.82rem;
  line-height: 1.3;
}

.dashboard-page.dashboard-page--refined .gallery-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  max-height: none;
  overflow: visible;
  padding-bottom: 0;
}

.dashboard-page.dashboard-page--refined .gallery-strip .thumb-card {
  gap: 5px;
}

.dashboard-page.dashboard-page--refined .gallery-strip .thumb-card img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border-color: rgba(140, 224, 197, 0.12);
}

.dashboard-page.dashboard-page--refined .gallery-strip .thumb-card span {
  padding: 4px 7px;
  font-size: 0.68rem;
}

@media (min-width: 1121px) {
  .dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline .alert-strip__hint {
    display: none;
  }

  .dashboard-page.dashboard-page--refined .stage-camera__copy p,
  .dashboard-page.dashboard-page--refined .panel__caption,
  .dashboard-page.dashboard-page--refined .subpanel__caption {
    display: none;
  }
}

@media (max-width: 1480px) {
  .dashboard-page.dashboard-page--refined .app-shell {
    width: min(100vw - 22px, 100%);
    padding: 12px 0 10px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(250px, 290px) minmax(410px, 1.06fr) minmax(270px, 320px);
  }

  .dashboard-page.dashboard-page--refined .topbar__title--single-line {
    font-size: clamp(1.52rem, 2.15vw, 2.45rem);
  }

  .dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
    font-size: clamp(1.2rem, 1.7vw, 1.64rem);
  }

  .dashboard-page.dashboard-page--refined .topbar__statusline {
    grid-template-columns: minmax(196px, 1.12fr) repeat(4, minmax(128px, 1fr));
  }

  .dashboard-page.dashboard-page--refined .topbar-status-card > span {
    font-size: 0.74rem;
    letter-spacing: 0.03em;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__tools,
  .dashboard-page.dashboard-page--refined .panel--status .panel__tools {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__tools .ghost-button,
  .dashboard-page.dashboard-page--refined .panel--status .panel__tools .ghost-button {
    min-width: 0;
  }
}

@media (max-width: 1320px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dashboard-page.dashboard-page--refined .panel--control {
    grid-column: 2;
    grid-row: 1;
    min-height: auto;
  }

  .dashboard-page.dashboard-page--refined .control-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  body.dashboard-page.dashboard-page--refined {
    overflow: auto;
  }

  .dashboard-page.dashboard-page--refined .app-shell {
    display: block;
    width: min(100vw - 18px, 100%);
    height: auto;
    min-height: 0;
    padding: 18px 0 20px;
    overflow: visible;
  }

  .dashboard-page.dashboard-page--refined .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dashboard-page.dashboard-page--refined .topbar__actions {
    justify-content: flex-start;
  }

  .dashboard-page.dashboard-page--refined .topbar__switchbar,
  .dashboard-page.dashboard-page--refined .user-bar {
    width: auto;
    justify-content: flex-start;
  }

  .dashboard-page.dashboard-page--refined .topbar__statusline,
  .dashboard-page.dashboard-page--refined .dashboard-workbench,
  .dashboard-page.dashboard-page--refined .dashboard-column--left,
  .dashboard-page.dashboard-page--refined .preview-meta,
  .dashboard-page.dashboard-page--refined .status-board--sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline {
    grid-column: auto;
  }

  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .control-stack > .subpanel:last-child {
    overflow: visible;
  }

  .dashboard-page.dashboard-page--refined .control-stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__head,
  .dashboard-page.dashboard-page--refined .panel--status .panel__head {
    grid-template-columns: 1fr;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__tools,
  .dashboard-page.dashboard-page--refined .panel--status .panel__tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__tools {
    margin-top: 0;
  }

  .dashboard-page.dashboard-page--refined .stage-camera__copy p,
  .dashboard-page.dashboard-page--refined .panel__caption,
  .dashboard-page.dashboard-page--refined .subpanel__caption {
    display: -webkit-box;
  }

  .dashboard-page.dashboard-page--refined .stage-brief,
  .dashboard-page.dashboard-page--refined .panel--status,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    height: auto;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .topbar__title-row--system {
    flex-wrap: wrap;
  }

  .topbar__title--system {
    font-size: clamp(1.08rem, 4vw, 1.42rem);
  }

  .dashboard-page.dashboard-page--refined .topbar__title--single-line {
    font-size: clamp(1.08rem, 4.1vw, 1.56rem);
  }

  .dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
    font-size: clamp(1.04rem, 4vw, 1.34rem);
  }

  .dashboard-page.dashboard-page--refined .page-nav,
  .dashboard-page.dashboard-page--refined .user-bar {
    width: 100%;
  }

  .dashboard-page.dashboard-page--refined .page-nav {
    flex-wrap: wrap;
  }

  .dashboard-page.dashboard-page--refined .page-nav__link {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  .dashboard-page.dashboard-page--refined .manual-step-control,
  .dashboard-page.dashboard-page--refined .form-grid--scan,
  .dashboard-page.dashboard-page--refined .preview-meta {
    grid-template-columns: 1fr;
  }

  .dashboard-page.dashboard-page--refined .status-board--sidebar {
    grid-template-columns: 1fr;
  }
}

/* Stability overrides: keep PTZ controls visible on common desktop widths. */
@media (min-width: 981px) {
  body.dashboard-page.dashboard-page--refined {
    overflow: auto;
  }

  .dashboard-page.dashboard-page--refined .app-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 10px 0 16px;
    align-content: start;
    overflow: visible;
  }

.dashboard-page.dashboard-page--refined .dashboard-main {
  overflow: visible;
  margin-top: 10px;
}

  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    height: auto;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    align-self: stretch;
  }

  .dashboard-page.dashboard-page--refined .panel--status,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    height: auto;
    overflow: visible;
  }

  .dashboard-page.dashboard-page--refined .panel--status {
    grid-template-rows: auto auto auto;
    align-content: start;
  }

  .dashboard-page.dashboard-page--refined .status-board--sidebar {
    align-content: stretch;
    align-self: stretch;
    height: 100%;
  }

  .dashboard-page.dashboard-page--refined .panel--control {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .control-stack {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    height: auto;
  }

  .dashboard-page.dashboard-page--refined .subpanel,
  .dashboard-page.dashboard-page--refined .control-stack > .subpanel:last-child {
    overflow: visible;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(176px, 214px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 14px;
    align-items: stretch;
    align-content: start;
    align-self: start;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .panel__head {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: grid;
    align-content: start;
    gap: 10px;
    margin-bottom: 0;
    padding-right: 6px;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .panel__head-copy {
    align-content: start;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    grid-column: 2;
    grid-row: 1;
    min-height: 220px;
    height: auto;
    max-height: min(30vh, 280px);
    aspect-ratio: 16 / 9;
    margin-top: 18px;
  }

  .dashboard-page.dashboard-page--refined .preview-meta {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .dashboard-page.dashboard-page--refined .preview-history {
    grid-column: 2;
    grid-row: 3;
  }

  .dashboard-page.dashboard-page--refined .meta-line {
    min-height: 58px;
  }

  .dashboard-page.dashboard-page--refined .gallery-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1680px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(290px, 336px) minmax(450px, 0.92fr) minmax(420px, 1.08fr);
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .panel--control {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-column: 3;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-template-columns: minmax(168px, 196px) minmax(0, 1fr);
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    min-height: 220px;
    max-height: min(36vh, 320px);
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 760px) {
  .dashboard-page.dashboard-page--refined .gallery-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shared workspace header: keep dashboard, gallery, cameras and tasks aligned. */
.app-shell--section {
  width: min(1680px, calc(100vw - 24px));
  padding: 10px 0 18px;
  gap: 12px;
}

.app-shell--section > .workspace-stage,
.dashboard-page.dashboard-page--refined .app-shell > .workspace-stage {
  align-self: start;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace + .workspace-stage {
  margin-top: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 16px;
  min-height: 0;
  margin-bottom: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand {
  gap: 8px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line {
  max-width: none;
  font-size: clamp(1.7rem, 2.35vw, 2.75rem);
  line-height: 0.96;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row {
  gap: 8px 12px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line {
  font-size: clamp(1.7rem, 2.35vw, 2.75rem);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
  font-size: clamp(1.28rem, 1.72vw, 1.82rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__section--system {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__subtitle {
  display: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions {
  gap: 8px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  gap: 8px;
  padding: 6px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
  min-height: 38px;
  padding-inline: 16px;
  font-size: 0.98rem;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .ghost-button,
.app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip {
  min-height: 34px;
  padding-inline: 13px;
}

@media (max-width: 1480px) {
  .app-shell--section {
    width: min(100vw - 24px, 100%);
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
    font-size: clamp(1.2rem, 1.7vw, 1.64rem);
  }
}

@media (max-width: 1120px) {
  .app-shell--section {
    width: min(100vw - 18px, 100%);
    padding-top: 18px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions {
    justify-content: flex-start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar {
    width: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .app-shell--section {
    width: min(100vw - 12px, 100%);
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
    font-size: clamp(1.04rem, 4vw, 1.34rem);
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar {
    width: 100%;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

/* Compact non-dashboard first row so it matches the dashboard's working density. */
.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 8px;
  align-items: stretch;
}

.app-page:not(.dashboard-page):not(.app-page--login) .section-main-layout {
  margin-top: 12px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__primary,
.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__sidebar {
  padding: 12px 14px;
  border-radius: 18px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .panel--section-hero {
  background:
    radial-gradient(circle at top left, rgba(228, 170, 86, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    var(--panel);
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__primary {
  gap: 10px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__copy {
  gap: 6px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__copy h2 {
  max-width: none;
  font-size: clamp(1.14rem, 1.45vw, 1.4rem);
  line-height: 1.06;
  letter-spacing: 0.03em;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__text {
  max-width: none;
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-highlight-grid {
  gap: 6px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-highlight {
  min-height: 70px;
  padding: 10px 12px;
  border-radius: 16px;
  gap: 5px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-highlight span {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-highlight strong {
  font-size: 0.86rem;
  line-height: 1.14;
  letter-spacing: 0.03em;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__sidebar {
  gap: 8px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .panel__head {
  margin-bottom: 0;
  padding-bottom: 6px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .panel__head-copy {
  gap: 4px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .panel__head h2 {
  font-size: 1.04rem;
  line-height: 1.05;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .panel__caption {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .overview-metrics {
  gap: 6px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .overview-metric {
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 16px;
  gap: 5px;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .overview-metric span {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .overview-metric strong {
  font-size: 1rem;
  line-height: 1.08;
  letter-spacing: 0.03em;
}

.app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .mini-status {
  margin-top: 0;
  padding: 8px 10px;
  font-size: 0.74rem;
  line-height: 1.35;
}

@media (max-width: 1120px) {
  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-highlight-grid,
  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .overview-metrics {
    grid-template-columns: 1fr;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__primary,
  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__sidebar {
    padding: 14px 16px;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero .section-hero__copy h2 {
    font-size: clamp(1.06rem, 4vw, 1.28rem);
  }
}

@keyframes blue-scan-wash {
  0% {
    opacity: 0.62;
    background-position: 0% 28%, 100% 72%;
  }

  50% {
    opacity: 0.92;
    background-position: 58% 36%, 42% 60%;
  }

  100% {
    opacity: 0.68;
    background-position: 100% 44%, 0% 54%;
  }
}

/* Light motion theme: white workspace with a restrained pale-blue scan wash. */
body,
body.dashboard-page,
body.dashboard-page.dashboard-page--refined,
body.app-page:not(.dashboard-page):not(.app-page--login),
body.app-page--login {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 249, 255, 0.98) 100%),
    #f7fbff;
}

.login-shell {
  position: relative;
  z-index: 1;
}

.topbar__section,
.panel__caption,
.subpanel__caption,
.config-card__camera-meta,
.config-card__hint,
.readout span,
.readout__meta,
.profile-card__head p,
.profile-card__meta,
.camera-table__header,
.camera-table__cell span,
.gallery-card__meta,
.gallery-card__ptz,
.gallery-card__path,
.gallery-card__footer,
.section-hero__text,
.overview-metric span,
.section-highlight span,
.mini-status,
.alert-strip__label {
  color: var(--muted);
}

.metric-card,
.panel,
.alert-strip,
.subpanel,
.topbar-status-card,
.topbar-step,
.page-nav,
.user-chip,
.panel__badge,
.readout,
.config-card__camera,
.config-card__summary,
.config-card__switcher,
.config-card__target,
.panel__status-summary,
.meta-line,
.task-card,
.task-inline-log,
.task-log__entry,
.profile-card,
.camera-table,
.gallery-card,
.gallery-card__media,
.section-highlight,
.overview-metric,
.panel--section-hero,
.panel--guide,
.login-card,
.login-pillar,
.login-hero__footer,
.image-modal__panel,
.log-modal__panel,
.config-modal__panel,
.active-camera-picker-item {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 42px rgba(40, 106, 171, 0.1);
}

.panel,
.panel--section-hero,
.panel--guide,
.section-hero__primary,
.section-hero__sidebar,
.dashboard-page.dashboard-page--refined .stage-brief,
.dashboard-page.dashboard-page--refined .panel--status,
.dashboard-page.dashboard-page--refined .panel--control,
.dashboard-page.dashboard-page--refined .stage-preview,
.dashboard-page.dashboard-page--refined .stage-camera,
.dashboard-page.dashboard-page--refined .meta-line {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)),
    var(--panel);
  border-color: rgba(55, 116, 178, 0.16);
}

.panel::after,
.metric-card::after,
.alert-strip::after {
  border-color: rgba(255, 255, 255, 0.58);
}

.page-nav {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(55, 116, 178, 0.18);
}

.page-nav__link {
  color: #53657c;
}

.page-nav__link:hover {
  color: var(--text);
  background: rgba(47, 128, 237, 0.08);
}

.page-nav__link--active,
.primary-button {
  color: #ffffff;
  border-color: rgba(47, 128, 237, 0.58);
  background: linear-gradient(135deg, #5aa8ff 0%, #2f80ed 100%);
  box-shadow: 0 12px 28px rgba(47, 128, 237, 0.22);
}

.primary-button:hover {
  border-color: rgba(47, 128, 237, 0.78);
}

.ghost-button,
.ptz-button,
.panel__badge,
.user-chip {
  color: var(--text);
  border-color: rgba(55, 116, 178, 0.24);
  background: rgba(255, 255, 255, 0.68);
}

.ghost-button:hover,
.ptz-button:hover {
  border-color: rgba(47, 128, 237, 0.38);
  background: rgba(47, 128, 237, 0.09);
}

.ghost-button--danger {
  color: var(--danger);
  border-color: rgba(201, 70, 70, 0.28);
}

input,
select,
textarea {
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(55, 116, 178, 0.16);
}

select {
  color-scheme: light;
}

select option,
select optgroup {
  color: var(--text);
  background: #ffffff;
}

code {
  color: #225d9f;
  background: rgba(47, 128, 237, 0.08);
}

.alert-strip[data-tone="ok"],
.topbar-step--success,
.profile-card--active,
.camera-table__row--active {
  color: var(--mint);
  border-color: rgba(22, 133, 111, 0.28);
  background: linear-gradient(180deg, rgba(229, 248, 243, 0.86), rgba(255, 255, 255, 0.74));
}

.alert-strip[data-tone="warn"],
.topbar-step--warning {
  color: var(--warning);
  border-color: rgba(175, 107, 21, 0.26);
  background: linear-gradient(180deg, rgba(255, 246, 231, 0.88), rgba(255, 255, 255, 0.76));
}

.alert-strip[data-tone="error"],
.topbar-step--error {
  color: var(--danger);
  border-color: rgba(201, 70, 70, 0.26);
  background: linear-gradient(180deg, rgba(255, 239, 239, 0.9), rgba(255, 255, 255, 0.76));
}

.topbar-status-card strong[data-tone="warn"],
.metric-card strong[data-tone="warn"] {
  color: var(--warning);
}

.config-card__stream-chip,
.config-card__switch-status,
.profile-chip,
.thumb-card span,
.gallery-card__tag {
  border-color: rgba(47, 128, 237, 0.22);
  color: #276fbd;
  background: rgba(47, 128, 237, 0.08);
}

.config-card__switch-status[data-tone="current"],
.profile-chip--current,
.profile-chip--online,
.profile-current-badge {
  color: var(--mint);
  border-color: rgba(22, 133, 111, 0.24);
  background: rgba(22, 133, 111, 0.08);
}

.preview-frame,
.dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
  border-color: rgba(47, 128, 237, 0.16);
  background:
    linear-gradient(135deg, rgba(232, 244, 255, 0.86), rgba(255, 255, 255, 0.7)),
    #f8fcff;
}

.preview-frame::before,
.preview-frame::after,
.dashboard-page.dashboard-page--refined .stage-preview .preview-frame::before,
.dashboard-page.dashboard-page--refined .stage-preview .preview-frame::after {
  border-color: rgba(47, 128, 237, 0.34);
}

.preview-empty span {
  color: rgba(47, 128, 237, 0.18);
}

.gallery-card:hover {
  border-color: rgba(47, 128, 237, 0.24);
  box-shadow: 0 22px 46px rgba(47, 128, 237, 0.14);
}

.gallery-card--selected {
  border-color: rgba(47, 128, 237, 0.4);
  box-shadow: 0 18px 38px rgba(47, 128, 237, 0.16);
}

dialog::backdrop {
  background: rgba(33, 65, 99, 0.2);
  backdrop-filter: blur(8px);
}

/* Workspace consistency: all functional pages share the same frame and header rhythm. */
.app-page:not(.app-page--login) .app-shell,
.app-page:not(.app-page--login) .app-shell--section,
.dashboard-page.dashboard-page--refined .app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  width: min(1680px, calc(100vw - 24px));
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 10px 0 18px;
  overflow: visible;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  min-height: 82px;
  padding-block: 10px;
  margin-bottom: 0;
  position: relative;
  z-index: 50;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__brand {
  display: grid;
  align-content: center;
  align-self: center;
  gap: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row {
  align-items: center;
  gap: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
  max-width: none;
  font-size: clamp(1.28rem, 1.72vw, 1.82rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__section--system,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__section--system {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__switchbar {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-end;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 434px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(55, 116, 178, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 42px rgba(40, 106, 171, 0.1);
  flex-wrap: nowrap;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
  min-height: 38px;
  padding-inline: 12px;
  font-size: 1.04rem;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .ghost-button,
.app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .ghost-button,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip {
  min-height: 34px;
  padding-inline: 13px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  padding: 5px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip {
  width: 102px;
  justify-content: center;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace #logout-button,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace #logout-button {
  width: 80px;
}

@media (min-width: 761px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
    width: 204px;
    flex-basis: 204px;
  }
}

.app-page:not(.app-page--login) .workspace-stage,
.dashboard-page.dashboard-page--refined .workspace-stage,
.app-page:not(.app-page--login) main,
.dashboard-page.dashboard-page--refined main {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1120px) {
  .app-page:not(.app-page--login) .app-shell,
  .app-page:not(.app-page--login) .app-shell--section,
  .dashboard-page.dashboard-page--refined .app-shell {
    width: min(100vw - 18px, 100%);
    padding-top: 18px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions {
    justify-content: flex-start;
  }

  .app-page:not(.dashboard-page):not(.app-page--login) .workspace-stage.section-hero,
  .app-page:not(.dashboard-page):not(.app-page--login) .section-main-layout,
  .app-page--cameras .section-main-layout--cameras,
  .app-page--images .section-hero--gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell,
  .app-shell--section,
  .dashboard-page.dashboard-page--refined .app-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    width: min(100vw - 16px, 100%);
    padding: 18px 0;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace,
  .dashboard-page.dashboard-page--refined .topbar {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .dashboard-page.dashboard-page--refined .topbar__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
  .dashboard-page.dashboard-page--refined .topbar__switchbar {
    display: block;
    width: 100%;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
  .dashboard-page.dashboard-page--refined .page-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .page-nav__link {
    flex: none;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
  .dashboard-page.dashboard-page--refined .user-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-template-columns: 1fr;
  }

  .preview-frame,
  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 196px;
    max-height: none;
    aspect-ratio: auto;
  }

  .topbar__title-row--system {
    align-items: flex-start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line,
  .dashboard-page.dashboard-page--refined .topbar__title--single-line {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app-page:not(.app-page--login) .monitor-topbar .topbar__title--single-line {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon svg,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon svg {
    width: 26px;
    height: 26px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row--system,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row--system {
    gap: 8px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row {
    min-height: 56px;
    align-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
    opacity: 0.58;
    transform: none;
  }
}

/* Async analysis feedback and filtered topology summary 20260722b. */
body[data-cloud-page="abnormal"] .analysis-time-filter.is-loading {
  border-color: rgba(47, 131, 247, 0.58);
  box-shadow: 0 8px 24px rgba(47, 131, 247, 0.14);
}

body[data-cloud-page="abnormal"] .analysis-time-filter__apply:disabled {
  cursor: wait;
  opacity: 0.78;
}

body[data-cloud-page="abnormal"] .analysis-chart.is-loading {
  grid-template-rows: minmax(0, 1fr);
}

body[data-cloud-page="abnormal"] .analysis-data-loading {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #315d8f;
  text-align: center;
}

body[data-cloud-page="abnormal"] .analysis-data-loading--strip {
  flex: 1 0 100%;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: start;
  min-height: 102px;
  padding: 12px 24px;
  text-align: left;
}

body[data-cloud-page="abnormal"] .analysis-data-loading--chart {
  grid-column: 1 / -1;
  min-height: clamp(300px, 45vh, 620px);
}

body[data-cloud-page="abnormal"] .analysis-data-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(47, 131, 247, 0.18);
  border-top-color: #2f83f7;
  border-radius: 50%;
  animation: analysis-loading-spin 0.78s linear infinite;
}

body[data-cloud-page="abnormal"] .analysis-data-loading--strip .analysis-data-loading__spinner {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
}

body[data-cloud-page="abnormal"] .analysis-data-loading__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-cloud-page="abnormal"] .analysis-data-loading__copy strong {
  color: #173f70;
  font-size: 0.92rem;
  font-weight: 760;
}

body[data-cloud-page="abnormal"] .analysis-data-loading__copy span {
  color: #6883a2;
  font-size: 0.78rem;
  font-weight: 500;
}

body[data-cloud-page="abnormal"] .analysis-data-loading__pulse {
  width: min(420px, 64%);
  height: 5px;
  overflow: hidden;
  background: rgba(130, 175, 230, 0.18);
  border-radius: 999px;
}

body[data-cloud-page="abnormal"] .analysis-data-loading--strip .analysis-data-loading__pulse {
  grid-column: 2;
  width: min(340px, 100%);
}

body[data-cloud-page="abnormal"] .analysis-data-loading__pulse::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(47, 131, 247, 0.86), transparent);
  animation: analysis-loading-sweep 1.15s ease-in-out infinite;
}

body[data-cloud-page="abnormal"] .analysis-data-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 110px;
  padding: 18px;
  color: #a73532;
  text-align: left;
}

body[data-cloud-page="abnormal"] .analysis-chart > .analysis-data-error {
  grid-row: 1 / -1;
  min-height: 360px;
}

body[data-cloud-page="abnormal"] .analysis-data-error__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: #d4514c;
  border-radius: 50%;
  font-weight: 800;
}

body[data-cloud-page="abnormal"] .analysis-data-error > div {
  display: grid;
  gap: 3px;
}

body[data-cloud-page="abnormal"] .analysis-data-error span:not(.analysis-data-error__icon) {
  color: #8b5a58;
  font-size: 0.78rem;
}

.edge-topology-toolbar__filters {
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.topology-filter-stats {
  display: inline-flex;
  flex: 1 1 430px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #5a708b;
  font-size: 0.74rem;
  font-weight: 500;
}

.topology-filter-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 10px;
  background: rgba(247, 251, 255, 0.96);
  border: 1px solid rgba(112, 163, 226, 0.34);
  border-radius: 8px;
  white-space: nowrap;
}

.topology-filter-stat__label {
  color: #3d5d80;
  font-weight: 700;
}

.topology-filter-stat strong {
  color: #176fd1;
  font-size: 0.9rem;
  font-weight: 800;
}

.topology-filter-stat--edge {
  border-left: 3px solid #15947a;
}

.topology-filter-stat--camera {
  border-left: 3px solid #2f80ed;
}

.topology-filter-stat__time {
  margin-left: auto;
  color: #6a7f98;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.edge-flow-columns .edge-flow-column-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 0;
  text-align: center;
}

.edge-flow-column-title svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #287ddd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.edge-camera-connectivity--checking {
  color: #176fd1;
  border-color: rgba(47, 131, 247, 0.38);
  background: rgba(234, 244, 255, 0.96);
}

.edge-camera-connectivity--checking i {
  background: #2f83f7;
  box-shadow: 0 0 0 3px rgba(47, 131, 247, 0.14);
  animation: topology-probe-pulse 0.9s ease-in-out infinite alternate;
}

.edge-flow-probe-feedback {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 7px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

.edge-flow-probe-feedback__icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #fff;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
}

.edge-flow-probe-feedback__body {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  min-width: 0;
}

.edge-flow-probe-feedback__body strong {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 800;
}

.edge-flow-probe-feedback__body > span {
  min-width: 0;
}

.edge-flow-probe-feedback__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -3px -3px -3px 0;
  padding: 0;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.72;
}

.edge-flow-probe-feedback__close:hover,
.edge-flow-probe-feedback__close:focus-visible {
  background: rgba(255, 255, 255, 0.68);
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.edge-flow-probe-feedback--info {
  color: #245f9e;
  background: rgba(235, 246, 255, 0.94);
  border-color: rgba(47, 131, 247, 0.26);
}

.edge-flow-probe-feedback--info .edge-flow-probe-feedback__icon {
  background: #2f83f7;
}

.edge-flow-probe-feedback--success {
  color: #08795f;
  background: rgba(231, 250, 243, 0.95);
  border-color: rgba(25, 159, 119, 0.3);
}

.edge-flow-probe-feedback--success .edge-flow-probe-feedback__icon {
  background: #16a078;
}

.edge-flow-probe-feedback--error {
  color: #a73532;
  background: rgba(255, 239, 237, 0.94);
  border-color: rgba(209, 83, 78, 0.28);
}

.edge-flow-probe-feedback--error .edge-flow-probe-feedback__icon {
  background: #d4514c;
}

@keyframes analysis-loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes analysis-loading-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(270%); }
}

@keyframes topology-probe-pulse {
  to { transform: scale(1.22); opacity: 0.66; }
}

@media (max-width: 1200px) {
  .topology-filter-stats {
    flex-basis: 100%;
  }

  .topology-filter-stat__time {
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .topology-filter-stats {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topology-filter-stat {
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-cloud-page="abnormal"] .analysis-data-loading__spinner,
  body[data-cloud-page="abnormal"] .analysis-data-loading__pulse::after,
  .edge-camera-connectivity--checking i {
    animation-duration: 2.4s;
  }
}

/* Tasks horizontal overflow containment 20260722a.
   The table owns horizontal scrolling; the page frame must never become a
   second horizontal scroller, otherwise trackpad overscroll reveals a blank
   canvas beside the application. */
body.app-page.app-page--tasks:not(.dashboard-page):not(.app-page--login) {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.app-page--tasks .section-main-layout--tasks {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-page--tasks .panel--tasks,
.app-page--tasks .task-list,
.app-page--tasks .task-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-page--tasks .task-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

#tasks-reload-button {
  min-width: 96px;
}

#tasks-reload-button[data-loading="true"] {
  cursor: progress;
  opacity: 0.78;
}

#tasks-reload-button[data-loading="true"]::before {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: task-refresh-spin 0.72s linear infinite;
}

@keyframes task-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1120px) {
  .app-page--tasks .task-toolbar--compact,
  .app-page--tasks .task-toolbar--compact .task-toolbar__summary,
  .app-page--tasks .task-toolbar--compact .task-toolbar__primary-actions,
  .app-page--tasks .task-toolbar--compact .task-bulk-actions,
  .app-page--tasks .task-toolbar--compact .task-view-switch {
    flex-wrap: wrap;
  }

  .app-page--tasks .task-toolbar__spacer {
    display: none;
  }

}

/* Shared cloud-edge vision mark used by every workspace banner. */
.topbar__system-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(26, 105, 202, 0.2));
}

/* Login page uses a compact panel over a high-contrast control-room backdrop. */
body.app-page--login {
  min-height: 100vh;
  min-height: 100dvh;
  color: #eaf3ff;
  background:
    linear-gradient(125deg, rgba(19, 151, 135, 0.22) 0%, transparent 28%),
    linear-gradient(235deg, rgba(255, 181, 71, 0.14) 0%, transparent 30%),
    linear-gradient(180deg, #07110f 0%, #0d1513 52%, #11100d 100%);
}

.app-page--login .login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 14px 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(98, 220, 195, 0.055) 0 1px, transparent 1px 42px);
}

.app-page--login .login-shell::before,
.app-page--login .login-shell::after {
  display: block;
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.app-page--login .login-shell::before {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(86, 224, 193, 0.18) 42.2% 42.7%, transparent 43% 100%),
    linear-gradient(155deg, transparent 0 55%, rgba(255, 196, 87, 0.14) 55.2% 55.7%, transparent 56% 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.08));
  opacity: 0.86;
}

.app-page--login .login-shell::after {
  right: -12%;
  bottom: -22%;
  width: min(720px, 72vw);
  height: min(420px, 44vw);
  border: 1px solid rgba(98, 220, 195, 0.22);
  background:
    repeating-linear-gradient(118deg, rgba(98, 220, 195, 0.18) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 196, 87, 0.06));
  transform: rotate(-10deg);
  opacity: 0.45;
}

.app-page--login .login-card::before,
.app-page--login .login-card::after {
  display: none;
}

.app-page--login .login-layout,
.app-page--login .login-layout--simple {
  position: relative;
  z-index: 1;
  width: min(410px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
}

.app-page--login .login-card {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(126, 238, 211, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 252, 249, 0.78)),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px);
}

.app-page--login .login-card__title {
  margin: 0;
  max-width: none;
  color: var(--text);
  font-size: clamp(1.18rem, 1.7vw, 1.48rem);
  line-height: 1.14;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal;
}

.app-page--login .login-form {
  gap: 10px;
}

.app-page--login .login-form label {
  gap: 5px;
}

.app-page--login .login-form label span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.app-page--login .login-form input {
  min-height: 36px;
  border-radius: 12px;
}

.app-page--login .login-form .primary-button {
  min-height: 38px;
  margin-top: 2px;
}

.app-page--login .login-application-open {
  min-height: 36px;
  justify-self: stretch;
}

.login-application-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 70px rgba(12, 24, 36, 0.26);
}

.login-application-dialog__form {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.login-application-dialog__head {
  display: grid;
  gap: 3px;
}

.login-application-dialog__head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
}

.login-application-dialog__form label {
  display: grid;
  gap: 6px;
}

.login-application-dialog__form label span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.login-application-dialog__form textarea {
  resize: vertical;
}

.login-application-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.app-page--login .login-form .primary-button[aria-busy="true"],
.app-page--login .login-form .primary-button[data-loading="true"],
.app-page--login .login-form .primary-button.is-loading,
.app-page--login .login-form .primary-button:disabled {
  position: relative;
  color: transparent;
  opacity: 1;
  cursor: wait;
}

.app-page--login .login-form .primary-button[aria-busy="true"]::after,
.app-page--login .login-form .primary-button[data-loading="true"]::after,
.app-page--login .login-form .primary-button.is-loading::after,
.app-page--login .login-form .primary-button:disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(24, 15, 6, 0.22);
  border-top-color: #180f06;
  border-radius: 999px;
  animation: loginButtonSpin 720ms linear infinite;
}

@keyframes loginButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .app-page--login .login-layout,
  .app-page--login .login-layout--simple {
    width: min(100vw - 24px, 100%);
  }

  .app-page--login .login-card {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .app-page--login .login-card__title {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
  }
}

/* Dashboard overview uses the same card rhythm as the other workspace pages. */
.dashboard-page.dashboard-page--refined .dashboard-statusbar.workspace-stage {
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(180px, 0.46fr));
  grid-template-rows: repeat(2, minmax(88px, auto));
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip--statusline {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 0;
  height: 100%;
  padding: 20px;
  border-radius: 24px;
  align-items: start;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)),
    var(--panel);
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
  min-height: 0;
  height: 100%;
  padding: 16px 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)),
    var(--panel);
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip__message {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 1120px) {
  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip--statusline {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 110px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
    min-height: 96px;
  }
}

@media (max-width: 760px) {
  .app-page:not(.app-page--login) .app-shell,
  .app-page:not(.app-page--login) .app-shell--section,
  .dashboard-page.dashboard-page--refined .app-shell {
    width: calc(100vw - 16px);
    max-width: none;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__brand,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row {
    min-height: 60px;
    height: 60px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__section--system,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__section--system {
    min-height: 30px;
    height: 30px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions {
    min-height: 150px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
    min-height: 44px;
    height: 44px;
    padding-block: 4px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip--statusline,
  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
    min-height: 74px;
    padding: 14px 16px;
    border-radius: 18px;
  }
}

/* Mobile viewport hardening: keep the operator shell within the visual viewport. */
@media (max-width: 760px) {
  .app-page--login .login-shell {
    width: 100%;
    padding: 16px 8px;
    justify-items: center;
    overflow-x: hidden;
  }

  .app-page--login .login-layout,
  .app-page--login .login-layout--simple {
    width: 100%;
    width: calc(100vw - 16px);
    width: calc(100dvw - 16px);
    max-width: min(410px, calc(100vw - 16px));
    max-width: min(410px, calc(100dvw - 16px));
    min-width: 0;
  }

  .app-page--login .login-card {
    width: calc(100vw - 16px);
    width: calc(100dvw - 16px);
    max-width: min(410px, calc(100vw - 16px));
    max-width: min(410px, calc(100dvw - 16px));
    min-width: 0;
    padding: 18px 16px;
  }

  .app-page--login .login-card__title {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.12rem, 5.4vw, 1.42rem);
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .app-page--login .login-form,
  .app-page--login .login-form label,
  .app-page--login .login-form input,
  .app-page--login .login-form .primary-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-page:not(.app-page--login) .app-shell,
  .app-page:not(.app-page--login) .app-shell--section,
  .dashboard-page.dashboard-page--refined .app-shell {
    width: min(100%, calc(100vw - 12px));
    width: min(100%, calc(100dvw - 12px));
    max-width: calc(100vw - 12px);
    max-width: calc(100dvw - 12px);
    min-width: 0;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    min-height: 86px;
    padding-block: 8px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__brand,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title--single-line,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
    max-width: 100%;
    font-size: clamp(0.9rem, 3.9vw, 1.18rem);
    line-height: 1.1;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__section--system,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__section--system {
    min-height: 0;
    height: auto;
    max-width: 100%;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    gap: 8px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__switchbar {
    width: 100%;
    min-width: 0;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 6px;
    border-radius: 24px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
    flex: initial;
    min-width: 0;
    max-width: none;
    min-height: 36px;
    padding-inline: 6px;
    font-size: 0.9rem;
    line-height: 1.14;
    text-align: center;
    white-space: normal;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    gap: 8px;
    padding: 0;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip,
  .app-page:not(.app-page--login) .topbar.topbar--workspace #logout-button,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace #logout-button {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
    line-height: 1.1;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
    font-size: 0.9rem;
  }

  .app-page--login .login-card__title {
    font-size: clamp(1.08rem, 5.2vw, 1.34rem);
  }
}

@media (max-width: 420px) {
  .app-page--login .login-layout,
  .app-page--login .login-layout--simple,
  .app-page--login .login-card {
    width: min(300px, calc(100vw - 32px));
    width: min(300px, calc(100dvw - 32px));
    max-width: min(300px, calc(100vw - 32px));
    max-width: min(300px, calc(100dvw - 32px));
  }
}

@media (max-width: 360px) {
  .app-page--login .login-layout,
  .app-page--login .login-layout--simple,
  .app-page--login .login-card {
    width: min(288px, calc(100vw - 32px));
    width: min(288px, calc(100dvw - 32px));
    max-width: min(288px, calc(100vw - 32px));
    max-width: min(288px, calc(100dvw - 32px));
  }
}

/* Unified status belt: latest message and four transport modules share one stable row under the banner. */
.app-page:not(.dashboard-page):not(.app-page--login) .app-shell--section {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.app-page:not(.app-page--login) .dashboard-statusbar.workspace-stage {
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.app-page:not(.app-page--login) .dashboard-statusbar .topbar__statusline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: auto;
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
  min-height: 82px;
  height: auto;
  padding: 14px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)),
    var(--panel);
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline {
  align-items: start;
  justify-content: start;
  max-width: none;
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline .alert-strip__text {
  min-width: 0;
  gap: 6px;
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline .alert-strip__message,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline .alert-strip__hint {
  display: none;
}

.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
  align-content: start;
}

@media (max-width: 1180px) {
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar__statusline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar__statusline {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .app-page:not(.app-page--login) .dashboard-statusbar .alert-strip--statusline,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 18px;
  }
}

.app-page:not(.dashboard-page):not(.app-page--login) .dashboard-statusbar .topbar__statusline .alert-strip--statusline,
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline .alert-strip--statusline {
  grid-column: auto;
  grid-row: auto;
}

/* Center the active camera identity row inside the current-camera name area. */
.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera {
  display: grid;
  place-items: stretch;
  grid-template-rows: auto auto;
  gap: 3px;
  min-height: 38px;
  padding: 0 7px 2px;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  min-height: 20px;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-title,
.dashboard-page.dashboard-page--refined .stage-status__panel #ptz-status-title,
.dashboard-page.dashboard-page--refined .ptz-history__title,
.dashboard-page.dashboard-page--refined .inspection-points__title {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-title .module-title__icon,
.dashboard-page.dashboard-page--refined .stage-status__panel #ptz-status-title .module-title__icon,
.dashboard-page.dashboard-page--refined .ptz-history__title .module-title__icon,
.dashboard-page.dashboard-page--refined .inspection-points__title .module-title__icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-switch {
  margin-left: auto;
  min-height: 20px;
  padding-inline: 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 6px 8px;
  width: 100%;
  min-height: 17px;
  text-align: center;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-link {
  justify-content: center;
  font-size: clamp(1rem, 1.22vw, 1.22rem);
  text-align: center;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main .profile-chip {
  min-height: 24px;
  padding-inline: 10px;
  font-size: 0.82rem;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-stake {
  border-color: rgba(47, 128, 237, 0.22);
  background: rgba(47, 128, 237, 0.07);
  color: #315d93;
  font-size: 0.84rem;
  font-weight: 800;
}

.dashboard-page.dashboard-page--refined .ptz-history {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(55, 116, 178, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 252, 255, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.dashboard-page.dashboard-page--refined .ptz-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .ptz-history__clear {
  min-height: 22px;
  padding-inline: 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
}

.dashboard-page.dashboard-page--refined .ptz-history__list {
  display: grid;
  gap: 0;
  max-height: 138px;
  overflow: auto;
  border: 1px solid rgba(55, 116, 178, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.dashboard-page.dashboard-page--refined .ptz-history__item {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 6px 9px;
  border-bottom: 1px solid rgba(55, 116, 178, 0.1);
}

.dashboard-page.dashboard-page--refined .ptz-history__item:last-child {
  border-bottom: 0;
}

.dashboard-page.dashboard-page--refined .ptz-history__item time {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .ptz-history__item strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .ptz-history__empty {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .dashboard-page.dashboard-page--refined .ptz-history__item {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .dashboard-page.dashboard-page--refined .ptz-history__item strong {
    text-align: left;
  }
}


/* Inspection point and keyframe alignment refinements. */
.dashboard-page.dashboard-page--refined .inspection-points {
  display: grid;
  gap: 9px;
  margin-top: 0;
  padding: 11px;
  border: 1px solid rgba(55, 116, 178, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 252, 255, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.dashboard-page.dashboard-page--refined .inspection-points__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.dashboard-page.dashboard-page--refined .inspection-points__add {
  min-width: 34px;
  min-height: 28px;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}

.dashboard-page.dashboard-page--refined .inspection-points__list {
  display: grid;
  gap: 7px;
  max-height: 188px;
  overflow: auto;
}

.dashboard-page.dashboard-page--refined .inspection-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 8px;
  padding: 8px;
  border: 1px solid rgba(55, 116, 178, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.68);
}

.dashboard-page.dashboard-page--refined .inspection-point__main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .inspection-point__index {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(45, 212, 191, 0.18);
  font-size: 0.68rem;
  font-weight: 900;
}

.dashboard-page.dashboard-page--refined .inspection-point strong {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .inspection-point time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .inspection-point textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 11px;
  resize: vertical;
  line-height: 1.45;
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(55, 116, 178, 0.18);
}

.dashboard-page.dashboard-page--refined .inspection-point textarea:focus {
  outline: 2px solid rgba(47, 128, 237, 0.24);
  outline-offset: 2px;
  border-color: rgba(47, 128, 237, 0.42);
}

.dashboard-page.dashboard-page--refined .inspection-point__delete {
  min-height: 24px;
  padding-inline: 9px;
  border-color: rgba(229, 57, 53, 0.28);
  color: var(--danger);
  font-size: 0.7rem;
  line-height: 1;
}

.dashboard-page.dashboard-page--refined .inspection-points__empty {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  border: 1px dashed rgba(55, 116, 178, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
}

.dashboard-page.dashboard-page--refined .inspection-points__status {
  min-height: 18px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.dashboard-page.dashboard-page--refined .inspection-points__status[data-tone="ok"] {
  color: var(--mint);
}

.dashboard-page.dashboard-page--refined .inspection-points__status[data-tone="warn"] {
  color: var(--warning);
}

.dashboard-page.dashboard-page--refined .inspection-points__status[data-tone="error"] {
  color: var(--danger);
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame img {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-position: center center;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta {
  margin-top: 0;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line {
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history {
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history[hidden] {
  display: none;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__viewport {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  overflow: visible;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button {
  position: static;
  z-index: 4;
  width: 32px;
  min-width: 32px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #1c5b94;
  background: rgba(247, 252, 255, 0.9);
  border-color: rgba(89, 151, 224, 0.28);
  box-shadow: 0 12px 30px rgba(22, 88, 145, 0.18);
  transform: none;
  backdrop-filter: blur(10px);
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button--prev {
  justify-self: start;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button--next {
  justify-self: end;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button svg {
  width: 20px;
  height: 20px;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button:disabled {
  cursor: default;
  opacity: 0.36;
  pointer-events: none;
}

.dashboard-page.dashboard-page--refined .stage-preview .gallery-strip {
  display: flex;
  grid-template-columns: none;
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 10px;
  min-width: 0;
  padding: 4px 0 10px;
}

.dashboard-page.dashboard-page--refined .stage-preview .gallery-strip .thumb-card {
  flex: 0 0 clamp(104px, 22%, 142px);
  min-width: 104px;
  scroll-snap-align: start;
}

@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .panel__head {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
  }

  .dashboard-page.dashboard-page--refined .preview-meta {
    grid-column: 1;
    grid-row: 3;
  }

  .dashboard-page.dashboard-page--refined .preview-history {
    grid-column: 1;
    grid-row: 4;
  }
}

@media (min-width: 1680px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    align-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    align-self: stretch;
    height: 100%;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    width: 100%;
    min-height: 280px;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 760px) {
  .dashboard-page.dashboard-page--refined .inspection-points__head {
    grid-template-columns: 1fr;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__head .ghost-button {
    width: 100%;
  }
}


/* Workspace header label stability: keep navigation and account actions on one line. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
  padding-inline: 8px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace #logout-button,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace #logout-button {
  width: 92px;
  min-width: 92px;
  padding-inline: 10px;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
    width: 216px;
    flex-basis: 216px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip {
    width: 112px;
  }
}

@media (max-width: 760px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link,
  .app-page:not(.app-page--login) .topbar.topbar--workspace #logout-button,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace #logout-button,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip {
    font-size: clamp(0.88rem, 3.65vw, 0.96rem);
    white-space: nowrap;
  }
}

/* Module title icons and stronger dashboard section labels. */
.module-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.module-title {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: 7px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}

.module-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-title__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--amber);
}

.module-title--message .module-title__icon {
  color: var(--warning);
}

.module-title--onvif .module-title__icon,
.module-title--time .module-title__icon,
.module-title--camera .module-title__icon {
  color: var(--amber);
}

.module-title--rtsp .module-title__icon,
.module-title--keyframe .module-title__icon {
  color: var(--mint);
}

.module-title--point .module-title__icon,
.module-title--ptz .module-title__icon,
.module-title--scan .module-title__icon,
.module-title--sampling .module-title__icon {
  color: #3a75d6;
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip__label.module-title,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title {
  display: inline-flex;
  min-height: 1.28rem;
  color: var(--text);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.app-page:not(.app-page--login) .dashboard-statusbar .alert-strip__label.module-title .module-title__icon,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title .module-title__icon {
  flex-basis: 17px;
  width: 17px;
  height: 17px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip__label.module-title,
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title {
  min-height: 1.28rem;
  font-size: 0.92rem;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip__label.module-title .module-title__icon,
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title .module-title__icon {
  flex-basis: 17px;
  width: 17px;
  height: 17px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip--statusline .alert-strip__message,
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > strong {
  font-size: 0.86rem;
  line-height: 1.24;
  font-weight: 600;
}

.dashboard-page.dashboard-page--refined .stage-brief__copy .module-title,
.dashboard-page.dashboard-page--refined .panel--control .panel__head-copy .module-title,
.dashboard-page.dashboard-page--refined .stage-preview .panel__head-copy .module-title {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}

.dashboard-page.dashboard-page--refined .stage-brief__copy .module-title__icon,
.dashboard-page.dashboard-page--refined .panel--control .panel__head-copy .module-title__icon,
.dashboard-page.dashboard-page--refined .stage-preview .panel__head-copy .module-title__icon {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}

.dashboard-page.dashboard-page--refined .stage-brief__copy .module-title,
.dashboard-page.dashboard-page--refined .panel--control .panel__head-copy .module-title,
.dashboard-page.dashboard-page--refined .stage-preview .panel__head-copy .module-title {
  font-size: 1.08rem;
}

.dashboard-page.dashboard-page--refined .subpanel__head-copy .module-heading {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  letter-spacing: 0;
}

.dashboard-page.dashboard-page--refined .subpanel__head-copy .module-heading .module-title__icon {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}

@media (max-width: 760px) {
  .app-page:not(.app-page--login) .dashboard-statusbar .alert-strip__label.module-title,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title {
    font-size: 0.9rem;
  }

  .dashboard-page.dashboard-page--refined .subpanel__head-copy .module-heading {
    font-size: 0.94rem;
  }
}

/* System settings workspace page. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 590px;
}

.section-main-layout--settings {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 6px;
}

.app-page--settings .settings-panel--compact {
  align-content: start;
  max-width: none;
  padding: 16px;
  border-radius: 22px;
}

.app-page--settings .settings-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.app-page--settings .settings-input-control {
  position: relative;
}

.app-page--settings .settings-input-control input {
  padding-right: 44px;
}

.app-page--settings .settings-unit {
  position: absolute;
  right: 13px;
  top: 50%;
  color: var(--muted);
  font-size: 0.78rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.app-page--settings .settings-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-page--settings .settings-action-row .primary-button {
  min-height: 34px;
  min-width: 128px;
}

.app-page--settings .settings-edit-link {
  white-space: nowrap;
}

.app-page--settings .settings-timeout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.app-page--settings .settings-timeout-card {
  display: grid;
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, white);
  align-content: space-between;
  gap: 10px;
}

.app-page--settings .settings-timeout-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.app-page--settings .settings-timeout-card strong {
  color: var(--text);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0;
}

.app-page--settings .settings-timeout-card small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.app-page--settings .settings-alert {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.app-page--settings .settings-alert[data-tone="ok"] {
  color: var(--mint);
}

.app-page--settings .settings-alert[data-tone="error"] {
  color: var(--danger);
}

.app-page--settings .settings-mapping-note {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.app-page--settings .settings-mapping-note p {
  margin: 0;
}

.app-page--settings .settings-mapping-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.app-page--settings .settings-mapping-list div {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.app-page--settings .settings-mapping-list dt {
  color: var(--text);
  font-weight: 800;
}

.app-page--settings .settings-mapping-list dd {
  margin: 0;
}

@media (max-width: 760px) {
  .app-page--images .gallery-filter-panel .gallery-filter-form {
    grid-template-columns: 1fr;
  }

  .app-page--images .gallery-filter-panel .gallery-filter-form__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .app-page--settings .settings-form {
    grid-template-columns: 1fr;
  }

  .app-page--settings .settings-timeout-grid {
    grid-template-columns: 1fr;
  }

  .app-page--settings .settings-mapping-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .app-page--settings .settings-action-row .primary-button {
    width: 100%;
  }
}

/* Keep same-ratio desktop screens on the same dashboard composition. */
@media (min-width: 981px) and (max-width: 1679.98px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(220px, 0.78fr) minmax(330px, 1fr) minmax(280px, 0.98fr);
    grid-template-rows: auto;
    align-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .panel--control {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    height: auto;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-self: stretch;
    height: auto;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .panel__head {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    grid-column: 1;
    grid-row: 2;
    min-height: clamp(200px, 23vw, 320px);
    max-height: none;
    margin: 0;
    aspect-ratio: 16 / 9;
  }

  .dashboard-page.dashboard-page--refined .preview-meta {
    grid-column: 1;
    grid-row: 3;
  }

  .dashboard-page.dashboard-page--refined .preview-history {
    grid-column: 1;
    grid-row: 4;
  }
}

@media (min-width: 981px) and (max-width: 1120px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row--system {
    flex-wrap: nowrap;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
    font-size: clamp(1rem, 1.48vw, 1.2rem);
    white-space: nowrap;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__section--system {
    display: none;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions {
    min-width: 0;
    justify-content: flex-end;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
    width: 470px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
    padding-inline: 6px;
    font-size: 0.86rem;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
    width: 196px;
    flex-basis: 196px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip {
    width: 104px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace #logout-button {
    width: 84px;
    min-width: 84px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
    grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(160px, 0.46fr));
    grid-template-rows: repeat(2, minmax(78px, auto));
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .alert-strip--statusline {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 0;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
    min-height: 78px;
  }
}


/* Console status row: compact health cards under the banner, with messages moved to the page floor. */
.dashboard-page.dashboard-page--refined .app-shell {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar__statusline {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 16px;
  align-content: center;
  gap: 5px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title {
  width: 100%;
  min-height: 1.18rem;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.08;
  text-align: center;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title .module-title__icon,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title .module-title__icon {
  flex-basis: 17px;
  width: 17px;
  height: 17px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > strong,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > strong {
  margin-top: 0;
  font-size: 0.86rem;
  line-height: 1.16;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar #status-system-time,
.app-page:not(.app-page--login) .dashboard-statusbar #status-system-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar.workspace-stage {
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: end;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip--statusline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  max-width: none;
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.78)),
    var(--panel);
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__label.module-title {
  min-height: 1rem;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__label .module-title__icon {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__message {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__hint {
  display: inline-flex;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

@media (min-width: 981px) and (max-width: 1120px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
    min-height: 64px;
  }
}

@media (max-width: 760px) {
  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar__statusline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
    min-height: 54px;
    padding: 8px 10px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip--statusline {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 58px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__text {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__message {
    white-space: normal;
  }
}

.dashboard-page .meta-line--capture-times,
.dashboard-page.dashboard-page--refined .meta-line--capture-times,
.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 18px;
  min-height: auto;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.dashboard-page .meta-line--capture-times::-webkit-scrollbar,
.dashboard-page.dashboard-page--refined .meta-line--capture-times::-webkit-scrollbar,
.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times::-webkit-scrollbar {
  display: none;
}

.dashboard-page .meta-line--capture-times .meta-time-pair,
.dashboard-page.dashboard-page--refined .meta-line--capture-times .meta-time-pair,
.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times .meta-time-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dashboard-page .meta-line--capture-times .meta-time-pair strong,
.dashboard-page.dashboard-page--refined .meta-line--capture-times .meta-time-pair strong,
.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times .meta-time-pair strong {
  max-width: none;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}


.dashboard-page.dashboard-page--refined .capture-request-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 24px;
  margin: 0 2px 0 auto;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.dashboard-page.dashboard-page--refined .capture-request-meta[hidden] {
  display: none;
}

.dashboard-page.dashboard-page--refined .capture-request-meta strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .action-row--point .primary-button,
.dashboard-page.dashboard-page--refined .action-row--point .ghost-button {
  flex: 1 1 0;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .action-row--point .primary-button {
  width: auto;
}

.dashboard-page.dashboard-page--refined .point-capture-stop {
  border-color: rgba(212, 79, 79, 0.22);
  color: var(--danger);
}

.dashboard-page.dashboard-page--refined .point-capture-stop.is-active {
  background: rgba(212, 79, 79, 0.08);
}

@media (max-width: 620px) {
  .dashboard-page.dashboard-page--refined .action-row--point {
    flex-direction: column;
  }

  .dashboard-page.dashboard-page--refined .capture-request-meta {
    align-items: center;
    flex-direction: row;
    gap: 6px;
    margin-left: 0;
  }
}

/* Console first-screen compaction: keep the bottom message bar within the initial desktop viewport. */
@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .app-shell {
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
    gap: 8px 12px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
    font-size: clamp(1.16rem, 1.48vw, 1.54rem);
    line-height: 1.02;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
    gap: 5px;
    padding: 4px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .ghost-button,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-chip {
    min-height: 30px;
    padding-inline: 10px;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
    font-size: 0.92rem;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
    gap: 6px;
    padding: 3px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
    gap: 5px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 14px;
    gap: 3px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title {
    min-height: 1rem;
    font-size: 0.92rem;
    line-height: 1.04;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > strong {
    font-size: 0.8rem;
    line-height: 1.12;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    gap: 8px;
    align-items: start;
  }

  .dashboard-page.dashboard-page--refined .stage-brief,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    padding: 10px 12px;
    border-radius: 18px;
  }

  .dashboard-page.dashboard-page--refined .stage-brief,
  .dashboard-page.dashboard-page--refined .stage-brief--merged,
  .dashboard-page.dashboard-page--refined .control-stack,
  .dashboard-page.dashboard-page--refined .stage-preview,
  .dashboard-page.dashboard-page--refined .stage-status,
  .dashboard-page.dashboard-page--refined .ptz-history,
  .dashboard-page.dashboard-page--refined .inspection-points,
  .dashboard-page.dashboard-page--refined .subpanel--point-capture {
    gap: 6px;
  }

  .dashboard-page.dashboard-page--refined .stage-camera {
    gap: 5px;
    padding: 7px 9px;
    border-radius: 14px;
  }

  .dashboard-page.dashboard-page--refined .stage-camera .config-card__camera {
    min-height: 32px;
    gap: 2px;
    padding: 0 6px 1px;
  }

  .dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-head,
  .dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main {
    min-height: 15px;
  }

  .dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-link {
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1;
  }

  .dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main .profile-chip,
  .dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-switch,
  .dashboard-page.dashboard-page--refined .ptz-history__clear {
    min-height: 18px;
    padding-inline: 7px;
    font-size: 0.66rem;
  }

  .dashboard-page.dashboard-page--refined .panel__head,
  .dashboard-page.dashboard-page--refined .subpanel__head {
    gap: 6px 8px;
  }

  .dashboard-page.dashboard-page--refined .panel__head {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .dashboard-page.dashboard-page--refined .panel__caption,
  .dashboard-page.dashboard-page--refined .subpanel__caption,
  .dashboard-page.dashboard-page--refined .stage-camera__copy p {
    font-size: 0.68rem;
    line-height: 1.22;
    -webkit-line-clamp: 1;
  }

  .dashboard-page.dashboard-page--refined .stage-status {
    margin-top: 4px;
    padding-top: 7px;
  }

  .dashboard-page.dashboard-page--refined .stage-status__panel,
  .dashboard-page.dashboard-page--refined .ptz-history,
  .dashboard-page.dashboard-page--refined .inspection-points,
  .dashboard-page.dashboard-page--refined .subpanel {
    padding: 9px 10px;
    border-radius: 14px;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__tools {
    gap: 5px;
    margin-top: 6px;
  }

  .dashboard-page.dashboard-page--refined .stage-status .panel__tools .ghost-button,
  .dashboard-page.dashboard-page--refined .panel--status .panel__tools .ghost-button {
    min-height: 28px;
    min-width: 78px;
    padding-inline: 8px;
  }

  .dashboard-page.dashboard-page--refined .status-board--sidebar {
    gap: 5px;
  }

  .dashboard-page.dashboard-page--refined .readout {
    min-height: 50px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .dashboard-page.dashboard-page--refined .readout span,
  .dashboard-page.dashboard-page--refined .readout__meta,
  .dashboard-page.dashboard-page--refined .ptz-history__item time,
  .dashboard-page.dashboard-page--refined .ptz-history__empty {
    font-size: 0.62rem;
    line-height: 1.12;
  }

  .dashboard-page.dashboard-page--refined .readout strong {
    font-size: 0.9rem;
    line-height: 1.1;
  }

  .dashboard-page.dashboard-page--refined .ptz-history__list {
    max-height: 86px;
    border-radius: 10px;
  }

  .dashboard-page.dashboard-page--refined .ptz-history__item {
    min-height: 25px;
    gap: 6px;
    padding: 4px 7px;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__list {
    max-height: 132px;
  }

  .dashboard-page.dashboard-page--refined .inspection-point {
    gap: 5px 6px;
    padding: 6px;
    border-radius: 11px;
  }

  .dashboard-page.dashboard-page--refined .inspection-point textarea {
    min-height: 44px;
    padding: 7px 9px;
    border-radius: 10px;
    line-height: 1.28;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__status {
    min-height: 14px;
    font-size: 0.64rem;
    line-height: 1.2;
  }

  .dashboard-page.dashboard-page--refined .manual-step-control {
    gap: 6px;
    margin-top: 4px;
  }

  .dashboard-page.dashboard-page--refined .manual-step-control label,
  .dashboard-page.dashboard-page--refined .subpanel--point-capture .manual-step-control label {
    min-height: 54px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .dashboard-page.dashboard-page--refined input,
  .dashboard-page.dashboard-page--refined select {
    min-height: 30px;
    padding-inline: 8px;
    border-radius: 9px;
  }

  .dashboard-page.dashboard-page--refined .action-row--point,
  .dashboard-page.dashboard-page--refined .subpanel--point-capture .action-row--point,
  .dashboard-page.dashboard-page--refined .range-summary,
  .dashboard-page.dashboard-page--refined .mini-status,
  .dashboard-page.dashboard-page--refined .capture-request-meta {
    margin-top: 5px;
  }

  .dashboard-page.dashboard-page--refined .capture-request-meta,
  .dashboard-page.dashboard-page--refined .range-summary,
  .dashboard-page.dashboard-page--refined .mini-status {
    padding: 6px 8px;
    border-radius: 11px;
    font-size: 0.68rem;
    line-height: 1.24;
  }

  .dashboard-page.dashboard-page--refined .range-grid {
    gap: 4px;
    margin-top: 4px;
  }

  .dashboard-page.dashboard-page--refined .range-grid__head,
  .dashboard-page.dashboard-page--refined .range-grid__label {
    min-height: 28px;
    padding-inline: 6px;
    font-size: 0.84rem;
  }

  .dashboard-page.dashboard-page--refined .form-grid--scan {
    margin-top: 8px;
  }

  .dashboard-page.dashboard-page--refined .form-grid--scan,
  .dashboard-page.dashboard-page--refined .action-row {
    gap: 5px;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    min-height: clamp(176px, 24vh, 238px);
    max-height: min(30vh, 260px);
    padding: 8px;
    border-radius: 14px;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame img {
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    object-position: center center;
  }

  .dashboard-page.dashboard-page--refined .meta-line {
    min-height: 38px;
    gap: 3px;
    padding: 5px 8px;
    border-radius: 11px;
  }

  .dashboard-page.dashboard-page--refined .meta-line span {
    font-size: 0.64rem;
  }

  .dashboard-page.dashboard-page--refined .meta-line strong {
    font-size: 0.74rem;
    line-height: 1.18;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .gallery-strip {
    gap: 6px;
    padding-bottom: 4px;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .gallery-strip .thumb-card {
    flex-basis: clamp(88px, 20%, 116px);
    min-width: 88px;
    gap: 4px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar.workspace-stage {
    align-self: start;
    margin-top: 0;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip--statusline {
    min-height: 42px;
    padding: 7px 12px;
    border-radius: 14px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__label.module-title,
  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip__message {
    font-size: 0.84rem;
  }
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .subpanel__head .capture-request-meta {
  margin: 0 2px 0 auto;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

/* Settings user management. */
.app-page--settings .settings-panel--users,
.app-page--settings .settings-panel--account {
  max-width: none;
}

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

.app-page--settings .settings-panel--account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
}

.app-page--settings .settings-panel--account .panel__head {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.app-page--settings .settings-panel--account .eyebrow {
  margin: 0;
  white-space: nowrap;
}

.app-page--settings .settings-account-summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.app-page--settings .settings-account-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.app-page--settings .settings-account-summary strong {
  color: var(--text);
  font-size: 1rem;
}

.app-page--settings .settings-account-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.app-page--settings .settings-account-summary .primary-button,
.app-page--settings .settings-account-summary .settings-logout-button {
  min-width: 132px;
}

.app-page--settings .settings-user-create {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(120px, 0.7fr) auto auto;
  align-items: end;
  margin-bottom: 10px;
}

.app-page--settings .settings-users-section {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
}

.app-page--settings .settings-users-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-page--settings .settings-users-section__head h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.app-page--settings .settings-application-list {
  display: grid;
  gap: 8px;
}

.app-page--settings .settings-application-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.app-page--settings .settings-application-card__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-page--settings .settings-application-card__main strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page--settings .settings-application-card__main span,
.app-page--settings .settings-application-card__main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.app-page--settings .settings-application-card__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.app-page--settings .settings-permission-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
}

.app-page--settings .settings-permission-fieldset legend,
.app-page--settings .settings-permission-panel strong {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.app-page--settings .settings-permission-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-page--settings .settings-permission-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
}

.app-page--settings .settings-permission-check input {
  width: 14px;
  min-height: 14px;
  accent-color: var(--blue);
}

.app-page--settings .settings-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  color: var(--text);
  white-space: nowrap;
}

.app-page--settings .settings-inline-check input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--amber);
}

.app-page--settings .settings-inline-check span {
  color: var(--text);
  font-size: 0.82rem;
}

.app-page--settings .settings-inline-check--form {
  align-content: end;
  align-self: end;
  padding-bottom: 2px;
}

.app-page--settings .settings-user-create .settings-action-row {
  grid-column: auto;
  align-self: end;
}

.app-page--settings .settings-user-list {
  display: grid;
  gap: 8px;
}

.app-page--settings .settings-user-card {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(210px, 0.9fr) minmax(260px, 1.1fr) minmax(360px, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, white);
}

.app-page--settings .settings-user-card[data-status="disabled"] {
  opacity: 0.72;
}

.app-page--settings .settings-user-card__identity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.app-page--settings .settings-user-card__identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page--settings .settings-user-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.app-page--settings .settings-user-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(228, 170, 86, 0.24);
  border-radius: 999px;
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 800;
}

.app-page--settings .settings-user-badge[data-status="active"] {
  border-color: rgba(140, 224, 197, 0.28);
  color: var(--mint);
}

.app-page--settings .settings-user-badge[data-status="disabled"] {
  border-color: rgba(255, 117, 109, 0.26);
  color: var(--danger);
}

.app-page--settings .settings-user-badge--permission {
  border-color: rgba(72, 124, 199, 0.22);
  color: var(--blue);
}

.app-page--settings .settings-user-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.app-page--settings .settings-user-card__meta div {
  display: grid;
  gap: 3px;
}

.app-page--settings .settings-user-card__meta dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.app-page--settings .settings-user-card__meta dd {
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.app-page--settings .settings-user-card__controls {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto auto auto auto;
  gap: 6px;
  align-items: center;
}

.app-page--settings .settings-user-card__controls select {
  min-width: 96px;
  min-height: 32px;
}

.app-page--settings .settings-user-card__controls .ghost-button {
  min-height: 32px;
  padding-inline: 10px;
}

.app-page--settings .settings-permission-panel {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.app-page--settings .settings-user-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
}

.app-page--settings .settings-user-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 70px rgba(12, 24, 36, 0.26);
}

.app-page--settings .settings-user-dialog__form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.app-page--settings .settings-user-dialog__form label {
  display: grid;
  gap: 6px;
}

.app-page--settings .settings-user-dialog__form label span {
  color: var(--muted);
  font-size: 0.78rem;
}

.app-page--settings .settings-user-dialog__actions {
  justify-content: flex-end;
}

@media (max-width: 1120px) {
  .app-page--settings .settings-user-create {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-page--settings .settings-user-create .settings-action-row {
    grid-column: 1 / -1;
  }

  .app-page--settings .settings-user-card {
    grid-template-columns: 1fr;
  }

  .app-page--settings .settings-application-card {
    grid-template-columns: 1fr;
  }

  .app-page--settings .settings-user-card__controls {
    grid-template-columns: minmax(120px, 1fr) auto auto auto auto;
  }
}

@media (max-width: 760px) {
  .app-page--settings .settings-panel--account {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .app-page--settings .settings-account-summary {
    align-items: center;
    flex-direction: row;
  }

  .app-page--settings .settings-account-summary .primary-button,
  .app-page--settings .settings-account-summary .settings-logout-button {
    min-width: 104px;
  }

  .app-page--settings .settings-user-card__meta,
  .app-page--settings .settings-user-card__controls {
    grid-template-columns: 1fr;
  }

  .app-page--settings .settings-inline-check {
    justify-content: flex-start;
  }
}


/* Workspace navigation stays single-line on operational pages. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  flex-wrap: nowrap;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
  white-space: nowrap;
}

@media (max-width: 1680px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    gap: 5px;
    padding: 5px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 0.9rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.monitor-console-page {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    linear-gradient(135deg, #edf7ff 0%, #dcecff 47%, #f2edff 100%),
    #edf7ff;
  overflow: hidden;
}

body.cloud-console-page {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    linear-gradient(135deg, #edf7ff 0%, #dcecff 47%, #f2edff 100%),
    #edf7ff;
  overflow: hidden;
}

body.monitor-console-page::before,
body.monitor-console-page::after,
body.cloud-console-page::before,
body.cloud-console-page::after {
  display: none;
}

.monitor-console-page button,
.monitor-console-page input,
.monitor-console-page select,
.monitor-console-page textarea,
.cloud-console-page button,
.cloud-console-page input,
.cloud-console-page select,
.cloud-console-page textarea {
  font: inherit;
}

.monitor-console-page svg,
.cloud-console-page svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.monitor-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  color: #0f1f33;
  font-size: 14px;
}

.monitor-topbar {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 18px 24px 14px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(48, 103, 176, 0.16);
  box-shadow: 0 8px 28px rgba(45, 92, 160, 0.08);
}

.monitor-topbar .topbar__brand,
.monitor-topbar .topbar__actions {
  min-width: 0;
}

.monitor-topbar .topbar__title--single-line {
  white-space: nowrap;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.monitor-ribbon {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 7px solid #3c8df6;
  border-bottom: 1px solid rgba(48, 103, 176, 0.16);
  box-shadow: 0 8px 28px rgba(45, 92, 160, 0.08);
}

.monitor-ribbon--blank {
  position: relative;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 248, 255, 0.98) 42%, rgba(226, 240, 255, 0.94) 100%);
}

.monitor-ribbon--blank::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: min(136px, 18vw);
  height: 48px;
  background: #3c8df6;
  transform: translateX(-50%);
}

.monitor-ribbon--blank::after {
  content: "";
  position: absolute;
  inset: 7px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69, 143, 239, 0.24), transparent);
}

.monitor-ribbon__tabs,
.monitor-ribbon__user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.monitor-ribbon__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0 12px;
  color: #233958;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #cfdced;
  border-radius: 0;
  line-height: 1;
  white-space: nowrap;
}

.monitor-ribbon__tab--active {
  color: #ffffff;
  background: #3c93ff;
  border-color: #3c93ff;
}

.monitor-ribbon__user {
  color: #405673;
  font-size: 0.9rem;
}

.monitor-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  color: #30537c;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.monitor-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 34px 14px;
  background:
    linear-gradient(180deg, rgba(249, 252, 255, 0.97) 0%, rgba(213, 231, 255, 0.94) 100%);
  border-right: 1px solid rgba(78, 128, 190, 0.18);
  box-shadow: 10px 0 26px rgba(46, 93, 154, 0.11);
}

.monitor-sidebar__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 80px;
  padding: 10px 8px;
  color: #5f6f82;
  text-decoration: none;
  border-radius: 4px;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.monitor-sidebar__item svg {
  width: 19px;
  height: 19px;
}

.monitor-sidebar__item span {
  font-size: 0.98rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.monitor-sidebar__item:hover {
  color: #246fc8;
  background: rgba(218, 238, 255, 0.68);
}

.monitor-sidebar__item--active {
  color: #1673f7;
  background: rgba(185, 224, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(74, 155, 248, 0.18);
}

.monitor-main {
  min-width: 0;
  min-height: 0;
  padding: 24px 6px 8px 20px;
  background:
    linear-gradient(135deg, rgba(229, 245, 255, 0.8) 0%, rgba(222, 237, 255, 0.72) 54%, rgba(239, 231, 255, 0.76) 100%);
}

.monitor-board {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  padding: 18px 30px 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(122, 165, 215, 0.42);
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(54, 100, 170, 0.15);
  overflow: hidden;
}

.monitor-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.1fr) minmax(240px, 1.1fr) auto;
  align-items: end;
  gap: 28px;
  padding-bottom: 12px;
}

.monitor-filter label {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.monitor-filter label span {
  color: #1e2f47;
  font-weight: 700;
  white-space: nowrap;
}

.monitor-filter input,
.monitor-filter select,
.monitor-pagination select,
.monitor-pagination input {
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  color: #20344f;
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 4px;
  outline: none;
}

.monitor-filter input:focus,
.monitor-filter select:focus,
.monitor-pagination input:focus,
.monitor-pagination select:focus {
  border-color: #4698fb;
  box-shadow: 0 0 0 3px rgba(70, 152, 251, 0.14);
}

.monitor-filter__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.monitor-button,
.monitor-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 74px;
  padding: 0 14px;
  color: #344a65;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.monitor-button--primary {
  color: #ffffff;
  background: #3491f7;
  border-color: #3491f7;
}

.monitor-button--outline {
  color: #2484ee;
  background: #f8fcff;
  border-color: #91c6ff;
}

.monitor-alert {
  min-height: 30px;
  padding: 7px 10px;
  color: #52657f;
  background: rgba(245, 250, 255, 0.72);
  border: 1px solid rgba(125, 164, 207, 0.22);
  border-radius: 4px;
}

.monitor-alert[data-tone="ok"] {
  color: #1f684d;
  background: rgba(232, 248, 239, 0.82);
  border-color: rgba(68, 163, 114, 0.26);
}

.monitor-alert[data-tone="danger"] {
  color: #9f3535;
  background: rgba(255, 239, 239, 0.86);
  border-color: rgba(201, 70, 70, 0.28);
}

.monitor-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  align-content: start;
  gap: 24px 18px;
  min-height: 0;
  overflow: auto;
  padding: 8px 2px 12px;
}

.monitor-card {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(120, 141, 163, 0.2);
  border-radius: 8px;
  box-shadow: 0 8px 15px rgba(31, 50, 77, 0.18);
}

.monitor-card__preview {
  position: relative;
  display: grid;
  grid-template-rows: 36px minmax(188px, 1fr);
  min-height: 230px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(14, 24, 38, 0.28), rgba(14, 24, 38, 0)),
    #394150;
}

.monitor-card__topline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px 14px;
}

.monitor-card__topline strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cfd4db;
}

.monitor-card__dot--online {
  background: #68d092;
}

.monitor-card__dot--offline {
  background: #f07a7a;
}

.monitor-card__dot--unknown {
  background: #cfd4db;
}

.monitor-card__switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 2px 0 7px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  background: #3b98ff;
  border-radius: 999px;
  line-height: 1;
}

.monitor-card__switch i {
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 999px;
}

.monitor-card__switch--disabled {
  background: #9aa8b8;
}

.monitor-card__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  color: rgba(255, 255, 255, 0.84);
  background: transparent;
  border: 0;
  cursor: pointer;
  letter-spacing: 1px;
}

.monitor-card__viewer {
  display: grid;
  grid-template-rows: minmax(124px, 1fr) auto auto;
  gap: 7px;
  min-height: 0;
  padding: 0 10px 10px;
}

.monitor-card__visual {
  position: relative;
  min-height: 124px;
  overflow: hidden;
  background: #17202e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  cursor: zoom-in;
  touch-action: none;
}

.monitor-card__visual--empty,
.monitor-card__placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 124px;
  color: rgba(255, 255, 255, 0.7);
}

.monitor-card__visual--empty {
  cursor: default;
  touch-action: auto;
}

.monitor-card__visual--empty > span:last-child {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
}

.monitor-card__status-dot {
  width: 14px;
  height: 14px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: #aeb8c4;
  box-shadow: 0 0 0 5px rgba(174, 184, 196, 0.1);
}

.monitor-card__status-dot--online {
  background: #5fd08f;
  box-shadow: 0 0 0 5px rgba(95, 208, 143, 0.12);
}

.monitor-card__status-dot--offline {
  background: #ec7373;
  box-shadow: 0 0 0 5px rgba(236, 115, 115, 0.12);
}

.monitor-card__play {
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
}

.monitor-card__play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 5px 0 0 8px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid rgba(255, 255, 255, 0.9);
}

.monitor-card__placeholder strong {
  font-weight: 500;
}

.monitor-card__media {
  width: 100%;
  height: 100%;
  min-height: 124px;
  object-fit: cover;
  background: #222;
  transform: scale(var(--monitor-zoom-scale, 1));
  transform-origin: var(--monitor-zoom-x, 50%) var(--monitor-zoom-y, 50%);
  transition: transform 120ms ease-out, transform-origin 80ms ease-out;
  will-change: transform;
}

.monitor-card__media--snapshot {
  display: block;
}

.monitor-card__zoom-hint {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 7px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(10, 17, 27, 0.58);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.monitor-card__visual:hover .monitor-card__zoom-hint {
  opacity: 1;
}

.monitor-card__quick-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.monitor-card__quick-actions::-webkit-scrollbar {
  display: none;
}

.monitor-card__quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  color: #dcecff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(207, 228, 255, 0.28);
  border-radius: 4px;
  cursor: pointer;
}

.monitor-card__quick-action:hover {
  background: rgba(255, 255, 255, 0.18);
}

.monitor-card__quick-action--primary {
  color: #ffffff;
  background: rgba(38, 134, 255, 0.86);
  border-color: rgba(176, 215, 255, 0.38);
}

.monitor-card__quick-action:disabled {
  color: rgba(255, 255, 255, 0.58);
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.08);
}

.monitor-card__live-status {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(229, 240, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-card__live-status[data-tone="ok"] {
  color: #c9ffe1;
}

.monitor-card__live-status[data-tone="busy"] {
  color: #ffe4a8;
}

.monitor-card__live-status[data-tone="danger"] {
  color: #ffc4c4;
}

.monitor-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 0.72fr;
  gap: 0;
  padding: 8px 10px 9px;
}

.monitor-card__meta div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.monitor-card__meta span {
  color: #8a98a8;
  font-size: 0.82rem;
  white-space: nowrap;
}

.monitor-card__meta strong {
  overflow: hidden;
  color: #000000;
  font-size: 0.94rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(142, 165, 195, 0.14);
}

.monitor-card__actions a,
.monitor-card__actions button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #2086ff;
  font: inherit;
  font-size: 0.86rem;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.monitor-card__actions .cloud-danger {
  color: #ef5555;
}

.monitor-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: #586b83;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(91, 140, 191, 0.3);
  border-radius: 6px;
}

.monitor-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  color: #001d3d;
}

.monitor-pagination__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.monitor-pagination select {
  width: 128px;
}

.monitor-pagination input {
  width: 56px;
  text-align: center;
}

.monitor-page-button {
  min-width: 32px;
  width: 32px;
  padding: 0;
  color: #3c5b7e;
}

.monitor-page-button:disabled {
  color: #b8c3d1;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.56);
}

.monitor-page-button--active {
  color: #1c72ff;
  background: #e9f2ff;
  border-color: #4a95ff;
}

.monitor-page-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-page-gap {
  color: #7890aa;
}

@media (min-width: 1600px) {
  .monitor-card-grid {
    grid-template-columns: repeat(5, minmax(250px, 1fr));
  }
}

.cloud-board {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.cloud-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding-bottom: 8px;
}

.cloud-toolbar--wide {
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr) auto;
}

.cloud-toolbar--dataset {
  grid-template-columns: minmax(210px, 1fr) minmax(240px, 1fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) auto;
}
.cloud-board--dataset {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}


.cloud-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cloud-toolbar label span,
.cloud-dialog label span {
  color: #1e2f47;
  font-weight: 700;
  white-space: nowrap;
}

.cloud-toolbar input,
.cloud-toolbar select,
.cloud-dialog input,
.cloud-dialog select,
.cloud-dialog textarea {
  min-width: 0;
  min-height: 32px;
  padding: 0 12px;
  color: #20344f;
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 4px;
  outline: none;
}

.cloud-dialog textarea {
  min-height: 110px;
  padding-block: 8px;
  resize: vertical;
}

.cloud-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.cloud-table-wrap {
  min-height: 0;
  overflow: auto;
  background: rgba(255, 255, 255, 0.42);
  padding-top: 8px;
}

.cloud-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #26374f;
}

.cloud-table th {
  height: 40px;
  padding: 0 12px;
  color: #0d2440;
  text-align: left;
  background: #dcecff;
  font-weight: 700;
  white-space: nowrap;
}

.cloud-table--resizable th {
  position: relative;
  padding-right: 18px;
  user-select: none;
}

.cloud-table__header-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-table-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 2;
  width: 9px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: col-resize;
}

.cloud-table-resizer::after {
  position: absolute;
  top: 9px;
  right: 4px;
  bottom: 9px;
  width: 2px;
  content: "";
  background: rgba(44, 119, 210, 0.18);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.16s ease, background-color 0.16s ease;
}

.cloud-table-resizer:hover::after,
.cloud-table-resizer:focus-visible::after,
.is-resizing-table-column .cloud-table-resizer::after {
  background: rgba(32, 134, 255, 0.72);
  opacity: 1;
}

.is-resizing-table-column,
.is-resizing-table-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

.cloud-table td {
  min-height: 54px;
  padding: 12px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(142, 165, 195, 0.18);
}

.cloud-table tbody tr:nth-child(even) td {
  background: rgba(246, 250, 255, 0.78);
}

.cloud-table__desc {
  line-height: 1.65;
  word-break: break-word;
}

.cloud-actions {
  vertical-align: middle;
}

.cloud-actions__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cloud-actions a,
.cloud-actions button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #2086ff;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.cloud-actions .cloud-danger {
  color: #ef5555;
}

.cloud-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cloud-status i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c8cdd3;
}

.cloud-status--online i {
  background: #12cd35;
}

.cloud-status--offline i {
  background: #c8cdd3;
}

.cloud-mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
  word-break: break-all;
}

.cloud-dialog {
  width: min(620px, calc(100vw - 30px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(32, 64, 112, 0.24);
}

.cloud-dialog::backdrop {
  background: rgba(20, 40, 70, 0.36);
}

.cloud-dialog__panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: #f8fbff;
}

.cloud-dialog__head,
.cloud-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cloud-dialog__head strong {
  color: #10233e;
  font-size: 1.08rem;
}

.cloud-dialog__body {
  display: grid;
  gap: 12px;
}

.cloud-dialog__body label {
  display: grid;
  gap: 7px;
}

.cloud-detail-grid {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px 14px;
}

.cloud-detail-grid span {
  color: #687990;
}

.cloud-detail-grid strong {
  min-width: 0;
  color: #172a45;
  word-break: break-word;
}

.cloud-dialog--topology {
  width: min(1180px, calc(100vw - 24px));
}

.cloud-dialog--readonly .cloud-dialog__actions {
  display: none;
}

.cloud-topology {
  display: grid;
  gap: 14px;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(44, 130, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(44, 130, 255, 0.08) 1px, transparent 1px),
    rgba(245, 250, 255, 0.88);
  background-size: 28px 28px;
  border: 1px solid rgba(116, 164, 230, 0.32);
  border-radius: 8px;
}

.cloud-topology__canvas {
  position: relative;
  min-height: 390px;
  overflow: hidden;
}

.cloud-topology__router,
.cloud-topology__camera,
.cloud-topology__edge,
.cloud-topology__radar {
  position: absolute;
  z-index: 2;
}

.cloud-topology__router {
  top: 0;
  left: 50%;
  width: min(320px, 38%);
  transform: translateX(-50%);
}

.cloud-topology__camera {
  top: 220px;
  left: 0;
  width: 31%;
}

.cloud-topology__edge {
  top: 185px;
  left: 37%;
  width: 35%;
}

.cloud-topology__radar {
  top: 220px;
  right: 0;
  width: 23%;
}

.cloud-topology__node {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 14px 16px;
  color: #193557;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(122, 170, 236, 0.48);
  border-left: 4px solid #2781ff;
  box-shadow: 0 14px 32px rgba(46, 93, 148, 0.12);
}

.cloud-topology__node > span,
.cloud-topology__ports span,
.cloud-topology__device-row span,
.cloud-topology__relations span {
  color: #5f7090;
  font-weight: 800;
}

.cloud-topology__node > strong {
  color: #10294c;
  font-size: 1.08rem;
}

.cloud-topology__node small,
.cloud-topology__device-row em,
.cloud-topology__ports small {
  color: #637797;
  font-style: normal;
  line-height: 1.45;
}

.cloud-topology__node--edge {
  gap: 12px;
  border-left-color: #37b276;
}

.cloud-topology__ports,
.cloud-topology__device-list {
  display: grid;
  gap: 8px;
}

.cloud-topology__ports {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cloud-topology__ports > div,
.cloud-topology__device-row,
.cloud-topology__relations > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: rgba(237, 246, 255, 0.86);
  border: 1px solid rgba(137, 178, 232, 0.36);
}

.cloud-topology__device-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.cloud-topology__device-row em {
  grid-column: 1 / -1;
}

.cloud-topology__link {
  position: absolute;
  z-index: 1;
  color: #1968d6;
  font-size: 0.78rem;
  font-weight: 800;
  pointer-events: none;
}

.cloud-topology__link::before,
.cloud-topology__link::after {
  position: absolute;
  content: "";
  background: #6ea8ff;
}

.cloud-topology__link span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-height: 24px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(104, 155, 226, 0.4);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(54, 109, 185, 0.12);
  white-space: nowrap;
}

.cloud-topology__link--router-camera {
  top: 118px;
  left: 15.5%;
  width: 34.5%;
  height: 102px;
  border-top: 2px solid #6ea8ff;
  border-left: 2px solid #6ea8ff;
}

.cloud-topology__link--router-camera::before {
  top: -52px;
  right: -2px;
  width: 2px;
  height: 52px;
}

.cloud-topology__link--router-camera span {
  top: 17px;
  left: 22px;
}

.cloud-topology__link--router-edge {
  top: 118px;
  left: 50%;
  width: 4.5%;
  height: 67px;
  border-top: 2px solid #6ea8ff;
  border-right: 2px solid #6ea8ff;
}

.cloud-topology__link--router-edge::before {
  top: -52px;
  left: 0;
  width: 2px;
  height: 52px;
}

.cloud-topology__link--router-edge span {
  top: 17px;
  left: 14px;
}

.cloud-topology__link--edge-radar {
  top: 278px;
  left: 72%;
  width: 5%;
  height: 2px;
  border-top: 2px solid #35b57c;
}

.cloud-topology__link--edge-radar::before,
.cloud-topology__link--edge-radar::after {
  top: -24px;
  width: 2px;
  height: 24px;
  background: #35b57c;
}

.cloud-topology__link--edge-radar::before {
  left: 0;
}

.cloud-topology__link--edge-radar::after {
  right: 0;
}

.cloud-topology__link--edge-radar span {
  right: -112px;
  bottom: 10px;
}

.cloud-topology__relations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cloud-topology__relations strong {
  color: #12335e;
  word-break: break-word;
}

.cloud-dialog--topology .cloud-detail-grid {
  padding: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(142, 165, 195, 0.24);
  border-radius: 8px;
}

.edge-topology-page .monitor-board {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.edge-topology-toolbar,
.edge-topology-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

.edge-topology-toolbar h2,
.edge-topology-section-head h2 {
  margin: 0;
  color: #10233e;
  font-size: 1.28rem;
  line-height: 1.2;
}

.edge-topology-toolbar p {
  margin: 5px 0 0;
  color: #5f7090;
  line-height: 1.4;
}

.edge-topology-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 520px;
  min-width: 0;
  flex-wrap: nowrap;
}

.edge-topology-toolbar__actions > .monitor-alert,
.agent-manager-toolbar__actions > .monitor-alert {
  display: block;
  flex: 1 1 300px;
  min-width: 180px;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  overflow: hidden;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.edge-topology-auto-refresh {
  color: #61728e;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.edge-topology-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
}

.edge-topology-toolbar__filters > strong {
  flex: 0 0 auto;
  color: #5f7090;
  font-size: 0.84rem;
  font-weight: 850;
  white-space: nowrap;
}

.edge-topology-toolbar__filters > strong {
  min-width: 46px;
  padding-inline: 6px;
  color: #246fc8;
  text-align: center;
}

.edge-topology-filter-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #5f7090;
  font-size: 0.84rem;
  font-weight: 850;
  white-space: nowrap;
}

.edge-topology-filter-field > .app-select,
.edge-topology-filter-field > select {
  width: clamp(190px, 16vw, 270px);
  min-height: 36px;
}

.edge-topology-filter-field .app-select__button {
  border-color: rgba(93, 158, 244, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.edge-topology-filter-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  color: #4e6684;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  white-space: nowrap;
}

.edge-topology-filter-button--active {
  color: #0f6bdc;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(93, 158, 244, 0.42);
  box-shadow: 0 8px 20px rgba(43, 117, 213, 0.12);
}

.edge-topology-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
}

.edge-topology-flow {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(44, 130, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(44, 130, 255, 0.06) 1px, transparent 1px),
    rgba(247, 251, 255, 0.86);
  background-size: 28px 28px;
  border: 1px solid rgba(116, 164, 230, 0.3);
  border-radius: 8px;
}

.edge-flow-master {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.edge-flow-body {
  display: grid;
  gap: 10px;
}

.edge-flow-columns {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 44px minmax(260px, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(91, 145, 215, 0.3);
}

.edge-flow-columns span {
  min-width: 0;
  padding-inline: 15px;
  color: #415f82;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.edge-flow-columns span:nth-child(2) {
  padding: 0;
}

.edge-flow-chain {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 44px minmax(260px, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 6px;
  position: relative;
}

.edge-flow-chain:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  border-bottom: 1px dashed rgba(91, 145, 215, 0.45);
  pointer-events: none;
}

.edge-flow-chain::before {
  display: none;
}

.edge-flow-link {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  min-height: 36px;
  color: #2f80ed;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;
  isolation: isolate;
}

.edge-flow-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(47, 128, 237, 0.24), rgba(47, 128, 237, 0.86));
  border-radius: 999px;
  transform: translateY(-50%);
}

.edge-flow-link span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: rgba(247, 251, 255, 0.96);
  border: 1px solid rgba(47, 128, 237, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(47, 128, 237, 0.16);
}

.edge-flow-cameras {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  padding-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.edge-flow-cameras > .edge-flow-node {
  flex: 1 0 280px;
  box-sizing: border-box;
}

.edge-flow-cameras > .edge-flow-node:only-child {
  flex-basis: 100%;
}

.edge-flow-chain--camera-stack .edge-flow-cameras {
  flex-direction: column;
  overflow: visible;
  padding-bottom: 0;
}

.edge-flow-chain--camera-stack .edge-flow-cameras > .edge-flow-node {
  flex: 0 0 auto;
  width: 100%;
}

.edge-flow-chain > .edge-flow-node--edge {
  grid-column: 1;
  grid-row: 1;
}

.edge-flow-chain > .edge-flow-node--edge,
.edge-flow-chain > .edge-flow-cameras {
  align-self: stretch;
}

.edge-flow-chain--camera-stack > .edge-flow-node--edge,
.edge-flow-chain--camera-stack > .edge-flow-cameras {
  align-self: center;
}

.edge-flow-probe-slot {
  display: grid;
  align-self: start;
  gap: 5px;
  min-width: 0;
}

.edge-flow-probe-slot--edge {
  grid-column: 1;
  grid-row: 2;
}

.edge-flow-probe-slot--camera {
  grid-column: 3;
  grid-row: 2;
}

.edge-flow-node {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 9px 12px;
  color: #193557;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(122, 170, 236, 0.48);
  border-left: 4px solid #2781ff;
  border-radius: 6px;
  box-shadow: 0 14px 32px rgba(46, 93, 148, 0.1);
}

.edge-flow-node--master {
  width: min(520px, 100%);
  border-left-color: #195fae;
}

.edge-flow-node--edge,
.edge-flow-node--camera,
.edge-flow-node--unbound {
  box-sizing: border-box;
  min-height: 164px;
}

.edge-flow-node--edge {
  border-left-color: #15856f;
}

.edge-flow-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
}

.edge-flow-brief span {
  color: #5f7090;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.edge-flow-brief span:last-child {
  flex-basis: 100%;
}

.edge-flow-node--camera {
  border-left-color: #2f80ed;
}

.edge-flow-camera-statuses {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.edge-camera-connectivity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid rgba(139, 163, 190, 0.45);
  border-radius: 999px;
  color: #64758a;
  background: rgba(244, 247, 250, 0.92);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.edge-camera-connectivity i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ba9b8;
  box-shadow: 0 0 0 3px rgba(155, 169, 184, 0.14);
}

.edge-camera-connectivity--online {
  color: #08795f;
  border-color: rgba(25, 159, 119, 0.38);
  background: rgba(231, 250, 243, 0.95);
}

.edge-camera-connectivity--online i {
  background: #16a078;
  box-shadow: 0 0 0 3px rgba(22, 160, 120, 0.15);
}

.edge-camera-connectivity--offline {
  color: #b33a37;
  border-color: rgba(209, 83, 78, 0.38);
  background: rgba(255, 239, 237, 0.96);
}

.edge-camera-connectivity--offline i {
  background: #d4514c;
  box-shadow: 0 0 0 3px rgba(212, 81, 76, 0.14);
}

.edge-flow-node--disabled,
.edge-flow-node--empty {
  border-left-color: #9aa9ba;
  opacity: 0.86;
}

.edge-flow-node--unbound {
  grid-column: 1 / -1;
  align-content: center;
  border-color: rgba(229, 163, 55, 0.48);
  border-left-color: #e69a20;
  background: rgba(255, 250, 236, 0.96);
  opacity: 1;
}

.edge-flow-unbound__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edge-flow-warning {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: #e59a22;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(229, 154, 34, 0.15);
  font-size: 0.9rem;
  font-weight: 950;
}

.edge-flow-unbound__action {
  justify-self: start;
  min-height: 32px;
  padding: 5px 13px;
  color: #9a5c00;
  background: rgba(255, 245, 214, 0.98);
  border: 1px solid rgba(218, 142, 22, 0.52);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 850;
}

.edge-flow-unbound__action:hover {
  color: #744400;
  background: #ffe9ad;
}

.edge-binding-help {
  margin: 0;
  padding: 10px 12px;
  color: #5f6f83;
  background: rgba(239, 247, 255, 0.88);
  border: 1px solid rgba(116, 163, 220, 0.32);
  border-radius: 6px;
  line-height: 1.55;
}

.edge-binding-help a {
  margin-inline: 4px;
  color: #176fd1;
  font-weight: 850;
}

.edge-flow-node__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.edge-flow-node strong {
  min-width: 0;
  color: #10294c;
  font-size: 0.98rem;
  line-height: 1.25;
  word-break: break-word;
}

.edge-flow-node p,
.edge-flow-node small {
  margin: 0;
  color: #5f7090;
  font-size: 0.86rem;
  line-height: 1.3;
  word-break: break-word;
}

.edge-flow-node em {
  margin: 0;
  color: #b13f3f;
  font-style: normal;
  line-height: 1.45;
  word-break: break-word;
}

.edge-flow-node small {
  font-size: 0.86rem;
}

.edge-agent-meta,
.edge-agent-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.edge-agent-chip,
.edge-agent-capabilities span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: #45617f;
  background: rgba(237, 246, 255, 0.86);
  border: 1px solid rgba(138, 184, 238, 0.44);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.edge-agent-chip--ok {
  color: #127a58;
  background: rgba(18, 122, 88, 0.1);
  border-color: rgba(18, 122, 88, 0.22);
}

.edge-agent-chip--warn {
  color: #af6b15;
  background: rgba(175, 107, 21, 0.12);
  border-color: rgba(175, 107, 21, 0.24);
}

.edge-flow-node__head > span,
.edge-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  color: #246fc8;
  background: rgba(36, 111, 200, 0.1);
  border: 1px solid rgba(36, 111, 200, 0.18);
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}

.edge-status--online {
  color: #127a58;
  background: rgba(18, 122, 88, 0.1);
  border-color: rgba(18, 122, 88, 0.22);
}

.edge-status--offline {
  color: #b13f3f;
  background: rgba(177, 63, 63, 0.1);
  border-color: rgba(177, 63, 63, 0.22);
}

.edge-status--unknown {
  color: #64748b;
  background: rgba(100, 116, 139, 0.1);
  border-color: rgba(100, 116, 139, 0.2);
}

.edge-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.edge-flow-actions--compact {
  gap: 5px;
}

.edge-flow-actions button,
.edge-topology-list button {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  color: #2086ff;
  background: rgba(233, 245, 255, 0.86);
  border: 1px solid rgba(144, 191, 245, 0.72);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
}

.edge-flow-actions button:disabled {
  color: #7f91a9;
  background: rgba(235, 241, 248, 0.82);
  border-color: rgba(160, 178, 201, 0.42);
  cursor: wait;
}

.edge-topology-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

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

.edge-topology-stat-grid article,
.edge-topology-edge-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(122, 165, 215, 0.34);
  border-radius: 6px;
}

.edge-topology-stat-grid span,
.edge-topology-edge-item span,
.edge-topology-edge-item small {
  color: #61728e;
  font-weight: 800;
}

.edge-topology-stat-grid strong {
  color: #10294c;
  font-size: 1.28rem;
}

.edge-topology-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.edge-topology-edge-item > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.edge-topology-edge-item strong {
  color: #10294c;
  font-size: 1rem;
}

.edge-topology-edge-item p,
.edge-topology-edge-item em {
  margin: 0;
  color: #5f7090;
  line-height: 1.45;
  word-break: break-word;
}

.edge-topology-edge-item em {
  color: #b13f3f;
  font-style: normal;
}

.edge-topology-bindings {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.edge-topology-table-wrap {
  max-height: 260px;
}

.edge-topology-table th:nth-child(1),
.edge-topology-table td:nth-child(1) {
  width: 19%;
}

.edge-topology-table th:nth-child(2),
.edge-topology-table td:nth-child(2) {
  width: 16%;
}

.edge-topology-table th:nth-child(5),
.edge-topology-table td:nth-child(5) {
  width: 108px;
}

.edge-topology-detail-dialog {
  width: min(860px, calc(100vw - 30px));
}

.edge-topology-detail-dialog .cloud-dialog__panel {
  max-width: 100%;
}

.edge-detail-body {
  display: grid;
  gap: 14px;
}

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

.edge-detail-grid div,
.edge-detail-section {
  min-width: 0;
  padding: 10px;
  background: rgba(247, 251, 255, 0.82);
  border: 1px solid rgba(138, 184, 238, 0.26);
  border-radius: 6px;
}

.edge-detail-grid span {
  display: block;
  margin-bottom: 4px;
  color: #61728e;
  font-weight: 850;
}

.edge-detail-grid strong,
.edge-detail-cameras strong {
  color: #10294c;
  word-break: break-word;
}

.edge-detail-section {
  display: grid;
  gap: 9px;
}

.edge-detail-section h3 {
  margin: 0;
  color: #10233e;
  font-size: 0.98rem;
}

.edge-detail-section p {
  margin: 0;
  color: #b13f3f;
  line-height: 1.45;
  word-break: break-word;
}

.edge-detail-cameras {
  display: grid;
  gap: 8px;
}

.edge-detail-cameras article {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(142, 165, 195, 0.22);
  border-radius: 6px;
}

.edge-detail-cameras span {
  color: #5f7090;
  line-height: 1.4;
  word-break: break-word;
}

.edge-topology-dialog {
  width: min(760px, calc(100vw - 30px));
}

.edge-topology-dialog .cloud-dialog__panel {
  max-width: 100%;
}

.edge-topology-dialog .cloud-dialog__body,
.edge-topology-binding-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edge-topology-dialog .cloud-dialog__body label,
.edge-topology-dialog .cloud-dialog__body input,
.edge-topology-dialog .cloud-dialog__body select,
.edge-topology-dialog .cloud-dialog__body textarea {
  min-width: 0;
  max-width: 100%;
}

.edge-topology-dialog .cloud-dialog__body label:has(textarea),
.edge-topology-form-full {
  grid-column: 1 / -1;
}

.edge-topology-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: rgba(240, 248, 255, 0.8);
  border: 1px solid rgba(121, 171, 231, 0.3);
  border-radius: 8px;
}

.edge-connectivity-log-list {
  display: grid;
  align-content: start;
  gap: 9px;
  max-height: min(62vh, 580px);
  overflow: auto;
}

.edge-connectivity-log-list article {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  background: rgba(247, 251, 255, 0.9);
  border: 1px solid rgba(128, 173, 229, 0.3);
  border-left: 4px solid #7a91ad;
  border-radius: 7px;
}

.edge-connectivity-log-list article[data-tone="success"] {
  border-left-color: #149b72;
}

.edge-connectivity-log-list article[data-tone="warning"] {
  border-left-color: #e79a19;
}

.edge-connectivity-log-list article[data-tone="error"] {
  border-left-color: #e05252;
}

.edge-connectivity-log-list article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.edge-connectivity-log-list strong {
  color: #173353;
}

.edge-connectivity-log-list time,
.edge-connectivity-log-list p {
  color: #637590;
}

.edge-connectivity-log-list time {
  flex: 0 0 auto;
  font-size: 0.82rem;
}

.edge-connectivity-log-list p {
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

.edge-agent-deploy-dialog {
  width: min(780px, calc(100vw - 30px));
}

.edge-agent-deploy-dialog .cloud-dialog__panel {
  max-width: 100%;
}

.agent-deploy-summary {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 18px 0;
  color: #5f7090;
  font-weight: 800;
}

.agent-deploy-summary strong {
  min-width: 0;
  color: #10294c;
  word-break: break-word;
}

.agent-deploy-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-deploy-form input {
  min-width: 0;
}

.edge-topology-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  min-height: 40px;
}

.edge-topology-check input {
  width: 18px;
  min-height: 18px;
}

.edge-topology-empty {
  padding: 12px;
  color: #61728e;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(122, 165, 215, 0.4);
  border-radius: 6px;
}

@media (max-width: 1180px) {
  .edge-topology-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .edge-topology-toolbar,
  .edge-topology-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .edge-topology-toolbar__actions,
  .edge-topology-toolbar__filters {
    justify-content: flex-start;
  }

  .edge-topology-toolbar__actions {
    flex-wrap: wrap;
  }

  .edge-topology-toolbar__actions > .monitor-alert {
    flex-basis: 100%;
  }

  .edge-topology-filter-field {
    width: 100%;
  }

  .edge-topology-filter-field > .app-select,
  .edge-topology-filter-field > select {
    flex: 1 1 auto;
    width: auto;
  }

  .edge-flow-chain,
  .edge-topology-side,
  .edge-topology-dialog .cloud-dialog__body,
  .edge-detail-grid,
  .agent-deploy-form,
  .edge-topology-binding-form {
    grid-template-columns: 1fr;
  }

  .edge-flow-chain > .edge-flow-node--edge,
  .edge-flow-chain > .edge-flow-link,
  .edge-flow-chain > .edge-flow-cameras,
  .edge-flow-chain > .edge-flow-probe-slot {
    grid-column: 1;
    grid-row: auto;
  }

  .edge-flow-columns {
    display: none;
  }

  .edge-flow-link {
    min-height: 34px;
  }

  .edge-flow-link::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(47, 128, 237, 0.24), rgba(47, 128, 237, 0.86));
    transform: translateX(-50%);
  }

  .edge-flow-link span {
    transform: rotate(90deg);
  }

  .edge-topology-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .cloud-topology__canvas {
    display: grid;
    gap: 12px;
    min-height: 0;
  }

  .cloud-topology__router,
  .cloud-topology__camera,
  .cloud-topology__edge,
  .cloud-topology__radar {
    position: static;
    width: auto;
    transform: none;
  }

  .cloud-topology__link {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 32px;
    border-top: 2px solid #6ea8ff;
  }

  .cloud-topology__link::before,
  .cloud-topology__link::after {
    display: none;
  }

  .cloud-topology__link span {
    position: static;
    margin-top: 6px;
    white-space: normal;
  }

  .cloud-topology__link--edge-radar {
    border-top-color: #35b57c;
  }

  .cloud-topology__ports,
  .cloud-topology__relations {
    grid-template-columns: 1fr;
  }
}

.monitor-card__placeholder {
  border: 0;
  cursor: pointer;
}

.monitor-card__video-slot {
  position: relative;
  min-height: 124px;
}

.monitor-card__video-slot > a {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  color: #ffffff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.48);
  border-radius: 3px;
}

.monitor-card__video-slot:not(.monitor-card__video-slot--manual) > a {
  opacity: 0;
  transition: opacity 150ms ease;
}

.monitor-card__video-slot:hover > a {
  opacity: 1;
}

.dataset-batch-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 6px 10px;
  background: rgba(244, 249, 255, 0.84);
  border: 1px solid rgba(125, 164, 207, 0.24);
  border-radius: 5px;
}

.dataset-batch-toolbar__summary {
  color: #3d5878;
  font-weight: 700;
}

.dataset-batch-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dataset-batch-toolbar .monitor-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}


.dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-content: start;
  gap: 18px 22px;
  min-height: 0;
  overflow: auto;
  padding: 10px 10px 14px;
}

.dataset-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  position: relative;
  padding: 7px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid transparent;
  border-radius: 7px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.dataset-card--selected {
  background: rgba(232, 244, 255, 0.9);
  border-color: #4b9cf7;
  box-shadow: 0 0 0 2px rgba(75, 156, 247, 0.16);
}

.dataset-card__select {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  color: #244664;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(97, 143, 191, 0.46);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(30, 65, 100, 0.18);
  cursor: pointer;
}

.dataset-card__select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2588f4;
}



.dataset-card__image {
  display: block;
  aspect-ratio: 16 / 6.5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 5px;
}

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

.dataset-card__time,
.dataset-card__meta {
  color: #8a98a8;
  font-size: 0.88rem;
}

.dataset-card__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dataset-card__meta strong,
.dataset-card__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dataset-card__meta strong {
  color: #14253b;
  font-size: 0.95rem;
}

.dataset-card__meta span {
  display: block;
}

.dataset-card__meta b {
  margin-right: 6px;
  color: #5c6f88;
  font-weight: 700;
}

.dataset-card__tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dataset-card__tags span {
  padding: 3px 9px;
  color: #1583ff;
  background: #e9f5ff;
  border: 1px solid #c9e6ff;
  border-radius: 4px;
  font-weight: 700;
}

.dataset-card__tags span:nth-child(2) {
  color: #45a600;
  background: #efffe7;
  border-color: #d7f5bc;
}

.dataset-card__tags button {
  margin-left: auto;
  color: #6e7885;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cloud-board--analysis {
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
}

.analysis-camera-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  overflow: hidden;
}

.analysis-camera-list h2 {
  margin: 0;
  padding: 13px 18px;
  color: #1673f7;
  font-size: 1.02rem;
  text-align: center;
  background: linear-gradient(90deg, #c9e0ff 0%, #f6fbff 100%);
}

#analysis-camera-tree {
  overflow: auto;
  padding: 12px 12px 18px;
}

#analysis-camera-tree details {
  margin-bottom: 8px;
}

#analysis-camera-tree summary {
  cursor: pointer;
  color: #12273f;
  font-weight: 700;
  list-style: none;
}

.analysis-camera-list__points {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px 22px;
}

.analysis-camera-list__points button {
  min-height: 30px;
  color: #213852;
  background: transparent;
  border: 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}

.analysis-camera-list__points button.is-active {
  color: #ffffff;
  background: #3f8cff;
  padding-inline: 12px;
}

.analysis-workspace {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.analysis-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 22px;
  align-items: start;
}

.analysis-snapshot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.52);
  border: 1px dashed rgba(68, 111, 155, 0.45);
  border-radius: 4px;
}

.analysis-snapshot span {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 2;
  padding: 6px 14px;
  background: rgba(74, 136, 236, 0.42);
  border-radius: 0 0 4px 4px;
}

.analysis-snapshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.analysis-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.analysis-title-row h2 {
  margin: 0;
  color: #020b16;
  font-size: 1.15rem;
}

.analysis-chart {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.analysis-chart__plot > svg {
  width: 100%;
  height: min(44vh, 420px);
}

.analysis-legend {
  position: absolute;
  top: 6px;
  left: 50%;
  display: flex;
  gap: 18px;
  transform: translateX(-50%);
  color: #4f5c6d;
}

.analysis-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 999px;
  border: 2px solid currentColor;
}

.legend-mint {
  color: #31b7b4;
}

.legend-blue {
  color: #4d8cff;
}

.legend-purple {
  color: #806cf0;
}

@media (max-width: 1180px) {
  body.cloud-console-page {
    overflow: auto;
  }

  .cloud-toolbar,
  .cloud-toolbar--wide,
  .cloud-toolbar--dataset {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cloud-board--analysis {
    grid-template-columns: 1fr;
  }

  .analysis-strip {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .cloud-toolbar label {
    grid-template-columns: 1fr;
  }

  .analysis-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  body.monitor-console-page {
    overflow: auto;
  }

  .monitor-shell {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .monitor-board {
    overflow: visible;
  }

  .monitor-filter {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .monitor-filter__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .monitor-shell {
    display: block;
  }

  .monitor-topbar {
    padding: 12px;
  }

  .monitor-ribbon {
    position: sticky;
    top: 0;
    z-index: 4;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 54px;
    padding: 8px 12px;
  }

  .monitor-sidebar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(78, 128, 190, 0.18);
  }

  .monitor-sidebar__item {
    flex: 0 0 auto;
    min-height: 58px;
    min-width: 86px;
  }

  .monitor-main {
    padding: 10px;
  }

  .monitor-board {
    height: auto;
    min-height: calc(100vh - 140px);
    padding: 12px;
  }

  .monitor-filter label {
    grid-template-columns: 1fr;
  }

  .monitor-filter__actions,
  .monitor-pagination,
  .monitor-pagination__controls {
    flex-wrap: wrap;
  }

  .monitor-card__meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Shared workspace banner: keep the primary page navigation on one row everywhere. */
.app-page:not(.app-page--login) .topbar.topbar--workspace {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  min-height: 74px;
  margin: 0;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(48, 103, 176, 0.16);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(45, 92, 160, 0.08);
}

.app-page:not(.app-page--login) .monitor-topbar {
  grid-column: 1 / -1;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar {
  min-width: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row--system {
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--system {
  max-width: none;
  font-size: clamp(1.14rem, 1.45vw, 1.52rem);
  line-height: 1.08;
  white-space: nowrap;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  overflow: hidden;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  display: inline-flex;
  grid-template-columns: none;
  flex-direction: row;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  gap: 8px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav::-webkit-scrollbar {
  display: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  white-space: nowrap;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  min-width: max-content;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
.app-page:not(.app-page--login) .topbar.topbar--workspace .ghost-button {
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px 14px;
    padding-inline: 16px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    gap: 6px;
    padding: 5px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
    padding: 0 11px;
    font-size: 0.82rem;
  }
}

@media (max-width: 1080px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions {
    overflow: hidden;
  }
}

/* Unified page banner: monitor-side pages use the same top area as the main workspace. */
.monitor-shell {
  width: calc(100% - 12px);
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 10px 0 18px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.monitor-shell > .topbar.topbar--workspace,
.app-shell > .topbar.topbar--workspace,
.app-shell--section > .topbar.topbar--workspace {
  align-self: start;
}

.monitor-shell > .topbar.topbar--workspace {
  grid-column: 1 / -1;
}

.app-page:not(.app-page--login) .monitor-topbar {
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(48, 103, 176, 0.16);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(45, 92, 160, 0.08);
}

.app-page:not(.app-page--login) .app-shell,
.app-page:not(.app-page--login) .app-shell--section,
.dashboard-page.dashboard-page--refined .app-shell {
  width: calc(100% - 12px);
  max-width: none;
}

/* Console page: keep the workbench content-height based while aligning the
   three main panels to the same bottom edge. */
.dashboard-page.dashboard-page--refined .app-shell {
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  min-height: 0;
  padding-bottom: 10px;
  align-content: start;
}

.dashboard-page.dashboard-page--refined .dashboard-main {
  margin-top: 0;
}

.dashboard-page.dashboard-page--refined .dashboard-workbench {
  align-items: stretch;
}

.dashboard-page.dashboard-page--refined .dashboard-column--left,
.dashboard-page.dashboard-page--refined .stage-brief,
.dashboard-page.dashboard-page--refined .panel--control,
.dashboard-page.dashboard-page--refined .stage-preview {
  align-self: stretch;
  height: auto;
}

.dashboard-page.dashboard-page--refined .dashboard-column--left,
.dashboard-page.dashboard-page--refined .stage-brief {
  height: 100%;
}

.dashboard-page.dashboard-page--refined .stage-preview {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
  height: 100%;
  min-height: clamp(220px, 28vw, 420px);
  max-height: 52vh;
}

.dashboard-page.dashboard-page--refined .dashboard-messagebar.workspace-stage {
  align-self: start;
}

@media (max-width: 1180px) {
  .monitor-shell {
    width: calc(100% - 12px);
    padding-top: 18px;
  }
}

@media (max-width: 760px) {
  .monitor-shell {
    width: min(100%, calc(100vw - 12px));
    width: min(100%, calc(100dvw - 12px));
    max-width: calc(100vw - 12px);
    max-width: calc(100dvw - 12px);
    padding: 18px 0;
  }
}

/* Refined system mark: simple lens geometry for the shared workspace banner. */
.topbar__system-icon,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: #f7fbff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.32), transparent 36%),
    linear-gradient(145deg, #0f63d6 0%, #124fa8 52%, #0d2e67 100%);
  border: 1px solid rgba(198, 225, 255, 0.76);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 10px 22px rgba(28, 91, 190, 0.24);
}

.topbar__system-icon::before {
  display: none;
}

.topbar__system-icon::after {
  inset: 5px;
  border: 1px solid rgba(223, 241, 255, 0.34);
  border-radius: 9px;
}

.topbar__system-icon svg,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon svg,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon svg {
  width: 25px;
  height: 25px;
  filter: none;
}

/* Pure-line system mark and roomier workspace navigation. */
.topbar__system-icon,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  color: #255986;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.topbar__system-icon::before,
.topbar__system-icon::after {
  display: none;
}

.topbar__system-icon svg,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon svg,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon svg {
  width: 54px;
  height: 54px;
  filter: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace {
  min-height: 82px;
  padding: 16px 22px;
  gap: 14px 24px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions {
  gap: 14px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  gap: 12px;
  padding: 7px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
.app-page:not(.app-page--login) .topbar.topbar--workspace .ghost-button {
  min-height: 40px;
  padding-inline: 14px;
  font-size: 0.95rem;
}

/* Locked banner metrics: identical title and navigation sizing across every workspace page. */
.app-page:not(.app-page--login) .topbar.topbar--workspace {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) auto;
  align-items: center;
  min-height: 84px;
  padding: 16px 22px;
  gap: 14px 24px;
  box-sizing: border-box;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand {
  display: grid;
  align-content: center;
  align-self: center;
  min-width: 0;
  min-height: 44px;
  gap: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row--system {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  height: 44px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
  max-width: none;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  overflow: visible;
  text-overflow: clip;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon svg {
  width: 54px;
  height: 54px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__inline-user {
  flex: 0 0 auto;
  margin-left: clamp(18px, 3vw, 72px);
  min-width: 112px;
  height: 40px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(55, 116, 178, 0.2);
  box-shadow: 0 10px 24px rgba(44, 102, 172, 0.08);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  gap: 12px;
  padding: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings {
  gap: 2px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings {
  padding-right: 12px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link--menu {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-toggle:hover,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-toggle:focus-visible,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item.is-open .page-nav__menu-toggle {
  background: rgba(47, 128, 237, 0.1);
  color: var(--blue);
  outline: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-toggle .page-nav__chevron {
  margin-left: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__chevron {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-left: 1px;
  background: currentColor;
  opacity: 0.78;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 8px;
  border: 1px solid rgba(55, 116, 178, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 44px rgba(44, 102, 172, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item:hover .page-nav__menu,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item:focus-within .page-nav__menu,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item.is-open .page-nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-item:hover,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-item:focus-visible {
  background: rgba(47, 128, 237, 0.1);
  outline: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-item--danger {
  color: var(--danger);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
  gap: 8px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .user-chip,
.app-page:not(.app-page--login) .topbar.topbar--workspace .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: 14px;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .active-camera-picker-list {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }

  .active-camera-picker-item__summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .active-camera-picker-item__chips {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-start;
  }

  .active-camera-picker-item__action {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Camera management summary cards: card and compact views only show identity, state and actions. */
.app-page--cameras .camera-list--cards,
.app-page--cameras .camera-list--compact {
  align-items: start;
}

.app-page--cameras .profile-card--summary {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.app-page--cameras .profile-card--summary.profile-card--compact {
  padding: 12px 14px;
}

.app-page--cameras .profile-card--summary .profile-card__head {
  align-items: center;
  gap: 14px;
}

.app-page--cameras .profile-card--summary .profile-card__title-row {
  min-height: 30px;
  flex-wrap: nowrap;
}

.app-page--cameras .profile-card--summary .profile-card__title-row h3 {
  max-width: 100%;
  color: #0f766e;
  font-size: 1.08rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-page--cameras .profile-card--summary .profile-card__chips {
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.app-page--cameras .profile-card--summary .profile-chip {
  min-height: 30px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.app-page--cameras .profile-card--summary .profile-card__actions {
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(55, 116, 178, 0.12);
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}

.app-page--cameras .profile-card--summary .profile-card__actions .ghost-button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 30px;
  padding-inline: 9px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.app-page--cameras .profile-card--summary .profile-card__actions [data-action="activate"] {
  min-width: 70px;
}

@media (max-width: 760px) {
  .camera-list--cards,
  .camera-list--compact,
  .camera-group-section__body--cards,
  .camera-group-section__body--compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.camera-inspection-view {
  display: grid;
  gap: 12px;
}

.camera-inspection-view__summary {
  color: #0f766e;
  font-size: 0.9rem;
  font-weight: 800;
}

.camera-inspection-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(55, 116, 178, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.64);
}

.camera-inspection-table__row {
  display: grid;
  grid-template-columns: 54px repeat(3, minmax(56px, 0.55fr)) minmax(160px, 1.4fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(55, 116, 178, 0.1);
}

.camera-inspection-table__row:last-child {
  border-bottom: 0;
}

.camera-inspection-table__row--head {
  min-height: 34px;
  color: #5c728c;
  font-size: 0.72rem;
  font-weight: 900;
  background: rgba(241, 248, 255, 0.94);
}

.camera-inspection-table__row span,
.camera-inspection-table__row strong {
  justify-self: center;
  text-align: center;
}

.camera-inspection-table__row strong {
  color: var(--text);
  font-size: 0.9rem;
}

.camera-inspection-table__row em {
  min-width: 0;
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Latest keyframe metadata: keep filename beside the label and make the strip easier to read. */
.dashboard-page.dashboard-page--refined .stage-preview .preview-meta {
  gap: 7px 14px;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--file {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--file > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.2;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--file > strong {
  max-width: none;
  min-width: 0;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times {
  gap: 8px 20px;
  font-size: 0.82rem;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times .meta-time-pair > span {
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times .meta-time-pair > strong {
  font-size: 0.88rem;
  font-weight: 850;
}

/* Algorithm detection workbench */
.app-page--algorithms .section-main-layout--algorithms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.app-page--algorithms .section-main-layout--algorithms.algorithm-management-layout {
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.app-page--algorithms .algorithm-management-content {
  gap: 12px;
  align-content: start;
}

.app-page--algorithms .algorithm-section-panel[hidden] {
  display: none;
}

.app-page--algorithms .algorithm-section-sidebar .camera-section-tab span {
  font-size: 0.98rem;
}

.app-page--algorithms .algorithm-alert {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(49, 113, 190, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #49627f;
  font-weight: 700;
}

.app-page--algorithms .algorithm-alert[data-tone="ok"] {
  color: #087f6d;
  border-color: rgba(15, 143, 126, 0.28);
}

.app-page--algorithms .algorithm-alert[data-tone="warn"] {
  color: #a36400;
  border-color: rgba(214, 144, 24, 0.28);
}

.app-page--algorithms .algorithm-alert[data-tone="error"] {
  color: #c93a3a;
  border-color: rgba(201, 58, 58, 0.32);
}

.algorithm-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(620px, 1.28fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.algorithm-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  min-width: 0;
}

.algorithm-panel--annotation {
  grid-column: 1 / -1;
}

.algorithm-panel--jobs {
  align-self: stretch;
}

.algorithm-panel .panel__head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.18rem;
  line-height: 1.15;
}

.algorithm-title-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: #1e78ff;
}

.algorithm-title-icon svg {
  width: 24px;
  height: 24px;
}

.algorithm-runtime-list {
  display: grid;
  gap: 8px;
}

.algorithm-runtime-list > div,
.algorithm-gpu-card,
.algorithm-job-card,
.algorithm-annotation-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(77, 112, 154, 0.14);
}

.algorithm-runtime-list span,
.algorithm-gpu-card span,
.algorithm-job-card em,
.algorithm-annotation-row span {
  color: #65758d;
  font-size: 0.86rem;
  font-style: normal;
}

.algorithm-runtime-list strong,
.algorithm-gpu-card strong,
.algorithm-job-card strong,
.algorithm-annotation-row strong {
  min-width: 0;
  color: #16334f;
  font-size: 0.96rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-status,
.algorithm-empty,
.algorithm-gpu-empty {
  margin: 0;
  color: #59708d;
  font-weight: 700;
}

.algorithm-gpu-list {
  display: grid;
  gap: 0;
}

.algorithm-gpu-card {
  grid-template-columns: 68px minmax(0, 1fr) 64px;
}

.algorithm-gpu-card em {
  color: #0f8f7e;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.algorithm-job-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.algorithm-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.algorithm-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px dashed rgba(30, 120, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(240, 248, 255, 0.88), rgba(255, 255, 255, 0.7));
}

.algorithm-guide-step--start {
  border-color: rgba(15, 143, 126, 0.3);
  background:
    linear-gradient(135deg, rgba(231, 250, 245, 0.9), rgba(255, 255, 255, 0.72));
}

.algorithm-guide-step__index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #1e78ff;
  box-shadow: 0 12px 28px rgba(30, 120, 255, 0.18);
  color: #fff;
  font-weight: 900;
}

.algorithm-guide-step--start .algorithm-guide-step__index {
  background: #0f8f7e;
  box-shadow: 0 12px 28px rgba(15, 143, 126, 0.18);
}

.algorithm-guide-step__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.algorithm-guide-step h3 {
  margin: 0;
  color: #16334f;
  font-size: 1rem;
  line-height: 1.2;
}

.algorithm-easy-row,
.algorithm-infer-picker {
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.algorithm-easy-row--compact {
  align-items: end;
}

.algorithm-easy-field {
  display: grid;
  flex: 1 1 180px;
  gap: 6px;
  min-width: 0;
}

.algorithm-easy-field--wide {
  flex-basis: 280px;
}

.algorithm-easy-field--mini {
  flex: 0 0 112px;
}

.algorithm-easy-field > span,
.algorithm-advanced-options summary {
  color: #566b84;
  font-size: 0.84rem;
  font-weight: 800;
}

.algorithm-easy-field input,
.algorithm-easy-field select,
.algorithm-advanced-options input {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(71, 108, 150, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #1a3048;
  font: inherit;
}

.algorithm-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.algorithm-preset-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid rgba(73, 117, 166, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #49627f;
  text-align: left;
  cursor: pointer;
}

.algorithm-preset-card strong,
.algorithm-preset-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-preset-card strong {
  color: #173350;
  font-weight: 900;
}

.algorithm-preset-card span {
  font-size: 0.78rem;
  font-weight: 750;
}

.algorithm-preset-card--active,
.algorithm-preset-card:hover {
  border-color: rgba(30, 120, 255, 0.46);
  background: rgba(229, 242, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(30, 120, 255, 0.12);
}

.algorithm-train-summary {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 143, 126, 0.2);
  border-radius: 12px;
  background: rgba(238, 252, 248, 0.78);
  color: #0f766b;
  font-size: 0.86rem;
  font-weight: 800;
}

.algorithm-advanced-options {
  display: grid;
  gap: 10px;
}

.algorithm-advanced-options summary {
  width: fit-content;
  cursor: pointer;
}

.algorithm-job-form--advanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.algorithm-job-form label,
.algorithm-annotation-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.algorithm-job-form label > span,
.algorithm-annotation-toolbar label > span {
  color: #566b84;
  font-size: 0.84rem;
  font-weight: 800;
}

.algorithm-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
}

.algorithm-help {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid rgba(30, 120, 255, 0.34);
  border-radius: 50%;
  background: rgba(30, 120, 255, 0.08);
  color: #1e78ff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  outline: none;
}

.algorithm-help::before,
.algorithm-help::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-2px);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 60;
}

.algorithm-help::before {
  content: "";
  top: calc(100% + 3px);
  border: 6px solid transparent;
  border-bottom-color: #10233d;
}

.algorithm-help::after {
  content: attr(data-tooltip);
  top: calc(100% + 14px);
  width: max-content;
  max-width: min(320px, calc(100vw - 40px));
  padding: 10px 12px;
  border-radius: 12px;
  background: #10233d;
  box-shadow: 0 16px 32px rgba(16, 35, 61, 0.2);
  color: #f7fbff;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.45;
  white-space: normal;
}

.algorithm-help:hover,
.algorithm-help:focus-visible {
  border-color: rgba(30, 120, 255, 0.62);
  background: rgba(30, 120, 255, 0.16);
}

.algorithm-help:hover::before,
.algorithm-help:hover::after,
.algorithm-help:focus-visible::before,
.algorithm-help:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.algorithm-job-form input,
.algorithm-job-form select,
.algorithm-annotation-toolbar input,
.algorithm-annotation-toolbar select {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(71, 108, 150, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #1a3048;
  font: inherit;
}

.algorithm-job-form__wide {
  grid-column: span 3;
}

.algorithm-job-form__actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
}

.primary-button--wide {
  width: 100%;
}

.algorithm-command {
  min-height: 78px;
  max-height: 160px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(22, 83, 150, 0.18);
  border-radius: 14px;
  background: #f6fbff;
  color: #173350;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.algorithm-job-list {
  display: grid;
  gap: 0;
}

.algorithm-job-card {
  grid-template-columns: minmax(0, 1fr) auto;
  border-left: 3px solid rgba(30, 120, 255, 0.22);
  padding-left: 10px;
}

.algorithm-job-card[data-status="running"],
.algorithm-job-card[data-status="queued"] {
  border-left-color: #1e78ff;
}

.algorithm-job-card[data-status="completed"] {
  border-left-color: #0f8f7e;
}

.algorithm-job-card[data-status="failed"] {
  border-left-color: #d94b4b;
}

.algorithm-job-card > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.algorithm-job-card span {
  color: #66778e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-training-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(15, 143, 126, 0.16);
  border-radius: 14px;
  background: rgba(238, 252, 248, 0.72);
}

.algorithm-training-context > div {
  min-width: 0;
}

.algorithm-training-context span {
  display: block;
  color: #65758d;
  font-size: 0.78rem;
  font-weight: 800;
}

.algorithm-training-context strong {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: #0f8f7e;
  font-size: 0.95rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-infer-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.algorithm-infer-preview {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(49, 113, 190, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.algorithm-infer-preview__image {
  display: grid;
  place-items: center;
  width: 132px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px dashed rgba(30, 120, 255, 0.3);
  border-radius: 12px;
  background: #f4f8ff;
  color: #6a7b94;
  font-size: 0.8rem;
  font-weight: 800;
}

.algorithm-infer-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.algorithm-infer-preview__meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.algorithm-infer-preview__meta strong,
.algorithm-infer-preview__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-infer-preview__meta strong {
  color: #16334f;
  font-size: 0.98rem;
  font-weight: 900;
}

.algorithm-infer-preview__meta span {
  color: #65758d;
  font-size: 0.84rem;
  font-weight: 750;
}

.algorithm-infer-results {
  display: grid;
  gap: 10px;
}

.algorithm-result-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15, 143, 126, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(238, 252, 248, 0.88), rgba(255, 255, 255, 0.74));
}

.algorithm-result-card__visual {
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(244, 248, 255, 0.88);
  color: #59708d;
  font-weight: 900;
}

.algorithm-result-card__visual img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: contain;
}

.algorithm-result-card__body {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.algorithm-result-card__body strong {
  color: #16334f;
  font-size: 1rem;
  font-weight: 900;
}

.algorithm-result-card__body span {
  color: #65758d;
  font-weight: 800;
}

.algorithm-result-card__body pre {
  width: 100%;
  max-height: 96px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border-radius: 12px;
  background: rgba(16, 35, 61, 0.06);
  color: #173350;
  white-space: pre-wrap;
}

.algorithm-dataset-module {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(30, 120, 255, 0.15);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(234, 248, 255, 0.92), rgba(255, 255, 255, 0.82));
}

.algorithm-dataset-module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.algorithm-dataset-module__head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #16334f;
  font-size: 1.08rem;
  line-height: 1.15;
}

.algorithm-dataset-module__head select {
  width: min(520px, 100%);
  min-width: 240px;
}

.algorithm-dataset-picker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(620px, 48%);
}

.algorithm-dataset-picker select {
  flex: 1 1 auto;
}

.algorithm-dataset-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.75fr) minmax(260px, 1.3fr) minmax(120px, 0.5fr) minmax(300px, 1.45fr) auto;
  gap: 10px;
  align-items: end;
}

.algorithm-dataset-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.algorithm-dataset-form label > span {
  color: #566b84;
  font-size: 0.84rem;
  font-weight: 800;
}

.algorithm-dataset-module select,
.algorithm-dataset-form input {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(71, 108, 150, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #1a3048;
  font: inherit;
}

.algorithm-dataset-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.algorithm-dataset-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.algorithm-dataset-stats > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(73, 117, 166, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.algorithm-dataset-stats span,
.algorithm-dataset-stats strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-dataset-stats span {
  color: #65758d;
  font-size: 0.78rem;
  font-weight: 800;
}

.algorithm-dataset-stats strong {
  margin-top: 3px;
  color: #0f8f7e;
  font-size: 0.9rem;
  font-weight: 850;
}

.algorithm-class-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.algorithm-class-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(30, 120, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #49627f;
  font-weight: 800;
  cursor: pointer;
}

.algorithm-class-chip--active,
.algorithm-class-chip:hover {
  border-color: rgba(15, 143, 126, 0.42);
  background: rgba(226, 250, 244, 0.9);
  color: #0f8f7e;
}

.algorithm-dataset-annotations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.algorithm-dataset-annotation {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(73, 117, 166, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.algorithm-dataset-annotation:hover {
  border-color: rgba(30, 120, 255, 0.3);
  background: rgba(240, 248, 255, 0.92);
}

.algorithm-dataset-annotation strong,
.algorithm-dataset-annotation span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.algorithm-dataset-annotation strong {
  color: #173350;
  font-weight: 850;
}

.algorithm-dataset-annotation span {
  color: #65758d;
  font-size: 0.82rem;
  font-weight: 750;
}

.algorithm-annotation-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.25fr) minmax(190px, 0.72fr) minmax(150px, 0.58fr) minmax(110px, 0.42fr);
  gap: 10px;
  align-items: end;
}

#algorithm-label-input {
  margin-top: 6px;
}

.algorithm-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 420px;
  max-height: 62vh;
  overflow: auto;
  border: 1px solid rgba(49, 113, 190, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(66, 153, 225, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(66, 153, 225, 0.05) 1px, transparent 1px),
    #f7fbff;
  background-size: 28px 28px;
}

.algorithm-canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 420px;
  cursor: crosshair;
}

.algorithm-annotation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.algorithm-annotation-list {
  display: grid;
  gap: 0;
}

.algorithm-annotation-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  gap: 14px;
  padding: 8px 10px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 1480px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    gap: 10px;
    padding: 7px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
    min-height: 40px;
    padding: 0 13px;
    font-size: 0.94rem;
  }
}

@media (max-width: 1380px) {
  .algorithm-grid {
    grid-template-columns: 1fr;
  }

  .algorithm-dataset-form,
  .algorithm-job-form,
  .algorithm-annotation-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .algorithm-guide {
    grid-template-columns: 1fr;
  }

  .algorithm-dataset-module__head {
    align-items: stretch;
    flex-direction: column;
  }

  .algorithm-dataset-picker,
  .algorithm-dataset-module__head select {
    width: 100%;
    min-width: 0;
  }

  .algorithm-dataset-actions {
    grid-column: span 2;
  }

  .algorithm-training-context,
  .algorithm-dataset-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .algorithm-training-context > button {
    grid-column: 1 / -1;
  }

  .algorithm-dataset-annotations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .algorithm-job-form__wide {
    grid-column: span 2;
  }

  .algorithm-job-form--advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .algorithm-dataset-form,
  .algorithm-job-form,
  .algorithm-annotation-toolbar {
    grid-template-columns: 1fr;
  }

  .algorithm-dataset-actions,
  .algorithm-job-form__wide {
    grid-column: auto;
  }

  .algorithm-easy-row,
  .algorithm-infer-picker,
  .algorithm-preset-grid,
  .algorithm-job-form--advanced,
  .algorithm-infer-preview,
  .algorithm-result-card {
    grid-template-columns: 1fr;
  }

  .algorithm-easy-row,
  .algorithm-infer-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .algorithm-easy-field--mini {
    flex-basis: auto;
  }

  .algorithm-infer-preview__image {
    width: 100%;
  }

  .algorithm-training-context,
  .algorithm-dataset-stats {
    grid-template-columns: 1fr;
  }

  .algorithm-dataset-picker,
  .algorithm-infer-shortcuts {
    align-items: stretch;
    flex-direction: column;
  }

  .algorithm-dataset-annotations {
    grid-template-columns: 1fr;
  }

  .algorithm-annotation-actions {
    justify-content: stretch;
  }

  .algorithm-annotation-actions > button,
  .algorithm-dataset-actions > button,
  .algorithm-infer-shortcuts > button,
  .algorithm-training-context > button,
  .algorithm-job-form__actions > button {
    width: 100%;
  }
}

/* Console sidebar: wider PTZ area and table-style inspection points. */
.dashboard-page.dashboard-page--refined .dashboard-workbench {
  grid-template-columns: minmax(340px, 390px) clamp(600px, 34vw, 700px) minmax(420px, 1fr);
}

.dashboard-page.dashboard-page--refined .status-board--sidebar.status-board--ptz-line {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: auto;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout {
  min-height: 62px;
  padding: 9px 10px;
}

.dashboard-page.dashboard-page--refined .stage-status__panel #ptz-status-title > span {
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .inspection-points__list {
  display: block;
  max-height: 232px;
  overflow: auto;
  border: 1px solid rgba(55, 116, 178, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}

.dashboard-page.dashboard-page--refined .inspection-points__table {
  display: grid;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .inspection-points__row {
  display: grid;
  grid-template-columns: 34px minmax(132px, 0.9fr) minmax(118px, 1fr) 54px;
  align-items: center;
  gap: 8px;
}

.dashboard-page.dashboard-page--refined .inspection-points__row--head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 31px;
  padding: 6px 8px;
  color: #5c728c;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: rgba(241, 248, 255, 0.96);
  border-bottom: 1px solid rgba(55, 116, 178, 0.12);
}

.dashboard-page.dashboard-page--refined .inspection-point {
  grid-template-columns: 34px minmax(132px, 0.9fr) minmax(118px, 1fr) 54px;
  min-height: 44px;
  padding: 7px 8px;
  border: 0;
  border-bottom: 1px solid rgba(55, 116, 178, 0.1);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

.dashboard-page.dashboard-page--refined .inspection-point:last-child {
  border-bottom: 0;
}

.dashboard-page.dashboard-page--refined .inspection-point strong.inspection-point__ptz {
  min-width: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .inspection-point textarea.inspection-point__remark {
  grid-column: auto;
  width: 100%;
  min-height: 34px;
  height: 34px;
  padding: 7px 9px;
  resize: vertical;
  line-height: 1.35;
}

.dashboard-page.dashboard-page--refined .inspection-point__delete {
  min-height: 30px;
  padding-inline: 8px;
  justify-content: center;
}

@media (max-width: 1480px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(320px, 360px) clamp(480px, 34vw, 560px) minmax(320px, 1fr);
  }
}

@media (min-width: 981px) and (max-width: 1679.98px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(320px, 370px) clamp(500px, 34vw, 620px) minmax(340px, 1fr);
  }
}

@media (max-width: 1320px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench,
  .dashboard-page.dashboard-page--refined .status-board--sidebar.status-board--ptz-line {
    grid-template-columns: 1fr;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row,
  .dashboard-page.dashboard-page--refined .inspection-point {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row--head span:nth-child(3),
  .dashboard-page.dashboard-page--refined .inspection-points__row--head span:nth-child(4) {
    display: none;
  }

  .dashboard-page.dashboard-page--refined .inspection-point textarea.inspection-point__remark,
  .dashboard-page.dashboard-page--refined .inspection-point__delete {
    grid-column: 2 / -1;
  }
}

/* Console left column density: wider current-camera area and numeric PTZ table. */
.dashboard-page.dashboard-page--refined .dashboard-workbench {
  grid-template-columns: minmax(420px, 470px) clamp(520px, 31vw, 620px) minmax(360px, 1fr);
}

.dashboard-page.dashboard-page--refined .stage-brief {
  gap: 7px;
  padding: 10px 12px;
}

.dashboard-page.dashboard-page--refined .stage-brief--merged {
  gap: 7px;
}

.dashboard-page.dashboard-page--refined .stage-camera {
  gap: 5px;
  padding: 7px 9px 8px;
}

.dashboard-page.dashboard-page--refined .stage-camera__head {
  display: none;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera {
  min-height: 30px;
  padding: 0;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-head {
  min-height: 18px;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main {
  min-height: 24px;
}

.dashboard-page.dashboard-page--refined .stage-status {
  gap: 7px;
  margin-top: 7px;
  padding-top: 8px;
}

.dashboard-page.dashboard-page--refined .stage-status__panel {
  gap: 6px;
  padding: 9px;
}

.dashboard-page.dashboard-page--refined .stage-status__panel .panel__head {
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.dashboard-page.dashboard-page--refined .stage-status__panel .panel__caption {
  display: none;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout {
  min-height: 48px;
  padding: 7px 8px;
  gap: 2px;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout strong {
  font-size: 0.88rem;
  line-height: 1.05;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout__meta {
  font-size: 0.6rem;
  line-height: 1.15;
}

.dashboard-page.dashboard-page--refined .inspection-points__row,
.dashboard-page.dashboard-page--refined .inspection-point {
  grid-template-columns: 32px minmax(38px, 0.42fr) minmax(38px, 0.42fr) minmax(38px, 0.42fr) minmax(110px, 1fr) 104px;
  gap: 6px;
}

.dashboard-page.dashboard-page--refined .inspection-points__row > span,
.dashboard-page.dashboard-page--refined .inspection-point__index,
.dashboard-page.dashboard-page--refined .inspection-point strong.inspection-point__ptz {
  justify-self: center;
  text-align: center;
}

.dashboard-page.dashboard-page--refined .inspection-point textarea.inspection-point__remark {
  justify-self: stretch;
}

.dashboard-page.dashboard-page--refined .inspection-point__actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  justify-self: center;
}

.dashboard-page.dashboard-page--refined .inspection-point__move,
.dashboard-page.dashboard-page--refined .inspection-point__capture,
.dashboard-page.dashboard-page--refined .inspection-point__delete {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}

.dashboard-page.dashboard-page--refined .inspection-point__icon-button {
  display: inline-grid;
  place-items: center;
}

.dashboard-page.dashboard-page--refined .inspection-point__icon {
  width: 15px;
  height: 15px;
}

.dashboard-page.dashboard-page--refined .inspection-point__move {
  border-color: rgba(20, 184, 166, 0.34);
  color: #0f766e;
  background: rgba(20, 184, 166, 0.08);
}

.dashboard-page.dashboard-page--refined .inspection-point__capture {
  border-color: rgba(47, 128, 237, 0.3);
  color: #1c6ed0;
  background: rgba(47, 128, 237, 0.07);
}

.dashboard-page.dashboard-page--refined .inspection-point strong.inspection-point__ptz {
  text-align: center;
}

@media (max-width: 1480px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(390px, 430px) clamp(460px, 31vw, 560px) minmax(300px, 1fr);
  }
}

@media (min-width: 981px) and (max-width: 1679.98px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(400px, 440px) clamp(470px, 31vw, 580px) minmax(320px, 1fr);
  }
}

@media (max-width: 1320px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(390px, 430px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: 1fr;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row,
  .dashboard-page.dashboard-page--refined .inspection-point {
    grid-template-columns: 30px repeat(3, minmax(34px, 1fr)) minmax(0, 1fr);
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row--head span:nth-child(3),
  .dashboard-page.dashboard-page--refined .inspection-points__row--head span:nth-child(4) {
    display: inline;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row--head span:nth-child(6) {
    display: none;
  }

  .dashboard-page.dashboard-page--refined .inspection-point textarea.inspection-point__remark,
  .dashboard-page.dashboard-page--refined .inspection-point__actions {
    grid-column: 2 / -1;
  }
}

/* Console first-viewport lock: the latest message bar stays visible without page scroll. */
@media (min-width: 981px) {
  body.dashboard-page.dashboard-page--refined {
    overflow: hidden;
  }

  .dashboard-page.dashboard-page--refined .app-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    gap: 7px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: hidden;
  }

  .dashboard-page.dashboard-page--refined .dashboard-main {
    min-height: 0;
    overflow: hidden;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left,
  .dashboard-page.dashboard-page--refined .stage-brief,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .dashboard-page.dashboard-page--refined .stage-brief--merged {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .dashboard-page.dashboard-page--refined .stage-status {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  .dashboard-page.dashboard-page--refined .ptz-history {
    min-height: 0;
  }

  .dashboard-page.dashboard-page--refined .ptz-history__list {
    max-height: 54px;
  }

  .dashboard-page.dashboard-page--refined .inspection-points {
    align-content: start;
    grid-template-rows: auto auto auto;
    min-height: 0;
    overflow: hidden;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__list {
    max-height: none;
    min-height: 0;
  }

  .dashboard-page.dashboard-page--refined .control-stack {
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    padding-right: 2px;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-template-rows: auto minmax(150px, 0.9fr) auto minmax(68px, auto);
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    min-height: clamp(150px, 21vh, 220px);
    max-height: 27vh;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-history {
    min-height: 0;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .gallery-strip {
    max-height: 96px;
    overflow: auto;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar.workspace-stage {
    align-self: stretch;
    z-index: 8;
    margin-top: 0;
  }

  .dashboard-page.dashboard-page--refined .dashboard-messagebar .alert-strip--statusline {
    min-height: 38px;
    padding: 7px 12px;
  }
}

/* Latest keyframe compact strip: file name first, history arrows beside thumbnails. */
.dashboard-page.dashboard-page--refined .stage-preview .preview-meta {
  gap: 4px 12px;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--file {
  min-height: 20px;
  gap: 0;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--file > strong {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 0.94rem;
  line-height: 1.14;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times {
  gap: 6px 18px;
  min-height: 18px;
  font-size: 0.76rem;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times .meta-time-pair > span {
  font-size: 0.72rem;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-meta .meta-line--capture-times .meta-time-pair > strong {
  font-size: 0.8rem;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history {
  gap: 5px;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button {
  z-index: 20;
  pointer-events: auto;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-history__button:disabled {
  opacity: 0.34;
}

/* Gallery page bulk selection controls. */
.app-page--images .gallery-panel .panel__head {
  align-items: center;
  gap: 16px;
}

.app-page--images .gallery-panel__title {
  min-width: 0;
}

/* Console statusbar instrumentation: soft gauge cards. */
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card {
  --status-rgb: 47, 128, 237;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--status-rgb), 0.24);
  background:
    linear-gradient(135deg, rgba(var(--status-rgb), 0.12), rgba(255, 255, 255, 0.78) 34%, rgba(248, 252, 255, 0.92)),
    repeating-linear-gradient(90deg, rgba(47, 128, 237, 0.055) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(47, 128, 237, 0.045) 0 1px, transparent 1px 18px),
    rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(var(--status-rgb), 0.12),
    0 10px 24px rgba(45, 92, 160, 0.08);
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card:nth-child(1) {
  --status-rgb: 78, 104, 255;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card:nth-child(2) {
  --status-rgb: 47, 128, 237;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card:nth-child(3) {
  --status-rgb: 0, 150, 136;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card:nth-child(4) {
  --status-rgb: 43, 96, 216;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card:nth-child(5) {
  --status-rgb: 34, 166, 230;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 7px 12px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--status-rgb), 0.58), transparent);
  opacity: 0.72;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title,
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > strong {
  position: relative;
  z-index: 1;
}

.app-page--images .gallery-panel__title-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.app-page--images .gallery-panel__title-line .eyebrow {
  margin: 0;
  flex: 0 0 auto;
}

.app-page--images .gallery-result-count {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.app-page--images .gallery-panel__head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.app-page--images .gallery-selection-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.app-page--images .gallery-selection-actions .ghost-button {
  min-height: 34px;
  padding-inline: 13px;
}

.app-page--images .gallery-card__tools {
  justify-content: space-between;
}

.app-page--images .gallery-card--selected {
  border-color: rgba(47, 128, 237, 0.52);
  box-shadow: 0 18px 38px rgba(47, 128, 237, 0.18);
}

.app-page--images .gallery-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid rgba(55, 116, 178, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.app-page--images .gallery-view-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
}

.app-page--images .gallery-view-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-page--images .gallery-view-button svg rect {
  fill: none;
}

.app-page--images .gallery-view-button--active {
  color: #fff;
  border-color: rgba(47, 128, 237, 0.58);
  background: linear-gradient(135deg, #5aa8ff 0%, #2f80ed 100%);
  box-shadow: 0 8px 18px rgba(47, 128, 237, 0.18);
}

.app-page--images .gallery-card__body--thumbnail {
  gap: 4px;
  padding: 6px 9px 8px;
}

.app-page--images .gallery-card__body--thumbnail .gallery-card__tools {
  min-height: 26px;
  gap: 6px;
  flex-wrap: nowrap;
}

.app-page--images .gallery-card__body--thumbnail .gallery-card__quick-meta {
  flex: 1 1 auto;
  overflow: hidden;
}

.app-page--images .gallery-card__body--thumbnail .gallery-card__quick-meta .gallery-pill {
  min-width: 0;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-page--images .gallery-card__body--thumbnail .gallery-card__delete {
  min-height: 26px;
  padding-inline: 9px;
  font-size: 0.78rem;
}

.app-page--images .gallery-card__body--thumbnail .gallery-check__input {
  width: 14px;
  height: 14px;
}

.app-page--images .gallery-card__body--thumbnail .gallery-pill--owner,
.app-page--images .gallery-card__body--thumbnail .gallery-pill--camera {
  min-height: 21px;
  padding-inline: 8px;
  font-size: 0.68rem;
  line-height: 1;
}

.app-page--images .gallery-pill--owner {
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(20, 184, 166, 0.1);
}

.app-page--images .gallery-card__body--thumbnail .gallery-pill--ptz {
  max-width: 106px;
  min-height: 21px;
  padding-inline: 7px;
  font-size: 0.68rem;
  line-height: 1;
}

.app-page--images .gallery-card__body--thumbnail .gallery-card__title {
  font-size: 0.84rem;
  line-height: 1.22;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.app-page--images .gallery-card__body--thumbnail .gallery-check__label {
  display: none;
}

.app-page--images .gallery-grid--list {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* Animated workspace banner: subtle perspective signal curves behind the shared navigation. */
.topbar.topbar--workspace {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 46%, rgba(47, 128, 237, 0.12), transparent 24%),
    radial-gradient(circle at 66% -32%, rgba(0, 166, 153, 0.14), transparent 34%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.86) 52%, rgba(255, 255, 255, 0.94));
}

.topbar.topbar--workspace::before,
.topbar.topbar--workspace::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.topbar.topbar--workspace::before {
  inset: -142% -8% -132% 26%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(47, 128, 237, 0.18) 0 1px, transparent 2px 28px),
    repeating-radial-gradient(ellipse at center, transparent 0 16px, rgba(0, 166, 153, 0.12) 17px 18px, transparent 19px 44px);
  transform: perspective(860px) rotateX(64deg) rotateZ(-7deg) translate3d(-34px, 0, 0);
  transform-origin: 58% 50%;
  opacity: 0.62;
  filter: blur(0.1px);
  animation: workspace-banner-curve 18s linear infinite;
}

.topbar.topbar--workspace::after {
  inset: 0;
  background:
    linear-gradient(100deg, transparent 4%, rgba(47, 128, 237, 0.11) 24%, transparent 44%),
    linear-gradient(120deg, transparent 38%, rgba(0, 166, 153, 0.12) 52%, transparent 68%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(47, 128, 237, 0.06) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(47, 128, 237, 0.035) 23px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent);
  opacity: 0.78;
  animation: workspace-banner-flow 9s ease-in-out infinite alternate;
}

.topbar.topbar--workspace > * {
  position: relative;
  z-index: 1;
}

@keyframes workspace-banner-curve {
  0% {
    transform: perspective(860px) rotateX(64deg) rotateZ(-7deg) translate3d(-42px, -3px, 0) scale(1);
  }
  50% {
    transform: perspective(860px) rotateX(64deg) rotateZ(-4deg) translate3d(22px, 4px, 0) scale(1.015);
  }
  100% {
    transform: perspective(860px) rotateX(64deg) rotateZ(-7deg) translate3d(-42px, -3px, 0) scale(1);
  }
}

@keyframes workspace-banner-flow {
  0% {
    transform: translate3d(-18px, 0, 0);
    opacity: 0.56;
  }
  100% {
    transform: translate3d(22px, 0, 0);
    opacity: 0.86;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar.topbar--workspace::before,
  .topbar.topbar--workspace::after {
    animation: none;
  }
}

.app-page--images .gallery-list-row {
  display: grid;
  grid-template-columns: 34px 128px minmax(220px, 1.15fr) minmax(170px, 0.8fr) minmax(230px, 1fr) minmax(240px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(55, 116, 178, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 28px rgba(40, 106, 171, 0.08);
}

.app-page--images .gallery-list-row--selected {
  border-color: rgba(47, 128, 237, 0.52);
  box-shadow: 0 16px 34px rgba(47, 128, 237, 0.16);
}

.app-page--images .gallery-check--compact .gallery-check__label {
  display: none;
}

.app-page--images .gallery-list-row__media {
  width: 128px;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  background: rgba(47, 128, 237, 0.08);
  cursor: pointer;
}

.app-page--images .gallery-list-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-page--images .gallery-list-row__identity,
.app-page--images .gallery-list-row__detail,
.app-page--images .gallery-list-row__time {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.app-page--images .gallery-list-row__identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-page--images .gallery-list-row__detail span,
.app-page--images .gallery-list-row__time span,
.app-page--images .gallery-list-row__path {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-page--images .gallery-list-row__path {
  min-width: 0;
}

.app-page--images .gallery-list-row__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.app-page--images .gallery-list-row__actions .ghost-button {
  min-height: 30px;
  padding-inline: 10px;
  text-decoration: none;
}

@media (max-width: 980px) {
  .app-page--images .gallery-panel .panel__head,
  .app-page--images .gallery-panel__head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .app-page--images .gallery-selection-actions,
  .app-page--images .gallery-pagination--head {
    justify-content: flex-start;
  }
}

@media (max-width: 1280px) {
  .app-page--images .gallery-list-row {
    grid-template-columns: 34px 112px minmax(190px, 1fr) minmax(160px, 0.9fr) minmax(190px, 1fr) auto;
  }

  .app-page--images .gallery-list-row__path {
    grid-column: 3 / -1;
  }
}

@media (max-width: 860px) {
  .app-page--images .gallery-view-toggle {
    justify-self: start;
  }

  .app-page--images .gallery-list-row {
    grid-template-columns: 34px 104px minmax(0, 1fr);
    align-items: start;
  }

  .app-page--images .gallery-list-row__detail,
  .app-page--images .gallery-list-row__time,
  .app-page--images .gallery-list-row__path,
  .app-page--images .gallery-list-row__actions {
    grid-column: 3 / -1;
  }

  .app-page--images .gallery-list-row__actions {
    justify-content: flex-start;
  }
}

/* Shared banner navigation icons. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
  gap: 7px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link::before,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link::before {
  content: "";
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: currentColor;
  opacity: 0.86;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link--active::before,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link--active::before {
  opacity: 1;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link[href="/"],
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link[href="/"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2715%27%20width%3D%277%27%20height%3D%275%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M14%2017h7M17.5%2013.5v7%27%2F%3E%3C%2Fsvg%3E");
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link[href="/tunnels"],
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link[href="/tunnels"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2713%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m16%209%205-3v10l-5-3%27%2F%3E%3Cpath%20d%3D%27M7%2020h6%27%2F%3E%3Cpath%20d%3D%27M10%2016v4%27%2F%3E%3C%2Fsvg%3E");
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link[href="/cameras"],
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link[href="/cameras"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h4l2-2h4l2%202h4v12H4z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M18%2010h.01%27%2F%3E%3C%2Fsvg%3E");
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link[href="/tasks"],
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link[href="/tasks"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2715%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%203v4M16%203v4M4%2010h16%27%2F%3E%3Cpath%20d%3D%27M8%2015h4l2-2%27%2F%3E%3C%2Fsvg%3E");
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link[href="/algorithms"],
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link[href="/algorithms"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%277%27%20y%3D%277%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%201v3M15%201v3M9%2020v3M15%2020v3M1%209h3M1%2015h3M20%209h3M20%2015h3%27%2F%3E%3Cpath%20d%3D%27M10%2013.5%2012%2010l2%203.5%27%2F%3E%3C%2Fsvg%3E");
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link[href="/settings"],
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link[href="/settings"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16M4%2012h16M4%2018h16%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%276%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2712%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2718%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E");
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link--settings,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link--settings {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16M4%2012h16M4%2018h16%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%276%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2712%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2718%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E");
}

/* Settings dropdown keeps logout inside the nav instead of a separate header action. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
  overflow: visible;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu #logout-button,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__menu #logout-button {
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
}

/* Compact workspace banner and keep the user label as plain text. */
.app-page:not(.app-page--login) .topbar.topbar--workspace,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
  min-height: 92px;
  padding: 16px 22px;
  gap: 10px 20px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__brand {
  min-height: 38px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row--system,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row--system {
  min-height: 38px;
  height: 38px;
  gap: 10px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__system-icon svg,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__system-icon svg {
  width: 42px;
  height: 42px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title--single-line.topbar__title--system {
  font-size: 1.78rem;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__inline-user,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__inline-user {
  min-width: 0;
  height: auto;
  min-height: 0;
  margin-left: clamp(12px, 2.4vw, 52px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 800;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__logout-link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__logout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-left: 2px;
  padding: 0 12px;
  border: 1px solid rgba(239, 68, 68, 0.26);
  border-radius: 999px;
  background: rgba(254, 242, 242, 0.82);
  color: #c62828;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.08);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__logout-link:hover,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__logout-link:focus-visible,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__logout-link:hover,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__logout-link:focus-visible {
  border-color: rgba(220, 38, 38, 0.38);
  background: #fff5f5;
  color: #b91c1c;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav {
  padding: 4px;
  gap: 8px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link {
  min-height: 38px;
  padding: 0 16px;
  font-size: 1.04rem;
  font-weight: 800;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-item,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__menu-item {
  min-height: 38px;
  font-size: 0.98rem;
  font-weight: 800;
}

/* Expand the console keyframe frame so the returned image owns the available panel area. */
.dashboard-page.dashboard-page--refined .stage-preview {
  grid-template-rows: auto minmax(0, 1fr) auto minmax(78px, auto);
  align-content: stretch;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
  align-self: stretch;
  height: 100%;
  min-height: clamp(320px, 44vh, 520px);
  max-height: none;
  aspect-ratio: auto;
}

.dashboard-page.dashboard-page--refined .stage-preview .preview-frame img {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-position: center center;
}

@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-template-rows: auto minmax(0, 1fr) auto minmax(78px, auto);
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    min-height: 0;
  }
}

@media (max-width: 980px) {
.dashboard-page.dashboard-page--refined .stage-preview .preview-frame {
    min-height: clamp(240px, 48vw, 360px);
  }
}

/* Keep the active camera name vertically centered while the switch action floats in the corner. */
.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  place-items: center;
  min-height: 44px;
  padding: 0 58px 0 14px;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-head {
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 2;
  min-height: 0;
  width: auto;
}

.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main {
  min-height: 100%;
  justify-content: center;
  align-items: center;
}

/* Resolution stability overrides. Keep operational pages visually consistent
   across common 16:9 desktop resolutions while still folding on true narrow
   screens. */
:root {
  --workspace-gutter: clamp(8px, 1.2%, 20px);
  --workspace-gap: 12px;
  --workspace-gap-tight: 8px;
  --workspace-title-size: 1.5rem;
  --workspace-title-size-wide: 1.62rem;
  --workspace-nav-size: 1rem;
  --workspace-nav-size-compact: 0.94rem;
  --workspace-nav-icon-size: 18px;
  --workspace-status-label-size: 0.92rem;
  --workspace-status-value-size: 0.9rem;
}

.app-page:not(.app-page--login),
.dashboard-page {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.app-page:not(.app-page--login) .app-shell,
.dashboard-page.dashboard-page--refined .app-shell,
.monitor-console-page .app-shell {
  width: min(1880px, calc(100% - (var(--workspace-gutter) * 2)));
}

.app-page:not(.app-page--login) .topbar,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
  gap: var(--workspace-gap);
}

.app-page:not(.app-page--login) .topbar__title,
.app-page:not(.app-page--login) .topbar__title--system,
.dashboard-page.dashboard-page--refined .topbar__title,
.dashboard-page.dashboard-page--refined .topbar__title--single-line,
.dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system,
.monitor-console-page .topbar__title {
  font-size: var(--workspace-title-size);
  line-height: 1.08;
  letter-spacing: 0;
}

.app-page:not(.app-page--login) .topbar__section,
.app-page:not(.app-page--login) .topbar__section--system,
.dashboard-page.dashboard-page--refined .topbar__section,
.dashboard-page.dashboard-page--refined .topbar__section--system,
.panel h2,
.subpanel h3,
.eyebrow,
.module-title,
.page-nav__link {
  letter-spacing: 0;
}

.app-page:not(.app-page--login) .topbar__system-icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
}

.app-page:not(.app-page--login) .topbar__system-icon svg {
  width: 24px;
  height: 24px;
}

.app-page:not(.app-page--login) .topbar__actions,
.dashboard-page.dashboard-page--refined .topbar__actions {
  min-width: 0;
}

.app-page:not(.app-page--login) .topbar__brand,
.dashboard-page.dashboard-page--refined .topbar__brand,
.app-page:not(.app-page--login) .topbar__title-row--system,
.dashboard-page.dashboard-page--refined .topbar__title-row--system {
  min-width: 0;
}

.app-page:not(.app-page--login) .topbar__title--system,
.dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
  gap: 5px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav::-webkit-scrollbar {
  display: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
  min-height: 34px;
  padding-inline: 12px;
  font-size: var(--workspace-nav-size);
  letter-spacing: 0;
}

@media (min-width: 1600px) {
  .app-page:not(.app-page--login) .topbar__title,
  .app-page:not(.app-page--login) .topbar__title--system,
  .dashboard-page.dashboard-page--refined .topbar__title,
  .dashboard-page.dashboard-page--refined .topbar__title--single-line,
  .dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system,
  .monitor-console-page .topbar__title {
    font-size: var(--workspace-title-size-wide);
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
    padding-inline: 14px;
    font-size: var(--workspace-nav-size);
  }
}

@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined {
    overflow: auto;
  }

  .dashboard-page.dashboard-page--refined .app-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--workspace-gap);
    min-height: 100dvh;
    height: auto;
    padding: 14px 0 12px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(300px, 0.82fr) minmax(480px, 1.06fr) minmax(330px, 0.92fr);
    gap: var(--workspace-gap);
    align-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    min-width: 0;
  }

  .dashboard-page.dashboard-page--refined .topbar__statusline {
    grid-template-columns: minmax(190px, 1.15fr) repeat(4, minmax(126px, 1fr));
    gap: var(--workspace-gap-tight);
  }
}

@media (min-width: 981px) and (max-width: 1320px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(248px, 0.78fr) minmax(360px, 1fr) minmax(270px, 0.9fr);
    grid-template-rows: auto;
    align-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .panel--control {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .stage-preview {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
  }

  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .dashboard-page.dashboard-page--refined .topbar__title-row--system {
    flex-wrap: nowrap;
  }

  .dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
    font-size: 1.34rem;
  }

  .dashboard-page.dashboard-page--refined .page-nav__link {
    padding-inline: 8px;
    font-size: 0.84rem;
  }

  .dashboard-page.dashboard-page--refined .topbar__statusline {
    grid-template-columns: minmax(168px, 1.1fr) repeat(4, minmax(106px, 1fr));
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  .dashboard-page.dashboard-page--refined .app-shell {
    gap: var(--workspace-gap-tight);
    padding: 8px 0;
  }

  .dashboard-page.dashboard-page--refined .topbar {
    min-height: 54px;
    margin-bottom: 0;
  }

  .dashboard-page.dashboard-page--refined .topbar__statusline .alert-strip--statusline,
  .dashboard-page.dashboard-page--refined .topbar-status-card {
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 16px;
  }

  .dashboard-page.dashboard-page--refined .topbar-status-card > strong {
    margin-top: 4px;
    font-size: 0.96rem;
  }

  .dashboard-page.dashboard-page--refined .panel,
  .dashboard-page.dashboard-page--refined .subpanel {
    padding: 10px;
  }

  .dashboard-page.dashboard-page--refined .panel__head,
  .dashboard-page.dashboard-page--refined .subpanel__head {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .dashboard-page.dashboard-page--refined .stage-preview .preview-frame,
  .dashboard-page.dashboard-page--refined .preview-frame {
    min-height: 220px;
  }

  .dashboard-page.dashboard-page--refined .gallery-strip {
    gap: 5px;
  }
}

@media (min-width: 981px) and (max-width: 1180px) and (min-aspect-ratio: 8 / 5) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(230px, 0.76fr) minmax(330px, 1fr) minmax(250px, 0.86fr);
  }

  .dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
    font-size: 1.2rem;
  }

  .dashboard-page.dashboard-page--refined .topbar__inline-user,
  .dashboard-page.dashboard-page--refined .topbar__logout-link {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .app-page:not(.app-page--login) .topbar__title,
  .app-page:not(.app-page--login) .topbar__title--system,
  .monitor-console-page .topbar__title {
    font-size: 1.24rem;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link {
    padding-inline: 8px;
    font-size: 0.84rem;
  }

  .app-page--cameras .camera-management-layout,
  .app-page--images .camera-management-layout {
    grid-template-columns: minmax(104px, 0.16fr) minmax(0, 1fr);
  }

  .camera-section-tab {
    padding-inline: 10px;
  }

  .camera-toolbar,
  .gallery-filter-form--inline {
    gap: 10px;
  }
}

@media (min-width: 761px) and (max-width: 1500px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__inline-user,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__logout-link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__inline-user,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__logout-link {
    display: none !important;
  }

  .app-page--cameras .camera-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .app-page--cameras .camera-toolbar__group,
  .app-page--cameras .camera-toolbar__actions {
    flex-wrap: wrap;
  }

  .app-page--cameras .camera-toolbar__actions {
    margin-left: 0;
  }

  .app-page--cameras .camera-toolbar__status {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 100%;
  }
}

@media (max-width: 980px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace {
    grid-template-columns: 1fr;
  }

  .app-page:not(.app-page--login) .topbar__title-row--system {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .app-page:not(.app-page--login) .topbar__title--system {
    min-width: 0;
    font-size: 1.18rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .app-page:not(.app-page--login) .app-shell,
  .dashboard-page.dashboard-page--refined .app-shell,
  .monitor-console-page .app-shell {
    width: min(100%, calc(100% - 12px));
    padding-top: 12px;
  }

  .app-page:not(.app-page--login) .topbar__system-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .app-page:not(.app-page--login) .topbar__system-icon svg {
    width: 24px;
    height: 24px;
  }

  .app-page:not(.app-page--login) .topbar__title--system,
  .dashboard-page.dashboard-page--refined .topbar__title--single-line.topbar__title--system {
    font-size: 1.02rem;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__inline-user,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__logout-link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__inline-user,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__logout-link {
    display: none !important;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav {
    flex-wrap: nowrap;
  }
}

/* Dialog forms must stay inside their panel on compact screens and dense grids. */
dialog,
.config-modal,
.cloud-dialog,
.log-modal,
.image-modal {
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
}

.config-modal__panel,
.cloud-dialog__panel,
.camera-modal__panel,
.task-modal__panel,
.log-modal__panel,
.image-modal__panel {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

.config-modal__body,
.cloud-dialog__body,
.form-grid,
.form-grid label,
.cloud-dialog__body label,
.camera-modal__panel label,
.camera-modal__panel .inline-form,
.camera-modal__panel .helper-block {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.config-modal input,
.config-modal select,
.config-modal textarea,
.cloud-dialog input,
.cloud-dialog select,
.cloud-dialog textarea,
.camera-modal__panel input,
.camera-modal__panel select,
.camera-modal__panel textarea,
.log-modal__panel input,
.log-modal__panel select,
.log-modal__panel textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.form-grid,
.cloud-dialog__body {
  overflow-x: hidden;
}

/* Page switch stability: keep the workspace frame anchored when changing
   top-level pages or in-page section tabs. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

@supports (scrollbar-gutter: stable both-edges) {
  html {
    scrollbar-gutter: stable both-edges;
  }
}

body.app-page:not(.app-page--login),
body.dashboard-page.dashboard-page--refined,
body.monitor-console-page,
body.cloud-console-page {
  overflow-x: hidden;
}

body.app-page:not(.app-page--login):not(.modal-open),
body.dashboard-page.dashboard-page--refined:not(.modal-open),
body.monitor-console-page:not(.modal-open),
body.cloud-console-page:not(.modal-open) {
  overflow-y: scroll;
}

:root {
  --stable-page-gutter: 6px;
  --stable-sidebar-width: 140px;
  --stable-nav-item-height: 42px;
}

.app-page:not(.app-page--login) .app-shell,
.app-page:not(.app-page--login) .app-shell--section,
.dashboard-page.dashboard-page--refined .app-shell,
.monitor-shell {
  width: calc(100% - (var(--stable-page-gutter) * 2)) !important;
  max-width: none;
  margin-inline: auto;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace,
.monitor-shell > .topbar.topbar--workspace {
  min-height: 84px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.monitor-shell > .topbar.topbar--workspace .page-nav {
  min-height: calc(var(--stable-nav-item-height) + 14px);
  white-space: nowrap;
  contain: layout;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item,
.monitor-shell > .topbar.topbar--workspace .page-nav__link,
.monitor-shell > .topbar.topbar--workspace .page-nav__item {
  min-height: var(--stable-nav-item-height);
  flex-shrink: 0;
}

.app-page--cameras .camera-management-layout,
.app-page--images .camera-management-layout,
.app-page--algorithms .algorithm-management-layout,
.monitor-shell {
  grid-template-columns: var(--stable-sidebar-width) minmax(0, 1fr);
}

.camera-section-sidebar,
.monitor-sidebar {
  width: var(--stable-sidebar-width);
  min-width: var(--stable-sidebar-width);
  max-width: var(--stable-sidebar-width);
  align-self: stretch;
}

.camera-section-tab,
.monitor-sidebar__item {
  min-height: 82px;
  inline-size: 100%;
  box-sizing: border-box;
}

.camera-management-content,
.algorithm-management-content,
.monitor-main,
.section-main-layout,
.dashboard-main {
  min-width: 0;
}

@media (min-width: 761px) and (max-width: 1280px) {
  :root {
    --stable-sidebar-width: 118px;
  }
}

@media (max-width: 760px) {
  :root {
    --stable-page-gutter: 6px;
    --stable-sidebar-width: 100%;
  }

  .app-page--cameras .camera-management-layout,
  .app-page--images .camera-management-layout,
  .app-page--algorithms .algorithm-management-layout,
  .monitor-shell {
    grid-template-columns: 1fr;
  }

  .camera-section-sidebar,
  .monitor-sidebar {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}


/* Console status cards: keep the health strip readable without crowding the frame. */
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar__statusline {
  gap: 8px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
  min-width: 0;
  min-height: 68px;
  padding: 10px 14px;
  border-radius: 16px;
  gap: 5px;
  overflow: hidden;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title {
  min-width: 0;
  max-width: 100%;
  min-height: 1.25rem;
  font-size: var(--workspace-status-label-size);
  line-height: 1.16;
  font-weight: 800;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title .module-title__icon,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title .module-title__icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
}

.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > strong,
.app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > strong {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--workspace-status-value-size);
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width: 981px) and (max-height: 820px) {
  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card {
    min-height: 62px;
    padding: 9px 12px;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > .module-title,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > .module-title {
    font-size: 0.88rem;
  }

  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar-status-card > strong,
  .app-page:not(.app-page--login) .dashboard-statusbar .topbar-status-card > strong {
    font-size: 0.84rem;
  }
}


/* Top navigation settings: remove the separate arrow slot and shift the nav group right. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions,
.monitor-shell > .topbar.topbar--workspace .topbar__actions {
  margin-left: auto;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__switchbar,
.monitor-shell > .topbar.topbar--workspace .topbar__switchbar {
  margin-left: clamp(18px, 2.2vw, 52px);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav,
.monitor-shell > .topbar.topbar--workspace .page-nav {
  justify-content: end;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings {
  gap: 0;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings {
  padding-right: 20px;
  cursor: pointer;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__menu-toggle,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__menu-toggle,
.monitor-shell > .topbar.topbar--workspace .page-nav__menu-toggle {
  display: none !important;
}


@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .stage-brief--merged,
  .dashboard-page.dashboard-page--refined .stage-status,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .control-stack {
    align-content: stretch;
    align-items: stretch;
  }

  .dashboard-page.dashboard-page--refined .stage-brief--merged {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .dashboard-page.dashboard-page--refined .stage-status {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
  }

  .dashboard-page.dashboard-page--refined .inspection-points {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(180px, 1fr) auto;
    align-self: stretch;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__list {
    min-height: clamp(180px, 24vh, 330px);
    max-height: none;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__empty {
    min-height: 100%;
    align-content: center;
    background:
      linear-gradient(135deg, rgba(47, 128, 237, 0.05), transparent 42%),
      repeating-linear-gradient(90deg, rgba(47, 128, 237, 0.04) 0 1px, transparent 1px 18px),
      rgba(255, 255, 255, 0.5);
  }

  .dashboard-page.dashboard-page--refined .panel--control {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .dashboard-page.dashboard-page--refined .control-stack {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .dashboard-page.dashboard-page--refined .control-stack > .subpanel:last-child {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto auto auto auto minmax(72px, 1fr);
  }

  .dashboard-page.dashboard-page--refined .control-stack > .subpanel:last-child .mini-status {
    min-height: clamp(72px, 10vh, 136px);
    display: flex;
    align-items: flex-start;
    background:
      linear-gradient(135deg, rgba(47, 128, 237, 0.045), transparent 42%),
      repeating-linear-gradient(90deg, rgba(47, 128, 237, 0.035) 0 1px, transparent 1px 20px),
      rgba(255, 255, 255, 0.42);
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  .dashboard-page.dashboard-page--refined .inspection-points__list {
    min-height: clamp(132px, 19vh, 220px);
  }

  .dashboard-page.dashboard-page--refined .control-stack > .subpanel:last-child .mini-status {
    min-height: clamp(50px, 7vh, 90px);
  }
}

/* Console image set access and larger PTZ readout text. */
.dashboard-page.dashboard-page--refined .stage-preview > .panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 6px;
}

.dashboard-page.dashboard-page--refined .stage-preview .panel__head-copy {
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .stage-preview .panel__head-copy .module-title {
  margin: 0;
}

.dashboard-page.dashboard-page--refined .stage-preview .panel__caption {
  display: none;
}

.dashboard-page.dashboard-page--refined .stage-preview__head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: fit-content;
  justify-self: end;
}

.dashboard-page.dashboard-page--refined .preview-image-set-link {
  min-height: 30px;
  padding: 6px 13px;
  border-color: rgba(47, 128, 237, 0.38);
  color: #1f6fd3;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout span {
  min-width: 0;
  max-width: 100%;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout strong {
  min-width: 0;
  max-width: 100%;
  font-size: 0.96rem;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout__meta {
  min-width: 0;
  max-width: 100%;
  font-size: 0.66rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Console desktop columns: compact left control rail and give released width to the keyframe panel. */
@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: clamp(330px, 20vw, 400px) clamp(520px, 33vw, 680px) minmax(520px, 1fr);
  }

  .dashboard-page.dashboard-page--refined .stage-brief,
  .dashboard-page.dashboard-page--refined .control-stack,
  .dashboard-page.dashboard-page--refined .stage-preview {
    min-width: 0;
  }
}

/* Console desktop columns: widen the current-camera rail and compress the sampling rail without shrinking keyframes. */
@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(520px, 1.02fr) minmax(520px, 0.86fr) minmax(510px, 1fr);
  }

  .dashboard-page.dashboard-page--refined .dashboard-column--left,
  .dashboard-page.dashboard-page--refined .panel--control,
  .dashboard-page.dashboard-page--refined .stage-preview {
    min-width: 0;
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row,
  .dashboard-page.dashboard-page--refined .inspection-point {
    grid-template-columns: 34px repeat(3, minmax(42px, 0.22fr)) minmax(220px, 1fr) 104px;
    gap: 8px;
  }

  .dashboard-page.dashboard-page--refined .inspection-point textarea.inspection-point__remark {
    min-width: 0;
    width: 100%;
  }

  .dashboard-page.dashboard-page--refined .inspection-point__actions {
    min-width: 104px;
  }

  .dashboard-page.dashboard-page--refined .subpanel--point-capture .module-title,
  .dashboard-page.dashboard-page--refined .subpanel--point-capture .module-title > span {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-page.dashboard-page--refined .manual-step-control span,
  .dashboard-page.dashboard-page--refined .range-grid__head,
  .dashboard-page.dashboard-page--refined .range-grid__label {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 981px) and (max-width: 1560px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(460px, 0.96fr) minmax(460px, 0.86fr) minmax(420px, 0.9fr);
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row,
  .dashboard-page.dashboard-page--refined .inspection-point {
    grid-template-columns: 32px repeat(3, minmax(38px, 0.2fr)) minmax(176px, 1fr) 100px;
    gap: 7px;
  }

  .dashboard-page.dashboard-page--refined .inspection-point__actions {
    min-width: 100px;
  }
}

@media (min-width: 981px) and (max-width: 1320px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(420px, 0.92fr) minmax(430px, 0.82fr) minmax(390px, 0.84fr);
  }

  .dashboard-page.dashboard-page--refined .inspection-points__row,
  .dashboard-page.dashboard-page--refined .inspection-point {
    grid-template-columns: 30px repeat(3, minmax(32px, 0.18fr)) minmax(152px, 1fr) 96px;
    gap: 6px;
  }

  .dashboard-page.dashboard-page--refined .inspection-point__actions {
    min-width: 96px;
  }
}

/* Stable workspace navigation anchor: prevent the primary nav from shifting between pages. */
:root {
  --stable-topbar-height: 72px;
  --stable-topbar-padding-y: 10px;
  --stable-topbar-padding-x: 16px;
  --stable-primary-nav-height: 48px;
  --stable-primary-nav-item-height: 40px;
}

@media (min-width: 761px) {
  .app-page:not(.app-page--login) .app-shell,
  .app-page:not(.app-page--login) .app-shell--section,
  .dashboard-page.dashboard-page--refined .app-shell,
  .monitor-shell {
    padding-top: 10px;
  }
}

@media (min-width: 981px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace,
  .monitor-shell > .topbar.topbar--workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--stable-topbar-height);
    padding: var(--stable-topbar-padding-y) var(--stable-topbar-padding-x);
    gap: var(--workspace-gap);
    box-sizing: border-box;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions,
  .monitor-shell > .topbar.topbar--workspace .topbar__actions {
    justify-self: end;
    align-self: center;
    margin-left: 0;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__switchbar,
  .monitor-shell > .topbar.topbar--workspace .topbar__switchbar {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav,
  .monitor-shell > .topbar.topbar--workspace .page-nav {
    align-items: center;
    justify-content: flex-end;
    min-height: var(--stable-primary-nav-height);
    gap: 6px;
    padding: 3px;
    overflow: visible;
    contain: none;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link,
  .monitor-shell > .topbar.topbar--workspace .page-nav__link,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings,
  .monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings {
    box-sizing: border-box;
    min-height: var(--stable-primary-nav-item-height);
    padding-inline: 14px;
    font-size: var(--workspace-nav-size);
    font-weight: 800;
    line-height: 1.15;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link--active,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link--active,
  .monitor-shell > .topbar.topbar--workspace .page-nav__link--active {
    font-size: var(--workspace-nav-size);
    font-weight: 800;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link::before,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link::before,
  .monitor-shell > .topbar.topbar--workspace .page-nav__link::before {
    flex-basis: var(--workspace-nav-icon-size);
    width: var(--workspace-nav-icon-size);
    height: var(--workspace-nav-icon-size);
  }
}

@media (min-width: 981px) and (max-width: 1500px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link,
  .monitor-shell > .topbar.topbar--workspace .page-nav__link,
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings,
  .monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--settings {
    padding-inline: 10px;
    font-size: var(--workspace-nav-size-compact);
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link--active,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link--active,
  .monitor-shell > .topbar.topbar--workspace .page-nav__link--active {
    font-size: var(--workspace-nav-size-compact);
  }
}


/* Agent management center. */
.monitor-sidebar {
  gap: 10px;
  padding-block: 24px;
}

.monitor-sidebar__item {
  gap: 7px;
  min-height: 72px;
}

.monitor-sidebar__item span {
  font-size: 0.94rem;
}

.monitor-sidebar__item[href="/topology"] span {
  max-width: 100%;
  white-space: normal;
}

.monitor-button:disabled,
.monitor-page-button:disabled,
.agent-device-card__actions button:disabled {
  color: #9aacbf;
  background: rgba(245, 249, 253, 0.82);
  border-color: rgba(178, 194, 213, 0.7);
  cursor: not-allowed;
}

.edge-agents-page .monitor-board {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.agent-manager-toolbar,
.agent-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.agent-manager-toolbar h2,
.agent-panel-head h3 {
  margin: 0;
  color: #10233e;
  font-size: 1.28rem;
  line-height: 1.2;
}

.agent-panel-head h3 {
  font-size: 1.06rem;
}

.agent-manager-heading {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.agent-manager-heading__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.agent-manager-toolbar p {
  margin: 0;
  color: #5f7090;
  line-height: 1.4;
}

.agent-manager-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 620px;
  min-width: 0;
  flex-wrap: nowrap;
}

.agent-probe-frequency {
  display: inline-grid;
  grid-template-columns: auto 58px auto;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  color: #24476e;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(133, 178, 231, 0.52);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(64, 107, 157, 0.08);
}

.agent-probe-frequency span,
.agent-probe-frequency em {
  color: #55708f;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.agent-probe-frequency input {
  width: 58px;
  min-height: 28px;
  padding: 0 7px;
  color: #10294c;
  background: rgba(248, 252, 255, 0.96);
  border: 1px solid rgba(138, 184, 238, 0.46);
  border-radius: 7px;
  font-weight: 850;
}

.agent-manager-content {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.agent-subpage-tabs {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  gap: 4px;
  max-width: 100%;
  padding: 3px;
  background: rgba(237, 246, 255, 0.82);
  border: 1px solid rgba(138, 184, 238, 0.38);
  border-radius: 999px;
  overflow-x: auto;
}

.agent-subpage-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 13px;
  color: #4e6684;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.agent-subpage-tab--active {
  color: #0f6bdc;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(93, 158, 244, 0.4);
  box-shadow: 0 8px 20px rgba(43, 117, 213, 0.12);
}

.agent-view-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

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

.agent-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.agent-overview-grid article,
.agent-version-panel,
.agent-release-panel,
.agent-device-section,
.agent-log-section {
  min-width: 0;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(122, 165, 215, 0.36);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(46, 93, 148, 0.09);
}

.agent-overview-grid article {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

.agent-overview-grid span,
.agent-version-facts dt,
.agent-capability-grid span,
.agent-device-card__grid span,
.agent-log-list time,
.agent-log-list > span {
  color: #61728e;
  font-weight: 800;
}

.agent-overview-grid strong {
  color: #10294c;
  font-size: 1.24rem;
  line-height: 1.2;
  word-break: break-word;
}

.agent-device-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(122, 165, 215, 0.36);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(46, 93, 148, 0.07);
}

.agent-device-filterbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #405c7c;
  font-weight: 850;
}

.agent-device-filterbar select {
  width: min(320px, 42vw);
  min-height: 38px;
  padding: 0 38px 0 13px;
  color: #16375d;
  background-color: rgba(248, 252, 255, 0.96);
  border: 1px solid rgba(111, 162, 225, 0.48);
  border-radius: 6px;
  font: inherit;
  font-weight: 850;
}

.agent-device-filterbar > span {
  color: #56708f;
  font-size: 0.86rem;
  font-weight: 850;
  white-space: nowrap;
}

.agent-version-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.agent-version-panel,
.agent-release-panel,
.agent-device-section,
.agent-log-section {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.agent-panel-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  color: #246fc8;
  background: rgba(36, 111, 200, 0.1);
  border: 1px solid rgba(36, 111, 200, 0.18);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.agent-version-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0;
}

.agent-version-facts div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  background: rgba(241, 248, 255, 0.78);
  border: 1px solid rgba(138, 184, 238, 0.28);
  border-radius: 6px;
}

.agent-version-facts dd {
  min-width: 0;
  margin: 0;
  color: #10294c;
  font-size: 1rem;
  font-weight: 900;
  word-break: break-word;
}

.agent-capability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

.agent-capability-grid article {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  background: rgba(250, 253, 255, 0.78);
  border: 1px solid rgba(142, 165, 195, 0.24);
  border-left: 3px solid #15856f;
  border-radius: 6px;
}

.agent-capability-card {
  grid-column: 1 / -1;
}

.agent-capability-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 12px 14px;
  color: #173e67;
  background: linear-gradient(135deg, rgba(231, 245, 255, 0.94), rgba(237, 250, 246, 0.9));
  border: 1px solid rgba(75, 144, 212, 0.25);
  border-radius: 6px;
}

.agent-capability-intro > div:first-child {
  display: grid;
  flex: 1 1 320px;
  gap: 4px;
  min-width: 0;
}

.agent-capability-intro strong {
  color: #10294c;
  font-size: 1rem;
}

.agent-capability-intro p,
.agent-capability-card__detail,
.agent-capability-parameter p {
  margin: 0;
  color: #5f7090;
  line-height: 1.5;
}

.agent-parameter-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 5px;
}

.agent-parameter-legend span,
.agent-capability-features span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  color: #246fc8;
  background: rgba(36, 111, 200, 0.08);
  border: 1px solid rgba(36, 111, 200, 0.2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.agent-capability-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.agent-capability-card header > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.agent-capability-number {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: linear-gradient(135deg, #2781ff, #137765);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(39, 129, 255, 0.2);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.agent-capability-card header > span {
  flex: 0 0 auto;
  color: #127a58;
  font-size: 0.75rem;
}

.agent-capability-card code,
.agent-release-parameters code {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 6px;
  color: #315b88;
  background: rgba(228, 239, 252, 0.74);
  border: 1px solid rgba(113, 157, 207, 0.2);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.agent-capability-parameters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.agent-capability-parameter {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(244, 249, 255, 0.76);
  border: 1px solid rgba(139, 174, 215, 0.22);
  border-radius: 5px;
}

.agent-capability-parameter__label,
.agent-capability-parameter__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.agent-capability-parameter__label > strong {
  font-size: 0.84rem;
}

.agent-capability-parameter p {
  font-size: 0.8rem;
}

.agent-capability-parameter__default {
  color: #1769c2;
  font-size: 0.78rem;
  font-weight: 850;
}

.agent-capability-parameter__meta {
  color: #71809a;
  font-size: 0.74rem;
  line-height: 1.45;
}

.agent-capability-parameter__meta span + span::before {
  margin-right: 6px;
  content: "·";
}

.agent-capability-parameters__empty {
  grid-column: 1 / -1;
  padding: 8px 10px;
  background: rgba(244, 249, 255, 0.76);
  border: 1px dashed rgba(139, 174, 215, 0.34);
  border-radius: 5px;
}

.agent-capability-features {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(238, 248, 246, 0.72);
  border: 1px solid rgba(75, 161, 141, 0.2);
  border-radius: 5px;
}

.agent-capability-features > strong {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 0.8rem;
}

.agent-capability-features > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.agent-capability-user-parameters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.agent-capability-user-parameters__head > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.agent-capability-user-parameters__head strong {
  font-size: 0.9rem;
}

.agent-capability-user-parameters__head span,
.agent-capability-user-parameters__head b {
  color: #667894;
  font-size: 0.76rem;
}

.agent-capability-managed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  color: #5f7090;
  background: rgba(246, 248, 252, 0.84);
  border: 1px dashed rgba(126, 147, 177, 0.34);
  border-radius: 5px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.agent-capability-managed strong {
  flex: 0 0 auto;
  color: #52657f;
}

.agent-capability-subpages {
  grid-column: 1 / -1;
  display: grid;
  justify-self: stretch;
  gap: 7px;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(77, 137, 206, 0.24);
  border-radius: 7px;
}

.agent-capability-subpages > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #5f7090;
  font-size: 0.76rem;
  font-weight: 850;
}

.agent-capability-subpages > div:first-child strong {
  color: #1769c2;
  font-size: 0.78rem;
}

.agent-capability-subpages > div:last-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding-bottom: 2px;
}

.agent-capability-subpages button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  padding: 0 9px;
  color: #246fc8;
  background: #ffffff;
  border: 1px solid rgba(77, 137, 206, 0.35);
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
}

.agent-capability-subpages button b {
  font-size: 0.7rem;
  font-weight: 950;
}

.agent-capability-subpages button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-capability-subpages button.is-active {
  color: #ffffff;
  background: #2781ff;
  border-color: #2781ff;
  box-shadow: 0 4px 12px rgba(39, 129, 255, 0.22);
}

.agent-capability-subpages button.is-active b,
.agent-capability-subpages button.is-active span {
  color: #ffffff;
}

.agent-capability-subpages button:hover {
  border-color: #2781ff;
}

.agent-capability-grid strong,
.agent-release-list strong,
.agent-device-card strong,
.agent-log-list strong {
  min-width: 0;
  color: #10294c;
  word-break: break-word;
}

.agent-release-list,
.agent-log-list {
  display: grid;
  gap: 9px;
}

.agent-release-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edge-agent-version {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  background: rgba(235, 248, 245, 0.78);
  border: 1px solid rgba(75, 161, 141, 0.22);
  border-radius: 6px;
}

.edge-agent-version > span:first-child {
  color: #5f7090;
  font-weight: 850;
}

.edge-agent-version strong {
  color: #0f5e4f;
  font-size: 1rem;
}

.edge-agent-version__state {
  min-height: 24px;
  padding: 0 8px;
  color: #55708f;
  background: rgba(239, 246, 255, 0.88);
  border: 1px solid rgba(154, 190, 232, 0.42);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.agent-release-list article,
.agent-log-list article {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid rgba(142, 165, 195, 0.22);
  border-radius: 6px;
}

.agent-release-list article > span {
  color: #127a58;
  font-weight: 900;
  word-break: break-word;
}

.agent-release-list p,
.agent-device-card em,
.agent-log-list span {
  margin: 0;
  color: #5f7090;
  line-height: 1.45;
  word-break: break-word;
}

.agent-release-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.agent-release-list li {
  padding: 3px 7px;
  color: #176b5a;
  background: rgba(225, 247, 241, 0.78);
  border: 1px solid rgba(54, 159, 132, 0.2);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}

.agent-release-parameters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.agent-release-parameters em {
  color: #5f7090;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.agent-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 14px;
}

.agent-device-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  color: #193557;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(122, 170, 236, 0.44);
  border-left: 4px solid #2781ff;
  border-radius: 6px;
}

.agent-device-card--selected {
  border-color: rgba(21, 133, 111, 0.5);
  border-left-color: #15856f;
  box-shadow: inset 0 0 0 1px rgba(21, 133, 111, 0.12), 0 14px 32px rgba(21, 133, 111, 0.1);
}

.agent-device-card__select {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  color: #45617f;
  background: rgba(237, 246, 255, 0.92);
  border: 1px solid rgba(138, 184, 238, 0.44);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

.agent-device-card__select input {
  width: 15px;
  height: 15px;
}

.agent-device-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-right: 92px;
}

.agent-device-card__head small {
  display: block;
  margin-top: 4px;
  color: #61728e;
  font-weight: 800;
  word-break: break-word;
}

.agent-device-card__head strong {
  font-size: 1.05rem;
}

.agent-device-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.agent-device-card__grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  background: rgba(241, 248, 255, 0.7);
  border: 1px solid rgba(138, 184, 238, 0.22);
  border-radius: 6px;
}

.agent-device-card__grid strong {
  font-size: 0.9rem;
}

.agent-device-card em {
  color: #b13f3f;
  font-style: normal;
}

.agent-device-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-device-card__actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  color: #2086ff;
  background: rgba(233, 245, 255, 0.88);
  border: 1px solid rgba(144, 191, 245, 0.72);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 850;
}

.agent-device-card__actions svg {
  width: 16px;
  height: 16px;
}

.agent-log-list {
  max-height: 180px;
  overflow: auto;
}

.agent-log-list article {
  grid-template-columns: 150px 170px minmax(0, 1fr);
  align-items: center;
}

.agent-log-list article[data-tone="ok"] {
  border-left: 3px solid #127a58;
}

.agent-log-list article[data-tone="danger"] {
  border-left: 3px solid #b13f3f;
}

.agent-manager-deploy-dialog .cloud-dialog__panel {
  max-width: 100%;
}

.agent-manager-auto-host {
  grid-column: 1 / -1;
}

.agent-deployment-guide {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(122, 165, 215, 0.38);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(46, 93, 148, 0.1);
}

.agent-deployment-guide__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.agent-deployment-guide__head h3,
.agent-deployment-guide__head p {
  margin: 0;
}

.agent-deployment-guide__head h3 {
  color: #10233e;
  font-size: 1.12rem;
}

.agent-deployment-guide__head p {
  margin-top: 6px;
  color: #5f7090;
  line-height: 1.5;
}

.agent-deployment-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  color: #315979;
  background: rgba(231, 246, 242, 0.86);
  border: 1px solid rgba(21, 133, 111, 0.26);
  border-left: 4px solid #15856f;
  border-radius: 7px;
  line-height: 1.5;
}

.agent-deployment-notice strong {
  flex: 0 0 auto;
  color: #0f6b58;
}

.agent-deployment-parameters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.agent-deployment-parameters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #526984;
  font-size: 0.82rem;
  font-weight: 850;
}

.agent-deployment-parameters input,
.agent-deployment-parameters select {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  color: #143250;
  background: rgba(248, 252, 255, 0.98);
  border: 1px solid rgba(126, 171, 226, 0.46);
  border-radius: 7px;
  font: inherit;
  font-size: 0.9rem;
}

.agent-deployment-parameters input[readonly] {
  color: #61728e;
  background: rgba(239, 246, 252, 0.88);
}

.agent-deployment-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.agent-deployment-facts div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(241, 248, 255, 0.78);
  border: 1px solid rgba(138, 184, 238, 0.28);
  border-radius: 7px;
}

.agent-deployment-facts dt {
  color: #61728e;
  font-size: 0.78rem;
  font-weight: 850;
}

.agent-deployment-facts dd {
  min-width: 0;
  margin: 0;
  color: #12365d;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.agent-deployment-registry-hint {
  margin: 0;
  padding: 10px 12px;
  color: #526984;
  background: rgba(255, 249, 230, 0.72);
  border: 1px solid rgba(218, 166, 68, 0.3);
  border-radius: 7px;
  line-height: 1.5;
}

.agent-deployment-registry-hint code {
  color: #805100;
  font-weight: 800;
}

.agent-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-command-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  background: rgba(248, 251, 255, 0.9);
  border: 1px solid rgba(122, 165, 215, 0.34);
  border-radius: 8px;
}

.agent-command-card--recommended {
  border-color: rgba(21, 133, 111, 0.36);
  box-shadow: inset 0 3px 0 rgba(21, 133, 111, 0.82);
}

.agent-command-card--wide {
  grid-column: 1 / -1;
}

.agent-command-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-command-card__head div {
  display: grid;
  gap: 3px;
}

.agent-command-card__head span {
  color: #61728e;
  font-size: 0.76rem;
  font-weight: 850;
}

.agent-command-card__head strong {
  color: #10294c;
}

.agent-command-card__head button {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 11px;
  color: #1673d1;
  background: rgba(235, 246, 255, 0.96);
  border: 1px solid rgba(96, 158, 230, 0.48);
  border-radius: 7px;
  cursor: pointer;
  font-weight: 850;
}

.agent-command-card textarea {
  width: 100%;
  min-height: 340px;
  resize: vertical;
  padding: 12px;
  color: #dcecff;
  background: #102033;
  border: 1px solid rgba(91, 143, 197, 0.56);
  border-radius: 7px;
  font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}

.agent-command-card--wide textarea {
  min-height: 190px;
}

.agent-command-card details {
  color: #526984;
  line-height: 1.5;
}

.agent-command-card summary {
  color: #24527f;
  cursor: pointer;
  font-weight: 850;
}

.agent-command-card ol,
.agent-command-card details dl {
  margin: 8px 0 0;
  padding-left: 20px;
}

.agent-command-card details dl {
  display: grid;
  gap: 7px;
  padding-left: 0;
}

.agent-command-card details dl div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px;
}

.agent-command-card details dt {
  color: #173e67;
  font-weight: 850;
}

.agent-command-card details dd {
  margin: 0;
}

@media (max-width: 1180px) {
  .agent-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agent-version-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agent-version-layout,
  .agent-command-grid {
    grid-template-columns: 1fr;
  }

  .agent-release-list {
    grid-template-columns: 1fr;
  }

  .agent-command-card--wide {
    grid-column: auto;
  }

  .agent-deployment-parameters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-device-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .monitor-sidebar {
    gap: 8px;
    padding-block: 8px;
  }

  .monitor-sidebar__item {
    min-height: 58px;
  }

  .agent-manager-toolbar,
  .agent-panel-head,
  .agent-deployment-guide__head,
  .agent-device-filterbar {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-manager-toolbar__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .agent-capability-intro,
  .agent-capability-card header {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-parameter-legend {
    justify-content: flex-start;
  }

  .agent-capability-subpages {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
  }

  .agent-capability-subpages > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-overview-grid,
  .agent-version-facts,
  .agent-capability-grid,
  .agent-deployment-parameters,
  .agent-deployment-facts,
  .agent-device-grid,
  .agent-device-card__grid,
  .edge-agent-version,
  .agent-release-list article,
  .agent-log-list article {
    grid-template-columns: 1fr;
  }

  .agent-capability-parameter {
    grid-template-columns: 1fr;
  }

  .agent-capability-parameters {
    grid-template-columns: 1fr;
  }

  .agent-device-card__head {
    padding-right: 0;
  }

  .agent-device-card__select {
    position: static;
    justify-self: start;
  }

  .agent-device-filterbar label,
  .agent-device-filterbar select {
    width: 100%;
  }
}


/* PTZ task modal: align with the light cloud-console surfaces. */
.app-page--tasks #task-modal {
  color: #10233e;
}

.app-page--tasks #task-modal::backdrop {
  background: rgba(20, 39, 66, 0.36);
  backdrop-filter: blur(5px);
}

.app-page--tasks #task-modal .task-modal__panel {
  width: min(1100px, calc(100vw - 24px));
  padding: 14px 16px;
  color: #10233e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.96)),
    linear-gradient(135deg, rgba(229, 245, 255, 0.72), rgba(240, 246, 255, 0.86));
  border: 1px solid rgba(122, 165, 215, 0.46);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(43, 83, 135, 0.24);
}

.app-page--tasks #task-modal .config-modal__head {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(270px, 1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(122, 165, 215, 0.22);
}

.app-page--tasks #task-modal .config-modal__head strong {
  color: #07172c;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 2.2vw, 1.72rem);
  letter-spacing: 0.02em;
}

.app-page--tasks #task-modal .task-modal__panel .config-modal__body {
  overflow: visible;
}

.app-page--tasks #task-modal .config-modal__actions {
  justify-content: flex-end;
  gap: 8px;
}

.app-page--tasks #task-modal .task-modal__head-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.app-page--tasks #task-modal .task-modal__head-controls .task-enable-toggle--compact {
  width: auto;
  min-width: 118px;
  min-height: 38px;
  padding: 5px 10px;
  gap: 8px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(64, 107, 157, 0.06);
}

.app-page--tasks #task-modal .task-modal__head-controls .task-enable-switch {
  flex-basis: 40px;
  width: 40px;
  height: 24px;
}

.app-page--tasks #task-modal .task-modal__head-controls .task-enable-switch::after {
  width: 18px;
  height: 18px;
}

.app-page--tasks #task-modal .task-modal__head-controls .task-enable-toggle input:checked + .task-enable-switch::after {
  transform: translateX(16px);
}

.app-page--tasks #task-modal .task-modal__head-controls .task-enable-copy strong {
  font-size: 0.88rem;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-modal-alert {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 151, 199, 0.32);
  border-radius: 10px;
  background: rgba(235, 244, 255, 0.9);
  color: #35516f;
  font-size: 0.9rem;
  line-height: 1.45;
}

.app-page--tasks #task-modal .task-modal-alert[hidden] {
  display: none;
}

.app-page--tasks #task-modal .task-modal-alert[data-tone="warn"] {
  border-color: rgba(218, 154, 38, 0.42);
  background: rgba(255, 247, 225, 0.96);
  color: #8a5a08;
}

.app-page--tasks #task-modal .task-modal-alert[data-tone="error"] {
  border-color: rgba(221, 87, 87, 0.4);
  background: rgba(255, 238, 238, 0.97);
  color: #a23636;
}

.app-page--tasks #task-modal .config-modal__body {
  margin-top: 12px;
  padding-right: 4px;
}

.app-page--tasks #task-modal #task-form.form-grid {
  grid-template-columns:
    minmax(210px, 1.16fr)
    minmax(210px, 1.12fr)
    minmax(132px, 0.62fr)
    minmax(150px, 0.7fr)
    minmax(104px, 0.48fr);
  align-items: end;
  gap: 10px 12px;
}

.app-page--tasks #task-modal #task-form.form-grid > label {
  min-width: 0;
}

.app-page--tasks #task-modal .form-grid label,
.app-page--tasks #task-modal .task-waypoint-grid label {
  gap: 5px;
}

.app-page--tasks #task-modal .form-grid label span,
.app-page--tasks #task-modal .task-waypoint-grid label span,
.app-page--tasks #task-modal .task-field-title {
  color: #61728e;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.app-page--tasks #task-modal input,
.app-page--tasks #task-modal select,
.app-page--tasks #task-modal textarea {
  min-height: 36px;
  color: #14233a;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d5e2f0;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 16px rgba(64, 107, 157, 0.06);
}

.app-page--tasks #task-modal input:focus,
.app-page--tasks #task-modal select:focus,
.app-page--tasks #task-modal textarea:focus {
  border-color: #3b91f7;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.14), 0 8px 20px rgba(47, 128, 237, 0.1);
}

.app-page--tasks #task-modal .ghost-button,
.app-page--tasks #task-modal .icon-button {
  color: #24476e;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(133, 178, 231, 0.52);
  box-shadow: 0 8px 18px rgba(64, 107, 157, 0.08);
}

.app-page--tasks #task-modal .ghost-button:hover,
.app-page--tasks #task-modal .icon-button:hover {
  color: #176fd1;
  border-color: rgba(47, 128, 237, 0.5);
  background: #f8fcff;
}

.app-page--tasks #task-modal .primary-button {
  color: #ffffff;
  background: linear-gradient(180deg, #3495ff, #1f72d8);
  border-color: #1f72d8;
  box-shadow: 0 10px 24px rgba(31, 114, 216, 0.24);
}

.app-page--tasks #task-modal .primary-button:hover {
  background: linear-gradient(180deg, #43a0ff, #236fcb);
}

.app-page--tasks #task-modal .task-weekday-group label,
.app-page--tasks #task-modal .toggle-field {
  color: #20344f;
  background: rgba(248, 252, 255, 0.84);
  border: 1px solid rgba(138, 184, 238, 0.34);
}

.app-page--tasks #task-modal .task-enable-panel {
  display: block;
}

.app-page--tasks #task-modal .task-enable-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  color: #20344f;
  background: rgba(248, 252, 255, 0.9);
  border: 1px solid rgba(138, 184, 238, 0.36);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(64, 107, 157, 0.06);
  cursor: pointer;
}

.app-page--tasks #task-modal .task-enable-toggle:hover {
  border-color: rgba(47, 128, 237, 0.46);
  background: #f9fcff;
}

.app-page--tasks #task-modal .task-enable-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.app-page--tasks #task-modal .task-enable-switch {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border: 1px solid rgba(130, 153, 181, 0.48);
  border-radius: 999px;
  background: #dbe5f0;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.app-page--tasks #task-modal .task-enable-switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  content: "";
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(38, 69, 106, 0.22);
  transition: transform 160ms ease;
}

.app-page--tasks #task-modal .task-enable-toggle input:checked + .task-enable-switch {
  background: #2f80ed;
  border-color: #2f80ed;
  box-shadow: 0 8px 18px rgba(47, 128, 237, 0.22);
}

.app-page--tasks #task-modal .task-enable-toggle input:checked + .task-enable-switch::after {
  transform: translateX(20px);
}

.app-page--tasks #task-modal .task-enable-toggle input:focus-visible + .task-enable-switch {
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.16), 0 8px 18px rgba(47, 128, 237, 0.2);
}

.app-page--tasks #task-modal .task-enable-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.app-page--tasks #task-modal .task-enable-copy strong {
  color: #132743;
  font-size: 0.96rem;
  font-weight: 850;
}

.app-page--tasks #task-modal .task-enable-copy small {
  color: #61728e;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.app-page--tasks #task-modal .status-note {
  color: #58708d;
  background: rgba(235, 247, 255, 0.68);
  border-color: rgba(138, 184, 238, 0.28);
}

.app-page--tasks #task-modal .task-waypoint-editor {
  gap: 10px;
}

.app-page--tasks #task-modal .task-waypoint-editor__head {
  align-items: center;
  padding-top: 2px;
}

.app-page--tasks #task-modal .task-waypoint-empty {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 14px;
  color: #5d728e;
  background: rgba(235, 247, 255, 0.68);
  border: 1px dashed rgba(94, 152, 220, 0.42);
  border-radius: 12px;
  font-weight: 850;
  text-align: center;
}

.app-page--tasks #task-modal .task-waypoint-card {
  padding: 10px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(122, 165, 215, 0.3);
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(46, 93, 148, 0.07);
}

.app-page--tasks #task-modal .task-waypoint-card--compact {
  padding: 0;
  overflow: visible;
  border-left: 4px solid rgba(47, 128, 237, 0.72);
  background: rgba(247, 252, 255, 0.9);
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(83, 148, 224, 0.4);
  box-shadow: 0 14px 32px rgba(46, 93, 148, 0.1);
}

.app-page--tasks #task-modal .task-waypoint-card__head {
  gap: 8px;
  margin-bottom: 7px;
}

.app-page--tasks #task-modal .task-waypoint-card__summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  margin: 0;
  padding: 7px 9px;
}

.app-page--tasks #task-modal .task-waypoint-card__toggle {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(150px, 0.82fr) minmax(170px, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 4px 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.app-page--tasks #task-modal .task-waypoint-card__toggle:hover,
.app-page--tasks #task-modal .task-waypoint-card__toggle:focus-visible {
  background: rgba(47, 128, 237, 0.055);
  outline: none;
}

.app-page--tasks #task-modal .task-waypoint-card__toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.14);
}

.app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-summary__index > span,
.app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-summary__detail em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-summary__detail {
  display: grid;
  gap: 3px;
  align-content: center;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-summary__index,
.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-summary__ptz {
  display: none;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__summary {
  min-height: 48px;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__toggle {
  grid-template-columns: minmax(0, 1fr) 18px;
  min-height: 36px;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-summary__detail {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  justify-items: end;
  text-align: right;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__chevron {
  grid-column: 2;
  grid-row: 1;
}

.app-page--tasks #task-modal .task-waypoint-card__chevron {
  display: inline-grid;
  place-items: center;
  color: #5d7898;
  font-size: 1rem;
  font-weight: 900;
  transition: transform 0.16s ease;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__chevron {
  transform: rotate(180deg);
}

.app-page--tasks #task-modal .task-waypoint-card__body {
  padding: 10px;
  border-top: 1px solid rgba(111, 160, 218, 0.2);
  background: rgba(255, 255, 255, 0.7);
}

.app-page--tasks #task-modal .task-waypoint-card__body[hidden] {
  display: none;
}

.app-page--tasks #task-modal .task-waypoint-card__head strong {
  color: #10294c;
  font-size: 1.02rem;
}

.app-page--tasks #task-modal .task-waypoint-drag {
  color: #2f80ed;
  background: rgba(235, 246, 255, 0.9);
  border-color: rgba(47, 128, 237, 0.32);
}

.app-page--tasks #task-modal .task-waypoint-remove {
  width: 30px;
  height: 30px;
  color: #b13f3f;
  background: #fffafa;
  border-color: rgba(201, 70, 70, 0.36);
  font-size: 1.08rem;
}

.app-page--tasks #task-modal .task-waypoint-card__actions {
  gap: 7px;
}

.app-page--tasks #task-modal .task-waypoint-preset-select {
  width: 100%;
  min-height: 34px;
  padding-left: 10px;
  padding-right: 28px;
  font-size: 0.8rem;
}

.app-page--tasks #task-modal .task-unit-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.app-page--tasks #task-modal .task-unit-input em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(138, 184, 238, 0.42);
  border-radius: 9px;
  background: rgba(235, 247, 255, 0.78);
  color: #526982;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.app-page--tasks #task-form[data-execution-mode="move_only"] .task-waypoint-field--samples {
  opacity: 0.62;
}

.app-page--tasks #task-form[data-execution-mode="move_only"] .task-waypoint-field--samples span::after {
  content: "（不抓图）";
  font-weight: 700;
}

.app-page--tasks #task-modal .task-waypoint-grid--compact {
  grid-template-columns:
    minmax(116px, 0.88fr)
    minmax(66px, 0.5fr)
    minmax(66px, 0.5fr)
    minmax(66px, 0.5fr)
    minmax(84px, 0.62fr)
    minmax(84px, 0.62fr)
    minmax(74px, 0.54fr)
    minmax(126px, 0.92fr);
  gap: 9px;
}

.app-page--tasks #task-modal .task-waypoint-grid--inspection {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.app-page--tasks #task-modal .task-waypoint-grid--inspection > label,
.app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-waypoint-detail-field {
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  align-self: stretch;
  gap: 12px;
}

.app-page--tasks #task-modal .task-waypoint-grid--inspection > label > span,
.app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-waypoint-detail-field > span {
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-time-window-editor {
  grid-column: 1 / -1;
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-page--tasks #task-modal .task-time-window-editor__head {
  flex-wrap: wrap;
}

.app-page--tasks #task-modal .task-time-window-list,
.app-page--tasks #task-modal .task-time-window-row {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-page--tasks #task-modal .task-waypoint-picker__trigger {
  min-height: 44px;
  padding: 7px 30px 7px 10px;
}

.app-page--tasks #task-modal .task-waypoint-picker__eyebrow {
  font-size: 0.66rem;
}

.app-page--tasks #task-modal .task-waypoint-picker__trigger strong {
  font-size: 0.78rem;
}

.app-page--tasks #task-modal .task-waypoint-picker.is-open {
  z-index: 120;
}

.app-page--tasks #task-modal .task-waypoint-picker__panel {
  z-index: 140;
  width: min(296px, calc(100vw - 48px));
  max-height: min(300px, calc(100vh - 220px));
  padding: 8px;
  overflow: auto;
}

.app-page--tasks #task-modal .task-waypoint-picker__option {
  padding: 7px 9px;
}

.app-page--tasks #task-modal .task-waypoint-readonly {
  height: auto;
  min-height: 44px;
  gap: 4px;
  padding: 5px 8px;
}

.app-page--tasks #task-modal .task-waypoint-readonly__facts span {
  min-height: 19px;
  padding: 0 6px;
  font-size: 0.74rem;
}

.app-page--tasks #task-modal .task-time-window-row input[type="text"],
.app-page--tasks #task-modal .task-time-window-row input[type="number"] {
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.app-page--tasks #task-modal label.task-time-window-include {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-time-window-include input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.app-page--tasks #task-modal .task-time-window-add {
  flex: 0 0 auto;
  max-width: 100%;
  color: #1769c2;
  background: rgba(241, 248, 255, 0.92);
  border-color: rgba(47, 128, 237, 0.28);
  white-space: nowrap;
}

@media (max-width: 1450px) {
  .app-page--tasks #task-modal .task-waypoint-grid--inspection {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-page--tasks #task-modal .task-time-window-row {
    grid-template-columns: 22px minmax(106px, 1fr) 14px minmax(106px, 1fr) minmax(112px, 0.9fr) 28px;
    gap: 5px;
  }
}

.app-page--tasks #task-modal .task-waypoint-field-head,
.app-page--tasks #task-modal .task-waypoint-duration-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
}

.app-page--tasks #task-modal .task-waypoint-grid .task-time-flag {
  display: inline-flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-height: 18px;
  gap: 4px;
  padding-left: 0;
}

.app-page--tasks #task-modal .task-time-flag span {
  flex: 0 0 auto;
  font-size: 0.71rem;
}

.app-page--tasks #task-modal .task-time-flag input {
  flex: 0 0 16px;
  width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  box-shadow: none;
}

@media (max-width: 980px) {
  .app-page--tasks #task-modal #task-form.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-page--tasks #task-modal .task-waypoint-grid--compact {
    grid-template-columns: 1fr;
  }

  .app-page--tasks #task-modal .task-waypoint-grid--inspection {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-page--tasks #task-modal .task-time-window-row {
    grid-template-columns: 22px minmax(110px, 1fr) 14px minmax(110px, 1fr) minmax(118px, 0.9fr) 28px;
  }

  .app-page--tasks #task-modal .task-waypoint-card__head {
    align-items: flex-start;
  }

  .app-page--tasks #task-modal .task-waypoint-card__summary {
    align-items: center;
  }

  .app-page--tasks #task-modal .task-waypoint-card__toggle {
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.8fr) 18px;
  }

  .app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-summary__detail {
    grid-column: 1 / -2;
  }

  .app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-card__chevron {
    grid-column: -2 / -1;
    grid-row: 1;
  }

  .app-page--tasks #task-modal .task-waypoint-card__actions {
    flex: 1 1 auto;
  }

  .app-page--tasks #task-modal .task-waypoint-picker__panel {
    width: min(100%, calc(100vw - 48px));
  }
}

@media (max-width: 640px) {
  .app-page--tasks #task-modal #task-form.form-grid {
    grid-template-columns: 1fr;
  }

  .app-page--tasks #task-modal .task-time-window-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
  }

  .app-page--tasks #task-modal .task-waypoint-card__summary {
    grid-template-columns: 30px minmax(0, 1fr) 28px;
    gap: 6px;
    padding: 7px;
  }

  .app-page--tasks #task-modal .task-waypoint-card__toggle {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 7px;
  }

  .app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-summary__ptz,
  .app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-summary__detail {
    grid-column: 1 / -1;
  }

  .app-page--tasks #task-modal .task-waypoint-card__toggle .task-waypoint-card__chevron {
    grid-column: 2;
    grid-row: 1;
  }

  .app-page--tasks #task-modal .task-waypoint-grid--inspection > label,
  .app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-waypoint-detail-field {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
  }

  .app-page--tasks #task-modal .task-time-window-row__arrow {
    display: none;
  }

  .app-page--tasks #task-modal .task-time-window-control,
  .app-page--tasks #task-modal .task-time-window-include,
  .app-page--tasks #task-modal .task-time-window-remove {
    grid-column: 2 / -1;
  }
}


/* Edge intelligence monitoring: keyframes over time-series analysis. */
.cloud-board--analysis {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
}

.analysis-camera-list {
  border: 1px solid rgba(132, 178, 231, 0.28);
  box-shadow: 0 16px 34px rgba(61, 119, 195, 0.08);
}

.analysis-camera-list__cameras {
  display: grid;
  gap: 10px;
  margin: 0;
}

.analysis-camera-node {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-left: 2px solid rgba(142, 180, 224, 0.55);
}

.analysis-camera-node--active {
  border-left-color: #2f83ff;
  background: rgba(232, 244, 255, 0.72);
  border-radius: 6px;
}

.analysis-camera-node__head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.analysis-camera-node__head strong,
.analysis-camera-node__head small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-camera-node__head strong {
  color: #0f2742;
  font-size: 0.92rem;
}

.analysis-camera-node__head small,
.analysis-camera-list__empty-point {
  color: #61728c;
  font-size: 0.78rem;
}

.analysis-camera-list__points {
  margin: 0;
}

.analysis-camera-list__points button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid transparent;
}

.analysis-camera-list__points button span,
.analysis-camera-list__points button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-camera-list__points button small {
  color: #71839c;
  font-size: 0.74rem;
}

.analysis-camera-list__points button.is-active small {
  color: rgba(255, 255, 255, 0.82);
}

.analysis-camera-list__empty-point {
  display: block;
  padding: 6px 0 0;
}

.analysis-strip {
  grid-template-columns: repeat(5, minmax(188px, 1fr));
  gap: 18px;
  overflow-x: auto;
  padding: 4px 0 10px;
}

.analysis-snapshot {
  min-width: 188px;
  aspect-ratio: 16 / 9.5;
  background: #202a33;
  border: 1px solid rgba(105, 145, 190, 0.28);
  box-shadow: 0 12px 26px rgba(33, 68, 119, 0.1);
}

.analysis-snapshot span {
  left: 0;
  padding: 7px 13px;
  color: #edf5ff;
  background: rgba(50, 86, 145, 0.82);
}

.analysis-snapshot img {
  display: block;
}

.analysis-snapshot__metrics {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  gap: 7px;
  min-width: 132px;
  padding: 12px 16px;
  color: #d9e5f2;
  background: rgba(11, 17, 23, 0.78);
  border-radius: 6px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.analysis-snapshot:hover .analysis-snapshot__metrics,
.analysis-snapshot:focus-visible .analysis-snapshot__metrics,
.analysis-snapshot--empty .analysis-snapshot__metrics {
  opacity: 1;
}

.analysis-snapshot__metrics strong {
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.analysis-snapshot__empty {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #cfdae6;
  font-weight: 800;
}

.analysis-title-row {
  gap: 14px;
}

.analysis-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.analysis-controls label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  color: #4d6381;
  background: rgba(245, 250, 255, 0.9);
  border: 1px solid rgba(141, 181, 226, 0.42);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
}

.analysis-controls input {
  width: 86px;
  height: 28px;
  color: #14243a;
  background: #ffffff;
  border: 1px solid rgba(151, 188, 230, 0.58);
  border-radius: 999px;
  padding: 0 10px;
  font: inherit;
}

.analysis-controls #analysis-model-version {
  width: 148px;
}

.analysis-controls em {
  color: #6c7f99;
  font-style: normal;
}

.analysis-chart {
  min-height: 360px;
  padding-top: 6px;
  background: linear-gradient(180deg, rgba(244, 250, 255, 0.8), rgba(232, 242, 255, 0.46));
  border-radius: 8px;
}

.analysis-chart .monitor-empty {
  height: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
}

@media (max-width: 1180px) {
  .analysis-strip {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .analysis-controls {
    justify-content: flex-start;
  }
}

/* Edge intelligence page: flatter shell plus tunnel-first controls. */
body[data-cloud-page="abnormal"].cloud-console-page {
  background: #eef6ff;
}

body[data-cloud-page="abnormal"] .monitor-main {
  background: transparent;
}

body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
  background: #ffffff;
  border: 1px solid rgba(123, 169, 220, 0.34);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(43, 89, 150, 0.12);
}

body[data-cloud-page="abnormal"] .analysis-camera-list {
  background: #ffffff;
  box-shadow: none;
}

.analysis-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.analysis-tunnel-picker {
  position: relative;
  display: block;
  min-width: 0;
  color: #45617f;
  font-size: 0.88rem;
  font-weight: 850;
}

.analysis-tunnel-native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.analysis-tunnel-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 16px;
  color: #10243d;
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(129, 177, 232, 0.58);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(61, 109, 170, 0.07);
  cursor: pointer;
}

.analysis-tunnel-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-tunnel-button svg {
  width: 18px;
  height: 18px;
  color: #5f7898;
  transition: transform 140ms ease;
}

.analysis-tunnel-button[aria-expanded="true"] {
  border-color: rgba(45, 127, 235, 0.68);
  box-shadow: 0 0 0 3px rgba(45, 127, 235, 0.12), 0 8px 18px rgba(61, 109, 170, 0.07);
}

.analysis-tunnel-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.analysis-tunnel-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: 210px;
  padding: 6px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(129, 177, 232, 0.58);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(35, 71, 120, 0.18);
}

.analysis-tunnel-menu--open {
  display: grid;
  gap: 2px;
}

.analysis-tunnel-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  color: #10243d;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
}

.analysis-tunnel-option:hover,
.analysis-tunnel-option--active {
  color: #0f67d8;
  background: rgba(222, 239, 255, 0.82);
}

.analysis-tunnel-option--empty {
  color: #6c7f96;
  cursor: default;
}

.analysis-status {
  min-width: 0;
  color: #57708d;
  font-size: 0.86rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-status[data-tone="ok"] {
  color: #177052;
}

.analysis-status[data-tone="danger"] {
  color: #b13f3f;
}

.app-page--tasks #task-modal .task-intelligence-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 0.92fr);
  align-items: stretch;
  gap: 12px;
}

.app-page--tasks #task-modal .task-intelligence-panel--fields-only {
  grid-template-columns: minmax(0, 1fr);
}

.app-page--tasks #task-modal .task-intelligence-fields {
  display: grid;
  grid-template-columns: minmax(120px, 0.56fr) minmax(160px, 1fr);
  gap: 10px;
  padding: 10px 12px;
  background: rgba(248, 252, 255, 0.9);
  border: 1px solid rgba(138, 184, 238, 0.36);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(64, 107, 157, 0.06);
}

@media (max-width: 980px) {
  .analysis-toolbar,
  .app-page--tasks #task-modal .task-intelligence-panel,
  .app-page--tasks #task-modal .task-intelligence-fields {
    grid-template-columns: 1fr;
  }

  .app-page--tasks #task-modal .config-modal__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app-page--tasks #task-modal .task-modal__head-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .app-page--tasks #task-modal .config-modal__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-page--tasks #task-modal .config-modal__actions {
    grid-row: 3;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .app-page--tasks #task-modal .task-modal__head-controls {
    flex-wrap: wrap;
  }
}


/* Abnormal monitoring: keep the workspace in one viewport and render edge detections inline. */
body[data-cloud-page="abnormal"].cloud-console-page:not(.modal-open) {
  height: 100vh;
  overflow: hidden !important;
}

body[data-cloud-page="abnormal"] .monitor-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .monitor-sidebar {
  min-height: 0;
  overflow-y: auto;
  padding-block: 18px;
}

body[data-cloud-page="abnormal"] .monitor-main {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 14px 6px 6px 16px;
}

body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
  grid-template-columns: 260px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: 16px;
  padding: 14px 18px;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-camera-list {
  min-height: 0;
}

body[data-cloud-page="abnormal"] #analysis-camera-tree {
  min-height: 0;
  overflow-y: auto;
}

body[data-cloud-page="abnormal"] .analysis-workspace {
  grid-template-rows: auto minmax(155px, 0.42fr) auto minmax(220px, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-toolbar {
  grid-template-columns: minmax(280px, 500px) auto minmax(260px, 1fr);
}

body[data-cloud-page="abnormal"] .analysis-strip {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  min-height: 0;
  overflow: auto;
  padding-bottom: 4px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 220px;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-title-row h2 {
  margin: 0;
}

body[data-cloud-page="abnormal"] .analysis-chart {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-chart__plot > svg {
  display: block;
  width: 100%;
  height: calc(100% - 28px);
  min-height: 200px;
}

.analysis-detection-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.analysis-detection-box {
  position: absolute;
  min-width: 12px;
  min-height: 12px;
  border: 2px solid rgba(78, 140, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 6px 16px rgba(15, 39, 66, 0.25);
}

.analysis-detection-box--water_leakage,
.analysis-detection-box--leakage_water {
  border-color: rgba(69, 151, 255, 0.96);
}

.analysis-detection-box--crack {
  border-color: rgba(49, 183, 180, 0.96);
}

.analysis-detection-box--spalling {
  border-color: rgba(128, 108, 240, 0.96);
}

.analysis-detection-box em {
  position: absolute;
  left: -2px;
  bottom: calc(100% + 2px);
  max-width: 160px;
  padding: 2px 5px;
  color: #ffffff;
  background: rgba(12, 29, 50, 0.86);
  border-radius: 4px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

/* Abnormal monitoring right pane: reference filmstrip plus two-series area chart. */
body[data-cloud-page="abnormal"] .analysis-camera-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

body[data-cloud-page="abnormal"] .analysis-sidebar-controls {
  display: grid;
  gap: 8px;
  align-items: center;
}

body[data-cloud-page="abnormal"] .analysis-workspace {
  grid-template-rows: minmax(158px, 0.29fr) auto minmax(360px, 1fr);
  gap: 18px;
  padding: 8px 8px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 22%, #eef6ff 100%);
}

body[data-cloud-page="abnormal"] .analysis-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-carousel__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 82px;
  padding: 0;
  color: #111820;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

body[data-cloud-page="abnormal"] .analysis-carousel__nav:disabled {
  color: rgba(17, 24, 32, 0.2);
  cursor: default;
}

body[data-cloud-page="abnormal"] .analysis-strip {
  display: flex;
  gap: 34px;
  min-height: 0;
  height: 100%;
  padding: 6px 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-color: rgba(33, 39, 47, 0.24) rgba(15, 23, 42, 0.05);
  scrollbar-width: thin;
}

body[data-cloud-page="abnormal"] .analysis-strip::-webkit-scrollbar {
  height: 8px;
}

body[data-cloud-page="abnormal"] .analysis-strip::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
}

body[data-cloud-page="abnormal"] .analysis-strip::-webkit-scrollbar-thumb {
  background: rgba(33, 39, 47, 0.24);
  border-radius: 999px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot {
  position: relative;
  flex: 0 0 max(190px, calc((100% - 136px) / 5));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 190px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 12px 24px rgba(48, 83, 130, 0.1);
  cursor: pointer;
}

body[data-cloud-page="abnormal"] .analysis-snapshot--active {
  outline: 2px dashed rgba(31, 52, 74, 0.6);
  outline-offset: 8px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot__image {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #20252b;
  border-radius: 4px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot__image[data-analysis-open-image] {
  cursor: zoom-in;
}

body[data-cloud-page="abnormal"] .analysis-snapshot img,
body[data-cloud-page="abnormal"] .analysis-snapshot__empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot__time {
  position: static;
  z-index: auto;
  width: auto;
  min-height: 20px;
  padding: 7px 4px 0;
  color: #1f344c;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-cloud-page="abnormal"] .analysis-snapshot__metrics,
body[data-cloud-page="abnormal"] .analysis-detection-layer {
  display: none;
}

body[data-cloud-page="abnormal"] .analysis-title-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

body[data-cloud-page="abnormal"] .analysis-title-row h2 {
  color: #0b1118;
  font-size: 1.04rem;
  font-weight: 900;
}

body[data-cloud-page="abnormal"] .analysis-legend {
  position: static;
  top: auto;
  left: auto;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transform: none;
  color: #202833;
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
}

body[data-cloud-page="abnormal"] .analysis-legend span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body[data-cloud-page="abnormal"] .analysis-legend span::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: -11px 0 0 -8px currentColor, 11px 0 0 -8px currentColor;
}

body[data-cloud-page="abnormal"] .analysis-legend .legend-mint {
  color: #55bbb8;
}

body[data-cloud-page="abnormal"] .analysis-legend .legend-blue {
  color: #5a8dff;
}

body[data-cloud-page="abnormal"] .analysis-download-button {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: rgba(16, 24, 32, 0.58);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

body[data-cloud-page="abnormal"] .analysis-download-button:disabled {
  opacity: 0.35;
  cursor: default;
}

body[data-cloud-page="abnormal"] .analysis-chart {
  min-height: 0;
  height: 100%;
  padding: 0;
  background: linear-gradient(180deg, rgba(246, 251, 255, 0.58) 0%, rgba(219, 234, 255, 0.82) 52%, rgba(221, 215, 255, 0.78) 100%);
  border-radius: 0;
}

body[data-cloud-page="abnormal"] .analysis-chart__plot > svg {
  width: 100%;
  height: 100%;
  min-height: 340px;
}

body[data-cloud-page="abnormal"] .analysis-chart-grid {
  stroke: rgba(205, 216, 231, 0.74);
  stroke-width: 1;
}

body[data-cloud-page="abnormal"] .analysis-chart-axis {
  stroke: rgba(33, 47, 68, 0.58);
  stroke-width: 1.4;
}

body[data-cloud-page="abnormal"] .analysis-chart-tick {
  stroke: rgba(33, 47, 68, 0.48);
  stroke-width: 1.2;
}

body[data-cloud-page="abnormal"] .analysis-axis-label {
  fill: rgba(33, 47, 68, 0.82);
  font-size: 14px;
  font-weight: 400;
}

body[data-cloud-page="abnormal"] .analysis-axis-label--x {
  font-size: 13px;
}

body[data-cloud-page="abnormal"] .analysis-axis-title {
  fill: rgba(33, 47, 68, 0.72);
  font-size: 14px;
  font-weight: 400;
}

body[data-cloud-page="abnormal"] .analysis-empty-fill {
  display: grid;
  min-height: 320px;
  place-items: center;
}

@media (max-width: 1180px) {
  body[data-cloud-page="abnormal"] .analysis-strip {
    gap: 22px;
  }

  body[data-cloud-page="abnormal"] .analysis-snapshot {
    flex-basis: clamp(210px, 28vw, 320px);
  }
}

@media (max-width: 760px) {
  body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
    grid-template-columns: 1fr;
  }

  body[data-cloud-page="abnormal"] .analysis-title-row {
    grid-template-columns: 1fr auto;
  }

  body[data-cloud-page="abnormal"] .analysis-legend {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

/* Abnormal monitoring final viewport and visible edge detections. */
body[data-cloud-page="abnormal"].cloud-console-page:not(.modal-open) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
}

body[data-cloud-page="abnormal"] .monitor-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .monitor-main,
body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis,
body[data-cloud-page="abnormal"] .analysis-workspace {
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-detection-layer {
  display: block;
}

/* Abnormal monitoring visual correction 20260702l. */
body[data-cloud-page="abnormal"] .monitor-main {
  min-width: 0;
  padding: 12px 12px 12px 16px;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
  grid-template-columns: clamp(220px, 14vw, 260px) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 14px;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-camera-list,
body[data-cloud-page="abnormal"] .analysis-workspace,
body[data-cloud-page="abnormal"] .analysis-carousel,
body[data-cloud-page="abnormal"] .analysis-strip,
body[data-cloud-page="abnormal"] .analysis-chart {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

body[data-cloud-page="abnormal"] .analysis-workspace {
  display: grid;
  grid-template-rows: clamp(128px, 18vh, 194px) minmax(30px, auto) minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  padding: 0 10px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 24%, #eef6ff 100%);
}

body[data-cloud-page="abnormal"] .analysis-carousel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-carousel__nav {
  width: 30px;
  height: 72px;
  font-size: 1.75rem;
  line-height: 1;
}

body[data-cloud-page="abnormal"] .analysis-strip {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 100%;
  padding: 12px 8px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

body[data-cloud-page="abnormal"] .analysis-snapshot {
  flex: 0 0 clamp(160px, calc((100% - 120px) / 5), 340px);
  min-width: 160px;
  max-width: 340px;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-snapshot--active {
  outline: 2px dashed rgba(31, 52, 74, 0.58);
  outline-offset: 4px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot img,
body[data-cloud-page="abnormal"] .analysis-snapshot__empty {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-cloud-page="abnormal"] .analysis-detection-layer {
  display: none !important;
}

body[data-cloud-page="abnormal"] .analysis-title-row {
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  min-height: 30px;
  gap: 12px;
}

body[data-cloud-page="abnormal"] .analysis-title-row h2 {
  margin: 0;
  line-height: 1.2;
}

body[data-cloud-page="abnormal"] .analysis-download-button {
  width: 32px;
  height: 32px;
  font-size: 1.42rem;
}

body[data-cloud-page="abnormal"] .analysis-chart {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-chart__plot > svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body[data-cloud-page="abnormal"] .analysis-empty-fill {
  min-height: 0;
  height: 100%;
}

@media (max-width: 1180px) {
  body[data-cloud-page="abnormal"] .analysis-strip {
    gap: 18px;
  }

  body[data-cloud-page="abnormal"] .analysis-snapshot {
    flex-basis: clamp(180px, 38vw, 300px);
  }
}

@media (max-width: 760px) {
  body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  body[data-cloud-page="abnormal"] .analysis-workspace {
    min-height: 520px;
  }
}

/* Abnormal monitoring reference alignment 20260702m. */
body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
  grid-template-columns: clamp(210px, 11vw, 236px) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 10px 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 48%, #edf6ff 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-cloud-page="abnormal"] .analysis-camera-list {
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(135, 181, 232, 0.34);
  border-radius: 12px;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-workspace {
  grid-template-rows: auto clamp(142px, 18vh, 210px) minmax(32px, auto) minmax(0, 1fr);
  gap: 12px;
  padding: 2px 0 0 4px;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 26%, #eaf4ff 100%);
  border: 0;
  box-shadow: none;
}

body[data-cloud-page="abnormal"] .analysis-time-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(237, 246, 255, 0.92));
  border: 1px solid rgba(116, 164, 230, 0.38);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(49, 101, 168, 0.08);
}

body[data-cloud-page="abnormal"] .analysis-time-filter__heading {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 84px;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__heading strong {
  color: #102943;
  font-size: 0.92rem;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__heading span {
  color: #64809f;
  font-size: 0.74rem;
  font-weight: 750;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__presets {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__presets button,
body[data-cloud-page="abnormal"] .analysis-time-filter__apply {
  min-height: 34px;
  padding: 0 12px;
  color: #315d8f;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(119, 166, 224, 0.52);
  border-radius: 7px;
  cursor: pointer;
  font-weight: 820;
  white-space: nowrap;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__presets button.is-active {
  color: #ffffff;
  background: #2f83f7;
  border-color: #2f83f7;
  box-shadow: 0 6px 15px rgba(47, 131, 247, 0.22);
}

body[data-cloud-page="abnormal"] .analysis-time-filter__inputs {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__inputs label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #4d6887;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__inputs input {
  width: 172px;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  color: #17314e;
  background: #ffffff;
  border: 1px solid rgba(119, 166, 224, 0.52);
  border-radius: 7px;
  font: inherit;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__separator {
  color: #7087a1;
  font-size: 0.8rem;
  font-weight: 800;
}

body[data-cloud-page="abnormal"] .analysis-time-filter__apply {
  flex: 0 0 auto;
  color: #ffffff;
  background: #176fd1;
  border-color: #176fd1;
}

@media (max-width: 1360px) {
  body[data-cloud-page="abnormal"] .analysis-time-filter {
    flex-wrap: wrap;
  }

  body[data-cloud-page="abnormal"] .analysis-time-filter__inputs {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

body[data-cloud-page="abnormal"] .analysis-carousel {
  grid-template-columns: 46px minmax(0, 1fr) 46px;
}

body[data-cloud-page="abnormal"] .analysis-carousel__nav {
  width: 42px;
  height: 76px;
  color: #0d1117;
  font-size: 1.9rem;
}

body[data-cloud-page="abnormal"] .analysis-strip {
  gap: 36px;
  padding: 12px 14px 18px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot {
  flex-basis: clamp(190px, calc((100% - 172px) / 5), 360px);
  min-width: 190px;
  max-width: 360px;
  border-radius: 4px;
  box-shadow: none;
}

body[data-cloud-page="abnormal"] .analysis-snapshot--active {
  outline-offset: 5px;
}

body[data-cloud-page="abnormal"] .analysis-snapshot__time {
  padding-top: 7px;
  font-size: 0.8rem;
}

body[data-cloud-page="abnormal"] .analysis-title-row {
  min-height: 32px;
  padding: 0 4px;
}

body[data-cloud-page="abnormal"] .analysis-legend {
  gap: 24px;
  font-size: 0.88rem;
}

body[data-cloud-page="abnormal"] .analysis-download-button {
  width: 30px;
  height: 30px;
  color: rgba(15, 23, 42, 0.62);
}

body[data-cloud-page="abnormal"] .analysis-chart {
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.54) 0%, rgba(222, 236, 255, 0.88) 52%, rgba(224, 219, 255, 0.82) 100%);
}

body[data-cloud-page="abnormal"] .analysis-detection-layer {
  display: block !important;
}

/* Abnormal trend navigator and point tooltip 20260721a. */
body[data-cloud-page="abnormal"] .analysis-chart {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 94px;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-chart__plot {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body[data-cloud-page="abnormal"] .analysis-chart__plot > svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body[data-cloud-page="abnormal"] .analysis-chart-point {
  cursor: crosshair;
  outline: none;
}

body[data-cloud-page="abnormal"] .analysis-chart-point:hover,
body[data-cloud-page="abnormal"] .analysis-chart-point:focus {
  r: 6px;
  stroke-width: 3.4px;
}

body[data-cloud-page="abnormal"] .analysis-chart-tooltip {
  position: absolute;
  z-index: 5;
  max-width: min(420px, calc(100% - 24px));
  padding: 8px 11px;
  color: #ffffff;
  background: rgba(18, 39, 66, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(16, 42, 75, 0.22);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: normal;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: end;
  gap: 9px;
  height: 94px;
  min-width: 0;
  padding: 5px 14px 9px;
  background: rgba(250, 253, 255, 0.82);
  border-top: 1px solid rgba(132, 175, 226, 0.34);
  box-sizing: border-box;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__date {
  color: #58708e;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 15px;
  white-space: nowrap;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__date--end {
  text-align: right;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__range {
  display: grid;
  grid-template-rows: 32px 42px;
  gap: 4px;
  min-width: 0;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundaries {
  position: relative;
  display: block;
  min-width: 0;
  color: #3e5877;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundaries span {
  position: absolute;
  top: 50%;
  display: block;
  width: max-content;
  max-width: min(230px, 48%);
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundary--start {
  text-align: left;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundary--end {
  text-align: right;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundary.is-near-start {
  transform: translate(0, -50%);
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundary.is-near-end {
  transform: translate(-100%, -50%);
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundaries.is-stacked .analysis-chart-navigator__boundary--start {
  top: 8px;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__boundaries.is-stacked .analysis-chart-navigator__boundary--end {
  top: 24px;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__viewport {
  position: relative;
  min-width: 0;
  height: 42px;
  overflow: hidden;
  touch-action: none;
  background: rgba(236, 244, 255, 0.76);
  border: 1px solid rgba(114, 157, 215, 0.34);
  border-radius: 4px;
  box-shadow: inset 0 1px 4px rgba(41, 84, 137, 0.08);
  cursor: crosshair;
  user-select: none;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__viewport > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__selection {
  position: absolute;
  top: 1px;
  bottom: 1px;
  min-width: 12px;
  background: rgba(70, 136, 244, 0.16);
  border-top: 1px solid rgba(75, 139, 244, 0.62);
  border-bottom: 1px solid rgba(75, 139, 244, 0.62);
  box-shadow: 0 0 0 9999px rgba(241, 247, 255, 0.55);
  cursor: grab;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__viewport.is-dragging,
body[data-cloud-page="abnormal"] .analysis-chart-navigator__viewport.is-dragging .analysis-chart-navigator__selection {
  cursor: grabbing;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__handle {
  position: absolute;
  top: -2px;
  bottom: -2px;
  z-index: 2;
  display: block;
  width: 9px;
  padding: 0;
  background: #ffffff;
  border: 2px solid #75a5ff;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(37, 93, 167, 0.24);
  cursor: ew-resize;
  outline: none;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__handle:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 130, 245, 0.28), 0 1px 5px rgba(37, 93, 167, 0.24);
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__handle--start {
  left: -5px;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__handle--end {
  right: -5px;
}

body[data-cloud-page="abnormal"] .analysis-chart-navigator__grip {
  position: absolute;
  top: -2px;
  left: 50%;
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(37, 88, 154, 0.42);
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 1180px) {
  body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body[data-cloud-page="abnormal"] .analysis-strip {
    gap: 22px;
  }

  body[data-cloud-page="abnormal"] .analysis-snapshot {
    flex-basis: clamp(180px, 34vw, 300px);
  }
}

@media (max-width: 760px) {
  body[data-cloud-page="abnormal"] .analysis-title-row {
    grid-template-columns: 1fr auto;
  }

  body[data-cloud-page="abnormal"] .analysis-legend {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Monitor sidebar collapse and abnormal camera tree refinements 20260704f. */
.monitor-sidebar__toggle {
  order: 99;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: auto auto 0;
  padding: 0;
  color: #45637f;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(141, 181, 226, 0.48);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(61, 109, 170, 0.08);
  cursor: pointer;
}

.monitor-sidebar__toggle:hover {
  color: #176fee;
  background: rgba(255, 255, 255, 0.92);
}

.monitor-sidebar__toggle:focus-visible,
.analysis-camera-node__head:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 3px;
}

.monitor-sidebar__toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

body.monitor-sidebar-collapsed .monitor-shell {
  grid-template-columns: 64px minmax(0, 1fr);
}

body.monitor-sidebar-collapsed .monitor-sidebar {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  gap: 8px;
  padding: 14px 8px 18px;
  overflow: visible;
  box-sizing: border-box;
  z-index: 5;
}

body.monitor-sidebar-collapsed .monitor-sidebar__toggle svg {
  transform: rotate(180deg);
}

body.monitor-sidebar-collapsed .monitor-sidebar__item {
  position: relative;
  justify-content: center;
  gap: 0;
  width: 44px;
  inline-size: 44px;
  min-height: 50px;
  padding: 8px;
  border-radius: 8px;
}

body.monitor-sidebar-collapsed .monitor-sidebar__item::after {
  content: attr(data-sidebar-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 20;
  min-width: max-content;
  padding: 7px 10px;
  color: #10243d;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(129, 177, 232, 0.58);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(45, 86, 142, 0.16);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -50%) translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

body.monitor-sidebar-collapsed .monitor-sidebar__item:hover::after,
body.monitor-sidebar-collapsed .monitor-sidebar__item:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

body.monitor-sidebar-collapsed .monitor-sidebar__item svg {
  width: 22px;
  height: 22px;
}

body.monitor-sidebar-collapsed .monitor-sidebar__toggle {
  width: 44px;
  height: 44px;
}

body.monitor-sidebar-collapsed .monitor-sidebar__item span {
  width: 0;
  max-width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
  grid-template-columns: clamp(260px, 16vw, 320px) minmax(0, 1fr);
}

body[data-cloud-page="abnormal"] .analysis-tunnel-button {
  min-height: 44px;
  font-size: 0.96rem;
}

body[data-cloud-page="abnormal"] .analysis-camera-node__head {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

body[data-cloud-page="abnormal"] .analysis-camera-node__head:hover strong {
  color: #176fee;
}

body[data-cloud-page="abnormal"] .analysis-camera-node__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body[data-cloud-page="abnormal"] .analysis-camera-node__title-row strong {
  flex: 1 1 auto;
}

body[data-cloud-page="abnormal"] .analysis-camera-node__chevron {
  flex: 0 0 auto;
  color: #6b83a0;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 160ms ease;
}

body[data-cloud-page="abnormal"] .analysis-camera-node--collapsed .analysis-camera-node__chevron {
  transform: rotate(-90deg);
}

body[data-cloud-page="abnormal"] .analysis-camera-node--collapsed .analysis-camera-list__points {
  display: none;
}


body[data-cloud-page="abnormal"] .analysis-camera-list__points {
  display: grid;
  gap: 6px;
}

body[data-cloud-page="abnormal"] .analysis-camera-list__points button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  gap: 0;
}

body[data-cloud-page="abnormal"] .analysis-camera-list__points button span {
  display: block;
  width: 100%;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.15;
}

body[data-cloud-page="abnormal"] .analysis-camera-list__points button small {
  display: none;
}

@media (max-width: 1180px) {
  body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body.monitor-sidebar-collapsed .monitor-shell,
  body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
    grid-template-columns: 1fr;
  }

  body.monitor-sidebar-collapsed .monitor-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible;
  }

  body.monitor-sidebar-collapsed .monitor-sidebar__item {
    width: 100%;
    inline-size: 100%;
  }

  body.monitor-sidebar-collapsed .monitor-sidebar__toggle {
    margin-top: 0;
  }

  body.monitor-sidebar-collapsed .monitor-sidebar__item span {
    width: auto;
    max-width: none;
    height: auto;
    opacity: 1;
  }
}



/* Abnormal monitoring compact camera rail and active-first selection 20260704j. */
body[data-cloud-page="abnormal"] #analysis-camera-tree {
  padding: 8px 6px 12px;
}

body[data-cloud-page="abnormal"] .analysis-camera-list__cameras {
  gap: 8px;
}

body[data-cloud-page="abnormal"] .analysis-camera-node {
  gap: 6px;
  padding: 7px 6px 7px 8px;
}

body[data-cloud-page="abnormal"] .analysis-camera-list__points {
  gap: 5px;
}

body[data-cloud-page="abnormal"] .analysis-camera-list__points button {
  min-height: 34px;
  padding: 5px 8px;
}

@media (max-width: 1180px) {
  body[data-cloud-page="abnormal"] .monitor-board.cloud-board--analysis {
    grid-template-columns: clamp(204px, 28vw, 232px) minmax(0, 1fr);
  }
}

/* Workspace header background consistency 20260708d. */
.app-page:not(.app-page--login) .topbar.topbar--workspace,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace,
.monitor-shell > .topbar.topbar--workspace {
  position: relative;
  z-index: 80;
  overflow: visible;
  isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  background-clip: padding-box;
  border: 1px solid rgba(48, 103, 176, 0.16);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(45, 92, 160, 0.08);
  backdrop-filter: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace::after,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace::after,
.monitor-shell > .topbar.topbar--workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  pointer-events: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav,
.monitor-shell > .topbar.topbar--workspace .page-nav,
.app-page:not(.app-page--login) .topbar.topbar--workspace .user-bar,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .user-bar {
  background: #ffffff;
}

/* Camera switch modal: tunnel-first filtering and calmer card hierarchy. */
.active-camera-modal__panel {
  width: min(980px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  padding: 22px;
  border: 1px solid rgba(55, 116, 178, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(80, 151, 235, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 253, 0.96));
  box-shadow: 0 34px 90px rgba(24, 64, 105, 0.26);
}

.active-camera-modal .config-modal__head {
  align-items: flex-start;
  gap: 24px;
}

.active-camera-modal .config-modal__head > div:first-child {
  display: grid;
  gap: 6px;
}

.active-camera-modal .config-modal__head strong {
  color: #13243a;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.active-camera-modal .config-modal__head span {
  display: block;
  color: #657891;
  font-size: 0.9rem;
  line-height: 1.5;
}

.active-camera-modal .config-modal__actions .ghost-button {
  min-height: 40px;
  padding-inline: 18px;
  border-color: rgba(55, 116, 178, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: #20354f;
}

.active-camera-modal__body {
  display: grid;
  gap: 14px;
  min-height: 0;
  margin-top: 20px;
}

.active-camera-picker-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(55, 116, 178, 0.14);
  border-radius: 18px;
  background: rgba(233, 242, 251, 0.76);
}

.active-camera-picker-filter {
  display: grid;
  gap: 7px;
  width: min(420px, 100%);
  color: #52677f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.active-camera-picker-filter select {
  min-height: 46px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(55, 116, 178, 0.2);
  border-radius: 12px;
  background-color: #fff;
  color: #172a42;
  font-size: 0.95rem;
  font-weight: 700;
}

.active-camera-picker-count {
  flex: 0 0 auto;
  padding-bottom: 12px;
  color: #647891;
  font-size: 0.86rem;
  white-space: nowrap;
}

.active-camera-picker-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  max-height: min(58vh, 560px);
  padding: 2px 4px 8px 2px;
  scrollbar-gutter: stable;
}

.active-camera-picker-item {
  min-height: 148px;
  padding: 16px;
  border-color: rgba(55, 116, 178, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(40, 94, 145, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.active-camera-picker-item:hover {
  border-color: rgba(47, 130, 229, 0.34);
  box-shadow: 0 18px 36px rgba(40, 94, 145, 0.14);
  transform: translateY(-1px);
}

.active-camera-picker-item--current {
  border-color: rgba(30, 158, 120, 0.3);
  background: linear-gradient(145deg, rgba(223, 247, 239, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 34px rgba(31, 139, 108, 0.12);
}

.active-camera-picker-item__summary {
  min-height: 116px;
  gap: 16px;
}

.active-camera-picker-item__head,
.active-camera-picker-item__foot {
  flex-wrap: nowrap;
}

.active-camera-picker-item__title {
  gap: 6px;
}

.active-camera-picker-item__group {
  color: #71849a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.active-camera-picker-item__name {
  color: #162a43;
  font-size: 1.05rem;
  line-height: 1.3;
  white-space: normal;
}

.active-camera-picker-item__chips {
  min-width: 0;
  white-space: normal;
}

.active-camera-picker-item__summary .profile-chip {
  min-height: 25px;
  padding-inline: 9px;
  font-size: 0.72rem;
}

.active-camera-picker-item__action {
  width: auto;
  min-width: 116px;
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 11px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.active-camera-picker-item__current-label {
  color: #258866;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.active-camera-picker-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border-color: rgba(55, 116, 178, 0.14);
  background: rgba(255, 255, 255, 0.76);
  color: #647891;
  text-align: center;
}

@media (max-width: 720px) {
  .active-camera-modal__panel {
    width: min(100%, calc(100vw - 16px));
    padding: 16px;
    border-radius: 22px;
  }

  .active-camera-modal .config-modal__head span {
    display: none;
  }

  .active-camera-picker-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .active-camera-picker-filter {
    width: 100%;
  }

  .active-camera-picker-count {
    padding-bottom: 0;
  }

  .active-camera-picker-list {
    grid-template-columns: 1fr;
    max-height: min(62vh, 620px);
  }

  .active-camera-picker-item__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .active-camera-picker-item__action {
    width: 100%;
  }
}

/* Edge device action layout: keep row actions compact without exposing secrets. */
.cloud-actions--edge .cloud-actions__inner {
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  gap: 8px 10px;
}

.cloud-actions--edge a,
.cloud-actions--edge button {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.2;
}

/* Banner navigation uses real inline SVG icons; keep the header vertically compact. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link::before,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link::before,
.monitor-shell > .topbar.topbar--workspace .page-nav__link::before {
  display: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__icon,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__icon,
.monitor-shell > .topbar.topbar--workspace .page-nav__icon {
  display: block;
  flex: 0 0 var(--workspace-nav-icon-size);
  width: var(--workspace-nav-icon-size);
  height: var(--workspace-nav-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace,
.monitor-shell > .topbar.topbar--workspace {
  min-height: var(--stable-topbar-height);
  padding: var(--stable-topbar-padding-y) var(--stable-topbar-padding-x);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__brand,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__brand,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__title-row--system,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__title-row--system {
  min-height: 46px;
  height: 46px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav,
.monitor-shell > .topbar.topbar--workspace .page-nav {
  min-height: var(--stable-primary-nav-height);
  padding-block: 3px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link,
.monitor-shell > .topbar.topbar--workspace .page-nav__link {
  min-height: var(--stable-primary-nav-item-height);
}

/* Keep binding relationships, camera inventory, and link probing in one module. */
.device-binding-subnav {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 9px;
  color: #57708f;
  background: linear-gradient(90deg, rgba(238, 247, 255, 0.96), rgba(248, 252, 255, 0.9));
  border: 1px solid rgba(113, 166, 231, 0.3);
  border-radius: 9px;
  overflow-x: auto;
}

.device-binding-subnav[hidden] {
  display: none !important;
}

.device-binding-subnav__title {
  flex: 0 0 auto;
  padding: 0 10px;
  color: #193b64;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.device-binding-subnav__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  color: #536b88;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.device-binding-subnav__link:hover {
  color: #0f6ddc;
  background: rgba(255, 255, 255, 0.88);
}

.device-binding-subnav__link--active,
.device-binding-subnav__link[aria-current="page"] {
  color: #0f6ddc;
  background: #fff;
  border-color: rgba(76, 145, 233, 0.38);
  box-shadow: 0 6px 16px rgba(37, 105, 194, 0.12);
}

.camera-management-content {
  align-content: start;
  gap: 12px;
}

.edge-topology-page .monitor-board {
  grid-template-rows: auto auto minmax(0, 1fr);
}

@media (max-width: 720px) {
  .device-binding-subnav {
    padding: 6px;
  }

  .device-binding-subnav__title {
    padding-inline: 6px;
  }

  .edge-topology-profile-fields {
    display: block;
  }

  .edge-topology-profile-fields label + label {
    margin-top: 10px;
  }

  .edge-connectivity-log-list article > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Stable banner navigation: reserve late-loaded controls and separate tabs without an outer pill. */

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav,
.monitor-shell > .topbar.topbar--workspace .page-nav {
  gap: 0;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav > :not(:last-child),
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav > :not(:last-child),
.monitor-shell > .topbar.topbar--workspace .page-nav > :not(:last-child) {
  position: relative;
  margin-right: 13px;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav > :not(:last-child)::after,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav > :not(:last-child)::after,
.monitor-shell > .topbar.topbar--workspace .page-nav > :not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(83, 111, 145, 0.34) 24%, rgba(83, 111, 145, 0.34) 76%, transparent);
  pointer-events: none;
  transform: translateY(-50%);
}

html:not(.page-nav-icons-ready) .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link::before,
html:not(.page-nav-icons-ready) .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link::before,
html:not(.page-nav-icons-ready) .monitor-shell > .topbar.topbar--workspace .page-nav__link::before {
  content: "";
  display: block;
  flex: 0 0 var(--workspace-nav-icon-size);
  width: var(--workspace-nav-icon-size);
  height: var(--workspace-nav-icon-size);
  background: transparent;
  -webkit-mask: none;
  mask: none;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace a.page-nav__link--settings::after,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace a.page-nav__link--settings::after,
.monitor-shell > .topbar.topbar--workspace a.page-nav__link--settings::after {
  content: "";
  display: block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-left: 1px;
  visibility: hidden;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__inline-user,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__inline-user,
.monitor-shell > .topbar.topbar--workspace .topbar__inline-user {
  min-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 981px) {
  .app-page:not(.app-page--login) .app-shell,
  .app-page:not(.app-page--login) .app-shell--section,
  .dashboard-page.dashboard-page--refined .app-shell,
  .monitor-shell {
    padding-top: 10px;
  }

  .app-page:not(.app-page--login) .topbar.topbar--workspace,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace,
  .monitor-shell > .topbar.topbar--workspace {
    height: var(--stable-topbar-height);
    min-height: var(--stable-topbar-height);
  }
}

/* Unified select menus: always open below and never exceed the control width. */
.app-select {
  position: relative;
  display: grid;
  min-width: 0;
  max-width: 100%;
}

.app-select__native,
.app-select__button {
  grid-area: 1 / 1;
}

.app-select__native {
  opacity: 0 !important;
  pointer-events: none;
}

.app-select__button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(55, 116, 178, 0.16);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cloud-toolbar .app-select__button,
.cloud-dialog .app-select__button,
.monitor-filter .app-select__button,
.monitor-pagination .app-select__button {
  border-color: #d5deea;
  border-radius: 4px;
  color: #20344f;
  background: #ffffff;
}

.app-select__button:hover,
.app-select--open .app-select__button {
  border-color: rgba(47, 128, 237, 0.52);
  box-shadow: inset 0 0 0 2px rgba(47, 128, 237, 0.08);
}

.app-select__button:focus-visible {
  outline: 2px solid rgba(47, 128, 237, 0.52);
  outline-offset: 2px;
}

.app-select__button:disabled {
  cursor: not-allowed;
}

.app-select__value {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: inherit;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-select__button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.app-select--open .app-select__button svg {
  transform: rotate(180deg);
}

.app-select__menu {
  position: fixed;
  z-index: 10000;
  display: grid;
  box-sizing: border-box;
  gap: 3px;
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(55, 116, 178, 0.22);
  border-radius: 10px;
  background: #ffffff;
}

.app-select__menu[hidden] {
  display: none;
}

.app-select__group {
  padding: 7px 10px 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-select__option {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.app-select__option span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-select__option i {
  color: transparent;
  font-style: normal;
  font-weight: 800;
}

.app-select__option:hover,
.app-select__option:focus-visible {
  outline: none;
  background: rgba(47, 128, 237, 0.1);
}

.app-select__option--selected {
  color: #ffffff;
  background: #2f80ed;
}

.app-select__option--selected:hover,
.app-select__option--selected:focus-visible {
  background: #2375e6;
}

.app-select__option--selected i {
  color: currentColor;
}

.app-select__option:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .app-page--tasks #task-modal .task-waypoint-grid--inspection {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-time-window-editor {
    grid-column: 1;
  }

  .app-page--tasks #task-modal .task-time-window-add {
    width: 100%;
  }
}

/* Click-operated system settings menu and section pages. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__actions,
.app-page:not(.app-page--login) .topbar.topbar--workspace .topbar__switchbar,
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__actions,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .topbar__switchbar,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav,
.monitor-shell > .topbar.topbar--workspace .topbar__actions,
.monitor-shell > .topbar.topbar--workspace .topbar__switchbar,
.monitor-shell > .topbar.topbar--workspace .page-nav {
  overflow: visible;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu {
  appearance: none;
  gap: 7px;
  padding-inline: 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu.page-nav__link--active,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu.page-nav__link--active,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu.page-nav__link--active {
  color: #fff;
  background: linear-gradient(135deg, #58a7f5, #2f80ed);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings.is-open > .page-nav__link--menu:not(.page-nav__link--active),
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings.is-open > .page-nav__link--menu:not(.page-nav__link--active),
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings.is-open > .page-nav__link--menu:not(.page-nav__link--active) {
  color: var(--blue);
  background: rgba(47, 128, 237, 0.1);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings .page-nav__chevron,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings .page-nav__chevron,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings .page-nav__chevron {
  display: inline-block;
  transition: transform 150ms ease;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings.is-open .page-nav__chevron,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings.is-open .page-nav__chevron,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings.is-open .page-nav__chevron {
  transform: rotate(180deg);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__settings-menu,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__settings-menu,
.monitor-shell > .topbar.topbar--workspace .page-nav__settings-menu {
  top: calc(100% + 8px);
  right: 0;
  z-index: 260;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 22px 50px rgba(31, 76, 130, 0.2);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings:not(.is-open) .page-nav__settings-menu,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings:not(.is-open) .page-nav__settings-menu,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings:not(.is-open) .page-nav__settings-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings.is-open .page-nav__settings-menu,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings.is-open .page-nav__settings-menu,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings.is-open .page-nav__settings-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__settings-menu .page-nav__menu-item,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__settings-menu .page-nav__menu-item,
.monitor-shell > .topbar.topbar--workspace .page-nav__settings-menu .page-nav__menu-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 1.25;
}

.page-nav__menu-item-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background-color: rgba(47, 128, 237, 0.1);
}

.page-nav__menu-item-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #2f80ed;
  -webkit-mask: var(--settings-menu-icon) center / contain no-repeat;
  mask: var(--settings-menu-icon) center / contain no-repeat;
}

.page-nav__menu-item--account {
  --settings-menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2021a8%208%200%200%201%2016%200%27%2F%3E%3C%2Fsvg%3E");
}

.page-nav__menu-item--users {
  --settings-menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E");
}

.page-nav__menu-item-copy {
  display: block;
  min-width: 0;
}

.page-nav__menu-item-copy strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 850;
}

.page-nav__menu-item--active {
  background: rgba(47, 128, 237, 0.1) !important;
}

.app-page--settings .settings-panel--account[hidden],
.app-page--settings .settings-panel--users[hidden],
.app-page--settings .settings-panel--access[hidden] {
  display: none !important;
}

.app-page--settings .settings-panel--access {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.app-page--settings .settings-panel--access .panel__head {
  margin-bottom: 0;
}

.app-page--settings .settings-panel--account .panel__head-copy {
  display: grid;
  gap: 3px;
}

.app-page--settings .settings-panel--account .panel__head-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
}

@media (max-width: 720px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__settings-menu,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__settings-menu,
  .monitor-shell > .topbar.topbar--workspace .page-nav__settings-menu {
    right: -4px;
  }
}

/* Login page: bright cloud-edge-device infrastructure theme. */
body.app-page--login {
  background: #dff3ff;
}

body.app-page--login::before,
body.app-page--login::after {
  display: none;
}

.app-page--login .login-shell {
  background:
    linear-gradient(180deg, rgba(225, 244, 255, 0.08), rgba(10, 72, 122, 0.12)),
    linear-gradient(90deg, rgba(10, 68, 108, 0.04), rgba(228, 243, 253, 0.2) 34%, rgba(211, 232, 247, 0.34) 50%, rgba(228, 243, 253, 0.18) 66%, rgba(10, 68, 108, 0.04)),
    url("/static/images/login-cloud-edge-mountain.jpg?v=20260720a") center center / cover no-repeat;
}

.app-page--login .login-shell::before,
.app-page--login .login-shell::after {
  inset: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  filter: none;
  animation: none;
}

.app-page--login .login-shell::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(224, 241, 252, 0.48) 0%, rgba(221, 240, 252, 0.16) 28%, transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%, rgba(15, 77, 120, 0.1));
  opacity: 1;
}

.app-page--login .login-shell::after {
  background: linear-gradient(90deg, rgba(14, 76, 116, 0.12), transparent 16%, transparent 84%, rgba(14, 76, 116, 0.12));
  opacity: 1;
}

.app-page--login .login-card {
  border: 1px solid rgba(41, 132, 196, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 252, 255, 0.88) 62%, rgba(232, 248, 252, 0.9)),
    rgba(247, 252, 255, 0.92);
  box-shadow:
    0 30px 88px rgba(22, 83, 126, 0.28),
    0 10px 28px rgba(17, 91, 143, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(122%);
  -webkit-backdrop-filter: blur(24px) saturate(122%);
}

.app-page--login .login-card::before {
  top: -110px;
  right: -90px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(67, 202, 224, 0.2), rgba(82, 154, 232, 0.08) 44%, transparent 70%);
  filter: none;
  animation: none;
}

.app-page--login .login-card::after {
  background:
    linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.46) 27%, transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 28%);
  opacity: 0.6;
  animation: none;
}

.app-page--login .login-card__title {
  position: relative;
  margin: 0 0 24px;
  padding-left: 14px;
  border-left: 4px solid #2f80ed;
  color: #0e2f4d;
  font-size: clamp(1.52rem, 2.3vw, 1.92rem);
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-align: left;
}

.app-page--login .login-form label {
  color: #264b69;
  font-weight: 750;
}

.app-page--login .login-form input {
  min-height: 44px;
  border-color: rgba(49, 125, 183, 0.24);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 2px rgba(26, 91, 135, 0.06),
    0 8px 20px rgba(41, 116, 168, 0.06);
}

.app-page--login .login-form input:hover {
  border-color: rgba(47, 128, 237, 0.42);
}

.app-page--login .login-form input:focus-visible {
  border-color: rgba(47, 128, 237, 0.7);
  outline: 3px solid rgba(66, 190, 215, 0.2);
  outline-offset: 1px;
}

.app-page--login .login-form .primary-button {
  min-height: 44px;
  border-color: rgba(36, 135, 208, 0.5);
  background: linear-gradient(135deg, #4db5e9 0%, #2f80ed 72%, #2871da 100%);
  box-shadow: 0 14px 30px rgba(47, 128, 237, 0.28);
}

.app-page--login .login-form .primary-button:hover {
  border-color: rgba(32, 111, 185, 0.72);
  background: linear-gradient(135deg, #58c3ed 0%, #348cf3 70%, #2871da 100%);
}

.app-page--login .login-card__alert {
  border-color: rgba(47, 128, 237, 0.2);
  background: rgba(245, 251, 255, 0.88);
}

@media (max-width: 760px) {
  .app-page--login .login-shell {
    background-position: 46% center;
  }

  .app-page--login .login-card {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(239, 250, 255, 0.93)),
      rgba(247, 252, 255, 0.94);
    box-shadow: 0 24px 64px rgba(22, 83, 126, 0.26);
  }

  .app-page--login .login-card__title {
    margin-bottom: 18px;
    font-size: clamp(1.2rem, 5.2vw, 1.48rem);
  }
}

/* Login panel containment: keep every control inside the compact card at all viewport sizes. */
.app-page--login .login-card {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.app-page--login .login-card > *,
.app-page--login .login-form,
.app-page--login .login-form label {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-page--login .login-card__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 18px;
  padding-left: 14px;
  font-size: clamp(1.28rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
}

.app-page--login .login-card__title-main,
.app-page--login .login-card__title-product {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.app-page--login .login-card__title-product {
  color: #2f80ed;
  font-size: 0.72em;
  font-weight: 760;
  letter-spacing: 0.16em;
}

.app-page--login .login-form input,
.app-page--login .login-form .primary-button,
.app-page--login .login-card__alert {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 420px) {
  .app-page--login .login-card__title {
    margin-bottom: 14px;
    font-size: clamp(1.02rem, 5.4vw, 1.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-page--login .login-card,
  .app-page--login .login-card::before,
  .app-page--login .login-card::after,
  .app-page--login .login-shell::before,
  .app-page--login .login-shell::after {
    animation: none;
  }
}

/* Edge topology toolbar hierarchy and legibility 20260722c. */
.edge-topology-page .edge-topology-toolbar {
  column-gap: 16px;
  row-gap: 10px;
}

.edge-topology-page .edge-topology-toolbar__filters {
  flex: 1 1 720px;
  gap: 9px;
}

.edge-topology-page .edge-topology-filter-field {
  font-size: 0.92rem;
}

.edge-topology-page .edge-topology-filter-field > .app-select,
.edge-topology-page .edge-topology-filter-field > select {
  min-height: 40px;
}

.edge-topology-page .edge-topology-filter-field .app-select__button,
.edge-topology-page .edge-topology-filter-field > select {
  font-size: 0.92rem;
}

.edge-topology-page .topology-filter-stats {
  flex-basis: 470px;
  gap: 9px;
  font-size: 0.84rem;
}

.edge-topology-page .topology-filter-stat {
  min-height: 38px;
  padding: 5px 12px;
}

.edge-topology-page .topology-filter-stat__label {
  font-size: 0.86rem;
}

.edge-topology-page .topology-filter-stat strong {
  font-size: 1rem;
}

.edge-topology-page .topology-filter-stat__time {
  font-size: 0.82rem;
}

.edge-topology-page .edge-topology-toolbar__actions {
  flex: 0 0 auto;
  gap: 12px;
}

.edge-topology-page .edge-topology-auto-refresh {
  font-size: 0.88rem;
}

.edge-topology-page .edge-topology-toolbar__actions .monitor-button {
  min-height: 40px;
  font-size: 0.9rem;
}

.edge-topology-page .edge-topology-toolbar__notice {
  order: 10;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 560;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  .edge-topology-page .topology-filter-stats {
    flex-basis: 100%;
  }
}

@media (max-width: 760px) {
  .edge-topology-page .edge-topology-toolbar__filters,
  .edge-topology-page .edge-topology-toolbar__actions {
    width: 100%;
  }

  .edge-topology-page .edge-topology-toolbar__actions {
    justify-content: space-between;
  }
}

/* Agent center width containment: keep the shared banner and workbench inside
   the visual viewport even when the browser is zoomed. */
html,
body.edge-agents-page {
  max-width: 100%;
  overflow-x: clip !important;
}

body.edge-agents-page .monitor-shell,
body.edge-agents-page .monitor-main,
body.edge-agents-page .monitor-board,
body.edge-agents-page .agent-manager-content,
body.edge-agents-page .agent-view-panel,
body.edge-agents-page .agent-version-layout,
body.edge-agents-page .agent-version-panel,
body.edge-agents-page .agent-release-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.edge-agents-page .monitor-shell > .topbar.topbar--workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

body.edge-agents-page .monitor-shell > .topbar.topbar--workspace .topbar__brand,
body.edge-agents-page .monitor-shell > .topbar.topbar--workspace .topbar__title-row,
body.edge-agents-page .monitor-shell > .topbar.topbar--workspace .topbar__title,
body.edge-agents-page .monitor-shell > .topbar.topbar--workspace .topbar__actions,
body.edge-agents-page .monitor-shell > .topbar.topbar--workspace .topbar__switchbar,
body.edge-agents-page .monitor-shell > .topbar.topbar--workspace .page-nav {
  min-width: 0;
  max-width: 100%;
}

body.edge-agents-page.app-page:not(.app-page--login)
  .monitor-shell
  > .topbar.topbar--workspace
  .topbar__title--single-line.topbar__title--system {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.edge-agents-page .agent-manager-content {
  overflow-x: clip;
  overflow-y: auto;
}

body.edge-agents-page .agent-device-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}

/* Task scheduling: tunnel-scoped list controls and a left-to-right waypoint
   tree. The waypoint node stays vertically centered while any number of time
   windows branch on the right. */
.app-page--tasks .task-toolbar--compact {
  flex-wrap: wrap;
}

.app-page--tasks .task-tunnel-filter {
  display: inline-grid;
  grid-template-columns: auto minmax(170px, 230px);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #60728e;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.app-page--tasks .task-tunnel-filter select {
  width: 100%;
  min-width: 0;
  max-width: 230px;
  min-height: 36px;
  padding: 6px 34px 6px 12px;
  border: 1px solid rgba(98, 151, 215, 0.34);
  border-radius: 10px;
  background-color: rgba(250, 253, 255, 0.96);
  color: #173353;
  font: inherit;
}

.app-page--tasks #task-modal .task-waypoint-grid--inspection.task-waypoint-tree {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) 46px minmax(520px, 1.48fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-page--tasks #task-modal .task-waypoint-tree__node {
  position: relative;
  grid-column: 1;
  align-self: center;
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(91, 151, 222, 0.3);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(246, 251, 255, 0.98), rgba(237, 247, 255, 0.9));
  box-shadow: 0 10px 24px rgba(53, 103, 160, 0.08);
}

.app-page--tasks #task-modal .task-waypoint-tree__node > label,
.app-page--tasks #task-modal .task-waypoint-tree__node > .task-waypoint-detail-field {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-page--tasks #task-modal .task-waypoint-tree__node > label > span,
.app-page--tasks #task-modal .task-waypoint-tree__node > .task-waypoint-detail-field > span {
  align-self: center;
  margin: 0;
  color: #536b89;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-waypoint-tree__node .task-waypoint-readonly--ptz .task-waypoint-readonly__facts {
  justify-content: flex-start;
  margin-left: 0;
}

.app-page--tasks #task-modal .task-waypoint-tree__node .task-waypoint-readonly--remark .task-waypoint-readonly__title {
  flex: 1 1 auto;
  width: 100%;
}

.app-page--tasks #task-modal .task-time-window-control__head > span,
.app-page--tasks #task-modal .task-time-window-control--duration > span:first-child,
.app-page--tasks #task-modal .task-time-window-include > span {
  color: #61728e;
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.25;
  white-space: nowrap;
}

/* Keep each time label and its boundary flag as one centered heading group. */
.app-page--tasks #task-modal .task-time-window-control__head {
  justify-content: center;
  gap: 10px;
  padding-inline: 4px;
}

.app-page--tasks #task-modal .task-time-window-control--duration > span:first-child {
  text-align: center;
}

.app-page--tasks #task-modal .task-waypoint-tree__connector {
  position: relative;
  grid-column: 2;
  align-self: stretch;
  min-width: 0;
  min-height: 90px;
}

.app-page--tasks #task-modal .task-waypoint-tree__connector::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px solid rgba(70, 139, 220, 0.44);
}

.app-page--tasks #task-modal .task-waypoint-tree__connector::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: 4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #4388da;
  border-right: 2px solid #4388da;
  transform: rotate(45deg);
}

.app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-waypoint-tree__branches {
  position: relative;
  grid-column: 3;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 12px;
  border: 1px solid rgba(91, 151, 222, 0.3);
  border-radius: 12px;
  background: rgba(249, 252, 255, 0.94);
}

.app-page--tasks #task-modal .task-waypoint-tree__branches .task-time-window-list {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 20px;
}

.app-page--tasks #task-modal .task-waypoint-tree__branches .task-time-window-list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 7px;
  border-left: 1px dashed rgba(65, 135, 218, 0.54);
}

.app-page--tasks #task-modal .task-waypoint-tree__branches .task-time-window-row {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-page--tasks #task-modal .task-waypoint-tree__branches .task-time-window-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 14px;
  border-top: 1px dashed rgba(65, 135, 218, 0.54);
}

@media (max-width: 920px) {
  .app-page--tasks .task-tunnel-filter {
    grid-template-columns: auto minmax(150px, 1fr);
    width: 100%;
  }

  .app-page--tasks .task-tunnel-filter select {
    max-width: none;
  }

  .app-page--tasks #task-modal .task-waypoint-grid--inspection.task-waypoint-tree {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 28px auto;
  }

  .app-page--tasks #task-modal .task-waypoint-tree__node,
  .app-page--tasks #task-modal .task-waypoint-grid--inspection > .task-waypoint-tree__branches {
    grid-column: 1;
  }

  .app-page--tasks #task-modal .task-waypoint-tree__connector {
    grid-column: 1;
    min-height: 28px;
  }

  .app-page--tasks #task-modal .task-waypoint-tree__connector::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    border-top: 0;
    border-left: 2px solid rgba(70, 139, 220, 0.44);
  }

  .app-page--tasks #task-modal .task-waypoint-tree__connector::after {
    top: auto;
    right: auto;
    bottom: 4px;
    left: calc(50% - 4px);
    transform: rotate(135deg);
  }
}

@media (max-width: 640px) {
  .app-page--tasks #task-modal .task-waypoint-tree__node > label,
  .app-page--tasks #task-modal .task-waypoint-tree__node > .task-waypoint-detail-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}
/* Agent runtime topology: two deployable containers own nine functional units. */
.agent-runtime-components,
.agent-functional-units {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  min-width: 0;
  width: 100%;
  padding: 11px;
  background: rgba(245, 250, 255, 0.78);
  border: 1px solid rgba(91, 148, 215, 0.28);
  border-radius: 7px;
}

.agent-runtime-components > header,
.agent-functional-units > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: #526985;
  font-size: 0.78rem;
}

.agent-runtime-components > header strong,
.agent-functional-units > header strong {
  color: #10294c;
  font-size: 0.92rem;
}

.agent-runtime-components > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-capability-grid .agent-runtime-components > div > article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(91, 148, 215, 0.3);
  border-left: 3px solid #2781ff;
  border-radius: 6px;
}

.agent-runtime-components article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.agent-runtime-components article p,
.agent-runtime-components article small {
  margin: 0;
  color: #61728e;
  line-height: 1.45;
}

.agent-functional-units > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}

.agent-capability-grid .agent-functional-units > div > article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(91, 148, 215, 0.25);
  border-left: 3px solid #15856f;
  border-radius: 6px;
}

.agent-functional-units article > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #1769c2;
  background: rgba(39, 129, 255, 0.1);
  border-radius: 50%;
  font-size: 0.72rem;
}

.agent-functional-units article > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agent-functional-units article small {
  color: #71809a;
  font-size: 0.7rem;
}

.agent-operational-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
}

.agent-operational-status--supported {
  color: #246fc8;
  background: rgba(39, 129, 255, 0.09);
  border-color: rgba(39, 129, 255, 0.28);
}

.agent-operational-status--configured {
  color: #8a6400;
  background: rgba(255, 190, 42, 0.12);
  border-color: rgba(206, 145, 0, 0.34);
}

.agent-operational-status--ready {
  color: #08765a;
  background: rgba(31, 174, 132, 0.1);
  border-color: rgba(31, 174, 132, 0.32);
}

.agent-operational-status--danger {
  color: #c93e3e;
  background: rgba(231, 75, 75, 0.1);
  border-color: rgba(231, 75, 75, 0.32);
}

.agent-operational-status--unknown {
  color: #65768f;
  background: rgba(116, 137, 165, 0.1);
  border-color: rgba(116, 137, 165, 0.26);
}

@media (max-width: 760px) {
  .agent-runtime-components > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-runtime-components > header,
  .agent-functional-units > header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Console workspace: draggable separators for the three primary modules. */
@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench.dashboard-workbench--resizable {
    grid-template-columns:
      minmax(0, var(--dashboard-left-width))
      14px
      minmax(0, var(--dashboard-middle-width))
      14px
      minmax(0, 1fr);
    column-gap: 0;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench--resizable > .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench--resizable > .dashboard-column-resizer--left {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench--resizable > .panel--control {
    grid-column: 3;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench--resizable > .dashboard-column-resizer--right {
    grid-column: 4;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench--resizable > .stage-preview {
    grid-column: 5;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column-resizer {
    position: relative;
    z-index: 4;
    display: block;
    min-width: 14px;
    width: 14px;
    height: 100%;
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;
    outline: none;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column-resizer::before {
    content: "";
    position: absolute;
    inset-block: 12px;
    left: 50%;
    width: 3px;
    border-radius: 999px;
    background: rgba(95, 133, 177, 0.22);
    transform: translateX(-50%);
    transition: width 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  }

  .dashboard-page.dashboard-page--refined .dashboard-column-resizer:hover::before,
  .dashboard-page.dashboard-page--refined .dashboard-column-resizer:focus-visible::before,
  .dashboard-page.dashboard-page--refined .dashboard-column-resizer.is-active::before {
    width: 5px;
    background: #2f80ed;
    box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.12);
  }

  body.is-resizing-dashboard-columns,
  body.is-resizing-dashboard-columns * {
    cursor: col-resize !important;
    user-select: none !important;
  }
}

@media (max-width: 980px) {
  .dashboard-page.dashboard-page--refined .dashboard-column-resizer {
    display: none;
  }
}

/* Dashboard controls: keep PTZ labels and numeric values horizontally centered. */
.dashboard-page.dashboard-page--refined .stage-status,
.dashboard-page.dashboard-page--refined .stage-status > *,
.dashboard-page.dashboard-page--refined .status-board--ptz-line,
.dashboard-page.dashboard-page--refined .manual-step-control,
.dashboard-page.dashboard-page--refined .inspection-points--dashboard,
.dashboard-page.dashboard-page--refined .inspection-points__list {
  min-width: 0;
  max-width: 100%;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout {
  min-width: 0;
  max-width: 100%;
  justify-items: center;
  text-align: center;
  overflow: hidden;
}

.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout > span,
.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout > strong,
.dashboard-page.dashboard-page--refined .status-board--ptz-line .readout > .readout__meta {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page.dashboard-page--refined .manual-step-control label,
.dashboard-page.dashboard-page--refined .manual-step-control span,
.dashboard-page.dashboard-page--refined .manual-step-control input,
.dashboard-page.dashboard-page--refined .range-grid__head,
.dashboard-page.dashboard-page--refined .range-grid__label,
.dashboard-page.dashboard-page--refined .range-grid input {
  text-align: center;
}

.dashboard-page.dashboard-page--refined .manual-step-control label,
.dashboard-page.dashboard-page--refined .manual-step-control input,
.dashboard-page.dashboard-page--refined .range-grid,
.dashboard-page.dashboard-page--refined .range-grid > *,
.dashboard-page.dashboard-page--refined .range-grid input {
  min-width: 0;
  max-width: 100%;
}

.dashboard-page.dashboard-page--refined .manual-step-control label {
  overflow: hidden;
}

.dashboard-page.dashboard-page--refined .range-grid__label {
  justify-content: center;
}

.dashboard-page.dashboard-page--refined .manual-step-control span {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page.dashboard-page--refined .subpanel--point-capture .action-row--point > button {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page.dashboard-page--refined .inspection-points--dashboard .inspection-points__list {
  overflow: auto;
}

.dashboard-page.dashboard-page--refined .inspection-points--dashboard .inspection-points__table {
  min-width: 600px;
}

/* Dashboard current camera single-surface background 20260728a. */
.dashboard-page.dashboard-page--refined .stage-camera {
  background: #f8fbff;
}

.dashboard-page.dashboard-page--refined .stage-camera > .config-card,
.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera,
.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera-main {
  background: transparent;
  box-shadow: none;
}

.dashboard-page.dashboard-page--refined .stage-camera > .config-card::before,
.dashboard-page.dashboard-page--refined .stage-camera > .config-card::after,
.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera::before,
.dashboard-page.dashboard-page--refined .stage-camera .config-card__camera::after {
  content: none;
}

/* Dashboard move-capture and inspection-point position swap 20260728b. */
.dashboard-page.dashboard-page--refined .stage-status > .subpanel--point-capture {
  align-self: stretch;
  align-content: start;
  grid-template-rows: auto auto auto;
  height: 100%;
}

.dashboard-page.dashboard-page--refined .control-stack > .inspection-points {
  align-self: start;
  grid-template-rows: auto auto auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

.dashboard-page.dashboard-page--refined .control-stack > .inspection-points .inspection-points__list {
  min-height: clamp(96px, 14vh, 170px);
  max-height: clamp(112px, 18vh, 220px);
}

@media (min-width: 981px) and (max-height: 820px) {
  .dashboard-page.dashboard-page--refined .control-stack > .inspection-points .inspection-points__list {
    min-height: 88px;
    max-height: 128px;
  }

  .dashboard-page.dashboard-page--refined .stage-status > .subpanel--point-capture {
    overflow: auto;
  }
}

/* Task table select-all placement 20260728c. */
.task-table__index-heading {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.task-table__index-heading .task-table__header-content {
  width: auto;
}

.task-table__select-all-slot {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
}

.task-select-all--header {
  display: inline-flex;
  width: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-select-all--header input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.task-table th.task-table__index-cell,
.task-table td.task-table__index-cell {
  width: 112px;
  padding-inline: 8px;
}

/* Dashboard two-column control and keyframe workspace 20260729a. */
.dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-page.dashboard-page--refined .stage-status {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
}

.dashboard-page.dashboard-page--refined .stage-status > .stage-status__panel,
.dashboard-page.dashboard-page--refined .stage-status > .subpanel--point-capture,
.dashboard-page.dashboard-page--refined .stage-status > .inspection-points--dashboard {
  width: 100%;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .inspection-points--dashboard {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(140px, auto) auto;
  gap: 8px;
  min-height: 0;
  padding: 10px;
}

.dashboard-page.dashboard-page--refined .inspection-points--dashboard .inspection-points__head {
  align-items: center;
}

.dashboard-page.dashboard-page--refined .inspection-points__head-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-page.dashboard-page--refined .inspection-points__head-copy .subpanel__caption {
  margin: 0;
}

.dashboard-page.dashboard-page--refined
  .inspection-points--dashboard
  .inspection-points__list {
  min-height: 140px;
  max-height: clamp(220px, 30vh, 360px);
}

@media (min-width: 981px) {
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(440px, 1.08fr) 14px minmax(420px, 1fr);
    column-gap: 0;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench.dashboard-workbench--resizable {
    grid-template-columns:
      minmax(0, var(--dashboard-left-width))
      14px
      minmax(0, 1fr);
    column-gap: 0;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench > .dashboard-column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined
    .dashboard-workbench
    > .dashboard-column-resizer--left {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page.dashboard-page--refined .dashboard-workbench > .stage-preview {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 980px) {
  .dashboard-page.dashboard-page--refined .dashboard-statusbar .topbar__statusline,
  .dashboard-page.dashboard-page--refined .dashboard-workbench {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Task waypoint header: editable per-point task name, compact one-line action
   summary, and strict containment for long point descriptions. */
.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__summary {
  grid-template-columns: 34px minmax(260px, 0.95fr) minmax(290px, 1fr) 30px;
}

.app-page--tasks #task-modal .task-waypoint-name-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-page--tasks #task-modal .task-waypoint-name-field > span {
  color: #536b89;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-waypoint-name-field > input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(91, 151, 222, 0.32);
  border-radius: 9px;
  background: rgba(250, 253, 255, 0.96);
  color: #173353;
  font: inherit;
  font-weight: 750;
}

.app-page--tasks #task-modal .task-waypoint-name-field > input:focus {
  border-color: rgba(47, 128, 237, 0.64);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.1);
  outline: none;
}

.app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__toggle {
  grid-template-columns: minmax(0, 1fr) 18px;
}

.app-page--tasks
  #task-modal
  .task-waypoint-card--compact.is-expanded
  .task-waypoint-summary__detail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  justify-items: initial;
  gap: 6px;
  white-space: nowrap;
}

.app-page--tasks
  #task-modal
  .task-waypoint-card--compact.is-expanded
  .task-waypoint-summary__action {
  overflow: visible;
  overflow-wrap: normal;
  white-space: nowrap;
}

.app-page--tasks #task-modal .task-waypoint-detail-field,
.app-page--tasks #task-modal .task-waypoint-readonly,
.app-page--tasks #task-modal .task-waypoint-readonly__title,
.app-page--tasks #task-modal .task-waypoint-readonly__facts {
  min-width: 0;
  max-width: 100%;
}

.app-page--tasks #task-modal .task-waypoint-readonly {
  overflow: hidden;
}

.app-page--tasks #task-modal .task-waypoint-readonly__title {
  flex: 1 1 auto;
  overflow: hidden;
}

.app-page--tasks #task-modal .task-waypoint-readonly__title em {
  display: block;
  width: 100%;
}

.app-page--tasks #task-modal .task-waypoint-readonly__facts {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 980px) {
  .app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__summary {
    grid-template-columns: 34px minmax(0, 1fr) 30px;
  }

  .app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-name-field {
    grid-column: 2;
    grid-row: 1;
  }

  .app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__toggle {
    grid-column: 2;
    grid-row: 2;
  }

  .app-page--tasks #task-modal .task-waypoint-card--compact.is-expanded .task-waypoint-card__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 640px) {
  .app-page--tasks #task-modal .task-waypoint-name-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* Account menu: current user replaces the duplicated standalone user label and settings caption. */
.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu,
.monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu {
  min-width: 104px;
  justify-content: center;
  padding-inline: 10px;
}

.page-nav__account-name {
  display: block;
  min-width: 0;
  max-width: 12ch;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__link--settings,
.dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__link--settings,
.monitor-shell > .topbar.topbar--workspace .page-nav__link--settings {
  --nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2021a8%208%200%200%201%2016%200%27%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 720px) {
  .app-page:not(.app-page--login) .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu,
  .dashboard-page.dashboard-page--refined .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu,
  .monitor-shell > .topbar.topbar--workspace .page-nav__item--settings > .page-nav__link--menu {
    min-width: 104px;
    padding-inline: 11px;
  }
}

/* Task table column alignment 20260802a.
   Header labels and row content share the same horizontal centerline for every
   column, including multi-line task/schedule cells and action controls. */
.app-page--tasks .task-table th,
.app-page--tasks .task-table td {
  text-align: center;
  vertical-align: middle;
}

.app-page--tasks .task-table .task-table__header-content,
.app-page--tasks .task-table .task-table__index-heading,
.app-page--tasks .task-table .task-table__index-control,
.app-page--tasks .task-table .task-actions-inline {
  justify-content: center;
}

.app-page--tasks .task-table .task-cell__title,
.app-page--tasks .task-table .task-cell__meta {
  text-align: center;
}

.app-page--tasks .task-table .task-actions-inline {
  align-items: center;
}
/* Monitoring overview workspace 20260901a. */
.overview-page {
  --overview-text: #17243a;
  --overview-muted: #6d8097;
  --overview-border: #d6e3ef;
  --overview-border-strong: #bfd3e5;
  --overview-surface: #ffffff;
  --overview-surface-soft: #f6f9fd;
  --overview-blue: #2f80ed;
  --overview-blue-soft: #eaf4ff;
  --overview-teal: #159d88;
  --overview-teal-soft: #e4f8f4;
  --overview-amber: #c9810d;
  --overview-amber-soft: #fff4dc;
  --overview-rose: #dc5262;
  --overview-rose-soft: #ffeaed;
  min-width: 0;
  overflow-x: hidden;
  color: var(--overview-text);
  background:
    radial-gradient(circle at 7% 8%, rgba(68, 145, 242, 0.1), transparent 27%),
    radial-gradient(circle at 93% 12%, rgba(20, 157, 136, 0.07), transparent 25%),
    #edf3f9;
  font-size: 14px;
}

.overview-page *,
.overview-page *::before,
.overview-page *::after {
  box-sizing: border-box;
}

.overview-page h1,
.overview-page h2,
.overview-page h3,
.overview-page p {
  margin: 0;
}

.overview-page button,
.overview-page select {
  font: inherit;
}

.overview-shell {
  width: min(100%, 1920px);
  min-width: 0;
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px;
  gap: 12px;
  background: transparent;
}

.overview-topbar {
  flex: 0 0 auto;
}

body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__brand,
body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__title-row,
body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__title {
  min-width: 0;
}

body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__brand,
body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__title-row {
  overflow: hidden;
}

body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__title--single-line.topbar__title--system {
  overflow: hidden;
  font-size: clamp(1.08rem, 1.45vw, 1.65rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 4px 2px;
}

.overview-toolbar__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.overview-toolbar__heading h2 {
  overflow: hidden;
  color: var(--overview-text);
  font-size: 1.42rem;
  line-height: 1.25;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-toolbar__eyebrow {
  color: var(--overview-blue);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.overview-freshness,
.overview-panel__count,
.overview-camera-state,
.overview-health-item__top > span,
.overview-task-item__top > span,
.overview-event-item__top > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.overview-freshness {
  padding: 5px 9px;
  color: #476078;
  border: 1px solid #c8d8e8;
  background: #f5f8fc;
}

.overview-freshness[data-tone="fresh"] {
  color: #08745f;
  border-color: #a9ded3;
  background: #e5f7f3;
}

.overview-freshness[data-tone="partial"],
.overview-freshness[data-tone="loading"] {
  color: #996100;
  border-color: #ecd29b;
  background: #fff7e5;
}

.overview-freshness[data-tone="error"] {
  color: #aa3343;
  border-color: #efbdc4;
  background: #fff0f2;
}

.overview-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.overview-select-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--overview-muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.overview-select-field select {
  max-width: 220px;
  min-height: 38px;
  padding: 7px 32px 7px 10px;
  color: var(--overview-text);
  border: 1px solid var(--overview-border-strong);
  border-radius: 10px;
  background: var(--overview-surface);
}

.overview-updated-at {
  color: var(--overview-muted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overview-button,
.overview-mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.overview-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-button:hover,
.overview-mode-button:hover,
.overview-point:hover,
.overview-matrix-tile:hover {
  transform: translateY(-1px);
}

.overview-button:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.overview-button--secondary {
  color: #3f5872;
  border-color: var(--overview-border-strong);
  background: var(--overview-surface);
}

.overview-button--primary {
  color: #ffffff;
  border-color: #2d75dd;
  background: linear-gradient(135deg, #4aa9ff, #2f76e4);
  box-shadow: 0 8px 18px rgba(47, 118, 228, 0.2);
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.overview-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--overview-border);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 22px rgba(38, 73, 113, 0.06);
}

.overview-metric__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.overview-metric__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-metric__icon--blue {
  color: var(--overview-blue);
  background: var(--overview-blue-soft);
}

.overview-metric__icon--teal {
  color: var(--overview-teal);
  background: var(--overview-teal-soft);
}

.overview-metric__icon--amber {
  color: var(--overview-amber);
  background: var(--overview-amber-soft);
}

.overview-metric__icon--rose {
  color: var(--overview-rose);
  background: var(--overview-rose-soft);
}

.overview-metric__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  min-width: 0;
  align-items: baseline;
}

.overview-metric__copy > span {
  color: var(--overview-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.overview-metric__copy > strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--overview-text);
  font-size: 1.42rem;
  line-height: 1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overview-metric__copy > small {
  min-width: 0;
  overflow: hidden;
  color: var(--overview-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-workspace {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(520px, 2.25fr) minmax(270px, 0.92fr);
  gap: 10px;
  min-width: 0;
  align-items: stretch;
}

.overview-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--overview-border);
  border-radius: 16px;
  background: var(--overview-surface);
  box-shadow: 0 9px 22px rgba(38, 73, 113, 0.055);
}

.overview-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 13px;
  border-bottom: 1px solid #e2eaf2;
}

.overview-panel__head > div {
  max-width: 100%;
  min-width: 0;
}

.overview-panel__head h3 {
  overflow: hidden;
  color: var(--overview-text);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-panel__head p {
  margin-top: 3px;
  overflow: hidden;
  color: var(--overview-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-panel__count {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #08745f;
  background: var(--overview-teal-soft);
}

.overview-panel__link,
.overview-camera-tile__actions a {
  flex: 0 0 auto;
  color: #216fcf;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.overview-panel__link:hover,
.overview-camera-tile__actions a:hover {
  text-decoration: underline;
}

.overview-point-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px;
}

.overview-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 9px 10px;
  color: var(--overview-text);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.overview-point.is-selected {
  border-color: #9bc5f6;
  background: #edf6ff;
}

.overview-status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aaabd;
  box-shadow: 0 0 0 4px rgba(154, 170, 189, 0.13);
}

.overview-status-dot[data-tone="online"] {
  background: #19a68e;
  box-shadow: 0 0 0 4px rgba(25, 166, 142, 0.13);
}

.overview-status-dot[data-tone="partial"],
.overview-status-dot[data-tone="warning"],
.overview-status-dot[data-tone="stale"] {
  background: #e59518;
  box-shadow: 0 0 0 4px rgba(229, 149, 24, 0.14);
}

.overview-status-dot[data-tone="offline"] {
  background: #dd5364;
  box-shadow: 0 0 0 4px rgba(221, 83, 100, 0.14);
}

.overview-point__copy {
  min-width: 0;
}

.overview-point__copy strong,
.overview-point__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-point__copy strong {
  font-size: 0.9rem;
  line-height: 1.3;
}

.overview-point__copy small,
.overview-point__count {
  color: var(--overview-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.overview-point__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.overview-panel__note {
  margin: 0 9px 9px;
  padding: 9px 10px;
  color: #566c83;
  border-radius: 10px;
  background: var(--overview-surface-soft);
  font-size: 0.77rem;
  line-height: 1.55;
}

.overview-viewer-panel {
  display: flex;
  flex-direction: column;
}

.overview-viewer-head {
  flex-wrap: wrap;
}

.overview-viewer-head__copy {
  flex: 1 1 240px;
  min-width: 0;
}

.overview-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border: 1px solid var(--overview-border);
  border-radius: 11px;
  background: var(--overview-surface-soft);
}

.overview-mode-button {
  min-height: 32px;
  padding: 6px 9px;
  color: #52677e;
  border-color: transparent;
  background: transparent;
}

.overview-mode-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #4aa9ff, #2f76e4);
  box-shadow: 0 5px 12px rgba(47, 118, 228, 0.17);
}

.overview-viewer {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 390px;
  padding: 10px;
  background: #f1f6fb;
}

.overview-dual-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  height: 100%;
}

.overview-dual-view--single {
  grid-template-columns: minmax(0, 1fr);
}

.overview-camera-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c9d9e8;
  border-radius: 13px;
  background: var(--overview-surface);
}

.overview-camera-tile__visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #172536;
}

.overview-camera-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  color: #adc1d4;
  background:
    linear-gradient(165deg, transparent 0 41%, rgba(43, 67, 83, 0.7) 42% 46%, transparent 47%),
    linear-gradient(180deg, #29414f 0 45%, #19252d 46% 100%);
}

.overview-camera-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 520px;
  object-fit: contain;
  background: #111b26;
}

.overview-camera-media--empty {
  align-content: center;
  gap: 8px;
  text-align: center;
}

.overview-camera-media--empty svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-camera-media__time {
  position: absolute;
  right: 9px;
  bottom: 9px;
  max-width: calc(100% - 18px);
  overflow: hidden;
  padding: 4px 7px;
  color: #ffffff;
  border-radius: 999px;
  background: rgba(8, 20, 32, 0.72);
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-camera-tile__overlay {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.overview-camera-tile__overlay > span:last-child {
  overflow: hidden;
  padding: 4px 7px;
  color: #ffffff;
  border-radius: 999px;
  background: rgba(8, 20, 32, 0.7);
  font-size: 0.74rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-camera-state {
  gap: 6px;
  max-width: 100%;
  padding: 4px 7px;
  color: #ffffff;
  background: rgba(68, 86, 105, 0.86);
}

.overview-camera-state[data-tone="online"] {
  background: rgba(11, 137, 115, 0.88);
}

.overview-camera-state[data-tone="offline"] {
  background: rgba(190, 52, 70, 0.9);
}

.overview-camera-state[data-tone="stale"],
.overview-camera-state[data-tone="partial"] {
  background: rgba(176, 106, 0, 0.9);
}

.overview-camera-state .overview-status-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  box-shadow: none;
}

.overview-camera-tile__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 10px 11px;
}

.overview-camera-tile__meta > div:first-child {
  min-width: 0;
}

.overview-camera-tile__meta strong,
.overview-camera-tile__meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-camera-tile__meta strong {
  font-size: 0.9rem;
}

.overview-camera-tile__meta small {
  margin-top: 3px;
  color: var(--overview-muted);
  font-size: 0.76rem;
}

.overview-camera-tile__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.overview-camera-matrix {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.overview-matrix-tile {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  color: var(--overview-text);
  text-align: left;
  border: 1px solid #c9d9e8;
  border-radius: 11px;
  background: var(--overview-surface);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.overview-matrix-tile.is-selected {
  border-color: #4d99ef;
  box-shadow: 0 0 0 2px rgba(77, 153, 239, 0.18);
}

.overview-camera-media--compact,
.overview-camera-media--compact img {
  min-height: 118px;
  max-height: 170px;
}

.overview-camera-media--compact .overview-camera-media__time {
  right: 6px;
  bottom: 6px;
}

.overview-matrix-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 7px;
}

.overview-matrix-tile__meta > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-matrix-tile .overview-camera-state {
  flex: 0 0 auto;
  padding: 3px 5px;
  font-size: 0.68rem;
}

.overview-side-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

.overview-event-list,
.overview-task-list {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
}

.overview-event-item,
.overview-task-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dce6ef;
  border-radius: 10px;
  background: #fbfdff;
}

.overview-event-item[data-tone="warning"],
.overview-event-item[data-tone="stale"] {
  border-left: 3px solid #e59518;
  background: #fff9ec;
}

.overview-event-item[data-tone="error"] {
  border-left: 3px solid #dd5364;
  background: #fff2f4;
}

.overview-event-item[data-tone="info"] {
  border-left: 3px solid #3e91eb;
  background: #eef6ff;
}

.overview-event-item__top,
.overview-task-item__top,
.overview-health-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.overview-event-item__top > span {
  padding: 3px 6px;
  color: #985f00;
  background: #ffedc4;
}

.overview-event-item__top small,
.overview-task-item small,
.overview-health-item small {
  color: var(--overview-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.overview-event-item > strong,
.overview-task-item__top > strong,
.overview-health-item__top > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-event-item > p,
.overview-task-item > p {
  overflow: hidden;
  color: #52687f;
  font-size: 0.76rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-task-item__top > span {
  padding: 3px 6px;
  color: #586d83;
  background: #edf2f7;
}

.overview-task-item__top > span[data-tone="active"] {
  color: #08745f;
  background: var(--overview-teal-soft);
}

.overview-task-item__top > span[data-tone="pending"] {
  color: #996100;
  background: var(--overview-amber-soft);
}

.overview-task-item__top > span[data-tone="error"] {
  color: #aa3343;
  background: var(--overview-rose-soft);
}

.overview-bottom-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(520px, 1.95fr);
  gap: 10px;
  min-width: 0;
}

.overview-health-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 9px;
}

.overview-health-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dce6ef;
  border-radius: 10px;
  background: #fbfdff;
}

.overview-health-item__top > span {
  padding: 3px 6px;
  color: #596e84;
  background: #edf2f7;
}

.overview-health-item__top > span[data-tone="online"] {
  color: #08745f;
  background: var(--overview-teal-soft);
}

.overview-health-item__top > span[data-tone="offline"] {
  color: #aa3343;
  background: var(--overview-rose-soft);
}

.overview-health-item__top > span[data-tone="stale"] {
  color: #996100;
  background: var(--overview-amber-soft);
}

.overview-health-item__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  color: #586e85;
  font-size: 0.72rem;
}

.overview-health-item__metrics span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-health-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf4;
}

.overview-health-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2e7ce8, #39b8e7);
}

.overview-keyframe-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 9px;
}

.overview-keyframe-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  color: var(--overview-text);
  text-decoration: none;
  border: 1px solid #dce6ef;
  border-radius: 10px;
  background: #fbfdff;
}

.overview-keyframe-item:hover {
  border-color: #a8c9eb;
  background: #f5faff;
}

.overview-keyframe-item__thumb {
  display: grid;
  place-items: center;
  width: 82px;
  height: 58px;
  overflow: hidden;
  color: #9fb1c3;
  border-radius: 8px;
  background: #172536;
  font-size: 0.68rem;
}

.overview-keyframe-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-keyframe-item__copy {
  min-width: 0;
}

.overview-keyframe-item__copy strong,
.overview-keyframe-item__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-keyframe-item__copy strong {
  font-size: 0.78rem;
}

.overview-keyframe-item__copy small {
  margin-top: 3px;
  color: var(--overview-muted);
  font-size: 0.7rem;
}

.overview-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 18px;
  color: var(--overview-muted);
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.5;
}

.overview-empty--compact {
  min-height: 82px;
}

.overview-footnote {
  min-width: 0;
  overflow: hidden;
  padding: 0 3px 3px;
  color: var(--overview-muted);
  font-size: 0.76rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1360px) {
  .overview-workspace {
    grid-template-columns: minmax(200px, 0.65fr) minmax(520px, 2fr);
  }

  .overview-side-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .overview-camera-matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-keyframe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-workspace,
  .overview-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-point-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-side-stack {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .overview-shell {
    padding: 8px;
  }

  .overview-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-toolbar__actions {
    justify-content: flex-start;
    width: 100%;
  }

  .overview-select-field {
    flex: 1 1 220px;
  }

  .overview-select-field select {
    flex: 1 1 auto;
    max-width: none;
  }

  .overview-updated-at {
    flex: 1 1 100%;
    order: 3;
  }

  .overview-point-list,
  .overview-side-stack,
  .overview-health-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-dual-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-camera-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-viewer {
    min-height: 0;
  }

  .overview-camera-media,
  .overview-camera-media img {
    min-height: 240px;
  }

  .overview-camera-media--compact,
  .overview-camera-media--compact img {
    min-height: 126px;
  }
}

@media (max-width: 520px) {
  .overview-page {
    font-size: 13px;
  }

  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar {
    overflow: hidden;
  }

  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__title--single-line.topbar__title--system {
    font-size: 1rem;
  }

  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__actions,
  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .topbar__switchbar {
    width: 100%;
    min-width: 0;
  }

  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .page-nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .page-nav::-webkit-scrollbar {
    display: none;
  }

  body.app-page.overview-page .topbar.topbar--workspace.overview-topbar .page-nav__link {
    flex: 0 0 auto;
  }

  .overview-shell {
    padding: 6px;
    gap: 8px;
  }

  .overview-main {
    gap: 8px;
  }

  .overview-toolbar__heading {
    flex-wrap: wrap;
  }

  .overview-toolbar__eyebrow {
    flex-basis: 100%;
  }

  .overview-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-select-field,
  .overview-updated-at {
    grid-column: 1 / -1;
    width: 100%;
  }

  .overview-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-metric {
    padding: 11px 12px;
  }

  .overview-panel__head,
  .overview-camera-tile__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-viewer-head,
  .overview-camera-tile__meta {
    display: flex;
  }

  .overview-mode-switch,
  .overview-mode-button {
    width: 100%;
  }

  .overview-mode-button {
    flex: 1 1 0;
  }

  .overview-camera-tile__actions {
    flex-direction: row;
    align-items: center;
  }

  .overview-camera-matrix,
  .overview-keyframe-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-camera-media,
  .overview-camera-media img {
    min-height: 210px;
  }

  .overview-camera-media--compact,
  .overview-camera-media--compact img {
    min-height: 150px;
  }

  .overview-health-item__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-footnote {
    white-space: normal;
  }
}