/* ============================================================
   川合汇海 · 账户相关样式（v0.2）
   只被 login.html / register.html / me.html 引用。
   单独放一个文件，是为了不动已经通过验收的 style.css。
   配色与圆角全部沿用 :root 里的既有变量。
   ============================================================ */

.auth-wrap{ max-width:470px; margin:0 auto; }
.auth-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); padding:26px; }
@media(max-width:520px){ .auth-card{ padding:20px 18px; } }

.field{ margin-bottom:16px; }
.field > label{ display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field .hint{ font-size:12.5px; line-height:1.6; color:var(--ink-3); margin-top:6px; }
.field input[type=text],
.field input[type=email],
.field input[type=password]{
  width:100%; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:#FCFAF6; border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.field input:focus{ outline:none; background:#fff; border-color:var(--sea); box-shadow:0 0 0 3px var(--sea-soft); }
.field input[aria-invalid="true"]{ border-color:#C0392B; background:#FDF6F5; }
.field input::placeholder{ color:#B6C2C7; }
.field input:disabled{ opacity:.6; }

.code-row{ display:flex; gap:10px; }
.code-row input{ flex:1; min-width:0; letter-spacing:2px; font-family:var(--f-mono); }
.code-row .btn{ white-space:nowrap; }
@media(max-width:430px){ .code-row{ flex-direction:column; } .code-row .btn{ width:100%; } }

.form-msg{ display:none; padding:12px 14px; border-radius:var(--r-sm); font-size:14px; line-height:1.6; margin-bottom:16px; }
.form-msg.is-on{ display:block; }
.form-msg.is-err{ background:#FDF1EF; border:1px solid #E9C4BD; color:#9B2C1C; }
.form-msg.is-ok{ background:#E9F3EE; border:1px solid #BFDCCB; color:#1F6A49; }
/* 提示（不是错误）：比如"开发模式下邮件没有真的发出去"。
   用琥珀色而不是红色 —— 那不是操作失败，是配置现状。 */
.form-msg.is-warn{ background:#FDF6EC; border:1px solid #EBD3AE; color:#8A5518; }

.auth-links{ margin-top:18px; font-size:14px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; }
.auth-links a{ color:var(--sea); font-weight:600; }

/* ---------- 个人中心 ---------- */
.me-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.me-item{ background:#FCFAF6; border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; }
.me-k{ font-size:12.5px; color:var(--ink-3); margin-bottom:6px; }
.me-v{ font-size:17px; font-weight:700; color:var(--ink); word-break:break-all; }
.me-v.mono{ font-family:var(--f-mono); letter-spacing:1.5px; color:var(--sea); }

.panel{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-elev); padding:22px; margin-top:18px; }
.panel > h2{ font-size:18px; margin:0 0 6px; }
.panel > .panel-sub{ font-size:13.5px; line-height:1.7; color:var(--ink-3); margin:0 0 18px; }
.danger-zone{ border-color:#E9C4BD; background:#FEFAF9; }
.danger-zone > h2{ color:#9B2C1C; }

/* 未开发功能的诚实占位 */
.me-slot{ border:1px dashed var(--line-2); border-radius:var(--r-sm); padding:16px; background:#FCFAF6; }

/* ---------- 平台账号关联（L1 私信核验） ---------- */
.me-code{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--sea-soft); border:1px solid #C2D8DD; border-radius:var(--r-sm);
  padding:14px 16px; margin:0 0 16px; flex-wrap:wrap;
}
.me-code-k{ font-size:12.5px; color:var(--ink-2); margin-bottom:4px; }
.me-code-v{ font-family:var(--f-mono); font-size:22px; font-weight:700; letter-spacing:2px; color:var(--sea); }

.binding-list{ margin-top:16px; display:grid; gap:12px; }
.binding{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; background:#FCFAF6; }
.binding-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.binding-name{ font-weight:700; }
.binding-body{ display:flex; gap:8px; flex-wrap:wrap; }
.binding-body input[type=text]{ flex:1; min-width:170px; }
.binding-note{ font-size:12.5px; line-height:1.6; color:var(--ink-3); margin-top:9px; }

/* 给屏幕阅读器的标签（视觉上不显示，但不能没有） */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}