/* ========================================================================== AUTH V4 — atmospheric overlay for login + register Activation: (explicit opt-in per page) Builds on: 45-modern-premium.css (v2 design tokens incl. --mb-* atmosphere primitives added in Phase 1) and 47-design-refinement.css. This file is purely additive — it overlays V4 atmosphere on top of the existing .al-* (login) and .reg-* (register) class systems without touching the inline styles in the HTML. ========================================================================== */ /* ─────────── BODY — cinematic V4 backdrop ─────────── */ html[data-design="v2"] body.auth-v4 { background: var(--mb-atmosphere) !important; position: relative; isolation: isolate; } /* Subtle drifting luminous dust — matches V4 hero ambient feel */ html[data-design="v2"] body.auth-v4::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(2px 2px at 12% 28%, var(--mb-cyan-soft), transparent 60%), radial-gradient(2px 2px at 28% 78%, var(--mb-violet-soft), transparent 60%), radial-gradient(2px 2px at 62% 18%, var(--mb-champagne-soft), transparent 60%), radial-gradient(2px 2px at 86% 56%, var(--mb-cyan-soft), transparent 60%), radial-gradient(2px 2px at 44% 50%, rgba(14,143,131,.85), transparent 60%); filter: blur(.6px); opacity: .45; animation: auth-v4-drift 32s linear infinite; } @keyframes auth-v4-drift { 0% { transform: translate3d(0, 0, 0); opacity: .35; } 50% { opacity: .55; } 100% { transform: translate3d(28px, -52px, 0); opacity: .35; } } @media (prefers-reduced-motion: reduce) { html[data-design="v2"] body.auth-v4::after { animation: none; opacity: .35; } } /* ─────────── REGISTER NAV — sticky glass ─────────── */ html[data-design="v2"] body.auth-v4 > nav.nav { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(15,23,32,.86), rgba(15,23,32,.58)) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; border-bottom: 1px solid var(--mb-premium-line) !important; } html[data-design="v2"][data-theme="light"] body.auth-v4 > nav.nav { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)) !important; } /* ─────────── LOGIN — left brand panel atmospheric overhaul ─────────── */ html[data-design="v2"] body.auth-v4 .al-left { background: radial-gradient(900px 700px at 18% 30%, rgba(14,143,131,.22), transparent 60%), radial-gradient(800px 600px at 82% 78%, rgba(14,143,131,.18), transparent 60%), radial-gradient(700px 500px at 60% 12%, rgba(14,143,131,.16), transparent 60%), radial-gradient(500px 400px at 40% 90%, rgba(80,214,196,.10), transparent 60%), linear-gradient(160deg, rgba(18,34,48,.92), rgba(15,23,32,.78) 60%, rgba(20,12,38,.50)) !important; position: relative; overflow: hidden; } html[data-design="v2"][data-theme="light"] body.auth-v4 .al-left { background: radial-gradient(900px 700px at 18% 30%, rgba(14,143,131,.16), transparent 60%), radial-gradient(800px 600px at 82% 78%, rgba(14,143,131,.12), transparent 60%), radial-gradient(700px 500px at 60% 12%, rgba(124,108,200,.14), transparent 60%), radial-gradient(500px 400px at 40% 90%, rgba(14,143,131,.08), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.96), rgba(247,249,252,.78) 60%, rgba(238,244,250,.78)) !important; } /* Hide the legacy deco circles — replaced by the radial atmosphere above */ html[data-design="v2"] body.auth-v4 .al-deco-circle { display: none !important; } /* Subtle grid mask on the brand panel */ html[data-design="v2"] body.auth-v4 .al-left::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--mb-grid) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--mb-grid) 1px, transparent 1px) 0 0 / 64px 64px; mask-image: radial-gradient(900px 700px at 50% 50%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(900px 700px at 50% 50%, #000 30%, transparent 78%); pointer-events: none; opacity: .55; z-index: 0; } html[data-design="v2"] body.auth-v4 .al-left-inner { position: relative; z-index: 1; } /* Login: typography polish on the hero */ html[data-design="v2"] body.auth-v4 .al-headline { font-family: "Inter", system-ui, sans-serif !important; font-weight: 900; letter-spacing: -.028em; line-height: 1.0; } html[data-design="v2"] body.auth-v4 .al-headline span { background: linear-gradient(120deg, var(--mb-premium-blue-2), var(--mb-cyan-soft) 70%, var(--mb-violet-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-design="v2"] body.auth-v4 .al-badge { background: linear-gradient(135deg, rgba(14,143,131,.10), rgba(14,143,131,.05)); border: 1px solid var(--mb-premium-line-strong); color: var(--mb-cyan-soft); letter-spacing: .22em; text-transform: uppercase; font-weight: 800; font-size: 11px; padding: 7px 16px; border-radius: 8px; backdrop-filter: blur(10px); } html[data-design="v2"][data-theme="light"] body.auth-v4 .al-badge { color: var(--mb-cyan); } /* Login feature icons — soft glow */ html[data-design="v2"] body.auth-v4 .al-feat-ic { background: linear-gradient(135deg, rgba(14,143,131,.14), rgba(14,143,131,.08)) !important; border: 1px solid var(--mb-premium-line-strong) !important; color: var(--mb-cyan-soft) !important; box-shadow: 0 0 18px rgba(14,143,131,.18); } html[data-design="v2"][data-theme="light"] body.auth-v4 .al-feat-ic { color: var(--mb-cyan) !important; } /* ─────────── AUTH CARD GLASS — login right panel + register card ─────────── */ html[data-design="v2"] body.auth-v4 .al-right, html[data-design="v2"] body.auth-v4 .reg-card { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)) !important; backdrop-filter: blur(22px) saturate(160%) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; border: 1px solid var(--mb-premium-line-strong) !important; border-radius: 12px !important; box-shadow: var(--mb-shadow-deep), var(--mb-shadow-emerald), 0 0 90px rgba(14,143,131,.12), inset 0 1px 0 rgba(255,255,255,.06) !important; } html[data-design="v2"][data-theme="light"] body.auth-v4 .al-right, html[data-design="v2"][data-theme="light"] body.auth-v4 .reg-card { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(247,249,252,.78)) !important; box-shadow: var(--mb-shadow-deep), var(--mb-shadow-emerald), inset 0 1px 0 rgba(255,255,255,.6) !important; } /* Register: cinematic hero typography */ html[data-design="v2"] body.auth-v4 .reg-h { font-family: "Inter", system-ui, sans-serif !important; font-weight: 900; letter-spacing: -.028em; line-height: 1.02; font-size: clamp(28px, 4.4vw, 56px); } html[data-design="v2"] body.auth-v4 .reg-h .acc { background: linear-gradient(120deg, var(--mb-premium-blue-2), var(--mb-cyan-soft) 70%, var(--mb-violet-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-design="v2"] body.auth-v4 .reg-sub { color: var(--mb-premium-text-2); font-size: clamp(14.5px, 1.3vw, 16px); } html[data-design="v2"] body.auth-v4 .trial-badge { background: linear-gradient(135deg, rgba(14,143,131,.12), rgba(14,143,131,.06)) !important; border: 1px solid var(--mb-premium-line-strong) !important; color: var(--mb-cyan-soft) !important; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; font-size: 11px; padding: 8px 18px; border-radius: 8px; backdrop-filter: blur(10px); } html[data-design="v2"][data-theme="light"] body.auth-v4 .trial-badge { color: var(--mb-cyan) !important; } /* ─────────── INPUTS — V4 focus halo (3-color drop) ─────────── */ html[data-design="v2"] body.auth-v4 .field-input, html[data-design="v2"] body.auth-v4 input[type="text"], html[data-design="v2"] body.auth-v4 input[type="email"], html[data-design="v2"] body.auth-v4 input[type="password"], html[data-design="v2"] body.auth-v4 input[type="tel"], html[data-design="v2"] body.auth-v4 input[type="search"] { border-radius: 12px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } html[data-design="v2"] body.auth-v4 .field-input:focus, html[data-design="v2"] body.auth-v4 input[type="text"]:focus, html[data-design="v2"] body.auth-v4 input[type="email"]:focus, html[data-design="v2"] body.auth-v4 input[type="password"]:focus, html[data-design="v2"] body.auth-v4 input[type="tel"]:focus, html[data-design="v2"] body.auth-v4 input[type="search"]:focus { outline: none; border-color: var(--mb-premium-blue-2); box-shadow: 0 0 0 3px rgba(14,143,131,.20), 0 0 24px rgba(14,143,131,.30), 0 0 48px rgba(14,143,131,.14); } /* ─────────── PRIMARY CTAs — V4 button (lighter than form-submit, premium) ─────────── */ html[data-design="v2"] body.auth-v4 .btn-primary, html[data-design="v2"] body.auth-v4 .btn-submit, html[data-design="v2"] body.auth-v4 button[type="submit"]:not(.btn-google):not(.tseg) { background: linear-gradient(135deg, var(--mb-premium-blue), var(--mb-premium-blue-2) 70%, var(--mb-cyan-soft)); color: #02110C; border: 0; border-radius: 8px; font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: .015em; font-size: 14.5px; padding: 13px 24px; box-shadow: 0 8px 22px rgba(14,143,131,.26), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 22px rgba(14,143,131,.28); transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .26s ease; cursor: pointer; } html[data-design="v2"] body.auth-v4 .btn-primary:hover, html[data-design="v2"] body.auth-v4 .btn-submit:hover, html[data-design="v2"] body.auth-v4 button[type="submit"]:not(.btn-google):not(.tseg):hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(14,143,131,.36), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 36px rgba(14,143,131,.40); } /* Keep Google button on its branded white treatment but match V4 radius + subtle border */ html[data-design="v2"] body.auth-v4 .btn-google { border-radius: 8px !important; border: 1px solid var(--mb-premium-line-strong) !important; backdrop-filter: blur(8px); } /* Login back link / register login link — refined as ghost pill */ html[data-design="v2"] body.auth-v4 .al-back-home, html[data-design="v2"] body.auth-v4 .login-link a { border: 1px solid var(--mb-premium-line); border-radius: 8px; padding: 8px 14px; background: var(--mb-glass); backdrop-filter: blur(10px); transition: border-color .2s ease, background .2s ease; } html[data-design="v2"] body.auth-v4 .al-back-home:hover, html[data-design="v2"] body.auth-v4 .login-link a:hover { border-color: var(--mb-premium-line-strong); background: rgba(14,143,131,.10); } /* OR-separator polish */ html[data-design="v2"] body.auth-v4 .or-sep { color: var(--mb-premium-muted) !important; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 700; } /* Trust row: icon glow */ html[data-design="v2"] body.auth-v4 .al-trust-item svg { color: var(--mb-cyan-soft); filter: drop-shadow(0 0 6px rgba(14,143,131,.5)); } html[data-design="v2"][data-theme="light"] body.auth-v4 .al-trust-item svg { color: var(--mb-cyan); } /* Auth-code 6-digit input (register email-verify) — keep functional, refine glow */ html[data-design="v2"] body.auth-v4 .auth-code-input:focus { border-color: var(--mb-premium-blue-2) !important; box-shadow: 0 0 0 3px rgba(14,143,131,.20), 0 0 28px rgba(14,143,131,.30) !important; } /* ========================================================================== */ /* BLUE GLASS HARDENING - Auth funnels */ /* ========================================================================== */ html[data-design="v2"][data-theme="light"] body.auth-v4{--np:#0e8f83!important;--na:#0e8f83!important;--nb:#0e8f83!important;--ng:#08766e!important;--nv:#0e8f83!important;--bg:#f7faf9!important;--s0:#f7faf9!important;--s1:rgba(255,255,255,.92)!important;--s2:rgba(238,247,244,.82)!important;--s3:rgba(232,247,242,.80)!important;background:radial-gradient(circle at 18% -8%,rgba(14,143,131,.16),transparent 34%),radial-gradient(circle at 88% 8%,rgba(14,143,131,.08),transparent 30%),linear-gradient(145deg,#f8fdfb 0%,#f3faf7 44%,#eef8f6 100%)!important} html[data-design="v2"][data-theme="light"] body.auth-v4 .al-left,html[data-design="v2"][data-theme="light"] body.auth-v4 .reg-hero{background:radial-gradient(900px 600px at 18% 30%,rgba(14,143,131,.18),transparent 60%),radial-gradient(800px 500px at 82% 60%,rgba(14,143,131,.06),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.96),rgba(247,250,248,.86) 62%,rgba(238,247,244,.90))!important} html[data-design="v2"][data-theme="light"] body.auth-v4 .al-right,html[data-design="v2"][data-theme="light"] body.auth-v4 .reg-card,html[data-design="v2"][data-theme="light"] body.auth-v4 .field-input,html[data-design="v2"][data-theme="light"] body.auth-v4 .btn-google{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72)),linear-gradient(120deg,rgba(14,143,131,.065),transparent 52%)!important;border-color:rgba(37,50,61,.12)!important;box-shadow:0 18px 52px rgba(25,39,54,.09)!important} html[data-design="v2"][data-theme="light"] body.auth-v4 .al-badge,html[data-design="v2"][data-theme="light"] body.auth-v4 .trial-badge,html[data-design="v2"][data-theme="light"] body.auth-v4 .al-feat-ic{background:rgba(14,143,131,.12)!important;border-color:rgba(14,143,131,.26)!important;color:#0e8f83!important} html[data-design="v2"][data-theme="light"] body.auth-v4 .btn-primary,html[data-design="v2"][data-theme="light"] body.auth-v4 .btn-submit,html[data-design="v2"][data-theme="light"] body.auth-v4 button[type="submit"]:not(.btn-google):not(.tseg){background:linear-gradient(135deg,#0e8f83,#08766e)!important;color:#fff!important;box-shadow:0 16px 34px rgba(14,143,131,.18)!important} html[data-design="v2"][data-theme="light"] body.auth-v4 .field-input:focus,html[data-design="v2"][data-theme="light"] body.auth-v4 input:focus{border-color:rgba(14,143,131,.58)!important;box-shadow:0 0 0 4px rgba(14,143,131,.16)!important} /* ========================================================================== AUTH FIRST PAINT LIGHT FALLBACK These defaults keep light mode stable during first paint. Dark mode is restored below with explicit higher-specificity overrides. ========================================================================== */ html[data-design="v2"] body.auth-v4 { --np: #0e8f83 !important; --na: #08766e !important; --nb: #0e8f83 !important; --ng: #08766e !important; --nv: #0e8f83 !important; --bg: #f7faf9 !important; --s0: #f7faf9 !important; --s1: rgba(255,255,255,.94) !important; --s2: rgba(238,247,244,.84) !important; --s3: rgba(232,247,242,.82) !important; color-scheme: light; background: radial-gradient(circle at 18% -8%, rgba(14,143,131,.16), transparent 34%), radial-gradient(circle at 88% 8%, rgba(14,143,131,.08), transparent 30%), linear-gradient(145deg, #f8fdfb 0%, #f3faf7 44%, #eef8f6 100%) !important; } html[data-design="v2"] body.auth-v4::after { background: radial-gradient(2px 2px at 12% 28%, rgba(14,143,131,.20), transparent 60%), radial-gradient(2px 2px at 28% 78%, rgba(80,214,196,.16), transparent 60%), radial-gradient(2px 2px at 62% 18%, rgba(14,143,131,.14), transparent 60%), radial-gradient(2px 2px at 86% 56%, rgba(80,214,196,.18), transparent 60%), radial-gradient(2px 2px at 44% 50%, rgba(14,143,131,.20), transparent 60%) !important; opacity: .36; } html[data-design="v2"] body.auth-v4 > nav.nav { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)) !important; border-bottom-color: rgba(14,143,131,.14) !important; box-shadow: 0 16px 40px rgba(25,39,54,.07) !important; } html[data-design="v2"] body.auth-v4 .al-left, html[data-design="v2"] body.auth-v4 .reg-hero { background: radial-gradient(900px 600px at 18% 30%, rgba(14,143,131,.18), transparent 60%), radial-gradient(800px 500px at 82% 60%, rgba(80,214,196,.10), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.96), rgba(247,250,248,.86) 62%, rgba(238,247,244,.90)) !important; } html[data-design="v2"] body.auth-v4 .al-right, html[data-design="v2"] body.auth-v4 .reg-card, html[data-design="v2"] body.auth-v4 .field-input, html[data-design="v2"] body.auth-v4 .auth-code-input, html[data-design="v2"] body.auth-v4 input[type="text"], html[data-design="v2"] body.auth-v4 input[type="email"], html[data-design="v2"] body.auth-v4 input[type="password"], html[data-design="v2"] body.auth-v4 input[type="tel"], html[data-design="v2"] body.auth-v4 input[type="search"], html[data-design="v2"] body.auth-v4 .btn-google { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)), linear-gradient(120deg, rgba(14,143,131,.065), transparent 52%) !important; border-color: rgba(37,50,61,.12) !important; box-shadow: 0 18px 52px rgba(25,39,54,.09) !important; color: #11161b !important; } html[data-design="v2"] body.auth-v4 .al-headline, html[data-design="v2"] body.auth-v4 .al-form-title, html[data-design="v2"] body.auth-v4 .reg-h { color: #11161b !important; } html[data-design="v2"] body.auth-v4 .al-headline span, html[data-design="v2"] body.auth-v4 .reg-h .acc { background: linear-gradient(120deg, #08766e, #0e8f83 70%, #50d6c4) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[data-design="v2"] body.auth-v4 .al-sub, html[data-design="v2"] body.auth-v4 .al-form-sub, html[data-design="v2"] body.auth-v4 .reg-sub, html[data-design="v2"] body.auth-v4 .al-feat-s, html[data-design="v2"] body.auth-v4 .al-trust-item { color: #53606b !important; } html[data-design="v2"] body.auth-v4 .al-badge, html[data-design="v2"] body.auth-v4 .trial-badge, html[data-design="v2"] body.auth-v4 .al-feat-ic { background: rgba(14,143,131,.12) !important; border-color: rgba(14,143,131,.26) !important; color: #0e8f83 !important; } html[data-design="v2"] body.auth-v4 .al-feat { background: rgba(255,255,255,.58) !important; border-color: rgba(14,143,131,.10) !important; box-shadow: 0 12px 28px rgba(25,39,54,.05) !important; } html[data-design="v2"] body.auth-v4 .al-feat-t, html[data-design="v2"] body.auth-v4 .field-label, html[data-design="v2"] body.auth-v4 .al-label { color: #11161b !important; } html[data-design="v2"] body.auth-v4 .al-trust-item svg { color: #0e8f83 !important; filter: none !important; } html[data-design="v2"] body.auth-v4 .btn-primary, html[data-design="v2"] body.auth-v4 .btn-submit, html[data-design="v2"] body.auth-v4 button[type="submit"]:not(.btn-google):not(.tseg) { background: linear-gradient(135deg, #0e8f83, #08766e) !important; color: #ffffff !important; box-shadow: 0 16px 34px rgba(14,143,131,.18) !important; } html[data-design="v2"] body.auth-v4 .field-input:focus, html[data-design="v2"] body.auth-v4 .auth-code-input:focus, html[data-design="v2"] body.auth-v4 input:focus { border-color: rgba(14,143,131,.58) !important; box-shadow: 0 0 0 4px rgba(14,143,131,.16) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 { --np: #14b6a8 !important; --na: #0e8f83 !important; --nb: #50d6c4 !important; --ng: #14b6a8 !important; --nv: #50d6c4 !important; --bg: #03130f !important; --s0: #03130f !important; --s1: rgba(7,31,25,.88) !important; --s2: rgba(255,255,255,.07) !important; --s3: rgba(255,255,255,.05) !important; color-scheme: dark; color: #f6fffb !important; background: radial-gradient(circle at 18% -8%, rgba(80,214,196,.16), transparent 34%), radial-gradient(circle at 88% 8%, rgba(14,143,131,.12), transparent 30%), linear-gradient(145deg, #03130f 0%, #071f1a 48%, #041511 100%) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4::after { background: radial-gradient(2px 2px at 12% 28%, rgba(80,214,196,.22), transparent 60%), radial-gradient(2px 2px at 28% 78%, rgba(80,214,196,.16), transparent 60%), radial-gradient(2px 2px at 62% 18%, rgba(14,143,131,.18), transparent 60%), radial-gradient(2px 2px at 86% 56%, rgba(80,214,196,.18), transparent 60%), radial-gradient(2px 2px at 44% 50%, rgba(14,143,131,.20), transparent 60%) !important; opacity: .32; } html[data-design="v2"][data-theme="dark"] body.auth-v4 > nav.nav { background: linear-gradient(180deg, rgba(7,31,25,.94), rgba(7,31,25,.78)) !important; border-bottom-color: rgba(167,243,208,.14) !important; box-shadow: 0 16px 40px rgba(0,0,0,.22) !important; color: #f6fffb !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-left, html[data-design="v2"][data-theme="dark"] body.auth-v4 .reg-hero { background: radial-gradient(900px 600px at 18% 30%, rgba(80,214,196,.18), transparent 60%), radial-gradient(800px 500px at 82% 60%, rgba(14,143,131,.12), transparent 60%), linear-gradient(160deg, rgba(8,35,29,.96), rgba(7,31,25,.88) 62%, rgba(3,19,15,.92)) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-right, html[data-design="v2"][data-theme="dark"] body.auth-v4 .reg-card, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-input, html[data-design="v2"][data-theme="dark"] body.auth-v4 .field-input, html[data-design="v2"][data-theme="dark"] body.auth-v4 .auth-code-input, html[data-design="v2"][data-theme="dark"] body.auth-v4 input[type="text"], html[data-design="v2"][data-theme="dark"] body.auth-v4 input[type="email"], html[data-design="v2"][data-theme="dark"] body.auth-v4 input[type="password"], html[data-design="v2"][data-theme="dark"] body.auth-v4 input[type="tel"], html[data-design="v2"][data-theme="dark"] body.auth-v4 input[type="search"], html[data-design="v2"][data-theme="dark"] body.auth-v4 .btn-google { background: linear-gradient(180deg, rgba(13,45,37,.94), rgba(8,35,29,.90)), linear-gradient(120deg, rgba(80,214,196,.08), transparent 52%) !important; border-color: rgba(167,243,208,.16) !important; box-shadow: 0 18px 52px rgba(0,0,0,.24) !important; color: #f6fffb !important; -webkit-text-fill-color: #f6fffb !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .field-input::placeholder, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-input::placeholder, html[data-design="v2"][data-theme="dark"] body.auth-v4 .auth-code-input::placeholder, html[data-design="v2"][data-theme="dark"] body.auth-v4 input::placeholder { color: rgba(191,215,207,.66) !important; -webkit-text-fill-color: rgba(191,215,207,.66) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4.premium-public input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), html[data-design="v2"][data-theme="dark"] body.auth-v4.premium-public textarea, html[data-design="v2"][data-theme="dark"] body.auth-v4.premium-public select, html[data-design="v2"][data-theme="dark"] body.auth-v4.premium-public .al-input, html[data-design="v2"][data-theme="dark"] body.auth-v4.premium-public .field-input, html[data-design="v2"][data-theme="dark"] body.auth-v4.premium-public .auth-code-input { background: linear-gradient(180deg, rgba(13,45,37,.94), rgba(8,35,29,.90)), linear-gradient(120deg, rgba(80,214,196,.08), transparent 52%) !important; background-color: rgba(8,35,29,.90) !important; border-color: rgba(167,243,208,.18) !important; color: #f6fffb !important; -webkit-text-fill-color: #f6fffb !important; box-shadow: 0 18px 52px rgba(0,0,0,.20) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-headline, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-form-title, html[data-design="v2"][data-theme="dark"] body.auth-v4 .reg-h, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-feat-t, html[data-design="v2"][data-theme="dark"] body.auth-v4 .field-label, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-label { color: #f6fffb !important; -webkit-text-fill-color: #f6fffb !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-headline span, html[data-design="v2"][data-theme="dark"] body.auth-v4 .reg-h .acc { background: linear-gradient(120deg, #50d6c4, #14b6a8 70%, #9bf5e9) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-sub, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-form-sub, html[data-design="v2"][data-theme="dark"] body.auth-v4 .reg-sub, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-feat-s, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-trust-item { color: #bfd7cf !important; -webkit-text-fill-color: #bfd7cf !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-badge, html[data-design="v2"][data-theme="dark"] body.auth-v4 .trial-badge, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-feat-ic { background: rgba(80,214,196,.14) !important; border-color: rgba(80,214,196,.28) !important; color: #50d6c4 !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-feat { background: rgba(255,255,255,.055) !important; border-color: rgba(167,243,208,.14) !important; box-shadow: 0 12px 28px rgba(0,0,0,.18) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-trust-item svg { color: #50d6c4 !important; filter: none !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .btn-primary, html[data-design="v2"][data-theme="dark"] body.auth-v4 .btn-submit, html[data-design="v2"][data-theme="dark"] body.auth-v4 button[type="submit"]:not(.btn-google):not(.tseg) { background: linear-gradient(135deg, #50d6c4, #14b6a8) !important; color: #03211b !important; -webkit-text-fill-color: #03211b !important; box-shadow: 0 16px 34px rgba(20,182,168,.22) !important; } html[data-design="v2"][data-theme="dark"] body.auth-v4 .field-input:focus, html[data-design="v2"][data-theme="dark"] body.auth-v4 .al-input:focus, html[data-design="v2"][data-theme="dark"] body.auth-v4 .auth-code-input:focus, html[data-design="v2"][data-theme="dark"] body.auth-v4 input:focus { border-color: rgba(80,214,196,.62) !important; box-shadow: 0 0 0 4px rgba(80,214,196,.16) !important; }