/* Auto LeadFlow — account access and outreach workspace. */
:root { --bg:#f4f5f1; --bg2:#fff; --bg3:#f5f7f3; --accent:#087d68; --accent2:#087d68; --text:#20332e; --text2:#667770; --wa:#087d68; --wa-dark:#066653; --green:#087d68; --red:#b5453d; --yellow:#9b711f; --border:#dfe5df; --radius:14px; --shadow:0 12px 40px #1b382c0a; }
.access-page *, .access-page *::before, .access-page *::after { box-sizing:border-box; }
.access-page { margin:0; color:var(--text); background:var(--bg); font:14px/1.65 'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif; }
.access-layout { min-height:100svh; display:grid; grid-template-columns:minmax(420px, .95fr) minmax(500px, 1.05fr); }
.access-story { position:relative; padding:50px 9%; background:#142f2a; color:#f2f4e9; display:flex; flex-direction:column; overflow:hidden; }
.access-story::after { content:''; width:440px; height:440px; position:absolute; right:-275px; top:26%; border:1px solid #a8bd9733; border-radius:50%; box-shadow:0 0 0 55px #a8bd9709,0 0 0 110px #a8bd9705; pointer-events:none; }
.access-brand { position:relative; display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; font-size:21px; font-weight:650; letter-spacing:-.5px; }
.access-brand small { display:block; color:#aebeb1; font-size:11px; font-weight:400; letter-spacing:2px; margin-top:2px; }
.access-mark { position:relative; display:grid; place-items:center; width:44px; height:44px; background:#d6e9a6; color:#142f2a; border-radius:12px; font-size:19px; letter-spacing:-2px; padding-right:2px; }
.access-mark span { position:absolute; width:8px; height:8px; right:7px; bottom:-2px; background:#d6e9a6; clip-path:polygon(0 0,100% 0,100% 100%); }
.access-intro { position:relative; z-index:1; margin:auto 0 0; padding-top:90px; }
.access-eyebrow { color:#8fa991; font-size:10px; letter-spacing:2px; font-weight:650; }
.access-intro h2 { margin:20px 0 24px; font-size:clamp(38px,4.2vw,61px); line-height:1.42; font-weight:550; letter-spacing:-2px; }
.access-intro p { margin:0; color:#b1c2b5; font-size:14px; line-height:2; }
.access-flow { position:relative; display:flex; justify-content:space-between; width:100%; max-width:390px; margin:60px 0 68px; }
.flow-line { position:absolute; height:1px; background:#6f8b6355; top:16px; left:17px; right:17px; }
.flow-step { display:flex; flex-direction:column; align-items:flex-start; color:#c5d2c6; font-size:12px; gap:12px; }
.flow-step i { width:33px; height:33px; border-radius:50%; background:#233f33; border:1px solid #627a56; display:grid; place-items:center; color:#d6e9a6; font-style:normal; font-size:10px; position:relative; }
.flow-step:last-child { align-items:flex-end; }
.flow-step:nth-child(3) { align-items:center; }
.access-caption { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#8ca692; font-size:9px; letter-spacing:1.5px; border-top:1px solid #7b97692e; padding-top:20px; }
.access-caption span:last-child { font-size:11px; letter-spacing:0; }
.access-form-area { padding:48px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.login-container,.setup-container { width:100%; max-width:390px; }
.setup-container { max-width:420px; }
.access-page .logo { margin:0 0 34px; }
.access-page .logo .access-eyebrow { color:var(--accent); font-size:10px; }
.access-page .logo h1 { margin:9px 0 9px; font-size:32px; font-weight:600; letter-spacing:-1px; color:var(--text); }
.access-page .logo p { margin:0; color:var(--text2); font-size:14px; }
.access-page .form-group { margin-bottom:21px; }
.access-page label { display:block; margin-bottom:8px; font-size:13px; font-weight:600; }
.access-page input[type=text],.access-page input[type=password] { width:100%; height:49px; padding:0 14px; background:#fff; border:1px solid #d8e0d7; border-radius:9px; font:inherit; font-size:14px; color:var(--text); outline:none; transition:border-color .15s,box-shadow .15s; }
.access-page input::placeholder { color:#98a49c; }
.access-page input:focus { border-color:#087d68; box-shadow:0 0 0 3px #087d6810; }
.access-page .btn { width:100%; min-height:49px; margin-top:8px; border:1px solid #087d68; border-radius:9px; background:#087d68; color:#fff; font:600 14px/1.5 'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif; cursor:pointer; transition:background .15s,transform .15s; }
.access-page .btn:hover { background:#066653; }
.access-page .btn:active { transform:translateY(1px); }
.access-page .btn:disabled { background:#e1e7df; border-color:#e1e7df; color:#88978d; cursor:not-allowed; }
.access-page .info-badge { padding:10px 0 18px; margin-top:-13px; color:#7c8b80; font-size:11px; }
.access-page .info-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:#91aa78; display:inline-block; vertical-align:middle; margin-right:7px; }
.access-page .footer { margin-top:25px; color:var(--text2); font-size:12px; }
.access-page .forgot-reset { color:#536b5b; cursor:pointer; border-bottom:1px solid #b7c8ba; padding-bottom:2px; }
.access-page .version { margin-top:45px; color:#93a096; font-size:10px; border-top:1px solid var(--border); padding-top:18px; letter-spacing:.2px; }
.access-page .version strong { font-weight:500; color:#657b6d; }
.access-page .error-message,.access-page .success-message,.access-page .lockout-message { display:none; padding:12px 14px; margin-bottom:18px; border-radius:9px; border:1px solid #f0d9d4; background:#fff1ed; color:#a94335; font-size:12px; }
.access-page .success-message { background:#edf5e9; border-color:#d3e4cb; color:#437137; }
.access-page .lockout-message { background:#fff8e9; border-color:#eddfbd; color:#8e6c27; }
.access-page .lockout-message strong { display:block; }
.access-page .countdown { font-variant-numeric:tabular-nums; font-size:18px; }
.access-page .reset-help { display:none; border:1px solid #e2dfc7; background:#f8f7e9; padding:13px; margin-top:15px; border-radius:9px; color:#766f3b; font-size:11px; }
.access-page .reset-help code { display:block; font:10px/1.5 monospace; background:#efefd9; padding:10px; margin:10px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.access-page .reset-help button { border:0; border-radius:6px; background:#727c45; color:white; padding:6px 10px; cursor:pointer; }
.access-page .welcome-box { background:#eef2e9; border:1px solid #dfe6d7; border-radius:10px; padding:14px 16px; margin-bottom:23px; }
.access-page .welcome-box h3 { font-size:13px; margin:0 0 5px; color:#42593a; }
.access-page .welcome-box p { font-size:12px; margin:0; color:#667770; }
.access-page .field-hint { color:var(--text2); margin-top:6px; font-size:11px; }
.access-page .password-tips { border-top:1px solid var(--border); padding:15px 0 10px; color:var(--text2); font-size:11px; }
.access-page .password-tips strong { color:#42593a; font-weight:500; }
.access-page .password-tips ul { margin:5px 0; padding-left:16px; }
.access-page .password-strength { margin-top:12px; display:none; }
.access-page .password-strength.visible { display:block; }
.access-page .strength-label { color:var(--text2); font-size:11px; margin-bottom:7px; }
.access-page .strength-bar-container { height:4px; background:#e1e7df; border-radius:3px; overflow:hidden; }
.access-page .strength-bar { height:100%; transition:width .2s; width:0; }
.access-page .strength-bar.weak { width:25%; background:var(--red); }.access-page .strength-bar.fair { width:50%; background:var(--yellow); }.access-page .strength-bar.good { width:75%; background:#5e8b6a; }.access-page .strength-bar.strong { width:100%; background:var(--green); }
.access-page .strength-requirements { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px; color:var(--text2); margin-top:10px; }
.access-page .requirement::before { content:'○'; margin-right:4px; }.access-page .requirement.met { color:var(--green); }.access-page .requirement.met::before { content:'✓'; }
.access-page .update-notice { margin-top:12px; border:1px solid var(--border); border-radius:8px; background:#edf4e5; color:#506b3c; padding:12px; }
.access-page :focus-visible { outline:2px solid #78a86e; outline-offset:3px; }
/* Outreach uses the same compact, paper-like workspace as the admin pages. */
body.lf-user { font-family:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); }
.lf-user .user-quicklinks { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 32px; border-bottom:1px solid var(--border); font-size:11px; }
.lf-user.lf-workspace .user-quicklinks { display:none; }
.lf-user .header { padding:30px 32px 25px; background:transparent; border:0; gap:14px; align-items:center; }
.lf-user .user-heading { flex:1; min-width:0; }
.lf-user .user-eyebrow { display:block; margin-bottom:7px; font-size:10px; letter-spacing:1.5px; color:#829083; }
.lf-user .header h1 { font-size:27px; color:var(--text); background:none; -webkit-text-fill-color:initial; font-weight:600; letter-spacing:-.7px; }
.lf-user .header p { margin:7px 0 0; font-size:12px; color:var(--text2); }
.lf-user .header .phone-badge { color:#50664e; background:#eaf0e3; border:1px solid #d6e0cb; border-radius:7px; padding:7px 11px; font-size:11px; }
.lf-user .header .btn-app,.lf-user .btn-send,.lf-user .modal .btn-submit { background:#087d68; border:1px solid #087d68; box-shadow:none; border-radius:8px; }
.lf-user .header .btn-logout { background:#fff; }
.lf-user .main { max-width:1600px; margin:0 auto 30px; padding:0 32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.5fr); gap:20px; align-items:start; }
.lf-user #globalAlert { grid-column:1/-1; margin:0; }
.lf-user .card { margin:0; border-radius:12px; box-shadow:0 3px 14px #20332e03; }
.lf-user .card-header { padding:20px 22px; font-weight:600; font-size:14px; }
.lf-user .card-body { padding:20px 22px; }
.lf-user .filter-label { font-size:10px; letter-spacing:.3px; color:#78897b; }
.lf-user .chip { border-radius:6px; padding:5px 10px; font-size:11px; background:#f8faf6; }
.lf-user .chip:has(input:checked) { background:#e6efe0; color:#3c6837; border-color:#c5d7b8; box-shadow:none; }
.lf-user .chip:hover,.lf-user .btn-clear-filter:hover { background:#f0f5eb; }
.lf-user .toolbar input[type=text],.lf-user .form-group textarea,.lf-user .form-group select,.lf-user .modal input { background:#fff; border-color:#d9e2d8; border-radius:8px; }
.lf-user .toolbar input[type=text]:focus,.lf-user .form-group textarea:focus,.lf-user .form-group select:focus,.lf-user .modal input:focus { border-color:#087d68; box-shadow:0 0 0 3px #087d6810; }
.lf-user .contacts-table th { background:#f5f7f2; color:#6e7e71; font-weight:500; font-size:10px; text-transform:none; letter-spacing:0; }
.lf-user .contacts-table td { font-size:12px; padding:12px; }
.lf-user .contacts-table tr:hover td { background:#f8faf6; }
.lf-user .table-scroll { border-radius:8px; max-height:490px; }
.lf-user .select-all-row { font-size:11px; }
.lf-user .selected-count { color:var(--wa); }
.lf-user .send-mode-toggle { padding:4px; border:1px solid var(--border); border-radius:8px; background:#f4f6f0; }
.lf-user .mode-btn { font-family:inherit; border-radius:6px; color:var(--text2); background:transparent; }
.lf-user .mode-btn.active { color:#375936; background:#fff; box-shadow:0 1px 4px #18372810; }
.lf-user .form-group label { font-size:12px; color:#435b48; }
.lf-user .form-group textarea { min-height:150px; font-size:13px; }
.lf-user .form-group select { font-size:13px; }
.lf-user .btn-send { font-family:inherit; font-size:12px; font-weight:550; min-height:46px; }
.lf-user .progress-bar-fill { background:#087d68; }
.lf-user .modal-overlay { background:#142f2a77; backdrop-filter:blur(5px); padding:20px; }
.lf-user .modal { width:100%; max-width:410px; border-radius:16px; padding:30px; box-shadow:0 24px 90px #142f2a2e; }
.lf-user .modal h3 { color:var(--text); font-size:20px; }
.lf-user .modal p { color:var(--text2); line-height:1.7; font-size:12px; }
.lf-user .modal .btn-submit { font-family:inherit; }
.lf-user .layui-layer { background:#fff; color:var(--text); border-radius:12px; box-shadow:0 20px 70px #142f2a33; }
.lf-user .layui-layer-title { background:#f6f8f3; border-color:var(--border); color:var(--text); }
.lf-user .layui-layer-btn a { border-radius:7px; background:#f3f6f0; border-color:var(--border); color:var(--text); }
.lf-user .layui-layer-btn .layui-layer-btn0 { background:#087d68; border-color:#087d68; color:#fff; }
@media (max-width:1100px) { .lf-user .main { grid-template-columns:minmax(0,1fr); }.lf-user .header { flex-wrap:wrap; }.lf-user .user-heading { flex-basis:100%; } }
@media (max-width:900px) { .access-layout { grid-template-columns:minmax(310px,.9fr) minmax(390px,1.1fr); }.access-story { padding:35px 32px; }.access-form-area { padding:36px; }.access-intro h2 { font-size:37px; }.access-flow { margin:45px 0 55px; }.access-caption { flex-direction:column; align-items:flex-start; } }
@media (max-width:720px) { .access-layout { display:block; min-height:100svh; }.access-story { min-height:0; padding:24px 27px 27px; border-radius:0 0 25px 25px; }.access-brand { font-size:18px; }.access-brand small { font-size:10px; }.access-mark { width:38px; height:38px; font-size:17px; }.access-intro { padding-top:29px; }.access-intro>.access-eyebrow,.access-intro p,.access-flow,.access-caption { display:none; }.access-intro h2 { margin:0; font-size:29px; letter-spacing:-1px; line-height:1.5; }.access-intro h2 br { display:none; }.access-form-area { padding:35px 27px 28px; align-items:center; }.access-page .logo { margin-bottom:28px; }.access-page .logo h1 { font-size:26px; }.access-page .logo p { font-size:12px; }.access-page .version { margin-top:30px; }.setup-container { max-width:390px; }.lf-user .header { padding:24px 18px 20px; }.lf-user .main { padding:0 16px; gap:16px; }.lf-user .card-header,.lf-user .card-body { padding:17px; }.lf-user .table-scroll { overflow-x:auto; }.lf-user .contacts-table { min-width:570px; }.lf-user .user-quicklinks { padding:12px 18px; gap:8px; }.lf-user .header h1 { font-size:24px; }.lf-user .header .btn-app,.lf-user .header .btn-logout { padding:7px 10px; font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .access-page *, .lf-user * { transition:none !important; animation:none !important; } }
.access-page #global-lang-switch,.lf-user #global-lang-switch { background:#eef2e9 !important; border:1px solid #d9e2d2 !important; border-radius:8px !important; box-shadow:none !important; padding:3px !important; }
.access-page #global-lang-switch button,.lf-user #global-lang-switch button { background:transparent !important; color:#819078 !important; font-family:inherit; border-radius:5px !important; box-shadow:none !important; font-weight:500 !important; font-size:10px !important; min-width:44px !important; padding:0 9px !important; }
html[lang=zh-CN] #global-lang-zh,html[lang=en] #global-lang-en { background:#fff !important; color:#45693e !important; }
@media(max-width:720px) { .access-page #global-lang-switch { top:27px !important; right:22px !important; }.access-page .access-brand small { letter-spacing:.5px; }.access-page .access-brand { font-size:16px; }.access-page .access-brand { gap:9px; }.access-page .access-brand>span:last-child { max-width:145px; } }
@media(max-width:380px) { .access-page #global-lang-switch { top:25px !important; right:15px !important; }.access-page #global-lang-switch button { min-width:29px !important; padding:0 4px !important; font-size:9px !important; }.access-page .access-story { padding-left:21px; }.access-page .access-brand { font-size:14px; } }
@media(max-width:720px) { .access-page input[type=text],.access-page input[type=password],.lf-user .toolbar input[type=text],.lf-user .form-group textarea,.lf-user .form-group select,.lf-user .modal input { font-size:16px; } }
@media(max-width:720px) { .lf-user .user-heading { flex-basis:calc(100% - 60px); }.lf-user .header { align-items:center; gap:12px; }.lf-user .header h1 { font-size:22px; }.lf-user .header .user-eyebrow { font-size:8px; }.lf-user .header #global-lang-switch { margin-left:0 !important; }.lf-user.lf-embedded .user-heading { flex-basis:100%; } }