.astro-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.astro-widget {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
}

.astro-world {
    grid-column: 1 / -1;
}

.astro-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.astro-widget-kicker {
    color: rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.astro-widget h3 {
    margin: 3px 0 0;
    color: rgba(255,255,255,.92);
    font-size: 18px;
}

.astro-widget-head strong {
    color: rgba(255,255,255,.60);
    font-size: 11px;
}

#day-night-canvas,
#solar-year-canvas {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: #071321;
}

.astro-widget-foot {
    margin-top: 9px;
    color: rgba(255,255,255,.34);
    font-size: 9px;
}

.sidereal-time {
    margin: 16px 0;
    color: rgba(255,255,255,.95);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 570;
    font-variant-numeric: tabular-nums;
}

.sidereal-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.sidereal-details > div {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
}

.sidereal-details span {
    display: block;
    color: rgba(255,255,255,.36);
    font-size: 9px;
}

.sidereal-details strong {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
}

[data-theme="light"] #today-panel .astro-widget {
    background: #F8FAFC;
    border-color: #C7D1DC;
}

[data-theme="light"] #today-panel .astro-widget h3,
[data-theme="light"] #today-panel .sidereal-time,
[data-theme="light"] #today-panel .sidereal-details strong {
    color: #1E293B;
}

[data-theme="light"] #today-panel .astro-widget-kicker,
[data-theme="light"] #today-panel .astro-widget-foot,
[data-theme="light"] #today-panel .sidereal-details span {
    color: #64748B;
}

@media (max-width: 800px) {
    .astro-widgets {
        grid-template-columns: 1fr;
    }

    .astro-world {
        grid-column: auto;
    }
}