/* ==========================================================================
   Kitti Nails - szezonális dizájnrendszer
   --------------------------------------------------------------------------
   A fájl kizárólag megjelenésért felel:
     - központi CSS változók (színek, fények, kártya- és gombfelületek),
     - dekorációs réteg (pointer-events: none),
     - témánkénti SVG/CSS dekorációk és animációk.
   Az alapértelmezett (téma nélküli) megjelenést nem módosítja: minden
   témaspecifikus szabály html[data-kn-theme="..."] hatókörben él.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dekorációs réteg alap
   -------------------------------------------------------------------------- */

.kn-theme {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: layout style paint;
    -webkit-user-select: none;
    user-select: none;
}

.kn-theme *,
.kn-theme *::before,
.kn-theme *::after {
    pointer-events: none !important;
}

html[data-kn-animations="off"] .kn-theme *,
html[data-kn-animations="off"] .kn-theme *::before,
html[data-kn-animations="off"] .kn-theme *::after {
    animation: none !important;
}

/* Animációk nélkül is látható, statikus dekoráció */
html[data-kn-animations="off"] .kn-spider { transform: translateY(0); }
html[data-kn-animations="off"] .kn-bat { opacity: 0.55; transform: translate3d(18vw, 0, 0); }
html[data-kn-animations="off"] .kn-bat--2 { transform: translate3d(64vw, 0, 0); }
html[data-kn-animations="off"] .kn-bat--3 { transform: translate3d(88vw, 0, 0); opacity: 0.4; }
html[data-kn-animations="off"] .kn-firework { opacity: 0.5; transform: scale(0.9); }
html[data-kn-animations="off"] .kn-streak { opacity: 0.3; transform: rotate(-18deg); }
html[data-kn-animations="off"] .kn-fog-p { opacity: 0.3; }
html[data-kn-animations="off"] .kn-web-spider { opacity: 0.9; }

html[data-kn-intensity="low"] .kn-theme { opacity: 0.62; }
html[data-kn-intensity="medium"] .kn-theme { opacity: 0.82; }
html[data-kn-intensity="high"] .kn-theme { opacity: 1; }

/* --------------------------------------------------------------------------
   2. Részecske alap (hópehely, sziron, levél, konfetti, fénypont)
   -------------------------------------------------------------------------- */

.kn-particles {
    position: absolute;
    inset: 0;
}

.kn-p {
    position: absolute;
    top: var(--kn-y, 40%);
    left: var(--kn-x, 50%);
    width: var(--kn-size, 12px);
    height: var(--kn-size, 12px);
    opacity: var(--kn-op, 0.8);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: blur(var(--kn-blur, 0));
    will-change: transform, opacity;
    backface-visibility: hidden;
}

html[data-kn-animations="on"] .kn-p.kn-fall { top: -12%; }
html[data-kn-animations="on"] .kn-p.kn-rise { top: auto; bottom: -8%; }
html[data-kn-animations="on"] .kn-p.kn-float { top: var(--kn-y, 40%); }

html[data-kn-animations="on"] .kn-p.kn-fall {
    animation: knFall var(--kn-dur, 20s) linear var(--kn-delay, 0s) infinite;
}

html[data-kn-animations="on"] .kn-p.kn-rise {
    animation: knRise var(--kn-dur, 20s) linear var(--kn-delay, 0s) infinite;
}

html[data-kn-animations="on"] .kn-p.kn-float {
    animation: knFloat var(--kn-dur, 12s) ease-in-out var(--kn-delay, 0s) infinite;
}

@keyframes knFall {
    0%   { transform: translate3d(0, -14vh, 0) rotate(0deg); opacity: 0; }
    7%   { opacity: var(--kn-op, 0.85); }
    85%  { opacity: var(--kn-op, 0.85); }
    100% { transform: translate3d(var(--kn-drift, 40px), 112vh, 0) rotate(var(--kn-spin, 90deg)); opacity: 0; }
}

@keyframes knRise {
    0%   { transform: translate3d(0, 6vh, 0) scale(0.4); opacity: 0; }
    18%  { opacity: var(--kn-op, 0.85); }
    80%  { opacity: calc(var(--kn-op, 0.85) * 0.7); }
    100% { transform: translate3d(var(--kn-drift, 24px), -104vh, 0) scale(1); opacity: 0; }
}

@keyframes knFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.82); opacity: calc(var(--kn-op, 0.8) * 0.35); }
    50%      { transform: translate3d(var(--kn-drift, 20px), -26px, 0) scale(1.12); opacity: var(--kn-op, 0.8); }
}

/* --------------------------------------------------------------------------
   3. Halloween
   -------------------------------------------------------------------------- */

html[data-kn-theme="halloween"] {
    --kn-accent: #ff9a4d;
    --kn-accent-2: #a855f7;
    --kn-accent-text: #ffcda3;
    --kn-glow: rgba(255, 138, 61, 0.20);
    --kn-glow-soft: rgba(150, 60, 200, 0.16);
    --kn-card-bg: linear-gradient(180deg, rgba(38, 14, 54, 0.78), rgba(14, 5, 22, 0.74));
    --kn-card-border: rgba(255, 154, 77, 0.24);
    --kn-btn-bg: linear-gradient(135deg, #7b2d95 0%, #ff8a3d 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(255, 138, 61, 0.26), rgba(168, 85, 247, 0.24));
    --kn-bg:
        radial-gradient(circle at 10% 6%, rgba(122, 45, 143, 0.42), transparent 44%),
        radial-gradient(circle at 90% 94%, rgba(255, 138, 61, 0.13), transparent 40%),
        radial-gradient(circle at 72% 22%, rgba(58, 16, 80, 0.55), transparent 46%),
        linear-gradient(160deg, #07030c 0%, #1b0726 42%, #2b0f3f 72%, #120419 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 55% at 24% 10%, rgba(150, 60, 190, 0.32), transparent 62%),
        radial-gradient(ellipse 55% 70% at 84% 86%, rgba(255, 138, 61, 0.10), transparent 60%),
        radial-gradient(ellipse 45% 45% at 52% 46%, rgba(90, 20, 120, 0.26), transparent 60%);
    --kn-orb: rgba(255, 138, 61, 0.13);
    --kn-web-color: rgba(226, 196, 255, 0.42);
    --kn-spider-body: #2a1740;
    --kn-spider-sheen: rgba(196, 150, 240, 0.4);
    --kn-spider-eye: #ff9a4d;
}

/* --- pókhálók --- */
.kn-webs { position: absolute; inset: 0; }

.kn-web {
    position: absolute;
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(200, 150, 255, 0.16));
}

.kn-web--tl { top: -8px; left: -8px; width: 270px; height: 270px; }
.kn-web--tr { top: -8px; right: -8px; width: 205px; height: 205px; transform: scaleX(-1); opacity: 0.42; }
.kn-web--bl { bottom: -8px; left: -8px; width: 175px; height: 175px; transform: scaleY(-1); opacity: 0.38; }
.kn-web--br { bottom: -8px; right: -8px; width: 150px; height: 150px; transform: scale(-1, -1); opacity: 0.3; }

.kn-web-svg { width: 100%; height: 100%; overflow: visible; display: block; }

.kn-web-spokes { fill: none; stroke: var(--kn-web-color); stroke-width: 1.1; stroke-linecap: round; }
.kn-web-rings { fill: none; stroke: rgba(226, 196, 255, 0.28); stroke-width: 0.9; stroke-linecap: round; }

html[data-kn-animations="on"] .kn-web-strands {
    animation: knWebBreath 11s ease-in-out infinite;
    transform-origin: 0 0;
}

@keyframes knWebBreath {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

.kn-web-spider {
    position: absolute;
    top: 34px;
    left: 92px;
    width: 26px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

html[data-kn-animations="on"] .kn-web-spider {
    animation: knWebCrawl 30s ease-in-out infinite;
}

@keyframes knWebCrawl {
    0%, 100% { transform: translate(0, 0) rotate(10deg); }
    22%      { transform: translate(40px, 26px) rotate(-16deg); }
    48%      { transform: translate(78px, 62px) rotate(22deg); }
    70%      { transform: translate(30px, 80px) rotate(-8deg); }
    88%      { transform: translate(-6px, 34px) rotate(14deg); }
}

/* --- pókok --- */
.kn-spiders { position: absolute; inset: 0; }

.kn-spider {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-100%);
    transform-origin: top center;
}

.kn-spider--1 { left: 7%; --kn-thread: 148px; --kn-spider-size: 58px; }
.kn-spider--2 { left: 84%; --kn-thread: 104px; --kn-spider-size: 46px; }
.kn-spider--3 { left: 46%; --kn-thread: 66px; --kn-spider-size: 32px; opacity: 0.8; }

.kn-thread {
    display: block;
    width: 1px;
    height: var(--kn-thread, 110px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(226, 196, 255, 0.45));
}

.kn-spider-svg {
    width: var(--kn-spider-size, 38px);
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 10px rgba(160, 90, 220, 0.35)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

.kn-spider-abdomen { fill: var(--kn-spider-body, #1c0f2b); stroke: rgba(212, 176, 255, 0.3); stroke-width: 1; }
.kn-spider-sheen { fill: var(--kn-spider-sheen, rgba(190, 140, 235, 0.35)); }
.kn-spider-thorax { fill: var(--kn-spider-body, #1c0f2b); filter: brightness(1.25); stroke: rgba(212, 176, 255, 0.26); stroke-width: 0.9; }
.kn-spider-head { fill: var(--kn-spider-body, #1c0f2b); filter: brightness(1.4); stroke: rgba(212, 176, 255, 0.24); stroke-width: 0.8; }
.kn-spider-eye { fill: var(--kn-spider-eye, #ff9a4d); }
.kn-spider-mark { fill: var(--kn-spider-eye, #ff9a4d); opacity: 0.5; }

.kn-spider-leg {
    fill: none;
    stroke: var(--kn-spider-body, #1c0f2b);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: 50% 8%;
}

html[data-kn-animations="on"] .kn-spider--1 { animation: knSpiderDrop 26s ease-in-out infinite; }
html[data-kn-animations="on"] .kn-spider--2 { animation: knSpiderDrop 34s ease-in-out -11s infinite; }
html[data-kn-animations="on"] .kn-spider--3 { animation: knSpiderDrop 41s ease-in-out -23s infinite; }

html[data-kn-animations="on"] .kn-spider-svg {
    animation: knSpiderSway 7s ease-in-out infinite;
    transform-origin: 50% 0;
}

html[data-kn-animations="on"] .kn-spider-leg {
    animation: knLegTwitch 4.6s ease-in-out var(--kn-leg-delay, 0s) infinite;
}

@keyframes knSpiderDrop {
    0%        { transform: translateY(-100%); }
    32%, 46%  { transform: translateY(0); }
    56%       { transform: translateY(-14%); }
    64%, 74%  { transform: translateY(2%); }
    100%      { transform: translateY(-100%); }
}

@keyframes knSpiderSway {
    0%, 100% { transform: rotate(-2.2deg); }
    50%      { transform: rotate(2.2deg); }
}

@keyframes knLegTwitch {
    0%, 100% { transform: rotate(0deg); }
    40%      { transform: rotate(-4.5deg); }
    70%      { transform: rotate(3.5deg); }
}

/* --- denevérek --- */
.kn-bats { position: absolute; inset: 0; }

.kn-bat {
    position: absolute;
    width: 66px;
    height: 32px;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.kn-bat--1 { top: 9%; }
.kn-bat--2 { top: 17%; width: 48px; height: 24px; }
.kn-bat--3 { top: 5%; width: 38px; height: 19px; opacity: 0; }

.kn-bat-svg { width: 100%; height: 100%; overflow: visible; }
.kn-bat-wing { fill: #12061d; }
.kn-bat-body { fill: #1d0c2c; }
.kn-bat-eye { fill: #ff9a4d; }
.kn-bat-wing { transform-box: fill-box; }
.kn-bat-wing--left { transform-origin: 100% 100%; }
.kn-bat-wing--right { transform-origin: 0% 100%; }

html[data-kn-animations="on"] .kn-bat--1 { animation: knBatFly 34s linear -4s infinite; }
html[data-kn-animations="on"] .kn-bat--2 { animation: knBatFly 46s linear -22s infinite; }
html[data-kn-animations="on"] .kn-bat--3 { animation: knBatFly 58s linear -39s infinite; }

html[data-kn-animations="on"] .kn-bat-wing {
    animation: knBatFlap 0.55s ease-in-out infinite alternate;
}

html[data-kn-animations="on"] .kn-bat--2 .kn-bat-wing { animation-duration: 0.42s; }
html[data-kn-animations="on"] .kn-bat--3 .kn-bat-wing { animation-duration: 0.66s; }

@keyframes knBatFly {
    0%   { transform: translate3d(-16vw, 0, 0) scale(0.9); opacity: 0; }
    8%   { opacity: 0.85; }
    35%  { transform: translate3d(26vw, 26px, 0) scale(1); }
    65%  { transform: translate3d(62vw, -14px, 0) scale(0.94); }
    92%  { opacity: 0.8; }
    100% { transform: translate3d(114vw, 12px, 0) scale(0.9); opacity: 0; }
}

@keyframes knBatFlap {
    from { transform: rotate(-13deg) scaleY(1); }
    to   { transform: rotate(12deg) scaleY(0.72); }
}

/* --- köd --- */
.kn-fog { position: absolute; inset: 0; overflow: hidden; }

.kn-fog-p {
    position: absolute;
    width: 78vw;
    height: 50vh;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(168, 120, 210, 0.20), rgba(120, 70, 160, 0.07) 45%, transparent 72%);
    filter: blur(46px);
    opacity: 0;
    will-change: transform, opacity;
}

.kn-fog-p--1 { left: -18vw; bottom: 2vh; }
.kn-fog-p--2 { right: -20vw; bottom: 14vh; }
.kn-fog-p--3 { left: 22vw; top: 30vh; width: 60vw; height: 40vh; }

html[data-kn-animations="on"] .kn-fog-p--1 { animation: knFogDrift 30s ease-in-out infinite; }
html[data-kn-animations="on"] .kn-fog-p--2 { animation: knFogDrift 38s ease-in-out -14s infinite reverse; }
html[data-kn-animations="on"] .kn-fog-p--3 { animation: knFogDrift 46s ease-in-out -26s infinite; }

@keyframes knFogDrift {
    0%, 100% { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.12; }
    45%      { transform: translate3d(6%, -3%, 0) scale(1.1); opacity: 0.42; }
}

/* --- narancs parázs --- */
.kn-embers.kn-v1 { background-image: radial-gradient(circle, #ffb066 0%, #ff8a3d 45%, rgba(255, 138, 61, 0) 72%); }
.kn-embers.kn-v2 { background-image: radial-gradient(circle, #ffd7a8 0%, #ffae63 40%, rgba(255, 174, 99, 0) 74%); }
.kn-embers.kn-v3 { background-image: radial-gradient(circle, #c98cff 0%, #9b5bd6 40%, rgba(155, 91, 214, 0) 72%); }

/* --------------------------------------------------------------------------
   4. Tél
   -------------------------------------------------------------------------- */

html[data-kn-theme="winter"] {
    --kn-accent: #a8d8ef;
    --kn-accent-2: #6fa8c9;
    --kn-accent-text: #d8eef9;
    --kn-glow: rgba(140, 200, 235, 0.18);
    --kn-glow-soft: rgba(200, 225, 245, 0.14);
    --kn-card-bg: linear-gradient(180deg, rgba(16, 46, 70, 0.72), rgba(6, 20, 32, 0.76));
    --kn-card-border: rgba(180, 220, 244, 0.26);
    --kn-btn-bg: linear-gradient(135deg, #2a6f96 0%, #a8d8ef 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(168, 216, 239, 0.24), rgba(111, 168, 201, 0.22));
    --kn-bg:
        radial-gradient(circle at 14% 10%, rgba(95, 168, 211, 0.26), transparent 44%),
        radial-gradient(circle at 86% 90%, rgba(219, 233, 244, 0.14), transparent 44%),
        linear-gradient(160deg, #061220 0%, #0d2a42 48%, #12314d 74%, #071624 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 60% at 25% 10%, rgba(95, 168, 211, 0.26), transparent 62%),
        radial-gradient(ellipse 60% 70% at 80% 88%, rgba(219, 233, 244, 0.16), transparent 60%);
    --kn-orb: rgba(168, 216, 239, 0.14);
}

.kn-snow.kn-v1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M4 7l16 10M4 17L20 7'/%3E%3Cpath d='M12 6.4 9.5 4.5M12 6.4l2.5-1.9M12 17.6l-2.5 1.9M12 17.6l2.5 1.9'/%3E%3C/g%3E%3C/svg%3E");
}

.kn-snow.kn-v2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='12' cy='3' r='1.7'/%3E%3Ccircle cx='12' cy='21' r='1.7'/%3E%3Ccircle cx='4' cy='7.5' r='1.7'/%3E%3Ccircle cx='20' cy='16.5' r='1.7'/%3E%3Ccircle cx='4' cy='16.5' r='1.7'/%3E%3Ccircle cx='20' cy='7.5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.65'%3E%3Cpath d='M12 4.4v15.2M5.2 8l13.6 8M5.2 16L18.8 8'/%3E%3C/g%3E%3C/svg%3E");
}

.kn-snow.kn-v3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' opacity='0.92' d='M12 2 13.5 9.1 20.6 7.9 15.4 12 20.6 16.1 13.5 14.9 12 22 10.5 14.9 3.4 16.1 8.6 12 3.4 7.9 10.5 9.1Z'/%3E%3C/svg%3E");
}

.kn-snow.kn-v4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M4.7 6.5 19.3 17.5M19.3 6.5 4.7 17.5'/%3E%3Cpath d='M12 12 8 8M12 12l4-4M12 12l-4 4M12 12l4 4'/%3E%3C/g%3E%3C/svg%3E");
}

.kn-snow.kn-v5 {
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0) 72%);
}

.kn-snow.kn-v6 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.4' d='M12 3 20 7.5v9L12 21 4 16.5v-9Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.6' d='M12 12 4 7.5M12 12l8-4.5M12 12v9'/%3E%3C/svg%3E");
}

/* --- arany fényrészecskék --- */
.kn-gold.kn-v1 { background-image: radial-gradient(circle, #fff3cf 0%, #e8c88a 42%, rgba(232, 200, 138, 0) 74%); }
.kn-gold.kn-v2 { background-image: radial-gradient(circle, #fffaf0 0%, #d9b676 40%, rgba(217, 182, 118, 0) 72%); }
.kn-gold.kn-v3 { background-image: radial-gradient(circle, #ffffff 0%, #b9c9d8 40%, rgba(185, 201, 216, 0) 72%); }

/* --- fagyos üveghatás --- */
.kn-frost {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 32% 26% at 0% 0%, rgba(219, 238, 250, 0.22), transparent 70%),
        radial-gradient(ellipse 30% 24% at 100% 0%, rgba(219, 238, 250, 0.18), transparent 70%),
        radial-gradient(ellipse 34% 28% at 0% 100%, rgba(219, 238, 250, 0.16), transparent 70%),
        radial-gradient(ellipse 32% 26% at 100% 100%, rgba(219, 238, 250, 0.2), transparent 70%);
    box-shadow: inset 0 0 140px rgba(190, 225, 245, 0.14);
    filter: blur(2px);
}

html[data-kn-animations="on"] .kn-frost {
    animation: knFrostBreath 16s ease-in-out infinite;
}

@keyframes knFrostBreath {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. Ősz
   -------------------------------------------------------------------------- */

html[data-kn-theme="autumn"] {
    --kn-accent: #e0a05a;
    --kn-accent-2: #b4552c;
    --kn-accent-text: #f0c99a;
    --kn-glow: rgba(217, 139, 74, 0.2);
    --kn-glow-soft: rgba(180, 85, 44, 0.16);
    --kn-card-bg: linear-gradient(180deg, rgba(60, 30, 16, 0.74), rgba(24, 11, 6, 0.78));
    --kn-card-border: rgba(224, 160, 90, 0.26);
    --kn-btn-bg: linear-gradient(135deg, #8a4a1f 0%, #d98b4a 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(224, 160, 90, 0.24), rgba(180, 85, 44, 0.22));
    --kn-bg:
        radial-gradient(circle at 12% 8%, rgba(138, 74, 31, 0.4), transparent 44%),
        radial-gradient(circle at 88% 90%, rgba(217, 139, 74, 0.16), transparent 44%),
        linear-gradient(160deg, #170b05 0%, #2e170c 44%, #4a2411 74%, #1c0e07 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 58% at 22% 10%, rgba(180, 85, 44, 0.28), transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 88%, rgba(217, 139, 74, 0.16), transparent 60%),
        radial-gradient(ellipse 45% 45% at 55% 45%, rgba(120, 60, 24, 0.3), transparent 62%);
    --kn-orb: rgba(217, 139, 74, 0.14);
}

.kn-leaves.kn-v1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23d97b3a' d='M16 2C8 6 4 13 6 21c1 5 4 8 10 9 6-1 9-4 10-9 2-8-2-15-10-19z'/%3E%3Cpath stroke='%238f4a22' stroke-width='1.2' fill='none' d='M16 5v22M16 12l-5-4M16 12l5-4M16 19l-5-4M16 19l5-4'/%3E%3C/svg%3E");
}

.kn-leaves.kn-v2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23b4552c' d='M16 1 20 8l8-1-4 7 6 4-7 3 1 8-7-4-6 5 1-8-7-4 6-4-4-7 8 1z'/%3E%3Cpath stroke='%237a3418' stroke-width='1' fill='none' d='M16 6v21'/%3E%3C/svg%3E");
}

.kn-leaves.kn-v3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23e0a05a' d='M22 3C12 6 6 13 6 21c0 5 4 8 9 8 9 0 12-11 7-26z'/%3E%3Cpath stroke='%23a9743a' stroke-width='1.1' fill='none' d='M22 4C18 13 14 21 9 28'/%3E%3C/svg%3E");
}

.kn-leaves.kn-v4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23c98a3a' d='M16 4c6 0 11 5 11 11s-5 12-11 12S5 21 5 15 10 4 16 4z'/%3E%3Cpath stroke='%238a5a22' stroke-width='1' fill='none' d='M16 6v20M16 11l-4-3M16 11l4-3M16 17l-4-3M16 17l4-3'/%3E%3C/svg%3E");
}

.kn-leaves.kn-v5 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a8451f' d='M16 2c5 4 7 9 6 15 3 1 5 4 5 7-4 1-7 0-9-2-1 3-3 5-6 6-1-4 0-7 2-9-3 0-6-2-7-5 3-2 6-2 8-1C12 8 13 5 16 2z'/%3E%3C/svg%3E");
}

/* --- levélhalom --- */
.kn-leafpile {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 232px;
    height: 162px;
    opacity: 0.95;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.32));
}

.kn-leafpile-svg { width: 100%; height: 100%; overflow: visible; }
.kn-pile-ground { fill: rgba(20, 9, 4, 0.45); filter: blur(3px); }
.kn-pile-heap { fill: rgba(40, 17, 7, 0.5); filter: blur(4px); }
.kn-pile-blade {
    fill: #b4552c;
    stroke: rgba(40, 17, 8, 0.4);
    stroke-width: 1.1;
    stroke-linejoin: round;
}
.kn-pile-leaf.kn-leaf--1 .kn-pile-blade { fill: #d97b3a; }
.kn-pile-leaf.kn-leaf--2 .kn-pile-blade { fill: #c05a29; }
.kn-pile-leaf.kn-leaf--3 .kn-pile-blade { fill: #e0a05a; }
.kn-pile-vein { stroke: rgba(255, 226, 190, 0.3); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.kn-pile-leaf .kn-pile-stem {
    fill: none;
    stroke: rgba(58, 26, 12, 0.55);
    stroke-width: 2;
    stroke-linecap: round;
}

html[data-kn-animations="on"] .kn-leafpile {
    animation: knPileSway 15s ease-in-out infinite;
    transform-origin: 20% 100%;
}

@keyframes knPileSway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(1.1deg); }
}

/* A halom levelei külön-külön is "élnek": enyhe rezgés, illetve időnként
   egy-egy levél felkapja a szél. */
html[data-kn-animations="on"] .kn-pile-leaf {
    animation: knPileLeafFlutter 5.4s ease-in-out var(--kn-leaf-delay, 0s) infinite;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

html[data-kn-animations="on"] .kn-pile-leaf--gust {
    animation: knPileLeafGust 10s ease-in-out var(--kn-leaf-delay, 0s) infinite;
}

@keyframes knPileLeafFlutter {
    0%, 100% { transform: rotate(-3.4deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(-4px); }
}

@keyframes knPileLeafGust {
    0%, 54%, 100% { transform: rotate(0deg) translate(0, 0); }
    64%           { transform: rotate(16deg) translate(5px, -24px); }
    76%           { transform: rotate(-11deg) translate(-4px, -13px); }
    88%           { transform: rotate(7deg) translate(2px, -3px); }
}

/* --- meleg fényfoltok --- */
.kn-blobs { position: absolute; inset: 0; overflow: hidden; }

.kn-blob {
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 520px;
    max-height: 520px;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.5;
    will-change: transform;
}

.kn-blob--1 { left: -8vw; top: 6vh; background: radial-gradient(circle, rgba(224, 160, 90, 0.34), transparent 68%); }
.kn-blob--2 { right: -10vw; bottom: 4vh; background: radial-gradient(circle, rgba(180, 85, 44, 0.32), transparent 68%); }
.kn-blob--3 { left: 40vw; bottom: 18vh; width: 34vw; height: 34vw; background: radial-gradient(circle, rgba(255, 214, 160, 0.2), transparent 70%); }
.kn-blob--4 { right: 6vw; top: 10vh; background: radial-gradient(circle, rgba(201, 227, 192, 0.22), transparent 70%); }

html[data-kn-animations="on"] .kn-blob--1 { animation: knBlobDrift 22s ease-in-out infinite; }
html[data-kn-animations="on"] .kn-blob--2 { animation: knBlobDrift 28s ease-in-out -9s infinite reverse; }
html[data-kn-animations="on"] .kn-blob--3 { animation: knBlobDrift 34s ease-in-out -16s infinite; }
html[data-kn-animations="on"] .kn-blob--4 { animation: knBlobDrift 26s ease-in-out -5s infinite; }

@keyframes knBlobDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(4vw, -3vh, 0) scale(1.12); }
}

/* --------------------------------------------------------------------------
   6. Nyár
   -------------------------------------------------------------------------- */

html[data-kn-theme="summer"] {
    --kn-accent: #7fe3e0;
    --kn-accent-2: #ffb37a;
    --kn-accent-text: #c9f7f4;
    --kn-glow: rgba(127, 227, 224, 0.18);
    --kn-glow-soft: rgba(255, 179, 122, 0.16);
    --kn-card-bg: linear-gradient(180deg, rgba(9, 58, 66, 0.72), rgba(4, 28, 33, 0.76));
    --kn-card-border: rgba(127, 227, 224, 0.24);
    --kn-btn-bg: linear-gradient(135deg, #1a8a9b 0%, #7fe3e0 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(127, 227, 224, 0.24), rgba(255, 179, 122, 0.22));
    --kn-bg:
        radial-gradient(circle at 16% 10%, rgba(31, 168, 180, 0.34), transparent 46%),
        radial-gradient(circle at 84% 88%, rgba(255, 179, 71, 0.16), transparent 42%),
        linear-gradient(160deg, #052a30 0%, #0a4d5c 46%, #0d6675 74%, #06313a 100%);
    --kn-mesh:
        radial-gradient(ellipse 72% 60% at 20% 8%, rgba(31, 168, 180, 0.30), transparent 62%),
        radial-gradient(ellipse 60% 70% at 84% 90%, rgba(255, 179, 71, 0.16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 55% 50%, rgba(127, 227, 224, 0.12), transparent 62%);
    --kn-orb: rgba(127, 227, 224, 0.14);
}

.kn-waves { position: absolute; inset: auto 0 0 0; height: 34vh; overflow: hidden; }

.kn-wave {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    fill: rgba(31, 168, 180, 0.16);
    will-change: transform;
}

.kn-wave--2 { fill: rgba(127, 227, 224, 0.1); height: 78%; }

html[data-kn-animations="on"] .kn-wave--1 { animation: knWaveMove 26s ease-in-out infinite; }
html[data-kn-animations="on"] .kn-wave--2 { animation: knWaveMove 19s ease-in-out -7s infinite reverse; }

@keyframes knWaveMove {
    0%, 100% { transform: translate3d(-3%, 0, 0) scaleY(1); }
    50%      { transform: translate3d(3%, -2%, 0) scaleY(1.08); }
}

.kn-sunrays {
    position: absolute;
    inset: -20% -10% auto auto;
    width: 90vw;
    height: 90vw;
    max-width: 900px;
    max-height: 900px;
    opacity: 0.5;
    mix-blend-mode: screen;
    background: conic-gradient(
        from 200deg at 70% 20%,
        rgba(255, 214, 160, 0.14) 0deg,
        transparent 9deg,
        rgba(255, 214, 160, 0.1) 16deg,
        transparent 26deg,
        rgba(255, 214, 160, 0.12) 34deg,
        transparent 46deg
    );
    filter: blur(6px);
}

html[data-kn-animations="on"] .kn-sunrays {
    animation: knRaysTurn 90s linear infinite;
}

@keyframes knRaysTurn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.kn-fronds { position: absolute; inset: 0; }

.kn-frond {
    position: absolute;
    bottom: -20px;
    width: 190px;
    height: 300px;
    opacity: 0.35;
    transform-origin: 50% 100%;
}

.kn-frond--1 { left: -30px; }
.kn-frond--2 { right: -20px; transform: scaleX(-1); opacity: 0.28; }

.kn-frond-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transform-origin: 50% 100%;
}

.kn-frond-stem { fill: none; stroke: rgba(127, 227, 224, 0.55); stroke-width: 2; }
.kn-frond-leaf { fill: rgba(31, 168, 180, 0.45); }

html[data-kn-animations="on"] .kn-frond--1 .kn-frond-svg { animation: knFrondSway 15s ease-in-out infinite; }
html[data-kn-animations="on"] .kn-frond--2 .kn-frond-svg { animation: knFrondSway 18s ease-in-out -6s infinite; }

@keyframes knFrondSway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2.5deg); }
}

/* --------------------------------------------------------------------------
   7. Tavasz / Húsvét / Anyák napja
   -------------------------------------------------------------------------- */

html[data-kn-theme="spring"] {
    --kn-accent: #f7c9dc;
    --kn-accent-2: #cfe8c7;
    --kn-accent-text: #ffe1ec;
    --kn-glow: rgba(233, 167, 196, 0.2);
    --kn-glow-soft: rgba(201, 227, 192, 0.16);
    --kn-card-bg: linear-gradient(180deg, rgba(64, 30, 52, 0.72), rgba(26, 12, 22, 0.76));
    --kn-card-border: rgba(247, 201, 220, 0.26);
    --kn-btn-bg: linear-gradient(135deg, #9c4f74 0%, #f4b8cf 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(247, 201, 220, 0.26), rgba(201, 227, 192, 0.2));
    --kn-bg:
        radial-gradient(circle at 14% 8%, rgba(233, 167, 196, 0.26), transparent 46%),
        radial-gradient(circle at 86% 88%, rgba(201, 227, 192, 0.16), transparent 44%),
        linear-gradient(160deg, #1d0f1a 0%, #3d1f33 46%, #54304a 74%, #1f101c 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 58% at 22% 10%, rgba(233, 167, 196, 0.24), transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 88%, rgba(201, 227, 192, 0.18), transparent 60%);
    --kn-orb: rgba(247, 201, 220, 0.16);
}

html[data-kn-theme="easter"] {
    --kn-accent: #b7e4c7;
    --kn-accent-2: #f9e2a6;
    --kn-accent-text: #dcf6e5;
    --kn-glow: rgba(183, 228, 199, 0.18);
    --kn-glow-soft: rgba(249, 226, 166, 0.16);
    --kn-card-bg: linear-gradient(180deg, rgba(30, 58, 47, 0.72), rgba(10, 24, 20, 0.76));
    --kn-card-border: rgba(183, 228, 199, 0.26);
    --kn-btn-bg: linear-gradient(135deg, #3f7d5f 0%, #b7e4c7 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(183, 228, 199, 0.24), rgba(249, 226, 166, 0.22));
    --kn-bg:
        radial-gradient(circle at 16% 10%, rgba(122, 186, 150, 0.26), transparent 46%),
        radial-gradient(circle at 84% 88%, rgba(249, 226, 166, 0.16), transparent 44%),
        linear-gradient(160deg, #0c1c16 0%, #1e3a2d 48%, #2c5040 74%, #0e211a 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 58% at 22% 10%, rgba(122, 186, 150, 0.24), transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 88%, rgba(249, 226, 166, 0.16), transparent 60%);
    --kn-orb: rgba(183, 228, 199, 0.15);
}

.kn-petals.kn-v1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f7c9dc' d='M12 2c5 4 7 8 7 12 0 4-3 8-7 8s-7-4-7-8c0-4 2-8 7-12z'/%3E%3C/svg%3E");
}

.kn-petals.kn-v2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff1e6' d='M12 3c4 3 8 6 8 10 0 3-3 6-8 8-5-2-8-5-8-8 0-4 4-7 8-10z'/%3E%3C/svg%3E");
}

.kn-petals.kn-v3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9c7f0' d='M12 2c3 5 7 7 7 11 0 4-3 7-7 9-4-2-7-5-7-9 0-4 4-6 7-11z'/%3E%3C/svg%3E");
}

.kn-petals.kn-v4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd9c4' d='M12 2c6 4 8 8 8 12 0 3-2 6-8 8-6-2-8-5-8-8 0-4 2-8 8-12z'/%3E%3Cpath fill='%23ffb59a' opacity='0.55' d='M12 8c2 2 3 4 3 6s-1 4-3 5c-2-1-3-3-3-5s1-4 3-6z'/%3E%3C/svg%3E");
}

.kn-petals.kn-v5 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffe4ef' d='M12 2c4 5 6 8 6 11 0 4-2 7-6 9-4-2-6-5-6-9 0-3 2-6 6-11z'/%3E%3Cpath d='M12 6v14' stroke='%23f0a8c4' stroke-width='0.9' fill='none'/%3E%3C/svg%3E");
}

/* --- virágzó ágak --- */
.kn-branches { position: absolute; inset: 0; }

.kn-branch {
    position: absolute;
    width: 320px;
    height: 170px;
    opacity: 0.9;
}

.kn-branch--tl { top: -6px; left: -12px; }
.kn-branch--br { bottom: -6px; right: -12px; transform: scale(-1, -1); }

.kn-branch-svg { width: 100%; height: 100%; overflow: visible; }
.kn-branch-wood { fill: none; stroke: rgba(176, 132, 124, 0.9); stroke-width: 3.4; stroke-linecap: round; }
.kn-branch-wood--thin { stroke-width: 2; opacity: 0.85; }

.kn-blossom ellipse { fill: #f7c9dc; }
.kn-blossom--2 ellipse { fill: #ffe4ef; }
.kn-blossom--3 ellipse { fill: #e7d8f7; }
.kn-blossom--4 ellipse { fill: #ffd9c4; }
.kn-blossom-core { fill: #f6e3a8; }
.kn-blossom { filter: drop-shadow(0 0 5px rgba(255, 210, 235, 0.35)); }

html[data-kn-animations="on"] .kn-branch-svg {
    animation: knBranchBreathe 16s ease-in-out infinite;
    transform-origin: 0 0;
}

html[data-kn-animations="on"] .kn-branch--br .kn-branch-svg { animation-delay: -8s; }

@keyframes knBranchBreathe {
    0%, 100% { transform: rotate(-0.8deg) translateY(0); }
    50%      { transform: rotate(0.9deg) translateY(3px); }
}

html[data-kn-animations="on"] .kn-blossom-petals {
    animation: knBlossomSway 9s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

html[data-kn-animations="on"] .kn-blossom--2 .kn-blossom-petals { animation-delay: -3s; }
html[data-kn-animations="on"] .kn-blossom--3 .kn-blossom-petals { animation-delay: -6s; }
html[data-kn-animations="on"] .kn-blossom--4 .kn-blossom-petals { animation-delay: -1.5s; }

@keyframes knBlossomSway {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    50%      { transform: rotate(3deg) scale(1.05); }
}

.kn-blobs--pastel .kn-blob--1 { background: radial-gradient(circle, rgba(247, 201, 220, 0.32), transparent 68%); }
.kn-blobs--pastel .kn-blob--3 { background: radial-gradient(circle, rgba(217, 199, 240, 0.26), transparent 70%); }
.kn-blobs--pastel .kn-blob--4 { background: radial-gradient(circle, rgba(201, 227, 192, 0.24), transparent 70%); }

/* --------------------------------------------------------------------------
   8. Újév / Prémium
   -------------------------------------------------------------------------- */

html[data-kn-theme="newyear"] {
    --kn-accent: #e8c98f;
    --kn-accent-2: #9d8bff;
    --kn-accent-text: #f4e3bd;
    --kn-glow: rgba(232, 201, 143, 0.2);
    --kn-glow-soft: rgba(157, 139, 255, 0.18);
    --kn-card-bg: linear-gradient(180deg, rgba(18, 24, 52, 0.76), rgba(5, 6, 15, 0.8));
    --kn-card-border: rgba(232, 201, 143, 0.3);
    --kn-btn-bg: linear-gradient(135deg, #2b3568 0%, #e8c98f 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(232, 201, 143, 0.24), rgba(157, 139, 255, 0.22));
    --kn-bg:
        radial-gradient(circle at 16% 8%, rgba(157, 139, 255, 0.18), transparent 46%),
        radial-gradient(circle at 84% 90%, rgba(232, 201, 143, 0.13), transparent 44%),
        linear-gradient(160deg, #04050d 0%, #0b1026 46%, #141a3b 74%, #05060f 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 58% at 22% 10%, rgba(157, 139, 255, 0.18), transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 88%, rgba(232, 201, 143, 0.14), transparent 60%);
    --kn-orb: rgba(232, 201, 143, 0.16);
}

/* --- tűzijáték --- */
.kn-fireworks { position: absolute; inset: 0; }

.kn-firework {
    position: absolute;
    width: 150px;
    height: 150px;
    opacity: 0;
}

.kn-firework--1 { top: 6%; left: 68%; }
.kn-firework--2 { top: 3%; left: 20%; width: 110px; height: 110px; }
.kn-firework--3 { top: 18%; left: 84%; width: 130px; height: 130px; }

.kn-firework-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.kn-firework-svg line {
    stroke: var(--kn-accent, #e8c98f);
    stroke-width: 1.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(232, 201, 143, 0.7));
}

.kn-firework-burst--2 line { stroke: #b9c9e8; }
.kn-firework-burst--3 line { stroke: #d6b7ff; }

.kn-firework-core { fill: rgba(255, 250, 235, 0.9); }

html[data-kn-animations="on"] .kn-firework--1 { animation: knFirework 14s ease-out -2s infinite; }
html[data-kn-animations="on"] .kn-firework--2 { animation: knFirework 19s ease-out -9s infinite; }
html[data-kn-animations="on"] .kn-firework--3 { animation: knFirework 23s ease-out -16s infinite; }

@keyframes knFirework {
    0%      { transform: scale(0.2); opacity: 0; }
    4%      { opacity: 0.9; }
    22%     { transform: scale(1); opacity: 0.55; }
    42%     { transform: scale(1.12); opacity: 0.12; }
    55%, 100% { transform: scale(1.15); opacity: 0; }
}

/* --- csillagformák --- */
.kn-stars { position: absolute; inset: 0; }

.kn-star {
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff6d8' d='M12 0c1.4 7.6 4.4 10.6 12 12-7.6 1.4-10.6 4.4-12 12C10.6 16.4 7.6 13.4 0 12 7.6 10.6 10.6 7.6 12 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    filter: drop-shadow(0 0 6px rgba(255, 240, 200, 0.6));
}

.kn-star--1 { top: 12%; left: 12%; width: 20px; height: 20px; }
.kn-star--2 { top: 26%; left: 90%; width: 14px; height: 14px; }
.kn-star--3 { top: 74%; left: 8%; width: 12px; height: 12px; }
.kn-star--4 { top: 62%; left: 93%; width: 18px; height: 18px; }

html[data-kn-animations="on"] .kn-star { animation: knStarTwinkle 9s ease-in-out infinite; }
html[data-kn-animations="on"] .kn-star--2 { animation-delay: -2.4s; animation-duration: 7s; }
html[data-kn-animations="on"] .kn-star--3 { animation-delay: -4.8s; animation-duration: 11s; }
html[data-kn-animations="on"] .kn-star--4 { animation-delay: -1.2s; animation-duration: 8s; }

@keyframes knStarTwinkle {
    0%, 100% { transform: rotate(0deg) scale(0.65); opacity: 0.2; }
    50%      { transform: rotate(18deg) scale(1.1); opacity: 0.95; }
}

/* --- elegáns fénycsíkok --- */
.kn-streaks { position: absolute; inset: 0; overflow: hidden; }

.kn-streak {
    position: absolute;
    width: 42vw;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 201, 143, 0.55), transparent);
    filter: blur(0.4px);
    opacity: 0;
    transform: rotate(-18deg);
}

.kn-streak--1 { top: 18%; left: -12vw; }
.kn-streak--2 { top: 52%; left: 30vw; width: 34vw; }
.kn-streak--3 { top: 78%; left: -4vw; width: 28vw; }

html[data-kn-animations="on"] .kn-streak--1 { animation: knStreak 17s ease-in-out -3s infinite; }
html[data-kn-animations="on"] .kn-streak--2 { animation: knStreak 23s ease-in-out -11s infinite; }
html[data-kn-animations="on"] .kn-streak--3 { animation: knStreak 29s ease-in-out -19s infinite; }

@keyframes knStreak {
    0%   { transform: translate3d(0, 0, 0) rotate(-18deg) scaleX(0.4); opacity: 0; }
    20%  { opacity: 0.75; }
    60%  { opacity: 0.35; }
    100% { transform: translate3d(46vw, -8vh, 0) rotate(-18deg) scaleX(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   9. Valentin / Romantikus / Szent Patrik / Születésnap
   -------------------------------------------------------------------------- */

html[data-kn-theme="valentine"] {
    --kn-accent: #ff8fb1;
    --kn-accent-2: #d81b60;
    --kn-accent-text: #ffc2d4;
    --kn-glow: rgba(255, 143, 177, 0.2);
    --kn-glow-soft: rgba(216, 27, 96, 0.18);
    --kn-card-bg: linear-gradient(180deg, rgba(66, 12, 36, 0.74), rgba(22, 5, 13, 0.78));
    --kn-card-border: rgba(255, 143, 177, 0.28);
    --kn-btn-bg: linear-gradient(135deg, #8c1338 0%, #ff9dbd 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(255, 143, 177, 0.26), rgba(216, 27, 96, 0.22));
    --kn-bg:
        radial-gradient(circle at 14% 8%, rgba(194, 24, 91, 0.32), transparent 46%),
        radial-gradient(circle at 86% 90%, rgba(255, 176, 200, 0.14), transparent 44%),
        linear-gradient(160deg, #17040c 0%, #3d0a1e 46%, #4a0d24 74%, #1b0510 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 58% at 22% 10%, rgba(194, 24, 91, 0.28), transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 88%, rgba(255, 176, 200, 0.14), transparent 60%);
    --kn-orb: rgba(255, 143, 177, 0.16);
}

html[data-kn-theme="birthday"] {
    --kn-accent: #ff9ec4;
    --kn-accent-2: #ffd166;
    --kn-accent-text: #ffd0e3;
    --kn-glow: rgba(255, 158, 196, 0.2);
    --kn-glow-soft: rgba(255, 209, 102, 0.16);
    --kn-card-bg: linear-gradient(180deg, rgba(52, 26, 82, 0.76), rgba(18, 9, 30, 0.78));
    --kn-card-border: rgba(255, 158, 196, 0.26);
    --kn-btn-bg: linear-gradient(135deg, #7c3fbf 0%, #ffb0cd 100%);
    --kn-selected-bg: linear-gradient(135deg, rgba(255, 158, 196, 0.26), rgba(255, 209, 102, 0.22));
    --kn-bg:
        radial-gradient(circle at 14% 8%, rgba(124, 63, 191, 0.3), transparent 46%),
        radial-gradient(circle at 86% 90%, rgba(255, 209, 102, 0.14), transparent 44%),
        linear-gradient(160deg, #160c24 0%, #2c1646 46%, #3b1e5c 74%, #170d25 100%);
    --kn-mesh:
        radial-gradient(ellipse 70% 58% at 22% 10%, rgba(124, 63, 191, 0.26), transparent 62%),
        radial-gradient(ellipse 60% 70% at 82% 88%, rgba(255, 209, 102, 0.14), transparent 60%);
    --kn-orb: rgba(255, 158, 196, 0.16);
}

.kn-sparkles.kn-v1 { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 68%); border-radius: 50%; }
.kn-sparkles.kn-v2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff6d8' d='M12 0c1.4 7.6 4.4 10.6 12 12-7.6 1.4-10.6 4.4-12 12C10.6 16.4 7.6 13.4 0 12 7.6 10.6 10.6 7.6 12 0z'/%3E%3C/svg%3E");
}
.kn-sparkles.kn-v3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffe9f3' d='M12 2c1 5 3 7 8 8-5 1-7 3-8 8-1-5-3-7-8-8 5-1 7-3 8-8z' opacity='0.9'/%3E%3C/svg%3E");
}

.kn-confetti.kn-v1 { background: #ff9ec4; border-radius: 2px; }
.kn-confetti.kn-v2 { background: #ffd166; border-radius: 1px; }
.kn-confetti.kn-v3 { background: #7fe3e0; border-radius: 2px; }
.kn-confetti.kn-v4 { background: #b79bff; border-radius: 50%; }
.kn-confetti.kn-v5 { background: #fff1e6; border-radius: 1px; }
.kn-confetti.kn-v6 { background: #ff8a3d; border-radius: 50%; }

/* --------------------------------------------------------------------------
   10. Téma hookok a meglévő felületen (kártya, gombok, kiválasztás)
   -------------------------------------------------------------------------- */

html:not([data-kn-theme="default"]) body {
    background: var(--kn-bg);
}

html:not([data-kn-theme="default"]) body::before {
    background: var(--kn-mesh);
    animation: knMeshDrift 26s ease-in-out infinite alternate;
}

html:not([data-kn-theme="default"]) body::after {
    background: radial-gradient(circle, var(--kn-orb), transparent 70%);
    animation-duration: 13s;
}

@keyframes knMeshDrift {
    0%   { transform: scale(1) rotate(0deg); opacity: 0.85; }
    100% { transform: scale(1.1) rotate(2deg); opacity: 1; }
}

html:not([data-kn-theme="default"]) .card {
    background:
        var(--kn-card-bg),
        rgba(255, 255, 255, 0.04);
    border-color: var(--kn-card-border);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 32px 80px rgba(0, 0, 0, 0.46),
        0 14px 40px rgba(0, 0, 0, 0.2);
}

html[data-kn-glow="on"]:not([data-kn-theme="default"]) .card {
    animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both, knCardGlow 11s ease-in-out 1s infinite;
}

@keyframes knCardGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.05) inset,
            0 32px 80px rgba(0, 0, 0, 0.46),
            0 0 46px var(--kn-glow),
            0 0 0 rgba(0, 0, 0, 0);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.09) inset,
            0 32px 80px rgba(0, 0, 0, 0.5),
            0 0 78px var(--kn-glow),
            0 0 120px var(--kn-glow-soft);
    }
}

html:not([data-kn-theme="default"]) .logo-wrap img {
    border-color: var(--kn-card-border);
    box-shadow: 0 0 28px var(--kn-glow), 0 0 56px var(--kn-glow-soft);
}

html:not([data-kn-theme="default"]) .section-label,
html:not([data-kn-theme="default"]) h2 {
    color: #fff;
}

html:not([data-kn-theme="default"]) .btn {
    background: var(--kn-btn-bg);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 26px var(--kn-glow);
}

html:not([data-kn-theme="default"]) .btn:hover:not(:disabled) {
    box-shadow: 0 14px 34px var(--kn-glow), 0 0 26px var(--kn-glow-soft);
    border-color: rgba(255, 255, 255, 0.5);
}

html:not([data-kn-theme="default"]) .select-card.selected,
html:not([data-kn-theme="default"]) .slot.selected {
    background: var(--kn-selected-bg);
    border-color: var(--kn-accent);
    box-shadow: 0 0 20px var(--kn-glow);
}

html:not([data-kn-theme="default"]) .select-card:hover {
    border-color: var(--kn-accent);
    box-shadow: 0 14px 28px var(--kn-glow);
}

html:not([data-kn-theme="default"]) .field input:focus,
html:not([data-kn-theme="default"]) #datePicker:focus {
    border-color: var(--kn-accent);
    box-shadow: 0 0 0 4px var(--kn-glow);
}

html:not([data-kn-theme="default"]) .flatpickr-day.selected,
html:not([data-kn-theme="default"]) .flatpickr-day.startRange,
html:not([data-kn-theme="default"]) .flatpickr-day.endRange {
    background: var(--kn-btn-bg);
    box-shadow: 0 8px 18px var(--kn-glow);
}

html:not([data-kn-theme="default"]) .flatpickr-day:hover,
html:not([data-kn-theme="default"]) .flatpickr-day:focus {
    background: var(--kn-glow);
    border-color: var(--kn-accent);
}

html:not([data-kn-theme="default"]) .site-footer a {
    color: var(--kn-accent-text);
}

/* --------------------------------------------------------------------------
   11. Reszponzív viselkedés
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .kn-web--tl { width: 195px; height: 195px; }
    .kn-web--tr { width: 150px; height: 150px; }
    .kn-web--bl { width: 120px; height: 120px; }
    .kn-web--br { width: 100px; height: 100px; opacity: 0.22; }
    .kn-web-spider { top: 22px; left: 62px; width: 20px; height: 22px; }

    .kn-branch { width: 240px; height: 130px; }
    .kn-leafpile { width: 168px; height: 118px; }
    .kn-frond { width: 140px; height: 220px; }
}

@media (max-width: 768px) {
    .kn-spider--1 { left: 2%; --kn-thread: 78px; --kn-spider-size: 32px; }
    .kn-spider--2 { left: 88%; --kn-thread: 56px; --kn-spider-size: 26px; }
    .kn-spider--3 { display: none; }

    .kn-web--tl { width: 150px; height: 150px; opacity: 0.4; }
    .kn-web--tr { width: 110px; height: 110px; opacity: 0.28; }
    .kn-web--bl,
    .kn-web--br { display: none; }
    .kn-web-spider { display: none; }

    .kn-branch { width: 180px; height: 100px; opacity: 0.72; }
    .kn-leafpile { width: 132px; height: 92px; opacity: 0.78; }
    .kn-frond { width: 110px; height: 175px; opacity: 0.25; }
    .kn-firework--2 { display: none; }
    .kn-bats .kn-bat--3 { display: none; }
    .kn-particles { opacity: 0.85; }
}

@media (max-width: 480px) {
    .kn-web--tl { width: 118px; height: 118px; opacity: 0.32; }
    .kn-web--tr { display: none; }
    .kn-branch--br { display: none; }
    .kn-blob { filter: blur(38px); opacity: 0.4; }
    .kn-sunrays { opacity: 0.35; }
    .kn-fog-p { filter: blur(38px); }
}

/* Mobilon kikapcsolt animációk: a dekoráció statikus marad */
@media (max-width: 768px) {
    html[data-kn-mobile="off"] .kn-theme *,
    html[data-kn-mobile="off"] .kn-theme *::before,
    html[data-kn-mobile="off"] .kn-theme *::after {
        animation: none !important;
    }

    html[data-kn-mobile="off"] .kn-spider { transform: translateY(0); }
    html[data-kn-mobile="off"] .kn-bat { opacity: 0.55; transform: translate3d(20vw, 0, 0); }
    html[data-kn-mobile="off"] .kn-firework { opacity: 0.5; transform: scale(0.85); }
    html[data-kn-mobile="off"] .kn-p.kn-fall { top: var(--kn-y, 40%); }
    html[data-kn-mobile="off"] .kn-p.kn-rise { top: auto; bottom: auto; top: var(--kn-y, 40%); }
}

/* --------------------------------------------------------------------------
   12. Admin előnézet jelző (csak bejelentkezett adminnak jelenik meg)
   -------------------------------------------------------------------------- */

.kn-preview-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(10, 4, 18, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    max-width: calc(100vw - 24px);
    text-align: center;
}

@media (max-width: 480px) {
    .kn-preview-banner { top: 6px; font-size: 0.72rem; padding: 6px 12px; }
}

/* --------------------------------------------------------------------------
   13. Akadálymentesség
   --------------------------------------------------------------------------
   A prefers-reduced-motion kérést a rendszer tiszteletben tartja: a dekorációk
   statikussá válnak. Ez alól kizárólag az admin előnézet kivétele a kivétel
   (data-kn-force-motion="on"), amelyet a szerver csak bejelentkezett adminnak
   állít be, hogy az animációk működését ellenőrizni tudja.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html:not([data-kn-force-motion="on"]) .kn-theme,
    html:not([data-kn-force-motion="on"]) .kn-theme *,
    html:not([data-kn-force-motion="on"]) .kn-theme *::before,
    html:not([data-kn-force-motion="on"]) .kn-theme *::after {
        animation: none !important;
        transition: none !important;
    }

    html:not([data-kn-force-motion="on"])[data-kn-animations="on"] .kn-theme .kn-p.kn-fall,
    html:not([data-kn-force-motion="on"])[data-kn-animations="on"] .kn-theme .kn-p.kn-rise {
        top: var(--kn-y, 40%);
        bottom: auto;
    }

    html:not([data-kn-force-motion="on"]) .kn-theme .kn-spider { transform: none; }
    html:not([data-kn-force-motion="on"]) .kn-theme .kn-bat { opacity: 0.5; transform: translate3d(18vw, 0, 0); }
    html:not([data-kn-force-motion="on"]) .kn-theme .kn-firework { opacity: 0.45; transform: scale(0.8); }

    html:not([data-kn-force-motion="on"])[data-kn-glow="on"]:not([data-kn-theme="default"]) .card {
        animation: none;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.05) inset,
            0 32px 80px rgba(0, 0, 0, 0.46),
            0 0 46px var(--kn-glow);
    }

    html:not([data-kn-force-motion="on"]):not([data-kn-theme="default"]) body::before,
    html:not([data-kn-force-motion="on"]):not([data-kn-theme="default"]) body::after {
        animation: none;
    }
}