@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    direction: rtl;

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;

    color: #fff;

    min-height: 100vh;

    background:
        radial-gradient(
            ellipse at 50% 8%,
            rgba(132, 36, 229, .18),
            transparent 35%
        ),

        radial-gradient(
            ellipse at 0% 50%,
            rgba(91, 25, 166, .12),
            transparent 35%
        ),

        radial-gradient(
            ellipse at 100% 80%,
            rgba(172, 48, 246, .10),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #030107,
            #08020f 35%,
            #10031b 65%,
            #030107
        );

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =====================================================
   BACKGROUND
===================================================== */

.background {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -10;
}

.background::before {
    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(166, 52, 255, .08),
            transparent 28%
        ),

        radial-gradient(
            circle at 25% 75%,
            rgba(119, 38, 207, .06),
            transparent 30%
        );

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


.glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

    opacity: .28;

    animation:
        glowMove
        12s ease-in-out infinite;
}

.glow-one {
    width: 430px;
    height: 430px;

    top: 5%;
    right: -180px;

    background:
        rgba(137, 35, 225, .45);
}

.glow-two {
    width: 380px;
    height: 380px;

    bottom: 15%;
    left: -160px;

    background:
        rgba(99, 25, 182, .35);

    animation-delay: -4s;
}

.glow-three {
    width: 330px;
    height: 330px;

    top: 45%;
    left: 45%;

    background:
        rgba(187, 55, 255, .18);

    animation-delay: -7s;
}


/* =====================================================
   STARS
===================================================== */

.stars {
    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:

        radial-gradient(
            circle,
            rgba(255,255,255,.8) 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle,
            rgba(200,120,255,.7) 1px,
            transparent 1.5px
        );

    background-size:
        120px 120px,
        190px 190px;

    animation:
        starMove
        35s linear infinite;
}


/* =====================================================
   PARTICLES
===================================================== */

.particle {
    position: absolute;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 5px #fff,
        0 0 12px #bd61ff,
        0 0 22px rgba(174,64,255,.7);

    opacity: 0;

    animation:
        particleFloat
        8s ease-in-out infinite;
}


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

.header {
    position: sticky;

    top: 0;

    z-index: 100;

    padding: 13px 0;

    background:
        rgba(4, 1, 9, .72);

    border-bottom:
        1px solid rgba(198, 91, 255, .10);

    backdrop-filter:
        blur(22px);

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

    box-shadow:
        0 10px 45px rgba(0,0,0,.30);
}

.header-inner {
    width: 92%;

    max-width: 1280px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


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

.logo {
    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;
}

.logo-icon {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(192,66,255,.24),
            rgba(77,18,125,.12)
        );

    border:
        1px solid rgba(218,126,255,.22);

    box-shadow:
        0 0 30px rgba(165,45,255,.18),
        inset 0 0 20px rgba(190,70,255,.08);

    font-size: 25px;
}

.logo-text {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.logo-text small {
    color: #93879d;

    font-size: 10px;
}

.logo-text strong {
    color: #ffd66c;

    font-size: 16px;

    text-shadow:
        0 0 18px rgba(255,205,91,.22);
}


/* =====================================================
   MENU
===================================================== */

.menu {
    display: flex;

    align-items: center;

    gap: 3px;

    padding: 5px;

    border-radius: 17px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.05);
}

.menu a {
    padding: 9px 12px;

    border-radius: 12px;

    color: #b7acbf;

    font-size: 12px;

    transition:
        .3s ease;
}

.menu a:hover,
.menu a.active {
    color: #fff;

    background:
        rgba(165,47,255,.15);

    box-shadow:
        0 0 25px rgba(152,40,255,.08);
}


/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    width: 92%;

    max-width: 1280px;

    min-height: 590px;

    margin: 25px auto 0;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;

    border-radius: 35px;

    background:
        radial-gradient(
            circle at center,
            rgba(125,31,214,.17),
            transparent 43%
        ),

        linear-gradient(
            180deg,
            rgba(25,5,39,.20),
            rgba(0,0,0,.15)
        );

    border:
        1px solid rgba(190,78,255,.07);

    box-shadow:
        inset 0 0 120px rgba(142,36,226,.05),
        0 30px 100px rgba(0,0,0,.18);
}

.hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(164,48,255,.18),
            rgba(112,25,189,.08) 35%,
            transparent 70%
        );

    filter: blur(20px);

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

.hero-light {
    position: absolute;

    width: 340px;
    height: 340px;

    background:
        radial-gradient(
            circle,
            rgba(199,72,255,.18),
            transparent 70%
        );

    filter: blur(35px);

    animation:
        heroLight
        6s ease-in-out infinite alternate;
}

.hero-content {
    position: relative;

    z-index: 2;

    padding: 70px 20px;
}

.welcome {
    margin-bottom: 24px;

    color: #e19aff;

    font-size: 14px;

    text-shadow:
        0 0 20px rgba(197,85,255,.35);
}

.hero h1 {
    font-size:
        clamp(50px, 7vw, 100px);

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -3px;

    color: #fff;

    text-shadow:

        0 0 5px #fff,

        0 0 12px rgba(255,255,255,.95),

        0 0 28px rgba(206,104,255,.85),

        0 0 60px rgba(145,42,255,.65),

        0 0 110px rgba(125,30,218,.35);

    margin-bottom: 28px;
}

.hero h1 span {
    display: inline-block;

    color: #fff;

    text-shadow:

        0 0 7px #fff,

        0 0 25px rgba(219,126,255,.9),

        0 0 65px rgba(156,47,255,.75);
}

.hero-description {
    color: #c4b7cc;

    font-size: 16px;

    line-height: 2.3;

    margin-bottom: 32px;
}


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

.hero-buttons {
    display: flex;

    justify-content: center;

    gap: 12px;
}

.btn {
    min-width: 175px;

    padding: 14px 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 15px;

    font-size: 13px;

    font-weight: 700;

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

.btn:hover {
    transform:
        translateY(-4px);
}

.primary {
    background:
        linear-gradient(
            135deg,
            #be42ff,
            #7622d0
        );

    box-shadow:
        0 12px 35px rgba(151,38,255,.30),
        0 0 30px rgba(166,46,255,.12);
}

.primary:hover {
    box-shadow:
        0 18px 55px rgba(160,42,255,.48),
        0 0 35px rgba(176,51,255,.18);
}

.secondary {
    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(200,100,255,.20);

    color: #e2d4e8;
}


/* =====================================================
   SECTION
===================================================== */

.section {
    width: 92%;

    max-width: 1280px;

    margin:
        110px auto;
}

.section-title {
    text-align: center;

    margin-bottom: 45px;
}

.eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #c86dff;

    font-size: 13px;

    text-shadow:
        0 0 15px rgba(188,73,255,.25);
}

.section-title h2 {
    font-size: 40px;

    font-weight: 800;

    margin-bottom: 10px;

    text-shadow:
        0 0 35px rgba(165,48,255,.18);
}

.section-title p {
    color: #8e8296;

    font-size: 13px;
}


/* =====================================================
   BOOKS
===================================================== */

.books {
    display: grid;

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

    gap: 25px;

    max-width: 1000px;

    margin: auto;
}

.book-card {
    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.012)
        );

    border:
        1px solid rgba(255,255,255,.075);

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

    transition:
        .4s ease;
}

.book-card:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(194,75,255,.30);

    box-shadow:
        0 30px 90px rgba(99,26,145,.24),
        0 0 35px rgba(160,45,255,.07);
}

.book-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #35104f,
            #09020e
        );
}

.book-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .6s ease;
}

.book-card:hover .book-image img {
    transform:
        scale(1.06);
}

.book-image.no-image {
    background:
        radial-gradient(
            circle,
            rgba(168,50,255,.30),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            #35104f,
            #09020e
        );
}

.book-image.no-image::after {
    content: "📖";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    font-size: 75px;
}

.image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            transparent 45%,
            rgba(0,0,0,.72)
        );
}

.book-icon {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background:
        rgba(5,1,10,.70);

    backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(216,119,255,.18);

    box-shadow:
        0 0 25px rgba(169,48,255,.12);
}

.book-genre {
    position: absolute;

    left: 17px;
    bottom: 17px;

    padding: 7px 12px;

    border-radius: 10px;

    background:
        rgba(5,1,10,.70);

    backdrop-filter:
        blur(10px);

    color: #e3a2ff;

    font-size: 11px;
}

.book-content {
    padding: 25px;
}

.book-label {
    color: #a45ac8;

    font-size: 11px;
}

.book-content h3 {
    margin:
        7px 0 12px;

    font-size: 25px;
}

.book-content p {
    min-height: 55px;

    color: #95899e;

    font-size: 13px;

    line-height: 2.1;

    margin-bottom: 22px;
}

.book-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}

.genre {
    color: #9d8da6;

    font-size: 11px;
}

.read-button {
    padding: 10px 16px;

    border-radius: 12px;

    background:
        rgba(171,50,255,.13);

    color: #d98cff;

    font-size: 11px;

    transition: .3s;
}

.read-button:hover {
    background:
        rgba(171,50,255,.25);

    box-shadow:
        0 0 20px rgba(163,46,255,.10);
}


/* =====================================================
   GENRES
===================================================== */

.genres {
    display: grid;

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

    gap: 20px;

    max-width: 1000px;

    margin: auto;
}

.genre-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 27px;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(151,41,225,.025)
        );

    border:
        1px solid rgba(255,255,255,.065);

    transition:
        .35s ease;
}

.genre-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180,53,255,.16),
            transparent 70%
        );
}

.genre-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(190,72,255,.27);

    box-shadow:
        0 25px 60px rgba(89,24,132,.18);
}

.genre-icon {
    width: 65px;
    height: 65px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 19px;

    background:
        rgba(166,45,255,.11);

    border:
        1px solid rgba(204,102,255,.12);

    font-size: 28px;
}

.genre-content {
    position: relative;

    z-index: 2;
}

.genre-content h3 {
    font-size: 20px;

    margin-bottom: 6px;
}

.genre-content p {
    color: #8f8298;

    font-size: 12px;
}

.genre-arrow {
    margin-right: auto;

    color: #c25aff;

    font-size: 20px;
}


/* =====================================================
   ABOUT
===================================================== */

.about-box {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 40px;

    align-items: center;

    padding: 50px;

    border-radius: 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(155,43,235,.10),
            transparent 40%
        ),

        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.065);

    box-shadow:
        0 30px 90px rgba(0,0,0,.18);
}

.about-content h2 {
    font-size: 34px;

    margin:
        10px 0 20px;
}

.about-content p {
    color: #9a8fa2;

    font-size: 14px;

    line-height: 2.5;

    margin-bottom: 12px;

    max-width: 700px;
}

.about-signature {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    color: #a99baa;

    font-size: 13px;
}

.about-signature strong {
    color: #d27cff;

    text-shadow:
        0 0 20px rgba(197,81,255,.25);
}


/* ABOUT VISUAL */

.about-visual {
    position: relative;

    height: 340px;

    display: grid;

    place-items: center;
}

.moon {
    position: relative;

    z-index: 4;

    width: 130px;
    height: 130px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(213,137,255,.20),
            rgba(132,35,193,.07) 50%,
            transparent 70%
        );

    box-shadow:
        0 0 40px rgba(181,61,255,.18),
        0 0 100px rgba(147,39,221,.13);

    font-size: 65px;

    animation:
        moonFloat
        5s ease-in-out infinite;
}

.about-ring {
    position: absolute;

    border:
        1px solid rgba(191,83,255,.13);

    border-radius: 50%;

    transform:
        rotate(-20deg);
}

.ring-one {
    width: 230px;
    height: 90px;
}

.ring-two {
    width: 290px;
    height: 120px;

    transform:
        rotate(35deg);
}

.floating-word {
    position: absolute;

    color: rgba(217,151,255,.55);

    font-size: 12px;

    animation:
        wordFloat
        5s ease-in-out infinite;
}

.word-one {
    top: 25px;
    right: 15%;
}

.word-two {
    bottom: 45px;
    left: 15%;

    animation-delay: -2s;
}

.word-three {
    top: 50%;
    right: 3%;

    animation-delay: -3s;
}


/* =====================================================
   VIP
===================================================== */

.vip-box {
    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 35px;

    overflow: hidden;

    border-radius: 27px;

    background:
        linear-gradient(
            110deg,
            rgba(122,31,181,.18),
            rgba(36,7,55,.40)
        );

    border:
        1px solid rgba(201,90,255,.16);

    box-shadow:
        0 25px 80px rgba(79,20,115,.16);
}

.vip-shine {
    position: absolute;

    width: 300px;
    height: 300px;

    left: -130px;
    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199,65,255,.18),
            transparent 70%
        );

    filter: blur(15px);
}

.vip-icon {
    position: relative;

    width: 80px;
    height: 80px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 22px;

    background:
        rgba(181,55,255,.12);

    border:
        1px solid rgba(212,117,255,.22);

    box-shadow:
        0 0 35px rgba(177,48,255,.13);

    font-size: 37px;
}

.vip-text {
    flex: 1;
}

.vip-text span {
    color: #d078ff;

    font-size: 12px;
}

.vip-text h2 {
    font-size: 25px;

    margin: 5px 0;
}

.vip-text p {
    color: #94879e;

    font-size: 12px;

    line-height: 2;
}

.vip-button {
    position: relative;

    padding: 13px 21px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #b73dff,
            #7421cb
        );

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 12px 35px rgba(145,38,235,.25);

    transition: .3s;
}

.vip-button:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px rgba(153,41,245,.38);
}


/* =====================================================
   FINAL
===================================================== */

.final {
    position: relative;

    width: 92%;

    max-width: 950px;

    margin:
        120px auto;

    padding:
        70px 25px;

    text-align: center;

    overflow: hidden;

    border-radius: 32px;

    background:
        radial-gradient(
            circle at center,
            rgba(146,37,220,.15),
            transparent 65%
        ),

        rgba(255,255,255,.025);

    border:
        1px solid rgba(190,73,255,.11);
}

.final-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(190,59,255,.14),
            transparent 70%
        );

    filter: blur(30px);
}

.final-small {
    position: relative;

    color: #c16cf0;

    font-size: 13px;
}

.final h2 {
    position: relative;

    margin:
        14px 0;

    font-size: 36px;

    text-shadow:
        0 0 30px rgba(173,50,255,.20);
}

.final p {
    position: relative;

    color: #928697;

    font-size: 13px;

    margin-bottom: 28px;
}


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

footer {
    padding:
        55px 20px 30px;

    text-align: center;

    background:
        rgba(2,1,6,.75);

    border-top:
        1px solid rgba(255,255,255,.05);
}

.footer-logo {
    color: #d488ff;

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 8px;
}

footer > p {
    color: #756a7c;

    font-size: 11px;

    margin-bottom: 20px;
}

.footer-links {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 22px;
}

.footer-links a {
    padding:
        7px 11px;

    border-radius: 9px;

    color: #7f7487;

    font-size: 11px;

    transition: .3s;
}

.footer-links a:hover {
    color: #d084ff;

    background:
        rgba(168,45,255,.08);
}

.copyright {
    color: #514957;

    font-size: 10px;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes backgroundPulse {

    0% {
        opacity: .5;
        transform: scale(.95);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes glowMove {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);
    }

    50% {
        transform:
            translate(30px,-35px)
            scale(1.12);
    }
}

@keyframes starMove {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(-100px,-100px);
    }
}

@keyframes particleFloat {

    0% {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.5);
    }

    30% {
        opacity: .7;
    }

    70% {
        opacity: .4;
    }

    100% {
        opacity: 0;

        transform:
            translateY(-45px)
            scale(1.2);
    }
}

@keyframes heroPulse {

    0% {
        transform:
            scale(.85);

        opacity: .5;
    }

    100% {
        transform:
            scale(1.12);

        opacity: 1;
    }
}

@keyframes heroLight {

    0% {
        transform:
            translate(-40px,-25px);

        opacity: .35;
    }

    100% {
        transform:
            translate(50px,35px);

        opacity: .85;
    }
}

@keyframes moonFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }
}

@keyframes wordFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px) {

    .header-inner {
        flex-direction: column;
    }

    .menu {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;
    }

    .about-box {
        grid-template-columns: 1fr;
    }

    .about-visual {
        min-height: 300px;
    }

}


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

@media(max-width:650px) {

    .header {
        padding: 10px 0;
    }

    .header-inner {
        width: 94%;
    }

    .logo {
        justify-content: center;
    }

    .menu {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;

        flex-wrap: nowrap;
    }

    .menu a {
        white-space: nowrap;

        font-size: 10px;

        padding:
            8px 9px;
    }

    .hero {
        width: 94%;

        min-height: 480px;

        border-radius: 25px;
    }

    .hero h1 {
        font-size: 45px;

        letter-spacing: -1px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;

        max-width: 300px;
    }

    .section {
        width: 94%;

        margin:
            75px auto;
    }

    .section-title h2 {
        font-size: 29px;
    }

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

    .book-image {
        height: 390px;
    }

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

    .about-box {
        padding: 30px 22px;
    }

    .about-content {
        text-align: center;
    }

    .about-signature {
        justify-content: center;
    }

    .vip-box {
        flex-direction: column;

        text-align: center;

        padding:
            30px 20px;
    }

    .vip-button {
        width: 100%;

        text-align: center;
    }

    .final {
        width: 94%;

        padding:
            55px 20px;

        margin:
            85px auto;
    }

    .final h2 {
        font-size: 28px;
    }

}


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

@media(max-width:450px) {

    .logo-icon {
        width: 47px;
        height: 47px;

        font-size: 23px;
    }

    .logo-text strong {
        font-size: 14px;
    }

    .hero {
        min-height: 440px;
    }

    .welcome {
        font-size: 12px;
    }

    .hero h1 {
        font-size: 36px;

        line-height: 1.4;
    }

    .hero-description {
        font-size: 12px;

        line-height: 2;
    }

    .section-title h2 {
        font-size: 27px;
    }

    .book-image {
        height: 360px;
    }

    .book-content {
        padding: 21px;
    }

    .book-content h3 {
        font-size: 22px;
    }

    .book-footer {
        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }

    .read-button {
        width: 100%;
    }

    .about-visual {
        height: 280px;
    }

    .moon {
        width: 105px;
        height: 105px;

        font-size: 52px;
    }

    .ring-one {
        width: 190px;
        height: 75px;
    }

    .ring-two {
        width: 230px;
        height: 95px;
    }

}
/* === RomanShop upgrade === */
.auth-card,.admin-wrap,.reader,.chat-card{width:min(92%,900px);margin:70px auto;padding:32px;border:1px solid rgba(190,90,255,.22);border-radius:28px;background:rgba(12,5,20,.78);backdrop-filter:blur(20px);box-shadow:0 25px 80px rgba(0,0,0,.4)}
.auth-card{max-width:430px;text-align:center}.auth-card.wide{max-width:900px}
.auth-card input,.auth-card select,.admin-form input,.admin-form textarea,.request-card input,.chat-card textarea{width:100%;padding:14px;margin:8px 0;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;font:inherit;outline:none}
.auth-card button,.admin-form button,.request-card button,.chat-card button,.button{display:inline-block;width:100%;padding:14px;border:0;border-radius:14px;background:linear-gradient(135deg,#7c28d7,#c04cff);color:#fff;font:inherit;cursor:pointer;text-decoration:none;margin-top:8px}
.big-icon{font-size:60px}.msg{margin:15px 0;color:#ffcf70}.success{padding:15px;border-radius:14px;background:rgba(50,200,120,.12);color:#9dffc6;margin:15px 0}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.admin-grid a{padding:25px;border-radius:20px;background:rgba(255,255,255,.05);color:#fff;text-decoration:none;border:1px solid rgba(190,90,255,.15)}.admin-grid b{float:left;color:#ffd66b}
.request-card,.part-card,.notification{padding:20px;margin:15px 0;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(190,90,255,.12)}
.inline{display:flex;gap:10px}.inline button{width:auto;flex:1}.danger{background:linear-gradient(135deg,#8d233f,#c34b66)!important}
.admin-form textarea{min-height:260px;resize:vertical}.back-link{display:inline-block;margin:10px 0;color:#d6a2ff;text-decoration:none}
.reader .part-card{line-height:2.3}.day{margin:25px 0}.purchase-cover{width:min(100%,320px);max-height:460px;object-fit:cover;border-radius:20px;display:block;margin:15px auto}
.chat-card{max-width:800px}.chat-head{display:flex;align-items:center;gap:18px}.chat-head img{width:80px;height:80px;object-fit:cover;border-radius:20px}.chat-messages{max-height:55vh;overflow:auto;margin:20px 0}.message{padding:14px;margin:10px 0;border-radius:16px}.message.user{background:rgba(140,50,220,.13)}.message.admin{background:rgba(255,190,60,.09)}.chat-card textarea{min-height:120px;resize:vertical}.profile-info{padding:20px;text-align:right;border-radius:18px;background:rgba(255,255,255,.04)}
.demo-pay{padding:18px;margin:15px 0;border:1px dashed #d67bff;border-radius:16px;color:#e5b7ff}
@media(max-width:650px){.admin-grid{grid-template-columns:1fr}.auth-card,.admin-wrap,.reader,.chat-card{margin:30px auto;padding:22px}.inline{flex-direction:column}}

/* =====================================================
   NEW HEADER ACTIONS
===================================================== */
.menu .account-link,
.menu .admin-link {
    border: 1px solid rgba(190, 95, 255, .18);
    color: #eee;
}

.menu .register-link {
    background: linear-gradient(135deg, rgba(183, 57, 255, .20), rgba(255,255,255,.04));
    color: #f0cfff;
}

.menu .admin-link {
    background: rgba(255,255,255,.035);
}

.menu .account-link:hover,
.menu .admin-link:hover {
    border-color: rgba(210, 119, 255, .45);
    color: #fff;
    box-shadow: 0 0 22px rgba(169, 54, 255, .16);
}

/* =====================================================
   WHITE / BLACK / PURPLE TEXT SWITCH
===================================================== */
.color-switch-title,
.color-switch-title span {
    animation: titleColorSwitch 5.5s ease-in-out infinite;
}

.color-switch-title span {
    animation-delay: 1.4s;
}

@keyframes titleColorSwitch {
    0%, 100% {
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 25px rgba(255,255,255,.25), 0 0 55px rgba(160,45,255,.35);
    }
    33% {
        color: #c879ff;
        text-shadow: 0 0 8px rgba(200,121,255,.95), 0 0 28px rgba(172,55,255,.75), 0 0 65px rgba(132,28,220,.45);
    }
    66% {
        color: #09070d;
        -webkit-text-stroke: 1px rgba(255,255,255,.75);
        text-shadow: 0 0 5px rgba(255,255,255,.5), 0 0 20px rgba(0,0,0,.95), 0 0 45px rgba(165,48,255,.65);
    }
}

/* =====================================================
   SUPPORT NOTIFICATION - RIGHT SIDE
===================================================== */
.support-float {
    position: fixed;
    top: 135px;
    right: 20px;
    z-index: 150;
    width: min(330px, calc(100vw - 30px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    border: 1px solid rgba(206, 111, 255, .25);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(28, 7, 43, .94), rgba(7, 4, 12, .94));
    box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 0 35px rgba(164, 49, 255, .16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: supportIn .7s ease both, supportFloat 5s ease-in-out 1s infinite;
}

.support-float.is-hidden {
    display: none;
}

.support-avatar {
    position: relative;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    overflow: hidden;
    border: 1px solid rgba(220, 139, 255, .35);
    background: rgba(255,255,255,.04);
}

.support-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.support-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 12px;
}

.support-body strong {
    color: #fff;
    font-size: 12px;
}

.support-body span {
    color: #bcaac5;
    font-size: 11px;
}

.support-body a {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(177, 53, 255, .14);
    color: #d99bff;
    font-size: 10px;
}

.support-close {
    position: absolute;
    top: 7px;
    left: 8px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #bcaac5;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.support-close:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
}

.support-pulse {
    position: absolute;
    right: 10px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b94cff;
    box-shadow: 0 0 0 0 rgba(185,76,255,.6);
    animation: supportPulse 2s infinite;
}

@keyframes supportPulse {
    70% { box-shadow: 0 0 0 9px rgba(185,76,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(185,76,255,0); }
}

@keyframes supportIn {
    from { opacity: 0; transform: translateX(35px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes supportFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* =====================================================
   BOOK COVER FIT - SHOW THE WHOLE IMAGE
===================================================== */
.book-image {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(145, 47, 210, .18), rgba(5,2,9,.96) 72%);
}

.book-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
}

.image-shade {
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 55%, rgba(0,0,0,.55));
}

/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 900px) {
    .header-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .logo {
        justify-content: center;
    }

    .menu {
        justify-content: center;
        flex-wrap: wrap;
    }

    .support-float {
        top: auto;
        bottom: 18px;
        right: 15px;
        left: 15px;
        width: auto;
    }
}

@media (max-width: 450px) {
    .menu a {
        padding: 8px 9px;
        font-size: 10px;
    }

    .hero h1 {
        font-size: 37px;
        letter-spacing: -1px;
    }

    .book-image {
        height: 390px;
    }

    .book-image img {
        padding: 6px;
    }
}

/* =====================================================
   PREMIUM TYPOGRAPHY / HERO ANIMATION
===================================================== */
body, button, input, textarea, select {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

.color-switch-title {
    position: relative;
    isolation: isolate;
}

.color-switch-title > span {
    display: inline-block;
    transition: color .55s ease, text-shadow .55s ease, filter .55s ease, transform .55s ease;
}

.title-white { color: #fff !important; text-shadow: 0 0 10px rgba(255,255,255,.65), 0 0 28px rgba(180,80,255,.55), 0 0 60px rgba(80,180,255,.25); }
.title-purple { color: #c76cff !important; text-shadow: 0 0 10px rgba(199,108,255,.9), 0 0 32px rgba(142,58,255,.75), 0 0 70px rgba(255,55,210,.25); }
.title-black { color: #09030d !important; text-shadow: 0 0 2px rgba(255,255,255,.85), 0 0 16px rgba(199,108,255,.8), 0 0 35px rgba(90,150,255,.35); }

.hero-typing-mode { animation: titleTypingGlow .8s ease-in-out infinite alternate; }
.typing-cursor { display:inline-block; width:4px; height:.9em; margin-right:10px; vertical-align:-.05em; background:#c76cff; border-radius:4px; opacity:0; box-shadow:0 0 14px #c76cff; }
.typing-cursor.active { opacity:1; animation: cursorBlink .7s steps(1) infinite; }
@keyframes cursorBlink { 50% { opacity:.15; } }
@keyframes titleTypingGlow { from { filter:brightness(.95); } to { filter:brightness(1.35); transform:translateY(-2px); } }

/* =====================================================
   PREMIUM AUTH PAGES
===================================================== */
.auth-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:30px 16px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 20% 20%, rgba(196,70,255,.24), transparent 28%),
      radial-gradient(circle at 85% 80%, rgba(67,119,255,.18), transparent 30%),
      linear-gradient(145deg,#040107,#10031a 45%,#030108);
}
.auth-orb { position:fixed; width:360px; height:360px; border-radius:50%; filter:blur(85px); opacity:.25; pointer-events:none; animation:authFloat 10s ease-in-out infinite alternate; }
.auth-orb.a { top:-120px; right:-100px; background:#bf45ff; }
.auth-orb.b { bottom:-150px; left:-100px; background:#477cff; animation-delay:-4s; }
@keyframes authFloat { to { transform:translate3d(25px,-18px,0) scale(1.08); } }
.premium-auth {
    width:min(100%,520px);
    position:relative;
    padding:42px 38px 34px;
    border:1px solid rgba(222,145,255,.25);
    border-radius:32px;
    background:linear-gradient(145deg,rgba(28,13,39,.93),rgba(7,4,12,.96));
    box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 0 45px rgba(190,80,255,.05), 0 0 70px rgba(144,50,255,.12);
    backdrop-filter:blur(24px);
}
.auth-brand { display:flex; align-items:center; gap:10px; color:#e8d9ee; margin-bottom:24px; font-size:15px; }
.auth-brand span { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(190,72,255,.25),rgba(71,111,255,.15));box-shadow:0 0 28px rgba(181,69,255,.18); }
.auth-icon { width:70px;height:70px;display:grid;place-items:center;margin:0 auto 15px;border-radius:22px;font-size:31px;background:linear-gradient(135deg,rgba(196,74,255,.2),rgba(68,117,255,.12));border:1px solid rgba(217,137,255,.25);box-shadow:0 0 35px rgba(184,65,255,.18); }
.premium-auth h1 { text-align:center; color:#fff; font-size:31px; margin-bottom:8px; text-shadow:0 0 24px rgba(194,89,255,.3); }
.auth-subtitle { text-align:center; color:#a99eaf; line-height:2; margin-bottom:26px; }
.premium-auth form { display:grid; gap:14px; }
.premium-auth label { color:#d8cce0; font-size:13px; display:grid; gap:7px; }
.premium-auth input { width:100%; border:1px solid rgba(207,128,255,.16); background:rgba(255,255,255,.045); color:#fff; padding:14px 16px; border-radius:15px; outline:none; transition:.25s; }
.premium-auth input:focus { border-color:rgba(207,128,255,.65); box-shadow:0 0 0 4px rgba(183,76,255,.08),0 0 25px rgba(183,76,255,.12); }
.auth-submit { border:0; cursor:pointer; padding:14px 18px; border-radius:16px; color:#fff; font-weight:800; font-size:15px; background:linear-gradient(135deg,#8d3ad2,#c568ff 55%,#5b7dff); box-shadow:0 12px 32px rgba(132,53,205,.28); transition:.25s; }
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 17px 38px rgba(132,53,205,.38); }
.auth-message { min-height:24px; color:#d9bfe6; text-align:center; margin:12px 0 6px; }
.auth-links.split { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; }
.auth-links a { color:#cda2e0; font-size:13px; transition:.2s; }
.auth-links a:hover { color:#fff; text-shadow:0 0 16px rgba(205,111,255,.7); }
.back-home { display:block; text-align:center; margin-top:22px; color:#827689; font-size:12px; }

/* =====================================================
   PREMIUM ACCOUNT MANAGEMENT
===================================================== */
.account-page { min-height:100vh; position:relative; overflow-x:hidden; }
.account-orb { position:fixed; width:380px;height:380px;border-radius:50%;filter:blur(100px);opacity:.16;pointer-events:none;z-index:-1; }
.orb-a { top:10%;right:-180px;background:#bd4dff; }
.orb-b { bottom:0;left:-180px;background:#497bff; }
.account-shell { width:min(1120px,92%); margin:0 auto; padding:60px 0 90px; }
.account-hero { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:30px;border:1px solid rgba(212,132,255,.22);border-radius:30px;background:linear-gradient(145deg,rgba(33,16,45,.88),rgba(8,5,13,.94));box-shadow:0 25px 75px rgba(0,0,0,.4),0 0 50px rgba(158,55,230,.09); }
.account-avatar { width:78px;height:78px;display:grid;place-items:center;border-radius:24px;font-size:34px;background:linear-gradient(135deg,rgba(195,76,255,.22),rgba(73,116,255,.13));border:1px solid rgba(220,139,255,.28);box-shadow:0 0 32px rgba(190,65,255,.18); }
.account-kicker { color:#a985b5;font-size:12px; }
.account-hero h1 { margin:5px 0 7px;color:#fff;font-size:31px; }
.account-hero p { color:#a99ead;line-height:1.9; }
.account-status { padding:10px 16px;border-radius:30px;font-size:13px;white-space:nowrap; }
.account-status.is-vip { color:#ffe3a0;background:rgba(218,170,65,.11);border:1px solid rgba(218,170,65,.3);box-shadow:0 0 25px rgba(218,170,65,.08); }
.account-status.is-normal { color:#c8b8cf;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); }
.account-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px; }
.account-card { padding:27px;border-radius:25px;background:linear-gradient(145deg,rgba(25,14,35,.88),rgba(8,5,12,.95));border:1px solid rgba(207,121,255,.16);box-shadow:0 18px 55px rgba(0,0,0,.25); }
.card-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(192,73,255,.11);border:1px solid rgba(212,129,255,.16);font-size:21px;margin-bottom:14px; }
.account-card h2 { color:#f4eafa;font-size:20px;margin-bottom:17px; }
.account-data { display:grid;gap:10px; }
.account-data div { display:flex;justify-content:space-between;gap:20px;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.035); }
.account-data span { color:#8e8396;font-size:12px; }.account-data b { color:#ddd1e4;font-size:13px;max-width:65%;overflow:hidden;text-overflow:ellipsis; }
.quick-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.quick-actions a { padding:14px;border-radius:14px;color:#ddd0e4;background:rgba(255,255,255,.04);border:1px solid rgba(208,123,255,.1);transition:.25s; }.quick-actions a:hover { transform:translateY(-2px);background:rgba(192,72,255,.1);border-color:rgba(208,123,255,.3); }
.help-card { margin-top:20px; }.help-heading { display:flex;gap:14px;align-items:center; }.help-heading .card-icon { margin:0; }.help-heading h2 { margin-bottom:4px; }.help-heading p { color:#94899a;font-size:13px; }
.issue-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px; }.issue-grid form { margin:0; }.issue-btn { width:100%;min-height:145px;padding:20px;text-align:right;border-radius:18px;border:1px solid rgba(210,123,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:.25s; }.issue-btn:hover { transform:translateY(-4px);border-color:rgba(210,123,255,.4);box-shadow:0 15px 35px rgba(134,48,187,.14); }.issue-btn span { font-size:28px; }.issue-btn b { font-size:15px; }.issue-btn small { color:#8f8496;line-height:1.7; }.issue-btn.other { text-decoration:none; }
.notifications-card { margin-top:20px; }.notification { margin-top:10px;padding:14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06); }.notification b{color:#dfc5eb}.notification p{color:#a79aaa;margin-top:5px;line-height:1.8}

/* =====================================================
   PREMIUM SUPPORT CHAT
===================================================== */
.support-page { min-height:100vh;display:grid;place-items:center;padding:30px 15px;background:radial-gradient(circle at 30% 20%,rgba(190,68,255,.18),transparent 32%),radial-gradient(circle at 80% 80%,rgba(67,119,255,.14),transparent 30%),linear-gradient(145deg,#040107,#0e0317,#030108); }
.chat-card { width:min(850px,100%);padding:22px;border-radius:28px;background:rgba(12,7,17,.9);border:1px solid rgba(210,126,255,.18);box-shadow:0 30px 90px rgba(0,0,0,.5);backdrop-filter:blur(20px); }
.chat-head { display:flex;align-items:center;gap:16px;padding:18px;border-radius:20px;background:linear-gradient(135deg,rgba(190,70,255,.11),rgba(67,119,255,.06));border:1px solid rgba(207,125,255,.12); }.chat-head img{width:68px;height:68px;object-fit:cover;border-radius:18px;border:1px solid rgba(220,140,255,.25);}.chat-head span{color:#9c83a9;font-size:12px}.chat-head h1{color:#fff;font-size:22px;margin:4px 0}.chat-head p{color:#9e93a5;font-size:13px}.chat-messages{min-height:280px;max-height:480px;overflow:auto;padding:18px 5px}.message{max-width:80%;padding:12px 15px;margin:10px 0;border-radius:17px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}.message.user{margin-right:auto;background:rgba(150,53,205,.11);}.message.admin{margin-left:auto;background:rgba(67,119,255,.08);}.message b{font-size:12px;color:#d9b5e8}.message p{margin-top:5px;color:#d3c9d8;line-height:1.9}.empty-chat{text-align:center;color:#857a8c;padding:90px 15px}.chat-form{display:grid;gap:10px}.chat-form textarea{min-height:125px;resize:vertical;padding:15px;border-radius:17px;border:1px solid rgba(208,123,255,.15);background:rgba(255,255,255,.04);color:#fff;outline:none}.chat-form textarea:focus{border-color:rgba(208,123,255,.5);box-shadow:0 0 0 4px rgba(185,72,255,.07)}.chat-form button{border:0;border-radius:15px;padding:13px;color:#fff;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#8d3ad2,#c568ff 55%,#5b7dff)}.back-account{display:block;text-align:center;color:#897b91;font-size:12px;margin-top:16px}

@media(max-width:800px){.account-hero{grid-template-columns:auto 1fr}.account-status{grid-column:1/-1;justify-self:start}.account-grid{grid-template-columns:1fr}.issue-grid{grid-template-columns:1fr}.auth-links.split{flex-direction:column;align-items:stretch;text-align:center}.premium-auth{padding:32px 22px}.quick-actions{grid-template-columns:1fr}.chat-head h1{font-size:18px}}
.premium-auth select{width:100%;border:1px solid rgba(207,128,255,.16);background:#140a1d;color:#fff;padding:14px 16px;border-radius:15px;outline:none}.premium-auth select:focus{border-color:rgba(207,128,255,.65);box-shadow:0 0 0 4px rgba(183,76,255,.08)}.premium-auth select option{background:#140a1d;color:#fff}.success-panel{padding:22px;border-radius:18px;text-align:center;color:#ddd0e4;background:rgba(104,211,143,.06);border:1px solid rgba(104,211,143,.2);line-height:2}.success-panel a{color:#d49aff;font-weight:700}

/* =====================================================
   FINAL POLISH - HEADER / SUPPORT / ADMIN
===================================================== */
.menu .account-link,
.menu .admin-link { color:#fff !important; background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(168,68,255,.12)); border:1px solid rgba(210,135,255,.2); }
.menu .account-link:hover,
.menu .admin-link:hover { color:#fff !important; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(171,72,255,.25)); box-shadow:0 0 26px rgba(177,72,255,.22); }
.menu .register-link { color:#ead2ff !important; }

/* Bottom support launcher: perfectly circular image, not a square. */
.support-dock { position:fixed; right:22px; bottom:24px; z-index:500; direction:rtl; }
.support-launcher { position:relative; display:flex; align-items:center; gap:9px; border:1px solid rgba(219,137,255,.35); padding:7px 12px 7px 8px; border-radius:999px; cursor:pointer; color:#fff; background:linear-gradient(135deg,rgba(31,10,46,.96),rgba(8,5,15,.96)); box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 35px rgba(164,53,255,.2); backdrop-filter:blur(18px); font:inherit; }
.support-avatar,.support-chat-avatar { overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#b951ff,#6b57ff); display:grid; place-items:center; flex:0 0 auto; }
.support-launcher .support-avatar { width:54px; height:54px; border:2px solid rgba(255,255,255,.55); box-shadow:0 0 22px rgba(185,80,255,.4); }
.support-avatar img,.support-chat-avatar img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:50%; }
.support-launcher-text { font-size:12px; font-weight:800; padding:0 4px; }
.support-pulse { position:absolute; right:9px; top:8px; width:9px; height:9px; border-radius:50%; background:#67ffb0; box-shadow:0 0 0 0 rgba(103,255,176,.55); animation:supportPulse 2s infinite; z-index:2; }
.support-menu { position:absolute; right:0; bottom:72px; width:min(360px,calc(100vw - 30px)); padding:12px; border:1px solid rgba(218,134,255,.25); border-radius:22px; background:linear-gradient(145deg,rgba(25,8,38,.98),rgba(7,4,13,.98)); box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 45px rgba(169,60,255,.18); backdrop-filter:blur(22px); animation:supportMenuIn .25s ease; }
.support-menu-head { padding:8px 10px 12px; display:flex; flex-direction:column; gap:3px; }
.support-menu-head strong { color:#fff; font-size:14px; }.support-menu-head span{color:#9e90a8;font-size:11px}
.support-menu a { display:flex; align-items:center; gap:10px; padding:13px 12px; margin-top:6px; border-radius:14px; color:#e9ddec; font-size:12px; border:1px solid transparent; background:rgba(255,255,255,.035); transition:.22s; }
.support-menu a:hover { transform:translateX(-3px); color:#fff; border-color:rgba(209,122,255,.3); background:rgba(182,70,255,.11); box-shadow:0 8px 24px rgba(141,45,190,.12); }
@keyframes supportMenuIn { from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }

/* Admin command center */
.admin-page { min-height:100vh; position:relative; overflow-x:hidden; background:radial-gradient(circle at 15% 15%,rgba(185,70,255,.15),transparent 30%),radial-gradient(circle at 85% 80%,rgba(65,119,255,.12),transparent 30%),linear-gradient(145deg,#030107,#0b0313 48%,#030107); }
.admin-shell { width:min(1200px,92%); margin:auto; padding:28px 0 80px; position:relative; z-index:1; }
.admin-bg-orb { position:fixed; width:360px;height:360px;border-radius:50%;filter:blur(100px);opacity:.13;pointer-events:none; }.admin-bg-orb.orb1{top:-120px;right:-100px;background:#ca52ff}.admin-bg-orb.orb2{bottom:-140px;left:-100px;background:#557cff}
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 18px; border:1px solid rgba(215,130,255,.14); border-radius:22px; background:rgba(11,6,17,.72); backdrop-filter:blur(20px); box-shadow:0 18px 50px rgba(0,0,0,.28); }
.admin-brand { display:flex;align-items:center;gap:12px }.admin-brand>span{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#a83cff,#5f68ff);box-shadow:0 0 28px rgba(168,60,255,.25);font-size:22px}.admin-brand small{display:block;color:#8f809a;font-size:10px}.admin-brand strong{display:block;color:#fff;font-size:16px;margin-top:2px}.admin-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.admin-top-actions span{color:#b8a9c0;font-size:11px}.admin-top-actions a{padding:9px 12px;border-radius:11px;color:#d8c7df;font-size:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}.admin-top-actions a:hover{color:#fff;border-color:rgba(209,125,255,.3)}
.admin-page-head { margin:46px 0 22px; display:flex;justify-content:space-between;align-items:end;gap:20px }.admin-kicker{color:#bf70ff;font-size:11px;letter-spacing:1px}.admin-page-head h1{font-size:38px;color:#fff;margin:8px 0 8px;text-shadow:0 0 35px rgba(177,65,255,.22)}.admin-page-head p{color:#918598;font-size:13px;line-height:2}.admin-clock-card{min-width:150px;padding:18px;border-radius:18px;border:1px solid rgba(201,124,255,.16);background:rgba(255,255,255,.035);text-align:center}.admin-clock-card span{display:block;color:#887b91;font-size:10px}.admin-clock-card b{display:block;color:#75ffc0;margin-top:5px;font-size:13px}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.admin-stats>div{padding:20px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(210,126,255,.12);box-shadow:0 16px 45px rgba(0,0,0,.2)}.admin-stats span{font-size:22px}.admin-stats b{display:block;color:#fff;font-size:27px;margin-top:9px}.admin-stats small{color:#887b91;font-size:11px}
.admin-command{margin-top:22px;padding:25px;border-radius:26px;background:rgba(9,5,14,.72);border:1px solid rgba(207,124,255,.12);box-shadow:0 25px 70px rgba(0,0,0,.3)}.admin-section-title span{color:#b86af0;font-size:11px}.admin-section-title h2{color:#f5edf8;font-size:22px;margin-top:5px}.premium-admin-grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.admin-tile{min-height:112px;display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:14px;padding:18px;border-radius:20px;border:1px solid rgba(205,121,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));transition:.25s}.admin-tile>span{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(184,68,255,.1);font-size:24px}.admin-tile b{display:block;color:#fff;font-size:14px}.admin-tile small{display:block;color:#8d8194;font-size:10px;line-height:1.7;margin-top:4px}.admin-tile>strong{color:#d58aff;font-size:20px}.admin-tile:hover{transform:translateY(-4px);border-color:rgba(211,128,255,.3);box-shadow:0 18px 45px rgba(132,46,186,.13)}.admin-tile.logout:hover{border-color:rgba(255,98,132,.3)}
.admin-ticket{margin-top:18px;padding:22px;border-radius:24px;background:linear-gradient(145deg,rgba(20,10,29,.92),rgba(7,4,11,.96));border:1px solid rgba(209,126,255,.14);box-shadow:0 18px 60px rgba(0,0,0,.3)}.admin-ticket.closed{opacity:.72}.admin-ticket-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.ticket-id{color:#a96ad0;font-size:10px}.admin-ticket h2{color:#fff;font-size:18px;margin:5px 0}.admin-ticket-head p{color:#8e8297;font-size:11px}.ticket-status{padding:7px 12px;border-radius:99px;font-size:10px}.ticket-status.open{color:#77ffc1;background:rgba(75,255,167,.07);border:1px solid rgba(75,255,167,.2)}.ticket-status.closed{color:#aaa;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.admin-ticket-messages{margin:18px 0;display:grid;gap:9px}.admin-msg{padding:13px 15px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}.admin-msg.admin{background:rgba(88,105,255,.06)}.admin-msg>div{display:flex;justify-content:space-between;gap:10px}.admin-msg b{color:#dcb8eb;font-size:11px}.admin-msg small{color:#706576;font-size:9px}.admin-msg p{color:#cfc3d4;font-size:12px;line-height:1.9;margin-top:6px}.admin-msg a{color:#d399ff;font-size:10px}.admin-reply textarea{width:100%;min-height:100px;padding:13px;border-radius:15px;border:1px solid rgba(208,123,255,.13);background:rgba(255,255,255,.035);color:#fff;font:inherit;resize:vertical}.admin-reply>div{display:flex;gap:10px}.admin-reply button{flex:1;border:0;border-radius:13px;padding:12px;color:#fff;background:linear-gradient(135deg,#8e3bd4,#c55fff);font:inherit;cursor:pointer}.admin-reply .close-ticket{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.admin-empty{padding:70px;text-align:center;color:#83768a;border:1px dashed rgba(204,124,255,.15);border-radius:22px}.legacy-admin{margin-top:25px}.legacy-admin h2{color:#fff}.legacy-admin-row{padding:15px;margin-top:8px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}.legacy-admin-row b{color:#d7b7e2}.legacy-admin-row span{color:#7f7387;font-size:10px;margin-right:8px}.legacy-admin-row p{color:#b8acbd;font-size:11px;margin-top:7px;line-height:1.8}

/* Ticket form */
.support-success,.support-error{padding:13px 15px;border-radius:14px;margin-top:12px;font-size:12px}.support-success{color:#9fffc6;background:rgba(80,255,170,.06);border:1px solid rgba(80,255,170,.15)}.support-error{color:#ffb7c9;background:rgba(255,80,120,.06);border:1px solid rgba(255,80,120,.14)}.support-actions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.support-action-card{min-height:105px;padding:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(208,123,255,.1);display:flex;flex-direction:column;gap:5px;color:#fff;transition:.2s}.support-action-card:hover{transform:translateY(-3px);border-color:rgba(211,128,255,.35);background:rgba(177,65,255,.08)}.support-action-card b{font-size:11px}.support-action-card small{color:#817688;font-size:9px;line-height:1.6}.ticket-form-card{padding:20px;margin:15px 0;border-radius:20px;border:1px solid rgba(211,126,255,.16);background:rgba(255,255,255,.025)}.ticket-form-head{display:flex;justify-content:space-between;align-items:start}.ticket-form-head span{color:#9e78ae;font-size:10px}.ticket-form-head h2{color:#fff;font-size:18px;margin-top:4px}.ticket-form-head>a{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.05);color:#a999b0}.ticket-form{display:grid;gap:12px;margin-top:15px}.ticket-form label{display:grid;gap:6px;color:#cdbed3;font-size:11px}.ticket-form input,.ticket-form select,.ticket-form textarea{width:100%;padding:12px 14px;border-radius:13px;border:1px solid rgba(205,123,255,.12);background:rgba(255,255,255,.035);color:#fff;font:inherit;outline:none}.ticket-form textarea{min-height:150px;resize:vertical}.ticket-form input[type=file]{padding:10px}.ticket-form small{color:#776b7e;font-size:9px}.ticket-buttons{display:flex;gap:10px}.ticket-buttons button,.ticket-buttons a{flex:1;padding:12px;border:0;border-radius:13px;text-align:center;font:inherit;cursor:pointer}.ticket-buttons button{color:#fff;background:linear-gradient(135deg,#8d3ad2,#c568ff 55%,#5b7dff)}.ticket-buttons a{color:#c7b7cd;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}.tickets-list,.legacy-chat{margin-top:18px}.section-mini-title{color:#b86af0;font-size:11px;margin-bottom:9px}.ticket-card{padding:18px;margin-bottom:12px;border-radius:19px;background:rgba(255,255,255,.025);border:1px solid rgba(208,123,255,.11)}.ticket-card-head{display:flex;justify-content:space-between;gap:15px}.ticket-card-head>div>span{color:#8d7798;font-size:9px}.ticket-card h3{color:#fff;font-size:14px;margin-top:4px}.ticket-card .message{max-width:100%;margin:9px 0}.message small{display:block;color:#706576;font-size:8px;margin-top:7px}.attachment-link{display:inline-block;color:#d199ff;font-size:10px;margin-top:5px}.support-chat-avatar{width:68px;height:68px;border:2px solid rgba(255,255,255,.5);box-shadow:0 0 24px rgba(184,75,255,.3)}

@media(max-width:900px){.support-actions-grid{grid-template-columns:1fr 1fr}.admin-stats{grid-template-columns:1fr 1fr}.premium-admin-grid{grid-template-columns:1fr}.admin-page-head{align-items:start;flex-direction:column}.admin-clock-card{width:100%}}
@media(max-width:600px){.support-dock{right:12px;bottom:14px}.support-launcher-text{display:none}.support-menu{right:-3px;width:calc(100vw - 24px)}.support-actions-grid{grid-template-columns:1fr}.admin-shell{width:94%}.admin-top{align-items:flex-start;flex-direction:column}.admin-top-actions{width:100%}.admin-page-head h1{font-size:28px}.admin-stats{grid-template-columns:1fr 1fr}.admin-reply>div,.ticket-buttons{flex-direction:column}.admin-ticket-head{flex-direction:column}.premium-auth .auth-links.split{flex-direction:row;align-items:center}.book-image img{object-fit:contain}}


/* =========================================================
   PRODUCTION ADMIN READABILITY
   Larger explanatory text / improved contrast
========================================================= */
.admin-page .admin-page-head p,
.admin-page .admin-tile small,
.admin-page .admin-section-title p,
.admin-page .admin-msg p,
.admin-page .admin-msg small,
.admin-page .admin-msg a,
.admin-page .legacy-admin-row p,
.admin-page .legacy-admin-row span,
.admin-page .admin-empty,
.admin-page .ticket-card-head>div>span,
.admin-page .message small,
.admin-page .attachment-link,
.admin-page .section-mini-title,
.admin-page .ticket-form-head span,
.admin-page .ticket-form label,
.admin-page .ticket-form small {
    font-size: 13px !important;
    line-height: 1.9 !important;
}

.admin-page .admin-tile b {
    font-size: 16px !important;
}

.admin-page .admin-stats small {
    font-size: 13px !important;
}

.admin-page .admin-section-title span {
    font-size: 13px !important;
}

.admin-page .admin-section-title h2 {
    font-size: 24px !important;
}

.admin-page .admin-top-actions,
.admin-page .admin-top-actions a {
    font-size: 14px !important;
}

.admin-page .admin-brand small {
    font-size: 12px !important;
}

.admin-page .legacy-admin-row span {
    font-size: 12px !important;
}

@media (max-width:600px) {
    .admin-page .admin-page-head p,
    .admin-page .admin-tile small,
    .admin-page .admin-msg p,
    .admin-page .admin-msg small,
    .admin-page .admin-msg a,
    .admin-page .legacy-admin-row p,
    .admin-page .legacy-admin-row span,
    .admin-page .ticket-card-head>div>span,
    .admin-page .message small,
    .admin-page .attachment-link,
    .admin-page .section-mini-title,
    .admin-page .ticket-form label,
    .admin-page .ticket-form small {
        font-size: 12px !important;
    }
}