/* ============================================================
   前后台共用组件（site.css 与 app.css 之外的第三份）
   引入方：layouts/site.blade.php、layouts/app.blade.php、auth/login|register|forgot
   只放「两套外壳都会渲染」的东西：表单控件、验证码框、徽标、页签、面包屑、空状态。
   判断标准：删掉它，后台或前台会有一边掉样式，它就属于这里。
   其余一律归位——前台 → site.css，后台 → app.css。
   ============================================================ */
.crumb{font-size:12px;color:var(--faint);margin-bottom:6px}
.crumb a:hover{color:var(--gold)}

/* ---------------- 表单 ---------------- */
.field{margin-bottom:14px}
.field>label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:500}
.field>label .req{color:var(--red);margin-left:2px}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=datetime-local],
input[type=number],input[type=tel],input[type=search],input[type=time],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:#fff;
  font-size:13.5px;color:var(--text);font-family:inherit;transition:.15s;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--ink-3);box-shadow:0 0 0 3px var(--ring)}
input::placeholder,textarea::placeholder{color:#b4bdc9}
textarea{min-height:88px;resize:vertical;line-height:1.7}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7787' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-grid .full{grid-column:1/-1}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.check{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;color:var(--text)}
.check input{width:15px;height:15px;accent-color:var(--ink)}
.help{font-size:11.5px;color:var(--faint);margin-top:4px}
.err{font-size:12px;color:var(--red);margin-top:4px}
.form-actions{display:flex;gap:10px;padding-top:6px;border-top:1px solid var(--line-2);margin-top:18px;padding-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;background:#fff;cursor:pointer}
.chip input{display:none}
.chip:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------------- 徽标 ---------------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:500;line-height:18px;white-space:nowrap}
.badge-gray{background:#f0f2f5;color:#5c6878}
.badge-blue{background:var(--blue-soft);color:var(--blue)}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-amber{background:var(--amber-soft);color:var(--amber)}
.badge-red{background:var(--red-soft);color:var(--red)}
.badge-purple{background:var(--purple-soft);color:var(--purple)}
.badge-teal{background:var(--teal-soft);color:var(--teal)}
.badge-indigo{background:var(--indigo-soft);color:var(--indigo)}
.badge-gold{background:var(--gold-soft);color:var(--gold-deep)}
.badge-outline{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ---------------- 标签页 ---------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:9px 14px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--gold);font-weight:500}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{padding:4px 11px;border-radius:20px;font-size:12.5px;color:var(--muted);border:1px solid transparent}
.pill:hover{background:#f2f4f7}
.pill.on{background:var(--ink);color:#fff}

/* ---------------- 空状态 ---------------- */
.empty{padding:44px 20px;text-align:center;color:var(--faint)}
.empty svg{opacity:.4;margin-bottom:10px}
.empty p{margin:0;font-size:13px}

/* 标签页与胶囊 */
.pill.on{background:var(--gold-soft);color:var(--gold-deep);font-weight:600}
.tabs a.on{color:var(--gold-deep);border-bottom-color:var(--gold)}

/* 后台窄屏兜底：侧栏固定 236px，后台不做移动版；这里只保证不产生整页横向拖动 */
@media(max-width:720px){
    .field input,.field select,.field textarea{max-width:100%}}

/* ================= 验证码：手机短信 / 邮箱邮件共用 =================
   会员登录注册（.sf-auth-card）、后台登录与律所开通（.field）两套表单都在用，
   所以这里不依赖任何一个外层容器的类名。 */
.otp-field{margin:0}
.otp-line{display:flex;align-items:stretch;gap:8px}
.otp-line input[type=text],
.otp-line input[type=email]{flex:1 1 0;min-width:0;width:auto}
.otp-send{flex:none;height:42px;padding:0 14px;border:1px solid rgba(18,32,46,.16);border-radius:3px;
  background:#fff;font-size:12.5px;color:#3d4a5a;cursor:pointer;white-space:nowrap;transition:.15s}
.otp-send:hover{border-color:var(--gold);color:var(--gold-deep)}
.otp-send:disabled{cursor:not-allowed;opacity:.62}
.otp-send.is-wait{color:var(--s-meta)}
.otp-msg{margin:0 0 14px;padding:9px 12px;font-size:12.5px;line-height:1.75;border-radius:3px;
  background:#f5f7fa;color:#4b5866;border:1px solid #e3e8ef}
.otp-msg.is-ok{background:#eef6f0;border-color:#d3e7db;color:#276b48}
.otp-msg.is-err{background:#fdf0ef;border-color:#f3d6d3;color:#a83a31}
.otp-err{margin-top:6px;font-size:11.5px;line-height:1.7;color:#b4433a}
@media(max-width:420px){
  .otp-line{flex-wrap:wrap}
  .otp-send{width:100%;height:38px}}