/* Login-only appearance, based on the live VIPC auth surface. */
/* Every rule is scoped to the existing auth layout; application views are untouched. */
.auth-shell {
  --login-bg-top: #07111d;
  --login-bg-bottom: #0b1827;
  --login-panel: rgba(11, 25, 41, 0.78);
  --login-panel-line: rgba(175, 230, 211, 0.14);
  --login-control: rgba(4, 14, 25, 0.78);
  --login-line: rgba(190, 216, 239, 0.17);
  --login-accent: #82e1b7;
  --login-text: #f6faff;
  --login-muted: #8296ad;
  --login-danger: #ff9ca5;
  --login-focus: rgba(182, 209, 248, 0.72);
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  place-items: safe center;
  width: 100%;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: var(--login-text) !important;
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(ellipse 52% 44% at 50% 47%, rgba(73, 204, 153, 0.105), transparent 72%),
    radial-gradient(circle at 14% 16%, rgba(79, 132, 215, 0.09), transparent 31%),
    radial-gradient(circle at 88% 84%, rgba(62, 147, 185, 0.07), transparent 28%),
    linear-gradient(145deg, var(--login-bg-top), var(--login-bg-bottom) 54%, #07131f) !important;
}

.auth-shell,
.auth-shell *,
.auth-shell::before,
.auth-shell::after {
  box-sizing: border-box;
}

.auth-shell::before {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  border: 1px solid rgba(153, 230, 200, 0.065);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(101, 221, 175, 0.045), transparent 54%),
    radial-gradient(circle, transparent 66%, rgba(117, 191, 218, 0.035) 67%, transparent 71%);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Replace only the two decorative children of AuthLayout. */
.auth-shell > .absolute,
.auth-shell > .pointer-events-none {
  display: none !important;
}

/* The existing outer wrapper becomes the single visible card. */
.auth-shell > .relative.z-10.w-full.max-w-md {
  width: min(396px, 100%) !important;
  max-width: 396px !important;
  min-width: 0;
  margin: 0;
  padding: 40px 36px 30px;
  border: 1px solid var(--login-panel-line);
  border-radius: 24px;
  color: var(--login-text);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), transparent 34%), var(--login-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(1, 8, 15, 0.24),
    0 32px 90px rgba(1, 8, 18, 0.45);
}

.auth-shell > .relative.z-10.w-full.max-w-md::before {
  position: absolute;
  top: 0;
  right: 54px;
  left: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 239, 203, 0.62), transparent);
  content: "";
  pointer-events: none;
}

.auth-shell > .relative.z-10.w-full.max-w-md > .mb-8.text-center {
  margin-bottom: 28px !important;
}

.auth-shell .brand-mark {
  display: none !important;
}

.auth-shell > .relative.z-10.w-full.max-w-md > .mb-8.text-center h1 {
  margin: 0;
  color: var(--login-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--login-text) !important;
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.045em;
  overflow-wrap: anywhere;
}

.auth-shell > .relative.z-10.w-full.max-w-md > .mb-8.text-center p {
  margin-top: 10px;
  color: var(--login-muted) !important;
  font-size: 14px;
  line-height: 1.5;
}

.auth-shell > .relative.z-10.w-full.max-w-md > .auth-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--login-text) !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
}

/* Only the ordinary password-login welcome block is redundant. */
/* OTP/captcha and alternate authentication headings stay available. */
.auth-shell .auth-card > .space-y-6 > .text-center:first-child:has(+ form input#password) {
  display: none !important;
}

.auth-shell .auth-card form.space-y-5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 !important;
  gap: 18px;
}

.auth-shell .auth-card form.space-y-5 > :not([hidden]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-width: 0;
}

.auth-shell .auth-card .input-label {
  margin-bottom: 8px;
  color: #d8e4ef !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.auth-shell .auth-card .input {
  width: 100%;
  min-width: 0;
  height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 14px !important;
  color: var(--login-text) !important;
  background: var(--login-control) !important;
  font: inherit;
  caret-color: var(--login-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 8px 24px rgba(0, 0, 0, 0.13);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.auth-shell .auth-card .input::placeholder {
  color: var(--login-muted) !important;
  opacity: 1;
}

.auth-shell .auth-card .input:hover {
  border-color: rgba(194, 220, 241, 0.31) !important;
}

.auth-shell .auth-card .input:is(:focus, :focus-visible) {
  border-color: var(--login-focus) !important;
  outline: 2px solid var(--login-focus);
  outline-offset: 2px;
  background: rgba(5, 17, 29, 0.94) !important;
  box-shadow: inset 0 0 0 1px var(--login-focus);
}

.auth-shell .auth-card .input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--login-text) !important;
  caret-color: var(--login-accent);
  box-shadow: inset 0 0 0 1000px #071421 !important;
}

.auth-shell .auth-card .input[aria-invalid="true"] {
  border-color: var(--login-danger) !important;
}

.auth-shell .auth-card .input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-shell .auth-card form .relative > button:not(.btn-primary) {
  min-width: 44px;
  min-height: 44px;
  color: var(--login-muted) !important;
  border-radius: 10px;
}

.auth-shell .auth-card .btn-primary {
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid rgba(189, 255, 225, 0.28);
  border-radius: 14px !important;
  color: #052116 !important;
  font: inherit;
  font-weight: 780;
  letter-spacing: 0.08em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(135deg, #98e8c5, #65d3a1 62%, #74dcad) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 13px 30px rgba(65, 204, 148, 0.2);
  transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.auth-shell .auth-card .btn-primary:disabled {
  opacity: 0.62;
  filter: saturate(0.72);
  transform: none;
}

.auth-shell :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--login-focus);
  outline-offset: 3px;
}

.auth-shell a {
  color: var(--login-accent) !important;
  text-underline-offset: 3px;
}

.auth-shell a:hover {
  color: #98eac7 !important;
  text-decoration: underline;
}

.auth-shell :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) {
  color: var(--login-muted) !important;
}

.auth-shell :is(.text-gray-800, .text-gray-900) {
  color: var(--login-text) !important;
}

.auth-shell :is(.text-red-400, .text-red-500, .text-red-600, .text-red-700) {
  color: var(--login-danger) !important;
}

.auth-shell :is(.bg-red-50, .bg-red-100) {
  background-color: rgba(167, 46, 63, 0.16) !important;
}

.auth-shell > .relative.z-10.w-full.max-w-md > .mt-6.text-center.text-sm {
  margin-top: 24px !important;
  color: var(--login-muted) !important;
  line-height: 1.6;
}

.auth-shell > .relative.z-10.w-full.max-w-md > .mt-8.text-center.text-xs {
  margin-top: 22px !important;
  color: var(--login-muted) !important;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .auth-shell .auth-card .btn-primary:hover:not(:disabled) {
    filter: brightness(1.045);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 36px rgba(65, 204, 148, 0.28);
  }
}

@media (max-width: 520px) {
  .auth-shell > .relative.z-10.w-full.max-w-md {
    width: min(356px, 100%) !important;
    padding: 34px 26px 28px;
    border-radius: 22px;
  }

  .auth-shell > .relative.z-10.w-full.max-w-md > .mb-8.text-center h1 {
    font-size: 25px !important;
  }

  .auth-shell .auth-card .input,
  .auth-shell .auth-card .btn-primary {
    min-height: 54px;
    height: 54px !important;
  }
}

@media (max-height: 540px) {
  .auth-shell {
    align-content: start;
    align-items: start;
  }

  .auth-shell > .relative.z-10.w-full.max-w-md {
    padding-top: 28px;
    padding-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell .auth-card .input,
  .auth-shell .auth-card .btn-primary {
    transition: none;
  }
}


/* The filing is the final row of the login page, in normal document flow. */
.auth-shell:has(> #urdream-login-icp) {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  grid-template-rows: 1fr auto;
  gap: 20px;
  align-content: stretch;
  overflow: visible !important;
}
.auth-shell:has(> #urdream-login-icp) > .relative.z-10.w-full.max-w-md { align-self: center; }
#urdream-login-icp {
  position: static;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid rgba(175, 230, 211, .17);
  border-radius: 8px;
  background: rgba(7, 17, 29, .92);
  color: #b8e6d1;
  font: 13px/20px "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: right;
}
#urdream-login-icp a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#urdream-login-icp a:hover { text-decoration: underline; }
#urdream-login-icp a:focus-visible { outline: 2px solid #b6d1f8; outline-offset: -3px; border-radius: 8px; }