/* ═══════════════════════════════════════════
       DESIGN TOKENS & RESET
    ═══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --glass-bg:        rgba(255, 255, 255, 0.07);
      --glass-border:    rgba(255, 255, 255, 0.14);
      --glass-shadow:    0 8px 48px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
      --glass-highlight: rgba(255, 255, 255, 0.18);
      --font-display:    'Playfair Display', Georgia, serif;
      --font-body:       'Outfit', sans-serif;
      --text-primary:    rgba(255,255,255,0.95);
      --text-secondary:  rgba(255,255,255,0.6);
      --text-muted:      rgba(255,255,255,0.38);
      --card-radius:     28px;
      --pill-radius:     100px;
      --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
      --duration-fast:   200ms;
      --duration-base:   400ms;
      --duration-slow:   700ms;
      /* Dynamic theme vars — overridden by JS */
      --bg-from: #0f0c29;
      --bg-mid:  #302b63;
      --bg-to:   #24243e;
      --orb-a:   rgba(120,80,255,0.55);
      --orb-b:   rgba(60,160,255,0.45);
      --orb-c:   rgba(200,80,200,0.35);
    }

    body {
      font-family: var(--font-body);
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 16px 48px;
      color: var(--text-primary);
      overflow-x: hidden;
      background: linear-gradient(135deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
      transition: background 1.2s var(--ease-out);
      -webkit-font-smoothing: antialiased;
    }

    /* ── Animated background orbs ── */
    .bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.75; animation: drift linear infinite; will-change: transform; }
    .orb-a { width: 55vmax; height: 55vmax; top: -20%; left: -15%; background: var(--orb-a); animation-duration: 22s; transition: background 1.4s var(--ease-out); }
    .orb-b { width: 45vmax; height: 45vmax; bottom: -15%; right: -10%; background: var(--orb-b); animation-duration: 28s; animation-delay: -10s; transition: background 1.4s var(--ease-out); }
    .orb-c { width: 35vmax; height: 35vmax; top: 40%; left: 50%; background: var(--orb-c); animation-duration: 18s; animation-delay: -6s; transition: background 1.4s var(--ease-out); }
    @keyframes drift {
      0%   { transform: translate(0,0) rotate(0deg); }
      25%  { transform: translate(4%,3%) rotate(90deg); }
      50%  { transform: translate(-3%,5%) rotate(180deg); }
      75%  { transform: translate(3%,-3%) rotate(270deg); }
      100% { transform: translate(0,0) rotate(360deg); }
    }
    .bg-canvas::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.4;
      mix-blend-mode: overlay;
    }

    /* ── Layout ── */
    .page-wrapper { position: relative; z-index: 1; width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }

    /* ── Brand ── */
    .brand { text-align: center; margin-bottom: 4px; animation: slideDown var(--duration-slow) var(--ease-out) both; }
    .brand-name { font-family: var(--font-display); font-size: clamp(2rem,6vw,2.6rem); font-weight: 400; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
    .brand-name span { font-style: italic; color: rgba(255,255,255,0.65); }
    .brand-tagline { font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }

    /* ── Glass card ── */
    .glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--card-radius); box-shadow: var(--glass-shadow); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); position: relative; overflow: hidden; }
    .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--glass-highlight),transparent); pointer-events: none; }

    /* ── Search ── */
    .search-card { animation: slideDown var(--duration-slow) var(--ease-out) 100ms both; }
    .search-inner { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 22px; }
    .search-input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--text-primary); caret-color: rgba(255,255,255,0.7); min-width: 0; }
    .search-input::placeholder { color: var(--text-muted); font-weight: 300; }
    .search-input:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s; }
    .search-btn { display: flex; align-items: center; justify-content: center; gap: 7px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; color: var(--text-primary); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; padding: 10px 20px; cursor: pointer; transition: background var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) ease; white-space: nowrap; flex-shrink: 0; }
    .search-btn:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.38); box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: translateY(-1px); }
    .search-btn:active { transform: scale(0.97); }
    .search-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .search-btn svg { transition: transform var(--duration-fast) var(--ease-spring); }
    .search-btn:hover:not(:disabled) svg { transform: rotate(-15deg) scale(1.15); }

    /* ── States ── */
    .state-card { text-align: center; padding: 48px 32px; }
    .state-icon { font-size: 52px; line-height: 1; margin-bottom: 16px; display: block; animation: float 4s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    .state-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; }
    .state-body { font-size: 13.5px; font-weight: 300; color: var(--text-secondary); line-height: 1.6; }
    .loading-spinner { width: 48px; height: 48px; border: 2px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.8); border-radius: 50%; animation: spin 0.85s linear infinite; margin: 0 auto 20px; }
    @keyframes spin { to{transform:rotate(360deg)} }

    /* ── Weather card ── */
    .weather-card { display: none; }
    .weather-card.visible { display: block; }
    .weather-top { padding: 32px 32px 24px; }
    .city-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
    .city-name { font-family: var(--font-display); font-size: clamp(1.7rem,5vw,2.2rem); font-weight: 600; color: var(--text-primary); letter-spacing: -0.025em; line-height: 1.1; }
    .country-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; border-radius: var(--pill-radius); margin-top: 5px; flex-shrink: 0; }
    .local-time { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; }
    .temp-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
    .temp-icon { font-size: clamp(56px,14vw,72px); line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3)); animation: iconEntrance 0.5s var(--ease-spring) both; flex-shrink: 0; }
    @keyframes iconEntrance { from{transform:scale(0.5) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
    .temp-block { display: flex; flex-direction: column; gap: 0; }
    .temp-value { font-family: var(--font-display); font-size: clamp(3.5rem,14vw,5.5rem); font-weight: 400; color: var(--text-primary); letter-spacing: -0.04em; line-height: 0.9; }
    .temp-unit { font-size: clamp(1rem,3vw,1.4rem); color: var(--text-secondary); vertical-align: super; font-weight: 300; }
    .condition-text { font-size: 14px; color: var(--text-secondary); margin-top: 4px; font-style: italic; font-family: var(--font-display); }
    .feels-row { font-size: 13px; font-weight: 300; color: var(--text-muted); margin-bottom: 28px; }
    .divider { height: 1px; background: linear-gradient(90deg,transparent,var(--glass-border),transparent); margin: 0 32px; }
    .stats-row { display: grid; grid-template-columns: repeat(3,1fr); padding: 24px 20px 28px; gap: 8px; }
    .stat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); transition: background var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring); cursor: default; }
    .stat-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
    .stat-icon { font-size: 20px; line-height: 1; }
    .stat-value { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
    .stat-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
    .condition-pill { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 32px 28px; padding: 10px 20px; border-radius: var(--pill-radius); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--text-secondary); }
    .condition-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.7); box-shadow: 0 0 8px 2px rgba(255,255,255,0.4); animation: pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }

    /* ── Secure badge ── */
    .secure-badge { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.28); letter-spacing: 0.06em; }
    .secure-badge svg { opacity: 0.5; }

    /* ── Footer ── */
    .page-footer { text-align: center; font-size: 11px; color: rgba(255,255,255,0.2); letter-spacing: 0.06em; display: flex; flex-direction: column; gap: 6px; }
    .page-footer a { color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.2s; }
    .page-footer a:hover { color: rgba(255,255,255,0.65); }

    /* ── Animations ── */
    @keyframes slideDown { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeUp    { from{opacity:0;transform:translateY(24px)}  to{opacity:1;transform:translateY(0)} }
    .anim-fadein { animation: fadeUp var(--duration-slow) var(--ease-out) both; }

    /* ── Responsive ── */
    @media (max-width: 360px) {
      .weather-top { padding: 24px 20px 18px; }
      .divider { margin: 0 20px; }
      .stats-row { padding: 18px 12px 22px; gap: 6px; }
      .condition-pill { margin: 0 20px 22px; }
      .search-inner { padding: 8px 8px 8px 16px; }
    }
    @media (min-width: 600px) {
      .page-wrapper { max-width: 520px; }
      body { padding: 32px 24px 56px; }
    }
    .search-input:focus-visible, .search-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }