/* /Components/Layouts/AuthorizedLayout.razor.rz.scp.css */
/* /Components/Layouts/FakeAuthorizedLayout.razor.rz.scp.css */
:global(body)[b-gdcjnayv43] {
margin: 0;
}
.nd-page[b-gdcjnayv43] {
--bg: #f5f6f8;
--surface: #ffffff;
--surface-soft: #fafafa;
--text: #111315;
--muted: #6b7280;
--line: #e5e7eb;
--accent: #2563eb;
--radius-xl: 20px;
--radius-lg: 14px;
--shadow: 0 10px 28px rgba(17, 19, 21, 0.06);
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: "Manrope", "Segoe UI", sans-serif;
}
.nd-ph[b-gdcjnayv43] {
position: sticky;
top: 0;
z-index: 40;
border-bottom: 1px solid var(--line);
background: rgba(245, 246, 248, 0.9);
backdrop-filter: blur(8px);
}
.nd-container[b-gdcjnayv43] {
width: min(1200px, 100%);
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.nd-ph-inner[b-gdcjnayv43] {
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nd-ph-brand[b-gdcjnayv43] {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.nd-brand-mark[b-gdcjnayv43] {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: var(--surface);
}
.nd-brand-mark svg[b-gdcjnayv43] {
width: 24px;
height: 24px;
}
.nd-ph-brand-text[b-gdcjnayv43] {
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #1f2937;
}
.nd-ph-right[b-gdcjnayv43] {
display: flex;
align-items: center;
gap: 8px;
}
.nd-ph-signout[b-gdcjnayv43] {
height: 36px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface);
color: #374151;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
.nd-ph-signout:hover[b-gdcjnayv43] {
border-color: #cfd4dc;
}
.nd-hero[b-gdcjnayv43] {
padding: 18px 0 20px;
}
.nd-profile-grid[b-gdcjnayv43] {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.nd-pm[b-gdcjnayv43] {
min-height: calc(100vh - 124px);
}
[b-gdcjnayv43] .nd-ps-card,
[b-gdcjnayv43] .nd-pm-card {
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow);
}
[b-gdcjnayv43] .nd-ps-card {
padding: 14px;
}
[b-gdcjnayv43] .nd-ps-avatar {
width: 96px;
height: 96px;
margin: 0 auto 14px;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface-soft);
}
[b-gdcjnayv43] .nd-ps-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
[b-gdcjnayv43] .nd-ps-avatar-ph {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: 1.75rem;
color: #9ca3af;
}
[b-gdcjnayv43] .nd-ps-nav {
display: grid;
gap: 6px;
}
[b-gdcjnayv43] .nd-search-cta,
[b-gdcjnayv43] .nd-ps-link {
min-height: 44px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-soft);
color: #374151;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
text-align: left;
cursor: pointer;
}
[b-gdcjnayv43] .nd-search-cta {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
padding: 10px 12px;
min-height: 54px;
}
[b-gdcjnayv43] .nd-search-cta-ic {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
background: #eef2ff;
color: var(--accent);
}
[b-gdcjnayv43] .nd-search-cta-title {
display: block;
font-size: 0.75rem;
font-weight: 800;
color: #111827;
}
[b-gdcjnayv43] .nd-search-cta-sub {
display: block;
margin-top: 2px;
font-size: 0.6875rem;
color: var(--muted);
}
[b-gdcjnayv43] .nd-search-cta.is-active,
[b-gdcjnayv43] .nd-ps-link.is-active {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
[b-gdcjnayv43] .nd-ps-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 0.625rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
[b-gdcjnayv43] .nd-pm-head {
padding: 6px 4px 12px;
}
[b-gdcjnayv43] .nd-pm-title {
margin: 0;
font-size: clamp(24px, 3vw, 30px);
font-weight: 800;
line-height: 1.15;
color: #111827;
}
[b-gdcjnayv43] .nd-pm-sub {
margin-top: 6px;
font-size: 0.875rem;
line-height: 1.45;
color: var(--muted);
}
@media (max-width: 1024px) {
.nd-profile-grid[b-gdcjnayv43] {
grid-template-columns: 1fr;
}
.nd-pm[b-gdcjnayv43] {
min-height: auto;
}
.nd-auth-side[b-gdcjnayv43] {
order: 2;
}
}
@media (max-width: 640px) {
.nd-container[b-gdcjnayv43] {
padding: 0 12px;
}
.nd-ph-inner[b-gdcjnayv43] {
min-height: 62px;
}
.nd-ph-brand-text[b-gdcjnayv43] {
font-size: 0.75rem;
}
.nd-hero[b-gdcjnayv43] {
padding: 12px 0 16px;
}
}
/* /Components/Layouts/FunnelLayout.razor.rz.scp.css */
/* ===== Ad landing chrome ================================================= */
.nd-fl-page[b-xmykah0qnl]{
display: flex;
flex-direction: column;
min-height: 100vh; /* older iOS Safari */
min-height: 100dvh;
background:
radial-gradient(900px 520px at 12% -10%, rgba(255,255,255,.28), transparent 60%),
radial-gradient(700px 480px at 100% 30%, rgba(255,91,200,.55), transparent 62%),
linear-gradient(160deg, #5B6CFF 0%, #7D5BFF 42%, #FF5BC8 100%);
}
.nd-fl-head[b-xmykah0qnl]{
padding-top: env(safe-area-inset-top, 0px);
}
.nd-fl-head-inner[b-xmykah0qnl]{
max-width: 640px;
margin: 0 auto;
padding: 14px 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nd-fl-brand[b-xmykah0qnl]{
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 1.25rem;
font-weight: 900;
letter-spacing: -.01em;
text-decoration: none;
text-shadow: 0 2px 12px rgba(17,18,20,.18);
}
.nd-fl-brand img[b-xmykah0qnl]{
border-radius: 11px;
box-shadow: 0 6px 18px rgba(17,18,20,.22);
}
.nd-fl-login[b-xmykah0qnl]{
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.7);
background: rgba(255,255,255,.14);
color: #fff;
font: inherit;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease;
}
.nd-fl-login:hover[b-xmykah0qnl]{ background: rgba(255,255,255,.26); }
.nd-fl-login:focus-visible[b-xmykah0qnl]{ outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,.45); }
.nd-fl-main[b-xmykah0qnl]{
flex: 1;
display: flex;
flex-direction: column;
}
.nd-fl-foot[b-xmykah0qnl]{
padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
}
.nd-fl-foot-inner[b-xmykah0qnl]{
max-width: 640px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
color: rgba(255,255,255,.82);
font-size: 0.875rem;
font-weight: 600;
}
.nd-fl-foot-links[b-xmykah0qnl]{
display: flex;
gap: 16px;
}
.nd-fl-foot-links a[b-xmykah0qnl]{
color: #fff;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
@media (max-width: 560px){
.nd-fl-head-inner[b-xmykah0qnl]{ padding: 10px 16px 0; }
.nd-fl-brand[b-xmykah0qnl]{ font-size: 1.125rem; }
.nd-fl-foot-inner[b-xmykah0qnl]{ justify-content: center; text-align: center; }
}
/* /Components/Layouts/MainLayout.razor.rz.scp.css */
/* /Components/Layouts/OnboardingLayout.razor.rz.scp.css */
.nd-ob-page[b-7ky2g2ahqf]{
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.nd-ob-head[b-7ky2g2ahqf]{
position: sticky;
top: 0;
z-index: 50;
background: rgba(247,248,252,.86);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(17,18,20,.06);
padding-top: env(safe-area-inset-top, 0px);
}
.nd-ob-head-inner[b-7ky2g2ahqf]{
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nd-ob-signout[b-7ky2g2ahqf]{
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.80);
color: rgba(17,18,20,.62);
font: inherit;
font-size: 0.8125rem;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nd-ob-signout i[b-7ky2g2ahqf]{ font-size: 0.75rem; }
@media (hover: hover){
.nd-ob-signout:hover[b-7ky2g2ahqf]{ color: rgba(17,18,20,.92); border-color: rgba(17,18,20,.18); background: #fff; }
}
.nd-ob-signout:focus-visible[b-7ky2g2ahqf]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
.nd-ob-main[b-7ky2g2ahqf]{
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 28px 18px calc(32px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 560px){
.nd-ob-head-inner[b-7ky2g2ahqf]{ height: 56px; }
.nd-ob-signout span[b-7ky2g2ahqf]{ display: none; }
.nd-ob-signout[b-7ky2g2ahqf]{ width: 38px; padding: 0; justify-content: center; }
.nd-ob-main[b-7ky2g2ahqf]{ padding: 14px 10px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
/* /Components/Pages/Authorized/AboutMe.razor.rz.scp.css */
.nd-me .nd-container[b-mcqtplfplt]{
max-width: 980px;
}
.nd-me-head[b-mcqtplfplt]{
display: grid;
grid-template-columns: 1fr 320px;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.nd-me-kicker[b-mcqtplfplt]{
color: var(--muted);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
font-size: 0.75rem;
}
.nd-me-title[b-mcqtplfplt]{
margin: 6px 0 6px;
font-size: 2.125rem;
line-height: 1.1;
}
.nd-me-sub[b-mcqtplfplt]{
color: var(--muted);
font-size: 0.875rem;
}
.nd-me-progress[b-mcqtplfplt]{
padding: 14px 14px 12px;
border-radius: var(--radius-lg);
}
.nd-me-progress-top[b-mcqtplfplt]{
display:flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.nd-me-progress-title-wrap[b-mcqtplfplt]{
display:flex;
align-items:center;
gap: 8px;
}
.nd-me-progress-title[b-mcqtplfplt]{ font-weight: 800; }
.nd-me-progress-count[b-mcqtplfplt]{ color: var(--muted); font-weight: 800; }
.nd-me-save-pill[b-mcqtplfplt]{
padding: 2px 10px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 900;
}
.nd-me-save-pill-saving[b-mcqtplfplt]{
background: rgba(91,108,255,.10);
color: var(--p1);
}
.nd-me-save-pill-saved[b-mcqtplfplt]{
background: rgba(34,197,94,.14);
color: #16a34a;
}
.nd-me-progress-bar[b-mcqtplfplt]{
height: 10px;
border-radius: 999px;
background: rgba(17,18,20,.08);
overflow: hidden;
}
.nd-me-progress-bar-fill[b-mcqtplfplt]{
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 10px 26px rgba(91,108,255,.25);
transition: width .35s ease;
}
.nd-me-progress-hint[b-mcqtplfplt]{
margin-top: 10px;
color: var(--muted);
font-size: 0.8125rem;
}
.nd-me-grid[b-mcqtplfplt]{
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.nd-me-q[b-mcqtplfplt]{
padding: 16px;
border-radius: var(--radius-xl);
}
.nd-me-q-title[b-mcqtplfplt]{
font-weight: 900;
margin-bottom: 12px;
display:flex;
gap: 8px;
align-items: baseline;
}
.nd-me-q-num[b-mcqtplfplt]{
color: var(--muted);
font-weight: 900;
}
.nd-me-q-opt[b-mcqtplfplt]{
margin-left: auto;
padding: 2px 10px;
border-radius: 999px;
background: rgba(91,108,255,.10);
color: var(--p1);
font-size: 0.6875rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
align-self: center;
}
.nd-me-options[b-mcqtplfplt]{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.nd-me-options-check[b-mcqtplfplt]{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nd-me-other-input[b-mcqtplfplt]{
width: 100%;
margin-top: 10px;
height: 46px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(17,18,20,.14);
background: rgba(247,248,252,.95);
outline: none;
font-weight: 700;
font-size: 1rem;
color: rgba(17,18,20,.86);
}
.nd-me-other-input:focus[b-mcqtplfplt]{
border-color: rgba(91,108,255,.45);
box-shadow: 0 0 0 6px rgba(91,108,255,.10);
background: #fff;
}
.nd-opt[b-mcqtplfplt]{
width: 100%;
display:flex;
gap: 10px;
align-items: center;
text-align: left;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.75);
box-shadow: 0 10px 26px rgba(17,18,20,.06);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nd-opt:hover[b-mcqtplfplt]{
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(17,18,20,.10);
border-color: rgba(91,108,255,.28);
}
.nd-opt:active[b-mcqtplfplt]{
transform: scale(.98);
}
.nd-opt.is-checked[b-mcqtplfplt]{
border-color: rgba(91,108,255,.55);
box-shadow: 0 18px 46px rgba(91,108,255,.18);
background: rgba(255,255,255,.95);
}
.nd-opt-dot[b-mcqtplfplt]{
width: 18px;
height: 18px;
border-radius: 999px;
border: 2px solid rgba(17,18,20,.22);
position: relative;
flex: 0 0 18px;
}
.nd-opt-radio.is-checked .nd-opt-dot[b-mcqtplfplt]{
border-color: rgba(91,108,255,.70);
}
.nd-opt-radio.is-checked .nd-opt-dot[b-mcqtplfplt]::after{
content:"";
position:absolute;
inset: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--p1), var(--p2));
}
.nd-opt-box[b-mcqtplfplt]{
width: 18px;
height: 18px;
border-radius: 6px;
border: 2px solid rgba(17,18,20,.22);
position: relative;
flex: 0 0 18px;
}
.nd-opt-check.is-checked .nd-opt-box[b-mcqtplfplt]{
border-color: rgba(91,108,255,.70);
background: linear-gradient(90deg, var(--p1), var(--p2));
}
.nd-opt-check.is-checked .nd-opt-box[b-mcqtplfplt]::after{
content:"";
position:absolute;
left: 5px;
top: 2px;
width: 5px;
height: 9px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
}
.nd-opt-text[b-mcqtplfplt]{
font-weight: 700;
color: var(--ink);
}
.nd-me-footer[b-mcqtplfplt]{
margin-top: 14px;
padding: 14px;
border-radius: var(--radius-xl);
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
}
.nd-me-footer-title[b-mcqtplfplt]{ font-weight: 900; }
.nd-me-footer-sub[b-mcqtplfplt]{ color: var(--muted); font-size: 0.8125rem; }
.nd-btn[b-mcqtplfplt]{
display:inline-flex;
align-items:center;
gap: 10px;
padding: 12px 14px;
border-radius: 16px;
border: 0;
cursor: pointer;
font-weight: 900;
}
.nd-btn[disabled][b-mcqtplfplt]{
opacity: .55;
cursor: not-allowed;
transform: none !important;
}
.nd-btn-primary[b-mcqtplfplt]{
color: #fff;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 16px 40px rgba(91,108,255,.22);
transition: transform .15s ease, box-shadow .15s ease;
}
.nd-btn-primary:hover[b-mcqtplfplt]{
transform: translateY(-1px);
box-shadow: 0 20px 52px rgba(91,108,255,.28);
}
.nd-btn-badge[b-mcqtplfplt]{
background: rgba(255,255,255,.22);
padding: 4px 8px;
border-radius: 999px;
font-size: 0.75rem;
line-height: 1;
}
.nd-spinner[b-mcqtplfplt]{
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: rgba(255,255,255,1);
animation: ndspin-b-mcqtplfplt .8s linear infinite;
}
@keyframes ndspin-b-mcqtplfplt { to { transform: rotate(360deg);} }
/* Modal */
.nd-modal-backdrop[b-mcqtplfplt]{
position: fixed;
inset: 0;
background: rgba(17,18,20,.45);
display:flex;
align-items:center;
justify-content:center;
padding: 16px;
z-index: 9999;
}
.nd-modal[b-mcqtplfplt]{
width: min(420px, 100%);
background: #fff;
border-radius: 22px;
box-shadow: 0 28px 90px rgba(17,18,20,.25);
padding: 18px;
text-align:center;
}
.nd-modal-icon[b-mcqtplfplt]{
font-size: 2.125rem;
margin-bottom: 8px;
}
.nd-modal-title[b-mcqtplfplt]{
font-weight: 1000;
font-size: 1.375rem;
margin-bottom: 6px;
}
.nd-modal-sub[b-mcqtplfplt]{
color: var(--muted);
font-size: 0.875rem;
margin-bottom: 14px;
}
.nd-modal-btn[b-mcqtplfplt]{ width: 100%; justify-content:center; }
@media (max-width: 880px){
.nd-me-head[b-mcqtplfplt]{ grid-template-columns: 1fr; }
.nd-me-options-check[b-mcqtplfplt]{ grid-template-columns: 1fr; }
.nd-me-title[b-mcqtplfplt]{ font-size: 1.75rem; }
.nd-me-footer[b-mcqtplfplt]{ flex-direction: column; align-items: stretch; }
}
/* ── Touch devices: suppress hover lift ─────────────────────── */
@media (hover: none){
.nd-opt:hover[b-mcqtplfplt]{ transform: none; box-shadow: 0 10px 26px rgba(17,18,20,.06); }
}
/* ── Phone (≤ 560px) ──────────────────────────────────────────── */
@media (max-width: 560px){
.nd-me-title[b-mcqtplfplt]{ font-size: 1.375rem; }
.nd-me-sub[b-mcqtplfplt]{ font-size: 0.8125rem; }
.nd-me-kicker[b-mcqtplfplt]{ font-size: 0.6875rem; }
.nd-me-q[b-mcqtplfplt]{ padding: 12px; }
.nd-me-q-title[b-mcqtplfplt]{ font-size: 0.875rem; margin-bottom: 10px; }
.nd-opt[b-mcqtplfplt]{
padding: 10px 10px;
min-height: 46px;
-webkit-tap-highlight-color: transparent;
}
.nd-me-footer[b-mcqtplfplt]{ padding: 12px; gap: 10px; }
.nd-btn[b-mcqtplfplt]{ padding: 10px 12px; font-size: 0.875rem; min-height: 46px; }
.nd-me-progress[b-mcqtplfplt]{ padding: 12px 12px 10px; }
.nd-modal[b-mcqtplfplt]{ padding: 14px; border-radius: 18px; }
.nd-modal-title[b-mcqtplfplt]{ font-size: 1.25rem; }
}
/* /Components/Pages/Authorized/FakeUserProfile.razor.rz.scp.css */
/* ===== FakeUser profile page ===== */
.nd-prof-top[b-tle7atvz5x]{ display:flex; align-items:center; gap:12px; }
.nd-prof-back[b-tle7atvz5x]{
border:0; background:transparent; cursor:pointer;
display:flex; align-items:center; gap:10px;
font-weight:900; color: rgba(17,18,20,.70);
}
.nd-prof-back i[b-tle7atvz5x]{ color: rgba(91,108,255,.95); }
.nd-prof-title[b-tle7atvz5x]{ display:flex; align-items:center; gap:8px; font-weight:1000; margin-left: 14px;
margin-bottom: 14px;}
.nd-prof-name[b-tle7atvz5x]{ font-size: 1.625rem; color: rgba(17,18,20,.88); }
.nd-prof-age[b-tle7atvz5x]{ font-size: 1.125rem; color: rgba(17,18,20,.60); }
.nd-prof-dot[b-tle7atvz5x]{ width:8px; height:8px; border-radius:999px; background:#26b15f; display:inline-block; }
.nd-prof-card[b-tle7atvz5x]{ min-width: 0; }
.nd-prof-grid[b-tle7atvz5x]{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
align-items:start;
}
.nd-prof-left[b-tle7atvz5x], .nd-prof-right[b-tle7atvz5x]{ min-width: 0; }
.nd-prof-hero[b-tle7atvz5x]{
width: 100%;
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(17,18,20,.10);
background: rgba(17,18,20,.04);
box-shadow: var(--shadow-2);
aspect-ratio: 4 / 3;
min-height: 320px;
cursor: pointer;
}
.nd-prof-hero img[b-tle7atvz5x]{ width:100%; height:100%; object-fit:cover; display:block; }
.nd-prof-ph[b-tle7atvz5x]{ min-height:320px; display:grid; place-items:center; font-size: 2.75rem; color: rgba(17,18,20,.28); }
.nd-prof-th[b-tle7atvz5x]{ margin-top: 18px; }
.nd-prof-th-title[b-tle7atvz5x]{ font-weight:1000; margin-bottom:12px; color: rgba(17,18,20,.85); font-size: 0.9375rem; }
.nd-prof-th-grid[b-tle7atvz5x]{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
}
.nd-prof-th-item[b-tle7atvz5x]{
border:0; padding:0; cursor:pointer;
border-radius: 18px; overflow:hidden;
background: rgba(17,18,20,.06);
border: 1px solid rgba(17,18,20,.10);
aspect-ratio: 3 / 4;
min-height: 220px;
box-shadow: 0 12px 30px rgba(17,18,20,.10);
transition: transform .2s ease, box-shadow .2s ease;
}
.nd-prof-th-item:hover[b-tle7atvz5x]{
transform: translateY(-3px);
box-shadow: 0 18px 44px rgba(17,18,20,.16);
}
.nd-prof-th-item img[b-tle7atvz5x]{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.nd-prof-th-item:hover img[b-tle7atvz5x]{ transform: scale(1.04); }
.nd-prof-info[b-tle7atvz5x]{
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.82);
box-shadow: var(--shadow-2);
padding: 14px;
display:grid;
gap: 10px;
}
.nd-prof-row[b-tle7atvz5x]{ display:flex; align-items:center; gap: 10px; }
.nd-prof-ic[b-tle7atvz5x]{
width: 34px; height: 34px; border-radius: 14px;
display:grid; place-items:center;
background: rgba(91,108,255,.08);
border: 1px solid rgba(91,108,255,.16);
color: rgba(91,108,255,.95);
}
.nd-prof-val[b-tle7atvz5x]{ font-weight:900; color: rgba(17,18,20,.74); }
.nd-prof-link[b-tle7atvz5x]{ font-weight:1000; color: rgba(91,108,255,.95); text-decoration: underline; cursor:pointer; }
.nd-prof-hint[b-tle7atvz5x]{ font-size: 0.75rem; color: rgba(17,18,20,.45); font-weight:900; }
.nd-prof-about[b-tle7atvz5x]{ margin-top: 16px; }
.nd-prof-about-title[b-tle7atvz5x]{ font-weight:1000; color: rgba(17,18,20,.85); margin-bottom:10px; }
.nd-prof-about-box[b-tle7atvz5x]{
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.82);
padding: 14px;
font-weight:800;
color: rgba(17,18,20,.72);
box-shadow: var(--shadow-2);
}
.nd-prof-muted[b-tle7atvz5x]{ color: rgba(17,18,20,.45); }
/* responsive */
@media (max-width: 980px){
.nd-prof-grid[b-tle7atvz5x]{ grid-template-columns: 1fr; }
.nd-prof-th-grid[b-tle7atvz5x]{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
.nd-prof-th-item[b-tle7atvz5x]{ min-height: 260px; }
}
@media (max-width: 560px){
.nd-prof-th-grid[b-tle7atvz5x]{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
.nd-prof-th-item[b-tle7atvz5x]{ min-height: 220px; border-radius: 16px; }
}
/* ===== Photo viewer modal ===== */
.nd-photo-modal[b-tle7atvz5x]{ max-width: min(980px, calc(100vw - 30px)); }
.nd-photo-inner[b-tle7atvz5x]{ padding: 16px; }
.nd-photo-stage[b-tle7atvz5x]{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items:center;
}
.nd-photo-img[b-tle7atvz5x]{
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(17,18,20,.10);
background: rgba(17,18,20,.04);
display: flex;
align-items: center;
justify-content: center;
max-height: min(70vh, 560px);
}
.nd-photo-img img[b-tle7atvz5x]{ max-width:100%; max-height: min(70vh, 560px); object-fit:contain; display:block; border-radius: 14px; }
.nd-photo-nav[b-tle7atvz5x]{
height: 44px; width: 44px; border-radius: 16px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.82);
cursor:pointer;
display:grid; place-items:center;
color: rgba(17,18,20,.70);
}
.nd-photo-nav:disabled[b-tle7atvz5x]{ opacity:.45; cursor:not-allowed; }
.nd-photo-meta[b-tle7atvz5x]{
margin-top: 12px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
.nd-photo-likes[b-tle7atvz5x]{
display:flex; align-items:center; gap: 8px;
font-weight:1000;
color: rgba(17,18,20,.74);
}
.nd-photo-likes i[b-tle7atvz5x]{ color: rgba(255,91,200,.95); }
.nd-photo-likebtn[b-tle7atvz5x]{
height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 0;
cursor:pointer;
font-weight:1000;
color: #fff;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 16px 40px rgba(91,108,255,.20);
display:flex; align-items:center; gap: 10px;
}
.nd-photo-likebtn:disabled[b-tle7atvz5x]{ opacity:.7; cursor:not-allowed; }
.nd-photo-strip[b-tle7atvz5x]{
margin-top: 12px;
display:flex;
gap: 10px;
overflow:auto;
padding-bottom: 4px;
}
.nd-photo-thumb[b-tle7atvz5x]{
border: 1px solid rgba(17,18,20,.10);
background: rgba(17,18,20,.04);
border-radius: 14px;
overflow:hidden;
width: 120px;
aspect-ratio: 4 / 3;
cursor:pointer;
padding:0;
flex: 0 0 auto;
transition: transform .18s ease, box-shadow .18s ease;
}
.nd-photo-thumb:hover[b-tle7atvz5x]{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(17,18,20,.14);
}
.nd-photo-thumb img[b-tle7atvz5x]{ width:100%; height:100%; object-fit:cover; display:block; }
.nd-photo-thumb.is-active[b-tle7atvz5x]{
border-color: rgba(91,108,255,.55);
box-shadow: 0 0 0 6px rgba(91,108,255,.10);
}
@media (max-width: 560px){
.nd-photo-stage[b-tle7atvz5x]{ grid-template-columns: 40px 1fr 40px; }
.nd-photo-img[b-tle7atvz5x]{ max-height: min(60vh, 400px); }
.nd-photo-img img[b-tle7atvz5x]{ max-height: min(60vh, 400px); }
}
.nd-prof-actions[b-tle7atvz5x]{
display:flex;
gap:10px;
margin-bottom: 12px;
}
.nd-prof-like[b-tle7atvz5x]{
flex: 0 0 auto;
height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255,91,200,.35);
background: rgba(255,91,200,.10);
color: rgba(255,91,200,.95);
font-weight: 1000;
cursor:pointer;
display:flex; align-items:center; gap:10px;
}
.nd-prof-like:hover[b-tle7atvz5x]{ background: rgba(255,91,200,.14); }
.nd-prof-like:disabled[b-tle7atvz5x]{ opacity:.6; cursor:not-allowed; }
.nd-prof-msg[b-tle7atvz5x]{
flex: 1;
height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 0;
color: #fff;
font-weight: 1000;
cursor:pointer;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 16px 40px rgba(91,108,255,.20);
display:flex; align-items:center; justify-content:center; gap:10px;
}
.nd-prof-msg:hover[b-tle7atvz5x]{ transform: translateY(-1px); }
.nd-prof-q[b-tle7atvz5x]{
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(17,18,20,.08);
}
.nd-prof-q-title[b-tle7atvz5x]{
font-weight: 950;
color: rgba(17,18,20,.86);
font-size: 0.875rem;
margin-bottom: 10px;
}
.nd-q-grid[b-tle7atvz5x]{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.nd-q-card[b-tle7atvz5x]{
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.78);
padding: 12px 12px;
box-shadow: 0 10px 26px rgba(17,18,20,.06);
}
.nd-q-card-wide[b-tle7atvz5x]{
grid-column: 1 / -1;
}
.nd-q-h[b-tle7atvz5x]{
font-weight: 950;
font-size: 0.75rem;
color: rgba(17,18,20,.65);
margin-bottom: 8px;
letter-spacing: .06em;
text-transform: uppercase;
}
.nd-q-row[b-tle7atvz5x]{
display:grid;
grid-template-columns: 140px 1fr;
gap: 10px;
align-items: start;
padding: 6px 0;
border-bottom: 1px dashed rgba(17,18,20,.08);
}
.nd-q-row:last-child[b-tle7atvz5x]{ border-bottom: 0; padding-bottom: 0; }
.nd-q-k[b-tle7atvz5x]{
font-size: 0.75rem;
font-weight: 900;
color: rgba(17,18,20,.50);
}
.nd-q-v[b-tle7atvz5x]{
font-size: 0.8125rem;
font-weight: 850;
color: rgba(17,18,20,.78);
min-width: 0;
}
.nd-q-tags[b-tle7atvz5x]{
display:flex;
flex-wrap: wrap;
gap: 6px;
}
.nd-q-tag[b-tle7atvz5x]{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 0.75rem;
color: rgba(17,18,20,.75);
background: rgba(91,108,255,.08);
border: 1px solid rgba(91,108,255,.14);
}
.nd-q-notes[b-tle7atvz5x]{
font-weight: 800;
color: rgba(17,18,20,.75);
line-height: 1.55;
font-size: 0.8125rem;
}
@media (max-width: 860px){
.nd-q-grid[b-tle7atvz5x]{ grid-template-columns: 1fr; }
.nd-q-row[b-tle7atvz5x]{ grid-template-columns: 1fr; gap: 6px; }
}
.nd-msg-overlay[b-tle7atvz5x]{ align-items: center; }
/* modal */
.nd-msg-modal[b-tle7atvz5x]{
width: min(720px, calc(100vw - 24px));
border-radius: var(--radius-xl);
background: rgba(255,255,255,.96);
border: 1px solid rgba(17,18,20,.10);
box-shadow: 0 24px 80px rgba(17,18,20,.18);
position: relative;
overflow: hidden;
/* если контента много - скролл внутри модалки, а не страницы */
max-height: min(86vh, 820px);
display:flex;
flex-direction: column;
}
.nd-msg-x[b-tle7atvz5x]{
position:absolute;
right: 12px;
top: 10px;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.85);
font-size: 1.625rem;
line-height: 1;
cursor: pointer;
color: rgba(17,18,20,.55);
}
.nd-msg-head[b-tle7atvz5x]{
padding: 18px 20px 10px 20px;
text-align:center;
display: block;
}
.nd-msg-title[b-tle7atvz5x]{
font-size: 1.625rem;
font-weight: 950;
color: rgba(17,18,20,.86);
line-height: 1.15;
}
.nd-msg-sub[b-tle7atvz5x]{
margin-top: 8px;
font-weight: 900;
color: rgba(17,18,20,.55);
font-size: 0.875rem;
line-height: 1.4;
}
.nd-msg-body[b-tle7atvz5x]{
padding: 12px 18px 18px 18px;
overflow: auto;
}
.nd-msg-textarea[b-tle7atvz5x]{
min-height: 140px;
resize: none;
width: 100%;
}
.nd-msg-tools[b-tle7atvz5x]{
margin-top: 8px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
.nd-msg-tool[b-tle7atvz5x]{
width: 42px;
height: 42px;
border-radius: 14px;
border: 1px solid rgba(17,18,20,.12);
background: rgba(255,255,255,.88);
cursor:pointer;
display:grid;
place-items:center;
}
.nd-msg-tool:hover[b-tle7atvz5x]{
background: rgba(91,108,255,.06);
border-color: rgba(91,108,255,.20);
}
.nd-msg-counter[b-tle7atvz5x]{
font-size: 0.75rem;
font-weight: 900;
color: rgba(17,18,20,.45);
}
.nd-emoji-pop[b-tle7atvz5x]{
margin-top: 10px;
display: block;
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
overflow: hidden;
background: rgba(255,255,255,.92);
box-shadow: 0 18px 60px rgba(17,18,20,.14);
}
/* Emoji picker look */
.nd-emoji-picker[b-tle7atvz5x]{
width: 100%;
height: 320px;
}
/* actions */
.nd-msg-actions[b-tle7atvz5x]{
display:flex;
justify-content:center;
padding-top: 10px;
}
.nd-warn-success[b-tle7atvz5x]{
width: min(420px, calc(100vw - 26px));
border: 1px solid rgba(38,177,95,.25);
background:
radial-gradient(120% 120% at 0% 0%, rgba(38,177,95,.14), transparent 44%),
rgba(255,255,255,.98);
box-shadow: 0 24px 70px rgba(38,177,95,.18), 0 16px 48px rgba(17,18,20,.12);
text-align: center;
animation: ndSuccessPop-b-tle7atvz5x .22s ease-out;
}
.nd-warn-success .nd-warn-title[b-tle7atvz5x]{
color: rgba(19,140,74,.98);
font-size: 1.625rem;
position: relative;
}
.nd-warn-success .nd-warn-title[b-tle7atvz5x]::before{
content: "\f058";
font-family: "Font Awesome 6 Free";
font-weight: 900;
display: block;
margin: 2px auto 8px;
font-size: 1.875rem;
color: rgba(38,177,95,.98);
}
.nd-warn-success .nd-warn-text[b-tle7atvz5x]{
color: rgba(17,18,20,.66);
}
@keyframes ndSuccessPop-b-tle7atvz5x{
from{
opacity: 0;
transform: translateY(8px) scale(.97);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* /Components/Pages/Authorized/Matches.razor.rz.scp.css */
/* Tabs */
.nd-mtabs[b-a8zt5m7qfo]{
display:flex;
gap: 22px;
align-items:center;
padding: 10px 4px 2px;
border-bottom: 1px solid rgba(17,18,20,.08);
margin-bottom: 12px;
}
.nd-mtab[b-a8zt5m7qfo]{
position:relative;
border:0;
background:transparent;
padding: 10px 2px 12px;
cursor:pointer;
font-weight: 900;
color: rgba(17,18,20,.55);
}
.nd-mtab.is-active[b-a8zt5m7qfo]{
color: rgba(17,18,20,.88);
}
.nd-mtab.is-active[b-a8zt5m7qfo]::after{
content:"";
position:absolute;
left:0; right:0; bottom:-1px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--p1), var(--p2));
}
.nd-mtab-badge[b-a8zt5m7qfo]{
display:inline-grid;
place-items:center;
margin-left: 8px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: rgba(255,91,200,.95);
color: #fff;
font-size: 0.75rem;
font-weight: 900;
}
/* blink (badge) */
@media (prefers-reduced-motion: no-preference){
.nd-blink[b-a8zt5m7qfo]{
animation: nd-blink-b-a8zt5m7qfo 1.2s ease-in-out infinite;
}
@keyframes nd-blink-b-a8zt5m7qfo{
0%,100%{ transform: scale(1); filter: brightness(1); }
50%{ transform: scale(1.08); filter: brightness(1.08); }
}
}
/* meta row */
.nd-mmeta[b-a8zt5m7qfo]{
display:flex;
align-items:center;
justify-content:space-between;
margin: 10px 0 14px;
}
.nd-mmeta-left[b-a8zt5m7qfo]{
display:flex;
align-items:center;
gap: 10px;
}
.nd-mmeta-count[b-a8zt5m7qfo]{
color: rgba(17,18,20,.55);
font-weight: 800;
}
.nd-mmeta-dot[b-a8zt5m7qfo]{
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(38,177,95,.95);
box-shadow: 0 0 0 6px rgba(38,177,95,.12);
}
.nd-mmeta-live[b-a8zt5m7qfo]{
font-size: 0.75rem;
font-weight: 900;
color: rgba(38,177,95,.95);
}
.nd-mmeta-refresh[b-a8zt5m7qfo]{
border: 1px solid rgba(17,18,20,.12);
background: rgba(255,255,255,.85);
height: 36px;
border-radius: 999px;
padding: 0 12px;
font-weight: 900;
color: rgba(17,18,20,.70);
cursor:pointer;
display:flex;
gap: 8px;
align-items:center;
}
.nd-mmeta-refresh:hover[b-a8zt5m7qfo]{
background: rgba(91,108,255,.06);
border-color: rgba(91,108,255,.20);
}
/* list */
.nd-matches-list[b-a8zt5m7qfo]{
display:grid;
gap: 14px;
padding-top: 8px;
}
/* card */
.nd-mcard[b-a8zt5m7qfo]{
width: 100%;
display:grid;
grid-template-columns: 92px 1fr 32px;
align-items:center;
gap: 14px;
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.92);
padding: 14px 16px;
box-shadow: 0 12px 34px rgba(17,18,20,.12);
cursor:pointer;
text-align:left;
}
.nd-mcard:hover[b-a8zt5m7qfo]{
transform: translateY(-1px);
box-shadow: 0 16px 44px rgba(17,18,20,.14);
}
.nd-mcard-ava[b-a8zt5m7qfo]{
width: 72px;
height: 72px;
border-radius: 999px;
overflow:hidden;
border: 2px solid rgba(17,18,20,.08);
background: rgba(17,18,20,.06);
display:grid;
place-items:center;
box-shadow: 0 10px 24px rgba(17,18,20,.10);
}
.nd-mcard-ava img[b-a8zt5m7qfo]{ width:100%; height:100%; object-fit:cover; display:block; }
.nd-mcard-ava-ph[b-a8zt5m7qfo]{ color: rgba(17,18,20,.35); font-size: 1.25rem; }
.nd-mcard-name[b-a8zt5m7qfo]{
font-weight: 1000;
color: rgba(17,18,20,.86);
}
.nd-mcard-sub[b-a8zt5m7qfo]{
margin-top: 3px;
color: rgba(17,18,20,.65);
font-weight: 800;
font-size: 0.75rem;
}
.nd-mcard-ic[b-a8zt5m7qfo]{
display:grid;
place-items:center;
color: rgba(17,18,20,.35);
}
.nd-m-sentinel[b-a8zt5m7qfo]{ height: 1px; }
.nd-more[b-a8zt5m7qfo]{
display:flex;
align-items:center;
justify-content:center;
gap: 10px;
color: rgba(17,18,20,.55);
font-weight: 900;
padding: 10px 0;
}
.nd-empty[b-a8zt5m7qfo]{
padding: 26px 6px;
text-align:center;
}
.nd-empty-title[b-a8zt5m7qfo]{
font-weight: 1000;
color: rgba(17,18,20,.80);
}
.nd-empty-sub[b-a8zt5m7qfo]{
margin-top: 6px;
color: rgba(17,18,20,.55);
font-weight: 800;
}
.nd-empty-cta[b-a8zt5m7qfo]{
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border-radius: 999px;
border: 0;
background: linear-gradient(90deg, var(--p1), var(--p2));
color: #fff;
font-weight: 900;
font-size: 0.8125rem;
cursor: pointer;
box-shadow: 0 12px 30px rgba(91,108,255,.18);
transition: transform .15s ease, box-shadow .15s ease;
}
.nd-empty-cta:hover[b-a8zt5m7qfo]{
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(91,108,255,.24);
}
.nd-empty-cta:active[b-a8zt5m7qfo]{ transform: translateY(0) scale(.96); }
/* ── Touch devices: suppress hover lift ─────────────────────── */
@media (hover: none){
.nd-mcard:hover[b-a8zt5m7qfo]{ transform: none; box-shadow: 0 12px 34px rgba(17,18,20,.12); }
.nd-empty-cta:hover[b-a8zt5m7qfo]{ transform: none; box-shadow: 0 12px 30px rgba(91,108,255,.18); }
}
/* ── Phone (≤ 560px) ──────────────────────────────────────────── */
@media (max-width: 560px){
/* Horizontally scrollable tabs */
.nd-mtabs[b-a8zt5m7qfo]{
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 16px;
padding: 8px 0 2px;
/* Edge-fade cue so the row reads as scrollable even with no visible scrollbar */
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.nd-mtabs[b-a8zt5m7qfo]::-webkit-scrollbar{ display: none; }
.nd-mtab[b-a8zt5m7qfo]{ white-space: nowrap; min-height: 46px; }
/* Meta row stacks */
.nd-mmeta[b-a8zt5m7qfo]{ flex-direction: column; align-items: flex-start; gap: 8px; }
.nd-mmeta-refresh[b-a8zt5m7qfo]{ align-self: stretch; justify-content: center; height: 40px; }
/* Compact match cards */
.nd-mcard[b-a8zt5m7qfo]{
grid-template-columns: 76px 1fr 28px;
gap: 12px;
padding: 12px 14px;
-webkit-tap-highlight-color: transparent;
}
.nd-mcard-ava[b-a8zt5m7qfo]{ width: 60px; height: 60px; }
.nd-mcard-name[b-a8zt5m7qfo]{ font-size: 0.875rem; }
/* Empty state */
.nd-empty[b-a8zt5m7qfo]{ padding: 18px 6px; }
}
/* ── Small phone (≤ 400px) ────────────────────────────────────── */
@media (max-width: 400px){
/* Tighten tab spacing so the third tab peeks into view */
.nd-mtabs[b-a8zt5m7qfo]{ gap: 10px; }
}
/* /Components/Pages/Authorized/Messages.razor.rz.scp.css */
/* ── Chat behaviors (scoped to the end-user Messages page) ───── */
/* messages must be copyable despite the global user-select:none */
.nd-bubble-text[b-cag29btfy8]{
-webkit-user-select: text;
user-select: text;
}
/* anchor for the "New messages" chip */
.nd-msg-right[b-cag29btfy8]{ position: relative; }
/* optimistic bubble awaiting the hub echo */
.nd-bubble.is-pending[b-cag29btfy8]{ opacity: .72; }
/* failed send — tappable, retry hint under the bubble */
.nd-bubble.is-failed[b-cag29btfy8]{ opacity: 1; cursor: pointer; }
.nd-bubble.is-failed .nd-bubble-inner[b-cag29btfy8]{
box-shadow: 0 0 0 1.5px rgba(220,53,69,.4), 0 1px 2px rgba(17,18,20,.1);
}
.nd-pending-fail[b-cag29btfy8]{
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(220,53,69,.9);
font-weight: 800;
}
/* "New messages" chip above the composer */
.nd-msg-newchip[b-cag29btfy8]{
position: absolute;
left: 50%;
bottom: 86px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: rgba(17,18,20,.82);
color: #fff;
font-weight: 800;
font-size: 0.8125rem;
box-shadow: 0 10px 26px rgba(17,18,20,.25);
cursor: pointer;
z-index: 5;
animation: nd-chip-in-b-cag29btfy8 .18s ease-out both;
}
@keyframes nd-chip-in-b-cag29btfy8{
from{ opacity: 0; transform: translate(-50%, 8px); }
to{ opacity: 1; transform: translate(-50%, 0); }
}
/* chat-list loading skeletons */
.nd-msg-skel[b-cag29btfy8]{
display: grid;
grid-template-columns: 64px 1fr;
gap: 12px;
padding: 12px 14px;
align-items: center;
}
.nd-msg-skel-ava[b-cag29btfy8]{
width: 64px;
height: 64px;
border-radius: 999px;
background: rgba(17,18,20,.06);
animation: nd-skel-b-cag29btfy8 1.1s ease-in-out infinite;
}
.nd-msg-skel-line[b-cag29btfy8]{
height: 14px;
width: 70%;
border-radius: 8px;
background: rgba(17,18,20,.06);
animation: nd-skel-b-cag29btfy8 1.1s ease-in-out infinite;
}
.nd-msg-skel-line.is-short[b-cag29btfy8]{ width: 45%; margin-top: 10px; }
@keyframes nd-skel-b-cag29btfy8{
0%, 100%{ opacity: 1; }
50%{ opacity: .45; }
}
/* empty-state CTA */
.nd-msg-empty[b-cag29btfy8]{
display: flex;
flex-direction: column;
align-items: center;
}
.nd-msg-empty-cta[b-cag29btfy8]{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
height: 44px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: linear-gradient(90deg, rgba(91,108,255,.95), rgba(255,91,200,.95));
color: #fff;
font-weight: 900;
font-size: 0.875rem;
cursor: pointer;
}
/* Credits + Top Up moved to the Profile tab — the header pill already
shows the balance, so Messages keeps the whole viewport for chats. */
@media (max-width: 980px){
/* skeletons match the enlarged mobile avatars (76px) */
.nd-msg-skel[b-cag29btfy8]{ grid-template-columns: 76px 1fr; }
.nd-msg-skel-ava[b-cag29btfy8]{ width: 76px; height: 76px; }
}
/* /Components/Pages/Authorized/Onboarding.razor.rz.scp.css */
/* ===== Welcome / profile set-up card ===== */
.nd-ob-card[b-4zf89xrycn]{
width: min(460px, 100%);
padding: 30px 28px 26px;
border-radius: 26px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(17,18,20,.08);
box-shadow: 0 24px 70px rgba(17,18,20,.10), 0 0 0 1px rgba(255,255,255,.6) inset;
text-align: center;
animation: nd-ob-in-b-4zf89xrycn .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nd-ob-in-b-4zf89xrycn{
from{ opacity: 0; transform: translateY(14px) scale(.985); }
to{ opacity: 1; transform: none; }
}
.nd-ob-kicker[b-4zf89xrycn]{
margin: 0 0 6px;
font-size: 0.8125rem;
font-weight: 800;
color: rgba(91,108,255,.95);
}
.nd-ob-title[b-4zf89xrycn]{
margin: 0;
font-size: 1.75rem;
line-height: 1.12;
font-weight: 900;
letter-spacing: -.02em;
color: rgba(17,18,20,.92);
}
.nd-ob-sub[b-4zf89xrycn]{
margin: 8px auto 0;
max-width: 30ch;
font-size: 0.875rem;
line-height: 1.5;
font-weight: 700;
color: rgba(17,18,20,.50);
}
.nd-ob-form[b-4zf89xrycn]{
margin-top: 22px;
display: grid;
gap: 16px;
text-align: left;
}
/* ----- photo ----- */
.nd-ob-photo-block[b-4zf89xrycn]{
display: grid;
justify-items: center;
gap: 6px;
text-align: center;
}
.nd-ob-photo[b-4zf89xrycn]{
position: relative;
width: 108px;
height: 108px;
border-radius: 999px;
display: grid;
place-items: center;
cursor: pointer;
overflow: hidden;
background: rgba(91,108,255,.06);
outline: 2px dashed rgba(91,108,255,.45);
outline-offset: -2px;
transition: transform .18s ease, outline-color .18s ease, box-shadow .18s ease;
-webkit-tap-highlight-color: transparent;
}
.nd-ob-photo[b-4zf89xrycn] input[type="file"]{
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.nd-ob-photo img[b-4zf89xrycn]{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.nd-ob-photo.has-photo[b-4zf89xrycn]{
outline: 3px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, var(--p1), var(--p2)) border-box;
border: 3px solid transparent;
box-shadow: 0 12px 30px rgba(91,108,255,.18);
}
.nd-ob-photo.is-error[b-4zf89xrycn]{ outline-color: rgba(255,91,200,.75); background: rgba(255,91,200,.06); }
.nd-ob-photo.is-busy[b-4zf89xrycn]{ cursor: progress; }
@media (hover: hover){
.nd-ob-photo:hover[b-4zf89xrycn]{ transform: translateY(-2px); }
}
.nd-ob-photo:focus-within[b-4zf89xrycn]{ box-shadow: 0 0 0 5px rgba(91,108,255,.16); }
.nd-ob-photo-ic[b-4zf89xrycn]{
position: relative;
z-index: 1;
width: 40px;
height: 40px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.125rem;
color: rgba(91,108,255,.95);
}
.nd-ob-photo.has-photo .nd-ob-photo-ic[b-4zf89xrycn]{
position: absolute;
right: 2px;
bottom: 2px;
width: 30px;
height: 30px;
font-size: 0.75rem;
color: #fff;
background: linear-gradient(135deg, var(--p1), var(--p2));
box-shadow: 0 4px 12px rgba(17,18,20,.25);
}
.nd-ob-photo.is-busy .nd-ob-photo-ic[b-4zf89xrycn]{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 999px;
background: rgba(255,255,255,.72);
color: rgba(91,108,255,.95);
font-size: 1.25rem;
}
.nd-ob-photo-cap[b-4zf89xrycn]{
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .04em;
color: rgba(17,18,20,.62);
}
.nd-ob-photo-hint[b-4zf89xrycn]{
font-size: 0.75rem;
line-height: 1.45;
color: rgba(17,18,20,.45);
max-width: 28ch;
}
/* ----- fields ----- */
.nd-ob-field[b-4zf89xrycn]{
display: grid;
gap: 8px;
padding: 12px 12px 12px;
border-radius: 18px;
border: 1px solid rgba(17,18,20,.08);
background: rgba(247,248,252,.7);
transition: border-color .18s ease, box-shadow .18s ease;
}
.nd-ob-field:focus-within[b-4zf89xrycn]{
border-color: rgba(91,108,255,.35);
box-shadow: 0 0 0 4px rgba(91,108,255,.08);
background: #fff;
}
.nd-ob-field.is-error[b-4zf89xrycn]{ border-color: rgba(255,91,200,.45); }
.nd-ob-label[b-4zf89xrycn]{
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .04em;
color: rgba(17,18,20,.60);
padding-left: 2px;
}
.nd-ob-opt[b-4zf89xrycn]{
margin-left: 6px;
font-weight: 700;
color: rgba(17,18,20,.38);
letter-spacing: 0;
}
.nd-ob-input[b-4zf89xrycn]{
width: 100%;
height: 50px;
border-radius: 14px;
border: 1px solid rgba(17,18,20,.12);
background: #fff;
padding: 0 14px;
outline: none;
font: inherit;
font-size: 1rem;
font-weight: 700;
color: rgba(17,18,20,.88);
transition: border-color .15s ease, box-shadow .15s ease;
}
.nd-ob-input[b-4zf89xrycn]::placeholder{ color: rgba(17,18,20,.32); font-weight: 600; }
.nd-ob-input:focus[b-4zf89xrycn]{
border-color: rgba(91,108,255,.55);
box-shadow: 0 0 0 4px rgba(91,108,255,.12);
}
.nd-ob-field.is-error .nd-ob-input[b-4zf89xrycn]{ border-color: rgba(255,91,200,.55); }
.nd-ob-error[b-4zf89xrycn]{
font-size: 0.75rem;
font-weight: 800;
color: #d6337f;
line-height: 1.4;
}
.nd-ob-hint[b-4zf89xrycn]{
font-size: 0.75rem;
font-weight: 700;
color: rgba(17,18,20,.45);
}
/* ----- city autocomplete ----- */
.nd-ob-city[b-4zf89xrycn]{ position: relative; }
.nd-ob-city .nd-ob-input[b-4zf89xrycn]{ padding-right: 44px; }
.nd-ob-city-spin[b-4zf89xrycn]{
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
border-radius: 999px;
border: 2px solid rgba(17,18,20,.12);
border-top-color: rgba(91,108,255,.95);
animation: nd-ob-spin-b-4zf89xrycn .8s linear infinite;
}
@keyframes nd-ob-spin-b-4zf89xrycn{ to{ transform: rotate(360deg); } }
.nd-ob-city-ok[b-4zf89xrycn]{
position: absolute;
right: 12px;
top: 50%;
width: 22px;
height: 22px;
margin-top: -11px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 0.6875rem;
color: #fff;
background: linear-gradient(135deg, var(--p1), var(--p2));
animation: nd-ob-pop-b-4zf89xrycn .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes nd-ob-pop-b-4zf89xrycn{ from{ transform: scale(.4); opacity: 0; } to{ transform: none; opacity: 1; } }
.nd-ob-city-list[b-4zf89xrycn]{
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 20;
max-height: 240px;
overflow: auto;
border-radius: 16px;
border: 1px solid rgba(17,18,20,.10);
background: #fff;
box-shadow: 0 18px 50px rgba(17,18,20,.14);
padding: 6px;
}
.nd-ob-city-item[b-4zf89xrycn]{
width: 100%;
display: grid;
gap: 2px;
text-align: left;
padding: 10px 12px;
border: 0;
border-radius: 12px;
background: transparent;
cursor: pointer;
font: inherit;
}
.nd-ob-city-item:hover[b-4zf89xrycn], .nd-ob-city-item:focus-visible[b-4zf89xrycn]{ background: rgba(91,108,255,.08); outline: none; }
.nd-ob-city-main[b-4zf89xrycn]{ font-weight: 800; font-size: 0.9375rem; color: rgba(17,18,20,.88); }
.nd-ob-city-sub[b-4zf89xrycn]{ font-size: 0.75rem; font-weight: 700; color: rgba(17,18,20,.45); }
.nd-ob-city-empty[b-4zf89xrycn]{
padding: 12px;
font-size: 0.8125rem;
font-weight: 700;
color: rgba(17,18,20,.45);
}
/* ----- interests ----- */
.nd-ob-chips[b-4zf89xrycn]{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nd-ob-chip[b-4zf89xrycn]{
height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.12);
background: #fff;
font: inherit;
font-size: 0.8125rem;
font-weight: 800;
color: rgba(17,18,20,.72);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.nd-ob-chip.is-on[b-4zf89xrycn]{
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, var(--p1), var(--p2));
box-shadow: 0 8px 20px rgba(91,108,255,.22);
}
.nd-ob-chip:active[b-4zf89xrycn]{ transform: scale(.96); }
.nd-ob-chip:focus-visible[b-4zf89xrycn]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
@media (hover: hover){
.nd-ob-chip:not(.is-on):hover[b-4zf89xrycn]{ border-color: rgba(91,108,255,.45); color: rgba(91,108,255,.95); }
}
/* ----- CTA ----- */
.nd-ob-cta[b-4zf89xrycn]{
margin-top: 4px;
height: 54px;
border-radius: 999px;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #fff;
font: inherit;
font-size: 0.8125rem;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 16px 40px rgba(91,108,255,.24);
transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover){
.nd-ob-cta:hover:not(:disabled)[b-4zf89xrycn]{ transform: translateY(-2px); box-shadow: 0 20px 50px rgba(91,108,255,.30); }
}
.nd-ob-cta:active:not(:disabled)[b-4zf89xrycn]{ transform: translateY(0) scale(.99); }
.nd-ob-cta:disabled[b-4zf89xrycn]{ opacity: .6; cursor: not-allowed; }
.nd-ob-cta:focus-visible[b-4zf89xrycn]{ outline: none; box-shadow: 0 0 0 5px rgba(91,108,255,.22), 0 16px 40px rgba(91,108,255,.24); }
@media (max-width: 560px){
.nd-ob-card[b-4zf89xrycn]{ padding: 24px 16px 20px; border-radius: 22px; }
.nd-ob-title[b-4zf89xrycn]{ font-size: 1.5rem; }
.nd-ob-form[b-4zf89xrycn]{ margin-top: 18px; gap: 12px; }
.nd-ob-field[b-4zf89xrycn]{ padding: 10px; }
}
@media (prefers-reduced-motion: reduce){
.nd-ob-card[b-4zf89xrycn], .nd-ob-city-ok[b-4zf89xrycn]{ animation: none; }
}
/* /Components/Pages/Authorized/Profile.razor.rz.scp.css */
.nd-photo-add.is-uploading[b-o6mfza4lf8] {
cursor: not-allowed;
opacity: .65;
pointer-events: none;
}
.nd-city-box[b-o6mfza4lf8] {
position: relative;
}
.nd-city-input[b-o6mfza4lf8] {
padding-right: 40px;
}
.nd-city-spin[b-o6mfza4lf8] {
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(91, 108, 255, 0.2);
border-top-color: rgba(91, 108, 255, 0.95);
transform: translateY(-50%);
animation: nd-city-spin-b-o6mfza4lf8 0.8s linear infinite;
}
.nd-city-dropdown[b-o6mfza4lf8] {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
z-index: 210;
border-radius: 16px;
border: 1px solid rgba(17, 18, 20, 0.1);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 16px 40px rgba(17, 18, 20, 0.16);
padding: 6px;
max-height: 300px;
overflow: auto;
backdrop-filter: blur(8px);
}
.nd-city-item[b-o6mfza4lf8] {
width: 100%;
border: 0;
text-align: left;
border-radius: 12px;
background: transparent;
padding: 10px 12px;
cursor: pointer;
display: grid;
gap: 2px;
}
.nd-city-item:hover[b-o6mfza4lf8] {
background: linear-gradient(90deg, rgba(91, 108, 255, 0.1), rgba(255, 91, 200, 0.08));
}
.nd-city-item-main[b-o6mfza4lf8] {
font-weight: 900;
color: rgba(17, 18, 20, 0.88);
}
.nd-city-item-sub[b-o6mfza4lf8] {
font-size: 0.75rem;
font-weight: 700;
color: rgba(17, 18, 20, 0.56);
}
.nd-city-empty[b-o6mfza4lf8] {
padding: 12px;
font-weight: 700;
color: rgba(17, 18, 20, 0.55);
}
.nd-goal-select[b-o6mfza4lf8] {
position: relative;
}
.nd-goal-trigger[b-o6mfza4lf8] {
width: 100%;
height: 48px;
border-radius: 16px;
border: 1px solid rgba(17, 18, 20, 0.12);
background: rgba(255, 255, 255, 0.85);
padding: 0 12px;
font-weight: 900;
color: rgba(17, 18, 20, 0.75);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
}
.nd-goal-select:focus-within .nd-goal-trigger[b-o6mfza4lf8] {
border-color: rgba(91, 108, 255, 0.55);
box-shadow: 0 0 0 6px rgba(91, 108, 255, 0.12);
}
.nd-goal-arrow[b-o6mfza4lf8] {
font-size: 1rem;
color: rgba(17, 18, 20, 0.48);
transform-origin: center;
transition: transform 0.18s ease;
}
.nd-goal-arrow.is-open[b-o6mfza4lf8] {
transform: rotate(180deg);
}
.nd-goal-dropdown[b-o6mfza4lf8] {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
z-index: 210;
border-radius: 16px;
border: 1px solid rgba(17, 18, 20, 0.1);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 16px 40px rgba(17, 18, 20, 0.16);
padding: 6px;
max-height: 280px;
overflow: auto;
backdrop-filter: blur(8px);
}
.nd-goal-item[b-o6mfza4lf8] {
width: 100%;
border: 0;
border-radius: 12px;
background: transparent;
text-align: left;
padding: 10px 12px;
font-weight: 800;
color: rgba(17, 18, 20, 0.78);
cursor: pointer;
}
.nd-goal-item:hover[b-o6mfza4lf8] {
background: linear-gradient(90deg, rgba(91, 108, 255, 0.1), rgba(255, 91, 200, 0.08));
}
.nd-goal-item.is-active[b-o6mfza4lf8] {
background: linear-gradient(90deg, rgba(91, 108, 255, 0.16), rgba(255, 91, 200, 0.1));
color: rgba(17, 18, 20, 0.92);
}
@keyframes nd-city-spin-b-o6mfza4lf8 {
to {
transform: translateY(-50%) rotate(360deg);
}
}
@media (max-width: 760px){
/* Larger touch targets for autocomplete and dropdown items */
.nd-city-item[b-o6mfza4lf8]{ padding: 12px 14px; min-height: 48px; }
.nd-goal-item[b-o6mfza4lf8]{ padding: 12px 14px; min-height: 48px; }
.nd-goal-trigger[b-o6mfza4lf8]{ height: 52px; }
/* Keep dropdowns inside viewport on small screens */
.nd-city-dropdown[b-o6mfza4lf8],
.nd-goal-dropdown[b-o6mfza4lf8]{ max-height: 220px; }
}
/* ===== Interests chips ===== */
.nd-pm-chips[b-o6mfza4lf8]{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nd-pm-chip[b-o6mfza4lf8]{
height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.12);
background: #fff;
font: inherit;
font-size: 0.8125rem;
font-weight: 800;
color: rgba(17,18,20,.72);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.nd-pm-chip.is-on[b-o6mfza4lf8]{
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, var(--p1), var(--p2));
box-shadow: 0 8px 20px rgba(91,108,255,.22);
}
.nd-pm-chip:active[b-o6mfza4lf8]{ transform: scale(.96); }
.nd-pm-chip:focus-visible[b-o6mfza4lf8]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
@media (hover: hover){
.nd-pm-chip:not(.is-on):hover[b-o6mfza4lf8]{ border-color: rgba(91,108,255,.45); color: rgba(91,108,255,.95); }
}
/* /Components/Pages/Authorized/Search.razor.rz.scp.css */
/* ===== Search page ===== */
@media (max-width: 980px){
/* The page header already says where the user is — dropping the
in-page title hands ~54px back to the photo. */
.nd-pm-head[b-invd0v599f]{ display: none; }
/* Cap the photo height so the photo + action buttons always fit above
the fixed bottom nav. Subtracts: header + bottom nav (shared vars) +
hero/profile padding, card padding, gap, the actions row and a
safety gap. Vars come from app.css (@≤980px). */
.nd-search-stage[b-invd0v599f]{
max-height: max(220px, calc(100dvh - var(--nd-header-h) - var(--nd-bottomnav-h) - 176px));
}
.nd-search-wrap[b-invd0v599f]{ gap: 10px; }
}
/* ===== Empty state ===== */
.nd-search-empty[b-invd0v599f]{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
border-radius: var(--radius-xl);
background: rgba(255,255,255,.92);
border: 1px solid rgba(17,18,20,.08);
box-shadow: 0 16px 60px rgba(17,18,20,.06);
overflow: hidden;
min-height: 420px;
}
.nd-search-empty-orb[b-invd0v599f]{
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(91,108,255,.12), rgba(255,91,200,.08) 60%, transparent 80%);
top: -40px;
right: -60px;
animation: nd-orb-float-b-invd0v599f 6s ease-in-out infinite;
pointer-events: none;
}
.nd-search-empty-orb2[b-invd0v599f]{
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(255,91,200,.10), rgba(91,108,255,.06) 60%, transparent 80%);
top: auto;
bottom: -30px;
left: -40px;
right: auto;
animation: nd-orb-float-b-invd0v599f 8s ease-in-out infinite reverse;
}
@keyframes nd-orb-float-b-invd0v599f{
0%, 100%{ transform: translate(0, 0) scale(1); }
33%{ transform: translate(12px, -18px) scale(1.06); }
66%{ transform: translate(-8px, 10px) scale(0.95); }
}
.nd-search-empty-icon[b-invd0v599f]{
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(91,108,255,.14), rgba(255,91,200,.14));
display: grid;
place-items: center;
margin-bottom: 20px;
animation: nd-icon-pulse-b-invd0v599f 3s ease-in-out infinite;
position: relative;
z-index: 1;
}
.nd-search-empty-icon i[b-invd0v599f]{
font-size: 2rem;
background: linear-gradient(135deg, rgba(91,108,255,.85), rgba(255,91,200,.85));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes nd-icon-pulse-b-invd0v599f{
0%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(91,108,255,.12); }
50%{ transform: scale(1.06); box-shadow: 0 0 0 18px rgba(91,108,255,0); }
}
.nd-search-empty-title[b-invd0v599f]{
font-size: 1.375rem;
font-weight: 950;
color: rgba(17,18,20,.82);
position: relative;
z-index: 1;
}
.nd-search-empty-sub[b-invd0v599f]{
margin-top: 8px;
font-size: 0.875rem;
font-weight: 800;
color: rgba(17,18,20,.48);
line-height: 1.55;
position: relative;
z-index: 1;
}
.nd-search-empty-btn[b-invd0v599f]{
margin-top: 24px;
height: 46px;
padding: 0 28px;
border-radius: 999px;
border: 0;
background: linear-gradient(90deg, rgba(91,108,255,.92), rgba(255,91,200,.92));
color: #fff;
font-weight: 900;
font-size: 0.875rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 14px 40px rgba(91,108,255,.18);
transition: transform .15s ease, box-shadow .15s ease;
position: relative;
z-index: 1;
}
.nd-search-empty-btn:hover[b-invd0v599f]{
transform: translateY(-2px);
box-shadow: 0 18px 50px rgba(91,108,255,.24);
}
.nd-search-empty-btn:active[b-invd0v599f]{
transform: translateY(0);
}
.nd-search-empty-btn i[b-invd0v599f]{ font-size: 0.8125rem; }
.nd-search-empty-actions[b-invd0v599f]{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.nd-search-empty-link[b-invd0v599f]{
border: 0;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font: inherit;
font-size: 0.8125rem;
font-weight: 900;
color: rgba(91,108,255,.95);
padding: 6px 10px;
border-radius: 10px;
}
.nd-search-empty-link:hover[b-invd0v599f]{ background: rgba(91,108,255,.08); }
@media (max-width: 560px){
.nd-search-empty[b-invd0v599f]{ min-height: 340px; padding: 40px 20px; }
.nd-search-empty-icon[b-invd0v599f]{ width: 64px; height: 64px; }
.nd-search-empty-icon i[b-invd0v599f]{ font-size: 1.625rem; }
.nd-search-empty-title[b-invd0v599f]{ font-size: 1.125rem; }
.nd-search-empty-sub[b-invd0v599f]{ font-size: 0.8125rem; }
}
.nd-search-wrap[b-invd0v599f]{ display:grid; gap: 16px; }
/* ===== Search card wrapper (photo + actions) ===== */
.nd-search-card[b-invd0v599f]{
position: relative;
padding: 26px 26px 22px;
border-radius: var(--radius-xl);
background: rgba(255,255,255,.92);
border: 1px solid rgba(17,18,20,.08);
box-shadow: 0 16px 60px rgba(17,18,20,.06);
overflow: hidden;
display: grid;
gap: 20px;
}
.nd-search-card-orb[b-invd0v599f]{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(91,108,255,.10), rgba(255,91,200,.06) 60%, transparent 80%);
top: -60px;
right: -70px;
animation: nd-orb-float-b-invd0v599f 7s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.nd-search-card-orb2[b-invd0v599f]{
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(255,91,200,.10), rgba(91,108,255,.05) 60%, transparent 80%);
top: auto;
bottom: -40px;
left: -50px;
right: auto;
animation: nd-orb-float-b-invd0v599f 9s ease-in-out infinite reverse;
}
.nd-search-card .nd-search-stage[b-invd0v599f],
.nd-search-card .nd-search-actions[b-invd0v599f]{
position: relative;
z-index: 1;
}
.nd-search-stage[b-invd0v599f]{
position: relative;
width: 100%;
max-width: 420px;
margin: 0 auto;
aspect-ratio: 3 / 4;
}
.nd-card[b-invd0v599f]{
position:absolute;
inset:0;
border-radius: var(--radius-xl);
background: rgba(255,255,255,.92);
border: 1px solid rgba(17,18,20,.10);
box-shadow: var(--shadow-2);
overflow:hidden;
transform: translateY(calc(var(--depth) * 10px)) scale(calc(1 - (var(--depth) * 0.02)));
transition: transform .22s ease, opacity .22s ease;
}
.nd-card.is-under[b-invd0v599f]{ opacity: 0; }
.nd-card.is-top[b-invd0v599f]{ opacity: 1; }
/* ===== Card media: photo gallery + tap zones + info ===== */
.nd-card-media[b-invd0v599f]{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
background: rgba(17,18,20,.06);
transform: translateZ(0);
}
/* every photo of the top card is stacked; the active one is simply shown */
.nd-card-photo[b-invd0v599f]{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity .22s ease;
pointer-events: none;
}
.nd-card-photo.is-active[b-invd0v599f]{ opacity: 1; }
/* segmented progress bar (one segment per photo) */
.nd-card-dots[b-invd0v599f]{
position: absolute;
top: 10px;
left: 12px;
right: 12px;
z-index: 3;
display: flex;
gap: 4px;
pointer-events: none;
}
.nd-card-dot[b-invd0v599f]{
flex: 1;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,.38);
box-shadow: 0 1px 4px rgba(0,0,0,.25);
transition: background .18s ease;
}
.nd-card-dot.is-on[b-invd0v599f]{ background: rgba(255,255,255,.98); }
.nd-card-dot.is-seen[b-invd0v599f]{ background: rgba(255,255,255,.62); }
.nd-card-count[b-invd0v599f]{
position: absolute;
top: 20px;
right: 12px;
z-index: 3;
height: 22px;
padding: 0 8px;
border-radius: 999px;
display: inline-flex;
align-items: center;
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: .04em;
color: rgba(255,255,255,.92);
background: rgba(17,18,20,.36);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
pointer-events: none;
}
/* tap zones: left third = previous, the rest = next. They stop above the
info band so a tap on the name still opens the profile. */
.nd-card-zone[b-invd0v599f]{
position: absolute;
top: 0;
bottom: 96px;
z-index: 2;
border: 0;
padding: 0;
margin: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
}
.nd-card-zone.is-prev[b-invd0v599f]{ left: 0; width: 34%; }
.nd-card-zone.is-next[b-invd0v599f]{ left: 34%; right: 0; }
.nd-card-zone[aria-disabled="true"][b-invd0v599f]{ cursor: default; }
.nd-card-zone:focus-visible[b-invd0v599f]{ outline: none; }
/* a discreet chevron for pointer devices only; touch users get the coach mark */
@media (hover: hover) and (pointer: fine){
.nd-card-zone[b-invd0v599f]::after{
content: "";
position: absolute;
top: 50%;
width: 34px;
height: 34px;
border-radius: 999px;
transform: translateY(-50%);
background: rgba(17,18,20,.40) center / 12px no-repeat;
opacity: 0;
transition: opacity .18s ease;
}
.nd-card-zone.is-prev[b-invd0v599f]::after{
left: 10px;
background-image: url("data:image/svg+xml;utf8,");
}
.nd-card-zone.is-next[b-invd0v599f]::after{
right: 10px;
background-image: url("data:image/svg+xml;utf8,");
}
.nd-card-media:hover .nd-card-zone:not([aria-disabled="true"])[b-invd0v599f]::after{ opacity: .9; }
}
.nd-card-ph[b-invd0v599f]{
width:100%;
height:100%;
display:grid;
place-items:center;
background: rgba(17,18,20,.06);
color: rgba(17,18,20,.35);
font-size: 2.75rem;
}
.nd-card-gradient[b-invd0v599f]{
position:absolute;
left:0; right:0; bottom:0;
height: 52%;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 100%);
pointer-events:none;
z-index: 1;
}
/* name + age; the whole band opens the profile */
.nd-card-info[b-invd0v599f]{
position:absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 20px 16px 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
border: 0;
background: transparent;
color: rgba(255,255,255,.96);
text-align: left;
cursor: pointer;
font: inherit;
-webkit-tap-highlight-color: transparent;
}
.nd-card-info:focus-visible[b-invd0v599f]{ outline: none; }
.nd-card-info:focus-visible .nd-card-more[b-invd0v599f]{
box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}
.nd-card-name[b-invd0v599f]{
font-weight: 950;
font-size: 1.625rem;
letter-spacing: .01em;
line-height: 1.1;
text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.nd-card-more[b-invd0v599f]{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .02em;
color: rgba(255,255,255,.95);
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.28);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background .18s ease, transform .18s ease;
}
.nd-card-more i[b-invd0v599f]{ font-size: 0.8125rem; }
@media (hover: hover){
.nd-card-info:hover .nd-card-more[b-invd0v599f]{ background: rgba(255,255,255,.28); transform: translateY(-1px); }
}
.nd-search-actions[b-invd0v599f]{
display:flex;
justify-content:center;
gap: 14px;
padding-top: 6px;
max-width: 420px;
margin: 0 auto;
}
.nd-act[b-invd0v599f]{
width: 56px;
height: 56px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.85);
box-shadow: 0 16px 40px rgba(17,18,20,.10);
display:grid;
place-items:center;
cursor:pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.nd-act i[b-invd0v599f]{ font-size: 1.25rem; }
.nd-act:hover[b-invd0v599f]{
transform: translateY(-2px);
box-shadow: 0 22px 54px rgba(17,18,20,.14);
}
.nd-act:active[b-invd0v599f]{ transform: scale(.94); }
.nd-act:disabled[b-invd0v599f]{ opacity: .65; cursor:not-allowed; transform:none; }
.nd-act-no[b-invd0v599f]{
border-color: rgba(255,91,200,.25);
}
.nd-act-no i[b-invd0v599f]{
color: rgba(255,91,200,.95);
}
.nd-act-yes[b-invd0v599f]{
border-color: rgba(91,108,255,.25);
background: linear-gradient(90deg, rgba(91,108,255,.92), rgba(255,91,200,.92));
color: white;
border: 0;
}
.nd-act-yes i[b-invd0v599f]{ color: rgba(255,255,255,.96); }
.nd-act-ghost[b-invd0v599f]{
background: rgba(255,255,255,.92);
border-color: rgba(91,108,255,.30);
}
.nd-act-ghost i[b-invd0v599f]{
background: linear-gradient(135deg, var(--p1), var(--p2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== Verdict stamps, washes and the like burst ========================= */
/* While dragging, nd-swipe.js writes --like / --nope (0..1) on the card, so
the stamp and the colour wash grow with the finger. On a committed swipe the
card gets .is-stamp-like / .is-stamp-nope / .is-stamp-back and the stamp
pops to full size while the card flies (or slides back in). */
.nd-wash[b-invd0v599f]{
position: absolute;
inset: 0;
z-index: 4;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .12s linear;
}
.nd-wash.is-like[b-invd0v599f]{
background: linear-gradient(160deg, rgba(91,108,255,.55), rgba(255,91,200,.35) 70%, rgba(91,108,255,.2));
opacity: calc(var(--like, 0) * .85);
}
.nd-wash.is-nope[b-invd0v599f]{
background: linear-gradient(200deg, rgba(255,91,200,.5), rgba(17,18,20,.35));
opacity: calc(var(--nope, 0) * .85);
}
.nd-card.is-stamp-like .nd-wash.is-like[b-invd0v599f],
.nd-card.is-stamp-nope .nd-wash.is-nope[b-invd0v599f]{ opacity: .85; transition: opacity .18s ease; }
.nd-stamp[b-invd0v599f]{
position: absolute;
top: 26px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 16px;
border: 3px solid currentColor;
background: rgba(255,255,255,.14);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
font-size: 1.5rem;
font-weight: 950;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1;
pointer-events: none;
opacity: 0;
text-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 10px 30px rgba(0,0,0,.18);
transition: opacity .1s linear, transform .1s linear;
}
.nd-stamp i[b-invd0v599f]{ font-size: 1.25rem; }
.nd-stamp.is-like[b-invd0v599f]{
left: 18px;
color: #fff;
background: linear-gradient(135deg, rgba(91,108,255,.95), rgba(255,91,200,.95));
border-color: rgba(255,255,255,.9);
opacity: var(--like, 0);
transform: rotate(-14deg) scale(calc(.75 + var(--like, 0) * .25));
}
.nd-stamp.is-nope[b-invd0v599f]{
right: 18px;
color: #fff;
background: rgba(255,91,200,.92);
border-color: rgba(255,255,255,.9);
opacity: var(--nope, 0);
transform: rotate(14deg) scale(calc(.75 + var(--nope, 0) * .25));
}
.nd-stamp.is-back[b-invd0v599f]{
left: 50%;
top: 24px;
color: rgba(17,18,20,.85);
background: rgba(255,255,255,.96);
border-color: rgba(255,255,255,.96);
transform: translateX(-50%) rotate(-6deg);
animation: nd-stamp-back-b-invd0v599f .5s cubic-bezier(.2,.9,.3,1.3) both;
}
.nd-card.is-stamp-like .nd-stamp.is-like[b-invd0v599f]{ animation: nd-stamp-pop-l-b-invd0v599f .38s cubic-bezier(.2,.9,.3,1.35) both; }
.nd-card.is-stamp-nope .nd-stamp.is-nope[b-invd0v599f]{ animation: nd-stamp-pop-r-b-invd0v599f .38s cubic-bezier(.2,.9,.3,1.35) both; }
@keyframes nd-stamp-pop-l-b-invd0v599f{
from{ opacity: 0; transform: rotate(-14deg) scale(.4); }
65%{ opacity: 1; transform: rotate(-14deg) scale(1.15); }
to{ opacity: 1; transform: rotate(-14deg) scale(1); }
}
@keyframes nd-stamp-pop-r-b-invd0v599f{
from{ opacity: 0; transform: rotate(14deg) scale(.4); }
65%{ opacity: 1; transform: rotate(14deg) scale(1.15); }
to{ opacity: 1; transform: rotate(14deg) scale(1); }
}
@keyframes nd-stamp-back-b-invd0v599f{
from{ opacity: 0; transform: translateX(-50%) translateY(-14px) rotate(-6deg) scale(.6); }
60%{ opacity: 1; transform: translateX(-50%) translateY(0) rotate(-6deg) scale(1.08); }
to{ opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); }
}
/* a heart bursts from the centre on a committed like */
.nd-burst[b-invd0v599f]{
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
border-radius: 999px;
display: grid;
place-items: center;
color: #fff;
font-size: 3.25rem;
background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
pointer-events: none;
animation: nd-burst-b-invd0v599f .55s cubic-bezier(.2,.8,.3,1) both;
filter: drop-shadow(0 8px 24px rgba(91,108,255,.45));
}
@keyframes nd-burst-b-invd0v599f{
from{ opacity: 0; transform: scale(.2); }
45%{ opacity: 1; transform: scale(1.15); }
to{ opacity: 0; transform: scale(1.6); }
}
/* text toast: errors only ("Failed to open chat") */
.nd-swipe-toast[b-invd0v599f]{
position:absolute;
left: 50%;
bottom: 96px;
z-index: 5;
transform: translateX(-50%);
padding: 10px 14px;
border-radius: 14px;
font-weight: 900;
font-size: 0.875rem;
background: rgba(17,18,20,.86);
color: #fff;
box-shadow: 0 10px 30px rgba(17,18,20,.2);
animation: nd-hint-in-b-invd0v599f .2s ease both;
}
/* swipe animations */
/* to-only keyframes: the fling continues from wherever the drag
(js/nd-swipe.js inline transform) left the card */
.nd-card.swipe-left[b-invd0v599f]{ animation: nd-swipe-left-b-invd0v599f .28s ease forwards; }
.nd-card.swipe-right[b-invd0v599f]{ animation: nd-swipe-right-b-invd0v599f .28s ease forwards; }
/* rewind: from-only keyframes, the card settles into its normal --depth transform */
.nd-card.undo-from-left[b-invd0v599f]{ animation: nd-undo-left-b-invd0v599f .32s cubic-bezier(.2,.7,.2,1) both; }
.nd-card.undo-from-right[b-invd0v599f]{ animation: nd-undo-right-b-invd0v599f .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes nd-undo-left-b-invd0v599f{
from{ transform: translateX(-120%) rotate(-10deg); opacity: 0; }
}
@keyframes nd-undo-right-b-invd0v599f{
from{ transform: translateX(120%) rotate(10deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.nd-card[b-invd0v599f], .nd-card-photo[b-invd0v599f], .nd-card.swipe-left[b-invd0v599f], .nd-card.swipe-right[b-invd0v599f],
.nd-card.undo-from-left[b-invd0v599f], .nd-card.undo-from-right[b-invd0v599f]{ animation: none; transition: none; }
.nd-stamp[b-invd0v599f], .nd-burst[b-invd0v599f]{ animation: none; }
.nd-card.is-stamp-like .nd-stamp.is-like[b-invd0v599f], .nd-card.is-stamp-nope .nd-stamp.is-nope[b-invd0v599f], .nd-stamp.is-back[b-invd0v599f]{ opacity: 1; }
}
@keyframes nd-swipe-left-b-invd0v599f{
to{ transform: translateX(-120%) rotate(-10deg); opacity: 0; }
}
@keyframes nd-swipe-right-b-invd0v599f{
to{ transform: translateX(120%) rotate(10deg); opacity: 0; }
}
/* ── Tablet (≤ 760px) ──────────────────────────────────────────── */
@media (max-width: 760px){
.nd-act[b-invd0v599f]{
width: 60px;
height: 60px;
-webkit-tap-highlight-color: transparent;
}
.nd-act i[b-invd0v599f]{ font-size: 1.375rem; }
.nd-search-actions[b-invd0v599f]{ gap: 18px; padding-top: 10px; }
}
/* ── Phone (≤ 560px) ──────────────────────────────────────────── */
@media (max-width: 560px){
.nd-search-card[b-invd0v599f]{ padding: 10px 10px 12px; gap: 10px; border-radius: 20px; }
.nd-search-card-orb[b-invd0v599f]{ width: 200px; height: 200px; top: -50px; right: -50px; }
.nd-search-card-orb2[b-invd0v599f]{ width: 160px; height: 160px; bottom: -30px; left: -30px; }
.nd-search-stage[b-invd0v599f]{ max-width: 100%; aspect-ratio: 3 / 4; }
.nd-card-name[b-invd0v599f]{ font-size: 1.375rem; }
.nd-card-tags[b-invd0v599f]{ gap: 6px; }
.nd-tag[b-invd0v599f]{ height: 24px; padding: 0 8px; font-size: 0.6875rem; }
}
/* ── Small phone (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px){
.nd-search-card[b-invd0v599f]{ padding: 8px 8px 10px; }
.nd-card-info[b-invd0v599f]{ padding: 16px 12px 12px; gap: 8px; }
.nd-card-name[b-invd0v599f]{ font-size: 1.25rem; }
.nd-card-zone[b-invd0v599f]{ bottom: 84px; }
.nd-card-age[b-invd0v599f]{ font-size: 1rem; }
.nd-card-city[b-invd0v599f]{ font-size: 0.8125rem; }
.nd-act[b-invd0v599f]{ width: 56px; height: 56px; }
.nd-act i[b-invd0v599f]{ font-size: 1.25rem; }
/* Match modal compact */
.nd-match-title[b-invd0v599f]{ font-size: 1.5rem; }
.nd-match-sub[b-invd0v599f]{ font-size: 0.8125rem; }
.nd-match-avatars[b-invd0v599f]{ margin-top: 12px; margin-bottom: 18px; gap: 10px; }
.nd-match-a[b-invd0v599f], .nd-match-b[b-invd0v599f]{ width: 80px; height: 80px; }
.nd-match-heart[b-invd0v599f]{ width: 44px; height: 44px; }
.nd-match-heart i[b-invd0v599f]{ font-size: 1rem; }
}
/* ── Swipe coach mark (touch devices, every visit, ~5 s) ─────────── */
.nd-swipe-hint[b-invd0v599f]{
position: absolute;
inset: 0;
z-index: 6;
display: none;
flex-direction: column;
justify-content: space-between;
border-radius: var(--radius-xl);
background: rgba(17,18,20,.56);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
overflow: hidden;
color: #fff;
padding: 18px 14px 16px;
}
.nd-swipe-hint.is-on[b-invd0v599f]{ display: flex; animation: nd-hint-in-b-invd0v599f .25s ease both; }
@keyframes nd-hint-in-b-invd0v599f{ from{ opacity: 0; } to{ opacity: 1; } }
/* block 1: the photo strip + a tapping hand */
.nd-swipe-hint-photos[b-invd0v599f]{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.nd-swipe-hint-bar[b-invd0v599f]{
display: flex;
gap: 5px;
width: min(220px, 70%);
margin-bottom: 6px;
}
.nd-swipe-hint-bar i[b-invd0v599f]{
flex: 1;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,.3);
animation: nd-hint-seg-b-invd0v599f 2.4s linear infinite;
}
.nd-swipe-hint-bar i:nth-child(2)[b-invd0v599f]{ animation-delay: .6s; }
.nd-swipe-hint-bar i:nth-child(3)[b-invd0v599f]{ animation-delay: 1.2s; }
.nd-swipe-hint-bar i:nth-child(4)[b-invd0v599f]{ animation-delay: 1.8s; }
@keyframes nd-hint-seg-b-invd0v599f{
0%, 24%{ background: rgba(255,255,255,1); }
25%, 100%{ background: rgba(255,255,255,.3); }
}
.nd-swipe-hint-tap[b-invd0v599f]{
position: relative;
width: 58px;
height: 58px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.5rem;
background: rgba(255,255,255,.16);
border: 2px solid rgba(255,255,255,.75);
animation: nd-hint-tap-b-invd0v599f .6s ease-in-out infinite;
}
.nd-swipe-hint-tap[b-invd0v599f]::after{
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.7);
animation: nd-hint-ripple-b-invd0v599f .6s ease-out infinite;
}
@keyframes nd-hint-tap-b-invd0v599f{ 0%, 100%{ transform: scale(1); } 40%{ transform: scale(.88); } }
@keyframes nd-hint-ripple-b-invd0v599f{ 0%{ transform: scale(1); opacity: .8; } 100%{ transform: scale(1.55); opacity: 0; } }
.nd-swipe-hint-sub[b-invd0v599f]{
font-size: 0.8125rem;
font-weight: 700;
color: rgba(255,255,255,.85);
}
/* block 2: the two swipe directions */
.nd-swipe-hint-row[b-invd0v599f]{
display: flex;
align-items: center;
justify-content: space-around;
gap: 12px;
}
.nd-swipe-hint-half[b-invd0v599f]{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.nd-swipe-hint-chip[b-invd0v599f]{
width: 58px;
height: 58px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.5rem;
border: 2px solid rgba(255,255,255,.85);
}
.is-no .nd-swipe-hint-chip[b-invd0v599f]{ background: rgba(255,91,200,.30); }
.is-yes .nd-swipe-hint-chip[b-invd0v599f]{
background: linear-gradient(135deg, rgba(91,108,255,.9), rgba(255,91,200,.9));
border-color: transparent;
}
.nd-swipe-hint-word[b-invd0v599f]{
font-weight: 950;
font-size: 1rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.nd-swipe-hint-arrow[b-invd0v599f]{ font-size: 1.375rem; opacity: .9; }
.is-no .nd-swipe-hint-arrow[b-invd0v599f]{ animation: nd-hint-nudge-l-b-invd0v599f 1.2s ease-in-out infinite; }
.is-yes .nd-swipe-hint-arrow[b-invd0v599f]{ animation: nd-hint-nudge-r-b-invd0v599f 1.2s ease-in-out infinite; }
@keyframes nd-hint-nudge-l-b-invd0v599f{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(-10px); } }
@keyframes nd-hint-nudge-r-b-invd0v599f{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(10px); } }
.nd-swipe-hint-caption[b-invd0v599f]{
text-align: center;
color: rgba(255,255,255,.92);
font-weight: 800;
font-size: 0.8125rem;
}
/* short stages (small phones in landscape or tiny screens): tighten */
@media (max-height: 600px){
.nd-swipe-hint[b-invd0v599f]{ padding: 12px 12px 10px; }
.nd-swipe-hint-tap[b-invd0v599f], .nd-swipe-hint-chip[b-invd0v599f]{ width: 46px; height: 46px; font-size: 1.2rem; }
.nd-swipe-hint-word[b-invd0v599f]{ font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce){
.nd-swipe-hint-bar i[b-invd0v599f], .nd-swipe-hint-tap[b-invd0v599f], .nd-swipe-hint-tap[b-invd0v599f]::after, .nd-swipe-hint-arrow[b-invd0v599f]{ animation: none; }
.nd-swipe-hint-bar i:first-child[b-invd0v599f]{ background: #fff; }
}
/* ===== Match modal ===== */
.nd-match-modal[b-invd0v599f]{ max-width: 520px; }
.nd-match-inner[b-invd0v599f]{ text-align:center; }
.nd-match-title[b-invd0v599f]{
font-size: 1.75rem;
font-weight: 950;
margin-top: 4px;
}
.nd-match-sub[b-invd0v599f]{
margin-top: 6px;
color: rgba(17,18,20,.62);
font-weight: 800;
}
.nd-match-avatars[b-invd0v599f]{
margin-top: 18px;
display:flex;
justify-content:center;
align-items:center;
gap: 14px;
margin-bottom: 28px;
}
.nd-match-a[b-invd0v599f], .nd-match-b[b-invd0v599f]{
width: 96px; height: 96px;
border-radius: 999px;
overflow:hidden;
border: 1px solid rgba(17,18,20,.10);
box-shadow: 0 16px 40px rgba(17,18,20,.12);
background: rgba(17,18,20,.05);
display:grid;
place-items:center;
}
.nd-match-a img[b-invd0v599f], .nd-match-b img[b-invd0v599f]{
width:100%; height:100%; object-fit:cover; display:block;
}
.nd-match-ph[b-invd0v599f]{
width:100%; height:100%;
display:grid; place-items:center;
color: rgba(17,18,20,.35);
font-size: 1.75rem;
}
.nd-match-heart[b-invd0v599f]{
width: 54px; height: 54px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(91,108,255,.92), rgba(255,91,200,.92));
color: white;
display:grid;
place-items:center;
box-shadow: 0 18px 60px rgba(91,108,255,.22);
}
.nd-match-heart i[b-invd0v599f]{ font-size: 1.125rem; }
.nd-match-btn[b-invd0v599f]{
display:flex;
gap: 10px;
justify-content:center;
align-items:center;
}
.nd-match-actions[b-invd0v599f]{
display: flex;
justify-content: center;
}
.nd-match-actions .nd-match-btn[b-invd0v599f]{
width: min(340px, 100%);
}
/* /Components/Pages/Authorized/Settings.razor.rz.scp.css */
/* Settings blocks reuse profile card styles */
.nd-set-section[b-k2a5zg12n1]{
padding: 6px 0;
}
.nd-set-title[b-k2a5zg12n1]{
font-weight: 900;
font-size: 1rem;
color: rgba(17,18,20,.85);
margin-bottom: 10px;
}
.nd-set-divider[b-k2a5zg12n1]{
height: 1px;
background: rgba(17,18,20,.08);
margin: 18px 0;
}
/* Toggle row */
.nd-set-toggle-row[b-k2a5zg12n1]{
display:flex;
align-items:center;
gap: 12px;
min-height: 44px;
cursor: pointer;
}
.nd-set-toggle-text[b-k2a5zg12n1]{
display:grid;
gap: 2px;
}
.nd-set-toggle-main[b-k2a5zg12n1]{
font-weight: 900;
color: rgba(17,18,20,.78);
font-size: 0.8125rem;
}
.nd-set-toggle-sub[b-k2a5zg12n1]{
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .12em;
color: rgba(17,18,20,.62);
}
/* Toggle switch (clean, matches your tokens) */
.nd-sw[b-k2a5zg12n1]{
position: relative;
display:inline-block;
width: 54px;
height: 30px;
flex: 0 0 auto;
}
.nd-sw input[b-k2a5zg12n1]{
opacity: 0;
width: 0;
height: 0;
}
.nd-sw-track[b-k2a5zg12n1]{
position: absolute;
inset: 0;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.12);
background: rgba(17,18,20,.06);
box-shadow: 0 10px 28px rgba(17,18,20,.08);
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nd-sw-thumb[b-k2a5zg12n1]{
position: absolute;
left: 4px;
top: 4px;
width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(255,255,255,.95);
border: 1px solid rgba(17,18,20,.12);
box-shadow: 0 10px 20px rgba(17,18,20,.14);
transition: transform .18s ease;
}
.nd-sw input:checked + .nd-sw-track[b-k2a5zg12n1]{
border-color: rgba(91,108,255,.35);
background: linear-gradient(90deg, rgba(91,108,255,.90), rgba(255,91,200,.90));
box-shadow: 0 16px 36px rgba(91,108,255,.18);
}
.nd-sw input:checked + .nd-sw-track .nd-sw-thumb[b-k2a5zg12n1]{
transform: translateX(24px);
}
.nd-sw input:focus + .nd-sw-track[b-k2a5zg12n1]{
box-shadow: 0 0 0 6px rgba(91,108,255,.10), 0 10px 28px rgba(17,18,20,.08);
}
/* Danger block */
.nd-set-danger-text[b-k2a5zg12n1]{
font-size: 0.75rem;
line-height: 1.55;
color: rgba(17,18,20,.55);
max-width: 560px;
}
.nd-danger-btn[b-k2a5zg12n1]{
margin-top: 14px;
height: 44px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid rgba(255, 91, 91, 0.55);
background: rgba(255, 91, 91, 0.06);
color: rgba(255, 91, 91, 0.95);
font-weight: 900;
cursor:pointer;
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nd-danger-btn:hover[b-k2a5zg12n1]{
transform: translateY(-1px);
background: rgba(255,91,200,.10);
box-shadow: 0 16px 40px rgba(255,91,200,.16);
}
.nd-danger-btn:active[b-k2a5zg12n1]{
transform: translateY(0px);
}
/* reuse warn modal but add danger button style */
.nd-set-danger-actions[b-k2a5zg12n1]{
display:flex;
gap: 10px;
justify-content:flex-end;
}
.nd-warn-btn-danger[b-k2a5zg12n1]{
height: 42px;
padding: 0 14px;
border-radius: 12px;
border: 0;
cursor:pointer;
font-weight: 900;
color: white;
background: linear-gradient(90deg, rgba(255, 91, 91, 0.95), rgb(255 91 91 / 75%));
box-shadow: 0 16px 40px rgba(255, 91, 91, 0.22);
}
.nd-warn-btn-danger:disabled[b-k2a5zg12n1]{
opacity: .6;
cursor: not-allowed;
}
/* ── Mobile-only logout section (hidden on desktop) ─────────── */
.nd-set-mobile-logout[b-k2a5zg12n1]{ display: none; }
.nd-logout-btn[b-k2a5zg12n1]{
display: inline-flex;
align-items: center;
gap: 10px;
height: 46px;
padding: 0 20px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.12);
background: rgba(255,255,255,.75);
font-weight: 900;
color: rgba(17,18,20,.70);
cursor: pointer;
transition: background .18s ease;
-webkit-tap-highlight-color: transparent;
}
.nd-logout-btn:active[b-k2a5zg12n1]{
background: rgba(17,18,20,.06);
}
/* Mobile */
@media (max-width: 980px){
.nd-set-mobile-logout[b-k2a5zg12n1]{ display: block; }
}
@media (max-width: 560px){
.nd-pm-row .nd-auth-input[b-k2a5zg12n1]{
font-size: 1rem;
}
.nd-set-toggle-row[b-k2a5zg12n1]{
align-items:flex-start;
}
.nd-danger-btn[b-k2a5zg12n1]{ height: 48px; width: 100%; padding: 0 20px; }
.nd-logout-btn[b-k2a5zg12n1]{ width: 100%; justify-content: center; }
.nd-set-danger-actions[b-k2a5zg12n1]{ flex-direction: column; }
.nd-warn-btn-danger[b-k2a5zg12n1]{ height: 46px; }
}
/* /Components/Pages/Authorized/TopUpReturn.razor.rz.scp.css */
/* /Components/Pages/FakeAuthorized/FakeAboutMe.razor.rz.scp.css */
.nd-fme-wrap[b-mx8xuifdzz] {
display: grid;
gap: 10px;
}
.nd-fme-card[b-mx8xuifdzz] {
border: 1px solid #e5e7eb;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 24px rgba(17, 19, 21, 0.05);
padding: 14px;
}
.nd-fme-title[b-mx8xuifdzz] {
margin: 0 0 10px;
font-size: 1.125rem;
font-weight: 800;
color: #111827;
}
.nd-fme-summary[b-mx8xuifdzz] {
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fafafa;
padding: 12px;
line-height: 1.6;
color: #374151;
font-size: 0.875rem;
}
.nd-fme-grid[b-mx8xuifdzz] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.nd-fme-row[b-mx8xuifdzz] {
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fff;
padding: 10px;
}
.nd-fme-row-k[b-mx8xuifdzz] {
font-size: 0.6875rem;
letter-spacing: .04em;
text-transform: uppercase;
color: #6b7280;
font-weight: 700;
}
.nd-fme-row-v[b-mx8xuifdzz] {
margin-top: 5px;
font-size: 0.875rem;
color: #111827;
font-weight: 600;
overflow-wrap: anywhere;
}
.nd-fme-profile-top[b-mx8xuifdzz] {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.nd-fme-avatar[b-mx8xuifdzz] {
width: 110px;
height: 110px;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e5e7eb;
background: #f3f4f6;
display: grid;
place-items: center;
}
.nd-fme-avatar img[b-mx8xuifdzz] {
width: 100%;
height: 100%;
object-fit: cover;
}
.nd-fme-avatar-ph[b-mx8xuifdzz] {
font-size: 1.75rem;
color: #9ca3af;
}
.nd-fme-photos-wrap[b-mx8xuifdzz] {
margin-top: 12px;
}
.nd-fme-photos-title[b-mx8xuifdzz] {
margin-bottom: 8px;
font-size: 0.8125rem;
font-weight: 700;
color: #374151;
}
.nd-fme-photos[b-mx8xuifdzz] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 8px;
}
.nd-fme-photo[b-mx8xuifdzz] {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #f9fafb;
}
.nd-fme-photo img[b-mx8xuifdzz] {
width: 100%;
height: 100%;
object-fit: cover;
}
.nd-fme-empty[b-mx8xuifdzz] {
color: #6b7280;
font-weight: 600;
}
@media (max-width: 920px) {
.nd-fme-grid[b-mx8xuifdzz] {
grid-template-columns: 1fr;
}
.nd-fme-profile-top[b-mx8xuifdzz] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/FakeAuthorized/FakeMatches.razor.rz.scp.css */
.nd-fm-wrap[b-gag4sfm5bd] {
padding: 14px;
}
.nd-fm-stats[b-gag4sfm5bd] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 8px 0 12px;
}
.nd-fm-stat[b-gag4sfm5bd] {
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
padding: 12px;
}
.nd-fm-stat-val[b-gag4sfm5bd] {
font-size: 1.5rem;
line-height: 1.1;
font-weight: 800;
color: #111827;
}
.nd-fm-stat-lbl[b-gag4sfm5bd] {
margin-top: 4px;
font-size: 0.6875rem;
letter-spacing: .04em;
text-transform: uppercase;
color: #6b7280;
font-weight: 700;
}
.nd-mtabs[b-gag4sfm5bd] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.nd-mtab[b-gag4sfm5bd] {
min-height: 40px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
color: #4b5563;
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
}
.nd-mtab.is-active[b-gag4sfm5bd] {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
.nd-mtab-badge[b-gag4sfm5bd] {
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: #2563eb;
color: #fff;
font-size: 0.625rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nd-mmeta[b-gag4sfm5bd] {
margin: 10px 0 8px;
}
.nd-mmeta-count[b-gag4sfm5bd] {
font-size: 0.75rem;
color: #6b7280;
}
.nd-matches-list[b-gag4sfm5bd] {
display: grid;
gap: 8px;
}
.nd-fm-card[b-gag4sfm5bd] {
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
padding: 9px;
display: flex;
align-items: center;
gap: 10px;
}
.nd-mcard-ava[b-gag4sfm5bd] {
width: 50px;
height: 50px;
border-radius: 10px;
overflow: hidden;
background: #f3f4f6;
flex: 0 0 50px;
}
.nd-mcard-ava img[b-gag4sfm5bd] {
width: 100%;
height: 100%;
object-fit: cover;
}
.nd-mcard-ava-ph[b-gag4sfm5bd] {
width: 100%;
height: 100%;
display: grid;
place-items: center;
color: #9ca3af;
}
.nd-mcard-body[b-gag4sfm5bd] {
min-width: 0;
flex: 1;
}
.nd-mcard-name[b-gag4sfm5bd] {
font-size: 0.875rem;
font-weight: 800;
color: #111827;
}
.nd-mcard-sub[b-gag4sfm5bd] {
margin-top: 2px;
font-size: 0.75rem;
color: #6b7280;
}
.nd-mcard-ic[b-gag4sfm5bd] {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid #e5e7eb;
color: #6b7280;
display: grid;
place-items: center;
}
.nd-empty[b-gag4sfm5bd] {
border: 1px dashed #d1d5db;
border-radius: 12px;
padding: 24px 14px;
text-align: center;
background: #fff;
}
.nd-empty-title[b-gag4sfm5bd] {
font-size: 1rem;
font-weight: 800;
color: #111827;
}
.nd-empty-sub[b-gag4sfm5bd] {
margin-top: 6px;
font-size: 0.8125rem;
color: #6b7280;
}
.nd-fm-more-wrap[b-gag4sfm5bd] {
display: flex;
justify-content: center;
padding-top: 10px;
}
.nd-fm-more[b-gag4sfm5bd] {
min-width: 160px;
height: 38px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
color: #374151;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 920px) {
.nd-fm-wrap[b-gag4sfm5bd] { padding: 10px; }
.nd-fm-stats[b-gag4sfm5bd],
.nd-mtabs[b-gag4sfm5bd] {
grid-template-columns: 1fr;
}
}
/* /Components/Pages/FakeAuthorized/FakeMessages.razor.rz.scp.css */
.nd-msg[b-u9zxt0kybf] {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 12px;
height: calc(100vh - 130px);
min-height: 600px;
}
.nd-msg-left[b-u9zxt0kybf],
.nd-msg-right[b-u9zxt0kybf] {
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 24px rgba(17, 19, 21, 0.05);
min-height: 0;
}
.nd-msg-left[b-u9zxt0kybf] {
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-msg-filters[b-u9zxt0kybf] {
padding: 12px;
border-bottom: 1px solid #e5e7eb;
}
.nd-ios[b-u9zxt0kybf] {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.nd-ios input[b-u9zxt0kybf] { display: none; }
.nd-ios-track[b-u9zxt0kybf] {
width: 36px;
height: 22px;
border-radius: 999px;
background: #d1d5db;
position: relative;
}
.nd-ios-track[b-u9zxt0kybf]::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: left .2s ease;
}
.nd-ios input:checked + .nd-ios-track[b-u9zxt0kybf] {
background: #2563eb;
}
.nd-ios input:checked + .nd-ios-track[b-u9zxt0kybf]::after {
left: 16px;
}
.nd-ios-label[b-u9zxt0kybf] {
font-size: 0.8125rem;
font-weight: 700;
color: #374151;
}
.nd-msg-list[b-u9zxt0kybf] {
overflow: auto;
padding: 8px;
}
.nd-msg-item[b-u9zxt0kybf] {
width: 100%;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
padding: 8px;
display: flex;
gap: 10px;
text-align: left;
cursor: pointer;
}
.nd-msg-item:hover[b-u9zxt0kybf] {
background: #f9fafb;
}
.nd-msg-item.is-active[b-u9zxt0kybf] {
border-color: #bfdbfe;
background: #eff6ff;
}
.nd-msg-ava[b-u9zxt0kybf] {
width: 50px;
height: 50px;
min-width: 50px;
border-radius: 12px;
overflow: visible;
position: relative;
background: #f3f4f6;
}
.nd-msg-ava img[b-u9zxt0kybf] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.nd-msg-unread[b-u9zxt0kybf] {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 800;
color: #fff;
background: #2563eb;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.nd-dot[b-u9zxt0kybf] {
position: absolute;
right: -2px;
bottom: -2px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #fff;
}
.nd-dot-online[b-u9zxt0kybf] { background: #10b981; }
.nd-msg-meta[b-u9zxt0kybf] { min-width: 0; flex: 1; }
.nd-msg-top[b-u9zxt0kybf] {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
}
.nd-msg-title[b-u9zxt0kybf] {
font-size: 0.875rem;
font-weight: 800;
color: #111827;
}
.nd-msg-time[b-u9zxt0kybf] {
font-size: 0.6875rem;
color: #6b7280;
white-space: nowrap;
}
.nd-msg-bottom[b-u9zxt0kybf] {
margin-top: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.nd-msg-snippet[b-u9zxt0kybf] {
min-width: 0;
flex: 1;
font-size: 0.8125rem;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nd-msg-star[b-u9zxt0kybf] {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #fff;
color: #9ca3af;
cursor: pointer;
}
.nd-msg-star.is-on[b-u9zxt0kybf] {
color: #f59e0b;
}
.nd-msg-right[b-u9zxt0kybf] {
display: flex;
flex-direction: column;
overflow: hidden;
}
.nd-msg-placeholder[b-u9zxt0kybf] {
height: 100%;
display: grid;
place-items: center;
text-align: center;
color: #6b7280;
}
.nd-msg-pl-ic[b-u9zxt0kybf] {
width: 60px;
height: 60px;
border-radius: 14px;
margin: 0 auto 10px;
display: grid;
place-items: center;
font-size: 1.5rem;
color: #2563eb;
background: #eff6ff;
}
.nd-msg-pl-title[b-u9zxt0kybf] { font-weight: 800; }
.nd-msg-head[b-u9zxt0kybf] {
min-height: 68px;
padding: 10px 12px;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
gap: 10px;
}
.nd-msg-back[b-u9zxt0kybf] {
display: none;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 10px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
color: #374151;
font-weight: 700;
cursor: pointer;
}
.nd-msg-head-ava[b-u9zxt0kybf] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
background: #f3f4f6;
}
.nd-msg-head-ava img[b-u9zxt0kybf] {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
.nd-msg-head-title[b-u9zxt0kybf] {
font-size: 0.9375rem;
font-weight: 800;
color: #111827;
}
.nd-msg-head-sub[b-u9zxt0kybf] {
margin-top: 2px;
font-size: 0.75rem;
color: #10b981;
font-weight: 700;
}
.nd-msg-thread[b-u9zxt0kybf] {
flex: 1;
overflow: auto;
padding: 12px;
background: #f9fafb;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.nd-msg-day[b-u9zxt0kybf] {
width: fit-content;
margin: 10px auto;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #fff;
font-size: 0.6875rem;
color: #6b7280;
font-weight: 700;
}
.nd-bubble[b-u9zxt0kybf] {
display: flex;
margin: 8px 0;
}
.nd-bubble.is-me[b-u9zxt0kybf] { justify-content: flex-end; }
.nd-bubble.is-them[b-u9zxt0kybf] { justify-content: flex-start; }
.nd-bubble-inner[b-u9zxt0kybf] {
max-width: min(560px, 82%);
border-radius: 14px;
border: 1px solid #e5e7eb;
background: #fff;
padding: 10px;
}
.nd-bubble.is-me .nd-bubble-inner[b-u9zxt0kybf] {
background: #eff6ff;
border-color: #bfdbfe;
}
.nd-bubble-text[b-u9zxt0kybf] {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 0.875rem;
color: #111827;
}
.nd-bubble-photo[b-u9zxt0kybf] {
margin-top: 8px;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
}
.nd-bubble-photo img[b-u9zxt0kybf] {
width: min(340px, 100%);
border-radius: 10px;
border: 1px solid #e5e7eb;
}
.nd-bubble-meta[b-u9zxt0kybf] {
margin-top: 6px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.6875rem;
color: #6b7280;
}
.nd-ticks[b-u9zxt0kybf] { color: #2563eb; }
.nd-msg-compose[b-u9zxt0kybf] {
padding: 8px 10px 10px;
border-top: 1px solid #e5e7eb;
display: grid;
grid-template-columns: 38px 38px minmax(0, 1fr) 42px;
gap: 6px;
align-items: center;
background: #fff;
position: relative; /* anchors the mobile emoji sheet */
}
.nd-msg-file[b-u9zxt0kybf],
.nd-msg-ic[b-u9zxt0kybf] {
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
color: #6b7280;
display: grid;
place-items: center;
cursor: pointer;
position: relative;
}
.nd-msg-input[b-u9zxt0kybf] {
height: 38px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
padding: 0 10px;
font-size: 0.875rem;
color: #111827;
}
.nd-msg-input:focus[b-u9zxt0kybf] {
outline: none;
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.nd-msg-send[b-u9zxt0kybf] {
width: 42px;
height: 38px;
border: 0;
border-radius: 10px;
background: #2563eb;
color: #fff;
cursor: pointer;
}
.nd-msg-send:disabled[b-u9zxt0kybf] {
opacity: .6;
cursor: not-allowed;
}
.nd-emoji-pop[b-u9zxt0kybf] {
position: fixed;
width: min(340px, calc(100vw - 20px));
display: none;
z-index: 1000;
border-radius: 14px;
border: 1px solid #e5e7eb;
background: #fff;
overflow: hidden;
box-shadow: 0 10px 30px rgba(17, 19, 21, 0.1);
}
.nd-emoji-pop.is-open[b-u9zxt0kybf] { display: block; }
.nd-msg-empty[b-u9zxt0kybf] {
padding: 18px 12px;
color: #6b7280;
font-weight: 600;
}
.nd-imgv[b-u9zxt0kybf] {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(17, 19, 21, .75);
z-index: 9999;
padding: 14px;
}
.nd-imgv.is-open[b-u9zxt0kybf] { display: flex; }
.nd-imgv-box[b-u9zxt0kybf] {
position: relative;
width: min(1000px, 100%);
border-radius: 14px;
background: #fff;
padding: 8px;
}
.nd-imgv-box img[b-u9zxt0kybf] {
width: 100%;
height: auto;
border-radius: 10px;
}
.nd-imgv-x[b-u9zxt0kybf] {
position: absolute;
top: 8px;
right: 8px;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #fff;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 1024px) {
.nd-msg[b-u9zxt0kybf] {
grid-template-columns: 1fr;
/* Vars come from app.css (≤980px); fallbacks cover the 981-1024px band.
No min-height: the chat list must stay the only scroll area. */
height: calc(100dvh - var(--nd-header-h, 64px) - var(--nd-bottomnav-h, 86px) - 54px);
min-height: 0;
}
.nd-msg-back[b-u9zxt0kybf] { display: inline-flex; }
.nd-msg-left.is-collapsed-mobile[b-u9zxt0kybf] { display: none; }
/* Mobile shows only the conversation list — no empty-chat placeholder
pane. The right pane returns when a chat opens (.is-chat-open). */
.nd-msg:not(.is-chat-open) .nd-msg-right[b-u9zxt0kybf] { display: none; }
/* An open conversation becomes a full-screen keyboard-aware layer */
.nd-msg.is-chat-open[b-u9zxt0kybf] {
position: fixed;
inset: 0;
z-index: 1000;
height: 100dvh;
height: var(--nd-vvh, 100dvh);
min-height: 0;
gap: 0;
background: #f7f8fc;
/* height/transform are driven per-frame by ndMsg (visualViewport
tracking) so the layer follows the iOS keyboard pixel-for-pixel */
will-change: transform, height;
}
.nd-msg.is-chat-open .nd-msg-right[b-u9zxt0kybf] {
border-radius: 0;
border: 0;
box-shadow: none;
height: 100%;
min-height: 0;
}
.nd-msg.is-chat-open .nd-msg-compose[b-u9zxt0kybf] {
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
/* Slide the conversation in on the compositor. The animation lives on the
inner pane, NOT on .nd-msg — ndMsg's rAF loop writes inline
height/transform onto .nd-msg and would fight it. */
.nd-msg.is-chat-open .nd-msg-right[b-u9zxt0kybf] {
animation: nd-chat-in-b-u9zxt0kybf .28s cubic-bezier(.32, .72, .33, 1) both;
}
/* 16px stops iOS Safari from auto-zooming the page on input focus */
.nd-msg-input[b-u9zxt0kybf] { font-size: 1rem; }
}
@keyframes nd-chat-in-b-u9zxt0kybf {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.nd-msg.is-chat-open .nd-msg-right[b-u9zxt0kybf] { animation: none; }
}
@media (max-width: 680px) {
.nd-msg-left[b-u9zxt0kybf],
.nd-msg-right[b-u9zxt0kybf] {
border-radius: 14px;
}
.nd-bubble-inner[b-u9zxt0kybf] { max-width: 90%; }
}
/* /Components/Pages/FakeAuthorized/FakeProfile.razor.rz.scp.css */
.nd-profile-empty[b-tjk9fkrb1i] {
border: 1px solid #e5e7eb;
border-radius: 16px;
background: #fff;
padding: 20px;
color: #6b7280;
font-weight: 600;
}
.nd-pm-card[b-tjk9fkrb1i] {
padding: 14px;
}
.nd-pm-form[b-tjk9fkrb1i] {
display: grid;
gap: 12px;
}
.nd-pm-row[b-tjk9fkrb1i] {
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 12px;
background: #fff;
}
.nd-pm-label[b-tjk9fkrb1i] {
font-size: 0.75rem;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 700;
color: #6b7280;
}
.nd-readonly[b-tjk9fkrb1i] {
margin-top: 4px;
font-size: 0.875rem;
line-height: 1.5;
color: #111827;
font-weight: 600;
}
.nd-photos[b-tjk9fkrb1i] {
margin-top: 8px;
}
.nd-photo-grid[b-tjk9fkrb1i] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.nd-photo[b-tjk9fkrb1i] {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 0;
position: relative;
overflow: hidden;
background: #f9fafb;
aspect-ratio: 1 / 1;
cursor: default;
}
.nd-photo img[b-tjk9fkrb1i] {
width: 100%;
height: 100%;
object-fit: cover;
}
.nd-photo-badge[b-tjk9fkrb1i] {
position: absolute;
left: 6px;
bottom: 6px;
border-radius: 999px;
background: rgba(17, 24, 39, .75);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
padding: 3px 7px;
}
.nd-photo.is-avatar[b-tjk9fkrb1i] {
border-color: #93c5fd;
box-shadow: 0 0 0 2px rgba(37, 99, 235, .2);
}
.nd-photo-remove[b-tjk9fkrb1i] {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(17, 24, 39, .7);
color: #fff;
display: grid;
place-items: center;
font-size: 0.6875rem;
font-weight: 700;
}
.nd-upload-hint[b-tjk9fkrb1i] {
margin-top: 8px;
font-size: 0.75rem;
line-height: 1.45;
color: #6b7280;
}
.nd-age[b-tjk9fkrb1i] {
margin-top: 8px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.nd-age-cap[b-tjk9fkrb1i] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 700;
}
.nd-textarea.nd-readonly[b-tjk9fkrb1i] {
margin-top: 8px;
min-height: 96px;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px;
background: #fafafa;
}
.nd-about-meta[b-tjk9fkrb1i] {
margin-top: 6px;
display: flex;
justify-content: flex-end;
}
.nd-about-count[b-tjk9fkrb1i] {
font-size: 0.6875rem;
color: #6b7280;
font-weight: 700;
}
@media (max-width: 760px) {
.nd-pm-card[b-tjk9fkrb1i] { padding: 10px; }
.nd-pm-row[b-tjk9fkrb1i] { padding: 10px; }
.nd-photo-grid[b-tjk9fkrb1i] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nd-age[b-tjk9fkrb1i] {
grid-template-columns: 1fr 1fr;
}
}
/* /Components/Pages/Unauthorized/About.razor.rz.scp.css */
.nd-about-top[b-sl30en41lt]{ padding-top: clamp(36px, 5vw, 64px); }
.nd-about-masthead[b-sl30en41lt]{
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(20px, 4vw, 56px);
align-items: end;
}
.nd-about-h1[b-sl30en41lt]{ font-size: clamp(2.25rem, 4.8vw, 3.5rem); }
.nd-about-care[b-sl30en41lt]{ max-width: 68ch; }
.nd-about-care .nd-l-p[b-sl30en41lt]{ margin-top: 18px; }
.nd-about-care .nd-l-p:first-of-type[b-sl30en41lt]{ margin-top: 24px; }
.nd-about-foot[b-sl30en41lt]{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.nd-about-coh[b-sl30en41lt]{ margin-bottom: 16px; }
.nd-about-cta[b-sl30en41lt]{ padding: clamp(28px, 4vw, 40px); }
.nd-about-cta .nd-l-h3[b-sl30en41lt]{ color: #fff; }
@media (max-width: 860px){
.nd-about-masthead[b-sl30en41lt],
.nd-about-foot[b-sl30en41lt]{
grid-template-columns: 1fr;
}
.nd-about-masthead[b-sl30en41lt]{ gap: 20px; }
}
/* /Components/Pages/Unauthorized/Contact.razor.rz.scp.css */
.nd-contact-top[b-7p24l96ces]{ padding-top: clamp(36px, 5vw, 64px); }
.nd-contact-h1[b-7p24l96ces]{ font-size: clamp(2.25rem, 4.6vw, 3rem); }
.nd-contact-grid[b-7p24l96ces]{
display: grid;
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
/* ---- quick actions ------------------------------------------------------ */
.nd-contact-side[b-7p24l96ces]{
display: grid;
gap: 12px;
align-content: start;
}
.nd-qa[b-7p24l96ces]{
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 0 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--l-hair);
background: var(--surface);
color: var(--l-ink);
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transition: border-color .15s ease, transform .15s ease;
}
.nd-qa > i:first-child[b-7p24l96ces]{
width: 20px;
text-align: center;
color: var(--p1);
}
.nd-qa span[b-7p24l96ces]{ flex: 1; }
.nd-qa-go[b-7p24l96ces]{
font-size: 0.75rem;
color: rgba(17,18,20,.35);
transition: transform .18s ease;
}
@media (hover: hover){
.nd-qa:hover[b-7p24l96ces]{ border-color: rgba(91,108,255,.45); }
.nd-qa:hover .nd-qa-go[b-7p24l96ces]{ transform: translateX(3px); }
}
.nd-addr[b-7p24l96ces]{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
padding: 14px 18px;
border-radius: var(--radius-lg);
background: rgba(91,108,255,.07);
}
.nd-addr-mail[b-7p24l96ces]{
flex: 1;
min-width: 0;
font-size: 0.9375rem;
font-weight: 700;
color: var(--l-ink);
word-break: break-all;
}
.nd-addr-copy[b-7p24l96ces]{
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(91,108,255,.30);
background: #fff;
font: inherit;
font-size: 0.8125rem;
font-weight: 800;
color: var(--p1);
cursor: pointer;
}
/* ---- message form ------------------------------------------------------- */
.nd-cf[b-7p24l96ces]{
padding: clamp(22px, 3vw, 32px);
border-radius: var(--radius-xl);
border: 1px solid var(--l-hair);
background: var(--surface);
}
.nd-cf-note[b-7p24l96ces]{ margin-bottom: 20px; }
.nd-cf-row[b-7p24l96ces]{
display: grid;
gap: 6px;
margin-bottom: 16px;
}
.nd-cf-row label[b-7p24l96ces]{
font-size: 0.875rem;
font-weight: 700;
color: var(--l-ink);
}
.nd-cf-row input[b-7p24l96ces],
.nd-cf-row select[b-7p24l96ces],
.nd-cf-row textarea[b-7p24l96ces]{
width: 100%;
min-height: 46px;
padding: 11px 14px;
border-radius: 14px;
border: 1px solid rgba(17,18,20,.14);
background: #fff;
font: inherit;
font-size: 0.9375rem;
color: var(--l-ink);
}
.nd-cf-row textarea[b-7p24l96ces]{
min-height: 120px;
resize: vertical;
line-height: 1.5;
}
.nd-cf-row input:focus[b-7p24l96ces],
.nd-cf-row select:focus[b-7p24l96ces],
.nd-cf-row textarea:focus[b-7p24l96ces]{
border-color: rgba(91,108,255,.55);
outline: none;
}
.nd-cf-btn[b-7p24l96ces]{
width: 100%;
margin-top: 6px;
}
/* ---- company and questions ---------------------------------------------- */
.nd-contact-foot[b-7p24l96ces]{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.nd-contact-coh[b-7p24l96ces]{ margin-bottom: 16px; }
.nd-contact-foot .nd-l-faq[b-7p24l96ces]{ border-top-color: rgba(17,18,20,.12); }
@media (max-width: 900px){
.nd-contact-grid[b-7p24l96ces],
.nd-contact-foot[b-7p24l96ces]{
grid-template-columns: 1fr;
}
}
/* /Components/Pages/Unauthorized/Features.razor.rz.scp.css */
.nd-feat-top[b-segm58qdtw]{ padding-bottom: 0; }
.nd-feat-h1[b-segm58qdtw]{ font-size: clamp(2.25rem, 4.6vw, 3.25rem); }
.nd-feat-rows[b-segm58qdtw]{
display: grid;
gap: clamp(48px, 7vw, 88px);
padding-top: clamp(40px, 6vw, 72px);
padding-bottom: clamp(40px, 6vw, 72px);
}
.nd-frow[b-segm58qdtw]{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.nd-frow--flip .nd-frow-art[b-segm58qdtw]{ order: -1; }
.nd-frow-text .nd-l-p[b-segm58qdtw]{ margin-top: 16px; }
.nd-frow-art[b-segm58qdtw]{
display: flex;
justify-content: center;
}
.nd-fbadge[b-segm58qdtw]{
display: inline-block;
margin-top: 12px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(22,163,74,.12);
color: #15803D;
font-size: 0.8125rem;
font-weight: 800;
}
.nd-fbadge--credits[b-segm58qdtw]{
border-radius: 14px;
max-width: 46ch;
background: rgba(91,108,255,.10);
color: #3F4CC9;
line-height: 1.45;
}
/* ---- illustrations ----------------------------------------------------- */
.nd-feat-card[b-segm58qdtw]{ --pc-w: 276px; }
.nd-acts[b-segm58qdtw]{
display: flex;
align-items: center;
gap: 16px;
padding: 20px 26px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--l-hair);
box-shadow: 0 18px 44px rgba(17,18,20,.10);
}
.nd-act[b-segm58qdtw]{
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 999px;
font-size: 1.25rem;
}
.nd-act--back[b-segm58qdtw]{
width: 44px;
height: 44px;
font-size: 1rem;
background: #F1F2F8;
color: rgba(17,18,20,.55);
}
.nd-act--no[b-segm58qdtw]{
background: #fff;
border: 2px solid rgba(17,18,20,.12);
color: rgba(17,18,20,.55);
}
.nd-act--yes[b-segm58qdtw]{
width: 66px;
height: 66px;
font-size: 1.5rem;
background: linear-gradient(135deg, var(--p1), var(--p2));
color: #fff;
box-shadow: 0 14px 30px rgba(91,108,255,.30);
}
.nd-matchart[b-segm58qdtw]{
display: flex;
align-items: center;
gap: 14px;
}
.nd-matchart-ava[b-segm58qdtw]{
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 999px;
object-fit: cover;
background: #E7E9F3;
color: rgba(17,18,20,.42);
font-size: 1.5rem;
border: 3px solid #fff;
box-shadow: 0 12px 30px rgba(17,18,20,.16);
flex: none;
}
.nd-checks[b-segm58qdtw]{
display: grid;
gap: 12px;
width: min(380px, 100%);
padding: 22px;
border-radius: var(--radius-lg);
background: var(--surface);
border: 1px solid var(--l-hair);
}
.nd-check[b-segm58qdtw]{
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9375rem;
line-height: 1.4;
color: var(--l-body);
}
.nd-check i[b-segm58qdtw]{
flex: none;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 999px;
font-size: 0.75rem;
background: #F1F2F8;
color: rgba(17,18,20,.55);
}
.nd-check--ok i[b-segm58qdtw]{ background: rgba(22,163,74,.14); color: #15803D; }
.nd-check--no i[b-segm58qdtw]{ background: rgba(220,38,38,.12); color: #B91C1C; }
/* ---- free vs credits --------------------------------------------------- */
.nd-feat-tablewrap[b-segm58qdtw]{
border-radius: var(--radius-lg);
border: 1px solid var(--l-hair);
background: var(--surface);
}
.nd-feat-table th:first-child[b-segm58qdtw]{ min-width: 168px; }
.nd-feat-table tbody tr:last-child th[b-segm58qdtw],
.nd-feat-table tbody tr:last-child td[b-segm58qdtw]{ border-bottom: 0; }
.nd-feat-table i.fa-check[b-segm58qdtw]{ color: #16A34A; }
.nd-feat-cta[b-segm58qdtw]{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 28px;
}
@media (max-width: 860px){
.nd-frow[b-segm58qdtw]{
grid-template-columns: 1fr;
gap: 28px;
}
/* the illustration always follows its text once the row stacks */
.nd-frow--flip .nd-frow-art[b-segm58qdtw]{ order: 0; }
.nd-frow-art[b-segm58qdtw]{ justify-content: flex-start; }
}
/* the three-column table becomes label/value blocks rather than scrolling */
@media (max-width: 600px){
.nd-feat-table[b-segm58qdtw],
.nd-feat-table tbody[b-segm58qdtw],
.nd-feat-table tr[b-segm58qdtw],
.nd-feat-table th[b-segm58qdtw],
.nd-feat-table td[b-segm58qdtw]{
display: block;
width: auto;
}
.nd-feat-table thead[b-segm58qdtw]{ display: none; }
.nd-feat-table tbody tr[b-segm58qdtw]{
padding: 14px 16px;
border-bottom: 1px solid var(--l-hair);
}
.nd-feat-table tbody tr:last-child[b-segm58qdtw]{ border-bottom: 0; }
.nd-feat-table tbody th[b-segm58qdtw]{
padding: 0 0 8px;
border: 0;
font-size: 1rem;
}
.nd-feat-table tbody td[b-segm58qdtw]{
display: flex;
justify-content: space-between;
gap: 16px;
padding: 3px 0;
border: 0;
font-size: 0.875rem;
}
.nd-feat-table tbody td[b-segm58qdtw]::before{
content: attr(data-l);
color: var(--l-dim);
font-weight: 700;
}
}
/* /Components/Pages/Unauthorized/Home.razor.rz.scp.css */
/* ===== Hero =============================================================== */
.nd-hh[b-gk9xgjif4n]{
position: relative;
padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 4vw, 56px);
}
/* the one decorative gradient on the page */
.nd-hh-wash[b-gk9xgjif4n]{
position: absolute;
inset: -140px 0 auto;
height: 560px;
pointer-events: none;
background:
radial-gradient(680px 380px at 76% 28%, rgba(91,108,255,.20), transparent 62%),
radial-gradient(520px 320px at 96% 66%, rgba(255,91,200,.16), transparent 60%);
}
.nd-hh-grid[b-gk9xgjif4n]{
position: relative;
display: grid;
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
align-items: center;
}
.nd-hh-lede[b-gk9xgjif4n]{
margin-top: 20px;
max-width: 52ch;
}
/* ===== Sign-up panel ===================================================== */
/* frosted over the hero wash: reads as one object, not three loose links */
.nd-hh-join[b-gk9xgjif4n]{
margin-top: 28px;
max-width: 520px;
padding: 18px 18px 16px;
border-radius: 22px;
background: rgba(255,255,255,.72);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.9);
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 0 0 1px rgba(17,18,20,.05),
0 24px 60px rgba(91,108,255,.12);
}
.nd-hh-join-head[b-gk9xgjif4n]{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.nd-hh-join-title[b-gk9xgjif4n]{
font-size: 1rem;
font-weight: 800;
letter-spacing: -.01em;
color: rgba(17,18,20,.92);
}
.nd-hh-join-sub[b-gk9xgjif4n]{
font-size: 0.8125rem;
font-weight: 700;
color: rgba(17,18,20,.48);
white-space: nowrap;
}
.nd-hh-join-btns[b-gk9xgjif4n]{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Google + Facebook share the first row; email takes the second, full width */
.nd-hh-join-btns.has-two .nd-hh-btn--email[b-gk9xgjif4n]{ grid-column: 1 / -1; }
.nd-hh-join-btns:not(.has-two) > :only-child[b-gk9xgjif4n]{ grid-column: 1 / -1; }
.nd-hh-btn[b-gk9xgjif4n]{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding: 0 18px;
border-radius: 16px;
border: 1px solid transparent;
font: inherit;
font-size: 0.9375rem;
font-weight: 800;
letter-spacing: -.005em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.nd-hh-btn svg[b-gk9xgjif4n], .nd-hh-btn i[b-gk9xgjif4n]{ flex-shrink: 0; }
.nd-hh-btn i[b-gk9xgjif4n]{ font-size: 1.0625rem; }
.nd-hh-btn:focus-visible[b-gk9xgjif4n]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.22); }
.nd-hh-btn:active[b-gk9xgjif4n]{ transform: scale(.985); }
/* Google's own look, so the button is recognised before it is read */
.nd-hh-btn--google[b-gk9xgjif4n]{
background: #fff;
border-color: #dadce0;
color: #1f1f1f;
box-shadow: 0 6px 18px rgba(17,18,20,.06);
}
.nd-hh-btn--facebook[b-gk9xgjif4n]{
background: #1877F2;
border-color: #1877F2;
color: #fff;
box-shadow: 0 8px 22px rgba(24,119,242,.28);
}
/* email: quieter than the providers but still a full button, not a text link */
.nd-hh-btn--email[b-gk9xgjif4n]{
background: rgba(91,108,255,.06);
border-color: rgba(91,108,255,.28);
color: var(--p1);
}
.nd-hh-btn--emailDark[b-gk9xgjif4n]{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.32);
color: #fff;
}
.nd-hh-btn--onDark[b-gk9xgjif4n]{
background: #fff;
color: #14162b;
}
.nd-home-cta-btns[b-gk9xgjif4n]{
flex: 1 1 100%;
width: 100%;
max-width: 520px;
margin: 0;
}
.nd-hh-btn--primary[b-gk9xgjif4n]{
background: linear-gradient(135deg, var(--p1), var(--p2));
color: #fff;
box-shadow: 0 12px 30px rgba(91,108,255,.26);
}
@media (hover: hover){
.nd-hh-btn--google:hover[b-gk9xgjif4n]{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(17,18,20,.12); border-color: #c6c9d2; }
.nd-hh-btn--facebook:hover[b-gk9xgjif4n]{ transform: translateY(-1px); background: #166FE5; box-shadow: 0 12px 30px rgba(24,119,242,.36); }
.nd-hh-btn--email:hover[b-gk9xgjif4n]{ background: rgba(91,108,255,.12); border-color: rgba(91,108,255,.5); }
.nd-hh-btn--primary:hover[b-gk9xgjif4n]{ transform: translateY(-1px); box-shadow: 0 16px 38px rgba(91,108,255,.34); }
.nd-hh-btn--emailDark:hover[b-gk9xgjif4n]{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.nd-hh-btn--onDark:hover[b-gk9xgjif4n]{ transform: translateY(-1px); }
}
.nd-hh-perks[b-gk9xgjif4n]{
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
.nd-hh-perks li[b-gk9xgjif4n]{
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.8125rem;
font-weight: 700;
color: rgba(17,18,20,.62);
}
.nd-hh-perks i[b-gk9xgjif4n]{
width: 16px;
height: 16px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 0.5625rem;
color: #fff;
background: linear-gradient(135deg, var(--p1), var(--p2));
}
@media (max-width: 560px){
.nd-hh-join[b-gk9xgjif4n]{ padding: 16px 14px 12px; border-radius: 20px; max-width: none; }
.nd-hh-join-head[b-gk9xgjif4n]{ flex-direction: column; gap: 2px; align-items: flex-start; }
.nd-hh-join-btns[b-gk9xgjif4n]{ grid-template-columns: 1fr; }
.nd-hh-btn[b-gk9xgjif4n]{ min-height: 52px; }
.nd-hh-perks[b-gk9xgjif4n]{ flex-direction: column; gap: 6px; }
}
/* ===== Hero card stack ==================================================== */
.nd-hh-visual[b-gk9xgjif4n]{
display: flex;
justify-content: center;
}
.nd-stack[b-gk9xgjif4n]{
position: relative;
width: 100%;
/* the cards are the hero: a third of the viewport wide, capped on very
large screens; the stage height follows the 3:4 card plus the fan */
--pc-w: clamp(320px, 31vw, 420px);
max-width: calc(var(--pc-w) + 70px);
height: calc(var(--pc-w) * 4 / 3 + 64px);
/* the liked card dissolves well inside the column, never at the page edge */
--fly: 240px;
}
.nd-scard[b-gk9xgjif4n]{
position: absolute;
left: 50%;
top: 50%;
transition: transform .52s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.nd-scard[data-pos="0"][b-gk9xgjif4n]{
transform: translate(-50%,-50%) rotate(-1.5deg) scale(1);
z-index: 3;
}
.nd-scard[data-pos="1"][b-gk9xgjif4n]{
transform: translate(-50%,-50%) translateY(14px) rotate(3.5deg) scale(.96);
z-index: 2;
}
.nd-scard[data-pos="2"][b-gk9xgjif4n]{
transform: translate(-50%,-50%) translateY(26px) rotate(-5deg) scale(.92);
z-index: 1;
}
.nd-scard.is-liked[b-gk9xgjif4n]{
transform: translate(-50%,-50%) translateX(var(--fly)) rotate(12deg) scale(1);
opacity: 0;
z-index: 4;
}
/* used for the single frame in which the flown card is put back at the bottom */
.nd-scard.no-anim[b-gk9xgjif4n]{ transition: none; }
.nd-scard-stamp[b-gk9xgjif4n]{
position: absolute;
top: 26px;
left: 18px;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 18px;
background: rgba(255,255,255,.94);
color: var(--p2);
font-size: 1.375rem;
opacity: 0;
transform: scale(.8) rotate(-12deg);
transition: opacity .18s ease, transform .18s ease;
}
.nd-scard.is-liked .nd-scard-stamp[b-gk9xgjif4n]{
opacity: 1;
transform: scale(1) rotate(-12deg);
}
.nd-stack-match[b-gk9xgjif4n]{
position: absolute;
left: 50%;
top: 40%;
z-index: 6;
opacity: 0;
transform: translate(-50%,-50%) scale(.8);
transition: opacity .2s ease, transform .32s cubic-bezier(.2,.9,.3,1.25);
}
.nd-stack.show-match .nd-stack-match[b-gk9xgjif4n]{
opacity: 1;
transform: translate(-50%,-50%) scale(1);
}
.nd-stack-bubble[b-gk9xgjif4n]{
position: absolute;
left: 50%;
top: calc(40% + 44px);
z-index: 6;
padding: 11px 15px;
border-radius: 18px;
border-bottom-left-radius: 6px;
background: #fff;
color: rgba(17,18,20,.82);
font-size: 0.9375rem;
white-space: nowrap;
box-shadow: 0 16px 40px rgba(17,18,20,.16);
opacity: 0;
transform: translate(-50%, 10px);
transition: opacity .24s ease, transform .32s cubic-bezier(.2,.7,.2,1);
}
.nd-stack.show-bubble .nd-stack-bubble[b-gk9xgjif4n]{
opacity: 1;
transform: translate(-50%, 0);
}
/* entrance: opacity and the independent `scale` property, so it composes with
the transform that positions each card in the fan */
@media (prefers-reduced-motion: no-preference){
.nd-scard[b-gk9xgjif4n]{ animation: ndCardIn-b-gk9xgjif4n .5s cubic-bezier(.2,.7,.2,1) backwards; }
.nd-scard[data-pos="1"][b-gk9xgjif4n]{ animation-delay: .08s; }
.nd-scard[data-pos="2"][b-gk9xgjif4n]{ animation-delay: .16s; }
}
@keyframes ndCardIn-b-gk9xgjif4n{
from{ opacity: 0; scale: .94; }
to{ opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce){
.nd-scard[b-gk9xgjif4n]{ animation: none; }
/* no loop runs, so the match moment is shown as a still */
.nd-stack-match[b-gk9xgjif4n]{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
/* ===== How it works ======================================================= */
.nd-steps[b-gk9xgjif4n]{
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 44px;
}
.nd-steps[b-gk9xgjif4n]::before{
content: "";
position: absolute;
top: 23px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--p1) 14%, var(--p2) 86%, transparent);
opacity: .55;
}
.nd-step[b-gk9xgjif4n]{ position: relative; }
.nd-step-n[b-gk9xgjif4n]{
position: relative;
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 20px;
border-radius: 999px;
background: var(--surface);
border: 2px solid rgba(91,108,255,.38);
color: var(--p1);
font-size: 1.0625rem;
font-weight: 800;
}
.nd-step .nd-l-h3[b-gk9xgjif4n]{ margin-bottom: 10px; }
@media (max-width: 780px){
.nd-steps[b-gk9xgjif4n]{
grid-template-columns: 1fr;
gap: 28px;
}
.nd-steps[b-gk9xgjif4n]::before{
top: 10px;
bottom: 10px;
left: 23px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(180deg, transparent, var(--p1) 10%, var(--p2) 90%, transparent);
}
.nd-step[b-gk9xgjif4n]{
padding-left: 68px;
min-height: 48px;
}
.nd-step-n[b-gk9xgjif4n]{
position: absolute;
left: 0;
top: 0;
margin: 0;
}
}
/* ===== What you get ======================================================= */
.nd-perks[b-gk9xgjif4n]{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 56px;
}
.nd-perk[b-gk9xgjif4n]{
display: flex;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--l-hair);
}
.nd-perk i[b-gk9xgjif4n]{
flex: none;
width: 24px;
margin-top: 3px;
text-align: center;
font-size: 1.125rem;
color: var(--p1);
}
.nd-perk .nd-l-h4[b-gk9xgjif4n]{ margin-bottom: 6px; }
@media (max-width: 780px){
.nd-perks[b-gk9xgjif4n]{
grid-template-columns: 1fr;
gap: 22px;
}
}
/* ===== A first chat ======================================================= */
.nd-chat[b-gk9xgjif4n]{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.nd-chat-copy .nd-l-p[b-gk9xgjif4n]{ margin-top: 16px; }
.nd-chat-mock[b-gk9xgjif4n]{
display: grid;
justify-items: center;
gap: 12px;
width: 100%;
}
.nd-chat-note[b-gk9xgjif4n]{ text-align: center; }
@media (max-width: 860px){
.nd-chat[b-gk9xgjif4n]{ grid-template-columns: 1fr; }
.nd-chat-mock[b-gk9xgjif4n]{ justify-self: center; }
}
/* bubbles play once, when the mock scrolls into view; is-armed is only ever
added by nd-landing.js and never under prefers-reduced-motion */
.nd-cm.is-armed .nd-cm-bub[b-gk9xgjif4n]{
opacity: 0;
transform: translateY(8px);
}
.nd-cm.is-on .nd-cm-bub[b-gk9xgjif4n]{
animation: ndBubIn-b-gk9xgjif4n .4s var(--d) cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes ndBubIn-b-gk9xgjif4n{
to{ opacity: 1; transform: none; }
}
.nd-cm.is-armed .nd-cm-typing[b-gk9xgjif4n]{
display: flex;
opacity: 0;
}
.nd-cm.is-on .nd-cm-typing[b-gk9xgjif4n]{
animation: ndTypeIn-b-gk9xgjif4n 1.05s var(--d) forwards;
}
@keyframes ndTypeIn-b-gk9xgjif4n{
0%{ opacity: 0; }
14%{ opacity: 1; }
86%{ opacity: 1; }
100%{ opacity: 0; }
}
.nd-cm.is-on .nd-cm-typing span[b-gk9xgjif4n]{ animation: ndTypeDot-b-gk9xgjif4n .9s infinite; }
.nd-cm.is-on .nd-cm-typing span:nth-child(2)[b-gk9xgjif4n]{ animation-delay: .15s; }
.nd-cm.is-on .nd-cm-typing span:nth-child(3)[b-gk9xgjif4n]{ animation-delay: .3s; }
@keyframes ndTypeDot-b-gk9xgjif4n{
0%, 60%, 100%{ transform: translateY(0); opacity: .4; }
30%{ transform: translateY(-3px); opacity: .85; }
}
/* ===== Questions ========================================================= */
.nd-qa[b-gk9xgjif4n]{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
gap: clamp(28px, 5vw, 64px);
align-items: start;
}
.nd-qa-intro[b-gk9xgjif4n]{
position: sticky;
top: 96px;
}
.nd-qa-intro .nd-l-p[b-gk9xgjif4n]{ margin-top: 12px; max-width: 30ch; }
.nd-qa-links[b-gk9xgjif4n]{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.nd-qa-link[b-gk9xgjif4n]{
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.12);
background: rgba(255,255,255,.8);
color: rgba(17,18,20,.82);
font-size: 0.9rem;
font-weight: 800;
text-decoration: none;
transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.nd-qa-link i[b-gk9xgjif4n]{ color: var(--p1); font-size: 0.875rem; }
@media (hover: hover){
.nd-qa-link:hover[b-gk9xgjif4n]{ border-color: rgba(91,108,255,.45); color: var(--p1); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91,108,255,.12); }
}
.nd-qa-link:focus-visible[b-gk9xgjif4n]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.2); }
.nd-qa-list[b-gk9xgjif4n]{
display: grid;
gap: 10px;
}
/* staggered entrance, one item after another */
.nd-reveal-on .nd-qa-item[data-reveal].is-in[b-gk9xgjif4n]{
transition-delay: calc(var(--i, 0) * 70ms);
}
.nd-qa-item[b-gk9xgjif4n]{
border-radius: 18px;
border: 1px solid rgba(17,18,20,.08);
background: rgba(255,255,255,.78);
transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.nd-qa-item[open]:not(.is-closing)[b-gk9xgjif4n]{
border-color: rgba(91,108,255,.32);
background: #fff;
box-shadow: 0 18px 48px rgba(91,108,255,.11);
}
@media (hover: hover){
.nd-qa-item:not([open]):hover[b-gk9xgjif4n]{ border-color: rgba(91,108,255,.28); background: #fff; }
}
.nd-qa-item summary[b-gk9xgjif4n]{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 18px 18px 20px;
min-height: 44px;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nd-qa-item summary[b-gk9xgjif4n]::-webkit-details-marker{ display: none; }
.nd-qa-item summary:focus-visible[b-gk9xgjif4n]{ outline: none; }
.nd-qa-item summary:focus-visible .nd-qa-ic[b-gk9xgjif4n]{ box-shadow: 0 0 0 4px rgba(91,108,255,.22); }
.nd-qa-q[b-gk9xgjif4n]{
font-size: 1.0625rem;
font-weight: 800;
letter-spacing: -.005em;
color: rgba(17,18,20,.9);
transition: color .2s ease;
}
.nd-qa-item[open]:not(.is-closing) .nd-qa-q[b-gk9xgjif4n]{ color: var(--p1); }
/* plus that turns into a cross */
.nd-qa-ic[b-gk9xgjif4n]{
position: relative;
flex: none;
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(91,108,255,.08);
transition: background .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.nd-qa-ic[b-gk9xgjif4n]::before,
.nd-qa-ic[b-gk9xgjif4n]::after{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 2px;
border-radius: 2px;
background: var(--p1);
transform: translate(-50%, -50%);
transition: background .25s ease;
}
.nd-qa-ic[b-gk9xgjif4n]::after{ transform: translate(-50%, -50%) rotate(90deg); }
.nd-qa-item[open]:not(.is-closing) .nd-qa-ic[b-gk9xgjif4n]{
background: linear-gradient(135deg, var(--p1), var(--p2));
transform: rotate(45deg);
}
.nd-qa-item[open]:not(.is-closing) .nd-qa-ic[b-gk9xgjif4n]::before,
.nd-qa-item[open]:not(.is-closing) .nd-qa-ic[b-gk9xgjif4n]::after{ background: #fff; }
/* the answer: height is animated by nd-landing.js on open/close */
.nd-qa-a[b-gk9xgjif4n]{
overflow: hidden;
}
.nd-qa-a .nd-l-p[b-gk9xgjif4n]{
margin: 0;
padding: 0 20px 20px;
max-width: 62ch;
}
@media (max-width: 900px){
.nd-qa[b-gk9xgjif4n]{ grid-template-columns: 1fr; gap: 22px; }
.nd-qa-intro[b-gk9xgjif4n]{ position: static; }
.nd-qa-intro .nd-l-p[b-gk9xgjif4n]{ max-width: none; }
}
@media (max-width: 560px){
.nd-qa-item summary[b-gk9xgjif4n]{ padding: 15px 14px 15px 16px; }
.nd-qa-q[b-gk9xgjif4n]{ font-size: 1rem; }
.nd-qa-a .nd-l-p[b-gk9xgjif4n]{ padding: 0 16px 16px; }
}
/* ===== Final call to action =============================================== */
.nd-home-cta .nd-l-p[b-gk9xgjif4n]{ max-width: 46ch; }
/* ===== Mobile ============================================================= */
@media (max-width: 900px){
.nd-hh-grid[b-gk9xgjif4n]{
grid-template-columns: 1fr;
gap: 40px;
}
.nd-hh-lede[b-gk9xgjif4n]{ max-width: none; }
.nd-stack[b-gk9xgjif4n]{
margin: 0 auto;
max-width: 320px;
height: 404px;
--pc-w: 252px;
--fly: 300px;
}
}
@media (max-width: 400px){
.nd-stack[b-gk9xgjif4n]{
height: 372px;
--pc-w: 226px;
--fly: 260px;
}
.nd-stack-bubble[b-gk9xgjif4n]{ font-size: 0.875rem; }
}
/* /Components/Pages/Unauthorized/Pricing.razor.rz.scp.css */
.nd-price-top[b-n3zwvsy62s]{ padding-top: clamp(36px, 5vw, 64px); }
.nd-price-h1[b-n3zwvsy62s]{ font-size: clamp(2.25rem, 4.6vw, 3.25rem); }
.nd-packs[b-n3zwvsy62s]{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.nd-pack[b-n3zwvsy62s]{
display: flex;
flex-direction: column;
padding: 28px 24px;
border-radius: var(--radius-xl);
border: 1px solid var(--l-hair);
background: var(--surface);
}
.nd-pack--popular[b-n3zwvsy62s]{
position: relative;
transform: translateY(-14px);
border-color: transparent;
box-shadow: 0 26px 60px rgba(91,108,255,.20);
outline: 2px solid rgba(91,108,255,.30);
outline-offset: -2px;
}
.nd-pack--popular[b-n3zwvsy62s]::before{
content: "";
position: absolute;
left: 24px;
right: 24px;
top: 0;
height: 4px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--p1), var(--p2));
}
.nd-pack-flag[b-n3zwvsy62s]{
display: inline-block;
align-self: flex-start;
margin-bottom: 12px;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, var(--p1), var(--p2));
color: #fff;
font-size: 0.75rem;
font-weight: 800;
}
.nd-pack-price[b-n3zwvsy62s]{
margin-top: 12px;
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--l-ink);
}
.nd-pack-credits[b-n3zwvsy62s]{
margin-top: 6px;
font-size: 1rem;
font-weight: 700;
color: var(--l-ink);
}
.nd-pack-per[b-n3zwvsy62s]{
margin-top: 2px;
font-size: 0.875rem;
color: var(--l-dim);
}
.nd-pack-note[b-n3zwvsy62s]{
margin: 14px 0 22px;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--l-body);
}
/* auto margin keeps all four buttons on one baseline */
.nd-pack-btn[b-n3zwvsy62s]{
margin-top: auto;
width: 100%;
}
.nd-price-first[b-n3zwvsy62s]{
margin-top: 26px;
max-width: 62ch;
}
/* ===== How credits work / Payments ======================================== */
.nd-price-prose[b-n3zwvsy62s]{
display: grid;
gap: 40px;
}
.nd-price-row[b-n3zwvsy62s]{
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: clamp(20px, 4vw, 56px);
align-items: start;
}
.nd-price-row + .nd-price-row[b-n3zwvsy62s]{
padding-top: 40px;
border-top: 1px solid var(--l-hair);
}
@media (max-width: 980px){
.nd-packs[b-n3zwvsy62s]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-pack--popular[b-n3zwvsy62s]{ transform: none; }
}
@media (max-width: 860px){
.nd-price-row[b-n3zwvsy62s]{ grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px){
.nd-packs[b-n3zwvsy62s]{ grid-template-columns: 1fr; }
.nd-pack[b-n3zwvsy62s]{ padding: 24px 20px; }
}
/* /Components/Pages/Unauthorized/Safety.razor.rz.scp.css */
.nd-safe-top[b-2bwipgj83f]{ padding-top: clamp(36px, 5vw, 64px); }
.nd-safe[b-2bwipgj83f]{ max-width: 68ch; }
.nd-safe-h1[b-2bwipgj83f]{ font-size: clamp(2.25rem, 4.6vw, 3rem); }
.nd-safe-block[b-2bwipgj83f]{
display: flex;
gap: 18px;
padding-top: 28px;
margin-top: 28px;
border-top: 1px solid var(--l-hair);
}
.nd-safe-block:first-of-type[b-2bwipgj83f]{
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.nd-safe-ic[b-2bwipgj83f]{
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(91,108,255,.10);
color: var(--p1);
font-size: 1.0625rem;
}
.nd-safe-block .nd-l-p[b-2bwipgj83f]{ margin-top: 10px; }
.nd-safe-tips-h[b-2bwipgj83f]{ margin-top: clamp(48px, 7vw, 72px); }
.nd-tips[b-2bwipgj83f]{
margin: 24px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 16px;
}
.nd-tips li[b-2bwipgj83f]{
position: relative;
padding-left: 26px;
max-width: 62ch;
font-size: 1rem;
line-height: 1.65;
color: var(--l-body);
}
.nd-tips li[b-2bwipgj83f]::before{
content: "";
position: absolute;
left: 0;
top: 11px;
width: 12px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--p1), var(--p2));
}
.nd-tips strong[b-2bwipgj83f]{
color: var(--l-ink);
font-weight: 700;
}
.nd-safe-help[b-2bwipgj83f]{
margin-top: clamp(40px, 6vw, 64px);
padding: clamp(24px, 4vw, 36px);
border-radius: var(--radius-xl);
background: var(--surface);
border: 1px solid var(--l-hair);
}
.nd-safe-help .nd-l-p[b-2bwipgj83f]{ margin-top: 10px; }
.nd-safe-btn[b-2bwipgj83f]{ margin-top: 22px; }
@media (max-width: 560px){
.nd-safe-block[b-2bwipgj83f]{ gap: 14px; }
.nd-safe-ic[b-2bwipgj83f]{
width: 40px;
height: 40px;
font-size: 1rem;
}
}
/* /Components/Pages/Unauthorized/Start.razor.rz.scp.css */
/* ===== /start: ad landing for men 50+ ==================================== */
/* Type is one size up from the main site (18px body, 20px buttons), text sits
on white only, every target is at least 56px tall. */
.nd-st[b-u20ejobf3l]{
padding: 16px 16px 8px;
}
.nd-st-card[b-u20ejobf3l]{
max-width: 640px;
margin: 0 auto;
background: #fff;
border-radius: 28px;
box-shadow: 0 30px 80px rgba(17,18,20,.28);
overflow: hidden;
animation: nd-st-in-b-u20ejobf3l .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nd-st-in-b-u20ejobf3l{
from{ opacity: 0; transform: translateY(14px); }
to{ opacity: 1; transform: none; }
}
.nd-st-photo[b-u20ejobf3l]{
position: relative;
height: 300px;
background: rgba(17,18,20,.06);
}
.nd-st-photo img[b-u20ejobf3l]{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 18%;
display: block;
}
/* the photo melts into the white body so the card reads as one piece */
.nd-st-photo[b-u20ejobf3l]::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 70px;
background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
}
.nd-st-body[b-u20ejobf3l]{
padding: 4px 24px 26px;
text-align: center;
}
.nd-st-chip[b-u20ejobf3l]{
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
background: rgba(91,108,255,.10);
color: var(--p1);
font-size: 0.9375rem;
font-weight: 900;
}
.nd-st-chip i[b-u20ejobf3l]{ font-size: 0.75rem; }
.nd-st-h1[b-u20ejobf3l]{
margin: 14px 0 0;
font-size: clamp(1.875rem, 6.2vw, 2.5rem);
line-height: 1.12;
font-weight: 900;
letter-spacing: -.02em;
color: #111214;
}
.nd-st-lede[b-u20ejobf3l]{
margin: 14px auto 0;
max-width: 34ch;
font-size: 1.125rem;
line-height: 1.55;
font-weight: 600;
color: rgba(17,18,20,.72);
}
.nd-st-actions[b-u20ejobf3l]{
margin-top: 22px;
display: grid;
gap: 12px;
}
.nd-st-btn[b-u20ejobf3l]{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 60px;
padding: 0 22px;
border-radius: 18px;
border: 2px solid transparent;
font: inherit;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -.005em;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nd-st-btn i[b-u20ejobf3l]{ font-size: 1.25rem; }
.nd-st-btn svg[b-u20ejobf3l]{ flex-shrink: 0; }
.nd-st-btn:active[b-u20ejobf3l]{ transform: scale(.985); }
.nd-st-btn:focus-visible[b-u20ejobf3l]{ outline: none; box-shadow: 0 0 0 5px rgba(91,108,255,.28); }
.nd-st-btn--facebook[b-u20ejobf3l]{
background: #1877F2;
border-color: #1877F2;
color: #fff;
box-shadow: 0 14px 34px rgba(24,119,242,.36);
}
.nd-st-btn--google[b-u20ejobf3l]{
background: #fff;
border-color: #c9ccd6;
color: #1f1f1f;
}
.nd-st-btn--google.is-primary[b-u20ejobf3l]{
box-shadow: 0 14px 34px rgba(17,18,20,.14);
border-color: #b7bbc8;
}
.nd-st-btn--email[b-u20ejobf3l]{
background: rgba(91,108,255,.07);
border-color: rgba(91,108,255,.4);
color: var(--p1);
}
.nd-st-btn--primary[b-u20ejobf3l]{
background: linear-gradient(90deg, var(--p1), var(--p2));
color: #fff;
box-shadow: 0 16px 40px rgba(91,108,255,.34);
}
@media (hover: hover){
.nd-st-btn--facebook:hover[b-u20ejobf3l]{ background: #166FE5; transform: translateY(-1px); }
.nd-st-btn--google:hover[b-u20ejobf3l]{ border-color: #9aa0b3; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(17,18,20,.14); }
.nd-st-btn--email:hover[b-u20ejobf3l]{ background: rgba(91,108,255,.13); border-color: rgba(91,108,255,.7); }
.nd-st-btn--primary:hover[b-u20ejobf3l]{ transform: translateY(-1px); box-shadow: 0 20px 48px rgba(91,108,255,.42); }
}
/* ---- inline email sign-up ---- */
.nd-st-or[b-u20ejobf3l]{
display: flex;
align-items: center;
gap: 12px;
margin: 2px 0;
color: rgba(17,18,20,.45);
font-size: 0.9375rem;
font-weight: 700;
}
.nd-st-or[b-u20ejobf3l]::before,
.nd-st-or[b-u20ejobf3l]::after{
content: "";
flex: 1;
height: 1px;
background: rgba(17,18,20,.12);
}
.nd-st-form[b-u20ejobf3l]{
display: grid;
gap: 8px;
text-align: left;
}
.nd-st-label[b-u20ejobf3l]{
margin-top: 4px;
padding-left: 2px;
font-size: 0.9375rem;
font-weight: 900;
color: rgba(17,18,20,.62);
}
.nd-st-input[b-u20ejobf3l]{
width: 100%;
min-height: 58px;
padding: 0 16px;
border-radius: 16px;
border: 2px solid rgba(17,18,20,.14);
background: #fff;
font: inherit;
font-size: 1.125rem; /* 18px: iOS does not zoom, and it reads at arm's length */
font-weight: 700;
color: #111214;
outline: none;
-webkit-appearance: none;
appearance: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.nd-st-input[b-u20ejobf3l]::placeholder{ color: rgba(17,18,20,.36); font-weight: 600; }
.nd-st-input:focus[b-u20ejobf3l]{
border-color: rgba(91,108,255,.75);
box-shadow: 0 0 0 4px rgba(91,108,255,.16);
}
.nd-st-input.is-error[b-u20ejobf3l]{ border-color: rgba(214,51,127,.7); }
/* Chrome autofill paints a pale yellow field; keep it white */
.nd-st-input:-webkit-autofill[b-u20ejobf3l],
.nd-st-input:-webkit-autofill:focus[b-u20ejobf3l]{
-webkit-box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: #111214;
}
.nd-st-pw[b-u20ejobf3l]{ position: relative; }
.nd-st-pw .nd-st-input[b-u20ejobf3l]{ padding-right: 60px; }
.nd-st-eye[b-u20ejobf3l]{
position: absolute;
right: 6px;
top: 50%;
width: 48px;
height: 48px;
margin-top: -24px;
border: 0;
border-radius: 12px;
background: transparent;
color: rgba(17,18,20,.55);
font-size: 1.125rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nd-st-eye:hover[b-u20ejobf3l]{ color: var(--p1); }
.nd-st-eye:focus-visible[b-u20ejobf3l]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.2); }
.nd-st-err[b-u20ejobf3l]{
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.4;
color: #c62c74;
}
/* terms: same 26px box as the auth modal */
.nd-st-terms[b-u20ejobf3l]{
position: relative;
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
padding: 12px 14px;
border-radius: 14px;
border: 1.5px solid rgba(17,18,20,.12);
background: rgba(247,248,252,.9);
font-size: 1rem;
font-weight: 600;
color: rgba(17,18,20,.82);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, background .15s ease;
}
.nd-st-terms.is-error[b-u20ejobf3l]{ border-color: rgba(214,51,127,.6); }
.nd-st-terms:has(input:checked)[b-u20ejobf3l]{ border-color: rgba(91,108,255,.5); background: #fff; }
.nd-st-terms:has(input:focus-visible)[b-u20ejobf3l]{ box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
.nd-st-terms input[b-u20ejobf3l]{
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.nd-st-terms-box[b-u20ejobf3l]{
flex: none;
width: 28px;
height: 28px;
border-radius: 9px;
border: 2px solid rgba(17,18,20,.3);
background: #fff;
display: grid;
place-items: center;
color: #fff;
font-size: 0.875rem;
transition: background .15s ease, border-color .15s ease;
}
.nd-st-terms-box i[b-u20ejobf3l]{ opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1); }
.nd-st-terms input:checked ~ .nd-st-terms-box[b-u20ejobf3l]{
border-color: transparent;
background: linear-gradient(135deg, var(--p1), var(--p2));
}
.nd-st-terms input:checked ~ .nd-st-terms-box i[b-u20ejobf3l]{ opacity: 1; transform: scale(1); }
.nd-st-terms-text a[b-u20ejobf3l]{ color: var(--p1); font-weight: 800; }
.nd-st-form .nd-st-btn--primary[b-u20ejobf3l]{ margin-top: 6px; width: 100%; }
.nd-st-spin[b-u20ejobf3l]{
width: 18px;
height: 18px;
border-radius: 999px;
border: 3px solid rgba(255,255,255,.4);
border-top-color: #fff;
animation: nd-st-spin-b-u20ejobf3l .8s linear infinite;
}
@keyframes nd-st-spin-b-u20ejobf3l{ to{ transform: rotate(360deg); } }
.nd-st-link--inline[b-u20ejobf3l]{ margin-left: 6px; color: var(--p1); min-height: 0; }
.nd-st-fine[b-u20ejobf3l]{
margin: 16px 0 0;
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
color: rgba(17,18,20,.6);
}
.nd-st-fine--light[b-u20ejobf3l]{ color: rgba(255,255,255,.92); }
.nd-st-link[b-u20ejobf3l]{
border: 0;
background: none;
padding: 0;
font: inherit;
font-weight: 900;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
min-height: 44px;
}
/* ---- below the fold ---- */
.nd-st-how[b-u20ejobf3l]{
max-width: 640px;
margin: 0 auto;
padding: 30px 20px 10px;
color: #fff;
}
.nd-st-h2[b-u20ejobf3l]{
margin: 0 0 18px;
font-size: 1.75rem;
font-weight: 900;
letter-spacing: -.01em;
text-align: center;
text-shadow: 0 2px 14px rgba(17,18,20,.18);
}
.nd-st-steps[b-u20ejobf3l]{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.nd-st-steps li[b-u20ejobf3l]{
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 18px 18px 16px;
border-radius: 20px;
background: rgba(255,255,255,.96);
color: #111214;
box-shadow: 0 14px 40px rgba(17,18,20,.16);
}
.nd-st-num[b-u20ejobf3l]{
flex: none;
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--p1), var(--p2));
color: #fff;
font-size: 1.25rem;
font-weight: 900;
}
.nd-st-steps h3[b-u20ejobf3l]{
margin: 6px 0 4px;
font-size: 1.25rem;
font-weight: 900;
letter-spacing: -.01em;
}
.nd-st-steps p[b-u20ejobf3l]{
margin: 0;
font-size: 1.0625rem;
line-height: 1.5;
font-weight: 600;
color: rgba(17,18,20,.7);
}
.nd-st-trust[b-u20ejobf3l]{
display: flex;
gap: 14px;
align-items: flex-start;
margin-top: 16px;
padding: 16px 18px;
border-radius: 20px;
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.35);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.nd-st-trust i[b-u20ejobf3l]{ font-size: 1.5rem; margin-top: 2px; }
.nd-st-trust p[b-u20ejobf3l]{
margin: 0;
font-size: 1.0625rem;
line-height: 1.5;
font-weight: 600;
color: #fff;
}
.nd-st-actions--again[b-u20ejobf3l]{
margin-top: 22px;
text-align: center;
}
.nd-st-actions--again .nd-st-btn--google.is-primary[b-u20ejobf3l]{ box-shadow: 0 18px 46px rgba(17,18,20,.28); }
/* ---- sticky button on phones ---- */
.nd-st-sticky[b-u20ejobf3l]{
display: none;
}
@media (max-width: 760px){
.nd-st-sticky[b-u20ejobf3l]{
display: block;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 -10px 40px rgba(17,18,20,.16);
transform: translateY(110%);
transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nd-st-sticky.is-on[b-u20ejobf3l]{ transform: none; }
.nd-st-sticky .nd-st-btn[b-u20ejobf3l]{ width: 100%; }
/* room for the bar while it is showing over the last cards */
.nd-st-how[b-u20ejobf3l]{ padding-bottom: 24px; }
}
/* ---- tablets in portrait: one column, but a wider card and a taller photo ---- */
@media (min-width: 600px) and (max-width: 899px){
.nd-st[b-u20ejobf3l]{ padding: 24px 24px 8px; }
.nd-st-card[b-u20ejobf3l]{ max-width: 620px; }
.nd-st-photo[b-u20ejobf3l]{ height: 380px; }
.nd-st-body[b-u20ejobf3l]{ padding: 4px 32px 30px; }
.nd-st-how[b-u20ejobf3l]{ max-width: 620px; }
}
/* ---- desktop and tablets in landscape: photo beside the words ---- */
@media (min-width: 900px){
.nd-st[b-u20ejobf3l]{ padding: 28px 24px 8px; }
.nd-st-card[b-u20ejobf3l]{
max-width: 960px;
display: grid;
grid-template-columns: 42% 1fr;
}
.nd-st-photo[b-u20ejobf3l]{ height: auto; min-height: 640px; }
.nd-st-photo[b-u20ejobf3l]::after{
left: auto; right: 0; top: 0; bottom: 0;
width: 70px; height: auto;
background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
}
.nd-st-body[b-u20ejobf3l]{
padding: 40px 40px 36px 28px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.nd-st-actions[b-u20ejobf3l]{ width: 100%; }
.nd-st-h1[b-u20ejobf3l]{ font-size: clamp(2.25rem, 3.4vw, 2.875rem); }
.nd-st-lede[b-u20ejobf3l]{ margin-left: 0; }
.nd-st-actions[b-u20ejobf3l]{ max-width: 420px; }
.nd-st-how[b-u20ejobf3l]{ max-width: 960px; padding-top: 34px; }
.nd-st-steps[b-u20ejobf3l]{ grid-template-columns: repeat(3, 1fr); }
.nd-st-steps li[b-u20ejobf3l]{ flex-direction: column; gap: 12px; }
.nd-st-actions--again[b-u20ejobf3l]{ max-width: 420px; margin-left: auto; margin-right: auto; }
}
/* phones held sideways: the fixed bar would eat a third of the screen */
@media (max-height: 480px) and (orientation: landscape){
.nd-st-sticky[b-u20ejobf3l]{ display: none !important; }
.nd-st-photo[b-u20ejobf3l]{ height: 220px; }
}
@media (prefers-reduced-motion: reduce){
.nd-st-card[b-u20ejobf3l]{ animation: none; }
.nd-st-sticky[b-u20ejobf3l]{ transition: none; }
}
/* /Components/Shared/AuthModal.razor.rz.scp.css */
/* Provider buttons sit at the top of the sheet, aligned with the body inset */
.nd-auth-social-row.nd-auth-social-top[b-y1x38fkzth]{
margin: 16px 20px 0;
align-items: stretch;
}
.nd-auth-social-row.nd-auth-social-top .nd-auth-social[b-y1x38fkzth]{ width: 100%; }
.nd-auth-social-divider[b-y1x38fkzth]{
margin: 14px 20px 0;
}
.nd-auth-body .nd-auth-label[b-y1x38fkzth]{ display: block; }
.nd-auth-gap[b-y1x38fkzth]{ height: 12px; }
/* two steps only: a thin line reads as progress, a thick bar as a loader */
.nd-auth-progress[b-y1x38fkzth]{ height: 5px; margin-top: 14px; }
/* Terms checkbox: a 26px box in the app's own shape, the native input stays
in the DOM (keyboard, screen readers, form post) but is drawn by us. */
.nd-auth-terms[b-y1x38fkzth]{
position: relative;
align-items: center;
gap: 12px;
margin-top: 16px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(247,248,252,.8);
font-size: 0.9375rem;
color: rgba(17,18,20,.80);
transition: border-color .15s ease, background .15s ease;
}
.nd-auth-terms:hover[b-y1x38fkzth]{ border-color: rgba(91,108,255,.35); background: #fff; }
.nd-auth-terms:has(input:checked)[b-y1x38fkzth]{ border-color: rgba(91,108,255,.45); background: #fff; }
.nd-auth-terms:has(input:focus-visible)[b-y1x38fkzth]{ box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
.nd-auth-terms input[type="checkbox"][b-y1x38fkzth]{
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.nd-auth-terms-box[b-y1x38fkzth]{
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
border: 2px solid rgba(17,18,20,.28);
background: #fff;
display: grid;
place-items: center;
color: #fff;
font-size: 0.8125rem;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.nd-auth-terms-box i[b-y1x38fkzth]{ opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1); }
.nd-auth-terms input:checked ~ .nd-auth-terms-box[b-y1x38fkzth]{
border-color: transparent;
background: linear-gradient(135deg, var(--p1), var(--p2));
box-shadow: 0 6px 16px rgba(91,108,255,.28);
}
.nd-auth-terms input:checked ~ .nd-auth-terms-box i[b-y1x38fkzth]{ opacity: 1; transform: scale(1); }
.nd-auth-terms:active .nd-auth-terms-box[b-y1x38fkzth]{ transform: scale(.94); }
.nd-auth-terms-text[b-y1x38fkzth]{ line-height: 1.4; font-weight: 600; }
.nd-auth-terms-text a[b-y1x38fkzth]{ font-weight: 800; }
.nd-auth-back[b-y1x38fkzth]{
height: 44px;
background: transparent;
border: 0;
color: rgba(17,18,20,.55);
font-weight: 800;
font-size: 0.8125rem;
cursor: pointer;
border-radius: 999px;
}
.nd-auth-back:hover[b-y1x38fkzth]{ color: rgba(17,18,20,.85); background: rgba(17,18,20,.04); }
.nd-auth-choice[b-y1x38fkzth]{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.nd-choice[b-y1x38fkzth]{
height: 48px;
border-radius: 16px;
border: 1px solid rgba(17,18,20,.12);
background: rgba(255,255,255,.78);
cursor: pointer;
font-weight: 900;
color: rgba(17,18,20,.72);
}
.nd-choice.is-on[b-y1x38fkzth]{
border-color: rgba(91,108,255,.55);
box-shadow: 0 0 0 6px rgba(91,108,255,.12);
color: rgba(91,108,255,.95);
}
.nd-dob-wrap[b-y1x38fkzth]{ margin-top: 2px; }
.nd-dob[b-y1x38fkzth]{
display: grid;
grid-template-columns: 1fr auto 1fr auto 1.2fr;
align-items: end;
gap: 10px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.88);
box-shadow: 0 10px 28px rgba(17,18,20,.08);
}
.nd-dob-field[b-y1x38fkzth]{
display: grid;
gap: 6px;
}
.nd-dob-cap[b-y1x38fkzth]{
font-size: 0.6875rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(17,18,20,.55);
padding-left: 2px;
}
.nd-dob-input[b-y1x38fkzth]{
height: 52px;
width: 100%;
border-radius: 16px;
border: 1px solid rgba(17,18,20,.14);
background: rgba(247,248,252,.95);
padding: 0 14px;
outline: none;
font-weight: 900;
font-size: 1rem;
letter-spacing: .06em;
text-align: center;
color: rgba(17,18,20,.88);
}
.nd-dob-input[b-y1x38fkzth]::placeholder{
color: rgba(17,18,20,.28);
font-weight: 900;
letter-spacing: .10em;
}
.nd-dob-input:focus[b-y1x38fkzth]{
border-color: rgba(91,108,255,.55);
box-shadow: 0 0 0 6px rgba(91,108,255,.14);
background: #fff;
}
.nd-dob-sep[b-y1x38fkzth]{
align-self: center;
height: 52px;
width: 16px;
display: grid;
place-items: center;
font-weight: 900;
color: rgba(17,18,20,.35);
}
/* Mobile: keep it clean and readable */
@media (max-width: 560px){
.nd-dob[b-y1x38fkzth]{
grid-template-columns: 1fr 1fr 1.2fr;
gap: 10px;
padding: 12px;
}
.nd-dob-sep[b-y1x38fkzth]{ display:none; }
.nd-dob-input[b-y1x38fkzth]{ height: 50px; font-size: 1rem; }
}
.nd-auth-hint[b-y1x38fkzth]{
margin-top: 8px;
font-size: 0.75rem;
color: rgba(17,18,20,.48);
}
.nd-auth-error[b-y1x38fkzth]{
margin-top: 12px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,91,200,.28);
background: rgba(255,91,200,.10);
color: rgba(17,18,20,.78);
font-weight: 700;
font-size: 0.75rem;
}
.nd-auth-actions[b-y1x38fkzth]{
padding: 12px 50px 14px;
display: grid;
gap: 12px;
}
.nd-auth-actions-one-action[b-y1x38fkzth]{
padding: 12px 20px 14px;
display: grid;
gap: 12px;
}
.nd-auth-primary[b-y1x38fkzth]{
height: 48px;
border-radius: 999px;
border: 0;
cursor: pointer;
color: white;
font-weight: 900;
letter-spacing: .18em;
font-size: 0.6875rem;
text-transform: uppercase;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: var(--shadow-soft);
}
.nd-auth-primary:disabled[b-y1x38fkzth],
.nd-auth-back:disabled[b-y1x38fkzth]{
opacity: .45;
cursor: not-allowed;
}
.nd-auth-primary-magic[b-y1x38fkzth]{
position: relative;
isolation: isolate;
overflow: hidden;
}
.nd-auth-primary-magic[b-y1x38fkzth]::before{
content:"";
position:absolute;
inset:-2px;
background: conic-gradient(from 180deg, rgba(91,108,255,.0), rgba(91,108,255,.9), rgba(255,91,200,.9), rgba(91,108,255,.0));
filter: blur(10px);
opacity: .8;
animation: ndMagic-b-y1x38fkzth 2.2s linear infinite;
z-index:-1;
}
@keyframes ndMagic-b-y1x38fkzth{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
.nd-auth-foot[b-y1x38fkzth]{
padding: 0 20px 18px;
font-size: 0.75rem;
color: rgba(17,18,20,.55);
}
.nd-auth-link[b-y1x38fkzth]{
border: 0;
background: transparent;
cursor: pointer;
font-weight: 900;
color: rgba(91,108,255,.95);
padding: 0 6px;
}
.nd-auth-forgot[b-y1x38fkzth]{
margin-top: 10px;
}
.nd-auth-forgot-text[b-y1x38fkzth]{
font-size: 0.75rem;
color: rgba(17,18,20,.55);
text-decoration: underline;
text-decoration-color: rgba(17,18,20,.25);
cursor: default;
}
.nd-auth-loading[b-y1x38fkzth]{
padding: 44px 22px 40px;
display: grid;
justify-items: center;
gap: 14px;
}
.nd-spinner[b-y1x38fkzth]{
width: 54px;
height: 54px;
border-radius: 999px;
border: 4px solid rgba(17,18,20,.10);
border-top-color: rgba(91,108,255,.95);
border-right-color: rgba(255,91,200,.85);
animation: ndSpin-b-y1x38fkzth .8s linear infinite;
box-shadow: 0 18px 50px rgba(17,18,20,.14);
}
@keyframes ndSpin-b-y1x38fkzth{ to { transform: rotate(360deg); } }
.nd-auth-loading-text[b-y1x38fkzth]{
font-weight: 900;
font-size: 0.75rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(17,18,20,.55);
}
.nd-auth-modal-inner.is-loading[b-y1x38fkzth]{
pointer-events:none;
opacity:.45;
filter: blur(1px);
}
.nd-auth-loading-overlay[b-y1x38fkzth]{
position:absolute;
inset:0;
display:grid;
place-items:center;
gap: 14px;
background: rgba(255,255,255,.62);
backdrop-filter: blur(10px);
z-index: 3;
}
/* ===== Password eye ===== */
.nd-password-wrap[b-y1x38fkzth]{
position: relative;
}
.nd-auth-input-password[b-y1x38fkzth]{
padding-right: 48px; /* место под глаз */
}
.nd-password-eye[b-y1x38fkzth]{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.75);
cursor: pointer;
display: grid;
place-items: center;
font-size: 1rem;
color: rgba(17,18,20,.65);
}
.nd-password-eye:hover[b-y1x38fkzth]{
background: rgba(255,255,255,.95);
color: rgba(91,108,255,.95);
box-shadow: 0 0 0 4px rgba(91,108,255,.12);
}
/* ===== Error FX: shake + red inputs ===== */
.nd-auth-shake[b-y1x38fkzth]{
animation: ndShake-b-y1x38fkzth .46s ease-in-out;
}
@keyframes ndShake-b-y1x38fkzth{
0% { transform: translateX(0); }
12% { transform: translateX(-10px); }
24% { transform: translateX(9px); }
36% { transform: translateX(-7px); }
48% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
72% { transform: translateX(3px); }
84% { transform: translateX(-2px); }
100% { transform: translateX(0); }
}
.nd-auth-input-error[b-y1x38fkzth]{
border-color: rgba(255, 91, 200, .55) !important;
box-shadow: 0 0 0 6px rgba(255, 91, 200, .14) !important;
background: rgba(255,255,255,.98) !important;
}
.nd-auth-input-error[b-y1x38fkzth]::placeholder{
color: rgba(17,18,20,.32);
}
.nd-auth-input.is-error[b-y1x38fkzth]{
border-color: rgba(255,91,200,.55);
box-shadow: 0 0 0 6px rgba(255,91,200,.14);
}
/* Very small phones */
@media (max-width: 400px){
.nd-auth-actions[b-y1x38fkzth]{ padding: 12px 16px 14px; }
.nd-auth-actions-one-action[b-y1x38fkzth]{ padding: 12px 16px 14px; }
.nd-auth-choice[b-y1x38fkzth]{ gap: 8px; }
.nd-choice[b-y1x38fkzth]{ height: 52px; font-size: 0.8125rem; }
.nd-auth-primary[b-y1x38fkzth],
.nd-auth-back[b-y1x38fkzth]{ height: 52px; }
}
/* /Components/Shared/MatchesWatcher.razor.rz.scp.css */
/* /Components/Shared/NdToastHost.razor.rz.scp.css */
.nd-toast-host[b-90o103g3aw]{
position: fixed;
/* Above the chat overlay (z-1000) but below modal overlays (z-9998/9999) */
z-index: 5000;
top: calc(12px + env(safe-area-inset-top, 0px));
right: 14px;
display: grid;
gap: 10px;
width: min(360px, calc(100vw - 28px));
pointer-events: none; /* клики только по самим карточкам */
}
@media (max-width: 980px){
.nd-toast-host[b-90o103g3aw]{
left: 50%;
right: auto;
transform: translateX(-50%);
/* Clear the sticky mobile header so toasts never cover it */
top: calc(var(--nd-header-h, 64px) + env(safe-area-inset-top, 0px) + 8px);
width: min(420px, calc(100vw - 24px));
}
}
.nd-toast[b-90o103g3aw]{
pointer-events: auto;
position: relative;
/* Let the swipe-to-dismiss gesture read horizontal drags without the
browser hijacking them as page scroll / edge-swipe navigation. */
touch-action: pan-y;
display: grid;
grid-template-columns: 56px 1fr;
gap: 12px;
padding: 12px 12px;
border-radius: 18px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.92);
box-shadow: var(--shadow-2);
backdrop-filter: blur(10px);
/* No forwards/both fill-mode: once the intro plays out, this animation's
transform must stop overriding the inline transform used for the
swipe-to-dismiss gesture below. */
animation: nd-toast-in-b-90o103g3aw .22s ease-out;
}
@keyframes nd-toast-in-b-90o103g3aw{
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.nd-toast.is-like[b-90o103g3aw]{
border-color: rgba(255,91,200,.22);
box-shadow: 0 18px 50px rgba(255,91,200,.14);
}
.nd-toast.is-match[b-90o103g3aw]{
border-color: rgba(91,108,255,.22);
box-shadow: 0 18px 50px rgba(91,108,255,.14);
}
.nd-toast.is-message[b-90o103g3aw]{
border-color: rgba(91,108,255,.18);
box-shadow: 0 18px 50px rgba(91,108,255,.10);
}
.nd-toast-x[b-90o103g3aw]{
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.70);
cursor: pointer;
font-weight: 900;
line-height: 1;
color: rgba(17,18,20,.55);
}
/* Expand the tappable area to 44x44 without growing the visual button */
.nd-toast-x[b-90o103g3aw]::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
.nd-toast-x:hover[b-90o103g3aw]{
background: rgba(91,108,255,.08);
border-color: rgba(91,108,255,.22);
color: rgba(91,108,255,.95);
}
.nd-toast-avatar[b-90o103g3aw]{
width: 52px;
height: 52px;
border-radius: 999px;
overflow: hidden;
background: rgba(17,18,20,.06);
border: 1px solid rgba(17,18,20,.10);
display: grid;
place-items: center;
position: relative;
}
.nd-toast-avatar img[b-90o103g3aw]{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}
.nd-toast-avatar-ph[b-90o103g3aw]{
width: 100%;
height: 100%;
display:grid;
place-items:center;
font-size: 1.125rem;
color: rgba(17,18,20,.35);
}
.nd-toast-online[b-90o103g3aw]{
position: absolute;
right: 3px;
bottom: 3px;
width: 12px;
height: 12px;
border-radius: 999px;
background: #26b15f;
border: 2px solid rgba(255,255,255,.92);
box-shadow: 0 0 0 4px rgba(38,177,95,.14);
}
.nd-toast-title[b-90o103g3aw]{
font-weight: 1000;
font-size: 0.75rem;
letter-spacing: .02em;
color: rgba(17,18,20,.70);
}
.nd-toast-name[b-90o103g3aw]{
margin-top: 2px;
font-weight: 1000;
font-size: 0.875rem;
color: rgba(17,18,20,.92);
}
.nd-toast-age[b-90o103g3aw]{
font-weight: 900;
color: rgba(17,18,20,.55);
}
.nd-toast-body[b-90o103g3aw]{
margin-top: 2px;
font-size: 0.75rem;
font-weight: 800;
color: rgba(17,18,20,.60);
}
.nd-toast-btn[b-90o103g3aw]{
margin-top: 8px;
height: 36px;
padding: 0 12px;
border-radius: 12px;
border: 0;
cursor: pointer;
font-weight: 1000;
color: white;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 14px 34px rgba(91,108,255,.22);
}
.nd-toast-btn:hover[b-90o103g3aw]{
transform: translateY(-1px);
box-shadow: 0 18px 44px rgba(91,108,255,.26);
}
.nd-toast-btn:active[b-90o103g3aw]{ transform: translateY(0); }
/* /Components/Shared/PresencePinger.razor.rz.scp.css */
/* /Components/Shared/Sidebars/ProfileFakeSidebar.razor.rz.scp.css */
/* /Components/Shared/Sidebars/ProfileSidebar.razor.rz.scp.css */
/* /Components/Shared/TopUpModal.razor.rz.scp.css */
/* ===== Top-up checkout: one column, fits the viewport, sticky pay bar ===== */
.nd-topup-overlay[b-rdaa5ruy3y]{
/* the sheet scrolls inside itself; the overlay never does */
overflow: hidden;
padding: 16px;
}
.nd-topup-modal[b-rdaa5ruy3y]{
position: relative;
width: min(500px, 100%);
max-height: calc(100dvh - 32px);
display: flex;
flex-direction: column;
border-radius: 26px;
background: #fff;
border: 1px solid rgba(17,18,20,.08);
box-shadow: 0 30px 90px rgba(17,18,20,.24);
overflow: hidden;
animation: nd-topup-in-b-rdaa5ruy3y .28s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nd-topup-in-b-rdaa5ruy3y{
from{ opacity: 0; transform: translateY(12px) scale(.985); }
to{ opacity: 1; transform: none; }
}
/* ---- header ---- */
.nd-topup-head[b-rdaa5ruy3y]{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 20px 20px 14px;
border-bottom: 1px solid rgba(17,18,20,.06);
flex-shrink: 0;
}
.nd-topup-title[b-rdaa5ruy3y]{
margin: 0;
font-size: 1.375rem;
font-weight: 900;
letter-spacing: -.02em;
color: rgba(17,18,20,.92);
}
.nd-topup-balance[b-rdaa5ruy3y]{
margin: 4px 0 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 700;
color: rgba(17,18,20,.52);
}
.nd-topup-balance i[b-rdaa5ruy3y]{ color: rgba(255,193,7,.95); font-size: 0.75rem; }
.nd-topup-balance strong[b-rdaa5ruy3y]{ color: rgba(17,18,20,.86); font-weight: 900; }
.nd-topup-x[b-rdaa5ruy3y]{
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(247,248,252,.9);
font-size: 1.375rem;
line-height: 0;
cursor: pointer;
color: rgba(17,18,20,.60);
transition: background .15s ease, color .15s ease;
}
.nd-topup-x:hover[b-rdaa5ruy3y]{ background: #fff; color: rgba(17,18,20,.9); }
.nd-topup-x:focus-visible[b-rdaa5ruy3y]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
/* ---- scrollable body ---- */
.nd-topup-scroll[b-rdaa5ruy3y]{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 16px 20px 18px;
display: grid;
gap: 18px;
}
.nd-topup-scroll[b-rdaa5ruy3y]::-webkit-scrollbar{ width: 8px; }
.nd-topup-scroll[b-rdaa5ruy3y]::-webkit-scrollbar-thumb{
background: rgba(17,18,20,.12);
border-radius: 999px;
border: 2px solid #fff;
background-clip: padding-box;
}
/* ---- packs ---- */
.nd-topup-grid[b-rdaa5ruy3y]{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nd-topup-pack[b-rdaa5ruy3y]{
position: relative;
display: grid;
gap: 6px;
text-align: left;
padding: 16px 14px 14px;
border-radius: 18px;
border: 1.5px solid rgba(17,18,20,.10);
background: #fff;
cursor: pointer;
font: inherit;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
@media (hover: hover){
.nd-topup-pack:hover[b-rdaa5ruy3y]{ border-color: rgba(91,108,255,.35); }
}
.nd-topup-pack:focus-visible[b-rdaa5ruy3y]{ outline: none; box-shadow: 0 0 0 4px rgba(91,108,255,.18); }
.nd-topup-pack.is-active[b-rdaa5ruy3y]{
border-color: rgba(91,108,255,.85);
background: linear-gradient(135deg, rgba(91,108,255,.06), rgba(255,91,200,.05)), #fff;
box-shadow: 0 10px 30px rgba(91,108,255,.14);
}
.nd-topup-pack.is-popular:not(.is-active)[b-rdaa5ruy3y]{ border-color: rgba(91,108,255,.28); }
.nd-topup-pack.is-deal.is-active[b-rdaa5ruy3y]{ border-color: rgba(255,91,200,.85); box-shadow: 0 10px 30px rgba(255,91,200,.16); }
.nd-topup-pack-skel[b-rdaa5ruy3y]{
min-height: 118px;
background: linear-gradient(90deg, rgba(17,18,20,.04), rgba(17,18,20,.08), rgba(17,18,20,.04));
background-size: 200% 100%;
animation: nd-topup-shimmer-b-rdaa5ruy3y 1.2s linear infinite;
}
@keyframes nd-topup-shimmer-b-rdaa5ruy3y{ to{ background-position: -200% 0; } }
.nd-topup-tag[b-rdaa5ruy3y]{
position: absolute;
top: -9px;
left: 12px;
height: 20px;
padding: 0 8px;
border-radius: 999px;
display: inline-flex;
align-items: center;
font-size: 0.625rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(90deg, var(--p1), #7c8aff);
box-shadow: 0 6px 14px rgba(91,108,255,.25);
white-space: nowrap;
}
.nd-topup-tag.is-deal[b-rdaa5ruy3y]{ background: linear-gradient(90deg, var(--p2), #ff8ad8); box-shadow: 0 6px 14px rgba(255,91,200,.28); }
.nd-topup-tag.is-quiet[b-rdaa5ruy3y]{ background: rgba(17,18,20,.70); box-shadow: none; }
.nd-topup-pack-credits[b-rdaa5ruy3y]{
display: flex;
align-items: baseline;
gap: 6px;
}
.nd-topup-pack-num[b-rdaa5ruy3y]{
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -.02em;
color: rgba(17,18,20,.9);
line-height: 1;
}
.nd-topup-pack.is-active .nd-topup-pack-num[b-rdaa5ruy3y]{ color: var(--p1); }
.nd-topup-pack.is-deal.is-active .nd-topup-pack-num[b-rdaa5ruy3y]{ color: #d6337f; }
.nd-topup-pack-unit[b-rdaa5ruy3y]{
font-size: 0.75rem;
font-weight: 800;
color: rgba(17,18,20,.45);
}
.nd-topup-pack-price[b-rdaa5ruy3y]{
display: flex;
align-items: baseline;
gap: 8px;
}
.nd-topup-pack-now[b-rdaa5ruy3y]{
font-size: 1.125rem;
font-weight: 900;
color: rgba(17,18,20,.88);
}
.nd-topup-pack-was[b-rdaa5ruy3y]{
font-size: 0.8125rem;
font-weight: 800;
color: rgba(17,18,20,.36);
}
.nd-topup-pack-per[b-rdaa5ruy3y]{
font-size: 0.6875rem;
font-weight: 800;
color: rgba(17,18,20,.42);
}
.nd-topup-pack-check[b-rdaa5ruy3y]{
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 0.6875rem;
color: #fff;
background: linear-gradient(135deg, var(--p1), var(--p2));
opacity: 0;
transform: scale(.6);
transition: opacity .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.nd-topup-pack.is-active .nd-topup-pack-check[b-rdaa5ruy3y]{ opacity: 1; transform: scale(1); }
/* ---- payment ---- */
.nd-topup-pay[b-rdaa5ruy3y]{
display: grid;
gap: 14px;
}
.nd-topup-error[b-rdaa5ruy3y]{ margin-top: 0; }
/* wallets appear only when the browser has one; until then nothing jumps */
.nd-topup-express-wrap[b-rdaa5ruy3y]{ display: none; }
.nd-topup-express-wrap.is-on[b-rdaa5ruy3y]{ display: grid; gap: 14px; }
.nd-topup-express[b-rdaa5ruy3y]{ min-height: 48px; }
.nd-topup-divider[b-rdaa5ruy3y]{
display: flex;
align-items: center;
gap: 12px;
color: rgba(17,18,20,.40);
font-size: 0.75rem;
font-weight: 700;
}
.nd-topup-divider[b-rdaa5ruy3y]::before,
.nd-topup-divider[b-rdaa5ruy3y]::after{
content: "";
flex: 1;
height: 1px;
background: rgba(17,18,20,.10);
}
.nd-topup-card[b-rdaa5ruy3y]{
position: relative;
display: grid;
gap: 12px;
}
.nd-topup-card.is-waiting .nd-topup-field[b-rdaa5ruy3y]{ opacity: .5; }
.nd-topup-fieldset[b-rdaa5ruy3y]{ display: grid; gap: 6px; min-width: 0; }
.nd-topup-row[b-rdaa5ruy3y]{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.nd-topup-label[b-rdaa5ruy3y]{
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .04em;
color: rgba(17,18,20,.60);
padding-left: 2px;
}
/* the box around a Stripe iframe: same shape as .nd-auth-input */
.nd-topup-field[b-rdaa5ruy3y]{
position: relative;
height: 50px;
display: flex;
align-items: center;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(17,18,20,.12);
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.nd-topup-field.is-focus[b-rdaa5ruy3y]{
border-color: rgba(91,108,255,.55);
box-shadow: 0 0 0 4px rgba(91,108,255,.12);
}
.nd-topup-field.is-error[b-rdaa5ruy3y]{
border-color: rgba(255,91,200,.6);
box-shadow: 0 0 0 4px rgba(255,91,200,.12);
}
.nd-topup-el[b-rdaa5ruy3y]{ flex: 1; min-width: 0; }
.nd-topup-el[b-rdaa5ruy3y] iframe{ height: 20px; }
/* card brand mark in the number field */
.nd-topup-brand[b-rdaa5ruy3y]{
flex-shrink: 0;
width: 34px;
height: 22px;
margin-left: 10px;
border-radius: 5px;
background: rgba(17,18,20,.06) center / 26px no-repeat;
opacity: 0;
transition: opacity .15s ease;
}
.nd-topup-brand[class*="is-"][b-rdaa5ruy3y]{ opacity: 1; }
.nd-topup-brand.is-visa[b-rdaa5ruy3y]{ background-color: #1a1f71; background-image: url("data:image/svg+xml;utf8,"); }
.nd-topup-brand.is-mastercard[b-rdaa5ruy3y]{ background-color: #111; background-image: url("data:image/svg+xml;utf8,"); background-size: 20px; }
.nd-topup-brand.is-amex[b-rdaa5ruy3y]{ background-color: #2e77bb; background-image: url("data:image/svg+xml;utf8,"); }
.nd-topup-brand.is-discover[b-rdaa5ruy3y],
.nd-topup-brand.is-diners[b-rdaa5ruy3y],
.nd-topup-brand.is-jcb[b-rdaa5ruy3y],
.nd-topup-brand.is-unionpay[b-rdaa5ruy3y]{ background-color: rgba(17,18,20,.72); background-image: url("data:image/svg+xml;utf8,"); }
.nd-topup-field-error[b-rdaa5ruy3y]{
display: none;
font-size: 0.75rem;
font-weight: 800;
color: #d6337f;
line-height: 1.4;
}
.nd-topup-field-error.is-on[b-rdaa5ruy3y]{ display: block; }
.nd-topup-card-busy[b-rdaa5ruy3y]{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.8125rem;
font-weight: 800;
color: rgba(17,18,20,.6);
background: rgba(255,255,255,.6);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
border-radius: 14px;
}
/* ---- sticky footer ---- */
.nd-topup-foot[b-rdaa5ruy3y]{
flex-shrink: 0;
padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(17,18,20,.06);
background: #fff;
display: grid;
gap: 10px;
}
.nd-topup-paybtn[b-rdaa5ruy3y]{
height: 52px;
border-radius: 999px;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #fff;
font: inherit;
font-size: 0.9375rem;
font-weight: 900;
letter-spacing: .02em;
background: linear-gradient(90deg, var(--p1), var(--p2));
box-shadow: 0 14px 34px rgba(91,108,255,.24);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.nd-topup-paybtn i[b-rdaa5ruy3y]{ font-size: 0.8125rem; opacity: .9; }
@media (hover: hover){
.nd-topup-paybtn:hover:not(:disabled)[b-rdaa5ruy3y]{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(91,108,255,.30); }
}
.nd-topup-paybtn:active:not(:disabled)[b-rdaa5ruy3y]{ transform: scale(.99); }
.nd-topup-paybtn:disabled[b-rdaa5ruy3y]{ opacity: .5; cursor: not-allowed; box-shadow: none; }
.nd-topup-paybtn:focus-visible[b-rdaa5ruy3y]{ outline: none; box-shadow: 0 0 0 5px rgba(91,108,255,.22); }
.nd-topup-legal[b-rdaa5ruy3y]{
margin: 0;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.45;
color: rgba(17,18,20,.42);
}
.nd-topup-spin[b-rdaa5ruy3y]{
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(17,18,20,.15);
border-top-color: rgba(91,108,255,.95);
animation: nd-topup-spinr-b-rdaa5ruy3y .9s linear infinite;
}
.nd-topup-spin.is-light[b-rdaa5ruy3y]{
border-color: rgba(255,255,255,.35);
border-top-color: #fff;
}
@keyframes nd-topup-spinr-b-rdaa5ruy3y{ to{ transform: rotate(360deg); } }
/* ---- success ---- */
.nd-topup-success[b-rdaa5ruy3y]{
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
padding: 40px 24px;
overflow: hidden;
animation: ndSuccessFadeIn-b-rdaa5ruy3y .5s ease both;
}
.nd-topup-success-glow[b-rdaa5ruy3y]{
position: absolute;
width: 320px;
height: 320px;
border-radius: 999px;
background:
radial-gradient(circle, rgba(34,197,94,.22) 0%, transparent 70%),
radial-gradient(circle at 60% 40%, rgba(91,108,255,.14) 0%, transparent 65%);
filter: blur(40px);
pointer-events: none;
animation: ndSuccessPulse-b-rdaa5ruy3y 2.5s ease-in-out infinite;
}
.nd-topup-success-content[b-rdaa5ruy3y]{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.nd-topup-success-ring[b-rdaa5ruy3y]{
width: 82px;
height: 82px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.06));
border: 2px solid rgba(34,197,94,.30);
box-shadow: 0 0 0 8px rgba(34,197,94,.08), 0 20px 50px rgba(34,197,94,.16);
font-size: 2rem;
color: rgba(34,197,94,.95);
animation: ndSuccessRingPop-b-rdaa5ruy3y .6s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.nd-topup-success-title[b-rdaa5ruy3y]{
font-size: 1.5rem;
font-weight: 900;
color: rgba(17,18,20,.88);
animation: ndSuccessSlideUp-b-rdaa5ruy3y .5s ease .25s both;
}
.nd-topup-success-sub[b-rdaa5ruy3y]{
font-size: 0.9375rem;
font-weight: 800;
color: rgba(17,18,20,.55);
animation: ndSuccessSlideUp-b-rdaa5ruy3y .5s ease .35s both;
}
.nd-topup-success-coins[b-rdaa5ruy3y]{ font-weight: 950; color: rgba(34,197,94,.95); }
.nd-topup-success-balance[b-rdaa5ruy3y]{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(17,18,20,.10);
background: rgba(255,255,255,.75);
font-size: 0.875rem;
font-weight: 950;
color: rgba(17,18,20,.72);
box-shadow: 0 10px 30px rgba(17,18,20,.06);
animation: ndSuccessSlideUp-b-rdaa5ruy3y .5s ease .45s both;
}
.nd-topup-success-balance i[b-rdaa5ruy3y]{ color: rgba(255,193,7,.90); }
@keyframes ndSuccessFadeIn-b-rdaa5ruy3y{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes ndSuccessRingPop-b-rdaa5ruy3y{ from{ transform: scale(0); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
@keyframes ndSuccessSlideUp-b-rdaa5ruy3y{ from{ transform: translateY(16px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
@keyframes ndSuccessPulse-b-rdaa5ruy3y{ 0%, 100%{ transform: scale(1); opacity: .7; } 50%{ transform: scale(1.12); opacity: 1; } }
/* ---- phones: bottom sheet ---- */
@media (max-width: 560px){
.nd-topup-overlay[b-rdaa5ruy3y]{
padding: 0;
align-items: end;
place-items: end center;
}
.nd-topup-overlay .nd-auth-glow[b-rdaa5ruy3y]{ display: none; }
.nd-topup-modal[b-rdaa5ruy3y]{
width: 100%;
max-height: calc(100dvh - 24px);
border-radius: 22px 22px 0 0;
margin: 0;
animation: nd-topup-up-b-rdaa5ruy3y .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nd-topup-up-b-rdaa5ruy3y{
from{ transform: translateY(24px); opacity: 0; }
to{ transform: none; opacity: 1; }
}
.nd-topup-head[b-rdaa5ruy3y]{ padding: 16px 16px 12px; }
.nd-topup-title[b-rdaa5ruy3y]{ font-size: 1.25rem; }
.nd-topup-scroll[b-rdaa5ruy3y]{ padding: 14px 16px 16px; gap: 16px; }
.nd-topup-grid[b-rdaa5ruy3y]{ gap: 8px; }
.nd-topup-pack[b-rdaa5ruy3y]{ padding: 14px 12px 12px; border-radius: 16px; }
.nd-topup-pack-num[b-rdaa5ruy3y]{ font-size: 1.375rem; }
.nd-topup-foot[b-rdaa5ruy3y]{ padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.nd-topup-legal[b-rdaa5ruy3y]{ font-size: 0.625rem; }
}
@media (max-height: 640px) and (min-width: 561px){
.nd-topup-modal[b-rdaa5ruy3y]{ max-height: calc(100dvh - 16px); }
}
@media (prefers-reduced-motion: reduce){
.nd-topup-modal[b-rdaa5ruy3y], .nd-topup-pack-skel[b-rdaa5ruy3y], .nd-topup-success[b-rdaa5ruy3y], .nd-topup-success-glow[b-rdaa5ruy3y],
.nd-topup-success-ring[b-rdaa5ruy3y], .nd-topup-success-title[b-rdaa5ruy3y], .nd-topup-success-sub[b-rdaa5ruy3y], .nd-topup-success-balance[b-rdaa5ruy3y]{
animation: none;
}
}