.panel {
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  box-sizing: border-box;
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 6px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.section-header .section-label { margin-bottom: 0; }

/* CSV textarea */
.csv-wrapper { border-radius: var(--r-md); padding: 2px; position: relative; }
textarea.csv-area {
  height: 150px;
  resize: vertical;
  font-family: 'Consolas', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 10px 12px;
  border-radius: calc(var(--r-md) - 2px);
  display: block;
  color: var(--text);
  transition: height var(--t);
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
}
textarea.csv-area::placeholder { color: var(--muted); opacity: .7; }

/* Scrollbars neumorphiques sur la textarea CSV */
textarea.csv-area::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
textarea.csv-area::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 99px;
  box-shadow: inset 2px 2px 4px var(--sd), inset -2px -2px 4px var(--sl);
}
textarea.csv-area::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  border-radius: 99px;
  box-shadow: 1px 1px 2px var(--sd), -1px -1px 2px var(--sl);
}
textarea.csv-area::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
textarea.csv-area::-webkit-scrollbar-corner {
  background: var(--bg);
}

/* Firefox */
textarea.csv-area {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) var(--bg);
}

.import-btn {
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: box-shadow var(--t);
}
.import-btn:active { box-shadow: inset 2px 2px 4px var(--sd), inset -2px -2px 4px var(--sl) !important; }

/* Type selector */
.type-selector { display: flex; flex-direction: column; gap: 6px; }
.type-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  transition: box-shadow var(--t), color var(--t);
  text-align: left;
}
.type-btn .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background var(--t);
}
.type-btn.active {
  box-shadow: inset 3px 3px 6px var(--sd), inset -3px -3px 6px var(--sl);
  color: var(--accent);
}
.type-btn.active .dot { background: var(--accent); }

/* Config fields */
.fields { display: flex; flex-direction: column; gap: 8px; }
.field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.field .field-input { border-radius: var(--r-sm); padding: 2px 2px; }
.field input {
  display: block;
  width: 100%;
  padding: 7px 8px;
  font-size: 13px;
  border-radius: calc(var(--r-sm) - 2px);
}
.field input:focus-visible { outline: none; }
.field-input:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-radius: var(--r-sm);
}

/* Generate button */
.gen-btn {
  margin-top: auto;
  width: 100%;
  padding: 13px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  transition: box-shadow var(--t), transform var(--t);
}
.gen-btn:hover  { box-shadow: 7px 7px 14px var(--sd), -7px -7px 14px var(--sl); }
.gen-btn:active { box-shadow: inset 3px 3px 6px var(--sd), inset -3px -3px 6px var(--sl); transform: scale(.99); }


.field select {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  padding: 7px 32px 7px 8px;
  font-size: 13px;
  border-radius: calc(var(--r-sm) - 2px);
  color: var(--text);
  background: var(--bg);
  appearance: none;
  -webkit-appearance: none;
}
.field select:focus-visible { outline: none; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
.select-wrap:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-radius: var(--r-sm);
}
/* ── Number input for chart options (e.g. Comparaison max) ── */
.text-input.inset {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font: 500 14px/1 'DM Sans', sans-serif;
  box-shadow:
    inset 3px 3px 7px var(--sd),
    inset -3px -3px 7px var(--sl);
  outline: none;
  transition: box-shadow 180ms ease;
}
.text-input.inset:focus {
  box-shadow:
    inset 4px 4px 9px var(--sd),
    inset -2px -2px 6px var(--sl);
}
.text-input.inset::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }