@homebridge-plugins/homebridge-eufy-security 4.7.2 → 5.0.0-beta.1

package/homebridge-ui/public/app.css

@@ -0,0 +1,1902 @@
+/*
+ * The scales this sheet holds to. A value outside one of them is a defect, not a preference.
+ *
+ * Spacing is a 4px grid. 2px appears only as an optical nudge, never as a gap or padding step.
+ * Radius, edge intensity, text level, and easing are tokens; no rule states one of them as a literal.
+ * Weight is 400 body, 500 label, 600 emphasis, 700 heading.
+ * Depth is edges. A border carries structure and only a floating layer carries a shadow.
+ */
+:root {
+  color-scheme: light dark;
+  --accent: #00bfc4;
+  --accent-ink: #006f73;
+  --on-accent: #07383a;
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--panel));
+
+  /*
+   * The four text levels: default, supporting, metadata, and disabled.
+   *
+   * The supporting and disabled levels are mixed against the panel rather than stated, so a host theme that
+   * moves `--bs-body-color` carries all four levels with it. The mix is redeclared in the dark block because a
+   * custom property resolves `var()` where it is declared, not where it is used.
+   */
+  --ink: var(--bs-body-color, #182033);
+  --ink-secondary: color-mix(in srgb, var(--ink) 78%, var(--panel));
+  --muted: var(--bs-secondary-color, #667085);
+  --ink-disabled: color-mix(in srgb, var(--muted) 55%, var(--panel));
+
+  --alert: #d99a21;
+  --fault: #b42318;
+  --ok: #1a7f4b;
+
+  /*
+   * The two edge intensities. `--line` divides and encloses; `--line-strong` is for a control the user must
+   * find without looking for it. Both are alpha over the surface, so an edge belongs to whatever it sits on.
+   */
+  --line: rgb(23 32 44 / 11%);
+  --line-strong: rgb(23 32 44 / 19%);
+
+  --radius-sm: 4px;
+  --radius-control: 8px;
+  --radius-card: 12px;
+  --radius-panel: 16px;
+  --radius-pill: 999px;
+
+  --focus-ring: 2px solid var(--accent-ink);
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* The one shadow in the sheet, for a layer that floats over content it does not belong to. */
+  --shadow-overlay:
+    0 0 0 1px rgb(23 32 44 / 6%),
+    0 4px 12px rgb(23 32 44 / 10%);
+
+  --panel: #ffffff;
+  --tile-bg: #edf2f7;
+  --tile-ink: #17202c;
+  --tile-muted: #475569;
+  --tile-gradient: rgb(237 242 247 / 94%);
+  --tile-stripe: rgb(23 32 44 / 7%);
+  --tile-badge-bg: rgb(255 255 255 / 78%);
+  --tile-badge-border: rgb(23 32 44 / 28%);
+  --tile-badge-halo: rgb(4 8 14 / 85%);
+  --tile-image-filter: brightness(0.92) saturate(0.85) contrast(1.05);
+  --tile-scene-filter: brightness(0.88) saturate(0.95);
+  --tile-scene-gradient: rgb(23 32 44 / 82%);
+
+  /*
+   * The copy over a scene, which does not vary by theme.
+   *
+   * A product cutout sits on the tile's own surface and takes the theme's ink. A scene is a photograph under a
+   * dark gradient in both themes, so the name over it is light in both: taking the theme's ink there would put
+   * dark text on a dark photograph every time the interface is in light mode.
+   */
+  --tile-scene-ink: #f4f7fb;
+  --tile-scene-muted: #d6deea;
+  --tile-scene-stripe: rgb(255 255 255 / 12%);
+  --tile-disabled-filter: brightness(0.82) grayscale(0.65) contrast(1.05);
+  --tile-icon-filter: none;
+  --tile-tooltip-bg: #ffffff;
+  --tile-tooltip-ink: #17202c;
+}
+
+html,
+body {
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+  background: transparent;
+  color: var(--ink);
+  font:
+    14px/1.5 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.shell {
+  width: min(100%, 720px);
+  height: auto !important;
+  max-height: none !important;
+  margin: 0 auto;
+  overflow: visible !important;
+  scrollbar-width: none;
+  padding: 4px 0 20px;
+  color: var(--ink);
+}
+
+.shell::-webkit-scrollbar {
+  display: none;
+}
+
+.masthead {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.eufy-logo {
+  width: 100px;
+  flex: 0 0 auto;
+  padding: 4px;
+}
+
+.eufy-logo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.eufy-logo .logo-dark {
+  display: none;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
+p,
+small {
+  text-wrap: pretty;
+}
+
+h1 {
+  margin-bottom: 0;
+  font-size: clamp(22px, 5vw, 30px);
+  line-height: 1.15;
+  letter-spacing: -0.035em;
+}
+
+h2 {
+  margin-bottom: 0;
+  font-size: 18px;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.eyebrow {
+  margin-bottom: 4px;
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.panel {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-panel);
+  background: var(--panel);
+  padding: clamp(16px, 5vw, 32px);
+}
+
+.legacy-notice,
+.update-pending {
+  margin-bottom: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-panel);
+  background: var(--panel);
+  padding: clamp(16px, 4vw, 24px);
+}
+
+.dashboard {
+  margin: 0;
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.dashboard-panel {
+  display: grid;
+  gap: 20px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.dashboard-panel-header {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+
+.dashboard-panel-header > div {
+  min-width: 0;
+}
+
+.dashboard-panel-header .summary {
+  margin: 4px 0 0;
+}
+
+.dashboard-page-back {
+  display: grid;
+  width: 40px;
+  min-height: 40px;
+  place-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 0;
+  font-size: 22px;
+  line-height: 1;
+}
+
+.dashboard-page-icon {
+  width: 24px;
+  height: 24px;
+  opacity: 0.72;
+}
+
+.diagnostics-panel .summary {
+  margin-bottom: 0;
+}
+
+.diagnostics-status {
+  margin-bottom: 0;
+  color: var(--muted);
+}
+
+.diagnostics-panel select {
+  width: 100%;
+  min-height: 44px;
+  margin-top: 8px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 8px 12px;
+}
+
+.diagnostics-actions {
+  margin-top: 4px;
+}
+
+.diagnostics-stage {
+  display: grid;
+  gap: 12px;
+}
+
+.diagnostics-surface {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--panel);
+  padding: clamp(16px, 4vw, 24px);
+}
+
+.diagnostics-question,
+.diagnostics-direct,
+.diagnostics-frequency,
+.diagnostics-match {
+  display: grid;
+  gap: 16px;
+}
+
+.diagnostics-question > strong,
+.diagnostics-frequency > strong,
+.diagnostics-match > strong {
+  font-size: clamp(17px, 4vw, 21px);
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+
+.diagnostics-match p {
+  margin-bottom: 0;
+}
+
+.diagnostics-choice-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.diagnostics-choice-actions button {
+  width: 100%;
+  padding-inline: 16px;
+}
+
+button.diagnostics-secondary-action {
+  border: 1px solid var(--line-strong);
+  background: transparent;
+  color: var(--ink);
+}
+
+button.diagnostics-quiet-action {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 40px;
+  align-items: center;
+  background: transparent;
+  color: var(--muted);
+  padding: 0;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.diagnostics-guidance {
+  display: grid;
+  gap: 12px;
+}
+
+.diagnostics-guidance > div {
+  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
+  padding-top: 8px;
+}
+
+.diagnostics-guidance p {
+  margin-bottom: 0;
+}
+
+.guidance-label {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--accent-ink);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.diagnostics-actions button {
+  width: 100%;
+}
+
+.diagnostics-result p {
+  margin-bottom: 0;
+}
+
+.diagnostics-privacy {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.diagnostics-result {
+  display: grid;
+  gap: 8px;
+}
+
+.diagnostics-result a {
+  display: inline-block;
+  margin-top: 8px;
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.diagnostics-result button {
+  width: 100%;
+}
+
+.diagnostics-manifest {
+  margin-top: 12px;
+  border-block: 1px solid var(--line);
+  padding-block: 8px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.diagnostics-manifest ul {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.diagnostics-review-confirm {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.advanced-fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.advanced-field {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+
+.advanced-field-label {
+  font-weight: 500;
+}
+
+.advanced-fields label {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.advanced-fields input {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 8px 12px;
+  font: inherit;
+}
+
+.advanced-fields small,
+.advanced-device-help {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.advanced-device-help {
+  margin-bottom: 0;
+}
+
+.advanced-status {
+  min-height: 20px;
+  margin-bottom: 0;
+  color: var(--fault);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.legacy-notice,
+.update-pending {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  border-left: 4px solid var(--alert);
+}
+
+.notice-icon,
+.status-icon {
+  width: 24px;
+  height: 24px;
+  opacity: 0.72;
+}
+
+.legacy-notice p,
+.update-pending p {
+  margin-bottom: 4px;
+}
+
+.legacy-notice button {
+  width: auto;
+  padding-inline: 16px;
+}
+
+.legacy-settings {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.dashboard-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.dashboard-status > div:not(.dashboard-actions) {
+  min-width: 0;
+  flex: 1;
+}
+
+.dashboard-status .status-icon {
+  flex: 0 0 auto;
+}
+
+.dashboard-actions {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.dashboard-action {
+  position: relative;
+  display: grid;
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  place-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  padding: 0;
+}
+
+.dashboard-action img {
+  width: 20px;
+  height: 20px;
+  opacity: 0.72;
+}
+
+.dashboard-action::after {
+  content: attr(aria-label);
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 8px);
+  right: 0;
+  width: max-content;
+  max-width: 192px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 4px 8px;
+  box-shadow: var(--shadow-overlay);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.25;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition:
+    opacity 150ms var(--ease-out),
+    transform 150ms var(--ease-out);
+}
+
+.dashboard-action[data-collecting] {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
+}
+
+.dashboard-action:hover::after,
+.dashboard-action:focus-visible::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/*
+ * The way into a diagnostic run, standing where a status pill used to. A pill saying "Connected" was decoration on
+ * the healthy path and a dead end on every other; this appears only where a run would explain something.
+ */
+.dashboard-diagnose {
+  flex: 0 0 auto;
+  /* Buttons are full width by default here, and this one sits inline beside the title. */
+  width: auto;
+  border: 1px solid var(--alert);
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--alert) 16%, var(--panel));
+  color: var(--ink);
+  padding: 6px 12px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.dashboard-diagnose:hover {
+  background: color-mix(in srgb, var(--alert) 26%, var(--panel));
+}
+
+.device-group + .device-group {
+  margin-top: 24px;
+}
+
+.device-group > h2 {
+  margin-bottom: 8px;
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* The grid measures itself against this, so a row height can be stated as a fraction of a column width. */
+.device-group {
+  container-type: inline-size;
+}
+
+.device-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  /*
+   * A row is half a column tall, so a camera spanning two of them plus the gap between is exactly square and two
+   * short tiles stack into the height one camera holds. Stated in container units because the row has to follow
+   * the column, and the column is a fraction of a width only the container knows.
+   */
+  grid-auto-rows: calc(((100cqw - 24px) / 3 - 12px) / 2);
+  /* Short tiles fill the space beside a camera rather than starting a row of their own. */
+  grid-auto-flow: row dense;
+  gap: 12px;
+}
+
+.device-tile {
+  position: relative;
+  min-width: 0;
+  grid-row: span 2;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--tile-bg);
+  transition: border-color 150ms var(--ease-out);
+}
+
+/*
+ * A device with no camera frame to show gets half the height, so two stack into the space one camera occupies.
+ *
+ * The square is the camera's, because a frame is what fills it and what the eye finds a camera by. A sensor's
+ * tile carries a product photograph that reads at any height and two lines of copy, so the other half is spent
+ * on nothing, and a household of sensors pushes the cameras off the screen.
+ */
+.device-tile:not([data-device-class='camera']) {
+  grid-row: span 1;
+}
+
+/* Half a tile is too little for the photograph to sit behind the copy, so it keeps to a strip beside it. */
+.device-tile:not([data-device-class='camera']) .device-summary {
+  justify-content: center;
+}
+
+.device-tile:not([data-device-class='camera']) .device-art img[data-device-artwork] {
+  inset: 8px 8px 8px auto;
+  width: 36%;
+  height: calc(100% - 16px);
+}
+
+.device-tile:not([data-device-class='camera']) .device-copy {
+  max-width: 60%;
+}
+
+/*
+ * The explanation on a short tile gives up the icon and the deep padding to fit, because the words are the point
+ * and the badge on the front face already carries the same icon.
+ */
+.device-tile:not([data-device-class='camera']) .diagnostic-panel {
+  gap: 2px;
+  padding: 12px;
+}
+
+.device-tile:not([data-device-class='camera']) /*
+ * A device's settings are a page rather than a face on the tile, so they are read at the page's scale and have as
+ * much room as the device needs. The tile is the summary and the way in; nothing about its size bounds this.
+ */
+.device-panel .preference-grid {
+  gap: 20px;
+  max-width: 560px;
+}
+
+.device-panel .preference-grid label,
+.device-panel .preference-grid .setting-label,
+.device-panel .preference-grid p {
+  font-size: 13px;
+}
+
+.device-panel .preference-representation {
+  font-size: 13px;
+}
+
+/*
+ * A finger has no hover and no precision, so every row it can act on is at least 44px tall where the pointer is
+ * coarse. This is the whole interaction on an iPhone: there is no second way in.
+ */
+@media (pointer: coarse) {
+  .device-panel .preference-grid .toggle {
+    min-height: 44px;
+  }
+
+  /*
+   * The segment's fill is painted on its inner span, so the span is what grows. Giving the height to the label
+   * instead leaves the selected fill short of the row it sits in, which reads as the buttons being misaligned
+   * with the selection rather than as a tall label.
+   */
+  .device-panel .snapshot-segment span {
+    display: grid;
+    min-height: 44px;
+    place-items: center;
+  }
+
+  .dashboard-page-back {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.diagnostic-panel img {
+  display: none;
+}
+
+.device-tile-changed {
+  border-color: var(--alert);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alert) 24%, transparent);
+}
+
+.device-tile-changed::after {
+  content: '';
+  position: absolute;
+  z-index: 5;
+  top: 12px;
+  left: 12px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--tile-bg);
+  border-radius: 50%;
+  background: var(--alert);
+  pointer-events: none;
+}
+
+.device-summary {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 8px;
+  overflow: hidden;
+  padding: 16px;
+  list-style: none;
+}
+
+.device-open-control {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.device-tile[data-artwork-scene] .device-art img[data-device-artwork] {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: var(--tile-scene-filter);
+}
+
+/*
+ * A scene fills the tile, so the name needs the gradient to start higher and finish darker than over a cutout,
+ * and to reach full strength above the copy rather than at the tile's floor: a two-stop ramp ending at 100% is
+ * still interpolating where the name and the status sit, which leaves them on whatever the photograph is doing.
+ */
+.device-tile[data-artwork-scene] .device-summary::after {
+  background: linear-gradient(to bottom, transparent 15%, var(--tile-scene-gradient) 78%);
+}
+
+.device-tile[data-artwork-scene] .device-copy {
+  color: var(--tile-scene-ink);
+}
+
+.device-tile[data-artwork-scene] .device-copy p {
+  color: var(--tile-scene-muted);
+}
+
+/* A scene the user has withdrawn from HomeKit keeps the withdrawn treatment: the scene filter is narrower. */
+.device-tile-disabled[data-artwork-scene] .device-art img[data-device-artwork] {
+  filter: var(--tile-disabled-filter);
+}
+
+.device-tile[data-artwork-scene] .device-summary::before {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent 0,
+    transparent 12px,
+    var(--tile-scene-stripe) 12px,
+    var(--tile-scene-stripe) 20px
+  );
+}
+
+.device-summary::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 40%, var(--tile-gradient) 100%);
+  pointer-events: none;
+}
+
+.device-tile-disabled .device-summary::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent 0,
+    transparent 12px,
+    var(--tile-stripe) 12px,
+    var(--tile-stripe) 20px
+  );
+  pointer-events: none;
+}
+
+.device-tile-disabled .device-art img[data-device-artwork] {
+  filter: var(--tile-disabled-filter);
+}
+
+/*
+ * The two grounds a tile can have, and why they are not one.
+ *
+ * A packaged product photograph is a cutout on a flat ground: it is contained, inset, and desaturated so the
+ * grid reads as a catalogue of devices. A camera's own last image is a scene, and a scene has no cutout to
+ * inset — contained, it would sit in a box inside a box, and desaturated it would lose the very detail that
+ * makes the camera recognisable. It covers the tile instead, and the gradient the name already sits on is what
+ * keeps that name legible over it.
+ *
+ * The placeholder is centred with its icon rather than sat on the tile's floor, where it printed on top of the
+ * device name for every device with no artwork on file.
+ */
+.device-art {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 8px;
+  background: var(--tile-bg);
+  color: var(--tile-ink);
+  font-weight: 700;
+}
+
+.device-art img[data-device-artwork] {
+  position: absolute;
+  inset: 24px;
+  width: calc(100% - 48px);
+  height: calc(100% - 48px);
+  object-fit: contain;
+  opacity: 1;
+  filter: var(--tile-image-filter);
+}
+
+.device-art .device-class-icon {
+  width: 56px;
+  height: 56px;
+  opacity: 0.42;
+}
+
+.device-art span {
+  overflow: hidden;
+  max-width: 90%;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  opacity: 0.75;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+}
+
+.device-art[data-artwork-loaded] .device-class-icon,
+.device-art[data-artwork-loaded] span {
+  opacity: 0;
+}
+
+.device-copy {
+  z-index: 2;
+  min-width: 0;
+  color: var(--tile-ink);
+}
+
+.device-copy h3 {
+  overflow: hidden;
+  margin: 0 0 2px;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.device-copy p {
+  overflow: hidden;
+  margin: 0;
+  color: var(--tile-muted);
+  font-size: 13px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A status displaces the model on the tile's second line, so it keeps that line's metrics and adds its dot. */
+.device-copy p.device-status {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.device-status-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+}
+
+/* The flex container cannot ellipsis its own text, so the label carries the truncation the model line has. */
+.device-status-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* One semantic per tone, named once, so the three rules below carry every one of them. */
+.device-copy p.device-status-live {
+  --status-ink: var(--ok);
+}
+
+.device-copy p.device-status-alert {
+  --status-ink: var(--alert);
+}
+
+.device-copy p.device-status-fault {
+  --status-ink: var(--fault);
+}
+
+/*
+ * A coloured status label mixes toward the ink of whichever ground it sits on; its dot keeps the flat colour.
+ *
+ * No semantic clears contrast at 13px against both the pale panel and a scene's gradient, and the dot is a
+ * graphical mark rather than readable content, so only the word is mixed. A quiet status states nothing coloured
+ * and takes the second line's own muted ink, which needs no rule.
+ */
+.device-copy p:is(.device-status-live, .device-status-alert, .device-status-fault) {
+  color: color-mix(in srgb, var(--status-ink) 75%, var(--tile-ink));
+}
+
+.device-tile[data-artwork-scene]
+  .device-copy
+  p:is(.device-status-live, .device-status-alert, .device-status-fault) {
+  color: color-mix(in srgb, var(--status-ink) 75%, var(--tile-scene-ink));
+}
+
+.device-status-dot {
+  background: var(--status-ink, currentcolor);
+}
+
+.device-badges {
+  position: absolute;
+  z-index: 2;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.device-badges span {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--tile-badge-border);
+  border-radius: var(--radius-pill);
+  background: var(--tile-badge-bg);
+  backdrop-filter: blur(5px);
+}
+
+.device-badges img {
+  width: 16px;
+  height: 16px;
+  filter: var(--tile-icon-filter);
+}
+
+/*
+ * The gauge carries no plate, so its own halo separates it from whatever is behind it instead.
+ *
+ * The second documented exception to one shadow: this states the glyph's edge against unknown artwork rather
+ * than floating a layer over content, which is why it is not `--shadow-overlay`. The halo does not flip with the
+ * theme because the glyph does not either.
+ */
+.device-badges .device-badge-battery {
+  border: 0;
+  background: transparent;
+  backdrop-filter: none;
+  filter: drop-shadow(0 1px 2px var(--tile-badge-halo));
+}
+
+/*
+ * The gauge lies on its side with its terminal to the left, and takes the next step up the scale.
+ *
+ * With no plate around it the glyph is the whole indicator, so it carries at 18px where a plated badge reads at
+ * 16px. It keeps the tile's own icon colour here, which is the ink of the pale panel a product cutout sits on.
+ */
+.device-badges .device-badge-battery img {
+  width: 18px;
+  height: 18px;
+  transform: rotate(-90deg);
+}
+
+/*
+ * Over a scene the glyph goes light whatever the theme, and gains a ring, because its ground is a photograph of
+ * unknown luminance.
+ *
+ * The tile's two grounds are opposites — that frame, and the pale panel — so one glyph colour loses on one of
+ * them. This is the same split `--tile-scene-ink` exists for, applied to the one icon that sits on both. On the
+ * panel a plain shadow is enough and a ring would only dirty a flat surface.
+ */
+.device-tile[data-artwork-scene] .device-badges .device-badge-battery img {
+  filter: invert(1);
+}
+
+.device-tile[data-artwork-scene] .device-badges .device-badge-battery {
+  filter: drop-shadow(0 0 1px var(--tile-badge-halo)) drop-shadow(0 1px 2px var(--tile-badge-halo));
+}
+
+.device-badges .device-badge-troubleshoot {
+  width: 36px;
+  height: 36px;
+  border: 0;
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.device-badges .device-badge-troubleshoot img {
+  width: 28px;
+  height: 28px;
+}
+
+.device-badges span::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  z-index: 4;
+  top: calc(100% + 8px);
+  right: 0;
+  width: max-content;
+  max-width: 168px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--tile-tooltip-bg);
+  color: var(--tile-tooltip-ink);
+  padding: 4px 8px;
+  box-shadow: var(--shadow-overlay);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.3;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition:
+    opacity 150ms var(--ease-out),
+    transform 150ms var(--ease-out);
+}
+
+.device-badges span:hover::after,
+.device-badges span:focus-visible::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.diagnostic-panel {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 16px;
+  text-align: center;
+}
+
+.diagnostic-panel img {
+  width: 32px;
+  height: 32px;
+  filter: var(--tile-icon-filter);
+}
+
+.diagnostic-panel strong {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.diagnostic-panel p {
+  margin: 0;
+  color: var(--tile-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.preference-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.preference-grid p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+/* What the device becomes, read before the switch that decides whether it becomes it. */
+.preference-representation {
+  color: var(--tile-muted);
+  font-weight: 600;
+}
+
+.preference-grid label {
+  display: grid;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 11px;
+  cursor: default;
+}
+
+.preference-grid .preference-changed {
+  font-weight: 700;
+}
+
+.preference-grid .preference-changed .snapshot-description {
+  font-weight: 400;
+}
+
+.setting-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.snapshot-setting {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.snapshot-segments {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+}
+
+.snapshot-segments .snapshot-segment {
+  position: relative;
+  display: block;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.snapshot-segment + .snapshot-segment {
+  border-left: 1px solid var(--line);
+}
+
+.snapshot-segment input {
+  position: absolute;
+  width: 1px;
+  min-height: 0;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.snapshot-segment span {
+  display: block;
+  padding: 8px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-align: center;
+  transition:
+    background 150ms var(--ease-out),
+    color 150ms var(--ease-out);
+}
+
+.snapshot-segment input:checked + span {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+.snapshot-description {
+  min-height: 32px;
+  margin: 0;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.35;
+}
+
+.preference-grid .toggle {
+  grid-template-columns: 40px minmax(0, 1fr);
+  align-items: center;
+  cursor: pointer;
+}
+
+.preference-grid .toggle input {
+  appearance: none;
+  position: relative;
+  width: 36px;
+  min-height: 20px;
+  height: 20px;
+  margin: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--muted) 28%, var(--panel));
+  padding: 0;
+  transition:
+    background 140ms var(--ease-out),
+    border-color 140ms var(--ease-out);
+}
+
+/* The knob, the one element in the sheet whose shadow states a physical position rather than a layer. */
+.preference-grid .toggle input::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--panel);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
+  transition: transform 140ms var(--ease-out);
+}
+
+.preference-grid .toggle input:checked {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.preference-grid .toggle input:checked::before {
+  transform: translateX(16px);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.first-setup {
+  position: relative;
+  margin-bottom: 16px;
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--accent);
+  border-radius: var(--radius-card);
+  background: var(--accent-soft);
+  padding: 16px 20px;
+}
+
+.first-setup::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -3px;
+  width: 10px;
+  height: 10px;
+  border-top: 4px solid var(--accent);
+  border-right: 4px solid var(--accent);
+  background: var(--accent-soft);
+  transform: translate(-50%, -50%) rotate(225deg);
+}
+
+.first-setup h2 {
+  margin-bottom: 8px;
+}
+
+.first-setup p {
+  margin-bottom: 8px;
+}
+
+.first-setup-reason {
+  color: var(--ink-secondary);
+}
+
+.first-setup a {
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.first-setup-confirmation {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.first-setup-confirmation label {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.first-setup-confirmation input,
+.diagnostics-review-confirm input {
+  appearance: none;
+  display: grid;
+  place-content: center;
+  width: 18px;
+  min-height: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  margin-top: 2px;
+  border: 2px solid var(--accent-ink);
+  border-radius: var(--radius-sm);
+  background: var(--panel);
+  padding: 0;
+}
+
+.first-setup-confirmation input::before,
+.diagnostics-review-confirm input::before {
+  content: '';
+  width: 8px;
+  height: 4px;
+  border-bottom: 2px solid var(--on-accent);
+  border-left: 2px solid var(--on-accent);
+  transform: rotate(-45deg) scale(0);
+}
+
+.first-setup-confirmation input:checked,
+.diagnostics-review-confirm input:checked {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.first-setup-confirmation input:checked::before,
+.diagnostics-review-confirm input:checked::before {
+  transform: rotate(-45deg) scale(1);
+}
+
+.status-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.status {
+  flex: 0 0 auto;
+  border-radius: var(--radius-pill);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.summary {
+  margin: 16px 0;
+  color: var(--ink-secondary);
+  font-size: 15px;
+}
+
+.handoff {
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--accent);
+  border-radius: var(--radius-card);
+  background: var(--accent-soft);
+  padding: 12px 16px;
+}
+
+.handoff p {
+  margin: 4px 0 0;
+  color: var(--ink-secondary);
+  font-size: 12px;
+}
+
+.steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin: 24px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.steps li {
+  display: grid;
+  gap: 4px;
+  border-top: 3px solid var(--line);
+  padding-top: 8px;
+  color: var(--muted);
+  font-size: 11px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.steps li.current {
+  border-color: var(--accent);
+  color: var(--accent-ink);
+}
+
+.steps span {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.authentication-form,
+.challenge-form {
+  display: grid;
+  gap: 16px;
+}
+
+.authentication-form label,
+.challenge-form label {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+input {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 8px 12px;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+}
+
+.challenge-form {
+  margin-top: 16px;
+  border-top: 1px solid var(--line);
+  padding-top: 16px;
+}
+
+/* The plate the captcha image sits on, white in both themes because the image Eufy returns has a white ground. */
+.captcha {
+  width: min(100%, 260px);
+  min-height: 72px;
+  justify-self: center;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: #ffffff;
+  object-fit: contain;
+}
+
+.authentication-status {
+  min-height: 20px;
+  margin: 12px 0 0;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+button {
+  width: 100%;
+  min-height: 44px;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: var(--accent);
+  color: var(--on-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.footnote {
+  margin: 12px 4px 0;
+  color: var(--muted);
+  font-size: 11px;
+  text-align: center;
+}
+
+/* One setting per row, so a control that needs width gets it and nothing sits half-read beside it. */
+/*
+ * Two lists with a column of transfer buttons between them, sharing the parent's rows so the three columns line up.
+ *
+ * The buttons belong beside the lists, not beside the lists plus their titles: centred over the whole column they
+ * sit below the middle of what they act on, by half a title. Subgrid puts each list's title and body in the
+ * parent's own rows, which is what lets the buttons occupy the second row alone. Where subgrid is unavailable the
+ * columns keep their own rows and the buttons centre as they did.
+ */
+.warm-up-transfer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto 1fr;
+  align-items: stretch;
+  gap: 8px;
+  font-weight: 400;
+}
+
+.warm-up-column {
+  display: grid;
+  grid-row: span 2;
+  grid-template-rows: subgrid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.warm-up-column > p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.warm-up-column ul {
+  list-style: none;
+  margin: 0;
+  /*
+   * Four rows, then scroll: the list is long enough that showing all of it pushes the help text off-screen.
+   * The height is the content of four rows at the current row metric, not a step on the spacing grid.
+   */
+  min-height: 172px;
+  max-height: 172px;
+  /*
+   * Centred in its row rather than filling it. The row is as tall as the button column beside it, which needs more
+   * than four rows of list, so a list pinned to the top of that row sits above the buttons that act on it.
+   */
+  align-self: center;
+  overflow-y: auto;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  display: grid;
+  align-content: start;
+  gap: 2px;
+  padding: 4px;
+}
+
+.warm-up-column li {
+  margin: 0;
+}
+
+/* Concentric with the list that clips it: the list's 8px radius less its 4px padding. */
+.warm-up-column button {
+  width: 100%;
+  text-align: left;
+  padding: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Without this the click leaves no mark, so the user cannot tell whether the entry was taken. */
+.warm-up-column button[aria-pressed='true'] {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.warm-up-controls {
+  display: grid;
+  /*
+   * Both placed explicitly. Grid resolves items with a definite row before auto-placing the rest, so naming only
+   * the row let this claim the first column and pushed both lists along one.
+   */
+  grid-row: 2;
+  grid-column: 2;
+  align-content: center;
+  gap: 8px;
+}
+
+.warm-up-arrow {
+  width: 20px;
+  height: 20px;
+}
+
+.warm-up-controls button {
+  display: grid;
+  place-items: center;
+  min-width: 44px;
+  min-height: 44px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+
+/*
+ * The diagnostics entry in the masthead, which is the header shown before an account exists.
+ *
+ * The dashboard's own entry disappears with the dashboard, so on the setup and authentication screens this is
+ * the only way to start collecting — and those are the screens a startup or sign-in failure is visible on.
+ */
+.masthead-action {
+  margin-inline-start: auto;
+  align-self: center;
+}
+
+/*
+ * Every interactive state in the sheet, in one place and in cascade order: the filled default first, then each
+ * variant that keeps its own surface.
+ *
+ * A variant is declared beside the rule that gives it its resting surface, far above here, so a `:hover` written
+ * there would lose to the filled default's `:hover` on source order alone and repaint a secondary button in the
+ * accent. Ordering them here is what keeps a "No" button from turning teal under the pointer.
+ */
+button {
+  transition:
+    background 150ms var(--ease-out),
+    border-color 150ms var(--ease-out),
+    transform 100ms var(--ease-out);
+}
+
+button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 88%, var(--on-accent));
+}
+
+button:active:not(:disabled, .device-open-control) {
+  transform: scale(0.97);
+}
+
+button:disabled {
+  background: color-mix(in srgb, var(--accent) 28%, var(--panel));
+  color: color-mix(in srgb, var(--on-accent) 60%, var(--panel));
+  cursor: not-allowed;
+}
+
+button.diagnostics-secondary-action:hover:not(:disabled),
+.dashboard-page-back:hover:not(:disabled),
+.warm-up-controls button:hover:not(:disabled),
+.warm-up-column button:hover:not(:disabled),
+.warm-up-column button:focus-visible {
+  border-color: var(--line-strong);
+  background: color-mix(in srgb, var(--ink) 5%, var(--panel));
+}
+
+button.diagnostics-quiet-action:hover:not(:disabled) {
+  background: transparent;
+  color: var(--ink);
+}
+
+.dashboard-action:hover,
+.dashboard-action:focus-visible {
+  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
+}
+
+.device-open-control:hover {
+  background: transparent;
+}
+
+/*
+ * The tile is the dashboard's primary target and artwork covers everything but its edge, so the edge carries the
+ * hover. A step in `--line` alone was too quiet to register as feedback; the accent in the edge is not.
+ */
+.device-tile:hover {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
+}
+
+.warm-up-controls button:disabled,
+.warm-up-column button:disabled,
+button.diagnostics-secondary-action:disabled {
+  border-color: var(--line);
+  background: var(--panel);
+  color: var(--ink-disabled);
+  cursor: default;
+}
+
+/*
+ * The one keyboard focus ring, on everything that takes focus.
+ *
+ * The device tiles are the dashboard's primary interaction and the diagnostics panel's buttons carry no class, so
+ * both used to fall through to the user agent's own ring — a hairline with no offset, thinner and lower in
+ * contrast than the ring the rest of the interface draws. Naming the focusables once is what keeps the ring from
+ * drifting into a fourth variant.
+ */
+:is(button, input, select, textarea, a, [tabindex]):focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: 2px;
+}
+
+input:focus-visible {
+  border-color: var(--accent);
+}
+
+/*
+ * The segmented control's ring, drawn inside.
+ *
+ * Its radio input is a 1px sliver and the group clips overflow, so a ring on the input is invisible and a ring
+ * outside the label is cut off. The visible segment carries it, inset.
+ */
+.snapshot-segment input:focus-visible {
+  outline: none;
+}
+
+.snapshot-segment input:focus-visible + span {
+  outline: var(--focus-ring);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button:active {
+    transform: none;
+  }
+}
+
+@media (max-width: 420px) {
+  .status-row {
+    display: grid;
+  }
+
+  .status {
+    justify-self: start;
+  }
+
+  .field-row {
+    grid-template-columns: 1fr;
+  }
+
+  .legacy-notice {
+    display: grid;
+  }
+
+  .legacy-notice button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 760px) {
+  .device-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: calc(((100cqw - 12px) / 2 - 12px) / 2);
+  }
+}
+
+@media (max-width: 540px) {
+  /*
+   * Stacked rather than side by side: one list above, one below, and the buttons between them. Two lists abreast
+   * leave nothing readable at this width, and the transfer reads along the axis it moves the device.
+   *
+   * Everything the wide layout pinned is undone here — the shared rows, the spans, and the column the buttons
+   * claimed — because that arrangement exists only to line three columns up against each other.
+   */
+  .warm-up-transfer {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+
+  .warm-up-column {
+    grid-row: auto;
+    grid-template-rows: auto 1fr;
+  }
+
+  .warm-up-column ul {
+    align-self: stretch;
+  }
+
+  .warm-up-controls {
+    grid-row: auto;
+    grid-column: 1;
+    grid-auto-flow: column;
+    justify-content: center;
+  }
+
+  /* The chevrons point the way the device travels, which is now down the page rather than across it. */
+  .warm-up-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+@media (max-width: 520px) {
+  .advanced-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .diagnostics-actions button {
+    width: 100%;
+  }
+
+  .diagnostics-choice-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .diagnostics-choice-actions button {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .device-grid {
+    grid-template-columns: 1fr;
+    /* One column is already a stack, so the row unit and the spans give way to the tile's own ratio. */
+    grid-auto-rows: auto;
+  }
+
+  .device-tile,
+  .device-tile:not([data-device-class='camera']) {
+    grid-row: auto;
+  }
+
+  .device-summary {
+    min-height: 0;
+  }
+
+  .device-tile {
+    aspect-ratio: 2 / 1;
+    min-height: 152px;
+  }
+
+  .device-art img[data-device-artwork] {
+    inset: 12px 4% 12px auto;
+    width: 76%;
+    height: calc(100% - 24px);
+    object-fit: contain;
+    object-position: center right;
+  }
+
+  .diagnostic-panel {
+    gap: 4px;
+    padding: 32px 16px 8px;
+  }
+
+}
+
+.shell[data-theme='dark'] {
+  color-scheme: dark;
+  --accent: #00bfc4;
+  --accent-ink: #67e1e4;
+  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--panel));
+  --ink: #edf1f7;
+  --ink-secondary: color-mix(in srgb, var(--ink) 78%, var(--panel));
+  --muted: #aab3c2;
+  --ink-disabled: color-mix(in srgb, var(--muted) 55%, var(--panel));
+  --alert: #d9a53f;
+  --fault: #fda29b;
+  --ok: #6cd39a;
+  --line: rgb(255 255 255 / 10%);
+  --line-strong: rgb(255 255 255 / 18%);
+  --shadow-overlay: 0 0 0 1px rgb(255 255 255 / 9%);
+  --panel: #262d39;
+  --tile-bg: #17202c;
+  --tile-ink: #f4f7fb;
+  --tile-muted: #d6deea;
+  --tile-gradient: rgb(8 14 24 / 90%);
+  --tile-stripe: rgb(255 255 255 / 7%);
+  --tile-badge-bg: rgb(8 14 24 / 72%);
+  --tile-badge-border: rgb(255 255 255 / 36%);
+  --tile-badge-halo: rgb(4 8 14 / 85%);
+  --tile-image-filter: brightness(0.58) saturate(0.85) contrast(1.05);
+  --tile-scene-filter: brightness(0.62) saturate(0.95);
+  --tile-scene-gradient: rgb(4 8 14 / 88%);
+  --tile-disabled-filter: brightness(0.48) grayscale(0.65) contrast(1.05);
+  --tile-icon-filter: invert(1);
+  --tile-tooltip-bg: #080e18;
+  --tile-tooltip-ink: #f4f7fb;
+}
+
+.shell[data-theme='dark'] .notice-icon,
+.shell[data-theme='dark'] .status-icon,
+.shell[data-theme='dark'] .dashboard-page-icon,
+.shell[data-theme='dark'] .dashboard-action img,
+.shell[data-theme='dark'] .warm-up-arrow,
+.shell[data-theme='dark'] .device-class-icon {
+  filter: invert(1);
+}
+
+.shell[data-theme='dark'] .eufy-logo .logo-light {
+  display: none;
+}
+
+.shell[data-theme='dark'] .eufy-logo .logo-dark {
+  display: block;
+}