@import url('/themes/default/assets/css/base.css');

/* ==========================================================
   CHATITALY NEON — V2
   Aggressive cyber/community skin: violet + red + white.
   Scoped to the public theme body class only.
   ========================================================== */

.ct-neon-theme {
    --mv-primary: #a855f7;
    --mv-text: #f8f7ff;
    --mv-muted: #b7b0c8;
    --mv-border: rgba(255,255,255,.11);
    --mv-bg: #05040a;
    --mv-surface: rgba(14,10,24,.88);
    --mv-surface-soft: rgba(27,15,42,.76);
    --mv-radius: 18px;

    --ct-violet: #a855f7;
    --ct-violet-hot: #c026ff;
    --ct-violet-deep: #6d28d9;
    --ct-red: #ff2e55;
    --ct-red-hot: #ff174d;
    --ct-white: #ffffff;
    --ct-ink: #06050b;
    --ct-panel: rgba(14,10,24,.84);
    --ct-panel-strong: rgba(10,7,17,.96);
    --ct-line: rgba(255,255,255,.10);
    --ct-glow-violet: 0 0 34px rgba(168,85,247,.24);
    --ct-glow-red: 0 0 34px rgba(255,46,85,.18);

    min-height: 100vh;
    color: var(--mv-text);
    background:
        radial-gradient(circle at 12% 12%, rgba(168,85,247,.20), transparent 27%),
        radial-gradient(circle at 88% 18%, rgba(255,46,85,.17), transparent 24%),
        radial-gradient(circle at 55% 78%, rgba(105,33,190,.10), transparent 32%),
        linear-gradient(180deg, #050409 0%, #090511 48%, #040308 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

.ct-neon-theme::before,
.ct-neon-theme::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.ct-neon-theme::before {
    z-index: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.70) 62%, transparent 100%);
}

.ct-neon-theme::after {
    z-index: 0;
    inset: -30vh -20vw;
    opacity: .48;
    background:
        radial-gradient(circle at 18% 28%, rgba(168,85,247,.16), transparent 18%),
        radial-gradient(circle at 78% 34%, rgba(255,23,77,.11), transparent 16%),
        radial-gradient(circle at 55% 72%, rgba(122,51,255,.09), transparent 19%);
    filter: blur(12px);
    animation: ct-neon-drift 18s ease-in-out infinite alternate;
}

.ct-neon-theme > header,
.ct-neon-theme > main {
    position: relative;
    z-index: 1;
}

@keyframes ct-neon-drift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    50% { transform: translate3d(1.25%, .5%, 0) scale(1.035); }
    100% { transform: translate3d(-.5%, 1.5%, 0) scale(1.015); }
}

@keyframes ct-neon-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(168,85,247,0), 0 0 26px rgba(168,85,247,.16); }
    50% { box-shadow: 0 0 20px rgba(255,46,85,.11), 0 0 42px rgba(168,85,247,.28); }
}

@keyframes ct-scan {
    0% { transform: translateX(-140%); }
    100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
    .ct-neon-theme::after,
    .ct-neon-theme .mv-hero::before,
    .ct-neon-theme .mv-site-brand-mark,
    .ct-neon-theme .mv-nav-login {
        animation: none !important;
    }
}

/* Typography + links */
.ct-neon-theme ::selection {
    color: #fff;
    background: rgba(168,85,247,.70);
}

.ct-neon-theme a {
    color: #d7a8ff;
    text-decoration-color: rgba(192,38,255,.45);
}

.ct-neon-theme a:hover {
    color: #fff;
    text-decoration-color: var(--ct-red);
}

.ct-neon-theme h1,
.ct-neon-theme h2,
.ct-neon-theme h3,
.ct-neon-theme h4,
.ct-neon-theme h5,
.ct-neon-theme h6,
.ct-neon-theme strong {
    color: #fff;
}

/* Forms */
.ct-neon-theme input:where(
    :not([type="checkbox"])
    :not([type="radio"])
    :not([type="button"])
    :not([type="submit"])
    :not([type="reset"])
),
.ct-neon-theme select,
.ct-neon-theme textarea {
    color: #fff;
    background: rgba(5,3,10,.84);
    border-color: rgba(214,168,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.ct-neon-theme input::placeholder,
.ct-neon-theme textarea::placeholder {
    color: #7f778f;
}

.ct-neon-theme input:focus,
.ct-neon-theme select:focus,
.ct-neon-theme textarea:focus {
    outline: none;
    border-color: rgba(192,38,255,.74);
    box-shadow:
        0 0 0 3px rgba(168,85,247,.12),
        0 0 28px rgba(168,85,247,.10);
}

/* Buttons */
.ct-neon-theme button,
.ct-neon-theme .mv-button {
    color: #fff;
    background: linear-gradient(118deg, #7c3aed 0%, #b31cff 48%, #ff2451 100%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    box-shadow:
        0 10px 26px rgba(124,58,237,.20),
        0 0 24px rgba(255,36,81,.08);
    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.ct-neon-theme button:hover,
.ct-neon-theme .mv-button:hover {
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.08);
    border-color: rgba(255,255,255,.30);
    box-shadow:
        0 14px 34px rgba(124,58,237,.28),
        0 0 30px rgba(255,36,81,.16);
}

.ct-neon-theme button:active,
.ct-neon-theme .mv-button:active {
    transform: translateY(0);
}

/* Header */
.ct-neon-theme .mv-site-header {
    background:
        linear-gradient(90deg, rgba(7,4,13,.88), rgba(18,8,28,.80), rgba(10,4,12,.90));
    border-bottom: 1px solid rgba(210,160,255,.12);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
        0 16px 44px rgba(0,0,0,.34),
        0 1px 0 rgba(255,255,255,.025) inset;
}

.ct-neon-theme .mv-site-header::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a855f7, #ff2e55, transparent);
    opacity: .78;
    filter: drop-shadow(0 0 7px rgba(168,85,247,.65));
}

.ct-neon-theme .mv-site-header-inner {
    width: min(1280px, calc(100% - 38px));
    height: 78px;
}

.ct-neon-theme .mv-site-brand {
    gap: 12px;
}

.ct-neon-theme .mv-site-brand-mark {
    color: #fff;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.20), transparent 24%),
        linear-gradient(145deg, #8b2cf5, #d319f4 52%, #ff244f);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        0 0 24px rgba(168,85,247,.30),
        0 0 42px rgba(255,46,85,.12);
    animation: ct-neon-pulse 4s ease-in-out infinite;
}

.ct-neon-theme .mv-site-brand-copy strong {
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.03em;
    text-shadow: 0 0 20px rgba(168,85,247,.18);
}

.ct-neon-theme .mv-site-brand-copy small {
    color: #9d93ae;
}

.ct-neon-theme .mv-site-nav a,
.ct-neon-theme .mv-mydoge-nav-toggle {
    color: #d0c8dc;
    font-weight: 720;
}

.ct-neon-theme .mv-site-nav a:hover,
.ct-neon-theme .mv-mydoge-nav-toggle:hover,
.ct-neon-theme .mv-site-nav a.is-active {
    color: #fff;
    text-shadow: 0 0 18px rgba(192,38,255,.28);
}

.ct-neon-theme .mv-site-nav a.is-active::after {
    height: 3px;
    bottom: -27px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8b5cf6, #c026ff 52%, #ff2e55);
    box-shadow:
        0 0 8px rgba(192,38,255,.9),
        0 0 18px rgba(255,46,85,.55);
}

.ct-neon-theme .mv-nav-login {
    color: #fff !important;
    padding: 10px 19px;
    background: linear-gradient(110deg, #7c3aed, #c026ff 52%, #ff2e55);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    box-shadow: 0 0 28px rgba(168,85,247,.24);
    animation: ct-neon-pulse 5s ease-in-out infinite;
}

.ct-neon-theme .mv-nav-toggle {
    color: #fff;
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.12);
    border-radius: 12px;
}

.ct-neon-theme .mv-nav-toggle span {
    background: #fff;
}

/* Main canvas */
.ct-neon-theme > main,
.ct-neon-theme main#main-content {
    width: min(1280px, calc(100% - 34px));
    max-width: none;
    margin: 0 auto;
    padding: 36px 0 118px;
}

/* Hero */
.ct-neon-theme .mv-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 5.6vw, 68px);
    margin-bottom: 26px;
    color: #fff;
    background:
        radial-gradient(circle at 14% 16%, rgba(168,85,247,.24), transparent 30%),
        radial-gradient(circle at 88% 28%, rgba(255,46,85,.18), transparent 28%),
        linear-gradient(130deg, rgba(21,10,34,.97), rgba(7,4,12,.97) 58%, rgba(18,5,17,.96));
    border: 1px solid rgba(218,176,255,.16);
    border-radius: 28px;
    box-shadow:
        0 28px 90px rgba(0,0,0,.42),
        0 0 56px rgba(168,85,247,.07),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.ct-neon-theme .mv-hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 22%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: ct-scan 7.5s linear infinite;
}

.ct-neon-theme .mv-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -250px;
    bottom: -330px;
    border-radius: 50%;
    border: 1px solid rgba(255,46,85,.24);
    box-shadow:
        0 0 80px rgba(255,46,85,.12),
        inset 0 0 100px rgba(168,85,247,.08);
}

.ct-neon-theme .mv-hero h1 {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(38px, 6.4vw, 74px);
    font-weight: 950;
    line-height: .94;
    letter-spacing: -.06em;
    text-shadow:
        0 0 28px rgba(168,85,247,.20),
        0 0 48px rgba(255,46,85,.07);
}

.ct-neon-theme .mv-hero p {
    position: relative;
    z-index: 1;
    max-width: 760px;
    color: #bdb4cb;
    font-size: clamp(16px, 2vw, 20px);
}

/* Generic cards / dropdowns */
.ct-neon-theme .mv-card,
.ct-neon-theme .mv-mydoge-dropdown {
    color: var(--mv-text);
    background:
        linear-gradient(145deg, rgba(22,13,34,.90), rgba(8,5,14,.90));
    border-color: rgba(255,255,255,.10);
    box-shadow:
        0 18px 52px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.ct-neon-theme .mv-card {
    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}

.ct-neon-theme .mv-card:hover {
    transform: translateY(-3px);
    border-color: rgba(192,38,255,.28);
    box-shadow:
        0 24px 64px rgba(0,0,0,.34),
        0 0 32px rgba(168,85,247,.08),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.ct-neon-theme .mv-card p {
    color: var(--mv-muted);
}

/* Alerts */
.ct-neon-theme .mv-alert-danger {
    color: #ffdce3;
    background: rgba(255,46,85,.10);
    border-color: rgba(255,46,85,.28);
}

/* Scrollbar */
.ct-neon-theme ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ct-neon-theme ::-webkit-scrollbar-track {
    background: #050409;
}

.ct-neon-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(#8b5cf6, #ff2e55);
    border: 2px solid #050409;
    border-radius: 999px;
}

/* Mobile */
@media (max-width: 799px) {
    .ct-neon-theme .mv-site-header-inner {
        width: min(100% - 22px, 1280px);
        height: 68px;
    }

    .ct-neon-theme .mv-site-nav {
        background: rgba(7,4,12,.98);
        border-color: rgba(255,255,255,.10);
        box-shadow:
            0 22px 55px rgba(0,0,0,.48),
            0 0 34px rgba(168,85,247,.08);
    }

    .ct-neon-theme > main,
    .ct-neon-theme main#main-content {
        width: min(100% - 20px, 1280px);
        padding-top: 22px;
    }

    .ct-neon-theme .mv-hero {
        border-radius: 22px;
    }
}

/* ==========================================================
   CHATITALY NEON v2.2 — compact first viewport
   ========================================================== */
.ct-neon-theme .mv-site-header-inner {
    height: 68px;
}

.ct-neon-theme .mv-site-nav a.is-active::after {
    bottom: -22px;
}

.ct-neon-theme > main,
.ct-neon-theme main#main-content {
    padding-top: 18px;
}

@media (max-width: 799px) {
    .ct-neon-theme .mv-site-header-inner {
        height: 62px;
    }

    .ct-neon-theme > main,
    .ct-neon-theme main#main-content {
        padding-top: 10px;
    }
}

/* ==========================================================
   CHATITALY NEON v2.4.1 — mobile navigation stacking fix
   Keep the sticky header and its mobile dropdown above all
   page widgets, including standalone custom HTML effects.
   ========================================================== */
.ct-neon-theme > header.mv-site-header {
    position: sticky;
    top: 0;
    z-index: 5000;
}

.ct-neon-theme > main,
.ct-neon-theme main#main-content {
    position: relative;
    z-index: 1;
}

@media (max-width: 820px) {
    .ct-neon-theme .mv-site-header-inner {
        position: relative;
        z-index: 5200;
    }

    .ct-neon-theme .mv-nav-toggle {
        position: relative;
        z-index: 5300;
    }

    .ct-neon-theme .mv-site-nav {
        z-index: 5100;
        top: 62px;
        max-height: calc(100dvh - 62px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}