/* =========================================================
   V903 · REAL ACCOUNT AUTH
   小宠任务屋真实账号登录 / 注册
========================================================= */

/* 隐藏之前 V52 本地假登录层 */
#authGate,
.auth-gate{
  display:none !important;
}


/* 登录检查和未登录时，不让后面的 App 被操作 */
body.v903-auth-locked .app-shell{
  visibility:hidden !important;
  pointer-events:none !important;
}

body.v903-authenticated .app-shell{
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
  pointer-events:auto !important;
}


/* =========================
   整体登录层
========================= */

#v903AuthGate{
  position:fixed;
  inset:0;

  z-index:2147483000;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:100dvh;

  padding:
    calc(24px + env(safe-area-inset-top))
    20px
    calc(24px + env(safe-area-inset-bottom));

  box-sizing:border-box;

  overflow:auto;

  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(255,255,255,.82),
      transparent 25%
    ),
    radial-gradient(
      circle at 86% 20%,
      rgba(245,255,213,.85),
      transparent 28%
    ),
    linear-gradient(
      155deg,
      #edf9da 0%,
      #d9f0c3 45%,
      #cce9bd 100%
    );

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

#v903AuthGate[hidden]{
  display:none !important;
}


/* =========================
   背景装饰
========================= */

.v903-auth-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.v903-auth-blob{
  position:absolute;

  width:230px;
  height:230px;

  border-radius:50%;

  filter:blur(2px);

  background:
    rgba(255,255,255,.28);

  animation:
    v903Float 7s ease-in-out infinite;
}

.v903-auth-blob.b1{
  left:-100px;
  top:12%;
}

.v903-auth-blob.b2{
  right:-110px;
  top:48%;

  width:280px;
  height:280px;

  animation-delay:-2.5s;
}

.v903-auth-blob.b3{
  left:20%;
  bottom:-170px;

  width:320px;
  height:320px;

  background:
    rgba(98,164,79,.12);

  animation-delay:-4s;
}

@keyframes v903Float{
  0%,100%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50%{
    transform:
      translate3d(0,-16px,0)
      scale(1.04);
  }
}


/* =========================
   登录卡
========================= */

.v903-auth-card{
  position:relative;
  z-index:2;

  width:min(100%, 390px);

  padding:26px 22px 22px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(255,255,255,.70);

  border-radius:32px;

  background:
    rgba(255,255,255,.76);

  box-shadow:
    0 28px 70px rgba(54,92,43,.15),
    inset 0 1px 0 rgba(255,255,255,.85);

  backdrop-filter:
    blur(24px)
    saturate(1.08);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(1.08);

  animation:
    v903CardIn .48s
    cubic-bezier(.2,.9,.25,1.15)
    both;
}

@keyframes v903CardIn{
  from{
    opacity:0;
    transform:
      translateY(18px)
      scale(.97);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================
   Logo
========================= */

.v903-auth-logo{
  display:flex;
  flex-direction:column;
  align-items:center;

  margin-bottom:21px;

  text-align:center;
}

.v903-auth-paw{
  position:relative;

  width:74px;
  height:74px;

  display:grid;
  place-items:center;

  margin-bottom:13px;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      #7fc56b,
      #5eae58
    );

  box-shadow:
    0 12px 26px
    rgba(75,146,66,.25);

  font-size:35px;

  animation:
    v903PawFloat
    3.1s
    ease-in-out
    infinite;
}

.v903-auth-paw::after{
  content:"";

  position:absolute;

  width:13px;
  height:13px;

  top:9px;
  right:9px;

  border-radius:50%;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 0 0 5px
    rgba(255,255,255,.13);
}

@keyframes v903PawFloat{
  0%,100%{
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50%{
    transform:
      translateY(-5px)
      rotate(2deg);
  }
}

.v903-auth-logo h1{
  margin:0;

  color:#27572d;

  font-size:25px;
  line-height:1.2;

  font-weight:850;

  letter-spacing:-.6px;
}

.v903-auth-logo p{
  margin:7px 0 0;

  color:#799071;

  font-size:13px;
  line-height:1.5;
}


/* =========================
   Tabs
========================= */

.v903-auth-tabs{
  position:relative;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:4px;

  height:47px;

  margin-bottom:18px;

  padding:4px;

  box-sizing:border-box;

  border-radius:17px;

  background:
    rgba(109,153,91,.10);
}

.v903-auth-tab{
  position:relative;
  z-index:2;

  border:0;

  border-radius:14px;

  background:transparent;

  color:#84937d;

  font-size:14px;
  font-weight:750;

  cursor:pointer;

  transition:
    color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.v903-auth-tab.active{
  color:#37713d;

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 5px 14px
    rgba(53,92,47,.09);
}


/* =========================
   Form
========================= */

.v903-auth-form{
  display:flex;
  flex-direction:column;

  gap:12px;
}

.v903-auth-field{
  display:block;
}

.v903-auth-field[hidden]{
  display:none !important;
}

.v903-auth-field span{
  display:block;

  margin:0 0 6px 4px;

  color:#63745f;

  font-size:12px;
  font-weight:700;
}

.v903-auth-input{
  width:100%;
  height:52px;

  padding:0 16px;

  box-sizing:border-box;

  outline:0;

  border:
    1.5px solid
    rgba(83,126,73,.13);

  border-radius:17px;

  background:
    rgba(255,255,255,.81);

  color:#263d29;

  font-size:16px;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.7);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.v903-auth-input::placeholder{
  color:#a9b4a5;
}

.v903-auth-input:focus{
  border-color:
    rgba(79,161,71,.62);

  box-shadow:
    0 0 0 4px
    rgba(93,177,78,.10);

  transform:
    translateY(-1px);
}


/* =========================
   错误提示
========================= */

.v903-auth-error{
  min-height:17px;

  margin:1px 3px -2px;

  color:#dc655d;

  font-size:12px;
  font-weight:650;

  line-height:1.45;

  opacity:0;

  transform:
    translateY(-3px);

  transition:
    opacity .2s,
    transform .2s;
}

.v903-auth-error.show{
  opacity:1;

  transform:
    translateY(0);
}


/* =========================
   主按钮
========================= */

.v903-auth-submit{
  position:relative;

  width:100%;
  height:54px;

  margin-top:3px;

  overflow:hidden;

  border:0;
  border-radius:18px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #71bd61,
      #52a64f
    );

  box-shadow:
    0 12px 24px
    rgba(77,154,69,.23);

  font-size:15px;
  font-weight:850;

  letter-spacing:.3px;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}

.v903-auth-submit::before{
  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:-40%;

  width:34%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transform:
    skewX(-22deg);

  animation:
    v903Shine 3.5s
    ease-in-out infinite;
}

@keyframes v903Shine{
  0%,65%{
    left:-50%;
  }

  100%{
    left:130%;
  }
}

.v903-auth-submit:active{
  transform:
    scale(.985);
}

.v903-auth-submit:disabled{
  cursor:default;

  opacity:.65;

  box-shadow:none;
}


/* =========================
   底部说明
========================= */

.v903-auth-tip{
  margin:
    13px 0 0;

  color:#93a08e;

  text-align:center;

  font-size:11px;

  line-height:1.55;
}


/* =========================
   检查登录状态
========================= */

.v903-auth-checking{
  min-height:190px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.v903-auth-loader{
  width:34px;
  height:34px;

  margin-bottom:14px;

  border:
    3px solid
    rgba(75,154,65,.15);

  border-top-color:
    #60ae57;

  border-radius:50%;

  animation:
    v903Spin .8s linear infinite;
}

@keyframes v903Spin{
  to{
    transform:
      rotate(360deg);
  }
}

.v903-auth-checking b{
  color:#426943;

  font-size:14px;
}

.v903-auth-checking small{
  margin-top:6px;

  color:#899a84;
}


/* =========================
   我的页面 · 真实账号小条
========================= */

.v903-account-line{
  display:flex;
  align-items:center;

  gap:6px;

  margin-top:5px;

  white-space:nowrap;
}

.v903-account-badge{
  max-width:142px;

  overflow:hidden;

  text-overflow:ellipsis;

  padding:4px 8px;

  border-radius:999px;

  color:#59815a;

  background:
    rgba(91,157,78,.10);

  font-size:10px;
  font-weight:700;
}

.v903-account-logout{
  flex:none;

  padding:4px 8px;

  border:0;
  border-radius:999px;

  color:#8b9887;

  background:
    rgba(255,255,255,.72);

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}

.v903-account-logout:active{
  transform:
    scale(.95);
}


/* =========================
   小屏优化
========================= */

@media(max-height:700px){

  .v903-auth-card{
    padding:
      20px
      20px
      18px;
  }

  .v903-auth-paw{
    width:60px;
    height:60px;

    border-radius:21px;

    font-size:29px;
  }

  .v903-auth-logo{
    margin-bottom:14px;
  }

  .v903-auth-logo h1{
    font-size:22px;
  }

  .v903-auth-tabs{
    margin-bottom:13px;
  }

  .v903-auth-input{
    height:48px;
  }

  .v903-auth-submit{
    height:50px;
  }
}