/* Tone Stack Calculator
   Scoped under .ts, nested inside the site's shared .tbc card (see
   tube-bias-calculator.css) so it gets the same background, border,
   radius and shadow as every other bench tool. The custom properties
   below keep their original names (the JS reads several of them via
   getComputedStyle) but now alias the site-wide --tbc-* design tokens
   from styles.css, so this tool always matches the rest of DiMastro
   automatically. */

.ts {
  --chassis:  var(--tbc-bg);
  --panel:    var(--tbc-panel);
  --panel-hi: var(--tbc-panel-raised);
  --rule:     var(--tbc-border-soft);
  --ink:      var(--tbc-ink);
  --dim:      var(--tbc-ink-muted);
  --faint:    var(--tbc-ink-faint);
  --live:     var(--tbc-glow);   /* the active trace: hot filament */
  --edit:     var(--tbc-cold);   /* anything you can change */
  --grid:     var(--tbc-border-soft);
  --grid-key: var(--tbc-border);

  --band-1: #8f5c3a; --band-2: #d8453c; --band-3: #e8843a; --band-4: #e2c44a;
  --band-5: #4fa96b; --band-6: #4a79c4; --band-7: #9d6cc6; --band-8: #9c97a8;

  --display: var(--tbc-font-display);
  --body: var(--tbc-font-body);
  --mono: var(--tbc-font-mono);

  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}

.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }
.ts h1, .ts h2, .ts p, .ts ul, .ts table { margin: 0; }
.ts ul { list-style: none; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── tabs: matches the site's .tbc-mode-btn tab pattern ──── */
.ts-tabs {
  display: flex; flex-wrap: nowrap; gap: 6px;
  margin-top: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--tbc-border-soft);
  overflow-x: hidden;
}
.ts-tabs::-webkit-scrollbar { display: none; }
.ts .ts-tabs button {
  font-family: var(--display);
  font-size: 13px; font-weight: 500;
  color: var(--faint);
  background: linear-gradient(180deg, #3c3c3c 0%, #1c1c1c 55%, #0a0a0a 100%);
  border: 1px solid #000;
  border-radius: 10px;
  padding: 8px 8px;
  margin-right: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 4px rgba(0, 0, 0, .55);
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease;
}
.ts-tab-badge {
  height: 22px; width: auto; max-width: 100%;
  object-fit: contain; display: block;
  filter: brightness(1.25) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
/* Fender's chrome-on-black badge needs extra lift against the black button. */
.ts .ts-tabs button[data-key="fender"] .ts-tab-badge {
  filter: brightness(1.7) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
/* Vox's gold badge blows out under the default boost — tone it down. */
.ts .ts-tabs button[data-key="vox"] .ts-tab-badge,
.ts .ts-tabs button[aria-selected="true"][data-key="vox"] .ts-tab-badge {
  filter: brightness(.82) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.ts .ts-tabs button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -3px 4px rgba(0, 0, 0, .55);
}
.ts .ts-tabs button:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.ts .ts-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--tab-hi, #d2d5df) 0%, var(--tab-mid, #bfbfc5) 55%, var(--tab-lo, #898885) 100%);
  border-color: var(--tab-outline, #498aa5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 3px rgba(0, 0, 0, .2);
}
.ts-tabs button:focus-visible,
.ts button:focus-visible, .ts select:focus-visible, .ts input:focus-visible {
  outline: 2px solid var(--edit); outline-offset: 2px;
}

/* ── layout ─────────────────────────────────────────────── */
.ts-body {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(340px, 7fr);
  gap: 16px;
  margin-top: 18px;
}
@container (max-width: 860px) { .ts-body { grid-template-columns: 1fr; } }

.ts-panel {
  background: var(--panel-hi);
  border: 1px solid var(--tbc-border-soft);
  border-radius: var(--tbc-radius-sm);
  padding: 16px;
  min-width: 0;
}

.ts-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ts-panel-head h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}

.ts select, .ts button {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
.ts select:hover, .ts button:hover:not(:disabled) { border-color: var(--edit); }
.ts button:disabled { color: var(--faint); cursor: default; }

/* ── schematic ──────────────────────────────────────────── */
.ts-schematic { background: var(--tbc-well); border: 1px solid var(--rule); border-radius: var(--tbc-radius-sm); padding: 8px; }
.ts-schematic svg { display: block; width: 100%; height: auto; }
.ts-schematic .wire { stroke: var(--dim); stroke-width: 1.4; fill: none; }
.ts-schematic .comp { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ts-schematic .comp-fill { fill: var(--chassis); }
.ts-schematic .ref  { font: 500 11px var(--mono); fill: var(--dim); }
.ts-schematic .val  { font: 500 11.5px var(--mono); fill: var(--live); }
.ts-schematic .node { font: 500 11px var(--mono); fill: var(--edit); }

/* ── parts table ────────────────────────────────────────── */
.ts-parts { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.ts-parts th {
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 0 8px 6px 0; border-bottom: 1px solid var(--rule);
}
.ts-parts th.num, .ts-parts td.num { text-align: right; padding-right: 0; }
.ts-parts td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--rule); }
.ts-parts td:first-child { font: 500 12px var(--mono); color: var(--ink); width: 3.5em; }
.ts-parts td:nth-child(2) { color: var(--dim); }
.ts-parts input {
  font: 500 12.5px var(--mono);
  width: 6.5em; text-align: right;
  color: var(--live); background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--rule);
  border-radius: 2px; padding: 2px 4px;
}
.ts-parts input:hover { border-color: var(--rule); background: var(--panel-hi); }
.ts-parts input:focus { color: var(--ink); border-color: var(--edit); background: var(--chassis); }
.ts-parts tr.fixed input { color: var(--dim); }

.ts-hint { font-size: 12px; color: var(--faint); margin-top: 10px; }
.ts-hint code { font: 500 11.5px var(--mono); color: var(--dim); }

/* ── scope ──────────────────────────────────────────────── */
.ts-scope { position: relative; background: var(--tbc-well); border: 1px solid var(--rule); border-radius: var(--tbc-radius-sm); overflow: hidden; }
.ts-scope canvas { display: block; width: 100%; height: auto; touch-action: none; }
.ts-readout {
  position: absolute; top: 8px; right: 10px;
  font: 500 12px var(--mono); color: var(--live);
  background: rgba(22, 17, 13, .85); padding: 3px 7px;
  border: 1px solid var(--rule); border-radius: 2px;
  opacity: 0; transition: opacity .12s; pointer-events: none;
}
.ts-scope.probing .ts-readout { opacity: 1; }

.ts-scope-tools { display: flex; gap: 6px; flex-wrap: wrap; }

/* held curves, labelled like resistor colour bands */
.ts-held { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ts-held:empty { display: none; }
.ts-held li {
  display: flex; align-items: center; gap: 7px;
  font: 500 11px var(--mono); color: var(--dim);
  background: var(--panel-hi); border: 1px solid var(--rule);
  padding: 3px 8px 3px 4px;
}
.ts-held .band { width: 4px; height: 14px; border-radius: 1px; }

/* ── controls ───────────────────────────────────────────── */
.ts-controls { margin-top: 18px; }

.ts-knobs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 30px;
  padding: 16px 20px;
  background:
    linear-gradient(180deg, var(--face-hi, #d2d5df) 0%, var(--face-mid, #bfbfc5) 45%, var(--face-lo, #898885) 100%);
  border: 1.5px solid var(--face-outline, #498aa5);
  border-radius: var(--tbc-radius-sm);
  outline: 1.5px solid var(--face-outline, #498aa5);
  outline-offset: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .15);
  transition: background .2s ease, border-color .2s ease, outline-color .2s ease;
}

/* Black control panel (Princeton / Blues Junior / Hot Rod style) */
.ts-knobs-row--face-black {
  background:
    linear-gradient(180deg, var(--face-hi, #2c2c2e) 0%, var(--face-mid, #1a1a1c) 45%, var(--face-lo, #0e0e10) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .55);
}

/* Cloth / tolex face — image set via --face-bg-image (tweed, Vox tolex, etc.) */
.ts-knobs-row--face-tweed,
.ts-knobs-row--face-cloth {
  background-color: var(--face-mid, #a8883e);
  background-image: var(--face-bg-image);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* Vox: tolex shell — desktop: badge left, plate right, Volume+TB/Tone in one row */
.ts-vox-shell {
  background-color: #2a2a2a;
  background-image: var(--face-bg-image);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  padding: 14px 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 4px 16px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px 20px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.ts-vox-shell > .ts-badge-wrap {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
}
.ts-vox-shell > .ts-badge-wrap .ts-badge {
  height: 64px;
  max-width: 180px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.ts-knobs-row--vox {
  border: 2px solid var(--face-outline, #e8e8e8);
  outline: none;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 48px;
  background:
    linear-gradient(180deg, var(--face-hi, #7a2a2e) 0%, var(--face-mid, #5c1a1e) 45%, var(--face-lo, #3e1014) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(18, 16, 14, 0.7),
    inset 0 0 0 4px var(--face-outline, #e8e8e8),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.ts-knobs-group--vox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4px 6px;
  width: auto;
}
.ts-knobs-group--vox .ts-vol-pair {
  justify-content: center;
  gap: 4px 6px;
}
.ts-knobs-group--vox .ts-ctl--volume-solo {
  width: 58px;
}
.ts-knobs-group--vox .ts-tone-pair {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4px 6px;
}
.ts-knobs-group--vox .ts-ctl {
  width: 58px;
}
.ts-knobs-group--vox .ts-ctl-name {
  color: var(--face-text, #f4ece9);
}
@container (max-width: 640px) {
  .ts-vox-shell {
    flex-direction: column;
    align-items: center;
    max-width: 340px;
  }
  .ts-vox-shell > .ts-badge-wrap {
    width: 100%;
    justify-content: center;
  }
  .ts-knobs-row--vox {
    width: fit-content;
    margin: 0 auto;
    padding: 10px 14px;
  }
  .ts-knobs-group--vox {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Bassman: tweed shell — badge on tweed, chrome plate only under the knobs */
.ts-bassman-shell {
  background-color: #a8883e;
  background-image: var(--face-bg-image);
  background-size: cover;
  background-position: center;
  border-radius: var(--tbc-radius-sm);
  padding: 12px 14px;
  border: 1.5px solid #5a4a28;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 8px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px 16px;
}
.ts-bassman-shell > .ts-badge-wrap {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
}
.ts-bassman-shell > .ts-badge-wrap .ts-badge {
  height: 48px;
  max-width: 180px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
.ts-knobs-row--bassman {
  border: none;
  outline: none;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, var(--face-hi, #d2d5df) 0%, var(--face-mid, #bfbfc5) 45%, var(--face-lo, #898885) 100%);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55),
    0 2px 4px rgba(0, 0, 0, .28),
    0 4px 10px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    inset 1px 0 0 rgba(255, 255, 255, .25),
    inset -1px 0 0 rgba(0, 0, 0, .12);
}
.ts-knobs-group--bassman {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4px 6px;
  width: auto;
}
.ts-knobs-group--bassman .ts-ctl--volume-solo {
  width: 58px;
}
.ts-knobs-group--bassman .ts-ctl {
  width: 58px;
}
.ts-knobs-group--bassman .ts-tone-pair {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4px 6px;
}
.ts-knobs-group--bassman .ts-ctl-name {
  color: var(--face-text, #232427);
}
@container (max-width: 640px) {
  .ts-bassman-shell {
    flex-direction: column;
    align-items: center;
  }
  .ts-bassman-shell > .ts-badge-wrap {
    justify-content: center;
    width: 100%;
  }
  .ts-knobs-row--bassman {
    width: fit-content;
    margin: 0 auto;
  }
}

.ts-badge-wrap { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 60px; }
.ts-badge { height: 104px; width: auto; display: block; max-width: 260px; object-fit: contain; }

.ts-knobs-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; flex-shrink: 0; }

@container (max-width: 480px) {
  .ts-knobs-row { flex-direction: column; }
  .ts-badge-wrap { flex: 0 0 auto; width: 100%; }
}

.ts-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.ts-ctl[data-disabled="true"] { opacity: .45; }

.ts-knobs-row .ts-ctl-name {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--face-text, #232427);
}

.ts-knob { position: relative; width: 72px; height: 72px; cursor: ns-resize; touch-action: none; border-radius: 50%; }
.ts-knob-face { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ts-knob:focus-visible { outline: 2px solid var(--edit); outline-offset: 3px; }
.ts-knob[aria-disabled="true"] { cursor: default; }

.ts-ctl-tail { display: flex; align-items: center; gap: 6px; }
.ts-ctl-num { font: 700 12.5px var(--mono); color: var(--live); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 1px rgba(0, 0, 0, 0.85); }
.ts-ctl select { font-size: 10.5px; padding: 3px 5px; }
.ts-knobs-row .ts-ctl select {
  background: var(--face-select-bg, #e6e7ec);
  color: var(--face-select-text, #232427);
  border-color: var(--face-select-border, #9a9aa2);
}

.ts-ctl-name {
  font-family: var(--display); font-size: 13px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
}

.ts-ctl-wide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--rule);
}
.ts-ctl-wide .ts-ctl-tail { gap: 8px; }

/* ── footer ─────────────────────────────────────────────── */
.ts-foot { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px; }
.ts-foot p { font-size: 12.5px; color: var(--faint); }
.ts-foot #stackNote { color: var(--dim); margin-bottom: 5px; }
.ts-foot a { color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .ts *, .ts *::before { transition: none !important; }
}

/* ── Volume + Bright: match real Twin Reverb panel layout ── */
.ts-knobs-row--with-volume {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 20px;
  padding: 14px 16px;
}
.ts-knobs-row--with-volume .ts-badge-wrap {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
}
.ts-knobs-row--with-volume .ts-badge {
  height: 84px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.ts-knobs-group--volbright {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.ts-vol-pair,
.ts-tone-pair {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 8px 14px;
}

.ts-knobs-group--volbright .ts-ctl {
  width: 68px;
}
.ts-knobs-group--volbright .ts-knob {
  width: 56px;
  height: 56px;
}
.ts-knobs-group--volbright .ts-ctl-name {
  font-size: 10.5px;
  letter-spacing: .04em;
}
.ts-knobs-group--volbright .ts-ctl-num {
  font-size: 11px;
}
.ts-knobs-group--volbright .ts-ctl select {
  font-size: 9px;
  padding: 2px 3px;
}
.ts-knobs-group--volbright .ts-ctl-tail {
  min-height: 22px;
}

.ts-bright-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 56px;
  flex-shrink: 0;
}
.ts-bright-face {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-bright-btn {
  background-color: #181717 !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.ts-bright-btn:focus-visible { outline: 2px solid var(--edit); outline-offset: 4px; }
.ts-bright-btn img {
  width: 22px !important;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.ts-bright-status {
  font: 700 11px var(--mono); color: var(--live);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 1px rgba(0, 0, 0, 0.85);
  display: inline-block;
  min-width: 2.4em;
  text-align: center;
}
.ts-schematic--vb {
  min-height: 160px;
  overflow: hidden;
}
.ts-schematic--vb svg {
  display: block;
  width: 100%;
  height: 145px;
}

@container (max-width: 640px) {
  .ts-knobs-row--with-volume {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .ts-knobs-row--with-volume .ts-badge-wrap {
    width: 100%;
    justify-content: center;
  }
  .ts-knobs-row--with-volume .ts-badge {
    height: 84px;
    max-width: 200px;
  }
  .ts-knobs-group--volbright {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }
  .ts-vol-pair,
  .ts-tone-pair {
    gap: 16px 20px;
  }
  .ts-knobs-group--volbright .ts-bright-col,
  .ts-knobs-group--volbright .ts-ctl {
    width: 76px;
  }
  .ts-knobs-group--volbright .ts-knob,
  .ts-bright-face {
    width: 64px;
    height: 64px;
  }
  .ts-bright-btn img {
    width: 25px;
  }
}

/* Marshall: gold badge + short model name underneath (Impact-like) */
.ts-badge-wrap--with-model {
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.ts-badge-wrap--with-model .ts-badge {
  height: 36px;
  max-width: 160px;
  width: auto;
}
.ts-badge-model {
  font-family: Impact, "Arial Black", "Helvetica Neue Condensed Bold", "Arial Narrow", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--face-text, #1a1410);
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
}
.ts-knobs-row--with-volume .ts-badge-wrap--with-model .ts-badge {
  height: 42px;
  max-width: 150px;
}
@container (max-width: 640px) {
  .ts-badge-wrap--with-model .ts-badge {
    height: 40px;
    max-width: 170px;
  }
  .ts-badge-model {
    font-size: 13px;
  }
}