/* MirageRanOnline Premium Account Center */

.account-hero{
    padding-bottom:44px;
}

.account-center,
.account-login-layout{
    width:100%;
    max-width:1420px;
    margin:0 auto 80px;
}

.account-profile-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:22px;
    align-items:center;
    padding:28px;
    margin-bottom:18px;
    border:1px solid rgba(96,151,190,.3);
    background:
        radial-gradient(circle at 85% 10%,rgba(190,118,46,.16),transparent 34%),
        linear-gradient(135deg,#0b1a28,#07111d);
    box-shadow:0 22px 80px rgba(0,0,0,.25);
}

.account-avatar{
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    border:1px solid rgba(233,178,79,.65);
    background:
        radial-gradient(circle at 35% 30%,#d9a45b,#6d351c 72%);
    color:#fff4d4;
    font:700 34px Georgia,serif;
    box-shadow:
        inset 0 0 0 5px rgba(4,13,22,.5),
        0 10px 28px rgba(0,0,0,.35);
}

.account-overline{
    margin:0 0 8px;
    color:#e0b35f;
    font-size:9px;
    font-weight:800;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.account-profile-copy h2,
.account-section-card h2,
.account-gm-card h2,
.account-login-card h2,
.account-login-promo h2{
    margin:0;
    color:#f5f9fd;
    font:700 31px Georgia,serif;
}

.account-profile-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
    margin-top:13px;
    color:#7f99ad;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.account-profile-meta span{
    display:flex;
    align-items:center;
    gap:7px;
}

.account-profile-meta strong{
    color:#cfdae4;
    font-size:11px;
}

.account-online-status i,
.account-security-card li i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#37d39a;
    box-shadow:0 0 12px rgba(55,211,154,.75);
}

.account-signout{
    margin:0;
}

.account-wallet-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}

.account-wallet-card{
    position:relative;
    overflow:hidden;
    min-height:160px;
    padding:24px;
    border:1px solid rgba(79,132,171,.32);
    background:
        linear-gradient(145deg,#0b1b2a,#07131f);
}

.account-wallet-card:after{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-38px;
    width:110px;
    height:110px;
    border:1px solid rgba(224,179,95,.12);
    transform:rotate(45deg);
}

.account-wallet-card.ep{
    background:
        radial-gradient(circle at 88% 10%,rgba(209,133,46,.24),transparent 40%),
        linear-gradient(145deg,#111f2a,#07131f);
}

.account-wallet-card.gp{
    background:
        radial-gradient(circle at 88% 10%,rgba(56,159,220,.22),transparent 40%),
        linear-gradient(145deg,#0b1b2a,#07131f);
}

.account-wallet-card span{
    display:block;
    color:#7fa4bf;
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.account-wallet-card strong{
    display:block;
    margin:13px 0 8px;
    color:#ffd266;
    font:700 31px Georgia,serif;
}

.account-wallet-card small{
    color:#8199aa;
    line-height:1.5;
}

.account-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:18px;
}

.account-main-column,
.account-side-column{
    display:grid;
    align-content:start;
    gap:18px;
}

.account-section-card,
.account-gm-card{
    padding:28px;
    border:1px solid rgba(76,129,166,.3);
    background:#081622;
    box-shadow:0 18px 56px rgba(0,0,0,.18);
}

.account-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
    padding-bottom:17px;
    border-bottom:1px solid rgba(91,143,180,.22);
}

.account-section-heading span,
.account-section-heading>a{
    color:#78aacf;
    font-size:11px;
}

.account-action-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.account-action-card{
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:13px;
    align-items:center;
    min-height:105px;
    padding:18px;
    border:1px solid rgba(72,121,158,.3);
    background:#07131f;
    color:#dce7ef;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.account-action-card:hover{
    transform:translateY(-2px);
    border-color:#c58a3f;
    background:#0a1b29;
    text-decoration:none;
}

.account-action-card.featured{
    border-color:rgba(205,143,61,.55);
    background:
        radial-gradient(circle at 90% 10%,rgba(194,113,38,.17),transparent 45%),
        #091824;
}

.account-action-card i{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(216,168,81,.48);
    color:#ffd36d;
    font-style:normal;
    font-weight:800;
}

.account-action-card strong,
.account-action-card span{
    display:block;
}

.account-action-card strong{
    margin-bottom:5px;
    color:#f3f8fb;
    font-size:14px;
}

.account-action-card span{
    color:#8097a9;
    font-size:11px;
    line-height:1.55;
}

.account-action-card b{
    color:#ca9148;
    font-size:24px;
}

.account-gm-card{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:24px;
    border-color:rgba(220,163,71,.52);
    background:
        radial-gradient(circle at 93% 5%,rgba(221,137,37,.25),transparent 36%),
        linear-gradient(135deg,#141b22,#08141f);
}

.account-gm-icon{
    display:grid;
    place-items:center;
    width:90px;
    height:90px;
    border:1px solid #c68c40;
    color:#ffda72;
    font-size:34px;
    background:
        radial-gradient(circle,#4b2a16,#151923 72%);
    box-shadow:
        inset 0 0 0 6px rgba(0,0,0,.3),
        0 15px 34px rgba(0,0,0,.35);
}

.account-gm-copy p:not(.account-overline){
    max-width:750px;
    color:#8fa6b8;
    line-height:1.7;
}

.account-gm-links{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:20px;
}

.account-gm-links .button{
    margin:0;
}

.account-transaction-list{
    display:grid;
}

.account-transaction{
    display:grid;
    grid-template-columns:44px minmax(210px,1fr) 140px 94px 120px;
    gap:14px;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid rgba(75,126,161,.22);
    color:#dfeaf1;
}

.account-transaction:hover{
    text-decoration:none;
}

.account-transaction:last-child{
    border-bottom:0;
}

.account-transaction-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid rgba(219,164,75,.52);
    background:#101c26;
    color:#ffd66f;
    font:700 17px Georgia,serif;
}

.account-transaction-copy strong,
.account-transaction-copy small,
.account-transaction-value strong,
.account-transaction-value small{
    display:block;
}

.account-transaction-copy small,
.account-transaction-value small,
.account-transaction time{
    margin-top:4px;
    color:#7891a5;
    font-size:10px;
}

.account-transaction-value{
    text-align:right;
}

.account-status{
    display:inline-flex;
    justify-content:center;
    padding:6px 9px;
    border-radius:999px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.account-status.credited{
    color:#b2ffe3;
    background:#14533f;
}

.account-status.claimed{
    color:#b2ffe3;
    background:#14533f;
}

.account-status.debit{
    color:#ffd0ad;
    background:#65381f;
}

.account-status.unknown{
    color:#d0d9df;
    background:#3a4650;
}

.account-status.pending{
    color:#ffe7a4;
    background:#594817;
}

.account-status.refunded{
    color:#ffc7d7;
    background:#69283c;
}

.account-status.failed,
.account-status.cancelled,
.account-status.expired{
    color:#ffb4b4;
    background:#5e2525;
}

.account-transaction time{
    text-align:right;
}

.account-history-note{
    margin:16px 0 0;
    color:#8299aa;
    font-size:11px;
    line-height:1.6;
}

.account-empty-state{
    padding:30px;
    text-align:center;
    border:1px dashed rgba(78,132,168,.34);
    background:#06121c;
}

.account-empty-state strong{
    display:block;
    color:#eff7fb;
    font:700 21px Georgia,serif;
}

.account-empty-state p{
    color:#8098aa;
}

.account-security-card ul{
    display:grid;
    gap:13px;
    padding:0;
    margin:22px 0 0;
    list-style:none;
}

.account-security-card li{
    display:flex;
    align-items:center;
    gap:10px;
    color:#90a7b8;
    font-size:12px;
}

.account-side-copy{
    color:#879fb1;
    line-height:1.7;
}

.account-full-button{
    width:100%;
    text-align:center;
}

.account-login-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);
    border:1px solid rgba(74,128,165,.34);
    background:#081521;
    box-shadow:0 28px 90px rgba(0,0,0,.28);
}

.account-login-card,
.account-login-promo{
    min-height:560px;
    padding:54px;
}

.account-login-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.account-login-card label{
    display:grid;
    gap:8px;
    margin:17px 0 0;
    color:#8da5b6;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.account-login-card input{
    width:100%;
    padding:14px;
    border:1px solid rgba(81,137,173,.45);
    background:#050f18;
    color:#edf7fc;
}

.account-login-card input:focus{
    outline:none;
    border-color:#d09245;
    box-shadow:0 0 0 3px rgba(208,146,69,.12);
}

.account-login-card .button{
    margin-top:13px;
}

.account-login-card small{
    margin-top:22px;
    color:#71899c;
    line-height:1.6;
}

.account-login-copy{
    color:#869eaf;
    line-height:1.75;
}

.account-login-promo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-left:1px solid rgba(83,138,175,.28);
    background:
        linear-gradient(rgba(3,12,20,.68),rgba(3,12,20,.86)),
        radial-gradient(circle at 70% 25%,#763b1b,transparent 38%),
        linear-gradient(135deg,#0b2639,#06121d);
}

.account-login-promo p:not(.account-overline){
    color:#9db0bf;
    line-height:1.75;
}

.account-login-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:26px;
}

.account-login-features span{
    padding:13px;
    border:1px solid rgba(95,151,187,.3);
    color:#d2e0e9;
    font-size:11px;
    background:rgba(5,16,25,.58);
}

.account-recovery{
    max-width:1420px;
}

@media(max-width:1180px){
    .account-wallet-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .account-dashboard-grid{
        grid-template-columns:1fr;
    }

    .account-side-column{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:900px){
    .account-profile-card{
        grid-template-columns:auto 1fr;
    }

    .account-signout{
        grid-column:1 / -1;
    }

    .account-signout .button{
        width:100%;
    }

    .account-transaction{
        grid-template-columns:44px 1fr auto;
    }

    .account-transaction-value,
    .account-transaction time{
        display:none;
    }

    .account-login-layout{
        grid-template-columns:1fr;
    }

    .account-login-promo{
        min-height:auto;
        border-left:0;
        border-top:1px solid rgba(83,138,175,.28);
    }
}

@media(max-width:680px){
    .account-wallet-grid,
    .account-action-grid,
    .account-side-column,
    .account-login-features{
        grid-template-columns:1fr;
    }

    .account-profile-card{
        grid-template-columns:1fr;
        text-align:center;
    }

    .account-avatar{
        margin:auto;
    }

    .account-profile-meta{
        justify-content:center;
    }

    .account-gm-card{
        grid-template-columns:1fr;
    }

    .account-gm-icon{
        width:70px;
        height:70px;
    }

    .account-section-card,
    .account-gm-card,
    .account-login-card,
    .account-login-promo{
        padding:24px;
    }

    .account-section-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-transaction{
        grid-template-columns:38px 1fr;
    }

    .account-status{
        grid-column:2;
        justify-self:start;
    }
}