/* ═══════════════════════════════════════════
   fikcentX v14 — Upgrade Styles
   Learning Academy, Signup Gate, Quiz, Journal Edit
   ═══════════════════════════════════════════ */

/* ─── SIGNUP GATE ────────────────────────── */
.signup-gate-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:16px; opacity:0; transition:opacity 0.3s ease;
}
.signup-gate-overlay.visible { opacity:1; }
.signup-gate-modal {
  background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--r-lg); max-width:460px; width:100%;
  padding:36px 28px; position:relative; overflow:hidden;
  animation: modalSlideUp 0.4s ease;
}
.signup-gate-modal.compact { max-width:380px; padding:28px 24px; }
.signup-gate-modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--cyan), var(--green));
}
@keyframes modalSlideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.signup-gate-header { text-align:center; margin-bottom:20px; }
.signup-gate-icon { font-size:40px; margin-bottom:12px; }
.signup-gate-header h2 { font-size:22px; font-weight:800; letter-spacing:-1px; margin-bottom:6px; }
.signup-gate-header p { color:var(--t-60); font-size:13px; font-family:var(--font-data); line-height:1.6; }

.signup-gate-features {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-bottom:20px; padding:14px; background:var(--bg-2);
  border-radius:var(--r-sm); border:1px solid var(--border-0);
}
.sg-feature {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-data); font-size:11px; color:var(--t-70);
}
.sg-check { color:var(--green); font-weight:700; font-size:12px; }

.signup-gate-actions { margin-bottom:16px; }
.signup-gate-skip {
  display:block; width:100%; text-align:center;
  margin-top:12px; background:none; border:none;
  color:var(--t-30); font-family:var(--font-data); font-size:11px;
  cursor:pointer; padding:6px;
}
.signup-gate-skip:hover { color:var(--t-60); text-decoration:underline; }

.signup-gate-trust {
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  font-family:var(--font-data); font-size:10px; color:var(--t-30);
}

/* ─── LEARN PAGE — Tabs ──────────────────── */
.learn-tabs {
  display:flex; gap:6px; margin-bottom:20px; overflow-x:auto;
  padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.learn-tab {
  padding:8px 16px; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--border-0);
  color:var(--t-60); font-family:var(--font-data); font-size:11px;
  font-weight:600; cursor:pointer; white-space:nowrap;
  transition:all 0.2s;
}
.learn-tab:hover { border-color:var(--border-2); color:var(--t-80); }
.learn-tab.active {
  background:var(--blue-dim); border-color:var(--blue);
  color:var(--blue);
}

/* ─── LEARN — Progress Bar on Cards ──────── */
.learn-progress-bar {
  width:100%; height:4px; background:var(--bg-3);
  border-radius:2px; margin-top:10px; overflow:hidden;
}
.learn-progress-fill {
  height:100%; background:linear-gradient(90deg, var(--blue), var(--green));
  border-radius:2px; transition:width 0.4s ease;
}
.learn-progress-text {
  font-family:var(--font-data); font-size:9px; color:var(--t-30);
  display:block; margin-top:3px;
}

/* ─── COURSE DETAIL VIEW ─────────────────── */
.course-header { margin-bottom:24px; }
.course-lessons { margin-top:20px; }

.course-lesson-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--bg-2);
  border:1px solid var(--border-0); border-radius:var(--r-sm);
  margin-bottom:8px; cursor:pointer; transition:all 0.2s;
}
.course-lesson-item:hover {
  border-color:var(--blue); background:var(--bg-3);
  transform:translateX(4px);
}
.course-lesson-item.completed { border-left:3px solid var(--green); }
.course-lesson-item.completed .lesson-num {
  background:var(--green-dim); color:var(--green);
}

.lesson-num {
  width:32px; height:32px; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--border-1);
  display:grid; place-items:center;
  font-family:var(--font-data); font-size:12px; font-weight:700;
  color:var(--t-60); flex-shrink:0;
}
.lesson-info { flex:1; min-width:0; }
.lesson-info h4 {
  font-size:13px; font-weight:700; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lesson-info span { font-family:var(--font-data); font-size:10px; color:var(--t-30); }
.lesson-arrow { color:var(--t-20); font-size:14px; font-weight:600; }

/* ─── LESSON NAVIGATION ──────────────────── */
.lesson-nav {
  display:flex; justify-content:space-between; gap:12px;
  margin-top:32px; padding-top:20px;
  border-top:1px solid var(--border-0);
}
.lesson-nav .btn-ghost { font-size:12px; }

/* ─── QUIZ ────────────────────────────────── */
.quiz-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.quiz-modal {
  background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--r-lg); max-width:520px; width:100%;
  padding:28px; position:relative;
  animation: modalSlideUp 0.3s ease;
}
.quiz-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px;
}
.quiz-progress {
  font-family:var(--font-data); font-size:10px;
  color:var(--t-40); text-transform:uppercase; letter-spacing:0.5px;
}
.quiz-close {
  background:var(--bg-3); border:1px solid var(--border-1);
  color:var(--t-60); width:28px; height:28px; border-radius:50%;
  cursor:pointer; font-size:14px; display:grid; place-items:center;
}
.quiz-question {
  font-size:16px; font-weight:700; line-height:1.5;
  margin-bottom:20px; letter-spacing:-0.3px;
}
.quiz-options { display:flex; flex-direction:column; gap:8px; }
.quiz-opt {
  padding:14px 16px; background:var(--bg-2);
  border:1px solid var(--border-1); border-radius:var(--r-sm);
  color:var(--t-80); font-family:var(--font-ui); font-size:13px;
  font-weight:600; cursor:pointer; text-align:left;
  transition:all 0.2s;
}
.quiz-opt:hover:not(:disabled) { border-color:var(--blue); background:var(--bg-3); }
.quiz-opt.correct {
  border-color:var(--green); background:var(--green-dim);
  color:var(--green); animation: correctPulse 0.4s ease;
}
.quiz-opt.wrong {
  border-color:var(--red); background:var(--red-dim);
  color:var(--red); animation: wrongShake 0.4s ease;
}
@keyframes correctPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
@keyframes wrongShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.quiz-result { text-align:center; padding:20px 0; }
.quiz-result-icon { font-size:48px; margin-bottom:12px; }
.quiz-score {
  font-family:var(--font-data); font-size:48px; font-weight:800;
  background:linear-gradient(135deg, var(--cyan), var(--green));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin:8px 0;
}

/* ─── GLOSSARY ────────────────────────────── */
.glossary-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:8px;
}
.glossary-item {
  padding:12px 14px; background:var(--bg-2);
  border:1px solid var(--border-0); border-radius:var(--r-sm);
  transition:border-color 0.2s;
}
.glossary-item:hover { border-color:var(--border-2); }
.glossary-item dt {
  font-family:var(--font-data); font-size:12px; font-weight:700;
  color:var(--cyan); margin-bottom:4px;
}
.glossary-item dd {
  font-family:var(--font-data); font-size:11px; color:var(--t-50);
  line-height:1.6; margin:0;
}

/* ─── JOURNAL EDIT BUTTON ─────────────────── */
.journal-edit {
  background:none; border:none; cursor:pointer;
  font-size:12px; padding:2px 4px; opacity:0.5;
  transition:opacity 0.2s;
}
.journal-edit:hover { opacity:1; }

/* ─── FORGOT PASSWORD ─────────────────────── */
.fp-instructions { margin-bottom:20px; }
.fp-step {
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; background:var(--bg-2);
  border:1px solid var(--border-0); border-radius:var(--r-sm);
  margin-bottom:6px; font-family:var(--font-data); font-size:12px;
  color:var(--t-70);
}
.fp-step-num {
  width:28px; height:28px; border-radius:50%;
  background:var(--blue-dim); border:1px solid rgba(59,125,255,0.2);
  display:grid; place-items:center;
  font-family:var(--font-data); font-size:11px; font-weight:700;
  color:var(--blue); flex-shrink:0;
}
.fp-note {
  text-align:center; padding:14px;
  background:var(--bg-2); border:1px solid var(--border-0);
  border-radius:var(--r-sm); margin-top:16px;
  font-family:var(--font-data); font-size:11px; color:var(--t-40);
}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width:600px) {
  .signup-gate-features { grid-template-columns:1fr; }
  .signup-gate-modal { padding:24px 20px; }
  .signup-gate-trust { flex-direction:column; align-items:center; gap:6px; }
  .learn-tabs { gap:4px; }
  .learn-tab { padding:6px 12px; font-size:10px; }
  .quiz-modal { padding:20px; }
  .glossary-grid { grid-template-columns:1fr; }
  .lesson-nav { flex-direction:column; }
}

/* ═══════════════════════════════════════════
   EA LICENSE & DOWNLOAD COMPONENTS (v14.2)
   ═══════════════════════════════════════════ */

/* Download Section on Bot Card */
.ea-download-section{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-0)}
.ea-locked-msg{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-3);border-radius:var(--r-md);font-family:var(--font-data);font-size:11px;color:var(--t-40)}
.ea-locked-msg svg{flex-shrink:0;color:var(--amber)}
.ea-upgrade-btn{margin-left:auto;background:linear-gradient(135deg,var(--amber),#ff9500);color:#000;border:none;padding:5px 14px;border-radius:var(--r-sm);font-family:var(--font-data);font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s}
.ea-upgrade-btn:hover{transform:scale(1.05);box-shadow:0 2px 12px rgba(255,153,0,0.3)}

/* Unlocked State */
.ea-unlocked{display:flex;flex-direction:column;gap:10px}
.ea-key-display{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(135deg,rgba(0,255,136,0.05),rgba(0,200,255,0.05));border:1px solid rgba(0,255,136,0.15);border-radius:var(--r-md)}
.ea-key-label{font-family:var(--font-data);font-size:9px;color:var(--t-40);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.ea-key-value{font-family:var(--font-data);font-size:14px;font-weight:700;color:var(--green);letter-spacing:1px;flex:1}
.ea-copy-btn{background:var(--bg-3);border:1px solid var(--border-0);border-radius:var(--r-sm);padding:5px 8px;cursor:pointer;color:var(--t-60);transition:all .2s;display:flex;align-items:center}
.ea-copy-btn:hover{background:var(--bg-2);color:var(--t-100);border-color:var(--border-2)}

/* Download Buttons */
.ea-download-btns{display:flex;gap:8px}
.ea-dl-btn{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:10px 16px;border-radius:var(--r-md);font-family:var(--font-data);font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s;border:1px solid transparent}
.ea-dl-btn.mt4{background:linear-gradient(135deg,rgba(37,99,235,0.15),rgba(37,99,235,0.05));color:var(--blue);border-color:rgba(37,99,235,0.2)}
.ea-dl-btn.mt4:hover{background:linear-gradient(135deg,rgba(37,99,235,0.25),rgba(37,99,235,0.1));transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.2)}
.ea-dl-btn.mt5{background:linear-gradient(135deg,rgba(0,200,255,0.15),rgba(0,200,255,0.05));color:var(--cyan);border-color:rgba(0,200,255,0.2)}
.ea-dl-btn.mt5:hover{background:linear-gradient(135deg,rgba(0,200,255,0.25),rgba(0,200,255,0.1));transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,200,255,0.2)}

/* Setup Hint */
.ea-setup-hint{display:flex;align-items:center;gap:6px;font-family:var(--font-data);font-size:10px;color:var(--t-40);padding:6px 10px;background:var(--bg-3);border-radius:var(--r-sm)}
.ea-setup-hint svg{flex-shrink:0}

/* Setup Guide Modal */
.ea-setup-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.ea-setup-modal-content{background:var(--bg-1);border:1px solid var(--border-1);border-radius:var(--r-xl);padding:24px;max-width:600px;width:100%;max-height:85vh;overflow-y:auto}
.ea-setup-steps{display:flex;flex-direction:column;gap:16px}
.ea-step{display:flex;gap:14px;align-items:flex-start}
.ea-step-num{width:28px;height:28px;min-width:28px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#000;font-family:var(--font-data);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ea-step-title{font-size:13px;font-weight:700;margin-bottom:4px}
.ea-step-desc{font-family:var(--font-data);font-size:11px;color:var(--t-60);line-height:1.6}
.ea-step-desc code{background:var(--bg-3);padding:1px 6px;border-radius:3px;font-size:10px;color:var(--cyan)}

/* Dashboard EA License Section */
.ea-license-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.ea-license-grid{grid-template-columns:1fr}}
.ea-license-item{padding:10px 14px;background:var(--bg-3);border-radius:var(--r-md)}
.ea-license-label{font-family:var(--font-data);font-size:9px;color:var(--t-40);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.ea-license-val{font-family:var(--font-data);font-size:13px;font-weight:600;color:var(--t-90)}
.ea-license-key-row{display:flex;align-items:center;gap:8px}
.ea-license-key{font-family:var(--font-data);font-size:14px;font-weight:700;color:var(--green);letter-spacing:1px;background:none;padding:0;border:none}

/* ═══════════════════════════════════════════
   v14.3 — Current Plan Indicator on Pricing
   ═══════════════════════════════════════════ */
.current-plan-indicator { text-align:center; margin-bottom:8px }
.cpi-badge { display:inline-block; padding:6px 14px; border-radius:20px; font-family:var(--font-data); font-size:11px; font-weight:700; letter-spacing:0.5px }
.cpi-badge.active { background:linear-gradient(135deg,rgba(0,230,138,0.15),rgba(0,230,138,0.05)); color:var(--green); border:1px solid rgba(0,230,138,0.3) }
.cpi-badge.honorary { background:linear-gradient(135deg,rgba(255,193,7,0.18),rgba(255,59,92,0.08)); color:var(--amber); border:1px solid rgba(255,193,7,0.3); animation:honoraryGlow 3s ease-in-out infinite }
@keyframes honoraryGlow { 0%,100%{box-shadow:0 0 8px rgba(255,193,7,0.1)} 50%{box-shadow:0 0 16px rgba(255,193,7,0.25)} }
.price-card.is-current-plan { border:2px solid var(--green)!important; box-shadow:0 0 20px rgba(0,230,138,0.1) }
.price-card.is-current-plan .price-top-bar { background:linear-gradient(90deg,var(--green),var(--cyan))!important }

/* Honorary Plan Badge (reusable) */
.plan-badge.honorary { background:linear-gradient(135deg,rgba(255,193,7,0.2),rgba(255,59,92,0.1)); color:var(--amber); border:1px solid rgba(255,193,7,0.3) }

/* ═══════════════════════════════════════════
   v14.3 — Enhanced PWA Install Strip
   ═══════════════════════════════════════════ */
.global-pwa-strip { display:flex; align-items:center; gap:12px; padding:10px 20px; background:linear-gradient(135deg,rgba(59,125,255,0.1),rgba(0,212,255,0.06)); border-bottom:1px solid rgba(59,125,255,0.15); font-family:var(--font-data); font-size:12px; position:relative; z-index:100; transition:opacity 0.3s,transform 0.3s }
.gpwa-icon { font-size:20px; flex-shrink:0 }
.gpwa-text { flex:1 }
.gpwa-text strong { color:var(--t-90); font-weight:700; font-size:13px }
.gpwa-text span { color:var(--t-50); font-size:11px; margin-left:6px }
.gpwa-actions { display:flex; gap:6px; align-items:center; flex-shrink:0 }
.gpwa-btn { padding:6px 16px; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; border:none; border-radius:6px; font-family:var(--font-data); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.2s }
.gpwa-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(59,125,255,0.3) }
.gpwa-guide { padding:6px 12px; background:transparent; color:var(--blue); border:1px solid rgba(59,125,255,0.3); border-radius:6px; font-family:var(--font-data); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s }
.gpwa-guide:hover { background:rgba(59,125,255,0.08) }
.gpwa-close { background:none; border:none; color:var(--t-40); font-size:14px; cursor:pointer; padding:4px; line-height:1 }
.gpwa-close:hover { color:var(--t-80) }
@media(max-width:600px) {
  .global-pwa-strip { flex-wrap:wrap; gap:8px; padding:8px 14px }
  .gpwa-text span { display:block; margin:2px 0 0 }
}

/* ═══════════════════════════════════════════
   SECURITY — EMAIL VERIFICATION & 2FA (v14.4)
   ═══════════════════════════════════════════ */

/* Security Status Row */
.security-status-row { display:flex; align-items:flex-start; gap:12px; padding:4px 0 }
.security-status-icon { font-size:24px; flex-shrink:0; margin-top:2px }
.security-status-label { font-family:var(--font-ui); font-size:13px; font-weight:700; color:var(--t-90); margin-bottom:2px }
.security-status-sub { font-family:var(--font-data); font-size:11px; color:var(--t-40); line-height:1.5 }

/* Verification Code Inputs */
.verif-code-wrap { padding:16px 0 }
.verif-code-inputs {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;
}
.verif-digit {
  width:44px; height:52px; text-align:center; font-family:var(--font-data);
  font-size:22px; font-weight:800; color:var(--t-100); letter-spacing:0;
  background:var(--bg-3); border:2px solid var(--border-1); border-radius:10px;
  outline:none; transition:all 0.2s; caret-color:var(--blue);
}
.verif-digit:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-dim); background:var(--bg-2) }
.verif-digit.filled { border-color:var(--cyan); background:rgba(0,255,200,0.04) }
.verif-dash { font-family:var(--font-data); font-size:20px; color:var(--t-20); margin:0 2px }
.verif-actions { display:flex; gap:8px; flex-direction:column }

/* TOTP QR Setup */
.totp-qr-wrap { text-align:center; padding:20px 0 }
.totp-qr-img { width:180px; height:180px; border-radius:12px; border:2px solid var(--border-1); background:#fff; padding:8px }
.totp-manual-key { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px }
.totp-manual-label { font-family:var(--font-data); font-size:10px; color:var(--t-30); text-transform:uppercase; letter-spacing:0.5px }
.totp-secret-code {
  font-family:var(--font-data); font-size:13px; color:var(--cyan); font-weight:700;
  background:var(--bg-3); padding:6px 12px; border-radius:6px; border:1px solid var(--border-1);
  letter-spacing:2px; word-break:break-all;
}

/* Backup Codes */
.backup-codes-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px;
  padding:14px; background:var(--bg-2); border:1px solid var(--border-0); border-radius:var(--r-md);
}
.backup-code-item {
  font-family:var(--font-data); font-size:13px; font-weight:700; color:var(--t-80);
  text-align:center; padding:8px; background:var(--bg-3); border-radius:6px;
  letter-spacing:1px; border:1px solid var(--border-1);
}

/* Email Verification Banner (top of dashboard) */
.email-verif-banner {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:linear-gradient(135deg,rgba(255,165,0,0.08),rgba(255,165,0,0.03));
  border:1px solid rgba(255,165,0,0.2); border-radius:var(--r-md);
  margin-bottom:14px; font-family:var(--font-data); font-size:12px; color:var(--amber);
}
.email-verif-banner .evb-icon { font-size:18px; flex-shrink:0 }
.email-verif-banner .evb-text { flex:1; color:var(--t-60) }
.email-verif-banner .evb-text strong { color:var(--amber); font-weight:700 }
.email-verif-banner .evb-btn {
  padding:5px 14px; background:var(--amber); color:#0a0e17; border:none; border-radius:6px;
  font-family:var(--font-data); font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0;
}

@media (max-width:600px) {
  .verif-digit { width:38px; height:46px; font-size:18px }
  .verif-code-inputs { gap:5px }
  .backup-codes-grid { grid-template-columns:1fr }
  .totp-qr-img { width:150px; height:150px }
  .email-verif-banner { flex-direction:column; text-align:center }
}