/* Potent Books login and registration page. Scoped under .sppay-a so it never touches the theme. */
body.sppay-auth-page.sppay-standalone{display:grid;place-items:center;min-height:100vh;margin:0;padding:24px;background:#e9efeb;box-sizing:border-box}
body.sppay-auth-page.sppay-standalone .sppay-a-wrap{width:100%}
.sppay-a-wrap{container-type:inline-size;container-name:sppayauth;width:100%;margin:20px 0}

.sppay-a{--g-900:#0b4a2b;--g-800:#0f6b3f;--g-600:#1f8a54;--g-300:#5dbb8d;--g-100:#e4f2ea;--ink:#12201a;--muted:#6b7a72;--line:#e3eae6;--bg:#f1f4f2;--bad:#c2332d;
	display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);max-width:1120px;min-height:min(740px,calc(100vh - 48px));margin:0 auto;background:#fff;border-radius:30px;overflow:hidden;color:var(--ink);font-size:15px;line-height:1.5;box-shadow:0 30px 70px rgba(15,60,38,.16);box-sizing:border-box}
.sppay-a *{box-sizing:border-box}
.sppay-a a{text-decoration:none}

/* ---------- Brand panel ---------- */
.sppay-a-brand{position:relative;display:flex;flex-direction:column;gap:28px;padding:40px 44px;color:#fff;overflow:hidden;
	background:radial-gradient(120% 90% at 0% 0%,#26995f 0%,#0f6b3f 40%,#0a4126 100%)}
.sppay-a-brand::before{content:"";position:absolute;right:-110px;bottom:-110px;width:360px;height:360px;border-radius:50%;
	background:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 6px,transparent 6px 15px);pointer-events:none}
.sppay-a-brand>*{position:relative}
.sppay-a-logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;letter-spacing:-.01em}
.sppay-a-pitch h2{margin:6px 0 12px;font-size:clamp(28px,3.4cqw,42px);line-height:1.08;letter-spacing:-.03em;font-weight:700;color:#fff}
.sppay-a-pitch p{margin:0;max-width:40ch;color:rgba(255,255,255,.82);font-size:16px}
.sppay-a-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sppay-a-points li{display:flex;gap:14px;align-items:flex-start}
.sppay-a-points li>span{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.14);color:#fff}
.sppay-a-points strong{display:block;font-weight:600;color:#fff}
.sppay-a-points small{display:block;color:rgba(255,255,255,.74);font-size:13.5px}
.sppay-a-chart{margin-top:auto;max-width:300px;padding:16px 18px 14px;border-radius:20px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.sppay-a-chart b{display:block;font-weight:600;font-size:13px;color:rgba(255,255,255,.88);margin-bottom:10px}
.sppay-a-chart div{display:flex;align-items:flex-end;gap:7px;height:64px}
.sppay-a-chart i{flex:1;height:var(--h);border-radius:99px;background:#5dbb8d}
.sppay-a-chart i:nth-child(4){background:#fff}
.sppay-a-chart i.is-hatch{background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 2px,transparent 2px 5px)}

/* ---------- Form panel ---------- */
.sppay-a-main{position:relative;display:flex;flex-direction:column;justify-content:center;padding:44px clamp(24px,5cqw,68px);background:#fff}
.sppay-a-back{position:absolute;top:22px;left:clamp(24px,5cqw,68px);display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;font-weight:500}
.sppay-a-back:hover{color:var(--g-800)}
.sppay-a-back .sppay-a-ic{width:16px;height:16px}
.sppay-a-card{width:100%;max-width:410px;margin:18px auto 0}
.sppay-a-head h1{margin:0 0 6px;font-size:30px;line-height:1.15;letter-spacing:-.025em;font-weight:700;color:var(--ink)}
.sppay-a-head p{margin:0 0 22px;color:var(--muted)}

.sppay-a-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:18px;background:var(--bg);border-radius:15px}
.sppay-a-tabs button{appearance:none;border:0;background:transparent;padding:11px 8px;border-radius:11px;font:inherit;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.sppay-a-tabs button:hover{color:var(--ink)}
.sppay-a-tabs button.active{background:#fff;color:var(--g-800);box-shadow:0 1px 2px rgba(18,32,26,.08),0 4px 10px rgba(18,32,26,.06)}

.sppay-a-google{display:flex;align-items:center;justify-content:center;gap:12px;height:50px;width:100%;margin-bottom:6px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-weight:600;font-size:15px;transition:background .15s,border-color .15s,transform .1s}
.sppay-a-google:hover{background:#f6f9f7;border-color:#cfdbd4;color:var(--ink)}
.sppay-a-google:active{transform:translateY(1px)}
.sppay-a-g{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.sppay-a-or{display:flex;align-items:center;gap:12px;margin:14px 0 4px;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.sppay-a-or::before,.sppay-a-or::after{content:"";flex:1;height:1px;background:var(--line)}

.sppay-a .sppay-form{display:grid;gap:14px;margin-top:12px}
.sppay-a .sppay-form[hidden]{display:none}
.sppay-a-field label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
.sppay-a-input{position:relative}
.sppay-a-input>.sppay-a-ic{position:absolute;left:14px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:#8a9a92;pointer-events:none;transition:color .15s}
.sppay-a-input input{display:block;width:100%;height:50px;margin:0;padding:0 44px 0 44px;border:1.5px solid var(--line);border-radius:14px;background:#f8faf9;color:var(--ink);font:inherit;font-size:15.5px;outline:0;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
.sppay-a-input input::placeholder{color:#a3b0a9}
.sppay-a-input input:hover{border-color:#cfdbd4}
.sppay-a-input input:focus{border-color:var(--g-600);background:#fff;box-shadow:0 0 0 4px rgba(31,138,84,.14)}
.sppay-a-input:focus-within>.sppay-a-ic{color:var(--g-600)}
.sppay-a-input input.is-invalid{border-color:var(--bad);background:#fffafa;box-shadow:0 0 0 4px rgba(194,51,45,.10)}
.sppay-a-eye{position:absolute;right:6px;top:50%;width:38px;height:38px;margin-top:-19px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:#7d8d85;cursor:pointer}
.sppay-a-eye:hover{background:var(--bg);color:var(--ink)}
.sppay-a-eye .sppay-a-ic{position:static;margin:0;pointer-events:none}
.sppay-a-eye .is-off{display:none}
.sppay-a-eye[aria-pressed="true"] .is-on{display:none}
.sppay-a-eye[aria-pressed="true"] .is-off{display:inline}
.sppay-a-hint{display:block;margin-top:6px;color:var(--muted);font-size:12.5px}

.sppay-a-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.sppay-a-meter i{height:4px;border-radius:99px;background:var(--line);transition:background .2s}
.sppay-a-meter[data-level="1"] i:nth-child(-n+1){background:#e0574f}
.sppay-a-meter[data-level="2"] i:nth-child(-n+2){background:#e9a23b}
.sppay-a-meter[data-level="3"] i:nth-child(-n+3){background:#7cc08d}
.sppay-a-meter[data-level="4"] i{background:var(--g-600)}

.sppay-a-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sppay-a-check{display:inline-flex;align-items:center;gap:9px;margin:0!important;font-weight:500!important;color:var(--ink);cursor:pointer}
.sppay-a-check input{width:18px;height:18px;margin:0;accent-color:var(--g-800)}
.sppay-a-link{color:var(--g-800);font-weight:600;font-size:14px}
.sppay-a-link:hover{text-decoration:underline}

.sppay-a-more{border:1.5px dashed var(--line);border-radius:14px;padding:0 14px}
.sppay-a-more summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:14px;color:var(--ink);list-style:none}
.sppay-a-more summary::-webkit-details-marker{display:none}
.sppay-a-more summary::before{content:"+";display:inline-block;width:18px;color:var(--g-800);font-weight:700}
.sppay-a-more[open] summary::before{content:"\2212"}
.sppay-a-more summary em{color:var(--muted);font-style:normal;font-weight:500}
.sppay-a-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:14px}
.sppay-a-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.sppay-a-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:4px;border:0;border-radius:14px;background:linear-gradient(180deg,var(--g-800),var(--g-900));color:#fff!important;font:inherit;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 10px 22px rgba(15,107,63,.28);transition:transform .12s,box-shadow .15s,opacity .15s}
.sppay-a-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(15,107,63,.34)}
.sppay-a-btn:active{transform:translateY(0)}
.sppay-a-btn:disabled{cursor:progress;opacity:.85;transform:none}
.sppay-a-spin{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sppay-a-rot .7s linear infinite}
.sppay-a-btn.is-loading .sppay-a-spin{display:inline-block}
@keyframes sppay-a-rot{to{transform:rotate(360deg)}}

.sppay-a .sppay-form-msg{margin:0;font-size:14px}
.sppay-a .sppay-form-msg:empty{display:none}
.sppay-a .sppay-error,.sppay-a .sppay-ok{display:block;padding:11px 14px;border-radius:12px;margin:0 0 14px;font-size:14px}
.sppay-a .sppay-form-msg.sppay-error,.sppay-a .sppay-form-msg.sppay-ok{margin:0}
.sppay-a-foot{margin:18px 0 0;text-align:center;color:var(--muted);font-size:14px}
.sppay-a-foot a{color:var(--g-800);font-weight:600}
.sppay-a a:focus-visible,.sppay-a button:focus-visible,.sppay-a summary:focus-visible{outline:3px solid rgba(31,138,84,.45);outline-offset:2px}

/* ---------- Smaller screens: brand panel becomes a slim header ---------- */
@container sppayauth (max-width:860px){
	.sppay-a{grid-template-columns:1fr;min-height:0;border-radius:24px}
	.sppay-a-brand{padding:22px 24px;gap:0}
	.sppay-a-brand::before{width:200px;height:200px;right:-70px;bottom:auto;top:-70px}
	.sppay-a-pitch,.sppay-a-points,.sppay-a-chart{display:none}
	.sppay-a-main{padding:30px 22px 34px}
	.sppay-a-back{position:static;margin-bottom:14px}
	.sppay-a-card{margin-top:0}
	.sppay-a-head h1{font-size:26px}
}
@container sppayauth (max-width:420px){
	.sppay-a-two{grid-template-columns:1fr}
}
@media (max-width:540px){
	body.sppay-auth-page.sppay-standalone{padding:12px;place-items:start center}
}
@media (prefers-reduced-motion:reduce){.sppay-a *{transition:none!important;animation:none!important}}