/* Demo 2: paginile din jurul exercițiilor (cursul, capitolul, lecția, pauza, fișa, rezultatul, evaluarea pe foaie).
   Mărimile vin din baza.css. Pe laptop, capitolul și pauza stau pe scenă și încap pe ecran; celelalte sunt pagini obișnuite, care se derulează. */

.antet { padding-inline: max(var(--s3), (100% - 1440px) / 2 + var(--s3)); }
.pagina { max-width: 1440px; margin: 0 auto; padding: var(--s3) var(--s3) 72px; }
.pagina .eti + h1 { margin-top: 8px; }
.poza-alba { background: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: var(--s2); }
.poza-alba img { width: 100%; aspect-ratio: 1/1.08; object-fit: cover; }
@media (max-width: 600px) { .pagina { padding: var(--s2) 16px var(--s3); } }
@media (min-width: 1100px) and (min-height: 560px) {
  .scena .pagina { flex: 1; width: 100%; min-height: 0; overflow: hidden; padding-block: var(--s2); }
  .copil .pagina { max-width: calc(1440px / var(--k, 1)); }  /* mărită, rămâne cât antetul */
}

/* ============ Cursul ============ */
.curs-sus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 462px); gap: 56px; align-items: center; }
.curs-sus h1 { margin-bottom: var(--s2); }
.curs-sus img { width: 100%; aspect-ratio: 462/252; object-fit: cover; border: 2px solid var(--ink); border-radius: 24px; }
.titlu-sect { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-top: 64px; }
.clase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: var(--s2) 0; }
.clasa, .capitol { display: block; border: 2px solid var(--line); border-radius: 24px; padding: 28px; color: var(--soft); text-decoration: none; transition: transform .12s; }
.clasa h3, .capitol h3 { font-size: var(--t2); margin-bottom: var(--s1); }
.clasa.des { position: relative; background: var(--ink); color: var(--on); border-color: var(--ink); }
.clasa.des .ic { position: absolute; top: 28px; right: 28px; font-size: 34px; }
.clasa.des p { color: var(--onS); }
.capitole { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.capitol .sus { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s1); margin-bottom: 16px; }
.capitol.des { background: var(--card); border-color: var(--ink); color: var(--ink); }
.capitol.des .eti { color: var(--recT); }
.capitol.des .sus .ic { font-size: 30px; }
a.capitol:hover, a.clasa:hover { transform: translateY(-3px); }
@media (max-width: 1000px) {
  .curs-sus { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .clase, .capitole { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .titlu-sect { margin-top: var(--s3); }
  .clase { gap: var(--s1); }
  .clasa, .capitol { padding: 20px; }
  .clasa.des .ic { top: 20px; right: 18px; font-size: 28px; }
  .capitole { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Capitolul ============
   Pe scenă, harta se micșorează cât să încapă toată (--h, pus de pagină). */
.gata-banda { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s3); background: var(--mk); border: 2px solid var(--ink); border-radius: 24px; padding: var(--s1) var(--s1) var(--s1) var(--s2); margin-top: var(--s2); }
.gata-banda p { font-weight: 600; flex: 1 1 400px; }
.harta { position: relative; margin-top: var(--s2); padding: 40px 32px 32px; }
.harta svg.cale { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.harta svg.cale path { fill: none; stroke: var(--line); stroke-width: 12; }
.noduri { --h: 1; --c: calc(98px * var(--h)); --p: calc(150px * var(--h)); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: calc(28px * var(--h)); column-gap: 16px; padding: 0 16px; }
.nod { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; }
.nod .cerc { position: relative; flex: none; width: var(--c); height: var(--c); margin-bottom: calc(12px * var(--h)); border-radius: 50%; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; font: 800 calc(var(--c) * .37) var(--disp); color: var(--soft); transition: transform .12s; }
.nod.steag .cerc { background: var(--mk); border-color: var(--ink); border-radius: 18px; color: var(--ink); font-size: calc(var(--c) * .44); }
.nod.prima .cerc { width: var(--p); height: var(--p); margin-top: calc((var(--c) - var(--p)) / 2); padding: 0; border: 6px solid var(--rec); overflow: hidden; }
.nod.prima .cerc img { width: 100%; height: 100%; object-fit: cover; }
.nod .t { font-size: max(18px, var(--tx) * var(--h)); line-height: 1.15; color: var(--soft); }
.nod.prima .t, .nod.steag .t { font: 800 max(19px, (var(--tx) + 1px) * var(--h))/1.12 var(--disp); letter-spacing: -.025em; color: var(--ink); }
.nod .l { margin-top: 4px; font: 700 max(18px, var(--tx) * var(--h)) var(--copil); letter-spacing: 2px; color: var(--soft); }
.nod.prima .l { color: var(--recT); }
.nod.steag .l { letter-spacing: .5px; }
.nod .nota { position: absolute; top: calc((var(--c) - var(--p)) / 2 - 4px); left: calc(50% + var(--p) / 2 - 8px); font-size: max(26px, var(--t2) * var(--h)); white-space: nowrap; }
a.nod:hover .cerc { transform: scale(1.06); }
.nod.facuta .cerc::after { content: ''; position: absolute; inset: 0; background: rgba(31, 122, 77, .55); }
.nod .bifa-nod { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); width: calc(var(--p) * .5); height: calc(var(--p) * .5); border-radius: 50%; background: var(--ok); color: var(--on); display: grid; place-items: center; font-size: calc(var(--p) * .28); }
@media (min-width: 1100px) and (min-height: 560px) {
  .capitol-pag:has(.gata-banda:not([hidden])) > .eti { display: none; }
  .gata-banda { margin-top: var(--s1); padding-block: 8px; }
  .gata-banda p { font-size: var(--mic); }
  .gata-banda .btn { min-height: var(--btn-mic); }
  .harta { padding: 32px 24px 24px; }
  .noduri { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0; }
}
@media (min-width: 801px) and (max-width: 1099px) {
  .harta { padding: 72px 20px 32px; }
  .noduri { --c: 88px; --p: 120px; column-gap: 8px; padding: 0; }
  .nod .t { font-size: var(--mic); }
  .nod.prima .t, .nod.steag .t { font-size: calc(var(--mic) + 1px); }
  .nod .l { font-size: var(--mic); }
  .nod .nota { top: -56px; left: 50%; transform: translateX(-50%); font-size: 30px; }
}
@media (max-width: 800px) {
  .harta { padding: var(--s2) 20px; }
  .noduri { --c: 84px; --p: 110px; display: flex; flex-direction: column; gap: var(--s2); padding: 0; }
  .nod { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 18px; align-items: center; text-align: left; }
  .nod .cerc { grid-row: span 3; margin: 0 auto !important; }
  .nod .t { align-self: end; }
  .nod .l { align-self: start; margin-top: 0; }
  .nod .nota { position: static; grid-column: 2; font-size: 28px; }
}
@media (max-width: 600px) { .gata-banda { padding: var(--s2); } .gata-banda .btn { width: 100%; white-space: normal; } }

/* ============ Lecția ============
   Pe scenă, filmul, pașii și butonul „Mai departe” încap pe primul ecran; cardurile de dedesubt se văd derulând. */
.lectie-sus { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.lit-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.lit-chips span { display: flex; gap: .4em; padding: 14px 20px; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; font: 700 calc(var(--t2) + 2px)/1 var(--copil); color: var(--recT); }
.lectie-corp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; align-items: start; margin-top: var(--s3); }
.film { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ink); border: 2px solid var(--ink); border-radius: 24px; }
.film video { display: block; width: 100%; height: 100%; }
.film .start { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; background: url(../img/cadru-lumea.jpg) center/cover; }
.film .start b { width: 112px; height: 112px; border-radius: 50%; background: var(--rec); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 56px; transition: transform .12s; }
.film .start:hover b { transform: scale(1.06); }
.film .durata { position: absolute; right: 16px; bottom: 16px; padding: 6px 14px; border-radius: 10px; background: var(--ink); color: var(--on); font: 700 var(--mic) var(--mono); }
.lectie-colt { display: grid; gap: var(--s1); }
.pasi { display: grid; gap: 8px; }
.pas { display: flex; align-items: center; gap: 16px; padding: 8px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; text-decoration: none; transition: transform .12s; }
.pas b.n { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); font: 700 var(--mic) var(--mono); }
.pas h3 { font-size: calc(var(--tx) + 4px); }
.pas p { font-size: var(--mic); line-height: 1.25; color: var(--soft); }
.pas.acum { background: var(--ink); color: var(--on); }
.pas.acum b.n { background: var(--mk); color: var(--ink); }
.pas.acum p { color: var(--onS); }
a.pas:hover { transform: translateX(4px); }
.lectie-colt .nota { text-align: center; }
.lectie-jos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.lectie-jos .card { padding: 32px; }
.lectie-jos .galben { background: var(--mk); }
.lectie-jos p { margin-top: var(--s1); font-size: var(--t2); font-weight: 500; line-height: 1.24; letter-spacing: -.01em; }
.lectie-jos small { display: block; margin-top: 8px; font-size: var(--tx); color: var(--soft); }
@media (min-width: 1100px) and (min-height: 560px) {
  .lectie-pag .lectie-sus h1 { font-size: var(--t1); }
  .lectie-corp { margin-top: var(--s1); grid-template-columns: minmax(0, 720px) minmax(0, 1fr); }
}
@media (max-width: 1099px) { .lectie-corp, .lectie-jos { grid-template-columns: minmax(0, 1fr); } .pasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pasi { grid-template-columns: minmax(0, 1fr); }
  .lit-chips span { padding: 10px 14px; }
  .lectie-jos .card { padding: var(--s2); }
  .film .start b { width: 84px; height: 84px; font-size: 42px; }
}

/* ============ Pauza ============ */
.pauza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; align-items: center; }
.pauza h1 { margin-bottom: var(--s2); }
.pauza .zi { display: flex; align-items: center; gap: var(--s2); font-size: var(--t2); line-height: 1.25; }
.ceas { display: inline-flex; align-items: center; gap: 20px; margin: var(--s2) 0 var(--s1); padding: 16px 28px; background: var(--card); border: 2px solid var(--ink); border-radius: 22px; font: 700 56px/1 var(--mono); }
.ceas.gata { border-color: var(--ok); color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); }
.pauza .btn { display: flex; width: fit-content; margin-top: var(--s2); }
.pauza .legatura { display: inline-block; margin-top: var(--s1); font-size: var(--mic); color: var(--soft); }
@media (min-width: 1100px) and (min-height: 560px) {
  .pauza .poza-alba { padding: 16px; }
  .pauza .poza-alba img { height: 500px; aspect-ratio: auto; object-fit: contain; }
}
@media (max-width: 1000px) { .pauza { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .pauza .poza-alba { max-width: 420px; } }
@media (max-width: 600px) { .pauza .btn { white-space: normal; } .pauza .zi { gap: 14px; } .ceas { font-size: 44px; padding: 12px 20px; } }

/* ============ Fișa ============ */
.fisa-pag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--s3); align-items: start; }
.fisa-pag h1 { margin-bottom: var(--s1); }
.alegeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
.alegere { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 22px; cursor: pointer; }
.alegere input { position: absolute; opacity: 0; }
.alegere .r { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 24px; color: var(--on); }
.alegere .r .ic { visibility: hidden; }
.alegere:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.alegere:has(input:checked) .r { background: var(--ink); }
.alegere:has(input:checked) .r .ic { visibility: visible; }
.alegere h3 { font-size: calc(var(--tx) + 4px); }
.alegere p { font-size: var(--mic); line-height: 1.25; color: var(--soft); }
.fisa-pag .btn { width: 100%; margin-top: var(--s2); }
.fisa-pag .nota { margin: var(--s2) 0; }
.gandit { padding: var(--s2) 28px; background: var(--mk); }
.gandit h2 { margin: 8px 0; font-size: calc(var(--tx) + 4px); line-height: 1.15; }
.previz { position: sticky; top: 20px; }
.previz .stiva { position: relative; padding: 0 20px 20px 0; }
.previz .stiva::before { content: ''; position: absolute; left: 20px; top: 20px; right: 0; bottom: 0; background: var(--card); border: 2px solid var(--line); border-radius: 4px; }
.previz .cadru { position: relative; overflow: hidden; background: #fff; border: 2px solid var(--ink); }
.previz .nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: var(--s1); }
.previz .nav button { width: var(--btn-mic); height: var(--btn-mic); border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; font-size: 28px; }
.previz .nav button:disabled { opacity: .3; cursor: default; }
.previz .nav b { min-width: 7em; text-align: center; font: 700 var(--mic) var(--mono); }
@media (min-width: 1100px) and (min-height: 560px) {
  /* Foaia are înălțimea ferestrei, fără antet, săgeți și margini */
  .fisa-pag { grid-template-columns: minmax(0, 1fr) auto; }
  .previz .stiva { width: calc((100dvh - 88px - 2 * var(--s2) - var(--btn-mic) - var(--s1) - 24px) / 1.414 + 20px); }
}
@media (max-width: 1000px) { .fisa-pag { grid-template-columns: minmax(0, 1fr); } .previz { position: static; max-width: 640px; } }
@media (max-width: 600px) { .alegeri { grid-template-columns: minmax(0, 1fr); } }

/* Foaia A4 (794 × 1123 px la 96 dpi), copiată din demo-ul vechi; pe ecran o micșorează pagina, la tipar are mărimea ei */
.foaie { width: 794px; height: 1123px; background: #fff; color: #121316; font: 400 15.5px/1.34 var(--text); display: none; flex-direction: column; overflow: hidden; }
.foaie.vizibila { display: flex; }
.f-corp { flex: 1; padding: 26px 44px 8px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.f-antet { background: var(--mk); display: flex; justify-content: space-between; align-items: center; padding: 22px 44px; flex: none; }
.f-antet .eti { font-size: 13px; color: var(--ink); }
.f-antet h1 { font-size: 40px; margin-top: 6px; letter-spacing: -.035em; }
.f-antet img { width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.f-subsol { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 44px 22px; }
.f-subsol .logo { font-size: 21px; }
.f-subsol span.p { font: 500 13px var(--mono); color: var(--soft); }
.f-titlu { font: 800 25px/1.1 var(--disp); letter-spacing: -.03em; }
.f-cer { display: flex; gap: 10px; align-items: flex-start; font: 700 17.5px/1.26 var(--text); }
.f-cer b { flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 14px var(--text); }
.f-poezie { display: grid; grid-template-columns: 100px 1fr 150px; gap: 18px; align-items: center; }
.f-poezie.fara { grid-template-columns: 100px 1fr; }
.f-tila { height: 100px; border: 2px solid var(--ink); border-radius: 16px; display: grid; place-items: center; font: 700 42px var(--copil); color: var(--recT); letter-spacing: .08em; }
.f-versuri { font: 400 17.5px/1.32 var(--copil); }
.f-poezie img { width: 150px; height: 110px; object-fit: contain; }
.f-imag { display: grid; gap: 10px; }
.f-imag.c3 { grid-template-columns: repeat(3, 1fr); } .f-imag.c4 { grid-template-columns: repeat(4, 1fr); }
.f-imag figure { margin: 0; border: 1.5px solid var(--line); border-radius: 14px; height: 140px; padding: 8px; display: grid; place-items: center; }
.f-imag.c4 figure { height: 170px; }
.f-imag img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.f-imag figure.cu-cuvant { height: 148px; grid-template-rows: 1fr auto; }
.f-imag figcaption { font: 700 21px var(--copil); text-align: center; }
.f-scrie { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: end; }
.f-model { font: 400 25px/1.5 var(--scris); color: var(--recT); white-space: nowrap; word-spacing: .3em; min-width: 92px; }
.f-rand { height: 44px; position: relative; border-bottom: 1.5px solid #8f8a7c; }
.f-rand::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; border-top: 1px dashed #cfc9b8; }
.f-coloane { display: grid; gap: 8px 30px; }
.f-coloane.c2 { grid-template-columns: 1fr 1fr; } .f-coloane.c3 { grid-template-columns: repeat(3, 1fr); }
.f-comb { display: flex; align-items: end; gap: 10px; }
.f-comb .f-rand { flex: 1; }
.f-comb .bloc-m { font: 700 21px/1.3 var(--copil); color: var(--ink); white-space: nowrap; }
.f-comb .f-model { min-width: 0; font-size: 23px; }
.f-inf { background: var(--paper); border-radius: 12px; padding: 10px 16px; font-size: 15.5px; }
.f-verset { background: var(--paper); border-radius: 14px; padding: 14px 18px; font: 500 17.5px/1.3 var(--text); }
.f-verset.text { font-weight: 400; }
.f-verset small { display: block; color: var(--soft); margin-top: 3px; font-size: 14px; }
.f-litere { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.f-litere span { font: 700 25px var(--copil); color: var(--recT); border: 2px solid var(--ink); border-radius: 11px; padding: 3px 12px; }
.f-complet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.f-complet div { border: 1.5px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; }
.f-complet img { width: 100%; height: 86px; object-fit: contain; }
.f-complet b { font: 700 25px var(--copil); letter-spacing: .05em; }
.f-unire { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 100px; align-items: center; }
.f-unire .w { font: 700 24px var(--copil); }
.f-unire figure { margin: 0; border: 1.5px solid var(--line); border-radius: 14px; height: 68px; padding: 5px; }
.f-unire img { width: 100%; height: 100%; object-fit: contain; }
.f-careu { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.f-careu table { border-collapse: collapse; }
.f-careu td { width: 42px; height: 42px; border: 1.5px solid var(--ink); text-align: center; font: 700 23px var(--copil); }
.f-careu ul { list-style: none; padding: 0; font: 700 23px/1.6 var(--copil); }
.f-careu li::before { content: ''; display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 50%; margin-right: 10px; vertical-align: -2px; }
.f-gol { flex: 1; min-height: 0; }
.f-rugaminte { font: 600 25px/1.15 var(--nota); color: var(--co); }
#tipar { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff; }
  body > *:not(#tipar) { display: none !important; }
  #tipar { display: block !important; }
  #tipar .foaie { display: flex; break-after: page; page-break-after: always; zoom: 1 !important; }
  #tipar .foaie:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============ Rezultatul evaluării ============ */
.rezultat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.rezultat .nota-mare { font: 800 clamp(72px, min(9vw, 16vh), 136px)/1 var(--disp); letter-spacing: -.045em; color: var(--ok); margin: var(--s1) 0; }
.stele { display: flex; gap: 8px; font-size: clamp(56px, 10vh, 88px); margin-bottom: var(--s1); }
.stele .ic { stroke-width: 1.2; }
.stele .plina { fill: var(--mk); }
.tile { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); max-width: 640px; }
.tile span { height: clamp(60px, 10vh, 80px); border-radius: 18px; display: grid; place-items: center; background: var(--ok); color: var(--on); font: 700 var(--tx) var(--mono); }
.tile span.nu { background: var(--mk); color: var(--ink); border: 2px solid var(--ink); }
.rezultat h2.deluat { font-size: var(--t1); margin-bottom: var(--s2); }
.reluat { padding: var(--s2); margin-bottom: var(--s1); }
.reluat h3 { font-size: var(--t2); margin: 8px 0; }
.reluat .ex-ar { font: 400 36px/1.2 var(--copil); color: var(--recT); margin-bottom: var(--s1); }
.reluat .btn { min-height: var(--btn-mic); }
@media (max-width: 1000px) { .rezultat { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }
@media (max-width: 600px) { .tile { gap: 8px; } .tile span { border-radius: 12px; font-size: var(--mic); } .rezultat h2.deluat { font-size: var(--t2); } }

/* ============ Evaluarea pe foaie ============ */
.foaie-ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; margin-top: var(--s3); }
.pas-ev, .pas-negru { margin-bottom: var(--s1); padding: 18px 24px; border-radius: 22px; }
.pas-ev { display: flex; align-items: center; gap: 20px; background: var(--card); border: 2px solid var(--ink); }
button.pas-ev { width: 100%; text-align: left; }
.pas-negru { background: var(--ink); color: var(--on); }
.pas-negru .sus { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.pas-ev .b, .pas-negru .b { flex: none; width: var(--btn-mic); height: var(--btn-mic); border-radius: 50%; display: grid; place-items: center; font-size: 28px; }
.pas-ev .b { background: var(--ok); color: var(--on); }
.pas-negru .b { background: var(--mk); color: var(--ink); font: 800 28px var(--disp); }
.pas-ev h3, .pas-negru h3 { margin-bottom: 4px; font-size: calc(var(--tx) + 4px); }
.pas-ev p, .pas-negru p { font-size: var(--mic); line-height: 1.25; color: var(--soft); }
.pas-negru p { color: var(--onS); }
.pagini-foto { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s1); }
.foto, .adauga { display: flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 76px; padding: 8px 14px; border-radius: 18px; font: 700 var(--mic) var(--text); }
.foto { background: var(--card); color: var(--ink); }
.foto .ic { color: var(--ok); }
.foto img { width: 56px; height: 66px; object-fit: cover; border-radius: 6px; }
.adauga { border: 2px solid var(--onS); cursor: pointer; }
.adauga:hover { background: #2a2c33; }
.adauga input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.foaie-ev .btn { width: 100%; margin-top: var(--s2); }
.confirmare { display: none; margin-top: var(--s2); padding: 20px 24px; background: var(--mk); border: 2px solid var(--ink); border-radius: 22px; font-weight: 600; }
.confirmare.da { display: block; }
.confirmare .legatura { display: inline-block; margin-top: 8px; }
.masa { overflow: hidden; padding: 32px 40px 40px; background: #CFC7B2; border: 2px solid var(--ink); border-radius: 24px; }
.hartie { padding: 28px 30px 36px; background: #fff; transform: rotate(1.6deg); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); font-size: var(--mic); }
.hartie h3 { margin-bottom: 8px; font: 700 var(--tx) var(--text); letter-spacing: -.01em; }
.hartie h3:not(:first-child) { margin-top: var(--s2); }
.hartie .scris { min-height: 52px; padding: 14px 0 6px; border-bottom: 2px solid var(--line); font: 300 var(--mic)/1.3 var(--scris); color: var(--co); }
.hartie p { margin-top: 10px; color: var(--soft); }
@media (max-width: 1000px) { .foaie-ev { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .masa { padding: 20px; }
  .hartie { padding: 18px 16px 24px; }
  .hartie .scris { min-height: 42px; padding-top: 12px; font-size: 17px; }
  .pas-ev, .pas-negru { padding: 16px; gap: 14px; }
}