#lightbulb {
  font-size: 100px;
  display: block;
  text-align: center;
}

h1 {
  padding: 0;
  margin: 10px 0;
}

.chat-user-avatar {
  font-size: 40px;
  background: #ccc;
  padding: 5px 10px;
}

.feature-icon {
  font-size: 44px;
  padding: 0;
  line-height: 68px;
  width: 72px;
  text-align: center;
  opacity: .8;
  border: 3px solid;
  border-radius: 200px;
  height: 72px;
  margin-bottom: 20px;
}

.feature-icon.fa-gamepad {
  line-height: 60px;
}

.feature-icon.fa-tachometer {
  line-height: 60px;
}

.app-content-loading {
  text-align: center;
  height: 100%;
  width: 100%;
  background: #fff;
  position: relative;
}

.loading-spinner {
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.carousel-example-content {
  position: absolute;
  font-size: 50px;
  line-height: 50px;
  width: 100%;
  text-align: center;
  top: 50%;
  margin-top: -50px;
}


.carousel-item {
  display: block;
  color: #444;
  background: #f4f4f4;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.carousel {
  padding: 20px;
  overflow: visible;
}

.carousel-inner {
  position: relative;
  overflow: visible;
}

.carousel>.item, .carousel-item {
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.carousel-item {
  -webkit-transition: -webkit-transform 500ms;
  -moz-transition: -moz-transform 500ms;
  transition: transform 500ms;
}

[drag-to-dismiss]{
  transform: translate(0,0); /* NOTE: this is required to prevent mobile webkit issues */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  -moz-transition: opacity 300ms, -moz-transform 300ms;
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
}

.notices-container {
  overflow-x: hidden;
}

.dismiss {
  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  -moz-transition: opacity 300ms, -moz-transform 300ms;
  transition: opacity 300ms, transform 300ms;
  opacity: 0.5;
}

.dismitted {
  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  -moz-transition: opacity 300ms, -moz-transform 300ms;
  transition: opacity 300ms, transform 300ms;
  opacity: 0;
}

.list-group-item-home {
  padding: 20px;
}

pre {
  text-align: left !important;
}

input.scrollable-header {
  border-bottom: 3px solid #ccc;
}

.toucharea {width: 100%; height: 100%;}

.touch-mark {
  position: absolute;
  background-color: #ccc;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  margin-top: -15px;
  margin-left: -15px;
  opacity: .5;
  transform: scale(1, 1);
}

/* ---- Power-cycle alerts (Status screen, offline devices) ------------------ */
@keyframes pcPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .5;  transform: scale(1.18); }
}
.pc-pulse { animation: pcPulse 1.1s ease-in-out infinite; transform-origin: center; }

/* Top-of-screen summary: "N devices need attention" */
.pc-summary {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #c0392b, #8e2a20);
  color: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(192, 57, 43, .45);
}
.pc-summary .pc-ic { font-size: 26px; flex: 0 0 auto; }
.pc-summary-title { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.pc-summary-sub   { font-size: 12px; opacity: .92; margin-top: 2px; }

/* Per-device red banner with power-cycle instructions */
.pc-alert {
  background: linear-gradient(135deg, #e5443b, #b8281f);
  color: #fff; border-radius: 10px; padding: 10px 12px; margin: 0 0 8px 0;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 2px 12px rgba(229, 68, 59, .45);
}
.pc-alert-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
.pc-alert-head .pc-ic { font-size: 18px; }
.pc-alert-body { font-size: 12.5px; line-height: 1.45; margin-top: 5px; color: #ffe9e7; }
.pc-alert-body b { color: #fff; }

/* WiFi setup screen (setup.html): numbered step cards */
.setup-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: #232F34; border: 1px solid #3a464d; border-radius: 12px;
  padding: 13px 14px; margin-bottom: 10px;
}
.setup-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #0ec2aa; color: #0b1116; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.setup-body { flex: 1 1 auto; min-width: 0; }
.setup-title { font-weight: 800; font-size: 16px; color: #eef3f6; margin-bottom: 4px; }
.setup-text { font-size: 14px; line-height: 1.5; color: #b9c3c9; }
.setup-text b { color: #dfe6ea; }
.setup-callout {
  background: rgba(255, 255, 255, .04); border: 1px solid #4a5560;
  border-radius: 8px; padding: 9px 11px; margin: 9px 0; font-size: 13.5px; color: #cdd6dc;
}
/* SSID highlight inside setup_s2_title. The teal lives in the catalogue
   value as <span class="setup-hl"> in all 14 languages, because ja and ar
   reorder the sentence around it - so it cannot stay an inline style. */
.setup-hl { color: #0ec2aa; }
.setup-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #0b1116; border: 1px solid #2b3a46; border-radius: 6px;
  padding: 2px 7px; color: #7fe0cf; font-weight: 700; white-space: nowrap;
}

/* ---- Alarm notifications card (alarms.html) ------------------------------ */
/* Same card language as the setup steps: dark panel, teal for "on".
   Laid out as two rows, not one. Inline buttons overlapped the title in the
   longer languages, and a title like "Alarm-Benachrichtigungen" cannot wrap. */
.push-card {
  background: #232F34; border: 1px solid #3a464d; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.push-card.is-busy { opacity: .55; }
.push-head { display: flex; align-items: center; gap: 12px; }
.push-ic { font-size: 22px; color: #eaa11a; flex: 0 0 auto; width: 24px; text-align: center; }
.push-body { flex: 1 1 auto; min-width: 0; }
.push-title {
  font-weight: 800; font-size: 15px; color: #eef3f6; letter-spacing: .3px;
  overflow-wrap: anywhere;
}
.push-sub { font-size: 12.5px; color: #8b979f; margin-top: 2px; }
.push-sub.is-on { color: #0ec2aa; font-weight: 700; }
.push-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.push-btn {
  border: 1px solid #4a5560; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; color: #cdd6dc;
  background: rgba(255, 255, 255, .04); white-space: nowrap;
}
.push-btn.push-main { border-color: #0ec2aa; color: #0ec2aa; }
.push-hint {
  font-size: 12.5px; line-height: 1.45; color: #b9c3c9;
  background: rgba(255, 255, 255, .04); border: 1px solid #4a5560;
  border-radius: 8px; padding: 9px 11px; margin: -4px 0 10px 0;
}
.push-hint .fa { color: #eaa11a; margin-right: 5px; }

/* ---- Pond Dial on the Online tile (home.html) ---------------------------- */
/* The dial IS the tile. It gets the full width it can take and everything else
   stacks under it, because a 300px dial read across a room is the point and a
   column of labels beside a small one was not. */
.dial-tile {
  margin: 10px; padding: 16px 12px 14px;
  clear: both;
  background-color: #232F34; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* ⚠ Width AND height are BOTH stated at every breakpoint, and the size never
   depends on `aspect-ratio` or on the SVG's intrinsic ratio supplying the
   missing dimension. `height: auto` + `aspect-ratio` renders fine in Chromium,
   which falls back to the SVG's own ratio — but a browser that does neither
   computes height 0 and the dial disappears while the tile, the name and the
   buttons all render normally. That is the exact shape of "shows on Android,
   missing on iPhone". vw units are supported everywhere this app runs.
   aspect-ratio is kept only as a belt-and-braces no-op. */
.pond-dial {
  display: block;
  width: 300px; height: 300px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
/* The CAL placeholder has to match the dial it stands in for, or the tile
   jumps height every time the depth filter settles. */
.dial-cal {
  width: 300px; height: 300px;
  aspect-ratio: 1 / 1;
  font-size: 44px;
  flex: 0 0 auto;
}
/* Below ~400px the fixed 300px would overflow the tile's padding, so both
   dimensions scale together off the viewport rather than off each other. */
@media (max-width: 400px) {
  .pond-dial, .dial-cal { width: 76vw; height: 76vw; }
}
@media (max-width: 330px) {
  .pond-dial, .dial-cal { width: 74vw; height: 74vw; }
  .dial-cal { font-size: 34px; }
}
/* The pond's name above the dial, set to exactly what the WHAT & WHY button
   below it computes to (15.4px/700) so the two read as a pair. */
/* ⚠ Both are pinned to the same absolute size on purpose. .calibration's 1.1em
   resolves against a <button>'s inherited size and .dial-name's against a
   <div>'s, so the same em gave 15px and 15.4px on the same screen — and the two
   boxes disagreed again on top of that. One value, identical everywhere. */
.dial-name, .dial-actions .calibration { font-size: 15px; }
.dial-name {
  font-weight: 700; line-height: 1.25;
  color: #eef3f6; text-align: center;
  max-width: 100%; overflow-wrap: break-word;
}
/* ⚠ width:100% is load-bearing. .dial-tile centres its children, which shrank
   this row to the button's own width (221px inside a 346px tile) and pushed
   the timestamp onto a second line. Full width lets the pair sit together and
   still centre. */
.dial-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center;
  width: 100%;
}
.dial-when { font-size: 12.5px; color: #8b979f; white-space: nowrap; }
/* ⚠ The base stylesheet gives .calibration `width: 95%; margin: 10px`, so inside
   a flex row it eats the whole line and pushes the timestamp onto the next one.
   Sized to its text here only; the 1.1em is kept because the pond name above the
   dial is matched to it. */
.dial-actions .calibration { width: auto; margin: 0; }
.dial-tile .why-panel { width: 100%; }

/* ---- Per-device notification settings (alarms.html) ---------------------- */
/* Collapsed by default and it lives inside the sticky head, so everything here
   has to stay short: an expanded panel still has to leave alarms on screen. */
.push-settings {
  border: 1px solid #4a5560; border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  margin: -4px 0 10px 0; overflow: hidden;
}
.push-set-head {
  display: block; padding: 9px 11px;
  font-size: 12.5px; font-weight: 700; color: #cdd6dc;
}
.push-set-head .fa { color: #eaa11a; margin-right: 7px; width: 9px; }
.push-set-body { padding: 2px 11px 11px 11px; }
.push-set-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .07);
}
.push-set-lbl {
  flex: 1 1 100%;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #8b979f;
}
/* The option chips wrap as a group; each chip stays whole. */
.push-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.push-opt {
  border: 1px solid #4a5560; border-radius: 7px;
  padding: 5px 9px; font-size: 12.5px; font-weight: 700;
  color: #cdd6dc; background: rgba(255, 255, 255, .03); white-space: nowrap;
}
.push-opt.is-on { border-color: #0ec2aa; color: #0ec2aa; background: rgba(14, 194, 170, .10); }
.push-num, .push-time {
  border: 1px solid #4a5560; border-radius: 7px;
  padding: 5px 8px; font-size: 12.5px; font-weight: 700;
  color: #eef3f6; background: #1b2429;
}
.push-num { width: 68px; }
.push-check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.push-check input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }
.push-check span { font-size: 12.5px; color: #cdd6dc; }
.push-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #8b979f; }
.push-set-actions { display: flex; justify-content: flex-end; padding-top: 10px; }
/* Nothing to save is a state worth showing, not a button worth hiding: it tells
   you the last change did land. */
.push-btn.is-off { opacity: .45; border-color: #4a5560; color: #cdd6dc; }

/* ---- WhatsApp emergency call-out (alarms.html) --------------------------- */
.push-wa { flex-direction: column; align-items: stretch; }
.wa-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-num {
  flex: 1 1 140px; min-width: 0;
  border: 1px solid #4a5560; border-radius: 7px;
  padding: 6px 8px; font-size: 12.5px; font-weight: 700;
  color: #eef3f6; background: #1b2429;
}
.wa-num::placeholder { color: #667079; font-weight: 400; }
.wa-sub { margin-top: 2px; }
/* The 24-hour rule is Meta's, not ours, and it is the reason a call-out fails
   -- so it sits next to the numbers rather than in a manual nobody reads. */
.wa-note {
  font-size: 11.5px; line-height: 1.45; color: #b9c3c9;
  background: rgba(255, 255, 255, .04); border: 1px solid #4a5560;
  border-radius: 7px; padding: 7px 9px;
}
.wa-note .fa { color: #eaa11a; margin-right: 5px; }
.wa-last { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: #0ec2aa; }
.wa-last .is-bad { color: #ff8a7a; }
.wa-test { align-self: flex-start; }

/* ---- Customer-service card (home/trends/alarms/status/video) ------------- */
/* Stands in for a pond's readings while its device shows the contact-service
   page. Same card language as the setup and push cards: dark panel, amber
   icon, red top edge. No pulse: nothing on it is for the customer to fix. */
.svc-pond { margin: 10px; }
.svc-pond.svc-flush { margin: 0 0 12px 0; }
/* The silver pond bar (.status_online), as a plain label: no dot, no tap. */
.svc-pond .svc-bar {
  display: block; width: 100%; margin: 0 0 8px 0;
  overflow-wrap: anywhere; cursor: default;
}
.svc-card {
  background: #232F34; border: 1px solid #3a464d; border-top: 4px solid #e5443b;
  border-radius: 10px; padding: 16px 14px 14px;
  text-align: center; color: #eef3f6;
}
.svc-ic { display: block; font-size: 34px; line-height: 1; color: #eaa11a; margin-bottom: 10px; }
.svc-title {
  font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: .4px;
  color: #eef3f6; overflow-wrap: anywhere;
}
.svc-code {
  display: inline-block; margin: 12px 0 6px;
  background: #0b1116; border: 1px solid #2b3a46; border-radius: 6px;
  padding: 4px 11px; color: #7fe0cf; font-size: 14px; font-weight: 700; letter-spacing: .4px;
}
/* Tap rows: 48px high so a thumb hits them, full width of the card. */
.svc-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; margin-top: 10px; padding: 8px 14px;
  background: #1b2429; border: 1px solid #4a5560; border-radius: 8px;
  color: #eef3f6; font-size: 17px; font-weight: 700; text-decoration: none;
}
.svc-row:hover, .svc-row:focus, .svc-row:active {
  color: #ffffff; text-decoration: none; background: #22303a; border-color: #0ec2aa;
}
.svc-row .fa { flex: 0 0 auto; width: 26px; font-size: 24px; text-align: center; }
.svc-row .fa-whatsapp { color: #25D366; }
.svc-row .fa-envelope { color: #b9c3c9; }
.svc-row .ltr { min-width: 0; overflow-wrap: anywhere; }