.tool-theme-picker{
  position:relative;
  width:100%;
  min-width:0;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--theme-card-border);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tool-theme-picker-trigger{
  width:100%;
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--theme-input-border);
  background:var(--theme-input-bg);
  color:var(--theme-input-text);
  cursor:pointer;
  box-shadow:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background .18s ease,
    opacity .18s ease;
}

.tool-theme-picker-trigger:hover{
  border-color:var(--theme-accent);
}

.tool-theme-picker-trigger:focus,
.tool-theme-picker-trigger:focus-visible{
  outline:none;
  border-color:var(--theme-input-focus-border);
  box-shadow:0 0 0 1px var(--theme-input-focus-ring);
}

.tool-theme-picker-preview{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
}

.tool-theme-picker-caret{
  flex:0 0 auto;
  font-size:12px;
  line-height:1;
  color:var(--theme-text-muted);
  transition:transform .18s ease;
}

.tool-theme-picker.is-open .tool-theme-picker-caret{
  transform:rotate(180deg);
}

.tool-theme-picker-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:80;
  padding:10px;
  border-radius:18px;
  border:1px solid var(--theme-card-border);
  background:linear-gradient(180deg, var(--theme-panel-start) 0%, var(--theme-panel-end) 100%);
  box-shadow:
    0 18px 42px var(--theme-shadow-2),
    inset 0 1px 0 var(--theme-highlight-soft);
  backdrop-filter:blur(14px);
  max-height:420px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

.tool-theme-picker-panel::-webkit-scrollbar{
  width:8px;
}

.tool-theme-picker-panel::-webkit-scrollbar-thumb{
  background:var(--theme-pill-border);
  border-radius:999px;
}

.tool-theme-picker-panel::-webkit-scrollbar-track{
  background:transparent;
}

.tool-theme-picker-group{
  margin:0;
  padding:0;
}

.tool-theme-picker-group + .tool-theme-picker-group{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--theme-card-border);
}

.tool-theme-picker-group-title{
  margin:0 0 10px 0;
  padding:0 2px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--theme-text-muted);
}

.tool-theme-picker-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.tool-theme-picker-option{
  width:100%;
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.tool-theme-picker-option:hover{
  transform:translateY(-1px);
  background:var(--theme-card-bg);
  border-color:var(--theme-accent);
}

.tool-theme-picker-option:focus,
.tool-theme-picker-option:focus-visible{
  outline:none;
  border-color:var(--theme-input-focus-border);
  box-shadow:0 0 0 1px var(--theme-input-focus-ring);
}

.tool-theme-picker-option.is-active{
  background:linear-gradient(135deg, var(--theme-accent-soft), var(--theme-accent-soft-2));
  border-color:var(--theme-accent);
  box-shadow:0 10px 24px var(--theme-shadow-2);
}

.tool-theme-picker-option-swatches{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.tool-theme-swatch{
  width:10px;
  height:10px;
  min-width:10px;
  min-height:10px;
  border-radius:4px;
  display:block;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.18);
  box-sizing:border-box;
}

.tool-theme-picker-option.is-active .tool-theme-swatch{
  border-color:rgba(255,255,255,0.32);
}

body[data-ui-theme-loading="1"] .tool-theme-picker-trigger,
body[data-ui-theme-loading="1"] .tool-theme-picker-option{
  pointer-events:none;
  opacity:.72;
}

/* Intégration dock outils */
.tool-body-voicelify .vfy-dock,
.tool-body-imagy .imgy-dock,
.tool-body-texty .txy-dock{
  overflow:visible;
}

.tool-body-voicelify .vfy-dock-brand,
.tool-body-imagy .imgy-dock-brand,
.tool-body-voicelify .vfy-dock-link,
.tool-body-imagy .imgy-dock-link,
.tool-body-texty .txy-dock-link{
  padding-right:14px;
}

.tool-body-voicelify .vfy-dock-brand span,
.tool-body-imagy .imgy-dock-brand span,
.tool-body-voicelify .vfy-dock-link span,
.tool-body-imagy .imgy-dock-link span,
.tool-body-texty .txy-dock-link span{
  margin-right:0;
}

.tool-body-voicelify .vfy-dock:hover .vfy-dock-brand,
.tool-body-imagy .imgy-dock:hover .imgy-dock-brand{
  justify-content:center;
}

.tool-body-voicelify .vfy-dock:hover .vfy-dock-link,
.tool-body-imagy .imgy-dock:hover .imgy-dock-link,
.tool-body-texty .txy-dock:hover .txy-dock-link{
  justify-content:flex-start;
}

.tool-body-voicelify .vfy-dock:hover .tool-theme-picker,
.tool-body-imagy .imgy-dock:hover .tool-theme-picker,
.tool-body-texty .txy-dock:hover .tool-theme-picker{
  width:100%;
}

.tool-body-voicelify .vfy-dock .tool-theme-picker-trigger,
.tool-body-imagy .imgy-dock .tool-theme-picker-trigger,
.tool-body-texty .txy-dock .tool-theme-picker-trigger{
  justify-content:center;
}

.tool-body-voicelify .vfy-dock:hover .tool-theme-picker-trigger,
.tool-body-imagy .imgy-dock:hover .tool-theme-picker-trigger,
.tool-body-texty .txy-dock:hover .tool-theme-picker-trigger{
  justify-content:space-between;
}

.tool-body-voicelify .vfy-dock:hover .tool-theme-picker-preview,
.tool-body-imagy .imgy-dock:hover .tool-theme-picker-preview,
.tool-body-texty .txy-dock:hover .tool-theme-picker-preview{
  justify-content:flex-start;
}

@media (max-width:980px){
  .tool-theme-picker{
    width:100%;
  }

  .tool-theme-picker-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .tool-theme-picker-panel{
    max-height:360px;
  }

  .tool-body-voicelify .vfy-dock:hover .vfy-dock-brand,
  .tool-body-imagy .imgy-dock:hover .imgy-dock-brand{
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  .tool-theme-picker-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .tool-theme-picker-panel{
    max-height:320px;
  }
}