/* ═══════════════════════════════════════════════════════
 * canvas-brush-studio.css — Brush Studio layout and tool geometry.
 * Visual ownership: design-system/adapters/canvas-brush-studio-theme.css.
 * Brush swatches and test-pad canvas remain tool/content-owned.
 * ═══════════════════════════════════════════════════════ */

.brush-studio-backdrop {
  position:fixed;
  inset:0;
  z-index:20000;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.brush-studio-backdrop.is-open { display:flex; }

.brush-studio-modal {
  width:min(1100px,95vw);
  height:min(760px,90vh);
  border:1px solid transparent;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.bs-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  border-bottom:1px solid transparent;
  flex-shrink:0;
}
.bs-title {
  margin:0;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bs-header-actions {
  display:flex;
  align-items:center;
  gap:8px;
}
.bs-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.bs-btn svg { width:14px; height:14px; }
.bs-btn--primary { font-weight:600; }

.bs-body {
  display:flex;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.bs-sidebar {
  width:200px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  border-right:1px solid transparent;
  overflow:hidden;
}

.bs-brush-list {
  flex-shrink:0;
  max-height:180px;
  overflow-y:auto;
  padding:6px 6px 4px;
  border-bottom:1px solid transparent;
  scrollbar-width:thin;
}
.bs-brush-list::-webkit-scrollbar { width:4px; }
.bs-brush-list::-webkit-scrollbar-thumb { border-radius:2px; }
.bs-brush-list-title {
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:2px 8px 6px;
}
.bs-brush-list-item {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:12px;
  cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
}
.bs-brush-list-icon {
  flex-shrink:0;
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bs-brush-list-icon svg { width:14px; height:14px; }
.bs-brush-list-label {
  overflow:hidden;
  text-overflow:ellipsis;
}

.bs-nav {
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  scrollbar-width:thin;
}
.bs-nav::-webkit-scrollbar { width:4px; }
.bs-nav::-webkit-scrollbar-thumb { border-radius:2px; }
.bs-nav-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:none;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s,color .15s;
  text-align:left;
  white-space:nowrap;
}
.bs-nav-item.is-active { font-weight:600; }
.bs-nav-icon {
  flex-shrink:0;
  width:20px;
  text-align:center;
  font-size:15px;
  opacity:.8;
}
.bs-nav-label {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bs-content {
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
.bs-content::-webkit-scrollbar { display:none; }
.bs-content::-webkit-scrollbar-track { background:transparent; }
.bs-content::-webkit-scrollbar-thumb { border-radius:3px; }

.bs-testpad {
  flex-shrink:0;
  border-bottom:1px solid transparent;
  padding:12px 16px;
}
.bs-testpad.is-hidden { display:none; }
.bs-testpad canvas {
  display:block;
  width:100%;
  height:220px;
  border-radius:10px;
  border:1px solid transparent;
  background:#fff;
  cursor:crosshair;
  touch-action:none;
}
.bs-testpad-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}
.bs-testpad-btn {
  padding:4px 12px;
  border-radius:6px;
  border:1px solid transparent;
  font-size:12px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.bs-testpad-info {
  font-size:12px;
  margin-left:auto;
}
.bs-testpad-colors {
  display:flex;
  align-items:center;
  gap:5px;
}
.bs-color-dot {
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  transition:border-color .15s,transform .15s;
  padding:0;
}
.bs-color-dot:hover { transform:scale(1.15); }
.bs-color-dot.is-active {
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.3);
}

.bs-section-content {
  flex:1 1 auto;
  min-height:200px;
  padding:16px 24px 24px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.bs-section-content::-webkit-scrollbar { width:6px; }
.bs-section-content::-webkit-scrollbar-track { background:transparent; }
.bs-section-content::-webkit-scrollbar-thumb { border-radius:3px; }
.bs-section-title {
  margin:0 0 16px;
  font-size:15px;
  font-weight:600;
}