/* ══════════════════════════════════════════════════════════════════════════
   PIPSTER SCENARIO ANALYST — PANNEAU
   ──────────────────────────────────────────────────────────────────────────
   Toutes les règles sont préfixées `.sa-` (ou portées par `#saPanel`). Cette
   feuille est injectée AVANT `style.css` : à spécificité égale c'est la
   feuille du terminal qui gagne, donc un nom générique serait écrasé en
   silence. Le préfixe n'est pas une convention d'ordre, c'est la condition
   pour que ces règles s'appliquent.

   AUCUNE COULEUR EN DUR. Le terminal a trois états de thème (clair, sombre,
   système) et deux peaux : toute valeur écrite ici serait fausse dans au
   moins un des six croisements. On ne lit que des jetons.

   ── DEUX NOMS INTERDITS : `sa-head` ET `sa-sub` ───────────────────────────
   `saas-terminal.css` — feuille COMMUNE, chargée avant celle-ci — possède
   déjà ces deux classes pour la barre latérale du compte (« sidebar
   account »), et notamment :

       .sa-sub      { display: none; }     ← sous-menu replié
       .sa-sub.open { display: block; }

   Résultat vu dans le vrai terminal le 2026-08-23 : le §4 (« Préférence
   faible — confirmation nécessaire ») et la note « force du contexte — pas
   une probabilité » existaient dans le DOM, portaient le bon texte, et
   n'apparaissaient PAS. Aucune erreur, aucun test rouge : une feuille tierce
   les éteignait. On ne corrige pas en surchargeant (`#saPanel .sa-sub`) —
   une spécificité qui gagne aujourd'hui perd au prochain sélecteur ajouté
   là-bas. On RENOMME : `sa-hdr` et `sa-note`, qui n'appartiennent à personne.
   ══════════════════════════════════════════════════════════════════════════ */

#saPanel { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }

.sa-hdr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sa-inst { display: flex; align-items: baseline; gap: 6px; font-weight: 600; }
.sa-tf { font-weight: 400; color: var(--text-3, #8a8a8a); font-size: 11px; }
.sa-mode { font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
           color: var(--text-3, #8a8a8a); text-align: right; line-height: 1.3; }
/* MARCHÉ FERMÉ : ambre, comme la pastille du bandeau du terminal. Une seule
   encre pour une seule notion — un abonné qui a appris que l'ambre veut dire
   « fermé » en haut de l'écran ne doit pas réapprendre en bas. */
.sa-mode-closed { color: var(--warn, #d9a441); font-weight: 600; }

.sa-dq { align-self: flex-start; font-size: 10px; padding: 1px 6px; border-radius: 3px;
         background: rgb(var(--veil, 127 127 127) / .12); color: var(--text-2, #b9b9b9); }
.sa-dq-insufficient { color: var(--down, #ef5350); }

.sa-sec { display: flex; flex-direction: column; gap: 6px;
          padding-top: 8px; border-top: 1px solid var(--border-strong, rgba(127,127,127,.18)); }
.sa-sec:first-of-type { border-top: 0; padding-top: 0; }
.sa-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .02em;
        color: var(--text-2, #b9b9b9); }
.sa-h-sm { font-size: 10px; text-transform: uppercase; color: var(--text-3, #8a8a8a); }
.sa-note { margin: 0; font-size: 10px; color: var(--text-3, #8a8a8a); }
.sa-foot { margin: 4px 0 0; font-size: 10px; color: var(--text-3, #8a8a8a); }

/* ── BIAIS ──────────────────────────────────────────────────────────────── */
.sa-bias-row { display: flex; align-items: center; gap: 8px; }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
          background: var(--text-3, #8a8a8a); }
.sa-dot.up { background: var(--up, #26a69a); }
.sa-dot.down { background: var(--down, #ef5350); }
.sa-bias-v { font-size: 14px; font-weight: 700; }
.sa-meter { flex: 1 1 auto; height: 4px; border-radius: 2px; overflow: hidden;
            background: rgb(var(--veil, 127 127 127) / .16); }
.sa-meter > i { display: block; height: 100%; width: 0; background: var(--text-3, #8a8a8a); }
.sa-meter > i.up { background: var(--up, #26a69a); }
.sa-meter > i.down { background: var(--down, #ef5350); }
.sa-strength-n { font-variant-numeric: tabular-nums; font-size: 11px;
                 color: var(--text-2, #b9b9b9); }
.sa-play { display: flex; gap: 6px; align-items: baseline; font-size: 11px; }
.sa-play > b { font-weight: 600; }

.sa-list { list-style: none; margin: 0; padding: 0; display: flex;
           flex-direction: column; gap: 3px; font-size: 11px; }
.sa-list li { display: flex; gap: 6px; align-items: baseline;
              color: var(--text-2, #b9b9b9); }
.sa-bullet { flex: 0 0 auto; width: 12px; text-align: center;
             color: var(--text-3, #8a8a8a); font-size: 10px; }
.sa-warns li { color: var(--warn, #d9a441); }
.sa-list li.minus { color: var(--down, #ef5350); }
.sa-list li.plus { color: var(--up, #26a69a); }

/* ── §20 · LES TROIS MOTS ────────────────────────────────────────────────
   Même graisse, même corps, même gouttière : c'est leur ÉGALITÉ typographique
   qui empêche de lire le scénario comme un ordre. Donner au signal une
   couleur d'appel quand il vaut « aucun » ferait exactement l'inverse. */
.sa-triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.sa-tri { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-k { font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
        color: var(--text-3, #8a8a8a); }
/* ── ON REPLIE, ON NE TRONQUE PAS ─────────────────────────────────────────
   Premier jet : `white-space: nowrap` + `text-overflow: ellipsis`. MESURÉ
   dans le vrai terminal, panneau à 264 px : « Continuation · En attente »
   réclame 131 px et n'en recevait que 84 — l'état du scénario disparaissait
   derrière des points de suspension.

   Ces trois mots sont le §20 lui-même : c'est leur lecture COMPLÈTE qui
   empêche de confondre un scénario avec un ordre. Les tronquer pour garder
   une ligne bien alignée, c'est sacrifier l'information à la mise en page.
   Deux lignes coûtent 13 px ; l'ellipse coûtait le sens. */
.sa-tri > b { font-size: 11px; font-weight: 600; line-height: 1.25;
              overflow-wrap: anywhere; }
.sa-sig-on { color: var(--up, #26a69a); }
.sa-sig-off { color: var(--text-3, #8a8a8a); }

/* ── LES CARTES DE SCÉNARIO ─────────────────────────────────────────────── */
.sa-scenarios { display: flex; flex-direction: column; gap: 8px; }
.sa-card { display: flex; flex-direction: column; gap: 6px; padding: 8px;
           border-radius: 5px; border: 1px solid var(--border-strong, rgba(127,127,127,.18));
           background: rgb(var(--veil, 127 127 127) / .05); }
/* La hiérarchie du §6 se voit : le principal porte un filet à gauche, le
   contre-tendance est visuellement en retrait. Une carte contre-tendance qui
   ressemblerait au principal serait un piège d'interface. */
.sa-p-primary { border-left: 2px solid var(--text-2, #b9b9b9); }
.sa-p-countertrend { opacity: .82; }
.sa-p-failure { opacity: .82; }

.sa-card-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sa-card-letter { font-weight: 700; font-size: 11px; width: 14px; height: 14px;
                  display: inline-flex; align-items: center; justify-content: center;
                  border-radius: 3px; background: rgb(var(--veil, 127 127 127) / .16); }
.sa-card-t { font-weight: 600; font-size: 11px; }
.sa-card-dir { font-size: 10px; letter-spacing: .04em; font-weight: 700; }
.sa-card-dir.up { color: var(--up, #26a69a); }
.sa-card-dir.down { color: var(--down, #ef5350); }
.sa-chip { margin-left: auto; font-size: 9px; padding: 1px 6px; border-radius: 3px;
           letter-spacing: .03em; background: rgb(var(--veil, 127 127 127) / .16);
           color: var(--text-2, #b9b9b9); }
.sa-st-confirmed, .sa-st-active, .sa-st-target_1_hit, .sa-st-target_2_hit,
.sa-st-completed { color: var(--up, #26a69a); }
.sa-st-invalidated { color: var(--down, #ef5350); }
.sa-st-expired, .sa-st-last_expired { opacity: .7; }
/* Les états HISTORIQUES sont en retrait : ils décrivent une séance close, pas
   une occasion. Le §5 tient à ce que l'écran ne les confonde pas. */
.sa-st-last_completed { color: var(--up, #26a69a); }
.sa-st-last_invalidated { color: var(--down, #ef5350); }
.sa-st-last_not_triggered, .sa-st-last_unresolved { color: var(--text-3, #8a8a8a); }
.sa-st-outlook_pending { color: var(--text-2, #b9b9b9); }
.sa-chip-hist { opacity: .8; font-style: italic; }

.sa-thesis { margin: 0; font-size: 11px; color: var(--text-2, #b9b9b9); }

.sa-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column;
            gap: 2px; font-size: 11px; }
.sa-steps li { color: var(--text-2, #b9b9b9); }
.sa-step-conf { font-weight: 600; }

.sa-tgs { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-tg { display: inline-flex; align-items: baseline; gap: 4px; font-size: 10px;
         padding: 2px 6px; border-radius: 3px;
         background: rgb(var(--veil, 127 127 127) / .1); cursor: help; }
.sa-tg.hit { outline: 1px solid var(--up, #26a69a); }
.sa-tg-r { font-style: normal; font-weight: 700; color: var(--text-3, #8a8a8a); }
.sa-tg-p { font-variant-numeric: tabular-nums; }
.sa-tg-l, .sa-tg-d { color: var(--text-3, #8a8a8a); }

.sa-inv-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
              font-size: 11px; }
.sa-inv-k { font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
            color: var(--text-3, #8a8a8a); }
.sa-inv-p { font-variant-numeric: tabular-nums; color: var(--down, #ef5350); cursor: help; }
.sa-inv-r { color: var(--text-3, #8a8a8a); }

.sa-need { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
           font-size: 10px; padding-top: 2px; }
.sa-need-k { text-transform: uppercase; letter-spacing: .05em;
             color: var(--text-3, #8a8a8a); }
.sa-need-v { color: var(--text-2, #b9b9b9); }

.sa-conf, .sa-tl { font-size: 10px; }
.sa-conf > summary, .sa-tl > summary { cursor: pointer; color: var(--text-3, #8a8a8a);
                                       display: flex; gap: 6px; align-items: baseline; }
.sa-conf-v { font-variant-numeric: tabular-nums; color: var(--text-2, #b9b9b9); }
.sa-tl-list { margin: 4px 0 0; padding-left: 16px; display: flex;
              flex-direction: column; gap: 2px; }
.sa-tl-list li { display: flex; gap: 6px; }
.sa-tl-t { font-variant-numeric: tabular-nums; color: var(--text-3, #8a8a8a); }
.sa-tl-r { color: var(--text-3, #8a8a8a); }

.sa-risk { margin: 0; font-size: 10px; }
.sa-sev-high { color: var(--down, #ef5350); font-weight: 600; }
.sa-sev-medium { color: var(--warn, #d9a441); }

.sa-empty { margin: 0; font-size: 11px; color: var(--text-3, #8a8a8a); }

.sa-inval-li b { font-variant-numeric: tabular-nums; cursor: help; }

.sa-story-body { display: flex; flex-direction: column; gap: 5px; }
.sa-story-l { margin: 0; font-size: 11.5px; line-height: 1.45;
              color: var(--text, #e8eaed); }
.sa-story-bias { font-weight: 600; }
/* La phrase du §20 ferme la lecture : elle est en retrait et discrète, mais
   jamais absente. */
.sa-story-signal { font-size: 10.5px; color: var(--text-3, #8a8a8a);
                   border-left: 2px solid var(--border-strong, rgba(127,127,127,.24));
                   padding-left: 6px; }

.sa-align-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; }
.sa-al { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-al-k { font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
           color: var(--text-3, #8a8a8a); }
/* Même raison qu'au-dessus : « Aucun signal actif » est un verdict, pas une
   étiquette décorative. Il se replie. */
.sa-al-v { font-size: 11px; font-weight: 600; line-height: 1.25;
           overflow-wrap: anywhere; }
.sa-al-v.up { color: var(--up, #26a69a); }
.sa-al-v.down { color: var(--down, #ef5350); }
.sa-al-v.flat { color: var(--text-3, #8a8a8a); }

/* ── §17 · LES CASES DU CALQUE ──────────────────────────────────────────── */
.sa-sw { display: flex; align-items: center; gap: 6px; font-size: 11px;
         cursor: pointer; color: var(--text-2, #b9b9b9); }
.sa-sw-main { font-weight: 600; color: var(--text, #e8eaed); }
.sa-sub-opts { display: flex; flex-direction: column; gap: 3px; padding-left: 18px; }
/* Éteintes, les sous-options restent LISIBLES et cliquables : les griser
   complètement ferait croire à une fonction indisponible alors qu'il suffit
   de cocher la case au-dessus. */
.sa-sub-opts.off { opacity: .55; }

/* ── §18 · L'INFOBULLE DE PROVENANCE ────────────────────────────────────── */
.sa-lv { cursor: help; border-bottom: 1px dotted var(--border-strong, rgba(127,127,127,.4)); }
.sa-tip { position: fixed; z-index: 9999; max-width: 260px; padding: 7px 9px;
          border-radius: 5px; font-size: 11px; line-height: 1.35;
          background: var(--surface, #16181d); color: var(--text, #e8eaed);
          border: 1px solid var(--border-strong, rgba(127,127,127,.28));
          box-shadow: 0 6px 18px rgba(0, 0, 0, .28); pointer-events: none; }
.sa-tip-p { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-tip-k { font-size: 9px; letter-spacing: .06em; color: var(--text-3, #8a8a8a); }
.sa-tip-b { margin-top: 3px; }
.sa-tip-m, .sa-tip-l { margin-top: 2px; font-size: 10px; color: var(--text-3, #8a8a8a); }

/* ── LA LARGEUR QUI COMPTE EST CELLE DU CONTENEUR, PAS DE LA FENÊTRE ──────
   Premier jet : `@media (max-width: 560px)`. MESURÉ dans le vrai terminal, sur
   un écran de 1 180 px : le panneau du dock fait **264 px**. La media query ne
   se déclenchait donc jamais, la grille gardait ses trois et quatre colonnes
   dans 264 px, et deux valeurs étaient tronquées — « Continuation · En
   attente » réduit à 84 px, « Aucun signal actif » à 62 px.

   `auto-fit` + `minmax()` répond à la question posée : combien de colonnes
   tiennent ICI. La grille se replie qu'on rétrécisse la fenêtre, le panneau,
   ou qu'on ouvre le terminal sur un téléphone — un seul mécanisme pour les
   trois cas, au lieu d'une media query par cas imaginé.

   Les seuils : 84 px tient « Continuation » à 11 px de corps, 74 px tient
   « Divergent ». En dessous, la grille passe d'elle-même à une colonne. */


/* ══════════════════════════════════════════════════════════════════════════
   LE PLAN — LE PREMIER ÉCRAN (§26)
   ──────────────────────────────────────────────────────────────────────────
   Le panneau ne s'ouvre plus sur un tableau de bord. Six blocs, dans l'ordre
   des questions d'un trader : ce que je cherche, ce que je fais au-dessus de
   l'open, sous l'open, dans l'autre sens, ce qui me ferait changer d'avis, et
   où en est le signal. Le diagnostic quantitatif descend derrière un
   dépliant — déplacé, jamais supprimé (§27).
   ══════════════════════════════════════════════════════════════════════════ */

.sa-dir-row { display: flex; align-items: center; gap: 8px; }
/* La DIRECTION est la seule chose écrite en grand du panneau. C'est la
   première question, et elle mérite d'être lue sans chercher. */
.sa-dir { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.sa-dir.up { color: var(--up, #26a69a); }
.sa-dir.down { color: var(--down, #ef5350); }
.sa-dir.flat { color: var(--text-3, #8a8a8a); }

.sa-branch { gap: 5px; }
.sa-lead { margin: 0; font-size: 11.5px; color: var(--text, #e8eaed); }

.sa-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
         margin: 2px 0 0; font-size: 11px; }
.sa-kv-k { color: var(--text-3, #8a8a8a); }
.sa-kv-v { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sa-kv-v > b { font-variant-numeric: tabular-nums; cursor: help;
               border-bottom: 1px dotted var(--border-strong, rgba(127,127,127,.4)); }
.sa-kv-l, .sa-kv-zone { color: var(--text-3, #8a8a8a); font-size: 10px; }
.sa-kv-zone { font-variant-numeric: tabular-nums; }

/* §9 — l'expansion est une SUITE, pas une liste d'objectifs concurrents. Le
   filet et les flèches disent la continuité.
   Propriétés LOGIQUES : en arabe le filet doit passer à droite tout seul. */
.sa-expansion { margin-top: 4px; padding-inline-start: 8px;
                border-inline-start: 2px solid var(--border-strong, rgba(127,127,127,.26)); }
.sa-exp-h { font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
            color: var(--text-3, #8a8a8a); }
.sa-exp-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.sa-exp-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; }
.sa-exp-row > b { font-variant-numeric: tabular-nums; cursor: help; }
.sa-exp-arrow { color: var(--text-3, #8a8a8a); }
.sa-exp-l { color: var(--text-3, #8a8a8a); font-size: 10px; }

.sa-watch { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
            font-size: 10px; }
.sa-watch-k { text-transform: uppercase; letter-spacing: .05em;
              color: var(--text-3, #8a8a8a); }
.sa-watch-v { padding: 1px 6px; border-radius: 3px;
              background: rgb(var(--veil, 127 127 127) / .12);
              color: var(--text-2, #b9b9b9); }

/* La branche contre-tendance est EN RETRAIT. Le §18 la veut tactique et de
   priorité basse ; la lui donner visuellement évite de la lire comme une
   seconde opportunité de même rang. */
.sa-ct { opacity: .88; }
.sa-inval-arrow { color: var(--text-3, #8a8a8a); }
.sa-inval-becomes { font-weight: 600; }

/* §27 — le dépliant technique. Fermé par défaut : le premier écran est un
   plan. Ouvert, il rend TOUT ce qui existait avant, sans rien retirer. */
.sa-why { border-top: 1px solid var(--border-strong, rgba(127,127,127,.18)); padding-top: 8px; }
.sa-why > summary { cursor: pointer; font-size: 10px; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--text-3, #8a8a8a); }
.sa-why-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sa-sub-sec { display: flex; flex-direction: column; gap: 5px;
              padding-top: 6px; border-top: 1px solid var(--border, rgba(127,127,127,.12)); }

/* §9 — l'absence de niveau au-delà se DIT. Ton d'une note, pas d'un objectif :
   rien ici n'est un prix, donc rien ne doit ressembler à un prix.

   `--muted` N'EXISTE PAS dans ce terminal — le premier jet l'employait, et la
   phrase sortait à la pleine encre du texte courant, donc au même poids qu'une
   affirmation. Les jetons de cette maison sont `--text`, `--text-2`, `--text-3`, toujours avec
   une valeur de repli : une peau qui n'en définirait aucun garde un contraste. */
.sa-exp-none { font-size: 11px; line-height: 1.45; font-style: italic;
               color: var(--text-3, #8a8a8a); padding: 2px 0 1px; }

/* ── SENS DE LECTURE ──────────────────────────────────────────────────────
   Les flèches sont des GLYPHES, pas des icônes : `→` posé par le JS reste
   tourné vers la droite même quand la page se lit de droite à gauche. On les
   retourne, exactement comme `saas-terminal.css` retourne ses chevrons. */
[dir="rtl"] .sa-exp-arrow,
[dir="rtl"] .sa-inval-arrow,
[dir="rtl"] .sa-ct .sa-bullet { display: inline-block; transform: scaleX(-1); }

/* ── PHASE 2 · L'ÉTAT SE VOIT AVANT DE SE LIRE (§15, §16, §22) ────────────
   Tant que la high n'est pas cassée, les objectifs d'expansion sont des
   HYPOTHÈSES. Les afficher à la même encre que les niveaux de la phase 1
   les ferait lire comme acquis — c'est exactement ce que le §15 refuse.
   L'atténuation est donc portée par l'état, pas décidée à la main. */
.sa-exp-conditional { opacity: .74; }
.sa-exp-rank { font-size: 9px; font-weight: 700; letter-spacing: .04em;
               color: var(--text-3, #8a8a8a); }
.sa-exp-state { font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
                color: var(--text-3, #8a8a8a); margin-top: 3px; }
/* La cassure confirmée est le SEUL état qui gagne une couleur : c'est le
   moment où le plan change de nature. Les autres restent en gris. */
.sa-exp-st-active, .sa-exp-st-confirmed { color: var(--up, #26a69a); font-weight: 600; }
.sa-exp-st-invalidated { color: var(--down, #ef5350); }
.sa-exp-st-triggered { color: var(--warn, #d9a441); }

/* §22 — le détail auditable. Replié : il répond à « pourquoi ? », il ne
   s'impose pas à qui ne pose pas la question. */
.sa-exp-audit { margin-top: 5px; }
.sa-exp-audit > summary { cursor: pointer; font-size: 9px; text-transform: uppercase;
                          letter-spacing: .05em; color: var(--text-3, #8a8a8a); }
.sa-exp-audit .sa-list { margin-top: 4px; font-size: 10px; }
.sa-exp-audit .sa-list li { flex-wrap: wrap; }
.sa-exp-audit b { font-variant-numeric: tabular-nums; }
.sa-rej { color: var(--text-3, #8a8a8a); font-style: italic; }

/* §6 — LE VERDICT SUR SA PROPRE LIGNE. Empilé sous le niveau plutôt que
   déroulé à sa suite : dans un dock de 264 px, quatre informations sur une
   ligne se replient n'importe où et le motif se retrouve orphelin. */
.sa-rej-list li { display: block; }
.sa-rej-li { padding: 3px 0; }
.sa-rej-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.sa-rej-head > b { font-variant-numeric: tabular-nums; }
.sa-rej-why { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap;
              padding-inline-start: 2px; }
.sa-rej-k { color: var(--text-3, #8a8a8a); }

/* §15 — les places d'une région : information de second rang, présentée
   comme telle. Rien ici ne doit concurrencer le plan principal. */
.sa-venues { display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.sa-venue { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.sa-venue-n { color: var(--text-2, #b9b9b9); min-width: 58px; }

/* §7 — le compte honnête, juste sous la phrase d'absence. */
.sa-exp-count { font-size: 10px; color: var(--text-3, #8a8a8a); padding-top: 2px; }