/* ============================================
   TaniCerdas – Complete CSS
   Pertanian Berkelanjutan KWT
   ============================================ */

:root {
  --green-dark:  #1a6b3c;
  --green:       #28a745;
  --green-light: #4cbb6e;
  --green-pale:  #e8f5ed;
  --yellow:      #ffc107;
  --yellow-dark: #e6a800;
  --orange:      #ff7b2e;
  --red:         #e74c3c;
  --red-pale:    #fdecea;
  --blue:        #3498db;
  --blue-pale:   #e8f4fb;
  --purple:      #6a1b9a;
  --purple-pale: #f3e5f5;
  --teal:        #00897b;
  --white:       #ffffff;
  --off-white:   #f7faf8;
  --gray-light:  #f0f4f2;
  --gray:        #b0bec5;
  --gray-dark:   #546e7a;
  --text:        #2d3a35;
  --text-sub:    #617d6e;
  --shadow:      0 4px 18px rgba(0,0,0,0.11);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
  --radius:      16px;
  --radius-sm:   10px;
  --radius-xs:   6px;
  --font-main:   'Nunito', sans-serif;
  --font-body:   'Poppins', sans-serif;
  --tr:          0.22s ease;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--off-white); color:var(--text); min-height:100vh; overflow-x:hidden; }
.hidden { display:none !important; }

/* ===== SPLASH ===== */
.splash-screen {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(145deg,#1a6b3c,#28a745,#4cbb6e);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s;
}
.splash-content { text-align:center; color:#fff; }
.splash-logo { font-size:80px; animation:bounce 1s infinite alternate; margin-bottom:12px; }
.splash-title { font-family:var(--font-main); font-size:2.8rem; font-weight:900; letter-spacing:-1px; }
.splash-sub { font-size:1rem; opacity:.85; margin:6px 0 30px; }
.splash-loader { width:200px; height:6px; background:rgba(255,255,255,.3); border-radius:99px; overflow:hidden; margin:0 auto; }
.loader-bar { height:100%; background:#fff; border-radius:99px; animation:loadProgress 2s ease forwards; }
@keyframes loadProgress { from{width:0} to{width:100%} }
@keyframes bounce { from{transform:translateY(0)} to{transform:translateY(-12px)} }

/* ===== APP ===== */
.app { min-height:100vh; display:flex; flex-direction:column; max-width:480px; margin:0 auto; background:var(--white); box-shadow:0 0 40px rgba(0,0,0,.12); position:relative; }

/* ===== TOP NAV ===== */
.top-nav {
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  padding:12px 18px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 12px rgba(26,107,60,.3);
}
.nav-left { display:flex; align-items:center; gap:10px; }
.nav-logo { font-family:var(--font-main); font-size:1.15rem; font-weight:800; color:#fff; }
.btn-back { background:rgba(255,255,255,.2); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:1rem; cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; }
.btn-back:hover { background:rgba(255,255,255,.35); }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-xp { background:rgba(255,255,255,.18); color:#fff; font-size:.82rem; font-weight:700; font-family:var(--font-main); padding:5px 12px; border-radius:99px; display:flex; align-items:center; gap:5px; }
.nav-xp i { color:var(--yellow); }
.nav-avatar { position:relative; cursor:pointer; }
#nav-level-badge { position:absolute; bottom:-4px; right:-4px; background:var(--yellow); color:#5a3800; font-size:.6rem; font-weight:800; padding:1px 5px; border-radius:99px; font-family:var(--font-main); }

/* ===== SCREENS ===== */
.screen { display:none; flex:1; overflow-y:auto; padding-bottom:24px; }
.screen.active { display:block; }
.screen-header { background:linear-gradient(135deg,var(--green-dark),var(--green)); padding:22px 20px; color:#fff; }
.screen-header h2 { font-family:var(--font-main); font-size:1.3rem; font-weight:800; }
.screen-header p { font-size:.83rem; opacity:.85; margin-top:4px; }

/* ===== LOGIN ===== */
.login-container { padding:0 0 30px; }
.login-hero { background:linear-gradient(145deg,var(--green-dark),var(--green-light)); padding:40px 28px 50px; text-align:center; color:#fff; clip-path:ellipse(110% 100% at 50% 0%); }
.login-hero-icon { font-size:64px; margin-bottom:10px; }
.login-hero h2 { font-family:var(--font-main); font-size:1.7rem; font-weight:800; line-height:1.3; }
.login-hero p { margin-top:8px; font-size:.88rem; opacity:.9; }
.brand { color:var(--yellow); }
.login-card { background:var(--white); margin:-20px 18px 0; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 20px; }
.tab-switch { display:flex; background:var(--gray-light); border-radius:99px; padding:4px; margin-bottom:20px; }
.tab-btn { flex:1; border:none; background:none; padding:8px; border-radius:99px; font-family:var(--font-main); font-weight:700; font-size:.9rem; cursor:pointer; color:var(--text-sub); transition:var(--tr); }
.tab-btn.active { background:var(--green); color:#fff; box-shadow:0 2px 8px rgba(40,167,69,.3); }
.login-form { display:none; flex-direction:column; gap:14px; }
.login-form.active { display:flex; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:.83rem; font-weight:600; color:var(--text-sub); display:flex; align-items:center; gap:6px; }
.form-group input, .form-group textarea, .form-group select { border:1.5px solid #d8e8df; border-radius:var(--radius-sm); padding:11px 14px; font-size:.93rem; font-family:var(--font-body); color:var(--text); outline:none; transition:var(--tr); resize:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(40,167,69,.12); }
.avatar-picker { display:flex; gap:10px; flex-wrap:wrap; }
.avatar-opt { font-size:1.8rem; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; border:2.5px solid transparent; cursor:pointer; background:var(--gray-light); transition:var(--tr); }
.avatar-opt.selected { border-color:var(--green); background:var(--green-pale); transform:scale(1.1); }

/* ===== BUTTONS ===== */
.btn-primary { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; border:none; border-radius:var(--radius-sm); padding:13px 22px; font-family:var(--font-main); font-weight:700; font-size:.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(40,167,69,.35); }
.btn-secondary { background:var(--gray-light); color:var(--text); border:none; border-radius:var(--radius-sm); padding:12px 20px; font-family:var(--font-main); font-weight:700; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }
.btn-secondary:hover { background:#dde8e2; }
.btn-full { width:100%; }
.btn-orange { background:linear-gradient(135deg,var(--orange),var(--yellow-dark)); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px 20px; font-family:var(--font-main); font-weight:700; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }
.btn-orange:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,123,46,.3); }
.btn-blue { background:linear-gradient(135deg,#1565c0,var(--blue)); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px 20px; font-family:var(--font-main); font-weight:700; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }
.btn-blue:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(52,152,219,.3); }
.btn-purple { background:linear-gradient(135deg,var(--purple),#9c27b0); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px 20px; font-family:var(--font-main); font-weight:700; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }

/* ===== DASHBOARD ===== */
.dashboard-wrap { display:flex; flex-direction:column; }
.hero-banner { background:linear-gradient(135deg,var(--green-dark) 0%,#2e9e56 60%,var(--green-light) 100%); padding:22px 22px 28px; color:#fff; display:flex; justify-content:space-between; align-items:flex-start; }
.hero-greeting { font-size:.9rem; opacity:.85; margin-bottom:4px; }
.hero-banner h2 { font-family:var(--font-main); font-size:1.5rem; font-weight:800; }
.hero-sub { font-size:.82rem; opacity:.75; margin-top:4px; }
.hero-stats { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.stat-pill { background:rgba(255,255,255,.18); font-size:.78rem; font-weight:700; font-family:var(--font-main); padding:5px 11px; border-radius:99px; display:flex; align-items:center; gap:5px; }
.stat-pill i { color:var(--yellow); }
.progress-section { display:flex; align-items:center; gap:16px; padding:18px 18px 14px; background:var(--white); border-bottom:1.5px solid var(--gray-light); }
.progress-ring-wrap { position:relative; width:110px; height:110px; flex-shrink:0; }
.progress-ring { width:110px; height:110px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--gray-light); stroke-width:10; }
.ring-fill { fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1s ease; }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center span { font-family:var(--font-main); font-size:1.3rem; font-weight:800; color:var(--green-dark); line-height:1; }
.ring-center small { font-size:.62rem; color:var(--text-sub); font-weight:600; }
.progress-info { flex:1; }
.progress-info h3 { font-family:var(--font-main); font-size:.95rem; font-weight:700; color:var(--green-dark); margin-bottom:8px; }
.xp-bar-wrap { margin-bottom:8px; }
.xp-bar { height:10px; background:var(--gray-light); border-radius:99px; overflow:hidden; margin-bottom:4px; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--yellow)); border-radius:99px; transition:width .8s ease; }
#xp-label { font-size:.72rem; color:var(--text-sub); }
.badge-preview { font-size:.78rem; color:var(--text-sub); font-weight:600; }
.quick-stats { display:flex; padding:14px 16px; gap:10px; background:var(--green-pale); }
.qstat { flex:1; background:var(--white); border-radius:var(--radius-sm); padding:12px 8px; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-sm); }
.qstat i { font-size:1.1rem; color:var(--green); }
.qstat strong { display:block; font-family:var(--font-main); font-size:.9rem; color:var(--green-dark); font-weight:800; }
.qstat small { font-size:.64rem; color:var(--text-sub); }
.dash-menu { display:flex; flex-direction:column; gap:10px; padding:14px 16px; }
.menu-btn { background:var(--white); border:1.5px solid #e8f0eb; border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left; transition:var(--tr); box-shadow:var(--shadow-sm); }
.menu-btn:hover { border-color:var(--green-light); background:var(--green-pale); transform:translateX(4px); }
.menu-icon { font-size:1.8rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--green-pale); border-radius:12px; flex-shrink:0; }
.menu-text { flex:1; }
.menu-text span { font-family:var(--font-main); font-size:.95rem; font-weight:700; color:var(--text); display:block; }
.menu-text small { font-size:.72rem; color:var(--text-sub); }
.menu-btn .fa-chevron-right { color:var(--green); font-size:.85rem; }

/* ===== MODULES LIST ===== */
.modules-list { padding:16px; display:flex; flex-direction:column; gap:14px; }
.module-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1.5px solid var(--gray-light); overflow:hidden; transition:var(--tr); cursor:pointer; }
.module-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--green-light); }
.module-card.locked { opacity:.6; cursor:not-allowed; filter:grayscale(.4); }
.module-card-header { padding:16px; display:flex; align-items:flex-start; gap:14px; }
.module-emoji { font-size:2rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:14px; flex-shrink:0; }
.module-info { flex:1; }
.module-sesi { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--green); margin-bottom:3px; }
.module-title { font-family:var(--font-main); font-size:.98rem; font-weight:800; color:var(--text); line-height:1.3; }
.module-sub { font-size:.76rem; color:var(--text-sub); margin-top:3px; line-height:1.5; }
.module-lock-icon { font-size:1.1rem; color:var(--gray); }
.module-card-footer { padding:10px 16px 14px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; border-top:1px solid var(--gray-light); background:var(--gray-light); }
.module-progress { font-size:.76rem; color:var(--text-sub); display:flex; align-items:center; gap:6px; }
.module-progress .mpbar { width:70px; height:6px; background:var(--gray); border-radius:99px; overflow:hidden; }
.module-progress .mpbar-fill { height:100%; background:var(--green); border-radius:99px; }
.module-xp { font-size:.8rem; font-weight:700; color:var(--green-dark); font-family:var(--font-main); }
.module-xp i { color:var(--yellow); }
.module-flow-pills { display:flex; gap:4px; flex-wrap:wrap; padding:8px 16px 12px; }
.flow-pill { font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:99px; display:flex; align-items:center; gap:3px; }
.pill-pre  { background:#e3f2fd; color:#1565c0; }
.pill-mat  { background:var(--green-pale); color:var(--green-dark); }
.pill-akt  { background:#fff8e1; color:#e65100; }
.pill-kuis { background:#fce4ec; color:#c62828; }
.pill-ref  { background:#e8f5e9; color:#2e7d32; }
.pill-dis  { background:#ede7f6; color:#4a148c; }
.pill-post { background:#e0f7fa; color:#006064; }
.pill-rew  { background:#fff3e0; color:#bf360c; }

.module-status-badge { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px; }
.status-locked  { background:var(--gray-light); color:var(--gray-dark); }
.status-done    { background:#d4edda; color:var(--green-dark); }
.status-ongoing { background:#fff3cd; color:#856404; }

/* ===== MODULE DETAIL ===== */
.module-detail-header { padding:28px 20px; color:#fff; }
.detail-emoji { font-size:3rem; margin-bottom:10px; }
.detail-sesi-label { font-size:.8rem; font-weight:700; background:rgba(255,255,255,.2); display:inline-block; padding:3px 12px; border-radius:99px; margin-bottom:8px; }
.module-detail-header h2 { font-family:var(--font-main); font-size:1.35rem; font-weight:800; }
.module-detail-header p { font-size:.85rem; opacity:.85; margin-top:6px; }
.detail-meta { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.detail-meta-item { background:rgba(255,255,255,.18); font-size:.76rem; font-weight:600; padding:4px 12px; border-radius:99px; display:flex; align-items:center; gap:5px; }
.module-detail-body { padding:16px; }
.kompetensi-box { background:linear-gradient(135deg,#e8f5ed,#f1f8e9); border-radius:var(--radius-sm); padding:14px; margin-bottom:14px; border-left:4px solid var(--green); }
.kompetensi-box h4 { font-family:var(--font-main); font-size:.88rem; font-weight:800; color:var(--green-dark); margin-bottom:8px; }
.kompetensi-box ul { list-style:none; display:flex; flex-direction:column; gap:5px; }
.kompetensi-box ul li { font-size:.8rem; color:var(--text); padding-left:18px; position:relative; line-height:1.5; }
.kompetensi-box ul li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.section-title { font-family:var(--font-main); font-size:.98rem; font-weight:800; color:var(--green-dark); margin:16px 0 10px; display:flex; align-items:center; gap:7px; }
.material-card { background:var(--off-white); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px; border-left:4px solid var(--green); }
.material-card h4 { font-family:var(--font-main); font-size:.9rem; font-weight:700; color:var(--green-dark); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.material-card p { font-size:.82rem; color:var(--text); line-height:1.6; margin-bottom:6px; }
.material-card ul { list-style:none; display:flex; flex-direction:column; gap:5px; }
.material-card ul li { font-size:.82rem; color:var(--text); padding-left:4px; line-height:1.5; }
.tips-box { background:linear-gradient(135deg,#fffbea,#fff8d6); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px; border:1.5px solid var(--yellow); }
.tips-box h4 { font-family:var(--font-main); font-size:.88rem; font-weight:700; color:#856404; margin-bottom:5px; }
.tips-box p { font-size:.82rem; color:#5a4200; line-height:1.6; }
.detail-actions { padding:14px 16px 24px; display:flex; flex-direction:column; gap:10px; }
.detail-actions-row { display:flex; gap:10px; }

/* ===== STEP FLOW ===== */
.materi-locked-notice { background:#fff3cd; border:1.5px solid var(--yellow); border-radius:var(--radius-sm); padding:11px 14px; font-size:.82rem; color:#856404; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.steps-flow { margin:4px 0 14px; }
.step-num-row { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.step-num { width:28px; height:28px; border-radius:50%; background:var(--gray-light); color:var(--gray-dark); font-family:var(--font-main); font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--tr); }
.step-num.done { background:var(--green); color:#fff; }
.step-num.current { background:var(--yellow); color:#5a3800; box-shadow:0 0 0 3px rgba(255,193,7,.35); }
.step-connector { flex:1; height:3px; background:var(--gray-light); margin:0 2px; border-radius:99px; }
.step-labels-row { display:flex; justify-content:space-between; padding:4px 0; font-size:.6rem; color:var(--text-sub); font-weight:600; }
.step-labels-row span { flex:1; text-align:center; }
.step-row { display:flex; align-items:center; gap:10px; }
.step-row.done .step-done-icon { font-size:1.2rem; flex-shrink:0; }
.step-row.locked .step-lock-icon { font-size:1rem; flex-shrink:0; opacity:.5; }
.step-row.next .step-next-icon { font-size:1.2rem; flex-shrink:0; animation:pulse 1.5s infinite; }
.step-btn-done { flex:1; }
.step-btn-locked { flex:1; opacity:.45; cursor:not-allowed !important; }
.step-btn-next { flex:1; }

@keyframes pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.25); }
}
.pulse-btn {
  animation:pulseBtn 2s infinite;
  box-shadow:0 0 0 0 rgba(40,167,69,.5);
}
@keyframes pulseBtn {
  0%   { box-shadow:0 0 0 0 rgba(40,167,69,.4); }
  70%  { box-shadow:0 0 0 8px rgba(40,167,69,0); }
  100% { box-shadow:0 0 0 0 rgba(40,167,69,0); }
}

/* ===== PRETEST / POSTTEST HEADER VARIANTS ===== */
.pretest-header { background:linear-gradient(135deg,#1565c0,var(--blue)) !important; }
.posttest-header { background:linear-gradient(135deg,var(--teal),#26a69a) !important; }
.pretest-note { font-size:.78rem; background:rgba(255,255,255,.18); border-radius:99px; padding:5px 12px; display:flex; align-items:center; gap:6px; margin-top:6px; }

/* ===== QUIZ ===== */
.quiz-wrap { display:flex; flex-direction:column; min-height:calc(100vh - 60px); }
.quiz-header { background:linear-gradient(135deg,var(--green-dark),var(--green)); padding:16px 18px 14px; color:#fff; }
.quiz-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.quiz-meta span { font-family:var(--font-main); font-size:.85rem; font-weight:700; }
.quiz-progress-txt { opacity:.8; }
.quiz-progress-bar { height:6px; background:rgba(255,255,255,.25); border-radius:99px; overflow:hidden; margin-bottom:8px; }
.quiz-prog-fill { height:100%; background:var(--yellow); border-radius:99px; transition:width .5s ease; }
.quiz-timer-wrap { display:flex; align-items:center; gap:6px; font-size:.82rem; }
#quiz-timer, #posttest-timer { font-family:var(--font-main); font-weight:800; font-size:1rem; }
.quiz-pts { margin-left:auto; background:rgba(255,255,255,.2); padding:3px 10px; border-radius:99px; font-weight:700; font-size:.78rem; display:flex; align-items:center; gap:4px; }
.quiz-pts i { color:var(--yellow); }
.quiz-body { padding:22px 18px; flex:1; }
.quiz-q-num { font-family:var(--font-main); font-size:2.4rem; font-weight:900; color:var(--gray-light); line-height:1; margin-bottom:8px; }
.quiz-question { font-family:var(--font-main); font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.5; margin-bottom:20px; }
.quiz-options { display:flex; flex-direction:column; gap:10px; }
.quiz-opt-btn { background:var(--white); border:2px solid var(--gray-light); border-radius:var(--radius-sm); padding:13px 16px; text-align:left; font-family:var(--font-body); font-size:.88rem; color:var(--text); cursor:pointer; transition:var(--tr); display:flex; align-items:center; gap:10px; }
.quiz-opt-btn:hover { border-color:var(--green-light); background:var(--green-pale); }
.quiz-opt-btn.correct  { border-color:var(--green); background:#d4edda; color:var(--green-dark); }
.quiz-opt-btn.wrong    { border-color:var(--red); background:var(--red-pale); color:var(--red); }
.quiz-opt-btn.selected { border-color:var(--blue); background:var(--blue-pale); }
.opt-letter { width:28px; height:28px; border-radius:50%; background:var(--gray-light); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; }
.quiz-feedback { padding:14px 18px; text-align:center; animation:fadeInUp .3s ease; border-radius:var(--radius-sm); margin:0 18px; }
#quiz-feedback-icon, #pretest-feedback-icon, #posttest-feedback-icon { font-size:1.8rem; margin-bottom:4px; }
#quiz-feedback-text, #pretest-feedback-text, #posttest-feedback-text { font-family:var(--font-main); font-weight:700; font-size:.9rem; }

/* ===== RESULT ===== */
.result-wrap { padding:28px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.result-icon { font-size:5rem; animation:resultBounce .6s ease; }
.result-wrap h2 { font-family:var(--font-main); font-size:1.7rem; font-weight:900; color:var(--green-dark); }
.result-wrap > p { color:var(--text-sub); font-size:.88rem; }
.result-score-card { display:flex; gap:10px; width:100%; }
.score-item { flex:1; background:var(--green-pale); border-radius:var(--radius-sm); padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.score-item i { font-size:1.2rem; color:var(--green); }
.score-item strong { font-family:var(--font-main); font-size:.95rem; color:var(--green-dark); font-weight:800; }
.score-item small { font-size:.68rem; color:var(--text-sub); }
.result-badges { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.result-badge-item { background:linear-gradient(135deg,var(--yellow),var(--orange)); color:#fff; border-radius:10px; padding:7px 12px; font-size:.78rem; font-weight:700; font-family:var(--font-main); display:flex; align-items:center; gap:5px; }
.result-actions { display:flex; gap:10px; width:100%; }
.result-actions .btn-secondary,.result-actions .btn-primary { flex:1; }
.prepost-comparison { background:var(--green-pale); border-radius:var(--radius-sm); padding:14px 16px; width:100%; }
.prepost-comparison h4 { font-family:var(--font-main); font-size:.88rem; font-weight:700; color:var(--green-dark); margin-bottom:10px; }
.comparison-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.comparison-label { font-size:.78rem; color:var(--text-sub); }
.comparison-score { font-family:var(--font-main); font-weight:800; font-size:1rem; }
.comparison-arrow { font-size:1.2rem; }
.score-up   { color:var(--green); }
.score-down { color:var(--red); }
.score-same { color:var(--gray-dark); }

/* ===== AKTIVITAS ===== */
.aktivitas-header { padding:24px 18px 20px; color:#fff; }
.aktivitas-header h2 { font-family:var(--font-main); font-size:1.25rem; font-weight:800; }
.aktivitas-header p { font-size:.83rem; opacity:.85; margin-top:5px; }
.checklist-body { padding:16px; }
.checklist-desc { background:var(--green-pale); border-radius:var(--radius-sm); padding:12px 14px; font-size:.83rem; color:var(--text); line-height:1.6; margin-bottom:14px; }
.checklist-item { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--white); border-radius:var(--radius-sm); border:1.5px solid var(--gray-light); margin-bottom:8px; cursor:pointer; transition:var(--tr); }
.checklist-item:hover { border-color:var(--green-light); background:var(--green-pale); }
.checklist-item.checked { border-color:var(--green); background:#d4edda; }
.checklist-item input[type=checkbox] { display:none; }
.checklist-box { width:22px; height:22px; border:2px solid var(--gray); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--tr); }
.checklist-item.checked .checklist-box { background:var(--green); border-color:var(--green); }
.checklist-box-check { color:#fff; font-size:.75rem; }
.checklist-item span { font-size:.85rem; color:var(--text); line-height:1.5; }
.checklist-progress-bar-wrap { margin:12px 0; }
.checklist-progress-bar { height:8px; background:var(--gray-light); border-radius:99px; overflow:hidden; margin-bottom:5px; }
.checklist-progress-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--yellow)); border-radius:99px; transition:width .4s ease; }
.checklist-progress-txt { font-size:.75rem; color:var(--text-sub); text-align:right; }
.aktivitas-actions { padding:0 16px 8px; display:flex; flex-direction:column; gap:10px; }

/* ===== REFLEKSI ===== */
.refleksi-header { padding:24px 18px; color:#fff; background:linear-gradient(135deg,#2e7d32,#43a047); }
.refleksi-header h2 { font-family:var(--font-main); font-size:1.2rem; font-weight:800; }
.refleksi-header p { font-size:.82rem; opacity:.85; margin-top:4px; }
.refleksi-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
.refleksi-q-card { background:var(--white); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); border:1.5px solid var(--gray-light); overflow:hidden; }
.refleksi-q-num { background:var(--green); color:#fff; padding:8px 14px; font-family:var(--font-main); font-size:.78rem; font-weight:700; display:flex; align-items:center; gap:6px; }
.refleksi-q-text { padding:12px 14px 8px; font-size:.85rem; color:var(--text); font-weight:600; line-height:1.5; }
.refleksi-q-card textarea { width:100%; padding:10px 14px 12px; border:none; border-top:1px solid var(--gray-light); font-size:.83rem; font-family:var(--font-body); color:var(--text); resize:none; outline:none; min-height:80px; background:var(--off-white); }
.refleksi-q-card textarea:focus { background:#fff; }
.refleksi-actions { padding:4px 16px 8px; display:flex; flex-direction:column; gap:10px; }

/* ===== DISKUSI ===== */
.diskusi-header { padding:24px 18px; color:#fff; background:linear-gradient(135deg,#4a148c,var(--purple)); }
.diskusi-header h2 { font-family:var(--font-main); font-size:1.2rem; font-weight:800; }
.diskusi-header p { font-size:.82rem; opacity:.85; margin-top:4px; }
.diskusi-body { padding:16px; }
.diskusi-topik { background:linear-gradient(135deg,var(--purple-pale),#ede7f6); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px; border-left:4px solid var(--purple); }
.diskusi-topik h4 { font-family:var(--font-main); font-size:.92rem; font-weight:800; color:var(--purple); margin-bottom:4px; }
.diskusi-topik p { font-size:.83rem; color:var(--text); line-height:1.6; }
.diskusi-guide { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.diskusi-q-item { background:var(--white); border-radius:var(--radius-sm); padding:12px 14px; border-left:3px solid var(--purple); box-shadow:var(--shadow-sm); display:flex; gap:10px; align-items:flex-start; }
.diskusi-q-num { font-family:var(--font-main); font-size:1rem; font-weight:900; color:var(--purple); flex-shrink:0; min-width:24px; }
.diskusi-q-item p { font-size:.83rem; color:var(--text); line-height:1.55; }
.fasilitator-note { background:#fff8e1; border-radius:var(--radius-sm); padding:12px 14px; border:1.5px solid var(--yellow); margin-bottom:14px; }
.fasilitator-note h4 { font-family:var(--font-main); font-size:.82rem; font-weight:700; color:#856404; margin-bottom:4px; display:flex; align-items:center; gap:5px; }
.fasilitator-note p { font-size:.78rem; color:#5a4200; line-height:1.6; }
.diskusi-check { display:flex; align-items:center; gap:10px; background:var(--green-pale); border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer; transition:var(--tr); border:1.5px solid var(--green-light); margin-bottom:14px; }
.diskusi-check.done { background:#d4edda; border-color:var(--green); }
.diskusi-check input { display:none; }
.diskusi-check-box { width:24px; height:24px; border:2px solid var(--green); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.diskusi-check.done .diskusi-check-box { background:var(--green); }
.diskusi-check-label { font-family:var(--font-main); font-size:.85rem; font-weight:700; color:var(--green-dark); }
.diskusi-actions { padding:0 16px 8px; display:flex; flex-direction:column; gap:10px; }

/* ===== REWARD / SERTIFIKAT ===== */
.reward-wrap { padding:28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.cert-card { width:100%; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.15); }
.cert-header { padding:24px 20px 18px; color:#fff; }
.cert-header .cert-icon { font-size:3.5rem; margin-bottom:8px; }
.cert-header h3 { font-family:var(--font-main); font-size:1.3rem; font-weight:900; }
.cert-header p { font-size:.83rem; opacity:.85; margin-top:5px; }
.cert-body { background:var(--white); padding:18px 20px; }
.cert-name { font-family:var(--font-main); font-size:1.4rem; font-weight:900; color:var(--green-dark); margin-bottom:4px; }
.cert-group { font-size:.85rem; color:var(--text-sub); margin-bottom:14px; }
.cert-badge-row { display:flex; justify-content:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cert-badge-item { display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--green-pale); border-radius:12px; padding:10px 14px; border:2px solid var(--green-light); }
.cert-badge-icon { font-size:2rem; }
.cert-badge-name { font-family:var(--font-main); font-size:.7rem; font-weight:700; color:var(--green-dark); }
.cert-xp-banner { background:linear-gradient(135deg,var(--green),var(--yellow)); color:#fff; border-radius:var(--radius-sm); padding:12px 20px; display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-main); font-size:1.1rem; font-weight:800; }
.reward-msg { font-size:.88rem; color:var(--text-sub); line-height:1.6; }
.reward-actions { display:flex; gap:10px; width:100%; }

/* ===== CHALLENGES ===== */
#challenges-list { padding:16px; display:flex; flex-direction:column; gap:10px; }
.challenge-card { background:var(--white); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); border:1.5px solid var(--gray-light); display:flex; align-items:center; gap:12px; transition:var(--tr); }
.challenge-card:hover { border-color:var(--green-light); }
.challenge-card.done { opacity:.65; background:var(--gray-light); }
.ch-icon { font-size:1.8rem; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--green-pale); border-radius:12px; flex-shrink:0; }
.ch-info { flex:1; }
.ch-title { font-family:var(--font-main); font-size:.9rem; font-weight:700; color:var(--text); }
.ch-desc { font-size:.76rem; color:var(--text-sub); margin:3px 0; line-height:1.4; }
.ch-reward { font-size:.76rem; font-weight:700; color:var(--green-dark); display:flex; align-items:center; gap:4px; }
.ch-reward i { color:var(--yellow); }
.ch-sesi-tag { font-size:.65rem; background:var(--green-pale); color:var(--green-dark); padding:2px 7px; border-radius:99px; font-weight:700; display:inline-block; margin-top:3px; }
.btn-challenge { background:linear-gradient(135deg,var(--orange),var(--yellow-dark)); color:#fff; border:none; border-radius:var(--radius-sm); padding:8px 12px; font-family:var(--font-main); font-weight:700; font-size:.78rem; cursor:pointer; transition:var(--tr); white-space:nowrap; }
.btn-challenge:hover { transform:translateY(-2px); }
.ch-done-badge { background:#d4edda; color:var(--green-dark); font-size:.72rem; font-weight:700; padding:5px 9px; border-radius:99px; white-space:nowrap; }

/* ===== BADGES ===== */
.badges-grid { padding:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.badge-card { background:var(--white); border-radius:var(--radius); padding:16px 12px; text-align:center; box-shadow:var(--shadow-sm); border:2px solid var(--gray-light); transition:var(--tr); cursor:pointer; }
.badge-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.badge-card.earned { border-color:var(--yellow); background:linear-gradient(145deg,#fffbea,var(--white)); }
.badge-card.locked-badge { opacity:.5; filter:grayscale(.5); }
.badge-icon { font-size:2.4rem; margin-bottom:7px; }
.badge-name { font-family:var(--font-main); font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.badge-desc { font-size:.7rem; color:var(--text-sub); line-height:1.4; }
.badge-xp { font-size:.7rem; font-weight:700; color:var(--yellow-dark); margin-top:5px; }
.badge-earned-label { margin-top:7px; font-size:.68rem; font-weight:700; color:var(--yellow-dark); display:flex; align-items:center; justify-content:center; gap:3px; }
.badge-locked-label { margin-top:7px; font-size:.68rem; color:var(--gray); display:flex; align-items:center; justify-content:center; gap:3px; }

/* ===== LEADERBOARD ===== */
#leaderboard-content { padding:16px; }
.my-rank-card { background:linear-gradient(135deg,var(--green-dark),var(--green)); color:#fff; border-radius:var(--radius); padding:16px; margin-bottom:14px; display:flex; align-items:center; gap:14px; box-shadow:0 4px 16px rgba(26,107,60,.3); }
.my-rank-num { font-family:var(--font-main); font-size:2rem; font-weight:900; min-width:48px; text-align:center; }
.my-rank-info strong { font-family:var(--font-main); font-size:.98rem; font-weight:700; display:block; }
.my-rank-info span { font-size:.8rem; opacity:.85; }
.my-rank-xp { margin-left:auto; font-family:var(--font-main); font-size:1.05rem; font-weight:800; display:flex; align-items:center; gap:5px; }
.my-rank-xp i { color:var(--yellow); }
.lb-list { display:flex; flex-direction:column; gap:8px; }
.lb-item { background:var(--white); border-radius:var(--radius-sm); padding:11px 14px; display:flex; align-items:center; gap:11px; box-shadow:var(--shadow-sm); border:1.5px solid var(--gray-light); }
.lb-item.lb-me { border-color:var(--green); background:var(--green-pale); }
.lb-rank { font-family:var(--font-main); font-weight:800; font-size:.92rem; min-width:30px; text-align:center; }
.lb-avatar { font-size:1.5rem; width:36px; text-align:center; }
.lb-name { flex:1; }
.lb-name strong { font-family:var(--font-main); font-size:.87rem; display:block; color:var(--text); }
.lb-name span { font-size:.7rem; color:var(--text-sub); }
.lb-xp { font-family:var(--font-main); font-size:.83rem; font-weight:800; color:var(--green-dark); display:flex; align-items:center; gap:4px; }
.lb-xp i { color:var(--yellow); font-size:.78rem; }

/* ===== PROGRESS REKAP ===== */
#progress-content { padding:16px; }
.progress-intro { background:var(--green-pale); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px; font-size:.83rem; color:var(--text); line-height:1.6; }
.sesi-progress-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1.5px solid var(--gray-light); overflow:hidden; margin-bottom:12px; }
.spc-header { padding:12px 14px; display:flex; align-items:center; gap:10px; }
.spc-emoji { font-size:1.6rem; }
.spc-title { font-family:var(--font-main); font-size:.88rem; font-weight:700; color:var(--text); flex:1; }
.spc-status { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px; }
.spc-body { padding:0 14px 14px; display:flex; flex-direction:column; gap:6px; }
.spc-row { display:flex; align-items:center; justify-content:space-between; }
.spc-label { font-size:.76rem; color:var(--text-sub); }
.spc-val { font-family:var(--font-main); font-size:.9rem; font-weight:700; }
.spc-bar-wrap { flex:1; height:7px; background:var(--gray-light); border-radius:99px; overflow:hidden; margin:0 8px; }
.spc-bar-fill { height:100%; border-radius:99px; transition:width .6s ease; }
.spc-bar-pre  { background:var(--blue); }
.spc-bar-post { background:var(--green); }
.spc-diff { font-size:.78rem; font-weight:700; padding:2px 8px; border-radius:99px; }
.diff-up   { background:#d4edda; color:var(--green-dark); }
.diff-down { background:var(--red-pale); color:var(--red); }
.diff-same { background:var(--gray-light); color:var(--gray-dark); }

/* ===== PROFILE ===== */
#profile-content { padding-bottom:24px; }
.profile-header { background:linear-gradient(145deg,var(--green-dark),var(--green-light)); padding:28px 22px; text-align:center; color:#fff; }
.profile-avatar-big { font-size:4rem; margin-bottom:8px; }
.profile-header h2 { font-family:var(--font-main); font-size:1.35rem; font-weight:800; }
.profile-header p { font-size:.84rem; opacity:.85; margin-top:4px; }
.profile-level-badge { display:inline-block; background:var(--yellow); color:#5a3800; font-family:var(--font-main); font-weight:800; font-size:.84rem; padding:5px 18px; border-radius:99px; margin-top:10px; }
.profile-stats { display:flex; padding:14px 12px; gap:8px; }
.pstat { flex:1; background:var(--white); border-radius:var(--radius-sm); padding:12px 6px; text-align:center; box-shadow:var(--shadow-sm); border:1.5px solid var(--gray-light); }
.pstat strong { font-family:var(--font-main); font-size:1.1rem; color:var(--green-dark); font-weight:800; display:block; }
.pstat small { font-size:.65rem; color:var(--text-sub); }
.profile-section { padding:0 16px 10px; }
.profile-section h3 { font-family:var(--font-main); font-size:.93rem; font-weight:700; color:var(--green-dark); margin-bottom:10px; }
.profile-info-card { background:var(--white); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden; border:1.5px solid var(--gray-light); }
.pinfo-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--gray-light); }
.pinfo-row:last-child { border-bottom:none; }
.pinfo-row i { color:var(--green); font-size:.95rem; width:18px; text-align:center; }
.pinfo-row span { font-size:.83rem; color:var(--text-sub); flex:1; }
.pinfo-row strong { font-size:.85rem; font-weight:600; color:var(--text); }
.btn-logout { margin:14px 16px; background:var(--red-pale); color:var(--red); border:1.5px solid #f5c6cb; border-radius:var(--radius-sm); padding:12px; font-family:var(--font-main); font-weight:700; font-size:.88rem; cursor:pointer; width:calc(100% - 32px); display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); }
.btn-logout:hover { background:var(--red); color:#fff; }
.btn-admin-goto { margin:6px 16px 14px; background:linear-gradient(135deg,#1a6b3c,#28a745); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px; font-family:var(--font-main); font-weight:700; font-size:.88rem; cursor:pointer; width:calc(100% - 32px); display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--tr); box-shadow:0 3px 12px rgba(40,167,69,.35); }
.btn-admin-goto:hover { background:linear-gradient(135deg,#145a33,#1e7e34); transform:translateY(-1px); }

/* ===== ROLE SELECTOR ===== */
.role-selector { padding:18px 18px 6px; }
.role-label { font-size:.82rem; font-weight:700; color:var(--text-sub); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; text-align:center; }
.role-cards { display:flex; gap:12px; }
.role-card { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 10px; border-radius:var(--radius); border:2.5px solid var(--gray-light); background:var(--white); cursor:pointer; transition:var(--tr); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.role-card:hover { border-color:var(--green-light); background:var(--green-pale); transform:translateY(-2px); }
.role-card.active { border-color:var(--green); background:linear-gradient(135deg,#e8f5e9,#f0fff4); box-shadow:0 4px 16px rgba(40,167,69,.2); }
.role-icon { font-size:2rem; line-height:1; }
.role-name { font-family:var(--font-main); font-weight:800; font-size:.95rem; color:var(--text); }
.role-desc { font-size:.75rem; color:var(--text-sub); }
.role-card.active .role-name { color:var(--green-dark); }

/* ===== ADMIN LOGIN PANEL ===== */
.admin-login-header { text-align:center; margin-bottom:18px; padding-bottom:14px; border-bottom:2px dashed var(--gray-light); }
.admin-login-icon { font-size:2.8rem; line-height:1; margin-bottom:6px; }
.admin-login-header h3 { font-family:var(--font-main); font-size:1.15rem; font-weight:800; color:var(--green-dark); margin-bottom:4px; }
.admin-login-header p { font-size:.82rem; color:var(--text-sub); }
.password-field { position:relative; display:flex; align-items:center; }
.password-field input { flex:1; padding-right:44px; }
.btn-eye { position:absolute; right:0; top:0; height:100%; width:42px; background:none; border:none; cursor:pointer; color:var(--text-sub); font-size:.95rem; display:flex; align-items:center; justify-content:center; transition:color .2s; }
.btn-eye:hover { color:var(--green); }
.admin-demo-hint { background:linear-gradient(135deg,#e8f5e9,#f0fff4); border:1.5px solid var(--green-light); border-radius:var(--radius-sm); padding:10px 14px; font-size:.82rem; color:var(--green-dark); display:flex; align-items:center; gap:8px; }
.admin-demo-hint i { color:var(--green); flex-shrink:0; }
.btn-admin-login { background:linear-gradient(135deg,#1a6b3c,#28a745); color:#fff; border:none; border-radius:var(--radius-sm); padding:13px; font-family:var(--font-main); font-weight:800; font-size:.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:var(--tr); box-shadow:0 4px 14px rgba(40,167,69,.35); letter-spacing:.02em; }
.btn-admin-login:hover { background:linear-gradient(135deg,#145a33,#1e7e34); transform:translateY(-2px); box-shadow:0 6px 20px rgba(40,167,69,.45); }

/* ===== ADMIN MENU BUTTON (dashboard) ===== */
.menu-btn-admin { background:linear-gradient(135deg,#e8f5e9,#f0fff4) !important; border:1.5px solid var(--green-light) !important; }
.menu-btn-admin .menu-icon { background:linear-gradient(135deg,#1a6b3c,#28a745) !important; color:#fff !important; }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:11px 22px; border-radius:99px; font-family:var(--font-main); font-size:.86rem; font-weight:700; z-index:9998; white-space:nowrap; animation:toastIn .3s ease; box-shadow:0 4px 20px rgba(0,0,0,.25); max-width:90vw; text-align:center; }
.toast.success { background:var(--green); }
.toast.warning { background:var(--orange); }
.toast.error   { background:var(--red); }
@keyframes toastIn  { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(-50%) translateY(0)} to{opacity:0;transform:translateX(-50%) translateY(10px)} }

/* ===== MODALS ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9990; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .2s ease; }
.modal-box { background:var(--white); border-radius:var(--radius); padding:26px 22px; max-width:340px; width:100%; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.25); animation:scaleIn .3s ease; }
.badge-modal-box { border-top:5px solid var(--yellow); }
.badge-modal-icon { font-size:4rem; margin-bottom:8px; animation:resultBounce .5s ease; }
.bm-label { font-size:.78rem; font-weight:700; background:var(--yellow); color:#5a3800; display:inline-block; padding:3px 12px; border-radius:99px; margin-bottom:8px; }
.modal-box h3 { font-family:var(--font-main); font-size:1.2rem; font-weight:800; color:var(--green-dark); margin-bottom:6px; }
.modal-box p { font-size:.83rem; color:var(--text-sub); line-height:1.6; margin-bottom:14px; }
#bm-xp-bonus { font-family:var(--font-main); font-size:.88rem; font-weight:700; color:var(--green); margin-bottom:12px; }

@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes scaleIn     { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes resultBounce{ 0%{transform:scale(0)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* ===== RESPONSIVE ===== */
@media (max-width:360px) {
  .quick-stats { gap:5px; }
  .qstat { padding:10px 5px; }
  .badges-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .result-score-card { gap:6px; }
}