.ssmx *, .ssmx *::before, .ssmx *::after { box-sizing: border-box; }

.ssmx {
  /* Temă MISO (dark, red-on-near-black + silver) — mapată pe variabilele componentei.
     Structura semantică e păstrată: roșu = acțiune primară + amenzi, verde/chihlimbar =
     da/parțial, argintiu (--steel) = starea „neverificat / nu știu" (distinctă de pericol). */
  --ink:      #faf6f5;                 /* text principal (txt-hi) */
  --ink-2:    #c9bdbf;                 /* text secundar (txt-mid) */
  --ink-3:    #8f8184;                 /* text estompat (txt-low) */
  --paper:    #150f10;                 /* fundal panou (card) */
  --wash:     #1d1618;                 /* suprafață ridicată: subsol, cod, opțiune N/A */
  --wash-2:   #2c2225;                 /* trasee / separatoare / umpluturi subtile */
  --line:     rgba(255,190,196,.14);   /* borduri (linia brandului) */
  --indigo:   #f2373f;                 /* roșu brand — umpluturi primare (butoane, cipuri, progres), text alb */
  --brick:    #ff5158;                 /* roșu aprins — amenzi, pericol, „nu" */
  --brick-bg: #2a1417;                 /* tentă roșie închisă */
  --ok:       #46d39a;                 /* verde (conform) */
  --ok-bg:    #10231a;
  --amber:    #f0b64a;                 /* parțial / avertisment */
  --amber-bg: #251d0b;
  --steel:    #aeb7cc;                 /* argintiu — accent neutru „neverificat / necunoscut" */

  --f-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-num: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  font-family: var(--f-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  max-height: 100%;
  font-size: 15px;
}

/* ---- Temă LIGHT: se activează DOAR când pagina gazdă are data-theme="light"
   (homepage cu switch). Pagina canonică /autoevaluare-ssm.html nu setează data-theme,
   deci rămâne pe dark (implicit) — fără regresie. Structura semantică e neschimbată. ---- */
:root[data-theme="light"] .ssmx{
  --ink:      #1a1416;
  --ink-2:    #4c4245;
  --ink-3:    #6f6669;
  --paper:    #ffffff;
  --wash:     #f4f1f1;
  --wash-2:   #e7e1e2;
  --line:     rgba(23,14,16,.12);
  --brick:    #d0353c;
  --brick-bg: rgba(242,55,63,.08);
  --ok:       #128a5c;
  --ok-bg:    rgba(18,138,92,.10);
  --amber:    #b7791f;
  --amber-bg: rgba(183,121,31,.12);
  --steel:    #5b6478;
}
:root[data-theme="light"] .ssmx-casc-fill.cut{background:repeating-linear-gradient(135deg,var(--wash-2),var(--wash-2) 4px,#cfc8ca 4px,#cfc8ca 8px)}
:root[data-theme="light"] .ssmx-casc-fill.unk{background:repeating-linear-gradient(135deg,var(--steel),var(--steel) 5px,#8791a6 5px,#8791a6 10px)}

.ssmx button { font: inherit; cursor: pointer; }
.ssmx :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* ---------- header ---------- */
.ssmx-head {
  flex: 0 0 auto;
  padding: 18px 24px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.ssmx-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ssmx-eyebrow {
  font-family: var(--f-num); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ssmx-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 2px 0 0; }
.ssmx-step { font-family: var(--f-num); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

.ssmx-rail { display: flex; gap: 3px; margin: 14px 0 0; padding-bottom: 12px; }
.ssmx-rail i {
  flex: 1; height: 3px; background: var(--wash-2); border-radius: 2px;
  transition: background .25s ease;
}
.ssmx-rail i.on  { background: var(--indigo); }
.ssmx-rail i.now { background: var(--brick); }

/* ---------- body ---------- */
.ssmx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; }
.ssmx-wrap { max-width: 720px; margin: 0 auto; }

.ssmx-lede { color: var(--ink-2); font-size: 14.5px; margin: 0 0 22px; }
.ssmx-lede strong { color: var(--ink); font-weight: 600; }

/* ---------- mode cards ---------- */
.ssmx-modes { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .ssmx-modes { grid-template-columns: 1fr; } }
.ssmx-mode {
  text-align: left; background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px; padding: 20px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ssmx-mode:hover { border-color: var(--indigo); box-shadow: 0 2px 0 var(--indigo); transform: translateY(-1px); }
.ssmx-mode h3 { margin: 0; font-size: 16px; font-weight: 650; }
.ssmx-mode .ssmx-meta {
  font-family: var(--f-num); font-size: 11.5px; color: var(--brick);
  letter-spacing: .02em; display: flex; gap: 10px; align-items: center;
}
.ssmx-mode .ssmx-meta b { font-weight: 500; color: var(--ink-3); }
.ssmx-mode p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ssmx-mode ul { margin: 0; padding-left: 17px; font-size: 13px; color: var(--ink-2); }
.ssmx-mode ul li { margin-bottom: 3px; }

/* ---------- profile ---------- */
.ssmx-q { margin-bottom: 26px; }
.ssmx-q > h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 650; }
.ssmx-q > p { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
.ssmx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ssmx-chip {
  border: 1px solid var(--line); background: var(--paper); border-radius: 2px;
  padding: 8px 13px; font-size: 13.5px; color: var(--ink-2); transition: all .12s;
}
.ssmx-chip:hover { border-color: var(--ink-3); }
.ssmx-chip.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* ---------- items ---------- */
.ssmx-sec-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px;
  padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.ssmx-sec-num { font-family: var(--f-num); font-size: 12px; color: var(--brick); }
.ssmx-sec-head h3 { margin: 0; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.ssmx-sec-count { margin-left: auto; font-family: var(--f-num); font-size: 11px; color: var(--ink-3); }

.ssmx-item { padding: 18px 0; border-bottom: 1px solid var(--wash-2); }
.ssmx-item-t { font-size: 14.5px; font-weight: 550; margin: 0 0 6px; }
.ssmx-check {
  margin: 0 0 12px; font-size: 13px; color: var(--ink-2);
  border-left: 2px solid var(--wash-2); padding-left: 11px;
}
.ssmx-check b { font-weight: 600; font-size: 11px;
  font-family: var(--f-num); letter-spacing: .08em; text-transform: uppercase;
  display: block; color: var(--ink-3); margin-bottom: 2px; }

.ssmx-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ssmx-opt {
  border: 1px solid var(--line); background: var(--paper); border-radius: 2px;
  padding: 8px 12px; min-height: 40px; font-size: 13px; color: var(--ink-2); transition: all .12s;
}
.ssmx-opt:hover { border-color: var(--ink-3); }
.ssmx-opt[data-v="da"].on    { background: var(--ok-bg);    border-color: var(--ok);    color: var(--ok);    font-weight: 600; }
.ssmx-opt[data-v="part"].on  { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); font-weight: 600; }
.ssmx-opt[data-v="nu"].on    { background: var(--brick-bg); border-color: var(--brick); color: var(--brick); font-weight: 600; }
.ssmx-opt[data-v="nusti"].on { background: rgba(174,183,204,.10); border: 1px dashed var(--steel); color: var(--steel); font-weight: 700; }

/* linia de temei / miză, sub opțiuni */
.ssmx-basis.risk    { color: var(--brick); }
.ssmx-basis.risk em { color: var(--brick); font-weight: 600; }
.ssmx-basis.unsure {
  color: var(--steel); background: rgba(174,183,204,.08); border: 1px dashed var(--steel);
  border-radius: 2px; padding: 8px 11px; font-size: 11.5px; line-height: 1.5;
}
.ssmx-basis.unsure b { font-weight: 700; }
.ssmx-basis.idle { color: var(--ink-3); }
.ssmx-basis.idle b { color: var(--ink-2); font-weight: 600; }
.ssmx-opt[data-v="na"].on    { background: var(--wash);     border-color: var(--ink-3); color: var(--ink-2); font-weight: 600; }

/* neverificat */
.ssmx-pending {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-family: var(--f-num); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); border: 1px dashed var(--line); border-radius: 2px; padding: 0 5px; font-weight: 500;
}
.ssmx-pending.on { color: var(--steel); border-color: var(--steel); border-style: dashed; font-weight: 700; background: rgba(174,183,204,.10); }
.ssmx-item.pending { box-shadow: inset 2px 0 0 var(--wash-2); padding-left: 13px; }
.ssmx-sec-count em { font-style: normal; color: var(--steel); }
.ssmx-unk { color: var(--steel); font-weight: 600; }

.ssmx-cov { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); }
.ssmx-cov-bar { height: 6px; background: var(--wash-2); border-radius: 1px; overflow: hidden; margin-bottom: 9px; }
.ssmx-cov-bar i { display: block; height: 100%; background: var(--indigo); transition: width .45s ease; }
.ssmx-cov-txt { font-size: 13px; color: var(--ink-2); }
.ssmx-cov-txt b { color: var(--ink); }

.ssmx-basis {
  margin-top: 10px; font-family: var(--f-num); font-size: 11px; color: var(--ink-3);
  display: none; letter-spacing: .01em;
}
.ssmx-item.flagged .ssmx-basis, .ssmx-item.pending .ssmx-basis { display: block; }
.ssmx-basis em { font-style: normal; color: var(--brick); }

/* ---------- footer ---------- */
.ssmx-foot {
  flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--wash);
  padding: 12px 24px; display: flex; align-items: center; gap: 16px;
}
.ssmx-live { flex: 1 1 auto; min-width: 0; }
.ssmx-live-lab {
  font-family: var(--f-num); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.ssmx-live-val { font-family: var(--f-num); font-size: 17px; font-weight: 600; color: var(--brick); letter-spacing: -.02em; }
.ssmx-live-val.zero { color: var(--ok); }
.ssmx-live-sub { font-size: 11.5px; color: var(--ink-3); }

.ssmx-btn {
  border: 1px solid var(--indigo); background: var(--indigo); color: #fff;
  border-radius: 2px; padding: 10px 20px; font-size: 14px; font-weight: 600;
  white-space: nowrap; transition: opacity .12s;
}
.ssmx-btn:hover { opacity: .88; }
.ssmx-btn[disabled] { opacity: .35; cursor: not-allowed; }
.ssmx-btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line); font-weight: 500; }
.ssmx-btn.ghost:hover { border-color: var(--ink-3); opacity: 1; }

/* ---------- results ---------- */
.ssmx-verdict { border: 1px solid var(--line); border-top: 3px solid var(--brick); padding: 22px; margin-bottom: 26px; }
.ssmx-verdict.clean { border-top-color: var(--ok); }
.ssmx-verdict-lab { font-family: var(--f-num); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.ssmx-verdict-num {
  font-family: var(--f-num); font-size: clamp(26px, 7vw, 40px); font-weight: 650;
  letter-spacing: -.03em; color: var(--brick); margin: 6px 0 2px; line-height: 1.05;
}
.ssmx-verdict.clean .ssmx-verdict-num { color: var(--ok); }
.ssmx-verdict-note { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; }

/* cascade — elementul-semnătură */
.ssmx-casc { margin: 22px 0 0; }
.ssmx-casc-row { display: grid; grid-template-columns: 130px 1fr 108px; gap: 12px; align-items: center; margin-bottom: 9px; font-size: 12.5px; }
@media (max-width: 560px) { .ssmx-casc-row { grid-template-columns: 96px 1fr 92px; gap: 8px; font-size: 11.5px; } }
.ssmx-casc-lab { color: var(--ink-2); }
.ssmx-casc-bar { position: relative; height: 22px; background: var(--wash-2); border-radius: 1px; overflow: visible; }
.ssmx-casc-fill { position: absolute; inset: 0 auto 0 0; background: var(--indigo); border-radius: 1px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.ssmx-casc-fill.risk { background: var(--brick); }
.ssmx-casc-fill.cut  { background: repeating-linear-gradient(135deg, var(--wash-2), var(--wash-2) 4px, #3a2e31 4px, #3a2e31 8px); }
.ssmx-casc-fill.unk  { background: repeating-linear-gradient(135deg, var(--steel), var(--steel) 5px, #6b7488 5px, #6b7488 10px); }
.ssmx-casc-cap { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.ssmx-casc-cap::after {
  content: attr(data-l); position: absolute; left: 6px; top: -16px; white-space: nowrap;
  font-family: var(--f-num); font-size: 9.5px; color: var(--ink); letter-spacing: .04em;
}
.ssmx-casc-val { font-family: var(--f-num); text-align: right; font-weight: 600; }

/* tabel */
.ssmx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.ssmx-tbl th {
  text-align: left; font-family: var(--f-num); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--ink); padding: 0 8px 7px 0;
}
.ssmx-tbl td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--wash-2); vertical-align: top; }
.ssmx-tbl td.num { font-family: var(--f-num); text-align: right; white-space: nowrap; padding-right: 0; }
.ssmx-tbl .leg { font-family: var(--f-num); font-size: 11px; color: var(--ink-3); display: block; margin-top: 3px; }
.ssmx-tag {
  display: inline-block; font-family: var(--f-num); font-size: 9.5px; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 2px; margin-left: 6px; vertical-align: 1px;
}
.ssmx-tag.prev { background: var(--amber-bg); color: var(--amber); }
.ssmx-tag.part { background: var(--wash-2); color: var(--ink-2); }
.ssmx-tag.unk  { background: transparent; color: var(--steel); box-shadow: inset 0 0 0 1px var(--steel); }
.ssmx-tbl tfoot td { border-bottom: none; border-top: 2px solid var(--ink); font-weight: 650; padding-top: 10px; }

.ssmx-block { margin-top: 30px; }
.ssmx-block > h4 {
  margin: 0 0 10px; font-size: 12px; font-family: var(--f-num); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.ssmx-calc { font-size: 13px; color: var(--ink-2); }
.ssmx-calc li { margin-bottom: 7px; }
.ssmx-calc code { font-family: var(--f-num); font-size: 12px; color: var(--ink); background: var(--wash); padding: 1px 4px; }

.ssmx-warn { border-left: 3px solid var(--amber); background: var(--amber-bg); padding: 13px 15px; font-size: 13px; margin-bottom: 10px; }
.ssmx-warn b { display: block; margin-bottom: 3px; color: var(--ink); }
.ssmx-warn.hard { border-left-color: var(--brick); background: var(--brick-bg); }

.ssmx-fine { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin-top: 28px;
  padding-top: 16px; border-top: 1px solid var(--wash-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* tabletă / modală îngustă */
@media (max-width: 720px) {
  .ssmx { font-size: 14.5px; }
  .ssmx-head { padding: 15px 18px 0; }
  .ssmx-body { padding: 20px 18px; }
  .ssmx-foot { padding: 11px 18px; }
  .ssmx-title { font-size: 16px; }
  .ssmx-step { width: 100%; }
}

/* telefon */
@media (max-width: 560px) {
  .ssmx-head { padding: 14px 14px 0; }
  .ssmx-body { padding: 18px 14px 22px; }
  .ssmx-foot { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }

  .ssmx-live { flex: 1 0 100%; order: 1; }
  .ssmx-foot .ssmx-btn { order: 2; flex: 1 1 auto; padding: 12px 14px; }
  .ssmx-foot .ssmx-btn.ghost { flex: 0 0 auto; }

  .ssmx-live-val { font-size: 15.5px; }
  .ssmx-live-sub { font-size: 11px; }

  .ssmx-opt { flex: 1 1 calc(50% - 4px); text-align: center; padding: 9px 8px; }
  .ssmx-opt[data-v="na"] { flex-basis: 100%; }
  .ssmx-chip { min-height: 40px; }

  .ssmx-item { padding: 16px 0; }
  .ssmx-item-t { font-size: 14px; }
  .ssmx-check { font-size: 12.5px; }

  .ssmx-sec-head { flex-wrap: wrap; }
  .ssmx-sec-count { margin-left: 0; flex-basis: 100%; }

  .ssmx-verdict { padding: 17px 15px; }
  .ssmx-casc-cap::after { display: none; }   /* eticheta ar depăși ecranul */
  .ssmx-mode { padding: 17px; }
}

/* cascada: etichetă deasupra barei */
@media (max-width: 430px) {
  .ssmx-casc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lab val" "bar bar";
    row-gap: 5px; margin-bottom: 14px;
  }
  .ssmx-casc-lab { grid-area: lab; }
  .ssmx-casc-val { grid-area: val; }
  .ssmx-casc-bar { grid-area: bar; height: 18px; }
}

/* tabelele devin carduri */
@media (max-width: 480px) {
  .ssmx-tbl, .ssmx-tbl thead, .ssmx-tbl tbody, .ssmx-tbl tfoot,
  .ssmx-tbl tr, .ssmx-tbl th, .ssmx-tbl td { display: block; width: 100%; }
  .ssmx-tbl thead { display: none; }
  .ssmx-tbl tr { border-bottom: 1px solid var(--wash-2); padding: 12px 0; }
  .ssmx-tbl td { border: 0; padding: 0; }
  .ssmx-tbl td.num {
    display: inline-block; width: auto; text-align: left;
    margin: 8px 16px 0 0; font-size: 13px;
  }
  .ssmx-tbl td.num::before {
    content: attr(data-l) " "; color: var(--ink-3); font-family: var(--f-num);
    font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  }
  .ssmx-tbl tfoot tr { border-top: 2px solid var(--ink); border-bottom: 0; }
  .ssmx-tag { margin-left: 0; margin-right: 6px; }
}

@media print {

  .ssmx-head, .ssmx-foot { display: none !important; }
  .ssmx-body { overflow: visible !important; }
  .ssmx { height: auto !important; max-height: none !important; min-height: 0 !important; }
  /* NOTĂ integrare: dacă montezi componenta într-un wrapper cu position:fixed +
     overflow:hidden (ex. o modală), regulile de print pentru ACEL wrapper
     (position:static / height:auto / overflow:visible) trebuie adăugate în CSS-ul
     paginii-gazdă — vezi .ssm-modal / .ssm-stage din paginile MISO. Altfel raportul
     se taie la o singură pagină. */
}
@media (prefers-reduced-motion: reduce) { .ssmx * { transition: none !important; } }