/* =====================================================
   MOOD TRACKER
   PREMIUM WELLNESS DESIGN
===================================================== */

:root {
    --bg: #080b18;
    --bg-soft: #0d1122;
    --card: rgba(255, 255, 255, 0.055);

    --white: #f8f7ff;
    --text: #b7b8c9;
    --muted: #777a91;

    --purple: #9d7cff;
    --pink: #ff7eb6;
    --blue: #72c9ff;
    --gold: #f7c873;

    --border: rgba(255, 255, 255, 0.1);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background:
        radial-gradient(circle at 15% 15%, rgba(157, 124, 255, 0.12), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(255, 126, 182, 0.08), transparent 30%),
        var(--bg);

    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
}


/* ================= NAVBAR ================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(8, 11, 24, 0.72);

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

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


.nav-container {
    width: min(1200px, 92%);

    margin: auto;

    height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


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

.logo {
    text-decoration: none;

    color: var(--white);

    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.5px;
}


.logo-icon {
    font-size: 28px;

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

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.logo span span {
    color: var(--purple);
}


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

.nav-links {
    display: flex;
    align-items: center;

    gap: 38px;
}


.nav-link {
    position: relative;

    text-decoration: none;

    color: var(--muted);

    font-size: 14px;
    font-weight: 500;

    padding: 29px 0;

    transition: color 0.3s ease;
}


/* Hover */

.nav-link:hover {
    color: var(--white);
}


/* =====================================================
   ACTIVE PAGE
   THIS IS WHAT MAKES HOME SHOW AS OPEN
===================================================== */

.nav-link.active {
    color: var(--white);
}


/* Underline */

.nav-link.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 17px;

    height: 2px;

    border-radius: 10px;

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

    box-shadow:
        0 0 10px rgba(157, 124, 255, 0.7);
}


/* Hover underline */

.nav-link:not(.active)::after {
    content: "";

    position: absolute;

    left: 50%;
    right: 50%;

    bottom: 17px;

    height: 2px;

    background: var(--purple);

    transition: 0.3s ease;
}


.nav-link:not(.active):hover::after {
    left: 0;
    right: 0;
}


/* ================= NAV STATUS ================= */

.nav-status {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--muted);

    font-size: 12px;
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #7ff0b2;

    box-shadow: 0 0 10px #7ff0b2;
}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: min(1200px, 92%);

    margin: auto;

    padding-top: 78px;

    gap: 50px;
}


.hero-content {
    position: relative;

    z-index: 5;

    max-width: 650px;
}


.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    border-radius: 50px;

    border: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.045);

    color: var(--text);

    font-size: 12px;

    margin-bottom: 28px;

    backdrop-filter: blur(10px);
}


.hero-badge span {
    color: var(--gold);
}


.hero h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 7vw, 90px);

    line-height: 0.98;

    letter-spacing: -3px;

    margin-bottom: 28px;
}


.hero h1 span {

    background: linear-gradient(100deg,
            var(--purple),
            var(--pink),
            var(--gold));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero-text {

    color: var(--text);

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 35px;
}


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

.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding: 15px 20px 15px 24px;

    border-radius: 50px;

    text-decoration: none;

    color: white;

    font-size: 14px;

    font-weight: 600;

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

    box-shadow:
        0 15px 35px rgba(157, 124, 255, 0.2);

    transition: 0.35s ease;
}


.hero-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(157, 124, 255, 0.35);
}


.button-arrow {

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, 0.18);

    border-radius: 50%;
}


/* ================= MOOD ORBIT ================= */

.mood-orbit {

    width: 430px;
    height: 430px;

    position: relative;

    flex-shrink: 0;
}


.orbit-ring {

    position: absolute;

    border-radius: 50%;

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

    left: 50%;
    top: 50%;

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


.ring-one {
    width: 280px;
    height: 280px;
}


.ring-two {
    width: 410px;
    height: 410px;
}


.center-orb {

    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 150px;
    height: 150px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.18),
            transparent 45%),
        linear-gradient(135deg,
            rgba(157, 124, 255, 0.3),
            rgba(255, 126, 182, 0.15));

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

    box-shadow:
        0 0 70px rgba(157, 124, 255, 0.18);

    backdrop-filter: blur(20px);

    animation: breathe 4s ease-in-out infinite;
}


.center-orb span {
    font-size: 40px;
}


.center-orb small {
    color: var(--text);

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;
}


@keyframes breathe {

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

    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}


/* Floating icons */

.floating-mood {

    position: absolute;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.06);

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

    backdrop-filter: blur(15px);

    font-size: 25px;

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


.mood-sun {
    top: 20px;
    left: 180px;
}


.mood-cloud {
    top: 175px;
    right: 5px;

    animation-delay: 1s;
}


.mood-fire {
    bottom: 35px;
    left: 80px;

    animation-delay: 2s;
}


.mood-moon {
    top: 170px;
    left: 0;

    animation-delay: 3s;
}


@keyframes float {

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

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


/* ================= GLOW ================= */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.18;

    pointer-events: none;
}


.glow-one {

    width: 250px;
    height: 250px;

    background: var(--purple);

    top: 20%;
    left: 20%;
}


.glow-two {

    width: 200px;
    height: 200px;

    background: var(--pink);

    right: 15%;
    top: 30%;
}


.glow-three {

    width: 160px;
    height: 160px;

    background: var(--blue);

    bottom: 5%;
    left: 40%;
}


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

.check-section,
.history-section {

    width: min(1100px, 92%);

    margin: auto;

    padding: 120px 0;
}


.section-heading {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 55px;
}


.eyebrow {

    font-size: 11px;

    letter-spacing: 3px;

    color: var(--purple);

    font-weight: 700;
}


.section-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 5vw, 55px);

    line-height: 1.1;

    margin: 15px 0;
}


.section-heading h2 span {

    color: var(--pink);
}


.section-heading p {

    color: var(--muted);

    line-height: 1.7;

    font-size: 14px;
}


/* ================= MOOD GRID ================= */

.mood-grid {

    display: grid;

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

    gap: 14px;
}


.mood-card {

    position: relative;

    min-height: 220px;

    padding: 25px 20px;

    border-radius: 25px;

    text-align: left;

    color: white;

    background: var(--card);

    border: 1px solid var(--border);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


.mood-card::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    filter: blur(50px);

    opacity: 0;

    transition: 0.4s ease;
}


.mood-card:hover {

    transform: translateY(-10px);

    border-color: rgba(255, 255, 255, 0.2);

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


.mood-card:hover::before {

    opacity: 0.4;
}


.mood-icon {

    font-size: 40px;

    margin-bottom: 45px;

    transition: 0.4s ease;
}


.mood-card:hover .mood-icon {

    transform: scale(1.15) rotate(-5deg);
}


.mood-info h3 {

    font-size: 16px;

    margin-bottom: 6px;
}


.mood-info p {

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;
}


.mood-arrow {

    position: absolute;

    right: 18px;
    bottom: 18px;

    color: var(--muted);

    transition: 0.3s ease;
}


.mood-card:hover .mood-arrow {

    color: white;

    transform: translate(3px, -3px);
}


/* Mood accents */

.happy::before {
    background: var(--gold);
}

.sad::before {
    background: var(--blue);
}

.angry::before {
    background: #ff6b6b;
}

.depressed::before {
    background: var(--purple);
}

.boring::before {
    background: var(--pink);
}


/* ================= JOURNAL ================= */

.journal-section {

    width: min(1000px, 92%);

    margin: auto;

    padding: 60px 0 120px;
}


.journal-card {

    position: relative;

    padding: 65px;

    border-radius: 35px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(157, 124, 255, 0.1),
            rgba(255, 126, 182, 0.05));

    border: 1px solid var(--border);

    backdrop-filter: blur(20px);
}


.journal-decoration {

    position: absolute;

    top: 25px;
    right: 35px;

    font-size: 40px;

    color: var(--gold);

    opacity: 0.6;
}


.journal-content {

    max-width: 700px;
}


.journal-content h2 {

    font-family: "Playfair Display", serif;

    font-size: 50px;

    margin: 12px 0;
}


.journal-content h2 span {

    color: var(--pink);
}


.journal-content p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 28px;
}


textarea {

    width: 100%;

    min-height: 170px;

    resize: vertical;

    padding: 22px;

    border-radius: 20px;

    border: 1px solid var(--border);

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

    color: white;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.7;

    transition: 0.3s ease;
}


textarea:focus {

    border-color: var(--purple);

    box-shadow:
        0 0 25px rgba(157, 124, 255, 0.08);
}


textarea::placeholder {

    color: #626579;
}


/* ================= REFLECTION BUTTON ================= */

.reflection-button {

    margin-top: 18px;

    border: none;

    padding: 15px 22px;

    border-radius: 50px;

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

    color: white;

    font-family: inherit;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    gap: 20px;

    align-items: center;

    transition: 0.3s ease;
}


.reflection-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(157, 124, 255, 0.2);
}


.advice-box {

    margin-top: 20px;

    color: var(--text);

    line-height: 1.7;

    font-size: 14px;
}

/* =========================================================
   PREMIUM MOOD HISTORY
========================================================= */

.history-section {
    position: relative;
    overflow: hidden;
}


/* Decorative background glow */

.history-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -200px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(157, 124, 255, 0.10),
            transparent 70%);

    pointer-events: none;
}


.history-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -230px;
    top: 100px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 126, 182, 0.08),
            transparent 70%);

    pointer-events: none;
}


/* ================= HISTORY TITLE ================= */

.history-title {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    position: relative;
    z-index: 3;
}


.history-title span {
    font-size: 20px;
}


.history-title h3 {
    margin: 0;

    font-size: 20px;

    color: var(--white);

    font-weight: 700;
}


/* ================= HISTORY LIST ================= */

.history-list {

    position: relative;

    max-width: 1000px;

    margin: 45px auto 0;

    padding-left: 65px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    z-index: 2;
}


/* ================= TIMELINE ================= */

.history-list::before {

    content: "";

    position: absolute;

    left: 22px;

    top: 30px;

    bottom: 30px;

    width: 2px;

    background: linear-gradient(to bottom,
            rgba(255, 126, 182, 0.9),
            rgba(157, 124, 255, 0.7),
            rgba(157, 124, 255, 0.05));

    box-shadow:
        0 0 12px rgba(157, 124, 255, 0.5);
}


/* ================= HISTORY CARD ================= */

.history-item {

    position: relative;

    min-height: 115px;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 22px 28px;

    border-radius: 20px;

    background:
        linear-gradient(110deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.035));

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

    backdrop-filter: blur(20px);

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

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    overflow: hidden;

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


/* Timeline dot */

.history-item::before {

    content: "";

    position: absolute;

    left: -50px;

    top: 50%;

    transform: translateY(-50%);

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background: var(--purple);

    border: 3px solid var(--midnight);

    box-shadow:
        0 0 0 4px rgba(157, 124, 255, 0.12),
        0 0 18px rgba(157, 124, 255, 0.9);

    z-index: 5;
}


/* Card glow */

.history-item::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -90px;

    top: -90px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 126, 182, 0.13),
            transparent 70%);

    pointer-events: none;
}


/* ================= MOOD ICON ================= */

.history-mood-icon {

    flex: 0 0 68px;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 31px;

    background:
        rgba(255, 255, 255, 0.10);

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

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        0 0 25px rgba(157, 124, 255, 0.15);
}


/* ================= MAIN CONTENT ================= */

.history-main {

    min-width: 250px;

    flex: 1;
}


.history-mood-name {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 7px;
}


.history-date,
.history-journal {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #b6b8ca;

    font-size: 13px;

    line-height: 1.6;
}


.history-date {

    margin-bottom: 3px;
}


.history-date span,
.history-journal span {

    font-size: 13px;

    opacity: 0.85;
}


/* ================= DIVIDER ================= */

.history-divider {

    width: 1px;

    height: 60px;

    background:
        rgba(255, 255, 255, 0.16);

    flex-shrink: 0;
}


/* ================= QUOTE ================= */

.history-quote {

    width: 270px;

    font-family: Georgia, serif;

    font-size: 14px;

    font-style: italic;

    line-height: 1.6;

    color: #c9c9d8;
}


.history-heart {

    font-size: 30px;

    font-family: Georgia, serif;

    color: #ff7eb6;

    opacity: 0.9;

    transition: 0.3s ease;
}


/* ================= HOVER ================= */

.history-item:hover {

    transform: translateX(7px);

    border-color:
        rgba(255, 126, 182, 0.45);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.30),
        0 0 30px rgba(157, 124, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


.history-item:hover .history-heart {

    transform: scale(1.15);

    text-shadow:
        0 0 15px rgba(255, 126, 182, 0.8);
}


/* =========================================================
   MOOD COLORS
========================================================= */


/* HAPPY */

.happy-history {

    border-color:
        rgba(245, 190, 70, 0.45);

    background:
        linear-gradient(110deg,
            rgba(245, 190, 70, 0.09),
            rgba(255, 255, 255, 0.035));
}


.happy-history .history-mood-name {

    color: #f6c84e;

    text-shadow:
        0 0 14px rgba(246, 200, 78, 0.25);
}


.happy-history .history-mood-icon {

    box-shadow:
        inset 0 0 25px rgba(246, 200, 78, 0.12),
        0 0 25px rgba(246, 200, 78, 0.12);
}


.happy-history::before {

    background: #f6c84e;

    box-shadow:
        0 0 0 4px rgba(246, 200, 78, 0.12),
        0 0 18px rgba(246, 200, 78, 0.9);
}


/* SAD */

.sad-history {

    border-color:
        rgba(255, 126, 182, 0.45);

    background:
        linear-gradient(110deg,
            rgba(255, 126, 182, 0.10),
            rgba(157, 124, 255, 0.05));
}


.sad-history .history-mood-name {

    color: #ff7eb6;

    text-shadow:
        0 0 14px rgba(255, 126, 182, 0.3);
}


.sad-history::before {

    background: #ff7eb6;

    box-shadow:
        0 0 0 4px rgba(255, 126, 182, 0.12),
        0 0 18px rgba(255, 126, 182, 0.9);
}


/* ANGRY */

.angry-history {

    border-color:
        rgba(255, 100, 100, 0.4);
}


.angry-history .history-mood-name {

    color: #ff8b8b;
}


.angry-history::before {

    background: #ff7777;

    box-shadow:
        0 0 0 4px rgba(255, 100, 100, 0.12),
        0 0 18px rgba(255, 100, 100, 0.8);
}


/* DEPRESSED */

.depressed-history {

    border-color:
        rgba(157, 124, 255, 0.42);
}


.depressed-history .history-mood-name {

    color: #b99cff;
}


.depressed-history::before {

    background: #a98cff;

    box-shadow:
        0 0 0 4px rgba(157, 124, 255, 0.12),
        0 0 18px rgba(157, 124, 255, 0.9);
}


/* BORING */

.boring-history {

    border-color:
        rgba(120, 170, 220, 0.35);
}


.boring-history .history-mood-name {

    color: #9fc8ef;
}


.boring-history::before {

    background: #9fc8ef;

    box-shadow:
        0 0 0 4px rgba(159, 200, 239, 0.12),
        0 0 18px rgba(159, 200, 239, 0.8);
}


/* ================= EMPTY STATE ================= */

.history-empty {

    text-align: center;

    padding: 70px 30px;

    border-radius: 25px;

    background:
        rgba(255, 255, 255, 0.035);

    border: 1px dashed rgba(157, 124, 255, 0.35);

    backdrop-filter: blur(15px);
}


.history-empty>span {

    font-size: 45px;

    color: var(--pink);

    text-shadow:
        0 0 25px rgba(255, 126, 182, 0.6);
}


.history-empty h3 {

    margin: 15px 0 8px;

    color: white;

    font-size: 20px;
}


.history-empty p {

    color: var(--muted);

    font-size: 14px;
}


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

@media (max-width: 700px) {

    .history-list {

        padding-left: 30px;

        gap: 15px;
    }


    .history-list::before {

        left: 10px;
    }


    .history-item {

        display: grid;

        grid-template-columns: 55px 1fr;

        gap: 15px;

        padding: 20px;

        min-height: auto;
    }


    .history-item::before {

        left: -27px;

        width: 11px;

        height: 11px;
    }


    .history-mood-icon {

        width: 55px;

        height: 55px;

        font-size: 25px;

        grid-row: span 2;
    }


    .history-main {

        min-width: 0;
    }


    .history-divider {

        display: none;
    }


    .history-quote {

        width: auto;

        grid-column: 2;

        margin-top: 8px;

        padding-top: 10px;

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


    .history-heart {

        position: absolute;

        right: 18px;

        top: 18px;

        font-size: 24px;
    }

}



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

.footer {

    border-top: 1px solid var(--border);

    padding: 50px 20px;

    text-align: center;

    color: var(--muted);

    font-size: 13px;
}


.footer-logo {

    color: white;

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 10px;
}


.footer p {

    margin-bottom: 10px;
}


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

@media (max-width: 950px) {

    .nav-status {
        display: none;
    }

    .hero {
        flex-direction: column;

        justify-content: center;

        text-align: center;

        padding-top: 130px;

        padding-bottom: 80px;
    }

    .hero-content {
        max-width: 750px;
    }

    .hero-button {
        margin: auto;
    }

    .mood-orbit {
        transform: scale(0.8);

        margin-top: -30px;
    }

    .mood-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 650px) {

    .nav-container {
        height: 68px;
    }

    .logo {
        font-size: 17px;
    }

    .nav-links {
        gap: 17px;
    }

    .nav-link {
        font-size: 12px;
    }

    .hero h1 {
        font-size: 52px;

        letter-spacing: -2px;
    }

    .hero-text {
        font-size: 14px;
    }

    .mood-orbit {
        transform: scale(0.65);

        margin-top: -80px;

        margin-bottom: -70px;
    }

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

    .mood-card {
        min-height: 150px;
    }

    .mood-icon {
        margin-bottom: 25px;
    }

    .journal-card {
        padding: 35px 22px;
    }

    .journal-content h2 {
        font-size: 38px;
    }

    .section-heading h2 {
        font-size: 38px;
    }
}

/* =========================================================
   MOBILE RESPONSIVE ENHANCEMENT
   ========================================================= */


/* ================= MOBILE MENU BUTTON ================= */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

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

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.06);

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    backdrop-filter: blur(15px);

    transition: 0.3s ease;
}


.menu-toggle span {
    display: block;

    width: 19px;
    height: 2px;

    border-radius: 10px;

    background: #ffffff;

    transition: 0.3s ease;
}


.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);

    transform: scale(1.05);
}


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

@media (max-width: 950px) {

    .nav-container {
        width: 90%;
    }


    .nav-status {
        display: none;
    }


    .hero {
        min-height: auto;

        padding-top: 140px;
        padding-bottom: 80px;
    }


    .hero-content {
        width: 100%;
    }


    .mood-orbit {
        margin-top: 10px;
    }


    .mood-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media (max-width: 700px) {

    /* ---------- NAVBAR ---------- */

    .navbar {
        height: 70px;
    }


    .nav-container {
        height: 70px;

        width: 90%;

        position: relative;
    }


    .logo {
        font-size: 17px;

        gap: 6px;
    }


    .logo-icon {
        font-size: 25px;
    }


    /* Hide desktop navigation */

    .nav-links {
        display: none;
    }


    /* Show hamburger */

    .menu-toggle {
        display: flex;
    }


    /* ---------- MOBILE MENU ---------- */

    .nav-links.mobile-open {

        display: flex;

        position: absolute;

        top: 62px;

        left: 0;
        right: 0;

        width: 100%;

        padding: 12px;

        flex-direction: column;

        gap: 5px;

        background: rgba(10, 12, 28, 0.96);

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

        border-radius: 20px;

        backdrop-filter: blur(25px);

        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.4);

        animation: menuAppear 0.25s ease;
    }


    @keyframes menuAppear {

        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .nav-links.mobile-open .nav-link {

        width: 100%;

        padding: 14px 18px;

        border-radius: 12px;

        font-size: 14px;

        color: #aeb0c3;
    }


    .nav-links.mobile-open .nav-link:hover {

        background: rgba(255, 255, 255, 0.06);

        color: white;
    }


    /* Active mobile link */

    .nav-links.mobile-open .nav-link.active {

        background:
            linear-gradient(90deg,
                rgba(157, 124, 255, 0.15),
                rgba(255, 126, 182, 0.08));

        color: white;
    }


    .nav-links.mobile-open .nav-link.active::after {

        left: 0;

        right: auto;

        top: 50%;

        bottom: auto;

        width: 3px;

        height: 22px;

        transform: translateY(-50%);

        border-radius: 10px;

        background: linear-gradient(180deg,
                #9d7cff,
                #ff7eb6);

        box-shadow:
            0 0 12px rgba(157, 124, 255, 0.8);
    }


    /* ---------- HERO ---------- */

    .hero {

        width: 90%;

        min-height: auto;

        padding-top: 125px;

        padding-bottom: 40px;

        display: flex;

        flex-direction: column;

        text-align: center;

        gap: 15px;
    }


    .hero-content {

        width: 100%;

        max-width: 100%;
    }


    .hero-badge {

        font-size: 11px;

        padding: 8px 13px;

        margin-bottom: 22px;
    }


    .hero h1 {

        font-size: clamp(46px, 13vw, 65px);

        line-height: 0.98;

        letter-spacing: -2.5px;

        margin-bottom: 22px;
    }


    .hero-text {

        font-size: 13px;

        line-height: 1.7;

        padding: 0 5px;

        margin-bottom: 28px;
    }


    .hero-button {

        padding: 14px 17px 14px 21px;

        font-size: 13px;

        gap: 15px;
    }


    .button-arrow {

        width: 28px;
        height: 28px;
    }


    /* ---------- ORBIT ---------- */

    .mood-orbit {

        width: 330px;
        height: 330px;

        margin-top: 5px;

        transform: scale(0.88);
    }


    .ring-one {

        width: 215px;
        height: 215px;
    }


    .ring-two {

        width: 310px;
        height: 310px;
    }


    .center-orb {

        width: 115px;
        height: 115px;
    }


    .center-orb span {

        font-size: 32px;
    }


    .center-orb small {

        font-size: 9px;

        letter-spacing: 2px;
    }


    .floating-mood {

        width: 48px;
        height: 48px;

        border-radius: 15px;

        font-size: 20px;
    }


    .mood-sun {

        top: 12px;
        left: 141px;
    }


    .mood-cloud {

        top: 135px;
        right: 0;
    }


    .mood-fire {

        bottom: 25px;
        left: 62px;
    }


    .mood-moon {

        top: 135px;
        left: 0;
    }


    /* ---------- SECTIONS ---------- */

    .check-section,
    .history-section {

        width: 90%;

        padding: 80px 0;
    }


    .section-heading {

        margin-bottom: 35px;
    }


    .eyebrow {

        font-size: 9px;

        letter-spacing: 2.5px;
    }


    .section-heading h2 {

        font-size: 36px;

        line-height: 1.12;

        margin: 12px 0;
    }


    .section-heading p {

        font-size: 13px;
    }


    /* ---------- MOOD CARDS ---------- */

    .mood-grid {

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

        gap: 10px;
    }


    .mood-card {

        min-height: 175px;

        padding: 20px 16px;

        border-radius: 21px;
    }


    .mood-icon {

        font-size: 30px;

        margin-bottom: 25px;
    }


    .mood-info h3 {

        font-size: 14px;
    }


    .mood-info p {

        font-size: 10px;
    }


    .mood-arrow {

        right: 13px;
        bottom: 13px;

        width: 25px;
        height: 25px;

        display: grid;
        place-items: center;

        border-radius: 50%;

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


    /* ---------- JOURNAL ---------- */

    .journal-section {

        width: 90%;

        padding: 30px 0 80px;
    }


    .journal-card {

        padding: 38px 20px;

        border-radius: 27px;
    }


    .journal-decoration {

        top: 18px;
        right: 20px;

        font-size: 27px;
    }


    .journal-content h2 {

        font-size: 38px;

        line-height: 1.05;

        margin: 12px 0;
    }


    .journal-content p {

        font-size: 12px;

        line-height: 1.6;

        margin-bottom: 22px;
    }


    textarea {

        min-height: 145px;

        padding: 17px;

        font-size: 13px;

        border-radius: 17px;
    }


    .reflection-button {

        width: 100%;

        justify-content: space-between;

        padding: 14px 18px;

        font-size: 12px;
    }


    /* ---------- HISTORY ---------- */

    .history-item {

        padding: 17px;

        border-radius: 15px;

        font-size: 12px;
    }


    /* ---------- FOOTER ---------- */

    .footer {

        padding: 40px 20px;

        font-size: 11px;
    }


    .footer-logo {

        font-size: 16px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   Example: iPhone SE / 320px-375px
   ========================================================= */

@media (max-width: 380px) {

    .nav-container {

        width: 88%;
    }


    .hero {

        padding-top: 115px;
    }


    .hero h1 {

        font-size: 44px;

        letter-spacing: -2px;
    }


    .hero-text {

        font-size: 12px;
    }


    .hero-button {

        font-size: 12px;

        padding: 13px 15px 13px 18px;
    }


    .mood-orbit {

        transform: scale(0.78);

        margin-top: -10px;

        margin-bottom: -35px;
    }


    .mood-grid {

        gap: 8px;
    }


    .mood-card {

        min-height: 160px;

        padding: 17px 13px;

        border-radius: 18px;
    }


    .mood-icon {

        font-size: 27px;

        margin-bottom: 20px;
    }


    .mood-info h3 {

        font-size: 13px;
    }


    .mood-info p {

        font-size: 9px;
    }


    .section-heading h2 {

        font-size: 32px;
    }


    .journal-content h2 {

        font-size: 34px;
    }
}












/* =========================================================
   MOOD PAGES
========================================================= */

.mood-page {
    min-height: 100vh;
}


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

.mood-page-main {
    padding-top: 90px;
}


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

.mood-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    max-width: 1200px;

    margin: auto;

    padding: 90px 40px;

    overflow: hidden;
}


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

.mood-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}


.mood-glow-one {

    width: 380px;
    height: 380px;

    left: -150px;
    top: 80px;

    background:
        radial-gradient(circle,
            rgba(246, 200, 78, 0.15),
            transparent 70%);
}


.mood-glow-two {

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -120px;

    background:
        radial-gradient(circle,
            rgba(255, 126, 182, 0.12),
            transparent 70%);
}


/* ================= CONTENT ================= */

.mood-content {

    position: relative;

    z-index: 2;

    max-width: 650px;
}


.mood-icon-large {

    width: 95px;
    height: 95px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 45px;

    margin-bottom: 30px;

    background:
        rgba(246, 200, 78, 0.10);

    border:
        1px solid rgba(246, 200, 78, 0.25);

    box-shadow:
        0 0 45px rgba(246, 200, 78, 0.15),
        inset 0 0 25px rgba(246, 200, 78, 0.08);

    animation: moodFloat 4s ease-in-out infinite;
}


@keyframes moodFloat {

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

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

}


.mood-eyebrow {

    display: block;

    margin-bottom: 14px;

    font-size: 11px;

    letter-spacing: 3px;

    color: #f6c84e;

    font-weight: 700;
}


.mood-content h1 {

    margin: 0;

    font-size: clamp(50px, 6vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    color: white;
}


.mood-content h1 span {

    display: block;

    background:
        linear-gradient(90deg,
            #f6c84e,
            #ff9fc4);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.mood-description {

    max-width: 580px;

    margin: 28px 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.9;
}


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

.mood-message {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    max-width: 540px;

    padding: 18px 20px;

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(246, 200, 78, 0.15);

    backdrop-filter: blur(15px);
}


.mood-message span {

    color: #f6c84e;

    font-size: 18px;
}


.mood-message p {

    margin: 0;

    color: #c4c6d5;

    font-size: 14px;

    line-height: 1.6;
}


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

.mood-actions {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

    flex-wrap: wrap;
}


.mood-primary-button {

    padding: 15px 24px;

    border-radius: 50px;

    text-decoration: none;

    color: #111;

    font-size: 14px;

    font-weight: 700;

    background:
        linear-gradient(100deg,
            #f6c84e,
            #ff9fc4);

    box-shadow:
        0 12px 30px rgba(246, 200, 78, 0.15);

    transition: 0.3s ease;
}


.mood-primary-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(246, 200, 78, 0.25);
}


.mood-secondary-button {

    padding: 14px 20px;

    color: #c5c7d8;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s ease;
}


.mood-secondary-button:hover {

    color: white;

    transform: translateX(4px);
}


/* ================= SIDE CARD ================= */

.mood-side-card {

    position: relative;

    z-index: 2;

    width: 300px;

    flex-shrink: 0;

    padding: 38px 32px;

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            rgba(246, 200, 78, 0.08),
            rgba(255, 255, 255, 0.035));

    border:
        1px solid rgba(246, 200, 78, 0.18);

    backdrop-filter: blur(20px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px rgba(255, 255, 255, 0.07);

    transform: rotate(2deg);

    transition: 0.4s ease;
}


.mood-side-card:hover {

    transform:
        rotate(0deg) translateY(-8px);

    border-color:
        rgba(246, 200, 78, 0.35);
}


.side-card-label {

    font-size: 10px;

    letter-spacing: 2px;

    color: #a7a9ba;
}


.side-card-icon {

    margin: 35px 0 20px;

    font-size: 45px;

    color: #f6c84e;

    text-shadow:
        0 0 25px rgba(246, 200, 78, 0.5);
}


.mood-side-card h2 {

    margin: 0 0 12px;

    color: white;

    font-size: 24px;
}


.mood-side-card p {

    margin: 0;

    color: #aeb0c0;

    font-size: 14px;

    line-height: 1.8;
}


.side-card-line {

    width: 45px;

    height: 2px;

    margin: 25px 0;

    background:
        linear-gradient(90deg,
            #f6c84e,
            transparent);
}


.side-card-footer {

    color: #d4d5df;

    font-size: 12px;

    font-style: italic;
}


/* =========================================================
   HAPPY ACTIVITIES
========================================================= */

.mood-activities {

    max-width: 1100px;

    margin: 0 auto;

    padding: 80px 40px;
}


.mood-section-heading span {

    color: #f6c84e;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 700;
}


.mood-section-heading h2 {

    max-width: 650px;

    margin: 14px 0 40px;

    color: white;

    font-size: 38px;

    line-height: 1.2;

    letter-spacing: -1px;
}


.mood-section-heading em {

    color: #ff9fc4;

    font-family: Georgia, serif;

    font-weight: 400;
}


/* ================= ACTIVITY GRID ================= */

.activity-grid {

    display: grid;

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

    gap: 18px;
}


.activity-card {

    padding: 30px;

    min-height: 200px;

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.035);

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

    backdrop-filter: blur(15px);

    transition: 0.35s ease;
}


.activity-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(246, 200, 78, 0.30);

    background:
        rgba(246, 200, 78, 0.055);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.20);
}


.activity-icon {

    font-size: 30px;

    margin-bottom: 20px;
}


.activity-card h3 {

    margin: 0 0 9px;

    color: white;

    font-size: 18px;
}


.activity-card p {

    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CLOSING
========================================================= */

.mood-closing {

    text-align: center;

    padding: 100px 30px 120px;
}


.closing-heart {

    font-size: 45px;

    color: #ff9fc4;

    text-shadow:
        0 0 30px rgba(255, 126, 182, 0.5);

    margin-bottom: 15px;
}


.mood-closing h2 {

    margin: 0 0 10px;

    color: white;

    font-size: 34px;
}


.mood-closing p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   MOOD PAGE MOBILE
========================================================= */

@media (max-width: 850px) {

    .mood-hero {

        flex-direction: column;

        text-align: center;

        padding:
            70px 25px;

        gap: 50px;
    }


    .mood-content {

        max-width: 700px;
    }


    .mood-icon-large {

        margin-left: auto;
        margin-right: auto;
    }


    .mood-description {

        margin-left: auto;
        margin-right: auto;
    }


    .mood-message {

        text-align: left;

        margin-left: auto;
        margin-right: auto;
    }


    .mood-actions {

        justify-content: center;
    }


    .mood-side-card {

        width: min(100%, 340px);
    }


    .activity-grid {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .mood-page-main {

        padding-top: 70px;
    }


    .mood-hero {

        min-height: auto;

        padding:
            65px 20px;
    }


    .mood-content h1 {

        font-size: 50px;

        letter-spacing: -2px;
    }


    .mood-description {

        font-size: 14px;
    }


    .mood-side-card {

        padding: 30px 25px;
    }


    .mood-activities {

        padding:
            60px 20px;
    }


    .mood-section-heading h2 {

        font-size: 30px;
    }


    .mood-closing {

        padding:
            70px 20px 90px;
    }

}




















/* =========================================================
   SAD MOOD PAGE
========================================================= */


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

.sad-page {

    background:
        radial-gradient(circle at 15% 30%,
            rgba(120, 145, 220, 0.08),
            transparent 35%),

        radial-gradient(circle at 85% 70%,
            rgba(157, 124, 255, 0.08),
            transparent 35%);
}


/* ================= SAD GLOWS ================= */

.sad-glow-one {

    width: 420px;
    height: 420px;

    left: -170px;
    top: 50px;

    background:
        radial-gradient(circle,
            rgba(110, 145, 230, 0.15),
            transparent 70%);
}


.sad-glow-two {

    width: 400px;
    height: 400px;

    right: -170px;
    bottom: -100px;

    background:
        radial-gradient(circle,
            rgba(157, 124, 255, 0.14),
            transparent 70%);
}


/* ================= SAD ICON ================= */

.sad-icon {

    background:
        rgba(130, 150, 230, 0.09);

    border-color:
        rgba(130, 150, 230, 0.25);

    box-shadow:
        0 0 45px rgba(110, 145, 230, 0.16),
        inset 0 0 25px rgba(130, 150, 230, 0.08);
}


/* ================= SAD TEXT ================= */

.sad-page .mood-eyebrow {

    color: #9db9ef;
}


.sad-page .mood-content h1 span {

    background:
        linear-gradient(90deg,
            #9db9ef,
            #c1a7ff);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.sad-page .mood-description {

    color: #aeb6cb;
}


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

.sad-page .mood-message {

    border-color:
        rgba(157, 124, 255, 0.18);

    background:
        rgba(130, 145, 220, 0.045);
}


.sad-page .mood-message span {

    color: #b7a1ff;

    text-shadow:
        0 0 15px rgba(157, 124, 255, 0.5);
}


/* ================= SAD BUTTON ================= */

.sad-button {

    color: white;

    background:
        linear-gradient(100deg,
            #738fd1,
            #9d7cff);

    box-shadow:
        0 12px 30px rgba(115, 143, 209, 0.16);
}


.sad-button:hover {

    box-shadow:
        0 18px 40px rgba(115, 143, 209, 0.25);
}


/* ================= SAD SIDE CARD ================= */

.sad-side-card {

    background:
        linear-gradient(145deg,
            rgba(110, 145, 230, 0.08),
            rgba(157, 124, 255, 0.045));

    border-color:
        rgba(130, 150, 230, 0.20);
}


.sad-side-card:hover {

    border-color:
        rgba(157, 124, 255, 0.38);
}


.sad-side-card .side-card-icon {

    color: #a997ff;

    text-shadow:
        0 0 25px rgba(157, 124, 255, 0.55);
}


.sad-side-card .side-card-line {

    background:
        linear-gradient(90deg,
            #8ea8e7,
            transparent);
}


/* ================= SAD ACTIVITIES ================= */

.sad-heading span {

    color: #9db9ef;
}


.sad-heading em {

    color: #bba7ff;
}


.sad-activity {

    border-color:
        rgba(130, 150, 230, 0.13);
}


.sad-activity:hover {

    background:
        rgba(110, 145, 230, 0.055);

    border-color:
        rgba(130, 150, 230, 0.30);

    box-shadow:
        0 20px 45px rgba(50, 70, 130, 0.18);
}


/* ================= SAD CLOSING ================= */

.sad-closing .closing-heart {

    color: #a997ff;

    text-shadow:
        0 0 30px rgba(157, 124, 255, 0.55);
}
/* =========================================================
   MOOD PAGE DARK THEME FIX
========================================================= */

body.mood-page {

    background:
        radial-gradient(circle at 15% 20%,
            rgba(157, 124, 255, 0.12),
            transparent 30%),
        radial-gradient(circle at 85% 35%,
            rgba(255, 126, 182, 0.08),
            transparent 30%),
        #080b18 !important;

    color: #f8f7ff !important;
}


/* Main mood area */

.mood-page-main {

    background:
        radial-gradient(circle at 20% 30%,
            rgba(100, 130, 220, 0.04),
            transparent 35%);

    color: #f8f7ff;
}


/* Hero */

.mood-hero {

    color: #f8f7ff;

    background: transparent;
}


/* Main heading */

.mood-content h1 {

    color: #f8f7ff !important;
}


/* Description */

.mood-description {

    color: #aeb3c7 !important;
}


/* Side card */

.mood-side-card {

    color: #f8f7ff;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)) !important;

    border-color:
        rgba(255, 255, 255, 0.13) !important;
}


.mood-side-card h2 {

    color: #f8f7ff !important;
}


.mood-side-card p {

    color: #aeb3c7 !important;
}


/* Message box */

.mood-message {

    background:
        rgba(255, 255, 255, 0.035) !important;

    border-color:
        rgba(255, 255, 255, 0.12) !important;
}


.mood-message p {

    color: #b9bdce !important;
}


/* Activity section */

.mood-activities {

    background: transparent;
}


.mood-section-heading h2 {

    color: #f8f7ff !important;
}


.activity-card {

    background:
        rgba(255, 255, 255, 0.035) !important;

    border-color:
        rgba(255, 255, 255, 0.10) !important;
}


.activity-card h3 {

    color: #f8f7ff !important;
}


.activity-card p {

    color: #999db2 !important;
}


/* Closing */

.mood-closing {

    background: transparent;
}


.mood-closing h2 {

    color: #f8f7ff !important;
}


.mood-closing p {

    color: #999db2 !important;
}


/* Footer */

.mood-page .footer {

    background: transparent;

    color: #777a91;
}






















/* =========================================================
   ANGRY MOOD PAGE
========================================================= */


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

.angry-page {

    background:
        radial-gradient(circle at 15% 25%,
            rgba(190, 55, 55, 0.12),
            transparent 32%),

        radial-gradient(circle at 85% 70%,
            rgba(255, 120, 45, 0.08),
            transparent 32%),

        #080b18 !important;
}


/* ================= GLOWS ================= */

.angry-glow-one {

    width: 430px;
    height: 430px;

    left: -180px;
    top: 50px;

    background:
        radial-gradient(circle,
            rgba(210, 55, 55, 0.18),
            transparent 70%);
}


.angry-glow-two {

    width: 400px;
    height: 400px;

    right: -170px;
    bottom: -100px;

    background:
        radial-gradient(circle,
            rgba(255, 120, 45, 0.12),
            transparent 70%);
}


/* ================= ICON ================= */

.angry-icon {

    background:
        rgba(220, 65, 55, 0.09);

    border-color:
        rgba(230, 75, 65, 0.25);

    box-shadow:
        0 0 45px rgba(220, 55, 55, 0.18),
        inset 0 0 25px rgba(255, 100, 50, 0.08);
}


/* ================= TEXT ================= */

.angry-page .mood-eyebrow {

    color: #ff8a72;
}


.angry-page .mood-content h1 span {

    background:
        linear-gradient(90deg,
            #ff6b62,
            #ffae63);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.angry-page .mood-description {

    color: #bcb0b2;
}


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

.angry-page .mood-message {

    border-color:
        rgba(255, 100, 80, 0.18);

    background:
        rgba(180, 50, 45, 0.045);
}


.angry-page .mood-message span {

    color: #ff8b72;

    text-shadow:
        0 0 15px rgba(255, 100, 80, 0.55);
}


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

.angry-button {

    color: white;

    background:
        linear-gradient(100deg,
            #b94145,
            #ff8b58);

    box-shadow:
        0 12px 30px rgba(190, 60, 55, 0.18);
}


.angry-button:hover {

    box-shadow:
        0 18px 40px rgba(220, 65, 55, 0.28);
}


/* ================= SIDE CARD ================= */

.angry-side-card {

    background:
        linear-gradient(145deg,
            rgba(200, 55, 55, 0.09),
            rgba(255, 120, 45, 0.035));

    border-color:
        rgba(220, 75, 65, 0.20);
}


.angry-side-card:hover {

    border-color:
        rgba(255, 100, 75, 0.40);
}


.angry-side-card .side-card-icon {

    color: #ff866d;

    text-shadow:
        0 0 25px rgba(255, 90, 70, 0.55);
}


.angry-side-card .side-card-line {

    background:
        linear-gradient(90deg,
            #ff735f,
            transparent);
}


/* ================= ACTIVITIES ================= */

.angry-heading span {

    color: #ff8a72;
}


.angry-heading em {

    color: #ff9c75;
}


.angry-activity {

    border-color:
        rgba(220, 75, 65, 0.14);
}


.angry-activity:hover {

    background:
        rgba(200, 60, 50, 0.055);

    border-color:
        rgba(255, 100, 75, 0.32);

    box-shadow:
        0 20px 45px rgba(120, 35, 30, 0.18);
}


/* ================= CLOSING ================= */

.angry-closing .closing-heart {

    color: #ff795f;

    text-shadow:
        0 0 30px rgba(255, 90, 70, 0.55);
}




















/* =========================================================
   DEPRESSED / LOW MOOD PAGE
========================================================= */

.depressed-page {

    background:
        radial-gradient(circle at 15% 25%,
            rgba(100, 90, 190, 0.13),
            transparent 32%),

        radial-gradient(circle at 85% 70%,
            rgba(80, 130, 200, 0.08),
            transparent 32%),

        #080b18 !important;
}


/* ================= GLOWS ================= */

.depressed-glow-one {

    width: 450px;
    height: 450px;

    left: -190px;
    top: 40px;

    background:
        radial-gradient(circle,
            rgba(110, 90, 210, 0.17),
            transparent 70%);
}


.depressed-glow-two {

    width: 430px;
    height: 430px;

    right: -190px;
    bottom: -120px;

    background:
        radial-gradient(circle,
            rgba(80, 140, 220, 0.10),
            transparent 70%);
}


/* ================= ICON ================= */

.depressed-icon {

    background:
        rgba(115, 100, 205, 0.09);

    border-color:
        rgba(145, 125, 235, 0.24);

    box-shadow:
        0 0 45px rgba(120, 100, 220, 0.18),
        inset 0 0 25px rgba(100, 130, 220, 0.08);
}


/* ================= TEXT ================= */

.depressed-page .mood-eyebrow {

    color: #a99cff;
}


.depressed-page .mood-content h1 span {

    background:
        linear-gradient(90deg,
            #a99cff,
            #82b8ee);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.depressed-page .mood-description {

    color: #aaaec2;
}


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

.depressed-page .mood-message {

    border-color:
        rgba(145, 125, 235, 0.18);

    background:
        rgba(110, 100, 200, 0.045);
}


.depressed-page .mood-message span {

    color: #b8a9ff;

    text-shadow:
        0 0 15px rgba(157, 124, 255, 0.55);
}


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

.depressed-button {

    color: white;

    background:
        linear-gradient(100deg,
            #7467c9,
            #82aee0);

    box-shadow:
        0 12px 30px rgba(110, 100, 200, 0.18);
}


.depressed-button:hover {

    box-shadow:
        0 18px 40px rgba(110, 100, 200, 0.28);
}


/* ================= SIDE CARD ================= */

.depressed-side-card {

    background:
        linear-gradient(145deg,
            rgba(110, 90, 200, 0.09),
            rgba(80, 130, 210, 0.035));

    border-color:
        rgba(145, 125, 235, 0.20);
}


.depressed-side-card:hover {

    border-color:
        rgba(155, 135, 245, 0.40);
}


.depressed-side-card .side-card-icon {

    color: #afa1ff;

    text-shadow:
        0 0 25px rgba(157, 124, 255, 0.55);
}


.depressed-side-card .side-card-line {

    background:
        linear-gradient(90deg,
            #9588e8,
            transparent);
}


/* ================= ACTIVITIES ================= */

.depressed-heading span {

    color: #a99cff;
}


.depressed-heading em {

    color: #91baf0;
}


.depressed-activity {

    border-color:
        rgba(135, 120, 220, 0.14);
}


.depressed-activity:hover {

    background:
        rgba(110, 100, 200, 0.055);

    border-color:
        rgba(150, 130, 240, 0.30);

    box-shadow:
        0 20px 45px rgba(70, 60, 130, 0.18);
}


/* ================= CLOSING ================= */

.depressed-closing .closing-heart {

    color: #aaa0ff;

    text-shadow:
        0 0 30px rgba(157, 124, 255, 0.55);
}


















/* =========================================================
   BORING MOOD PAGE
========================================================= */

.boring-page {

    background:
        radial-gradient(circle at 15% 25%,
            rgba(85, 110, 210, 0.12),
            transparent 32%),

        radial-gradient(circle at 85% 65%,
            rgba(75, 210, 205, 0.08),
            transparent 32%),

        #080b18 !important;
}


/* ================= GLOWS ================= */

.boring-glow-one {

    width: 430px;
    height: 430px;

    left: -180px;
    top: 60px;

    background:
        radial-gradient(circle,
            rgba(85, 115, 220, 0.17),
            transparent 70%);
}


.boring-glow-two {

    width: 430px;
    height: 430px;

    right: -170px;
    bottom: -110px;

    background:
        radial-gradient(circle,
            rgba(75, 210, 205, 0.12),
            transparent 70%);
}


/* ================= ICON ================= */

.boring-icon {

    background:
        rgba(85, 120, 220, 0.09);

    border-color:
        rgba(100, 150, 230, 0.24);

    box-shadow:
        0 0 45px rgba(75, 130, 220, 0.17),
        inset 0 0 25px rgba(75, 210, 205, 0.07);
}


/* ================= TEXT ================= */

.boring-page .mood-eyebrow {

    color: #83d7df;
}


.boring-page .mood-content h1 span {

    background:
        linear-gradient(90deg,
            #7cb9f0,
            #75ddd4);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.boring-page .mood-description {

    color: #abb5c8;
}


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

.boring-page .mood-message {

    border-color:
        rgba(80, 190, 205, 0.18);

    background:
        rgba(70, 150, 200, 0.045);
}


.boring-page .mood-message span {

    color: #7cdbd6;

    text-shadow:
        0 0 15px rgba(75, 210, 205, 0.55);
}


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

.boring-button {

    color: #071016;

    background:
        linear-gradient(100deg,
            #76c8ec,
            #75ddd4);

    box-shadow:
        0 12px 30px rgba(75, 190, 205, 0.16);
}


.boring-button:hover {

    box-shadow:
        0 18px 40px rgba(75, 210, 205, 0.27);
}


/* ================= SIDE CARD ================= */

.boring-side-card {

    background:
        linear-gradient(145deg,
            rgba(75, 130, 220, 0.09),
            rgba(75, 210, 205, 0.035));

    border-color:
        rgba(90, 160, 220, 0.20);
}


.boring-side-card:hover {

    border-color:
        rgba(80, 210, 205, 0.38);
}


.boring-side-card .side-card-icon {

    color: #7cdbd6;

    text-shadow:
        0 0 25px rgba(75, 210, 205, 0.55);
}


.boring-side-card .side-card-line {

    background:
        linear-gradient(90deg,
            #76ced9,
            transparent);
}


/* ================= ACTIVITIES ================= */

.boring-heading span {

    color: #83d7df;
}


.boring-heading em {

    color: #79d8d3;
}


.boring-activity {

    border-color:
        rgba(75, 170, 210, 0.14);
}


.boring-activity:hover {

    background:
        rgba(65, 180, 200, 0.055);

    border-color:
        rgba(80, 210, 205, 0.32);

    box-shadow:
        0 20px 45px rgba(40, 110, 140, 0.18);
}


/* =========================================================
   RANDOM SPARK
========================================================= */

.spark-section {

    max-width: 900px;

    margin: 20px auto;

    padding: 40px;
}


.spark-card {

    position: relative;

    text-align: center;

    padding: 55px 35px;

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            rgba(75, 150, 220, 0.08),
            rgba(75, 210, 205, 0.045),
            rgba(255, 255, 255, 0.025));

    border:
        1px solid rgba(100, 190, 220, 0.20);

    backdrop-filter: blur(20px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    overflow: hidden;
}


.spark-card::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: 50%;

    top: -160px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(75, 210, 205, 0.13),
            transparent 70%);
}


.spark-label {

    position: relative;

    color: #7cdbd6;

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 700;
}


.spark-card h2 {

    position: relative;

    margin: 15px 0 12px;

    color: white;

    font-size: 32px;

    letter-spacing: -1px;
}


.spark-card p {

    position: relative;

    min-height: 25px;

    margin: 0 auto 25px;

    max-width: 600px;

    color: #aeb5c8;

    font-size: 14px;

    line-height: 1.7;

    transition: 0.3s ease;
}


.spark-button {

    position: relative;

    border: none;

    padding: 14px 25px;

    border-radius: 50px;

    background:
        linear-gradient(100deg,
            #6ebce5,
            #72d8d2);

    color: #071016;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s ease;
}


.spark-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(75, 210, 205, 0.25);
}


.spark-button:active {

    transform: scale(0.97);
}


/* ================= CLOSING ================= */

.boring-closing .closing-heart {

    color: #78d9d3;

    text-shadow:
        0 0 30px rgba(75, 210, 205, 0.55);
}


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

@media (max-width: 600px) {

    .spark-section {

        padding: 25px 20px;
    }


    .spark-card {

        padding: 45px 22px;
    }


    .spark-card h2 {

        font-size: 27px;
    }

}











/* =========================================================
   AUTHENTICATION PAGE
========================================================= */

.auth-page {

    min-height: 100vh;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(125, 85, 220, 0.16),
            transparent 32%),

        radial-gradient(circle at 85% 75%,
            rgba(230, 90, 160, 0.10),
            transparent 32%),

        #080b18 !important;

    color: #f8f7ff;

    overflow-x: hidden;

}


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

.auth-glow {

    position: fixed;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

    z-index: 0;

}


.auth-glow-one {

    width: 400px;
    height: 400px;

    left: -180px;
    top: 180px;

    background:
        radial-gradient(circle,
            rgba(125, 80, 220, 0.18),
            transparent 70%);

}


.auth-glow-two {

    width: 420px;
    height: 420px;

    right: -190px;
    bottom: -100px;

    background:
        radial-gradient(circle,
            rgba(220, 75, 150, 0.13),
            transparent 70%);

}



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

.auth-main {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 2;

    padding:
        120px 20px 60px;

}


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

.auth-card {

    width: 100%;

    max-width: 460px;

    padding: 45px 42px;

    border-radius: 30px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025));

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

    backdrop-filter: blur(25px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

}


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

.auth-header {

    text-align: center;

    margin-bottom: 32px;

}


.auth-icon {

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    font-size: 30px;

    background:
        linear-gradient(135deg,
            rgba(130, 90, 220, 0.18),
            rgba(230, 90, 160, 0.12));

    border:
        1px solid rgba(170, 120, 240, 0.22);

    box-shadow:
        0 0 35px rgba(140, 90, 220, 0.18);

}


.auth-eyebrow {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 700;

    color: #b49bea;

}


.auth-header h1 {

    margin:
        12px 0 8px;

    font-size: 36px;

    letter-spacing: -1.2px;

    color: #ffffff;

}


.auth-header p {

    margin: 0;

    color: #9298ae;

    font-size: 14px;

}


/* ================= FORM ================= */

.auth-form {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.form-group label {

    color: #c9cada;

    font-size: 12px;

    font-weight: 600;

}


.form-group input {

    width: 100%;

    box-sizing: border-box;

    padding: 14px 16px;

    border-radius: 13px;

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

    outline: none;

    background:
        rgba(255, 255, 255, 0.045);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    transition: 0.3s ease;

}


.form-group input::placeholder {

    color: #646a80;

}


.form-group input:focus {

    border-color:
        rgba(160, 120, 240, 0.55);

    background:
        rgba(255, 255, 255, 0.065);

    box-shadow:
        0 0 0 4px rgba(130, 90, 220, 0.08);

}


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

.auth-button {

    border: none;

    margin-top: 5px;

    padding: 15px;

    border-radius: 14px;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    color: #ffffff;

    background:
        linear-gradient(100deg,
            #7554c9,
            #c95791);

    box-shadow:
        0 12px 30px rgba(120, 70, 190, 0.20);

    transition: 0.3s ease;

}


.auth-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 18px 38px rgba(150, 80, 200, 0.30);

}


.auth-button:active {

    transform: scale(0.98);

}


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

.auth-message {

    min-height: 18px;

    margin: 0;

    text-align: center;

    font-size: 12px;

    color: #d59ab8;

}


/* ================= SWITCH ================= */

.auth-switch {

    margin-top: 28px;

    padding-top: 24px;

    text-align: center;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    color: #777d93;

    font-size: 12px;

}


.auth-switch button {

    border: none;

    background: none;

    padding: 0;

    margin-left: 5px;

    color: #c19bea;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


.auth-switch button:hover {

    color: #ffffff;

}


/* ================= HIDDEN FORM ================= */

.hidden-form {

    display: none;

}


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

@media (max-width: 600px) {

    .auth-main {

        padding:
            105px 18px 40px;

    }


    .auth-card {

        padding:
            35px 23px;

        border-radius: 24px;

    }


    .auth-header h1 {

        font-size: 30px;

    }


    .auth-icon {

        width: 58px;
        height: 58px;

        font-size: 27px;

    }


    .auth-home-link {

        font-size: 12px;

    }

}















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

.account-menu {

    position: relative;

    margin-left: 10px;

}


.account-button {

    display: flex;

    align-items: center;

    gap: 8px;

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

    background:
        rgba(255, 255, 255, 0.045);

    color: #f8f7ff;

    padding: 9px 13px;

    border-radius: 50px;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition: 0.3s ease;

}


.account-button:hover {

    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(180, 140, 240, 0.30);

}


.account-icon {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #7657ca,
            #c95b91);

    color: white;

    font-size: 11px;

}


/* ================= DROPDOWN ================= */

.account-dropdown {

    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    width: 245px;

    padding: 15px;

    border-radius: 18px;

    background:
        rgba(15, 18, 35, 0.96);

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

    backdrop-filter: blur(22px);

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

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px);

    transition: 0.25s ease;

    z-index: 100;

}


.account-dropdown.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* ================= USER ================= */

.account-user {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 5px;

}


.account-avatar {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            rgba(120, 85, 210, 0.25),
            rgba(205, 85, 145, 0.18));

    color: #d1b8f5;

}


.account-user strong {

    display: block;

    color: #ffffff;

    font-size: 13px;

    margin-bottom: 3px;

}


.account-user small {

    display: block;

    color: #777d93;

    font-size: 10px;

    max-width: 155px;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* ================= DIVIDER ================= */

.account-divider {

    height: 1px;

    margin: 12px 0;

    background:
        rgba(255, 255, 255, 0.07);

}


/* ================= LOGOUT ================= */

.logout-button {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border: none;

    border-radius: 11px;

    background:
        transparent;

    color: #e09ab9;

    font-family: inherit;

    font-size: 12px;

    text-align: left;

    cursor: pointer;

    transition: 0.25s ease;

}


.logout-button:hover {

    background:
        rgba(210, 80, 140, 0.10);

    color: #ffffff;

}


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

@media (max-width: 768px) {

    .account-menu {

        margin-left: 0;

        margin-top: 10px;

    }


    .account-button {

        width: 100%;

        justify-content: center;

    }


    .account-dropdown {

        position: absolute;

        right: 0;

        width: 230px;

    }

}













/* =========================================================
   LOGIN PAGE — HOME STYLE HEADER + PREMIUM BACKGROUND
========================================================= */


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

.auth-page {

    min-height: 100vh;

    background:

        /* large purple glow */
        radial-gradient(circle at 20% 35%,
            rgba(132, 78, 225, 0.20),
            transparent 30%),

        /* pink glow */
        radial-gradient(circle at 84% 72%,
            rgba(230, 75, 160, 0.15),
            transparent 30%),

        /* subtle blue glow */
        radial-gradient(circle at 50% 100%,
            rgba(80, 100, 210, 0.10),
            transparent 35%),

        #080b18 !important;

    color: #f8f7ff;

    position: relative;

    overflow-x: hidden;

}


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

.auth-page::before {

    content: "";

    position: fixed;

    width: 520px;
    height: 520px;

    left: -260px;
    top: 250px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(125, 75, 225, 0.15),
            transparent 68%);

    filter: blur(15px);

    pointer-events: none;

    z-index: 0;

}


.auth-page::after {

    content: "";

    position: fixed;

    width: 480px;
    height: 480px;

    right: -230px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(225, 70, 160, 0.13),
            transparent 68%);

    filter: blur(18px);

    pointer-events: none;

    z-index: 0;

}


/* ================= EXTRA LIGHT ORBS ================= */

.auth-main::before {

    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: 18%;
    left: 23%;

    border-radius: 50%;

    background: #d39cff;

    box-shadow:
        0 0 15px rgba(211, 156, 255, 0.8),
        0 0 35px rgba(211, 156, 255, 0.35);

    opacity: 0.7;

    animation: authFloat 5s ease-in-out infinite;

}


.auth-main::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    right: 23%;
    top: 30%;

    border-radius: 50%;

    background: #f58fc6;

    box-shadow:
        0 0 15px rgba(245, 143, 198, 0.8),
        0 0 30px rgba(245, 143, 198, 0.35);

    opacity: 0.65;

    animation:
        authFloat 6s ease-in-out infinite reverse;

}


@keyframes authFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-15px);

    }

}


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

.auth-page .navbar {

    background:
        rgba(7, 10, 23, 0.86) !important;

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

    backdrop-filter:
        blur(18px);

    z-index: 100;

}


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

.auth-page .logo {

    color: #ffffff !important;

    font-weight: 700;

}


/* Make MoodTracker gradient like Home */

.auth-page .logo {

    background:
        linear-gradient(90deg,
            #ffffff 0%,
            #d9b7ff 48%,
            #ef7eb9 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


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

.auth-page .nav-links {

    display: flex;

    align-items: center;

    gap: 38px;

}


.auth-page .nav-link {

    position: relative;

    color: #777d93;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s ease;

}


.auth-page .nav-link:hover {

    color: #ffffff;

}


.auth-page .nav-link.active {

    color: #ffffff;

}


/* Home-style underline */

.auth-page .nav-link.active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -19px;

    height: 2px;

    border-radius: 5px;

    background:
        linear-gradient(90deg,
            #9b6cff,
            #f27db9);

    box-shadow:
        0 0 12px rgba(180, 100, 240, 0.7);

}


/* ================= SAFE SPACE ================= */

.auth-page .nav-status {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #777d93;

    font-size: 12px;

}


.auth-page .nav-status span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #65e5a3;

    box-shadow:
        0 0 8px rgba(101, 229, 163, 0.8),
        0 0 18px rgba(101, 229, 163, 0.35);

}


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

.auth-main {

    position: relative;

    z-index: 2;

}


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

.auth-card {

    background:

        linear-gradient(145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025));

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

    box-shadow:

        0 35px 90px rgba(0, 0, 0, 0.42),

        0 0 80px rgba(110, 70, 190, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(25px);

}


/* ================= AUTH ICON ================= */

.auth-icon {

    background:

        linear-gradient(135deg,
            rgba(140, 90, 225, 0.22),
            rgba(230, 90, 170, 0.15));

    border:
        1px solid rgba(175, 120, 245, 0.24);

    box-shadow:

        0 0 35px rgba(135, 80, 220, 0.18),

        inset 0 0 20px rgba(255, 255, 255, 0.025);

}


/* ================= AUTH BUTTON ================= */

.auth-button {

    background:

        linear-gradient(100deg,
            #9564f0,
            #ed65ae);

    box-shadow:
        0 12px 30px rgba(155, 75, 215, 0.22);

}


.auth-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px rgba(190, 80, 220, 0.32);

}


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

@media (max-width: 768px) {

    .auth-page .nav-links {

        gap: 18px;

    }

    .auth-page .nav-link.active::after {

        bottom: -7px;

    }

}


@media (max-width: 600px) {

    .auth-page .nav-links {

        display: none;

    }

    .auth-page .nav-status {

        display: none;

    }

}
/* Fix Login Header Active Underline */

.auth-page .nav-link.active::after {
    bottom: 20px !important;
}














/* =========================================================
   LOGIN — EXTRA PREMIUM BACKGROUND EFFECT
========================================================= */

.auth-page {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 18% 35%,
            rgba(130, 75, 230, 0.22),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 82% 25%,
            rgba(90, 100, 220, 0.10),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 85% 80%,
            rgba(225, 65, 165, 0.18),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 45% 100%,
            rgba(70, 110, 220, 0.10),
            transparent 35%
        ),
        #080b18 !important;
}


/* Large soft ambient glow */

.auth-page::before {

    content: "";

    position: fixed;

    width: 650px;
    height: 650px;

    left: -300px;
    top: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(135, 75, 235, 0.16),
            rgba(100, 70, 200, 0.06) 35%,
            transparent 70%
        );

    filter: blur(25px);

    pointer-events: none;

    animation: loginGlowLeft 9s ease-in-out infinite;

    z-index: 0;
}


/* Pink ambient glow */

.auth-page::after {

    content: "";

    position: fixed;

    width: 600px;
    height: 600px;

    right: -300px;
    bottom: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(225, 70, 165, 0.15),
            rgba(180, 60, 150, 0.05) 38%,
            transparent 70%
        );

    filter: blur(28px);

    pointer-events: none;

    animation: loginGlowRight 11s ease-in-out infinite;

    z-index: 0;
}


/* =========================================================
   SOFT ORBIT RINGS
========================================================= */

.auth-main {

    position: relative;

    overflow: hidden;
}


.auth-main::before {

    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    left: -170px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border:
        1px solid rgba(170, 125, 240, 0.07);

    box-shadow:
        0 0 0 55px rgba(170,125,240,0.025),
        0 0 0 110px rgba(170,125,240,0.018),
        0 0 0 165px rgba(170,125,240,0.012);

    pointer-events: none;

    z-index: 0;

    animation: orbitFloat 14s ease-in-out infinite;
}


.auth-main::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -130px;
    top: 12%;

    border-radius: 50%;

    border:
        1px solid rgba(240, 120, 190, 0.055);

    box-shadow:
        0 0 0 45px rgba(240,120,190,0.018),
        0 0 0 90px rgba(240,120,190,0.012);

    pointer-events: none;

    z-index: 0;

    animation: orbitFloat 12s ease-in-out infinite reverse;
}


/* =========================================================
   FLOATING LIGHT PARTICLES
========================================================= */

.auth-card::before {

    content: "✦";

    position: absolute;

    left: -210px;
    top: 35%;

    color: rgba(205, 155, 255, 0.65);

    font-size: 12px;

    text-shadow:
        0 0 15px rgba(205,155,255,0.8);

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


.auth-card::after {

    content: "·";

    position: absolute;

    right: -170px;
    top: 25%;

    color: rgba(245, 125, 190, 0.75);

    font-size: 28px;

    text-shadow:
        0 0 15px rgba(245,125,190,0.8);

    animation:
        particleFloat 9s ease-in-out infinite reverse;
}


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

@keyframes loginGlowLeft {

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

    50% {
        transform: translate(35px, -25px);
    }
}


@keyframes loginGlowRight {

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

    50% {
        transform: translate(-30px, -20px);
    }
}


@keyframes orbitFloat {

    0%,
    100% {
        transform: translateY(-50%) rotate(0deg);
    }

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


@keyframes particleFloat {

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

    50% {
        transform: translateY(-22px);
        opacity: 0.85;
    }
}
































/* =========================================================
   MOODTRACKER COSMIC LOGIN DESIGN
========================================================= */


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

.auth-page {

    min-height: 100vh;

    margin: 0;

    color: #f8f7ff;

    background:

        radial-gradient(circle at 15% 50%,
            rgba(115, 68, 210, 0.25),
            transparent 30%),

        radial-gradient(circle at 85% 70%,
            rgba(221, 71, 169, 0.18),
            transparent 32%),

        radial-gradient(circle at 55% 30%,
            rgba(63, 83, 190, 0.12),
            transparent 30%),

        #050817;

    overflow-x: hidden;

    position: relative;

}


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

.cosmic-bg {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

}


/* =========================================================
   PLANETS
========================================================= */

.cosmic-planet {

    position: absolute;

    border-radius: 50%;

}


/* Purple planet */

.planet-purple {

    width: 430px;
    height: 430px;

    left: -190px;
    top: -110px;

    background:

        radial-gradient(circle at 60% 35%,
            #bd8cff,
            #7136b9 45%,
            #241044 75%,
            transparent 76%);

    box-shadow:

        0 0 90px rgba(143, 78, 230, 0.35),

        inset -35px -30px 80px rgba(12, 5, 35, 0.55);

    opacity: 0.9;

}


/* Pink planet */

.planet-pink {

    width: 430px;
    height: 430px;

    right: -170px;
    bottom: -210px;

    background:

        radial-gradient(circle at 35% 30%,
            #e78cff,
            #913bba 45%,
            #35104b 76%,
            transparent 77%);

    box-shadow:

        0 0 100px rgba(227, 74, 176, 0.25),

        inset 30px 30px 80px rgba(35, 5, 45, 0.55);

    opacity: 0.78;

}


/* Blue planet */

.planet-blue {

    width: 190px;
    height: 190px;

    right: 90px;
    bottom: -30px;

    background:

        radial-gradient(circle at 35% 30%,
            #8aa6ff,
            #4058b5 45%,
            #151c55 76%);

    box-shadow:

        0 0 65px rgba(82, 109, 240, 0.22),

        inset -20px -25px 45px rgba(5, 8, 30, 0.65);

    opacity: 0.75;

}


/* =========================================================
   ORBIT LINES
========================================================= */

.cosmic-orbit {

    position: absolute;

    border: 1px solid rgba(196, 133, 255, 0.18);

    border-radius: 50%;

    transform: rotate(-20deg);

}


.orbit-one {

    width: 720px;
    height: 360px;

    left: -150px;
    top: 150px;

}


.orbit-two {

    width: 900px;
    height: 450px;

    left: -120px;
    top: 70px;

    border-color:
        rgba(233, 114, 204, 0.10);

}


.orbit-three {

    width: 1100px;
    height: 550px;

    left: -100px;
    top: 20px;

    border-color:
        rgba(119, 143, 255, 0.07);

}


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

.star {

    position: absolute;

    color: #dca6ff;

    text-shadow:
        0 0 12px rgba(210, 150, 255, 0.9);

    animation:
        starFloat 5s ease-in-out infinite;

}


.star-1 {

    left: 27%;

    top: 20%;

    font-size: 14px;

}


.star-2 {

    right: 30%;

    top: 25%;

    font-size: 10px;

    animation-delay: 1s;

}


.star-3 {

    left: 48%;

    top: 17%;

    font-size: 25px;

    color: #f49bd1;

    animation-delay: 2s;

}


.star-4 {

    right: 24%;

    bottom: 25%;

    font-size: 13px;

    animation-delay: 1.5s;

}


.star-5 {

    left: 37%;

    bottom: 17%;

    font-size: 22px;

    color: #b8c6ff;

    animation-delay: 3s;

}


@keyframes starFloat {

    0%,
    100% {

        transform: translateY(0);

        opacity: 0.35;

    }

    50% {

        transform: translateY(-12px);

        opacity: 1;

    }

}


/* =========================================================
   NAVBAR
========================================================= */

.auth-page .navbar {

    position: relative;

    z-index: 20;

    background:
        rgba(4, 7, 20, 0.78) !important;

    backdrop-filter:
        blur(20px);

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

}


.auth-page .logo {

    color: #ffffff !important;

    background:
        linear-gradient(90deg,
            #ffffff,
            #d39bff,
            #ee78bd);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


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

.auth-main {

    min-height:
        calc(100vh - 78px);

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        1fr minmax(400px, 520px) 1fr;

    align-items: center;

    gap: 45px;

    padding:
        50px 11%;

}


/* =========================================================
   SIDE CONTENT
========================================================= */

.auth-side {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

}


.auth-side-left {

    align-items: flex-start;

}


.auth-side-right {

    align-items: flex-end;

}


/* =========================================================
   LEFT TITLE
========================================================= */

.side-content {

    margin-top: -20px;

}


.side-small {

    display: block;

    font-family: Georgia, serif;

    font-size: 58px;

    line-height: 0.7;

    color: #f5f2ff;

}


.side-content h1 {

    margin: 12px 0 0;

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

    font-size: clamp(55px, 5vw, 78px);

    line-height: 0.92;

    font-weight: 400;

    letter-spacing: -3px;

    color: #f7f4ff;

}


.side-content h1 span {

    display: block;

    background:
        linear-gradient(90deg,
            #a875f2,
            #e978c0);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.side-line {

    width: 38px;

    height: 2px;

    margin: 25px 0;

    background:
        linear-gradient(90deg,
            #b47aff,
            #ee78bd);

    box-shadow:
        0 0 15px rgba(190, 110, 255, 0.5);

}


.side-content p {

    margin: 0;

    color: #a9aec4;

    font-size: 16px;

    line-height: 1.65;

}


/* =========================================================
   BOTTOM LEFT
========================================================= */

.side-bottom {

    position: absolute;

    bottom: 25px;

    left: 0;

    color: #888da7;

    font-size: 10px;

    letter-spacing: 4px;

}


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

.auth-card {

    width: 100%;

    box-sizing: border-box;

    padding:
        40px 45px 30px;

    border-radius: 28px;

    background:

        linear-gradient(145deg,
            rgba(28, 31, 51, 0.88),
            rgba(12, 15, 31, 0.80));

    border:
        1px solid rgba(153, 137, 255, 0.30);

    backdrop-filter:
        blur(28px);

    box-shadow:

        0 35px 100px rgba(0, 0, 0, 0.45),

        0 0 60px rgba(104, 76, 210, 0.13),

        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    position: relative;

}


/* Card top glow */

.auth-card::before {

    content: "";

    position: absolute;

    left: 10%;

    right: 10%;

    top: -1px;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #9b7aff,
            #ed7bc0,
            transparent);

    opacity: 0.9;

}


/* =========================================================
   ICON
========================================================= */

.auth-icon {

    width: 68px;

    height: 68px;

    margin:
        0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:

        linear-gradient(135deg,
            rgba(139, 88, 225, 0.24),
            rgba(225, 88, 175, 0.16));

    border:
        1px solid rgba(185, 135, 255, 0.25);

    color: #ffffff;

    font-size: 28px;

    box-shadow:
        0 0 35px rgba(130, 80, 220, 0.18);

}


/* =========================================================
   HEADING
========================================================= */

.auth-heading {

    text-align: center;

    margin-bottom: 30px;

}


.auth-eyebrow {

    color: #bca0ee;

    font-size: 11px;

    letter-spacing: 4px;

    font-weight: 600;

}


.auth-heading h2 {

    margin:
        16px 0 5px;

    font-size: 38px;

    letter-spacing: -1.5px;

    color: #ffffff;

}


.auth-heading p {

    margin: 0;

    color: #9298af;

    font-size: 14px;

}


/* =========================================================
   FORM
========================================================= */

.auth-form {

    width: 100%;

}


.form-group {

    margin-bottom: 18px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #d9d9e5;

    font-size: 12px;

    font-weight: 600;

}


.input-wrap {

    position: relative;

}


.input-icon {

    position: absolute;

    left: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #7d8299;

    font-size: 14px;

}


.input-wrap input {

    padding-left: 43px !important;

}


.auth-form input {

    width: 100%;

    height: 49px;

    box-sizing: border-box;

    border-radius: 14px;

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

    outline: none;

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

    color: #ffffff;

    padding:
        0 16px;

    font-family: inherit;

    font-size: 13px;

    transition: 0.3s ease;

}


.auth-form input::placeholder {

    color: #656b82;

}


.auth-form input:focus {

    border-color:
        rgba(177, 120, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.075);

    box-shadow:
        0 0 0 3px rgba(155, 100, 240, 0.08);

}


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

.auth-button {

    width: 100%;

    height: 52px;

    margin-top: 7px;

    border: none;

    border-radius: 15px;

    background:

        linear-gradient(100deg,
            #9564f0,
            #ee63ad);

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 14px 35px rgba(165, 70, 220, 0.22);

    transition: 0.3s ease;

}


.auth-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 42px rgba(185, 75, 225, 0.32);

}


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

.auth-message {

    min-height: 18px;

    margin:
        10px 0 0;

    text-align: center;

    color: #d89ac0;

    font-size: 12px;

}


/* =========================================================
   SWITCH
========================================================= */

.auth-switch {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 24px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    color: #777d94;

    font-size: 12px;

}


.auth-switch button {

    border: none;

    background: none;

    color: #d99bea;

    font-family: inherit;

    font-weight: 700;

    cursor: pointer;

}


.auth-switch button:hover {

    color: #ffffff;

}


/* =========================================================
   HIDDEN REGISTER FORM
========================================================= */

.hidden-form {

    display: none !important;

}


/* =========================================================
   RIGHT QUOTE
========================================================= */

.quote {

    display: flex;

    align-items: flex-start;

    gap: 24px;

    margin-top: -80px;

}


.quote-line {

    width: 1px;

    height: 150px;

    flex-shrink: 0;

    background:
        linear-gradient(to bottom,
            transparent,
            #c58aff,
            transparent);

}


.quote p {

    margin: 0;

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

    font-size: 23px;

    line-height: 1.5;

    color: #aeb0c7;

}


/* =========================================================
   RIGHT BOTTOM
========================================================= */

.right-bottom {

    position: absolute;

    right: 0;

    bottom: 25px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    color: #8c91aa;

    font-size: 9px;

    letter-spacing: 4px;

}


.right-bottom strong {

    margin-top: 7px;

    color: #b8a1d8;

    font-size: 12px;

    letter-spacing: 5px;

    font-weight: 500;

}


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

@media (max-width: 1050px) {

    .auth-main {

        grid-template-columns:
            0.7fr minmax(390px, 500px);

        padding:
            50px 6%;

    }

    .auth-side-right {

        display: none;

    }

}


@media (max-width: 780px) {

    .auth-main {

        display: flex;

        justify-content: center;

        min-height:
            calc(100vh - 75px);

        padding:
            35px 20px;

    }


    .auth-side-left {

        display: none;

    }


    .auth-card {

        max-width: 500px;

        padding:
            35px 28px 28px;

    }


    .planet-purple {

        width: 250px;
        height: 250px;

        left: -130px;

        top: 80px;

    }


    .planet-pink {

        width: 250px;
        height: 250px;

        right: -130px;

        bottom: -80px;

    }


    .planet-blue {

        display: none;

    }


    .auth-page .nav-links {

        display: none;

    }


    .auth-page .nav-status {

        display: none;

    }

}


@media (max-width: 480px) {

    .auth-card {

        padding:
            30px 20px 24px;

        border-radius: 22px;

    }


    .auth-heading h2 {

        font-size: 31px;

    }


    .auth-eyebrow {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .auth-icon {

        width: 58px;
        height: 58px;

        font-size: 23px;

    }

}














/* =========================================================
   MOODTRACKER LOGIN — FINAL REFINED COSMIC STYLE
   Add at the VERY BOTTOM of style.css
========================================================= */


/* ---------- BASE BACKGROUND ---------- */

.auth-page {
    background:
        radial-gradient(circle at 12% 45%,
            rgba(113, 74, 205, 0.20),
            transparent 28%),
        radial-gradient(circle at 88% 72%,
            rgba(220, 70, 170, 0.14),
            transparent 30%),
        radial-gradient(circle at 55% 15%,
            rgba(70, 90, 190, 0.10),
            transparent 25%),
        #070a19 !important;

    overflow: hidden;
}


/* ---------- BACKGROUND LAYER ---------- */

.cosmic-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}


/* ---------- PURPLE GLOW ---------- */

.planet-purple {
    width: 320px;
    height: 320px;

    left: -170px;
    top: 250px;

    background:
        radial-gradient(circle at 65% 35%,
            rgba(190, 140, 255, 0.34),
            rgba(115, 65, 190, 0.18) 45%,
            transparent 72%);

    filter: blur(2px);

    opacity: 0.75;

    box-shadow:
        0 0 100px rgba(130, 80, 230, 0.18);
}


/* ---------- PINK GLOW ---------- */

.planet-pink {
    width: 280px;
    height: 280px;

    right: -130px;
    bottom: 30px;

    background:
        radial-gradient(circle at 35% 35%,
            rgba(245, 120, 205, 0.25),
            rgba(180, 55, 155, 0.12) 45%,
            transparent 72%);

    filter: blur(3px);

    opacity: 0.7;

    box-shadow:
        0 0 100px rgba(220, 70, 170, 0.15);
}


/* ---------- BLUE GLOW ---------- */

.planet-blue {
    width: 130px;
    height: 130px;

    right: 7%;
    bottom: 5%;

    background:
        radial-gradient(circle at 35% 30%,
            rgba(125, 150, 255, 0.28),
            rgba(65, 80, 180, 0.12) 50%,
            transparent 72%);

    filter: blur(2px);

    opacity: 0.65;

    box-shadow:
        0 0 70px rgba(80, 100, 230, 0.16);
}


/* ---------- ORBIT LINES ---------- */

.cosmic-orbit {
    border-color:
        rgba(177, 130, 255, 0.10);

    opacity: 0.7;
}

.orbit-one {
    width: 650px;
    height: 320px;

    left: -190px;
    top: 230px;

    transform: rotate(-18deg);
}

.orbit-two {
    width: 820px;
    height: 410px;

    left: -230px;
    top: 180px;

    transform: rotate(-18deg);

    border-color:
        rgba(218, 116, 201, 0.06);
}

.orbit-three {
    width: 1000px;
    height: 500px;

    left: -270px;
    top: 120px;

    transform: rotate(-18deg);

    border-color:
        rgba(100, 130, 255, 0.045);
}


/* =========================================================
   STARS — SUBTLE
========================================================= */

.star {
    z-index: 1;

    color: #d9b3ff;

    text-shadow:
        0 0 12px rgba(200, 150, 255, 0.7);
}

.star-1 {
    left: 30%;
    top: 25%;
}

.star-2 {
    right: 31%;
    top: 23%;
}

.star-3 {
    left: 45%;
    top: 18%;
}

.star-4 {
    right: 25%;
    bottom: 28%;
}

.star-5 {
    left: 34%;
    bottom: 18%;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.auth-main {
    position: relative;
    z-index: 5;

    grid-template-columns:
        minmax(250px, 1fr) minmax(420px, 500px) minmax(250px, 1fr);

    gap: 55px;

    padding:
        45px 10% 55px;
}


/* =========================================================
   LEFT SIDE — KEEP IT ABOVE BACKGROUND
========================================================= */

.auth-side-left {
    position: relative;
    z-index: 10;
}

.side-content {
    position: relative;
    z-index: 10;

    max-width: 260px;
}


/* Make the left text cleaner */

.side-content h1 {
    font-size: clamp(52px, 4.5vw, 72px);

    line-height: 0.94;

    letter-spacing: -2px;

    text-shadow:
        0 8px 35px rgba(0, 0, 0, 0.25);
}


/* Paragraph */

.side-content p {
    color: #aeb2c8;

    font-size: 15px;

    line-height: 1.7;
}


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

.auth-card {
    position: relative;
    z-index: 20;

    max-width: 500px;

    background:
        linear-gradient(145deg,
            rgba(25, 29, 50, 0.94),
            rgba(10, 14, 29, 0.91));

    border:
        1px solid rgba(170, 135, 255, 0.28);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.48),
        0 0 70px rgba(110, 70, 210, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(25px);
}


/* Elegant top edge */

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

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #a678ff,
            #eb78bd,
            transparent);

    box-shadow:
        0 0 15px rgba(180, 110, 255, 0.5);
}


/* =========================================================
   RIGHT QUOTE
========================================================= */

.auth-side-right {
    position: relative;
    z-index: 10;
}

.quote {
    position: relative;
    z-index: 10;

    margin-top: -50px;
}

.quote p {
    color: #b9b5cc;

    font-size: 21px;

    line-height: 1.55;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   SAFE SPACE
========================================================= */

.auth-page .nav-status {
    position: relative;
    z-index: 30;
}


/* =========================================================
   INPUT — KEEP DARK EVEN WITH AUTOFILL
========================================================= */

.auth-form input,
.auth-form input:focus {
    background:
        rgba(255, 255, 255, 0.045);

    color: #ffffff;
}

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;

    -webkit-box-shadow:
        0 0 0 1000px #1b1e31 inset;

    box-shadow:
        0 0 0 1000px #1b1e31 inset;

    caret-color: #ffffff;

    border-color:
        rgba(175, 125, 255, 0.55);
}


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

.auth-button {
    background:
        linear-gradient(100deg,
            #9564f0 0%,
            #c064d0 50%,
            #ee63ad 100%);

    box-shadow:
        0 14px 35px rgba(170, 70, 220, 0.20);
}

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

    box-shadow:
        0 18px 45px rgba(190, 75, 225, 0.30);
}


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

@media (max-width: 1050px) {

    .auth-main {
        grid-template-columns:
            minmax(220px, 1fr) minmax(400px, 500px);

        gap: 35px;

        padding-left: 6%;
        padding-right: 6%;
    }

    .auth-side-right {
        display: none;
    }
}


@media (max-width: 780px) {

    .auth-main {
        display: flex;

        justify-content: center;

        padding:
            35px 20px 50px;
    }

    .auth-side-left {
        display: none;
    }

    .auth-card {
        width: 100%;
        max-width: 500px;
    }

    .planet-purple {
        width: 220px;
        height: 220px;

        left: -140px;
        top: 250px;
    }

    .planet-pink {
        width: 200px;
        height: 200px;

        right: -110px;
        bottom: 0;
    }

    .orbit-one,
    .orbit-two,
    .orbit-three {
        opacity: 0.35;
    }
}



















/* =========================================================
   LOGIN — LEFT PURPLE ORB FINAL STYLE
   Soft 3D look like the bottom-right orb
========================================================= */

/* DARK + BLURRED PURPLE CIRCLE */

.auth-page .planet-purple {
    width: 340px !important;
    height: 340px !important;

    left: -165px !important;
    top: 270px !important;

    background:
        radial-gradient(circle at 35% 30%,
            rgba(80, 55, 125, 0.22)
            rgba(75, 45, 120, 0.20) 45%,
            rgba(15, 12, 32, 0.12) 70%,
            transparent 100%) !important;

    filter: blur(14px) !important;

    opacity: 0.40 !important;

    box-shadow:
        0 0 80px rgba(100, 60, 170, 0.12),
        inset -30px -30px 70px rgba(5, 5, 15, 0.45) !important;
}


/* Soft highlight inside the orb */

.auth-page .planet-purple::after {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.13),
            transparent 28%);

    pointer-events: none;
}


/* Slight atmospheric glow around it */

.auth-page .planet-purple::before {
    content: "";

    position: absolute;

    width: 120%;
    height: 120%;

    left: -10%;
    top: -10%;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(157, 124, 255, 0.12),
            transparent 65%);

    filter: blur(20px);

    z-index: -1;
}









/* =========================================================
   LOGIN PAGE — FIX CARD SCROLL
========================================================= */

.auth-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.auth-main {
    min-height: calc(100vh - 78px);
    height: auto !important;
}