/** NythosX · form UX enhancements (nx-forms:css:v1) */
.nx-fld { position: relative; }
.nx-input-help {
  font-family: var(--mono); font-size: 10.5px; color: var(--txt-3);
  margin-top: 5px; line-height: 1.4; letter-spacing: .01em;
}
.nx-input-help.err { color: var(--red); }
.nx-input-help.ok  { color: var(--green); }
.nx-input-help code { color: var(--green); font-family: var(--mono); font-size: 10.5px; }
.nx-input.valid   { border-color: var(--green-line) !important; }
.nx-input.invalid { border-color: var(--red-line)   !important; }
.nx-presets {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}
.nx-preset {
  height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt-3);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.nx-preset:hover  { border-color: var(--green-line); color: var(--green); background: var(--green-bg); }
.nx-preset:active { transform: translateY(1px); }
.nx-strength { display: flex; gap: 4px; margin-top: 6px; }
.nx-strength-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-4); transition: background var(--t-fast); }
.nx-strength-bar.on-1 { background: var(--red); }
.nx-strength-bar.on-2 { background: var(--amber); }
.nx-strength-bar.on-3 { background: var(--blue); }
.nx-strength-bar.on-4 { background: var(--green); }
.nx-strength-label { font-family: var(--mono); font-size: 10px; color: var(--txt-3); margin-top: 4px; }
.nx-toggle-pw {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--txt-3); cursor: pointer;
  padding: 4px; font-size: 12px; line-height: 1; border-radius: 4px;
  transition: color var(--t-fast), background var(--t-fast);
}
.nx-toggle-pw:hover { color: var(--txt); background: var(--bg-3); }
.nx-pw-wrap { position: relative; }
.nx-pw-wrap input { padding-right: 34px; }
.nx-multi-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 4px;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px;
  max-height: 260px; overflow-y: auto; box-shadow: var(--shadow-lg);
  display: none;
}
.nx-multi-suggest.on { display: block; }
.nx-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  cursor: pointer; font-size: 12.5px; color: var(--txt-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.nx-suggest-item:hover, .nx-suggest-item.sel { background: var(--bg-4); color: var(--txt); }
.nx-suggest-item .ico { width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-4); font-size: 12px; flex-shrink: 0; overflow: hidden; }
.nx-suggest-item .ico img { width: 100%; height: 100%; }
.nx-suggest-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-suggest-item .sub { font-family: var(--mono); font-size: 10px; color: var(--txt-3); }
.nx-inline-guide {
  font-family: var(--mono); font-size: 11px; color: var(--txt-3);
  line-height: 1.65; padding: 10px 12px; border-radius: 6px;
  background: var(--bg-3); border-left: 2px solid var(--blue); margin-top: 6px;
}
.nx-inline-guide b { color: var(--txt-2); }
.nx-inline-guide code { color: var(--green); font-family: var(--mono); font-size: 11px; }
.nx-inline-guide a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(90,169,255,.35); }
.nx-inline-guide a:hover { border-bottom-color: var(--blue); }
.nx-input-hint-badge {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--txt-4);
  pointer-events: none;
}
@media (max-width: 720px) {
  .nx-presets { gap: 4px; }
  .nx-preset { height: 26px; padding: 0 10px; font-size: 10.5px; }
}