#bglearn-app {
--primary:#00966E; --primary-hover:#007a59; --danger:#D62612;
--blue:#185FA5; --blue-text:#0C447C; --purple-text:#3C3489; --amber-text:#633806;
--gold:#b45309; --gold-dark:#92400e;
--bg-main:linear-gradient(135deg,#f8fafc 0%,#edf2f7 100%);
--bg-card:#ffffff; --text-dark:#0f172a; --text-muted:#64748b;
--border:#e2e8f0; --radius:24px;
--font:'Inter',system-ui,-apple-system,sans-serif;
font-family:var(--font); background:var(--bg-main); color:var(--text-dark);
width:100%; max-width:1000px; margin:0 auto; min-height:650px;
border-radius:var(--radius); box-shadow:0 25px 50px -12px rgba(0,0,0,.08);
position:relative; padding:40px 20px; box-sizing:border-box; overflow-y:auto;
}
#bglearn-app * { box-sizing:border-box; margin:0; padding:0; user-select:none; }
#bglearn-app input { user-select:text; }
#bglearn-app h1 { font-size:2.2rem; font-weight:800; color:var(--text-dark); text-align:center; line-height:1.2; text-wrap:balance; margin-bottom:15px; }
#bglearn-app h2 { font-size:1.6rem; font-weight:700; color:var(--text-dark); text-align:center; line-height:1.3; text-wrap:balance; margin-bottom:15px; }
#bglearn-app p  { font-size:1.15rem; color:var(--text-muted); text-align:center; line-height:1.6; text-wrap:pretty; }
@keyframes bglearnFadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes bglearnShake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@keyframes bglearnPop    { 0%{transform:scale(.95);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes ttIn          { from{opacity:0;transform:translateY(6px) translateX(-50%)} to{opacity:1;transform:translateY(0) translateX(-50%)} } .bglearn-btn { background:var(--bg-card); color:var(--text-dark); border:2px solid var(--border); padding:22px 30px; font-size:1.15rem; font-weight:700; cursor:pointer; border-radius:20px; transition:all .2s ease; width:100%; max-width:450px; text-align:center; margin:0 auto; line-height:1.3; box-shadow:0 4px 6px rgba(0,0,0,.02); }
.bglearn-btn:hover { border-color:var(--primary); color:var(--primary); background:#f0fdf4; transform:translateY(-3px); box-shadow:0 12px 24px -8px rgba(0,150,110,.25); }
.bglearn-btn-primary { background:var(--primary); color:white; border-color:var(--primary); }
.bglearn-btn-primary:hover { background:var(--primary-hover); color:white; border-color:var(--primary-hover); }
.bglearn-btn-gold { background:var(--gold); color:white; border-color:var(--gold); }
.bglearn-btn-gold:hover { background:var(--gold-dark); color:white; }
.bglearn-topbar { width:100%; display:flex; justify-content:center; margin-bottom:30px; }
.bglearn-back { background:transparent; border:none; color:var(--text-muted); font-size:1.05rem; font-weight:600; cursor:pointer; transition:color .2s; padding:10px 20px; border-radius:10px; }
.bglearn-back:hover { color:var(--danger); background:#fef2f2; }
.bglearn-hidden { display:none !important; }
.bglearn-fade  { animation:bglearnFadeIn .5s ease forwards; }
.bglearn-screen { display:flex; flex-direction:column; align-items:center; width:100%; gap:30px; }
.bglearn-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:50px 30px; width:100%; max-width:650px; box-shadow:0 20px 40px -10px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; gap:30px; }
.bglearn-progress-bar-bg   { width:100%; height:12px; background:#e2e8f0; border-radius:6px; overflow:hidden; }
.bglearn-progress-bar-fill { height:100%; width:0%; background:var(--primary); transition:width .4s cubic-bezier(.4,0,.2,1); } .bglearn-alpha-wrapper { display:flex; flex-direction:column; gap:40px; width:100%; max-width:800px; align-items:center; }
.bglearn-alpha-section { display:flex; flex-direction:column; gap:20px; align-items:center; width:100%; }
.bglearn-alpha-title { font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:3px; color:var(--text-muted); text-align:center; }
.bglearn-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; width:100%; }
.bglearn-tile { background:var(--bg-card); border:2px solid var(--border); border-radius:16px; width:65px; height:65px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; cursor:pointer; transition:all .2s ease; }
.bglearn-tile:hover   { border-color:var(--primary); transform:translateY(-4px); }
.bglearn-tile.selected { background:var(--text-dark); color:white; border-color:var(--text-dark); transform:scale(1.08); }
.bglearn-tile.correct  { background:var(--primary); color:white; border-color:var(--primary); pointer-events:none; opacity:.9; transform:scale(.95); }
.bglearn-tile.wrong    { background:var(--danger); color:white; border-color:var(--danger); animation:bglearnShake .4s; }
.bglearn-progress-text { font-size:1.1rem; font-weight:700; color:var(--text-muted); text-align:center; margin-top:15px; } .bglearn-word-display { display:flex; flex-direction:column; gap:15px; align-items:center; width:100%; }
.bglearn-word-fr   { font-size:1.1rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; text-align:center; }
.bglearn-word-cy   { font-size:3.5rem; font-weight:800; color:var(--text-dark); text-align:center; line-height:1.1; }
.bglearn-word-hint { font-size:1rem; font-weight:600; color:var(--text-muted); text-align:center; font-style:italic; }
.bglearn-input { width:100%; padding:24px; border:2px solid var(--border); border-radius:20px; font-size:1.3rem; font-weight:600; text-align:center; color:var(--text-dark); outline:none; transition:all .3s ease; background:#f8fafc; user-select:text; }
.bglearn-input:focus   { border-color:var(--primary); background:var(--bg-card); box-shadow:0 0 0 5px rgba(0,150,110,.15); }
.bglearn-input.success { border-color:var(--primary); background:#f0fdf4; color:var(--primary); }
.bglearn-input.error   { border-color:var(--danger); background:#fef2f2; color:var(--danger); animation:bglearnShake .4s; }
.bglearn-feedback  { font-size:1.2rem; font-weight:700; text-align:center; min-height:30px; }
.text-success { color:var(--primary); }
.text-error   { color:var(--danger); }
.bglearn-level-badge      { display:inline-block; padding:8px 20px; border-radius:50px; font-size:.95rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:#f0fdf4; color:var(--primary); border:2px solid var(--primary); text-align:center; }
.bglearn-level-badge.lvl2 { background:#eff6ff; color:#1d4ed8; border-color:#1d4ed8; }
.bglearn-level-badge.lvl3 { background:#fffbeb; color:var(--gold); border-color:var(--gold); }
.bglearn-congrats-card { background:var(--bg-card); border:2px solid var(--primary); border-radius:var(--radius); padding:50px 30px; width:100%; max-width:650px; display:flex; flex-direction:column; align-items:center; gap:25px; animation:bglearnFadeIn .5s ease forwards; }
.bglearn-congrats-emoji { font-size:4rem; }
.bglearn-congrats-title { font-size:2rem; font-weight:800; color:var(--primary); text-align:center; }
.bglearn-congrats-desc  { font-size:1.15rem; color:var(--text-muted); text-align:center; line-height:1.6; }
.bglearn-history-q      { font-size:1.4rem; font-weight:700; color:var(--text-dark); text-align:center; line-height:1.5; }
.bglearn-options-container { display:flex; flex-direction:column; gap:16px; width:100%; }
.bglearn-option { background:#f8fafc; border:2px solid var(--border); padding:22px 20px; border-radius:20px; font-size:1.15rem; font-weight:600; color:var(--text-dark); cursor:pointer; transition:all .2s ease; text-align:center; line-height:1.4; }
.bglearn-option:hover   { background:#e2e8f0; border-color:#cbd5e1; transform:scale(1.02); }
.bglearn-option.correct { background:#dcfce7; border-color:var(--primary); color:var(--primary); pointer-events:none; }
.bglearn-option.wrong   { background:#fee2e2; border-color:var(--danger); color:var(--danger); animation:bglearnShake .4s; pointer-events:none; }
.bglearn-vocab-bonus       { display:none; width:100%; background:#f0fdf4; border:2px solid var(--primary); padding:28px 20px; border-radius:20px; text-align:center; animation:bglearnFadeIn .4s ease; }
.bglearn-vocab-bonus-title { font-size:.9rem; font-weight:800; color:var(--primary); text-transform:uppercase; margin-bottom:12px; letter-spacing:2px; }
.bglearn-vocab-bonus-text  { font-size:1.8rem; color:var(--text-dark); font-weight:800; margin-bottom:8px; }
.bglearn-vocab-bonus-ph    { color:var(--text-muted); font-size:1.1rem; font-weight:500; margin-bottom:16px; }
.history-lesson-block { background:var(--bg-card); border:1px solid #B5D4F4; border-radius:16px; padding:16px 18px; margin:12px 0 18px; text-align:left; }
.history-lesson-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:#0C447C; margin-bottom:9px; display:flex; align-items:center; gap:6px; }
.history-lesson-text  { font-size:.95rem; color:var(--text-dark); line-height:1.75; }
.bglearn-triple-inputs { display:flex; flex-direction:column; gap:15px; width:100%; }
.bglearn-triple-row    { display:flex; flex-direction:column; gap:6px; width:100%; }
.bglearn-triple-label  { font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); text-align:center; }
.bglearn-triple-input  { width:100%; padding:18px; border:2px solid var(--border); border-radius:16px; font-size:1.15rem; font-weight:600; text-align:center; color:var(--text-dark); outline:none; transition:all .3s ease; background:#f8fafc; user-select:text; }
.bglearn-triple-input:focus  { border-color:var(--primary); background:var(--bg-card); box-shadow:0 0 0 4px rgba(0,150,110,.12); }
.bglearn-triple-input.success { border-color:var(--primary); background:#f0fdf4; color:var(--primary); }
.bglearn-triple-input.error   { border-color:var(--danger); background:#fef2f2; color:var(--danger); }
.bglearn-triple-input.given   { background:#f1f5f9; color:var(--text-muted); font-style:italic; pointer-events:none; border-color:#cbd5e1; } .vb-hero      { width:100%; max-width:720px; text-align:center; padding:0 0 36px; }
.vb-hero-title { font-size:2rem; font-weight:800; color:var(--text-dark); margin-bottom:10px; }
.vb-hero-sub  { font-size:1.05rem; color:var(--text-muted); line-height:1.7; max-width:540px; margin:0 auto; }
.vb-tabs { display:flex; gap:6px; background:#f1f5f9; border-radius:16px; padding:6px; margin-bottom:36px; width:100%; max-width:380px; }
.vb-tab { flex:1; padding:12px 10px; border:none; border-radius:11px; font-size:1rem; font-weight:700; cursor:pointer; transition:all .2s; background:transparent; color:var(--text-muted); }
.vb-tab.active { background:var(--bg-card); color:var(--text-dark); box-shadow:0 2px 8px rgba(0,0,0,.07); }
.vb-tab:hover:not(.active) { color:var(--text-dark); }
.vb-section { width:100%; max-width:720px; display:none; flex-direction:column; gap:24px; }
.vb-section.vb-active { display:flex; animation:bglearnFadeIn .35s ease forwards; }
.vb-sublabel { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:3px; color:var(--text-muted); text-align:center; padding:8px 0 2px; }
.vb-conj-card   { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.vb-conj-header { padding:20px 28px 16px; border-bottom:1px solid var(--border); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.vb-conj-verb-fr { font-size:1.5rem; font-weight:800; color:var(--text-dark); }
.vb-conj-verb-cy { font-size:1.3rem; font-weight:700; color:var(--primary); }
.vb-conj-verb-ph { font-size:.95rem; color:var(--text-muted); font-style:italic; }
.vb-conj-table  { width:100%; border-collapse:collapse; }
.vb-conj-table tr { border-bottom:1px solid var(--border); }
.vb-conj-table tr:last-child { border-bottom:none; }
.vb-conj-table td { padding:14px 28px; font-size:1rem; }
.vb-conj-table td:first-child { color:var(--text-muted); font-weight:600; width:28%; }
.vb-conj-table td:nth-child(2) { font-weight:800; font-size:1.15rem; color:var(--text-dark); }
.vb-conj-table td:last-child { color:var(--text-muted); font-style:italic; font-size:.92rem; }
.vb-conj-table tr:nth-child(even) { background:#f8fafc; }
.vb-note      { background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:20px 24px; display:flex; gap:14px; align-items:flex-start; }
.vb-note-icon { font-size:1.4rem; flex-shrink:0; margin-top:1px; }
.vb-note-body { display:flex; flex-direction:column; gap:5px; }
.vb-note-title { font-size:.97rem; font-weight:800; color:var(--text-dark); }
.vb-note-text  { font-size:.93rem; color:var(--text-muted); line-height:1.65; }
.vb-note.blue   { border-color:#B5D4F4; background:#E6F1FB; }
.vb-note.blue .vb-note-title   { color:var(--blue-text); }
.vb-note.purple { border-color:#CECBF6; background:#EEEDFE; }
.vb-note.purple .vb-note-title { color:var(--purple-text); }
.vb-note.amber  { border-color:#FAC775; background:#FAEEDA; }
.vb-note.amber .vb-note-title  { color:var(--amber-text); }
.vb-separator { width:100%; border:none; border-top:2px dashed var(--border); margin:8px 0; }
.vb-score-bar   { width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.vb-score-label { font-size:1rem; color:var(--text-muted); font-weight:600; }
.vb-score-val   { font-size:1.6rem; font-weight:800; color:var(--primary); }
.vb-mode-selector { display:flex; gap:0; width:100%; max-width:460px; align-self:center; border:2px solid var(--border); border-radius:14px; overflow:hidden; }
.vb-mode-btn { flex:1; padding:13px 10px; border:none; background:var(--bg-card); font-size:.95rem; font-weight:700; cursor:pointer; transition:all .18s; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:3px; }
.vb-mode-btn + .vb-mode-btn { border-left:2px solid var(--border); }
.vb-mode-btn .vb-mode-pts { font-size:.75rem; font-weight:600; opacity:.7; }
.vb-mode-btn.active { background:var(--text-dark); color:white; }
.vb-mode-btn.active .vb-mode-pts { opacity:1; color:#a3e6cb; }
.vb-mode-btn:hover:not(.active) { background:#f1f5f9; color:var(--text-dark); }
.vb-ex-card { background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:22px 24px; display:flex; flex-direction:column; gap:14px; }
.vb-ex-num  { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); }
.vb-ex-fr   { font-size:.97rem; color:var(--text-muted); font-style:italic; }
.vb-cy-sentence { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; padding:6px 0; }
.vb-cy-word     { position:relative; display:inline-block; cursor:pointer; }
.vb-cy-text     { font-size:1.3rem; font-weight:700; color:var(--text-dark); padding:3px 2px; border-bottom:2px dotted transparent; transition:all .15s; display:block; }
.vb-cy-word:hover .vb-cy-text  { color:var(--primary); border-bottom-color:var(--primary); }
.vb-cy-word.tt-open .vb-cy-text { color:var(--primary); border-bottom-color:var(--primary); }
.vb-tooltip { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:var(--text-dark); color:white; border-radius:12px; padding:10px 16px; white-space:nowrap; z-index:200; pointer-events:none; animation:ttIn .2s ease forwards; }
.vb-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--text-dark); }
.vb-tt-fr { font-size:.95rem; font-weight:700; color:white; display:block; }
.vb-tt-ph { font-size:.8rem; color:rgba(255,255,255,.65); display:block; margin-top:2px; }
.vb-blank-wrap { display:inline-flex; align-items:center; }
.vb-blank { border:none; border-bottom:3px solid var(--border); background:transparent; outline:none; font-size:1.25rem; font-weight:700; color:var(--text-dark); width:160px; padding:3px 6px; text-align:center; transition:border-color .2s; user-select:text; }
.vb-blank:focus { border-bottom-color:var(--primary); }
.vb-blank.ok    { border-bottom-color:var(--primary); color:var(--primary); }
.vb-blank.ko    { border-bottom-color:var(--danger);  color:var(--danger);  animation:bglearnShake .4s; }
.vb-blank::placeholder { color:#cbd5e1; font-weight:400; font-size:1rem; }
.vb-ex-fb    { font-size:.88rem; font-weight:700; min-height:18px; }
.vb-ex-fb.ok { color:var(--primary); }
.vb-ex-fb.ko { color:var(--danger); }
.vb-pts-badge { display:inline-block; font-size:.75rem; font-weight:800; padding:3px 8px; border-radius:20px; margin-left:6px; background:#f0fdf4; color:var(--primary); border:1px solid #a3e6cb; }
.vb-pts-badge.gold { background:#fffbeb; color:var(--gold); border-color:#FAC775; }
.vb-btn-row   { display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; }
.vb-check-btn { background:var(--primary); color:white; border:none; padding:16px 44px; font-size:1.1rem; font-weight:700; border-radius:16px; cursor:pointer; transition:all .2s; }
.vb-check-btn:hover { background:var(--primary-hover); transform:translateY(-2px); } .nm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; width:100%; }
.nm-cell { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; transition:border-color .15s; }
.nm-cell:hover { border-color:#B5D4F4; }
.nm-num { font-size:1.5rem; font-weight:800; color:var(--text-dark); line-height:1; }
.nm-cy  { font-size:1rem; font-weight:700; color:var(--primary); text-align:center; }
.nm-ph  { font-size:.78rem; color:var(--text-muted); font-style:italic; text-align:center; }
.nm-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.nm-option { background:#f8fafc; border:2px solid var(--border); border-radius:14px; padding:16px 10px; font-size:1rem; font-weight:700; color:var(--text-dark); cursor:pointer; transition:all .18s; text-align:center; line-height:1.3; }
.nm-option:hover   { background:#e2e8f0; border-color:#94a3b8; transform:translateY(-1px); }
.nm-option.correct { background:#dcfce7; border-color:var(--primary); color:var(--primary); pointer-events:none; }
.nm-option.wrong   { background:#fee2e2; border-color:var(--danger);  color:var(--danger);  animation:bglearnShake .4s; pointer-events:none; }
.nm-quiz-card { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:28px 24px; display:flex; flex-direction:column; gap:18px; width:100%; }
.nm-q-label { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); text-align:center; }
.nm-q-value { font-size:3.2rem; font-weight:800; color:var(--text-dark); line-height:1; text-align:center; }
.nm-q-cy    { font-size:1.7rem; font-weight:800; color:var(--primary); text-align:center; }
.nm-score-bar { width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nm-prog-wrap  { flex:1; display:flex; flex-direction:column; gap:6px; }
.nm-prog-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); }
.nm-prog-bg   { height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.nm-prog-fill { height:100%; background:var(--primary); transition:width .4s cubic-bezier(.4,0,.2,1); width:0%; }
.nm-score-right { font-size:1.5rem; font-weight:800; color:var(--primary); white-space:nowrap; }
.nm-feedback    { font-size:1rem; font-weight:700; text-align:center; min-height:22px; }
.nm-feedback.ok { color:var(--primary); }
.nm-feedback.ko { color:var(--danger); }
.nm-type-selector { display:flex; gap:8px; width:100%; flex-wrap:wrap; justify-content:center; }
.nm-type-btn { flex:1; min-width:140px; padding:14px 10px; border:2px solid var(--border); border-radius:14px; background:var(--bg-card); font-size:.95rem; font-weight:700; color:var(--text-muted); cursor:pointer; transition:all .2s; text-align:center; }
.nm-type-btn:hover { border-color:var(--primary); color:var(--primary); }
.nm-type-btn.active { background:var(--primary); border-color:var(--primary); color:white; }
.pts-total-wrap { display:flex; align-items:center; gap:12px; padding:10px 18px; background:#fffbeb; border:2px solid #FAC775; border-radius:14px; }
.pts-total-icon { font-size:1.4rem; }
.pts-total-text { font-size:.85rem; font-weight:700; color:var(--amber-text); }
.pts-total-val  { font-size:1.8rem; font-weight:800; color:var(--gold); margin-left:auto; }
@media (min-width:768px) {
#bglearn-app { padding:60px; }
#bglearn-app h1 { font-size:3rem; margin-bottom:20px; }
#bglearn-app h2 { font-size:2rem; margin-bottom:20px; }
#bglearn-app p  { font-size:1.25rem; margin-bottom:40px; }
.bglearn-btn  { padding:24px 40px; font-size:1.25rem; }
.bglearn-tile { width:80px; height:80px; font-size:1.8rem; border-width:3px; border-radius:20px; }
.bglearn-word-cy { font-size:4.5rem; }
.bglearn-card { padding:60px; gap:40px; }
.bglearn-history-q { font-size:1.6rem; }
.bglearn-option    { font-size:1.25rem; padding:24px; }
}