.nm-meteo-card { background: #ffffff; border: 1px solid #e0e6ed; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 320px; margin: 10px auto; color: #333; box-sizing: border-box; }
.nm-meteo-card * { box-sizing: border-box; }
.nm-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f4f8; padding-bottom: 10px; margin-bottom: 12px; }
.nm-logo-text { font-size: 13px; font-weight: 700; color: #0288d1; text-transform: uppercase; letter-spacing: 0.5px; }
.nm-city-select { font-size: 13px; padding: 4px 8px; border: 1px solid #cfd8dc; border-radius: 6px; background: #fafafa; outline: none; cursor: pointer; color: #455a64; max-width: 140px;}
.nm-main-display { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 12px; }
.nm-icon-wrapper { width: 64px; height: 64px; }
.nm-icon { width: 100%; height: 100%; }
.nm-temp-now { display: flex; flex-direction: column; }
.nm-degree { font-size: 34px; font-weight: 800; color: #1a237e; line-height: 1; }
.nm-feels-like { font-size: 11px; color: #546e7a; margin-top: 2px; font-weight: 500; }
.nm-status-text { font-size: 13px; color: #757575; font-weight: 500; margin-top: 4px; }
.nm-current-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f5f7fa; padding: 10px; border-radius: 8px; font-size: 11px; margin-bottom: 14px; }
.nm-detail-item { color: #546e7a; font-weight: 500; }

/* Табови */
.nm-tabs-nav { display: flex; background: #eceff1; border-radius: 8px; padding: 3px; margin-bottom: 10px; }
.nm-tab-btn { flex: 1; border: none; background: none; padding: 6px; font-size: 12px; font-weight: 600; color: #607d8b; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.nm-tab-btn.active { background: #ffffff; color: #0288d1; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.nm-tab-content { display: none; }
.nm-tab-content.active { display: block; }

/* Листи во табовите */
.nm-hourly-list { display: flex; justify-content: space-between; overflow-x: auto; padding-bottom: 4px; gap: 8px;}
.nm-hourly-item { display: flex; flex-direction: column; align-items: center; background: #fafafa; padding: 6px 8px; border-radius: 6px; min-width: 50px; flex: 1;}
.nm-h-time { font-size: 11px; color: #90a4ae; }
.nm-h-temp { font-size: 13px; font-weight: 700; color: #37474f; margin: 3px 0; }
.nm-h-rain { font-size: 10px; color: #29b6f6; }

.nm-daily-list { display: flex; flex-direction: column; gap: 8px; }
.nm-daily-item { display: flex; align-items: center; justify-content: space-between; background: #fafafa; padding: 6px 10px; border-radius: 6px; }
.nm-d-name { font-size: 12px; font-weight: 600; color: #455a64; width: 80px; }
.nm-d-icon { width: 28px; height: 28px; }
.nm-d-rain { font-size: 11px; color: #29b6f6; width: 40px; text-align: center; }
.nm-d-temp { font-size: 12px; font-weight: 700; color: #37474f; width: 70px; text-align: right; }

/* АНИМАЦИИ */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.icon-sunny { animation: spin 12s linear infinite; transform-origin: center; }

@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0px); } }
.icon-cloud { animation: float 4s ease-in-out infinite; }

@keyframes rain-drop { 0% { opacity: 0; transform: translateY(-4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(4px); } }
.icon-rain line { animation: rain-drop 1.2s ease-in-out infinite; }
.icon-rain line:nth-child(2) { animation-delay: 0.3s; }
.icon-rain line:nth-child(3) { animation-delay: 0.6s; }

@keyframes flash { 0%, 90%, 100% { opacity: 0; } 92%, 95% { opacity: 1; } }
.icon-lightning { animation: flash 2.5s infinite; }

/* АНИМАЦИЈА ЗА МЕСЕЧИНА */
@keyframes moon-glow {
    0%   { filter: drop-shadow(0 0 2px rgba(176,190,197,0.4)); }
    50%  { filter: drop-shadow(0 0 6px rgba(176,190,197,0.9)); }
    100% { filter: drop-shadow(0 0 2px rgba(176,190,197,0.4)); }
}
.icon-moon {
    animation: moon-glow 4s ease-in-out infinite;
}
@keyframes twinkle {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.icon-stars circle:nth-child(1) { animation: twinkle 2.5s ease-in-out infinite; }
.icon-stars circle:nth-child(2) { animation: twinkle 3.1s ease-in-out infinite 0.4s; }
.icon-stars circle:nth-child(3) { animation: twinkle 2.0s ease-in-out infinite 0.8s; }
.icon-stars circle:nth-child(4) { animation: twwinke 2.8s ease-in-out infinite 1.2s; }