.account-page{
  max-width:550px;
  margin:0 auto;
  padding:32px 40px}
  .auth-logo{
    width:95px;
    height:95px;
    object-fit:contain;
    margin:0 auto 20px}
    .account-page>.eyebrow,.account-page>#account-heading,.account-intro{
      text-align:center}
      .account-page #account-heading{
        font-size:38px;
        margin-bottom:12px}
        .account-intro,.account-help{
          color:var(--muted)}
          .account-intro{
            font-size:13px}
            .account-help{
              font-size:12px}
              .account-help a{
                color:var(--jade)}
                #status{
                  font-size:12px;
                  min-height:24px;
                  overflow-wrap:anywhere;
                  margin:15px 0}
                  #status[data-error]{
                    color:#a02c26}
                    .provider-buttons{
                      display:grid;
                      gap:10px}
                      .account-page .btn{
                        width:100%;
                        border-radius:11px}
                        .provider.apple{
                          background:#17271f;
                          border-color:#17271f}
                          .provider.google{
                            background:#fff;
                            color:#253b31;
                            border-color:var(--line)}
                            .account-page button:disabled{
                              opacity:.5;
                              cursor:not-allowed;
                              transform:none}
                              .account-divider{
                                display:flex;
                                align-items:center;
                                gap:12px;
                                font-size:11px;
                                color:var(--muted);
                                margin:24px 0}
                                .account-divider:before,.account-divider:after{
                                  content:'';
                                  flex:1;
                                  height:1px;
                                  background:var(--line)}
                                  .account-page fieldset{
                                    border:0;
                                    padding:0;
                                    margin:0;
                                    min-width:0}
                                    .account-page input{
                                      margin-bottom:18px}
                                      .account-page label{
                                        font-size:12px}
                                        .account-page fieldset .btn{
                                          margin-bottom:16px}
                                          .recovery-link{
                                            display:block;
                                            font-size:11px;
                                            text-align:right;
                                            margin:-2px 0 20px}
                                            #user-id{
                                              overflow-wrap:anywhere}
                                              #signed-in>h2{
                                                font-size:29px}
                                                #signed-in>p{
                                                  font-size:13px}
                                                  .account-shortcuts{
                                                    display:grid;
                                                    gap:10px;
                                                    margin:22px 0}
                                                    .account-shortcuts a{
                                                      display:flex;
                                                      align-items:center;
                                                      gap:12px;
                                                      border:1px solid var(--line);
                                                      border-radius:12px;
                                                      padding:15px;
                                                      font-size:12px;
                                                      font-weight:700;
                                                      text-decoration:none;
                                                      background:var(--paper)}
                                                      .account-shortcuts a .icon:last-child{
                                                        margin-left:auto;
                                                        width:16px}
                                                        .referral-card{
                                                          border-top:1px solid var(--line);
                                                          margin:28px 0;
                                                          padding-top:24px}
                                                          .referral-card h2{
                                                            font-size:26px;
                                                            margin-bottom:12px}
                                                            #referral-status,#referral-assigned,#copy-status{
                                                              font-size:12px;
                                                              overflow-wrap:anywhere}
                                                              #referral-status[data-error]{
                                                                color:#a02c26}
                                                                .streamer-stats{
                                                                  display:grid;
                                                                  grid-template-columns:repeat(2,minmax(0,1fr));
                                                                  gap:12px;
                                                                  margin:24px 0}
                                                                  .streamer-stats div{
                                                                    padding:15px;
                                                                    border-radius:12px;
                                                                    background:var(--soft)}
                                                                    .streamer-stats dt{
                                                                      color:var(--muted);
                                                                      font-size:11px}
                                                                      .streamer-stats dd{
                                                                        margin:8px 0 0;
                                                                        font-size:clamp(18px,5vw,24px);
                                                                        font-weight:700;
                                                                        overflow-wrap:anywhere}
                                                                        .commission-history{
                                                                          padding:0;
                                                                          list-style:none}
                                                                          .commission-history li{
                                                                            padding:14px 0;
                                                                            border-top:1px solid var(--line);
                                                                            font-size:12px;
                                                                            overflow-wrap:anywhere}
                                                                            .commission-history small{
                                                                              display:block;
                                                                              color:var(--muted)}
                                                                              #referral-code{
                                                                                text-transform:uppercase}
                                                                                #logout{
                                                                                  background:white;
                                                                                  color:var(--jade);
                                                                                  border-color:var(--line)}
                                                                                  body[data-page=affiliates] .account-page{
                                                                                    margin-top:30px}
                                                                                    body[data-page=login] .account-shortcuts{
                                                                                      display:none}
                                                                                      @media(max-width:600px){
                                                                                        .account-page{
                                                                                          padding:27px 23px;
                                                                                          border-radius:19px}
                                                                                          .account-page #account-heading{
                                                                                            font-size:34px}
                                                                                            .auth-logo{
                                                                                              width:85px;
                                                                                              height:85px}
                                                                                              .account-page>.eyebrow{
                                                                                                font-size:9px}
                                                                                                .streamer-stats div{
                                                                                                  padding:13px}
                                                                                                  .streamer-stats dt{
                                                                                                    font-size:10px}
                                                                                                  }
                                                                                                  @media(max-width:360px){
                                                                                                    .account-page{
                                                                                                      padding:24px 18px}
                                                                                                      .account-page #account-heading{
                                                                                                        font-size:32px}
                                                                                                        .streamer-stats{
                                                                                                          gap:8px}
                                                                                                        }

.account-page.is-signed-in{max-width:1080px}
.center-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.center-card{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--paper)}
.center-card .eyebrow{color:var(--jade);margin:0 0 8px}
.center-card h2{font-size:26px;margin:0 0 15px}
.center-card h3{font-size:17px;margin:0 0 5px}
.center-card a{color:var(--jade);font-size:12px;font-weight:700}
.center-news{padding:16px 0;border-top:1px solid var(--line)}
.center-news .badge{display:inline-block;margin-bottom:10px}
.center-news p,.character-card p{font-size:12px;color:var(--muted);margin:0}
.character-list{display:grid;gap:10px}
.character-card{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;background:var(--soft)}
.character-card img{width:48px;height:48px;object-fit:contain}
.center-inventory{margin-bottom:24px}
.center-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.center-links{margin-bottom:24px}
.linked-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.linked-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:70px;padding:12px;border-radius:12px;background:var(--soft);box-sizing:border-box}
.linked-list form{margin:0}
.linked-list strong{color:var(--jade);font-size:13px}
#links-status{font-size:12px;color:var(--muted);margin:10px 0 0}
.inventory-group{margin-top:18px}
.inventory-group h3{padding-bottom:8px;border-bottom:1px solid var(--line)}
.inventory-group ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inventory-group li{padding:12px;border-radius:10px;background:var(--soft);min-width:0;overflow-wrap:anywhere}
.inventory-group li strong,.inventory-group li small{display:block}
.inventory-group li strong{font-size:12px}
.inventory-group li small{font-size:11px;color:var(--muted);margin-top:4px}
#characters-status,#inventory-status{font-size:12px;color:var(--muted)}
.mfa-qr{display:block;width:220px;height:220px;max-width:100%;margin:20px auto;background:white}
#mfa-panel .btn{margin-bottom:12px}
#mfa-secret{font-size:12px}
#mfa-recovery-codes{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.is-signed-in>.auth-logo,.is-signed-in #signed-in>h2{display:none}
.is-signed-in .streamer-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.is-signed-in .account-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){
  .center-grid,.inventory-group ul{grid-template-columns:1fr}
  .center-card{padding:18px}
  .is-signed-in .streamer-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-signed-in .account-shortcuts{grid-template-columns:1fr}
}

#handle-preview{overflow-wrap:anywhere}
#handle-form{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.registration-invitation{margin:24px 0;padding:24px 18px;border:1px solid var(--line);border-radius:16px;background:var(--soft);text-align:center;overflow-wrap:anywhere}
.registration-invitation .eyebrow{margin-bottom:8px;color:var(--jade)}
.registration-invitation h2{font-size:clamp(28px,7vw,40px);margin:0 0 10px;color:var(--jade);line-height:1.15}
.registration-invitation p{font-size:13px;margin:8px 0 0}
.registration-referrer{margin:20px 0 24px}
.registration-referrer-controls{display:flex;gap:10px;align-items:start}
.registration-referrer-controls input{flex:1;min-width:0;margin:0}
.registration-referrer-controls .btn{width:auto;white-space:nowrap}
.registration-referrer #registration-referrer-status{margin:8px 0 0}
#registration-referrer-status[data-error]{color:#a02c26}
@media(max-width:430px){.registration-referrer-controls{flex-direction:column}.registration-referrer-controls .btn{width:100%}}
#manual-register .account-help{margin:0 0 20px}
#registration-status[data-error]{color:#a02c26}
.registration-download{margin-top:28px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:120px}
.registration-download h2{font-size:28px;margin:8px 0 16px}
.registration-download .provider-buttons{margin:20px 0}
.registration-account-link{display:inline-block;margin-top:12px;color:var(--jade)}
body[data-page=register].is-registration-complete .registration-download{margin-top:16px}
