/* МетеоСфера — основные стили */
:root {
  --deep: #030712; --space: #0a0f1e;
  --card: rgba(255,255,255,0.04); --card-border: rgba(255,255,255,0.08);
  --accent: #38bdf8; --accent2: #818cf8; --accent3: #fb923c;
  --storm: #ef4444; --calm: #4ade80; --warm: #fbbf24;
  --text: #e2e8f0; --muted: #64748b; --glow: rgba(56,189,248,0.15);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--deep); color:var(--text); font-family:'Space Grotesk',sans-serif; min-height:100vh; overflow-x:hidden; padding-bottom:50px; }
body::before { content:''; position:fixed; inset:0; background: radial-gradient(ellipse 80% 50% at 20% 20%,rgba(56,189,248,.06) 0%,transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%,rgba(129,140,248,.06) 0%,transparent 60%); pointer-events:none; z-index:0; }
.stars { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.star { position:absolute; border-radius:50%; background:white; animation:twinkle linear infinite; }
@keyframes twinkle { 0%,100%{opacity:.1} 50%{opacity:.9} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.5);opacity:0} }
@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

header { position:relative; z-index:10; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--card-border); backdrop-filter:blur(12px); background:rgba(3,7,18,.6); animation:fadeInUp .6s ease both; }
.logo { display:flex; align-items:center; gap:12px; }
.logo-icon { width:44px; height:44px; }
.logo-icon svg { width:100%; height:100%; animation:spin-slow 20s linear infinite; }
.logo-text { font-family:'Orbitron',monospace; font-size:1.4rem; font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:.05em; }
.logo-sub { font-size:.7rem; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; }
.header-right { display:flex; align-items:center; gap:20px; }
.live-badge { display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; letter-spacing:.1em; color:var(--calm); text-transform:uppercase; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--calm); position:relative; }
.live-dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid var(--calm); animation:pulse-ring 1.5s ease infinite; }
#clock { font-family:'Orbitron',monospace; font-size:.9rem; color:var(--accent); letter-spacing:.05em; }

main { position:relative; z-index:5; max-width:1400px; margin:0 auto; padding:32px 24px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.card { background:var(--card); border:1px solid var(--card-border); border-radius:20px; padding:24px; position:relative; overflow:hidden; backdrop-filter:blur(16px); animation:fadeInUp .6s ease both; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.4); border-color:rgba(255,255,255,.14); }
.card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.02) 0%,transparent 60%); pointer-events:none; }
.card-wide { grid-column:span 2; }
.card-full { grid-column:span 3; }
.forecast-card { grid-column:span 2; }
.alerts-card { grid-column:span 3; }

.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-title { display:flex; align-items:center; gap:10px; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.card-title svg { width:16px; height:16px; }
.card-badge { font-size:.7rem; padding:3px 10px; border-radius:20px; font-weight:600; letter-spacing:.05em; }
.badge-calm { background:rgba(74,222,128,.12); color:var(--calm); border:1px solid rgba(74,222,128,.25); }
.badge-moderate { background:rgba(251,191,36,.12); color:var(--warm); border:1px solid rgba(251,191,36,.25); }
.badge-storm { background:rgba(239,68,68,.12); color:var(--storm); border:1px solid rgba(239,68,68,.25); }

.geo-big { font-family:'Orbitron',monospace; font-size:2rem; font-weight:700; color:var(--accent); line-height:1.1; margin-bottom:4px; }
.geo-city { font-size:1.1rem; font-weight:600; color:var(--text); margin-bottom:16px; }
.geo-details { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.geo-item { background:rgba(255,255,255,.03); border-radius:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.05); }
.geo-label { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:3px; }
.geo-value { font-size:.85rem; font-weight:600; color:var(--text); }
.geo-map-placeholder { margin-top:16px; height:80px; border-radius:12px; background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(129,140,248,.08)); border:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.geo-map-placeholder::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(56,189,248,.04) 20px,rgba(56,189,248,.04) 21px),repeating-linear-gradient(90deg,transparent,transparent 20px,rgba(56,189,248,.04) 20px,rgba(56,189,248,.04) 21px); }
.geo-pin { font-size:24px; animation:float 3s ease infinite; }

.weather-main { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.weather-icon-big { width:72px; height:72px; animation:float 4s ease infinite; flex-shrink:0; }
.weather-icon-big > svg { width:72px; height:72px; filter:drop-shadow(0 0 12px rgba(251,191,36,0.25)); }
.weather-temp { font-family:'Orbitron',monospace; font-size:3.5rem; font-weight:900; line-height:1; }
.weather-temp sup { font-size:1.5rem; vertical-align:super; color:var(--muted); }
.weather-desc { font-size:.9rem; color:var(--muted); margin-top:2px; }
.weather-feels { font-size:.8rem; color:var(--muted); margin-top:4px; }
.weather-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.weather-stat { background:rgba(255,255,255,.03); border-radius:10px; padding:12px; border:1px solid rgba(255,255,255,.05); text-align:center; }
.weather-stat-icon { font-size:20px; margin-bottom:4px; }
.weather-stat-val { font-size:.95rem; font-weight:700; color:var(--accent); }
.weather-stat-lbl { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.kp-display { display:flex; align-items:flex-end; gap:8px; margin-bottom:16px; }
.kp-number { font-family:'Orbitron',monospace; font-size:4rem; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--calm),#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; transition:all .5s ease; }
.kp-label { font-size:.8rem; color:var(--muted); padding-bottom:8px; }
.kp-scale { display:flex; gap:4px; margin-bottom:16px; }
.kp-bar { flex:1; height:8px; border-radius:4px; transition:all .3s ease; }
.kp-bar.active { box-shadow:0 0 8px currentColor; }
.storm-desc { font-size:.85rem; line-height:1.6; color:var(--muted); background:rgba(255,255,255,.02); border-radius:10px; padding:12px; border-left:3px solid var(--calm); transition:border-color .5s; }
.storm-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }

.hourly-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.hourly-scroll::-webkit-scrollbar { height:3px; }
.hourly-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.02); border-radius:3px; }
.hourly-scroll::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }
.hourly-item { flex-shrink:0; width:70px; background:rgba(255,255,255,.03); border-radius:12px; padding:12px 8px; text-align:center; border:1px solid rgba(255,255,255,.05); transition:all .2s ease; cursor:default; }
.hourly-item:hover { background:rgba(56,189,248,.08); border-color:rgba(56,189,248,.2); }
.hourly-item.now { background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.3); box-shadow:0 0 20px rgba(56,189,248,.1); }
.hourly-time { font-size:.7rem; color:var(--muted); margin-bottom:6px; }
.hourly-time.now-text { color:var(--accent); font-weight:700; }
.hourly-icon { font-size:22px; margin:4px 0; }
.hourly-temp { font-size:.9rem; font-weight:700; color:var(--text); }
.hourly-precip { font-size:.65rem; color:#60a5fa; margin-top:2px; }

.space-stats { display:flex; flex-direction:column; gap:12px; }
.space-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:rgba(255,255,255,.02); border-radius:10px; border:1px solid rgba(255,255,255,.04); }
.space-name { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); }
.space-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.space-val { font-size:.85rem; font-weight:700; color:var(--text); }

.alert-list { display:flex; gap:14px; flex-wrap:wrap; }
.alert-item { flex:1; min-width:200px; display:flex; align-items:flex-start; gap:12px; padding:14px; background:rgba(255,255,255,.02); border-radius:12px; border:1px solid rgba(255,255,255,.05); }
.alert-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.alert-title { font-size:.85rem; font-weight:600; margin-bottom:3px; }
.alert-text { font-size:.75rem; color:var(--muted); line-height:1.5; }

.status-bar { position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(3,7,18,.9); backdrop-filter:blur(12px); border-top:1px solid var(--card-border); padding:8px 32px; display:flex; align-items:center; justify-content:space-between; font-size:.7rem; color:var(--muted); }
.status-items { display:flex; gap:24px; }
.status-item { display:flex; align-items:center; gap:6px; }
.status-dot { width:6px; height:6px; border-radius:50%; }

@media(max-width:900px) { main { grid-template-columns:1fr 1fr; } .alerts-card { grid-column:span 2; } }
@media(max-width:600px) { main { grid-template-columns:1fr; padding:16px; } .card-wide,.forecast-card,.alerts-card { grid-column:span 1; } header { padding:16px; } }

/* ── ЛУНА ──────────────────────────────────────────────────── */
.moon-card { grid-column: span 2; animation-delay: .55s; }

.moon-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0 16px;
}
.moon-glow {
  position: absolute;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,201,168,0.18) 0%, transparent 70%);
  animation: float 6s ease infinite;
  pointer-events: none;
}
.moon-svg {
  width: 110px; height: 110px;
  filter: drop-shadow(0 0 18px rgba(212,201,168,0.25));
  animation: float 6s ease infinite;
  flex-shrink: 0;
}
.moon-illumination {
  position: absolute; bottom: -4px; right: calc(50% - 80px);
  font-family: 'Orbitron', monospace;
  font-size: .8rem; font-weight: 700;
  color: #d4c9a8;
  background: rgba(10,15,30,0.85);
  border: 1px solid rgba(212,201,168,0.2);
  border-radius: 20px; padding: 2px 10px;
  letter-spacing: .05em;
}
.moon-phase-name {
  text-align: center;
  font-size: 1.15rem; font-weight: 700;
  color: #f0e8d0;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.moon-desc {
  text-align: center;
  font-size: .78rem; color: var(--muted);
  line-height: 1.5; margin-bottom: 16px;
  max-width: 340px; margin-left: auto; margin-right: auto;
}
.moon-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px; margin-bottom: 14px;
}
.moon-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; padding: 10px 8px; text-align: center;
}
.moon-stat-label {
  font-size: .62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.moon-stat-value {
  font-size: .88rem; font-weight: 700; color: #d4c9a8;
}
.moon-tip {
  font-size: .8rem; line-height: 1.6; color: var(--muted);
  background: rgba(212,201,168,.04);
  border-left: 3px solid rgba(212,201,168,.35);
  border-radius: 0 10px 10px 0; padding: 10px 14px;
}

/* Адаптив */
@media(max-width:900px) {
  .moon-card { grid-column: span 2; }
  .moon-stats { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
  .moon-card { grid-column: span 1; }
  .moon-stats { grid-template-columns: 1fr 1fr; }
}


/* ── БЛОК ПОГОДЫ ────────────────────────────────────────────── */
.wx-top {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.wx-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: float 4s ease infinite;
}
.wx-icon svg { width: 64px; height: 64px; display: block; }

/* Четыре стата горизонтально */
.wx-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.wx-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px; text-align: center;
}
.wx-stat svg { display: block; flex-shrink: 0; }
.wx-stat-val { font-size: .9rem; font-weight: 700; color: var(--accent); line-height: 1; }
.wx-stat-lbl { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

/* Дуга солнца */
.wx-sun {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 14px;
}
.wx-sun-side {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.wx-sun-side svg { display: block; flex-shrink: 0; }
.wx-sun-right { flex-direction: row-reverse; }
.wx-sun-val {
  font-family: 'Orbitron', monospace; font-size: .95rem; font-weight: 700;
  color: #fbbf24; line-height: 1.1;
}
.wx-sun-lbl { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.wx-arc-center { flex: 1; min-width: 0; text-align: center; }
.wx-arc-svg { width: 100%; height: 60px; display: block; overflow: visible; }
.wx-daylight { font-size: .7rem; color: var(--muted); margin-top: 4px; }

@media(max-width:700px) {
  .wx-stats { grid-template-columns: repeat(2, 1fr); }
  .wx-sun { flex-wrap: wrap; justify-content: center; }
  .wx-arc-center { width: 100%; order: -1; }
}