.weather-widget { display: flex; align-items: center; gap: 16px; min-height: 76px; margin-top: 10px; padding: 12px 16px; border: 1px solid #ffffffd9; border-radius: 13px; background: #ffffffd9; box-shadow: 0 16px 38px var(--shadow); backdrop-filter: blur(14px); }
.weather-icon { position: relative; display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; overflow: hidden; border-radius: 18px; background: var(--accent-soft); color: var(--accent-deep); font-size: 31px; isolation: isolate; }
.weather-glyph { z-index: 2; transform-origin: 50% 60%; animation: weather-float 2.8s ease-in-out infinite; }
.weather-orbit, .weather-icon::before { position: absolute; display: block; border-radius: 50%; content: ""; }
.weather-orbit { width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--accent-secondary) 40%, transparent); animation: weather-spin 5s linear infinite; }
.weather-orbit::after { position: absolute; top: -4px; left: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 13px #f2b705cc; content: ""; }
.weather-icon::before { width: 66px; height: 66px; background: radial-gradient(circle, #ffffffaa 0 8%, transparent 9%); animation: weather-pulse 3s ease-in-out infinite; }
.weather-rain .weather-glyph, .weather-storm .weather-glyph { animation: weather-bounce 1.2s ease-in-out infinite; }
.weather-night .weather-orbit::after { background: #b6d6ff; box-shadow: 0 0 10px #b6d6ff; }
.weather-mist .weather-orbit { animation-duration: 8s; }
@keyframes weather-float { 0%,100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes weather-bounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-4px) scale(1.06); } }
@keyframes weather-spin { to { transform: rotate(360deg); } }
@keyframes weather-pulse { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .55; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .weather-glyph, .weather-orbit, .weather-icon::before { animation: none; } }
.weather-main { min-width: 140px; }
.weather-main strong { display: block; font-size: 18px; line-height: 1.1; }
.weather-main span, .weather-loading, .weather-error { color: var(--muted); font-size: 12px; }
.weather-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.weather-metric { min-width: 82px; padding: 7px 10px; border-left: 1px solid var(--line); }
.weather-metric small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.weather-metric b { display: block; margin-top: 2px; font-size: 12px; }
@media (max-width: 600px) {
  .weather-widget { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
  .weather-main { min-width: 0; }
  .weather-metrics { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; gap: 8px; }
  .weather-metric { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); }
  .weather-metric small { font-size: 10px; }
  .weather-metric b { font-size: 13px; overflow-wrap: anywhere; }
}