@media print {
            .no-print { display: none !important; }
            body { background: white !important; }
            .print-only { display: block !important; }
            .container { max-width: none !important; margin: 0 !important; padding: 20px !important; }
        }
        .print-only { display: none; }
        .badge-earned img { filter: none !important; }
        .badge-locked img { filter: grayscale(100%) !important; }
        .mission-complete { background: linear-gradient(45deg, #10b981, #34d399); }
        .mission-incomplete { background: #f3f4f6; }
        .badge-glow {
            animation: glow 2s ease-in-out infinite alternate;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        }
        @keyframes glow {
            from { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
            to { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 40px rgba(59, 130, 246, 0.6); }
        }


        /* --- Locks --- */
        .locked { opacity:.55; pointer-events:none; }
        .lock-hint { font-size:.75rem; color:#6b7280; } /* text-gray-500 */

  

/* --- Split by ChatGPT --- */


body.has-footer { padding-bottom: 72px; }
#footerNav button[aria-current="page"] { color: #1d4ed8; font-weight: 700; }


/* --- Split by ChatGPT --- */


  /* Scope pada skrin Learning sahaja */
  #learning [data-mission] { position: relative; }

  /* Kad dikunci: dim + tak boleh klik isi dalam */
  #learning .is-locked { filter: grayscale(0.3) brightness(0.9); }

  /* Overlay kaca buram + chip */
  #learning .lock-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    pointer-events: none;     /* biar butang tak boleh klik bila dikunci */
    opacity: 0; transition: opacity .2s ease;
  }
  #learning .is-locked .lock-overlay { opacity: 1; }

  /* Chip 🔒 */
  #learning .lock-chip{
    font-size: .9rem; font-weight: 600;
    padding: .35rem .6rem; border-radius: 999px;
    background: #f1f5f9; color: #0f172a; /* slate bg, navy text */
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(15,23,42,.08);
  }

  /* Tooltip kecil pada butang (optional) */
  #learning .hint[title]{ position: relative; }

  
  /* Bagi center forgot button*/
  .forgot-btn {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}
.forgot-btn:hover {
  color: #0056b3;
}

.cv-modal.hidden{display:none}
.cv-modal{position:fixed;inset:0;z-index:9999}
.cv-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.cv-dialog{
  position:absolute;inset:5% 6%;
  background:#fff;border-radius:10px;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden
}
.cv-head,.cv-foot{display:flex;gap:10px;align-items:center;padding:10px 12px;background:#f4f6fb}
.cv-head .spacer{flex:1}
#cvFrame{flex:1;border:0;width:100%}
.cv-foot{justify-content:flex-end}
.cv-foot .primary{background:#1f5eff;color:#fff;border:0;padding:8px 14px;border-radius:8px}

.page{
  width:210mm; min-height:297mm; margin:0 auto; background:#fff;
  border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08);
  position: relative; /* penting untuk pseudo-element */
}


/* jalur kiri sentiasa penuh setinggi .page */
.page::before{
  content:"";
  position:absolute; inset:0 auto 0 0;  /* top:0; right:auto; bottom:0; left:0 */
  width:32%;               /* ikut lebar sidebar */
  background: var(--navy);  /* warna sama seperti .side */
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  z-index:0;
}

/* pastikan kandungan di atas jalur */
.cv{display:flex; min-height:297mm; width:100%; position:relative; z-index:1;}
/* .side boleh kekal background yang sama atau dibuang – tak mengapa */


/* Pastikan halaman A4 tanpa margin printer */
@page { size: A4; margin: 0; }

/* === PRINT OVERRIDE (stabil, elak page kosong) === */
@media print {
  /* 1) Biarkan html/body AUTO height – INI KRITIKAL */
  html, body {
    width: auto;              /* atau biar default */
    height: auto !important;  /* <-- tukar dari 297mm ke AUTO */
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    overflow: visible !important;
  }

  /* 2) Kunci kanvas pada wrapper CV sahaja */
  .page {
    width: 210mm !important;
    min-height: 297mm !important;   /* guna min-height, bukan height */
    height: auto !important;        /* elak trigger page kosong */
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;   /* elak “terpotong” yang memaksa page baru */
    page-break-before: auto !important;
    page-break-after: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid;
  }

  /* 3) Jangan benarkan pecahan pelik dalam blok */
  .cv, .cv-section, section, article, h2, h3, ul, li {
    page-break-inside: avoid !important;
    break-inside: avoid;
  }

  /* 4) Matikan pseudo/hiasan yang boleh ubah metrik 1–2px */
  .page::before, .page::after { display: none !important; }

  /* 5) Sembunyikan elemen UI lain */
  nav, footer, .no-print, #footerNav, .actions, .toolbar { display: none !important; }
}









/* === Fallback print global (kalau ada gaya lain override) === */
@page { size: A4; margin: 0; }

@media print {
  html, body { height: auto !important; margin:0 !important; padding:0 !important; }
  .page {
    width:210mm !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
  }
  .cv { min-height:0 !important; height:auto !important; }
  .page::before, .page::after { display:none !important; }
  nav, footer, .no-print, #footerNav, .actions, .toolbar { display:none !important; }
}



/* ==== FONT FIX: kekalkan saiz font masa print ==== */
@media print {
  /* Kunci fon & saiz supaya DPI printer tak ubah */
  * {
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
    font-size: 13px !important;         /* 1-2px lebih kecil dari skrin */
    line-height: 1.25 !important;       /* kekalkan jarak baris tetap */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Pastikan heading tak besar sangat */
  h1 { font-size: 24px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  /* Buang scaling automatik Chrome */
  html { zoom: 1 !important; }
}

@media print {
  #cv-root { transform: scale(0.97); transform-origin: top left; }
}



.theme-btn{
  width:28px; height:28px; border-radius:50%;
  border:2px solid #fff; cursor:pointer;
  box-shadow:0 0 3px rgba(0,0,0,.3);
}
.theme-btn.selected{
  outline:3px solid #ffd700;
}