html body:has(.auth-showcase), html body .auth-page:has(.auth-showcase), html body .auth-main.has-showcase { background:#fff !important; color:#17335e !important; color-scheme:light; }
html body .auth-page:has(.auth-showcase) :is(.auth-header,.auth-footer,.auth-card,.social-btn) { background:#fff !important; color:#17335e !important; border-color:#d7e1f0 !important; }
html body .auth-main.has-showcase .auth-card :is(.auth-title,label,.password-toggle) { color:#17335e !important; }
html body .auth-main.has-showcase .auth-card :is(.auth-subtitle,.consent-note,.age-note,.divider,.helper,.legal-check,.auth-mode-tab) { color:#60718b !important; }
html body .auth-main.has-showcase .auth-card input { background:#fff !important; color:#17335e !important; border-color:#c9d6e8 !important; }
html body .has-showcase .auth-mode-tabs { background:#f1f5fc !important; border-color:#d7e1f0 !important; }
html body .has-showcase .auth-mode-tab.active { background:#fff !important; color:#1266da !important; }
.auth-main.has-showcase { grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:clamp(28px,5vw,80px); padding:40px clamp(24px,6vw,100px); max-width:1600px; width:100%; margin:auto; align-items:center; }
.has-showcase .auth-card { grid-column:2; grid-row:1; width:100%; background:#fff; color:#071b4d; }
html body .auth-main.has-showcase .auth-card :is(p,label,input,a,button,span,h1) { -webkit-text-fill-color:currentColor !important; }
html body .auth-main.has-showcase .auth-card input::placeholder { color:#718099 !important; -webkit-text-fill-color:#718099 !important; opacity:1; }
.auth-showcase { grid-column:1; grid-row:1; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; color:#17335e; }
.auth-demo-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px; border-radius:16px; background:#f1f5fc; }
.auth-demo-tabs button { min-width:0; min-height:48px; padding:8px; border:0; border-radius:11px; background:transparent; color:#536582; font:inherit; font-size:13px; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.auth-demo-tabs button:hover { background:#e3edfc; color:#1767d3; }
.auth-demo-tabs button[aria-selected="true"] { background:#fff; color:#1266da; box-shadow:0 3px 12px #153b7312; }
.auth-demo-tabs button:focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
.auth-demo-panels { display:grid; }
.auth-demo-panel { grid-area:1/1; padding:24px 0; animation:auth-demo-enter .45s ease both; }
.auth-demo-panel[hidden] { display:none; }
.auth-demo-panel h2 { margin:24px 0 12px; font-size:clamp(24px,2.3vw,36px); line-height:1.3; min-height:2.6em; }
.auth-demo-panel p { margin:0; color:#5c6e88; line-height:1.8; min-height:3.6em; }
.auth-demo-visual { height:310px; position:relative; overflow:hidden; display:grid; place-items:center; border:1px solid #dfebfa; border-radius:28px; background:radial-gradient(ellipse at 25% 25%,#cde7ff,transparent 65%),linear-gradient(135deg,#f5faff,#f0eaff); }
.demo-analysis .auth-demo-visual { background:radial-gradient(ellipse at 70% 25%,#bbebe5,transparent 65%),#edf6ff; }
.demo-office .auth-demo-visual { background:radial-gradient(ellipse at 25% 25%,#d5d2ff,transparent 65%),#eff5ff; }
.demo-fortune .auth-demo-visual { background:radial-gradient(ellipse at 70% 25%,#ffe5bb,transparent 65%),#f4eeff; }
.auth-demo-emblem { width:144px; height:144px; padding:22px; color:#2674d8; border:1px solid #ffffff; border-radius:32px; background:#ffffffc9; box-shadow:0 18px 60px #3d68a61c; animation:auth-demo-float 5s ease-in-out infinite; }
.auth-demo-emblem svg { width:100%; height:100%; }
.demo-fortune .auth-demo-emblem { color:#a173ce; animation:auth-demo-float 5s ease-in-out infinite,auth-demo-shine 3s ease-in-out infinite; }
.demo-bar { animation:auth-demo-bars 3s ease-in-out infinite; transform-origin:60px 90px; }
.auth-demo-step { position:absolute; padding:12px 18px; background:#ffffffed; border:1px solid #e0e9f5; border-radius:12px; box-shadow:0 8px 28px #244b7912; font-size:13px; animation:auth-demo-float 4s ease-in-out infinite; animation-delay:calc(var(--step) * -.8s); }
.auth-demo-step:nth-child(2) { left:6%; top:13%; }
.auth-demo-step:nth-child(3) { right:5%; top:42%; }
.auth-demo-step:nth-child(4) { left:13%; bottom:10%; }
@keyframes auth-demo-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes auth-demo-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes auth-demo-bars { 50% { transform:scaleY(.72); } }
@keyframes auth-demo-shine { 50% { filter:drop-shadow(0 0 10px #c5a1e5); } }
@media(max-width:950px) { .auth-main.has-showcase { display:flex; flex-direction:column; padding:24px 20px; gap:24px; } .has-showcase .auth-card { max-width:536px; order:1; } .auth-showcase { width:100%; max-width:536px; margin:auto; order:2; } .auth-demo-visual { height:240px; } }
@media(prefers-reduced-motion:reduce) { .auth-demo-panel,.auth-demo-emblem,.auth-demo-step,.demo-bar { animation:none; } .auth-demo-tabs button { transition:none; } }