/*
 * TRIKON Cable Builder. Tokens aus PS Module/DESIGN.md ("The Specialist's Counter"):
 * Workshop Teal als einziger Akzent, getönte Neutrals, System-Font, flach mit
 * Schatten nur als Antwort auf Interaktion. Motion nur über opacity/Farbe/
 * box-shadow + stroke-dashoffset (Zeichnung), nie transform/Layout.
 */
.tcb {
  --tcb-teal: #04697e;
  --tcb-teal-hover: #035566;
  --tcb-teal-deep: #0a2a33;
  --tcb-teal-tint: rgba(4, 105, 126, 0.08);
  --tcb-teal-ring: rgba(4, 105, 126, 0.18);
  --tcb-ink: #14222a;
  --tcb-muted: #6c7479;
  --tcb-rule: #e6e9eb;
  --tcb-paper: #fafafa;
  --tcb-surface: #f3f5f6;
  --tcb-red: #b3261e;
  --tcb-amber: #8a6500;
  --tcb-cable: #1d2b31;
  --tcb-plug: #2c3a41;
  --tcb-ease: cubic-bezier(0.25, 1, 0.5, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tcb-ink);
  max-width: 1640px;
  margin: 0 auto;
}
.tcb *, .tcb *::before, .tcb *::after { box-sizing: border-box; }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.tcb-head { margin: 0 0 22px; max-width: 70ch; }
.tcb-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--tcb-teal); letter-spacing: 0.02em; }
.tcb-lead { margin: 0; color: var(--tcb-muted); }

/* ── Raster: Schritte links, Bühne rechts (gepinnt) ───────────────────── */
.tcb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; align-items: start; }
.tcb-stage {
  position: sticky; top: 16px;
  border: 1px solid var(--tcb-rule); border-radius: 8px; background: var(--tcb-paper);
  padding: 14px 18px 18px;
}

/* ── Schritte ─────────────────────────────────────────────────────────── */
.tcb-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tcb-rule); }
.tcb-step { border-bottom: 1px solid var(--tcb-rule); }
.tcb-step-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 10px 4px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
  font: inherit; transition: background-color 180ms var(--tcb-ease);
}
.tcb-step-head:hover:not(:disabled) { background: var(--tcb-teal-tint); }
.tcb-step-head:disabled { cursor: default; }
.tcb-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--tcb-rule);
  font-size: 12px; font-weight: 600; color: var(--tcb-muted); background: var(--tcb-paper);
  transition: background-color 200ms var(--tcb-ease), color 200ms var(--tcb-ease), border-color 200ms var(--tcb-ease);
}
.tcb-step.is-open .tcb-num { background: var(--tcb-teal); border-color: var(--tcb-teal); color: var(--tcb-paper); }
.tcb-step.is-done .tcb-num { background: var(--tcb-teal-tint); border-color: var(--tcb-teal); color: var(--tcb-teal); }
.tcb-step.is-locked .tcb-step-title { color: var(--tcb-muted); }
.tcb-step-title { font-weight: 600; font-size: 15px; }
.tcb-step-sum { flex: 1; min-width: 0; color: var(--tcb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcb-edit { flex: none; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tcb-teal); }
.tcb-step-body { padding: 4px 4px 22px 42px; animation: tcb-fade 260ms var(--tcb-ease) both; }

/* ── Bausteine ────────────────────────────────────────────────────────── */
.tcb-pills, .tcb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tcb-pill, .tcb-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0.4rem 0.95rem; border: 1px solid var(--tcb-rule); border-radius: 20px;
  background: var(--tcb-paper); color: var(--tcb-ink); font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color 180ms var(--tcb-ease), border-color 180ms var(--tcb-ease), color 180ms var(--tcb-ease);
}
.tcb-chip { min-height: 36px; font-size: 13px; }
.tcb-pill:hover, .tcb-chip:hover { background: var(--tcb-teal-tint); border-color: var(--tcb-teal); color: var(--tcb-teal); }
.tcb-pill.is-active, .tcb-chip.is-active { background: var(--tcb-teal); border-color: var(--tcb-teal); color: var(--tcb-paper); }
.tcb-pill-count { font-size: 12px; color: var(--tcb-muted); }
.tcb-pill.is-active .tcb-pill-count { color: rgba(250, 250, 250, 0.75); }

.tcb-list, .tcb-plugs { display: flex; flex-direction: column; gap: 6px; }
.tcb-fam { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tcb-fam-title { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--tcb-muted); }
.tcb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 52px;
  padding: 9px 14px; border: 1px solid var(--tcb-rule); border-radius: 6px; background: var(--tcb-paper);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color 180ms var(--tcb-ease), border-color 180ms var(--tcb-ease), box-shadow 180ms var(--tcb-ease);
}
.tcb-row-s { min-height: 44px; padding: 7px 12px; }
.tcb-row-plug { align-items: flex-start; padding: 10px 14px; }
.tcb-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tcb-variant {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--tcb-rule); border-radius: 20px;
  background: var(--tcb-paper); color: var(--tcb-ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background-color 160ms var(--tcb-ease), border-color 160ms var(--tcb-ease), color 160ms var(--tcb-ease);
}
.tcb-variant:hover { border-color: var(--tcb-teal); color: var(--tcb-teal); }
.tcb-variant.is-active { background: var(--tcb-teal); border-color: var(--tcb-teal); color: var(--tcb-paper); }
.tcb-row:hover { background: var(--tcb-teal-tint); box-shadow: 0 2px 12px rgba(4, 105, 126, 0.08); }
.tcb-row.is-active { border-color: var(--tcb-teal); background: var(--tcb-teal-tint); box-shadow: inset 0 0 0 1px var(--tcb-teal); }
.tcb-row-main { display: flex; flex-direction: column; min-width: 0; }
.tcb-row-main small { color: var(--tcb-muted); font-size: 12px; }
.tcb-row-meta { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.tcb-price-m { font-weight: 600; }
.tcb-stock { font-size: 12px; color: var(--tcb-teal); }
.tcb-stock.is-supplier { color: var(--tcb-amber); }

.tcb-seg { display: inline-flex; flex-wrap: wrap; margin-bottom: 14px; border: 1px solid var(--tcb-rule); border-radius: 6px; overflow: hidden; }
.tcb-seg-btn {
  min-height: 40px; padding: 0 14px; border: 0; border-right: 1px solid var(--tcb-rule);
  background: var(--tcb-paper); color: var(--tcb-ink); font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color 180ms var(--tcb-ease), color 180ms var(--tcb-ease);
}
.tcb-seg-btn:last-child { border-right: 0; }
.tcb-seg-btn:hover { background: var(--tcb-teal-tint); }
.tcb-seg-btn.is-active { background: var(--tcb-teal); color: var(--tcb-paper); }
.tcb-sub { margin: 10px 0 6px; font-size: 13px; font-weight: 600; }
.tcb-picker { display: flex; flex-direction: column; gap: 10px; }
.tcb-pick-row { display: flex; flex-direction: column; gap: 6px; }
.tcb-pick-row .tcb-seg { margin-bottom: 0; align-self: flex-start; }
.tcb-pick-label { font-size: 12px; font-weight: 600; color: var(--tcb-muted); }
.tcb-pick-result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px;
  padding: 10px 14px; border: 1px solid var(--tcb-teal); border-radius: 6px; background: var(--tcb-teal-tint);
}
.tcb-pick-result small { color: var(--tcb-muted); }

.tcb-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.tcb-field label, .tcb-label { font-size: 13px; font-weight: 600; text-align: left; align-self: flex-start; margin: 0; width: auto; float: none; }
.tcb-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tcb-input {
  width: 120px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--tcb-rule); border-radius: 4px;
  background: var(--tcb-paper); color: var(--tcb-ink); font: inherit; font-size: 16px;
  transition: border-color 160ms var(--tcb-ease), box-shadow 160ms var(--tcb-ease);
}
.tcb-input-s { width: 84px; text-align: center; }
.tcb-input:focus { outline: none; border-color: var(--tcb-teal); box-shadow: 0 0 0 3px var(--tcb-teal-ring); }
.tcb-len-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tcb-len-out { font-size: 1.6rem; font-weight: 700; color: var(--tcb-teal); font-variant-numeric: tabular-nums; }
.tcb-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.tcb-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--tcb-teal) var(--fill, 0%), var(--tcb-rule) var(--fill, 0%));
}
.tcb-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--tcb-rule); }
.tcb-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--tcb-teal); }
.tcb-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--tcb-paper); border: 2px solid var(--tcb-teal); box-shadow: 0 1px 4px rgba(4, 105, 126, 0.18);
  transition: box-shadow 160ms var(--tcb-ease);
}
.tcb-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--tcb-paper); border: 2px solid var(--tcb-teal); }
.tcb-range:focus-visible { outline: none; }
.tcb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--tcb-teal-ring); }
.tcb-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--tcb-teal-ring); }
.tcb-range-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--tcb-muted); margin-top: -6px; }
.tcb-help { margin: 0; font-size: 12px; color: var(--tcb-muted); }
.tcb-opts { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--tcb-rule); }
.tcb-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; font-weight: 400; cursor: pointer; }
.tcb-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tcb-teal); flex: none; }
.tcb-accept { padding: 12px 14px; border: 1px solid var(--tcb-rule); border-radius: 6px; background: var(--tcb-surface); margin: 6px 0 14px; }

.tcb-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tcb-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--tcb-rule);
  background: var(--sw, var(--tcb-paper)); cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 3px var(--tcb-paper);
  transition: box-shadow 160ms var(--tcb-ease), border-color 160ms var(--tcb-ease);
}
.tcb-swatch.is-none { position: relative; }
.tcb-swatch.is-none::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--tcb-muted); transform: rotate(-45deg); }
.tcb-swatch.is-active { border-color: var(--tcb-teal); box-shadow: inset 0 0 0 3px var(--tcb-paper), 0 0 0 2px var(--tcb-teal); }

.tcb-qty { display: inline-flex; align-items: center; gap: 6px; }
.tcb-step-btn {
  width: 44px; height: 44px; border: 1px solid var(--tcb-rule); border-radius: 4px; background: var(--tcb-paper);
  font: inherit; font-size: 18px; color: var(--tcb-ink); cursor: pointer;
  transition: background-color 160ms var(--tcb-ease), border-color 160ms var(--tcb-ease);
}
.tcb-step-btn:hover { background: var(--tcb-teal-tint); border-color: var(--tcb-teal); }

.tcb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tcb-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px;
  border: 1px solid var(--tcb-teal); border-radius: 4px; background: var(--tcb-teal); color: var(--tcb-paper);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 180ms var(--tcb-ease), border-color 180ms var(--tcb-ease), color 180ms var(--tcb-ease), opacity 180ms var(--tcb-ease);
}
.tcb-btn:hover { background: var(--tcb-teal-hover); border-color: var(--tcb-teal-hover); color: var(--tcb-paper); text-decoration: none; }
.tcb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tcb-btn-ghost { background: var(--tcb-paper); color: var(--tcb-ink); border-color: var(--tcb-rule); }
.tcb-btn-ghost:hover { background: var(--tcb-teal-tint); border-color: var(--tcb-teal); color: var(--tcb-teal); }
.tcb-btn-cta { width: 100%; padding: 14px 22px; font-size: 15px; }

.tcb-alert { margin: 10px 0 0; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--tcb-rule); background: var(--tcb-surface); font-size: 13px; }
.tcb-alert.is-error { color: var(--tcb-red); border-color: rgba(179, 38, 30, 0.35); }
.tcb-alert.is-warn { color: var(--tcb-amber); border-color: rgba(138, 101, 0, 0.35); }
.tcb-alert.is-ok { border-color: var(--tcb-teal); background: var(--tcb-teal-tint); }
.tcb-alert.is-ok p { margin: 0; font-weight: 600; color: var(--tcb-teal); }

.tcb :focus-visible { outline: 2px solid var(--tcb-teal); outline-offset: 2px; }

/* ── Bühne ────────────────────────────────────────────────────────────── */
.tcb-draw { border-bottom: 1px solid var(--tcb-rule); margin: 0 -18px 14px; padding: 0 10px 6px; }
.tcb-draw svg { display: block; width: 100%; height: auto; max-height: 360px; }
.tcb-sum { transition: opacity 200ms var(--tcb-ease); }
.tcb-sum.is-loading { opacity: 0.55; }
.tcb-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0 0 12px; font-size: 13px; }
.tcb-facts dt { color: var(--tcb-muted); font-weight: 400; }
.tcb-facts dd { margin: 0; font-weight: 600; }
.tcb-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 2px; }
.tcb-price .tcb-label { width: 100%; font-weight: 400; color: var(--tcb-muted); font-size: 12px; }
.tcb-price strong { font-size: 1.75rem; line-height: 1.15; color: var(--tcb-teal); font-variant-numeric: tabular-nums; }
.tcb-vat, .tcb-total { color: var(--tcb-muted); font-size: 12px; margin: 0; }
.tcb-ready { margin: 8px 0 4px; }
.tcb-ready strong { font-weight: 600; }
.tcb-ready.is-local strong { color: var(--tcb-teal); }
.tcb-avail { margin: 4px 0 6px; font-size: 12px; }
.tcb-avail-h { margin: 6px 0 2px; font-weight: 600; color: var(--tcb-teal); }
.tcb-avail-h.is-supplier { color: var(--tcb-amber); }
.tcb-avail ul { margin: 0; padding-left: 16px; color: var(--tcb-ink); }
.tcb-avail li { margin: 1px 0; }
.tcb-details { margin-top: 10px; border-top: 1px solid var(--tcb-rule); padding-top: 8px; }
.tcb-details summary { min-height: 36px; display: flex; align-items: center; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--tcb-ink); }
.tcb-details summary:hover { color: var(--tcb-teal); }
.tcb-pins { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tcb-pins th { text-align: left; font-weight: 600; color: var(--tcb-muted); border-bottom: 1px solid var(--tcb-rule); padding: 4px 6px; }
.tcb-pins td { border-bottom: 1px solid var(--tcb-rule); padding: 5px 6px; }
.tcb-tech { overflow-x: auto; }
.tcb-tech svg { display: block; min-width: 560px; width: 100%; height: auto; }
.tcb-dock-toggle { display: none; }
.tcb-skeleton { height: 96px; border-radius: 6px; background: var(--tcb-surface); }

/* Zeichnung: Farben nur über Klassen, damit Vorschau/neu klar unterscheidbar */
.tcb-draw text { font-family: inherit; paint-order: stroke; stroke: var(--tcb-paper); stroke-width: 3px; stroke-linejoin: round; }
.tcb-svg-gap { fill: var(--tcb-paper); }
.tcb-svg-break { fill: none; stroke: var(--tcb-ink); stroke-width: 1.8; stroke-linecap: round; }
.tcb-svg-strong { font-size: 13px; font-weight: 600; fill: var(--tcb-ink); }
.tcb-svg-label { font-size: 11px; fill: var(--tcb-muted); }
.tcb-svg-label.is-s { font-size: 9px; }
.tcb-svg-dim { stroke: var(--tcb-muted); stroke-width: 1; }
.tcb-svg-dim-head { fill: var(--tcb-muted); }
.tcb-svg-boot { fill: #4a575d; }
.tcb-svg-metal, .tcb-svg-socket { fill: #b4bec2; }
.tcb-svg-pins { stroke: #b4bec2; stroke-width: 2.2; stroke-linecap: round; }
.tcb-svg-ring { stroke: rgba(20, 34, 42, 0.45); stroke-width: 0.6; }
.tcb-svg-shrink { fill: #d5dbde; stroke: #8f9aa0; stroke-width: 0.8; }
.tcb-svg-num { font-weight: 700; fill: var(--tcb-ink); }
.tcb-svg-on-dark { fill: var(--tcb-paper); font-weight: 600; }
.tcb-svg-branch { fill: none; stroke: var(--tcb-cable); stroke-width: 3; }
.tcb-svg-split { fill: var(--tcb-teal-deep); }
.tcb-svg-wire { fill: none; stroke: var(--tcb-muted); stroke-width: 1.6; stroke-linecap: round; }
.tcb-svg-placeholder { fill: none; stroke: var(--tcb-rule); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tcb-svg-ghost { stroke: var(--tcb-rule); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 10; }
.tcb-draw .is-preview { opacity: 0.45; }

/* Signature-Moment: neue Teile blenden ein, das Kabel zeichnet sich auf */
@media (prefers-reduced-motion: no-preference) {
  .tcb-draw .tcb-in { animation: tcb-fade 280ms var(--tcb-ease) both; }
  .tcb-draw .tcb-draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tcb-draw 520ms var(--tcb-ease) forwards; }
  .tcb-draw g { transition: opacity 180ms var(--tcb-ease); }
}
@keyframes tcb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcb-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tcb-step-body { animation: none; }
}

/* ── Mobil: Bühne unten angedockt (Zeichnung + Preis), Schritte darüber ─ */
@media (max-width: 899px) {
  .tcb-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tcb-grid > *, .tcb-steps, .tcb-step, .tcb-step-head { min-width: 0; }
  .tcb-step-body { padding-left: 4px; }
  .tcb-stage {
    position: sticky; top: auto; bottom: 0; z-index: 5; order: 2;
    margin: 16px -16px 0; border-radius: 8px 8px 0 0; border-bottom: 0; padding: 8px 16px 12px;
    box-shadow: 0 -8px 30px rgba(10, 42, 51, 0.08);
  }
  .tcb-draw { margin: 0 -16px 8px; padding: 0 8px 4px; }
  .tcb-draw svg { max-height: 124px; }
  .tcb-svg-label { font-size: 13px; }
  .tcb-svg-strong { font-size: 15px; }
  .tcb-facts, .tcb-details, .tcb-sum .tcb-help, .tcb-avail { display: none; }
  .tcb-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
  .tcb-sum > * { min-width: 0; }
  .tcb-sum > * { grid-column: 1; }
  .tcb-dock-toggle {
    display: inline-flex; align-items: center; grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 0 12px;
    border: 1px solid var(--tcb-rule); border-radius: 4px; background: var(--tcb-paper); color: var(--tcb-teal);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .tcb-stage.is-expanded { max-height: 78vh; overflow-y: auto; }
  .tcb-stage.is-expanded .tcb-facts { display: grid; }
  .tcb-stage.is-expanded .tcb-details, .tcb-stage.is-expanded .tcb-avail, .tcb-stage.is-expanded .tcb-sum .tcb-help { display: block; }
  .tcb-price { margin: 0; }
  .tcb-price strong { font-size: 1.35rem; }
  .tcb-ready { margin: 2px 0 0; font-size: 13px; }
}

/* Mischbestückung je Kanal + Farbinfo (0.12.2) */
.tcb-mix { margin: 10px 0 4px; border: 1px solid var(--tcb-rule); border-radius: 6px; padding: 8px 12px; }
.tcb-mix summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tcb-teal); }
.tcb-mix-list { display: grid; gap: 8px; margin-top: 10px; }
.tcb-mix-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: center; }
.tcb-mix-row label { font-size: 13px; font-weight: 600; margin: 0; text-align: left; }
.tcb-mix-row select { width: 100%; min-width: 0; }
.tcb-swatch-info { margin: 6px 0 0; font-size: 13px; color: var(--tcb-muted); min-height: 1.3em; }
@media (max-width: 520px) { .tcb-mix-row { grid-template-columns: 1fr; gap: 4px; } }
.tcb-comp { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; }
.tcb-comp th, .tcb-comp td { padding: 5px 6px; border-bottom: 1px solid var(--tcb-rule); text-align: left; vertical-align: top; }
.tcb-comp th { background: var(--tcb-surface); color: var(--tcb-teal); font-weight: 700; }
.tcb-comp .tcb-comp-qty { text-align: right; white-space: nowrap; }
.tcb-comp .tcb-comp-code { white-space: nowrap; color: var(--tcb-muted); }
.tcb-comp-grp td { background: var(--tcb-surface); color: var(--tcb-teal); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.tcb-comp-wrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 520px) { .tcb-comp .tcb-comp-code { white-space: normal; word-break: break-all; } }
.tcb-comp-sum td { font-weight: 700; color: var(--tcb-teal); border-top: 2px solid var(--tcb-teal); border-bottom: 0; }
.tcb-comp-sum td:first-child { text-align: right; }