:root {
  --page-blue: #eaf1f8;
  --surface: #effaff;
  --surface-strong: #ffffff;
  --ink: #122e64;
  --ink-muted: #7391bb;
  --blue: #0875ef;
  --blue-deep: #0645bc;
  --cyan: #22e8f3;
  --red: #fc525c;
  --green: #06ae7d;
  --orange: #f17024;
  --shell-radius: clamp(2.6rem, 9vw, 4.7rem);
  --card-radius: clamp(1.5rem, 5.5vw, 3.15rem);
  --soft-shadow: 0 1rem 2.1rem rgba(52, 103, 149, 0.18);
  --thin-border: rgba(255, 255, 255, 0.87);
}

@font-face {
  font-family: "Protect Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Protect Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Protect Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Protect Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Protect Montserrat";
  src: url("../assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Protect Slogan";
  src: url("../assets/fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--page-blue);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 280px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Protect Montserrat", "Montserrat", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid #047cf6;
  outline-offset: 4px;
}

.page-shell {
  min-height: 100svh;
  overflow: clip;
}

.app-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: clamp(0.35rem, 1.3vw, 0.65rem);
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(1.35rem, 4vw, 2rem) clamp(1rem, 5vw, 1.75rem) 1.25rem;
  background:
    radial-gradient(circle at 46% 17%, rgba(255, 255, 255, 0.98) 0 10%, rgba(235, 250, 255, 0.73) 35%, transparent 63%),
    radial-gradient(circle at 50% 68%, #edfdff 0%, #dcf7fc 38%, #e7f3fa 100%);
}

.app-content {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  grid-row: 1;
  align-self: stretch;
  flex: none;
  flex-direction: column;
  transform: scale(var(--layout-scale, 1));
  transform-origin: top center;
}

.app-content > .brand-header,
.app-content > .security-controls,
.app-content > .quick-actions {
  flex-shrink: 0;
}

.top-decoration,
.bottom-decoration {
  position: absolute;
  z-index: -1;
  width: 100%;
  pointer-events: none;
}

.top-decoration { top: 0; right: 0; }
.bottom-decoration { bottom: 0; left: 0; }

.brand-header {
  position: relative;
  min-height: clamp(12.9rem, 49vw, 18rem);
  padding: clamp(0.2rem, 0.7vw, 0.75rem) clamp(0.25rem, 2vw, 0.75rem) 0;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  transform: none;
}

.brand-lockup {
  display: grid;
  width: min(100%, 32rem);
  min-width: 0;
  grid-template-columns: 34% minmax(0, 66%);
  align-items: start;
  color: #0456c5;
  transform: none;
}

.reference-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.wordmark-stack { min-width: 0; }

.protect-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-wordmark {
  fill: url(#logo-word);
  font-family: "Protect Montserrat", "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: 92px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -6px;
  paint-order: stroke fill;
  stroke: rgba(0, 81, 185, 0.36);
  stroke-width: 1.4px;
}

.brand-promise {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: clamp(-1.6rem, calc(-0.35rem - 1.85vw), -1.1rem) 0 0;
  padding: 0;
  color: #174a9f;
  font-family: "Protect Slogan", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(0.85rem, 3.25vw, 1.28rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
}

.brand-promise span { white-space: nowrap; }

.location-picker {
  position: relative;
  z-index: 6;
  width: min(61%, 20rem);
  margin: clamp(0.55rem, 2.7vw, 1.1rem) auto 0;
}

.location-selector {
  display: flex;
  width: 100%;
  min-height: clamp(2.2rem, 8.6vw, 3.3rem);
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0.3rem 0.8rem 0.3rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.8), rgba(209, 243, 255, 0.76));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0.45rem 1rem rgba(46, 122, 174, 0.1);
  color: #0a2b65;
  font-size: clamp(0.94rem, 3.55vw, 1.35rem);
  font-weight: 700;
}

.location-icon {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 1.9rem;
  color: #049cd9;
  transform: scale(1.8);
  transform-origin: center;
}
.chevron { width: 1.05rem; margin-left: auto; color: #0c4fa9; }
.location-selector[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.location-menu {
  position: absolute;
  top: calc(100% + 0.42rem);
  right: 50%;
  display: grid;
  width: 100%;
  max-height: min(17rem, 48svh);
  gap: 0.38rem;
  padding: 0.42rem;
  overflow: hidden;
  transform: translateX(50%);
  border: 1px solid rgba(81, 220, 250, 0.86);
  border-radius: clamp(1rem, 4vw, 1.5rem);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(213, 246, 255, 0.95));
  box-shadow: 0 0.7rem 1.35rem rgba(15, 100, 160, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.location-menu[hidden] { display: none; }
.location-list { display: grid; min-height: 0; gap: 0.25rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.06rem; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.location-option,
.add-location-option {
  display: flex;
  width: 100%;
  min-height: clamp(2.25rem, 8.5vw, 2.8rem);
  align-items: center;
  gap: 0.58rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(106, 207, 245, 0.58);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  color: #164578;
  font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.78rem, 3vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  transition: transform 90ms ease-out, background-color 90ms linear, color 90ms linear;
}
.location-option::before { width: 0.58rem; height: 0.58rem; flex: 0 0 0.58rem; border: 2px solid #58bfe9; border-radius: 50%; content: ""; }
.location-option.is-selected { border-color: rgba(0, 104, 235, 0.8); background: linear-gradient(130deg, rgba(224, 255, 255, 0.86), rgba(153, 227, 255, 0.7)); color: #053f9e; }
.location-option.is-selected::before { border-color: #0878ed; background: #0878ed; box-shadow: 0 0 0.3rem rgba(0, 150, 255, 0.62); }
.add-location-option { justify-content: center; border-color: rgba(4, 120, 237, 0.78); background: linear-gradient(135deg, rgba(230, 255, 255, 0.86), rgba(182, 237, 255, 0.72)); color: #0755b9; }
.add-location-symbol { display: grid; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.1rem; font-weight: 500; line-height: 1; }
.location-option:active,
.add-location-option:active { transform: scale(0.98); }

.brand-header,
.security-controls,
.quick-actions,
.bottom-navigation {
  width: min(100%, 34rem);
  margin-right: auto;
  margin-left: auto;
}

.security-controls { position: relative; margin-top: 0.1rem; }

.security-controls::before,
.security-controls::after {
  position: absolute;
  z-index: 2;
  top: 53.5%;
  width: calc(50% - clamp(2.65rem, 9.5vw, 4.65rem));
  height: clamp(0.18rem, 0.65vw, 0.34rem);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 187, 235, 0.2), #a6d1f2 36%, #a6d1f2 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  content: "";
}

.security-controls::before { left: 10%; }
.security-controls::after { right: 10%; transform: scaleX(-1); }

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.58rem, 2.25vw, 1.15rem);
  row-gap: clamp(3.5rem, 15vw, 6.5rem);
}

.security-card {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 0.95;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--thin-border);
  border-radius: var(--card-radius);
  background: radial-gradient(circle at 30% 13%, #ffffff 0, #fbfeff 30%, #e5f4fd 83%, #d5eafa 100%);
  box-shadow: 0 1.15rem 2rem rgba(60, 111, 159, 0.2), inset 0 1px 0 #fff;
  color: #1c426e;
  --lock-keyhole: #eaf6fd;
  transition: color 90ms linear, transform 90ms ease-out;
}

.security-card::after {
  position: absolute;
  right: -20%;
  bottom: -37%;
  width: 122%;
  height: 74%;
  border-radius: 50%;
  background: linear-gradient(142deg, transparent 29%, rgba(179, 220, 246, 0.55) 100%);
  content: "";
  transform: rotate(-14deg);
}

.security-card:hover { transform: translateY(-2px); }

.security-card:nth-child(n + 3) { aspect-ratio: 1.12; }

.security-card.is-active {
  border: 3px solid transparent;
  background:
    linear-gradient(138deg, rgba(215, 255, 255, 0.46) 0%, rgba(67, 210, 255, 0.14) 19%, transparent 42%, rgba(3, 42, 157, 0.18) 100%) padding-box,
    radial-gradient(ellipse at 28% 14%, #61d5ff 0%, #1197f3 25%, #0757cf 59%, #033895 100%) padding-box,
    linear-gradient(135deg, #e6ffff 0%, #43f6ff 9%, #0979ef 24%, #003796 48%, #0757d8 65%, #24ddf1 84%, #d7ffff 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 66, 187, 0.94),
    0 0 0 3px rgba(29, 214, 255, 0.66),
    0 0.14rem 0.8rem 0.12rem rgba(0, 220, 255, 0.8),
    0 1.05rem 2rem 0.15rem rgba(0, 104, 235, 0.48),
    0 2rem 3.1rem rgba(47, 122, 204, 0.24),
    inset 0 1px 0 rgba(233, 255, 255, 0.92),
    inset 0 -1rem 1.35rem rgba(0, 24, 141, 0.32);
  color: #fff;
  --lock-keyhole: #0b55ca;
}

.security-card.is-active::before {
  position: absolute;
  z-index: 0;
  inset: 0.28rem;
  border: 1.4px solid rgba(181, 255, 255, 0.86);
  border-radius: calc(var(--card-radius) - 0.28rem);
  background: linear-gradient(135deg, rgba(232, 255, 255, 0.36), transparent 17%, transparent 74%, rgba(16, 213, 255, 0.32));
  box-shadow:
    inset 0 2px 2px rgba(236, 255, 255, 0.66),
    inset 2px 0 5px rgba(35, 224, 255, 0.33),
    inset -2px -3px 6px rgba(0, 31, 147, 0.46),
    0 0 0.32rem rgba(77, 244, 255, 0.3);
  content: "";
  pointer-events: none;
}

.security-card.is-active::after {
  right: -27%;
  bottom: -44%;
  width: 131%;
  height: 83%;
  border: 1px solid rgba(143, 241, 255, 0.22);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(142, 247, 255, 0.34), transparent 42%),
    linear-gradient(135deg, transparent 26%, rgba(12, 227, 255, 0.32) 100%);
  box-shadow: inset 0 0 1.1rem rgba(3, 48, 172, 0.2);
}

.credit-card.is-active {
  border: 2px solid var(--thin-border);
  background: radial-gradient(circle at 30% 13%, #ffffff 0, #fbfeff 30%, #e5f4fd 83%, #d5eafa 100%);
  box-shadow: 0 1.15rem 2rem rgba(60, 111, 159, 0.2), inset 0 1px 0 #fff;
  color: #1c426e;
}

.credit-card.is-active::before { display: none; }

.credit-card.is-active::after {
  right: -20%;
  bottom: -37%;
  width: 122%;
  height: 74%;
  border: 0;
  background: linear-gradient(142deg, transparent 29%, rgba(179, 220, 246, 0.55) 100%);
  box-shadow: none;
}

.card-rings {
  position: absolute;
  width: 84%;
  height: 84%;
  border: 1px solid rgba(138, 224, 255, 0.2);
  border-radius: 50%;
  transform: translateY(-5%);
}

.card-rings::after,
.card-rings::before {
  position: absolute;
  border: 1px solid rgba(138, 224, 255, 0.16);
  border-radius: inherit;
  content: "";
}

.card-rings::before { inset: 0.72rem; }
.card-rings::after { inset: 1.44rem; }

.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1vw, 0.65rem);
  padding: 0.8rem;
}

.icon { display: block; width: 1em; height: 1em; fill: currentColor; }

.mode-icon {
  width: clamp(3.8rem, 15vw, 6.8rem);
  height: clamp(3.8rem, 15vw, 6.8rem);
}

.icon-lock-open { color: currentColor; }

.credit-icon {
  display: block;
  height: clamp(2.926rem, 11.55vw, 5.236rem);
  color: #123d75;
  font-family: "Protect Montserrat", "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3.619rem, 13.86vw, 6.006rem);
  font-weight: 800;
  line-height: 0.93;
  transform: translateY(-8%);
}

.trigger-icon { display: block; width: clamp(5.852rem, 23.1vw, 10.472rem); height: clamp(5.852rem, 23.1vw, 10.472rem); object-fit: contain; filter: brightness(0) saturate(100%) invert(24%) sepia(33%) saturate(1868%) hue-rotate(179deg) brightness(93%) contrast(96%); }
.trigger-divider { display: block; width: 72%; height: clamp(0.14rem, 0.55vw, 0.24rem); flex: 0 0 auto; margin: clamp(0.26rem, 1.05vw, 0.48rem) 0; border-radius: 999px; background: linear-gradient(90deg, rgba(126, 187, 235, 0.2), #a6d1f2 36%, #a6d1f2 64%, rgba(126, 187, 235, 0.2)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); }

.card-title {
  font-size: clamp(1.45rem, 5.1vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  white-space: nowrap;
}

.mode-indicator {
  width: clamp(2.6rem, 9vw, 4.35rem);
  height: clamp(0.25rem, 1vw, 0.42rem);
  margin-top: clamp(0.15rem, 0.6vw, 0.45rem);
  border-radius: 999px;
  background: #abcceb;
}

.is-active .mode-indicator { background: #48eaff; box-shadow: 0 0 0.55rem rgba(54, 245, 255, 0.8); }

.sync-button {
  position: absolute;
  z-index: 3;
  top: 53.5%;
  left: 50%;
  display: grid;
  width: clamp(3.5rem, 12.7vw, 6.25rem);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.98);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff 0 12%, #e8fbff 48%, #c4eaf7 100%);
  box-shadow: 0 0 0 2px rgba(150, 231, 247, 0.66), 0 0.75rem 1.45rem rgba(51, 123, 159, 0.2), inset 0 0 0.9rem rgba(255,255,255,0.96);
  color: #0570e9;
  transform: translate(-50%, -50%);
}

.sync-button .icon {
  width: 61%;
  height: 61%;
  transform: scaleX(-1);
}

.sync-button.is-syncing .icon { animation: spin-counterclockwise 620ms linear infinite; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.25rem, 2vw, 1rem);
  margin-top: clamp(0.9rem, 4vw, 1.45rem);
  margin-bottom: clamp(0.6rem, 2.5vw, 1.25rem);
}

.quick-action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  color: #102f69;
  font-size: clamp(0.94rem, 3.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.quick-disc {
  position: relative;
  display: grid;
  width: clamp(5rem, 20.5vw, 8.8rem);
  height: clamp(5rem, 20.5vw, 8.8rem);
  max-width: 100%;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #f8fcff 42%, #d9eefd 100%);
  box-shadow: 0 0 0 3px rgba(186, 222, 255, 0.68), 0 0.75rem 1.4rem rgba(38, 91, 147, 0.16), inset 0 0 1.2rem rgba(255,255,255,0.95);
}

.quick-disc::before {
  position: absolute;
  inset: 0.35rem;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: inherit;
  content: "";
}

.quick-icon { position: relative; z-index: 1; width: 48%; height: 48%; }
.alert-action .quick-icon { color: #0879f2; }
.call-alert-action .quick-icon { color: var(--green); }
.call-action .quick-icon { color: #176fe7; }
.alert-action .quick-disc { box-shadow: 0 0 0 3px rgba(144, 195, 255, 0.78), 0 0.75rem 1.4rem rgba(38, 91, 147, 0.16), inset 0 0 1.7rem rgba(132, 194, 255, 0.25); }
.call-alert-action .quick-disc { box-shadow: 0 0 0 3px rgba(91, 242, 241, 0.72), 0 0.75rem 1.4rem rgba(38, 91, 147, 0.16), inset 0 0 1.7rem rgba(109, 255, 213, 0.26); }
.call-action .quick-disc { box-shadow: 0 0 0 3px rgba(161, 204, 255, 0.78), 0 0.75rem 1.4rem rgba(38, 91, 147, 0.16), inset 0 0 1.7rem rgba(131, 196, 255, 0.24); }

.quick-action:active .quick-disc { transform: scale(0.95); }

.users-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: stretch; margin: clamp(0.45rem, 1.8vw, 1rem) auto; }
.users-view[hidden] { display: none; }
.users-panel { display: flex; width: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: clamp(0.45rem, 1.7vw, 0.75rem); padding: clamp(0.8rem, 3.4vw, 1.25rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; }
.users-title { flex: 0 0 auto; margin: 0; color: #164578; font-size: clamp(1rem, 4.1vw, 1.35rem); font-weight: 700; line-height: 1.15; text-align: center; }
.users-column-headings,
.user-row { display: grid; grid-template-columns: clamp(1.85rem, 9vw, 2.6rem) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(0.28rem, 1.15vw, 0.55rem); align-items: center; }
.users-column-headings { flex: 0 0 auto; padding: 0 clamp(0.3rem, 1.4vw, 0.6rem); color: #27557f; font-size: clamp(0.64rem, 2.45vw, 0.84rem); font-weight: 700; line-height: 1.2; text-align: center; }
.users-list { display: grid; min-height: 0; flex: 1 1 auto; align-content: start; gap: clamp(0.65rem, 2.5vw, 1.05rem); overflow-y: auto; overscroll-behavior: contain; padding: 0.12rem clamp(0.05rem, 0.55vw, 0.2rem) 0.3rem; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.user-row { position: relative; min-height: clamp(2.8rem, 10.2vw, 3.45rem); padding: clamp(0.25rem, 1.15vw, 0.45rem); }
.user-row:not(:last-child)::after { position: absolute; right: 0; bottom: clamp(-0.525rem, -1.25vw, -0.325rem); left: 0; height: 1px; background: rgba(72, 189, 235, 0.2); content: ""; pointer-events: none; transform: translateY(50%); }
.user-slot { display: grid; min-width: 0; min-height: clamp(2.05rem, 7.8vw, 2.55rem); place-items: center; border: 1px solid rgba(40, 165, 228, 0.36); border-radius: clamp(0.5rem, 2vw, 0.75rem); background: linear-gradient(135deg, rgba(220, 250, 255, 0.93), rgba(169, 227, 250, 0.65)); color: #0756b9; font-size: clamp(0.72rem, 2.8vw, 0.95rem); font-weight: 800; line-height: 1; }
.user-field { min-width: 0; }
.user-input { width: 100%; min-width: 0; min-height: clamp(2.05rem, 7.8vw, 2.55rem); padding: 0.35rem clamp(0.38rem, 1.65vw, 0.7rem); border: 1px solid rgba(95, 205, 247, 0.78); border-radius: clamp(0.5rem, 2vw, 0.75rem); outline: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 249, 255, 0.86)); box-shadow: inset 0 1px 2px rgba(16, 94, 158, 0.08); color: #0d316b; font: inherit; font-size: clamp(0.7rem, 2.7vw, 0.92rem); font-weight: 600; line-height: 1.2; }
.user-input:focus { border-color: #0878ed; box-shadow: 0 0 0 3px rgba(78, 217, 255, 0.28), inset 0 1px 2px rgba(16, 94, 158, 0.08); }
.user-phone-input { direction: ltr; text-align: center; }
.user-name-input { text-align: inherit; }
.quick-actions[hidden] { display: none; }

.settings-view { display: grid; width: min(100%, 34rem); flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; column-gap: clamp(0.45rem, 3vw, 1.45rem); row-gap: clamp(0.52rem, 3vw, 1.2rem); margin: clamp(0.85rem, 3.4vw, 1.55rem) auto 0; }
.settings-view[hidden] { display: none; }
.settings-option { display: flex; width: min(100%, clamp(4.5rem, 22.5vw, 8rem)); aspect-ratio: 1; justify-self: center; align-items: center; justify-content: center; flex-direction: column; gap: clamp(0.06rem, 0.55vw, 0.3rem); padding: clamp(0.35rem, 1.4vw, 0.8rem); border: 1px solid transparent; border-radius: 50%; background: radial-gradient(circle at 36% 25%, rgba(255, 255, 255, 0.98) 0%, rgba(242, 250, 254, 0.94) 45%, rgba(226, 241, 249, 0.9) 100%) padding-box, linear-gradient(118deg, #e9ffff 0%, #5cf9ff 9%, #00bfff 20%, #0878f2 35%, #033baf 50%, #076de8 64%, #10dff5 82%, #dffeff 100%) border-box; box-shadow: 0 0.38rem 0.9rem rgba(19, 132, 193, 0.14), 0 0 0.42rem rgba(0, 188, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.4rem 0.9rem rgba(91, 193, 239, 0.08); color: #1c426e; font-size: clamp(0.78rem, 3.8vw, 1.42rem); font-weight: 600; line-height: 1; text-align: center; transition: transform 100ms ease-out, background-color 100ms linear; }
.settings-option:hover { transform: translateY(-1px); }
.settings-option:active { transform: scale(0.95); }
.settings-option-icon { width: 43%; height: 43%; flex: 0 0 43%; }
.settings-option-image { object-fit: contain; fill-rule: evenodd; clip-rule: evenodd; filter: brightness(0) saturate(100%) invert(24%) sepia(33%) saturate(1868%) hue-rotate(179deg) brightness(93%) contrast(96%); }
.settings-option { --lock-keyhole: #eaf6fd; }

.app-settings-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: center; margin: clamp(0.45rem, 1.8vw, 1rem) auto; }
.app-settings-view[hidden] { display: none; }
.app-settings-form { display: grid; width: 100%; max-height: 100%; align-content: center; gap: clamp(0.7rem, 2.6vw, 1.15rem); overflow-y: auto; padding: clamp(1rem, 4.6vw, 1.9rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; }
.dialing-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: center; margin: clamp(0.45rem, 1.8vw, 1rem) auto; }
.dialing-view[hidden] { display: none; }
.dialing-form { display: grid; width: 100%; max-height: 100%; align-content: center; gap: clamp(0.7rem, 2.6vw, 1.15rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4.6vw, 1.9rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.zone-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(0.55rem, 2vw, 1rem); margin: clamp(0.45rem, 1.8vw, 1rem) auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.zone-view[hidden] { display: none; }
.zone-form { display: grid; width: 100%; max-height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; column-gap: clamp(0.55rem, 2vw, 0.95rem); row-gap: clamp(0.7rem, 2.6vw, 1.15rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4.6vw, 1.9rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.zone-chime-form { display: grid; width: 100%; flex: 0 0 auto; gap: clamp(0.65rem, 2.25vw, 0.95rem); padding: clamp(0.95rem, 4vw, 1.55rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; }
.app-setting-group { display: grid; min-width: 0; gap: clamp(0.38rem, 1.4vw, 0.62rem); margin: 0; padding: 0; border: 0; }
.app-setting-group legend { padding: 0; color: #164578; font-size: clamp(0.82rem, 3.1vw, 1.04rem); font-weight: 700; letter-spacing: 0.01em; }
.app-choice-grid { display: flex; flex-wrap: wrap; gap: clamp(0.55rem, 2.2vw, 1rem); }
.app-choice { display: inline-flex; min-height: 1.6rem; align-items: center; gap: 0.42rem; padding: 0; color: #27557f; cursor: pointer; font-size: clamp(0.8rem, 3.05vw, 1rem); font-weight: 700; line-height: 1.25; }
.app-choice input { inline-size: 1.08rem; block-size: 1.08rem; flex: 0 0 auto; margin: 0; accent-color: #0878ed; cursor: pointer; }
.app-choice input:focus-visible { outline: 3px solid #047cf6; outline-offset: 2px; }
.app-choice:has(input:checked) { color: #064da8; }
.dialing-sequence-group { gap: 0; }
.dialing-sequence-group legend { margin-bottom: clamp(0.9rem, 3.2vw, 1.3rem); }
.dialing-sequence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(0.48rem, 1.8vw, 0.78rem); row-gap: clamp(0.22rem, 0.75vw, 0.42rem); }
.dialing-sequence-grid .app-choice { min-width: 0; min-height: 0; align-items: flex-start; font-size: clamp(0.72rem, 2.7vw, 0.94rem); }
.dialing-message { min-height: 1.25em; margin: -0.18rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
.zone-chime-setting { align-self: end; gap: 0; padding-bottom: clamp(0.28rem, 1.1vw, 0.42rem); }
.zone-message { grid-column: 1 / -1; min-height: 1.25em; margin: -0.18rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
.zone-form .app-settings-actions { grid-column: 1 / -1; }
.zone-chime-mode-group { gap: clamp(0.52rem, 1.9vw, 0.75rem); }
.zone-chime-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.38rem, 1.5vw, 0.68rem); }
.zone-chime-mode-options .app-choice { min-width: 0; font-size: clamp(0.72rem, 2.6vw, 0.92rem); }
.zone-chime-message { min-height: 1.25em; margin: -0.12rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
@media (max-width: 320px) {
  .zone-form { grid-template-columns: minmax(0, 1fr); }
  .zone-chime-mode-options { grid-template-columns: minmax(0, 1fr); }
  .zone-message,
  .zone-form .app-settings-actions { grid-column: auto; }
  .zone-chime-setting { align-self: auto; padding-bottom: 0; }
}
.app-login-setting { gap: clamp(0.52rem, 1.8vw, 0.8rem); }
.app-login-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; color: #27557f; cursor: pointer; font-size: clamp(0.8rem, 3.05vw, 1rem); font-weight: 700; line-height: 1.25; }
.app-login-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.app-toggle-track { position: relative; display: inline-flex; inline-size: 2.85rem; block-size: 1.56rem; flex: 0 0 auto; align-items: center; padding: 0.16rem; border: 1px solid rgba(35, 143, 220, 0.62); border-radius: 999px; background: linear-gradient(135deg, #e6f8ff, #bddeee); box-shadow: inset 0 1px 2px rgba(29, 101, 157, 0.16), 0 0.12rem 0.3rem rgba(29, 122, 185, 0.1); transition: background 140ms ease-out, border-color 140ms ease-out; }
.app-toggle-thumb { inline-size: 1.12rem; block-size: 1.12rem; border-radius: 50%; background: #ffffff; box-shadow: 0 0.08rem 0.2rem rgba(24, 89, 142, 0.28); transition: transform 140ms ease-out; }
.app-login-toggle input:checked + .app-toggle-track { border-color: #0576dc; background: linear-gradient(135deg, #39d8f1, #0877e8 62%, #0546aa); }
.app-login-toggle input:checked + .app-toggle-track .app-toggle-thumb { transform: translateX(1.27rem); }
.app-login-toggle input:focus-visible + .app-toggle-track { outline: 3px solid #047cf6; outline-offset: 3px; }
.app-password-fields { display: grid; gap: clamp(0.55rem, 2vw, 0.85rem); padding-top: clamp(0.12rem, 0.6vw, 0.3rem); }
.app-password-fields[hidden] { display: none; }
.app-settings-message,
.login-message { min-height: 1.25em; margin: -0.18rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
.app-settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.45rem, 1.8vw, 0.8rem); margin-top: clamp(0.1rem, 0.6vw, 0.3rem); }
.app-settings-actions .device-save,
.app-settings-actions .device-back { min-width: 0; }

.admins-view,
.contacts-view,
.remote-view,
.wls-view,
.output-settings-view,
.alarm-settings-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: center; margin: clamp(0.45rem, 1.8vw, 1rem) auto; }
.admins-view[hidden],
.contacts-view[hidden],
.remote-view[hidden],
.wls-view[hidden],
.output-settings-view[hidden],
.alarm-settings-view[hidden] { display: none; }
.admins-form,
.contacts-form,
.remote-form,
.wls-form,
.output-settings-form,
.alarm-settings-form { display: grid; width: 100%; max-height: 100%; align-content: start; gap: clamp(0.55rem, 2.1vw, 0.9rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4.6vw, 1.9rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.admin-select { width: 100%; min-height: clamp(2.65rem, 10.5vw, 3.35rem); padding: 0.4rem 2.4rem 0.4rem 0.85rem; border: 1px solid rgba(95, 205, 247, 0.78); border-radius: clamp(0.8rem, 3vw, 1.2rem); outline: none; appearance: auto; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 249, 255, 0.86)); box-shadow: inset 0 1px 2px rgba(16, 94, 158, 0.08), 0 0.2rem 0.55rem rgba(36, 126, 181, 0.08); color: #0d316b; font: inherit; font-size: clamp(0.9rem, 3.3vw, 1.1rem); font-weight: 600; letter-spacing: 0.02em; }
.admin-select:focus { border-color: #0878ed; box-shadow: 0 0 0 3px rgba(78, 217, 255, 0.28), inset 0 1px 2px rgba(16, 94, 158, 0.08); }
.admin-phone-row,
.contact-phone-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(0.45rem, 1.8vw, 0.75rem); }
.contact-slot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(0.45rem, 1.8vw, 0.75rem); }
.contacts-delete { min-width: clamp(4.5rem, 18vw, 6.5rem); min-height: clamp(2.65rem, 10.5vw, 3.35rem); }
.admin-contact-picker { display: grid; width: clamp(2.65rem, 10.5vw, 3.35rem); height: clamp(2.65rem, 10.5vw, 3.35rem); place-items: center; padding: 0.52rem; border: 1px solid rgba(12, 113, 220, 0.68); border-radius: clamp(0.8rem, 3vw, 1.2rem); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(204, 241, 255, 0.82)); box-shadow: 0 0.25rem 0.55rem rgba(24, 112, 176, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95); color: #0756b9; transition: transform 100ms ease-out, filter 100ms ease-out, opacity 100ms ease-out; }
.admin-contact-picker:active { transform: scale(0.975); filter: brightness(0.97); }
.admin-contact-picker:disabled { cursor: wait; opacity: 0.7; }
.admin-alerts { display: grid; gap: clamp(0.38rem, 1.4vw, 0.62rem); margin: 0; padding: 0; border: 0; }
.admin-alerts legend { padding: 0; color: #164578; font-size: clamp(0.75rem, 2.65vw, 0.95rem); font-weight: 700; letter-spacing: 0.01em; }
.admin-alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.4rem, 1.6vw, 0.68rem) clamp(0.55rem, 2vw, 1rem); }
.admin-alert-choice { display: inline-flex; min-width: 0; align-items: center; gap: 0.42rem; color: #27557f; cursor: pointer; font-size: clamp(0.68rem, 2.55vw, 0.9rem); font-weight: 600; line-height: 1.25; }
.admin-alert-choice input { inline-size: 1.02rem; block-size: 1.02rem; flex: 0 0 auto; margin: 0; accent-color: #0878ed; cursor: pointer; }
.admin-alert-choice input:focus-visible { outline: 3px solid #047cf6; outline-offset: 2px; }
.admin-alert-choice:has(input:checked) { color: #064da8; }
.admins-message,
.contacts-message,
.remote-message,
.wls-message,
.output-settings-message { min-height: 1.25em; margin: -0.1rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
.remote-status-setting { gap: 0; }
.wls-status-setting { gap: 0; }
.output-mode-group { gap: clamp(0.52rem, 1.9vw, 0.75rem); }
.output-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.38rem, 1.5vw, 0.68rem); }
.output-mode-options .app-choice { min-width: 0; font-size: clamp(0.76rem, 2.8vw, 0.96rem); }
.alarm-mode-group { gap: clamp(0.42rem, 1.6vw, 0.68rem); padding-bottom: clamp(0.18rem, 0.8vw, 0.34rem); border-bottom: 1px solid rgba(72, 189, 235, 0.2); }
.alarm-mode-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.alarm-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(0.22rem, 1vw, 0.48rem); row-gap: clamp(0.24rem, 0.85vw, 0.4rem); }
.alarm-mode-options .app-choice { min-width: 0; min-height: 1.24rem; gap: 0.25rem; font-size: clamp(0.6rem, 2.35vw, 0.82rem); }
.alarm-settings-message { min-height: 1.25em; margin: -0.1rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
.admins-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.45rem, 1.8vw, 0.8rem); margin-top: clamp(0.05rem, 0.4vw, 0.2rem); }
.admins-actions .device-save,
.admins-actions .device-back { min-width: 0; }

.is-persian [data-i18n] { direction: rtl; }
.is-persian .card-title,
.is-persian .quick-action,
.is-persian .output-title,
.is-persian .settings-option,
.is-persian .nav-item { font-family: Tahoma, Arial, sans-serif; }
.is-persian .card-title { font-size: clamp(0.98rem, 4.05vw, 1.38rem); letter-spacing: 0; }

/* English interface copy is intentionally medium rather than bold. Persian
   typography and the Protect brand wordmark keep their existing weights. */
body:not(.is-persian) .location-selector,
body:not(.is-persian) .card-title,
body:not(.is-persian) .quick-action,
body:not(.is-persian) .output-title,
body:not(.is-persian) .nav-item,
body:not(.is-persian) .settings-option,
body:not(.is-persian) .app-setting-group legend,
body:not(.is-persian) .app-choice,
body:not(.is-persian) .app-login-toggle,
body:not(.is-persian) .dialing-sequence-grid .app-choice,
body:not(.is-persian) .device-field,
body:not(.is-persian) .admin-select,
body:not(.is-persian) .admin-contact-picker,
body:not(.is-persian) .contacts-delete,
body:not(.is-persian) .admin-alerts legend,
body:not(.is-persian) .admin-alert-choice,
body:not(.is-persian) .device-save,
body:not(.is-persian) .device-back,
body:not(.is-persian) .device-remove,
body:not(.is-persian) .login-form h1 {
  font-weight: 600;
}

.intro-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; flex-direction: column; gap: clamp(0.55rem, 1.8vw, 0.9rem); margin: clamp(0.45rem, 1.8vw, 1rem) auto clamp(0.55rem, 1.8vw, 1rem); }
.intro-view[hidden] { display: none; }
.app-content.is-intro-view .location-picker,
.app-content.is-role-selection-view .location-picker,
.app-content.is-login-view .location-picker,
.app-content.is-device-setup-view.is-device-add-view .location-picker { display: none; }
.app-content.is-intro-view .brand-header,
.app-content.is-role-selection-view .brand-header,
.app-content.is-login-view .brand-header { min-height: 0; padding-bottom: clamp(0.15rem, 1vw, 0.45rem); }
.intro-copy { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4.3vw, 1.85rem) clamp(1rem, 4.8vw, 2rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.94), rgba(226, 247, 255, 0.82)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #11396f; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.84rem, 3.3vw, 1.08rem); line-height: 1.85; text-align: right; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.intro-copy h1 { margin: 0 0 0.55rem; color: #0649a7; font-size: 1.18em; font-weight: 700; line-height: 1.35; }
.intro-copy p { margin: 0; }
.intro-copy .intro-lead { color: #0b4f9d; font-size: 1.04em; font-weight: 700; }
.intro-copy ul { margin: 0.75rem 0 0; padding: 0 1.25rem 0 0; }
.intro-copy li + li { margin-top: 0.72rem; }
.intro-copy a { color: #006fe5; font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
.intro-acknowledge { position: relative; isolation: isolate; min-height: clamp(2.85rem, 11.5vw, 3.55rem); flex: 0 0 auto; overflow: hidden; padding: 0.45rem 1.5rem; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(135deg, rgba(218, 255, 255, 0.48), rgba(19, 150, 242, 0.12) 32%, rgba(4, 44, 159, 0.22)) padding-box, radial-gradient(ellipse at 28% 14%, #66dcff 0%, #159df3 27%, #0757ce 61%, #043892 100%) padding-box, linear-gradient(135deg, #efffff 0%, #4af4ff 10%, #0876ee 25%, #003897 48%, #0b5dd9 66%, #2be2f0 84%, #e0ffff 100%) border-box; box-shadow: 0 0.42rem 0.8rem rgba(0, 104, 235, 0.22), inset 0 1px 0 rgba(233, 255, 255, 0.94), inset 0 -0.45rem 0.75rem rgba(0, 24, 141, 0.22); color: #ffffff; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.94rem, 3.7vw, 1.18rem); font-weight: 700; text-shadow: 0 1px 2px rgba(0, 37, 126, 0.55); transition: transform 100ms ease-out, filter 100ms ease-out; }
.intro-acknowledge::before { position: absolute; inset: 0.2rem; border: 1px solid rgba(195, 255, 255, 0.74); border-radius: inherit; box-shadow: inset 0 1px 2px rgba(235, 255, 255, 0.65); content: ""; pointer-events: none; }
.intro-acknowledge:active { transform: scale(0.975); filter: brightness(0.96); }
.role-choice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.5rem, 1.8vw, 0.9rem); }

.login-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: center; margin: clamp(0.45rem, 1.8vw, 1rem) auto; }
.login-view[hidden] { display: none; }
.login-form { display: grid; width: 100%; align-content: center; gap: clamp(0.65rem, 2.2vw, 1rem); padding: clamp(1rem, 4.6vw, 1.9rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; }
.login-form h1 { margin: 0; color: #164578; font-size: clamp(1.05rem, 4.3vw, 1.5rem); font-weight: 700; text-align: center; }
.fingerprint-login { display: grid; width: clamp(2.7rem, 10.6vw, 3.25rem); aspect-ratio: 1; place-items: center; margin-inline: auto; padding: 0.48rem; border: 1px solid rgba(12, 113, 220, 0.68); border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(204, 241, 255, 0.82)); box-shadow: 0 0.25rem 0.55rem rgba(24, 112, 176, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95); color: #0756b9; transition: transform 100ms ease-out, filter 100ms ease-out; }
.fingerprint-login[hidden] { display: none; }
.fingerprint-login:active { transform: scale(0.975); filter: brightness(0.97); }
.fingerprint-icon { width: 100%; height: 100%; }

.device-setup-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: center; margin: clamp(0.45rem, 1.8vw, 1rem) auto; }
.device-setup-view[hidden] { display: none; }
.device-setup-form { display: grid; width: 100%; max-height: 100%; align-content: center; gap: clamp(0.6rem, 2.1vw, 1rem); overflow-y: auto; padding: clamp(1rem, 4.6vw, 1.9rem); border: 1px solid rgba(89, 220, 251, 0.76); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.95), rgba(226, 247, 255, 0.84)); box-shadow: 0 0.55rem 1.25rem rgba(29, 119, 176, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; }
.device-setup-title { display: none; margin: 0 0 clamp(0.15rem, 0.7vw, 0.35rem); color: #164578; font-size: clamp(1.05rem, 4.3vw, 1.5rem); font-weight: 700; line-height: 1.3; text-align: center; }
.device-setup-form:not(.is-edit-mode) .device-setup-title { display: block; }
.device-field { display: grid; gap: 0.34rem; color: #164578; font-size: clamp(0.75rem, 2.65vw, 0.95rem); font-weight: 700; letter-spacing: 0.01em; }
.device-field input,
.device-field select { width: 100%; min-height: clamp(2.65rem, 10.5vw, 3.35rem); padding: 0.4rem 0.85rem; border: 1px solid rgba(95, 205, 247, 0.78); border-radius: clamp(0.8rem, 3vw, 1.2rem); outline: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 249, 255, 0.86)); box-shadow: inset 0 1px 2px rgba(16, 94, 158, 0.08), 0 0.2rem 0.55rem rgba(36, 126, 181, 0.08); color: #0d316b; font: inherit; font-size: clamp(0.9rem, 3.3vw, 1.1rem); font-weight: 600; letter-spacing: 0.02em; }
.device-field select { cursor: pointer; }
.device-field input:focus,
.device-field select:focus { border-color: #0878ed; box-shadow: 0 0 0 3px rgba(78, 217, 255, 0.28), inset 0 1px 2px rgba(16, 94, 158, 0.08); }
.device-form-message { min-height: 1.25em; margin: -0.1rem 0; color: #c63b4a; font-family: Tahoma, Arial, sans-serif; font-size: clamp(0.75rem, 2.65vw, 0.92rem); font-weight: 700; line-height: 1.45; text-align: center; }
.add-user-form .device-setup-title { display: block; }
.add-user-auto-toggle { min-height: clamp(2.65rem, 10.5vw, 3.35rem); padding: 0.5rem 0.72rem 0.5rem 0.85rem; border: 1px solid rgba(95, 205, 247, 0.54); border-radius: clamp(0.8rem, 3vw, 1.2rem); background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(220, 244, 254, 0.64)); box-shadow: inset 0 1px 2px rgba(16, 94, 158, 0.06), 0 0.16rem 0.42rem rgba(36, 126, 181, 0.06); }
.add-user-auto-toggle:has(input:checked) { color: #064da8; }
.add-user-location-field { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(0.55rem, 2vw, 0.9rem); }
.add-user-location-field > label { color: inherit; }
.add-user-location-stepper { display: grid; grid-template-columns: clamp(2.45rem, 10.5vw, 3.35rem) clamp(4.5rem, 22vw, 7.25rem) clamp(2.45rem, 10.5vw, 3.35rem); align-items: center; gap: clamp(0.25rem, 1vw, 0.45rem); }
.add-user-location-stepper input { min-width: 0; direction: ltr; text-align: center; }
.user-location-step { display: grid; width: clamp(2.45rem, 10.5vw, 3.35rem); height: clamp(2.65rem, 10.5vw, 3.35rem); place-items: center; padding: 0; border: 1px solid rgba(12, 113, 220, 0.68); border-radius: clamp(0.8rem, 3vw, 1.2rem); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(204, 241, 255, 0.82)); box-shadow: 0 0.25rem 0.55rem rgba(24, 112, 176, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95); color: #0756b9; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(1.25rem, 5vw, 1.7rem); font-weight: 700; line-height: 1; transition: transform 100ms ease-out, filter 100ms ease-out, opacity 100ms ease-out; }
.user-location-step:active { transform: scale(0.975); filter: brightness(0.97); }
.user-location-step:disabled { cursor: not-allowed; opacity: 0.52; }
.add-user-form .device-field input:disabled { border-color: rgba(91, 172, 205, 0.4); background: linear-gradient(135deg, rgba(219, 239, 247, 0.84), rgba(202, 229, 240, 0.76)); box-shadow: none; color: rgba(13, 49, 107, 0.66); cursor: not-allowed; }
.add-user-confirmation { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 5vw, 2rem); background: rgba(2, 36, 84, 0.32); backdrop-filter: blur(0.17rem); }
.add-user-confirmation[hidden] { display: none; }
.add-user-confirmation-card { display: grid; width: min(100%, 31rem); gap: clamp(0.85rem, 3.2vw, 1.3rem); padding: clamp(1.15rem, 5vw, 2rem); border: 1px solid rgba(89, 220, 251, 0.82); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.98), rgba(222, 247, 255, 0.93)); box-shadow: 0 1rem 2.2rem rgba(11, 74, 127, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(0.88rem, 3.3vw, 1.08rem); font-weight: 600; line-height: 1.75; text-align: center; }
.add-user-confirmation-card p { margin: 0; }
.add-user-confirmation-detail { display: inline; color: #27557f; }
.add-user-confirmation-location { display: inline-grid; width: clamp(3.65rem, 16vw, 4.5rem); margin: 0 0.18rem; vertical-align: middle; }
.add-user-confirmation-location input { width: 100%; min-height: clamp(2.35rem, 9.5vw, 2.85rem); padding: 0.25rem 0.38rem; border: 1px solid rgba(95, 205, 247, 0.78); border-radius: 0.72rem; outline: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 249, 255, 0.86)); box-shadow: inset 0 1px 2px rgba(16, 94, 158, 0.08); color: #0d316b; direction: ltr; font: inherit; font-weight: 700; text-align: center; }
.add-user-confirmation-location input:focus { border-color: #0878ed; box-shadow: 0 0 0 3px rgba(78, 217, 255, 0.28), inset 0 1px 2px rgba(16, 94, 158, 0.08); }
.add-user-confirmation-actions { direction: rtl; margin-top: 0.1rem; }
.delete-user-form .device-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delete-user-location-field { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(0.55rem, 2vw, 0.9rem); }
.delete-user-location-field > label { color: inherit; }
.delete-user-location-stepper { display: grid; grid-template-columns: clamp(2.45rem, 10.5vw, 3.35rem) clamp(4.5rem, 22vw, 7.25rem) clamp(2.45rem, 10.5vw, 3.35rem); align-items: center; gap: clamp(0.25rem, 1vw, 0.45rem); }
.delete-user-location-stepper input { min-width: 0; direction: ltr; text-align: center; }
.delete-user-confirmation { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 5vw, 2rem); background: rgba(2, 36, 84, 0.32); backdrop-filter: blur(0.17rem); }
.delete-user-confirmation[hidden] { display: none; }
.delete-user-confirmation-card { display: grid; width: min(100%, 31rem); gap: clamp(0.85rem, 3.2vw, 1.3rem); padding: clamp(1.15rem, 5vw, 2rem); border: 1px solid rgba(89, 220, 251, 0.82); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.98), rgba(222, 247, 255, 0.93)); box-shadow: 0 1rem 2.2rem rgba(11, 74, 127, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(0.88rem, 3.3vw, 1.08rem); font-weight: 600; line-height: 1.75; text-align: center; }
.delete-user-confirmation-card p { margin: 0; }
.delete-user-confirmation-detail { display: inline; color: #27557f; }
.delete-user-confirmation-location { display: inline-grid; width: clamp(3.65rem, 16vw, 4.5rem); margin: 0 0.18rem; vertical-align: middle; }
.delete-user-confirmation-location input { width: 100%; min-height: clamp(2.35rem, 9.5vw, 2.85rem); padding: 0.25rem 0.38rem; border: 1px solid rgba(95, 205, 247, 0.78); border-radius: 0.72rem; outline: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 249, 255, 0.86)); box-shadow: inset 0 1px 2px rgba(16, 94, 158, 0.08); color: #0d316b; direction: ltr; font: inherit; font-weight: 700; text-align: center; }
.delete-user-confirmation-location input:focus { border-color: #0878ed; box-shadow: 0 0 0 3px rgba(78, 217, 255, 0.28), inset 0 1px 2px rgba(16, 94, 158, 0.08); }
.delete-user-confirmation-actions { direction: rtl; margin-top: 0.1rem; }
.device-setup-form.change-password-form:not(.is-edit-mode) .device-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); direction: ltr; }
.change-password-confirmation { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 5vw, 2rem); background: rgba(2, 36, 84, 0.32); backdrop-filter: blur(0.17rem); }
.change-password-confirmation[hidden] { display: none; }
.change-password-confirmation-card { display: grid; width: min(100%, 31rem); gap: clamp(0.85rem, 3.2vw, 1.3rem); padding: clamp(1.15rem, 5vw, 2rem); border: 1px solid rgba(89, 220, 251, 0.82); border-radius: clamp(1.35rem, 5.2vw, 2.4rem); background: linear-gradient(128deg, rgba(255, 255, 255, 0.98), rgba(222, 247, 255, 0.93)); box-shadow: 0 1rem 2.2rem rgba(11, 74, 127, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.55rem 1.1rem rgba(76, 184, 230, 0.08); color: #164578; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(0.88rem, 3.3vw, 1.08rem); font-weight: 600; line-height: 1.75; text-align: center; }
.change-password-confirmation-card p { margin: 0; }
.change-password-confirmation-actions { direction: rtl; margin-top: 0.1rem; }
.device-save { position: relative; isolation: isolate; min-height: clamp(2.85rem, 11.5vw, 3.55rem); overflow: hidden; padding: 0.45rem 1.5rem; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(135deg, rgba(218, 255, 255, 0.48), rgba(19, 150, 242, 0.12) 32%, rgba(4, 44, 159, 0.22)) padding-box, radial-gradient(ellipse at 28% 14%, #66dcff 0%, #159df3 27%, #0757ce 61%, #043892 100%) padding-box, linear-gradient(135deg, #efffff 0%, #4af4ff 10%, #0876ee 25%, #003897 48%, #0b5dd9 66%, #2be2f0 84%, #e0ffff 100%) border-box; box-shadow: 0 0.42rem 0.8rem rgba(0, 104, 235, 0.22), inset 0 1px 0 rgba(233, 255, 255, 0.94), inset 0 -0.45rem 0.75rem rgba(0, 24, 141, 0.22); color: #ffffff; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(0.94rem, 3.7vw, 1.18rem); font-weight: 700; text-shadow: 0 1px 2px rgba(0, 37, 126, 0.55); transition: transform 100ms ease-out, filter 100ms ease-out, opacity 100ms ease-out; }
.device-save::before { position: absolute; inset: 0.2rem; border: 1px solid rgba(195, 255, 255, 0.74); border-radius: inherit; box-shadow: inset 0 1px 2px rgba(235, 255, 255, 0.65); content: ""; pointer-events: none; }
.device-save:active { transform: scale(0.975); filter: brightness(0.96); }
.device-save:disabled { cursor: wait; opacity: 0.7; }
.device-form-actions { display: grid; gap: clamp(0.5rem, 1.8vw, 0.8rem); }
.device-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.45rem, 1.8vw, 0.8rem); }
.device-setup-form:not(.is-edit-mode) .device-primary-actions { grid-template-columns: minmax(0, 1fr); }
.device-setup-form.add-user-form .device-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.device-secondary-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.device-back,
.device-remove { position: relative; min-height: clamp(2.45rem, 9.5vw, 3rem); overflow: hidden; padding: 0.4rem 0.75rem; border-radius: 999px; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(0.76rem, 3vw, 0.98rem); font-weight: 700; line-height: 1; transition: transform 100ms ease-out, filter 100ms ease-out, opacity 100ms ease-out; }
.device-back { border: 1px solid rgba(12, 113, 220, 0.68); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(204, 241, 255, 0.82)); box-shadow: 0 0.25rem 0.55rem rgba(24, 112, 176, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95); color: #0756b9; }
.device-remove { --remove-progress: 0; isolation: isolate; border: 1px solid rgba(183, 22, 60, 0.88); background: linear-gradient(135deg, rgba(255, 247, 248, 0.98), rgba(255, 218, 223, 0.9)); box-shadow: 0 0.26rem 0.62rem rgba(167, 29, 64, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9); color: #a1163e; touch-action: none; user-select: none; -webkit-user-select: none; }
.device-remove::before { position: absolute; z-index: -1; inset: 0; transform: scaleX(var(--remove-progress)); transform-origin: left center; background: linear-gradient(90deg, #b1153e 0%, #e13d57 46%, #ff7282 100%); box-shadow: inset 0 1px 0 rgba(255, 235, 238, 0.76), inset 0 -0.4rem 0.65rem rgba(102, 0, 29, 0.22); content: ""; }
.device-remove::after { position: absolute; z-index: 0; inset: 0.18rem; border: 1px solid rgba(255, 228, 231, 0.72); border-radius: inherit; content: ""; pointer-events: none; }
.device-remove > span { position: relative; z-index: 1; }
.device-remove.is-holding { color: #ffffff; text-shadow: 0 1px 1px rgba(100, 0, 30, 0.42); }
.device-back:active,
.device-remove:active { transform: scale(0.975); filter: brightness(0.97); }
.device-remove:disabled { cursor: wait; opacity: 0.82; }
.app-shell.is-app-loading > .app-content,
.app-shell.is-app-loading > .bottom-navigation { visibility: hidden; }
.bottom-navigation[hidden] { display: none; }
.bottom-navigation.is-user-role { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-item[hidden],
.device-field[hidden],
.settings-option[hidden] { display: none; }
.settings-option-app { grid-column: 2; }

.output-row {
  display: grid;
  min-width: 0;
  min-height: clamp(4.25rem, 19.5vw, 6.75rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.65rem, 2.6vw, 1.3rem);
  padding: clamp(0.35rem, 1.2vw, 0.65rem) clamp(0.75rem, 3vw, 1.5rem);
  border: 1px solid transparent;
  border-radius: clamp(1.45rem, 5.8vw, 3rem);
  background: linear-gradient(108deg, rgba(250, 254, 255, 0.99), rgba(223, 246, 255, 0.92) 53%, rgba(248, 254, 255, 0.98)) padding-box, linear-gradient(118deg, #e9ffff 0%, #5cf9ff 9%, #00bfff 20%, #0878f2 35%, #033baf 50%, #076de8 64%, #10dff5 82%, #dffeff 100%) border-box;
  box-shadow: 0 0.38rem 0.9rem rgba(19, 132, 193, 0.14), 0 0 0.42rem rgba(0, 188, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -0.4rem 0.9rem rgba(91, 193, 239, 0.08);
}

.output-title { min-width: 0; justify-self: start; margin: 0; color: #071a75; font-family: Tahoma, "Segoe UI", Arial, sans-serif; font-size: clamp(1.15rem, 5.15vw, 2.2rem); font-weight: 700; line-height: 1; text-align: left; white-space: nowrap; }
.output-actions { display: flex; align-items: center; gap: clamp(0.35rem, 1.8vw, 0.85rem); }
.output-action { position: relative; isolation: isolate; display: grid; width: clamp(3rem, 13.5vw, 5.4rem); aspect-ratio: 1; place-items: center; overflow: hidden; padding: 0; border: 2px solid var(--thin-border); border-radius: 50%; background: radial-gradient(circle at 30% 13%, #ffffff 0, #fbfeff 30%, #e5f4fd 83%, #d5eafa 100%); box-shadow: 0 1.15rem 2rem rgba(60, 111, 159, 0.2), inset 0 1px 0 #fff; color: #1c426e; --output-bulb-bolt: #eaf6fd; --output-bulb-cross: #eaf6fd; transition: transform 90ms ease-out; }
.output-action .icon { position: relative; z-index: 1; width: 62%; height: 62%; }
.output-row.is-enabled .output-turn-on, .output-row.is-disabled .output-turn-off { border: 3px solid transparent; background: linear-gradient(138deg, rgba(215, 255, 255, 0.46) 0%, rgba(67, 210, 255, 0.14) 19%, transparent 42%, rgba(3, 42, 157, 0.18) 100%) padding-box, radial-gradient(ellipse at 28% 14%, #61d5ff 0%, #1197f3 25%, #0757cf 59%, #033895 100%) padding-box, linear-gradient(135deg, #e6ffff 0%, #43f6ff 9%, #0979ef 24%, #003796 48%, #0757d8 65%, #24ddf1 84%, #d7ffff 100%) border-box; box-shadow: 0 0 0 1px rgba(0, 66, 187, 0.82), 0 0 0 2px rgba(29, 214, 255, 0.5), 0 0.22rem 0.48rem rgba(0, 104, 235, 0.28), inset 0 1px 0 rgba(233, 255, 255, 0.92), inset 0 -0.55rem 0.8rem rgba(0, 24, 141, 0.26); color: #fff; --output-bulb-bolt: #0b55ca; --output-bulb-cross: #0b55ca; }
.output-row.is-enabled .output-turn-on::before, .output-row.is-disabled .output-turn-off::before { position: absolute; z-index: 0; inset: 0.22rem; border: 1.4px solid rgba(181, 255, 255, 0.86); border-radius: 50%; background: linear-gradient(135deg, rgba(232, 255, 255, 0.36), transparent 17%, transparent 74%, rgba(16, 213, 255, 0.32)); box-shadow: inset 0 2px 2px rgba(236, 255, 255, 0.66), inset 2px 0 5px rgba(35, 224, 255, 0.33), inset -2px -3px 6px rgba(0, 31, 147, 0.46); content: ""; pointer-events: none; }
.output-action:active { transform: scale(0.94); }

.bottom-navigation {
  display: grid;
  height: clamp(4.5rem, 18.5vw, 6.55rem);
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: auto;
  isolation: isolate;
  overflow: hidden;
  padding: 0.35rem 0 0.38rem;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: clamp(1.75rem, 6.5vw, 3.4rem);
  background: linear-gradient(125deg, rgba(255,255,255,0.94), rgba(218,243,255,0.76));
  box-shadow: 0 0.9rem 1.6rem rgba(51, 103, 151, 0.15), inset 0 1px 0 rgba(255,255,255,0.98);
}

.app-shell > .bottom-navigation { width: min(100%, 34rem); grid-row: 2; align-self: end; margin: 0 auto clamp(0.25rem, 1vw, 0.5rem); }

.nav-item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0 0 1.12rem;
  background: transparent;
  color: #6e8bb5;
  font-size: clamp(0.74rem, 2.85vw, 1.2rem);
  font-weight: 700;
  line-height: 1;
}

.nav-icon { width: clamp(2.2rem, 7.8vw, 3.7rem); height: clamp(2.2rem, 7.8vw, 3.7rem); }
.nav-item.is-active { color: var(--blue); }
.nav-item.is-active::after { position: absolute; z-index: 1; bottom: 0.2rem; width: 2.35rem; height: 0.25rem; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0.38rem rgba(0, 115, 247, 0.38); content: ""; }
.logout-item { color: var(--orange); }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Home keeps the shared PROTECT shell while its controller-specific controls
   remain intentionally deferred to a later phase. */
.phase-one-empty-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; margin: 0 auto; }
.phase-one-empty-view[hidden] { display: none; }
.phase-one-home-view { display: flex; width: min(100%, 34rem); min-height: 0; flex: 1 1 auto; align-items: center; justify-content: center; margin: 0 auto; }
.phase-one-home-view[hidden] { display: none; }
.phase-one-home-view .dial-controls { width: min(100%, 18rem); margin: 0; }
.phase-one-home-view .dial-controls::before,
.phase-one-home-view .dial-controls::after { display: none; }
.phase-one-home-view .dial-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.phase-one-home-view .dial-card { width: min(100%, clamp(11rem, 52vw, 16rem)); justify-self: center; }
.phase-one-home-view .dial-card .card-content { gap: 0; }
.settings-view { min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; row-gap: clamp(0.8rem, 3.6vw, 1.5rem); margin: 0 auto; }
.settings-view.has-admin-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: center; column-gap: clamp(0.45rem, 3vw, 1.45rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.7rem, 6vw, 3rem) 0; scrollbar-color: rgba(0, 124, 239, 0.48) transparent; scrollbar-width: thin; }
.settings-view.has-admin-actions .settings-option { grid-column: span 2; }
.settings-view.has-admin-actions [data-setting="device"] { grid-column: 2 / span 2; }
.settings-view .settings-option { width: min(100%, clamp(8.5rem, 36vw, 11rem)); border-radius: clamp(1.1rem, 4.8vw, 2rem); }
.settings-view .settings-option-app { grid-column: auto; }
.bottom-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.intro-view[dir="ltr"] .intro-copy { direction: ltr; font-family: "Protect Montserrat", "Segoe UI", Arial, sans-serif; text-align: left; }
.intro-view[dir="ltr"] .intro-copy ul { padding: 0 0 0 1.25rem; }

@keyframes spin-counterclockwise {
  from { transform: scaleX(-1) rotate(0deg); }
  to { transform: scaleX(-1) rotate(-360deg); }
}

@media (max-width: 380px) {
  .app-shell { padding-right: 0.8rem; padding-left: 0.8rem; }
  .brand-header { min-height: 9.5rem; }
  .location-picker { margin-right: auto; margin-left: auto; }
  .quick-actions { gap: 0.1rem; }
}

@media (min-width: 720px) {
  .app-shell { padding-top: 2.5rem; padding-bottom: 2rem; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .brand-header { min-height: 19.25rem; }
}

@media (orientation: landscape) and (max-height: 640px) {
  .app-shell { min-height: 100svh; }
}

@media (max-width: 600px) and (orientation: portrait) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .page-shell,
  .app-shell {
    height: 100svh;
    min-height: 0;
  }

  .app-shell {
    padding:
      max(0.35rem, env(safe-area-inset-top))
      0.75rem
      max(0.35rem, env(safe-area-inset-bottom));
  }

  .brand-header {
    min-height: clamp(7.15rem, 16svh, 8.6rem);
    padding-top: 0;
  }

  .brand-lockup { width: 88%; }

  .location-picker { margin-top: 0.3rem; }

  .security-controls {
    width: min(100%, 42svh);
    margin-top: clamp(0.7rem, 2svh, 1.4rem);
  }

  .security-grid { row-gap: clamp(5rem, 20vw, 7rem); }

  .security-controls::before,
  .security-controls::after,
  .sync-button { top: 53.8%; }

  .quick-actions {
    flex: 0 0 auto;
    gap: 0.18rem;
    margin-top: clamp(0.75rem, 2svh, 1.4rem);
    margin-bottom: clamp(0.3rem, 1svh, 0.65rem);
  }

  .quick-action { gap: 0.35rem; }

  .quick-disc {
    width: clamp(3.45rem, 15vw, 4.8rem);
    height: clamp(3.45rem, 15vw, 4.8rem);
  }

  .bottom-navigation {
    height: clamp(3.4rem, 14.5vw, 4.8rem);
    flex: 0 0 auto;
  }

  .nav-item { padding-bottom: 0.85rem; }
  .nav-item.is-active::after { bottom: 0.16rem; }
}

@media (max-width: 600px) and (max-height: 1000px) and (orientation: portrait) {
  .brand-header { min-height: clamp(6.75rem, 14.2svh, 7.7rem); }
  .security-controls {
    width: min(100%, 40svh);
    margin-top: clamp(0.55rem, 1.5svh, 1rem);
  }
  .quick-actions { margin-top: clamp(0.5rem, 1.2svh, 0.75rem); }
  .quick-disc { width: clamp(3.3rem, 14vw, 4.6rem); height: clamp(3.3rem, 14vw, 4.6rem); }
  .bottom-navigation { height: clamp(3.4rem, 14.5vw, 4.6rem); }
  .nav-icon { width: clamp(1.8rem, 6.4vw, 2.3rem); height: clamp(1.8rem, 6.4vw, 2.3rem); }
  .nav-item { gap: 0.14rem; padding-bottom: 0.68rem; font-size: clamp(0.67rem, 2.55vw, 0.9rem); }
}

@media (max-width: 380px) and (max-height: 600px) and (orientation: portrait) {
  .app-shell { padding: 0.25rem 0.65rem; }
  .brand-header { min-height: 6.75rem; }
  .security-controls { width: min(100%, 38svh); margin-top: 0.55rem; }
  .security-grid { row-gap: 5rem; }
  .quick-actions { margin-top: 0.4rem; margin-bottom: 0.25rem; }
  .quick-disc { width: 3.2rem; height: 3.2rem; }
  .quick-action { gap: 0.25rem; font-size: 0.84rem; }
  .bottom-navigation { height: 3.45rem; }
  .card-content { padding: 0.45rem; }
  .card-title { font-size: 1.12rem; letter-spacing: -0.065em; }
  .mode-icon { width: 3.1rem; height: 3.1rem; }
  .nav-item { gap: 0.08rem; padding-bottom: 0.45rem; font-size: 0.64rem; }
}

@media (max-width: 420px) and (max-height: 700px) and (orientation: portrait) {
  .card-content { padding: 0.45rem; }
  .card-title { font-size: clamp(1.1rem, 4.6vw, 1.2rem); letter-spacing: -0.065em; }
  .mode-icon { width: 3.1rem; height: 3.1rem; }
}

@media (orientation: portrait) and (min-aspect-ratio: 9/18) and (max-aspect-ratio: 9/14) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .page-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100%;
    min-height: 100%;
    padding: 6px 12px;
  }

  /* Android's standalone WebView can collapse the grid's trailing auto row
     when the active view is intrinsically taller than the viewport. Pin the
     navigation to the visual viewport in this short 16:9 portrait range. */
  .app-shell > .bottom-navigation {
    position: fixed;
    z-index: 4;
    right: auto;
    bottom: max(6px, env(safe-area-inset-bottom));
    left: 50%;
    width: calc(100% - 24px);
    margin: 0;
    transform: translateX(-50%);
  }

  .brand-header { min-height: clamp(108px, 14svh, 132px); }
  .intro-view { gap: 0.45rem; margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .intro-copy { padding: 0.85rem 1rem; font-size: clamp(0.75rem, 3.05vw, 1rem); line-height: 1.7; }
  .intro-copy ul { margin-top: 0.55rem; }
  .intro-copy li + li { margin-top: 0.48rem; }
  .intro-acknowledge { min-height: 2.7rem; }
  .login-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .login-form { gap: 0.55rem; padding: 0.8rem 1rem; }
  .device-setup-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .device-setup-form { gap: 0.5rem; padding: 0.8rem 1rem; }
  .app-settings-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .app-settings-form { gap: 0.5rem; padding: 0.8rem 1rem; }
  .users-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .users-panel { gap: 0.4rem; padding: 0.7rem 0.85rem; }
  .user-row { min-height: 2.55rem; }
  .user-slot,
  .user-input { min-height: 1.95rem; }
  .dialing-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .dialing-form { gap: 0.5rem; padding: 0.8rem 1rem; }
  .zone-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .zone-form { gap: 0.5rem; padding: 0.8rem 1rem; }
  .zone-chime-form { gap: 0.5rem; padding: 0.75rem 1rem; }
  .admins-view,
  .contacts-view,
  .remote-view,
  .wls-view,
  .output-settings-view,
  .alarm-settings-view { margin-top: 0.35rem; margin-bottom: 0.4rem; }
  .admins-form,
  .contacts-form,
  .remote-form,
  .wls-form,
  .output-settings-form,
  .alarm-settings-form { gap: 0.48rem; padding: 0.8rem 1rem; }
  .alarm-mode-options { row-gap: 0.2rem; }
  .admin-select { min-height: 2.45rem; }
  .admin-contact-picker { width: 2.45rem; height: 2.45rem; }
  .contacts-delete { min-height: 2.45rem; }
  .admin-alert-grid { gap: 0.38rem 0.55rem; }
  .device-field input { min-height: 2.45rem; }
  .device-save { min-height: 2.7rem; }
  .device-back,
  .device-remove { min-height: 2.3rem; }
  .brand-promise { font-size: clamp(13px, 3vw, 18px); }
  .location-selector {
    min-height: clamp(34px, 8.6vw, 51px);
    font-size: clamp(15px, 3.55vw, 21px);
  }

  .security-controls {
    width: min(100%, 38svh);
    margin-top: clamp(9px, 1.5svh, 16px);
  }

  .security-grid { row-gap: clamp(80px, 20vw, 112px); }

  .security-controls::before,
  .security-controls::after {
    top: 53.8%;
    width: calc(50% - clamp(52px, 12.7vw, 80px));
  }

  .sync-button {
    top: 53.8%;
    width: clamp(52px, 12.7vw, 80px);
  }

  .card-content { padding: 10px; }
  .mode-icon { width: clamp(48px, 12vw, 76px); height: clamp(48px, 12vw, 76px); }
  .card-title { font-size: clamp(18px, 4.7vw, 30px); }
  .credit-icon { height: clamp(44px, 11.55vw, 64px); font-size: clamp(52px, 13.86vw, 80px); }

  .quick-actions {
    margin-top: clamp(8px, 1.2svh, 12px);
    margin-bottom: clamp(4px, 1svh, 8px);
  }
  .quick-action { gap: 6px; font-size: clamp(13px, 3.5vw, 19px); }
  .quick-disc { width: clamp(52px, 14vw, 74px); height: clamp(52px, 14vw, 74px); }

  .bottom-navigation { height: clamp(56px, 14.5vw, 74px); }
  .nav-icon { width: clamp(28px, 6.4vw, 37px); height: clamp(28px, 6.4vw, 37px); }
  .nav-item { gap: 2px; padding-bottom: 9px; font-size: clamp(11px, 2.55vw, 14px); }
  .nav-item.is-active::after { bottom: 3px; }
}

/* Dark mode is additive: the light-theme declarations above remain the base. */
html[data-theme="dark"] {
  color-scheme: dark;
  --page-blue: #020713;
  --surface: #04162e;
  --surface-strong: #08254a;
  --ink: #eaf6ff;
  --ink-muted: #a9c9ec;
  --blue: #18e9f8;
  --blue-deep: #037af1;
  --cyan: #22eff8;
  --thin-border: rgba(0, 149, 255, 0.86);
  --soft-shadow: 0 1rem 2.1rem rgba(0, 0, 0, 0.46);
  background: #020713;
}

html[data-theme="dark"] body { color: #eaf6ff; background: #020713; }
html[data-theme="dark"] button:focus-visible { outline-color: #20f3ff; }
html[data-theme="dark"] .app-shell {
  background:
    radial-gradient(ellipse at 50% 4%, rgba(8, 115, 211, 0.42) 0%, rgba(4, 47, 100, 0.32) 25%, transparent 53%),
    radial-gradient(ellipse at 50% 31%, rgba(0, 146, 238, 0.16) 0%, rgba(0, 83, 171, 0.1) 31%, transparent 68%),
    radial-gradient(ellipse at 50% 62%, rgba(0, 119, 228, 0.13) 0%, transparent 48%),
    linear-gradient(164deg, #052247 0%, #03142d 37%, #020b1c 61%, #010816 100%);
}
html[data-theme="dark"] .top-decoration { opacity: 1; filter: none; }
html[data-theme="dark"] .bg-top-sheen { fill: #0754a7; fill-opacity: 0.42; }
html[data-theme="dark"] .bg-top-fold { fill: #008ffc; fill-opacity: 0.24; }
html[data-theme="dark"] .bg-top-wave-fill { fill: #051b45; fill-opacity: 0.92; }
html[data-theme="dark"] .bg-top-wave-shadow { fill: #02142f; fill-opacity: 0.76; }
html[data-theme="dark"] .bg-top-line-one { stroke: url(#top-line-dark); stroke-opacity: 0.7; }
html[data-theme="dark"] .bg-top-line-two { stroke: url(#top-line-dark); stroke-opacity: 0.96; }
html[data-theme="dark"] .bg-top-line-three { stroke: url(#top-line-dark); stroke-opacity: 0.66; }
html[data-theme="dark"] .bottom-decoration { opacity: 1; filter: none; }
html[data-theme="dark"] .bg-bottom-wave-fill { fill: #063277; fill-opacity: 0.58; }
html[data-theme="dark"] .bg-bottom-ribbon { fill: #031b48; fill-opacity: 0.78; }
html[data-theme="dark"] .bg-bottom-line-one { stroke: url(#bottom-line-dark); stroke-opacity: 0.78; }
html[data-theme="dark"] .bg-bottom-line-two { stroke: url(#bottom-line-dark); stroke-opacity: 1; }
html[data-theme="dark"] .bg-bottom-facet { fill: #06306f; fill-opacity: 0.5; }
html[data-theme="dark"] #logo-word stop:nth-child(1) { stop-color: #ffffff; }
html[data-theme="dark"] #logo-word stop:nth-child(2) { stop-color: #e7f7ff; }
html[data-theme="dark"] #logo-word stop:nth-child(3) { stop-color: #82d9ff; }
html[data-theme="dark"] .logo-wordmark { stroke: rgba(53, 209, 255, 0.52); filter: drop-shadow(0 0 0.38rem rgba(31, 200, 255, 0.45)); }
html[data-theme="dark"] .brand-promise { color: #1fe9f5; text-shadow: 0 0 0.65rem rgba(0, 215, 255, 0.3); }
html[data-theme="dark"] .location-selector {
  border: 1px solid transparent;
  background: linear-gradient(108deg, rgba(4, 31, 72, 0.94), rgba(6, 71, 136, 0.88)) padding-box, linear-gradient(118deg, rgba(180, 255, 255, 0.94) 0%, #1befff 12%, #078ff1 32%, #0344bd 56%, #00d9ef 80%, rgba(193, 255, 255, 0.92) 100%) border-box;
  box-shadow: 0 0 0.34rem rgba(0, 173, 246, 0.3), 0 0.42rem 1rem rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(99, 224, 255, 0.37);
  color: #edf8ff;
}
html[data-theme="dark"] .location-icon { color: #16ccff; }
html[data-theme="dark"] .chevron { color: #dff8ff; }
html[data-theme="dark"] .location-menu {
  border-color: rgba(0, 156, 250, 0.86);
  background: linear-gradient(145deg, rgba(3, 22, 54, 0.98), rgba(5, 56, 111, 0.97));
  box-shadow: 0 0.7rem 1.35rem rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(110, 230, 255, 0.32);
}
html[data-theme="dark"] .location-option { border-color: rgba(0, 145, 237, 0.46); background: rgba(4, 37, 80, 0.78); box-shadow: inset 0 1px 0 rgba(104, 221, 255, 0.19); color: #dff3ff; }
html[data-theme="dark"] .location-option::before { border-color: #41d9ff; }
html[data-theme="dark"] .location-option.is-selected { border-color: #18e8ff; background: linear-gradient(130deg, rgba(5, 90, 164, 0.94), rgba(0, 42, 113, 0.98)); color: #ffffff; }
html[data-theme="dark"] .location-option.is-selected::before { border-color: #32ecff; background: #32ecff; }
html[data-theme="dark"] .add-location-option { border-color: rgba(15, 223, 255, 0.82); background: linear-gradient(135deg, rgba(2, 54, 119, 0.92), rgba(2, 23, 67, 0.96)); color: #4cedff; }

html[data-theme="dark"] .security-controls::before,
html[data-theme="dark"] .security-controls::after { background: linear-gradient(90deg, rgba(0, 125, 241, 0.15), #126bc7 36%, #237ed7 100%); box-shadow: 0 0 0.35rem rgba(0, 146, 255, 0.3); }
html[data-theme="dark"] .security-card,
html[data-theme="dark"] .credit-card.is-active {
  border-color: rgba(0, 127, 225, 0.94);
  background: radial-gradient(circle at 30% 13%, #174d82 0%, #092d5c 36%, #031a3d 75%, #021329 100%);
  box-shadow: 0 0.72rem 1.5rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(104, 214, 255, 0.35), inset 0 -0.8rem 1.3rem rgba(0, 7, 31, 0.46);
  color: #f4fbff;
  --lock-keyhole: #061e4c;
}
html[data-theme="dark"] .security-card::after,
html[data-theme="dark"] .credit-card.is-active::after { border: 0; background: linear-gradient(142deg, transparent 29%, rgba(11, 126, 226, 0.27) 100%); }
html[data-theme="dark"] .card-rings,
html[data-theme="dark"] .card-rings::before,
html[data-theme="dark"] .card-rings::after { border-color: rgba(35, 205, 255, 0.21); }
html[data-theme="dark"] .credit-icon { color: #effaff; }
html[data-theme="dark"] .trigger-icon { filter: brightness(0) saturate(100%) invert(92%) sepia(22%) saturate(814%) hue-rotate(154deg) brightness(105%) contrast(103%); }
html[data-theme="dark"] .trigger-divider { background: linear-gradient(90deg, rgba(0, 125, 241, 0.15), #126bc7 36%, #237ed7 64%, rgba(0, 125, 241, 0.15)); box-shadow: 0 0 0.35rem rgba(0, 146, 255, 0.3); }
html[data-theme="dark"] .settings-option-image { filter: brightness(0) saturate(100%) invert(100%); }
html[data-theme="dark"] .mode-indicator { background: #257bc8; box-shadow: 0 0 0.3rem rgba(0, 105, 222, 0.34); }
html[data-theme="dark"] .security-card.is-active {
  border: 3px solid transparent;
  background: linear-gradient(138deg, rgba(26, 224, 255, 0.23) 0%, rgba(4, 108, 238, 0.21) 25%, rgba(2, 26, 101, 0.88) 72%, rgba(0, 12, 53, 0.96) 100%) padding-box, radial-gradient(ellipse at 28% 14%, #25efff 0%, #078ff1 24%, #0642c6 58%, #021861 100%) padding-box, linear-gradient(135deg, #d5ffff 0%, #25edff 8%, #008df8 24%, #0346df 48%, #00d7f2 76%, #a5ffff 100%) border-box;
  box-shadow: 0 0 0 1px rgba(1, 104, 255, 0.92), 0 0 0 3px rgba(9, 218, 255, 0.74), 0 0 1.5rem 0.12rem rgba(0, 221, 255, 0.7), 0 1.1rem 2.5rem rgba(0, 49, 178, 0.5), inset 0 1px 0 rgba(220, 255, 255, 0.82), inset 0 -1rem 1.5rem rgba(0, 12, 93, 0.54);
  color: #ffffff;
  --lock-keyhole: #052d7d;
}
html[data-theme="dark"] .security-card.is-active::before { border-color: rgba(106, 247, 255, 0.86); background: linear-gradient(135deg, rgba(147, 252, 255, 0.24), transparent 20%, transparent 72%, rgba(0, 159, 255, 0.42)); box-shadow: inset 0 2px 2px rgba(214, 255, 255, 0.62), inset 2px 0 6px rgba(27, 238, 255, 0.47), inset -2px -3px 8px rgba(0, 21, 142, 0.58), 0 0 0.42rem rgba(38, 246, 255, 0.42); }
html[data-theme="dark"] .security-card.is-active::after { border-color: rgba(96, 240, 255, 0.25); background: radial-gradient(ellipse at 18% 12%, rgba(95, 248, 255, 0.29), transparent 44%), linear-gradient(135deg, transparent 28%, rgba(0, 119, 255, 0.38) 100%); }
html[data-theme="dark"] .credit-card.is-active {
  border: 2px solid rgba(0, 127, 225, 0.94);
  background: radial-gradient(circle at 30% 13%, #174d82 0%, #092d5c 36%, #031a3d 75%, #021329 100%);
  box-shadow: 0 0.72rem 1.5rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(104, 214, 255, 0.35), inset 0 -0.8rem 1.3rem rgba(0, 7, 31, 0.46);
  color: #f4fbff;
  --lock-keyhole: #061e4c;
}
html[data-theme="dark"] .credit-card.is-active::before { display: none; }
html[data-theme="dark"] .credit-card.is-active::after {
  right: -20%;
  bottom: -37%;
  width: 122%;
  height: 74%;
  border: 0;
  background: linear-gradient(142deg, transparent 29%, rgba(11, 126, 226, 0.27) 100%);
  box-shadow: none;
}
html[data-theme="dark"] .is-active .mode-indicator { background: #19ecff; box-shadow: 0 0 0.6rem rgba(27, 247, 255, 0.9); }
html[data-theme="dark"] .sync-button { border-color: rgba(0, 219, 255, 0.95); background: radial-gradient(circle at 35% 27%, #22eaff 0%, #0871d7 45%, #031a4e 100%); box-shadow: 0 0 0 2px rgba(0, 106, 234, 0.85), 0 0 1.15rem rgba(0, 214, 255, 0.58), 0 0.7rem 1.45rem rgba(0, 0, 0, 0.42), inset 0 0 0.9rem rgba(121, 248, 255, 0.42); color: #e7ffff; }

html[data-theme="dark"] .quick-action { color: #ffffff; text-shadow: 0 0 0.56rem rgba(178, 245, 255, 0.28); }
html[data-theme="dark"] .quick-disc {
  border-color: rgba(102, 238, 255, 0.92);
  background: radial-gradient(circle at 35% 28%, rgba(90, 238, 255, 0.75) 0%, rgba(5, 99, 214, 0.94) 43%, rgba(3, 22, 86, 0.99) 100%);
  box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.75), 0 0.8rem 1.45rem rgba(0, 0, 0, 0.38), inset 0 0 1.2rem rgba(115, 241, 255, 0.38);
}
html[data-theme="dark"] .quick-disc::before { border-color: rgba(183, 255, 255, 0.64); }
html[data-theme="dark"] .quick-icon { color: #dffaff; filter: drop-shadow(0 0 0.32rem rgba(218, 255, 255, 0.55)); }
html[data-theme="dark"] .alert-action .quick-disc {
  border-color: rgba(102, 238, 255, 0.92);
  background: radial-gradient(circle at 35% 28%, rgba(90, 238, 255, 0.75) 0%, rgba(5, 99, 214, 0.94) 43%, rgba(3, 22, 86, 0.99) 100%);
  box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.75), 0 0.8rem 1.45rem rgba(0, 0, 0, 0.38), inset 0 0 1.2rem rgba(115, 241, 255, 0.38);
}
html[data-theme="dark"] .call-alert-action .quick-disc {
  border-color: #35f8ee;
  background: radial-gradient(circle at 35% 28%, #64fff0 0%, #008f99 42%, #043c55 100%);
  box-shadow: 0 0 0 3px rgba(1, 222, 205, 0.74), 0 0 1rem rgba(0, 236, 213, 0.52), 0 0.8rem 1.45rem rgba(0, 0, 0, 0.38), inset 0 0 1.2rem rgba(104, 255, 240, 0.31);
}

html[data-theme="dark"] .output-row {
  border: 1px solid transparent;
  background: linear-gradient(108deg, rgba(3, 24, 59, 0.98), rgba(4, 48, 99, 0.94) 53%, rgba(3, 20, 53, 0.98)) padding-box, linear-gradient(118deg, #b7ffff 0%, #1befff 9%, #008efa 23%, #0344d3 50%, #00d7ef 77%, #adffff 100%) border-box;
  box-shadow: 0 0 0.34rem rgba(0, 189, 255, 0.38), 0 0.6rem 1.2rem rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(121, 237, 255, 0.45), inset 0 -0.5rem 1rem rgba(0, 10, 61, 0.42);
}
html[data-theme="dark"] .output-title { color: #effaff; text-shadow: 0 0 0.55rem rgba(130, 222, 255, 0.28); }
html[data-theme="dark"] .output-action {
  border-color: rgba(0, 145, 239, 0.9);
  background: radial-gradient(circle at 30% 13%, #1d5a9a 0%, #0a356b 36%, #041c41 82%, #021329 100%);
  box-shadow: 0 0.55rem 1.1rem rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(116, 225, 255, 0.35), inset 0 -0.65rem 1rem rgba(0, 7, 38, 0.44);
  color: #eaf8ff;
  --output-bulb-bolt: #062b70;
  --output-bulb-cross: #062b70;
}
html[data-theme="dark"] .output-row.is-enabled .output-turn-on,
html[data-theme="dark"] .output-row.is-disabled .output-turn-off {
  border: 3px solid transparent;
  background: linear-gradient(138deg, rgba(24, 232, 255, 0.22), rgba(5, 77, 220, 0.24) 42%, rgba(2, 17, 84, 0.94) 100%) padding-box, radial-gradient(ellipse at 28% 14%, #24efff 0%, #078ef1 25%, #0641c4 61%, #02185c 100%) padding-box, linear-gradient(135deg, #d7ffff 0%, #22ecff 9%, #007fe9 25%, #053fd0 48%, #00d5ed 82%, #c6ffff 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 92, 228, 0.88), 0 0 0 2px rgba(11, 223, 255, 0.62), 0 0.22rem 0.75rem rgba(0, 191, 255, 0.36), inset 0 1px 0 rgba(231, 255, 255, 0.8), inset 0 -0.55rem 0.8rem rgba(0, 15, 114, 0.42);
  color: #ffffff;
  --output-bulb-bolt: #063b92;
  --output-bulb-cross: #063b92;
}
html[data-theme="dark"] .output-row.is-enabled .output-turn-on::before,
html[data-theme="dark"] .output-row.is-disabled .output-turn-off::before { border-color: rgba(128, 246, 255, 0.82); background: linear-gradient(135deg, rgba(177, 255, 255, 0.26), transparent 20%, transparent 72%, rgba(0, 152, 255, 0.38)); }

html[data-theme="dark"] .bottom-navigation {
  border: 1px solid transparent;
  background: linear-gradient(125deg, rgba(3, 25, 58, 0.97), rgba(4, 56, 108, 0.91)) padding-box, linear-gradient(118deg, rgba(186, 255, 255, 0.92) 0%, #23e9ff 11%, #068cf1 29%, #033fb7 55%, #00d8ef 81%, rgba(191, 255, 255, 0.9) 100%) border-box;
  box-shadow: 0 0 0.38rem rgba(0, 132, 246, 0.26), 0 0.9rem 1.6rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(102, 225, 255, 0.36);
}
html[data-theme="dark"] .nav-item { color: #aacbf2; }
html[data-theme="dark"] .nav-item.is-active { color: #1cecf9; text-shadow: 0 0 0.48rem rgba(0, 231, 255, 0.56); }
html[data-theme="dark"] .nav-item.is-active::after { background: #1cecf9; box-shadow: 0 0 0.55rem rgba(0, 235, 255, 0.74); }
html[data-theme="dark"] .logout-item { color: #ff6a26; }

html[data-theme="dark"] .settings-option {
  background: radial-gradient(circle at 36% 25%, rgba(30, 99, 154, 0.98) 0%, rgba(5, 42, 86, 0.96) 47%, rgba(3, 22, 52, 0.96) 100%) padding-box, linear-gradient(118deg, #b8ffff 0%, #2af0ff 10%, #008df7 24%, #0345d1 49%, #00d9f0 80%, #d4ffff 100%) border-box;
  box-shadow: 0 0.42rem 0.9rem rgba(0, 0, 0, 0.38), 0 0 0.42rem rgba(0, 188, 255, 0.42), inset 0 1px 0 rgba(127, 237, 255, 0.42), inset 0 -0.4rem 0.9rem rgba(0, 8, 44, 0.32);
  color: #effaff;
  --lock-keyhole: #05265a;
}

html[data-theme="dark"] .app-settings-form,
html[data-theme="dark"] .users-panel,
html[data-theme="dark"] .dialing-form,
html[data-theme="dark"] .zone-form,
html[data-theme="dark"] .zone-chime-form,
html[data-theme="dark"] .admins-form,
html[data-theme="dark"] .contacts-form,
html[data-theme="dark"] .remote-form,
html[data-theme="dark"] .wls-form,
html[data-theme="dark"] .output-settings-form,
html[data-theme="dark"] .alarm-settings-form,
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .device-setup-form,
html[data-theme="dark"] .intro-copy {
  border-color: rgba(0, 168, 246, 0.82);
  background: linear-gradient(128deg, rgba(3, 28, 65, 0.98), rgba(5, 57, 111, 0.91));
  box-shadow: 0 0.55rem 1.25rem rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(100, 226, 255, 0.34), inset 0 -0.55rem 1.1rem rgba(0, 5, 42, 0.36);
  color: #eaf7ff;
}
html[data-theme="dark"] .app-setting-group legend,
html[data-theme="dark"] .dialing-sequence-grid .app-choice,
html[data-theme="dark"] .app-choice,
html[data-theme="dark"] .app-login-toggle,
html[data-theme="dark"] .device-field,
html[data-theme="dark"] .admin-alerts legend,
html[data-theme="dark"] .admin-alert-choice,
html[data-theme="dark"] .login-form h1,
html[data-theme="dark"] .device-setup-title,
html[data-theme="dark"] .intro-copy { color: #dff6ff; }
html[data-theme="dark"] .users-title,
html[data-theme="dark"] .users-column-headings { color: #dff6ff; }
html[data-theme="dark"] .user-slot { border-color: rgba(0, 173, 244, 0.52); background: linear-gradient(135deg, rgba(7, 88, 151, 0.94), rgba(3, 42, 91, 0.9)); color: #53efff; }
html[data-theme="dark"] .user-input { border-color: rgba(0, 164, 246, 0.76); background: linear-gradient(135deg, rgba(2, 19, 49, 0.98), rgba(5, 50, 100, 0.92)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34), 0 0.2rem 0.55rem rgba(0, 123, 214, 0.2); color: #effaff; }
html[data-theme="dark"] .app-choice:has(input:checked) { color: #2eecff; }
html[data-theme="dark"] .app-choice input { accent-color: #19e8f8; }
html[data-theme="dark"] .admin-alert-choice:has(input:checked) { color: #2eecff; }
html[data-theme="dark"] .admin-alert-choice input { accent-color: #19e8f8; }
html[data-theme="dark"] .app-toggle-track { border-color: rgba(0, 167, 238, 0.74); background: linear-gradient(135deg, #0a376b, #06234b); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.36), 0 0.12rem 0.3rem rgba(0, 170, 255, 0.2); }
html[data-theme="dark"] .app-toggle-thumb { background: #dffaff; box-shadow: 0 0.08rem 0.28rem rgba(0, 219, 255, 0.45); }
html[data-theme="dark"] .add-user-auto-toggle { border-color: rgba(0, 164, 246, 0.48); background: linear-gradient(135deg, rgba(3, 30, 68, 0.88), rgba(5, 54, 105, 0.76)); }
html[data-theme="dark"] .add-user-form .device-field input:disabled { border-color: rgba(0, 129, 184, 0.45); background: linear-gradient(135deg, rgba(3, 29, 63, 0.82), rgba(5, 44, 83, 0.76)); color: rgba(218, 246, 255, 0.58); }
html[data-theme="dark"] .user-location-step { border-color: rgba(0, 177, 250, 0.74); background: linear-gradient(135deg, rgba(5, 62, 124, 0.98), rgba(3, 26, 68, 0.97)); box-shadow: 0 0.25rem 0.55rem rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(88, 228, 255, 0.36); color: #37efff; }
html[data-theme="dark"] .add-user-confirmation { background: rgba(0, 9, 31, 0.6); }
html[data-theme="dark"] .add-user-confirmation-card { border-color: rgba(0, 168, 246, 0.82); background: linear-gradient(128deg, rgba(3, 28, 65, 0.99), rgba(5, 57, 111, 0.94)); box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(100, 226, 255, 0.34), inset 0 -0.55rem 1.1rem rgba(0, 5, 42, 0.36); color: #eaf7ff; }
html[data-theme="dark"] .add-user-confirmation-detail { color: #dff6ff; }
html[data-theme="dark"] .add-user-confirmation-location input { border-color: rgba(0, 164, 246, 0.76); background: linear-gradient(135deg, rgba(2, 19, 49, 0.98), rgba(5, 50, 100, 0.92)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34); color: #effaff; }
html[data-theme="dark"] .delete-user-confirmation { background: rgba(0, 9, 31, 0.6); }
html[data-theme="dark"] .delete-user-confirmation-card { border-color: rgba(0, 168, 246, 0.82); background: linear-gradient(128deg, rgba(3, 28, 65, 0.99), rgba(5, 57, 111, 0.94)); box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(100, 226, 255, 0.34), inset 0 -0.55rem 1.1rem rgba(0, 5, 42, 0.36); color: #eaf7ff; }
html[data-theme="dark"] .delete-user-confirmation-detail { color: #dff6ff; }
html[data-theme="dark"] .delete-user-confirmation-location input { border-color: rgba(0, 164, 246, 0.76); background: linear-gradient(135deg, rgba(2, 19, 49, 0.98), rgba(5, 50, 100, 0.92)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34); color: #effaff; }
html[data-theme="dark"] .change-password-confirmation { background: rgba(0, 9, 31, 0.6); }
html[data-theme="dark"] .change-password-confirmation-card { border-color: rgba(0, 168, 246, 0.82); background: linear-gradient(128deg, rgba(3, 28, 65, 0.99), rgba(5, 57, 111, 0.94)); box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(100, 226, 255, 0.34), inset 0 -0.55rem 1.1rem rgba(0, 5, 42, 0.36); color: #eaf7ff; }
html[data-theme="dark"] .device-field input,
html[data-theme="dark"] .device-field select { border-color: rgba(0, 164, 246, 0.76); background: linear-gradient(135deg, rgba(2, 19, 49, 0.98), rgba(5, 50, 100, 0.92)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34), 0 0.2rem 0.55rem rgba(0, 123, 214, 0.2); color: #effaff; }
html[data-theme="dark"] .device-field select option { background: #061c42; color: #effaff; }
html[data-theme="dark"] .admin-select { border-color: rgba(0, 164, 246, 0.76); background: linear-gradient(135deg, rgba(2, 19, 49, 0.98), rgba(5, 50, 100, 0.92)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34), 0 0.2rem 0.55rem rgba(0, 123, 214, 0.2); color: #effaff; }
html[data-theme="dark"] .admin-select option { background: #061c42; color: #effaff; }
html[data-theme="dark"] .device-back,
html[data-theme="dark"] .fingerprint-login { border-color: rgba(0, 177, 250, 0.74); background: linear-gradient(135deg, rgba(5, 62, 124, 0.98), rgba(3, 26, 68, 0.97)); box-shadow: 0 0.25rem 0.55rem rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(88, 228, 255, 0.36); color: #37efff; }
html[data-theme="dark"] .admin-contact-picker { border-color: rgba(0, 177, 250, 0.74); background: linear-gradient(135deg, rgba(5, 62, 124, 0.98), rgba(3, 26, 68, 0.97)); box-shadow: 0 0.25rem 0.55rem rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(88, 228, 255, 0.36); color: #37efff; }
html[data-theme="dark"] .device-remove { border-color: rgba(255, 78, 101, 0.9); background: linear-gradient(135deg, rgba(93, 13, 38, 0.98), rgba(43, 5, 25, 0.96)); color: #ffb7c1; }
html[data-theme="dark"] .intro-copy h1,
html[data-theme="dark"] .intro-copy .intro-lead,
html[data-theme="dark"] .intro-copy a { color: #25eaf8; }

@media (max-width: 320px) {
  .alarm-mode-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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