/* NovaPhoenix — sign-in / sign-up page. Values from the design "Myngul Sign In" (mg-* keyframes, wall, veil, card, ticker).
   Logical properties so RTL mirrors. */
@keyframes mg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mg-drift-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mg-drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes mg-feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mg-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* page frame: the auth page owns the whole viewport (no app header/footer on sign pages) */
body.visitor .np-container:has(> .np-shell .np-auth) { max-width: none; padding: 0; }
.np-shell:has(.np-auth) { margin: 0; }
.np-shell:has(.np-auth) > div { width: 100%; padding: 0 !important; }
body.visitor:has(.np-auth) > .main-wrapper > .footer, body.visitor:has(.np-auth) .np-auth ~ .footer { display: none; }

.np-auth {
  --color-accent: #d2a072; --color-accent-100: #fbf4ec; --color-accent-200: #f3e2cd; --color-accent-300: #e8caa6; --color-accent-400: #ddb388;
  --color-accent-700: #7f5a37; --color-accent-800: #54402b; --color-accent-900: #2f261f;
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
  color: var(--color-text); font-family: var(--font-body); background: var(--color-bg); text-align: start;
}

/* drifting photo wall: 6 columns ≥1300px, 4 ≥900px, 2 below; odd columns drift down, even up (60s + 8s per column) */
.np-auth-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 0 14px; opacity: .5; }
.np-auth-col { overflow: hidden; height: 100vh; min-height: 100%; }
.np-auth-drift { display: flex; flex-direction: column; gap: 14px; animation: mg-drift-up 60s linear infinite; will-change: transform; }
.np-auth-drift.is-down { animation-name: mg-drift-down; }
.np-auth-tile { flex: none; border-radius: 16px; overflow: hidden; background: var(--color-surface); }
.np-auth-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1299.98px) { .np-auth-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .np-auth-col:nth-child(n+5) { display: none; } }
@media (max-width: 899.98px) { .np-auth-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-auth-col:nth-child(n+3) { display: none; } }
.np-auth-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 620px 560px at 50% 48%, rgba(22,24,38,.97) 0%, rgba(22,24,38,.9) 45%, rgba(22,24,38,.55) 75%, rgba(22,24,38,.35) 100%),
    linear-gradient(180deg, var(--color-bg) 0%, transparent 18%, transparent 82%, var(--color-bg) 100%);
}

/* header */
.np-auth-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 20px 28px; }
.np-auth-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.np-auth-brand:hover { color: var(--color-text); }
.np-auth-brand .np-brand-logo { max-height: 34px; }
.np-auth-mark { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--color-accent); display: grid; place-items: center; color: var(--color-accent); box-shadow: 0 0 20px rgba(210,160,114,.35); }
.np-auth-mark i { font-size: 18px; }
.np-auth-name { font-size: 18px; font-weight: 500; }
.np-auth-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.np-auth-lang.btn { color: var(--color-neutral-300); font-size: 13px; gap: 6px; }
.np-auth-app.btn { font-size: 13px; gap: 6px; background: rgba(22,24,38,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* hero + card */
.np-auth-main { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 10px 20px 40px; }
.np-auth-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 640px; }
.np-auth-kicker { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-300); }
.np-auth-kicker > span { width: 22px; height: 1px; background: linear-gradient(to left, var(--color-accent), transparent); }
.np-auth-kicker > span:last-child { background: linear-gradient(to right, var(--color-accent), transparent); }
.np-auth-hero h1 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 64px; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; color: var(--color-text); }
.np-auth-hero p { margin: 0; font-size: 15.5px; color: var(--color-neutral-300); max-width: 440px; text-wrap: pretty; }

.np-auth-cardwrap { position: relative; width: min(420px, 100%); }
.np-auth-glow { position: absolute; inset: -1px; border-radius: 21px; background: conic-gradient(from 210deg, transparent 0deg, rgba(210,160,114,.65) 60deg, transparent 140deg, transparent 360deg); animation: mg-glow 4s ease-in-out infinite; }
.np-auth-card {
  position: relative; padding: 26px 24px 22px; border-radius: 20px; background: rgba(30,32,46,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: mg-in .35s ease-out;
}
.np-auth-form > .js_panel, .np-auth-form form { display: flex; flex-direction: column; gap: 16px; }
.np-auth-form form { gap: 14px; }
.np-auth-head { display: flex; flex-direction: column; gap: 4px; }
.np-auth-title { font-size: 18px; font-weight: 500; }
.np-auth-sub { font-size: 13px; color: var(--color-neutral-400); }

.np-auth-field { position: relative; }
.np-auth-field > i, .np-auth-at { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--color-neutral-500); pointer-events: none; }
.np-auth-at { font-size: 15px; }
.np-auth .input { width: 100%; height: 50px; padding-inline: 42px 14px; font-size: 15px; border-radius: 12px; }
.np-auth .np-auth-field.is-at .input { padding-inline-start: 30px; }
.np-auth .input.has-end { padding-inline-end: 46px; }
.np-auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.np-auth-two .input { height: 46px; padding-inline: 14px; }
.np-auth-form form > .np-auth-field:not(:has(.has-end)) .input[name="username"], .np-auth-form form .np-auth-field .input[name="email"] { height: 46px; }
.np-auth-eye {
  all: unset; cursor: pointer; position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  display: grid; place-items: center; color: var(--color-neutral-400);
}
.np-auth-eye:hover { color: var(--color-accent); }
.np-auth-eye:focus-visible { outline: 2px solid var(--color-accent); border-radius: 8px; }
.np-auth-eye .x-hidden { display: none; }

.np-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.np-auth a { color: var(--color-accent); text-decoration: none; }
.np-auth a:hover { color: var(--color-accent-400); }
.np-auth-check { position: relative; display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; font-size: 13px; line-height: 1.4; color: var(--color-neutral-300); }
.np-auth-check input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; }
.np-auth-box { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--color-neutral-600); color: var(--color-bg); transition: background .15s, box-shadow .15s; }
.np-auth-box i { font-size: 11px; opacity: 0; }
.np-auth-check input:checked + .np-auth-box { background: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.np-auth-check input:checked + .np-auth-box i { opacity: 1; }
.np-auth-check input:focus-visible + .np-auth-box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.np-auth-cta.btn { height: 50px; font-size: 15px; border-radius: 12px; gap: 8px; justify-content: center; box-shadow: 0 0 30px rgba(210,160,114,.2); }
.np-auth .alert { margin: 0; font-size: 13px; border-radius: 12px; }

.np-auth-pw .np-auth-bars { display: flex; gap: 4px; margin-top: 8px; }
.np-auth-pw .np-auth-bars span { flex: 1; height: 3px; border-radius: 2px; background: var(--color-neutral-800); transition: background .3s; }
.np-auth-strength { display: block; margin-top: 5px; font-size: 11.5px; color: var(--color-neutral-500); }
.np-auth-label { margin: 2px 0 -6px; font-size: 12px; color: var(--color-neutral-400); }
.np-auth-three { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 8px; }
.np-auth .js_hidden-section:not(.x-hidden) { display: flex; flex-direction: column; gap: 12px; }
.np-auth .form-select { height: 46px; border-radius: 12px; font-size: 14px; }

.np-auth-bonus {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: var(--color-accent-200);
  background: var(--color-accent-900); box-shadow: inset 0 0 0 1px var(--color-accent-800);
}
.np-coin-mini { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #fbf4ec 0%, #e8caa6 26%, #d2a072 58%, #7f5a37 100%); }
.np-coin-mini i { font-size: 11px; color: #54402b; }

.np-auth-or { display: flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); }
.np-auth-or span { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--color-divider)); }
.np-auth-or span:last-child { background: linear-gradient(to left, transparent, var(--color-divider)); }
.np-auth-socials { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.np-auth a.np-auth-social {
  width: 56px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-neutral-700); transition: box-shadow .2s, background .2s;
}
.np-auth a.np-auth-social:hover { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.np-auth-social i { font-size: 21px; }
.np-auth-social-txt { font-size: 13px; font-weight: 600; }
.np-auth-terms { font-size: 11.5px; line-height: 1.5; color: var(--color-neutral-500); text-align: center; text-wrap: pretty; }
.np-auth-switch { font-size: 13px; color: var(--color-neutral-400); text-align: center; }

/* "Earning right now" ticker (design marketing copy) */
.np-auth-earn { position: absolute; z-index: 2; inset-inline-end: 28px; bottom: 64px; width: 250px; display: flex; flex-direction: column; gap: 8px; }
.np-auth-earn-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-400); }
.np-auth-earn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); animation: mg-glow 1.6s infinite; }
.np-auth-earn-view { height: 190px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.np-auth-earn-track { animation: mg-feed 22s linear infinite; }
.np-auth-earn-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 8px; border-radius: 12px; background: rgba(30,32,46,.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.np-auth-earn-av { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--color-neutral-800); display: grid; place-items: center; font-size: 10px; }
.np-auth-earn-text { flex: 1; min-width: 0; font-size: 12px; color: var(--color-neutral-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-auth-earn-text b { font-weight: 500; color: var(--color-text); }
.np-auth-earn-amt { font-size: 12px; font-weight: 500; color: var(--color-accent-200); font-variant-numeric: tabular-nums; }
@media (max-width: 979.98px) { .np-auth-earn { display: none; } }

/* footer */
.np-auth-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px 18px; flex-wrap: wrap; padding: 14px 20px 18px; font-size: 12px; color: var(--color-neutral-500); }
.np-auth-foot a { color: var(--color-neutral-400); }
.np-auth-foot a:hover { color: var(--color-accent-200); }

/* narrow (design: wide < 980px) */
@media (max-width: 979.98px) {
  .np-auth-main { padding: 10px 16px 30px; }
  .np-auth-hero h1 { font-size: 40px; }
  .np-auth-top { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .np-auth-drift, .np-auth-earn-track, .np-auth-glow, .np-auth-earn-dot { animation: none; }
}