.cb-wrap{
    max-width:640px;
    margin:2.5rem auto 0;
    padding:1.5rem 1.25rem 2rem;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:16px;
    text-align:left;
  }
  .cb-title{
    font-size:1.05rem;
    font-weight:600;
    margin:0 0 0.35rem;
    color:var(--color-text-primary);
    text-align:center;
  }
  .cb-sub{
    font-size:0.875rem;
    color:var(--color-text-secondary);
    text-align:center;
    margin:0 0 1.25rem;
  }
  .cb-board{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    margin-bottom:1rem;
  }
  .cb-row{
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
  }
  .cb-row-idx{
    width:1.6rem;
    flex-shrink:0;
    font-size:0.75rem;
    color:var(--color-text-secondary);
    text-align:right;
  }
  .cb-pegs{
    display:flex;
    gap:0.4rem;
  }
  .cb-peg{
    width:2rem;
    height:2rem;
    border-radius:50%;
    border:2px solid var(--color-border);
    background:var(--color-bg-alt);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    font-weight:700;
    color:var(--color-text-inverse);
    flex-shrink:0;
  }
  .cb-peg[data-filled="1"]{ border-color:transparent; }
  .cb-feedback{
    display:flex;
    gap:0.25rem;
    margin-left:0.35rem;
    flex-shrink:0;
  }
  .cb-dot{
    width:0.6rem;
    height:0.6rem;
    border-radius:50%;
    background:var(--color-border);
  }
  .cb-dot.black{ background:#0b1220; }
  .cb-dot.white{ background:#f5f7fb; border:1px solid var(--color-border); }
  @media (prefers-color-scheme: dark){
    .cb-dot.black{ background:#f5f7fb; }
    .cb-dot.white{ background:#0a1128; border:1px solid var(--color-border); }
  }
  .cb-palette{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    justify-content:center;
    margin-bottom:1rem;
  }
  .cb-swatch{
    width:2.25rem;
    height:2.25rem;
    border-radius:50%;
    border:2px solid var(--color-border);
    cursor:pointer;
    padding:0;
    font-size:0;
  }
  .cb-swatch:focus-visible{
    outline:2px solid var(--color-focus);
    outline-offset:2px;
  }
  .cb-swatch[aria-pressed="true"]{
    outline:3px solid var(--color-accent);
    outline-offset:2px;
  }
  .cb-current{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    margin-bottom:1rem;
  }
  .cb-actions{
    display:flex;
    justify-content:center;
    gap:0.75rem;
    flex-wrap:wrap;
  }
  .cb-status{
    text-align:center;
    min-height:1.4rem;
    margin:0.75rem 0 0;
    font-size:0.9rem;
    font-weight:600;
    color:var(--color-accent);
  }
  .cb-legend{
    text-align:center;
    font-size:0.8rem;
    color:var(--color-text-secondary);
    margin-top:0.5rem;
  }
  .cb-slot-btn{
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
  }
  .cb-slot-btn:focus-visible .cb-peg{
    outline:2px solid var(--color-focus);
    outline-offset:2px;
  }