:root { color-scheme: light; --ink: #17233b; --muted: #718096; --pink: #f451a6; --cyan: #20d7d3; --font: 'Nunito', 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); font-family: var(--font); background: #fff; }
button, input { font: inherit; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); min-height: 100vh; min-height: 100dvh; }
.login-story { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 46px clamp(36px, 6vw, 100px) 36px; background: linear-gradient(145deg, #fff2f9 0%, #f6f7ff 47%, #eafffc 100%); }
.login-story::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#dfe5f0 1px, transparent 1px); background-size: 26px 26px; opacity: .38; mask-image: linear-gradient(180deg, transparent 5%, #000 52%, transparent 100%); }
.story-glow { position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; z-index: -1; animation: glow-drift 10s ease-in-out infinite alternate; }
.story-glow-one { width: 390px; height: 390px; left: -160px; top: 12%; background: radial-gradient(circle, rgba(244,81,166,.18), transparent 70%); }
.story-glow-two { width: 470px; height: 470px; right: -170px; bottom: -130px; background: radial-gradient(circle, rgba(32,215,211,.24), transparent 70%); animation-delay: -4s; }
.story-brand { display: flex; align-items: center; gap: 16px; }
.brand-mark, .mobile-brand { font-weight: 900; font-size: 34px; letter-spacing: -.11em; line-height: 1; color: #ea4fa7; }
.brand-mark span:not(.brand-dot), .mobile-brand span:not(.brand-dot) { color: #11cfc9; }
.brand-dot { color: #17233b; }
.brand-caption { margin-top: 5px; padding-left: 16px; border-left: 1px solid #d5dce8; color: #8390a5; font-size: 10px; font-weight: 900; letter-spacing: .22em; }
.story-content { width: min(100%, 600px); margin: 35px auto 0; }
.story-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #60708a; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(32,215,211,.13); }
.story-content h1 { margin: 19px 0 15px; font-size: clamp(42px, 4.4vw, 72px); font-weight: 900; letter-spacing: -.055em; line-height: 1.06; }
.story-content h1 em { font-style: normal; background: linear-gradient(100deg, #f451a6, #d75dbe 48%, #42cfcf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-content > p { max-width: 460px; margin: 0; color: #697891; font-size: 16px; line-height: 1.7; }
.story-footer { margin: 0; color: #9ba8bb; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.story-visual { position: relative; width: min(100%, 530px); height: 305px; margin: 35px auto 0; }
.visual-orbit { position: absolute; border: 1px solid rgba(135,158,190,.2); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orbit-outer { width: 355px; height: 245px; transform: translate(-50%, -50%) rotate(-17deg); }
.orbit-inner { width: 250px; height: 250px; border-style: dashed; animation: orbit-spin 38s linear infinite; }
.visual-center { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 165px; height: 165px; border-radius: 38px; transform: translate(-50%, -50%) rotate(-8deg); background: linear-gradient(145deg, #fff, #f9fbff); box-shadow: 0 30px 75px rgba(52,79,118,.16), inset 0 1px 0 #fff; animation: center-float 6s ease-in-out infinite; }
.visual-center > span { font-size: 52px; font-weight: 900; letter-spacing: -.11em; color: var(--pink); transform: rotate(8deg); }
.visual-center > span span { color: #1bd4d0; }
.floating-card { position: absolute; display: flex; align-items: center; gap: 12px; z-index: 2; padding: 12px 15px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 17px 45px rgba(61,80,112,.13); backdrop-filter: blur(12px); animation: card-float 5s ease-in-out infinite; }
.floating-card strong, .floating-card small { display: block; white-space: nowrap; }
.floating-card strong { font-size: 12px; font-weight: 900; }
.floating-card small { margin-top: 2px; color: #95a1b3; font-size: 10px; font-weight: 700; }
.floating-card-top { top: 16px; right: 0; }
.floating-card-bottom { bottom: 14px; left: 0; animation-delay: -2.5s; }
.floating-icon, .floating-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff0f8; color: #e94ca5; font-size: 20px; }
.floating-check { background: #e6faf8; color: #17bbb8; font-weight: 900; }
.visual-spark { position: absolute; color: #f28cc6; font-size: 23px; animation: spark-pulse 3s ease-in-out infinite; }
.spark-one { left: 10%; top: 16%; }.spark-two { right: 13%; bottom: 12%; color: #37d1cf; animation-delay: -1.5s; }
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px clamp(24px, 5vw, 84px) 22px; }
.login-panel-inner { width: min(100%, 420px); margin: auto; }.mobile-brand { display: none; }
.login-intro { margin-bottom: 31px; }
.welcome-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #fbe0ee; border-radius: 999px; background: #fff6fa; color: #c54791; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.welcome-spark { font-size: 14px; }
.login-intro h2 { margin: 19px 0 6px; font-size: clamp(36px, 3.2vw, 49px); font-weight: 900; letter-spacing: -.06em; line-height: 1.15; }
.heading-period { color: var(--pink); }
.login-intro p { margin: 0; color: #8490a3; font-size: 14px; line-height: 1.65; }
.login-form { display: grid; gap: 19px; }
.form-field label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 900; color: #34415a; }
.input-wrap { position: relative; display: flex; align-items: center; height: 55px; border: 1px solid #e3e9f0; border-radius: 13px; background: #fbfcfe; transition: border-color .2s, box-shadow .2s, background .2s; }
.input-wrap:focus-within { border-color: #eb77b5; background: #fff; box-shadow: 0 0 0 4px rgba(244,81,166,.11); }
.input-wrap.is-invalid { border-color: #df6b7d; }
.input-wrap > svg { flex: none; width: 19px; height: 19px; margin-left: 16px; color: #a0acc0; }
.input-wrap input { width: 100%; height: 100%; padding: 0 15px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; }
.input-wrap input::placeholder { color: #acb6c5; font-weight: 600; }
.input-wrap input[type=password], .input-wrap input[type=text] { padding-right: 0; }
.password-toggle { display: grid; place-items: center; flex: none; width: 47px; height: 47px; margin-right: 4px; border: 0; border-radius: 10px; background: transparent; color: #9ba7b9; cursor: pointer; transition: color .2s, background .2s; }
.password-toggle:hover { background: #f2f5f9; color: #e94ca5; }.password-toggle svg { width: 19px; height: 19px; }
.password-toggle:focus-visible, .sign-in-button:focus-visible, .remember-choice input:focus-visible { outline: 3px solid rgba(244,81,166,.4); outline-offset: 2px; }
.field-error { display: block; margin-top: 6px; color: #c43955; font-size: 12px; font-weight: 700; }
.remember-choice { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: #6d7a8f; font-size: 13px; font-weight: 800; cursor: pointer; }
.remember-choice input { width: 17px; height: 17px; margin: 0; accent-color: #ec5aa8; cursor: pointer; }
.sign-in-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; margin-top: 4px; border: 0; border-radius: 13px; background: linear-gradient(100deg, #f15aa9, #ed67aa 43%, #c963c3); box-shadow: 0 13px 26px rgba(231,85,165,.24); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; }
.sign-in-button:hover { transform: translateY(-2px); box-shadow: 0 17px 28px rgba(231,85,165,.32); filter: saturate(1.08); }
.sign-in-button:active { transform: translateY(0); }.sign-in-button span { font-size: 21px; font-weight: 500; line-height: 1; }
.login-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 25px; color: #9ba6b6; font-size: 12px; font-weight: 700; text-align: center; }
.note-icon { color: #20c9c4; }.panel-footer { margin: 30px 0 0; color: #b0bac8; font-size: 11px; font-weight: 700; text-align: center; }
.login-alert { display: grid; gap: 3px; margin: -10px 0 23px; padding: 13px 15px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.login-alert-error { border: 1px solid #f5cdd6; background: #fff3f5; color: #a52e49; }.login-alert-success { border: 1px solid #a9e6db; background: #ecfbf7; color: #176f65; }
@keyframes glow-drift { to { transform: translate(35px, -25px); } }
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes center-float { 50% { transform: translate(-50%, -55%) rotate(-5deg); } }
@keyframes card-float { 50% { transform: translateY(-9px); } }
@keyframes spark-pulse { 50% { opacity: .45; transform: scale(.7); } }
@media (max-width: 900px) {
    .login-shell { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    .login-story { padding: 32px; }.story-content h1 { font-size: 44px; }.story-content > p { font-size: 14px; }
    .story-visual { height: 280px; }.floating-card-top { right: -10px; }.floating-card-bottom { left: -10px; }
    .floating-card { padding: 9px; }.floating-card strong { font-size: 10px; }
}
@media (max-width: 700px) {
    .login-shell { display: block; }.login-story { display: none; }
    .login-panel { min-height: 100vh; min-height: 100dvh; padding: 35px 24px 22px; background: radial-gradient(circle at 0 0, rgba(244,81,166,.09), transparent 40%), radial-gradient(circle at 100% 100%, rgba(32,215,211,.1), transparent 45%), #fff; }
    .mobile-brand { display: block; margin-bottom: 57px; font-size: 38px; }.login-panel-inner { margin: auto; }.login-intro h2 { font-size: 43px; }.panel-footer { margin-top: 42px; }
}
@media (max-width: 380px) { .login-panel { padding-inline: 20px; }.mobile-brand { margin-bottom: 38px; }.login-intro h2 { font-size: 37px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }