/* 艺展助手 · 登录/注册共用艺术色场背景（纯 CSS，切页不跳动） */



/* 整页锁死视口，禁止出现滚动条 */

html.auth-art-html,

html.auth-art-html body.auth-art-body {

  height: 100%;

  width: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}

/* 覆盖 admin.css 桌面 min-width，避免手机端横向溢出 */
html.auth-art-html body.auth-art-body {

  min-width: 0;

  max-width: 100%;

}

html.auth-art-html input::placeholder,
html.auth-art-html textarea::placeholder {
  font-size: 12px;
  line-height: 1.4;
  color: #94a3b8;
  opacity: 1;
}

html.auth-art-html input::-webkit-input-placeholder,
html.auth-art-html textarea::-webkit-input-placeholder {
  font-size: 12px;
  color: #94a3b8;
}

html.auth-art-html input::-moz-placeholder,
html.auth-art-html textarea::-moz-placeholder {
  font-size: 12px;
  color: #94a3b8;
  opacity: 1;
}

html.auth-art-html select,
html.auth-art-html select option {
  font-size: 12px;
}

.auth-art-page {

  --ink: #1a1512;

  --wash-cinnabar: rgba(176, 64, 48, 0.38);

  --wash-ultramarine: rgba(45, 74, 130, 0.42);

  --wash-ochre: rgba(196, 146, 62, 0.28);

  --wash-jade: rgba(62, 110, 88, 0.22);

  --mist: rgba(245, 240, 232, 0.06);



  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 36px 24px 24px;

  overflow: hidden;

  background-color: var(--ink);

  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;

  box-sizing: border-box;

}



/* 主色场：墨底 + 多层颜料晕染（略放大，裁切在 overflow:hidden 内） */

.auth-art-page::before {

  content: "";

  position: absolute;

  inset: -6%;

  z-index: 0;

  background:

    radial-gradient(ellipse 70% 55% at 12% 18%, var(--wash-cinnabar), transparent 62%),

    radial-gradient(ellipse 65% 60% at 88% 22%, var(--wash-ultramarine), transparent 58%),

    radial-gradient(ellipse 55% 50% at 72% 82%, var(--wash-ochre), transparent 60%),

    radial-gradient(ellipse 50% 45% at 18% 78%, var(--wash-jade), transparent 55%),

    radial-gradient(ellipse 90% 70% at 50% 48%, rgba(255, 248, 240, 0.07), transparent 70%),

    linear-gradient(152deg, #241c18 0%, #161210 42%, #1c222c 78%, #141816 100%);

}



/* 细雾与光带，增加展厅空气感 */

.auth-art-page::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    radial-gradient(circle at 50% 0%, var(--mist), transparent 45%),

    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.04) 46%, transparent 52%),

    linear-gradient(180deg, rgba(10, 8, 6, 0.15), rgba(10, 8, 6, 0.45));

  opacity: 1;

}



.auth-art-shell {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 880px;

  max-height: 100%;

  display: grid;

  grid-template-columns: minmax(200px, 1fr) minmax(280px, 380px);

  gap: 28px 36px;

  align-items: center;

}



.auth-art-aside {

  color: rgba(255, 252, 247, 0.92);

  text-align: left;

  padding: 4px;

}



.auth-art-aside .brand {

  font-size: clamp(1.85rem, 3vw, 2.4rem);

  font-weight: 800;

  letter-spacing: 0.08em;

  color: #f0d5b8;

  margin: 0 0 12px;

  line-height: 1.15;

  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);

}



.auth-art-aside h1 {

  font-size: clamp(1.15rem, 1.8vw, 1.45rem);

  margin: 0 0 10px;

  color: #fff;

  letter-spacing: -0.02em;

  font-weight: 700;

}



.auth-art-aside .lead {

  margin: 0 0 16px;

  color: rgba(255, 248, 240, 0.72);

  font-size: 0.9rem;

  line-height: 1.5;

}



.auth-art-aside .aside-tagline {

  margin: 0;

  padding-top: 14px;

  border-top: 1px solid rgba(255, 248, 240, 0.18);

  color: rgba(255, 248, 240, 0.58);

  font-size: 0.84rem;

  line-height: 1.6;

}



.auth-art-card {

  width: 100%;

  background: rgba(255, 252, 247, 0.94);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-radius: 16px;

  padding: 22px 22px 18px;

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.22),

    0 28px 64px -24px rgba(0, 0, 0, 0.55);

  text-align: left;

  box-sizing: border-box;

}



.auth-art-card form {

  text-align: left;

}



.auth-field-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0 12px;

}



.auth-field { margin-bottom: 9px; }

.auth-field label {

  display: block;

  margin-bottom: 4px;

  font-size: 0.8rem;

  color: #475569;

  font-weight: 600;

}

.auth-field .hint {

  display: block;

  margin-top: 3px;

  font-size: 0.65rem;

  color: #94a3b8;

  font-weight: 400;

}

.auth-field .hint.is-ok { color: #2e7d32; }

.auth-field .hint.is-bad { color: #dc2626; }

.auth-field input.is-ok {

  border-color: #86b88a;

}

.auth-field input.is-bad {

  border-color: #f0a8a8;

}

.auth-field input.is-ok:focus {

  outline-color: #2e7d32;

}

.auth-field input.is-bad:focus {

  outline-color: #dc2626;

}

.auth-field input {

  width: 100%;

  box-sizing: border-box;

  padding: 8px 11px;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  background: #fff;

  font: inherit;

}

.auth-field input:focus {

  outline: 2px solid #8b4513;

  outline-offset: 1px;

  border-color: transparent;

}



.auth-captcha {

  display: flex;

  gap: 10px;

  align-items: center;

}

.auth-captcha img {

  height: 38px;

  border-radius: 8px;

  cursor: pointer;

  border: 1px solid #e2e8f0;

  flex: 0 0 auto;

}



.auth-error {

  color: #dc2626;

  font-size: 0.82rem;

  min-height: 1rem;

  margin: 2px 0 6px;

  text-align: left;

}



.auth-submit {

  width: 100%;

  margin-top: 2px;

  height: 40px;

  border: 0;

  border-radius: 980px;

  background: #8b4513;

  color: #fff;

  font-size: 0.92rem;

  font-weight: 700;

  cursor: pointer;

}

.auth-submit:hover { background: #6d3610; }

.auth-submit:disabled { opacity: 0.65; cursor: not-allowed; }



.auth-links {

  margin-top: 12px;

  text-align: center;

  font-size: 0.85rem;

  color: #6e6e73;

}

.auth-links a {

  color: #8b4513;

  font-weight: 600;

  text-decoration: none;

}

.auth-links a:hover { text-decoration: underline; }



.auth-home {

  position: absolute;

  top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));

  left: max(18px, calc(env(safe-area-inset-left, 0px) + 10px));

  z-index: 3;

  color: rgba(255, 255, 255, 0.88);

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 600;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);

}

.auth-home:hover { color: #fff; }



.auth-tip {

  margin: 0 0 12px;

  padding: 7px 10px;

  border-radius: 8px;

  background: #f3f0eb;

  color: #6d3610;

  font-size: 0.82rem;

  text-align: left;

}



@media (max-width: 820px) {

  .auth-art-page {

    align-items: flex-start;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    padding:

      max(44px, calc(env(safe-area-inset-top, 0px) + 36px))

      max(16px, env(safe-area-inset-right, 0px))

      max(20px, env(safe-area-inset-bottom, 0px))

      max(16px, env(safe-area-inset-left, 0px));

  }



  .auth-art-shell {

    grid-template-columns: 1fr;

    max-width: 400px;

    max-height: none;

    gap: 16px;

  }



  .auth-art-aside {

    text-align: center;

    padding: 0 8px;

  }



  .auth-art-aside .aside-tagline {

    display: none;

  }



  .auth-art-aside .lead {

    margin-bottom: 0;

  }



  .auth-art-aside .brand {

    margin-bottom: 8px;

  }



  .auth-art-aside h1 {

    margin-bottom: 6px;

  }



  .auth-field-row {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 480px) {

  .auth-art-page {

    padding:

      max(40px, calc(env(safe-area-inset-top, 0px) + 32px))

      max(12px, env(safe-area-inset-right, 0px))

      max(16px, env(safe-area-inset-bottom, 0px))

      max(12px, env(safe-area-inset-left, 0px));

  }



  .auth-art-shell {

    max-width: none;

  }



  .auth-art-card {

    padding: 16px 14px 14px;

    border-radius: 14px;

  }



  .auth-field input {

    font-size: 16px;

    padding: 10px 12px;

  }



  .auth-captcha {

    flex-wrap: wrap;

  }



  .auth-captcha input {

    flex: 1 1 100%;

    min-width: 0;

  }



  .auth-captcha img {

    height: 40px;

  }



  .auth-submit {

    height: 44px;

    font-size: 1rem;

  }

}



@media (prefers-reduced-motion: no-preference) {

  .auth-art-page::before {

    animation: auth-wash 28s ease-in-out infinite alternate;

  }

}



@keyframes auth-wash {

  from { transform: scale(1) translate(0, 0); }

  to { transform: scale(1.03) translate(-0.8%, 0.5%); }

}