html, body { height: 100%; }
      body {
        background:
          radial-gradient(1200px 600px at 10% -10%, #e0f2fe 0%, transparent 60%),
          radial-gradient(900px 500px at 110% 10%, #fef3c7 0%, transparent 55%),
          linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        background-attachment: fixed;
        color: #1f2937;
        -webkit-font-smoothing: antialiased;
      }
      .glass { background: rgba(255,255,255,0.72); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
      .card { background:#fff; border:1px solid #eef2f7; border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -16px rgba(15,23,42,0.10); }
      .chip { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:999px; font-size:.72rem; background:#f1f5f9; color:#475569; }
      .truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
      /* === Type scale utilities === */
      .text-meta { font-size: 12px; line-height: 1.5; }
      .text-h1   { font-size: 22px; font-weight: 600; line-height: 1.3; }
      .text-h2   { font-size: 18px; font-weight: 600; line-height: 1.35; }
      .text-display { font-size: 48px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
      @media (min-width: 640px) { .text-display { font-size: 56px; } }
      @media (min-width: 768px) { .text-display { font-size: 72px; } }
      .tnum { font-variant-numeric: tabular-nums; }
      /* === Footer === */
      .site-footer { border-top: 1px solid #eef2f7; padding-top: 24px; padding-bottom: 32px; }
      .scroll-x { overflow-x:auto; scrollbar-width:thin; }
      .scroll-x::-webkit-scrollbar { height:6px; }
      .scroll-x::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
      .skeleton { background:linear-gradient(90deg,#f1f5f9 0%,#e2e8f0 50%,#f1f5f9 100%); background-size:200% 100%; animation:sk 1.4s ease-in-out infinite; }
      @keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
      .spin { animation: spin 1.1s linear infinite; }
      @keyframes spin { to { transform: rotate(360deg); } }
      .fade-enter-active,.fade-leave-active{transition:opacity .25s ease}
      .fade-enter-from,.fade-leave-to{opacity:0}
      .hero-sunny { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 35%, #fbbf24 100%); }
      .hero-cloudy { background: linear-gradient(135deg, #e0f2fe 0%, #cbd5e1 50%, #94a3b8 100%); }
      .hero-rain { background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%); }
      .hero-snow { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); }
      .hero-fog { background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 50%, #94a3b8 100%); }
      .hero-night { background: linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #1e1b4b 100%); color:#f8fafc; }
      /* === Hero weather animations === */
      .hero-scene { isolation: isolate; }
      .hero-scene.hero-rain,
      .hero-scene.hero-night { color: #f8fafc; }
      .hero-scene.hero-night .chip,
      .hero-scene.hero-rain .chip { color: #f8fafc; background: rgba(255,255,255,0.18); }
      /* Floating high/low temp chips that sit above the temperature text. */
      .astro-card {
        display: flex; align-items: center; gap: 16px;
        padding: 16px 18px; border-radius: 16px;
        background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
        border: 1px solid rgba(251, 146, 60, 0.15);
        box-shadow: 0 6px 20px -10px rgba(251, 146, 60, 0.25);
      }
      .astro-sunset {
        background: linear-gradient(135deg, #eef2ff 0%, #c7d2fe 100%);
        border-color: rgba(99, 102, 241, 0.15);
        box-shadow: 0 6px 20px -10px rgba(99, 102, 241, 0.25);
      }
      .astro-emoji {
        width: 56px; height: 56px; border-radius: 50%;
        display: grid; place-items: center;
        font-size: 30px;
        background: rgba(255,255,255,0.65);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
      }
      .astro-time {
        font-size: 28px; font-weight: 600;
        color: #1f2937; font-variant-numeric: tabular-nums;
        margin-top: 2px; letter-spacing: 0.02em;
      }
      .float-chip {
        display: inline-flex; align-items: center; gap: 2px;
        padding: 4px 10px; border-radius: 999px;
        background: rgba(255,255,255,0.78);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        font-size: 12px; font-variant-numeric: tabular-nums;
        box-shadow: 0 4px 14px -6px rgba(15,23,42,0.25);
        animation: float-in .6s cubic-bezier(.2,.7,.2,1) both;
      }
      .hero-scene.hero-night .float-chip,
      .hero-scene.hero-rain .float-chip { background: rgba(255,255,255,0.22); color: #f8fafc; }
      .float-high { animation-delay: .05s; }
      .float-low { animation-delay: .15s; }
      @keyframes float-in { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
      /* Sunny: glowing sun in the upper right. */
      .hero-sun { position: absolute; top: -60px; right: -40px; width: 240px; height: 240px; }
      .sun-core {
        position: absolute; inset: 30px; border-radius: 50%;
        background: radial-gradient(circle, #fff7d6 0%, #fde68a 40%, #fbbf24 80%);
        box-shadow: 0 0 60px rgba(253, 224, 71, 0.6);
        animation: sun-pulse 5s ease-in-out infinite;
      }
      .sun-ring {
        position: absolute; inset: 0; border-radius: 50%;
        border: 2px dashed rgba(255,255,255,0.55);
        animation: sun-spin 22s linear infinite;
      }
      @keyframes sun-pulse { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.08); opacity: 1; } }
      @keyframes sun-spin { to { transform: rotate(360deg); } }
      /* Cloudy: drifting clouds. */
      .hero-clouds { position: absolute; inset: 0; overflow: hidden; }
      .hcloud {
        position: absolute; height: 28px; background: rgba(255,255,255,0.85);
        border-radius: 28px;
        animation: cloud-drift linear infinite;
        filter: drop-shadow(0 4px 8px rgba(15,23,42,0.08));
      }
      .hcloud::before, .hcloud::after {
        content: ""; position: absolute; background: inherit; border-radius: 50%;
      }
      .hcloud::before { width: 60%; height: 200%; top: -90%; left: 15%; }
      .hcloud::after { width: 45%; height: 160%; top: -70%; right: 12%; }
      .hcloud-1 { width: 110px; top: 18%; animation-duration: 26s; }
      .hcloud-2 { width: 80px; top: 48%; animation-duration: 32s; animation-delay: -8s; }
      .hcloud-3 { width: 130px; top: 72%; animation-duration: 38s; animation-delay: -16s; }
      @keyframes cloud-drift {
        0% { transform: translateX(-160px); }
        100% { transform: translateX(calc(100% + 160px)); }
      }
      /* Rain: falling streaks. */
      .hero-rain { position: absolute; inset: 0; overflow: hidden; }
      .raindrop {
        position: absolute; top: -20px; width: 2px; height: 18px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.95));
        animation: rain-fall linear infinite;
      }
      @keyframes rain-fall {
        0% { transform: translateY(-20px); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translateY(420px); opacity: 0; }
      }
      /* Snow: drifting snowflakes. */
      .hero-snow { position: absolute; inset: 0; overflow: hidden; }
      .snowflake {
        position: absolute; top: -20px; color: #ffffff; font-size: 14px;
        animation: snow-fall linear infinite;
        text-shadow: 0 0 4px rgba(186, 230, 253, 0.8);
      }
      @keyframes snow-fall {
        0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translateY(420px) translateX(20px) rotate(360deg); opacity: 0; }
      }
      /* Fog: layered haze bands drifting horizontally. */
      .hero-fog { position: absolute; inset: 0; overflow: hidden; }
      .fog-band {
        position: absolute; left: -10%; right: -10%; height: 80px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
        filter: blur(8px);
        animation: fog-drift 8s ease-in-out infinite alternate;
      }
      .fog-band-1 { top: 18%; animation-duration: 9s; }
      .fog-band-2 { top: 48%; animation-duration: 11s; animation-delay: -2s; }
      .fog-band-3 { top: 72%; animation-duration: 13s; animation-delay: -4s; }
      @keyframes fog-drift {
        0% { transform: translateX(-12%); }
        100% { transform: translateX(12%); }
      }
      /* Night: moon + twinkling stars. */
      .hero-night { position: absolute; inset: 0; overflow: hidden; }
      .moon {
        position: absolute; top: 18%; right: 12%;
        width: 88px; height: 88px; border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #fef9c3 0%, #fde68a 60%, #fbbf24 100%);
        box-shadow: 0 0 40px rgba(254, 240, 138, 0.6), inset -10px -10px 0 rgba(0,0,0,0.04);
      }
      .moon::after {
        content: ""; position: absolute; top: 12%; left: 18%;
        width: 16px; height: 16px; border-radius: 50%;
        background: rgba(180, 140, 60, 0.18);
        box-shadow: 28px 22px 0 rgba(180, 140, 60, 0.18), 18px 40px 0 rgba(180, 140, 60, 0.12);
      }
      .star {
        position: absolute; width: 3px; height: 3px; background: #f8fafc;
        border-radius: 50%;
        animation: twinkle 2.4s ease-in-out infinite;
      }
      @keyframes twinkle { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
      /* === Skeleton === */
      .sk-block { background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; border-radius: 8px; }
      .sk-line { height: 12px; border-radius: 6px; }
      .sk-line.thin { height: 8px; }
      .sk-line.thick { height: 16px; }
      .sk-pill { height: 22px; width: 64px; border-radius: 999px; }
      .sk-card { height: 220px; border-radius: 14px; }
      /* === Tooltip (custom, not native title) === */
      .tooltip-pop {
        position: absolute; z-index: 60;
        background: rgba(15, 23, 42, 0.92); color: #f8fafc;
        padding: 6px 10px; border-radius: 8px; font-size: 12px;
        max-width: min(80vw, 360px); line-height: 1.4;
        box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.35);
        pointer-events: none; opacity: 0; transform: translateY(4px);
        transition: opacity .15s ease, transform .15s ease;
        word-break: break-all;
      }
      .tooltip-pop.show { opacity: 1; transform: translateY(0); }
      .tooltip-pop::after {
        content: ""; position: absolute; left: 16px; bottom: -4px;
        width: 8px; height: 8px; background: rgba(15, 23, 42, 0.92);
        transform: rotate(45deg); border-radius: 1px;
      }
      /* === Offline banner === */
      .offline-banner {
        background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e; border-bottom: 1px solid #fcd34d;
      }
      /* === Parameter table === */
      .param-table { width: 100%; border-collapse: collapse; font-size: 13px; }
      .param-table th, .param-table td {
        padding: 9px 12px; text-align: left; border-bottom: 1px solid #f1f5f9;
      }
      .param-table th { color: #64748b; font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; background: #f8fafc; }
      .param-table tbody tr:hover { background: #f8fafc; }
      .param-table td.val { text-align: right; font-variant-numeric: tabular-nums; color: #1f2937; font-weight: 500; }
      .param-chip {
        padding: 4px 10px; border-radius: 999px; font-size: 12px;
        background: #f1f5f9; color: #475569; transition: all .15s ease;
        border: 1px solid transparent; cursor: pointer;
      }
      .param-chip:hover { background: #e2e8f0; }
      .param-chip.active { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
      /* === Address chip with truncation + tooltip === */
      .addr-chip {
        display: inline-block; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        cursor: default;
      }
      .addr-chip.overflow { cursor: help; }
      /* === Mobile refinements === */
      @media (max-width: 480px) {
        .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .chart-card .h-52 { height: 11rem; }
        .chart-card .h-44 { height: 9rem; }
      }


/* === Back-to-tools pill (shown in weather.html) === */
.back-to-tools {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px;
  background: #0ea5e9; color: #fff;
  font-size: 12.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.back-to-tools:hover { background: #0284c7; }