:root {
  --bg: #14141c;
  --bg2: #1b1b26;
  --card: #232330;
  --card2: #2b2b3c;
  --text: #e9e9f1;
  --muted: #9c9cb4;
  --line: #ffffff14;
  --accent: #e63946;      /* roșu sigiliu japonez */
  --accent2: #7aa2f7;
  --good: #5dbb63;
  --bad: #e05555;
  --radius: 14px;
  --jp: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* scrollbar discret, întunecat */
html { scrollbar-width: thin; scrollbar-color: #3c3c50 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3c3c50; border-radius: 8px; border: 2px solid #14141c; }
::-webkit-scrollbar-thumb:hover { background: #4d4d64; }

body {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(1100px 500px at 85% -10%, #e6394611, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #7aa2f70d, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
  overscroll-behavior: none;
}

/* ═══════════ Navbar ═══════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: #14141ce8;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
}
/* topbar = aceeași lățime cu main (1180) => conținutul e mereu centrat sub navbar */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* logo-ul din bară = exact același か cu degrade și steluțe ca în favicon */
.brand-badge { display: block; width: 32px; height: 32px; flex-shrink: 0; box-shadow: 0 3px 12px #d6304a44; border-radius: 9px; }
.brand-badge svg { display: block; width: 100%; height: 100%; border-radius: 9px; }
.brand-name { font-weight: 800; font-size: 1.1rem; line-height: 1.1; display: flex; flex-direction: column; }
.brand-name small { font-weight: 500; font-size: .62rem; color: var(--muted); letter-spacing: .06em; }

/* nav = un singur rând care nu se rupe; se poate strânge (min-width:0) în loc să lățească pagina;
   overflow-x:auto e plasă de siguranță (nu se activează între 860–1600) */
.mainnav {
  display: flex; gap: 4px; flex: 1; min-width: 0;
  flex-wrap: nowrap; justify-content: center;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.nav-link {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: transparent; border: 0; color: var(--muted);
  font: 600 .9rem/1 inherit; font-family: inherit;
  padding: 8px 7px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; /* eticheta (japoneză + traducere) rămâne pe câte un rând, fără rupere per-glif */
  position: relative; transition: color .15s, background .15s;
}
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-link:hover { color: var(--text); background: #ffffff0a; }
.nav-link.active { color: #fff; background: #ffffff0f; }
.nav-link.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
/* etichetă stivuită compactă în nav: japoneza sus / traducerea dedesubt, ambele pe câte un rând */
.nav-link .ui-dual { line-height: 1.12; white-space: nowrap; }
.nav-link .ui-sub { line-height: 1.1; margin-top: 0; white-space: nowrap; }
.nav-link span[data-i18n] { white-space: nowrap; }

.topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* în modul japoneză/dual, butonul 漢 arată doar glifa (fără glosul lung „ほんもの（かんじ）") ca să încapă navul cu tot cu japoneză */
body.uimode-dual #scriptToggle button[data-script="j"] .seg-label,
body.uimode-jp   #scriptToggle button[data-script="j"] .seg-label { display: none; }
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.seg button.active { background: var(--accent); color: #fff; }
.seg-lang button.active { background: var(--accent2); color: #14141c; }
.seg.dim { opacity: .4; }

.quiz-exit {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: .85rem;
}
.quiz-exit:hover { color: var(--bad); border-color: var(--bad); }
#quizRun, #stepQuiz { position: relative; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════ Layout ═══════════ */
main { flex: 1; padding: 20px 16px 40px; max-width: 1180px; margin: 0 auto; width: 100%; }
.view { display: none; }
.view.active { display: block; animation: viewIn .22s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* stări de focus vizibile la navigarea cu tastatura, discrete la mouse */
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .view.active { animation: none; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ═══════ Reclame: rail lateral pe ecrane late, banner pe ecrane înguste/telefon ═══════ */
.ad-slot { position: relative; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #ffffff1c; border-radius: 14px; background: #ffffff06; }
.ad-slot .ad-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ffffff2e; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.ad-slot ins.adsbygoogle { position: relative; z-index: 1; }
.ad-slot.filled { border: 0; background: transparent; } /* reclamă reală umplută → fără chenar */
.ad-slot.filled .ad-ph { display: none; }             /* … și fără placeholder */
.ad-slot-v { width: 300px; min-height: 600px; }
.ad-slot-v .ad-ph { writing-mode: vertical-rl; }
.ad-slot-h { width: 100%; min-height: 90px; }

/* banner orizontal — implicit vizibil (ecrane înguste + telefon), în josul conținutului */
.ad-banner { display: block; max-width: 728px; margin: 10px auto 4px; }
/* fără reclame pe LAN/APK: ascunde containerele și redă lățimea normală a paginii */
body.no-ads .ad-rail, body.no-ads .ad-banner { display: none !important; }

/* rail lateral — flotant în spațiul mort din dreapta, DOAR pe ecrane foarte late (conținutul rămâne centrat) */
.ad-rail { display: none; }
@media (min-width: 1900px) {
  .ad-rail { display: block; position: fixed; top: 90px; right: calc((100vw - 1180px) / 2 - 344px); width: 300px; }
  .ad-banner { display: none; }
}
h2 { margin-bottom: 12px; }
h3 { margin: 22px 0 8px; color: var(--muted); font-size: .95rem; }
.panel {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; max-width: 640px; margin: 0 auto;
}

/* ═══════════ Intro ═══════════ */
.intro-card {
  background: linear-gradient(135deg, #262637, #1f1f2e);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 18px; font-size: .92rem; line-height: 1.6;
  max-width: 900px;
}
.intro-card b { color: var(--accent2); }
.intro-close {
  display: inline-block; margin-top: 10px; background: var(--accent); color: #fff;
  border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ═══════════ Sub-meniu Învață (Alfabet + lecții) ═══════════ */
.learn-nav {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  margin-bottom: 12px; scrollbar-width: none; flex-wrap: nowrap;
}
.learn-nav::-webkit-scrollbar { display: none; }
@media (min-width: 821px) {
  /* pe desktop: învelește toate lecțiile pe mai multe rânduri, fără scroll lateral */
  .learn-nav { flex-wrap: wrap; overflow-x: visible; }
}
.learn-chip {
  flex-shrink: 0; background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.15;
}
.learn-chip .lc-jp { font-family: var(--jp); font-size: 1rem; font-weight: 700; }
.learn-chip .lc-tr { font-size: .68rem; font-weight: 600; opacity: .85; }
.learn-chip:hover { color: var(--text); }
.learn-chip.active { background: var(--accent); color: #fff; border-color: transparent; }

#learnLesson { max-width: 1060px; }
.lesson-intro { color: var(--muted); font-size: .93rem; line-height: 1.55; margin: 4px 0 16px; max-width: 900px; border-left: 3px solid #7aa2f755; padding-left: 12px; }
#lessonBody h3 { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; color: var(--text); font-size: 1rem; }
#lessonBody h3::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, var(--accent2), #4ad295); }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; align-items: start; }

/* widgete interactive */
.widget {
  background: linear-gradient(135deg, #262637, #201f2e); border: 1px solid #7a5cff2e;
  border-radius: 16px; padding: clamp(16px, 3vw, 28px); margin: 0 auto 16px; width: 100%; max-width: min(100%, 720px);
  text-align: center;
}
.widget-title { font-weight: 700; color: #b8a6ff; font-size: .95rem; margin-bottom: 12px; }
.num-input {
  width: clamp(160px, 50%, 260px); text-align: center; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 10px; font-family: inherit;
}
.num-result { margin: 12px 0 4px; min-height: 2.4em; }
.nr-kana { font-family: var(--jp); font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.2; color: #fff; }
.nr-r { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.widget-btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.widget-hint { color: var(--muted); font-size: .76rem; margin-top: 10px; }
.clock-wrap { display: flex; justify-content: center; }
#clockSvg { width: clamp(200px, 55vw, 320px); height: clamp(200px, 55vw, 320px); }
.clock-ctrl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; }
.stepper { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; }
.stepper span { font-size: .85rem; color: var(--muted); min-width: 74px; }
.stepper span b { color: var(--text); font-size: 1.05rem; }
.stepper button {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent2); color: #101018; font-size: 1.2rem; font-weight: 700; line-height: 1;
}

/* demonstrative — scena cu distanță */
.demo-widget { max-width: 560px; }
.demo-scene { position: relative; height: clamp(130px, 24vw, 200px); margin: 6px 0 4px; }
.demo-line { position: absolute; left: 2%; right: 2%; top: 86px; height: 2px; background: linear-gradient(90deg, #7aa2f7, #e63946); border-radius: 2px; opacity: .5; }
.demo-person { position: absolute; top: 60px; transform: translateX(-50%); text-align: center; }
.demo-person .dp-dot { display: inline-block; font-family: var(--jp); font-size: .82rem; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; }
.demo-person .dp-dot.ko { border-color: #7aa2f7; }
.demo-person .dp-dot.so { border-color: #f0c34a; }
.demo-person small { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.demo-obj { position: absolute; top: 6px; transform: translateX(-50%); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.demo-obj b { font-family: var(--jp); font-size: 1.25rem; font-weight: 400; }
.demo-obj.far { opacity: .68; transform: translateX(-50%) scale(.82); }
.demo-obj.sel { border-color: var(--accent); background: #e6394622; opacity: 1; }
.demo-obj::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--line); transform: translateX(-50%); }

/* direcții — cruce */
.dir-cross { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); gap: 6px; max-width: clamp(300px, 70%, 460px); margin: 8px auto; }
.dir-btn { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; cursor: pointer; color: var(--text); font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dir-btn .da { color: var(--accent2); font-size: 1.1rem; line-height: 1; }
.dir-btn b { font-family: var(--jp); font-size: 1.05rem; font-weight: 400; }
.dir-btn small { color: var(--muted); font-size: .68rem; }
.dir-btn:hover { border-color: #ffffff30; }
.dir-btn.up { grid-column: 2; grid-row: 1; } .dir-btn.left { grid-column: 1; grid-row: 2; }
.dir-btn.right { grid-column: 3; grid-row: 2; } .dir-btn.down { grid-column: 2; grid-row: 3; }
.dir-center { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 10px; font-family: var(--jp); font-size: 1.05rem; }
.dir-center small { font-family: system-ui, sans-serif; font-size: .62rem; opacity: .85; }
.dir-extra { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.dir-chip { padding: 6px 10px; font-size: .82rem; }
.dir-chip b { font-family: var(--jp); font-weight: 400; }

/* anotimpuri — carduri colorate */
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.season-card { background: var(--card); border: 2px solid var(--sc); border-radius: 12px; padding: 12px 4px; cursor: pointer; color: var(--text); font-family: inherit; }
.season-card b { display: block; font-family: var(--jp); font-size: 1.5rem; font-weight: 400; color: var(--sc); }
.season-card small { color: var(--muted); font-size: .74rem; }
.season-card.sel { background: color-mix(in srgb, var(--sc) 22%, transparent); }
@media (max-width: 420px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }

/* culori — pastile cu bulină colorată */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.color-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 6px 8px; cursor: pointer; color: var(--text); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.color-card:hover { border-color: #ffffff30; }
.color-card.sel { border-color: var(--accent2); background: #7aa2f722; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ffffff30; }
.color-card b { font-family: var(--jp); font-size: 1.05rem; font-weight: 400; }
.color-card small { color: var(--muted); font-size: .72rem; }
.lesson-row {
  position: relative; display: block;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 46px 11px 14px; margin-bottom: 0; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lesson-row:hover { border-color: var(--accent2); transform: translateY(-1px); box-shadow: 0 5px 14px #00000038; }
.lesson-row .lr-txt { min-width: 0; }
.lesson-row .lr-jp { font-family: var(--jp); font-size: 1.35rem; line-height: 1.25; }
.lesson-row .lr-r { color: var(--muted); font-size: .78rem; margin-top: 1px; }
.lesson-row .lr-note { color: #c8ab5e; font-size: .74rem; margin-top: 5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.lesson-row .lr-note.open { -webkit-line-clamp: unset; }
.lesson-row .chip-icon { position: absolute; top: 10px; right: 10px; }
.lesson-row .lr-tr { display: block; color: var(--accent2); font-size: .87rem; font-weight: 600; margin-top: 4px; }
.lesson-row .chip-icon { flex-shrink: 0; }
.lesson-row.has-vis { padding-left: 10px; }
.lr-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 1px solid #ffffff33; box-shadow: 0 0 0 3px #ffffff08; }
.lr-arrow { width: 26px; text-align: center; font-size: 1.25rem; line-height: 1; color: #8ea2ff; flex: 0 0 auto; font-weight: 700; }
.nr-tr { color: #c9d2f0; font-size: .92rem; margin-top: 4px; }

/* ═══════════ Kanji (cu furigana) ═══════════ */
.kanji-search { margin: 2px 0 14px; }
.kanji-search input { width: 100%; max-width: 440px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: .95rem; }
.kanji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kanji-card { position: relative; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: transform .15s, border-color .15s; }
.kanji-card > .kanji-head, .kanji-card > .kanji-read, .kanji-card > .kj-build, .kanji-card > .kj-read, .kanji-card > .kanji-note, .kanji-card > .kanji-ex-wrap { position: relative; }
.kanji-card:hover { transform: translateY(-2px); border-color: var(--accent2); }
/* dicționar: blocuri care se încarcă și se golesc pe măsură ce derulezi */
@keyframes dictIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dict-block.dict-in > .dict-row { animation: dictIn .26s ease both; }
@media (prefers-reduced-motion: reduce) { .dict-block.dict-in > .dict-row { animation: none; } }
/* alegerea semnelor de printat: taburi + lista în ordinea printării */
#printPickTabs { margin-bottom: 8px; }
.ps-empty { color: var(--muted); font-size: .85rem; padding: 6px 2px 10px; }
.ps-head { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); margin: 2px 0 6px; }
.ps-head .ps-clear { margin-left: auto; padding: 3px 10px; font-size: .78rem; }
.ps-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; margin-bottom: 12px; }
.ps-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; background: var(--accent2); color: #101018; cursor: pointer; }
.ps-item:hover { background: #e05555; color: #fff; }
.ps-n { font-size: .7rem; opacity: .75; font-weight: 700; }
.ps-ch { font-family: var(--jp); font-size: 1.05rem; font-weight: 700; }
.ps-x { font-size: .7rem; opacity: .7; }
/* întrebare cu răspuns tastat (citirea kanji) — ocupă toată lățimea, nu o coloană din grilă */
.gq-type { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.gq-type-in { width: 100%; max-width: 340px; text-align: center; font-family: var(--jp); font-size: 1.5rem; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); }
.gq-type-in:focus { outline: none; border-color: var(--accent2); }
.gq-type-in.ok { border-color: #3ecf6a; }
.gq-type-in.bad { border-color: #e05555; }
.gq-type-echo { font-family: var(--jp); font-size: 1.2rem; color: var(--accent2); min-height: 1.4em; }
.gq-type .big-btn { max-width: 340px; }
.gq-type-note { margin-top: 6px; color: var(--muted); font-size: .88rem; }
.gq-ok { color: #3ecf6a; } .gq-bad { color: #e05555; }
/* harta kanji-urilor din Progres */
.heat { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.heat-c { font-family: var(--jp); font-size: 1.05rem; line-height: 1; padding: 6px 7px; border-radius: 7px; background: var(--card2); color: var(--muted); border: 1px solid transparent; }
.heat-c.m1 { background: #7a4b4b; color: #fff; } .heat-c.m2 { background: #a3703f; color: #fff; }
.heat-c.m3 { background: #a3a33f; color: #14141c; } .heat-c.m4 { background: #6da34f; color: #fff; }
.heat-c.m5 { background: #3ecf6a; color: #14141c; }
.heat-c.bad { background: #e0555526; color: #e08a8a; border-color: #e0555555; }
/* comutatorul de sunet din cartonașe */
.lg-mutebar { margin-top: 10px; }
.chip.lg-mute { font-size: .78rem; padding: 5px 12px; color: var(--muted); }
.chip.lg-mute.on { background: var(--accent2); color: #101018; border-color: transparent; }
/* presetări rapide la Antrenament */
.tr-presets { margin: 4px 0 14px; }
.tr-presets-lbl { color: var(--muted); font-size: .8rem; margin-bottom: 6px; text-align: center; }
.tr-preset-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.tr-preset { font-size: .82rem; padding: 7px 13px; }
.tr-preset.active { background: var(--accent2); color: #101018; border-color: transparent; font-weight: 600; }
/* antrenamentul pe etape din panoul de jocuri */
.lgs-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lgs-info { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.lgs-info span { color: var(--muted); font-size: .78rem; }
.lgs-nav { padding: 4px 12px; }
.lgs-bar { height: 5px; background: var(--card2); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.lgs-bar i { display: block; height: 100%; background: var(--accent2); border-radius: 3px; transition: width .3s; }
.lgs-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lgs-lab { color: var(--muted); font-size: .85rem; }
.lgs-q { font-size: 1.4rem; color: var(--text); text-align: center; }
.lgs-q.jp { font-family: var(--jp); font-size: 3.6rem; line-height: 1.1; }
.lgs-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; width: 100%; }
.lgs-opt { padding: 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--text); cursor: pointer; font-size: .95rem; transition: transform .12s, border-color .12s; }
.lgs-opt.jp { font-family: var(--jp); font-size: 1.9rem; }
.lgs-opt:hover { transform: translateY(-2px); border-color: var(--accent2); }
.lgs-opt.ok { background: #3ecf6a2e; border-color: #3ecf6a; }
.lgs-opt.bad { background: #e055552e; border-color: #e05555; }
.lgs-score { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 10px; }
.lgs-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.lgs-tools .chip { font-size: .78rem; padding: 5px 11px; }
.lgs-tools .chip.on { background: var(--accent2); color: #101018; border-color: transparent; }
.kd-speaker.lgs-spk { margin: 0 auto; }
/* modul „Scrie citirea" din jocuri */
.lgt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.lgt-jp { font-family: var(--jp); font-size: 4rem; line-height: 1.1; color: #fff; }
.lgt-tr { color: var(--muted); font-size: .9rem; margin-top: -6px; }
.lgt-in { width: 100%; max-width: 320px; text-align: center; font-family: var(--jp); font-size: 1.4rem; padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); }
.lgt-in:focus { outline: none; border-color: var(--accent2); }
.lgt-in.ok { border-color: #3ecf6a; } .lgt-in.bad { border-color: #e05555; }
.lgt-echo { font-family: var(--jp); font-size: 1.1rem; color: var(--accent2); min-height: 1.5em; text-align: center; }
.lgt-ok { color: #3ecf6a; } .lgt-bad { color: #e05555; }
.lgt .big-btn { max-width: 320px; }
.lgt-score { color: var(--muted); font-size: .8rem; }
.lesson-play-btn.alt { background: var(--card2); color: var(--text); margin-top: 8px; }
.lesson-play-btn.alt svg { stroke: var(--accent2); fill: none; stroke-width: 2; }
/* „nu-l confunda cu" — perechile de kana care seamănă */
.cf-box { margin: 10px 0 2px; padding: 9px 11px; background: #e0555514; border: 1px solid #e0555530; border-radius: 10px; text-align: left; }
.cf-h { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #e08a8a; margin-bottom: 6px; }
.cf-row { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; }
.cf-ch { font-family: var(--jp); font-size: 1.5rem; line-height: 1; color: var(--text); flex: 0 0 auto; }
.cf-r { font-size: .72rem; color: var(--muted); flex: 0 0 auto; }
.cf-txt { font-size: .84rem; color: var(--muted); line-height: 1.45; }
/* cârligele pentru citiri (音 / 訓) */
.kj-read { margin: 8px 0 2px; padding: 8px 10px; background: #7a5cf01a; border: 1px solid #7a5cf033; border-radius: 10px; }
.kj-read-h { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #a08ce8; margin-bottom: 6px; }
.kr-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.kr-tag { font-family: var(--jp); font-size: .72rem; background: #7a5cf033; color: #b9a8f0; border-radius: 5px; padding: 1px 5px; flex: 0 0 auto; }
.kr-r { font-family: var(--jp); font-size: .95rem; color: var(--text); flex: 0 0 auto; }
.kr-txt { font-size: .84rem; color: var(--muted); line-height: 1.45; }
/* gruparea kanji: teme și componente comune */
.kj-bars { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 14px; }
.chips.kj-group, .chips.kj-view { margin: 0; }
.chips.kj-view { margin-left: auto; }
.kj-simple { margin-bottom: 6px; }
.kj-simple .kp-item { position: relative; overflow: hidden; }
.kj-simple .kp-k { font-size: 2rem; position: relative; }
.kj-simple .kp-txt { position: relative; }
.kj-simple .kp-f { font-family: var(--jp); }
@media (max-width: 620px) { .chips.kj-view { margin-left: 0; } }
.kj-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; padding-left: 10px; border-left: 3px solid var(--accent2); }
.kj-sec-head h3 { margin: 0; font-size: 1.05rem; }
.kj-sec-head .kj-sub { color: var(--muted); font-size: .85rem; }
.kj-n { margin-left: auto; color: var(--muted); font-size: .8rem; background: var(--card2); border-radius: 999px; padding: 2px 9px; }
/* „din ce e făcut" */
.kj-build { margin: 8px 0 2px; padding: 8px 10px; background: var(--card2); border-radius: 10px; }
.kj-parts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kj-part { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: .78rem; color: var(--muted); }
.kj-part b { font-family: var(--jp); font-size: 1.15rem; color: var(--text); font-weight: 500; }
.kj-part.kj-res { border-color: var(--accent2); }
.kj-part.kj-tag { color: var(--accent2); background: transparent; border-style: dashed; }
.kj-plus, .kj-eq { color: var(--muted); font-size: .9rem; }
.kj-why { margin-top: 6px; font-size: .84rem; color: var(--text); line-height: 1.5; }
/* aceeași explicație în japoneză, în alfabetul ales din slider */
.kj-jp { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-family: var(--jp); font-size: .95rem; line-height: 1.9; color: var(--accent2); }
.kj-jp .jl-furi { color: var(--muted); }
/* vederea pe componente */
.kp-sec { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.kp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kp-char { font-family: var(--jp); font-size: 2.1rem; line-height: 1; color: var(--accent2); }
.kp-char.kp-link { cursor: pointer; }
.kp-char.kp-link:hover { color: var(--accent); }
.kp-name { color: var(--text); font-size: .95rem; }
.kp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kp-item { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: transform .15s, border-color .15s; }
.kp-item:hover { transform: translateY(-2px); border-color: var(--accent2); }
.kp-k { font-family: var(--jp); font-size: 1.7rem; line-height: 1; color: var(--text); }
.kp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-m { font-size: .82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-f { font-family: var(--jp); font-size: .72rem; color: var(--muted); }
/* fereastra de detaliu a kanji-ului */
#kanjiModal .modal-romaji { font-family: var(--jp); }
#kanjiModal .kanji-read { margin: 6px 0 2px; }
#kanjiModal .mw-jp { font-size: 1.15rem; }
.kanji-head { display: flex; align-items: baseline; gap: 12px; }
.kanji-audio { margin-left: auto; flex: 0 0 auto; align-self: center; }
.write-set-row { display: flex; justify-content: center; margin-bottom: 12px; }
.seg.write-set button { font-family: var(--jp); }
.kanji-char { font-family: var(--jp); font-size: 2.6rem; line-height: 1; color: #fff; }
.kanji-mean { color: var(--accent2); font-size: 1rem; }
.kanji-read { color: var(--muted); font-size: .82rem; margin: 8px 0 10px; font-family: var(--jp); }
.kr-lab { display: inline-block; background: #ffffff14; border-radius: 5px; padding: 0 5px; font-size: .72rem; color: #cfd6f0; margin-right: 2px; }
.kanji-note { color: #cdb87a; font-size: .82rem; line-height: 1.45; margin: 4px 0 10px; }
.kanji-ex-wrap { display: flex; flex-direction: column; gap: 6px; }
.kanji-ex { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; cursor: pointer; text-align: left; color: var(--text); width: 100%; }
.kanji-ex:hover { border-color: #ffffff30; }
.kanji-ex ruby { font-family: var(--jp); font-size: 1.25rem; }
.kanji-ex rt { font-size: .6em; color: var(--accent2); font-weight: 400; }
.kanji-ex .kx-r { color: var(--muted); font-size: .74rem; }
.kanji-ex .kx-tr { margin-left: auto; color: #c9d2f0; font-size: .85rem; text-align: right; }
.kanji-empty { color: var(--muted); padding: 24px; text-align: center; }

/* ═══════════ Dicționar ═══════════ */
.dict-wrap { max-width: 960px; margin: 0 auto; }
.dict-title { margin-bottom: 2px; }
.dict-sub { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.dict-searchbar { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 4px 12px; position: sticky; top: 8px; z-index: 5; }
.dict-searchicon { display: flex; color: var(--muted); flex: 0 0 auto; }
.dict-searchicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dict-searchbar input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 1.05rem; padding: 10px 4px; min-width: 0; }
.dict-cam { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; border: 0; background: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dict-cam svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.dict-cam:hover { filter: brightness(1.08); }
.dict-hint { color: var(--muted); padding: 22px 6px; text-align: center; line-height: 1.5; }
/* lista e împărțită în blocuri (pentru încărcarea pe măsură ce derulezi); fiecare bloc ține coloanele */
.dict-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dict-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; align-items: start; }
/* dicționar: cuvânt + butoane pe primul rând, descrierea pe rând separat dedesubt (bun pe telefoane) */
.dict-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.dict-row:hover { border-color: #ffffff2c; }
.dict-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dict-jp { font-family: var(--jp); font-size: 1.5rem; line-height: 1.25; color: #fff; min-width: 0; overflow-wrap: anywhere; }
.dict-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.dict-info { min-width: 0; }
.dict-r { color: var(--muted); font-size: .78rem; word-break: break-word; }
.dict-tr { color: var(--text); font-size: .95rem; margin-top: 1px; overflow-wrap: anywhere; }
.dict-note { color: #cdb87a; font-size: .76rem; line-height: 1.35; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dict-tag { display: inline-block; margin-top: 6px; font-size: .64rem; color: #b8c0e0; background: #ffffff12; border-radius: 6px; padding: 2px 8px; }
.dict-audio { flex: 0 0 auto; align-self: center; }
.dict-mic { flex: 0 0 auto; align-self: center; }
.dict-mic svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dict-write { flex: 0 0 auto; align-self: center; }
.dict-write svg { width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* progres: grafice + tabele */
.prog-block { margin: 20px 0; }
.prog-block h3 { margin-bottom: 8px; }
.prog-chart-lbl { color: var(--muted); font-size: .8rem; margin: 12px 0 4px; }
.prog-chart { width: 100%; height: 96px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.prog-chart.line polyline { fill: none; stroke: var(--accent2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.prog-chart.line circle { fill: var(--accent2); }
.prog-chart.bars rect { fill: var(--good); }
.prog-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .88rem; }
.prog-table th, .prog-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.prog-table th { color: var(--muted); font-weight: 600; font-size: .76rem; }
.prog-table .pt-jp { font-family: var(--jp); font-size: 1.05rem; }
.prog-table .pt-num { text-align: right; color: var(--accent2); font-weight: 600; }
.donut-row { display: flex; gap: 16px; flex-wrap: wrap; }
.donut-col { flex: 1; min-width: 160px; }
.dn-title { text-align: center; font-family: var(--jp); color: var(--muted); margin-bottom: 6px; }
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.donut { width: 128px; height: 128px; flex: 0 0 auto; }
.dn-center { fill: #fff; font-size: 20px; font-weight: 700; font-family: sans-serif; }
.dn-legend { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; }
.dn-leg { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dn-leg b { color: var(--text); }
.dn-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.prog-chart.barslab { height: 118px; }
.prog-chart.barslab .bl-lbl { fill: var(--muted); font-size: 11px; font-family: var(--jp); }
.prog-sub { color: var(--muted); font-size: .85rem; text-align: center; margin-top: 8px; }
.write-word-banner { display: flex; align-items: center; justify-content: center; gap: 12px; background: #7aa2f722; border: 1px solid #7aa2f755; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: .95rem; flex-wrap: wrap; }
.write-word-banner b { font-family: var(--jp); font-size: 1.15rem; }

/* joacă în lecție: cartonașe + karuta */
.lesson-play-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(100deg, #7aa2f7, #9d7cf7); border: 0; border-radius: 14px; padding: 13px; color: #fff; font-size: 1.05rem; font-weight: 600; cursor: pointer; margin: 4px 0 14px; }
.lesson-play-btn svg { width: 20px; height: 20px; fill: #fff; }
.lesson-play-btn:hover { filter: brightness(1.06); }
.lg-wrap { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.lg-tabs { display: flex; gap: 6px; margin-bottom: 14px; justify-content: center; flex-wrap: wrap; }
.lg-tab { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 7px 14px; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.lg-tab .lg-jp { font-family: var(--jp); font-size: .95rem; }
.lg-tab .lg-tr { font-size: .68rem; opacity: .85; }
.lg-tab.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.kr-inst { text-align: center; color: var(--text); font-size: .95rem; margin-bottom: 12px; }
.kr-count { text-align: center; margin-top: 10px; }
.lg-area { min-height: 210px; }
.lg-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.lg-count { color: var(--muted); font-size: .9rem; }
.flash-card { position: relative; width: 100%; max-width: 320px; height: 190px; margin: 0 auto; cursor: pointer; perspective: 900px; }
.fc-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .4s; }
.fc-back { transform: rotateY(180deg); }
.flash-card.flip .fc-front { transform: rotateY(180deg); }
.flash-card.flip .fc-back { transform: rotateY(360deg); }
.fc-jp { font-family: var(--jp); font-size: 2.8rem; color: #fff; }
.fc-hint { color: var(--muted); font-size: .78rem; }
.fc-r { color: var(--muted); font-size: 1rem; }
.fc-tr { color: var(--accent2); font-size: 1.4rem; text-align: center; padding: 0 12px; }
.kr-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kr-hint { color: var(--muted); font-size: .9rem; }
.kr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.kr-card { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 16px 8px; font-family: var(--jp); font-size: 1.3rem; color: #fff; cursor: pointer; min-height: 60px; }
.kr-card:hover { border-color: #ffffff35; }
.kr-card.done { background: #5dbb6322; border-color: var(--good); opacity: .5; cursor: default; }
.kr-card.bad { border-color: var(--bad); background: #e0555522; animation: shake .35s; }
.kr-done { text-align: center; padding: 30px 10px; }
.krd-title { font-size: 1.5rem; color: var(--good); font-weight: 700; margin-bottom: 6px; }
.krd-stats { color: var(--muted); margin-bottom: 16px; }

/* joc de învățat alfabetul */
.alpha-title { font-size: 1.4rem; font-weight: 700; font-family: var(--jp); margin-bottom: 10px; }
.kg-wrap { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.kg-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.kg-close { background: none; border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.kg-bar { flex: 1; height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.kg-bar > div { height: 100%; background: linear-gradient(90deg, #7aa2f7, #5dbb63); border-radius: 8px; transition: width .3s; }
.kg-body { padding: 12px 18px 20px; min-height: 240px; text-align: center; }
.kg-foot { padding: 14px 18px; border-top: 1px solid var(--line); }
.kg-foot.ok { background: #16351d; border-top-color: #2f7d3e; }
.kg-foot.bad { background: #3a1620; border-top-color: #8a2f42; }
.kg-fb { margin-bottom: 8px; font-size: 1rem; }
.kg-foot.ok .kg-fb { color: #7be08a; }
.kg-foot.bad .kg-fb { color: #f0889a; font-family: var(--jp); }
.kg-newlabel { color: var(--accent2); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.kg-char { font-family: var(--jp); font-size: 5rem; color: #fff; line-height: 1.1; }
.kg-char.sm { font-size: 3.4rem; }
.kg-rom { color: var(--muted); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.kg-tracewrap { display: flex; justify-content: center; margin: 14px 0 6px; }
#kgCanvas { background: var(--card); border: 1px solid var(--line); border-radius: 14px; touch-action: none; }
.kg-hint { color: var(--muted); font-size: .82rem; }
.kg-ctrl { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.kg-q { font-size: 1.1rem; margin: 10px 0 16px; }
.kg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; margin: 0 auto; }
.kg-listen { display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; background: var(--accent2); border: 0; border-radius: 16px; width: 110px; height: 76px; cursor: pointer; }
.kg-listen svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kg-done { padding: 24px 10px; }
.kg-donechars { font-family: var(--jp); font-size: 2.4rem; color: #fff; margin: 10px 0; letter-spacing: 6px; }
.kg-done .big-btn { margin-top: 14px; }
.kg-done .chip { margin-top: 10px; }
.offline-bar { height: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.offline-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #7aa2f7, #5dbb63); transition: width .2s; }
.offline-status { color: var(--muted); font-size: .82rem; min-height: 16px; }
.dict-ocr { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ocr-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.ocr-spin { width: 16px; height: 16px; border: 2px solid #ffffff30; border-top-color: var(--accent2); border-radius: 50%; animation: ocrspin .8s linear infinite; flex: 0 0 auto; }
@keyframes ocrspin { to { transform: rotate(360deg); } }
.ocr-found { font-size: 1rem; margin-bottom: 4px; }
.ocr-text { font-family: var(--jp); font-size: 1.4rem; color: #fff; }
.ocr-hint { color: var(--muted); font-size: .82rem; margin: 6px 0; }
.ocr-chars { display: flex; flex-wrap: wrap; gap: 6px; }
.ocr-chars .chip { font-family: var(--jp); font-size: 1.05rem; }

/* ═══════════ Antrenament (Duolingo-style) ═══════════ */
.trainer-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(100deg, #7aa2f7 0%, #9d7cf7 100%); border: 0; border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; cursor: pointer; color: #fff; }
.trainer-cta:hover { filter: brightness(1.05); }
.trainer-cta .tc-ic { width: 44px; height: 44px; border-radius: 12px; background: #ffffff28; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.trainer-cta .tc-ic svg { width: 26px; height: 26px; fill: #fff; }
.trainer-cta .tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trainer-cta .tc-txt b { font-size: 1.15rem; }
.trainer-cta .tc-txt small { opacity: .9; font-size: .82rem; }
.trainer-cta .tc-arrow { font-size: 1.8rem; opacity: .8; flex: 0 0 auto; }

.tr-panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: visible; }
.tr-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.tr-back { display: flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--accent2); font-size: .95rem; cursor: pointer; flex: 0 0 auto; padding: 4px 2px; font-family: inherit; }
.tr-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-progress { flex: 1; height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; }
#trBar { height: 100%; width: 0; background: linear-gradient(90deg, #7aa2f7, #5dbb63); border-radius: 8px; transition: width .35s ease; }
.tr-body { padding: 8px 18px 20px; max-width: 720px; width: 100%; margin: 0 auto; min-height: 42vh; }
.tr-foot { padding: 14px 18px; border-top: 1px solid var(--line); max-width: 720px; width: 100%; margin: 0 auto; position: sticky; bottom: 12px; background: var(--bg2); border-radius: 14px; box-shadow: 0 -6px 18px #0000004d; }
.tr-foot.ok { background: #16351d; border-top-color: #2f7d3e; }
.tr-foot.bad { background: #3a1620; border-top-color: #8a2f42; }
.tr-feedback { min-height: 22px; margin-bottom: 8px; font-size: .98rem; }
.tr-foot.ok .tr-feedback { color: #7be08a; }
.tr-foot.bad .tr-feedback { color: #f0889a; }
.tr-feedback b { font-family: var(--jp); }
#trCheck { width: 100%; }
#trCheck:disabled { opacity: .4; cursor: default; }
.tr-foot.ok #trCheck { background: var(--good); box-shadow: 0 5px 16px #5dbb6355; }
.tr-foot.bad #trCheck { background: #8a3a48; box-shadow: none; }
.opt-btn .opt-tr { color: var(--accent2); font-family: sans-serif; margin-top: 3px; font-size: .82rem; }
.tr-hint-inline { color: var(--muted); font-size: 1rem; font-family: sans-serif; }
.token-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 13px; }
.token-btn .tk-jp { font-family: var(--jp); font-size: 1.15rem; }
.token-btn .tk-r { font-family: sans-serif; font-size: .62rem; color: var(--muted); }

.tr-prompt { color: var(--muted); font-size: .95rem; margin: 6px 0 14px; }
.tr-bigword { font-family: var(--jp); font-size: 2.3rem; color: #fff; text-align: center; margin: 8px 0 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tr-bigword.small { font-size: 1.4rem; }
.tr-bigword.blank { letter-spacing: 1px; }
.tr-bigword .tr-r { font-size: .9rem; color: var(--muted); width: 100%; font-family: inherit; }
.tr-audio { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.tr-audio svg { width: 22px; height: 22px; fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-btn { background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 16px 12px; color: var(--text); font-size: 1.1rem; cursor: pointer; text-align: center; min-height: 58px; }
.opt-btn.jp { font-family: var(--jp); }
.opt-btn small { display: block; color: var(--muted); font-size: .72rem; font-family: sans-serif; margin-top: 2px; }
.opt-btn:hover { border-color: #ffffff35; }
.opt-btn.sel { border-color: var(--accent2); background: #7aa2f722; }
.opt-btn.good { border-color: var(--good); background: #5dbb6322; }
.opt-btn.bad { border-color: var(--bad); background: #e0555522; }

/* potrivire perechi */
.match-wrap { display: flex; gap: 12px; }
.match-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.match-btn { background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 15px 10px; color: var(--text); font-size: 1.05rem; cursor: pointer; min-height: 54px; }
.match-btn.jp { font-family: var(--jp); font-size: 1.2rem; }
.match-btn.sel { border-color: var(--accent2); background: #7aa2f722; }
.match-btn.done { border-color: var(--good); background: #5dbb6322; opacity: .55; cursor: default; }
.match-btn.bad { border-color: var(--bad); background: #e0555522; animation: shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ascultare */
.tr-listen { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 20px; background: var(--accent2); border: 0; border-radius: 16px; width: 120px; height: 84px; cursor: pointer; }
.tr-listen svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-listen span { color: #fff; font-size: 1.4rem; }

/* construire propoziție */
.tr-senttr { text-align: center; color: var(--text); font-size: 1.05rem; margin-bottom: 14px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.build-line { min-height: 56px; border-bottom: 2px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; margin-bottom: 18px; align-content: flex-start; }
.build-line.good { border-color: var(--good); }
.build-line.bad { border-color: var(--bad); }
.build-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.token-btn { background: var(--bg2); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 10px; padding: 10px 14px; color: var(--text); font-family: var(--jp); font-size: 1.15rem; cursor: pointer; }
.token-btn:hover { border-color: #ffffff35; }
.token-btn.used, .token-btn[disabled] { opacity: .25; cursor: default; }
.tr-hintsm { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 14px; }

/* scriere la tastatură */
.tr-input { width: 100%; max-width: 340px; display: block; margin: 0 auto; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); font-size: 1.3rem; text-align: center; }
.tr-input.good { border-color: var(--good); }
.tr-input.bad { border-color: var(--bad); }
.tr-kana-preview { text-align: center; font-family: var(--jp); font-size: 1.6rem; color: var(--accent2); min-height: 40px; margin-top: 12px; }

/* scriere canvas */
.tr-canvas-wrap { display: flex; justify-content: center; margin: 8px 0; }
#trCanvas { background: var(--card); border: 1px solid var(--line); border-radius: 14px; touch-action: none; }
.tr-canvas-ctrl { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

/* microfon */
.tr-mic { display: block; margin: 6px auto; background: var(--accent); border: 0; border-radius: 14px; padding: 16px 26px; color: #fff; font-size: 1.05rem; cursor: pointer; }
.tr-mic.rec { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.tr-heard { text-align: center; font-family: var(--jp); font-size: 1.5rem; color: #fff; min-height: 40px; margin-top: 12px; }

/* ecran start + final */
.tr-startscreen { display: flex; align-items: center; justify-content: center; }
.tr-start, .tr-end { max-width: 420px; width: 100%; text-align: center; }
.tr-start h2, .tr-end h2 { margin-bottom: 6px; }
.tr-sub { color: var(--muted); margin-bottom: 20px; }
.tr-stats, .tr-endstats { display: flex; justify-content: center; gap: 22px; margin: 18px 0; }
.tr-stats div, .tr-endstats div { display: flex; flex-direction: column; }
.tr-stats b, .tr-endstats b { font-size: 1.7rem; color: #fff; }
.tr-stats span, .tr-endstats span { color: var(--muted); font-size: .78rem; }
.tr-settings { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; margin: 12px 0 18px; }
.tr-settings summary { cursor: pointer; padding: 8px 0; color: var(--accent2); }
.tr-set-block { padding: 8px 0; }
.tr-set-block > label { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.tr-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tr-chk { display: flex; align-items: center; gap: 7px; font-size: .88rem; cursor: pointer; }
.tr-chk.disabled { opacity: .4; }
.tr-set-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.tr-set-row select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 10px; }
.tr-note { color: var(--muted); font-size: .78rem; margin-top: 6px; }
.tr-score { font-size: 3.6rem; font-weight: 800; color: #7aa2f7; margin: 6px 0; }
.tr-badge-line { color: var(--good); margin: 6px 0; font-size: .95rem; }
.tr-badge-line.up { color: #e6b83c; font-weight: 700; }
.tr-end .big-btn { margin-top: 16px; }
.tr-end .chip { margin-top: 10px; }

@media (max-width: 820px) {
  .tr-panel { border: 0; background: transparent; }
  .tr-top { padding: 8px 4px; }
  .tr-body { padding: 8px 4px 20px; }
  .tr-foot { bottom: 92px; background: var(--bg2); border: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tr-bigword { font-size: 1.9rem; }
  .tr-opts { grid-template-columns: 1fr 1fr; }
}

/* ═══════════ Grila kana (blocuri pe mai multe coloane pe desktop) ═══════════ */
#kanaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 4px 26px;
  align-items: start;
}
#kanaGrid h3 { grid-column: 1 / -1; margin-top: 20px; }
.row-block { min-width: 0; }
.row-title {
  margin: 14px 0 8px; display: flex; align-items: center; gap: 10px;
}
.row-badge {
  min-width: 30px; height: 26px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e6394620; color: #ff8a93; border: 1px solid #e6394638;
  border-radius: 8px; font-weight: 800; font-size: .78rem; letter-spacing: .06em;
  font-family: var(--jp), system-ui;
}
.row-members { color: var(--muted); font-size: .78rem; letter-spacing: .09em; }
.row-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--line), transparent); }
.kana-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kana-cell {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 4px 9px; text-align: center; cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s; position: relative; overflow: hidden;
}
.kana-cell:hover { background: var(--card2); border-color: #ffffff28; }
.kana-cell:active { transform: scale(.94); }
.kana-cell .kc { font-family: var(--jp); font-size: 2rem; line-height: 1.2; }
.kana-cell .kr { font-size: .72rem; color: var(--muted); margin-top: 2px; }
/* progresul umple caseta de jos în sus (nu doar o linie sus) */
.kana-cell .mastery, .kt-cell .mastery, .kanji-card > .mastery, .kj-simple .kp-item > .mastery { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 0; opacity: .22; pointer-events: none; transition: height .3s ease, background .3s; }
.mastery.m1 { height: 20%; } .mastery.m2 { height: 40%; } .mastery.m3 { height: 60%; }
.mastery.m4 { height: 80%; } .mastery.m5 { height: 100%; opacity: .26; }

.m1 { background: #7a4b4b; } .m2 { background: #a3703f; } .m3 { background: #a3a33f; }
.m4 { background: #6da34f; } .m5 { background: #3ecf6a; }

/* ═══════════ Modal ═══════════ */
.modal-back {
  position: fixed; inset: 0; background: #000a; display: none;
  align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--bg2); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 18px; position: relative;
  animation: slideUp .2s ease-out; max-height: 92vh; overflow-y: auto;
  border: 1px solid var(--line);
  scrollbar-width: none;              /* fără bară vizibilă în modal — rămâne scrollabil */
  -webkit-overflow-scrolling: touch;
}
.modal::-webkit-scrollbar { width: 0; height: 0; display: none; }
.mini-grid { scrollbar-width: thin; }
@media (min-width: 600px) {
  .modal-back { align-items: center; }
  .modal { border-radius: 20px; }
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } }
.modal-close {
  position: absolute; top: 10px; right: 12px; background: var(--card);
  border: 0; color: var(--muted); width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: .9rem;
}
.modal-anim-wrap { position: relative; width: fit-content; margin: 6px auto 10px; }
.modal-anim { display: flex; justify-content: center; gap: 8px; }
.modal-anim svg { background: var(--card); border-radius: 14px; }
.replay-fab { position: absolute; right: 7px; bottom: 7px; width: 32px; height: 32px; background: #16161ecc; }
.modal-actions .chip { padding: 9px 13px; font-size: .85rem; }
.modal-info { text-align: center; }
.modal-romaji { font-size: 1.5rem; font-weight: 700; font-family: var(--jp); }
.modal-ro { color: var(--accent2); font-size: 1.05rem; margin-top: 2px; }
.modal-note { color: var(--muted); font-size: .85rem; margin-top: 6px; line-height: 1.4; }
.modal-mnem {
  margin-top: 10px; background: linear-gradient(135deg, #2a2540, #232033);
  border: 1px solid #7a5cff2e; border-radius: 12px; padding: 10px 12px;
  font-size: .88rem; line-height: 1.45; text-align: left;
}
.modal-mnem .mnem-head { display: flex; align-items: center; gap: 6px; color: #b8a6ff; font-weight: 700; font-size: .78rem; margin-bottom: 3px; }
.modal-mnem .mnem-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.modal-words { margin-top: 10px; text-align: left; }
.modal-words .mw-head, .write-words .mw-head { color: var(--muted); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.mw-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
}
.mw-row:hover { border-color: #ffffff2c; }
.mw-row .mw-txt { line-height: 1.2; min-width: 0; }
.mw-row .mw-jp { font-family: var(--jp); font-size: 1.15rem; }
.mw-row .mw-jp b { color: var(--accent); font-weight: 400; }
.mw-row .mw-r { color: var(--muted); font-size: .74rem; margin-top: 2px; letter-spacing: .02em; }
.mw-row .mw-tr { margin-left: auto; color: var(--accent2); font-size: .82rem; text-align: right; white-space: nowrap; }
.write-words { max-width: 340px; margin: 10px auto 0; }
.modal-example {
  margin-top: 10px; background: var(--card); border-radius: 10px; padding: 8px;
  font-size: .95rem;
}
.modal-example .jp { font-family: var(--jp); font-size: 1.15rem; }
.modal-example .tr { color: var(--muted); font-size: .85rem; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* ═══════════ Chips / butoane ═══════════ */
.chip {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font-size: .88rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.chip svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chip-icon { padding: 5px 10px; }
.chip-icon svg { width: 13px; height: 13px; }
.time-input {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); padding: 7px 14px; font: 600 .88rem/1 system-ui, sans-serif;
  color-scheme: dark;
}
.chip:hover { border-color: #ffffff30; }
.chip.active { background: var(--accent2); color: #101018; border-color: transparent; }
.chip.primary { background: var(--accent); color: #fff; border-color: transparent; }
.chip.danger { background: transparent; color: var(--bad); border-color: var(--bad); margin-top: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.big-btn {
  width: 100%; padding: 15px; font-size: 1.05rem; font-weight: 700;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius);
  cursor: pointer; margin-top: 8px; font-family: inherit;
  box-shadow: 0 4px 18px #e6394633;
}

/* ═══════════ Scrie ═══════════ */
.write-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nav-kana {
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
}
.write-current { text-align: center; }
.write-char { font-family: var(--jp); font-size: 2.6rem; line-height: 1.15; }
.write-romaji { color: var(--muted); font-size: .9rem; }
.canvas-wrap { display: flex; justify-content: center; }
#drawCanvas {
  background: var(--card); border-radius: var(--radius); touch-action: none;
  width: min(88vw, 340px); height: min(88vw, 340px); cursor: crosshair;
  border: 1px solid var(--line);
}
.write-controls { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.write-feedback { text-align: center; margin-top: 12px; min-height: 1.4em; font-weight: 600; }
.write-feedback.good { color: var(--good); }
.write-feedback.bad { color: var(--bad); }

/* ═══════════ Test ═══════════ */
.quiz-opt-group { margin-bottom: 14px; }
.quiz-opt-group label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 6px; }
.quiz-hint { color: var(--muted); font-size: .82rem; margin: 10px 0; line-height: 1.4; }
.quiz-progress { height: 6px; background: var(--card); border-radius: 3px; margin-bottom: 20px; overflow: hidden; }
#quizBar { height: 100%; width: 0; background: var(--accent2); transition: width .25s; }
.quiz-question {
  font-family: var(--jp); font-size: 4.5rem; text-align: center; line-height: 1.2;
  min-height: 1.2em;
}
.quiz-question.small { font-size: 2.2rem; font-family: inherit; font-weight: 700; }
.quiz-question.audio { display: flex; justify-content: center; align-items: center; }
.quiz-question.word { font-size: 2.4rem; }
.quiz-answers.text-answers button { font-family: inherit; font-size: 1rem; }
.ans-jp { display: block; }
.ans-r {
  display: block; font-family: system-ui, sans-serif; font-size: .72rem;
  color: var(--muted); margin-top: 3px; letter-spacing: .03em;
}
.quiz-answers button.correct .ans-r, .quiz-answers button.wrong .ans-r { color: #ffffffcc; }
.q-r { font-family: system-ui, sans-serif; font-size: 1rem; color: var(--muted); margin-top: 6px; }
#quizCanvas {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  touch-action: none; width: min(75vw, 300px); height: min(75vw, 300px); cursor: crosshair;
}
#quizDraw .write-controls { margin-top: 10px; }
.pron-result { text-align: center; margin-top: 8px; font-size: .85rem; color: var(--muted); min-height: 1.2em; line-height: 1.4; }
.pron-result.good { color: var(--good); }
.pron-result.bad { color: var(--bad); }
#btnPron.active { background: var(--accent); color: #fff; border-color: transparent; }
.audio-big {
  width: 86px; height: 86px; border-radius: 50%; padding: 0;
  background: var(--card2); border: 1px solid #ffffff22;
}
.audio-big svg { width: 36px; height: 36px; }
.review-btn { margin-bottom: 16px; background: linear-gradient(135deg, #7aa2f7, #5b7fd9); box-shadow: 0 4px 18px #7aa2f733; }
.quiz-sub { text-align: center; color: var(--muted); margin: 4px 0 18px; }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-answers button {
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 16px 8px; font-size: 1.3rem; font-weight: 600;
  cursor: pointer; font-family: var(--jp);
  transition: background .12s;
}
.quiz-answers button:hover { border-color: #ffffff30; transform: translateY(-1px); }
.quiz-answers button { transition: border-color .15s, background .15s, transform .12s; }
.quiz-answers button:active { transform: scale(.98); }
.quiz-answers button.correct { background: var(--good); color: #fff; }
.quiz-answers button.wrong { background: var(--bad); color: #fff; }
.quiz-end-card { text-align: center; padding: 20px 10px; }
.quiz-end-card .score { font-size: 3rem; font-weight: 800; margin: 10px 0; }
.quiz-end-card .msg { color: var(--muted); margin-bottom: 20px; }

/* ═══════════ Progres ═══════════ */
#view-progress .panel { max-width: 720px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 8px; }

.xp-wrap { margin: 8px 0 6px; }
.xp-bar { height: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#xpFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--good)); transition: width .4s; }
.xp-label { color: var(--muted); font-size: .78rem; margin-top: 4px; text-align: right; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.badge {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 8px; text-align: center; font-size: .78rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.badge .b-star { font-size: 1.15rem; line-height: 1; }
.badge.on { border-color: #e6394655; color: var(--text); background: linear-gradient(140deg, #2e2433, #242432); }
.badge.on .b-star { color: #f4c14f; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat-card .v { font-size: 1.5rem; font-weight: 800; color: var(--accent2); }
.stat-card .l { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.heat-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.heat-cell {
  aspect-ratio: 1; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-family: var(--jp); font-size: .95rem; background: var(--card); color: var(--muted);
}
.heat-cell.hb1 { background: #5c4040; color: #fff; } .heat-cell.hb2 { background: #6e5636; color: #fff; }
.heat-cell.hb3 { background: #6e6e36; color: #fff; } .heat-cell.hb4 { background: #4d6e3d; color: #fff; }
.heat-cell.hb5 { background: #2e8f4e; color: #fff; }
.legend { display: flex; gap: 14px; margin-top: 10px; color: var(--muted); font-size: .8rem; align-items: center; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--card); margin-right: 4px; vertical-align: -1px; }
.legend .hb2 { background: #6e5636; } .legend .hb5 { background: #2e8f4e; }

/* ═══════════ Cuvinte (pași) ═══════════ */
#view-words { max-width: 920px; }
#view-words .intro-card { max-width: none; }
.step-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s, transform .08s;
}
.step-card:hover { border-color: #ffffff2c; }
.step-card:active { transform: scale(.985); }
.step-card.locked { opacity: .5; }
.step-num {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.step-card.locked .step-num { background: var(--card2); color: var(--muted); }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 700; }
.step-preview { color: var(--muted); font-size: .85rem; font-family: var(--jp); margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.lock-ico { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-preview span { font-family: system-ui, sans-serif; font-size: .78rem; }
.step-bar { height: 6px; background: var(--card); border-radius: 3px; overflow: hidden; }
.step-bar div { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--good)); }
.step-progress { color: var(--muted); font-size: .75rem; margin-top: 3px; }

.word-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.word-row:hover { border-color: #ffffff2c; }
.w-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card2); flex-shrink: 0; }
.w-dot.hb1 { background: #5c4040; } .w-dot.hb2 { background: #6e5636; }
.w-dot.hb3 { background: #6e6e36; } .w-dot.hb4 { background: #4d6e3d; } .w-dot.hb5 { background: #2e8f4e; }
.w-main { flex: 1; min-width: 0; }
.w-jp { font-family: var(--jp); font-size: 1.15rem; line-height: 1.3; }
.w-r { color: var(--muted); font-size: .78rem; }
.w-tr { color: var(--accent2); font-size: .88rem; text-align: right; max-width: 40%; }
.step-scenario { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 4px 0 2px; font-style: italic; }
#stepItems { margin: 14px 0; }
#btnStepQuiz { margin-bottom: 20px; }

/* ═══════════ Tab bar plutitor (doar mobil) ═══════════ */
.tabbar {
  position: fixed; display: none;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  background: #1c1c28f0;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid #ffffff1c; border-radius: 24px;
  padding: 6px; gap: 4px; z-index: 30;
  box-shadow: 0 10px 34px #000000a8, inset 0 1px 0 #ffffff0e;
}
.tab {
  flex: 1; background: transparent; border: 0; color: var(--muted);
  padding: 8px 0 7px; font-size: .68rem; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit;
  border-radius: 18px;
  transition: color .18s, background .18s, box-shadow .18s;
}
.tab em { font-style: normal; letter-spacing: .01em; }
.tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tab.active {
  color: #fff;
  background: linear-gradient(150deg, #ef4653, #cf2e3b);
  box-shadow: 0 5px 16px #e6394655;
}

/* ═══════════ Responsive ═══════════ */
/* bandă intermediară: renunț treptat la elementele late ca navul de sus să rămână curat până la dock-ul de 820px */
@media (max-width: 1320px) {
  .nav-link { padding: 8px 8px; }               /* 7 taburi → puțin mai compacte */
  .topbar-inner { gap: 12px; }
}
@media (max-width: 1180px) {
  #scriptToggle .seg-label { display: none; }   /* toggle → ひ / カ / 漢 (toate modurile) */
}
@media (max-width: 1010px) {
  #brandSub { display: none; }                  /* renunț la subtitlul brandului */
  .nav-link { padding: 8px 6px; }
  .mainnav { gap: 2px; }
}
@media (max-width: 960px) {
  .brand-name { display: none; }                /* păstrez badge-ul か, renunț la wordmark */
  .topbar-inner { gap: 10px; }
  .mainnav { gap: 2px; }
  .nav-link { padding: 8px 7px; }
}
@media (max-width: 820px) {
  .mainnav { display: none; }
  .tabbar { display: flex; }
  main { padding-bottom: 108px; }
  .topbar-inner { justify-content: space-between; gap: 10px; }
  .brand-name small { display: none; }
  .panel { padding: 16px 12px; border: 0; background: transparent; }
}
@media (max-width: 560px) {
  .seg-label { display: none; }
  .seg button { padding: 6px 10px; }
}

/* stroke animation */
.stroke-ghost { stroke: #4a4a5e; }
.stroke-anim { stroke: var(--text); }
.stroke-num { fill: var(--accent); font-size: 9px; font-family: sans-serif; }

/* ═══════════ Unelte Scrie (fișe + poză) ═══════════ */
.write-tools { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.write-tools .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.photo-hint { color: var(--muted); font-size: .8rem; text-align: center; margin-top: 8px; line-height: 1.4; }

#photoCanvas { display: block; margin: 0 auto; background: var(--card); border-radius: 12px; max-width: 100%; }
.mini-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 170px; overflow-y: auto; margin-bottom: 12px;
  padding: 4px; background: #00000022; border-radius: 10px;
}
.mini-kana {
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer;
  font-family: var(--jp); font-size: 1.05rem; line-height: 1.2;
}
.mini-kana.sel { background: var(--accent2); color: #101018; border-color: transparent; font-weight: 700; }
.photo-take { display: block; text-align: center; margin-bottom: 10px; cursor: pointer; }
.photo-score { text-align: center; font-size: 2.6rem; font-weight: 800; margin: 8px 0 2px; }
.photo-msg { text-align: center; color: var(--muted); margin-bottom: 8px; line-height: 1.4; }
.photo-score.s-good { color: var(--good); }
.photo-score.s-mid { color: #d8b44a; }
.photo-score.s-bad { color: var(--bad); }

/* ═══════════ Fișe printabile ═══════════ */
#printSheet { display: none; }
@media print {
  body { background: #fff; }
  body > *:not(#printSheet) { display: none !important; }
  #printSheet { display: block; background: #fff; color: #000; font-family: system-ui, sans-serif; padding: 4mm 5mm; }
  /* marginea mică suprimă antetul/subsolul browserului (titlu, URL, dată) */
  @page { size: A4; margin: 6mm; }
}
.sheet-head { font-size: 13pt; font-weight: 700; margin-bottom: 5mm; }
.sheet-head small { font-weight: 400; color: #666; margin-left: 3mm; }
.sheet-row { display: flex; gap: 1.6mm; margin-bottom: 3.2mm; align-items: center; break-inside: avoid; }
.sheet-label { width: 13mm; text-align: center; flex-shrink: 0; }
.sheet-label .sl-ch { font-family: var(--jp); font-size: 15pt; line-height: 1.15; }
.sheet-label .sl-r { font-size: 7.5pt; color: #666; }
.sheet-cell {
  width: 15.5mm; height: 15.5mm; flex-shrink: 0;
  border: 0.3mm solid #c9c9c9; border-radius: 1mm; position: relative;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet-cell svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* tabelul de alfabet printabil — stiluri și pentru fallback-ul fără iframe (#printSheet) */
#printSheet .cp-head { font-size: 13pt; font-weight: 700; margin-bottom: 2mm; color: #111; }
#printSheet .cp-head small { font-weight: 400; color: #666; margin-left: 3mm; }
#printSheet .cp-sec { margin-bottom: 2.5mm; }
#printSheet .cp-trow { display: flex; align-items: flex-end; justify-content: space-between; gap: 4mm; margin: 0 0 1mm; }
#printSheet .cp-title { font-size: 9.5pt; font-weight: 700; margin: 0; color: #111; }
#printSheet .ui-dual { display: inline-block; text-align: left; line-height: 1.2; }
#printSheet .ui-dual .ui-sub { display: block; font-size: 70%; font-weight: 400; color: #666; }
#printSheet table.cp { border-collapse: separate; border-spacing: 1.1mm; margin: 0 auto; }
#printSheet .cp th { padding: 0; font-weight: 700; }
#printSheet .cp .hd { display: block; font-size: 8pt; border-radius: 1.5mm; padding: 1mm 0; text-align: center; }
#printSheet .cp .vl { display: block; font-size: 8pt; color: #333; background: #efefef; border-radius: 1.5mm; width: 8mm; padding: 1mm 0; text-align: center; margin: 0 auto; }
#printSheet .cp td { padding: 0; }
#printSheet .cpc { border-radius: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#printSheet .cpc .c { font-weight: 600; line-height: 1.08; color: #191919; font-family: var(--jp); }
#printSheet .cpc .r { line-height: 1.25; }
#printSheet .cpe { border-radius: 2mm; border: 0.3mm dashed #ddd; }
#printSheet .cp-n { display: flex; align-items: center; gap: 3mm; justify-content: center; margin-top: 1.6mm; }
#printSheet .cp-n .note { font-size: 8pt; color: #555; }

/* ── SRS 2.0: etape numite ── */
.srs-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--card2); margin: 8px 0 12px; }
.srs-seg { min-width: 3px; }
.srs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.srs-leg { display: flex; align-items: center; gap: 6px; }
.srs-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.srs-leg b { color: var(--text); }
.leech-btn { margin-top: 12px; }

/* ── Furigana graduală ── */
ruby.fg-hide rt { opacity: 0; transition: opacity .25s ease; }
ruby.fg-hide:hover rt, ruby.fg-hide.fg-show rt { opacity: .55; }

/* ── Alfabet: unelte cap (carduri/tabel + orientare) ── */
.alpha-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }
.seg-mini { display: inline-flex; background: var(--card2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-mini button { border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.seg-mini button.on { background: var(--accent); color: #fff; }
.mini-btn { border: 1px solid var(--line); background: var(--card2); color: var(--text); padding: 6px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; }

/* ── Tabel gojūon ── */
.kt-sec { margin: 14px 0; }
.kt-sec h3 { font-size: 15px; margin: 0 0 8px; color: var(--text); }
.kt-wrap { grid-column: 1 / -1; width: 100%; } /* ocupă toate coloanele grilei #kanaGrid */
.kt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* tabel care umple lățimea și se scalează, ca grila de alfabet */
.kt { width: 100%; min-width: max-content; table-layout: auto; border-collapse: separate; border-spacing: 6px; }
.kt th { color: var(--muted); font-weight: 600; font-size: 12px; padding: 1px 2px; text-align: center; }
.kt th:first-child, .kt td:first-child { min-width: 22px; }
.kt td { padding: 0; }
/* casete de tabel identice cu cele din vizualizarea pe carduri */
.kt-cell { position: relative; overflow: hidden; height: 74px; min-width: 62px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; text-align: center; cursor: pointer; vertical-align: middle; transition: transform .08s, background .15s, border-color .15s; }
.kt-cell:hover { background: var(--card2); border-color: #ffffff28; }
.kt-cell:active { transform: scale(.94); }
.kt-cell .kt-ch { display: block; position: relative; font-family: var(--jp); font-size: 2rem; line-height: 1.2; color: var(--text); }
.kt-cell .kt-r { display: block; position: relative; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.kt-empty { background: transparent; }
/* tabelul ん = mic, nu se întinde pe toată lățimea */
.kt-single { width: auto; table-layout: auto; }
.kt-single .kt-cell { width: 62px; }
.kt-note { color: var(--muted); font-size: 12px; padding-left: 10px; vertical-align: middle; }
/* (nivelele din tabel folosesc acum aceeași umplere .mastery ca la carduri) */

/* ── Antrenament alfabet pe etape (drill) ── */
.drill-btn { background: var(--card2); }
.drill-btn .drill-ico { font-size: 1.1em; }
.kd-wrap { display: flex; flex-direction: column; gap: 14px; background: var(--card); border-radius: 16px; padding: clamp(12px,3vw,22px); }
.kd-fb { text-align: center; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 16px; background: var(--card2); color: var(--muted); }
.kd-fb.ok { background: #12613b; color: #eafff2; }
.kd-fb.bad { background: #5a1717; color: #ffe6e6; }
.kd-fb-pair { color: var(--accent2); }
.kd-prompt { text-align: center; font-family: var(--jp); font-size: clamp(36px, 10vw, 56px); font-weight: 700; padding: 14px 0 10px; }
/* când întrebarea e un cuvânt din română (sens → semn), nu are ce căuta fontul japonez */
.kd-prompt.kd-prompt-tr { font-family: inherit; font-size: clamp(20px, 5vw, 28px); }
.kd-prompt-sm { font-size: clamp(20px, 6vw, 30px); color: var(--muted); padding: 6px 0; }
/* același aspect ca la fila Test: două coloane, butoane late, verde/roșu la răspuns */
.kd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kd-opt { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 8px; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.kd-opt:hover { border-color: #ffffff30; transform: translateY(-1px); }
.kd-opt:active { transform: scale(.98); }
.kd-opt:disabled { cursor: default; transform: none; }
.kd-opt.ok { background: var(--good); border-color: transparent; }
.kd-opt.bad { background: var(--bad); border-color: transparent; }
.kd-opt.ok .kd-oc, .kd-opt.bad .kd-oc, .kd-opt.ok .kd-num, .kd-opt.bad .kd-num { color: #fff; }
.kd-opt .kd-num { position: absolute; top: 6px; left: 10px; font-size: 12px; color: var(--muted); }
.kd-opt .kd-oc { display: block; font-family: var(--jp); font-size: clamp(22px, 5.5vw, 32px); font-weight: 600; color: var(--text); }
@media (max-width: 420px) { .kd-opts { grid-template-columns: 1fr; } }
.kd-speaker { display: block; position: relative; margin: 6px auto 12px; width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(150deg, #6f7cf0, #8a5cf0); border: 0; color: #fff; cursor: pointer;
  box-shadow: 0 6px 22px #6f7cf055, inset 0 1px 0 #ffffff33; transition: transform .15s, box-shadow .15s; }
.kd-speaker:hover { transform: scale(1.06); box-shadow: 0 8px 28px #6f7cf077, inset 0 1px 0 #ffffff33; }
.kd-speaker:active { transform: scale(.95); }
.kd-speaker svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kd-speaker::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #8a8ff055; animation: spkPulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes spkPulse { 0% { transform: scale(.92); opacity: .8; } 70% { transform: scale(1.18); opacity: 0; } 100% { opacity: 0; } }
.kd-typewrap { display: flex; justify-content: center; }
.kd-type { width: min(280px, 80%); background: transparent; border: 0; border-bottom: 2px solid var(--muted); color: var(--text); font-size: 26px; text-align: center; padding: 8px 4px; outline: none; }
.kd-type:focus { border-color: var(--accent2); }
.kd-canvaswrap { display: flex; justify-content: center; }
#kgCanvas { background: #08080d; border: 1px solid var(--line); border-radius: 12px; touch-action: none; }
.kd-drawbtns { display: flex; gap: 10px; justify-content: center; align-items: center; }
.kd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kd-pcol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #0c0c12; border-radius: 12px; padding: 8px; }
.kd-ptile { background: #08080d; border: 1px solid var(--line); border-radius: 10px; padding: 16px 4px; font-family: var(--jp); font-size: clamp(18px, 5vw, 28px); color: var(--text); cursor: pointer; transition: transform .08s; }
.kd-ptile:active { transform: scale(.94); }
.kd-ptile.sel { background: var(--accent2); color: #06121f; border-color: var(--accent2); }
.kd-ptile.done { opacity: .16; pointer-events: none; }
.kd-ptile.bad { background: var(--bad); color: #fff; }
.kd-stagebar { display: flex; align-items: stretch; gap: 8px; }
.kd-nav { background: #0c0c12; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 0 16px; cursor: pointer; font-weight: 700; }
.kd-bar { position: relative; flex: 1; background: #0c0c12; border-radius: 10px; overflow: hidden; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.kd-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #1f4a63; transition: width .25s ease; }
.kd-stage-lbl { position: relative; font-weight: 700; color: var(--text); }
.kd-tools { display: flex; flex-wrap: wrap; gap: 8px; }
/* ═══════ Progres refăcut: erou cu inel de nivel + secțiuni-panou ═══════ */
#view-progress { display: none; }
#view-progress.active { display: flex; flex-direction: column; gap: 14px; }
#view-progress > .panel, #view-progress > #progExtra, #view-progress > #btnReset { width: 100%; max-width: 720px; margin: 0 auto; }
#view-progress > #btnReset { width: auto; }
.prog-hero { display: flex; gap: 22px; align-items: center; }
.prog-donut { position: relative; flex: 0 0 128px; width: 128px; height: 128px; }
.prog-donut svg { width: 100%; height: 100%; }
.prog-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prog-donut-c b { font-size: 2rem; font-weight: 800; line-height: 1; }
.prog-donut-c small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.prog-hero-right { flex: 1; min-width: 0; }
.prog-h, #progExtra h3 { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 1rem; margin: 0 0 12px; }
.prog-h::before, #progExtra h3::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, var(--accent2), #4ad295); }
#progExtra h3 { margin-top: 26px; }
#progExtra h3:first-child { margin-top: 0; }
#progExtra { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; }
#progExtra:empty { display: none; }
.heat-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .heat-cols { grid-template-columns: 1fr 1fr; } }
.heat-cols h4 { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat-card .v { font-size: 1.45rem; font-weight: 800; }
.stat-card .l { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.xp-wrap { margin-top: 12px; }
.xp-bar { height: 10px; background: var(--bg2); border-radius: 8px; overflow: hidden; }
.xp-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent2), #4ad295); border-radius: 8px; transition: width .4s ease; }
.xp-label { color: var(--muted); font-size: .75rem; margin-top: 5px; }
#view-progress .heat-grid .heat-cell { border-radius: 7px; transition: transform .1s; }
#view-progress .heat-grid .heat-cell:hover { transform: scale(1.12); }
#btnReset { align-self: flex-start; }
@media (max-width: 640px) {
  .prog-hero { flex-direction: column; }
  .prog-donut { flex-basis: auto; }
  .prog-hero-right { width: 100%; }
}

/* arborele familiei */
.fam-tree { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 10px; margin-bottom: 16px; text-align: center; }
.fam-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fam-link { width: 2px; height: 16px; background: var(--line); margin: 4px auto; }
.fam-node { display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; color: var(--text); cursor: pointer; transition: border-color .15s, transform .12s; }
.fam-node:hover { border-color: var(--accent2); transform: translateY(-1px); }
.fam-node.me { border-color: var(--accent); background: #e6394614; }
.fam-jp { font-family: var(--jp); font-size: 1.05rem; font-weight: 700; }
.fam-tr { color: var(--muted); font-size: .68rem; }

/* citirea (furigana) deasupra propozițiilor cu kanji, pe modul normal */
.jl { display: inline-block; }
.jl-furi { display: block; font-size: .66em; color: var(--muted); line-height: 1.3; }

/* bara de secțiuni a lecției (Dialog / Vocabular / Explicații / Exersează) */
.lsn-tabs { display: flex; gap: 6px; margin: 2px 0 18px; flex-wrap: wrap; }
.lsn-tab { flex: 1 1 auto; min-width: 110px; background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: .88rem; transition: border-color .15s, color .15s, background .15s; }
.lsn-tab:hover { border-color: #ffffff2c; }
.lsn-tab.active { background: linear-gradient(150deg, #ef4653, #cf2e3b); border-color: transparent; color: #fff; box-shadow: 0 4px 14px #e6394640; }
.lsn-tab .ui-sub { color: #ffffffb8; }

/* ═══════ Lecții stil Genki: dialog + explicații ═══════ */
.ldlg { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 4px 0 18px; }
.ldlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ldlg-title { font-weight: 700; }
.ldlg-line { display: flex; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.ldlg-line:hover { background: #ffffff08; }
.ldlg-line.now { background: #7aa2f716; }
.ldlg-who { flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; font-size: .9rem; margin-top: 2px; }
.ldlg-line.female .ldlg-who { background: #d06fb026; color: #e590c8; }
.ldlg-line.male .ldlg-who { background: #5b8dd426; color: #7aa9e8; }
.ldlg-txt { flex: 1; min-width: 0; }
.ldlg-jp { display: block; font-family: var(--jp); font-size: 1.15rem; line-height: 1.7; }
.ldlg-r { display: block; font-size: .78rem; }
.ldlg-tr { display: block; color: var(--muted); font-size: .85rem; margin-top: 1px; }
.lgram-h { margin: 22px 0 12px; }
.lgram-block { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.lgram-num { flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #7aa2f71c; color: var(--accent2); font-weight: 800; }
.lgram-body { flex: 1; min-width: 0; }
.lgram-title { font-weight: 700; margin-bottom: 5px; }
.lgram-text { color: var(--text); font-size: .92rem; line-height: 1.55; opacity: .92; }
.lgram-tblwrap { overflow-x: auto; margin: 10px 0 4px; }
.lgram-tbl { border-collapse: collapse; min-width: 60%; }
.lgram-tbl th { text-align: left; color: var(--accent2); font-size: .8rem; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); font-family: var(--jp); }
.lgram-tbl td { font-family: var(--jp); font-size: .98rem; padding: 6px 12px 6px 0; border-bottom: 1px solid #ffffff0a; }
.lgram-ex { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; margin-top: 8px; background: var(--bg2); border-radius: 10px; cursor: pointer; }
.lgram-ex:hover { background: #ffffff0c; }
.lgram-ex-jp { font-family: var(--jp); font-size: 1.02rem; }
.lgram-ex-r { font-size: .76rem; }
.lgram-ex-tr { color: var(--muted); font-size: .84rem; flex-basis: 100%; }
.lgram-ex .chip-icon { margin-left: auto; }
.lgq { text-align: center; }
.lgq-jp { font-family: var(--jp); font-size: 2rem; margin: 12px 0 4px; }
.lgq-tr { font-size: 1.2rem; font-weight: 700; margin: 14px 0 4px; }
.lgq .lg-count { color: var(--muted); font-size: .78rem; margin-bottom: 6px; }
.lgq-opts { margin-top: 12px; }
.lgq .big-btn { margin-top: 12px; }

.lgram-tips { background: linear-gradient(150deg, #2a2438, #232030); border: 1px solid #b08de033; border-radius: 16px; padding: 14px 16px; margin-top: 4px; }
.lgram-tips-h { font-weight: 700; color: #c9aef5; margin-bottom: 8px; }
.lgram-tip { position: relative; padding: 6px 0 6px 22px; font-size: .9rem; line-height: 1.5; color: var(--text); opacity: .92; }
.lgram-tip::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #b08de0; }

/* definiția din dicționar: japoneză (respectă sliderul) + traducere dedesubt */
.dict-def { display: block; margin-top: 4px; }
.dict-def-jp { display: block; font-family: var(--jp); font-size: .95rem; line-height: 1.6; }
.dict-def-tr { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }

.pt-center th:nth-child(n+3), .pt-center td:nth-child(n+3) { text-align: center; }
.leech-toggle { margin: 8px 8px 0 0; }
.lt-arrow { display: inline-block; margin-right: 4px; }

/* notarea Anki pe cartonașe + jocuri în stil drill */
.fc-yes { background: #14432e; border-color: #3fae8f66; color: #7fe0b8; font-weight: 700; }
.fc-yes:hover { border-color: #3fae8f; }
.fc-no { background: #4a1d25; border-color: #e0526a55; color: #ff97a6; font-weight: 700; }
.fc-no:hover { border-color: #e0526a; }
.kr-kd-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.kd-opt.kr-tile.done { opacity: .25; pointer-events: none; }
.kd-ptile.lgm { font-size: .95rem; }
.kd-ptile.lgm.jp { font-family: var(--jp); font-size: 1.1rem; }
.kr-hint { text-align: center; color: var(--muted); font-size: .85rem; margin: 4px 0 10px; }

/* planul de studiu 12 săptămâni */
.sp-card { background: linear-gradient(160deg, #23233a, #1d1d2c); border: 1px solid #7aa2f733; border-radius: 16px; padding: 6px 16px 12px; margin-bottom: 22px; }
.sp-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); font-weight: 700; font-size: .98rem; padding: 12px 0 8px; cursor: pointer; text-align: left; }
.sp-week { padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; background: #ffffff05; border: 1px solid transparent; }
.sp-week.now { border-color: var(--accent2); background: #7aa2f70f; }
.sp-week.done { opacity: .62; }
.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-n { flex: 0 0 auto; background: var(--card2); border-radius: 8px; padding: 3px 9px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.sp-t { font-weight: 700; }
.sp-here { background: var(--accent2); color: #10101a; border-radius: 999px; padding: 2px 10px; font-size: .68rem; font-weight: 800; }
.sp-pct { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.sp-bar { height: 6px; background: var(--bg2); border-radius: 5px; overflow: hidden; margin: 8px 0 6px; }
.sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), #4ad295); }
.sp-tasks { margin: 4px 0 0 18px; padding: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.sp-week.now .sp-tasks { color: var(--text); opacity: .9; }

/* sincronizare între dispozitive */
.sync-box { display: flex; flex-direction: column; gap: 10px; }
.sync-exp { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.sync-join { display: flex; gap: 8px; }
/* acțiunile de sincronizare: butoane cu iconiță, centrate sub cod */
.sync-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.sync-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit;
  font-weight: 650; font-size: .88rem; padding: 11px 20px; border-radius: 12px;
  transition: transform .12s, box-shadow .14s, background .14s, border-color .14s; }
.sync-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sync-btn:active { transform: scale(.97); }
.sync-btn-p { background: linear-gradient(135deg, #e63946, #c81e3a); color: #fff; box-shadow: 0 4px 14px #e6394638; }
.sync-btn-p:hover { box-shadow: 0 7px 20px #e6394652; }
.sync-btn-s { background: #ffffff0c; color: var(--muted); border: 1px solid #ffffff1c; }
.sync-btn-s:hover { background: #ffffff16; color: var(--text); border-color: #ffffff2e; }
.sync-in { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 9px 12px; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; outline: none; }
.sync-in:focus { border-color: var(--accent2); }
.sync-code { font-size: 1.7rem; font-weight: 800; letter-spacing: .18em; text-align: center; background: var(--bg2); border: 1.5px dashed #7aa2f766; border-radius: 12px; padding: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.sync-code-lbl { color: var(--muted); font-size: .85rem; text-align: center; }
.sync-status { color: var(--muted); font-size: .78rem; text-align: center; }

/* ═══════ Tabul Lecții: categorii + carduri ═══════ */
.less-cat { margin: 26px 0 12px; color: var(--muted); font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.less-cat::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--line), transparent); }
#lessonsHome .less-cat:first-child { margin-top: 4px; }
.less-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.less-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px 11px;
  color: var(--text); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.less-card:hover { border-color: var(--accent2); transform: translateY(-2px); box-shadow: 0 6px 18px #00000040; }
.less-jp { font-family: var(--jp); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.less-tr { color: var(--muted); font-size: .78rem; }
.less-bar { width: 100%; height: 5px; background: var(--bg2); border-radius: 4px; overflow: hidden; margin-top: 7px; }
.less-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), #4ad295); border-radius: 4px; }
.less-n { color: var(--muted); font-size: .68rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
#lessonBack { margin-bottom: 12px; }

/* selectorul Set/Etapă */
.kdp-sec { color: var(--muted); font-size: .82rem; font-weight: 700; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.kdp-big { min-width: 92px; font-family: inherit; font-size: .9rem; }
.kdp-big b { display: block; font-size: .92rem; }
.kdp-big small { font-size: .64rem; }
.kd-stage-lbl { cursor: pointer; text-decoration: underline dotted #ffffff33; text-underline-offset: 4px; }

/* panoul „Alege caracterele" */
.kdp-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.kdp-row { display: flex; gap: 8px; align-items: flex-start; }
.kdp-row-btn { flex: 0 0 64px; background: var(--card2); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 9px 4px; font-weight: 700; font-size: .78rem; cursor: pointer; transition: border-color .15s, color .15s; }
.kdp-row-btn.on { border-color: var(--accent2); color: var(--accent2); }
.kdp-chars { display: flex; flex-wrap: wrap; gap: 6px; }
.kdp-ch { display: flex; flex-direction: column; align-items: center; min-width: 46px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 6px 8px 4px; font-family: var(--jp); font-size: 1.15rem; cursor: pointer; transition: border-color .15s, background .15s; }
.kdp-ch small { font-family: inherit; font-size: .62rem; color: var(--muted); }
.kdp-ch.on { border-color: var(--accent2); background: #7aa2f71c; }
.kdp-ch.on small { color: var(--accent2); }
.kdp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kdp-actions .big-btn { flex: 1 1 220px; margin: 0; }
.kd-tool { background: var(--card2); border: 1px solid #ffffff14; color: var(--text); border-radius: 11px; padding: 10px 15px; cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.kd-tool:hover { border-color: var(--accent2); background: #33334a; transform: translateY(-1px); box-shadow: 0 4px 12px #00000040; }
.kd-tool:active { transform: scale(.97); }
.kd-tool.kd-exit { border-color: #e0526a3d; color: #ff97a6; }
.kd-tool.kd-exit:hover { border-color: #e0526a; background: #3a222b; }
.learn-chip { transition: border-color .15s, transform .15s, box-shadow .15s; }
.learn-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px #00000040; }
.mini-btn:hover, .seg-mini button:hover { border-color: var(--accent2); }
.kd-tool.kd-exit { margin-left: auto; }
.kd-timerbar { height: 5px; background: #0c0c12; border-radius: 3px; overflow: hidden; }
.kd-timerfill { height: 100%; width: 100%; background: var(--accent); animation: kdShrink 5.2s linear forwards; }
@keyframes kdShrink { from { width: 100% } to { width: 0 } }
@media (max-width: 480px) { .kd-pcol { gap: 6px; padding: 6px; } .kd-opts { gap: 8px; } }

/* ── Furigana deasupra caracterului kanji ── */
.kanji-charwrap { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.kanji-furi { font-family: var(--jp); font-size: 13px; color: var(--accent2); margin-bottom: 2px; }

/* ── Furigana pe cuvinte (citirea deasupra kanji), oriunde ── */
ruby.wfuri { ruby-position: over; }
ruby.wfuri > rt { font-size: 0.5em; color: var(--accent2); font-weight: 400; line-height: 1; }

/* ── Casete de exercițiu (Test) + motor generic de quiz N5 ── */
.practice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.pcard { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.pcard:hover { border-color: var(--accent2); transform: translateY(-2px); box-shadow: 0 6px 18px #00000040; }
.pcard.pc-n5 { background: linear-gradient(135deg, #221e4e, #7a2540); border-color: #ffffff22; }
.pc-ic { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-family: var(--jp); font-weight: 700; font-size: 19px; background: #0c0c12; border-radius: 12px; }
.pcard.pc-n5 .pc-ic { background: #ffffff1f; }
.pc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-txt b { font-size: 15px; }
.pc-txt small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pcard.pc-n5 .pc-txt small { color: #ffffffc8; }
.pc-arrow { color: var(--muted); font-size: 22px; flex: 0 0 auto; }
.gen-section { text-align: center; margin-bottom: 10px; }
.gen-section:not(:empty) { display: table; margin: 0 auto 10px; background: #7aa2f716; border: 1px solid #7aa2f733; color: var(--accent2); font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 5px 14px; letter-spacing: .02em; }
.gen-passage { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.gen-passage .rd-jp { font-family: var(--jp); font-size: 1.15rem; line-height: 1.75; color: var(--text); }
.gen-passage .rd-r { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.gq-jp { font-family: var(--jp); display: block; font-size: 1.5rem; line-height: 1.8; }
.gq-r { color: var(--muted); font-size: .85em; }
.gq-base-r { display: block; margin-top: 2px; font-weight: 400; }
.gq-hira { color: var(--accent2); font-weight: 800; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.gq-hint { color: var(--accent2); font-size: .88em; }
.gq-dlg-line { display: block; font-family: var(--jp); font-size: .95em; margin: 1px 0; }
.gen-explain { background: #14432e; border: 1px solid #2e7d5244; border-radius: 10px; padding: 10px 12px; margin-top: 12px; color: var(--text); font-size: .9rem; line-height: 1.5; }
.gen-quiz .kd-speaker { margin: 4px auto 10px; }
.gq-dlg-spk { width: 84px; height: 84px; }

/* ── introducere de secțiune (examen JLPT) ── */
.gq-intro { text-align: center; padding: 34px 10px 26px; }
.gq-intro-jp { font-family: var(--jp); font-size: 2.6rem; font-weight: 800; letter-spacing: .06em; }
.gq-intro-tr { color: var(--muted); margin-top: 6px; font-size: 1rem; font-weight: 600; }
.gq-intro-n { display: inline-block; margin-top: 14px; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; color: var(--accent2); font-weight: 700; font-size: .9rem; }

/* ── 文の組み立て: ordonare de fragmente ── */
.gq-order { width: 100%; grid-column: 1 / -1; }
.gq-order-built { min-height: 58px; background: var(--bg2); border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; font-family: var(--jp); font-size: 1.35rem; line-height: 1.7; margin-bottom: 12px; transition: border-color .2s; }
.gq-order-built.ok { border-color: #3fae8f; background: #14432e55; }
.gq-order-built.bad { border-color: #e0526a; background: #4a1d2555; }
.gq-order-head { color: var(--muted); }
.gq-order-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.gq-frag { font-family: var(--jp); font-size: 1.15rem; background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 16px; cursor: pointer; transition: transform .12s, background .15s, opacity .15s; }
.gq-frag:hover:not(:disabled) { background: #ffffff14; transform: translateY(-1px); }
.gq-frag.used { opacity: .25; }
.gq-order-row { display: flex; gap: 10px; align-items: center; }
.gq-order-row .gq-order-check { flex: 1; margin: 0; }
.gq-order-undo { flex: 0 0 auto; }

/* ── rezultat examen N5 (punctaj JLPT /180) ── */
.n5-result { max-width: 480px; margin: 0 auto; }
.n5r-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--jp); font-size: 2.4rem; font-weight: 800; padding: 18px 10px 12px; }
.n5r-badge small { font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--muted); }
.n5r-badge.pass { color: #4ad295; }
.n5r-badge.fail { color: #e0a94a; }
.n5r-score { font-size: 1.1rem; color: var(--muted); margin-bottom: 14px; }
.n5r-score b { font-size: 3rem; color: var(--text); font-weight: 800; margin-right: 4px; }
.n5r-split { display: flex; gap: 10px; margin-bottom: 6px; }
.n5r-split > div { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; font-size: .95rem; }
.n5r-split small { display: block; color: var(--muted); font-size: .74rem; margin-bottom: 3px; }
.n5r-split b { font-size: 1.3rem; }
.n5r-split em { display: block; font-style: normal; font-size: .7rem; color: var(--muted); margin-top: 2px; }
.n5r-split > div.ok { border-color: #3fae8f66; }
.n5r-split > div.low { border-color: #e0526a88; }
.n5r-passline { color: var(--muted); font-size: .78rem; margin-bottom: 16px; }
.n5r-secs { text-align: left; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.n5r-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.n5r-name { flex: 0 0 128px; font-family: var(--jp); font-weight: 700; }
.n5r-name small { display: block; font-family: inherit; color: var(--muted); font-weight: 500; font-size: .72rem; }
.n5r-bar { flex: 1; height: 8px; background: var(--bg2); border-radius: 6px; overflow: hidden; }
.n5r-bar div { height: 100%; background: linear-gradient(90deg, var(--accent2), #4ad295); border-radius: 6px; }
.n5r-val { flex: 0 0 44px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* cap test N5 cu buton Înapoi */
.gen-head { margin-bottom: 10px; }
.gen-back { display: inline-flex; align-items: center; gap: 4px; background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.gen-back:hover { border-color: var(--accent2); }

/* Standardizare Test: barele vechi devin carduri; ascund barele mari */
.trainer-cta, .review-btn { display: none !important; }
.pc-ic svg { width: 22px; height: 22px; }
.pcard.pc-feat { background: linear-gradient(135deg, #3a3d8f, #6d4bd0); border-color: #ffffff22; }
.pcard.pc-feat .pc-ic { background: #ffffff22; }
.pcard.pc-rev { background: linear-gradient(135deg, #274a86, #3f6fd0); border-color: #ffffff22; }
.pcard.pc-rev .pc-ic { background: #ffffff22; }
.pcard.pc-feat .pc-txt small, .pcard.pc-rev .pc-txt small { color: #ffffffcc; }
.pcard.pc-feat .pc-arrow, .pcard.pc-rev .pc-arrow, .pcard.pc-n5 .pc-arrow { color: #ffffffcc; }

/* Progres per lecție */
.lp-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.lp-name { flex: 0 0 40%; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-bar { flex: 1; height: 8px; background: var(--card2); border-radius: 5px; overflow: hidden; }
.lp-fill { height: 100%; background: var(--good); border-radius: 5px; transition: width .3s; }
.lp-num { flex: 0 0 auto; font-size: 12px; color: var(--muted); min-width: 42px; text-align: right; }

/* Meniu în japoneză (mod interfață): subtitlu tradus sub cuvântul japonez */
.nav-link .nav-sub, .tab .nav-sub { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.nav-link span[data-i18n], .tab em[data-i18n] { line-height: 1.1; }

/* Mod interfață „japoneză": traducerea mică sub eticheta japoneză */
/* wrapper stivuit: japoneza sus / traducerea dedesubt, chiar și în containere flex (nu una lângă alta) */
.ui-dual { display: inline-block; text-align: inherit; line-height: 1.18; vertical-align: middle; }
.ui-sub { display: block; font-size: .74em; color: rgba(255, 255, 255, .78); font-weight: 500; margin-top: 1px; line-height: 1.15; }
/* pe butoanele/chip-urile active (colorate) traducerea rămâne albă */
.chip.primary .ui-sub, .primary .ui-sub, .big-btn .ui-sub, .nav-link.active .ui-sub { color: rgba(255, 255, 255, .92); }
/* chip-ul activ are fundal deschis (accent2) → traducerea trebuie închisă, nu albă */
.chip.active .ui-sub { color: rgba(16, 16, 24, .82); }
#apkDownloadBtn { display: block; text-align: center; text-decoration: none; }

/* Setare master Romaji: cand e oprit, ascunde romaji-ul de referinta de peste tot */
body.no-romaji .ans-r,
body.no-romaji .dict-r,
body.no-romaji .fc-r,
body.no-romaji .gq-r,
body.no-romaji .kt-r,
body.no-romaji .kx-r,
body.no-romaji .lr-r,
body.no-romaji .mw-r,
body.no-romaji .nr-r,
body.no-romaji .q-r,
body.no-romaji .w-r,
body.no-romaji .kana-cell .kr { display: none !important; }

/* ── footer cu ghiduri (pagini statice) ── */
/* ═══════════ Footer ═══════════ */
.site-foot { margin: 34px auto 0; padding: 30px 20px 18px; border-top: 1px solid var(--line); }
.sf-grid { max-width: 1180px; margin: 0 auto; display: grid; gap: 26px 34px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, 1fr)); }
.sf-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sf-logo .brand-badge { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none; }
.sf-logo .brand-badge svg { width: 100%; height: 100%; display: block; }
.sf-logo b { font-size: 1.05rem; letter-spacing: -.01em; }
.sf-desc { color: var(--muted); font-size: .85rem; line-height: 1.6; max-width: 34ch; margin: 0 0 12px; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-chips span { font-size: .72rem; color: #9a9ab8; background: #ffffff0a; border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 99px; }
.sf-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.site-foot .sf-t { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: #7c7c96; margin-bottom: 2px; font-weight: 600; }
.sf-col a { font-size: .85rem; color: var(--muted); text-decoration: none; line-height: 1.35;
  transition: color .13s; cursor: pointer; }
.sf-col a:hover { color: var(--text); }
.sf-apk { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.sf-apk svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-bottom { max-width: 1180px; margin: 26px auto 0; padding-top: 15px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  color: #74748e; font-size: .78rem; }
@media (max-width: 860px) {
  .sf-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .site-foot { padding: 24px 16px 14px; }
  /* două coloane și pe telefon: pe una singură footerul devenea foarte lung */
  .sf-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .sf-col a { font-size: .82rem; }
  .sf-bottom { justify-content: center; text-align: center; }
}
/* dockul de jos de pe telefon nu trebuie să acopere finalul footerului */
@media (max-width: 900px) { .site-foot { padding-bottom: 26px; } }
/* titlu pentru cititoare de ecran și motoare de căutare */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════ PACHETE DE CARDURI ═══════ */
.pk-head h2 { margin-bottom: 6px; }
.pk-sub { color: var(--muted); font-size: .92rem; line-height: 1.55; margin-bottom: 14px; }
.pk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pk-chip { background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.pk-chip:hover { color: var(--text); }
.pk-chip.active { background: var(--accent); border-color: transparent; color: #fff; }
.pk-new { margin-bottom: 14px; }
.pk-empty { color: var(--muted); }
.pk-empty-s { color: var(--muted); font-size: .88rem; padding: 6px 0; }
.pk-loading { color: var(--muted); padding: 18px 0; text-align: center; }

.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.pk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  text-align: left; cursor: pointer; font: inherit; color: var(--text); display: flex; flex-direction: column; gap: 6px;
  transition: transform .12s, border-color .12s; }
.pk-card:hover { transform: translateY(-2px); border-color: #ffffff2a; }
.pk-t { font-weight: 700; font-size: .98rem; line-height: 1.25; }
.pk-desc { color: var(--muted); font-size: .82rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-by { color: var(--accent2); font-size: .78rem; }
.pk-n { color: var(--muted); font-size: .78rem; margin-top: auto; }
.pk-due { color: var(--accent); }
.pk-card .less-bar { height: 4px; background: #ffffff12; border-radius: 999px; overflow: hidden; display: block; }
.pk-card .less-bar i { display: block; height: 100%; background: var(--accent2); }

/* stele */
.pk-stars { display: inline-flex; align-items: center; gap: 1px; font-size: .82rem; }
.pk-star { color: #ffffff26; }
.pk-star.on { color: #f2c14e; }
.pk-star.half { background: linear-gradient(90deg, #f2c14e 50%, #ffffff26 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-votes { color: var(--muted); font-size: .74rem; margin-left: 6px; }

/* detaliu */
.pk-detail-head { margin: 14px 0 16px; }
.pk-detail-head h2 { margin-bottom: 6px; }
.pk-stats { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin-top: 8px; }
.pk-rate-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pk-rate-me { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; gap: 2px; }
.pk-setstar { background: none; border: 0; color: #ffffff30; font-size: 1.25rem; cursor: pointer; padding: 0 1px; line-height: 1; }
.pk-setstar:hover, .pk-setstar:hover ~ .pk-setstar { color: #f2c14e; }
.pk-rate-me:hover .pk-setstar { color: #f2c14e; }
.pk-rate-me .pk-setstar:hover ~ .pk-setstar { color: #ffffff30; }
.pk-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.pk-actions .big-btn { margin: 0; width: auto; min-width: 170px; }
.pk-list { border-top: 1px solid var(--line); padding-top: 6px; }
.pk-more { color: var(--muted); font-size: .85rem; padding: 10px 0; text-align: center; }

/* studiu */
.pk-study { position: relative; text-align: center; padding: 22px 18px 18px; }
.pk-face { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; }
.pk-front { font-family: var(--jp); font-size: 3.1rem; line-height: 1.15; color: #fff; word-break: break-word; }
.pk-back { border-top: 1px solid var(--line); padding-top: 14px; width: 100%; }
.pk-read { font-family: var(--jp); color: var(--accent2); font-size: 1.05rem; margin-bottom: 4px; }
.pk-mean { font-size: 1.25rem; }
.pk-note { color: var(--muted); font-size: .86rem; margin-top: 8px; }
.pk-audio { position: absolute; top: 0; right: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--line); color: var(--accent2); cursor: pointer; display: grid; place-items: center; }
.pk-audio svg { width: 18px; height: 18px; }
.pk-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.pk-no, .pk-yes { border: 0; border-radius: 12px; padding: 15px 10px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
.pk-no { background: #e0555522; color: #ff9a9a; border: 1px solid #e0555544; }
.pk-yes { background: #5dbb6322; color: #9be3a0; border: 1px solid #5dbb6344; }
.pk-no:hover { background: #e0555533; }
.pk-yes:hover { background: #5dbb6333; }
.pk-count { color: var(--muted); font-size: .8rem; margin-top: 14px; }
.pk-end { text-align: center; padding: 26px 18px; }
.pk-score { font-size: 2rem; font-weight: 800; color: var(--accent2); margin: 10px 0 20px; }

/* editor */
.pk-edit { padding: 18px; }
.pe-lab { display: block; color: var(--muted); font-size: .78rem; margin: 14px 0 6px; letter-spacing: .03em; }
.pe-in { width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: .92rem; }
.pe-in:focus { outline: none; border-color: var(--accent2); }
textarea.pe-in { resize: vertical; font-family: inherit; }
.pe-row { display: grid; grid-template-columns: minmax(70px, 1.2fr) minmax(50px, 1fr) 1.6fr 30px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.pe-f { font-family: var(--jp); color: #fff; }
.pe-r { color: var(--accent2); font-size: .8rem; }
.pe-b { color: var(--muted); }
.pe-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .9rem; }
.pe-x:hover { color: var(--bad); }
.pe-add { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr auto; gap: 8px; margin-top: 12px; align-items: center; }
.pe-hint { color: var(--muted); font-size: .8rem; margin-top: 10px; line-height: 1.5; }
.pe-foot { margin-top: 18px; }
@media (max-width: 620px) {
  .pe-add { grid-template-columns: 1fr; }
  .pe-row { grid-template-columns: 1fr 1fr 24px; }
  .pe-row .pe-b { grid-column: 1 / -1; }
}

/* căutare în pachetele publice */
.pk-search { margin-bottom: 14px; }
.pk-search input { width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; font: inherit; font-size: .92rem; }
.pk-search input:focus { outline: none; border-color: var(--accent2); }
.pk-sorts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pk-sort { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
  padding: 6px 13px; font: inherit; font-size: .8rem; cursor: pointer; }
.pk-sort.active { background: var(--card2); color: var(--text); border-color: transparent; }
.pk-pager { display: flex; gap: 12px; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; margin: 8px 0 20px; }

/* comentarii */
.pk-comments { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
.pk-comments h3 { font-size: 1rem; margin-bottom: 12px; }
.pk-com { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.55; }
.pk-com b { color: var(--accent2); font-size: .86rem; }
.pk-com-t { color: var(--muted); font-size: .74rem; margin-left: 8px; }
.pk-com-add { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pk-com-add input { max-width: 220px; }

/* cardurile de vocabular din Lecții */
.voc-card.locked { opacity: .45; cursor: default; }
.pk-newrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pk-newrow .big-btn { margin: 0; width: auto; min-width: 170px; }
#aiFile { display: block; color: var(--muted); font: inherit; font-size: .88rem; }
#aiFile::file-selector-button { background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 14px; font: inherit; font-size: .86rem; cursor: pointer; margin-right: 10px; }
#aiFile::file-selector-button:hover { border-color: var(--accent2); }

/* ── butoanele de acțiune de la un pachet ── */
.pk-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: stretch; margin-bottom: 20px; }
.pk-go, .pk-act { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 12px 18px;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; line-height: 1.15; border: 1px solid transparent; }
.pk-go { background: linear-gradient(150deg, #ef4653, #cf2e3b); color: #fff; box-shadow: 0 5px 16px #e6394640; }
.pk-go:hover { filter: brightness(1.08); }
.pk-act { background: var(--card); border-color: var(--line); color: var(--muted); }
.pk-act:hover { background: var(--card2); color: var(--text); }
.pk-act.danger { color: #e88; }
.pk-act.danger:hover { background: #e0555518; border-color: #e0555544; color: #ff9a9a; }
.pk-ic { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pk-go .pk-ic { fill: currentColor; stroke: none; }
.pk-go .pk-ic[viewBox] path[d^="M7 4.8"] { fill: currentColor; }
.pk-actions .ui-dual { text-align: left; }
@media (max-width: 560px) {
  .pk-actions { gap: 8px; }
  .pk-go, .pk-act { padding: 11px 14px; font-size: .85rem; }
  .pk-go { width: 100%; justify-content: center; }
}

/* ── ferestre de dialog proprii ── */
.kz-back { position: fixed; inset: 0; background: #05050ccc; backdrop-filter: blur(4px); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: kzIn .14s ease; }
@keyframes kzIn { from { opacity: 0 } to { opacity: 1 } }
.kz-dlg { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  width: 100%; max-width: 420px; box-shadow: 0 24px 64px #000a; animation: kzUp .16s cubic-bezier(.2,.8,.3,1); }
@keyframes kzUp { from { transform: translateY(10px) scale(.98) } to { transform: none } }
.kz-title { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.kz-text { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-bottom: 14px; }
.kz-in { width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 13px; font: inherit; font-size: .95rem; margin-bottom: 4px; }
.kz-in:focus { outline: none; border-color: var(--accent2); }
select.kz-in { cursor: pointer; }
.kz-btns { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }
.kz-ok, .kz-cancel { border: 0; border-radius: 11px; padding: 11px 20px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.kz-ok { background: var(--accent); color: #fff; }
.kz-ok:hover { background: #f0505c; }
.kz-ok.danger { background: #c9313d; }
.kz-cancel { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.kz-cancel:hover { color: var(--text); background: var(--card); }
/* bifa „adu și sunetele” la importul din Anki */
.ai-snd { display: flex; gap: 11px; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px; margin: 16px 0 4px; cursor: pointer; }
.ai-snd:hover { border-color: #ffffff26; }
.ai-snd input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.ai-snd b { display: block; font-size: .92rem; font-weight: 600; margin-bottom: 3px; }
.ai-snd small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; }
/* media în editorul de carduri */
.pe-media { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pe-mbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); border-radius: 10px; padding: 8px 13px; font: inherit; font-size: .84rem; cursor: pointer; }
.pe-mbtn:hover { background: var(--card2); color: var(--text); }
.pe-mbtn .pk-ic { width: 15px; height: 15px; }
.pe-mnote { color: var(--accent2); font-size: .8rem; }
.pe-has { color: var(--accent2); font-style: normal; font-size: .8em; }
/* imaginea unui card, la studiu */
.pk-img { max-width: 100%; max-height: 210px; border-radius: 12px; margin-top: 4px; object-fit: contain; }

/* pe ecrane late, bara de sus se poate lati peste 1180, ca cele 7 taburi sa incapa
   cu tot cu eticheta japoneza (altfel ultimul tab se taie) */
@media (min-width: 1300px) { .topbar-inner { max-width: 1330px; } }
@media (min-width: 1100px) and (max-width: 1299px) { .nav-link { padding: 8px 6px; gap: 5px; } }
@media (max-width: 1099px) { .nav-link { padding: 8px 5px; gap: 4px; font-size: .84rem; } .nav-link svg { width: 15px; height: 15px; } }

/* ── studiu stil Anki: contoare, patru butoane, ecranul de final ── */
.srs-counts { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; font-size: .82rem; font-weight: 700; }
.srs-counts span { min-width: 26px; text-align: center; }
.sc-new { color: #6ea8fe; }   /* noi */
.sc-lrn { color: #e8666f; }   /* în învățare */
.sc-rev { color: #5dbb63; }   /* de repetat */
.srs-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.srs-b { border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; background: var(--card);
  cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .1s; }
.srs-b:hover { transform: translateY(-1px); }
.srs-b b { font-size: .88rem; font-weight: 700; }
.srs-b i { font-style: normal; font-size: .74rem; color: var(--muted); }
.srs-again { background: #e0555518; border-color: #e0555540; } .srs-again b { color: #ff9a9a; }
.srs-hard  { background: #e8a54018; border-color: #e8a54040; } .srs-hard b  { color: #ffca7a; }
.srs-good  { background: #5dbb6318; border-color: #5dbb6340; } .srs-good b  { color: #9be3a0; }
.srs-easy  { background: #7aa2f718; border-color: #7aa2f740; } .srs-easy b  { color: #a8c3ff; }
.srs-again:hover { background: #e0555530; } .srs-hard:hover { background: #e8a54030; }
.srs-good:hover { background: #5dbb6330; } .srs-easy:hover { background: #7aa2f730; }
.pk-show { width: 100%; justify-content: center; margin-top: 18px; }
.srs-tag-new { color: #6ea8fe; font-weight: 600; }
.pk-done-ic { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; background: #5dbb6320;
  display: grid; place-items: center; color: #5dbb63; }
.pk-done-ic svg { width: 28px; height: 28px; }
.pk-done-sub { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-bottom: 18px; }
.pk-end .pk-go, .pk-end .pk-act { margin: 0 4px; }
@media (max-width: 520px) {
  .srs-btns { grid-template-columns: repeat(2, 1fr); }
  .srs-b { padding: 13px 6px; }
}
/* butonul de recapitulare zilnică, la Alfabet și Kanji */
.srs-due-btn { display: inline-flex; align-items: center; gap: 9px; margin: 10px 0 0 10px;
  background: linear-gradient(150deg, #4a8f56, #3d7a48); color: #fff; border: 0; border-radius: 12px;
  padding: 12px 18px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px #4a8f5640; }
.srs-due-btn:hover { filter: brightness(1.08); }
.srs-due-dot { width: 8px; height: 8px; border-radius: 50%; background: #bff5c9; box-shadow: 0 0 8px #bff5c9; animation: srsPulse 2s infinite; }
@keyframes srsPulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (max-width: 560px) { .srs-due-btn { margin-left: 0; width: 100%; justify-content: center; } }
a.brand { text-decoration: none; color: inherit; border-radius: 12px; transition: opacity .12s; }
a.brand:hover { opacity: .85; }

/* ═══════════ Pagina de start din aplicație (view-home) ═══════════ */
#view-home { padding-bottom: 30px; }
.hm-hero { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(22px,4vw,44px); margin-bottom: 16px;
  background: linear-gradient(150deg, #201a52 0%, #1a1630 45%, #17141f 100%); border: 1px solid #ffffff12; }
.hm-bgk { position: absolute; inset: 0; pointer-events: none; opacity: .07; }
.hm-bgk span { position: absolute; font-family: var(--jp); font-weight: 700; line-height: 1; color: #fff; }
.hm-bgk span:nth-child(1) { font-size: 15rem; top: -3rem; right: 4%; }
.hm-bgk span:nth-child(2) { font-size: 9rem; bottom: -1.5rem; left: 3%; }
.hm-bgk span:nth-child(3) { font-size: 7rem; top: 42%; right: 34%; }
/* alfabetul ales din slider iese puțin în față, restul se estompează */
.hm-bgk-h span:not(:nth-child(1)), .hm-bgk-k span:not(:nth-child(2)), .hm-bgk-j span:not(:nth-child(3)) { opacity: .3; }
.hm-hero-in { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); gap: clamp(18px,3vw,38px); align-items: center; }
.hm-hero-txt h1 { font-size: clamp(1.7rem,4.2vw,3.1rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.hm-grad { background: linear-gradient(92deg,#ff8a9b,#e63946 45%,#7aa2f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-lead { color: #c9c9dd; font-size: clamp(.95rem,1.5vw,1.12rem); line-height: 1.55; margin: 0 0 20px; max-width: 46ch; }
.hm-act { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hm-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 650;
  padding: 12px 20px; border-radius: 12px; transition: transform .12s, box-shadow .12s, background .15s; }
.hm-btn:hover { transform: translateY(-1px); }
.hm-btn-p { background: linear-gradient(135deg,#e63946,#c81e3a); color: #fff; box-shadow: 0 6px 18px #e6394640; }
.hm-btn-p:hover { box-shadow: 0 9px 24px #e6394655; }
.hm-btn-s { background: #ffffff12; color: var(--text); border: 1px solid #ffffff1f; }
.hm-btn-s:hover { background: #ffffff1c; }
.hm-w { width: 100%; justify-content: center; margin-top: 12px; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hm-chip { font-size: .78rem; color: #b9b9d2; background: #ffffff0d; border: 1px solid #ffffff14; padding: 5px 11px; border-radius: 99px; }

/* cardul din dreapta */
.hm-demo { position: relative; background: #1d1c2be0; border: 1px solid #ffffff16; border-radius: 18px; padding: 22px 20px; text-align: center;
  box-shadow: 0 18px 44px #0006; }
.hm-hanko { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; display: grid; place-items: center;
  border: 2px solid #e6394688; border-radius: 8px; color: #e63946cc; font-size: .72rem; font-weight: 700; line-height: 1.05;
  transform: rotate(-9deg); }
.hm-hanko span { writing-mode: vertical-rl; letter-spacing: .04em; }
.hm-demo-h { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px; }
.hm-demo-big { font-family: var(--jp); font-size: 4.6rem; line-height: 1; font-weight: 600; margin: 4px 0 2px; }
.hm-demo-r { color: var(--accent2); font-size: 1.05rem; font-weight: 600; margin-bottom: 14px; }
.hm-demo-w { display: flex; align-items: baseline; justify-content: center; gap: 9px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 13px; }
.hm-demo-w .jp { font-family: var(--jp); font-size: 1.5rem; }
.hm-demo-w i { color: var(--accent2); font-style: normal; font-size: .92rem; }
.hm-demo-w em { color: var(--muted); font-style: normal; font-size: .92rem; }
.hm-demo-n { font-size: .74rem; color: #7d7d95; margin-top: 12px; }

/* varianta pentru cine s-a întors: cifrele lui, nu ale noastre */
.hm-demo-p { text-align: left; }
.hm-p-h { font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }
.hm-p-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: center; }
.hm-p-row div { background: #ffffff0a; border-radius: 11px; padding: 10px 4px; }
.hm-p-row b { display: block; font-size: 1.5rem; line-height: 1.1; }
.hm-p-row span { font-size: .68rem; color: var(--muted); }
.hm-p-due { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .9rem; color: #c9c9dd; }
.hm-p-due b { color: var(--good); }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px #5dbb6326; }
.hm-p-gol { margin-top: 14px; font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* cifre */
.hm-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 26px; }
.hm-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 10px; text-align: center; }
.hm-stat b { display: block; font-size: clamp(1.25rem,2.6vw,1.8rem); font-weight: 750; line-height: 1.1;
  background: linear-gradient(135deg,#fff,#a9a9c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-stat span { font-size: .72rem; color: var(--muted); }

/* secțiuni */
.hm-sec { margin-bottom: 30px; }
.hm-h2 { font-size: clamp(1.15rem,2.4vw,1.6rem); font-weight: 750; margin: 0 0 4px; border: 0; padding: 0; }
.hm-sub { color: var(--muted); font-size: .92rem; margin: 0 0 16px; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 12px; }
.hm-card { position: relative; display: block; text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 17px 17px;
  transition: transform .14s, border-color .14s, box-shadow .14s; }
.hm-card:hover { transform: translateY(-2px); border-color: #ffffff26; box-shadow: 0 12px 28px #0005; }
.hm-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px;
  background: linear-gradient(135deg,#e6394626,#7aa2f726); color: #ff9aa6; }
.hm-card-t { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 5px; }
.hm-card-d { display: block; color: var(--muted); font-size: .87rem; line-height: 1.5; padding-right: 18px; }
.hm-go { position: absolute; right: 15px; bottom: 15px; color: #6f6f8c; transition: transform .14s, color .14s; }
.hm-card:hover .hm-go { color: var(--accent); transform: translateX(3px); }

/* ce e gata, ce urmează */
.hm-sts { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.hm-st { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; }
/* starea se vede din punctul de lângă titlu și din pastilă, fără bară pe margine */
.hm-st-h b { display: flex; align-items: center; gap: 9px; }
.hm-st-h b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5a5a72; flex: none; }
.hm-st-acum .hm-st-h b::before { background: var(--good); box-shadow: 0 0 0 4px #5dbb6322; }
.hm-st-urmeaza .hm-st-h b::before { background: #e8a13a; box-shadow: 0 0 0 4px #e8a13a22; }
.hm-st-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.hm-st-h b { font-size: 1.2rem; }
.hm-st-h span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  background: #ffffff0d; padding: 3px 9px; border-radius: 99px; }
.hm-st-acum .hm-st-h span { color: var(--good); background: #5dbb631f; }
.hm-st-urmeaza .hm-st-h span { color: #e8a13a; background: #e8a13a1f; }
.hm-st p { color: var(--muted); font-size: .87rem; line-height: 1.55; margin: 0; }

/* noutăți */
.hm-nws { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; }
.hm-nw { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.hm-nw-d { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent2); margin-bottom: 9px; }
.hm-nw ul { margin: 0; padding-left: 17px; }
.hm-nw li { color: #c2c2d6; font-size: .87rem; line-height: 1.65; }

/* încheiere */
.hm-cta { text-align: center; border-radius: 20px; padding: clamp(26px,4vw,42px) 20px;
  background: linear-gradient(140deg,#201a52,#2a1636 60%,#1d1424); border: 1px solid #ffffff12; }
.hm-cta h2 { font-size: clamp(1.25rem,2.8vw,1.8rem); font-weight: 750; margin: 0 0 6px; border: 0; padding: 0; }
.hm-cta p { color: #b9b9d2; margin: 0 0 18px; font-size: .95rem; }

@media (max-width: 820px) {
  .hm-hero-in { grid-template-columns: 1fr; }
  .hm-stats { grid-template-columns: repeat(2,1fr); }
  .hm-bgk span:nth-child(3) { display: none; }
}
@media (max-width: 460px) {
  .hm-act { flex-direction: column; align-items: stretch; }
  .hm-btn { justify-content: center; }
  .hm-demo-big { font-size: 3.8rem; }
}/* ═══════════ Fila „Recapitulare” din marginea ecranului ═══════════
   Discretă: doar o săgeată cu numărul de repetat. Textul apare la hover, pe desktop.
   Se vede din orice tab, dar numai când chiar ai ceva de repetat. */
#srsRail {
  position: fixed; right: 0; top: 50%; transform: translate(110%, -50%);
  z-index: 45; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden;
  width: 32px; height: 48px; padding: 0; border: 1px solid #5dbb6340; border-right: 0;
  cursor: pointer; font: inherit; color: #8fd996;
  background: #1c2a1eec; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 11px 0 0 11px; box-shadow: -2px 3px 12px #0006;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), width .18s, background .18s, color .18s;
}
#srsRail.on { display: flex; transform: translate(0, -50%); }
#srsRail svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.srs-rail-n { flex: none; font-size: .72rem; font-weight: 700; color: #cfeed3; line-height: 1; }
.srs-rail-t { display: none; }
/* pe desktop se desface la hover și arată textul */
@media (hover: hover) and (min-width: 901px) {
  #srsRail:hover { width: 158px; height: 44px; flex-direction: row; gap: 7px; background: #2a4430f2; color: #b6e9bc; }
  #srsRail:hover .srs-rail-t { display: block; font-size: .85rem; font-weight: 600; white-space: nowrap; }
  #srsRail:hover .srs-rail-n { padding: 2px 8px; border-radius: 99px; background: #5dbb6333; }
}
/* pe telefon: și mai mică, deasupra barei de jos */
@media (max-width: 900px) {
  #srsRail { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(110%, 0); width: 29px; height: 43px; }
  #srsRail.on { transform: translate(0, 0); }
  #srsRail svg { width: 12px; height: 12px; }
  .srs-rail-n { font-size: .68rem; }
}
/* pe ecrane foarte late apare reclama laterală fixă: fila coboară în colț, ca să nu o acopere */
@media (min-width: 1900px) {
  #srsRail { top: auto; bottom: 26px; transform: translate(110%, 0); }
  #srsRail.on { transform: translate(0, 0); }
}
@media print { #srsRail { display: none !important; } }
/* ═══════════ Panoul de setări ═══════════
   Pe desktop: fereastră lată, centrată, cu secțiunile pe două coloane.
   Pe telefon: rămâne foaia care urcă de jos, cu o singură coloană. */
.modal-set { max-width: 480px; }
.set-head { position: relative; text-align: center; margin-bottom: 16px; padding: 0 42px; }
.set-head h2 { margin: 0; border: 0; padding: 0; font-size: 1.35rem; }
.modal-set .modal-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.set-sec { background: #ffffff07; border: 1px solid var(--line); border-radius: 16px; padding: 16px 15px 6px; margin-bottom: 12px; }
/* titlul categoriei: mare, centrat, cu o linie subțire de o parte și de alta */
.set-sec-t {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em; color: #c6c6dc;
  text-transform: none; margin-bottom: 16px; text-align: center;
}
.set-sec-t::before, .set-sec-t::after {
  content: ""; flex: 1; height: 1px; max-width: 70px;
  background: linear-gradient(90deg, transparent, #ffffff1f);
}
.set-sec-t::after { background: linear-gradient(90deg, #ffffff1f, transparent); }
.set-sec-t .ui-sub { font-size: .72em; }
.set-sec-wide { padding-bottom: 16px; }
/* fiecare opțiune: eticheta și butoanele centrate pe mijlocul categoriei */
.set-row { margin-bottom: 18px; text-align: center; }
.set-row > label { display: block; color: var(--text); font-size: .88rem; font-weight: 550; margin-bottom: 9px; }
.set-row .chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.set-row .set-hint { display: block; color: #7f7f9a; font-size: .76rem; line-height: 1.5; margin-top: 8px; }
.set-row .big-btn { margin-top: 2px; }
/* butoanele: dreptunghi cu colțuri rotunjite, nu pastilă */
.set-row .chip {
  border-radius: 10px; padding: 9px 16px; min-width: 62px; font-weight: 600;
  border: 1px solid #ffffff17; background: #ffffff08; color: var(--muted);
  transition: background .13s, border-color .13s, color .13s, transform .1s;
}
.set-row .chip:hover { background: #ffffff12; color: var(--text); }
.set-row .chip:active { transform: scale(.97); }
.set-row .chip.active {
  background: linear-gradient(135deg, #5b7ce0, #4a63c8); border-color: #7aa2f755;
  color: #fff; box-shadow: 0 3px 10px #4a63c840;
}
/* codul de sincronizare rămâne centrat, dar restul secțiunii nu se strâmbă */
.set-sec-wide .set-row { text-align: left; }
@media (min-width: 760px) {
  .modal-back#setBack { align-items: center; padding: 22px; }
  .modal-set { max-width: 880px; border-radius: 20px; animation: fadeIn .16s ease-out; }
  .set-cols { columns: 2; column-gap: 16px; }
  .set-cols .set-sec { break-inside: avoid; display: inline-block; width: 100%; }
  .set-head h2 { font-size: 1.5rem; }
}
@media (min-width: 1200px) { .modal-set { max-width: 980px; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* la tastare: chenar roșiatic cât timp textul nu poate ajunge răspunsul, fără să ia răspunsul */
#kdType.off-track, .lg-type-in.off-track { border-color: #e0555577; box-shadow: 0 0 0 3px #e0555518; }