* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100vh; overflow: hidden; font-family: 'Outfit', sans-serif; color: #fff; background: #0a0a0f; }

/* ── BACKGROUND ── */
.orb-container { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #0a0a0f; }
.orb-container::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.85); z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.2; animation: float 25s ease-in-out infinite; z-index: 2; }
.orb-1 { width: 800px; height: 800px; background: radial-gradient(circle, #BC244A, #7a00ff); top: -20%; right: -15%; }
.orb-2 { width: 700px; height: 700px; background: radial-gradient(circle, #00fff5, #0033ff); bottom: -15%; left: -10%; animation-delay: -7s; }
.orb-3 { width: 600px; height: 600px; background: radial-gradient(circle, #e9337e, #550033); top: 40%; left: 35%; animation-delay: -14s; }
@keyframes float { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(40px,-40px) scale(1.05); } 66% { transform:translate(-30px,30px) scale(0.95); } }

/* ── LAYOUT ── */
.app-wrapper { display: flex; height: 100vh; position: relative; z-index: 10; width: 100%; }

/* ── SIDEBAR ── */
.sidebar { width: 280px; background: rgba(10,10,15,0.6); backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; padding: 2rem 0; overflow-y: auto; flex-shrink: 0; }
.brand { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 0.2rem; 
    margin-bottom: 2rem; 
    padding: 0 1.5rem; 
}
.logo-placeholder { font-size: 2rem; font-weight: 900; color: #ff006e; letter-spacing: 4px; }
.brand span { font-size: 0.9rem; letter-spacing: 2px; padding: 0 1.5rem; color: rgba(255,255,255,0.5); }
.nav-chapter-title {
  color: #ff006e;
  font-size: 0.85rem;
  font-weight: 400;
  margin: 1rem 0 0.2rem 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0 1rem;
  border-radius: 6px;
  transition: background 0.2s;
  user-select: none;
}
.nav-chapter-title:hover {
  background: rgba(255, 0, 110, 0.08);
}
/* Nav item — flexbox, tighter sizing */
.nav-item {
  color: #fff;
  padding: 0.3rem 1rem 0.3rem 1.3rem;
  cursor: pointer;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
}
.nav-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-exam-badge {
  flex-shrink: 0;
  text-transform: uppercase;
  font-size: 0.80rem;
  font-weight: 700;
  color: #149145;
  padding: 0.1rem 0.20rem;
}
.nav-num {
  font-size: 0.35rem;
  font-weight: 400;
  flex-shrink: 0;
  background: rgba(196, 108, 240, 0.12) !important; /* Forces the subtle purple bg */
  border: 1px solid #69288a !important;             /* Forces the purple border */
  border-radius: 4px;
  padding: 0.1rem 0.20rem;
  letter-spacing: 0.2px;
}
.nav-num, 
.nav-num * {
  color: #8d3eb5 !important; /* Keeps the text purple */
}
.nav-exam-label {
  background: rgba(255,204,0,0.1) !important;
  color: #ffcc00 !important;
  border-color: rgba(255,204,0,0.3) !important;
}
/* Unit exam row — yellow text */
.nav-unit-exam .nav-item-text { color: rgba(255,204,0,0.8); }
.nav-unit-exam:hover .nav-item-text { color: #ffcc00; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(3,209,255,0.15);}

/* ── MAIN CONTENT ── */
.main-content { flex: 1; overflow-y: auto; padding: 3rem 4rem; }
.content-container { max-width: 1400px; margin: 0 auto; }

/* ── PAGE HEADER ── */
h1 { font-size: 1.55rem; font-weight: 300; color: #fff; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 1rem;}
.intro-box { background: rgba(255,0,110,0.1); padding: 1.25rem 1.5rem; border-radius: 12px; border: 1px solid rgba(255,0,110,0.2); color: #fff; margin-bottom: 2.5rem; font-size: 1rem; line-height: 1.6; }
/* ── SECTION LABEL PILLS ── */
.section-label { display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 4px; margin-bottom: 0.75rem; margin-top: 0.25rem; }
.section-label.pink   { background: rgba(255,0,110,0.2);   color: #ff006e; }
.section-label.cyan   { background: rgba(0,255,245,0.12);  color: #00fff5; }
.section-label.gold   { background: rgba(255,204,0,0.15);  color: #ffcc00; }
.section-label.green  { background: rgba(0,255,100,0.12);  color: #00ff64; }
.section-label.purple { background: rgba(180,100,255,0.15);color: #c87aff; }
.section-label.general { background: rgba(255,119,0,0.15); color: #ff7700; }

/* ── VOCAB CARDS ── */
.vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0.75rem 0 1.5rem; }
.vocab-grid.single { grid-template-columns: 1fr; }
.vocab-grid.triple { grid-template-columns: 1fr 1fr 1fr; }
.vocab-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid #ff006e; border-radius: 10px; padding: 0.9rem 1.1rem; }
.vocab-card .term { color: #ff006e; font-weight: 700; font-size: 1rem; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 8px; }
.vocab-card .def  { color: rgba(255,255,255,0.72); font-size: 1rem; line-height: 1.55; }
.vocab-card.cyan-card   { border-left-color: #00fff5; }
.vocab-card.cyan-card   .term { color: #00fff5; }
.vocab-card.gold-card   { border-left-color: #ffcc00; }
.vocab-card.gold-card   .term { color: #ffcc00; }
.vocab-card.green-card  { border-left-color: #00ff64; }
.vocab-card.green-card  .term { color: #00ff64; }
.vocab-card.purple-card { border-left-color: #c87aff; }
.vocab-card.purple-card .term { color: #c87aff; }

/* ── CALLOUT BOXES ── */
.callout { border-radius: 12px; padding: 1rem 1.3rem; margin: 1.25rem 0; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.8); }
.callout.exam-tip  { background: rgba(255,204,0,0.07);    border: 1px solid rgba(255,204,0,0.25);    border-left: 4px solid #ffcc00; }
.callout.analogy   { background: rgba(200,122,255,0.07);  border: 1px solid rgba(200,122,255,0.2);   border-left: 4px solid #c87aff; }
.callout.warning   { background: rgba(255,80,80,0.07);    border: 1px solid rgba(255,80,80,0.2);     border-left: 4px solid #ff5050; }
.callout.fun-fact  { background: rgba(0,255,100,0.06);    border: 1px solid rgba(0,255,100,0.2);     border-left: 4px solid #00ff64; }
.callout.general  { background: rgba(255,119,0,0.07);   border: 1px solid rgba(255,119,0,0.25); }
.callout-head { font-weight: 800; display: block; margin-bottom: 0.3rem; font-size: 0.88rem; letter-spacing: 1.5px; text-transform: uppercase; }
.callout.exam-tip  .callout-head { color: #ffcc00; }
.callout.analogy   .callout-head { color: #c87aff; }
.callout.warning   .callout-head { color: #ff5050; }
.callout.fun-fact  .callout-head { color: #00ff64; }
.callout.general  .callout-head { color: #ff7700; }
.callout.magenta  { background: rgba(255,0,110,0.07);  border: 1px solid rgba(255,0,110,0.25); border-left: 4px solid #ff006e; }
.callout.magenta  .callout-head { color: #ff006e; }

/* ── COMPARE BOXES ── */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0.75rem 0 1.5rem; }
.compare-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.1rem 1.3rem; }
.compare-box h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }
.compare-box ul { padding-left: 1.1rem; }
.compare-box li { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.75; }
.compare-box.vs-a { border-top: 2px solid #00fff5; }
.compare-box.vs-a h4 { color: #00fff5; }
.compare-box.vs-b { border-top: 2px solid #ff006e; }
.compare-box.vs-b h4 { color: #ff006e; }

/* ── DIAGRAM BOXES ── */
.diagram { background: rgba(8,8,18,0.9); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 1.5rem; margin: 1rem 0 1.5rem; text-align: center; }
.diagram-label { font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 1.1rem; }

/* Packet visual */
.packet-visual { display: flex; border-radius: 8px; overflow: hidden; margin: 0.5rem auto; max-width: 520px; }
.packet-part { padding: 0.65rem 0.5rem; font-size: 0.8rem; font-weight: 700; text-align: center; }
.packet-part.hdr  { background: rgba(255,0,110,0.25); border: 1px solid rgba(255,0,110,0.5); color: #ff006e; flex: 0 0 140px; font-size: 0.85rem; line-height: 1.4; }
.packet-part.body { background: rgba(0,255,245,0.08); border: 1px solid rgba(0,255,245,0.2); color: #00fff5; flex: 1; }

/* Binary visual */
.binary-row  { display: flex; justify-content: center; gap: 6px; margin: 0.4rem 0; flex-wrap: wrap; }
.bit         { width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 900; }
.bit.one     { background: rgba(255,0,110,0.2); border: 2px solid #ff006e; color: #ff006e; }
.bit.zero    { background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.25); }
.bit-labels  { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bit-lbl     { width: 46px; font-size: 0.65rem; color: rgba(255,255,255,0.3); text-align: center; }

/* Search visual */
.search-visual { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0.75rem 0; }
.s-cell { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }
.s-cell.found { background: rgba(0,255,100,0.2); border-color: #00ff64; color: #00ff64; }
.s-cell.eliminated { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); color: rgba(255,255,255,0.15); }
.s-cell.mid { background: rgba(255,204,0,0.2); border-color: #ffcc00; color: #ffcc00; }

/* Truth table */
.truth-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.5rem auto; max-width: 400px; }
.truth-table th { background: rgba(255,0,110,0.15); color: #ff006e; padding: 0.5rem 1.2rem; font-weight: 700; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.truth-table td { padding: 0.5rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: center; }
.truth-table .t { color: #00ff64; font-weight: 700; }
.truth-table .f { color: #ff5050; font-weight: 700; }

/* Encrypt flow */
.encrypt-flow { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0; }
.encrypt-box  { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.85rem; text-align: center; color: rgba(255,255,255,0.75); min-width: 90px; }
.encrypt-box.key-box { background: rgba(255,204,0,0.1); border-color: rgba(255,204,0,0.3); color: #ffcc00; }
.encrypt-box.plain   { background: rgba(0,255,245,0.08); border-color: rgba(0,255,245,0.25); color: #00fff5; }
.encrypt-box.cipher  { background: rgba(255,0,110,0.1);  border-color: rgba(255,0,110,0.3); color: #ff006e; }
.encrypt-arrow { color: rgba(255,255,255,0.3); font-size: 1.1rem; }

/* Speedup bar */
.time-bar-wrap { margin: 0.6rem 0; }
.time-bar-label { font-size: 0.9rem; color: rgba(255,255,255,0.5); margin-bottom: 0.25rem; display: flex; justify-content: space-between; }
.time-bar { height: 28px; border-radius: 6px; display: flex; align-items: center; padding: 0 0.75rem; font-size: 0.8rem; font-weight: 700; }
.time-bar.seq { background: rgba(255,0,110,0.3); border: 1px solid #ff006e; color: #ff006e; width: 100%; }
.time-bar.par { background: rgba(0,255,100,0.2); border: 1px solid #00ff64; color: #00ff64; }

/* Content block spacing */
.content-block { margin-bottom: 2.25rem; }

/* ── QUIZ ── */
.quiz-section { background: rgba(255,255,255,0.025); padding: 2rem; border-radius: 16px; margin-top: 3rem; border: 1px solid rgba(255,255,255,0.06); }
.quiz-section h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.6rem; font-weight: 300;}
.option-btn { width: 100%; text-align: left; padding: 0.85rem 1.1rem; margin-bottom: 0.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); cursor: pointer; border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: 0.9rem; transition: 0.15s; }
.option-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.option-btn.correct { background: rgba(0,255,100,0.15); border-color: #00ff64; color: #00ff64; }
.option-btn.wrong   { background: rgba(255,80,80,0.15);  border-color: #ff5050; color: #ff5050; }
.option-btn:disabled { cursor: default; }
.action-btn {
  background: transparent;
  border: 1px solid rgba(255,0,110,0.5);
  color: #ff006e;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: 0.2s;
}
.action-btn:hover {
  background: rgba(255,0,110,0.08);
  border-color: #ff006e;
}
/* ── PRACTICE TEST NAV BUTTON ── */
.practice-test-section { margin-top: auto; padding-top: 1.5rem; padding-left: 1.5rem;padding-right: 1.5rem;border-top: 1px solid rgba(255,255,255,0.06); }
.practice-test-nav { width: 100%; background: linear-gradient(135deg, rgba(255,0,110,0.2), rgba(188,36,74,0.2)); border: 1px solid rgba(255,0,110,0.3); color: #ff006e; padding: 0.75rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 700; font-family: 'Outfit', sans-serif; font-size: 0.9rem; transition: 0.2s; letter-spacing: 0.5px; }
.practice-test-nav:hover { background: linear-gradient(135deg, rgba(255,0,110,0.35), rgba(188,36,74,0.35)); transform: translateY(-1px); }

/* ── NAV Q BADGE ── */
.nav-q-badge { background: rgba(255,0,110,0.15); color: #ff006e; font-size: 0.75rem; font-weight: 400; padding: 0.15rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle; }

/* ── QUIZ LAUNCH ROW ── */
.quiz-launch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
.quiz-launch-option { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.25rem; }
.quiz-launch-option.quiz-launch-ap { border-color: rgba(255,204,0,0.2); background: rgba(255,204,0,0.04); }
.ql-label { font-size: 0.92rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ff006e; }
.ql-label.ap-label { color: #ffcc00; }
.ql-desc { color: rgba(255,255,255,0.5); font-size: 0.92rem; margin: 0.4rem 0 1rem; }
.ap-btn { background: linear-gradient(135deg, #ffcc00, #cc9900) !important; color: #000 !important; }

/* ── QUESTION LAYOUT ── */
.q-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.q-mode-badge { font-size: 0.92rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ff006e; background: rgba(255,0,110,0.12); padding: 0.2rem 0.6rem; border-radius: 4px; }
.q-progress-text { font-size: 1rem; color: rgba(255,255,255,0.4); }
.q-progress-bar { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; margin-bottom: 1.5rem; overflow: hidden; }
.q-progress-fill { height: 100%; background: linear-gradient(90deg, #ff006e, #00fff5); border-radius: 2px; transition: width 0.4s ease; }
.q-context { background: rgba(0,255,245,0.05); border: 1px solid rgba(0,255,245,0.15); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.6; }
.q-stem { font-size: 1.1rem; font-weight: 600; line-height: 1.55; margin-bottom: 1.1rem; color: #fff; }
.multi-note { background: rgba(255,204,0,0.1); border: 1px solid rgba(255,204,0,0.3); color: #ffcc00; font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 6px; margin-bottom: 0.75rem; display: inline-block; }

/* ── OPTION BUTTONS ── */
.q-options { display: flex; flex-direction: column; gap: 0.5rem; }
.option-btn { width: 100%; text-align: left; padding: 0.85rem 1.1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); cursor: pointer; border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: 0.9rem; transition: 0.15s; display: flex; align-items: flex-start; gap: 0.75rem; }
.option-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.option-btn.correct { background: rgba(0,255,100,0.12); border-color: #00ff64; color: #00ff64; }
.option-btn.wrong   { background: rgba(255,80,80,0.12);  border-color: #ff5050; color: #ff5050; }
.option-btn.selected-multi { background: rgba(0,255,245,0.1); border-color: #00fff5; color: #00fff5; }
.option-btn:disabled { cursor: default; }
.opt-letter { font-size: 0.95rem; font-weight: 900; background: rgba(255,255,255,0.1); padding: 0.15rem 0.45rem; border-radius: 4px; flex-shrink: 0; margin-top: 0.1rem; letter-spacing: 1px; }
.opt-text { flex: 1; line-height: 1.5; }
.submit-multi-btn { margin-top: 0.75rem; opacity: 0.4; transition: opacity 0.2s; }

/* ── FEEDBACK ── */
.feedback-box { border-radius: 12px; padding: 1rem 1.25rem; margin-top: 1.25rem; }
.feedback-box.fb-correct { background: rgba(0,255,100,0.08); border: 1px solid rgba(0,255,100,0.25); }
.feedback-box.fb-wrong   { background: rgba(255,80,80,0.08);  border: 1px solid rgba(255,80,80,0.25); }
.fb-status { font-weight: 900; font-size: 1rem; margin-bottom: 0.4rem; }
.feedback-box.fb-correct .fb-status { color: #00ff64; }
.feedback-box.fb-wrong   .fb-status { color: #ff5050; }
.fb-explain { font-size: 1rem; color: rgba(255,255,255,0.72); line-height: 1.6; }
.feedback-actions { display: flex; align-items: center; margin-top: 1rem; gap: 0.75rem; flex-wrap: wrap; }
.outline-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.65); padding: 0.65rem 1.25rem; border-radius: 10px; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 0.875rem; transition: 0.2s; }
.outline-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

/* ── PSEUDOCODE / BLOCKS ── */
.q-code-area { margin-bottom: 1.25rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
.q-code-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
.q-code-label { font-size: 0.9rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.toggle-view-btn { background: rgba(255,0,110,0.15); border: 1px solid rgba(255,0,110,0.3); color: #ff006e; font-size: 0.95rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer; font-family: 'Outfit', sans-serif; transition: 0.15s; }
.toggle-view-btn:hover { background: rgba(255,0,110,0.25); }
.pseudo-raw { font-family: 'Source Code Pro', 'Menlo', 'Monaco', 'Consolas', monospace; font-size: 1.05rem; color: rgba(255,255,255,0.8); padding: 1.1rem 1.25rem; line-height: 1.85; white-space: pre-wrap; background: rgba(0,0,0,0.3); }
/* ── APCSP BLOCK STYLES ── */
.apcsp-blocks { padding: 1.1rem 1.25rem; background: rgba(0,0,0,0.4); }
.bl-row { margin: 4px 0; }
.bl-stmt { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 0.35rem 0.85rem; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: rgba(255,255,255,0.9); }
.bl-arrow { color: #ff006e; font-size: 1rem; }
.bl-val { display: inline-block; background: rgba(0,255,245,0.12); border: 1px solid rgba(0,255,245,0.3); border-radius: 4px; padding: 0.1rem 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #00fff5; }
.bl-cond { display: inline-block; background: rgba(200,122,255,0.12); border: 1px solid rgba(200,122,255,0.35); border-radius: 999px; padding: 0.15rem 0.65rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #c87aff; }
.bl-ctrl-block { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin: 4px 0; }
.bl-ctrl-title { background: rgba(255,255,255,0.08); padding: 0.4rem 0.85rem; }
.bl-ctrl-header { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.bl-ctrl-body { padding: 0.5rem 0.85rem 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 4px; }
.bl-else { color: #ffcc00; }

/* ── PRACTICE TEST LOBBY ── */
.pt-lobby { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 0.5rem; }
.pt-config-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 1.25rem 1.5rem; }
.pt-config-section h3 { color: #ff006e; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem; }
.pt-count-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pt-count-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); padding: 0.55rem 1.1rem; border-radius: 8px; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600; transition: 0.15s; }
.pt-count-btn:hover { border-color: rgba(255,0,110,0.4); color: #ff006e; }
.pt-count-btn.selected { background: rgba(255,0,110,0.2); border-color: #ff006e; color: #ff006e; font-weight: 800; }
.pt-unit-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pt-unit-check { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.5rem 0.9rem; cursor: pointer; font-size: 0.85rem; color: rgba(255,255,255,0.75); transition: 0.15s; }
.pt-unit-check:hover { border-color: rgba(255,0,110,0.3); }
.pt-unit-check input { accent-color: #ff006e; }
.unit-breakdown { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.unit-pill { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.unit-pill strong { color: #ffcc00; }
.pt-start-btn { font-size: 1rem; padding: 0.9rem 2.5rem; margin-top: 0.5rem; }

/* ── RESULTS ── */
.results-screen { text-align: center; }
.results-score { font-size: 4.5rem; font-weight: 900; line-height: 1; margin: 1.25rem 0 0.5rem; }
.results-fraction { color: rgba(255,255,255,0.45); font-size: 1rem; margin-bottom: 0.5rem; }
.results-msg { font-size: 1rem; font-weight: 700; margin-bottom: 1.5rem; }
.results-btns { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* ── GRADE DISPLAY ── */
.results-grade-block { display: flex; flex-direction: column; align-items: center; margin: 1.5rem 0 0.75rem; gap: 0.5rem; }
.results-grade-score { font-size: 2.2rem; font-weight: 900; color: rgba(255,255,255,0.85); font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }
.results-grade-letter { font-size: 2.2rem; font-weight: 900; line-height: 1; font-family: 'Outfit', sans-serif; }
/* ── LOGO ── */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-bottom: 0.75rem; }
.brand-logo { width: auto; max-width: 180px; height: auto; display: block; }
.brand-subtitle { font-size: 0.85rem; font-weight: 400; letter-spacing: 2px; color: rgba(255,255,255,0.7); text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── HAMBURGER BUTTON (Mobile) ── */
.hamburger {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  width: 40px;
  height: 40px;
  background: rgba(255,0,110,0.1);
  border: 1px solid rgba(255,0,110,0.3);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: all 0.3s;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: #ff006e;
  border-radius: 1px;
  transition: all 0.3s;
}

.hamburger.open {
  background: rgba(255,0,110,0.2);
  border-color: #ff006e;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── SIDEBAR OVERLAY (Mobile) ── */
#sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

#sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── SIMPLE RESPONSIVE: sidebar scrolls, content scrolls ── */
@media (max-width: 768px) {
  body, html { overflow: auto; height: auto; }
  .app-wrapper { flex-direction: column; height: auto; min-height: 100vh; }
  
  /* Show hamburger on mobile */
  .hamburger {
    display: flex;
  }
  
  /* Sidebar slides in from left */
  .sidebar { 
    position: fixed; 
    left: -280px;
    top: 0;
    height: 100vh;
    z-index: 10;
    transition: left 0.3s ease;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .brand { flex-direction: column; justify-content: center; align-items: center; margin-bottom: 2rem; gap: 0.3rem; padding-top: 1rem; }
  .brand-logo { max-width: 100px; }
  .brand-subtitle { font-size: 0.7rem; letter-spacing: 2px; }
  .nav-chapter-title { margin-top: 0.75rem; }
  .main-content { padding: 1.5rem 1rem; overflow: visible; height: auto; margin-top: 3rem; }
  .content-container { max-width: 100%; }
  .practice-test-section { margin-top: 1rem; padding-top: 0.75rem; }
  .vocab-grid, .vocab-grid.triple, .compare-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  
  /* Hide mobile dropdown completely */
  .mobile-topic-dropdown {
    display: none !important;
  }
}

/* ── PRACTICE TEST FULLSCREEN OVERLAY ── */
.pt-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: #0a0a0f;
  overflow-y: auto;
  animation: pt-fade-in 0.2s ease;
}
@keyframes pt-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pt-overlay-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}
.pt-close-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  margin-bottom: 1.5rem;
  display: block;
  transition: 0.15s;
}
.pt-close-btn:hover { border-color: rgba(255,80,80,0.4); color: #ff5050; }
@media (max-width: 768px) {
  .pt-overlay-inner { padding: 1.25rem 1rem 4rem; }
}/* ═══════════════════════════════════════════════════════════════════

/* ── EXAM MODE — hides all Aria + nav chrome during testing ── */
body.exam-mode #aria-bubble,
body.exam-mode #aria-chat-window,
body.exam-mode #hamburger,
body.exam-mode #sidebar {
  display: none !important;
}
/* ── BODY TEXT STANDARDIZATION ── */
.vocab-card .def,
.compare-box li,
.compare-box ul {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
}

/* ── BODY TEXT STANDARDIZATION ── */
.vocab-card .def { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.8); }
.compare-box li { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.8); }

/* Inline div body text in deepDive content */
.content-container div[style*="font-size:0.82rem"],
.content-container div[style*="font-size: 0.82rem"],
.content-container div[style*="font-size:0.85rem"],
.content-container div[style*="font-size: 0.85rem"],
.content-container div[style*="font-size:0.88rem"],
.content-container div[style*="font-size: 0.88rem"] {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.8) !important;
}

.content-container span[style*="font-size:0.82rem"],
.content-container span[style*="font-size: 0.82rem"],
.content-container span[style*="font-size:0.85rem"],
.content-container span[style*="font-size: 0.85rem"],
.content-container span[style*="font-size:0.88rem"],
.content-container span[style*="font-size: 0.88rem"] {
  font-size: 1rem !important;
  line-height: 1.65 !important;
}
/* ── CALLOUT CARD SYSTEM ── */
.ccard { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 1.4rem 1.6rem; }
.ccard.cyan   { border-color: rgba(0,255,245,0.3); background: rgba(0,255,245,0.05); }
.ccard.gold   { border-color: rgba(255,204,0,0.3); background: rgba(255,204,0,0.05); }
.ccard.pink   { border-color: rgba(255,0,110,0.3); background: rgba(255,0,110,0.05); }
.ccard.green  { border-color: rgba(0,255,100,0.3); background: rgba(0,255,100,0.05); }
.ccard.purple { border-color: rgba(200,122,255,0.3); background: rgba(200,122,255,0.05); }
.ccard.white  { border-color: rgba(255,255,255,0.15); }

.ccard .cc-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 0.4rem; }
.ccard.cyan   .cc-label { color: #00fff5; }
.ccard.gold   .cc-label { color: #ffcc00; }
.ccard.pink   .cc-label { color: #ff006e; }
.ccard.green  .cc-label { color: #00ff64; }
.ccard.purple .cc-label { color: #c87aff; }
.ccard.white  .cc-label { color: rgba(255,255,255,0.5); }

.ccard .cc-title { font-size: 1.75rem; font-weight: 900; line-height: 1.2; color: #fff; margin-bottom: 0.6rem; }
.ccard.cyan   .cc-title { color: #00fff5; }
.ccard.gold   .cc-title { color: #ffcc00; }
.ccard.pink   .cc-title { color: #ff006e; }
.ccard.green  .cc-title { color: #00ff64; }
.ccard.purple .cc-title { color: #c87aff; }

.ccard .cc-body { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.85); }
.ccard .cc-body ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ccard .cc-body li { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.85); }

/* ── RESPONSIVE: MOBILE FIXES ── */
@media (max-width: 768px) {
  /* Stack all grid columns to single column */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Full width heading images */
  img[style*="width:90%"],
  img[style*="width: 90%"],
  img[style*="width:80%"],
  img[style*="width: 80%"] {
    width: 100% !important;
  }

  /* ccard grids stack too */
  .ccard { width: 100%; }
}

/* ── VOCAB PILL ── */
.vocab-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  background: rgba(255,0,110,0.15);
  border: 1px solid rgba(255,0,110,0.35);
  color: #ff006e;
  font-family: 'Outfit', sans-serif;
  vertical-align: middle;
  margin: 0 0.1rem;
}

/* ── TEXTBOOK READING SECTION ── */
.tb-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.tb-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.tb-section-label {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.9);
}
.tb-section-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.tb-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
}

.tb-col h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffcc00;
  margin-bottom: 0.6rem;
  letter-spacing: 0.3px;
}

.tb-col h4 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffcc00;
  margin-bottom: 0.6rem;
  letter-spacing: 0.3px;
}

.tb-col p {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.tb-col p:last-child {
  margin-bottom: 0;
}

.tb-col strong {
  color: rgba(255,255,255,0.9);
  font-weight: 700;
}

.tb-col em {
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

/* Abstraction connection callout */
.abstraction-callout {
  background: rgba(200,122,255,0.07);
  border: 1px solid rgba(200,122,255,0.25);
  border-left: 4px solid #c87aff;
  border-radius: 12px;
  padding: 1rem 1.3rem;
  margin-top: 1.5rem;
}

.abstraction-callout-head {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c87aff;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.abstraction-callout p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .tb-columns { grid-template-columns: 1fr; gap: 0; }
}

.ccard .cc-body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}
.hide-h1 h1 { display: none; }
.nanum-hero { font-size: 3.8rem !important; line-height: 1.1 !important; }
.nanum-sub  { font-size: 2.5rem !important; max-width: none !important; }

  .context-block-cyan, .context-block-gold, .context-block-pink, .context-block-purple {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
  }
  .context-block-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
  }
  .context-block-cyan .context-block-title,
  .context-block-gold .context-block-title,
  .context-block-pink .context-block-title,
  .context-block-purple .context-block-title {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
  }
  /* Body text */
  .context-block-cyan p, .context-block-gold p,
  .context-block-pink p, .context-block-purple p {
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
  }

  /* CYAN */
  .context-block-cyan {
    background: rgba(0,255,245,0.05);
    border: 1px solid rgba(0,255,245,0.2);
    border-left: 4px solid #00fff5;
  }
  .context-block-cyan .context-block-title { color: #00fff5; }

  /* GOLD */
  .context-block-gold {
    background: rgba(255,204,0,0.06);
    border: 1px solid rgba(255,204,0,0.2);
    border-left: 4px solid #ffcc00;
  }
  .context-block-gold .context-block-title { color: #ffcc00; }

  /* PINK */
  .context-block-pink {
    background: rgba(255,0,110,0.06);
    border: 1px solid rgba(255,0,110,0.2);
    border-left: 4px solid #ff006e;
  }
  .context-block-pink .context-block-title { color: #ff006e; }

  /* PURPLE */
  .context-block-purple {
    background: rgba(200,122,255,0.07);
    border: 1px solid rgba(200,122,255,0.2);
    border-left: 4px solid #c87aff;
  }
  .context-block-purple .context-block-title { color: #c87aff; }
/* ── CCARD PAIR SYSTEM (Unit 3/4 rework format) ── */
.ccard-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.75rem 0 1.5rem;
}

.ccard {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ccard-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}
.ccard-label.pink   { background: rgba(255,0,110,0.15);   color: #ff006e;  border: 1px solid rgba(255,0,110,0.3); }
.ccard-label.cyan   { background: rgba(0,255,245,0.1);    color: #00fff5;  border: 1px solid rgba(0,255,245,0.25); }
.ccard-label.gold   { background: rgba(255,204,0,0.12);   color: #ffcc00;  border: 1px solid rgba(255,204,0,0.3); }
.ccard-label.green  { background: rgba(0,255,100,0.1);    color: #00ff64;  border: 1px solid rgba(0,255,100,0.25); }
.ccard-label.purple { background: rgba(200,122,255,0.1);  color: #c87aff;  border: 1px solid rgba(200,122,255,0.25); }

.ccard-body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}

.ccard-example {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.5rem;
  margin-top: 0.2rem;
}

/* ── COLOR TILE HEADERS (Unit 3/4 rework format) ── */
.color-tile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #000;
}
.color-tile svg { flex-shrink: 0; }

.color-tile.pink   { background: #ff006e; }
.color-tile.cyan   { background: #00fff5; }
.color-tile.gold   { background: #ffcc00; }
.color-tile.green  { background: #00ff64; }
.color-tile.purple { background: #c87aff; }

/* ── ABSTRACTION CALLOUT (label variant used in unit4) ── */
.abstraction-callout {
  background: rgba(200,122,255,0.07);
  border: 1px solid rgba(200,122,255,0.25);
  border-left: 4px solid #c87aff;
  border-radius: 12px;
  padding: 1rem 1.3rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
}
.abstraction-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #c87aff;
  margin-bottom: 0.4rem;
}

/* ── VOCAB PILL COLOR VARIANTS ── */
.vocab-pill.cyan   { background: rgba(0,255,245,0.1);   border-color: rgba(0,255,245,0.3);   color: #00fff5; }
.vocab-pill.gold   { background: rgba(255,204,0,0.1);   border-color: rgba(255,204,0,0.3);   color: #ffcc00; }
.vocab-pill.green  { background: rgba(0,255,100,0.1);   border-color: rgba(0,255,100,0.3);   color: #00ff64; }
.vocab-pill.purple { background: rgba(200,122,255,0.1); border-color: rgba(200,122,255,0.3); color: #c87aff; }

/* ── TB-COLUMNS responsive fix ── */
@media (max-width: 768px) {
  .ccard-pair { grid-template-columns: 1fr; }
}
.content-block img {
  width: 85%;
  display: block;
  margin: 0 auto 2rem;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════
   CARD GRID SYSTEM — mobile-first, consistent columns
   ═══════════════════════════════════════════════════════════════════ */

/* Base grid — 2 col desktop, 1 col mobile */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.75rem 0 1.5rem;
}

/* 3 col variant */
.card-grid.three {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 4 col variant */
.card-grid.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Single wide card — use when there's no pair */
.card-grid.solo {
  grid-template-columns: 1fr;
  max-width: 680px;
}

/* Mobile — everything collapses to 1 col */
@media (max-width: 768px) {
  .card-grid,
  .card-grid.three,
  .card-grid.four {
    grid-template-columns: 1fr;
  }
}

/* Tablet — 3 and 4 col drop to 2 */
@media (min-width: 769px) and (max-width: 1100px) {
  .card-grid.three,
  .card-grid.four {
    grid-template-columns: 1fr 1fr;
  }
}