/* ===================== /static/css/polish.css ===================== */
.angus-icon { display:inline-block; width:18px; height:18px; background:url('/static/img/angus-icon.png') center/contain no-repeat; vertical-align:middle; margin-right:3px; }
.angus-icon--sm { width:14px; height:14px; }
.angus-icon--lg { width:24px; height:24px; }
:root{
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: rgba(17,24,39,.10);

  --brand: var(--beefai-green, #1f7a3a);
  --brand-2: var(--beefai-green-dark, #1C6E3C);

  --good: var(--beefai-green, #1f7a3a);
  --warn: #b45309;       /* amber */
  --risk: #b91c1c;       /* red */
  --neutral: #374151;    /* slate */

  --shadow: 0 10px 25px rgba(17,24,39,.08);
  --shadow-soft: 0 6px 18px rgba(17,24,39,.06);
  --radius: 18px;
  --radius-sm: 12px;

  --ring: 0 0 0 3px rgba(15,107,58,.18);
}

[data-theme="dark"]{
  --bg: #111827;
  --surface: #1f2937;
  --text: #e5e7eb;
  --muted: #d1d5db;
  --border: rgba(255,255,255,.08);
  --neutral: #d1d5db;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.2);
}

/* Better default typography */
*, *::before, *::after{
  box-sizing: border-box;
}
html, body{
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.45;
  letter-spacing: -0.01em;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* A nice centered container you can wrap your pages in */
.ba-container{
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

/* Page header (optional) */
.ba-pagehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0 14px;
}
.ba-title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.ba-subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Cards */
.ba-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.ba-card + .ba-card{
  margin-top: 14px;
}
.ba-card:hover{
  box-shadow: var(--shadow);
}

/* "Hero" champion card */
.ba-hero{
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid rgba(15,107,58,.18);
}
.ba-hero__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ba-hero__left{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.ba-trophy{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(15,107,58,.10);
  border: 1px solid rgba(15,107,58,.18);
  flex-shrink:0;
}
.bull-detail-card:not(.bull-detail-card--champion){
  font-size: 0.95em;
}

/* Buttons */
.ba-btn{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.ba-btn:active{ transform: translateY(1px); }
.ba-btn:focus{ outline: none; box-shadow: var(--ring); }

.ba-btn--brand{
  background: var(--brand);
  border-color: rgba(0,0,0,.0);
  color: #fff;
}
.ba-btn--brand:hover{
  background: var(--brand-2);
}

/* Metric grid */
.ba-grid{
  display:grid;
  gap: 12px;
}
@media (min-width: 640px){
  .ba-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ba-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.ba-metric{
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.ba-metric__label{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 800;
}
.ba-metric__value{
  font-size: 30px;
  font-weight: 900;
  margin-top: 4px;
  letter-spacing: -0.03em;
}
.ba-metric__hint{
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

/* Pills / badges */
.ba-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid var(--border);
  background: rgba(17,24,39,.02);
  color: var(--neutral);
}
.ba-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}

/* Status variants */
.ba-badge--good{
  color: var(--good);
  border-color: rgba(15,107,58,.20);
  background: rgba(15,107,58,.08);
}
.ba-badge--warn{
  color: var(--warn);
  border-color: rgba(180,83,9,.22);
  background: rgba(180,83,9,.10);
}
.ba-badge--risk{
  color: var(--risk);
  border-color: rgba(185,28,28,.20);
  background: rgba(185,28,28,.08);
}
.ba-badge--neutral{
  color: var(--neutral);
}

/* Section headings */
.ba-h3{
  margin: 10px 0 8px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.ba-p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Callouts */
.ba-callout{
  border-left: 5px solid rgba(15,107,58,.55);
  background: rgba(15,107,58,.06);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
}
.ba-callout--warn{
  border-left-color: rgba(180,83,9,.65);
  background: rgba(180,83,9,.08);
}
.ba-callout--risk{
  border-left-color: rgba(185,28,28,.65);
  background: rgba(185,28,28,.06);
}

/* Footer */
.ba-footer{
  margin-top: 16px;
  padding: 12px 0 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.ba-footer strong{ color: var(--text); }

/* Make long text blocks look nicer */
.ba-prose{
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.ba-prose p{ margin: 0 0 10px; }
.ba-prose p:last-child{ margin-bottom: 0; }

/* Consultant report block */
.ba-report{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.ba-head{
  margin-bottom: 12px;
}
.ba-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ba-pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: rgba(17,24,39,.02);
  color: var(--text);
}
.ba-pill__k{
  color: var(--muted);
  font-weight: 600;
}
.ba-pill__v{
  font-weight: 800;
}
.ba-section{
  margin-top: 12px;
}
.ba-h{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}
.ba-ul{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.ba-ul li{
  margin-bottom: 4px;
}
.ba-ul li strong{
  color: var(--text);
  font-weight: 700;
}

/* True Balance Bull */
.ba-balance-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(15,107,58,.20);
  background: rgba(15,107,58,.08);
  color: var(--beefai-green-dark, #1C6E3C);
  margin-top: 10px;
}
.ba-balance-badge .muted{
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.ba-balance-reason{
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  font-style: italic;
}
.ba-balance-reason--sm{
  margin-top: 4px;
  padding: 4px 0;
  font-size: 11px;
}
.ba-balance-tag{
  background: #ecfdf5 !important;
  border: 1px solid #6ee7b7 !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}
.ba-tbl-balance{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}

/* Primary strip (role label under bull name) */
.ba-strip{
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand);
  background: rgba(15,107,58,.08);
  border: 1px solid rgba(15,107,58,.18);
}
.ba-strip--sm{
  margin-top: 3px;
  padding: 2px 8px;
  font-size: 10px;
}
.ba-strip--ecm{
  color: #92400e;
  background: rgba(180,83,9,.08);
  border-color: rgba(180,83,9,.22);
}
.ba-use-case-tag--ecm{
  color: #92400e;
  background: #fffbeb;
  border-color: rgba(180,83,9,.22);
}

/* Role tags row */
.ba-role-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ba-role-tag{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: rgba(17,24,39,.02);
  color: var(--text);
}
/* Classification summary bar */
.ba-class-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(17,24,39,.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 100%;
}
.ba-class-bar--sm{
  margin-top: 8px;
  padding: 6px 8px;
  gap: 4px;
}
.ba-class-pill{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: normal;
  word-wrap: break-word;
}
.ba-class-pill strong{
  color: var(--text);
  font-weight: 800;
}
.ba-class-pill + .ba-class-pill::before{
  content: "|";
  margin-right: 6px;
  color: var(--border);
  font-weight: 400;
}
.ba-class-bar--sm .ba-class-pill{
  font-size: 10px;
}

/* Producer classification note */
.ba-class-note{
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
  padding: 0 12px;
}
.ba-class-note--sm{
  font-size: 10px;
  margin-top: 4px;
  padding: 0 8px;
}

/* Use case tag in table */
.ba-use-case-tag{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  background: #f0fdf4;
  border: 1px solid rgba(15,107,58,.18);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Strength tags */
.ba-strength-tag{
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  color: #166534;
  background: #dcfce7;
  border-radius: 4px;
  padding: 1px 5px;
  margin: 1px 2px;
}
.ba-strength-tag--pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,101,52,0.15);
}

/* Watchout tags */
.ba-watch-tag{
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 5px;
  margin: 1px 2px;
}
.ba-watch-tag--pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(146,64,14,0.15);
}

/* Cohort rank tag */
.ba-cohort-tag{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  background: rgba(17,24,39,.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

.ba-role-tag--sm{
  background: #f0fdf4 !important;
  border: 1px solid rgba(15,107,58,.15) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
}

/* Mobile bull cards */
.bull-card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  animation: fadeUp 0.3s ease both;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(31,122,58,.12);
  transition: transform .1s ease, box-shadow .15s ease;
}
.bull-card:active{
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.bull-card__header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.bull-card__identity{
  flex: 1;
  min-width: 0;
}
.bull-card__name-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bull-card__rank{
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.bull-card__name{
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.bull-card__champ-icon{
  font-size: 14px;
}
.bull-card__stud{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.bull-card__use-case{
  margin-top: 6px;
}
.bull-card__actions{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.bull-card__herd-btn{
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: none !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
.bull-card__herd-btn:active{
  transform: scale(0.96) !important;
}
.bull-card__note{
  margin-top: 6px;
}
.bull-card__scores{
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.bull-card__score-label{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bull-card__score-value{
  font-weight: 900;
  font-size: 18px;
  margin-left: 4px;
}
.bull-card__score-value--sm{
  font-weight: 700;
  font-size: 15px;
}
.bull-card__bar{
  margin-top: 10px;
}
.bull-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

@media (max-width: 767px) {
  .bull-card:nth-child(n) {
    animation-delay: calc(var(--i, 0) * 0.05s);
  }
}

.si-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:10px;
  font-size:12px;
  cursor:help;
  position:relative;
  background:rgba(17,24,39,.03);
  border:1px solid rgba(17,24,39,.08);
  transition: box-shadow .15s ease, transform .1s ease;
}
.si-chip:hover{
  box-shadow: 0 3px 12px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.si-chip--goal{
  background:rgba(28,110,60,.06);
  border:1px solid rgba(28,110,60,.2);
}
.si-chip__name{
  font-weight:800;
  color:#2C4A73;
}
.si-chip--goal .si-chip__name{
  color:var(--beefai-green-dark, #1C6E3C);
}
.si-chip__value{
  font-weight:600;
  color:var(--text);
}
.si-chip__pct{
  font-size:11px;
  font-weight:600;
  padding:2px 6px;
  border-radius:999px;
}
.si-chip__pct--elite{ background:var(--beefai-green-dark, #1C6E3C); color:#fff; }
.si-chip__pct--strong{ background:rgba(28,110,60,.12); color:var(--beefai-green-dark, #1C6E3C); }
.si-chip__pct--mid{ background:rgba(201,151,0,.12); color:#8B6914; }
.si-chip__pct--lower{ background:rgba(139,30,30,.08); color:#8B1E1E; }
.si-chip__goal-tag{
  font-size:9px;
  font-weight:700;
  color:var(--beefai-green-dark, #1C6E3C);
  text-transform:uppercase;
}

.si-tooltip{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:#1f2937;
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  width:280px;
  font-size:11px;
  line-height:1.6;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  pointer-events:none;
}
.si-tooltip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#1f2937;
}
.si-chip:hover .si-tooltip{
  display:block;
  animation: tooltipIn .15s ease both;
}
.si-tooltip__label{
  font-weight:700;
  font-size:12px;
  margin-bottom:4px;
  color:#6ee7a0;
}
.si-tooltip__desc{
  color:rgba(255,255,255,.85);
  margin-bottom:6px;
}
.si-tooltip__market{
  font-size:10px;
  color:rgba(255,255,255,.6);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:6px;
  margin-top:4px;
}
@keyframes tooltipIn{
  from{ opacity:0; transform:translateX(-50%) translateY(4px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}

@media (max-width: 576px){
  .si-chip:hover .si-tooltip{
    display:none !important;
  }
  .si-tooltip{
    display:none !important;
  }
  .si-tooltip::after{
    display:none;
  }
  .ba-class-bar{
    flex-direction: column;
    gap: 4px;
  }
  .ba-class-pill + .ba-class-pill::before{
    content: none;
  }
}

.si-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin .3s ease;
  margin-top:0;
}
.si-panel--open{
  max-height:2000px;
  opacity:1;
  margin-top:12px;
  overflow:visible;
}

.si-toggle-btn{
  background:none;
  border:1px solid rgba(44,74,115,.2);
  border-radius:999px;
  padding:2px 10px;
  font-size:11px;
  font-weight:700;
  color:#2C4A73;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.si-toggle-btn:hover{
  background:rgba(44,74,115,.08);
}
.si-toggle-btn--open{
  background:rgba(44,74,115,.08);
  border-color:rgba(44,74,115,.3);
}

.ba-panel{
  margin-top:14px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
}
.bull-detail-card:not(.bull-detail-card--champion) .ba-panel{
  margin-top:10px;
  padding:10px 14px;
}
.ba-panel__header{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:8px;
}
.bull-detail-card:not(.bull-detail-card--champion) .ba-panel__header{
  font-size:11px;
  margin-bottom:6px;
}
.ba-panel--green{
  background:rgba(28,110,60,.04);
  border:1px solid rgba(28,110,60,.15);
}
.ba-panel--green .ba-panel__header{ color:var(--beefai-green-dark, #1C6E3C); }
.ba-panel--purple{
  background:rgba(139,92,246,.04);
  border:1px solid rgba(139,92,246,.15);
}
.ba-panel--purple .ba-panel__header{ color:#6D28D9; }
.ba-panel--amber{
  background:rgba(190,24,93,.04);
  border:1px solid rgba(190,24,93,.15);
}
.ba-panel--amber .ba-panel__header{ color:#BE185D; }
.ba-panel--slate{
  background:rgba(44,74,115,.04);
  border:1px solid rgba(44,74,115,.12);
}
.ba-panel--slate .ba-panel__header{ color:#2C4A73; }
.ba-panel--neutral{
  background:rgba(17,24,39,.02);
  border:1px solid var(--border);
}
.ba-panel--neutral .ba-panel__header{ color:var(--muted); }

.ba-pill-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  color:#fff;
}
.ba-pill-tag--green{ background:var(--beefai-green-dark, #1C6E3C); }
.ba-pill-tag--amber{ background:#BE185D; }
.ba-pill-tag--purple{ background:#6D28D9; }

[data-theme="dark"] .ba-panel--green{ background:rgba(28,110,60,.08); border-color:rgba(28,110,60,.25); }
[data-theme="dark"] .ba-panel--green .ba-panel__header{ color:#6ee7a0; }
[data-theme="dark"] .ba-panel--purple{ background:rgba(139,92,246,.08); border-color:rgba(139,92,246,.25); }
[data-theme="dark"] .ba-panel--purple .ba-panel__header{ color:#a78bfa; }
[data-theme="dark"] .ba-panel--amber{ background:rgba(190,24,93,.08); border-color:rgba(190,24,93,.25); }
[data-theme="dark"] .ba-panel--amber .ba-panel__header{ color:#f472b6; }
[data-theme="dark"] .ba-panel--slate{ background:rgba(44,74,115,.08); border-color:rgba(44,74,115,.25); }
[data-theme="dark"] .ba-panel--slate .ba-panel__header{ color:#93c5fd; }
[data-theme="dark"] .ba-panel--neutral{ background:rgba(255,255,255,.03); }
[data-theme="dark"] .ba-pill-tag--green{ background:#15803d; }
[data-theme="dark"] .ba-pill-tag--amber{ background:#db2777; }
[data-theme="dark"] .ba-pill-tag--purple{ background:#7c3aed; }
[data-theme="dark"] .ba-strength-tag{ background:#064e3b; color:#6ee7b7; }
[data-theme="dark"] .ba-watch-tag{ background:#451a03; color:#fde68a; }
[data-theme="dark"] .ba-use-case-tag{ background:rgba(15,107,58,.15); color:#6ee7a0; border-color:rgba(15,107,58,.3); }
[data-theme="dark"] .ba-cohort-tag{ background:rgba(255,255,255,.06); color:var(--text); }

.ba-goal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}
.ba-goal-bar__label{
  width:75px;
  font-size:12px;
  white-space:nowrap;
}
.ba-goal-bar__track{
  flex:1;
  height:8px;
  background:rgba(17,24,39,.06);
  border-radius:4px;
  overflow:hidden;
}
.ba-goal-bar__fill{
  height:100%;
  border-radius:4px;
  transition:width .3s ease;
}
.ba-goal-bar__value{
  width:55px;
  font-size:11px;
  font-weight:700;
  text-align:right;
}

[data-theme="dark"] .ba-goal-bar__track{ background:rgba(255,255,255,.08); }

@media (max-width: 576px){
  .champ-hero__content [style*="grid-template-columns:1fr 1fr"],
  .bull-detail-card [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  .dp-trait-row{
    grid-template-columns:1fr !important;
    gap:4px;
  }
}