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

.al-app { min-height:500px; background:linear-gradient(160deg,#0f0d08 0%,#1a1508 40%,#1e1a0e 100%); color:#e0ddd0; font-family:'Segoe UI',Tahoma,sans-serif; border-radius:12px; overflow:hidden; box-sizing:border-box; }
.al-app *,.al-app *::before,.al-app *::after { box-sizing:border-box; }

.al-header { text-align:center; padding:120px 10px 33px; border-bottom:1px solid rgba(205,160,80,0.2); }
.al-title { margin:0; line-height:1; }
.al-title-aramaic { display:block; font-family:'Frank Ruhl Libre',serif; font-size:46px; font-weight:700; color:#cda050; direction:rtl; }
.al-title-sub { display:block; font-family:'Cormorant Garamond',serif; font-size:16px; color:rgba(255,255,255,0.4); letter-spacing:4px; margin-top:6px; }

.al-nav { display:flex; gap:4px; padding:12px 16px; overflow-x:auto; border-bottom:1px solid rgba(255,255,255,0.06); scrollbar-width:none; }
.al-nav::-webkit-scrollbar { display:none; }
.al-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 .2s; font-family:inherit; flex-shrink:0; }
.al-nav-btn:hover { color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.04); }
.al-nav-btn.al-nav-active { border-color:rgba(205,160,80,0.5); background:rgba(205,160,80,0.12); color:#cda050; font-weight:600; }
.al-nav-icon { font-size:16px; }

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

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

.al-split { display:flex; flex-direction:column; gap:24px; }
.al-split-left { flex-shrink:0; }
.al-split-right { flex:1; min-width:0; }
.al-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); }

.al-flashcard-wrap { perspective:800px; cursor:pointer; width:100%; height:220px; -webkit-tap-highlight-color:transparent; }
.al-flashcard-inner { position:relative; width:100%; height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
.al-flashcard-inner.al-flipped { transform:rotateY(180deg); }
.al-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(205,160,80,0.25); box-shadow:0 8px 32px rgba(0,0,0,0.5); padding:20px; gap:6px; text-align:center; }
.al-flashcard-front { background:linear-gradient(135deg,#1a1508 0%,#0f0d08 100%); }
.al-flashcard-back { background:linear-gradient(135deg,#0f0d08 0%,#1e1a0e 100%); transform:rotateY(180deg); }
.al-flashcard-subtitle { font-size:13px; color:rgba(255,255,255,0.5); letter-spacing:1px; }
.al-flashcard-back-small { font-size:14px; color:rgba(255,255,255,0.6); margin-top:4px; }

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

.al-btn-accent { background:linear-gradient(135deg,#cda050,#a07830); border:none; border-radius:8px; padding:10px 24px; color:#1a1508; font-weight:700; font-size:14px; cursor:pointer; letter-spacing:.5px; font-family:inherit; transition:opacity .2s; }
.al-btn-accent:hover { opacity:.9; }

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

.al-letter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:6px; }
.al-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 .2s; }
.al-letter-char { font-size:22px; }
.al-letter-name { font-size:9px; opacity:.5; font-family:'Segoe UI',sans-serif; direction:ltr; }
.al-letter-cell:hover { background:rgba(205,160,80,0.1); color:#cda050; }
.al-letter-cell.al-letter-active { background:rgba(205,160,80,0.18); border-color:rgba(205,160,80,0.5); color:#cda050; }

.al-script-intro { color:rgba(255,255,255,0.5); margin-bottom:20px; line-height:1.6; }
.al-script-list { display:grid; gap:16px; }
.al-script-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:20px; }
.al-script-topic { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:#cda050; margin-bottom:8px; }
.al-script-desc { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.6; margin-bottom:12px; }
.al-script-items { display:grid; gap:6px; }
.al-script-item { font-size:14px; color:#e0ddd0; background:rgba(205,160,80,0.06); border:1px solid rgba(205,160,80,0.1); border-radius:8px; padding:8px 14px; font-family:'Frank Ruhl Libre',serif; direction:rtl; unicode-bidi:bidi-override; text-align:right; }

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

.al-word-list { display:grid; gap:6px; }
.al-word-row { display:grid; grid-template-columns:90px 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:#e0ddd0; font-family:inherit; font-size:14px; transition:all .15s; width:100%; }
.al-word-row:hover { background:rgba(255,255,255,0.05); }
.al-word-row.al-word-active { background:rgba(205,160,80,0.1); border-color:rgba(205,160,80,0.3); }
.al-word-arm { font-family:'Frank Ruhl Libre',serif; font-size:18px; color:#cda050; direction:rtl; text-align:right; }
.al-word-eng { font-size:14px; padding-left:12px; }
.al-word-translit { font-size:12px; color:rgba(255,255,255,0.3); }

.al-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:#e0ddd0; font-family:inherit; gap:4px; transition:all .15s; width:100%; }
.al-phrase-row:hover { background:rgba(255,255,255,0.05); }
.al-phrase-row.al-phrase-active { background:rgba(205,160,80,0.1); border-color:rgba(205,160,80,0.3); }
.al-phrase-arm { font-family:'Frank Ruhl Libre',serif; font-size:18px; color:#cda050; direction:rtl; }
.al-phrase-eng { font-size:13px; }
.al-phrase-translit { font-size:12px; color:rgba(255,255,255,0.3); }

.al-quiz-wrap { max-width:700px; margin:0 auto; }
.al-quiz-done { text-align:center; padding:40px 20px; }
.al-quiz-score { color:#cda050; font-size:28px; margin:8px 0; }
.al-quiz-msg { color:rgba(255,255,255,0.6); margin-bottom:24px; }
.al-quiz-header { display:flex; justify-content:space-between; margin-bottom:20px; color:rgba(255,255,255,0.5); font-size:13px; }
.al-quiz-prompt { background:rgba(26,21,8,0.6); border-radius:16px; padding:32px; text-align:center; margin-bottom:24px; border:1px solid rgba(205,160,80,0.2); }
.al-quiz-translit { color:rgba(255,255,255,0.4); margin-top:8px; font-size:14px; }
.al-quiz-options { display:grid; gap:10px; }
.al-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:#e0ddd0; font-size:16px; cursor:pointer; text-align:left; transition:all .2s; font-family:inherit; width:100%; }
.al-quiz-opt:hover { background:rgba(255,255,255,0.1); }
.al-quiz-opt.al-correct { background:rgba(76,175,80,0.25); border-color:rgba(76,175,80,0.6); }
.al-quiz-opt.al-wrong { background:rgba(244,67,54,0.25); border-color:rgba(244,67,54,0.6); }

@media (min-width:768px) {
  .al-header { padding:40px 32px 24px; }
  .al-nav { padding:14px 32px; justify-content:center; gap:6px; }
  .al-nav-btn { padding:10px 22px; font-size:14px; }
  .al-content { padding:32px 32px 60px; }
  .al-split { flex-direction:row; align-items:flex-start; gap:32px; }
  .al-split-left { width:340px; flex-shrink:0; position:sticky; top:24px; }
  .al-split-right { max-height:520px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(205,160,80,0.3) transparent; padding-right:4px; }
  .al-split-right::-webkit-scrollbar { width:5px; }
  .al-split-right::-webkit-scrollbar-thumb { background:rgba(205,160,80,0.3); border-radius:4px; }
  .al-letter-grid { grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
  .al-letter-char { font-size:26px; }
  .al-letter-name { font-size:10px; }
  .al-script-list { grid-template-columns:1fr 1fr; }
  .al-script-item { direction:ltr; unicode-bidi:normal; text-align:left; }
  .al-quiz-options { grid-template-columns:1fr 1fr; gap:12px; }
  .al-quiz-prompt { padding:40px; }
  .al-word-row { grid-template-columns:110px 1fr auto; padding:12px 16px; }
}
@media (min-width:1024px) {
  .al-title-aramaic { font-size:52px; }
  .al-nav { padding:16px 48px; gap:8px; }
  .al-nav-btn { padding:11px 26px; font-size:15px; }
  .al-content { padding:36px 48px 80px; }
  .al-split-left { width:420px; }
  .al-split-right { max-height:600px; }
  .al-flashcard-wrap { height:260px; }
  .al-flashcard-face { border-radius:20px; }
  .al-letter-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:10px; }
  .al-letter-char { font-size:28px; }
  .al-letter-name { font-size:11px; }
  .al-quiz-wrap { max-width:800px; }
  .al-quiz-opt { padding:18px 24px; font-size:17px; }
}
@media (min-width:1280px) {
  .al-content { max-width:1200px; padding:40px 60px 80px; }
  .al-split-left { width:480px; }
  .al-flashcard-wrap { height:300px; }
  .al-split-right { max-height:680px; }
}
@media (max-width:479px) {
  .al-title-aramaic { font-size:36px; }
  .al-content { padding:16px 12px 40px; }
  .al-word-row { grid-template-columns:80px 1fr; }
  .al-word-translit { display:none; }
  .al-letter-name { display:none; }
  .al-flashcard-wrap { height:200px; }
}