/* Starshine Keep v2 — production panel visual system.
   Scoped to the custom panel shadow root. No private Home Assistant elements. */

:host {
  --k-night: #080c1b;
  --k-deep: #0d1429;
  --k-surface: #131d34;
  --k-surface-raised: #1b2947;
  --k-line: rgba(123, 151, 208, .27);
  --k-line-strong: rgba(137, 170, 234, .46);
  --k-ink: #edf3ff;
  --k-muted: #a8b7d4;
  --k-dim: #8193b6;
  --k-blue: #4a9fff;
  --k-yellow: #ffd357;
  --k-purple: #aa7cf4;
  --k-cyan: #77dbe9;
  --k-good: #43dca6;
  --k-warn: #ffad62;
  --k-bad: #ff6579;
  --k-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: block;
  width: 100%;
  min-width: 300px;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--k-ink);
  font: 14px/1.45 var(--k-font);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

:host([hidden]), [hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
svg { flex: none; }

.keep-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
  background: linear-gradient(115deg, #090d1b 0%, #0b1023 51%, #0a0e1e 100%);
}

.keep-shell::before,
.keep-shell::after {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
}

.keep-shell::before {
  background:
    radial-gradient(ellipse 32% 36% at 25% 19%, rgba(85, 38, 160, .30), transparent 73%),
    radial-gradient(ellipse 35% 42% at 87% 20%, rgba(30, 78, 166, .21), transparent 73%),
    radial-gradient(ellipse 30% 34% at 54% 90%, rgba(74, 34, 135, .17), transparent 76%);
  animation: keep-nebula 48s ease-in-out infinite alternate;
}

.keep-shell::after {
  inset: 0;
  opacity: .27;
  background-image:
    radial-gradient(circle at 12% 25%, #a6b7ee 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 16%, #ba9eea 0 1px, transparent 1.5px),
    radial-gradient(circle at 77% 12%, #92b5e6 0 .8px, transparent 1.4px),
    radial-gradient(circle at 22% 69%, #879ed0 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 81%, #a99be5 0 1px, transparent 1.5px),
    linear-gradient(rgba(92, 124, 197, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 124, 197, .07) 1px, transparent 1px);
  background-size: 640px 480px, 640px 480px, 640px 480px,
    640px 480px, 640px 480px, 48px 48px, 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent);
}

@keyframes keep-nebula {
  from { transform: translate3d(-1%, 0, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
}

.keep-side, .keep-main, .keep-bottom { position: relative; z-index: 1; }

/* Whole-home navigation. The panel does not need the Home Assistant dashboard tabs. */
.keep-side {
  align-self: start;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
  height: 100vh;
  height: 100dvh;
  padding: 24px 15px 18px;
  border-right: 1px solid rgba(137, 159, 209, .17);
  background: linear-gradient(180deg, rgba(13, 19, 38, .98), rgba(10, 15, 31, .96));
  backdrop-filter: blur(18px);
}

.keep-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 0 9px;
  color: var(--k-ink);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1.1;
}

.keep-brand .keep-brand-mark,
.keep-brand .brand-mark,
.keep-brand > svg,
.keep-brand > .icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: none;
  padding: 7px;
  border: 1px solid rgba(168, 132, 243, .65);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(91, 83, 222, .32), rgba(95, 43, 171, .28));
  color: #d6c1ff;
  box-shadow: 0 0 26px rgba(100, 64, 210, .20);
}

.keep-brand span,
.keep-brand small,
.keep-brand .brand-sub { display: block; margin-top: 4px; color: #a8a3d6; font-size: 9px; letter-spacing: .17em; }

.keep-nav { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.keep-nav a,
.keep-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--k-muted);
  font-size: 12px;
  font-weight: 660;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.keep-nav :is(a, button):hover { background: rgba(79, 113, 193, .17); color: var(--k-ink); }
.keep-nav :is(a, button)[aria-current="page"],
.keep-nav :is(a, button).active {
  border-color: rgba(78, 141, 255, .36);
  background: linear-gradient(90deg, rgba(71, 123, 249, .27), rgba(64, 61, 147, .10));
  color: #e7f1ff;
  box-shadow: inset 3px 0 var(--k-blue);
}
.keep-nav :is(a, button) svg { width: 19px; height: 19px; color: #92a5c8; }
.keep-nav :is(a, button)[aria-current="page"] svg,
.keep-nav :is(a, button).active svg { color: #83beff; }
.keep-nav .nav-count { margin-left: auto; color: #8ac7fc; font-size: 10px; }

.keep-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.keep-top {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 65px;
  padding: 9px 38px;
  border-bottom: 1px solid rgba(139, 159, 207, .14);
  background: rgba(11, 16, 33, .91);
  backdrop-filter: blur(16px);
}
.keep-top > * { min-width: 0; }
.keep-top .top-crumb { overflow: hidden; color: #a9b8d4; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-overflow: ellipsis; white-space: nowrap; }
.keep-top .top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.keep-page-viewport { flex: 1; min-height: 0; min-width: 0; }
.keep-page { min-width: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 27px 38px 36px; }
.keep-page-inner { width: 100%; min-width: 0; }
.keep-bottom { display: none; }

/* Page title and cards. Every route should compose its own content with these. */
.k-eyebrow { margin: 0 0 7px; color: var(--k-yellow); font-size: 10px; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.k-title { margin: 0; color: var(--k-ink); font-size: clamp(30px, 2.5vw, 44px); font-weight: 760; letter-spacing: -.045em; line-height: 1.08; overflow-wrap: anywhere; }
.k-sub { margin: 8px 0 0; color: var(--k-muted); font-size: 13px; line-height: 1.45; }
.k-hero {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
  margin-bottom: 23px;
  overflow: hidden;
}
.k-hero > * { position: relative; z-index: 1; }
.k-hero::after {
  content: "✦";
  position: absolute;
  right: 36px;
  top: 1px;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border: 1px solid rgba(163, 127, 238, .25);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 89, 219, .37), rgba(85, 55, 167, .11) 32%, transparent 70%);
  box-shadow: 0 0 0 18px rgba(107, 93, 201, .028), 0 0 36px rgba(105, 65, 204, .13);
  color: #c7aafc;
  font-size: 33px;
  font-weight: 350;
  line-height: 1;
  pointer-events: none;
}

.k-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; min-width: 0; }
.k-grid[data-columns="3"], .k-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grid[data-columns="4"], .k-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-grid > * { min-width: 0; }
.k-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }

.k-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--k-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(23, 35, 66, .92), rgba(14, 22, 43, .96) 67%, rgba(20, 24, 47, .97));
  box-shadow: 0 15px 40px rgba(0, 0, 0, .17), inset 0 1px rgba(230, 239, 255, .035);
  overflow: hidden;
}
.k-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--k-card-accent, var(--k-blue)), rgba(137, 92, 224, .35), transparent);
  opacity: .8;
  pointer-events: none;
}
.k-card.purple { --k-card-accent: var(--k-purple); background: radial-gradient(circle at 100% 0, rgba(139, 80, 201, .17), transparent 47%), linear-gradient(145deg, rgba(24, 31, 57, .95), rgba(15, 23, 45, .96)); }
.k-card.yellow { --k-card-accent: var(--k-yellow); }
.k-card.cyan { --k-card-accent: var(--k-cyan); }
.k-card.good { --k-card-accent: var(--k-good); }
.k-card.bad { --k-card-accent: var(--k-bad); }
.k-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; margin-bottom: 16px; }
.k-card-head > * { min-width: 0; }
.k-card-head h2, .k-card-head h3 { margin: 0; font-size: 16px; font-weight: 730; letter-spacing: -.025em; }
.k-card-head .k-eyebrow { margin: 0; }
.k-card-head .meta { color: var(--k-dim); font-size: 11px; }

.k-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.k-metric .label, .k-metric > span { color: var(--k-muted); font-size: 10px; font-weight: 810; letter-spacing: .12em; text-transform: uppercase; }
.k-metric .value, .k-metric > strong { color: var(--k-ink); font-size: clamp(26px, 3vw, 42px); font-weight: 750; letter-spacing: -.065em; line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.k-metric .unit, .k-metric > small { color: var(--k-muted); font-size: 11px; font-weight: 550; letter-spacing: 0; }
.k-metric .detail { color: var(--k-dim); font-size: 11px; }
.k-metric.good .value { color: var(--k-good); }
.k-metric.warn .value { color: var(--k-yellow); }
.k-metric.bad .value { color: var(--k-bad); }

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(125, 153, 205, .38);
  border-radius: 10px;
  background: rgba(79, 105, 166, .14);
  color: var(--k-ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .015em;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.k-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--k-line-strong); background: rgba(81, 114, 191, .24); }
.k-btn:active:not(:disabled) { transform: translateY(0); }
.k-btn.primary { border-color: rgba(100, 173, 255, .62); background: linear-gradient(130deg, #287bdd, #4050bb); color: white; box-shadow: 0 7px 23px rgba(33, 105, 224, .19); }
.k-btn.primary:hover:not(:disabled) { background: linear-gradient(130deg, #398aeb, #535ed0); }
.k-btn.warn { border-color: rgba(255, 171, 99, .48); background: rgba(189, 104, 64, .17); color: #ffd3a5; }
.k-btn.selected { border-color: rgba(101, 173, 255, .69); background: rgba(50, 115, 208, .31); color: #f1f8ff; box-shadow: inset 0 0 0 1px rgba(107, 163, 242, .16); }
.k-btn.quiet { border-color: rgba(129, 151, 201, .20); background: rgba(50, 66, 108, .09); color: #afbfdb; }
.k-btn.danger { border-color: rgba(255, 101, 121, .50); background: rgba(173, 57, 85, .15); color: #ffc1c9; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { cursor: not-allowed; color: #91a1bd; border-color: rgba(131, 150, 184, .18); background: rgba(65, 77, 111, .11); box-shadow: none; }

.k-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(129, 156, 205, .26);
  border-radius: 7px;
  background: rgba(71, 94, 149, .14);
  color: #bccce7;
  font-size: 10px;
  font-weight: 790;
  letter-spacing: .07em;
  line-height: 1.1;
  white-space: nowrap;
}
.k-chip.good { color: #95e8c2; border-color: rgba(67, 220, 166, .34); background: rgba(40, 146, 110, .13); }
.k-chip.warn { color: #ffce98; border-color: rgba(255, 173, 98, .33); background: rgba(177, 103, 47, .13); }
.k-chip.bad { color: #ffadba; border-color: rgba(255, 101, 121, .39); background: rgba(173, 57, 85, .16); }
.k-chip.purple { color: #d9c0ff; border-color: rgba(170, 124, 244, .36); background: rgba(113, 72, 179, .15); }
.k-chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.k-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: #93c6ff; font-size: 12px; font-weight: 730; }
.k-link:hover { color: #c5e0ff; text-decoration: underline; text-underline-offset: 3px; }

/* Numeric fill: pass --level: <percentage>. Gradient stays the full track width,
   then clips to the actual value. Set role/progressbar ARIA in markup as well. */
.k-ramp { position: relative; height: 8px; border-radius: 99px; background: rgba(70, 89, 130, .46); overflow: hidden; }
.k-ramp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ff6579 0%, #ffd357 50%, #43dca6 100%); clip-path: inset(0 calc(100% - var(--level, 0%)) 0 0); }
.k-ramp.solar::before { background: linear-gradient(90deg, #367dff, #7fc5ff 52%, #ffd357); }
.k-ramp.cool::before { background: linear-gradient(90deg, #5864de, #39a7ff 55%, #84dfed); }

/* Camera slots. The camera component can render an <img> or <video> here. */
.k-camera-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.k-camera { min-width: 0; overflow: hidden; border: 1px solid var(--k-line); border-radius: 14px; background: rgba(18, 28, 51, .92); }
.k-camera-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, #162744, #101d35); }
.k-camera-frame > :is(img, video, canvas) { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-camera-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(7, 17, 39, .08) 4px 5px); }
.k-camera-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 53px; padding: 9px 13px; }
.k-camera-info strong { display: block; color: var(--k-ink); font-size: 12px; }
.k-camera-info small { display: block; margin-top: 2px; color: var(--k-dim); font-size: 10px; }
.k-camera.pending .k-camera-frame { background: linear-gradient(140deg, #202840, #24223d); }
.k-camera.unavailable .k-camera-frame { background: linear-gradient(140deg, #342231, #1c2036); }

/* Form inputs follow the same visual language and retain native semantics. */
.keep-page :is(input[type="text"], input[type="number"], select) {
  min-height: 44px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(128, 156, 207, .39);
  border-radius: 9px;
  background: #13203b;
  color: var(--k-ink);
}
.keep-page input[type="range"] { min-height: 44px; accent-color: var(--k-blue); }
:is(a, button, input, select, [tabindex]):focus-visible { outline: 3px solid #ffda70; outline-offset: 3px; }

/* 1430: protect wide card contents without leaving unused side margins. */
@media (max-width: 1430px) {
  .keep-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .keep-page { padding: 24px 25px 32px; }
  .keep-top { padding-inline: 25px; }
  .k-grid[data-columns="4"], .k-grid.cols-4 { gap: 10px; }
}

/* 1180: compact rail on tablets; retain a full-width canvas for curated pages. */
@media (max-width: 1180px) {
  .keep-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .keep-side { align-items: center; padding: 15px 8px; }
  .keep-brand { justify-content: center; width: 100%; padding: 0; }
  .keep-brand > div:last-child { display: none; }
  .keep-nav { width: 100%; }
  .keep-nav :is(a, button) { justify-content: center; min-height: 48px; padding: 9px 0; }
  .keep-nav :is(.nav-label, .nav-count, span) { display: none; }
  .keep-nav :is(a, button) svg { width: 21px; height: 21px; }
  .k-grid[data-columns="4"], .k-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 620: real phone navigation, safe areas, 44px minimum actions. */
@media (max-width: 620px) {
  .keep-shell { display: block; min-width: 300px; }
  .keep-side { display: none; }
  .keep-top { min-height: 57px; padding: 8px 15px; }
  .keep-top .top-crumb { font-size: 9px; letter-spacing: .09em; }
  .keep-top .top-actions { gap: 5px; }
  .keep-page { padding: 20px 15px calc(92px + env(safe-area-inset-bottom)); }
  .k-hero { min-height: 0; margin-bottom: 21px; padding: 0; }
  .k-hero::after { right: -7px; top: 1px; width: 67px; height: 67px; font-size: 21px; opacity: .49; }
  .k-title { font-size: clamp(28px, 7.7vw, 34px); line-height: 1.06; }
  .k-sub { font-size: 11px; }
  .k-eyebrow { font-size: 9px; }
  .k-grid, .k-grid[data-columns="3"], .k-grid.cols-3 { grid-template-columns: 1fr; gap: 10px; }
  .k-grid[data-columns="4"], .k-grid.cols-4, .k-grid.quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .k-card { padding: 15px; border-radius: 15px; }
  .k-card-head { margin-bottom: 12px; }
  .k-card-head :is(h2, h3) { font-size: 15px; }
  .k-metric .value { font-size: 31px; }
  .k-btn { min-height: 48px; padding: 9px 11px; }
  .k-chip { font-size: 9px; }
  .k-camera-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .k-camera-grid > :first-child { grid-column: 1 / -1; }
  .k-camera-grid > :not(:first-child) .k-camera-frame { aspect-ratio: 1.75; }
  .k-camera-grid > :not(:first-child) .k-camera-info { padding: 7px 9px; }
  .k-camera-grid > :not(:first-child) .k-camera-info small { font-size: 9px; }
  .keep-bottom {
    position: fixed;
    z-index: 30;
    left: 9px;
    right: 9px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(var(--k-bottom-count, 4), minmax(0, 1fr));
    gap: 3px;
    min-height: 64px;
    padding: 5px;
    border: 1px solid rgba(126, 152, 203, .36);
    border-radius: 16px;
    background: rgba(12, 19, 39, .97);
    box-shadow: 0 10px 36px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
  }
  .keep-bottom :is(a, button) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9aaac9;
    font-size: 10px;
    font-weight: 730;
    cursor: pointer;
  }
  .keep-bottom :is(a, button) svg { width: 20px; height: 20px; }
  .keep-bottom :is(a, button)[aria-current="page"],
  .keep-bottom :is(a, button).active { background: linear-gradient(145deg, rgba(64, 111, 216, .35), rgba(84, 59, 169, .28)); color: #e0eeff; }
  .keep-bottom :is(a, button)[aria-current="page"] svg,
  .keep-bottom :is(a, button).active svg { color: #82bdff; }
}

@media (max-width: 360px) {
  .keep-page { padding-inline: 12px; }
  .k-card { padding: 12px; }
  .k-chip { letter-spacing: .02em; }
  .keep-top .top-crumb { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .keep-shell::before { animation: none; }
  .k-btn, .keep-nav :is(a, button) { transition: none; }
  .k-btn:hover:not(:disabled) { transform: none; }
}

/* Actual panel markup. Keep these styles independent of Home Assistant internals. */
.keep-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.keep-ambient span { position: absolute; width: min(27vw, 390px); aspect-ratio: 1; border-radius: 50%; filter: blur(54px); opacity: .09; background: var(--k-purple); animation: keep-float 31s ease-in-out infinite alternate; }
.keep-ambient span:nth-child(1) { top: 8%; right: 7%; }
.keep-ambient span:nth-child(2) { top: 47%; left: 19%; width: min(18vw, 260px); background: var(--k-blue); animation-delay: -14s; }
.keep-ambient span:nth-child(3) { bottom: -9%; right: 19%; width: min(22vw, 320px); animation-delay: -21s; }
@keyframes keep-float { to { transform: translate3d(15px, -19px, 0) scale(1.13); } }
.keep-brand strong, .keep-brand span { display: block; }
.keep-brand strong { white-space: nowrap; }
.keep-side-label { margin: 23px 11px 0; color: #7f94bd; font-size: 9px; font-weight: 850; letter-spacing: .2em; }
.keep-side-foot { display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 2px 9px; margin-top: auto; padding: 13px 11px; border-top: 1px solid var(--k-line); color: #d4e1f8; font-size: 11px; font-weight: 750; }
.keep-side-foot small { grid-column: 2; color: var(--k-dim); font-size: 9px; letter-spacing: .13em; }
.k-orb, .keep-guard-orb { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--k-good); box-shadow: 0 0 0 4px rgba(67, 220, 166, .10), 0 0 12px rgba(67, 220, 166, .36); }
.k-orb.offline { background: var(--k-bad); box-shadow: 0 0 0 4px rgba(255, 101, 121, .10), 0 0 12px rgba(255, 101, 121, .35); }
.keep-guard-orb { background: var(--k-dim); box-shadow: 0 0 0 4px rgba(130, 150, 185, .10); }
.keep-guard-orb.good { background: var(--k-good); box-shadow: 0 0 0 4px rgba(67, 220, 166, .10), 0 0 12px rgba(67, 220, 166, .36); }
.keep-guard-orb.off { background: var(--k-warn); box-shadow: 0 0 0 4px rgba(255, 173, 98, .11); }
.keep-guard-orb.bad { background: var(--k-bad); box-shadow: 0 0 0 4px rgba(255, 101, 121, .11); }
.keep-nav-link ha-icon { --mdc-icon-size: 19px; flex: none; }
.keep-top-title { display: flex; align-items: center; gap: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #aebfdd; font-size: 11px; font-weight: 820; letter-spacing: .08em; }
.keep-top-title b { color: #6f83ab; font-size: 14px; }
.keep-top-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--k-ink); font-size: 12px; letter-spacing: 0; }
.keep-top-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid rgba(170, 124, 244, .44); border-radius: 8px; color: #d1bbff; background: rgba(126, 79, 204, .16); font-size: 17px; }
.keep-top-right { display: flex; align-items: center; gap: 17px; flex: none; }
.keep-top-right time { min-width: 35px; color: var(--k-muted); font-size: 11px; font-weight: 780; font-variant-numeric: tabular-nums; }
.keep-heading { position: relative; min-height: 99px; margin-bottom: 17px; padding-right: 84px; }
.keep-heading h1 { margin: 0; color: #f1f5ff; font-size: clamp(29px, 2.6vw, 43px); line-height: 1.1; font-weight: 770; letter-spacing: -.045em; }
.keep-heading h1 em { font-style: normal; color: #8dbbff; }
.keep-heading p { margin: 8px 0 0; color: var(--k-muted); font-size: 12px; line-height: 1.45; }
.keep-heading-home { min-height: 106px; }
.keep-heading-signal { position: absolute; right: 11px; top: -7px; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid rgba(178, 130, 249, .24); border-radius: 50%; background: radial-gradient(circle, rgba(115, 65, 204, .35), transparent 63%); color: #ceafff; font-size: 28px; box-shadow: 0 0 0 16px rgba(107, 74, 194, .025); }
.keep-action-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 17px; }
.keep-action-strip .k-btn { justify-content: flex-start; min-height: 54px; padding: 11px 15px; font-size: 13px; }
.k-btn ha-icon, .k-link ha-icon { --mdc-icon-size: 19px; flex: none; }
.keep-action-strip .k-btn ha-icon { --mdc-icon-size: 21px; }
.keep-home-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .95fr); gap: 14px; }
.keep-home-grid > *, .keep-spaces-grid > *, .keep-comfort-grid > *, .keep-energy-grid > *, .keep-system-grid > * { min-width: 0; }
.keep-home-energy-card { --k-card-accent: var(--k-yellow); }
.keep-home-comfort-card { --k-card-accent: var(--k-blue); }
.keep-room-card { --k-card-accent: var(--k-purple); }
.keep-tonight-card { --k-card-accent: var(--k-cyan); }
.keep-home-energy-card, .keep-home-comfort-card, .keep-room-card, .keep-tonight-card { display: flex; flex-direction: column; }
.keep-home-energy, .keep-energy-battery { display: flex; align-items: center; gap: 24px; min-width: 0; flex: 1; }
.keep-battery-disc { --soc: 0; position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: clamp(128px, 11.7vw, 172px); aspect-ratio: 1; border-radius: 50%; text-align: center; isolation: isolate; }
.keep-battery-disc::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%; background: conic-gradient(from -90deg, var(--battery-color, #8193b6) 0 calc(var(--soc) * 1%), rgba(92, 112, 154, .30) calc(var(--soc) * 1%) 100%); }
.keep-battery-disc.low { animation: keep-low-charge 2.8s ease-in-out infinite; }
@keyframes keep-low-charge { 50% { filter: drop-shadow(0 0 13px var(--battery-color, #ff6579)); } }
.keep-battery-disc::after { content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 55% 32%, #1e3257, #101b35 68%); box-shadow: inset 0 0 0 1px rgba(141, 165, 212, .25), 0 0 24px rgba(50, 100, 208, .13); }
.keep-battery-disc.unknown::before { background: rgba(96, 116, 158, .35); }
.keep-battery-disc span { color: #9bb1d8; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.keep-battery-disc strong { color: #f2f6ff; font-size: clamp(32px, 3.8vw, 54px); font-weight: 780; letter-spacing: -.07em; font-variant-numeric: tabular-nums; line-height: 1.07; }
.keep-battery-disc small { max-width: 108px; color: #bad0e9; font-size: 10px; text-transform: capitalize; line-height: 1.2; }
.keep-flow-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; gap: 8px; min-width: 0; }
.keep-flow-stack > div { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; min-height: 91px; padding: 11px; border: 1px solid rgba(118, 149, 205, .19); border-radius: 11px; background: rgba(30, 47, 82, .37); }
.keep-flow-stack span { color: #b7c8e5; font-size: 10px; font-weight: 820; letter-spacing: .06em; }
.keep-flow-stack b { color: var(--k-ink); font-size: clamp(15px, 1.6vw, 23px); font-weight: 780; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.keep-flow-stack small { color: var(--k-muted); font-size: 9px; text-transform: capitalize; }
.k-meter { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(67, 87, 137, .66); }
.k-meter u { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #397fff, #69b6ff 53%, #ffd357); text-decoration: none; transition: width .7s ease; }
.k-meter.unknown u { background: #596887; }
.k-card-tail { margin-top: auto; padding-top: 9px; }
.keep-home-comfort { display: flex; align-items: center; gap: 15px; flex: 1; min-height: 136px; }
.keep-climate-symbol, .keep-record-icon { display: grid; place-items: center; flex: none; width: 78px; height: 78px; border-radius: 20px; background: radial-gradient(circle at 30% 20%, rgba(96, 166, 255, .33), rgba(52, 78, 161, .16)); border: 1px solid rgba(89, 156, 252, .37); color: #88bfff; }
.keep-climate-symbol ha-icon, .keep-record-icon ha-icon { --mdc-icon-size: 36px; }
.keep-home-comfort > div:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.keep-home-comfort strong { font-size: clamp(24px, 2.3vw, 36px); font-weight: 770; line-height: 1.15; text-transform: capitalize; }
.keep-home-comfort span { color: var(--k-muted); font-size: 12px; }
.keep-home-comfort span b { color: var(--k-yellow); font-size: 15px; }
.keep-home-comfort small { color: var(--k-dim); font-size: 10px; }
.keep-status-pair { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.keep-status-pair > span { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(115, 145, 202, .20); border-radius: 8px; background: rgba(24, 40, 75, .33); color: #a8badd; font-size: 9px; font-weight: 780; letter-spacing: .06em; }
.keep-status-pair strong { color: #eef4ff; font-size: 11px; font-weight: 760; letter-spacing: 0; overflow-wrap: anywhere; }
.keep-room-list { display: grid; gap: 6px; }
.keep-room-list a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px; border: 1px solid transparent; border-radius: 10px; }
.keep-room-list a:hover { border-color: rgba(110, 154, 238, .26); background: rgba(68, 95, 157, .11); }
.keep-room-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border-radius: 11px; background: rgba(93, 77, 171, .18); color: #bea6fc; }
.keep-room-icon ha-icon { --mdc-icon-size: 22px; }
.keep-room-list a > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.keep-room-list strong { font-size: 12px; }
.keep-room-list small { color: var(--k-muted); font-size: 10px; }
.keep-room-list a > b { color: #83b6fb; font-size: 16px; }
.keep-audio-glance { display: flex; align-items: center; gap: 13px; min-height: 96px; }
.keep-record-icon { width: 61px; height: 61px; border-color: rgba(126, 117, 237, .37); background: radial-gradient(circle at 30% 20%, rgba(147, 99, 239, .35), rgba(72, 68, 154, .16)); color: #c2a8ff; }
.keep-record-icon ha-icon { --mdc-icon-size: 30px; }
.keep-audio-glance > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.keep-audio-glance strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.keep-audio-glance small { color: var(--k-muted); font-size: 11px; text-transform: capitalize; }

/* Rooms, climate, power, speakers, and system each use deliberate compositions. */
.keep-spaces-grid, .keep-comfort-grid, .keep-energy-grid, .keep-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.keep-device-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; min-width: 0; }
.keep-device-line > div { display: flex; flex-direction: column; min-width: 0; }
.keep-device-line strong { font-size: 14px; }
.keep-device-line span:not(.k-chip) { color: var(--k-muted); font-size: 11px; }
.keep-preset-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.keep-preset-row .k-btn { flex: 1 1 auto; }
.keep-context { display: block; margin: 13px 0 0; color: var(--k-muted); font-size: 11px; line-height: 1.5; }
.keep-pending-art { display: flex; align-items: center; gap: 13px; min-height: 116px; padding: 20px; border: 1px dashed rgba(152, 134, 202, .25); border-radius: 13px; background: radial-gradient(circle at 30% 40%, rgba(112, 73, 163, .20), transparent 62%), #111a30; color: #b9a7e4; font-size: 16px; font-weight: 680; }
.keep-pending-art ha-icon { --mdc-icon-size: 45px; }
.keep-pending-list { display: grid; gap: 2px; }
.keep-pending-list > span { display: flex; justify-content: space-between; gap: 10px; min-height: 42px; align-items: center; border-bottom: 1px solid rgba(120, 146, 196, .15); color: #d9e4f8; font-size: 12px; }
.keep-pending-list b { color: var(--k-dim); font-size: 10px; white-space: nowrap; }
.keep-climate-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.keep-climate-readout > div { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid rgba(110, 145, 205, .22); border-radius: 11px; background: rgba(27, 46, 85, .43); }
.keep-climate-readout span { color: var(--k-muted); font-size: 9px; font-weight: 810; letter-spacing: .1em; }
.keep-climate-readout strong { font-size: clamp(16px, 2.1vw, 27px); line-height: 1.13; overflow-wrap: anywhere; text-transform: capitalize; }
.keep-climate-readout > div:nth-child(2) strong { color: #ffd970; }
.keep-stepper { display: flex; align-items: center; justify-content: center; gap: 21px; margin-top: 15px; padding: 11px; border: 1px solid rgba(114, 144, 208, .19); border-radius: 12px; }
.keep-stepper strong { min-width: 62px; text-align: center; color: var(--k-yellow); font-size: 22px; font-variant-numeric: tabular-nums; }
.keep-stepper .k-btn { min-width: 48px; font-size: 20px; }
.keep-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding-block: 8px; border-bottom: 1px solid rgba(127, 154, 205, .18); }
.keep-setting-row > span { display: flex; flex-direction: column; }
.keep-setting-row strong { font-size: 12px; }
.keep-setting-row small { color: var(--k-muted); font-size: 11px; }
.keep-select-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.keep-select-row label { display: grid; gap: 6px; color: var(--k-muted); font-size: 10px; font-weight: 780; text-transform: uppercase; letter-spacing: .1em; }
.keep-select-row select { width: 100%; }
.keep-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; margin-top: 15px; }
.keep-schedule > span { display: flex; justify-content: space-between; gap: 6px; min-height: 36px; border-bottom: 1px solid rgba(117, 146, 199, .14); color: #aabddd; font-size: 9px; font-weight: 760; letter-spacing: .04em; }
.keep-schedule b { color: var(--k-ink); text-align: right; font-size: 10px; letter-spacing: 0; }
.keep-energy-battery-card { --k-card-accent: var(--k-yellow); }
.keep-energy-flow-card { --k-card-accent: var(--k-blue); }
.keep-today-card { --k-card-accent: var(--k-cyan); grid-column: 1 / -1; }
.keep-energy-graph-card, .keep-history-card { grid-column: 1 / -1; }
.keep-energy-graph-card { --k-card-accent: var(--k-purple); }
.keep-car-card { --k-card-accent: var(--k-purple); }
.keep-guard-card { --k-card-accent: var(--k-good); }
.keep-battery-disc.large { width: clamp(150px, 15vw, 200px); }
.keep-battery-disc.large strong { font-size: clamp(44px, 5vw, 66px); }
.keep-battery-action { --flow-color: #8193b6; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-width: 0; color: var(--flow-color); text-align: center; }
.keep-battery-action svg { width: min(142px, 100%); height: auto; overflow: visible; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--flow-color), transparent 72%)); }
.keep-battery-action .battery-shell { fill: color-mix(in srgb, var(--flow-color), transparent 90%); stroke: var(--flow-color); stroke-width: 4; }
.keep-battery-action .battery-tip { fill: var(--flow-color); }
.keep-battery-action .battery-arrow { fill: none; stroke: var(--flow-color); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 60px 44px; }
.keep-battery-action[data-battery-flow="charging"] .battery-arrow { transform: scaleX(-1); }
.keep-battery-action[data-battery-flow="charging"] svg, .keep-battery-action[data-battery-flow="discharging"] svg { animation: keep-battery-flow 2.3s ease-in-out infinite; }
.keep-battery-action[data-battery-flow="idle"] { opacity: .68; }
.keep-battery-action[data-battery-flow="unknown"] { opacity: .42; }
.keep-battery-action strong { color: var(--k-ink); font-size: clamp(25px, 3vw, 38px); letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.keep-battery-action span { color: var(--k-muted); font-size: 11px; }
@keyframes keep-battery-flow { 50% { filter: drop-shadow(0 0 22px var(--flow-color)); scale: 1.035; } }
.keep-energy-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.keep-energy-flows > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 149px; padding: 12px; border: 1px solid rgba(121, 153, 211, .20); border-radius: 12px; background: rgba(27, 42, 76, .43); }
.keep-energy-flows > div > span:nth-child(2) { color: #aabddd; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.keep-energy-flows strong { font-size: clamp(18px, 1.75vw, 27px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; white-space: nowrap; }
.keep-energy-flows small { color: var(--k-muted); font-size: 10px; text-transform: capitalize; }
.energy-glyph { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(75, 122, 201, .17); color: var(--k-blue); font-size: 19px; }
.energy-glyph ha-icon { --mdc-icon-size: 22px; }
.energy-glyph.sun { color: var(--k-yellow); background: rgba(201, 148, 53, .15); }
.energy-glyph.grid { color: var(--k-purple); background: rgba(137, 99, 203, .16); }
.keep-solar-tile .energy-glyph { box-shadow: 0 0 22px rgba(255, 211, 87, .12); }
.keep-grid-flow-tile[data-grid-flow="importing"] .energy-glyph { color: var(--k-blue); background: rgba(74, 159, 255, .14); }
.keep-grid-flow-tile[data-grid-flow="exporting"] .energy-glyph { color: var(--k-good); background: rgba(67, 220, 166, .14); }
.keep-grid-flow-tile[data-grid-flow="idle"] .energy-glyph { color: var(--k-dim); }
.keep-sky-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(127, 153, 206, .19); color: var(--k-muted); font-size: 11px; }
.keep-sky-weather, .keep-sky-next { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.keep-sky-weather { color: var(--k-ink); }
.keep-sky-weather ha-icon { --mdc-icon-size: 21px; color: var(--k-yellow); }
.keep-sky-next { margin-left: auto; }
.keep-sky-next ha-icon { --mdc-icon-size: 18px; color: var(--k-yellow); }
.keep-sky-moonrise { color: #d2b9ff; }
.keep-day-grid-pair { display: flex; align-items: stretch; gap: 16px; margin-bottom: 11px; }
.keep-grid-donut { --grid-share: 50%; display: grid; place-items: center; position: relative; flex: none; width: 106px; height: 106px; border-radius: 50%; background: conic-gradient(from -90deg, var(--k-blue) 0 var(--grid-share), var(--k-purple) var(--grid-share) 100%); }
.keep-grid-donut::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #152541; }
.keep-grid-donut.unknown { background: rgba(123, 151, 198, .28); }
.keep-grid-donut ha-icon { position: relative; z-index: 1; --mdc-icon-size: 35px; color: var(--k-ink); }
.keep-day-grid-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.keep-day-grid-values .k-metric { min-height: 106px; border: 1px solid rgba(122, 151, 203, .2); border-radius: 10px; background: rgba(26, 42, 75, .38); padding: 11px; }
.keep-day-grid-values .k-metric.grid-in { border-top: 2px solid var(--k-blue); }
.keep-day-grid-values .k-metric.grid-out { border-top: 2px solid var(--k-purple); }
.keep-day-grid-values .k-metric strong { font-size: clamp(24px, 3vw, 36px); }
.keep-free-day { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 10px 12px; border: 1px solid rgba(255, 211, 87, .27); border-radius: 11px; background: rgba(255, 211, 87, .075); }
.keep-free-day-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(255, 211, 87, .14); color: var(--k-yellow); }
.keep-free-day-icon ha-icon { --mdc-icon-size: 22px; }
.keep-free-day > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.keep-free-day b { color: var(--k-ink); font-size: 11px; letter-spacing: .07em; }
.keep-free-day small { color: var(--k-muted); font-size: 10px; }
.keep-free-day > strong { margin-left: auto; color: var(--k-yellow); font-size: 18px; white-space: nowrap; }
.keep-energy-overview-chart { min-height: 140px; padding: 9px 0 3px; color: var(--k-muted); font-size: 12px; }
.keep-energy-overview-chart .k-history__svg { min-width: 540px; }
.keep-car-visual { display: flex; align-items: center; gap: 20px; min-height: 115px; padding: 10px 18px; border: 1px solid rgba(141, 114, 206, .22); border-radius: 13px; background: radial-gradient(circle at 13% 30%, rgba(92, 68, 174, .26), transparent 64%), rgba(21, 28, 57, .55); }
.keep-car-visual ha-icon { --mdc-icon-size: 67px; color: #c2a9fd; }
.keep-car-visual > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.keep-car-visual strong { font-size: clamp(34px, 3.7vw, 50px); line-height: 1.06; letter-spacing: -.06em; }
.keep-car-visual span { color: var(--k-muted); font-size: 11px; }
.keep-car-visual ha-icon { color: var(--car-color, #c2a9fd); }
.keep-car-meter { width: min(210px, 100%); margin-top: 10px; }
.keep-car-meter u { background: var(--car-color, #8193b6); }
.keep-car-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.keep-car-control { justify-content: center; min-width: 0; min-height: 58px; gap: 8px; font-size: 12px; }
.keep-car-control ha-icon { --mdc-icon-size: 23px; color: #b9a1fc; }
.keep-car-control.selected { border-color: rgba(108, 220, 174, .55); background: rgba(51, 153, 115, .18); }
.keep-car-control.selected ha-icon { color: #63e4b3; }
.keep-car-temp { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 52px; padding: 5px; border: 1px solid rgba(141, 114, 206, .22); border-radius: 11px; background: rgba(21, 28, 57, .45); }
.keep-car-temp strong { min-width: 64px; color: #e4d8ff; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.keep-car-temp .k-btn { min-width: 47px; min-height: 39px; padding: 3px 8px; font-size: 18px; }
.keep-guard-status { display: flex; align-items: center; gap: 11px; min-height: 79px; color: #d9f9eb; font-size: 23px; }
.keep-today-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.keep-today-grid .k-metric { min-height: 89px; padding: 11px; border: 1px solid rgba(122, 151, 203, .18); border-radius: 10px; background: rgba(26, 42, 75, .38); }
.keep-today-grid .k-metric strong { font-size: clamp(21px, 2.5vw, 31px); }
.keep-history-chart { display: grid; place-items: center; min-height: 145px; margin-top: 15px; padding: 18px; border: 1px dashed rgba(127, 153, 206, .27); border-radius: 11px; background: rgba(17, 30, 58, .54); color: var(--k-muted); font-size: 12px; text-align: center; }
.keep-history-chart:has(> .k-history) { display: block; min-width: 0; min-height: 0; margin-top: 15px; padding: 0; border: 0; background: transparent; text-align: left; }
.keep-music-hero { display: flex; align-items: center; gap: 19px; min-height: 132px; margin-bottom: 16px; background: radial-gradient(circle at 5% 30%, rgba(101, 61, 190, .26), transparent 48%), linear-gradient(145deg, rgba(24, 35, 66, .94), rgba(14, 22, 43, .96)); }
.keep-record-icon.large { width: 75px; height: 75px; }
.keep-music-hero > div:nth-child(2) { flex: 1; min-width: 0; }
.keep-music-hero h2 { margin: 0; font-size: 24px; }
.keep-music-hero p { margin: 4px 0 0; color: var(--k-muted); font-size: 12px; }
.keep-speaker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.keep-speaker-card h2 { margin: 2px 0 7px; font-size: 16px; }
.keep-speaker-card > strong { display: block; color: var(--k-good); font-size: 12px; text-transform: capitalize; }
.keep-speaker-card > p { min-height: 34px; margin: 5px 0 13px; color: var(--k-muted); font-size: 11px; }
.keep-speaker-actions { display: flex; gap: 6px; }
.keep-speaker-actions .k-btn { flex: 1; min-width: 0; padding-inline: 7px; }
.keep-speaker-card label { display: grid; grid-template-columns: 1fr auto; gap: 5px; margin-top: 14px; color: var(--k-muted); font-size: 10px; font-weight: 790; letter-spacing: .08em; }
.keep-speaker-card label input { grid-column: 1 / -1; width: 100%; }
.keep-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.keep-diagnostics-card { grid-column: 1 / -1; }
.keep-diagnostics-card .keep-connection-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.keep-diagnostics-card .keep-connection-list > div { display: flex; flex-direction: column; min-height: 68px; padding: 10px; border: 1px solid rgba(131, 159, 210, .20); border-radius: 9px; background: rgba(25, 43, 79, .29); }
.keep-diagnostics-card .keep-connection-list strong { text-align: left; }
.keep-link-grid a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px; border: 1px solid rgba(131, 159, 210, .23); border-radius: 10px; background: rgba(29, 46, 84, .34); color: #dce9fb; font-size: 11px; font-weight: 720; }
.keep-link-grid a:hover { border-color: rgba(103, 170, 255, .49); background: rgba(48, 78, 139, .38); }
.keep-link-grid ha-icon { --mdc-icon-size: 20px; color: #82baff; }
.keep-connection-list > div { display: flex; justify-content: space-between; gap: 9px; min-height: 36px; padding: 7px 0; border-bottom: 1px solid rgba(133, 160, 211, .16); color: var(--k-muted); font-size: 11px; }
.keep-connection-list strong { color: #e5eeff; font-weight: 720; text-align: right; overflow-wrap: anywhere; }
.keep-toast { position: fixed; z-index: 45; right: 18px; bottom: 19px; max-width: min(360px, calc(100vw - 36px)); padding: 11px 15px; border: 1px solid rgba(127, 168, 232, .45); border-radius: 11px; background: #1b2b4b; color: #e4efff; box-shadow: 0 12px 36px rgba(0, 0, 0, .35); font-size: 12px; }
.keep-toast.good { border-color: rgba(67, 220, 166, .55); }
.keep-toast.warn { border-color: rgba(255, 173, 98, .55); }
.keep-toast.bad { border-color: rgba(255, 101, 121, .55); }
.keep-dialog { width: min(440px, calc(100vw - 28px)); padding: 23px; border: 1px solid rgba(137, 172, 234, .49); border-radius: 17px; background: #17243e; color: var(--k-ink); box-shadow: 0 25px 75px rgba(0, 0, 0, .6); }
.keep-dialog::backdrop { background: rgba(3, 8, 23, .76); backdrop-filter: blur(4px); }
.keep-dialog h2 { margin: 0; font-size: 21px; }
.keep-dialog p { color: var(--k-muted); font-size: 12px; }
.keep-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.keep-more { position: fixed; z-index: 38; right: 9px; bottom: calc(80px + env(safe-area-inset-bottom)); display: grid; gap: 4px; width: min(270px, calc(100vw - 18px)); padding: 8px; border: 1px solid rgba(145, 167, 219, .39); border-radius: 13px; background: #17243e; box-shadow: 0 15px 45px rgba(0, 0, 0, .42); }
.keep-more .keep-nav-link { display: flex; align-items: center; gap: 10px; min-height: 45px; padding: 8px 10px; border-radius: 8px; color: #d2e1f9; font-size: 12px; font-weight: 720; }
.keep-more .keep-nav-link:hover, .keep-more .keep-nav-link.active { background: rgba(76, 119, 207, .24); }

@media (min-width: 1431px) {
  .keep-home-grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, .9fr); }
  .keep-spaces-grid, .keep-comfort-grid, .keep-energy-grid, .keep-system-grid { gap: 16px; }
}
@media (max-width: 1430px) {
  .keep-home-energy { gap: 15px; }
  .keep-flow-stack { gap: 6px; }
  .keep-flow-stack > div { padding: 8px; }
}
@media (max-width: 1180px) {
  .keep-side-label, .keep-side-foot { display: none; }
  .keep-nav-link ha-icon { --mdc-icon-size: 21px; }
  .keep-home-grid { grid-template-columns: 1fr; }
  .keep-home-energy-card, .keep-home-comfort-card { min-height: 218px; }
  .keep-home-energy .keep-battery-disc { width: 150px; }
  .keep-home-energy .keep-flow-stack > div { min-height: 104px; }
  .keep-spaces-grid, .keep-comfort-grid, .keep-energy-grid, .keep-system-grid { gap: 11px; }
  .keep-diagnostics-card .keep-connection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-speaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .keep-spaces-grid, .keep-comfort-grid, .keep-energy-grid, .keep-system-grid { grid-template-columns: 1fr; }
  .keep-action-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-home-energy-card { grid-column: 1 / -1; }
  .keep-home-comfort-card { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .keep-main { height: 100vh; height: 100dvh; }
  .keep-top { flex: none; }
  .keep-top-title { gap: 6px; font-size: 9px; letter-spacing: .03em; }
  .keep-top-title strong { font-size: 10px; }
  .keep-top-mark { width: 23px; height: 23px; font-size: 15px; }
  .keep-top-right { gap: 7px; }
  .keep-top-right time { display: none; }
  .keep-page { padding-bottom: calc(87px + env(safe-area-inset-bottom)); }
  .keep-heading { min-height: 0; margin-bottom: 14px; padding-right: 54px; }
  .keep-heading h1 { font-size: clamp(27px, 7.5vw, 34px); }
  .keep-heading p { font-size: 11px; }
  .keep-heading-home { min-height: 0; }
  .keep-heading-signal { right: 0; top: 6px; width: 46px; height: 46px; font-size: 19px; }
  .keep-action-strip { gap: 7px; margin-bottom: 11px; }
  .keep-action-strip .k-btn { min-height: 50px; padding: 8px 10px; font-size: 11px; }
  .keep-action-strip .k-btn ha-icon { --mdc-icon-size: 19px; }
  .keep-home-grid { grid-template-columns: 1fr; gap: 10px; }
  .keep-home-energy-card, .keep-home-comfort-card { grid-column: auto; min-height: 0; }
  .keep-home-energy { gap: 10px; }
  .keep-home-energy .keep-battery-disc { width: 117px; }
  .keep-battery-disc::after { inset: 7px; }
  .keep-battery-disc span { font-size: 8px; }
  .keep-battery-disc strong { font-size: 36px; }
  .keep-battery-disc small { max-width: 86px; font-size: 9px; }
  .keep-flow-stack { grid-template-columns: 1fr; gap: 4px; }
  .keep-home-energy .keep-flow-stack > div { min-height: 43px; padding: 5px 8px; }
  .keep-flow-stack > div b { font-size: 15px; }
  .keep-flow-stack > div span { font-size: 9px; }
  .keep-flow-stack .k-meter { height: 4px; }
  .keep-home-comfort { min-height: 93px; gap: 13px; }
  .keep-climate-symbol { width: 59px; height: 59px; border-radius: 14px; }
  .keep-climate-symbol ha-icon { --mdc-icon-size: 29px; }
  .keep-home-comfort strong { font-size: 25px; }
  .keep-status-pair { gap: 6px; }
  .keep-status-pair > span { padding: 7px 8px; font-size: 8px; }
  .keep-status-pair strong { font-size: 10px; }
  .keep-battery-disc.large { width: 136px; }
  .keep-battery-disc.large strong { font-size: 42px; }
  .keep-energy-battery { gap: 12px; }
  .keep-battery-action svg { width: min(96px, 100%); }
  .keep-battery-action strong { font-size: 22px; }
  .keep-battery-action span { font-size: 10px; }
  .keep-energy-flows { gap: 5px; }
  .keep-energy-flows > div { min-height: 111px; padding: 8px; }
  .keep-energy-flows strong { font-size: 15px; }
  .keep-energy-flows > div > span:nth-child(2) { font-size: 9px; }
  .keep-energy-flows small { font-size: 9px; }
  .keep-today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-today-grid .k-metric { min-height: 78px; }
  .keep-today-grid .k-metric strong { font-size: 24px; }
  .keep-grid-donut { width: 82px; height: 82px; }
  .keep-grid-donut::after { inset: 10px; }
  .keep-day-grid-pair { gap: 8px; }
  .keep-day-grid-values { gap: 5px; }
  .keep-day-grid-values .k-metric { min-height: 82px; padding: 7px; }
  .keep-day-grid-values .k-metric strong { font-size: 22px; }
  .keep-sky-next { margin-left: 0; }
  .keep-energy-overview-chart .k-history__svg { min-width: 470px; }
  .keep-climate-readout > div { padding: 9px 7px; }
  .keep-climate-readout strong { font-size: 15px; }
  .keep-schedule { grid-template-columns: 1fr; }
  .keep-music-hero { flex-wrap: wrap; gap: 10px; min-height: 0; }
  .keep-music-hero .keep-record-icon { width: 52px; height: 52px; }
  .keep-music-hero h2 { font-size: 20px; }
  .keep-music-hero > .k-btn { width: 100%; }
  .keep-speaker-grid { grid-template-columns: 1fr; }
  .keep-link-grid { grid-template-columns: 1fr; }
  .keep-diagnostics-card .keep-connection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-toast { right: 9px; bottom: calc(83px + env(safe-area-inset-bottom)); }
  .keep-bottom { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .keep-bottom .keep-nav-link ha-icon { --mdc-icon-size: 20px; }
}
@media (max-width: 360px) {
  .keep-battery-disc.large { width: 116px; }
  .keep-energy-battery { gap: 7px; }
  .keep-battery-action svg { width: 76px; }
  .keep-battery-action strong { font-size: 18px; }
  .keep-energy-flows strong { font-size: 13px; }
  .keep-preset-row .k-btn { font-size: 10px; }
}
/* A 4K ultrawide is a command deck, not a stretched phone layout. The ambient
   wings frame a readable 2800px canvas; information cards gain columns. */
@media (min-width: 3200px) {
  .keep-top { padding-inline: max(38px, calc((100% - 2800px) / 2)); }
  .keep-page { padding-top: 34px; }
  .keep-page-inner { max-width: 2800px; margin-inline: auto; }
  .keep-heading { min-height: 111px; margin-bottom: 21px; }
  .keep-heading h1 { font-size: 47px; }
  .keep-heading p { font-size: 14px; }
  .k-eyebrow { font-size: 11px; }
  .k-card { padding: 24px; }
  .k-card-head h2 { font-size: 19px; }
  .k-link { font-size: 14px; }
  .keep-context { font-size: 13px; }
  .keep-status-pair > span { font-size: 11px; }
  .keep-status-pair strong { font-size: 13px; }
  .keep-room-list strong { font-size: 14px; }
  .keep-room-list small { font-size: 12px; }
  .keep-home-comfort span { font-size: 14px; }
  .keep-home-comfort small { font-size: 12px; }
  .k-metric > span { font-size: 12px; }
  .keep-connection-list > div { font-size: 13px; }
  .keep-page[data-page="home"] .keep-page-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; align-items: center; }
  .keep-page[data-page="home"] .keep-heading { grid-column: 1; min-height: 0; margin: 0; }
  .keep-page[data-page="home"] .keep-action-strip { grid-column: 2; margin: 0; gap: 9px; }
  .keep-page[data-page="home"] .keep-home-grid { grid-column: 1 / -1; }
  .keep-action-strip .k-btn { min-height: 58px; font-size: 13px; }
  .keep-home-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .9fr); gap: 18px; }
  .keep-home-energy .keep-battery-disc { width: 188px; }
  .keep-flow-stack > div { min-height: 110px; padding: 14px; }
  .keep-flow-stack b { font-size: 25px; }
  .keep-flow-stack span { font-size: 11px; }
  .keep-spaces-grid, .keep-comfort-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .keep-energy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .keep-today-card { grid-column: span 2; }
  .keep-energy-graph-card, .keep-history-card { grid-column: 1 / -1; }
  .keep-energy-flows > div { min-height: 163px; }
  .keep-energy-flows strong { font-size: 24px; }
  .keep-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .keep-diagnostics-card { grid-column: auto; }
  .keep-diagnostics-card .keep-connection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-speaker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .keep-ambient span { animation: none; }
  .k-meter u { transition: none; }
  .keep-battery-disc.low { animation: none; }
  .keep-battery-action svg { animation: none !important; }
}