:root { --cosmos-bg-base: #140826; --cosmos-bg-start: #050816; --cosmos-bg-mid: #0d1433; --cosmos-bg-end: #1f0f3c; --cosmos-surface: rgba(13, 21, 54, 0.84); --cosmos-surface-soft: rgba(10, 17, 42, 0.7); --cosmos-border: rgba(118, 143, 255, 0.4); --cosmos-border-strong: rgba(116, 221, 255, 0.62); --cosmos-text: #ecf2ff; --cosmos-muted: #b0bfe6; --cosmos-accent: #62d4ff; --cosmos-accent-2: #ab78ff; --cosmos-accent-3: #ff90d7; --cosmos-shadow: 0 26px 70px rgba(2, 6, 24, 0.55); } html { min-height: 100%; background-color: var(--cosmos-bg-base); } body { min-height: 100%; background-color: var(--cosmos-bg-base); } body.auth-page { --parallax-x: 0px; --parallax-y: 0px; min-height: 100vh; min-height: 100dvh; isolation: isolate; overflow-x: hidden; background-color: var(--cosmos-bg-base); background: radial-gradient(140% 120% at 12% 4%, rgba(86, 47, 169, 0.3), transparent 62%), radial-gradient(120% 132% at 86% 14%, rgba(64, 125, 210, 0.23), transparent 64%), radial-gradient(160% 120% at 56% 92%, rgba(157, 76, 178, 0.24), transparent 66%), linear-gradient(168deg, #120622, #18103a 52%, #1d1141); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; color: var(--cosmos-text); position: relative; will-change: auto; } /* Animated background toggle Add `enable-animated-bg` to to re-enable the drifting sky layers. (Disabled by default to reduce battery usage in Chrome/Firefox.) */ /* Additional star layers for clearer parallax depth. */ .auth-sky-layer { pointer-events: none; position: fixed; inset: -16% -12%; z-index: 1; opacity: 0.26; transform: translate3d(0, 0, 0); will-change: auto; } .auth-sky-layer-deep { background-image: radial-gradient(1px 1px at 28px 34px, rgba(218, 240, 255, 0.9), transparent), radial-gradient(1px 1px at 88px 18px, rgba(160, 215, 255, 0.8), transparent), radial-gradient(1px 1px at 148px 102px, rgba(215, 163, 255, 0.65), transparent); background-size: 210px 180px; transform: translate3d(0, 0, 0); } .auth-sky-layer-near { opacity: 0.18; background-image: radial-gradient(2px 2px at 44px 42px, rgba(169, 239, 255, 0.7), transparent), radial-gradient(1px 1px at 118px 70px, rgba(255, 192, 238, 0.62), transparent), radial-gradient(2px 2px at 176px 28px, rgba(173, 195, 255, 0.72), transparent); background-size: 260px 220px; transform: translate3d(0, 0, 0); } body.auth-page::before { content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 0; opacity: 0.34; background-image: radial-gradient(1px 1px at 24px 46px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 64px 22px, rgba(171, 209, 255, 0.75), transparent), radial-gradient(1px 1px at 124px 86px, rgba(224, 173, 255, 0.65), transparent), radial-gradient(1px 1px at 166px 52px, rgba(150, 212, 255, 0.7), transparent); background-size: 240px 170px; will-change: auto; } body.auth-page::after { content: ""; pointer-events: none; position: fixed; inset: -24% -20%; z-index: 1; opacity: 0.34; filter: blur(68px); background: radial-gradient(58% 56% at 12% 14%, rgba(109, 62, 198, 0.28), rgba(0, 0, 0, 0) 68%), radial-gradient(64% 58% at 86% 21%, rgba(78, 144, 224, 0.22), rgba(0, 0, 0, 0) 70%), radial-gradient(52% 54% at 30% 76%, rgba(176, 86, 189, 0.2), rgba(0, 0, 0, 0) 72%), radial-gradient(60% 60% at 72% 82%, rgba(129, 74, 212, 0.18), rgba(0, 0, 0, 0) 72%); transform: translate3d(0, 0, 0) scale(1.1); will-change: auto; } body.auth-page.enable-animated-bg .auth-sky-layer { will-change: transform, background-position, opacity; } body.auth-page.enable-animated-bg .auth-sky-layer-deep { animation: layer-deep-drift 96s linear infinite; transform: translate3d(calc(var(--parallax-x) * 0.16), calc(var(--parallax-y) * 0.16), 0); } body.auth-page.enable-animated-bg .auth-sky-layer-near { animation: layer-near-drift 58s linear infinite; transform: translate3d(calc(var(--parallax-x) * 0.3), calc(var(--parallax-y) * 0.3), 0); } body.auth-page.enable-animated-bg::before { animation: star-drift 46s linear infinite alternate; will-change: background-position; } body.auth-page.enable-animated-bg::after { animation: cloud-drift 52s ease-in-out infinite alternate; will-change: transform; } .auth-shell { position: relative; animation: route-reveal 520ms cubic-bezier(0.2, 0.82, 0.25, 1) both; } body.auth-page > * { position: relative; z-index: 2; } @keyframes cosmos-drift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%; } 50% { background-position: 20% 16%, 86% 24%, 42% 80%, 50% 50%; } 100% { background-position: 36% 28%, 72% 42%, 30% 64%, 50% 50%; } } @keyframes star-drift { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 50% { background-position: 76px -94px, -68px 76px, 48px -56px, -58px 84px; } 100% { background-position: 144px -178px, -130px 146px, 92px -104px, -112px 156px; } } @keyframes nebula-drift { 0% { transform: translate3d(-7%, -4%, 0) scale(1.08); } 50% { transform: translate3d(0%, 2%, 0) scale(1.12); } 100% { transform: translate3d(8%, 5%, 0) scale(1.16); } } @keyframes cloud-drift { 0% { transform: translate3d(-8%, -3%, 0) scale(1.12); } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.16); } 100% { transform: translate3d(9%, 4%, 0) scale(1.2); } } @keyframes layer-deep-drift { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 420px -310px, -180px 240px, 240px -165px; } } @keyframes layer-near-drift { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: -340px 260px, 250px -210px, -180px 200px; } } @keyframes route-reveal { 0% { opacity: 0; transform: translateY(14px) scale(0.992); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .portal-mark { position: relative; width: 5rem; height: 5rem; margin: 0 auto; border-radius: 9999px; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18) 32%, transparent 56%), conic-gradient(from 120deg, var(--cosmos-accent), var(--cosmos-accent-2), var(--cosmos-accent-3), var(--cosmos-accent)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 35px rgba(128, 219, 255, 0.48), 0 0 52px rgba(182, 116, 255, 0.34); animation: portal-float 7.5s ease-in-out infinite; } .portal-mark::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(170, 214, 255, 0.38); border-radius: 9999px; animation: portal-pulse 3.6s ease-in-out infinite; } .brand-switcher { position: relative; width: 5rem; height: 5rem; margin: 0 auto; border-radius: 0.9rem; filter: drop-shadow(0 0 18px rgba(135, 92, 244, 0.35)); } .brand-switcher-link { display: block; width: fit-content; margin: 0 auto; border-radius: 1rem; } .brand-switcher-link:focus-visible { outline: 2px solid rgba(148, 225, 255, 0.94); outline-offset: 3px; } .brand-switcher::before { content: ""; position: absolute; inset: -8px; border-radius: 1rem; border: 1px solid rgba(168, 188, 255, 0.28); opacity: 0.7; } .brand-tile { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 0.85rem; border: 1px solid rgba(227, 238, 255, 0.34); box-shadow: 0 10px 28px rgba(12, 18, 44, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.22); opacity: 0; transform: translate3d(140%, 0, 0) rotate(4deg) scale(0.92); will-change: transform, opacity; } .brand-tile-a { background: linear-gradient(135deg, #0e3457 0%, #2c2b67 54%, #502861 100%); animation: brand-cycle-a 9s cubic-bezier(0.21, 0.84, 0.24, 1) infinite; } .brand-tile-b { background: linear-gradient(145deg, #0a5b92 0%, #003b6f 56%, #022746 100%); animation: brand-cycle-b 9s cubic-bezier(0.21, 0.84, 0.24, 1) infinite; } .brand-tile-c { background: linear-gradient(145deg, #7f2f4a 0%, #a63d5f 58%, #cf5c84 100%); animation: brand-cycle-c 9s cubic-bezier(0.21, 0.84, 0.24, 1) infinite; } .brand-tile-label { font-size: 1.25rem; line-height: 1; font-weight: 700; letter-spacing: 0.08em; color: rgba(14, 14, 36, 0.88); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .brand-switch-image { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(3, 9, 24, 0.42)); } @keyframes portal-pulse { 0% { transform: scale(0.96); opacity: 0.72; } 50% { transform: scale(1.06); opacity: 0.4; } 100% { transform: scale(0.96); opacity: 0.72; } } @keyframes brand-cycle-a { 0%, 24% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 32% { opacity: 0; transform: translate3d(-140%, 0, 0) rotate(-6deg) scale(0.92); } 92% { opacity: 0; transform: translate3d(140%, 0, 0) rotate(6deg) scale(0.92); } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } } @keyframes brand-cycle-b { 0%, 24% { opacity: 0; transform: translate3d(140%, 0, 0) rotate(6deg) scale(0.92); } 32%, 58% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 66%, 100% { opacity: 0; transform: translate3d(-140%, 0, 0) rotate(-6deg) scale(0.92); } } @keyframes brand-cycle-c { 0%, 58% { opacity: 0; transform: translate3d(140%, 0, 0) rotate(6deg) scale(0.92); } 66%, 92% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate3d(-140%, 0, 0) rotate(-6deg) scale(0.92); } } .auth-title { color: var(--cosmos-text); position: relative; display: block; text-align: center; text-wrap: balance; text-shadow: 0 2px 20px rgba(122, 198, 255, 0.35); } .auth-title::before { content: ""; position: absolute; inset: -0.3em -0.55em; border-radius: 9999px; background: radial-gradient(circle, rgba(111, 215, 255, 0.35) 0%, rgba(191, 130, 255, 0.22) 40%, rgba(0, 0, 0, 0) 74%); filter: blur(14px); opacity: 0.5; z-index: -1; animation: title-halo 8.5s ease-in-out infinite alternate; } .auth-subtitle, .auth-subtle-text, .auth-muted { color: var(--cosmos-muted); } .auth-card, .auth-panel, .auth-stat-card, .auth-list-card { position: relative; overflow: hidden; background: linear-gradient(155deg, rgba(23, 32, 74, 0.82), rgba(13, 20, 49, 0.86)); border: 1px solid var(--cosmos-border); box-shadow: var(--cosmos-shadow); backdrop-filter: blur(10px); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; transform: translateY(0); opacity: 1; animation: surface-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both; } .auth-card::after, .auth-panel::after, .auth-stat-card::after, .auth-list-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--cursor-glow-opacity, 0); background: radial-gradient( 220px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(112, 220, 255, 0.2) 0%, rgba(204, 132, 255, 0.16) 36%, rgba(0, 0, 0, 0) 68% ); transition: opacity 220ms ease; } .auth-card { border-radius: 1rem; animation-delay: 40ms; } .auth-panel { border-radius: 1rem; animation-delay: 80ms; } .auth-stat-card { border-radius: 0.9rem; animation-delay: 130ms; } .auth-list-card { border-radius: 0.75rem; animation-delay: 160ms; } .auth-panel:hover, .auth-list-card:hover { transform: translateY(-2px); box-shadow: 0 32px 72px rgba(2, 8, 28, 0.55); border-color: rgba(126, 188, 255, 0.62); } .auth-label { color: #d9e7ff; } .auth-input { border: 1px solid rgba(120, 151, 255, 0.52); background: rgba(6, 13, 36, 0.78); color: var(--cosmos-text); border-radius: 0.6rem; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .auth-input::placeholder { color: rgba(198, 212, 247, 0.62); } .auth-input:hover { border-color: rgba(122, 188, 255, 0.7); } .auth-input:focus, .auth-input:focus-visible { outline: none; border-color: var(--cosmos-border-strong); box-shadow: 0 0 0 2px rgba(97, 208, 255, 0.26), 0 0 0 6px rgba(171, 120, 255, 0.18), 0 0 20px rgba(98, 212, 255, 0.22); background: rgba(10, 20, 52, 0.9); animation: input-energy-ring 1.7s ease-in-out infinite; } .auth-input:-webkit-autofill, .auth-input:-webkit-autofill:hover, .auth-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--cosmos-text); -webkit-box-shadow: 0 0 0 1000px rgba(10, 20, 52, 0.9) inset; transition: background-color 9999s ease-out; } .auth-btn-primary { --lift-y: 0px; --btn-scale: 1; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(146, 217, 255, 0.5); background: linear-gradient(135deg, #44c4ff, #8b80ff 52%, #d88dff); color: #09132f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28); font-variant-caps: small-caps; letter-spacing: 0.06em; text-transform: capitalize; box-shadow: 0 10px 30px rgba(33, 97, 200, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 150ms ease, filter 160ms ease, box-shadow 180ms ease; transform: translate3d(0, var(--lift-y), 0) scale(var(--btn-scale)); } .auth-btn-primary:hover { --lift-y: -2px; filter: brightness(1.045); box-shadow: 0 16px 34px rgba(33, 97, 200, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .auth-btn-primary:active { --lift-y: 1px; --btn-scale: 0.99; } .auth-btn-primary:focus-visible { outline: 2px solid rgba(148, 225, 255, 0.94); outline-offset: 2px; } .auth-btn-secondary { --lift-y: 0px; --btn-scale: 1; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(126, 162, 255, 0.52); background: rgba(11, 19, 48, 0.84); color: #e7efff; font-variant-caps: small-caps; letter-spacing: 0.06em; text-transform: capitalize; transition: transform 150ms ease, background-color 160ms ease, box-shadow 180ms ease; transform: translate3d(0, var(--lift-y), 0) scale(var(--btn-scale)); } .auth-btn-secondary:hover { --lift-y: -2px; background: rgba(16, 28, 68, 0.94); box-shadow: 0 14px 30px rgba(4, 10, 34, 0.44); } .auth-btn-secondary:active { --lift-y: 1px; --btn-scale: 0.99; } .auth-btn-secondary:focus-visible { outline: 2px solid rgba(148, 225, 255, 0.94); outline-offset: 2px; } .auth-btn-primary::before, .auth-btn-secondary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 112deg, transparent 35%, rgba(255, 255, 255, 0.92) 50%, transparent 65% ); background-size: 220% 100%; background-position: 130% 0; opacity: 0; pointer-events: none; transition: opacity 180ms ease, background-position 520ms ease; z-index: 1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .auth-btn-primary:hover::before, .auth-btn-secondary:hover::before { opacity: 0.82; background-position: -35% 0; } .auth-btn-primary::after, .auth-btn-secondary::after { content: ""; position: absolute; left: var(--ripple-x, 50%); top: var(--ripple-y, 50%); width: 14px; height: 14px; border-radius: 9999px; transform: translate(-50%, -50%) scale(0); background: radial-gradient( circle, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 35%, rgba(255, 255, 255, 0) 70% ); opacity: 0; pointer-events: none; z-index: 0; } .auth-btn-primary.ripple-active::after, .auth-btn-secondary.ripple-active::after { animation: btn-ripple 430ms ease-out; } @keyframes btn-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.68; } 100% { transform: translate(-50%, -50%) scale(18); opacity: 0; } } @keyframes surface-in { 0% { opacity: 0; transform: translateY(10px) scale(0.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes title-halo { 0% { transform: translate3d(-2%, -1%, 0) scale(0.98); opacity: 0.44; } 100% { transform: translate3d(2%, 1%, 0) scale(1.04); opacity: 0.6; } } @keyframes input-energy-ring { 0% { border-color: rgba(112, 201, 255, 0.76); box-shadow: 0 0 0 2px rgba(97, 208, 255, 0.24), 0 0 0 6px rgba(171, 120, 255, 0.16), 0 0 20px rgba(98, 212, 255, 0.2); } 50% { border-color: rgba(176, 132, 255, 0.86); box-shadow: 0 0 0 2px rgba(171, 120, 255, 0.3), 0 0 0 7px rgba(255, 144, 215, 0.16), 0 0 26px rgba(171, 120, 255, 0.26); } 100% { border-color: rgba(116, 221, 255, 0.86); box-shadow: 0 0 0 2px rgba(97, 208, 255, 0.28), 0 0 0 6px rgba(171, 120, 255, 0.18), 0 0 22px rgba(98, 212, 255, 0.24); } } @keyframes portal-float { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3px, 0); } 100% { transform: translate3d(0, 0, 0); } } .auth-page.auth-warping::before { animation: warp-stars 260ms ease-out both; } .auth-page.auth-warping::after { animation: warp-flash 260ms ease-out both; } .auth-page.auth-warping .auth-shell { animation: auth-warp 260ms ease-out both; } @keyframes auth-warp { 0% { transform: translateY(0) scale(1); filter: brightness(1); } 70% { transform: translateY(-2px) scale(1.02); filter: brightness(1.14); } 100% { transform: translateY(-4px) scale(1.04); filter: brightness(1.24); opacity: 0.35; } } @keyframes warp-stars { 0% { opacity: 0.34; transform: scale(1); } 100% { opacity: 0.62; transform: scale(1.08); } } @keyframes warp-flash { 0% { opacity: 0.2; transform: translate3d(0, 0, 0) scale(1.02); } 100% { opacity: 0.74; transform: translate3d(0, -2%, 0) scale(1.18); } } .auth-link { color: #a4e6ff; } .auth-link:hover { color: #d0f2ff; } .auth-link:focus-visible { outline: 2px solid rgba(148, 225, 255, 0.9); outline-offset: 2px; border-radius: 4px; } .auth-chip-link, .auth-chip-muted { border-radius: 9999px; border: 1px solid rgba(112, 175, 255, 0.46); background: rgba(12, 23, 56, 0.8); color: #d5e6ff; } .auth-chip-link:hover { background: rgba(16, 34, 80, 0.9); color: #eef6ff; } .connected-site-link { display: flex; width: 100%; align-items: center; gap: 0.9rem; color: inherit; text-decoration: none; } .connected-site-link:hover { color: #eef6ff; } .connected-site-link:focus-visible { outline: 2px solid rgba(148, 225, 255, 0.94); outline-offset: 2px; border-radius: 0.5rem; } .connected-site-row { display: flex; width: 100%; align-items: center; gap: 1rem; } .connected-site-icon { width: 3.15rem; height: 3.15rem; border-radius: 0.65rem; display: inline-grid; place-items: center; border: 1px solid rgba(227, 238, 255, 0.34); box-shadow: 0 8px 18px rgba(12, 18, 44, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2); flex-shrink: 0; } .connected-site-icon-a { background: linear-gradient(135deg, #0e3457 0%, #2c2b67 54%, #502861 100%); } .connected-site-icon-b { background: linear-gradient(145deg, #0a5b92 0%, #003b6f 56%, #022746 100%); } .connected-site-icon-c { background: linear-gradient(145deg, #7f2f4a 0%, #a63d5f 58%, #cf5c84 100%); } .connected-site-icon-label { font-size: 0.85rem; line-height: 1; font-weight: 700; letter-spacing: 0.04em; color: rgba(241, 246, 255, 0.94); text-shadow: 0 1px 2px rgba(5, 10, 26, 0.48); } .connected-site-media { width: 3.15rem; aspect-ratio: 1 / 1; height: auto; border-radius: 0.65rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.38rem; overflow: hidden; border: 1px solid rgba(227, 238, 255, 0.34); box-shadow: 0 8px 18px rgba(12, 18, 44, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2); flex-shrink: 0; background: rgba(9, 16, 38, 0.84); } .connected-site-media-a { background: linear-gradient(135deg, #0e3457 0%, #2c2b67 54%, #502861 100%); } .connected-site-media-b { background: linear-gradient(145deg, #0a5b92 0%, #003b6f 56%, #022746 100%); } .connected-site-media-c { background: linear-gradient(145deg, #7f2f4a 0%, #a63d5f 58%, #cf5c84 100%); } .connected-site-image { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; } .connected-site-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 0.2rem; } .connected-site-title { font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: #edf3ff; } .connected-site-subtitle { font-size: 0.78rem; line-height: 1.15; color: #9fb4dd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .register-source-banner .connected-site-subtitle { white-space: normal; overflow: visible; text-overflow: clip; } .register-source-login { margin-top: 0.05rem; letter-spacing: 0.04em; font-variant: small-caps; } .connected-site-action { flex-shrink: 0; border-radius: 9999px; border: 1px solid rgba(112, 175, 255, 0.44); background: rgba(14, 27, 68, 0.76); color: #dbe8ff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.22rem 0.62rem; text-transform: uppercase; } .faq-summary { cursor: pointer; list-style: none; color: #edf3ff; } .faq-summary::-webkit-details-marker { display: none; } .faq-summary::marker { content: ""; } .faq-summary:focus-visible { outline: 2px solid rgba(148, 225, 255, 0.94); outline-offset: 2px; border-radius: 0.5rem; } .auth-meta { color: #a6badf; } .alert { margin-top: 1rem; border-radius: 0.75rem; border: 1px solid; padding: 0.95rem 1rem; backdrop-filter: blur(8px); } .alert-row { display: flex; gap: 0.75rem; } .alert-icon { margin-top: 2px; flex-shrink: 0; } .alert-title { font-size: 0.92rem; font-weight: 600; line-height: 1.35rem; } .alert-copy { margin-top: 0.25rem; font-size: 0.88rem; line-height: 1.3rem; } .alert-error { border-color: rgba(255, 117, 172, 0.5); background: rgba(88, 16, 45, 0.5); color: #ffd9eb; } .alert-error .alert-icon { color: #ff99c4; } .alert-success { border-color: rgba(108, 246, 213, 0.42); background: rgba(8, 66, 74, 0.5); color: #d8fffb; } .alert-success .alert-icon { color: #79f4d4; } .alert-warning { border-color: rgba(255, 211, 120, 0.45); background: rgba(90, 56, 10, 0.5); color: #fff2d6; } .alert-warning .alert-icon { color: #ffd98b; } @media (max-width: 640px) { .auth-card, .auth-panel, .auth-stat-card, .auth-list-card { box-shadow: 0 14px 35px rgba(2, 8, 28, 0.45); } .connected-site-action { display: none; } } @media (prefers-reduced-motion: reduce) { body.auth-page { animation: none; } body.auth-page::before, body.auth-page::after { animation: none; } body.auth-page::after { transform: none; } .portal-mark { animation: none; } .portal-mark::after { animation: none; } .brand-switcher::before { animation: none; } .brand-tile { animation: none; } .brand-tile-a { opacity: 1; transform: none; } .brand-tile-b, .brand-tile-c { opacity: 0; transform: translate3d(140%, 0, 0); } .auth-title::before { animation: none; } .auth-sky-layer, .auth-shell { animation: none; transform: none; } .auth-input:focus, .auth-input:focus-visible { animation: none; } .auth-btn-primary, .auth-btn-secondary, .auth-card, .auth-panel, .auth-stat-card, .auth-list-card { transition: none; animation: none; } .auth-btn-primary:hover, .auth-btn-secondary:hover, .auth-panel:hover, .auth-list-card:hover { transform: none; } .auth-btn-primary, .auth-btn-secondary { transform: none; } .auth-btn-primary::before, .auth-btn-secondary::before, .auth-btn-primary::after, .auth-btn-secondary::after { transition: none; animation: none; opacity: 0; } .auth-card::after, .auth-panel::after, .auth-stat-card::after, .auth-list-card::after { transition: none; opacity: 0; } .auth-page.auth-warping::before, .auth-page.auth-warping::after, .auth-page.auth-warping .auth-shell { animation: none; transform: none; opacity: inherit; filter: none; } }