/* Seasonal designs. Each theme only changes colours and decoration; apply with data-theme on html (live site) or on a preview element. */
[data-theme="default"] { --bg: #100a0b; --bg-rgb: 16, 10, 11; --surface: #1a1113; --surface-2: #261619; --line: #3a2327; --text: #f1e8e9; --muted: #a8929a; --accent: #e0383e; --accent-rgb: 224, 56, 62; --accent-2: #ff7a45; --teal: #ff8f8a; --surface-a: #171011; --surface-b: #1d1315; --surface-d: #0e0809; --line-2: #3a2a2e; --accent-ink: #ffffff; --own: #ff6a3d; --own-0: #e0383e; --own-2: #ff8a3d; --own-3: #ffd27a; --own-rgb: 255, 106, 61; --own-bg1: #261512; --own-bg2: #150f0e; --own-line: #5a2a22; }
[data-theme="summer"] { --bg: #07161c; --bg-rgb: 7, 22, 28; --surface: #0e2530; --surface-2: #14323f; --line: #1f4a5a; --text: #f4fbff; --muted: #8fb3c2; --accent: #ffb703; --accent-rgb: 255, 183, 3; --accent-2: #ff8c42; --teal: #ffd166; --surface-a: #0b1e27; --surface-b: #102a35; --surface-d: #05121a; --line-2: #24505f; --accent-ink: #1d1400; --own: #ff9f1c; --own-0: #ff6b35; --own-2: #ffbf47; --own-3: #fff1a8; --own-rgb: 255, 159, 28; --own-bg1: #2a2210; --own-bg2: #14110a; --own-line: #6a5018; }
[data-theme="autumn"] { --bg: #130d08; --bg-rgb: 19, 13, 8; --surface: #1f150d; --surface-2: #2d1e12; --line: #4a3320; --text: #f6ece0; --muted: #b49a82; --accent: #e07b1a; --accent-rgb: 224, 123, 26; --accent-2: #f2b134; --teal: #f4a259; --surface-a: #1a110a; --surface-b: #22170e; --surface-d: #0d0804; --line-2: #4a3524; --accent-ink: #ffffff; --own: #ff8c1a; --own-0: #c2410c; --own-2: #ffb347; --own-3: #ffe0a3; --own-rgb: 255, 140, 26; --own-bg1: #2a1a0c; --own-bg2: #150e08; --own-line: #6a4020; }
[data-theme="winter"] { --bg: #080d16; --bg-rgb: 8, 13, 22; --surface: #0f1826; --surface-2: #162338; --line: #263a57; --text: #eef5ff; --muted: #94a9c4; --accent: #5cb8ff; --accent-rgb: 92, 184, 255; --accent-2: #a8e0ff; --teal: #9ad4ff; --surface-a: #0c1420; --surface-b: #121c2c; --surface-d: #05080f; --line-2: #2a3f5e; --accent-ink: #04121f; --own: #5ad0ff; --own-0: #2b8cff; --own-2: #8be3ff; --own-3: #e6f7ff; --own-rgb: 90, 208, 255; --own-bg1: #10202e; --own-bg2: #0a1119; --own-line: #2a5a7a; }
[data-theme="christmas"] { --bg: #0c1410; --bg-rgb: 12, 20, 16; --surface: #13201a; --surface-2: #1b2d24; --line: #2e4a3a; --text: #f7f1e6; --muted: #a3b9a8; --accent: #d62839; --accent-rgb: 214, 40, 57; --accent-2: #ffd166; --teal: #f2c94c; --surface-a: #101a15; --surface-b: #16241c; --surface-d: #070d0a; --line-2: #335242; --accent-ink: #ffffff; --own: #ff3b4e; --own-0: #d62839; --own-2: #2fbf71; --own-3: #ffe08a; --own-rgb: 255, 59, 78; --own-bg1: #241413; --own-bg2: #0f1a14; --own-line: #6a2a30; }
[data-theme="easter"] { --bg: #130f1a; --bg-rgb: 19, 15, 26; --surface: #1d1727; --surface-2: #2a2138; --line: #44385a; --text: #f8f2ff; --muted: #b6a7cc; --accent: #ff8fc7; --accent-rgb: 255, 143, 199; --accent-2: #ffe066; --teal: #c4a7ff; --surface-a: #181220; --surface-b: #201a2b; --surface-d: #0c0910; --line-2: #4a3e62; --accent-ink: #2a0a1c; --own: #ff6fb5; --own-0: #c77dff; --own-2: #ffd166; --own-3: #fff0a8; --own-rgb: 255, 111, 181; --own-bg1: #281530; --own-bg2: #150d1a; --own-line: #6a3a7a; }
[data-theme="halloween"] { --bg: #0b0710; --bg-rgb: 11, 7, 16; --surface: #150e1e; --surface-2: #20152e; --line: #3a2554; --text: #f3ece6; --muted: #a99bb8; --accent: #ff7a00; --accent-rgb: 255, 122, 0; --accent-2: #b36bff; --teal: #ff9a3c; --surface-a: #110a18; --surface-b: #180f22; --surface-d: #070409; --line-2: #402a5c; --accent-ink: #1b0c00; --own: #ff7a00; --own-0: #8a2be2; --own-2: #ffb347; --own-3: #e0b3ff; --own-rgb: 255, 122, 0; --own-bg1: #231008; --own-bg2: #120a0d; --own-line: #5a2e7a; }
[data-theme="spring"] { --bg: #0b1410; --bg-rgb: 11, 20, 16; --surface: #12211a; --surface-2: #1a3025; --line: #2a4a38; --text: #f1faf0; --muted: #9bbaa6; --accent: #7ddc5a; --accent-rgb: 125, 220, 90; --accent-2: #ff9ecd; --teal: #a7f08a; --surface-a: #0f1b15; --surface-b: #15271e; --surface-d: #060d09; --line-2: #2f523f; --accent-ink: #0c2005; --own: #5ed16a; --own-0: #ff7eb6; --own-2: #b6f58f; --own-3: #fff3a8; --own-rgb: 94, 209, 106; --own-bg1: #12241a; --own-bg2: #0a140f; --own-line: #2f6a40; }

/* decoration (live site only, behind the content, never blocks clicks) */
html[data-theme] body.pub::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-theme="summer"] body.pub::after { background: radial-gradient(60% 45% at 85% -5%, rgba(255, 200, 60, .22), transparent 70%), radial-gradient(50% 35% at 0% 100%, rgba(40, 190, 220, .14), transparent 70%); }
html[data-theme="autumn"] body.pub::after { background: radial-gradient(60% 45% at 15% -5%, rgba(255, 140, 30, .18), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(160, 60, 20, .16), transparent 70%); }
html[data-theme="spring"] body.pub::after { background: radial-gradient(55% 40% at 90% 0%, rgba(160, 240, 120, .16), transparent 70%), radial-gradient(45% 35% at 0% 100%, rgba(255, 158, 205, .12), transparent 70%); }
html[data-theme="easter"] body.pub::after { background: radial-gradient(55% 40% at 10% 0%, rgba(255, 143, 199, .17), transparent 70%), radial-gradient(50% 40% at 100% 90%, rgba(255, 224, 102, .12), transparent 70%); }
html[data-theme="halloween"] body.pub::after { background: radial-gradient(60% 45% at 50% 110%, rgba(255, 122, 0, .2), transparent 70%), radial-gradient(45% 35% at 0% 0%, rgba(138, 43, 226, .18), transparent 70%); }
html[data-theme="winter"] body.pub::after, html[data-theme="christmas"] body.pub::after {
  background:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, .9), transparent),
    radial-gradient(2px 2px at 120px 80px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(3px 3px at 70px 140px, rgba(255, 255, 255, .85), transparent),
    radial-gradient(2px 2px at 180px 20px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(2px 2px at 40px 190px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(3px 3px at 160px 150px, rgba(255, 255, 255, .75), transparent);
  background-size: 220px 220px; opacity: .55;
}
html[data-theme="christmas"] body.pub::after { background-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="winter"] body.pub::after, html[data-theme="christmas"] body.pub::after { animation: th-snow 22s linear infinite; }
}
@keyframes th-snow { from { background-position: 0 0; } to { background-position: 40px 220px; } }
html[data-theme="christmas"] .site-header { border-top-color: #2fbf71; }
html[data-theme="halloween"] .site-header { border-top-color: #b36bff; }

/* mini preview in admin */
.th-mock { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--text); min-height: 150px; position: relative; overflow: hidden; }
.th-mock .th-bar { height: 10px; border-radius: 6px; background: var(--surface-b); border-top: 3px solid var(--accent); }
.th-mock .th-tile { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: var(--surface); border-left: 3px solid var(--accent); }
.th-mock .th-tile i { width: 22px; height: 22px; border-radius: 7px; background: rgba(var(--accent-rgb), .25); }
.th-mock .th-tile b { height: 8px; width: 60%; border-radius: 4px; background: var(--muted); opacity: .6; }
.th-mock .th-row { display: flex; gap: 6px; }
.th-mock .th-btn { padding: 4px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; }
.th-mock .th-link { color: var(--teal); font-size: .75rem; align-self: center; }
.th-mock .th-own { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--own); color: var(--own-3); font-size: .72rem; }
.th-mock .th-gold { padding: 4px 10px; border-radius: 8px; border: 1px solid #e8b84a; color: #ffe39a; font-size: .72rem; }