.logo img{
    height:50px;
}
.topbar-logo img{
    height:42px;
}

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

body{
    font-family:'Poppins',sans-serif;
}

body::before{

    content:"";
    
    position:fixed;

    top:-200px;
    left:50%;

    transform:translateX(-50%);

    width:1000px;
    height:600px;

    background:
    radial-gradient(
        circle,
        rgba(34,211,238,.15),
        transparent 70%
    );

    filter:blur(80px);

    animation:aurora 10s ease-in-out infinite;

    z-index:-1;
}

@keyframes aurora{

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

    50%{
        transform:
        translateX(-50%)
        scale(1.15);
    }
}
/* LOGO */

.logo{
    position:fixed;
    top:30px;
    left:40px;

    font-size:20px;
    font-weight:700;
    letter-spacing:4px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;

    position:fixed;
    top:30px;
    left:40px;

    font-size:22px;
    font-weight:700;
}

.logo-icon{

    background:linear-gradient(
        135deg,
        #2563eb,
        #9333ea
    );

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

    font-size:24px;
}

.logo{
    position:fixed;
    top:25px;
    left:35px;
    z-index:1000;
}

.logo img{
    height:50px;
    filter:
        drop-shadow(0 4px 15px rgba(37,99,235,.15));
}



/* FLOATING BUTTON */

.menu-btn{
    position:fixed;
    top:25px;
    right:35px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#f4f4f4;

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

    font-size:32px;

    cursor:pointer;

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

/* HERO */

.hero{
     font-family:'Poppins',sans-serif;
     min-height:calc(90vh);

    display:flex;
    flex-direction:column;

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

    text-align:center;

    padding:120px 40px;
}

/* BADGE */

.badge{
    color:#0B3D91;
    font-size:14px;

    margin-bottom:25px;
}

.badge{

    padding:12px 20px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.08),
        rgba(34,211,238,.08)
    );

    border:1px solid rgba(37,99,235,.15);

    color:#7c3aed;

    font-weight:600;

    margin-bottom:25px;
}


/* TITLE */

.hero h1{

    background:linear-gradient(
        90deg,
        #0B3D91,
        #2563EB,
        #22D3EE
    );
    

     font-family:'Poppins',sans-serif;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

     font-size:48px;

}


.document-card{

    padding:20px 0;

    border-bottom:1px solid #eef2ff;
}
/* SUBTITLE */

.subtitle{

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

    margin-top:35px;

    max-width:800px;

    color:#666;

    font-size:1.4rem;

    line-height:1.8;
}

/* OVERLAY */

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

/* PANEL */

.side-panel{

    position:fixed;

    top:20px;
    right:-380px;

    width:340px;

    height:calc(100vh - 40px);

    background:white;

    border-radius:30px;

    padding:30px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);

    transition:.35s ease;

    z-index:2000;

}

.side-panel{

    backdrop-filter:blur(20px);

    border:1px solid rgba(0,0,0,.05);
}
.panel-divider{

    margin:35px 0;

    height:1px;

    background:#eee;
}

.side-panel.show{

    right:20px;

}

/* OVERLAY SHOW */

.overlay.show{

    opacity:1;

    visibility:visible;

}

/* HEADER */

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}

.panel-header h3{

    font-size:1.2rem;

}

.close-btn{

    cursor:pointer;

    font-size:20px;

}

/* LINKS */

.panel-links{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.panel-links a{

    text-decoration:none;

    color:#111;

    font-size:1.05rem;

    transition:.2s;

}

.panel-links a:hover{

    color:#9333ea;

    transform:translateX(4px);

}

/* BUTTON */

.panel-btn{

    width:100%;

    margin-top:50px;

}
.orb{
    position:fixed;
    border-radius:50%;
    filter:blur(80px);
    z-index:-2;
    animation:float 12s ease-in-out infinite;
}

.orb-1{
    width:250px;
    height:250px;
    background:rgba(37,99,235,.12);

    top:15%;
    left:10%;
}

.orb-2{
    width:300px;
    height:300px;
    background:rgba(34,211,238,.10);

    top:10%;
    right:10%;

    animation-delay:2s;
}

.orb-3{
    width:220px;
    height:220px;
    background:rgba(11,61,145,.08);

    bottom:15%;
    left:40%;

    animation-delay:4s;
}

@keyframes float{

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

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

#tsparticles{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    pointer-events:none;

    z-index:-1;
}
.mockup{

    margin-top:40px;

    width:min(1100px,90vw);

    background:white;

    border-radius:14px;

    border:1px solid #e5e7eb;

    overflow:hidden;

    box-shadow:
    0 25px 80px rgba(37,99,235,.08);
}

.mockup-header{

    padding:10px 20px;

    background:#f8fbff;

    border-bottom:1px solid #eef2ff;

    font-weight:700;
}

.mockup-body{

    display:grid;

    grid-template-columns:1fr 1fr;
}

.mockup-left,
.mockup-right{

    padding:20px;
}

.mockup-left{

    border-right:1px solid #eef2ff;
}

.mockup-left h4,
.mockup-right h4{

    margin-bottom:10px;

    color:#0B3D91;
}

.mockup-right ul{

    list-style:none;
}

.mockup-right li{

    padding:12px 0;

    border-bottom:1px solid #f3f4f6;
}.bottom-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    height:60px;
     margin-top:15px;

    border-top:1px solid #eee;

    position:relative;
    z-index:1;
}

.bottom-nav a{

    text-decoration:none;

    color:#666;

    font-size:15px;

    line-height:1;
}
.bottom-nav a:hover{

    color:#111;
}

.how-it-works{

    padding:50px 40px;
    text-align:center;
}

.section-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    color:#0B3D91;

    background:rgba(11,61,145,.08);

    border:1px solid rgba(11,61,145,.15);

    font-weight:600;
}

.section-header h2{

    margin-top:20px;

    font-size:20px;

    font-weight:600;

    color:#0B3D91;
}

.steps{

    margin-top:50px;

    display:grid;

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

    gap:30px;
}

.step-card{

    background:white;

    padding:40px;

    border-radius:24px;

    border:1px solid #eef2ff;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);
}

.step-number{

    font-size:40px;

    font-weight:800;

    color:#22D3EE;

    margin-bottom:20px;
}

.step-card h3{

    color:#0B3D91;

    margin-bottom:15px;
}

.step-card p{

    color:#666;

    line-height:1.8;
}

.features{

    padding:20px 40px;
    text-align:center;
}

.features p{

    max-width:700px;

    margin:10px auto 0;

    color:#666;

    line-height:1.8;
}

.feature-grid{

    margin-top:40px;

    display:grid;

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

    gap:30px;
}

.feature-card{

    background:white;

    border:1px solid #eef2ff;

    border-radius:24px;

    padding:40px 30px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);

    transition:.3s;
}

.feature-card:hover{

    transform:translateY(-8px);
}

.feature-icon{

    font-size:42px;

    margin-bottom:20px;
}

.feature-card h3{

    color:#0B3D91;

    margin-bottom:15px;
}

.feature-card p{

    color:#666;

    line-height:1.7;
}

.pricing{

    padding:60px 40px;

    text-align:center;
}

.pricing-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

    max-width:1200px;

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

.pricing-card{

    position:relative;

    background:white;

    border:1px solid #eef2ff;

    border-radius:30px;

    padding:50px 35px;

    display:flex;
    flex-direction:column;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);
}

.pricing-card:hover{

    transform:translateY(-8px);
}

.featured{

    border:2px solid #2563EB;
    
    transform:scale(1.03);

    
}

.featured:hover{

    transform:
    scale(1.05)
    translateY(-8px);
}

.popular-tag{

    position:absolute;

    top:-15px;
    left:50%;

    transform:translateX(-50%);

    background:linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );

    color:white;

    padding:8px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;
}

.pricing-card h3{

    font-size:28px;

    color:#0B3D91;

    margin-bottom:25px;
}

.price{

    font-size:60px;

    font-weight:800;

    color:#2563EB;

    margin-bottom:30px;
}

.price span{

    font-size:18px;

    color:#888;
}

.pricing-card ul{

    list-style:none;

    margin-bottom:35px;

    flex:1;
}
.pricing-card li{

    padding:12px 0;

    color:#555;
}

.pricing-card button{

    width:100%;
}

.faq{

    padding:20px 40px;
}

.faq-container{

    max-width:1000px;

    margin:30px auto 0;
}

.faq-item{

    background:white;

    border:1px solid #eef2ff;

    border-radius:14px;

    margin-bottom:10px;

    overflow:hidden;

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

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:25px 30px;

    text-align:left;

    font-size:18px;

    font-weight:600;

    color:#0B3D91;

    cursor:pointer;

    box-shadow:none;
}

.faq-answer{

    padding:0 30px 25px;

    color:#666;

    line-height:1.8;
}

.final-cta{

    padding:30px 40px 0px;
}

.cta-box{

    max-width:1000px;

    margin:auto;

    padding:60px 50px;

    text-align:center;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #0B3D91,
        #2563EB,
        #22D3EE
    );

    color:white;

    box-shadow:
    0 30px 80px rgba(37,99,235,.20);
}

.cta-box h2{

    margin-top:15px;

    font-size:20px;

    font-weight:700;

    line-height:1.2;
}

.cta-box p{

    margin:20px auto;

    max-width:650px;

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.9);
}

.cta-box button{

    background:white;

    color:#0B3D91;

    font-weight:700;

    box-shadow:none;
}

.cta-box .section-badge{

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

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

    color:white;

    font-weight:600;

    backdrop-filter:blur(10px);
}

.auth-page{

    min-height:100vh;

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

    padding:20px;
}

.auth-card{

    width:80%;
    max-width:500px;

    background:white;

    padding:20px;

    border-radius:30px;

    border:1px solid #eef2ff;

    box-shadow:
    0 20px 60px rgba(0,0,0,.06);
}

.auth-logo{

    text-align:center;

    font-size:24px;

    font-weight:700;

    color:#0B3D91;

    margin-bottom:20px;
}

.auth-card h1{

    text-align:center;

    color:#0B3D91;

    margin-bottom:10px;
}

.auth-subtitle{

    text-align:center;

    color:#666;

    margin-bottom:35px;
}


.document-form-card{

    max-width:1000px;
}

.document-form-card .auth-btn{

    width:auto;

    min-width:220px;

    display:block;

    margin:20px auto 0;
}



.form-group{

    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;
}

.form-group input{

    width:100%;

    padding:14px 16px;

    border:1px solid #dbeafe;

    border-radius:12px;

    font-size:15px;
}



.auth-btn{

    display:block;

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

    margin:30px auto 0;

    padding:16px 24px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );


    color:white;

    font-size:16px;

    font-weight:600;

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

    text-align:center;

    cursor:pointer;

    transition:.3s ease;

    box-shadow:
        0 12px 30px rgba(79,110,247,.25);
}

.auth-btn:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px rgba(37,99,235,.35);
}

.auth-btn:active{

    transform:
        translateY(0);
}

.auth-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;
}

.auth-footer{

    margin-top:25px;

    text-align:center;

    color:#666;
}

.auth-footer a{

    color:#2563EB;

    text-decoration:none;

    font-weight:600;
}

.auth-logo img{
    height:60px;
}


.password-wrapper input{

    width:100%;
}

.password-wrapper span{

    position:absolute;

    right:20px;
    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    user-select:none;

}

.password-wrapper{

    position:relative;
}

.password-wrapper span{

    position:absolute;

    right:20px;
    top:50%;

    transform:translateY(-50%);

    cursor:pointer;
}

.error-message{

    margin:15px 0;

    padding:12px 16px;

    border-radius:10px;

    background:#fee2e2;

    color:#b91c1c;

    border:1px solid #fecaca;

    font-size:14px;
}

.password-note{

    margin-top:8px;

    font-size:13px;

    color:#666;

    line-height:1.5;
}

.forgot-link{
    text-align:right;
    margin-top:10px;
}

.forgot-link a{
    text-align:right;
    font-size:14px;
    color:#64748b;
    text-decoration:none;
    margin-top:8px;
    margin-bottom:10px;
}

textarea{

    width:100%;

    padding:16px;

    border:1px solid #dbeafe;

    border-radius:12px;

    resize:vertical;

    font-family:inherit;

    font-size:15px;
}

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

.dashboard{

    max-width:1200px;

    margin:auto;

    padding:60px 40px;
}

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:40px;
}

.dashboard-header h1{

    color:#0B3D91;

    margin-bottom:10px;
}

.dashboard-header p{

    color:#666;
}

.stats-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;
}

.stat-card{

    background:white;

    padding:30px;

    border-radius:20px;

    border:1px solid #eef2ff;

    text-align:center;

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

.stat-card h3{

    font-size:42px;

    color:#2563EB;
}

.recent-documents{

    background:white;

    padding:30px;

    border-radius:20px;

    border:1px solid #eef2ff;

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

.recent-documents h2{

    margin-bottom:20px;

    color:#0B3D91;
}

.empty-state{

    text-align:center;

    padding:40px 0;
}

.empty-state p{

    color:#666;

    margin-bottom:15px;
}

.success-message{

    margin-bottom:20px;

    padding:14px;

    background:#dcfce7;

    border:1px solid #86efac;

    color:#166534;

    border-radius:12px;

    text-align:center;

    font-weight:600;
}




.nav-logo img{

    height:45px;
    width:auto;

    display:block;
}





/* ======================
SIDEBAR
====================== */

.sidebar{
    width:270px;
    background:white;

    position:fixed;
    top:0;
    left:0;
    bottom:0;

    padding:30px 20px;

    border-right:1px solid #e5e7eb;

    box-shadow:
        4px 0 25px rgba(0,0,0,.04);
}

.sidebar-logo{
    text-align:center;
    margin-bottom:40px;
}

.sidebar-logo img{
    width:160px;
    max-width:100%;
}


.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:10px;

    color:#334155;

    text-decoration:none;

    padding:14px 18px;

    border-radius:12px;

    transition:.3s;

    font-weight:500;
}

.sidebar-nav a:hover{

    background:#eff6ff;

    color:#2563EB;
}

.sidebar{
    background:#f8fafc;

    border-right:1px solid #e2e8f0;
}

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

.main-content{
    margin-left:260px;
    width:calc(100% - 260px);
}

.form-group select{
    width:100%;
    
    padding:16px 18px;

    border:1px solid #dbeafe;
    border-radius:14px;

    font-size:15px;

    background:white;

    outline:none;

    transition:.3s;
}

.form-group select:focus{
    border-color:#2563EB;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}


.credits-page{
    max-width:1200px;
    margin:auto;
    padding:60px 20px;
}

.credits-header{
    text-align:center;
    margin-bottom:60px;
}

.credits-header h1{
    font-size:3rem;
    margin-bottom:15px;
}

.credits-header p{
    color:#9ca3af;
}

.credit-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.credit-card{

    background:white;

    border:1px solid #E5E7EB;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

.credit-card h3{
    font-size:1.5rem;
    margin-bottom:20px;
    color:#111827;
}

.price{
    font-size:3rem;
    font-weight:700;
    color:#3b82f6;
    margin-bottom:25px;
}

.credit-card ul{
    list-style:none;
    text-align:left;
    margin-bottom:30px;
}

.credit-card li{
    margin-bottom:12px;
    color:#374151;
}

.credit-card button{
    width:100%;
    border:none;
    cursor:pointer;
    padding:14px;
    border-radius:12px;
    font-weight:600;
    background:#2563eb;
    color:white;
}

.credit-card button:hover{
    opacity:.9;
}

.credit-card .buy-btn{

    display:block;

    width:100%;

    padding:14px 20px;

    margin-top:20px;

    border-radius:12px;

    text-decoration:none;

    text-align:center;

    font-weight:600;

    color:white;

    background:
    linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );

    box-shadow:
    0 10px 25px rgba(37,99,235,.25);

    transition:.3s;
}

.credit-card .buy-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 30px rgba(37,99,235,.35);
}

.success-container{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:70vh;
}

.success-card{
    background:#fff;
    padding:50px;
    border-radius:24px;
    text-align:center;
    max-width:600px;
    width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}


.success-btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:12px;
    background:linear-gradient(
        135deg,
        #4f6df5,
        #6ec1e4
    );
    color:#fff;
    text-decoration:none;
    font-weight:600;
    margin-top:20px;
}

.success-icon{
    font-size:4rem;
    margin-bottom:20px;
}

.success-card h1{
    margin-bottom:15px;
}

.success-card p{
    color:#6b7280;
    margin-bottom:30px;
}
.popular{
    border:2px solid #2563eb;
}

.badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:#2563eb;
    color:white;
    padding:6px 14px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
}

.dashboard-actions{
    display:flex;
    gap:15px;
}


.credit-balance-card{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:white;

    border-radius:20px;

    padding:25px;

    margin-bottom:25px;
}

.credit-balance-card span{
    opacity:.9;
}

.credit-balance-card h2{
    margin-top:10px;
    font-size:3rem;
}

.preset-option {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;

    font-size: 16px;
    font-weight: 500;
}

.preset-option input[type="checkbox"],
.preset-option input[type="radio"] {
    width: auto;
    margin: 0;
}

.document-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.view-btn {
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    background: #4f46e5;
    color: white;
    font-weight: 600;
}

.view-btn:hover {
    opacity: 0.9;
}

.draft-watermark{

    position:fixed;

    top:40%;

    left:50%;

    transform:
        translate(-50%, -50%)
        rotate(-30deg);

    font-size:120px;

    font-weight:800;

    color:rgba(220,38,38,.12);

    z-index:9999;

    pointer-events:none;

    user-select:none;

}




/* =========================
   DOCUMENT PREVIEW
========================= */
.document-info{
   margin-bottom: 10px;
}

.document-preview {
    max-width: 1000px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.preview-header {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    
}

.preview-section h2{

    text-align:center;

    position:relative;

    margin-bottom:10px;

}


.preview-section{

    border-top:none;

}

.preview-section h2 span{

    background:white;

    padding:0 10px;

    position:relative;

    z-index:2;

}


.preview-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 15px;
}

.preview-header p {
    color: #64748b;
    font-size: 18px;
}

.preview-content {
    line-height: 1.8;
}

.preview-section {
    margin-bottom: 20px;
}


.preview-section p {
    margin-bottom: 12px;
}

.preview-section strong {
    color: #111827;
}

.preview-section ul {
    list-style: none;
    padding: 0;
}

.preview-section ul li {
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #f8fafc;
    border-left: 4px solid #4f46e5;
    border-radius: 8px;
}

.preview-budget-box {
    background: linear-gradient(
        135deg,
        #4f46e5,
        #38bdf8
    );
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin-top: 20px;
}

.preview-budget-box h3 {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
}

.preview-budget-box p {
    margin-top: 10px;
    font-size: 32px;
    font-weight: 700;
}

.preview-payment {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    font-weight: 600;
}

.preview-footer {
    margin-top: 60px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

.status-badge{

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

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;
    font-weight:700;
}

.document-number{
    margin-top:15px;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    opacity:.8;
}

.document-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.document-header h3{
    flex:1;
    min-width:0;
}
.document-header h3{
    margin:0;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
    line-height:1.4;
}
.preview-actions{
    display:flex;
    gap:12px;
    margin-bottom:30px;
}

.back-btn,
.edit-btn{
    text-decoration:none;
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
    border:none;
    cursor:pointer;
}

.back-btn{
    background:#f3f4f6;
    color:#111827;
}


.status-badge.draft{

    background:#FFF4CC;
    color:#92400E;

    border:1px solid #F3D98A;
}

.status-badge.completed{

    background:#DCFCE7;
    color:#166534;

    border:1px solid #86EFAC;
}


.document-btn{

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

    gap:8px;

    padding:10px 20px;

    border-radius:10px;
    min-width:120px;
    text-decoration:none;

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

    background: linear-gradient(
        90deg,
        #4f6ef7,
        #6dcff6
    );

    color:white;
    border:none;
    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(
            79,
            110,
            247,
            .18
        );

    transition:.3s;
}


.type-badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.view-btn{

    background:
    linear-gradient(
        135deg,
        #312E81,
        #4F46E5
    );

    color:white;
    cursor:pointer;
    box-shadow:
    0 14px 35px rgba(49,46,129,.30);
}

.generate-btn{

    background:
    linear-gradient(
        135deg,
        #047857,
        #10B981
    );

    color:white;
    cursor:pointer;
    box-shadow:
    0 12px 30px rgba(4,120,87,.25);
}

.delete-btn{

    background:
    linear-gradient(
        135deg,
        #7F1D1D,
        #B91C1C
    );
    cursor:pointer;
    color:white;

    box-shadow:
    0 12px 30px rgba(127,29,29,.30);
    border:none;
    outline:none;


}

.download-btn{
    background:linear-gradient(
        135deg,
        #0ea5e9,
        #2563eb
    ) !important;
    cursor:pointer;
    color:white;
}

.edit-btn{

    background:
    linear-gradient(
        135deg,
        #BE185D,
        #EC4899
    );

    color:white;

    box-shadow:
    0 12px 30px rgba(236,72,153,.30);
}

.new-document-btn{

    background:
    linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );

    color:white;
    cursor:pointer;
    box-shadow:
    0 12px 30px rgba(37,99,235,.30);
}

.buy-btn{

    background:
    linear-gradient(
        135deg,
        #C9A227,
        #FFD700
    );

    color:white;
    cursor:pointer;
    box-shadow:
    0 10px 25px rgba(255,215,0,.20);
}
.reject-btn{

    background:
    linear-gradient(
        135deg,
        #991B1B,
        #DC2626
    );
    cursor:pointer;
    color:white;

    box-shadow:
    0 12px 30px rgba(
        220,
        38,
        38,
        .25
    );
}

/* ========================================
   DOCUMENT STATUS
======================================== */
.admin-section{
    margin-top:30px;
    margin-bottom:40px;
    color:#1E3A8A;
}

.document-card{

    position:relative;

}

.status-badge{
    position:static;

    flex-shrink:0;

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

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;
    font-weight:700;
}

.status-draft{

    background:#FEF3C7;

    color:#92400E;

    border:1px solid #FCD34D;

}
.status-completed{

    background:#DCFCE7;

    color:#166534;

    border:1px solid #86EFAC;

}

.admin-stat-card.users{
    border-top:4px solid #4F46E5;
}

.admin-stat-card.revenue{
    border-top:4px solid #10B981;
}
.role-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.role-badge.user{
    background:#DCFCE7;
    color:#15803D;
}
.role-badge.admin{
    background:#DBEAFE;
    color:#1D4ED8;
}
.role-badge.super-admin{
    background:#FEE2E2;
    color:#DC2626;
}

/* ========================================
   ADMIN
======================================== */
.template-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.template-card{
    background:white;
    border-radius:20px;
    padding:24px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
}


.admin-header{
    margin-bottom:30px;
}

.admin-header h1{
    font-size:42px;
    font-weight:700;
    margin-bottom:8px;
}

.admin-header p{
    color:#64748b;
    font-size:15px;
}

.admin-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 200px));
    gap:20px;
    margin-bottom:30px;
}

.admin-page{

    padding:30px;
    margin-left:30px;

}

.admin-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}


.admin-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:40px;

    min-width:180px;

    padding:0 24px;

    border:none;

    border-radius:16px;

    text-decoration:none;

    color:white;
    cursor:pointer;
    font-weight:600;

    background:linear-gradient(
        135deg,
        #4F46E5,
        #60A5FA
    );

}

.admin-table{
    width:auto;
    max-width:1400px;
    background:white;
    border-radius:24px;
    padding:18px;
    max-height:500px;
    overflow-y:auto;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
}

.admin-table table{
    width:100%;
    border-collapse:collapse;
}

.admin-table th{
    text-align:left;
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    background:#F8FAFC;
    color:#475569;
}

.admin-table td{
    padding:10px;
}

.admin-table tbody tr:hover{
    background:#f8fafc;
}


.admin-stat-card{
    background:white;
    border-radius:20px;
    padding:20px 12px;
    text-align:center;
    border:1px solid #eef2ff;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
    transition:.3s;
}

.admin-stat-card:hover{
    transform:translateY(-3px);
}

.admin-stat-card span{
    display:block;
    color:#64748b;
    font-size:14px;
    margin-bottom:10px;
}

.admin-stat-card h2{
    font-size:40px;
    margin:0;
    color:#111827;
}
.admin-section-card{
    background:#fff;
    border-radius:24px;
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.admin-stat-card:nth-child(1){
    border-top:4px solid #4F46E5;
}

.admin-stat-card:nth-child(2){
    border-top:4px solid #06B6D4;
}

.admin-stat-card:nth-child(3){
    border-top:4px solid #8B5CF6;
}

.admin-stat-card:nth-child(4){
    border-top:4px solid #10B981;
}

.admin-stat-card:nth-child(5){
    border-top:4px solid #F59E0B;
}

.admin-stat-card:nth-child(6){
    border-top:4px solid #3B82F6;
}


/* ========================================
   CLIENTS
======================================== */

.page-header{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:16px;

    margin-bottom:10px;

}


.clients-page{
    padding:30px;
    margin-bottom:10px;

}

.clients-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));
    margin-top:0;
    gap:24px;
    padding:0 30px;
}

.client-card{

    background:white;

    border:1px solid #E5E7EB;

    border-radius:20px;
    
    padding:24px;

    min-height:220px;

    box-shadow:
        0 4px 18px rgba(15,23,42,0.05);

}

.client-card h3{

    margin-bottom:18px;

    font-size:18px;

    font-weight:700;

}

.client-card p{

    margin-bottom:8px;

}

.client-info{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:10px;

}

.client-info p{

    margin:0;

    color:#374151;

}

.client-actions{

    margin-top:10px;

}

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


.view-btn{

    display:inline-flex;

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

    padding:8px 16px;

    border-radius:8px;

    background:#4f46e5;

    color:white;

    text-decoration:none;

    font-weight:600;
}
.admin-btn-small{

    display:inline-flex;

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

    padding:8px 14px;

    border-radius:10px;

    background:#4F46E5;

    color:white;

    text-decoration:none;

    font-size:13px;

    font-weight:600;
}

.user-info-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;
}

.info-item{

    background:white;

    border-radius:20px;

    padding:24px;

    border:1px solid #eef2ff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.04);
}

.info-item label{

    display:block;

    font-size:13px;

    font-weight:600;

    color:#64748B;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:10px;
}

.info-item p{

    margin:0;

    font-size:20px;

    font-weight:600;

    color:#111827;

    word-break:break-word;
}

.credit-actions{

    display:flex;

    gap:12px;

    margin-top:20px;
}

.credit-actions .admin-btn{

    min-width:180px;
}

.admin-card{

    max-width:700px;

    background:white;

    border-radius:24px;

    padding:30px;

    border:1px solid #eef2ff;

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

.admin-form-card{

    max-width:600px;

    background:white;

    border-radius:24px;

    padding:30px;

    border:1px solid #eef2ff;

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

.credit-shortcuts{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:5px 0;
}

.credit-shortcuts button{

    min-width:50px;

    height:40px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:white;
    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;

    text-align:center;



    background:linear-gradient(
        135deg,
        #4F46E5,
        #60A5FA
    );
}


.credit-actions{

    display:flex;

    gap:16px;

    align-items:center;

    margin-top:24px;
}
.credit-actions .admin-btn{

    min-width:180px;
}
#credits{

    width:280px;
    max-width:100%;
}

.credits-form-card{

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

    background:white;

    border-radius:24px;

    padding:30px;

    border:1px solid #eef2ff;

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

.document-builder-card{

    width:100%;

    max-width:1000px;

    margin:0 auto;

    padding:40px 50px;

    background:white;

    border-radius:24px;

    border:1px solid #eef2ff;
}


.document-builder-card select,
.document-builder-card input[type="text"],
.document-builder-card input[type="date"],
.document-builder-card input[type="number"],
.document-builder-card textarea{

    width:100%;
}


.document-builder-card textarea{

    min-height:120px;
    resize:vertical;
}


.date-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.budget-row{

    display:flex;

    gap:12px;

    align-items:center;
}

.budget-row select{

    width:120px !important;

    flex:none;
}

.budget-row input{

    flex:1;
}
.document-builder-card .auth-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    margin:30px auto 0;
}

#objectives-container,
#deliverables-container,
#payment-terms-container{

    display:grid;

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

    gap:12px;
}

.document-builder-form .submit-btn{
    width:320px;
    margin:30px auto 0;
    display:block;
}

.form-actions{
    display:flex;
    justify-content:center;
}

.save-document-btn{
    display:block;
    width:320px;
    margin:30px auto 0;
}

.primary-btn{

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

    padding:12px 24px;

    background:#2563EB;
    color:white;

    border:none;
    border-radius:12px;

    text-decoration:none;
    cursor:pointer;

    font-weight:600;

}

.document-save-btn{

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

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

    height:52px;

    margin:30px auto;

    background:linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );

    color:white;

    border:none;
    border-radius:12px;

    font-weight:600;
    font-size:15px;

    cursor:pointer;

}

.status-active{

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

    padding:8px 18px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;

    background:#DCFCE7;
    color:#166534;

    border:1px solid #BBF7D0;

}

.status-inactive{

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

    padding:8px 18px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;

    background:#FEF3C7;
    color:#92400E;

    border:1px solid #FCD34D;

}

.request-preset-link{

    display:inline-block;

    padding:8px 14px;

    margin-top:10px;

    margin-bottom:24px;

    background:#EEF2FF;

    border:1px solid #C7D2FE;

    border-radius:10px;

    color:#4F46E5;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

}

.request-preset-link:hover{

    color:#3730A3;

}

.history-page{
    max-width:1200px;
    margin:auto;
    padding:60px 20px;
}

.credit-shortcuts{

    display:grid;

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

    gap:10px;

    max-width:360px;
}

.credit-minus{

    background:linear-gradient(
        135deg,
        #DC2626,
        #EF4444
    ) !important;

    box-shadow:
        0 10px 25px rgba(
            220,
            38,
            38,
            .25
        ) !important;
}

.credit-minus:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 30px rgba(
            220,
            38,
            38,
            .35
        ) !important;
}

.status-paid{
    background:#dcfce7;
    color:#166534;
    padding:6px 12px;
    border-radius:999px;
    font-weight:600;
}
.package-badge{
    background:#eef2ff;
    color:#4338ca;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}
.history-table th,
.history-table td{
    padding:20px;
}

.amount-col,
.credit-col{
    text-align:center !important;
}

.payment-reference{
    font-family:monospace;
    font-size:13px;
}

.admin-table th{
    text-align:left;
}

#mobile-menu-btn{
    display:none;
}

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;
}

.modal-overlay.show{
    display:flex;
}

.credit-modal{

    width:90%;
    max-width:420px;

    background:white;

    border-radius:24px;

    padding:30px;

    text-align:center;

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

.modal-icon{

    font-size:48px;

    margin-bottom:15px;
}

.credit-modal h2{

    color:#DC2626;

    margin-bottom:15px;
}

.credit-modal p{

    color:#64748b;

    line-height:1.6;
}

.credit-balance{

    margin-top:15px;
    margin-bottom:25px;
}

.modal-actions{

    display:flex;

    gap:12px;
}

.modal-buy-btn,
.modal-cancel-btn{

    flex:1;

    padding:12px;

    border:none;

    border-radius:12px;

    text-decoration:none;

    cursor:pointer;

    font-weight:600;
}

.modal-buy-btn{

    background:linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );

    color:white;
}

.modal-cancel-btn{

    background:#F3F4F6;

    color:#374151;
}
.modal-overlay{
    display:none;
}

.modal-overlay.show{
    display:flex;
}

.hero-btn{

    display:inline-flex;

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

    padding:14px 26px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #22D3EE
    );

    color:white;

    font-size:18px;

    font-weight:600;

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

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);
}

.hero-btn:hover{

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);
}
.faq-question{

    width:100%;

    padding:22px 25px;

    border:none;

    background:white;

    text-align:left;

    font-size:18px;

    font-weight:600;

    color:#0F172A;

    cursor:pointer;

    border-radius:16px;
}

.support-page{
    max-width:900px;
    margin:0 auto;
    padding:40px;
}

.support-header{
    margin-bottom:30px;
}

.support-header h1{
    font-size:42px;
    font-weight:700;
    color:#0B3D91;
    margin-bottom:10px;
}

.support-header p{
    color:#64748B;
    font-size:16px;
}

.support-card{
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #DDE5F0;
    border-radius:12px;
    font-family:Poppins,sans-serif;
    font-size:15px;
}

.form-group textarea{
    resize:vertical;
}

.support-btn{
    border:none;
    padding:14px 28px;
    border-radius:12px;
    font-weight:600;
    color:white;
    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #22D3EE
        );

    box-shadow:
        0 10px 25px rgba(37,99,235,.25);
}

.support-history{
    margin-top:40px;
}

.support-history h2{
    font-size:28px;
    margin-bottom:20px;
    color:#0B3D91;
}

.ticket-card{
    background:white;
    border-radius:16px;
    padding:20px;
    margin-bottom:15px;
    border:1px solid #E5EAF2;
}

.ticket-card h3{
    margin:0 0 10px;
    font-size:18px;
}

.ticket-meta{
    display:flex;
    gap:12px;
    align-items:center;
}

/* ========================================
   LANDING PAGE NAVBAR
======================================== */

.top-nav{

    max-width:1200px;

    margin:0 auto;

    padding:30px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

    z-index:10;

}

.nav-logo{

    display:flex;

    align-items:center;

}

.nav-logo img{

    height:45px;

    width:auto;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:32px;

}

.nav-links a{

    text-decoration:none;

    color:#334155;

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:#2563EB;

}

.nav-register{

    padding:10px 18px;

    border-radius:10px;

    color:white !important;

    background:linear-gradient(
        90deg,
        #4f6df5,
        #6bc5f8
    );

}

.document-filter-bar{

    margin-bottom:20px;

}

.document-filter-bar form{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:center;

}


.document-filter-bar{

    margin-bottom:20px;

}

.document-filter-bar form{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

}

.document-filter-bar input,
.document-filter-bar select{

    padding:10px 14px;

    border:1px solid #E5E7EB;

    border-radius:10px;

    min-width:180px;

    background:white;

}
.filter-actions{

    display:flex;

    gap:10px;

    align-items:center;

}

.invoice-item-header{

    display:grid;

    grid-template-columns:
        1fr
        90px
        140px;

    gap:12px;

    margin-bottom:12px;

    font-size:14px;

    font-weight:600;

}

.invoice-item-header{

    display:grid;

    grid-template-columns:
        1fr
        90px
        140px;

    gap:12px;

    margin-bottom:12px;

    font-size:14px;

    font-weight:600;

}

.invoice-item-row{

    display:grid;

    grid-template-columns:
        1fr
        90px
        140px;

    gap:12px;

    margin-bottom:12px;

}

.invoice-item-row input{

    width:100%;

}

#add-invoice-item-btn{

    margin-top:10px;

    padding:10px 16px;

    border:none;

    border-radius:8px;

    cursor:pointer;

}

.invoice-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:40px;

    min-width:60px;

    padding:0 24px;

    border:none;

    border-radius:16px;

    text-decoration:none;

    color:white;

    font-weight:600;

    background:linear-gradient(
        135deg,
        #4F46E5,
        #60A5FA
    );

}

.invoice-item-header{

    display:grid;

    grid-template-columns:
        1fr
        120px
        160px
        160px;

    gap:12px;

    margin-bottom:12px;

    font-weight:600;

}

.invoice-item-row {

    display:grid;

    grid-template-columns:
        3fr
        1fr
        1fr
        1fr
        60px;

    gap:10px;

    align-items:center;

}

.line-total{

    padding:14px;

    background:#F8FAFC;

    border:1px solid #CBD5E1;

    border-radius:8px;

    font-weight:600;

    text-align:right;

}

.line-total{

    padding:14px;

    background:#F8FAFC;

    border:1px solid #CBD5E1;

    border-radius:8px;

    min-height:54px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    font-weight:600;

}


.remove-item-btn {

    height:42px;

    border:none;

    border-radius:8px;

    cursor:pointer;

}
.invoice-table th:nth-child(2),
.invoice-table th:nth-child(3),
.invoice-table th:nth-child(4),
.invoice-table td:nth-child(2),
.invoice-table td:nth-child(3),
.invoice-table td:nth-child(4){

    text-align:right;

}

.invoice-table tfoot tr:last-child{

    background:var(--premium-primary-light);

    font-weight:700;

}

.invoice-table tfoot tr:last-child td{

    font-size:20px;

}

.page-container {

    display: flex;
    flex-direction: column;
    align-items: center;
    

}

.form-card {

    background: #ffffff;

    border-radius: 16px;

    padding: 30px;

    box-shadow:
        0 4px 20px rgba(
            0,
            0,
            0,
            0.05
        );

     width: 100%;

    max-width: 700px;

}

.organization-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 30px;

    margin-top: 20px;

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

.organization-grid {

    display: grid;

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

    gap: 20px;

    margin-bottom: 20px;
}

.info-item {

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.info-item label {

    font-size: 0.85rem;

    font-weight: 600;

    color: #6b7280;

    text-transform: uppercase;
}

.info-item span {

    font-size: 1rem;

    font-weight: 500;

    color: #111827;
}

.full-width {

    margin-bottom: 20px;
}

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.organization-wrapper {

    max-width: 900px;

    margin: 0 auto;
}

.organization-card {

    width: 100%;
}

.template-badge{

    display:inline-block;

    margin-top:8px;

    padding:4px 10px;

    border-radius:20px;

    font-size:11px;

    font-weight:600;

    background:#EEF2FF;

    color:#4338CA;

}

/* ========================================
   TOPBAR (LOGIN / REGISTER / FORGOT PASSWORD)
======================================== */

.landing-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    position:relative;

    z-index:100;

}

.topbar-logo{

    display:flex;

    align-items:center;

}

.topbar-logo img{

    height:42px;

    width:auto;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.topbar-right a{

    text-decoration:none;

    color:#334155;

    font-weight:500;

    transition:.3s;

}

.topbar-right a:hover{

    color:#2563EB;

}

.topbar-register{

    padding:10px 18px;

    border-radius:10px;

    color:white !important;

    background:linear-gradient(
        90deg,
        #4f6df5,
        #6bc5f8
    );

    box-shadow:
        0 8px 20px rgba(
            79,
            109,
            245,
            .20
        );

}

.topbar-register:hover{

    transform:translateY(-2px);

}

.onboarding-steps{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:25px 0;

}

.step{
    display:flex;
    align-items:flex-start;
    gap:18px;
    text-align:left;

}

.step span{

    width:36px;
    height:36px;

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

    border-radius:50%;

    background:#4F46E5;
    color:white;

    font-weight:700;

    flex-shrink:0;

}

.step p{

    margin:0;
    text-align:left;
    line-height:1.5;

}

.never-show{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin:25px 0 20px;

    font-size:14px;
    color:#64748B;

margin-top:30px;
    margin-bottom:20px;



}
.modal-actions{

    display:flex;
    justify-content:center;
    gap:15px;

}