:root{
    --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bg-base:#FFFFFF;
    --glass-bg:rgba(255,255,255,0.55);
    --glass-bg-strong:rgba(255,255,255,0.75);
    --glass-border:rgba(255,255,255,0.8);
    --ink:#1E1B4B;
    --ink-soft:#4B5377;
    --ink-faint:#7C82A8;
    --accent:#4F46E5;
    --shadow:0 8px 30px rgba(79,70,229,0.10);
    --blob-1:#C7D2FE;
    --blob-2:#BAE6FD;
    --blob-3:#FDE68A;
    --blob-opacity:0.55;
  }

  html[data-theme="dark"]{
    --bg-base:#0B0E1B;
    --glass-bg:rgba(42,40,84,0.45);
    --glass-bg-strong:rgba(52,50,98,0.65);
    --glass-border:rgba(255,255,255,0.10);
    --ink:#EEF1FF;
    --ink-soft:#C2C7E8;
    --ink-faint:#8B90B8;
    --accent:#A5B4FC;
    --shadow:0 8px 30px rgba(0,0,0,0.45);
    --blob-1:#4338CA;
    --blob-2:#0E7490;
    --blob-3:#92400E;
    --blob-opacity:0.30;
  }

  html{ background:var(--bg-base); transition:background .3s ease; }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    min-height:100vh;
    font-family:var(--font-sans);
    color:var(--ink);
    background:var(--bg-base);
    overflow-x:hidden;
    position:relative;
  }

  h1,h2,h3{ font-family:var(--font-sans); margin:0; }

  /* ---------- ambient glass background ---------- */
  .bg-blobs{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
  .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:var(--blob-opacity); transition:background .3s ease, opacity .3s ease; }
  .b1{ width:420px; height:420px; background:var(--blob-1); top:-120px; left:-100px; animation:drift1 26s ease-in-out infinite alternate; }
  .b2{ width:380px; height:380px; background:var(--blob-2); bottom:-140px; right:-90px; animation:drift2 30s ease-in-out infinite alternate; }
  .b3{ width:300px; height:300px; background:var(--blob-3); top:40%; left:55%; animation:drift3 22s ease-in-out infinite alternate; }
  @keyframes drift1{ from{ transform:translate(0,0); } to{ transform:translate(60px,40px); } }
  @keyframes drift2{ from{ transform:translate(0,0); } to{ transform:translate(-50px,-30px); } }
  @keyframes drift3{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-40px,30px) scale(1.1); } }

  /* ---------- layout shell ---------- */
  .page{ max-width:1180px; margin:0 auto; padding:28px 20px 60px; }

  /* ---------- header / glass topbar ---------- */
  header.topbar{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:20px 24px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:sticky;
    top:14px;
    z-index:10;
  }
  .brand h1{ font-size:1.35rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
  .brand .tagline{ margin:4px 0 0; font-size:0.85rem; color:var(--ink-soft); }

  .search-row{
    margin:0 4px 0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    display:flex;
    justify-content:center;
    transition:max-height .25s ease, opacity .2s ease, margin .25s ease;
  }
  .search-row.open{
    max-height:90px;
    opacity:1;
    margin:16px 4px 12px;
  }
  .search-wrap{
    flex:1 1 auto;
    width:100%;
    max-width:480px;
    position:relative;
    display:flex;
    align-items:center;
  }
  .search-wrap svg{ position:absolute; left:14px; width:16px; height:16px; color:var(--ink-faint); pointer-events:none; }
  #searchInput{
    width:100%;
    padding:13px 14px 13px 38px;
    border-radius:14px;
    border:1px solid rgba(79,70,229,0.18);
    background:var(--glass-bg-strong);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-family:var(--font-sans);
    font-size:0.95rem;
    color:var(--ink);
    outline:none;
    box-shadow:var(--shadow);
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  #searchInput::placeholder{ color:var(--ink-faint); }
  #searchInput:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(79,70,229,0.18);
  }

  .meta-row{ display:flex; align-items:center; gap:10px; }
  .updated{ font-size:0.78rem; color:var(--ink-faint); }
  .refresh-btn, .icon-btn{
    border:1px solid rgba(79,70,229,0.25);
    background:var(--glass-bg-strong);
    color:var(--accent);
    font-family:var(--font-sans);
    font-size:0.82rem;
    font-weight:600;
    padding:8px 14px;
    border-radius:12px;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .icon-btn{ padding:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
  .icon-btn svg{ width:18px; height:18px; }
  .theme-toggle .ui-icon-moon{ display:block; }
  .theme-toggle .ui-icon-sun{ display:none; }
  html[data-theme="dark"] .theme-toggle .ui-icon-moon{ display:none; }
  html[data-theme="dark"] .theme-toggle .ui-icon-sun{ display:block; }

  .donate-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(244,63,94,0.30);
    background:var(--glass-bg-strong);
    color:#E11D48;
    font-family:var(--font-sans);
    font-size:0.82rem;
    font-weight:600;
    padding:8px 14px;
    border-radius:12px;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .donate-btn svg{ width:14px; height:14px; flex:0 0 auto; }
  .donate-btn:hover{ box-shadow:0 0 0 3px rgba(244,63,94,0.16); }

  .refresh-btn:hover, .icon-btn:hover{ box-shadow:0 0 0 3px rgba(79,70,229,0.14); }
  .refresh-btn:active, .icon-btn:active, .donate-btn:active{ transform:scale(0.96); }
  .refresh-btn:focus-visible, .icon-btn:focus-visible, .donate-btn:focus-visible, #searchInput:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* ---------- card grid ---------- */
  main{ display:block; margin-top:26px; }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:16px;
  }

  .card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow);
    padding:18px 18px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:opacity .25s ease, transform .2s ease;
  }
  .card:hover{ transform:translateY(-2px); }
  .card.is-hidden{ display:none; }

  .card-glow{
    position:absolute;
    inset:-30%;
    background:radial-gradient(circle at 70% 20%, var(--tint, rgba(148,163,184,0.18)), transparent 65%);
    z-index:0;
    pointer-events:none;
    transition:background .4s ease;
  }

  .card-top{ position:relative; z-index:1; }
  .eyebrow{
    font-size:0.66rem;
    letter-spacing:0.08em;
    font-weight:600;
    color:var(--ink-faint);
    text-transform:uppercase;
  }
  .state-name{ font-size:1.08rem; font-weight:600; color:var(--ink); line-height:1.25; margin-top:2px; }
  .city-name{ margin:2px 0 0; font-size:0.84rem; color:var(--ink-soft); }

  .card-body{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .card-icon{ width:54px; height:54px; flex:0 0 auto; }
  .card-icon svg{ width:100%; height:100%; display:block; }

  .temp-block{ text-align:right; }
  .card-temp{ font-size:1.7rem; font-weight:700; color:var(--ink); line-height:1; }
  .card-condition{ margin:2px 0 0; font-size:0.78rem; color:var(--ink-soft); }

  .pulse-dot{
    width:34px; height:10px; border-radius:6px;
    background:linear-gradient(90deg, rgba(79,70,229,0.12), rgba(79,70,229,0.28), rgba(79,70,229,0.12));
    background-size:200% 100%;
    animation:shimmer 1.4s ease-in-out infinite;
  }
  @keyframes shimmer{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }

  .unavailable{ font-size:0.78rem; color:#B45309; }

  /* ---------- empty state ---------- */
  .empty-state{
    text-align:center;
    color:var(--ink-soft);
    font-size:0.9rem;
    padding:40px 10px;
  }
  .hidden{ display:none; }

  /* ---------- footer ---------- */
  footer{
    margin-top:46px;
    text-align:center;
    font-size:0.78rem;
    color:var(--ink-faint);
  }

  /* ---------- weather icon animations (flat, colorful) ---------- */
  .sun-rays{ stroke:#F59E0B; stroke-width:4; stroke-linecap:round; transform-origin:32px 32px; animation:spin 14s linear infinite; }
  .sun-core{ fill:#FBBF24; animation:pulseGlow 2.6s ease-in-out infinite; }
  @keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
  @keyframes pulseGlow{ 0%,100%{ filter:drop-shadow(0 0 0px #FBBF24); } 50%{ filter:drop-shadow(0 0 6px #FBBF24); } }

  .cloud-float{ animation:floatX 5s ease-in-out infinite; }
  @keyframes floatX{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

  .rain-drop{ stroke:#3B82F6; stroke-width:3; stroke-linecap:round; opacity:0; animation:fall 1.1s linear infinite; }
  .rain-drop.d1{ animation-delay:0s; }
  .rain-drop.d2{ animation-delay:.3s; }
  .rain-drop.d3{ animation-delay:.6s; }
  .rain-drop.d4{ animation-delay:.45s; }
  @keyframes fall{ 0%{ transform:translateY(-5px); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(9px); opacity:0; } }

  .flake{ fill:#7DD3FC; opacity:0; animation:flakeFall 2.6s linear infinite; }
  .flake.f1{ animation-delay:0s; }
  .flake.f2{ animation-delay:.7s; }
  .flake.f3{ animation-delay:1.4s; }
  @keyframes flakeFall{ 0%{ transform:translate(0,-4px); opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translate(3px,12px); opacity:0; } }

  .bolt{ fill:#FDE047; animation:flash 2.2s ease-in-out infinite; }
  @keyframes flash{ 0%,40%,100%{ opacity:0.15; } 48%,58%{ opacity:1; } }

  .fog-line{ fill:#94A3B8; animation:fogPulse 3.4s ease-in-out infinite; }
  .fog-line.l2{ animation-delay:.5s; }
  .fog-line.l3{ animation-delay:1s; }
  @keyframes fogPulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:0.85; } }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  }

  @media (max-width:640px){
    header.topbar{ flex-direction:column; align-items:stretch; gap:14px; }
    .search-wrap{ max-width:none; }
    .meta-row{
      flex-wrap:wrap;
      justify-content:flex-start;
      gap:8px;
    }
    .updated{
      flex:1 1 100%;
      white-space:nowrap;
    }
    .refresh-btn, .donate-btn{
      white-space:nowrap;
      flex-shrink:0;
      padding:8px 12px;
    }
    .icon-btn{ flex-shrink:0; }
  }

  /* ---------- multi-page additions ---------- */
  .brand-link{ text-decoration:none; color:inherit; display:inline-block; transition:opacity .15s ease; }
  .brand-link:hover{ opacity:0.82; }

  .card, a.card{ text-decoration:none; color:inherit; }
  .card-arrow{
    position:absolute; top:14px; right:14px; z-index:2;
    width:16px; height:16px; color:var(--accent); opacity:0.55;
    transition:opacity .15s ease, transform .15s ease;
  }
  .card:hover .card-arrow{ opacity:0.9; transform:translateX(2px); }

  .breadcrumb{ margin:0 4px 16px; }
  .breadcrumb a{
    font-size:0.85rem; font-weight:600; color:var(--accent);
    text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  }
  .breadcrumb a:hover{ text-decoration:underline; }

  .page-heading{ margin:0 4px 22px; }
  .page-heading h2{ font-size:1.6rem; font-weight:600; color:var(--ink); }
  .page-heading p{ margin:6px 0 0; font-size:0.9rem; color:var(--ink-soft); }