.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-side{position:relative;overflow:hidden;background:linear-gradient(180deg,#E9EEEC 0%,#DCE7E4 52%,#C7DAD6 100%);
  display:flex;flex-direction:column;justify-content:space-between;padding:56px}
html[data-theme="dark"] .auth-side{background:linear-gradient(180deg,#0F1D22 0%,#132A30 55%,#173A3D 100%)}
.horizon{position:absolute;inset:0}
.sun{position:absolute;left:50%;top:44%;width:150px;height:150px;margin-left:-75px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#F6DFB4 0%,#EFC98C 58%,rgba(239,201,140,0) 72%);opacity:.95}
.sea{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%}
.sea path{transform-origin:center}
.sea .w1{fill:#BFD5D1}.sea .w2{fill:#7FAEAA}.sea .w3{fill:#1F6B6E}
html[data-theme="dark"] .sea .w1{fill:#1C4246}html[data-theme="dark"] .sea .w2{fill:#24575A}html[data-theme="dark"] .sea .w3{fill:#2F7A7B}
@media (prefers-reduced-motion:no-preference){
  .sea .w1{animation:drift 14s ease-in-out infinite alternate}
  .sea .w2{animation:drift 11s ease-in-out infinite alternate-reverse}
  .sea .w3{animation:drift 9s ease-in-out infinite alternate}
}
@keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.side-quote{position:relative;z-index:2;margin:0;font-size:clamp(34px,4vw,54px);line-height:1.05;color:var(--ink);max-width:12ch}
.side-quote em{font-style:italic;color:var(--tide)}

.auth-main{display:flex;flex-direction:column;padding:40px clamp(20px,6vw,72px) 28px;gap:22px;max-width:620px;width:100%;justify-self:center}
.panel h1{font-size:40px;line-height:1.05;margin-bottom:8px}
.panel .lead{margin-bottom:20px}
.panel .field{margin-bottom:14px}
.panel .btn.block{margin-top:6px}
.google{gap:10px}
.or{display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:12.5px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.links{margin-top:16px}
.code{font-size:26px!important;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.code-sm{letter-spacing:.2em;text-transform:uppercase}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2);margin:6px 0 10px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--tide);flex:0 0 auto}
.demo{border-top:1px solid var(--line);padding-top:20px}
.demo .muted{margin:6px 0 12px}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.demo-b{text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:2px}
.demo-b:hover{border-color:var(--tide)}
.demo-b b{font-size:14px;font-weight:600}
.demo-b span{font-size:11.5px;color:var(--ink3)}
.demo-b.staff{background:var(--surface2)}
.auth-foot{margin-top:auto;font-size:12.5px;color:var(--ink3)}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{min-height:220px;padding:26px 22px}
  .side-quote{font-size:30px}
  .sun{width:100px;height:100px;margin-left:-50px;top:30%}
  .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}