.mj-auth-page {
  --mjauth-card: rgba(13, 20, 30, 0.92);
  --mjauth-input: rgba(255, 255, 255, 0.045);
  --mjauth-input-hover: rgba(255, 255, 255, 0.07);
  --mjauth-soft-text: #bdc7d3;
  background: #070b12;
}

.mjauth-page {
  position: relative;
  min-height: max(760px, 100svh);
  padding: calc(var(--mj-header) + 36px) max(34px, calc((100vw - 1500px) / 2)) 64px;
  isolation: isolate;
}

.mjauth-page::before,
.mjauth-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.mjauth-page::before {
  width: 640px;
  height: 640px;
  inset: -260px -160px auto auto;
  background: radial-gradient(circle, rgba(53, 202, 134, 0.13), transparent 68%);
}

.mjauth-page::after {
  width: 560px;
  height: 560px;
  inset: auto auto -300px -140px;
  background: radial-gradient(circle, rgba(66, 90, 220, 0.13), transparent 68%);
}

.mjauth-shell {
  width: min(1240px, 100%);
  min-height: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(440px, 0.96fr);
  overflow: hidden;
  border: 1px solid var(--mj-line);
  border-radius: 34px;
  background: rgba(10, 16, 25, 0.68);
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px) saturate(122%);
}

.mjauth-story {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 5vw, 72px);
  background:
    linear-gradient(128deg, rgba(4, 10, 16, 0.92) 3%, rgba(6, 19, 19, 0.76) 52%, rgba(8, 29, 23, 0.62)),
    radial-gradient(circle at 88% 90%, rgba(66, 229, 164, 0.2), transparent 30%),
    #081119;
}

.mjauth-story::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.mjauth-story::after {
  content: "ENGLISH  •  CINEMA  •  EVERYDAY";
  position: absolute;
  inset: auto -54px 22px auto;
  color: rgba(255, 255, 255, 0.035);
  font: 900 28px/1 "Segoe UI", sans-serif;
  letter-spacing: 8px;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  white-space: nowrap;
}

.mjauth-story__glow {
  position: absolute;
  width: 410px;
  height: 410px;
  inset: auto -185px -170px auto;
  border: 1px solid rgba(var(--mj-accent-rgb), 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(var(--mj-accent-rgb), 0.025), 0 0 0 112px rgba(var(--mj-accent-rgb), 0.018);
}

.mjauth-story__content {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  margin-inline: auto;
}

.mjauth-eyebrow,
.mjauth-kicker {
  color: var(--mj-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.mjauth-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.mjauth-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }

.mjauth-story h1 {
  max-width: 600px;
  margin: 19px 0 15px;
  color: #f7fafc;
  font-size: clamp(38px, 4.3vw, 63px);
  line-height: 1.22;
  letter-spacing: -2.8px;
  text-wrap: balance;
}

.mjauth-story h1 em { color: var(--mj-primary); font-style: normal; }
.mjauth-story > div > p {
  max-width: 510px;
  margin: 0;
  color: #aab7c5;
  font-size: 14px;
  line-height: 2;
}

.mjauth-benefits { display: grid; gap: 13px; margin-top: 31px; }
.mjauth-benefits article { display: flex; align-items: center; gap: 13px; }
.mjauth-benefits article > span {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--mj-accent-rgb), 0.14);
  border-radius: 13px;
  background: rgba(var(--mj-accent-rgb), 0.075);
  color: var(--mj-primary);
}
.mjauth-benefits svg { width: 19px; height: 19px; }
.mjauth-benefits div { display: grid; gap: 1px; }
.mjauth-benefits strong { color: #f2f5f8; font-size: 12px; }
.mjauth-benefits small { color: #7f8d9c; font-size: 10px; }

.mjauth-cue {
  width: min(460px, 100%);
  margin: 34px 0 0;
  padding: 19px 21px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
}
.mjauth-cue__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; direction: ltr; color: #7f8c99; font: 800 8px/1 "Segoe UI", sans-serif; letter-spacing: 1.4px; }
.mjauth-cue__top b { padding: 5px 8px; border-radius: 7px; background: var(--mj-primary); color: var(--mj-on-primary); font-size: 8px; letter-spacing: 0; }
.mjauth-cue blockquote { margin: 14px 0 5px; color: #f5f8fa; font: 650 16px/1.55 "Segoe UI", sans-serif; }
.mjauth-cue figcaption { color: #94a2b0; font-size: 10px; }
.mjauth-cue__progress { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.mjauth-cue__progress i { position: relative; height: 3px; flex: 1; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.mjauth-cue__progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 68%; border-radius: inherit; background: var(--mj-primary); }
.mjauth-cue__progress span { color: #6f7d8b; font-size: 8px; white-space: nowrap; }

.mjauth-gateway { display: grid; place-items: center; padding: clamp(32px, 4vw, 60px); background: var(--mjauth-card); }
.mjauth-card { width: min(440px, 100%); }
.mjauth-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.mjauth-card__header h2 { margin: 5px 0 3px; color: var(--mj-text); font-size: clamp(26px, 2.2vw, 33px); line-height: 1.3; letter-spacing: -1px; }
.mjauth-card__header p { margin: 0; color: var(--mj-muted); font-size: 11px; }
.mjauth-mobile-mark { display: none; }

.mjauth-alert { display: flex; align-items: flex-start; gap: 10px; margin: -5px 0 18px; padding: 11px 13px; border: 1px solid; border-radius: 13px; font-size: 10px; line-height: 1.8; }
.mjauth-alert svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.mjauth-alert--success { border-color: rgba(var(--mj-accent-rgb),.25); background: rgba(var(--mj-accent-rgb),.08); color: #9cf1c8; }
.mjauth-alert--error { border-color: rgba(255,111,125,.28); background: rgba(255,111,125,.08); color: #ffadb5; }

.mjauth-tabs {
  position: relative;
  isolation: isolate;
  height: 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 23px;
  padding: 4px;
  border: 1px solid var(--mj-line);
  border-radius: 14px;
  background: rgba(255,255,255,.028);
}
.mjauth-tabs__indicator { position: absolute; z-index: -1; inset: 4px 4px 4px 50%; border: 1px solid rgba(var(--mj-accent-rgb),.18); border-radius: 10px; background: rgba(var(--mj-accent-rgb),.11); box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.mjauth-page[data-panel="signup"] .mjauth-tabs__indicator { transform: translateX(-100%); }
.mjauth-tabs button { border: 0; border-radius: 10px; background: transparent; color: var(--mj-muted); cursor: pointer; font-size: 11px; font-weight: 750; transition: color 180ms ease; }
.mjauth-tabs button[aria-selected="true"] { color: var(--mj-primary); }
.mjauth-panel[hidden] { display: none; }
.mjauth-panel { animation: mjauth-in 230ms ease both; }
@keyframes mjauth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mjauth-socials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mjauth-socials a { height: 43px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--mj-line); border-radius: 12px; background: var(--mjauth-input); color: var(--mjauth-soft-text); font-size: 10px; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.mjauth-socials a:hover { transform: translateY(-1px); border-color: var(--mj-line-strong); background: var(--mjauth-input-hover); }
.mjauth-socials b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; color: #1c2430; font: 800 13px/1 "Segoe UI", sans-serif; }
.mjauth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: var(--mj-muted); font-size: 8px; }
.mjauth-divider::before, .mjauth-divider::after { content: ""; height: 1px; flex: 1; background: var(--mj-line); }

.mjauth-form { display: grid; gap: 15px; }
.mjauth-field { display: grid; gap: 6px; color: var(--mjauth-soft-text); font-size: 10px; font-weight: 650; }
.mjauth-field > span:first-child { display: flex; align-items: center; gap: 5px; padding-inline: 2px; }
.mjauth-field > span:first-child small { color: var(--mj-muted); font-size: 8px; font-weight: 500; }
.mjauth-input {
  position: relative;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--mj-line);
  border-radius: 13px;
  background: var(--mjauth-input);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.mjauth-input:hover { background: var(--mjauth-input-hover); }
.mjauth-input:focus-within { border-color: rgba(var(--mj-accent-rgb),.53); background: rgba(var(--mj-accent-rgb),.035); box-shadow: 0 0 0 4px rgba(var(--mj-accent-rgb),.075); }
.mjauth-field.is-invalid .mjauth-input { border-color: rgba(255,111,125,.56); box-shadow: 0 0 0 4px rgba(255,111,125,.06); }
.mjauth-input > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #718092; }
.mjauth-input input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--mj-text); font-size: 12px; }
.mjauth-input input::placeholder { color: #667485; }
.mjauth-input input:-webkit-autofill { -webkit-text-fill-color: var(--mj-text); transition: background-color 9999s ease-in-out 0s; }
.mjauth-password-toggle { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #6f7d8c; cursor: pointer; }
.mjauth-password-toggle:hover { background: rgba(255,255,255,.06); color: var(--mj-text); }
.mjauth-password-toggle svg { width: 17px; height: 17px; }
.mjauth-password-toggle[aria-pressed="true"] svg { opacity: .55; }
.mjauth-error { min-height: 0; padding-inline: 2px; color: var(--mj-danger); font-size: 8px; font-weight: 550; }
.mjauth-error:empty { display: none; }

.mjauth-form__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--mj-muted); font-size: 9px; }
.mjauth-form__meta a, .mjauth-terms a { color: var(--mj-primary); font-weight: 700; }
.mjauth-check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.mjauth-check input { position: absolute; opacity: 0; pointer-events: none; }
.mjauth-check > span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid var(--mj-line-strong); border-radius: 6px; background: var(--mjauth-input); }
.mjauth-check input:checked + span { border-color: var(--mj-primary); background: var(--mj-primary); }
.mjauth-check input:checked + span::after { content: "✓"; color: var(--mj-on-primary); font: 900 10px/1 sans-serif; }
.mjauth-check input:focus-visible + span { outline: 3px solid var(--mj-primary); outline-offset: 3px; }

.mjauth-submit { height: 49px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--mj-accent-gradient); color: var(--mj-on-primary) !important; box-shadow: 0 13px 30px rgba(var(--mj-accent-strong-rgb),.18); cursor: pointer; font-size: 11px; font-weight: 850; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.mjauth-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--mj-accent-strong-rgb),.25); filter: brightness(1.04); }
.mjauth-submit:active { transform: translateY(0); }
.mjauth-submit svg { width: 18px; height: 18px; }
.mjauth-submit.is-loading { opacity: .75; pointer-events: none; }
.mjauth-submit.is-loading svg { animation: mjauth-spin 800ms linear infinite; }
@keyframes mjauth-spin { to { transform: rotate(360deg); } }

.mjauth-form__split { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.mjauth-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mjauth-strength i { height: 3px; border-radius: 99px; background: var(--mj-line); transition: background 180ms ease; }
.mjauth-strength[data-score="1"] i:nth-child(-n+1) { background: var(--mj-danger); }
.mjauth-strength[data-score="2"] i:nth-child(-n+2) { background: var(--mj-gold); }
.mjauth-strength[data-score="3"] i:nth-child(-n+3),
.mjauth-strength[data-score="4"] i { background: var(--mj-primary); }
.mjauth-terms { margin: -2px 0 0; color: var(--mj-muted); font-size: 8px; text-align: center; }
.mjauth-captcha { display: flex; justify-content: center; overflow: hidden; }
.mjauth-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 19px; color: #6f7d8c; font-size: 8px; line-height: 1.7; text-align: center; }
.mjauth-trust svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--mj-primary); }

html[data-theme="light"] .mj-auth-page {
  --mjauth-card: rgba(250, 252, 253, 0.96);
  --mjauth-input: rgba(17, 29, 38, 0.035);
  --mjauth-input-hover: rgba(17, 29, 38, 0.055);
  --mjauth-soft-text: #40505e;
  background: #eef3f2;
}
html[data-theme="light"] .mjauth-page { background: linear-gradient(145deg, rgba(226,242,236,.62), transparent 45%); }
html[data-theme="light"] .mjauth-shell { border-color: rgba(18,39,32,.11); background: rgba(255,255,255,.82); box-shadow: 0 38px 100px rgba(25,58,46,.13); }
html[data-theme="light"] .mjauth-card__header h2,
html[data-theme="light"] .mjauth-input input { color: #14221d; }
html[data-theme="light"] .mjauth-input input:-webkit-autofill { -webkit-text-fill-color: #14221d; }
html[data-theme="light"] .mjauth-input input::placeholder { color: #89958f; }

.mj-auth-page--recovery .mj-header,.mj-auth-page--recovery .mj-footer{display:none}
.mjauth-recovery{position:relative;min-height:100svh;display:grid;place-items:center;padding:90px 20px;background:radial-gradient(circle at 75% 10%,rgba(var(--mj-accent-strong-rgb),.13),transparent 28%),radial-gradient(circle at 10% 85%,rgba(78,112,224,.12),transparent 30%)}
.mjauth-recovery:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.mjauth-recovery__brand{position:absolute;top:28px;right:clamp(20px,5vw,70px)}
.mjauth-recovery__card{position:relative;z-index:1;width:min(470px,100%);padding:clamp(26px,5vw,48px);border:1px solid var(--mj-line);border-radius:28px;background:var(--mjauth-card);box-shadow:0 40px 110px rgba(0,0,0,.35);backdrop-filter:blur(24px)}
.mjauth-recovery__icon{width:55px;height:55px;display:grid;place-items:center;margin-bottom:22px;border-radius:18px;background:var(--mj-primary-soft);color:var(--mj-primary)}.mjauth-recovery__icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7}
.mjauth-recovery__card h1{margin:8px 0 9px;font-size:clamp(29px,4vw,40px);letter-spacing:-.035em}.mjauth-recovery__card>p{margin:0 0 25px;color:var(--mj-muted);font-size:10px;line-height:2}.mjauth-recovery__card .mjauth-form{margin-top:18px}.mjauth-recovery__card .mjauth-submit{width:100%}
.mjauth-notice{display:flex;align-items:flex-start;gap:10px;margin:16px 0;padding:12px;border:1px solid;border-radius:13px;font-size:9px;line-height:1.8}.mjauth-notice span{width:23px;height:23px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;font-weight:900}.mjauth-notice p{margin:0}.mjauth-notice--success{border-color:rgba(var(--mj-accent-strong-rgb),.25);background:rgba(var(--mj-accent-strong-rgb),.08);color:#7de6b2}.mjauth-notice--success span{background:#43d795;color:#062017}.mjauth-notice--error{border-color:rgba(244,91,91,.25);background:rgba(244,91,91,.08);color:#ff9a9a}.mjauth-notice--error span{background:#f45b5b;color:#fff}
.mjauth-recovery__back{display:block;margin-top:20px;color:var(--mj-primary);font-size:9px;font-weight:800;text-align:center}.mjauth-recovery__privacy{display:block;margin-top:19px;padding-top:16px;border-top:1px solid var(--mj-line);color:var(--mj-muted);font-size:8px;line-height:1.8;text-align:center}.mjauth-submit--link{margin-top:22px}.mjauth-eyebrow--error{color:#ff8c8c}.mjauth-eyebrow--error i{background:#f45b5b;box-shadow:0 0 0 4px rgba(244,91,91,.12)}
html[data-theme="light"] .mjauth-recovery__card{box-shadow:0 35px 100px rgba(24,68,50,.12)}html[data-theme="light"] .mjauth-notice--success{color:#16653f}html[data-theme="light"] .mjauth-notice--error{color:#a32e2e}

@media (max-width: 1020px) {
  .mjauth-page { padding-inline: 26px; }
  .mjauth-shell { grid-template-columns: minmax(0, .85fr) minmax(410px, 1.15fr); }
  .mjauth-story { padding: 42px 35px; }
  .mjauth-story h1 { font-size: 40px; }
  .mjauth-benefits small { display: none; }
  .mjauth-cue { margin-top: 27px; }
  .mjauth-gateway { padding: 38px; }
}

@media (max-width: 790px) {
  .mjauth-page { min-height: 100svh; padding: calc(var(--mj-header) + 18px) 18px calc(92px + env(safe-area-inset-bottom)); }
  .mjauth-shell { min-height: 0; grid-template-columns: 1fr; border-radius: 26px; }
  .mjauth-story { display: none; }
  .mjauth-gateway { min-height: 620px; padding: 36px clamp(20px, 6vw, 44px); }
  .mjauth-mobile-mark { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: var(--mj-accent-gradient); box-shadow: 0 10px 28px rgba(var(--mj-accent-strong-rgb),.22); }
  .mjauth-mobile-mark img { width: 100%; height: 100%; display: block; }
  .mj-auth-page .mj-footer { display: none; }
  .mjauth-recovery{padding:92px 14px calc(96px + env(safe-area-inset-bottom));place-items:start center}.mjauth-recovery__brand{top:20px;right:20px}.mjauth-recovery__card{padding:27px 20px;border-radius:22px}.mj-auth-page--recovery .mj-bottom-nav{display:flex}
}

@media (max-width: 480px) {
  .mjauth-page { padding-inline: 12px; }
  .mjauth-shell { border-radius: 22px; }
  .mjauth-gateway { padding: 28px 18px 31px; }
  .mjauth-card__header { margin-bottom: 20px; }
  .mjauth-card__header h2 { font-size: 25px; }
  .mjauth-form__split { grid-template-columns: 1fr; }
  .mjauth-socials { grid-template-columns: 1fr; }
  .mjauth-form__meta { align-items: flex-start; }
  .mjauth-trust { padding-inline: 5px; }
  .mjauth-captcha { justify-content: flex-start; transform-origin: right center; }
}

@media (max-height: 790px) and (min-width: 791px) {
  .mjauth-page { padding-top: calc(var(--mj-header) + 18px); }
  .mjauth-shell { min-height: 640px; }
  .mjauth-story, .mjauth-gateway { padding-block: 34px; }
  .mjauth-story h1 { margin-block: 12px 9px; font-size: 43px; }
  .mjauth-benefits { margin-top: 22px; }
  .mjauth-cue { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .mjauth-panel, .mjauth-submit, .mjauth-tabs__indicator { animation: none; transition: none; }
}

.mjauth-method{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 18px;padding:4px;border:1px solid var(--mj-line);border-radius:14px;background:var(--mjauth-input)}
.mjauth-method button{min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--mj-muted);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.mjauth-method button.is-active{background:var(--mj-surface,#18231f);color:var(--mj-text);box-shadow:0 5px 16px rgba(0,0,0,.16)}
.mjauth-method button:disabled{opacity:.48;cursor:not-allowed}.mjauth-method button small{display:inline-block;margin-right:4px;font-size:10px;color:var(--mj-muted)}
.mjauth-otp__hint{margin:0 0 12px;color:var(--mj-muted);font-size:13px;line-height:1.8;text-align:center}
.mjauth-input--otp input{font-size:24px!important;font-weight:900;letter-spacing:.42em;text-align:center}
.mjauth-link-button{display:block;margin:11px auto 0;border:0;background:transparent;color:var(--mj-primary);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.mjauth-link-button:disabled{opacity:.5;cursor:not-allowed}
.mjauth-otp__message{min-height:24px;margin:10px 0 0;color:var(--mj-primary);font-size:13px;line-height:1.7;text-align:center}
.mjauth-otp__message.is-error{color:var(--mj-danger,#ef6464)}
.mjauth-otp [data-otp-stage][hidden],[data-auth-method-panel][hidden]{display:none!important}
.mjauth-recovery__card>p,.mjauth-recovery__privacy,.mjauth-notice,.mjauth-recovery__back{font-size:13px}
.mjauth-terms,.mjauth-trust{font-size:12px}
.mja-security__divider{height:1px;margin:24px 0;border:0;background:var(--mj-line)}
