/* Forms */
.form-group { margin-bottom: var(--sp-4); }
.form-row { display: flex; gap: var(--sp-3); }
.form-row > * { flex: 1; }
label.field-label, .field-label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  background: var(--bg-input); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--fs-md);
  transition: var(--transition);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background: var(--bg-primary); outline: none; }
.input::placeholder { color: var(--text-faint); }
.input:disabled, .select:disabled { opacity: .6; cursor: not-allowed; }
.textarea { resize: vertical; min-height: 90px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8595' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .input { padding-right: 56px; }
.input-affix .affix { position: absolute; right: 12px; color: var(--text-muted); font-size: var(--fs-sm); font-family: var(--font-mono); }
.input-affix .affix-btn { position: absolute; right: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); padding: 3px 6px; border-radius: 4px; }
.input-affix .affix-btn:hover { background: var(--accent-soft); }

.field-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 5px; }
.field-error { font-size: var(--fs-xs); color: var(--danger); margin-top: 5px; display: none; }
.form-group.has-error .input,
.form-group.has-error .select { border-color: var(--danger); }
.form-group.has-error .field-error { display: block; }

.checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-md); color: var(--text-secondary); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
.checkbox a { color: var(--accent); }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 22px; transition: var(--transition); }
.switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* Range slider */
.range { width: 100%; accent-color: var(--accent); }

/* Leverage buttons */
.lev-options { display: flex; gap: 4px; flex-wrap: wrap; }
.lev-options button {
  flex: 1; min-width: 42px; padding: 6px 4px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
}
.lev-options button.active { border-color: var(--accent); color: var(--text-primary); background: var(--accent-soft); }

.password-meter { height: 4px; border-radius: 2px; background: var(--bg-hover); margin-top: 6px; overflow: hidden; }
.password-meter span { display: block; height: 100%; width: 0; transition: width .2s ease, background .2s ease; }