:root {
  --fy-auth-bg: #080b12;
  --fy-auth-panel: rgba(14, 18, 29, 0.96);
  --fy-auth-panel-2: rgba(17, 23, 37, 0.92);
  --fy-auth-line: rgba(140, 158, 196, 0.18);
  --fy-auth-line-strong: rgba(116, 139, 255, 0.48);
  --fy-auth-text: #f4f6fb;
  --fy-auth-muted: #8e98ad;
  --fy-auth-primary: #7894ff;
  --fy-auth-primary-2: #825fd5;
  --fy-auth-success: #62d69e;
  --fy-auth-danger: #ff7188;
}

html.fy-auth-lock,
html.fy-auth-lock body {
  overflow: hidden !important;
}

.fy-auth-overlay,
.fy-redeem-modal {
  box-sizing: border-box;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.fy-auth-overlay *,
.fy-redeem-modal * {
  box-sizing: border-box;
}

.fy-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: auto;
  color: var(--fy-auth-text);
  background:
    radial-gradient(circle at 76% 14%, rgba(91, 75, 210, 0.2), transparent 31%),
    radial-gradient(circle at 18% 86%, rgba(44, 151, 206, 0.12), transparent 34%),
    linear-gradient(140deg, #070a10 0%, #0a0e18 52%, #080a11 100%);
}

.fy-auth-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(136, 153, 190, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136, 153, 190, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.fy-auth-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(390px, 1.08fr);
  width: min(940px, 100%);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--fy-auth-line);
  border-radius: 24px;
  background: var(--fy-auth-panel);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.025);
}

.fy-auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  overflow: hidden;
  border-right: 1px solid var(--fy-auth-line);
  background:
    linear-gradient(150deg, rgba(98, 128, 255, 0.14), rgba(121, 77, 206, 0.08) 52%, transparent),
    #0b0f19;
}

.fy-auth-brand::after {
  content: "FY";
  position: absolute;
  right: -20px;
  bottom: -58px;
  color: rgba(255, 255, 255, 0.025);
  font-size: 190px;
  font-weight: 900;
  letter-spacing: -0.12em;
  transform: rotate(-7deg);
}

.fy-auth-logo-row,
.fy-auth-feature,
.fy-redeem-user {
  display: flex;
  align-items: center;
}

.fy-auth-logo-row {
  position: relative;
  z-index: 1;
  gap: 13px;
}

.fy-auth-logo {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(145, 164, 255, 0.36);
  border-radius: 12px;
  overflow: hidden;
  color: white;
  background: #070916;
  box-shadow: 0 12px 35px rgba(96, 93, 219, 0.3);
  font-size: 23px;
  font-weight: 900;
  font-style: italic;
}

.fy-auth-logo img {
  width: 178%;
  height: 178%;
  object-fit: cover;
}

.fy-auth-mobile-brand {
  display: none;
}

.fy-auth-logo-row strong {
  display: block;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.fy-auth-logo-row span {
  display: block;
  margin-top: 2px;
  color: var(--fy-auth-muted);
  font-size: 11px;
}

.fy-auth-brand-copy {
  position: relative;
  z-index: 1;
  margin: auto 0;
}

.fy-auth-eyebrow {
  margin: 0 0 12px;
  color: #7ebdff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.fy-auth-brand h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.055em;
}

.fy-auth-brand-copy > p:last-of-type {
  margin: 18px 0 28px;
  color: #a1aabd;
  font-size: 14px;
  line-height: 1.8;
}

.fy-auth-feature-list {
  display: grid;
  gap: 12px;
}

.fy-auth-feature {
  gap: 10px;
  color: #c5ccdc;
  font-size: 12px;
}

.fy-auth-feature i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--fy-auth-success);
  background: rgba(98, 214, 158, 0.1);
  font-size: 12px;
  font-style: normal;
}

.fy-auth-service {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid rgba(98, 214, 158, 0.2);
  border-radius: 8px;
  color: #97dcb9;
  background: rgba(98, 214, 158, 0.065);
  font-size: 11px;
}

.fy-auth-service::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fy-auth-success);
  box-shadow: 0 0 12px rgba(98, 214, 158, 0.8);
}

.fy-auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 52px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent);
}

.fy-auth-overlay[data-auth-mode="register"] {
  place-items: start center;
}

.fy-auth-overlay[data-auth-mode="register"] .fy-auth-main {
  justify-content: flex-start;
  padding-top: 30px;
  padding-bottom: 30px;
}

.fy-auth-overlay[data-auth-mode="register"] .fy-auth-form {
  gap: 12px;
}

.fy-auth-main h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -0.04em;
}

.fy-auth-subtitle {
  min-height: 22px;
  margin: 9px 0 24px;
  color: var(--fy-auth-muted);
  font-size: 12px;
  line-height: 1.65;
}

.fy-auth-register-guide {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  margin: -5px 0 20px;
  padding: 10px 12px;
  border: 1px solid rgba(126, 149, 255, 0.13);
  border-radius: 10px;
  color: #9ba6bd;
  background: rgba(92, 111, 194, 0.055);
  font-size: 10px;
}

.fy-auth-register-guide span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.fy-auth-register-guide i,
.fy-auth-step-number {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(126, 190, 255, 0.38);
  border-radius: 50%;
  color: #8dccff;
  background: rgba(67, 149, 210, 0.09);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.fy-auth-register-guide b {
  color: #4f5b73;
  font-size: 14px;
  font-weight: 400;
}

.fy-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid rgba(133, 151, 189, 0.12);
  border-radius: 11px;
  background: rgba(2, 5, 11, 0.48);
}

.fy-auth-tab,
.fy-auth-link,
.fy-auth-submit,
.fy-code-button,
.fy-redeem-fab,
.fy-redeem-close,
.fy-redeem-submit {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.fy-auth-tab {
  padding: 9px 10px;
  border-radius: 8px;
  color: #7f899d;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.fy-auth-tab.is-active {
  color: #fff;
  background: rgba(115, 136, 232, 0.16);
  box-shadow: inset 0 0 0 1px rgba(126, 149, 255, 0.13);
}

.fy-auth-form {
  display: grid;
  gap: 15px;
}

.fy-auth-field {
  display: grid;
  gap: 8px;
}

.fy-auth-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b8c0d0;
  font-size: 11px;
  font-weight: 700;
}

.fy-auth-field label small,
.fy-auth-field-help {
  color: #69758d;
  font-size: 10px;
  font-weight: 500;
}

.fy-auth-field-help {
  display: block;
  margin-top: -2px;
  line-height: 1.45;
}

.fy-auth-field input,
.fy-redeem-input {
  width: 100%;
  min-width: 0;
  height: 45px;
  outline: none;
  border: 1px solid rgba(132, 150, 187, 0.22);
  border-radius: 10px;
  color: var(--fy-auth-text);
  background: rgba(5, 8, 14, 0.78);
  font: inherit;
  font-size: 13px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.fy-auth-field input {
  padding: 0 14px;
}

.fy-auth-field input:focus,
.fy-redeem-input:focus {
  border-color: var(--fy-auth-line-strong);
  box-shadow: 0 0 0 3px rgba(102, 127, 239, 0.1);
}

.fy-auth-code-row {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 9px;
}

.fy-auth-captcha-row {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 9px;
}

.fy-auth-captcha-image {
  display: grid;
  height: 45px;
  padding: 0;
  overflow: hidden;
  place-items: center;
  outline: none;
  border: 1px solid rgba(132, 150, 187, 0.22);
  border-radius: 10px;
  color: #7f8ba3;
  background: #090d16;
  cursor: pointer;
}

.fy-auth-captcha-image:hover {
  border-color: rgba(124, 145, 243, 0.48);
}

.fy-auth-captcha-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fy-auth-captcha-image span {
  font-size: 10px;
}

.fy-auth-captcha-passed {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(98, 214, 158, 0.18);
  border-radius: 9px;
  color: #8bdcb7;
  background: rgba(98, 214, 158, 0.055);
  font-size: 11px;
}

.fy-auth-optional-field {
  padding-top: 2px;
}

.fy-auth-register-limit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(240, 191, 104, 0.16);
  border-radius: 9px;
  color: #a69b87;
  background: rgba(208, 153, 65, 0.045);
  font-size: 10px;
  line-height: 1.55;
}

.fy-auth-register-limit i {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #e9bf70;
  background: rgba(233, 191, 112, 0.1);
  font-style: normal;
  font-weight: 800;
}

.fy-auth-captcha-passed i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: rgba(98, 214, 158, 0.12);
  font-style: normal;
}

.fy-code-button {
  border: 1px solid rgba(124, 145, 243, 0.32);
  border-radius: 10px;
  color: #bfcaff;
  background: rgba(100, 119, 211, 0.11);
  font-size: 11px;
  font-weight: 700;
}

.fy-code-button:hover:not(:disabled) {
  border-color: rgba(124, 145, 243, 0.56);
  background: rgba(100, 119, 211, 0.18);
}

.fy-code-button:disabled,
.fy-auth-submit:disabled,
.fy-redeem-submit:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.fy-auth-message {
  display: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.55;
}

.fy-auth-message.is-visible {
  display: block;
}

.fy-auth-message.is-error {
  border: 1px solid rgba(255, 113, 136, 0.24);
  color: #ff9bad;
  background: rgba(255, 89, 116, 0.075);
}

.fy-auth-message.is-success {
  border: 1px solid rgba(98, 214, 158, 0.22);
  color: #8de0b9;
  background: rgba(98, 214, 158, 0.07);
}

.fy-auth-message.is-info {
  border: 1px solid rgba(115, 170, 255, 0.2);
  color: #a9c8ff;
  background: rgba(82, 132, 218, 0.065);
}

.fy-auth-submit,
.fy-redeem-submit {
  height: 46px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(100deg, #638bd5, #7767d1 75%);
  box-shadow: 0 11px 30px rgba(92, 100, 205, 0.22);
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.18s, filter 0.18s;
}

.fy-auth-remember {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #aeb7c9;
  font-size: 11px;
  cursor: pointer;
}

.fy-auth-remember input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #728be9;
}

.fy-auth-remember small {
  color: #616b80;
  font-size: 10px;
}

.fy-auth-submit:hover:not(:disabled),
.fy-redeem-submit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.fy-auth-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.fy-auth-link {
  padding: 3px;
  color: #8f9ab0;
  background: none;
  font-size: 11px;
}

.fy-auth-link:hover {
  color: #cbd4ff;
}

.fy-auth-version {
  margin-top: 26px;
  color: #50596c;
  text-align: center;
  font-size: 10px;
}

.fy-redeem-fab {
  position: fixed;
  z-index: 2147482000;
  top: 70px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(125, 147, 255, 0.3);
  border-radius: 11px;
  color: #e8ecff;
  background: rgba(17, 22, 36, 0.92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(15px);
  font-size: 12px;
  font-weight: 700;
}

.fy-redeem-fab:hover {
  border-color: rgba(125, 147, 255, 0.55);
  background: rgba(27, 34, 57, 0.96);
}

[data-fy-redeem-entry] {
  cursor: pointer !important;
}

.fy-redeem-fab-icon {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 6px;
  color: #b9c5ff;
  background: rgba(118, 139, 239, 0.14);
  font-size: 12px;
}

.fy-redeem-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--fy-auth-text);
  background: rgba(2, 4, 8, 0.72);
  backdrop-filter: blur(10px);
}

.fy-redeem-card {
  width: min(430px, 100%);
  padding: 27px;
  border: 1px solid var(--fy-auth-line);
  border-radius: 18px;
  background: #101521;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.fy-redeem-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.fy-redeem-head h3 {
  margin: 0;
  font-size: 23px;
}

.fy-redeem-head p {
  margin: 8px 0 0;
  color: var(--fy-auth-muted);
  font-size: 11px;
}

.fy-redeem-close {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(138, 153, 185, 0.16);
  border-radius: 8px;
  color: #9ca6b9;
  background: rgba(255, 255, 255, 0.025);
  font-size: 20px;
}

.fy-redeem-user {
  justify-content: space-between;
  gap: 14px;
  margin: 23px 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(131, 149, 187, 0.13);
  border-radius: 10px;
  background: rgba(4, 7, 13, 0.45);
}

.fy-redeem-user span {
  display: block;
  overflow: hidden;
  color: #9ba5b8;
  font-size: 10px;
  text-overflow: ellipsis;
}

.fy-redeem-user strong {
  flex: 0 0 auto;
  color: #f1d88f;
  font-size: 13px;
}

.fy-redeem-input {
  height: 50px;
  padding: 0 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fy-redeem-hint {
  margin: 9px 0 17px;
  color: #687287;
  font-size: 10px;
  text-align: center;
}

.fy-redeem-submit {
  width: 100%;
}

.fy-redeem-result {
  display: none;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.6;
}

.fy-redeem-result.is-visible {
  display: block;
}

.fy-redeem-result.is-success {
  border: 1px solid rgba(98, 214, 158, 0.2);
  color: #91dfbb;
  background: rgba(98, 214, 158, 0.07);
}

.fy-redeem-result.is-error {
  border: 1px solid rgba(255, 113, 136, 0.22);
  color: #ff9bad;
  background: rgba(255, 89, 116, 0.07);
}

@media (max-width: 760px) {
  .fy-auth-overlay { place-items: start center; padding: 14px; }
  .fy-auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .fy-auth-brand { display: none; }
  .fy-auth-main { justify-content: flex-start; padding: 28px 25px; }
  .fy-auth-mobile-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: #dfe5f3; font-size: 14px; }
  .fy-auth-mobile-brand span { display: grid; width: 30px; height: 30px; overflow: hidden; place-items: center; border: 1px solid rgba(145, 164, 255, 0.28); border-radius: 8px; background: #070916; }
  .fy-auth-mobile-brand img { width: 178%; height: 178%; object-fit: cover; }
  .fy-auth-register-guide { gap: 4px; padding-inline: 8px; }
  .fy-auth-register-guide span { gap: 4px; }
  .fy-redeem-fab { top: auto; right: 14px; bottom: 18px; }
}

@media (max-width: 430px) {
  .fy-auth-main { padding-inline: 19px; }
  .fy-auth-register-guide span { font-size: 9px; }
  .fy-auth-code-row { grid-template-columns: minmax(0, 1fr) 104px; }
  .fy-auth-captcha-row { grid-template-columns: minmax(0, 1fr) 116px; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .fy-auth-overlay { place-items: start center; }
  .fy-auth-shell { min-height: 540px; }
  .fy-auth-main, .fy-auth-brand { padding-top: 30px; padding-bottom: 30px; }
}