@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


:root {
    color-scheme: dark;

    --black: #020309;
    --white: #f9f9ff;
    --muted: #a9afc4;

    --cyan: #20dcff;
    --purple: #8257ff;
    --pink: #ff2dcc;

    --accent-one: #20dcff;
    --accent-two: #8257ff;
    --accent-three: #ff2dcc;

    --dot-one: var(--accent-one);
    --dot-two: var(--accent-three);
    --dot-three: #ffffff;

    --theme-effect-opacity: 0;

    --border:
        rgba(
            255,
            255,
            255,
            0.14
        );

    --gradient:
        linear-gradient(
            90deg,
            var(--accent-one),
            var(--accent-two),
            var(--accent-three)
        );

    --shadow:
        0 28px 90px
        rgba(
            0,
            0,
            0,
            0.55
        );
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    min-height: 100%;
}


html {
    background:
        var(--black);
}


body {
    min-height: 100svh;

    color:
        var(--white);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--black);

    overflow-x: hidden;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


.hidden {
    display: none !important;
}


/* =========================================================
   LOGO
========================================================= */

.brand-logo {
    display: block;

    max-width: 100%;

    height: auto;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;

    filter:
        drop-shadow(
            0 0 14px
            rgba(32, 220, 255, 0.22)
        )
        drop-shadow(
            0 0 20px
            rgba(255, 45, 204, 0.18)
        );
}


.brand-logo-large {
    width: 145px;

    margin:
        0 auto
        18px;
}


.brand-logo-login {
    width: 120px;

    margin:
        0 auto
        18px;
}


.brand-logo-header {
    width: 64px;
}


.gift-brand-logo {
    width: 110px;

    margin:
        0 auto
        14px;
}


.brand-logo-error {
    width: 105px;

    margin:
        0 auto
        18px;
}


.brand-name,
.gift-brand-name {
    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size: 13px;

    font-weight: 700;

    letter-spacing:
        0.32em;

    text-align: center;
}


/* =========================================================
   LANDING PAGE
========================================================= */

.landing-body {
    position: relative;

    min-height: 100svh;

    display: grid;

    place-items: center;

    padding:
        max(
            30px,
            env(safe-area-inset-top)
        )
        22px
        max(
            30px,
            env(safe-area-inset-bottom)
        );

    background:
        linear-gradient(
            180deg,
            #02030a,
            #050616 55%,
            #020309
        );
}


.landing-shell {
    position: relative;

    z-index: 2;

    width:
        min(
            760px,
            100%
        );

    text-align: center;
}


.landing-brand-block {
    margin-bottom: 26px;
}


.landing-title {
    margin:
        20px 0
        38px;

    color:
        var(--white);

    font-size:
        clamp(
            42px,
            9vw,
            78px
        );

    font-weight: 400;

    letter-spacing:
        0.05em;

    line-height: 0.98;
}


.landing-title span {
    display: block;

    margin-top: 8px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple),
            var(--pink)
        );

    background-clip: text;

    -webkit-background-clip: text;
}


.landing-glass-card {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            34px,
            8vw,
            72px
        );

    border-radius: 36px;

    border:
        1px solid
        rgba(
            162,
            217,
            255,
            0.5
        );

    background:
        linear-gradient(
            135deg,
            rgba(31, 45, 78, 0.50),
            rgba(16, 21, 43, 0.30)
        );

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);
}


.landing-kicker {
    color:
        rgba(
            220,
            221,
            255,
            0.82
        );

    font-size:
        clamp(
            12px,
            2.5vw,
            18px
        );

    font-weight: 700;

    letter-spacing:
        0.38em;
}


.landing-copy {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            24px,
            5vw,
            42px
        );

    font-style: italic;

    line-height: 1.45;
}


/* =========================================================
   CUSTOMER PAGE BACKGROUND
========================================================= */

.gift-body {
    position: relative;

    min-height: 100svh;

    background:
        linear-gradient(
            180deg,
            #02030a,
            #06071a 48%,
            #020309
        );
}


.ambient-world {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.ambient-world::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(11, 144, 255, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 22%,
            rgba(255, 45, 204, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 88%,
            rgba(116, 67, 255, 0.14),
            transparent 40%
        );
}


.theme-effect {
    position: absolute;

    inset: -20%;

    opacity:
        var(--theme-effect-opacity);

    filter:
        blur(
            var(
                --theme-effect-blur,
                0px
            )
        );

    background:
        var(
            --theme-effect-background,
            transparent
        );

    transform:
        rotate(
            var(
                --theme-effect-rotation,
                0deg
            )
        );

    animation:
        themeEffectMove
        var(
            --theme-effect-speed,
            15s
        )
        ease-in-out
        infinite alternate;
}


@keyframes themeEffectMove {

    from {
        transform:
            translate3d(
                -2%,
                -1%,
                0
            )
            rotate(
                var(
                    --theme-effect-rotation,
                    0deg
                )
            )
            scale(1);
    }

    to {
        transform:
            translate3d(
                3%,
                2%,
                0
            )
            rotate(
                var(
                    --theme-effect-rotation,
                    0deg
                )
            )
            scale(1.06);
    }

}


/* =========================================================
   COLOR THEMES
   THESE CHANGE THE ATMOSPHERE, NOT THE DESIGN PALETTE
========================================================= */

/*
   MIDNIGHT:
   Smaller crisp lights, darker background,
   more "night sky".
*/

.theme-midnight {
    --dot-one:
        var(--accent-one);

    --dot-two:
        var(--accent-three);

    --dot-three:
        #ffffff;

    --dot-base-opacity:
        0.38;

    --dot-blur:
        1px;

    --dot-scale:
        1;

    --ribbon-theme-opacity:
        0.48;

    --theme-effect-opacity:
        0.16;

    --theme-effect-blur:
        0px;

    --theme-effect-speed:
        20s;

    --theme-effect-background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, 0.08)
            0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(255, 255, 255, 0.05)
            0 1px,
            transparent 2px
        );

    background-size:
        auto;
}


/*
   AURORA:
   Flowing bands behind the card.
   It uses whatever colors belong to
   Signature / Holiday / Executive.
*/

.theme-aurora {
    --dot-one:
        var(--accent-two);

    --dot-two:
        var(--accent-one);

    --dot-three:
        #ffffff;

    --dot-base-opacity:
        0.47;

    --dot-blur:
        2px;

    --dot-scale:
        1.18;

    --ribbon-theme-opacity:
        0.66;

    --theme-effect-opacity:
        0.12;

    --theme-effect-blur:
        34px;

    --theme-effect-speed:
        11s;

    --theme-effect-rotation:
        -7deg;

    --theme-effect-background:
        linear-gradient(
            105deg,
            transparent 0%,
            transparent 13%,
            var(--accent-one) 19%,
            transparent 29%,
            transparent 42%,
            var(--accent-two) 50%,
            transparent 60%,
            transparent 73%,
            var(--accent-three) 81%,
            transparent 91%
        );
}


/*
   VELVET:
   Bigger, softer lights and deeper vignette.
   Still uses the palette of the card design.
*/

.theme-velvet {
    --dot-one:
        var(--accent-three);

    --dot-two:
        var(--accent-two);

    --dot-three:
        var(--accent-one);

    --dot-base-opacity:
        0.31;

    --dot-blur:
        4px;

    --dot-scale:
        1.42;

    --ribbon-theme-opacity:
        0.30;

    --theme-effect-opacity:
        0.12;

    --theme-effect-blur:
        55px;

    --theme-effect-speed:
        17s;

    --theme-effect-background:
        radial-gradient(
            circle at 16% 28%,
            var(--accent-three),
            transparent 24%
        ),
        radial-gradient(
            circle at 84% 34%,
            var(--accent-one),
            transparent 25%
        ),
        radial-gradient(
            circle at 50% 82%,
            var(--accent-two),
            transparent 30%
        );
}


/* =========================================================
   AMBIENT ORBS
========================================================= */

.ambient-orb {
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    filter:
        blur(95px);

    opacity: 0.24;

    animation:
        ambientFloat
        11s
        ease-in-out
        infinite alternate;
}


.orb-cyan {
    left: -160px;
    top: 5%;

    background:
        var(--accent-one);
}


.orb-pink {
    right: -160px;
    top: 24%;

    background:
        var(--accent-three);

    animation-delay: -4s;
}


.orb-purple {
    left: 35%;
    bottom: -210px;

    background:
        var(--accent-two);

    animation-delay: -7s;
}


@keyframes ambientFloat {

    from {
        transform:
            translate3d(
                -15px,
                -12px,
                0
            )
            scale(0.94);
    }

    to {
        transform:
            translate3d(
                24px,
                26px,
                0
            )
            scale(1.08);
    }

}


/* =========================================================
   LIGHT RIBBONS
========================================================= */

.light-ribbon {
    position: absolute;

    width: 720px;
    height: 130px;

    border-radius: 50%;

    opacity:
        var(
            --ribbon-theme-opacity,
            0.48
        );

    filter:
        drop-shadow(
            0 0 12px
            var(--accent-one)
        )
        drop-shadow(
            0 0 25px
            var(--accent-three)
        );

    border-top:
        4px solid
        var(--accent-one);

    border-bottom:
        3px solid
        var(--accent-three);

    animation:
        ribbonDrift
        9s
        ease-in-out
        infinite alternate;
}


.ribbon-one {
    top: 5%;
    left: -280px;

    transform:
        rotate(-38deg);
}


.ribbon-two {
    right: -270px;
    bottom: 3%;

    transform:
        rotate(-28deg);

    animation-delay: -5s;
}


@keyframes ribbonDrift {

    from {
        opacity:
            calc(
                var(
                    --ribbon-theme-opacity,
                    0.48
                )
                * 0.70
            );
    }

    to {
        opacity:
            var(
                --ribbon-theme-opacity,
                0.48
            );
    }

}


/* =========================================================
   BOKEH / DOTS
========================================================= */

.bokeh-field {
    position: absolute;

    inset: 0;
}


.bokeh-field span {
    position: absolute;

    display: block;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        var(--dot-one);

    filter:
        blur(
            var(
                --dot-blur,
                1px
            )
        );

    box-shadow:
        0 0 24px
        currentColor;

    opacity:
        var(
            --dot-base-opacity,
            0.38
        );

    animation:
        bokehPulse
        5s
        ease-in-out
        infinite alternate;
}


.bokeh-field span:nth-child(1) {
    top: 11%;
    left: 8%;

    background:
        var(--dot-one);
}


.bokeh-field span:nth-child(2) {
    top: 22%;
    left: 82%;

    width: 28px;
    height: 28px;

    background:
        var(--dot-two);

    animation-delay: -1s;
}


.bokeh-field span:nth-child(3) {
    top: 31%;
    left: 14%;

    width: 9px;
    height: 9px;

    background:
        var(--dot-three);
}


.bokeh-field span:nth-child(4) {
    top: 41%;
    left: 91%;

    background:
        var(--dot-one);
}


.bokeh-field span:nth-child(5) {
    top: 58%;
    left: 5%;

    width: 30px;
    height: 30px;

    background:
        var(--dot-two);
}


.bokeh-field span:nth-child(6) {
    top: 72%;
    left: 80%;

    background:
        var(--dot-three);
}


.bokeh-field span:nth-child(7) {
    top: 84%;
    left: 19%;

    width: 21px;
    height: 21px;

    background:
        var(--dot-one);
}


.bokeh-field span:nth-child(8) {
    top: 17%;
    left: 60%;

    background:
        var(--dot-two);
}


.bokeh-field span:nth-child(9) {
    top: 67%;
    left: 46%;

    width: 7px;
    height: 7px;

    background:
        var(--dot-three);
}


.bokeh-field span:nth-child(10) {
    top: 93%;
    left: 68%;

    width: 25px;
    height: 25px;

    background:
        var(--dot-two);
}


.bokeh-field span:nth-child(11) {
    top: 35%;
    left: 47%;

    width: 5px;
    height: 5px;

    background:
        #ffffff;
}


.bokeh-field span:nth-child(12) {
    top: 79%;
    left: 92%;

    background:
        var(--dot-one);
}


.bokeh-field span:nth-child(13) {
    top: 8%;
    left: 37%;

    background:
        var(--dot-two);
}


.bokeh-field span:nth-child(14) {
    top: 53%;
    left: 71%;

    width: 6px;
    height: 6px;

    background:
        #ffffff;
}


@keyframes bokehPulse {

    from {
        transform:
            scale(
                calc(
                    0.70 *
                    var(
                        --dot-scale,
                        1
                    )
                )
            );

        opacity:
            calc(
                var(
                    --dot-base-opacity,
                    0.38
                )
                * 0.55
            );
    }

    to {
        transform:
            scale(
                calc(
                    1.45 *
                    var(
                        --dot-scale,
                        1
                    )
                )
            );

        opacity:
            var(
                --dot-base-opacity,
                0.38
            );
    }

}


/* =========================================================
   HOLIDAY SPARKLES
========================================================= */

.holiday-decor {
    display: none;
}


.design-holiday .holiday-decor {
    display: block;
}


.snow {
    position: absolute;

    color:
        white;

    text-shadow:
        0 0 10px
        rgba(
            255,
            255,
            255,
            0.8
        );

    animation:
        snowFloat
        8s
        ease-in-out
        infinite alternate;
}


.snow-one {
    left: 8%;
    top: 15%;
}


.snow-two {
    right: 12%;
    top: 30%;

    font-size: 22px;
}


.snow-three {
    left: 16%;
    top: 62%;

    font-size: 13px;
}


.snow-four {
    right: 20%;
    top: 74%;
}


.snow-five {
    left: 46%;
    top: 10%;

    font-size: 11px;
}


.snow-six {
    right: 6%;
    bottom: 9%;

    font-size: 20px;
}


@keyframes snowFloat {

    from {
        transform:
            translateY(-10px)
            rotate(0deg);

        opacity: 0.35;
    }

    to {
        transform:
            translateY(22px)
            rotate(35deg);

        opacity: 0.9;
    }

}


/* =========================================================
   EXECUTIVE LINES
========================================================= */

.executive-lines {
    display: none;
}


.design-executive .executive-lines {
    display: block;

    position: absolute;

    inset: 0;
}


.executive-lines span {
    position: absolute;

    width: 60vw;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                70,
                190,
                255,
                0.55
            ),
            transparent
        );

    transform:
        rotate(-18deg);
}


.executive-lines span:nth-child(1) {
    top: 20%;
    left: -10%;
}


.executive-lines span:nth-child(2) {
    top: 50%;
    right: -20%;

    transform:
        rotate(18deg);
}


.executive-lines span:nth-child(3) {
    bottom: 13%;
    left: 12%;
}


/* =========================================================
   SIGNATURE DESIGN
========================================================= */

.design-signature {
    --accent-one: #0ceaff;
    --accent-two: #8754ff;
    --accent-three: #ff35cf;
    background:
        radial-gradient(ellipse at 4% 18%, rgba(0, 175, 255, .19), transparent 33%),
        radial-gradient(ellipse at 96% 27%, rgba(255, 48, 199, .17), transparent 33%),
        linear-gradient(135deg, #06172d 0%, #0e1034 38%, #271044 70%, #170d29 100%);
}


/* =========================================================
   HOLIDAY DESIGN
========================================================= */

.design-holiday {
    --holiday-green: #15c985;
    --holiday-red: #ec3049;
    --holiday-white: #fff8e9;
    --accent-one: var(--holiday-green);
    --accent-two: #edc774;
    --accent-three: var(--holiday-red);
    --theme-effect-opacity: 0;
    background: linear-gradient(90deg,
        #075235 0%, #073d2a 27%, #062015 43%,
        #050708 48%, #050708 52%,
        #370915 61%, #650d22 83%, #400917 100%);
}


.design-holiday .ambient-world::before {
    background: none;
}


.design-holiday .orb-cyan {
    display: none;
}


.design-holiday .orb-pink {
    display: none;
}


.design-holiday .orb-purple {
    display: none;
}


.design-holiday .light-ribbon {
    border-top-color: #159964;
    border-bottom-color: #159964;
    filter: none;
    opacity: 0.42;
}


.design-holiday .ribbon-two {
    border-top-color: #d6253d;
    border-bottom-color: #d6253d;
    filter: none;
}


.design-holiday .gift-title-primary {
    color:
        #ffffff;
}


.design-holiday .gift-title-accent {
    background: linear-gradient(90deg,
        #16c881 0% 41%, #f1cc76 41% 59%, #ef384d 59% 100%);
    background-clip: text;
    -webkit-background-clip: text;
}


.design-holiday .gift-card {
    background: linear-gradient(90deg,
        #075238 0%, #062d21 38%, #090e0d 47%,
        #090e0d 53%, #3e0b1c 62%, #710f2b 100%);
    box-shadow: 0 26px 48px rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


.design-holiday .glass-card-shine {
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0.06), transparent 23%,
        transparent 78%, rgba(255, 255, 255, 0.035));
}


.design-holiday .gift-card-kicker {
    color:
        rgba(
            246,
            255,
            249,
            0.90
        );
}


.design-holiday .gift-message {
    color:
        #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;
}


.design-holiday .gift-headline {
    color:
        #ffffff;
}


.design-holiday .photo-frame {
    background: #090b0b;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.44);
}


.design-holiday .photo-inner-glow {
    box-shadow: inset 2px 0 0 #159964, inset -2px 0 0 #d6253d;
}


.design-holiday .snow-one,
.design-holiday .snow-three {
    color: #49e39e;
    text-shadow: none;
}


.design-holiday .snow-two,
.design-holiday .snow-six {
    color: #ff6175;
    text-shadow: none;
}


.design-holiday .snow-four,
.design-holiday .snow-five {
    color: #ffffff;
    text-shadow: none;
}


/* =========================================================
   EXECUTIVE DESIGN
========================================================= */

.design-executive {
    --accent-one: #35deff;
    --accent-two: #3b8cf6;
    --accent-three: #a5c5ff;
    background:
        radial-gradient(ellipse at 12% 12%, rgba(31, 168, 231, .17), transparent 33%),
        linear-gradient(145deg, #061827 0%, #101d35 48%, #081021 100%);
}


.design-executive .ambient-world::before {
    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(
                42,
                166,
                220,
                0.18
            ),
            transparent 31%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(
                60,
                87,
                120,
                0.16
            ),
            transparent 32%
        );
}


.design-executive .orb-pink {
    display: none;
}


.design-executive .gift-card {
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(
                24,
                32,
                42,
                0.78
            ),
            rgba(
                5,
                8,
                12,
                0.82
            )
        );

    box-shadow:
        0 0 25px
        rgba(
            39,
            174,
            235,
            0.10
        ),
        0 35px 100px
        rgba(
            0,
            0,
            0,
            0.62
        );
}


.design-executive .gift-card::after {
    content: "";

    position: absolute;

    inset: 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.035
        );

    border-radius: 11px;

    pointer-events: none;
}


.design-executive .gift-title-accent {
    background:
        linear-gradient(
            90deg,
            #e8edf2,
            #45cfff,
            #728da8
        );

    background-clip: text;

    -webkit-background-clip: text;
}


.design-executive .gift-message,
.design-executive .gift-headline,
.design-executive .gift-caption {
    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-style:
        normal;
}


.design-executive .gift-message {
    font-weight: 300;

    letter-spacing:
        0.015em;

    line-height: 1.5;
}


/* =========================================================
   ROTATING GRADIENT BORDERS
========================================================= */

.gift-card,
.photo-frame,
.login-card,
.stat-card,
.admin-panel,
.conditional-section,
.admin-card-row,
.existing-photo-box,
.error-glass-card {
    position: relative;

    border:
        1px solid
        transparent;
}


.gift-card::before,
.photo-frame::before,
.login-card::before,
.stat-card::before,
.admin-panel::before,
.conditional-section::before,
.admin-card-row::before,
.existing-photo-box::before,
.error-glass-card::before {
    content: "";

    position: absolute;

    inset: -1px;

    z-index: 8;

    border-radius:
        inherit;

    padding: 1px;

    pointer-events: none;

    background:
        conic-gradient(
            from var(--border-angle),

            var(--accent-one),

            var(--accent-two),

            var(--accent-three),

            rgba(
                255,
                255,
                255,
                0.90
            ),

            var(--accent-one)
        );

    -webkit-mask:
        linear-gradient(
            #fff 0 0
        )
        content-box,

        linear-gradient(
            #fff 0 0
        );

    -webkit-mask-composite:
        xor;

    mask:
        linear-gradient(
            #fff 0 0
        )
        content-box,

        linear-gradient(
            #fff 0 0
        );

    mask-composite:
        exclude;

    animation:
        rotateBorder
        7s
        linear
        infinite;
}


@keyframes rotateBorder {

    to {
        --border-angle:
            360deg;
    }

}


/*
   ADMIN ALWAYS USES MILLIONAIRE COLORS.
   THE CUSTOMER PAGE USES THAT CARD'S DESIGN COLORS.
*/

.admin-body {
    --accent-one: #20dcff;
    --accent-two: #8257ff;
    --accent-three: #ff2dcc;
}


/* =========================================================
   CUSTOMER LAYOUT
========================================================= */

.gift-page {
    position: relative;

    z-index: 2;

    width:
        min(
            820px,
            100%
        );

    min-height: 100svh;

    margin:
        0 auto;

    padding:
        max(
            26px,
            env(safe-area-inset-top)
        )
        18px
        max(
            50px,
            env(safe-area-inset-bottom)
        );
}


.gift-brand {
    margin-bottom: 28px;

    text-align: center;
}


.gift-type-heading {
    margin-top: 30px;

    text-align: center;
}


.gift-type-title {
    font-size:
        clamp(
            34px,
            8vw,
            66px
        );

    font-weight: 300;

    letter-spacing:
        0.035em;

    line-height: 1.05;
}


.gift-title-primary {
    color:
        var(--white);
}


.gift-title-accent {
    color:
        transparent;

    margin-left:
        0.15em;

    background:
        var(--gradient);

    background-clip:
        text;

    -webkit-background-clip:
        text;
}


/* =========================================================
   DIVIDERS
========================================================= */

.neon-divider,
.bottom-heart-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;
}


.neon-divider span,
.bottom-heart-divider span {
    width: 110px;
    height: 1px;
}


.neon-divider span:first-child,
.bottom-heart-divider span:first-child {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent-one)
        );

    box-shadow:
        0 0 12px
        var(--accent-one);
}


.neon-divider span:last-child,
.bottom-heart-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--accent-three),
            transparent
        );

    box-shadow:
        0 0 12px
        var(--accent-three);
}


.neon-divider b,
.bottom-heart-divider b {
    color:
        var(--accent-two);

    font-size: 25px;

    font-weight: 400;

    text-shadow:
        0 0 14px
        currentColor;
}


.gift-divider {
    margin:
        26px 0
        34px;
}


.mini-gradient-line {
    width: 140px;
    height: 3px;

    margin:
        18px auto
        30px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--accent-one),
            var(--accent-two),
            var(--accent-three)
        );

    background-size:
        220% 100%;

    box-shadow:
        0 0 16px
        var(--accent-two);

    animation:
        barFlow
        4s
        linear
        infinite;
}


@keyframes barFlow {

    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            220% 50%;
    }

}


/* =========================================================
   GIFT CARD
========================================================= */

.gift-card {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            28px,
            6vw,
            56px
        );

    border-radius:
        clamp(
            26px,
            5vw,
            42px
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                31,
                44,
                74,
                0.54
            ),
            rgba(
                12,
                16,
                34,
                0.46
            )
        );

    box-shadow:
        0 0 28px
        rgba(
            37,
            215,
            255,
            0.20
        ),
        0 0 52px
        rgba(
            255,
            45,
            204,
            0.14
        ),
        0 35px 100px
        rgba(
            0,
            0,
            0,
            0.55
        );

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    animation:
        giftReveal
        0.85s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        both;
}


.glass-card-shine,
.login-card-shine {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(
                255,
                255,
                255,
                0.10
            ),
            transparent 28%,
            transparent 65%,
            rgba(
                255,
                45,
                204,
                0.05
            )
        );
}


@keyframes giftReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.gift-card-kicker {
    position: relative;

    z-index: 2;

    text-align: center;

    color:
        rgba(
            220,
            221,
            255,
            0.82
        );

    font-size:
        clamp(
            11px,
            2.5vw,
            17px
        );

    font-weight: 700;

    letter-spacing:
        0.30em;

    line-height: 1.6;
}


.gift-headline {
    position: relative;

    z-index: 2;

    margin:
        8px 0
        28px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            27px,
            6vw,
            48px
        );

    font-style: italic;

    font-weight: 400;
}


/* =========================================================
   MESSAGE
========================================================= */

.message-gift {
    min-height:
        min(
            62svh,
            700px
        );

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.gift-message {
    position: relative;

    z-index: 2;

    margin:
        14px 0
        26px;

    padding:
        clamp(
            12px,
            4vw,
            24px
        );

    text-align: center;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    font-family:
        "Segoe Script",
        "Bradley Hand",
        "Brush Script MT",
        cursive;

    font-size:
        clamp(
            31px,
            7vw,
            56px
        );

    line-height: 1.38;
}


/* =========================================================
   PHOTO
========================================================= */

.photo-frame {
    z-index: 2;

    overflow: hidden;

    width: 100%;

    min-height:
        min(
            60svh,
            680px
        );

    display: grid;

    place-items: center;

    border-radius: 28px;

    background:
        rgba(
            0,
            0,
            0,
            0.58
        );

    box-shadow:
        0 0 24px
        rgba(
            32,
            220,
            255,
            0.14
        ),
        inset 0 0 25px
        rgba(
            0,
            0,
            0,
            0.5
        );
}


.photo-inner-glow {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    border-radius: inherit;
}


.photo-frame img {
    position: relative;

    z-index: 2;

    width: 100%;

    height:
        min(
            60svh,
            680px
        );

    display: block;

    background:
        #020204;
}


.gift-caption {
    position: relative;

    z-index: 2;

    margin-top: 28px;

    padding:
        0 8px;

    text-align: center;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            20px,
            4vw,
            28px
        );

    font-style: italic;

    line-height: 1.55;
}


.bottom-heart-divider {
    position: relative;

    z-index: 2;

    margin-top: 30px;
}


.gift-date {
    position: relative;

    z-index: 2;

    margin-top: 20px;

    text-align: center;

    color:
        rgba(
            222,
            225,
            242,
            0.72
        );

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        0.28em;

    text-transform:
        uppercase;
}


/* =========================================================
   SHARE BUTTON
========================================================= */

.share-area {
    margin:
        28px auto
        0;

    text-align: center;
}


.share-card-button {
    position: relative;

    isolation: isolate;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 190px;

    padding:
        14px
        24px;

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    color:
        #ffffff;

    background:
        linear-gradient(
            rgba(
                5,
                8,
                16,
                0.90
            ),
            rgba(
                5,
                8,
                16,
                0.90
            )
        )
        padding-box,

        linear-gradient(
            90deg,
            var(--accent-one),
            var(--accent-two),
            var(--accent-three)
        )
        border-box;

    box-shadow:
        0 0 25px
        rgba(
            0,
            0,
            0,
            0.30
        );

    font-size: 12px;

    font-weight: 800;

    letter-spacing:
        0.16em;

    transition:
        transform
        0.18s
        ease,

        box-shadow
        0.18s
        ease;
}


.share-card-button::before {
    content: "";

    position: absolute;

    inset: 2px;

    z-index: -1;

    border-radius:
        inherit;

    opacity: 0.12;

    background:
        linear-gradient(
            90deg,
            var(--accent-one),
            var(--accent-two),
            var(--accent-three)
        );

    filter:
        blur(12px);
}


.share-card-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 0 28px
        var(--accent-two);
}


.share-card-button:active {
    transform:
        scale(0.97);
}


.share-card-button svg {
    width: 19px;
    height: 19px;

    fill:
        currentColor;
}


.share-status {
    min-height: 20px;

    margin-top: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        0.15em;
}


/* =========================================================
   ERROR
========================================================= */

.gift-error {
    position: relative;

    z-index: 2;

    width:
        min(
            560px,
            calc(
                100% - 30px
            )
        );

    min-height: 100svh;

    margin: auto;

    display: grid;

    place-items: center;
}


.error-glass-card {
    width: 100%;

    padding:
        42px
        28px;

    text-align: center;

    border-radius: 32px;

    background:
        rgba(
            11,
            14,
            29,
            0.68
        );

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    box-shadow:
        var(--shadow);
}


.error-divider {
    margin:
        26px 0;
}


.gift-error p {
    margin: 0;

    color:
        var(--muted);
}


/* =========================================================
   ADMIN
========================================================= */

.admin-body {
    position: relative;

    min-height: 100svh;

    --accent-one: #20dcff;
    --accent-two: #8257ff;
    --accent-three: #ff2dcc;

    background:
        linear-gradient(
            180deg,
            #02030a,
            #060715 55%,
            #020309
        );
}


.admin-background {
    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


.admin-glow {
    position: absolute;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    filter:
        blur(120px);

    opacity: 0.14;
}


.admin-glow-one {
    top: -180px;
    left: -180px;

    background:
        var(--cyan);
}


.admin-glow-two {
    top: 20%;
    right: -230px;

    background:
        var(--pink);
}


.admin-glow-three {
    bottom: -260px;
    left: 30%;

    background:
        var(--purple);
}


/* =========================================================
   LOGIN
========================================================= */

.login-view {
    position: relative;

    z-index: 2;

    min-height: 100svh;

    display: grid;

    place-items: center;

    padding: 22px;
}


.login-card {
    overflow: hidden;

    width:
        min(
            470px,
            100%
        );

    padding:
        38px
        34px;

    text-align: center;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(
                20,
                27,
                53,
                0.80
            ),
            rgba(
                7,
                9,
                19,
                0.88
            )
        );

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);
}


.login-divider {
    margin:
        26px 0
        18px;
}


.login-card h1 {
    margin:
        0 0
        30px;

    font-size: 32px;

    font-weight: 400;
}


.login-card h1 span,
.admin-header h1 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple),
            var(--pink)
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;
}


.login-card form {
    position: relative;

    z-index: 2;

    text-align: left;
}


/* =========================================================
   ADMIN FORM ELEMENTS
========================================================= */

label {
    display: block;

    color:
        var(--muted);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.16em;
}


label small {
    display: block;

    margin-top: 5px;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0;

    opacity: 0.65;
}


input,
textarea,
select {
    width: 100%;

    margin-top: 10px;

    padding:
        15px
        16px;

    color:
        var(--white);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius:
        14px;

    outline: none;

    background:
        rgba(
            0,
            0,
            0,
            0.32
        );
}


textarea {
    min-height: 120px;

    resize: vertical;
}


input:focus,
textarea:focus,
select:focus {
    border-color:
        rgba(
            56,
            221,
            255,
            0.65
        );

    box-shadow:
        0 0 0 3px
        rgba(
            32,
            220,
            255,
            0.07
        );
}


.login-card label + label {
    margin-top: 18px;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-button,
.secondary-button,
.small-button {
    border-radius:
        999px;

    color:
        var(--white);

    font-weight: 800;

    letter-spacing:
        0.05em;

    transition:
        transform
        0.18s
        ease,

        border-color
        0.18s
        ease;
}


.primary-button {
    border: 0;

    padding:
        15px
        24px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple),
            var(--pink)
        );
}


.secondary-button,
.small-button {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );
}


.secondary-button {
    padding:
        13px
        20px;
}


.small-button {
    padding:
        10px
        14px;

    font-size: 10px;
}


.primary-button:hover,
.secondary-button:hover,
.small-button:hover {
    transform:
        translateY(-1px);
}


.primary-button:active,
.secondary-button:active,
.small-button:active {
    transform:
        scale(0.97);
}


.full-button {
    width: 100%;

    margin-top: 24px;
}


button:disabled {
    opacity: 0.55;

    cursor: wait;
}


.status-message {
    min-height: 22px;

    margin-top: 18px;

    color:
        var(--cyan);

    font-size: 13px;
}


.status-message.error {
    color:
        #ff8098;
}


/* =========================================================
   ADMIN HEADER
========================================================= */

.admin-view {
    position: relative;

    z-index: 2;
}


.admin-header {
    position: sticky;

    top: 0;

    z-index: 30;

    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        17px
        clamp(
            18px,
            4vw,
            50px
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    background:
        rgba(
            3,
            4,
            12,
            0.82
        );

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);
}


.admin-brand-wrap {
    display: flex;

    align-items: center;

    gap: 16px;
}


.admin-header .brand-name {
    text-align: left;

    font-size: 10px;
}


.admin-header h1 {
    margin:
        7px 0 0;

    font-size: 20px;

    font-weight: 400;
}


/* =========================================================
   ADMIN MAIN
========================================================= */

.admin-main {
    width:
        min(
            1300px,
            calc(
                100% - 32px
            )
        );

    margin:
        32px auto
        80px;
}


.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 16px;

    margin-bottom: 24px;
}


.stat-card {
    min-height: 130px;

    padding: 22px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(
                25,
                33,
                62,
                0.60
            ),
            rgba(
                8,
                10,
                22,
                0.74
            )
        );
}


.stat-card span {
    color:
        var(--muted);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.14em;
}


.stat-card strong {
    font-size: 34px;

    font-weight: 500;
}


/* =========================================================
   ADMIN PANELS
========================================================= */

.admin-panel {
    margin-bottom: 24px;

    padding:
        clamp(
            20px,
            3vw,
            32px
        );

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(
                21,
                28,
                52,
                0.58
            ),
            rgba(
                8,
                10,
                22,
                0.74
            )
        );

    box-shadow:
        0 28px 80px
        rgba(
            0,
            0,
            0,
            0.30
        );
}


.panel-heading {
    margin-bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.panel-heading h2 {
    margin:
        6px 0 0;

    font-size: 27px;

    font-weight: 500;
}


.eyebrow {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--pink)
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

    font-size: 11px;

    font-weight: 900;

    letter-spacing:
        0.20em;
}


/* =========================================================
   ADMIN FORM GRID
========================================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 20px;
}


.full-span {
    grid-column:
        1 / -1;
}


.conditional-section {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 20px;

    padding: 22px;

    border-radius: 22px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.conditional-section label:last-child {
    grid-column:
        1 / -1;
}


.existing-photo-box {
    overflow: hidden;

    min-height: 220px;

    border-radius: 14px;

    background:
        #000;
}


.existing-photo-box img {
    width: 100%;

    max-height: 400px;

    display: block;

    object-fit: contain;
}


.toggle-row {
    display: flex;

    align-items: center;

    gap: 12px;
}


.toggle-row input {
    width: 20px;
    height: 20px;

    margin: 0;

    accent-color:
        var(--pink);
}


.form-actions {
    margin-top: 28px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


.search-input {
    margin:
        0 0
        22px;
}


/* =========================================================
   ADMIN CARD LIST
========================================================= */

.cards-list {
    display: grid;

    gap: 14px;
}


.admin-card-row {
    padding: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 22px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.admin-card-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.admin-card-info span {
    color:
        var(--muted);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        0.1em;
}


.admin-card-info code {
    color:
        #7eeeff;

    font-size: 12px;

    overflow-wrap:
        anywhere;
}


.admin-card-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}


.danger-button {
    color:
        #ff8da2;
}


.empty-state {
    padding: 30px;

    text-align: center;

    color:
        var(--muted);

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 22px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 760px
) {

    .brand-logo-large {
        width: 125px;
    }


    .gift-brand-logo {
        width: 92px;
    }


    .gift-page {
        padding-left: 13px;

        padding-right: 13px;
    }


    .gift-type-title {
        display: flex;

        flex-direction: column;

        gap: 5px;
    }


    .gift-title-accent {
        margin-left: 0;
    }


    .gift-card {
        padding:
            26px
            18px;

        border-radius: 28px;
    }


    .design-executive .gift-card {
        border-radius: 15px;
    }


    .photo-frame {
        min-height:
            min(
                56svh,
                620px
            );

        border-radius: 21px;
    }


    .photo-frame img {
        height:
            min(
                56svh,
                620px
            );
    }


    .neon-divider span {
        width: 74px;
    }


    .stats-grid {
        grid-template-columns:
            1fr;
    }


    .form-grid,
    .conditional-section {
        grid-template-columns:
            1fr;
    }


    .conditional-section label:last-child {
        grid-column: auto;
    }


    .admin-main {
        width:
            calc(
                100% - 20px
            );

        margin-top: 18px;
    }


    .admin-panel {
        padding: 18px;
    }


    .admin-card-row {
        align-items: stretch;

        flex-direction: column;
    }


    .admin-card-actions {
        justify-content:
            flex-start;
    }


    .small-button {
        flex:
            1 1
            calc(
                50% - 8px
            );
    }


    .panel-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .admin-header {
        align-items:
            flex-start;
    }


    .admin-header .brand-name {
        font-size: 8px;
    }


    .admin-header h1 {
        font-size: 17px;
    }


    .brand-logo-header {
        width: 48px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (
    max-width: 420px
) {

    .brand-name {
        font-size: 10px;

        letter-spacing:
            0.25em;
    }


    .gift-type-title {
        font-size: 38px;
    }


    .gift-message {
        font-size:
            clamp(
                29px,
                9vw,
                42px
            );
    }


    .login-card {
        padding:
            28px
            22px;
    }


    .primary-button,
    .secondary-button {
        width: 100%;
    }


    .form-actions {
        flex-direction:
            column;
    }


    .share-card-button {
        width: 100%;

        max-width: 310px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;
    }

}

.design-holiday.theme-midnight {
    --dot-base-opacity: 0.65;
    --dot-blur: 0px;
    --dot-scale: 0.7;
    --theme-effect-opacity: 0;
}

.design-holiday.theme-aurora {
    --dot-base-opacity: 0.65;
    --dot-blur: 0px;
    --dot-scale: 0.75;
    --theme-effect-opacity: 0.42;
    --theme-effect-blur: 0px;
    --theme-effect-background: linear-gradient(105deg,
        transparent 0% 8%, rgba(20, 190, 125, 0.28) 8% 9%,
        transparent 9% 88%, rgba(237, 48, 73, 0.28) 88% 89%,
        transparent 89% 100%);
}

.design-holiday.theme-velvet {
    --dot-base-opacity: 0.5;
    --dot-blur: 0px;
    --dot-scale: 0.72;
    --theme-effect-opacity: 0;
    background: linear-gradient(90deg,
        #063322 0%, #05251a 38%, #050608 48%,
        #050608 52%, #310816 63%, #590d22 100%);
}

.design-holiday .ambient-world::before,
.design-holiday .theme-effect,
.design-holiday .bokeh-field span,
.design-holiday .snow {
    filter: none;
    text-shadow: none;
}

.design-holiday .bokeh-field span {
    width: 5px;
    height: 5px;
    opacity: 0.7;
    box-shadow: none;
}

.design-holiday .light-ribbon {
    filter: none;
    box-shadow: none;
    opacity: 0.4;
}

.design-holiday.theme-aurora .light-ribbon {
    opacity: 0.65;
}

.design-holiday .brand-logo {
    filter: none;
}

.design-holiday .gift-card::before,
.design-holiday .photo-frame::before {
    background: conic-gradient(from var(--border-angle),
        #12b87a 0deg 110deg, #edc774 110deg 155deg,
        #ed304b 155deg 300deg, #edc774 300deg 330deg,
        #12b87a 330deg 360deg);
}

.design-holiday .neon-divider span {
    box-shadow: none;
}

.design-signature .ambient-world::before {
    background:
        radial-gradient(ellipse at 4% 18%, rgba(14, 175, 255, .13), transparent 28%),
        radial-gradient(ellipse at 95% 25%, rgba(228, 32, 186, .12), transparent 30%);
}

.design-executive .ambient-world::before {
    background:
        radial-gradient(ellipse at 7% 20%, rgba(35, 193, 255, .12), transparent 29%),
        radial-gradient(ellipse at 94% 23%, rgba(81, 124, 231, .1), transparent 30%);
}

.design-signature .ambient-orb,
.design-executive .ambient-orb {
    opacity: .13;
    filter: blur(65px);
}

.design-signature .light-ribbon,
.design-executive .light-ribbon {
    filter: none;
    opacity: .44;
}

.design-signature.theme-aurora .light-ribbon,
.design-executive.theme-aurora .light-ribbon {
    opacity: .7;
}

.design-signature .bokeh-field span,
.design-executive .bokeh-field span {
    width: 6px;
    height: 6px;
    filter: none;
    box-shadow: none;
    opacity: .75;
}

.design-signature.theme-velvet .bokeh-field span,
.design-executive.theme-velvet .bokeh-field span {
    width: 8px;
    height: 8px;
    filter: none;
    box-shadow: none;
}

.design-signature.theme-aurora .theme-effect,
.design-executive.theme-aurora .theme-effect {
    filter: none;
    opacity: .21;
}

.design-signature.theme-velvet .theme-effect,
.design-executive.theme-velvet .theme-effect {
    opacity: .12;
    filter: none;
}

.design-signature .gift-card {
    background:
        radial-gradient(ellipse at 6% 0%, rgba(14, 189, 255, .18), transparent 36%),
        radial-gradient(ellipse at 96% 10%, rgba(255, 41, 185, .17), transparent 34%),
        linear-gradient(135deg, #112c56 0%, #1a1f52 38%, #321453 72%, #3a153f 100%);
    box-shadow: 0 25px 54px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.design-executive .gift-card {
    background:
        radial-gradient(ellipse at 5% 0%, rgba(43, 164, 243, .18), transparent 38%),
        linear-gradient(135deg, #102c45 0%, #162c4d 46%, #111d36 100%);
    box-shadow: 0 25px 54px rgba(0, 0, 0, .49), inset 0 1px 0 rgba(238, 249, 255, .14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.design-signature .gift-card::before,
.design-signature .photo-frame::before {
    background: conic-gradient(from var(--border-angle),
        #0b6f9a 0deg, #1beaff 22deg, #f7feff 34deg,
        #27b7ff 45deg, #8556ff 96deg, #ff35cf 153deg,
        #d294ff 177deg, #1c1646 222deg, #604fcf 279deg,
        #0de5ff 341deg, #0b6f9a 360deg);
    animation-duration: 4.5s;
}

.design-executive .gift-card::before,
.design-executive .photo-frame::before {
    background: conic-gradient(from var(--border-angle),
        #1b4364 0deg, #35deff 23deg, #f6fdff 35deg,
        #50b5ff 48deg, #3478dd 106deg, #b0caff 164deg,
        #1c365b 221deg, #4d8df3 283deg, #35deff 340deg,
        #1b4364 360deg);
    animation-duration: 5.2s;
}

.design-signature .glass-card-shine {
    background: linear-gradient(115deg,
        rgba(255, 255, 255, .07), transparent 21%,
        transparent 78%, rgba(241, 140, 248, .035));
}

.design-executive .glass-card-shine {
    background: linear-gradient(115deg,
        rgba(237, 249, 255, .075), transparent 24%,
        transparent 80%, rgba(117, 173, 236, .035));
}

.design-signature .gift-title-accent {
    background: linear-gradient(90deg, #0ceaff 0%, #925aff 51%, #ff35cf 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.design-executive .gift-title-accent {
    background: linear-gradient(90deg, #d7f6ff 0%, #35deff 42%, #7ba4ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.design-signature .photo-frame,
.design-executive .photo-frame {
    box-shadow: 0 18px 36px rgba(0, 0, 0, .44);
}

.design-signature .neon-divider span,
.design-signature .bottom-heart-divider span,
.design-executive .neon-divider span,
.design-executive .bottom-heart-divider span {
    box-shadow: none;
}

.design-signature .share-card-button,
.design-signature .share-card-button:hover {
    background:
        linear-gradient(135deg, #112a4e, #3a1d59) padding-box,
        linear-gradient(90deg, #0ceaff, #8754ff, #ff35cf) border-box;
    box-shadow: 0 12px 27px rgba(0, 0, 0, .32);
}

.design-executive .share-card-button,
.design-executive .share-card-button:hover {
    background:
        linear-gradient(135deg, #102a42, #1b3255) padding-box,
        linear-gradient(90deg, #35deff, #3b8cf6, #a5c5ff) border-box;
    box-shadow: 0 12px 27px rgba(0, 0, 0, .32);
}

.design-signature .share-card-button::before,
.design-executive .share-card-button::before {
    filter: none;
    opacity: .09;
}

.gift-body .gift-brand-logo {
    display: none;
}

.gift-body .gift-title-accent {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.gift-body .gift-title-accent {
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 0 0.04em 0.12em;
  vertical-align: baseline;
  line-height: 1.15;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}