/* ===== NOTES PAGE ===== */

/* ---- Subject / Class Switcher ---- */
.notes-switcher-wrap {
  max-width: 1100px; margin: 1.5rem auto 0; padding: 0 4rem;
}
.notes-switcher {
  background: white; border-radius: 18px;
  border: 1.5px solid var(--border, #ede8ff);
  padding: 1.1rem 1.5rem;
  box-shadow: 0 2px 12px rgba(124,58,237,0.06);
  display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
}
.ns-group { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ns-label {
  font-size: 0.72rem; font-weight: 800; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap;
  min-width: 50px;
}
.ns-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ns-pill {
  padding: 0.38rem 0.9rem; border-radius: 50px;
  border: 2px solid #e8eaff; background: #f9f7ff;
  color: #64748b; font-weight: 800; font-size: 0.78rem;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  font-family: 'Nunito', sans-serif;
}
.ns-pill:hover:not(.active):not(.no-data) {
  border-color: #a78bfa; color: #7c3aed; transform: translateY(-1px);
}
.ns-pill.active {
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  color: white; border-color: transparent;
  box-shadow: 0 3px 10px rgba(124,58,237,0.3);
}
.ns-pill.no-data { opacity: 0.35; cursor: not-allowed; }

.ns-enrolled {
  background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
  color: white !important; border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(124,58,237,0.3) !important;
  display: inline-flex !important; align-items: center; gap: 0.4rem;
}
.ns-enrolled-tag {
  background: rgba(255,255,255,0.25); border-radius: 20px;
  font-size: 0.62rem; padding: 0.1rem 0.45rem; font-weight: 900;
  letter-spacing: 0.3px;
}
.ns-locked {
  background: #f1f5f9 !important; border-color: #e2e8f0 !important;
  color: #94a3b8 !important; cursor: pointer !important;
}
.ns-locked:hover {
  background: #fee2e2 !important; border-color: #fca5a5 !important;
  color: #dc2626 !important; transform: none !important;
}

/* ---- Subject Lock Overlay ---- */
.subject-lock-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(15,5,40,0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.subject-lock-overlay.open { opacity: 1; pointer-events: all; }
.subject-lock-box {
  background: white; border-radius: 24px;
  max-width: 420px; width: 100%;
  padding: 2.5rem 2rem 2rem; text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.subject-lock-overlay.open .subject-lock-box { transform: scale(1) translateY(0); }
.sl-icon {
  font-size: 3rem; margin-bottom: 0.5rem; display: block;
  animation: slShake 0.5s ease 0.2s both;
}
@keyframes slShake {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
}
.sl-lang { font-size: 1.3rem; font-weight: 900; color: #94a3b8; margin-bottom: 0.5rem; }
.sl-title { font-size: 1.25rem; font-weight: 900; color: #1a1035; margin: 0 0 0.75rem; }
.sl-msg { font-size: 0.88rem; color: #475569; line-height: 1.65; margin-bottom: 0.5rem; font-weight: 600; }
.sl-sub { font-size: 0.8rem; color: #94a3b8; font-weight: 600; margin-bottom: 1.5rem; }
.sl-actions { display: flex; flex-direction: column; gap: 0.65rem; }
.sl-btn {
  padding: 0.75rem 1.5rem; border-radius: 14px;
  font-weight: 800; font-size: 0.88rem; cursor: pointer;
  font-family: 'Nunito', sans-serif; text-decoration: none;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); display: block;
}
.sl-btn.upgrade {
  background: linear-gradient(135deg,#7c3aed,#a855f7); color: white; border: none;
  box-shadow: 0 4px 0 #5b21b6;
}
.sl-btn.upgrade:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #5b21b6; }
.sl-btn.dismiss { background: #f1f5f9; color: #64748b; border: 2px solid #e2e8f0; }
.sl-btn.dismiss:hover { background: #e2e8f0; }

/* ---- Book Header ---- */
.notes-book-header {
  max-width: 1100px; margin: 1.2rem auto 0; padding: 0 4rem;
}
.nbh-inner {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg,#f0eaff,#fce8ff);
  border-radius: 16px; padding: 1rem 1.5rem;
  border: 1.5px solid #ddd6fe;
}
.nbh-icon { font-size: 2rem; flex-shrink: 0; }
.nbh-title { font-size: 1rem; font-weight: 900; color: #1a1035; }
.nbh-sub { font-size: 0.78rem; font-weight: 700; color: #7c3aed; margin-top: 0.1rem; }
.nbh-badge {
  margin-left: auto; padding: 0.3rem 0.85rem; border-radius: 20px;
  background: white; border: 1.5px solid #ddd6fe;
  font-size: 0.75rem; font-weight: 800; color: #7c3aed;
  white-space: nowrap;
}

/* ---- Main / Loading / Empty ---- */
.notes-main {
  max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 4rem;
}
.notes-loading {
  text-align: center; padding: 4rem 2rem;
  color: #a78bfa;
}
.nl-icon { font-size: 2.5rem; margin-bottom: 0.75rem; animation: notesFloat 2s ease-in-out infinite; }
@keyframes notesFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.nl-text { font-weight: 700; font-size: 0.95rem; }

.notes-empty {
  text-align: center; padding: 4rem 2rem;
  background: linear-gradient(135deg,#f9f7ff,#fce8ff);
  border-radius: 20px; border: 2px dashed #ddd6fe;
}
.ne-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.ne-title { font-size: 1.1rem; font-weight: 900; color: #1a1035; margin-bottom: 0.4rem; }
.ne-sub { font-size: 0.85rem; color: #64748b; font-weight: 600; }

/* ---- Chapters Grid ---- */
.chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.chapter-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: white; border-radius: 18px;
  border: 1.5px solid #ede8ff;
  padding: 1.2rem 1.25rem;
  cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 2px 8px rgba(124,58,237,0.05);
  position: relative; overflow: hidden;
}
.chapter-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,#7c3aed,#a855f7,#ec4899);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.chapter-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(124,58,237,0.14);
  border-color: #c4b5fd;
}
.chapter-card:hover::before { transform: scaleX(1); }

.cc-num {
  min-width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg,#f0eaff,#e9d5ff);
  color: #7c3aed; font-weight: 900; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 1.5px solid #ddd6fe;
  transition: all 0.2s;
}
.chapter-card:hover .cc-num {
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  color: white; border-color: transparent;
}

.cc-content { flex: 1; min-width: 0; }
.cc-title {
  font-weight: 900; font-size: 0.92rem; color: #1a1035;
  margin-bottom: 0.3rem; line-height: 1.3;
}
.cc-summary {
  font-size: 0.78rem; color: #64748b; font-weight: 600;
  line-height: 1.55; margin-bottom: 0.55rem;
}
.cc-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cc-badge {
  padding: 0.15rem 0.55rem; border-radius: 6px;
  font-size: 0.68rem; font-weight: 800;
}
.cc-badge.tricks { background: #fef9c3; color: #854d0e; }
.cc-badge.vocab  { background: #dcfce7; color: #15803d; }
.cc-badge.qa     { background: #dbeafe; color: #1e40af; }
.cc-badge.ex     { background: #f3e8ff; color: #7c3aed; }

.cc-arrow {
  font-size: 1.1rem; color: #c4b5fd; flex-shrink: 0; align-self: center;
  transition: all 0.2s; margin-left: 0.25rem;
}
.chapter-card:hover .cc-arrow { color: #7c3aed; transform: translateX(4px); }

/* ---- Chapter Modal ---- */
.ch-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,5,40,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.ch-modal-overlay.open { opacity: 1; pointer-events: all; }

.ch-modal {
  background: white; border-radius: 24px;
  width: 100%; max-width: 700px; max-height: 88vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  transform: scale(0.94) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-modal-overlay.open .ch-modal { transform: scale(1) translateY(0); }

.ch-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: #f1f5f9; border: none; border-radius: 10px;
  width: 34px; height: 34px; font-size: 0.9rem; cursor: pointer;
  color: #64748b; font-weight: 800; z-index: 1;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.ch-modal-close:hover { background: #fce8ff; color: #7c3aed; }

.ch-modal-header {
  padding: 1.5rem 1.5rem 1rem;
  background: linear-gradient(135deg,#2e1065,#5b21b6,#7c2d9e);
  color: white; position: relative;
}
.chmh-num {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,0.6); margin-bottom: 0.3rem;
}
.chmh-title { font-size: 1.2rem; font-weight: 900; margin-bottom: 0.5rem; }
.chmh-summary {
  font-size: 0.82rem; color: rgba(255,255,255,0.8); font-weight: 600;
  line-height: 1.55;
}

.ch-modal-tabs {
  display: flex; gap: 0; background: #f8f7ff;
  border-bottom: 2px solid #ede8ff; overflow-x: auto;
}
.ch-tab {
  padding: 0.7rem 1.1rem; background: none; border: none;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.78rem;
  color: #64748b; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all 0.2s;
}
.ch-tab:hover:not(.active) { color: #7c3aed; background: #f0eaff; }
.ch-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; background: white; }

.ch-modal-body {
  flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
}

/* Explain */
.ch-explain-block {
  background: #f9f7ff; border-radius: 14px;
  border: 1.5px solid #ede8ff; padding: 1rem 1.2rem;
  margin-bottom: 0.85rem;
}
.ch-explain-heading {
  font-weight: 900; font-size: 0.9rem; color: #5b21b6;
  margin-bottom: 0.5rem;
}
.ch-explain-text {
  font-size: 0.82rem; color: #374151; font-weight: 600;
  line-height: 1.75;
}

/* Tricks */
.ch-trick-card {
  background: linear-gradient(135deg,#fefce8,#fef9c3);
  border: 1.5px solid #fde68a; border-radius: 14px;
  padding: 1rem 1.2rem; margin-bottom: 0.85rem;
}
.ch-trick-title {
  font-weight: 900; font-size: 0.88rem; color: #78350f;
  margin-bottom: 0.4rem;
}
.ch-trick-text {
  font-size: 0.82rem; color: #92400e; font-weight: 600; line-height: 1.65;
}

/* Vocab */
.ch-vocab-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 0.65rem;
}
.ch-vocab-card {
  background: #f0fdf4; border: 1.5px solid #bbf7d0;
  border-radius: 12px; padding: 0.85rem 1rem;
  transition: all 0.2s;
}
.ch-vocab-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(21,128,61,0.1); }
.ch-vocab-word { font-weight: 900; font-size: 0.9rem; color: #15803d; margin-bottom: 0.2rem; }
.ch-vocab-meaning { font-weight: 700; font-size: 0.78rem; color: #374151; margin-bottom: 0.25rem; }
.ch-vocab-example { font-size: 0.72rem; color: #64748b; font-style: italic; font-weight: 600; }

/* Q&A / Exercises */
.ch-qa-item {
  background: #f9f7ff; border-radius: 12px;
  border: 1.5px solid #ede8ff; padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem; cursor: pointer;
  transition: all 0.2s;
}
.ch-qa-item:hover { border-color: #c4b5fd; background: #f0eaff; }
.ch-qa-item.revealed { border-color: #a78bfa; background: #f5f3ff; }
.ch-qa-q {
  font-weight: 800; font-size: 0.85rem; color: #1a1035;
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.ch-qa-num {
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  color: white; font-size: 0.66rem; font-weight: 900;
  padding: 0.15rem 0.45rem; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
}
.ch-qa-a {
  font-size: 0.82rem; color: #15803d; font-weight: 700;
  margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1.5px dashed #bbf7d0; line-height: 1.6;
}

.ch-empty-section {
  text-align: center; padding: 3rem; color: #94a3b8;
  font-weight: 700; font-size: 0.85rem;
}

/* Modal Footer */
.ch-modal-footer {
  display: flex; gap: 0.75rem; padding: 1rem 1.5rem;
  border-top: 1.5px solid #ede8ff; background: #fafafe;
  flex-shrink: 0;
}
.ch-footer-btn {
  flex: 1; text-align: center; padding: 0.65rem;
  border-radius: 12px; font-weight: 800; font-size: 0.82rem;
  text-decoration: none; transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  font-family: 'Nunito', sans-serif;
}
.ch-footer-btn.ppt {
  background: linear-gradient(135deg,#f0eaff,#e9d5ff);
  color: #7c3aed; border: 1.5px solid #ddd6fe;
}
.ch-footer-btn.ppt:hover { background: linear-gradient(135deg,#7c3aed,#a855f7); color: white; transform: translateY(-2px); }
.ch-footer-btn.learn {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7);
  color: #15803d; border: 1.5px solid #bbf7d0;
}
.ch-footer-btn.learn:hover { background: linear-gradient(135deg,#15803d,#16a34a); color: white; transform: translateY(-2px); }
.ch-footer-btn.pdf {
  background: linear-gradient(135deg,#fff7ed,#fed7aa);
  color: #c2410c; border: 1.5px solid #fdba74; cursor: pointer;
  font-family: 'Nunito', sans-serif;
}
.ch-footer-btn.pdf:hover { background: linear-gradient(135deg,#ea580c,#c2410c); color: white; transform: translateY(-2px); }
.ch-footer-btn.pdf:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .notes-switcher-wrap, .notes-book-header, .notes-main { padding: 0 2rem; }
}
@media (max-width: 700px) {
  .notes-switcher-wrap, .notes-book-header, .notes-main { padding: 0 1.2rem; }
  .chapters-grid { grid-template-columns: 1fr; }
  .ch-modal { border-radius: 16px; }
  .ch-modal-tabs { gap: 0; }
  .ch-tab { padding: 0.6rem 0.7rem; font-size: 0.72rem; }
  .ch-vocab-grid { grid-template-columns: 1fr 1fr; }
  .notes-switcher { flex-direction: column; align-items: flex-start; gap: 1rem; }
}


/* ===== LOCKED CHAPTER CARDS ===== */
.cc-locked { opacity: 0.65; }
.cc-locked:hover { opacity: 0.85; }
.cc-lock-icon { font-size: 0.85rem; }
.cc-badge.locked {
  background: rgba(148,163,184,0.12); color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.2);
}

/* ===== PPT PREREQ POPUP (shared with homework) ===== */
.hw-prereq-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15,23,42,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.hw-prereq-box {
  background: #fff; border-radius: 24px; padding: 40px 36px;
  max-width: 420px; width: 90%; text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: cardPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes cardPop {
  0% { opacity: 0; transform: scale(0.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.hw-prereq-icon { font-size: 3rem; margin-bottom: 12px; }
.hw-prereq-box h3 { font-size: 1.3rem; font-weight: 900; color: #1e293b; margin-bottom: 10px; }
.hw-prereq-box p { font-size: 0.9rem; color: #64748b; font-weight: 600; line-height: 1.6; margin-bottom: 24px; }
.hw-prereq-actions { display: flex; gap: 10px; flex-direction: column; }