:root{
    --mist:#1B2033;
    --mist-dim:#6B7280;
    --card-bg: rgba(255,255,255,0.62);
    --card-border: rgba(255,255,255,0.8);
    --accent:#8B7CF6;
    --accent-ink:#3D2E8C;
    --gold:#F2B84B;
  }
  *, *::before, *::after{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Manrope', sans-serif;
    color: var(--mist);
    min-height:100vh;
    overflow-x:hidden;
    background:
      radial-gradient(at 12% 8%, #FCE7F3 0px, transparent 45%),
      radial-gradient(at 85% 12%, #DBEAFE 0px, transparent 50%),
      radial-gradient(at 90% 75%, #E0F2FE 0px, transparent 50%),
      radial-gradient(at 15% 80%, #FEF3C7 0px, transparent 50%),
      radial-gradient(at 50% 50%, #EDE9FE 0px, transparent 60%),
      #F8F7FC;
    background-attachment: fixed;
  }
  .wrap{ width:min(100%, 760px); margin:0 auto; padding:clamp(20px, 5vw, 40px) clamp(14px, 4vw, 24px) 64px; }

  .brand{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }
  .brand-lockup{ display:flex; align-items:center; gap:12px; }
  .brand-name{ font-weight:800; font-size: 21px; letter-spacing: -0.02em; }
  .brand-sub{ font-size:12px; color: var(--mist-dim); font-weight:500; margin-top:-2px; }
  .unit-toggle{
    display:flex; background: var(--card-bg); border:1px solid var(--card-border);
    border-radius:10px; padding:3px; backdrop-filter: blur(12px);
  }
  .unit-toggle button{
    border:none; background:transparent; padding:6px 14px; font-family:'Manrope';
    font-weight:700; font-size:13px; color: var(--mist-dim); border-radius:7px; cursor:pointer;
  }
  .unit-toggle button.active{ background: var(--mist); color:#fff; }

  .search{ display:flex; gap:8px; margin-bottom: 24px; position:relative; }
  .search-icon-wrap{ position:relative; flex:1; }
  .search-icon-wrap svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:0.45; }
  .search input{
    width:100%; background: var(--card-bg); backdrop-filter: blur(12px);
    border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 62px 14px 44px;
    font-size:15px; color: var(--mist); font-family:'Manrope',sans-serif; outline:none;
  }
  .search input::placeholder{ color: var(--mist-dim); }
  .search input:focus{ border-color: var(--accent); }
  .icon-btn{
    background: var(--mist); border:none; border-radius:14px; width:48px; height:48px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .icon-btn svg{ stroke: #fff; }
  .icon-btn.ghost{ background: var(--card-bg); border:1px solid var(--card-border); backdrop-filter: blur(12px); }
  .icon-btn.ghost svg{ stroke: var(--mist); }
  .icon-btn:active{ transform: scale(0.96); }
  .bell-btn-sm{ width:40px; height:40px; border-radius:12px; }
  .bell-btn-sm#bellBtn svg{ width:22px; height:22px; }
  .search-icon-wrap .voice-btn{
    position:absolute; right:8px; top:50%; transform:translateY(-50%) !important;
    width:40px; height:40px; border-radius:12px; z-index:2;
    background:#E5E7EB !important; border:none !important;
    display:flex; align-items:center; justify-content:center;
  }
  .voice-btn svg{
    position:static !important; left:auto !important; top:auto !important;
    transform:none !important; width:20px; height:20px; opacity:1 !important;
  }
  .voice-btn.is-listening{ background: var(--accent); border-color: var(--accent); }
  .voice-btn.is-listening svg{ stroke:#fff; }

  .toast-stack{
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:8px; z-index:999; align-items:center;
  }
  .toast{
    background: #1B2033; color:#fff; font-family:'Manrope'; font-weight:600; font-size:13px;
    padding:10px 16px; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.25);
    display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px);
    animation: toastIn 0.25s ease forwards;
    max-width:320px;
  }
  .toast.out{ animation: toastOut 0.2s ease forwards; }
  .toast svg{ flex-shrink:0; }
  @keyframes toastIn{ to{ opacity:1; transform:translateY(0); } }
  @keyframes toastOut{ to{ opacity:0; transform:translateY(8px); } }

  .suggestions{
    position:absolute; top: 56px; left:0; right:0; background: #fff;
    border:1px solid var(--card-border); border-radius:14px; overflow:hidden; z-index:10;
    box-shadow: 0 16px 40px rgba(60,50,120,0.16);
  }
  .suggestions div{ padding: 11px 16px; font-size:14px; cursor:pointer; border-bottom: 1px solid #F0EEFA; display:flex; align-items:center; gap:10px; }
  .suggestions div:last-child{ border-bottom:none; }
  .suggestions div:hover{ background: #F8F7FC; }
  .suggestions .s-name{ font-weight:600; }
  .suggestions .s-sub{ color: var(--mist-dim); font-size:12px; }

  .fav-row{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .fav-chip{
    display:flex; align-items:center; gap:6px; background: var(--card-bg); backdrop-filter: blur(10px);
    border:1px solid var(--card-border); border-radius:20px; padding:6px 12px 6px 14px; font-size:13px;
    font-weight:600; cursor:pointer;
  }
  .fav-chip .rm{ opacity:0.4; display:flex; }
  .fav-chip .rm:hover{ opacity:0.9; }

  .hero{
    position:relative; border-radius: 26px; padding: 36px 30px 28px; overflow:hidden;
    margin-bottom: 20px; min-height: 250px; display:flex; flex-direction:column; justify-content:space-between;
    color:#fff;
  }
  .hero-sky{ position:absolute; inset:0; z-index:0; transition: background 1s ease; }
  .hero-content{ position:relative; z-index:2; }
  .loc-line{ font-size:13px; color: rgba(255,255,255,0.8); margin-bottom:6px; display:flex; align-items:center; gap:8px; font-weight:600; }
  .loc-line .badge{ font-family:'JetBrains Mono', monospace; font-size:11px; background: rgba(255,255,255,0.2); padding:3px 9px; border-radius:20px; font-weight:500; }
  .fav-toggle{ margin-left:auto; cursor:pointer; display:flex; opacity:0.85; }
  .loc-name{ font-weight:700; font-size:23px; margin-bottom:18px; letter-spacing:-0.01em; }
  .temp-row{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
  .temp-big{ font-weight:800; font-size:88px; line-height:0.85; letter-spacing:-0.03em; }
  .temp-meta{ padding-bottom: 8px; }
  .condition{ font-size:17px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
  .feels{ font-size:13px; color: rgba(255,255,255,0.82); font-weight:500; }

  .particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .drop{ position:absolute; width:2px; height:14px; background: rgba(255,255,255,0.55); border-radius:2px; animation: fall linear infinite; }
  @keyframes fall{ from{ transform: translateY(-20px);} to{ transform: translateY(280px);} }
  .flake{ position:absolute; color: rgba(255,255,255,0.9); animation: drift linear infinite; }
  @keyframes drift{ from{ transform: translateY(-20px) translateX(0);} to{ transform: translateY(280px) translateX(20px);} }
  .cloud-svg{ position:absolute; opacity:0.35; }
  .sun-glow{ position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(255,240,190,0.6), transparent 70%); }
  .star{ position:absolute; width:2px;height:2px; background: white; border-radius:50%; opacity:0.85; }

  .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap:10px; margin-bottom:20px; }
  .stat-card{
    background: var(--card-bg); backdrop-filter: blur(12px); border:1px solid var(--card-border);
    border-radius:16px; padding:15px 16px; display:flex; flex-direction:column; gap:8px;
  }
  .stat-top{ display:flex; align-items:center; gap:8px; }
  .stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color: var(--mist-dim); font-weight:700; }
  .stat-value{ font-weight:800; font-size:22px; }
  .stat-sub{ font-size:11.5px; color: var(--mist-dim); font-weight:600; }

  .section-title{ font-weight:800; font-size:14px; margin: 6px 0 14px; color: var(--mist); display:flex; align-items:center; gap:8px; }
  .pro-badge{ font-size:10px; font-weight:800; background: var(--accent); color:#fff; padding:2px 8px; border-radius:20px; letter-spacing:0.03em; }

  .chart-card{
    background: var(--card-bg); backdrop-filter: blur(12px); border:1px solid var(--card-border);
    border-radius:18px; padding:18px; margin-bottom:14px;
  }
  .chart-mini-label{ font-size:11.5px; font-weight:700; color: var(--mist-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }

  .forecast-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:20px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
  .forecast-scroll::-webkit-scrollbar{ height:4px; }
  .forecast-scroll::-webkit-scrollbar-thumb{ background: var(--card-border); border-radius:4px; }
  .fday{
    flex: 0 0 auto; width: 90px; background: var(--card-bg); backdrop-filter: blur(12px);
    border:1px solid var(--card-border); border-radius:16px; padding:14px 8px; text-align:center;
  }
  .fday .d{ font-size:12px; color: var(--mist-dim); margin-bottom:8px; font-weight:700; }
  .fday .ic{ margin-bottom:8px; display:flex; justify-content:center; }
  .fday .hi{ font-weight:800; font-size:16px; }
  .fday .lo{ font-size:12.5px; color: var(--mist-dim); font-weight:600; }

  .hourly-scroll{ display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
  .hourly-scroll::-webkit-scrollbar{ height:4px; }
  .hourly-scroll::-webkit-scrollbar-thumb{ background: var(--card-border); border-radius:4px; }
  .hitem{ flex:0 0 auto; text-align:center; font-size:12px; color: var(--mist-dim); font-weight:600; }
  .hitem .t{ margin-bottom:6px; }
  .hitem .ic{ margin-bottom:6px; display:flex; justify-content:center; }
  .hitem .v{ font-family:'JetBrains Mono', monospace; font-size:13px; color: var(--mist); font-weight:600; }

  .aqi-card{
    background: var(--card-bg); backdrop-filter: blur(12px); border:1px solid var(--card-border);
    border-radius:18px; padding:18px 20px; margin-bottom:20px; display:flex; align-items:center; gap:18px;
  }
  .aqi-ring{ flex-shrink:0; }
  .aqi-info{ flex:1; }
  .aqi-title{ font-weight:800; font-size:15px; margin-bottom:2px; }
  .aqi-desc{ font-size:12.5px; color: var(--mist-dim); font-weight:500; }

  .outlook-grid{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
  .outlook-card{
    background: var(--card-bg); backdrop-filter: blur(12px); border:1px solid var(--card-border);
    border-radius:16px; padding:16px 18px; display:flex; align-items:flex-start; gap:14px;
  }
  .outlook-ic{
    width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#fff;
  }
  .outlook-body{ flex:1; }
  .outlook-title{ font-weight:800; font-size:14px; margin-bottom:3px; display:flex; align-items:center; gap:8px; }
  .outlook-desc{ font-size:12.5px; color: var(--mist-dim); font-weight:500; line-height:1.5; }
  .new-badge{ font-size:9.5px; font-weight:800; background: linear-gradient(135deg,#F2B84B,#F97316); color:#fff; padding:2px 7px; border-radius:20px; letter-spacing:0.03em; text-transform:uppercase; }
  .outlook-score{ font-weight:800; font-size:15px; margin-left:auto; flex-shrink:0; }

  .status{ text-align:center; padding: 60px 20px; color: var(--mist-dim); font-size:14px; font-weight:600; }
  .status.error{ color: #B54545; }

  .alert-stack{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
  .alert-banner{
    display:flex; align-items:center; gap:12px; background: rgba(248,113,113,0.14);
    border:1px solid rgba(248,113,113,0.4); border-radius:14px; padding:12px 16px;
  }
  .alert-banner svg{ stroke:#B54545; flex-shrink:0; }
  .alert-title{ font-weight:700; font-size:13.5px; color:#8A2E2E; }
  .alert-desc{ font-size:12.5px; color:#8A2E2E; opacity:0.85; }
  .bell-btn{ margin-left:auto; }

  .pro-wrap{ position:relative; }
  .pro-locked{ filter: blur(7px) saturate(0.8); pointer-events:none; user-select:none; }
  .pro-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    z-index:5; padding:20px;
  }
  .pricing-card{
    background:#fff; border:1px solid var(--card-border); border-radius:18px; padding:22px 24px;
    max-width:280px; text-align:center; box-shadow:0 20px 50px rgba(60,50,120,0.18);
  }
  .pricing-card .lock-ic{ display:flex; justify-content:center; margin-bottom:10px; color: var(--accent); }
  .pricing-title{ font-weight:800; font-size:15px; margin-bottom:4px; }
  .pricing-desc{ font-size:12.5px; color: var(--mist-dim); font-weight:500; margin-bottom:14px; line-height:1.5; }
  .pricing-amount{ font-weight:800; font-size:26px; margin-bottom:2px; }
  .pricing-period{ font-size:12px; color: var(--mist-dim); font-weight:600; margin-bottom:16px; }
  .pricing-cta{
    width:100%; background: var(--accent); color:#fff; border:none; border-radius:12px;
    padding:11px; font-family:'Manrope'; font-weight:700; font-size:14px; cursor:pointer;
  }
  .pricing-cta:active{ transform: scale(0.98); }
  .pro-unlocked-tag{ font-size:11px; color:#16A34A; font-weight:700; display:flex; align-items:center; gap:5px; }

  .footer{
    display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px;
    font-size:13px; color: var(--mist-dim); font-weight:600;
  }
  .footer a{ display:flex; align-items:center; gap:6px; color: var(--mist); text-decoration:none; font-weight:700; }
  .footer a:hover{ color: var(--accent); }
  .partner-link{ width:min(100%, 760px); margin:0 auto; padding:14px clamp(14px, 4vw, 24px) 0; text-align:center; }
  .partner-link a{
    display:block; padding:13px 20px; border-radius:14px; color:#fff; text-decoration:none;
    background:linear-gradient(135deg, #8B7CF6, #5AA9E6 55%, #F2B84B);
    box-shadow:0 8px 22px rgba(91,80,180,0.24); font-size:14px; font-weight:800;
    letter-spacing:0.01em; transition:transform .2s ease, box-shadow .2s ease;
  }
  .partner-link a:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(91,80,180,0.3); }
  .partner-link a:active{ transform:translateY(0); }

  @media (max-width: 640px){
    .brand{ align-items:flex-start; }
    .brand > div:last-child{ flex-wrap:wrap; justify-content:flex-end; gap:6px; }
    .hero{ padding:28px 20px 24px; min-height:230px; border-radius:22px; }
    .temp-big{ font-size:clamp(60px, 20vw, 78px); }
    .temp-row{ gap:16px; }
    .outlook-card{ padding:14px; }
    .chart-card{ padding:14px; }
  }

  @media (max-width: 480px){
    .brand{ margin-bottom:20px; }
    .brand-lockup{ gap:9px; }
    .brand-name{ font-size:19px; }
    .brand-sub{ font-size:11px; }
    .bell-btn-sm{ width:38px; height:38px; }
    .unit-toggle button{ padding:6px 10px; }
    .search{ margin-bottom:18px; }
    .stats-grid{ gap:8px; }
    .stat-card{ padding:12px; }
    .aqi-card{ flex-direction:column; align-items:flex-start; }
    .outlook-title{ align-items:flex-start; flex-wrap:wrap; }
    .pricing-card{ max-width:100%; padding:18px; }
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ scroll-behavior:auto !important; animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }