/*
 * auth-designs.css — login / signup designs (setting auth_design, App\Support\AuthDesigns).
 * One class on .auth-page: auth-d-classic | glass | soft | portal | bold | wave. Same markup, only looks change.
 * Every colour comes from the theme (--brand-primary / --brand-secondary), so each design follows the admin colours.
 * Also: the desktop showcase (.sc-*: phone with a live mini dashboard, team network, feature tiles).
 */

/* ---------- Shared ---------- */
.auth-page { position: relative; isolation: isolate; }
.auth-page > .auth-brand, .auth-page > .auth-main { position: relative; z-index: 1; }
.auth-bg, .auth-band, .auth-emblem-wrap, .auth-badge, .field-icon { display: none; }
.auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-bg > * { position: absolute; display: block; }
.auth-orb { border-radius: 50%; will-change: transform; animation: ad-drift 22s ease-in-out infinite alternate; }
.auth-grain {
  inset: 0; animation: ad-twinkle 5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 18%, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 22% 62%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.4px 1.4px at 37% 28%, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 48% 84%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 61% 12%, rgba(255, 255, 255, .65), transparent), radial-gradient(1px 1px at 72% 48%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.4px 1.4px at 86% 26%, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 93% 72%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 15% 90%, rgba(255, 255, 255, .55), transparent), radial-gradient(1px 1px at 55% 55%, rgba(255, 255, 255, .45), transparent);
}
.auth-accent { color: inherit; }

/* Card designs (everything except Classic): centred card, centred heading, icons inside the fields */
.auth-page:not(.auth-d-classic) .auth-card h1,
.auth-page:not(.auth-d-classic) .auth-card > .auth-sub { text-align: center; }
.auth-page:not(.auth-d-classic) .auth-card h1 { font-size: clamp(1.7rem, 6vw, 2.15rem); }
.auth-page:not(.auth-d-classic) .auth-card .form-control,
.auth-page:not(.auth-d-classic) .auth-card .form-select {
  background-color: var(--f-bg, var(--surface-1)); border: var(--f-bw, 1px) solid var(--f-border, var(--border));
  border-radius: var(--f-radius, 12px); color: var(--f-text, var(--text-strong));
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-page:not(.auth-d-classic) .auth-card .form-control:focus,
.auth-page:not(.auth-d-classic) .auth-card .form-select:focus { border-color: var(--f-focus, var(--brand-primary)); box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), .18); }
.auth-page:not(.auth-d-classic) .auth-card .input-group > .form-floating > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.auth-page:not(.auth-d-classic) .auth-card .input-group > .btn { border-radius: 0 var(--f-radius, 12px) var(--f-radius, 12px) 0; }
.auth-page:not(.auth-d-classic) .field-icon { display: block; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); z-index: 4; color: var(--f-icon, var(--text-muted)); font-size: 1.05rem; line-height: 1; pointer-events: none; }
.auth-page:not(.auth-d-classic) .has-icon > .form-control { padding-left: 2.85rem; }
.auth-page:not(.auth-d-classic) .has-icon > label { padding-left: 2.85rem; }
.auth-page:not(.auth-d-classic) .password-toggle { color: var(--f-icon, var(--text-muted)); }
.auth-page:not(.auth-d-classic) .auth-card .btn-lg { border-radius: var(--f-radius, 12px); font-weight: 700; }
.auth-page:not(.auth-d-classic) .auth-emblem-wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.auth-emblem { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-heading); font-weight: 800; overflow: hidden; }
.auth-emblem img { max-width: 78%; max-height: 62%; object-fit: contain; display: block; }
.auth-emblem .emblem-dark { display: none; }
[data-bs-theme="dark"] .auth-emblem.has-img .emblem-light { display: none; }
[data-bs-theme="dark"] .auth-emblem.has-img .emblem-dark { display: block; }
.auth-emblem-name { font-family: var(--font-heading); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; color: var(--text-strong); }

/* Labels above the fields (Soft, Portal, Bold) */
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .form-floating { display: flex; flex-direction: column; }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .form-floating > label {
  position: static; order: -1; align-self: flex-start; width: auto; height: auto; padding: 0 0 .4rem !important; border: 0; text-align: left;
  transform: none !important; opacity: 1; white-space: normal; overflow: visible;
  font-size: .875rem; font-weight: 600; color: var(--f-label, var(--text-strong)) !important;
}
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .form-floating > .form-control {
  height: var(--f-height, 50px) !important; min-height: var(--f-height, 50px) !important; padding: .5rem 1rem !important;
}
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .has-icon > .form-control { padding-left: 2.85rem !important; }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .has-toggle > .form-control { padding-right: 2.9rem !important; }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .field-icon,
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .field-lock { top: auto; bottom: calc(var(--f-height, 50px) / 2); transform: translateY(50%); }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .password-toggle { top: auto; bottom: 0; height: var(--f-height, 50px); }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .phone-row { align-items: end; }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .phone-row .form-select { height: var(--f-height, 50px); }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .input-group { align-items: flex-end; }
:is(.auth-d-soft, .auth-d-portal, .auth-d-bold) .auth-card .input-group > .btn { height: var(--f-height, 50px); }

/* ---------- Classic: brand panel with the showcase (form side unchanged) ---------- */
.auth-d-classic .auth-brand-body { width: 100%; max-width: 32rem; }
.auth-d-classic .auth-brand h2 { font-size: clamp(1.7rem, 2.3vw, 2.3rem); }

/* ---------- Glass ---------- */
.auth-d-glass {
  --f-bg: rgba(255, 255, 255, .07); --f-border: rgba(255, 255, 255, .18); --f-text: #ffffff; --f-radius: 14px;
  --f-focus: rgba(var(--brand-primary-rgb), .95); --f-icon: rgba(255, 255, 255, .78);
  background: #05060c; color: #e8ecf4;
}
.auth-d-glass .auth-bg { display: block; background: radial-gradient(70% 55% at 50% 110%, rgba(var(--brand-primary-rgb), .38), transparent 60%), linear-gradient(180deg, #080915, #04050a); }
.auth-d-glass .o1 { width: 62vmax; height: 62vmax; top: -26vmax; left: -18vmax; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .75), transparent 66%); }
.auth-d-glass .o2 { width: 52vmax; height: 52vmax; bottom: -22vmax; right: -16vmax; background: radial-gradient(circle, rgba(var(--brand-secondary-rgb), .7), transparent 66%); animation-duration: 28s; animation-direction: alternate-reverse; }
.auth-d-glass .o3 { width: 30vmax; height: 30vmax; top: 32%; left: 46%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%); animation-duration: 17s; }
@media (min-width: 992px) { .auth-d-glass.auth-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-d-glass .auth-brand { background: none; }
.auth-d-glass .auth-brand::after { display: none; }
.auth-d-glass .auth-top { display: none; }
.auth-d-glass .auth-card {
  position: relative; max-width: 440px; padding: 2.1rem 1.5rem 1.6rem; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 50px -10px rgba(var(--brand-primary-rgb), .45);
  animation: ad-rise .7s cubic-bezier(.2, .9, .3, 1) both;
}
.auth-d-glass .auth-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(140deg, rgba(var(--brand-secondary-rgb), .95), transparent 32%, transparent 68%, rgba(var(--brand-primary-rgb), 1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (min-width: 576px) { .auth-d-glass .auth-card { padding: 2.4rem 2.2rem 1.9rem; } }
.auth-d-glass .auth-emblem {
  width: 84px; height: 84px; border-radius: 50%; color: #ffffff; font-size: 2.1rem;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 42px rgba(var(--brand-primary-rgb), .7);
  animation: ad-glow 3.5s ease-in-out infinite alternate;
}
.auth-d-glass .auth-emblem.has-img { background: rgba(255, 255, 255, .1); }
.auth-d-glass .auth-emblem-name { color: #ffffff; }
.auth-d-glass .auth-card h1 { color: #ffffff; }
.auth-d-glass .auth-card .auth-sub, .auth-d-glass .auth-switch { color: rgba(255, 255, 255, .74); }
.auth-d-glass .auth-card .form-floating > label { color: rgba(255, 255, 255, .7); }
.auth-d-glass .auth-card a, .auth-d-glass .auth-card .btn-link { color: color-mix(in srgb, var(--brand-primary) 45%, #ffffff); }
.auth-d-glass .auth-card .btn-primary {
  border: 0; background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); color: #ffffff;
  box-shadow: 0 12px 30px -8px rgba(var(--brand-primary-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.auth-d-glass .auth-card .btn-primary:hover { filter: brightness(1.08); }
.auth-d-glass .auth-card .btn-outline-secondary,
.auth-d-wave .auth-card .btn-outline-secondary { border-radius: var(--f-radius, 12px); }
.auth-d-glass .auth-card .btn-outline-secondary { --bs-btn-bg: rgba(255, 255, 255, .06); --bs-btn-color: #ffffff; --bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-color: #ffffff; --bs-btn-hover-border-color: rgba(255, 255, 255, .3); }
.auth-d-glass .divider-text { color: rgba(255, 255, 255, .55); }
.auth-d-glass .divider-text::before, .auth-d-glass .divider-text::after { background: rgba(255, 255, 255, .18); }
.auth-d-glass .auth-foot { color: rgba(255, 255, 255, .5); }

/* ---------- Soft light ---------- */
.auth-d-soft {
  --f-bg: #f8fafc; --f-border: #dbe2ea; --f-text: #0f172a; --f-label: #0f172a; --f-radius: 12px; --f-icon: #64748b; --f-height: 50px;
  background: #f7f8fa;
}
.auth-d-soft .auth-bg { display: block; background: #f7f8fa; }
.auth-d-soft .o1 { width: 48vmax; height: 48vmax; top: -24vmax; left: -24vmax; background: radial-gradient(circle at 70% 70%, rgba(var(--brand-primary-rgb), .38), rgba(var(--brand-primary-rgb), .08) 58%, transparent 70%); animation: ad-breathe 9s ease-in-out infinite alternate; }
.auth-d-soft .o2 { width: 42vmax; height: 42vmax; bottom: -19vmax; right: -17vmax; background: radial-gradient(circle at 30% 30%, rgba(var(--brand-primary-rgb), .42), rgba(var(--brand-primary-rgb), .1) 58%, transparent 70%); animation: ad-breathe 11s ease-in-out infinite alternate-reverse; }
.auth-d-soft .o3 { width: 18vmax; height: 18vmax; top: 16%; right: 6%; background: radial-gradient(circle, rgba(var(--brand-secondary-rgb), .22), transparent 70%); }
.auth-d-soft.auth-page, .auth-d-portal.auth-page, .auth-d-wave.auth-page { grid-template-columns: minmax(0, 1fr); }
.auth-d-soft .auth-brand, .auth-d-portal .auth-brand, .auth-d-wave .auth-brand { display: none; }
.auth-d-soft .auth-top { display: none; }
.auth-d-soft .auth-card { max-width: 440px; animation: ad-rise .6s ease-out both; }
.auth-d-soft .auth-emblem { width: 76px; height: 76px; border-radius: 22px; background: var(--brand-primary); color: var(--brand-primary-contrast); font-size: 2rem; box-shadow: 0 16px 32px -12px rgba(var(--brand-primary-rgb), .7); }
.auth-d-soft .auth-emblem.has-img { background: #ffffff; border: 1px solid #e8edf2; }
.auth-d-soft .auth-card h1 { color: #0f172a; margin-top: .25rem; }
.auth-d-soft .auth-card > .auth-sub { color: #64748b; }
.auth-d-soft .auth-card > form:not(.auth-switch) { background: #ffffff; border: 1px solid #eef1f5; border-radius: 22px; padding: 1.5rem 1.3rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 26px 60px -26px rgba(15, 23, 42, .22); }
@media (min-width: 576px) { .auth-d-soft .auth-card > form:not(.auth-switch) { padding: 1.75rem 1.75rem 1.6rem; } }
.auth-d-soft .auth-card .btn-primary { box-shadow: 0 14px 26px -12px rgba(var(--brand-primary-rgb), .75); }
.auth-d-soft .auth-card .btn-outline-secondary { --bs-btn-bg: #ffffff; --bs-btn-border-color: #dbe2ea; --bs-btn-color: #0f172a; --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-color: #0f172a; --bs-btn-hover-border-color: #cbd5e1; border-radius: 12px; }

/* ---------- Portal ---------- */
.auth-d-portal {
  --f-bg: #121215; --f-border: rgba(var(--brand-primary-rgb), .7); --f-bw: 1.5px; --f-text: #ffffff; --f-label: #f4f4f5;
  --f-radius: 12px; --f-icon: rgba(255, 255, 255, .78); --f-height: 52px;
  --portal-accent: color-mix(in srgb, var(--brand-primary) 78%, #ffffff);
  background: #0a0a0b; color: #e7e7ea;
}
.auth-d-portal .auth-bg { display: block; background: #0a0a0b; }
.auth-d-portal .o1 { width: 56vmax; height: 56vmax; top: -24vmax; left: -22vmax; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .55), transparent 64%); }
.auth-d-portal .o2 { width: 34vmax; height: 34vmax; top: 30%; right: -14vmax; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .42), transparent 64%); animation-duration: 18s; animation-direction: alternate-reverse; }
.auth-d-portal .o3 { width: 44vmax; height: 44vmax; bottom: -26vmax; left: 10%; background: radial-gradient(circle, rgba(var(--brand-secondary-rgb), .3), transparent 64%); animation-duration: 26s; }
.auth-d-portal .auth-ring { width: 80vmax; height: 80vmax; right: -40vmax; bottom: -62vmax; border-radius: 50%; border: 2px solid rgba(var(--brand-primary-rgb), .55); box-shadow: 0 0 60px rgba(var(--brand-primary-rgb), .35), inset 0 0 60px rgba(var(--brand-primary-rgb), .2); animation: ad-breathe 8s ease-in-out infinite alternate; }
.auth-d-portal .auth-top .brand-logo { color: #ffffff; }
.auth-d-portal .auth-card {
  max-width: 440px; padding: 2rem 1.4rem 1.6rem; border-radius: 24px;
  background: rgba(18, 18, 20, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--brand-primary-rgb), .55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px -24px rgba(var(--brand-primary-rgb), .75);
  animation: ad-rise .6s ease-out both;
}
@media (min-width: 576px) { .auth-d-portal .auth-card { padding: 2.3rem 2rem 1.9rem; } }
.auth-page.auth-d-portal .auth-emblem-wrap, .auth-page.auth-d-wave .auth-emblem-wrap { display: none; }
.auth-d-portal .auth-badge {
  display: flex; align-items: center; gap: .45rem; width: max-content; margin: 0 auto 1.15rem; padding: .42rem 1rem;
  border: 1.5px solid var(--portal-accent); border-radius: var(--radius-pill); color: var(--portal-accent);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 20px -6px rgba(var(--brand-primary-rgb), .8);
}
.auth-d-portal .auth-card h1 { color: #ffffff; font-size: clamp(1.9rem, 7vw, 2.4rem); }
.auth-d-portal .auth-accent { color: var(--portal-accent); }
.auth-d-portal .auth-card .auth-sub, .auth-d-portal .auth-switch { color: rgba(255, 255, 255, .72); }
.auth-d-portal .auth-card .form-control { box-shadow: 0 0 16px -8px rgba(var(--brand-primary-rgb), .8); }
.auth-d-portal .auth-card a, .auth-d-portal .auth-card .btn-link { color: var(--portal-accent); }
.auth-d-portal .auth-card .btn-primary.btn-lg {
  position: relative; border: 0; border-radius: var(--radius-pill); text-align: left; padding-left: 1.6rem; padding-right: 3.6rem; font-size: 1.1rem; color: #ffffff;
  background: linear-gradient(90deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 72%, #ffffff));
  box-shadow: 0 16px 34px -12px rgba(var(--brand-primary-rgb), .9);
}
.auth-d-portal .auth-card .btn-primary.btn-lg::after {
  content: "\F138"; font-family: "bootstrap-icons"; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #ffffff; color: #111111; font-size: 1.15rem; transition: transform .2s ease;
}
.auth-d-portal .auth-card .btn-primary.btn-lg:hover::after { transform: translateX(3px); }
.auth-d-portal .auth-card .btn-outline-secondary { --bs-btn-bg: transparent; --bs-btn-color: #ffffff; --bs-btn-border-color: rgba(255, 255, 255, .22); --bs-btn-hover-bg: rgba(255, 255, 255, .08); --bs-btn-hover-color: #ffffff; --bs-btn-hover-border-color: rgba(255, 255, 255, .35); border-radius: var(--radius-pill); }
.auth-d-portal .divider-text::before, .auth-d-portal .divider-text::after { background: rgba(255, 255, 255, .14); }

/* ---------- Bold ---------- */
.auth-d-bold {
  --f-bg: #ffffff; --f-border: #d6dce4; --f-text: #0f172a; --f-label: #0f172a; --f-radius: 12px; --f-icon: #475569; --f-height: 50px;
  background: #061026; background: color-mix(in srgb, var(--brand-primary) 12%, #040b1c); color: #e6ebf3;
}
.auth-d-bold .auth-bg { display: block; background: radial-gradient(60% 50% at 75% 0%, rgba(var(--brand-primary-rgb), .3), transparent 60%), radial-gradient(50% 40% at 0% 100%, rgba(var(--brand-secondary-rgb), .18), transparent 60%); }
.auth-d-bold .auth-grain { opacity: .6; }
@media (min-width: 992px) { .auth-d-bold.auth-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-d-bold .auth-brand { background: none; }
.auth-d-bold .auth-brand::after { display: none; }
.auth-d-bold .auth-top { display: none; }
.auth-d-bold .auth-card {
  max-width: 430px; padding: 2rem 1.4rem 1.7rem; border-radius: 26px; color: #0f172a;
  background: color-mix(in srgb, var(--brand-primary) 7%, #ffffff);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: ad-rise .6s ease-out both;
}
@media (min-width: 576px) { .auth-d-bold .auth-card { padding: 2.4rem 2.1rem 2rem; } }
.auth-d-bold .auth-emblem { width: 80px; height: 80px; border-radius: 22px; background: var(--brand-primary); color: var(--brand-primary-contrast); font-size: 2.1rem; box-shadow: 0 14px 30px -12px rgba(var(--brand-primary-rgb), .8); }
.auth-d-bold .auth-emblem.has-img { background: #ffffff; }
.auth-d-bold .auth-card h1 { color: #0f172a; }
.auth-d-bold .auth-card > .auth-sub, .auth-d-bold .auth-switch { color: #64748b; }
.auth-d-bold .auth-card .btn-primary { box-shadow: 0 14px 28px -14px rgba(var(--brand-primary-rgb), .9); }
.auth-d-bold .auth-card .btn-outline-secondary { --bs-btn-bg: #ffffff; --bs-btn-border-color: #d6dce4; --bs-btn-color: #0f172a; --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-color: #0f172a; border-radius: 12px; }
.auth-d-bold .auth-foot { color: rgba(255, 255, 255, .5); }

/* ---------- Wave ---------- */
.auth-d-wave { --f-bg: var(--surface-2); --f-border: var(--border); --f-radius: 14px; background: var(--surface-0); }
.auth-d-wave .auth-main { padding: 0 0 max(1rem, env(safe-area-inset-bottom)); }
.auth-d-wave .auth-band {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 300px; padding: 3rem 1.5rem calc(92px + 1.5rem); text-align: center; color: #ffffff; /* bottom padding = card overlap + gap, so the tagline never slides under the card */
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 79px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V40C1200 86 960 86 720 46S240 0 0 40Z'/%3E%3C/svg%3E") bottom / 100% 80px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 79px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V40C1200 86 960 86 720 46S240 0 0 40Z'/%3E%3C/svg%3E") bottom / 100% 80px no-repeat;
}
@media (min-width: 992px) { .auth-d-wave .auth-band { min-height: 46vh; padding: 2.5rem 1.5rem calc(130px + 2rem); } }
.auth-d-wave .auth-band .brand-logo { position: relative; color: #ffffff; font-size: 1.35rem; }
.auth-d-wave .auth-band .brand-logo img { max-height: 46px; }
.auth-d-wave .auth-band .brand-mark { background: rgba(255, 255, 255, .2); color: #ffffff; }
.auth-d-wave .auth-band p { position: relative; margin: 0; max-width: 24rem; color: rgba(255, 255, 255, .88); font-weight: 500; }
.band-bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); animation: ad-float 9s ease-in-out infinite alternate; }
.band-bubble.b1 { width: 160px; height: 160px; top: -50px; left: -40px; }
.band-bubble.b2 { width: 90px; height: 90px; top: 30%; right: 8%; animation-duration: 7s; animation-direction: alternate-reverse; }
.band-bubble.b3 { width: 50px; height: 50px; bottom: 34%; left: 22%; animation-duration: 11s; }
.auth-d-wave .auth-top { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 3; }
.auth-d-wave .auth-top .brand-logo { display: none; }
.auth-d-wave .auth-top .btn { color: #ffffff; }
.auth-d-wave .auth-card {
  position: relative; z-index: 2; width: calc(100% - 2.5rem); max-width: 440px; margin: -92px auto 0; padding: 1.6rem 1.35rem;
  border-radius: 24px; background: var(--surface-1); box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .35), 0 0 0 1px var(--border);
  animation: ad-rise .6s ease-out both;
}
@media (min-width: 576px) { .auth-d-wave .auth-card { padding: 2rem 1.9rem; } }
@media (min-width: 992px) { .auth-d-wave .auth-card { margin-top: -130px; } }
.auth-d-wave .auth-card .btn-primary { border: 0; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 14px 28px -14px rgba(var(--brand-primary-rgb), .9); }
.auth-d-wave .auth-foot { margin-top: 1rem; padding: 0 1rem; }

/* ---------- Showcase (desktop brand panel) ---------- */
.sc-stage { position: relative; height: clamp(300px, 50vh, 460px); margin-top: 2rem; }
.sc-phone {
  position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 9 / 18.6; translate: -50% 0;
  padding: 3.2%; border-radius: 13% / 6.3%; background: #05080a; container-type: inline-size;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 80px -24px rgba(0, 0, 0, .7), 0 0 70px -12px rgba(var(--brand-primary-rgb), .5);
  animation: sc-float 7s ease-in-out infinite;
}
.sc-notch { position: absolute; z-index: 2; top: 3.2%; left: 50%; translate: -50% 0; width: 32%; height: 3.2%; border-radius: 0 0 12px 12px; background: #05080a; }
.sc-screen { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 4.4cqw; padding: 13cqw 6cqw 0; border-radius: 11% / 5.4%; background: linear-gradient(180deg, #101a1e, #0b1215); color: #e8eef0; font-size: 4.4cqw; text-align: left; }
.sc-top { display: flex; align-items: center; gap: 3cqw; }
.sc-top b { display: block; font-size: 4.4cqw; }
.sc-top small { display: block; color: rgba(255, 255, 255, .55); font-size: 3.4cqw; }
.sc-top > i { margin-left: auto; font-size: 5.4cqw; color: rgba(255, 255, 255, .7); }
.sc-avatar { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: var(--brand-primary-contrast); font-weight: 800; font-size: 4.4cqw; }
.sc-balance { position: relative; overflow: hidden; padding: 5cqw 5cqw 0; border-radius: 6cqw; background: radial-gradient(120% 140% at 100% 0%, rgba(var(--brand-primary-rgb), .9), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--brand-primary) 50%, #0b1215), #0b1215); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sc-balance small { color: rgba(255, 255, 255, .72); font-size: 3.4cqw; }
.sc-balance strong { display: block; margin: 1cqw 0; font-family: var(--font-heading); font-size: 9.4cqw; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #ffffff; }
.sc-up { font-size: 3.4cqw; color: #86efac; }
.sc-spark { display: block; width: calc(100% + 10cqw); height: 13cqw; margin: 2cqw -5cqw 0; }
.sc-spark path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: sc-draw 2.2s .4s ease-out forwards; }
.sc-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; text-align: center; font-size: 3.1cqw; color: rgba(255, 255, 255, .72); }
.sc-actions span { display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; }
.sc-actions i { width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #ffffff; font-size: 4.6cqw; }
.sc-actions span:first-child i { background: var(--brand-primary); border-color: transparent; color: var(--brand-primary-contrast); box-shadow: 0 0 16px rgba(var(--brand-primary-rgb), .7); }
.sc-list { display: flex; flex-direction: column; gap: 2.4cqw; }
.sc-row { display: flex; align-items: center; gap: 3cqw; padding: 3cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); opacity: 0; animation: sc-in .6s var(--d) ease-out forwards, sc-blink 6s calc(var(--d) + 1.5s) ease-in-out infinite; }
.sc-row > i { width: 9cqw; height: 9cqw; flex-shrink: 0; border-radius: 3cqw; display: grid; place-items: center; background: rgba(var(--brand-primary-rgb), .25); color: #ffffff; font-size: 4.2cqw; }
.sc-row b { display: block; font-size: 3.7cqw; }
.sc-row small { display: block; color: rgba(255, 255, 255, .5); font-size: 3cqw; }
.sc-row em { margin-left: auto; font-style: normal; font-weight: 700; color: #4ade80; font-size: 3.7cqw; }
.sc-nav { display: flex; justify-content: space-around; align-items: center; margin: auto -6cqw 0; padding: 3.5cqw 4cqw 5cqw; background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); font-size: 5cqw; }
.sc-nav i:first-child { color: #ffffff; }
.sc-nav i:nth-child(3) { color: var(--brand-primary); font-size: 8cqw; }
.sc-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem .55rem .55rem;
  border-radius: 14px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
  color: #ffffff; font-size: .75rem; line-height: 1.25; white-space: nowrap; text-align: left;
  animation: sc-pop .6s ease-out both, sc-bob 6s ease-in-out infinite;
}
.sc-chip > i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--brand-primary); color: var(--brand-primary-contrast); font-size: .95rem; }
.sc-chip b { display: block; font-size: .8125rem; }
.sc-chip small { display: block; color: rgba(255, 255, 255, .66); }
.sc-login .c1 { top: 12%; left: 0; animation-delay: .8s, 0s; }
.sc-login .c2 { top: 46%; right: 0; animation-delay: 1.1s, -2s; }
.sc-login .c3 { bottom: 9%; left: 4%; animation-delay: 1.4s, -4s; }
@media (max-height: 720px) { .sc-login .c2 { display: none; } }

.sc-network { height: auto; }
.sc-tree { display: block; width: 100%; height: auto; overflow: visible; color: var(--brand-primary); }
.sc-link { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-dasharray: 260; stroke-dashoffset: 260; animation: sc-draw 1.2s var(--d) ease-out forwards; }
.sc-pulse { fill: #ffffff; filter: drop-shadow(0 0 4px var(--brand-primary)) drop-shadow(0 0 2px #ffffff); }
.sc-node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sc-node .55s var(--d) cubic-bezier(.2, 1.4, .4, 1) forwards; }
.sc-node circle { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.sc-node.root circle { fill: var(--brand-primary); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.sc-node.l1 circle { fill: rgba(var(--brand-primary-rgb), .45); }
.sc-node text { fill: #ffffff; font: 700 12px var(--font-heading); text-anchor: middle; }
.sc-node.root text { fill: var(--brand-primary-contrast); font-size: 13px; }
.sc-root-glow { animation: sc-glow 3s ease-in-out infinite alternate; }
.sc-network .sc-chip.c1 { top: -2%; left: -2%; animation-delay: 1.8s, 0s; }
.sc-network .sc-chip.c2 { top: 58%; right: -4%; animation-delay: 2.1s, -2s; }
.sc-network .sc-chip.c3 { top: -2%; right: -2%; animation-delay: 2.4s, -4s; }
.sc-pulse { opacity: 0; animation: sc-show .4s 1.4s forwards; }
.sc-steps { display: flex; gap: .5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.sc-steps li { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .86); font-size: .8rem; line-height: 1.2; opacity: 0; animation: sc-in .5s ease-out forwards; }
.sc-steps li:nth-child(1) { animation-delay: 1.6s; }
.sc-steps li:nth-child(2) { animation-delay: 1.8s; }
.sc-steps li:nth-child(3) { animation-delay: 2s; }
.sc-steps span { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: var(--brand-primary-contrast); font-weight: 700; font-size: .75rem; }

.sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 2rem; }
.sc-tile { display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; animation: sc-in .6s var(--d) ease-out forwards; transition: transform .25s ease, border-color .25s ease; }
.sc-tile:hover { transform: translateY(-3px); border-color: rgba(var(--brand-primary-rgb), .6); }
.sc-tile i { width: 44px; height: 44px; margin-bottom: .45rem; border-radius: 13px; display: grid; place-items: center; background: var(--brand-primary); color: var(--brand-primary-contrast); font-size: 1.25rem; box-shadow: 0 10px 24px -8px rgba(var(--brand-primary-rgb), .8); }
.sc-tile b { color: #ffffff; }
.sc-tile small { color: rgba(255, 255, 255, .62); }

/* ---------- Motion (kept on every device, like the rest of the site) ---------- */
@keyframes ad-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes ad-breathe { from { transform: scale(1); opacity: .85; } to { transform: scale(1.08); opacity: 1; } }
@keyframes ad-float { from { transform: translateY(0); } to { transform: translateY(-16px); } }
@keyframes ad-twinkle { from { opacity: .35; } to { opacity: .9; } }
@keyframes ad-glow { from { box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 30px rgba(var(--brand-primary-rgb), .5); } to { box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 0 56px rgba(var(--brand-primary-rgb), .85); } }
@keyframes ad-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sc-pop { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@keyframes sc-node { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes sc-glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes sc-blink { 0%, 86%, 100% { background: rgba(255, 255, 255, .05); } 92% { background: rgba(var(--brand-primary-rgb), .22); } }
@keyframes sc-show { to { opacity: 1; } }