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

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

.gl-header { text-align: center; padding: 36px 20px 20px; border-bottom: 1px solid rgba(78,154,222,0.2); }
.gl-title { margin: 0; line-height: 1; }
.gl-title-greek { display: block; font-family: 'GFS Didot', 'Cormorant Garamond', serif; font-size: 44px; font-weight: 700; color: #5eaff5; letter-spacing: 2px; }
.gl-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; }

.gl-nav { display: flex; gap: 4px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.06); scrollbar-width: none; }
.gl-nav::-webkit-scrollbar { display: none; }
.gl-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; }
.gl-nav-btn:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.gl-nav-btn.gl-nav-active { border-color: rgba(94,175,245,0.5); background: rgba(94,175,245,0.12); color: #5eaff5; font-weight: 600; }
.gl-nav-icon { font-size: 16px; }

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

.gl-greek-display { font-family: 'GFS Didot', 'Cormorant Garamond', serif; color: #5eaff5; line-height: 1.2; }

/* ── Split Layout ── */
.gl-split { display: flex; flex-direction: column; gap: 24px; }
.gl-split-left { flex-shrink: 0; }
.gl-split-right { flex: 1; min-width: 0; }
.gl-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 ── */
.gl-flashcard-wrap { perspective: 800px; cursor: pointer; width: 100%; height: 220px; -webkit-tap-highlight-color: transparent; }
.gl-flashcard-inner { position: relative; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
.gl-flashcard-inner.gl-flipped { transform: rotateY(180deg); }
.gl-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(94,175,245,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.4); padding: 20px; gap: 6px; text-align: center; }
.gl-flashcard-front { background: linear-gradient(135deg, #12264a 0%, #0a0f1e 100%); }
.gl-flashcard-back { background: linear-gradient(135deg, #0a0f1e 0%, #162040 100%); transform: rotateY(180deg); }
.gl-flashcard-subtitle { font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 1px; }
.gl-flashcard-back-small { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }

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

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

.gl-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); }
.gl-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gl-detail-label { font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.gl-detail-value { font-size: 15px; color: #e0e0e0; }
.gl-detail-large { font-size: 32px !important; }

/* ── Letter Grid ── */
.gl-letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.gl-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: 8px 0; cursor: pointer; color: rgba(255,255,255,0.6); font-family: 'GFS Didot', 'Cormorant Garamond', serif; transition: all 0.2s; }
.gl-letter-upper { font-size: 20px; }
.gl-letter-lower { font-size: 14px; opacity: 0.6; }
.gl-letter-name { font-size: 9px; opacity: 0.4; font-family: 'Segoe UI', sans-serif; }
.gl-letter-cell:hover { background: rgba(94,175,245,0.1); color: #5eaff5; }
.gl-letter-cell.gl-letter-active { background: rgba(94,175,245,0.15); border-color: rgba(94,175,245,0.5); color: #5eaff5; }

.gl-diacritics-intro { color: rgba(255,255,255,0.5); margin-bottom: 20px; line-height: 1.6; }
.gl-diacritics-list { display: grid; gap: 10px; }
.gl-diacritics-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; }
.gl-diacritics-symbol { text-align: center; }
.gl-diacritics-name { font-weight: 600; color: #e0e0e0; margin-bottom: 2px; }
.gl-diacritics-desc { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.gl-diacritics-example { font-size: 13px; color: rgba(255,255,255,0.4); }

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

.gl-word-list { display: grid; gap: 6px; }
.gl-word-row { display: grid; grid-template-columns: 100px 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%; }
.gl-word-row:hover { background: rgba(255,255,255,0.05); }
.gl-word-row.gl-word-active { background: rgba(94,175,245,0.1); border-color: rgba(94,175,245,0.3); }
.gl-word-grk { font-family: 'GFS Didot', 'Cormorant Garamond', serif; font-size: 18px; color: #5eaff5; }
.gl-word-eng { font-size: 14px; padding-left: 12px; }
.gl-word-translit { font-size: 12px; color: rgba(255,255,255,0.3); }

.gl-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%; }
.gl-phrase-row:hover { background: rgba(255,255,255,0.05); }
.gl-phrase-row.gl-phrase-active { background: rgba(94,175,245,0.1); border-color: rgba(94,175,245,0.3); }
.gl-phrase-grk { font-family: 'GFS Didot', 'Cormorant Garamond', serif; font-size: 18px; color: #5eaff5; }
.gl-phrase-eng { font-size: 13px; }
.gl-phrase-translit { font-size: 12px; color: rgba(255,255,255,0.3); }

.gl-quiz-wrap { max-width: 700px; margin: 0 auto; }
.gl-quiz-done { text-align: center; padding: 40px 20px; }
.gl-quiz-score { color: #5eaff5; font-size: 28px; margin: 8px 0; }
.gl-quiz-msg { color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.gl-quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; color: rgba(255,255,255,0.5); font-size: 13px; }
.gl-quiz-prompt { background: rgba(18,38,74,0.6); border-radius: 16px; padding: 32px; text-align: center; margin-bottom: 24px; border: 1px solid rgba(94,175,245,0.2); }
.gl-quiz-translit { color: rgba(255,255,255,0.4); margin-top: 8px; font-size: 14px; }
.gl-quiz-options { display: grid; gap: 10px; }
.gl-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%; }
.gl-quiz-opt:hover { background: rgba(255,255,255,0.1); }
.gl-quiz-opt.gl-correct { background: rgba(76,175,80,0.25); border-color: rgba(76,175,80,0.6); }
.gl-quiz-opt.gl-wrong { background: rgba(244,67,54,0.25); border-color: rgba(244,67,54,0.6); }

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

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

  .gl-letter-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .gl-letter-cell { padding: 12px 4px; }
  .gl-letter-upper { font-size: 24px; }
  .gl-letter-lower { font-size: 16px; }
  .gl-letter-name { font-size: 10px; }

  .gl-diacritics-list { grid-template-columns: 1fr 1fr; gap: 12px; }

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

  .gl-word-row { grid-template-columns: 120px 1fr auto; padding: 12px 16px; }
  .gl-word-grk { font-size: 20px; }
}

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

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

  .gl-letter-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
  .gl-letter-cell { padding: 14px 6px; border-radius: 10px; }
  .gl-letter-upper { font-size: 26px; }
  .gl-letter-lower { font-size: 18px; }
  .gl-letter-name { font-size: 11px; }

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

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

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

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