/* frontend/css/quiz.css - Version 1.1.0 Optimized */

.main-header{position:fixed;top:0;left:0;right:0;height:var(--topbar-height,64px);background:#8fa0c9;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(0,0,0,.3);z-index:1000;padding:0}
.main-header .header-content{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:var(--topbar-height,64px);flex-shrink:0}
.main-header .menu-btn{width:40px;height:40px;border:none;background:rgba(255,255,255,.1);border-radius:50%;font-size:22px;cursor:pointer;color:#fff;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.main-header .header-center{flex:1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 12px;min-width:0}
.main-header .avatar-btn{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid rgba(255,255,255,.2);overflow:hidden;transition:all .3s ease;flex-shrink:0}
.main-header .progress-bar-container{width:100%;height:4px;background:rgba(255,255,255,.1);overflow:hidden;flex-shrink:0}
.main-header .progress-bar-container .progress{height:100%;background:linear-gradient(90deg,#60a5fa,#a78bfa);transition:width .6s ease;width:0}
#qtop{position:fixed;top:0;left:0;right:0;height:var(--topbar-height);background:lightslategrey;display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 2px 4px var(--shadow);z-index:1000}
.leftGroup,.rightGroup{display:flex;align-items:center;gap:10px}
.topbar{width:stretch;margin-right:10px}
#scoreBound{width:100%}
.scoreTimer{display:flex;justify-content:space-between;margin-bottom:6px}
.menu-btn{width:40px;height:40px;border:none;background:transparent;font-size:24px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);transition:background var(--transition)}
.hamburger-icon{display:inline-block;width:100%;height:100%;line-height:40px;text-align:center;font-size:24px;pointer-events:none;transition:transform .3s ease}
.menu-btn:hover{background:var(--bg)}
.hamburger-icon.menu-open{transform:rotate(90deg)}
.avatar-btn{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#64b5f6);display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid var(--card);overflow:hidden}
.avatar-btn img{width:100%;height:100%;object-fit:cover}
.avatar-initials{color:#fff;font-weight:700;font-size:1.1rem}
.quiz-filter-page{position:fixed;top:var(--topbar-height);left:0;right:0;bottom:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;z-index:900}
.filter-content{background:var(--card);border-radius:var(--border-radius);padding:40px;max-width:500px;width:100%;text-align:center;box-shadow:0 4px 8px var(--shadow);justify-self:anchor-center}
.filter-content h1{color:var(--accent);margin-bottom:15px;font-size:1.8rem}
.filter-content p{color:var(--text-light);margin-bottom:30px}
.filter-section{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}
.filter-select{padding:12px;border:1px solid var(--border);border-radius:var(--border-radius);font-size:1.2rem;background:var(--card);color:var(--text);cursor:pointer;transition:border-color var(--transition)}
.filter-select:focus{outline:none;border-color:var(--accent)}
.filter-select:disabled{background:var(--bg);cursor:not-allowed;opacity:.7}
.app-wrapper{max-width:900px;margin:20px auto;padding:0 20px}
.stimulant-box{margin:20px}
.quiz-container{background:var(--card);border-radius:var(--border-radius);padding:20px;box-shadow:0 2px 4px var(--shadow);min-height:400px}
.question-card{margin-bottom:20px;padding:15px;border:1px solid var(--border);border-radius:var(--border-radius);background:var(--card)}
.question-text{font-size:1.1rem;margin-bottom:15px;line-height:1.6}
.question-text b{color:var(--accent);margin-right:8px}
.options-container{margin:15px 0}
.options{list-style:none;display:grid;gap:10px}
.option{background:var(--bg);padding:12px 16px;border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition);border:1px solid transparent}
.option:hover:not(.disabled){transform:translateX(5px);background:var(--card);border-color:var(--accent);box-shadow:0 2px 4px var(--shadow)}
.option.correct{background:var(--success);color:#fff;border-color:var(--success-dark)}
.option.wrong{background:var(--danger);color:#fff;border-color:var(--danger-dark)}
.option.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}
.option:not(.disabled):hover{transform:translateX(5px);background:var(--accent);color:#fff}
.controls{display:flex;justify-content:space-between;margin-top:20px;padding:15px}
.left-controls,.right-controls{display:flex;gap:10px}
.result-panel,.review-panel{background:var(--card);border-radius:var(--border-radius);padding:24px;box-shadow:0 2px 4px var(--shadow);margin-top:20px;display:none}
.result-panel.visible,.review-panel.visible{display:block}
.review-panel {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}
.result-panel h2,.review-panel h2{color:var(--accent);margin-bottom:20px;text-align:center}
.result-stats{margin-bottom:30px}
.stat-row{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--border)}
.stat-row.highlight{background:var(--bg);font-weight:700;border-radius:var(--border-radius)}
.stat-label{color:var(--text-light)}
.stat-value{font-weight:600}
.stat-value.correct{color:var(--success)}
.stat-value.wrong{color:var(--danger)}
.leaderboard-section{margin:20px 0;padding:15px;background:var(--bg);border-radius:var(--border-radius)}
.leaderboard-list{list-style:none;padding-left:20px}
.leaderboard-list li{padding:8px;margin:5px 0;background:var(--card);border-radius:var(--border-radius)}
.review-content{max-height:500px;overflow-y:auto;margin:20px 0;user-select: none;}
.review-item{background:var(--bg);padding:15px;border-radius:var(--border-radius);margin-bottom:15px}
.review-item p{margin:5px 0}
.thanks-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(4px);animation:fadeIn .3s ease}
.thanks-panel.visible{display:flex}
.thanks-container{max-width:420px;width:100%;background:var(--card);border-radius:20px;padding:40px 30px;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;animation:slideUp .4s ease;margin:auto;position:relative}
.thanks-icon{font-size:4rem;margin-bottom:12px;display:block}
.thanks-title{font-size:1.6rem;font-weight:700;color:var(--text);margin-bottom:6px}
.thanks-message{font-size:.95rem;color:var(--text-light);margin-bottom:28px;line-height:1.6}
.thanks-actions{display:flex;flex-direction:column;gap:20px}
.thanks-actions .btn{padding:12px 20px;font-weight:600;font-size:.95rem;width:100%;border-radius:10px;border:none;cursor:pointer;transition:all .3s ease}
.thanks-actions .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff}
.thanks-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.3)}
.thanks-actions .btn-success{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.thanks-actions .btn-success:hover{background:var(--border);transform:translateY(-2px)}
.thanks-actions .btn-secondary{background:var(--danger);color:#fff}
.thanks-actions .btn-secondary:hover{background:var(--danger-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(244,67,54,.3)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:480px){.thanks-container{padding:30px 20px;max-width:95%}.thanks-title{font-size:1.3rem}.thanks-icon{font-size:3rem}.thanks-actions .btn{font-size:.9rem;padding:10px 16px}}
body.dark .thanks-panel{background:rgba(0,0,0,.8)}
body.dark .thanks-container{background:#1e293b;box-shadow:0 20px 60px rgba(0,0,0,.5)}
body.dark .thanks-actions .btn-success{background:#2d3b4f;border-color:#3d4b5f;color:#e2e8f0}
body.dark .thanks-actions .btn-success:hover{background:#3d4b5f}
body.dark .thanks-title{color:#e2e8f0}
body.dark .thanks-message{color:#94a3b8}
.result-actions{display:flex;flex-direction:column;gap:20px}
.result-buttons,.review-actions{display:flex;justify-content:center;gap:15px;margin-top:20px}
.save-score-section{display:flex;gap:10px;align-items:center}
.floating-buttons{position:fixed;bottom:20px;right:20px;display:flex;gap:10px;z-index:950}
.floating-btn{width:45px;height:45px;border-radius:50%;border:none;background:var(--card);color:var(--text);font-size:1.2rem;cursor:pointer;box-shadow:0 2px 8px var(--shadow);transition:all var(--transition)}
.floating-btn:hover{transform:translateY(-3px);box-shadow:0 4px 12px var(--shadow)}
.side-menu{position:fixed;top:60px;left:-360px;width:350px;max-width:85vw;height:calc(100vh - 60px);background:var(--card,#fff);z-index:99999;transition:left .3s ease;overflow-y:auto;box-shadow:2px 0 12px rgba(0,0,0,.15)}
.side-menu.open{left:0}
.side-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9998;display:none}
#menuDarkToggleItem{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--border-radius,12px);cursor:pointer;transition:background .2s ease;margin-bottom:4px;border-bottom:1px solid var(--border,#e2e8f0)}
#menuDarkToggleItem:hover{background:var(--bg,#f0f4f8)}
#menuDarkToggleItem .menu-icon{font-size:1.2rem}
#menuDarkToggleItem span:not(.menu-icon){flex:1;color:var(--text);font-size:.95rem}
body.dark #menuDarkToggleItem:hover{background:#2d3b4f}
body.dark #menuDarkToggleItem span:not(.menu-icon){color:#e2e8f0}
#menuDarkToggleItem .toggle-switch{flex-shrink:0}
#menuHome{border-bottom:1px solid var(--border);margin-bottom:8px}
#menuHome .menu-icon{font-size:1.2rem}
.side-menu-overlay.active{display:block}
.menu-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid var(--border)}
.menu-header h3{color:var(--accent)}
.close-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text);padding:5px;transition:all .2s ease}
.close-btn:hover{transform:scale(1.1);color:var(--danger)}
.menu-content{padding:15px}
.menu-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--border-radius);cursor:pointer;transition:background var(--transition);margin-bottom:5px}
.menu-item:hover{background:var(--bg)}
.menu-icon{font-size:1.2rem}
.profile-box{position:absolute;top:var(--topbar-height);right:10px;width:300px;background:var(--card);border-radius:var(--border-radius);box-shadow:0 4px 12px var(--shadow);z-index:950;display:none}
.profile-box.visible{display:block}
.profile-header{padding:15px;border-bottom:1px solid var(--border)}
.user-info{text-align:center}
.user-name{font-weight:700;font-size:1.1rem;color:var(--accent)}
.user-org{font-size:.9rem;color:var(--text-light);margin-top:3px}
.profile-content{padding:15px}
.avatar-section{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.avatar-large{width:80px;height:80px;border-radius:50%;overflow:hidden;margin-bottom:10px;background:var(--bg);display:flex;align-items:center;justify-content:center}
.avatar-large img{width:100%;height:100%;object-fit:cover}
.avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--accent),#64b5f6)}
.avatar-actions{display:flex;gap:10px}
.settings-block{padding:18px 16px 14px;background:var(--bg,#f8fafc);border-radius:var(--border-radius,12px);margin:8px 0 12px;border:1px solid var(--border,#e2e8f0)}
.setting-group{margin-bottom:14px}
.setting-group:last-child{margin-bottom:0}
.setting-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.setting-icon{font-size:1rem}
.setting-label{font-size:.85rem;font-weight:600;color:var(--text,#1a2332)}
.time-display{text-align:center;margin-bottom:16px}
.time-number{font-size:2.2rem;font-weight:800;color:var(--accent,#2563eb);font-family:'Courier New',monospace}
.time-unit{font-size:.85rem;font-weight:500;color:var(--text-light,#5a6c7d);margin-left:4px}
.slider-container{width:100%;padding:6px 0 10px;position:relative}
.slider-container input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:var(--border,#e2e8f0);border-radius:4px;outline:none;cursor:pointer;margin:10px 0;position:relative}
.slider-container input[type="range"]::before{content:'';position:absolute;top:0;left:0;height:5px;background:linear-gradient(90deg,var(--accent,#2563eb),var(--accent-light,#60a5fa));border-radius:4px;pointer-events:none;width:var(--progress,0%);z-index:1;transition:width .15s ease-out}
.slider-container input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;border:2.5px solid var(--accent,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,.25);transition:all .15s ease;position:relative;z-index:2;margin-top:-8.5px}
.slider-container input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.12);box-shadow:0 4px 16px rgba(37,99,235,.35)}
.slider-container input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;border:2.5px solid var(--accent,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.slider-container input[type="range"]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 16px rgba(37,99,235,.35)}
.slider-container input[type="range"]::-moz-range-track{height:5px;background:var(--border,#e2e8f0);border-radius:4px;border:none}
.slider-container input[type="range"]::-moz-range-progress{height:5px;background:linear-gradient(90deg,var(--accent,#2563eb),var(--accent-light,#60a5fa));border-radius:4px}
.preset-buttons{display:flex;gap:10px;justify-content:center;margin-top:6px}
.preset-btn{padding:5px 18px;border:1.5px solid var(--border,#e2e8f0);border-radius:20px;background:var(--card,#fff);color:var(--text-light,#5a6c7d);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .25s ease}
.preset-btn:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);background:rgba(37,99,235,.05)}
.preset-btn.active{border-color:var(--accent,#2563eb);background:var(--accent,#2563eb);color:#fff}
.setting-divider{border:none;border-top:1px solid var(--border,#e2e8f0);margin:16px 0 18px}
.toggle-group{margin-bottom:0}
.toggle-row{display:flex;justify-content:space-between;align-items:center}
.toggle-left{display:flex;align-items:center;gap:12px}
.toggle-icon{font-size:1.2rem}
.toggle-title{font-size:.9rem;font-weight:500;color:var(--text,#1a2332)}
.toggle-desc{font-size:.72rem;color:var(--text-light,#5a6c7d);font-weight:400;margin-top:-2px}
body.dark .settings-block{background:#1e293b;border-color:#334155}
body.dark .setting-label{color:#e2e8f0}
body.dark .time-number{color:#60a5fa}
body.dark .time-unit{color:#94a3b8}
body.dark .slider-container input[type="range"]{background:#334155}
body.dark .slider-container input[type="range"]::-webkit-slider-thumb{background:#1e293b;border-color:#3b82f6;box-shadow:0 2px 12px rgba(96,165,250,.25)}
body.dark .slider-container input[type="range"]::-webkit-slider-thumb:hover{box-shadow:0 4px 20px rgba(96,165,250,.35)}
body.dark .slider-container input[type="range"]::-moz-range-thumb{background:#1e293b;border-color:#3b82f6;box-shadow:0 2px 12px rgba(96,165,250,.25)}
body.dark .slider-container input[type="range"]::-moz-range-track{background:#334155}
body.dark .slider-container input[type="range"]::-moz-range-progress{background:linear-gradient(90deg,#3b82f6,#8b5cf6)}
body.dark .preset-btn{background:#2d3b4f;border-color:#3d4b5f;color:#94a3b8}
body.dark .preset-btn:hover{border-color:#60a5fa;color:#60a5fa;background:rgba(96,165,250,.1)}
body.dark .preset-btn.active{border-color:#3b82f6;background:#3b82f6;color:#fff}
body.dark .setting-divider{border-color:#334155}
body.dark .toggle-title{color:#e2e8f0}
body.dark .toggle-desc{color:#94a3b8}
input[type="range"]{flex:1}
.explanation-btn{background:var(--warning);color:#fff;border:none;padding:6px 12px;border-radius:var(--border-radius);font-size:.85rem;cursor:pointer;transition:all var(--transition);margin-top:10px}
.explanation-btn:hover{background:#f57c00;transform:translateY(-2px)}
#timerBlock{font-weight:700}
#timerBlock.warning{color:orange}
#timerBlock.danger{color:red;animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.5}}
.rearrange-container{margin:20px 0}
.rearrange-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rearrange-item{background:var(--bg);padding:12px 16px;border-radius:var(--border-radius);border:1px solid var(--border);cursor:move;user-select:none;transition:all .2s ease;display:flex;align-items:center;position:relative}
.rearrange-item:hover{background:var(--card);border-color:var(--accent);transform:translateX(5px);box-shadow:0 2px 8px var(--shadow)}
.rearrange-item.dragging{opacity:.5;background:var(--accent);color:#fff;transform:scale(1.02);box-shadow:0 4px 12px var(--shadow)}
.rearrange-item.correct{background:var(--success);color:#fff;border-color:var(--success-dark)}
.rearrange-item.wrong{background:var(--danger);color:#fff;border-color:var(--danger-dark)}
.rearrange-item.disabled{opacity:.7;cursor:not-allowed;pointer-events:none}
.rearrange-item::before{content:'⋮⋮';margin-right:12px;color:var(--text-light);font-size:1.2rem;opacity:.5}
.rearrange-item:hover::before{opacity:1}
.rearrange-item.correct::before,.rearrange-item.wrong::before{color:rgba(255,255,255,.7)}
.rearrange-button-container{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:15px}
body.dark .rearrange-item{background:#2d2d2d;border-color:#404040}
body.dark .rearrange-item:hover{background:#3d3d3d}
body.dark .rearrange-item.dragging{background:var(--accent);color:#fff}
body.dark .rearrange-item::before{color:#888}
.blank-type-a-card{padding:20px}
.blank-header-wrapper{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.blank-serial-number{font-size:1.1rem;font-weight:700;color:var(--accent);background:rgba(33,150,243,.1);padding:6px 12px;border-radius:8px;min-width:45px;text-align:center;flex-shrink:0}
.blank-serial-number b{color:var(--accent)}
.instruction-text{flex:1;font-style:italic;color:var(--text-light);padding:8px 12px;background:var(--bg);border-left:4px solid var(--accent);border-radius:var(--border-radius);font-size:.95rem;line-height:1.5;margin:0}
.blank-area{line-height:1.5;font-size:1.05rem;margin:20px 0;padding:15px;background:var(--card);border-radius:var(--border-radius);border:1px solid var(--border)}
.blank-wrapper{display:inline-flex;align-items:center;gap:2px;margin:0 2px;vertical-align:middle}
.blank-box{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:50px;min-height:25px;max-height: 25px;background:rgba(0,0,0,.04);border:1px solid var(--accent);border-radius:10px;padding:0 2px 4px 2px;transition:all .2s ease;cursor:copy}
.blank-number{font-size:.7rem;color:var(--accent);margin-left:0;vertical-align:sub}
.blank-options-panel{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0;padding:15px;background:var(--bg);border-radius:var(--border-radius);border:1px dashed var(--border)}
.blank-option{display:inline-flex;align-items:center;justify-content:center;min-width:60px;gap:4px;background:var(--card);padding:0 5px;border-radius:24px;border:1px solid var(--border);cursor:grab;user-select:none;font-size:.95rem;box-shadow:0 1px 2px var(--shadow)}
.blank-option:hover{transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow);border-color:var(--accent)}
.blank-option.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.blank-option.selected{cursor:grabbing;background:var(--accent);color:#fff;border-color:var(--accent)}
.blank-box.filled{min-width:40px;padding:0 3px 1px;box-shadow:none;height:25px;cursor:pointer;background:rgba(0,0,0,.04);color:var(--accent)}
.blank-option.correct{background:var(--success);color:#fff;border-color:var(--success-dark)}
.blank-option.wrong{background:var(--danger);color:#fff;border-color:var(--danger-dark)}
.blank-option.correct-highlight{background:var(--success);color:#fff;opacity:.7;border-color:var(--success-dark)}
.blank-box.drag-over{background:rgba(33,150,243,.2);border-color:var(--accent);transform:scale(1.02)}
.blank-box.correct{border-color:var(--success);color:var(--success-dark);background:rgba(76,175,80,.1)}
.blank-box.wrong{border-color:var(--danger);color:var(--danger-dark);background:rgba(244,67,54,.1)}
.sp-input-wrap:hover::after,.sp-input-wrap:focus-within::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);background-color:#ffcc80;border:2px solid #ff9c09;color:#0227fa;padding:1px 3px;border-radius:4px;font-size:.85rem;white-space:nowrap;z-index:10;pointer-events:none}
.blank-tooltip-popup{position:absolute;background-color:#2c3e50;color:#fff;padding:10px 12px;border-radius:8px;font-size:.9rem;z-index:99999;max-width:250px;width:max-content;box-shadow:0 6px 16px rgba(0,0,0,.3);text-align:center;pointer-events:none;opacity:1!important;border:1px solid rgba(255,255,255,.1)}
.blank-tooltip-popup::after{content:"";position:absolute;top:100%;left:0;border-width:6px;border-style:solid;border-color:#2c3e50 transparent transparent;transform:translateX(calc(var(--arrow-shift,0) - 6px))}
.blank-tooltip-popup strong{display:block;color:#4fc3f7;margin-bottom:4px;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px}
.blank-tooltip-popup span{display:block;font-size:.85rem;line-height:1.4;color:#ececec}
@keyframes tooltipFadeIn{from{opacity:0;transform:translate(-50%,5px)}to{opacity:1;transform:translate(-50%,-8px)}}
body.dark .blank-tooltip-popup{background-color:#e6e6e6;color:#121212;border-color:#ccc}
body.dark .blank-tooltip-popup::after{border-color:#e6e6e6 transparent transparent;transform:translateX(calc(var(--arrow-shift,0) - 6px))}
body.dark .blank-tooltip-popup strong{color:#d32f2f;border-bottom:1px solid rgba(0,0,0,.1)}
body.dark .blank-tooltip-popup span{color:#333}
.blank-tooltip-popup.flip-bottom::after{top:-12px;border-color:transparent transparent #2c3e50;transform:translateX(calc(var(--arrow-shift,0) - 6px))}
body.dark .blank-tooltip-popup.flip-bottom::after{border-color:transparent transparent #e6e6e6;transform:translateX(calc(var(--arrow-shift,0) - 6px))}
.option-count{font-size:.7rem;background:var(--accent);color:#fff;border-radius:10px;padding:0 4px;margin-left:4px}
.explanation-table{width:100%;border-collapse:collapse;margin-top:15px}
.explanation-table th,.explanation-table td{border:1px solid var(--border);padding:8px;text-align:left;vertical-align:top}
.explanation-table th{background:var(--bg);font-weight:700}
.blank-button-container{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.rearrange-button-container{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.mcq-button-container{display:flex;justify-content:end;gap:10px;margin-top:20px}
body.dark .question-serial-number{background:rgba(100,181,246,.15);color:var(--accent)}
body.dark .blank-box{background:rgba(255,255,255,.05)}
body.dark .blank-option{background:#2d2d2d}
body.dark .blank-options-panel{background:#1a1a1a}
body.dark .blank-option.correct{background:#2e7d32}
body.dark .blank-option.wrong{background:#c62828}
body.dark .blank-serial-number{background:rgba(100,181,246,.15);color:var(--accent)}
body.dark .instruction-text{background:#1a1a1a;color:#aaa}
.blank-type-b-card{padding:20px}
.blankb-area{line-height:2.5;font-size:1rem}
.blankb-input{border:2px solid var(--accent);background:rgba(33,150,243,.05);border-radius:6px;font-size:.85rem;min-width:40px;height:23px;text-align:center;transition:all .2s ease;outline:none;color:var(--text)}
.blankb-input:focus{border-color:var(--accent-dark);box-shadow:0 0 0 2px rgba(33,150,243,.2);transform:scale(1.02)}
.blankb-input.correct{border-color:var(--success);background:rgba(76,175,80,.1);color:var(--success-dark)}
.blankb-input.wrong{border-color:var(--danger);background:rgba(244,67,54,.1);color:var(--danger-dark)}
.blankb-input:read-only{cursor:pointer;background:var(--bg);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.blankb-input::placeholder{color:var(--text-light);font-style:italic;font-size:.85rem}
.temp-width-calc{position:absolute;visibility:hidden;white-space:pre;font-family:inherit}
body.dark .blankb-input{background:rgba(100,181,246,.1);border-color:var(--accent);color:var(--text)}
body.dark .blankb-input.correct{background:rgba(76,175,80,.15)}
body.dark .blankb-input.wrong{background:rgba(244,67,54,.15)}
.suffix-prefix-area{line-height:2.8;font-size:1rem}
.suffix-prefix-wrapper{display:inline-flex;align-items:center;margin:0 2px;vertical-align:middle;white-space:nowrap}
.suffix-prefix-input{border:2px solid var(--accent);background:rgba(33,150,243,.05);border-radius:8px;padding:2px;font-size:.95rem;min-width:50px;width:auto;text-align:center;transition:all .2s ease;outline:none;color:var(--text);font-weight:500}
.root-word-hint{font-size:.9rem;color:var(--accent);margin-left:0;font-style:italic}
.suffix-prefix-wrapper .blank-number{font-size:.7rem;color:var(--accent);margin-left:0}
body.dark .root-word-hint,body.dark .suffix-prefix-wrapper .blank-number{color:var(--warning)}
.suffix-prefix-input:focus{border-color:var(--accent-dark);box-shadow:0 0 0 3px rgba(33,150,243,.2);transform:scale(1.02)}
.suffix-prefix-input.correct{border-color:var(--success);background:rgba(76,175,80,.1);color:var(--success-dark)}
.suffix-prefix-input.wrong{border-color:var(--danger);background:rgba(244,67,54,.1);color:var(--danger-dark)}
.suffix-prefix-input:read-only{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.suffix-prefix-input::placeholder{color:var(--text-light);font-style:italic;font-size:.85rem;font-weight:400}
.suffix-prefix-table td:first-child,.suffix-prefix-table th:first-child{width:40px;text-align:center}
.suffix-prefix-table td:nth-child(2),.suffix-prefix-table th:nth-child(2){width:100px;text-align:center}
.suffix-prefix-table .correct-answer{color:var(--success-dark);background:rgba(76,175,80,.1);padding:2px 8px;border-radius:4px;display:inline-block}
.suffix-prefix-input.wrong[data-correct-answer]{position:relative}
.suffix-prefix-input.wrong[data-correct-answer]:hover::after{content:"সঠিক উত্তর: " attr(data-correct-answer);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--card);color:var(--success-dark);padding:4px 8px;border-radius:6px;font-size:.8rem;white-space:nowrap;box-shadow:0 2px 8px var(--shadow);border:1px solid var(--success);z-index:10;pointer-events:none}
body.dark .suffix-prefix-input{background:rgba(100,181,246,.1);border-color:var(--accent);color:var(--text)}
body.dark .suffix-prefix-input.correct{background:rgba(76,175,80,.15)}
body.dark .suffix-prefix-input.wrong{background:rgba(244,67,54,.15)}
body.dark .suffix-prefix-table .correct-answer{color:#81c784}
body.dark .suffix-prefix-input.wrong[data-correct-answer]:hover::after{background:#2d2d2d;border-color:var(--success);color:#81c784}
.toast-container{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{min-width:280px;max-width:350px;background:var(--card);border-radius:var(--border-radius);padding:12px 16px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;animation:slideIn .3s ease;border-left:4px solid;position:relative;overflow:hidden}
.toast-success{border-left-color:var(--success)}
.toast-success .toast-icon{color:var(--success)}
.toast-error{border-left-color:var(--danger)}
.toast-error .toast-icon{color:var(--danger)}
.toast-warning{border-left-color:var(--warning)}
.toast-warning .toast-icon{color:var(--warning)}
.toast-info{border-left-color:var(--accent)}
.toast-info .toast-icon{color:var(--accent)}
.toast-icon{font-size:1.2rem;flex-shrink:0}
.toast-content{flex:1;font-size:.9rem;color:var(--text);line-height:1.4}
.toast-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}
.toast-close:hover{background:var(--bg);color:var(--text)}
.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:currentColor;animation:progress 3s linear forwards}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
@keyframes progress{from{width:100%}to{width:0}}
.question-header-wrapper{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.question-serial-number{font-size:1.1rem;font-weight:700;color:var(--accent);background:rgba(33,150,243,.1);padding:6px 12px;border-radius:8px;min-width:45px;text-align:center;flex-shrink:0}
.question-serial-number b{color:var(--accent)}
.question-text-content{flex:1;font-size:1.05rem;line-height:1.5;color:var(--text);padding:4px 0}
.review-card{background:var(--card);border-radius:var(--border-radius);padding:20px;margin-bottom:20px;box-shadow:0 2px 8px var(--shadow);border-left:4px solid var(--warning)}
.review-serial-number{font-size:1.1rem;font-weight:700;color:var(--accent);background:rgba(33,150,243,.1);padding:6px 12px;border-radius:8px;min-width:45px;text-align:center;flex-shrink:0}
.review-question-text{flex:1;font-size:1rem;line-height:1.5}
.review-stimulant{background:var(--bg);padding:10px;border-radius:var(--border-radius);margin:10px 0;font-style:italic}
.review-instruction{color:var(--text-light);font-size:.9rem;margin:10px 0;padding-left:10px;border-left:3px solid var(--accent)}
.review-content-wrapper{margin:15px 0;padding:15px;background:var(--bg);border-radius:var(--border-radius)}
.review-option{padding:10px 12px;border-radius:var(--border-radius);background:var(--card);border:1px solid var(--border)}
.review-option.review-correct{background:var(--success);color:#fff;border-color:var(--success-dark)}
.review-option.review-user-correct{background:var(--success);color:#fff}
.review-option.review-user-wrong{background:var(--danger);color:#fff;text-decoration:line-through}
.review-blank-wrapper{display:inline-flex;align-items:center;gap:2px;margin:0 2px}
.review-blank-correct{background:var(--success);color:#fff;padding:2px 6px;border-radius:4px;display:inline-block}
.review-blank-wrong{background:var(--danger);color:#fff;padding:2px 6px;border-radius:4px;display:inline-block;text-decoration:line-through}
.review-correct-answers{margin-top:15px;padding:10px;background:rgba(76,175,80,.1);border-radius:var(--border-radius);font-size:.9rem}
.review-user-answer,.review-correct-answer{margin-top:10px;font-size:.9rem}
.review-order-list{padding-left:20px;margin:10px 0}
.review-order-list li{padding:5px;margin:5px 0;border-radius:4px}
.review-order-list li.review-correct{background:var(--success);color:#fff}
.review-order-list li.review-wrong{background:var(--danger);color:#fff;text-decoration:line-through}
.review-status-badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:.85rem;font-weight:500;margin:10px 0}
.review-status-wrong{background:rgba(244,67,54,.1);color:var(--danger);border:1px solid var(--danger)}
.review-status-skipped{background:rgba(255,152,0,.1);color:var(--warning);border:1px solid var(--warning)}
.review-status-timed_out{background:rgba(158,158,158,.1);color:var(--muted);border:1px solid var(--muted)}
.review-explain-btn{background:var(--warning);color:#fff;border:none;padding:6px 12px;border-radius:var(--border-radius);font-size:.85rem;cursor:pointer;transition:all var(--transition);margin-top:10px}
.review-explain-btn:hover{background:#f57c00;transform:translateY(-2px)}
.no-review{text-align:center;padding:40px;color:var(--success);font-size:1.1rem}
body.dark .review-card{background:#2d2d2d}
body.dark .review-option{background:#3d3d3d}
body.dark .review-content-wrapper{background:#1a1a1a}
body.dark .review-correct-answers{background:rgba(76,175,80,.2)}
.btn:disabled,.btn.disabled{opacity:.6;cursor:not-allowed;pointer-events:none;filter:grayscale(.2)}
body.dark .btn:disabled,body.dark .btn.disabled{opacity:.5}
.explanation-notice{background:rgba(33,150,243,.1);border-left:4px solid var(--accent);padding:10px 15px;margin-bottom:20px;border-radius:8px;display:flex;align-items:center;gap:10px}
.notice-icon{font-size:1.2rem}
.notice-text{font-size:.9rem;color:var(--text-light)}
.explanation-skip-warning{background:rgba(255,152,0,.15);border:1px solid var(--warning);padding:10px;margin-top:15px;border-radius:6px;font-size:.85rem;color:var(--warning);text-align:center}
body.dark .explanation-notice{background:rgba(100,181,246,.15)}
body.dark .explanation-skip-warning{background:rgba(255,152,0,.2)}
.blank-option.dragging{opacity:1!important;transform:scale(.95);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.blank-box.over{border:2px solid var(--accent);box-shadow:0 0 0 3px rgba(33,150,243,.3);transform:scale(1.02);transition:all .08s linear;cursor:copy}
.blank-box.over::before{content:''!important;position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(33,150,243,.25);pointer-events:none;z-index:-1}
.review-summary-bar{background:var(--bg);padding:12px 15px;border-radius:var(--border-radius);margin-bottom:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:.95rem;border-left:4px solid var(--accent)}
.summary-text{margin-right:5px}
.summary-item{padding:3px 8px;border-radius:12px;font-weight:500;font-size:.9rem}
.summary-item.wrong{background:rgba(244,67,54,.15);color:var(--danger)}
.summary-item.skipped{background:rgba(255,152,0,.15);color:var(--warning)}
.summary-item.timedout{background:rgba(158,158,158,.15);color:var(--muted)}
.review-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filter-tab{padding:6px 14px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:20px;cursor:pointer;font-size:.85rem;transition:all .2s ease;user-select:none}
.filter-tab:hover{background:var(--bg);border-color:var(--accent)}
.filter-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.review-score-row{padding:6px 0;margin-bottom:8px;font-size:.95rem;color:var(--text)}
.review-score-row .score-label{color:var(--text-light)}
.review-score-row strong{color:var(--accent);font-size:1rem}
.review-status-correct{background:rgba(76,175,80,.15);color:var(--success);border:1px solid var(--success)}
.review-status-partial{background:rgba(255,152,0,.15);color:#e67e00;border:1px solid #e67e00}
@media(max-width:600px){.question-header-wrapper{align-items:flex-start;gap:8px;margin-bottom:5px}.question-serial-number{font-size:1rem;padding:4px 10px;min-width:auto}.blank-header-wrapper{gap:8px;align-items:flex-start}.blank-serial-number{font-size:1rem;padding:4px 10px;min-width:auto}.suffix-prefix-area{line-height:1.5}.suffix-prefix-wrapper{display:inline-block;margin:0 2px}.suffix-prefix-input{min-width:40px;font-size:.85rem}.suffix-prefix-table{font-size:.85rem}.suffix-prefix-table td,.suffix-prefix-table th{padding:6px}.app-wrapper{margin:0;padding:0}.quiz-container{background:var(--card);border-radius:var(--border-radius);padding:4px;box-shadow:0 2px 4px var(--shadow);min-height:400px;width:100%;margin:0;padding:2px}.floating-buttons{display:none}.rearrange-list{gap:15px}.rearrange-item{padding:0 15px;font-size:.9rem;margin:0 10px}.rearrange-item::before{content:'☰';font-size:1.5rem}.blank-header-wrapper{gap:8px;align-items:flex-start}.blank-number{font-size:.6rem;vertical-align:sub;margin-left:0;color:var(--accent)}.blank-serial-number{font-size:1.1rem;font-weight:700;color:var(--accent);background:rgba(33,150,243,.1);padding:6px 12px;border-radius:8px;min-width:45px;text-align:center;flex-shrink:0}.instruction-text{font-size:.8rem;width:100%}.question-card{padding:10px 0}.blank-area{font-size:.9rem;font-weight:400;padding:0;line-height:1.5;margin:0;padding:5px;user-select:none}.blank-box{min-width:40px;min-height:20px;padding:0 1px}.blank-box.filled{min-width:40px;padding:0 3px;height:20px}.blank-options-panel{margin:20px}.blank-option{font-size:.9rem}.blank-button-container{margin:20px 15px 0}.rearrange-button-container{margin:20px 15px 0}.mcq-button-container{margin:20px 15px 0}.question-text-content{font-size:.9rem}.options{gap:30px;margin:0 15px}.review-summary-bar{flex-direction:column;align-items:flex-start;gap:8px;font-size:.9rem;padding:10px 12px}.review-filter-bar{gap:6px;margin-bottom:15px}.filter-tab{padding:5px 12px;font-size:.8rem}.review-card{padding:12px;margin-bottom:15px}.review-serial-number{font-size:.9rem;padding:4px 8px;min-width:32px}.review-question-text{font-size:.9rem}.review-score-row{font-size:.85rem}.review-option{padding:8px 10px;font-size:.85rem}.review-explain-btn,.review-card .btn{width:100%;margin-top:8px}.review-status-badge{font-size:.75rem;padding:4px 10px}.review-content-wrapper{padding:10px}}
.main-header{background:linear-gradient(135deg,#0f172a,#1e293b 50%,#0f172a);border-bottom:2px solid rgba(96,165,250,.15)}
.main-header .menu-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#e2e8f0;transition:all .3s ease}
.main-header .menu-btn:hover{background:rgba(96,165,250,.2);border-color:rgba(96,165,250,.3);transform:scale(1.05);box-shadow:0 0 20px rgba(96,165,250,.15)}
.main-header .header-center #scoreBoard{color:#94a3b8;font-size:.85rem;font-weight:500;letter-spacing:.3px}
.main-header .header-center #scoreBoard strong{color:#60a5fa;font-weight:700;font-size:.95rem}
.main-header .header-center #timerBlock{color:#f1f5f9;font-size:.95rem;font-weight:600;letter-spacing:.5px}
.main-header .header-center #timerBlock #time{background:rgba(255,255,255,.06);padding:2px 10px;border-radius:6px;font-family:'Courier New',monospace;font-weight:700;color:#f1f5f9;min-width:50px;display:inline-block;text-align:center}
.main-header .header-center #metaInfo{color:#64748b;font-size:.8rem;font-weight:400}
.main-header .header-center #metaInfo strong{color:#a78bfa;font-weight:600}
.main-header .avatar-btn{background:linear-gradient(135deg,#60a5fa,#a78bfa);border:2px solid rgba(255,255,255,.15);box-shadow:0 0 20px rgba(96,165,250,.2);transition:all .3s ease}
.main-header .avatar-btn:hover{transform:scale(1.08);border-color:rgba(255,255,255,.4);box-shadow:0 0 30px rgba(96,165,250,.35)}
.main-header .avatar-initials{color:#fff;font-weight:700;font-size:1.1rem;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.main-header .progress-bar-container{background:rgba(255,255,255,.06)}
.main-header .progress-bar-container .progress{background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6);box-shadow:0 0 12px rgba(96,165,250,.3)}
body.dark .main-header{background:linear-gradient(135deg,#020617,#0f172a 50%,#020617);border-bottom:2px solid rgba(96,165,250,.08)}
body.dark .main-header .menu-btn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.05);color:#94a3b8}
body.dark .main-header .menu-btn:hover{background:rgba(96,165,250,.15);border-color:rgba(96,165,250,.2)}
body.dark .main-header .header-center #scoreBoard{color:#64748b}
body.dark .main-header .header-center #scoreBoard strong{color:#60a5fa}
body.dark .main-header .header-center #timerBlock{color:#e2e8f0}
body.dark .main-header .header-center #timerBlock #time{background:rgba(255,255,255,.04);color:#e2e8f0}
body.dark .main-header .header-center #metaInfo{color:#475569}
body.dark .main-header .header-center #metaInfo strong{color:#a78bfa}
body.dark .main-header .avatar-btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-color:rgba(255,255,255,.08)}
body.dark .main-header .avatar-btn:hover{border-color:rgba(255,255,255,.2);box-shadow:0 0 30px rgba(96,165,250,.2)}
body.dark .main-header .progress-bar-container{background:rgba(255,255,255,.03)}
body.dark .main-header .progress-bar-container .progress{background:linear-gradient(90deg,#3b82f6,#8b5cf6,#ec4899);box-shadow:0 0 12px rgba(96,165,250,.15)}


/* ============================================================ */
/* ✅ REVIEW PAGE — MCQ Redesign                                 */
/* ============================================================ */

/* ==================== Review Card Container ==================== */
.review-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 0;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* ==================== Review Card (MCQ) ==================== */
.review-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.review-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==================== Review Card Header ==================== */
.review-card .question-header-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.review-card .question-serial-number {
    font-weight: 700;
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
    min-width: 30px;
}

.review-card .question-text-content {
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    word-break: break-word;
    min-width: 0;
}

/* ==================== Status Badge ==================== */
.review-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    letter-spacing: 0.3px;
}

.review-status-badge.badge-wrong {
    background: rgba(244, 67, 54, 0.12);
    color: var(--danger);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.review-status-badge.badge-skipped {
    background: rgba(255, 152, 0, 0.12);
    color: var(--warning);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.review-status-badge.badge-timedout {
    background: rgba(156, 39, 176, 0.12);
    color: #9c27b0;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.review-status-badge.badge-partial {
    background: rgba(255, 193, 7, 0.15);
    color: #f57c00;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.review-status-badge.badge-correct {
    background: rgba(76, 175, 80, 0.12);
    color: var(--success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* ==================== Review Options ==================== */
.review-card .options-container {
    margin-bottom: 12px;
}

.review-card ul.options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-card ul.options .option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
    cursor: default !important;
    pointer-events: none !important;
    user-select: text;
    position: relative;
    padding-right: 44px; /* space for label */
    transition: all 0.2s ease;
}

/* ✅ Disabled cursor */
.review-card ul.options .option.disabled {
    opacity: 0.75;
}

/* ✅ Correct answer (green) */
.review-card ul.options .option.correct {
    background: rgba(76, 175, 80, 0.12);
    border-color: var(--success);
    color: var(--success);
    font-weight: 600;
    opacity: 1;
}

/* ✅ User's wrong answer (red) */
.review-card ul.options .option.wrong {
    background: rgba(244, 67, 54, 0.12);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 600;
    opacity: 1;
}

/* ✅ User's correct answer (green + extra emphasis) */
.review-card ul.options .option.correct.user-correct {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
    opacity: 1;
}

/* ✅ Data label — right side */
.review-card ul.options .option[data-label]::after {
    content: attr(data-label);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.review-card ul.options .option.correct[data-label]::after {
    background: var(--success);
    color: white;
}

.review-card ul.options .option.wrong[data-label]::after {
    background: var(--danger);
    color: white;
}

/* ==================== Explanation Button ==================== */
.review-card .mcq-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.review-card .explanation-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

.review-card .explanation-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.review-card .explanation-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

/* ==================== Fallback (unsupported types) ==================== */
.review-unsupported {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px dashed var(--warning);
    border-radius: 8px;
    color: var(--warning);
    font-size: 0.85rem;
    font-style: italic;
}

/* ==================== Dark Mode ==================== */
body.dark .review-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark .review-card ul.options .option {
    background: #252525;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark .review-card ul.options .option.correct {
    background: rgba(76, 175, 80, 0.15);
    border-color: var(--success);
    color: #81c784;
}

body.dark .review-card ul.options .option.wrong {
    background: rgba(244, 67, 54, 0.15);
    border-color: var(--danger);
    color: #e57373;
}

body.dark .review-card ul.options .option.correct.user-correct {
    background: rgba(76, 175, 80, 0.25);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

/* ==================== Responsive ==================== */
@media (max-width: 600px) {
    .review-card {
        padding: 14px 14px;
        border-radius: 12px;
    }

    .review-card .question-header-wrapper {
        gap: 6px 8px;
    }

    .review-card .question-text-content {
        font-size: 0.94rem;
    }

    .review-card ul.options .option {
        padding: 10px 12px;
        padding-right: 38px;
        font-size: 0.9rem;
    }

    .review-card ul.options .option[data-label]::after {
        font-size: 0.65rem;
        padding: 2px 6px;
        right: 8px;
    }

    .review-status-badge {
        font-size: 0.7rem;
        padding: 3px 10px;
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .review-card .explanation-btn {
        padding: 7px 16px;
        font-size: 0.82rem;
    }
}

/* ============================================================ */
/* ✅ REVIEW MODE — Blank-Type-A Redesign                       */
/* ============================================================ */

/* ==================== Review Card Base ==================== */
.review-card.blank-type-a-review-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.review-card.blank-type-a-review-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==================== Comparison Box ==================== */
.blank-comparison-box {
    position: relative;
    margin-top: 16px;
    padding: 40px 16px 16px 16px;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.04), rgba(124, 58, 237, 0.04));
    border: 1.5px solid rgba(79, 172, 254, 0.2);
    border-radius: 12px;
}

body.dark .blank-comparison-box {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.08), rgba(124, 58, 237, 0.08));
    border-color: rgba(79, 172, 254, 0.3);
}

/* ==================== Marks Display ==================== */
.blank-marks-display {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    background: var(--card);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    letter-spacing: 0.3px;
}

.blank-marks-display strong {
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 700;
}

/* ==================== Rows ==================== */
.blank-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0;
}

.blank-row-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.blank-row.user-row .blank-row-label {
    color: var(--accent);
}

.blank-row.correct-row .blank-row-label {
    color: var(--success);
}

/* ==================== Separator ==================== */
.blank-row-separator {
    height: 0;
    margin: 14px 0;
    border-top: 2px dashed rgba(79, 172, 254, 0.25);
    position: relative;
}

.blank-row-separator::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card);
    padding: 0 12px;
    font-size: 0.75rem;
    color: var(--text-light);
}

body.dark .blank-row-separator {
    border-top-color: rgba(79, 172, 254, 0.35);
}

/* ==================== Boxes Wrapper ==================== */
.blank-boxes-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ==================== Review Blank Box ==================== */
.review-blank-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    max-height: 25px;
    padding: 0px 2px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
    cursor: default;
    transition: all 0.2s ease;
    user-select: none;
    word-break: break-word;
    text-align: center;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.review-blank-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ✅ Correct box (সবুজ) */
.review-blank-box.correct {
    background: rgba(76, 175, 80, 0.12);
    border-color: var(--success);
    color: var(--success);
    font-weight: 700;
}

.review-blank-box.correct::before {
    content: '✓';
    position: absolute;
    top: -18px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
}

/* ✅ Wrong box (লাল) */
.review-blank-box.wrong {
    background: rgba(244, 67, 54, 0.12);
    border-color: var(--danger);
    color: var(--danger);
    
    font-weight: 500;
}

.review-blank-box.wrong::before {
    content: '✗';
    position: absolute;
    top: -18px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
}

/* ✅ Empty box (খালি — লাল) */
.review-blank-box.empty {
    background: rgba(244, 67, 54, 0.06);
    border-color: var(--danger);
    border-style: dashed;
    color: var(--text-light);
    font-weight: 500;
    font-size: 1rem;
}

.review-blank-box.empty::before {
    content: '?';
    position: absolute;
    top: -18px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
}

/* ✅ Correct Answer Box (সবসময় সবুজ, correct-answer class) */
.review-blank-box.correct-answer {
    background: rgba(76, 175, 80, 0.15);
    border-color: var(--success);
    color: var(--success);
    font-weight: 500;
    border-style: solid;
}

.review-blank-box.correct-answer::before {
    content: '✓';
    position: absolute;
    top: -18px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
}

/* ==================== Dark Mode Adjustments ==================== */
body.dark .review-card.blank-type-a-review-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark .review-blank-box {
    background: #252525;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark .review-blank-box.correct,
body.dark .review-blank-box.correct-answer {
    background: rgba(76, 175, 80, 0.18);
    border-color: #66bb6a;
    color: #81c784;
}

body.dark .review-blank-box.wrong {
    background: rgba(244, 67, 54, 0.18);
    border-color: #e57373;
    color: #ef5350;
}

body.dark .review-blank-box.empty {
    background: rgba(244, 67, 54, 0.08);
    border-color: #e57373;
    color: #a0a0a0;
}

body.dark .blank-marks-display {
    background: #252525;
    border-color: #3a3a3a;
    color: #b0b0b0;
}

body.dark .blank-marks-display strong {
    color: #64b5f6;
}

/* ==================== Responsive ==================== */
@media (max-width: 600px) {
    .review-card.blank-type-a-review-card {
        padding: 14px;
        border-radius: 12px;
    }

    .blank-comparison-box {
        padding: 14px 12px 12px 12px;
        border-radius: 10px;
    }

    .blank-marks-display {
        position: static;
        display: inline-block;
        margin-bottom: 12px;
        font-size: 0.75rem;
        padding: 3px 10px;
    }

    .blank-marks-display strong {
        font-size: 0.85rem;
    }

    .review-blank-box {
        min-width: 48px;
        max-width: 160px;
        padding: 8px 12px;
        font-size: 0.92rem;
        border-radius: 8px;
    }

    .review-blank-box::before {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.6rem !important;
        top: -6px !important;
        right: -6px !important;
    }

    .blank-boxes-wrapper {
        gap: 8px;
    }

    .blank-row-label {
        font-size: 0.76rem;
    }

    .blank-row-separator {
        margin: 10px 0;
    }
}

/* ==================== Tooltip (Review mode-friendly) ==================== */
/* Quiz-এর existing .blank-tooltip-popup style-ই ব্যবহার হবে */

/* ============================================================ */
/* ✅ REVIEW MODE — Blank Area (Question text with blanks)      */
/* ============================================================ */

.blank-area.review-blank-area {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text);
    word-break: break-word;
}

/* ✅ Review blank box (question text-এর ভিতরে) */
.blank-area.review-blank-area .blank-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 400;
    font-size: 1rem;
    vertical-align: middle;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    /* ✅ Base border override — neutral */
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
}

/* ✅ খালি box */
.blank-area.review-blank-area .blank-box.review-empty {
    border: 1px solid var(--danger);
    border-bottom: 2px dashed var(--danger);
    background: rgba(244, 67, 54, 0.08);
    color: var(--danger);
    font-weight: 500;
}

.blank-area.review-blank-area .blank-box.review-filled.correct {
    border: 1px solid var(--success);
    background: rgba(76, 175, 80, 0.08);
    color: var(--success);
    font-weight: 500;
}

.blank-area.review-blank-area .blank-box.review-filled.wrong {
    border: 1px solid var(--danger);
    background: rgba(244, 67, 54, 0.08);
    color: var(--danger);
    font-weight: 500;
}

/* ✅ Hover */
.blank-area.review-blank-area .blank-box:hover {
    transform: translateY(-1px);
}

/* ✅ Dark mode */
body.dark .blank-area.review-blank-area {
    background: #1e1e1e;
    border-color: #333;
}

body.dark .blank-area.review-blank-area .blank-box {
    background: rgba(79, 172, 254, 0.1);
    border-bottom-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark .blank-area.review-blank-area .blank-box.review-empty {
    background: rgba(244, 67, 54, 0.12);
    border-bottom-color: #e57373;
    color: #ef5350;
}

body.dark .blank-area.review-blank-area .blank-box.review-filled.correct {
    border-color: #66bb6a;
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

body.dark .blank-area.review-blank-area .blank-box.review-filled.wrong {
    border-color: #e57373;
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
}
.blank-comparison-box:hover {
    border-color: rgba(79, 172, 254, 0.35);
    box-shadow: 0 2px 12px rgba(79, 172, 254, 0.08);
}
.blank-marks-display strong {
    animation: marksPulse 0.5s ease-out;
}

@keyframes marksPulse {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ✅ Responsive */
@media (max-width: 600px) {
    .blank-area.review-blank-area {
        padding: 12px 14px;
        font-size: 0.94rem;
        line-height: 1.8;
    }

    .blank-area.review-blank-area .blank-box {
        min-width: 55px;
        max-width: 140px;
        padding: 2px 8px;
        font-size: 0.88rem;
    }
}

/* ============================================================ */
/* ✅ REVIEW MODE — Blank-Type-B Redesign                       */
/* ============================================================ */

/* ==================== Review Card Base ==================== */
.review-card.blank-type-b-review-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.review-card.blank-type-b-review-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==================== Blank-Type-B Review Blank Area ==================== */
.blank-area.review-blank-area.blankb-review-area {
    /* ✅ Same as blank-type-a — reuse existing styles */
    /* কোনো additional override দরকার নেই */
}

/* ✅ Blank box inside blankb-review-area — same as Type-A review */
.blank-area.review-blank-area.blankb-review-area .blank-box {
    /* ✅ Same visual as review-blank-area */
}

/* ✅ Dark mode — same as Type-A review */
body.dark .review-card.blank-type-b-review-card {
    background: #1e1e1e;
    border-color: #333;
}

/* ==================== Responsive ==================== */
@media (max-width: 600px) {
    .review-card.blank-type-b-review-card {
        padding: 14px;
        border-radius: 12px;
    }
}

/* ============================================================ */
/* ✅ REVIEW MODE — Blank-Suffix-Prefix                         */
/* ============================================================ */

.review-card.blank-suffix-prefix-review-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.review-card.blank-suffix-prefix-review-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ✅ Suffix-Prefix review blank-area */
.blank-area.review-blank-area.suffix-prefix-review-area {
    line-height: 2.2;
    padding: 16px 18px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--text);
    word-break: break-word;
}

.blank-area.review-blank-area.suffix-prefix-review-area .suffix-prefix-wrapper {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.blank-area.review-blank-area.suffix-prefix-review-area .blank-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    max-width: 180px;
    min-height: 28px;
    padding: 2px 10px;
    margin: 0 2px;
    background: rgba(79, 172, 254, 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blank-area.review-blank-area.suffix-prefix-review-area .blank-box.review-empty {
    border: 1px dashed var(--danger);
    background: rgba(244, 67, 54, 0.08);
    color: var(--danger);
    font-weight: 500;
}

.blank-area.review-blank-area.suffix-prefix-review-area .blank-box.review-filled.correct {
    border: 1px solid var(--success);
    background: rgba(76, 175, 80, 0.1);
    color: var(--success);
    font-weight: 700;
}

.blank-area.review-blank-area.suffix-prefix-review-area .blank-box.review-filled.wrong {
    border: 1px solid var(--danger);
    background: rgba(244, 67, 54, 0.1);
    color: var(--danger);
    font-weight: 700;
}

.blank-area.review-blank-area.suffix-prefix-review-area .blank-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blank-area.review-blank-area.suffix-prefix-review-area .root-word-hint {
    font-size: 0.85rem;
    color: var(--accent);
    margin-left: 2px;
    font-style: italic;
}

.blank-area.review-blank-area.suffix-prefix-review-area .blank-number {
    font-size: 0.7rem;
    color: var(--accent);
    vertical-align: sub;
}

/* ✅ 3-column comparison box */
.blank-comparison-box.suffix-prefix-comparison-box {
    position: relative;
    margin-top: 16px;
    padding: 40px 16px 16px 16px;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.04), rgba(124, 58, 237, 0.04));
    border: 1.5px solid rgba(79, 172, 254, 0.2);
    border-radius: 12px;
}

.suffix-prefix-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 8px 6px;
    margin-bottom: 8px;
    border-bottom: 2px dashed rgba(79, 172, 254, 0.25);
}

.sp-header-cell {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-align: center;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.suffix-prefix-rows-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suffix-prefix-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}

.sp-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    word-break: break-word;
    transition: all 0.2s ease;
}

.sp-user-cell {
    background: var(--card);
    border: 1.5px solid var(--border);
    color: var(--text);
}

.sp-user-cell.correct {
    background: rgba(76, 175, 80, 0.12);
    border-color: var(--success);
    color: var(--success);
    font-weight: 700;
}

.sp-user-cell.wrong {
    background: rgba(244, 67, 54, 0.12);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 700;
}

.sp-user-cell.empty {
    background: rgba(244, 67, 54, 0.06);
    border: 1.5px dashed var(--danger);
    color: var(--danger);
    font-weight: 500;
}

.sp-correct-cell {
    background: rgba(76, 175, 80, 0.1);
    border: 1.5px solid var(--success);
    color: var(--success);
    font-weight: 700;
}

.sp-root-cell {
    background: rgba(79, 172, 254, 0.08);
    border: 1.5px solid rgba(79, 172, 254, 0.3);
    color: var(--accent);
    font-weight: 600;
    font-style: italic;
}

/* ✅ Dark mode */
body.dark .review-card.blank-suffix-prefix-review-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark .blank-area.review-blank-area.suffix-prefix-review-area {
    background: #1e1e1e;
    border-color: #333;
}

body.dark .blank-area.review-blank-area.suffix-prefix-review-area .blank-box {
    background: #252525;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark .blank-area.review-blank-area.suffix-prefix-review-area .blank-box.review-empty {
    background: rgba(244, 67, 54, 0.12);
    border-color: #e57373;
    color: #ef5350;
}

body.dark .blank-area.review-blank-area.suffix-prefix-review-area .blank-box.review-filled.correct {
    background: rgba(76, 175, 80, 0.18);
    border-color: #66bb6a;
    color: #81c784;
}

body.dark .blank-area.review-blank-area.suffix-prefix-review-area .blank-box.review-filled.wrong {
    background: rgba(244, 67, 54, 0.18);
    border-color: #e57373;
    color: #ef5350;
}

body.dark .sp-user-cell {
    background: #252525;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark .sp-user-cell.correct {
    background: rgba(76, 175, 80, 0.18);
    border-color: #66bb6a;
    color: #81c784;
}

body.dark .sp-user-cell.wrong {
    background: rgba(244, 67, 54, 0.18);
    border-color: #e57373;
    color: #ef5350;
}

body.dark .sp-correct-cell {
    background: rgba(76, 175, 80, 0.15);
    border-color: #66bb6a;
    color: #81c784;
}

body.dark .sp-root-cell {
    background: rgba(79, 172, 254, 0.12);
    border-color: rgba(79, 172, 254, 0.4);
    color: #64b5f6;
}

/* ✅ Responsive */
@media (max-width: 600px) {
    .suffix-prefix-header-row,
    .suffix-prefix-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .sp-header-cell {
        font-size: 0.68rem;
    }

    .sp-cell {
        padding: 4px 6px;
        font-size: 0.82rem;
        min-height: 28px;
    }

    .review-card.blank-suffix-prefix-review-card {
        padding: 14px;
        border-radius: 12px;
    }
}

/* ============================================================ */
/* ✅ REVIEW MODE — Sentence-Rearranging                        */
/* ============================================================ */

.review-card.sentence-rearranging-review-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.review-card.sentence-rearranging-review-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.review-rearrange-question {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 16px;
    word-break: break-word;
}

/* ==================== Comparison Box ==================== */
.rearranging-comparison-box {
    position: relative;
    margin-top: 16px;
    padding: 18px 20px 16px 20px;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.04), rgba(124, 58, 237, 0.04));
    border: 1.5px solid rgba(79, 172, 254, 0.2);
    border-radius: 12px;
}

/* ==================== Review list (items) ==================== */
.rearrange-review-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.rearrange-review-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
    word-break: break-word;
    transition: all 0.2s ease;
}

.rearrange-review-number {
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 22px;
}

.rearrange-review-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* ✅ Correct (সবুজ) */
.rearrange-review-item.correct {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--success);
    color: var(--success);
    font-weight: 600;
}

.rearrange-review-item.correct .rearrange-review-number {
    color: var(--success);
}

/* ✅ Wrong (লাল) */
.rearrange-review-item.wrong {
    background: rgba(244, 67, 54, 0.1);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 600;
}

.rearrange-review-item.wrong .rearrange-review-number {
    color: var(--danger);
}

/* ✅ Skipped / Timed out */
.rearrange-review-item.skipped {
    background: rgba(158, 158, 158, 0.08);
    border-color: var(--muted, #9e9e9e);
    color: var(--text-light);
    font-style: italic;
}

/* ✅ Row labels spacing override for rearranging */
.rearranging-comparison-box .blank-row-label {
    margin-bottom: 10px;
}

.rearranging-comparison-box .blank-row.user-row .blank-row-label {
    color: var(--accent);
}

.rearranging-comparison-box .blank-row.correct-row .blank-row-label {
    color: var(--success);
}

/* ==================== Dark Mode ==================== */
body.dark .review-card.sentence-rearranging-review-card {
    background: #1e1e1e;
    border-color: #333;
}

body.dark .rearrange-review-item {
    background: #252525;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark .rearrange-review-item.correct {
    background: rgba(76, 175, 80, 0.18);
    border-color: #66bb6a;
    color: #81c784;
}

body.dark .rearrange-review-item.correct .rearrange-review-number {
    color: #81c784;
}

body.dark .rearrange-review-item.wrong {
    background: rgba(244, 67, 54, 0.18);
    border-color: #e57373;
    color: #ef5350;
}

body.dark .rearrange-review-item.wrong .rearrange-review-number {
    color: #ef5350;
}

body.dark .rearrange-review-item.skipped {
    background: rgba(158, 158, 158, 0.12);
    border-color: #555;
    color: #a0a0a0;
}

body.dark .rearranging-comparison-box {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.08), rgba(124, 58, 237, 0.08));
    border-color: rgba(79, 172, 254, 0.3);
}

/* ==================== Responsive ==================== */
@media (max-width: 600px) {
    .review-card.sentence-rearranging-review-card {
        padding: 14px;
        border-radius: 12px;
    }

    .rearrange-review-item {
        padding: 8px 10px;
        font-size: 0.88rem;
        gap: 8px;
    }

    .rearrange-review-number {
        min-width: 18px;
        font-size: 0.85rem;
    }
}