@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Frank+Ruhl+Libre:wght@400;700&display=swap');

.hl-app {
  min-height: 500px;
  background: linear-gradient(160deg, #0a0a1a 0%, #1a1a2e 40%, #16213e 100%);
  color: #e0e0e0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.hl-app *, .hl-app *::before, .hl-app *::after { box-sizing: border-box; }

.hl-header { text-align: center; padding: 36px 20px 20px; border-bottom: 1px solid rgba(212,175,55,0.15); }
.hl-title { margin: 0; line-height: 1; }
.hl-title-hebrew { display: block; font-family: 'Frank Ruhl Libre', serif; font-size: 42px; font-weight: 700; color: #d4af37; direction: rtl; }
.hl-title-sub { display: block; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.45); letter-spacing: 4px; margin-top: 6px; }

.hl-nav { display: flex; gap: 4px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.06); scrollbar-width: none; }
.hl-nav::-webkit-scrollbar { display: none; }
.hl-nav-btn { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 13px; font-weight: 400; white-space: nowrap; transition: all 0.2s; font-family: inherit; flex-shrink: 0; }
.hl-nav-btn:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.hl-nav-btn.hl-nav-active { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.15); color: #d4af37; font-weight: 600; }
.hl-nav-icon { font-size: 16px; }

.hl-content { margin: 0 auto; padding: 24px 16px 60px; }

.hl-hebrew-display { font-family: 'Frank Ruhl Libre', 'Noto Serif Hebrew', serif; color: #d4af37; direction: rtl; unicode-bidi: bidi-override; line-height: 1.2; }

/* ── Split Layout ── */
.hl-split { display: flex; flex-direction: column; gap: 24px; }
.hl-split-left { flex-shrink: 0; }
.hl-split-right { flex: 1; min-width: 0; }
.hl-split-right-heading { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }

/* ── Flashcard ── */
.hl-flashcard-wrap { perspective: 800px; cursor: pointer; width: 100%; height: 220px; -webkit-tap-highlight-color: transparent; }
.hl-flashcard-inner { position: relative; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
.hl-flashcard-inner.hl-flipped { transform: rotateY(180deg); }
.hl-flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; border: 1px solid rgba(212,175,55,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.4); padding: 20px; gap: 8px; text-align: center; }
.hl-flashcard-front { background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%); }
.hl-flashcard-back { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); transform: rotateY(180deg); }
.hl-flashcard-subtitle { font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 1px; }
.hl-flashcard-back-small { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }

.hl-card-nav { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; }
.hl-card-counter { color: rgba(255,255,255,0.4); font-size: 13px; }

.hl-btn-gold { background: linear-gradient(135deg, #d4af37, #b8860b); border: none; border-radius: 8px; padding: 10px 24px; color: #1a1a2e; font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: 0.5px; font-family: inherit; transition: opacity 0.2s; }
.hl-btn-gold:hover { opacity: 0.9; }

.hl-detail-box { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 20px; margin-top: 8px; border: 1px solid rgba(255,255,255,0.06); }
.hl-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hl-detail-label { font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.hl-detail-value { font-size: 15px; color: #e0e0e0; }
.hl-detail-large { font-size: 32px !important; }

/* ── Letter Grid ── */
.hl-letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.hl-letter-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 4px; cursor: pointer; color: rgba(255,255,255,0.6); font-family: 'Frank Ruhl Libre', serif; direction: rtl; text-align: center; transition: all 0.2s; }
.hl-letter-char { font-size: 22px; }
.hl-letter-name { font-size: 9px; opacity: 0.5; font-family: 'Segoe UI', sans-serif; direction: ltr; }
.hl-letter-cell:hover { background: rgba(212,175,55,0.1); color: #d4af37; }
.hl-letter-cell.hl-letter-active { background: rgba(212,175,55,0.2); border-color: rgba(212,175,55,0.5); color: #d4af37; }

.hl-vowel-intro { color: rgba(255,255,255,0.5); margin-bottom: 20px; line-height: 1.6; }
.hl-vowel-list { display: grid; gap: 10px; }
.hl-vowel-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 16px; gap: 16px; }
.hl-vowel-symbol { text-align: center; }
.hl-vowel-name { font-weight: 600; color: #e0e0e0; margin-bottom: 2px; }
.hl-vowel-sound { font-weight: 400; color: rgba(255,255,255,0.4); }
.hl-vowel-example { font-size: 13px; color: rgba(255,255,255,0.4); }

.hl-cat-tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.hl-cat-tabs::-webkit-scrollbar { display: none; }

.hl-word-list { display: grid; gap: 6px; }
.hl-word-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 14px; cursor: pointer; text-align: left; color: #e0e0e0; font-family: inherit; font-size: 14px; transition: all 0.15s; width: 100%; }
.hl-word-row:hover { background: rgba(255,255,255,0.05); }
.hl-word-row.hl-word-active { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); }
.hl-word-heb { font-family: 'Frank Ruhl Libre', serif; font-size: 20px; color: #d4af37; direction: rtl; text-align: right; }
.hl-word-eng { font-size: 14px; padding-left: 12px; }
.hl-word-translit { font-size: 12px; color: rgba(255,255,255,0.3); }

.hl-phrase-row { display: grid; grid-template-columns: 1fr; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 12px 14px; cursor: pointer; text-align: left; color: #e0e0e0; font-family: inherit; gap: 4px; transition: all 0.15s; width: 100%; }
.hl-phrase-row:hover { background: rgba(255,255,255,0.05); }
.hl-phrase-row.hl-phrase-active { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); }
.hl-phrase-heb { font-family: 'Frank Ruhl Libre', serif; font-size: 18px; color: #d4af37; direction: rtl; }
.hl-phrase-eng { font-size: 13px; }
.hl-phrase-translit { font-size: 12px; color: rgba(255,255,255,0.3); }

.hl-quiz-wrap { max-width: 700px; margin: 0 auto; }
.hl-quiz-done { text-align: center; padding: 40px 20px; }
.hl-quiz-score { color: #d4af37; font-size: 28px; margin: 8px 0; }
.hl-quiz-msg { color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.hl-quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; color: rgba(255,255,255,0.5); font-size: 13px; }
.hl-quiz-prompt { background: rgba(15,52,96,0.5); border-radius: 16px; padding: 32px; text-align: center; margin-bottom: 24px; border: 1px solid rgba(212,175,55,0.2); }
.hl-quiz-translit { color: rgba(255,255,255,0.4); margin-top: 8px; font-size: 14px; }
.hl-quiz-options { display: grid; gap: 10px; }
.hl-quiz-opt { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px 20px; color: #e0e0e0; font-size: 16px; cursor: pointer; text-align: left; transition: all 0.2s; font-family: inherit; width: 100%; }
.hl-quiz-opt:hover { background: rgba(255,255,255,0.1); }
.hl-quiz-opt.hl-correct { background: rgba(76,175,80,0.25); border-color: rgba(76,175,80,0.6); }
.hl-quiz-opt.hl-wrong { background: rgba(244,67,54,0.25); border-color: rgba(244,67,54,0.6); }

/* ══════════════════ TABLET 768px+ ══════════════════ */
@media (min-width: 768px) {
  .hl-header { padding: 40px 32px 24px; }
  .hl-nav { padding: 14px 32px; justify-content: center; gap: 6px; }
  .hl-nav-btn { padding: 10px 22px; font-size: 14px; }
  .hl-content { padding: 32px 32px 60px; }

  .hl-split { flex-direction: row; align-items: flex-start; gap: 32px; }
  .hl-split-left { width: 340px; flex-shrink: 0; position: sticky; top: 24px; }
  .hl-split-right { max-height: 520px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.3) transparent; padding-right: 4px; }
  .hl-split-right::-webkit-scrollbar { width: 5px; }
  .hl-split-right::-webkit-scrollbar-track { background: transparent; }
  .hl-split-right::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 4px; }

  .hl-letter-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .hl-letter-cell { padding: 12px 4px; }
  .hl-letter-char { font-size: 26px; }
  .hl-letter-name { font-size: 10px; }

  .hl-vowel-list { grid-template-columns: 1fr 1fr; gap: 12px; }

  .hl-quiz-options { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hl-quiz-prompt { padding: 40px; }

  .hl-word-row { grid-template-columns: 100px 1fr auto; padding: 12px 16px; }
  .hl-word-heb { font-size: 22px; }
}

/* ══════════════════ DESKTOP 1024px+ ══════════════════ */
@media (min-width: 1024px) {
  .hl-header { padding: 44px 48px 28px; }
  .hl-title-hebrew { font-size: 48px; }
  .hl-nav { padding: 16px 48px; gap: 8px; }
  .hl-nav-btn { padding: 11px 26px; font-size: 15px; }
  .hl-content { padding: 36px 48px 80px; }

  .hl-split-left { width: 420px; }
  .hl-split-right { max-height: 600px; }
  .hl-flashcard-wrap { height: 260px; }
  .hl-flashcard-face { border-radius: 20px; }

  .hl-letter-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
  .hl-letter-cell { padding: 14px 6px; border-radius: 10px; }
  .hl-letter-char { font-size: 28px; }
  .hl-letter-name { font-size: 11px; }

  .hl-quiz-wrap { max-width: 800px; }
  .hl-quiz-prompt { padding: 48px; }
  .hl-quiz-opt { padding: 18px 24px; font-size: 17px; }

  .hl-phrase-row { padding: 14px 18px; gap: 5px; }
  .hl-phrase-heb { font-size: 20px; }
  .hl-phrase-eng { font-size: 14px; }
}

/* ══════════════════ WIDE DESKTOP 1280px+ ══════════════════ */
@media (min-width: 1280px) {
  .hl-content { max-width: 1200px; padding: 40px 60px 80px; }
  .hl-split-left { width: 480px; }
  .hl-flashcard-wrap { height: 300px; }
  .hl-split-right { max-height: 680px; }
}

/* ══════════════════ SMALL MOBILE <480px ══════════════════ */
@media (max-width: 479px) {
  .hl-title-hebrew { font-size: 32px; }
  .hl-content { padding: 16px 12px 40px; }
  .hl-word-row { grid-template-columns: 70px 1fr; }
  .hl-word-translit { display: none; }
  .hl-letter-name { display: none; }
  .hl-flashcard-wrap { height: 200px; }
}