/* ===========================================================
   mcq-quiz-manager: Login / Register floating button + popup
=========================================================== */

#mcqAuthFloatBtn{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:99990;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:30px;
    border:none;
    background:#2563eb;
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
}

#mcqAuthFloatBtn .mcq-auth-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    object-fit:cover;
    background:#c6d4e6;
}

.mcq-auth-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:99991;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.mcq-auth-box{
    background:#fff;
    border-radius:18px;
    width:100%;
    max-width:400px;
    max-height:88vh;
    overflow-y:auto;
    padding:26px 24px;
    position:relative;
}

/* Mandatory Google-sign-in profile gate - a completely separate,
   un-closable full-screen overlay (not the small dismissable
   login popup) since it needs to work regardless of how the
   person landed on this page, and needs to actually block access
   to the rest of the site until filled in. */
.mcq-profile-gate-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.6);
    z-index:2147483000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.mcq-profile-gate-box{
    background:#fff;
    border-radius:18px;
    width:100%;
    max-width:400px;
    max-height:88vh;
    overflow-y:auto;
    padding:26px 24px;
}

.mcq-auth-close{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:#f1f5f9;
    color:#334155;
    font-size:16px;
    cursor:pointer;
}

.mcq-auth-overlay-note{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
    font-size:13px;
    font-weight:600;
    padding:10px 14px;
    border-radius:10px;
    margin:0 0 16px;
    text-align:center;
}

.mcq-auth-tabs{
    display:flex;
    gap:8px;
    margin-bottom:20px;
}

.mcq-auth-tab{
    flex:1;
    padding:10px;
    text-align:center;
    border:none;
    border-radius:10px;
    background:#f1f5f9;
    color:#475569;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}

.mcq-auth-tab.active{
    background:#2563eb;
    color:#fff;
}

.mcq-auth-panel{
    display:none;
}

.mcq-auth-panel.active{
    display:block;
}

.mcq-auth-title{
    font-size:19px;
    font-weight:700;
    color:#1e293b;
    margin:0 0 4px;
}

.mcq-auth-subtitle{
    font-size:13.5px;
    color:#64748b;
    margin:0 0 18px;
}

.mcq-auth-field{
    margin-bottom:14px;
}

.mcq-auth-field label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#334155;
    margin-bottom:6px;
}

.mcq-auth-field input,
.mcq-auth-field select{
    width:100%;
    padding:12px 14px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:14px;
    line-height:1.5;
    box-sizing:border-box;
}

.mcq-auth-field select{
    min-height:46px;
    padding-top:10px;
    padding-bottom:10px;
}

.mcq-auth-row{
    display:flex;
    gap:10px;
}

.mcq-auth-row .mcq-auth-field{
    flex:1;
}

.mcq-auth-submit{
    width:100%;
    padding:13px;
    border:none;
    border-radius:10px;
    background:#16a34a;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    margin-top:6px;
}

.mcq-auth-error{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
    padding:10px 12px;
    border-radius:8px;
    font-size:13px;
    margin-bottom:14px;
    display:none;
}

.mcq-auth-error.visible{
    display:block;
}

.mcq-auth-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
    color:#94a3b8;
    font-size:12px;
}

.mcq-auth-divider::before,
.mcq-auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#e2e8f0;
}

#mcqGoogleBtnContainer{
    display:flex;
    justify-content:center;
    min-height:44px;
}

.mcq-auth-google-note{
    text-align:center;
    font-size:12px;
    color:#94a3b8;
    margin-top:8px;
}

.mcq-auth-user-panel{
    text-align:center;
}

.mcq-auth-user-panel img{
    width:64px;
    height:64px;
    border-radius:50%;
    margin-bottom:12px;
    object-fit:cover;
}

.mcq-auth-user-panel h3{
    margin:0 0 4px;
    color:#2563eb;
}

.mcq-auth-user-panel p{
    margin:0 0 20px;
    color:#64748b;
    font-size:13px;
}

#mcqAuthLogoutBtn{
    width:100%;
    padding:12px;
    border:1px solid #dc2626;
    border-radius:10px;
    background:#fff;
    color:#dc2626;
    font-weight:700;
    cursor:pointer;
}

/* ---------------------------------------------------------
   Dedicated login page ([mcq_login] shortcode)
--------------------------------------------------------- */

.mcq-login-page{
    display:flex;
    justify-content:center;
    padding:30px 10px 50px;
}

.mcq-auth-page-box{
    max-width:420px;
    width:100%;
    background:#fff;
    border-radius:18px;
    box-shadow:0 2px 14px rgba(0,0,0,.08);
    padding:28px 24px;
}

.mcq-auth-edit-toggle{
    width:100%;
    padding:11px;
    border:1px solid #2563eb;
    border-radius:10px;
    background:#fff;
    color:#2563eb;
    font-weight:700;
    cursor:pointer;
    margin-bottom:14px;
}

.mcq-edit-profile-form{
    text-align:left;
    margin-bottom:16px;
    padding-top:6px;
    border-top:1px solid #e2e8f0;
}

.mcq-auth-success{
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    color:#15803d;
    padding:10px 12px;
    border-radius:8px;
    font-size:13px;
    margin-bottom:14px;
    display:none;
    text-align:left;
}

.mcq-auth-success.visible{
    display:block;
}

/* The floating login button is only meant for regular pages.
   Inside fullscreen quiz mode it would float over every
   screen (start, instructions, questions, result) which is
   distracting -- there the Leaderboard tab's own "Login /
   Register" button is the only entry point, and it opens
   the same popup directly. */
.mcq-fullscreen #mcqAuthFloatBtn{
    display:none;
}

/* ---------------------------------------------------------
   Professional dashboard (logged-in My Account page)
--------------------------------------------------------- */

.mcq-dashboard-box{
    max-width:560px;
    text-align:left;
    max-height:none;
    overflow-y:visible;
    box-shadow:none;
    border:1px solid #e2e8f0;
}

.mcq-dashboard-loading{
    text-align:center;
    color:#64748b;
    padding:30px 0;
}

.mcq-view-more-btn{
    display:block;
    width:100%;
    margin-top:12px;
    padding:11px;
    border:1px solid #2563eb;
    border-radius:10px;
    background:#eff6ff;
    color:#2563eb;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
}

.mcq-view-more-btn:hover{
    background:#dbeafe;
}

.mcq-dashboard-header{
    text-align:center;
    margin-bottom:24px;
}

.mcq-dashboard-avatar{
    width:84px;
    height:84px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:12px;
    border:3px solid #EDF2FF;
}

.mcq-dashboard-header h2{
    margin:0 0 4px;
    color:#2563eb;
    font-size:22px;
}

.mcq-dashboard-header p{
    margin:0 0 12px;
    color:#64748b;
    font-size:14px;
}

.mcq-badge-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:20px;
    background:#EDF2FF;
    border:1px solid #dbe3ea;
    font-weight:700;
    font-size:13.5px;
    color:#2563eb;
}

.mcq-badge-icon{
    font-size:16px;
}

.mcq-badge-next{
    font-weight:500;
    color:#64748b;
    font-size:12px;
}

.mcq-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:18px;
}

.mcq-stat-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:14px;
    text-align:center;
}

.mcq-stat-value{
    font-size:22px;
    font-weight:800;
    color:#2563eb;
}

.mcq-stat-label{
    font-size:12px;
    color:#64748b;
    margin-top:2px;
}

.mcq-streak-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:linear-gradient(90deg,#fff7ed,#fff);
    border:1px solid #fed7aa;
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:20px;
}

.mcq-streak-flame{
    font-size:28px;
}

.mcq-streak-value{
    font-weight:800;
    color:#c2410c;
    font-size:15px;
}

.mcq-streak-sub{
    font-size:12px;
    color:#92400e;
}

.mcq-dashboard-section-title{
    font-size:14px;
    color:#2563eb;
    margin:0 0 10px;
    padding-bottom:8px;
    border-bottom:1px solid #e2e8f0;
}

.mcq-history-list{
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:22px;
}

.mcq-history-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid #eef2f6;
}

.mcq-history-row:last-child{
    border-bottom:none;
}

.mcq-history-row-clickable{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:background .15s ease;
}

.mcq-history-row-clickable:hover,
.mcq-history-row-clickable:active{
    background:#f8fafc;
}

.mcq-saved-test-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.mcq-saved-test-start{
    background:#2563eb;
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:6px 14px;
    border-radius:8px;
    text-decoration:none;
    white-space:nowrap;
}

.mcq-saved-test-remove{
    background:none;
    border:none;
    color:#dc2626;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    padding:6px 4px;
}

.mcq-history-main{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.mcq-history-title{
    font-weight:700;
    font-size:13.5px;
    color:#1e293b;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:220px;
}

.mcq-history-date{
    font-size:11.5px;
    color:#94a3b8;
}

.mcq-history-score{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    font-weight:700;
    font-size:13px;
    color:#334155;
}

.mcq-history-percent{
    font-size:11.5px;
    color:#16a34a;
    font-weight:700;
}

.mcq-dashboard-empty{
    text-align:center;
    color:#94a3b8;
    padding:20px;
    font-size:13.5px;
}

.mcq-no-plan-box{
    text-align:center;
    padding:10px 0 20px;
}

.mcq-buy-plan-btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:12px 30px;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}

.mcq-dashboard-logout{
    width:100%;
    padding:12px;
    border:1px solid #dc2626;
    border-radius:10px;
    background:#fff;
    color:#dc2626;
    font-weight:700;
    cursor:pointer;
    margin-top:6px;
}

/* ---------------------------------------------------------
   New tabbed "My Account" page
--------------------------------------------------------- */

.mcq-login-page{
    padding:0 14px 50px;
}

.mcq-account-page{
    width:100%;
    max-width:640px;
    margin:0 auto;
    text-align:left;
}

.mcq-account-banner{
    background:transparent;
    border-radius:0;
    padding:26px 18px 46px;
    position:relative;
}

.mcq-account-breadcrumb{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#64748b;
    font-weight:600;
}

.mcq-account-breadcrumb a{
    color:#2563eb;
    text-decoration:none;
}

.mcq-account-avatar-wrap{
    position:absolute;
    left:50%;
    bottom:-44px;
    transform:translateX(-50%);
}

.mcq-account-avatar{
    width:104px;
    height:104px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border:4px solid #fff;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    background:#e2e8f0;
}

.mcq-account-edit-btn{
    position:absolute;
    right:-2px;
    bottom:2px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #e2e8f0;
    background:#fff;
    color:#334155;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.mcq-account-identity{
    text-align:center;
    padding:54px 16px 18px;
}

.mcq-account-identity h2{
    margin:0 0 4px;
    color:#1e293b;
    font-size:22px;
}

.mcq-account-brand{
    display:inline-block;
    font-weight:800;
    font-size:15px;
    color:#2563eb;
    letter-spacing:.3px;
}

.mcq-account-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:0 4px 10px;
    margin-bottom:14px;
    scrollbar-width:none;
}

.mcq-account-tabs::-webkit-scrollbar{
    display:none;
}

.mcq-account-tab{
    flex:0 0 auto;
    padding:11px 18px;
    border:none;
    border-radius:10px;
    background:#edf2ff;
    color:#1d4ed8;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    width:max-content;
    min-width:max-content;
}

.mcq-account-tab:hover{
    background:#dbeafe;
}

.mcq-account-tab.active{
    background:#2563eb;
    color:#fff;
}

.mcq-account-body{
    padding:0 4px;
    animation:mcqAccountFade .2s ease;
}

@keyframes mcqAccountFade{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

.mcq-account-panel{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:18px 16px;
}

.mcq-account-logout{
    margin:18px 4px 0;
}

/* Orders */

.mcq-order-list{
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
}

.mcq-order-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid #eef2f6;
    gap:10px;
}

.mcq-order-row:last-child{
    border-bottom:none;
}

.mcq-order-main{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.mcq-order-item{
    font-weight:700;
    font-size:13.5px;
    color:#1e293b;
}

.mcq-order-number{
    font-size:11.5px;
    color:#94a3b8;
}

.mcq-order-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.mcq-order-amount{
    font-weight:700;
    font-size:13.5px;
    color:#334155;
}

.mcq-order-status{
    font-size:11px;
    font-weight:700;
    padding:2px 9px;
    border-radius:20px;
    background:#f1f5f9;
    color:#475569;
}

.mcq-order-status-completed{
    background:#f0fdf4;
    color:#15803d;
}

/* Attempt Analysis */

.mcq-analysis-callout{
    padding:10px 14px;
    border-radius:10px;
    font-size:13px;
    margin-bottom:10px;
}

.mcq-analysis-strong{
    background:#f0fdf4;
    color:#15803d;
    border:1px solid #bbf7d0;
}

.mcq-analysis-weak{
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fed7aa;
    margin-bottom:18px;
}

.mcq-trend-bars{
    display:flex;
    align-items:flex-end;
    gap:10px;
    height:120px;
    padding:10px 4px 0;
    margin-bottom:18px;
    overflow-x:auto;
}

.mcq-trend-bar-wrap{
    flex:0 0 auto;
    width:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    height:100%;
    gap:4px;
}

.mcq-trend-bar{
    width:16px;
    background:linear-gradient(180deg,#60a5fa,#2563eb);
    border-radius:6px 6px 0 0;
    min-height:6px;
}

.mcq-trend-value{
    font-size:10.5px;
    font-weight:700;
    color:#334155;
}

.mcq-trend-date{
    font-size:9.5px;
    color:#94a3b8;
}

/* Saved Questions */

.mcq-saved-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mcq-saved-card{
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
}

.mcq-saved-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    cursor:pointer;
    background:#f8fafc;
}

.mcq-saved-title{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.mcq-saved-quiz{
    font-weight:700;
    font-size:13.5px;
    color:#1e293b;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:220px;
}

.mcq-saved-meta{
    font-size:11.5px;
    color:#94a3b8;
}

.mcq-saved-remove{
    flex:0 0 auto;
    border:1px solid #dc2626;
    background:#fff;
    color:#dc2626;
    font-size:11.5px;
    font-weight:700;
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
}

.mcq-saved-content{
    display:none;
    padding:14px;
    border-top:1px solid #eef2f6;
    font-size:13.5px;
    color:#334155;
}

.mcq-saved-content.open{
    display:block;
}

.mcq-saved-question-text{
    margin-bottom:12px;
    font-weight:600;
}

.mcq-saved-options{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px;
}

.mcq-saved-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:2px solid #e5e5e5;
    border-radius:12px;
    font-size:13px;
    background:#fff;
}

.mcq-saved-option-correct{
    background:#f4fff6;
    border-color:#25b34b;
}

.mcq-saved-option-letter{
    width:26px;
    height:26px;
    flex-shrink:0;
    border-radius:50%;
    border:2px solid #e5e5e5;
    background:#fafafa;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:13px;
    color:#475569;
}

.mcq-saved-explanation{
    background:#f8fafc;
    border-radius:8px;
    padding:10px 12px;
    font-size:13px;
}

/* Reported Questions */

.mcq-report-status{
    font-size:11px;
    font-weight:700;
    padding:2px 9px;
    border-radius:20px;
    background:#fff7ed;
    color:#c2410c;
}

.mcq-report-status-resolved{
    background:#f0fdf4;
    color:#15803d;
}

.mcq-report-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mcq-report-card{
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:14px;
}

.mcq-report-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.mcq-report-card-toggle{
    cursor:pointer;
    user-select:none;
}

.mcq-report-card-body{
    display:none;
}

.mcq-report-card-body.open{
    display:block;
    margin-top:10px;
}

.mcq-report-card-title{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.mcq-report-quiz{
    font-weight:700;
    font-size:13.5px;
    color:#1e293b;
}

.mcq-report-chevron{
    font-size:10px;
    color:#94a3b8;
    margin-left:4px;
}

.mcq-report-meta{
    font-size:11.5px;
    color:#94a3b8;
}

.mcq-report-comment{
    font-size:12.5px;
    color:#475569;
    background:#f8fafc;
    border-radius:8px;
    padding:8px 10px;
}

.mcq-report-response{
    margin-top:10px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:10px;
    padding:10px 12px;
}

.mcq-report-response-label{
    font-size:11px;
    font-weight:700;
    color:#1d4ed8;
    margin-bottom:4px;
}

.mcq-report-response-text{
    font-size:12.5px;
    color:#1e3a5f;
    line-height:1.5;
}

/* Exam Rank Calculator */

.mcq-rank-note{
    font-size:13px;
    color:#64748b;
    margin:0 0 16px;
}

.mcq-rank-result{
    margin-top:18px;
    text-align:center;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:20px;
}

.mcq-rank-big{
    font-size:34px;
    font-weight:800;
    color:#2563eb;
}

.mcq-rank-sub{
    font-size:13px;
    color:#64748b;
    margin-top:2px;
}

.mcq-rank-percentile{
    font-size:13px;
    font-weight:700;
    color:#15803d;
    margin-top:10px;
}

.mcq-rank-gap{
    font-size:12.5px;
    color:#c2410c;
    margin-top:8px;
}

.mcq-rank-gap.mcq-rank-top{
    color:#15803d;
    font-weight:700;
}

@media(max-width:480px){

.mcq-account-tab{
    padding:10px 14px;
    font-size:13px;
}

.mcq-saved-quiz{
    max-width:150px;
}

}

/* ---------------------------------------------------------
   Streak pill + detail list + OTP boxes + forgot-password
   link + saved-question language toggle + rank history
--------------------------------------------------------- */

.mcq-account-streak-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:20px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#c2410c;
    font-weight:700;
    font-size:13px;
    margin-bottom:8px;
}

.mcq-detail-list{
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:14px;
}

.mcq-detail-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-bottom:1px solid #eef2f6;
    font-size:13.5px;
}

.mcq-detail-row:last-child{
    border-bottom:none;
}

.mcq-detail-label{
    color:#64748b;
    font-weight:600;
    flex:0 0 auto;
}

.mcq-detail-value{
    color:#1e293b;
    font-weight:600;
    text-align:right;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.mcq-verify-chip{
    font-size:10.5px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
    border:none;
    cursor:default;
}

.mcq-verify-yes{
    background:#f0fdf4;
    color:#15803d;
}

.mcq-verify-no{
    background:#fef2f2;
    color:#dc2626;
    cursor:pointer;
    border:1px solid #fecaca;
}

.mcq-otp-box{
    margin-top:10px;
    padding:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
}

.mcq-otp-note{
    font-size:13px;
    color:#475569;
    margin:0 0 10px;
}

.mcq-pending-approval-spinner{
    width:32px;
    height:32px;
    margin:6px auto 16px;
    border:3px solid #e2e8f0;
    border-top-color:#2563eb;
    border-radius:50%;
    animation:mcqSpin 0.8s linear infinite;
}

@keyframes mcqSpin{
    to{ transform:rotate(360deg); }
}

.fs-resume-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.75);
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.fs-resume-box{
    background:#fff;
    border-radius:18px;
    padding:32px 24px;
    max-width:400px;
    width:100%;
    text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.fs-resume-icon{
    font-size:44px;
    margin-bottom:10px;
}

.fs-resume-box h2{
    margin:0 0 10px;
    font-size:21px;
    color:#1e293b;
}

.fs-resume-box p{
    font-size:14px;
    color:#475569;
    line-height:1.5;
    margin:0 0 18px;
}

.fs-resume-box button{
    width:100%;
    border:none;
    border-radius:12px;
    padding:13px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    margin-bottom:10px;
}

#mcqApproveLoginBtn,
#mcqSessionRevokedOkBtn{
    background:#2563eb;
    color:#fff;
}

#mcqDenyLoginBtn{
    background:#f1f5f9;
    color:#334155;
    margin-bottom:0;
}

.mcq-otp-input{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font-size:20px;
    letter-spacing:8px;
    text-align:center;
    font-weight:700;
    color:#1e293b;
}

.mcq-otp-box .mcq-auth-submit{
    margin-top:4px;
}

.mcq-forgot-link{
    text-align:center;
    font-size:13px;
    color:#2563eb;
    font-weight:600;
    cursor:pointer;
    margin-top:14px;
    user-select:none;
}

.mcq-forgot-link:hover{
    text-decoration:underline;
}

.mcq-saved-header{
    align-items:flex-start;
}

.mcq-saved-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.mcq-saved-lang-toggle{
    border:1px solid #93c5fd;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
    font-weight:800;
    padding:6px 9px;
    border-radius:8px;
    cursor:pointer;
}

.mcq-saved-correct-badge{
    margin-left:auto;
    font-size:10.5px;
    font-weight:800;
    color:#15803d;
    white-space:nowrap;
}

.mcq-saved-option{
    align-items:center;
}

.mcq-category-group-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mcq-category-group{
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
}

.mcq-category-group-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 14px;
    background:#f8fafc;
    cursor:pointer;
    user-select:none;
    font-weight:700;
    font-size:13.5px;
    color:#1e293b;
}

.mcq-category-group-count{
    font-size:12px;
    font-weight:600;
    color:#64748b;
}

.mcq-category-group-body{
    display:none;
    padding:12px;
}

.mcq-category-group-body.open{
    display:block;
}

.mcq-rank-history-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mcq-rank-history-card{
    display:block;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:14px;
}

.mcq-rank-history-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    margin-bottom:10px;
}

.mcq-rank-history-title{
    font-weight:700;
    font-size:13.5px;
    color:#1e293b;
}

.mcq-rank-history-date{
    font-size:11px;
    color:#94a3b8;
    white-space:nowrap;
}

.mcq-rank-history-bottom{
    display:flex;
    justify-content:space-between;
    text-align:center;
    background:#f8fafc;
    border-radius:10px;
    padding:10px 4px;
}

.mcq-rank-history-stat{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.mcq-rank-history-value{
    font-weight:800;
    font-size:14px;
    color:#2563eb;
}

.mcq-rank-history-label{
    font-size:10px;
    color:#64748b;
}

/* =======================================================
   DARK MODE - My Account page ([mcq_login]) + login/register
   overlay. This file had ZERO dark-mode coverage before this
   round (the whole My Account page - profile, tabs, Test
   History, Change Password etc - never responded to the
   sitewide dark/light toggle at all). Same methodology as
   quiz.css: catalogued every explicit background/color rule,
   left vivid semantic-tint badges alone (light pastel bg +
   colored text reads fine on a dark page too, same reasoning
   as quiz.css's .blue-card), and only override near-black/
   muted-grey text + plain white/light-grey containers that
   would otherwise be low-contrast or invisible.
======================================================= */

[data-theme="dark"] body{
background:#0f172a !important;
}

[data-theme="dark"] .mcq-auth-box,
[data-theme="dark"] .mcq-auth-page-box,
[data-theme="dark"] .mcq-profile-gate-box,
[data-theme="dark"] .mcq-account-panel,
[data-theme="dark"] .mcq-dashboard-logout,
[data-theme="dark"] .mcq-account-edit-btn,
[data-theme="dark"] .mcq-auth-edit-toggle,
[data-theme="dark"] .mcq-saved-remove,
[data-theme="dark"] .fs-resume-box{
background:#1e293b;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] #mcqAuthLogoutBtn{
background:#dc2626;
border-color:#dc2626;
color:#fff;
}

[data-theme="dark"] .mcq-history-row-clickable:hover,
[data-theme="dark"] .mcq-history-row-clickable:active{
background:#0f172a;
}

[data-theme="dark"] .mcq-stat-card,
[data-theme="dark"] .mcq-saved-header,
[data-theme="dark"] .mcq-saved-explanation,
[data-theme="dark"] .mcq-report-comment,
[data-theme="dark"] .mcq-otp-box,
[data-theme="dark"] .mcq-category-group-header,
[data-theme="dark"] .mcq-rank-history-bottom,
[data-theme="dark"] .mcq-rank-result,
[data-theme="dark"] .mcq-order-status,
[data-theme="dark"] #mcqDenyLoginBtn,
[data-theme="dark"] .mcq-auth-close,
[data-theme="dark"] .mcq-auth-tab:not(.active),
[data-theme="dark"] .mcq-account-tab:not(.active){
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .mcq-account-avatar{
background:#334155;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .mcq-history-title,
[data-theme="dark"] .mcq-account-identity h2,
[data-theme="dark"] .mcq-order-item,
[data-theme="dark"] .mcq-saved-quiz,
[data-theme="dark"] .mcq-report-quiz,
[data-theme="dark"] .mcq-detail-value,
[data-theme="dark"] .fs-resume-box h2,
[data-theme="dark"] .mcq-otp-input,
[data-theme="dark"] .mcq-category-group-header,
[data-theme="dark"] .mcq-rank-history-title{
color:#f1f5f9;
}

[data-theme="dark"] .mcq-auth-close,
[data-theme="dark"] .mcq-auth-field label,
[data-theme="dark"] .mcq-auth-user-panel p,
[data-theme="dark"] .mcq-auth-subtitle,
[data-theme="dark"] .mcq-dashboard-loading,
[data-theme="dark"] .mcq-dashboard-header p{
color:#cbd5e1;
}

[data-theme="dark"] .mcq-badge-chip{
background:#0f172a;
border-color:#334155;
color:#60a5fa;
}

[data-theme="dark"] .mcq-badge-next{
color:#94a3b8;
background:#0f172a;
padding:4px 10px;
border-radius:10px;
}
[data-theme="dark"] .mcq-stat-label,
[data-theme="dark"] .mcq-history-score,
[data-theme="dark"] .mcq-account-breadcrumb,
[data-theme="dark"] .mcq-account-edit-btn,
[data-theme="dark"] .mcq-order-amount,
[data-theme="dark"] .mcq-order-status,
[data-theme="dark"] .mcq-trend-value,
[data-theme="dark"] .mcq-saved-content,
[data-theme="dark"] .mcq-saved-option-letter,
[data-theme="dark"] .mcq-report-comment,
[data-theme="dark"] .mcq-rank-note,
[data-theme="dark"] .mcq-rank-sub,
[data-theme="dark"] .mcq-detail-label,
[data-theme="dark"] .mcq-otp-note,
[data-theme="dark"] .fs-resume-box p,
[data-theme="dark"] #mcqDenyLoginBtn,
[data-theme="dark"] .mcq-category-group-count,
[data-theme="dark"] .mcq-rank-history-label{
color:#cbd5e1;
}

/* Saved Questions: match the Review tab's own correct-option
   look exactly (colour-matched green box + border, not just text
   colour) so both surfaces are visually consistent. */
[data-theme="dark"] .mcq-saved-option{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .mcq-saved-option-correct{
background:#052e16;
border-color:#166534;
color:#4ade80;
}

[data-theme="dark"] .mcq-saved-option-letter{
background:#1e293b;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .mcq-saved-correct-badge{
color:#4ade80;
}

html[data-theme="dark"]{
color-scheme:dark;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
background:#0f172a !important;
border-color:#334155 !important;
color:#e2e8f0 !important;
color-scheme:dark;
}

[data-theme="dark"] select{
-webkit-appearance:none;
appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:16px;
padding-right:30px;
}