/* Fonturi locale (aplicația merge offline). Subsetul vietnamese aduce ẽ, folosit în pronunții. */
@font-face { font-family: 'Fraunces'; font-weight: 400 700; font-display: swap; src: url(../fonts/fraunces-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Fraunces'; font-weight: 400 700; font-display: swap; src: url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-weight: 400 700; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #0e1322;
  --bg2: #121a2d;
  --panou: #172036;
  --panou2: #1e2944;
  --linie: rgba(226, 232, 245, 0.09);
  --linie-tare: rgba(226, 232, 245, 0.17);
  --text: #eef0f5;
  --muted: #9aa4bc;
  --slab: #7d88a3; /* ≥ 4,5:1 și pe fundal, și pe panou: e folosit pe texte de 11–12px */
  --rosu: #ff7a66;
  --rosu-slab: rgba(255, 122, 102, 0.14);
  --albastru: #86aaff;
  --albastru-slab: rgba(134, 170, 255, 0.14);
  --pr: #b4c8ff;
  --verde: #6fd3a0;
  --verde-slab: rgba(111, 211, 160, 0.14);
  --chihlimbar: #f0b45a;
  --chihlimbar-slab: rgba(240, 180, 90, 0.14);
  /* Sunetele fără echivalent românesc din pronunție: auriu, nu roșu (roșul înseamnă „greșit”). */
  --sunet: #f2bd63;
  /* Timpul de lucru (Progres): o singură nuanță de verde, de la puțin la mult (validată: monotonă, ≥ 2:1 pe panou). */
  --timp-1: #3b7057;
  --timp-2: #499170;
  --timp-3: #56b489;
  --timp-4: #64d8a4;
  --timp-pista: rgba(100, 216, 164, 0.14);
  /* De unde vin orele spre 1.000: categorice, validate (bandă L, ΔE CVD ≥ 18, ≥ 3:1 pe panou). Doar pe marcaje, nu pe text. */
  --sursa-app: #2eaa79;
  --sursa-video: #6280da;
  --sursa-audio: #c48525;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --sus: env(safe-area-inset-top, 0px);
  --jos: env(safe-area-inset-bottom, 0px);
  --raza: 18px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}
body {
  background:
    radial-gradient(110% 55% at 50% -12%, rgba(255, 122, 102, 0.08), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(134, 170, 255, 0.07), transparent 60%),
    var(--bg);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ic { width: 22px; height: 22px; flex: none; display: inline-block; }
.ic svg { width: 100%; height: 100%; display: block; }
.ascuns { display: none !important; }

#app { height: 100%; display: flex; flex-direction: column; padding-top: var(--sus); }

/* Bara de sus */
.bara { display: flex; align-items: center; gap: 10px; padding: 12px 18px 8px; }
.titlu { display: flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: 0.01em; }
.tricolor { display: inline-flex; gap: 3px; }
.tricolor i { width: 4px; height: 18px; border-radius: 2px; }
.tricolor i:nth-child(1) { background: var(--albastru); }
.tricolor i:nth-child(2) { background: #f4f1ea; }
.tricolor i:nth-child(3) { background: var(--rosu); }
.pastila { height: 34px; padding: 0 12px 0 10px; border-radius: 17px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--panou); border: 1px solid var(--linie); color: var(--muted); font-size: 13px; font-weight: 700; }
.pastila .ic { width: 16px; height: 16px; }
.pastila:active { background: var(--panou2); }
.pastila.atins { color: var(--timp-4); border-color: rgba(100, 216, 164, 0.35); }
.btn-icon { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: var(--muted); }
.btn-icon:active { background: var(--panou); }
.btn-icon:disabled { opacity: 0.3; }

main { flex: 1; position: relative; overflow: hidden; }
.vedere { position: absolute; inset: 0; display: none; }
.vedere.activ { display: block; }
.derulare { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 18px calc(28px + var(--jos)); }

/* Tab-urile de jos */
.taburi { display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + var(--jos));
  background: rgba(14, 19, 34, 0.92); border-top: 1px solid var(--linie); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.taburi button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--slab);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.taburi button.activ { color: var(--text); }
.taburi button.activ .ic { color: var(--rosu); }

/* Azi */
.salut { padding: 14px 2px 18px; }
.salut .data { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: lowercase; }
.salut h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1; margin: 6px 0 4px; }
.salut .pr { font-size: 15px; }
.salut .sub { color: var(--muted); font-size: 14px; margin: 10px 0 0; line-height: 1.45; }
.eticheta-sectiune { color: var(--slab); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin: 18px 4px 10px; }
.eticheta-sectiune.rand { display: flex; justify-content: space-between; gap: 10px; }
.eticheta-sectiune.rand span:last-child { letter-spacing: 0.04em; color: var(--muted); }

.card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px;
  margin-bottom: 10px; border-radius: var(--raza); background: var(--panou); border: 1px solid var(--linie); }
.card:active { background: var(--panou2); }
.card .semn { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--rosu-slab); color: var(--rosu); }
.card .semn.albastru { background: var(--albastru-slab); color: var(--albastru); }
.card .semn.verde { background: var(--verde-slab); color: var(--verde); }
.card .semn.chihlimbar { background: var(--chihlimbar-slab); color: var(--chihlimbar); }
.card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card .txt b { font-size: 16px; font-weight: 700; }
.card .txt span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.card .numar { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--text); }
.card .sageata { color: var(--slab); }
.card.gata { background: transparent; }
.card.gata .semn { background: var(--verde-slab); color: var(--verde); }
.card.gata .txt b { color: var(--muted); }
.card.blocat { opacity: 0.45; }
.card.blocat .sageata { visibility: hidden; }
.card .estimare { color: var(--slab); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.link-discret { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -2px auto 10px; padding: 10px 16px;
  color: var(--muted); font-size: 14px; font-weight: 700; }
.link-discret .ic { width: 18px; height: 18px; }

/* Ziua terminată: cardul de sus de pe Azi */
.card.ziua-gata { background: linear-gradient(135deg, rgba(100, 216, 164, 0.16), rgba(100, 216, 164, 0.04)); border-color: rgba(100, 216, 164, 0.3); }
.card.ziua-gata .semn { background: var(--timp-4); color: var(--bg); }

/* Lecțiile blocate, strânse într-un singur rând */
.card.rezumat-blocat { background: transparent; border-style: dashed; }
.card.rezumat-blocat .semn { background: var(--panou); color: var(--slab); }

/* Pronunția: paranteza, cu sunetele noi colorate */
.pr { color: var(--pr); font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em; }
.pr b { color: var(--sunet); font-weight: 700; }
/* E mut: același ă, dar mai mic și mai șters — scurt, slab, adesea înghițit. Bate și culoarea din lecții. */
.pr b.mut, .lectie-text .pr b.mut { color: inherit; font-weight: 500; font-size: 0.8em; opacity: 0.62; }

/* Pronunția din dicționar (IPA): fontul sistemului, care are toate semnele (ɑ̃ ʁ ʃ ʒ ɥ…). Fără culoarea de sunet:
   e o a doua lectură, mai discretă decât cea românească. */
.ipa { font-family: -apple-system, system-ui, 'Segoe UI', 'Noto Sans', 'DejaVu Sans', sans-serif; font-weight: 400;
  color: var(--muted); letter-spacing: 0.02em; white-space: normal; }
.ipa.bloc { display: block; font-size: 0.82em; margin-top: 3px; }
.intrebare .cuvant.ipa { font-family: -apple-system, system-ui, 'Segoe UI', 'Noto Sans', 'DejaVu Sans', sans-serif; font-size: 40px; color: var(--text); }
.optiune.ipa-opt { font-size: 22px; }
.optiune .ipa, .explicatie .ipa { color: var(--text); }
.ipa b { color: inherit; }

/* Textul francez se poate selecta (ții apăsat → „Caută” din iOS, Copiază). */
.selectabil { -webkit-user-select: text; user-select: text; }

/* Ecranul întreg (studiu, lecție, dialog) */
.ecran { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--bg);
  padding-top: var(--sus); transform: translateY(100%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); }
.ecran.vizibil { transform: none; }
.ecran-bara { position: relative; z-index: 2; background: var(--bg); display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; }
.ecran-titlu { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sub titlu: bara de progres, „3/10” și cronometrul zilei */
.ecran-stare { position: relative; z-index: 2; background: var(--bg); display: flex; align-items: center; gap: 10px; margin: 0 18px; height: 22px; }
.ecran-progres { color: var(--muted); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ecran-progres:empty { display: none; }
.ecran-timp { display: inline-flex; align-items: center; gap: 4px; color: var(--timp-4); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; transition: color 0.2s; }
.ecran-timp .ic { width: 14px; height: 14px; }
.ecran-timp.oprit { color: var(--slab); }
.bara-progres { flex: 1; height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.bara-progres i { display: block; height: 100%; width: 0; background: var(--rosu); transition: width 0.3s; }
.ecran-corp { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 24px; }
.ecran-jos { padding: 10px 16px calc(12px + var(--jos)); border-top: 1px solid var(--linie); background: var(--bg2); }
.ecran-jos:empty { display: none; }

.eticheta-tip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--rosu-slab); color: var(--rosu); }
.eticheta-tip.albastru { background: var(--albastru-slab); color: var(--albastru); }
.eticheta-tip.verde { background: var(--verde-slab); color: var(--verde); }
.eticheta-tip.chihlimbar { background: var(--chihlimbar-slab); color: var(--chihlimbar); }
.indemn { color: var(--muted); font-size: 14px; margin-top: 14px; line-height: 1.45; }

.fr { font-family: var(--serif); font-size: 31px; line-height: 1.22; font-weight: 500; margin: 18px 0 8px; color: #f6f2ea; }
.fr.mic { font-size: 24px; }
.studiu-pr { font-size: 18px; line-height: 1.45; }
.ro { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 16px 0 0; }
.ro.mare { font-family: var(--serif); font-weight: 500; font-size: 29px; line-height: 1.25; margin-top: 18px; }
.audio { display: flex; gap: 10px; margin-top: 16px; }
.btn-audio { height: 44px; padding: 0 16px; border-radius: 22px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--panou); border: 1px solid var(--linie-tare); font-weight: 700; font-size: 14px; color: var(--text); }
.btn-audio .ic { width: 20px; height: 20px; color: var(--rosu); }
.btn-audio.vorbeste { border-color: var(--rosu); }
.audio-centru { justify-content: center; }
.indemn.centrat { text-align: center; }
.separator { height: 1px; background: var(--linie); margin: 22px 0 4px; }

.glose { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.glose-titlu { color: var(--slab); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.glose-titlu span { letter-spacing: 0.04em; text-transform: none; font-weight: 700; }
.glosa { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: baseline; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 12px; background: transparent; }
.glosa:active { background: var(--panou); }
.glosa .g-fr { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.glosa .g-pr { font-size: 14px; }
.glosa .g-ro { grid-column: 1 / 3; color: var(--muted); font-size: 14px; }
.glosa .ic { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: var(--slab); }

/* Înregistrează-te și compară */
.compara { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.compara .btn-audio .ic { color: var(--albastru); }
.compara .btn-audio.doar-ic { width: 44px; padding: 0; justify-content: center; }
.compara-txt { color: var(--muted); font-size: 14px; }
.btn-audio.inregistreaza { border-color: var(--rosu); background: var(--rosu-slab); font-variant-numeric: tabular-nums; }
.btn-audio.inregistreaza .ic { color: var(--rosu); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .btn-audio.inregistreaza .ic { animation: none; } }
.nota { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--panou); border-left: 3px solid var(--rosu);
  color: #d7dbe6; font-size: 15px; line-height: 1.5; }
.nota .pr { font-size: 15px; }

/* Butoane */
.btn { width: 100%; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rosu); color: #1b0f0c; font-weight: 800; font-size: 16px; }
.btn:active { filter: brightness(0.92); }
.btn.sec { background: var(--panou); color: var(--text); border: 1px solid var(--linie-tare); }
.btn-rand { display: flex; gap: 10px; }
.btn-rand .btn { flex: 1; }

.note { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nota-btn { height: 60px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--panou); border: 1px solid var(--linie); font-weight: 800; font-size: 14px; }
.nota-btn small { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.nota-btn[data-n="1"] { color: var(--rosu); }
.nota-btn[data-n="2"] { color: var(--chihlimbar); }
.nota-btn[data-n="3"] { color: var(--verde); }
.nota-btn[data-n="4"] { color: var(--albastru); }
.nota-btn:active { background: var(--panou2); }

/* Final de sesiune */
.final { text-align: center; padding-top: 12vh; }
.final .cerc { width: 84px; height: 84px; border-radius: 42px; margin: 0 auto 18px; display: grid; place-items: center;
  background: var(--verde-slab); color: var(--verde); }
.final .cerc .ic { width: 40px; height: 40px; }
.final h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; margin: 0 0 8px; }
.final p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 auto; max-width: 300px; }

/* Citire */
.lectie-text p { font-size: 16px; line-height: 1.6; color: #dfe3ec; margin: 0 0 12px; }
.lectie-text b { color: var(--text); }
.legenda { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 18px; padding: 14px 16px;
  border-radius: 16px; background: var(--panou); }
.legenda .pr { font-size: 19px; text-align: center; min-width: 26px; }
.legenda span { color: #d7dbe6; font-size: 14px; line-height: 1.35; }
/* Culoarea sunetelor speciale contează (colorat = pe nas etc.), deci trebuie să bată stilurile lecției. */
.lectie-text .pr b { color: var(--sunet); }
.legenda span .pr { color: var(--pr); font-size: inherit; }

/* Gramatica: tabelele de conjugare și propoziția de completat */
.tabel { width: 100%; border-collapse: collapse; margin: 4px 0 16px; background: var(--panou); border-radius: 14px; overflow: hidden; }
.tabel td { padding: 9px 12px; font-size: 15px; line-height: 1.35; color: #dfe3ec; border-top: 1px solid var(--linie); vertical-align: top; }
.tabel tr:first-child td { border-top: 0; }
.tabel td:first-child { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--text); white-space: nowrap; }
.tabel .pr { font-size: 14px; }
.exemplu-teorie { flex-wrap: wrap; row-gap: 2px; }
.exemplu-teorie .e-fr { flex-basis: 100%; font-size: 19px; }
.exemplu-teorie .e-nota { max-width: none; text-align: left; flex-basis: 100%; }
.propozitie-gol { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.3; margin: 22px 0 8px; }
.gol-cuv { display: inline-block; min-width: 64px; border-bottom: 3px solid var(--chihlimbar); color: var(--chihlimbar); }
.gol-cuv.plin { border-color: var(--verde); color: var(--verde); }

/* Antrenează urechea: câte voci sunt, și vocea întrebării */
.voci-nota { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 6px; }
.voci-nota .ic { width: 18px; height: 18px; color: var(--verde); margin-top: 1px; }
.voce-runda { display: inline-flex; align-items: center; gap: 6px; margin-top: -2px; color: var(--muted); font-size: 13px; font-weight: 700; }
.voce-runda .ic { width: 15px; height: 15px; }

/* Antrenează urechea: perechile, grupate, și variantele de răspuns */
.grup-pereche { display: grid; gap: 6px; margin-bottom: 14px; }
.optiune.pereche { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.optiune.pereche .p-fr { font-family: var(--serif); font-size: 22px; }
.optiune.pereche .pr { font-size: 15px; }
.optiune.pereche .p-ro { color: var(--muted); font-size: 13px; }
.exemple { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.exemplu { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: 14px; background: var(--panou); border: 1px solid var(--linie); }
.exemplu:active { background: var(--panou2); }
.exemplu .e-fr { font-family: var(--serif); font-size: 21px; font-weight: 600; min-width: 92px; }
.exemplu .e-pr { font-size: 17px; flex: 1; }
.exemplu .e-nota { color: var(--muted); font-size: 12.5px; text-align: right; max-width: 40%; }
.exemplu .ic { color: var(--slab); width: 18px; height: 18px; }

.intrebare { text-align: center; padding-top: 6vh; }
.intrebare .cuvant { font-family: var(--serif); font-size: 46px; font-weight: 500; margin: 22px 0 6px; }
.btn-asculta-mare { width: 96px; height: 96px; border-radius: 48px; margin: 26px auto 10px; display: grid; place-items: center;
  background: var(--rosu-slab); color: var(--rosu); }
.btn-asculta-mare .ic { width: 40px; height: 40px; }
.optiuni { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.optiune { min-height: 58px; padding: 10px 16px; border-radius: 16px; background: var(--panou); border: 1px solid var(--linie-tare);
  font-size: 19px; font-weight: 600; }
.optiune.fr-opt { font-family: var(--serif); font-size: 22px; }
.optiune.bun { border-color: var(--verde); background: var(--verde-slab); }
.optiune.gresit { border-color: var(--rosu); background: var(--rosu-slab); }
.explicatie { color: var(--muted); font-size: 14.5px; margin-top: 16px; min-height: 22px; }

/* Dialog */
.scena-loc { color: var(--muted); font-size: 14px; margin: 2px 0 18px; }
.bule { display: flex; flex-direction: column; gap: 10px; }
.bula { max-width: 88%; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--panou); border: 1px solid var(--linie);
  text-align: left; transition: border-color 0.2s, opacity 0.2s; }
.bula.tu { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #23233c; }
.bula .cine { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--albastru); margin-bottom: 4px; }
.bula.tu .cine { color: var(--rosu); }
.bula .b-fr { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.bula .b-pr { font-size: 14px; margin-top: 4px; line-height: 1.4; }
.bula .b-ro { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.4; }
.bula.acum { border-color: var(--rosu); }
.bula.asteapta .b-fr, .bula.asteapta .b-pr { display: none; }
.bula.asteapta .b-ro { color: var(--text); font-size: 16px; font-weight: 600; margin-top: 0; }
.fara-traducere .bula:not(.asteapta) .b-ro { display: none; }
.comutator { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; margin: -6px 0 16px;
  border-radius: 17px; background: var(--panou); border: 1px solid var(--linie-tare); color: var(--muted); font-size: 13px; font-weight: 700; }
.comutator .ic { width: 16px; height: 16px; }
.comutator[aria-pressed="true"] { color: var(--text); }
/* Bara de jos cât vorbește celălalt personaj: ține locul butonului, ca ecranul să nu sară. */
.jos-stare { height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: 15px; }
.jos-stare .ic { width: 20px; height: 20px; color: var(--albastru); }

/* Lecții: alegi secțiunea sus */
.segment-lectii { margin: 0 0 6px; }
.segment-lectii button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.segment-lectii small { color: var(--slab); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Caiet */
.cauta { position: relative; margin: 2px 0 10px; }
.cauta .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slab); pointer-events: none; }
.cauta input { width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 14px; background: var(--panou); color: var(--text);
  border: 1px solid var(--linie-tare); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.cauta input::placeholder { color: var(--slab); }
.cauta input:focus { outline: none; border-color: var(--albastru); }
.filtre { display: flex; gap: 8px; margin-bottom: 4px; }
.filtru { height: 34px; padding: 0 14px; border-radius: 17px; background: var(--panou); border: 1px solid var(--linie); color: var(--muted); font-size: 13.5px; font-weight: 700; }
.filtru.activ { background: var(--panou2); color: var(--text); border-color: var(--linie-tare); }
.zi-caiet { margin-bottom: 18px; }
.zi-caiet h3 { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slab); margin: 16px 4px 8px; }
.rand-caiet { border-radius: 14px; margin-bottom: 6px; background: var(--panou); border: 1px solid transparent; }
.rand-caiet.deschis { border-color: var(--linie-tare); }
.rand-cap { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; width: 100%; text-align: left; padding: 11px 14px; border-radius: 14px; }
.rand-cap:active { background: var(--panou2); }
.rand-cap > .ic { width: 18px; height: 18px; color: var(--slab); transition: transform 0.2s; }
.rand-caiet.deschis .rand-cap > .ic { transform: rotate(180deg); }
.rand-caiet .c-fr { font-family: var(--serif); font-size: 18px; }
.rand-caiet .c-pr { font-size: 13.5px; margin-top: 2px; }
.rand-caiet .c-ro { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.rand-caiet .c-greu { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; vertical-align: 2px;
  background: var(--chihlimbar-slab); color: var(--chihlimbar); font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.rand-detalii { padding: 0 14px 12px; }
.rand-detalii .audio { margin-top: 2px; }
.rand-detalii .glose { margin-top: 10px; }
.rand-detalii .glosa { padding: 7px 4px; }
.rand-detalii .nota { margin-top: 10px; }
.gol { color: var(--muted); text-align: center; padding: 18vh 24px 0; line-height: 1.5; }
.gol.mic { padding: 8vh 24px 0; }

/* ---------- Progres ---------- */
.cutie { padding: 16px; margin-bottom: 12px; border-radius: 20px; background: var(--panou); border: 1px solid var(--linie); }
.cutie-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cutie-cap h2 { margin: 0; font-size: 15px; font-weight: 800; }
.cutie-cap span { color: var(--muted); font-size: 13px; font-weight: 600; text-align: right; }

/* Azi: inelul spre țintă + cifrele zilei */
.azi-progres { display: flex; align-items: center; gap: 18px; }
.inel { position: relative; width: 140px; height: 140px; flex: none; }
.inel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.inel circle { fill: none; stroke-width: 11; }
.inel .pista { stroke: var(--timp-pista); }
.inel .plin { stroke: var(--timp-4); stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(.2,.8,.2,1); }
.inel-centru { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.inel-centru b { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.inel-centru span { color: var(--muted); font-size: 13px; font-weight: 700; margin-top: 4px; }
.azi-txt { flex: 1; min-width: 0; }
.azi-tinta { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.azi-tinta .ic { width: 18px; height: 18px; color: var(--timp-4); }
.azi-cifre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.azi-cifre li { color: var(--muted); font-size: 13.5px; line-height: 1.3; }
.azi-cifre b { color: var(--text); font-size: 15px; margin-right: 4px; }

/* Rândul de cifre: seria, recordul, totalul */
.cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cifra { padding: 14px 12px; border-radius: 18px; background: var(--panou); border: 1px solid var(--linie); }
.cifra .ic { width: 18px; height: 18px; color: var(--slab); margin-bottom: 8px; }
.cifra.foc .ic { color: var(--chihlimbar); }
.cifra b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.cifra b small { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.cifra span { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 3px; }

/* Spre 1.000 de ore: bara, cu pragurile A1–C1 pe ea */
.ore-cifra { display: flex; align-items: baseline; gap: 8px; margin: -4px 0 12px; }
.ore-cifra b { font-size: 26px; font-weight: 700; }
.ore-cifra span { color: var(--muted); font-size: 14px; font-weight: 600; }
.ore-pista { position: relative; height: 10px; border-radius: 5px; background: rgba(226, 232, 245, 0.07); }
/* Bucățile umplute (aplicație · văzut · ascultat), despărțite de un gol de 2px, nu de contur. */
.ore-umplut { display: flex; gap: 2px; height: 100%; }
.ore-umplut i { flex-basis: 0; min-width: 4px; height: 100%; border-radius: 2px; }
.ore-umplut i:first-child { border-radius: 5px 2px 2px 5px; }
.ore-umplut i:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.sursa-app { background: var(--sursa-app); }
.sursa-video { background: var(--sursa-video); }
.sursa-audio { background: var(--sursa-audio); }
.ore-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; }
.ore-legenda span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.ore-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.ore-legenda b { color: var(--text); font-weight: 700; }
.btn-adauga { height: 44px; font-size: 14.5px; margin: 12px 0 2px; }
.btn-adauga .ic { width: 18px; height: 18px; }

/* Foaia „Adaugă timp” */
.foaie-sub { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: -4px 0 4px; }
.segment button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segment .ic { width: 17px; height: 17px; }
.camp { width: 100%; height: 46px; margin-top: 10px; padding: 0 14px; border-radius: 12px; background: var(--panou); color: var(--text);
  border: 1px solid var(--linie-tare); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.camp::placeholder { color: var(--slab); }
.camp:focus { outline: none; border-color: var(--albastru); }
.durata-alege { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px; border-radius: 14px; background: var(--panou); }
.durata-alege .btn-icon { color: var(--text); background: var(--panou2); border-radius: 12px; }
.durata-val { font-size: 26px; font-weight: 700; }
.cipuri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }

/* Intrările adăugate de mână, în ziua aleasă */
.zi-lista li.extra { align-items: center; }
.zi-lista li.extra > .ic { color: var(--muted); margin-top: 0; }
.zi-lista li.extra .extra-txt { flex: 1; min-width: 0; }
.zi-lista li.extra b { color: var(--text); font-weight: 700; }
.zi-lista li.extra .btn-icon { width: 36px; height: 36px; margin: -8px -6px -8px 0; }
.zi-lista li.extra .btn-icon .ic { width: 16px; height: 16px; color: var(--slab); }
.ore-prag { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--linie-tare); }
.ore-prag.atins { background: var(--timp-4); }
.ore-prag:last-of-type { margin-left: -2px; }
.ore-etichete { position: relative; height: 34px; margin: 6px 0 4px; }
.ore-etichete span { position: absolute; transform: translateX(-50%); text-align: center; color: var(--slab); font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.ore-etichete span:last-child { transform: translateX(-100%); text-align: right; }
.ore-etichete span.atins { color: var(--text); }
.ore-etichete small { display: block; font-size: 10.5px; font-weight: 600; color: var(--slab); }
.cutie .metru-nota b { color: var(--text); }

/* Ultimele 7 zile: coloane cu minutele, linia țintei */
/* Dreapta are o margine a ei, pentru eticheta țintei, ca să nu cadă peste coloane. */
.sapt { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; height: 176px; padding-right: 40px; }
.sapt-tinta { position: absolute; left: 0; right: 0; height: 1px; background: var(--linie-tare); pointer-events: none; }
.sapt-tinta span { position: absolute; right: 0; bottom: 3px; width: 38px; text-align: right; color: var(--slab); font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.sapt-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding-top: 18px; }
.sapt-val { color: var(--text); font-size: 12px; font-weight: 800; margin-bottom: 4px; white-space: nowrap; visibility: hidden; }
.sapt-col.aleasa .sapt-val { visibility: visible; }
.sapt-bar { width: 22px; border-radius: 4px 4px 0 0; background: var(--timp-2); transition: height 0.4s cubic-bezier(.2,.8,.2,1), background 0.2s; }
.sapt-bar.zero { width: 6px; height: 6px !important; border-radius: 3px; background: var(--linie-tare); }
.sapt-col.aleasa .sapt-bar:not(.zero) { background: var(--timp-4); }
.sapt-axa { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--linie); padding: 6px 40px 0 0; }
.sapt-axa span { text-align: center; color: var(--slab); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.sapt-axa span b { display: block; color: var(--muted); font-size: 12px; }
.sapt-axa span.aleasa, .sapt-axa span.aleasa b { color: var(--text); }

/* Calendarul: fiecare zi, colorată după cât ai lucrat */
.cal-cap { display: flex; align-items: center; gap: 4px; margin: -6px -8px 10px; }
.cal-titlu { flex: 1; text-align: center; }
.cal-titlu b { display: block; font-size: 16px; font-weight: 800; }
.cal-titlu span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cal-grila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.cal-sapt { text-align: center; color: var(--slab); font-size: 11.5px; font-weight: 800; padding-bottom: 4px; }
.cal-zi { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
  color: var(--muted); background: var(--bg2); font-variant-numeric: tabular-nums; }
.cal-zi.n1 { background: var(--timp-1); color: var(--text); }
.cal-zi.n2 { background: var(--timp-2); color: #0b1a14; }
.cal-zi.n3 { background: var(--timp-3); color: #0b1a14; }
.cal-zi.n4 { background: var(--timp-4); color: #0b1a14; }
.cal-zi.viitor { background: transparent; color: var(--linie-tare); }
.cal-zi.azi { box-shadow: inset 0 0 0 2px var(--text); }
.cal-zi.aleasa { box-shadow: 0 0 0 2px var(--panou), 0 0 0 4px var(--rosu); }
.cal-legenda { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; color: var(--slab); font-size: 11.5px; font-weight: 700; }
.cal-legenda i { width: 14px; height: 14px; border-radius: 4px; background: var(--bg2); }
.cal-legenda i.n1 { background: var(--timp-1); }
.cal-legenda i.n2 { background: var(--timp-2); }
.cal-legenda i.n3 { background: var(--timp-3); }
.cal-legenda i.n4 { background: var(--timp-4); }
.cal-legenda span:last-child { margin-left: 4px; }
.cal-legenda span:nth-child(2) { margin-right: 4px; }
/* Punctul de sub cifră: în ziua aia ai adăugat și timp văzut sau ascultat. */
.cal-zi { position: relative; }
.cal-zi.extra::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: currentColor; }
.cal-punct { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.cal-punct::before { content: ''; width: 4px; height: 4px; border-radius: 2px; background: var(--muted); }

/* Ziua aleasă din istoric */
.zi-cap { display: flex; align-items: center; gap: 4px; margin: -6px -8px 12px; }
.zi-titlu { flex: 1; text-align: center; }
.zi-titlu b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.zi-titlu span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.zi-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zi-grila div { padding: 12px; border-radius: 14px; background: var(--bg2); }
.zi-grila b { display: block; font-size: 20px; font-weight: 700; }
.zi-grila span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.zi-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zi-lista li { display: flex; align-items: flex-start; gap: 10px; color: #d7dbe6; font-size: 14px; line-height: 1.4; }
.zi-lista .ic { width: 18px; height: 18px; color: var(--verde); margin-top: 1px; }
.zi-gol { color: var(--muted); font-size: 14.5px; line-height: 1.5; text-align: center; margin: 4px 0; }
.zi-nota { color: var(--slab); font-size: 13px; line-height: 1.45; margin: 12px 0 0; }

/* Cursul: cât din drum ai făcut */
.metru { margin-top: 14px; }
.metru:first-of-type { margin-top: 0; }
.metru-cap { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.metru-cap span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.metru-pista { height: 8px; border-radius: 4px; overflow: hidden; background: rgba(226, 232, 245, 0.07); }
.metru-pista i { display: block; height: 100%; border-radius: 4px; background: var(--rosu); }
.metru-pista.chihlimbar i { background: var(--chihlimbar); }
.metru-pista.albastru i { background: var(--albastru); }
.metru-pista.verde i { background: var(--verde); }
.metru-nota { color: var(--slab); font-size: 12.5px; margin-top: 6px; line-height: 1.4; }

/* Foaia de setări */
.voal { position: fixed; inset: 0; z-index: 30; background: rgba(4, 7, 15, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.voal.vizibil { opacity: 1; pointer-events: auto; }
.foaie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 88%; overflow-y: auto; padding: 8px 18px calc(22px + var(--jos));
  background: var(--bg2); border-radius: 24px 24px 0 0; border-top: 1px solid var(--linie-tare);
  transform: translateY(105%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); }
.foaie.vizibil { transform: none; }
body.tastatura .foaie.vizibil, .foaie.vizibil:has(textarea:focus) {
  top: calc(var(--vv-top, 0px) + max(8px, var(--sus)));
  bottom: auto;
  max-height: calc(var(--vv-h, 54dvh) - max(12px, var(--sus)));
  padding-bottom: 14px;
  border-radius: 20px;
}
body.tastatura .foaie.vizibil .maner, .foaie.vizibil:has(textarea:focus) .maner { margin: 2px auto 6px; }
body.tastatura .foaie.vizibil h2, .foaie.vizibil:has(textarea:focus) h2 { font-size: 19px; margin: 0 0 4px; }
body.tastatura .foaie.vizibil .foaie-sub, .foaie.vizibil:has(textarea:focus) .foaie-sub { margin: 0 0 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tastatura .foaie.vizibil .motive, .foaie.vizibil:has(textarea:focus) .motive { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 4px 0 8px; scrollbar-width: none; }
body.tastatura .foaie.vizibil .motive::-webkit-scrollbar, .foaie.vizibil:has(textarea:focus) .motive::-webkit-scrollbar { display: none; }
body.tastatura .foaie.vizibil .motive .filtru, .foaie.vizibil:has(textarea:focus) .motive .filtru { flex: none; height: 32px; padding: 0 11px; font-size: 12.5px; }
body.tastatura .foaie.vizibil textarea, .foaie.vizibil:has(textarea:focus) textarea { min-height: 76px; max-height: 116px; margin-bottom: 10px; }
body.tastatura .foaie.vizibil .btn, .foaie.vizibil:has(textarea:focus) .btn { height: 44px; font-size: 15px; }
.foaie .maner { width: 40px; height: 5px; border-radius: 3px; background: var(--linie-tare); margin: 4px auto 10px; }
.foaie h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 4px 0 10px; }
.setare { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.setare:last-child { border-bottom: 0; }
.setare > b { display: block; font-size: 15px; margin-bottom: 4px; }
.setare > span { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-bottom: 10px; }
.segment { display: flex; padding: 3px; border-radius: 12px; background: var(--panou); }
.segment button { flex: 1; height: 38px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--muted); }
.segment button.activ { background: var(--panou2); color: var(--text); box-shadow: 0 0 0 1px var(--linie-tare); }
.setare select { width: 100%; height: 44px; border-radius: 12px; padding: 0 12px; background: var(--panou); color: var(--text);
  border: 1px solid var(--linie-tare); font: inherit; font-size: 15px; }
.setare .btn-rand { margin-top: 10px; }
.setare .btn { height: 46px; font-size: 15px; }

.toast { position: fixed; left: 50%; bottom: calc(86px + var(--jos)); z-index: 40; transform: translate(-50%, 20px); opacity: 0;
  padding: 11px 16px; border-radius: 14px; background: #2a3550; color: var(--text); font-size: 14px; font-weight: 600;
  max-width: calc(100% - 40px); text-align: center; transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.toast.vizibil { opacity: 1; transform: translate(-50%, 0); }

/* ---- Contul (ecranul de intrare) ---- */
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(24px + var(--sus)) 22px calc(24px + var(--jos));
  background: radial-gradient(120% 80% at 50% 0%, var(--panou) 0%, var(--bg) 60%); overflow-y: auto; }
.login[hidden] { display: none; }
.login-cutie { width: 100%; max-width: 360px; text-align: center; }
.login-ic { width: 88px; height: 88px; border-radius: 22px; margin: 0 auto 14px; display: block; }
.login h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; margin: 0 0 6px; }
.login p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 22px; }
.login form { display: flex; flex-direction: column; gap: 10px; }
.login input, .foaie textarea { width: 100%; height: 52px; border-radius: 14px; padding: 0 16px; background: var(--panou); color: var(--text);
  border: 1px solid var(--linie-tare); font: inherit; font-size: 16px; }
.login input:focus, .foaie textarea:focus { outline: none; border-color: var(--albastru); }
.login-mesaj { min-height: 20px; color: var(--rosu); font-size: 13.5px; font-weight: 600; }
.login-altfel { margin-top: 16px; color: var(--muted); font-size: 14px; font-weight: 600; padding: 10px; }
.set-mic { display: block; margin-top: 10px; color: var(--slab); font-size: 12px; }

/* Starea sync-ului, ca un punct pe butonul de setări */
#btn-setari { position: relative; }
#btn-setari[data-sync]::after { content: ''; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 4px; background: var(--slab); }
#btn-setari[data-sync="live"]::after { background: var(--verde); }
#btn-setari[data-sync="fara-net"]::after, #btn-setari[data-sync="parola"]::after { background: var(--chihlimbar); }

/* ---- Întreabă + Raportează + Mini-Inbox Live ---- */
.cap-card-gram { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cap-card-gram.centrat { justify-content: center; }
.actiuni-card { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.intrebare .actiuni-card { justify-content: center; }
.btn-raport, .btn-intreaba { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13.5px; font-weight: 700; border: 1px dashed var(--linie-tare); }
.btn-raport .ic, .btn-intreaba .ic { width: 16px; height: 16px; }
.btn-intreaba { color: var(--albastru); border-color: rgba(122, 167, 255, 0.4); border-style: solid; background: var(--albastru-slab); }
.btn-intreaba.trimis, .btn-raport.trimis { color: var(--chihlimbar); border-style: solid; border-color: var(--chihlimbar-slab); background: var(--chihlimbar-slab); }
.btn-intreaba.raspuns { color: var(--verde); border-color: rgba(78, 203, 143, 0.45); background: var(--verde-slab); }
.motive { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.foaie textarea { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.45; resize: vertical; margin-bottom: 12px; }

.pastila-inbox { border: 1px solid var(--linie-tare); }
.pastila-inbox.ascuns { display: none; }
.pastila-inbox.asteapta { background: var(--chihlimbar-slab); color: var(--chihlimbar); border-color: rgba(242, 184, 75, 0.4); }
.pastila-inbox.nou { background: var(--verde-slab); color: var(--verde); border-color: rgba(78, 203, 143, 0.55); box-shadow: 0 0 0 2px rgba(78, 203, 143, 0.16); }
.pastila-inbox.nou .ic { color: var(--verde); }
.pastila-inbox.asteapta .ic { color: var(--chihlimbar); }

.raspuns-live { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--albastru-slab); border: 1px solid rgba(122, 167, 255, 0.35); text-align: left; }
.raspuns-live.asteapta { background: var(--chihlimbar-slab); border-color: rgba(242, 184, 75, 0.35); }
.raspuns-live-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--albastru); margin-bottom: 6px; }
.raspuns-live.asteapta .raspuns-live-cap { color: var(--chihlimbar); }
.raspuns-live-cap span { display: inline-flex; align-items: center; gap: 6px; }
.raspuns-live-cap .ic { width: 14px; height: 14px; }
.link-inbox { color: var(--albastru); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 8px; background: rgba(14, 19, 34, 0.45); }
.raspuns-live-q { font-size: 13.5px; color: var(--muted); font-style: italic; margin-bottom: 6px; }
.raspuns-live-txt { font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }

.inbox-titlu-rand { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.inbox-titlu-rand h2 { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.inbox-titlu-rand h2 .ic { width: 22px; height: 22px; color: var(--albastru); }
.inbox-lista { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 16px; }
.inbox-card { padding: 14px 15px; border-radius: 16px; background: var(--panou); border: 1px solid var(--linie-tare); text-align: left; }
.inbox-card.nou { border-color: rgba(78, 203, 143, 0.55); background: linear-gradient(180deg, rgba(78, 203, 143, 0.1), var(--panou)); }
.inbox-card.asteapta { border-color: rgba(242, 184, 75, 0.45); }
.inbox-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inbox-eticheta { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 99px; background: var(--bg2); color: var(--muted); }
.inbox-eticheta.nou { background: var(--verde-slab); color: var(--verde); }
.inbox-eticheta.gata { background: var(--albastru-slab); color: var(--albastru); }
.inbox-eticheta.asteapta { background: var(--chihlimbar-slab); color: var(--chihlimbar); }
.inbox-unde { font-size: 12px; color: var(--muted); font-weight: 600; flex: 1; }
.inbox-timp { font-size: 11.5px; color: var(--slab); }
.inbox-prop { font-size: 14px; color: var(--muted); padding: 7px 10px; border-radius: 10px; background: var(--bg2); margin-bottom: 8px; }
.inbox-prop b { font-family: var(--serif); font-size: 16px; color: var(--text); }
.inbox-intrebare { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.inbox-raspuns { font-size: 14.5px; line-height: 1.55; color: var(--text); padding: 11px 13px; border-radius: 12px; background: var(--bg2); border-left: 3px solid var(--albastru); white-space: pre-line; }
.inbox-asteapta { font-size: 13.5px; color: var(--muted); font-style: italic; }
.inbox-jos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-audio.mic { height: 34px; padding: 0 12px; font-size: 12.5px; }
.btn-audio.mic .ic { width: 15px; height: 15px; }
.btn-audio.mic.sterge { margin-left: auto; color: var(--muted); }
.btn-audio.mic.sterge .ic { color: var(--muted); }

/* ---- De ce așa (gramatica propoziției și explicațiile la exerciții) ---- */
.logica { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--panou); border-left: 3px solid var(--albastru); text-align: left; }
.logica .glose-titlu { display: flex; align-items: center; gap: 6px; }
.logica .glose-titlu .ic { width: 14px; height: 14px; color: var(--albastru); }
.logica-r + .logica-r { margin-top: 10px; }
.logica-r > b { display: block; font-size: 13px; color: var(--albastru); margin-bottom: 4px; line-height: 1.35; }
.logica-r p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.logica-r .pr { font-size: 14.5px; }
.logica-comparatie { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--linie); color: var(--muted) !important; font-size: 13.5px !important; }
.b-expl { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie);
  color: #d7dbe6; font-size: 13.5px; line-height: 1.45; }
.b-expl > .ic { width: 15px; height: 15px; color: var(--albastru); margin-top: 2px; }
.bula.asteapta .b-expl { display: none; }

/* ---- Gesturi la repetare (Din nou ←, Greu ↑, Bine →) ---- */
.ecran-corp.tragere { transition: none; will-change: transform; }
.ecran-corp.revenire { transition: transform 0.18s ease-out; }
.swipe-hint { position: absolute; top: 45%; transform: translateY(-50%); z-index: 10; pointer-events: none; opacity: 0;
  padding: 8px 16px; border-radius: 12px; font-weight: 800; font-size: 15px; letter-spacing: 0.03em; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.swipe-hint.stanga { left: 16px; background: var(--rosu); color: #1b0f0c; }
.swipe-hint.dreapta { right: 16px; background: var(--albastru); color: #0b1a14; }
.swipe-hint.dreapta.bine { background: var(--verde); }
.swipe-hint.sus { top: calc(var(--sus) + 86px); left: 50%; transform: translateX(-50%); background: var(--chihlimbar); color: #1b1305; }

/* ---- iPad și ecrane mai late ---- */
@media (min-width: 700px) {
  :root {
    --latime: 720px;
    --latime-studiu: 660px;
    --raza: 20px;
  }
  .bara { padding: 16px max(28px, calc((100% - var(--latime)) / 2)) 10px; }
  .titlu { font-size: 26px; }
  .derulare { padding: 10px max(28px, calc((100% - var(--latime)) / 2)) calc(36px + var(--jos)); }
  .taburi { padding: 8px max(28px, calc((100% - 620px) / 2)) calc(8px + var(--jos)); }
  .taburi button { font-size: 12px; gap: 4px; padding: 8px 0; }
  .taburi button .ic { width: 24px; height: 24px; }

  .salut { padding: 20px 2px 22px; }
  .salut h1 { font-size: 40px; }
  .salut .sub { font-size: 15.5px; max-width: 580px; }
  .card { padding: 18px 20px; margin-bottom: 12px; gap: 16px; }
  .card .txt b { font-size: 17px; }
  .card .txt span { font-size: 14.5px; }

  .ecran-bara { padding: 12px max(24px, calc((100% - var(--latime-studiu)) / 2)) 4px; }
  .ecran-titlu { font-size: 16.5px; }
  .ecran-stare { margin: 0 max(28px, calc((100% - var(--latime-studiu)) / 2)); height: 26px; }
  .ecran-corp { padding: 28px max(28px, calc((100% - var(--latime-studiu)) / 2)) 36px; }
  .ecran-jos { padding: 14px max(28px, calc((100% - var(--latime-studiu)) / 2)) calc(18px + var(--jos)); }
  .swipe-hint.stanga { left: max(20px, calc((100% - var(--latime-studiu)) / 2)); }
  .swipe-hint.dreapta { right: max(20px, calc((100% - var(--latime-studiu)) / 2)); }

  .fr { font-size: 38px; margin: 22px 0 10px; }
  .fr.mic { font-size: 28px; }
  .studiu-pr { font-size: 20px; }
  .ro { font-size: 23px; }
  .ro.mare { font-size: 34px; }
  .nota, .logica { padding: 14px 18px; font-size: 15.5px; }
  .logica-r p { font-size: 15.5px; }
  .glose { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
  .glose .glose-titlu { grid-column: 1 / -1; margin-bottom: 2px; }
  .glosa { padding: 11px 14px; margin-bottom: 0; }
  .glosa .g-fr { font-size: 20px; }
  .glosa .g-pr, .glosa .g-ro { font-size: 15px; }

  .btn { height: 58px; font-size: 17px; }
  .nota-btn { height: 66px; font-size: 15.5px; }
  .nota-btn small { font-size: 12.5px; }

  .intrebare { padding-top: 4vh; }
  .intrebare .cuvant { font-size: 54px; }
  .propozitie-gol { font-size: 34px; }
  .optiune { min-height: 64px; font-size: 20px; }
  .optiune.fr-opt { font-size: 24px; }

  .bula { max-width: 78%; padding: 14px 18px; }
  .bula .b-fr { font-size: 21px; }
  .bula .b-pr, .bula .b-ro { font-size: 15px; }

  .cutie { padding: 20px 22px; margin-bottom: 14px; }
  .cal-zi { aspect-ratio: auto; height: 46px; }
  .foaie { max-width: 540px; margin: 0 auto; padding-inline: 24px; }
}

/* Luminos · Hârtie: suprafețe calde, contrast clar și rânduri aerisite. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #efeee9; --bg2: #f4f3ed; --panou: #faf9f5; --panou2: #e6e8df;
  --linie: #d3d7cd; --linie-tare: #aeb9ac;
  --text: #292e2b; --muted: #515d54; --slab: #59645b;
  --rosu: #a33c35; --rosu-slab: #f5e6e1;
  --albastru: #315f8a; --albastru-slab: #e4ecf3; --pr: #36597b;
  --verde: #296848; --verde-slab: #e1ede2;
  --chihlimbar: #805c22; --chihlimbar-slab: #f1e8d4; --sunet: #795218;
  --timp-1: #c5decc; --timp-2: #98c5a7; --timp-3: #66a780; --timp-4: #256746;
  --timp-pista: #dce7dc;
  --sursa-app: #287550; --sursa-video: #4668a9; --sursa-audio: #96641e;
}
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .taburi { background: #faf9f5; border-color: #aeb9ac; }
:root[data-theme="light"] .taburi button { color: #424d46; border-radius: 12px; }
:root[data-theme="light"] .taburi button.activ { color: #20584f; background: #dce9df; box-shadow: inset 0 0 0 1px #b5cabe; }
:root[data-theme="light"] .taburi button.activ .ic { color: #20584f; }
:root[data-theme="light"] :is(.fr,.nota,.lectie-text p,.legenda span,.tabel td,.zi-lista li,.b-expl) { color: var(--text); }
:root[data-theme="light"] :is(.fr,.ro,.propozitie-gol) { line-height: 1.5; }
:root[data-theme="light"] :is(.lectie-text p,.logica-r p,.nota,.b-expl,.tabel td) { line-height: 1.75; }
:root[data-theme="light"] :is(.studiu-pr,.ro) { margin-top: 14px; }
:root[data-theme="light"] .ecran-corp { max-width: 66ch; margin-inline: auto; width: 100%; }
:root[data-theme="light"] .btn:not(.sec) { color: #fff; }
:root[data-theme="light"] .bula.tu { background: #e4e9ee; }
:root[data-theme="light"] :is(.ore-pista,.metru-pista) { background: #d9ded5; }
:root[data-theme="light"] .cal-zi.n4 { color: #fff; }
:root[data-theme="light"] .toast { background: #e0e7dc; border: 1px solid var(--linie-tare); }
:root[data-theme="light"] .link-inbox { background: var(--albastru-slab); }
:root[data-theme="light"] .swipe-hint { color: #fff; }
:root[data-theme="light"] .tricolor i:nth-child(2) { background: #fff; box-shadow: 0 0 0 1px #bdc3ba; }
:root[data-theme="light"] :is(button,a,input,select,textarea):focus-visible { outline: 3px solid var(--albastru); outline-offset: 3px; }
:root[data-theme="light"] ::selection { background: #cce0d5; color: #202e27; }
.rezultat-gram { text-align: center; color: var(--muted); font-size: 14px; font-weight: 700; margin-bottom: 8px; }