*{
    box-sizing:border-box;
}

:root{
    --bg:#020a12;
    --panel:rgba(4,18,30,.92);
    --panel-soft:rgba(7,27,43,.88);
    --line:rgba(76,184,244,.24);
    --line-strong:rgba(72,198,255,.48);
    --blue:#5bd0ff;
    --blue-dark:#116da8;
    --text:#edf8ff;
    --muted:#829caf;
    --green:#55eca0;
    --red:#ff7885;
    --gold:#eac16e;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
        radial-gradient(
            circle at 76% 5%,
            rgba(27,105,164,.25),
            transparent 30%
        ),
        linear-gradient(
            rgba(1,9,16,.84),
            rgba(1,7,13,.97)
        ),
        #020a12;
    overflow-x:hidden;
}

/* =========================================================
   ÔÎÍ Ñ ËÈ×ÎÌ
   ========================================================= */

body::before{
    content:"";
    position:fixed;
    left:0;
    top:72px;
    bottom:0;
    width:500px;
    z-index:0;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(1,8,14,.02) 0%,
            rgba(1,8,14,.12) 55%,
            rgba(1,8,14,.70) 82%,
            rgba(1,8,14,.98) 100%
        ),
        url('/assets/account/lich-bg.png')
        15% top / cover no-repeat;

    opacity:1;
}

body::after{
    content:"";
    position:fixed;
    inset:72px 0 0 220px;
    z-index:0;
    pointer-events:none;

    background:
        linear-gradient(
            rgba(2,10,18,.63),
            rgba(2,9,16,.90)
        ),
        url('/assets/account/lich-bg.png')
        center top / cover no-repeat;

    opacity:.18;
}

/* =========================================================
   ÎÁÙÅÅ
   ========================================================= */

a{
    color:inherit;
}

.topbar,
.layout{
    position:relative;
    z-index:2;
}

/* =========================================================
   ÂÅÐÕÍßß ÏÀÍÅËÜ
   ========================================================= */

.topbar{
    height:72px;
    display:flex;
    align-items:center;
    padding:0 30px;

    background:rgba(1,9,16,.96);
    border-bottom:1px solid rgba(82,187,242,.19);

    box-shadow:
        0 8px 30px rgba(0,0,0,.25);
}

.logo{
    width:285px;

    color:#8ee1ff;
    text-decoration:none;

    font-size:27px;
    font-weight:900;
    letter-spacing:4px;

    text-shadow:
        0 0 18px rgba(66,190,255,.18);
}

.topnav{
    display:flex;
    align-items:center;
    gap:30px;
}

.topnav a{
    color:#c0d3e0;
    text-decoration:none;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.7px;

    transition:.2s;
}

.topnav a:hover{
    color:#6ed7ff;
}

.userbox{
    margin-left:auto;

    display:flex;
    align-items:center;
    gap:11px;

    color:#edf8ff;
}

.avatar{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            180deg,
            #103755,
            #082036
        );

    border:1px solid rgba(86,198,255,.40);

    color:#a9e7ff;
    font-weight:900;

    box-shadow:
        0 0 18px rgba(59,173,231,.15);
}

/* =========================================================
   ÎÑÍÎÂÍÀß ÑÅÒÊÀ
   ========================================================= */

.layout{
    min-height:calc(100vh - 72px);

    display:grid;
    grid-template-columns:220px minmax(0,1fr);
}

/* =========================================================
   ËÅÂÎÅ ÌÅÍÞ
   ========================================================= */

.sidebar{
    min-height:calc(100vh - 72px);

    padding:24px 12px;

    background:
        linear-gradient(
            90deg,
            rgba(1,9,16,.72),
            rgba(1,9,16,.88)
        );

    border-right:1px solid rgba(81,183,238,.18);

    backdrop-filter:blur(2px);
}

.menu{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.menu a,
.menu button{
    width:100%;
    min-height:48px;

    display:flex;
    align-items:center;
    gap:12px;

    border:1px solid transparent;
    border-radius:7px;

    padding:0 14px;

    background:transparent;

    color:#9eb8cb;
    text-decoration:none;

    font-size:14px;

    cursor:pointer;

    transition:
        background .2s,
        border-color .2s,
        color .2s;
}

.menu a:hover,
.menu button:hover{
    color:white;

    background:
        rgba(24,111,166,.16);

    border-color:
        rgba(74,189,246,.12);
}

.menu .active{
    color:#ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(22,134,198,.44),
            rgba(5,45,72,.20)
        );

    border-color:
        rgba(75,194,251,.30);

    box-shadow:
        inset 3px 0 #48c8ff;
}

.menu .icon{
    width:24px;

    text-align:center;

    color:#65d1ff;

    font-size:17px;
}

.menu form{
    margin:0;
}

.menu .logout{
    margin-top:25px;

    padding-top:14px;

    border-top:
        1px solid rgba(255,255,255,.08);

    border-radius:0;

    color:#ff9ca5;
}

/* =========================================================
   ÎÑÍÎÂÍÎÉ ÊÎÍÒÅÍÒ
   ========================================================= */

.main{
    min-width:0;

    padding:
        30px 4vw 60px;

    position:relative;
}

/* =========================================================
   ÏÐÈÂÅÒÑÒÂÈÅ
   ========================================================= */

.welcome{
    position:relative;

    min-height:155px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    padding:
        30px 34px;

    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:15px;

    background:
        linear-gradient(
            100deg,
            rgba(5,27,44,.96),
            rgba(5,23,38,.73)
        );

    box-shadow:
        0 22px 70px rgba(0,0,0,.30);
}

.welcome::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(58,155,218,.17),
            transparent 36%
        );
}

.welcome > *{
    position:relative;
    z-index:1;
}

.eyebrow{
    color:#66d3ff;

    font-size:11px;
    font-weight:900;

    letter-spacing:3px;
}

.welcome h1{
    margin:
        8px 0 5px;

    font-size:38px;
    line-height:1.05;

    text-shadow:
        0 0 20px rgba(82,195,255,.10);
}

.welcome p{
    margin:0;

    color:#91aabd;

    font-size:14px;
}

.play-status{
    flex-shrink:0;

    padding:
        10px 17px;

    border-radius:999px;

    border:
        1px solid rgba(76,226,145,.32);

    background:
        rgba(37,167,97,.12);

    color:#79f0ae;

    font-size:13px;
    font-weight:900;

    box-shadow:
        0 0 20px rgba(52,206,122,.07);
}

/* =========================================================
   ÂÅÐÕÍÈÅ 4 ÊÀÐÒÎ×ÊÈ
   ========================================================= */

.stats{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    margin-top:16px;
}

.stat{
    min-height:112px;

    display:flex;
    align-items:center;

    gap:15px;

    padding:
        20px 20px;

    border:
        1px solid var(--line);

    border-radius:13px;

    background:
        linear-gradient(
            180deg,
            rgba(7,26,42,.94),
            rgba(3,15,26,.96)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
}

.stat:hover{
    border-color:
        rgba(83,202,255,.40);
}

.stat-icon{
    min-width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:
        1px solid rgba(78,190,245,.23);

    background:
        radial-gradient(
            circle,
            rgba(31,123,178,.27),
            rgba(5,28,45,.94)
        );

    color:#88ddff;

    font-size:23px;
}

.stat-label{
    color:#7792a6;

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.5px;
}

.stat-value{
    margin-top:6px;

    font-size:23px;
    font-weight:900;
}

.good{
    color:var(--green) !important;
}

/* =========================================================
   ÖÅÍÒÐÀËÜÍÀß ÑÅÒÊÀ
   ========================================================= */

.content{
    display:grid;

    grid-template-columns:
        .95fr 1.15fr;

    gap:16px;

    margin-top:16px;
}

.side-stack{
    display:grid;

    gap:16px;
}

/* =========================================================
   ÎÁÛ×ÍÀß ÊÀÐÒÎ×ÊÀ
   ========================================================= */

.card{
    border:
        1px solid var(--line);

    border-radius:13px;

    padding:
        22px;

    background:
        linear-gradient(
            180deg,
            rgba(5,20,33,.95),
            rgba(3,14,24,.97)
        );

    box-shadow:
        0 16px 45px rgba(0,0,0,.20);
}

.card:hover{
    border-color:
        rgba(80,196,252,.33);
}

.card h2{
    margin:
        0 0 17px;

    font-size:18px;
}

/* =========================================================
   ÈÍÔÎÐÌÀÖÈß ÀÊÊÀÓÍÒÀ
   ========================================================= */

.info-row{
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    border-bottom:
        1px solid rgba(110,170,205,.11);
}

.info-row:last-child{
    border-bottom:0;
}

.info-row .key{
    color:#748fa3;

    font-size:13px;
}

.info-row strong{
    color:#edf8ff;

    text-align:right;

    font-size:13px;
}

/* =========================================================
   ÇÀÃÎËÎÂÊÈ ÁËÎÊÎÂ
   ========================================================= */

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:14px;
}

.section-head h2{
    margin:0;
}

.section-head h2 small{
    color:#708b9e;

    font-size:12px;
    font-weight:400;
}

.section-head a{
    color:#59cbff;

    text-decoration:none;

    font-size:12px;
    font-weight:700;
}

.section-head a:hover{
    color:#a7e7ff;
}

/* =========================================================
   ÊÀÐÒÎ×ÊÀ ÏÅÐÑÎÍÀÆÀ
   ========================================================= */

.character-card{
    min-height:112px;

    display:grid;

    grid-template-columns:
        74px minmax(0,1fr) auto;

    align-items:center;

    gap:18px;

    padding:
        17px;

    border:
        1px solid rgba(76,183,241,.17);

    border-radius:10px;

    background:
        linear-gradient(
            100deg,
            rgba(6,25,40,.86),
            rgba(3,14,24,.75)
        );
}

.character-avatar{
    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    border-radius:9px;

    border:
        1px solid rgba(95,203,255,.31);

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(72,178,233,.26),
            rgba(5,28,44,.95)
        );

    color:#8edfff;

    font-size:26px;
    font-weight:900;

    box-shadow:
        inset 0 0 20px rgba(81,195,250,.08);
}

.character-info{
    color:#829caf;

    font-size:13px;

    line-height:1.5;
}

.character-name{
    display:block;

    margin-bottom:3px;

    color:#f2f9ff;

    font-size:17px;
    font-weight:900;
}

.character-time{
    margin-top:3px;

    color:#607d91;
}

.character-realm{
    min-width:135px;

    display:flex;
    flex-direction:column;

    align-items:flex-end;

    gap:6px;

    color:#90a9bb;

    font-size:12px;
}

.character-realm strong{
    color:#f0f9ff;

    font-size:13px;
}

.faction{
    color:#df5953;

    font-weight:700;
}

/* =========================================================
   ÈÃÐÎÂÎÉ ÌÈÐ
   ========================================================= */

.realm{
    min-height:84px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:
        15px 0;

    border-bottom:
        1px solid rgba(111,170,205,.11);

    position:relative;
}

.realm:last-child{
    border-bottom:0;
}

.realm::before{
    content:"";

    width:5px;
    height:46px;

    margin-right:13px;

    flex-shrink:0;

    border-radius:999px;

    background:
        linear-gradient(
            #52f2a1,
            #159457
        );

    box-shadow:
        0 0 15px rgba(70,239,151,.32);
}

.realm > div:first-of-type{
    margin-right:auto;
}

.realm-name{
    font-weight:900;

    font-size:14px;
}

.realm-sub{
    margin-top:4px;

    color:#708da3;

    font-size:11px;
}

.realm-count{
    color:#61d3ff;

    font-size:27px;
    font-weight:900;

    text-align:right;
}

/* =========================================================
   ÍÈÆÍÈÅ ÁËÎÊÈ
   ========================================================= */

.bottom{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:16px;

    margin-top:16px;
}

.action-card{
    min-height:160px;

    display:flex;
    flex-direction:column;

    justify-content:space-between;
}

.action-card p{
    margin:
        6px 0 18px;

    color:#829bad;

    line-height:1.5;

    font-size:13px;
}

/* =========================================================
   ÊÍÎÏÊÈ
   ========================================================= */

.btn{
    min-height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:
        0 18px;

    border:
        1px solid #2993ca;

    border-radius:7px;

    background:
        linear-gradient(
            180deg,
            #229fdc,
            #12629c
        );

    color:#ffffff;

    text-decoration:none;

    font-size:13px;
    font-weight:900;

    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 8px 20px rgba(0,0,0,.18);

    transition:.2s;
}

.btn:hover{
    filter:brightness(1.12);

    box-shadow:
        0 0 18px rgba(41,167,227,.18);
}

/* =========================================================
   ÏÓÑÒÛÅ ÑÎÑÒÎßÍÈß
   ========================================================= */

.empty-state{
    color:#718ca0;

    padding:20px 0;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
    margin-top:28px;

    padding-top:19px;

    display:flex;
    justify-content:space-between;

    border-top:
        1px solid rgba(94,173,218,.12);

    color:#57758b;

    font-size:11px;

    letter-spacing:.4px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1200px){

    body::before{
        width:320px;
        opacity:.75;
    }

    .stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .content{
        grid-template-columns:1fr;
    }
}

@media(max-width:850px){

    body::before,
    body::after{
        display:none;
    }

    .topbar{
        height:auto;

        min-height:68px;

        padding:
            15px 18px;

        flex-wrap:wrap;
    }

    .logo{
        width:auto;
    }

    .topnav{
        order:3;

        width:100%;

        gap:16px;

        flex-wrap:wrap;
    }

    .layout{
        display:block;
    }

    .sidebar{
        min-height:auto;
    }

    .menu{
        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .menu .logout{
        margin-top:0;
        padding-top:0;
        border-top:0;
    }

    .main{
        padding:
            22px 15px 45px;
    }

    .welcome{
        flex-direction:column;
        align-items:flex-start;
    }

    .welcome h1{
        font-size:30px;
    }

    .bottom{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .stats{
        grid-template-columns:1fr;
    }

    .menu{
        grid-template-columns:1fr;
    }

    .character-card{
        grid-template-columns:
            60px minmax(0,1fr);
    }

    .character-avatar{
        width:58px;
        height:58px;
    }

    .character-realm{
        grid-column:
            1 / -1;

        align-items:flex-start;

        padding-left:76px;
    }

    .info-row{
        flex-direction:column;
        align-items:flex-start;

        padding:
            9px 0;
    }

    .info-row strong{
        text-align:left;
    }
}
/* =========================================================
   FINAL MOCKUP ALIGNMENT
   ========================================================= */

/* Äà¸ì Ëè÷ó îòäåëüíîå ïðîñòðàíñòâî ìåæäó ìåíþ è êàáèíåòîì */
@media (min-width:1201px){

    body::before{
        left:145px;
        top:72px;
        width:390px;
        opacity:1;

        background:
            linear-gradient(
                90deg,
                rgba(1,8,14,.02) 0%,
                rgba(1,8,14,.08) 55%,
                rgba(1,8,14,.70) 88%,
                rgba(1,8,14,.97) 100%
            ),
            url('/assets/account/lich-bg.png')
            left top / cover no-repeat;
    }

    body::after{
        inset:72px 0 0 220px;

        background:
            linear-gradient(
                90deg,
                rgba(2,9,16,.04) 0%,
                rgba(2,9,16,.42) 30%,
                rgba(2,9,16,.88) 62%,
                rgba(2,9,16,.96) 100%
            ),
            url('/assets/account/lich-bg.png')
            center top / cover no-repeat;

        opacity:.26;
    }

    .main{
        padding-left:300px;
        padding-right:4vw;
        padding-top:34px;
    }

    .logo{
        width:315px;
    }
}

/* Áîëüøîé âåðõíèé áàííåð */
.welcome{
    min-height:190px;
    padding:34px 38px;

    background:
        linear-gradient(
            90deg,
            rgba(4,23,38,.92),
            rgba(4,24,40,.68)
        ),
        url('/assets/account/lich-bg.png')
        70% 16% / cover no-repeat;
}

.welcome::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,13,22,.82) 0%,
            rgba(3,13,22,.48) 55%,
            rgba(3,13,22,.12) 100%
        );

    pointer-events:none;
}

.welcome > *{
    position:relative;
    z-index:2;
}

.welcome h1{
    font-size:40px;
}

.welcome p{
    margin-top:8px;
    font-size:15px;
}

/* Âåðõíèå êàðòî÷êè ÷óòü êðóïíåå */
.stat{
    min-height:126px;
    padding:22px;
}

.stat-icon{
    min-width:58px;
    height:58px;
    font-size:26px;
}

.stat-value{
    font-size:26px;
}

/* Îñíîâíûå ïàíåëè áëèæå ê ìàêåòó */
.content{
    grid-template-columns:1fr 1.22fr;
}

.card{
    padding:23px;
}

.character-card{
    min-height:126px;
    padding:18px;
}

.character-avatar{
    width:76px;
    height:76px;
}

/* Êíîïêè */
.btn{
    min-height:44px;
    font-size:14px;
}

/* Ìåíþ */
.sidebar{
    padding-top:28px;
}

.menu a,
.menu button{
    min-height:52px;
    font-size:14px;
}

/* ×óòü áîëüøå âîçäóõà âíèçó */
.bottom{
    margin-top:18px;
}

.footer{
    margin-top:34px;
}
/* =========================
   Northrane account news
   ========================= */

.account-news {
    margin: 28px 0;
}

.account-news-head {
    margin-bottom: 16px;
}

.account-news-head h2 {
    margin: 4px 0 0;
    font-size: 24px;
}

.account-news-head a {
    color: #79dcff;
    text-decoration: none;
    font-weight: 700;
}

.account-news-head a:hover {
    text-decoration: underline;
}

.account-news-list {
    display: grid;
    gap: 16px;
}

.account-news-card {
    padding: 22px 24px;
}

.account-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    color: #87a7ba;
    font-size: 13px;
}

.account-news-tag {
    color: #62d7ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.account-news-card h3 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.25;
}

.account-news-body {
    color: #b8cad6;
    line-height: 1.7;
}

.news-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(130, 210, 255, .12);
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 58px;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid rgba(108, 208, 255, .16);
    border-radius: 999px;
    background: rgba(8, 26, 39, .65);
    color: #d8eff8;
    cursor: pointer;
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.reaction-btn:hover {
    transform: translateY(-1px);
    background: rgba(26, 75, 99, .7);
    border-color: rgba(98, 215, 255, .5);
}

.reaction-btn.active {
    background: rgba(37, 145, 190, .28);
    border-color: #62d7ff;
    box-shadow: 0 0 18px rgba(50, 190, 245, .12);
}

.reaction-btn:disabled {
    opacity: .65;
    cursor: wait;
}

.reaction-emoji {
    font-size: 18px;
    line-height: 1;
}

.reaction-count {
    min-width: 10px;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 700px) {
    .account-news-card {
        padding: 18px;
    }

    .account-news-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .reaction-btn {
        min-width: 54px;
        padding: 8px 10px;
    }
}

.shop-item-link{
    color:inherit;
    text-decoration:none;
}

.shop-item-link:hover{
    text-decoration:underline;
}

/* =========================
   Northrane MMOTOP voting
   ========================= */

@media (min-width: 901px) {
    .bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vote-card strong {
    color: #61d3ff;
    font-weight: 900;
}