* { box-sizing: border-box; }
:root {
  --bg: #f3f5f9; --surface: #ffffff; --surface-soft: #f8fafc; --text: #172033; --muted: #687386;
  --line: #e5e9f0; --primary: #3157e8; --primary-dark: #2443bd; --navy: #111827; --navy-soft: #1e293b;
  --green: #0e9f6e; --green-soft: #e8f8f1; --red: #e5484d; --red-soft: #fff0f0; --orange: #e97924; --orange-soft: #fff5e9;
  --shadow: 0 14px 40px rgba(21, 35, 62, .08); --radius: 20px;
}

/* UniFi-style entity lists and property drawer ----------------------------- */
.unifi-list-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
}

.entity-list-toolbar {
  min-height: 54px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ui-border);
}

.entity-search {
  min-width: 220px;
  max-width: 360px;
  flex: 1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--ui-text-subtle);
  background: var(--ui-surface-soft);
  border: 1px solid transparent;
  border-radius: 5px;
}

.entity-search:focus-within {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: var(--ui-surface);
}

.entity-search svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.entity-search input {
  min-height: 34px;
  padding: 0;
  color: var(--ui-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.entity-list-toolbar .count-badge {
  margin-left: auto;
}

.entity-list-toolbar .secondary-action {
  min-height: 35px;
  padding: 0 13px;
  border-radius: 5px;
  font-size: 12px;
}

.user-table-head,
.unifi-user-list .user-item {
  display: grid;
  grid-template-columns: minmax(190px, 1.45fr) minmax(110px, .8fr) minmax(125px, .85fr) 90px 22px;
  align-items: center;
  gap: 12px;
}

.user-table-head {
  min-height: 38px;
  padding: 0 15px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  font-size: 11px;
  font-weight: 600;
}

.unifi-user-list {
  display: block;
}

.unifi-user-list .user-item {
  width: 100%;
  min-height: 48px;
  padding: 6px 15px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  text-align: left;
}

.unifi-user-list .user-item:last-child {
  border-bottom: 0;
}

.unifi-user-list .user-item:hover,
.unifi-user-list .user-item:focus-visible {
  background: var(--ui-hover);
  outline: 0;
}

.user-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.user-identity .account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: 12px;
}

.user-identity strong,
.user-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-identity strong {
  font-size: 13px;
  font-weight: 550;
}

.user-identity small,
.user-table-value {
  color: var(--ui-text-secondary);
  font-size: 11px;
}

.user-identity small {
  display: none;
}

.user-state {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--success-text);
  background: var(--success-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.user-state.inactive {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.user-row-arrow {
  color: var(--ui-text-subtle);
  font-size: 18px;
  text-align: right;
}

.users-panel #user-editor:not([open]) {
  display: none;
}

.users-panel #user-editor[open] {
  margin: 12px;
}

.users-panel #user-editor > summary {
  display: none;
}

.user-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.user-form-actions button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 5px;
}

.entity-drawer-scrim {
  position: fixed;
  z-index: 78;
  inset: 50px 0 0 52px;
  background: transparent;
}

.entity-drawer {
  position: fixed;
  z-index: 79;
  top: 50px;
  right: 0;
  bottom: 0;
  width: min(400px, calc(100vw - 52px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  border-left: 1px solid var(--ui-border);
  box-shadow: -18px 0 42px rgba(16, 25, 43, .13);
  animation: entity-drawer-in .18s ease-out;
}

.entity-drawer[hidden],
.entity-drawer-scrim[hidden] {
  display: none;
}

@keyframes entity-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.entity-drawer-header {
  min-height: 51px;
  padding: 0 14px 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.entity-drawer-header strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-drawer-header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ui-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 23px;
}

.entity-drawer-header button:hover {
  color: var(--ui-text);
  background: var(--ui-hover);
}

.entity-drawer-tabs {
  padding: 7px 14px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.entity-drawer-tabs button {
  min-width: 104px;
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ui-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
}

.entity-drawer-tabs button.active {
  color: var(--accent-text);
  background: var(--ui-active);
}

.entity-drawer-tabs svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entity-drawer-body {
  padding: 13px 14px 22px;
  overflow-y: auto;
}

.entity-hero,
.entity-property-group {
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.entity-hero {
  min-height: 76px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.entity-hero + .entity-property-group {
  margin-top: 12px;
}

.entity-hero-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--primary);
  border-radius: 7px;
  font-size: 17px;
  font-weight: 700;
}

.entity-hero strong,
.entity-hero small {
  display: block;
}

.entity-hero strong {
  font-size: 14px;
  font-weight: 600;
}

.entity-hero small {
  margin-top: 4px;
  color: var(--green);
  font-size: 11px;
}

.entity-hero small.inactive {
  color: var(--ui-text-subtle);
}

.entity-property-group {
  margin-top: 10px;
  padding: 7px 14px;
}

.entity-property-group-title {
  padding: 8px 0 6px;
  color: var(--ui-text-subtle);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.entity-property-row {
  min-height: 38px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--ui-border);
  font-size: 12px;
}

.entity-property-row:last-child {
  border-bottom: 0;
}

.entity-property-row span:first-child {
  color: var(--ui-text-secondary);
}

.entity-property-row strong {
  max-width: 62%;
  overflow-wrap: anywhere;
  font-weight: 500;
  text-align: right;
}

.entity-drawer-actions {
  min-height: 62px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border);
}

.entity-drawer-actions:empty {
  display: none;
}

.entity-drawer-actions button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 5px;
  font-size: 11px;
}

.entity-drawer-form-card {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
}

.entity-drawer-form-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-bottom: 1px solid var(--ui-border);
}

.entity-drawer-form-heading .entity-hero-icon {
  width: 38px;
  height: 38px;
  font-size: 19px;
}

.entity-drawer-form-heading strong,
.entity-drawer-form-heading small {
  display: block;
}

.entity-drawer-form-heading strong {
  font-size: 14px;
  font-weight: 600;
}

.entity-drawer-form-heading small {
  margin-top: 2px;
  color: var(--ui-text-secondary);
  font-size: 11px;
}

#entity-drawer-form-host .settings-form {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}

#entity-drawer-form-host .user-form-actions {
  margin-top: 2px;
}

.camera-card-open {
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.camera-card-open:hover h3,
.camera-card-open:focus-visible h3 {
  color: var(--accent-text);
}

.incident-row[data-open-incident-properties] {
  cursor: pointer;
}

.incident-row[data-open-incident-properties]:hover {
  background: var(--ui-hover);
}

/* An item remains visually selected while its contextual drawer is open. */
.entity-drawer-source,
.unifi-user-list .user-item.entity-drawer-source,
.device-row.entity-drawer-source,
.incident-row.entity-drawer-source,
.network-setting-row.entity-drawer-source {
  background: var(--ui-hover) !important;
}

@media (max-width: 760px) {
  .user-table-head {
    display: none;
  }

  .entity-list-toolbar {
    flex-wrap: wrap;
  }

  .entity-search {
    min-width: 0;
    max-width: none;
    flex-basis: calc(100% - 112px);
  }

  .entity-list-toolbar .count-badge {
    display: none;
  }

  .unifi-user-list .user-item {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 8px;
    padding: 9px 12px;
  }

  .unifi-user-list .user-item > .user-table-value.login {
    display: none;
  }

  .user-identity small {
    display: block;
  }

  .unifi-user-list .user-item > .user-state {
    grid-column: 2;
  }

  .unifi-user-list .user-item > .user-table-value.role {
    display: none;
  }

  .entity-drawer-scrim {
    inset: 60px 0 0;
  }

  .entity-drawer {
    z-index: 90;
    top: 60px;
    width: 100vw;
  }

  .entity-drawer-header,
  .entity-drawer-tabs,
  .entity-drawer-body,
  .entity-drawer-actions {
    padding-left: 13px;
    padding-right: 13px;
  }
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }

.session-check {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 100dvh;
  color: var(--text);
  background: var(--surface, #fff);
}

.session-check[hidden] {
  display: none;
}

.session-check strong {
  font-size: 20px;
  letter-spacing: .08em;
}

.session-check-logo {
  width: 76px;
  height: 76px;
  margin-bottom: 8px;
  object-fit: contain;
  border-radius: 16px;
}

.session-check small {
  color: var(--muted);
  font-size: 14px;
}

.session-check-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--muted) 24%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: session-check-spin .8s linear infinite;
}

@keyframes session-check-spin {
  to { transform: rotate(360deg); }
}
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px 20px; color: #fff; background: radial-gradient(circle at 15% 0%, #26395f 0, transparent 28%), linear-gradient(180deg, #101827, #111b31 58%, #0d1423); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, #4f72ff, #2648d4); box-shadow: 0 8px 20px rgba(49,87,232,.36); font-size: 21px; font-weight: 900; color: #fff; }
.brand-logo-frame { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: transparent; box-shadow: 0 8px 20px rgba(49,87,232,.24); }
.brand-logo-frame img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; display: block; }
.brand strong { display: block; font-size: 21px; letter-spacing: -.03em; }
.brand small { display: block; color: #8fa0bd; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.sidebar > .brand { flex-direction: column; justify-content: center; gap: 7px; padding: 0; text-align: center; }
.sidebar > .brand .brand-logo-frame { width: 88px; height: 88px; border-radius: 18px; }
.sidebar > .brand strong { font-size: 27px; line-height: 1; letter-spacing: .02em; }
.sidebar > .brand small { margin-top: 5px; font-size: 10px; line-height: 1.25; letter-spacing: .09em; }
.main-nav { margin-top: 38px; display: grid; gap: 7px; }
.nav-btn { border: 0; background: transparent; color: #9caac1; border-radius: 13px; min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 13px; font-weight: 700; text-align: left; transition: .18s ease; }
.nav-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-btn.active { color: #fff; background: linear-gradient(135deg, rgba(79,114,255,.28), rgba(49,87,232,.16)); box-shadow: inset 3px 0 #6582ff; }
.nav-icon { width: 20px; height: 20px; flex: 0 0 auto; color: #7390ff; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.system-card { margin-top: auto; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.055); border-radius: 15px; padding: 13px; display: flex; gap: 10px; align-items: center; }
.system-card strong, .system-card small { display: block; }
.system-card strong { font-size: 15px; }.system-card small { color: #8291a9; font-size: 13px; margin-top: 2px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #21c98a; box-shadow: 0 0 0 5px rgba(33,201,138,.12); }
.status-dot.warning { background: var(--orange); box-shadow: 0 0 0 5px rgba(233,121,36,.12); }
.sidebar-caption { color: #53627b; font-size: 12px; text-align: center; text-transform: uppercase; letter-spacing: .08em; margin-top: 16px; }
.account-card { margin-top: 9px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); }.account-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--primary); font-size: 14px; font-weight: 900; }.account-card strong, .account-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-card strong { font-size: 13px; }.account-card small { color: #8291a9; font-size: 11px; }.account-card button { border: 0; color: #8795ab; background: transparent; font-size: 19px; }
.workspace { min-width: 0; }.mobile-header, .mobile-nav { display: none; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #26395f 0, transparent 28%), linear-gradient(145deg, #0d1423, #131f35); }.auth-card { width: min(430px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); }.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; text-align: center; }.auth-brand strong, .auth-brand small { display: block; }.auth-brand strong { font-size: 21px; }.auth-brand small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }.auth-card h1 { margin: 5px 0 6px; font-size: 30px; letter-spacing: -.04em; }.auth-card p { margin: 0 0 22px; color: var(--muted); font-size: 15px; }.auth-form { display: grid; gap: 14px; }.auth-form .primary-action { margin-top: 5px; }
.auth-brand .brand-logo-frame { width: 112px; height: 112px; border-radius: 22px; }
.auth-brand .brand-logo-frame img { width: 100%; height: 100%; }
.auth-brand strong { font-size: 31px; line-height: 1; letter-spacing: .03em; }
main { max-width: 1480px; margin: 0 auto; padding: 36px 42px 64px; }
.page { display: none; }.active-page { display: block; animation: page-in .22s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 26px; }
.page-header h1 { margin: 3px 0 5px; font-size: clamp(31px, 3vw, 42px); line-height: 1.12; letter-spacing: -.045em; }
.page-header p { color: var(--muted); margin: 0; max-width: 680px; font-size: 18px; }
.eyebrow { color: var(--primary); text-transform: uppercase; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.header-metrics { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; min-width: 310px; }
.header-metrics div { flex: 1; padding: 14px 18px; }.header-metrics div + div { border-left: 1px solid var(--line); }
.header-metrics small, .header-metrics strong { display: block; }.header-metrics small { color: var(--muted); font-size: 13px; margin-bottom: 3px; }.header-metrics strong { font-size: 17px; }
.panel { background: var(--surface); border: 1px solid rgba(213,220,231,.75); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.operator-layout { display: block; max-width: 920px; margin: 0 auto; }
.operator-steps { max-width: 920px; margin: 0 auto 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.operator-steps div { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.62); color: #7d8798; font-size: 13px; }
.operator-steps span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #e9edf4; font-weight: 900; }
.operator-steps .current { color: var(--primary); border-color: #cfd8fa; background: #f8f9ff; }.operator-steps .current span { color: #fff; background: var(--primary); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.panel-heading > div { display: flex; align-items: center; gap: 11px; }.panel-heading h2 { font-size: 22px; margin: 0; letter-spacing: -.025em; }
.step-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #edf1ff; color: var(--primary); font-size: 15px; font-weight: 900; }
.section-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.required-note { color: #8c96a7; font-size: 13px; }
.incident-form, .settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.operation-field { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; color: #3c4658; font-size: 14px; font-weight: 800; }
.field input, .field select, .field textarea, .archive-toolbar input, .archive-toolbar select, .scan-form input, .scan-form select { width: 100%; border: 1px solid #dce2ea; color: var(--text); background: #fbfcfe; border-radius: 11px; padding: 12px 13px; outline: none; transition: border .16s, box-shadow .16s, background .16s; }
.field input:focus, .field select:focus, .field textarea:focus, .archive-toolbar input:focus, .archive-toolbar select:focus, .scan-form input:focus, .scan-form select:focus { background: #fff; border-color: #7890ee; box-shadow: 0 0 0 4px rgba(49,87,232,.09); }
.field input[readonly] { color: #596579; background: #f0f3f7; }
.field textarea { min-height: 74px; resize: vertical; }.field select[multiple] { min-height: 100px; }
.camera-readiness { min-height: 60px; display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid #dbe2ee; border-radius: 13px; color: #354054; background: #f8fafc; }.camera-readiness > div { min-width: 0; flex: 1; }.camera-readiness strong, .camera-readiness small { display: block; }.camera-readiness strong { font-size: 14px; }.camera-readiness small { margin-top: 3px; color: var(--muted); font-size: 11px; }.camera-readiness.ready { border-color: #bde8d8; background: #f0fbf7; }.camera-readiness.warning, .camera-readiness.empty { border-color: #f3d3a8; background: #fff8ee; }.readiness-icon, .readiness-spinner { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--green); font-size: 14px; font-weight: 900; }.warning .readiness-icon, .empty .readiness-icon { background: var(--orange); }.readiness-spinner { border: 3px solid #dce3f4; border-top-color: var(--primary); border-radius: 50%; background: transparent; animation: preview-spin .8s linear infinite; }.readiness-cameras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.readiness-camera { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 8px; color: #405169; background: rgba(255,255,255,.7); font-size: 11px; font-weight: 750; }.readiness-camera i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.readiness-camera.warning i { background: var(--red); }.readiness-camera.inactive { color: #8993a3; }.readiness-camera.inactive i { background: #aeb6c2; }.active-readiness { margin: 5px 0 2px; }
.full-width { grid-column: 1 / -1; }
.form-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; color: #929baa; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 3px 0 -1px; }
.form-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.advanced-fields { margin-top: 1px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }
.advanced-fields summary, .materials-block summary, .archive-filters summary, .marker-more summary { list-style: none; cursor: pointer; }
.advanced-fields summary::-webkit-details-marker, .materials-block summary::-webkit-details-marker, .archive-filters summary::-webkit-details-marker, .marker-more summary::-webkit-details-marker { display: none; }
.advanced-fields > summary { padding: 13px 15px; color: var(--primary); font-size: 14px; font-weight: 850; display: flex; justify-content: space-between; gap: 10px; }
.advanced-fields > summary::before { content: "+"; margin-right: 6px; }.advanced-fields[open] > summary::before { content: "−"; }
.advanced-fields > summary span { margin-left: auto; color: var(--muted); font-weight: 650; }
.advanced-grid { padding: 2px 15px 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.primary-action, .secondary-action { border: 0; border-radius: 11px; min-height: 46px; padding: 0 18px; font-weight: 850; }
.primary-action { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; background: linear-gradient(135deg, #3a62ed, #294cda); box-shadow: 0 9px 18px rgba(49,87,232,.2); }
.primary-action:hover { filter: brightness(.97); transform: translateY(-1px); }
.secondary-action { color: var(--primary); background: #eaf0ff; }
.workflow-panel { position: sticky; top: 25px; background: linear-gradient(160deg, #17243d, #101827); color: #fff; border-radius: var(--radius); padding: 23px; box-shadow: 0 16px 38px rgba(16,24,39,.2); }
.workflow-title { display: flex; gap: 10px; align-items: center; font-size: 16px; }.pulse { width: 8px; height: 8px; background: #34d399; border-radius: 50%; box-shadow: 0 0 0 5px rgba(52,211,153,.1); }
.workflow-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 20px; position: relative; }
.workflow-list::before { content: ""; position: absolute; left: 14px; top: 22px; bottom: 22px; border-left: 1px dashed #3c4c67; }
.workflow-list li { display: flex; gap: 12px; align-items: center; position: relative; }.workflow-list li > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #40516e; border-radius: 9px; background: #1b2942; color: #89a0ff; font-size: 13px; font-weight: 900; z-index: 1; }
.workflow-list strong, .workflow-list small { display: block; }.workflow-list strong { font-size: 15px; }.workflow-list small { color: #8796ad; font-size: 13px; margin-top: 2px; }
.tip-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 13px; padding: 14px; }.tip-card strong { color: #91a7ff; font-size: 13px; text-transform: uppercase; }.tip-card p { color: #bdc7d7; font-size: 14px; margin: 6px 0 0; }
.active-card { margin-top: 24px; scroll-margin-top: 20px; }.active-card[hidden] { display: none; }
.showing-active > .page-header, .showing-active > .operator-steps, .showing-active > .operator-layout { display: none; }
.showing-active .active-card { margin-top: 0; }
.recording-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }.active-title { display: flex; align-items: center; gap: 10px; }.active-title h2 { margin: 3px 0; font-size: 26px; }.recording-head p { color: var(--muted); margin: 2px 0 0; font-size: 14px; }
.recording-clock { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; font-size: 28px; }.recording-clock > span { width: 12px; height: 12px; border-radius: 50%; background: #bdc4d0; }.recording-clock > span.active { background: var(--red); animation: blink 1.25s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.record-controls { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; padding: 18px 0; }.record-controls button { min-height: 46px; border: 0; border-radius: 11px; padding: 12px 18px; font-weight: 850; }.record-start { background: var(--red); color: #fff; }.record-pause { color: #8a4b0f; background: #fff0d8; }.record-stop { background: #1f2937; color: #fff; }
.action-guidance { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0 0; color: #4d5a70; font-size: 14px; }.active-record-actions { display: flex; align-items: center; gap: 8px; }.compact-action { min-height: 36px; padding: 0 13px; font-size: 12px; white-space: nowrap; }.incident-editor { margin: 13px 0 5px; padding: 16px; border: 1px solid #d8e0f2; border-radius: 14px; background: #f8faff; }.incident-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 14px; }.incident-editor-head strong, .incident-editor-head small { display: block; }.incident-editor-head strong { font-size: 15px; }.incident-editor-head small { margin-top: 3px; color: var(--muted); font-size: 11px; }.incident-editor-head .dialog-close { width: 28px; height: 28px; font-size: 20px; }.incident-editor-actions { display: flex; justify-content: flex-end; gap: 9px; }.incident-editor-actions button { min-width: 145px; }
.active-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }.active-section { border: 1px solid var(--line); border-radius: 15px; padding: 17px; }.active-section h3, .active-details h3 { font-size: 15px; margin: 0 0 12px; }.active-details h3 span { color: var(--primary); margin-left: 4px; }
.section-help { color: var(--muted); font-size: 12px; margin: -6px 0 12px; }
.marker-grid { display: flex; flex-wrap: wrap; gap: 8px; }.marker-btn { border: 1px solid #dfe4ec; color: #42506a; background: #f9fafc; border-radius: 9px; padding: 9px 11px; font-size: 13px; font-weight: 800; }.marker-btn span { color: var(--primary); margin-right: 5px; }.marker-btn:hover { border-color: #a7b5e8; background: #f1f4ff; }.marker-btn.issue { color: var(--red); background: var(--red-soft); border-color: #ffd4d5; }
.marker-more { flex: 1 1 100%; padding-top: 3px; }.marker-more summary { width: fit-content; color: var(--primary); font-size: 12px; font-weight: 800; padding: 5px 1px; }.marker-more summary::after { content: " ↓"; }.marker-more[open] summary::after { content: " ↑"; }.marker-more > div { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 5px; }
.scan-form { display: grid; grid-template-columns: 140px 1fr auto; gap: 7px; }.scan-form button { border: 0; border-radius: 10px; padding: 0 15px; color: #fff; background: var(--primary); font-weight: 800; }
.active-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }.detail-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0; border-top: 1px solid #edf0f5; color: inherit; text-decoration: none; }.detail-item > span:nth-child(2) { min-width: 0; flex: 1; }.detail-item strong, .detail-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.detail-item strong { font-size: 14px; }.detail-item small { color: var(--muted); font-size: 12px; margin-top: 2px; }.detail-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: #eef2ff; color: var(--primary); font-size: 13px; }.video-item:hover strong { color: var(--primary); }.quality { font-size: 11px; font-weight: 900; color: var(--green); }.code-preview { max-width: 190px; }.muted { color: var(--muted); font-size: 13px; }
.materials-block { margin-top: 18px; border-top: 1px solid var(--line); }.materials-block > summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 2px 0; color: var(--primary); font-size: 14px; font-weight: 850; }.materials-block > summary::after { content: "Показать ↓"; color: var(--muted); font-size: 12px; }.materials-block[open] > summary::after { content: "Скрыть ↑"; }.materials-block > summary span { color: var(--muted); margin-left: auto; margin-right: 14px; font-size: 12px; font-weight: 650; }
.status-chip { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 850; white-space: nowrap; background: #edf0f5; color: #667085; }.status-chip.ready { background: var(--green-soft); color: var(--green); }.status-chip.recording { background: var(--red-soft); color: var(--red); }.status-chip.paused { color: #a15a12; background: #fff0d8; }.status-chip.processing { background: #eef1ff; color: var(--primary); }.status-chip.failed { background: var(--red-soft); color: var(--red); }.status-chip.draft { background: var(--orange-soft); color: var(--orange); }.status-chip.cancelled { background: #eef0f4; color: #7c8595; }.status-chip.claim_hold { background: #f3eefe; color: #7c3aed; }
.playback-note { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; padding: 12px 14px; border: 1px solid #bfe3d4; border-radius: 13px; background: #f0fbf6; }.playback-note > span { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--green); }.playback-note strong, .playback-note small { display: block; }.playback-note strong { font-size: 14px; }.playback-note small { margin-top: 2px; color: var(--muted); font-size: 11px; }.playback-note.warning { border-color: #f0d3aa; background: #fff8ee; }.playback-note.warning > span { background: var(--orange); }
.archive-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 10px; margin-bottom: 16px; }.search-box { display: flex; align-items: center; gap: 7px; border: 1px solid #dce2ea; background: #fbfcfe; border-radius: 11px; padding-left: 13px; color: #8893a5; }.search-box input { border: 0; box-shadow: none !important; padding-left: 0; background: transparent !important; }
.archive-filters { position: relative; }.archive-filters > summary { min-width: 105px; min-height: 45px; display: grid; place-items: center; border: 1px solid #dce2ea; border-radius: 11px; color: #536078; background: #fbfcfe; font-size: 13px; font-weight: 800; }.archive-filters[open] > summary { color: var(--primary); border-color: #aebceb; }.archive-filters > div { position: absolute; z-index: 10; right: 0; top: 52px; width: min(590px, calc(100vw - 310px)); display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }.archive-filters select { width: 100%; border: 1px solid #dce2ea; border-radius: 9px; padding: 10px; background: #fbfcfe; color: var(--text); }.archive-filters label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 750; }.archive-filters label input { min-height: 39px; padding: 8px 10px; }
.incident-list { display: grid; gap: 8px; }.incident-row { display: grid; grid-template-columns: minmax(240px, 1.4fr) .8fr 125px 90px minmax(250px, auto); align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; transition: .16s; }.incident-row:hover { border-color: #c8d2ed; box-shadow: 0 7px 18px rgba(39,55,90,.06); }.incident-main { display: flex; align-items: center; gap: 11px; min-width: 0; }.incident-main strong, .incident-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.incident-main small { color: var(--muted); font-size: 12px; margin-top: 3px; }.operation-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-size: 14px; font-weight: 900; background: #eef2ff; color: var(--primary); }.operation-icon.shipping { background: #e9f8f2; color: var(--green); }.operation-icon.return { background: #fff3e8; color: var(--orange); }.incident-meta, .incident-counts { display: flex; gap: 12px; color: var(--muted); font-size: 13px; }.incident-counts { flex-direction: column; gap: 2px; }.text-action, .icon-action { border: 0; color: var(--primary); background: transparent; font-size: 13px; font-weight: 850; padding: 5px; }.text-action:hover { color: var(--primary-dark); }.incident-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }.multicam-list-action { border: 1px solid #c8d4f5; border-radius: 9px; padding: 7px 9px; color: var(--primary); background: #f1f4ff; font-size: 11px; font-weight: 850; white-space: nowrap; }.multicam-list-action:hover { border-color: #8fa4e8; background: #e9eeff; }.multicam-list-action:disabled { opacity: .42; }.delete-action { border: 0; border-radius: 8px; padding: 6px 8px; color: var(--red); background: var(--red-soft); font-size: 12px; font-weight: 850; }.delete-action:hover { background: #ffe1e2; }.empty-state { text-align: center; padding: 45px 20px; color: var(--muted); }.empty-state strong, .empty-state span { display: block; }.empty-state strong { color: var(--text); margin-bottom: 4px; }
.admin-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }.settings-form { gap: 13px; }.toggle { display: flex; align-items: center; gap: 9px; color: #455064; font-size: 14px; font-weight: 750; cursor: pointer; }.toggle input { position: absolute; opacity: 0; }.toggle span { width: 34px; height: 20px; background: #cbd2dd; border-radius: 99px; position: relative; transition: .2s; }.toggle span::after { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }.toggle input:checked + span { background: var(--primary); }.toggle input:checked + span::after { transform: translateX(14px); }
.equipment-guide { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 18px; padding: 15px 18px; border: 1px solid #dfe5f2; border-radius: 16px; background: linear-gradient(135deg, #f9fbff, #f1f5ff); }.equipment-guide > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; }.equipment-guide > div > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--primary); font-size: 13px; font-weight: 900; }.equipment-guide strong { font-size: 13px; }.equipment-guide small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.equipment-guide > i { color: #9cadd4; font-style: normal; font-size: 20px; }.equipment-layout { grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.4fr); }.equipment-context { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; font-weight: 650; }
.settings-list { display: grid; gap: 7px; margin-top: 19px; }.setting-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); background: #fbfcfe; border-radius: 11px; }.setting-item strong, .setting-item small { display: block; }.setting-item strong { font-size: 14px; }.setting-item small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.system-settings-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 22px; align-items: start; }.system-settings-card { min-height: 100%; }.ready-badge { color: var(--green); background: var(--green-soft); }.system-settings-form { margin-top: 4px; }.settings-warning { display: flex; gap: 9px; padding: 11px 12px; border: 1px solid #f2d398; border-radius: 11px; color: #8a5a10; background: #fff9ec; font-size: 11px; line-height: 1.45; }.settings-warning strong { white-space: nowrap; }.error-warning { border-color: #f2b8b8; color: #a13737; background: #fff4f4; }.access-address-card { display: grid; gap: 5px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid #cad6f5; border-radius: 14px; background: linear-gradient(145deg,#f8faff,#eef3ff); }.access-address-card small { color: var(--muted); font-size: 11px; font-weight: 750; }.access-address-card strong { color: var(--primary-dark); font-size: 20px; word-break: break-all; }.access-address-card span { color: #5d6980; font-size: 11px; }.dns-credential-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.empty-settings-hint,.secret-note { padding: 11px 12px; border-radius: 10px; color: var(--muted); background: #f6f8fc; font-size: 11px; line-height: 1.45; }.secret-note::before { content: "●"; margin-right: 7px; color: var(--green); }.network-actions { display: flex; justify-content: flex-end; gap: 10px; }.network-actions button { flex: 1; }.certificate-state { display: flex; align-items: center; gap: 11px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }.certificate-state > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #b7c0d0; box-shadow: 0 0 0 5px #f0f2f6; }.certificate-state > span.active { background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }.certificate-state > span.working,.certificate-state > span.configured { background: #e5a31a; box-shadow: 0 0 0 5px #fff4d7; }.certificate-state > span.error { background: #d94a4a; box-shadow: 0 0 0 5px #fde8e8; }.certificate-state strong,.certificate-state small { display: block; }.certificate-state strong { font-size: 13px; }.certificate-state small { margin-top: 2px; color: var(--muted); font-size: 11px; }.tls-badge.active { color: var(--green); background: var(--green-soft); }.tls-badge.configured,.tls-badge.working { color: #91620c; background: #fff4d7; }.tls-badge.error { color: #a13737; background: #fde8e8; }
.tls-progress { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid #c9d6fa; border-radius: 13px; background: #f5f8ff; }.tls-progress:not([hidden]) { display: grid; }.tls-progress-spinner { width: 22px; height: 22px; border: 3px solid #dce4fb; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }.tls-progress strong,.tls-progress small { display: block; }.tls-progress strong { color: var(--primary-dark); font-size: 13px; }.tls-progress small { margin-top: 2px; color: var(--muted); font-size: 11px; }.tls-progress b { color: #64708a; font-size: 12px; font-variant-numeric: tabular-nums; }.tls-progress-track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #dfe6f7; }.tls-progress-track i { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
.zone-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; transition: .16s ease; }.zone-card:hover { border-color: #bdc9ea; }.zone-card.selected { border-color: #8ea3ed; background: #f5f7ff; box-shadow: 0 0 0 2px rgba(49,87,232,.08); }.zone-card.inactive { opacity: .68; }.zone-select { width: 100%; display: block; border: 0; padding: 13px 13px 10px; color: inherit; background: transparent; text-align: left; }.zone-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.zone-title strong { font-size: 15px; }.zone-select > small { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }.operation-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.operation-chips > span { padding: 4px 6px; border-radius: 7px; color: #4e5d78; background: #edf1f7; font-size: 10px; font-weight: 800; }.zone-camera-count { display: block; color: var(--primary); margin-top: 9px; font-size: 11px; font-weight: 850; }.zone-actions { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border-top: 1px solid #e9edf4; background: rgba(255,255,255,.65); }.zone-actions .delete-action { background: transparent; }.zone-actions .delete-action:hover { background: var(--red-soft); }
.equipment-panel { margin-top: 22px; }.count-badge { padding: 6px 10px; border-radius: 99px; background: #edf1ff; color: var(--primary); font-size: 12px; font-weight: 850; }.camera-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.admin-section .camera-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.camera-card { border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: #fbfcfe; }.camera-card.inactive { opacity: .62; }.camera-card-head { display: flex; justify-content: space-between; align-items: center; }.camera-glyph { color: var(--primary); font-size: 21px; }.camera-card h3 { margin: 12px 0 1px; font-size: 16px; }.camera-card p { color: var(--muted); margin: 0 0 12px; font-size: 12px; }.camera-card dl { margin: 0; display: grid; gap: 5px; }.camera-card dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }.camera-card dt { color: var(--muted); }.camera-card dd { margin: 0; font-weight: 750; text-align: right; }.camera-card .text-action { margin-top: 11px; padding-left: 0; }
.camera-toolbar { min-height: 27px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: -12px; margin-bottom: 15px; }.camera-toolbar .admin-description { margin: 0; }.camera-toolbar .text-action { margin-top: -4px; white-space: nowrap; }.camera-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }.camera-actions > div { display: flex; align-items: center; gap: 5px; }.camera-card .camera-actions .text-action { margin: 0; padding: 7px 5px; }.camera-card .camera-actions .delete-action { padding: 7px 8px; }.preview-action { border: 1px solid #cbd6f4; border-radius: 9px; padding: 7px 9px; color: var(--primary); background: #f1f4ff; font-size: 11px; font-weight: 850; }.preview-action:hover { border-color: #91a5e7; background: #e8edff; }
.admin-description { color: var(--muted); margin: -12px 0 17px; font-size: 13px; }.admin-editor { margin-top: 16px; border-top: 1px solid var(--line); }.admin-editor > summary { cursor: pointer; list-style: none; padding: 15px 2px 0; color: var(--primary); font-size: 13px; font-weight: 850; }.admin-editor > summary::-webkit-details-marker { display: none; }.admin-editor[open] > summary { margin-bottom: 15px; }.users-panel { max-width: 1050px; }.user-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.user-item { min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; }.user-item.inactive { opacity: .58; }.user-item strong, .user-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.user-item strong { font-size: 14px; }.user-item small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.equipment-editor { margin: 0 0 16px; border: 0; border-radius: 14px; background: #f7f9ff; }.equipment-editor > summary { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px dashed #b9c6ec; border-radius: 13px; color: inherit; background: #f7f9ff; }.equipment-editor > summary:hover { border-color: #8095df; background: #f1f4ff; }.equipment-editor > summary .editor-plus { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--primary); font-size: 19px; }.equipment-editor > summary strong, .equipment-editor > summary small { display: block; }.equipment-editor > summary strong { color: var(--text); font-size: 14px; }.equipment-editor > summary small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 650; }.equipment-editor > summary i { margin-left: auto; color: var(--primary); font-size: 11px; font-style: normal; }.equipment-editor[open] { border: 1px solid #cbd5f4; background: #fff; box-shadow: 0 9px 22px rgba(35,54,105,.07); }.equipment-editor[open] > summary { margin: 0; border: 0; border-bottom: 1px solid #e6eaf4; border-radius: 13px 13px 0 0; background: #f7f9ff; }.equipment-editor[open] > summary i { font-size: 0; }.equipment-editor[open] > summary i::after { content: "Закрыть"; font-size: 11px; }.camera-settings-form { padding: 16px; }.field-hint { color: var(--muted); font-size: 11px; font-weight: 600; }.camera-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 3px; }.camera-form-footer .primary-action { min-width: 180px; }
.preview-dialog { width: min(960px, calc(100vw - 48px)); padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: var(--text); background: #fff; box-shadow: 0 30px 90px rgba(6,14,32,.4); }.preview-dialog::backdrop { background: rgba(7,13,27,.72); backdrop-filter: blur(5px); }.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 17px; }.preview-head h2 { margin: 4px 0 3px; font-size: 23px; }.preview-head p { margin: 0; color: var(--muted); font-size: 13px; }.dialog-close { width: 36px; height: 36px; border: 0; border-radius: 10px; color: #667085; background: #f0f2f6; font-size: 26px; line-height: 1; }.preview-stage { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: #fff; background: #070b14; }.preview-stage img { width: 100%; height: 100%; object-fit: contain; }.preview-stage img[hidden] { display: none; }.preview-stage > div { display: grid; justify-items: center; gap: 7px; }.preview-stage > div[hidden] { display: none; }.preview-stage strong { font-size: 15px; }.preview-stage small { color: #929db2; font-size: 12px; }.preview-spinner { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.18); border-top-color: #fff; border-radius: 50%; animation: preview-spin .8s linear infinite; } @keyframes preview-spin { to { transform: rotate(360deg); } }
.video-player-stage { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: #fff; background: #060a12; }.video-player-stage video { grid-area: 1 / 1; width: 100%; height: 100%; background: #000; }.video-player-stage video[hidden] { display: none; }.video-player-stage > div { grid-area: 1 / 1; display: grid; justify-items: center; gap: 8px; }.video-player-stage > div[hidden] { display: none; }.video-player-stage strong { font-size: 15px; }.video-player-stage small { color: #929db2; font-size: 12px; }.video-player-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 18px; color: var(--muted); font-size: 12px; }.video-player-footer .secondary-action { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }.video-item { border: 0; background: transparent; }.video-item .text-action { margin-left: auto; }
.ozon-archive-panel { max-width: 1120px; }.ozon-access-note { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; padding: 12px 14px; border: 1px solid #cbd9f6; border-radius: 13px; background: #f3f7ff; }.ozon-access-note > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--primary); }.ozon-access-note strong, .ozon-access-note small { display: block; }.ozon-access-note strong { font-size: 14px; }.ozon-access-note small { margin-top: 2px; color: var(--muted); font-size: 11px; }.ozon-search { min-height: 45px; margin-bottom: 15px; }.ozon-incident-list { display: grid; gap: 9px; }.ozon-incident-card { display: grid; grid-template-columns: auto minmax(230px, 1fr) auto auto auto; align-items: center; gap: 13px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; }.ozon-incident-main strong, .ozon-incident-main small { display: block; }.ozon-incident-main strong { font-size: 15px; }.ozon-incident-main small { margin-top: 3px; color: var(--muted); font-size: 11px; }.camera-count-chip { color: var(--primary); font-size: 11px; font-weight: 850; }.multicam-open { min-height: 38px; padding: 0 13px; font-size: 11px; }.multicam-open:disabled { opacity: .45; box-shadow: none; }
.multicam-dialog { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 44px); padding: 6px; overflow: auto; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; color: #fff; background: rgba(7,11,20,.97); box-shadow: 0 28px 90px rgba(2,7,18,.58); }.multicam-dialog::backdrop { background: rgba(5,9,18,.72); backdrop-filter: blur(8px); }.multicam-dialog:fullscreen { width: 100vw; max-width: none; max-height: none; height: 100vh; padding: 8px; border: 0; border-radius: 0; }.multicam-head { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; padding: 8px 10px 9px 13px; background: rgba(7,11,20,.88); backdrop-filter: blur(14px); }.multicam-head h2 { margin: 0; color: #fff; font-size: 18px; letter-spacing: -.02em; }.multicam-head p { margin: 2px 0 0; color: #8f9aaf; font-size: 11px; }.multicam-window-actions { display: flex; align-items: center; gap: 5px; }.multicam-window-action { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 9px; color: #c7cfdd; background: rgba(255,255,255,.07); font-size: 11px; font-weight: 800; }.multicam-window-action:hover { color: #fff; background: rgba(255,255,255,.13); }.multicam-window-action.close { width: 34px; justify-content: center; padding: 0; font-size: 22px; font-weight: 500; }.multicam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; background: transparent; }.multicam-loading { min-height: 390px; grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 9px; color: #fff; }.multicam-loading small { color: #929db2; }.multicam-tile { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #02050a; }.multicam-tile video { width: 100%; height: 100%; object-fit: contain; }.multicam-tile.loading { display: grid; place-items: center; color: #fff; }.multicam-tile.loading > div { display: grid; justify-items: center; gap: 8px; }.multicam-tile.loading small { color: #929db2; }.multicam-label { position: absolute; left: 9px; bottom: 9px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #fff; background: rgba(5,9,17,.62); backdrop-filter: blur(8px); }.multicam-label strong, .multicam-label small { display: block; }.multicam-label strong { font-size: 11px; }.multicam-label small { margin-top: 1px; color: #aeb8ca; font-size: 9px; }.multicam-label a { display: inline-block; margin-top: 4px; color: #b9caff; font-size: 9px; font-weight: 800; text-decoration: none; }.multicam-label a:hover { color: #fff; }.multicam-controls { position: sticky; z-index: 3; bottom: 7px; display: grid; grid-template-columns: auto auto auto minmax(180px, 1fr); align-items: center; gap: 8px; width: calc(100% - 16px); min-height: 48px; margin: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(16,22,34,.78); box-shadow: 0 10px 30px rgba(0,0,0,.3); backdrop-filter: blur(16px); }.multicam-control-action { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #d2d9e5; background: rgba(255,255,255,.08); font-size: 14px; }.multicam-control-action.primary { color: #fff; background: var(--primary); }.multicam-control-action:hover:not(:disabled) { background: rgba(255,255,255,.16); }.multicam-control-action.primary:hover:not(:disabled) { background: var(--primary-dark); }.multicam-controls strong { min-width: 92px; color: #d3d9e4; font-size: 12px; font-variant-numeric: tabular-nums; }.multicam-controls input { width: 100%; accent-color: #6f8cff; }
.toast { position: fixed; top: auto; left: auto; right: 24px; bottom: 24px; z-index: 2147483647; max-width: 390px; margin: 0; padding: 13px 17px; border-radius: 12px; color: #fff; background: #1f2937; box-shadow: 0 15px 35px rgba(0,0,0,.2); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .22s; font-size: 14px; font-weight: 750; }.toast.show { transform: none; opacity: 1; }.toast.success { background: #087a54; }.toast.warning { background: #9a6500; }.toast.error { background: #bc3035; }

@media (max-width: 1100px) {
  .system-settings-layout { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }.sidebar { padding-left: 13px; padding-right: 13px; } main { padding: 30px 25px 60px; }
  .operator-layout { grid-template-columns: 1fr; }.workflow-panel { position: static; display: none; }.active-grid { grid-template-columns: 1fr; }.active-details { grid-template-columns: 1fr 1fr; }.camera-grid { grid-template-columns: repeat(2, 1fr); }.equipment-layout { grid-template-columns: 1fr; }
  .incident-row { grid-template-columns: 1fr auto; gap: 9px 14px; }.incident-main { grid-column: 1; }.incident-meta { grid-column: 1; }.incident-counts { display: none; }.incident-row .status-chip { grid-column: 2; grid-row: 1; }.incident-actions { grid-column: 2; grid-row: 2; }.admin-section .camera-grid, .user-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { background: #f5f7fb; }.app-shell { display: block; }.sidebar { display: none; }.workspace { padding-bottom: 70px; }.mobile-header { height: 60px; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: rgba(17,24,39,.96); color: #fff; backdrop-filter: blur(12px); }.brand.compact { padding: 0; }.brand.compact .brand-logo-frame { width: 34px; height: 34px; border-radius: 10px; }.brand.compact .brand-logo-frame img { width: 100%; height: 100%; }.mobile-account { display: flex; align-items: center; gap: 6px; border: 0; color: #9eabc0; background: transparent; font-size: 12px; }.mobile-account span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-weight: 900; }
  main { padding: 20px 13px 30px; }.page-header { display: block; margin-bottom: 18px; }.page-header h1 { font-size: 29px; }.page-header p { font-size: 15px; }.header-metrics { display: none; }.panel { border-radius: 16px; padding: 17px; }.operator-layout, .admin-layout { display: block; }.admin-layout > .panel + .panel { margin-top: 14px; }.equipment-guide { display: none; }.preview-action { display: none; }
  .operator-steps { display: none; }
  .incident-form, .settings-form, .advanced-grid, .dns-credential-fields { grid-template-columns: 1fr; gap: 12px; }.operation-field, .full-width, .form-divider { grid-column: 1; }.required-note { display: none; }.panel-heading { margin-bottom: 17px; }.field input, .field select, .field textarea { min-height: 48px; font-size: 18px; }.primary-action { min-height: 52px; }.advanced-fields > summary span { display: none; }.network-actions { flex-direction: column; }.access-address-card strong { font-size: 17px; }
  .active-card { margin-top: 14px; }.recording-head { align-items: flex-start; }.recording-clock { font-size: 21px; }.action-guidance { align-items: flex-start; flex-direction: column; }.active-record-actions { width: 100%; }.active-record-actions button { flex: 1; }.incident-editor-actions { flex-direction: column-reverse; }.incident-editor-actions button { width: 100%; }.record-controls { display: grid; grid-template-columns: 1fr 1fr; }.record-controls button { min-height: 50px; }.active-details { grid-template-columns: 1fr; }.scan-form { grid-template-columns: 1fr; }.scan-form select, .scan-form input, .scan-form button { min-height: 47px; }.marker-btn { min-height: 44px; flex: 1 1 45%; }.materials-block > summary span { display: none; }
  .archive-toolbar { grid-template-columns: 1fr; }.archive-filters > summary { width: 100%; }.archive-filters > div { position: static; width: 100%; margin-top: 8px; }.incident-row { grid-template-columns: 1fr auto; gap: 9px; }.incident-main { grid-column: 1; }.incident-meta { grid-column: 1; }.incident-counts { display: none; }.incident-row .status-chip { grid-column: 2; grid-row: 1; }.incident-actions { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-end; }.camera-grid { grid-template-columns: 1fr; }.auth-screen { padding: 12px; }.auth-card { padding: 24px 20px; border-radius: 19px; }
  .mobile-nav { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }.mobile-nav .nav-btn { color: #7c8799; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; font-size: 11px; min-height: 50px; text-align: center; }.mobile-nav .nav-icon { width: 18px; height: 18px; }.mobile-nav .nav-btn span { font-size: 10px; }.mobile-nav .nav-btn.active { color: var(--primary); background: #eef2ff; box-shadow: none; }
  .toast, .toast[popover] { top: auto; left: 13px; right: 13px; bottom: 78px; max-width: none; margin: 0; }.equipment-panel { margin-top: 14px; }
  .camera-form-footer { align-items: stretch; flex-direction: column; }.camera-form-footer .primary-action { width: 100%; }
  body.role-operator .workspace { padding-bottom: 0; } body.role-operator .mobile-nav { display: none; }
  body.role-ozon-manager .mobile-nav { grid-template-columns: 1fr; }
  .ozon-incident-card { grid-template-columns: auto 1fr; }.ozon-incident-card .camera-count-chip, .ozon-incident-card .status-chip { justify-self: start; }.ozon-incident-card .multicam-open { grid-column: 1 / -1; width: 100%; }.multicam-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 4px; }.multicam-head { min-height: 49px; padding: 6px 7px 7px 9px; }.multicam-head p { max-width: 58vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.multicam-window-action span { display: none; }.multicam-grid { grid-template-columns: 1fr; gap: 4px; }.multicam-controls { grid-template-columns: auto auto 1fr; width: calc(100% - 10px); margin: 5px; bottom: 4px; }.multicam-controls strong { grid-column: 3; justify-self: end; }.multicam-controls input { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  main { padding-left: 9px; padding-right: 9px; }.panel { padding: 14px; }.marker-btn { flex-basis: 100%; }.record-controls { grid-template-columns: 1fr; }.recording-head { display: block; }.recording-clock { margin-top: 12px; }
}
.multicam-dialog.is-expanded { position: fixed; inset: 0; width: 100vw; max-width: none; max-height: none; height: 100vh; margin: 0; padding: 8px; border: 0; border-radius: 0; }
.multicam-dialog:fullscreen, .multicam-dialog.is-expanded { overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.multicam-dialog:fullscreen .multicam-head, .multicam-dialog.is-expanded .multicam-head { position: static; }
.multicam-dialog:fullscreen .multicam-grid, .multicam-dialog.is-expanded .multicam-grid { min-height: 0; height: 100%; grid-auto-rows: minmax(0, 1fr); }
.multicam-dialog:fullscreen .multicam-tile, .multicam-dialog.is-expanded .multicam-tile { height: 100%; min-height: 0; aspect-ratio: auto; }
.multicam-dialog:fullscreen .multicam-controls, .multicam-dialog.is-expanded .multicam-controls { position: static; bottom: auto; }
.multicam-dialog[data-camera-count="1"]:fullscreen .multicam-grid, .multicam-dialog[data-camera-count="1"].is-expanded .multicam-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.multicam-dialog[data-camera-count="2"]:fullscreen .multicam-grid, .multicam-dialog[data-camera-count="2"].is-expanded .multicam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.multicam-dialog[data-camera-count="3"]:fullscreen .multicam-grid, .multicam-dialog[data-camera-count="3"].is-expanded .multicam-grid, .multicam-dialog[data-camera-count="4"]:fullscreen .multicam-grid, .multicam-dialog[data-camera-count="4"].is-expanded .multicam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.multicam-dialog[data-camera-count="5"]:fullscreen .multicam-grid, .multicam-dialog[data-camera-count="5"].is-expanded .multicam-grid, .multicam-dialog[data-camera-count="6"]:fullscreen .multicam-grid, .multicam-dialog[data-camera-count="6"].is-expanded .multicam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.multicam-label { transition: opacity .18s ease, transform .18s ease; }
.multicam-dialog.is-playing:not(.show-overlays) .multicam-label { opacity: 0; transform: translateY(5px); pointer-events: none; }
.multicam-source-count { display: inline-block; margin-top: 4px; color: #b9caff; font-size: 9px; font-weight: 800; }
.multicam-timeline-wrap { position: relative; width: 100%; min-width: 0; }.multicam-timeline-wrap input { position: relative; z-index: 1; width: 100%; }.multicam-pause-markers { position: absolute; z-index: 2; inset: 0 7px; pointer-events: none; }.multicam-pause-marker { position: absolute; top: 50%; width: 3px; height: 20px; border-radius: 3px; background: #f6a23a; box-shadow: 0 0 0 2px rgba(246,162,58,.18); transform: translate(-50%,-50%); pointer-events: auto; }.multicam-pause-marker::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 190px; padding: 5px 7px; border-radius: 7px; color: #fff; background: rgba(7,11,20,.94); box-shadow: 0 5px 18px rgba(0,0,0,.32); font-size: 10px; font-weight: 800; opacity: 0; transform: translate(-50%,4px); transition: .15s; pointer-events: none; }.multicam-pause-marker:hover::after, .multicam-pause-marker:focus::after { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 760px) { .multicam-timeline-wrap { grid-column: 1 / -1; } }

/* UniFi-inspired interface layer -------------------------------------------------
   Presentation only: the existing IDs, data attributes and application state
   classes remain the functional contract with app.js. */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f5f6f8;
  --text: #252a31;
  --muted: #6d7580;
  --line: #e5e8ec;
  --primary: #0672f9;
  --primary-dark: #075fc9;
  --green: #19a974;
  --green-soft: #eaf8f2;
  --red: #d94b54;
  --red-soft: #fff0f1;
  --orange: #e8992d;
  --orange-soft: #fff7e9;
  --shadow: none;
  --radius: 7px;
}

body {
  background: #fff;
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font-weight: 400;
}

/* Desktop application frame: quiet top bar + compact application rail. */
.app-shell {
  display: block;
  min-height: 100vh;
  padding-top: 50px;
}

.sidebar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  width: auto;
  height: 50px;
  padding: 0 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--text);
  background: #f2f3f5;
  border-bottom: 1px solid #e3e6ea;
  box-shadow: none;
}

.sidebar > .brand {
  min-width: 210px;
  height: 100%;
  flex-direction: row;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 4px;
  text-align: left;
}

.sidebar > .brand .brand-logo-frame {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  box-shadow: none;
}

.sidebar > .brand strong {
  color: #262b31;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0;
}

.sidebar > .brand small {
  margin-top: 2px;
  color: #7a818a;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: none;
}

.main-nav {
  position: fixed;
  inset: 50px auto 0 0;
  z-index: 49;
  width: 52px;
  margin: 0;
  padding: 11px 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: visible;
  background: #fff;
  border-right: 1px solid var(--line);
}

.nav-btn {
  position: relative;
  width: 38px;
  min-height: 38px;
  padding: 0;
  justify-content: center;
  gap: 0;
  color: #5d6670;
  border-radius: 5px;
  font-weight: 500;
  box-shadow: none;
}

.nav-btn:hover {
  color: var(--primary);
  background: #f1f6fd;
}

.nav-btn.active {
  color: var(--primary);
  background: #eaf3ff;
  box-shadow: none;
}

.nav-icon {
  width: 21px;
  height: 21px;
  color: currentColor;
  stroke-width: 1.6;
}

.main-nav .nav-btn > span {
  position: absolute;
  z-index: 5;
  left: 47px;
  top: 50%;
  min-width: max-content;
  padding: 6px 9px;
  color: #fff;
  background: rgba(30, 35, 42, .94);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(23, 29, 38, .16);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity .12s ease, transform .12s ease;
}

.main-nav .nav-btn:hover > span,
.main-nav .nav-btn:focus-visible > span {
  opacity: 1;
  transform: translate(0, -50%);
}

.system-card {
  min-width: 0;
  margin: 0 0 0 12px;
  padding: 0;
  gap: 7px;
  color: #4f5863;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.system-card strong {
  font-size: 12px;
  font-weight: 500;
}

.system-card small {
  display: none;
}

.status-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.account-card {
  width: auto;
  max-width: 270px;
  min-height: 38px;
  margin: 0 0 0 auto;
  padding: 4px 5px 4px 8px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.account-card:hover {
  background: #e9ebee;
}

.account-avatar {
  width: 28px;
  height: 28px;
  color: var(--primary);
  background: #e4effd;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.account-card strong {
  color: #31363d;
  font-size: 12px;
  font-weight: 500;
}

.account-card small {
  color: #818892;
  font-size: 10px;
}

.account-card button {
  color: #7b838d;
  font-size: 17px;
}

.sidebar-caption {
  display: none;
}

.workspace {
  min-width: 0;
  margin-left: 52px;
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px 24px 48px;
}

.page-header {
  align-items: center;
  margin-bottom: 18px;
}

.page-header h1 {
  margin: 2px 0 3px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 520;
}

.page-header p {
  max-width: 720px;
  color: var(--muted);
  font-size: 14px;
}

.eyebrow {
  color: #737b85;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: none;
}

.header-metrics {
  min-width: 280px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: none;
}

.header-metrics div {
  padding: 9px 13px;
}

.header-metrics small {
  font-size: 11px;
}

.header-metrics strong {
  font-size: 14px;
  font-weight: 550;
}

/* Surfaces and controls. */
.panel {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: none;
}

.panel-heading {
  margin-bottom: 17px;
}

.panel-heading h2 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -.015em;
}

.step-number {
  width: 27px;
  height: 27px;
  color: var(--primary);
  background: #eaf3ff;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
}

.required-note,
.admin-description,
.section-help,
.field-hint,
.equipment-context {
  color: #7c848e;
  font-weight: 400;
}

.field {
  gap: 5px;
  color: #505862;
  font-size: 13px;
  font-weight: 500;
}

.field input,
.field select,
.field textarea,
.archive-toolbar input,
.archive-toolbar select,
.scan-form input,
.scan-form select {
  min-height: 39px;
  padding: 9px 11px;
  color: var(--text);
  background: #f5f6f8;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.archive-toolbar input:focus,
.archive-toolbar select:focus,
.scan-form input:focus,
.scan-form select:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.primary-action,
.secondary-action {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 520;
  box-shadow: none;
}

.primary-action {
  color: #fff;
  background: var(--primary);
}

.primary-action:hover {
  background: var(--primary-dark);
  filter: none;
  transform: none;
}

.secondary-action {
  color: var(--primary);
  background: #edf4fd;
}

.text-action,
.icon-action {
  font-weight: 520;
}

.count-badge,
.status-chip {
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 550;
}

.operator-layout,
.operator-steps {
  max-width: 900px;
}

.operator-steps {
  margin-bottom: 10px;
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.operator-steps div {
  min-height: 40px;
  padding: 7px 10px;
  color: #7b838d;
  background: #fafbfc;
  border: 0;
  border-radius: 0;
  font-size: 12px;
}

.operator-steps span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 550;
}

.operator-steps .current {
  color: var(--primary);
  background: #f1f7ff;
  border: 0;
}

.advanced-fields,
.camera-readiness,
.incident-editor,
.active-section,
.settings-warning,
.access-address-card,
.tls-progress,
.ozon-access-note,
.playback-note {
  border-radius: 5px;
  box-shadow: none;
}

.advanced-fields {
  background: #fafbfc;
}

.advanced-fields > summary,
.materials-block > summary {
  font-size: 12px;
  font-weight: 520;
}

.camera-readiness {
  min-height: 52px;
  padding: 10px 12px;
}

.readiness-icon,
.readiness-spinner,
.detail-icon,
.operation-icon {
  border-radius: 5px;
}

.recording-head {
  padding-bottom: 14px;
}

.recording-clock {
  font-size: 24px;
}

.record-controls {
  padding: 14px 0;
}

.record-controls button,
.marker-btn,
.scan-form button {
  border-radius: 4px;
  font-weight: 520;
}

.active-section {
  padding: 14px;
}

.marker-btn {
  background: #f7f8fa;
}

/* Archive follows the light table language used by Protect Cases. */
#incidents-page > .panel {
  padding: 0;
  border: 0;
}

.archive-toolbar {
  padding: 0 0 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.search-box,
.archive-filters > summary {
  min-height: 39px;
  background: #f5f6f8;
  border-color: transparent;
  border-radius: 4px;
}

.archive-filters > summary {
  font-weight: 500;
}

.archive-filters > div {
  top: 45px;
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(30, 38, 50, .12);
}

.incident-list {
  gap: 0;
}

.incident-row {
  padding: 11px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: background .12s ease;
}

.incident-row:hover {
  background: #f8fafc;
  border-color: var(--line);
  box-shadow: none;
}

.operation-icon {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.multicam-list-action,
.delete-action,
.preview-action {
  border-radius: 4px;
  font-weight: 520;
}

/* Equipment, users and settings use a contextual-column rhythm. */
.equipment-guide {
  padding: 10px 13px;
  background: #f8f9fb;
  border-radius: 5px;
}

.equipment-guide > div > span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-weight: 550;
}

.equipment-guide strong {
  font-weight: 520;
}

.zone-card,
.camera-card,
.user-item,
.setting-item,
.equipment-editor,
.equipment-editor > summary {
  background: #fff;
  border-radius: 5px;
  box-shadow: none;
}

.zone-card.selected {
  background: #f1f7ff;
  border-color: #8cbcf7;
  box-shadow: none;
}

.zone-title strong,
.camera-card h3,
.user-item strong,
.setting-item strong {
  font-weight: 550;
}

.camera-card {
  padding: 12px;
}

.camera-card h3 {
  margin-top: 9px;
}

.camera-actions {
  margin-top: 10px;
  padding-top: 8px;
}

.admin-editor > summary,
.equipment-editor > summary strong {
  font-weight: 520;
}

.equipment-editor > summary {
  padding: 10px 11px;
  background: #f8fafc;
  border-style: solid;
  border-color: var(--line);
}

.equipment-editor > summary .editor-plus {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 16px;
}

.toggle {
  font-weight: 450;
}

.toggle span {
  width: 31px;
  height: 18px;
}

.toggle span::after {
  width: 12px;
  height: 12px;
}

.toggle input:checked + span::after {
  transform: translateX(13px);
}

.access-address-card {
  padding: 12px 14px;
  background: #f4f8fd;
  border-color: #dce9f8;
}

.access-address-card strong {
  color: var(--primary);
  font-size: 17px;
  font-weight: 520;
}

.secret-note,
.empty-settings-hint {
  border-radius: 4px;
}

/* Video remains visually dominant; chrome becomes quieter. */
.preview-dialog {
  border-radius: 7px;
  box-shadow: 0 22px 65px rgba(14, 21, 31, .3);
}

.preview-head {
  padding: 14px 16px 12px;
}

.preview-head h2 {
  font-size: 19px;
  font-weight: 520;
}

.dialog-close {
  width: 31px;
  height: 31px;
  color: #737b85;
  background: #f1f2f4;
  border-radius: 4px;
}

.video-player-footer {
  min-height: 48px;
}

.multicam-dialog,
.multicam-tile,
.multicam-controls,
.multicam-label {
  border-radius: 5px;
}

/* Login mirrors the calm two-pane UniFi OS composition. */
.auth-screen {
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(360px, 40%) minmax(0, 60%);
  place-items: stretch;
  background: #f3f4f6;
}

.auth-screen::after {
  content: "АРБИТР\A Система видеофиксации";
  grid-column: 2;
  grid-row: 1;
  padding: 0 40px 15vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #2e343c;
  background: #f3f4f6 url('/assets/arbiter-logo-final.png') center 39% / 190px auto no-repeat;
  background-blend-mode: multiply;
  white-space: pre;
  text-align: center;
  font-size: 24px;
  line-height: 1.55;
  letter-spacing: .01em;
}

.nav-btn:focus {
  outline: none;
}

.nav-btn:focus-visible {
  outline: 2px solid rgba(6, 114, 249, .45);
  outline-offset: 1px;
}

.auth-card {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: clamp(42px, 8vw, 70px) clamp(42px, 6vw, 66px);
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.auth-brand {
  max-width: 300px;
  margin-bottom: 38px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

.auth-brand .brand-logo-frame {
  width: 64px;
  height: 64px;
  border-radius: 7px;
  box-shadow: none;
}

.auth-brand strong {
  font-size: 22px;
  font-weight: 550;
  letter-spacing: .01em;
}

.auth-brand small {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .025em;
  text-transform: none;
}

.auth-card h1 {
  margin: 4px 0 5px;
  font-size: 23px;
  font-weight: 520;
  letter-spacing: -.02em;
}

.auth-card p {
  margin-bottom: 25px;
  font-size: 13px;
}

.auth-form {
  max-width: 300px;
  gap: 18px;
}

.auth-card-login {
  width: 100%;
  margin-top: 10px;
}

.access-card-login-dialog {
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #273241;
  border-radius: 18px;
  background: #070c13;
  color: #f8fafc;
}

.access-card-login-dialog::backdrop {
  background: rgba(4, 9, 16, .78);
  backdrop-filter: blur(8px);
}

.access-card-login-shell header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  background: #0d1521;
}

.access-card-login-shell header div {
  display: grid;
  gap: 4px;
}

.access-card-login-shell header strong { font-size: 18px; }
.access-card-login-shell header small,
.access-card-login-feedback small,
#access-card-login-wait small { color: #9aa8ba; }

.access-card-login-shell header button {
  width: 44px;
  height: 44px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #18212d;
  color: #f8fafc;
  font-size: 28px;
}

.access-card-login-stage {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: #02060b;
}

#access-card-login-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.access-card-login-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58vw, 230px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(2, 6, 11, .25);
}

#access-card-login-wait {
  position: absolute;
  inset: auto 16px 16px;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(10, 17, 27, .82);
  text-align: center;
}

#access-card-login-wait i {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: access-card-spin 1s linear infinite;
}

@keyframes access-card-spin {
  to { transform: rotate(360deg); }
}

.access-card-login-feedback {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: #0d1521;
}

.access-card-login-feedback.success strong { color: #5ee0aa; }
.access-card-login-feedback.error strong { color: #ff8f9b; }

@media (max-width: 520px) {
  .access-card-login-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .access-card-login-shell {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .access-card-login-stage { min-height: 0; }
}

.auth-form .field {
  gap: 3px;
  font-size: 11px;
}

.auth-form .field input {
  min-height: 35px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d7dce2;
  border-radius: 0;
}

.auth-form .field input:focus {
  border-color: var(--primary);
  box-shadow: none;
}

.auth-form .primary-action {
  min-height: 36px;
  margin-top: 7px;
}

@media (max-width: 1100px) and (min-width: 761px) {
  main {
    padding: 20px 18px 44px;
  }

  .equipment-layout {
    grid-template-columns: minmax(260px, .75fr) minmax(420px, 1.25fr);
    gap: 14px;
  }

  .system-settings-layout {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .camera-grid,
  .admin-section .camera-grid,
  .user-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    background: #f7f8fa;
  }

  .app-shell {
    display: block;
    padding-top: 0;
  }

  .sidebar {
    display: none;
  }

  .workspace {
    margin-left: 0;
  }

  .mobile-header {
    color: var(--text);
    background: rgba(247, 248, 250, .96);
    border-bottom: 1px solid var(--line);
  }

  .mobile-account {
    color: #727a84;
  }

  main {
    padding: 16px 11px 28px;
  }

  .page-header h1 {
    font-size: 25px;
  }

  .page-header p {
    font-size: 14px;
  }

  .panel {
    padding: 14px;
    border-radius: 6px;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 46px;
    font-size: 18px;
  }

  .primary-action {
    min-height: 48px;
  }

  .mobile-nav {
    background: rgba(255, 255, 255, .97);
  }

  .mobile-nav .nav-btn {
    border-radius: 4px;
  }

  .auth-screen {
    display: block;
    padding: 0;
    background: #fff;
  }

  .auth-screen::after {
    display: none;
  }

  .auth-card {
    min-height: 100vh;
    padding: 36px 24px;
    border-radius: 0;
  }

  .auth-brand {
    margin-bottom: 32px;
  }

  .auth-form {
    max-width: none;
  }

  .archive-toolbar {
    padding-bottom: 10px;
  }

  .incident-row {
    padding: 11px 4px;
  }

  .system-settings-layout {
    grid-template-columns: 1fr;
  }
}

/* UniFi refinement and color themes -------------------------------------------
   Theme state is resolved by theme.js before this stylesheet is painted. */
:root,
html[data-theme="light"] {
  --ui-bg: #f4f5f7;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-soft: #f6f7f9;
  --ui-hover: #eef1f4;
  --ui-active: #e6f1ff;
  --ui-text: #1f2328;
  --ui-text-secondary: #5c6670;
  --ui-text-subtle: #69737e;
  --ui-border: #dfe3e7;
  --ui-border-strong: #c8cfd6;
  --accent-text: #0066d6;
  --accent-solid: #0066d6;
  --accent-solid-hover: #0058bd;
  --accent-soft: #e6f1ff;
  --focus-ring: rgba(0, 102, 214, .32);
  --control-bg: #f3f5f7;
  --control-hover: #e9edf1;
  --scrim: rgba(15, 20, 27, .70);
  --success-text: #11734f;
  --success-solid: #11734f;
  --success-soft: #eaf8f2;
  --warning-text: #875900;
  --warning-solid: #875900;
  --warning-soft: #fff5df;
  --danger-text: #b4232c;
  --danger-solid: #b4232c;
  --danger-soft: #fff0f1;
  --violet-text: #5b3fb2;
  --violet-soft: #f0edff;
  --topbar-bg: #f1f2f4;
  --rail-bg: #ffffff;
  --video-bg: #05070a;
  --video-surface: rgba(13, 17, 23, .92);
  --video-control: rgba(255, 255, 255, .10);
  --video-control-hover: rgba(255, 255, 255, .16);
  --video-text: #f5f7fa;
  --video-muted: #b6bec9;
  --video-border: rgba(255, 255, 255, .12);
  --video-accent: #69b1ff;
  --video-pause: #f2b64b;

  /* Compatibility aliases used by the original functional components. */
  --bg: var(--ui-bg);
  --surface: var(--ui-surface);
  --surface-soft: var(--ui-surface-soft);
  --text: var(--ui-text);
  --muted: var(--ui-text-secondary);
  --line: var(--ui-border);
  --primary: var(--accent-text);
  --primary-dark: var(--accent-solid-hover);
  --green: var(--success-text);
  --green-soft: var(--success-soft);
  --red: var(--danger-text);
  --red-soft: var(--danger-soft);
  --orange: var(--warning-text);
  --orange-soft: var(--warning-soft);
}

html[data-theme="dark"] {
  --ui-bg: #111317;
  --ui-surface: #111317;
  --ui-surface-elevated: #111317;
  --ui-surface-soft: #111317;
  --ui-hover: #191c20;
  --ui-active: #11365e;
  --ui-text: #f3f5f7;
  --ui-text-secondary: #c5cbd2;
  --ui-text-subtle: #aeb6c0;
  --ui-border: #30353b;
  --ui-border-strong: #474d55;
  --accent-text: #69b1ff;
  --accent-solid: #0066d6;
  --accent-solid-hover: #1679df;
  --accent-soft: #11365e;
  --focus-ring: rgba(105, 177, 255, .48);
  --control-bg: #111317;
  --control-hover: #191c20;
  --scrim: rgba(0, 0, 0, .78);
  --success-text: #70d6aa;
  --success-solid: #11734f;
  --success-soft: #153e31;
  --warning-text: #f2c46f;
  --warning-solid: #875900;
  --warning-soft: #4a391d;
  --danger-text: #ff9ea6;
  --danger-solid: #b4232c;
  --danger-soft: #51252a;
  --violet-text: #c7b7ff;
  --violet-soft: #342b5a;
  --topbar-bg: #111317;
  --rail-bg: #111317;
}

html,
body,
button,
input,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  color: var(--ui-text);
  background: var(--ui-surface);
  font-size: 16px;
  font-weight: 400;
}

h1,
h2,
h3,
strong {
  font-weight: 600;
}

button,
input,
select,
textarea,
summary {
  font-weight: 400;
}

:where(button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Three-state theme switcher. */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 2px;
  color: var(--ui-text-secondary);
  background: var(--control-bg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.theme-switcher button {
  width: 26px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
}

.theme-switcher button:hover {
  color: var(--ui-text);
  background: var(--control-hover);
}

.theme-switcher button.active {
  color: var(--accent-text);
  background: var(--ui-surface-elevated);
  box-shadow: 0 0 0 1px var(--ui-border);
}

/* Login: one quiet form pane and one balanced brand pane. */
.auth-screen {
  position: relative;
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(370px, 38%) minmax(0, 62%);
  place-items: stretch;
  color: var(--ui-text);
  background: var(--ui-bg);
}

.auth-screen::after {
  content: none;
  display: none;
}

.auth-card {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: 64px clamp(42px, 6vw, 72px);
  display: grid;
  align-content: center;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 0;
  border-right: 1px solid var(--ui-border);
  border-radius: 0;
  box-shadow: none;
}

.auth-card > div {
  width: min(300px, 100%);
  margin-inline: auto;
}

.auth-card h1 {
  margin: 0 0 6px;
  color: var(--ui-text);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.025em;
}

.auth-card p {
  margin: 0 0 28px;
  color: var(--ui-text-secondary);
  font-size: 14px;
}

.auth-form {
  max-width: none;
  gap: 19px;
}

.auth-form .field {
  gap: 4px;
  color: var(--ui-text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.auth-form .field input {
  min-height: 37px;
  padding: 9px 0;
  color: var(--ui-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ui-border-strong);
  border-radius: 0;
}

.auth-form .field input:focus {
  background: transparent;
  border-color: var(--accent-text);
  box-shadow: none;
}

.auth-form .primary-action {
  min-height: 37px;
  margin-top: 8px;
}

.auth-showcase {
  grid-column: 2;
  grid-row: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ui-bg);
}

.auth-showcase-inner {
  width: min(330px, 72%);
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
  transform: translateY(-1.5vh);
}

.auth-showcase-mark {
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(14, 31, 53, .08);
  border-radius: 18px;
}

.auth-showcase-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.auth-showcase-copy {
  display: grid;
  gap: 5px;
}

.auth-showcase-copy strong {
  color: var(--ui-text);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .075em;
}

.auth-showcase-copy span {
  color: var(--ui-text-secondary);
  font-size: 14px;
  letter-spacing: .025em;
}

.auth-product-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--ui-text-subtle);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .01em;
}

.auth-product-meta b { color: inherit; font: inherit; }
.auth-product-meta i { font-style: normal; opacity: .55; }

.auth-theme-switcher {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 16px;
}

/* Application shell and navigation. */
.sidebar {
  color: var(--ui-text);
  background: var(--topbar-bg);
  border-color: var(--ui-border);
}

.sidebar > .brand {
  min-width: 205px;
  margin-left: -13px;
  padding: 0 17px;
  border-right: 1px solid var(--ui-border);
}

.sidebar > .brand strong,
.brand.compact strong {
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .035em;
}

.brand.compact .native-app-version {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 5px;
  color: var(--ui-text-subtle);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  font-size: 9px;
  line-height: 1;
  font-weight: 550;
  letter-spacing: .02em;
  text-transform: none;
}

.sidebar > .brand small {
  margin-top: 2px;
  color: var(--ui-text-subtle);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.main-nav {
  background: var(--rail-bg);
  border-color: var(--ui-border);
}

.nav-btn {
  color: var(--ui-text-secondary);
}

.nav-btn:hover {
  color: var(--accent-text);
  background: var(--ui-hover);
}

.nav-btn.active {
  color: var(--accent-text);
  background: var(--ui-active);
}

.main-nav .nav-btn > span {
  color: var(--video-text);
  background: var(--video-surface);
  box-shadow: none;
}

.system-card {
  color: var(--ui-text-secondary);
}

.app-theme-switcher {
  margin-left: auto;
  margin-right: 8px;
}

.account-card {
  margin-left: 0;
  color: var(--ui-text);
}

.account-card:hover {
  background: var(--ui-hover);
}

.account-avatar {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.account-card strong {
  color: var(--ui-text);
  font-weight: 500;
}

.account-card small,
.account-card button {
  color: var(--ui-text-subtle);
}

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Context header: every application section starts with the same calm strip. */
main {
  padding: 22px 24px 48px;
  color: var(--ui-text);
  background: var(--ui-surface);
}

.page-header {
  min-height: 72px;
  margin: -22px -24px 20px;
  padding: 14px 24px 13px;
  align-items: center;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.page-header h1 {
  margin: 2px 0 2px;
  color: var(--ui-text);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.018em;
}

.page-header p {
  color: var(--ui-text-secondary);
  font-size: 13px;
}

.eyebrow {
  color: var(--ui-text-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .025em;
}

.header-metrics {
  min-width: 260px;
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
}

.header-metrics div + div {
  border-color: var(--ui-border);
}

.header-metrics small {
  color: var(--ui-text-secondary);
}

.header-metrics strong {
  color: var(--ui-text);
  font-weight: 600;
}

/* Flat UniFi-like inner sections. */
.panel {
  padding: 17px;
  color: var(--ui-text);
  background: var(--ui-surface-elevated);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  box-shadow: none;
}

.panel-heading {
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.panel-heading h2 {
  color: var(--ui-text);
  font-size: 17px;
  font-weight: 600;
}

.step-number {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.required-note,
.admin-description,
.section-help,
.field-hint,
.equipment-context,
.muted {
  color: var(--ui-text-secondary);
}

.field {
  color: var(--ui-text-secondary);
  font-weight: 500;
}

.field input,
.field select,
.field textarea,
.archive-toolbar input,
.archive-toolbar select,
.scan-form input,
.scan-form select {
  color: var(--ui-text);
  background: var(--control-bg);
  border-color: transparent;
}

.field input[readonly] {
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.archive-toolbar input:focus,
.archive-toolbar select:focus,
.scan-form input:focus,
.scan-form select:focus {
  color: var(--ui-text);
  background: var(--ui-surface-elevated);
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

.primary-action,
.scan-form button,
.editor-plus,
.ozon-access-note > span,
.multicam-control-action.primary {
  color: #fff;
  background: var(--accent-solid);
}

.primary-action:hover,
.scan-form button:hover,
.multicam-control-action.primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
}

.secondary-action,
.multicam-list-action,
.preview-action {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.text-action,
.camera-count-chip,
.admin-editor > summary,
.equipment-editor > summary i,
.materials-block > summary,
.marker-more summary {
  color: var(--accent-text);
}

.delete-action {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.count-badge,
.status-chip {
  font-weight: 600;
}

.count-badge {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.status-chip {
  color: var(--ui-text-secondary);
  background: var(--ui-hover);
}

.status-chip.ready {
  color: var(--success-text);
  background: var(--success-soft);
}

.status-chip.recording,
.status-chip.failed,
.status-chip.cancelled {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.status-chip.paused,
.status-chip.processing,
.status-chip.deleting,
.status-chip.draft {
  color: var(--warning-text);
  background: var(--warning-soft);
}

.status-chip.claim_hold {
  color: var(--violet-text);
  background: var(--violet-soft);
}

.operator-steps {
  background: var(--ui-border);
  border-color: var(--ui-border);
}

.operator-steps div {
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
}

.operator-steps span {
  color: var(--ui-text-secondary);
  background: var(--ui-hover);
}

.operator-steps .current {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.operator-steps .current span {
  color: #fff;
  background: var(--accent-solid);
}

.advanced-fields,
.incident-editor,
.active-section,
.settings-warning,
.access-address-card,
.tls-progress,
.ozon-access-note,
.playback-note,
.equipment-guide,
.equipment-editor,
.equipment-editor > summary,
.empty-settings-hint,
.secret-note {
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
}

.advanced-fields > summary,
.materials-block > summary,
.equipment-editor > summary strong {
  color: var(--ui-text);
  font-weight: 500;
}

.advanced-fields > summary::before,
.materials-block > summary::after {
  color: var(--accent-text);
}

.camera-readiness {
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
}

.camera-readiness.ready {
  background: var(--success-soft);
  border-color: var(--success-text);
}

.camera-readiness.warning,
.camera-readiness.empty {
  background: var(--warning-soft);
  border-color: var(--warning-text);
}

.readiness-icon {
  background: var(--success-solid);
}

.warning .readiness-icon,
.empty .readiness-icon {
  background: var(--warning-solid);
}

.readiness-camera {
  color: var(--ui-text-secondary);
  background: color-mix(in srgb, var(--ui-surface-elevated) 86%, transparent);
}

.readiness-camera i {
  background: var(--success-solid);
}

.readiness-camera.warning i {
  background: var(--danger-solid);
}

.record-start {
  color: #fff;
  background: var(--danger-solid);
}

.record-pause {
  color: var(--warning-text);
  background: var(--warning-soft);
}

.record-stop {
  color: var(--video-text);
  background: #252a31;
}

.action-guidance,
.recording-head p {
  color: var(--ui-text-secondary);
}

.marker-btn {
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
  font-weight: 500;
}

.marker-btn:hover {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-text);
}

.marker-btn.issue {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: var(--danger-text);
}

.detail-item {
  border-color: var(--ui-border);
}

.detail-icon {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.quality {
  color: var(--success-text);
  font-weight: 600;
}

/* Archive is presented as a compact Protect-like case table. */
#incidents-page > .panel {
  background: var(--ui-surface);
}

.archive-toolbar {
  border-color: var(--ui-border);
}

.search-box,
.archive-filters > summary,
.archive-filters > div {
  color: var(--ui-text-secondary);
  background: var(--control-bg);
  border-color: var(--ui-border);
}

.archive-filters > div {
  box-shadow: 0 10px 28px var(--scrim);
}

.incident-row {
  color: var(--ui-text);
  border-color: var(--ui-border);
}

.incident-row:hover {
  background: var(--ui-hover);
  border-color: var(--ui-border);
}

.incident-main small,
.incident-meta,
.incident-counts,
.ozon-access-note small,
.playback-note small {
  color: var(--ui-text-secondary);
}

.operation-icon {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.operation-icon.shipping {
  color: var(--success-text);
  background: var(--success-soft);
}

.operation-icon.return {
  color: var(--warning-text);
  background: var(--warning-soft);
}

.playback-note,
.ozon-access-note {
  padding: 10px 12px;
  border-radius: 5px;
}

.playback-note > span {
  background: var(--success-solid);
}

.playback-note.warning {
  background: var(--warning-soft);
  border-color: var(--warning-text);
}

.playback-note.warning > span {
  background: var(--warning-solid);
}

/* Equipment: contextual list on the left, flat camera rows on the right. */
.equipment-guide {
  background: var(--ui-surface-soft);
}

.equipment-guide > div > span {
  color: #fff;
  background: var(--accent-solid);
}

.equipment-guide > i,
.equipment-guide small {
  color: var(--ui-text-secondary);
}

.zones-section {
  background: var(--ui-surface-soft);
}

.zone-card,
.camera-card,
.user-item,
.setting-item {
  color: var(--ui-text);
  background: var(--ui-surface-elevated);
  border-color: var(--ui-border);
  border-radius: 4px;
}

.zone-card.selected {
  background: var(--ui-active);
  border-color: var(--accent-text);
}

.zone-card:hover {
  border-color: var(--accent-text);
}

.zone-select,
.zone-actions,
.camera-actions {
  color: inherit;
}

.zone-actions {
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
}

.operation-chips > span {
  color: var(--ui-text-secondary);
  background: var(--ui-hover);
  font-weight: 500;
}

.zone-camera-count,
.camera-card dd {
  color: var(--ui-text);
  font-weight: 500;
}

.camera-card p,
.camera-card dt,
.user-item small {
  color: var(--ui-text-secondary);
}

.admin-section .camera-grid,
.user-list {
  gap: 0;
  border-top: 1px solid var(--ui-border);
}

.admin-section .camera-grid {
  grid-template-columns: 1fr;
}

.camera-card,
.user-item {
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
}

.camera-card:hover,
.user-item:hover {
  background: var(--ui-hover);
}

.user-list {
  grid-template-columns: 1fr;
}

.users-panel {
  max-width: 980px;
}

.equipment-editor[open] {
  color: var(--ui-text);
  background: var(--ui-surface-elevated);
  border-color: var(--ui-border);
  box-shadow: none;
}

.equipment-editor[open] > summary {
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
}

/* Settings follow the label/control rhythm of UniFi settings pages. */
.system-settings-layout {
  max-width: 980px;
  grid-template-columns: 1fr;
  gap: 14px;
}

.system-settings-card {
  min-height: 0;
}

.system-settings-form {
  gap: 0;
}

.system-settings-form > .field,
.system-settings-form > .toggle,
.system-settings-form > .dns-credential-fields,
.system-settings-form > .secret-note,
.system-settings-form > .settings-warning,
.system-settings-form > .tls-progress,
.system-settings-form > .network-actions,
.system-settings-form > .primary-action {
  padding-block: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.system-settings-form > .field:last-child,
.system-settings-form > .primary-action:last-child {
  border-bottom: 0;
}

.access-address-card {
  background: var(--accent-soft);
  border-color: var(--ui-border);
}

.access-address-card strong {
  color: var(--accent-text);
  font-weight: 600;
}

.access-address-card span {
  color: var(--ui-text-secondary);
}

.settings-warning {
  color: var(--warning-text);
  background: var(--warning-soft);
  border-color: var(--warning-text);
}

.error-warning {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: var(--danger-text);
}

.certificate-state,
.camera-actions,
.materials-block {
  border-color: var(--ui-border);
}

.tls-progress strong,
.tls-progress b {
  color: var(--accent-text);
}

.tls-progress-spinner {
  border-color: var(--ui-border-strong);
  border-top-color: var(--accent-text);
}

.tls-progress-track {
  background: var(--ui-border);
}

.tls-progress-track i {
  background: var(--accent-solid);
}

.certificate-state > span {
  background: var(--ui-text-subtle);
  box-shadow: 0 0 0 5px var(--ui-hover);
}

.certificate-state > span.active {
  background: var(--success-solid);
  box-shadow: 0 0 0 5px var(--success-soft);
}

.certificate-state > span.working,
.certificate-state > span.configured {
  background: var(--warning-solid);
  box-shadow: 0 0 0 5px var(--warning-soft);
}

.certificate-state > span.error {
  background: var(--danger-solid);
  box-shadow: 0 0 0 5px var(--danger-soft);
}

.tls-badge.active,
.ready-badge {
  color: var(--success-text);
  background: var(--success-soft);
}

.tls-badge.configured,
.tls-badge.working {
  color: var(--warning-text);
  background: var(--warning-soft);
}

.tls-badge.error {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.tls-badge.inactive {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.toggle {
  color: var(--ui-text-secondary);
  font-weight: 500;
}

.toggle span {
  background: var(--ui-border-strong);
}

.toggle input:checked + span {
  background: var(--accent-solid);
}

.nav-btn:focus-visible {
  outline-color: var(--focus-ring);
}

/* Dialog chrome follows the selected theme; video remains deliberately dark. */
.preview-dialog {
  color: var(--ui-text);
  background: var(--ui-surface-elevated);
  border: 1px solid var(--ui-border);
}

.preview-dialog::backdrop {
  background: var(--scrim);
}

.preview-head p,
.video-player-footer {
  color: var(--ui-text-secondary);
}

.dialog-close {
  color: var(--ui-text-secondary);
  background: var(--control-bg);
}

.dialog-close:hover {
  color: var(--ui-text);
  background: var(--control-hover);
}

.preview-stage,
.video-player-stage {
  color: var(--video-text);
  background: var(--video-bg);
}

.multicam-dialog {
  color: var(--video-text);
  background: var(--video-bg);
  border-color: var(--video-border);
}

.multicam-head {
  background: var(--video-surface);
}

.multicam-window-action,
.multicam-control-action {
  color: var(--video-text);
  background: var(--video-control);
}

.multicam-window-action:hover,
.multicam-control-action:hover:not(:disabled) {
  background: var(--video-control-hover);
}

.multicam-pause-marker {
  background: var(--video-pause);
}

.toast {
  color: var(--video-text);
  background: var(--video-surface);
  border: 1px solid var(--video-border);
  border-radius: 5px;
  box-shadow: none;
  font-weight: 500;
}

.toast.success {
  background: var(--success-solid);
}

.toast.warning {
  background: #9a6500;
}

.toast.error {
  background: var(--danger-solid);
}

@media (max-width: 760px) {
  body {
    background: var(--ui-surface);
  }

  .auth-screen {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    background: var(--ui-surface);
  }

  .auth-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 18px 24px 42px;
    align-content: start;
    border-right: 0;
  }

  .auth-card > div {
    width: min(340px, 100%);
  }

  .auth-showcase {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    padding: 62px 24px 22px;
    display: grid;
    place-items: center;
    overflow: visible;
    background: var(--ui-surface);
  }

  .auth-showcase-inner {
    width: min(340px, 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    text-align: left;
    transform: none;
  }

  .auth-showcase-mark {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 12px;
  }

  .auth-showcase-copy {
    min-width: 0;
    gap: 3px;
  }

  .auth-showcase-copy strong {
    font-size: 20px;
  }

  .auth-showcase-copy span {
    font-size: 13px;
  }

  .auth-product-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    font-size: 9px;
  }

  .auth-theme-switcher {
    top: 18px;
    right: 18px;
    height: 38px;
    padding: 2px;
    touch-action: manipulation;
  }

  .auth-theme-switcher button {
    width: 32px;
    height: 32px;
  }

  .mobile-header {
    color: var(--ui-text);
    background: color-mix(in srgb, var(--topbar-bg) 94%, transparent);
    border-color: var(--ui-border);
  }

  .mobile-account {
    color: var(--ui-text-secondary);
  }

  .mobile-account span {
    color: var(--accent-text);
    background: var(--accent-soft);
  }

  .mobile-theme-switcher {
    transform: scale(.92);
    transform-origin: right center;
  }

  main {
    padding: 16px 11px 28px;
  }

  .page-header {
    min-height: 0;
    margin: -16px -11px 16px;
    padding: 14px 15px 13px;
  }

  .page-header h1 {
    font-size: 22px;
  }

  .panel {
    padding: 14px;
    border-radius: 5px;
  }

  .mobile-nav {
    background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
    border-color: var(--ui-border);
  }

  .mobile-nav .nav-btn {
    color: var(--ui-text-secondary);
  }

  .mobile-nav .nav-btn.active {
    color: var(--accent-text);
    background: var(--ui-active);
  }

  .system-settings-form > .field,
  .system-settings-form > .toggle,
  .system-settings-form > .dns-credential-fields,
  .system-settings-form > .secret-note,
  .system-settings-form > .settings-warning,
  .system-settings-form > .tls-progress,
  .system-settings-form > .network-actions,
  .system-settings-form > .primary-action {
    padding-block: 10px;
  }
}

@media (max-width: 380px) {
  .auth-card {
    padding-inline: 20px;
  }

  .auth-showcase {
    padding-inline: 20px;
  }

  .auth-showcase-mark {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
}

/* Archive filters and independent recording/review states. */
.archive-filters > summary {
  min-width: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
}

.archive-filter-icon {
  color: var(--ui-text-subtle);
  font-size: 14px;
}

.archive-filters[open] > summary {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: transparent;
}

#archive-filter-count {
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 6px;
  color: #fff;
  background: var(--accent-solid);
  font-size: 10px;
  font-weight: 700;
}

#archive-filter-count[hidden] {
  display: none;
}

.archive-filters > .archive-filter-panel {
  width: min(520px, calc(100vw - 110px));
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .09);
}

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

.archive-filter-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--ui-text-secondary);
  font-size: 11px;
  font-weight: 550;
}

.archive-filter-grid select,
.archive-filter-grid input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  color: var(--ui-text);
  background: var(--control-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
}

.archive-filter-grid select:focus,
.archive-filter-grid input:focus {
  background: var(--ui-surface);
  border-color: var(--accent-solid);
  outline: none;
}

.archive-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border);
}

.archive-filter-actions button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  color: var(--ui-text-secondary);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
}

.archive-filter-actions button:hover {
  background: var(--ui-hover);
}

#archive-filter-close {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.incident-table-head,
.incident-row {
  grid-template-columns: minmax(190px, 1.35fr) minmax(130px, .9fr) 92px 82px 92px 118px 54px;
}

.incident-record-status,
.incident-review-status {
  justify-self: start;
}

.incident-review-status.none {
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
}

@media (max-width: 760px) {
  .archive-filters > .archive-filter-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 7px;
    border-radius: 6px;
    box-shadow: none;
  }

  body.role-operator .incident-row,
  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "main record actions"
      "zone review actions"
      "duration review actions";
  }

  .incident-main { grid-area: main; }
  .incident-zone { grid-area: zone; }
  .incident-duration { grid-area: duration; }
  .incident-record-status { grid-area: record; }
  .incident-review-status { grid-area: review; }
  .incident-actions { grid-area: actions; }
}

@media (max-width: 520px) {
  .archive-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.role-operator .incident-row,
  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main record"
      "zone review"
      "duration duration"
      "actions actions";
  }
}

/* Paused operation action: compact, readable and aligned with the site controls. */
.archive-resume-action {
  min-width: 108px;
  min-height: 34px;
  gap: 6px;
  padding: 0 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.archive-resume-action svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: currentColor;
}

.archive-resume-action b {
  overflow: visible;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.archive-resume-action:hover {
  color: #fff;
  background: var(--accent-solid);
}

.archive-resume-action:active {
  transform: scale(.97);
}

.archive-resume-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (min-width: 1240px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(220px, 1.35fr) minmax(145px, .9fr) 96px 82px 92px 118px 138px;
  }
}

@media (min-width: 861px) and (max-width: 1239px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(190px, 1.35fr) minmax(120px, .85fr) 80px 88px 112px 132px;
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(170px, 1fr) 76px 84px 104px 126px;
  }
}

@media (max-width: 520px) {
  .archive-resume-action {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
}

/*
 * iOS PWA uses the full screen because viewport-fit=cover is enabled.
 * Keep the application header below the status bar without adding an
 * unnecessary gap to an ordinary browser tab.
 */
@media (max-width: 760px) and (display-mode: standalone) {
  .mobile-header {
    box-sizing: border-box;
    height: calc(56px + env(safe-area-inset-top));
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  main {
    min-height: calc(
      100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
  }
}

/* Shared-operation controller and participant presence. Keep this block
   intentionally compact for 480×800 ATOL terminals. */
.operation-participants {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.operation-participants-summary {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.operation-participants-summary span:first-child,
.operation-participants-summary strong,
.operation-participants-summary small {
  display: block;
  min-width: 0;
}

.operation-participants-summary strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-participants-summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.operation-participants-list {
  border-top: 1px solid var(--line);
}

.operation-participant {
  min-height: 44px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
}

.operation-participant + .operation-participant {
  border-top: 1px solid var(--line);
}

.operation-participant-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.operation-participant.is-online .operation-participant-dot {
  background: #16a36f;
}

.operation-participant.has-pending .operation-participant-dot {
  background: #d99516;
}

.operation-participant-copy {
  min-width: 0;
}

.operation-participant-copy strong,
.operation-participant-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-participant-copy strong {
  font-size: 13px;
}

.operation-participant-copy small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.operation-transfer-action {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 11px;
  font-weight: 800;
}

.compact-confirm-dialog {
  width: min(320px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 18px 55px rgba(4, 10, 24, .28);
}

.compact-confirm-dialog::backdrop {
  background: rgba(5, 10, 20, .52);
  backdrop-filter: blur(3px);
}

.compact-confirm-dialog form {
  padding: 16px;
}

.compact-confirm-dialog strong {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.3;
}

.compact-confirm-dialog form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.compact-confirm-dialog button {
  min-height: 40px;
}

@media (max-width: 520px) {
  .operation-participants {
    margin: 8px 0;
  }

  .operation-participants-summary {
    min-height: 44px;
    padding: 7px 10px;
  }

  .operation-participant {
    min-height: 40px;
    padding: 7px 10px;
  }

  .operation-participants-summary strong {
    font-size: 13px;
  }
}

/* Hybrid player: Media Chrome provides the single-stream controls while
   Arbiter keeps ownership of the operation timeline and camera sync. */
.arbitr-media-controller {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: #000;
  --media-background-color: #000;
  --media-primary-color: #f7fbff;
  --media-secondary-color: rgba(12, 27, 45, .52);
  --media-text-color: #f7fbff;
  --media-icon-color: #f7fbff;
  --media-control-background: transparent;
  --media-control-hover-background: rgba(255, 255, 255, .10);
  --media-focus-box-shadow: inset 0 0 0 2px rgba(87, 166, 255, .9);
  --media-font-family: var(--font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --media-control-height: 38px;
  --media-button-padding: 8px;
  --media-range-track-height: 4px;
  --media-range-track-background: rgba(210, 226, 242, .24);
  --media-range-bar-color: #58a7ff;
  --media-range-thumb-width: 13px;
  --media-range-thumb-height: 13px;
  --media-range-thumb-background: #fff;
  --media-control-transition-in: opacity .18s ease;
  --media-control-transition-out: opacity .42s ease;
  --media-loading-indicator-icon-height: 48px;
}

.arbitr-media-controller:not(:defined) {
  position: relative;
}

.arbitr-media-controller:not(:defined) .arbitr-media-controls,
.arbitr-media-controller:not(:defined) media-loading-indicator {
  display: none;
}

.arbitr-media-controller video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.arbitr-media-controls {
  display: none;
  width: calc(100% - 24px);
  min-height: 54px;
  margin: 0 12px 12px;
  padding: 5px 8px;
  box-sizing: border-box;
  align-items: center;
  gap: 2px;
  border-radius: 17px;
  background: rgba(13, 29, 48, .52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 12px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  --media-control-bar-display: flex;
}

.media-chrome-ready .arbitr-media-controls {
  display: flex;
}

.media-chrome-ready .arbitr-media-controller media-loading-indicator {
  display: inline-block;
}

.arbitr-media-controls media-time-range {
  min-width: 90px;
  flex: 1 1 auto;
}

.arbitr-media-controls media-volume-range {
  width: 72px;
  flex: 0 1 72px;
}

.arbitr-media-controls media-time-display {
  flex: 0 0 auto;
  white-space: nowrap;
  --media-control-padding: 7px 5px;
  --media-font-size: 11px;
}

.arbitr-media-action {
  position: relative;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 7px;
  color: #f7fbff;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.arbitr-media-action:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

.arbitr-media-action:active {
  transform: scale(.90);
}

.arbitr-media-action:focus-visible {
  outline: 2px solid rgba(87, 166, 255, .9);
  outline-offset: -2px;
}

.arbitr-media-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-chrome-ready .video-player-stage > #video-player-loading:not([hidden]) {
  z-index: 5;
  width: 100%;
  height: 100%;
  align-content: center;
  background: #02050a;
}

.multicam-controls {
  --media-control-bar-display: grid;
}

@media (max-width: 760px) {
  .arbitr-media-controls {
    width: calc(100% - 12px);
    min-height: 50px;
    margin: 0 6px 6px;
    padding: 4px 5px;
    gap: 0;
    border-radius: 15px;
    --media-control-height: 36px;
    --media-button-padding: 7px;
  }

  .arbitr-media-controls media-volume-range {
    display: none;
  }

  .arbitr-media-controls media-time-display {
    --media-control-padding: 5px 3px;
    --media-font-size: 10px;
  }

  .arbitr-media-action {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

@media (max-width: 480px) {
  .arbitr-media-controls media-time-display,
  .arbitr-media-controls .arbitr-media-volume {
    display: none;
  }

  .arbitr-media-controls media-time-range {
    min-width: 56px;
  }
}

/* Right drawer template ------------------------------------------------------
   One visual contract for users, cameras, zones, operations, disputes and
   settings: title -> status -> property groups -> symmetric actions. */
.entity-drawer {
  width: min(440px, calc(100vw - 52px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.entity-drawer-header {
  min-height: 54px;
  padding-inline: 16px 12px;
}

.entity-drawer-header strong {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}

.entity-drawer-body {
  padding: 12px 14px 20px;
}

.entity-overview {
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
}

.entity-overview > div { min-width: 0; }

.entity-overview small,
.entity-overview strong {
  display: block;
}

.entity-overview small {
  color: var(--ui-text-subtle);
  font-size: 11px;
  line-height: 1.25;
}

.entity-overview strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--green);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-overview strong.inactive { color: var(--ui-text-secondary); }

.entity-overview + .entity-property-group,
.entity-overview + .camera-drawer-preview,
.entity-overview + .operation-evidence-group {
  margin-top: 10px;
}

.entity-property-group,
.entity-drawer-form-card,
.operation-review-card,
.operation-download-card,
.drawer-event-log {
  border-radius: 8px;
}

.entity-property-group {
  padding: 6px 13px;
}

.entity-property-group-title {
  padding: 9px 0 7px;
  color: var(--ui-text-subtle);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .035em;
}

.entity-property-row {
  min-height: 42px;
  padding: 9px 0;
  gap: 14px;
  font-size: 13px;
  line-height: 1.35;
}

.entity-property-row > span:first-child {
  flex: 0 0 40%;
  color: var(--ui-text-secondary);
}

.entity-property-row strong {
  max-width: 60%;
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.entity-drawer-form-heading {
  min-height: 62px;
  padding: 11px 13px;
}

.entity-drawer-form-heading p {
  margin: 0;
  color: var(--ui-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

#entity-drawer-form-host .settings-form {
  gap: 13px;
  padding: 13px;
}

#entity-drawer-form-host .field,
#entity-drawer-form-host .toggle {
  font-size: 12px;
  line-height: 1.35;
}

#entity-drawer-form-host .field input,
#entity-drawer-form-host .field select,
#entity-drawer-form-host .field textarea {
  font-size: 13px;
}

#entity-drawer-form-host .user-form-actions,
#entity-drawer-form-host .network-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#entity-drawer-form-host .user-form-actions button,
#entity-drawer-form-host .network-actions button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#entity-drawer-form-host .user-form-actions[data-action-count="1"],
#entity-drawer-form-host .network-actions[data-action-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.entity-drawer-actions {
  min-height: 62px;
  padding: 10px 14px;
  display: grid;
  gap: 8px;
}

.entity-drawer-actions[data-action-count="0"] { display: none; }
.entity-drawer-actions[data-action-count="1"] { grid-template-columns: minmax(0, 1fr); }
.entity-drawer-actions[data-action-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entity-drawer-actions[data-action-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entity-drawer-actions[data-action-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.entity-drawer-actions button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-drawer .entity-drawer-actions .primary-action {
  order: initial;
  margin-right: 0;
}

.operation-review-card {
  gap: 11px;
  padding: 13px;
}

.operation-review-head > strong,
.operation-dispute-summary > strong,
.operation-download-head strong,
.drawer-event-log > summary {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.operation-dispute-summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operation-dispute-summary .secondary-action {
  min-width: 96px;
}

.review-lock-note,
.empty-settings-hint,
.review-download-permission {
  font-size: 12px;
  line-height: 1.4;
}

.review-link-row strong,
.incident-event-row strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 550;
}

.review-link-row small,
.incident-event-row small,
.operation-download-head small,
.operation-download-camera small {
  font-size: 11px;
  line-height: 1.4;
}

.drawer-event-log > summary {
  min-height: 48px;
}

.camera-drawer-preview {
  border-radius: 8px;
}

@media (max-width: 760px) {
  .entity-drawer {
    width: 100vw;
    max-width: 100vw;
  }

}

@media (max-width: 430px) {

  .entity-drawer-actions[data-action-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entity-drawer-actions[data-action-count="3"] button:first-child {
    grid-column: 1 / -1;
  }

  .entity-property-row > span:first-child { flex-basis: 38%; }
  .entity-property-row strong { max-width: 62%; }
}

/* Archive: filters live in their table columns instead of a detached panel. */
.archive-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.archive-filter-reset {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  color: var(--accent-text);
  background: var(--ui-surface);
  font-size: 13px;
  font-weight: 600;
}

.archive-filter-reset:disabled {
  color: var(--ui-text-subtle);
  background: var(--ui-surface-soft);
  cursor: default;
  opacity: .72;
}

#archive-filter-count {
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 11px;
}

.incident-table-head.archive-column-filters {
  min-height: 58px;
  align-items: stretch;
  padding-block: 7px;
  overflow: visible;
}

.archive-column-filter,
.archive-date-filter {
  min-width: 0;
  margin: 0;
}

.archive-column-filter {
  display: grid;
  align-content: center;
  gap: 2px;
}

.archive-column-filter > span,
.archive-date-filter summary > span {
  color: var(--ui-text-subtle);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}

.archive-column-filter select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 4px;
  color: var(--ui-text-secondary);
  background-color: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.archive-column-filter select:hover,
.archive-column-filter select:focus,
.archive-column-filter.active select {
  color: var(--accent-text);
  background-color: var(--accent-soft);
  outline: none;
}

.archive-column-filter.active > span,
.archive-date-filter.active summary > span {
  color: var(--accent-text);
}

.archive-date-filter {
  position: relative;
  align-self: stretch;
}

.archive-date-filter > summary {
  height: 100%;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0 6px;
  border-radius: 5px;
  list-style: none;
  cursor: pointer;
}

.archive-date-filter > summary::-webkit-details-marker {
  display: none;
}

.archive-date-filter summary > b {
  overflow: hidden;
  color: var(--ui-text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-date-filter[open] > summary,
.archive-date-filter.active > summary {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.archive-date-filter[open] summary > b,
.archive-date-filter.active summary > b {
  color: var(--accent-text);
}

.archive-date-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}

.archive-date-popover label {
  display: grid;
  gap: 5px;
  color: var(--ui-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.archive-date-popover input {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  color: var(--ui-text);
  background: var(--control-bg);
}

#archive-date-clear {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 600;
}

.archive-video-heading,
.archive-actions-heading {
  align-self: center;
}

@media (min-width: 861px) and (max-width: 1239px) {
  .archive-column-filters > .archive-date-filter {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .archive-column-filters > :nth-child(2),
  .archive-column-filters > .archive-date-filter {
    display: none;
  }
}

@media (max-width: 760px) {
  .archive-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .archive-filter-reset > span {
    display: none;
  }

  .archive-filter-reset {
    width: 42px;
    padding: 0;
  }

  .archive-filter-reset::before {
    content: '↺';
    font-size: 18px;
  }

  .incident-table-head.archive-column-filters {
    min-height: 62px;
    display: flex !important;
    gap: 7px;
    padding: 7px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .incident-table-head.archive-column-filters[hidden] {
    display: none !important;
  }

  .archive-column-filters::-webkit-scrollbar {
    display: none;
  }

  .archive-column-filter,
  .archive-date-filter {
    min-width: 132px;
    flex: 0 0 132px;
    padding: 3px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface-soft);
  }

  .archive-column-filters > .archive-date-filter {
    display: block;
  }

  .archive-video-heading,
  .archive-actions-heading {
    display: none;
  }

  .archive-date-filter > summary {
    padding: 0;
  }

  .archive-date-popover {
    position: fixed;
    top: 150px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Global readability scale: navigation pictograms are 10% larger. */
.main-nav .nav-icon,
.mobile-nav .nav-icon {
  width: 23px;
  height: 23px;
}

/* Wide workspace -----------------------------------------------------------
   High-resolution displays use the available canvas through denser layout,
   not oversized text or endlessly stretched form controls. */
@media (min-width: 1600px) {
  main {
    --desktop-gutter: clamp(32px, 2.35vw, 64px);
    padding-inline: var(--desktop-gutter);
  }

  .page-header {
    margin-inline: calc(-1 * var(--desktop-gutter));
    padding-inline: var(--desktop-gutter);
  }

  .page > .panel,
  .page > .operator-layout,
  .page > .operator-steps,
  .page > .active-card,
  .page > .admin-layout,
  .page > .system-settings-layout,
  .users-panel,
  .devices-panel,
  .ozon-archive-panel,
  .system-settings-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* Operator: four concise data columns and a dedicated readiness row. */
  #operator-page .incident-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }

  #operator-page .incident-form > .field:not(.full-width) {
    grid-column: span 3;
  }

  #operator-page .incident-form > #zone-camera-readiness {
    grid-column: span 8;
    min-height: 74px;
    align-content: center;
  }

  #operator-page .incident-form > .field.full-width {
    grid-column: span 4;
  }

  #operator-page .incident-form > .advanced-fields,
  #operator-page .incident-form > .primary-action {
    grid-column: 1 / -1;
  }

  #operator-page .advanced-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #operator-page .advanced-grid > .field.full-width {
    grid-column: 1 / -1;
  }

  #operator-page .active-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #operator-page .active-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Archive: proportional arbitr columns instead of large side margins. */
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns:
      minmax(300px, 1.55fr)
      minmax(220px, 1fr)
      minmax(150px, .72fr)
      112px
      126px
      154px
      140px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  /* Protect-like inventories scale their descriptive columns fluidly. */
  .camera-device-head,
  .camera-device-row {
    grid-template-columns:
      minmax(320px, 1.65fr)
      minmax(230px, 1.1fr)
      minmax(180px, .85fr)
      minmax(180px, .85fr)
      110px
      22px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  .zone-device-head,
  .zone-device-row {
    grid-template-columns:
      minmax(320px, 1.45fr)
      minmax(300px, 1.25fr)
      110px
      110px
      22px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  .user-table-head,
  .unifi-user-list .user-item {
    grid-template-columns:
      minmax(320px, 1.5fr)
      minmax(220px, 1fr)
      minmax(220px, 1fr)
      120px
      22px;
    column-gap: clamp(14px, 1.2vw, 24px);
  }

  /* Network settings become a real dashboard: state at left, setup at right. */
  #network-settings-section {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0 clamp(22px, 2vw, 38px);
    align-items: start;
  }

  #network-settings-section > .panel-heading {
    grid-column: 1 / -1;
  }

  #network-settings-section > .access-address-card {
    grid-column: 1 / span 4;
    grid-row: 2;
    margin-bottom: 0;
  }

  #network-settings-section > #network-settings-form {
    grid-column: 5 / -1;
    grid-row: 2 / span 2;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }

  #network-settings-form > .field.full-width {
    grid-column: span 4;
  }

  #network-settings-form > .dns-credential-fields,
  #network-settings-form > .secret-note,
  #network-settings-form > .tls-progress,
  #network-settings-form > .settings-warning,
  #network-settings-form > .network-actions {
    grid-column: 1 / -1;
  }

  #network-settings-section > .certificate-state {
    grid-column: 1 / span 4;
    grid-row: 3;
  }

  /* Storage policy remains readable while using the full page width. */
  #storage-settings-section > #system-settings-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }

  #system-settings-form > .toggle.full-width {
    grid-column: span 6;
  }

  #system-settings-form > .field {
    grid-column: span 3;
  }

  #system-settings-form > .settings-warning.full-width {
    grid-column: span 8;
  }

  #system-settings-form > .primary-action.full-width {
    grid-column: span 4;
    align-self: center;
  }
}

@media (min-width: 2400px) {
  main {
    --desktop-gutter: clamp(48px, 2.6vw, 76px);
  }

  .panel {
    padding: clamp(18px, 1vw, 26px);
  }

  .archive-toolbar,
  .device-list-toolbar,
  .entity-list-toolbar {
    min-height: 62px;
  }
}

/* Universal leading action reflects the operation state. */
.incident-state-action {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--accent-text);
  background: var(--accent-soft);
  transition: color .14s ease, background .14s ease, transform .14s ease;
}

.incident-state-action svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.incident-state-action:not(:disabled):hover {
  color: #fff;
  background: var(--accent-solid);
}

.incident-state-action:not(:disabled):active { transform: scale(.94); }
.incident-state-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.incident-state-action:disabled { cursor: default; opacity: 1; }

.incident-state-action.paused {
  color: #9a6208;
  background: #fff1d6;
}

.incident-state-action.paused:not(:disabled):hover {
  color: #fff;
  background: #c9830b;
}

.incident-state-action.recording {
  color: #c52f3a;
  background: #fde9eb;
}

.incident-state-action.recording:not(:disabled):hover {
  color: #fff;
  background: #c52f3a;
}

.incident-state-action.complete {
  color: var(--success-text);
  background: var(--success-soft);
}

.incident-state-action.complete svg,
.incident-state-action.failed svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.incident-state-action.failed {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.incident-state-action.failed:not(:disabled):hover {
  color: #fff;
  background: var(--danger-solid, #c23943);
}

.incident-state-action.processing,
.incident-state-action.deleting {
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
}

.state-action-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@media (min-width: 1240px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(220px, 1.35fr) minmax(145px, .9fr) 96px 82px 92px 118px 54px;
  }
}

@media (min-width: 861px) and (max-width: 1239px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(190px, 1.35fr) minmax(120px, .85fr) 80px 88px 112px 52px;
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(180px, 1fr) 78px 86px 108px 50px;
  }
}

@media (max-width: 520px) {
  body.role-operator .incident-row,
  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "main record actions"
      "zone review actions"
      "duration review actions";
  }
}

/* Scoped OZON review links and safe account removal. */
.review-access-panel {
  min-height: 280px;
  display: grid;
  place-items: center;
}

.role-ozon-manager .main-nav,
.role-ozon-manager .mobile-nav,
.role-ozon-manager .system-card {
  display: none;
}

/* The scoped OZON archive uses the complete browser width. The application
 * rail is hidden for this role, so its reserved 52 px must disappear too. */
body.role-ozon-manager .workspace {
  width: 100%;
  margin-left: 0;
}

body.role-ozon-manager #incidents-page {
  width: 100%;
  min-height: calc(100dvh - 120px);
}

body.role-ozon-manager #incidents-page > .panel {
  width: 100%;
  min-height: calc(100dvh - 170px);
}

.review-link-state {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface-elevated);
}

.review-link-icon {
  width: 46px;
  height: 46px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: var(--primary-soft, #eaf2ff);
  font-size: 22px;
  font-weight: 800;
}

.review-link-state strong,
.review-link-state small,
.review-operation-main strong,
.review-operation-main small {
  display: block;
}

.review-link-state strong,
.review-operation-main strong {
  font-size: 16px;
}

.review-link-state small,
.review-operation-main small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.review-operation-card {
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.review-operation-card > #review-operation-summary,
.review-operation-card .operation-summary-card {
  width: 100%;
}

.review-manager-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.review-download-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.review-download-format {
  min-width: min(100%, 310px);
  display: inline-flex;
  align-items: stretch;
}

.review-download-format select {
  min-width: 78px;
  padding: 0 24px 0 10px;
  color: var(--ui-text);
  background-color: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.review-download-format .review-download-action {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 620px) {
  .review-manager-actions > * { flex: 1 1 100%; }
  .review-download-format { width: 100%; }
}

.review-operation-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-state-badge,
.review-status-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--violet-text);
  background: var(--violet-soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.review-status-chip.completed {
  color: var(--green);
  background: var(--green-soft);
}

.operation-status-stack {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.operation-review-card {
  display: grid;
  gap: 13px;
  padding: 15px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface-elevated);
}

.operation-review-head,
.operation-review-form,
.review-link-row,
.incident-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.operation-review-head {
  justify-content: space-between;
}

.operation-review-head strong,
.operation-review-head small,
.review-link-row strong,
.review-link-row small,
.incident-event-row strong,
.incident-event-row small {
  display: block;
}

.operation-review-head small,
.review-link-row small,
.incident-event-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.operation-review-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px auto;
}

.operation-review-form select,
.operation-review-form input,
.review-created-link input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 10px;
  color: var(--ui-text);
  background: var(--control-bg);
  padding: 0 10px;
}

.review-created-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  color: var(--success-text);
  background: var(--success-soft);
}

.review-link-list,
.incident-event-list {
  display: grid;
  gap: 7px;
}

.drawer-event-log {
  margin-top: 10px;
  overflow: hidden;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.drawer-event-log > summary {
  min-height: 46px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.drawer-event-log > summary::-webkit-details-marker { display: none; }

.drawer-event-log > summary b {
  min-width: 24px;
  padding: 3px 7px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.drawer-event-log[open] > summary {
  border-bottom: 1px solid var(--ui-border);
}

.drawer-event-log > div {
  padding: 0 13px 4px;
}

.review-link-row,
.incident-event-row {
  min-width: 0;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.review-link-row > span,
.incident-event-row > span {
  min-width: 0;
}

.review-link-row button {
  min-height: 32px;
  padding-inline: 10px;
  font-size: 11px;
}

.review-lock-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--violet-text);
  background: var(--violet-soft);
  font-size: 11px;
  font-weight: 700;
}

.confirmation-dialog {
  width: min(460px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--surface, #fff);
  box-shadow: 0 24px 80px rgb(0 0 0 / 24%);
}

.confirmation-dialog::backdrop {
  background: rgb(15 23 42 / 38%);
  backdrop-filter: blur(4px);
}

.confirmation-dialog form {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.confirmation-dialog-head,
.confirmation-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.confirmation-dialog-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.confirmation-dialog-copy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.confirmation-dialog-actions button {
  min-height: 42px;
  flex: 1;
}

@media (max-width: 760px) {
  .review-operation-card,
  .operation-review-form {
    grid-template-columns: 1fr;
  }

  .review-operation-card {
    align-items: stretch;
  }

  .review-operation-card .primary-action {
    width: 100%;
  }

  .operation-review-head {
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  .mobile-theme-switcher {
    gap: 1px;
  }

  .theme-switcher button {
    width: 24px;
  }

  .mobile-account small {
    display: none;
  }
}

/* Nested settings navigation -------------------------------------------------- */
body.settings-context-open .workspace {
  margin-left: 272px;
}

.settings-context-panel {
  position: fixed;
  z-index: 42;
  inset: 50px auto 0 52px;
  width: 220px;
  padding: 12px 9px;
  overflow-y: auto;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  border-right: 1px solid var(--ui-border);
}

.settings-context-heading {
  padding: 5px 9px 13px;
  border-bottom: 1px solid var(--ui-border);
}

.settings-context-heading strong,
.settings-context-heading small {
  display: block;
}

.settings-context-heading strong {
  font-size: 15px;
  font-weight: 600;
}

.settings-context-heading small {
  margin-top: 2px;
  color: var(--ui-text-secondary);
  font-size: 11px;
}

.settings-context-nav {
  display: grid;
  gap: 3px;
  padding-top: 9px;
}

.settings-context-btn {
  width: 100%;
  min-height: 48px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--ui-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
}

.settings-context-btn:hover {
  color: var(--ui-text);
  background: var(--ui-hover);
}

.settings-context-btn.active {
  color: var(--accent-text);
  background: var(--ui-active);
}

.settings-context-btn span,
.settings-context-btn strong,
.settings-context-btn small {
  min-width: 0;
  display: block;
}

.settings-context-btn strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-context-btn small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ui-text-subtle);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-context-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-context-icon {
  justify-self: center;
}

@media (max-width: 760px) {
  body.settings-context-open .workspace {
    margin-left: 0;
  }

  .workspace {
    padding-bottom: 60px;
  }

  .settings-context-panel {
    position: sticky;
    z-index: 25;
    inset: 60px auto auto;
    width: auto;
    height: auto;
    padding: 7px 9px;
    overflow-x: auto;
    overflow-y: hidden;
    background: color-mix(in srgb, var(--ui-surface-soft) 96%, transparent);
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
    backdrop-filter: blur(12px);
  }

  .settings-context-heading {
    display: none;
  }

  .settings-context-nav {
    width: max-content;
    display: flex;
    gap: 5px;
    padding: 0;
  }

  .settings-context-btn {
    width: auto;
    min-width: 118px;
    min-height: 43px;
    grid-template-columns: 22px auto;
    padding: 6px 9px;
  }

  .settings-context-btn small {
    display: none;
  }

  .settings-context-icon {
    width: 18px;
    height: 18px;
  }

  .mobile-nav {
    height: calc(56px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5px 8px env(safe-area-inset-bottom);
  }

  .mobile-nav .nav-btn {
    width: 100%;
    min-height: 44px;
    flex-direction: row;
    padding: 0;
  }

  .mobile-nav .nav-icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.6;
  }

  .mobile-nav .nav-btn > span {
    display: none;
  }

  body.role-ozon-manager .mobile-nav {
    grid-template-columns: 1fr;
  }
}

/* Keep entity-table rules above the legacy card styles in the cascade. */
.panel.unifi-list-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
}

.users-panel .unifi-user-list {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

@media (max-width: 760px) {
  .users-panel .unifi-user-list {
    display: block;
  }
}

/* Protect-like camera and zone inventory ------------------------------------ */
.devices-panel {
  max-width: 1160px;
}

.device-view-tabs {
  min-height: 50px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.device-view-tabs button {
  min-height: 36px;
  padding: 0 14px;
  color: var(--ui-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
}

.device-view-tabs button:hover {
  color: var(--ui-text);
  background: var(--ui-hover);
}

.device-view-tabs button.active {
  color: var(--accent-text);
  background: var(--ui-active);
}

.device-list-toolbar {
  min-height: 58px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ui-surface-soft);
  border-bottom: 1px solid var(--ui-border);
}

.device-search {
  min-width: 170px;
  max-width: 290px;
}

.device-filter {
  min-width: 132px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 9px;
  color: var(--ui-text-subtle);
  background: var(--control-bg);
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 10px;
}

.device-filter:focus-within {
  border-color: var(--accent-text);
}

.device-filter select {
  min-width: 0;
  height: 32px;
  padding: 0 20px 0 0;
  color: var(--ui-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.device-list-toolbar .count-badge {
  margin-left: auto;
}

.device-list-toolbar .secondary-action {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}

.device-table-head,
.device-row {
  display: grid;
  align-items: center;
  gap: 12px;
}

.camera-device-head,
.camera-device-row {
  grid-template-columns: minmax(210px, 1.5fr) minmax(130px, 1fr) minmax(105px, .8fr) minmax(100px, .72fr) 90px 18px;
}

.zone-device-head,
.zone-device-row {
  grid-template-columns: minmax(210px, 1.4fr) minmax(190px, 1.2fr) 72px 90px 18px;
}

.device-table-head {
  min-height: 38px;
  padding: 0 14px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  font-size: 10px;
  font-weight: 600;
}

.device-row {
  width: 100%;
  min-height: 53px;
  padding: 6px 14px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  text-align: left;
}

.device-row:last-child {
  border-bottom: 0;
}

.device-row:hover,
.device-row:focus-visible {
  background: var(--ui-hover);
  outline: 0;
}

.device-row.inactive {
  color: var(--ui-text-secondary);
}

.device-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.device-identity strong,
.device-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-identity strong {
  font-size: 12px;
  font-weight: 550;
}

.device-identity small {
  margin-top: 2px;
  color: var(--ui-text-subtle);
  font-size: 10px;
}

.device-type-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.device-type-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.device-type-icon.camera {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.device-cell {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-state {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--danger-text);
  background: var(--danger-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.device-state.online {
  color: var(--success-text);
  background: var(--success-soft);
}

.device-row-arrow {
  color: var(--ui-text-subtle);
  font-size: 19px;
  text-align: right;
}

.entity-form-home {
  display: none;
}

.camera-drawer-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--video-text);
  background: var(--video-bg);
  border: 1px solid var(--video-border);
  border-radius: 6px;
}

.camera-drawer-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.camera-drawer-preview > div {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
}

.camera-drawer-preview strong,
.camera-drawer-preview small {
  display: block;
}

.camera-drawer-preview strong {
  font-size: 12px;
}

.camera-drawer-preview small {
  color: #929db2;
  font-size: 10px;
}

.camera-preview-play-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.camera-preview-play-icon::after {
  content: "";
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.camera-inline-preview-action {
  min-height: 30px;
  margin-top: 4px;
  padding: 0 12px;
  color: #d9e5ff;
  background: rgba(80, 112, 179, .28);
  border: 1px solid rgba(167, 190, 240, .22);
  border-radius: 5px;
  font-size: 11px;
}

.camera-inline-preview-action:hover {
  background: rgba(91, 128, 206, .38);
}

.camera-inline-preview-stop {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  padding: 0 10px;
  color: #fff;
  background: rgba(13, 18, 28, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .device-list-toolbar {
    flex-wrap: wrap;
  }

  .device-search {
    max-width: none;
    flex-basis: 100%;
  }

  .device-list-toolbar .count-badge {
    margin-left: auto;
  }

  .camera-device-head,
  .camera-device-row {
    grid-template-columns: minmax(0, 1fr) 90px 18px;
  }

  .camera-device-head span:nth-child(2),
  .camera-device-head span:nth-child(3),
  .camera-device-head span:nth-child(4),
  .camera-device-row .device-cell {
    display: none;
  }

  .zone-device-head,
  .zone-device-row {
    grid-template-columns: minmax(0, 1fr) 70px 90px 18px;
  }

  .zone-device-head span:nth-child(2),
  .zone-device-row .device-cell.operations {
    display: none;
  }
}

@media (max-width: 760px) {
  .device-view-tabs {
    overflow-x: auto;
  }

  .device-view-tabs button {
    flex: 1 0 auto;
  }

  .device-list-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-search,
  .device-list-toolbar .secondary-action {
    grid-column: 1 / -1;
    max-width: none;
  }

  .device-filter {
    min-width: 0;
  }

  .device-list-toolbar .count-badge {
    display: none;
  }

  .device-list-toolbar .secondary-action {
    width: 100%;
  }

  .device-table-head {
    display: none;
  }

  .camera-device-row,
  .zone-device-row {
    grid-template-columns: minmax(0, 1fr) 84px 16px;
    gap: 8px;
    padding: 7px 11px;
  }

  .zone-device-row .device-cell {
    display: none;
  }

  .entity-drawer-form-card {
    border: 0;
  }
}

/* Compact application headers: the page itself should carry the context. */
.page-header {
  min-height: 52px;
  margin: -22px -24px 14px;
  padding: 8px 18px;
  align-items: center;
}

.page-header h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}

.page-header .eyebrow,
.page-header p {
  display: none;
}

.page-header .secondary-action {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 11px;
}

.page-header .header-metrics {
  min-width: 230px;
  border-radius: 5px;
  box-shadow: none;
}

.page-header .header-metrics div {
  padding: 7px 12px;
}

.page-header .header-metrics small {
  font-size: 10px;
}

.page-header .header-metrics strong {
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .page-header {
    min-height: 46px;
    margin: -16px -11px 12px;
    padding: 8px 13px;
  }

  .page-header h1 {
    font-size: 18px;
  }
}

/* Archive browser support belongs to the section header, not its content. */
.archive-page-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.archive-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.browser-compatibility {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.browser-compatibility i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--ui-text-subtle);
}

.browser-compatibility strong {
  font-weight: 600;
}

.browser-compatibility small {
  color: inherit;
  font-size: inherit;
}

.browser-compatibility small::before {
  content: "· ";
}

.browser-compatibility.compatible {
  color: var(--success-text);
  background: var(--success-soft);
  border-color: transparent;
}

.browser-compatibility.compatible i {
  background: var(--success-solid);
}

.browser-compatibility.limited {
  color: var(--warning-text);
  background: var(--warning-soft);
  border-color: transparent;
}

.browser-compatibility.limited i {
  background: var(--warning-solid);
}

.browser-compatibility.unsupported {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: transparent;
}

.browser-compatibility.unsupported i {
  background: var(--danger-solid);
}

.archive-page-header #refresh b {
  font: inherit;
  font-weight: 500;
}

@media (max-width: 760px) {
  .archive-page-header {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .archive-page-header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .archive-header-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .browser-compatibility {
    min-height: 30px;
    padding: 0 8px;
  }

  .browser-compatibility small {
    display: none;
  }

  .archive-page-header #refresh {
    width: 32px;
    min-width: 32px;
    padding: 0;
  }

  .archive-page-header #refresh b {
    display: none;
  }
}

/* Responsive audit ----------------------------------------------------------
   A final, shared scale layer keeps legacy screens and newer UniFi-style
   screens on the same rhythm without changing their functional contracts. */
html {
  width: 100%;
  min-width: 0;
}

.operation-time-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 2px;
  padding: 8px 11px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 5px;
}

.operation-time-strip div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.operation-time-strip small {
  font-size: 11px;
  line-height: 1.2;
}

.operation-time-strip strong {
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}

.operation-time-strip > span {
  color: var(--ui-text-subtle);
  font-size: 14px;
}

@media (max-width: 520px) {
  .operation-time-strip {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .operation-time-strip strong {
    font-size: 12px;
  }
}

body,
button,
input,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.workspace,
main,
.page,
.panel,
.operator-layout,
.active-grid,
.system-settings-layout,
.settings-form,
.incident-form,
.device-list-toolbar,
.entity-list-toolbar {
  min-width: 0;
}

main {
  width: 100%;
  padding: 22px clamp(16px, 2.15vw, 30px) 48px;
}

.page-header {
  margin-inline: clamp(-30px, -2.15vw, -16px);
  padding-inline: clamp(16px, 2.15vw, 30px);
}

.field,
.toggle,
.section-help,
.entity-property-row,
.settings-context-btn strong,
.device-cell,
.device-state,
.user-cell,
.user-state {
  font-size: 12px;
}

.field input,
.field select,
.field textarea,
.search-box input,
.entity-search input,
.device-filter select {
  font-size: 13px;
}

.panel-heading h2,
.active-section h3,
.active-details h3 {
  font-size: 15px;
}

.device-table-head,
.user-table-head,
.entity-property-group-title,
.settings-context-btn small,
.device-identity small,
.camera-drawer-preview small {
  font-size: 11px;
}

.device-identity strong,
.camera-drawer-preview strong,
.entity-drawer-header strong,
.entity-hero strong,
.entity-drawer-form-heading strong {
  font-size: 13px;
}

.primary-action,
.secondary-action,
.delete-action,
.multicam-list-action {
  font-size: 12px;
}

.users-panel,
.devices-panel,
.system-settings-layout,
.operator-layout,
.operator-steps {
  width: 100%;
}

.users-panel {
  max-width: 1180px;
}

.devices-panel {
  max-width: 1280px;
}

.system-settings-layout {
  max-width: 1040px;
}

/* Archive list: readable table on desktop, compact cards on narrow screens. */
.incident-table-head,
.incident-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.45fr) minmax(150px, 1fr) 104px 96px 92px 62px;
  align-items: center;
  gap: 12px;
}

.incident-table-head {
  min-height: 37px;
  padding: 0 11px;
  color: var(--ui-text-secondary);
  border-bottom: 1px solid var(--ui-border);
  font-size: 11px;
  font-weight: 600;
}

.incident-table-head[hidden] {
  display: none;
}

.incident-row {
  min-height: 58px;
  padding: 7px 11px;
  cursor: pointer;
}

.incident-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.incident-main strong {
  font-size: 13px;
  font-weight: 600;
}

.incident-main small,
.incident-duration small {
  margin-top: 2px;
  color: var(--ui-text-subtle);
  font-size: 11px;
}

.incident-zone,
.incident-date,
.incident-duration {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-duration strong,
.incident-duration small {
  display: block;
}

.incident-duration strong {
  color: var(--ui-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

.incident-actions {
  gap: 5px;
}

.incident-actions > span {
  color: var(--ui-text-subtle);
  font-size: 20px;
}

.incident-play-action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 0;
  border-radius: 5px;
  font-size: 13px;
}

.incident-play-action:hover:not(:disabled) {
  color: #fff;
  background: var(--accent-solid);
}

.incident-play-action:disabled {
  color: var(--ui-text-subtle);
  background: var(--ui-surface-soft);
  opacity: .55;
}

.incident-main .archive-leading-play {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

/* Operation properties: arbitr summary first, administrative data second. */
.entity-drawer.operation-drawer {
  width: min(460px, calc(100vw - 52px));
}

.operation-summary-card {
  overflow: hidden;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.operation-summary-head {
  min-height: 76px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--ui-border);
}

.operation-summary-head > div {
  min-width: 0;
}

.operation-summary-head strong,
.operation-summary-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-summary-head strong {
  font-size: 15px;
  font-weight: 600;
}

.operation-summary-head small {
  margin-top: 3px;
  color: var(--ui-text-secondary);
  font-size: 11px;
}

.operation-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--ui-border);
}

.operation-facts > div {
  min-width: 0;
  padding: 11px 10px;
  border-right: 1px solid var(--ui-border);
}

.operation-facts > div:last-child {
  border-right: 0;
}

.operation-facts small,
.operation-facts strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-facts small {
  color: var(--ui-text-subtle);
  font-size: 10px;
}

.operation-facts strong {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.operation-recording-map {
  padding: 12px 14px 14px;
}

.operation-recording-map > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.operation-recording-map strong {
  font-size: 12px;
  font-weight: 550;
}

.operation-recording-map small {
  color: var(--ui-text-subtle);
  font-size: 11px;
}

.operation-mini-timeline {
  position: relative;
  height: 8px;
  margin-top: 10px;
  background: var(--ui-surface-soft);
  border-radius: 999px;
}

.operation-mini-timeline > span {
  position: absolute;
  inset: 0;
  background: var(--accent-solid);
  border-radius: inherit;
}

.operation-mini-timeline i {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 3px;
  height: 14px;
  background: var(--video-pause);
  border: 2px solid var(--ui-surface);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.operation-summary-card + .entity-property-group {
  margin-top: 10px;
}

.operation-drawer .entity-drawer-actions .primary-action {
  order: -1;
  margin-right: auto;
}

/* Playback workspace: camera choice + synchronized grid/focus + timeline. */
.multicam-dialog[open] {
  width: min(1240px, calc(100vw - 32px));
  height: min(840px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 8px;
}

.multicam-head {
  position: static;
  min-width: 0;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--video-border);
}

.multicam-head > div:first-child {
  min-width: 0;
}

.multicam-head h2,
.multicam-head p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multicam-head h2 {
  font-size: 16px;
}

.multicam-head p {
  font-size: 11px;
}

.multicam-window-actions,
.multicam-layout-switch {
  display: flex;
  align-items: center;
  gap: 4px;
}

.multicam-layout-switch {
  padding-right: 5px;
  border-right: 1px solid var(--video-border);
}

.multicam-window-action {
  min-height: 32px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
}

.multicam-window-action.active {
  color: var(--video-accent);
  background: var(--video-control-hover);
}

.multicam-camera-strip {
  min-width: 0;
  min-height: 54px;
  padding: 7px 10px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  background: var(--video-surface);
  border-bottom: 1px solid var(--video-border);
  scrollbar-width: thin;
}

.multicam-camera-strip:empty {
  display: none;
}

.multicam-camera-strip button {
  min-width: 150px;
  padding: 5px 9px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--video-muted);
  background: var(--video-control);
  border: 1px solid transparent;
  border-radius: 5px;
  text-align: left;
}

.multicam-camera-strip button:hover,
.multicam-camera-strip button.active {
  color: var(--video-text);
  background: var(--video-control-hover);
}

.multicam-camera-strip button.active {
  border-color: var(--video-accent);
}

.multicam-camera-strip i {
  width: 7px;
  height: 7px;
  background: var(--success-solid);
  border-radius: 50%;
}

.multicam-camera-strip strong,
.multicam-camera-strip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multicam-camera-strip strong {
  font-size: 11px;
  font-weight: 550;
}

.multicam-camera-strip small {
  margin-top: 2px;
  color: var(--video-muted);
  font-size: 10px;
}

.multicam-grid {
  min-height: 0;
  height: 100%;
  padding: 6px;
  grid-auto-rows: minmax(0, 1fr);
  overflow: hidden;
  background: var(--video-bg);
}

.multicam-tile {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 5px;
}

.multicam-coverage-warning {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 50%;
  display: none;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  border: 1px solid rgba(255, 184, 77, .38);
  border-radius: 8px;
  color: #ffd083;
  background: rgba(41, 27, 8, .86);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.multicam-tile.camera-unavailable .multicam-coverage-warning {
  display: block;
}

.multicam-dialog[data-camera-count="1"] .multicam-grid {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.multicam-dialog[data-camera-count="2"] .multicam-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.multicam-dialog[data-camera-count="3"] .multicam-grid,
.multicam-dialog[data-camera-count="4"] .multicam-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.multicam-dialog[data-camera-count="5"] .multicam-grid,
.multicam-dialog[data-camera-count="6"] .multicam-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.multicam-dialog[data-layout="focus"] .multicam-grid {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.multicam-dialog[data-layout="focus"] .multicam-tile:not(.selected) {
  display: none;
}

.multicam-controls {
  position: static;
  width: auto;
  min-height: 58px;
  margin: 0;
  padding: 8px 10px;
  grid-template-columns: auto auto auto auto 104px minmax(160px, 1fr);
  border: 0;
  border-top: 1px solid var(--video-border);
  border-radius: 0;
  box-shadow: none;
}

.multicam-control-action {
  width: 34px;
  height: 34px;
  border-radius: 5px;
}

.multicam-control-action.jump {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.multicam-controls strong {
  min-width: 0;
  font-size: 12px;
  text-align: center;
}

.multicam-timeline-wrap input {
  height: 26px;
}

.multicam-dialog:fullscreen,
.multicam-dialog.is-expanded {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 0;
  border-radius: 0;
}

.multicam-dialog[open]:fullscreen,
.multicam-dialog[open].is-expanded {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
}

@media (max-width: 1100px) {
  .incident-table-head,
  .incident-row {
    grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 1fr) 92px 86px 62px;
  }

  .incident-table-head span:nth-child(3),
  .incident-date {
    display: none;
  }

  .device-list-toolbar,
  .entity-list-toolbar {
    gap: 7px;
  }
}

@media (max-width: 860px) and (min-width: 761px) {
  body.settings-context-open .workspace {
    margin-left: 228px;
  }

  .settings-context-panel {
    width: 176px;
  }

  .settings-context-btn {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .settings-context-btn small {
    display: none;
  }

  .incident-table-head,
  .incident-row {
    grid-template-columns: minmax(180px, 1fr) 88px 82px 62px;
  }

  .incident-table-head span:nth-child(2),
  .incident-zone {
    display: none;
  }
}

@media (max-width: 760px) {
  main {
    padding: 16px 11px calc(74px + env(safe-area-inset-bottom));
  }

  .page-header {
    margin-inline: -11px;
  }

  .field,
  .toggle,
  .section-help,
  .entity-property-row,
  .device-cell,
  .device-state,
  .user-cell,
  .user-state {
    font-size: 13px;
  }

  .entity-search input,
  .device-filter select,
  .search-box input {
    font-size: 18px;
  }

  .incident-table-head {
    display: none;
  }

  .incident-row {
    min-height: 70px;
    padding: 9px 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "main status actions"
      "zone duration actions";
    gap: 5px 9px;
  }

  .incident-main {
    grid-area: main;
  }

  .incident-zone {
    grid-area: zone;
    display: block;
    font-size: 11px;
  }

  .incident-date {
    display: none;
  }

  .incident-duration {
    grid-area: duration;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .incident-duration small {
    margin-top: 0;
  }

  .incident-row > .status-chip {
    grid-area: status;
  }

  .incident-actions {
    grid-area: actions;
    flex-direction: row;
    align-items: center;
  }

  .entity-drawer.operation-drawer {
    width: 100vw;
  }

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

  .operation-facts > div:nth-child(2) {
    border-right: 0;
  }

  .operation-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ui-border);
  }

  .multicam-dialog[open] {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .multicam-head {
    padding: 7px 7px 7px 10px;
  }

  .multicam-layout-switch span,
  .multicam-fullscreen span,
  .multicam-window-action > span {
    display: none;
  }

  .multicam-camera-strip {
    min-height: 50px;
    padding: 6px;
  }

  .multicam-camera-strip button {
    min-width: 132px;
  }

  .multicam-grid {
    padding: 3px;
  }

  .multicam-controls {
    min-height: 82px;
    padding: 7px;
    grid-template-columns: auto auto auto auto minmax(88px, 1fr);
    gap: 5px;
  }

  .multicam-controls strong {
    justify-self: end;
  }

  .multicam-timeline-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .archive-page-header h1 {
    max-width: 94px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .browser-compatibility {
    max-width: 142px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .operation-summary-head {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .operation-summary-head .entity-hero-icon {
    width: 38px;
    height: 38px;
  }

  .operation-summary-head .status-chip {
    grid-column: 2;
    justify-self: start;
  }

  .multicam-window-action {
    width: 31px;
    padding: 0;
    justify-content: center;
  }

  .multicam-layout-switch {
    padding-right: 3px;
  }
}

/* Every application page follows one fluid content grid. */
.page > .panel,
.page > .operator-layout,
.page > .operator-steps,
.page > .active-card,
.page > .system-settings-layout,
.page > .admin-layout,
.users-panel,
.devices-panel,
.ozon-archive-panel,
.system-settings-layout {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

#operator-page .operator-steps {
  margin-bottom: 14px;
}

.archive-resume-action {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: var(--accent-solid);
  font-size: 11px;
  white-space: nowrap;
}

.archive-resume-action b {
  font-size: 11px;
  font-weight: 650;
}

.archive-resume-action:hover {
  background: var(--primary-dark);
}

body.role-operator .incident-table-head,
body.role-operator .incident-row {
  grid-template-columns: minmax(210px, 1.45fr) minmax(150px, 1fr) 104px 96px 92px 112px;
}

@media (max-width: 1100px) {
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 1fr) 92px 86px 106px;
  }
}

@media (max-width: 860px) and (min-width: 761px) {
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(180px, 1fr) 88px 82px 106px;
  }
}

@media (max-width: 760px) {
  body.role-operator .workspace {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  body.role-operator .mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.role-operator .incident-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "zone duration"
      "actions actions";
  }

  body.role-operator .incident-actions {
    width: 100%;
    justify-content: flex-end;
  }

  body.role-operator .archive-resume-action {
    min-width: 116px;
  }
}

@media (max-width: 430px) {
  body.role-operator .archive-page-header h1 {
    max-width: none;
  }
}

/* Responsive contract -------------------------------------------------------
   This final layer intentionally wins over legacy breakpoints above. */
html,
body {
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

.workspace {
  min-width: 0;
  min-height: 100dvh;
}

:where(.page, .panel, .page-header, .operator-layout, .active-card, .active-grid,
  .archive-toolbar, .incident-row, .incident-main, .incident-actions,
  .entity-drawer, .entity-drawer-body, form, label, input, select, textarea, button) {
  min-width: 0;
}

:where(.incident-main strong, .incident-zone, .entity-property-row strong,
  .active-title h2, .page-header h1) {
  overflow-wrap: anywhere;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(190px, 1fr) minmax(90px, .55fr) 82px 78px 106px;
    grid-template-areas: none;
  }

  body.role-operator .incident-row > .incident-main,
  body.role-operator .incident-row > .incident-zone,
  body.role-operator .incident-row > .incident-duration,
  body.role-operator .incident-row > .status-chip,
  body.role-operator .incident-row > .incident-actions {
    grid-area: auto;
  }

  body.role-operator .incident-zone {
    display: block;
  }

  body.role-operator .incident-date {
    display: none;
  }

  body.role-operator .incident-actions {
    width: auto;
  }
}

@media (max-width: 760px) {
  .workspace,
  body.role-operator .workspace {
    min-height: 100dvh;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .mobile-header {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    gap: 8px;
  }

  .mobile-header-actions {
    min-width: 0;
    gap: 6px;
  }

  .mobile-theme-switcher {
    flex: 0 0 auto;
    transform: none;
  }

  .mobile-account {
    flex: 0 0 auto;
    padding: 0;
  }

  main {
    min-height: calc(100dvh - 112px - env(safe-area-inset-bottom));
    padding: 14px 10px calc(24px + env(safe-area-inset-bottom));
  }

  .page-header,
  .archive-page-header {
    min-height: 54px;
    margin: -14px -10px 14px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .page-header > div:first-child,
  .archive-page-header > div:first-child {
    min-width: 0;
  }

  .page-header .eyebrow,
  .page-header p,
  .header-metrics {
    display: none;
  }

  .page-header h1,
  .archive-page-header h1,
  body.role-operator .archive-page-header h1 {
    max-width: none;
    margin: 0;
    overflow: visible;
    font-size: clamp(20px, 5.2vw, 23px);
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }

  .archive-header-actions {
    min-width: 34px;
    justify-content: flex-end;
  }

  .archive-page-header #refresh {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
  }

  .archive-page-header #refresh b {
    display: none;
  }

  .page > .panel,
  .page > .operator-layout,
  .page > .active-card {
    width: 100%;
    margin-inline: 0;
  }

  .panel,
  .active-card {
    padding: 13px;
  }

  .archive-toolbar {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 10px;
  }

  .search-box,
  .archive-filters,
  .archive-filters > summary {
    width: 100%;
  }

  .search-box,
  .archive-filters > summary {
    min-height: 44px;
  }

  .archive-filters > div {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 7px;
    grid-template-columns: minmax(0, 1fr);
  }

  .incident-table-head {
    display: none;
  }

  body.role-operator .incident-row,
  .incident-row {
    min-height: 72px;
    padding: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "main status actions"
      "zone duration actions";
    gap: 6px 10px;
  }

  .incident-main { grid-area: main; }
  .incident-zone { grid-area: zone; display: block; }
  .incident-date { display: none; }
  .incident-duration { grid-area: duration; }
  .incident-row > .status-chip { grid-area: status; }
  .incident-actions {
    grid-area: actions;
    width: auto;
    align-self: stretch;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .incident-actions > span {
    display: none;
  }

  .archive-resume-action {
    width: 124px;
    min-width: 124px;
    min-height: 38px;
  }

  .recording-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .recording-clock {
    width: auto;
    margin: 0;
    justify-content: flex-end;
  }

  .operation-time-strip {
    max-width: 100%;
  }

  .action-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .active-record-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .active-record-actions button {
    width: 100%;
  }

  .record-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #record-start {
    grid-column: 1 / -1;
  }

  #record-pause,
  #record-stop {
    width: 100%;
  }

  .active-grid,
  .active-details,
  .incident-form,
  .advanced-grid,
  .settings-form,
  .dns-credential-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .entity-drawer,
  .entity-drawer.operation-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .entity-drawer-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-dialog,
  .multicam-dialog {
    width: calc(100vw - 12px);
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: 6px;
  }

  .preview-head {
    padding: 14px;
    gap: 10px;
  }

  .preview-head h2 {
    font-size: 19px;
  }

  body.role-operator .mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-nav .nav-btn {
    min-width: 0;
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  body.role-operator .incident-row,
  .incident-row {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "zone duration"
      "actions actions";
    gap: 7px 10px;
  }

  .incident-actions {
    width: 100%;
    padding-top: 3px;
  }

  .archive-resume-action {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }

  .operation-time-strip {
    width: 100%;
  }

  .mobile-account small {
    display: none;
  }

  .record-controls button {
    min-height: 50px;
    height: 50px;
    padding-inline: 6px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .mobile-header {
    padding-inline: 10px;
  }

  .brand.compact strong {
    font-size: 14px;
  }

  .theme-switcher button {
    width: 22px;
  }

  .recording-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .recording-clock {
    justify-content: flex-start;
  }

  .active-record-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .incident-main .operation-icon {
    width: 30px;
    height: 30px;
  }
}

.camera-source-note,
.camera-detection-status {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  font-size: 12px;
  line-height: 1.45;
}

.camera-source-note strong {
  color: var(--ui-text);
  font-size: 13px;
}

.camera-detection-status {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--ui-border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--ui-surface));
  font-weight: 700;
}

.camera-detection-status.error {
  border-color: color-mix(in srgb, var(--red) 34%, var(--ui-border));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--ui-surface));
}

/* Desktop responsive contract ----------------------------------------------
   Keeps the application stable while the browser window is resized and
   prevents forms and tables from stretching across ultrawide displays. */
@media (min-width: 761px) {
  .page-header > :last-child:not(:first-child),
  .panel-heading > :last-child:not(:first-child),
  .entity-list-toolbar > button:last-child,
  .device-list-toolbar > button:last-child {
    margin-left: auto;
  }

  main {
    --desktop-gutter: clamp(18px, 2.15vw, 30px);
    --desktop-content-max: 1440px;
    padding-inline: var(--desktop-gutter);
  }

  .page-header {
    margin-inline: calc(-1 * var(--desktop-gutter));
    padding-inline: max(
      var(--desktop-gutter),
      calc((100% - var(--desktop-content-max)) / 2 + var(--desktop-gutter))
    );
  }

  .page > .panel,
  .page > .operator-layout,
  .page > .operator-steps,
  .page > .active-card,
  .page > .admin-layout,
  .page > .system-settings-layout,
  .users-panel,
  .devices-panel,
  .ozon-archive-panel {
    width: 100%;
    max-width: var(--desktop-content-max);
    margin-inline: auto;
  }

  .users-panel {
    max-width: 1180px;
  }

  .devices-panel {
    max-width: 1280px;
  }

  .system-settings-layout {
    max-width: 1040px;
  }

  #users-page > .page-header {
    padding-inline: max(var(--desktop-gutter), calc((100% - 1180px) / 2 + var(--desktop-gutter)));
  }

  #admin-page > .page-header {
    padding-inline: max(var(--desktop-gutter), calc((100% - 1280px) / 2 + var(--desktop-gutter)));
  }

  #settings-page > .page-header,
  #storage-settings-page > .page-header {
    padding-inline: max(var(--desktop-gutter), calc((100% - 1040px) / 2 + var(--desktop-gutter)));
  }

  .incident-row > .incident-main,
  .incident-row > .incident-zone,
  .incident-row > .incident-date,
  .incident-row > .incident-duration,
  .incident-row > .status-chip,
  .incident-row > .incident-actions {
    grid-area: auto;
  }
}

/* Original recording downloads: compact drawer list and floating player menu. */
.operation-download-card {
  margin-top: 10px;
  overflow: hidden;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

@media (max-width: 760px) {
  .operation-download-desktop {
    display: none !important;
  }
}

.operation-download-head {
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ui-border);
}

.operation-download-head strong,
.operation-download-head small,
.operation-download-camera strong,
.operation-download-camera small {
  display: block;
}

.operation-download-head strong,
.operation-download-camera strong {
  font-size: 12px;
  font-weight: 600;
}

.operation-download-head small,
.operation-download-camera small {
  margin-top: 2px;
  color: var(--ui-text-subtle);
  font-size: 10px;
}

.operation-download-head .secondary-action {
  width: auto;
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .operation-download-head {
    align-items: flex-start;
  }

  .operation-download-head .secondary-action {
    height: 30px;
    min-height: 30px;
    padding-inline: 8px;
  }
}

.operation-download-camera + .operation-download-camera {
  border-top: 1px solid var(--ui-border);
}

.operation-download-camera > summary {
  min-height: 52px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.operation-download-camera > summary::-webkit-details-marker { display: none; }

.operation-download-camera-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.operation-download-camera-actions a,
.operation-download-camera-actions button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.operation-download-camera-actions button[aria-busy="true"] {
  font-size: 9px;
  letter-spacing: -.02em;
}

.operation-download-camera-actions i {
  color: var(--ui-text-subtle);
  font-style: normal;
  transition: transform .16s ease;
}

.operation-download-camera[open] .operation-download-camera-actions i { transform: rotate(180deg); }

.operation-download-camera > div {
  padding: 0 12px 8px;
  display: grid;
  gap: 4px;
}

.operation-download-fragment {
  min-height: 36px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border-radius: 5px;
  font-size: 11px;
  text-decoration: none;
}

.operation-download-fragment small { color: var(--ui-text-subtle); }
.operation-download-fragment b { color: var(--accent-text); font-size: 15px; }

.review-download-permission {
  grid-column: 1 / -1;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-text-secondary);
  font-size: 11px;
}

.operation-review-form .review-download-permission input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--accent-solid);
}

.multicam-download-control {
  grid-area: download;
  position: relative;
  width: 42px;
  justify-self: center;
}

.multicam-download-control[hidden] { display: none !important; }

.multicam-download-control > summary {
  width: 42px;
  height: 42px;
  list-style: none;
  cursor: pointer;
}

.multicam-download-control > summary::-webkit-details-marker { display: none; }
.multicam-download-control > summary svg { width: 19px; height: 19px; }

.multicam-download-options {
  right: -8px;
  left: auto;
  min-width: 172px;
  transform: none;
  animation-name: playback-speed-menu-in-right;
}

.multicam-download-options a {
  min-height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: var(--video-text);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.multicam-download-options a:hover { background: rgba(255, 255, 255, .10); }

.multicam-dialog[data-download-allowed="true"] .multicam-controls {
  width: min(770px, calc(100% - 24px));
  grid-template-columns: auto minmax(0, 1fr) 48px 58px 48px 56px 42px 42px minmax(0, 1fr) auto;
  grid-template-areas:
    ". . back toggle forward speed download fullscreen . ."
    "current timeline timeline timeline timeline timeline timeline timeline timeline duration";
}

.multicam-dialog[data-quality-control="true"][data-download-allowed="true"] .multicam-controls {
  width: min(830px, calc(100% - 24px));
  grid-template-columns: auto minmax(0, 1fr) 48px 58px 48px 56px 54px 42px 42px minmax(0, 1fr) auto;
  grid-template-areas:
    ". . back toggle forward speed quality download fullscreen . ."
    "current timeline timeline timeline timeline timeline timeline timeline timeline timeline duration";
}

@media (max-width: 760px) {
  .operation-review-form { grid-template-columns: 1fr; }
  .review-download-permission { grid-column: 1; }

  .multicam-download-control,
  .multicam-download-control > summary {
    width: 32px;
    height: 32px;
  }

  .multicam-dialog[data-download-allowed="true"] .multicam-controls,
  .multicam-dialog[data-quality-control="true"][data-download-allowed="true"] .multicam-controls {
    width: calc(100% - 12px);
    grid-template-columns: auto minmax(0, 1fr) 32px 42px 32px 44px 46px 32px 32px minmax(0, 1fr) auto;
    grid-template-areas:
      ". . back toggle forward speed quality download fullscreen . ."
      "current timeline timeline timeline timeline timeline timeline timeline timeline timeline duration";
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  #operator-page .header-metrics {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.settings-context-open .workspace {
    margin-left: 52px;
    padding-top: 64px;
  }

  .settings-context-panel {
    inset: 50px 0 auto 52px;
    width: auto;
    height: 64px;
    padding: 7px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }

  .settings-context-heading {
    display: none;
  }

  .settings-context-nav {
    width: max-content;
    min-width: 100%;
    height: 49px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 6px;
  }

  .settings-context-btn {
    width: auto;
    min-width: 166px;
    min-height: 48px;
  }

  .settings-context-btn small {
    display: block;
  }
}

@media (min-width: 761px) and (max-width: 1239px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns:
      minmax(210px, 1.55fr)
      minmax(120px, .9fr)
      86px
      82px
      minmax(94px, 112px);
    grid-template-areas: none;
    gap: clamp(8px, 1vw, 12px);
  }

  .incident-table-head span:nth-child(3),
  .incident-date {
    display: none;
  }

  .incident-zone {
    display: block;
  }
}

@media (min-width: 1240px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns:
      minmax(240px, 1.5fr)
      minmax(160px, 1fr)
      104px
      96px
      92px
      112px;
    grid-template-areas: none;
    gap: 12px;
  }

  .incident-table-head span:nth-child(3),
  .incident-date {
    display: block;
  }
}

/* Mobile playback contract ------------------------------------------------- */
.preview-window-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preview-window-action {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}

.preview-window-action:hover {
  color: var(--accent-text);
  background: var(--ui-hover);
}

.video-player-dialog[open] {
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.video-player-dialog:fullscreen,
.video-player-dialog.is-expanded,
.video-player-dialog[open]:fullscreen,
.video-player-dialog[open].is-expanded {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.video-player-dialog:fullscreen .video-player-stage,
.video-player-dialog.is-expanded .video-player-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.video-player-stage video {
  object-fit: contain;
}

.video-player-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.playback-speed-control {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.playback-speed-control select {
  min-width: 62px;
  min-height: 32px;
  padding: 0 25px 0 9px;
  color: var(--ui-text);
  background-color: var(--control-bg);
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 550;
}

.multicam-speed-control {
  color: var(--video-muted);
}

.multicam-speed-control span {
  display: none;
}

.multicam-speed-control select {
  min-width: 58px;
  color: var(--video-text);
  background-color: var(--video-control);
  border-color: var(--video-border);
}

.multicam-controls {
  grid-template-columns: auto auto auto auto 104px auto minmax(160px, 1fr);
}

.multicam-tile {
  cursor: pointer;
}

.multicam-tile.selected {
  outline: 2px solid var(--video-accent);
  outline-offset: -2px;
}

@media (max-width: 760px) {
  .video-player-dialog[open],
  .multicam-dialog[open] {
    width: calc(100vw - 8px);
    max-width: none;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    margin: 4px;
    border-radius: 7px;
  }

  .video-player-dialog[open] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .video-player-dialog .preview-head {
    padding: 8px 8px 8px 11px;
  }

  .video-player-dialog .preview-head h2 {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .preview-window-action {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }

  .preview-window-action span {
    display: none;
  }

  .video-player-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .video-player-footer {
    min-height: 56px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .video-player-footer-actions {
    justify-content: flex-end;
  }

  .multicam-dialog[open] {
    grid-template-rows: 48px 48px minmax(0, 1fr) 82px;
  }

  .multicam-head {
    min-height: 48px;
    padding: 6px 6px 6px 9px;
    gap: 6px;
  }

  .multicam-head h2 {
    max-width: 28vw;
  }

  .multicam-head p {
    max-width: 30vw;
  }

  .multicam-window-actions,
  .multicam-layout-switch {
    gap: 3px;
  }

  .multicam-camera-strip {
    min-height: 48px;
    height: 48px;
    padding: 5px;
  }

  .multicam-camera-strip button {
    min-width: min(132px, 42vw);
  }

  .multicam-controls {
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 6px 7px;
    grid-template-columns: repeat(4, 34px) minmax(82px, 1fr) auto;
    align-content: center;
    gap: 5px;
  }

  .multicam-controls strong {
    white-space: nowrap;
    line-height: 1;
  }

  .multicam-dialog[data-camera-count="5"] .multicam-grid,
  .multicam-dialog[data-camera-count="6"] .multicam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="focus"] .multicam-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .multicam-tile {
    border-radius: 3px;
  }

  .multicam-label {
    left: 5px;
    bottom: 5px;
    max-width: calc(100% - 10px);
    padding: 4px 5px;
  }

  .multicam-label strong,
  .multicam-label small,
  .multicam-source-count {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .video-player-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-player-footer .secondary-action {
    width: auto;
    justify-content: center;
  }

  .video-player-footer-actions {
    width: 100%;
    justify-content: space-between;
  }

  .playback-speed-control > span {
    display: none;
  }

  .multicam-head h2 {
    max-width: 24vw;
  }

  .multicam-controls {
    grid-template-columns: repeat(4, 32px) minmax(70px, 1fr) auto;
  }

  .multicam-control-action {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .multicam-dialog[data-camera-count="2"] .multicam-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .multicam-dialog[data-camera-count="3"] .multicam-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .multicam-dialog[data-camera-count="4"] .multicam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="focus"] .multicam-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-width: 900px) and (max-height: 520px) {
  .multicam-dialog[open] {
    width: calc(100vw - 8px);
    max-width: none;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    margin: 4px;
    border-radius: 7px;
  }

  .multicam-dialog[open] {
    grid-template-rows: 42px 42px minmax(0, 1fr) 78px;
  }

  .multicam-head {
    min-height: 42px;
    padding: 5px 6px 5px 9px;
  }

  .multicam-head h2 {
    max-width: 24vw;
  }

  .multicam-head p {
    max-width: 27vw;
  }

  .multicam-layout-switch span,
  #multicam-fullscreen span,
  .multicam-window-action > span {
    display: none;
  }

  .multicam-window-action {
    width: 31px;
    min-width: 31px;
    padding: 0;
    justify-content: center;
  }

  .multicam-camera-strip {
    min-height: 42px;
    height: 42px;
  }

  .multicam-controls {
    width: 100%;
    min-height: 78px;
    margin: 0;
    padding: 5px 7px;
    grid-template-columns: repeat(4, 34px) minmax(82px, 1fr) auto;
  }

  .multicam-timeline-wrap {
    grid-column: 1 / -1;
    height: 26px;
  }

  .multicam-dialog[data-camera-count="2"] .multicam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .multicam-dialog[data-camera-count="3"] .multicam-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .multicam-dialog[data-camera-count="4"] .multicam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .multicam-dialog[data-camera-count="5"] .multicam-grid,
  .multicam-dialog[data-camera-count="6"] .multicam-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="focus"] .multicam-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

/* Lightweight floating playback controls ----------------------------------- */
.video-player-dialog[open] {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
}

.video-player-footer {
  position: absolute;
  z-index: 6;
  top: 58px;
  right: 10px;
  width: auto;
  max-width: calc(100% - 20px);
  min-height: 38px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--video-muted);
  background: color-mix(in srgb, var(--video-surface) 82%, transparent);
  border: 1px solid var(--video-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.video-player-footer > span {
  display: none;
}

.video-player-footer-actions {
  width: auto;
  gap: 4px;
}

.video-player-footer .playback-speed-control {
  min-height: 30px;
  gap: 5px;
  color: var(--video-muted);
}

.video-player-footer .playback-speed-control > span {
  padding-left: 4px;
  font-size: 10px;
}

.video-player-footer .playback-speed-control select {
  min-width: 54px;
  min-height: 30px;
  padding: 0 20px 0 8px;
  color: var(--video-text);
  background-color: var(--video-control);
  border-color: var(--video-border);
  font-size: 12px;
}

.video-player-footer .secondary-action {
  width: auto;
  min-height: 30px;
  padding: 0 9px;
  color: var(--video-text);
  background: var(--video-control);
  border-color: var(--video-border);
  font-size: 10px;
}

.multicam-dialog[open] {
  position: relative;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.multicam-controls {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 10px;
  width: min(760px, calc(100% - 20px));
  min-height: 56px;
  margin: 0;
  padding: 6px 8px;
  grid-template-columns: repeat(4, 30px) 92px 54px minmax(140px, 1fr);
  gap: 6px;
  background: color-mix(in srgb, var(--video-surface) 80%, transparent);
  border: 1px solid var(--video-border);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(-50%);
  transition: opacity .18s ease, transform .18s ease;
}

.multicam-control-action {
  width: 30px;
  height: 30px;
}

.multicam-controls strong {
  font-size: 11px;
}

.multicam-speed-control,
.multicam-speed-control select {
  min-height: 30px;
}

.multicam-speed-control select {
  min-width: 54px;
  padding: 0 20px 0 7px;
  font-size: 12px;
}

.multicam-timeline-wrap input {
  height: 22px;
}

.multicam-dialog.is-playing:not(.show-overlays) .multicam-controls {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
}

@media (max-width: 760px) {
  .video-player-dialog[open] {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .video-player-footer {
    top: 52px;
    right: 6px;
    min-height: 36px;
  }

  .video-player-footer-actions {
    width: auto;
    justify-content: flex-end;
  }

  .video-player-footer .playback-speed-control > span {
    display: none;
  }

  .multicam-dialog[open] {
    grid-template-rows: 44px 44px minmax(0, 1fr);
  }

  .multicam-controls {
    bottom: max(6px, env(safe-area-inset-bottom));
    width: calc(100% - 12px);
    min-height: 60px;
    padding: 5px 6px;
    grid-template-columns: repeat(4, 30px) minmax(70px, 1fr) 54px;
    gap: 4px;
  }

  .multicam-control-action {
    width: 30px;
    height: 30px;
  }

  .multicam-timeline-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .video-player-footer .secondary-action {
    padding-inline: 7px;
  }

  .multicam-controls {
    grid-template-columns: repeat(4, 28px) minmax(66px, 1fr) 52px;
  }

  .multicam-control-action {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 900px) and (max-height: 520px) {
  .multicam-dialog[open] {
    grid-template-rows: 40px 40px minmax(0, 1fr);
  }

  .multicam-controls {
    bottom: 4px;
    min-height: 54px;
  }
}

/* Reference-refined controls: translucent, borderless and naturally compact. */
.video-player-footer,
.multicam-controls {
  border: 0;
  background: color-mix(in srgb, #17283d 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 12px 32px rgba(0, 0, 0, .24);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.video-player-footer {
  min-height: 34px;
  padding: 2px 4px;
  border-radius: 17px;
}

.video-player-footer .playback-speed-control select,
.video-player-footer .secondary-action,
.multicam-speed-control select {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.video-player-footer .secondary-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 15px;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.video-player-footer .secondary-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-player-footer .secondary-action:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.video-player-footer .secondary-action:active {
  transform: scale(.88);
}

.multicam-controls {
  width: min(720px, calc(100% - 24px));
  min-height: 84px;
  padding: 7px 16px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 48px 58px 48px 56px 42px minmax(0, 1fr) auto;
  grid-template-rows: 42px 24px;
  grid-template-areas:
    ". . back toggle forward speed fullscreen . ."
    "current timeline timeline timeline timeline timeline timeline timeline duration";
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  border-radius: 22px;
}

#multicam-back {
  grid-area: back;
}

#multicam-play {
  grid-area: toggle;
}

#multicam-pause {
  display: none !important;
}

#multicam-forward {
  grid-area: forward;
}

#multicam-fullscreen {
  grid-area: fullscreen;
}

.multicam-speed-control {
  grid-area: speed;
  width: 56px;
  min-width: 0;
  justify-self: center;
}

.multicam-time.current {
  grid-area: current;
  justify-self: start;
}

.multicam-time.duration {
  grid-area: duration;
  justify-self: end;
}

.multicam-timeline-wrap {
  grid-area: timeline;
  align-self: center;
}

.multicam-control-action {
  width: 44px;
  height: 40px;
  padding: 0;
  color: rgba(239, 245, 251, .88);
  background: transparent;
  border: 0;
  border-radius: 13px;
  box-shadow: none;
  transition: color .16s ease, background-color .16s ease, transform .16s cubic-bezier(.2,.8,.2,1), opacity .16s ease;
}

.multicam-control-action svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

#multicam-play {
  width: 54px;
  height: 44px;
  color: #fff;
  background: transparent;
}

#multicam-play svg {
  width: 36px;
  height: 36px;
}

.multicam-control-action:hover:not(:disabled),
.multicam-control-action.primary:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.multicam-control-action:active:not(:disabled) {
  transform: scale(.82);
  opacity: .72;
}

.multicam-control-action:disabled {
  opacity: .34;
}

.multicam-speed-control select {
  min-width: 54px;
  min-height: 34px;
  padding: 0 17px 0 7px;
  color: rgba(239, 245, 251, .88);
  font-size: 13px;
  font-weight: 500;
  transition: color .16s ease, transform .16s ease;
}

.multicam-speed-control select:hover {
  color: #fff;
}

.multicam-time {
  min-width: 0;
  color: rgba(220, 230, 241, .78);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.multicam-timeline-wrap input {
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.multicam-timeline-wrap input::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(210, 226, 242, .25);
  border-radius: 999px;
}

.multicam-timeline-wrap input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  background: #f7fbff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}

.multicam-timeline-wrap input:active::-webkit-slider-thumb {
  transform: scale(1.22);
}

.multicam-timeline-wrap input::-moz-range-track {
  height: 4px;
  background: rgba(210, 226, 242, .25);
  border: 0;
  border-radius: 999px;
}

.multicam-timeline-wrap input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #f7fbff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

.multicam-pause-marker {
  width: 2px;
  height: 12px;
  border: 0;
  box-shadow: 0 0 0 2px rgba(242, 182, 75, .12);
}

@media (max-width: 760px) {
  .video-player-footer {
    min-height: 32px;
    border-radius: 16px;
  }

  .video-player-footer .secondary-action span {
    display: none;
  }

  .video-player-footer .secondary-action {
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  .multicam-controls {
    width: calc(100% - 12px);
    min-height: 76px;
    padding: 5px 10px 8px;
    grid-template-columns: auto minmax(0, 1fr) 38px 48px 38px 54px 36px minmax(0, 1fr) auto;
    grid-template-rows: 38px 22px;
    column-gap: 4px;
    border-radius: 19px;
  }

  .multicam-control-action {
    width: 36px;
    height: 36px;
  }

  .multicam-control-action svg {
    width: 20px;
    height: 20px;
  }

  #multicam-play {
    width: 46px;
    height: 38px;
  }

  #multicam-play svg {
    width: 31px;
    height: 31px;
  }

  .multicam-speed-control {
    width: 48px;
  }

  .multicam-speed-control select {
    min-width: 48px;
    min-height: 32px;
    padding-left: 5px;
    font-size: 12px;
  }

  .multicam-time {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .multicam-controls {
    padding-inline: 7px;
    grid-template-columns: auto minmax(0, 1fr) 34px 44px 34px 54px 34px minmax(0, 1fr) auto;
  }

  .multicam-control-action {
    width: 32px;
    height: 34px;
  }

  #multicam-play {
    width: 42px;
  }

  .multicam-speed-control,
  .multicam-speed-control select {
    width: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .multicam-control-action,
  .video-player-footer .secondary-action,
  .multicam-dialog .multicam-controls {
    transition: none;
  }
}

/* Mobile viewport stability and form focus without browser auto-zoom. */
html {
  width: 100%;
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.app-shell,
.workspace {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

button,
a,
summary,
select {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 18px;
  }

  .multicam-speed-control,
  .multicam-speed-control select {
    width: 54px;
    min-width: 54px;
  }
}

/* Player fullscreen alignment and native-free playback speed menu. */
.multicam-dialog:fullscreen .multicam-controls,
.multicam-dialog.is-expanded .multicam-controls {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  justify-self: center;
  align-self: end;
  margin: 0 auto 10px;
  transform: none;
}

.playback-speed-menu,
.playback-speed-control.playback-speed-menu {
  position: relative;
  min-height: 0;
  display: block;
  color: var(--video-text);
}

.playback-speed-trigger {
  width: 54px;
  min-width: 54px;
  height: 34px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  list-style: none;
  color: rgba(239, 245, 251, .88);
  border: 0;
  border-radius: 17px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.playback-speed-trigger::-webkit-details-marker {
  display: none;
}

.playback-speed-trigger::marker {
  content: "";
}

.playback-speed-trigger svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.playback-speed-menu[open] .playback-speed-trigger,
.playback-speed-trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.playback-speed-menu[open] .playback-speed-trigger svg {
  transform: rotate(180deg);
}

.playback-speed-menu .playback-speed-value,
.multicam-speed-control .playback-speed-value {
  display: inline;
}

.playback-speed-options {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  color: rgba(239, 245, 251, .82);
  background: color-mix(in srgb, #17283d 88%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: playback-speed-menu-in .16s cubic-bezier(.2, .8, .2, 1);
}

.playback-speed-menu:not([open]) .playback-speed-options {
  display: none;
}

.playback-speed-options button {
  width: 36px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(220, 230, 241, .76);
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease, transform .14s ease;
}

.playback-speed-options button:hover,
.playback-speed-options button.active {
  color: #fff;
  background: rgba(255, 255, 255, .11);
}

.playback-speed-options button:active {
  transform: scale(.84);
}

.video-player-footer .playback-speed-options {
  right: 0;
  left: auto;
  transform: none;
  transform-origin: 100% 100%;
  animation-name: playback-speed-menu-in-right;
}

@keyframes playback-speed-menu-in {
  from { opacity: 0; transform: translateX(-50%) translateY(5px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes playback-speed-menu-in-right {
  from { opacity: 0; transform: translateY(5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Compact playback header: operation timing and direct camera selection. */
.multicam-dialog[open] {
  grid-template-rows: auto minmax(0, 1fr);
}

.multicam-head {
  min-width: 0;
  min-height: 54px;
  padding: 7px 9px 7px 13px;
  display: grid;
  grid-template-columns: minmax(190px, .75fr) minmax(0, 1.25fr) auto;
  grid-template-areas: "copy cameras actions";
  align-items: center;
  gap: 10px;
}

.multicam-head-copy {
  min-width: 0;
  grid-area: copy;
}

.multicam-window-actions {
  grid-area: actions;
}

.multicam-head-copy h2,
.multicam-head-copy p {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multicam-head-copy h2 {
  font-size: 17px;
}

.multicam-head-copy p {
  margin-top: 3px;
  color: var(--video-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.multicam-camera-nav {
  grid-area: cameras;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px;
  overflow: hidden;
}

.multicam-camera-all,
.multicam-camera-strip button {
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--video-muted);
  background: var(--video-control);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.multicam-camera-all:hover,
.multicam-camera-all.active,
.multicam-camera-strip button:hover,
.multicam-camera-strip button.active {
  color: var(--video-text);
  background: var(--video-control-hover);
}

.multicam-camera-all.active,
.multicam-camera-strip button.active {
  border-color: color-mix(in srgb, var(--video-accent) 72%, transparent);
}

.multicam-camera-strip {
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  flex: 0 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  border: 0;
  scrollbar-width: none;
}

.multicam-camera-strip::-webkit-scrollbar {
  display: none;
}

.multicam-camera-strip i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
}

.multicam-camera-strip strong {
  max-width: 150px;
  font-size: 11px;
  font-weight: 600;
}

.multicam-fullscreen-control {
  width: 38px;
  height: 38px;
  justify-self: center;
}

#multicam-fullscreen svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.multicam-dialog:fullscreen,
.multicam-dialog.is-expanded,
.multicam-dialog[open]:fullscreen,
.multicam-dialog[open].is-expanded {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

@media (max-width: 760px) {
  .multicam-head {
    min-height: 48px;
    padding: 5px 6px 5px 9px;
    grid-template-columns: minmax(92px, .6fr) minmax(0, 1.4fr) 32px;
    grid-template-areas: "copy cameras actions";
    gap: 5px;
  }

  .multicam-head-copy {
    grid-area: copy;
  }

  .multicam-window-actions {
    grid-area: actions;
  }

  .multicam-camera-nav {
    grid-area: cameras;
  }

  .multicam-camera-all,
  .multicam-camera-strip button {
    min-height: 30px;
    height: 30px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .multicam-camera-strip {
    min-height: 30px;
    height: 30px;
  }

  .multicam-head-copy p {
    font-size: 9px;
  }
}

/* Stable playback surface: no lateral control motion and true full-size focus. */
.multicam-controls {
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  transform: none;
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity;
}

.multicam-dialog.is-playing:not(.show-overlays) .multicam-controls {
  opacity: 0;
  pointer-events: none;
  transform: none;
}

.multicam-dialog:fullscreen .multicam-controls,
.multicam-dialog.is-expanded .multicam-controls {
  right: auto;
  left: auto;
  margin: 0 auto 10px;
  transform: none;
}

.multicam-dialog[data-layout="focus"] .multicam-grid,
.multicam-dialog[data-layout="focus"]:fullscreen .multicam-grid,
.multicam-dialog[data-layout="focus"].is-expanded .multicam-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
}

.multicam-dialog[data-layout="focus"] .multicam-tile.selected {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  grid-area: 1 / 1 / -1 / -1;
  border-radius: 0;
}

.multicam-dialog[data-layout="focus"] .multicam-tile.selected video {
  width: 100%;
  height: 100%;
}

/* Mobile HLS uses one decoded video for both mosaic and focused playback. */
.multicam-dialog[data-mobile-hls="true"] .multicam-grid,
.multicam-dialog[data-mobile-hls="true"][data-layout="focus"] .multicam-grid,
.multicam-dialog[data-mobile-hls="true"]:fullscreen .multicam-grid,
.multicam-dialog[data-mobile-hls="true"].is-expanded .multicam-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.mobile-hls-tile {
  width: 100%;
  height: 100%;
  cursor: default;
}

.multicam-first-frame-state {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: rgba(229, 236, 246, .82);
  background: radial-gradient(circle at 50% 42%, rgba(27, 42, 61, .7), rgba(3, 7, 13, .96) 62%);
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.multicam-first-frame-state small {
  font-size: 11px;
  font-weight: 550;
}

.multicam-tile.has-preview .multicam-first-frame-state {
  opacity: 0;
  visibility: hidden;
}

.multicam-tile.preview-unavailable .multicam-first-frame-state .preview-spinner {
  display: none;
}

.multicam-tile.preview-unavailable .multicam-first-frame-state {
  color: rgba(202, 211, 224, .66);
}

.mobile-hls-tile.is-loading::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(255, 255, 255, .24);
  border-top-color: #fff;
  border-radius: 50%;
  animation: preview-spin .8s linear infinite;
}

.mobile-hls-labels {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  gap: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

.mobile-hls-labels[data-count="1"] { grid-template-columns: 1fr; }
.mobile-hls-labels[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.mobile-hls-labels[data-count="3"],
.mobile-hls-labels[data-count="4"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.mobile-hls-labels[data-count="5"],
.mobile-hls-labels[data-count="6"],
.mobile-hls-labels[data-count="7"],
.mobile-hls-labels[data-count="8"],
.mobile-hls-labels[data-count="9"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

.mobile-hls-labels > span {
  align-self: start;
  justify-self: start;
  max-width: calc(100% - 14px);
  margin: 7px;
  padding: 4px 7px;
  overflow: hidden;
  color: rgba(255, 255, 255, .94);
  background: rgba(5, 9, 17, .58);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multicam-dialog.is-playing:not(.show-overlays) .mobile-hls-labels {
  opacity: 0;
}

/* Playback hints and viewport-safe application frame. */
.workspace {
  width: auto;
  max-width: none;
}

.multicam-controls [data-tooltip] {
  position: relative;
}

.multicam-controls [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 5px 8px;
  color: rgba(246, 249, 252, .96);
  background: color-mix(in srgb, #142437 88%, transparent);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  font-size: 11px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity .15s ease, transform .15s ease;
}

.multicam-controls [data-tooltip]:hover::after,
.multicam-controls [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.multicam-controls .playback-speed-menu[open] .playback-speed-trigger::after {
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  .multicam-controls [data-tooltip]::after {
    display: none;
  }
}

.operation-access-card {
  margin: 12px 0;
  padding: 12px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface-soft);
}

.operation-access-heading strong,
.operation-access-heading small,
.operation-access-row strong,
.operation-access-row small {
  display: block;
}

.operation-access-heading strong,
.operation-access-row strong {
  font-size: 12px;
  font-weight: 600;
}

.operation-access-heading small,
.operation-access-row small {
  margin-top: 2px;
  color: var(--ui-text-subtle);
  font-size: 10px;
}

.operation-access-row {
  min-width: 0;
  padding-top: 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--ui-border);
}

.operation-access-row .account-avatar {
  width: 28px;
  height: 28px;
}

.operation-access-row button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

/* Connection-aware HLS quality selector. */
.multicam-quality-control {
  grid-area: quality;
  width: 54px;
  min-width: 0;
  justify-self: center;
}

.multicam-quality-control[hidden] {
  display: none !important;
}

.multicam-quality-control .playback-quality-trigger {
  width: 54px;
  min-width: 54px;
  padding-inline: 7px;
  gap: 4px;
}

.multicam-quality-control .playback-quality-value {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.playback-quality-trigger .playback-quality-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 1.55;
}

.playback-quality-trigger .playback-quality-chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.playback-speed-menu[open] .playback-quality-trigger .playback-quality-icon {
  transform: none;
}

.playback-quality-options button {
  width: auto;
  min-width: 44px;
  padding-inline: 9px;
}

.playback-quality-options button[data-playback-quality="original"] {
  min-width: 68px;
}

.multicam-dialog[data-quality-control="true"] .multicam-controls {
  width: min(780px, calc(100% - 24px));
  grid-template-columns: auto minmax(0, 1fr) 48px 58px 48px 56px 54px 42px minmax(0, 1fr) auto;
  grid-template-areas:
    ". . back toggle forward speed quality fullscreen . ."
    "current timeline timeline timeline timeline timeline timeline timeline timeline duration";
}

.multicam-controls .playback-speed-menu[open] .playback-speed-trigger::after,
.multicam-controls .multicam-quality-control[open] .playback-quality-trigger::after {
  opacity: 0;
}

@media (max-width: 760px) {
  .multicam-dialog[data-quality-control="true"] .multicam-controls {
    width: calc(100% - 12px);
    grid-template-columns: auto minmax(0, 1fr) 32px 42px 32px 44px 46px 32px minmax(0, 1fr) auto;
    grid-template-areas:
      ". . back toggle forward speed quality fullscreen . ."
      "current timeline timeline timeline timeline timeline timeline timeline timeline duration";
  }

  .multicam-quality-control,
  .multicam-quality-control .playback-quality-trigger {
    width: 46px;
    min-width: 46px;
  }

  .multicam-quality-control .playback-quality-trigger {
    padding-inline: 4px;
    gap: 2px;
  }

  .playback-quality-options {
    left: auto;
    right: -34px;
    transform: none;
    animation-name: playback-speed-menu-in-right;
  }
}

@media (max-width: 380px) {
  .multicam-dialog[data-quality-control="true"] .multicam-controls {
    grid-template-columns: auto minmax(0, 1fr) 28px 38px 28px 42px 42px 30px minmax(0, 1fr) auto;
  }

  .multicam-quality-control,
  .multicam-quality-control .playback-quality-trigger {
    width: 42px;
    min-width: 42px;
  }
}

/* Keep the two archive states in dedicated columns after all responsive rules. */
@media (min-width: 1240px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(220px, 1.35fr) minmax(145px, .9fr) 96px 82px 92px 118px 54px;
  }
}

@media (min-width: 861px) and (max-width: 1239px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(190px, 1.35fr) minmax(120px, .85fr) 80px 88px 112px 52px;
  }

  .incident-table-head span:nth-child(3),
  .incident-date {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(180px, 1fr) 78px 86px 108px 50px;
  }

  .incident-table-head span:nth-child(2),
  .incident-table-head span:nth-child(3),
  .incident-zone,
  .incident-date {
    display: none;
  }
}

@media (max-width: 760px) {
  body.role-operator .incident-row,
  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "main record actions"
      "zone review actions"
      "duration review actions";
  }

  .incident-main { grid-area: main; }
  .incident-zone { grid-area: zone; }
  .incident-duration { grid-area: duration; }
  .incident-record-status { grid-area: record; }
  .incident-review-status { grid-area: review; }
  .incident-actions { grid-area: actions; }
}

@media (max-width: 520px) {
  body.role-operator .incident-row,
  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main record"
      "zone review"
      "duration duration"
      "actions actions";
  }
}

/* Final archive resume-button contract. */
.archive-resume-action {
  min-width: 108px;
  min-height: 34px;
  gap: 6px;
  padding: 0 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.archive-resume-action svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: currentColor;
}

.archive-resume-action b {
  overflow: visible;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.archive-resume-action:hover {
  color: #fff;
  background: var(--accent-solid);
}

.archive-resume-action:active { transform: scale(.97); }
.archive-resume-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Камеры: компактная панель поиска и фильтров на настольных экранах. */
@media (min-width: 761px) {
  .device-list-toolbar {
    flex-wrap: wrap;
    align-items: center;
  }

  .device-list-toolbar .device-search {
    width: min(280px, 100%);
    min-width: 180px;
    max-width: 280px;
    flex: 1 1 220px;
  }

  .device-list-toolbar .device-filter {
    max-width: 230px;
    flex: 1 1 150px;
  }

  .device-list-toolbar .secondary-action {
    margin-left: auto;
    flex: 0 0 auto;
  }
}

/* Единый размер компактных статусов во всех реестрах. */
.status-chip,
.review-status-chip,
.review-state-badge,
.device-state,
.user-state,
.tls-badge {
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 1240px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(220px, 1.35fr) minmax(145px, .9fr) 96px 82px 92px 118px 138px;
  }
}

@media (min-width: 861px) and (max-width: 1239px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(190px, 1.35fr) minmax(120px, .85fr) 80px 88px 112px 132px;
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .incident-table-head,
  .incident-row,
  body.role-operator .incident-table-head,
  body.role-operator .incident-row {
    grid-template-columns: minmax(170px, 1fr) 76px 84px 104px 126px;
  }
}

@media (max-width: 520px) {
  .archive-resume-action {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
}
/* Compact icon-only camera and audio states. Text remains available to assistive technology. */
.readiness-camera .readiness-state { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; margin-left: 2px; color: var(--green); border-left: 1px solid rgba(127,137,153,.25); }
.readiness-camera.warning .readiness-state { color: var(--red); }
.readiness-camera.inactive .readiness-state { color: #8b96a7; }
.readiness-camera .readiness-state svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.readiness-camera .readiness-audio { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; margin-left: 1px; padding-left: 5px; border-left: 1px solid rgba(127,137,153,.25); border-radius: 0; background: transparent; font-style: normal; }
.readiness-camera .readiness-audio svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.readiness-camera .readiness-audio.available { color: var(--green); }
.readiness-camera .readiness-audio.none { color: var(--orange); }
/* One compact audio control: master volume rises vertically from mute. */
.multicam-audio-control { position: relative; }
.multicam-audio-control > summary { list-style: none; }
.multicam-audio-control > summary::-webkit-details-marker { display: none; }
.multicam-audio-control.no-audio > summary { color: #e4ad55; }
.multicam-audio-control.is-muted > summary { color: #8e99aa; }
.multicam-audio-options { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 138px; box-sizing: border-box; padding: 8px; display: grid; place-items: center; overflow: hidden; contain: layout paint; }
.multicam-audio-options input { position: static; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 116px; margin: 0; accent-color: #65adff; transform: none; writing-mode: vertical-lr; direction: rtl; -webkit-appearance: slider-vertical; appearance: slider-vertical; }
.multicam-label-title { display: flex; align-items: center; gap: 7px; }
.multicam-tile-audio { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #c8d1df; background: rgba(255,255,255,.09); }
.multicam-tile-audio:hover { color: #fff; background: rgba(255,255,255,.16); }
.multicam-tile-audio.is-active { color: #74b8ff; background: rgba(52,133,226,.25); }
.multicam-tile-audio svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-hls-labels [data-nvr-camera-key] { position: relative; display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; }
.mobile-hls-labels .multicam-tile-audio { position: static; z-index: 2; pointer-events: auto; }
.arbitr-media-controls media-volume-range { width: 0; min-width: 0; overflow: hidden; opacity: 0; transition: width .2s ease, opacity .2s ease; }
.arbitr-media-controls media-mute-button:hover + media-volume-range,
.arbitr-media-controls media-mute-button:focus-visible + media-volume-range,
.arbitr-media-controls media-volume-range:hover,
.arbitr-media-controls media-volume-range:focus-within { width: 86px; opacity: 1; }
@media (max-width: 760px) {
  .multicam-audio-options { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 132px; padding: 7px; }
  .multicam-audio-options input { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 110px; }
}

/* Unified multicamera workspace: all navigation lives in the player controls. */
.multicam-dialog[open] {
  display: block;
  overflow: hidden;
}

.multicam-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  color: var(--video-text);
  background: var(--video-bg);
}

.multicam-workspace:fullscreen,
.multicam-workspace:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: var(--video-bg);
}

.multicam-grid {
  grid-row: 1;
  width: 100%;
  height: 100%;
}

.multicam-controls {
  width: min(900px, calc(100% - 24px)) !important;
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: 48px 24px !important;
  grid-template-areas:
    "buttons buttons buttons"
    "current timeline duration" !important;
  column-gap: 8px;
  row-gap: 2px;
  padding: 7px 14px 10px;
}

.multicam-control-buttons {
  grid-area: buttons;
  min-width: 0;
  padding-inline: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.multicam-control-buttons > button,
.multicam-control-buttons > details {
  flex: 0 0 auto;
}

.multicam-close-control {
  position: absolute !important;
  z-index: 20 !important;
  inset: 8px 8px auto auto !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  flex: none !important;
  margin: 0 !important;
  transform: none !important;
}

.multicam-time.current { grid-area: current; }
.multicam-time.duration { grid-area: duration; }
.multicam-timeline-wrap { grid-area: timeline; }

.multicam-info-control,
.multicam-camera-control {
  position: relative;
}

.multicam-info-control > summary,
.multicam-camera-control > summary {
  list-style: none;
}

.multicam-info-control > summary::-webkit-details-marker,
.multicam-camera-control > summary::-webkit-details-marker {
  display: none;
}

.multicam-info-control svg,
.multicam-camera-control svg,
.multicam-close-control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.multicam-info-options,
.multicam-camera-options {
  right: auto;
  left: 0;
  transform: none;
  animation-name: playback-speed-menu-in-right;
}

.multicam-info-options {
  width: min(310px, calc(100vw - 28px));
  padding: 12px 13px;
}

.multicam-info-options h2 {
  margin: 0;
  overflow: hidden;
  color: var(--video-text);
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multicam-info-options p {
  margin: 5px 0 0;
  color: var(--video-muted);
  font-size: 10px;
  line-height: 1.45;
}

.multicam-camera-options {
  width: min(248px, calc(100vw - 28px));
  max-height: min(360px, 58vh);
  padding: 6px;
  overflow-y: auto;
}

.multicam-camera-options .multicam-camera-all,
.multicam-camera-options .multicam-camera-strip button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  height: auto;
  padding: 8px 10px;
  justify-content: flex-start;
  border-radius: 7px;
  text-align: left;
}

.multicam-camera-options .multicam-camera-strip {
  width: 100%;
  height: auto;
  min-height: 0;
  display: grid;
  gap: 3px;
  padding: 3px 0 0;
  overflow: visible;
}

.multicam-camera-options .multicam-camera-strip strong {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multicam-camera-options .multicam-camera-all.active,
.multicam-camera-options .multicam-camera-strip button.active {
  color: #fff;
  background: rgba(75, 153, 242, .22);
  border-color: rgba(101, 173, 255, .68);
}

/* Transparent mosaic cells preserve drag ordering without covering the video. */
.mobile-hls-labels {
  inset: auto;
  display: block;
}

.mobile-hls-labels .mobile-hls-camera-hit {
  position: absolute;
  left: var(--cell-left);
  top: var(--cell-top);
  width: var(--cell-width);
  height: var(--cell-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.multicam-audio-source-options {
  width: min(250px, calc(100vw - 28px));
  max-height: min(340px, 58vh);
  padding: 6px;
  overflow-y: auto;
}

.multicam-audio-source-options button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  text-align: left;
}

.multicam-audio-source-options button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multicam-audio-source-options button.active {
  color: #fff;
  background: rgba(75, 153, 242, .22);
}

.multicam-zoom-control .playback-speed-trigger {
  width: 58px;
  min-width: 58px;
}

.multicam-zoom-control .playback-speed-trigger > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.multicam-zoom-control.is-disabled {
  opacity: .38;
  pointer-events: none;
}

.multicam-zoom-options button.active {
  color: #fff;
  background: rgba(75, 153, 242, .22);
}

.multicam-grid video {
  transform-origin: center center;
  transition: transform .18s ease-out;
  will-change: transform;
}

.multicam-dialog[data-layout="focus"] .multicam-grid {
  touch-action: none;
}

.multicam-dialog[data-layout="focus"].is-zoomed .multicam-tile.selected {
  cursor: grab;
}

.multicam-dialog[data-layout="focus"].is-zoomed .multicam-tile.selected:active {
  cursor: grabbing;
}

.multicam-dialog.is-zoomed .multicam-grid video.is-zoomed {
  transition: none;
}

@media (max-width: 760px) {
  .multicam-controls {
    width: calc(100% - 12px) !important;
    min-height: 84px;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: 46px 24px !important;
    padding: 6px 8px 9px;
  }

  .multicam-control-buttons {
    justify-content: flex-start;
    padding-right: 40px;
    padding-left: 0;
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .multicam-control-buttons::-webkit-scrollbar { display: none; }

  .multicam-control-buttons .multicam-control-action,
  .multicam-control-buttons .playback-speed-trigger {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding-inline: 3px;
  }

  .multicam-control-buttons .multicam-speed-control,
  .multicam-control-buttons .multicam-quality-control {
    width: 42px;
  }

  .multicam-control-buttons .multicam-speed-control .playback-speed-trigger,
  .multicam-control-buttons .multicam-quality-control .playback-quality-trigger {
    width: 42px;
    min-width: 42px;
  }

  .multicam-info-options,
  .multicam-camera-options {
    position: fixed;
    right: 8px;
    bottom: 104px;
    left: 8px;
    width: auto;
  }

  .multicam-audio-source-options {
    position: fixed;
    right: 8px;
    bottom: 104px;
    left: 8px;
    width: auto;
  }
}