/* ============================================================
   BattleRanker Accounts — Electric Yellow Theme 1
   ============================================================ */

.br-account-body{
    margin:0;
    background:
        radial-gradient(circle at 12% 0,var(--theme-raw-rgba-231-255-0-05-0d7957),transparent 360px),
        var(--theme-bg);
    color:var(--theme-text);
}

.br-account-shell{
    width:min(760px,calc(100% - 32px));
    margin:0 auto;
    padding:54px 0 80px;
}

.br-auth-card{
    border:1px solid var(--theme-border);
    border-top:4px solid var(--theme-page-accent);
    border-radius:10px;
    background:var(--theme-surface);
    padding:34px;
    box-shadow:0 16px 36px var(--theme-raw-rgba-0-0-0-24-120af2);
}

.br-auth-kicker{
    display:inline-block;
    border-radius:4px;
    background:var(--theme-page-accent);
    color:var(--theme-ink);
    padding:6px 9px;
    font-size:10px;
    line-height:1;
    font-weight:950;
    letter-spacing:.08em;
    box-shadow:3px 3px 0 var(--theme-shadow-deep);
}

.br-auth-card h1{
    margin:13px 0 8px;
    color:var(--theme-raw-fff);
    font-size:clamp(46px,8vw,76px);
    line-height:.9;
    letter-spacing:-.045em;
    font-style:italic;
}

.br-auth-intro{
    max-width:570px;
    margin:0 0 24px;
    color:var(--theme-raw-aeb5c8);
    font-weight:700;
    line-height:1.5;
}

.br-auth-notice{
    margin:0 0 20px;
    padding:14px 16px;
    border:1px solid var(--theme-border);
    border-left:4px solid var(--theme-page-accent);
    border-radius:6px;
    background:var(--theme-raw-151b34);
    color:var(--theme-raw-fff);
    font-weight:800;
}

.br-auth-notice.danger{
    border-left-color:var(--theme-battle-left);
    background:var(--theme-raw-rgba-255-23-77-10-2132a7);
    color:var(--theme-raw-ffd8df);
}

.br-auth-notice.success{
    border-left-color:var(--theme-page-accent);
    background:var(--theme-raw-rgba-231-255-0-07-5875df);
}

.br-auth-form{
    display:grid;
    gap:16px;
}

.br-auth-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.br-auth-form label{
    display:grid;
    gap:7px;
    color:var(--theme-page-accent);
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
}

.br-auth-form label small{
    color:var(--theme-raw-858ea7);
    font-size:9px;
    font-weight:650;
    text-transform:none;
}

.br-auth-form input{
    width:100%;
    min-height:50px;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid var(--theme-raw-46506e);
    border-radius:5px;
    background:var(--theme-raw-0d1329);
    color:var(--theme-raw-fff);
    font:inherit;
}

.br-auth-form input:focus{
    outline:2px solid var(--theme-page-accent);
    outline-offset:0;
    border-color:var(--theme-page-accent);
}

.br-auth-submit{
    min-height:54px;
    border:1px solid var(--theme-page-accent);
    border-radius:6px;
    background:var(--theme-page-accent);
    color:var(--theme-ink);
    font:inherit;
    font-size:12px;
    font-weight:950;
    cursor:pointer;
    box-shadow:4px 4px 0 var(--theme-shadow-deep);
}

.br-auth-submit:hover{
    background:var(--theme-raw-f2ff54);
}

.br-auth-switch{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--theme-border);
    color:var(--theme-raw-9ba3b9);
    font-size:12px;
    font-weight:700;
}

.br-auth-switch a{
    color:var(--theme-page-accent);
    font-weight:950;
}

/* Account dashboard styles use same theme automatically. */
.br-account-dashboard{
    width:min(1100px,calc(100% - 32px));
}

.br-account-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:30px;
    border:1px solid var(--theme-border);
    border-left:4px solid var(--theme-page-accent);
    border-radius:10px;
    background:var(--theme-raw-11172e);
    color:var(--theme-raw-fff);
}

.br-account-hero h1{
    margin:9px 0 2px;
    font-size:clamp(42px,7vw,76px);
    line-height:.92;
    letter-spacing:-.045em;
    font-style:italic;
}

.br-account-hero p{
    margin:0;
    color:var(--theme-raw-aeb5c8);
    font-weight:700;
}

.br-account-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.br-account-button{
    display:inline-flex;
    min-height:42px;
    align-items:center;
    padding:0 14px;
    border:1px solid var(--theme-border);
    border-radius:6px;
    text-decoration:none;
    font-size:10px;
    font-weight:950;
}

.br-account-button.light{
    background:var(--theme-page-accent);
    border-color:var(--theme-page-accent);
    color:var(--theme-ink);
}

.br-account-button.dark{
    background:var(--theme-raw-11172e);
    color:var(--theme-raw-fff);
}

.br-account-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:18px 0;
}

.br-account-stats article{
    min-height:110px;
    box-sizing:border-box;
    padding:18px;
    border:1px solid var(--theme-border);
    border-top:3px solid var(--theme-page-accent);
    border-radius:8px;
    background:var(--theme-surface);
}

.br-account-stats strong{
    display:block;
    color:var(--theme-page-accent);
    font-size:38px;
    line-height:1;
}

.br-account-stats span{
    display:block;
    margin-top:8px;
    color:var(--theme-raw-8e97ae);
    font-size:9px;
    font-weight:950;
    text-transform:uppercase;
}

.br-account-panel{
    border:1px solid var(--theme-border);
    border-radius:9px;
    background:var(--theme-surface);
    overflow:hidden;
}

.br-account-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    padding:20px;
    border-bottom:1px solid var(--theme-border);
}

.br-account-panel-head span{
    color:var(--theme-raw-858ea5);
    font-size:9px;
    font-weight:950;
}

.br-account-panel-head h2{
    margin:3px 0 0;
    color:var(--theme-raw-fff);
    font-size:32px;
}

.br-account-panel-head a{
    color:var(--theme-page-accent);
    font-size:10px;
    font-weight:950;
}

.br-account-list a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:15px 18px;
    border-bottom:1px solid var(--theme-border);
    color:var(--theme-raw-fff);
    text-decoration:none;
    background:var(--theme-raw-151b34);
}

.br-account-list a:last-child{border-bottom:0}
.br-account-list a:hover{background:var(--theme-raw-1a203a)}

.br-account-list small{
    display:block;
    margin-bottom:4px;
    color:var(--theme-raw-818aa2);
    font-size:9px;
    font-weight:950;
}

.br-account-list strong{font-size:16px}
.br-account-list span{
    color:var(--theme-page-accent);
    font-size:10px;
    font-weight:950;
}

.br-account-empty{padding:30px 20px}
.br-account-empty strong{font-size:18px}
.br-account-empty p{color:var(--theme-raw-9098ae)}
.br-account-empty a{
    color:var(--theme-page-accent);
    font-size:10px;
    font-weight:950;
}

.br-account-detail{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}

.br-account-detail div{
    padding:16px;
    border:1px solid var(--theme-border);
    border-radius:7px;
    background:var(--theme-raw-151b34);
}

.br-account-detail span{
    display:block;
    color:var(--theme-raw-858ea5);
    font-size:9px;
    font-weight:950;
}

.br-account-detail strong{
    display:block;
    margin-top:5px;
    color:var(--theme-raw-fff);
    word-break:break-word;
}

@media(max-width:720px){
    .br-auth-card{padding:23px}
    .br-auth-two{grid-template-columns:1fr}
    .br-auth-switch{flex-direction:column}
    .br-account-hero{
        align-items:flex-start;
        flex-direction:column;
    }
    .br-account-stats{grid-template-columns:repeat(2,1fr)}
    .br-account-detail{grid-template-columns:1fr}
    .br-account-panel-head{
        align-items:flex-start;
        flex-direction:column;
    }
}