:root { --ink:#10263a; --muted:#667784; --cream:#fffaf3; --red:#ff3d3d; --purple:#5d48c4; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; background: var(--cream); }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr); }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 4.5rem); overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 12%, rgba(255,151,116,.75), transparent 27%), radial-gradient(circle at 5% 90%, rgba(255,190,93,.4), transparent 32%), linear-gradient(140deg, #362974, #7554d3 60%, #a35fc0); }
.auth-story::after { content:""; position:absolute; width:24rem; height:24rem; right:-9rem; bottom:-8rem; border:4rem solid rgba(255,255,255,.08); border-radius:50%; }
.auth-brand, .mobile-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .65rem; color: inherit; font-family: "Manrope", sans-serif; font-size: 1.15rem; font-weight: 800; text-decoration: none; }
.auth-brand span, .mobile-brand span { width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:.7rem; color:#fff; background:var(--red); }
.auth-brand span img, .mobile-brand span img { display:block; width:100%; height:100%; }
.story-content { position: relative; z-index: 2; max-width: 690px; margin: 4rem 0; }
.story-kicker, .auth-label { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.13em; }
.story-kicker { margin-bottom:1.4rem; padding:.55rem .8rem; border:1px solid rgba(255,255,255,.22); border-radius:2rem; background:rgba(255,255,255,.1); }
.story-kicker i { margin-right:.35rem; color:#ff7474; }
.story-content h1 { max-width:740px; margin:0; font-family:"Manrope",sans-serif; font-size:clamp(3rem,5.6vw,6rem); font-weight:800; letter-spacing:-.065em; line-height:.96; }
.story-content > p { max-width:620px; margin:1.5rem 0 0; color:rgba(255,255,255,.72); font-size:1.08rem; line-height:1.7; }
.story-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:2rem; }
.story-flow span { padding:.7rem .9rem; border:1px solid rgba(255,255,255,.2); border-radius:.75rem; background:rgba(255,255,255,.1); font-weight:700; }
.story-flow span i { margin-right:.35rem; }
.story-flow > i { color:rgba(255,255,255,.55); }
.story-footer { position:relative; z-index:2; margin:0; color:rgba(255,255,255,.6); font-size:.8rem; }
.auth-panel { display:grid; place-items:center; padding:2rem; background:var(--cream); }
.auth-card { width:min(100%, 430px); padding:2rem; }
.mobile-brand { display:none; margin-bottom:3.5rem; color:var(--ink); }
.auth-label { color:var(--red); }
.auth-card h2 { margin:.75rem 0 .4rem; font-family:"Manrope",sans-serif; font-size:2.35rem; font-weight:800; letter-spacing:-.045em; }
.auth-card > p { color:var(--muted); }
.google-button { min-height:44px; display:flex; justify-content:center; margin-top:2rem; }
.auth-message { display:none; margin-top:1.25rem; padding:.8rem 1rem; border-radius:.7rem; color:#9d2727; background:#ffeded; font-size:.85rem; }
.auth-message.show { display:block; }
.auth-divider { display:flex; align-items:center; gap:1rem; margin:2rem 0; color:#8a969f; font-size:.72rem; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:#e5dcd3; }
.auth-points li { margin:.85rem 0; color:#4f626f; font-size:.86rem; }
.auth-points i { margin-right:.6rem; color:#1ba579; }
.auth-legal { margin-top:2rem; font-size:.72rem; line-height:1.6; }
@media (max-width: 900px) { .auth-shell { grid-template-columns:1fr; } .auth-story { display:none; } .auth-panel { min-height:100vh; min-height:100dvh; } .mobile-brand { display:inline-flex; } }
@media (max-width: 480px) { .auth-panel { align-items:start; padding:1.25rem; } .auth-card { padding:1rem .25rem; } .mobile-brand { margin-bottom:4rem; } .auth-card h2 { font-size:2rem; } }