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

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

body{
    background:#070707;
    color:#ffffff;

    font-family:'Inter',sans-serif;

    line-height:1.7;

    overflow-x:hidden;
}

html{
    scroll-behavior:smooth;
}

a{
    text-decoration:none;
}

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

.background-glow{

    position:fixed;

    top:-250px;
    right:-200px;

    width:700px;
    height:700px;

    background:radial-gradient(
        circle,
        rgba(255,0,120,0.16),
        transparent 70%
    );

    z-index:-1;

    pointer-events:none;
}

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

.navbar{

    width:100%;
    max-width:1150px;

    margin:auto;

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

    padding:28px 20px;
}

.logo{

    font-size:1.9rem;
    font-weight:800;

    background:linear-gradient(
        90deg,
        #ff0080,
        #7b61ff
    );

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

.nav-links{

    display:flex;
    align-items:center;

    gap:26px;
}

.nav-links a{

    color:#c8c8c8;

    font-size:0.96rem;
    font-weight:500;

    transition:0.3s;
}

.nav-links a:hover{

    color:white;
}

.nav-btn{

    background:linear-gradient(
        90deg,
        #ff0080,
        #7b61ff
    );

    color:white !important;

    padding:12px 22px;

    border-radius:14px;

    font-weight:600;
}

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

.page-hero{

    width:100%;
    max-width:850px;

    margin:auto;

    padding:70px 20px 30px;
}

.page-badge{

    display:inline-block;

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

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

    padding:9px 16px;

    border-radius:999px;

    font-size:0.82rem;
    font-weight:600;

    color:#d0d0d0;

    margin-bottom:22px;
}

.page-hero h1{

    font-size:3rem;
    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

    letter-spacing:-1px;
}

.page-hero h1 span{

    background:linear-gradient(
        90deg,
        #ff0080,
        #7b61ff
    );

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

.page-hero p{

    color:#aaaaaa;

    font-size:1rem;

    line-height:1.9;

    max-width:760px;
}

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

.content-section{

    width:100%;
    max-width:900px;

    margin:auto;

    padding:20px;
}

/* =========================================
   SIMPLE CONTENT CARDS
========================================= */

.glass-card{

    padding:34px 0;

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

.glass-card h2{

    font-size:1.45rem;

    font-weight:600;

    margin-bottom:18px;

    letter-spacing:-0.5px;
}

.glass-card p{

    color:#b6b6b6;

    font-size:1rem;

    line-height:1.9;

    margin-bottom:16px;
}

.glass-card ul{

    padding-left:22px;

    margin-top:12px;
}

.glass-card li{

    color:#b6b6b6;

    margin-bottom:12px;

    line-height:1.8;
}

/* =========================================
   AUTH PAGES
========================================= */

.auth-section{

    width:100%;
    min-height:100vh;

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

    padding:40px 20px 80px;
}

.auth-container{

    width:100%;
    max-width:1150px;

    display:grid;

    grid-template-columns:1fr 460px;

    gap:60px;

    align-items:center;
}

.auth-left h1{

    font-size:3.2rem;

    line-height:1.2;

    margin-bottom:22px;

    font-weight:700;
}

.auth-left h1 span{

    background:linear-gradient(
        90deg,
        #ff0080,
        #7b61ff
    );

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

.auth-left p{

    color:#a9a9a9;

    line-height:1.9;

    margin-bottom:32px;
}

.auth-features{

    display:flex;
    flex-direction:column;

    gap:22px;
}

.auth-features .glass-card{

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

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

    border-radius:22px;

    padding:24px;
}


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

.auth-card{

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

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

    border-radius:28px;

    padding:38px;
}

.auth-title{

    font-size:2rem;

    margin-bottom:10px;
}

.auth-subtitle{

    color:#a7a7a7;

    margin-bottom:28px;
}

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

.input-group{

    margin-bottom:22px;
}

.input-group label{

    display:block;

    margin-bottom:10px;

    color:#e1e1e1;

    font-size:0.94rem;

    font-weight:600;
}

input,
textarea{

    width:100%;

    background:#101010;

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

    color:white;

    padding:16px 18px;

    border-radius:16px;

    outline:none;

    font-size:0.96rem;

    transition:0.3s;
}

input:focus,
textarea:focus{

    border-color:#ff0080;
}

input::placeholder,
textarea::placeholder{

    color:#7d7d7d;
}

textarea{

    resize:vertical;

    min-height:140px;
}

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

.primary-btn,
button{

    border:none;
    outline:none;

    background:linear-gradient(
        90deg,
        #ff0080,
        #7b61ff
    );

    color:white;

    padding:15px 22px;

    border-radius:16px;

    font-size:0.96rem;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.primary-btn:hover,
button:hover{

    transform:translateY(-2px);
}

/* =========================================
   DASHBOARD
========================================= */

.dashboard-layout{

    display:flex;

    min-height:100vh;
}

/* SIDEBAR */

.sidebar{

    width:220px;

    background:#0d0d0d;

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

    padding:24px 18px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    position:sticky;
    top:0;

    height:100vh;
}

.sidebar-logo{

    font-size:1.8rem;

    font-weight:800;

    margin-bottom:40px;

    line-height:1.3;

    background:linear-gradient(
        90deg,
        #ff0080,
        #7b61ff
    );

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

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:10px;
}
.sidebar-menu a{

    color:#c8c8c8;

    padding:12px 16px;

    border-radius:14px;

    transition:0.25s ease;

    font-size:0.95rem;

    font-weight:500;

    display:flex;

    align-items:center;

    gap:14px;
}

.sidebar-menu a:hover,
.active-link{

    transform:translateX(4px);

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

    color:white !important;
}

/* =========================================
   MINI UPGRADE BUTTON
========================================= */

.upgrade-mini-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    margin-top:auto;

    padding:13px 16px;

    border-radius:14px;

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

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

    color:white;

    font-size:0.92rem;

    font-weight:600;

    transition:0.25s ease;
}

.upgrade-mini-btn:hover{

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

    transform:translateY(-2px);
}

/* MAIN DASHBOARD */

.dashboard-main{

    flex:1;

    padding:54px 60px;

    width:100%;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:42px;
}

.dashboard-content-wrapper{

    width:100%;

    max-width:1420px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:38px;
}

/* HEADER */

.dashboard-header{

    display:flex;
    justify-content:flex-start;
    align-items:center;

    gap:30px;

    margin-bottom:45px;

    width:100%;
}

.dashboard-label{

    color:#8d8d8d;

    font-size:0.84rem;

    font-weight:600;

    margin-bottom:10px;

    letter-spacing:1px;
}

.dashboard-title{

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:12px;

    line-height:1.2;
}

.dashboard-subtitle{

    color:#a7a7a7;

    font-size:1rem;
}

/* STATS GRID */

.stats-grid{

    display:flex;

    gap:24px;

    flex-wrap:wrap;
}

.stats-card{

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

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

    border-radius:24px;

    padding:22px;

    min-width:280px;

    flex:0 0 280px;
}

.stats-card h3{

    font-size:2rem;

    margin-bottom:12px;

    font-weight:700;
}

.stats-card p{

    color:#a8a8a8;

    line-height:1.7;
}


/* GENERATOR */

.dashboard-generator{

    margin-bottom:50px;
}

.generator-card{

    width:100%;

    padding:42px;

    border-radius:30px;

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

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

    backdrop-filter:blur(10px);

    overflow:hidden;
}

#dashboardResults{

    display:grid;

    grid-template-columns:repeat(
        auto-fit,
        minmax(260px,1fr)
    );

    gap:22px;

    margin-top:35px;
}

/* RESULT + TREND CARDS */

.result-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:18px;

    min-height:180px;

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

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

    border-radius:24px;

    padding:20px;

    transition:0.3s;

    backdrop-filter:blur(12px);
}

.result-card:hover{

    transform:translateY(-3px);

    border-color:rgba(255,0,120,0.18);
}

.result-card h3{

    font-size:1.2rem;

    margin-bottom:14px;

    font-weight:600;
}

.result-card p{

    width:100%;

    overflow:hidden;

    min-height:auto;

    color:#adadad;

    line-height:1.8;

    font-size:1rem;

    padding-bottom:28px;
}

.primary-btn:disabled{

    opacity:0.7;

    cursor:not-allowed;

    transform:none;
}

/* RESPONSIVE */

@media(max-width:1000px){

    .dashboard-layout{

        flex-direction:column;
    }

    .sidebar{

        width:100%;

        height:auto;

        position:relative;
    }

    .dashboard-main{

        padding:28px;
    }

    .dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    width:100%;
    }
}

@media(max-width:768px){

    .dashboard-title{

        font-size:2.3rem;
    }

    .stats-grid,
    .recent-grid{

        grid-template-columns:1fr;
    }
}

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

.footer{

    width:100%;
    max-width:1100px;

    margin:auto;

    padding:50px 20px;

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

    margin-top:60px;
}

.footer-links{

    display:flex;
    justify-content:center;

    gap:24px;

    margin-bottom:18px;
}

.footer-links a{

    color:#b8b8b8;
}

.footer p{

    text-align:center;

    color:#7f7f7f;
}

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

@media(max-width:1000px){

    .auth-container,
    .contact-layout{

        grid-template-columns:1fr;
    }

    .dashboard-layout{

        flex-direction:column;
    }

    .sidebar{

        width:100%;
    }
}

@media(max-width:768px){

    .navbar{

        flex-direction:column;

        gap:20px;
    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;
    }

    .page-hero h1{

        font-size:2.3rem;
    }

    .auth-left h1{

        font-size:2.5rem;
    }

    .dashboard-main{

        padding:24px;
    }

    .dashboard-topbar{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;
    }
}

@media(max-width:500px){

    .page-hero h1{

        font-size:2rem;
    }

    .auth-card{

        padding:28px 22px;
    }
}

/* =========================================
   ADVANCED GENERATOR TOP
========================================= */

.generator-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;
}

.generator-top h2{

    font-size:1.9rem;

    font-weight:700;

    margin-top:6px;
}

.mini-label{

    color:#8f8f8f;

    font-size:0.8rem;

    letter-spacing:1px;

    font-weight:600;
}

.generator-badge{

    background:rgba(255,0,120,0.12);

    border:1px solid rgba(255,0,120,0.22);

    color:#ff8dc8;

    padding:10px 16px;

    border-radius:999px;

    font-size:0.82rem;

    font-weight:600;
}

/* =========================================
   GENERATOR GRID
========================================= */

.generator-grid{

    display:grid;

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

    gap:26px;

    width:100%;
}

/* =========================================
   SELECT
========================================= */

select{

    width:100%;

    background:#101010;

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

    color:white;

    padding:16px 18px;

    border-radius:16px;

    outline:none;

    font-size:0.96rem;

    transition:0.3s;
}

select:focus{

    border-color:#ff0080;
}

select option{

    background:#111;
}

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

.advanced-btn{

    width:100%;

    margin:8px 0 24px;

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

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

    padding:18px;

    border-radius:18px;
}

/* =========================================
   ADVANCED CONTROLS
========================================= */

.advanced-controls{

    margin-bottom:26px;
}

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

.generate-main-btn{

    width:100%;

    padding:17px 22px;

    font-size:1rem;
}

/* =========================================
   MAIN SCORE CARD
========================================= */

.score-card{

    width:100%;

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

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

    border-radius:28px;

    padding:30px;

    display:flex;

    align-items:center;

    gap:28px;

    margin-bottom:22px;

    overflow:hidden;
    
    backdrop-filter:blur(12px);
}

/* =========================================
   SCORE CIRCLE
========================================= */

.score-circle{

    width:130px;

    height:130px;

    border-radius:50%;

    background:conic-gradient(
        #ff0080 0deg,
        #7b61ff 300deg,
        rgba(255,255,255,0.08) 300deg
    );

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    position:relative;
}

.score-circle::before{

    content:"";

    position:absolute;

    width:92px;

    height:92px;

    border-radius:50%;

    background:#0c0c0c;
}

/* =========================================
   SCORE NUMBER
========================================= */

.score-number{

    position:relative;

    z-index:2;

    font-size:2rem;

    font-weight:800;
}

/* =========================================
   MINI SCORE CARD
========================================= */

.mini-score-card{

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

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

    border-radius:20px;

    padding:18px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:78px;
}

.mini-score-card span{

    color:#9e9e9e;

    font-size:0.92rem;
}

.mini-score-card strong{

    font-size:2rem;

    font-weight:700;
}

/* =========================================
   RESULT TOP
========================================= */

.result-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:18px;
}

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

.regenerate-btn{

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

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

    color:white;

    padding:9px 14px;

    border-radius:12px;

    font-size:0.82rem;

    font-weight:600;

    cursor:pointer;

    transition:0.25s ease;
}

.regenerate-btn:hover{

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

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

@media(max-width:768px){

    .generator-top{

        flex-direction:column;

        align-items:flex-start;
    }

    .score-card{

        flex-direction:column;

        align-items:flex-start;
    }

    .score-number{

        font-size:1.7rem;
    }

}

/* =========================================
   GENERATED CONTENT SECTION
========================================= */

.generated-content-section{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-top:34px;
}

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

.content-card{

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

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

    border-radius:28px;

    padding:28px;

    backdrop-filter:blur(12px);

    overflow:hidden;

    transition:0.25s ease;
}

.content-card:hover{

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

    transform:translateY(-2px);
}

/* =========================================
   CONTENT CARD TOP
========================================= */

.content-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-bottom:20px;
}

.content-card-top h3{

    font-size:1.25rem;

    font-weight:700;

    margin:0;
}

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

.content-card p{

    color:#d1d1d1;

    line-height:1.9;

    font-size:1rem;
}

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

.analytics-section {
    margin-top: 38px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mini-score-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.mini-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(
        #ff0080 0deg,
        #7b61ff 280deg,
        rgba(255, 255, 255, 0.08) 280deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.score-circle::before{

    content:"";

    position:absolute;

    width:102px;

    height:102px;

    border-radius:50%;

    background:#0d0d0d;
}

/* =========================================
   SCORE NUMBER
========================================= */

.score-number{

    position:relative;

    z-index:2;

    font-size:2.2rem;

    font-weight:800;
}

/* =========================================
   SCORE INFO
========================================= */

.score-info{

    display:flex;

    flex-direction:column;

    gap:16px;
}

.score-info h3{

    font-size:1.8rem;

    font-weight:700;

    margin:0;

    line-height:1.1;
}

.score-info p{

    color:#b7b7b7;

    line-height:1.8;

    max-width:620px;
}

/* =========================================
   MINI ANALYTICS GRID
========================================= */

.mini-analytics-grid{

    display:grid;

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

    gap:20px;
}

/* =========================================
   MINI SCORE CARD
========================================= */

.mini-score-card{

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

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

    border-radius:24px;

    padding:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

    text-align:center;

    backdrop-filter:blur(10px);
}

/* =========================================
   MINI CIRCLE
========================================= */

.mini-circle{

    width:72px;

    height:72px;

    border-radius:50%;

    background:conic-gradient(
        #ff0080 0deg,
        #7b61ff 280deg,
        rgba(255,255,255,0.08) 280deg
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.1rem;
}

/* =========================================
   MINI SCORE TEXT
========================================= */

.mini-score-card span{

    color:#bdbdbd;

    font-size:0.95rem;

    line-height:1.5;
}

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

.regenerate-btn{

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

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

    color:white;

    padding:10px 15px;

    border-radius:12px;

    font-size:0.82rem;

    font-weight:600;

    cursor:pointer;

    transition:0.25s ease;
}

.regenerate-btn:hover{

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

    transform:translateY(-1px);
}

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

@media(max-width:900px){

    .main-score-card{

        flex-direction:column;

        align-items:flex-start;
    }

    .mini-analytics-grid{

        grid-template-columns:1fr;
    }

    .content-card-top{

        flex-direction:column;

        align-items:flex-start;
    }

}

@media(max-width:600px){

    .score-circle{

        width:120px;

        height:120px;
    }

    .score-circle::before{

        width:88px;

        height:88px;
    }

    .score-number{

        font-size:1.8rem;
    }

    .score-info h3{

        font-size:1.5rem;
    }

    .content-card{

        padding:22px;
    }

}

/* =========================================
   PREMIUM UI LAYER
========================================= */

/* RESULTS LAYOUT */

#dashboardResults{

    display:flex;

    flex-direction:column;

    gap:34px;

    margin-top:45px;

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity 0.8s cubic-bezier(.16,1,.3,1),
        transform 0.8s cubic-bezier(.16,1,.3,1);
}

#dashboardResults.results-visible{

    opacity:1;

    transform:translateY(0);
}

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

.particles-bg{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-2;

    pointer-events:none;
}

.particles-bg span{

    position:absolute;

    width:4px;
    height:4px;

    border-radius:999px;

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

    box-shadow:
        0 0 12px rgba(255,255,255,0.12);

    animation:
        floatParticle linear infinite;
}

/* RANDOM POSITIONS */

.particles-bg span:nth-child(1){

    left:8%;
    top:90%;

    animation-duration:18s;
}

.particles-bg span:nth-child(2){

    left:20%;
    top:100%;

    animation-duration:24s;
}

.particles-bg span:nth-child(3){

    left:35%;
    top:95%;

    animation-duration:22s;
}

.particles-bg span:nth-child(4){

    left:50%;
    top:105%;

    animation-duration:26s;
}

.particles-bg span:nth-child(5){

    left:68%;
    top:100%;

    animation-duration:19s;
}

.particles-bg span:nth-child(6){

    left:80%;
    top:92%;

    animation-duration:28s;
}

.particles-bg span:nth-child(7){

    left:90%;
    top:108%;

    animation-duration:20s;
}

.particles-bg span:nth-child(8){

    left:58%;
    top:98%;

    animation-duration:30s;
}

@keyframes floatParticle{

    from{

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

        opacity:0;
    }

    15%{

        opacity:1;
    }

    85%{

        opacity:1;
    }

    to{

        transform:
            translateY(-120vh)
            scale(1.8);

        opacity:0;
    }
}

/* =========================================
   AI STATUS TEXT
========================================= */

.ai-status-text{

    margin-top:12px;

    color:#9e9e9e;

    font-size:0.95rem;

    line-height:1.8;

    max-width:650px;
}

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

.generate-main-btn{

    position:relative;

    overflow:hidden;

    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:
        linear-gradient(
            135deg,
            #ff0080,
            #7b61ff,
            #00d4ff
        );

    background-size:250% 250%;

    animation:
        gradientShift 6s ease infinite;

    box-shadow:
        0 10px 40px rgba(123,97,255,0.28);

    transition:
        transform 0.35s cubic-bezier(.16,1,.3,1),
        box-shadow 0.35s cubic-bezier(.16,1,.3,1);
}

.generate-main-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 16px 55px rgba(123,97,255,0.34);
}

.generate-main-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.24),
            transparent
        );

    transform:skewX(-20deg);

    animation:
        shimmer 3.6s infinite;
}

@keyframes shimmer{

    100%{

        left:140%;
    }
}

@keyframes gradientShift{

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

    50%{
        background-position:100% 50%;
    }

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

/* =========================================
   GENERATING LOADER
========================================= */

.generate-loader{

    display:flex;

    align-items:center;

    gap:14px;
}

.loader-orb{

    width:14px;
    height:14px;

    border-radius:999px;

    background:white;

    box-shadow:
        0 0 18px rgba(255,255,255,0.8);

    animation:
        orbPulse 1.4s ease infinite;
}

@keyframes orbPulse{

    0%{

        transform:scale(1);

        opacity:0.7;
    }

    50%{

        transform:scale(1.8);

        opacity:1;
    }

    100%{

        transform:scale(1);

        opacity:0.7;
    }
}

.loader-status{

    font-size:0.95rem;

    font-weight:600;

    color:white;
}

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

.analytics-section{

    display:flex;

    flex-direction:column;

    gap:24px;
}

.main-score-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.02)
        );

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

    backdrop-filter:blur(16px);

    border-radius:32px;

    padding:42px;

    display:flex;

    align-items:center;

    gap:36px;
}

.main-score-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(123,97,255,0.16),
            transparent 45%
        );

    pointer-events:none;
}

/* =========================================
   SCORE CIRCLE
========================================= */

.score-circle{

    min-width:170px;
    min-height:170px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.02)
        );

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

    box-shadow:
        0 0 45px rgba(123,97,255,0.22);

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

@keyframes floatingCircle{

    0%{
        transform:translateY(0px);
    }

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

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

.score-number{

    font-size:3.2rem;

    font-weight:800;
}

/* =========================================
   MINI SCORES
========================================= */

.mini-analytics-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:22px;
}

.mini-score-card{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.02)
        );

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

    border-radius:24px;

    padding:26px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:
        transform 0.35s cubic-bezier(.16,1,.3,1),
        border-color 0.35s;
}

.mini-score-card:hover{

    transform:translateY(-5px);

    border-color:
        rgba(123,97,255,0.24);
}

.mini-circle{

    width:70px;
    height:70px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    font-weight:700;

    background:
        radial-gradient(
            circle,
            rgba(123,97,255,0.22),
            rgba(255,255,255,0.03)
        );

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

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

.generated-content-section{

    display:flex;

    flex-direction:column;

    gap:26px;
}

.content-card{

    position:relative;

    overflow:hidden;

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

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

    border-radius:30px;

    padding:34px;

    backdrop-filter:blur(14px);

    transition:
        transform 0.35s cubic-bezier(.16,1,.3,1),
        border-color 0.35s;
}

.content-card:hover{

    transform:translateY(-6px);

    border-color:
        rgba(255,255,255,0.16);
}

.content-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,0,120,0.08),
            transparent 42%
        );

    pointer-events:none;
}

/* =========================================
   AI RENDERED CONTENT
========================================= */

.ai-rendered-content{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:20px;
}

.ai-block-label{

    font-size:0.88rem;

    font-weight:700;

    letter-spacing:0.8px;

    text-transform:uppercase;

    color:#ff8bd2;
}

.ai-main-text{

    color:#f1f1f1;

    line-height:2;

    font-size:1.02rem;
}

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

.regenerate-btn{

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

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

    color:white;

    padding:10px 18px;

    border-radius:14px;

    transition:
        all 0.3s ease;
}

.regenerate-btn:hover{

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

    transform:translateY(-2px);
}

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

@media(max-width:900px){

    .main-score-card{

        flex-direction:column;

        align-items:flex-start;
    }

    .dashboard-main{

        padding:32px 22px;
    }

    .generator-card{

        padding:28px;
    }

    .content-card{

        padding:28px;
    }
}

/* =========================================
   AI FLOW SYSTEM
========================================= */

.ai-flow-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:18px;

    margin-top:18px;
}

.flow-block{

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

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

    border-radius:20px;

    padding:22px;

    transition:
        all 0.35s cubic-bezier(.16,1,.3,1);
}

.flow-block:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(123,97,255,0.2);
}

.flow-title{

    font-size:0.9rem;

    font-weight:700;

    margin-bottom:12px;

    color:#ff8bd2;

    letter-spacing:0.5px;
}

.flow-text{

    color:#e6e6e6;

    line-height:1.9;

    font-size:0.96rem;
}

/* ========================================
   MAIN FEATURE GRID
======================================== */

.main-feature-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap:24px;

    margin-top:40px;

}

.feature-card{

    background:
        rgba(15,15,20,0.9);

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

    border-radius:28px;

    padding:32px;

    text-decoration:none;

    color:white;

    transition:0.35s ease;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(18px);

}

.feature-card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(255,0,140,0.4);

    box-shadow:
        0 0 40px rgba(255,0,140,0.18);

}

.feature-icon{

    font-size:34px;

    margin-bottom:18px;

}

.feature-card h3{

    font-size:28px;

    margin-bottom:14px;

    font-weight:700;

}

.feature-card p{

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

    line-height:1.7;

    font-size:15px;

}

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

.dashboard-hero{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

    margin-bottom:50px;

}

.hero-status-card{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 20px;

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

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

    border-radius:18px;

    backdrop-filter:blur(12px);

}

.hero-status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#00ff99;

    box-shadow:0 0 15px #00ff99;

    animation:pulseGlow 2s infinite;

}

@keyframes pulseGlow{

    0%{

        opacity:0.5;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.2);

    }

    100%{

        opacity:0.5;

        transform:scale(1);

    }

}

/* =========================================
   QUICK ACTIONS
========================================= */

.quick-actions-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:28px;

    margin-bottom:55px;

}

.action-card{

    position:relative;

    overflow:hidden;

    padding:32px;

    border-radius:28px;

    background:

    linear-gradient(

        145deg,

        rgba(15,15,25,0.95),

        rgba(25,10,25,0.92)

    );

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

    transition:0.35s ease;

    text-decoration:none;

    color:white;

    min-height:230px;

}

.action-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top right,

        rgba(255,0,140,0.15),

        transparent 50%

    );

    opacity:0;

    transition:0.4s ease;

}

.action-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,0,140,0.35);

    box-shadow:

    0 20px 50px rgba(255,0,140,0.12);

}

.action-card:hover::before{

    opacity:1;

}

.action-icon{

    font-size:42px;

    margin-bottom:24px;

}

.action-card h3{

    font-size:34px;

    font-weight:800;

    margin-bottom:14px;

}

.action-card p{

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

    line-height:1.8;

    font-size:15px;

}

/* =========================================
   CREATOR MOMENTUM
========================================= */

.creator-momentum{

    margin-bottom:55px;

}

.momentum-card{

    padding:35px;

    border-radius:30px;

    background:

    linear-gradient(

        145deg,

        rgba(20,20,30,0.95),

        rgba(35,10,35,0.88)

    );

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

}

.momentum-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.momentum-top span{

    font-size:24px;

    font-weight:700;

}

.momentum-badge{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,0,140,0.12);

    border:1px solid rgba(255,0,140,0.25);

    color:#ff4db8;

    font-size:13px;

    font-weight:700;

}

.momentum-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:22px;

}

.momentum-stat{

    padding:28px;

    border-radius:24px;

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

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

}

.momentum-stat h2{

    font-size:52px;

    margin-bottom:10px;

}

.momentum-stat p{

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

}

/* =========================================
   TREND SNAPSHOT
========================================= */

.trend-snapshot{

    margin-bottom:55px;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.section-header h2{

    font-size:34px;

}

.section-header span{

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

}

.trend-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

.trend-card{

    padding:28px;

    border-radius:24px;

    background:

    linear-gradient(

        145deg,

        rgba(18,18,28,0.96),

        rgba(30,10,30,0.88)

    );

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

    transition:0.3s ease;

}

.trend-card:hover{

    transform:translateY(-6px);

    border-color:rgba(255,0,140,0.25);

}

.trend-card h3{

    font-size:24px;

    margin-bottom:14px;

}

.trend-card p{

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

    line-height:1.8;

}

/* =========================================
   AI INSIGHT
========================================= */

.ai-insight-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:32px;

    background:

    linear-gradient(

        135deg,

        rgba(25,15,30,0.96),

        rgba(60,0,35,0.78)

    );

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

    margin-bottom:80px;

}

.ai-insight-card::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:

    radial-gradient(

        circle,

        rgba(255,0,140,0.16),

        transparent 70%

    );

    top:-150px;

    right:-100px;

}

.insight-label{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

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

    margin-bottom:24px;

    font-size:13px;

    font-weight:700;

}

.ai-insight-card h2{

    font-size:38px;

    line-height:1.4;

    max-width:850px;

    margin-bottom:20px;

}

.ai-insight-card p{

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

    line-height:1.9;

    max-width:750px;

}

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

@media(max-width:900px){

    .dashboard-hero{

        flex-direction:column;

    }

    .dashboard-title{

        font-size:52px;

    }

    .action-card h3{

        font-size:28px;

    }

    .ai-insight-card h2{

        font-size:30px;

    }

}

/* =========================================
   SCROLL REVEAL
========================================= */

.hidden-card {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.show-card {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   DASHBOARD MOBILE POLISH PATCH
   Only affects mobile. Desktop stays same.
========================================= */

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    body {
        width: 100%;
    }

    /* Main dashboard layout */
    .dashboard-layout,
    .dashboard-container,
    .app-shell {
        display: block;
        width: 100%;
    }

    /* Sidebar becomes a compact mobile panel */
    .sidebar,
    .dashboard-sidebar,
    .vm-sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 28px 22px 22px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background:
            linear-gradient(
                180deg,
                rgba(10, 10, 12, 0.98),
                rgba(10, 10, 12, 0.94)
            );
    }

    /* Logo spacing */
    .sidebar-logo,
    .dashboard-logo,
    .vm-sidebar-logo {
        margin-bottom: 24px !important;
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }

    /* Sidebar links become 2-column grid */
    .sidebar-menu,
    .dashboard-menu,
    .vm-sidebar-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sidebar-menu a,
    .dashboard-menu a,
    .vm-sidebar-menu a {
        width: 100% !important;
        min-height: 50px !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 0.92rem !important;
        line-height: 1.25 !important;
        color: rgba(255, 255, 255, 0.78) !important;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .sidebar-menu a:hover,
    .dashboard-menu a:hover,
    .vm-sidebar-menu a:hover {
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff !important;
    }

    .sidebar-menu a.active,
    .sidebar-menu a.active-link,
    .dashboard-menu a.active,
    .dashboard-menu a.active-link,
    .vm-sidebar-menu a.active,
    .vm-sidebar-menu a.active-link {
        color: #ffffff !important;
        background:
            linear-gradient(
                135deg,
                rgba(255, 20, 147, 0.18),
                rgba(139, 92, 246, 0.18)
            ) !important;
        border: 1px solid rgba(255, 20, 147, 0.22) !important;
    }

    /* Return to Home should take full row */
    .sidebar-menu a[href*="index.html"],
    .dashboard-menu a[href*="index.html"],
    .vm-sidebar-menu a[href*="index.html"] {
        grid-column: 1 / -1;
    }

    /* Upgrade button compact */
    .upgrade-card,
    .upgrade-pro,
    .pro-upgrade,
    .sidebar-upgrade {
        width: 100% !important;
        min-height: 52px !important;
        margin-top: 16px !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 0.95rem !important;
    }

    /* Main content starts normally below compact sidebar */
    .dashboard-main,
    .main-content,
    .dashboard-content,
    .vm-main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 34px 20px 60px !important;
    }

    /* Dashboard heading */
    .dashboard-main h1,
    .dashboard-content h1,
    .vm-main-content h1 {
        font-size: clamp(2.8rem, 13vw, 4.5rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.06em !important;
    }

    .dashboard-main p,
    .dashboard-content p,
    .vm-main-content p {
        line-height: 1.65 !important;
    }

    /* Dashboard grids */
    .dashboard-grid,
    .dashboard-widgets,
    .dashboard-cards,
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* General dashboard cards */
    .dashboard-card,
    .analytics-card,
    .insight-card,
    .trend-card,
    .momentum-card,
    .creator-momentum-card {
        width: 100% !important;
        min-height: auto !important;
        padding: 24px !important;
        border-radius: 26px !important;
    }

    /* Creator Momentum card */
    .momentum-card,
    .creator-momentum-card {
        padding: 24px !important;
    }

    .momentum-card h2,
    .creator-momentum-card h2 {
        font-size: 1.65rem !important;
        line-height: 1.25 !important;
    }

    .momentum-stats,
    .creator-momentum-stats,
    .momentum-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .momentum-stats > *:last-child,
    .creator-momentum-stats > *:last-child,
    .momentum-grid > *:last-child {
        grid-column: 1 / -1;
    }

    .stat-box,
    .metric-box,
    .momentum-stat {
        min-height: 118px !important;
        padding: 20px !important;
        border-radius: 22px !important;
    }

    .stat-box h3,
    .metric-box h3,
    .momentum-stat h3 {
        font-size: 2.6rem !important;
        line-height: 1 !important;
    }

    .stat-box p,
    .metric-box p,
    .momentum-stat p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    /* Large insight / trend text */
    .latest-trend-card h2,
    .ai-insight-card h2,
    .insight-card h2,
    .trend-card h2 {
        font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.04em !important;
    }

    .latest-trend-card p,
    .ai-insight-card p,
    .insight-card p,
    .trend-card p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
        max-width: 100% !important;
    }

}


/* Extra small phones */
@media (max-width: 420px) {

    .dashboard-main,
    .main-content,
    .dashboard-content,
    .vm-main-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .sidebar,
    .dashboard-sidebar,
    .vm-sidebar {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .sidebar-menu,
    .dashboard-menu,
    .vm-sidebar-menu {
        gap: 10px !important;
    }

    .sidebar-menu a,
    .dashboard-menu a,
    .vm-sidebar-menu a {
        font-size: 0.86rem !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
    }

    .momentum-stats,
    .creator-momentum-stats,
    .momentum-grid {
        grid-template-columns: 1fr !important;
    }

    .momentum-stats > *:last-child,
    .creator-momentum-stats > *:last-child,
    .momentum-grid > *:last-child {
        grid-column: auto;
    }

}