:root{--navy:#142d4f;--green:#1769d2;--green-dark:#1557b0;--mint:#f1f7ff;--muted:#7387a3;--line:#d9e4ee}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--navy);-webkit-font-smoothing:antialiased}
body{background:#f1f7ff}
a{color:var(--green-dark);font-weight:700;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input{font:inherit}
.layout{position:relative;min-height:100vh;display:grid;grid-template-columns:58.2% 41.8%;overflow:hidden;background:#f1f7ff}
.left{min-width:0;position:relative;display:grid;grid-template-rows:minmax(0,74.5vh) minmax(170px,25.5vh);background:#f5f9ff;z-index:1}
.hero{position:relative;min-height:0;overflow:hidden;background:#d9efff url("../images/login/hero-sky-strip.jpg") center top / 100% 30% no-repeat}
.hero-photo{position:absolute;top:30%;left:0;width:100%;height:70%;object-fit:cover;object-position:center 54%}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(241,250,255,.99) 0%,rgba(241,250,255,.98) 15%,rgba(241,250,255,.80) 28%,rgba(241,250,255,.28) 43%,rgba(241,250,255,0) 60%);pointer-events:none}
.brand{position:absolute;z-index:3;top:clamp(25px,4.6vh,42px);left:clamp(30px,5.6vw,90px);width:180px}
.brand img{display:block;width:100%;height:auto}
.hero-copy{position:absolute;z-index:3;top:clamp(76px,10vh,92px);left:clamp(30px,5.6vw,90px);width:min(70%,650px);padding-right:8px}
.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.15em;font-size:13px;font-weight:850;color:#1769d2;margin:0 0 14px}
.dot{width:9px;height:9px;flex:0 0 9px;background:#4b91f0;border-radius:50%;box-shadow:0 0 0 6px rgba(75,145,240,.18)}
.hero h1{font-size:clamp(42px,3.1vw,58px);line-height:1.02;letter-spacing:-.045em;margin:0;font-weight:850;color:#142d4f;max-width:670px}
.hero h1 span{color:#1769d2}
.hero-desc{font-size:18px;line-height:1.6;color:#587595;max-width:500px;margin:18px 0 0}
.doodle{position:absolute;z-index:3;object-fit:contain;pointer-events:none;filter:hue-rotate(42deg) drop-shadow(0 2px 2px rgba(255,255,255,.2))}
.doodle-learn{width:94px;right:12%;top:16%;transform:rotate(5deg)}
.doodle-better{width:105px;left:4%;bottom:15%;transform:rotate(-8deg)}
.caption{position:absolute;z-index:3;left:clamp(30px,5.6vw,90px);bottom:16px;color:white;text-shadow:0 1px 5px rgba(20,45,79,.7);font-size:12px}
.features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:0;padding:24px clamp(24px,4.5vw,78px);background:linear-gradient(105deg,#f5f9ff 0%,#fcfdff 100%);border-top:1px solid rgba(196,218,246,.8)}
.feature{min-width:0;display:grid;grid-template-columns:1fr;grid-template-rows:48px auto;gap:9px;align-items:center;justify-items:center;text-align:center;padding:0 15px;border-right:1px solid #e1eaf6}
.feature:first-child{padding-left:0}.feature:last-child{border-right:0;padding-right:0}
.feature-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#dcecff;color:#1769d2}
.feature-icon svg{width:22px;height:22px}
.feature h3{font-size:14px;margin:0 0 5px;font-weight:800;color:#142d4f}
.feature p{font-size:12px;line-height:1.5;color:#7a8ba1;margin:0 auto;max-width:150px}
.right{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;padding:40px 120px 38px 52px;background:linear-gradient(135deg,#f5f9ff 0%,#edf5ff 100%);isolation:isolate;z-index:2;overflow:visible}
.right:before{content:"";position:absolute;z-index:0;left:-138px;top:-13%;width:276px;height:126%;border-radius:50%;background:linear-gradient(90deg,#eaf3ff 0%,#f1f7ff 52%,#f5f9ff 100%);transform:none;pointer-events:none;box-shadow:-10px 0 28px rgba(48,105,180,.06)}
.right:after{content:"";position:absolute;z-index:-1;right:-65px;bottom:-95px;width:245px;height:245px;border-radius:50%;background:rgba(190,218,255,.48);pointer-events:none}
.side-doodle{position:absolute;z-index:1;width:94px;height:auto;object-fit:contain;right:2%;top:13%;opacity:.98;pointer-events:none}
.side-doodle-bottom{position:absolute;z-index:1;width:90px;height:auto;object-fit:contain;right:2%;bottom:24%;opacity:.98;pointer-events:none;transform:rotate(3deg)}
.auth-card{width:min(100%,520px);position:relative;z-index:3;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.96);border-radius:25px;padding:38px 42px 25px;box-shadow:0 22px 55px rgba(39,86,145,.10)}
.plant{position:absolute;width:112px;height:92px;object-fit:contain;left:50%;top:-54px;transform:translateX(-50%);z-index:4}
.welcome{margin:0 0 15px;color:#1769d2;font-size:15px;font-weight:800}.welcome span{margin-left:4px}
.auth-card h2{font-size:clamp(29px,2.05vw,36px);line-height:1.12;letter-spacing:-.04em;margin:0;font-weight:850;color:#142d4f}
.sub{font-size:15px;line-height:1.5;color:#7b8ba4;margin:12px 0 27px}
.field{margin-top:19px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:9px;color:#1a304d}
.input-wrap{position:relative}
.field input{width:100%;height:54px;border:1px solid #d6e1eb;border-radius:14px;padding:0 48px 0 52px;font-size:15px;color:#182f4c;background:#fff;outline:none;box-shadow:0 1px 2px rgba(20,45,79,.02);transition:border .2s,box-shadow .2s}
.field input::placeholder{color:#9aa9bc}.field input:focus{border-color:#5c9bf0;box-shadow:0 0 0 4px rgba(52,127,224,.13)}
.input-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#71849e;display:grid;place-items:center}
.input-icon svg,.toggle svg{width:19px;height:19px}
.toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#71849e;cursor:pointer}
.toggle:hover{background:#edf5ff}
.forgot{display:flex;justify-content:flex-end;margin-top:12px;font-size:13px}
.submit{width:100%;height:54px;margin-top:26px;display:flex;align-items:center;justify-content:center;gap:11px;border:0;border-radius:14px;color:#fff;font-weight:800;font-size:16px;background:linear-gradient(100deg,#2879e4,#1557b0);box-shadow:0 9px 22px rgba(23,105,210,.18);cursor:pointer;transition:transform .18s,box-shadow .18s}
.submit:hover{transform:translateY(-1px);box-shadow:0 12px 25px rgba(23,105,210,.24)}.submit svg{width:20px;height:20px}
.divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:#8999ad;font-size:12px}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:#e0e8ef}
.google{height:54px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #d7e2ed;border-radius:14px;background:#fff;color:#273d5b;font-size:15px;font-weight:750;cursor:pointer;transition:background .18s,border .18s}
.google:hover{background:#f8fbff;border-color:#b9d3f7}.google-g{font-family:Arial,sans-serif;font-weight:900;font-size:20px;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.signup{text-align:center;font-size:13px;color:#8493a7;margin:25px 0 0}.signup a{margin-left:5px;text-decoration:underline;text-underline-offset:3px}
.secure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#9aa8b8;margin-top:20px}.secure svg{width:14px;height:14px}
.status{display:none;margin-top:12px;padding:10px 12px;border-radius:9px;background:#fff6e4;color:#875b05;font-size:12px;line-height:1.4}.status.show{display:block}
@media(max-width:1500px){.layout{grid-template-columns:56% 44%}.hero-copy{width:75%}.hero h1{font-size:clamp(40px,3.6vw,55px)}.features{padding-left:4%;padding-right:4%}.feature{grid-template-columns:1fr;grid-template-rows:42px auto;gap:9px;padding:0 10px;text-align:center;justify-items:center}.feature-icon{width:38px;height:38px}.right{padding-left:42px;padding-right:100px}.auth-card{padding:34px 35px 24px}.side-doodle{width:75px}.side-doodle-bottom{width:72px}}
@media(max-width:1100px){.hero-photo{top:0;height:100%;object-position:center 58%}.layout{grid-template-columns:1fr}.left{grid-template-rows:minmax(510px,68vh) auto}.hero{min-height:510px}.right{min-height:790px;padding:90px 24px 65px;overflow:hidden}.right:before{left:-110px;width:220px;top:-8%;height:116%}.auth-card{width:min(100%,520px);padding:38px 42px 28px}.side-doodle{right:5%;top:24px;width:75px}.side-doodle-bottom{right:5%;bottom:24px;width:72px}}
@media(max-width:650px){.left{grid-template-rows:minmax(590px,auto) auto}.hero{min-height:590px}.brand{top:24px;width:165px}.hero-copy{top:104px;left:25px;right:22px;width:auto}.eyebrow{font-size:10px;letter-spacing:.1em;margin-bottom:16px}.hero h1{font-size:clamp(38px,10vw,50px)}.hero-desc{font-size:15px;max-width:340px}.doodle-learn{width:72px;right:5%;top:auto;bottom:18%}.doodle-better{width:70px;left:5%;bottom:5%}.caption{display:none}.features{grid-template-columns:1fr;gap:18px;padding:24px 25px}.feature,.feature:first-child,.feature:last-child{padding:0;border:0;grid-template-columns:44px 1fr}.feature-icon{width:40px;height:40px}.feature h3{font-size:14px;margin:0 0 3px}.feature p{max-width:none}.right{min-height:730px;padding:76px 15px 40px}.right:before{display:none}.auth-card{padding:34px 23px 25px;border-radius:21px}.plant{width:95px;height:80px;top:-61px}.auth-card h2{font-size:29px}.sub{font-size:14px;margin-bottom:23px}.field input{height:52px}.submit,.google{height:53px}.side-doodle,.side-doodle-bottom{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

.auth-alert,.alert{display:none;margin-top:12px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.5}
.auth-alert:not(:empty),.alert:not(:empty){display:block}
.alert-success{background:#eaf8f0;color:#17643a}
.alert-error{background:#fff0ef;color:#a3322a}
.alert button{width:100%}
.submit:disabled{opacity:.65;cursor:wait;transform:none}
.field-error{display:block;min-height:0;margin-top:5px;color:#b33a35;font-size:12px;line-height:1.4}
.field-error:empty{display:none}
.input-hint,.password-strength-text{display:block;margin-top:5px;color:#7387a3;font-size:12px;line-height:1.4}
.password-strength{height:5px;margin-top:9px;overflow:hidden;border-radius:5px;background:#e8eef5}
.password-strength-progress{appearance:none;display:block;height:100%;width:100%;border:0;border-radius:inherit;background:transparent}
.password-strength-progress::-webkit-progress-bar{border-radius:inherit;background:#e8eef5}
.password-strength-progress::-webkit-progress-value{border-radius:inherit;transition:width .2s ease}
.password-strength-progress::-moz-progress-bar{border-radius:inherit;transition:width .2s ease}
.password-strength-progress.strength-weak::-webkit-progress-value,.password-strength-progress.strength-weak::-moz-progress-bar{background:#c64040}
.password-strength-progress.strength-fair::-webkit-progress-value,.password-strength-progress.strength-fair::-moz-progress-bar{background:#b47b12}
.password-strength-progress.strength-good::-webkit-progress-value,.password-strength-progress.strength-good::-moz-progress-bar{background:#1682a0}
.password-strength-progress.strength-strong::-webkit-progress-value,.password-strength-progress.strength-strong::-moz-progress-bar{background:#147762}
.password-strength-text.strength-weak{color:#c64040}
.password-strength-text.strength-fair{color:#b47b12}
.password-strength-text.strength-good{color:#1682a0}
.password-strength-text.strength-strong{color:#147762}
.resend-verification-button{margin-top:12px}
.form-checkbox{display:flex;align-items:flex-start;gap:9px;margin-top:18px;color:#526985;font-size:13px;line-height:1.5}
.form-checkbox input{width:16px;height:16px;flex:0 0 16px;margin:2px 0 0;accent-color:#1769d2}
.form-checkbox label{font-weight:500}
.auth-register .right{align-items:flex-start;min-height:100vh;padding-top:80px;padding-bottom:60px}