/* =========================================================
   نابغه مارکت · صفحه‌ی ورود — بازطراحی ۱۴۰۵/۰۷/۱۹ (هم‌خانواده با ورود نابغه چت، رنگ یاقوتی برند)
   ========================================================= */
.nl{ --r:#C81243; --rl:#FF4368; --rd:#7E0B31; --gold:#F0B429;
  --grad: linear-gradient(135deg, var(--rl), var(--r) 55%, var(--rd));
  --h:#1B1220; --tx:#5D4B56; --fa:#A08A95; --line:#F1DEE1; --card:#fff; --card2:#FDF7F8;
  padding-top:40px; padding-bottom:64px; }
.nl svg.i{ width:1em; height:1em; flex-shrink:0; display:inline-block; }
.nl-shell{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); max-width:1040px; margin:0 auto; border-radius:32px; overflow:hidden;
  background: var(--card); border:1px solid var(--line); box-shadow: 0 40px 90px -46px rgba(89,8,36,.45); animation: nlIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes nlIn{ from{ opacity:0; transform: translateY(18px) scale(.985); } }

/* ---------- form ---------- */
.nl-form{ display:flex; align-items:center; justify-content:center; padding:44px 40px; }
.nl-card{ position:relative; width:100%; max-width:400px; }
.nl-head{ text-align:center; margin-bottom:18px; }
.nl-badge{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:800; color: var(--r); background: rgba(200,18,67,.07); border:1px solid rgba(200,18,67,.18); }
.nl-badge .dot{ width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.2); animation: nlBlink 2s infinite; }
@keyframes nlBlink{ 50%{ opacity:.35; } }
.nl-head h1{ margin:14px 0 8px; font-size: clamp(1.35rem, 3vw, 1.6rem); font-weight:900; color: var(--h); line-height:1.5; }
.nl-head p{ margin:0; font-size:.84rem; line-height:1.9; color: var(--tx); }
.nl-g{ background: linear-gradient(110deg, var(--rl), var(--r) 40%, var(--gold) 70%, var(--rl)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: nlShine 6s linear infinite; }
@keyframes nlShine{ to{ background-position:-220% 0; } }
.nl-gift{ display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; padding:11px 13px; border-radius:16px; font-size:.78rem; line-height:1.8; color:#7A4A06; background: linear-gradient(135deg, rgba(240,180,41,.16), rgba(240,180,41,.06)); border:1px solid rgba(240,180,41,.4); }
.nl-gift .ic{ flex-shrink:0; width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.95rem; background: linear-gradient(135deg, #F0B429, #E08A00); }
.nl-gift b{ color:#5C3600; }
.nl-gift small{ color:#9A6A1A; }

.nl-tabs{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:5px; margin-bottom:20px; border-radius:16px; background: var(--card2); border:1px solid var(--line); }
.nl-tab-pill{ position:absolute; top:5px; bottom:5px; right:5px; width:calc(50% - 5px); border-radius:12px; background: var(--grad); box-shadow: 0 10px 22px -12px rgba(200,18,67,.8); transition: transform .45s cubic-bezier(.65,0,.35,1); }
.nl-tabs.email .nl-tab-pill{ transform: translateX(-100%); }
.nl-tab{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; height:42px; border:0; background:none; font-family:inherit; font-size:.84rem; font-weight:800; color: var(--tx); cursor:pointer; transition: color .3s; }
.nl-tab.is-on{ color:#fff; }

.nl-flow{ display:none; } .nl-flow.is-on{ display:block; }
.nl-step{ display:none; }
.nl-step.is-on{ display:block; animation: nlStep .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes nlStep{ from{ opacity:0; transform: translateX(-18px); } }
.nl-step.back.is-on{ animation-name: nlStepBack; }
@keyframes nlStepBack{ from{ opacity:0; transform: translateX(18px); } }
.nl-label{ display:block; margin-bottom:8px; font-size:.8rem; font-weight:800; color: var(--h); }
.nl-field{ position:relative; }
.nl-field-ic{ position:absolute; right:14px; top:50%; transform: translateY(-50%); font-size:1.1rem; color: var(--fa); transition: color .2s; pointer-events:none; }
.nl .nl-field input{ width:100%; height:54px; min-height:0; box-sizing:border-box; padding:0 46px 0 16px; border-radius:16px; border:1.5px solid var(--line); background: var(--card2); color: var(--h); font-family:inherit; font-size:16px; font-weight:700; letter-spacing:.04em; text-align:right; outline:none; box-shadow:none; transition: border-color .2s, box-shadow .2s, background .2s; }
.nl .nl-field input::placeholder{ color: var(--fa); font-weight:500; }
.nl .nl-field input:focus{ border-color: var(--r); background:#fff; box-shadow: 0 0 0 4px rgba(200,18,67,.12); }
.nl-field:focus-within .nl-field-ic{ color: var(--r); }
.nl-btn{ position:relative; overflow:hidden; width:100%; height:54px; margin-top:16px; border:0; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:.95rem; font-weight:900; color:#fff; background: var(--grad); cursor:pointer; box-shadow: 0 16px 32px -14px rgba(200,18,67,.7), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, opacity .2s; }
.nl-btn::after{ content:""; position:absolute; inset:0; transform: translateX(120%); background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); animation: nlSweep 3.8s ease-in-out infinite; }
@keyframes nlSweep{ 0%,60%{ transform: translateX(120%); } 100%{ transform: translateX(-120%); } }
.nl-btn:hover{ transform: translateY(-2px); }
.nl-btn:disabled{ opacity:.75; cursor:wait; transform:none; }
.nl-spin{ display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation: nlRot .7s linear infinite; }
.nl-btn.busy .nl-spin{ display:inline-block; } .nl-btn.busy .i{ display:none; }
@keyframes nlRot{ to{ transform: rotate(360deg); } }
.nl-note{ display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 0; font-size:.74rem; color: var(--fa); }
.nl-note .i{ color:#16A34A; }
.nl-err{ display:flex; align-items:center; gap:7px; margin:12px 0 0; padding:10px 12px; border-radius:12px; font-size:.8rem; font-weight:600; color:#DC2626; background: rgba(220,38,38,.07); border:1px solid rgba(220,38,38,.2); }
.nl-err[hidden]{ display:none; }
.nl .shake{ animation: nlShake .45s; }
@keyframes nlShake{ 15%,55%{ transform: translateX(-6px); } 35%,75%{ transform: translateX(6px); } }

.nl-sent{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding:12px; border-radius:18px; background: var(--card2); border:1px solid var(--line); }
.nl-ring{ position:relative; width:56px; height:56px; flex-shrink:0; }
.nl-ring svg{ width:56px; height:56px; transform: rotate(-90deg); }
.nl-ring circle{ fill:none; stroke-width:3.5; stroke-linecap:round; }
.nl-ring .bg{ stroke: var(--line); }
.nl-ring .fg{ stroke: var(--r); transition: stroke-dashoffset 1s linear, stroke .3s; }
.nl-ring.urgent .fg{ stroke:#F59E0B; }
.nl-ring-t{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:900; color: var(--h); }
.nl-sent-txt{ min-width:0; }
.nl-sent-txt b{ display:block; font-size:.9rem; color: var(--h); margin-bottom:2px; }
.nl-sent-txt span{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.76rem; color: var(--tx); }
.nl-target{ font-weight:800; color: var(--h); }
.nl-link{ display:inline-flex; align-items:center; gap:5px; padding:0; border:0; background:none; font-family:inherit; font-size:.76rem; font-weight:800; color: var(--r); cursor:pointer; }
.nl-link:disabled{ color: var(--fa); cursor:not-allowed; }
.nl-otp{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:8px; }
.nl .nl-otp input{ width:100%; min-width:0; min-height:0; height:58px; box-sizing:border-box; padding:0; border-radius:14px; border:1.5px solid var(--line); background: var(--card2); color: var(--h); text-align:center; font-family:inherit; font-size:1.4rem; font-weight:900; outline:none; box-shadow:none; caret-color: var(--r); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.nl .nl-otp input:focus{ border-color: var(--r); background:#fff; box-shadow: 0 0 0 4px rgba(200,18,67,.12); transform: translateY(-2px); }
.nl .nl-otp input.filled{ border-color: rgba(200,18,67,.5); background: rgba(200,18,67,.05); animation: nlPop .25s; }
@keyframes nlPop{ 50%{ transform: scale(1.08); } }
.nl .nl-otp.bad input{ border-color:#DC2626; }
.nl-resend{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:.78rem; color: var(--fa); }
.nl-legal{ margin:20px 0 0; text-align:center; font-size:.72rem; color: var(--fa); }

.nl-success{ position:absolute; inset:-10px; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background: var(--card); opacity:0; pointer-events:none; transition: opacity .35s; }
.nl-success.on{ opacity:1; pointer-events:auto; }
.nl-success .ok{ width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:#fff; background: var(--grad); box-shadow: 0 0 0 10px rgba(200,18,67,.1), 0 20px 40px -14px rgba(200,18,67,.75); transform: scale(0); }
.nl-success.on .ok{ animation: nlOk .6s .1s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes nlOk{ to{ transform: scale(1); } }
.nl-success b{ margin-top:10px; font-size:1.1rem; color: var(--h); }
.nl-success small{ font-size:.8rem; color: var(--fa); }
.nl-success .burst{ position:absolute; top:50%; left:50%; width:0; height:0; margin-top:-30px; }
.nl-success .burst i{ position:absolute; width:8px; height:8px; border-radius:50%; background: var(--r); opacity:0; }
.nl-success .burst i:nth-child(even){ background: var(--gold); }
.nl-success.on .burst i{ animation: nlBurst .9s .15s ease-out forwards; }
.nl-success .burst i:nth-child(1){ --x:0px; --y:-80px; } .nl-success .burst i:nth-child(2){ --x:57px; --y:-57px; }
.nl-success .burst i:nth-child(3){ --x:80px; --y:0px; } .nl-success .burst i:nth-child(4){ --x:57px; --y:57px; }
.nl-success .burst i:nth-child(5){ --x:0px; --y:80px; } .nl-success .burst i:nth-child(6){ --x:-57px; --y:57px; }
.nl-success .burst i:nth-child(7){ --x:-80px; --y:0px; } .nl-success .burst i:nth-child(8){ --x:-57px; --y:-57px; }
@keyframes nlBurst{ 0%{ opacity:1; transform: translate(-4px,-4px); } 100%{ opacity:0; transform: translate(calc(var(--x) - 4px), calc(var(--y) - 4px)) scale(.4); } }

/* ---------- showcase ---------- */
.nl-show{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:44px 40px; color:#fff;
  background:
    radial-gradient(520px 360px at 85% 0%, rgba(240,180,41,.28), transparent 60%),
    radial-gradient(480px 380px at 0% 100%, rgba(255,67,104,.45), transparent 60%),
    linear-gradient(155deg, #C81243 0%, #8E0E3A 50%, #3A0618 100%); }
.nl-show::before{ content:""; position:absolute; inset:0; opacity:.22; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.8) 1px, transparent 0); background-size:22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.nl-show::after{ content:""; position:absolute; width:440px; height:440px; border-radius:50%; border:1px solid rgba(255,255,255,.16); bottom:-200px; right:-160px; box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 130px rgba(255,255,255,.025); }
.nl-show > *{ position:relative; z-index:1; }
.nl-show-kicker{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:.74rem; font-weight:800; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); }
.nl-show h2{ margin:16px 0 26px; font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight:900; line-height:1.6; color:#fff; }
.nl-show h2 span{ color:#FFD98A; }
.nl-stack{ display:flex; flex-direction:column; gap:10px; }
.nl-acc{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background: rgba(255,255,255,.95); color:#1B1220; box-shadow: 0 18px 40px -22px rgba(30,0,10,.7); animation: nlFloat 6s ease-in-out infinite; }
.nl-acc.a2{ margin-inline-start:28px; animation-delay:-1.5s; }
.nl-acc.a3{ margin-inline-start:8px; animation-delay:-3s; }
.nl-acc.a4{ margin-inline-start:40px; animation-delay:-4.5s; }
@keyframes nlFloat{ 50%{ transform: translateY(-6px); } }
.nl-acc .lg{ width:38px; height:38px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1rem; color:#fff; background: var(--c); font-family: system-ui, sans-serif; }
.nl-acc b{ display:block; font-size:.86rem; direction:ltr; text-align:right; }
.nl-acc small{ display:block; font-size:.7rem; color:#8A7480; }
.nl-acc em{ margin-inline-start:auto; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; background:#16A34A; }
.nl-perks{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.nl-perks li{ display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; }
.nl-perks .i{ font-size:.95rem; padding:6px; border-radius:9px; background: rgba(255,255,255,.16); box-sizing:content-box; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nl-shell{ grid-template-columns: minmax(0,1fr); max-width:520px; }
  .nl-show{ display:none; }
}
@media (max-width: 520px){
  .nl{ padding-top:20px; padding-bottom:40px; }
  .nl-shell{ border-radius:24px; }
  .nl-form{ padding:28px 18px 24px; }
  .nl-otp{ gap:6px; }
  .nl .nl-otp input{ height:52px; font-size:1.25rem; border-radius:12px; }
}
@media (prefers-reduced-motion: reduce){ .nl *, .nl-shell{ animation:none !important; } }