*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#090909;color:#f5f0e8;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{width:100%;max-width:400px;background:#141311;border:1px solid #2a2722;border-radius:16px;padding:36px 28px;text-align:center}
.logo{width:157px;height:auto;display:block;margin:0 auto 22px}
h1{font-size:24px;margin:0 0 6px}
.lead{margin:0 0 18px;color:#bdb5a8}
/* Sign-in button: Spark styled face, gold slides across on hover, Google's real button invisible on top */
.gwrap{position:relative;width:100%;max-width:300px;height:44px;margin:0 auto;border-radius:10px;overflow:hidden}
.gface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#1d1b18;border:1px solid #3a352d;border-radius:10px;color:#f5f0e8;font-weight:600;font-size:15px;overflow:hidden;transition:color .3s ease,border-color .3s ease}
.gface:before{content:"";position:absolute;inset:0;background:#d9b45c;transform:translateX(-101%);transition:transform .35s ease}
.gface>*{position:relative}
.g-icon{background:#fff;border-radius:50%;padding:3px;width:26px;height:26px;flex:none}
.gwrap:hover .gface,.gwrap:focus-within .gface{color:#141311;border-color:#d9b45c}
.gwrap:hover .gface:before,.gwrap:focus-within .gface:before{transform:translateX(0)}
.gbtn{position:absolute;inset:0;opacity:.001;overflow:hidden;display:flex;align-items:center;justify-content:center}
.msg{margin:8px 0 0;color:#ffb48a}
.msg:empty{display:none}
.small{margin:18px 0 0;font-size:14px;color:#8f877b}
.small a{color:#ff8a52}
/* The login page never scrolls, sideways or up and down (Lewis 11 Nov). The help panel scrolls on its own if needed. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body{height:100dvh;min-height:0}
.card{transition:transform .35s ease}
.help-link{margin:10px auto 0;display:inline-block;background:none;border:0;color:#d9b45c;font:inherit;font-size:14px;cursor:pointer;padding:8px 6px;border-bottom:1px solid transparent}
.help-link:hover,.help-link:focus-visible{border-bottom-color:#d9b45c;outline:none}
.help{position:fixed;top:0;right:0;height:100%;width:min(380px,100%);background:#141311;border-left:1px solid #2a2722;padding:40px 28px 28px;transform:translateX(100%);transition:transform .35s ease;overflow-y:auto;text-align:left;z-index:10}
.help-on .help{transform:translateX(0)}
.help h2{margin:0 0 6px;font-size:22px}
.help-lead{margin:0 0 22px;color:#bdb5a8;font-size:15px}
.help label{display:block;font-size:14px;color:#cfc7ba;margin:0 0 14px}
.help input,.help textarea{display:block;width:100%;margin-top:6px;background:#0d0c0b;border:1px solid #34302a;border-radius:10px;color:#f5f0e8;font:inherit;padding:11px 12px}
.help input:focus,.help textarea:focus{outline:none;border-color:#d9b45c}
.help textarea{resize:vertical;min-height:96px}
.help .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.help-send{width:100%;margin-top:6px;background:#d9b45c;color:#141311;border:0;border-radius:10px;padding:12px;font:inherit;font-weight:600;cursor:pointer}
.help-send:disabled{opacity:.6;cursor:default}
.help-status{min-height:22px;margin:12px 0 0;font-size:14px;color:#ffb48a}
.help-x{position:absolute;top:8px;right:10px;min-width:44px;min-height:44px;background:none;border:0;color:#bdb5a8;font-size:28px;line-height:1;cursor:pointer;padding:6px}
@media (min-width:900px){.help-on .card{transform:translateX(-190px)}}
@media (max-width:640px){.help{top:auto;bottom:0;height:auto;max-height:88%;width:100%;border-left:0;border-top:1px solid #2a2722;border-radius:16px 16px 0 0;transform:translateY(100%)}.help-on .help{transform:translateY(0)}}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
/* Email code sign-in (11 Nov) */
[hidden]{display:none!important}
.or{display:flex;align-items:center;gap:12px;max-width:300px;margin:16px auto;color:#6f685d;font-size:13px}
.or:before,.or:after{content:"";flex:1;height:1px;background:#2a2722}
.ebtn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;height:44px;margin:0 auto;background:#1d1b18;border:1px solid #3a352d;border-radius:10px;color:#f5f0e8;font:inherit;font-weight:600;font-size:15px;cursor:pointer;overflow:hidden;transition:color .3s ease,border-color .3s ease}
.ebtn:before{content:"";position:absolute;inset:0;background:#d9b45c;transform:translateX(-101%);transition:transform .35s ease}
.ebtn>*{position:relative}
.ebtn svg{fill:none;stroke:#d9b45c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.ebtn:hover,.ebtn:focus-visible{color:#141311;border-color:#d9b45c;outline:none}
.ebtn:hover:before,.ebtn:focus-visible:before{transform:translateX(0)}
.ebtn:hover svg,.ebtn:focus-visible svg{stroke:#141311}
.step{max-width:300px;margin:0 auto;text-align:left;animation:stepin .3s ease}
@keyframes stepin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-label{display:block;font-size:14px;color:#cfc7ba;margin:0 0 6px}
.step input[type=email]{display:block;width:100%;height:46px;background:#0d0c0b;border:1px solid #34302a;border-radius:10px;color:#f5f0e8;font:inherit;padding:0 12px}
.step input[type=email]:focus{outline:none;border-color:#d9b45c}
.gold-btn{display:block;width:100%;height:46px;margin-top:12px;background:#d9b45c;color:#141311;border:0;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;transition:filter .2s}
.gold-btn:hover{filter:brightness(1.08)}
.gold-btn:disabled{opacity:.6;cursor:default}
.back-link{display:inline-flex;align-items:center;min-height:40px;background:none;border:0;color:#bdb5a8;font:inherit;font-size:14px;cursor:pointer;padding:0 4px}
.back-link:hover:not(:disabled){color:#d9b45c}
.back-link:disabled{opacity:.5;cursor:default}
#email-step .back-link{display:flex;margin:6px auto 0}
.step-lead{margin:0 0 16px;text-align:center;color:#bdb5a8;font-size:15px}
.step-lead strong{color:#f5f0e8;word-break:break-all}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;cursor:text}
.otp span{height:54px;display:grid;place-items:center;background:#0d0c0b;border:1px solid #34302a;border-radius:10px;font-size:24px;font-weight:700;color:#f5f0e8;transition:border-color .15s}
.otp span.full{border-color:#5a5243}
.otp span.on{border-color:#d9b45c;box-shadow:0 0 0 3px rgba(217,180,92,.18)}
.otp-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;font-size:16px}
.step-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;margin:8px 0 0}
.step-foot .dot{color:#5c564d}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (max-width:360px){.otp{gap:5px}.otp span{height:48px;font-size:21px}}
.step{position:relative}
.step-foot{flex-direction:column;gap:0}.step-foot .dot{display:none}
/* Face ID / fingerprint button (12 Nov) */
.pkbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;height:48px;margin:0 auto 14px;background:#d9b45c;color:#141311;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:filter .2s,transform .1s}
.pkbtn:hover{filter:brightness(1.08)}
.pkbtn:active{transform:scale(.98)}
.pkbtn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Signing in screen (12 Nov) */
body.going .card>*:not(.logo):not(.going-msg){display:none!important}
.going-msg{display:flex;flex-direction:column;align-items:center;gap:14px;margin:18px 0 8px;color:#cfc7ba;font-size:15px;animation:stepin .25s ease}
.spin{width:28px;height:28px;border:3px solid rgba(217,180,92,.25);border-top-color:#d9b45c;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Signing in: just a spinner on black (Lewis 12 Nov) */
body.going .card{display:none!important}
.going-screen{position:fixed;inset:0;background:#090909;display:grid;place-items:center;z-index:50}
.going-screen .spin{width:34px;height:34px}

.help-status.ok{display:flex;align-items:flex-start;gap:10px;color:#9be3b4;background:rgba(46,160,90,.12);border:1px solid rgba(46,160,90,.35);border-radius:12px;padding:12px 14px}
.help-status.ok::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;background:#2ea05a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}