/* =========================
   🔥 BODY
========================= */
body{
    margin:0;
    font-family:'Segoe UI', sans-serif;
    background:linear-gradient(135deg,#eef2f7,#d9e4f5);
    min-height:100vh;
    display:flex;
    justify-content:center;
}

/* =========================
   🔥 APP CENTER
========================= */
#app{
    width:100%;
    display:flex;
    justify-content:center;
}

/* =========================
   🔥 WRAPPER
========================= */
.wrapper{
    width:100%;
    max-width:420px;
    padding:14px;
    margin-top:15px;
}

/* =========================
   🔥 HEADER
========================= */
.header{
    position:relative;
    background:linear-gradient(135deg,#667eea,#764ba2);
    padding:16px 18px;
    margin-top:15px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:white;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* LEFT */
.header-left{
    display:flex;
    align-items:center;
    z-index:2;
}

/* LOGO */
.header-logo{
    width:42px;
    height:42px;
    transform:scale(2.4);
    object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* CENTER TITLE */
.header-title{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-size:24px;
    font-weight:700;
    letter-spacing:0.5px;
}


/* LOGOUT */
.logout{
    background:white;
    color:#444;
    padding:8px 16px;
    border-radius:20px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:0.3s;
    z-index:2;
}

.logout:hover{
    transform:scale(1.05);
}
/* =========================
   BACK BUTTON
========================= */
.back{

    width:42px;
    height:42px;

    border:none;
    border-radius:12px;

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

    color:#fff;

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

    font-size:20px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;

    backdrop-filter:blur(10px);

}

.back:hover{

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

    transform:translateX(-3px);

}

.back:active{

    transform:scale(.95);

}
/* =========================
   🔥 CARD
========================= */
.card{
    margin-top:16px;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,0.9);
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-4px);
}

/* =========================
   🔥 PROFILE
========================= */
.profile-card{
    text-align:center;
    background:linear-gradient(135deg,#f8fafc,#eef3fb);
}

/* 🔥 IMAGE WRAP FIX */
.profile-img-wrap{
    position:relative;
    display:inline-block;
}

/* IMAGE */
.profile-img-wrap img{
    width:115px;
    height:115px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

/* 🔥 CAMERA BUTTON FIXED */
.camera-btn{
    position:absolute;
    bottom:0;
    right:0;

    background:#ffffff;
    color:#555;

    width:34px;
    height:34px;

    border-radius:50%;

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

    cursor:pointer;

    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    transition:0.3s;
}

/* HOVER EFFECT */
.camera-btn:hover{
    background:#f1f5f9;
    transform:scale(1.1);
}

/* CLICK EFFECT */
.camera-btn:active{
    transform:scale(0.9);
    background:#e2e8f0;
}

/* NAME */
.name{
    display:block;
    margin-top:10px;
    font-size:22px;
    font-weight:700;
}

/* ID */
.id{
    color:#666;
    font-size:15px;
}

/* =========================
   🔥 BUTTON BASE
========================= */
.btn{
    margin-top:12px;
    padding:13px;
    width:100%;
    border:none;
    border-radius:30px;
    color:white;
    font-size:15px;
    cursor:pointer;
    transition:0.3s;
}

/* RESET */
.card .btn{
    opacity:1 !important;
    color:#fff !important;
}

/* =========================
   🔥 BUTTON COLORS
========================= */

/* Payment */
.card:nth-of-type(2) .btn{
    background:linear-gradient(135deg,#ff7e5f,#feb47b);
}

/* Result */
.card:nth-of-type(3) .btn{
    background:linear-gradient(135deg,#36d1dc,#5b86e5);
}

/* Leaderboard */
.card:nth-of-type(4) .btn{
    background:linear-gradient(135deg,#667eea,#764ba2);
}

/* Batch */
.card:nth-of-type(5) .btn{
    background:linear-gradient(135deg,#11998e,#38ef7d);
}

/* Attendance */
.card:nth-of-type(6) .btn{
    background:linear-gradient(135deg,#f7971e,#ffd200);
}

/* Homework */
.card:nth-of-type(7) .btn{
    background:linear-gradient(135deg,#ff416c,#ff4b2b);
}

/* EXTRA FIX */
.card:nth-last-of-type(2) .btn{
    background:linear-gradient(135deg,#f7971e,#ffd200) !important;
}

.card:last-of-type .btn{
    background:linear-gradient(135deg,#ff416c,#ff4b2b) !important;
}

/* =========================
   🔥 HOVER
========================= */
.btn:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* =========================
   🔥 PAYMENT BOX
========================= */
.payment-box{
    padding:14px;
    border-radius:12px;
    text-align:center;
    font-weight:bold;
}

.payment-box.green{
    background:#e8f5e9;
    color:#2e7d32;
}

.payment-box.red{
    background:#ffebee;
    color:#c62828;
}

/* =========================
   🔥 GRID
========================= */
.info-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.item{
    background:#f5f7fa;
    padding:12px;
    border-radius:12px;
}

.grid2{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

/* =========================
   🔥 MODAL
========================= */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.modal.active{
    display:flex;
}
.modal-box{
    background:#fff;
    width:90%;
    max-width:320px;
    border-radius:18px;
    padding:20px;
    text-align:center;
}

/* =========================
   🔥 TOAST
========================= */
.toast{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:#00b894;
    color:white;
    padding:12px 22px;
    border-radius:12px;
    display:none;
    z-index:999;
}

/* =========================
   🔥 RESPONSIVE
========================= */
@media(min-width:500px){
    .info-grid{
        grid-template-columns:1fr 1fr;
    }

    .grid2{
        grid-template-columns:1fr 1fr;
    }
}

/* =========================
   🔥 MODAL BUTTON FIX
========================= */

.modal-box .btn{
    background:linear-gradient(135deg,#667eea,#764ba2) !important;
    color:#fff !important;
    opacity:1 !important;
}

/* REMOVE BUTTON */
.modal-box .btn.danger{
    background:linear-gradient(135deg,#ff416c,#ff4b2b) !important;
}

/* CANCEL BUTTON */
.modal-box .btn.cancel{
    background:#e2e8f0 !important;
    color:#333 !important;
}