.webtom-nevnap-widget,
.webtom-nevnap-widget * {
    box-sizing: border-box;
}

.webtom-nevnap-widget {
    --wtn-max-width: 980px;
    --wtn-height: 56px;
    --wtn-mobile-height: 68px;
    --wtn-radius: 26px;
    --wtn-px: 20px;
    --wtn-gap: 16px;
    --wtn-title-size: 16px;
    --wtn-name-size: 24px;
    --wtn-greeting-size: 13px;
    --wtn-weight: 800;
    --wtn-bg-1: #1a082a;
    --wtn-bg-2: #6d16ad;
    --wtn-border: #a13cff;
    --wtn-glow: #b43cff;
    --wtn-title-color: #ffffff;
    --wtn-greeting-color: #f4dcff;
    --wtn-note-color: #d8b5ff;
    --wtn-name-1: #35e6ff;
    --wtn-name-2: #ff49c6;
    --wtn-name-3: #ffd36b;
    --wtn-icon-color: #ffffff;
    width: min(100%, var(--wtn-max-width));
    min-height: var(--wtn-height);
    margin: 10px auto;
    padding: 7px var(--wtn-px);
    border-radius: var(--wtn-radius);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    isolation: isolate;
    color: var(--wtn-title-color);
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.20), transparent 26%),
        radial-gradient(circle at 88% 90%, rgba(255,255,255,.11), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--wtn-bg-2) 36%, transparent), transparent 42%),
        linear-gradient(145deg, var(--wtn-bg-1), color-mix(in srgb, var(--wtn-bg-2) 72%, #000 28%));
    border: 1px solid color-mix(in srgb, var(--wtn-border) 82%, #fff 18%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 18px 46px rgba(0,0,0,.42),
        0 0 26px color-mix(in srgb, var(--wtn-glow) 58%, transparent),
        0 0 72px color-mix(in srgb, var(--wtn-glow) 24%, transparent);
    transform: translateZ(0);
    font-family: inherit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.webtom-nevnap-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.035) 39px 40px);
    opacity: .55;
    pointer-events: none;
}

.webtom-nevnap-widget::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: calc(var(--wtn-radius) - 2px);
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}

.wtn-mainline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wtn-gap);
    min-width: 0;
    line-height: 1.05;
    white-space: nowrap;
}

.wtn-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--wtn-icon-color);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 0 18px color-mix(in srgb, var(--wtn-glow) 45%, transparent), inset 0 0 20px rgba(255,255,255,.06);
}

.wtn-icon svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
    filter: drop-shadow(0 0 8px currentColor);
}

.wtn-title {
    font-size: var(--wtn-title-size);
    font-weight: 780;
    letter-spacing: .02em;
    color: var(--wtn-title-color);
    text-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 12px color-mix(in srgb, var(--wtn-title-color) 48%, transparent);
}

.wtn-divider {
    width: 1px;
    height: 30px;
    display: inline-block;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.55), transparent);
    opacity: .7;
}

.wtn-names {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 14px);
    min-width: 0;
}

.wtn-name {
    font-size: var(--wtn-name-size);
    font-weight: var(--wtn-weight);
    letter-spacing: .02em;
    line-height: 1;
    text-shadow: 0 0 6px currentColor, 0 0 19px currentColor, 0 5px 18px rgba(0,0,0,.5);
}

.wtn-name-1 { color: var(--wtn-name-1); }
.wtn-name-2 { color: var(--wtn-name-2); }
.wtn-name-3 { color: var(--wtn-name-3); }

.wtn-dot {
    opacity: .92;
    color: color-mix(in srgb, var(--wtn-title-color) 74%, var(--wtn-glow) 26%);
    text-shadow: 0 0 12px currentColor;
    font-size: calc(var(--wtn-name-size) * .55);
    transform: translateY(-1px);
}

.wtn-subline {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 1.1;
    margin-top: 1px;
    text-align: center;
}

.wtn-greeting {
    font-size: var(--wtn-greeting-size);
    font-weight: 700;
    color: var(--wtn-greeting-color);
    text-shadow: 0 0 10px color-mix(in srgb, var(--wtn-greeting-color) 70%, transparent);
}

.wtn-note {
    font-size: calc(var(--wtn-greeting-size) - 1px);
    color: var(--wtn-note-color);
    opacity: .92;
}

/* 10 gyári téma */
.wtn-theme-vibe-neon {
    --wtn-bg-1: #150624;
    --wtn-bg-2: #7717bc;
    --wtn-border: #a13cff;
    --wtn-glow: #b43cff;
    --wtn-title-color: #ffffff;
    --wtn-greeting-color: #f1d7ff;
    --wtn-note-color: #d7b1ff;
    --wtn-name-1: #39e7ff;
    --wtn-name-2: #ff4bcd;
    --wtn-name-3: #ffd36e;
    --wtn-icon-color: #f7eaff;
}

.wtn-theme-magenta-club {
    --wtn-bg-1: #220014;
    --wtn-bg-2: #b50077;
    --wtn-border: #ff4fd8;
    --wtn-glow: #ff26c8;
    --wtn-title-color: #fff4fb;
    --wtn-greeting-color: #ffd0f2;
    --wtn-note-color: #ffade7;
    --wtn-name-1: #ffffff;
    --wtn-name-2: #ff6fe4;
    --wtn-name-3: #ffd1f2;
    --wtn-icon-color: #ffffff;
}

.wtn-theme-blue-ice {
    --wtn-bg-1: #001a34;
    --wtn-bg-2: #0068ca;
    --wtn-border: #33d6ff;
    --wtn-glow: #2ebcff;
    --wtn-title-color: #effcff;
    --wtn-greeting-color: #c3f2ff;
    --wtn-note-color: #93e5ff;
    --wtn-name-1: #ffffff;
    --wtn-name-2: #62eaff;
    --wtn-name-3: #aeefff;
    --wtn-icon-color: #e8fcff;
}

.wtn-theme-gold-night {
    --wtn-bg-1: #1f1300;
    --wtn-bg-2: #795000;
    --wtn-border: #ffbf3f;
    --wtn-glow: #ffb12b;
    --wtn-title-color: #fff7e3;
    --wtn-greeting-color: #ffe2a8;
    --wtn-note-color: #ffce74;
    --wtn-name-1: #ffe18a;
    --wtn-name-2: #ffffff;
    --wtn-name-3: #ff9d2e;
    --wtn-icon-color: #fff3c9;
}

.wtn-theme-emerald-laser {
    --wtn-bg-1: #001b13;
    --wtn-bg-2: #087c56;
    --wtn-border: #16ffa3;
    --wtn-glow: #00ff99;
    --wtn-title-color: #effff8;
    --wtn-greeting-color: #c4ffe8;
    --wtn-note-color: #8ffff0;
    --wtn-name-1: #62ffc5;
    --wtn-name-2: #ffffff;
    --wtn-name-3: #a4ff5e;
    --wtn-icon-color: #eaffe9;
}

.wtn-theme-red-velvet {
    --wtn-bg-1: #220005;
    --wtn-bg-2: #8d1024;
    --wtn-border: #ff365e;
    --wtn-glow: #ff244c;
    --wtn-title-color: #fff2f4;
    --wtn-greeting-color: #ffcbd4;
    --wtn-note-color: #ff9dac;
    --wtn-name-1: #ffefef;
    --wtn-name-2: #ff6c83;
    --wtn-name-3: #ffd05a;
    --wtn-icon-color: #fff3f5;
}

.wtn-theme-ocean-cyan {
    --wtn-bg-1: #00151b;
    --wtn-bg-2: #007b8a;
    --wtn-border: #1dfbff;
    --wtn-glow: #00eaff;
    --wtn-title-color: #eaffff;
    --wtn-greeting-color: #cafbff;
    --wtn-note-color: #9bf2ff;
    --wtn-name-1: #42ffff;
    --wtn-name-2: #aefcff;
    --wtn-name-3: #ffffff;
    --wtn-icon-color: #eaffff;
}

.wtn-theme-pink-pop {
    --wtn-bg-1: #26001f;
    --wtn-bg-2: #d916a5;
    --wtn-border: #ff82e5;
    --wtn-glow: #ff48d7;
    --wtn-title-color: #fff7fd;
    --wtn-greeting-color: #ffd9f6;
    --wtn-note-color: #ffc1ef;
    --wtn-name-1: #ff99eb;
    --wtn-name-2: #ffffff;
    --wtn-name-3: #86f7ff;
    --wtn-icon-color: #fff7fd;
}

.wtn-theme-orange-fire {
    --wtn-bg-1: #210b00;
    --wtn-bg-2: #c34c00;
    --wtn-border: #ff8c2a;
    --wtn-glow: #ff6a00;
    --wtn-title-color: #fff4e7;
    --wtn-greeting-color: #ffd6b6;
    --wtn-note-color: #ffb985;
    --wtn-name-1: #fff2a5;
    --wtn-name-2: #ff9d4b;
    --wtn-name-3: #ffffff;
    --wtn-icon-color: #fff2e8;
}

.wtn-theme-minimal-dark {
    --wtn-bg-1: #0d0d13;
    --wtn-bg-2: #242436;
    --wtn-border: #7777a3;
    --wtn-glow: #9a9aff;
    --wtn-title-color: #ffffff;
    --wtn-greeting-color: #d9d9f5;
    --wtn-note-color: #b8b8d8;
    --wtn-name-1: #ffffff;
    --wtn-name-2: #c4c4ff;
    --wtn-name-3: #e9e9ff;
    --wtn-icon-color: #ffffff;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
    .webtom-nevnap-widget {
        background: linear-gradient(145deg, var(--wtn-bg-1), var(--wtn-bg-2));
        border-color: var(--wtn-border);
        box-shadow: 0 18px 46px rgba(0,0,0,.42), 0 0 32px var(--wtn-glow);
    }
}

@media (max-width: 720px) {
    .webtom-nevnap-widget {
        min-height: var(--wtn-mobile-height);
        padding-left: max(12px, calc(var(--wtn-px) - 4px));
        padding-right: max(12px, calc(var(--wtn-px) - 4px));
        border-radius: min(var(--wtn-radius), 24px);
    }

    .wtn-mainline {
        flex-wrap: wrap;
        row-gap: 5px;
        column-gap: 9px;
        white-space: normal;
    }

    .wtn-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 12px;
    }

    .wtn-icon svg {
        width: 19px;
        height: 19px;
    }

    .wtn-divider {
        display: none;
    }

    .wtn-title {
        font-size: min(var(--wtn-title-size), 15px);
    }

    .wtn-name {
        font-size: clamp(17px, 6vw, var(--wtn-name-size));
    }

    .wtn-names {
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
    }

    .wtn-subline {
        gap: 6px;
    }

    .wtn-greeting,
    .wtn-note {
        font-size: min(var(--wtn-greeting-size), 12px);
    }
}

@media (max-width: 390px) {
    .webtom-nevnap-widget {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wtn-mainline {
        gap: 7px;
    }

    .wtn-title {
        width: auto;
    }
}