/* =========================================
   1. MAIN QUIZ CSS (Premium & Dark Mode)
   ========================================= */
.gk-icon-btn.used, .gk-option-card.disabled { cursor:not-allowed; opacity:.5; filter: grayscale(100%); }
.gk-quiz-wrapper * { box-sizing:border-box; font-family: 'Poppins', sans-serif; }

:root {
    --gk-bg-card: #ffffff;
    --gk-text-main: #0f172a;
    --gk-text-muted: #64748b;
    --gk-border-color: #e2e8f0;
    --gk-btn-default: #f8fafc;
    --gk-btn-hover: #f1f5f9;
    --gk-success-bg: #ecfdf5;
    --gk-success-border: #10b981;
    --gk-success-text: #047857;
    --gk-error-bg: #fef2f2;
    --gk-error-border: #ef4444;
    --gk-error-text: #b91c1c;
    --gk-primary-btn: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gk-primary-btn-hover: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    --gk-progress-fill: linear-gradient(90deg, #3b82f6, #8b5cf6);
    --gk-card-hover: #f8fafc;
    --gk-shadow: 0 6px 20px rgba(0,0,0,0.06);
    --gk-option-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.gk-quiz-wrapper.dark-mode {
    --gk-bg-card: #1e293b;
    --gk-text-main: #f8fafc;
    --gk-text-muted: #94a3b8;
    --gk-border-color: #334155;
    --gk-btn-default: #0f172a;
    --gk-btn-hover: #1e293b;
    --gk-success-bg: rgba(16, 185, 129, 0.1);
    --gk-success-border: #34d399;
    --gk-success-text: #6ee7b7;
    --gk-error-bg: rgba(239, 68, 68, 0.1);
    --gk-error-border: #f87171;
    --gk-error-text: #fca5a5;
    --gk-primary-btn: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    --gk-primary-btn-hover: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gk-card-hover: #0f172a;
    --gk-shadow: 0 8px 25px rgba(0,0,0,0.4);
    --gk-option-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* =========================================
   2. QUIZ LAYOUT & HEADER (Fixed Version)
   ========================================= */
.gk-quiz-wrapper { width:100%; margin:0; background:var(--gk-bg-card); color:var(--gk-text-main); padding:12px; transition: background 0.4s ease, color 0.4s ease; user-select:none; }
.gk-hidden, .gk-option-card.hidden-50 { display:none!important; }

.gk-master-header { margin-bottom: 12px; width: 100%; }
.gk-header-top { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 8px; }
.gk-q-indicator-text { font-weight: 800; font-size: 14px; color: var(--gk-text-muted); white-space: nowrap; }

/* The Pill Container for Moon, Bulb & Timer */
.gk-timer-pill { display: flex !important; flex-direction: row !important; align-items: center !important; background: var(--gk-btn-default); border: 1px solid var(--gk-border-color); border-radius: 20px; padding: 3px 4px; gap: 4px; }
.gk-icon-btn { background: var(--gk-bg-card); border: 1px solid var(--gk-border-color); color: var(--gk-text-main); height: 28px; border-radius: 14px; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 8px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: 0.2s; }
.gk-icon-btn:hover { background: var(--gk-btn-hover); }
.gk-timer-text { background: var(--gk-error-bg); color: var(--gk-error-border); height: 28px; border-radius: 14px; padding: 0 10px; font-weight: 800; font-size: 13px; display: flex !important; align-items: center !important; gap: 4px; }

.gk-progress-track { height: 6px; background: var(--gk-border-color); border-radius: 10px; overflow: hidden; width: 100%; }
#gk-progress-fill { height: 100%; background: var(--gk-progress-fill); width: 5%; transition: width 0.4s ease-in-out; border-radius: 10px; }

/* =========================================
   3. PALETTE & QUESTIONS
   ========================================= */
.gk-palette-container { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; scrollbar-width:none; }
.gk-palette-container::-webkit-scrollbar { display:none; }
.gk-pal-btn { width:30px; height:30px; flex-shrink:0; border-radius:8px; border:1px solid var(--gk-border-color); color:var(--gk-text-muted); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; background: var(--gk-btn-default); cursor:pointer; transition:0.3s; }
.gk-pal-btn.active-pal { border: 2px solid #6366f1; background: #e0e7ff; color: #4338ca; transform: scale(1.1); }
.dark-mode .gk-pal-btn.active-pal { background: #3730a3; color: #e0e7ff; }
.gk-pal-btn.answered-correct { background:var(--gk-success-bg); color:var(--gk-success-text); border-color:var(--gk-success-border); }
.gk-pal-btn.answered-wrong { background:var(--gk-error-bg); color:var(--gk-error-text); border-color:var(--gk-error-border); }

#gk-quiz-container { min-height:220px; }
.gk-q-block { display:none; animation:0.4s slideFadeIn ease; }
.gk-q-block.active { display:block; }
@keyframes slideFadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.gk-q-title { font-size:15px; font-weight:800; margin-bottom:12px; line-height:1.4; color: var(--gk-text-main); }

.gk-option-card { display:flex; align-items:center; padding:8px 12px; border:2px solid var(--gk-border-color); border-radius:10px; margin-bottom:8px; cursor:pointer; transition:all 0.2s ease; font-size:14px; font-weight:600; color: var(--gk-text-main); background: var(--gk-bg-card); box-shadow: var(--gk-option-shadow); }
.gk-option-card:hover:not(.disabled) { border-color:#818cf8; background:var(--gk-card-hover); transform:translateY(-1px); }
.gk-option-card:active:not(.disabled) { transform:scale(.98); }
.gk-opt-badge { width:24px; height:24px; background: var(--gk-btn-default); border-radius:6px; margin-right:10px; font-size:12px; color:var(--gk-text-muted); font-weight:800; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }

.gk-option-card.correct-ans { background:var(--gk-success-bg); border-color:var(--gk-success-border); color:var(--gk-success-text); }
.gk-option-card.correct-ans .gk-opt-badge { background:var(--gk-success-border); color:#fff; }
.gk-option-card.wrong-ans { background:var(--gk-error-bg); border-color:var(--gk-error-border); color:var(--gk-error-text); animation: shake 0.3s; }
.gk-option-card.wrong-ans .gk-opt-badge { background:var(--gk-error-border); color:#fff; }
@keyframes shake { 0%, 100% {transform: translateX(0);} 25% {transform: translateX(-4px);} 75% {transform: translateX(4px);} }

/* =========================================
   4. ACTIONS & EXPLANATIONS
   ========================================= */
.gk-actions { display:flex; justify-content:space-between; margin-top:15px; gap:8px; }
.gk-btn-nav { font-weight:700; font-size:14px; flex:1; padding:10px; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:0.2s; }
.gk-btn-side { background:var(--gk-btn-default); color:var(--gk-text-muted); border: 1px solid var(--gk-border-color); }
.gk-btn-side:hover { background:var(--gk-btn-hover); color: var(--gk-text-main); }
.gk-btn-submit { background:var(--gk-primary-btn); color:#fff; flex:1.5; box-shadow:0 4px 12px rgba(99,102,241,.2); }
.gk-btn-submit:hover { opacity:0.9; }

.gk-exp-item { padding:12px; border:1px solid var(--gk-border-color); border-radius:10px; margin-bottom:12px; background:var(--gk-btn-default); border-left:4px solid #6366f1; text-align:left; }
.gk-exp-q { margin-bottom:6px; font-weight: 800; font-size: 14px; color: var(--gk-text-main); }
.gk-exp-ans { font-size:13px; color:var(--gk-success-border); font-weight:800; margin-bottom:4px; }
.gk-exp-desc { font-size:13px; color:var(--gk-text-muted); line-height: 1.5; }

/* =========================================
   5. RESULT CARD (Small Sizes)
   ========================================= */
.result-premium-card { background: var(--gk-bg-card); border-radius: 12px; padding: 15px; margin-bottom: 20px; text-align: center; border: 1px solid var(--gk-border-color); animation: scaleUp 0.4s ease; }
@keyframes scaleUp { from {transform: scale(0.95); opacity: 0;} to {transform: scale(1); opacity: 1;} }
.res-title { margin-top: 0; margin-bottom: 10px; font-size: 20px; color: var(--gk-text-main); font-weight: 800; }
.res-remark { font-size: 14px; font-weight: 800; margin-bottom: 15px; padding: 8px; border-radius: 8px; background: var(--gk-btn-default); color: var(--gk-primary-btn); }
.res-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }

.res-stat-box { background: var(--gk-bg-card); padding: 10px; border-radius: 10px; border: 2px solid var(--gk-border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.res-stat-box.correct { background: var(--gk-success-bg); border-color: var(--gk-success-border); }
.res-stat-box.wrong { background: var(--gk-error-bg); border-color: var(--gk-error-border); }
.res-stat-box.accuracy { background: #eff6ff; border-color: #3b82f6; }
.dark-mode .res-stat-box.accuracy { background: rgba(59, 130, 246, 0.1); }

.stat-label { font-size: 11px; color: var(--gk-text-muted); font-weight: 800; text-transform: uppercase; margin-bottom: 4px; }
.stat-value { font-size: 20px; font-weight: 900; color: var(--gk-text-main); line-height: 1; }
.res-stat-box.correct .stat-value { color: var(--gk-success-border); }
.res-stat-box.wrong .stat-value { color: var(--gk-error-border); }
.res-stat-box.accuracy .stat-value { color: #3b82f6; }

.res-actions-row { display: flex; gap: 10px; }
.res-actions-row button { flex: 1; padding: 12px; font-size: 14px; border-radius: 10px; font-weight: 800; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; }
.res-actions-row button:active { transform: scale(0.96); }
.retry-btn { background: var(--gk-btn-default); color: var(--gk-text-main); border: 1px solid var(--gk-border-color); }
.retry-btn:hover { background: var(--gk-btn-hover); }

/* =========================================
   6. DESKTOP OPTIMIZATION (Laptop View)
   ========================================= */
@media (min-width:768px) {
    .gk-quiz-wrapper { max-width:600px; margin:20px auto; border-radius:16px; border:1px solid var(--gk-border-color); padding:20px 25px; box-shadow:var(--gk-shadow); }
    .gk-q-title { font-size:17px; margin-bottom:16px; }
    .gk-option-card { font-size:15px; padding:10px 14px; }
    .gk-opt-badge { width:26px; height:26px; font-size:13px; }
    .gk-btn-nav { font-size:15px; padding:12px; }
}