:root{
    --bg:#f8fafc;
    --card:rgba(255,255,255,.85);
    --text:#1e293b;
    --primary:#6366f1;
}

body.dark-theme{
    --bg:#050816;
    --card:rgba(15,23,42,.82);
    --text:#f1f5f9;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;

    font-family:'Hind Siliguri',sans-serif;

    background:var(--bg);
}

#dotCanvas{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:0;

    background:var(--bg);

    transition:.4s ease;

    pointer-events:none;
}

.home-wrapper{
    position:relative;
    z-index:2;

    width:100%;
    height:100vh;

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

.home-card{
    width:90%;
    max-width:400px;

    padding:50px 40px;

    border-radius:30px;

    text-align:center;

    background:var(--card);

    backdrop-filter:blur(14px);

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

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

.brand-title{
    font-size:2.5rem;
    color:var(--primary);
}

.brand-tagline{
    color:var(--text);
}

.button-container{
    display:flex;
    flex-direction:column;

    gap:15px;

    margin-top:30px;
}

.login-btn{
    border:none;

    padding:16px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-size:1.1rem;

    font-weight:bold;

    cursor:pointer;
}

.reg-btn{
    border:2px solid var(--primary);

    background:transparent;

    color:var(--text);

    padding:14px;

    border-radius:14px;

    font-weight:bold;

    cursor:pointer;
}

.dark-mode-toggle-btn{
    position:fixed;

    right:25px;
    bottom:25px;

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

    background:linear-gradient(
        135deg,
        #6366f1,
        #9333ea
    );

    color:white;

    font-size:24px;

    cursor:pointer;

    z-index:9999;
}