.character-build-signals {
  --cbs-bg: #101d38;
  --cbs-panel: rgba(255, 255, 255, 0.065);
  --cbs-border: rgba(139, 178, 255, 0.24);
  --cbs-text: #eef4ff;
  --cbs-muted: #b9c7df;
  --cbs-accent: #79a9ff;
  --cbs-good: #79e1ac;
  box-sizing: border-box;
  width: 100%;
  margin: 1.5rem 0 2rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  overflow: hidden;
  color: var(--cbs-text);
  background: linear-gradient(145deg, #10284b, var(--cbs-bg));
  border: 1px solid var(--cbs-border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(4, 11, 26, 0.2);
}
.character-build-signals *,
.character-build-signals *::before,
.character-build-signals *::after { box-sizing: border-box; }
.cbs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cbs-heading { min-width: 0; }
.cbs-kicker { margin: 0 0 .28rem; color: var(--cbs-accent); font-size: .76rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.character-build-signals .cbs-title { margin: 0; color: #fff; font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.18; }
.cbs-intro { max-width: 850px; margin: .55rem 0 0; color: var(--cbs-muted); font-size: .95rem; line-height: 1.55; }
.cbs-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; flex: 0 0 auto; }
.cbs-badge { display: inline-flex; align-items: center; min-height: 30px; padding: .3rem .58rem; color: #ddecff; background: rgba(82, 139, 238, .16); border: 1px solid rgba(113, 164, 255, .28); border-radius: 999px; font-size: .72rem; font-weight: 850; white-space: nowrap; }
.cbs-version-guard { margin: 1rem 0 0; padding: .75rem .9rem; color: #ffe7a1; background: rgba(104, 74, 11, .27); border-left: 4px solid #ffbd38; border-radius: 9px; font-size: .85rem; line-height: 1.5; }
.cbs-version-guard.is-match { color: #c9f7df; background: rgba(25, 101, 70, .23); border-left-color: var(--cbs-good); }
.cbs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.cbs-card { display: flex; min-width: 0; flex-direction: column; padding: 1rem; background: var(--cbs-panel); border: 1px solid rgba(255, 255, 255, .11); border-radius: 13px; }
.cbs-card-label { align-self: flex-start; margin-bottom: .5rem; padding: .25rem .48rem; color: #bcd5ff; background: rgba(83, 132, 219, .18); border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.character-build-signals .cbs-card-title { margin: 0; color: #fff; font-size: 1rem; line-height: 1.3; }
.cbs-card-meta { margin: .35rem 0 .75rem; color: #90b8ff; font-size: .78rem; font-weight: 800; line-height: 1.4; }
.cbs-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .45rem; align-items: start; margin-top: .48rem; }
.cbs-row-label { padding-top: .3rem; color: var(--cbs-muted); font-size: .75rem; font-weight: 800; }
.cbs-chips { display: flex; flex-wrap: wrap; gap: .34rem; min-width: 0; }
.cbs-chip { display: inline-flex; min-width: 0; align-items: center; gap: .3rem; min-height: 30px; padding: .23rem .43rem; color: #edf4ff; background: rgba(255, 255, 255, .08); border-radius: 8px; font-size: .75rem; font-weight: 750; }
.cbs-chip img { flex: 0 0 22px; width: 22px; height: 22px; object-fit: contain; }
.cbs-chip-link { text-decoration: none; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.cbs-chip-link:hover { color: #fff; background: rgba(121, 169, 255, .2); box-shadow: 0 0 0 1px rgba(121, 169, 255, .34); transform: translateY(-1px); }
.cbs-chip-link:focus-visible, .cbs-item-link:focus-visible { outline: 2px solid #9dc1ff; outline-offset: 2px; }
.cbs-item-link { display: inline-flex; align-items: center; gap: .28rem; color: #cfe0ff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(121, 169, 255, .42); text-underline-offset: 2px; }
.cbs-item-link img { flex: 0 0 22px; width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.cbs-item-link.is-static { color: inherit; text-decoration: none; }
.cbs-item-link:hover { color: #fff; text-decoration-color: currentColor; }
.cbs-items { margin: .72rem 0 0; color: var(--cbs-muted); font-size: .76rem; line-height: 1.48; }
.cbs-items strong { color: #eaf2ff; }
.cbs-usage-note { margin-top: 1rem; padding: .82rem .95rem; color: var(--cbs-muted); background: rgba(255, 255, 255, .045); border-left: 3px solid var(--cbs-accent); border-radius: 8px; font-size: .84rem; line-height: 1.55; }
.cbs-usage-note strong { color: var(--cbs-text); }
.cbs-usage-note a { color: var(--cbs-accent); font-weight: 800; }
.cbs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-top: 1rem; color: var(--cbs-muted); font-size: .76rem; line-height: 1.45; }
.cbs-foot a { color: var(--cbs-accent); font-weight: 800; text-decoration: none; }
.cbs-foot a:hover { text-decoration: underline; }
.cbs-source { margin-left: auto; opacity: .58; font-size: .68rem; }
.cbs-loading { margin: 0; color: var(--cbs-muted); }
.cbs-empty { padding: .8rem; color: var(--cbs-muted); background: rgba(255,255,255,.05); border-radius: 10px; }
@media (max-width: 900px) { .cbs-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
  .nav-links { display: none !important; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .character-build-signals { padding: 1rem; border-radius: 14px; }
  .cbs-head { display: block; }
  .cbs-badges { justify-content: flex-start; margin-top: .75rem; }
  .cbs-source { width: 100%; margin-left: 0; }
  .alternatives-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}