.vh-activity-countdown { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 1rem; padding: 1.1rem 1.3rem; border: 1px solid #c6dfe4; border-left: 5px solid #087b94; border-radius: 14px; background: #edf7f8; color: #083f51; text-align: left; box-sizing: border-box; max-width: 100%; }
.vh-countdown-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #d4eaf0; color: #075974; font: 36px/1 Arial, sans-serif; }
.vh-activity-countdown > div { min-width: 0; display: grid; gap: .3rem; }
.vh-countdown-kicker { color: #346778; font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.vh-countdown-value { color: #083f51; font-size: clamp(1.15rem, 2.5vw, 1.7rem); line-height: 1.25; font-variant-numeric: tabular-nums; }
.vh-countdown-detail { color: #346778; font-size: .9rem; line-height: 1.4; }
.vh-activity-countdown[data-state="started"] { border-left-color: #507e62; background: #eef5ef; }
@media (max-width: 480px) { .vh-activity-countdown { gap: .65rem; padding: .9rem .75rem; } .vh-countdown-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 28px; } .vh-countdown-detail { font-size: .8rem; } }