/* ============================================================
   Step 21 — Temperament: full 80-statement questionnaire
   (Belov "temperament formula"), 4 parts of 20, Ha/Yo'q.
   ============================================================ */
.f21-part{
  margin:18px 0 8px; padding:11px 15px; border-radius:13px;
  background:linear-gradient(135deg,#0f766e,#155e63); color:#fff;
  font-weight:800; font-size:15px; display:flex; align-items:center; gap:9px;
}
.f21-part span{ font-weight:600; font-size:12.5px; opacity:.9; }
body.tl-dark .f21-part{ background:linear-gradient(135deg,#0c5450,#0f4448); }

.f21-tres{ margin-top:4px; }
.f21-tres .f21-dom{ font-size:14px; font-weight:800; color:#0f4c5c; margin:2px 0 10px; }
body.tl-dark .f21-tres .f21-dom{ color:#8fd3d0; }
.f21-tres .f21-bar{ display:grid; grid-template-columns:112px 1fr 66px; align-items:center; gap:10px; margin:7px 0; font-size:12.5px; }
.f21-tres .f21-bar .nm{ font-weight:700; color:#243b42; }
body.tl-dark .f21-tres .f21-bar .nm{ color:#c3d6da; }
.f21-tres .f21-bar .tk{ height:12px; border-radius:7px; background:#e7eef0; overflow:hidden; }
body.tl-dark .f21-tres .f21-bar .tk{ background:#183038; }
.f21-tres .f21-bar .tk i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#0891b2,#0e7490); }
.f21-tres .f21-bar.dom .tk i{ background:linear-gradient(90deg,#f59e0b,#d97706); }
.f21-tres .f21-bar .vl{ text-align:right; font-weight:800; color:#0f4c5c; }
body.tl-dark .f21-tres .f21-bar .vl{ color:#8fd3d0; }
.f21-tres .f21-note{ font-size:12px; line-height:1.55; color:#3f5860; margin-top:10px; }
body.tl-dark .f21-tres .f21-note{ color:#c3d6da; }