:root {
    --bg: #070910;
    --bg2: #0b0e16;

    --surface:
        rgba(19, 23, 34, .72);

    --surface-strong:
        rgba(23, 28, 42, .92);

    --border:
        rgba(255,255,255,.09);

    --border-hover:
        rgba(170,112,255,.55);

    --text: #f7f7fb;
    --muted: #969bad;

    --pink: #ff4fa3;
    --purple: #9b68ff;
    --blue: #2ba8ff;
    --cyan: #39e6ff;
    --green: #42e5a4;
}


/* ========================================
   GLOBAL
======================================== */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;

    color: var(--text);

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(255,79,163,.16),
            transparent 27%
        ),

        radial-gradient(
            circle at 90% 17%,
            rgba(43,168,255,.15),
            transparent 31%
        ),

        radial-gradient(
            circle at 50% 66%,
            rgba(155,104,255,.11),
            transparent 34%
        ),

        linear-gradient(
            180deg,
            #080a11 0%,
            #090b13 55%,
            #06080e 100%
        ) !important;

    background-attachment: fixed !important;
}


/* animated background glow */

body::before,
body::after {
    content: "";
    position: fixed;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;

    opacity: .22;

    z-index: -1;

    animation:
        cvFloat 12s ease-in-out infinite alternate;
}

body::before {
    left: -180px;
    top: 120px;

    background:
        radial-gradient(
            circle,
            #ff3b98,
            transparent 65%
        );
}

body::after {
    right: -180px;
    top: 160px;

    background:
        radial-gradient(
            circle,
            #168dff,
            transparent 65%
        );

    animation-delay: -4s;
}

@keyframes cvFloat {
    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(50px,40px,0)
            scale(1.14);
    }
}


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

header,
.site-header,
.main-header,
.navbar,
.topbar {

    background:
        rgba(7,9,16,.78) !important;

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    box-shadow:
        0 10px 40px rgba(0,0,0,.20);
}


header a,
nav a,
.site-header a {
    color: #e9e8f0 !important;

    transition:
        color .2s ease,
        text-shadow .2s ease,
        transform .2s ease;
}

header nav a:hover,
.site-header nav a:hover {

    color: white !important;

    text-shadow:
        0 0 12px rgba(255,79,163,.85),
        0 0 24px rgba(155,104,255,.45);

    transform:
        translateY(-1px);
}


/* logo */

.logo,
.brand,
.site-logo {
    color: white !important;

    filter:
        drop-shadow(
            0 0 12px rgba(255,79,163,.18)
        );
}


/* ========================================
   SECTIONS
======================================== */

main,
section,
.page,
.content,
.content-section,
.categories-section,
.stories-section,
.featured-section,
.hero,
.hero-section {

    background:
        transparent !important;

    color:
        var(--text) !important;
}


/* ========================================
   TITLES
======================================== */

h1,
h2,
h3,
h4 {
    color:
        #fafafe !important;
}

h1 {
    text-shadow:
        0 0 35px rgba(155,104,255,.10);
}

p,
.description,
.subtitle,
.lead {
    color:
        var(--muted) !important;
}


/* gradient highlighted text */

.gradient-text,
.hero h1 span {

    background:
        linear-gradient(
            90deg,
            #ff54a6,
            #ba73ff,
            #44baff
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    color:
        transparent !important;

    filter:
        drop-shadow(
            0 0 18px
            rgba(182,94,255,.18)
        );
}


/* ========================================
   BADGES
======================================== */

.badge,
.tag,
.eyebrow,
.hero-badge,
.label {

    color:
        #ff7bb7 !important;

    background:
        rgba(255,79,163,.12) !important;

    border:
        1px solid
        rgba(255,79,163,.18) !important;

    box-shadow:
        inset 0 0 18px
        rgba(255,79,163,.04);
}


/* ========================================
   GLASS CARDS
======================================== */

.card,
.category-card,
.coloring-card,
.story-card,
.generator-card,
.feature-card,
.collection-card,
.empty-card,
.coming-soon-card,
.placeholder-card {

    position: relative;

    overflow: hidden;

    color:
        var(--text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(24,29,43,.80),
            rgba(13,17,27,.74)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    border-radius:
        22px !important;

    backdrop-filter:
        blur(20px);

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

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.25),

        inset 0 1px 0
        rgba(255,255,255,.04);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}


/* glowing top line */

.card::before,
.category-card::before,
.coloring-card::before,
.story-card::before,
.generator-card::before,
.feature-card::before {

    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    top: 0;

    height: 1px;

    opacity: .45;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff5ba9,
            #9d6cff,
            #40b8ff,
            transparent
        );

    transition:
        opacity .25s ease,
        left .25s ease,
        right .25s ease;
}


/* hover */

.card:hover,
.category-card:hover,
.coloring-card:hover,
.story-card:hover,
.generator-card:hover,
.feature-card:hover,
.collection-card:hover {

    transform:
        translateY(-7px)
        scale(1.012);

    border-color:
        rgba(168,108,255,.48) !important;

    background:
        linear-gradient(
            145deg,
            rgba(29,34,51,.94),
            rgba(16,20,32,.90)
        ) !important;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.42),

        0 0 32px
        rgba(147,82,255,.16),

        0 0 70px
        rgba(43,168,255,.07),

        inset 0 0 30px
        rgba(155,104,255,.035);
}


.card:hover::before,
.category-card:hover::before,
.coloring-card:hover::before,
.story-card:hover::before,
.generator-card:hover::before,
.feature-card:hover::before {

    opacity: 1;

    left: 3%;
    right: 3%;

    box-shadow:
        0 0 14px
        rgba(155,104,255,.65);
}


/* ========================================
   CATEGORY CARD ICONS
======================================== */

.category-card {

    min-height: 88px;
}

.category-card:hover {

    cursor: pointer;
}

.category-card:hover img,
.category-card:hover .icon,
.category-card:hover .emoji {

    transform:
        translateY(-3px)
        scale(1.10);

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,255,255,.20)
        );
}


/* ========================================
   COLORING CARDS
======================================== */

.coloring-card img {

    transition:
        transform .35s ease,
        filter .35s ease;
}

.coloring-card:hover img {

    transform:
        scale(1.035);

    filter:
        brightness(1.04);
}


/* white paper remains white */

.coloring-image,
.coloring-image img,
.art-frame img,
.printable-image,
.related-image,
.coloring-card .image,
.coloring-card .image img {

    background:
        white !important;
}


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

button,
.btn,
.button,
.primary-button,
.btn-primary,
.hero-primary {

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


.btn-primary,
.primary-button,
.hero-primary,
button.primary {

    color:
        white !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        linear-gradient(
            135deg,
            #ff4fa3 0%,
            #a65cff 52%,
            #6d66ff 100%
        ) !important;

    box-shadow:
        0 12px 34px
        rgba(180,75,255,.26),

        inset 0 1px 0
        rgba(255,255,255,.20);
}


.btn-primary:hover,
.primary-button:hover,
.hero-primary:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.10);

    box-shadow:
        0 17px 45px
        rgba(255,72,163,.24),

        0 0 32px
        rgba(153,87,255,.24);
}


.btn-secondary,
.secondary-button,
.hero-secondary {

    color:
        #eeeef8 !important;

    background:
        rgba(18,22,33,.72) !important;

    border:
        1px solid
        rgba(255,255,255,.11) !important;

    backdrop-filter:
        blur(12px);
}


.btn-secondary:hover,
.secondary-button:hover,
.hero-secondary:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(120,171,255,.38) !important;

    box-shadow:
        0 0 26px
        rgba(45,156,255,.13);
}


/* ========================================
   INPUTS
======================================== */

input,
textarea,
select {

    color:
        var(--text) !important;

    background:
        rgba(14,18,28,.80) !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.02);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


input:focus,
textarea:focus,
select:focus {

    outline:
        none;

    border-color:
        rgba(155,104,255,.60) !important;

    box-shadow:
        0 0 0 4px
        rgba(155,104,255,.08),

        0 0 24px
        rgba(155,104,255,.08);
}


/* ========================================
   STORY EMPTY CARD
======================================== */

.coming-soon,
.empty-state,
.story-placeholder {

    background:
        linear-gradient(
            145deg,
            rgba(24,29,43,.82),
            rgba(13,17,27,.86)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    box-shadow:
        0 24px 65px
        rgba(0,0,0,.30);
}


/* ========================================
   LINKS
======================================== */

a {
    transition:
        color .2s ease,
        opacity .2s ease;
}


/* ========================================
   FOOTER
======================================== */

footer,
.site-footer {

    background:
        rgba(5,7,12,.85) !important;

    border-top:
        1px solid
        rgba(255,255,255,.07) !important;

    color:
        var(--muted) !important;
}


/* ========================================
   SCROLLBAR
======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background:
        #070910;
}

::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        linear-gradient(
            #49335e,
            #24334c
        );
}

::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            #8e58c9,
            #346ea0
        );
}


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

@media (max-width: 700px) {

    body::before,
    body::after {
        width: 260px;
        height: 260px;
    }

    .card:hover,
    .category-card:hover,
    .coloring-card:hover,
    .story-card:hover {

        transform:
            translateY(-3px);
    }
}


/* accessibility */

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

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;
    }
}


/* =========================================================
   COLORVELLA AI GENERATOR — NEON GLASS
========================================================= */

.generator-form,
.generator-box,
.generator-panel,
.prompt-card,
.ai-form,
form {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(24,29,44,.82),
            rgba(12,16,27,.76)
        ) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        26px !important;

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    box-shadow:
        0 28px 80px rgba(0,0,0,.38),
        0 0 45px rgba(151,85,255,.10),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* Neon border when mouse is over generator */

.generator-form:hover,
.generator-box:hover,
.generator-panel:hover,
.prompt-card:hover,
.ai-form:hover,
form:hover {

    border-color:
        rgba(162,103,255,.45) !important;

    box-shadow:
        0 32px 90px rgba(0,0,0,.45),

        0 0 30px rgba(255,75,163,.10),

        0 0 60px rgba(143,91,255,.13),

        0 0 90px rgba(40,164,255,.07),

        inset 0 1px 0 rgba(255,255,255,.08);
}


/* Prompt textarea */

.generator-form textarea,
.generator-box textarea,
.generator-panel textarea,
.prompt-card textarea,
.ai-form textarea,
form textarea {

    min-height: 145px;

    color:
        #f7f7fb !important;

    background:
        linear-gradient(
            145deg,
            rgba(8,11,18,.88),
            rgba(14,18,29,.88)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius:
        18px !important;

    padding:
        20px !important;

    resize:
        vertical;

    box-shadow:
        inset 0 4px 18px
        rgba(0,0,0,.25);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.generator-form textarea:hover,
.generator-box textarea:hover,
.generator-panel textarea:hover,
.prompt-card textarea:hover,
.ai-form textarea:hover,
form textarea {

    border-color:
        rgba(72,171,255,.30) !important;
}


.generator-form textarea:focus,
.generator-box textarea:focus,
.generator-panel textarea:focus,
.prompt-card textarea:focus,
.ai-form textarea:focus,
form textarea {

    outline:
        none !important;

    border-color:
        rgba(158,102,255,.72) !important;

    box-shadow:
        0 0 0 4px
        rgba(153,92,255,.08),

        0 0 28px
        rgba(153,92,255,.14),

        inset 0 4px 18px
        rgba(0,0,0,.25);
}


textarea::placeholder {

    color:
        #777d8e !important;
}


/* Generate button */

.generator-form button,
.generator-box button,
.generator-panel button,
.prompt-card button,
.ai-form button,
form button {

    min-height:
        48px;

    padding:
        0 24px;

    border:
        1px solid
        rgba(255,255,255,.14) !important;

    border-radius:
        14px !important;

    color:
        white !important;

    font-weight:
        800;

    cursor:
        pointer;

    background:
        linear-gradient(
            110deg,
            #ff4f9f 0%,
            #d758dd 35%,
            #9a62ff 70%,
            #4b8dff 100%
        ) !important;

    box-shadow:
        0 12px 32px
        rgba(190,72,255,.23),

        0 0 24px
        rgba(255,72,160,.10),

        inset 0 1px 0
        rgba(255,255,255,.24);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}


.generator-form button:hover,
.generator-box button:hover,
.generator-panel button:hover,
.prompt-card button:hover,
.ai-form button:hover,
form button:hover {

    transform:
        translateY(-3px)
        scale(1.02);

    filter:
        brightness(1.10);

    box-shadow:
        0 18px 42px
        rgba(185,70,255,.32),

        0 0 26px
        rgba(255,70,161,.22),

        0 0 50px
        rgba(90,110,255,.18);
}


/* Helper text */

.generator-form small,
.generator-box small,
.generator-panel small,
.prompt-card small,
.ai-form small,
form small {

    color:
        #858b9d !important;
}


/* Prevent any white children inside generator */

.generator-form > div,
.generator-box > div,
.generator-panel > div,
.prompt-card > div,
.ai-form > div {

    border-color:
        rgba(255,255,255,.08);
}


/* =========================================================
   COLORING CATALOG — PREMIUM NEON CARDS
========================================================= */

.coloring-grid,
.cards-grid,
.results-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* Card */
.coloring-card {
    position: relative;
    overflow: hidden;

    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(22,27,40,.92),
            rgba(12,16,25,.90)
        ) !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.30);

    transform:
        translateZ(0);

    transition:
        transform .30s cubic-bezier(.2,.8,.2,1),
        border-color .30s ease,
        box-shadow .30s ease;
}


/* RGB neon edge */
.coloring-card::after {
    content: "";
    position: absolute;
    inset: -1px;

    border-radius: inherit;
    padding: 1px;

    background:
        linear-gradient(
            135deg,
            transparent 10%,
            rgba(255,79,163,.55),
            rgba(155,104,255,.55),
            rgba(43,168,255,.45),
            transparent 90%
        );

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

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .30s ease;
}


.coloring-card:hover {
    transform:
        translateY(-10px)
        scale(1.018);

    border-color:
        rgba(163,103,255,.40) !important;

    box-shadow:
        0 28px 80px rgba(0,0,0,.46),
        0 0 32px rgba(255,77,164,.10),
        0 0 55px rgba(139,90,255,.14),
        0 0 80px rgba(43,168,255,.08);
}


.coloring-card:hover::after {
    opacity: 1;
}


/* image area */
.coloring-card .image,
.coloring-card .card-image,
.coloring-card .coloring-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #fff !important;
}


.coloring-card img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform .36s ease,
        filter .36s ease;
}


.coloring-card:hover img {
    transform:
        scale(1.045);

    filter:
        brightness(1.04)
        contrast(1.02);
}


/* soft glow behind art */
.coloring-card .image::after,
.coloring-card .card-image::after {
    content: "";
    position: absolute;

    left: 15%;
    right: 15%;
    bottom: -30px;

    height: 60px;

    background:
        radial-gradient(
            ellipse,
            rgba(150,89,255,.30),
            transparent 70%
        );

    filter: blur(20px);

    opacity: 0;

    transition:
        opacity .3s ease;
}


.coloring-card:hover .image::after,
.coloring-card:hover .card-image::after {
    opacity: 1;
}


/* card body */

.coloring-card .card-body,
.coloring-card .body,
.coloring-card .content {
    padding: 20px !important;
}


.coloring-card h3 {
    margin:
        0 0 10px !important;

    color:
        #f8f8fc !important;

    font-size:
        20px !important;

    line-height:
        1.2;
}


.coloring-card p {
    color:
        #8f95a6 !important;
}


/* CTA inside card */

.coloring-card a.button,
.coloring-card .button,
.coloring-card .btn,
.coloring-card .open-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        14px;

    padding:
        11px 16px;

    border-radius:
        13px;

    color:
        white !important;

    text-decoration:
        none;

    font-weight:
        800;

    background:
        linear-gradient(
            135deg,
            #ff4fa3,
            #9b62ff
        ) !important;

    box-shadow:
        0 9px 22px
        rgba(166,79,255,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.coloring-card:hover a.button,
.coloring-card:hover .button,
.coloring-card:hover .btn,
.coloring-card:hover .open-button {

    box-shadow:
        0 12px 30px
        rgba(178,77,255,.30),
        0 0 22px
        rgba(255,78,166,.15);
}


/* =========================================================
   CATEGORY CARDS
========================================================= */

.category-card {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        96px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        20px 22px !important;

    text-decoration:
        none;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(23,28,42,.82),
            rgba(13,17,27,.78)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.24);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.category-card:hover {

    transform:
        translateY(-6px)
        scale(1.012);

    border-color:
        rgba(156,102,255,.48) !important;

    box-shadow:
        0 23px 60px rgba(0,0,0,.40),
        0 0 30px rgba(157,94,255,.14);
}


/* category glow */

.category-card::after {

    content: "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    right:
        -45px;

    top:
        -45px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(102,161,255,.25),
            transparent 70%
        );

    opacity:
        .35;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.category-card:hover::after {

    opacity:
        .75;

    transform:
        scale(1.4);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .coloring-grid,
    .cards-grid,
    .results-grid {

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


@media (max-width: 620px) {

    .coloring-grid,
    .cards-grid,
    .results-grid {

        grid-template-columns:
            1fr;
    }
}