* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #eef1f5; padding-bottom: 30px; }
.box { width: 400px; margin: 70px auto 20px; background: #fff; border-radius: 8px; padding: 34px 32px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.box h1 { font-size: 20px; text-align: center; margin-bottom: 4px; }
.box .sub { font-size: 12px; color: #8a919f; text-align: center; margin-bottom: 22px; }
.f { margin-bottom: 14px; }
.f label { display: block; font-size: 13px; color: #4e5969; margin-bottom: 6px; }
.f input { width: 100%; height: 38px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 10px; font-size: 14px; }
.f input:focus { border-color: #de0303; outline: none; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.row .cap { height: 38px; border-radius: 4px; cursor: pointer; border: 1px solid #dcdfe6; }
.btn { width: 100%; height: 40px; border: none; border-radius: 4px; background: #de0303; color: #fff; font-size: 15px; cursor: pointer; }
.btn:hover { background: #a30000; }
.btn.gray { background: #f2f3f5; color: #4e5969; margin-top: 10px; }
.err { background: #fff2f0; border: 1px solid #ffccc7; color: #cf1322; font-size: 13px; padding: 8px 10px; border-radius: 4px; margin-bottom: 14px; display: none; }
.foot { text-align: center; font-size: 13px; color: #8a919f; margin-top: 16px; }
.foot a { color: #a30000; text-decoration: none; }

/* 身份选择 */
.role-switch{display:flex;gap:10px;margin-bottom:18px}
.role-item{flex:1;border:1px solid #dcdfe6;border-radius:6px;padding:10px 8px;cursor:pointer;text-align:center;transition:all .2s}
.role-item input{display:none}
.role-item b{display:block;font-size:14px;color:#1f2329}
.role-item span{font-size:11px;color:#8a919f;display:block;margin-top:3px;line-height:1.4}
.role-item.on{border-color:#de0303;background:#fff5f5;box-shadow:0 0 0 1px #de0303 inset}
.role-item.on b{color:#de0303}
@media (max-width:480px){
  .box{width:92%;margin:30px auto 20px;padding:24px 18px}
}