/*
 * Honghui mobile calculation workspace
 *
 * The shell is inert by default.  Existing desktop layout is only overridden
 * when mobile-workspace.js has activated the shell and one of the phone media
 * queries below matches.
 */

/* Enhanced phone selects remain in the shared page DOM. Keep their trigger
   out of desktop layouts after a live phone-to-desktop viewport change. */
.hh-mobile-select-trigger {
  display: none;
}

#hh-mobile-workspace.hh-mobile-shell {
  display: none;
}

#hh-mobile-workspace.hh-mobile-shell[hidden] {
  display: none !important;
}

.lifecycle-cursor-tooltip-close {
  display: none;
}

/* Mobile-only result views are inert on the desktop shell. */
.optimized-mobile-input-summary,
.optimized-mobile-comparison {
  display: none;
}

@media (max-width: 760px),
  (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  html[data-hh-mobile-workspace="active"] {
    --hh-mobile-header-height: 56px;
    --hh-mobile-tabs-height: 50px;
    --hh-mobile-nav-height: 64px;
    --hh-mobile-edge: 10px;
    --hh-mobile-radius: 14px;
    --hh-mobile-line: #d9e3e9;
    --hh-mobile-ink: #172630;
    --hh-mobile-muted: #64737e;
    --hh-mobile-accent: #1f7a75;
    --hh-mobile-accent-soft: #e8f4f2;
    --hh-mobile-warm: #8a5a34;
    --hh-mobile-surface: #ffffff;
    --hh-mobile-canvas: #edf2f5;
    width: 100%;
    min-height: 100%;
    scroll-padding-top: calc(var(--hh-mobile-header-height) + var(--hh-mobile-tabs-height) + env(safe-area-inset-top));
    scroll-padding-bottom: calc(var(--hh-mobile-nav-height) + env(safe-area-inset-bottom));
    background: var(--hh-mobile-canvas);
    -webkit-text-size-adjust: 100%;
  }

  html[data-hh-mobile-workspace="active"],
  html[data-hh-mobile-workspace="active"] body.hh-mobile-active {
    max-width: 100%;
    overflow-x: clip;
  }

  body.hh-mobile-active {
    min-height: 100svh;
    min-height: 100dvh;
    background: var(--hh-mobile-canvas);
    overscroll-behavior-y: none;
  }

  body.hh-mobile-active #hh-mobile-workspace.hh-mobile-shell {
    display: contents;
  }

  body.hh-mobile-active .app:not(.hidden) {
    display: block;
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
  }

  body.hh-mobile-active .app > .sidebar,
  body.hh-mobile-active .workspace > .topbar,
  body.hh-mobile-active .sidebar,
  body.hh-mobile-active .topbar {
    display: none !important;
  }

  body.hh-mobile-active .workspace {
    width: 100%;
    max-width: 100vw;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
    overflow: visible;
  }

  body.hh-mobile-active #content.hh-mobile-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 100svh;
    min-height: 100dvh;
    padding:
      calc(var(--hh-mobile-header-height) + var(--hh-mobile-tabs-height) + env(safe-area-inset-top) + 10px)
      max(var(--hh-mobile-edge), env(safe-area-inset-right))
      calc(var(--hh-mobile-nav-height) + env(safe-area-inset-bottom) + 14px)
      max(var(--hh-mobile-edge), env(safe-area-inset-left));
    overflow: visible;
  }

  body.hh-mobile-active #content.hh-mobile-content > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Compact fixed header */
  body.hh-mobile-active .hh-mobile-header {
    position: fixed;
    z-index: 940;
    top: 0;
    right: 0;
    left: 0;
    min-height: calc(var(--hh-mobile-header-height) + env(safe-area-inset-top));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 10px;
    padding:
      calc(6px + env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      6px
      max(12px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(201, 214, 222, .92);
    color: var(--hh-mobile-ink);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 20px rgba(22, 38, 48, .07);
    backdrop-filter: blur(14px) saturate(1.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
  }

  body.hh-mobile-active .hh-mobile-header__scene {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 7px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body.hh-mobile-active .hh-mobile-header__scene:hover,
  body.hh-mobile-active .hh-mobile-header__scene:focus-visible {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  body.hh-mobile-active .hh-mobile-header__eyebrow {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--hh-mobile-accent);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-header__title {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    margin: 1px 0 0;
    overflow: hidden;
    color: var(--hh-mobile-ink);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-header__status {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 34vw;
    min-height: 26px;
    padding: 4px 8px;
    overflow: hidden;
    border: 1px solid #cce1dd;
    border-radius: 999px;
    color: #256b66;
    background: #edf7f5;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-header__status::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2c9189;
    box-shadow: 0 0 0 3px rgba(44, 145, 137, .12);
  }

  body.hh-mobile-active .hh-mobile-header__tools {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(3, 27px);
    gap: 4px;
  }

  body.hh-mobile-active .hh-mobile-header__tools > button {
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid #d5e0e6;
    border-radius: 8px;
    color: #53656f;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 2px 7px rgba(22, 38, 48, .06);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    touch-action: manipulation;
  }

  body.hh-mobile-active .hh-mobile-header__tools > button[data-mobile-global-action="ai"] {
    color: var(--thermal-deep, #9f3424);
    border-color: var(--thermal-line, #e9c1b5);
    background: var(--thermal-soft, #fff0eb);
  }

  body.hh-mobile-active .hh-mobile-header__tools > button:active {
    transform: translateY(1px);
  }

  body.hh-mobile-active .hot-embedded-ai-panel {
    z-index: 940;
    top: var(--hh-mobile-viewport-offset, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100vw;
    max-width: none;
    height: calc(var(--hh-mobile-viewport-height, 100dvh) - var(--hh-mobile-nav-height) - env(safe-area-inset-bottom));
    border-left: 0;
    box-shadow: none;
  }

  body.hh-mobile-active .hot-ai-commercial-modal {
    z-index: 945;
    top: var(--hh-mobile-viewport-offset, 0px);
    right: 0;
    bottom: calc(var(--hh-mobile-nav-height) + env(safe-area-inset-bottom));
    left: 0;
    max-height: none;
    overscroll-behavior: contain;
    scroll-padding-bottom: 18px;
  }

  body.hh-mobile-active .hot-ai-commercial-dialog {
    padding-bottom: 18px;
  }

  body.hh-mobile-active.hot-ai-open {
    overflow: hidden;
  }

  body.hh-mobile-active.hot-ai-open .hh-mobile-header {
    z-index: 930;
    pointer-events: none;
  }

  body.hh-mobile-active .hot-embedded-ai-resize {
    display: none;
  }

  body.hh-mobile-active .hot-embedded-ai-head {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hot-embedded-ai-panel {
    height: var(--hh-mobile-viewport-height, 100dvh);
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hot-ai-commercial-modal {
    bottom: 0;
  }

  body.hh-mobile-active #globalSettingsPanel.global-settings-panel {
    position: fixed !important;
    z-index: 2000 !important;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    isolation: isolate;
  }

  body.hh-mobile-active #globalSettingsPanel .global-settings-backdrop {
    z-index: 0;
  }

  body.hh-mobile-active #globalSettingsPanel .global-settings-sheet {
    z-index: 1;
    width: 100vw;
    max-height: calc(100dvh - env(safe-area-inset-top));
    background: #fff;
  }

  body.hh-mobile-active .hh-mobile-view-tabs {
    position: fixed;
    z-index: 935;
    top: calc(var(--hh-mobile-header-height) + env(safe-area-inset-top));
    right: 0;
    left: 0;
    min-height: var(--hh-mobile-tabs-height);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 6px max(var(--hh-mobile-edge), env(safe-area-inset-right)) 6px max(var(--hh-mobile-edge), env(safe-area-inset-left));
    border-bottom: 1px solid rgba(201, 214, 222, .9);
    background: rgba(248, 251, 252, .96);
    box-shadow: 0 4px 13px rgba(22, 38, 48, .045);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button {
    position: relative;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #d7e2e7;
    border-radius: 10px;
    color: var(--hh-mobile-muted);
    background: #fff;
    box-shadow: 0 1px 4px rgba(18, 41, 53, .04);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-save-current {
    position: static;
    width: auto;
    min-width: 108px;
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid #9bc8c2;
    border-radius: 10px;
    color: #176b66;
    background: rgba(239, 249, 247, .98);
    box-shadow: 0 3px 10px rgba(27, 81, 78, .12);
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1.25;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-save-current:disabled {
    color: #8b989f;
    border-color: #d6e0e4;
    background: rgba(246, 248, 249, .98);
    box-shadow: none;
  }

  body.hh-mobile-active .hh-mobile-save-current[hidden] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-result-title-row {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  body.hh-mobile-active .hh-mobile-result-title-row > h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content #hotOptResultCard > .result-card-head,
  body.hh-mobile-active .hh-mobile-content #coldOptResultCard > .result-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button.is-active {
    color: #fff;
    border-color: #1f7a75;
    background: linear-gradient(180deg, #2a8a83, #1f746f);
    box-shadow: 0 4px 10px rgba(31, 122, 117, .20);
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button.is-complete:not(.is-active)::after,
  body.hh-mobile-active .hh-mobile-view-tabs > button.is-dirty:not(.is-active)::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2c9189;
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button.is-dirty:not(.is-active)::after {
    background: #dd8a35;
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button:disabled {
    color: #9aa7af;
    opacity: .58;
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button[hidden] {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-statistics .hh-mobile-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.hh-mobile-active .hh-mobile-header__chevron {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: #768690;
    font-size: 17px;
    line-height: 1;
  }

  body.hh-mobile-active.hh-mobile-dirty .hh-mobile-header__status {
    color: #86501e;
    border-color: #ebc58f;
    background: #fff6e8;
  }

  body.hh-mobile-active.hh-mobile-dirty .hh-mobile-header__status::before {
    background: #d17b25;
    box-shadow: 0 0 0 3px rgba(209, 123, 37, .14);
  }

  /* Five-slot bottom workbench */
  body.hh-mobile-active .hh-mobile-nav {
    position: fixed !important;
    z-index: 950;
    right: 0;
    bottom: var(--hh-mobile-keyboard-inset, 0px);
    left: 0;
    min-height: calc(var(--hh-mobile-nav-height) + env(safe-area-inset-bottom));
    display: grid !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    grid-template-columns: .82fr .88fr 1.38fr 1.02fr .8fr;
    align-items: end;
    gap: 2px;
    padding:
      6px
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
    border-top: 1px solid rgba(196, 210, 218, .95);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 28px rgba(19, 37, 47, .11);
    backdrop-filter: blur(16px) saturate(1.16);
    -webkit-backdrop-filter: blur(16px) saturate(1.16);
    transition: transform .18s ease, opacity .18s ease;
  }

  body.hh-mobile-active .hh-mobile-nav__item {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 4px 2px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    color: #687782;
    background: transparent;
    box-shadow: none;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.12;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body.hh-mobile-active .hh-mobile-nav__item::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    opacity: .82;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 20px 20px;
  }

  body.hh-mobile-active .hh-mobile-nav__icon {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-nav__item[data-mobile-action="scene"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6ZM6 6v2h2V6H6Zm10 0v2h2V6h-2ZM6 16v2h2v-2H6Zm10 0v2h2v-2h-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6ZM6 6v2h2V6H6Zm10 0v2h2V6h-2ZM6 16v2h2v-2H6Zm10 0v2h2v-2h-2Z'/%3E%3C/svg%3E");
  }

  body.hh-mobile-active .hh-mobile-nav__item[data-mobile-action="parameters"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm1 4v2h10V7H7Zm0 4v2h4v-2H7Zm6 0v2h4v-2h-4Zm-6 4v2h4v-2H7Zm6 0v2h4v-2h-4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm1 4v2h10V7H7Zm0 4v2h4v-2H7Zm6 0v2h4v-2h-4Zm-6 4v2h4v-2H7Zm6 0v2h4v-2h-4Z'/%3E%3C/svg%3E");
  }

  body.hh-mobile-active .hh-mobile-nav__item[data-mobile-action="primary"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
  }

  body.hh-mobile-active .hh-mobile-nav__item[data-mobile-action="copy-image"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10a2 2 0 0 1 2 2v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-1H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2Zm0 2H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3V9a2 2 0 0 1 2-2h7V5H7Zm3 4v10h10V9H10Zm2 7 2-2 2 2 2-3v4h-6v-1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10a2 2 0 0 1 2 2v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-1H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2Zm0 2H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3V9a2 2 0 0 1 2-2h7V5H7Zm3 4v10h10V9H10Zm2 7 2-2 2 2 2-3v4h-6v-1Z'/%3E%3C/svg%3E");
  }

  body.hh-mobile-active .hh-mobile-nav__item[data-mobile-action="more"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm7 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
  }

  body.hh-mobile-active .hh-mobile-nav__item:hover,
  body.hh-mobile-active .hh-mobile-nav__item:focus-visible,
  body.hh-mobile-active .hh-mobile-nav__item.is-active {
    color: var(--hh-mobile-accent);
    border-color: transparent;
    background: var(--hh-mobile-accent-soft);
    box-shadow: none;
  }

  body.hh-mobile-active .hh-mobile-nav__item.is-primary {
    align-self: center;
    min-height: 52px;
    color: #fff;
    border-radius: 13px;
    background: linear-gradient(180deg, #93603b, #7e4f2d);
    box-shadow: 0 7px 17px rgba(126, 79, 45, .28);
    transform: translateY(-4px);
  }

  body.hh-mobile-active .hh-mobile-nav__item.is-primary > span:last-child {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-nav__item.is-primary:hover,
  body.hh-mobile-active .hh-mobile-nav__item.is-primary:focus-visible,
  body.hh-mobile-active .hh-mobile-nav__item.is-primary.is-active {
    color: #fff;
    background: linear-gradient(180deg, #9b6842, #815130);
  }

  body.hh-mobile-active .hh-mobile-nav__item:disabled {
    opacity: .38;
    filter: grayscale(.35);
    box-shadow: none;
    transform: none;
  }

  body.hh-mobile-active.hh-mobile-dirty .hh-mobile-nav__item[data-mobile-action="primary"]::after {
    content: "";
    position: absolute;
    top: 5px;
    right: calc(50% - 17px);
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f0a041;
  }

  /* Scene and more bottom sheets */
  body.hh-mobile-active .hh-mobile-scrim {
    position: fixed;
    z-index: 970;
    inset: 0;
    display: block;
    visibility: hidden;
    border: 0;
    background: rgba(14, 27, 35, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
    -webkit-tap-highlight-color: transparent;
  }

  body.hh-mobile-active.hh-mobile-sheet-open .hh-mobile-scrim,
  body.hh-mobile-active .hh-mobile-scrim.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body.hh-mobile-active .hh-mobile-sheet {
    position: fixed;
    z-index: 980;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(82dvh, 720px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding:
      10px
      max(14px, env(safe-area-inset-right))
      calc(14px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    overflow: hidden;
    border: 1px solid rgba(213, 224, 230, .96);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    color: var(--hh-mobile-ink);
    background: #fff;
    box-shadow: 0 -20px 60px rgba(10, 26, 35, .24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(100% + 24px), 0);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .18s ease,
      visibility 0s linear .24s;
  }

  body.hh-mobile-active .hh-mobile-sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  body.hh-mobile-active .hh-mobile-sheet::before {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-sheet__handle {
    width: 38px;
    height: 4px;
    margin: -3px auto 3px;
    border-radius: 999px;
    background: #ccd6dc;
  }

  body.hh-mobile-active .hh-mobile-sheet__header,
  body.hh-mobile-active .hh-mobile-sheet__head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 2px 11px;
    border-bottom: 1px solid #e5ebef;
  }

  body.hh-mobile-active .hh-mobile-sheet__header h2,
  body.hh-mobile-active .hh-mobile-sheet__header h3,
  body.hh-mobile-active .hh-mobile-sheet__head h2,
  body.hh-mobile-active .hh-mobile-sheet__head h3,
  body.hh-mobile-active .hh-mobile-sheet__title {
    margin: 0;
    color: var(--hh-mobile-ink);
    font-size: 18px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-sheet__header p,
  body.hh-mobile-active .hh-mobile-sheet__head p,
  body.hh-mobile-active .hh-mobile-sheet__subtitle {
    margin: 4px 0 0;
    color: var(--hh-mobile-muted);
    font-size: 12px;
    line-height: 1.45;
  }

  body.hh-mobile-active .hh-mobile-sheet__head small {
    display: block;
    margin-bottom: 3px;
    color: var(--hh-mobile-accent);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .05em;
  }

  body.hh-mobile-active .hh-mobile-sheet__head > button[data-mobile-action="close-sheet"] {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #52636e;
    background: #f0f4f6;
    box-shadow: none;
    font-size: 24px;
    line-height: 1;
  }

  body.hh-mobile-active .hh-mobile-sheet__body {
    min-height: 0;
    padding: 11px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.hh-mobile-active .hh-mobile-sheet[hidden],
  body.hh-mobile-active .hh-mobile-scrim[hidden] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-route-option,
  body.hh-mobile-active .hh-mobile-sheet [data-mobile-command] {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    margin: 0 0 7px;
    padding: 10px 12px;
    border: 1px solid #dce5ea;
    border-radius: 11px;
    color: #30434d;
    background: #fff;
    box-shadow: none;
    font-weight: 750;
    line-height: 1.3;
    text-align: left;
    touch-action: manipulation;
  }

  body.hh-mobile-active .hh-mobile-route-option small,
  body.hh-mobile-active .hh-mobile-sheet [data-mobile-command] small {
    display: block;
    margin-top: 2px;
    color: var(--hh-mobile-muted);
    font-size: 11px;
    font-weight: 500;
  }

  body.hh-mobile-active .hh-mobile-route-group + .hh-mobile-route-group {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e7edf0;
  }

  body.hh-mobile-active .hh-mobile-route-group h3 {
    margin: 0 0 7px;
    color: #5b6d77;
    font-size: 12px;
    font-weight: 800;
  }

  body.hh-mobile-active .hh-mobile-route-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  body.hh-mobile-active .hh-mobile-route-option__mark {
    grid-column: 1;
    grid-row: 1;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d6e2e7;
    border-radius: 9px;
    color: #49616c;
    background: #f4f7f9;
    font-size: 11px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-route-option > span:nth-child(2) {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
  }

  body.hh-mobile-active .hh-mobile-route-option > span:nth-child(2) strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-route-option::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 1.5px solid #aebdc6;
    border-radius: 50%;
    background: #fff;
    grid-column: 3;
  }

  body.hh-mobile-active .hh-mobile-route-option.is-current {
    color: #176c66;
    border-color: #9fcac4;
    background: #edf7f5;
  }

  body.hh-mobile-active .hh-mobile-route-option.is-current::after {
    border: 5px solid var(--hh-mobile-accent);
  }

  body.hh-mobile-active .hh-mobile-route-option.is-current .hh-mobile-route-option__mark {
    color: #176c66;
    border-color: #a9cec9;
    background: #dff0ed;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="more"] .hh-mobile-sheet__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="more"] [data-mobile-command] {
    min-height: 58px;
    margin: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="more"] [data-mobile-command] > span {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #41616d;
    background: #edf3f5;
    font-size: 11px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="more"] [data-mobile-command] > strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="more"] [data-mobile-command] > small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="more"] [data-mobile-command].is-danger {
    color: #a83e35;
    border-color: #ebc9c5;
    background: #fff8f7;
  }

  body.hh-mobile-active .hh-mobile-sheet [data-mobile-command][hidden] {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-sheet-open {
    overflow: hidden;
  }

  /* Parameter / plans / results routes */
  body.hh-mobile-active.hh-mobile-view-parameters .hh-mobile-content [data-mobile-section]:not([data-mobile-section="parameters"]),
  body.hh-mobile-active .hh-mobile-content[data-mobile-view="parameters"] [data-mobile-section]:not([data-mobile-section="parameters"]),
  body.hh-mobile-active.hh-mobile-view-plans .hh-mobile-content [data-mobile-section]:not([data-mobile-section="plans"]),
  body.hh-mobile-active .hh-mobile-content[data-mobile-view="plans"] [data-mobile-section]:not([data-mobile-section="plans"]),
  body.hh-mobile-active.hh-mobile-view-results .hh-mobile-content [data-mobile-section]:not([data-mobile-section="results"]),
  body.hh-mobile-active .hh-mobile-content[data-mobile-view="results"] [data-mobile-section]:not([data-mobile-section="results"]) {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section] {
    min-width: 0;
    animation: hh-mobile-route-in .16s ease-out;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-flow-strip {
    display: none !important;
  }

  /* The scene drawer owns geometry switching on phones. */
  body.hh-mobile-active .hh-mobile-content [data-mobile-scene-selector] {
    display: none !important;
  }

  /* Secondary result sections only open through an explicit mobile command. */
  body.hh-mobile-active .hh-mobile-content [data-mobile-aux],
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-result-auxiliary,
  body.hh-mobile-active .hh-mobile-content .optimized-result-auxiliary,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-auxiliary {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-aux].is-mobile-open,
  body.hh-mobile-active .hh-mobile-content .is-mobile-open [data-mobile-aux],
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-result-auxiliary.is-mobile-open,
  body.hh-mobile-active .hh-mobile-content .optimized-result-auxiliary.is-mobile-open,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-auxiliary.is-mobile-open {
    display: block !important;
  }

  /* An auxiliary result is a real phone page, not an anchor inside the long
     desktop document.  Keep only the selected branch and its return control so
     the user cannot scroll back into unrelated scheme/result sections. */
  body.hh-mobile-active.hh-mobile-aux-active .hh-mobile-content > :not(.is-mobile-aux-path),
  body.hh-mobile-active.hh-mobile-aux-active .hh-mobile-content .is-mobile-aux-path:not([data-mobile-aux].is-mobile-open) > :not(.is-mobile-aux-path) {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-aux-active .hh-mobile-content > .is-mobile-aux-path,
  body.hh-mobile-active.hh-mobile-aux-active .hh-mobile-content [data-mobile-aux].is-mobile-open {
    margin-top: 0 !important;
  }

  body.hh-mobile-active.hh-mobile-view-results .hh-mobile-content > [data-mobile-section="results"],
  body.hh-mobile-active .hh-mobile-content[data-mobile-view="results"] > [data-mobile-section="results"] {
    order: 10;
  }

  body.hh-mobile-active.hh-mobile-view-results .hh-mobile-content > [data-mobile-section="plans"],
  body.hh-mobile-active .hh-mobile-content[data-mobile-view="results"] > [data-mobile-section="plans"] {
    order: 20;
  }

  body.hh-mobile-active.hh-mobile-view-results .hh-mobile-content > .history,
  body.hh-mobile-active.hh-mobile-view-results .hh-mobile-content > [id$="HistoryHost"] {
    order: 40;
  }

  body.hh-mobile-active .hh-mobile-content .card {
    padding: 12px;
    border-color: var(--hh-mobile-line);
    border-radius: var(--hh-mobile-radius);
    box-shadow: 0 3px 13px rgba(25, 42, 52, .05);
  }

  body.hh-mobile-active .hh-mobile-content .card h3 {
    font-size: 16px;
  }

  body.hh-mobile-active .hh-mobile-content .section-label {
    margin: 7px 0 8px;
    font-size: 12px;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module {
    min-width: 0;
    margin: 0 0 9px;
    overflow: clip;
    border: 1px solid var(--hh-mobile-line);
    border-radius: 12px;
    background: #fbfdfe;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    color: var(--hh-mobile-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module > summary::-webkit-details-marker {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module > summary::after {
    content: "收起";
    flex: 0 0 auto;
    color: var(--hh-mobile-accent);
    font-size: 10px;
    font-weight: 750;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module:not([open]) > summary::after {
    content: "展开";
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module__body {
    padding: 0 10px 10px;
    border-top: 1px solid #e6edf1;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module__body > .section-label {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-parameter-module__body > .grid {
    margin-top: 10px;
  }

  /* Hot-insulation parameters follow the user's goal on phones: choose the
     convergence target first, then fill only the base and target-dependent
     fields.  The same live inputs are moved here; no duplicate values exist. */
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .zhu-opt-scenario {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .zhu-opt-workbench[data-mobile-goal-driven] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .zhu-opt-workbench[data-mobile-goal-driven] > .zhu-opt-action-rail {
    order: -1;
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-areas:
      "goal-mode goal-mode"
      "goal-title goal-action"
      "goal-select goal-action"
      "goal-target goal-action"
      "goal-error goal-error";
    gap: 6px 9px;
    padding: 8px;
    border-color: #b9d8d3;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fcfb, #edf7f5);
    box-shadow: none;
    align-items: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .zhu-opt-workbench[data-mobile-goal-driven] > [data-mobile-convergence-first][data-mobile-segmented-state-target] {
    grid-template-columns: minmax(0, 1fr) 144px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > div:first-child .section-label {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > div:first-child {
    grid-area: goal-title;
    min-width: 0;
    align-self: center;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > div:first-child h3 {
    margin: 0;
    color: #1c5f5a;
    font-size: 14px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > div:first-child h3 .parameter-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .hot-opt-thickness-mode {
    grid-area: goal-mode;
    position: static;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .hot-opt-thickness-mode button {
    min-height: 36px;
    font-size: 13px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .field {
    min-width: 0;
    padding: 6px;
    border-color: #cae0dd;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .field:not(.zhu-opt-target-field) {
    grid-area: goal-select;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .field:not(.zhu-opt-target-field) > label {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .field:not(.zhu-opt-target-field) select {
    min-height: 40px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] .zhu-opt-target-field {
    grid-area: goal-target;
    background: #fff !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] .zhu-opt-target-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px 8px;
    align-content: start;
    border-color: #95c9c2;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] .zhu-opt-target-field > label,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] [data-hot-opt-segmented-target-type],
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] [data-hot-opt-segmented-target-type] + .hh-mobile-select-trigger {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] [data-hot-opt-segmented-target-type],
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] [data-hot-opt-segmented-target-value] {
    width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] .zhu-opt-target-field > .note,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] .zhu-opt-target-field > small {
    grid-column: 1 / -1;
    margin: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .readonly,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > .zhu-opt-generate-note,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > #hotOptRecalcParameters {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > #hotOptAuto {
    grid-area: goal-action;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 10px 8px;
    border-radius: 10px;
    white-space: normal;
    line-height: 1.35;
    font-size: 15px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first] > #hotOptActionError {
    grid-area: goal-error;
    margin: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .zhu-opt-input-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-parameter-module.is-mobile-empty,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .is-mobile-goal-irrelevant {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropDetails.is-mobile-goal-relevant,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptEconomicDetails.is-mobile-goal-relevant {
    display: block;
    order: 30;
    margin: 0 0 9px;
    border-color: #cbdedb;
    background: #fbfefd;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropSummary.has-mobile-steam-inlet-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropSummary [data-steam-inlet-summary] {
    display: block;
    flex: 1 0 100%;
    min-width: 0;
    color: #75838b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropSummary [data-steam-inlet-summary][hidden] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropSummary [data-steam-inlet-summary][data-state="ready"] {
    color: #52736f;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropSummary [data-steam-inlet-summary][data-state="waiting"] {
    color: #78858d;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] #hotOptTempDropSummary [data-steam-inlet-summary][data-state="invalid"] {
    color: #a64b43;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .emissivity-presets {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters {
    order: 50;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hh-mobile-line);
    border-radius: 12px;
    background: #f8fbfc;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters > summary {
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 11px;
    color: var(--hh-mobile-ink);
    cursor: pointer;
    list-style: none;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters > summary::-webkit-details-marker {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters > summary strong {
    font-size: 13px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters > summary span {
    min-width: 0;
    color: #687a84;
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters > summary::after {
    content: "展开";
    grid-column: 1 / -1;
    color: var(--hh-mobile-accent);
    font-size: 10px;
    font-weight: 750;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters[open] > summary::after {
    content: "收起";
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters__body {
    padding: 0 10px 10px;
    border-top: 1px solid #e3ebee;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-grid {
    margin-top: 10px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .hh-mobile-advanced-parameters #hotOptPaybackDetails {
    margin: 9px 0 0;
  }

  /* Cold-insulation follows the same fast phone workflow as hot insulation:
     choose the thickness rule first, then complete grouped scene parameters.
     All controls remain the original renderer nodes and keep their API wiring. */
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-scenario {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-workbench[data-mobile-cold-goal-driven] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-workbench[data-mobile-cold-goal-driven] > .zhu-opt-action-rail {
    order: -1;
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-areas:
      "cold-goal-title cold-goal-action"
      "cold-goal-select cold-goal-action"
      "cold-goal-target cold-goal-action"
      "cold-goal-error cold-goal-error";
    gap: 6px 9px;
    padding: 8px;
    align-items: stretch;
    border-color: #b9d9ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fcff, #eaf6fd);
    box-shadow: none;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-action-rail > .zhu-opt-generate-note {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > div:first-child {
    grid-area: cold-goal-title;
    min-width: 0;
    align-self: center;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > div:first-child .section-label {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > div:first-child h3 {
    margin: 0;
    color: #1f628c;
    font-size: 14px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > .field {
    min-width: 0;
    padding: 6px;
    border-color: #c7e0ef;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > .field:not(#coldOptFixedTarget) {
    grid-area: cold-goal-select;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > .field:not(#coldOptFixedTarget) > label,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > .field:not(#coldOptFixedTarget) > .unit {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > #coldOptFixedTarget {
    grid-area: cold-goal-target;
    background: #fff;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > #coldOptFixedTarget.is-mobile-goal-irrelevant,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > .readonly,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > #coldOptRecalcParameters {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > #coldOptAuto {
    grid-area: cold-goal-action;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 10px 8px;
    border-radius: 10px;
    white-space: normal;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.35;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-cold-convergence-first] > #coldOptActionError {
    grid-area: cold-goal-error;
    margin: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main > .optimized-parameter-group-title {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-parameter-module[data-mobile-parameter-role="geometry"],
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-parameter-module[data-mobile-parameter-role="basic"] {
    border-color: #cfe2ed;
    background: #f9fcfe;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] details[data-mobile-specialty] {
    min-width: 0;
    margin: 0 0 9px;
    overflow: hidden;
    border: 1px solid #d5e4ec;
    border-radius: 12px;
    background: #fbfdfe;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] details[data-mobile-specialty][data-mobile-parameter-role="economic"] {
    border-color: #bdd9e9;
    background: #f5fbff;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] details[data-mobile-specialty] > summary {
    color: #254b62;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] details[data-mobile-specialty] > .grid,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] details[data-mobile-specialty] > [id$="Host"] {
    margin: 0 9px 9px;
  }

  /* Phone units share the control row. Long explanatory suffixes remain in
     the field title while the visible unit stays compact. */
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    align-items: center;
    column-gap: 5px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field > label {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-section="parameters"] .grid > .field.hh-mobile-long-select-field {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field > input,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field > select,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field > .readonly-value,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field > .hh-mobile-select-trigger {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field > .unit {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    max-width: 76px;
    margin: 0;
    color: #687b86;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field:not(:has(> .unit)) > input,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field:not(:has(> .unit)) > select,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field:not(:has(> .unit)) > .readonly-value,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .zhu-opt-input-main .field:not(:has(> .unit)) > .hh-mobile-select-trigger {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .grid,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .grid > .field,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .scenario-grid > .field,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .col-3,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .col-4,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .col-6,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .col-8 {
    grid-column: auto;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .col-12,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .grid > .field.hh-mobile-wide,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .inline-details,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="parameters"] .note {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active .hh-mobile-content .field {
    min-width: 0;
    padding: 8px;
    border-radius: 10px;
  }

  body.hh-mobile-active .hh-mobile-content .field label,
  body.hh-mobile-active .hh-mobile-content .optimized-table-field > span {
    margin-bottom: 5px;
    color: #566873;
    font-size: 11px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content input,
  body.hh-mobile-active .hh-mobile-content select,
  body.hh-mobile-active .hh-mobile-content textarea {
    min-width: 0;
    min-height: 42px;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 16px;
  }

  body.hh-mobile-active .hh-mobile-content button {
    min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body.hh-mobile-active .hh-mobile-content .field .unit,
  body.hh-mobile-active .hh-mobile-content .field-note {
    font-size: 10px;
    line-height: 1.35;
  }

  body.hh-mobile-active .hh-mobile-content .inline-details summary,
  body.hh-mobile-active .hh-mobile-content details.card > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 11px;
    touch-action: manipulation;
  }

  body.hh-mobile-active .hh-mobile-content .toolbar,
  body.hh-mobile-active .hh-mobile-content .scheme-actions,
  body.hh-mobile-active .hh-mobile-content .result-actions {
    gap: 7px;
  }

  /* A three-up, glanceable scheme matrix. */
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-list,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .scheme-config-mobile,
  body.hh-mobile-active .hh-mobile-content .hh-mobile-scheme-matrix,
  body.hh-mobile-active .hh-mobile-content .scheme-config-mobile.hh-mobile-scheme-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
    gap: 6px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-table-head {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-card,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .scheme-plan-config-card,
  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d9e3e8;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(24, 43, 53, .04);
  }

  /* Collapsed plans remain a compact three-up index; the active editor gets
     the full row so its fields never inherit a one-third-column width. */
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-card.is-collapsed,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .optimized-plan-card.is-collapsed,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-plan.is-collapsed,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] [data-mobile-collapsed="true"] {
    grid-column: auto;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-card:not(.is-collapsed),
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .optimized-plan-card:not(.is-collapsed),
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-plan:not(.is-collapsed),
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] [data-mobile-collapsed="false"],
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-card.is-mobile-open,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .optimized-plan-card.is-mobile-open,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-plan.is-mobile-open {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
    border-top: 1px solid #e8eef1;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-line:first-child {
    border-top: 0;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-cell {
    min-width: 0;
    display: grid;
    gap: 2px;
    align-items: start;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-cell strong,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .scheme-plan-config-head strong,
  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan__title {
    min-width: 0;
    overflow: hidden;
    color: #20343e;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-cell span,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .scheme-plan-config-head span {
    min-width: 0;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .optimized-table-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .optimized-table-field > span {
    display: block;
    margin: 0;
    font-size: 9px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] input,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] select {
    min-height: 36px;
    padding: 6px;
    font-size: 12px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-row-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-row-actions button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 3px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan__toggle,
  body.hh-mobile-active .hh-mobile-content [data-mobile-plan-toggle] {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 7px;
    border: 0;
    border-bottom: 1px solid #e5ecef;
    border-radius: 0;
    color: #25404a;
    background: #f7fafb;
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-plan-toggle] > span {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-plan-toggle] > small {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    color: #71818a;
    font-size: 8px;
    font-weight: 650;
    line-height: 1.2;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-plan-toggle] > i {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan__toggle::after,
  body.hh-mobile-active .hh-mobile-content [data-mobile-plan-toggle]::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan.is-collapsed .hh-mobile-plan__toggle::after,
  body.hh-mobile-active .hh-mobile-content .advanced-plan-card.is-collapsed [data-mobile-plan-toggle]::after,
  body.hh-mobile-active .hh-mobile-content [data-mobile-collapsed="true"] [data-mobile-plan-toggle]::after {
    transform: rotate(-45deg);
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan.is-collapsed > :not(.hh-mobile-plan__toggle),
  body.hh-mobile-active .hh-mobile-content .advanced-plan-card.is-collapsed > :not([data-mobile-plan-toggle]),
  body.hh-mobile-active .hh-mobile-content [data-mobile-collapsed="true"] > :not([data-mobile-plan-toggle]) {
    display: none !important;
  }

  /* Optimized hot/cold modules use a separate plan switcher and keep only
     the selected plan editor in the limited phone viewport. */
  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-switcher {
    max-width: 100%;
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
    padding: 2px 1px 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-switcher::-webkit-scrollbar {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab {
    min-width: 84px;
    min-height: 58px;
    flex: 0 0 calc((100% - 74px) / 3);
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 8px 9px;
    scroll-snap-align: start;
    border: 1px solid #d7e3e7;
    border-radius: 10px;
    color: #36505b;
    background: #fff;
    box-shadow: none;
    text-align: left;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab strong,
  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab strong {
    font-size: 12px;
    line-height: 1.2;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab small {
    color: #73858e;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab.is-active {
    border-color: #21867e;
    color: #fff;
    background: linear-gradient(145deg, #28998f, #197a75);
    box-shadow: 0 5px 12px rgba(24, 126, 120, .18);
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab.is-active small {
    color: rgba(255, 255, 255, .82);
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-plan-tab--add {
    min-width: 58px;
    flex: 0 0 58px;
    place-items: center;
    border-style: dashed;
    color: #197d77;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor > .advanced-plan-card.is-collapsed,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor > [data-mobile-collapsed="true"] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor > .advanced-plan-card:not(.is-collapsed) {
    display: block;
    grid-column: 1;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor [data-mobile-plan-toggle],
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .advanced-plan-cell {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .advanced-plan-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 7px;
    padding: 10px 9px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .advanced-plan-line::before {
    content: attr(data-mobile-layer-label);
    grid-column: 1 / -1;
    order: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8eff1;
    color: #1f504f;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field {
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="materialId"] {
    grid-column: 1 / -1;
    order: 1;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="name"] { order: 2; }
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="thicknessMm"] { order: 3; }
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="unitPrice"] { order: 4; }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="upliftPercent"],
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="correctionK"],
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="lambdaPrime"],
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="structureUnitPrice"] { order: 5; }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .optimized-table-field[data-mobile-field-kind="correctionB"] { order: 6; }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor input,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor select,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .hh-mobile-select-trigger {
    width: 100%;
    min-height: 43px;
    font-size: 14px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .advanced-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: 20;
    margin-top: 2px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .hh-mobile-single-plan-editor .advanced-plan-line.is-child .advanced-row-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-number-stepper {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    order: 15;
    padding: 8px;
    border: 1px solid #cfe1e3;
    border-radius: 9px;
    background: #f3f8f8;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-number-stepper:not(.is-active) { display: none; }
  body.hh-mobile-active .hh-mobile-content .hh-mobile-number-stepper.is-active { display: grid; }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-number-stepper > span {
    grid-column: 1 / -1;
    color: #527078;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-number-stepper > button {
    min-width: 0;
    min-height: 40px;
    padding: 6px 3px;
    border: 1px solid #b8d2d3;
    border-radius: 8px;
    color: #176f6b;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-content #hotOptSchemeCard > .result-card-head h3,
  body.hh-mobile-active .hh-mobile-content #coldOptSchemeCard > .result-card-head h3,
  body.hh-mobile-active .hh-mobile-content #hotOptAddPlan,
  body.hh-mobile-active .hh-mobile-content #coldOptAddPlan,
  body.hh-mobile-active .hh-mobile-content #hotOptRecalc,
  body.hh-mobile-active .hh-mobile-content #coldOptRecalc {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content #hotOptSchemeCard > .result-card-head .result-actions,
  body.hh-mobile-active .hh-mobile-content #coldOptSchemeCard > .result-card-head .result-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Optimized modules use the shared-row matrix below.  Keeping the former
     independent cards hidden removes unequal row heights and visual drift. */
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-cards {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-result-pager:has(+ .optimized-result-cards) {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-result-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 6px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-result-cards.hh-mobile-scroll-results {
    display: flex;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-result-cards.hh-mobile-scroll-results > .scheme-result-card {
    flex: 0 0 calc((100% - 12px) / 3);
    scroll-snap-align: start;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary {
    min-width: 0;
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 11px;
    overflow: hidden;
    border: 1px solid #d9e4e9;
    border-radius: 11px;
    background: linear-gradient(180deg, #fbfdfd, #f5f9fa);
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > header,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > p {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 9px;
    margin: 0;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > header strong {
    color: #213842;
    font-size: 14px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > header span,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > p span {
    color: #60727c;
    font-size: 11px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > header span {
    min-width: 0;
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > p {
    padding-top: 8px;
    border-top: 1px solid #e0e9ed;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > p strong {
    color: #275c59;
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-summary > .optimized-mobile-standard-warning {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: start;
    border-top-color: #efc7ae;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-standard-warning strong {
    color: #a45127;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-standard-warning small {
    grid-column: 1 / -1;
    color: #805039;
    font-size: 11px;
    line-height: 1.5;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-grid > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 7px;
    border-radius: 8px;
    background: #fff;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-grid span {
    color: #6a7a83;
    font-size: 11px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-input-grid strong {
    min-width: 0;
    color: #243943;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* Every metric is one shared row.  Grid-auto columns make one-, two- and
     three-plan pages use the available width without leaving empty tracks. */
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison {
    min-width: 0;
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison.optimized-mobile-comparison--paged {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison--paged > .optimized-mobile-comparison__group {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8e3e8;
    border-radius: 11px;
    background: #fff;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__group--1 {
    --mobile-plan-count: 1;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__group--2 {
    --mobile-plan-count: 2;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__group--3 {
    --mobile-plan-count: 3;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__page {
    margin: 0;
    padding: 7px 9px;
    color: #5d707a;
    border-bottom: 1px solid #e2e9ed;
    background: #f7fafb;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row {
    min-width: 0;
    display: grid;
    grid-template-columns:
      minmax(68px, .82fr)
      repeat(var(--mobile-plan-count, 3), minmax(0, 1fr));
    align-items: stretch;
    border-top: 1px solid #e5ecef;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row:first-of-type {
    border-top: 0;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row > span,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row > strong,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row > div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row > span {
    justify-content: flex-start;
    color: #5b6d77;
    background: #f6f9fa;
    font-weight: 750;
    text-align: left;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row > strong,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row > div {
    color: #223740;
    border-left: 1px solid #e5ecef;
    font-weight: 800;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__head {
    border-top: 0;
    background: #edf6f5;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__head > span,
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__head > strong {
    min-height: 42px;
    color: #225d59;
    background: #edf6f5;
    font-size: 12px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row i {
    flex: 0 0 auto;
    margin: 0 1px;
    color: #83939b;
    font-style: normal;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .optimized-mobile-material {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* A multi-layer structure must remain readable inside each of the three
     narrow comparison columns.  Stack its inner-to-outer materials instead
     of squeezing every material and arrow onto one horizontal line. */
  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .optimized-mobile-material-chain {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .optimized-mobile-material-chain > i {
    height: 12px;
    margin: 0;
    font-size: 0;
    line-height: 12px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .optimized-mobile-material-chain > i::after {
    content: "↓";
    font-size: 10px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row small {
    color: #687a83;
    font-size: 10px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .pill {
    max-width: 100%;
    padding: 3px 5px;
    white-space: normal;
    font-size: 10px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .optimized-interface-list {
    width: 100%;
    align-items: center;
    gap: 2px;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__row .optimized-interface-list > span {
    width: 100%;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__warnings {
    display: grid;
    gap: 5px;
    padding: 9px;
    border-top: 1px solid #efd9bd;
    color: #8c4c22;
    background: #fff8ee;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-mobile-comparison__warnings p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  /* Professional results: up to three plans share the phone width.  A fourth
     plan deliberately keeps the wide table and owns its horizontal gesture. */
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-1,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-2,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-1 thead th:first-child,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-2 thead th:first-child,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 thead th:first-child,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-1 tbody > tr:not(.optimized-professional-group) > th,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-2 tbody > tr:not(.optimized-professional-group) > th,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 tbody > tr:not(.optimized-professional-group) > th {
    position: static;
    left: auto;
    width: 76px;
    min-width: 76px;
    max-width: 76px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-1 th,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-1 td,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-2 th,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-2 td,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 th,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 td {
    min-width: 0;
    padding: 6px 3px;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 9.5px;
    line-height: 1.35;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 thead th,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 tbody > tr:not(.optimized-professional-group) > th {
    font-size: 9.5px;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-1 .optimized-professional-cell-note,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-2 .optimized-professional-cell-note,
  body.hh-mobile-active .hh-mobile-content .optimized-professional-plan-count-3 .optimized-professional-cell-note {
    font-size: 8.5px;
    line-height: 1.3;
  }

  body.hh-mobile-active .hh-mobile-content .optimized-professional-scroll {
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-result-pager {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: center;
    margin: 3px 0 8px;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-result-pager span {
    color: var(--hh-mobile-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-result-pager button {
    min-height: 34px;
    padding: 0;
    border-radius: 999px;
    font-size: 22px;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-paged-results > [hidden] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-list,
  body.hh-mobile-active .hh-mobile-content .zhu-history {
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-item {
    min-width: 0;
    padding: 10px;
    border-radius: 11px;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-head {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-head > .history-sequence {
    flex: 0 0 auto;
  }

  body.hh-mobile-active .hh-mobile-content .history-sequence {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    min-height: 25px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #216e69;
    background: #e6f3f1;
    font-size: 11px;
    font-weight: 900;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-head > strong,
  body.hh-mobile-active .hh-mobile-content .scheme-history-head > .history-title-input {
    flex: 1 1 calc(100% - 42px);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-head > button {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 7px 6px;
    white-space: normal;
    font-size: 11px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-head > button.primary {
    flex-basis: 100%;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-title-row {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-title-row > span {
    text-align: left;
  }

  body.hh-mobile-active .hh-mobile-content .scheme-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.5;
  }

  body.hh-mobile-active .hh-mobile-content .history-badge {
    min-height: 21px;
    padding: 2px 6px;
    font-size: 10px;
  }

  body.hh-mobile-active .hh-mobile-content .history-pagination {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 9px 0;
    padding: 8px;
  }

  body.hh-mobile-active .hh-mobile-content .history-pagination-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.hh-mobile-active .hh-mobile-content .history-pagination-options label {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px;
  }

  body.hh-mobile-active .hh-mobile-content .history-pagination-options select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
  }

  body.hh-mobile-active .hh-mobile-content .history-pagination-nav {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
    gap: 6px;
  }

  body.hh-mobile-active .hh-mobile-content .history-pagination-nav > button {
    min-height: 36px;
  }

  body.hh-mobile-active .hh-mobile-content .history-page-numbers {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-content .history-page-compact {
    display: grid;
    place-items: center;
    min-width: 72px;
    font-size: 11px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-result-card {
    min-width: 0;
    padding: 8px;
    border-radius: 11px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card header,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-result-card-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card header > strong,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-result-card-head strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card p,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-material-line {
    display: -webkit-box;
    margin: 6px 0 3px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card > small,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .scheme-result-card-head span {
    font-size: 11px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card-grid,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .mobile-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin-top: 7px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card-grid > div,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .mobile-result-grid > div {
    min-width: 0;
    padding: 6px;
    border-radius: 7px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card-grid span,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .mobile-result-grid span {
    margin: 0 0 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-result-card-grid strong,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .mobile-result-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.3;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .kpis,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .kpi-grid,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .compact-kpis,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .kpi {
    min-width: 0;
    min-height: 0;
    padding: 8px 6px;
    border-radius: 9px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .kpi span,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .kpi small {
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .kpi strong {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.25;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-results-card {
    min-width: 0;
    overflow: visible;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-results-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-summary,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-plan-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-plan-tabs {
    top: calc(var(--hh-mobile-header-height) + var(--hh-mobile-tabs-height) + env(safe-area-inset-top) + 4px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 10px 0;
    padding: 5px 0;
    z-index: 20;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-plan-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 7px 5px;
    font-size: 11px;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-scenario-grid,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-node-details > summary {
    min-height: 44px;
    align-items: center;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-node-table-scroll {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .segmented-table-scroll-hint {
    font-size: 11px;
    line-height: 1.4;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-full-details {
    margin-top: 9px;
    border: 1px solid #dbe5ea;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-full-details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px;
  }

  body.hh-mobile-active .hh-mobile-content [data-mobile-section="results"] .optimized-full-details[open] > summary {
    margin: 0;
    border-bottom: 1px solid #e4ebef;
  }

  body.hh-mobile-active .hh-mobile-content .table-wrap,
  body.hh-mobile-active .hh-mobile-content .advanced-plan-table,
  body.hh-mobile-active .hh-mobile-content .lifecycle-chart-scroll,
  body.hh-mobile-active .hh-mobile-content .lifecycle-timeline {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Material-quantity layers are editable cards on phones, not an 8-column
     spreadsheet that hides uplift and installation price off-screen. */
  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-results .material-layer-card,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="results"] .material-layer-card {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-parameters .material-layer-card,
  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-plans .material-layer-card,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="parameters"] .material-layer-card,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="plans"] .material-layer-card {
    display: block;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-title-desktop,
  body.hh-mobile-active.hh-mobile-route-material .material-layer-title-mobile {
    display: none;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-parameters .material-layer-title-usage,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="parameters"] .material-layer-title-usage,
  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-plans .material-layer-title-construction,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="plans"] .material-layer-title-construction {
    display: inline;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table {
    overflow: visible;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table table,
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table thead {
    display: none;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 8px;
    width: 100%;
    margin: 0 0 10px;
    padding: 11px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #f8fbfc;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td {
    min-width: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 4px;
    align-content: start;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td::before {
    color: #667985;
    font-size: 11px;
    line-height: 1.2;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(1),
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(2),
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(8),
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="identity"],
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="material"],
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="actions"] {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(1)::before { content: "层级"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(2)::before { content: "材料"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(3)::before { content: "本层总厚度(mm)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(4)::before { content: "单层厚度(mm)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(5)::before { content: "材料单价(元/m³)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(6)::before { content: "采购上浮量(%)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table td:nth-child(7)::before { content: "施工单价(元/m³)"; }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="identity"]::before { content: "层级"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="material"]::before { content: "材料"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="thickness"]::before { content: "本层总厚度(mm)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="sheetThickness"]::before { content: "单层厚度(mm)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="price"]::before { content: "材料单价(元/m³)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="uplift"]::before { content: "采购上浮量(%)"; }
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table [data-material-field="install"]::before { content: "施工单价(元/m³)"; }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-parameters .material-layer-input-table [data-material-field="install"],
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="parameters"] .material-layer-input-table [data-material-field="install"] {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-plans .material-layer-input-table [data-material-field]:not([data-material-field="identity"]):not([data-material-field="material"]):not([data-material-field="install"]),
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="plans"] .material-layer-input-table [data-material-field]:not([data-material-field="identity"]):not([data-material-field="material"]):not([data-material-field="install"]) {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-plans .material-layer-input-table tr,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="plans"] .material-layer-input-table tr {
    grid-template-columns: 1fr;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-plans .material-layer-input-table [data-material-field="install"],
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="plans"] .material-layer-input-table [data-material-field="install"] {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-plans .material-layer-card > .result-card-head .result-actions,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="plans"] .material-layer-card > .result-card-head .result-actions {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table input,
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table select,
  body.hh-mobile-active.hh-mobile-route-material .material-layer-input-table button {
    width: 100%;
    min-width: 0;
  }

  /* The shell owns the fixed primary action on phones. */
  body.hh-mobile-active .optimized-mobile-action {
    display: none !important;
  }

  body.hh-mobile-active .optimized-output-actions {
    display: none !important;
  }

  /* Advanced custom keeps its familiar in-page entry.  Material usage instead
     owns a dedicated button after all required usage fields; its desktop
     toolbar must not float above inputs on a phone. */
  body.hh-mobile-active.hh-mobile-route-advanced .scheme-control > .scheme-actions {
    display: flex !important;
    width: 100%;
    margin: 0 0 12px;
    gap: 8px;
  }

  body.hh-mobile-active.hh-mobile-route-advanced .scheme-control > .scheme-actions > * {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-advanced .scheme-control > .scheme-actions > #customAutoSchemes {
    display: inline-flex !important;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-actions {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-mobile-calculate-area {
    display: none !important;
  }

  body.hh-mobile-active.hh-mobile-route-material.hh-mobile-view-parameters .material-mobile-calculate-area,
  body.hh-mobile-active.hh-mobile-route-material .hh-mobile-content[data-mobile-view="parameters"] .material-mobile-calculate-area {
    display: grid !important;
    gap: 8px;
    margin-top: 12px;
  }

  body.hh-mobile-active.hh-mobile-route-material [data-material-mobile-calculate] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  body.hh-mobile-active.hh-mobile-route-material [data-material-validation-summary] {
    margin: 0;
    color: #667985;
    font-size: 12px;
    line-height: 1.5;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card .table-wrap {
    overflow: visible;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card .material-subhead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card .material-subhead > div,
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card .material-subhead .note {
    width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card .material-subhead > button {
    width: 100%;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card table,
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card thead {
    display: none;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 8px;
    margin: 0 0 10px;
    padding: 11px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #f8fbfc;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 0;
    border: 0;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td::before {
    color: #667985;
    font-size: 11px;
    line-height: 1.2;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(1),
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(5),
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(6) {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(1)::before { content: "名称"; }
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(2)::before { content: "数量"; }
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(3)::before { content: "单位"; }
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(4)::before { content: "施工单价"; }
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card td:nth-child(5)::before { content: "计价状态"; }

  body.hh-mobile-active.hh-mobile-route-material .material-construction-card input,
  body.hh-mobile-active.hh-mobile-route-material .material-construction-card button {
    width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active #hotOptRecalcParameters {
    display: none !important;
  }

  body.hh-mobile-active .result-actions-sticky {
    position: static;
  }

  body.hh-mobile-active .optimized-output-actions {
    top: calc(var(--hh-mobile-header-height) + env(safe-area-inset-top) + 6px);
  }

  body.hh-mobile-active .hh-mobile-content .optimized-calculation-source {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* Parameter and chart tooltips become reachable bottom sheets. */
  body.hh-mobile-active .optimized-parameter-tooltip,
  body.hh-mobile-active .lifecycle-cursor-tooltip {
    z-index: 1100;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(58dvh, 430px);
    padding:
      16px
      max(16px, env(safe-area-inset-right))
      calc(18px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 18px 18px 0 0;
    color: #eef7f6;
    background: rgba(31, 53, 61, .985);
    box-shadow: 0 -18px 55px rgba(11, 27, 36, .32);
    font-size: 13px;
    line-height: 1.65;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 105%, 0) !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .16s ease;
  }

  body.hh-mobile-active .lifecycle-cursor-tooltip {
    padding-right: max(64px, calc(16px + env(safe-area-inset-right)));
  }

  body.hh-mobile-active .optimized-parameter-tooltip {
    padding-top: 52px;
  }

  body.hh-mobile-active .optimized-parameter-tooltip__close {
    position: absolute;
    top: 8px;
    right: max(10px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    font-size: 25px;
    line-height: 1;
    touch-action: manipulation;
  }

  body.hh-mobile-active .lifecycle-cursor-tooltip-close {
    position: absolute;
    top: 10px;
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    touch-action: manipulation;
  }

  body.hh-mobile-active .lifecycle-cursor-tooltip-close:hover,
  body.hh-mobile-active .lifecycle-cursor-tooltip-close:focus-visible {
    border-color: rgba(255, 255, 255, .56);
    background: rgba(255, 255, 255, .2);
  }

  body.hh-mobile-active .optimized-parameter-tooltip::before,
  body.hh-mobile-active .lifecycle-cursor-tooltip::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: -8px auto 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
  }

  body.hh-mobile-active .optimized-parameter-tooltip::after {
    display: none !important;
  }

  body.hh-mobile-active .optimized-parameter-tooltip.is-visible,
  body.hh-mobile-active .lifecycle-cursor-tooltip.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
  }

  body.hh-mobile-active .parameter-help::after {
    display: none;
  }

  /* Toasts stay above the five-slot bar and never block touches. */
  body.hh-mobile-active .hh-mobile-toast,
  body.hh-mobile-active .app-toast,
  body.hh-mobile-active .toast {
    position: fixed;
    z-index: 1120;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--hh-mobile-nav-height) + env(safe-area-inset-bottom) + 10px);
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    max-width: none;
    margin: 0;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    transform: translateY(10px);
  }

  body.hh-mobile-active .hh-mobile-toast {
    display: block;
    visibility: hidden;
    color: #fff;
    background: rgba(25, 48, 57, .96);
    box-shadow: 0 12px 34px rgba(15, 32, 41, .24);
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }

  body.hh-mobile-active .hh-mobile-toast.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body.hh-mobile-active .app-toast.is-visible,
  body.hh-mobile-active .toast.show {
    transform: translateY(0);
  }

  body.hh-mobile-active .hh-mobile-save-dialog {
    position: fixed;
    z-index: 1500;
    top: var(--hh-mobile-viewport-offset, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--hh-mobile-viewport-height, calc(100dvh - var(--hh-mobile-keyboard-inset, 0px)));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
      max(14px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    overflow: hidden;
  }

  body.hh-mobile-active .hh-mobile-save-dialog[hidden] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(12, 28, 36, .58);
    box-shadow: none;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card {
    position: relative;
    width: min(100%, 480px);
    max-height: calc(var(--hh-mobile-viewport-height, 100dvh) - 28px - env(safe-area-inset-top));
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 72px rgba(8, 25, 34, .32);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card small,
  body.hh-mobile-active .hh-mobile-save-dialog__card h2,
  body.hh-mobile-active .hh-mobile-save-dialog__card p {
    margin: 0;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card small {
    color: #1f7a75;
    font-size: 11px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card h2 {
    margin-top: 3px;
    color: #1b303a;
    font-size: 19px;
    line-height: 1.35;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card label {
    color: #38515d;
    font-size: 12px;
    font-weight: 800;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #b9ccd4;
    border-radius: 10px;
    color: #1c3039;
    background: #fff;
    font-size: 15px;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__card p {
    color: #6b7b84;
    font-size: 11px;
    line-height: 1.45;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body.hh-mobile-active .hh-mobile-save-dialog__actions button {
    min-height: 44px;
    margin: 0;
  }

  body.hh-mobile-active.hh-mobile-save-dialog-open {
    overflow: hidden;
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-save-dialog {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-save-dialog__card {
    max-height: calc(var(--hh-mobile-viewport-height, calc(100dvh - var(--hh-mobile-keyboard-inset, 0px))) - 16px - env(safe-area-inset-top));
    gap: 7px;
    padding: 13px;
    border-radius: 14px;
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-save-dialog__card p {
    display: none;
  }

  /* Dialogs respect notches and the dynamic phone viewport. */
  body.hh-mobile-active .app-dialog-modal,
  body.hh-mobile-active .report-modal {
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  body.hh-mobile-active .app-dialog-shell,
  body.hh-mobile-active .report-dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
  }

  /* Visual Viewport keyboard state is managed by mobile-workspace.js. */
  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 110%, 0);
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-save-current,
  body.hh-mobile-active.hh-mobile-save-dialog-open .hh-mobile-save-current {
    visibility: hidden;
    pointer-events: none;
  }

  body.hh-mobile-active.hh-mobile-keyboard-open #content.hh-mobile-content {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-sheet {
    max-height: calc(100dvh - 6px);
    padding-bottom: 10px;
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .hh-mobile-toast,
  body.hh-mobile-active.hh-mobile-keyboard-open .app-toast,
  body.hh-mobile-active.hh-mobile-keyboard-open .toast {
    bottom: 8px;
  }

  body.hh-mobile-active.hh-mobile-keyboard-open .optimized-output-actions,
  body.hh-mobile-active.hh-mobile-keyboard-open .result-actions-sticky {
    position: static;
  }

  /* Long option names use a phone-native bottom picker instead of a clipped select. */
  body.hh-mobile-active .hh-mobile-content .hh-mobile-long-select {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-select-enhanced-field {
    position: relative;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-long-select-field {
    grid-column: 1 / -1;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-select-trigger {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    height: auto;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #cfdce2;
    border-radius: 9px;
    color: #213640;
    background: #fff;
    box-shadow: none;
    overflow: visible;
    text-align: left;
    white-space: normal;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-select-trigger strong {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-select-trigger > span {
    padding: 4px 7px;
    border-radius: 7px;
    color: #1d746e;
    background: #e7f3f1;
    font-size: 10px;
    font-weight: 800;
  }

  body.hh-mobile-active .hh-mobile-content .hh-mobile-select-trigger--compact > span {
    width: 18px;
    padding: 0;
    color: var(--thermal-deep, #1d746e);
    background: transparent;
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-select-sheet {
    max-height: min(88dvh, 760px);
  }

  body.hh-mobile-active .hh-mobile-select-options {
    display: grid;
    align-content: start;
    gap: 8px;
    padding-bottom: 4px;
  }

  body.hh-mobile-active .hh-mobile-select-option {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #dae4e9;
    border-radius: 11px;
    color: #2c414b;
    background: #fff;
    box-shadow: none;
    text-align: left;
  }

  body.hh-mobile-active .hh-mobile-select-option strong,
  body.hh-mobile-active .hh-mobile-select-option small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.hh-mobile-active .hh-mobile-select-option strong {
    font-size: 14px;
    line-height: 1.4;
  }

  body.hh-mobile-active .hh-mobile-select-option small {
    margin-top: 3px;
    color: #6a7b84;
    font-size: 11px;
    line-height: 1.35;
  }

  body.hh-mobile-active .hh-mobile-select-option i {
    width: 20px;
    height: 20px;
    border: 2px solid #b9c7ce;
    border-radius: 50%;
  }

  body.hh-mobile-active .hh-mobile-select-option.is-selected {
    color: #176a65;
    border-color: #9fcac4;
    background: #edf7f5;
  }

  body.hh-mobile-active .hh-mobile-select-option.is-selected i {
    border: 6px solid #25837c;
    background: #fff;
  }

  /* Exporting an image is a deliberate, full-screen task on phones. */
  body.hh-mobile-active .hh-mobile-image-progress {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(10, 23, 31, .72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  body.hh-mobile-active .hh-mobile-image-progress.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  body.hh-mobile-active .hh-mobile-image-progress[hidden] {
    display: none !important;
  }

  body.hh-mobile-active .hh-mobile-image-progress__card {
    width: min(100%, 340px);
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 25px 22px 22px;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 20px;
    color: #21343e;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 80px rgba(4, 16, 23, .34);
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-image-progress__mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #e7f3f1;
  }

  body.hh-mobile-active .hh-mobile-image-progress__mark span {
    width: 24px;
    height: 24px;
    border: 3px solid #a7d0cb;
    border-top-color: #1f7a75;
    border-radius: 50%;
    animation: hh-mobile-image-spin .8s linear infinite;
  }

  body.hh-mobile-active .hh-mobile-image-progress.is-complete .hh-mobile-image-progress__mark span {
    border: 0;
    animation: none;
  }

  body.hh-mobile-active .hh-mobile-image-progress.is-complete .hh-mobile-image-progress__mark span::before {
    content: "✓";
    color: #1f7a75;
    font-size: 26px;
    font-weight: 900;
  }

  body.hh-mobile-active .hh-mobile-image-progress.is-error .hh-mobile-image-progress__mark span {
    border: 0;
    animation: none;
  }

  body.hh-mobile-active .hh-mobile-image-progress.is-error .hh-mobile-image-progress__mark span::before {
    content: "!";
    color: #b74a3e;
    font-size: 27px;
    font-weight: 900;
  }

  body.hh-mobile-active .hh-mobile-image-progress__card > strong {
    font-size: 18px;
    line-height: 1.35;
  }

  body.hh-mobile-active .hh-mobile-image-progress__card > p {
    min-height: 20px;
    margin: 0;
    color: #667780;
    font-size: 13px;
    line-height: 1.5;
  }

  body.hh-mobile-active .hh-mobile-image-progress__track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5ecef;
  }

  body.hh-mobile-active .hh-mobile-image-progress__track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #279188, #1f746f);
    transition: width .24s ease;
  }

  body.hh-mobile-active .hh-mobile-image-progress__percent {
    color: #1f746f;
    font-size: 12px;
    font-weight: 850;
  }

  body.hh-mobile-active .hh-mobile-image-progress__card > button {
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #344b57;
    font-weight: 800;
  }

  body.hh-mobile-active.hh-mobile-image-busy {
    overflow: hidden;
  }

  /* Cold result hierarchy: conclusion, constraint cards, plan matrix, then
     the saved input summary and professional detail pages. */
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > #coldOptStale { order: 0; }
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .optimized-status-strip { order: 10; }
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .hh-mobile-cold-check-overview { order: 20; }
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .optimized-mobile-comparison { order: 30; }
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .optimized-mobile-input-summary { order: 40; }
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .optimized-full-details,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .optimized-detail-list,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] #coldOptResultBody > .optimized-visuals { order: 50; }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview > article {
    min-width: 0;
    min-height: 66px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 8px 5px;
    border: 1px solid #c9e0ed;
    border-radius: 10px;
    background: #f5fbff;
    text-align: center;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview span {
    color: #577181;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview strong {
    color: #1f628c;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview [data-mobile-check-tone="pass"] {
    border-color: #b8ddce;
    background: #f1faf6;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview [data-mobile-check-tone="pass"] strong {
    color: #1f7457;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview [data-mobile-check-tone="fail"] {
    border-color: #efc8c3;
    background: #fff5f3;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview [data-mobile-check-tone="fail"] strong {
    color: #a13d32;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview [data-mobile-check-tone="muted"] {
    border-color: #d7e0e5;
    background: #f7f9fa;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-cold-check-overview [data-mobile-check-tone="muted"] strong {
    color: #6a7b84;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .optimized-mobile-comparison__head,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .optimized-mobile-comparison__head > span,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .optimized-mobile-comparison__head > strong {
    color: #1f628c;
    background: #eaf6fd;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-plan-tab.is-active {
    border-color: #1f628c;
    background: linear-gradient(145deg, #2f87b8, #1f628c);
    box-shadow: 0 5px 12px rgba(31, 98, 140, .18);
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-plan-tab--add,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] [data-mobile-section="plans"] .hh-mobile-single-plan-editor .advanced-plan-line::before {
    color: #1f628c;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-number-stepper {
    border-color: #c7dfec;
    background: #f2f9fd;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="cold"] .hh-mobile-number-stepper > button {
    border-color: #b8d5e5;
    color: #1f628c;
  }

  /* Critical plan names and summaries wrap instead of disappearing behind ellipses. */
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-cell strong,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .scheme-plan-config-head strong,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .advanced-plan-cell span,
  body.hh-mobile-active .hh-mobile-content [data-mobile-section="plans"] .scheme-plan-config-head span,
  body.hh-mobile-active .hh-mobile-content [data-mobile-plan-toggle] > span {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  @keyframes hh-mobile-image-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes hh-mobile-route-in {
    from { opacity: .45; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Coarse-pointer phone landscape: reclaim vertical space without shrinking taps. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  html[data-hh-mobile-workspace="active"] {
    --hh-mobile-header-height: 46px;
    --hh-mobile-tabs-height: 38px;
    --hh-mobile-nav-height: 54px;
    --hh-mobile-edge: 8px;
  }

  body.hh-mobile-active .hh-mobile-header {
    grid-template-rows: minmax(0, 1fr);
    padding-top: calc(4px + env(safe-area-inset-top));
    padding-bottom: 4px;
  }

  body.hh-mobile-active .hh-mobile-header__scene {
    grid-row: 1;
    min-height: 36px;
    grid-template-rows: minmax(0, 1fr);
  }

  body.hh-mobile-active .hh-mobile-header__eyebrow {
    display: none;
  }

  body.hh-mobile-active .hh-mobile-header__title {
    grid-row: 1;
    margin: 0;
    font-size: 15px;
  }

  body.hh-mobile-active .hh-mobile-header__chevron {
    grid-row: 1;
  }

  body.hh-mobile-active .hh-mobile-header__status {
    grid-row: 1;
    min-height: 24px;
  }

  body.hh-mobile-active .hh-mobile-header__tools {
    grid-row: 1;
  }

  body.hh-mobile-active .hh-mobile-view-tabs {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  body.hh-mobile-active .hh-mobile-view-tabs > button {
    min-height: 32px;
  }

  body.hh-mobile-active .hh-mobile-nav {
    padding-top: 3px;
    padding-bottom: max(3px, env(safe-area-inset-bottom));
  }

  body.hh-mobile-active .hh-mobile-nav__item {
    min-height: 44px;
    display: grid;
    grid-template-columns: 18px minmax(0, auto);
    align-content: center;
    justify-content: center;
    gap: 4px;
    font-size: 9px;
  }

  body.hh-mobile-active .hh-mobile-nav__item::before {
    width: 18px;
    height: 18px;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }

  body.hh-mobile-active .hh-mobile-nav__item.is-primary {
    min-height: 46px;
    transform: translateY(-2px);
  }

  body.hh-mobile-active .hh-mobile-sheet {
    max-height: calc(100dvh - 6px);
    border-radius: 16px 16px 0 0;
  }

  body.hh-mobile-active .hh-mobile-sheet[data-mobile-sheet="scene"] .hh-mobile-sheet__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 7px;
  }

  body.hh-mobile-active .hh-mobile-route-option {
    min-height: 44px;
    margin: 0;
  }

  body.hh-mobile-active .optimized-parameter-tooltip,
  body.hh-mobile-active .lifecycle-cursor-tooltip {
    max-height: min(72dvh, 390px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hh-mobile-workspace.hh-mobile-shell *,
  #hh-mobile-workspace.hh-mobile-shell *::before,
  #hh-mobile-workspace.hh-mobile-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 360px) {
  body.hh-mobile-active .hh-mobile-header__status { display: none; }
}

@media (max-width: 520px) {
  body.hh-mobile-active .hh-mobile-header__tools {
    grid-template-columns: repeat(3, 25px);
    gap: 3px;
  }

  body.hh-mobile-active .hh-mobile-header__tools > button {
    width: 25px;
    min-width: 25px;
    height: 25px;
    min-height: 25px;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .zhu-opt-workbench[data-mobile-goal-driven] > [data-mobile-convergence-first][data-mobile-segmented-state-target] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "goal-mode"
      "goal-title"
      "goal-select"
      "goal-target"
      "goal-action"
      "goal-error";
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] > #hotOptAuto {
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.2;
    text-wrap: balance;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] .zhu-opt-target-field,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] [data-mobile-convergence-first][data-mobile-segmented-state-target] .segmented-target-control {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) > .field {
    grid-column: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) > .field > label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) > .field > input {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) > .field > .unit {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) > .steam-state-chain {
    grid-column: 1;
    justify-self: center;
    transform: rotate(90deg);
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind="hot"] .steam-state-link:not([hidden]) > .steam-state-link-status {
    grid-column: 1;
  }
}

/* Phone thermal themes. Status and warning colors remain semantic. */
@media (max-width: 760px),
  (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  body.hh-mobile-active {
    --thermal-primary: #1F7A75;
    --thermal-deep: #175F5B;
    --thermal-soft: #E8F4F2;
    --thermal-tint: #F5FBFA;
    --thermal-line: #C9E3DE;
    --thermal-shadow: rgba(31, 122, 117, .16);
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind="hot"]) {
    --thermal-primary: #C64B2F;
    --thermal-deep: #9F3424;
    --thermal-soft: #FFF0EB;
    --thermal-tint: #FFF8F5;
    --thermal-line: #E9C1B5;
    --thermal-shadow: rgba(159, 52, 36, .16);
    --hh-mobile-accent: #C64B2F;
    --hh-mobile-accent-soft: #FFF0EB;
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind="cold"]) {
    --thermal-primary: #2477A8;
    --thermal-deep: #1F628C;
    --thermal-soft: #EAF6FD;
    --thermal-tint: #F5FBFF;
    --thermal-line: #B9D9EC;
    --thermal-shadow: rgba(31, 98, 140, .16);
    --hh-mobile-accent: #2477A8;
    --hh-mobile-accent-soft: #EAF6FD;
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-header {
    border-bottom-color: var(--thermal-line);
    background: color-mix(in srgb, var(--thermal-tint) 92%, transparent);
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-header__title {
    position: relative;
    padding-right: 21px;
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-header__title::after {
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--thermal-deep);
    font-size: 15px;
    line-height: 1;
    transform: translateY(-50%);
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind="hot"]) .hh-mobile-header__title::after { content: "🔥"; }
  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind="cold"]) .hh-mobile-header__title::after { content: "❄"; }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-view-tabs {
    border-bottom-color: var(--thermal-line);
    background: color-mix(in srgb, var(--thermal-tint) 94%, transparent);
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-view-tabs > button.is-active {
    border-color: var(--thermal-deep);
    background: linear-gradient(180deg, var(--thermal-primary), var(--thermal-deep));
    box-shadow: 0 4px 11px var(--thermal-shadow);
  }

  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-nav__item.is-primary,
  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-nav__item.is-primary:hover,
  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-nav__item.is-primary:focus-visible,
  body.hh-mobile-active:has(.hh-mobile-content[data-mobile-kind]) .hh-mobile-nav__item.is-primary.is-active {
    color: #fff;
    background: linear-gradient(180deg, var(--thermal-primary), var(--thermal-deep));
    box-shadow: 0 7px 17px var(--thermal-shadow);
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .card,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .hh-mobile-parameter-module {
    border-color: color-mix(in srgb, var(--thermal-line) 72%, var(--hh-mobile-line));
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .card > h3:first-child::before,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .result-card-head h3::before {
    background: var(--thermal-primary);
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .hh-mobile-parameter-module > summary::after,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .section-label,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .zhu-opt-standard strong {
    color: var(--thermal-deep);
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] input:focus,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] textarea:focus,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] select:focus {
    border-color: var(--thermal-primary);
    box-shadow: 0 0 0 3px var(--thermal-shadow);
  }

  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] button.primary,
  body.hh-mobile-active .hh-mobile-content[data-mobile-kind] .zhu-opt-primary {
    border-color: var(--thermal-deep);
    color: #fff;
    background: linear-gradient(180deg, var(--thermal-primary), var(--thermal-deep));
    box-shadow: 0 7px 17px var(--thermal-shadow);
  }

  body.hh-mobile-active .hh-mobile-route-group:has([data-mobile-route^="hot_"]) h3,
  body.hh-mobile-active [data-mobile-route^="hot_"] .hh-mobile-route-option__mark {
    color: #9F3424;
  }

  body.hh-mobile-active [data-mobile-route^="hot_"] .hh-mobile-route-option__mark {
    border-color: #E9C1B5;
    background: #FFF0EB;
  }

  body.hh-mobile-active [data-mobile-route^="hot_"].is-current {
    color: #9F3424;
    border-color: #E9C1B5;
    background: #FFF8F5;
  }

  body.hh-mobile-active [data-mobile-route^="hot_"].is-current::after {
    border-color: #C64B2F;
  }

  body.hh-mobile-active .hh-mobile-route-group:has([data-mobile-route^="cold_"]) h3,
  body.hh-mobile-active [data-mobile-route^="cold_"] .hh-mobile-route-option__mark {
    color: #1F628C;
  }

  body.hh-mobile-active [data-mobile-route^="cold_"] .hh-mobile-route-option__mark {
    border-color: #B9D9EC;
    background: #EAF6FD;
  }

  body.hh-mobile-active [data-mobile-route^="cold_"].is-current {
    color: #1F628C;
    border-color: #B9D9EC;
    background: #F5FBFF;
  }

  body.hh-mobile-active [data-mobile-route^="cold_"].is-current::after {
    border-color: #2477A8;
  }
}