/* Login-only characters inspired by the local Peek-Free Login reference. */
.peek-login { --surface: #fff; --sunken: #edf4ef; --ink: #203b34; --ink-soft: #536b60; --line: #dce7e0; --accent: #0d7059; --accent-tint: #eaf4f0; --on-accent: #fff; background: #f4f8f6; color: #203b34; color-scheme: light; }
.peek-login > footer { display: none; }
.peek-login .peek-layout { width: min(1120px, calc(100% - 48px)); max-width: 1120px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: 16px 0; min-width: 0; }
.peek-art { min-width: 0; }
.peek-copy { max-width: 460px; }
.peek-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #53766a; }
.peek-copy h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.25; letter-spacing: -.04em; margin: 12px 0 10px; }
.peek-copy p, .peek-caption { color: #536b60; font-size: 14px; line-height: 1.8; }
.peek-stage { position: relative; width: 100%; max-width: 480px; height: clamp(180px, 31dvh, 260px); margin-top: 20px; border-bottom: 1px solid #cadbd3; --look-x: 0px; --look-y: 0px; --lean: 0deg; }
.peek-character { position: absolute; bottom: 0; transform: skewX(var(--lean)); transform-origin: bottom center; transition: transform .25s ease; }
.peek-tall { left: 16%; width: 34%; height: 97%; background: #598e79; border-radius: 18px 18px 0 0; }
.peek-dark { left: 48%; width: 23%; height: 76%; background: #253f38; border-radius: 15px 15px 0 0; }
.peek-coral { left: 0; width: 46%; height: 48%; background: #efa886; border-radius: 140px 140px 0 0; }
.peek-yellow { left: 66%; width: 28%; height: 58%; background: #e3cb6a; border-radius: 90px 90px 0 0; }
.peek-face { position: absolute; top: 14%; left: 24%; display: flex; gap: 19px; transform: translate(var(--look-x), var(--look-y)); transition: transform .2s ease; }
.peek-coral .peek-face { top: 45%; left: 33%; }
.peek-yellow .peek-face { top: 21%; left: 24%; gap: 15px; }
.peek-eye { display: grid; place-items: center; width: 17px; height: 19px; background: #fff; border-radius: 50%; transition: transform .15s; }
.peek-eye b { width: 7px; height: 8px; background: #203b34; border-radius: 50%; transform: translate(var(--look-x), var(--look-y)); transition: transform .2s ease; }
.peek-mouth { position: absolute; top: 45%; left: 30%; width: 44%; height: 3px; border-radius: 4px; background: #253f38; }
.peek-stage.is-blinking .peek-eye { transform: scaleY(.12); }
.peek-stage.is-typing .peek-tall { transform: skewX(-4deg); }
.peek-stage.is-guarding { --look-x: -4px !important; --look-y: -4px !important; --lean: 3deg !important; }
.peek-stage.is-guarding .peek-eye b { transform: translate(-4px, -4px); }
.peek-stage.is-revealed .peek-eye { transform: scaleY(.12); }
.peek-caption { margin-top: 12px; font-size: 12px; }
.peek-login .auth-panel { background: #fff; color: #203b34; border: 1px solid #dce7e0; border-radius: 20px; padding: 22px 26px; box-shadow: 0 18px 55px #264e3d0a; }
.peek-login .auth-panel .me-title { font-size: 26px; line-height: 1.25; letter-spacing: -.03em; }
.peek-login .login-intro { margin: 6px 0 16px; font-size: 13px; line-height: 1.5; color: #536b60; }
.peek-login .login-form { gap: 10px; }
.peek-login .login-form .field { gap: 5px; }
.peek-login .login-form .field input { height: 44px; }
.peek-login .login-form .field small { line-height: 1.5; }
.peek-login .login-username { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.peek-login .login-username input { grid-column: 1 / -1; grid-row: 2; }
.peek-login .login-username small { grid-column: 2; grid-row: 1; text-align: right; }
.peek-login .login-password-help small { display: block; }
.peek-login .login-form .form-actions .btn { min-height: 44px; }
.peek-login .auth-panel > .access-entry { margin-top: 12px; padding-top: 10px; }
.peek-login .field { color: #29463d; gap: 8px; }
.peek-login .field small { color: #5c7065; font-size: 12px; line-height: 1.6; }
.peek-login .field input { width: 100%; min-width: 0; height: 48px; border: 1px solid #d2dfd7; border-radius: 11px; background: #fafcfb; color: #203b34; padding: 0 14px; font-size: 16px; }
.peek-login .field input:focus { outline: 3px solid #dceee5; outline-offset: 1px; border-color: #39816b; }
.peek-login .field input::placeholder { color: #62766a; }
.peek-password { position: relative; }
.peek-login .peek-password input { padding-right: 66px; }
.peek-password button { position: absolute; right: 5px; top: 4px; min-width: 54px; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: #527568; font: inherit; font-size: 12px; cursor: pointer; }
.peek-password button:hover { background: #edf5f0; }
.peek-login .captcha-image { border-radius: 10px; background: #f2f7f4; }
.peek-login .form-actions .btn { min-height: 48px; border-radius: 11px; background: #0d7059; color: #fff; border-color: #0d7059; font-size: 16px; }
.peek-login .login-help { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e7eee9; font-size: 12px; line-height: 1.9; color: #5c7065; }
.peek-login .errors { background: #fff0ec; color: #9b3f2c; }
@media (max-width: 899px) {
  .peek-login .peek-layout { width: min(440px, calc(100% - 32px)); grid-template-columns: 1fr; gap: 12px; padding-block: 12px; }
  .peek-copy h2 { font-size: 20px; margin: 0; }
  .peek-copy h2 br { display: none; }
  .peek-copy > p, .peek-caption, .peek-eyebrow { display: none; }
  .peek-art { text-align: center; }
  .peek-stage { height: 60px; width: 160px; margin: 8px auto 0; }
  .peek-tall { border-radius: 8px 8px 0 0; }
  .peek-dark { border-radius: 6px 6px 0 0; }
  .peek-face { top: 20%; gap: 8px; }
  .peek-yellow .peek-face { top: 20%; gap: 6px; }
  .peek-eye { width: 8px; height: 9px; }
  .peek-eye b { width: 3px; height: 4px; }
  .peek-mouth { top: 52%; height: 2px; }
  .peek-login .auth-panel { padding: 18px 20px; border-radius: 18px; }
  .peek-login .auth-panel .me-title { font-size: 24px; }
  .peek-login .login-intro { margin-bottom: 12px; }
}
@media (max-height: 700px) and (min-width: 900px) {
  .peek-login .peek-layout { padding-block: 10px; }
  .peek-login .auth-panel { padding: 18px 24px; }
  .peek-login .login-form { gap: 8px; }
  .peek-login .login-form .field { gap: 4px; }
  .peek-login .login-intro { margin-block: 4px 12px; }
  .peek-copy h2 { font-size: 32px; }
  .peek-copy > p, .peek-caption { display: none; }
  .peek-stage { height: clamp(160px, 28dvh, 210px); margin-top: 16px; }
}
@media (max-height: 760px) and (max-width: 899px) {
  .peek-stage { display: none; }
  .peek-login .peek-layout { gap: 10px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .peek-character, .peek-face, .peek-eye, .peek-eye b { transition: none; }
}

/* 登录页面：大屏提高内容占比，小屏压缩垂直间距。 */
@media (min-width: 1200px) and (min-height: 701px) {
  .peek-login .peek-layout {
    width: min(1320px, calc(100% - 80px));
    max-width: 1320px;
    gap: clamp(48px, 6vw, 100px);
  }
  .peek-copy { max-width: 560px; }
  .peek-copy h2 { font-size: clamp(38px, 3vw, 50px); }
  .peek-stage { max-width: 560px; height: clamp(230px, 33vh, 320px); }
  .peek-login .auth-panel { padding: 32px; }
}

@media (max-width: 759px) {
  .peek-login .peek-layout {
    width: min(440px, calc(100% - 24px));
    gap: 6px;
    padding-block: 8px;
    align-content: center;
  }
  .peek-login .auth-panel { padding: 14px 16px; }
  .peek-login .auth-panel .me-title { font-size: 21px; }
  .peek-login .login-intro { margin: 3px 0 8px; font-size: 12px; }
  .peek-login .login-form { gap: 7px; }
  .peek-login .login-form .field { gap: 3px; font-size: 13px; line-height: 1.35; }
  .peek-login .login-form .field input { height: 40px; }
  .peek-login .captcha-image { height: 40px; }
  .peek-login .peek-password button { top: 0; min-height: 40px; }
  .peek-login .login-form .form-actions .btn { min-height: 42px; }
  .peek-login .auth-panel > .access-entry { margin-top: 8px; padding-top: 7px; }
  .peek-login .peek-art { display: none; }
}

/* 高屏电脑端适度放大表单与插画，保持整体居中。 */
@media (min-width: 1200px) and (min-height: 760px) {
  .peek-login .auth-panel {
    min-height: min(70vh, 680px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .peek-login .auth-panel .me-title { font-size: 30px; }
  .peek-login .login-intro { margin-bottom: 22px; }
  .peek-login .login-form { gap: 14px; }
  .peek-login .login-form .field { font-size: 15px; }
  .peek-login .login-form .field input { height: 50px; }
  .peek-login .captcha-image { height: 50px; }
  .peek-login .peek-password button { top: 5px; }
  .peek-login .login-form .form-actions .btn { min-height: 50px; }
  .peek-login .auth-panel > .access-entry {
    margin-top: 20px;
    padding-top: 16px;
  }
  .peek-stage { max-width: 620px; height: clamp(260px, 40vh, 400px); }
}