body.center{background:radial-gradient(700px 360px at 50% -5%,var(--accent-soft),transparent 70%),var(--bg)}
.auth{width:100%;max-width:420px;display:grid;gap:16px;justify-items:stretch;text-align:left}
.auth>.logo{justify-self:center;margin-bottom:6px}.auth>a.sm{text-align:center}
.auth .card{padding:28px}.auth h1{font-size:26px;margin-bottom:6px}.auth form{margin-top:22px}
.demo{box-shadow:none;padding:16px 20px;background:var(--surface2)}.demo-row{display:flex;gap:8px;margin-top:10px}
/* checkout */
.pay{max-width:880px;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.pay h1{font-size:28px;margin-bottom:8px}
.pay .sum{display:grid;gap:12px;margin-top:20px}.pay .row{display:flex;justify-content:space-between;gap:12px}
.pay .row.tot{border-top:1px solid var(--line);padding-top:14px;font-weight:700;font-size:18px}
.pay ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}.pay li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:10px}
.sim{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:13.5px;margin:18px 0}
.ok{display:none;text-align:center;padding:12px 0}.ok .tick{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:32px;margin:0 auto 16px;animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(0)}}
.pay.done .ok{display:block}.pay.done .form{display:none}
@media(max-width:760px){.pay{grid-template-columns:1fr}}