/* ── Page-specific only — all layout / card / header / nav from stylect.css ── */
  .topic {
    cursor: pointer; padding: 16px 20px; margin-top: 12px;
    border-radius: 10px; background: #f0f4fb;
    border-left: 5px solid #4a90e2;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; color: #1a3c6e; transition: background 0.2s; user-select: none;
  }
  .topic:hover { background: #dce8ff; }
  .topic.open  { background: #dce8ff; border-left-color: #1a3c6e; }
  .topic .arrow { transition: transform 0.3s; font-size: 0.85rem; color: #4a90e2; }
  .topic.open .arrow { transform: rotate(90deg); }

  .content {
    display: none; padding: 22px 26px; background: #fff;
    border-left: 5px solid #4a90e2; border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }
  .content h3 {
    color: #1a3c6e; margin-top: 22px; margin-bottom: 8px;
    font-size: 0.97rem; font-weight: 600;
    border-bottom: 1px solid #e0e8f5; padding-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .content h3:first-child { margin-top: 0; }
  .content h4 { color: #2a5298; margin: 14px 0 6px; font-size: 0.93rem; font-weight: 600; }
  .content ul, .content ol { margin: 6px 0 12px 0; padding-left: 22px; line-height: 1.82; }
  .content li { margin-bottom: 3px; }
  .content p  { line-height: 1.78; color: #333; margin: 8px 0; }

  table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 0.86rem; }
  th { background: #1a3c6e; color: #fff; padding: 9px 12px; text-align: left; font-weight: 600; }
  td { padding: 8px 12px; border-bottom: 1px solid #e0e8f5; vertical-align: top; }
  tr:nth-child(even) td { background: #f5f8ff; }
  td strong { color: #1a3c6e; }

  .note-box    { background: #fffbe6; border-left: 4px solid #f5a623; padding: 12px 16px; border-radius: 6px; margin: 12px 0; font-size: 0.9rem; line-height: 1.7; }
  .info-box    { background: #e8f4fd; border-left: 4px solid #2196f3; padding: 12px 16px; border-radius: 6px; margin: 12px 0; font-size: 0.9rem; line-height: 1.7; }
  .danger-box  { background: #fff0f0; border-left: 4px solid #e53935; padding: 12px 16px; border-radius: 6px; margin: 12px 0; font-size: 0.9rem; line-height: 1.7; }
  .success-box { background: #f0fff4; border-left: 4px solid #43a047; padding: 12px 16px; border-radius: 6px; margin: 12px 0; font-size: 0.9rem; line-height: 1.7; }

  .formula {
    background: #f0f4fb; border: 1px solid #c5d8f5; border-radius: 6px;
    padding: 10px 16px; font-family: 'Courier New', monospace;
    font-size: 0.92rem; margin: 8px 0; color: #1a3c6e; line-height: 1.7;
  }
  .exam-badge { display: inline-block; background: #e8f0fe; color: #1a3c6e; border-radius: 4px; padding: 2px 9px; font-size: 0.76rem; font-weight: 700; margin: 2px; letter-spacing: 0.02em; }
  .exam-badge.gate  { background: #fff3e0; color: #e65100; }
  .exam-badge.ese   { background: #e8f5e9; color: #1b5e20; }
  .exam-badge.sscje { background: #f3e5f5; color: #4a148c; }

  .ch-num {
    display: inline-flex; align-items: center; justify-content: center;
    background: #4a90e2; color: #fff; border-radius: 50%;
    width: 26px; height: 26px; font-size: 0.78rem; font-weight: 700;
    margin-right: 10px; flex-shrink: 0;
  }
  .topic.open .ch-num { background: #1a3c6e; }

  .chapter-list-intro { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
  .ch-chip {
    background: #e8f0fe; color: #1a3c6e; border-radius: 20px;
    padding: 4px 14px; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s; border: 1px solid #c5d8f5;
  }
  .ch-chip:hover { background: #4a90e2; color: #fff; border-color: #4a90e2; }
  .breadcrumb { font-size: 0.82rem; margin-bottom: 14px; color: #666; }
  .breadcrumb a { color: #4a90e2; text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }

  .diagram-wrap {
    background: #f7faff; border: 1px solid #d0e2ff;
    border-radius: 10px; padding: 14px 10px 10px;
    margin: 16px 0; text-align: center;
  }
  .diagram-wrap svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
  .diagram-caption {
    font-size: 0.78rem; color: #4a6fa5; margin-top: 7px;
    font-style: italic; font-weight: 600; letter-spacing: 0.02em;
  }
  .diagram-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
  @media (max-width: 640px) { .diagram-row { grid-template-columns: 1fr; } }

  /* ── Dark Mode ── */
  [data-theme="dark"] .topic { background: #1e2a3a; color: #90caf9; border-left-color: #4a90e2; }
  [data-theme="dark"] .topic:hover, [data-theme="dark"] .topic.open { background: #162032; border-left-color: #90caf9; }
  [data-theme="dark"] .topic .arrow { color: #90caf9; }
  [data-theme="dark"] .ch-num { background: #4a90e2; }
  [data-theme="dark"] .topic.open .ch-num { background: #90caf9; color: #121212; }
  [data-theme="dark"] .content { background: #1a1a2e; border-left-color: #4a90e2; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  [data-theme="dark"] .content h3 { color: #90caf9; border-bottom-color: #2a3a55; }
  [data-theme="dark"] .content h4 { color: #64b5f6; }
  [data-theme="dark"] .content p, [data-theme="dark"] .content li { color: #cccccc; }
  [data-theme="dark"] .content ul, [data-theme="dark"] .content ol { color: #cccccc; }
  [data-theme="dark"] th { background: #0d2137; color: #e0e0e0; }
  [data-theme="dark"] td { color: #cccccc; border-bottom-color: #2a3a55; }
  [data-theme="dark"] tr:nth-child(even) td { background: #1a2233; }
  [data-theme="dark"] td strong { color: #90caf9; }
  [data-theme="dark"] .note-box    { background: #2a2200; border-left-color: #f5a623; color: #e0c97a; }
  [data-theme="dark"] .info-box    { background: #0d1f33; border-left-color: #2196f3; color: #90caf9; }
  [data-theme="dark"] .danger-box  { background: #2a0d0d; border-left-color: #e53935; color: #ef9a9a; }
  [data-theme="dark"] .success-box { background: #0d2a13; border-left-color: #43a047; color: #a5d6a7; }
  [data-theme="dark"] .formula { background: #0d1a2e; border-color: #2a3a55; color: #90caf9; }
  [data-theme="dark"] .exam-badge        { background: #1a2a44; color: #90caf9; }
  [data-theme="dark"] .exam-badge.gate   { background: #2a1800; color: #ffcc80; }
  [data-theme="dark"] .exam-badge.ese    { background: #0d2a13; color: #a5d6a7; }
  [data-theme="dark"] .exam-badge.sscje  { background: #1e0a2a; color: #ce93d8; }
  [data-theme="dark"] .ch-chip { background: #1a2a44; color: #90caf9; border-color: #2a3a55; }
  [data-theme="dark"] .ch-chip:hover { background: #4a90e2; color: #fff; }
  [data-theme="dark"] .breadcrumb { color: #aaaaaa; }
  [data-theme="dark"] .breadcrumb a { color: #64b5f6; }
  [data-theme="dark"] .breadcrumb span { color: #aaaaaa; }
  [data-theme="dark"] .diagram-wrap { background: #111827; border-color: #2a3a55; }
  [data-theme="dark"] .diagram-caption { color: #90caf9; }