/* lawyer.css · 律师平台 H5 三表单样式（M-03b/c/d）
   雾蓝 SaaS 视觉语言（与已验收首页 C 方案配色同源）；移动端优先（375px 基准），桌面端居中卡片。
   独立文件，不改动 main.css（冻结层纪律）。 */

:root {
  --lw-pri: #2563EB;        /* 主行动蓝 */
  --lw-pri-dark: #1D4ED8;
  --lw-bg: #F1F5F9;         /* 雾蓝灰底 */
  --lw-card: #FFFFFF;
  --lw-text: #1E293B;
  --lw-sub: #64748B;
  --lw-border: #E2E8F0;
  --lw-err: #DC2626;
  --lw-err-bg: #FEF2F2;
  --lw-ok: #16A34A;
  --lw-ok-bg: #F0FDF4;
  --lw-radius: 14px;
  --lw-shadow: 0 4px 6px -2px rgba(30, 41, 59, 0.06), 0 16px 32px -12px rgba(37, 99, 235, 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--lw-bg);
  color: var(--lw-text);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── 顶栏（轻量返回通道，非全局导航组件） ───────────────── */
.lw-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--lw-card);
  border-bottom: 1px solid var(--lw-border);
  position: sticky; top: 0; z-index: 10;
}
.lw-topbar a {
  color: var(--lw-sub); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; gap: 4px;
}
.lw-topbar a:hover { color: var(--lw-pri); }
.lw-topbar .lw-title { font-weight: 700; font-size: 16px; }

/* ── 容器 ─────────────────────────────────────────────── */
.lw-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
@media (min-width: 768px) {
  .lw-wrap { padding-top: 36px; }
}

.lw-card {
  background: var(--lw-card);
  border-radius: var(--lw-radius);
  box-shadow: var(--lw-shadow);
  padding: 24px 20px;
}

.lw-page-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.lw-page-desc { font-size: 13px; color: var(--lw-sub); margin-bottom: 20px; }

/* ── 步骤条（M-03b 多步表单） ─────────────────────────── */
.lw-steps {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.lw-steps .lw-step {
  flex: 1; text-align: center; font-size: 12px; color: var(--lw-sub);
  padding-top: 10px; position: relative;
}
.lw-steps .lw-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; border-radius: 2px; background: var(--lw-border);
  transition: background 0.25s ease;
}
.lw-steps .lw-step.active { color: var(--lw-pri); font-weight: 600; }
.lw-steps .lw-step.active::before { background: var(--lw-pri); }
.lw-steps .lw-step.done { color: var(--lw-ok); }
.lw-steps .lw-step.done::before { background: var(--lw-ok); }

/* ── 表单 ─────────────────────────────────────────────── */
.lw-field { margin-bottom: 16px; }
.lw-field label {
  display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px;
}
.lw-field label .req { color: var(--lw-err); margin-left: 2px; }
.lw-field .hint { font-size: 12px; color: var(--lw-sub); margin-top: 4px; }

.lw-field input[type="text"],
.lw-field input[type="tel"],
.lw-field input[type="number"],
.lw-field input[type="date"],
.lw-field select,
.lw-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--lw-border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--lw-text);
  background: #F8FAFC;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.lw-field input:focus,
.lw-field select:focus,
.lw-field textarea:focus {
  outline: none;
  border-color: var(--lw-pri);
  background: #fff;
}
.lw-field textarea { resize: vertical; min-height: 80px; }
.lw-field .invalid { border-color: var(--lw-err) !important; }
.lw-field .err-text { font-size: 12px; color: var(--lw-err); margin-top: 4px; display: none; }
.lw-field.has-error .err-text { display: block; }

.lw-row { display: flex; gap: 12px; }
.lw-row .lw-field { flex: 1; }

/* ── 证件上传块 ───────────────────────────────────────── */
.lw-upload {
  border: 1.5px dashed var(--lw-border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  background: #F8FAFC;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
}
.lw-upload:hover { border-color: var(--lw-pri); background: #EFF6FF; }
.lw-upload input[type="file"] { display: none; }
.lw-upload .lw-upload-label { font-size: 13px; color: var(--lw-sub); pointer-events: none; }
.lw-upload .lw-upload-label strong { color: var(--lw-pri); font-weight: 600; }
.lw-upload img.preview {
  max-width: 100%; max-height: 120px; border-radius: 8px; margin-top: 8px;
  display: none;
}
.lw-upload.has-file { border-style: solid; border-color: var(--lw-ok); background: var(--lw-ok-bg); }
.lw-upload.has-file img.preview { display: block; margin-left: auto; margin-right: auto; }
.lw-upload .file-name { font-size: 12px; color: var(--lw-ok); margin-top: 6px; word-break: break-all; }

/* ── 多选标签（擅长领域） ─────────────────────────────── */
.lw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-tags .lw-tag {
  padding: 7px 14px;
  border: 1.5px solid var(--lw-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--lw-sub);
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  user-select: none;
}
.lw-tags .lw-tag.on {
  border-color: var(--lw-pri);
  color: var(--lw-pri);
  background: #EFF6FF;
  font-weight: 600;
}

/* ── 按钮 ─────────────────────────────────────────────── */
.lw-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lw-pri), #3B82F6);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  font-family: inherit;
}
.lw-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.4); }
.lw-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.lw-btn-ghost {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border: 1.5px solid var(--lw-border);
  border-radius: 12px;
  background: #fff;
  color: var(--lw-sub);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lw-btn-ghost:hover { border-color: var(--lw-pri); color: var(--lw-pri); }

/* ── 全局提示条（429/409/错误/成功） ───────────────────── */
.lw-notice {
  display: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.lw-notice.show { display: block; }
.lw-notice.err { background: var(--lw-err-bg); border: 1px solid #FECACA; color: #991B1B; }
.lw-notice.ok { background: var(--lw-ok-bg); border: 1px solid #BBF7D0; color: #166534; }

/* ── 成功页（提交后展示 token） ────────────────────────── */
.lw-success { text-align: center; padding: 16px 0 4px; display: none; }
.lw-success.show { display: block; }
.lw-success .lw-success-icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--lw-ok-bg);
  color: var(--lw-ok);
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
}
.lw-success h2 { font-size: 18px; margin-bottom: 6px; }
.lw-success p { font-size: 13px; color: var(--lw-sub); margin-bottom: 14px; }
.lw-token-box {
  background: #F8FAFC;
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  color: var(--lw-pri-dark);
  margin-bottom: 8px;
  user-select: all;
}
.lw-token-tip { font-size: 12px; color: var(--lw-sub); margin-bottom: 18px; }

/* ── 加载态（按钮内 spinner） ──────────────────────────── */
.lw-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lw-spin 0.8s linear infinite;
  vertical-align: -3px;
  margin-right: 8px;
}
@keyframes lw-spin { to { transform: rotate(360deg); } }

/* ── 页脚免责小字 ─────────────────────────────────────── */
.lw-foot {
  text-align: center;
  font-size: 12px;
  color: var(--lw-sub);
  margin-top: 24px;
  line-height: 1.8;
}

/* ── M-09 PWA 安装引导 ───────────────────────────────── */
.lw-install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.lw-install-banner .lw-install-text { flex: 1; color: #1E40AF; text-align: left; line-height: 1.5; }
.lw-install-banner .lw-install-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: var(--lw-pri);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
}
.lw-install-banner .lw-install-close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--lw-sub);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.lw-ios-guide {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #92400E;
  text-align: left;
  line-height: 1.7;
}

/* ── M-07 全局悬浮客服按钮（H5 线，雾蓝 SaaS 风格） ────── */
.lw-kf-btn {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lw-pri), #3B82F6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 6px -2px rgba(30,41,59,0.10), 0 12px 28px -8px rgba(37,99,235,0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.lw-kf-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 10px -2px rgba(30,41,59,0.12), 0 16px 34px -8px rgba(37,99,235,0.45); }
.lw-kf-btn:disabled { opacity: 0.6; cursor: default; }
.lw-kf-btn .lw-kf-icon { font-size: 16px; }
@media (max-width: 480px) {
  .lw-kf-btn { right: 14px; bottom: 18px; padding: 11px 16px; }
}

/* ── M-07 v2 · 404 兜底轻提示 ────────────────────────── */
.lw-kf-toast {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 901;
  background: rgba(30, 41, 59, 0.92);
  color: #fff;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 240px;
  line-height: 1.5;
  box-shadow: 0 8px 20px -6px rgba(30, 41, 59, 0.35);
}
@media (max-width: 480px) {
  .lw-kf-toast { right: 14px; bottom: 76px; }
}

/* ── Phase 4 预研：头像上传组件（profile-form.html，纯增量不影响三表单） ── */
.lw-upload {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border: 1.5px dashed var(--lw-border);
  border-radius: var(--lw-radius);
  background: var(--lw-bg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s;
}
.lw-upload:hover, .lw-upload:focus-visible { border-color: var(--lw-pri); outline: none; }
.lw-upload-placeholder { color: var(--lw-sub); font-size: 13px; user-select: none; }
.lw-upload-preview { width: 100%; height: 100%; object-fit: cover; }
.lw-field.has-error .lw-upload { border-color: var(--lw-err); }

/* ── Phase 4 两步式入驻：分节与材料上传位（纯增量） ── */
.lw-section-title { font-size: 16px; font-weight: 600; margin: 22px 0 12px; }
.lw-locked { opacity: .45; pointer-events: none; user-select: none; }
.lw-material {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--lw-border);
}
.lw-material:last-child { border-bottom: none; }
.lw-mat-name { flex: 1; font-size: 14px; }
.lw-mat-name .req { color: var(--lw-err); }
.lw-mat-btn {
  flex-shrink: 0; padding: 6px 14px; font-size: 13px;
  border: 1px solid var(--lw-pri); border-radius: 8px;
  color: var(--lw-pri); background: var(--lw-card); cursor: pointer;
}
.lw-mat-btn:disabled { border-color: var(--lw-border); color: var(--lw-sub); cursor: not-allowed; }
.lw-mat-status { flex-shrink: 0; width: 92px; font-size: 12px; color: var(--lw-sub); text-align: right; }
.lw-mat-status.ok { color: var(--lw-ok); }
.lw-mat-status.err { color: var(--lw-err); }

/* ── 5-1/5-2/6-2/7-2 律师展示域（list.html / detail.html / 首页推荐位 / 合同页匹配，纯增量） ── */

/* 律师卡片（列表/推荐/匹配共用） */
.lw-lawyer-card {
  display: flex; gap: 12px; padding: 14px;
  background: var(--lw-card); border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius); cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
}
.lw-lawyer-card:hover { border-color: var(--lw-pri); box-shadow: var(--lw-shadow); }
.lw-avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--lw-bg); object-fit: cover; border: 1px solid var(--lw-border);
}
.lw-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--lw-pri); color: #fff; font-size: 20px; font-weight: 600;
}
.lw-card-main { flex: 1; min-width: 0; }
.lw-card-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lw-badge {
  display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 500;
  border-radius: 999px; background: var(--lw-bg); color: var(--lw-sub);
}
.lw-badge.role-执业律师 { background: #EFF6FF; color: var(--lw-pri); }
.lw-badge.role-实习律师 { background: var(--lw-ok-bg); color: var(--lw-ok); }
.lw-card-meta { margin-top: 4px; font-size: 13px; color: var(--lw-sub); }
.lw-card-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.lw-tag {
  padding: 2px 8px; font-size: 12px; border-radius: 6px;
  background: var(--lw-bg); color: var(--lw-sub);
}

/* 5-1 筛选区 */
.lw-filter { padding: 14px; background: var(--lw-card); border: 1px solid var(--lw-border); border-radius: var(--lw-radius); margin-bottom: 14px; }
.lw-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lw-filter-row:last-child { margin-bottom: 0; }
.lw-filter input[type="text"] {
  flex: 1; min-width: 120px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--lw-border); border-radius: 8px; background: var(--lw-bg);
}
.lw-filter input[type="text"]:focus { outline: none; border-color: var(--lw-pri); }
.lw-chip {
  padding: 5px 12px; font-size: 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--lw-border); background: var(--lw-card); color: var(--lw-sub);
}
.lw-chip.on { border-color: var(--lw-pri); color: var(--lw-pri); background: #EFF6FF; }
.lw-filter-note { font-size: 12px; color: var(--lw-sub); margin-top: 8px; }

/* 列表态 */
.lw-list { display: flex; flex-direction: column; gap: 10px; }
.lw-loadmore {
  width: 100%; padding: 11px; margin-top: 4px; font-size: 14px;
  border: 1px solid var(--lw-border); border-radius: 10px;
  background: var(--lw-card); color: var(--lw-pri); cursor: pointer;
}
.lw-loadmore:disabled { color: var(--lw-sub); cursor: not-allowed; }
.lw-empty, .lw-error-box {
  padding: 40px 20px; text-align: center; color: var(--lw-sub); font-size: 14px;
  background: var(--lw-card); border: 1px solid var(--lw-border); border-radius: var(--lw-radius);
}
.lw-error-box .retry { margin-top: 12px; }
.lw-retry-btn {
  padding: 7px 20px; font-size: 14px; border: none; border-radius: 8px;
  background: var(--lw-pri); color: #fff; cursor: pointer;
}

/* 5-2 详情页 */
.lw-detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.lw-detail-head .lw-avatar, .lw-detail-head .lw-avatar-fallback { width: 72px; height: 72px; font-size: 26px; }
.lw-detail-name { font-size: 19px; font-weight: 700; }
.lw-dl { display: flex; flex-direction: column; }
.lw-dl-row { display: flex; padding: 11px 0; border-bottom: 1px solid var(--lw-border); font-size: 14px; }
.lw-dl-row:last-child { border-bottom: none; }
.lw-dl-row dt { flex-shrink: 0; width: 96px; color: var(--lw-sub); }
.lw-dl-row dd { flex: 1; margin: 0; word-break: break-all; }
.lw-contact-box {
  margin-top: 14px; padding: 12px; border-radius: 10px;
  background: var(--lw-ok-bg); border: 1px solid #BBF7D0; font-size: 14px;
}
.lw-contact-box .row { display: flex; padding: 4px 0; }
.lw-contact-box .k { width: 76px; color: var(--lw-sub); flex-shrink: 0; }
.lw-qrcode { margin-top: 10px; text-align: center; }
.lw-qrcode img { width: 160px; height: 160px; border: 1px solid var(--lw-border); border-radius: 10px; }
.lw-intro { margin-top: 6px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }

/* 6-2 首页推荐位（横向滚动） */
.lw-rec-section { margin: 18px 0 6px; }
.lw-rec-title { font-size: 16px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.lw-rec-title .more { font-size: 13px; font-weight: 400; color: var(--lw-pri); text-decoration: none; margin-left: auto; }
.lw-rec-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.lw-rec-scroll .lw-lawyer-card { flex: 0 0 240px; flex-direction: column; align-items: flex-start; }

/* 7-2 合同页匹配区 */
.lw-match-section { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--lw-border); }
.lw-match-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.lw-match-desc { font-size: 13px; color: var(--lw-sub); margin: 0 0 12px; }
.lw-match-btn {
  padding: 10px 22px; font-size: 14px; border: none; border-radius: 10px;
  background: var(--lw-pri); color: #fff; cursor: pointer;
}
.lw-match-btn:disabled { background: var(--lw-sub); cursor: not-allowed; }
.lw-match-score { flex-shrink: 0; align-self: center; font-size: 13px; font-weight: 600; color: var(--lw-pri); }
.lw-match-reason { margin-top: 4px; font-size: 12px; color: var(--lw-sub); }

@media (max-width: 480px) {
  .lw-dl-row dt { width: 80px; }
  .lw-rec-scroll .lw-lawyer-card { flex-basis: 200px; }
}