:root {
        --page-blue: #00adeb;
        --hero-text: #ffffff;
        --glass-bg: rgba(0, 0, 0, 0.32);
        --glass-border: rgba(255, 255, 255, 0.14);
        --card-blue: #1082b8;
        --card-blue-deep: #0d6a96;
        --radius-lg: 26px;
        --radius-xl: 28px;
        --page-pad: 14px;
        --phone-max: 390px;
        --photo-frame-height: clamp(280px, calc(33vh + 5.25rem), 400px);
        --scroll-progress: 0;
        --hero-lift: 0px;
        --hero-photo-url: url('heroes/fallback.jpg');
        /* Weekly day expand/collapse: slower, smooth in-out (no overshoot) */
        --weekly-motion-dur: 0.55s;
        --weekly-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
        /* Match .day-temps: two 0.68rem lines @ line-height 1.15 + 2px gap between hi/lo */
        --day-weekly-temps-slot: calc(2 * 0.68rem * 1.15 + 2px);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        overflow: hidden;
      }

      body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background: var(--page-blue);
        color: var(--hero-text);
        -webkit-font-smoothing: antialiased;
      }

      .shell {
        min-height: 100%;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--page-blue);
      }

      .theme-debug-banner {
        display: none;
        width: 100%;
        max-width: var(--phone-max);
        box-sizing: border-box;
        padding: 8px 12px;
        font-size: 0.72rem;
        font-weight: 400;
        line-height: 1.35;
        color: #1a1a12;
        background: #f5d565;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        text-align: center;
      }

      .theme-debug-banner.is-visible {
        display: block;
      }

      .phone {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: var(--phone-max);
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--page-blue);
        overflow: hidden;
      }

      .phone::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        height: var(--photo-frame-height);
        z-index: 0;
        pointer-events: none;
        background-color: var(--page-blue);
        background-image: var(--hero-photo-url);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        opacity: calc(1 - var(--scroll-progress) * 0.55);
        transition: opacity 0.12s linear;
      }

      .phone::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        height: var(--photo-frame-height);
        z-index: 0;
        pointer-events: none;
        /* Wash photo into page color; stops follow --page-blue (theme-aware) */
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--page-blue) 0%, transparent) 0%,
          color-mix(in srgb, var(--page-blue) 0%, transparent) 18%,
          color-mix(in srgb, var(--page-blue) 5%, transparent) 32%,
          color-mix(in srgb, var(--page-blue) 14%, transparent) 48%,
          color-mix(in srgb, var(--page-blue) 32%, transparent) 62%,
          color-mix(in srgb, var(--page-blue) 58%, transparent) 76%,
          color-mix(in srgb, var(--page-blue) 82%, transparent) 88%,
          var(--page-blue) 100%
        );
      }

      /* Multi-city: main column wrapper (opacity / slide transitions on change) */
      .city-stage {
        position: relative;
        z-index: 1;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: opacity 0.24s ease, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .city-stage.city-stage--leave-next {
        opacity: 0.2;
        transform: translateX(-10%);
      }

      .city-stage.city-stage--leave-prev {
        opacity: 0.2;
        transform: translateX(10%);
      }

      .city-stage.city-stage--enter-reset {
        transition: none;
        opacity: 0.25;
        transform: translateX(12%);
      }

      .city-stage.city-stage--enter-reset.from-prev {
        transform: translateX(-12%);
      }

      .city-bottom-nav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 24;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(
          to top,
          color-mix(in srgb, var(--page-blue) 88%, black) 0%,
          color-mix(in srgb, var(--page-blue) 52%, transparent) 78%,
          color-mix(in srgb, var(--page-blue) 0%, transparent) 100%
        );
        border: none;
        box-shadow: none;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      .city-nav-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        padding: 4px 4px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-tap-highlight-color: transparent;
      }

      .city-nav-dots::-webkit-scrollbar {
        display: none;
      }

      .city-nav-dots.is-single {
        visibility: hidden;
        pointer-events: none;
      }

      .city-nav-dot {
        flex-shrink: 0;
        width: 5px;
        height: 5px;
        border: none;
        padding: 0;
        margin: 0;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: 0.3s ease width;
      }

      .city-nav-dot.active {
        width: 14px;
        background-color: rgba(255, 255, 255, 0.92);
        cursor: auto;
      }

      #phone.phone--stack-at-top .city-bottom-nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      .city-nav-btn.is-active-tab {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12);
      }

      #cityNavHome.city-nav-btn,
      #cityNavHome.city-nav-btn.is-active-tab,
      #cityNavHome.city-nav-btn:hover,
      #cityNavHome.city-nav-btn:active {
        border-radius: 0;
        background: transparent;
      }

      #cityNavHome.city-nav-btn.is-active-tab,
      #cityNavHome.city-nav-btn:hover,
      #cityNavHome.city-nav-btn:active {
        opacity: 1;
      }

      .city-nav-label {
        font-size: 0.58rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        margin-top: 2px;
        line-height: 1;
      }

      .app-views {
        position: absolute;
        inset: 0;
        z-index: 1;
      }

      .app-view {
        display: none;
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

      .app-view.is-active {
        display: block;
      }

      .app-view-home {
        display: none;
      }

      .app-view-home.is-active {
        display: flex;
        flex-direction: column;
      }

      .settings-view {
        overflow-y: auto;
        padding: calc(12px + env(safe-area-inset-top, 0px)) var(--page-pad)
          calc(88px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
      }

      .settings-title {
        margin: 0 0 16px;
        font-size: 1.35rem;
        font-weight: 600;
        letter-spacing: -0.02em;
      }

      .settings-section {
        margin-bottom: 18px;
        padding: 14px;
        border-radius: 18px;
        background: color-mix(in srgb, var(--page-blue) 42%, rgba(0, 0, 0, 0.35));
        border: 1px solid var(--glass-border);
      }

      .settings-section h3 {
        margin: 0 0 12px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.78;
      }

      .settings-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        font-size: 0.92rem;
      }

      .settings-row:last-child {
        margin-bottom: 0;
      }

      .settings-row select,
      .settings-row input[type='checkbox'] {
        font-family: inherit;
      }

      .settings-row select {
        border-radius: 10px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.35);
        color: #fff;
        padding: 6px 10px;
      }

      .settings-btn {
        width: 100%;
        margin-top: 8px;
        padding: 11px 14px;
        border-radius: 14px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.35);
        color: #fff;
        font-family: inherit;
        font-size: 0.9rem;
        cursor: pointer;
      }

      .radar-map-bento {
        width: 100%;
        height: 168px;
        min-height: 168px;
        z-index: 1;
      }

      .bento-radar-map-wrap .leaflet-container {
        width: 100% !important;
        height: 100% !important;
        background: #0f1720;
      }

      .bento-radar-map-wrap .leaflet-pane,
      .bento-radar-map-wrap .leaflet-tile-pane {
        z-index: 1;
      }

      .bento-radar-map-wrap {
        position: relative;
        width: 100%;
        height: 168px;
        border-radius: 14px;
        overflow: hidden;
        background: #0f1720;
        border: 1px solid rgba(255, 255, 255, 0.08);
        isolation: isolate;
      }

      .radar-map-error {
        position: absolute;
        inset: 0;
        z-index: 600;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 12px;
        text-align: center;
        font-size: 0.72rem;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.88);
        background: rgba(15, 23, 32, 0.92);
        pointer-events: none;
      }

      .bento-radar-map-wrap.is-radar-error .radar-map-error {
        display: flex;
      }

      .bento-radar-gps {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 500;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: #0d6a96;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .bento-radar-attrib {
        margin: 0;
        font-size: 0.58rem;
        line-height: 1.3;
        text-align: center;
        opacity: 0.72;
      }

      .stack-scroll {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      }

      .city-use-location-btn {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.72);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
        color: #fff;
        font-family: inherit;
        font-size: 0.92rem;
        cursor: pointer;
        text-align: left;
        flex-shrink: 0;
      }

      .city-manage-row.is-gps .city-manage-drag {
        visibility: hidden;
      }

      .city-manage-drag {
        flex-shrink: 0;
        width: 18px;
        color: rgba(255, 255, 255, 0.45);
        font-size: 1rem;
        line-height: 1;
        cursor: grab;
        touch-action: none;
        user-select: none;
      }

      .city-manage-row.is-dragging {
        position: relative;
        z-index: 5;
        opacity: 1;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
        transition: none;
        cursor: grabbing;
      }

      .city-manage-list.is-drag-active {
        touch-action: none;
      }

      .city-manage-row.is-dragging .city-manage-drag {
        cursor: grabbing;
      }

      .minute-rain-panel {
        display: none;
        margin: 0 var(--page-pad) 12px;
        padding: 14px 14px 12px;
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--card-blue) 72%, rgba(0, 0, 0, 0.2));
        border: 1px solid var(--glass-border);
      }

      .minute-rain-panel.is-visible {
        display: block;
      }

      .minute-rain-title {
        margin: 0 0 4px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.02em;
      }

      .minute-rain-sub {
        margin: 0 0 10px;
        font-size: 0.76rem;
        opacity: 0.88;
      }

      .minute-rain-chart {
        display: flex;
        align-items: flex-end;
        gap: 2px;
        height: 52px;
      }

      .minute-rain-bar {
        flex: 1;
        min-width: 0;
        border-radius: 2px 2px 0 0;
        background: rgba(130, 200, 255, 0.88);
      }

      .city-nav-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        opacity: 0.7;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.15s ease, background 0.15s ease;
      }

      .city-nav-btn:hover {
        opacity: 0.95;
      }

      .city-nav-btn:active {
        opacity: 1;
        background: rgba(255, 255, 255, 0.06);
      }

      .city-nav-btn .city-nav-ico {
        width: 24px;
        height: 24px;
        color: #fff;
        opacity: 1;
      }

      .city-sheet-backdrop {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 28;
        background: color-mix(in srgb, color-mix(in srgb, var(--page-blue) 42%, black) 72%, transparent);
      }

      .city-sheet-backdrop.is-open {
        display: block;
      }

      /* Full-screen overlays (search + saved cities), aligned with stack card glass */
      .city-sheet {
        display: none;
        position: absolute;
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        box-sizing: border-box;
        width: 100%;
        padding: calc(10px + env(safe-area-inset-top, 0px)) var(--page-pad)
          calc(16px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, color-mix(in srgb, var(--page-blue) 58%, #070a10) 90%, transparent);
        border: none;
        border-radius: 0;
        box-shadow: inset 0 1px 0 var(--glass-border);
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        overflow: hidden;
      }

      .city-sheet.is-open {
        display: flex;
      }

      .city-sheet-head {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        min-height: 44px;
      }

      .city-sheet-head-start,
      .city-sheet-head-end {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
      }

      .city-sheet-head-start {
        justify-content: flex-start;
      }

      .city-sheet-head-end {
        justify-content: flex-end;
      }

      .city-sheet-settings-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.15s ease;
      }

      .city-sheet-settings-btn:hover {
        background: transparent;
        opacity: 0.75;
      }

      .city-sheet-settings-btn svg {
        width: 20px;
        height: 20px;
      }

      #cityManageSheet.is-settings-mode .city-sheet-settings-btn {
        display: none;
      }

      .city-manage-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
        min-height: 0;
        width: 100%;
        position: relative;
      }

      .city-manage-search {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex-shrink: 0;
        width: 100%;
        position: relative;
        z-index: 22;
      }

      .city-manage-body {
        position: relative;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }

      .city-search-focus-layer {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 40;
        box-sizing: border-box;
        pointer-events: none;
      }

      #cityManageSheet.is-search-active .city-search-focus-layer {
        display: block;
        pointer-events: auto;
      }

      #cityManageSheet.is-search-active .city-sheet-head,
      #cityManageSheet.is-search-active .city-manage-search {
        position: relative;
        z-index: 45;
      }

      .city-search-scrim {
        position: absolute;
        inset: 0;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.62);
        cursor: default;
        -webkit-tap-highlight-color: transparent;
      }

      .city-search-dropdown-panel {
        position: absolute;
        left: var(--page-pad);
        right: var(--page-pad);
        top: var(--search-dropdown-top, 8rem);
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 1;
        box-sizing: border-box;
        pointer-events: none;
      }

      .city-search-dropdown {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        box-sizing: border-box;
      }

      #cityManageSheet.is-settings-mode .city-manage-panel {
        display: none;
      }

      .city-manage-settings {
        display: none;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
      }

      #cityManageSheet.is-settings-mode .city-manage-settings {
        display: block;
      }

      .city-manage-settings .settings-section {
        margin-bottom: 12px;
      }

      .city-manage-settings .settings-section:first-child {
        margin-top: 4px;
      }

      .city-sheet-title {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        text-align: center;
        flex: 0 1 auto;
        min-width: 0;
      }

      .city-sheet-back {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        border: none;
        background: none;
        color: rgba(255, 255, 255, 0.92);
        padding: 8px 10px 8px 2px;
        margin: 0;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: -0.01em;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, opacity 0.15s ease;
      }

      .city-sheet-back:hover {
        color: #fff;
        opacity: 1;
      }

      .city-sheet-back:active {
        opacity: 0.85;
      }

      .city-sheet-back svg {
        display: block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }

      .city-search-field {
        width: 100%;
        box-sizing: border-box;
        padding: 13px 15px;
        border-radius: 16px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-family: inherit;
        font-size: 0.95rem;
        flex-shrink: 0;
      }

      #cityManageSheet.is-search-active .city-search-field {
        border-color: rgba(120, 180, 255, 0.72);
        box-shadow: 0 0 0 2px rgba(120, 180, 255, 0.22);
      }

      .city-sheet-msg {
        margin: 0;
        font-size: 0.78rem;
        font-weight: 400;
        color: rgba(255, 200, 200, 0.95);
        min-height: 1.2em;
        flex-shrink: 0;
      }

      .city-search-suggest {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
      }

      .city-suggest-btn {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.72);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
        color: #fff;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }

      .city-suggest-btn:active {
        background: rgba(255, 255, 255, 0.1);
      }

      .city-suggest-main {
        display: block;
      }

      .city-suggest-sub {
        display: block;
        margin-top: 4px;
        font-size: 0.78rem;
        font-weight: 400;
        opacity: 0.72;
      }

      .city-manage-list-scroll {
        flex: 1;
        min-height: 0;
        width: 100%;
        box-sizing: content-box;
        overflow: visible;
        padding: 14px 0;
        background: transparent;
      }

      .city-manage-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .city-manage-hint {
        margin: -4px 0 0;
        font-size: 0.75rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.55);
        text-align: center;
        flex-shrink: 0;
      }

      #cityManageSheet.is-select-mode .city-manage-hint {
        display: none;
      }

      .city-manage-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid var(--glass-border);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        list-style: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.15s ease, background 0.15s ease;
      }

      .city-manage-row.is-active {
        border-color: rgba(255, 255, 255, 0.32);
        background: rgba(255, 255, 255, 0.08);
      }

      .city-manage-row.is-selected {
        border-color: rgba(120, 180, 255, 0.55);
        background: rgba(80, 140, 255, 0.12);
      }

      #cityManageSheet:not(.is-select-mode) .city-manage-check {
        display: none;
      }

      .city-manage-check {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.35);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.15s ease, background 0.15s ease;
      }

      .city-manage-row.is-selected .city-manage-check {
        border-color: rgba(140, 190, 255, 0.95);
        background: rgba(140, 190, 255, 0.35);
      }

      .city-manage-row.is-selected .city-manage-check::after {
        content: '';
        width: 6px;
        height: 10px;
        border: solid rgba(255, 255, 255, 0.95);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(-1px, -1px);
      }

      .city-manage-row-main {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }

      .city-manage-ico {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        object-fit: contain;
      }

      .city-manage-label {
        flex: 1;
        min-width: 0;
        text-align: left;
        font-size: 0.88rem;
        font-weight: 500;
        color: #fff;
        line-height: 1.25;
      }

      .city-manage-label-sub {
        display: block;
        margin-top: 2px;
        font-size: 0.72rem;
        font-weight: 400;
        opacity: 0.78;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .city-manage-meta {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        pointer-events: none;
        text-align: right;
      }

      .city-manage-meta-temp {
        font-size: 0.92rem;
        font-weight: 600;
        color: #fff;
      }

      .city-manage-meta-time {
        font-size: 0.72rem;
        opacity: 0.82;
        color: rgba(255, 255, 255, 0.92);
      }

      .city-manage-bar {
        display: none;
        flex-shrink: 0;
        gap: 10px;
        padding-top: 10px;
        margin-top: auto;
        border-top: 1px solid var(--glass-border);
      }

      #cityManageSheet.is-select-mode .city-manage-bar {
        display: flex;
      }

      .city-manage-bar-cancel,
      .city-manage-bar-remove {
        flex: 1;
        min-height: 46px;
        border-radius: 14px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid var(--glass-border);
        -webkit-tap-highlight-color: transparent;
      }

      .city-manage-bar-cancel {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
      }

      .city-manage-bar-remove {
        background: rgba(255, 90, 90, 0.22);
        color: #ffc9c9;
        border-color: rgba(255, 140, 140, 0.4);
      }

      .city-manage-bar-remove:disabled {
        opacity: 0.38;
        cursor: not-allowed;
      }

      /* Column: hero + stack scroll; only inner stack-scroll scrolls */
      .scroll-stage {
        position: relative;
        z-index: 1;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* Rounded clip for the scrolling stack only (not the hero) */
      .stack-shell {
        position: relative;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 0;

      }

      .stack-scroll {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        isolation: isolate;
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 64px);
        mask-image: linear-gradient(to bottom, transparent, black 64px);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }

      .hero {
        position: sticky;
        top: 0;
        z-index: 8;
        flex-shrink: 0;
        padding: 0;
        background: transparent;
        border-radius: 0 0;
        overflow: hidden;
      }

      .hero-inner {
        position: relative;
        z-index: 1;
        padding: calc(32px + env(safe-area-inset-top, 0px)) 35px 14px 35px;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.34) 0%,
          rgba(0, 0, 0, 0.16) 48%,
          rgba(0, 0, 0, 0.06) 75%,
          transparent 100%
        );
        transform: translateY(calc(-1 * var(--hero-lift)));
        transition: transform 0.14s ease-out;
        will-change: transform;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      .stack-refreshed {
        margin: 0;
        padding: 0 2px 2px 0;
        font-size: 0.68rem;
        font-weight: 300;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.88);
        text-align: right;
        letter-spacing: 0.02em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        align-self: stretch;
      }

      .stack-refreshed:hover {
        color: rgba(255, 255, 255, 0.98);
      }

      .stack-scroll.is-ptr-threshold .stack-body {
        transition: transform 0.08s ease-out;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        column-gap: 10px;
        align-items: start;
        width: 100%;
      }

      .hero-city {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 1.05rem;
        font-weight: 400;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .hero-hilo {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        text-align: right;
        font-size: 0.78rem;
        font-weight: 300;
        line-height: 1.38;
        color: rgba(255, 255, 255, 0.98);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        padding-top: 0.15rem;
      }

      .hero-hilo span {
        display: block;
      }

      .hero-temp {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        font-size: 3.35rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      }

      .hero-feels {
        grid-column: 1;
        grid-row: 3;
        margin: 5px 0 0;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.2;
        opacity: 0.92;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .hero-condition {
        grid-column: 1;
        grid-row: 4;
        margin: 6px 0 0;
        font-size: 1.05rem;
        font-weight: 400;
        opacity: 0.98;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      /* Stack frame: clips anything outside; inner scroll owns the cards */
      .stack-body {
        position: relative;
        z-index: 1;
        margin-top: 130px;
        padding: 0 var(--page-pad) calc(24px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        gap: 11px;
      }

      .stack-body > * {
        position: relative;
        z-index: 1;
      }

      /* Stack cards: same dark glass as .hourly (theme shows through from page behind) */
      .stack-body > .hourly,
      .stack-body > .weekly,
      .stack-body > .filler-card,
      .stack-body > .pop-timeline {
        border-radius: 22px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
      }

      .stack-body > .nws-alerts-panel {
        border-radius: 22px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
      }

      .nws-alerts-panel {
        display: none;
        padding: 14px 16px;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        border: 1px solid rgba(220, 85, 85, 0.72);
        background: rgba(110, 26, 26, 0.48);
      }

      .nws-alerts-panel.is-visible {
        display: block;
      }

      .nws-alerts-panel.is-severe {
        border-color: rgba(255, 100, 100, 0.82);
        background: rgba(130, 22, 22, 0.55);
      }

      .nws-alerts-event {
        margin: 0;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(255, 210, 210, 0.98);
      }

      .nws-alerts-headline {
        margin: 6px 0 0;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 400;
        line-height: 1.35;
        color: #fff;
      }

      .nws-alerts-meta {
        margin: 6px 0 0;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 400;
        opacity: 0.9;
        color: rgba(255, 235, 235, 0.92);
      }

      .nws-alerts-more {
        margin: 10px 0 0;
        font-family: inherit;
        font-size: 0.8rem;
      }

      .nws-alerts-more summary {
        cursor: pointer;
        font-family: inherit;
        color: rgba(255, 220, 220, 0.95);
        list-style: none;
      }

      .nws-alerts-more summary::-webkit-details-marker {
        display: none;
      }

      .nws-alerts-list {
        margin: 8px 0 0;
        padding: 0;
        list-style: none;
      }

      .nws-alerts-list li {
        padding: 8px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font-family: inherit;
        font-size: 0.82rem;
        line-height: 1.35;
      }

      .pop-timeline {
        display: none;
        padding: 14px 16px 12px;
      }

      .pop-timeline.is-visible {
        display: block;
      }

      .pop-timeline-title {
        margin: 0;
        font-size: 0.88rem;
        font-weight: 600;
        color: #fff;
      }

      .pop-timeline-sub {
        margin: 4px 0 12px;
        font-size: 0.78rem;
        opacity: 0.88;
        color: rgba(255, 255, 255, 0.92);
      }

      .pop-timeline-chart-scroll {
        margin: 4px -16px 2px -16px;
        padding: 6px 0 6px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent 0 8px,
          #000 8px,
          #000 calc(100% - 40px),
          transparent calc(100% - 40px),
          transparent 100%
        );
        mask-image: linear-gradient(
          90deg,
          transparent 0 8px,
          #000 8px,
          #000 calc(100% - 40px),
          transparent calc(100% - 40px),
          transparent 100%
        );
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }

      .pop-timeline-chart-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 6px;
        min-height: 88px;
        width: max-content;
        padding: 0 16px;
      }

      .pop-timeline-bar-wrap {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: auto;
        min-width: 44px;
        max-width: 56px;
        scroll-snap-align: start;
      }

      /* Fixed band so bars align visually when labels differ in wrap height */
      .pop-timeline-bar-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        width: 18px;
        height: 56px;
      }

      .pop-timeline-bar {
        width: 14px;
        min-height: 2px;
        border-radius: 4px 4px 2px 2px;
        background: rgba(120, 180, 255, 0.85);
      }

      .pop-timeline-label {
        margin: 0;
        font-size: 0.62rem;
        font-weight: 500;
        line-height: 1.18;
        text-align: center;
        opacity: 0.88;
        color: rgba(255, 255, 255, 0.92);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }

      .pop-timeline-pct {
        display: block;
        font-size: 0.55rem;
        line-height: 1.15;
        text-align: center;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        opacity: 0.78;
        color: rgba(210, 230, 255, 0.95);
      }

      .hourly {
        /* No backdrop-filter: it composites outside the parent .stack-scroll mask in WebKit/Blink,
           so the top fade would skip this card. Slightly stronger fill preserves contrast. */
        padding: 15px 0 13px;
        overflow: hidden;
      }

      .hourly-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        cursor: grab;
        touch-action: pan-x;
        /* Fade scrollable content at the right edge only (card chrome stays solid on parent) */
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 40px), transparent 100%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }

      .hourly-scroll.is-drag-scrolling {
        cursor: grabbing;
        user-select: none;
      }

      .hourly-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        width: max-content;
        padding: 0 10px;
      }

      .hour-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        color: #fff;
        flex: 0 0 auto;
        min-width: 54px;
      }

      .hour-time {
        font-size: 0.68rem;
        font-weight: 300;
        opacity: 0.95;
      }

      .hour-cell .ico {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        object-fit: contain;
      }

      .hour-temp {
        font-size: 0.78rem;
        font-weight: 400;
      }

      .hour-rain {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 0.62rem;
        font-weight: 300;
        opacity: 0.95;
      }

      .hour-rain .drop-ico {
        width: 10px;
        height: 11px;
        flex-shrink: 0;
        color: #fff;
      }

      .weekly {
        position: relative;
        padding: 15px 0 13px;
      }

      .weekly-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        cursor: grab;
        touch-action: pan-x;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 40px), transparent 100%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }

      .weekly-scroll.is-drag-scrolling {
        cursor: grabbing;
        user-select: none;
      }

      .weekly-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0;
        min-width: 100%;
        transition:
          width var(--weekly-motion-dur) var(--weekly-motion-ease),
          min-width var(--weekly-motion-dur) var(--weekly-motion-ease);
      }

      .weekly:not(.weekly-has-expanded) .weekly-row {
        width: 100%;
      }

      .weekly.weekly-has-expanded .weekly-row {
        width: max-content;
        min-width: 100%;
      }

      .day-cell {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 6px 2px 8px;
        text-align: center;
        color: #fff;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        -webkit-tap-highlight-color: transparent;
        transition:
          flex var(--weekly-motion-dur) var(--weekly-motion-ease),
          min-width var(--weekly-motion-dur) var(--weekly-motion-ease),
          max-width var(--weekly-motion-dur) var(--weekly-motion-ease);
      }

      .day-cell:not(.is-expanded) {
        cursor: pointer;
      }

      .day-cell.is-expanded {
        cursor: default;
      }

      .weekly.weekly-has-expanded .day-cell:not(.is-expanded) {
        flex: 0 0 48px;
        min-width: 44px;
        max-width: 56px;
      }

      .weekly.weekly-has-expanded .day-cell.is-expanded {
        flex: 0 0 auto;
        min-width: 200px;
        max-width: min(360px, 92vw);
      }

      .day-cell:focus {
        outline: 2px solid rgba(255, 255, 255, 0.45);
        outline-offset: 2px;
      }

      .day-cell-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
      }

      .day-cell.is-expanded .day-cell-inner {
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
      }

      .day-cell-summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        min-width: 48px;
        cursor: pointer;
      }

      .day-cell.is-expanded .day-cell-summary {
        font-weight: 700;
        height: 100%;
        min-height: 0;
      }

      .day-summary-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
      }

      .day-summary-mid {
        display: none;
      }

      .day-cell.is-expanded .day-summary-mid {
        display: block;
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
      }

      .day-summary-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
      }

      .day-cell.is-expanded .day-cell-summary .day-name {
        font-weight: 700;
        opacity: 1;
      }

      .day-hourly-strip {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        /* In column layout (collapsed), flex-grow would steal vertical space from stretched .day-cell */
        flex: 0 0 auto;
        align-items: stretch;
        justify-content: flex-start;
        min-width: 0;
        min-height: 0;
        max-width: 0;
        /* max-width alone does not collapse height; content still stacks in the column layout */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        /* Do not transition max-height: on close, flex becomes column while max-height was
           still >0, so the strip stacked under the summary and briefly doubled row height. */
        transition:
          max-width var(--weekly-motion-dur) var(--weekly-motion-ease),
          opacity var(--weekly-motion-dur) var(--weekly-motion-ease);
      }

      .day-cell.is-expanded .day-hourly-strip {
        flex: 1 1 auto;
        max-width: 280px;
        max-height: 240px;
        height: 100%;
        min-height: 0;
        opacity: 1;
        pointer-events: auto;
        align-items: stretch;
      }

      .day-hourly-strip > .day-detail-hours {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex: 1 1 auto;
        align-self: stretch;
        min-width: min-content;
        min-height: 100%;
        height: 100%;
        align-items: stretch;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        cursor: grab;
        touch-action: pan-x;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
      }

      .day-hourly-strip > .day-detail-hours.is-drag-scrolling {
        cursor: grabbing;
        user-select: none;
      }

      .day-hour-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        align-self: stretch;
        min-width: 46px;
        min-height: 0;
        font-size: 0.62rem;
        font-weight: 300;
        opacity: 0.95;
      }

      .day-hour-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
      }

      .day-hour-head-temps {
        min-height: var(--day-weekly-temps-slot);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }

      .day-hour-mid {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
      }

      .day-hour-col .day-hour-time {
        font-size: 0.62rem;
        font-weight: 400;
        opacity: 0.98;
        line-height: 1.15;
      }

      .day-hour-col .day-hour-temp {
        font-size: 0.68rem;
        font-weight: 400;
      }

      .day-hour-col .ico {
        width: 30px;
        height: 30px;
        object-fit: contain;
      }

      .day-hour-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
      }

      .day-hour-col .day-hour-rain {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 0.58rem;
        font-weight: 300;
      }

      .day-hour-col .day-hour-rain .drop-ico {
        width: 10px;
        height: 11px;
        flex-shrink: 0;
        color: #fff;
      }

      .day-cell:last-child {
        border-right: none;
      }

      .day-name {
        font-size: 0.62rem;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-transform: capitalize;
        opacity: 0.95;
        line-height: 1.15;
      }

      .day-name.is-today {
        font-weight: 700;
      }

      .day-temps {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.68rem;
        line-height: 1.15;
      }

      .day-temps span:first-child {
        font-weight: 400;
      }

      .day-temps .lo {
        font-weight: 300;
        opacity: 0.95;
      }

      .day-cell .ico {
        width: 30px;
        height: 30px;
        object-fit: contain;
      }

      .day-rain {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 0.58rem;
        font-weight: 300;
        opacity: 0.95;
      }

      .day-rain .drop-ico {
        width: 10px;
        height: 11px;
        flex-shrink: 0;
        color: #fff;
      }

      .bottom-panel,
      .filler-card {
        min-height: 140px;
      }

      .bottom-panel {
        min-height: auto;
        padding: 0;
        overflow: visible;
      }

      .insights-bento {
        padding: 0;
        margin: 0;
        width: 100%;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
      }

      .bento-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
        align-items: stretch;
        width: 100%;
      }

      .bento {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 14px;
        border-radius: 22px;
        border: 1px solid var(--glass-border);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
        /* Vertical padding aligned with .hourly / .weekly shell; extra horizontal for bento tiles */
        padding: 14px 16px 14px;
        color: #fff;
        min-height: 0;
      }

      .bento-text-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
      }

      .bento-body-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
      }

      .bento-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-width: 0;
      }

      .bento-visual--sun {
        min-width: 108px;
      }

      .bento-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0.88;
        margin-bottom: 0;
      }

      .bento-head .bento-ico {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        object-fit: contain;
        opacity: 0.95;
      }

      .bento-main {
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
      }

      .bento-sub {
        margin-top: 4px;
        font-size: 0.68rem;
        font-weight: 300;
        opacity: 0.9;
        line-height: 1.25;
      }

      .bento-sun {
        grid-column: 1 / -1;
      }

      .bento-pollen {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .bento-pollen .bento-text-col {
        width: 100%;
      }

      .bento-pollen .bento-body-copy {
        width: 100%;
      }

      /* Must follow `.bento` — overrides its 2-column grid so the map spans full width */
      .bento.bento-radar {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        min-width: 0;
        padding: 14px 14px 12px;
      }

      .bento.bento-radar .bento-radar-map-wrap {
        width: 100%;
        min-width: 0;
        align-self: stretch;
      }

      .bento.bento-radar .bento-radar-attrib {
        width: 100%;
      }

      .bento-pollen-meters {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding-top: 6px;
      }

      .pollen-meter {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 0;
      }

      .pollen-meter-stats {
        text-align: center;
        width: 100%;
      }

      .pollen-risk {
        display: block;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.2;
      }

      .pollen-risk--low {
        color: rgba(180, 245, 210, 0.98);
      }

      .pollen-risk--moderate {
        color: rgba(255, 224, 140, 0.98);
      }

      .pollen-risk--high {
        color: rgba(255, 186, 120, 0.98);
      }

      .pollen-risk--veryhigh {
        color: rgba(255, 150, 140, 0.98);
      }

      .pollen-meter-trend {
        display: block;
        margin-top: 2px;
        font-size: 0.58rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.78;
      }

      .pollen-icon-wrap {
        position: relative;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
      }

      .pollen-icon-wrap svg {
        display: block;
      }

      .pollen-icon-ghost {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 46px;
        height: 46px;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.2);
        pointer-events: none;
      }

      .pollen-icon-fill-clip {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        height: 0%;
        transition: height 0.4s ease;
        pointer-events: none;
      }

      .pollen-icon-filled {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 46px;
        height: 46px;
        transform: translateX(-50%);
      }

      /* Filled icon tint follows risk (fallback if class not set) */
      .pollen-icon-wrap.pollen-wrap--low .pollen-icon-filled {
        color: rgba(130, 215, 165, 0.95);
      }

      .pollen-icon-wrap.pollen-wrap--moderate .pollen-icon-filled {
        color: rgba(240, 205, 115, 0.95);
      }

      .pollen-icon-wrap.pollen-wrap--high .pollen-icon-filled {
        color: rgba(235, 150, 90, 0.96);
      }

      .pollen-icon-wrap.pollen-wrap--veryhigh .pollen-icon-filled {
        color: rgba(245, 110, 100, 0.96);
      }

      .pollen-meter-label {
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.82;
      }

      #ins-pollen-sub {
        line-height: 1.35;
      }

      .bento-sun-times {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 0.72rem;
        font-weight: 400;
        min-width: 0;
      }

      .bento-sun-times span {
        opacity: 0.92;
        white-space: nowrap;
      }

      .bento-sun-times strong {
        font-weight: 600;
        margin-left: 4px;
      }

      .bento-sun-phase {
        margin-top: 2px;
        text-transform: none;
        letter-spacing: 0;
      }

      .sun-arc-svg {
        width: 100%;
        max-width: 132px;
        height: 56px;
        color: rgba(255, 255, 255, 0.92);
        display: block;
      }

      .sun-arc-track {
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        opacity: 0.22;
      }

      .sun-arc-day {
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        opacity: 0.55;
      }

      .sun-arc-dot {
        fill: currentColor;
        opacity: 0.95;
      }

      .wind-compass {
        position: relative;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
      }

      .wind-compass svg {
        width: 100%;
        height: 100%;
        color: #fff;
        opacity: 0.95;
        display: block;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
    
/* 5cast demo iframe */

      html, body, .shell { height: 100%; min-height: 100%; }
      .phone { max-width: 100%; max-height: none; height: 100%; flex: 1; }
      :root { --phone-max: 100%; }

      * {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      *::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
      }