.weather-loading {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1rem; color: var(--text-muted); font-size: var(--font-base);
}
.weather-loading-icon { font-size: var(--font-3xl); }

.weather-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    padding: 2rem 2.5rem 2.25rem;
    gap: 1.85rem;
    position: relative;
    min-height: 0;
}

.weather-shine {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse at 75% 10%, rgba(255,255,255,.1) 0%, transparent 55%),
            radial-gradient(ellipse at 10% 90%, rgba(255,255,255,.05) 0%, transparent 40%);
    pointer-events: none;
    animation: gradientShift 18s ease infinite;
    background-size: 200% 200%;
}

/* ── HERO ─────────────────────────────────────────────────── */
.weather-hero { display: flex; align-items: center; min-height: 0; }
.weather-hero-left { flex: 1; display: flex; flex-direction: column; gap: .75rem; }

.weather-date-line {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.weather-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .25rem;
}

.weather-icon-xl {
    width: 195px;
    height: 195px;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.5));
    flex-shrink: 0;
}

.weather-hero-temps { display: flex; flex-direction: column; gap: .35rem; }

.weather-temp-xl {
    font-size: var(--font-hero);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    display: flex;
    align-items: flex-start;
}
.weather-temp-num { display: inline-block; }
.weather-unit-xl  { font-size: var(--font-2xl); font-weight: 300; opacity: .75; margin-top: .6rem; }

.weather-desc-xl {
    font-size: var(--font-xl);
    font-weight: 700;
    opacity: .92;
    text-transform: capitalize;
    letter-spacing: -.01em;
}

.weather-minmax-row { display: flex; gap: .75rem; margin-top: .5rem; }
.weather-min-badge, .weather-max-badge {
    padding: .3rem .85rem;
    border-radius: 99px;
    font-size: var(--font-base);
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.weather-min-badge { background: rgba(99,179,237,.25); color: #93c5fd; }
.weather-max-badge { background: rgba(251,146,60,.25);  color: #fdba74; }

/* ── FORECAST STRIP ───────────────────────────────────────── */
.weather-forecast-strip {
    display: flex;
    gap: .75rem;
    padding: 1.4rem 1.25rem;
    background: rgba(0,0,0,.2);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
}
.weather-fc-day {
    flex: 1;
    text-align: center;
    padding: .4rem .5rem;
    border-radius: var(--radius-sm);
    transition: background .2s;
}
.weather-fc-day:hover { background: rgba(255,255,255,.07); }
.weather-fc-label {
    font-size: var(--font-sm);
    font-weight: 800;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.weather-fc-icon  { width: 96px; height: 96px; margin: .4rem auto .25rem; display: block; }
.weather-fc-desc  { font-size: var(--font-base); margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.weather-fc-temps { display: flex; gap: .5rem; justify-content: center; font-size: var(--font-sm); }
.weather-fc-max   { font-weight: 800; }
.weather-fc-min   { opacity: .5; }

/* ── BOTTOM COLUMN: pills + sun arc stacked ──────────────── */
.weather-bottom-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    flex: 1;
}

.weather-pills {
    display: flex;
    gap: .75rem;
    flex-wrap: nowrap;
}
.weather-pill {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-md);
    background: rgba(0,0,0,.25) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1) !important;
    flex: 1;
}
.weather-pill-icon  { font-size: var(--font-xl); flex-shrink: 0; }
.weather-pill-label { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .07em; opacity: .5; font-weight: 700; white-space: nowrap; }
.weather-pill-value { font-size: var(--font-md); font-weight: 700; white-space: nowrap; }

.weather-sun-card {
    width: 100%;
    background: rgba(0,0,0,.25) !important;
    border-color: rgba(255,255,255,.1) !important;
    padding: .9rem 1.5rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 0 0 auto;
    overflow: hidden;
}

.sun-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sun-time-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}
.sun-time-right { justify-content: flex-end; text-align: right; }
.sun-time-label { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .07em; opacity: .5; font-weight: 700; }
.sun-time-value { font-size: var(--font-md); font-weight: 800; }
.sun-emoji      { font-size: var(--font-lg); flex-shrink: 0; }

.sun-daylight-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}
.sun-daylight-icon { font-size: var(--font-lg); }
.sun-daylight-text { font-size: var(--font-base); white-space: nowrap; color: var(--text-primary); }

.sun-arc-wrapper { flex: 0 0 auto; position: relative; height: 145px; overflow: hidden; }
.sun-arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── Module: Calendar ─────────────────────────────────────── */
.calendar-meetings { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.meeting-card {
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--accent-blue);
    transition: border-color .3s;
}
.meeting-card.current { border-color: var(--accent-green); box-shadow: 0 0 20px rgba(34,197,94,.2); }
.meeting-time   { font-size: var(--font-xs); color: var(--text-secondary); margin-bottom: .25rem; }
.meeting-title  { font-weight: 700; font-size: var(--font-md); margin-bottom: .5rem; }
.meeting-attendees { font-size: var(--font-xs); color: var(--text-muted); }