/* Base */
.bowling-tool { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height: 1.35; color:#111827; }
.bt-row { display:flex; gap:12px; align-items:center; margin:10px 0; }
.bt-select { padding:8px 10px; font-size:14px; min-width:320px; }
#bt-messages { margin:8px 0 14px; font-size:13px; color:#444; }
#bt-messages.error { color:#b60000; }

/* Cards */
.bt-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin:10px 0; }
.bt-card-title { font-size:18px; font-weight:700; padding:12px 14px; border-bottom:1px solid #eef0f3; }
.bt-card-body { padding:14px; }

/* Info grid */
.bt-info { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; }
.bt-info div { background:#fafafa; border:1px solid #eee; border-radius:8px; padding:10px; }
.bt-info span { display:block; font-size:12px; color:#666; margin-bottom:6px; }
.bt-info strong { font-size:15px; }
.bt-tag { display:inline-block; font-size:11px; line-height:1; padding:3px 6px; border-radius:999px; margin-left:6px; background:#eef2ff; color:#3730a3; }
.bt-tag.sport { background:#fee2e2; color:#991b1b; }
.bt-tag.challenge { background:#fff7ed; color:#9a3412; }
.bt-tag.recreation { background:#ecfdf5; color:#065f46; }

/* Chips */
.bt-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.bt-chip { background:#f6f7f9; border:1px solid #e7e9ee; padding:6px 10px; border-radius:999px; font-size:13px; }
.bt-chip.ok { background:#ecfdf5; border-color:#bbf7d0; }

/* Meters */
.bt-meters { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; margin:8px 0 4px; }
.bt-meter-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#555; margin-bottom:6px; }
.bt-meter-bar { background:#f1f5f9; border-radius:999px; height:10px; overflow:hidden; }
.bt-meter-bar b { display:block; height:100%; background:#3b82f6; }

/* Boards mini-viz */
.bt-boards { display:flex; align-items:flex-end; gap:2px; height:52px; padding:6px 4px; border:1px dashed #e5e7eb; border-radius:8px; background:#fcfcfd; margin-top:8px; }
.bt-boards i { display:inline-block; width:6px; background:#94a3b8; border-radius:2px 2px 0 0; }
.bt-boards-scale { display:flex; justify-content:space-between; font-size:11px; color:#6b7280; margin-top:4px; }

/* Filter UI */
.bt-filter { display:grid; grid-template-columns: 1fr; gap:12px; margin:6px 0 12px; }
.bt-search, .bt-group { display:grid; grid-template-columns: 100px 1fr; gap:10px; align-items:center; }
.bt-search input[type="search"], .bt-group select { padding:8px 10px; font-size:14px; border:1px solid #e5e7eb; border-radius:8px; width:100%; background:#fff; }

.bt-pills { display:flex; flex-wrap:wrap; gap:8px; }
.bt-pill { padding:6px 10px; border:1px solid #d1d5db; background:#fff; border-radius:999px; font-size:13px; cursor:pointer; }
.bt-pill.active { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.bt-pill.bt-sport.active { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.bt-pill.bt-challenge.active { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.bt-pill.bt-recreation.active { background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }

.bt-slider { display:grid; grid-template-columns: 100px 1fr 1fr max-content; gap:10px; align-items:center; }
.bt-slider label { font-size:13px; color:#374151; }
.bt-slider input[type="range"] { width:100%; }
.bt-slider-out { font-size:13px; color:#374151; white-space:nowrap; }

.bt-filter-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bt-count { font-size:13px; color:#4b5563; }
.bt-reset { background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; }
.bt-reset:hover { background:#f3f4f6; }

/* SVG: Lane (horizontal, HTML-Style) */
/* SVG / Bild: Lane (horizontal, HTML-Style) */
.bt-lane-wrap {
  position: relative;
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;  /* wichtig: alles außerhalb abschneiden */
}
.bt-lane { width:100%; height:auto; display:block; }
.bt-lane-h { }

/* Wrapper für das Kegel-Bild – Variante A: natürliche Höhe, kein Crop */
.bt-lane-imgwrap {
  position: relative;
  width: 100%;
  /* keine padding-top-Tricks, Höhe kommt vom Bild selbst */
  overflow: hidden; /* optional: falls später Overlays leicht überstehen */
}

/* Bild nimmt volle Breite ein, Höhe proportional */
.bt-lane-imgwrap img {
  position: static;      /* wichtig: nicht absolut */
  display: block;
  width: 100%;
  height: auto;          /* natürliche Höhe */
  object-fit: contain;   /* sichert, dass nichts verzerrt wird */
}

/* SVG-Overlay unsichtbar über dem Bild (nur für Geometrie, später nutzbar) */
.bt-lane-svgwrap {
  position: absolute;
  inset: 0;
  visibility: hidden;   /* Safari-kompatibel */
  pointer-events: none;
}

/* Wenn kein Kegel-Bild da ist → SVG NICHT verstecken */
.bt-lane-wrap:not(.has-kegel-img) .bt-lane-svgwrap {
  visibility: visible;
  opacity: 1;
}

.bt-lane-svgwrap svg.bt-lane {
  width: 100%;
  height: 100%;
  display: block;
}

.bt-frame { fill:#ffffff; stroke:#e5e7eb; stroke-width:1; }
.bt-wood  { fill:#f6f0e8; }
.bt-wood-line { stroke:#e5dccf; stroke-width:0.8; }
.bt-gutter { fill:#e5e7eb; }
.bt-oil-grad { opacity:0.9; }
.bt-hatch-line { stroke:#9ca3af; stroke-width:1; opacity:0.5; }

.bt-scale-tick { stroke:#6b7280; stroke-width:1; }
.bt-scale-text-h { font-size:10px; fill:#6b7280; dominant-baseline:central; text-anchor:middle; }

.bt-marker { stroke:#6b21a8; stroke-width:1; stroke-dasharray:4 3; }
.bt-marker-text-h { font-size:10px; fill:#6b21a8; text-anchor:middle; }
.bt-length { stroke:#111827; stroke-width:1.2; stroke-dasharray:3 3; }
.bt-length-text-h { font-size:10px; fill:#111827; text-anchor:middle; }

.bt-arrow { fill:#111827; opacity:0.85; }

.bt-deck { fill:#8b5e34; }
.bt-pin { fill:#ffffff; stroke:#f5f5f5; stroke-width:0.5; }

.bt-buff-h { opacity:0.25; }

/* Responsive */
@media (max-width: 980px){
  .bt-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-slider { grid-template-columns: 90px 1fr 1fr; }
}
@media (max-width: 640px){
  .bt-search, .bt-group { grid-template-columns: 1fr; }
  .bt-info { grid-template-columns: 1fr; }
  .bt-meters { grid-template-columns: 1fr; }
  .bt-slider { grid-template-columns: 1fr; }
  .bt-slider label, .bt-slider-out { order:-1; }
}
/* --- Tipps Engine (BP-401) --- */
.bt-tips { margin-top: 1rem; display: grid; gap: .5rem; }
.bt-tip { display:flex; align-items:flex-start; gap:.5rem; padding:.6rem .75rem; border:1px solid #e5e7eb; border-radius:.6rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.bt-tip .bt-tip-icon { font-size:1rem; line-height:1; margin-top:.15rem; }
.bt-tip .bt-tip-text { flex:1; font-size:.95rem; }
.bt-tip .bt-tip-badge { white-space:nowrap; font-size:.75rem; padding:.15rem .5rem; border-radius:.5rem; background:#f3f4f6; border:1px solid #e5e7eb; }
.bt-tip[data-cat="ball"]      .bt-tip-badge { background:#eef2ff; border-color:#e0e7ff; }
.bt-tip[data-cat="surface"]   .bt-tip-badge { background:#ecfeff; border-color:#cffafe; }
.bt-tip[data-cat="speed"]     .bt-tip-badge { background:#fef9c3; border-color:#fde68a; }
.bt-tip[data-cat="lines"]     .bt-tip-badge { background:#dcfce7; border-color:#bbf7d0; }
.bt-tip[data-cat="release"]   .bt-tip-badge { background:#ffe4e6; border-color:#fecdd3; }
.bt-tips-empty { padding:.6rem .75rem; color:#6b7280; border:1px dashed #e5e7eb; border-radius:.6rem; background:#fafafa; }

/* BP-402: Soft-Gruppierungs-Optik */
#bt-tips li,
#bt-tips .bt-tip {
  line-height: 1.35;
  margin: 0.25rem 0;
}

#bt-tips li::first-letter,
#bt-tips .bt-tip::first-letter {
  /* keine Spezialfarben, nur sauberes Rendering */
}

#bt-tips li {
  /* Falls die Liste bereits existiert */
}

#bt-tips .group-badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  margin-right: 6px;
}

/* === BP-402: Spielposition-Card === */
.bt-playcard .bt-playgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-bottom: .5rem;
}
.bt-playcard .bt-playgrid span {
  color: #666; margin-right: .35rem;
}
.bt-playcard .bt-geo { margin: .25rem 0 .5rem; color:#2d6a4f; }
.bt-playcard .bt-analysis .bt-ana-title { font-weight:600; margin-bottom:.25rem; }
.bt-playcard ul { margin:.25rem 0 0 1.25rem; }
.bt-playcard li { margin:.2rem 0; }
@media (min-width: 700px){
  .bt-playcard .bt-playgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === BP-499: neues Layout Spielposition + Summary-Card === */

/* 2-Spalten-Grid für die Spielposition-Karte */
.bt-playcard .bt-playgrid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.bt-playcard .bt-playfacts > div {
  margin: .15rem 0;
}

.bt-playcard .bt-ana-block .bt-ana-title {
  font-weight: 600;
  margin-bottom: .25rem;
}

@media (min-width: 820px) {
  .bt-playcard .bt-playgrid2 {
    grid-template-columns: 1fr 1fr;   /* links Facts, rechts Analyse */
    align-items: start;
  }
  .bt-playcard .bt-ana-block {
    padding-left: 1rem;
    border-left: 1px solid rgba(0,0,0,.06);
  }
}

/* Summary-Box (eigene Card in #bt-messages) */
.bt-card.bt-summary {
  margin-top: .5rem;
}
.bt-card.bt-summary .bt-card-title {
  font-weight: 600;
  margin-bottom: .35rem;
}
.bt-card .bt-card-body p { margin: 0; }
/* BP-499: Summary-Card Typografie */
.bt-card.bt-summary .bt-card-title {
  font-weight: 600;
  margin-bottom: .25rem;
}
.bt-card.bt-summary .bt-card-body p {
  font-size: 15.5px;        /* etwas größer */
  line-height: 1.5;
}
@media (min-width: 820px){
  .bt-card.bt-summary .bt-card-body p {
    font-size: 16px;
  }
}
/* === BP-501: Tipps-UI als Cards/Akkordeon =============================== */
.bt-tipgrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 840px){
  .bt-tipgrid{
    grid-template-columns: 1fr 1fr;
  }
}

.bt-tipcard{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.bt-tipcard__head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .5rem;
  padding: .75rem .9rem .25rem .9rem;
  align-items: center;
}
.bt-tipcard__icon{ font-size: 18px; line-height: 1; }
.bt-tipcard__title{ font-size: 16px; margin: 0; }
.bt-tipcard__badge{
  background: #f3f4f6;
  color: #111827;
  font-size: 12px;
  padding: .15rem .45rem;
  border-radius: 999px;
}
.bt-tipcard__body{
  padding: .25rem .9rem .85rem .9rem;
}
.bt-tiplist{ margin: 0; padding-left: 1.1rem; }
.bt-tipli{ margin: .25rem 0; }

/* Leerer Zustand */
.bt-tipcard--empty{
  text-align: center;
  color: #6b7280;
}
/* === BP-501 Schritt 2: Farben je Gruppe + Akkordeon ===================== */

/* Farbakzent je Gruppe (linker Rand, Icon) */
.bt-tipcard { border-left: 4px solid var(--accent, #e5e7eb); }
.bt-tipcard__icon { color: var(--accent, #374151); }

/* Gruppen-Paletten */
.bt-tipcard--lines   { --accent: #1d4ed8; } /* blue-700  */
.bt-tipcard--surface { --accent: #ea580c; } /* orange-600*/
.bt-tipcard--speed   { --accent: #16a34a; } /* green-600 */
.bt-tipcard--ball    { --accent: #9333ea; } /* purple-600*/
.bt-tipcard--release { --accent: #0ea5e9; } /* sky-500   */
.bt-tipcard--sport   { --accent: #ef4444; } /* red-500   */
.bt-tipcard--info    { --accent: #6b7280; } /* gray-500  */

/* Badge etwas dezenter, Fokus für Head */
.bt-tipcard__badge{
  background: #f3f4f6;
  color: #111827;
  border: 1px solid rgba(0,0,0,.06);
}
.bt-tipcard__head{
  cursor: pointer;
  position: relative;
  outline: none;
}
.bt-tipcard__head:focus{
  box-shadow: 0 0 0 3px rgba(59,130,246,.35); /* focus ring */
  border-radius: 12px;
}

/* Akkordeon: Pfeil (nur visuell, kein extra HTML nötig) */
.bt-tipcard__head::after{
  content: '▾';
  font-size: 12px;
  line-height: 1;
  color: #6b7280;
  margin-left: .5rem;
}
.bt-tipcard.is-collapsed .bt-tipcard__head::after{
  content: '▸';
}

/* Body animiert ein-/ausklappen */
.bt-tipcard__body{
  max-height: 1000px;
  transition: max-height 200ms ease, padding 200ms ease;
}
.bt-tipcard.is-collapsed .bt-tipcard__body{
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* === BP-601: Bahn-Einfluss Panel ======================================= */
.bt-envpanel{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
  padding:.75rem .9rem;
  margin:.6rem 0 .8rem 0;
}
.bt-envpanel__title{
  font-weight:600;
  margin-bottom:.35rem;
}
.bt-envpanel__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.35rem .9rem;
}
.bt-envpanel__grid label{
  font-size: .95rem;
  color:#111827;
  display:flex;
  align-items:center;
  gap:.45rem;
}
@media (min-width: 840px){
  .bt-envpanel__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Gemeinsame Bereichs-Überschrift im Tool */
.bt-section-title {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Generischer Sektionstitel (z.B. für ÖLBILD AUSWÄHLEN) */
.bt-section-title {
  margin: 1rem 0 .35rem;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #4b5563; /* leicht abgedunkelt, wie die anderen Sektionstitel */
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Label bleibt für Screenreader vorhanden, ist aber optisch ausgeblendet */
.bt-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ───────────────────────────────────────────────
   Einheitlicher Überschriften-Style (global)
   Für ALLE Bereiche: Spielerprofil, Ölbild wählen,
   Top aus meinem Arsenal, Analyzer-Sektionen usw.
   ─────────────────────────────────────────────── */
.szbt-section-title {
  margin: 1.1rem 0 .65rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #1f2937; /* dunkles Grau wie Arsenal */
  letter-spacing: -0.01em;
}

/* Visually hidden, aber für Screenreader noch da */
.bowling-tool .bt-label-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Label der Ölbild-Auswahl optisch ausblenden,
   aber für Screenreader erhalten */
.bowling-tool .bt-row--pattern > label.bt-label-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === Neue 4-Bereiche Tipp-UI (Full Engine) – kompakter Box-Style === */

#bt-tips.bt-tips--sections4 {
  margin-top: 1rem;
}

/* Grid für die vier Bereiche */
#bt-tips.bt-tips--sections4 .bt-tipgrid-4sections {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  #bt-tips.bt-tips--sections4 .bt-tipgrid-4sections {
    grid-template-columns: 1fr 1fr;
  }
}

/* Bereichs-Box (Linie, Ballauswahl, Transition, Beobachtungen) */
#bt-tips.bt-tips--sections4 .bt-tipsec-main {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0;              /* keine abgerundeten Ecken */
  box-shadow: none;              /* kein zusätzlicher Shadow */
  padding: 0.75rem 1rem;
}

/* farbige Linie oben je Bereich */
#bt-tips.bt-tips--sections4 .bt-tipsec-section-line {
  border-top: 3px solid #1d4ed8;
}
#bt-tips.bt-tips--sections4 .bt-tipsec-section-ball {
  border-top: 3px solid #9333ea;
}
#bt-tips.bt-tips--sections4 .bt-tipsec-section-transition {
  border-top: 3px solid #0ea5e9;
}
#bt-tips.bt-tips--sections4 .bt-tipsec-section-observation {
  border-top: 3px solid #6b7280;
}

/* Titel innerhalb eines Bereichs */
#bt-tips.bt-tips--sections4 .bt-tipsec-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

#bt-tips.bt-tips--sections4 .bt-tipsec-icon {
  font-size: 1.1rem;
}

/* Liste der Tipps pro Bereich */
#bt-tips.bt-tips--sections4 .bt-tipsec-list {
  display: flex;
  flex-direction: column;
}

/* Einzelner Tipp – keine eigene Box mehr */
#bt-tips.bt-tips--sections4 .bt-tipcard {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Trenner zwischen mehreren Tipps im selben Bereich */
#bt-tips.bt-tips--sections4 .bt-tipcard + .bt-tipcard {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid #e5e7eb;
}

#bt-tips.bt-tips--sections4 .bt-tipcard-text {
  font-size: .9rem;
  line-height: 1.4;
}

/* Leerer Zustand im neuen Layout */
#bt-tips.bt-tips--sections4 .bt-tips-empty {
  border-radius: 0;
  border: 1px solid #e5e7eb;
  padding: .75rem 1rem;
}

  :where(.szbt-balls-reco) .szbt-ball__head-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.5rem;
    margin-bottom:.15rem;
  }
  :where(.szbt-balls-reco) .szbt-ball__title-block{
    min-width:0;
  }
  :where(.szbt-balls-reco) .szbt-ball__title{
    font-weight:600;
    margin-bottom:1px;
  }
  :where(.szbt-balls-reco) .szbt-ball__brand{
    font-size:.8rem;
    opacity:.75;
    color: var(--szbt-muted,#374151);
  }
  :where(.szbt-balls-reco) .szbt-ball__score-badge{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    padding:.15rem .5rem;
    border-radius:999px;
    background:#0f172a;
    color:#f9fafb;
    font-size:.72rem;
    font-weight:600;
    white-space:nowrap;
  }
  :where(.szbt-balls-reco) .szbt-ball__score-label{
    opacity:.8;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:.7em;
  }
  :where(.szbt-balls-reco) .szbt-ball__score-value{
    font-size:.95em;
  }
  
/* ==========================================================================
   FINAL LAYOUT FIX (Style.css Override)
   ========================================================================== */

/* 1. Grid-Layout erzwingen (Nebeneinander) */
/* Gilt für "Top aus meinem Arsenal" UND "Ball-Empfehlungen" */
#szbt-arsenal .szbt-balls-reco__list,
.szbt-balls-reco .szbt-balls-reco__list {
    display: grid !important;
    /* Mindestens 280px breit, füllt den Platz aus. Ergibt auf Desktop automatisch 3 Spalten */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 12px !important;
}

/* 2. Karten-Styling (Bild Links, Text Rechts) */
.szbt-balls-reco__list .szbt-ball {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    gap: 12px;
    height: 100%; /* Gleiche Höhe in der Zeile */
}

/* Bildgröße fixieren */
.szbt-balls-reco__list .szbt-ball__img {
    flex: 0 0 70px !important;
    width: 70px !important;
}
.szbt-balls-reco__list .szbt-ball__img img,
.szbt-balls-reco__list .bt-ball-ph {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain;
}

/* Inhalt flexibel */
.szbt-balls-reco__list .szbt-ball__body {
    flex: 1 !important;
    min-width: 0;
}

/* Header Zeile */
.szbt-balls-reco__list .szbt-ball__head-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 4px;
}

/* 3. Reasons als Pills (graue Balken) */
.szbt-ball__why .szbt-badge {
    display: inline-block;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    margin-right: 4px;
    margin-bottom: 4px;
    text-transform: none;
    border: 1px solid #e5e7eb;
}

/* 4. REGRESSION FIX: Arsenal-Check (Coverage Slots) schützen! */
/* Hier wollen wir NICHT das Grid-Layout von oben, sondern kleine Listen */
.szbt-coverage .szbt-cov-slot .szbt-balls-reco__list {
    display: flex !important;
    flex-direction: column !important; /* Untereinander */
    gap: 8px !important;
    grid-template-columns: none !important; /* Grid resetten */
}

.szbt-coverage .szbt-cov-slot .szbt-ball {
    /* Reset für die kleinen Karten */
    padding: 6px 8px !important;
}

.szbt-coverage .szbt-ball__img {
    flex: 0 0 48px !important;
    width: 48px !important;
}
.szbt-coverage .szbt-ball__img img,
.szbt-coverage .bt-ball-ph {
    width: 48px !important;
    height: 48px !important;
}

/* ==========================================================================
   FIX: "Mein Arsenal" (Strip oben) wieder nebeneinander
   ULTRA-SPECIFIC VERSION
   ========================================================================== */

/* Wir nutzen #szbt-arsenal als Parent, um maximale Priorität zu haben */
#szbt-arsenal .szbt-ars-strip .szbt-balls-reco__list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    display: grid !important; /* Sicherheitshalber */
}

/* Karten Styling überschreiben */
#szbt-arsenal .szbt-ars-strip .szbt-ball {
    padding: 8px !important;
    min-height: 0 !important;
    flex-direction: row !important; /* Sicherstellen, dass Bild/Text nebeneinander sind */
    align-items: center !important;
}

/* Bildgröße erzwingen */
#szbt-arsenal .szbt-ars-strip .szbt-ball__img,
#szbt-arsenal .szbt-ars-strip .szbt-ball__img img,
#szbt-arsenal .szbt-ars-strip .bt-ball-ph {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    min-width: 50px !important; /* Verhindert Schrumpfen */
}

/* Titel */
#szbt-arsenal .szbt-ars-strip .szbt-ball__title {
    font-size: 13px !important;
    margin: 0 !important;
}

/* Brand */
#szbt-arsenal .szbt-ars-strip .szbt-ball__brand {
    font-size: 10px !important;
    margin-bottom: 2px !important;
}

/* Smart-Text im Kandidaten-Popup */
.szbt-why-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #374151; /* Dunkles Grau, gut lesbar */
    margin-bottom: 4px;
}

.szbt-why-text strong {
    font-weight: 600;
    color: #111827; /* Fast Schwarz für Highlights */
}

/* Titel etwas dezenter, da der Text jetzt spricht */
.szbt-why-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

/* ==========================================================================
   T6: Kandidaten-Popup Feinschliff (Ultra-Specific Override)
   ========================================================================== */

/* Der "Warum..." Titel – kleiner und dezenter */
/* Wir nutzen #szbt-cands-modal als Parent für maximale Priorität */
#szbt-cands-modal .szbt-why-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
    color: #9ca3af !important; /* helleres Grau */
    margin-bottom: 0 !important;
    opacity: 1 !important; /* Überschreibt evtl. Opacity */
}

/* Der Smart-Text – kompakter und lesbarer */
#szbt-cands-modal .szbt-why-text {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: #374151 !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
}
#szbt-cands-modal .szbt-why-text strong {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Der FIT-Badge im Header des Popups */
/* Hier müssen wir sicherstellen, dass das Flexbox-Layout greift */
#szbt-cands-modal .szbt-why-head .szbt-ball__score-badge {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 32px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    margin-left: auto !important;
    transform: none !important; /* Reset transform */
    background-color: #1f2937; /* Fallback */
    color: #fff !important;
    line-height: 1 !important;
}

/* Farb-Klassen erzwingen */
#szbt-cands-modal .szbt-ball__score-badge.s-high { background-color: #16a34a !important; }
#szbt-cands-modal .szbt-ball__score-badge.s-mid  { background-color: #d97706 !important; }
#szbt-cands-modal .szbt-ball__score-badge.s-low  { background-color: #6b7280 !important; opacity: 0.9 !important; }

/* Label (FIT) */
#szbt-cands-modal .szbt-ball__score-label {
    font-size: 7px !important;
    text-transform: uppercase;
    opacity: 0.85 !important;
    margin-bottom: 1px !important;
    display: block !important;
}

/* Wert (100%) */
#szbt-cands-modal .szbt-ball__score-value {
    font-size: 13px !important;
    font-weight: 800 !important;
    display: block !important;
}

/* ==========================================================================
   T7: Kandidaten-Popup Layout (FINAL POLISHED)
   ========================================================================== */

/* 1. Grid-Layout der Karte im Modal */
#szbt-cands-modal .szbt-cand-ball {
    display: grid !important;
    /* Spalten: Bild(72px) | Gap(14px) | Text(Auto) | Gap(14px) | Rechts(120px) */
    grid-template-columns: 72px 1fr 120px !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 12px !important;
    border-radius: 12px !important;
}

/* Bild-Container */
#szbt-cands-modal .szbt-ball__img {
    width: 72px !important;
    flex: none !important;
}

/* 2. Mittlere Spalte (Infos & Text) */
#szbt-cands-modal .szbt-ball__text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
}

/* Titel */
#szbt-cands-modal .szbt-ball__title {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}

/* Die grauen Pills (Tags) - sehr klein */
#szbt-cands-modal .szbt-ball__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 4px 0 8px !important;
}
#szbt-cands-modal .szbt-ball__tags .h {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Der "Warum"-Titel - winzig & grau */
#szbt-cands-modal .szbt-why-heading {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #9ca3af !important;
    font-weight: 700 !important;
    margin-bottom: 1px !important;
    margin-top: 2px !important;
}

/* Der Erklärungstext - DEUTLICH kleiner (11px) */
#szbt-cands-modal .szbt-why-simple,
#szbt-cands-modal .szbt-why-simple p {
    font-size: 11px !important;      /* Kleiner als vorher (13px) */
    line-height: 1.4 !important;
    color: #4b5563 !important;
    margin: 0 !important;
}
#szbt-cands-modal .szbt-why-simple strong {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* 3. Rechte Spalte (Action & Badge) */
#szbt-cands-modal .szbt-cand-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* ZENTRIERT den Badge über den Buttons */
    text-align: center !important;
    height: 100% !important;
}

/* === DER BADGE FIX (mit Schatten & Look) === */
#szbt-cands-modal .szbt-cand-right .szbt-ball__score-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Größe fixieren */
    width: 60px !important; 
    height: 44px !important;
    
    padding: 0 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    
    /* Farbe & Schatten für 3D-Effekt */
    color: #ffffff !important;
    /* Schlagschatten + leichter Innen-Glanz oben */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Hintergrundfarben */
#szbt-cands-modal .szbt-ball__score-badge.s-high { background-color: #16a34a !important; }
#szbt-cands-modal .szbt-ball__score-badge.s-mid  { background-color: #d97706 !important; }
#szbt-cands-modal .szbt-ball__score-badge.s-low  { background-color: #6b7280 !important; }

/* Innerer Text (FIT) */
#szbt-cands-modal .szbt-ball__score-label {
    font-size: 8px !important;
    text-transform: uppercase !important;
    opacity: 0.95 !important;
    color: #ffffff !important;
    margin: 0 0 1px 0 !important;
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
}

/* Innerer Wert (100%) */
#szbt-cands-modal .szbt-ball__score-value {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Buttons Container - nach unten schieben */
#szbt-cands-modal .szbt-cand-actions-col {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Buttons Styling */
#szbt-cands-modal .szbt-cand-actions-col button {
    width: 100% !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 99px !important;
}

/* Mobile Anpassung: Stapeln */
@media (max-width: 600px) {
    #szbt-cands-modal .szbt-cand-ball {
        grid-template-columns: 60px 1fr !important;
        grid-template-areas: "img txt" "act act";
    }
    #szbt-cands-modal .szbt-ball__img { grid-area: img; }
    #szbt-cands-modal .szbt-ball__text { grid-area: txt; }
    #szbt-cands-modal .szbt-cand-right { 
        grid-area: act; 
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 10px !important;
        border-top: 1px dashed #e5e7eb !important;
        padding-top: 10px !important;
    }
    #szbt-cands-modal .szbt-cand-right .szbt-ball__score-badge {
        margin-bottom: 0 !important;
        margin-right: 10px !important;
    }
    #szbt-cands-modal .szbt-cand-actions-col {
        margin-top: 0 !important;
        flex-direction: row !important;
        width: auto !important;
    }
}

/* ==========================================================================
   FIX: Ball-Empfehlungen Layout (3 Ebenen - OPTIMIERT)
   ========================================================================== */

/* Die Karte selbst wird zum vertikalen Container */
.szbt-balls-reco .szbt-ball {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
    gap: 8px !important;    /* Kompakter Abstand zwischen Header, Text und Footer */
    height: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

/* EBENE 1: Header (Bild | Text | Score) */
.szbt-ball__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Mittig zum Bild ausrichten */
    gap: 12px !important;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;    /* Kein extra Abstand nach unten */
    width: 100%;
    min-height: 72px; /* Mindesthöhe passend zum Bild */
}

/* Bild im Header - Größer! */
.szbt-balls-reco .szbt-ball__img {
    flex: 0 0 72px !important;     /* Zurück auf Standardgröße */
    width: 72px !important;
    margin: 0 !important;
}
.szbt-balls-reco .szbt-ball__img img, 
.szbt-balls-reco .bt-ball-ph {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
    display: block;
}

/* Meta (Titel + Brand) im Header */
.szbt-ball__meta {
    flex: 1 !important;
    min-width: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikal mittig */
}
.szbt-balls-reco .szbt-ball__title {
    font-size: 1rem !important;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: normal !important;
}
.szbt-balls-reco .szbt-ball__brand {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Score Badge rechts oben (Style wie Top-Arsenal) */
.szbt-balls-reco .szbt-ball__score-badge {
    flex: 0 0 46px !important;
    min-width: 46px !important;
    height: 40px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start; /* Badge bleibt oben bündig */
    
    /* Basis-Style (runde Ecken, Fallback-Farbe) */
    border-radius: 6px !important;
    background-color: #1f2937; /* Dunkelgrau Fallback */
    color: #ffffff !important; /* Weiße Schrift */
    line-height: 1 !important;
}

/* Die Ampel-Farben (WICHTIG!) */
.szbt-balls-reco .szbt-ball__score-badge.s-high { background-color: #16a34a !important; } /* Grün */
.szbt-balls-reco .szbt-ball__score-badge.s-mid  { background-color: #d97706 !important; } /* Orange */
.szbt-balls-reco .szbt-ball__score-badge.s-low  { background-color: #6b7280 !important; opacity: 0.9 !important; } /* Grau */

/* Label (SCORE) */
.szbt-balls-reco .szbt-ball__score-label {
    font-size: 8px !important;
    text-transform: uppercase !important;
    opacity: 0.9 !important;
    margin-bottom: 1px !important;
    color: #ffffff !important;
}

/* Wert (92) */
.szbt-balls-reco .szbt-ball__score-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}
/* EBENE 2: Text (Body) */
.szbt-ball__body-text {
    flex: 1 !important; /* Füllt Raum, schiebt Footer nach unten */
    width: 100%;
    margin-top: 4px; /* Minimaler Abstand zum Strich */
}
.szbt-ball__body-text p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #4b5563;
}

/* EBENE 3: Footer (Pills) */
.szbt-ball__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto !important; /* Klebt immer unten */
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
    width: 100%;
}

/* Mini-Pills Styling */
.szbt-ball__footer .h {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ==========================================================================
   GLOBAL 3-LAYER LAYOUT (Arsenal + Recommendations)
   ========================================================================== */

/* 1. Karte als Flex-Column Container */
#szbt-arsenal .szbt-ball,
.szbt-balls-reco .szbt-ball {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
    gap: 8px !important;
    height: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit !important;
}

/* 2. EBENE 1: Header (Bild | Text | Score) */
#szbt-arsenal .szbt-ball__header,
.szbt-ball__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    width: 100%;
    min-height: 72px;
}

/* Bild */
#szbt-arsenal .szbt-ball__img,
.szbt-balls-reco .szbt-ball__img {
    flex: 0 0 72px !important;
    width: 72px !important;
    margin: 0 !important;
}
#szbt-arsenal .szbt-ball__img img,
.szbt-balls-reco .szbt-ball__img img,
.bt-ball-ph {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
    display: block;
}

/* Meta (Titel + Brand) */
#szbt-arsenal .szbt-ball__meta,
.szbt-ball__meta {
    flex: 1 !important;
    min-width: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#szbt-arsenal .szbt-ball__title,
.szbt-balls-reco .szbt-ball__title {
    font-size: 1rem !important;
    line-height: 1.2;
    margin-bottom: 2px;
    font-weight: 700;
}
#szbt-arsenal .szbt-ball__brand,
.szbt-balls-reco .szbt-ball__brand {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Score Badge (einheitlich) */
#szbt-arsenal .szbt-ball__score-badge,
.szbt-balls-reco .szbt-ball__score-badge {
    flex: 0 0 46px !important;
    min-width: 46px !important;
    height: 40px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start;
    border-radius: 6px !important;
    background-color: #1f2937;
    color: #fff !important;
    line-height: 1 !important;
}
/* Farben sicherstellen */
.szbt-ball__score-badge.s-high { background-color: #16a34a !important; }
.szbt-ball__score-badge.s-mid  { background-color: #d97706 !important; }
.szbt-ball__score-badge.s-low  { background-color: #6b7280 !important; }

#szbt-arsenal .szbt-ball__score-label,
.szbt-balls-reco .szbt-ball__score-label { font-size: 8px !important; margin-bottom:0 !important; color:#fff !important; }
#szbt-arsenal .szbt-ball__score-value,
.szbt-balls-reco .szbt-ball__score-value { font-size: 14px !important; font-weight: 700 !important; color:#fff !important; }

/* 3. EBENE 2: Text (Body) */
#szbt-arsenal .szbt-ball__body-text,
.szbt-ball__body-text {
    flex: 0 0 auto !important;
    width: 100%;
    margin-top: 4px;
}
#szbt-arsenal .szbt-ball__body-text p,
.szbt-ball__body-text p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #4b5563;
}

/* 4. EBENE 3: Footer (Pills) */
#szbt-arsenal .szbt-ball__footer,
.szbt-ball__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto !important;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
    width: 100%;
}

/* Mini-Pills Styling */
#szbt-arsenal .szbt-ball__footer .h,
.szbt-ball__footer .h {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ==========================================================================
   T8: Kandidaten-Popup Feinschliff (Abstände & Große Pills)
   ========================================================================== */

/* 1. Mehr Luft im Textbereich */
#szbt-cands-modal .szbt-why-heading {
    margin-bottom: 6px !important; /* Vorher 1-2px */
}
#szbt-cands-modal .szbt-why-simple p {
    margin-bottom: 12px !important; /* Vorher 0, jetzt deutlicher Abstand zu den Pills */
    line-height: 1.5 !important;
}

/* 2. Pills deutlich größer ("2/3 größer") */
#szbt-cands-modal .szbt-ball__tags {
    gap: 6px !important;
}
#szbt-cands-modal .szbt-ball__tags .h {
    font-size: 11px !important;      /* Vorher 9px -> jetzt deutlich lesbarer */
    padding: 4px 9px !important;     /* Vorher 1px 5px -> viel mehr "Fleisch" */
    border-radius: 5px !important;
    font-weight: 700 !important;     /* Fetter */
    background: #f1f5f9 !important;  /* Etwas helleres Grau für Kontrast */
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    letter-spacing: 0.03em !important;
}

/* Wrapper für Kauf-Button + Links */
.szbt-buy-wrapper {
  text-align: center;
  margin: 1.5rem 0;
}

/* Button: nutzt Stil von .szbt-btn-primary, kein eigener Farb-Override */
.szbt-btn-buy {
  display: inline-block;
}

/* Links unter dem Button zentriert & neutral */
.szbt-buy-links {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.9rem;
  color: #4b5563; /* neutrales Grau */
}

/* Links sollen die gleiche Farbe haben wie der Text, kein „Warn-Rot“ */
.szbt-buy-links a {
  color: inherit;
  text-decoration: underline;
}

/* Hinweistext auch zentriert & dezent */
.szbt-buy-links div {
  margin-top: 0.25rem;
}

/* === GLOBAL BUTTON THEME OVERRIDE (Primaere Buttons) === */
.szbt-btn-primary {
  background: #bc2026 !important;
  border-color: #bc2026 !important;
  color: #fff !important;
}

.szbt-btn-primary:hover,
.szbt-btn-primary:focus {
  background: #8e171d !important; /* etwas dunkler für Hover */
  border-color: #8e171d !important;
  color: #fff !important;
}

/* Kauf-Modal – Inhalte */
.szbt-modal-buy .szbt-modal__panel {
  max-width: 480px;
}

.szbt-buy-modal-ball {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.szbt-buy-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.szbt-buy-modal-actions .szbt-btn-buy-act {
  flex: 1 1 100%;
  justify-content: center;
}

@media (min-width: 480px) {
  .szbt-buy-modal-actions .szbt-btn-buy-act {
    flex: 1 1 auto;
  }
}

.szbt-buy-modal-hint {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Kopfbereich im Kauf-Modal: Bild + Titel */
.szbt-buy-modal-ballwrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.szbt-buy-modal-ballimg {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.szbt-buy-modal-ballimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ball-Titel */
.szbt-buy-modal-ball {
  font-weight: 600;
  margin: 0;
}

/* Hinweis etwas kleiner & dezenter */
.szbt-buy-modal-hint {
  font-size: 0.78rem;
  opacity: 0.8;
  color: #6b7280;
}