/* Seasonal and holiday themes. Loaded only while the admin has a theme switched on. */
:root{--th-bg:#111;--th-ink:#fff;--th-shape:none;--th-anim:th-fall}
html[data-theme=spring]{--th-bg:#F7D4DE;--th-ink:#6B2238;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='6' ry='10' fill='%23F4A7BC' transform='rotate(30 12 12)'/%3E%3C/svg%3E")}
html[data-theme=summer]{--th-bg:#CFF0F6;--th-ink:#0B4F5E;--th-anim:th-rise;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%2363C5DA' stroke-width='2'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23B9E7F1'/%3E%3C/svg%3E")}
html[data-theme=autumn]{--th-bg:#F3D2AE;--th-ink:#6A3510;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6 6 4 12 6 18c3 1 7 1 12-4 2-4 1-9-6-12z' fill='%23D9822B'/%3E%3Cpath d='M7 19 15 8' stroke='%23A85A17' stroke-width='1.2'/%3E%3C/svg%3E")}
html[data-theme=winter],html[data-theme=christmas]{--th-bg:#DCE8F5;--th-ink:#1E3A5C;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB8D9' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E")}
html[data-theme=christmas]{--th-bg:#C8102E;--th-ink:#fff}
html[data-theme=ramadan]{--th-bg:#1E2A44;--th-ink:#F3DFA8;--th-anim:th-twinkle;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 6.9H21l-5.4 4.2 2 7L12 16l-5.6 4.1 2-7L3 8.9h6.6z' fill='%23D8B460'/%3E%3C/svg%3E")}
html[data-theme=eid]{--th-bg:#1F5E43;--th-ink:#F6E7B8;--th-anim:th-twinkle;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 6.9H21l-5.4 4.2 2 7L12 16l-5.6 4.1 2-7L3 8.9h6.6z' fill='%23C9A24A'/%3E%3C/svg%3E")}
html[data-theme=new_year]{--th-bg:#111;--th-ink:#F1D48A;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='3' width='8' height='18' rx='2' fill='%23C9A24A'/%3E%3C/svg%3E")}
html[data-theme=valentine]{--th-bg:#FADCE6;--th-ink:#8C1D44;--th-anim:th-rise;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z' fill='%23E0457B'/%3E%3C/svg%3E")}
html[data-theme=mothers_day]{--th-bg:#FBE1EA;--th-ink:#7A2846;--th-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23E58FB0'%3E%3Ccircle cx='12' cy='6' r='4'/%3E%3Ccircle cx='18' cy='12' r='4'/%3E%3Ccircle cx='12' cy='18' r='4'/%3E%3Ccircle cx='6' cy='12' r='4'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3' fill='%23F7D27A'/%3E%3C/svg%3E")}

/* Banner above the header */
.theme-bar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:8px 16px;background:var(--th-bg);color:var(--th-ink);font-size:14px;font-weight:600;text-align:center}
.theme-ic{width:18px;height:18px;flex:none;background:var(--th-shape) center/contain no-repeat;animation:th-spin 6s linear infinite}

/* Falling, rising or twinkling shapes. Few elements, transform and opacity only, so it stays cheap. */
.th-fx{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.th-fx i{position:absolute;top:-40px;left:var(--x);width:var(--s);height:var(--s);background:var(--th-shape) center/contain no-repeat;opacity:.85;will-change:transform;animation:var(--th-anim) var(--d) linear var(--delay) infinite}
@keyframes th-fall{0%{transform:translate3d(0,-5vh,0) rotate(0)}50%{transform:translate3d(3vw,50vh,0) rotate(160deg)}100%{transform:translate3d(-2vw,105vh,0) rotate(320deg)}}
@keyframes th-rise{0%{transform:translate3d(0,108vh,0) scale(.8);opacity:0}15%{opacity:.85}100%{transform:translate3d(3vw,-5vh,0) scale(1.1);opacity:0}}
@keyframes th-twinkle{0%{transform:translate3d(0,8vh,0) scale(.4);opacity:0}30%{opacity:.95}50%{transform:translate3d(1vw,30vh,0) scale(1)}100%{transform:translate3d(-1vw,70vh,0) scale(.5);opacity:0}}
@keyframes th-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.th-fx{display:none}.theme-ic{animation:none}}
@media print{.th-fx,.theme-bar{display:none}}