@property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    :root {
      --content-max: 860px;
      --page-gutter: 1.5rem;
      --status-max: 38rem;
      --accent:       #07B98A;
      --accent-glow:  rgba(7,185,138,0.4);
      --accent-dim:   rgba(7,185,138,0.12);
      --switcher-accent: #07B98A;
      --switcher-accent-glow: rgba(7,185,138,0.42);
      --switcher-accent-dim: rgba(7,185,138,0.1);
      --switcher-accent-border: rgba(7,185,138,0.25);
      --glass-bg:     rgba(255,255,255,0.07);
      --glass-border: rgba(255,255,255,0.10);
      --glass-shine:  rgba(255,255,255,0.18);
      --ink:          #ffffff;
      --ink-muted:    rgba(255,255,255,0.5);
      --ink-subtle:   rgba(255,255,255,0.25);
      --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-out:     cubic-bezier(0.33, 1, 0.68, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      background: #07070f;
      color: var(--ink);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .skip-link {
      position: fixed;
      top: 1rem;
      left: 1rem;
      z-index: 40;
      width: 1px;
      height: 1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip-path: inset(50%);
      background: transparent;
      color: #05251d;
      font-size: 0.8125rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }

    .skip-link:focus,
    .skip-link:focus-visible {
      width: auto;
      height: auto;
      padding: 0.8rem 1rem;
      border-radius: 999px;
      overflow: visible;
      clip-path: none;
      background: rgba(7, 185, 138, 0.96);
      opacity: 1;
      pointer-events: auto;
      outline: 2px solid #ffffff;
      outline-offset: 3px;
      box-shadow: 0 12px 30px rgba(7, 185, 138, 0.28);
    }

    /* ── Animated background ── */
    .bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(130px);
    }

    .blob-1 {
      width: 900px; height: 900px;
      background: radial-gradient(circle, rgba(7,185,138,0.22) 0%, transparent 60%);
      top: -320px; right: -250px;
      animation: drift1 16s ease-in-out infinite;
    }

    .blob-2 {
      width: 750px; height: 750px;
      background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 60%);
      bottom: -180px; left: -250px;
      animation: drift2 20s ease-in-out infinite;
    }

    .blob-3 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 60%);
      top: 45%; left: 35%;
      animation: drift3 13s ease-in-out infinite;
    }

    @keyframes drift1 {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(-70px,80px) scale(1.08); }
      66%      { transform: translate(90px,-50px) scale(0.95); }
    }
    @keyframes drift2 {
      0%,100% { transform: translate(0,0) scale(1); }
      40%      { transform: translate(110px,-60px) scale(1.1); }
      70%      { transform: translate(-50px,90px) scale(1.05); }
    }
    @keyframes drift3 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(80px,60px) scale(1.25); }
    }

    /* No grain — pure liquid glass */

    /* ── Cursor glow ── */
    #cursor-glow {
      position: fixed;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(7,185,138,0.07) 0%, transparent 65%);
      pointer-events: none;
      transform: translate(-50%,-50%);
      will-change: transform;
      z-index: 1;
    }

    /* ── Hero ── */
    .hero {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      min-height: 43vh;
      padding: 0 var(--page-gutter) 3.25rem;
    }

    .hero-inner {
      max-width: var(--content-max);
      margin: 0 auto;
      width: 100%;
    }

    .city-toggle-row {
      display: inline-flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
      opacity: 1;
      transform: none;
    }

    .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;
    }

    .live-chip {
      display: inline-flex;
      align-items: center;
      align-self: center;
      flex: 0 0 auto;
      gap: 0.35rem;
      padding: calc(3px + 0.3rem) 0.75rem;
      border-radius: 9999px;
      background: var(--switcher-accent-dim);
      border: 1px solid var(--switcher-accent-border);
      font-size: 0.5625rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--switcher-accent);
      line-height: 1;
    }

    .city-toggle {
      display: inline-flex;
      align-items: center;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 0.35rem;
      width: 100%;
      padding: 0.4rem;
      border-radius: 16px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.075);
    }

    .city-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 2rem;
      gap: 0.4rem;
      padding: 0.48rem 0.82rem;
      border-radius: 12px;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1;
      text-transform: none;
      color: rgba(255,255,255,0.52);
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .city-btn.active {
      background: var(--switcher-accent);
      color: #fff;
      box-shadow: 0 8px 22px rgba(7,185,138,0.18);
    }

    .city-btn.recent:not(.active) {
      color: rgba(255,255,255,0.72);
      background: rgba(255,255,255,0.04);
      box-shadow: inset 0 0 0 1px rgba(7,185,138,0.18);
    }

    .city-btn.recent:not(.active)::after {
      content: attr(data-recent-label);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.16rem 0.36rem;
      border-radius: 999px;
      background: rgba(7,185,138,0.14);
      color: #8af2cf;
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1;
    }

    .city-select-mobile-wrap {
      display: none;
      width: 100%;
      position: relative;
    }

    .city-select-mobile {
      width: 100%;
      appearance: none;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.84);
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      padding: 0.8rem 2.75rem 0.8rem 0.95rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .city-select-mobile-wrap::after {
      content: '›';
      position: absolute;
      right: 1rem;
      top: 50%;
      width: 1.8rem;
      height: 1.8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.5);
      font-size: 1rem;
      line-height: 1;
      transform: translateY(-50%) rotate(90deg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      pointer-events: none;
    }

    .city-select-mobile option {
      color: #0e0e1a;
      background: #ffffff;
    }

    .pulse-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--switcher-accent);
      box-shadow: 0 0 6px var(--switcher-accent-glow);
      animation: pulse 2.2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%,100% { opacity:1; transform:scale(1); box-shadow: 0 0 6px var(--switcher-accent-glow); }
      50%      { opacity:0.6; transform:scale(0.75); box-shadow: 0 0 2px var(--switcher-accent-border); }
    }

    .hero h1 {
      font-size: clamp(3.25rem, 8.5vw, 5.25rem);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1.05;
      color: #fff;
      margin-bottom: 1.25rem;
      opacity: 1;
      transform: none;
    }

    .hero h1 a {
      text-decoration: none;
      position: relative;
      display: inline-block;
      filter: drop-shadow(0 0 14px rgba(7,185,138,0.1));
    }

    .hero h1 span {
      background: linear-gradient(135deg, #07B98A 0%, #34d3a8 50%, #a5f3dc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      display: inline-block;
      text-shadow:
        0 0 8px rgba(7,185,138,0.26),
        0 0 18px rgba(52,211,168,0.16),
        0 0 34px rgba(165,243,220,0.1);
      animation: logoShimmer 5.8s ease-in-out infinite;
    }

    .hero h1 span::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #07B98A, #34d3a8, #a5f3dc);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .hero h1 a::before {
      content: '';
      position: absolute;
      inset: -0.45em -0.8em -0.2em;
      background:
        radial-gradient(circle at 50% 50%, rgba(165,243,220,0.12) 0%, rgba(7,185,138,0.1) 28%, rgba(7,185,138,0.03) 55%, transparent 72%),
        radial-gradient(circle at 50% 50%, rgba(52,211,168,0.12) 0%, transparent 68%);
      filter: blur(20px);
      opacity: 0.56;
      transform-origin: center;
      animation: logoAura 6.4s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }

    .hero h1 a::after {
      content: '';
      position: absolute;
      inset: -0.12em -0.35em;
      border-radius: 999px;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.1) 24%, rgba(165,243,220,0.14) 50%, transparent 76%);
      opacity: 0;
      transform: translateX(-16%) scale(0.96);
      mix-blend-mode: screen;
      animation: logoSweep 7.5s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }

    .hero h1 a span,
    .hero h1 a span::after {
      z-index: 1;
    }

    .hero h1 a:hover span::after,
    .hero h1 a:active span::after {
      transform: scaleX(1);
    }

    @keyframes logoAura {
      0%, 100% {
        opacity: 0.42;
        transform: scale(0.96);
      }
      50% {
        opacity: 0.68;
        transform: scale(1.04);
      }
    }

    @keyframes logoShimmer {
      0%, 100% {
        text-shadow:
          0 0 8px rgba(7,185,138,0.26),
          0 0 18px rgba(52,211,168,0.16),
          0 0 34px rgba(165,243,220,0.1);
      }
      50% {
        text-shadow:
          0 0 10px rgba(52,211,168,0.34),
          0 0 22px rgba(7,185,138,0.22),
          0 0 42px rgba(165,243,220,0.14);
      }
    }

    @keyframes logoSweep {
      0%, 100% {
        opacity: 0;
        transform: translateX(-18%) scale(0.96);
      }
      45% {
        opacity: 0;
        transform: translateX(-10%) scale(0.98);
      }
      55% {
        opacity: 0.46;
        transform: translateX(6%) scale(1);
      }
      70% {
        opacity: 0;
        transform: translateX(18%) scale(1.02);
      }
    }

    @keyframes logoShimmerLight {
      0%, 100% {
        text-shadow:
          0 0 12px rgba(12,130,173,0.26),
          0 0 26px rgba(20,148,141,0.2),
          0 0 52px rgba(92,184,166,0.16);
      }
      50% {
        text-shadow:
          0 0 16px rgba(129,204,220,0.34),
          0 0 34px rgba(20,148,141,0.24),
          0 0 66px rgba(92,184,166,0.18);
      }
    }

    .hero-sub {
      font-size: 1.0625rem;
      color: var(--ink-muted);
      max-width: 460px;
      line-height: 1.65;
      opacity: 1;
      transform: none;
    }

    .hero-sub a {
      color: rgba(138,242,207,0.96);
      text-decoration-color: rgba(138,242,207,0.38);
      text-underline-offset: 0.16em;
    }

    .hero-sub a:hover {
      color: #d9fff3;
    }

    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── Search card ── */
    .search-wrap {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      opacity: 1;
      transform: none;
    }

    .search-card {
      --search-card-radius: 22px;
      position: relative;
      padding: 1.65rem 1.85rem;
      border-radius: var(--search-card-radius);
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(56px) saturate(200%) brightness(1.08);
      -webkit-backdrop-filter: blur(56px) saturate(200%) brightness(1.08);
      isolation: isolate;
      box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 32px 80px rgba(0,0,0,0.45);
    }

    .search-card .city-toggle-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 100%;
      gap: 1rem;
      margin-bottom: 1.1rem;
    }

    .search-card .city-toggle {
      flex: 1 1 30rem;
      min-width: 0;
    }

    /* Rotating conic gradient border */
    .search-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: calc(var(--search-card-radius) + 1px);
      padding: 1px;
      background: conic-gradient(
        from var(--angle),
        rgba(7,185,138,0.7),
        rgba(99,102,241,0.5),
        rgba(236,72,153,0.4),
        rgba(7,185,138,0.1),
        rgba(7,185,138,0.7)
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: border-spin 6s linear infinite;
      z-index: -1;
    }

    @keyframes border-spin { to { --angle: 360deg; } }

    /* Inner top highlight */
    .search-card::after {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
      border-radius: calc(var(--search-card-radius) - 4px);
      pointer-events: none;
    }

    .search-shortcuts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 0.55rem;
      width: 100%;
      margin: 0.65rem 0 0;
    }

    .search-shortcut {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 2.05rem;
      min-width: 0;
      padding: 0.42rem 0.72rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.72);
      font-size: 0.625rem;
      font-weight: 650;
      letter-spacing: 0;
      text-transform: none;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-spring);
    }

    .search-shortcut:only-child,
    .search-shortcut:only-of-type {
      grid-column: 1 / -1;
    }

    .search-shortcut:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(7,185,138,0.2);
      color: #fff;
      transform: translateY(-1px);
    }

    .search-shortcut.restore {
      border-color: rgba(7,185,138,0.28);
      background: rgba(7,185,138,0.1);
      color: #b9f5e4;
      text-transform: none;
      letter-spacing: 0.03em;
      font-size: 0.6875rem;
    }

    .search-shortcut.restore .shortcut-text {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .search-shortcut.restore:hover {
      background: rgba(7,185,138,0.18);
      border-color: rgba(7,185,138,0.42);
      color: #fff;
    }

.search-shortcut.example {
    justify-content: center;
    gap: 0.5rem;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
    padding-inline: 0.8rem 0.95rem;
    min-width: 0;
}

@media (min-width: 641px) {
    .search-shortcut.example {
        margin-left: 0;
    }
}

.search-shortcut.example:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(7,185,138,0.2);
    color: #fff;
}

.search-shortcut.example.spinning {
    color: #fff;
    border-color: rgba(7,185,138,0.4);
    background: radial-gradient(circle at 1.1rem 50%, rgba(7,185,138,0.16), transparent 34%), rgba(255,255,255,0.065);
    box-shadow: 0 0 0 1px rgba(7,185,138,0.12), 0 10px 28px rgba(7,185,138,0.1);
}

.shortcut-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.12rem;
    height: 1.12rem;
    color: #8af2cf;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.shortcut-icon svg,
.theme-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clock-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.search-shortcut.example.spinning .choose-icon {
    animation: choose-icon-roll 0.56s cubic-bezier(0.28, 0.84, 0.32, 1) infinite;
}

@keyframes choose-icon-roll {
    to { transform: rotate(360deg); }
}

    .shortcut-text {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-shortcut.example .shortcut-text {
      min-width: 0;
      justify-content: center;
    }

    .input-row {
      position: relative;
      display: flex;
      align-items: stretch;
      gap: 0.875rem;
    }

    .search-meta {
      margin-top: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem 1rem;
      flex-wrap: wrap;
      padding-block: 0.2rem;
    }

    .input-field-wrap {
      flex: 1;
      min-width: 0;
      position: relative;
      display: flex;
    }

    #addressInput {
      flex: 1;
      min-width: 0;
      padding: 0.875rem 2.5rem 0.875rem 1rem;
      font-size: 1rem;
      font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', monospace;
      background: rgba(255,255,255,0.075);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 9px;
      outline: none;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
      width: 100%;
    }

    #clearBtn {
      position: absolute;
      right: 0.625rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.5);
      font-size: 0.75rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: background 0.15s, color 0.15s, opacity 0.15s, visibility 0.15s;
      flex-shrink: 0;
    }

    #clearBtn.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    #clearBtn:hover {
      background: rgba(255,255,255,0.18);
      color: #fff;
    }

    [data-theme="light"] #clearBtn {
      background: rgba(0,0,0,0.07);
      color: rgba(14,14,26,0.45);
    }

    [data-theme="light"] #clearBtn:hover {
      background: rgba(0,0,0,0.13);
      color: #0e0e1a;
    }

    #addressInput:focus {
      background: rgba(255,255,255,0.08);
      border-color: rgba(7,185,138,0.55);
      box-shadow: 0 0 0 3px rgba(7,185,138,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
    }

    #addressInput::placeholder { color: rgba(255,255,255,0.34); }

    #searchBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      min-width: 8.75rem;
      padding: 0.875rem 1.75rem;
      background: rgba(7,185,138,0.12);
      color: var(--accent);
      border: 1px solid rgba(7,185,138,0.35);
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.2s var(--ease-spring);
      will-change: transform;
    }

    #searchBtn[data-search-icon="true"]::after {
      content: '⌕';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.9em;
      font-weight: 700;
      line-height: 1;
      transform: translateY(-0.28em);
    }

    /* Sheen sweep */
    #searchBtn::before {
      content: '';
      position: absolute;
      top: -50%; left: -75%;
      width: 250%; height: 200%;
      background: linear-gradient(105deg, transparent 35%, rgba(7,185,138,0.18) 50%, transparent 65%);
      transform: translateX(-100%);
      transition: transform 0.5s ease;
    }

    #searchBtn:hover::before { transform: translateX(100%); }
    #searchBtn:hover {
      background: rgba(7,185,138,0.2);
      border-color: rgba(7,185,138,0.55);
      box-shadow: 0 0 24px rgba(7,185,138,0.35), 0 4px 16px rgba(0,0,0,0.3);
    }
    #searchBtn:active { transform: scale(0.95) !important; }
    #searchBtn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
    #searchBtn[data-ready="true"] { box-shadow: 0 0 18px rgba(7,185,138,0.18); }

    .location-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.55rem 0.85rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.82);
      font-size: 0.75rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-spring);
    }

    .location-btn:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
      color: #fff;
      transform: translateY(-1px);
    }

    .location-btn[disabled] {
      opacity: 0.5;
      cursor: wait;
      pointer-events: none;
    }

    .location-hint {
      display: inline-flex;
      width: 100%;
      flex: 1 1 100%;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.42);
      text-align: center;
      line-height: 1.5;
      padding-block: 0.2rem;
      max-width: var(--status-max);
      margin: 0 auto;
    }

    .location-hint[data-tone="good"] { color: rgba(52,211,168,0.98); }
    .location-hint[data-tone="warn"] { color: rgba(251,191,36,0.92); }

    .source-note {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.78);
    }

    .source-note {
      flex: 1 1 100%;
      width: 100%;
      text-align: center;
      line-height: 1.45;
    }

    .source-note-card {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.55rem;
      flex-wrap: wrap;
      width: fit-content;
      max-width: min(100%, var(--status-max));
      margin: 0 auto;
      padding: 0.52rem 0.72rem;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      background: rgba(255,255,255,0.045);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }

    .source-note-card.good {
      border-color: rgba(7,185,138,0.12);
      background: rgba(255,255,255,0.045);
      color: rgba(255,255,255,0.82);
    }

    .source-note-card.warn {
      border-color: rgba(245,158,11,0.12);
      background: rgba(255,255,255,0.045);
      color: rgba(255,255,255,0.82);
    }

    .source-note-card.bad {
      border-color: rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.045);
      color: rgba(255,255,255,0.82);
    }

    .source-note-card.unknown {
      color: rgba(255,255,255,0.62);
    }

    .source-note-link,
    .source-note-city {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 0.32rem;
      font-weight: 650;
    }

    .source-note-link {
      color: rgba(255,255,255,0.56);
      text-decoration: none;
    }

    .source-note-provider-label {
      display: inline-flex;
      align-items: center;
      color: rgba(255,255,255,0.56);
      font-weight: 500;
    }

    .source-note-city {
      color: currentColor;
      opacity: 0.9;
    }

    .source-note-link-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.82em;
      line-height: 1;
      transform: translateY(-0.02em);
    }

    .source-note-location-pin {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(52,211,168,0.95);
      font-size: 1.05em;
      line-height: 1;
      transform: translateY(-0.03em);
    }

    .source-note-health {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      min-height: 1.35rem;
      padding: 0.08rem 0.5rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.72);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: none;
      line-height: 1;
      vertical-align: middle;
    }

    .source-note-health::after {
      content: '';
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.38);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
      flex: 0 0 auto;
    }

    .source-note-health.good {
      border-color: rgba(7,185,138,0.12);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.78);
    }

    .source-note-health.good::after {
      background: #22c55e;
      box-shadow: 0 0 10px rgba(34,197,94,0.55);
    }

    .source-note-health.warn {
      border-color: rgba(245,158,11,0.12);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.78);
    }

    .source-note-health.warn::after {
      background: #f59e0b;
      box-shadow: 0 0 10px rgba(245,158,11,0.55);
    }

    .source-note-health.bad {
      border-color: rgba(239,68,68,0.12);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.78);
    }

    .source-note-health.bad::after {
      background: #ef4444;
      box-shadow: 0 0 10px rgba(239,68,68,0.55);
    }

    .source-note-coverage { display: none; }

    .source-note a {
      color: rgba(255,255,255,0.56);
      text-decoration: none;
      text-underline-offset: 0.16em;
    }

    .location-hint-pin {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.32rem;
      color: rgba(167,243,208,0.84);
      font-size: 0.85em;
      line-height: 1;
      vertical-align: -0.05em;
    }

    .location-hint-pin.muted {
      color: rgba(255,255,255,0.46);
      text-decoration: line-through;
      text-decoration-thickness: 0.12em;
    }

    :where(
      .theme-toggle,
      .city-btn,
      .city-select-mobile,
      #searchBtn,
      #clearBtn,
      .dd-item,
      .notify-btn,
      .share-btn,
      .ics-btn,
      .cal-nav-btn,
      .bin-guide-toggle,
      .location-btn
    ):focus-visible,
    #addressInput:focus-visible {
      outline: 2px solid rgba(165,243,220,0.95);
      outline-offset: 3px;
    }

    /* ── Dropdown ── */
    .dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0; right: 0;
      background: rgba(10,10,20,0.92);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.7);
      z-index: 100;
      overflow: hidden;
      max-height: min(28rem, calc(100vh - 14rem));
      overflow-y: auto;
      overscroll-behavior: contain;
      display: none;
    }

    .dropdown.open { display: block; }

    .dd-item {
      padding: 0.8125rem 1rem;
      cursor: pointer;
      font-size: 0.9375rem;
      font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', monospace;
      color: rgba(255,255,255,0.75);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      transition: background 0.12s, color 0.12s;
    }

    .dd-item:last-child { border-bottom: none; }
    .dd-item:hover, .dd-item.hi { background: rgba(7,185,138,0.12); color: #fff; }
    .dd-item.empty { color: rgba(255,255,255,0.3); cursor: default; font-style: italic; }
    .dd-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-width: 0;
    }
    .dd-item-label {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dd-item-badge {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.28rem 0.55rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.7);
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
    }
    .dd-item-badge.exact {
      color: #8af2cf;
      background: rgba(7,185,138,0.12);
      border-color: rgba(7,185,138,0.26);
    }
    .dd-item-badge.street {
      color: #9bd6ff;
      background: rgba(59,130,246,0.12);
      border-color: rgba(59,130,246,0.24);
    }
    .dd-item-badge.area {
      color: #d6d3ff;
      background: rgba(139,92,246,0.12);
      border-color: rgba(139,92,246,0.24);
    }

    /* ── Main ── */
    main {
      flex: 1;
      max-width: var(--content-max);
      width: 100%;
      margin: 0 auto;
      padding: 2rem var(--page-gutter) 5rem;
      min-height: 14rem;
      position: relative;
      z-index: 2;
      scroll-margin-top: 1.5rem;
    }

    .status {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4rem 1rem;
      color: var(--ink-subtle);
      font-size: 0.9375rem;
      width: 100%;
      max-width: var(--status-max);
      margin: 0 auto;
    }

    .status.loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.875rem;
      color: var(--ink-muted);
      text-align: center;
      flex-direction: column;
    }

    .spinner {
      width: 20px; height: 20px;
      border: 2px solid rgba(255,255,255,0.08);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.65s linear infinite;
      flex-shrink: 0;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .status.error { color: #f87171; }
    .status.error a { color: var(--accent); text-decoration: underline; }

    .status-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 0.45rem;
    }

    .status-subtle {
      display: block;
      max-width: 34rem;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* ── Results ── */
    .result-header {
      margin-bottom: 1.5rem;
    }

    .result-label {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ink-subtle);
      margin-bottom: 0.75rem;
    }

    .result-address-text {
      font-size: 1rem;
      font-weight: 600;
      font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', monospace;
      color: rgba(255,255,255,0.88);
    }

    .result-icon {
      font-size: 1.45rem;
      width: 2.75rem;
      height: 2.75rem;
      min-width: 2.75rem;
      text-align: center;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      min-height: 0;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.07);
      line-height: 1;
    }

    .result-info {
      flex: 1;
      min-width: 0;
      min-height: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.15rem;
    }

    .bins-grid { display: grid; gap: 1rem; align-items: stretch; }

    .bin-card {
      border-radius: 16px;
      padding: 1.5rem 1.75rem;
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
      backdrop-filter: blur(48px) saturate(180%) brightness(1.06);
      -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(1.06);
      border: 1px solid rgba(255,255,255,0.09);
      position: relative;
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.2s ease;
      transform-style: preserve-3d;
      will-change: transform;
      cursor: default;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.1),
        0 8px 32px rgba(0,0,0,0.25);
    }

    /* Top shine line */
    .bin-card::after {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
      pointer-events: none;
    }

    /* Shimmer sweep */
    .bin-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.055) 50%, transparent 70%);
      transform: translateX(-120%);
      transition: transform 0.55s ease;
      pointer-events: none;
    }

    .bin-card:hover::before { transform: translateX(120%); }

    .bin-card.rubbish {
      background: rgba(255,255,255,0.06);
    }
    .bin-card.recycle {
      background: rgba(7,185,138,0.09);
      border-color: rgba(7,185,138,0.2);
    }
    .bin-card.recycling {
      background: rgba(7,185,138,0.09);
      border-color: rgba(7,185,138,0.2);
    }
    .bin-card.food {
      background: rgba(232,146,58,0.09);
      border-color: rgba(232,146,58,0.2);
    }
    .bin-card.garden {
      background: rgba(72,187,120,0.09);
      border-color: rgba(72,187,120,0.2);
    }
    .bin-card.bulk {
      background: rgba(148,163,184,0.08);
      border-color: rgba(148,163,184,0.18);
    }
    .bin-card.na {
      background: rgba(255,255,255,0.03);
      opacity: 0.5;
    }

    .bin-icon {
      font-size: 1.75rem;
      width: 2.5rem;
      text-align: center;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      align-self: center;
      min-height: 100%;
      line-height: 1;
    }
    .bin-info {
      flex: 1;
      min-width: 0;
      min-height: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.15rem;
    }

    .bin-type {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink-subtle);
      margin-bottom: 0.4rem;
    }

    .bin-date,
    .countdown-label {
      font-size: 1.125rem;
      font-weight: 600;
      font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', monospace;
      line-height: 1.25;
    }

    .bin-date {
      color: #fff;
    }

    .bin-sub { font-size: 0.8125rem; color: rgba(255,255,255,0.3); margin-top: 0.35rem; line-height: 1.5; }

    .bin-date.na-text { font-size: 1.125rem; font-weight: 600; color: #fff; }

    .lid-dot.red { background: #ef4444; }
    .lid-dot.yellow { background: #eab308; }
    .lid-dot.green { background: #22c55e; }

    /* Reminder */
    .reminder {
      margin-top: 0.625rem;
      background: rgba(232,146,58,0.09);
      border: 1px solid rgba(232,146,58,0.22);
      border-radius: 12px;
      padding: 0.875rem 1.125rem;
      font-size: 0.875rem;
      color: rgba(253,210,150,0.9);
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      line-height: 1.55;
      backdrop-filter: blur(10px);
    }

    .view-link { margin-top: 1.5rem; text-align: right; }

    .view-link a {
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(7,185,138,0.7);
      text-decoration: none;
      transition: color 0.15s;
    }

    .view-link a:hover { color: var(--accent); }

    /* ── Footer ── */
    footer {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 2rem 1.5rem;
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.2);
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .site-footer-inline {
      text-align: center;
    }

    .site-footer-inline a {
      display: inline-block;
      margin-bottom: 0;
    }

    .footer-top-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .footer-credit {
      background: linear-gradient(90deg, #8dfbe0, #60a5fa, #d946ef, #8dfbe0);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 300;
      animation: footerGradientShift 6s linear infinite;
    }

    .footer-credit span {
      display: block;
      line-height: 1.18;
    }

    footer a { color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.15s; font-weight: 300; }
    footer a:hover { color: rgba(255,255,255,0.6); }

    footer a.footer-credit:hover {
      color: transparent;
    }

    @keyframes footerGradientShift {
      to { background-position: 240% center; }
    }

    /* ── Card entrance ── */
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .card-enter {
      opacity: 0;
      animation: cardIn 0.45s var(--ease-out) forwards;
    }

    /* ── Bottom two-column row ── */
    .bottom-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 1.5rem;
      align-items: start;
    }

    @media (max-width: 600px) {
      .bottom-row { grid-template-columns: 1fr; }
    }

    .bottom-row .cal-section,
    .bottom-row .bin-guide { margin-top: 0; }

    /* ── Calendar ── */
    .cal-section { margin-top: 1.5rem; }

    .cal-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.875rem;
    }

    .cal-label {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-subtle);
    }

    .ics-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.875rem;
      background: rgba(7,185,138,0.1);
      border: 1px solid rgba(7,185,138,0.25);
      color: var(--accent);
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
      white-space: nowrap;
    }

    .ics-btn:hover {
      background: rgba(7,185,138,0.18);
      box-shadow: 0 0 16px rgba(7,185,138,0.2);
      transform: translateY(-1px);
    }

    .ics-btn:active { transform: scale(0.96); }

    .ics-btn-shell {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      flex: 0 0 auto;
    }

    .cal-month {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      padding: 1.125rem 1rem 1rem;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .cal-month-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    .cal-month-name {
      font-size: 0.75rem;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      text-align: center;
    }

    .cal-nav-btn {
      background: none;
      border: none;
      color: rgba(255,255,255,0.35);
      cursor: pointer;
      padding: 0.2rem 0.45rem;
      border-radius: 6px;
      font-size: 1rem;
      line-height: 1;
      transition: background 0.15s, color 0.15s;
    }

    .cal-nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
    .cal-nav-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    .cal-dow {
      font-size: 0.5625rem;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--ink-subtle);
      text-align: center;
      padding-bottom: 0.3rem;
    }

    .cal-day {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      aspect-ratio: 1;
      gap: 0.3rem;
      padding: 0.35rem 0.2rem 0.3rem;
      font-size: 0.6875rem;
      color: rgba(255,255,255,0.45);
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.09);
    }

    .cal-day-num { text-align: center; line-height: 1.2; flex-shrink: 0; }

    .cal-day.today { color: #fff; font-weight: 700; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
    .cal-day.empty { visibility: hidden; border: none; }
    .cal-day.past  { color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.05); }

    .cal-dots {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: stretch;
      justify-content: center;
      flex: 1;
    }

    .cal-dot {
      border-radius: 9999px;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      padding: 3px 6px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
    }
    /* Auckland colours */
    .cal-dot.rubbish { background: rgba(148,163,184,0.18); color: #94a3b8; }
    .cal-dot.recycle { background: rgba(7,185,138,0.18);   color: #07B98A; }
    .cal-dot.glass   { background: rgba(59,130,246,0.18);  color: #60a5fa; }
    .cal-dot.food    { background: rgba(232,146,58,0.2);   color: #e8923a; }

    /* Hutt overrides — red lid / yellow lid / green lid */
    [data-city="hutt"] .cal-dot.rubbish { background: rgba(239,68,68,0.2);   color: #ef4444; }
    [data-city="hutt"] .cal-dot.recycle { background: rgba(234,179,8,0.2);   color: #eab308; }
    [data-city="hutt"] .cal-dot.food    { background: rgba(34,197,94,0.18);  color: #22c55e; }

    .cal-legend {
      display: flex;
      gap: 0.875rem;
      flex-wrap: wrap;
      margin-top: 0.75rem;
      padding-top: 0.625rem;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.6875rem;
      color: var(--ink-subtle);
    }

    .legend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

    /* ── Theme toggle ── */
    .theme-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 30;
      width: 2.75rem;
      height: 2.75rem;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 9999px;
      background: rgba(255,255,255,0.06);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: background 0.2s, border-color 0.2s, transform 0.25s var(--ease-spring);
    }

    .theme-toggle:hover { background: rgba(255,255,255,0.13); transform: rotate(22deg) scale(1.05); }

    .theme-icon svg {
      display: block;
      width: 1.08rem;
      height: 1.08rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── Urgency banner ── */
    .urgency-banner {
      margin-bottom: 1.5rem;
      border-radius: 14px;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.875rem;
      font-weight: 600;
      font-size: 0.9375rem;
      line-height: 1.4;
    }

    .urgency-banner.today {
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.32);
      color: #fca5a5;
    }

    .urgency-banner.tomorrow {
      background: rgba(251,146,60,0.1);
      border: 1px solid rgba(251,146,60,0.28);
      color: #fdba74;
    }

    .urgency-banner-icon { font-size: 1.625rem; flex-shrink: 0; line-height: 1; }
    .urgency-banner-sub  { font-size: 0.8125rem; font-weight: 400; opacity: 0.75; margin-top: 0.15rem; }

    /* ── Urgency pill on bin card ── */
    .urgency-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.12rem 0.5rem;
      border-radius: 9999px;
      font-size: 0.5625rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      vertical-align: middle;
      margin-left: 0.45rem;
    }

    .urgency-pill.today {
      background: rgba(239,68,68,0.2);
      color: #fca5a5;
      border: 1px solid rgba(239,68,68,0.4);
      animation: urgency-blink 1.4s ease-in-out infinite;
    }

    .urgency-pill.tomorrow {
      background: rgba(251,146,60,0.18);
      color: #fdba74;
      border: 1px solid rgba(251,146,60,0.35);
    }

    @keyframes urgency-blink {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }

    .bin-card.urgency-today {
      border-color: rgba(239,68,68,0.32) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 0 0 1px rgba(239,68,68,0.18),
        0 8px 32px rgba(239,68,68,0.12) !important;
    }

    .bin-card.urgency-tomorrow {
      border-color: rgba(251,146,60,0.28) !important;
    }

    /* ── Recent addresses in dropdown ── */
    .dd-recents-label {
      padding: 0.5rem 1rem 0.3rem;
      font-size: 0.5625rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-subtle);
    }

    .dd-item.dd-recent {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      color: rgba(255,255,255,0.6);
    }

    .dd-recent-icon { font-size: 0.75rem; opacity: 0.5; flex-shrink: 0; }

    .lid-dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      margin-right: 0.3rem;
      vertical-align: middle;
      position: relative; top: -1px;
      box-shadow: 0 0 0 1.5px rgba(0,0,0,0.2);
    }

    .dd-recent-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .dd-recent-remove {
      flex-shrink: 0;
      width: 1.375rem;
      height: 1.375rem;
      border-radius: 50%;
      border: none;
      background: none;
      color: rgba(255,255,255,0.22);
      font-size: 0.75rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s, color 0.12s;
      margin-left: auto;
    }

    .dd-recent-remove:hover {
      background: rgba(239,68,68,0.18);
      color: #f87171;
    }

    [data-theme="light"] .dd-recent-remove { color: rgba(14,14,26,0.25); }
    [data-theme="light"] .dd-recent-remove:hover { background: rgba(239,68,68,0.12); color: #dc2626; }

    /* ── Share button ── */
    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.875rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.5);
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
      white-space: nowrap;
    }

    .share-btn:hover {
      background: rgba(255,255,255,0.09);
      color: rgba(255,255,255,0.8);
      transform: translateY(-1px);
    }

    .share-btn:active { transform: scale(0.96); }
    .share-btn.copied { color: var(--accent); border-color: rgba(7,185,138,0.35); background: rgba(7,185,138,0.08); }

    /* ── Bin guide ── */
    .bin-guide {
      margin-top: 1.5rem;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(255,255,255,0.03);
    }

    .bin-guide-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.875rem 1.125rem;
      background: none;
      border: none;
      color: var(--ink-muted);
      font-family: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      transition: color 0.15s, background 0.15s;
      gap: 0.5rem;
    }

    .bin-guide-toggle:hover { color: var(--ink); background: rgba(255,255,255,0.03); }

    .bin-guide-chevron { transition: transform 0.25s var(--ease-out); flex-shrink: 0; }
    .bin-guide.open .bin-guide-chevron { transform: rotate(180deg); }

    .bin-guide-content {
      padding: 0 1rem 1rem;
      display: none;
    }

    .bin-guide.open .bin-guide-content { display: block; }

    .bin-guide-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 0.625rem;
    }

    .bin-guide-card {
      border-radius: 10px;
      padding: 0.875rem 1rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
    }

    .bin-guide-card.rubbish { border-color: rgba(148,163,184,0.2); }
    .bin-guide-card.recycle { border-color: rgba(7,185,138,0.18); }
    .bin-guide-card.food    { border-color: rgba(232,146,58,0.18); }

    .bin-guide-title {
      font-size: 0.75rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .bin-guide-list {
      list-style: none;
      font-size: 0.7375rem;
      color: var(--ink-muted);
      line-height: 1.75;
    }

    .bin-guide-list li.yes::before { content: '✓ '; color: var(--accent); font-weight: 700; }
    .bin-guide-list li.no::before  { content: '✕ '; color: #f87171; font-weight: 700; }
    .bin-guide-list li.no          { margin-top: 0.25rem; }

    /* ── Light mode ── */
    [data-theme="light"] {
      --glass-bg:     rgba(255,255,255,0.65);
      --glass-border: rgba(0,0,0,0.09);
      --glass-shine:  rgba(255,255,255,0.95);
      --ink:          #18322d;
      --ink-muted:    rgba(24,50,45,0.58);
      --ink-subtle:   rgba(24,50,45,0.38);
      --accent:       #0f8f7b;
    }

    [data-theme="light"] body { background: #f6f1e8; }

    [data-theme="light"] .hero h1 span {
      background: linear-gradient(135deg, #0b6fa4 0%, #14948d 52%, #5cb8a6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow:
        0 0 12px rgba(12,130,173,0.24),
        0 0 26px rgba(20,148,141,0.18),
        0 0 46px rgba(92,184,166,0.14);
      animation: logoShimmerLight 5.2s ease-in-out infinite;
    }

    [data-theme="light"] .hero h1 span::after {
      background: linear-gradient(90deg, #0b6fa4, #14948d, #5cb8a6);
    }

    [data-theme="light"] .hero h1 a {
      filter: drop-shadow(0 0 24px rgba(20,148,141,0.2));
    }

    [data-theme="light"] .hero h1 a::before {
      background:
        radial-gradient(circle at 50% 50%, rgba(207,239,248,0.3) 0%, rgba(129,204,220,0.24) 24%, rgba(20,148,141,0.14) 48%, rgba(11,111,164,0.08) 64%, transparent 78%),
        radial-gradient(circle at 50% 50%, rgba(151,227,214,0.18) 0%, rgba(92,184,166,0.08) 44%, transparent 70%);
      opacity: 0.84;
      filter: blur(22px);
    }

    [data-theme="light"] .hero h1 a::after {
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.24) 24%, rgba(129,204,220,0.34) 50%, transparent 76%);
    }

    [data-theme="light"] {
      --switcher-accent: #0f8f7b;
      --switcher-accent-glow: rgba(15,143,123,0.3);
      --switcher-accent-dim: rgba(15,143,123,0.1);
      --switcher-accent-border: rgba(15,143,123,0.22);
    }

    [data-theme="light"] .city-btn.active {
      color: #f8fffd;
      font-weight: 700;
      text-shadow: 0 1px 0 rgba(0,0,0,0.08);
    }

    [data-theme="light"] .hero-sub { color: rgba(24,50,45,0.66); }
    [data-theme="light"] .hero-sub a {
      color: #0f8f7b;
      text-decoration-color: rgba(15,143,123,0.3);
    }

    [data-theme="light"] .live-chip {
      color: rgba(24,50,45,0.72);
      background: rgba(15,143,123,0.12);
      border-color: rgba(15,143,123,0.2);
    }

    [data-theme="light"] .cal-dot.recycle {
      background: rgba(15,143,123,0.14);
      color: #0f8f7b;
    }
    [data-theme="light"] .cal-dot.glass {
      background: rgba(47,109,178,0.16);
      color: #2f6db2;
    }

    [data-theme="light"] .blob-1 { background: radial-gradient(circle, rgba(42,163,145,0.18) 0%, transparent 60%); }
    [data-theme="light"] .blob-2 { background: radial-gradient(circle, rgba(213,154,67,0.1) 0%, transparent 60%); }
    [data-theme="light"] .blob-3 { background: radial-gradient(circle, rgba(114,176,213,0.08) 0%, transparent 60%); }

    [data-theme="light"] #cursor-glow { background: radial-gradient(circle, rgba(15,143,123,0.06) 0%, transparent 65%); }

    [data-theme="light"] .theme-toggle {
      background: rgba(255,249,240,0.74);
      border-color: rgba(24,50,45,0.12);
      color: rgba(24,50,45,0.8);
      box-shadow: 0 10px 30px rgba(103,85,54,0.08);
    }

    [data-theme="light"] .city-toggle {
      background: rgba(255,249,241,0.64);
      border-color: rgba(24,50,45,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }

    [data-theme="light"] .city-btn { color: rgba(24,50,45,0.54); }
    [data-theme="light"] .city-btn.recent:not(.active) {
      color: rgba(24,50,45,0.8);
      background: rgba(15,143,123,0.06);
      box-shadow: inset 0 0 0 1px rgba(15,143,123,0.14);
    }
    [data-theme="light"] .city-btn.recent:not(.active)::after {
      background: rgba(15,143,123,0.12);
      color: #0f8f7b;
    }
    [data-theme="light"] .city-select-mobile {
      background: rgba(255,250,243,0.82);
      border-color: rgba(24,50,45,0.12);
      color: rgba(24,50,45,0.86);
    }

    [data-theme="light"] .city-select-mobile-wrap::after {
      background: rgba(0,0,0,0.07);
      color: rgba(24,50,45,0.45);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    }

    [data-theme="light"] .search-card {
      background: rgba(255,251,245,0.76);
      border-color: rgba(24,50,45,0.08);
      box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(123,97,62,0.05),
        0 24px 60px rgba(103,85,54,0.11);
    }

    [data-theme="light"] .search-card::before {
      background: conic-gradient(
        from var(--angle),
        rgba(15,143,123,0.55),
        rgba(74,164,155,0.42),
        rgba(213,154,67,0.35),
        rgba(15,143,123,0.08),
        rgba(15,143,123,0.55)
      );
    }

    [data-theme="light"] #searchBtn {
      background: rgba(15,143,123,0.12);
      border-color: rgba(15,143,123,0.28);
      color: #0f8f7b;
    }

    [data-theme="light"] #searchBtn::before {
      background: linear-gradient(105deg, transparent 35%, rgba(15,143,123,0.16) 50%, transparent 65%);
    }

    [data-theme="light"] #searchBtn:hover {
      background: rgba(15,143,123,0.18);
      border-color: rgba(15,143,123,0.42);
      box-shadow: 0 0 24px rgba(15,143,123,0.18), 0 4px 16px rgba(103,85,54,0.12);
    }

    [data-theme="light"] #searchBtn[data-ready="true"] {
      box-shadow: 0 0 18px rgba(15,143,123,0.14);
    }

    [data-theme="light"] .location-btn {
      background: rgba(255,249,241,0.82);
      border-color: rgba(24,50,45,0.1);
      color: rgba(24,50,45,0.8);
    }

    [data-theme="light"] .search-shortcut {
      background: rgba(255,249,241,0.78);
      border-color: rgba(24,50,45,0.09);
      color: rgba(24,50,45,0.66);
    }

    [data-theme="light"] .search-shortcut:hover {
      background: rgba(15,143,123,0.08);
      border-color: rgba(15,143,123,0.18);
      color: #18322d;
    }

    [data-theme="light"] .search-shortcut.restore {
      background: rgba(15,143,123,0.1);
      border-color: rgba(15,143,123,0.22);
      color: #0f5f54;
    }

    [data-theme="light"] .search-shortcut.restore:hover {
      background: rgba(15,143,123,0.16);
      border-color: rgba(15,143,123,0.32);
      color: #18322d;
    }

[data-theme="light"] .search-shortcut.example {
    color: rgba(24,50,45,0.64);
    background: rgba(255,255,255,0.52);
    border-color: rgba(24,50,45,0.09);
    box-shadow: none;
}

[data-theme="light"] .search-shortcut.example:hover {
    background: rgba(15,143,123,0.08);
    border-color: rgba(15,143,123,0.18);
    color: #18322d;
}

[data-theme="light"] .search-shortcut.example.spinning {
    color: #18322d;
    border-color: rgba(15,143,123,0.28);
  background: radial-gradient(circle at 1.1rem 50%, rgba(15,143,123,0.14), transparent 34%), rgba(255,255,255,0.8);
    box-shadow: 0 0 0 1px rgba(15,143,123,0.08), 0 12px 24px rgba(15,143,123,0.09);
}

[data-theme="light"] .shortcut-icon {
    color: #0f8f7b;
}

    [data-theme="light"] .location-btn:hover {
      background: rgba(15,143,123,0.08);
      border-color: rgba(15,143,123,0.2);
      color: #0f8f7b;
    }

    [data-theme="light"] .location-hint { color: rgba(24,50,45,0.58); }
    [data-theme="light"] .location-hint[data-tone="good"] { color: #0f8f7b; }
    [data-theme="light"] .location-hint[data-tone="warn"] { color: #ab5f1f; }
    [data-theme="light"] .source-note { color: rgba(24,50,45,0.64); }
    [data-theme="light"] .source-note a { text-decoration-color: rgba(24,50,45,0.2); }
    [data-theme="light"] .source-note-card {
      border-color: rgba(24,50,45,0.065);
      background: rgba(255,255,255,0.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    }
    [data-theme="light"] .source-note-card.good {
      border-color: rgba(15,143,123,0.12);
      background: rgba(255,255,255,0.54);
      color: rgba(24,50,45,0.76);
    }
    [data-theme="light"] .source-note-card.warn {
      border-color: rgba(217,119,6,0.12);
      background: rgba(255,255,255,0.54);
      color: rgba(24,50,45,0.76);
    }
    [data-theme="light"] .source-note-card.bad {
      border-color: rgba(24,50,45,0.065);
      background: rgba(255,255,255,0.54);
      color: rgba(24,50,45,0.76);
    }
    [data-theme="light"] .source-note-health {
      border-color: rgba(24,50,45,0.065);
      background: rgba(255,255,255,0.55);
      color: rgba(24,50,45,0.66);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    }
    [data-theme="light"] .source-note-health.good {
      border-color: rgba(15,143,123,0.12);
      background: rgba(255,255,255,0.55);
      color: rgba(24,50,45,0.72);
    }
    [data-theme="light"] .source-note-health.warn {
      border-color: rgba(217,119,6,0.12);
      background: rgba(255,255,255,0.55);
      color: rgba(24,50,45,0.72);
    }
    [data-theme="light"] .source-note-health.bad {
      border-color: rgba(220,38,38,0.12);
      background: rgba(255,255,255,0.55);
      color: rgba(24,50,45,0.72);
    }

    [data-theme="light"] #addressInput {
      background: rgba(255,255,255,0.78);
      color: rgba(24,50,45,0.9);
      border-color: rgba(24,50,45,0.12);
    }

    [data-theme="light"] #addressInput::placeholder { color: rgba(24,50,45,0.34); }

    [data-theme="light"] #addressInput:focus {
      background: rgba(255,255,255,0.94);
      border-color: rgba(15,143,123,0.46);
      box-shadow: 0 0 0 3px rgba(15,143,123,0.1);
    }

    [data-theme="light"] .dropdown {
      background: rgba(250,247,240,0.98);
      border-color: rgba(24,50,45,0.1);
      box-shadow: 0 20px 50px rgba(103,85,54,0.12);
    }

    [data-theme="light"] .dd-item { color: rgba(24,50,45,0.76); border-color: rgba(24,50,45,0.06); }
    [data-theme="light"] .dd-item:hover, [data-theme="light"] .dd-item.hi { background: rgba(15,143,123,0.08); color: #18322d; }
    [data-theme="light"] .dd-item.empty { color: rgba(24,50,45,0.34); }
    [data-theme="light"] .dd-item-badge {
      color: rgba(24,50,45,0.66);
      background: rgba(24,50,45,0.05);
      border-color: rgba(24,50,45,0.1);
    }
    [data-theme="light"] .dd-item-badge.exact {
      color: #0f7d67;
      background: rgba(15,143,123,0.12);
      border-color: rgba(15,143,123,0.22);
    }
    [data-theme="light"] .dd-item-badge.street {
      color: #0f6fa4;
      background: rgba(15,111,164,0.1);
      border-color: rgba(15,111,164,0.2);
    }
    [data-theme="light"] .dd-item-badge.area {
      color: #6f59a8;
      background: rgba(111,89,168,0.1);
      border-color: rgba(111,89,168,0.18);
    }
    [data-theme="light"] .dd-recents-label { color: rgba(24,50,45,0.4); }

    [data-theme="light"] .bin-card {
      border-color: rgba(24,50,45,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 28px rgba(103,85,54,0.08);
    }

    [data-theme="light"] .bin-card.rubbish { background: rgba(255,255,255,0.68); }
    [data-theme="light"] .bin-card.recycle { background: rgba(15,143,123,0.08); border-color: rgba(15,143,123,0.18); }
    [data-theme="light"] .bin-card.recycling { background: rgba(15,143,123,0.08); border-color: rgba(15,143,123,0.18); }
    [data-theme="light"] .bin-card.food    { background: rgba(217,131,69,0.1); border-color: rgba(217,131,69,0.2); }
    [data-theme="light"] .bin-card.garden  { background: rgba(72,187,120,0.09); border-color: rgba(72,187,120,0.2); }
    [data-theme="light"] .bin-card.bulk    { background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.18); }
    [data-theme="light"] .bin-card.na      { background: rgba(80,69,50,0.04); }

    [data-theme="light"] .bin-type { color: rgba(24,50,45,0.54); }
    [data-theme="light"] .bin-date { color: #18322d; }
    [data-theme="light"] .bin-date.na-text { color: rgba(24,50,45,0.72); }
    [data-theme="light"] .bin-sub  { color: rgba(24,50,45,0.42); }

    [data-theme="light"] .result-address-text { color: rgba(24,50,45,0.9); }
    [data-theme="light"] .status { color: rgba(24,50,45,0.48); }
    [data-theme="light"] .status.error { color: #dc2626; }
    [data-theme="light"] .status-title { color: #18322d; }

    [data-theme="light"] :where(
      .theme-toggle,
      .city-btn,
      .city-select-mobile,
      #searchBtn,
      #clearBtn,
      .dd-item,
      .notify-btn,
      .share-btn,
      .ics-btn,
      .cal-nav-btn,
      .bin-guide-toggle,
      .last-address-btn
    ):focus-visible,
    [data-theme="light"] #addressInput:focus-visible {
      outline-color: rgba(15,143,123,0.88);
    }

    [data-theme="light"] .reminder {
      background: rgba(217,131,69,0.12);
      border-color: rgba(217,131,69,0.28);
      color: rgba(139,81,25,0.92);
    }

    [data-theme="light"] .holiday-banner {
      background: rgba(250,204,21,0.12);
      border-color: rgba(217,154,67,0.36);
      color: rgba(126,92,24,0.92);
    }

    [data-theme="light"] .provider-note {
      background: rgba(255,251,245,0.72);
      border-color: rgba(24,50,45,0.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.88),
        0 8px 24px rgba(103,85,54,0.08);
      color: rgba(24,50,45,0.68);
    }

    [data-theme="light"] .provider-note-icon {
      background: rgba(15,143,123,0.12);
      color: #0f7d67;
    }

    [data-theme="light"] .provider-note-title {
      color: rgba(24,50,45,0.84);
    }

    [data-theme="light"] .provider-note a {
      text-decoration-color: rgba(24,50,45,0.2);
    }

    [data-theme="light"] .urgency-banner.today {
      background: rgba(239,68,68,0.1);
      border-color: rgba(239,68,68,0.28);
      color: #b91c1c;
    }

    [data-theme="light"] .urgency-banner.tomorrow {
      background: rgba(251,146,60,0.1);
      border-color: rgba(251,146,60,0.28);
      color: #c2410c;
    }

    [data-theme="light"] .urgency-pill.today { background: rgba(239,68,68,0.15); color: #b91c1c; }
    [data-theme="light"] .urgency-pill.tomorrow { background: rgba(251,146,60,0.15); color: #c2410c; }

    [data-theme="light"] .cal-month {
      background: rgba(255,251,245,0.7);
      border-color: rgba(24,50,45,0.08);
    }

    [data-theme="light"] .cal-month-name { color: rgba(24,50,45,0.68); }
    [data-theme="light"] .cal-nav-btn { color: rgba(24,50,45,0.42); }
    [data-theme="light"] .cal-nav-btn:hover { background: rgba(24,50,45,0.06); color: #18322d; }
    [data-theme="light"] .cal-day { color: rgba(24,50,45,0.54); border-color: rgba(24,50,45,0.09); }
    [data-theme="light"] .cal-day.today { color: #18322d; background: rgba(15,143,123,0.1); border-color: rgba(15,143,123,0.24); }
    [data-theme="light"] .cal-day.past  { color: rgba(24,50,45,0.24); border-color: rgba(24,50,45,0.05); }
    [data-theme="light"] .cal-dow { color: rgba(24,50,45,0.38); }
    [data-theme="light"] .cal-legend { border-color: rgba(24,50,45,0.06); }

    [data-theme="light"] .ics-btn {
      background: rgba(15,143,123,0.08);
      border-color: rgba(15,143,123,0.22);
      color: #0f8f7b;
    }

    [data-theme="light"] .ics-btn:hover {
      background: rgba(15,143,123,0.14);
      box-shadow: 0 0 16px rgba(15,143,123,0.14);
    }

    [data-theme="light"] .share-btn {
      background: rgba(255,249,241,0.82);
      border-color: rgba(24,50,45,0.12);
      color: rgba(24,50,45,0.56);
    }

    [data-theme="light"] .share-btn:hover {
      background: rgba(24,50,45,0.07);
      color: rgba(24,50,45,0.84);
    }

    .calendar-link-btn,
    .calendar-link-btn:hover,
    .calendar-link-btn:active {
      transform: none;
      box-shadow: none;
    }

    .calendar-link-btn:hover {
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.5);
    }

    [data-theme="light"] .calendar-link-btn:hover {
      background: rgba(24,50,45,0.05);
      color: rgba(24,50,45,0.58);
    }

    [data-theme="light"] .notify-btn {
      background: rgba(255,249,241,0.82);
      border-color: rgba(24,50,45,0.12);
      color: rgba(24,50,45,0.58);
    }

    [data-theme="light"] .notify-btn:hover {
      background: rgba(15,143,123,0.08);
      border-color: rgba(15,143,123,0.24);
      color: var(--accent);
    }

    [data-theme="light"] .notify-btn.granted {
      background: rgba(15,143,123,0.08);
      border-color: rgba(15,143,123,0.22);
    }

    [data-theme="light"] .notify-btn.unavailable {
      background: rgba(255,249,241,0.74);
      border-color: rgba(24,50,45,0.1);
      color: rgba(24,50,45,0.4);
      cursor: not-allowed;
      box-shadow: none;
    }

    [data-theme="light"] .result-freshness {
      border-color: rgba(24,50,45,0.08);
      background: rgba(255,255,255,0.52);
      color: rgba(24,50,45,0.68);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    }

    [data-theme="light"] .result-freshness-icon {
      background: rgba(24,50,45,0.08);
      color: rgba(24,50,45,0.62);
    }

    [data-theme="light"] .result-freshness-label {
      color: rgba(24,50,45,0.84);
    }

    [data-theme="light"] .result-freshness.direct {
      border-color: rgba(15,143,123,0.18);
      background: rgba(15,143,123,0.08);
    }

    [data-theme="light"] .result-freshness.projected {
      border-color: rgba(217,119,6,0.18);
      background: rgba(245,158,11,0.09);
    }

    [data-theme="light"] .result-freshness.limited {
      border-color: rgba(24,50,45,0.1);
      background: rgba(255,255,255,0.48);
    }

    [data-theme="light"] .bin-guide {
      background: rgba(255,250,244,0.56);
      border-color: rgba(24,50,45,0.08);
    }

    [data-theme="light"] .bin-guide-card {
      background: rgba(255,255,255,0.76);
      border-color: rgba(24,50,45,0.08);
    }

    [data-theme="light"] .bin-guide-card.recycle { border-color: rgba(15,143,123,0.2); }
    [data-theme="light"] .bin-guide-card.food    { border-color: rgba(217,131,69,0.2); }
    [data-theme="light"] .bin-guide-toggle { color: rgba(24,50,45,0.58); }
    [data-theme="light"] .bin-guide-toggle:hover { color: rgba(24,50,45,0.84); background: rgba(24,50,45,0.03); }
    [data-theme="light"] .bin-guide-title { color: rgba(24,50,45,0.8); }
    [data-theme="light"] .bin-guide-list { color: rgba(24,50,45,0.58); }

    [data-theme="light"] .view-link a { color: rgba(15,143,123,0.9); }

    [data-theme="light"] footer {
      color: rgba(24,50,45,0.38);
      border-color: rgba(24,50,45,0.08);
    }

    [data-theme="light"] footer a { color: rgba(24,50,45,0.5); }
    [data-theme="light"] footer a:hover { color: rgba(24,50,45,0.78); }

    [data-theme="light"] .footer-emoji {
      filter: drop-shadow(0 8px 16px rgba(15,143,123,0.12));
    }

    /* ── Holiday banner ── */
    .holiday-banner {
      margin-top: 1.5rem;
      background: rgba(250,204,21,0.08);
      border: 1px solid rgba(250,204,21,0.28);
      border-radius: 12px;
      padding: 0.875rem 1.125rem;
      font-size: 0.875rem;
      font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', monospace;
      color: rgba(253,240,160,0.9);
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      line-height: 1.55;
      backdrop-filter: blur(10px);
    }

    .provider-note {
      margin-top: 1.5rem;
      display: flex;
      gap: 0.875rem;
      align-items: flex-start;
      padding: 0.95rem 1.125rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.045);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      font-size: 0.875rem;
      line-height: 1.6;
      color: rgba(255,255,255,0.74);
      backdrop-filter: blur(10px);
    }

    .provider-note-icon {
      width: 1.6rem;
      height: 1.6rem;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(7,185,138,0.12);
      color: var(--accent);
      font-size: 0.86rem;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .provider-note-copy {
      min-width: 0;
      flex: 1 1 auto;
    }

    .provider-note-title {
      display: block;
      margin-bottom: 0.2rem;
      color: rgba(255,255,255,0.9);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .provider-note a {
      color: inherit;
      text-decoration-color: rgba(255,255,255,0.22);
      text-underline-offset: 0.16em;
    }

    /* ── Notify row ── */
    .notify-row {
      margin-top: 0;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }

    .notify-row::-webkit-scrollbar {
      display: none;
    }

    .notify-row-left {
      display: contents;
    }

    .notify-row-right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
    }

    .calendar-actions {
      display: contents;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
    }

    .result-freshness {
      margin-top: -0.5rem;
      margin-bottom: 1.1rem;
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      padding: 0.8rem 0.95rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.72);
      line-height: 1.55;
      backdrop-filter: blur(10px);
    }

    .result-freshness-icon {
      width: 1.35rem;
      height: 1.35rem;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.78);
      font-size: 0.7rem;
      line-height: 1;
    }

    .result-freshness-copy {
      min-width: 0;
      flex: 1 1 auto;
      font-size: 0.8rem;
    }

    .result-freshness-label {
      display: block;
      margin-bottom: 0.12rem;
      color: rgba(255,255,255,0.88);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .result-freshness.direct {
      border-color: rgba(7,185,138,0.16);
      background: rgba(7,185,138,0.08);
    }

    .result-freshness.projected {
      border-color: rgba(251,191,36,0.18);
      background: rgba(251,191,36,0.08);
    }

    .result-freshness.limited {
      border-color: rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.03);
    }

    .notify-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 1rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.6);
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
      white-space: nowrap;
    }

    .notify-btn:hover {
      background: rgba(7,185,138,0.1);
      border-color: rgba(7,185,138,0.3);
      color: var(--accent);
      transform: translateY(-1px);
    }

    .notify-btn:active { transform: scale(0.96); }

    .notify-btn.granted {
      background: rgba(7,185,138,0.1);
      border-color: rgba(7,185,138,0.25);
      color: var(--accent);
    }

    .notify-btn.unavailable {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.38);
      cursor: not-allowed;
      box-shadow: none;
    }

    .notify-btn.unavailable:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.38);
      transform: none;
    }

    /* ── Mobile ── */
    @media (max-width: 640px) {
      .bg,
      #cursor-glow {
        display: none;
      }

      .blob,
      .pulse-dot,
      .hero h1 span,
      .hero h1 a::before,
      .hero h1 a::after,
      .search-card::before,
      .footer-emoji-heart,
      .footer-emoji-recycle,
      .skeleton-shimmer,
      .swipe-hint {
        animation: none !important;
      }

      .hero h1,
      .hero-sub,
      .search-wrap,
      .city-toggle-row {
        opacity: 1;
        transform: none;
      }

      .search-card {
        backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
        -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.03);
        border-radius: 22px;
        box-shadow:
          inset 0 1.5px 0 rgba(255,255,255,0.18),
          inset 0 -1px 0 rgba(0,0,0,0.12),
          0 24px 56px rgba(0,0,0,0.34);
      }

      .hero-inner,
      .search-wrap {
        width: 100%;
        padding: 0 1rem;
      }

      main {
        flex: 0 0 auto;
        min-height: 0;
        padding: 0.9rem 1rem 1.1rem;
      }

      main:empty {
        padding-top: 0.65rem;
        padding-bottom: 0;
      }

      footer {
        padding: 1.75rem 1rem 2rem;
      }

      .search-card {
        padding: 1.2rem 1rem 1.1rem;
        display: flex;
        flex-direction: column;
      }

      .search-card .city-toggle-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.65rem;
        width: 100%;
        min-width: 0;
        margin-bottom: 0.9rem;
      }

      .search-card .city-toggle {
        display: none;
      }

      .city-select-mobile-wrap {
        display: block;
        order: 2;
      }

      .search-card .live-chip {
        display: inline-flex;
        order: 1;
        align-self: flex-start;
        max-width: 100%;
      }
      .swipe-hint { display: none; }

      .search-shortcuts {
        width: 100%;
        order: 4;
        margin-top: 0.75rem;
        margin-bottom: 0.85rem;
      }

      .search-shortcut {
        width: 100%;
        max-width: none;
        min-height: 2.45rem;
        min-width: 0;
        padding: 0.58rem 0.72rem;
      }

      .search-shortcut.example {
        width: 100%;
        justify-content: center;
        margin-left: 0;
      }

      .search-shortcut.example .shortcut-text {
        font-size: 0.78rem;
        font-weight: 700;
      }

      .input-row {
        order: 3;
        flex-direction: column;
        gap: 0.78rem;
      }

      .input-field-wrap {
        width: 100%;
      }

      #addressInput {
        min-height: 3.35rem;
        padding: 1rem 2.75rem 1rem 1rem;
        font-size: 1rem;
      }

      #clearBtn {
        right: 0.7rem;
        width: 1.8rem;
        height: 1.8rem;
      }

      #searchBtn {
        width: 100%;
        min-width: 0;
        min-height: 3.15rem;
        justify-content: center;
        text-align: center;
      }

      .dropdown {
        top: calc(100% + 10px);
        border-radius: 16px;
        max-height: min(60vh, 26rem);
        box-shadow: 0 20px 44px rgba(0,0,0,0.52);
      }

      .dd-item {
        padding: 0.95rem 1rem;
      }

      .dd-item-row {
        align-items: flex-start;
        gap: 0.55rem;
      }

      .dd-item-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
        word-break: break-word;
      }

      .dd-item-badge {
        margin-top: 0.08rem;
        align-self: flex-start;
      }

      .dd-recents-label {
        padding: 0.8rem 1rem 0.45rem;
      }

      .dd-item.dd-recent {
        gap: 0.65rem;
        align-items: flex-start;
      }

      .dd-recent-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
      }

      .dd-recent-remove {
        width: 2rem;
        height: 2rem;
      }

      /* Reduce hero height — remove large blank space at top */
      .hero {
        min-height: 0;
        padding-top: 4.5rem;
        padding-bottom: 1.85rem;
        align-items: flex-end;
      }

      .hero h1 {
        font-size: clamp(2.8rem, 15vw, 4rem);
        margin-bottom: 1rem;
      }

      .hero-sub {
        max-width: 32rem;
        font-size: 0.98rem;
        line-height: 1.55;
      }

      /* ── Calendar mobile ── */
      .cal-month { padding: 0.875rem 0.75rem; }
      .cal-grid  { gap: 4px; }
      .cal-month-name { font-size: 0.6875rem; }

      .cal-day {
        padding: 0.3rem 0.15rem 0.25rem;
        gap: 0.2rem;
        border-radius: 4px;
        align-items: center;
      }

      .cal-day-num {
        width: 100%;
        text-align: center;
      }

      /* Chips → dots on mobile */
      .cal-dots {
        flex-direction: row;
        justify-content: center;
        gap: 2px;
        align-items: center;
        width: 100%;
        align-self: center;
      }

      .cal-dot {
        width: 5px;
        height: 5px;
        min-width: 5px;
        border-radius: 50%;
        padding: 0;
        font-size: 0;
        letter-spacing: 0;
        flex-shrink: 0;
        text-indent: -9999px;
        animation: calDotPulse 1.8s ease-in-out infinite;
      }

      /* Solid bright dot colours on mobile (instead of semi-transparent) */
      .cal-dot.rubbish { background: #94a3b8; box-shadow: 0 0 8px rgba(148,163,184,0.6); }
      .cal-dot.recycle { background: #07B98A; box-shadow: 0 0 8px rgba(7,185,138,0.7); }
      .cal-dot.glass   { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.7); }
      .cal-dot.food    { background: #e8923a; box-shadow: 0 0 8px rgba(232,146,58,0.68); }

      [data-theme="light"] .cal-dot.recycle { background: #0f8f7b; box-shadow: 0 0 8px rgba(15,143,123,0.52); }
      [data-theme="light"] .cal-dot.glass   { background: #2f6db2; box-shadow: 0 0 8px rgba(47,109,178,0.52); }

      .search-meta {
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem 0.65rem;
      }

      .location-hint {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
      }

      .search-meta {
        order: 5;
      }

      .last-address-btn-label {
        max-width: 11.5rem;
      }

      [data-city="hutt"] .cal-dot.rubbish { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.68); }
      [data-city="hutt"] .cal-dot.recycle { background: #eab308; box-shadow: 0 0 8px rgba(234,179,8,0.68); }
      [data-city="hutt"] .cal-dot.food    { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.68); }

      /* Mobile: keep collection card content left aligned */
      .bin-card { align-items: flex-start; justify-content: flex-start; }
      .bin-info { text-align: left; align-self: stretch; }

      /* Mobile: countdown stacked below date */
      .bin-date-row {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.15rem;
        text-align: left;
      }
      .bin-date,
      .bin-countdown {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
      }

      .urgency-banner,
      .holiday-banner,
      .result-address,
      .status,
      .notify-row,
      .bin-guide {
        width: 100%;
      }

      .notify-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.55rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.1rem;
      }

      .notify-row-left,
      .ics-btn-shell,
      .calendar-actions {
        display: contents;
      }

      .notify-row .share-btn,
      .notify-row .notify-btn,
      .notify-row .ics-btn {
        width: auto;
        flex: 0 0 auto;
        justify-content: center;
        min-height: 2.35rem;
        padding-inline: 0.7rem;
      }

      .notify-row-right,
      .calendar-actions {
        width: auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .city-toggle-row, .hero h1, .hero-sub, .search-wrap { opacity: 1; transform: none; }
    }

    /* ── Countdown line ── */
    .bin-date-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      gap: 0.35rem;
    }

    .bin-countdown {
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    /* Desktop: inline after date with green separator */
    @media (min-width: 641px) {
      .bin-countdown::before {
        content: '|';
        color: var(--accent);
        margin: 0 0.45rem;
        font-weight: 600;
      }
    }

    /* Mobile stacked layout handled in the main @media (max-width: 640px) block below */

    .countdown-indicator {
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      vertical-align: middle;
      position: relative; top: -1px;
      margin-right: 0.25em;
    }
    .countdown-indicator.countdown-today    { background: #fca5a5; box-shadow: 0 0 5px rgba(239,68,68,0.55); }
    .countdown-indicator.countdown-tomorrow { background: #fdba74; box-shadow: 0 0 5px rgba(251,146,60,0.45); }
    .countdown-indicator.countdown-soon     { background: var(--accent); box-shadow: 0 0 5px var(--accent-glow); }

    .countdown-label.countdown-today    { color: #fca5a5; }
    .countdown-label.countdown-tomorrow { color: #fdba74; }
    .countdown-label.countdown-soon     { color: var(--accent); }

    [data-theme="light"] .countdown-indicator.countdown-today    { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,0.4); }
    [data-theme="light"] .countdown-indicator.countdown-tomorrow { background: #f97316; box-shadow: 0 0 5px rgba(249,115,22,0.4); }
    [data-theme="light"] .countdown-indicator.countdown-soon     { box-shadow: 0 0 5px rgba(15,143,123,0.28); }
    [data-theme="light"] .countdown-label.countdown-today    { color: #b91c1c; }
    [data-theme="light"] .countdown-label.countdown-tomorrow { color: #c2410c; }

    /* ── Skeleton shimmer loading ── */
    @keyframes shimmer {
      0%   { background-position: -600px 0; }
      100% { background-position:  600px 0; }
    }

    .skeleton-shimmer {
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.11) 40%,
        rgba(255,255,255,0.04) 80%
      );
      background-size: 600px 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border-radius: 5px;
    }

    [data-theme="light"] .skeleton-shimmer {
      background: linear-gradient(
        90deg,
        rgba(0,0,0,0.04) 0%,
        rgba(0,0,0,0.10) 40%,
        rgba(0,0,0,0.04) 80%
      );
      background-size: 600px 100%;
    }

    .skeleton-card {
      background: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.07) !important;
      pointer-events: none;
    }

    .skeleton-icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .skeleton-line {
      border-radius: 5px;
    }

    .skeleton-line.title {
      width: 52%;
      height: 9px;
      margin-bottom: 12px;
    }

    .skeleton-line.date {
      width: 78%;
      height: 21px;
      margin-bottom: 10px;
    }

    .skeleton-line.meta {
      width: 42%;
      height: 9px;
      border-radius: 4px;
    }

    @keyframes calDotPulse {
      0%, 100% { transform: scale(1); opacity: 0.82; }
      50%      { transform: scale(1.24); opacity: 1; }
    }

    [data-theme="light"] .skeleton-card {
      background: rgba(255,255,255,0.5) !important;
      border-color: rgba(0,0,0,0.07) !important;
    }

    /* ── City swipe exit animation ── */
    @keyframes swipeExitLeft {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(-28px); }
    }
    @keyframes swipeExitRight {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(28px); }
    }

    #main.swipe-exit-left  { animation: swipeExitLeft  0.2s var(--ease-out) forwards; pointer-events: none; }
    #main.swipe-exit-right { animation: swipeExitRight 0.2s var(--ease-out) forwards; pointer-events: none; }

    /* ── Swipe city hint (fades in on mobile, then out) ── */
    .swipe-hint {
      text-align: center;
      font-size: 0.6875rem;
      color: var(--ink-subtle);
      letter-spacing: 0.05em;
      padding: 0.5rem 0 0;
      animation: fadeUp 0.4s var(--ease-out) 1.2s both, fadeOut 0.6s ease-in 4s forwards;
    }

    @keyframes fadeOut { to { opacity: 0; } }

    @media (pointer: fine) { .swipe-hint { display: none; } }

    /* UX pass: tighter first viewport and clearer search/result hierarchy. */
    .source-note {
      color: rgba(255,255,255,0.42);
    }

    .source-note-link a {
      color: rgba(255,255,255,0.72);
    }

    .source-note-coverage { display: none; }

    .status {
      min-height: 11rem;
      padding: 2.25rem 1.5rem;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      background: rgba(255,255,255,0.035);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .status:empty {
      display: none;
    }

    .status.loading {
      flex-direction: row;
      align-items: center;
      text-align: left;
    }

    .status-title {
      font-size: 1.05rem;
      letter-spacing: 0;
    }

    .result-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1.25rem;
      margin-bottom: 1.15rem;
      padding: 1.25rem 1.35rem;
      border: 1px solid rgba(96,165,250,0.22);
      border-radius: 14px;
      background: rgba(96,165,250,0.09);
      backdrop-filter: blur(48px) saturate(180%) brightness(1.06);
      -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(1.06);
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.1),
        0 8px 32px rgba(0,0,0,0.25);
    }

    .result-header::after {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
      pointer-events: none;
    }

    .result-header::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.055) 50%, transparent 70%);
      transform: translateX(-120%);
      transition: transform 0.55s ease;
      pointer-events: none;
    }

    .result-header:hover::before { transform: translateX(120%); }

    .result-label {
      margin-bottom: 0.28rem;
      color: rgba(255,255,255,0.48);
    }

    .result-address-text {
      font-size: 1rem;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .bins-grid {
      gap: 0.85rem;
    }

    .bin-card {
      border-radius: 14px;
      padding: 1.25rem 1.35rem;
    }

    .bin-type {
      margin-bottom: 0.28rem;
    }

    [data-theme="light"] .source-note {
      color: rgba(24,50,45,0.64);
    }

    [data-theme="light"] .source-note-link a {
      color: rgba(24,50,45,0.76);
    }

    .source-note .source-note-card {
      display: flex;
      width: fit-content;
      max-width: 100%;
    }

    .source-note .source-note-link {
      color: rgba(255,255,255,0.56);
      text-decoration: none;
    }

    [data-theme="light"] .status {
      border-color: rgba(24,50,45,0.08);
      background: rgba(255,255,255,0.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
    }

    [data-theme="light"] .result-header {
      border-color: rgba(37,99,235,0.16);
      background: rgba(37,99,235,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 28px rgba(37,99,235,0.08);
    }

    [data-theme="light"] .result-label {
      color: rgba(24,50,45,0.5);
    }

    @media (max-width: 640px) {
      .source-note-card {
        justify-content: flex-start;
        gap: 0.5rem;
      }

      .source-note-city {
        margin-left: 0;
      }

      .status {
        min-height: 9rem;
        padding: 1.5rem 1rem;
      }

      .status.loading,
      .result-header {
        flex-direction: column;
      }

      .result-header {
        padding: 1rem;
      }

      .result-header.schedule-card {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1.05rem 1rem;
      }

      .result-header.schedule-card .result-icon {
        align-self: center;
        width: 2.6rem;
        height: 2.6rem;
        min-width: 2.6rem;
        min-height: 0;
        font-size: 1.35rem;
      }

      .result-header.schedule-card .result-info {
        min-height: 0;
        text-align: left;
      }

      .bin-card {
        padding: 1.05rem 1rem;
      }
    }