@layer components {
  .form { display: grid; gap: var(--s-4); }
  .form-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .field { display: grid; gap: var(--s-1); }
  .field > label, .field > .label { font-size: var(--t-sm); font-weight: 600; display: flex; gap: var(--s-1); align-items: baseline; }
  .field .req { color: var(--amber); font-size: var(--t-sm); }
  .field-hint { font-size: var(--t-xs); color: var(--muted); }
  .input, .select, .textarea {
    width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
    background: var(--raised); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }
  .input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
  .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in oklab, var(--cyan-ink) 50%, var(--line-strong)); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--cyan-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan-ink) 25%, transparent); }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
  .textarea { min-height: 120px; resize: vertical; }
  .select { appearance: none; padding-right: var(--s-7); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .select option { color: #0B111A; background: #FFFFFF; }
  html[data-surface="paper"] .input, html[data-surface="paper"] .select, html[data-surface="paper"] .textarea { background: #FFFFFF; }

  .check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); min-height: 44px; }
  .check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cyan-ink); flex: none; }
  .check a { color: var(--cyan-ink); }

  .field-error { color: var(--danger); font-size: var(--t-sm); }
  html[data-surface="paper"] .field-error { color: #B42318; }
  .form-alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border: 1px solid; font-size: var(--t-sm); display: flex; gap: var(--s-3); align-items: flex-start; }
  .form-alert .icon { width: 20px; height: 20px; margin-top: 1px; }
  .form-alert-error { border-color: color-mix(in oklab, var(--danger) 50%, transparent); background: color-mix(in oklab, var(--danger) 10%, transparent); }
  .form-alert-ok { border-color: color-mix(in oklab, var(--ok) 50%, transparent); background: color-mix(in oklab, var(--ok) 10%, transparent); }
  .form-alert-info { border-color: color-mix(in oklab, var(--amber) 50%, transparent); background: color-mix(in oklab, var(--amber) 10%, transparent); }
  html[data-surface="paper"] .form-alert-error { color: #7A1B14; }
  html[data-surface="paper"] .form-alert-ok { color: #14532D; }
  html[data-surface="paper"] .form-alert-info { color: #6B3F00; }

  /* 蜜罐：视觉与读屏都不可达 */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

  .form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .form-foot { font-size: var(--t-xs); color: var(--muted); }

  /* 搜索框 */
  .search-form { display: flex; gap: var(--s-2); }
  .search-form .input { flex: 1; min-height: 48px; font-size: var(--t-base); }
  .search-form .btn { min-height: 48px; }
}