.bb-grid{grid-template-columns:250px minmax(0,1fr)}
.bb-palette{padding:0;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.bb-preview{flex:none;padding:12px 16px;background:#eef4fa;border-bottom:1px solid #cbd5e1;text-align:center}
.bb-preview h2{text-align:left;margin:0;font-size:14px}
.bb-preview img{display:block;width:100%;height:124px;object-fit:contain}
.bb-preview strong{display:block;font-size:14px}
.bb-preview p{margin:4px 0 6px;font-size:13px}
.bb-palette #rotatePiece{margin:0;min-height:36px;padding:8px}
.bb-palette-scroll{min-height:0;overflow:auto;padding:14px 16px;overscroll-behavior:contain}
.bb-tabs{flex-wrap:wrap;gap:5px}
.bb-tabs button{font-size:13px;padding:7px 9px}
.bb-pieces button{display:flex;flex-direction:column;align-items:center;font-size:13px;min-width:0;padding:4px 4px 9px;gap:4px}
.bb-pieces img{width:100%;height:66px;object-fit:contain;background:#e8eff7;border-radius:5px}
.bb-colors{grid-template-columns:repeat(6,1fr);gap:7px}
.bb-colors button{min-height:28px}
@media(max-width:700px){
  .bb-grid{grid-template-columns:140px minmax(0,1fr);height:72dvh;min-height:470px}
  .bb-preview{padding:10px 8px}
  .bb-preview img{height:88px}
  .bb-preview h2,.bb-preview strong{font-size:13px}
  .bb-preview p{font-size:12px}
  .bb-palette-scroll{padding:12px 8px}
  .bb-tabs button{font-size:12px;min-height:34px;padding:7px}
  .bb-pieces{grid-template-columns:1fr}
  .bb-pieces img{height:72px}
  .bb-pieces button{font-size:13px}
  .bb-colors{grid-template-columns:repeat(3,1fr)}
  .bb-colors button{min-height:32px}
  .bb-view{max-width:145px}
}
@media(max-height:650px) and (min-width:701px){
  .bb-preview img{height:76px}
  .bb-preview{padding:8px 12px}
}