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

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

.ll-header { text-align:center; padding:36px 20px 20px; border-bottom:1px solid rgba(178,34,34,0.25); }
.ll-title { margin:0; line-height:1; }
.ll-title-latin { display:block; font-family:'Cinzel',serif; font-size:38px; font-weight:700; color:#c9a84c; letter-spacing:4px; }
.ll-title-sub { display:block; font-family:'Cormorant Garamond',serif; font-size:16px; color:rgba(255,255,255,0.45); letter-spacing:4px; margin-top:6px; }

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

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

.ll-latin-display { font-family:'Cinzel','Cormorant Garamond',serif; color:#c9a84c; line-height:1.2; }

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

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

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

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

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

.ll-letter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:6px; }
.ll-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:'Cinzel',serif; transition:all .2s; }
.ll-letter-upper { font-size:22px; }
.ll-letter-lower { font-size:14px; opacity:.5; font-family:'Cormorant Garamond',serif; font-style:italic; }
.ll-letter-cell:hover { background:rgba(178,34,34,0.12); color:#e05555; }
.ll-letter-cell.ll-letter-active { background:rgba(178,34,34,0.2); border-color:rgba(178,34,34,0.5); color:#e05555; }

.ll-pron-intro { color:rgba(255,255,255,0.5); margin-bottom:20px; line-height:1.6; }
.ll-pron-list { display:grid; gap:10px; }
.ll-pron-row { display:grid; grid-template-columns:90px 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; }
.ll-pron-form { font-family:'Cinzel',serif; font-size:20px; color:#c9a84c; text-align:center; }
.ll-pron-label { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:2px; }
.ll-pron-val { color:#e0e0e0; }

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

.ll-word-list { display:grid; gap:6px; }
.ll-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 .15s; width:100%; }
.ll-word-row:hover { background:rgba(255,255,255,0.05); }
.ll-word-row.ll-word-active { background:rgba(178,34,34,0.1); border-color:rgba(178,34,34,0.3); }
.ll-word-lat { font-family:'Cormorant Garamond',serif; font-size:18px; color:#c9a84c; font-style:italic; }
.ll-word-eng { font-size:14px; padding-left:12px; }
.ll-word-translit { font-size:12px; color:rgba(255,255,255,0.3); }

.ll-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 .15s; width:100%; }
.ll-phrase-row:hover { background:rgba(255,255,255,0.05); }
.ll-phrase-row.ll-phrase-active { background:rgba(178,34,34,0.1); border-color:rgba(178,34,34,0.3); }
.ll-phrase-lat { font-family:'Cormorant Garamond',serif; font-size:18px; color:#c9a84c; font-style:italic; }
.ll-phrase-eng { font-size:13px; }

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

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