/* scorecard.css — la CARTE DU SCORE (scorecard.js), identique sur la vitrine www et dans la fiche de l'app.
   Ne dépend que des rôles de /tokens.css (et de .gauge-* / .lp-btn existants). */
.sc-card { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.4fr); background:var(--surface-1);
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:visible; text-align:left; }
.sc-col { padding:22px 24px; min-width:0; position:relative; }
.sc-col + .sc-col { border-left:1px solid var(--line); }
.sc-colh { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:14px; }
.sc-mini { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); margin:0 0 8px; display:flex; align-items:center; gap:3px; }
/* colonne 1 — la note */
.sc-note { text-align:center; cursor:pointer; transition:box-shadow .15s; }
.sc-note .sc-colh, .sc-note .sc-mini { justify-content:center; }
.sc-gauge { position:relative; width:200px; max-width:100%; margin:0 auto; }
.sc-gauge svg { width:100%; display:block; overflow:visible; }
.sc-letter { position:absolute; left:0; right:0; bottom:0; font-size:52px; font-weight:800; line-height:1; animation:gaugeVal .5s ease-out 1.1s both; }
.sc-bands { display:flex; gap:3px; width:190px; margin:12px auto 2px; }
.sc-bands span { flex:1; font-size:11.5px; font-weight:700; padding:3px 0; border-radius:5px; background:var(--surface-2); color:var(--text-secondary); }
.sc-bands span.on { background:var(--ink); color:var(--text-on-ink); }
.sc-bands-l { display:flex; justify-content:space-between; width:190px; margin:0 auto; font-size:10px; color:var(--text-tertiary, var(--text-secondary)); font-variant-numeric:tabular-nums; }
.sc-bands-l span { width:0; display:flex; justify-content:center; }
.sc-cap { font-size:12px; color:var(--text-secondary); margin-top:10px; }
.sc-name { font-weight:700; font-size:16px; margin-top:2px; }
.sc-open { margin-top:14px; display:inline-flex; }
.sc-prof { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); text-align:left; }
.sc-prof .sc-mini { justify-content:flex-start; }
.sc-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.sc-chip { font-size:12px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--text-secondary); border:1px solid var(--line); font-weight:600; }
.sc-chip.ok, .sc-chip.st-good, .sc-chip.v-solid { background:color-mix(in srgb, var(--status-ok) 11%, transparent); color:var(--status-ok); border-color:color-mix(in srgb, var(--status-ok) 25%, transparent); }
.sc-chip.st-risk, .sc-chip.v-fragile { background:color-mix(in srgb, var(--status-critical) 11%, transparent); color:var(--status-critical); border-color:color-mix(in srgb, var(--status-critical) 25%, transparent); }
.sc-chip.st-watch, .sc-chip.v-watch { background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent-text); border-color:color-mix(in srgb, var(--accent) 28%, transparent); }
.sc-rel { list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:12.5px; color:var(--text-secondary); }
.sc-rel li { display:flex; align-items:center; gap:7px; }
.sc-rel i, .sc-checks i { width:8px; height:8px; border-radius:50%; flex:none; background:var(--status-ok); }
.sc-rel i.watch, .sc-checks i.watch { background:var(--accent); } .sc-checks i.risk { background:var(--status-critical); }
/* colonne 2 — lignes */
.sc-rows { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.sc-rows li { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 88px; gap:10px; align-items:center; font-size:13.5px;
  padding:7px 10px; margin:0 -10px; border-radius:8px; cursor:pointer; position:relative; outline:none; transition:background .12s; }
.sc-rows li:hover { background:var(--surface-2); }
.sc-rows li.sel { background:var(--surface-1); box-shadow:0 1px 6px color-mix(in srgb, var(--ink) 14%, transparent), inset 3px 0 0 var(--accent); }
.sc-rows li.sel .sc-rl { font-weight:700; color:var(--ink); }
.sc-rows li.sel::after { content:'›'; position:absolute; right:-18px; top:50%; transform:translateY(-52%); font-size:22px; font-weight:700; color:var(--accent); }
.sc-rows li.sc-sum { border-bottom:1px solid var(--line); border-radius:8px 8px 0 0; margin-bottom:6px; font-weight:600; }
.sc-rows li.sc-sum.sel { border-radius:8px; }
.sc-sumv { font-weight:800; color:var(--ink); }
.sc-rows li.sc-sup { cursor:default; color:var(--text-secondary); } .sc-rows li.sc-sup:hover { background:none; }
.sc-bar { height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.sc-bar i { display:block; height:100%; width:max(4%, calc(var(--lv) * 100%)); border-radius:99px; background:var(--accent); animation:scBar .7s cubic-bezier(.22,.8,.25,1) var(--d) both; }
.sc-bar i.st-good { background:var(--status-ok); } .sc-bar i.st-risk { background:var(--status-critical); }
@keyframes scBar { from { width:0; } }
.sc-st { font-size:12px; color:var(--text-secondary); text-align:right; }
.sc-st.st-risk { color:var(--status-critical); }
.sc-hint { font-size:12px; color:var(--text-secondary); margin-top:12px; font-style:italic; }
/* CONTINUITÉ note ↔ Synthèse (fondateur 28/09) : quand la Synthèse est ouverte, un rail ocre court le long de la
   note et rejoint la ligne Synthèse — la note de gauche et sa synthèse se lisent comme un seul objet. */
/* colonne 3 — le détail */
.sc-detail { min-height:300px; }
.sc-view { display:none; } .sc-view.on { display:block; animation:gaugeVal .25s ease-out both; }
.sc-vh { display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:700; font-size:15px; }
.sc-w { font-size:12px; font-weight:600; color:var(--text-secondary); background:var(--surface-2); border-radius:999px; padding:2px 9px; }
.sc-big { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:8px 0 2px; }
.sc-val { font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.sc-val small { font-size:18px; color:var(--text-secondary); margin-left:2px; }
.sc-val.st-good { color:var(--status-ok); } .sc-val.st-risk { color:var(--status-critical); } .sc-val.st-watch { color:var(--accent-text); }
.sc-sub { font-size:13.5px; color:var(--text-secondary); margin:2px 0; }
.sc-capped { font-size:13px; margin:6px 0 0; color:var(--accent-text); }
.sc-sec { border-top:1px solid var(--line); padding:12px 0 2px; margin-top:12px; }
.sc-say { font-size:14.5px; font-weight:600; margin-top:4px; }
.sc-muted { font-weight:400; color:var(--text-secondary); }
.sc-scale, .sc-box { position:relative; height:12px; border-radius:99px; margin:10px 0 0; }
.sc-scale { background:linear-gradient(90deg, color-mix(in srgb, var(--status-critical) 55%, transparent) 0 var(--lo),
  color-mix(in srgb, var(--accent) 55%, transparent) var(--lo) var(--hi), color-mix(in srgb, var(--status-ok) 55%, transparent) var(--hi) 100%); }
.sc-scale.lower { background:linear-gradient(90deg, color-mix(in srgb, var(--status-ok) 55%, transparent) 0 var(--lo),
  color-mix(in srgb, var(--accent) 55%, transparent) var(--lo) var(--hi), color-mix(in srgb, var(--status-critical) 55%, transparent) var(--hi) 100%); }
.sc-box { background:var(--surface-2); }
.sc-iqr { position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--ink) 22%, transparent); border-radius:99px; }
.sc-med { position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; background:var(--ink); }
.sc-mk { position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--surface-1); border:4px solid var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.2); animation:scMk .6s cubic-bezier(.22,.8,.25,1) both; z-index:1; }
@keyframes scMk { from { left:0; opacity:0; } }
/* GRADUATIONS : un trait + une valeur sous chaque borne (barème) ou quartile (secteur) */
.sc-ticks { position:relative; height:26px; margin-bottom:4px; }
.sc-tk { position:absolute; top:0; transform:translateX(-50%); font-size:11px; color:var(--text-secondary); white-space:nowrap; padding-top:7px; font-variant-numeric:tabular-nums; }
.sc-tk::before { content:''; position:absolute; top:0; left:50%; width:1px; height:5px; background:var(--line-strong); }
.sc-tk.edge { transform:none; } .sc-tk.edge::before { left:0; }
.sc-bin { display:flex; gap:6px; margin-top:4px; } .sc-bin span { flex:1; text-align:center; font-size:13px; padding:5px 0; border-radius:8px; background:var(--surface-2); color:var(--text-secondary); }
.sc-bin span.on:last-child { background:color-mix(in srgb, var(--status-ok) 14%, transparent); color:var(--status-ok); font-weight:700; }
.sc-bin span.on:first-child { background:color-mix(in srgb, var(--status-critical) 14%, transparent); color:var(--status-critical); font-weight:700; }
.sc-mix { display:flex; gap:3px; height:14px; }
.sc-mix span { position:relative; border-radius:4px; overflow:hidden; background:var(--surface-2); }
.sc-mix span.st-good { background:color-mix(in srgb, var(--status-ok) 16%, transparent); }
.sc-mix span.st-watch { background:color-mix(in srgb, var(--accent) 18%, transparent); }
.sc-mix span.st-risk { background:color-mix(in srgb, var(--status-critical) 22%, transparent); }
.sc-mix span i { position:absolute; inset:0 auto 0 0; width:calc(var(--lv) * 100%); background:var(--accent); animation:scBar .7s ease-out .3s both; }
.sc-mix span.st-good i { background:var(--status-ok); } .sc-mix span.st-risk i { background:var(--status-critical); }
/* graphe des comptes : sélecteur + valeurs sur chaque point */
.sc-seg { display:inline-flex; gap:2px; padding:3px; background:var(--surface-2); border-radius:9px; margin-bottom:6px; flex-wrap:wrap; }
.sc-seg button { border:0; background:none; font:600 12px/1 inherit; font-family:inherit; color:var(--text-secondary); padding:6px 9px; border-radius:7px; cursor:pointer; }
.sc-seg button.on { background:var(--surface-1); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.sc-chart { display:none; width:100%; height:auto; overflow:visible; } .sc-chart.on { display:block; }
.sc-chart path { fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:100; animation:scLine 1s ease-out both; }
.sc-chart circle { fill:var(--surface-1); stroke:var(--ink); stroke-width:2; }
.sc-chart text { font-size:10.5px; fill:var(--text-primary); text-anchor:middle; font-weight:600; font-variant-numeric:tabular-nums; }
.sc-chart .sc-zero { stroke:var(--line-strong); stroke-dasharray:3 3; }
@keyframes scLine { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
.sc-years { display:flex; justify-content:space-between; font-size:11px; color:var(--text-secondary); padding:0 5%; }
.sc-checks { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.sc-checks li { display:flex; align-items:center; gap:8px; font-size:13px; }
.sc-checks li span { flex:1; color:var(--text-secondary); }
.sc-checks b { font-weight:600; font-size:12.5px; } .sc-checks b.ok { color:var(--status-ok); } .sc-checks b.watch { color:var(--accent-text); } .sc-checks b.risk { color:var(--status-critical); }
.sc-trends { margin:10px 0 0; }
/* bulle « i » */
.sc-i { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-1); color:var(--text-secondary); font:italic 700 10.5px/1 Georgia, serif; cursor:help; position:relative; padding:0; text-transform:none; letter-spacing:0; }
.sc-i:hover, .sc-i:focus-visible { color:var(--ink); border-color:var(--ink); }
.sc-i::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:max-content; max-width:260px; padding:8px 10px; border-radius:8px; background:var(--ink); color:var(--text-on-ink); font:400 12.5px/1.4 Inter, system-ui, sans-serif; text-align:left; white-space:normal; opacity:0; pointer-events:none; transition:opacity .12s; z-index:20; }
.sc-i:hover::after, .sc-i:focus-visible::after { opacity:1; }
@media (max-width:1000px){ .sc-card { grid-template-columns:1fr; } .sc-col + .sc-col { border-left:0; border-top:1px solid var(--line); }
  .sc-rows li.sel::after { display:none; } .sc-group { margin-left:-10px !important; } }
@media (prefers-reduced-motion:reduce){ .sc-bar i, .sc-mix span i, .sc-chart path, .sc-mk, .sc-letter { animation:none; } }

/* ── v2 (fondateur 28/09 soir) ── */
/* rail de COMPOSITION : quand la Synthèse est ouverte, un rail doré descend de la ligne Synthèse le long des
   5 composantes (un trait vers chacune) — elles se lisent comme ce qui compose la note. */
.sc-rows { position:relative; }
/* graphe : repères et segments colorés */
.sc-chart .sc-grid { stroke:var(--line); stroke-width:1; } .sc-chart .sc-grid.zero { stroke:var(--line-strong); }
.sc-chart .sc-gl { font-size:9.5px; fill:var(--text-secondary); text-anchor:end; font-variant-numeric:tabular-nums; }
.sc-chart .sc-xl { font-size:10.5px; fill:var(--text-secondary); text-anchor:middle; }
.sc-chart .sc-pl { font-size:10.5px; fill:var(--text-primary); text-anchor:middle; font-weight:700; font-variant-numeric:tabular-nums; }
.sc-chart line[class^="sc-seg-"] { stroke-width:3; stroke-linecap:round; }
.sc-seg-up { stroke:var(--status-ok); } .sc-seg-down { stroke:var(--status-critical); } .sc-seg-flat { stroke:var(--accent); }
/* position dans le secteur : barre de centiles */
.sc-pc { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .sc-pc b { font-size:22px; color:var(--ink); } .sc-pc span { font-size:13.5px; color:var(--text-secondary); }
.sc-pbar { position:relative; display:flex; gap:3px; height:12px; margin:10px 0 4px; }
.sc-pbar span { flex:1; border-radius:4px; }
.sc-pbar span:nth-child(1) { background:color-mix(in srgb, var(--status-critical) 22%, transparent); }
.sc-pbar span:nth-child(2) { background:color-mix(in srgb, var(--accent) 22%, transparent); }
.sc-pbar span:nth-child(3) { background:color-mix(in srgb, var(--status-ok) 16%, transparent); }
.sc-pbar span:nth-child(4) { background:color-mix(in srgb, var(--status-ok) 30%, transparent); }
.sc-pbar-l { display:flex; justify-content:space-between; font-size:11px; color:var(--text-secondary); }
/* lecture en langage courant */
.sc-plain { font-size:14px; line-height:1.5; color:var(--text-primary); margin:6px 0 2px; max-width:46ch; }

/* ── v3 (fondateur 28/09) : la NOTE est un groupe — liseré doré qui prolonge la colonne de gauche, composantes
   pondérées en retrait, repli quand un montant est ouvert ; puis les trois MONTANTS. ── */
.sc-group { position:relative; margin:0 -10px 0 -24px; padding:4px 10px 6px 24px; border-left:3px solid var(--accent);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); border-radius:0 10px 10px 0; }
.sc-card.sc-xon .sc-group { border-left-color:var(--line-strong); background:none; }
.sc-sub { list-style:none; margin:2px 0 0; padding:0 0 0 12px; display:grid; gap:2px; }
.sc-subwrap { display:block !important; padding:0 !important; margin:0 !important; cursor:default !important; background:none !important; box-shadow:none !important; }
.sc-subwrap::after { display:none !important; }
.sc-card.sc-fold .sc-subwrap { display:none !important; }
.sc-caret { font-size:11px; color:var(--text-secondary); margin-left:4px; display:inline-block; transition:transform .15s; }
.sc-card.sc-fold .sc-caret { transform:rotate(-90deg); }
.sc-caret { cursor:pointer; padding:4px 6px; margin:-4px -6px -4px -2px; border-radius:6px; } .sc-caret:hover { background:var(--surface-2); }
.sc-wt { font-style:normal; font-size:11px; color:var(--text-secondary); font-weight:600; margin-left:4px; }
.sc-rows li.sc-sum { border-bottom:0; margin-bottom:2px; }
.sc-xrows { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); }
.sc-xv { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.sc-dot { width:8px; height:8px; border-radius:50%; background:var(--line-strong); flex:none; }
.sc-dot.good { background:var(--status-ok); } .sc-dot.watch { background:var(--accent); } .sc-dot.risk { background:var(--status-critical); }
/* visuels des montants */
.sc-hb { background:var(--surface-2); border-radius:8px; margin:6px 0; }
.sc-hb span { display:block; padding:6px 10px; border-radius:8px; font-size:12.5px; white-space:nowrap; color:var(--text-primary); animation:scBar .7s ease-out both; }
.sc-hb span.a { background:color-mix(in srgb, var(--status-ok) 26%, transparent); } .sc-hb span.b { background:color-mix(in srgb, var(--status-ok) 14%, transparent); }
.sc-stack { display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--surface-2); margin:8px 0 6px; }
.sc-stack .used { background:color-mix(in srgb, var(--accent) 60%, transparent); } .sc-stack .free { background:color-mix(in srgb, var(--status-ok) 55%, transparent); }
.sc-leg2 { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--text-secondary); flex-wrap:wrap; }
.sc-leg2 span::before { content:''; display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.sc-leg2 .used::before { background:color-mix(in srgb, var(--accent) 60%, transparent); } .sc-leg2 .free::before { background:color-mix(in srgb, var(--status-ok) 55%, transparent); }
.sc-leg2 b { color:var(--text-primary); }

/* ── v3.1 : colonnes, poids sous le libellé, deux lectures d'emprunt, tablette/mobile ── */
.sc-card { grid-template-columns:minmax(0,.78fr) minmax(0,1.12fr) minmax(0,1.3fr); }
.sc-rows li { grid-template-columns:minmax(0,1fr) minmax(52px,.7fr) 84px; }   /* statut en largeur FIXE : les barres s'alignent d'une ligne à l'autre */
.sc-rl { min-width:0; }
.sc-wt { display:block; margin:1px 0 0; }
.sc-xv { white-space:nowrap; }
.sc-read { padding:8px 10px; border-radius:10px; margin:6px 0; background:var(--surface-2); }
.sc-read.on { background:color-mix(in srgb, var(--status-ok) 10%, transparent); }
.sc-read-h { display:flex; align-items:baseline; gap:8px; font-size:13.5px; } .sc-read-h span { flex:1; }
.sc-read-h em { font-style:normal; font-size:11px; font-weight:700; color:var(--status-ok); text-transform:uppercase; letter-spacing:.05em; }
.sc-read-h b { font-variant-numeric:tabular-nums; }
.sc-read-bar { height:8px; border-radius:99px; background:var(--surface-1); margin:6px 0 2px; overflow:hidden; }
.sc-read-bar i { display:block; height:100%; border-radius:99px; background:color-mix(in srgb, var(--status-ok) 60%, transparent); animation:scBar .7s ease-out both; }
.sc-read .sc-sub { font-size:12px; }
.sc-chart { max-width:520px; }
@media (min-width:640px) and (max-width:1000px){
  .sc-card { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
  .sc-note { border-right:1px solid var(--line); } .sc-rowscol { border-top:0 !important; }
  .sc-detail { grid-column:1 / -1; }
}
.sc-xrows li { grid-template-columns:minmax(0,1fr) 104px 84px; } .sc-xrows .sc-xv { justify-content:flex-end; }

/* ── v4 : montants verrouillés (vitrine : après connexion ; app : selon le plan), lien de calcul complet ── */
.sc-blur { display:inline-block; width:64px; height:14px; border-radius:6px; background:linear-gradient(90deg, var(--line), var(--surface-2), var(--line)); filter:blur(1.5px); }
.sc-blur.big { width:180px; height:36px; border-radius:10px; }
.sc-lk { width:14px; height:14px; fill:none; stroke:var(--text-secondary); stroke-width:2.2; stroke-linecap:round; flex:none; }
.sc-big .sc-lk { width:22px; height:22px; }
.sc-lock .sc-rl { color:var(--text-secondary); }
.sc-cta { margin-top:12px; }
.sc-more { display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-decoration:none; }
.sc-more:hover { text-decoration:underline; }
.sc-alert { margin:8px 0 0; padding:8px 10px; border-radius:8px; font-size:13px; background:color-mix(in srgb, var(--status-critical) 10%, transparent); color:var(--status-critical); }
.sc-kv { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:13px; } .sc-kv li { display:flex; justify-content:space-between; gap:10px; } .sc-kv span { color:var(--text-secondary); }
.sc-app .sc-chart { max-width:420px; }
.sc-app { margin-bottom:14px; }     /* pas de collision avec « Signaux | Demandez à Idonis » (fondateur 29/09) */
/* note par exercice : une colonne par exercice (lettre, barre /5, valeur, année) */
.sc-hist { display:flex; gap:10px; align-items:flex-end; }
.sc-hcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; max-width:64px; }
.sc-hg { font-weight:800; font-size:15px; }
.sc-hbar { width:100%; height:54px; background:var(--surface-2); border-radius:6px; display:flex; align-items:flex-end; overflow:hidden; }
.sc-hbar i { display:block; width:100%; border-radius:6px 6px 0 0; animation:scGrow .7s ease-out both; }
@keyframes scGrow { from { height:0; } }
.sc-hv { font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; } .sc-hy { font-size:11px; color:var(--text-secondary); }

.sc-hint-m { display:none; }
@media (max-width:1000px){ .sc-hint-d { display:none; } .sc-hint-m { display:inline; } }
/* ── Mobile (< 640 px) — DÉCLARÉ EN DERNIER : la règle 3 colonnes « v3.1 » ci-dessus, posée après le premier
   @media, écrasait l'empilement ; sur téléphone la carte restait en 3 colonnes illisibles (fondateur 29/09).
   Une colonne : la note (compacte), les composantes, puis le détail. ── */
@media (max-width:639px){
  .sc-card { grid-template-columns:1fr; }
  .sc-col { padding:18px 16px; }
  .sc-col + .sc-col { border-left:0; border-top:1px solid var(--line); }
  /* la note EMPILÉE et centrée (fondateur 02/10 : jauge à gauche + légende à droite = collision sur téléphone) */
  .sc-note { display:block; text-align:center; }
  .sc-note > .sc-colh { justify-content:flex-start; }
  .sc-note > .sc-gauge { width:170px; }
  .sc-note > .sc-bands, .sc-note > .sc-bands-l { width:170px; }
  .sc-note > .sc-cap { margin-top:10px; }
  .sc-note > .sc-name { font-size:17px; }
  .sc-letter { font-size:44px; text-align:center; }
  .sc-bands span { text-align:center; } .sc-bands-l { text-align:center; }
  .sc-rows li { grid-template-columns:minmax(0,1fr) minmax(48px,.6fr) 78px; gap:8px; }
  .sc-rows li.sel::after { display:none; }
  .sc-group { margin-left:-10px !important; }
  .sc-xrows li { grid-template-columns:minmax(0,1fr) 84px auto; }
  .sc-chart, .sc-app .sc-chart { max-width:100%; }
  .sc-hist { gap:6px; }
}
@media (max-width:380px){
  .sc-note > .sc-gauge, .sc-note > .sc-bands, .sc-note > .sc-bands-l { width:150px; }
  .sc-bands span { font-size:10.5px; }
}