/* 三张登录页（/login.html、/lead-provider-login.html、/yjs-login.html）共用的样式。
 *
 * 取自原型 vendor/demo/客户服务系统/html/lead-provider.html 的登录屏与注册屏，
 * 变量与数值照抄 ——「与系统整体风格保持一致」的判据就是那份原型：原型里只有
 * 这一套登录界面（绿色渐变底 + 白卡片 + 手机号/验证码），各角色页的主色也都是它。
 * 原型行号：变量 10–42，基础 46–47，页头/卡片 84–93，表单/按钮 98–126，
 * 弹窗/提示 167–184，单选/步骤条 206–225，上传 270–285，登录屏 339–360，提示条 375–377。
 *
 * 原型之外新加的只有 .login-error / .login-hint / .login-switch / .register-*：
 * 原型的报错全走 toast，而内部员工与预结算两张页没有 toast，报错直接写在卡片里。
 */
:root {
  --primary: #4CAF50;
  --primary-light: #E8F5E9;
  --primary-dark: #388E3C;
  --primary-darker: #2E7D32;
  --success: #4CAF50;
  --warning: #FFC107;
  --warning-light: #FFF8E1;
  --danger: #F44336;
  --danger-light: #FEF2F2;
  --secondary: #1E88E5;
  --secondary-light: #E3F2FD;
  --bg: #F9FAFB;
  --card-bg: #fff;
  --text: #111827;
  --text-secondary: #6B7280;
  --text-light: #374151;
  --text-hint: #9CA3AF;
  --border: #D1D5DB;
  --border-light: #E5E7EB;
  --border-lighter: #F3F4F6;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { min-height:100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; font-size:16px; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6; }
button, input, select { font-family:inherit; }
[hidden] { display:none !important; }

/* ===== 登录屏 ===== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg, #4CAF50 0%, #388E3C 100%); padding:20px; }
.login-container { width:100%; max-width:400px; }
.login-logo { text-align:center; color:#fff; margin-bottom:36px; }
.login-logo .logo-icon { font-size:40px; margin-bottom:10px; display:block; }
.login-logo .logo-title { font-size:20px; font-weight:600; }
.login-logo .logo-subtitle { font-size:16px; opacity:0.8; margin-top:4px; }
.login-card { background:#fff; border-radius:var(--radius-lg); padding:28px 24px; box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.login-card h3 { font-size:16px; font-weight:600; text-align:center; margin-bottom:24px; color:var(--text); }
.login-input-group { position:relative; margin-bottom:16px; }
.login-input-group .input-prefix { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-secondary); font-size:16px; }
.login-input { width:100%; padding:12px 12px 12px 38px; border:1px solid var(--border); border-radius:var(--radius); font-size:16px; outline:none; transition:border-color .15s; }
.login-input:focus { border-color:var(--primary); }
.login-code-row { display:flex; gap:10px; }
.login-code-row .login-input { flex:1; }
.login-code-btn { white-space:nowrap; padding:0 14px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius); font-size:16px; cursor:pointer; transition:background .15s; min-width:110px; }
.login-code-btn:hover { background:var(--primary-dark); }
.login-code-btn:disabled { opacity:.5; cursor:not-allowed; }
.login-submit { width:100%; padding:12px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius); font-size:16px; font-weight:500; cursor:pointer; transition:background .15s; margin-top:8px; }
.login-submit:hover { background:var(--primary-dark); }
.login-submit:disabled { opacity:.6; cursor:not-allowed; }
.login-footer { text-align:center; margin-top:18px; font-size:16px; color:#fff; }
.login-footer span { opacity:0.6; }
.login-error { margin:-8px 0 16px; padding:8px 12px; font-size:14px; line-height:1.5; color:var(--danger); background:var(--danger-light); border-radius:var(--radius); }
.login-hint { margin:-6px 0 4px; font-size:14px; color:var(--primary-dark); }
.login-switch { text-align:center; margin-top:16px; font-size:16px; color:var(--text-secondary); }
.login-switch a { color:var(--primary); font-weight:500; text-decoration:none; cursor:pointer; }

/* ===== 注册屏（线索提供方页） ===== */
.register-page { min-height:100vh; background:var(--bg); padding:16px; }
.register-inner { max-width:720px; margin:0 auto; }
.page-header { display:flex; align-items:center; padding:0 0 14px 0; gap:10px; }
.page-header .back-btn { width:32px; height:32px; border-radius:var(--radius); border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-light); transition:all .15s; }
.page-header .back-btn:hover { color:var(--text); background:var(--border-lighter); }
.page-header .back-btn [class^="ri-"] { font-size:18px; }
.page-title { font-size:16px; font-weight:600; color:var(--text); }
.card { background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--border-light); padding:24px; margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,0.05); transition:all .3s ease-in-out; }
.card:hover { box-shadow:0 4px 16px rgba(76,175,80,0.15); border-color:var(--primary); transform:translateY(-2px); }

.form-group { margin-bottom:16px; }
.form-label { display:block; margin-bottom:4px; font-size:16px; color:var(--text-light); font-weight:500; }
.form-label .required { color:var(--danger); margin-right:2px; }
.form-input,.form-select { width:100%; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text); transition:border-color .15s; outline:none; font-size:14px; height:40px; }
.form-input::placeholder { color:var(--text-hint); }
.form-input:hover,.form-select:hover { border-color:#B8B8B8; }
.form-input:focus,.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(76,175,80,0.1); }
.form-input[readonly],.form-input:disabled { background:var(--border-lighter); color:var(--text-secondary); }
.form-hint { font-size:16px; color:var(--text-secondary); margin-top:4px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 16px; border-radius:var(--radius); border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; font-size:16px; font-weight:500; transition:all .15s ease-in-out; white-space:nowrap; height:40px; }
.btn:hover { border-color:var(--primary); color:var(--primary); }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; box-shadow:0 4px 12px rgba(76,175,80,0.3); transform:translateY(-1px); }
.btn-primary:active { background:var(--primary-darker); }
.btn-outline { background:transparent; border-color:var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary-light); color:var(--primary); }
.btn-lg { padding:10px 24px; font-size:14px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

.radio-group { display:flex; flex-wrap:wrap; gap:8px; }
.radio-item { display:flex; align-items:center; gap:4px; cursor:pointer; padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius); font-size:16px; background:#fff; transition:all .15s; }
.radio-item:hover { border-color:var(--primary); color:var(--primary); }
.radio-item.selected { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }

.steps { display:flex; margin-bottom:20px; background:#fff; border-radius:var(--radius-lg); padding:16px 12px; border:1px solid var(--border-light); box-shadow:0 1px 2px rgba(0,0,0,0.05); }
.step { flex:1; text-align:center; position:relative; }
.step .step-dot { width:28px; height:28px; border-radius:50%; background:var(--border-light); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:500; margin-bottom:4px; transition:all .15s; }
.step.active .step-dot { background:var(--primary); color:#fff; }
.step.done .step-dot { background:var(--success); color:#fff; }
.step .step-text { font-size:16px; color:var(--text-secondary); }
.step.active .step-text { color:var(--primary); font-weight:500; }
.step-connector { position:absolute; top:14px; left:calc(50% + 16px); right:calc(-50% + 16px); height:2px; background:var(--border-light); }
.step.done .step-connector { background:var(--success); }

.upload-area { border:2px dashed var(--border); border-radius:var(--radius); padding:24px; text-align:center; cursor:pointer; transition:border-color .15s; background:#FAFAFA; }
.upload-area:hover { border-color:var(--primary); }
.upload-area .upload-icon { font-size:24px; margin-bottom:6px; color:var(--text-secondary); }
.upload-area .upload-text { font-size:16px; color:var(--text-secondary); }
.idcard-upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.upload-preview { position:relative; display:inline-block; }
.upload-preview img { max-width:100%; max-height:120px; border-radius:var(--radius); border:1px solid var(--border-light); }
.upload-preview .upload-remove { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--danger); color:#fff; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; line-height:1; }
.upload-area.has-file { border-color:var(--primary); border-style:solid; padding:8px; background:var(--primary-light); }
.upload-area.locked { cursor:default; }

.alert-card { background:var(--warning-light); border-radius:var(--radius); padding:12px 16px; display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:16px; color:#92400E; }
.alert-card i { font-size:16px; }
.alert-card-blue { background:var(--primary-light); color:#065F46; }

/* ===== 弹窗与提示 ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:all .2s; }
.modal-overlay.show { opacity:1; visibility:visible; }
.modal-content { background:#fff; border-radius:var(--radius-xl); width:100%; max-width:420px; max-height:85vh; overflow-y:auto; transform:translateY(10px); transition:all .2s; box-shadow:0 20px 25px rgba(0,0,0,0.1); }
.modal-overlay.show .modal-content { transform:translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-light); }
.modal-header h3 { font-size:16px; font-weight:600; color:var(--text); }
.modal-close { width:28px; height:28px; border:none; background:none; cursor:pointer; font-size:16px; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; border-radius:var(--radius); }
.modal-close:hover { color:var(--text); }
.modal-body { padding:16px 24px; }
.modal-footer { padding:12px 24px; border-top:1px solid var(--border-light); display:flex; justify-content:flex-end; gap:8px; }
.toast { position:fixed; top:16px; left:50%; transform:translateX(-50%) scale(0.9); padding:12px 24px; border-radius:var(--radius); color:#fff; font-size:16px; z-index:2000; opacity:0; transition:all .2s; pointer-events:none; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); background:#1F2937; max-width:calc(100vw - 32px); }
.toast.show { opacity:1; transform:translateX(-50%) scale(1); }

@media (max-width: 768px) {
  html, body { font-size:14px; }
  .btn-group { flex-direction:column; }
  .btn-group .btn { width:100%; }
}
@media (max-width: 480px) {
  .idcard-upload-grid { grid-template-columns:1fr; }
}