:root{--ink:#182826;--muted:#71817d;--line:#dce5de;--paper:#fbfcf8;--green:#123d35;--green-2:#1d6756;--lime:#d8e86b;--coral:#e46c4d}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;background:#dfe9df url("back.png") center center/cover no-repeat fixed}#scene-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.auth-shell{width:min(1180px,calc(100% - 48px));min-height:480px;margin:24px auto;display:block;background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px #183a3022;border:1px solid #dce5de}.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:transparent}.brand-mark img{width:44px;height:44px;object-fit:contain}.auth-panel{position:absolute;z-index:1;top:50%;right:6%;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;width:min(420px,calc(100% - 32px));padding:28px 32px;background:#f8fbf766;border:1px solid #ffffffb8;border-radius:18px;box-shadow:0 18px 50px #173c3240,inset 0 1px #ffffff66;backdrop-filter:blur(18px) saturate(125%)}.mobile-brand{display:none}.panel-head h2{margin:7px 0 4px;font-size:34px;letter-spacing:-1px}.panel-head>p:last-child{margin:0;line-height:1.35;color:var(--muted);font-size:14px}.auth-tabs{display:flex;gap:25px;width:92%;margin:18px auto 13px;border-bottom:1px solid var(--line)}.tab{position:relative;padding:0 0 10px;border:0;background:transparent;color:var(--green-2);font:600 14px inherit;cursor:pointer}.tab.is-active{color:var(--green)}.tab.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--coral);border-radius:3px}.field{display:grid;gap:4px;margin:0 0 7px}.field>span{font-size:12px;font-weight:700;color:#536761}.field em{margin-left:5px;color:#9ca8a2;font-style:normal;font-weight:400}.field input{width:100%;height:42px;padding:0 13px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:14px inherit;outline:0;transition:border-color .2s,box-shadow .2s}.field input:focus{border-color:var(--green-2);box-shadow:0 0 0 3px #1d67561a}.field input::placeholder{color:#b0bbb5}.password-wrap{position:relative}.password-wrap input{padding-right:58px}.password-toggle{position:absolute;right:8px;top:7px;height:32px;padding:0 7px;border:0;background:transparent;color:var(--green-2);font-size:11px;cursor:pointer}.field-error{min-height:11px;line-height:1.2;color:#c34e3f;font-size:11px}.form-row{display:flex;justify-content:space-between;align-items:center;margin:1px 0 15px}.check{display:flex;align-items:center;gap:8px;color:#788781;font-size:11px;cursor:pointer}.check input{accent-color:var(--green-2)}.submit-button{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;padding:0 16px 0 19px;border:0;border-radius:6px;background:var(--green);color:#fff;font:700 14px inherit;cursor:pointer;box-shadow:4px 4px 0 #d1dfc2;transition:transform .2s,background .2s}.submit-button:hover{background:var(--green-2);transform:translateY(-2px)}.submit-button:disabled{opacity:.65;cursor:wait}.submit-arrow{font-size:20px;font-weight:400}.form-status{min-height:16px;margin:9px 0 0;text-align:center;color:#c34e3f;font-size:12px}.form-status.is-success{color:#287652}.panel-foot{display:block;margin:14px 0 0;text-align:center;color:#5f726c;font-size:11px}.panel-foot a{color:var(--green-2);text-decoration:none;font-weight:700}.is-hidden{display:none!important}@keyframes login-bg-drift{0%{background-position:48% 50%}100%{background-position:52% 48%}}@media(max-width:820px){.auth-shell{display:block;width:100%;min-height:100vh;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none}.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:transparent}.brand-mark img{width:44px;height:44px;object-fit:contain}.auth-panel{top:auto;right:16px;bottom:16px;left:16px;transform:none;width:auto;padding:18px 22px 17px;background:#f8fbf780}.mobile-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px;color:var(--green);transform:translateY(18px)}.mobile-brand strong{font-size:20px}.mobile-brand .mobile-brand .panel-head h2{font-size:28px;margin-bottom:1px}}@media(max-width:420px){.auth-shell{width:100%;margin:0;border:0;min-height:100vh}.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:transparent}.brand-mark img{width:44px;height:44px;object-fit:contain}.auth-panel{right:0;bottom:0;left:0;border-radius:18px 18px 0 0;padding:20px 19px 19px;background:#f8fbf790}.mobile-brand{margin-bottom:24px}.auth-tabs{margin-top:10px}.panel-head h2{font-size:27px}}@media(prefers-reduced-motion:reduce){body{animation:none}}
/* Prevent WebView double-tap zoom while keeping form scrolling. */
html, body { touch-action: manipulation; }

/* Use the portrait mobile composition on every viewport. */
.auth-shell{width:100%;min-height:100vh;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;display:block}

.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:transparent}.brand-mark img{width:44px;height:44px;object-fit:contain}.auth-panel{position:absolute;top:auto;right:auto;bottom:16px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px));max-height:calc(100vh - 24px);overflow:auto;padding:18px 22px 17px;background:#f8fbf780;border:1px solid #ffffffb8;border-radius:18px;box-shadow:0 18px 50px #173c3240,inset 0 1px #ffffff66;backdrop-filter:blur(18px) saturate(125%)}
.mobile-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px;color:var(--green);transform:translateY(18px)}
.auth-tabs{margin-top:10px}
@media(max-width:420px){.brand-mark{display:grid;place-items:center;width:48px;height:48px;background:transparent}.brand-mark img{width:44px;height:44px;object-fit:contain}.auth-panel{right:auto;bottom:0;left:50%;transform:translateX(-50%);width:100%;padding:20px 19px 19px;border-radius:18px 18px 0 0;background:#f8fbf790}.mobile-brand{margin-bottom:24px}}
/* Keep the login panel centered while the animated background moves. */
.auth-panel {
  position: fixed;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
@media (max-width: 420px) {
  .auth-panel {
    width: min(360px, calc(100% - 28px));
    padding: 15px 17px 14px;
    border-radius: 16px;
  }
  .mobile-brand {
    margin-bottom: 14px;
    transform: translateY(8px);
  }
  .mobile-brand strong { font-size: 18px; }
  .panel-head h2 { font-size: 25px; }
  .auth-tabs { margin-top: 8px; margin-bottom: 10px; }
  .field { margin-bottom: 5px; }
  .field input { height: 39px; }
  .form-row { margin-bottom: 10px; }
  .submit-button { height: 42px; }
  .panel-foot { margin-top: 10px; }
}
/* Keep form controls above the animated scene on mobile browsers. */
.auth-shell { position: relative; z-index: 1; }
.auth-panel {
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.auth-panel input,
.auth-panel button,
.auth-panel label { pointer-events: auto; }
@media (max-width: 820px) {
  .auth-panel { right: 28px; left: 28px; width: auto; }
}
@media (max-width: 420px) {
  .auth-panel { right: 14px; left: 14px; padding-left: 17px; padding-right: 17px; }
}

@media (max-width: 820px) {
  .auth-panel {
    right: auto;
    left: 50%;
    width: calc(100% - 32px);
    max-width: none;
    transform: translate(-50%, 0);
  }
}
@media (max-width: 420px) {
  .auth-panel {
    right: auto;
    left: 50%;
    width: calc(100% - 24px);
    padding-left: 17px;
    padding-right: 17px;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 820px) {
  .auth-panel {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 420px) {
  .auth-panel {
    width: calc(100% - 24px);
    max-height: calc(100vh - 20px);
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 820px) {
  .auth-panel input { font-size: 16px; }
}