/* EduSprijin – Fișe la matematică. Toate regulile sunt prefixate cu .esf- ca să nu intre în conflict cu tema. */
.esf-app, .esf-vel {
  --esf-navy: #0b2a56; --esf-green: #5aa02c; --esf-green-d: #46841f; --esf-orange: #f7861a; --esf-red: #c81e2d;
  --esf-ink: #16223d; --esf-mut: #5b6785; --esf-line: #dde5d8;
  --esf-main: #f28a3c; --esf-light: #feeada; --esf-soft: #fff6ee;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; color: var(--esf-ink);
}
.esf-app.esf-t-minus { --esf-main: #3888e8; --esf-light: #dbeafd; --esf-soft: #eff6ff; }
.esf-app *, .esf-vel * { box-sizing: border-box; }
.esf-app { max-width: 980px; margin: 24px auto; background: #fff; border: 4px solid var(--esf-main); border-radius: 26px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(11, 42, 86, .10); }
.esf-app button, .esf-app input, .esf-vel button { font: inherit; letter-spacing: normal; text-transform: none; }

/* antet */
.esf-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 24px; background: var(--esf-soft); border-bottom: 3px solid var(--esf-light); }
.esf-brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.esf-logo { display: block; width: 62px; height: 62px; flex: none; }
.esf-logo svg { width: 100%; height: 100%; display: block; }
.esf-brand b { display: block; font-size: 1.65rem; line-height: 1; color: var(--esf-navy); letter-spacing: -.5px; }
.esf-brand b i { font-style: normal; color: var(--esf-green); }
.esf-titlu { flex: 1; min-width: 220px; }
.esf-titlu h2 { margin: 0; padding: 0; font-size: 1.3rem; line-height: 1.25; color: var(--esf-navy); border: 0; }
.esf-titlu p { margin: 2px 0 0; color: var(--esf-mut); font-size: .92rem; }

/* formular */
.esf-form { padding: 8px 24px 20px; }
.esf-grup { border: 0; margin: 0; padding: 14px 0 6px; min-width: 0; }
.esf-grup legend { padding: 0; font-weight: 700; color: var(--esf-navy); font-size: 1rem; margin-bottom: 8px; float: none; width: auto; }
.esf-rand { display: flex; flex-wrap: wrap; gap: 8px; }
.esf-opt { border: 2px solid var(--esf-light); background: #fff; color: var(--esf-ink); border-radius: 14px; padding: 9px 16px; cursor: pointer; font-weight: 600; box-shadow: none; }
.esf-opt:hover:not(:disabled) { border-color: var(--esf-main); }
.esf-opt.esf-mare { padding: 12px 26px; font-size: 1.15rem; min-width: 130px; }
.esf-opt.esf-on { background: var(--esf-main); border-color: var(--esf-main); color: #fff; }
.esf-opt:disabled, .esf-card:disabled { opacity: .45; cursor: not-allowed; }
.esf-nota { margin: 6px 0 0; color: var(--esf-mut); font-size: .86rem; }
.esf-carduri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .esf-carduri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .esf-carduri { grid-template-columns: 1fr; } }
.esf-card { display: grid; gap: 2px; justify-items: center; text-align: center; border: 2px solid var(--esf-light); background: #fff; border-radius: 16px; padding: 10px 8px 12px; cursor: pointer; color: var(--esf-ink); box-shadow: none; }
.esf-card:hover:not(:disabled) { border-color: var(--esf-main); }
.esf-card.esf-on { border-color: var(--esf-main); background: var(--esf-soft); box-shadow: 0 0 0 2px var(--esf-main) inset; }
.esf-pict { display: block; width: 100px; height: 40px; color: var(--esf-main); }
.esf-pict svg { width: 100%; height: 100%; display: block; }
.esf-cn { font-weight: 700; font-size: .95rem; }
.esf-cd { font-size: .78rem; color: var(--esf-mut); }
.esf-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .esf-acts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .esf-acts { grid-template-columns: 1fr; } }
.esf-act { display: grid; gap: 2px; align-content: center; text-align: center; border: 2px solid var(--esf-light); background: #fff; border-radius: 16px; padding: 12px 10px; cursor: pointer; color: var(--esf-ink); box-shadow: none; }
.esf-act:hover { border-color: var(--esf-main); }
.esf-act.esf-on { background: var(--esf-main); border-color: var(--esf-main); color: #fff; }
.esf-act.esf-on .esf-cd { color: rgba(255, 255, 255, .92); }
.esf-act:focus-visible { outline: 3px solid rgba(90, 160, 44, .45); outline-offset: 2px; }
.esf-campuri select { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; border: 2px solid var(--esf-light); border-radius: 12px; background: #fff; color: var(--esf-ink); }
.esf-campuri { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .esf-campuri { grid-template-columns: 1fr; } }
.esf-campuri label { display: block; font-size: .85rem; font-weight: 600; color: var(--esf-mut); }
.esf-campuri input { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; border: 2px solid var(--esf-light); border-radius: 12px; background: #fff; color: var(--esf-ink); }
.esf-campuri input:focus, .esf-opt:focus-visible, .esf-card:focus-visible, .esf-btn:focus-visible { outline: 3px solid rgba(90, 160, 44, .45); outline-offset: 2px; }
.esf-btn { display: inline-block; border: 2px solid #cdd8c6; background: #fff; color: var(--esf-navy) !important; border-radius: 12px; padding: 10px 18px; font-weight: 700; cursor: pointer; text-decoration: none !important; box-shadow: none; }
.esf-btn:hover { border-color: var(--esf-green); }
.esf-prim { background: var(--esf-green); border-color: var(--esf-green); color: #fff !important; }
.esf-prim:hover { background: var(--esf-green-d); border-color: var(--esf-green-d); }
.esf-gen { display: block; width: 100%; margin-top: 18px; padding: 14px; font-size: 1.15rem; border-radius: 16px; }
.esf-gen:disabled { opacity: .6; cursor: progress; }

/* subsol */
.esf-foot { background: var(--esf-light); padding: 14px 24px 16px; font-size: .85rem; color: #33405f; }
.esf-foot p { margin: 2px 0; }

.esf-raporteaza { color: var(--esf-mut) !important; font-size: .82rem; text-decoration: underline !important; cursor: pointer; background: none; border: 0; box-shadow: none !important; }
.esf-raporteaza:hover { color: var(--esf-navy) !important; }
.esf-raporteaza-mod { align-self: center; margin-left: 4px; }
.esf-foot .esf-versiune { margin-top: 6px; font-size: .75rem; color: var(--esf-mut); }

/* ferestre centrate */
body.esf-blocat { overflow: hidden; }
.esf-vel { position: fixed; inset: 0; z-index: 999999; background: rgba(11, 42, 86, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.esf-modal { background: #fff; border-radius: 20px; padding: 26px 28px 22px; width: min(480px, 100%); text-align: center; box-shadow: 0 20px 56px rgba(0, 0, 0, .32); animation: esf-apare .18s ease-out; }
.esf-modal h3 { margin: 0 0 6px; padding: 0; font-size: 1.2rem; color: var(--esf-navy); }
.esf-modal p { margin: 6px 0 16px; color: var(--esf-ink); }
.esf-mesaj { min-height: 2.6em; color: var(--esf-mut) !important; font-size: .92rem; }
.esf-bara { height: 14px; background: #eef5e8; border: 1px solid var(--esf-line); border-radius: 999px; overflow: hidden; }
.esf-bara i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #5aa02c, #fbbf0e, #f7861a); background-size: 200% 100%; transition: width .15s ease; animation: esf-curge 1.2s linear infinite; }
.esf-proc { margin-top: 8px; font-weight: 700; color: var(--esf-navy); font-variant-numeric: tabular-nums; }
.esf-ico { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; color: #fff; font-size: 1.9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--esf-green); }
.esf-ico-eroare { background: var(--esf-red); }
.esf-dlg-btn { display: flex; justify-content: center; gap: 10px; }
.esf-prev { width: min(980px, 100%); height: min(90vh, 900px); display: flex; flex-direction: column; padding: 16px 18px 18px; text-align: left; }
.esf-prev-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.esf-prev-cap h3 { margin: 0; }
.esf-prev-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.esf-cadru { flex: 1; width: 100%; border: 1px solid var(--esf-line); border-radius: 10px; min-height: 0; background: #f3f5f2; }
.esf-fara-prev { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--esf-line); border-radius: 12px; padding: 24px; color: var(--esf-mut); }
@keyframes esf-apare { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes esf-curge { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esf-modal, .esf-bara i { animation: none; transition: none; } }
.esf-sim { font-size: 1.35em; font-weight: 800; line-height: 1; }
.esf-cap-eq { font-size: 2rem; font-weight: 800; text-align: center; margin: 8px 0 12px; color: var(--esf-ink); }
.esf-cap-rand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.esf-cap-inp { width: 6.5rem; font-size: 1.3rem; text-align: center; padding: 8px; border: 2px solid var(--esf-light); border-radius: 12px; }
.esf-cap-msg { min-height: 1.4em; text-align: center; color: #b32d2e; margin: 4px 0 10px; }
.esf-raporteaza-mod { margin-left: 0; margin-right: 8px; }
.esf-rap-text, .esf-rap-inp { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 2px solid var(--esf-light); border-radius: 12px; margin-bottom: 8px; }
.esf-rap-capcana { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.esf-rap { text-align: left; }
.esf-prev-btn { align-items: center; }
