/* ═══ Reset + shared form controls ═══ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-1);
  background: var(--bg-0);
  /* No -webkit-font-smoothing here on purpose. "antialiased" is a macOS idiom;
     on Windows it switches Chrome off ClearType subpixel rendering and onto
     grayscale AA, which is what made text look thin and blurry. Letting each
     platform use its own default is sharper everywhere. */
}

.app { height: 100%; display: flex; flex-direction: column; }

h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, canvas, video { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--stroke); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-m);
  border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text-1);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-fast);
}
.btn:hover { background: var(--bg-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
  background: var(--accent-grad); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(79, 124, 255, .35);
}
.btn-primary:hover { background: var(--accent-grad); filter: brightness(1.1); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--text-1); }

.btn-danger { color: var(--bad); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: var(--radius-s); }
.btn-icon { padding: 7px; border-radius: var(--radius-s); }
.btn-icon svg { width: 17px; height: 17px; }

/* ── Inputs ── */
.input, .select, .textarea {
  width: 100%; padding: 8px 11px; border-radius: var(--radius-s);
  border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text-1);
  outline: none; transition: border-color var(--dur-fast);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { resize: vertical; min-height: 64px; }
.select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }

/* ── Slider row (label · track · value chip, per reference design) ── */
.slider-row { display: grid; grid-template-columns: 86px 1fr 52px; align-items: center; gap: 10px; padding: 3px 0; }
.slider-row > label { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slider-row > output, .slider-row > .slider-val { font-size: 12px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--stroke-soft); border-radius: var(--radius-s); text-align: center; padding: 3px 4px; font-variant-numeric: tabular-nums; width: 100%; min-width: 0; font-family: inherit; }
.slider-row > .slider-val:focus { outline: none; border-color: var(--accent); color: var(--text-1); }

input[type="range"].range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0;
  --fill: 0%;
}
input[type="range"].range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--bg-3) var(--fill));
}
input[type="range"].range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); margin-top: -5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
input[type="range"].range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg-3); }
input[type="range"].range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type="range"].range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }

/* ── Segmented control ── */
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--radius-m); padding: 3px; gap: 2px; }
.seg > button {
  border: 0; background: transparent; color: var(--text-2); padding: 5px 12px;
  border-radius: calc(var(--radius-m) - 4px); cursor: pointer; font-size: 12.5px; line-height: 1.3;
  display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur-fast), color var(--dur-fast);
}
.seg > button svg { width: 15px; height: 15px; }
.seg > button:hover { color: var(--text-1); }
.seg > button.on { background: var(--bg-3); color: var(--text-1); box-shadow: var(--shadow-1); }

/* ── Checkbox / switch ── */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--text-1); }
.check input { display: none; }
.check .box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--stroke); background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast), border-color var(--dur-fast); flex: none;
}
.check .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6); transition: all var(--dur-fast); }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box svg { opacity: 1; transform: scale(1); }

.switch { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--stroke); cursor: pointer; transition: background var(--dur-fast); flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: all var(--dur-fast); }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on::after { left: 16px; background: #fff; }

/* ── Chips ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--stroke); background: var(--bg-2); color: var(--text-2);
  font-size: 12.5px; cursor: pointer; user-select: none; white-space: nowrap;
  transition: all var(--dur-fast);
}
.chip:hover { color: var(--text-1); border-color: var(--text-3); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ── Utility ── */
.muted { color: var(--text-2); }
.tiny { font-size: 12px; color: var(--text-3); }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1 1 auto; min-width: 0; }
.hidden { display: none !important; }
hr.sep { border: 0; border-top: 1px solid var(--stroke-soft); margin: 12px 0; }