.input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-1);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  font-family: var(--font-body);
  transition: border-color var(--d-fast) var(--ease-std), background var(--d-fast) var(--ease-std), box-shadow var(--d-fast) var(--ease-std);
}

.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-2); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input.is-error { border-color: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
.input.is-success { border-color: var(--up); }

.input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.input--lg { padding: 16px 18px; font-size: var(--t-md); }
.input--sm { padding: 8px 10px; font-size: var(--t-sm); }

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}

.field__hint { font-size: var(--t-xs); color: var(--ink-3); }
.field__hint--error { color: var(--down); }
.field__hint--success { color: var(--up); }

.field__row { display: flex; gap: var(--s-2); align-items: stretch; }
.field__row .input { flex: 1; }

.field--addon { position: relative; }
.field--addon .input { padding-left: 42px; }
.field__addon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-weight: 600;
  pointer-events: none;
}

.field__currency {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 14px;
  background: var(--bg-2);
  color: var(--ink-2);
  border-right: 1px solid var(--line);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-weight: 700;
  font-family: var(--font-mono);
}
.field--currency .input { padding-left: 56px; }

@media (max-width: 720px) {
  .input { font-size: 16px; min-height: 44px; }
  .input--sm { font-size: var(--t-base); min-height: 36px; }
  .input--lg { min-height: 52px; }
}
