/* ===== GLOBAL RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', 'Segoe UI', sans-serif;
}

/* ===== BACKGROUND ===== */
body{
    min-height:100vh;
    background: linear-gradient(135deg,#667eea,#764ba2,#43cea2);
    background-size: 400% 400%;
    animation: bgMove 12s ease infinite;
    display:flex;
    justify-content:center;
    align-items:center;
}

@keyframes bgMove{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/* ===== GLASS CARD ===== */
.card{
    width:420px;
    padding:35px;
    border-radius:22px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.25);
    animation: zoomIn .7s ease;
}

@keyframes zoomIn{
    from{opacity:0;transform:scale(0.85)}
    to{opacity:1;transform:scale(1)}
}

/* ===== HEADINGS ===== */
h1,h2{
    text-align:center;
    color:#ffffff;
    margin-bottom:15px;
    letter-spacing:0.5px;
}
h1 span{
    color:#facc15;
}

/* ===== TEXT ===== */
p{
    text-align:center;
    color:#e5e7eb;
    margin-bottom:18px;
    font-size:15px;
}

/* ===== INPUT ===== */
.input-group{
    position:relative;
    margin-bottom:20px;
}
.input-group input{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:none;
    outline:none;
    font-size:15px;
    background:rgba(255,255,255,0.9);
}
.input-group label{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    color:#6b7280;
    font-size:14px;
    pointer-events:none;
    transition:.3s;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
    top:-8px;
    left:12px;
    font-size:12px;
    background:#fff;
    padding:0 6px;
    border-radius:6px;
    color:#4f46e5;
}

/* ===== BUTTON ===== */
.btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:16px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    background: linear-gradient(135deg,#4f46e5,#9333ea);
    transition:all .3s ease;
}
.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,0,0,.4);
}

/* ===== DASHBOARD BADGE ===== */
.badge{
    margin:15px auto;
    padding:10px 18px;
    border-radius:30px;
    background:rgba(34,197,94,.2);
    color:#bbf7d0;
    width:fit-content;
    font-size:14px;
}

/* ===== LOGOUT ===== */
.logout{
    margin-top:22px;
    display:block;
    text-align:center;
    padding:14px;
    border-radius:16px;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.logout:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}

/* ===== MESSAGE ===== */
.alert{
    padding:12px;
    border-radius:14px;
    margin-bottom:15px;
    text-align:center;
}
.alert-success{
    background:rgba(34,197,94,.25);
    color:#d1fae5;
}
.alert-error{
    background:rgba(239,68,68,.25);
    color:#fee2e2;
}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){
    .card{width:92%}
}


/* ===== TOP NAVBAR ===== */
.topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:64px;
    background:rgba(15,23,42,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    z-index:1000;
}

/* Logo / Title */
.topbar .logo{
    color:#facc15;
    font-size:20px;
    font-weight:700;
    letter-spacing:.5px;
}

/* Menu */
.topbar ul{
    display:flex;
    list-style:none;
    gap:25px;
}
.topbar ul li a{
    color:#e5e7eb;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    padding:8px 14px;
    border-radius:10px;
    transition:.3s;
}
.topbar ul li a:hover,
.topbar ul li a.active{
    background:linear-gradient(135deg,#4f46e5,#9333ea);
    color:#fff;
}

/* Logout Button */
.topbar .logout-btn{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    padding:10px 18px;
    border-radius:14px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.topbar .logout-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.4);
}

/* Push content down because of fixed navbar */
.dashboard-wrap{
    margin-top:90px;
    display:flex;
    justify-content:center;
}

/* Mobile */
@media(max-width:768px){
    .topbar ul{display:none}
}


.dashboard-wrap{
    margin-top:90px;
}