:root{

    --bg:#0f172a;

    --card:#111827;

    --text:#ffffff;

    --accent:#00f2ff;

    --border:rgba(255,255,255,0.08);

    --muted:#9ca3af;

}



.light-theme{

    --bg:#f8fafc;

    --card:#ffffff;

    --text:#111827;

    --accent:#2563eb;

    --border:#d1d5db;

    --muted:#6b7280;

}



body{

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

    overflow-x:hidden;

    background:var(--bg)!important;

    color:var(--text)!important;

    transition:.3s;

}



canvas{

    position:fixed;

    z-index:-1;

    top:0;

    left:0;

}



.theme-toggle{

    position:fixed;

    top:50%;

    right:20px;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--accent);

    color:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:99999;

    font-size:24px;

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

    transition:.3s;

}



.theme-toggle:hover{

    transform:translateY(-50%) scale(1.08);

}



.wh-widget-send-button,

.whatsapp-chat-widget,

.get-button,

#WAButton{

    bottom:20px !important;

    right:20px !important;

    z-index:9998 !important;

}



.pc-container,

.pc-content{

    background:transparent !important;

    color:var(--text) !important;

}



.pc-sidebar{

    background:var(--card)!important;

    border-right:1px solid var(--border)!important;

}



.pc-sidebar .pc-link,

.pc-sidebar .pc-caption label,

.pc-sidebar .pc-mtext,

.pc-sidebar .pc-micon i{

    color:var(--text)!important;

}



.pc-sidebar .pc-link:hover{

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

    color:var(--accent)!important;

}



.pc-header{

    background:var(--card)!important;

    border-bottom:1px solid var(--border)!important;

}



.pc-head-link,

.pc-header h1{

    color:var(--text)!important;

}



.card{

    background:var(--card)!important;

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

    border-radius:18px !important;

    color:var(--text)!important;

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

}



.card p,

.card h1,

.card h2,

.card h3,

.card h4,

.card h5,

.card h6,

.card span,

.card label,

.card div{

    color:var(--text)!important;

}



.bg-secondary-dark,

.bg-primary-dark{

    background:linear-gradient(

        135deg,

        var(--card),

        rgba(255,255,255,0.03)

    ) !important;

}



.btn-outline-light{

    border-color:var(--accent)!important;

    color:var(--accent)!important;

}



.btn-outline-light:hover{

    background:var(--accent)!important;

    color:#000!important;

}



.btn-primary,

.btn-secondary{

    background:var(--accent)!important;

    border:none!important;

    color:#000!important;

}



.modal-content{

    background:var(--card)!important;

    color:var(--text)!important;

    border-radius:20px!important;

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

}



.modal-header,

.modal-footer{

    border-color:var(--border)!important;

}



input,

select,

textarea{

    background:transparent!important;

    color:var(--text)!important;

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

}



input:focus,

select:focus,

textarea:focus{

    border-color:var(--accent)!important;

    box-shadow:none!important;

}



select option,

option{

    background:var(--card)!important;

    color:var(--text)!important;

}



.dropdown-menu{

    background:var(--card)!important;

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

}



.dropdown-item{

    color:var(--text)!important;

}



.dropdown-item:hover{

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

    color:var(--accent)!important;

}



table{

    color:var(--text)!important;

}



.table{

    color:var(--text)!important;

}



.table th,

.table td{

    border-color:var(--border)!important;

}



.text-white{

    color:var(--text)!important;

}



.text-muted,

.opacity-50{

    color:var(--muted)!important;

}



.greeting-text{

    color:var(--text)!important;

    font-weight:700;

}



.text-decoration-none{

    color:inherit!important;

}



.rounded-circle{

    border:2px solid var(--accent);

}



.light-theme .pc-container,

.light-theme .pc-content{

    background:#f8fafc!important;

}



.light-theme .card{

    background:#ffffff!important;

}



.light-theme .modal-content{

    background:#ffffff!important;

}



.light-theme input,

.light-theme select,

.light-theme textarea{

    color:#111827!important;

    border:1px solid #d1d5db!important;

}



.light-theme select option,

.light-theme option{

    background:#ffffff!important;

    color:#111827!important;

}



.light-theme .dropdown-menu{

    background:#ffffff!important;

}



.light-theme .dropdown-item{

    color:#111827!important;

}

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

.navbar{
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    padding: 15px 0;
    position: relative;
    z-index: 10;
}

/* SITE NAME */
.navbar-brand{
    color: #fff !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* LIGHT THEME FIX */
.light-theme .navbar{
    background: rgba(255,255,255,0.8);
}

.light-theme .navbar-brand{
    color: #111827 !important;
}


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

/* LOGIN */
.btn-login{
    background: var(--accent);
    color: #000 !important;
    border: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-login:hover{
    transform: translateY(-2px);
    opacity: 0.9;
}

/* SIGNUP */
.btn-outline-light{
    border: 2px solid var(--accent)!important;
    color: var(--accent)!important;
    font-weight: 600;
    border-radius: 8px;
}

.btn-outline-light:hover{
    background: var(--accent)!important;
    color:#000!important;
}


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

.hero{
    padding: 100px 0;
    position: relative;
    z-index: 2;
}

/* MAIN TEXT */
.hero h1{
    font-size: 45px;
    font-weight: 800;
    color: var(--text);
}

.hero h1 span{
    color: var(--accent);
}

.hero p{
    color: var(--muted);
    font-size: 16px;
}

/* MAIN BUTTON */
.btn-main{
    background: linear-gradient(135deg, var(--accent), #2563eb);
    color:#000;
    border:none;
    padding:12px 28px;
    border-radius:10px;
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

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


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

.dashboard{
    background: var(--card);
    padding:20px;
    border-radius:15px;
    border:1px solid var(--border);
}

.dashboard h6{
    color: var(--text);
}

.bar{
    height:8px;
    background: var(--accent);
    margin:10px 0;
    border-radius:10px;
}


/* ================= CANVAS SAFETY ================= */

canvas{
    z-index:-1;
    pointer-events:none;
}


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

@media(max-width:768px){

    .hero h1{
        font-size:30px;
    }

    .navbar-brand{
        font-size:18px;
    }

}