/* ---------- reset ---------- */
*{ padding:0; margin:0; box-sizing:border-box; }

:root{
  --ink:            #F5F3ED;
  --ink-dim:        #AEB6CC;
  --ink-faint:      #7E86A0;
  --amber:          #F2A65A;
  --cyan:           #7FD8CE;
  --glass:          rgba(255,255,255,0.07);
  --glass-strong:   rgba(255,255,255,0.10);
  --glass-border:   rgba(255,255,255,0.14);
  --shadow:         0 24px 60px -20px rgba(0,0,0,0.55);
  --radius-lg:      26px;
  --radius-md:      16px;
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  --sky-a: #0B1B33;
  --sky-b: #1B2A4A;
  --sky-c: #3A2E5C;
}

html,body{
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 15% -10%, color-mix(in srgb, var(--sky-c) 55%, transparent), transparent 60%),
    linear-gradient(165deg, var(--sky-a), var(--sky-b) 55%, var(--sky-c));
  background-attachment: fixed;
  transition: background 1.1s ease;
  overflow-x:hidden;
}

/* ---------- condition themes ---------- */
body.cond-clear-day    { --sky-a:#1D5BA6; --sky-b:#3F86D6; --sky-c:#F2A65A; }
body.cond-clear-night  { --sky-a:#070E1F; --sky-b:#161F3B; --sky-c:#3A2E5C; }
body.cond-clouds-day   { --sky-a:#3E4C59; --sky-b:#5A6B78; --sky-c:#8B99A3; }
body.cond-clouds-night { --sky-a:#0E1420; --sky-b:#242B3D; --sky-c:#3C4457; }
body.cond-rain         { --sky-a:#131A28; --sky-b:#212C3E; --sky-c:#33465C; }
body.cond-thunder      { --sky-a:#0A0D16; --sky-b:#181432; --sky-c:#2C2456; }
body.cond-snow         { --sky-a:#232E3D; --sky-b:#4B5F70; --sky-c:#9FB3BE; }
body.cond-mist         { --sky-a:#333B47; --sky-b:#4C5561; --sky-c:#6C7684; }

/* ---------- sky fx layer (signature element) ---------- */
.sky-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.sky-fx .star{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--ink); opacity:0;
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.12; } 50%{ opacity:.85; }
}
.sky-fx .cloud{
  position:absolute; opacity:0;
  background: rgba(255,255,255,0.06);
  border-radius:999px;
  filter: blur(1px);
  animation: drift linear infinite;
}
@keyframes drift{
  from{ transform:translateX(-20vw); }
  to{ transform:translateX(120vw); }
}
.sky-fx .drop{
  position:absolute; top:-5%;
  width:1.5px; height:16px;
  border-radius:2px;
  background: linear-gradient(var(--cyan), transparent);
  opacity:.55;
  animation: fall linear infinite;
}
@keyframes fall{
  from{ transform: translateY(-10vh); }
  to{ transform: translateY(110vh); }
}
.sky-fx .flake{
  position:absolute; top:-5%;
  width:5px; height:5px; border-radius:50%;
  background: var(--ink); opacity:.7;
  animation: snowfall linear infinite;
}
@keyframes snowfall{
  from{ transform: translateY(-10vh) translateX(0); }
  to{ transform: translateY(110vh) translateX(20px); }
}

/* ---------- layout ---------- */
.app{ position:relative; z-index:1; max-width:480px; margin:0 auto; padding:20px 20px 48px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 2px 28px;
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{
  width:9px; height:9px; border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--amber) 70%, transparent);
}
.brand-name{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim);
}

.unit-toggle{
  display:flex; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:999px; padding:3px; gap:2px;
}
.unit-btn{
  border:none; background:transparent; color:var(--ink-faint);
  font-family:var(--font-mono); font-size:12px; padding:5px 11px;
  border-radius:999px; cursor:pointer; transition:.2s ease;
}
.unit-btn.is-active{ background:var(--glass-strong); color:var(--ink); }
.unit-btn:hover{ color:var(--ink); }

.container{ display:flex; flex-direction:column; gap:20px; }

/* ---------- search ---------- */
.search-form{
  display:flex; align-items:center; gap:10px;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:999px; padding:6px 8px 6px 18px;
  backdrop-filter: blur(18px);
  transition: border-color .2s ease;
}
.search-form:focus-within{ border-color: color-mix(in srgb, var(--amber) 50%, var(--glass-border)); }
.search-icon{ color:var(--ink-faint); flex-shrink:0; }
.search-form input{
  flex:1; height:34px; border:none; background:transparent;
  color:var(--ink); font-family:var(--font-body); font-size:14.5px;
  outline:none;
}
.search-form input::placeholder{ color:var(--ink-faint); }
.search-form button{
  height:34px; padding:0 18px; border-radius:999px; border:none;
  background: var(--amber); color:#2A1B08; font-weight:600; font-size:13.5px;
  cursor:pointer; transition: transform .15s ease, background .2s ease;
  font-family:var(--font-body);
}
.search-form button:hover{ background: color-mix(in srgb, var(--amber) 85%, white); }
.search-form button:active{ transform: scale(.96); }

.error-msg{
  display:none; font-size:13px; color:#F2A5A5; text-align:center;
  background:rgba(226,75,74,0.12); border:1px solid rgba(226,75,74,0.3);
  padding:9px 14px; border-radius:12px;
}
.error-msg.is-visible{ display:block; }

/* ---------- weather card ---------- */
.weather-card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:26px 24px 22px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  min-height:210px;
}

.card-skeleton{ display:none; flex-direction:column; gap:14px; }
.card-skeleton.is-visible{ display:flex; }
.card-content{ display:flex; flex-direction:column; gap:18px; }
.card-content.is-hidden{ display:none; }

.sk-line{ height:12px; border-radius:6px; background:var(--glass-strong); animation:pulse 1.4s ease-in-out infinite; }
.sk-w40{ width:40%; } .sk-w60{ width:60%; } .sk-w30{ width:30%; margin-top:6px; }
.sk-circle{ width:64px; height:64px; border-radius:50%; background:var(--glass-strong); animation:pulse 1.4s ease-in-out infinite; margin:6px 0; }
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.place h2{
  font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:.01em;
}
.local-time{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); margin-top:3px; }
.date-label{ font-size:12px; color:var(--ink-faint); text-align:right; padding-top:3px; }

.hero{ display:flex; align-items:center; justify-content:space-between; }
.hero-temp-wrap{ display:flex; align-items:flex-start; line-height:1; }
.hero-temp{ font-family:var(--font-display); font-weight:700; font-size:88px; letter-spacing:-.03em; }
.hero-deg{ font-family:var(--font-display); font-weight:500; font-size:32px; margin-top:8px; color:var(--ink-dim); }

.hero-info{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.weather-icon{ width:56px; height:56px; margin-left:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.condition{ font-weight:500; font-size:15px; }
.feels-like{ font-size:12.5px; color:var(--ink-dim); }

.range{
  display:flex; gap:18px; padding-top:14px; margin-top:2px;
  border-top:1px solid var(--glass-border);
  font-size:12.5px; color:var(--ink-dim);
}
.range span{ display:flex; align-items:center; gap:6px; }
.range b{ font-family:var(--font-mono); color:var(--ink); font-weight:500; }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot-low{ background:var(--cyan); }
.dot-high{ background:var(--amber); }

/* ---------- stats ---------- */
.stats-heading{
  font-family:var(--font-display); font-weight:500; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  padding:0 2px;
}
.stats-container{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:10px;
}
.stat-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius-md); padding:16px;
  backdrop-filter: blur(14px);
  transition: transform .18s ease, background .18s ease;
}
.stat-card:hover{ transform: translateY(-2px); background:var(--glass-strong); }
.stat-icon{
  display:block; width:20px; height:20px; margin-bottom:10px;
  background-color:var(--cyan);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.stat-icon[data-icon="humidity"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 2s7 8 7 13a7 7 0 1 1-14 0c0-5 7-13 7-13Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 2s7 8 7 13a7 7 0 1 1-14 0c0-5 7-13 7-13Z'/%3E%3C/svg%3E"); }
.stat-icon[data-icon="wind"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 16h14a3 3 0 1 1-3 3M3 12h9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 16h14a3 3 0 1 1-3 3M3 12h9'/%3E%3C/svg%3E"); }
.stat-icon[data-icon="pressure"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 12 8.5 9.5M12 7v1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 12 8.5 9.5M12 7v1'/%3E%3C/svg%3E"); }
.stat-icon[data-icon="visibility"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.stat-icon[data-icon="sunrise"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v5M4.2 10.2l1.4 1.4M19.8 10.2l-1.4 1.4M2 18h20M6 18a6 6 0 0 1 12 0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v5M4.2 10.2l1.4 1.4M19.8 10.2l-1.4 1.4M2 18h20M6 18a6 6 0 0 1 12 0'/%3E%3C/svg%3E"); }
.stat-icon[data-icon="sunset"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 8V3M4.2 10.2l1.4 1.4M19.8 10.2l-1.4 1.4M2 18h20M6 18a6 6 0 0 1 12 0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 8V3M4.2 10.2l1.4 1.4M19.8 10.2l-1.4 1.4M2 18h20M6 18a6 6 0 0 1 12 0'/%3E%3C/svg%3E"); }
.stat-label{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.stat-value{ font-family:var(--font-mono); font-size:17px; font-weight:500; margin-top:5px; color:var(--ink); }

.footnote{ text-align:center; font-size:11px; color:var(--ink-faint); padding-top:6px; }

/* ---------- responsive ---------- */
@media (max-width:420px){
  .hero-temp{ font-size:70px; }
  .stats-container{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .app{ padding:16px 14px 40px; }
}

/* ---------- accessibility ---------- */
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}