:root {
  --bg: #050506;
  --panel: rgba(32, 9, 8, 0.68);
  --panel-strong: rgba(24, 8, 8, 0.88);
  --text: #fff8f5;
  --muted: #b8a4a0;
  --faint: #75625f;
  --line: rgba(255, 255, 255, 0.13);
  --line-bright: rgba(255, 168, 138, 0.48);
  --accent: #ff5000;
  --accent-soft: rgba(255, 80, 0, 0.18);
  --error: #ff6a5f;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 80, 0, 0.13), transparent 32%),
    linear-gradient(145deg, #040405 0%, #090607 46%, #090405 100%);
  color: var(--text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(0, 0, 0, 0.54), transparent 45%, rgba(255, 80, 0, 0.035));
}

.side-rays-container {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.66;
  mix-blend-mode: screen;
}

.side-rays-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.background-grid {
  position: fixed;
  inset: 0;
  z-index: -4;
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 128px 128px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%);
}

.login-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  padding: 18px clamp(22px, 4vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 7, 0.5);
  backdrop-filter: blur(22px) saturate(120%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(255, 80, 0, 0.26);
}

.brand span {
  display: grid;
  gap: 4px;
}

.brand strong {
  overflow: hidden;
  font-size: 19px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand small {
  color: #8f8584;
  font-size: 11px;
}

.security-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #998f8d;
  font-size: 12px;
}

.security-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 80, 0, 0.9);
}

.login-stage {
  display: grid;
  min-height: 100vh;
  padding: 132px 20px 80px;
  place-items: center;
}

.credential-card {
  position: relative;
  width: min(448px, calc(100vw - 32px));
  padding: 42px 42px 24px;
  border: 1px solid rgba(255, 162, 132, 0.34);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 92, 45, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(70, 12, 10, 0.72), rgba(28, 7, 8, 0.86));
  backdrop-filter: blur(28px) saturate(125%);
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.65),
    0 0 74px rgba(255, 80, 0, 0.12),
    inset 0 1px 0 rgba(255, 220, 210, 0.18);
  isolation: isolate;
  overflow: hidden;
}

.credential-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 94% 3%, rgba(255, 133, 88, 0.31), transparent 36%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.025), transparent);
  pointer-events: none;
}

.credential-card::after {
  content: "";
  position: absolute;
  top: -76px;
  right: -70px;
  z-index: -1;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(255, 80, 0, 0.2);
  filter: blur(48px);
  pointer-events: none;
}

.card-heading {
  text-align: center;
}

.identity-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  border: 1px solid rgba(255, 146, 110, 0.34);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 80, 0, 0.7), rgba(108, 13, 8, 0.6));
  box-shadow: 0 12px 30px rgba(255, 80, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  place-items: center;
}

.identity-mark img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.card-heading p,
.card-heading h1,
.card-heading span {
  margin: 0;
}

.card-heading p {
  color: rgba(255, 128, 88, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.card-heading h1 {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: 0;
}

.card-heading span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

#loginForm {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.field {
  display: grid;
  gap: 9px;
}

.field label {
  color: #d5c5c1;
  font-size: 13px;
  font-weight: 750;
}

.input-shell {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(255, 178, 150, 0.22);
  border-radius: 12px;
  background: rgba(8, 4, 5, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-shell:focus-within {
  border-color: var(--accent);
  background: rgba(32, 8, 7, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 80, 0, 0.12), 0 0 28px rgba(255, 80, 0, 0.08);
}

.field.invalid .input-shell {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 90, 78, 0.1);
}

.input-shell input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
}

.input-shell input::placeholder {
  color: #735f5b;
}

.field-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  color: #9d7770;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 18px 18px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 18px 18px;
}

.user-icon {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.25C14.4853 12.25 16.5 10.2353 16.5 7.75C16.5 5.26472 14.4853 3.25 12 3.25C9.51472 3.25 7.5 5.26472 7.5 7.75C7.5 10.2353 9.51472 12.25 12 12.25Z' fill='black'/%3E%3Cpath d='M4.75 20C4.75 16.5482 7.54822 13.75 11 13.75H13C16.4518 13.75 19.25 16.5482 19.25 20C19.25 20.4142 18.9142 20.75 18.5 20.75H5.5C5.08579 20.75 4.75 20.4142 4.75 20Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.25C14.4853 12.25 16.5 10.2353 16.5 7.75C16.5 5.26472 14.4853 3.25 12 3.25C9.51472 3.25 7.5 5.26472 7.5 7.75C7.5 10.2353 9.51472 12.25 12 12.25Z' fill='black'/%3E%3Cpath d='M4.75 20C4.75 16.5482 7.54822 13.75 11 13.75H13C16.4518 13.75 19.25 16.5482 19.25 20C19.25 20.4142 18.9142 20.75 18.5 20.75H5.5C5.08579 20.75 4.75 20.4142 4.75 20Z' fill='black'/%3E%3C/svg%3E");
}

.lock-icon {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 10V8C7.25 5.37665 9.37665 3.25 12 3.25C14.6234 3.25 16.75 5.37665 16.75 8V10H17.5C18.4665 10 19.25 10.7835 19.25 11.75V18.5C19.25 19.4665 18.4665 20.25 17.5 20.25H6.5C5.5335 20.25 4.75 19.4665 4.75 18.5V11.75C4.75 10.7835 5.5335 10 6.5 10H7.25ZM9.25 10H14.75V8C14.75 6.48122 13.5188 5.25 12 5.25C10.4812 5.25 9.25 6.48122 9.25 8V10ZM12 14.25C11.4477 14.25 11 14.6977 11 15.25V16.75C11 17.3023 11.4477 17.75 12 17.75C12.5523 17.75 13 17.3023 13 16.75V15.25C13 14.6977 12.5523 14.25 12 14.25Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.25 10V8C7.25 5.37665 9.37665 3.25 12 3.25C14.6234 3.25 16.75 5.37665 16.75 8V10H17.5C18.4665 10 19.25 10.7835 19.25 11.75V18.5C19.25 19.4665 18.4665 20.25 17.5 20.25H6.5C5.5335 20.25 4.75 19.4665 4.75 18.5V11.75C4.75 10.7835 5.5335 10 6.5 10H7.25ZM9.25 10H14.75V8C14.75 6.48122 13.5188 5.25 12 5.25C10.4812 5.25 9.25 6.48122 9.25 8V10ZM12 14.25C11.4477 14.25 11 14.6977 11 15.25V16.75C11 17.3023 11.4477 17.75 12 17.75C12.5523 17.75 13 17.3023 13 16.75V15.25C13 14.6977 12.5523 14.25 12 14.25Z' fill='black'/%3E%3C/svg%3E");
}

.password-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.password-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.password-toggle span {
  position: relative;
  width: 18px;
  height: 12px;
  border: 1.5px solid #9d7770;
  border-radius: 50% / 60%;
}

.password-toggle span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9d7770;
  transform: translate(-50%, -50%);
}

.password-toggle[aria-pressed="true"] span::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -2px;
  width: 22px;
  height: 1.5px;
  border-radius: 999px;
  background: #9d7770;
  transform: rotate(-42deg);
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: -3px;
  color: #887673;
  font-size: 12px;
}

.remember-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9a9a5;
  cursor: pointer;
}

.remember-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.remember-option > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255, 181, 155, 0.28);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
}

.remember-option input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 80, 0, 0.24);
}

.remember-option input:checked + span::after {
  content: "";
  width: 10px;
  height: 8px;
  background: #fff;
  mask: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.263 8.475L0.488 4.7L1.902 3.286L4.263 5.647L10.098 0.012L11.488 1.452L4.263 8.475Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.263 8.475L0.488 4.7L1.902 3.286L4.263 5.647L10.098 0.012L11.488 1.452L4.263 8.475Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.login-error {
  min-height: 18px;
  margin: -8px 0 -4px;
  color: var(--error);
  font-size: 12px;
  line-height: 1.5;
}

.captcha-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 178, 150, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 80, 0, 0.12), rgba(10, 5, 6, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px);
}

.captcha-block[hidden] {
  display: none;
}

.captcha-heading,
.captcha-row,
.auth-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.captcha-heading {
  justify-content: space-between;
}

.captcha-heading label {
  color: #f1d7cf;
  font-size: 13px;
  font-weight: 800;
}

.captcha-refresh,
.register-button {
  border: 1px solid rgba(255, 178, 150, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #ffb08f;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}

.captcha-refresh {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
}

.captcha-refresh:hover,
.register-button:hover {
  border-color: rgba(255, 80, 0, 0.64);
  background: rgba(255, 80, 0, 0.1);
}

.captcha-question {
  flex: 0 0 auto;
  min-width: 118px;
  padding: 13px 14px;
  border-radius: 11px;
  background: rgba(255, 80, 0, 0.12);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.02em;
}

.captcha-row input {
  min-width: 0;
  width: 100%;
  height: 45px;
  border: 1px solid rgba(255, 178, 150, 0.22);
  border-radius: 11px;
  outline: 0;
  background: rgba(8, 4, 5, 0.5);
  color: #fff;
  font: inherit;
  padding: 0 12px;
}

.captcha-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 80, 0, 0.12);
}

.captcha-block p {
  margin: 0;
  color: #927b76;
  font-size: 12px;
  line-height: 1.5;
}

.auth-actions {
  align-items: stretch;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid rgba(255, 181, 155, 0.26);
  border-radius: 12px;
  background: linear-gradient(180deg, #ff742e 0%, var(--accent) 58%, #e84600 100%);
  color: white;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(255, 80, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.auth-actions .login-button {
  flex: 1 1 auto;
}

.register-button {
  flex: 0 0 104px;
  min-height: 52px;
  border-radius: 12px;
}

.register-button:active {
  transform: translateY(1px);
}

.login-button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(255, 80, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.login-button:active {
  transform: translateY(0);
}

.login-button:disabled {
  cursor: wait;
  filter: saturate(0.65);
  transform: none;
}

.login-button i {
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.login-button.loading i {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

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

.login-button.success {
  background: linear-gradient(180deg, #ff8a4d, #ff5000);
  box-shadow: 0 0 0 4px rgba(255, 80, 0, 0.12), 0 18px 50px rgba(255, 80, 0, 0.4);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  color: #765f5b;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.card-footer span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.card-footer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 80, 0, 0.8);
}

.page-footer {
  position: fixed;
  right: 0;
  bottom: 22px;
  left: 0;
  color: rgba(255, 255, 255, 0.28);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 640px) {
  .login-header {
    position: relative;
    min-height: auto;
    padding: 16px;
  }

  .brand strong {
    font-size: 16px;
  }

  .brand small,
  .security-label {
    display: none;
  }

  .login-stage {
    min-height: calc(100vh - 76px);
    padding: 88px 16px 64px;
  }

  .credential-card {
    padding: 36px 24px 22px;
  }

  .form-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .page-footer {
    position: relative;
    bottom: auto;
    padding: 0 18px 20px;
  }
}

@media (max-height: 780px) and (min-width: 641px) {
  .login-header {
    min-height: 72px;
    padding-block: 12px;
  }

  .login-stage {
    padding-top: 116px;
    padding-bottom: 52px;
  }

  .credential-card {
    padding-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-rays-container,
  .login-button,
  .login-button.loading i {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}