*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif}
body{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#B0DE79 0%,#8CCB55 100%)}

.login-card{width:min(88vw,360px);background:#FFF8E7;border:3px solid #5D4037;
  border-radius:28px;padding:26px 22px;box-shadow:0 10px 0 rgba(93,64,55,.25)}

.login-card .emoji{font-size:56px;text-align:center;display:block;margin-bottom:8px}
.login-card h1{font-size:26px;color:#5D4037;text-align:center;margin-bottom:6px}
.login-card .sub{font-size:13px;color:#8D6E63;text-align:center;margin-bottom:22px}

.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:#5D4037;font-weight:700;margin-bottom:6px}
.field input{width:100%;padding:14px 16px;border-radius:16px;
  border:3px solid #5D4037;background:#FFFFFF;font-size:16px;color:#5D4037;
  font-family:inherit;outline:none;transition:box-shadow .15s}
.field input:focus{box-shadow:0 0 0 4px rgba(123,201,111,.35)}

.login-btn{margin-top:8px;width:100%;padding:16px;border-radius:18px;
  background:#7BC96F;color:#fff;font-size:18px;font-weight:700;
  border:3px solid #5D4037;box-shadow:0 5px 0 #5D4037;cursor:pointer;
  font-family:inherit;transition:transform .1s}
.login-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #5D4037}
.login-btn:disabled{opacity:0.6;transform:none;box-shadow:0 5px 0 #5D4037}

.err{margin-top:12px;padding:10px 14px;border-radius:12px;
  background:#FFEBEE;color:#C62828;font-size:13px;text-align:center;
  border:2px solid #EF9A9A;display:none}
.err.show{display:block}

.tip{margin-top:16px;font-size:12px;color:#8D6E63;text-align:center;line-height:1.7}