/* 表单：下划线输入（总站语言）、自绘勾选、选项胶囊、自定义下拉
   不用原生 select 的下拉层（系统蓝高亮），改用 ui-select.js 的弹层 */
.form{display:grid;gap:var(--sp-5)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field>label,.field .label{font-size:var(--fs-small);font-weight:500;color:var(--ink);line-height:1.6}
.field .opt-mark{margin-left:6px;font-weight:400;font-size:var(--fs-tiny);color:var(--ink-faint)}

.input,.textarea{width:100%;min-height:46px;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  font-size:16px;line-height:1.6;color:var(--ink);transition:border-color var(--t-fast) var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint);opacity:1}
.input:hover,.textarea:hover{border-bottom-color:var(--line)}
.textarea{min-height:112px;padding:12px 0;resize:vertical}
/* 大输入框：一段话说清楚的场景 */
.textarea.boxed{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-2);background:rgba(238,232,220,.4)}
.textarea.boxed:hover{border-color:var(--line)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-bottom-color:var(--risk)}
.textarea.boxed[aria-invalid="true"]{border-color:var(--risk-line)}
.kbd .input:focus-visible,.kbd .textarea:focus-visible{border-bottom-color:var(--focus-ink);box-shadow:inset 0 -1px 0 var(--focus-ink)}
.kbd .textarea.boxed:focus-visible,.kbd .search .input:focus-visible{border-color:var(--focus-ink);box-shadow:inset 0 0 0 1px var(--focus-ink)}
.input[readonly]{color:var(--ink-faint);border-bottom-style:dashed}
.hint{font-size:var(--fs-meta);color:var(--ink-faint);line-height:1.65}
.field-error{font-size:var(--fs-meta);color:var(--risk);line-height:1.65}
.form-error{padding:10px 14px;border-left:2px solid var(--risk);background:var(--risk-bg);font-size:var(--fs-small);color:var(--risk);line-height:1.7}
.counter{justify-self:end;font-family:var(--font-data);font-size:var(--fs-tiny);color:var(--ink-faint)}

/* 密码：显示/隐藏 */
.pw{position:relative}
.pw .input{padding-right:56px}
.field:has(input[type="password"],input[type="email"],input[type="tel"],input[autocomplete="username"],input[autocomplete="current-password"],input[autocomplete="new-password"])>label{text-align:center}
.input:is([type="password"],[type="email"],[type="tel"],[autocomplete="username"],[autocomplete="current-password"],[autocomplete="new-password"]){text-align:center}
.pw .input:is([autocomplete="current-password"],[autocomplete="new-password"]){padding-left:56px;padding-right:56px}
.pw-toggle{position:absolute;right:0;bottom:1px;min-height:var(--touch);min-width:var(--touch);padding:0 4px;font-size:var(--fs-meta);color:var(--ink-faint);text-align:right}
.pw-toggle:hover{color:var(--ink)}
.rules{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-meta);color:var(--ink-faint);line-height:1.7}
.rules li{display:inline-flex;align-items:center;gap:6px}
.rules li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);transition:background-color var(--t-fast) var(--ease)}
.rules li.met{color:var(--ok)}
.rules li.met::before{background:var(--ok)}

/* 勾选：墨底纸色勾，不用金、蓝、白 */
.check,.radio{appearance:none;-webkit-appearance:none;flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:.3em;
  border:1px solid var(--ink-faint);background:transparent;cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.check{border-radius:var(--r-1)}
.radio{border-radius:50%}
.check::after{content:"";width:9px;height:5px;border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:translateY(-1px) rotate(-45deg);opacity:0;transition:opacity var(--t-fast) var(--ease)}
.radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-soft);opacity:0;transform:scale(.5);transition:opacity var(--t-fast) var(--ease),transform var(--t-base) var(--ease)}
.check:checked{background:var(--ink-soft);border-color:var(--ink-soft)}
.check:checked::after{opacity:1}
.radio:checked{border-color:var(--ink-soft)}
.radio:checked::after{opacity:1;transform:none}
.check:hover,.radio:hover{border-color:var(--ink-soft)}
.check[aria-invalid="true"]{border-color:var(--risk)}
.check-row{display:flex;align-items:flex-start;gap:10px;min-height:var(--touch);padding:10px 0;font-size:var(--fs-small);line-height:1.7;color:var(--ink-soft);cursor:pointer}

/* 开关：旁边必须有文字状态 */
.switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:40px;height:24px;border-radius:var(--r-pill);background:rgba(35,33,28,.14);cursor:pointer;transition:background-color var(--t-base) var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:0 1px 2px rgba(35,33,28,.24);transition:transform var(--t-base) var(--ease)}
.switch:checked{background:var(--ink-soft)}
.switch:checked::after{transform:translateX(16px)}

/* 选项胶囊：少量选项时代替下拉；选中只改底色与字重 */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{display:inline-flex;align-items:center;gap:8px;min-height:var(--touch);padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--fs-small);color:var(--ink-soft);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.choice:hover{border-color:var(--line-strong);color:var(--ink)}
.choice[aria-checked="true"],.choice[aria-pressed="true"]{background:var(--select-bg);color:var(--ink);font-weight:500}
.choice[aria-checked="true"]::before,.choice[aria-pressed="true"]::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-soft)}

/* 自定义下拉触发器（外观同下划线输入框） */
.select-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.6;color:var(--ink);text-align:left;transition:border-color var(--t-fast) var(--ease)}
.select-btn:hover{border-bottom-color:var(--line-strong)}
.select-btn .ph{color:var(--ink-faint)}
.select-btn .i{width:14px;height:14px;color:var(--ink-faint);transition:transform var(--t-base) var(--ease)}
.select-btn[aria-expanded="true"] .i{transform:rotate(180deg)}
.select-btn[aria-invalid="true"]{border-bottom-color:var(--risk)}
.kbd .select-btn:focus-visible{box-shadow:inset 0 -1px 0 var(--focus-ink);background:var(--focus-bg)}

/* 搜索框 */
.search{position:relative;flex:1 1 260px;max-width:420px}
.search .input{min-height:42px;padding:8px 14px 8px 40px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(238,232,220,.45);font-size:var(--fs-small)}
.search .input:hover{border-color:var(--line-strong)}
.search .i{position:absolute;left:15px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
@media (pointer:coarse){.search .input{min-height:var(--touch)}}