/* Reserve scrollbar space so centered layout never jumps when scroll appears/locks */
    html {
      /* Desktop: avoid layout jump when scrollbar appears.
         Mobile: stable gutter can leave a weird empty strip / “glitch edge”. */
      scrollbar-gutter: stable;
    }
    @media (hover: none) and (pointer: coarse) {
      html {
        scrollbar-gutter: auto;
      }
    }

    /*
      Warm home: paper walls, cream cards, teal actions.
      Tile color accents stay. No cool mint fog on the page.
    */
    :root {
      --bg0: #F3EFE8;
      --bg1: #FFFCFA;
      --bg2: #F7F3ED;
      --bg3: #EBE4DA;
      --border: #E0D8CE;
      --text: #1C1814;
      --muted: #6B6258;
      --faint: #9A9086;
      --accent: #0F766E;
      --accent-deep: #0B5F58;
      --accent2: #14B8A6;
      --accent-soft: #E6F3F0;
      --good: #0F766E;
      --good-bg: #E6F3F0;
      --good-border: #B5D4CE;
      --good-text: #0B5F58;
      --warn-bg: #FFF6E8;
      --warn-border: #EED6A8;
      --warn-text: #8A5A12;
      --info-bg: #EEF4F6;
      --info-border: #C5D5DC;
      --info-text: #0E4A5C;
      --shadow: 0 1px 2px rgba(40, 28, 16, 0.04), 0 10px 28px rgba(40, 28, 16, 0.06);
      --shadow-sm: 0 1px 2px rgba(40, 28, 16, 0.04), 0 4px 14px rgba(40, 28, 16, 0.05);
      --radius: 16px;
      --radius-sm: 12px;
      /*
        Short UI chrome (labels, units, cost / ¢ / kWh chips) must stay on ONE line.
        Prefer shrinking type over wrapping a symbol alone onto the next line.
      */
      --ui-fit: clamp(10px, 2.85vw, 13px);
      /* Fixed teal wash (painted on body::before so it stays while you scroll) */
      --page-bg:
        radial-gradient(
          ellipse 95% 70% at 50% 0%,
          rgba(20, 184, 166, 0.34) 0%,
          rgba(15, 118, 110, 0.14) 42%,
          transparent 72%
        ),
        linear-gradient(180deg, #F6F2EC 0%, #F3EFE8 48%, #EFE9E1 100%);
    }

    [data-theme="dark"] {
      --bg0: #0B0F12;
      --bg1: #13181C;
      --bg2: #1A2026;
      --bg3: #242C34;
      --border: #2C3640;
      --text: #F0F4F7;
      --muted: #9AA8B4;
      --faint: #6D7B88;
      --accent: #2DD4BF;
      --accent-deep: #14B8A6;
      --accent2: #5EEAD4;
      --accent-soft: rgba(45, 212, 191, 0.1);
      --good-bg: rgba(45, 212, 191, 0.09);
      --good-border: rgba(45, 212, 191, 0.24);
      --good-text: #99F6E4;
      --warn-bg: rgba(240, 180, 80, 0.1);
      --warn-border: rgba(240, 180, 80, 0.28);
      --warn-text: #F0D08A;
      --info-bg: rgba(56, 189, 248, 0.08);
      --info-border: rgba(56, 189, 248, 0.22);
      --info-text: #BAE6FD;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.42);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
      --page-bg:
        radial-gradient(
          ellipse 72% 70% at 50% 12%,
          rgba(45, 212, 191, 0.16) 0%,
          rgba(20, 184, 166, 0.08) 40%,
          transparent 68%
        ),
        linear-gradient(180deg, #0B0F12 0%, #0C1014 50%, #0E1318 100%);
    }

    /* Water mode: clearly blue vs power teal (light mode must read at a glance) */
    body.utility-water {
      --accent: #0369A1;
      --accent-deep: #075985;
      --accent2: #0EA5E9;
      --accent-soft: #E0F2FE;
      --good: #0369A1;
      --good-bg: #E0F2FE;
      --good-border: #7DD3FC;
      --good-text: #075985;
      --info-bg: #E0F2FE;
      --info-border: #7DD3FC;
      --info-text: #075985;
      --shadow: 0 1px 2px rgba(40, 28, 16, 0.04), 0 10px 28px rgba(3, 105, 161, 0.1);
      --page-bg:
        radial-gradient(
          ellipse 95% 70% at 50% 0%,
          rgba(14, 165, 233, 0.32) 0%,
          rgba(3, 105, 161, 0.14) 42%,
          transparent 72%
        ),
        linear-gradient(180deg, #EEF6FA 0%, #F0F4F6 48%, #E8EEF1 100%);
    }
    html[data-theme="dark"] body.utility-water {
      --accent: #22D3EE;
      --accent-deep: #06B6D4;
      --accent2: #67E8F9;
      --accent-soft: rgba(34, 211, 238, 0.1);
      --good-bg: rgba(34, 211, 238, 0.09);
      --good-border: rgba(34, 211, 238, 0.24);
      --good-text: #A5F3FC;
      --info-bg: rgba(34, 211, 238, 0.08);
      --info-border: rgba(34, 211, 238, 0.22);
      --info-text: #A5F3FC;
      --page-bg:
        radial-gradient(
          ellipse 72% 70% at 50% 12%,
          rgba(34, 211, 238, 0.16) 0%,
          rgba(14, 116, 144, 0.08) 40%,
          transparent 68%
        ),
        linear-gradient(180deg, #0B0F12 0%, #0C1014 50%, #0E1318 100%);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html {
      background-color: var(--bg0);
      color-scheme: light;
    }
    html[data-theme="dark"] {
      color-scheme: dark;
      background-color: #0B0F12;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      /* Transparent so the fixed teal wash (body::before) shows through.
         Do NOT put background-attachment:fixed on body — that glitches on mobile. */
      background-color: transparent;
      background-image: none;
      color: var(--text);
      min-height: 100vh;
      min-height: 100dvh;
      /* Clear fixed bottom tray only — was 72–84px and looked like a dead band */
      padding-bottom: 20px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      /* Reduce bounce/repaint thrash over fixed chrome */
      overscroll-behavior-y: none;
      position: relative;
      isolation: isolate;
    }
    body.has-bottom-nav {
      /* Clear the floating tray fully — too tight and it covers About / version */
      padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
    /*
      Teal fade that stays put while the page scrolls (follows the viewport).
      position:fixed layer — NOT background-attachment:fixed (mobile glitch).
    */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: var(--bg0);
      background-image: var(--page-bg);
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100% 100%;
      /* Keep wash stable while content scrolls */
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    /* App content above the fixed wash */
    body > * {
      position: relative;
      z-index: 1;
    }
    html[data-theme="dark"] body {
      background-color: transparent;
    }
    html[data-theme="dark"] body::before {
      background-color: #0B0F12;
    }

    /* Clear keyboard / focus rings */
    :focus { outline: none; }
    :focus-visible {
      outline: 2px solid var(--accent2);
      outline-offset: 2px;
    }
    button:focus-visible,
    .filter-chip:focus-visible,
    .appliance-card:focus-visible,
    .setup-rate:focus-visible,
    .select-trigger:focus-visible,
    .select-option:focus-visible,
    .nav-btn:focus-visible,
    .back:focus-visible,
    .home-link:focus-visible,
    .vs-suggest button:focus-visible,
    .switcher-card:focus-visible,
    .switcher-close:focus-visible,
    .home-item-remove:focus-visible,
    .home-total-chip:focus-visible {
      outline: 2px solid var(--accent2);
      outline-offset: 2px;
    }

    /*
      Shared “you tapped it” feedback — same scale + teal ring used on cards.
      Covers icons, dropdown rows, nav, chips, summaries, etc.
    */
    .back,
    .home-link,
    .brand,
    .icon-btn,
    .theme-seg,
    .nav-btn,
    .filter-chip,
    .chip,
    .recent-chip,
    .recent-label-btn,
    .recent-menu-item,
    .appliance-card,
    .result-emoji-badge,
    .switcher-card,
    .switcher-close,
    .select-trigger,
    .select-option,
    .setup-rate,
    .rate-banner,
    .home-total-chip,
    .home-item,
    .home-item-remove,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-try,
    .btn-reset,
    .btn-x,
    .scenario-btn,
    .vs-suggest button,
    .vote-btn,
    .checklist-empty .cl-item,
    .empty-quick button,
    .bill-slice button,
    .home-saved-dismiss,
    .home-insight-link,
    .link-btn,
    .app-footer button,
    details.scenario-details > summary,
    details.adjust-details > summary,
    details.about-details > summary,
    details.vs-details > summary,
    details.tip-more > summary {
      transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease,
        color 0.12s ease,
        opacity 0.12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    /* Press: slight shrink + teal ring (matches appliance cards) */
    .back:active,
    .home-link:active,
    .brand:active,
    .icon-btn:active,
    .theme-seg:active,
    .nav-btn:active,
    .filter-chip:active,
    .chip:active,
    .recent-chip:active,
    .recent-label-btn:active,
    .recent-menu-item:active,
    .result-emoji-badge:active,
    .switcher-card:active,
    .switcher-close:active,
    .select-trigger:active,
    .select-option:active,
    .setup-rate:active,
    .rate-banner:active,
    .home-total-chip:active,
    .home-item:active,
    .home-item-remove:active,
    .btn-primary:active,
    .btn-secondary:active,
    .btn-danger:active,
    .btn-try:active,
    .btn-reset:active,
    .btn-x:active,
    .scenario-btn:active,
    .vs-suggest button:active,
    .vote-btn:active,
    .checklist-empty .cl-item:active,
    .empty-quick button:active,
    .bill-slice button:active,
    .home-saved-dismiss:active,
    .home-insight-link:active,
    .link-btn:active,
    .app-footer button:active,
    details.scenario-details > summary:active,
    details.adjust-details > summary:active,
    details.about-details > summary:active,
    details.vs-details > summary:active,
    details.tip-more > summary:active {
      transform: none;
      background: var(--accent-soft);
    }
    .result-accordions > details:active {
      border-color: rgba(20, 184, 166, 0.45);
      box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
    }
    [data-theme="dark"] .back:active,
    [data-theme="dark"] .home-link:active,
    [data-theme="dark"] .brand:active,
    [data-theme="dark"] .icon-btn:active,
    [data-theme="dark"] .theme-seg:active,
    [data-theme="dark"] .nav-btn:active,
    [data-theme="dark"] .filter-chip:active,
    [data-theme="dark"] .chip:active,
    [data-theme="dark"] .recent-chip:active,
    [data-theme="dark"] .result-emoji-badge:active,
    [data-theme="dark"] .switcher-card:active,
    [data-theme="dark"] .switcher-close:active,
    [data-theme="dark"] .select-trigger:active,
    [data-theme="dark"] .select-option:active,
    [data-theme="dark"] .setup-rate:active,
    [data-theme="dark"] .rate-banner:active,
    [data-theme="dark"] .home-total-chip:active,
    [data-theme="dark"] .home-item:active,
    [data-theme="dark"] .home-item-remove:active,
    [data-theme="dark"] .btn-primary:active,
    [data-theme="dark"] .btn-secondary:active,
    [data-theme="dark"] .btn-danger:active,
    [data-theme="dark"] .btn-try:active,
    [data-theme="dark"] .btn-reset:active,
    [data-theme="dark"] .btn-x:active,
    [data-theme="dark"] .scenario-btn:active,
    [data-theme="dark"] .vs-suggest button:active,
    [data-theme="dark"] .vote-btn:active,
    [data-theme="dark"] .checklist-empty .cl-item:active,
    [data-theme="dark"] .empty-quick button:active,
    [data-theme="dark"] .bill-slice button:active,
    [data-theme="dark"] .home-saved-dismiss:active,
    [data-theme="dark"] .home-insight-link:active,
    [data-theme="dark"] .link-btn:active,
    [data-theme="dark"] .app-footer button:active,
    [data-theme="dark"] details.scenario-details > summary:active,
    [data-theme="dark"] details.adjust-details > summary:active,
    [data-theme="dark"] details.about-details > summary:active,
    [data-theme="dark"] details.vs-details > summary:active,
    [data-theme="dark"] details.tip-more > summary:active {
      background: rgba(45, 212, 191, 0.1);
      border-color: transparent;
      box-shadow: none;
    }
    [data-theme="dark"] .result-accordions > details:active {
      border-color: rgba(45, 212, 191, 0.4);
      box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.2);
    }

    /* Keep selected / filled states readable while pressed */
    .select-option.selected:active,
    .filter-chip.active:active,
    .nav-btn.active:active,
    .scenario-btn.active:active,
    .vs-suggest button.active:active,
    .btn-primary:active {
      box-shadow:
        0 0 0 2px rgba(20, 184, 166, 0.28),
        0 4px 12px rgba(15, 118, 110, 0.22);
    }
    [data-theme="dark"] .select-option.selected:active,
    [data-theme="dark"] .filter-chip.active:active,
    [data-theme="dark"] .nav-btn.active:active,
    [data-theme="dark"] .scenario-btn.active:active,
    [data-theme="dark"] .vs-suggest button.active:active,
    [data-theme="dark"] .btn-primary:active {
      box-shadow:
        0 0 0 2px rgba(45, 212, 191, 0.32),
        0 4px 12px rgba(0, 0, 0, 0.28);
    }

    /* Borderless text controls still get a soft press pad */
    .home-link:active,
    .home-item-remove:active,
    .home-saved-dismiss:active,
    .home-insight-link:active,
    .link-btn:active,
    .app-footer button:active,
    .icon-btn:active {
      background: rgba(15, 118, 110, 0.1);
      border-color: transparent;
    }
    [data-theme="dark"] .home-link:active,
    [data-theme="dark"] .home-item-remove:active,
    [data-theme="dark"] .home-saved-dismiss:active,
    [data-theme="dark"] .home-insight-link:active,
    [data-theme="dark"] .link-btn:active,
    [data-theme="dark"] .app-footer button:active,
    [data-theme="dark"] .icon-btn:active {
      background: rgba(45, 212, 191, 0.14);
      border-color: transparent;
    }

    .screen { display: none; padding: 12px 16px 12px; max-width: 440px; margin: 0 auto; }
    .screen.active { display: block; }
    .screen.active > .app-footer {
      margin-top: 10px;
      margin-bottom: 0;
    }

    .logo-mark {
      position: relative;
      display: inline-flex;
      width: 52px;
      height: 52px;
      border-radius: 15px;
      /* Solid brand fill if logo image is slow/missing (never blank white) */
      background: linear-gradient(145deg, #1D4ED8 0%, #14B8A6 55%, #0F766E 100%);
      box-shadow:
        0 0 0 1px rgba(15, 118, 110, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 8px 20px rgba(15, 118, 110, 0.3),
        0 2px 8px rgba(14, 116, 144, 0.14);
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    [data-theme="dark"] .logo-mark {
      box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 8px 20px rgba(0, 0, 0, 0.45);
    }
    .logo-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      border-radius: inherit;
    }
    .logo-mark svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .logo-mark.lg {
      width: 64px;
      height: 64px;
      border-radius: 18px;
      box-shadow:
        0 0 0 1px rgba(15, 118, 110, 0.14),
        0 12px 30px rgba(15, 118, 110, 0.28),
        0 6px 18px rgba(3, 105, 161, 0.18);
    }

    .logo-word {
      font-size: 1.48rem;
      font-weight: 820;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1;
    }
    .logo-word .tt {
      background: linear-gradient(180deg, #14B8A6 0%, #0D9488 45%, #0F766E 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    [data-theme="dark"] .logo-word .tt {
      background: linear-gradient(180deg, #99F6E4 0%, #5EEAD4 50%, #2DD4BF 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      background: none;
      border: none;
      padding: 2px 0;
      cursor: pointer;
      font: inherit;
      color: inherit;
      text-align: left;
      min-width: 0;
    }
    .brand-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1px;
      min-width: 0;
    }
    .brand-tag {
      font-size: 0.68rem;
      font-weight: 550;
      letter-spacing: 0.01em;
      color: var(--muted);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    [data-theme="dark"] .brand-tag {
      color: #C5D9D2;
    }
    /* brand press uses shared :active ring above */

    /* First impression header — room for a bigger brand lockup */
    .topbar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding: 10px 12px;
      border-radius: 16px;
      overflow: hidden;
      background: #FFFCFA;
      border: 1px solid rgba(60, 40, 20, 0.08);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    }
    .topbar::before {
      content: none;
      display: none;
    }
    .topbar > * {
      position: relative;
      z-index: 1;
    }
    [data-theme="dark"] .topbar {
      background: #171F1D;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }
    [data-theme="dark"] .topbar::before {
      background: linear-gradient(90deg, #0D9488 0%, #14B8A6 50%, #2DD4BF 100%);
    }
    /* Water topbar — same solid card, blue strip */
    html:not([data-theme="dark"]) body.utility-water .topbar {
      background: #FFFCFA;
      border: 1px solid rgba(60, 40, 20, 0.08);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    }
    [data-theme="dark"] body.utility-water .topbar {
      background: #171F1D;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }
    .topbar-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
      justify-content: flex-end;
    }

    .icon-btn {
      background: linear-gradient(165deg, #fff, var(--accent-soft));
      border: 1px solid var(--good-border);
      color: var(--accent-deep);
      width: 40px;
      height: 40px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.1);
      transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, transform 0.12s ease;
    }
    .icon-btn:hover {
      background: color-mix(in srgb, var(--accent) 14%, #FFFFFF);
      border-color: color-mix(in srgb, var(--accent) 36%, transparent);
      color: var(--accent-deep);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 12px rgba(15, 118, 110, 0.16);
    }
    [data-theme="dark"] .icon-btn {
      background: rgba(45, 212, 191, 0.1);
      color: var(--accent2);
      border-color: rgba(45, 212, 191, 0.22);
    }
    [data-theme="dark"] .icon-btn:hover {
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.42);
      color: #99F6E4;
      box-shadow: 0 3px 12px rgba(45, 212, 191, 0.12);
    }
    .icon-btn:active { color: var(--accent); }
    .settings-gear {
      font-size: 17px;
      line-height: 1;
    }

    /* Action chips in the header — must read on cream/white (not ghost-white on white) */
    .topbar .icon-btn,
    .topbar .theme-chip {
      height: 38px;
      border-radius: 12px;
      font-size: 16px;
      color: #0B5F58;
      background: #FFFFFF;
      border: 1.5px solid color-mix(in srgb, var(--accent, #0F766E) 28%, rgba(60, 40, 20, 0.1));
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 6px rgba(15, 118, 110, 0.1);
    }
    .topbar .icon-btn {
      width: 38px;
    }
    .topbar .theme-chip {
      width: auto;
      padding: 0 11px 0 8px;
      gap: 5px;
    }
    .topbar .icon-btn:hover,
    .topbar .theme-chip:hover {
      background: color-mix(in srgb, var(--accent) 18%, #FFFFFF);
      border-color: color-mix(in srgb, var(--accent) 48%, transparent);
      color: #0A4F49;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 3px 12px rgba(15, 118, 110, 0.18);
    }
    .topbar .settings-gear {
      font-size: 0;
      color: #0B5F58;
      padding: 0;
    }
    .topbar .settings-gear svg {
      display: block;
      width: 18px;
      height: 18px;
    }
    [data-theme="dark"] .topbar .settings-gear {
      color: #5EEAD4;
    }
    [data-theme="dark"] .topbar .icon-btn,
    [data-theme="dark"] .topbar .theme-chip {
      background: rgba(0, 0, 0, 0.22);
      border-color: rgba(45, 212, 191, 0.2);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    }
    [data-theme="dark"] .topbar .icon-btn:hover,
    [data-theme="dark"] .topbar .theme-chip:hover {
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.42);
      color: #99F6E4;
      box-shadow: 0 3px 12px rgba(45, 212, 191, 0.12);
    }
    .theme-chip {
      appearance: none;
      -webkit-appearance: none;
      background: linear-gradient(165deg, #fff, var(--accent-soft));
      border: 1px solid var(--good-border);
      color: var(--accent-deep);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      flex-shrink: 0;
      line-height: 1;
      transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, transform 0.12s ease;
    }
    .theme-chip:hover {
      background: color-mix(in srgb, var(--accent) 14%, #FFFFFF);
      border-color: color-mix(in srgb, var(--accent) 36%, transparent);
      color: var(--accent-deep);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 12px rgba(15, 118, 110, 0.16);
    }
    [data-theme="dark"] .theme-chip {
      background: rgba(45, 212, 191, 0.1);
      color: var(--accent2);
      border-color: rgba(45, 212, 191, 0.22);
    }
    [data-theme="dark"] .theme-chip:hover {
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.42);
      color: #99F6E4;
      box-shadow: 0 3px 12px rgba(45, 212, 191, 0.12);
    }
    .theme-chip .theme-chip-ico {
      display: inline-flex;
      line-height: 0;
      color: inherit;
    }
    .theme-chip .theme-chip-ico svg {
      display: block;
    }
    .theme-chip .theme-chip-word {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      clip: auto;
      overflow: visible;
      font-size: 12.5px;
      font-weight: 750;
      letter-spacing: -0.02em;
      line-height: 1;
      white-space: nowrap;
    }
    .theme-chip .theme-chip-sun[hidden],
    .theme-chip .theme-chip-moon[hidden] {
      display: none !important;
    }

    /* Segmented light | dark control — both always visible */
    .theme-toggle {
      display: inline-flex;
      align-items: stretch;
      height: 38px;
      padding: 3px;
      border-radius: 10px;
      border: 1.5px solid rgba(15, 118, 110, 0.2);
      background: #E8F0ED;
      box-shadow: inset 0 1px 2px rgba(15, 28, 26, 0.06);
      gap: 0;
      white-space: nowrap;
    }
    [data-theme="dark"] .theme-toggle {
      background: #0F1614;
      border-color: rgba(45, 212, 191, 0.28);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .theme-seg {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 0 10px;
      border-radius: 7px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      line-height: 1;
    }
    .theme-seg .theme-ico {
      font-size: 12px;
      line-height: 1;
      opacity: 0.85;
    }
    /* theme-seg press uses shared :active ring above */
    /* Light side */
    .theme-seg[data-theme-btn="light"] {
      color: var(--muted);
    }
    .theme-seg[data-theme-btn="light"][aria-pressed="true"] {
      background: #FFFFFF;
      color: var(--text);
      font-weight: 650;
      box-shadow: 0 1px 2px rgba(15, 28, 26, 0.08);
    }
    /* Dark side — quiet, not a heavy black block */
    .theme-seg[data-theme-btn="dark"] {
      background: transparent;
      color: var(--muted);
    }
    .theme-seg[data-theme-btn="dark"][aria-pressed="true"] {
      background: rgba(15, 28, 26, 0.14);
      color: var(--text);
      font-weight: 650;
      box-shadow: none;
    }
    [data-theme="dark"] .theme-seg[data-theme-btn="light"] {
      color: var(--muted);
      background: transparent;
    }
    [data-theme="dark"] .theme-seg[data-theme-btn="light"][aria-pressed="true"] {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
      box-shadow: none;
    }
    [data-theme="dark"] .theme-seg[data-theme-btn="dark"] {
      background: transparent;
      color: var(--muted);
    }
    [data-theme="dark"] .theme-seg[data-theme-btn="dark"][aria-pressed="true"] {
      background: rgba(45, 212, 191, 0.12);
      color: var(--text);
      box-shadow: none;
    }
    .theme-slash {
      width: 1px;
      align-self: stretch;
      margin: 5px 1px;
      background: rgba(15, 118, 110, 0.22);
      flex-shrink: 0;
    }
    [data-theme="dark"] .theme-slash {
      background: rgba(45, 212, 191, 0.22);
    }

    .back {
      background: linear-gradient(165deg, #F4FBFA, var(--accent-soft));
      border: 1px solid var(--good-border);
      color: var(--accent-deep);
      font-size: 14px;
      font-weight: 650;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 14px;
      margin-bottom: 16px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.1);
    }
    [data-theme="dark"] .back {
      background: rgba(45, 212, 191, 0.1);
      color: var(--accent2);
      border-color: rgba(45, 212, 191, 0.22);
    }

    /* Subtle back + home chrome (legacy; secondary screens use brand topbar + back) */
    .page-chrome {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .page-chrome .back {
      margin-bottom: 0;
    }
    /* Sub-pages: Whatt brand left, Back right (no settings / theme) */
    .topbar.topbar-sub .topbar-actions {
      gap: 0;
    }
    /* Match topbar chips — clear Back control, not a faint ghost */
    .topbar-back {
      appearance: none;
      -webkit-appearance: none;
      border: 1.5px solid rgba(15, 118, 110, 0.2);
      background: #FFFFFF;
      color: var(--accent-deep);
      font: inherit;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 12px;
      line-height: 1;
      white-space: nowrap;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(15, 118, 110, 0.1);
      transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, color 0.12s ease;
    }
    /* SVG chevron centers cleanly with the label (plain “←” sits off the baseline) */
    .topbar-back-arrow {
      display: block;
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      margin: 0;
    }
    .topbar-back-arrow svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .topbar-back:hover {
      background: color-mix(in srgb, var(--accent) 14%, #FFFFFF);
      border-color: color-mix(in srgb, var(--accent) 36%, transparent);
      color: var(--accent-deep);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 12px rgba(15, 118, 110, 0.16);
    }
    .topbar-back:active {
      transform: scale(0.98);
      background: color-mix(in srgb, var(--accent) 18%, #FFFFFF);
      border-color: color-mix(in srgb, var(--accent) 40%, transparent);
      color: var(--accent-deep);
    }
    [data-theme="dark"] .topbar-back {
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.22);
      color: var(--accent2);
      /* No white inset line — that read as a weird highlight above the control */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }
    [data-theme="dark"] .topbar-back:hover {
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.42);
      color: #99F6E4;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] .topbar-back:active {
      background: rgba(45, 212, 191, 0.24);
      border-color: rgba(45, 212, 191, 0.48);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }
    [data-theme="dark"] .topbar-back:focus,
    [data-theme="dark"] .topbar-back:focus-visible {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }
    /* Water + light only — clearer blue chrome */
    html:not([data-theme="dark"]) body.utility-water .topbar-back {
      background: #E0F2FE;
      border-color: rgba(3, 105, 161, 0.28);
      color: #075985;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(3, 105, 161, 0.12);
    }
    html:not([data-theme="dark"]) body.utility-water .topbar-back:hover {
      background: #BAE6FD;
      border-color: rgba(3, 105, 161, 0.4);
      color: #075985;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 12px rgba(3, 105, 161, 0.16);
    }
    html:not([data-theme="dark"]) body.utility-water .topbar-back:active {
      background: #7DD3FC;
      border-color: rgba(3, 105, 161, 0.45);
    }
    [data-theme="dark"] body.utility-water .topbar-back {
      background: rgba(34, 211, 238, 0.1);
      border-color: rgba(34, 211, 238, 0.22);
      color: #67E8F9;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }
    [data-theme="dark"] body.utility-water .topbar-back:hover {
      background: rgba(34, 211, 238, 0.18);
      border-color: rgba(34, 211, 238, 0.4);
      color: #A5F3FC;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] body.utility-water .topbar-back:active {
      background: rgba(34, 211, 238, 0.22);
      border-color: rgba(34, 211, 238, 0.48);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }
    .back:hover {
      background: color-mix(in srgb, var(--accent) 16%, #F4FBFA);
      border-color: color-mix(in srgb, var(--accent) 36%, transparent);
      color: var(--accent-deep);
    }
    [data-theme="dark"] .back:hover {
      background: rgba(45, 212, 191, 0.18);
      border-color: rgba(45, 212, 191, 0.4);
      color: #99F6E4;
    }
    .home-link {
      appearance: none;
      -webkit-appearance: none;
      border: 1.5px solid transparent;
      background: transparent;
      color: var(--faint);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border-radius: 999px;
      line-height: 1;
    }
    .home-link svg {
      width: 15px;
      height: 15px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    .home-link:hover {
      color: var(--muted);
      background: rgba(15, 28, 26, 0.04);
    }
    .home-link:hover svg,
    .home-link:active svg {
      opacity: 0.95;
    }
    [data-theme="dark"] .home-link:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--muted);
    }
    .home-link:focus-visible {
      outline: 2px solid var(--accent2);
      outline-offset: 2px;
    }

    /* —— Home hero: clearer white stage for rate (try — backup: index.pre-home-polish.html) —— */
    /* Home: tight under topbar (no reserved ad gap) */
    #select.screen.active > .topbar {
      margin-bottom: 8px;
    }
    .home-hero {
      position: relative;
      overflow: hidden;
      margin: 0 0 8px;
      padding: 12px;
      border-radius: 22px;
      border: 1.5px solid rgba(15, 118, 110, 0.16);
      background:
        radial-gradient(ellipse 85% 90% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 50%),
        #FFFFFF;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 10px 28px rgba(40, 28, 16, 0.1),
        0 2px 8px rgba(15, 118, 110, 0.06);
    }
    /* No teal strip on hero — strip is header-only (avoids double bars) */
    .home-hero::before,
    .home-hero::after {
      display: none !important;
      content: none !important;
    }
    [data-theme="dark"] .home-hero {
      border-color: rgba(255, 255, 255, 0.12);
      background: #171F1D;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
    }
    html:not([data-theme="dark"]) body.utility-water .home-hero {
      border-color: rgba(12, 95, 122, 0.14);
      background: #FFFFFF;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 6px 20px rgba(40, 28, 16, 0.08),
        0 2px 6px rgba(12, 95, 122, 0.04);
    }
    [data-theme="dark"] body.utility-water .home-hero {
      border-color: rgba(255, 255, 255, 0.12);
      background: #171F1D;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
    }

    .home-hero-deco { display: none !important; }
    .home-kicker { display: none !important; }
    .home-hero > * { position: relative; z-index: 1; }

    /* Visually hidden page title (a11y + i18n hook) */
    .home-hero-title.sr-only,
    .home-hero h1.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* First-run tip under rate only */
    .home-hero-lead {
      font-size: 0.82rem;
      color: #4F4740;
      line-height: 1.35;
      margin: 10px 2px 0;
      font-weight: 600;
      text-align: center;
    }
    [data-theme="dark"] .home-hero-lead {
      color: #B0C4BE;
    }
    .home-hero-lead[hidden] { display: none !important; }


    /* Support pill — footer only. Must beat .app-footer a (background:none). */
    .donate-nudge {
      margin: 8px 6px 4px;
      text-align: center;
    }
    .donate-nudge-footer {
      margin: 10px 8px 4px;
    }
    /* Rate row — primary control in the hero (soft teal wash so it reads first) */
    .home-hero .utility-toggle {
      margin-bottom: 10px;
      /* Track stays neutral gray-green so the active pill pops */
      border-color: rgba(60, 40, 20, 0.12);
      background: #E8EEEC;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 2px 8px rgba(40, 28, 16, 0.05);
    }
    [data-theme="dark"] .home-hero .utility-toggle {
      background: rgba(0, 0, 0, 0.35);
      border-color: rgba(255, 255, 255, 0.12);
    }
    /* Unified rate + water-source card */
    #homeWaterSource[hidden],
    .home-water-source[hidden] {
      display: none !important;
    }
    .home-rate-card {
      border-radius: 16px;
      border: 1.5px solid rgba(15, 118, 110, 0.26);
      background:
        radial-gradient(ellipse 90% 100% at 0% 0%, rgba(20, 184, 166, 0.18), transparent 52%),
        linear-gradient(155deg, #FFFFFF 0%, #E5F6F2 55%, #D4F0EA 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 16px rgba(15, 118, 110, 0.12);
      overflow: visible;
    }
    [data-theme="dark"] .home-rate-card {
      border-color: rgba(45, 212, 191, 0.28);
      background:
        radial-gradient(ellipse 80% 90% at 0% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
        linear-gradient(165deg, #1A2824 0%, #15201D 100%);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    }
    html:not([data-theme="dark"]) body.utility-water .home-rate-card {
      border-color: rgba(3, 105, 161, 0.32);
      background:
        radial-gradient(ellipse 90% 100% at 0% 0%, rgba(56, 189, 248, 0.22), transparent 52%),
        linear-gradient(155deg, #F0F9FF 0%, #E0F2FE 50%, #BAE6FD 100%);
    }
    .home-hero .rate-banner,
    .home-hero .rate-banner-home {
      margin: 0;
      padding: 14px 15px;
      border-radius: 16px;
      border: none;
      background: transparent;
      box-shadow: none;
      gap: 12px;
      position: relative;
      z-index: 2;
      pointer-events: auto;
      width: 100%;
      cursor: pointer;
    }
    .home-rate-card .home-water-source {
      margin: 0;
      padding: 10px 12px 12px;
      border: none;
      border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
      border-radius: 0 0 15px 15px;
      background: color-mix(in srgb, var(--bg1) 55%, transparent);
      box-shadow: none;
    }
    [data-theme="dark"] .home-rate-card .home-water-source {
      border-top-color: rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.15);
    }
    [data-theme="dark"] .home-hero .rate-banner,
    [data-theme="dark"] .home-hero .rate-banner-home {
      background:
        radial-gradient(ellipse 80% 90% at 0% 0%, rgba(45, 212, 191, 0.14), transparent 55%),
        linear-gradient(165deg, #1A2824 0%, #15201D 100%);
      border-color: rgba(45, 212, 191, 0.28);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    }
    .home-hero .rate-banner-ico {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      font-size: 21px;
      font-weight: 800;
      color: #fff;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 4px 12px rgba(15, 118, 110, 0.26);
    }
    .home-hero .rate-banner-value {
      font-size: 1.28rem;
      font-weight: 800;
      letter-spacing: -0.035em;
    }
    .home-hero .rate-banner-hint {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
      color: var(--accent-deep);
      white-space: nowrap;
      overflow: visible;
      text-overflow: unset;
    }
    [data-theme="dark"] .home-hero .rate-banner-hint {
      color: #5EEAD4;
    }
    .home-hero .rate-banner-action {
      padding: 11px 16px;
      font-size: 13.5px;
      font-weight: 750;
      border-radius: 12px;
      color: #fff;
      background: #0F766E;
      border: none;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 5px 14px rgba(15, 118, 110, 0.32);
    }
    [data-theme="dark"] .home-hero .rate-banner-action {
      background: #0D9488;
      color: #fff;
    }
    html:not([data-theme="dark"]) body.utility-water .home-hero .rate-banner,
    html:not([data-theme="dark"]) body.utility-water .home-hero .rate-banner-home {
      border-color: rgba(3, 105, 161, 0.32);
      background:
        radial-gradient(ellipse 90% 100% at 0% 0%, rgba(56, 189, 248, 0.28), transparent 52%),
        linear-gradient(155deg, #F0F9FF 0%, #E0F2FE 50%, #BAE6FD 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 18px rgba(3, 105, 161, 0.14);
    }
    [data-theme="dark"] body.utility-water .home-hero .rate-banner,
    [data-theme="dark"] body.utility-water .home-hero .rate-banner-home {
      background:
        radial-gradient(ellipse 80% 90% at 0% 0%, rgba(34, 211, 238, 0.12), transparent 55%),
        linear-gradient(165deg, #152024 0%, #121A1E 100%);
      border-color: rgba(34, 211, 238, 0.28);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    }
    body.utility-water .home-hero .rate-banner-action {
      background: #0369A1;
    }
    body.utility-water .home-hero .rate-banner-hint {
      color: #0369A1;
    }
    /* Primary buttons / location CTA shift blue in water mode */
    body.utility-water .btn-primary,
    body.utility-water #rate-finder .btn-primary,
    body.utility-water #rate-finder .btn-place-search,
    body.utility-water #rate-finder .rate-location-btn,
    body.utility-water #rate-finder .rate-location-btn.btn-secondary {
      background: #0369A1 !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 6px 14px rgba(3, 105, 161, 0.28) !important;
    }
    body.utility-water .btn-primary:hover,
    body.utility-water #rate-finder .rate-location-btn:hover {
      background: #075985 !important;
    }
    body.utility-water .btn-secondary {
      background: #E0F2FE;
      border-color: rgba(3, 105, 161, 0.22);
      color: var(--text);
    }
    body.utility-water .nav-btn.active {
      color: #075985;
      background: color-mix(in srgb, #0EA5E9 20%, #FFFFFF);
      border-color: color-mix(in srgb, #0369A1 28%, transparent);
    }
    .home-water-source {
      margin-top: 10px;
      padding: 12px 12px 10px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg1));
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    }
    .home-water-source-label {
      display: inline-block;
      appearance: none;
      -webkit-appearance: none;
      margin: 0 0 8px;
      padding: 6px 12px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--border));
      border-radius: 10px;
      background: var(--bg1);
      font: inherit;
      font-size: 12.5px;
      font-weight: 750;
      letter-spacing: 0.01em;
      color: var(--accent-deep);
      cursor: pointer;
      text-align: left;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 1px 4px color-mix(in srgb, var(--accent) 12%, transparent);
      -webkit-tap-highlight-color: transparent;
      transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
    }
    .home-water-source-label:hover,
    .home-water-source-label:focus-visible {
      background: color-mix(in srgb, var(--accent-soft) 45%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px color-mix(in srgb, var(--accent) 16%, transparent);
      outline: none;
    }
    .home-water-source.is-expanded .home-water-source-label {
      background: color-mix(in srgb, var(--accent) 12%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
      color: var(--accent-deep);
    }
    [data-theme="dark"] .home-water-source-label {
      color: #5EEAD4;
      background: #1A2421;
      border-color: rgba(45, 212, 191, 0.35);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    }
    [data-theme="dark"] .home-water-source-label:hover,
    [data-theme="dark"] .home-water-source-label:focus-visible {
      background: rgba(45, 212, 191, 0.14);
      border-color: rgba(45, 212, 191, 0.55);
    }
    [data-theme="dark"] .home-water-source.is-expanded .home-water-source-label {
      background: rgba(45, 212, 191, 0.16);
      border-color: rgba(45, 212, 191, 0.5);
    }
    /* Expanded: equal-size boxes in a 2-col grid (symmetrical) */
    .home-water-source.is-expanded .home-water-source-scroll {
      overflow: visible;
      padding: 10px 8px;
    }
    .home-water-source.is-expanded .home-water-source-scroll::before,
    .home-water-source.is-expanded .home-water-source-scroll::after {
      display: none !important;
      opacity: 0 !important;
    }
    .home-water-source.is-expanded .home-water-source-chips {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      overflow: visible;
      cursor: default;
      touch-action: manipulation;
      padding: 0 !important;
    }
    .home-water-source.is-expanded .home-water-source-chips.is-dragging {
      cursor: default;
    }
    .home-water-source.is-expanded .home-water-chip {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      min-height: 42px;
      margin: 0;
      padding: 10px 10px;
      border-radius: 12px;
      flex: none;
      white-space: normal;
      text-align: center;
      line-height: 1.25;
      box-sizing: border-box;
    }
    /* Detail card under chips — confirm what this source means */
    .home-water-source-detail {
      display: block;
      margin-top: 10px;
      padding: 12px 12px 11px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
      background: var(--bg1);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    }
    .home-water-source-detail[hidden] { display: none !important; }
    .home-water-source-detail-title {
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 6px;
      line-height: 1.25;
    }
    .home-water-source-detail-body {
      font-size: 0.82rem;
      font-weight: 550;
      line-height: 1.45;
      color: var(--muted);
    }
    .home-water-source-detail-body strong {
      color: var(--text);
      font-weight: 750;
    }
    .home-water-source-detail-hint {
      margin-top: 8px;
      font-size: 0.78rem;
      font-weight: 650;
      line-height: 1.4;
      color: var(--accent-deep);
    }
    [data-theme="dark"] .home-water-source-detail {
      background: #1A2421;
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: none;
    }
    [data-theme="dark"] .home-water-source-detail-hint {
      color: #5EEAD4;
    }
    .home-water-source-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .home-water-source-detail-actions .btn-secondary {
      flex: 1 1 auto;
      min-width: 8rem;
      font-size: 0.8rem;
      padding: 8px 12px;
    }
    /*
      Chip track: recessed tray (lighter than the water panel) so the row reads as
      its own strip. Edge washes match the outer panel — chips slide “under” it.
      No arrows.
    */
    .home-water-source-scroll {
      position: relative;
      margin: 0;
      padding: 8px 6px;
      border-radius: 14px;
      overflow: hidden;
      /* Clear contrast vs outer panel: solid paper tray, inset */
      background: var(--bg1);
      border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
      box-shadow:
        inset 0 1px 4px rgba(15, 60, 90, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65);
    }
    [data-theme="dark"] .home-water-source-scroll {
      background: rgba(0, 0, 0, 0.28);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    /* Stronger edge wash only when more chips are off that side */
    .home-water-source-scroll::before,
    .home-water-source-scroll::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 44px;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .home-water-source-scroll::before {
      left: 0;
      background: linear-gradient(
        to right,
        color-mix(in srgb, var(--accent-soft) 78%, var(--bg1)) 0%,
        color-mix(in srgb, var(--accent-soft) 55%, var(--bg1)) 38%,
        transparent 100%
      );
    }
    .home-water-source-scroll::after {
      right: 0;
      background: linear-gradient(
        to left,
        color-mix(in srgb, var(--accent-soft) 78%, var(--bg1)) 0%,
        color-mix(in srgb, var(--accent-soft) 55%, var(--bg1)) 38%,
        transparent 100%
      );
    }
    .home-water-source-scroll.has-more-left::before { opacity: 1; }
    .home-water-source-scroll.has-more-right::after { opacity: 1; }
    [data-theme="dark"] .home-water-source-scroll::before {
      background: linear-gradient(
        to right,
        rgba(11, 15, 18, 0.95) 0%,
        rgba(11, 15, 18, 0.45) 42%,
        transparent 100%
      );
    }
    [data-theme="dark"] .home-water-source-scroll::after {
      background: linear-gradient(
        to left,
        rgba(11, 15, 18, 0.95) 0%,
        rgba(11, 15, 18, 0.45) 42%,
        transparent 100%
      );
    }
    /* Full source list in one row — click-drag (PC) or swipe (touch) left↔right */
    .home-water-source-chips {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      width: 100%;
      max-width: 100%;
      min-width: 0; /* allow flex child to shrink so overflow-x actually scrolls */
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 0;
      padding-left: 2px;
      /* Leave room so the last visible chip can clip under the edge wash */
      padding-right: 10px;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
    }
    .home-water-source-scroll.has-more-left .home-water-source-chips {
      padding-left: 6px;
    }
    .home-water-source-scroll.has-more-right .home-water-source-chips {
      padding-right: 18px;
    }
    .home-water-source-chips.is-dragging {
      cursor: grabbing;
      scroll-behavior: auto;
      touch-action: none;
    }
    .home-water-source-chips::-webkit-scrollbar { display: none; }
    .home-water-chip {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid var(--border);
      background: var(--bg1);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
      line-height: 1.2;
      flex: 0 0 auto;
      white-space: nowrap;
      min-height: 36px;
    }
    .home-water-source-chips.is-dragging .home-water-chip {
      pointer-events: none;
      cursor: grabbing;
    }
    .home-water-chip[aria-pressed="true"] {
      background: color-mix(in srgb, var(--accent) 16%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
      color: var(--accent-deep);
      box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
    }
    /* Power source — quiet, collapsed. Not a second rate banner. */
    .home-power-source {
      margin: 6px 2px 0;
      padding: 0;
    }
    .home-power-source[hidden] { display: none !important; }
    .home-power-source-toggle {
      appearance: none;
      -webkit-appearance: none;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 6px 8px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      line-height: 1.3;
    }
    .home-power-source-toggle:active {
      background: rgba(15, 118, 110, 0.06);
    }
    [data-theme="dark"] .home-power-source-toggle:active {
      background: rgba(45, 212, 191, 0.08);
    }
    .home-power-source-toggle-label {
      flex: 0 0 auto;
      color: var(--faint);
      font-weight: 650;
    }
    .home-power-source-toggle-cur {
      flex: 1 1 auto;
      min-width: 0;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .home-power-source.is-nondefault .home-power-source-toggle-cur {
      color: var(--accent-deep);
    }
    [data-theme="dark"] .home-power-source.is-nondefault .home-power-source-toggle-cur {
      color: #5EEAD4;
    }
    .home-power-source-toggle-chev {
      flex: 0 0 auto;
      font-size: 1rem;
      font-weight: 700;
      color: var(--faint);
      transform: rotate(90deg);
      transition: transform 0.15s ease;
    }
    .home-power-source.is-open .home-power-source-toggle-chev {
      transform: rotate(-90deg);
    }
    .home-power-source-body {
      margin-top: 4px;
      padding: 10px 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--bg1);
    }
    .home-power-source-body[hidden] { display: none !important; }
    .home-power-source-note {
      margin: 0 0 8px;
      font-size: 0.75rem;
      font-weight: 550;
      line-height: 1.35;
      color: var(--faint);
    }
    .home-power-source-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .home-power-chip {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid var(--border);
      background: var(--bg2);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
      line-height: 1.2;
      min-height: 34px;
    }
    .home-power-chip[aria-pressed="true"] {
      background: color-mix(in srgb, var(--accent) 14%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
      color: var(--accent-deep);
    }
    .home-power-source-detail {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .home-power-source-detail[hidden] { display: none !important; }
    .home-power-source-detail-title {
      font-size: 0.88rem;
      font-weight: 780;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0 0 5px;
    }
    .home-power-source-detail-body {
      font-size: 0.8rem;
      font-weight: 550;
      line-height: 1.45;
      color: var(--muted);
    }
    .home-power-source-detail-body strong {
      color: var(--text);
      font-weight: 750;
    }
    .home-power-source-detail-hint {
      margin-top: 7px;
      font-size: 0.76rem;
      font-weight: 650;
      line-height: 1.4;
      color: var(--accent-deep);
    }
    [data-theme="dark"] .home-power-source-detail-hint { color: #5EEAD4; }
    .home-power-source-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .home-power-source-detail-actions .btn-secondary {
      flex: 1 1 auto;
      min-width: 8rem;
      font-size: 0.8rem;
      padding: 8px 12px;
    }
    .myhome-backup-hint {
      margin: 6px 4px 0;
      font-size: 0.75rem;
      font-weight: 550;
      line-height: 1.35;
      color: var(--muted);
    }
    .sw-update-banner {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: calc(78px + env(safe-area-inset-bottom, 0px) + 8px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #0F766E;
      color: #fff;
      box-shadow: 0 8px 28px rgba(15, 118, 110, 0.35);
      font-size: 0.9rem;
      font-weight: 700;
    }
    .sw-update-banner[hidden] { display: none !important; }
    .sw-update-banner button {
      appearance: none;
      border: none;
      border-radius: 999px;
      padding: 8px 14px;
      font: inherit;
      font-weight: 800;
      background: #fff;
      color: #0F766E;
      cursor: pointer;
      flex-shrink: 0;
    }
    .share-card-foot {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(15, 118, 110, 0.12);
      font-size: 0.72rem;
      font-weight: 650;
      color: var(--muted);
      text-align: center;
      line-height: 1.3;
    }
    .share-card-foot-site {
      font-weight: 800;
      color: var(--accent-deep);
      letter-spacing: -0.02em;
    }
    [data-theme="dark"] .share-card-foot-site { color: #5EEAD4; }
    [data-theme="dark"] .home-water-chip[aria-pressed="true"] {
      color: var(--accent2);
      background: rgba(34, 211, 238, 0.12);
      border-color: rgba(34, 211, 238, 0.35);
      box-shadow: none;
    }
    .time-hint {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }
    /* Cycling gear (AC, heat, fridge…): make the “not full power all day” note easy to catch */
    .time-hint.time-hint-cycle {
      margin-top: 10px;
      padding: 9px 11px;
      border-radius: 12px;
      font-size: 12.5px;
      font-weight: 550;
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 9%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    }
    [data-theme="dark"] .time-hint.time-hint-cycle {
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border-color: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.1));
      color: color-mix(in srgb, var(--text) 92%, var(--muted));
    }
    /* Gaming / desk setup (PC + monitors in one estimate) */
    .gaming-setup {
      padding-top: 2px;
    }
    .gaming-setup[hidden] { display: none !important; }
    .gaming-setup-head {
      font-size: 11.5px;
      font-weight: 750;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 8px;
    }
    .gaming-setup-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 8px;
    }
    .gaming-monitor-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gaming-monitor-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      align-items: center;
    }
    .gaming-monitor-idx {
      font-size: 12px;
      font-weight: 750;
      color: var(--muted);
      min-width: 1.5rem;
    }
    .gaming-monitor-row .select-wrap {
      min-width: 0;
    }
    .gaming-monitor-row select {
      width: 100%;
    }
    .gaming-monitor-remove {
      appearance: none;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      color: var(--muted);
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }
    [data-theme="dark"] .gaming-monitor-remove {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.12);
      color: #A8B5B0;
    }
    .gaming-add-monitor {
      appearance: none;
      margin-top: 8px;
      width: 100%;
      min-height: 40px;
      border-radius: 11px;
      border: 1px dashed rgba(15, 118, 110, 0.35);
      background: rgba(15, 118, 110, 0.05);
      color: #0F766E;
      font: inherit;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      padding: 8px 12px;
    }
    [data-theme="dark"] .gaming-add-monitor {
      border-color: rgba(45, 212, 191, 0.35);
      background: rgba(45, 212, 191, 0.08);
      color: #5EEAD4;
    }
    .gaming-add-monitor:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .gaming-setup-hint {
      margin: 8px 0 0;
      font-size: 12.5px;
      line-height: 1.4;
      font-weight: 550;
      color: var(--muted);
    }
    .gaming-pc-watts {
      margin: 0 0 12px;
    }
    .gaming-pc-watts .num-with-unit {
      margin-top: 4px;
      max-width: 12rem;
    }
    .gaming-pc-estimate {
      margin: 0 0 10px !important;
      font-weight: 650;
      color: var(--text);
    }
    .gaming-setup-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .gaming-setup-links[hidden] { display: none !important; }
    .gaming-setup-chip {
      appearance: none;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      color: var(--text);
      font: inherit;
      font-size: 12.5px;
      font-weight: 650;
      padding: 7px 11px;
      border-radius: 999px;
      cursor: pointer;
      line-height: 1.2;
    }
    [data-theme="dark"] .gaming-setup-chip {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.12);
      color: #E8F0ED;
    }
    .gaming-setup-chip:active {
      transform: scale(0.98);
    }

    .climate-block {
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
      border-radius: 16px;
      padding: 14px 12px 12px;
      background:
        radial-gradient(ellipse 90% 80% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
        color-mix(in srgb, var(--accent-soft) 28%, var(--bg1));
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .climate-title {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      margin: 0;
    }
    .climate-sub {
      font-size: 12.5px;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.4;
      margin: -4px 0 0;
    }
    /* Always-visible plain-English result of the temps */
    .climate-status {
      margin: 0;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
      background: var(--bg1);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text);
    }
    .climate-status[hidden] { display: none !important; }
    .climate-status strong {
      font-weight: 800;
      color: var(--accent-deep);
    }
    [data-theme="dark"] .climate-status {
      background: rgba(0, 0, 0, 0.22);
      border-color: rgba(255, 255, 255, 0.1);
    }
    [data-theme="dark"] .climate-status strong {
      color: #5EEAD4;
    }
    .climate-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 360px) {
      .climate-row { grid-template-columns: 1fr; }
    }
    .climate-row-stack {
      grid-template-columns: 1fr;
    }
    /* Always full-width stacks in climate advanced — half-width menus wrap into garbage */
    .climate-advanced .climate-row-stack {
      grid-template-columns: 1fr;
    }
    .climate-advanced .select-option {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .climate-advanced .select-trigger-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .climate-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }
    .climate-field-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }
    .climate-field input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 10px;
      font-size: 16px; /* avoids iOS zoom */
      font-weight: 650;
      background: var(--bg1);
      color: var(--text);
    }
    .climate-hint {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.4;
      color: var(--text);
      padding: 0 2px;
      border-radius: 0;
      background: transparent;
      border: none;
    }
    .climate-hint strong {
      color: var(--text);
      font-weight: 750;
    }
    .climate-hint em {
      font-style: normal;
      color: var(--muted);
      font-size: 11.5px;
    }
    .climate-day-label {
      font-size: 12px;
      font-weight: 750;
      color: var(--text);
      margin: 0 0 8px;
      letter-spacing: 0;
      text-transform: none;
    }
    .climate-day-scroll {
      position: relative;
      margin: 0;
      border-radius: 12px;
    }
    /* 2×2 grid — all four days always visible, no cut-off labels */
    .climate-day-chips {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      overflow: visible;
      padding: 0;
      cursor: default;
      touch-action: manipulation;
    }
    .climate-day-chips.is-dragging {
      cursor: default;
    }
    .climate-day-chips::-webkit-scrollbar { display: none; }
    .climate-day-scroll::after {
      display: none;
    }
    .climate-day-chip {
      appearance: none;
      -webkit-appearance: none;
      border: 1.5px solid var(--border);
      background: var(--bg1);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 8px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      line-height: 1.25;
      width: 100%;
      min-height: 42px;
      white-space: normal;
      text-align: center;
      -webkit-user-select: none;
      user-select: none;
      box-sizing: border-box;
    }
    .climate-day-chip[aria-pressed="true"] {
      background: color-mix(in srgb, var(--accent) 16%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
      color: var(--accent-deep);
    }
    [data-theme="dark"] .climate-day-chip[aria-pressed="true"] {
      color: var(--accent2);
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.35);
    }
    /* Advanced rows: flat list inside climate, not cards-in-cards (was “upside-down tree”) */
    .climate-advanced {
      margin: 0;
      border-radius: 0;
      border: none;
      border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
      background: transparent;
      overflow: visible;
    }
    .climate-block {
      overflow: visible;
    }
    .climate-advanced:first-of-type {
      margin-top: 2px;
    }
    .climate-advanced .select-wrap.is-open {
      z-index: 300;
    }
    .climate-advanced .select-menu {
      min-height: 0;
      max-height: min(50vh, 280px);
    }
    .climate-advanced > summary {
      list-style: none;
      cursor: pointer;
      padding: 10px 2px;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      user-select: none;
    }
    .climate-advanced > summary::-webkit-details-marker { display: none; }
    .climate-advanced-chev::before {
      content: '›';
      display: inline-block;
      font-size: 16px;
      font-weight: 700;
      transform: rotate(90deg);
      transition: transform 0.12s ease;
      color: var(--faint);
    }
    .climate-advanced[open] .climate-advanced-chev::before {
      transform: rotate(-90deg);
    }
    .climate-advanced-body {
      padding: 0 2px 10px;
      overflow: visible;
    }
    .climate-advanced-note {
      margin: 8px 0 0;
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.35;
    }
    .climate-detail {
      margin-top: 0;
      padding: 0;
      border: none;
      background: transparent;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }
    .climate-detail p {
      margin: 0 0 12px;
    }
    .climate-detail p:last-child { margin-bottom: 0; }
    .climate-detail strong { color: var(--text); font-weight: 750; }
    .climate-depth-foot {
      font-size: 12px;
      color: var(--muted);
    }
    .climate-depth {
      margin-top: 0;
    }
    .climate-hint {
      font-size: 13px !important;
      line-height: 1.45 !important;
    }
    /* Rate sits full-width under climate, same width as the block above */
    .climate-block + .setup-block {
      margin-top: 2px;
    }
    .climate-lock-row {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      justify-content: space-between;
    }
    .climate-lock-note {
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.3;
      flex: 1 1 10rem;
    }
    .climate-rematch {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
      background: color-mix(in srgb, var(--accent) 12%, var(--bg1));
      color: var(--accent-deep);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      min-height: 36px;
    }
    [data-theme="dark"] .climate-rematch {
      color: var(--accent2);
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.32);
    }
    /* Standalone rate (if used outside hero) */
    .rate-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-align: left;
      margin: 0 0 10px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(15, 118, 110, 0.16);
      background:
        radial-gradient(ellipse 80% 90% at 0% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        linear-gradient(165deg, #FFFFFF 0%, #EAF6F3 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 8px 22px rgba(15, 118, 110, 0.09);
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
    }
    /* Hover: teal wash over the whole surface + soft lift shadow (not a heavy outline) */
    @media (hover: hover) and (pointer: fine) {
      .rate-banner:hover {
        border-color: rgba(15, 118, 110, 0.24);
        background:
          radial-gradient(ellipse 100% 120% at 50% 40%, rgba(20, 184, 166, 0.28), transparent 70%),
          linear-gradient(165deg, #E0F7F3 0%, #C5EFE7 100%);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.75) inset,
          0 10px 24px rgba(15, 118, 110, 0.16),
          0 4px 10px rgba(15, 118, 110, 0.1);
        transform: translateY(-1px);
      }
      .rate-banner:hover .rate-banner-action {
        background: linear-gradient(155deg, #14B8A6, #0F766E);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 3px 10px rgba(15, 118, 110, 0.22);
      }
      [data-theme="dark"] .rate-banner:hover {
        border-color: rgba(45, 212, 191, 0.3);
        background:
          radial-gradient(ellipse 100% 120% at 50% 40%, rgba(45, 212, 191, 0.22), transparent 70%),
          linear-gradient(165deg, #1A2E2A 0%, #152420 100%);
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.32),
          0 4px 12px rgba(45, 212, 191, 0.1);
      }
      [data-theme="dark"] .rate-banner:hover .rate-banner-action {
        background: linear-gradient(155deg, #5EEAD4, #2DD4BF);
        color: #0C1211;
        box-shadow: 0 3px 10px rgba(45, 212, 191, 0.25);
      }
      .home-hero .rate-banner:hover {
        border-color: rgba(15, 118, 110, 0.22);
        background:
          radial-gradient(ellipse 100% 120% at 50% 40%, rgba(20, 184, 166, 0.26), transparent 70%),
          linear-gradient(165deg, rgba(224, 247, 243, 0.98) 0%, rgba(197, 239, 231, 0.95) 100%);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.75) inset,
          0 8px 20px rgba(15, 118, 110, 0.14),
          0 3px 8px rgba(15, 118, 110, 0.08);
        transform: translateY(-1px);
      }
      [data-theme="dark"] .home-hero .rate-banner:hover {
        border-color: rgba(45, 212, 191, 0.3);
        background:
          radial-gradient(ellipse 100% 120% at 50% 40%, rgba(45, 212, 191, 0.2), transparent 70%),
          linear-gradient(165deg, rgba(26, 46, 42, 0.95) 0%, rgba(21, 36, 32, 0.9) 100%);
        box-shadow:
          0 8px 20px rgba(0, 0, 0, 0.3),
          0 3px 10px rgba(45, 212, 191, 0.08);
      }
    }
    /* rate-banner press uses shared :active ring above */
    [data-theme="dark"] .rate-banner {
      background:
        radial-gradient(ellipse 80% 90% at 0% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
        linear-gradient(165deg, #171F1D 0%, #141B1A 100%);
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
    .rate-banner-ico {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
      /* Solid teal + clear $ for rate/cost */
      background: var(--accent, #0F766E);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 3px 10px rgba(15, 118, 110, 0.24);
    }
    [data-theme="dark"] .rate-banner-ico {
      background: var(--accent2, #2DD4BF);
      color: #0C1211;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 3px 10px rgba(0, 0, 0, 0.28);
    }
    .rate-banner-body { flex: 1 1 auto; min-width: 0; }
    .rate-banner-label {
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin-bottom: 2px;
    }
    [data-theme="dark"] .rate-banner-label { color: var(--accent2); }
    .rate-banner-value {
      font-size: 1.02rem;
      font-weight: 650;
      letter-spacing: -0.015em;
      color: var(--text);
      line-height: 1.2;
    }
    .rate-banner-value em {
      font-style: normal;
      font-weight: 650;
      color: var(--muted);
      font-size: 0.88rem;
    }
    .rate-banner-hint {
      font-size: 12px;
      color: var(--muted);
      margin-top: 3px;
      line-height: 1.35;
    }
    .rate-banner-value-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .rate-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid var(--good-border);
      background: var(--accent-soft);
      color: var(--accent-deep);
      line-height: 1;
      white-space: nowrap;
    }
    .rate-badge[data-src="bill"] {
      background: #E6F5F2;
      border-color: #0F766E;
      color: #0B5F58;
    }
    .rate-badge[data-src="state"] {
      background: #FFF7E8;
      border-color: #F0D9A8;
      color: #8A5A12;
    }
    [data-theme="dark"] .rate-badge {
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.28);
      color: #99F6E4;
    }
    [data-theme="dark"] .rate-badge[data-src="bill"] {
      background: rgba(45, 212, 191, 0.16);
      border-color: rgba(45, 212, 191, 0.4);
      color: #5EEAD4;
    }
    [data-theme="dark"] .rate-badge[data-src="state"] {
      background: rgba(240, 180, 80, 0.12);
      border-color: rgba(240, 180, 80, 0.3);
      color: #F0D08A;
    }
    .rate-banner-action {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 750;
      color: var(--accent-deep);
      background: var(--accent-soft);
      border: 1px solid var(--good-border);
      border-radius: 999px;
      padding: 7px 11px;
      white-space: nowrap;
    }
    [data-theme="dark"] .rate-banner-action {
      color: #0C1211;
      background: linear-gradient(155deg, #5EEAD4, #2DD4BF);
      border-color: transparent;
    }

    /* Recent appliances strip */
    .recent-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px;
      min-width: 0;
      padding: 2px 0;
      border-radius: 0;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    .recent-strip[hidden] { display: none !important; }
    [data-theme="dark"] .recent-strip {
      border: none;
      background: transparent;
      box-shadow: none;
    }
    .recent-head {
      position: relative;
      flex: 0 0 auto;
    }
    .recent-label-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      padding: 5px 8px 5px 6px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--faint);
      cursor: pointer;
      white-space: nowrap;
    }
    .recent-label-btn:hover,
    .recent-label-btn[aria-expanded="true"] {
      color: var(--accent-deep);
      background: rgba(20, 184, 166, 0.1);
      border-color: rgba(15, 118, 110, 0.14);
    }
    [data-theme="dark"] .recent-label-btn:hover,
    [data-theme="dark"] .recent-label-btn[aria-expanded="true"] {
      color: var(--accent2);
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.2);
    }
    .recent-label-chev {
      font-size: 9px;
      opacity: 0.75;
      line-height: 1;
      transition: transform 0.15s ease;
    }
    .recent-label-btn[aria-expanded="true"] .recent-label-chev {
      transform: rotate(180deg);
    }
    .recent-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 40;
      min-width: 240px;
      width: max-content;
      max-width: min(320px, calc(100vw - 32px));
      padding: 6px;
      border-radius: 14px;
      border: 1px solid rgba(15, 28, 26, 0.1);
      background: #FFFFFF;
      box-shadow:
        0 4px 6px rgba(15, 28, 26, 0.04),
        0 14px 28px rgba(15, 28, 26, 0.12);
    }
    .recent-menu[hidden] { display: none !important; }
    [data-theme="dark"] .recent-menu {
      background: #1C2623;
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
    }
    .recent-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin: 0;
      padding: 10px 14px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13.5px;
      font-weight: 650;
      text-align: left;
      cursor: pointer;
      white-space: nowrap;
    }
    .recent-menu-item:hover {
      background: rgba(239, 68, 68, 0.08);
    }
    .recent-menu-item:active {
      transform: scale(0.98);
      background: rgba(239, 68, 68, 0.12);
    }
    .recent-menu-ico {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      font-size: 14px;
      background: rgba(239, 68, 68, 0.1);
      flex: 0 0 auto;
    }
    .recent-menu-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .recent-menu-title {
      color: #B91C1C;
      font-weight: 700;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    [data-theme="dark"] .recent-menu-title { color: #FCA5A5; }
    .recent-menu-sub {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.25;
      white-space: nowrap;
    }
    .recent-chips-scroll {
      position: relative;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
    }
    .recent-chips-scroll::before,
    .recent-chips-scroll::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 36px;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .recent-chips-scroll::before {
      left: 0;
      background: linear-gradient(
        to right,
        #FFFFFF 0%,
        rgba(255, 255, 255, 0.72) 42%,
        transparent 100%
      );
    }
    .recent-chips-scroll::after {
      right: 0;
      background: linear-gradient(
        to left,
        #FFFFFF 0%,
        rgba(255, 255, 255, 0.72) 42%,
        transparent 100%
      );
    }
    .recent-chips-scroll.has-more-left::before { opacity: 1; }
    .recent-chips-scroll.has-more-right::after { opacity: 1; }
    [data-theme="dark"] .recent-chips-scroll::before {
      background: linear-gradient(
        to right,
        #171F1D 0%,
        rgba(23, 31, 29, 0.72) 42%,
        transparent 100%
      );
    }
    [data-theme="dark"] .recent-chips-scroll::after {
      background: linear-gradient(
        to left,
        #171F1D 0%,
        rgba(23, 31, 29, 0.72) 42%,
        transparent 100%
      );
    }
    .recent-chips-scroll.has-more-left .recent-chips { padding-left: 6px; }
    .recent-chips-scroll.has-more-right .recent-chips { padding-right: 16px; }
    .recent-chips {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      min-width: 0;
      flex: 1 1 auto;
      cursor: grab;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
    }
    .recent-chips::-webkit-scrollbar { display: none; }
    .recent-chips.is-dragging {
      cursor: grabbing;
      user-select: none;
      scroll-behavior: auto;
    }
    .recent-chips.is-dragging .recent-chip {
      pointer-events: none;
    }
    .recent-chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(15, 118, 110, 0.16);
      background: #FFFFFF;
      color: var(--text);
      border-radius: 999px;
      padding: 6px 11px 6px 8px;
      font: inherit;
      font-size: 12.5px;
      font-weight: 650;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(15, 28, 26, 0.04);
    }
    /* recent-chip press uses shared :active ring above */
    .recent-chip .recent-emoji { font-size: 14px; line-height: 1; }
    [data-theme="dark"] .recent-chip {
      background: #151C1A;
      border-color: rgba(45, 212, 191, 0.2);
      color: #E8F5F1;
    }

    /* Results: run mode + compare */
    .run-mode {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 8px auto 0;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 650;
      color: #3F3832;
      background: #FFFFFF;
      border: 1px solid rgba(60, 40, 20, 0.16);
    }
    /* display:inline-flex above would otherwise override the HTML hidden attribute */
    .run-mode[hidden] { display: none !important; }
    .run-mode:empty { display: none !important; }
    .run-mode[data-mode="always"] {
      color: #0B5F58;
      background: #FFFFFF;
      border-color: rgba(15, 118, 110, 0.28);
    }
    [data-theme="dark"] .run-mode {
      color: #1C1814;
      background: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.55);
    }
    [data-theme="dark"] .run-mode[data-mode="always"] {
      color: #0B5F58;
      background: #FFFFFF;
      border-color: rgba(15, 118, 110, 0.35);
    }
    .compare-box {
      margin-top: 12px;
      padding: 12px 12px 10px;
      border-radius: 14px;
      border: 1px solid var(--good-border);
      background: linear-gradient(165deg, #F4FBFA, #E8F5F2);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px 6px;
      align-items: center;
      text-align: center;
    }
    .compare-box,
    .compare-box[hidden] { display: none !important; }
    [data-theme="dark"] .compare-box {
      background: rgba(45, 212, 191, 0.08);
      border-color: rgba(45, 212, 191, 0.22);
    }
    .compare-col .compare-label {
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 2px;
    }
    .compare-col .compare-val {
      font-size: 1.05rem;
      font-weight: 780;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .compare-col.you .compare-val { color: var(--accent-deep); }
    [data-theme="dark"] .compare-col.you .compare-val { color: #5EEAD4; }
    .compare-arrow {
      font-size: 14px;
      color: var(--faint);
      font-weight: 700;
    }
    .compare-delta {
      grid-column: 1 / -1;
      font-size: 13px;
      font-weight: 700;
      color: var(--good-text);
      padding-top: 2px;
    }
    .compare-delta.costlier { color: var(--warn-text); }

    .try-panel {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .try-panel[hidden],
    .btn-try[hidden] {
      display: none !important;
    }
    .try-panel .btn-try .try-delta {
      flex: 0 0 auto;
      flex-shrink: 0;
      max-width: 42%;
      font-size: 11px;
      font-weight: 750;
      color: var(--good-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    [data-theme="dark"] .try-panel .btn-try .try-delta { color: #99F6E4; }
    .try-panel .btn-try .try-delta:empty { display: none; }

    /*
      Results lower tray: Tips / What if / Fine-tune / About + unit name + Save
      sit in one soft-stage — not a second hard white card + floating buttons.
    */
    #results .result-lower.soft-stage {
      margin: 10px 0 6px;
      padding: 0;
      overflow: hidden;
    }
    /* Primary Save above tips / what-if (real info, not “optional junk”) */
    #results .result-save-primary {
      margin: 10px 0 0;
      padding: 10px 0 0;
      border: none;
      border-top: 1px solid rgba(60, 40, 20, 0.08);
      background: transparent;
    }
    #results .result-cta-share {
      background: transparent;
      border: none;
      box-shadow: none;
      min-height: 40px;
      color: var(--accent-deep);
      font-weight: 650;
    }
    [data-theme="dark"] #results .result-cta-share {
      background: transparent;
      border: none;
      color: #5EEAD4;
    }
    #results .climate-advanced > summary {
      padding: 7px 2px;
      font-size: 12px;
      font-weight: 600;
    }
    #results .result-more.soft-stage {
      margin-top: 16px;
      padding: 14px 12px 12px;
      border: 1.5px solid rgba(15, 118, 110, 0.18);
      border-radius: 18px;
      background:
        radial-gradient(ellipse 90% 80% at 0% 0%, rgba(20, 184, 166, 0.1), transparent 55%),
        #FFFFFF;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 6px 18px rgba(40, 28, 16, 0.06);
      opacity: 1;
    }
    [data-theme="dark"] #results .result-more.soft-stage {
      border-color: rgba(45, 212, 191, 0.22);
      background:
        radial-gradient(ellipse 90% 80% at 0% 0%, rgba(45, 212, 191, 0.1), transparent 55%),
        #171F1D;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    }
    #results .result-more-head {
      display: block;
      width: 100%;
      margin: 0 0 10px;
      padding: 0 2px;
      border: none;
      background: transparent;
      font: inherit;
      color: inherit;
      text-align: left;
      cursor: default;
    }
    #results .result-more-head-text {
      min-width: 0;
      flex: 1 1 auto;
    }
    #results .result-more-label {
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: none;
      color: var(--text);
      margin: 0 0 4px;
    }
    #results .result-more-sub {
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.4;
      margin: 0;
    }
    #results .result-more-chevron {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--border));
      background: color-mix(in srgb, var(--bg1) 70%, var(--accent-soft));
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.08);
      color: var(--accent-deep);
    }
    #results .result-more-chevron::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 46%;
      width: 7px;
      height: 7px;
      margin-left: -3.5px;
      margin-top: -5px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(225deg); /* open by default → arrow up */
      transition: transform 0.15s ease, margin-top 0.15s ease;
    }
    /* Header chevron tracks Tips panel only (not the whole Tips & ideas block) */
    #results .result-more.tips-closed .result-more-chevron::after {
      transform: rotate(45deg); /* Tips closed → arrow down */
      margin-top: -5px;
    }
    [data-theme="dark"] #results .result-more-chevron {
      color: #5EEAD4;
      background: rgba(0, 0, 0, 0.28);
      border-color: rgba(45, 212, 191, 0.4);
      box-shadow: none;
    }
    #results .result-more .result-accordions {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(60, 40, 20, 0.1);
      box-shadow: 0 2px 8px rgba(40, 28, 16, 0.04);
    }
    #results .result-more-foot {
      margin: 10px 0 0;
      padding: 8px 2px 0;
      border-top: 1px solid rgba(60, 40, 20, 0.08);
    }
    #results .result-more-foot .app-footer-version {
      margin-top: 6px;
    }
    [data-theme="dark"] #results .result-more .result-accordions {
      border-color: rgba(255, 255, 255, 0.1);
    }
    /* Primary path: don’t nag fine-tune under the monthly cost */
    #results .fine-tune-nudge {
      display: none !important;
    }
    #results .result-live-hint {
      display: none !important;
    }

    /* Work sheet — lives under More (collapsed); not on the main cost path */
    .tech-sheet-details .tech-sheet {
      margin: 0;
      padding: 4px 0 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      text-align: left;
    }
    .tech-sheet {
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      text-align: left;
    }
    [data-theme="dark"] .tech-sheet {
      border-color: rgba(45, 212, 191, 0.18);
      background: linear-gradient(165deg, #15201E 0%, #121C20 100%);
    }
    body.utility-water .tech-sheet {
      border-color: rgba(14, 116, 144, 0.2);
      background: linear-gradient(165deg, #F0F9FC 0%, #E8F4FA 100%);
    }
    [data-theme="dark"] body.utility-water .tech-sheet {
      border-color: rgba(34, 211, 238, 0.18);
      background: linear-gradient(165deg, #121C20 0%, #0F1A1E 100%);
    }
    .tech-sheet-kicker {
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 8px;
    }
    .tech-sheet-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }
    .tech-sheet-cell {
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(60, 40, 20, 0.06);
    }
    [data-theme="dark"] .tech-sheet-cell {
      background: rgba(8, 14, 13, 0.4);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .tech-sheet-cell-label {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 2px;
      letter-spacing: 0.02em;
    }
    .tech-sheet-cell-val {
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      line-height: 1.2;
    }
    .tech-sheet-formula {
      font-size: 12.5px;
      font-weight: 650;
      line-height: 1.45;
      color: var(--text);
      margin: 0 0 6px;
      font-variant-numeric: tabular-nums;
      word-break: break-word;
    }
    .tech-sheet-formula strong {
      font-weight: 800;
      color: var(--accent-deep, #0F766E);
    }
    [data-theme="dark"] .tech-sheet-formula strong { color: #5EEAD4; }
    body.utility-water .tech-sheet-formula strong { color: #0E7490; }
    [data-theme="dark"] body.utility-water .tech-sheet-formula strong { color: #67E8F9; }
    .tech-sheet-note {
      font-size: 11px;
      font-weight: 550;
      line-height: 1.35;
      color: var(--muted);
      margin: 0;
    }
    .home-circuit-row {
      margin: 0 0 8px;
    }
    .result-accordions {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: hidden;
      text-align: left;
    }
    /* Tips row — solid warm yellow, high-contrast text */
    .result-accordions > .tip-box {
      margin: 0;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid rgba(146, 64, 14, 0.16);
      background: #FEF3C7;
      box-shadow: none;
      padding: 0;
      color: #451A03;
    }
    [data-theme="dark"] .result-accordions > .tip-box {
      background: #FDE68A;
      border-bottom-color: rgba(120, 53, 15, 0.3);
      color: #451A03;
    }
    .result-accordions > .tip-box[hidden] {
      display: none !important;
    }
    [data-theme="dark"] .result-accordions {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .result-accordions > details {
      position: relative;
      margin: 0;
      border-radius: 0;
      overflow: hidden;
      text-align: left;
      background: transparent;
      border: none;
      box-shadow: none;
      transition: background 0.14s ease;
    }
    /* Dividers only between adjacent *visible* rows (skip hidden What if) */
    .result-accordions > details:not([hidden]) + details:not([hidden]) {
      border-top: 1px solid rgba(60, 40, 20, 0.1);
    }
    [data-theme="dark"] .result-accordions > details:not([hidden]) + details:not([hidden]) {
      border-top-color: rgba(255, 255, 255, 0.1);
    }
    /* Hide row entirely when empty (e.g. no What if) — no orphan divider */
    .result-accordions > details[hidden] {
      display: none !important;
    }
    .result-accordions > details.scenario-details,
    .result-accordions > details.adjust-details,
    .result-accordions > details.about-details {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    [data-theme="dark"] .result-accordions > details.scenario-details,
    [data-theme="dark"] .result-accordions > details.adjust-details,
    [data-theme="dark"] .result-accordions > details.about-details {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .result-accordions > details[open] {
      overflow: visible;
    }
    .result-accordions > details > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 52px;
      padding: 12px 14px;
      user-select: none;
      border-radius: 0;
      transition: background 0.14s ease;
    }
    /* Same row rhythm for What if / Fine-tune / About */
    .result-accordions > details.scenario-details > summary,
    .result-accordions > details.adjust-details > summary,
    .result-accordions > details.about-details > summary {
      padding: 12px 14px;
      min-height: 52px;
    }
    .result-accordions > details > summary::-webkit-details-marker { display: none; }
    @media (hover: hover) and (pointer: fine) {
      .result-accordions > details:not([open]):hover {
        box-shadow: none;
        background: color-mix(in srgb, var(--accent) 5%, transparent);
      }
      .result-accordions > details > summary:hover {
        filter: none;
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      [data-theme="dark"] .result-accordions > details:not([open]):hover {
        box-shadow: none;
        background: rgba(255, 255, 255, 0.04);
      }
    }
    .result-accordions > details > summary:focus-visible {
      outline: 2px solid var(--accent2);
      outline-offset: -2px;
    }
    .result-accordions > details[open] > summary {
      border-radius: 0;
      border-bottom: 1px solid rgba(60, 40, 20, 0.08);
      background: color-mix(in srgb, var(--accent) 6%, transparent);
    }
    .result-accordions > details.scenario-details[open] > summary,
    .result-accordions > details.adjust-details[open] > summary,
    .result-accordions > details.about-details[open] > summary {
      background: color-mix(in srgb, var(--accent) 6%, transparent);
      border-bottom-color: rgba(60, 40, 20, 0.08);
    }
    [data-theme="dark"] .result-accordions > details[open] > summary,
    [data-theme="dark"] .result-accordions > details.scenario-details[open] > summary,
    [data-theme="dark"] .result-accordions > details.adjust-details[open] > summary,
    [data-theme="dark"] .result-accordions > details.about-details[open] > summary {
      border-bottom-color: rgba(255, 255, 255, 0.1);
      background: rgba(45, 212, 191, 0.07);
    }
    details.scenario-details {
      position: relative;
      margin: 0;
      text-align: left;
    }
    details.scenario-details[hidden] { display: none !important; }
    .scenario-more-btn {
      appearance: none;
      -webkit-appearance: none;
      width: 100%;
      margin-top: 4px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg1));
      color: var(--accent-deep);
      font: inherit;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      min-height: 40px;
    }
    [data-theme="dark"] .scenario-more-btn {
      color: var(--accent2);
      background: rgba(45, 212, 191, 0.08);
      border-color: rgba(45, 212, 191, 0.3);
    }
    [data-theme="dark"] details.scenario-details {
      /* card chrome from .result-accordions > details */
    }
    details.scenario-details > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      min-height: 52px;
      user-select: none;
    }
    details.scenario-details > summary::-webkit-details-marker { display: none; }
    .scenario-summary-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .scenario-badge {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      line-height: 1;
      background: rgba(15, 118, 110, 0.12);
      color: #0B5F58;
      box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.14);
    }
    [data-theme="dark"] .scenario-badge {
      background: rgba(45, 212, 191, 0.16);
      color: #5EEAD4;
      box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.2);
    }
    details.scenario-details .scenario-title {
      font-size: 0.95rem;
      font-weight: 720;
      letter-spacing: -0.02em;
      color: var(--text);
      line-height: 1.15;
    }
    details.scenario-details .scenario-title span { color: var(--text); }
    [data-theme="dark"] details.scenario-details .scenario-title span { color: var(--text); }
    details.scenario-details .scenario-sub {
      display: block;
      font-size: 12px;
      font-weight: 550;
      color: var(--muted);
      margin-top: 2px;
    }
    .scenario-count-pill {
      display: none !important; /* count is noise — keep DOM for any old JS refs */
      align-items: center;
      margin-top: 5px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--bg2);
      border: 1px solid var(--border);
    }
    [data-theme="dark"] .scenario-count-pill {
      color: #9BB0AA;
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }
    details.scenario-details > summary .scenario-chevron {
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(45deg);
      transition: transform 0.15s ease, border-color 0.14s ease, opacity 0.14s ease;
      flex-shrink: 0;
      opacity: 0.7;
    }
    [data-theme="dark"] details.scenario-details > summary .scenario-chevron {
      border-color: #8AA39A;
    }
    details.scenario-details[open] > summary .scenario-chevron {
      transform: rotate(-135deg);
      margin-top: 4px;
      border-color: var(--accent);
      opacity: 0.9;
    }
    details.scenario-details .scenario-body {
      padding: 0 12px 14px;
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--accent) 4%, #F7F3ED);
    }
    [data-theme="dark"] details.scenario-details .scenario-body {
      border-top-color: rgba(255, 255, 255, 0.08);
      background: rgba(0, 0, 0, 0.18);
    }
    .scenario-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }
    .scenario-list:empty {
      display: none;
      margin: 0;
    }
    .scenario-result {
      order: 0; /* sits in list flow under the tapped row */
    }
    /* Idea rows: filled surface so they pop off the white tools card */
    .scenario-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      box-sizing: border-box;
      overflow: hidden;
      border: 1.5px solid color-mix(in srgb, var(--accent) 22%, rgba(60, 40, 20, 0.12));
      background: #FFFFFF;
      color: var(--text);
      font: inherit;
      font-size: 13.5px;
      font-weight: 650;
      padding: 13px 12px;
      border-radius: 14px;
      cursor: pointer;
      line-height: 1.25;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(40, 28, 16, 0.07);
    }
    /* scenario-btn press uses shared :active ring above */
    .scenario-btn.active {
      border-color: transparent;
      color: #fff;
      background: #0F766E;
      box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
    }
    body.utility-water .scenario-btn.active {
      background: #0E7490;
      box-shadow: 0 4px 14px rgba(14, 116, 144, 0.28);
    }
    [data-theme="dark"] .scenario-btn {
      background: #1A2421;
      border-color: rgba(45, 212, 191, 0.28);
      color: #E8F5F1;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] .scenario-btn.active {
      color: #0C1211;
      background: #2DD4BF;
      box-shadow: 0 4px 14px rgba(45, 212, 191, 0.22);
    }
    [data-theme="dark"] body.utility-water .scenario-btn.active {
      background: #22D3EE;
    }
    .scenario-emoji {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      background: color-mix(in srgb, var(--accent) 14%, #FFFFFF);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    }
    .scenario-btn.active .scenario-emoji {
      background: rgba(255, 255, 255, 0.2);
      border-color: transparent;
    }
    [data-theme="dark"] .scenario-emoji {
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.18);
    }
    /* Label must shrink + clip so it never paints under the cost pill (day15/mo bug) */
    .scenario-text {
      flex: 1 1 0%;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow-wrap: anywhere;
      word-break: break-word;
      padding-right: 2px;
    }
    .scenario-preview {
      flex: 0 0 auto;
      flex-shrink: 0;
      max-width: 46%;
      font-size: 14px;
      font-weight: 800;
      color: #0B5F58;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.02em;
      padding: 5px 10px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 12%, #E6F3F0);
      border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .scenario-preview.is-save {
      color: #047857;
      background: #ECFDF5;
      border-color: rgba(4, 120, 87, 0.28);
    }
    .scenario-preview.is-info {
      color: #475569;
      background: #F1F5F9;
      border-color: rgba(100, 116, 139, 0.25);
      font-size: 12.5px;
      font-weight: 750;
    }
    .scenario-btn.is-save {
      border-color: color-mix(in srgb, #059669 28%, rgba(60, 40, 20, 0.1));
      background: #F7FDF9;
    }
    .scenario-btn.active .scenario-preview {
      color: #0F766E;
      background: rgba(255, 255, 255, 0.92);
    }
    .scenario-btn.active .scenario-preview.is-save {
      color: #047857;
      background: rgba(255, 255, 255, 0.95);
    }
    [data-theme="dark"] .scenario-preview {
      color: #5EEAD4;
      background: rgba(45, 212, 191, 0.12);
    }
    [data-theme="dark"] .scenario-preview.is-save {
      color: #6EE7B7;
      background: rgba(4, 120, 87, 0.28);
      border-color: rgba(52, 211, 153, 0.3);
    }
    [data-theme="dark"] .scenario-preview.is-info {
      color: #CBD5E1;
      background: rgba(148, 163, 184, 0.12);
      border-color: rgba(148, 163, 184, 0.22);
    }
    [data-theme="dark"] .scenario-btn.is-save {
      background: rgba(4, 80, 60, 0.22);
      border-color: rgba(52, 211, 153, 0.28);
    }
    [data-theme="dark"] .scenario-btn.active .scenario-preview {
      color: #0C1211;
      background: rgba(255, 255, 255, 0.9);
    }
    .scenario-section-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-transform: none;
      color: var(--muted);
      padding: 6px 2px 2px;
      margin: 2px 0 0;
    }
    .scenario-section-cut {
      color: #047857;
      font-weight: 750;
    }
    [data-theme="dark"] .scenario-section-cut {
      color: #6EE7B7;
    }
    .scenario-list > .scenario-section-label:first-child {
      margin-top: 0;
    }

    .scenario-result {
      margin: 2px 0 4px;
      padding: 14px 12px 12px;
      border-radius: 14px;
      background: #F7FBFA;
      color: var(--text);
      border: 1px solid rgba(15, 118, 110, 0.16);
      box-shadow: 0 2px 10px rgba(15, 118, 110, 0.06);
      text-align: center;
    }
    [data-theme="dark"] .scenario-result {
      background: rgba(15, 28, 26, 0.95);
      border-color: rgba(45, 212, 191, 0.18);
      color: var(--text);
      box-shadow: none;
    }
    .scenario-result[hidden] { display: none !important; }
    .scenario-result-big {
      font-size: 1.85rem;
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.05;
      color: var(--accent-deep);
    }
    [data-theme="dark"] .scenario-result-big { color: #5EEAD4; }
    .scenario-result-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-top: 6px;
    }
    .scenario-result-mo {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    .scenario-result-mo em {
      font-style: normal;
      color: var(--muted);
      font-weight: 600;
    }
    .scenario-result-meaning {
      margin-top: 6px;
      font-size: 12.5px;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.4;
    }
    .scenario-result-detail {
      margin-top: 8px;
      padding: 10px 11px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid var(--border);
      text-align: left;
      font-size: 12.5px;
      font-weight: 550;
      line-height: 1.45;
      color: var(--text);
    }
    [data-theme="dark"] .scenario-result-detail {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
      color: var(--text);
    }
    .scenario-result-detail strong {
      font-weight: 750;
      color: var(--accent-deep);
      display: inline;
    }
    [data-theme="dark"] .scenario-result-detail strong { color: #5EEAD4; }
    .scenario-result-detail + .scenario-result-detail {
      margin-top: 6px;
      padding-top: 10px;
    }
    .scenario-result-math {
      display: block;
      margin-top: 5px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }
    .scenario-result.is-savings {
      background: #ECFDF5;
      border-color: rgba(4, 120, 87, 0.22);
    }
    [data-theme="dark"] .scenario-result.is-savings {
      background: rgba(4, 80, 60, 0.35);
      border-color: rgba(52, 211, 153, 0.25);
    }
    .scenario-result.is-savings .scenario-result-big { color: #047857; }
    [data-theme="dark"] .scenario-result.is-savings .scenario-result-big { color: #6EE7B7; }
    .scenario-result.is-tiny {
      background: #F8FAFC;
      border-color: rgba(100, 116, 139, 0.25);
    }
    [data-theme="dark"] .scenario-result.is-tiny {
      background: rgba(30, 41, 59, 0.5);
      border-color: rgba(148, 163, 184, 0.2);
    }
    .scenario-result.is-tiny .scenario-result-big { color: #475569; }
    [data-theme="dark"] .scenario-result.is-tiny .scenario-result-big { color: #CBD5E1; }
    .scenario-result.is-info-time .scenario-result-big {
      font-size: 1.35rem;
      letter-spacing: -0.02em;
      color: var(--accent-deep);
    }
    [data-theme="dark"] .scenario-result.is-info-time .scenario-result-big {
      color: var(--accent2);
    }

    /* Tips preview text weight */
    .tip-box .tip-preview {
      font-weight: 600;
    }

    .share-delta {
      margin-top: 8px;
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--good-text);
      text-align: center;
    }
    .share-delta[hidden] { display: none !important; }
    [data-theme="dark"] .share-delta { color: #99F6E4; }

    .home-item.is-biggest {
      border-color: rgba(15, 118, 110, 0.35);
      box-shadow: 0 4px 16px rgba(15, 118, 110, 0.12);
    }
    .home-item-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }
    .home-tag {
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-deep);
      border: 1px solid var(--good-border);
    }
    .home-tag.easy {
      background: #FFF7E8;
      border-color: #F0D9A8;
      color: #8A5A12;
    }
    [data-theme="dark"] .home-tag.easy {
      background: rgba(240, 180, 80, 0.12);
      border-color: rgba(240, 180, 80, 0.28);
      color: #F0D08A;
    }
    .home-insight {
      margin: 0 0 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(15, 118, 110, 0.12);
      background: #F4FAF8;
      font-size: 0.88rem;
      line-height: 1.4;
      color: var(--text);
    }
    .home-insight[hidden] { display: none !important; }
    [data-theme="dark"] .home-insight {
      background: #15201E;
      border-color: rgba(45, 212, 191, 0.14);
    }
    .home-insight strong { font-weight: 750; color: var(--accent-deep); }
    [data-theme="dark"] .home-insight strong { color: #5EEAD4; }
    .home-insight-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      font-weight: 600;
      color: var(--muted);
    }
    .home-insight-row strong { color: var(--text); }
    .home-insight-note {
      margin-top: 6px;
      font-weight: 550;
      color: var(--muted);
    }
    .home-insight-note:first-child { margin-top: 0; }
    .home-insight-link {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgba(15, 118, 110, 0.45);
    }
    /* insight link press uses shared :active ring above */

    /* ——— My Home page ——— */
    /* Title lives inside the stage — one block under the app topbar */
    #myhome .myhome-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      padding: 0 2px 10px;
      border: none;
      border-bottom: 1px solid rgba(60, 40, 20, 0.07);
      background: transparent;
      box-shadow: none;
      border-radius: 0;
    }
    [data-theme="dark"] #myhome .myhome-head {
      background: transparent;
      border-bottom-color: rgba(255, 255, 255, 0.07);
      box-shadow: none;
    }
    #myhome .myhome-head-ico {
      width: auto;
      height: auto;
      border-radius: 0;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      line-height: 1;
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
    }
    [data-theme="dark"] #myhome .myhome-head-ico {
      background: none;
      border: none;
      box-shadow: none;
    }
    #myhome .myhome-head-text {
      min-width: 0;
      flex: 1;
    }
    #myhome #myHomeList {
      margin-bottom: 0;
    }
    #myhome .myhome-head .section-title {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--text);
    }
    #myhome .myhome-head .section-sub {
      margin: 2px 0 0;
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 550;
      line-height: 1.35;
    }

    /*
      Soft stage — shared paper tray under solid topbars (My Home, rate, settings, docs).
      Not a second white pill: page-tinted, faint edge, no deep shadow.
    */
    .soft-stage,
    #myhome .myhome-stage {
      margin: 0 0 10px;
      padding: 14px 12px 14px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--bg1, #F7F4EE) 88%, #FFFFFF);
      border: 1px solid rgba(60, 40, 20, 0.05);
      box-shadow: none;
    }
    [data-theme="dark"] .soft-stage,
    [data-theme="dark"] #myhome .myhome-stage {
      background: color-mix(in srgb, #121A18 70%, #1A2321);
      border-color: rgba(255, 255, 255, 0.05);
      box-shadow: none;
    }
    .soft-stage-head {
      margin: 0 0 12px;
      padding: 0 2px 10px;
      border-bottom: 1px solid rgba(60, 40, 20, 0.07);
    }
    [data-theme="dark"] .soft-stage-head {
      border-bottom-color: rgba(255, 255, 255, 0.07);
    }
    .soft-stage-head .section-title {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--text);
    }
    .soft-stage-head .section-sub {
      margin: 2px 0 0;
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 550;
      line-height: 1.35;
    }
    /* Topbar stays the only “app chrome” pill on staged screens */
    #myhome .topbar.topbar-sub,
    #rate-finder .topbar.topbar-sub,
    #settings .topbar.topbar-sub,
    #privacy .topbar.topbar-sub,
    #about .topbar.topbar-sub,
    #help .topbar.topbar-sub,
    #heat-tell .topbar.topbar-sub,
    #toilet-tell .topbar.topbar-sub,
    #setting-tell .topbar.topbar-sub,
    #contact .topbar.topbar-sub {
      margin-bottom: 10px;
    }
    /*
      Settings middle ground:
      one soft tray (finished, not raw) + flat sections inside (not nested cards).
    */
    /* Settings — compact tray, full-width controls, clear gap above dividers */
    #settings .settings-page.soft-stage {
      max-width: 100%;
      margin: 0 0 8px;
      padding: 14px 14px 16px;
      /* Cleaner paper — less mint wash */
      background: #FFFCFA;
      border: 1px solid rgba(55, 45, 35, 0.08);
      border-radius: 18px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    }
    [data-theme="dark"] #settings .settings-page.soft-stage {
      background: color-mix(in srgb, #121A18 78%, #1A2321);
      border-color: rgba(255, 255, 255, 0.06);
      box-shadow: none;
    }
    #settings .settings-page-head {
      margin: 0 0 8px;
      padding: 0 2px 10px;
      border-bottom: 1px solid rgba(60, 40, 20, 0.08);
    }
    [data-theme="dark"] #settings .settings-page-head {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    #settings .settings-page-title {
      margin: 0;
      padding: 0;
      font-size: 1.1rem;
      font-weight: 820;
      letter-spacing: -0.03em;
      color: var(--text);
      line-height: 1.15;
    }
    #settings .settings-page-sub {
      margin: 3px 0 0;
      font-size: 0.75rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.3;
    }
    #settings .settings-block {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0;
      padding: 12px 0 16px;
      border: none;
      border-bottom: 1px solid rgba(60, 40, 20, 0.07);
      background: transparent;
    }
    #settings .settings-block:last-child {
      border-bottom: none;
      padding-bottom: 2px;
    }
    [data-theme="dark"] #settings .settings-block {
      border-bottom-color: rgba(255, 255, 255, 0.07);
    }
    #settings .settings-block-title {
      margin: 0;
      padding: 0 2px;
      font-size: 0.88rem;
      font-weight: 750;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.2;
    }
    #settings .settings-toggle {
      width: 100%;
      margin: 0;
      box-sizing: border-box;
    }
    /*
      Settings segments — keep brand teal color, but SOLID (no gradient).
      Track stays soft; selected = flat accent fill.
    */
    #settings .settings-toggle.cadence-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 3px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 8%, #F3F0EA);
      border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
      box-shadow: inset 0 1px 2px rgba(15, 28, 26, 0.04);
    }
    [data-theme="dark"] #settings .settings-toggle.cadence-toggle {
      background: rgba(45, 212, 191, 0.08);
      border-color: rgba(45, 212, 191, 0.16);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    #settings .settings-toggle .cadence-seg {
      min-height: 40px;
      padding: 9px 8px;
      font-size: 13px;
      font-weight: 650;
      color: var(--muted);
      background: transparent;
      border: none;
      border-radius: 9px;
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    }
    #settings .settings-toggle .cadence-seg[aria-pressed="true"] {
      /* Solid brand teal — not the shiny gradient */
      background: var(--accent, #0F766E);
      color: #fff;
      font-weight: 750;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
    }
    [data-theme="dark"] #settings .settings-toggle .cadence-seg[aria-pressed="true"] {
      background: var(--accent2, #2DD4BF);
      color: #0B0F12;
      box-shadow: 0 2px 10px rgba(45, 212, 191, 0.18);
    }
    body.utility-water #settings .settings-toggle .cadence-seg[aria-pressed="true"] {
      background: var(--accent, #0369A1);
      color: #fff;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
    }
    [data-theme="dark"] body.utility-water #settings .settings-toggle .cadence-seg[aria-pressed="true"] {
      background: var(--accent2, #38BDF8);
      color: #0B0F12;
      box-shadow: 0 2px 10px rgba(56, 189, 248, 0.18);
    }
    #settings .settings-toggle .cadence-seg .theme-ico {
      font-size: 13px;
      line-height: 1;
      opacity: 0.95;
    }
    #settings .settings-primary-btn,
    #settings .settings-actions .btn-secondary {
      width: 100%;
      min-height: 42px;
      margin: 0;
      border-radius: 12px;
      justify-content: center;
    }
    #settings .settings-hint {
      margin: 0;
      padding: 0 2px;
      font-size: 12px;
      line-height: 1.35;
    }
    #settings .settings-links {
      margin: 0;
    }
    /* Flat rate / data rows — clean list, not mint-tinted cards */
    #settings .settings-rate-list,
    #settings .settings-data-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      border-radius: 12px;
      border: 1px solid rgba(55, 45, 35, 0.12);
      background: #FFFFFF;
      overflow: hidden;
      box-shadow: none;
    }
    [data-theme="dark"] #settings .settings-rate-list,
    [data-theme="dark"] #settings .settings-data-list {
      background: rgba(18, 24, 22, 0.9);
      border-color: rgba(255, 255, 255, 0.1);
    }
    #settings .settings-rate-row,
    #settings .settings-data-row {
      appearance: none;
      -webkit-appearance: none;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin: 0;
      padding: 12px 14px;
      border: none;
      border-bottom: 1px solid rgba(60, 40, 20, 0.07);
      border-radius: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      min-height: 48px;
      box-sizing: border-box;
    }
    #settings .settings-rate-row:last-child,
    #settings .settings-data-row:last-child {
      border-bottom: none;
    }
    [data-theme="dark"] #settings .settings-rate-row,
    [data-theme="dark"] #settings .settings-data-row {
      border-bottom-color: rgba(255, 255, 255, 0.07);
    }
    #settings .settings-rate-row:active,
    #settings .settings-data-row:active {
      background: rgba(55, 45, 35, 0.05);
    }
    [data-theme="dark"] #settings .settings-rate-row:active,
    [data-theme="dark"] #settings .settings-data-row:active {
      background: rgba(255, 255, 255, 0.05);
    }
    #settings .settings-rate-label {
      flex: 0 0 auto;
      font-weight: 650;
      color: var(--muted);
      font-size: 13.5px;
    }
    #settings .settings-rate-value {
      flex: 1 1 auto;
      font-weight: 800;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      text-align: right;
      font-size: 13.5px;
      min-width: 0;
    }
    #settings .settings-rate-go {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 16px;
      font-weight: 600;
      opacity: 0.65;
      line-height: 1;
    }
    #settings .settings-data-row {
      font-size: 13.5px;
      font-weight: 650;
      color: var(--text);
      justify-content: flex-start;
    }
    [data-theme="dark"] #settings .settings-data-row {
      color: #E8F0ED;
    }
    #settings .settings-data-row.settings-data-danger {
      color: #B91C1C;
    }
    [data-theme="dark"] #settings .settings-data-row.settings-data-danger {
      color: #FCA5A5;
    }
    /* Quiet text action — no mint dashed box */
    #settings .settings-quiet-btn {
      appearance: none;
      -webkit-appearance: none;
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 10px 0 0;
      padding: 6px 2px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 12.5px;
      font-weight: 650;
      text-align: left;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    #settings .settings-quiet-btn:active {
      color: var(--text);
    }
    [data-theme="dark"] #settings .settings-quiet-btn {
      border: none;
      background: transparent;
      color: #A8C4BC;
    }
    /* Solar panel groups in Settings */
    .solar-setup {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .solar-setup[hidden] { display: none !important; }
    .solar-panel-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .solar-panel-row {
      display: grid;
      grid-template-columns: 1fr 1.1fr auto;
      gap: 8px;
      align-items: end;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(55, 45, 35, 0.12);
      background: #FFFFFF;
    }
    [data-theme="dark"] .solar-panel-row {
      background: rgba(18, 24, 22, 0.9);
      border-color: rgba(255, 255, 255, 0.1);
    }
    .solar-panel-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .solar-panel-field label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.02em;
    }
    .solar-panel-field input,
    .solar-panel-field select {
      width: 100%;
      box-sizing: border-box;
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(55, 45, 35, 0.14);
      background: var(--bg1, #FFFCFA);
      color: var(--text);
      font: inherit;
      font-weight: 650;
      padding: 8px 10px;
    }
    .solar-panel-remove {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 6px;
      cursor: pointer;
      min-height: 40px;
    }
    .solar-panel-remove:hover { color: #B91C1C; }
    .solar-add-btn {
      appearance: none;
      border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
      background: transparent;
      color: var(--accent-deep);
      border-radius: 12px;
      padding: 10px 12px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
    }
    [data-theme="dark"] .solar-add-btn {
      color: var(--accent2);
      border-color: rgba(45, 212, 191, 0.28);
    }
    .solar-sun-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .solar-sun-label {
      font-size: 13px;
      font-weight: 650;
      color: var(--text);
      flex: 1;
    }
    .solar-sun-input {
      width: 88px;
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(55, 45, 35, 0.14);
      background: #FFFFFF;
      color: var(--text);
      font: inherit;
      font-weight: 750;
      text-align: center;
      padding: 8px;
    }
    [data-theme="dark"] .solar-sun-input {
      background: rgba(18, 24, 22, 0.9);
      border-color: rgba(255, 255, 255, 0.12);
    }
    .solar-summary {
      padding: 10px 12px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 10%, #FFFFFF);
      border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
      font-size: 0.84rem;
      font-weight: 650;
      line-height: 1.4;
      color: var(--text);
    }
    [data-theme="dark"] .solar-summary {
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.2);
    }
    .solar-offset-note {
      margin-top: 6px;
    }
    .solar-offset-note a,
    .solar-offset-note button.linkish {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      font: inherit;
      font-weight: 800;
      color: var(--accent-deep);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    [data-theme="dark"] .solar-offset-note a,
    [data-theme="dark"] .solar-offset-note button.linkish {
      color: #5EEAD4;
    }
    #settings .settings-actions {
      margin: 0;
      width: 100%;
    }
    .soft-stage .info-doc {
      margin: 0;
      padding: 0 2px;
    }

    /* Inner panels sit on the mat — no extra frames */
    #myhome .myhome-panel {
      position: relative;
      margin: 0 0 12px;
      padding: 0;
      border-radius: 0;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    #myhome .myhome-panel[hidden] { display: none !important; }
    [data-theme="dark"] #myhome .myhome-panel {
      border: none;
      background: transparent;
      box-shadow: none;
    }
    #myhome .myhome-panel.myhome-summary {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0;
      margin-bottom: 12px;
    }
    #myhome .myhome-panel.myhome-list-panel {
      padding: 10px 0 2px;
      margin-bottom: 12px;
      border-radius: 0;
      border: none;
      border-top: 1px solid rgba(60, 40, 20, 0.07);
      background: transparent;
      box-shadow: none;
    }
    [data-theme="dark"] #myhome .myhome-panel.myhome-list-panel {
      border-color: rgba(255, 255, 255, 0.07);
      background: transparent;
      box-shadow: none;
    }
    #myhome .myhome-panel.myhome-actions-panel {
      padding: 10px 0 0;
      margin-bottom: 0;
      border-top: 1px solid rgba(60, 40, 20, 0.07);
    }
    [data-theme="dark"] #myhome .myhome-panel.myhome-actions-panel {
      border-top-color: rgba(255, 255, 255, 0.07);
    }
    #myhome .myhome-group {
      margin: 0 0 12px;
    }
    #myhome .myhome-group:last-child {
      margin-bottom: 0;
    }
    #myhome .myhome-group-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin: 0 4px 8px;
    }
    #myhome .myhome-group-title {
      font-size: 0.95rem;
      font-weight: 760;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    #myhome .myhome-group-sum {
      font-size: 13px;
      font-weight: 750;
      color: var(--accent-deep);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    [data-theme="dark"] #myhome .myhome-group-sum { color: #5EEAD4; }
    #myhome .myhome-group.is-water .myhome-group-sum { color: #0E7490; }
    [data-theme="dark"] #myhome .myhome-group.is-water .myhome-group-sum { color: #67E8F9; }
    #myhome .myhome-group-items .home-item:last-child {
      margin-bottom: 0;
    }
    #myhome .home-item.is-water {
      border-color: rgba(14, 116, 144, 0.14);
    }
    #myhome .home-item.is-water .home-item-emoji {
      background: #E8F6FA;
      border-color: #B5DCE8;
      box-shadow: 0 3px 10px rgba(14, 116, 144, 0.12);
    }
    [data-theme="dark"] #myhome .home-item.is-water .home-item-emoji {
      background: rgba(34, 211, 238, 0.12);
      border-color: rgba(34, 211, 238, 0.2);
    }
    #myhome .home-item.is-water .home-item-cost {
      background: #0E7490;
    }
    [data-theme="dark"] #myhome .home-item.is-water .home-item-cost {
      background: #0891B2;
    }
    /* Empty checklist: no top rule; empty-card sits on the soft stage */
    #myhome .myhome-list-panel:has(.empty-card) {
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    #myhome .myhome-stage:has(.empty-card) {
      padding-top: 12px;
    }

    /* Post-save celebration on My Home — clear household payoff */
    .home-saved-moment {
      margin: 0 0 14px;
      padding: 18px 16px 16px;
      border-radius: 18px;
      border: 1.5px solid rgba(15, 118, 110, 0.28);
      background: #EAF7F3;
      box-shadow: 0 8px 22px rgba(15, 118, 110, 0.12);
      text-align: left;
      position: relative;
      overflow: hidden;
    }
    .home-saved-moment::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 5px;
      border-radius: 0 5px 5px 0;
      background: #0F766E;
      pointer-events: none;
    }
    .home-saved-moment[hidden] { display: none !important; }
    [data-theme="dark"] .home-saved-moment {
      border-color: rgba(45, 212, 191, 0.34);
      background: #1A2623;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
    }
    [data-theme="dark"] .home-saved-moment::before {
      background: #2DD4BF;
    }
    .home-saved-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin-bottom: 6px;
      padding-left: 6px;
    }
    [data-theme="dark"] .home-saved-kicker { color: #5EEAD4; }
    .home-saved-title {
      font-size: 1.12rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      line-height: 1.3;
      padding-left: 6px;
    }
    .home-saved-title strong { color: var(--accent-deep); }
    [data-theme="dark"] .home-saved-title strong { color: #5EEAD4; }
    .home-saved-total {
      margin-top: 10px;
      margin-left: 6px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #0F766E;
      color: #fff;
      font-size: 0.95rem;
      font-weight: 650;
      line-height: 1.3;
    }
    .home-saved-total strong {
      font-size: 1.25rem;
      font-weight: 840;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }
    [data-theme="dark"] .home-saved-total {
      background: #0D9488;
      color: #04110f;
    }
    .home-saved-meta {
      margin-top: 8px;
      padding-left: 6px;
      font-size: 13px;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.4;
    }
    .home-saved-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 14px;
    }
    .home-saved-actions .btn-primary,
    .home-saved-actions .btn-secondary {
      width: 100%;
      font-size: 14px;
      font-weight: 700;
      padding: 12px 16px;
      border-radius: 12px;
    }
    .home-saved-actions .btn-primary {
      color: #fff;
      background: #0F766E;
      border: none;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 4px 12px rgba(15, 118, 110, 0.22);
    }
    .home-saved-actions .btn-secondary {
      background: #FFFFFF;
      border: 1px solid rgba(15, 118, 110, 0.16);
      color: var(--text);
      box-shadow: none;
    }
    [data-theme="dark"] .home-saved-actions .btn-primary {
      background: #0D9488;
    }
    [data-theme="dark"] .home-saved-actions .btn-secondary {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.12);
      color: #E8F0ED;
    }
    .home-saved-dismiss {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      padding: 8px 4px 2px;
      cursor: pointer;
      text-decoration: none;
      opacity: 0.85;
    }
    .home-saved-dismiss:hover { opacity: 1; text-decoration: underline; }

    /* My Home action stack — primary + quiet tools */
    #myhome .myhome-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 0;
      margin-bottom: 0;
    }
    /* Share My Home — secondary (add uses first) */
    #myhome .btn-myhome-share {
      width: 100%;
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14.5px;
      font-weight: 650;
      letter-spacing: -0.01em;
      border-radius: 12px;
      color: var(--text);
      background: #FFFFFF;
      border: 1px solid rgba(60, 40, 20, 0.12);
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.04);
      padding: 10px 14px;
    }
    #myhome .btn-myhome-share .btn-myhome-share-ico {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: currentColor;
      opacity: 0.85;
    }
    #myhome .btn-myhome-share-text {
      line-height: 1.15;
    }
    [data-theme="dark"] #myhome .btn-myhome-share {
      color: #E8F0ED;
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: none;
    }
    #myhome .btn-myhome-share:active {
      transform: scale(0.985);
    }
    #myhome .myhome-actions-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #myhome .myhome-add-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    #myhome .btn-myhome-add {
      width: 100%;
      min-height: 52px;
      font-size: 14.5px;
      font-weight: 750;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 10px;
      letter-spacing: -0.02em;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 4px 12px rgba(15, 118, 110, 0.16);
    }
    #myhome .myhome-add-ico {
      font-size: 16px;
      line-height: 1;
    }
    /* Power add — primary teal */
    #myhome #myHomeAddPowerBtn {
      color: #FFFFFF;
      background: #0F766E;
      border: none;
    }
    /* Water add — primary blue */
    #myhome #myHomeAddWaterBtn {
      color: #FFFFFF;
      background: #0E7490;
      border: none;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 4px 12px rgba(14, 116, 144, 0.22);
    }
    [data-theme="dark"] #myhome #myHomeAddPowerBtn {
      color: #04110f;
      background: #2DD4BF;
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] #myhome #myHomeAddWaterBtn {
      color: #041018;
      background: #22D3EE;
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    }
    .myhome-once-line {
      margin-top: 6px;
      font-size: 12.5px;
      font-weight: 650;
      color: #7A6A58;
      letter-spacing: -0.01em;
    }
    [data-theme="dark"] .myhome-once-line {
      color: #A8B5B0;
    }
    #myhome .myhome-group.is-once .myhome-group-sum {
      color: #8A5A12;
    }
    [data-theme="dark"] #myhome .myhome-group.is-once .myhome-group-sum {
      color: #F0D08A;
    }
    /* Seasonal AC + heat note */
    .home-seasonal {
      margin: 12px 0 0;
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(165deg, #FFF9F0 0%, #FFF1DC 100%);
      border: 1px solid rgba(180, 120, 40, 0.28);
    }
    .home-seasonal[hidden] { display: none !important; }
    [data-theme="dark"] .home-seasonal {
      background: rgba(240, 180, 80, 0.1);
      border-color: rgba(240, 180, 80, 0.28);
    }
    .home-seasonal-kicker {
      font-size: 11.5px;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #8A5A12;
      margin-bottom: 6px;
    }
    [data-theme="dark"] .home-seasonal-kicker { color: #F0D08A; }
    .home-seasonal-body {
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--text);
      margin-bottom: 8px;
    }
    .home-seasonal-math {
      font-size: 13.5px;
      font-weight: 650;
      line-height: 1.4;
      margin-bottom: 6px;
      color: var(--text);
    }
    .home-seasonal-vs {
      font-weight: 550;
      color: #7A6A58;
    }
    [data-theme="dark"] .home-seasonal-vs { color: #A8B5B0; }
    .home-seasonal-hint {
      font-size: 12px;
      line-height: 1.4;
      color: #7A6A58;
    }
    [data-theme="dark"] .home-seasonal-hint { color: #A8B5B0; }
    #myhome .myhome-actions .btn-secondary {
      width: 100%;
      min-height: 46px;
      font-size: 14.5px;
      font-weight: 650;
      border-radius: 12px;
      background: #FFFFFF;
      border: 1px solid rgba(60, 40, 20, 0.12);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.04);
    }
    [data-theme="dark"] #myhome .myhome-actions .btn-secondary {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.12);
      color: #E8F0ED;
      box-shadow: none;
    }
    /* Update rate — warm amber so it doesn’t match teal adds */
    #myhome .btn-myhome-resync:not([hidden]) {
      border: 1.5px solid rgba(180, 120, 40, 0.35);
      color: #8A5A12;
      font-weight: 700;
      background: linear-gradient(165deg, #FFFBF3 0%, #FFF3DC 100%);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    }
    [data-theme="dark"] #myhome .btn-myhome-resync:not([hidden]) {
      color: #F0D08A;
      background: rgba(240, 180, 80, 0.12);
      border-color: rgba(240, 180, 80, 0.32);
      box-shadow: none;
    }
    #myhome .myhome-backup-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }
    #myhome .btn-myhome-backup-action {
      width: 100%;
      min-height: 46px;
      margin: 0;
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 650;
      border-radius: 12px;
      box-sizing: border-box;
      text-align: center;
      background: #FFFFFF;
      border: 1px solid rgba(60, 40, 20, 0.12);
      color: #4F4740;
    }
    [data-theme="dark"] #myhome .btn-myhome-backup-action {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.1);
      color: #C5D0CC;
    }
    #myhome .btn-myhome-backup-action[hidden] { display: none !important; }
    #myhome .myhome-tools-hint {
      margin: 0 0 10px;
      padding: 0 2px 0 1.15em;
      font-size: 12px;
      font-weight: 550;
      line-height: 1.45;
      color: var(--muted);
    }
    #myhome .myhome-tools-hint li {
      margin: 0 0 6px;
      padding-left: 0.15em;
    }
    #myhome .myhome-tools-hint li:last-child { margin-bottom: 0; }
    #myhome .myhome-tools-hint strong { color: var(--text); font-weight: 700; }
    #myhome .myhome-tools-hint em {
      font-style: normal;
      font-weight: 650;
      color: var(--text);
      word-break: break-all;
    }
    #myhome .myhome-tools[hidden] { display: none !important; }
    #myhome .btn-myhome-clear {
      appearance: none;
      width: 100%;
      margin: 2px 0 0;
      padding: 12px 14px;
      border: 1px solid rgba(185, 28, 28, 0.2);
      border-radius: 12px;
      background: #FEF2F2;
      color: #B91C1C;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
    }
    #myhome .btn-myhome-clear[hidden] { display: none !important; }
    #myhome .btn-myhome-clear:active {
      background: #FEE2E2;
    }
    [data-theme="dark"] #myhome .btn-myhome-clear {
      color: #FCA5A5;
      border-color: rgba(248, 113, 113, 0.28);
      background: rgba(127, 29, 29, 0.22);
    }
    #myhome .myhome-tools {
      margin: 2px 0 0;
      border-radius: 12px;
      border: 1px solid rgba(60, 40, 20, 0.1);
      background: #F7F4EF;
      overflow: hidden;
    }
    [data-theme="dark"] #myhome .myhome-tools {
      border-color: rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
    }
    #myhome .myhome-tools > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #6B6258;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    [data-theme="dark"] #myhome .myhome-tools > summary {
      color: #9AA8B4;
    }
    #myhome .myhome-tools > summary::-webkit-details-marker { display: none; }
    #myhome .myhome-tools > summary::after {
      content: '▾';
      font-size: 11px;
      opacity: 0.65;
      transition: transform 0.15s ease;
    }
    #myhome .myhome-tools[open] > summary::after { transform: rotate(180deg); }
    #myhome .myhome-tools-body {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0 12px 12px;
    }
    #myhome .btn-tool {
      appearance: none;
      width: 100%;
      min-height: 42px;
      margin: 0;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(15, 118, 110, 0.12);
      background: #FFFFFF;
      color: var(--text);
      font: inherit;
      font-size: 13.5px;
      font-weight: 650;
      cursor: pointer;
      text-align: left;
    }
    [data-theme="dark"] #myhome .btn-tool {
      background: #151C1A;
      border-color: rgba(255, 255, 255, 0.1);
      color: #E8F0ED;
    }
    #myhome .btn-tool-danger {
      color: #B91C1C;
      border-color: rgba(185, 28, 28, 0.18);
      background: #FEF2F2;
    }
    [data-theme="dark"] #myhome .btn-tool-danger {
      color: #FCA5A5;
      border-color: rgba(248, 113, 113, 0.22);
      background: rgba(127, 29, 29, 0.22);
    }
    #myhome .btn-tool[hidden] { display: none !important; }

    @media (hover: hover) and (pointer: fine) {
      #myhome .btn-myhome-share:hover {
        border-color: rgba(60, 40, 20, 0.2);
        background: #FAF8F5;
      }
      #myhome #myHomeAddPowerBtn:hover {
        filter: brightness(1.06);
      }
      #myhome #myHomeAddWaterBtn:hover {
        filter: brightness(1.06);
      }
      #myhome .btn-myhome-resync:not([hidden]):hover {
        border-color: rgba(180, 120, 40, 0.5);
      }
      .home-saved-actions .btn-primary:hover {
        background: #0D9488;
      }
      #myhome .myhome-actions .btn-secondary:hover,
      #myhome .btn-tool:hover {
        border-color: rgba(15, 118, 110, 0.28);
      }
    }

    /* Habit badge on What if rows */
    .scenario-preview.is-habit {
      background: rgba(245, 158, 11, 0.14);
      color: #B45309;
    }
    [data-theme="dark"] .scenario-preview.is-habit {
      background: rgba(251, 191, 36, 0.16);
      color: #FCD34D;
    }
    .scenario-btn.active .scenario-preview.is-habit {
      color: #92400E;
      background: rgba(255, 251, 235, 0.95);
    }
    [data-theme="dark"] .scenario-btn.active .scenario-preview.is-habit {
      color: #0C1211;
      background: rgba(254, 243, 199, 0.95);
    }

    .empty-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-top: 4px;
      margin-bottom: 14px;
    }
    .empty-quick button {
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      background: linear-gradient(165deg, #FFFFFF, #EEF7F4);
      color: var(--text);
      border-radius: 999px;
      padding: 9px 14px;
      font: inherit;
      font-size: 13px;
      font-weight: 680;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
    }
    /* empty-quick press uses shared :active ring above */
    [data-theme="dark"] .empty-quick button {
      background: #1A2321;
      border-color: rgba(45, 212, 191, 0.28);
      color: #E8F5F1;
      box-shadow: none;
    }

    .tou-note {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px dashed rgba(15, 118, 110, 0.28);
      background: rgba(15, 118, 110, 0.04);
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--muted);
    }
    [data-theme="dark"] .tou-note {
      border-color: rgba(45, 212, 191, 0.22);
      background: rgba(45, 212, 191, 0.06);
      color: #9BB0AA;
    }

    /* Compact version on results */
    .rate-banner.compact {
      margin: 12px 0 0;
      padding: 10px 12px;
      border-radius: 14px;
    }
    .rate-banner.compact .rate-banner-ico {
      width: 36px;
      height: 36px;
      font-size: 17px;
      border-radius: 11px;
    }
    .rate-banner.compact .rate-banner-value {
      font-size: 0.98rem;
    }

    /*
      Browse panel = white card on paper (clear block).
      Flat fill only — no radials that shift when All ↔ Categories swaps height.
    */
    /* Browse stage — second white island under rate */
    .browse-panel {
      position: relative;
      overflow: visible;
      margin-top: 4px;
      padding: 16px 14px 18px;
      border-radius: 22px;
      border: 1.5px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 10px 28px rgba(40, 28, 16, 0.1),
        0 2px 8px rgba(40, 28, 16, 0.04);
    }
    .browse-panel::before {
      display: none;
      content: none;
    }
    [data-theme="dark"] .browse-panel {
      border-color: rgba(255, 255, 255, 0.12);
      background: #171F1D;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
    }
    html:not([data-theme="dark"]) body.utility-water .browse-panel {
      background: #FFFFFF;
      border-color: rgba(60, 40, 20, 0.12);
    }
    [data-theme="dark"] body.utility-water .browse-panel {
      background: #171F1D;
      border-color: rgba(255, 255, 255, 0.12);
    }
    /* Search — after Start with these, before Recent.
       Field on the white card, not a second rate-banner. */
    .browse-panel .search-wrap {
      margin: 0 0 14px;
      padding: 4px 12px 4px 6px;
      min-height: 48px;
      border-radius: 14px;
      border: 1.5px solid rgba(15, 118, 110, 0.22);
      background: #FFFCFA;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(15, 118, 110, 0.06);
    }
    [data-theme="dark"] .browse-panel .search-wrap {
      background: #151C1A;
      border-color: rgba(45, 212, 191, 0.26);
      box-shadow: none;
    }
    .browse-panel .search-wrap:focus-within {
      border-color: #0F766E;
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
    }
    [data-theme="dark"] .browse-panel .search-wrap:focus-within {
      border-color: #5EEAD4;
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
    }
    .browse-panel .search-wrap .search-icon {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #E6F3F0;
      color: #0F766E;
      opacity: 1;
      font-size: 0;
      border: none;
      box-shadow: none;
    }
    .browse-panel .search-wrap .search-icon svg {
      display: block;
      width: 17px;
      height: 17px;
    }
    html:not([data-theme="dark"]) body.utility-water .browse-panel .search-wrap {
      background: #FFFCFA;
      border-color: rgba(3, 105, 161, 0.24);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(3, 105, 161, 0.06);
    }
    [data-theme="dark"] body.utility-water .browse-panel .search-wrap {
      background: #151C1A;
      border-color: rgba(34, 211, 238, 0.26);
    }
    body.utility-water .browse-panel .search-wrap .search-icon {
      background: #E0F2FE;
      color: #0369A1;
      border: none;
      box-shadow: none;
    }
    [data-theme="dark"] .browse-panel .search-wrap .search-icon {
      background: rgba(45, 212, 191, 0.14);
      color: #5EEAD4;
      border: none;
      box-shadow: none;
    }
    .browse-panel .search-wrap input,
    .browse-panel .search-wrap input[type="search"] {
      background: transparent !important;
      font-weight: 600;
    }
    [data-theme="dark"] .browse-panel .search-wrap input,
    [data-theme="dark"] .browse-panel .search-wrap input[type="search"] {
      background: transparent !important;
    }

    .browse-label {
      font-size: 0.95rem;
      font-weight: 760;
      letter-spacing: -0.02em;
      text-transform: none;
      color: #1A1612;
      margin: 4px 0 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .browse-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(15, 118, 110, 0.28), transparent);
    }
    [data-theme="dark"] .browse-label {
      color: #F0F7F5;
    }
    [data-theme="dark"] .browse-label::after {
      background: linear-gradient(90deg, rgba(45, 212, 191, 0.2), transparent);
    }

    /* Start here — 3 hero picks (same cream DNA as appliance tiles, bigger invite) */
    .start-here {
      margin: 0 0 16px;
      padding: 0;
      border: none;
      background: none;
      box-shadow: none;
      border-radius: 0;
    }
    .start-here[hidden] { display: none !important; }
    [data-theme="dark"] .start-here {
      border: none;
      background: none;
      box-shadow: none;
    }
    .start-here-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.95rem;
      font-weight: 760;
      letter-spacing: -0.02em;
      text-transform: none;
      color: #1A1612;
      margin: 0 0 10px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      cursor: default;
      pointer-events: none;
      user-select: none;
    }
    .start-here-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(60, 40, 20, 0.22), transparent);
    }
    [data-theme="dark"] .start-here-label {
      color: #F0F7F5;
      background: none;
      border: none;
    }
    [data-theme="dark"] .start-here-label::after {
      background: linear-gradient(90deg, rgba(45, 212, 191, 0.2), transparent);
    }
    body.utility-water .start-here-label {
      color: var(--text);
      background: none;
      border: none;
    }
    .start-here-chips {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: visible;
    }
    .start-chip {
      flex: 0 0 auto;
      width: 100%;
      min-width: 0;
      appearance: none;
      --tone: #14B8A6;
      --tone-soft: rgba(20, 184, 166, 0.16);
      position: relative;
      overflow: hidden;
      /* Flat shell + category tint — no gradient fog */
      border: 1px solid color-mix(in srgb, var(--tone) 34%, rgba(60, 40, 20, 0.12));
      background: color-mix(in srgb, var(--tone) 10%, #FFFCFA);
      color: var(--text);
      font: inherit;
      padding: 12px 14px 12px 12px;
      border-radius: 16px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      text-align: left;
      box-shadow: 0 2px 10px rgba(40, 28, 16, 0.06);
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.12s;
    }
    /* Tone accent bar — same language as appliance tiles */
    .start-chip::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 4px;
      border-radius: 0 5px 5px 0;
      background: var(--tone);
      pointer-events: none;
    }
    .start-chip .start-chip-emoji {
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
      line-height: 1;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
      background: color-mix(in srgb, var(--tone) 28%, #fff);
      border: 1.5px solid color-mix(in srgb, var(--tone) 48%, transparent);
      box-shadow: none;
      transition: transform 0.12s;
    }
    .start-chip-text {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .start-chip .start-chip-name {
      font-size: 15px;
      font-weight: 760;
      letter-spacing: -0.02em;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .start-chip .start-chip-sub {
      font-size: 12px;
      font-weight: 600;
      color: #4F4740;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    [data-theme="dark"] .start-chip .start-chip-sub {
      color: #B0C4BE;
    }
    .start-chip-go {
      flex: 0 0 auto;
      font-size: 18px;
      font-weight: 600;
      color: color-mix(in srgb, var(--tone) 72%, var(--muted));
      line-height: 1;
      opacity: 0.95;
    }
    .start-chip[data-tone="cool"]    { --tone:#38BDF8; --tone-soft:rgba(56,189,248,.18); }
    .start-chip[data-tone="heat"]    { --tone:#FB923C; --tone-soft:rgba(251,146,60,.18); }
    .start-chip[data-tone="kitchen"] { --tone:#F59E0B; --tone-soft:rgba(245,158,11,.16); }
    .start-chip[data-tone="laundry"] { --tone:#A78BFA; --tone-soft:rgba(167,139,250,.18); }
    .start-chip[data-tone="tech"]    { --tone:#818CF8; --tone-soft:rgba(129,140,248,.18); }
    .start-chip[data-tone="water"]   { --tone:#2DD4BF; --tone-soft:rgba(45,212,191,.16); }
    .start-chip[data-tone="light"]   { --tone:#FBBF24; --tone-soft:rgba(251,191,36,.18); }
    .start-chip[data-tone="clean"]   { --tone:#34D399; --tone-soft:rgba(52,211,153,.16); }
    .start-chip[data-tone="audio"]   { --tone:#F472B6; --tone-soft:rgba(244,114,182,.16); }
    .start-chip[data-tone="outdoor"] { --tone:#4ADE80; --tone-soft:rgba(74,222,128,.16); }
    @media (hover: hover) and (pointer: fine) {
      .start-chip:hover {
        border-color: color-mix(in srgb, var(--tone) 48%, rgba(60, 40, 20, 0.1));
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.9) inset,
          0 6px 16px color-mix(in srgb, var(--tone) 16%, rgba(40, 28, 16, 0.06));
        transform: translateY(-1px);
      }
      .start-chip:hover .start-chip-emoji {
        transform: scale(1.05);
      }
      .start-chip:hover .start-chip-go {
        opacity: 1;
        color: var(--tone);
      }
      [data-theme="dark"] .start-chip:hover {
        border-color: color-mix(in srgb, var(--tone) 45%, rgba(255, 255, 255, 0.12));
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
      }
    }
    .start-chip:active {
      transform: scale(0.985);
      border-color: color-mix(in srgb, var(--tone) 55%, rgba(60, 40, 20, 0.1));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 22%, transparent);
    }
    [data-theme="dark"] .start-chip {
      background: color-mix(in srgb, var(--tone) 14%, #151C1A);
      border-color: color-mix(in srgb, var(--tone) 38%, rgba(255, 255, 255, 0.1));
      color: var(--text);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] .start-chip .start-chip-emoji {
      background: color-mix(in srgb, var(--tone) 32%, #141A1C);
      border-color: color-mix(in srgb, var(--tone) 50%, rgba(255, 255, 255, 0.08));
      box-shadow: none;
    }

    .filter-row {
      margin-bottom: 10px;
      padding-bottom: 2px;
    }
    .filter-chip {
      flex: 0 0 auto;
      border: 1px solid rgba(15, 118, 110, 0.22);
      background: #F4F8F6;
      color: #3F3832;
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 1px 4px rgba(40, 28, 16, 0.05);
      transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s, color 0.12s;
      position: relative;
      z-index: 1;
      touch-action: manipulation;
    }
    /* filter-chip press uses shared :active ring above */
    /* Idle chips stay neutral; only active uses brand teal */
    [data-theme="dark"] .filter-chip {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.14);
      color: #C4D4CE;
      box-shadow: none;
    }
    /* Unselected All / Categories — clear hover so they feel tappable */
    @media (hover: hover) and (pointer: fine) {
      .filter-chip:not(.active):hover {
        color: var(--accent-deep);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        background: color-mix(in srgb, var(--accent) 8%, #FFFFFF);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 14%, rgba(15, 28, 26, 0.04));
      }
      [data-theme="dark"] .filter-chip:not(.active):hover {
        color: var(--accent2);
        border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.12));
        background: color-mix(in srgb, var(--accent) 14%, #1A2321);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
      }
    }
    /* Active must come last + beat [data-cat] so text never sits on white */
    .filter-chip.active,
    .filter-chip.active[data-cat] {
      color: #fff;
      background: var(--accent);
      border-color: transparent;
      box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 32%, transparent);
    }
    [data-theme="dark"] .filter-chip.active,
    [data-theme="dark"] .filter-chip.active[data-cat] {
      color: #0B0F12;
      background: var(--accent2);
      border-color: transparent;
      box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
    }
    #applianceList .grid {
      margin-bottom: 2px;
    }

    .section-title {
      font-size: 1.45rem;
      font-weight: 780;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
    }
    .section-sub {
      color: var(--muted);
      font-size: 0.95rem;
      margin-bottom: 18px;
      line-height: 1.45;
    }

    .btn-primary, .btn-secondary {
      width: 100%;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 650;
      cursor: pointer;
      padding: 15px 18px;
      border: none;
      letter-spacing: -0.01em;
    }
    .btn-primary {
      background: #0F766E;
      color: #fff;
      box-shadow: 0 8px 20px rgba(15, 118, 110, 0.26);
      transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .btn-secondary {
      background: #EEF6F3;
      color: var(--text);
      border: 1px solid rgba(15, 118, 110, 0.18);
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.06);
      transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    [data-theme="dark"] .btn-secondary {
      background: #1A2321;
      border-color: rgba(255, 255, 255, 0.12);
      color: #E8F5F1;
      box-shadow: none;
    }
    /* Hover: wash + edge shadow (real pointers only) */
    @media (hover: hover) and (pointer: fine) {
      .btn-primary:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.28) inset,
          0 10px 24px rgba(15, 118, 110, 0.38),
          0 4px 10px rgba(15, 118, 110, 0.18);
      }
      .btn-secondary:hover {
        border-color: rgba(15, 118, 110, 0.32);
        background: #E4F3EE;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(15, 118, 110, 0.12);
      }
      [data-theme="dark"] .btn-secondary:hover {
        border-color: rgba(45, 212, 191, 0.35);
        background: #1F2A27;
        box-shadow:
          0 8px 18px rgba(0, 0, 0, 0.3),
          0 3px 10px rgba(45, 212, 191, 0.08);
      }
    }
    /* primary/secondary press uses shared :active ring above */

    .btn-row { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
    .btn-row.inline { flex-direction: row; }
    .btn-row.inline > * { flex: 1; }

    .field-label-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    .field-label-row label { margin-bottom: 0; }
    .link-btn {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent-deep);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
    }
    [data-theme="dark"] .link-btn { color: var(--accent2); }
    /* link-btn press uses shared :active ring above */

    .search-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      background: #FFFFFF;
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 2px 14px;
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.04);
    }
    [data-theme="dark"] .search-wrap {
      background: #0F1614;
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }
    .search-wrap:focus-within {
      border-color: var(--accent2);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    [data-theme="dark"] .search-wrap:focus-within {
      border-color: rgba(45, 212, 191, 0.4);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
    }
    .search-wrap .search-icon {
      flex: 0 0 auto;
      opacity: 0.45;
      font-size: 15px;
      line-height: 1;
      pointer-events: none;
      user-select: none;
      color: var(--muted);
    }
    /* Phone-readable search text (iOS/Android often wash out transparent inputs) */
    .search-wrap input,
    .search-wrap input[type="search"] {
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
      background: #FFFFFF !important;
      border: none !important;
      color: #1C1814 !important;
      -webkit-text-fill-color: #1C1814 !important;
      caret-color: #0F766E;
      opacity: 1 !important;
      padding: 12px 0;
      border-radius: 0;
      font-size: 16px; /* avoids iOS zoom + stays legible */
      font-weight: 500;
      box-shadow: none !important;
      line-height: 1.35;
      -webkit-appearance: none;
      appearance: none;
    }
    [data-theme="dark"] .search-wrap input,
    [data-theme="dark"] .search-wrap input[type="search"] {
      background: transparent !important;
      color: #F0F7F5 !important;
      -webkit-text-fill-color: #F0F7F5 !important;
      caret-color: #5EEAD4;
    }
    .search-wrap input::placeholder {
      color: #7A8F89 !important;
      -webkit-text-fill-color: #7A8F89 !important;
      opacity: 1;
    }
    [data-theme="dark"] .search-wrap input::placeholder {
      color: #6D827C !important;
      -webkit-text-fill-color: #6D827C !important;
    }
    .search-wrap input:focus {
      outline: none;
      border: none;
      box-shadow: none;
    }

    .chip-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      /* Room for active/hover chip glow — overflow-y:hidden was clipping the All pill shadow */
      overflow-y: visible;
      padding-top: 6px;
      padding-bottom: 12px;
      padding-right: 56px; /* empty grab zone past last chip for drag-scroll */
      margin: -2px 0 4px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      /* Allow vertical page scroll; horizontal drag handled in JS */
      touch-action: manipulation;
      cursor: grab;
      overscroll-behavior-x: contain;
    }
    /* Category All / Categories row: only a few chips — never needs x-scroll clip */
    #categoryFilters.chip-row {
      overflow: visible;
      padding-right: 4px;
      cursor: default;
    }
    .chip-row::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .chip-row.is-dragging {
      cursor: grabbing;
      user-select: none;
      scroll-behavior: auto;
    }
    /* Only disable chip hits while actually dragging — not on every press */
    .chip-row.is-dragging .filter-chip,
    .chip-row.is-dragging .chip {
      pointer-events: none;
    }
    .chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #EEF6F3;
      border: 1px solid var(--good-border);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 14px 8px 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(15, 118, 110, 0.06);
    }
    [data-theme="dark"] .chip {
      background: #1A2321;
      border-color: rgba(45, 212, 191, 0.22);
    }
    .chip:active { background: var(--accent-soft); }
    .chip-emoji {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--accent-soft);
      border: 1px solid var(--good-border);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
      box-shadow: none;
    }
    [data-theme="dark"] .chip-emoji {
      background: var(--accent-soft);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      /* isolate grid paints from the rest of the page */
      contain: layout style;
    }
    #applianceList .grid {
      gap: 10px;
    }
    #applianceList {
      contain: layout;
      min-height: 120px;
    }
    #applianceList .empty,
    .empty-browse {
      text-align: center;
      padding: 28px 16px 26px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.4;
      background: #F5FAF7;
      border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
      border-radius: 18px;
      box-shadow: 0 2px 8px rgba(40, 28, 16, 0.04);
    }
    [data-theme="dark"] #applianceList .empty,
    [data-theme="dark"] .empty-browse {
      background: #171F1D;
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: none;
    }
    .empty-browse-emoji {
      font-size: 1.85rem;
      line-height: 1;
      margin-bottom: 10px;
      filter: saturate(1.05);
    }
    .empty-browse-title {
      font-size: 1rem;
      font-weight: 780;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-bottom: 4px;
    }
    .empty-browse-hint {
      font-size: 0.9rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.4;
      max-width: 22em;
      margin: 0 auto;
    }

    /* Deep home search — sectioned list of apps / What if / settings */
    .search-results {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 2px 0 8px;
    }
    .search-results-head {
      font-size: 0.72rem;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 10px 4px 2px;
    }
    .search-results-head:first-child {
      padding-top: 2px;
    }
    .search-hit {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--card, #fff);
      color: var(--text);
      box-shadow: 0 1px 4px rgba(40, 28, 16, 0.04);
      cursor: pointer;
      font: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    [data-theme="dark"] .search-hit {
      background: #171F1D;
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }
    .search-hit:active {
      transform: scale(0.99);
    }
    .search-hit-emoji {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-size: 1.25rem;
      line-height: 1;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .search-hit[data-kind="whatif"] .search-hit-emoji {
      background: color-mix(in srgb, #8B5CF6 16%, transparent);
    }
    .search-hit[data-kind="setting"] .search-hit-emoji {
      background: color-mix(in srgb, #F59E0B 16%, transparent);
    }
    .search-hit-text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .search-hit-title {
      font-size: 0.95rem;
      font-weight: 720;
      letter-spacing: -0.015em;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-hit-sub {
      font-size: 0.78rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-hit-badge {
      flex-shrink: 0;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--muted);
      background: color-mix(in srgb, var(--muted) 12%, transparent);
      border-radius: 999px;
      padding: 4px 8px;
      white-space: nowrap;
    }
    .search-extra-box {
      margin: 10px 0 4px;
      padding: 4px 6px 6px;
      border-radius: 16px;
      border: 1.5px solid rgba(60, 40, 20, 0.1);
      background: #F4F1EC;
    }
    .search-extra-box .search-results-head {
      padding: 6px 4px 6px;
    }
    .search-hit[data-kind="whatif"],
    .search-hit[data-kind="setting"] {
      min-height: 0;
      padding: 7px 8px;
      gap: 8px;
    }
    .search-hit[data-kind="whatif"] .search-hit-emoji,
    .search-hit[data-kind="setting"] .search-hit-emoji {
      width: 28px;
      height: 28px;
      font-size: 0.95rem;
      border-radius: 8px;
    }
    .search-hit[data-kind="whatif"] .search-hit-title,
    .search-hit[data-kind="setting"] .search-hit-title {
      font-size: 0.86rem;
    }
    .search-hit[data-kind="whatif"] {
      background: #FAF7FF;
      border: 1.5px solid rgba(124, 58, 237, 0.22);
      box-shadow: none;
    }
    .search-hit[data-kind="setting"] {
      background: #FFFBF3;
      border: 1.5px solid rgba(180, 83, 9, 0.18);
      box-shadow: none;
    }
    [data-theme="dark"] .search-extra-box {
      background: #141816;
      border-color: rgba(255, 255, 255, 0.1);
    }
    [data-theme="dark"] .search-hit[data-kind="whatif"] {
      background: #1A1624;
      border-color: rgba(196, 181, 253, 0.22);
    }
    .search-hit[data-kind="whatif"] .search-hit-badge {
      color: #7C3AED;
      background: rgba(139, 92, 246, 0.12);
    }
    [data-theme="dark"] .search-hit[data-kind="whatif"] .search-hit-badge {
      color: #C4B5FD;
    }
    .search-hit[data-kind="setting"] .search-hit-badge {
      color: #B45309;
      background: rgba(245, 158, 11, 0.14);
    }
    [data-theme="dark"] .search-hit[data-kind="setting"] .search-hit-badge {
      color: #FCD34D;
    }

    /*
      Appliance tiles: clean white card + solid left accent + circular icon.
      No pastel fog wash — tone color is intentional, not milky.
    */
    /*
      Appliance / category tiles — cream shell + colored icon well + left bar.
      Same family as Start here hero rows.
    */
    .appliance-card {
      position: relative;
      overflow: hidden;
      /* Slightly stronger tone so category tiles read as a grid, not beige soup */
      background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.65) 0%, transparent 45%),
        color-mix(in srgb, var(--tone) 14%, #FFFFFF);
      border: 1.5px solid color-mix(in srgb, var(--tone) 40%, rgba(60, 40, 20, 0.12));
      border-radius: 18px;
      padding: 14px 10px 13px 12px;
      text-align: center;
      cursor: pointer;
      color: inherit;
      font: inherit;
      width: 100%;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 14px rgba(40, 28, 16, 0.08);
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
      content-visibility: auto;
      contain-intrinsic-size: auto 120px;
      contain: layout paint style;
      --tone: #14B8A6;
      --tone-soft: rgba(20, 184, 166, 0.2);
      --tone-glow: rgba(20, 184, 166, 0.24);
    }
    .appliance-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 11px;
      bottom: 11px;
      width: 4px;
      border-radius: 0 5px 5px 0;
      background: var(--tone);
      pointer-events: none;
      z-index: 2;
    }
    .appliance-card::after {
      content: none;
      display: none;
    }
    [data-theme="dark"] .appliance-card {
      background: color-mix(in srgb, var(--tone) 12%, #151C1A);
      border-color: color-mix(in srgb, var(--tone) 40%, rgba(255, 255, 255, 0.12));
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.36);
    }
    @media (hover: hover) and (pointer: fine) {
      .appliance-card:hover {
        border-color: color-mix(in srgb, var(--tone) 52%, rgba(60, 40, 20, 0.1));
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.9) inset,
          0 8px 22px color-mix(in srgb, var(--tone) 20%, rgba(40, 28, 16, 0.08));
        transform: translateY(-2px);
      }
      [data-theme="dark"] .appliance-card:hover {
        border-color: color-mix(in srgb, var(--tone) 50%, rgba(255, 255, 255, 0.1));
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
      }
    }
    .appliance-card:active {
      transform: scale(0.97);
      border-color: color-mix(in srgb, var(--tone) 55%, rgba(60, 40, 20, 0.1));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 22%, transparent);
    }

    .appliance-card[data-tone="cool"]    { --tone:#38BDF8; --tone-soft:rgba(56,189,248,.2); }
    .appliance-card[data-tone="heat"]    { --tone:#F97316; --tone-soft:rgba(249,115,22,.2); }
    .appliance-card[data-tone="kitchen"] { --tone:#EAB308; --tone-soft:rgba(234,179,8,.2); }
    .appliance-card[data-tone="laundry"] { --tone:#8B5CF6; --tone-soft:rgba(139,92,246,.2); }
    .appliance-card[data-tone="tech"]    { --tone:#6366F1; --tone-soft:rgba(99,102,241,.2); }
    .appliance-card[data-tone="water"]   { --tone:#14B8A6; --tone-soft:rgba(20,184,166,.2); }
    .appliance-card[data-tone="light"]   { --tone:#F59E0B; --tone-soft:rgba(245,158,11,.2); }
    .appliance-card[data-tone="clean"]   { --tone:#10B981; --tone-soft:rgba(16,185,129,.2); }
    .appliance-card[data-tone="audio"]   { --tone:#EC4899; --tone-soft:rgba(236,72,153,.2); }
    .appliance-card[data-tone="outdoor"] { --tone:#22C55E; --tone-soft:rgba(34,197,94,.2); }
    .appliance-card,
    .appliance-card[data-tone] {
      --tone-glow: color-mix(in srgb, var(--tone) 28%, transparent);
    }

    .appliance-icon-wrap {
      position: relative;
      z-index: 1;
      width: 56px;
      height: 56px;
      margin: 0 auto;
      border-radius: 16px;
      background: color-mix(in srgb, var(--tone) 30%, #fff);
      border: 1.5px solid color-mix(in srgb, var(--tone) 48%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: none;
    }
    [data-theme="dark"] .appliance-icon-wrap {
      background: color-mix(in srgb, var(--tone) 32%, #141A1C);
      border-color: color-mix(in srgb, var(--tone) 50%, rgba(255, 255, 255, 0.08));
      box-shadow: none;
    }
    .appliance-emoji {
      position: relative;
      z-index: 1;
      font-size: 28px;
      line-height: 1;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
      filter: none;
    }
    [data-theme="dark"] .appliance-emoji {
      filter: none;
    }
    .appliance-name {
      position: relative;
      z-index: 1;
      font-size: clamp(12px, 3.2vw, 13.5px);
      font-weight: 750;
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: 1.25;
      max-width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
      hyphens: auto;
    }
    .appliance-hub-sub {
      position: relative;
      z-index: 1;
      margin-top: 1px;
      font-size: 11px;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.25;
      max-width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .appliance-card-hub .appliance-name {
      font-weight: 760;
    }
    #applianceList .grid.grid-hubs {
      gap: 10px;
    }
    .appliance-card-cat {
      padding: 16px 10px 14px 12px;
      min-height: 132px;
      gap: 8px;
    }
    .appliance-card-cat .appliance-icon-wrap {
      width: 58px;
      height: 58px;
    }
    .appliance-card-cat .appliance-emoji {
      font-size: 30px;
    }
    .appliance-card-cat .appliance-name {
      font-size: 14px;
      font-weight: 780;
      letter-spacing: -0.02em;
    }
    .appliance-card-cat .appliance-hub-sub {
      margin-top: 0;
      font-size: 11.5px;
    }
    .appliance-card-cat .appliance-hub-count {
      position: relative;
      z-index: 1;
      display: inline-block;
      margin-top: 4px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: 0.02em;
      color: color-mix(in srgb, var(--tone) 55%, var(--text));
      background: color-mix(in srgb, var(--tone) 18%, #FFFCFA);
      border: 1px solid color-mix(in srgb, var(--tone) 36%, transparent);
    }
    [data-theme="dark"] .appliance-card-cat .appliance-hub-count {
      color: color-mix(in srgb, var(--tone) 75%, #fff);
      background: color-mix(in srgb, var(--tone) 22%, transparent);
      border-color: color-mix(in srgb, var(--tone) 40%, transparent);
    }

    /* Chips: flat category shell + solid emoji pad */
    .chip[data-tone] {
      --tone: #14B8A6;
      --tone-soft: rgba(20, 184, 166, 0.16);
      --tone-border: rgba(20, 184, 166, 0.45);
      border-color: color-mix(in srgb, var(--tone) 38%, var(--border));
      background: color-mix(in srgb, var(--tone) 10%, #fff);
      box-shadow: 0 2px 6px rgba(40, 28, 16, 0.04);
    }
    [data-theme="dark"] .chip[data-tone] {
      background: color-mix(in srgb, var(--tone) 12%, #1A2321);
      border-color: color-mix(in srgb, var(--tone) 40%, rgba(255, 255, 255, 0.1));
    }
    .chip[data-tone="cool"]  { --tone:#38BDF8; --tone-soft:rgba(56,189,248,.18); --tone-border:rgba(56,189,248,.5); }
    .chip[data-tone="heat"]  { --tone:#FB923C; --tone-soft:rgba(251,146,60,.18); --tone-border:rgba(251,146,60,.5); }
    .chip[data-tone="kitchen"]{ --tone:#F59E0B; --tone-soft:rgba(245,158,11,.18); --tone-border:rgba(245,158,11,.5); }
    .chip[data-tone="laundry"]{ --tone:#A78BFA; --tone-soft:rgba(167,139,250,.18); --tone-border:rgba(167,139,250,.5); }
    .chip[data-tone="tech"]  { --tone:#818CF8; --tone-soft:rgba(129,140,248,.18); --tone-border:rgba(129,140,248,.5); }
    .chip[data-tone="water"] { --tone:#2DD4BF; --tone-soft:rgba(45,212,191,.18); --tone-border:rgba(45,212,191,.5); }
    .chip[data-tone="light"] { --tone:#FBBF24; --tone-soft:rgba(251,191,36,.18); --tone-border:rgba(251,191,36,.5); }
    .chip[data-tone="clean"] { --tone:#34D399; --tone-soft:rgba(52,211,153,.18); --tone-border:rgba(52,211,153,.5); }
    .chip[data-tone="audio"] { --tone:#F472B6; --tone-soft:rgba(244,114,182,.18); --tone-border:rgba(244,114,182,.5); }
    .chip[data-tone="outdoor"]{ --tone:#4ADE80; --tone-soft:rgba(74,222,128,.18); --tone-border:rgba(74,222,128,.5); }
    .chip[data-tone] .chip-emoji {
      background: color-mix(in srgb, var(--tone) 28%, #fff);
      border-color: var(--tone-border);
      box-shadow: none;
    }

    .empty {
      text-align: center;
      color: var(--muted);
      padding: 40px 16px;
      font-size: 14px;
      grid-column: 1 / -1;
      background: var(--bg1);
      border-radius: var(--radius);
      border: 1px dashed var(--border);
    }

    .result-card {
      position: relative;
      /* visible so dropdown overlays under selects are not clipped */
      overflow: visible;
      /*
        Top teal strip (same gradient as .home-hero):
        - painted as BACKGROUND so it follows border-radius (no square ends sticking out)
        - no top inset box-shadow (that was the white hairline above the teal)
        - no ::before (with overflow:visible a pseudo bar sticks out the corners)
      */
      --result-fill: #F6F1EA;
      background-color: var(--result-fill);
      background-image: none;
      border: 1px solid rgba(60, 40, 20, 0.12);
      border-radius: 20px;
      padding: 18px 14px 16px;
      box-shadow: 0 4px 16px rgba(40, 28, 16, 0.06);
      --result-glow: rgba(20, 184, 166, 0.22);
      --result-tone: #14B8A6;
      --result-bar-end: #0F766E;
    }
    body.utility-water .result-card {
      --result-glow: rgba(14, 116, 144, 0.22);
      --result-tone: #0E7490;
      --result-bar-end: #22D3EE;
      --result-strip: linear-gradient(90deg, #0C5F7A 0%, #0E7490 50%, #22D3EE 100%);
      border-color: rgba(60, 40, 20, 0.12);
    }
    html:not([data-theme="dark"]) body.utility-water .result-card {
      --result-fill: #EEF5F8;
    }
    /* data-tone no longer recolors the card shell glow — keep homepage brand wash */
    .result-card[data-tone] {
      --result-glow: rgba(20, 184, 166, 0.22);
      --result-tone: #14B8A6;
      --result-bar-end: #0F766E;
    }
    body.utility-water .result-card[data-tone] {
      --result-glow: rgba(14, 116, 144, 0.22);
      --result-tone: #0E7490;
      --result-bar-end: #22D3EE;
    }
    .result-card::before {
      content: none;
      display: none;
    }
    [data-theme="dark"] .result-card {
      --result-glow: rgba(45, 212, 191, 0.16);
      --result-strip: linear-gradient(90deg, #0D9488 0%, #14B8A6 50%, #2DD4BF 100%);
      --result-fill: #171F1D;
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] body.utility-water .result-card,
    [data-theme="dark"] body.utility-water .result-card[data-tone] {
      --result-glow: rgba(34, 211, 238, 0.16);
      --result-tone: #22D3EE;
      --result-bar-end: #67E8F9;
      --result-strip: linear-gradient(90deg, #0E7490 0%, #22D3EE 55%, #67E8F9 100%);
      --result-fill: #152024;
      border-color: rgba(34, 211, 238, 0.14);
    }
    .result-emoji-badge {
      width: 60px;
      height: 60px;
      margin: 0 auto 8px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      line-height: 1;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
      background: #FFFFFF;
      border: 1.5px solid rgba(60, 40, 20, 0.14);
      box-shadow: 0 1px 3px rgba(40, 28, 16, 0.06);
      filter: none;
      cursor: pointer;
      font: inherit;
      color: inherit;
      padding: 0;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    /* result-emoji press uses shared :active ring above */
    .result-emoji-badge .result-emoji-char {
      font-size: 28px;
      line-height: 1;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
      pointer-events: none;
    }
    [data-theme="dark"] .result-emoji-badge {
      background: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    /* Quick appliance switcher (tap emoji on results) */
    .appliance-switcher {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
      background: rgba(12, 18, 17, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      transform: translateZ(0);
    }
    .appliance-switcher.show {
      opacity: 1;
      pointer-events: auto;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .appliance-switcher[hidden] { display: none !important; }
    .appliance-switcher-sheet {
      width: 100%;
      max-width: 440px;
      max-height: min(78vh, 640px);
      display: flex;
      flex-direction: column;
      border-radius: 22px;
      background:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        linear-gradient(165deg, #FAFBFA 0%, #F2F7F5 100%);
      border: 1px solid rgba(15, 118, 110, 0.16);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
      overflow: hidden;
      transform: scale(0.97);
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .appliance-switcher.show .appliance-switcher-sheet {
      transform: scale(1);
    }
    [data-theme="dark"] .appliance-switcher-sheet {
      background:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(45, 212, 191, 0.1), transparent 55%),
        linear-gradient(165deg, #171F1D 0%, #141B1A 100%);
      border-color: rgba(45, 212, 191, 0.2);
    }
    .switcher-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 16px 10px;
    }
    .switcher-head-title {
      font-size: 1.05rem;
      font-weight: 780;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .switcher-close {
      appearance: none;
      border: 1.5px solid var(--border);
      background: var(--bg1);
      color: var(--muted);
      width: 36px;
      height: 36px;
      border-radius: 12px;
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
    }
    .switcher-search {
      padding: 0 14px 10px;
    }
    .switcher-search input {
      width: 100%;
      border: 1.5px solid var(--border);
      background: #fff;
      border-radius: 12px;
      padding: 11px 12px;
      font: inherit;
      font-size: 16px;
      color: var(--text);
    }
    [data-theme="dark"] .switcher-search input {
      background: #1A2321;
      border-color: rgba(45, 212, 191, 0.2);
      color: #F0F7F5;
    }
    .switcher-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 0 14px 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
      min-height: 0;
    }
    .switcher-card {
      appearance: none;
      border: 1px solid rgba(15, 28, 26, 0.08);
      background: linear-gradient(165deg, #fff, #F5F9F8);
      border-radius: 14px;
      padding: 12px 6px 10px;
      cursor: pointer;
      font: inherit;
      color: var(--text);
      text-align: center;
      box-shadow: 0 2px 8px rgba(15, 28, 26, 0.04);
    }
    /* switcher-card press uses shared :active ring above */
    .switcher-card.current {
      border-color: #14B8A6;
      box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
    }
    [data-theme="dark"] .switcher-card {
      background: linear-gradient(180deg, #1C2623, #151C1A);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .switcher-card-emoji {
      font-size: 26px;
      line-height: 1;
      margin-bottom: 6px;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    }
    .switcher-card-name {
      font-size: 11px;
      font-weight: 650;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .card, .more-section {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 70% 50% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
        linear-gradient(165deg, #FFFFFF 0%, #F6F7F8 100%);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 22px 18px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        var(--shadow-sm);
    }
    .more-section { margin-top: 14px; padding: 18px 14px 16px; border-radius: 24px; }
    .more-section::before {
      content: none;
      display: none;
    }
    [data-theme="dark"] .more-section {
      border-color: var(--border);
      background:
        radial-gradient(ellipse 70% 50% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
        linear-gradient(165deg, var(--bg1) 0%, var(--bg2) 100%);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
    .more-title {
      font-size: 0.95rem;
      font-weight: 650;
      letter-spacing: -0.01em;
      text-transform: none;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .more-title::before { content: none; display: none; }
    .more-sub {
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--muted);
      line-height: 1.4;
      margin: 0 0 14px;
    }
    [data-theme="dark"] .more-title { color: var(--muted); }

    /* Settings page sections */
    #settings .settings-divider {
      height: 1px;
      background: rgba(60, 40, 20, 0.08);
      margin: 18px 0 16px;
      border: none;
    }
    [data-theme="dark"] #settings .settings-divider {
      background: rgba(255, 255, 255, 0.08);
    }
    /* rate list styles live with compact settings block above */
    #settings .settings-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }
    #settings .settings-actions .btn-secondary {
      width: 100%;
      min-height: 44px;
      justify-content: center;
    }
    #settings .settings-version {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
    }
    #settings .settings-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 2px;
      margin: 10px 0 0;
      padding: 0;
      font-size: 13px;
      line-height: 1.4;
    }
    #settings .settings-link {
      appearance: none;
      border: none;
      background: none;
      padding: 4px 6px;
      margin: 0;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      color: var(--accent-deep, #0F766E);
      cursor: pointer;
      text-decoration: none;
    }
    #settings .settings-link:hover {
      text-decoration: underline;
    }
    #settings .settings-link-danger {
      color: #B91C1C;
    }
    [data-theme="dark"] #settings .settings-link {
      color: #5EEAD4;
    }
    [data-theme="dark"] #settings .settings-link-danger {
      color: #FCA5A5;
    }
    #settings .settings-link-dot {
      color: var(--muted);
      opacity: 0.7;
      user-select: none;
    }
    #settings .settings-actions {
      margin-top: 8px;
    }
    /* Settings help text — plain, not a fake disabled field */
    #settings .settings-hint,
    #settings p.rate-hint {
      margin: -2px 0 12px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      font-size: 12.5px;
      font-weight: 550;
      line-height: 1.4;
      color: var(--muted);
    }
    [data-theme="dark"] #settings .settings-hint,
    [data-theme="dark"] #settings p.rate-hint {
      background: transparent;
      border: none;
      color: #9BB0AA;
    }

    .tune-field {
      margin-bottom: 12px;
      padding: 14px;
      border-radius: 16px;
      background: linear-gradient(165deg, #F5FBFA, #EEF6F3);
      border: 1px solid rgba(10, 82, 76, 0.14);
      box-shadow: 0 2px 10px rgba(15, 118, 110, 0.04);
    }
    [data-theme="dark"] .tune-field {
      background: linear-gradient(165deg, #1A2421, #141B1A);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }
    .tune-field label {
      display: block;
      margin-bottom: 8px;
      color: var(--accent-deep);
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    [data-theme="dark"] .tune-field label {
      color: #99F6E4;
    }
    .tune-field .field-label-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .tune-field .field-label-row label { margin-bottom: 0; }
    .tune-field .link-btn { color: var(--accent-deep); }
    [data-theme="dark"] .tune-field .link-btn { color: var(--accent2); }
    .tune-field .slider-row input[type="number"] {
      color: var(--accent-deep);
      background: #ECFDF8;
      border-color: rgba(15, 118, 110, 0.22);
    }
    [data-theme="dark"] .tune-field .slider-row input[type="number"] {
      color: #5EEAD4;
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.22);
    }

    /*
      Custom dropdown — OVERLAY only.
      List is position:absolute under the bar so it does NOT push page content.
      Opens DOWN, scrolls inside, capped to free viewport space (nothing clipped).
    */
    .select-wrap {
      position: relative;
      width: 100%;
      z-index: 1;
    }
    .select-wrap.is-open {
      z-index: 200;
    }
    .setup-panel .setup-block:has(.select-wrap.is-open) {
      position: relative;
      z-index: 80;
    }
    .select-wrap select.native-select-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      opacity: 0;
      pointer-events: none;
    }
    .select-trigger {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      cursor: pointer;
      font: inherit;
      background: linear-gradient(165deg, #F7FCFA, #EEF6F3);
      border: 1.5px solid rgba(15, 118, 110, 0.22);
      color: var(--text);
      padding: 14px 14px 14px 14px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.35;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 3px 10px rgba(15, 118, 110, 0.06);
    }
    .tune-field .select-trigger {
      border-color: rgba(15, 118, 110, 0.2);
      background: linear-gradient(165deg, #F7FCFA, #EEF6F3);
    }
    .select-trigger:hover {
      border-color: rgba(15, 118, 110, 0.4);
    }
    .tune-field .select-trigger:hover {
      border-color: color-mix(in srgb, var(--tf) 55%, transparent);
    }
    .select-trigger:focus {
      outline: none;
      border-color: #14B8A6;
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
    }
    .select-trigger[aria-expanded="true"] {
      border-color: #14B8A6;
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
    }
    .select-trigger-label {
      flex: 1 1 auto;
      min-width: 0;
    }
    .select-chevron {
      flex: 0 0 auto;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--accent-deep);
      border-bottom: 2px solid var(--accent-deep);
      transform: rotate(45deg) translateY(-2px);
      opacity: 0.65;
      transition: transform 0.15s ease;
    }
    .select-trigger[aria-expanded="true"] .select-chevron {
      transform: rotate(225deg) translateY(-1px);
    }
    [data-theme="dark"] .select-trigger {
      background: linear-gradient(165deg, #1C2623, #15201D);
      border-color: rgba(45, 212, 191, 0.24);
      color: #F0F7F5;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    [data-theme="dark"] .tune-field .select-trigger {
      background: linear-gradient(165deg, #1C2623, color-mix(in srgb, var(--tf) 10%, #15201D));
      border-color: var(--tf-border);
    }
    [data-theme="dark"] .select-chevron {
      border-color: var(--accent2);
    }

    /*
      Overlay panel: anchored under the trigger, does not affect layout flow.
      max-height is also set in JS from free space below so rows never clip.
    */
    .select-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      bottom: auto;
      width: 100%;
      box-sizing: border-box;
      z-index: 250;
      max-height: min(50vh, 360px);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      padding: 4px;
      scroll-padding-bottom: 8px;
      height: auto;
      min-height: 0;
      margin: 0;
      border-radius: 14px;
      isolation: isolate;
      background: #FFFFFF;
      border: 1.5px solid rgba(15, 23, 20, 0.22);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 16px rgba(15, 23, 20, 0.10),
        0 22px 44px rgba(15, 23, 20, 0.22);
      scrollbar-width: thin;
    }
    .select-menu[hidden] {
      display: none !important;
    }
    .select-menu .select-option:last-child {
      margin-bottom: 0;
    }
    [data-theme="dark"] .select-menu {
      background: #1A2421;
      border-color: rgba(45, 212, 191, 0.42);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 28px 56px rgba(0, 0, 0, 0.6);
    }
    .select-option-thumb,
    .select-trigger-thumb {
      width: 72px;
      height: 72px;
      object-fit: cover;
      border-radius: 10px;
      flex-shrink: 0;
      background: #EDE8E0;
      cursor: zoom-in;
    }
    .select-trigger-thumb {
      width: 40px;
      height: 40px;
      cursor: default;
    }
    @media (min-width: 720px) {
      .select-option-thumb {
        width: 120px;
        height: 120px;
      }
      .select-trigger-thumb {
        width: 52px;
        height: 52px;
      }
    }
    .setting-photo-hover {
      position: fixed;
      z-index: 3900;
      width: min(42vw, 380px);
      pointer-events: none;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 18px 48px rgba(20, 16, 12, 0.35);
      background: #1C1814;
    }
    .setting-photo-hover[hidden] { display: none !important; }
    .setting-photo-hover img {
      display: block;
      width: 100%;
      height: auto;
    }
    .select-trigger {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .setting-photo-peek {
      position: fixed;
      inset: 0;
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      background: rgba(20, 16, 12, 0.72);
    }
    .setting-photo-peek[hidden] { display: none !important; }
    .setting-photo-peek img {
      max-width: min(94vw, 720px);
      max-height: 86vh;
      border-radius: 16px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    }
    .setting-photo-peek-close {
      position: absolute;
      top: 16px;
      right: 16px;
      border: none;
      border-radius: 999px;
      padding: 8px 14px;
      font: inherit;
      font-weight: 700;
      background: #FFFCFA;
      color: #1C1814;
      cursor: pointer;
    }
    .select-option {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-align: left;
      border: none;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 15px;
      font-weight: 650;
      padding: 14px 14px;
      border-radius: 10px;
      cursor: pointer;
      line-height: 1.35;
      margin-bottom: 1px;
      /* Prefer one readable line — avoid “high- / perf” hyphen stacks */
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }
    .select-option:last-child { margin-bottom: 0; }
    .select-option.select-option-tell {
      margin-top: 8px;
      background: #FEF3C7;
      color: #451A03;
      font-weight: 780;
      border: 1px solid rgba(146, 64, 14, 0.18);
    }
    .select-option.select-option-tell:hover,
    .select-option.select-option-tell:focus,
    .select-option.select-option-tell:active,
    .select-option.select-option-tell.selected,
    .select-option.select-option-tell.selected:active,
    .select-wrap.util-water .select-option.select-option-tell,
    .select-wrap.util-water .select-option.select-option-tell:hover,
    .select-wrap.util-water .select-option.select-option-tell:focus,
    .select-wrap.util-water .select-option.select-option-tell:active,
    .select-wrap.util-water .select-option.select-option-tell.selected,
    body.utility-water .select-option.select-option-tell,
    body.utility-water .select-option.select-option-tell:hover,
    body.utility-water .select-option.select-option-tell:focus,
    body.utility-water .select-option.select-option-tell:active,
    body.utility-water .select-option.select-option-tell.selected {
      background: #FDE68A;
      color: #451A03;
      border-color: rgba(146, 64, 14, 0.28);
      box-shadow: none;
    }
    [data-theme="dark"] .select-option.select-option-tell,
    [data-theme="dark"] .select-option.select-option-tell:hover,
    [data-theme="dark"] .select-option.select-option-tell:focus,
    [data-theme="dark"] .select-option.select-option-tell:active,
    [data-theme="dark"] .select-option.select-option-tell.selected {
      background: #FDE68A;
      color: #451A03;
      border-color: rgba(120, 53, 15, 0.35);
    }
    .select-option:hover,
    .select-option:focus {
      outline: none;
      background: #E8F5F2;
      border-color: rgba(15, 118, 110, 0.16);
      color: var(--accent-deep);
    }
    [data-theme="dark"] .select-option:hover,
    [data-theme="dark"] .select-option:focus {
      background: rgba(45, 212, 191, 0.14);
      border-color: rgba(45, 212, 191, 0.2);
      color: #99F6E4;
    }
    .select-option.selected {
      background: #E6F3F0;
      border: none;
      color: #134E4A;
      font-weight: 750;
      box-shadow: none;
    }
    [data-theme="dark"] .select-option.selected {
      background: rgba(45, 212, 191, 0.16);
      color: #CCFBF1;
      box-shadow: none;
    }
    /* Instant select feedback (before menu closes) */
    .select-option:active {
      background: #D8F0EB;
      color: var(--accent-deep);
    }
    .select-option.selected:active {
      background: #E6F3F0;
      color: #134E4A;
    }
    [data-theme="dark"] .select-option:active {
      background: rgba(45, 212, 191, 0.2);
      color: #99F6E4;
    }
    [data-theme="dark"] .select-option.selected:active {
      background: rgba(45, 212, 191, 0.16);
      color: #CCFBF1;
    }
    .select-wrap.util-water .select-trigger,
    body.utility-water .select-trigger {
      background: linear-gradient(165deg, #F4FAFC, #E8F4F8);
      border-color: rgba(3, 105, 161, 0.28);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 3px 10px rgba(3, 105, 161, 0.08);
    }
    .select-wrap.util-water .select-trigger:hover,
    .select-wrap.util-water .select-trigger:focus,
    .select-wrap.util-water .select-trigger[aria-expanded="true"],
    body.utility-water .select-trigger:hover,
    body.utility-water .select-trigger:focus,
    body.utility-water .select-trigger[aria-expanded="true"] {
      border-color: #0369A1;
      box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.16);
    }
    .select-wrap.util-water .select-chevron,
    body.utility-water .select-chevron {
      border-color: #0369A1;
    }
    .select-wrap.util-water .select-menu,
    body.utility-water .select-menu {
      background: #FFFFFF;
      border-color: rgba(3, 105, 161, 0.32);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 16px rgba(3, 40, 70, 0.10),
        0 22px 44px rgba(3, 40, 70, 0.22);
    }
    .select-wrap.util-water .select-option,
    body.utility-water .select-option {
      color: #0C4A6E;
    }
    .select-wrap.util-water .select-option:hover,
    .select-wrap.util-water .select-option:focus,
    body.utility-water .select-option:hover,
    body.utility-water .select-option:focus {
      background: #D6EEF7;
      border-color: transparent;
      color: #0C4A6E;
    }
    .select-wrap.util-water .select-option.selected,
    .select-wrap.util-water .select-option.selected:active,
    body.utility-water .select-option.selected,
    body.utility-water .select-option.selected:active {
      background: #E4F1F6;
      color: #0C4A6E;
      box-shadow: none;
    }
    [data-theme="dark"] body.utility-water .select-trigger {
      background: linear-gradient(165deg, #152028, #121A20);
      border-color: rgba(56, 189, 248, 0.3);
    }
    [data-theme="dark"] body.utility-water .select-menu {
      background: #152028;
      border-color: rgba(56, 189, 248, 0.35);
    }
    [data-theme="dark"] body.utility-water .select-option.selected,
    [data-theme="dark"] body.utility-water .select-option.selected:active {
      background: rgba(56, 189, 248, 0.22);
      color: #E0F2FE;
    }

    /* Fallback native select if custom not initialized */
    select:not(.native-select-hidden) {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      cursor: pointer;
      background: linear-gradient(165deg, #F7FCFA, #EEF6F3);
      border: 1.5px solid rgba(15, 118, 110, 0.22);
      color: var(--text);
      padding: 14px 42px 14px 14px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 650;
    }
    [data-theme="dark"] select:not(.native-select-hidden) {
      background: linear-gradient(165deg, #1C2623, #15201D);
      border-color: rgba(45, 212, 191, 0.24);
      color: #F0F7F5;
    }
    /* Selected appliance — soft category wash only (no left bar) */
    .result-header {
      --header-tone: #14B8A6;
      text-align: center;
      margin: 0 0 12px;
      padding: 12px 12px 10px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--header-tone) 7%, #fff);
      border: 1px solid color-mix(in srgb, var(--header-tone) 20%, rgba(60, 40, 20, 0.1));
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 10px rgba(40, 28, 16, 0.04);
      position: relative;
      overflow: hidden;
    }
    .result-header::before {
      content: none;
      display: none;
    }
    .result-header[data-tone="cool"]    { --header-tone: #38BDF8; }
    .result-header[data-tone="heat"]    { --header-tone: #F97316; }
    .result-header[data-tone="kitchen"] { --header-tone: #EAB308; }
    .result-header[data-tone="laundry"] { --header-tone: #8B5CF6; }
    .result-header[data-tone="tech"]    { --header-tone: #6366F1; }
    .result-header[data-tone="water"]   { --header-tone: #14B8A6; }
    .result-header[data-tone="light"]   { --header-tone: #F59E0B; }
    .result-header[data-tone="clean"]   { --header-tone: #10B981; }
    .result-header[data-tone="audio"]   { --header-tone: #EC4899; }
    .result-header[data-tone="outdoor"] { --header-tone: #22C55E; }
    [data-theme="dark"] .result-header {
      background: color-mix(in srgb, var(--header-tone) 12%, #1A2220);
      border-color: color-mix(in srgb, var(--header-tone) 28%, rgba(255, 255, 255, 0.1));
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }
    .appliance-title {
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: -0.035em;
      margin-bottom: 2px;
      text-align: center;
      color: var(--text);
    }
    #results .topbar {
      margin-bottom: 6px;
    }
    #results .result-card {
      padding-top: 10px;
    }
    #results .result-header {
      padding: 0;
      margin: 0 0 6px;
      background: none;
      border: none;
      box-shadow: none;
    }
    #results .result-emoji-badge {
      width: 44px;
      height: 44px;
      margin-bottom: 4px;
      border-radius: 12px;
    }
    #results .result-emoji-badge .result-emoji-char {
      font-size: 22px;
    }
    #results .appliance-title {
      font-size: 1.45rem;
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.15;
      margin-bottom: 2px;
    }
    #results .run-mode,
    #results .run-mode[data-mode="always"] {
      display: block;
      margin: 0 auto 2px;
      padding: 0;
      max-width: none;
      font-size: 12px;
      font-weight: 550;
      letter-spacing: 0;
      line-height: 1.25;
      white-space: nowrap;
      color: var(--muted);
      background: none;
      border: 0;
      border-radius: 0;
    }
    [data-theme="dark"] #results .run-mode,
    [data-theme="dark"] #results .run-mode[data-mode="always"] {
      color: #A89F96;
      background: none;
      border: 0;
    }
    .estimate-meta {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--faint);
      text-align: center;
      margin-bottom: 6px;
    }
    .watts-used {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      margin: 8px 0 10px;
      line-height: 1.35;
      font-weight: 550;
    }
    .result-meta-wrap { text-align: center; }

    .cost-stack { margin-top: 12px; margin-bottom: 4px; }
    #results .cost-stack { margin-top: 4px; }
    .cost-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .cost-row.primary {
      margin-bottom: 10px;
      grid-template-columns: 1fr;
    }
    .cost-stack > .cost-row:not(.primary) {
      margin-bottom: 4px;
    }
    .cost-box {
      position: relative;
      background: var(--bg0);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 6px 11px;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }
    .cost-box .cost-icon {
      display: block;
      font-size: 14px;
      line-height: 1;
      margin-bottom: 6px;
      opacity: 0.9;
    }
    .cost-box.day {
      background: #E4F6F1;
      border-color: #9DD4C8;
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.06);
    }
    .cost-box.week {
      background: #E2F2FA;
      border-color: #93C9E8;
      box-shadow: 0 2px 8px rgba(3, 105, 161, 0.06);
    }
    .cost-box.year {
      background: #EEE9FC;
      border-color: #C4B5F5;
      box-shadow: 0 2px 8px rgba(109, 40, 217, 0.06);
    }
    [data-theme="dark"] .cost-box.day {
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.34);
    }
    [data-theme="dark"] .cost-box.week {
      background: rgba(56, 189, 248, 0.12);
      border-color: rgba(56, 189, 248, 0.34);
    }
    [data-theme="dark"] .cost-box.year {
      background: rgba(167, 139, 250, 0.14);
      border-color: rgba(167, 139, 250, 0.34);
    }
    /* Monthly hero — solid brand fill (no gradient) */
    .cost-box.featured {
      padding: 22px 16px 18px;
      border-radius: 20px;
      border: none;
      background: #0F766E;
      box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28);
    }
    .cost-box.featured .cost-value {
      font-size: clamp(2.15rem, 7.5vw, 2.65rem);
      font-weight: 840;
      letter-spacing: -0.05em;
      color: #fff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
      font-variant-numeric: tabular-nums;
      line-height: 1.05;
    }
    .cost-box.featured .cost-label {
      color: rgba(255, 255, 255, 0.82);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 6px;
    }
    .cost-box.featured .cost-icon { display: none; }
    body.utility-water .cost-box.featured {
      background: #0E7490;
      box-shadow: 0 10px 24px rgba(14, 116, 144, 0.28);
    }
    [data-theme="dark"] .cost-box.featured {
      background: #0D9488;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
    }
    [data-theme="dark"] .cost-box.featured .cost-value {
      color: #04110f;
      text-shadow: none;
    }
    [data-theme="dark"] .cost-box.featured .cost-label {
      color: rgba(4, 17, 15, 0.72);
    }
    [data-theme="dark"] body.utility-water .cost-box.featured {
      background: #22D3EE;
    }
    [data-theme="dark"] body.utility-water .cost-box.featured .cost-value {
      color: #04202a;
    }
    [data-theme="dark"] body.utility-water .cost-box.featured .cost-label {
      color: rgba(4, 32, 42, 0.72);
    }
    .estimate-trust {
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      margin: 10px 0 0;
      line-height: 1.4;
      font-weight: 500;
    }
    .confidence-label {
      display: inline-block;
      margin: 0 auto 8px;
      font-size: 11px;
      font-weight: 650;
      color: var(--faint);
      background: var(--bg0);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 10px;
    }
    [data-theme="dark"] .confidence-label {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      color: var(--muted);
    }

    /* My Home total — scoreboard chip (View + Clear) */
    .home-total-chip {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0 0 12px;
      padding: 15px 12px 15px 16px;
      border-radius: 18px;
      border: 1.5px solid rgba(15, 118, 110, 0.28);
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      background: #EAF7F3;
      box-shadow: 0 6px 18px rgba(15, 118, 110, 0.1);
      cursor: pointer;
      font: inherit;
      color: inherit;
      text-align: left;
      position: relative;
      overflow: hidden;
    }
    .home-total-chip::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 5px;
      border-radius: 0 5px 5px 0;
      background: #0F766E;
      pointer-events: none;
    }
    .home-total-chip[hidden] { display: none !important; }
    .home-total-chip.is-holding {
      transform: scale(0.985);
      border-color: rgba(185, 28, 28, 0.45);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 0 0 3px rgba(185, 28, 28, 0.16);
    }
    [data-theme="dark"] .home-total-chip {
      background: #1A2623;
      border-color: rgba(45, 212, 191, 0.34);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    }
    [data-theme="dark"] .home-total-chip.is-holding {
      border-color: rgba(248, 113, 113, 0.5);
      box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
    }
    body.utility-water .home-total-chip {
      border-color: rgba(14, 116, 144, 0.3);
      background: #E8F4F8;
      box-shadow: 0 6px 18px rgba(14, 116, 144, 0.1);
    }
    body.utility-water .home-total-chip::before {
      background: #0E7490;
    }
    [data-theme="dark"] body.utility-water .home-total-chip {
      border-color: rgba(34, 211, 238, 0.34);
      background: #152024;
    }
    .home-total-chip-body {
      flex: 1 1 auto;
      min-width: 0;
      padding-left: 8px;
    }
    .home-total-chip-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--accent-deep);
    }
    [data-theme="dark"] .home-total-chip-label { color: var(--accent2); }
    body.utility-water .home-total-chip-label { color: #0C5F7A; }
    [data-theme="dark"] body.utility-water .home-total-chip-label { color: #67E8F9; }
    .home-total-chip-value {
      font-size: clamp(1.35rem, 5vw, 1.6rem);
      font-weight: 840;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1.1;
      margin-top: 3px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .home-total-chip-meta {
      font-size: 12px;
      font-weight: 650;
      color: #5A524A;
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    [data-theme="dark"] .home-total-chip-meta { color: #9BB0AA; }
    .home-total-chip-actions {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }
    .home-total-chip-go,
    .home-total-chip-clear {
      appearance: none;
      border: none;
      font: inherit;
      cursor: pointer;
      font-size: 12px;
      font-weight: 750;
      border-radius: 999px;
      padding: 8px 14px;
      white-space: nowrap;
      line-height: 1.1;
      text-align: center;
    }
    .home-total-chip-go {
      color: #fff;
      background: #0F766E;
      box-shadow: 0 3px 10px rgba(15, 118, 110, 0.28);
    }
    [data-theme="dark"] .home-total-chip-go {
      color: #0C1211;
      background: #2DD4BF;
    }
    body.utility-water .home-total-chip-go {
      background: #0E7490;
      box-shadow: 0 3px 10px rgba(14, 116, 144, 0.28);
    }
    [data-theme="dark"] body.utility-water .home-total-chip-go {
      color: #04202a;
      background: #22D3EE;
    }
    .home-total-chip-clear {
      color: #B91C1C;
      background: rgba(185, 28, 28, 0.08);
      border: 1px solid rgba(185, 28, 28, 0.2);
    }
    [data-theme="dark"] .home-total-chip-clear {
      color: #FCA5A5;
      background: rgba(248, 113, 113, 0.1);
      border-color: rgba(248, 113, 113, 0.28);
    }

    /* Stacked Save / Share under tools */
    .result-actions {
      margin-top: 10px;
      margin-bottom: 4px;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      align-items: stretch;
    }
    [data-theme="dark"] .result-actions {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    .result-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: none;
      min-width: 0;
      width: 100%;
      border-radius: 14px;
      font-family: inherit;
      font-size: 15px;
      font-weight: 650;
      letter-spacing: -0.01em;
      padding: 14px 16px;
      cursor: pointer;
      border: none;
      line-height: 1.2;
      white-space: nowrap;
      -webkit-font-smoothing: antialiased;
      transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .result-cta-ico {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      display: block;
    }
    .result-cta-text {
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .result-cta-save {
      background: #0F766E;
      color: #fff;
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.14);
    }
    body.utility-water .result-cta-save {
      background: #0E7490;
      box-shadow: 0 2px 8px rgba(14, 116, 144, 0.14);
    }
    .result-cta-save .result-cta-ico {
      stroke: currentColor;
    }
    .result-cta-share {
      background: var(--bg1);
      color: var(--text);
      border: 1.5px solid rgba(60, 40, 20, 0.12);
      box-shadow: none;
      flex: none;
      padding-left: 16px;
      padding-right: 16px;
    }
    .result-cta-share .result-cta-ico {
      stroke: currentColor;
    }
    [data-theme="dark"] .result-cta-save {
      background: #0D9488;
      color: #04110f;
    }
    [data-theme="dark"] body.utility-water .result-cta-save {
      background: #22D3EE;
      color: #04202a;
    }
    [data-theme="dark"] .result-cta-share {
      background: #171F1D;
      color: #E8F0F4;
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .result-cta-save:hover {
        background: #0D6B64;
        filter: brightness(1.03);
      }
      body.utility-water .result-cta-save:hover {
        background: #0C6880;
      }
      .result-cta-share:hover {
        border-color: color-mix(in srgb, var(--accent) 35%, rgba(60, 40, 20, 0.14));
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      [data-theme="dark"] .result-cta-share:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.04);
      }
    }
    .result-cta-save:active {
      transform: translateY(1px);
      background: #0B5F58;
    }
    body.utility-water .result-cta-save:active {
      background: #0C5F7A;
    }
    .result-cta-share:active {
      transform: scale(0.98);
    }

    /* setup-flash: used when jumping to a control from a nudge */
    .setup-flash {
      animation: setupFlash 0.9s ease;
    }
    @keyframes setupFlash {
      0%, 100% { box-shadow: none; }
      25%, 55% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
      }
    }

    /*
      Sticky Save/Share — centered on all devices, same width as .screen (440px + 16px pad).
      Use left:50% + translateX so fixed bars don’t drift left on wide / tablet / desktop.
    */
    .result-sticky-cta {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: 0;
      z-index: 45;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: min(440px, 100%);
      max-width: 440px;
      margin: 0;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      box-sizing: border-box;
      transform: translateX(-50%);
      background:
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg0) 88%, transparent) 28%, var(--bg0) 100%);
      pointer-events: none;
    }
    /* Sit above the bottom nav when both are visible */
    body.has-bottom-nav .result-sticky-cta {
      bottom: calc(70px + env(safe-area-inset-bottom, 0px));
      padding-bottom: 10px;
    }
    /* Prefer opacity hide — display:none + thrash caused mobile glitch at scroll threshold */
    .result-sticky-cta[hidden] {
      display: flex !important;
      opacity: 0;
      transform: translate(-50%, 12px);
      pointer-events: none !important;
      visibility: hidden;
    }
    .result-sticky-cta:not([hidden]) {
      opacity: 1;
      transform: translateX(-50%);
      visibility: visible;
    }
    .result-sticky-save,
    .result-sticky-share {
      pointer-events: auto;
      appearance: none;
      border: none;
      font: inherit;
      cursor: pointer;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.15;
    }
    .result-sticky-save {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      padding: 14px 16px;
      font-size: 15px;
      font-weight: 750;
      color: #fff;
      background: #0F766E;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 8px 20px rgba(15, 118, 110, 0.28);
    }
    body.utility-water .result-sticky-save {
      background: #0E7490;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 8px 20px rgba(14, 116, 144, 0.28);
    }
    [data-theme="dark"] .result-sticky-save {
      background: #0D9488;
      color: #04110f;
    }
    [data-theme="dark"] body.utility-water .result-sticky-save {
      background: #22D3EE;
      color: #04202a;
    }
    .result-sticky-save-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /*
      Unit name + Save + Share — primary path (above “More” tools).
    */
    .result-save-panel {
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    [data-theme="dark"] .result-save-panel {
      border: none;
    }
    .result-save-knit {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .result-save-knit .home-unit-name {
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
    }
    .home-unit-name[hidden] { display: none !important; }
    .home-unit-name-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--muted);
      margin: 0 0 6px;
    }
    .home-unit-name-input {
      width: 100%;
      box-sizing: border-box;
      min-height: 42px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .home-unit-name-input::placeholder {
      color: var(--faint);
      font-weight: 550;
    }
    .home-unit-name-input:focus {
      outline: none;
      border-color: rgba(15, 118, 110, 0.45);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }
    [data-theme="dark"] .home-unit-name-input {
      background: #121A18;
      border-color: rgba(255, 255, 255, 0.12);
      color: #E8F0ED;
    }
    [data-theme="dark"] .home-unit-name-input:focus {
      border-color: rgba(45, 212, 191, 0.45);
      box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
    }
    .result-save-fade {
      display: none !important;
    }
    .result-save-knit .result-cta-save {
      width: 100%;
    }
    .result-save-panel .result-actions {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    /* Narrow screens: short sticky label (full text stays on main CTA) */
    @media (max-width: 380px) {
      .result-sticky-save-label.is-short {
        /* class toggled in JS with short copy */
      }
    }
    .result-sticky-share {
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      padding: 0;
      color: var(--text);
      background: var(--bg1);
      border: 1.5px solid rgba(60, 40, 20, 0.12) !important;
      box-shadow: 0 4px 12px rgba(40, 28, 16, 0.08);
    }
    .result-sticky-share svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    [data-theme="dark"] .result-sticky-share {
      background: #171F1D;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: #E8F0F4;
    }
    /*
      Always reserve sticky Save space on results.
      Toggling padding with has-result-sticky used to thrash at the scroll
      threshold (CTA peeks back in → sticky hides → padding drops → CTA leaves → sticky shows).
    */
    body.screen-results {
      padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
    body.has-bottom-nav.screen-results {
      padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
    }
    .result-sticky-cta {
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }
    /* Very narrow phones: keep share tap target, don’t let Save overflow */
    @media (max-width: 360px) {
      .result-sticky-cta {
        gap: 6px;
        padding-left: 12px;
        padding-right: 12px;
      }
      .result-sticky-share {
        width: 44px;
        height: 44px;
      }
      .result-sticky-save {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
      }
    }

    /* Soft rate honesty under the monthly cost (not under the rate control — that stays quiet) */
    .estimate-note {
      display: block;
      margin: 8px 2px 2px;
      padding: 8px 12px;
      border-radius: 12px;
      border: 1px solid rgba(15, 118, 110, 0.18);
      background: rgba(230, 243, 240, 0.85);
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.35;
      color: var(--accent-deep);
      text-align: center;
    }
    [data-theme="dark"] .estimate-note {
      border-color: rgba(94, 234, 212, 0.22);
      background: rgba(15, 118, 110, 0.18);
      color: #5EEAD4;
    }
    .estimate-note button {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      font: inherit;
      font-weight: 800;
      color: inherit;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .estimate-note[hidden] { display: none !important; }
    /* Confidence line stays retired — rate story on setup-rate + estimate-note */
    .confidence-line {
      display: none !important;
    }
    .confidence-line[hidden] { display: none !important; }

    /* Power + water combined cost on results */
    .results-twin-insight {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 10px 0 4px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(15, 118, 110, 0.16);
      background: linear-gradient(135deg, rgba(230, 243, 240, 0.95), rgba(224, 242, 254, 0.75));
      font-size: 0.84rem;
      line-height: 1.3;
      color: var(--text);
      overflow: hidden;
    }
    [data-theme="dark"] .results-twin-insight {
      border-color: rgba(94, 234, 212, 0.2);
      background: linear-gradient(135deg, rgba(15, 118, 110, 0.22), rgba(14, 74, 92, 0.35));
      color: #E2E8F0;
    }
    .results-twin-insight[hidden] { display: none !important; }
    .results-twin-kicker {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin: 0;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    [data-theme="dark"] .results-twin-kicker { color: #5EEAD4; }
    .results-twin-meta {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .results-twin-meta strong { font-weight: 800; color: var(--accent-deep); }
    [data-theme="dark"] .results-twin-meta strong { color: #5EEAD4; }
    .results-twin-insight button {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 0;
      padding: 7px 12px;
      border-radius: 12px;
      border: 1.5px solid rgba(15, 118, 110, 0.3);
      background: #FFFFFF;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 750;
      color: #0B5F58;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .results-twin-insight button:hover {
      background: #E6F3F0;
      border-color: #0F766E;
    }
    [data-theme="dark"] .results-twin-insight button {
      color: #5EEAD4;
      background: #1A2A27;
      border-color: rgba(45, 212, 191, 0.35);
    }

    /* My Home: honesty + top drivers */
    .myhome-honesty {
      margin: 0 2px 2px;
      font-size: 0.75rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.35;
      text-align: center;
    }
    [data-theme="dark"] .myhome-honesty { color: #9BB0AA; }
    .myhome-honesty[hidden] { display: none !important; }
    .myhome-missing {
      margin-top: 4px;
    }
    .home-drivers {
      margin: 2px 0 0;
      padding: 8px 2px 2px;
      border-radius: 0;
      border: none;
      border-top: 1px solid rgba(60, 40, 20, 0.08);
      background: transparent;
      font-size: 0.82rem;
      line-height: 1.4;
      color: var(--text);
    }
    [data-theme="dark"] .home-drivers {
      border-color: rgba(255, 255, 255, 0.08);
      background: transparent;
      color: #E2E8F0;
    }
    .home-drivers[hidden] { display: none !important; }
    .home-drivers-kicker {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .home-drivers-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 3px 0;
      font-weight: 600;
    }
    .home-drivers-row strong { font-weight: 800; color: var(--accent-deep); }
    [data-theme="dark"] .home-drivers-row strong { color: #5EEAD4; }

    /* “Typical for your area” lives on the rate control hint */
    .setup-rate-hint.is-typical {
      color: var(--accent-deep);
      font-weight: 700;
    }
    [data-theme="dark"] .setup-rate-hint.is-typical {
      color: var(--accent2);
    }
    .confidence-line button {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      font: inherit;
      font-weight: 750;
      color: var(--accent-deep);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    [data-theme="dark"] .confidence-line button { color: #5EEAD4; }

    .vote-row {
      margin: 10px 0 6px;
      padding: 10px 12px 8px;
      border-radius: 14px;
      border: 1px solid rgba(60, 40, 20, 0.08);
      background: transparent;
      text-align: center;
      box-shadow: none;
    }
    .vote-row[hidden] { display: none !important; }
    .vote-label {
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0.02em;
      color: var(--faint);
      margin-bottom: 6px;
    }
    .vote-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }
    .vote-btn {
      appearance: none;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 11px;
      border-radius: 999px;
      cursor: pointer;
    }
    .vote-btn.picked {
      border-color: transparent;
      color: #fff;
      background: #0F766E;
      box-shadow: 0 4px 12px rgba(15, 118, 110, 0.22);
    }
    [data-theme="dark"] .vote-btn.picked {
      color: #0C1211;
      background: linear-gradient(155deg, #5EEAD4, #2DD4BF);
    }
    .vote-thanks {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 650;
      color: var(--accent-deep);
    }
    .vote-thanks[hidden] { display: none !important; }
    [data-theme="dark"] .vote-thanks { color: #5EEAD4; }

    .fine-tune-nudge,
    .rate-first-nudge {
      margin: 8px 0 4px;
    }
    .fine-tune-nudge[hidden],
    .rate-first-nudge[hidden] { display: none !important; }
    /* Only one soft tip visible at a time (rate wins over fine-tune) */
    .rate-first-nudge:not([hidden]) ~ .fine-tune-nudge {
      display: none !important;
    }
    .fine-tune-nudge-btn,
    .rate-first-nudge-btn {
      appearance: none;
      width: 100%;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: var(--bg2);
      color: var(--accent-deep, #0F766E);
      font: inherit;
      font-size: 12.5px;
      font-weight: 650;
      line-height: 1.35;
      padding: 10px 12px;
      border-radius: 12px;
      cursor: pointer;
      text-align: left;
    }
    .rate-first-nudge-btn {
      border-color: color-mix(in srgb, var(--accent) 28%, rgba(60, 40, 20, 0.1));
      background: color-mix(in srgb, var(--accent) 8%, var(--bg2));
      color: var(--accent-deep);
    }
    [data-theme="dark"] .fine-tune-nudge-btn {
      border-color: rgba(45, 212, 191, 0.28);
      background: rgba(45, 212, 191, 0.08);
      color: #5EEAD4;
    }
    [data-theme="dark"] .rate-first-nudge-btn {
      border-color: rgba(103, 232, 249, 0.28);
      background: rgba(103, 232, 249, 0.08);
      color: #67E8F9;
    }
    .fine-tune-nudge-btn:active,
    .rate-first-nudge-btn:active {
      transform: scale(0.99);
    }

    .home-twin-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 2px;
    }
    .home-twin-list[hidden] { display: none !important; }
    .home-twin-card {
      border-radius: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(15, 118, 110, 0.16);
      background: linear-gradient(145deg, #F3FAF8 0%, #F0F9FC 100%);
      margin-bottom: 8px;
    }
    [data-theme="dark"] .home-twin-card {
      border-color: rgba(45, 212, 191, 0.16);
      background: linear-gradient(145deg, #15201E 0%, #121C20 100%);
    }
    .home-twin-kicker {
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .home-twin-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-bottom: 10px;
    }
    .home-twin-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }
    .home-twin-pill {
      border-radius: 10px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(60, 40, 20, 0.06);
    }
    [data-theme="dark"] .home-twin-pill {
      background: rgba(8, 14, 13, 0.4);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .home-twin-pill-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 2px;
    }
    .home-twin-pill-val {
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .home-twin-total {
      font-size: 13px;
      font-weight: 650;
      color: var(--muted);
      line-height: 1.35;
    }
    .home-twin-total strong {
      color: var(--accent-deep, #0F766E);
      font-weight: 850;
      font-size: 1.05rem;
      font-variant-numeric: tabular-nums;
    }
    [data-theme="dark"] .home-twin-total strong { color: #5EEAD4; }
    .home-twin-meta {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.4;
    }
    .home-twin-meta strong {
      color: var(--accent-deep, #0F766E);
      font-variant-numeric: tabular-nums;
    }
    [data-theme="dark"] .home-twin-meta strong { color: #5EEAD4; }



    .home-action-card {
      margin: 0 0 12px;
      padding: 14px 14px 12px;
      border-radius: 16px;
      border: 1px solid rgba(15, 118, 110, 0.14);
      background: #F7FBFA;
      text-align: left;
      box-shadow: 0 1px 2px rgba(15, 118, 110, 0.04);
    }
    .home-action-card[hidden] { display: none !important; }
    [data-theme="dark"] .home-action-card {
      background: #15201E;
      border-color: rgba(45, 212, 191, 0.16);
      box-shadow: none;
    }
    .home-action-kicker {
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin-bottom: 4px;
    }
    [data-theme="dark"] .home-action-kicker { color: #5EEAD4; }
    .home-action-title {
      font-size: 0.98rem;
      font-weight: 760;
      letter-spacing: -0.02em;
      color: var(--text);
      line-height: 1.3;
    }
    .home-action-meta {
      margin-top: 4px;
      font-size: 12.5px;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.4;
    }
    .home-action-card .btn-primary {
      margin-top: 12px;
      width: 100%;
      font-size: 14px;
      font-weight: 700;
      padding: 12px 14px;
      border-radius: 12px;
      color: #fff;
      background: #0F766E;
      border: none;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 4px 12px rgba(15, 118, 110, 0.2);
    }
    [data-theme="dark"] .home-action-card .btn-primary {
      background: #0D9488;
    }

    .checklist-empty {
      text-align: left;
      margin: 4px 0 14px;
    }
    .checklist-empty .cl-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
      background: linear-gradient(165deg, #FFFFFF, #F4FAF7);
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 650;
      padding: 12px 12px;
      border-radius: 14px;
      margin-bottom: 8px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(15, 118, 110, 0.06);
    }
    [data-theme="dark"] .checklist-empty .cl-item {
      background: linear-gradient(165deg, #1A2321, #15201D);
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: none;
    }
    .checklist-empty .cl-emoji {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      background: color-mix(in srgb, var(--accent) 14%, #fff);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
      flex-shrink: 0;
    }
    [data-theme="dark"] .checklist-empty .cl-emoji {
      background: color-mix(in srgb, var(--accent) 18%, #141A1C);
    }
    .checklist-empty .cl-go {
      margin-left: auto;
      font-size: 12px;
      font-weight: 780;
      color: var(--accent-deep);
      white-space: nowrap;
    }
    [data-theme="dark"] .checklist-empty .cl-go { color: #5EEAD4; }

    /* Fine-tune + About share card chrome with What if via .result-accordions */
    details.adjust-details {
      position: relative;
      margin: 0;
    }
    [data-theme="dark"] details.adjust-details {
      /* card chrome from parent rule */
    }
    details.adjust-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      min-height: 52px;
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: -0.01em;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      user-select: none;
    }
    details.adjust-details > summary .adj-summary-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .adj-badge {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      background: rgba(3, 105, 161, 0.12);
      color: #0369A1;
      box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.16);
    }
    [data-theme="dark"] .adj-badge {
      background: rgba(56, 189, 248, 0.16);
      color: #7DD3FC;
      box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.22);
    }
    details.adjust-details > summary .adj-title {
      font-weight: 720;
      font-size: 0.95rem;
      letter-spacing: -0.02em;
    }
    details.adjust-details > summary::-webkit-details-marker { display: none; }
    details.adjust-details > summary .adj-sub {
      display: block;
      font-size: 12px;
      font-weight: 550;
      color: var(--muted);
      margin-top: 2px;
      letter-spacing: 0;
    }
    details.adjust-details > summary .adj-chevron {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(45deg);
      opacity: 0.7;
      transition: transform 0.15s ease, border-color 0.14s ease, opacity 0.14s ease;
      margin-top: -3px;
    }
    [data-theme="dark"] details.adjust-details > summary .adj-chevron {
      border-color: #8AA39A;
    }
    details.adjust-details[open] > summary .adj-chevron {
      transform: rotate(225deg);
      margin-top: 3px;
      border-color: var(--accent);
      opacity: 0.9;
    }
    details.adjust-details .adjust-body {
      padding: 0 14px 12px;
      border-top: 1px solid var(--border);
      padding-top: 10px;
    }
    [data-theme="dark"] details.adjust-details .adjust-body {
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    details.about-details {
      position: relative;
      margin: 0;
    }
    [data-theme="dark"] details.about-details {
      /* card chrome from parent rule */
    }
    details.about-details > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: -0.01em;
      color: var(--text);
      user-select: none;
    }
    details.about-details > summary::-webkit-details-marker { display: none; }
    .about-summary-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .about-badge {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(109, 40, 217, 0.1);
      color: #6D28D9;
      box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.16);
    }
    .about-badge svg {
      width: 15px;
      height: 15px;
      display: block;
    }
    [data-theme="dark"] .about-badge {
      background: rgba(167, 139, 250, 0.16);
      color: #C4B5FD;
      box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.24);
    }
    details.about-details > summary .about-title {
      font-weight: 720;
      font-size: 0.95rem;
      letter-spacing: -0.02em;
    }
    details.about-details > summary .about-sub {
      display: block;
      font-size: 12px;
      font-weight: 550;
      color: var(--muted);
      margin-top: 2px;
    }
    details.about-details > summary .about-chevron {
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(45deg);
      transition: transform 0.15s ease, border-color 0.14s ease, opacity 0.14s ease;
      flex-shrink: 0;
      opacity: 0.7;
    }
    [data-theme="dark"] details.about-details > summary .about-chevron {
      border-color: #8AA39A;
    }
    details.about-details[open] > summary .about-chevron {
      transform: rotate(-135deg);
      margin-top: 4px;
      border-color: var(--accent);
      opacity: 0.9;
    }
    details.about-details .about-body {
      padding: 10px 12px 12px;
      border-top: 1px solid var(--border);
    }
    [data-theme="dark"] details.about-details .about-body {
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    .about-section {
      margin-top: 8px;
      padding: 12px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(109, 40, 217, 0.12);
    }
    .about-section:first-child { margin-top: 10px; }
    [data-theme="dark"] .about-section {
      background: rgba(0, 0, 0, 0.18);
      border-color: rgba(167, 139, 250, 0.18);
    }
    .about-heading {
      font-size: 12.5px;
      font-weight: 750;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #6D28D9;
      margin-bottom: 9px;
    }
    [data-theme="dark"] .about-heading {
      color: #C4B5FD;
    }
    .about-section p {
      font-size: 0.92rem;
      line-height: 1.55;
      color: var(--text);
      margin: 0;
      opacity: 0.92;
    }
    [data-theme="dark"] .about-section p {
      color: #E4EEF0;
      opacity: 1;
    }
    .about-section p strong {
      color: var(--accent-deep);
      font-weight: 750;
    }
    [data-theme="dark"] .about-section p strong {
      color: #99F6E4;
    }
    .about-list {
      margin: 0;
      padding: 0 0 0 1.1em;
    }
    .about-list li {
      font-size: 0.92rem;
      line-height: 1.5;
      color: var(--text);
      margin-bottom: 8px;
      opacity: 0.92;
    }
    [data-theme="dark"] .about-list li {
      color: #E4EEF0;
      opacity: 1;
    }
    .about-list li:last-child { margin-bottom: 0; }

    .what-if-inline {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 4px 0 10px;
    }
    .btn-try {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      border: 1.5px solid rgba(60, 40, 20, 0.12);
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      padding: 12px 14px;
      border-radius: 14px;
      cursor: pointer;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(40, 28, 16, 0.05);
    }
    /* try-btn press uses shared :active ring above */
    .btn-try .try-ico {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--bg2);
      font-size: 15px;
      flex-shrink: 0;
      border: 1px solid rgba(60, 40, 20, 0.08);
    }
    .btn-try .try-text {
      flex: 1 1 0%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 2px;
    }
    .btn-try .try-go {
      flex: 0 0 auto;
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 750;
      color: var(--accent-deep);
      opacity: 0.9;
    }
    [data-theme="dark"] .btn-try {
      background: #fff;
      border-color: rgba(255, 255, 255, 0.14);
      color: #1C1814;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] .btn-try .try-ico {
      background: #F3EFE8;
      border-color: rgba(60, 40, 20, 0.1);
      color: #1C1814;
    }
    [data-theme="dark"] .btn-try .try-go { color: #0F766E; }
    [data-theme="dark"] .try-panel .btn-try .try-delta { color: #0B5F58; }
    .btn-reset {
      background: transparent !important;
      border: 1px dashed var(--border) !important;
      color: var(--muted) !important;
      box-shadow: none !important;
      font-weight: 600 !important;
    }
    /* reset press uses shared :active ring above */
    #dutyHint {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }

    /*
      Jump highlight = blue (focus/destination), not tip yellow or error red.
      Tips already use amber; red would feel like a problem.
    */
    @keyframes jumpPulse {
      0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
      40% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.32); }
      100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28), 0 8px 22px rgba(37, 99, 235, 0.16); }
    }
    .tune-field.jump-highlight {
      position: relative;
      z-index: 2;
      margin: 0 -4px;
      padding: 12px 12px 10px !important;
      border-radius: 14px !important;
      border: 2px solid #3B82F6 !important;
      background: linear-gradient(165deg, #EFF6FF 0%, #DBEAFE 100%) !important;
      box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.28),
        0 8px 22px rgba(37, 99, 235, 0.16);
      animation: jumpPulse 0.55s ease-out;
    }
    .tune-field.jump-highlight label {
      color: #1E40AF !important;
      font-weight: 750;
    }
    .tune-field.jump-highlight input {
      border-color: #3B82F6 !important;
      background: #F8FBFF !important;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14);
    }
    [data-theme="dark"] .tune-field.jump-highlight {
      background: linear-gradient(165deg, rgba(59, 130, 246, 0.22), rgba(15, 23, 42, 0.95)) !important;
      border-color: #60A5FA !important;
      box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.22),
        0 8px 22px rgba(0, 0, 0, 0.35);
    }
    [data-theme="dark"] .tune-field.jump-highlight label {
      color: #93C5FD !important;
    }
    [data-theme="dark"] .tune-field.jump-highlight input {
      border-color: #60A5FA !important;
      background: rgba(12, 18, 17, 0.65) !important;
    }
    details.adjust-details.jump-highlight {
      border-color: rgba(59, 130, 246, 0.55) !important;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16) !important;
    }
    [data-theme="dark"] details.adjust-details.jump-highlight {
      border-color: rgba(96, 165, 250, 0.45) !important;
      box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12) !important;
    }
    .onboard-quick {
      margin-top: 10px;
    }
    .cost-value {
      font-size: 1.18rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
      line-height: 1.15;
    }
    .cost-box.day .cost-value { color: #0B5F58; }
    .cost-box.week .cost-value { color: #0369A1; }
    .cost-box.year .cost-value { color: #5B21B6; }
    [data-theme="dark"] .cost-box.day .cost-value { color: #5EEAD4; }
    [data-theme="dark"] .cost-box.week .cost-value { color: #7DD3FC; }
    [data-theme="dark"] .cost-box.year .cost-value { color: #C4B5FD; }

    /* Setup under monthly — same white card language as tools box */
    .setup-panel {
      margin: 18px 0 2px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      box-shadow: none;
      text-align: left;
      overflow: visible;
      position: relative;
      z-index: 1;
    }
    .setup-panel:has(.select-wrap.is-open) {
      z-index: 50;
    }
    [data-theme="dark"] .setup-panel {
      background: #141B19;
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: none;
    }
    .setup-block {
      margin-bottom: 14px;
    }
    .setup-block:last-child { margin-bottom: 0; }
    .setup-block[hidden] { display: none !important; }

    /* One time vs Regular cadence */
    .cadence-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 4px;
      border-radius: 14px;
      background: rgba(15, 118, 110, 0.08);
      border: 1px solid rgba(15, 118, 110, 0.14);
    }
    [data-theme="dark"] .cadence-toggle {
      background: rgba(45, 212, 191, 0.08);
      border-color: rgba(45, 212, 191, 0.16);
    }
    .cadence-seg {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 8px;
      border-radius: 11px;
      cursor: pointer;
    }
    .cadence-seg[aria-pressed="true"] {
      background: linear-gradient(155deg, var(--accent2), var(--accent));
      color: #fff;
      box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    [data-theme="dark"] .cadence-seg[aria-pressed="true"] {
      background: linear-gradient(155deg, var(--accent2), var(--accent));
      color: #0B0F12;
    }
    .cadence-hint {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.35;
    }

    /* My Home hero summary — total + power/water (lives inside .myhome-panel) */
    #myhome .myhome-summary[hidden] { display: none !important; }
    #myhome .myhome-list-label {
      margin: 0 4px 10px;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
    #myhome .myhome-list-label[hidden] { display: none !important; }
    #myhome .home-action-card {
      margin: 0;
    }
    #myhome .myhome-actions-panel .myhome-actions {
      margin: 0;
    }

    .home-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 0;
    }
    .home-split[hidden] { display: none !important; }
    .home-split-card {
      border-radius: 16px;
      padding: 14px 14px 12px;
      border: 1px solid var(--border);
      background: #FFFFFF;
      box-shadow: 0 1px 2px rgba(15, 118, 110, 0.05);
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    [data-theme="dark"] .home-split-card {
      background: #171F1D;
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: none;
    }
    .home-split-card.power {
      border-color: rgba(15, 118, 110, 0.16);
      background: #F3FAF8;
    }
    .home-split-card.water {
      border-color: rgba(14, 116, 144, 0.16);
      background: #F0F9FC;
    }
    [data-theme="dark"] .home-split-card.power {
      background: #15201E;
      border-color: rgba(45, 212, 191, 0.16);
    }
    [data-theme="dark"] .home-split-card.water {
      background: #121C20;
      border-color: rgba(103, 232, 249, 0.14);
    }
    .home-split-label {
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0.02em;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .home-split-value {
      font-size: 1.55rem;
      font-weight: 820;
      letter-spacing: -0.04em;
      line-height: 1.1;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .home-split-card.power .home-split-value { color: #0F766E; }
    .home-split-card.water .home-split-value { color: #0E7490; }
    [data-theme="dark"] .home-split-card.power .home-split-value { color: #5EEAD4; }
    [data-theme="dark"] .home-split-card.water .home-split-value { color: #67E8F9; }

    /* Results: cross-links + household chips (scroll on narrow screens) */
    .cross-link-row,
    .preset-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin: 10px 0 4px;
    }
    .preset-scroll {
      position: relative;
      overflow: hidden;
      margin: 8px 0 12px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent-soft) 88%, #C5D4D0);
    }
    [data-theme="dark"] .preset-scroll {
      background: color-mix(in srgb, var(--accent) 22%, #152428);
    }
    body.utility-water .preset-scroll {
      background: color-mix(in srgb, var(--accent-soft) 88%, #B7D4E0);
    }
    .preset-scroll::before,
    .preset-scroll::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 36px;
      z-index: 2;
      pointer-events: none;
      opacity: 1;
    }
    .preset-scroll::before {
      left: 0;
      background: linear-gradient(
        to right,
        var(--bg1, #FFFFFF) 0%,
        color-mix(in srgb, var(--bg1, #FFFFFF) 35%, transparent) 55%,
        transparent 100%
      );
    }
    .preset-scroll::after {
      right: 0;
      background: linear-gradient(
        to left,
        var(--bg1, #FFFFFF) 0%,
        color-mix(in srgb, var(--bg1, #FFFFFF) 35%, transparent) 55%,
        transparent 100%
      );
    }
    [data-theme="dark"] .preset-scroll::before {
      background: linear-gradient(to right, #1A2421 0%, transparent 100%);
    }
    [data-theme="dark"] .preset-scroll::after {
      background: linear-gradient(to left, #1A2421 0%, transparent 100%);
    }
    .preset-row {
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      padding: 4px 8px;
      background: none;
      border: none;
      cursor: grab;
      touch-action: pan-y pan-x;
      overscroll-behavior-x: contain;
    }
    .preset-row::-webkit-scrollbar { display: none; }
    .preset-row.is-dragging {
      cursor: grabbing;
      user-select: none;
    }
    .preset-row.is-dragging .preset-chip {
      pointer-events: none;
    }
    .cross-link-row[hidden],
    .preset-scroll[hidden],
    .preset-row[hidden] { display: none !important; }
    .cross-link-btn {
      appearance: none;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      background: var(--accent-soft);
      color: var(--accent-deep);
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      padding: 8px 12px;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      flex: 0 0 auto;
      white-space: nowrap;
      min-height: 36px;
    }
    .preset-chip {
      appearance: none;
      border: none;
      background: none;
      box-shadow: none;
      border-radius: 0;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      padding: 8px 10px;
      cursor: pointer;
      flex: 0 0 auto;
      white-space: nowrap;
      min-height: 0;
    }
    .preset-chip[aria-pressed="true"] {
      background: none;
      color: var(--accent-deep);
      font-weight: 800;
      box-shadow: none;
      border: none;
    }
    [data-theme="dark"] .preset-chip[aria-pressed="true"] {
      color: #5EEAD4;
    }
    body.utility-water .preset-chip[aria-pressed="true"] {
      color: #0C5F7A;
    }
    .setup-block > label,
    .setup-block .setup-label {
      display: block;
      font-size: 13px;
      font-weight: 750;
      color: var(--text);
      margin-bottom: 8px;
    }
    .num-with-unit {
      display: flex;
      align-items: center;
      gap: 0;
      min-width: 0;
      border-radius: 12px;
      border: 1px solid rgba(15, 118, 110, 0.28);
      background: linear-gradient(165deg, #ECFDF8, #F0FDFA);
      /* visible so multi-digit values / units aren’t clipped */
      overflow: visible;
    }
    [data-theme="dark"] .num-with-unit {
      border-color: rgba(45, 212, 191, 0.3);
      background: linear-gradient(165deg, rgba(45, 212, 191, 0.14), rgba(15, 30, 28, 0.9));
    }
    .num-with-unit input[type="number"] {
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      text-align: center;
      font-weight: 780;
      font-size: 15px;
      padding: 11px 4px 11px 8px;
      color: var(--accent-deep);
      border-radius: 0;
    }
    [data-theme="dark"] .num-with-unit input[type="number"] {
      color: #5EEAD4;
    }
    .input-unit {
      flex: 0 0 auto;
      padding: 0 10px 0 2px;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0.02em;
      color: var(--muted);
      user-select: none;
      line-height: 1;
    }
    [data-theme="dark"] .input-unit {
      color: #9BB0AA;
    }
    .setup-rate {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15, 118, 110, 0.18);
      background: var(--accent-soft);
      cursor: pointer;
      font: inherit;
      color: inherit;
      text-align: left;
    }
    /* setup-rate press uses shared :active ring above */
    [data-theme="dark"] .setup-rate {
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.22);
    }
    .setup-rate-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
      background: var(--accent, #0F766E);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 3px 8px rgba(15, 118, 110, 0.24);
      flex-shrink: 0;
    }
    [data-theme="dark"] .setup-rate-ico {
      color: #0C1211;
      background: var(--accent2, #2DD4BF);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 3px 10px rgba(0, 0, 0, 0.28);
    }
    body.utility-water .setup-rate-ico {
      background: var(--accent, #0369A1);
      color: #fff;
    }
    [data-theme="dark"] body.utility-water .setup-rate-ico {
      background: var(--accent2, #38BDF8);
      color: #0B0F12;
    }
    .setup-rate-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      /* Scale title+value to the available width on any phone */
      container-type: inline-size;
      container-name: setup-rate;
    }
    /* Title + rate stay on ONE line; shrink together instead of wrapping */
    .setup-rate-main {
      display: flex;
      align-items: baseline;
      gap: 0.3em;
      min-width: 0;
      max-width: 100%;
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: hidden;
      /* vw fallback first; cqw scales to the rate row width when supported */
      font-size: clamp(10px, 2.9vw, 12.5px);
      font-size: clamp(10px, 4.6cqw, 12.5px);
    }
    .setup-rate-title {
      flex: 0 1 auto;
      min-width: 0;
      font-size: 1em;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .setup-rate-value {
      flex: 0 0 auto;
      font-size: 1.1em;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      white-space: nowrap;
    }
    .setup-rate-hint {
      display: block;
      font-size: clamp(10px, 2.7vw, 11px);
      font-weight: 600;
      color: var(--muted);
      line-height: 1.3;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }
    @media (max-width: 380px) {
      .setup-rate {
        padding: 10px 10px;
        gap: 8px;
      }
      .setup-rate-ico {
        width: 32px;
        height: 32px;
        font-size: 15px;
      }
      .setup-rate-go {
        font-size: 11px;
      }
    }
    .setup-rate-go {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 750;
      color: var(--accent-deep);
      white-space: nowrap;
    }
    [data-theme="dark"] .setup-rate-go { color: var(--accent2); }
    .setup-panel .select-wrap { margin-top: 0; }
    .setup-panel .slider-row {
      grid-template-columns: minmax(0, 1fr) minmax(88px, 6.5rem);
    }
    /* Label left + exact value right; dial track full width under that row */
    .time-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      margin-bottom: 10px;
    }
    .time-label-row .setup-label {
      flex: 1 1 auto;
      min-width: 0;
      margin-bottom: 0 !important;
      line-height: 1.25;
    }
    .time-label-row .num-with-unit-time {
      flex: 0 0 auto;
    }
    .setup-panel .slider-row-time {
      display: block;
      grid-template-columns: none;
      width: 100%;
      margin-top: 0;
    }
    /* Time dial card — quiet shell; the slider *track* carries the brand teal */
    .setup-block-time {
      padding: 12px 12px 10px;
      margin-left: -2px;
      margin-right: -2px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
      background: color-mix(in srgb, var(--accent) 5%, #FFFCFA);
      box-shadow: 0 2px 8px rgba(40, 28, 16, 0.04);
      color: var(--text);
    }
    [data-theme="dark"] .setup-block-time {
      background: color-mix(in srgb, var(--accent) 8%, #151C1A);
      border-color: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.1));
      box-shadow: none;
      color: var(--text);
    }
    .setup-block-time .setup-label,
    .setup-block-time > label,
    .setup-block-time .time-label-row .setup-label {
      color: var(--text) !important;
    }
    .setup-panel .slider-row-time input[type="range"] {
      display: block;
      width: 100%;
      min-width: 0;
      height: 32px;
      margin: 0;
    }
    /*
      Hours / duty heat scale — soft blend (not hard green→red stripes).
      Low cool mint → soft gold mid → warm coral high (muted red, not neon).
    */
    .setup-panel .slider-row-time input[type="range"]::-webkit-slider-runnable-track,
    #dutySlider::-webkit-slider-runnable-track {
      background: linear-gradient(
        90deg,
        #E8F8F4 0%,
        #9FE8D8 22%,
        #B8E0A8 38%,
        #E8D48A 52%,
        #E8B070 68%,
        #E08A6A 84%,
        #C96B5C 100%
      );
      box-shadow:
        inset 0 0 0 1px rgba(80, 60, 40, 0.1),
        0 1px 2px rgba(40, 28, 16, 0.05);
    }
    .setup-panel .slider-row-time input[type="range"]::-moz-range-track,
    #dutySlider::-moz-range-track {
      background: linear-gradient(
        90deg,
        #E8F8F4 0%,
        #9FE8D8 22%,
        #B8E0A8 38%,
        #E8D48A 52%,
        #E8B070 68%,
        #E08A6A 84%,
        #C96B5C 100%
      );
      border: 1px solid rgba(80, 60, 40, 0.1);
    }
    .setup-panel .slider-row-time input[type="range"]::-webkit-slider-thumb,
    .setup-panel .slider-row-time input[type="range"]::-moz-range-thumb,
    #dutySlider::-webkit-slider-thumb,
    #dutySlider::-moz-range-thumb {
      border-color: var(--range-knob, #0F766E);
      box-shadow:
        0 0 0 2px #FFFFFF,
        0 2px 8px color-mix(in srgb, var(--range-knob, #0F766E) 28%, transparent);
    }
    [data-theme="dark"] .setup-panel .slider-row-time input[type="range"]::-webkit-slider-runnable-track,
    [data-theme="dark"] .setup-panel .slider-row-time input[type="range"]::-moz-range-track,
    [data-theme="dark"] #dutySlider::-webkit-slider-runnable-track,
    [data-theme="dark"] #dutySlider::-moz-range-track {
      background: linear-gradient(
        90deg,
        #1A3A36 0%,
        #2A6B5E 24%,
        #6B7A4A 42%,
        #A68B4A 58%,
        #B07850 74%,
        #A65A4A 100%
      );
    }
    [data-theme="dark"] .setup-panel .slider-row-time input[type="range"]::-webkit-slider-thumb,
    [data-theme="dark"] .setup-panel .slider-row-time input[type="range"]::-moz-range-thumb,
    [data-theme="dark"] #dutySlider::-webkit-slider-thumb,
    [data-theme="dark"] #dutySlider::-moz-range-thumb {
      box-shadow:
        0 0 0 2px #0C1211,
        0 2px 10px rgba(0, 0, 0, 0.4);
    }
    /* Compact accurate value — sits to the right of the label */
    .num-with-unit-time {
      border-width: 1.5px;
      border-color: color-mix(in srgb, var(--accent) 40%, transparent);
      border-radius: 12px;
      min-height: 40px;
      min-width: 5.5rem;
      width: auto;
      max-width: 9rem;
      background: var(--bg1) !important;
      box-shadow: none;
      overflow: visible;
      justify-content: flex-end;
    }
    .num-with-unit-time input[type="number"] {
      font-size: 1.1rem;
      font-weight: 820;
      letter-spacing: -0.03em;
      padding: 8px 2px 8px 10px;
      min-width: 3.5ch;
      width: 4.5ch;
      flex: 0 1 auto;
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--accent-deep) !important;
      -moz-appearance: textfield;
      appearance: textfield;
    }
    .num-with-unit-time input[type="number"]::-webkit-outer-spin-button,
    .num-with-unit-time input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
      height: 0;
    }
    .num-with-unit-time .input-unit {
      font-size: 12px;
      font-weight: 780;
      color: var(--accent-deep) !important;
      padding-right: 10px;
      padding-left: 4px;
      flex-shrink: 0;
    }
    [data-theme="dark"] .num-with-unit-time .input-unit {
      color: var(--accent2) !important;
    }
    [data-theme="dark"] .num-with-unit-time input[type="number"] {
      color: var(--accent2) !important;
    }
    /* Quick times — full width of the dial, equal columns, thin vertical rules */
    .time-presets {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      width: 100%;
      margin-top: 10px;
      padding: 0;
      border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
      gap: 0;
    }
    .time-presets[hidden] { display: none !important; }
    .time-preset {
      appearance: none;
      flex: 1 1 0;
      min-width: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 12.5px;
      font-weight: 650;
      padding: 10px 4px;
      margin: 0;
      cursor: pointer;
      line-height: 1.2;
      text-align: center;
      box-shadow: none;
      border-left: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
      transition: color 0.12s, background 0.12s, font-weight 0.12s;
    }
    .time-preset:first-child {
      border-left: none;
    }
    .time-preset[aria-pressed="true"] {
      color: #0F766E;
      background: transparent;
      border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
      box-shadow: none;
      font-weight: 820;
    }
    .time-preset:first-child[aria-pressed="true"] {
      border-left: none;
    }
    body.utility-water .time-preset[aria-pressed="true"] {
      color: #0E7490;
    }
    [data-theme="dark"] .time-preset {
      background: transparent;
      color: #9BB0AA;
      border-left-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="dark"] .time-preset[aria-pressed="true"] {
      color: #5EEAD4;
      background: transparent;
    }
    [data-theme="dark"] body.utility-water .time-preset[aria-pressed="true"] {
      color: #67E8F9;
    }
    @media (hover: hover) and (pointer: fine) {
      .time-preset:not([aria-pressed="true"]):hover {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
    }
    .setup-panel #settingGroup,
    .setup-panel #heatGroup {
      margin-bottom: 14px;
      padding: 0;
      border: none;
      background: none;
      box-shadow: none;
    }
    [data-theme="dark"] .setup-panel #settingGroup {
      background: none;
      border: none;
    }
    .cost-label {
      font-size: 11px;
      color: var(--muted);
      margin-top: 5px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 100px;
      transform: translateX(-50%) translateY(8px);
      background: var(--text);
      color: var(--bg1);
      padding: 12px 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      z-index: 80;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      max-width: calc(100% - 40px);
      text-align: center;
    }
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    [data-theme="dark"] .toast {
      background: #F0F7F5;
      color: #0C1211;
    }

    /* Custom confirm sheet (replaces browser confirm) */
    .whatt-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
      /* solid dim is cheap; blur only while open (still looks polished) */
      background: rgba(12, 18, 17, 0.52);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      /* own layer so opening doesn't repaint the whole page */
      transform: translateZ(0);
    }
    .whatt-modal.show {
      opacity: 1;
      pointer-events: auto;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .whatt-modal[hidden] { display: none !important; }
    .whatt-modal-card {
      width: 100%;
      max-width: 380px;
      border-radius: 22px;
      padding: 22px 20px 18px;
      background:
        radial-gradient(ellipse 90% 70% at 100% -20%, rgba(20, 184, 166, 0.14), transparent 50%),
        linear-gradient(165deg, #FFFFFF 0%, #F3F9F7 100%);
      border: 1px solid rgba(15, 118, 110, 0.16);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 24px 48px rgba(0, 0, 0, 0.22);
      transform: scale(0.96);
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
      contain: layout paint;
    }
    .whatt-modal.show .whatt-modal-card {
      transform: scale(1);
    }
    [data-theme="dark"] .whatt-modal-card {
      background:
        radial-gradient(ellipse 90% 70% at 100% -20%, rgba(45, 212, 191, 0.12), transparent 50%),
        linear-gradient(165deg, #1A2421 0%, #141B1A 100%);
      border-color: rgba(45, 212, 191, 0.2);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 24px 48px rgba(0, 0, 0, 0.5);
    }
    .whatt-modal-ico {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 14px;
      background: linear-gradient(155deg, #FEF3C7, #FDE68A);
      border: 1px solid rgba(180, 120, 20, 0.25);
      box-shadow: 0 4px 12px rgba(180, 120, 20, 0.15);
    }
    [data-theme="dark"] .whatt-modal-ico {
      background: rgba(240, 180, 80, 0.16);
      border-color: rgba(240, 180, 80, 0.3);
    }
    .whatt-modal-title {
      font-size: 1.2rem;
      font-weight: 780;
      letter-spacing: -0.03em;
      color: var(--text);
      margin: 0 0 8px;
      line-height: 1.2;
    }
    .whatt-modal-body {
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--muted);
      margin: 0 0 18px;
    }
    .whatt-modal-body strong {
      color: var(--text);
      font-weight: 700;
    }
    [data-theme="dark"] .whatt-modal-body strong { color: #E8F5F1; }
    .whatt-modal-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .whatt-modal-actions .btn-primary,
    .whatt-modal-actions .btn-secondary {
      width: 100%;
    }
    .whatt-modal-actions .btn-danger {
      width: 100%;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 650;
      cursor: pointer;
      padding: 15px 18px;
      border: none;
      letter-spacing: -0.01em;
      color: #fff;
      background: linear-gradient(155deg, #F87171 0%, #EF4444 40%, #DC2626 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 20px rgba(220, 38, 38, 0.28);
    }
    /* modal danger press uses shared :active ring above */
    [data-theme="dark"] .whatt-modal-actions .btn-danger {
      background: linear-gradient(155deg, #F87171 0%, #EF4444 50%, #B91C1C 100%);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }

    .empty-card {
      text-align: center;
      padding: 32px 18px 28px;
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(20, 184, 166, 0.16), transparent 55%),
        linear-gradient(165deg, #FFFFFF 0%, #E8F6F1 100%);
      border: 1.5px solid rgba(15, 118, 110, 0.22);
      border-radius: 20px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 22px rgba(15, 118, 110, 0.08);
    }
    [data-theme="dark"] .empty-card {
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
        linear-gradient(165deg, #171F1D, #141B1A);
      border-color: rgba(45, 212, 191, 0.26);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
    html:not([data-theme="dark"]) body.utility-water .empty-card {
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34, 211, 238, 0.14), transparent 55%),
        linear-gradient(165deg, #FFFFFF 0%, #E6F4F8 100%);
      border-color: rgba(14, 116, 144, 0.24);
    }
    [data-theme="dark"] body.utility-water .empty-card {
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34, 211, 238, 0.12), transparent 55%),
        linear-gradient(165deg, #171F1D, #141B1A);
      border-color: rgba(34, 211, 238, 0.26);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
    .empty-card .empty-emoji {
      width: 64px;
      height: 64px;
      margin: 0 auto 12px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.85rem;
      line-height: 1;
      background: linear-gradient(160deg, #E6F7F2, #D4F0E9);
      border: 1.5px solid rgba(15, 118, 110, 0.22);
      box-shadow: 0 4px 12px rgba(15, 118, 110, 0.12);
    }
    [data-theme="dark"] .empty-card .empty-emoji {
      background: linear-gradient(160deg, rgba(45, 212, 191, 0.2), rgba(15, 118, 110, 0.16));
      border-color: rgba(45, 212, 191, 0.3);
      box-shadow: none;
    }
    body.utility-water .empty-card .empty-emoji {
      background: linear-gradient(160deg, #E0F5FA, #CFF0F7);
      border-color: rgba(14, 116, 144, 0.24);
    }
    .empty-card h3 {
      font-size: 1.12rem;
      font-weight: 800;
      margin-bottom: 6px;
      letter-spacing: -0.025em;
      color: var(--text);
    }
    .empty-card .empty-honesty {
      margin: 8px 0 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.35;
    }
    .contact-email-hint {
      margin: 6px 0 0;
      font-size: 0.78rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.35;
      max-width: 28em;
    }
    /* Email chooser — centered modal (not a bottom sheet) so it feels like “message Whatt” */
    .email-sheet {
      position: fixed;
      inset: 0;
      z-index: 10050;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
      box-sizing: border-box;
    }
    .email-sheet[hidden] { display: none !important; }
    .email-sheet-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 28, 26, 0.48);
    }
    .email-sheet-card {
      position: relative;
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
      padding: 20px 18px 16px;
      border-radius: 18px;
      background: var(--bg1, #FFFCFA);
      border: 1px solid rgba(55, 45, 35, 0.1);
      box-shadow: 0 16px 48px rgba(15, 28, 26, 0.22);
      animation: emailSheetIn 0.16s ease-out;
    }
    @keyframes emailSheetIn {
      from { transform: scale(0.96); opacity: 0.5; }
      to { transform: scale(1); opacity: 1; }
    }
    [data-theme="dark"] .email-sheet-card {
      background: #15201D;
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    }
    .email-sheet-title {
      margin: 0 2px 4px;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .email-sheet-sub {
      margin: 0 2px 12px;
      font-size: 0.8rem;
      font-weight: 550;
      line-height: 1.35;
      color: var(--muted);
    }
    .email-sheet-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .email-sheet-btn {
      appearance: none;
      border: 1.5px solid rgba(15, 118, 110, 0.22);
      background: #fff;
      color: var(--text);
      border-radius: 12px;
      padding: 12px 14px;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }
    .email-sheet-btn:active {
      background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
    }
    [data-theme="dark"] .email-sheet-btn {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(45, 212, 191, 0.22);
      color: #E8F5F1;
    }
    .email-sheet-btn-copy {
      border-style: dashed;
    }
    .email-sheet-btn-cancel {
      border-color: transparent;
      background: transparent;
      color: var(--muted);
      text-align: center;
      font-weight: 650;
    }
    .empty-card p {
      font-size: 0.93rem;
      color: var(--muted);
      line-height: 1.45;
      margin-bottom: 16px;
      max-width: 28em;
      margin-left: auto;
      margin-right: auto;
    }

    .total-unit {
      font-size: 0.95rem;
      font-weight: 650;
      opacity: 0.9;
      margin-left: 2px;
    }
    .total-bar .year-line {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.92;
      line-height: 1.35;
    }
    .total-bar .total-aside-mix {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.3;
    }

    .input-group {
      margin-bottom: 12px;
      padding: 14px 14px 12px;
      border-radius: 16px;
      background: linear-gradient(165deg, rgba(255,255,255,0.9), rgba(232, 247, 244, 0.55));
      border: 1px solid rgba(15, 118, 110, 0.12);
      box-shadow: 0 2px 10px rgba(15, 118, 110, 0.04);
    }
    .input-group:last-of-type { margin-bottom: 4px; }
    [data-theme="dark"] .input-group {
      background: linear-gradient(165deg, rgba(255,255,255,0.04), rgba(45, 212, 191, 0.05));
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: none;
    }
    label {
      display: block;
      font-size: 12px;
      color: var(--accent-deep);
      margin-bottom: 8px;
      font-weight: 750;
      letter-spacing: 0.01em;
    }
    [data-theme="dark"] label { color: #99F6E4; }
    input[type="number"], input[type="text"] {
      width: 100%;
      background: #FFFFFF;
      border: 1.5px solid var(--border);
      color: var(--text);
      padding: 13px 14px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 600;
      box-shadow: var(--shadow-sm);
    }
    input[type="number"]:focus,
    input[type="text"]:focus {
      border-color: var(--accent2);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    [data-theme="dark"] input[type="number"],
    [data-theme="dark"] input[type="text"] {
      background: linear-gradient(165deg, #1C2623, #15201D);
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    /*
      Dial line: white at 0 → darker brand teal at max.
      Knob: white face + teal ring, vertically centered on the track.
    */
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      margin: 0;
      padding: 0;
      height: 28px;
      background: transparent;
      border: none;
      accent-color: #0F766E;
      cursor: pointer;
      vertical-align: middle;
    }
    body.utility-water input[type="range"] {
      accent-color: #0E7490;
    }
    /* Track 6px; thumb 22px border-box → margin-top = (6 − 22) / 2 = −8px */
    input[type="range"]::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, #FFFFFF 0%, #CCFBF1 28%, #2DD4BF 62%, #0F766E 100%);
      box-shadow:
        inset 0 0 0 1px rgba(15, 118, 110, 0.18),
        0 1px 2px rgba(40, 28, 16, 0.06);
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      box-sizing: border-box;
      width: 22px;
      height: 22px;
      margin-top: -8px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 2.5px solid #0F766E;
      box-shadow:
        0 0 0 2px #FFFFFF,
        0 2px 8px rgba(15, 118, 110, 0.3);
    }
    input[type="range"]::-moz-range-track {
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, #FFFFFF 0%, #CCFBF1 28%, #2DD4BF 62%, #0F766E 100%);
      border: 1px solid rgba(15, 118, 110, 0.16);
    }
    input[type="range"]::-moz-range-thumb {
      box-sizing: border-box;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 2.5px solid #0F766E;
      box-shadow:
        0 0 0 2px #FFFFFF,
        0 2px 8px rgba(15, 118, 110, 0.3);
    }
    body.utility-water input[type="range"]::-webkit-slider-runnable-track,
    body.utility-water input[type="range"]::-moz-range-track {
      background: linear-gradient(90deg, #FFFFFF 0%, #CFFAFE 28%, #22D3EE 62%, #0E7490 100%);
      box-shadow:
        inset 0 0 0 1px rgba(14, 116, 144, 0.18),
        0 1px 2px rgba(40, 28, 16, 0.06);
    }
    body.utility-water input[type="range"]::-webkit-slider-thumb,
    body.utility-water input[type="range"]::-moz-range-thumb {
      border-color: #0E7490;
      box-shadow:
        0 0 0 2px #FFFFFF,
        0 2px 8px rgba(14, 116, 144, 0.3);
    }
    [data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track,
    [data-theme="dark"] input[type="range"]::-moz-range-track {
      background: linear-gradient(90deg, #1A2422 0%, #134E4A 30%, #0F766E 65%, #2DD4BF 100%);
      box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.22);
    }
    [data-theme="dark"] input[type="range"]::-webkit-slider-thumb,
    [data-theme="dark"] input[type="range"]::-moz-range-thumb {
      background: #F0F7F5;
      border: 2.5px solid #2DD4BF;
      box-shadow:
        0 0 0 2px #0C1211,
        0 2px 10px rgba(0, 0, 0, 0.4);
    }
    [data-theme="dark"] body.utility-water input[type="range"]::-webkit-slider-runnable-track,
    [data-theme="dark"] body.utility-water input[type="range"]::-moz-range-track {
      background: linear-gradient(90deg, #152024 0%, #0C4A6E 30%, #0E7490 65%, #22D3EE 100%);
    }
    [data-theme="dark"] body.utility-water input[type="range"]::-webkit-slider-thumb,
    [data-theme="dark"] body.utility-water input[type="range"]::-moz-range-thumb {
      border-color: #22D3EE;
    }
    select:focus, input:focus:not([type="range"]) {
      outline: none;
      border-color: #14B8A6;
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
    }
    /* Sliders: no teal focus ring / highlight while dragging */
    input[type="range"]:focus,
    input[type="range"]:focus-visible,
    input[type="range"]:active {
      outline: none !important;
      box-shadow: none !important;
      border-color: transparent !important;
    }
    input::placeholder { color: var(--faint); }

    .slider-row {
      display: grid;
      grid-template-columns: 1fr 92px;
      gap: 12px;
      align-items: center;
    }
    .slider-row input[type="range"] {
      display: block;
      align-self: center;
      height: 28px;
    }
    .slider-row > input[type="number"] {
      text-align: center;
      font-weight: 780;
      font-size: 15px;
      padding: 11px 8px;
      background: linear-gradient(165deg, #ECFDF8, #F0FDFA);
      border-color: rgba(15, 118, 110, 0.28);
      color: var(--accent-deep);
    }
    [data-theme="dark"] .slider-row > input[type="number"] {
      background: linear-gradient(165deg, rgba(45, 212, 191, 0.14), rgba(15, 30, 28, 0.9));
      border-color: rgba(45, 212, 191, 0.3);
      color: #5EEAD4;
    }

    .rate-hint {
      font-size: 12px;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.45;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(15, 118, 110, 0.05);
      border: 1px solid rgba(15, 118, 110, 0.08);
    }
    [data-theme="dark"] .rate-hint {
      background: rgba(45, 212, 191, 0.06);
      border-color: rgba(45, 212, 191, 0.1);
      color: #9BB0AA;
    }

    .tip-box, .info-box, .save-box {
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-top: 12px;
      text-align: left;
      font-size: 13px;
      line-height: 1.45;
    }
    .tip-box[hidden], .save-box[hidden] { display: none !important; }
    .tip-box {
      flex-direction: column;
      gap: 0;
      background: #FFFFFF;
      border: 1px solid rgba(60, 40, 20, 0.1);
      color: var(--text);
    }
    [data-theme="dark"] .tip-box {
      background: #FDE68A;
      border-color: #D97706;
      color: #451A03;
    }
    /* Collapsible Tips: 2-line preview, tap for full + extras */
    .tip-fold {
      margin: 0;
      width: 100%;
    }
    .tip-fold > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      user-select: none;
    }
    .tip-fold > summary::-webkit-details-marker { display: none; }
    .tip-fold .tip-icon {
      flex-shrink: 0;
      line-height: 1.3;
      font-size: 1.05rem;
      margin-top: 1px;
    }
    .tip-fold-body {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
      text-align: left;
    }
    .tip-kicker {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: none;
      color: #451A03;
      line-height: 1.2;
    }
    [data-theme="dark"] .tip-kicker {
      color: #451A03;
    }
    .tip-preview {
      font-size: 12.5px;
      font-weight: 550;
      line-height: 1.4;
      color: #78350F;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    [data-theme="dark"] .tip-preview {
      color: #78350F;
    }
    .tip-fold[open] .tip-preview {
      -webkit-line-clamp: unset;
      display: block;
      overflow: visible;
    }
    /*
      Tips & ideas chevrons — circular pressable control.
      Arrow lives on ::after so the circle border stays round.
    */
    #results .tip-fold-chevron,
    #results .scenario-chevron,
    #results .adj-chevron,
    #results .about-chevron,
    #results .tip-more-chevron {
      display: flex !important;
      align-items: center;
      justify-content: center;
      position: relative;
      flex: 0 0 auto;
      width: 30px !important;
      height: 30px !important;
      margin: 0 !important;
      padding: 0;
      box-sizing: border-box;
      border-radius: 999px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--border)) !important;
      background: color-mix(in srgb, var(--bg1) 70%, var(--accent-soft));
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.08);
      opacity: 1 !important;
      transform: none !important;
      color: var(--accent-deep);
      transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    }
    #results .tip-fold-chevron::after,
    #results .scenario-chevron::after,
    #results .adj-chevron::after,
    #results .about-chevron::after,
    #results .tip-more-chevron::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 46%;
      width: 7px;
      height: 7px;
      margin-left: -3.5px;
      margin-top: -5px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.15s ease, margin-top 0.15s ease;
      pointer-events: none;
    }
    /* Open = arrow points up (looks like “collapse”) */
    #results details[open] > summary .tip-fold-chevron::after,
    #results details[open] > summary .scenario-chevron::after,
    #results details[open] > summary .adj-chevron::after,
    #results details[open] > summary .about-chevron::after,
    #results details[open] > summary .tip-more-chevron::after {
      transform: rotate(225deg);
      margin-top: -2px;
    }
    #results summary:hover .tip-fold-chevron,
    #results summary:hover .scenario-chevron,
    #results summary:hover .adj-chevron,
    #results summary:hover .about-chevron,
    #results summary:hover .tip-more-chevron {
      background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
      box-shadow: 0 2px 6px rgba(15, 118, 110, 0.12);
    }
    [data-theme="dark"] #results .tip-fold-chevron,
    [data-theme="dark"] #results .scenario-chevron,
    [data-theme="dark"] #results .adj-chevron,
    [data-theme="dark"] #results .about-chevron,
    [data-theme="dark"] #results .tip-more-chevron {
      color: #5EEAD4;
      background: rgba(0, 0, 0, 0.28);
      border-color: rgba(45, 212, 191, 0.4) !important;
      box-shadow: none;
    }
    /* tip-fold still needs base rules for layout outside the circle override */
    .tip-fold-chevron {
      flex: 0 0 auto;
    }
    .tip-fold-extra {
      padding: 0 14px 12px 40px;
    }
    .tip-fold-extra[hidden] {
      display: none !important;
    }
    .tip-fold .tip-more-list {
      margin: 0;
      padding: 0 0 0 18px;
      list-style: disc;
      border-top: 1px solid rgba(120, 53, 15, 0.28);
      padding-top: 8px;
      color: #451A03;
    }
    [data-theme="dark"] .tip-fold .tip-more-list {
      border-top-color: rgba(120, 53, 15, 0.35);
      color: #451A03;
    }
    .tip-fold .tip-more-list li {
      margin: 0 0 6px;
      line-height: 1.45;
      opacity: 1;
      font-weight: 550;
      color: #451A03;
    }
    .tip-fold .tip-more-list li:last-child { margin-bottom: 0; }
    .result-live-hint {
      margin: 8px 2px 0;
      padding: 0;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--muted);
      text-align: center;
    }
    .result-live-hint[hidden] { display: none !important; }
    [data-theme="dark"] .result-live-hint { color: #9BB0AA; }
    /* Try chips moved into What if — keep hooks, never show the old panel */
    .try-panel,
    #whatIfSection.try-panel {
      display: none !important;
    }
    .scenario-quick {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 12px 0 4px;
    }
    .scenario-quick + .scenario-list {
      margin-top: 10px;
    }
    .scenario-quick[hidden] { display: none !important; }
    .scenario-quick .btn-try {
      width: 100%;
      border-color: color-mix(in srgb, #059669 30%, rgba(60, 40, 20, 0.1));
      background: #F7FDF9;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(40, 28, 16, 0.06);
    }
    .scenario-quick .btn-try.is-save .try-delta {
      font-weight: 800;
      color: #047857;
      font-size: 13.5px;
      white-space: nowrap;
    }
    .scenario-quick .btn-try .try-go {
      color: #047857;
      background: #ECFDF5;
      border: 1px solid rgba(4, 120, 87, 0.22);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    [data-theme="dark"] .scenario-quick .btn-try {
      background: rgba(4, 80, 60, 0.28);
      border-color: rgba(52, 211, 153, 0.3);
      color: #E8F5F1;
    }
    [data-theme="dark"] .scenario-quick .btn-try.is-save .try-delta {
      color: #6EE7B7;
    }
    [data-theme="dark"] .scenario-quick .btn-try .try-go {
      color: #0C1211;
      background: #6EE7B7;
      border-color: transparent;
    }
    .tip-main {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .tip-main .tip-icon { flex-shrink: 0; line-height: 1.3; }
    .tip-main #resultTip { flex: 1; min-width: 0; }
    .tip-more {
      margin-top: 8px;
      border-top: 1px solid rgba(146, 64, 14, 0.14);
      padding-top: 2px;
    }
    [data-theme="dark"] .tip-more {
      border-top-color: rgba(253, 230, 138, 0.18);
    }
    .tip-more[hidden] { display: none !important; }
    .tip-more > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      padding: 10px 4px 8px;
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      color: inherit;
      opacity: 0.85;
      user-select: none;
      box-sizing: border-box;
    }
    .tip-more > summary::-webkit-details-marker { display: none; }
    .tip-more > summary .tip-more-label {
      letter-spacing: 0.01em;
      flex: 1 1 auto;
      text-align: left;
      min-width: 0;
    }
    .tip-more > summary .tip-more-chevron {
      width: 7px;
      height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      opacity: 0.7;
      flex-shrink: 0;
      margin-top: -2px;
      transition: transform 0.15s ease;
    }
    .tip-more[open] > summary .tip-more-chevron {
      transform: rotate(225deg);
      margin-top: 2px;
    }
    .tip-more-list {
      margin: 0;
      padding: 4px 0 2px 22px;
      list-style: disc;
    }
    .tip-more-list li {
      margin: 0 0 6px;
      padding-left: 2px;
      line-height: 1.4;
      opacity: 0.95;
    }
    .tip-more-list li:last-child { margin-bottom: 2px; }
    .save-box {
      background: linear-gradient(165deg, #ECFDF5, #D1FAE5);
      border: 1px solid #A7F3D0;
      color: #065F46;
      margin-top: 16px;
    }
    [data-theme="dark"] .save-box {
      background: linear-gradient(165deg, rgba(45, 212, 191, 0.12), rgba(16, 185, 129, 0.08));
      border-color: rgba(52, 211, 153, 0.28);
      color: #6EE7B7;
    }
    .save-box.costlier {
      background: linear-gradient(165deg, #FFF7ED, #FFEDD5);
      border-color: #FDBA74;
      color: #9A3412;
    }
    [data-theme="dark"] .save-box.costlier {
      background: linear-gradient(165deg, rgba(251, 146, 60, 0.12), rgba(234, 88, 12, 0.08));
      border-color: rgba(251, 146, 60, 0.3);
      color: #FDBA74;
    }
    .info-box {
      background: linear-gradient(165deg, #ECFEFF, #E0F2FE);
      border: 1px solid #BAE6FD;
      color: #0C4A6E;
      margin-bottom: 16px;
      margin-top: 0;
    }
    [data-theme="dark"] .info-box {
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.28);
      color: #D1FAE5;
    }
    .tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

    /* Rate finder — no top glow; brand topbar + cream cards */
    #rate-finder.screen.active {
      position: relative;
    }
    #rate-finder.screen.active::before {
      display: none;
      content: none;
    }
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Rate finder — title + form live in one soft stage */
    #rate-finder .rate-finder-head {
      display: block;
      margin: 0 0 12px;
      padding: 0 2px 10px;
      border-bottom: 1px solid rgba(60, 40, 20, 0.07);
    }
    [data-theme="dark"] #rate-finder .rate-finder-head {
      border-bottom-color: rgba(255, 255, 255, 0.07);
    }
    #rate-finder .rate-finder-head:has(#rateFinderSub[hidden]) {
      margin-bottom: 12px;
    }
    #rate-finder .rate-finder-mark {
      display: none !important;
    }
    #rate-finder .rate-finder-head-text {
      min-width: 0;
    }
    #rate-finder .section-title {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--text);
    }
    #rate-finder .section-sub {
      margin: 2px 0 0;
      color: var(--muted);
      font-weight: 550;
      font-size: 0.78rem;
      line-height: 1.35;
      max-width: 32em;
    }
    #rate-finder .section-sub[hidden] {
      display: none !important;
    }
    #rate-finder .info-box {
      background: rgba(15, 118, 110, 0.06);
      border: 1px solid rgba(15, 118, 110, 0.1);
      color: var(--text);
      font-weight: 560;
      border-radius: 12px;
      margin: 0 0 12px;
      padding: 10px 12px;
    }
    [data-theme="dark"] #rate-finder .info-box {
      background: rgba(45, 212, 191, 0.08);
      border-color: rgba(45, 212, 191, 0.14);
      color: #E5EFEA;
    }

    .rate-finder-stack {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    /* Clear first path — pick how to set the rate */
    .rate-path-picker {
      margin: 0 0 14px;
    }
    .rate-path-picker-label {
      font-size: 0.92rem;
      font-weight: 750;
      color: var(--text);
      margin: 0 0 8px;
      letter-spacing: -0.01em;
    }
    .rate-path-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .rate-path-btn-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
    }
    .rate-path-badge {
      flex: 0 0 auto;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
      color: #0B5F58;
      background: color-mix(in srgb, var(--accent) 16%, #FFFFFF);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    }
    [data-theme="dark"] .rate-path-badge {
      color: #99F6E4;
      background: rgba(45, 212, 191, 0.14);
      border-color: rgba(45, 212, 191, 0.28);
    }
    .rate-path-btn.is-recommended {
      border-color: rgba(15, 118, 110, 0.28);
      background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(20, 184, 166, 0.1), transparent 55%),
        #FFFFFF;
    }
    [data-theme="dark"] .rate-path-btn.is-recommended {
      border-color: rgba(45, 212, 191, 0.28);
      background: rgba(45, 212, 191, 0.06);
    }
    #rate-finder .section-sub:not([hidden]) {
      display: block;
    }
    /*
      Both paths are equal expandable cards:
      header button always tappable; body opens under the active path.
    */
    .rate-path-block {
      border-radius: 16px;
      border: 1.5px solid rgba(60, 40, 20, 0.14);
      background: #FFFFFF;
      box-shadow: 0 2px 8px rgba(40, 28, 16, 0.05);
      overflow: hidden;
      transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
    }
    .rate-path-block.is-active {
      border-color: rgba(15, 118, 110, 0.45);
      box-shadow:
        0 0 0 1px rgba(15, 118, 110, 0.14),
        0 6px 18px rgba(15, 118, 110, 0.12);
      background:
        radial-gradient(ellipse 90% 80% at 0% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        #FFFFFF;
    }
    .rate-path-block .rate-path-btn {
      border: none;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      min-height: 56px;
    }
    .rate-path-block.is-active .rate-path-btn-title {
      color: var(--accent-deep);
    }
    .rate-path-expand {
      padding: 0 12px 14px;
      border-top: 1px solid rgba(15, 118, 110, 0.12);
    }
    .rate-path-block:not(.is-active) .rate-path-expand {
      display: none !important;
    }
    .rate-path-block.is-active .rate-path-expand {
      display: block;
    }
    [data-theme="dark"] .rate-path-block {
      background: #151C1A;
      border-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="dark"] .rate-path-block.is-active {
      background: color-mix(in srgb, var(--accent) 16%, #151C1A);
      border-color: color-mix(in srgb, var(--accent) 50%, rgba(255, 255, 255, 0.12));
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] .rate-path-expand {
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    .rate-path-btn {
      display: block;
      width: 100%;
      text-align: left;
      padding: 14px 14px;
      border-radius: 14px;
      border: 1.5px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      color: inherit;
      font: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(15, 118, 110, 0.12);
      touch-action: manipulation;
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.04);
      transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
    }
    .rate-path-btn:hover {
      background: color-mix(in srgb, var(--accent-soft) 35%, #FFFFFF);
    }
    .rate-path-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }
    .rate-path-btn-title {
      display: block;
      font-size: 0.95rem;
      font-weight: 750;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .rate-path-btn-sub {
      display: block;
      margin-top: 3px;
      font-size: 0.78rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.3;
    }
    .rate-path-type-hint {
      margin: 0 0 10px;
      font-size: 0.82rem;
      font-weight: 550;
      color: var(--muted);
      line-height: 1.35;
    }
    .rate-location-btn {
      width: 100%;
      margin: 10px 0 4px;
      font-weight: 700;
    }
    .rate-location-btn:disabled {
      opacity: 0.65;
      cursor: wait;
    }
    .rate-place-or {
      margin: 10px 0 8px;
      text-align: center;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .rate-path-guard {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.35;
      background: color-mix(in srgb, var(--warn-bg, #FFF6E8) 90%, #fff);
      border: 1px solid color-mix(in srgb, var(--warn-border, #E8C56A) 70%, transparent);
      color: var(--warn-text, #7A4E0C);
    }
    [data-theme="dark"] .rate-path-btn {
      background: #151C1A;
      border-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="dark"] .rate-path-btn[aria-pressed="true"] {
      background: color-mix(in srgb, var(--accent) 16%, #151C1A);
      border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.12));
    }
    [data-theme="dark"] .rate-path-guard {
      background: rgba(240, 200, 100, 0.12);
      border-color: rgba(240, 200, 100, 0.28);
      color: #F0D48A;
    }
    #rate-finder .divider {
      margin: 12px 0;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--faint);
    }

    /* Sections sit on the stage — no nested white cards */
    #rate-finder .rate-card.more-section,
    #rate-finder .more-section {
      position: relative;
      overflow: visible;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: 4px 0 2px;
      margin-bottom: 0;
    }
    #waterSourceSection,
    #waterSourceSection .input-group,
    #waterBillingGroup {
      overflow: visible;
    }
    [data-theme="dark"] #rate-finder .rate-card.more-section,
    [data-theme="dark"] #rate-finder .more-section {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    #rate-finder .more-section::before {
      display: none;
    }
    #rate-finder .rate-card-primary {
      border: none;
      box-shadow: none;
    }
    #rate-finder .rate-card-secondary {
      padding-top: 12px;
      padding-bottom: 4px;
      opacity: 0.98;
      box-shadow: none;
      border-top: 1px solid rgba(60, 40, 20, 0.07);
    }
    [data-theme="dark"] #rate-finder .rate-card-secondary {
      border-top-color: rgba(255, 255, 255, 0.07);
    }
    #rate-finder .rate-card-secondary::before {
      height: 2px;
      opacity: 0.7;
    }
    #rate-finder .more-title {
      color: var(--text);
      letter-spacing: -0.02em;
      text-transform: none;
      font-size: 1.05rem;
      font-weight: 760;
      margin: 0 0 12px;
    }
    #rate-finder .more-title::before { content: none; display: none; }
    [data-theme="dark"] #rate-finder .more-title { color: #F0F7F5; }
    /* Leads must wrap fully — never clip mid-sentence */
    #rate-finder .rate-card-lead {
      margin: 0 0 12px;
      font-size: 0.84rem;
      font-weight: 500;
      color: var(--muted);
      line-height: 1.4;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }
    #rate-finder .rate-card-lead:empty,
    #rate-finder .rate-card-lead[hidden] {
      display: none !important;
      margin: 0;
    }
    #rate-finder .rate-card-secondary .rate-card-lead {
      margin-bottom: 12px;
    }
    #rate-finder .input-group {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
      margin-bottom: 12px;
    }
    #rate-finder label { color: var(--muted); font-weight: 600; }
    [data-theme="dark"] #rate-finder label { color: #B6C7C1; }
    #rate-finder .rate-hint {
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.45;
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--bg0);
      border: 1px solid var(--border);
    }
    [data-theme="dark"] #rate-finder .rate-hint {
      color: #C5D5CF;
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }
    #rate-finder .rate-preview {
      background: #0F766E;
      margin: 0 0 12px;
      border-radius: 14px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    }
    [data-theme="dark"] #rate-finder .rate-preview {
      background: #0D9488;
    }
    #rate-finder .rate-preview-label {
      color: rgba(255, 255, 255, 0.92);
      font-size: 13px;
      font-weight: 600;
    }
    #rate-finder .btn-secondary {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
      font-weight: 650;
    }
    [data-theme="dark"] #rate-finder .btn-secondary {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.14);
      color: #E8F0ED;
    }
    [data-theme="dark"] #rate-finder select,
    [data-theme="dark"] #rate-finder input[type="text"] {
      background: #0F1614;
      border-color: rgba(255, 255, 255, 0.12);
      color: #F0F7F5;
    }
    [data-theme="dark"] #rate-finder select option {
      background: #141B1A;
      color: #F0F7F5;
    }

    /* Elevated search shell — lives under My area (not only #ratePlaceSection) */
    #rate-finder .place-search-shell {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      min-height: 52px;
      padding: 5px 5px 5px 10px;
      border-radius: 16px;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: #FFFFFF;
      box-shadow: 0 1px 2px rgba(40, 28, 16, 0.04);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #rate-finder .place-search-shell:focus-within {
      border-color: rgba(20, 184, 166, 0.55);
      box-shadow:
        0 0 0 3px rgba(20, 184, 166, 0.14),
        0 1px 2px rgba(40, 28, 16, 0.04);
    }
    [data-theme="dark"] #rate-finder .place-search-shell {
      background: #0F1614;
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }
    [data-theme="dark"] #rate-finder .place-search-shell:focus-within {
      border-color: rgba(45, 212, 191, 0.5);
      box-shadow:
        0 0 0 3px rgba(45, 212, 191, 0.12),
        0 4px 14px rgba(0, 0, 0, 0.25);
    }
    #rate-finder .place-search-icon {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-deep);
      background: rgba(15, 118, 110, 0.09);
      overflow: hidden;
    }
    #rate-finder .place-search-icon svg {
      width: 16px;
      height: 16px;
      display: block;
      flex-shrink: 0;
    }
    [data-theme="dark"] #rate-finder .place-search-icon {
      color: #5EEAD4;
      background: rgba(45, 212, 191, 0.12);
    }
    #rate-finder .place-search-shell input[type="text"] {
      flex: 1 1 auto;
      min-width: 0;
      width: 0;
      margin: 0;
      padding: 10px 6px;
      border: none !important;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none !important;
      font-size: 16px;
      font-weight: 560;
      color: var(--text);
    }
    #rate-finder .place-search-shell input[type="text"]:focus {
      outline: none;
      box-shadow: none !important;
    }
    /* Location = main action inside My area (solid teal, not a ghost outline) */
    #rate-finder .rate-location-btn.btn-secondary,
    #rate-finder .rate-location-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 50px;
      margin: 12px 0 4px;
      padding: 13px 16px;
      font-weight: 750;
      font-size: 0.98rem;
      letter-spacing: -0.01em;
      color: #FFFFFF !important;
      background: #0F766E !important;
      border: none !important;
      border-radius: 12px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 6px 14px rgba(15, 118, 110, 0.24) !important;
    }
    #rate-finder .rate-location-btn:hover {
      background: #0D5F58 !important;
      filter: brightness(1.03);
    }
    #rate-finder .rate-location-btn:active {
      background: #0B534E !important;
      transform: translateY(1px);
    }
    #rate-finder .rate-location-btn:disabled {
      opacity: 0.7;
      filter: none;
    }
    #rate-finder .rate-location-btn::before,
    #rate-finder .rate-location-btn::after {
      content: none !important;
      display: none !important;
    }
    [data-theme="dark"] #rate-finder .rate-location-btn.btn-secondary,
    [data-theme="dark"] #rate-finder .rate-location-btn {
      background: #0D9488 !important;
      color: #FFFFFF !important;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
    }
    /* Rate-finder CTAs — solid teal */
    #rate-finder .btn-primary,
    #rate-finder .btn-place-search {
      color: #FFFFFF;
      background: #0F766E;
      border: none;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 6px 14px rgba(15, 118, 110, 0.22);
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    #rate-finder .btn-primary:active,
    #rate-finder .btn-place-search:active {
      background: #0D5F58;
      transform: translateY(1px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 1px 2px rgba(15, 23, 42, 0.1);
    }
    [data-theme="dark"] #rate-finder .btn-primary,
    [data-theme="dark"] #rate-finder .btn-place-search {
      background: #0D9488;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 6px 16px rgba(0, 0, 0, 0.35);
    }
    [data-theme="dark"] #rate-finder .btn-primary:active,
    [data-theme="dark"] #rate-finder .btn-place-search:active {
      background: #0F766E;
    }
    #rate-finder .btn-place-search {
      flex: 0 0 auto;
      width: auto !important;
      min-width: 5.25rem;
      height: 40px;
      margin: 0;
      padding: 0 16px;
      border-radius: 11px;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
    }

    #rate-finder .place-search-status {
      margin: 10px 0 0;
      padding: 11px 13px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 620;
      line-height: 1.4;
      color: var(--accent-deep);
      background: rgba(20, 184, 166, 0.1);
      border: 1px solid rgba(15, 118, 110, 0.16);
    }
    #rate-finder .place-search-status[hidden] { display: none !important; }
    #rate-finder .place-search-status.is-error {
      color: #9A3412;
      background: #FFF7ED;
      border-color: rgba(234, 88, 12, 0.25);
    }
    [data-theme="dark"] #rate-finder .place-search-status {
      color: #99F6E4;
      background: rgba(45, 212, 191, 0.1);
      border-color: rgba(45, 212, 191, 0.2);
    }
    [data-theme="dark"] #rate-finder .place-search-status.is-error {
      color: #FDBA74;
      background: rgba(154, 52, 18, 0.2);
      border-color: rgba(251, 146, 60, 0.3);
    }

    /* Search result: rate for ZIP or state */
    #rate-finder .place-rate-result {
      margin-top: 14px;
      padding: 16px 16px 14px;
      border-radius: 16px;
      text-align: center;
      color: #FFFFFF;
      background: #0F766E;
      border: 1px solid rgba(11, 95, 88, 0.35);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 8px 20px rgba(15, 118, 110, 0.22);
      animation: placeResultIn 0.28s ease;
    }
    [data-theme="dark"] #rate-finder .place-rate-result {
      background: #0D9488;
      border-color: rgba(45, 212, 191, 0.2);
    }
    #rate-finder .place-rate-result[hidden] { display: none !important; }
    @keyframes placeResultIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    #rate-finder .place-rate-result-kicker {
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
      margin-bottom: 4px;
    }
    #rate-finder .place-rate-result-where {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    /* ONE rate editor — plain panel, or big teal card after ZIP/state search */
    #rate-finder .place-rate-editor {
      margin-top: 0;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: var(--bg2);
      text-align: left;
    }
    [data-theme="dark"] #rate-finder .place-rate-editor {
      border-color: rgba(45, 212, 191, 0.16);
      background: #182320;
    }
    #rate-finder .place-rate-editor .place-rate-result-kicker {
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
      margin-bottom: 4px;
      text-align: center;
    }
    #rate-finder .place-rate-editor .place-rate-result-where {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      margin-bottom: 10px;
      line-height: 1.3;
      text-align: center;
    }
    #ratePlaceSection.has-place-result .place-rate-editor {
      margin-top: 0;
      padding: 18px 16px 16px;
      text-align: center;
      color: #FFFFFF;
      background: #0F766E;
      border: 1px solid rgba(11, 95, 88, 0.35);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 8px 20px rgba(15, 118, 110, 0.22);
    }
    [data-theme="dark"] #ratePlaceSection.has-place-result .place-rate-editor {
      background: #0D9488;
      border-color: rgba(45, 212, 191, 0.2);
    }
    #rate-finder .place-rate-editor .place-rate-result-kicker {
      opacity: 0.8;
      margin-bottom: 2px;
    }
    #rate-finder .place-rate-editor .place-rate-result-where {
      margin-bottom: 14px;
      font-size: 1rem;
      font-weight: 750;
    }
    /* After search: hide “Your rate” label — the card IS the rate */
    #ratePlaceSection.has-place-result #placeRatePanelLabel {
      display: none !important;
    }
    /* One clean rate line — no nested pill box */
    #ratePlaceSection.has-place-result .place-rate-field {
      display: inline-flex !important;
      justify-content: center;
      align-items: baseline !important;
      gap: 6px;
      width: auto !important;
      max-width: none;
      min-height: 0 !important;
      margin: 0 auto;
      padding: 0 0 6px !important;
      border: none !important;
      border-bottom: 2px solid rgba(255, 255, 255, 0.45) !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    #ratePlaceSection.has-place-result .place-rate-field input[type="number"],
    #ratePlaceSection.has-place-result #placeRateInput {
      flex: 0 0 auto !important;
      width: 5.2ch !important;
      min-width: 4ch !important;
      color: #FFFFFF !important;
      font-size: 2.35rem !important;
      font-weight: 820 !important;
      letter-spacing: -0.04em;
      line-height: 1;
      text-align: center;
      background: transparent !important;
      border: none !important;
      min-height: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      -moz-appearance: textfield;
      appearance: textfield;
    }
    #ratePlaceSection.has-place-result #placeRateInput::-webkit-outer-spin-button,
    #ratePlaceSection.has-place-result #placeRateInput::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    #ratePlaceSection.has-place-result #placeRateInput:focus {
      outline: none;
    }
    #ratePlaceSection.has-place-result .place-rate-field:focus-within {
      border-bottom-color: #FFFFFF !important;
      box-shadow: none !important;
    }
    #ratePlaceSection.has-place-result #placeRateUnit,
    #ratePlaceSection.has-place-result .place-rate-unit {
      color: rgba(255, 255, 255, 0.92) !important;
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      opacity: 1;
      padding: 0 0 2px !important;
      background: transparent !important;
      border: none !important;
    }
    /* Quiet bill link — not a second nested box */
    #rate-finder .place-rate-result-note {
      display: block;
      width: auto;
      max-width: 22em;
      margin: 14px auto 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      font: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.88);
      text-align: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    #rate-finder .place-rate-result-note[hidden] { display: none !important; }
    /* Water + sewer split (metered sources only) */
    .water-rate-split {
      margin-top: 4px;
    }
    .water-rate-split[hidden] { display: none !important; }
    .water-rate-split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 360px) {
      .water-rate-split-grid { grid-template-columns: 1fr; }
    }
    .water-rate-split-item label {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }
    .water-rate-combined {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 28%, var(--border));
      background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg1));
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--accent-deep);
      text-align: center;
    }
    [data-theme="dark"] .water-rate-combined {
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.35);
      color: #5EEAD4;
    }
    .water-rate-split-note {
      margin: 8px 2px 0;
      font-size: 0.75rem;
      font-weight: 550;
      line-height: 1.4;
      color: var(--muted);
    }
    #ratePlaceSection.has-place-result .water-rate-combined {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.35);
      color: #FFFFFF;
    }
    #ratePlaceSection.has-place-result .water-rate-split-item label,
    #ratePlaceSection.has-place-result .water-rate-split-note {
      color: rgba(255, 255, 255, 0.85);
    }
    #ratePlaceSection.has-place-result .water-rate-split .field-affix {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.35);
    }
    #ratePlaceSection.has-place-result .water-rate-split input {
      color: #FFFFFF;
    }
    #ratePlaceSection.has-place-result .water-rate-split .field-affix-suf,
    #ratePlaceSection.has-place-result .water-rate-split .field-affix-pre {
      color: rgba(255, 255, 255, 0.85);
    }
    #rate-finder .place-rate-result-note:hover,
    #rate-finder .place-rate-result-note:focus-visible {
      background: transparent;
      border: none;
      color: #FFFFFF;
      outline: none;
    }
    #rate-finder .place-rate-result-note .place-rate-bill-area {
      font-weight: 600;
      opacity: 0.9;
    }
    #rate-finder .place-rate-result-note .place-rate-bill-cta {
      display: inline;
      margin: 0;
      font-weight: 750;
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }
    #rate-finder .place-rate-result-note:hover .place-rate-bill-cta,
    #rate-finder .place-rate-result-note:focus-visible .place-rate-bill-cta {
      text-decoration-style: solid;
    }
    /* From my bill sits under Use this rate — clear secondary card */
    .rate-path-bill-below {
      margin-top: 14px;
      border: 2px solid rgba(15, 118, 110, 0.35);
      background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        #FFFFFF;
      box-shadow: 0 2px 10px rgba(15, 118, 110, 0.1);
    }
    .rate-path-bill-below .rate-path-btn-bill {
      min-height: 60px;
    }
    .rate-path-bill-below.is-active {
      border-color: rgba(15, 118, 110, 0.55);
    }
    [data-theme="dark"] .rate-path-bill-below {
      background: color-mix(in srgb, var(--accent) 12%, #151C1A);
      border-color: rgba(45, 212, 191, 0.4);
    }

    /* Rate confirm panel + full-width CTA */
    #ratePlaceSection .place-rate-panel {
      margin-top: 14px;
      padding: 12px 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: var(--bg2);
    }
    [data-theme="dark"] #ratePlaceSection .place-rate-panel {
      border-color: rgba(45, 212, 191, 0.16);
      background: #182320;
    }
    #ratePlaceSection .place-rate-panel-label {
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin: 0 0 8px;
    }
    #ratePlaceSection .place-rate-panel-hint {
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
      opacity: 0.75;
      margin-left: 2px;
    }
    [data-theme="dark"] #ratePlaceSection .place-rate-panel-label {
      color: #5EEAD4;
    }
    #ratePlaceSection.has-place-result .place-rate-panel {
      border-color: rgba(15, 118, 110, 0.22);
    }
    #ratePlaceSection .btn-place-use.is-ready {
      background: #0D9488;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 8px 18px rgba(13, 148, 136, 0.28);
    }
    #ratePlaceSection .place-rate-field {
      display: flex;
      align-items: stretch;
      min-height: 52px;
      border: 1.5px solid rgba(15, 118, 110, 0.16);
      border-radius: 14px;
      background: #FFFFFF;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(15, 118, 110, 0.06);
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #ratePlaceSection .place-rate-field:focus-within {
      border-color: rgba(20, 184, 166, 0.55);
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
    }
    [data-theme="dark"] #ratePlaceSection .place-rate-field {
      background: #0F1614;
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    #ratePlaceSection .place-rate-field input[type="number"] {
      flex: 1 1 auto;
      min-width: 0;
      width: 0;
      margin: 0;
      border: none !important;
      border-radius: 0;
      box-shadow: none !important;
      background: transparent !important;
      padding: 12px 8px 12px 14px;
      font-size: 1.35rem;
      font-weight: 760;
      letter-spacing: -0.03em;
      color: var(--text);
    }
    #ratePlaceSection .place-rate-unit {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      padding: 0 14px 0 4px;
      font-size: clamp(11px, 3vw, 13px);
      font-weight: 740;
      color: var(--muted);
      letter-spacing: -0.01em;
      white-space: nowrap;
      user-select: none;
    }
    [data-theme="dark"] #ratePlaceSection .place-rate-unit {
      color: #99F6E4;
    }
    #ratePlaceSection .btn-place-use {
      width: 100% !important;
      margin-top: 12px;
      min-height: 50px;
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.015em;
      border-radius: 12px;
    }
    #rateStateSection .btn-primary {
      font-weight: 700;
      letter-spacing: -0.015em;
      border-radius: 12px;
      min-height: 48px;
    }
    @media (hover: hover) and (pointer: fine) {
      #rate-finder .btn-primary:hover,
      #rate-finder .btn-place-search:hover {
        background: #0D9488;
        transform: translateY(-1px);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.16) inset,
          0 2px 4px rgba(15, 23, 42, 0.08),
          0 10px 20px rgba(13, 148, 136, 0.28);
      }
      [data-theme="dark"] #rate-finder .btn-primary:hover,
      [data-theme="dark"] #rate-finder .btn-place-search:hover {
        background: #14B8A6;
      }
    }
    #rate-finder .rate-section {
      margin-bottom: 0;
    }
    #rateStateSection .input-group {
      margin-bottom: 10px;
    }
    /*
      State list is long; fixed positioning in JS + visible overflow on rate cards.
    */
    #rateStateSection.more-section,
    #rateStateSection {
      overflow: visible;
    }
    #rateStateSection.more-section::before {
      border-radius: 20px 20px 0 0;
    }
    #rateStateSection .select-option {
      padding: 15px 14px;
      font-size: 16px;
      margin-bottom: 4px;
    }
    /* Overlay menus must paint over content below — never clip */
    #rate-finder .rate-card.more-section,
    #rate-finder .more-section,
    #rate-finder .select-wrap,
    #rate-finder .input-group,
    #rate-finder .rate-finder-stack,
    .setup-panel .select-wrap,
    .setup-block,
    .tune-field {
      overflow: visible;
    }
    #rateStateSection .rate-preview {
      margin: 0 0 10px;
      padding: 14px 14px;
    }
    #rateStateSection .rate-preview-value {
      font-size: 1.4rem;
    }
    #rate-finder .rate-alt-details {
      margin-top: 14px;
      border-radius: 14px;
      border: 1px solid rgba(15, 118, 110, 0.12);
      background: rgba(15, 118, 110, 0.035);
      overflow: hidden;
    }
    [data-theme="dark"] #rate-finder .rate-alt-details {
      border-color: rgba(45, 212, 191, 0.14);
      background: rgba(45, 212, 191, 0.04);
    }
    #rate-finder .rate-alt-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent-deep);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      -webkit-tap-highlight-color: transparent;
    }
    [data-theme="dark"] #rate-finder .rate-alt-details > summary { color: var(--accent2); }
    #rate-finder .rate-alt-details > summary::-webkit-details-marker { display: none; }
    #rate-finder .rate-alt-details > summary::after {
      content: '▾';
      font-size: 11px;
      opacity: 0.7;
      transition: transform 0.15s ease;
    }
    #rate-finder .rate-alt-details[open] > summary::after { transform: rotate(180deg); }
    #rate-finder .rate-alt-body {
      padding: 0 12px 12px;
    }
    #rate-finder.bill-first .rate-alt-details {
      border-color: rgba(15, 118, 110, 0.2);
    }
    #rate-finder.bill-first .place-rate-panel {
      border-color: rgba(15, 118, 110, 0.28);
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
    }

    .bill-find-tips {
      margin: 0 0 12px;
      padding: 12px 12px 10px;
      border-radius: 14px;
      border: 1px solid rgba(15, 118, 110, 0.18);
      background: rgba(15, 118, 110, 0.06);
      text-align: left;
    }
    .bill-find-tips[hidden] { display: none !important; }
    [data-theme="dark"] .bill-find-tips {
      background: rgba(45, 212, 191, 0.08);
      border-color: rgba(45, 212, 191, 0.22);
    }
    .bill-find-title {
      font-size: 12px;
      font-weight: 750;
      color: var(--text);
      margin-bottom: 6px;
    }
    .bill-find-tips ul {
      margin: 0;
      padding: 0 0 0 1.1em;
    }
    .bill-find-tips li {
      font-size: 12.5px;
      line-height: 1.4;
      color: var(--muted);
      margin-bottom: 5px;
      font-weight: 550;
    }
    .bill-find-tips li:last-child { margin-bottom: 0; }
    .bill-find-tips strong { color: var(--text); font-weight: 700; }
    [data-theme="dark"] .bill-find-tips strong { color: #E8F5F1; }

    .bill-calc {
      margin: 0 0 14px;
      padding: 12px;
      border-radius: 14px;
      border: 1px dashed rgba(15, 118, 110, 0.28);
      background: rgba(15, 118, 110, 0.04);
      text-align: left;
    }
    [data-theme="dark"] .bill-calc {
      border-color: rgba(45, 212, 191, 0.25);
      background: rgba(45, 212, 191, 0.06);
    }
    .bill-calc-title {
      font-size: 12.5px;
      font-weight: 750;
      color: var(--text);
      margin-bottom: 10px;
      white-space: nowrap;
    }
    .bill-calc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
      container-type: inline-size;
    }
    @media (max-width: 380px) {
      .bill-calc-grid { grid-template-columns: 1fr; }
    }
    .bill-calc .input-group { margin: 0; min-width: 0; }
    .bill-calc .input-group label {
      display: block;
      font-size: clamp(10px, 3.6cqw, 12px);
      font-weight: 650;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      line-height: 1.2;
      color: var(--muted);
    }
    /* rate unit live on the field — never orphan a symbol under a label */
    .field-affix {
      display: flex;
      align-items: center;
      min-width: 0;
      border-radius: 12px;
      border: 1.5px solid rgba(15, 118, 110, 0.16);
      background: #FFFFFF;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    }
    [data-theme="dark"] .field-affix {
      background: #0F1614;
      border-color: rgba(45, 212, 191, 0.22);
      box-shadow: none;
    }
    .field-affix:focus-within {
      border-color: rgba(20, 184, 166, 0.55);
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
    }
    .field-affix-pre,
    .field-affix-suf {
      flex: 0 0 auto;
      font-size: clamp(12px, 3.2cqw, 14px);
      font-weight: 750;
      color: var(--muted);
      white-space: nowrap;
      user-select: none;
      line-height: 1;
    }
    .field-affix-pre {
      padding: 0 2px 0 12px;
    }
    .field-affix-suf {
      padding: 0 12px 0 4px;
    }
    [data-theme="dark"] .field-affix-pre,
    [data-theme="dark"] .field-affix-suf {
      color: #99F6E4;
    }
    .field-affix input,
    .bill-calc .field-affix input {
      flex: 1 1 auto;
      min-width: 0;
      width: 0;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: 0 !important;
      margin: 0;
      padding: 11px 10px;
      font-size: 16px;
      font-weight: 650;
    }
    .bill-calc .btn-secondary {
      width: 100%;
      white-space: nowrap;
      font-size: clamp(12px, 3.2vw, 14px);
    }

    /* Global: short UI chrome stays one line (units, actions, cost pills) */
    .ui-fit-line,
    .place-rate-unit,
    .place-rate-panel-label,
    .place-rate-panel-hint,
    .home-item-cost,
    .share-home-row-cost,
    .setup-rate-go,
    .rate-banner-action,
    .btn-place-search,
    .filter-chip,
    .start-chip-name,
    .share-home-split-value,
    .home-split-value {
      white-space: nowrap;
    }
    .place-rate-unit {
      font-size: clamp(11px, 3vw, 13px) !important;
    }
    .place-rate-panel-label {
      font-size: clamp(10px, 2.7vw, 12px);
    }
    #billCalcResult:not([hidden]) {
      display: block;
      font-weight: 650;
      color: var(--accent-deep);
    }
    [data-theme="dark"] #billCalcResult:not([hidden]) { color: #5EEAD4; }

    .cost-box.featured .cost-label.approx::before {
      content: 'about ';
      font-weight: 600;
      opacity: 0.85;
    }
    html[lang="es"] .cost-box.featured .cost-label.approx::before {
      content: 'aprox. ';
    }

    #placeRateStep.jump-highlight {
      border-radius: 16px;
      background: rgba(20, 184, 166, 0.12);
      box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.35);
      animation: jumpPulse 1.1s ease 2;
    }
    [data-theme="dark"] #placeRateStep.jump-highlight {
      background: rgba(45, 212, 191, 0.12);
      box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.4);
    }
    #ratePlaceSection.jump-highlight {
      border-color: rgba(15, 118, 110, 0.45) !important;
      box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
    }
    [data-theme="dark"] #ratePlaceSection.jump-highlight {
      border-color: rgba(45, 212, 191, 0.5) !important;
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
      color: var(--faint);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    #rate-finder .divider {
      margin: 10px 0;
      color: var(--muted);
      font-weight: 700;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
    }

    .rate-preview {
      background: linear-gradient(155deg, #0B5F58 0%, #0F766E 45%, #14B8A6 100%);
      border: none;
      border-radius: 18px;
      padding: 20px 18px;
      text-align: center;
      margin: 8px 0 14px;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 10px 24px rgba(15, 118, 110, 0.25);
    }
    .rate-preview-value {
      font-size: 2.2rem;
      font-weight: 780;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.15);
      letter-spacing: -0.03em;
    }
    .rate-preview-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 6px;
      font-weight: 600;
    }

    .home-item {
      background: #FFFFFF;
      border: 1px solid rgba(15, 118, 110, 0.1);
      border-radius: 14px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      box-shadow: 0 1px 2px rgba(15, 118, 110, 0.04);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
    }
    .home-item.is-holding {
      transform: scale(0.985);
      border-color: rgba(185, 28, 28, 0.45);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 0 0 3px rgba(185, 28, 28, 0.16);
    }
    [data-theme="dark"] .home-item {
      background: #151C1A;
      border-color: rgba(45, 212, 191, 0.12);
      box-shadow: none;
    }
    [data-theme="dark"] .home-item.is-holding {
      border-color: rgba(248, 113, 113, 0.5);
      box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
    }
    .home-item-emoji {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #EAF5F2;
      border: 1px solid #C5E8E0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
      box-shadow: 0 3px 10px rgba(15, 118, 110, 0.12);
    }
    [data-theme="dark"] .home-item-emoji {
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.18);
    }
    .home-item-body {
      flex: 1 1 0%;
      min-width: 0;
      overflow: hidden;
    }
    .home-item-name {
      font-weight: 700;
      font-size: 15px;
      letter-spacing: -0.01em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .home-item-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
    .home-item-cost,
    #myhome .home-item-cost {
      flex: 0 0 auto;
      flex-shrink: 0;
      font-weight: 750;
      color: #fff;
      font-size: 12.5px;
      white-space: nowrap;
      background: #0F766E;
      padding: 6px 10px;
      border-radius: 999px;
      box-shadow: none;
    }
    [data-theme="dark"] .home-item-cost,
    [data-theme="dark"] #myhome .home-item-cost {
      background: #0D9488;
    }
    .home-item-remove {
      background: none;
      border: 1.5px solid transparent;
      color: var(--faint);
      cursor: pointer;
      font-size: 20px;
      padding: 4px 6px;
      line-height: 1;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .total-bar {
      position: relative;
      bottom: auto;
      margin: 0;
      background: #0F766E;
      color: #fff;
      border-radius: 18px;
      padding: 16px 16px 14px;
      border: 1px solid rgba(11, 95, 88, 0.35);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 10px 24px rgba(15, 118, 110, 0.22);
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px 16px;
    }
    [data-theme="dark"] .total-bar {
      background: #0D9488;
      border-color: rgba(45, 212, 191, 0.2);
    }
    .total-bar-main {
      flex: 1 1 auto;
      min-width: 0;
    }
    .total-bar-aside {
      flex: 0 1 auto;
      text-align: right;
      max-width: 48%;
      min-width: 0;
    }
    .total-bar .label {
      font-size: 11px;
      opacity: 0.88;
      font-weight: 750;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .total-bar .value {
      font-size: 2.15rem;
      font-weight: 820;
      letter-spacing: -0.045em;
      margin-top: 4px;
      line-height: 1.05;
      font-variant-numeric: tabular-nums;
    }
    .total-bar .value .total-unit {
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      opacity: 0.9;
      margin-left: 2px;
    }
    .total-bar .rate-hint,
    .total-bar-aside.rate-hint {
      color: rgba(255, 255, 255, 0.92);
      margin-top: 0;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.35;
    }
    .total-bar .year-line {
      margin-top: 3px;
      opacity: 0.92;
      font-size: 12px;
      font-weight: 600;
    }
    .total-bar .bill-slice {
      flex: 1 1 100%;
      margin-top: 4px;
    }

    /*
      Bottom nav — floating warm tray (not a heavy full-width dock).
      Inactive: soft muted. Active: soft brand tint + deep text (not solid brick).
      Power/Water keep their hues so mode is still clear.
    */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--bg0) 55%, transparent) 28%,
        color-mix(in srgb, var(--bg0) 92%, transparent) 100%
      );
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-top: none;
      display: flex;
      justify-content: center;
      /* Room above the pill so About / version never sit under it */
      padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
      z-index: 40;
      transform: translateZ(0);
      contain: layout style;
      pointer-events: none;
    }
    .bottom-nav-inner {
      pointer-events: auto;
      width: 100%;
      max-width: 400px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4px;
      background: var(--bg1);
      border: 1px solid rgba(60, 40, 20, 0.1);
      border-radius: 22px;
      padding: 5px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 10px 28px rgba(40, 28, 16, 0.1),
        0 2px 8px rgba(40, 28, 16, 0.04);
    }
    [data-theme="dark"] .bottom-nav {
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(11, 15, 18, 0.45) 30%,
        rgba(11, 15, 18, 0.88) 100%
      );
    }
    [data-theme="dark"] .bottom-nav-inner {
      background: #171E1C;
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    }
    .nav-btn {
      background: transparent;
      border: 1.5px solid transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      padding: 10px 6px 9px;
      border-radius: 16px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 0;
      white-space: nowrap;
    }
    .nav-btn > span:last-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    @media (hover: hover) and (pointer: fine) {
      .nav-btn:not(.active):hover {
        color: var(--text);
        background: color-mix(in srgb, var(--bg2) 80%, transparent);
      }
    }
    .nav-btn.active {
      color: #0B5F58;
      background: color-mix(in srgb, var(--accent) 22%, var(--bg1));
      border-color: color-mix(in srgb, var(--accent) 36%, transparent);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
      font-weight: 780;
    }
    [data-theme="dark"] .nav-btn.active {
      color: #5EEAD4;
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.34);
    }
    /* Power tab: stronger teal when active (readable outdoors) */
    #navPower.active {
      color: #0B5F58;
      background: color-mix(in srgb, #0F766E 24%, var(--bg1));
      border-color: color-mix(in srgb, #0F766E 38%, transparent);
    }
    /* My Home: warm teal hub */
    #navHome.active {
      color: #0B5F58;
      background: color-mix(in srgb, #0F766E 20%, #FFF8F2);
      border-color: color-mix(in srgb, #0F766E 34%, transparent);
    }
    [data-theme="dark"] #navHome.active {
      color: #5EEAD4;
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.34);
    }
    /* Water tab: stronger blue when active */
    #navWater.active {
      color: #0C5F7A;
      background: color-mix(in srgb, #0E7490 24%, var(--bg1));
      border-color: color-mix(in srgb, #0E7490 40%, transparent);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }
    [data-theme="dark"] #navPower.active {
      color: #5EEAD4;
      background: rgba(45, 212, 191, 0.2);
      border-color: rgba(45, 212, 191, 0.34);
    }
    [data-theme="dark"] #navWater.active {
      color: #67E8F9;
      background: rgba(34, 211, 238, 0.2);
      border-color: rgba(34, 211, 238, 0.36);
    }
    .nav-btn .nav-ico { font-size: 18px; line-height: 1; opacity: 0.75; }
    .nav-btn.active .nav-ico { opacity: 1; }
    .nav-btn #navHomeLabel {
      font-size: 10px;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    /* Power / Water utility switch (home) — clear segmented control */
    .utility-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      margin: 0 0 14px;
      padding: 5px;
      border-radius: 16px;
      background: #E8EEEC;
      border: 1.5px solid rgba(60, 40, 20, 0.12);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 8px rgba(40, 28, 16, 0.05);
    }
    [data-theme="dark"] .utility-toggle {
      background: rgba(0, 0, 0, 0.35);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }
    .utility-toggle .utility-seg {
      appearance: none;
      border: none;
      background: transparent;
      color: #6B6258;
      font: inherit;
      font-size: 13.5px;
      font-weight: 720;
      letter-spacing: -0.01em;
      padding: 11px 8px;
      border-radius: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      min-width: 0;
      transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
    }
    [data-theme="dark"] .utility-toggle .utility-seg {
      color: #8A9AA4;
    }
    .utility-toggle .utility-seg[aria-pressed="false"]:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.55);
    }
    [data-theme="dark"] .utility-toggle .utility-seg[aria-pressed="false"]:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
    }
    .utility-toggle .utility-seg[aria-pressed="true"] {
      color: #fff;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 4px 12px rgba(15, 118, 110, 0.28);
    }
    .utility-toggle .utility-seg[data-utility="power"][aria-pressed="true"] {
      background: #0F766E;
    }
    .utility-toggle .utility-seg[data-utility="water"][aria-pressed="true"] {
      background: #0E7490;
      box-shadow: 0 4px 12px rgba(14, 116, 144, 0.28);
    }
    [data-theme="dark"] .utility-toggle .utility-seg[data-utility="power"][aria-pressed="true"] {
      color: #04110f;
      background: #2DD4BF;
    }
    [data-theme="dark"] .utility-toggle .utility-seg[data-utility="water"][aria-pressed="true"] {
      color: #04202a;
      background: #22D3EE;
    }
    .utility-toggle .utility-seg .u-ico { font-size: 16px; line-height: 1; }
    /* water active color is #navWater.active above */
    body.utility-water .filter-chip.active,
    body.utility-water .filter-chip.active[data-cat] {
      background: linear-gradient(155deg, var(--accent2), var(--accent));
    }
    body.utility-water .cadence-seg[aria-pressed="true"] {
      background: linear-gradient(155deg, var(--accent2), var(--accent));
    }
    body.utility-water .rate-banner-ico {
      background: var(--accent, #0369A1);
      color: #fff;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 3px 10px rgba(14, 116, 144, 0.24);
    }
    [data-theme="dark"] body.utility-water .rate-banner-ico {
      background: var(--accent2, #38BDF8);
      color: #0B0F12;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 3px 10px rgba(0, 0, 0, 0.28);
    }

    /* Share uses global --page-bg glow (same as every screen) */
    .share-card {
      position: relative;
      overflow: hidden;
      color: var(--text);
      border-radius: 20px;
      padding: 0;
      text-align: center;
      margin-top: 4px;
      border: 1px solid rgba(60, 40, 20, 0.12);
      background: var(--bg1);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 12px 32px rgba(40, 28, 16, 0.1),
        0 4px 12px rgba(40, 28, 16, 0.04);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    [data-theme="dark"] .share-card {
      border-color: rgba(45, 212, 191, 0.2);
      background: #171F1D;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 14px 36px rgba(0, 0, 0, 0.4);
    }
    .share-card-top {
      display: none;
    }
    .share-card-top .logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: transparent;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    }
    .share-card-top .share-brand-text {
      text-align: left;
      line-height: 1.15;
    }
    .share-card-top .share-brand-name {
      font-size: 1.25rem;
      font-weight: 780;
      letter-spacing: -0.04em;
      color: #1A1612;
    }
    .share-card-top .share-brand-name .tt {
      color: #0F766E;
    }
    .share-card-top .share-brand-sub {
      font-size: 12px;
      font-weight: 550;
      letter-spacing: 0;
      text-transform: none;
      color: var(--muted);
      margin-top: 2px;
    }
    .share-card-body {
      padding: 18px 18px 16px;
    }
    /* Space between topbar Whatt and share-card Whatt — thin line + gem */
    #share .share-brand-rule {
      display: none;
    }
    #share .share-brand-rule-OLD {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 2px 0 14px;
      padding: 0 4px;
      pointer-events: none;
      user-select: none;
    }
    #share .share-brand-rule::before,
    #share .share-brand-rule::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(15, 118, 110, 0.28) 18%,
        rgba(20, 184, 166, 0.45) 50%,
        rgba(15, 118, 110, 0.28) 82%,
        transparent 100%
      );
    }
    body.utility-water #share .share-brand-rule::before,
    body.utility-water #share .share-brand-rule::after {
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(14, 116, 144, 0.28) 18%,
        rgba(34, 211, 238, 0.5) 50%,
        rgba(14, 116, 144, 0.28) 82%,
        transparent 100%
      );
    }
    [data-theme="dark"] #share .share-brand-rule::before,
    [data-theme="dark"] #share .share-brand-rule::after {
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(45, 212, 191, 0.18) 18%,
        rgba(94, 234, 212, 0.42) 50%,
        rgba(45, 212, 191, 0.18) 82%,
        transparent 100%
      );
    }
    [data-theme="dark"] body.utility-water #share .share-brand-rule::before,
    [data-theme="dark"] body.utility-water #share .share-brand-rule::after {
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.18) 18%,
        rgba(103, 232, 249, 0.42) 50%,
        rgba(34, 211, 238, 0.18) 82%,
        transparent 100%
      );
    }
    #share .share-brand-rule-gem {
      width: 7px;
      height: 7px;
      flex-shrink: 0;
      border-radius: 2px;
      transform: rotate(45deg);
      background: linear-gradient(145deg, #2DD4BF 0%, #0F766E 100%);
      box-shadow:
        0 0 0 3px rgba(20, 184, 166, 0.12),
        0 1px 3px rgba(15, 118, 110, 0.2);
    }
    body.utility-water #share .share-brand-rule-gem {
      background: linear-gradient(145deg, #67E8F9 0%, #0E7490 100%);
      box-shadow:
        0 0 0 3px rgba(34, 211, 238, 0.12),
        0 1px 3px rgba(14, 116, 144, 0.2);
    }
    [data-theme="dark"] #share .share-brand-rule-gem {
      background: linear-gradient(145deg, #5EEAD4 0%, #14B8A6 100%);
      box-shadow:
        0 0 0 3px rgba(45, 212, 191, 0.14),
        0 1px 4px rgba(0, 0, 0, 0.35);
    }
    [data-theme="dark"] body.utility-water #share .share-brand-rule-gem {
      background: linear-gradient(145deg, #67E8F9 0%, #22D3EE 100%);
      box-shadow:
        0 0 0 3px rgba(34, 211, 238, 0.14),
        0 1px 4px rgba(0, 0, 0, 0.35);
    }

    .share-card .share-name {
      font-size: 1.35rem;
      font-weight: 800;
      margin: 0 0 14px;
      color: var(--text);
      letter-spacing: -0.035em;
    }
    /* Amount hero — same scheme on appliance + My Home share cards */
    .share-card .share-amount {
      margin: 0 auto;
      max-width: none;
      text-align: center;
      padding: 22px 16px 18px;
      border-radius: 20px;
      background: #0F766E;
      border: none;
      box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28);
    }
    body.utility-water .share-card .share-amount {
      background: #0E7490;
      border: none;
      box-shadow: 0 10px 24px rgba(14, 116, 144, 0.28);
    }
    [data-theme="dark"] .share-card .share-amount {
      background:
        radial-gradient(ellipse 80% 90% at 50% 0%, rgba(45, 212, 191, 0.16), transparent 60%),
        linear-gradient(165deg, #1E2A27 0%, #172220 100%);
      border-color: rgba(45, 212, 191, 0.28);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    }
    [data-theme="dark"] body.utility-water .share-card .share-amount {
      background:
        radial-gradient(ellipse 80% 90% at 50% 0%, rgba(34, 211, 238, 0.14), transparent 60%),
        linear-gradient(165deg, #152024 0%, #121C20 100%);
      border-color: rgba(34, 211, 238, 0.28);
    }
    .share-card .share-big {
      font-size: 2.85rem;
      font-weight: 840;
      letter-spacing: -0.05em;
      line-height: 1.05;
      background: none;
      color: #fff;
      -webkit-text-fill-color: #fff;
    }
    body.utility-water .share-card .share-big {
      background: none;
      color: #fff;
      -webkit-text-fill-color: #fff;
    }
    [data-theme="dark"] .share-card .share-big {
      background: linear-gradient(180deg, #5EEAD4 0%, #2DD4BF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    [data-theme="dark"] body.utility-water .share-card .share-big {
      background: linear-gradient(180deg, #67E8F9 0%, #22D3EE 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .share-card .share-period {
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.82);
      margin-top: 6px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .share-card .share-sub {
      font-size: 13px;
      color: var(--muted);
      margin-top: 12px;
      font-weight: 500;
      line-height: 1.35;
    }
    .share-card .share-rate {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 550;
      color: var(--muted);
      background: none;
      border: none;
      display: inline-block;
      padding: 0;
      border-radius: 0;
    }
    [data-theme="dark"] .share-card .share-rate {
      color: #99F6E4;
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.24);
    }
    .share-card-foot {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--accent);
    }
    .share-card-foot span {
      font-weight: 780;
      letter-spacing: -0.03em;
    }

    /* —— My Home share: richer snapshot card —— */
    .share-card[data-mode="home"] {
      text-align: left;
      background:
        radial-gradient(ellipse 90% 55% at 100% 0%, rgba(45, 212, 191, 0.16), transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(56, 189, 248, 0.1), transparent 55%),
        linear-gradient(165deg, #F6FBFA 0%, #EAF5F1 55%, #E4F0EC 100%);
    }
    [data-theme="dark"] .share-card[data-mode="home"] {
      background:
        radial-gradient(ellipse 90% 55% at 100% 0%, rgba(45, 212, 191, 0.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(56, 189, 248, 0.08), transparent 55%),
        linear-gradient(165deg, #1A2623 0%, #15201D 100%);
    }
    .share-card[data-mode="home"] .share-card-top {
      background: #F6F1EA;
      justify-content: flex-start;
      padding: 14px 18px 12px;
    }
    .share-card[data-mode="home"] .share-card-body {
      padding: 16px 16px 18px;
    }
    .share-home-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin: 0 0 10px;
    }
    [data-theme="dark"] .share-home-kicker { color: #5EEAD4; }
    /* Home share: amount box full width (same gradient treatment as appliance) */
    .share-card[data-mode="home"] .share-amount {
      max-width: none;
    }
    .share-home-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 12px;
    }
    .share-home-split[hidden] { display: none !important; }
    .share-home-split-card {
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15, 118, 110, 0.14);
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    }
    .share-home-split-card.power {
      border-color: rgba(245, 158, 11, 0.28);
      background: linear-gradient(165deg, #FFFBEB 0%, #FEF3C7 100%);
    }
    .share-home-split-card.water {
      border-color: rgba(14, 116, 144, 0.28);
      background: linear-gradient(165deg, #ECFEFF 0%, #CFFAFE 100%);
    }
    [data-theme="dark"] .share-home-split-card {
      background: rgba(0, 0, 0, 0.22);
      border-color: rgba(255, 255, 255, 0.1);
    }
    [data-theme="dark"] .share-home-split-card.power {
      background: linear-gradient(165deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
      border-color: rgba(245, 158, 11, 0.3);
    }
    [data-theme="dark"] .share-home-split-card.water {
      background: linear-gradient(165deg, rgba(34, 211, 238, 0.14), rgba(14, 116, 144, 0.12));
      border-color: rgba(34, 211, 238, 0.28);
    }
    .share-home-split-label {
      font-size: 11px;
      font-weight: 750;
      color: var(--muted);
      margin-bottom: 2px;
    }
    .share-home-split-value {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
    }
    .share-home-list-label {
      margin: 16px 0 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .share-home-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .share-home-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(15, 118, 110, 0.1);
    }
    [data-theme="dark"] .share-home-row {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .share-home-row-emoji {
      font-size: 1.15rem;
      line-height: 1;
      width: 28px;
      text-align: center;
    }
    .share-home-row-main {
      min-width: 0;
    }
    .share-home-row-name {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text);
    }
    .share-home-row-bar {
      margin-top: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(15, 118, 110, 0.1);
      overflow: hidden;
    }
    [data-theme="dark"] .share-home-row-bar {
      background: rgba(255, 255, 255, 0.08);
    }
    .share-home-row-bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #14B8A6, #0F766E);
      min-width: 4px;
    }
    .share-home-row-cost {
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--accent-deep);
      white-space: nowrap;
    }
    [data-theme="dark"] .share-home-row-cost { color: #5EEAD4; }
    .share-home-more {
      margin-top: 2px;
      font-size: 12px;
      font-weight: 650;
      color: var(--muted);
      text-align: center;
      padding: 4px 0 0;
    }
    .share-home-insights {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 14px;
    }
    .share-home-insights[hidden] { display: none !important; }
    .share-home-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--accent-deep);
      background: var(--accent-soft);
      border: 1px solid var(--good-border);
      line-height: 1.25;
      max-width: 100%;
    }
    [data-theme="dark"] .share-home-pill {
      color: #99F6E4;
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.24);
    }
    .share-home-pill.amber {
      color: #92400E;
      background: #FFF7E8;
      border-color: #F0D9A8;
    }
    [data-theme="dark"] .share-home-pill.amber {
      color: #F0D08A;
      background: rgba(240, 180, 80, 0.12);
      border-color: rgba(240, 180, 80, 0.28);
    }
    .share-home-pill.sky {
      color: #0E4A5C;
      background: #E8F0F4;
      border-color: #B8CDD8;
    }
    [data-theme="dark"] .share-home-pill.sky {
      color: #BAE6FD;
      background: rgba(56, 189, 248, 0.1);
      border-color: rgba(56, 189, 248, 0.22);
    }
    .share-home-privacy {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(15, 118, 110, 0.12);
      font-size: 11.5px;
      font-weight: 650;
      color: var(--muted);
      text-align: center;
      line-height: 1.4;
    }
    [data-theme="dark"] .share-home-privacy {
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    .share-home-privacy strong {
      color: var(--accent);
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .share-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }
    .share-actions .btn-wide {
      grid-column: 1 / -1;
      background: #0F766E;
      color: #fff;
      border: none;
    }
    .share-actions .btn-secondary {
      background: #FFFCFA;
      border: 1.5px solid rgba(60, 40, 20, 0.14);
      color: var(--text);
    }
    .btn-x {
      background: #0F1419;
      color: #fff;
      border: none;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 650;
      padding: 14px 16px;
      cursor: pointer;
      width: 100%;
    }
    /* btn-x press uses shared :active ring above */
    [data-theme="dark"] .btn-x {
      background: #E7E9EA;
      color: #0F1419;
    }
    .share-hint {
      margin-top: 12px;
      font-size: 12px;
      color: var(--faint);
      text-align: center;
      line-height: 1.4;
    }

    /* App footer: version · privacy · feedback */
    /* Results: less dead air between Share and footer */
    #results .app-footer {
      margin-top: 12px;
      padding-top: 0;
      padding-top: 6px;
    }
    #results .result-actions {
      margin-bottom: 0;
    }
    .app-footer {
      margin-top: 8px;
      padding: 6px 6px 2px;
      text-align: center;
      font-size: 12px;
      line-height: 1.35;
      color: var(--faint);
    }

    .app-footer-privacy {
      color: var(--muted);
      font-weight: 550;
      margin: 0 0 7px;
      padding: 0 4px;
      /* Prefer one line on phones; allow wrap only if truly needed */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .app-footer-about {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 4px;
      opacity: 0.85;
    }
    .app-footer-version {
      margin-top: 10px;
      margin-bottom: 2px;
      font-size: 11px;
      font-weight: 550;
      color: var(--faint);
      letter-spacing: 0.18em;
      white-space: nowrap;
    }
    .app-footer-support-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
    }
    .app-footer-support-line .home-footer-chip {
      min-width: 12.5rem;
      padding: 10px 22px;
      font-size: 15px;
      font-weight: 750;
      letter-spacing: 0;
      justify-content: center;
      border: 1.5px solid #D4B24A;
      background: #F6E7A3;
      color: #6B4E10;
    }
    .app-footer-support-line .home-footer-chip:link,
    .app-footer-support-line .home-footer-chip:visited {
      color: #6B4E10;
      text-decoration: none;
    }
    .app-footer-support-line .home-footer-chip:hover {
      background: #F0DC86;
      border-color: #C9A24E;
      color: #5A3E0E;
    }
    [data-theme="dark"] .app-footer-support-line .home-footer-chip,
    [data-theme="dark"] .app-footer-support-line .home-footer-chip:link,
    [data-theme="dark"] .app-footer-support-line .home-footer-chip:visited {
      background: rgba(240, 200, 100, 0.16);
      border-color: rgba(240, 200, 100, 0.55);
      color: #F0D48A;
    }
    .app-footer-support-line .app-version-compact {
      display: block;
      margin: 0;
      font-size: 10px;
      font-weight: 550;
      letter-spacing: 0.06em;
      line-height: 1;
      opacity: 0.55;
    }

    /* Home footer: same links, no underlined junk drawer / gold brick */
    .home-footer {
      margin-top: 18px;
      padding: 14px 8px 8px;
    }
    .home-footer .app-footer-row {
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      column-gap: 0.28em;
      white-space: nowrap;
      font-size: clamp(10px, 2.7vw, 11.5px);
    }
    .app-footer .home-footer-chip,
    .home-footer .home-footer-chip {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      margin: 0 0 0 2px;
      padding: 3px 9px;
      border-radius: 999px;
      border: 1.5px solid #D4B24A;
      background: rgba(255, 220, 90, 0.16);
      color: #7A5A12;
      font-size: inherit;
      font-weight: 750;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
    }
    .app-footer .home-footer-chip:link,
    .app-footer .home-footer-chip:visited,
    .home-footer .home-footer-chip:link,
    .home-footer .home-footer-chip:visited {
      color: #7A5A12;
      text-decoration: none;
    }
    .app-footer .home-footer-chip:hover,
    .home-footer .home-footer-chip:hover {
      background: rgba(255, 220, 90, 0.26);
      border-color: #C9A24E;
      color: #5A3E0E;
    }
    [data-theme="dark"] .app-footer .home-footer-chip,
    [data-theme="dark"] .app-footer .home-footer-chip:link,
    [data-theme="dark"] .app-footer .home-footer-chip:visited,
    [data-theme="dark"] .home-footer .home-footer-chip,
    [data-theme="dark"] .home-footer .home-footer-chip:link,
    [data-theme="dark"] .home-footer .home-footer-chip:visited {
      background: rgba(240, 200, 100, 0.12);
      border-color: rgba(240, 200, 100, 0.55);
      color: #F0D48A;
    }
    .home-footer .app-footer-link,
    .home-footer .app-footer-link:link,
    .home-footer .app-footer-link:visited,
    .home-footer .app-footer-link:hover {
      text-decoration: none;
      font-weight: 600;
      color: var(--muted);
    }
    .home-footer .app-footer-link:hover {
      color: var(--accent-deep);
    }
    .home-footer-support {
      margin: 10px 0 0;
      text-align: center;
    }
    .home-footer-support a {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
    }
    .home-footer-support a:hover {
      color: var(--accent-deep);
    }
    /* Keep About · Help · Contact · Privacy on ONE line — no orphan dots */
    .app-footer-row {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.35em;
      max-width: 100%;
      white-space: nowrap;
      font-size: 11.5px;
      line-height: 1.2;
    }
    .app-footer-dot {
      flex-shrink: 0;
      opacity: 0.5;
      user-select: none;
      pointer-events: none;
    }
    .app-footer button,
    .app-footer a,
    .app-footer-link {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      font: inherit;
      font-size: inherit;
      font-weight: 700;
      color: var(--accent-deep);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Support CTA — middle ground: not a tiny sticker, not a full-width bar */
    .donate-nudge,
    .donate-nudge-footer,
    .about-support-cta {
      display: block;
      width: 100%;
      margin: 10px 0 4px;
      padding: 0;
      text-align: center;
      box-sizing: border-box;
    }
    .about-support-cta {
      margin: 14px 0 6px;
    }
    /* Support outline — yellow border + slight yellow fill (not a solid brick) */
    .app-footer .donate-nudge a,
    .donate-nudge-footer a,
    .about-support-cta a {
      display: inline-block;
      width: auto;
      min-width: 14rem;
      max-width: min(22rem, 100%);
      box-sizing: border-box;
      padding: 10px 26px;
      margin: 0 auto;
      border-radius: 12px;
      border: 1.5px solid #D4B24A;
      background: rgba(255, 220, 90, 0.12);
      color: #7A5A12;
      font-size: 0.86rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.25;
      text-align: center;
      text-decoration: none;
      text-underline-offset: unset;
      white-space: nowrap;
      box-shadow: none;
    }
    .app-footer .donate-nudge a:hover,
    .donate-nudge-footer a:hover,
    .about-support-cta a:hover {
      background: rgba(255, 220, 90, 0.2);
      border-color: #C9A24E;
      color: #5A3E0E;
      text-decoration: none;
    }
    .app-footer .donate-nudge a:active,
    .donate-nudge-footer a:active,
    .about-support-cta a:active {
      transform: scale(0.995);
      background: rgba(255, 220, 90, 0.26);
    }
    [data-theme="dark"] .app-footer .donate-nudge a,
    [data-theme="dark"] .donate-nudge-footer a,
    [data-theme="dark"] .about-support-cta a {
      background: rgba(240, 200, 100, 0.1);
      border: 1.5px solid rgba(240, 200, 100, 0.55);
      color: #F0D48A;
      box-shadow: none;
    }
    [data-theme="dark"] .app-footer .donate-nudge a:hover,
    [data-theme="dark"] .donate-nudge-footer a:hover,
    [data-theme="dark"] .about-support-cta a:hover {
      background: rgba(240, 200, 100, 0.16);
      border-color: rgba(245, 220, 160, 0.7);
      color: #FFE9B0;
    }
    @media (max-width: 360px) {
      .app-footer-row {
        font-size: 11px;
        gap: 0.28em;
      }
      .app-footer-privacy {
        font-size: 11.5px;
      }
      .app-footer .donate-nudge a,
      .donate-nudge-footer a,
      .about-support-cta a {
        font-size: 0.8rem;
        min-width: 12.5rem;
        padding: 10px 22px;
      }
    }

    /*
      Phone chrome: keep short UI on one line; slightly tighten on narrow screens.
      Long Help/About body text still wraps normally.
      NEVER put .scenario-btn here — nowrap on the whole row smashes the cost into the title (day15/mo).
    */
    .section-title,
    .browse-label,
    .filter-chip,
    .rate-banner-value,
    .rate-banner-label {
      white-space: nowrap;
    }
    @media (max-width: 400px) {
      .screen {
        padding-left: 12px;
        padding-right: 12px;
      }
      .topbar {
        gap: 8px;
        padding: 12px 10px 12px 10px;
      }
      .brand-tag {
        font-size: 0.72rem;
      }
      .logo-word {
        font-size: 1.42rem;
      }
      .logo-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
      }
      .brand {
        gap: 11px;
      }
      .topbar-back {
        font-size: 12.5px;
        padding: 0 11px;
        min-height: 36px;
      }
      .utility-toggle .utility-seg {
        font-size: 12.5px;
        padding: 10px 6px;
        gap: 5px;
      }
      .chip {
        font-size: 12px;
        padding: 7px 11px 7px 7px;
        gap: 6px;
      }
      .nav-btn {
        font-size: 10.5px;
        padding: 9px 4px 8px;
      }
      .result-cta {
        font-size: 14px;
        padding: 12px 12px;
      }
      .empty-quick button {
        font-size: 12px;
        padding: 8px 12px;
      }
    }
    @media (max-width: 340px) {
      .brand-tag { font-size: 0.68rem; }
      .logo-word { font-size: 1.32rem; }
      .logo-mark { width: 42px; height: 42px; border-radius: 13px; }
      .app-footer-row { font-size: 10.5px; gap: 0.22em; }
      .utility-toggle .utility-seg { font-size: 12px; padding: 9px 4px; }
    }
    [data-theme="dark"] .app-footer button,
    [data-theme="dark"] .app-footer a,
    [data-theme="dark"] .app-footer-link { color: #5EEAD4; }
    /* Don't let the teal footer-link rule strip the yellow support outline */
    [data-theme="dark"] .app-footer .donate-nudge a,
    [data-theme="dark"] .donate-nudge-footer a,
    [data-theme="dark"] .about-support-cta a {
      color: #F0D48A;
      background: rgba(240, 200, 100, 0.1);
      border: 1.5px solid rgba(240, 200, 100, 0.55);
      text-decoration: none;
      box-shadow: none;
      display: inline-block;
      width: auto;
    }
    .app-footer-dot { opacity: 0.45; }

    /* Info pages: one calm article surface (About / Privacy / Help / Contact) */
    #privacy,
    #about,
    #help,
    #contact,
    #heat-tell,
    #toilet-tell,
    #setting-tell {
      padding-bottom: 36px;
    }
    #privacy .section-title,
    #about .section-title,
    #help .section-title,
    #contact .section-title,
    #heat-tell .section-title,
    #toilet-tell .section-title,
    #setting-tell .section-title {
      margin-bottom: 10px;
    }
    #privacy .info-doc,
    #about .info-doc,
    #help .info-doc,
    #contact .info-doc,
    #heat-tell .info-doc,
    #toilet-tell .info-doc,
    #setting-tell .info-doc {
      background: var(--bg1);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 18px 18px 16px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }
    [data-theme="dark"] #privacy .info-doc,
    [data-theme="dark"] #about .info-doc,
    [data-theme="dark"] #help .info-doc,
    [data-theme="dark"] #contact .info-doc,
    [data-theme="dark"] #heat-tell .info-doc,
    [data-theme="dark"] #toilet-tell .info-doc,
    [data-theme="dark"] #setting-tell .info-doc {
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    }
    #privacy .info-doc > p,
    #about .info-doc > p,
    #help .info-doc > p,
    #contact .info-doc > p,
    #heat-tell .info-doc > p,
    #toilet-tell .info-doc > p,
    #setting-tell .info-doc > p {
      margin: 0 0 12px;
      font-size: 14.5px;
      line-height: 1.58;
      color: var(--text);
    }
    #privacy .info-doc > p:last-child,
    #about .info-doc > p:last-child,
    #help .info-doc > p:last-child,
    #contact .info-doc > p:last-child,
    #heat-tell .info-doc > p:last-child,
    #toilet-tell .info-doc > p:last-child,
    #setting-tell .info-doc > p:last-child {
      margin-bottom: 0;
    }
    #privacy .info-doc h3,
    #about .info-doc h3,
    #help .info-doc h3,
    #contact .info-doc h3,
    #heat-tell .info-doc h3,
    #toilet-tell .info-doc h3,
    #setting-tell .info-doc h3 {
      margin: 18px 0 8px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      font-size: 13.5px;
      font-weight: 780;
      letter-spacing: -0.01em;
      line-height: 1.3;
      color: var(--text);
    }
    #privacy .info-doc h3:first-child,
    #about .info-doc h3:first-child,
    #help .info-doc h3:first-child,
    #contact .info-doc h3:first-child,
    #heat-tell .info-doc h3:first-child,
    #toilet-tell .info-doc h3:first-child,
    #setting-tell .info-doc h3:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    #privacy .info-doc a,
    #about .info-doc a,
    #help .info-doc a,
    #contact .info-doc a,
    #heat-tell .info-doc a,
    #toilet-tell .info-doc a,
    #setting-tell .info-doc a {
      color: var(--accent-deep);
      font-weight: 650;
    }
    [data-theme="dark"] #privacy .info-doc a,
    [data-theme="dark"] #about .info-doc a,
    [data-theme="dark"] #help .info-doc a,
    [data-theme="dark"] #contact .info-doc a,
    [data-theme="dark"] #heat-tell .info-doc a,
    [data-theme="dark"] #toilet-tell .info-doc a,
    [data-theme="dark"] #setting-tell .info-doc a {
      color: #5EEAD4;
    }
    .heat-tell-link {
      appearance: none;
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(3, 105, 161, 0.22);
      background: color-mix(in srgb, #E8F4F8 65%, #fff);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #0C5F7A;
      cursor: pointer;
      text-align: center;
    }
    .heat-tell-link:hover {
      border-color: rgba(3, 105, 161, 0.4);
      background: #E8F4F8;
    }
    [data-theme="dark"] .heat-tell-link {
      border-color: rgba(103, 232, 249, 0.28);
      background: rgba(14, 116, 144, 0.22);
      color: #67E8F9;
    }
    #heatGroup .select-trigger,
    #heatGroup .select-option {
      white-space: nowrap;
    }
    .heat-tell-use {
      appearance: none;
      display: block;
      width: 100%;
      margin: 8px 0 2px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(3, 105, 161, 0.28);
      background: color-mix(in srgb, #E8F4F8 70%, #fff);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      color: #0C5F7A;
      cursor: pointer;
      text-align: center;
    }
    .heat-tell-use:hover {
      border-color: rgba(3, 105, 161, 0.45);
      background: #E8F4F8;
    }
    [data-theme="dark"] .heat-tell-use {
      border-color: rgba(103, 232, 249, 0.32);
      background: rgba(14, 116, 144, 0.22);
      color: #67E8F9;
    }
    #heat-tell .heat-tell-note,
    #toilet-tell .heat-tell-note,
    #setting-tell .heat-tell-note {
      margin: 8px 0 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }
    #help .help-tech {
      margin: 12px 0 2px;
      padding: 12px 13px;
      border-radius: 12px;
      border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--accent-deep));
      background: color-mix(in srgb, var(--page-bg) 88%, var(--bg1));
      font-size: 12px;
      line-height: 1.45;
    }
    #help .help-tech .help-tech-label {
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    #help .help-tech code {
      display: block;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11.5px;
      color: var(--text);
      margin-top: 5px;
      word-break: break-word;
    }
    #help .info-doc p strong {
      font-weight: 750;
    }
    #contact .info-doc {
      text-align: center;
      padding: 20px 16px 22px;
    }
    #contact .info-doc > p {
      margin: 0 0 16px;
      color: var(--text);
      font-size: 15.5px;
      font-weight: 550;
      line-height: 1.45;
    }
    #contact .contact-email {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 0;
      padding: 16px 12px;
      border-radius: 14px;
      border: 1.5px solid rgba(15, 118, 110, 0.28);
      background: #E6F3F0;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #0B5F58;
      text-decoration: none;
      word-break: break-all;
      line-height: 1.25;
    }
    #contact .contact-email:hover {
      text-decoration: none;
      background: #D5EDE8;
      border-color: #0F766E;
    }
    [data-theme="dark"] #contact .contact-email {
      color: #5EEAD4;
      background: #1A2A27;
      border-color: rgba(45, 212, 191, 0.35);
    }

    .bill-slice {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.14);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      color: rgba(255, 255, 255, 0.95);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 10px;
    }
    .bill-slice-text {
      flex: 1 1 auto;
      min-width: 0;
    }
    .bill-slice button {
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.22);
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 750;
      padding: 6px 11px;
      border-radius: 999px;
      margin: 0;
      cursor: pointer;
      flex: 0 0 auto;
      line-height: 1.2;
      white-space: nowrap;
    }

    /* Compare — secondary footer chrome, quieter than main tools */
    details.vs-details {
      margin-top: 6px;
      margin-bottom: 2px;
      border-radius: 14px;
      border: 1px solid rgba(60, 40, 20, 0.08);
      background: transparent;
      overflow: hidden;
      box-shadow: none;
    }
    [data-theme="dark"] details.vs-details {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.08);
    }
    details.vs-details > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      user-select: none;
    }
    details.vs-details > summary::-webkit-details-marker { display: none; }
    .vs-summary-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .vs-panel-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--faint);
    }
    [data-theme="dark"] .vs-panel-title { color: #8AA39A; }
    .vs-panel-sub {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      opacity: 0.9;
    }
    details.vs-details > summary .vs-chevron {
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(45deg);
      flex-shrink: 0;
      opacity: 0.7;
      transition: transform 0.15s ease;
    }
    details.vs-details[open] > summary .vs-chevron {
      transform: rotate(-135deg);
      margin-top: 4px;
    }
    .vs-panel-body {
      padding: 0 12px 12px;
    }
    .vs-panel {
      /* legacy class kept for id hooks inside */
    }
    .vs-suggest {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    .vs-suggest button {
      appearance: none;
      border: 1.5px solid var(--border);
      background: var(--bg2);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      padding: 6px 10px;
      border-radius: 999px;
      cursor: pointer;
    }
    .vs-suggest button.active {
      border-color: transparent;
      color: #fff;
      background: linear-gradient(155deg, #14B8A6, #0F766E);
    }
    [data-theme="dark"] .vs-suggest button.active {
      color: #0C1211;
      background: linear-gradient(155deg, #5EEAD4, #2DD4BF);
    }
    .vs-result {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      align-items: center;
      text-align: center;
      padding-top: 4px;
    }
    .vs-result[hidden] { display: none !important; }
    .vs-side .vs-name {
      font-size: 11px;
      font-weight: 650;
      color: var(--muted);
      margin-bottom: 2px;
      line-height: 1.25;
    }
    .vs-side .vs-val {
      font-size: 1.05rem;
      font-weight: 780;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .vs-mid {
      font-size: 12px;
      font-weight: 750;
      color: var(--faint);
    }
    .vs-diff {
      grid-column: 1 / -1;
      font-size: 13px;
      font-weight: 700;
      color: var(--good-text);
      margin-top: 4px;
    }
    .vs-diff.costlier { color: var(--warn-text); }

    .hidden { display: none !important; }
    /* Author display:flex/grid rules must not beat the HTML hidden attribute */
    [hidden] { display: none !important; }

    @media (prefers-reduced-motion: reduce) {
      .screen.active { animation: none; }
      * { transition: none !important; }
      .back:active,
      .home-link:active,
      .brand:active,
      .icon-btn:active,
      .theme-seg:active,
      .nav-btn:active,
      .filter-chip:active,
      .chip:active,
      .recent-chip:active,
      .recent-label-btn:active,
      .recent-menu-item:active,
      .appliance-card:active,
      .result-emoji-badge:active,
      .switcher-card:active,
      .switcher-close:active,
      .select-trigger:active,
      .select-option:active,
      .setup-rate:active,
      .rate-banner:active,
      .home-total-chip:active,
      .home-item:active,
      .home-item-remove:active,
      .btn-primary:active,
      .btn-secondary:active,
      .btn-danger:active,
      .btn-try:active,
      .btn-reset:active,
      .btn-x:active,
      .scenario-btn:active,
      .vs-suggest button:active,
      .empty-quick button:active,
      .bill-slice button:active,
      details.scenario-details > summary:active,
      details.adjust-details > summary:active,
      details.about-details > summary:active,
      details.vs-details > summary:active,
      details.tip-more > summary:active {
        transform: none;
      }
    }