/* decebal.net — tokeni si stiluri comune pentru toate paginile.
   Extras din <style> inline pe 2026-08-12 (lectia 8, Sites & Pages):
   101 de linii erau duplicate in cele doua pagini, deci orice schimbare
   de token trebuia facuta de doua ori. */

  :root {
    --bg: #ffffff;
    --fg: #1a1d21;
    --muted: #5a6270;
    --accent: #0e5a8a;
    --accent-fg: #ffffff;
    --card: #f4f6f8;
    --border: #d9dee4;
    --pass: #1d7a46;
    --fail: #a33030;

    /* Scara de spatiere: multipli de 0.25rem. Lectia 8 (Sites & Pages):
       doua sectiuni scrise la momente diferite folosesc ritmuri verticale
       diferite, si asta se citeste ca gresit inainte sa poata cineva spune de ce. */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
    --s-12: 3rem;    --s-14: 3.5rem;  --s-16: 4rem;
    /* Scara tipografica */
    --t-xs: 0.85rem; --t-sm: 0.9rem;  --t-base: 0.95rem;
    --t-lg: 1.15rem; --t-xl: 1.35rem; --t-2xl: 1.6rem; --t-3xl: 2rem;
    --radius: 8px;   --radius-sm: 6px;
    --weight-bold: 700;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #14171a;
      --fg: #e8eaed;
      --muted: #9aa3ad;
      --accent: #4da3d8;
      --accent-fg: #10171c;
      --card: #1d2126;
      --border: #2e343b;
      --pass: #4cc07d;
      --fail: #e07b7b;
    }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--fg);
    font: 17px/1.6 Georgia, 'Times New Roman', serif;
  }
  main { max-width: 46rem; margin: 0 auto; padding: 0 var(--s-5) var(--s-16); }
  h1, h2, h3 { line-height: 1.25; font-weight: var(--weight-bold); }
  h1 { font-size: var(--t-3xl); margin: var(--s-12) 0 var(--s-4); }
  h2 { font-size: var(--t-xl); margin: var(--s-12) 0 var(--s-3); }
  p { margin: 0 0 var(--s-4); }
  .muted { color: var(--muted); }
  .lede { font-size: var(--t-lg); }
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-5) 0;
  }
  ol.steps { margin: 0 0 var(--s-4) var(--s-5); }
  ol.steps li { margin-bottom: var(--s-4); }
  ul.plain { margin: 0 0 var(--s-4) var(--s-5); }
  ul.plain li { margin-bottom: var(--s-2); }
  .verdicts { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-4) 0; }
  .verdict {
    flex: 1 1 10rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-4) var(--s-4);
    font-size: var(--t-base);
  }
  .verdict strong { display: block; margin-bottom: var(--s-1); }
  .v-pass strong { color: var(--pass); }
  .v-fail strong { color: var(--fail); }
  .price-row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
  .price-row .card { flex: 1 1 16rem; margin: 0; }
  .price { font-size: var(--t-2xl); font-weight: var(--weight-bold); margin: var(--s-1) 0; }
  .btn {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-fg);
    padding: var(--s-3) var(--s-6);
    border-radius: var(--radius-sm);
    border: none;
    font: inherit;
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    margin-top: var(--s-3);
  }
  .btn.secondary {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
  }
  form label { display: block; font-weight: var(--weight-bold); margin: var(--s-4) 0 var(--s-1); font-size: var(--t-base); }
  form input, form select, form textarea {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    font: inherit;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  form textarea { min-height: 7rem; resize: vertical; }
  footer {
    border-top: 1px solid var(--border);
    margin-top: var(--s-14);
    padding-top: var(--s-5);
    font-size: var(--t-sm);
    color: var(--muted);
  }
  .honesty { border-left: 4px solid var(--accent); }
  .brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) 0 0;
  }
  .brand svg { display: block; }
  .brand .name { font-weight: var(--weight-bold); letter-spacing: 0.02em; }
  .brand .tag { color: var(--muted); font-size: var(--t-xs); display: block; }
  .seal-wrap { text-align: center; margin: var(--s-10) 0 0; }
  .seal-wrap svg { opacity: 0.9; }

  .pilot{border:2px solid var(--accent);border-radius:var(--radius);padding: 14px 18px;
         margin: 22px 0;background:color-mix(in srgb, var(--accent) 7%, transparent)}
  .pilot strong{color:var(--accent)}
  .pilot p{margin:0}
  .pilot p + p{margin-top:8px}

  @media (max-width: 34rem) {
    .price-row { display:block; }
    .price-row .card { margin-bottom: var(--s-4); }
    h1 { font-size: var(--t-2xl); }
    main { padding-left:1rem; padding-right:1rem; }
  }

  /* --- doar pagina de raport --- */
.wf-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin: var(--s-5) 0; }
  .wf-wrap table.wf { margin: 0; min-width:32rem; }
  table.wf { width:100%; border-collapse:collapse; font-size:0.86rem;
             font-family:ui-monospace,'SF Mono',Menlo,monospace; margin: var(--s-5) 0; }
  table.wf th { text-align:right; padding: 6px 8px; border-bottom:2px solid var(--border);
                font-weight: var(--weight-bold); color:var(--muted); font-size:0.74rem;
                text-transform:uppercase; letter-spacing:.06em; }
  table.wf th:first-child, table.wf td:first-child { text-align:left; }
  table.wf td { text-align:right; padding: 6px 8px; border-bottom:1px solid var(--border); }
  table.wf tr.fail td:last-child { color:var(--fail); font-weight: var(--weight-bold); }
  table.wf tr.pass td:last-child { color:var(--pass); font-weight: var(--weight-bold); }
  table.wf tr.pass { background:color-mix(in srgb, var(--pass) 7%, transparent); }
  .neg { color:var(--fail); }
  .pos { color:var(--pass); }
  .big-claim { font-size:1.5rem; font-weight: var(--weight-bold); margin: var(--s-6) 0 var(--s-2); }

  /* FAQ — <details> nativ, fara JavaScript. Adaugat 2026-08-12 (lectia 7,
     Sites & Pages): componenta imprumutata ca specificatie, reconstruita in
     markup propriu cu tokenii proprii. Registrul e React+Tailwind; pagina asta
     are 100 la performanta tocmai fiindca n-are niciun script, deci am luat
     comportamentul, nu codul. */
  .faq { margin: var(--s-6) 0; }
  .faq details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    margin-bottom: var(--s-2);
  }
  .faq summary {
    cursor: pointer;
    padding: var(--s-3) var(--s-5);
    font-weight: var(--weight-bold);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    color: var(--accent);
    font-size: var(--t-lg);
    line-height: 1;
    flex: 0 0 auto;
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq details[open] summary { border-bottom: 1px solid var(--border); }
  .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .faq .answer { padding: var(--s-4) var(--s-5) var(--s-2); }
  .faq .answer p { margin-bottom: var(--s-3); }
  .faq .answer p:last-child { margin-bottom: 0; }

  /* Formular cu doua intentii, fara JavaScript (2026-08-12).
     De ce exista: butonul "Ask about supervision" de pe cardul produsului
     principal ducea la un formular care cerea reguli de tranzactionare —
     altceva decat ceruse omul care a dat clic. Comutarea se face cu :has(),
     nu cu script, ca pagina sa ramana la 100 pe performanta.
     Degradare: pe un browser fara :has() se vad toate campurile, adica exact
     comportamentul de dinainte. Nimic nu se rupe. */
  .intent { border: 1px solid var(--border); border-radius: var(--radius);
            padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
  .intent legend { font-weight: var(--weight-bold); padding: 0 var(--s-1); }
  /* Regula generala din formular pune width:100% pe orice input, ceea ce
     impinge textul radioului in afara casetei. Aici o anulam explicit. */
  .intent label { display: flex; align-items: flex-start; gap: var(--s-2);
                  font-weight: 400; margin: var(--s-2) 0; cursor: pointer;
                  font-size: var(--t-base); }
  .intent input[type="radio"] {
    width: auto; flex: 0 0 auto; margin: 0.28em 0 0 0; padding: 0;
    border: 0; background: none; accent-color: var(--accent);
  }

  /* Campurile despre reguli dispar daca intentia nu e validarea. */
  form:has(#i-sup:checked, #i-ask:checked) .rule-fields,
  form:has(#i-sup:checked, #i-ask:checked) .btn-rules { display: none; }
  /* Si invers: campul de intrebare apare doar atunci. */
  form:not(:has(#i-sup:checked, #i-ask:checked)) .other-fields,
  form:not(:has(#i-sup:checked, #i-ask:checked)) .btn-other { display: none; }