/* صفحه‌های احراز هویت ResumeIt؛ مستقل از داشبورد، با همان توکن‌های طراحی */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__main { display: flex; flex-direction: column; align-items: center; padding: clamp(16px, 3vw, 32px); gap: 20px; }
.auth__top { width: min(100%, 460px); display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 40px; height: 40px; }
.brand__name { font-weight: 800; font-size: 20px; direction: ltr; unicode-bidi: isolate; } .brand__name b { color: var(--bro-600); }
.chip { display: inline-flex; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: repeating-linear-gradient(135deg, var(--bro-50), var(--bro-50) 6px, var(--bro-100) 6px, var(--bro-100) 12px); color: var(--bro-700); border: 1px solid var(--bro-200); }
.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 99; background: var(--ice-900); color: #fff; padding: 8px 16px; border-radius: 999px; transform: translateY(-200%); }
.skip:focus { transform: none; }

.card {
  position: relative; width: min(100%, 460px); margin-block: auto; padding: clamp(22px, 4vw, 38px); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(237,243,246,.7)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid #fff; box-shadow: var(--glass-sh), var(--sh-2);
}
#view { display: grid; gap: 18px; }
#view h1 { font-size: clamp(24px, 3vw, 29px); font-weight: 800; }
#view > p, #view > .steps + h1 + p { color: var(--ink-2); margin-top: -10px; }
#view p b { color: var(--ink); }
.auth__foot { width: min(100%, 460px); text-align: center; color: var(--ink-2); font-size: 14.5px; padding-bottom: 8px; }
.link { color: var(--bro-600); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; background: none; border: 0; padding: 0; font-size: inherit; }
.link:hover { color: var(--bro-700); } .link--sm { font-size: 12.5px; font-weight: 600; }
.ltr-inline { direction: ltr; unicode-bidi: isolate; display: inline-block; } .mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-feature-settings: 'tnum'; }

/* فرم */
form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field__label { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.inputwrap { position: relative; display: flex; align-items: center; }
.inputwrap > svg { position: absolute; inset-inline-start: 14px; width: 19px; height: 19px; color: var(--ice-500); pointer-events: none; }
.input { width: 100%; min-width:0; min-height: 50px; padding: 10px 44px 10px 14px; border-radius: var(--r-md); background: rgba(255,255,255,.88); border: 1px solid var(--ice-300); transition: border-color var(--t-fast), box-shadow var(--t-fast); font-size: 16px; text-align: left; }
.input::placeholder { color: var(--ink-3); opacity: .7; text-align: left; }
.input:hover { border-color: var(--ice-500); }
.input:focus { outline: none; border-color: var(--bro-500); box-shadow: 0 0 0 4px rgba(164,114,72,.18); background: #fff; }
.input[aria-invalid='true'] { border-color: var(--err); background: #fffafa; }
.eye { position: absolute; inset-inline-end: 6px; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 12px; color: var(--ink-3); display: grid; place-items: center; }
.eye:hover { background: var(--ice-100); color: var(--ink); } .eye svg { width: 19px; height: 19px; }
.inputwrap:has(.eye) .input { padding-left: 50px; }
.field__error { display: flex; gap: 6px; align-items: flex-start; color: var(--err); font-size: 13px; } .field__error svg { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.field__hint { font-size: 13px; color: var(--ink-3); }
.hint--otp { margin-top: -4px; }
.formerr { display: flex; gap: 8px; padding: 11px 14px; border-radius: var(--r-md); background: var(--err-bg); color: var(--err); font-size: 13.5px; border: 1px solid #efc5c0; }
.formerr svg { width: 19px; height: 19px; flex: none; margin-top: 2px; } .formerr .link { color: var(--err); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--bro-600); margin-top: 2px; flex: none; }
.note { display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r-md); background: var(--ice-100); color: var(--ice-800); font-size: 13.5px; } .note svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }

/* دکمه */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 15.5px; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); cursor: pointer; text-decoration: none; }
.btn:active { transform: scale(.98); } .btn svg { width: 20px; height: 20px; flex: none; }
.btn--block { width: 100%; }
.btn--primary { background: var(--bro-600); color: #fff; box-shadow: 0 10px 22px -10px rgba(135,90,54,.8); } .btn--primary:hover { background: var(--bro-700); }
.btn--social { background: rgba(255,255,255,.85); color: var(--ink); border-color: var(--ice-300); font-weight: 600; font-size: 14.5px; min-height: 48px; padding: 0 12px; box-shadow: var(--sh-1); } .btn--social:hover { background: #fff; border-color: var(--ice-500); }
.btn[disabled] { opacity: .65; cursor: not-allowed; }
.btn.is-loading { opacity: 1; background: var(--bro-500); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.or { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 13px; } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--ice-300); }
.social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-social-container]{display:grid;gap:14px}.social .btn{min-height:44px;font-size:14px;border-radius:14px;background:#f5f9fbcc;box-shadow:none}.social .btn:hover{background:#fff;border-color:var(--bro-500);transform:translateY(-1px)}.social .btn:focus-visible{outline:2px solid var(--bro-600);outline-offset:3px}.social .btn svg{width:18px;height:18px}

/* سگمنت و مراحل */
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid var(--glass-line); }
.segmented button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 42px; border: 0; background: transparent; border-radius: 999px; font-weight: 600; color: var(--ink-2); transition: all var(--t-fast); }
.segmented button svg { width: 18px; height: 18px; }
.segmented button[aria-selected='true'] { background: #fff; color: var(--ice-800); box-shadow: var(--sh-1); }
.steps { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.steps li { display: flex; align-items: center; gap: 8px; flex: 1; font-weight: 600; } .steps li:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--ice-200); border-radius: 2px; }
.steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ice-200); color: var(--ink-2); font-size: 12px; flex: none; transition: all var(--t-med); } .steps li span svg { width: 14px; height: 14px; }
.steps li.is-now { color: var(--ink); } .steps li.is-now span { background: var(--bro-600); color: #fff; box-shadow: 0 0 0 4px rgba(164,114,72,.2); }
.steps li.is-done span { background: var(--ok); color: #fff; } .steps li.is-done::after { background: var(--ok); }
.back { display: inline-flex; gap: 4px; align-items: center; justify-self: start; border: 0; background: none; color: var(--ink-2); font-weight: 600; padding: 4px 8px 4px 12px; margin-inline-start: -8px; border-radius: 999px; } .back:hover { background: var(--ice-100); color: var(--ink); } .back svg { width: 18px; height: 18px; }

/* OTP */
.auth-otp { display: block; min-width:0; }
.otp__i.input { width: 100%; min-width:0; min-height: 52px; text-align: center; font-size: 24px; font-weight: 700; border-radius: var(--r-md); border: 1px solid var(--ice-300); background: rgba(255,255,255,.9); padding: 8px 12px; transition: border-color var(--t-fast),box-shadow var(--t-fast); font-family: var(--font-mono); letter-spacing:.25em; }
.otp__i.input::placeholder{font:16px var(--font);letter-spacing:0;text-align:center}
.otp__i:focus { outline: none; border-color: var(--bro-500); box-shadow: 0 0 0 4px rgba(164,114,72,.18); transform: translateY(-2px); background: #fff; }
.otp__i.has { border-color: var(--ice-600); }
.auth-otp.is-bad .otp__i { border-color: var(--err); background: #fffafa; }
.otp__i:disabled { background: var(--ice-100); opacity: .7; }
.resend { text-align: center; color: var(--ink-2); font-size: 14px; min-height: 28px; }

/* رمز */
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -6px; } .strength i { height: 5px; border-radius: 3px; background: var(--ice-200); transition: background var(--t-med); }
.strength[data-level='1'] i:nth-child(-n+1) { background: var(--err); } .strength[data-level='2'] i:nth-child(-n+2) { background: #d3a24f; } .strength[data-level='3'] i:nth-child(-n+3) { background: var(--ice-500); } .strength[data-level='4'] i { background: var(--ok); }
.strength__txt { font-size: 12.5px; color: var(--ink-3); min-height: 18px; margin-top: -10px; }
.rules { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); margin-top: -6px; } .rules li { display: flex; gap: 8px; align-items: center; } .rules svg { width: 16px; height: 16px; opacity: .25; transition: all var(--t-med); }
.rules li.is-ok { color: var(--ok); } .rules li.is-ok svg { opacity: 1; }

/* پایان */
.done { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6px 0; }
.done__art { width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); animation: pop .5s var(--ease-spring) both; } .done__art svg { width: 40px; height: 40px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.done p { color: var(--ink-2); } .done .btn { margin-top: 6px; } .done .note { text-align: start; width: 100%; }

/* لودینگ */
.busy { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(244,249,251,.82); backdrop-filter: blur(5px); opacity: 0; transition: opacity var(--t-med); border-radius: inherit; }
.busy.is-on { opacity: 1; }
.busy__box { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 20px; max-width: 280px; }
.busy__msg { font-size: 16px; } .busy__slow { color: var(--ink-3); font-size: 13px; animation: fade .4s both; } @keyframes fade { from { opacity: 0; } }
.loader { display: inline-flex; gap: 7px; } .loader i { width: 11px; height: 11px; border-radius: 50%; background: var(--bro-500); animation: bounce 1s var(--ease) infinite; } .loader i:nth-child(2) { background: var(--ice-600); animation-delay: .15s; } .loader i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0) scale(.8); opacity: .5; } 40% { transform: translateY(-9px) scale(1); opacity: 1; } }
.skeleton { background: linear-gradient(100deg, var(--ice-200) 30%, var(--ice-100) 50%, var(--ice-200) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-md); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* توست */
.toast-root { position: fixed; z-index: 200; bottom: 24px; inset-inline: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; padding: 11px 18px; border-radius: 999px; background: rgba(28,45,56,.93); color: #fff; font-size: 14px; box-shadow: var(--sh-3); animation: toastIn var(--t-med) var(--ease-spring) both; max-width: 92vw; } .toast svg { width: 18px; height: 18px; } .toast--error { background: rgba(138,42,34,.95); } .toast--success svg { color: #8fd6b4; }
.toast.is-leaving { animation: toastOut .2s both; } @keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.94); } } @keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* پانل تصویری */
.auth__art { position: relative; padding: 16px 16px 16px 0; }
.art { position: relative; height: 100%; min-height: 560px; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(155deg, #3d5c6f 0%, #52788d 48%, #875a36 130%); color: #fff; box-shadow: var(--sh-3); }
.art__glow { position: absolute; inset: 0; background: radial-gradient(520px 340px at 20% 18%, rgba(255,255,255,.28), transparent 70%), radial-gradient(420px 320px at 90% 95%, rgba(210,174,137,.5), transparent 70%); }
.art__card { position: absolute; border-radius: 22px; background: rgba(255,255,255,.18); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 24px 50px -20px rgba(0,0,0,.4); padding: 18px; display: grid; gap: 9px; align-content: start; }
.art__card--resume { width: 54%; inset-inline-end: 9%; top: 11%; transform: rotate(-3deg); } .art__card--links { width: 38%; inset-inline-start: 8%; top: 27%; transform: rotate(4deg); }
.art__card .av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #f2e6da, #bd8e64); } .art__card b { height: 11px; width: 60%; border-radius: 6px; background: rgba(255,255,255,.75); } .art__card s { height: 8px; width: 90%; border-radius: 5px; background: rgba(255,255,255,.35); text-decoration: none; }
.tags { display: flex; gap: 6px; } .tags u { height: 20px; width: 46px; border-radius: 99px; background: rgba(255,255,255,.3); }
.art__card--links span { height: 28px; border-radius: 99px; background: rgba(255,255,255,.3); } .art__card--links span.hot { background: rgba(210,174,137,.85); }
.art__copy { position: absolute; bottom: 8%; inset-inline: 8%; } .art__copy h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; line-height: 1.4; } .art__copy p { margin-top: 8px; color: rgba(255,255,255,.85); max-width: 36ch; }
@media (max-width: 960px) { .auth { grid-template-columns: 1fr; } .auth__art { display: none; } }
@media (max-width: 480px) { .card { border-radius: var(--r-lg); } .auth-otp { gap: 6px; } .demo__box { width: min(290px, 86vw); } }

.brand__logo{width:150px;height:50px;object-fit:contain}.art__logo{position:absolute;top:51%;left:50%;width:180px;transform:translate(-50%,-50%);border-radius:36px;background:rgba(255,255,255,.86);box-shadow:0 18px 40px -15px #203f53;animation:brand-float 6s ease-in-out infinite}.art__logo img{width:100%;height:auto}.art__card--resume{top:8%}.art__card--links{top:20%}.art__copy{bottom:5%}.art__copy p{line-height:1.9}.sms-help{font-size:13px;color:var(--ink-2)}.sms-help summary{cursor:pointer;font-weight:600}.sms-help p{padding-top:10px;line-height:1.9}.account-notice{padding:18px;background:transparent;border:0}.account-notice::backdrop{background:rgba(28,45,56,.48);backdrop-filter:blur(6px)}.account-notice .modal-box{padding:30px;max-width:420px;border-radius:24px;background:#f7fafb;color:var(--ink);box-shadow:0 24px 70px -20px #203f53;display:grid;gap:16px;position:relative;direction:rtl}.account-notice h2{font-size:22px}.account-notice p{font-size:14px;color:var(--ink-2)}.notice-close{position:absolute;left:12px;top:8px;border:0;background:transparent;font-size:26px;width:40px;height:40px}.notice-icon{color:var(--bro-600)}.notice-icon svg{width:32px;height:32px}.loading-dots{width:48px;color:var(--bro-600)}.input::placeholder{opacity:1}.toast{position:static}.steps{grid-auto-flow:initial;overflow:visible}.btn{height:auto;text-transform:none}.input{height:auto;display:block}.busy{pointer-events:auto}
@keyframes brand-float{50%{transform:translate(-50%,-55%) rotate(-2deg)}}@media(prefers-reduced-motion:reduce){.art__logo{animation:none}.loading{animation:none}.done__art{animation:none}}
.inputwrap > svg,.eye{z-index:1}.inputwrap > svg{color:var(--ice-700)}

.terms-field{margin-block:18px}.terms-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.9}.terms-check input{flex:none;margin-top:4px;accent-color:var(--bro-600);width:18px;height:18px}.terms-field p{font-size:12px;color:#a13a2f;margin-top:8px}.auth__foot .ri-support-links{justify-content:center;margin-top:12px}