.fx-theme-picker{display:flex;gap:.35rem}
.fx-theme-picker .tseg{
  font-family:var(--mono);font-size:.65rem;color:var(--tan-dim);
  background:transparent;border:1px solid var(--border);
  padding:3px 8px;height:24px;border-radius:6px;cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.fx-theme-picker .tseg:hover{border-color:var(--border-active);color:var(--tan)}
.fx-theme-picker .tseg.active{color:#0c0c0c;background:var(--gold);border-color:var(--gold);font-weight:700}
.fx-variant-picker{
  font-family:var(--mono);font-size:.65rem;color:var(--tan-dim);
  background:transparent;border:1px solid var(--border);
  padding:3px 8px;height:24px;border-radius:6px;cursor:pointer;
}
.fx-variant-picker:hover{border-color:var(--border-active);color:var(--tan)}
.fx-variant-picker[hidden]{display:none}

/* ============================================================
   Picker superposé (bouton Thème + dropdown) et toggle CRT séparé.
   .fx-theme-picker/.tseg/.fx-variant-picker ci-dessus restent
   inchangés — juste repositionnés à l'intérieur de .fx-picker-menu.
   ============================================================ */
.fx-theme-widget{display:flex;align-items:center;gap:.5rem}

.fx-picker{position:relative}

.fx-picker-trigger{
  font-family:var(--mono);font-size:.65rem;color:var(--text);
  background:var(--pane-2);border:1px solid var(--border);
  padding:3px 10px;height:24px;border-radius:6px;cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.fx-picker-trigger:hover{border-color:var(--border-active);color:var(--tan)}
.fx-picker-trigger[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}

.fx-picker-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:70;
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--pane);border:1px solid var(--border);border-radius:8px;
  padding:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.35);
  min-width:max-content;
}
.fx-picker-menu[hidden]{display:none}

.fx-crt-toggle{
  font-family:var(--mono);font-size:.65rem;color:var(--tan-dim);
  background:transparent;border:1px solid var(--border);
  padding:3px 8px;height:24px;border-radius:6px;cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.fx-crt-toggle:hover{border-color:var(--border-active);color:var(--tan)}
.fx-crt-toggle.active{color:#0c0c0c;background:var(--gold);border-color:var(--gold);font-weight:700}

/* ============================================================
   Bureaux (desks-ui.js), à l'intérieur de .fx-picker-menu.
   Nouvelles classes uniquement : .tseg, .fx-picker*, .fx-crt-toggle
   et .fx-variant-picker ne sont ni renommés ni modifiés.
   Calqué sur .tseg (mêmes variables, mêmes 24px, même radius 6px),
   avec l'alignement à gauche qu'impose une liste verticale.
   ============================================================ */
.fx-desk-list{display:flex;flex-direction:column;gap:.25rem}

.fx-desk-item{
  font-family:var(--mono);font-size:.65rem;color:var(--tan-dim);
  background:transparent;border:1px solid var(--border);
  padding:3px 8px;min-height:24px;border-radius:6px;cursor:pointer;
  transition:.14s;white-space:nowrap;text-align:left;
}
.fx-desk-item:hover{border-color:var(--border-active);color:var(--tan)}
.fx-desk-item.active{color:#0c0c0c;background:var(--gold);border-color:var(--gold);font-weight:700}

.fx-desk-add{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border);
}

.fx-desk-add-trigger{
  flex:1;
  font-family:var(--mono);font-size:.65rem;color:var(--tan-dim);
  background:transparent;border:1px dashed var(--border);
  padding:3px 8px;height:24px;border-radius:6px;cursor:pointer;
  transition:.14s;white-space:nowrap;text-align:left;
}
.fx-desk-add-trigger:hover{border-color:var(--border-active);color:var(--tan)}

.fx-desk-add-input{
  flex:1;min-width:0;
  font-family:var(--mono);font-size:.65rem;color:var(--text);
  background:var(--pane-2);border:1px solid var(--border);
  padding:3px 8px;height:24px;border-radius:6px;
}
.fx-desk-add-input:focus{outline:none;border-color:var(--gold)}
.fx-desk-add-input::placeholder{color:var(--gutter)}
.fx-desk-add-input:disabled{opacity:.5}

.fx-desk-add-confirm{
  font-family:var(--mono);font-size:.65rem;color:#0c0c0c;font-weight:700;
  background:var(--gold);border:1px solid var(--gold);
  padding:3px 10px;height:24px;border-radius:6px;cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.fx-desk-add-confirm:hover{filter:brightness(1.12)}
.fx-desk-add-confirm:disabled{opacity:.5;cursor:default;filter:none}

/* --red n'est défini que dans une partie des thèmes : repli sur --tan-dim,
   présent partout, pour ne jamais retomber sur une couleur héritée. */
.fx-desk-error{
  flex-basis:100%;margin:0;
  font-family:var(--mono);font-size:.6rem;line-height:1.4;
  color:var(--red, var(--tan-dim));
}
.fx-desk-error[hidden]{display:none}

/* Le libellé du déclencheur est un nom saisi par l'utilisateur : borné,
   pour qu'un nom long ne pousse pas le reste de .fx-header-actions. */
.fx-desk-trigger{max-width:14ch;overflow:hidden;text-overflow:ellipsis}

/* Ligne bureau : conteneur inline avec nom, crayon, croix. */
.fx-desk-item{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding-right:.5rem;
}
.fx-desk-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.fx-desk-rename,
.fx-desk-delete{
  flex:none;
  width:20px;
  height:20px;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:.65rem;
  line-height:1;
  color:var(--tan-dim);
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
  transition:.14s;
}
.fx-desk-rename:hover,
.fx-desk-delete:hover{
  border-color:var(--border-active);
  color:var(--tan);
}
.fx-desk-delete:disabled{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}

/* Renommage inline. */
.fx-desk-rename-input{
  flex:1;
  min-width:0;
  font:inherit;
  color:var(--text);
  background:var(--pane-2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:0 .5rem;
  height:22px;
}
.fx-desk-rename-input:focus{outline:none;border-color:var(--gold)}
.fx-desk-rename-confirm,
.fx-desk-rename-cancel{
  flex:none;
  height:22px;
  padding:0 .5rem;
  border-radius:6px;
  font:inherit;
  font-size:.6rem;
  cursor:pointer;
  transition:.14s;
}
.fx-desk-rename-confirm{
  color:#0c0c0c;
  font-weight:700;
  background:var(--gold);
  border:1px solid var(--gold);
}
.fx-desk-rename-confirm:hover{filter:brightness(1.12)}
.fx-desk-rename-confirm:disabled{opacity:.5;cursor:default;filter:none}
.fx-desk-rename-cancel{
  color:var(--tan-dim);
  background:transparent;
  border:1px solid var(--border);
}
.fx-desk-rename-cancel:hover{border-color:var(--border-active);color:var(--tan)}
.fx-desk-rename-cancel:disabled{opacity:.5;cursor:default}
