/* //register CSS */


*{box-sizing:border-box;margin:0;padding:0;}
.wrap{min-height:580px;display:flex;font-family:var(--font-sans);border-radius:var(--border-radius-lg);overflow:hidden;border:0.5px solid var(--color-border-tertiary);}

/* LEFT */
.left{width:240px;background:linear-gradient(160deg,#1A1760 0%,#2D1B69 50%,#0F0E2A 100%);padding:2rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;position:relative;overflow:hidden;}
.blob1{position:absolute;top:-50px;right:-50px;width:160px;height:160px;border-radius:50%;background:rgba(83,74,183,0.25);}
.blob2{position:absolute;bottom:-60px;left:-40px;width:190px;height:190px;border-radius:50%;background:rgba(124,111,212,0.13);}
.brand{position:relative;z-index:1;}
.brand-logo{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#534AB7,#7C6FD4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin-bottom:14px;box-shadow:0 4px 18px rgba(83,74,183,0.4);}
.brand-name{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;}
.brand-sub{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.6;}
.steps-side{position:relative;z-index:1;}
.steps-side h4{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.3);font-weight:600;margin-bottom:14px;}
.step-side-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;position:relative;}
.step-side-item::before{content:'';position:absolute;left:13px;top:26px;width:1.5px;height:calc(100% + 2px);background:rgba(255,255,255,0.1);}
.step-side-item:last-child::before{display:none;}
.step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.step-num.done{background:#1D9E75;color:#fff;}
.step-num.active{background:#534AB7;color:#fff;box-shadow:0 0 0 3px rgba(83,74,183,0.3);}
.step-num.todo{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.1);}
.step-side-text .st{font-size:12px;font-weight:600;color:#fff;margin-bottom:1px;}
.step-side-text .sd{font-size:10px;color:rgba(255,255,255,0.35);}
.step-side-item .step-num.todo ~ .step-side-text .st{color:rgba(255,255,255,0.35);}
.left-footer{font-size:10px;color:rgba(255,255,255,0.2);position:relative;z-index:1;line-height:1.7;}

/* RIGHT */
.right{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}
/* .register-card{
    width: 100%;
    max-width: 780px;      
    min-height: 760px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 45px;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
} */
/* ============================================================
   REGISTER PAGE - MOBILE RESPONSIVE v2 (compact top banner + bottom form)
   ============================================================ */

@media (max-width: 768px){
    .register-page .wrap{
        flex-direction:column;
        min-height:auto;
        border-radius:16px;
    }

    /* TOP: compact brand banner */
    .register-page .left{
        width:100%;
        padding:1.5rem 1.25rem;
        justify-content:flex-start;
        align-items:center;
        text-align:center;
        gap:10px;
    }
    .register-page .blob1,
    .register-page .blob2{
        display:none;
    }
    .register-page .steps-side{
        display:none;
    }
    .register-page .brand{
        text-align:center;
        width:100%;
    }
    .register-page .brand-logo{
        margin:0 auto 10px;
    }
    .register-page .left-footer{
        display:none;
    }

    /* BOTTOM: registration form card */
    .register-page .right{
        padding:1.25rem 1rem 1.75rem;
    }
    .register-page .reg-head{
        flex-direction:column;
        text-align:center;
        gap:6px;
    }
    .register-page .form-grid-2{
        grid-template-columns:1fr; /* stack fields on mobile */
    }
}

@media (max-width: 480px){
    .register-page .reg-card{
        padding:24px 18px;
        border-radius:14px;
        min-height:auto;
    }
    .register-page .reg-head-text h2{
        font-size:19px;
    }
    .register-page .form-label{
        font-size:10px;
    }
    .register-page .input-wrap,
    .register-page .input-box{
        height:46px;
    }
    .register-page .reg-btn{
        font-size:13px;
        padding:11px;
    }
}

.reg-head{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:0.5px solid var(--color-border-tertiary);}
.reg-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#EEEDFE,#CCC9F0);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.reg-head-text h2{font-size:16px;font-weight:700;color:var(--color-text-primary);margin-bottom:2px;}
.reg-head-text p{font-size:11.5px;color:var(--color-text-secondary);}

.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-grid-1{display:grid;grid-template-columns:1fr;gap:10px;}
.form-group{margin-bottom:0;}
.form-label{font-size:10.5px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;display:flex;align-items:center;gap:4px;}
.form-label .req{color:#D94F4F;font-size:12px;}
.input-wrap{
    display:flex;
    align-items:center;
    gap:10px;

    width:100%;
    height:48px;

    background:#fff;
    border:1px solid #d6d6d6;
    border-radius:10px;

    padding:0 15px;
    margin-top:6px;

    transition:.3s;
}

.input-wrap:hover{
    border-color:#534AB7;
}

.input-wrap:focus-within{
    border-color:#534AB7;
    box-shadow:0 0 0 3px rgba(83,74,183,.15);
}
/* .input-wrap:focus-within{border-color:#534AB7;background:var(--color-background-primary);box-shadow:0 0 0 3px rgba(83,74,183,0.08);} */
.input-wrap.valid{border-color:#1D9E75;}
.input-wrap.error{border-color:#D94F4F;background:#FCEBEB;}
.input-wrap i{color:var(--color-text-tertiary);font-size:14px;flex-shrink:0;}
.input-wrap input,.input-wrap select{border:none;outline:none;background:transparent;font-size:12.5px;color:var(--color-text-primary);width:100%;}
.input-wrap input::placeholder{color:var(--color-text-tertiary);}
/* .input-wrap select{cursor:pointer;} */
.input-wrap input,
.input-wrap select{
    width:100%;
    height:100%;
    border:none;
    outline:none;
    background:none;
    font-size:14px;
}
.login-card h2{
    font-size:28px;
    margin-bottom:8px;
}

.sub{
    font-size:14px;
    margin-bottom:30px;
}

.valid-icon{font-size:13px;color:#1D9E75;flex-shrink:0;}

.section-divider{display:flex;align-items:center;gap:8px;margin:12px 0 10px;}
.section-divider span{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-tertiary);font-weight:600;white-space:nowrap;}
.section-divider hr{flex:1;border:none;border-top:0.5px solid var(--color-border-tertiary);}

.reg-btn{width:100%;padding:12px;background:linear-gradient(135deg,#534AB7 0%,#7C6FD4 100%);color:#fff;border:none;border-radius:var(--border-radius-md);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s;margin-top:14px;box-shadow:0 4px 14px rgba(83,74,183,0.3);letter-spacing:0.01em;}
.reg-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(83,74,183,0.4);}
.reg-btn:active{transform:translateY(0);}
.reg-btn.loading{opacity:0.75;pointer-events:none;}

.error-box{display:none;align-items:center;gap:8px;background:#FCEBEB;border:0.5px solid #F0A0A0;border-radius:var(--border-radius-md);padding:8px 11px;font-size:12px;color:#A32D2D;margin-bottom:10px;}
.error-box.show{display:flex;}

.login-link{text-align:center;margin-top:12px;font-size:12px;color:var(--color-text-secondary);}
.login-link span{color:#534AB7;cursor:pointer;font-weight:600;}
.login-link span:hover{text-decoration:underline;}

.success-overlay{display:none;position:absolute;inset:0;background:rgba(255,255,255,0.95);border-radius:var(--border-radius-lg);align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:10;text-align:center;padding:2rem;}
.success-overlay.show{display:flex;}
.success-icon{width:64px;height:64px;border-radius:50%;background:#E1F5EE;display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:4px;}
.success-overlay h3{font-size:18px;font-weight:700;color:var(--color-text-primary);}
.success-overlay p{font-size:13px;color:var(--color-text-secondary);line-height:1.6;}
.success-id{font-size:13px;font-weight:600;background:#EEEDFE;color:#534AB7;padding:6px 16px;border-radius:20px;margin:4px 0;}
.success-btn{padding:10px 24px;background:#534AB7;color:#fff;border:none;border-radius:var(--border-radius-md);font-size:13px;font-weight:600;cursor:pointer;margin-top:6px;}

.card-wrap{position:relative;}

/* ****************************************************************************************** */

/* login page CSS */

:root{

--font-sans:'Segoe UI',sans-serif;

--color-background-primary:#ffffff;
--color-background-secondary:#f6f7fb;

--color-border-tertiary:#e5e7eb;
--color-border-secondary:#d1d5db;

--color-text-primary:#1f2937;
--color-text-secondary:#6b7280;
--color-text-tertiary:#9ca3af;

--border-radius-lg:20px;
--border-radius-md:12px;

}

*{box-sizing:border-box;margin:0;padding:0;}
.wrap{min-height:580px;display:flex;font-family:var(--font-sans);border-radius:var(--border-radius-lg);overflow:hidden;border:0.5px solid var(--color-border-tertiary);}

/* LEFT PANEL */
.left{width:260px;background:linear-gradient(160deg,#1A1760 0%,#2D1B69 50%,#0F0E2A 100%);padding:2rem 1.75rem;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;position:relative;overflow:hidden;}
.blob1{position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:rgba(83,74,183,0.25);}
.blob2{position:absolute;bottom:-60px;left:-40px;width:200px;height:200px;border-radius:50%;background:rgba(124,111,212,0.15);}
.blob3{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.03);}
.brand{position:relative;z-index:1;}
.brand-logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#534AB7,#7C6FD4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;margin-bottom:16px;box-shadow:0 4px 20px rgba(83,74,183,0.4);}
.brand-name{font-size:19px;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:0.01em;}
.brand-sub{font-size:11.5px;color:rgba(255,255,255,0.45);line-height:1.6;}
.stats-cards{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;}
.stat-mini{background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;}
.stat-mini-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.stat-mini-text .val{font-size:15px;font-weight:700;color:#fff;line-height:1;}
.stat-mini-text .lbl{font-size:10px;color:rgba(255,255,255,0.45);margin-top:2px;}
.left-footer{font-size:10px;color:rgba(255,255,255,0.2);position:relative;z-index:1;line-height:1.6;}

/* RIGHT PANEL */
.right{flex:1;background:var(--color-background-secondary);display:flex;align-items:center;justify-content:center;padding:2rem;}
/* .login-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:35px;width:100%;max-width:420px;box-shadow:0 4px 24px rgba(0,0,0,0.06);} */
.login-card{
    width:100%;
    max-width:420px;
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.input-box{
    display:flex;
    align-items:center;
    gap:10px;
    height:52px;
    padding:0 15px;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    margin-bottom:20px;
}

.login-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#f3f4f6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin:0 auto 18px;
}
.input-box:focus-within{
    border-color:#534AB7;
    box-shadow:0 0 0 3px rgba(83,74,183,.15);
}

.input-box input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-size:15px;
}

.input-box i{
    font-size:18px;
    color:#777;
}

.eye{
    cursor:pointer;
}
.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:10px 0 20px;
    font-size:14px;
}

.login-options a{
    color:#534AB7;
    text-decoration:none;
}

.login-options a:hover{
    text-decoration:underline;
}
.login-head{
    text-align:center;
    margin-bottom:25px;
}

.login-head h2{
    font-size:36px;
    font-weight:700;
    color:#111827;
    margin-bottom:8px;
}

.login-head p{
    color:#6b7280;
    font-size:15px;
}
/* .login-head{text-align:center;margin-bottom:1.75rem;} */
.login-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#EEEDFE,#CCC9F0);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:26px;}
/* .login-head h2{font-size:18px;font-weight:700;color:var(--color-text-primary);margin-bottom:4px;} */
/* .login-head p{font-size:12px;color:var(--color-text-secondary);} */

.form-group{margin-bottom:14px;}
label{
    display:block;
    font-size:15px;
    font-weight:600;
    margin-bottom:8px;
    color:#374151;
}
/* .form-label{font-size:13px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;display:flex;align-items:center;gap:5px;display:block;} */
.input-wrap{display:flex;align-items:center;gap:8px;background:var(--color-background-secondary);border:1.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:10px 12px;transition:all 0.2s;}
.input-wrap:focus-within{border-color:#534AB7;background:var(--color-background-primary);box-shadow:0 0 0 3px rgba(83,74,183,0.08);}
.input-wrap i{color:var(--color-text-tertiary);font-size:15px;flex-shrink:0;}
.input-wrap input{border:none;outline:none;background:transparent;font-size:13px;color:var(--color-text-primary);width:100%;}
.input-wrap input::placeholder{color:var(--color-text-tertiary);}
.eye-btn{cursor:pointer;color:var(--color-text-tertiary);font-size:15px;padding:0 2px;}
.eye-btn:hover{color:var(--color-text-secondary);}

.helper-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 16px;}
.remember{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--color-text-secondary);cursor:pointer;user-select:none;}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--color-border-secondary);display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:10px;flex-shrink:0;}
.chk.on{background:#534AB7;border-color:#534AB7;color:#fff;}
.forgot{font-size:11.5px;color:#534AB7;cursor:pointer;font-weight:500;}
.forgot:hover{text-decoration:underline;}

.login-btn{
    width:100%;
    padding:12px;
    background:linear-gradient(135deg,#534AB7 0%,#7C6FD4 100%);
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;transition:all 0.2s;
    margin-bottom:14px;
    margin-top:20px;
    letter-spacing:0.01em;
    box-shadow:0 4px 14px rgba(83,74,183,0.35);
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(83,74,183,0.45);}
.login-btn:active{transform:translateY(0);}
.login-btn.loading{opacity:0.8;pointer-events:none;}

.error-box{display:none;align-items:center;gap:8px;background:#FCEBEB;border:0.5px solid #F0A0A0;border-radius:var(--border-radius-md);padding:9px 12px;font-size:12px;color:#A32D2D;margin-bottom:12px;}
.error-box.show{display:flex;}

.divider{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.divider hr{flex:1;border:none;border-top:0.5px solid var(--color-border-tertiary);}
.divider span{font-size:11px;color:var(--color-text-tertiary);}

.help-btn{width:100%;padding:9px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);font-size:12px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all 0.15s;}
.help-btn:hover{background:var(--color-background-primary);color:var(--color-text-primary);}

.login-footer{margin-top:1.25rem;text-align:center;}

.support{
    text-align:center;
    margin-top:25px;
    color:#555;
    line-height:1.8;
}

.support span{
    color:#534AB7;
}
.register-link{
    text-align:center;
    margin-top:25px;
    font-size:14px;
}

.register-link a{
    color:#534AB7;
    font-weight:600;
    text-decoration:none;
}
.steps{
    display:flex;
    justify-content:space-between;
    margin-top:30px;
}

.steps div{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:12px;
    color:#888;
}

.steps span{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#e5e7eb;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:5px;
}

.steps .active span{
    background:#534AB7;
    color:#fff;
}
/* .steps{display:flex;justify-content:center;gap:6px;} */
/* .step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;} */
.step-dot{width:28px;height:28px;border-radius:50%;background:var(--color-background-secondary);border:1.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--color-text-tertiary);}
.step-dot.active{background:#534AB7;border-color:#534AB7;color:#fff;}
.step-dot.done{background:#1D9E75;border-color:#1D9E75;color:#fff;}
.step-line{flex:1;height:1.5px;background:var(--color-border-tertiary);margin-top:14px;align-self:flex-start;}
.step-lbl{font-size:9px;color:var(--color-text-tertiary);text-align:center;white-space:nowrap;}
.step-lbl.active{color:#534AB7;font-weight:600;}
.steps-wrap{display:flex;align-items:flex-start;gap:0;margin-top:16px;padding:0 4px;}
.step-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;}
.step-connector{flex:1;height:1.5px;background:var(--color-border-tertiary);margin-top:13px;}

/* ============================================================
   LOGIN PAGE - MOBILE RESPONSIVE v2 (compact top banner + bottom form)
   ============================================================ */

@media (max-width: 768px){
    .login-page .wrap{
        flex-direction:column;
        min-height:auto;
        border-radius:16px;
    }

    /* TOP: compact brand banner */
    .login-page .left{
        width:100%;
        padding:1.5rem 1.25rem;
        justify-content:flex-start;
        align-items:center;
        text-align:center;
        gap:10px;
    }
    .login-page .blob1,
    .login-page .blob2{
        display:none;
    }
    .login-page .steps-side{
        display:none;
    }
    .login-page .brand{
        text-align:center;
        width:100%;
    }
    .login-page .brand-logo{
        margin:0 auto 10px;
    }
    .login-page .left-footer{
        display:none;
    }

    /* BOTTOM: login form card */
    .login-page .right{
        padding:1.25rem 1rem 1.75rem;
    }
    .login-page .login-card{
        padding:28px 22px;
        max-width:100%;
        box-shadow:none;
        border-radius:16px;
    }
    .login-page .login-head h2{
        font-size:22px;
    }
    .login-page .login-icon{
        width:56px;
        height:56px;
        font-size:28px;
    }
}

@media (max-width: 480px){
    .login-page .left{
        padding:1.25rem 1rem;
    }
    .login-page .brand-logo{
        width:44px;
        height:44px;
        font-size:22px;
    }
    .login-page .brand-name{
        font-size:16px;
    }
    .login-page .brand-sub{
        font-size:10.5px;
    }
    .login-page .login-card{
        padding:22px 16px;
        border-radius:14px;
    }
    .login-page .login-head h2{
        font-size:20px;
    }
    .login-page .login-head p{
        font-size:13px;
    }
    .login-page .input-box{
        height:46px;
        padding:0 12px;
    }
    .login-page .input-box input{
        font-size:14px;
    }
    .login-page .login-btn{
        font-size:14px;
        padding:11px;
    }
    .login-page .register-link{
        font-size:13px;
    }
}
/* ******************************************Dashboard******************************************************** */

/* .dash-root { padding: 2rem 1.5rem; max-width: 680px; }
  .top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
  .nav-links { display: flex; gap: 1.5rem; }
  .nav-links a { font-size: 13px; color: var(--color-text-secondary); text-decoration: none; }
  .nav-links a.active { color: var(--color-text-primary); font-weight: 500; }
  .avatar { width: 36px; height: 36px; border-radius: 50%; background: #CECBF6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #3C3489; }
  .welcome-section { margin-bottom: 1.75rem; }
  .welcome-section h1 { font-size: 22px; font-weight: 500; margin: 0 0 4px; color: var(--color-text-primary); }
  .welcome-section p { font-size: 14px; color: var(--color-text-secondary); margin: 0; }
  .meta-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
  .meta-card { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 14px 16px; }
  .meta-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); margin-bottom: 4px; }
  .meta-card .value { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
  .status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #FAEEDA; color: #633806; font-weight: 500; }
  .status-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #EF9F27; }
  .main-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); overflow: hidden; }
  .card-header { padding: 1.25rem 1.5rem; border-bottom: 0.5px solid var(--color-border-tertiary); display: flex; align-items: center; justify-content: space-between; }
  .card-header h2 { font-size: 15px; font-weight: 500; margin: 0; color: var(--color-text-primary); }
  .card-body { padding: 1.5rem; }
  .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
  .stat-item { text-align: center; padding: 1rem; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-tertiary); }
  .stat-item .icon { font-size: 22px; margin-bottom: 8px; }
  .stat-item .num { font-size: 20px; font-weight: 500; color: var(--color-text-primary); line-height: 1; margin-bottom: 4px; }
  .stat-item .desc { font-size: 12px; color: var(--color-text-secondary); }
  .stat-item.accent { background: #EEEDFE; border-color: #AFA9EC; }
  .stat-item.accent .num { color: #3C3489; }
  .stat-item.accent .icon { color: #534AB7; }
  .stat-item.accent .desc { color: #7F77DD; }
  .divider { height: 0.5px; background: var(--color-border-tertiary); margin: 0 0 1.5rem; }
  .info-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 10px; }
  .info-row .lbl { color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; }
  .info-row .val { font-weight: 500; color: var(--color-text-primary); }
  .start-btn { width: 100%; padding: 13px; background: #534AB7; color: #EEEDFE; border: none; border-radius: var(--border-radius-md); font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1.5rem; transition: background 0.15s; }
  .start-btn:hover { background: #3C3489; }
  .tip-text { font-size: 12px; color: var(--color-text-tertiary); text-align: center; margin-top: 10px; } */

  /* Side bar  */
  .layout{
  display:flex;
  min-height:100vh;
}

/* SIDEBAR */
.sidebar{
  width:240px;
  background:#1f1f2e;
  color:#fff;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sidebar-brand{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
}

.sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  background:#2c2c44;
  border-radius:10px;
}

.avatar-big{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

.sidebar a{
  color:#ccc;
  text-decoration:none;
  padding:10px;
  border-radius:8px;
  font-size:14px;
}

.sidebar a:hover{
  background:#343454;
  color:#fff;
}

.sidebar a.active{
  background:#534AB7;
  color:#fff;
}

/* MAIN */
.main-content{
  flex:1;
  padding:20px;
  background:#f6f6fb;
}

/* ********************************Assessmemt Test page ******************************* */
    

/* body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f5f6fa;
}

.layout{
    display:flex;
}

.main-content{
    flex:1;
    padding:30px;
}

.question-box{
    background:#fff;
    padding:25px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

#timer{
    background:#534AB7;
    color:#fff;
    padding:10px 20px;
    border-radius:8px;
    display:inline-block;
    float:right;
}

.option{
    border:1px solid #ddd;
    padding:12px;
    border-radius:8px;
    margin-bottom:10px;
    cursor:pointer;
}

.option:hover{
    background:#EEEDFE;
}

button{
    padding:10px 25px;
    border:none;
    background:#534AB7;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
}

button:disabled{
    opacity:.5;
} */


*{box-sizing:border-box;}
  .root{padding:1.25rem 1.5rem;max-width:680px;font-family:var(--font-sans);}
  .top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
  .top-bar h1{font-size:15px;font-weight:500;margin:0;color:var(--color-text-primary);display:flex;align-items:center;gap:8px;}
  .timer-pill{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:14px;font-weight:500;background:#E1F5EE;color:#0F6E56;border:0.5px solid #5DCAA5;transition:all 0.3s;}
  .timer-pill.warn{background:#FAEEDA;color:#854F0B;border-color:#EF9F27;}
  .timer-pill.danger{background:#FCEBEB;color:#A32D2D;border-color:#E24B4A;}
  .progress-bar{height:4px;background:var(--color-background-secondary);border-radius:2px;margin-bottom:1rem;overflow:hidden;}
  .progress-fill{height:100%;background:#534AB7;border-radius:2px;transition:width 0.3s;}

  .layout{display:grid;grid-template-columns:170px 1fr 150px;gap:12px;align-items:start;}

  /* SIDEBAR */
  .sidebar{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;}
  .sidebar-head{padding:10px 12px;border-bottom:0.5px solid var(--color-border-tertiary);}
  .sidebar-head .subject-name{font-size:13px;font-weight:500;color:var(--color-text-primary);}
  .sidebar-head .subject-sub{font-size:11px;color:var(--color-text-secondary);}
  .subject-tabs{display:flex;gap:4px;padding:8px;border-bottom:0.5px solid var(--color-border-tertiary);flex-wrap:wrap;}
  .subj-tab{font-size:10px;padding:3px 7px;border-radius:20px;border:0.5px solid var(--color-border-tertiary);cursor:pointer;font-weight:500;color:var(--color-text-secondary);background:var(--color-background-secondary);transition:all 0.15s;}
  .subj-tab.active{background:#EEEDFE;color:#534AB7;border-color:#AFA9EC;}
  .cat-list{padding:6px;}
  .cat-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--border-radius-md);cursor:pointer;transition:all 0.15s;margin-bottom:2px;}
  .cat-item:hover{background:var(--color-background-secondary);}
  .cat-item.active{background:#EEEDFE;}
  .cat-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .cat-info{flex:1;min-width:0;}
  .cat-name{font-size:12px;font-weight:500;color:var(--color-text-primary);}
  .cat-item.active .cat-name{color:#534AB7;}
  .cat-count{font-size:10px;color:var(--color-text-tertiary);}
  .cat-check{font-size:12px;color:#1D9E75;}

  /* QUESTION CARD */
  .question-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;}
  .q-header{padding:12px 16px;border-bottom:0.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:space-between;}
  .q-label{font-size:12px;color:var(--color-text-secondary);}
  .q-label span{font-weight:500;color:var(--color-text-primary);}
  .q-badge{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:500;}
  .q-body{padding:16px;}
  .q-text{font-size:14px;font-weight:500;color:var(--color-text-primary);margin:0 0 16px;line-height:1.55;}
  .options{display:flex;flex-direction:column;gap:8px;}
  .option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--border-radius-md);border:1.5px solid var(--color-border-tertiary);cursor:pointer;transition:all 0.15s;background:var(--color-background-primary);}
  .option:hover{border-color:#AFA9EC;background:#EEEDFE;}
  .option.selected{border-color:#534AB7;background:#EEEDFE;}
  .opt-circle{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--color-border-secondary);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
  .option.selected .opt-circle{border-color:#534AB7;background:#534AB7;}
  .opt-dot{width:6px;height:6px;border-radius:50%;background:#fff;display:none;}
  .option.selected .opt-dot{display:block;}
  .opt-letter{font-size:10px;font-weight:500;color:var(--color-text-tertiary);width:14px;flex-shrink:0;}
  .option.selected .opt-letter{color:#534AB7;}
  .opt-text{font-size:13px;color:var(--color-text-primary);}
  .q-footer{padding:12px 16px;border-top:0.5px solid var(--color-border-tertiary);display:flex;justify-content:space-between;gap:8px;}
  .btn{padding:8px 16px;border-radius:var(--border-radius-md);font-size:12px;font-weight:500;cursor:pointer;border:0.5px solid var(--color-border-secondary);background:var(--color-background-primary);color:var(--color-text-primary);display:flex;align-items:center;gap:5px;transition:all 0.15s;}
  .btn:hover{background:var(--color-background-secondary);}
  .btn:disabled{opacity:0.35;cursor:not-allowed;}
  .btn-primary{background:#534AB7;color:#EEEDFE;border-color:#534AB7;}
  .btn-primary:hover{background:#3C3489;}
  .btn-submit{background:#1D9E75;color:#E1F5EE;border-color:#1D9E75;}
  .btn-submit:hover{background:#0F6E56;}

  /* NAVIGATOR */
  .nav-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:12px;}
  .nav-title{font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--color-text-tertiary);font-weight:500;margin-bottom:10px;}
  .nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px;}
  .nav-btn{width:100%;aspect-ratio:1;border-radius:6px;border:1.5px solid var(--color-border-tertiary);background:var(--color-background-secondary);font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:all 0.15s;}
  .nav-btn.answered{background:#E1F5EE;border-color:#5DCAA5;color:#0F6E56;}
  .nav-btn.current{background:#FAEEDA;border-color:#EF9F27;color:#854F0B;}
  .legend{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:0.5px solid var(--color-border-tertiary);}
  .legend-row{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--color-text-secondary);}
  .legend-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
  .legend-dot.answered{background:#5DCAA5;}
  .legend-dot.current{background:#EF9F27;}
  .legend-dot.unanswered{background:var(--color-background-secondary);border:1.5px solid var(--color-border-secondary);}

  .wrapper{position:relative;}
  .confirm-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,0.35);border-radius:var(--border-radius-lg);align-items:center;justify-content:center;z-index:10;}
  .confirm-box{background:var(--color-background-primary);border-radius:var(--border-radius-lg);padding:22px;width:260px;border:0.5px solid var(--color-border-tertiary);}
  .confirm-box h3{font-size:14px;font-weight:500;margin:0 0 8px;color:var(--color-text-primary);}
  .confirm-box p{font-size:12px;color:var(--color-text-secondary);margin:0 0 16px;line-height:1.5;}
  .confirm-actions{display:flex;gap:8px;}
  .confirm-actions button{flex:1;}


  /* ****************************************Result Page****************************************** */