.festival-countdown{background:var(--card,#1a1a1a);border:1px solid var(--border,#333);border-radius:24px;overflow:hidden}.festival-countdown-skeleton{background:var(--card,#1a1a1a);border-radius:24px;height:400px;animation:1.5s ease-in-out infinite pulse}.countdown-hero{background:linear-gradient(135deg, color-mix(in srgb, var(--festival-color) 15%, transparent), transparent);text-align:center;border-bottom:1px solid var(--border,#333);padding:40px 32px}.hero-icon{filter:drop-shadow(0 4px 20px color-mix(in srgb, var(--festival-color) 50%, transparent));margin-bottom:16px;font-size:4rem}.countdown-hero h2{color:var(--foreground);margin:0 0 8px;font-size:2rem}.festival-description{color:#888;margin:0 0 32px;font-size:1rem}.countdown-timer{justify-content:center;align-items:center;gap:8px;margin-bottom:24px;display:flex}.timer-unit{background:var(--background,#0a0a0a);border:1px solid var(--border,#333);border-radius:16px;flex-direction:column;align-items:center;min-width:80px;padding:16px 20px;display:flex}.timer-value{color:var(--festival-color);font-variant-numeric:tabular-nums;font-size:2.5rem;font-weight:700;line-height:1}.timer-label{color:#888;text-transform:uppercase;margin-top:4px;font-size:.75rem}.timer-separator{color:#555;font-size:2rem;font-weight:300}.festival-date-badge{background:var(--background,#0a0a0a);border:1px solid var(--border,#333);color:var(--foreground);border-radius:20px;padding:8px 16px;font-size:.85rem;display:inline-block}.upcoming-festivals{padding:24px}.upcoming-festivals h3{color:#888;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px;font-size:1rem}.festivals-list{flex-direction:column;gap:8px;display:flex}.festival-item{background:var(--background,#0a0a0a);border:1px solid var(--border,#333);cursor:pointer;text-align:left;border-radius:12px;align-items:center;gap:12px;width:100%;padding:12px 16px;transition:all .2s;display:flex}.festival-item:hover{border-color:var(--festival-color)}.festival-item.selected{border-color:var(--festival-color);background:color-mix(in srgb, var(--festival-color) 10%, var(--background,#0a0a0a))}.item-icon{background:color-mix(in srgb, var(--festival-color) 20%, transparent);border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;display:flex}.item-info{flex-direction:column;flex:1;display:flex}.item-name{color:var(--foreground);font-size:.9rem;font-weight:600}.item-date{color:#888;font-size:.75rem}.item-days{color:var(--festival-color);font-size:.8rem;font-weight:500}.festival-countdown-compact{background:linear-gradient(135deg, color-mix(in srgb, var(--festival-color) 10%, transparent), transparent);border:1px solid color-mix(in srgb, var(--festival-color) 30%, transparent);border-radius:16px;justify-content:space-between;align-items:center;padding:16px;display:flex}.compact-festival-header{align-items:center;gap:12px;display:flex}.compact-festival-header .festival-icon{font-size:2rem}.compact-festival-header .festival-info{flex-direction:column;display:flex}.compact-festival-header .festival-name{color:var(--foreground);font-size:.9rem;font-weight:600}.compact-festival-header .festival-date{color:#888;font-size:.75rem}.compact-countdown{background:var(--background,#0a0a0a);border-radius:12px;flex-direction:column;align-items:center;padding:8px 16px;display:flex}.compact-countdown .countdown-value{color:var(--festival-color);font-size:1.5rem;font-weight:700;line-height:1}.compact-countdown .countdown-label{color:#888;text-transform:uppercase;font-size:.65rem}@media (max-width:640px){.countdown-hero{padding:32px 20px}.hero-icon{font-size:3rem}.countdown-hero h2{font-size:1.5rem}.countdown-timer{gap:4px}.timer-unit{min-width:60px;padding:12px 14px}.timer-value{font-size:1.75rem}.timer-separator{font-size:1.5rem}}.view-toggle{border-bottom:1px solid var(--border,#333);justify-content:center;gap:8px;padding:16px 24px;display:flex}.toggle-btn{background:var(--background,#0a0a0a);border:1px solid var(--border,#333);color:var(--foreground);cursor:pointer;border-radius:20px;padding:10px 20px;font-size:.85rem;transition:all .2s}.toggle-btn:hover{border-color:#f97316}.toggle-btn.active{color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);border-color:#0000}.calendar-view{padding:24px}.year-selector{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px;display:flex}.year-btn{background:var(--background,#0a0a0a);border:1px solid var(--border,#333);color:var(--foreground);cursor:pointer;border-radius:12px;padding:10px 24px;font-size:1rem;font-weight:600;transition:all .2s}.year-btn:hover{border-color:#f97316}.year-btn.active{color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);border-color:#0000}.calendar-grid{flex-direction:column;gap:10px;display:flex}.calendar-item{background:var(--background,#0a0a0a);border:1px solid var(--border,#333);border-left:4px solid var(--festival-color);cursor:pointer;border-radius:12px;align-items:center;gap:16px;padding:16px;transition:all .2s;display:flex}.calendar-item:hover:not(.past){border-color:var(--festival-color);background:color-mix(in srgb, var(--festival-color) 10%, var(--background,#0a0a0a))}.calendar-item.past{opacity:.5;cursor:default}.calendar-date{background:color-mix(in srgb, var(--festival-color) 20%, transparent);border-radius:10px;flex-direction:column;align-items:center;min-width:50px;padding:8px 12px;display:flex}.cal-day{color:var(--festival-color);font-size:1.5rem;font-weight:700;line-height:1}.cal-month{color:#888;text-transform:uppercase;font-size:.7rem}.calendar-info{flex:1;align-items:center;gap:12px;display:flex}.cal-icon{font-size:1.5rem}.cal-name{color:var(--foreground);font-size:.95rem;font-weight:600;display:block}.cal-weekday{color:#888;font-size:.75rem;display:block}.cal-days-left{background:color-mix(in srgb, var(--festival-color) 15%, transparent);color:var(--festival-color);white-space:nowrap;border-radius:16px;padding:6px 12px;font-size:.75rem;font-weight:500}.cal-passed{color:#666;background:#ffffff0d;border-radius:16px;padding:6px 12px;font-size:.75rem;font-weight:500}@media (max-width:640px){.view-toggle{padding:12px 16px}.toggle-btn{padding:8px 14px;font-size:.8rem}.year-selector{gap:6px}.year-btn{padding:8px 16px;font-size:.9rem}.calendar-item{flex-wrap:wrap;gap:12px}.calendar-info{flex:none;width:calc(100% - 70px)}.cal-days-left,.cal-passed{margin-left:auto}}