/* Reproducere a look-ului EDITOR MODULE pentru context credibil */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  color: #232323;
  min-height: 100vh;
  line-height: 1.55;
}

/* ── Variante de fundal (comutator jos-dreapta) ─────────────────── */
body.fundal-verde { background: linear-gradient(160deg, #7fbf7f 0%, #4e9a4e 100%); }

/* grain fin de hartie, doar pe variantele noi */
body.fundal-salvie::after,
body.fundal-grafit::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

body.fundal-salvie {
  background:
    radial-gradient(1100px 750px at 88% -12%, rgba(46, 125, 50, 0.16), transparent 60%),
    radial-gradient(950px 680px at -12% 108%, rgba(23, 107, 135, 0.13), transparent 55%),
    linear-gradient(175deg, #F7F9F7 0%, #ECF1ED 55%, #E7EEE9 100%);
  background-attachment: fixed;
}
body.fundal-salvie .demo-continut {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px -32px rgba(23, 52, 38, 0.25), 0 2px 8px rgba(23, 52, 38, 0.05);
}
body.fundal-salvie .demo-subsol { color: #5a6f60; }

body.fundal-grafit {
  background:
    radial-gradient(1000px 700px at 85% -15%, rgba(52, 211, 153, 0.14), transparent 60%),
    radial-gradient(900px 650px at -5% 115%, rgba(56, 189, 248, 0.10), transparent 55%),
    linear-gradient(180deg, #0E1513 0%, #14201C 60%, #101917 100%);
  background-attachment: fixed;
}
body.fundal-grafit .demo-continut {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.fundal-grafit .demo-subsol { color: #9db8ab; }

/* antet editorial pe variantele noi: eyebrow + headline centrat */
body.fundal-salvie .demo-antet__bara,
body.fundal-grafit .demo-antet__bara {
  background: transparent;
  border: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  padding: 26px 24px 4px;
}
body.fundal-salvie .demo-antet__bara { color: #6b7f71; }
body.fundal-grafit .demo-antet__bara { color: #87a394; }
body.fundal-salvie .demo-antet h1,
body.fundal-grafit .demo-antet h1 {
  background: transparent;
  text-align: center;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 24px 10px;
}
body.fundal-salvie .demo-antet h1 { color: #1e2b22; }
body.fundal-grafit .demo-antet h1 { color: #f2f7f3; }

/* comutatorul de fundal */
.fundal-comutator {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(18, 26, 22, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}
.fundal-comutator button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 34px;
  font: 600 12px/1 'Open Sans', sans-serif;
  cursor: pointer;
  background: transparent;
  color: #cfe3d6;
  transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), color 0.25s;
}
.fundal-comutator button.este-activ { background: #fff; color: #173426; }
.fundal-comutator button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
  .fundal-comutator { right: 10px; bottom: 10px; }
  .fundal-comutator button { padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fundal-comutator button { transition: none; }
}
.demo-antet__bara {
  background: #f6f6f4; border-bottom: 1px solid #ddd;
  padding: 12px 24px; font-size: 14px; color: #555;
}
.demo-antet h1 {
  background: #fafafa; margin: 0; padding: 20px 24px;
  font-size: 22px; font-weight: 400; letter-spacing: 0.02em;
}
.demo-continut {
  max-width: 960px; margin: 24px auto 48px;
  background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,0.25);
}
.demo-pas + .demo-pas { border-top: 1px solid #eee; }
.demo-pas__titlu {
  background: #5cb85c; color: #fff; margin: 0;
  padding: 12px 20px; font-size: 15px; font-weight: 600;
}
.demo-pas__corp { padding: 20px; }
.demo-subsol {
  text-align: center; color: #eaf5ea; font-size: 12px; padding: 0 0 24px;
}
/* intrebare simulata (element existent al platformei) */
.demo-intrebare label { display: block; margin: 6px 0; cursor: pointer; }
.demo-intrebare .este-feedback {
  display: none; margin-top: 10px; padding: 10px 12px;
  background: #eef7ee; border-left: 3px solid #5cb85c; font-size: 0.95em;
}
.demo-intrebare.s-a-raspuns .este-feedback { display: block; }
/* video placeholder */
.demo-video { width: 100%; aspect-ratio: 16/9; background: #1c1c1c;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  color: #9ad29a; font-size: 14px; }
/* playground */
.demo-playground { display: flex; gap: 24px; align-items: flex-start; }
.demo-playground__form { flex: 0 0 320px; min-width: 0; }
.demo-playground__rezultat { flex: 1 1 0; min-width: 0; }
.demo-playground__rezultat h3 { margin-top: 0; font-size: 14px; color: #666; }
.cog-editor fieldset { border: 1px solid #ddd; border-radius: 4px; margin: 0 0 14px; padding: 10px 12px; }
.cog-editor legend { font-size: 12px; font-weight: 600; color: #4e9a4e; padding: 0 6px; }
.cog-editor__camp { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.cog-editor__camp label { flex: 0 0 140px; color: #555; }
.cog-editor__camp input, .cog-editor__camp select, .cog-editor__camp textarea {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 13px; padding: 4px 6px;
  border: 1px solid #ccc; border-radius: 3px;
}
.cog-editor__camp input[type="color"] { padding: 0; height: 28px; }
.cog-editor__cauta { width: 100%; margin-bottom: 8px; font: inherit; font-size: 13px;
  padding: 5px 8px; border: 1px solid #ccc; border-radius: 3px; }
.cog-editor__grila { display: flex; flex-wrap: wrap; gap: 6px; max-height: 130px; overflow-y: auto; }
.cog-editor__simbol { width: 34px; height: 34px; border: 1px solid #ddd; border-radius: 4px;
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #666; }
.cog-editor__simbol svg { width: 18px; height: 18px; stroke: #444; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cog-editor__simbol.este-activ { border-color: #5cb85c; box-shadow: 0 0 0 2px rgba(92,184,92,0.35); }
.cog-editor__nota { font-size: 12px; color: #777; }
@media (max-width: 767px) {
  .demo-playground { flex-direction: column; }
  .demo-playground__form { flex-basis: auto; width: 100%; }
}
/* tema demo */
.demo-tema { max-width: 460px; margin-bottom: 16px; }
.demo-tema__titlu { font-size: 14px; color: #666; margin: 0 0 10px; }
/* titlurile sectiunilor, acordate cu fiecare fundal */
body.fundal-salvie .demo-pas__titlu { background: #4d8a5c; }
body.fundal-grafit .demo-pas__titlu { background: #1d2f28; color: #d9efe2; }