/* ssp-ui.css — 奇异摩尔 自助密码服务 定制外观 (v2 light, 20261107) */
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  --blue:#0046d9; --blue-hover:#0038ad;
  --purple:#7700c9; --magenta:#fa0198; --cyan:#05c9c9;
  --text-1:#222222; --text-2:#666666; --text-3:#999999;
  --border:#e7e7e7; --bg:#f7f8fa;
  --red:#d9382e; --red-bg:#fdf3f2; --green:#1f8a3b; --green-bg:#f2f9f4;
}

body{
  font-family:"Manrope","Microsoft YaHei","PingFang SC",Arial,sans-serif;
  background:var(--bg); color:var(--text-1);
  min-height:100vh; display:flex; flex-direction:column;
}

/* ===== 顶栏 ===== */
.ssp-topbar{background:#fff;border-bottom:1px solid var(--border)}
.ssp-head-in{max-width:1200px;margin:0 auto;padding:0 32px;height:60px;
  display:flex;align-items:center;gap:18px}
.ssp-head-in img{height:26px;display:block}
.ssp-tag{font-size:12px;color:var(--text-3);letter-spacing:1.5px;
  white-space:nowrap;border-left:1px solid var(--border);padding-left:18px;line-height:1}
.ssp-brandline{height:3px;width:100%;
  background:linear-gradient(90deg,var(--blue) 0%,var(--purple) 38%,var(--magenta) 68%,var(--cyan) 100%)}

/* ===== 容器 ===== */
.ssp-container{max-width:520px;margin:0 auto;padding:52px 20px 64px;width:auto}

/* ===== 标题 ===== */
.ssp-h1{font-size:24px;font-weight:600;color:var(--text-1);letter-spacing:.5px;margin-bottom:8px}
.ssp-desc{font-size:13px;color:var(--text-2);margin-bottom:28px}

/* ===== 卡片 ===== */
.ssp-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:32px 32px 28px}

/* ===== 横幅 ===== */
.ssp-banner{border-radius:6px;padding:11px 14px;font-size:13px;line-height:1.65;margin-bottom:18px}
.ssp-banner.ssp-danger,.ssp-banner.ssp-err,.ssp-banner.ssp-high,
.ssp-banner.ssp-warning,.ssp-banner.ssp-medium{background:var(--red-bg);color:var(--red);border:1px solid #f3d8d6}
.ssp-banner.ssp-success,.ssp-banner.ssp-ok,.ssp-banner.ssp-low{background:var(--green-bg);color:var(--green);border:1px solid #d5ead9}

/* ===== 表单 ===== */
.ssp-field{margin-bottom:18px}
.ssp-field label{display:block;font-size:13px;color:var(--text-1);margin-bottom:7px;font-weight:500}
.ssp-ctrl{position:relative}
.ssp-input{width:100%;height:42px;border:1px solid var(--border);border-radius:6px;
  background:#fff;color:var(--text-1);font-size:14px;outline:none;padding:0 12px;
  transition:border-color .15s, box-shadow .15s}
.ssp-input::placeholder{color:#b3b8bf}
.ssp-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,70,217,.10)}
.ssp-ctrl .ssp-input{padding-right:40px}
.ssp-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;
  background:none;cursor:pointer;padding:6px;color:var(--text-3);display:flex}
.ssp-eye:hover{color:var(--text-1)}
.ssp-meter{display:flex;gap:4px;margin-top:8px}
.ssp-meter i{flex:1;height:3px;border-radius:2px;background:#ececee;transition:background .2s}
.ssp-meter i.s1{background:#d9382e}.ssp-meter i.s2{background:#e08a00}
.ssp-meter i.s3{background:var(--blue)}.ssp-meter i.s4{background:#1f8a3b}
.ssp-hint{font-size:12px;color:var(--text-3);margin-top:7px;line-height:1.7}

/* ===== 按钮 ===== */
.ssp-btn{width:100%;height:44px;border:none;border-radius:6px;background:var(--blue);
  color:#fff;font-size:15px;font-weight:500;cursor:pointer;letter-spacing:6px;
  transition:background .15s;margin-top:8px}
.ssp-btn:hover{background:var(--blue-hover)}
.ssp-btn:active{transform:translateY(1px)}

/* ===== 次要操作 ===== */
.ssp-alt{margin-top:22px;padding-top:18px;border-top:1px solid #f0f1f2;font-size:13px;color:var(--text-2)}
.ssp-alt .soon{font-size:11px;color:var(--text-3);background:#f2f3f5;border-radius:4px;padding:1px 7px;margin-left:8px}

/* ===== 页脚 ===== */
.ssp-footer{margin-top:auto;padding:26px 20px 34px;text-align:center;
  border-top:1px solid var(--border);background:#fff}
.ssp-pb{font-size:13px;color:var(--text-2)}
.ssp-pb b{font-weight:600;color:var(--text-1)}
.ssp-mark{display:inline-block;width:14px;height:14px;border-radius:3px;
  vertical-align:-2px;margin-right:6px;
  background:linear-gradient(135deg,var(--blue),var(--purple))}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .ssp-head-in{padding:0 24px}
  .ssp-container{padding:40px 20px 56px}
}
@media (max-width:640px){
  .ssp-head-in{padding:0 18px;height:54px;gap:12px}
  .ssp-head-in img{height:22px}
  .ssp-tag{font-size:10px;padding-left:12px;letter-spacing:1px}
  .ssp-container{padding:28px 14px 40px}
  .ssp-h1{font-size:20px}
  .ssp-card{padding:24px 20px 22px;border-radius:8px}
}

/* --- 密码复杂度实时 checklist --- */
.ssp-checklist{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0 2px;}
.ssp-checklist span{font-size:12.5px;line-height:1.4;}
.ssp-checklist span.ok{color:#2e7d32;font-weight:600;}
.ssp-checklist span.no{color:#9e9e9e;}