:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: calc(16px + 2pt); color: #122a3b; background: #edf3f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 8% 8%, rgba(36, 179, 162, .14), transparent 30%), #edf3f6; }
.login-shell { width: min(1120px, calc(100% - 40px)); min-height: 660px; margin: max(28px, calc((100vh - 660px) / 2)) auto; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(4, 26, 42, .16); }
.brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 52px 60px; color: #fff; background: linear-gradient(145deg, rgba(7, 28, 44, .96), rgba(5, 65, 75, .93)), url("/sunsinc-logo.png") center / 78% no-repeat; }
.brand-panel::after { content: ""; position: absolute; inset: auto -70px -110px auto; width: 330px; height: 330px; border: 1px solid rgba(78, 219, 196, .22); border-radius: 50%; box-shadow: 0 0 0 45px rgba(78, 219, 196, .04), 0 0 0 95px rgba(78, 219, 196, .03); }
.brand-panel > * { position: relative; z-index: 1; }
.brand-panel > img { width: 210px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.eyebrow { margin: 0 0 12px; color: #42d3bc; font-size: calc(12px + 2pt); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.brand-panel h1 { margin: 0 0 20px; font-size: calc(clamp(38px, 5vw, 58px) + 2pt); line-height: 1.02; letter-spacing: -.04em; }
.brand-panel div > p:last-child { max-width: 480px; margin: 0; color: #bed1d8; font-size: calc(16px + 2pt); line-height: 1.65; }
.brand-panel ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; color: #d8e6ea; font-size: calc(13px + 2pt); }
.brand-panel li { display: flex; align-items: center; gap: 13px; }
.brand-panel li span { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(66, 211, 188, .45); border-radius: 50%; color: #42d3bc; font-size: calc(10px + 2pt); font-weight: 800; }
.form-panel { display: grid; place-items: center; padding: 48px; }
form { width: min(100%, 390px); }
form h2 { margin: 0 0 11px; color: #092238; font-size: calc(34px + 2pt); letter-spacing: -.035em; }
.intro { margin: 0 0 34px; color: #647985; font-size: calc(14px + 2pt); line-height: 1.55; }
label { display: block; margin: 18px 0 8px; color: #203a49; font-size: calc(12px + 2pt); font-weight: 750; }
input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid #cbd8df; border-radius: 10px; outline: none; color: #092238; background: #fbfdfe; font: inherit; transition: border .2s, box-shadow .2s; }
input:focus { border-color: #0b9b9c; box-shadow: 0 0 0 4px rgba(11, 155, 156, .12); }
.error { min-height: 20px; margin: 12px 0 2px; color: #b72b32; font-size: calc(12px + 2pt); }
button { width: 100%; height: 52px; margin-top: 7px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(115deg, #087bc1, #0b9b9c); box-shadow: 0 10px 24px rgba(8, 123, 193, .22); font: inherit; font-size: calc(13px + 2pt); font-weight: 800; cursor: pointer; }
button:hover { filter: brightness(1.05); transform: translateY(-1px); }
button:disabled { cursor: wait; filter: grayscale(.2); opacity: .7; transform: none; }
form small { display: block; margin-top: 18px; color: #7c8f99; font-size: calc(11px + 2pt); line-height: 1.55; text-align: center; }
@media (max-width: 760px) { .login-shell { min-height: 0; grid-template-columns: 1fr; margin: 20px auto; } .brand-panel { min-height: 310px; padding: 34px; } .brand-panel h1 { font-size: calc(38px + 2pt); } .brand-panel ul { display: none; } .brand-panel > img { width: 170px; } .form-panel { padding: 42px 28px; } }