:root{--account-blue:#123f8c;--account-dark:#0a244f;--account-gold:#f4c542;--account-ink:#172231;--account-muted:#5b6777;--account-line:#dce2ea;--account-danger:#a92525;--account-success:#176538}
*{box-sizing:border-box}
.account-page{min-height:calc(100vh - 190px);background:linear-gradient(135deg,#eef3fa 0%,#fff 52%,#f9f1d5 100%);padding:64px 20px}
.account-shell{width:min(1080px,100%);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.account-intro{color:var(--account-ink)}
.account-kicker{margin:0 0 10px;color:var(--account-blue);font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.account-intro h1{margin:0 0 20px;color:var(--account-dark);font-size:clamp(40px,5vw,64px);line-height:.96;letter-spacing:-.04em;text-transform:uppercase;font-style:italic}
.account-intro>p{font-size:19px;line-height:1.65;color:var(--account-muted)}
.account-intro ul{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:13px}
.account-intro li{position:relative;padding-left:30px;font-size:16px;font-weight:750}
.account-intro li::before{content:"✓";position:absolute;left:0;top:-2px;color:var(--account-blue);font-size:20px;font-weight:1000}
.account-card{background:#fff;border-top:7px solid var(--account-blue);box-shadow:0 22px 60px rgba(12,38,79,.16);padding:34px;border-radius:2px}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--account-line);margin:-8px 0 30px}
.account-tab{appearance:none;border:0;border-bottom:4px solid transparent;background:transparent;padding:15px 10px;color:#687486;font:inherit;font-size:16px;font-weight:900;cursor:pointer}
.account-tab.active{border-bottom-color:var(--account-gold);color:var(--account-dark)}
.account-form-panel h2,.session-panel h2{margin:0 0 8px;color:var(--account-dark);font-size:30px;line-height:1.1}
.account-form-panel>p,.session-panel>p{margin:0 0 24px;color:var(--account-muted);font-size:16px;line-height:1.55}
.account-form-panel form{display:grid;gap:10px}
.account-form-panel label{margin-top:5px;color:var(--account-ink);font-size:14px;font-weight:850}
.account-form-panel input{width:100%;min-height:50px;border:1px solid #bac4d1;border-radius:3px;padding:10px 13px;background:#fff;color:var(--account-ink);font:inherit;font-size:17px}
.account-form-panel input:focus{outline:3px solid rgba(18,63,140,.18);border-color:var(--account-blue)}
.code-input{max-width:230px;letter-spacing:.28em;font-size:25px!important;font-weight:850;text-align:center}
.account-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:2px solid var(--account-blue);border-radius:3px;padding:10px 20px;font:inherit;font-size:15px;font-weight:900;text-decoration:none;cursor:pointer}
.account-button.primary{background:var(--account-blue);color:#fff}
.account-button.primary:hover{background:var(--account-dark);border-color:var(--account-dark)}
.account-button.secondary{background:#fff;color:var(--account-blue)}
.account-button.full{width:100%;margin-top:12px}
.account-button:disabled{cursor:wait;opacity:.65}
.text-button,.back-button{appearance:none;border:0;background:transparent;padding:12px 0;color:var(--account-blue);font:inherit;font-size:14px;font-weight:850;text-decoration:underline;cursor:pointer}
.account-help-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.back-button{padding-top:0;text-decoration:none}
.account-message{margin:0 0 22px;border-left:5px solid var(--account-blue);background:#edf4ff;padding:13px 15px;color:var(--account-dark);font-size:15px;font-weight:750;line-height:1.45}
.account-message.error{border-color:var(--account-danger);background:#fff0f0;color:#7d1d1d}
.account-message.success{border-color:var(--account-success);background:#eef9f2;color:#15572f}
.session-panel>span{display:block;color:var(--account-muted);font-size:13px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.session-panel>strong{display:block;margin:5px 0 20px;color:var(--account-dark);font-size:24px;overflow-wrap:anywhere}
.account-actions{display:flex;gap:12px;flex-wrap:wrap}
[hidden]{display:none!important}
@media(max-width:820px){.account-page{padding:42px 16px}.account-shell{grid-template-columns:1fr;gap:30px}.account-intro h1{font-size:44px}.account-intro>p{font-size:17px}.account-intro ul{display:none}.account-card{padding:26px 20px}}
@media(max-width:480px){.account-intro h1{font-size:37px}.account-card{padding:24px 16px}.account-form-panel h2{font-size:27px}.account-actions{display:grid}.account-button{width:100%}}
