* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #071521;
  color: #eaf3ff;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.screen {
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

.login-card {
  width: min(92vw, 420px);
  margin: 12vh auto 0;
}

.card,
.metric,
.status-list,
.settings-list,
.dialog-card {
  background: #0b1f30;
  border: 1px solid #274a63;
  border-radius: 16px;
}

.card {
  padding: 28px;
}

h1,
h2,
h3 {
  margin-top: 0;
}

.muted,
.updated,
.hint,
small {
  color: #9fb8ca;
}

label {
  display: block;
  margin: 16px 0 7px;
}

input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid #3d6078;
  background: #081b29;
  color: white;
  outline: none;
}

input:focus {
  border-color: #39a9ff;
}

button {
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #148ad1;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.login-card > button {
  width: 100%;
  margin-top: 24px;
}

.secondary {
  background: #18364c;
}

.error,
.success {
  margin: 0 0 15px;
  padding: 12px;
  border-radius: 10px;
}

.error {
  background: #7d202b;
}

.success {
  background: #195c3d;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: #0b1f30;
  border-bottom: 1px solid #274a63;
}

.topbar h2 {
  margin: 0;
  text-align: center;
}

.topbar > :last-child {
  justify-self: end;
}

.content {
  width: min(100% - 24px, 900px);
  margin: 24px auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.section {
  margin-bottom: 26px;
}

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

.camera-list button {
  padding: 18px;
  text-align: left;
  font-size: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric {
  padding: 16px;
  text-align: left;
  color: #eaf3ff;
}

button.metric {
  width: 100%;
}

.metric span {
  display: block;
  color: #9fb8ca;
  font-size: 14px;
}

.metric strong {
  display: block;
  margin-top: 7px;
  font-size: 26px;
}

.metric small {
  display: block;
  margin-top: 8px;
}

.editable {
  cursor: pointer;
}

.status-list,
.settings-list {
  overflow: hidden;
}

.status-list > div,
.setting-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px 16px;
  border-radius: 0;
  border-bottom: 1px solid #203e54;
}

.setting-row {
  background: transparent;
  text-align: left;
}

.setting-row:last-child,
.status-list > div:last-child {
  border-bottom: 0;
}

.setting-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.setting-row strong {
  white-space: nowrap;
  font-size: 17px;
}

.updated {
  margin-top: 14px;
  font-size: 13px;
  text-align: right;
}

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(92vw, 430px);
}

dialog::backdrop {
  background: rgba(0, 0, 0, .7);
}

.dialog-card {
  padding: 22px;
  color: #eaf3ff;
}

.dialog-current {
  color: #9fb8ca;
}

.dialog-current strong {
  color: white;
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .content {
    margin-top: 16px;
  }
}


.controls-list {
  overflow: hidden;
  background: #0b1f30;
  border: 1px solid #274a63;
  border-radius: 16px;
}

.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 16px;
  border-bottom: 1px solid #203e54;
}

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

.control-row > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-row small {
  display: block;
  max-width: 470px;
}

.control-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.control-button {
  width: auto;
  white-space: nowrap;
}

.warning-button {
  background: #a66b16;
}

.danger-button {
  background: #9b2935;
}

.command-warning {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: #493515;
  color: #ffd892;
  font-size: 14px;
}

button:disabled {
  opacity: .55;
  cursor: default;
}

@media (max-width: 560px) {
  .control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .control-row > .control-button {
    width: 100%;
  }

  .control-buttons {
    width: 100%;
  }

  .control-buttons .control-button {
    flex: 1;
  }
}


/* ==========================================================
   CAMERA STATUS INDICATORS
   ========================================================== */

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

.status-card {
  min-height: 112px;
  padding: 16px 14px;
  border: 1px solid #274a63;
  border-radius: 16px;
  background: #0b1f30;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;
  text-align: center;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.status-card .status-icon {
  font-size: 25px;
  line-height: 1;
  opacity: .55;
  margin-bottom: 3px;
}

.status-card span {
  font-size: 14px;
  opacity: .72;
}

.status-card strong {
  font-size: 16px;
  font-weight: 700;
}

.status-card.status-active {
  background: #123449;
  border-color: #37bde5;
  box-shadow: 0 0 0 1px rgba(55, 189, 229, .18);
}

.status-card.status-active .status-icon {
  opacity: 1;
}

.status-card.status-active strong {
  color: #7ce7ff;
}

#card-door.status-active {
  background: #493515;
  border-color: #d99a32;
  box-shadow: 0 0 0 1px rgba(217, 154, 50, .20);
}

#card-door.status-active strong {
  color: #ffd58a;
}

@media (max-width: 700px) {
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .status-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   CAREL GLOBAL ALARM STATUS
   ========================================================== */

.alarm-overview {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 18px;
  padding: 16px 18px;

  border: 1px solid #285066;
  border-radius: 16px;

  background: #0c2433;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.alarm-overview-icon {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #153f43;

  font-size: 25px;
  font-weight: 700;
}

.alarm-overview-text {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alarm-overview-text span {
  font-size: 13px;
  opacity: .68;
}

.alarm-overview-text strong {
  font-size: 19px;
}

.alarm-overview-text small {
  font-size: 13px;
  opacity: .72;
}

.alarm-overview.alarm-normal {
  background: #102d2e;
  border-color: #30765f;
}

.alarm-overview.alarm-normal .alarm-overview-icon {
  background: #185441;
}

.alarm-overview.alarm-normal strong {
  color: #8ce6bd;
}

.alarm-overview.alarm-active {
  background: #431d22;
  border-color: #b44451;

  box-shadow:
    0 0 0 1px rgba(180, 68, 81, .18),
    0 0 18px rgba(180, 68, 81, .10);
}

.alarm-overview.alarm-active .alarm-overview-icon {
  background: #7b2933;
}

.alarm-overview.alarm-active strong {
  color: #ff9ea9;
}

.alarm-overview.alarm-unknown {
  background: #352d18;
  border-color: #806c32;
}

.alarm-overview.alarm-unknown .alarm-overview-icon {
  background: #55471e;
}

.alarm-overview.alarm-unknown strong {
  color: #f2d681;
}


/* ==========================================================
   CAMERA DASHBOARD
   ========================================================== */

.camera-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.camera-dashboard-card {
  width: 100%;
  min-height: 185px;
  padding: 17px;

  text-align: left;

  border: 1px solid #274a63;
  border-radius: 17px;

  background: #0b1f30;
  color: inherit;

  display: flex;
  flex-direction: column;
  gap: 10px;

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .15s ease;
}

.camera-dashboard-card:hover {
  border-color: #3d7899;
}

.camera-dashboard-card:active {
  transform: scale(.99);
}

.camera-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.camera-dashboard-head > strong {
  font-size: 18px;
}

.camera-dashboard-state {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-state-online {
  color: #8ce6bd;
}

.dashboard-state-alarm {
  color: #ff9ea9;
}

.dashboard-state-error {
  color: #e0b770;
}

.camera-dashboard-temp {
  font-size: 31px;
  line-height: 1.05;
  font-weight: 800;
}

.camera-dashboard-product {
  font-size: 13px;
  opacity: .78;
}

.camera-dashboard-product strong {
  font-size: 14px;
}

.camera-dashboard-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: auto;
}

.camera-dashboard-indicators span {
  padding: 5px 8px;

  border: 1px solid #29485d;
  border-radius: 999px;

  background: #102536;

  font-size: 11px;
  opacity: .55;
}

.camera-dashboard-indicators span.dashboard-status-active {
  border-color: #36b8dd;
  background: #123a4b;
  color: #8cecff;
  opacity: 1;
}

.camera-dashboard-indicators
span[data-status="door"].dashboard-status-active {
  border-color: #d79a39;
  background: #493515;
  color: #ffd58a;
}

.camera-dashboard-door-open {
  border-color: #9d7530;
}

.camera-dashboard-error {
  opacity: .72;
}

@media (max-width: 650px) {
  .camera-list {
    grid-template-columns: 1fr;
  }

  .camera-dashboard-card {
    min-height: 170px;
  }
}


/* ===== YUGHOLod LOGIN DESIGN beta 0.1 ===== */

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    20px
    max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% -10%, rgba(25,145,255,.38), transparent 37%),
    radial-gradient(circle at 100% 100%, rgba(14,91,174,.20), transparent 30%),
    linear-gradient(145deg, #071827 0%, #08223a 50%, #061421 100%);
}

.login-screen .login-card {
  position: relative;
  width: min(94vw, 500px);
  margin: 0;
  padding: 42px 38px 30px;
  overflow: hidden;

  background:
    linear-gradient(145deg,
      rgba(10,42,67,.96),
      rgba(5,28,47,.98));

  border: 1px solid rgba(36,161,255,.72);
  border-radius: 22px;

  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    0 0 32px rgba(0,140,255,.10),
    inset 0 1px rgba(255,255,255,.035);
}

.login-brand {
  width: min(100%, 340px);
  margin: 0 auto 32px;
  padding: 13px 18px;
  border-radius: 12px;
  background: #fff;

  box-shadow:
    0 8px 25px rgba(0,0,0,.22),
    0 0 18px rgba(69,159,255,.12);
}

.login-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.login-title {
  margin: 0 0 40px;
  text-align: center;

  font-family:
    Inter,
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;

  font-size: clamp(25px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.7px;

  color: #43aaff;

  text-shadow:
    0 0 22px rgba(43,160,255,.12);
}

.login-fields label {
  margin: 18px 0 8px;
  color: #f1f7ff;
  font-size: 15px;
  font-weight: 650;
}

.login-input-wrap {
  position: relative;
}

.login-input-wrap input {
  height: 58px;
  padding: 0 18px 0 54px;

  border: 1px solid #4284b5;
  border-radius: 12px;

  background: rgba(4,26,44,.62);
  color: #fff;

  font-size: 16px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.login-input-wrap input::placeholder {
  color: #809db6;
}

.login-input-wrap input:focus {
  border-color: #31a8ff;
  background: rgba(5,31,52,.85);
  box-shadow:
    0 0 0 3px rgba(49,168,255,.10),
    0 0 20px rgba(49,168,255,.08);
}

.login-input-icon {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);

  width: 23px;
  text-align: center;

  color: #8eb6d8;
  font-size: 22px;

  pointer-events: none;
}

.login-screen .login-submit {
  width: 100%;
  min-height: 58px;
  margin-top: 30px;

  border-radius: 12px;

  background:
    linear-gradient(90deg, #25a9f4, #078cff);

  box-shadow:
    0 8px 24px rgba(0,139,255,.20),
    0 0 18px rgba(0,157,255,.10);

  font-size: 18px;
  font-weight: 700;

  transition:
    transform .15s ease,
    filter .15s ease;
}

.login-screen .login-submit:hover {
  filter: brightness(1.08);
}

.login-screen .login-submit:active {
  transform: translateY(1px);
}

.login-arrow {
  display: inline-block;
  margin-left: 10px;
  font-size: 25px;
  font-weight: 400;
  vertical-align: -2px;
}

.login-screen #login-error {
  margin: 18px 0 0;
}

.login-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;

  margin-top: 35px;

  color: #8ca9c1;
}

.login-footer span {
  height: 1px;
  background: #7c9ab2;
  opacity: .8;
}

.login-footer strong {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .1px;
}

.login-version {
  margin-top: 12px;
  text-align: right;

  color: #6f8da6;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
}

@media (max-width: 560px) {
  .login-screen {
    padding-left: 14px;
    padding-right: 14px;
  }

  .login-screen .login-card {
    width: 100%;
    padding: 30px 22px 22px;
    border-radius: 19px;
  }

  .login-brand {
    width: min(100%, 290px);
    margin-bottom: 27px;
  }

  .login-title {
    margin-bottom: 31px;
    font-size: clamp(23px, 7vw, 29px);
  }

  .login-input-wrap input {
    height: 55px;
  }

  .login-screen .login-submit {
    min-height: 55px;
  }

  .login-footer {
    margin-top: 29px;
  }
}


/* ===== HEADER LOGO ===== */

.topbar-brand {
  justify-self: center;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(0,0,0,.18),
    0 0 12px rgba(57,169,255,.06);
}

.topbar-brand img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 210px;
  object-fit: contain;
}

@media (max-width: 560px) {
  .topbar-brand {
    padding: 4px 7px;
    border-radius: 7px;
  }

  .topbar-brand img {
    height: 27px;
    max-width: 155px;
  }
}

/* ===== Temperature layout: 2 cards + 3 cards ===== */

.temperature-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.temperature-grid > :nth-child(1),
.temperature-grid > :nth-child(2) {
  grid-column: span 3;
}

.temperature-grid > :nth-child(3),
.temperature-grid > :nth-child(4),
.temperature-grid > :nth-child(5) {
  grid-column: span 2;
  height: 100%;
  min-height: 116px;
}

.temperature-grid .metric {
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .temperature-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .temperature-grid > :nth-child(1),
  .temperature-grid > :nth-child(2) {
    grid-column: span 3;
  }

  .temperature-grid > :nth-child(3),
  .temperature-grid > :nth-child(4),
  .temperature-grid > :nth-child(5) {
    grid-column: span 2;
  }
}

/* Dashboard: logout button at right edge */
#camera-list-screen .topbar {
  grid-template-columns: auto 1fr auto;
}

#camera-list-screen .topbar > :last-child {
  grid-column: 3;
  justify-self: end;
}


@media (min-width: 561px) {
  #camera-list-screen .topbar {
    grid-template-columns: auto 1fr auto;
  }

  #camera-list-screen .topbar-brand {
    grid-column: 1;
    justify-self: start;
  }

  #camera-list-screen .topbar > :last-child {
    grid-column: 3;
    justify-self: end;
  }
}



/* ===== UI update 2026-09-04 ===== */

/* Six equal temperature tiles */
.temperature-grid > :nth-child(1),
.temperature-grid > :nth-child(2),
.temperature-grid > :nth-child(3),
.temperature-grid > :nth-child(4),
.temperature-grid > :nth-child(5),
.temperature-grid > :nth-child(6) {
  grid-column: span 2;
  height: 100%;
  min-height: 116px;
}

/* Status cards retain the existing spacing */
.status-card {
  gap: 8px;
}

.status-card .status-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  display: grid;
  place-items: center;
  color: #9fb8ca;
  opacity: .72;
  line-height: 1;
}

.status-icon-snow {
  font-size: 34px !important;
}

.status-icon-fan {
  font-size: 37px !important;
}

.status-icon-timer {
  font-size: 39px !important;
}

.status-icon-defrost {
  width: 32px !important;
  height: 32px !important;
  background-color: currentColor;
  -webkit-mask:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAABKCAMAAAA2cAzYAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURf///52vxBWfXlIAAAABdFJOUwBA5thmAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAAd0SU1FB+oJBBEYIrPmd5gAAAFrSURBVFjDzZYLjsMwCETN/S+9Ups4wMyA7e6qa6mpGng2/3oMvczG4bJjdJ+8ify9RJojbOPsS3c+N4x+a9+PG7SS8Oj1sSwsyRdxrbFGIkpkNTkSuEGOCErSiC8UzHxKviYxu+ZSqEljZWEzhYXXwlcQkUir8BZ5KDk4FeuixEKhGohMYy5+LhEzsJkOb/wOYSfmLt+IW9g0ugbbdQx+g1x2k8RPs6QPwk8RXtIVU2WK/LcFLe3ZU0xSxuOC3rfROu1P2BbJ0tTtOfQEVpPUZBf4gmRj8xkDoyTlPxp4FmSjWE2drZGsYimSLcJq447C27tbohWcNHd0upsEkjUZbOSfXJV1r/OhOETHAu590MD50JQHFXHZ7vSNU9WTopw4JYn1ElT76cTJNFbbef7nZDmSrfITd9IhQsXFrBA1aS8WRtYqakjMb+17k4Ll6qhydwx+QO6hx+RGMf8D8pcitAV+ctfsr0Adq8U/qPIFF7bFsOsAAAAASUVORK5CYII=")
    center / contain no-repeat;
  mask:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAABKCAMAAAA2cAzYAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURf///52vxBWfXlIAAAABdFJOUwBA5thmAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAAd0SU1FB+oJBBEYIrPmd5gAAAFrSURBVFjDzZYLjsMwCETN/S+9Ups4wMyA7e6qa6mpGng2/3oMvczG4bJjdJ+8ify9RJojbOPsS3c+N4x+a9+PG7SS8Oj1sSwsyRdxrbFGIkpkNTkSuEGOCErSiC8UzHxKviYxu+ZSqEljZWEzhYXXwlcQkUir8BZ5KDk4FeuixEKhGohMYy5+LhEzsJkOb/wOYSfmLt+IW9g0ugbbdQx+g1x2k8RPs6QPwk8RXtIVU2WK/LcFLe3ZU0xSxuOC3rfROu1P2BbJ0tTtOfQEVpPUZBf4gmRj8xkDoyTlPxp4FmSjWE2drZGsYimSLcJq447C27tbohWcNHd0upsEkjUZbOSfXJV1r/OhOETHAu590MD50JQHFXHZ7vSNU9WTopw4JYn1ElT76cTJNFbbef7nZDmSrfITd9IhQsXFrBA1aS8WRtYqakjMb+17k4Ll6qhydwx+QO6hx+RGMf8D8pcitAV+ctfsr0Adq8U/qPIFF7bFsOsAAAAASUVORK5CYII=")
    center / contain no-repeat;
}

.status-card.status-active .status-icon {
  color: #7ce7ff;
}

/* Dashboard icon-only states */
.camera-dashboard-indicators span[data-status] {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 0;
  color: #9fb8ca;
}

.camera-dashboard-indicators span[data-status]::before {
  display: block;
  line-height: 1;
}

.camera-dashboard-indicators span[data-status="solenoid"]::before {
  content: "❄";
  font-size: 27px;
}

.camera-dashboard-indicators span[data-status="fans"]::before {
  content: "✣";
  font-size: 30px;
}

.camera-dashboard-indicators span[data-status="door"]::before {
  content: "◴";
  font-size: 31px;
}

.camera-dashboard-indicators span[data-status="defrost"]::before {
  content: "";
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAABKCAMAAAA2cAzYAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURf///52vxBWfXlIAAAABdFJOUwBA5thmAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAAd0SU1FB+oJBBEYIrPmd5gAAAFrSURBVFjDzZYLjsMwCETN/S+9Ups4wMyA7e6qa6mpGng2/3oMvczG4bJjdJ+8ify9RJojbOPsS3c+N4x+a9+PG7SS8Oj1sSwsyRdxrbFGIkpkNTkSuEGOCErSiC8UzHxKviYxu+ZSqEljZWEzhYXXwlcQkUir8BZ5KDk4FeuixEKhGohMYy5+LhEzsJkOb/wOYSfmLt+IW9g0ugbbdQx+g1x2k8RPs6QPwk8RXtIVU2WK/LcFLe3ZU0xSxuOC3rfROu1P2BbJ0tTtOfQEVpPUZBf4gmRj8xkDoyTlPxp4FmSjWE2drZGsYimSLcJq447C27tbohWcNHd0upsEkjUZbOSfXJV1r/OhOETHAu590MD50JQHFXHZ7vSNU9WTopw4JYn1ElT76cTJNFbbef7nZDmSrfITd9IhQsXFrBA1aS8WRtYqakjMb+17k4Ll6qhydwx+QO6hx+RGMf8D8pcitAV+ctfsr0Adq8U/qPIFF7bFsOsAAAAASUVORK5CYII=")
    center / contain no-repeat;
  mask:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAABKCAMAAAA2cAzYAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURf///52vxBWfXlIAAAABdFJOUwBA5thmAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAAd0SU1FB+oJBBEYIrPmd5gAAAFrSURBVFjDzZYLjsMwCETN/S+9Ups4wMyA7e6qa6mpGng2/3oMvczG4bJjdJ+8ify9RJojbOPsS3c+N4x+a9+PG7SS8Oj1sSwsyRdxrbFGIkpkNTkSuEGOCErSiC8UzHxKviYxu+ZSqEljZWEzhYXXwlcQkUir8BZ5KDk4FeuixEKhGohMYy5+LhEzsJkOb/wOYSfmLt+IW9g0ugbbdQx+g1x2k8RPs6QPwk8RXtIVU2WK/LcFLe3ZU0xSxuOC3rfROu1P2BbJ0tTtOfQEVpPUZBf4gmRj8xkDoyTlPxp4FmSjWE2drZGsYimSLcJq447C27tbohWcNHd0upsEkjUZbOSfXJV1r/OhOETHAu590MD50JQHFXHZ7vSNU9WTopw4JYn1ElT76cTJNFbbef7nZDmSrfITd9IhQsXFrBA1aS8WRtYqakjMb+17k4Ll6qhydwx+QO6hx+RGMf8D8pcitAV+ctfsr0Adq8U/qPIFF7bFsOsAAAAASUVORK5CYII=")
    center / contain no-repeat;
}

.camera-dashboard-indicators span.dashboard-status-active {
  color: #7ce7ff;
}

@media (max-width: 560px) {
  .temperature-grid > :nth-child(1),
  .temperature-grid > :nth-child(2),
  .temperature-grid > :nth-child(3),
  .temperature-grid > :nth-child(4),
  .temperature-grid > :nth-child(5),
  .temperature-grid > :nth-child(6) {
    grid-column: span 2;
  }
}


/* ===== Typography and fan icon correction ===== */

/* All temperature cards use exactly the same typography and alignment */
.temperature-grid .metric,
.temperature-grid button.metric {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: left;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.temperature-grid .metric span,
.temperature-grid button.metric span {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: #9fb8ca;
}

.temperature-grid .metric strong,
.temperature-grid button.metric strong {
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: normal;
  margin-top: 7px;
}

.temperature-grid .metric small,
.temperature-grid button.metric small {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  margin-top: 8px;
}

/* Proper fan icon on the camera page */
.status-icon-fan {
  font-size: 0 !important;
}

.status-icon-fan svg {
  display: block;
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The same fan icon on the main page */
.camera-dashboard-indicators span[data-status="fans"]::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ===== Unified control and settings typography ===== */

.controls-list,
.settings-list {
  font-family: inherit;
  color: #eaf3ff;
}

.control-row,
.setting-row {
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  line-height: normal;
}

.setting-row {
  appearance: none;
  -webkit-appearance: none;
  color: #eaf3ff;
  font-weight: 400;
}

.control-row b,
.setting-row b {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.setting-row strong {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #eaf3ff;
}

.section > h3 {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}


/* Исправленная кроссплатформенная иконка таймера */
.status-icon-timer {
  font-size: 0 !important;
}

.status-icon-timer svg {
  display: block;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-dashboard-indicators span[data-status="door"]::before {
  content: "" !important;
  display: block;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M12 9v4l3 2M9 2h6M12 2v3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M12 9v4l3 2M9 2h6M12 2v3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* JOURNAL SCREEN */

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

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

.journal-toolbar select {
  min-width: 220px;
  padding: 11px 38px 11px 13px;
  border: 1px solid #31546c;
  border-radius: 10px;
  background: #102536;
  color: #eaf3ff;
  font: inherit;
  font-weight: 700;
  outline: none;
}

.journal-toolbar select:focus {
  border-color: #39a9ff;
}

#journal-count {
  color: #9fb8ca;
  font-size: 14px;
  white-space: nowrap;
}

.journal-list {
  display: grid;
  gap: 11px;
}

.journal-item {
  padding: 15px 16px;
  border: 1px solid #274a63;
  border-left: 5px solid #3d7899;
  border-radius: 13px;
  background: #0f2232;
}

.journal-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.journal-item-head time {
  color: #9fb8ca;
  font-size: 13px;
}

.journal-item-head > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #18364c;
  color: #b9dbef;
  font-size: 11px;
  font-weight: 800;
}

.journal-item > strong {
  display: block;
  line-height: 1.4;
}

.journal-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.journal-item-meta span {
  padding: 5px 8px;
  border: 1px solid #29485d;
  border-radius: 999px;
  color: #aac2d2;
  font-size: 12px;
}

.journal-failed,
.journal-alarm {
  border-left-color: #e1505a;
  background: #2b1820;
}

.journal-failed .journal-item-head > span,
.journal-alarm .journal-item-head > span {
  background: #612833;
  color: #ffd7dc;
}

.journal-cleared {
  border-left-color: #48b987;
}

.journal-cleared .journal-item-head > span {
  background: #194b3a;
  color: #baf2d8;
}

.journal-notification {
  border-left-color: #d49a39;
}

.journal-notification .journal-item-head > span {
  background: #554019;
  color: #ffe0a1;
}

.journal-empty {
  padding: 28px 16px;
  border: 1px dashed #31546c;
  border-radius: 13px;
  color: #9fb8ca;
  text-align: center;
}

@media (max-width: 560px) {
  .topbar-actions {
    gap: 5px;
  }

  .topbar-actions button {
    padding: 10px 11px;
  }

  .journal-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .journal-toolbar select {
    width: 100%;
    min-width: 0;
  }

  #journal-count {
    padding-left: 2px;
  }

  .journal-item-head {
    align-items: flex-start;
  }
}


/* USERS SCREEN */

.users-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.users-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.user-card {
  padding: 16px;
  border: 1px solid #274a63;
  border-radius: 14px;
  background: #0f2232;
}

.user-card-inactive {
  opacity: .58;
  border-color: #57414a;
}

.user-card-head,
.user-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-card-head > div {
  min-width: 0;
}

.user-card-head strong,
.user-card-head > div > span {
  display: block;
}

.user-card-head strong {
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card-head > div > span {
  margin-top: 4px;
  color: #9fb8ca;
  font-size: 13px;
}

.user-role {
  padding: 5px 8px;
  border: 1px solid #31546c;
  border-radius: 999px;
  color: #b9dbef;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.user-card-footer {
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1px solid #213f54;
}

.user-state {
  color: #8ce6bd;
  font-size: 13px;
  font-weight: 700;
}

.user-card-inactive .user-state {
  color: #ff9ea9;
}

.user-edit-btn {
  padding: 9px 12px;
}

#user-dialog .dialog-card {
  width: min(460px, calc(100vw - 28px));
}

#user-dialog select {
  width: 100%;
  padding: 12px;
  border: 1px solid #31546c;
  border-radius: 10px;
  background: #102536;
  color: #eaf3ff;
  font: inherit;
  outline: none;
}

#user-dialog select:focus {
  border-color: #39a9ff;
}

#user-dialog select:disabled,
#user-dialog input:disabled {
  opacity: .65;
}

.user-active-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  color: #d8e9f5;
  cursor: pointer;
}

.user-active-row input {
  width: 20px;
  height: 20px;
  margin: 0;
}

@media (max-width: 650px) {
  .users-list {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .topbar-actions button {
    padding: 9px 10px;
    font-size: 12px;
  }

  .users-toolbar button {
    width: 100%;
  }
}


/* Push notification settings */

.push-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #29445a;
  border-radius: 16px;
  background: #102235;
}

.push-settings strong,
.push-settings span {
  display: block;
}

.push-settings span {
  margin-top: 4px;
  color: #9fb7ca;
  font-size: 14px;
}

.push-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.push-actions button {
  width: auto;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .push-settings {
    align-items: stretch;
    flex-direction: column;
  }

  .push-actions {
    width: 100%;
  }

  .push-actions button {
    flex: 1;
  }
}


/* Main dropdown navigation */

.main-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-icon-button {
  display: inline-flex;
  width: 46px;
  height: 46px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
}

.topbar-icon-button svg,
.main-menu-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main-menu-wrap {
  position: relative;
}

.main-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 10px);
  right: 0;
  width: 270px;
  padding: 8px;
  border: 1px solid #29445a;
  border-radius: 16px;
  background: #102235;
  box-shadow: 0 18px 42px rgb(0 0 0 / 45%);
}

.main-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
}

.main-menu-item + .main-menu-item {
  margin-top: 4px;
}

.main-menu-separator {
  height: 1px;
  margin: 8px 5px;
  background: #29445a;
}

.main-menu-logout {
  color: #ff9a9f;
}

.push-dialog {
  width: min(560px, calc(100% - 28px));
  padding: 18px;
  border: 1px solid #29445a;
  border-radius: 18px;
  color: #eef6ff;
  background: #0d1d2c;
}

.push-dialog::backdrop {
  background: rgb(0 0 0 / 65%);
}

.push-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.push-dialog-header h3 {
  margin: 0;
}

.push-dialog .push-settings {
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  .main-menu {
    width: min(270px, calc(100vw - 28px));
  }

  .topbar-icon-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .push-dialog {
    padding: 14px;
  }
}


/* About and release history */

.about-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #29445a;
  border-radius: 18px;
  color: #eef6ff;
  background: #0d1d2c;
}

.about-dialog::backdrop {
  background: rgb(0 0 0 / 65%);
}

.about-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #29445a;
}

.about-dialog-header h3 {
  margin: 0;
}

.about-dialog-body {
  max-height: calc(100vh - 115px);
  padding: 20px;
  overflow-y: auto;
}

.about-logo {
  display: flex;
  justify-content: center;
  padding: 6px 0 24px;
}

.about-logo img {
  display: block;
  width: min(310px, 82%);
  max-height: 90px;
  object-fit: contain;
}

.about-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}

.about-contact {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #29445a;
  border-radius: 14px;
  color: #8ed4ff;
  background: #102235;
  text-decoration: none;
}

.about-contact:hover {
  background: #173149;
}

.about-contact svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-contact span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.updates-title {
  margin: 0 0 8px;
}

.release-entry {
  border-top: 1px solid #29445a;
}

.release-entry summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
}

.release-entry ul {
  margin: 0 0 18px;
  padding-left: 23px;
  color: #b5c8d6;
}

.release-entry li + li {
  margin-top: 7px;
}

.current-version {
  color: #6bda91;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .about-dialog-body {
    padding: 16px;
  }

  .about-contacts {
    grid-template-columns: 1fr;
  }

  .about-logo img {
    width: min(280px, 90%);
  }
}


/* ==========================================================
   PRACK PR300 CONTROLLER
   ========================================================== */

.controller-dashboard-card {
  cursor: default;
  border-color: #32637d;
  background: linear-gradient(145deg, #0d283a, #0a1d2d);
}

.controller-dashboard-card:hover {
  border-color: #32637d;
}

.controller-dashboard-card:active {
  transform: none;
}

.controller-dashboard-model {
  margin-top: 5px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: #eaf7ff;
}

.controller-dashboard-address {
  font-size: 13px;
  opacity: .8;
}

.controller-dashboard-address strong {
  color: #9bdcff;
}

.controller-dashboard-footer {
  width: fit-content;
  margin-top: auto;
  padding: 5px 9px;
  border: 1px solid #31556d;
  border-radius: 999px;
  background: #102b3d;
  color: #a8d9f5;
  font-size: 11px;
  font-weight: 700;
}

.controller-dashboard-offline {
  border-color: #7d6232;
}


/* ==========================================================
   PRACK PR300 DETAIL SCREEN
   ========================================================== */

.controller-dashboard-values {
  display: grid;
  gap: 5px;
  font-size: 13px;
  opacity: .86;
}

.controller-dashboard-values strong {
  color: #dff5ff;
}

.controller-dashboard-compressors {
  display: flex;
  gap: 7px;
  margin-top: auto;
}

.controller-dashboard-compressors span {
  min-width: 34px;
  padding: 5px 8px;
  border: 1px solid #31556d;
  border-radius: 999px;
  text-align: center;
  color: #7793a7;
  font-size: 11px;
  font-weight: 800;
}

.controller-dashboard-compressors
.controller-compressor-active {
  border-color: #25b987;
  background: #103b32;
  color: #8ff0c5;
}

.prack-screen-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}

.prack-screen-heading > div {
  display: grid;
  gap: 4px;
}

.prack-screen-heading span {
  font-size: 13px;
  opacity: .8;
}

.prack-screen-heading strong {
  font-size: 19px;
}

.prack-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.prack-value-card {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid #294b62;
  border-radius: 15px;
  background: #0b1f30;
}

.prack-value-card span {
  font-size: 12px;
  opacity: .72;
}

.prack-value-card strong {
  color: #eaf8ff;
  font-size: 25px;
}

.prack-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 24px;
}

.prack-status-grid > div {
  padding: 12px;
  border: 1px solid #29485d;
  border-radius: 12px;
  background: #102536;
  color: #7892a5;
  font-size: 12px;
  font-weight: 700;
}

.prack-status-grid > div.prack-status-active {
  border-color: #25b987;
  background: #103b32;
  color: #8ff0c5;
}

.prack-data-table {
  display: grid;
  gap: 1px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid #29485d;
  border-radius: 14px;
  background: #29485d;
}

.prack-data-table > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 49px;
  padding: 11px 14px;
  background: #0b1f30;
}

.prack-data-table span {
  font-size: 13px;
  opacity: .78;
}

.prack-data-table strong {
  text-align: right;
  color: #eaf8ff;
  white-space: nowrap;
}

@media (max-width: 650px) {
  .prack-overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .prack-status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .prack-value-card strong {
    font-size: 21px;
  }

  .prack-data-table > div {
    align-items: flex-start;
  }
}


/* Команды pRack, не подтверждённая физическая работа */
.prack-command-note {
  margin: -4px 0 14px;
  padding: 11px 13px;
  border: 1px solid #6d582e;
  border-radius: 12px;
  background: #302817;
  color: #e6c980;
  font-size: 12px;
  line-height: 1.45;
}

.controller-dashboard-compressors
.controller-compressor-active,
.prack-status-grid > div.prack-status-active {
  border-color: #bc842d;
  background: #3b2c16;
  color: #ffd483;
}


/* PRACK EQUIPMENT ICONS */
.prack-status-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prack-equipment-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

.prack-fan-icon {
  width: 27px;
  height: 27px;
}

.dashboard-state-warning {
  color: #e6bd68 !important;
}

.dashboard-state-loading {
  color: #9fb8ca !important;
}

#prack-error.prack-stale-warning {
  border-color: #765c27;
  background: #332916;
  color: #f0cd81;
}

@media (max-width: 650px) {
  .prack-equipment-icon {
    width: 27px;
    height: 23px;
  }

  .prack-fan-icon {
    width: 25px;
    height: 25px;
  }
}


/* ==========================================================
   PRACK EDITABLE SETTINGS
   ========================================================== */

.prack-data-table > .prack-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 49px;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: #0b1f30;
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: none;
}

.prack-data-table > .prack-setting-row:not(:disabled) {
  cursor: pointer;
}

.prack-data-table > .prack-setting-row:not(:disabled):hover {
  background: #102a3f;
}

.prack-data-table > .prack-setting-row:not(:disabled):focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #2f9fe5;
  outline-offset: -2px;
}

.prack-setting-result {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  white-space: nowrap;
}

.prack-edit-arrow {
  color: #69bff3;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.prack-setting-row.prack-setting-readonly
.prack-edit-arrow {
  display: none;
}

.prack-setting-row:disabled {
  opacity: 1;
}

#prack-success {
  margin-bottom: 16px;
}

@media (max-width: 650px) {
  .prack-data-table > .prack-setting-row {
    align-items: flex-start;
  }

  .prack-setting-result {
    gap: 8px;
  }
}


/* ==========================================================
   VER. 0.5 — PRACK DASHBOARD CARD
   ========================================================== */

.controller-dashboard-card {
  grid-column: 1 / -1;
  min-height: 185px;
  cursor: pointer;
  border-color: #274a63;
  background: #0b1f30;
}

.controller-dashboard-card:hover {
  border-color: #3d7899;
}

.controller-dashboard-card:active {
  transform: scale(.99);
}

.controller-dashboard-card
.camera-dashboard-head > strong {
  font-size: 18px;
  line-height: normal;
  font-weight: 700;
}

.controller-dashboard-fan {
  display: flex;
  align-items: center;
  gap: 11px;
}

.controller-dashboard-fan-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  fill: none;
  stroke: #7894a8;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.controller-dashboard-fan > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.controller-dashboard-fan span {
  color: #9fb8ca;
  font-size: 13px;
}

.controller-dashboard-fan strong {
  font-size: 31px;
  line-height: 1.05;
  font-weight: 800;
}

.controller-dashboard-values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  font-size: 13px;
}

.controller-dashboard-values strong {
  font-size: 14px;
}

.controller-dashboard-compressors {
  flex-wrap: wrap;
}

.prack-screen-heading > div {
  display: block;
}

.prack-screen-heading strong {
  font-size: 19px;
}


/* ==========================================================
   VER. 0.5 — SETTINGS AND THEME
   ========================================================== */

.settings-dialog {
  width: min(560px, calc(100% - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #29445a;
  border-radius: 18px;
  color: #eef6ff;
  background: #0d1d2c;
}

.settings-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #29445a;
}

.settings-dialog-header h3 {
  margin: 0;
}

.settings-dialog-body {
  padding: 20px;
}

.theme-setting {
  display: grid;
  gap: 16px;
}

.theme-setting > div:first-child {
  display: grid;
  gap: 4px;
}

.theme-setting > div:first-child span {
  color: #9fb8ca;
  font-size: 14px;
}

.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.theme-option {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #31546c;
  background: #102536;
  color: #b7cbd9;
}

.theme-option svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-option-active {
  border-color: #39a9ff;
  background: #123a55;
  color: #8fd5ff;
  box-shadow: 0 0 0 1px rgb(57 169 255 / 18%);
}


/* ==========================================================
   VER. 0.5 — LIGHT THEME
   ========================================================== */

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="light"] body {
  background: #eef4f8;
  color: #19364b;
}

:root[data-theme="light"] .topbar {
  background: #ffffff;
  border-bottom-color: #c9d9e4;
  box-shadow: 0 5px 20px rgb(32 72 99 / 7%);
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .metric,
:root[data-theme="light"] .status-list,
:root[data-theme="light"] .settings-list,
:root[data-theme="light"] .dialog-card,
:root[data-theme="light"] .controls-list,
:root[data-theme="light"] .status-card,
:root[data-theme="light"] .camera-dashboard-card,
:root[data-theme="light"] .prack-value-card,
:root[data-theme="light"] .user-card,
:root[data-theme="light"] .journal-card {
  border-color: #c4d6e2;
  background: #ffffff;
  color: #19364b;
}

:root[data-theme="light"] .controller-dashboard-card {
  background: #ffffff;
  border-color: #bdd2df;
}

:root[data-theme="light"] .controller-dashboard-card:hover,
:root[data-theme="light"] .camera-dashboard-card:hover {
  border-color: #6da3c5;
}

:root[data-theme="light"] .metric,
:root[data-theme="light"] .metric strong,
:root[data-theme="light"] .prack-value-card strong,
:root[data-theme="light"] .prack-data-table strong,
:root[data-theme="light"] .controller-dashboard-values strong,
:root[data-theme="light"] .controller-dashboard-fan strong {
  color: #17364c;
}

:root[data-theme="light"] .muted,
:root[data-theme="light"] .updated,
:root[data-theme="light"] .hint,
:root[data-theme="light"] small,
:root[data-theme="light"] .metric span,
:root[data-theme="light"] .camera-dashboard-product,
:root[data-theme="light"] .controller-dashboard-fan span,
:root[data-theme="light"] .theme-setting > div:first-child span {
  color: #627f93;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] #user-dialog select {
  border-color: #abc3d3;
  background: #ffffff;
  color: #19364b;
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] #user-dialog select:focus {
  border-color: #218fda;
  box-shadow: 0 0 0 3px rgb(33 143 218 / 10%);
}

:root[data-theme="light"] .secondary {
  background: #e3edf4;
  color: #234c67;
}

:root[data-theme="light"] .main-menu {
  border-color: #c4d6e2;
  background: #ffffff;
  box-shadow: 0 18px 42px rgb(32 72 99 / 18%);
}

:root[data-theme="light"] .main-menu-separator {
  background: #d4e1e9;
}

:root[data-theme="light"] .main-menu-logout {
  color: #b72e3b;
}

:root[data-theme="light"] .settings-dialog,
:root[data-theme="light"] .push-dialog,
:root[data-theme="light"] .about-dialog {
  border-color: #c4d6e2;
  background: #f8fbfd;
  color: #19364b;
}

:root[data-theme="light"] .settings-dialog-header,
:root[data-theme="light"] .about-dialog-header {
  border-bottom-color: #d2e0e8;
}

:root[data-theme="light"] .theme-option {
  border-color: #bdd1de;
  background: #ffffff;
  color: #526f83;
}

:root[data-theme="light"] .theme-option-active {
  border-color: #218fda;
  background: #e2f3ff;
  color: #126ea9;
}

:root[data-theme="light"] .push-settings,
:root[data-theme="light"] .about-contact {
  border-color: #c4d6e2;
  background: #ffffff;
  color: #176f9f;
}

:root[data-theme="light"] .push-settings span {
  color: #627f93;
}

:root[data-theme="light"] .about-contact:hover {
  background: #edf7fc;
}

:root[data-theme="light"] .release-entry {
  border-top-color: #d2e0e8;
}

:root[data-theme="light"] .release-entry ul,
:root[data-theme="light"] .whats-new-list {
  color: #4f6c80;
}

:root[data-theme="light"] .prack-data-table {
  border-color: #c5d6e1;
  background: #c5d6e1;
}

:root[data-theme="light"] .prack-data-table > div,
:root[data-theme="light"] .prack-data-table > .prack-setting-row {
  background: #ffffff;
  color: #19364b;
}

:root[data-theme="light"]
.prack-data-table > .prack-setting-row:not(:disabled):hover {
  background: #edf7fc;
}

:root[data-theme="light"] .prack-status-grid > div {
  border-color: #c4d6e2;
  background: #edf3f7;
  color: #637f92;
}

:root[data-theme="light"]
.controller-dashboard-compressors span {
  border-color: #b8cdda;
  background: #f3f7fa;
  color: #607d90;
}

:root[data-theme="light"]
.controller-dashboard-compressors
.controller-compressor-active,
:root[data-theme="light"]
.prack-status-grid > div.prack-status-active {
  border-color: #c18426;
  background: #fff0d1;
  color: #8a5708;
}

:root[data-theme="light"] .prack-command-note,
:root[data-theme="light"] #prack-error.prack-stale-warning {
  border-color: #d3a958;
  background: #fff5dc;
  color: #795313;
}

:root[data-theme="light"] .status-list > div,
:root[data-theme="light"] .setting-row,
:root[data-theme="light"] .control-row {
  border-bottom-color: #d7e3ea;
  color: #19364b;
}

:root[data-theme="light"] .setting-row {
  background: transparent;
}

:root[data-theme="light"] .status-card.status-active {
  border-color: #34a9d0;
  background: #e1f6fc;
}

:root[data-theme="light"] .status-card.status-active strong {
  color: #087997;
}

:root[data-theme="light"] #card-door.status-active {
  border-color: #d39a39;
  background: #fff0d4;
}

:root[data-theme="light"] #card-door.status-active strong {
  color: #8b5b0b;
}

:root[data-theme="light"] .alarm-overview {
  border-color: #c4d6e2;
  background: #ffffff;
}

:root[data-theme="light"] .alarm-overview.alarm-normal {
  border-color: #76b79c;
  background: #e9f8f1;
}

:root[data-theme="light"] .alarm-overview.alarm-normal
.alarm-overview-icon {
  background: #cbeedd;
}

:root[data-theme="light"] .alarm-overview.alarm-normal strong {
  color: #26745b;
}

:root[data-theme="light"] .alarm-overview.alarm-active {
  border-color: #d87a85;
  background: #fff0f2;
}

:root[data-theme="light"] .alarm-overview.alarm-active
.alarm-overview-icon {
  background: #ffd9de;
}

:root[data-theme="light"] .alarm-overview.alarm-active strong {
  color: #ad3342;
}

:root[data-theme="light"] .alarm-overview.alarm-unknown {
  border-color: #d4b76c;
  background: #fff8e3;
}

:root[data-theme="light"] .alarm-overview.alarm-unknown
.alarm-overview-icon {
  background: #f7e9bd;
}

:root[data-theme="light"] .alarm-overview.alarm-unknown strong {
  color: #806214;
}

:root[data-theme="light"] .command-warning {
  background: #fff0d4;
  color: #805814;
}

:root[data-theme="light"] .error {
  background: #f8d9de;
  color: #8f2432;
}

:root[data-theme="light"] .success {
  background: #d9f1e4;
  color: #236b4a;
}

:root[data-theme="light"] .dashboard-state-online,
:root[data-theme="light"] .user-state,
:root[data-theme="light"] .current-version {
  color: #287a5e;
}

:root[data-theme="light"] .dashboard-state-error,
:root[data-theme="light"] .dashboard-state-warning {
  color: #8a6619 !important;
}

:root[data-theme="light"] .dashboard-state-alarm,
:root[data-theme="light"] .user-card-inactive .user-state {
  color: #b73543;
}

:root[data-theme="light"] .login-screen {
  background:
    radial-gradient(circle at 50% -10%, rgb(74 166 231 / 20%), transparent 38%),
    radial-gradient(circle at 100% 100%, rgb(102 181 226 / 14%), transparent 32%),
    linear-gradient(145deg, #edf6fb 0%, #f7fbfd 52%, #e7f1f7 100%);
}

:root[data-theme="light"] .login-screen .login-card {
  border-color: #9dc9e4;
  background: rgb(255 255 255 / 96%);
  box-shadow:
    0 28px 70px rgb(42 86 113 / 18%),
    0 0 28px rgb(48 150 215 / 8%);
}

:root[data-theme="light"] .login-fields label {
  color: #24465e;
}

:root[data-theme="light"] .login-input-wrap input {
  border-color: #9fbfd2;
  background: #f8fbfd;
  color: #17364c;
}

:root[data-theme="light"] .login-input-wrap input::placeholder {
  color: #7894a7;
}

:root[data-theme="light"] .login-input-wrap input:focus {
  border-color: #218fda;
  background: #ffffff;
}

:root[data-theme="light"] .login-input-icon {
  color: #4f86aa;
}

:root[data-theme="light"] .login-footer {
  color: #648296;
}

:root[data-theme="light"] .controller-dashboard-fan-icon {
  stroke: #66869a;
}

@media (max-width: 560px) {
  .theme-options {
    grid-template-columns: 1fr 1fr;
  }

  .theme-option {
    min-height: 74px;
  }

  .controller-dashboard-fan > div {
    flex-wrap: wrap;
    gap: 4px 9px;
  }
}


/* ==========================================================
   VER. 0.5 — PRACK TYPOGRAPHY FIX
   ========================================================== */

/* Основные карточки: как .metric на странице камеры */
.prack-value-card span {
  color: #9fb8ca;
  font-size: 14px;
  opacity: 1;
}

.prack-value-card strong {
  margin-top: 0;
  font-size: 26px;
  line-height: normal;
  font-weight: 700;
}

/* Названия строк: как .setting-row на странице камеры */
.prack-data-table > div > span:first-child,
.prack-data-table > .prack-setting-row > span:first-child {
  color: #eaf3ff;
  font-size: 16px;
  font-weight: 700;
  opacity: 1;
}

/* Значения справа: как в настройках камеры */
.prack-data-table > div > strong,
.prack-setting-result > strong {
  font-size: 17px;
  font-weight: 700;
}

/* Элементы ЭКОСАД: размер как у статусов камеры */
.prack-status-grid > div {
  font-size: 14px;
}

.prack-status-grid > div > span {
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
}

/* Светлая тема */
:root[data-theme="light"]
.prack-data-table > div > span:first-child,
:root[data-theme="light"]
.prack-data-table > .prack-setting-row > span:first-child {
  color: #19364b;
}

:root[data-theme="light"] .prack-value-card span {
  color: #627f93;
}


/* ===== Exact camera typography and fan icon ===== */

/*
 * В блоке «Управление» заголовок размечен тегом strong.
 * Теперь он выглядит так же, как строки блока «Оттайка».
 */
.control-row > div:first-child > strong {
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #eaf3ff;
}

.control-row > div:first-child > small {
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #9fb8ca;
}

/*
 * Тот же круглый контейнер и тот же SVG-контур,
 * которые используются для вентилятора в карточках камер.
 */
.controller-dashboard-fan-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  box-sizing: border-box;
  border: 1px solid #29485d;
  border-radius: 999px;
  background: #102536;
  color: #9fb8ca;
  opacity: .55;
  stroke: none;
}

.controller-dashboard-fan-icon::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-theme="light"]
.control-row > div:first-child > strong {
  color: #19364b;
}

:root[data-theme="light"]
.control-row > div:first-child > small {
  color: #627f93;
}

:root[data-theme="light"]
.controller-dashboard-fan-icon {
  border-color: #b8cdda;
  background: #f3f7fa;
  color: #607d90;
}


/* ===== Mobile main header single row ===== */

@media (max-width: 650px) {
  /*
   * Только шапка главной страницы:
   * логотип остаётся в первой колонке,
   * все кнопки располагаются одним рядом справа.
   */
  #camera-list-screen > .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #camera-list-screen > .topbar .topbar-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
  }

  #camera-list-screen > .topbar .main-menu-wrap {
    flex: 0 0 auto;
  }
}


/* ==========================================================
   CAMERA CONTROLLER AND CONNECTION STATUS
   ========================================================== */

.camera-dashboard-card[data-camera]
.camera-dashboard-state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
  color: #77d9ad;
}

.camera-dashboard-card[data-camera]
.camera-controller-disabled {
  color: #e7ad52;
}

.camera-dashboard-connection-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #738393;
}

.camera-dashboard-connection-dot.camera-connection-online {
  background: #35d391;
  box-shadow: 0 0 0 3px rgba(53, 211, 145, .13);
}

.camera-dashboard-connection-dot.camera-connection-error {
  background: #e25b67;
  box-shadow: 0 0 0 3px rgba(226, 91, 103, .13);
}

.camera-dashboard-card.camera-dashboard-alarm {
  border-color: #d85a62;
  box-shadow:
    0 0 0 1px rgba(216, 90, 98, .18);
}

@media (max-width: 500px) {
  .camera-dashboard-card[data-camera]
  .camera-dashboard-state {
    gap: 7px;
  }

  .camera-dashboard-connection-dot {
    width: 9px;
    height: 9px;
  }
}


/* FIX: readable setting values in light theme */
:root[data-theme="light"] .setting-row strong {
  color: #36566b !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}


/* ===== EMBEDDED CCTV 2026-09-25 ===== */

.embedded-video-section {
  margin-top: 18px;
}

.embedded-video-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.embedded-video-heading h3 {
  margin: 0 0 3px;
}

.embedded-video-heading small {
  display: block;
  opacity: .66;
  font-size: 13px;
}

.embedded-video-status {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 650;
  opacity: .8;
}

.embedded-video-status.is-live {
  color: #8ce6bd;
  opacity: 1;
}

.embedded-video-status.is-error {
  color: #ff9ea9;
  opacity: 1;
}

.embedded-video-shell {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;

  aspect-ratio: 11 / 9;

  overflow: hidden;

  border: 1px solid #274a63;
  border-radius: 16px;

  background: #02070b;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .18);
}

.embedded-video-shell iframe {
  width: 100%;
  height: 100%;

  display: block;

  border: 0;
  background: #000;
}

.embedded-video-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.embedded-video-fullscreen {
  min-height: 42px;
}

.embedded-video-shell:fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
}

.embedded-video-shell:fullscreen iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 700px) {
  .embedded-video-heading {
    align-items: flex-start;
  }

  .embedded-video-shell {
    border-radius: 13px;
  }

  .embedded-video-actions {
    justify-content: stretch;
  }

  .embedded-video-fullscreen {
    width: 100%;
  }
}


/* ===== CCTV PRESET CONTROLS ===== */

.video-preset-panel {
  margin-top: 14px;
  padding: 14px 16px;

  border: 1px solid rgba(92, 142, 174, .28);
  border-radius: 13px;

  background: rgba(12, 35, 49, .42);
}

.video-preset-title {
  display: block;

  margin-bottom: 10px;

  font-size: 13px;
  font-weight: 650;
  opacity: .75;
}

.video-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.video-preset-button {
  min-height: 42px;
  min-width: 120px;
}

.video-preset-button:disabled {
  cursor: wait;
  opacity: .55;
}

.video-preset-result {
  min-height: 18px;
  margin-top: 8px;

  font-size: 12px;
  opacity: .7;
}

.video-preset-result.is-success {
  color: #8ce6bd;
  opacity: 1;
}

.video-preset-result.is-error {
  color: #ff9ea9;
  opacity: 1;
}

@media (max-width: 700px) {
  .video-preset-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-preset-button {
    width: 100%;
    min-width: 0;
  }

  #prack-preset-panel .video-preset-buttons {
    grid-template-columns: 1fr;
  }
}


/* ===== CCTV UI POLISH 2026-09-26 ===== */

/* Заголовок видеоблока */

.embedded-video-heading {
  align-items: flex-start;
}

.embedded-video-heading small {
  opacity: .78;
}

.embedded-video-heading-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.embedded-video-status {
  white-space: nowrap;
}

.embedded-video-heading-fullscreen {
  width: 42px;
  min-width: 42px;
  height: 38px;
  min-height: 38px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-size: 21px;
  line-height: 1;
}

/*
 * Старая большая нижняя кнопка больше не нужна.
 * Оставляем правило и на случай старого PWA-кэша.
 */
.embedded-video-actions {
  display: none !important;
}


/* Блок положения камеры */

.video-preset-panel {
  margin-top: 14px;
  padding: 14px 14px 13px;

  background: transparent;

  border: 1px solid rgba(83, 137, 171, .34);
  border-radius: 14px;

  box-shadow: none;
}

.video-preset-title {
  margin-bottom: 11px;

  font-size: 14px;
  font-weight: 700;

  opacity: .82;
}

.video-preset-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.video-preset-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .08s ease;
}

.video-preset-button:active {
  transform: scale(.985);
}

.video-preset-button.is-active {
  border-color: #55d8a3;

  box-shadow:
    inset 0 0 0 1px rgba(85, 216, 163, .72),
    0 0 0 1px rgba(85, 216, 163, .10);
}

.video-preset-result {
  min-height: 18px;

  margin-top: 10px;

  font-size: 13px;
  font-weight: 550;
}


/* Компрессорная:
 * две основные позиции в одном ряду,
 * дверь на всю ширину.
 */

#prack-preset-panel .video-preset-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#prack-preset-panel
.video-preset-button:nth-child(3) {
  grid-column: 1 / -1;
}


/* Видео */

.embedded-video-shell {
  margin-top: 2px;
}


/* Телефон */

@media (max-width: 700px) {
  .embedded-video-heading {
    gap: 12px;
  }

  .embedded-video-heading-actions {
    gap: 6px;
  }

  .embedded-video-heading-fullscreen {
    width: 40px;
    min-width: 40px;

    height: 36px;
    min-height: 36px;
  }

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

  #prack-preset-panel .video-preset-buttons {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #prack-preset-panel
  .video-preset-button:nth-child(3) {
    grid-column: 1 / -1;
  }
}


/* ===== CLEAN CCTV PLAYER 2026-09-26 ===== */

.carel-video-host {
  width: 100%;
  height: 100%;

  display: block;

  overflow: hidden;
  background: #000;
}

carel-video-player {
  width: 100%;
  height: 100%;

  display: block;

  background: #000;
}

carel-video-player video {
  width: 100% !important;
  height: 100% !important;

  display: block;

  object-fit: contain;
  background: #000;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

carel-video-player video::-webkit-media-controls {
  display: none !important;
}

carel-video-player video::-webkit-media-controls-enclosure {
  display: none !important;
}


/* ============================================================
   DEFROST CANON STYLE 2026-09-26
   inactive = gray
   active   = orange
   ============================================================ */

:root {
  --carel-defrost-active: #f69a13;
  --carel-defrost-idle: #98a4b3;
}


/* ============================================================
   CAMERA TILES
   ============================================================ */

/* Оттайка выключена */
.camera-dashboard-indicators
span[data-status="defrost"] {
  color: var(--carel-defrost-idle) !important;
  opacity: 1 !important;
}

/* Оттайка включена */
.camera-dashboard-indicators
span[data-status="defrost"].dashboard-status-active {
  color: var(--carel-defrost-active) !important;
  opacity: 1 !important;
}


/* ============================================================
   ACTIVE DEFROST — CAMERA OUTLINE ONLY

   ВАЖНО:
   фон карточки здесь не меняется вообще.
   ============================================================ */

.camera-dashboard-card.camera-dashboard-defrost-active {
  border-color: var(--carel-defrost-active) !important;
  border-width: 2px !important;
}

.camera-dashboard-card.camera-dashboard-defrost-active:hover {
  border-color: var(--carel-defrost-active) !important;
}


/* ============================================================
   CAMERA PAGE — DEFROST STATUS
   ============================================================ */

/* неактивная */
#card-defrost .status-icon-defrost {
  color: var(--carel-defrost-idle) !important;
  opacity: 1 !important;
}

/* активная */
#card-defrost.status-active .status-icon-defrost {
  color: var(--carel-defrost-active) !important;
  opacity: 1 !important;
}

#card-defrost.status-active .status-label,
#card-defrost.status-active strong {
  color: var(--carel-defrost-active) !important;
}

#card-defrost.status-active {
  border-color: var(--carel-defrost-active) !important;
}