/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

:root {
    /* ── Панели ── */
    /*--panel-bg: radial-gradient(ellipse at center, rgba(72, 34, 79, 0.7) 5%, rgba(40, 24, 48, 0.86) 100%);*/
    --panel-blur: blur(0px);
    --panel-bg: radial-gradient(ellipse at center, rgba(72, 34, 79, 0.68) 5%, rgba(40, 24, 48, 0.89) 100%);
    --panel-shadow: 1px 1px 4px rgba(64, 7, 69,0.7);
    --page-shadow: 0 1px 20px rgba(0,0,0,1);
    --panel-border: rgba(255,255,255,0.07);
    --panel-radius: 14px;
    --logo-color: linear-gradient(120deg, #ffffff 20%, #f0a0e0 45%, #b050d0 80%);
    /* ── Текст ── */
    --c-bright: #e0d0ff; /* заголовки, значения */
    --c-body: #c8b8e8; /* основной текст */
    --c-label: #e1d1f2; /* подписи, лейблы */
    --c-muted: #998ab8; /* неактивный текст */
    /* ── Бордеры / разделители ── */
    --border-hover: rgba(255,255,255,0.15);
    --divider-color: #2a1a4a;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

@font-face {
    font-family: Cuprum;
    src: url('../fonts/CuprumRegular.eot'), url('../fonts/CuprumRegular.woff') format('woff'), url('../fonts/CuprumRegular.ttf') format('truetype');
    font-weight: 400;
}

/* Sticky footer styles 
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    font-family: Cuprum;
    background: none;
}

.container {
    width: 100%;
    height: calc(100% - 35px);
    float: left;
}

.app-lobby, main {
    width: 100%;
    height: 100%;
    float: left;
}

.small-btn {
    padding: 0px 14px;
    font-size: 16px;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: bold;
    line-height: 25px;
    min-height: 35px;
    display: flex;
    text-align: center;
    border-radius: 6px;
    position: relative;
    border: 0;
    top: -3px;
    justify-content: center;
    align-items: center;
}

    .small-btn:before,
    .small-btn:after {
        content: '';
        position: absolute;
        left: -1px;
        height: 100%;
        width: 100%;
        bottom: -1px;
        border-radius: 6px;
    }

    .small-btn:before {
        height: 23px;
        bottom: -4px;
        border-top: 0;
        border-radius: 0 0 6px 6px;
    }

    .small-btn,
    .small-btn:hover,
    .small-btn:visited {
        color: #641901;
        border-bottom: 4px solid #b98a37;
        text-shadow: 0px 1px 0px #b79e6e;
        background: #feda71;
        background: linear-gradient(10deg, rgba(255,209,0,1) 40%, rgba(255,240,0,1) 60%);
        box-shadow: inset 1px 1px 0 #fee9aa;
    }

        .small-btn:before,
        .small-btn:after {
            border-bottom: 1px solid #9f7630;
        }

        .small-btn:hover {
            background: #febe4d;
            background: linear-gradient(10deg, rgba(255,240,0,1) 35%, rgba(255,209,0,1) 70%);
        }

        .small-btn.red,
        .small-btn.red:hover,
        .small-btn.red:visited {
            color: #710b00;
            border-bottom: 4px solid #8c0800;
            text-shadow: 0px 1px 0px #e8593c;
            background: linear-gradient(174deg, rgb(234, 59, 0) 0%, rgb(231, 98, 0) 47%, rgb(209, 96, 0) 55%, rgb(209, 90, 0) 100%);
            box-shadow: inset 1px 1px 0 #ff6f3c;
        }

            .small-btn.red:before,
            .small-btn.red:after {
                border-bottom: 1px solid #8c0800;
            }

            .small-btn.red:hover {
                background: linear-gradient(174deg, rgb(209, 90, 0) 0%, rgb(231, 98, 0) 47%, rgb(209, 96, 0) 55%, rgb(234, 59, 0) 100%);
            }

        .small-btn:active {
            transform: scale(0.98)
        }



.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Cuprum";
    font-weight: normal;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    display: block !important;
}


a {
    color: #ffd600;
    text-decoration: none;
    font-weight: bold;
}

    a:hover {
        transform: scale(0.993)
    }

    a:active {
        transform: scale(0.98)
    }

.tablelog {
    border: none;
}

    .tablelog tr {
        background: #8BC34A;
        color: #fff;
    }

    .tablelog.adm a:visited {
        color: #15a6e3 !important;
    }

.popbutton {
    text-align: center;
}

.tablelog tr.win {
    background: #75a73c;
}

.tablelog tr.lose {
    background: #ea7239;
}



.tablelog tr.kurz {
    opacity: 0.7;
}

.gtp {
    width: 25px;
    height: 25px;
    background: rgb(39 255 220);
    color: #0c8e17;
    font-size: 5px;
    text-overflow: ellipsis;
    border: 1px solid #0c8e17;
    display: flex;
    vertical-align: sub;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    word-break: break-word;
    padding: 5px;
    overflow: hidden;
    margin-left: 2px;
}

.board3 {
    background-image: url(https://monolife.ru/images/mp_board3.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.board0 {
    background-image: url(https://monolife.ru/images/mp_board4.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.board7 {
    background-image: url(https://monolife.ru/images/mp_cities.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.board6 {
    background-image: url(https://monolife.ru/images/mp_board6.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.board4 {
    background-image: url(https://monolife.ru/images/mp_board4.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.board2 {
    background-image: url(https://monolife.ru/images/mp_board2.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}
.board5 {
    background-image: url(https://monolife.ru/images/mp_board5.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.bot {
    background-image: url(https://monolife.ru/images/mp_character.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.bonus {
    background-image: url(https://monolife.ru/images/mp_bonus.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.tour {
    background-image: url(https://monolife.ru/images/tour.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.busnss {
    background-image: url(https://monolife.ru/images/firm_surprize.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
    width: 25px;
    height: 25px;
    margin-left: 2px;
}

.tablelog a {
    color: #000;
    font-weight: bold;
    max-width: 500px;
}

.tablelog td.texts p {
    border-bottom: 1px solid #ccc;
    margin: 13px 0;
    max-width: 500px;
}

table.tablelog {
    font-size: 14px;
    border-collapse: collapse;
    text-align: center;
    overflow: hidden;
    margin-top: 15px;
    border-radius: 9px;
    width: 100%;
}

.tablelog.transparent {
    box-shadow: 0 0 3px #fff;
}

.tablelog.blue tr {
    background: #25a3ad !important;
}

.tablelog.transparent tr {
    background: none !important;
}

table.tablelog th, table.tablelog td:first-child {
    padding-left: 28px;
}

table.tablelog th, table.tablelog td {
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: rgba(255, 255, 255, 0.22);
    padding: 5px 0;
}


    table.tablelog th:first-child, table.tablelog td:first-child {
        text-align: left;
    }

.blackpodlozhka, .lw {
    display: flex;
    flex-direction: column;
}

    .blackpodlozhka h3 {
        margin: 10px 0;
    }

    .lw i {
        font-size: 11px;
        color: #999;
        background: #000000;
        padding: 3px;
        width: 60px;
        display: inline-block;
        margin-right: 4px;
    }

    .lw .level1 {
        opacity: 0.6;
    }

    .lw .level8 {
        text-shadow: 0 0 8px #fff;
        text-decoration: underline;
    }


.Wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    isolation: isolate;
}

    .Wrapper::before {
        content: '';
        position: fixed;
        inset: 0;
        /*background-image: url(../img/screen.jpg);*/
        background-size: cover;
        background-position: top center;
        z-index: -2;
    }

    .Wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, #3c1f42 35%, #2d1f35 95%);
        pointer-events: none;
        z-index: -1;
        opacity: 1;
    }

.app-lobby-container {
    position: relative;
    min-width: 800px;
    max-width: 1600px;
    width: 800px;
    height: 100%;
    margin: 0 auto;
}

.app-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    height: 70px;
    width: 100%;
    z-index: 100;
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
}

    .app-header .main-logo {
        position: relative;
        top: 0;
        width: auto;
        height: auto;
        padding: 12px 53px 18px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        background: linear-gradient(175deg, rgba(90,5,72,0.97) 0%, rgba(30,0,24,0.99) 100%);
        border: 1px solid rgba(200,70,160,0.2);
        border-top: none;
        border-radius: 0 0 28px 28px;
        box-shadow: 0 8px 28px rgba(0,0,0,0.9), 0 0 40px rgba(160,0,130,0.15);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: box-shadow 0.2s;
    }

    .app-header .main-logo:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.9), 0 0 50px rgba(200,60,160,0.25);
    }

    .logo-dice {
        font-size: 22px;
        flex-shrink: 0;
        filter: drop-shadow(0 0 5px rgba(220,100,180,0.7));
        display: inline-block;
    }

    .dice-1 {
        margin-right: -6px;
    }

    .dice-2 {
        transform: rotate(45deg);
        margin-right: 4px;
    }

.login-logo .logo-dice {
    font-size: 5vmin;
}

.app-header .main-logo:hover .dice-1 {
    animation: dice-dance-1 12s ease-in-out infinite;
}
    .app-header .main-logo:hover .dice-2 {
        animation: dice-dance-2 12s ease-in-out infinite;
    }

    @keyframes dice-dance-1 {
        0%   { transform: translate(0, 0)      rotate(0deg)    scale(1);    }
        8%   { transform: translate(2px, -4px)  rotate(12deg)   scale(1.05); }
        18%  { transform: translate(-1px, -2px) rotate(-8deg)   scale(0.97); }
        28%  { transform: translate(3px, 1px)   rotate(18deg)   scale(1.08); }
        38%  { transform: translate(4px, -3px) rotate(5deg)    scale(1);    }
        48%  { transform: translate(25px, 0px)  rotate(-15deg)  scale(0.95); }
        58%  { transform: translate(2px, 3px)  rotate(-5deg)   scale(1.06); }
        68%  { transform: translate(6px, -2px)  rotate(10deg)   scale(1);    }
        78%  { transform: translate(3px, 2px)   rotate(-12deg)  scale(1.04); }
        88%  { transform: translate(-2px, -1px) rotate(6deg)    scale(0.96); }
        100% { transform: translate(0, 0)       rotate(0deg)    scale(1);    }
    }

    @keyframes dice-dance-2 {
        0%   { transform: translate(0, 0)       rotate(45deg)   scale(1);    }
        10%  { transform: translate(-2px, 3px)  rotate(60deg)   scale(0.95); }
        20%  { transform: translate(1px, -3px)  rotate(30deg)   scale(1.07); }
        30%  { transform: translate(-2px, 0px)  rotate(55deg)   scale(1);    }
        40%  { transform: translate(-5px, 2px) rotate(65deg)   scale(1.05); }
        50%  { transform: translate(-25px, -1px)rotate(28deg)   scale(0.96); }
        60%  { transform: translate(-6px, -4px)rotate(50deg)   scale(1.08); }
        70%  { transform: translate(-3px, 1px)  rotate(35deg)   scale(0.97); }
        80%  { transform: translate(-1px, -2px) rotate(58deg)   scale(1.03); }
        90%  { transform: translate(1px, 2px)   rotate(40deg)   scale(0.98); }
        100% { transform: translate(0, 0)       rotate(45deg)   scale(1);    }
    }

    .app-header .main-logo a {
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 5px;
        text-transform: uppercase;
        text-decoration: none;
        background: var(--logo-color);
        background-size: 200% 100%;
        background-position: 50% 0;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }
    .app-header .main-logo a:hover {
        margin:0;
    }

        .app-header .main-logo:hover a {
            animation: logo-gradient-shift 8s ease-in-out infinite;
        }

        @keyframes logo-gradient-shift {
            0%, 100% { background-position: 50% 0; }
            25%      { background-position: 80% 0; }
            50%      { background-position: 50% 0; }
            75%      { background-position: 20% 0; }
        }

.content {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.alllist {
    display: block;
    width: 100%;
    word-break: break-all;
}

.withban {
    border: 1px solid red;
    border-radius: 4px;
    padding: 1px;
    font-size: 10px;
    margin-left: 3px;
    min-width: 27px;
    text-align: center;
    color: white;
    background: #f00;
}

.plealist {
    background: #68a324 !important
}

.plcount {
    border-radius: 4px;
    padding: 1px;
    text-decoration: underline;
    font-size: 10px;
    margin-left: 3px;
    color: brown;
}

.bcnt {
    border-radius: 4px;
    padding: 1px;
    text-decoration: underline;
    font-size: 12px;
    margin-left: 3px;
    color: red;
    min-width: 26px;
}

.alllist .oneofall {
    width: 80%;
    word-break: break-all;
    display: block;
    padding: 4px;
    border: 1px solid #000000;
    background: #00000042;
    margin: 8px 0;
    border-radius: 5px;
}

.alllist .from {
    color: blue;
    font-size: 9px;
    background: #fff;
    padding: 1px;
    border-radius: 3px;
}

#resultban {
    position: fixed;
    top: 10px;
    left: 10px;
    display: none;
    width: 200px;
    height: 50px;
    background: wheat;
    border-radius: 7px;
    font-size: 10px;
    padding: 6px;
    color: #000;
}

.toUser {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    overflow: hidden;
    word-break: break-all;
}

.hidefirst {
    padding: 5px;
    word-break: break-all;
}

.toUser img {
    width: 30px;
    border-radius: 100%;
    height: 30px;
    border: 2px solid #fff;
    margin: 3px;
}

.photo_ava {
    width: 50px;
    border-radius: 100%;
    height: 50px;
    border: 2px solid #fff;
    margin: 3px;
}

.photo_back {
    border-radius: 3%;
    height: 75px;
    margin: 3px;
}

.toUser a {
    color: blue
}

.toban {
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
    font-size: 9px;
    background: #f00;
    padding: 1px 4px;
    border-radius: 3px;
}

.iswrongpleas {
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
    font-size: 9px;
    background: #55f;
    padding: 3px;
    border-radius: 3px;
}

.isgoodpleas {
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
    font-size: 9px;
    background: #f00;
    padding: 3px;
    border-radius: 3px;
}

.showall {
    cursor: pointer;
    color: #600;
}

/* ===================== Login Page ===================== */

/* Hide site header on login page */
.app-lobby:has(.login-content) .app-header { display: none; }

.login-content {
    background-image: url(../img/screen.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: repeat;
    background-attachment: fixed;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 17px;
    box-sizing: border-box;
}

/* Hero fills first viewport above the card */
.login-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-height: calc(100vh - 250px);
    width: 100%;
    max-width: 460px;
}

@supports (min-height: 100dvh) {
    .login-hero {
        min-height: calc(100dvh - 250px);
    }
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 13px;
}

.login-logo-text {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 7vmin;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: var(--logo-color);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/* Card — sits at the bottom of first screen */
.login-card {
    width: 100%;
    max-width: 460px;
    padding: 5px 26px 20px;
    background: rgba(20, 8, 30, 0.56);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px 24px 24px 24px;
    box-shadow: 0 6px 9px rgb(0 0 0);
    text-align: center;
    color: var(--c-body);
    flex-shrink: 0;
}

/* Description */
.login-descr {
    font-size: 16px;
    line-height: 1.65;
    color: #ffffff;
    max-width: 460px;
    margin-top: 10px;
    text-align: center;
    text-shadow: 0 0 2px #7e6e00;
}
    .login-descr b {
        font-size: 18px;
    }

/* Dividers */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
}
    .login-divider::before,
    .login-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--divider-color);
        box-shadow: 0 0 2px #FFF;
    }
    .login-divider span {
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: bold;
        color: var(--c-label);
        white-space: nowrap;
        text-shadow: 0 0 3px #000;
    }

/* Social buttons — square, one row */
.login-social-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.login-social-grid form,
.login-social-grid .login-sq-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.login-sq {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}
.login-sq:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}
.login-sq:active {
    transform: translateY(0);
}

.login-sq-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.login-sq-label {
    font-size: 10px;
    color: var(--c-label);
    text-align: center;
}

.login-sq-wrap {
    position: relative;
}
.login-sq-wrap .login-sq-label {
    margin-top: 2px;
}

.login-btn-ok {
    background: #ee8208;
}
.login-btn-apple {
    background: #0a0a14;
    border: 1px solid rgba(255,255,255,0.15);
}
.login-btn-google {
    background: #fff;
}
.login-btn-email {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
}
.login-sq-at {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* Password toggle */
.login-pw-toggle {
    display: block;
    margin: 22px auto 0;
    background: none;
    border: none;
    color: var(--c-label);
    font-size: 12px;
    cursor: pointer;
    transition: color .2s;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.1);
    text-underline-offset: 3px;
}
.login-pw-toggle:hover {
    color: var(--c-body);
}

/* Password section — hidden by default */
.login-pw-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease;
    opacity: 0;
}

    .login-pw-section .inputs-wrapper {
        display: flex;
        gap: 16px;
    }

    .login-pw-section.open {
        max-height: 220px;
        opacity: 1;
        margin-top: 16px;
    }

/* Password form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-input {
    width: 100%;
    padding: 7px 14px;
    font-size: 15px;
    color: var(--c-bright);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.login-input::placeholder {
    color: var(--c-muted);
}
.login-input:focus {
    border-color: rgba(180,140,255,0.5);
    box-shadow: 0 0 0 3px rgba(180,140,255,0.12);
}

.login-submit {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    margin-top: 2px;
}
.login-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Features grid */
.login-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0 6px;
}

.login-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: background .2s, border-color .2s;
}
.login-feature:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
}

.login-feature-icon {
    font-size: 24px;
    margin-bottom: 2px;
}

.login-feature-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-bright);
}

.login-feature-text {
    font-size: 11px;
    color: var(--c-label);
    text-align: center;
    line-height: 1.4;
}

/* Project stats */
.login-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.login-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 6px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: background .2s, border-color .2s;
}
.login-stat:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
}

.login-stat-icon {
    font-size: 22px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 4px rgba(180,100,255,0.3));
}

.login-stat-value {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff, #d0b8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.login-stat-unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-body);
    margin-top: 2px;
}

.login-stat-label {
    font-size: 10px;
    color: var(--c-label);
    margin-top: 1px;
}

/* Store links */
.login-stores {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.login-store img {
    height: 40px;
    border-radius: 8px;
    transition: opacity .2s, transform .15s;
}
.login-store:hover img {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Footer links */
.login-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}
.login-footer a {
    font-size: 11px;
    color: var(--c-label);
    text-decoration: none;
    transition: color .2s;
}
.login-footer a:hover {
    color: var(--c-body);
}
.login-footer-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--c-muted);
}

/* Mobile responsive */
@media (max-width: 520px) {
    .login-content {
        background-image: url(../img/screen_mob.jpg);
        background-attachment: scroll;
    }
    .Wrapper::before {
        background-image: url(../img/screen_mob.jpg)!important;
    }
    .login-descr {
        font-size: 15px;
    }
}

@media (max-height: 700px) {
    .login-hero {
        min-height: calc(100vh - 250px);
    }
}

@supports (min-height: 100dvh) {
    @media (max-height: 700px) {
        .login-hero {
            min-height: calc(100dvh - 250px);
        }
    }
}

@media (max-width: 350px) {
    html{
        zoom:75%!important;
    }
    .login-social-grid {
        gap: 10px;
    }
    .login-sq {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }
    .login-sq-icon {
        width: 24px;
        height: 24px;
    }
    .login-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Legacy: keep for other pages using these */
.login-welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.success-auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ── SuccessAuth ── */
.sa-card {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    box-shadow: var(--panel-shadow);
    padding: 40px 30px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sa-avatar-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    margin-bottom: 20px;
}

.sa-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.sa-greeting {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.sa-status {
    font-size: 14px;
    color: #a8e6a3;
    margin-bottom: 18px;
}

.sa-server {
    font-size: 14px;
    color: var(--c-label);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 18px;
    margin-bottom: 12px;
}

.sa-timer {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 24px;
}

.sa-seconds {
    display: inline-block;
    font-weight: 700;
    color: #fff;
    background: rgba(168,85,247,0.3);
    border-radius: 6px;
    padding: 1px 8px;
    min-width: 20px;
}

.sa-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}

.sa-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

    .sa-btn:hover { opacity: 0.85; text-decoration: none; }

.sa-btn-primary {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
}

    .sa-btn-primary:hover,
    .sa-btn-primary:visited { color: #fff; }

.sa-btn-secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--c-label);
}

    .sa-btn-secondary:hover,
    .sa-btn-secondary:visited { color: var(--c-label); }

@media (max-width: 400px) {
    .sa-card { padding: 30px 18px 22px; }
    .sa-buttons { flex-direction: column; }
}

/* ===================== /Login Page ===================== */

.pon-wrapper {
    border-radius: 18px;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    padding: 15px;
    box-shadow: var(--page-shadow);
}

    .pon-wrapper .pon-inner {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px;
        padding: 20px;
    }

.image-loginned {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100%;
    margin-bottom: 16px;
    border: 3px solid #fff;
}

.additional-info {
    margin: 28px 0;
    display: block;
    width: 100%;
}

.login-welcome .controls {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.personalarea .pon-wrapper {
    width: 96%;
    margin-top: 20px;
}

.block-infochange {
    display: flex;
    justify-content: space-around;
    min-height: 137px;
}

.photousera {
    width: 100px;
    margin: 20px 0;
}

    .photousera img {
        overflow: hidden;
        width: 100px;
        border-radius: 100%;
        height: 100px;
        border: 3px solid #ffd600;
    }

.nickname {
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

    .nickname .currentname {
        width: 100%;
        height: 40px;
        color: #ffd600;
        font-size: 18px;
        padding: 4px;
    }


.one-preference {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 30px;
}

    .one-preference .pref-name {
        margin: 5px 0;
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
    }

    .one-preference select {
        width: 150px;
        height: 40px;
        border-radius: 5px;
        color: #fff;
        border-width: 2px;
        border-color: #ffd600;
        font-size: 21px;
        color: #ffd600;
    }

        .one-preference select option {
            color: #ffd600;
            box-shadow: 0 0 3px #000;
            background: #390f11;
        }

    .one-preference input {
        width: 200px;
        height: 40px;
        border-radius: 5px;
        color: #fff;
        border-width: 2px;
        border-color: #fff;
        font-size: 21px;
        padding-left: 6px;
    }

    .one-preference .descr {
        margin: 5px 0;
        color: #999;
    }

    .one-preference .link-list {
        display: flex;
        width: 100%;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .one-preference .link-list > * {
            margin: 5px 3px
        }

    .one-preference .newmail {
        margin: 12px 0;
    }

        .one-preference .newmail .small-btn {
            height: 40px;
            display: inline;
        }

.title {
    margin-top: 40px;
}

.footermain {
    position: absolute;
    bottom: 0;
    width: 300px;
    display: flex;
    flex-direction: row;
    left: calc(50% - 150px);
    align-items: center;
    justify-content: space-evenly;
}

.linkhome {
    font-size: 12px;
    margin: 3px;
}

.pon-header {
    margin: 20px 0;
    text-align: center;
}

.onecontact-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 60px;
}

    .onecontact-block a {
        margin-bottom: 6px;
    }

    .onecontact-block p {
        margin-bottom: 12px;
        font-size: 1.5rem;
    }

.tutorial {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    .tutorial img {
        width: 250px
    }

    .tutorial p {
        margin: 40px 0;
        text-align: center;
    }

    .tutorial h2 {
        text-align: center;
        margin: 28px 0;
    }

.typeplea1 {
    background: #25a3ad !important;
}

.typeplea3 {
    background: #c325cd !important;
}

.vertical_li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .vertical_li span {
        margin: 6px 0;
        cursor: pointer;
    }

.riskstat {
    width: 100%;
    background: #ffffff69;
    border-radius: 6px;
    padding: 3px;
}

.onerisk {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.risk2 {
    padding: 3px;
    background: #00000030;
    margin: 2px;
    display: flex;
    border: 2px solid #000;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    position: relative;
}

.bar {
    width: 100%;
    position: absolute;
    height: 100% !important;
}

    .bar.red {
        background: red;
    }

    .bar.green {
        background: green;
    }

.risk2 p {
    position: relative;
    z-index: 2;
    font-weight: bold;
    font-family: monospace;
}


/* ===================== GamesHistory ===================== */

.gm-page {
}

.gm-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background: var(--logo-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/* Summary */
.gm-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.gm-summary-card {
    flex: 1;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 12px 16px;
    text-align: center;
    box-shadow: var(--panel-shadow);
}

.gm-summary-label {
    font-size: 11px;
    color: #8a96b4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.gm-summary-value {
    font-size: 22px;
    font-weight: 700;
}

.gm-summary-value.pos { color: #4ade80; }
.gm-summary-value.neg { color: #f87171; }
.gm-summary-value.neu { color: #94a3b8; }

/* Table */
.gm-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}

.gm-table-wrap {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    min-width: 620px;
}

.gm-row {
    display: grid;
    grid-template-columns: 90px 130px 32px 80px 116px 60px 1fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    transition: background 0.12s;
    text-decoration: none;
    color: #e8eaf0;
}

.gm-row:last-child { border-bottom: none; }

.gm-row-head {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffd601;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gm-win {
    background: rgba(74,222,128,0.07);
    border-left: 3px solid rgba(74,222,128,0.55);
    padding-left: 13px;
}

.gm-lose {
    background: rgba(248,113,113,0.06);
    border-left: 3px solid rgba(248,113,113,0.4);
    padding-left: 13px;
}

.gm-win:hover  { background: rgba(74,222,128,0.13); color: #fff; }
.gm-lose:hover { background: rgba(248,113,113,0.12); color: #fff; }

/* Cells */
.gm-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gm-dur {
    font-size: 11px;
    color: #8a96b4;
}

.gm-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.gm-tag {
    font-size: 8px;
    background: rgba(255,214,0,0.15);
    color: #ffd600;
    border-radius: 5px;
    padding: 1.5px 4px;
    white-space: nowrap;
}

.gm-badge {
    width: 22px;
    height: 22px;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
}

.gm-badge-tour  { background-image: url(https://monolife.ru/images/tour.png); }
.gm-badge-bizn  { background-image: url(https://monolife.ru/images/firm_surprize.png); }
.gm-badge-bot   { background-image: url(https://monolife.ru/images/mp_character.png); }
.gm-badge-bonus { background-image: url(https://monolife.ru/images/mp_bonus.png); }

.gm-board-cell { display: flex; align-items: center; }

.gm-board-icon {
    width: 26px;
    height: 26px;
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.gm-result {
    font-weight: 700;
    font-size: 14px;
}

.gm-result.pos { color: #4ade80; }
.gm-result.neg { color: #f87171; }

.gm-capital {
    color: #01e7ff;
    font-weight: 500;
    font-size: 12px;
}
.gm-bet {
    color: #ffd601;
    font-size: 12px;
}

.gm-info {
    color: #8a93a8;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
}

/* Empty */
.gm-empty {
    padding: 60px 20px;
    text-align: center;
    color: #454f65;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 12px 16px;
    text-align: center;
    box-shadow: var(--panel-shadow);
}

.gm-empty-icon { font-size: 40px; margin-bottom: 12px; }
.gm-empty-text { font-size: 14px; }

@media (max-width: 600px) {
    .gm-summary { flex-wrap: wrap; }
    .gm-summary-card { flex: 1 1 calc(50% - 6px); }
}

/* ===================== /GamesHistory ===================== */

/* ===================== PersonalArea ===================== */

.pa-page {
    max-width: 800px;
    margin: 58px auto 60px;
    padding: 0 12px;
    font-family: Cuprum, sans-serif;
    color: #e8eaf0;
}

/* Hero */
.pa-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--panel-shadow);
}

.pa-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd600, #ff8c00);
    color: #1a0a00;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,214,0,0.25);
}

.pa-hero-avatar-img {
    object-fit: cover;
    font-size: 0;
}

.pa-hero-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.pa-hero-sub {
    font-size: 13px;
    color: #8a93a8;
    margin-top: 4px;
}

.pa-server-badge {
    color: #ffd600;
    font-weight: 600;
}

/* Section label */
.pa-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8a96b4;
    margin-bottom: 10px;
    padding-left: 2px;
}

/* Nav grid */
.pa-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.pa-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    color: #c8cdd8;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.12s, color 0.15s;
    text-align: center;
    box-shadow: var(--panel-shadow);
}

    .pa-nav-card:hover {
        background: rgba(255,214,0,0.12);
        border-color: rgba(255,214,0,0.25);
        color: #fff;
        transform: translateY(-2px);
        backdrop-filter:blur(3px);
    }

.pa-nav-icon {
    font-size: 24px;
    line-height: 1;
}

/* Settings + Email row */
.pa-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.pa-card {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--panel-shadow);
}

.pa-card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a96b4;
    margin-bottom: 14px;
}

.pa-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-hint {
    font-size: 12px;
    color: #8a96b4;
    margin: 0;
    line-height: 1.5;
}

.pa-email-current {
    font-size: 13px;
    color: #c8cdd8;
    margin: 0;
    word-break: break-all;
}

/* Select */
.pa-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pa-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    color: #fff;
    font-family: Cuprum, sans-serif;
    font-size: 14px;
    padding: 8px 36px 8px 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.pa-select:focus { border-color: rgba(255,214,0,0.4); }
.pa-select option { background: #2a0a1e; color: #fff; }

.pa-select-arrow {
    position: absolute;
    right: 12px;
    color: #8a93a8;
    pointer-events: none;
    font-size: 12px;
}

/* Input */
.pa-input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    color: #fff;
    font-family: Cuprum, sans-serif;
    font-size: 14px;
    padding: 9px 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.pa-input:focus { border-color: rgba(255,214,0,0.4); }
.pa-input::placeholder { color: #8a96b4; }

.pa-email-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Buttons */
.pa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: Cuprum, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    white-space: nowrap;
}

.pa-btn:active { transform: scale(0.97); }

.pa-btn-primary {
    background: linear-gradient(135deg, #ffd600, #ff9800);
    color: #1a0800;
}

.pa-btn-primary:hover { opacity: 0.9; }

.pa-btn-ghost {
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.14);
    color: #c8cdd8;
}

.pa-btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }

.pa-btn-danger {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.25);
    color: #f87171;
}

.pa-btn-danger:hover { background: rgba(248,113,113,0.22); }

.pa-btn-server1 {
    background: linear-gradient(135deg, rgb(255 214 0 / 59%), rgb(255 140 0 / 83%));
    border: 1px solid rgba(255, 214, 0, 0.2);
    color: #753c00;
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 12px;
    flex: 1;
    font-weight: bold;
}

.pa-btn-server2 {
    background: linear-gradient(135deg, rgb(42 255 0 / 59%), rgb(187 28 28 / 83%));
    border: 1px solid rgba(255, 214, 0, 0.2);
    color: #f2acff;
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 12px;
    flex: 1;
    font-weight: bold;
}

.pa-btn-server:hover {
    background: linear-gradient(135deg, rgb(255 0 0 / 59%), rgb(148 255 0 / 83%));
    color: #ffe033;
}

.pa-btn-logout {
    background: rgb(255 57 57 / 78%);
    border: 1px solid rgb(184 11 11);
    color: #ebcfcf;
    font-size: 13px;
    padding: 8px 16px;
}

.pa-btn-logout:hover { background: rgba(248,113,113,0.2); color: #fca5a5; }

.pa-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pa-btn-icon { font-size: 18px; }

.pa-relay-warn {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: #fbbf24;
    line-height: 1.5;
}

.pa-relay-icon { flex-shrink: 0; }

/* Game servers row */
.pa-server-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* Footer */
.pa-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.pa-link {
    color: #8a96b4;
    font-size: 13px;
    text-decoration: none;
}

.pa-link:hover { color: #94a3b8; }

/* Mobile */
@media (max-width: 600px) {
    .pa-nav-grid { grid-template-columns: repeat(2, 1fr); }
    .pa-cards-row { grid-template-columns: 1fr; }
    .pa-server-row { flex-direction: column; }
    .pa-hero { padding: 16px; }
}

/* ===================== /PersonalArea ===================== */

.gh-page {
    margin: 20px auto;
    padding: 12px 12px 35px;
    font-family: Cuprum;
    color: #e8eaf0;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border-radius: 18px;
    box-shadow: var(--page-shadow);
    overflow: hidden;
    width: 100%;
}

.gh-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #fff;
    letter-spacing: -0.3px;
}

/* Tabs */
.gh-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: #ffffff1f;
    border-radius: 12px;
    padding: 5px;
}

.gh-tab {
    flex: 1;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #ffd601;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .gh-tab:hover {
        color: #c8cdd8;
        background: rgba(255,255,255,0.08);
    }

    .gh-tab.active {
        background: rgb(76 0 61);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        border: 1px solid #d307bf3d;
    }

.gh-tab-icon {
    font-size: 16px;
}

.gh-tab-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

/* Panel */
.gh-panel {
    display: none;
}

    .gh-panel.active {
        display: block;
    }

/* Summary bar */
.gh-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.gh-summary-card {
    flex: 1;
    background: #ffffff1f;
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
}

.gh-summary-label {
    font-size: 11px;
    color: #ffd601;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.gh-summary-value {
    font-size: 18px;
    font-weight: 700;
}

    .gh-summary-value.pos {
        color: #4ade80;
    }

    .gh-summary-value.neg {
        color: #f87171;
    }

    .gh-summary-value.neu {
        color: #94a3b8;
    }

/* Table */
.gh-table-wrap {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: var(--panel-shadow);
    -webkit-overflow-scrolling: touch;
}

.gh-row {
    display: grid;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.12s;
    font-size: 13px;
    overflow:hidden;
}

    .gh-row:last-child {
        border-bottom: none;
    }

    .gh-row.row-pos {
        background: rgba(74,222,128,0.1);
        border-left: 3px solid rgba(74,222,128,0.8);
        padding-left: 12px;
    }

    .gh-row.row-neg {
        background: rgba(248,113,113,0.06);
        border-left: 3px solid rgba(248,113,113,0.4);
        padding-left: 15px;
    }

    .gh-row.row-pos:hover {
        background: rgba(74,222,128,0.11);
    }

    .gh-row.row-neg:hover {
        background: rgba(248,113,113,0.11);
    }

.gh-row-gold {
    grid-template-columns: 110px 80px 80px 1fr 140px;
    ;
    min-width: 560px;
}

.gh-row-other {
    grid-template-columns: 108px 80px 80px 1fr;
    min-width: 440px;
}

.gh-row-fines {
    grid-template-columns: 130px 1fr 100px;
    min-width: 400px;
}

.gh-row-head {
    font-size: 11px;
    font-weight: 600;
    color: #ffd601;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.gh-amount {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}

    .gh-amount.pos {
        color: #4ade80;
    }

    .gh-amount.neg {
        color: #f87171;
    }

.gh-total {
    color: #ffd601;
    font-weight: 500;
}

.gh-purpose {
    color: #c0c8d8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.gh-time {
    color: #999;
    font-size: 12px;
}

.gh-ip {
    color: #999;
    font-size: 11px;
    font-family: monospace;
}

/* Empty state */
.gh-empty {
    padding: 48px 20px;
    text-align: center;
    color: #999;
}

.gh-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.gh-empty-text {
    font-size: 14px;
}

@media (max-width: 600px) {
    .gh-summary {
        flex-direction: column;
    }

    .gh-tab span.gh-tab-label {
        display: none;
    }
}


/* ===================== Unified Components ===================== */

/* ── Page container ── */
.u-page {
    max-width: 860px;
    margin: 30px auto 60px;
    padding: 0 16px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Universal panel ── */
.u-panel {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
}

/* ── Typography ── */
.u-title    { font-size: 18px; font-weight: 700; color: var(--c-bright); }
.u-heading  { font-size: 15px; font-weight: 700; color: var(--c-bright); }
.u-text     { font-size: 13px; color: var(--c-body); }
.u-label    { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-label); }
.u-muted    { font-size: 12px; color: var(--c-muted); }
.u-dim      { color: var(--c-muted); }
.u-mono     { font-family: monospace; }

/* ── Section divider ── */
.u-section {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-muted);
    padding: 14px 4px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-section::after { content: ''; flex: 1; height: 1px; background: var(--divider-color); }

/* ── Stats grid ── */
.u-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.u-stat {
    flex: 1;
    min-width: 100px;
    padding: 14px 16px;
    text-align: center;
}
.u-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-bright);
    line-height: 1;
    margin-bottom: 4px;
}
.u-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-label);
}

/* ── Info rows ── */
.u-info-rows { display: flex; flex-direction: column; gap: 7px; }
.u-info-row  { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.u-info-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.u-info-label{ color: var(--c-muted); min-width: 110px; }
.u-info-value{ color: var(--c-body); font-weight: 500; }

/* ── Badges ── */
.u-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}
.u-badge-blue   { background: rgba(64,150,240,0.2);  color: #70b8ff; border: 1px solid rgba(64,150,240,0.3); }
.u-badge-green  { background: rgba(80,200,80,0.15);  color: #70d870; border: 1px solid rgba(80,200,80,0.3); }
.u-badge-red    { background: rgba(220,60,60,0.15);  color: #e07070; border: 1px solid rgba(220,60,60,0.3); }
.u-badge-yellow { background: rgba(255,214,0,0.15);  color: #ffd600; border: 1px solid rgba(255,214,0,0.3); }
.u-badge-gray   { background: rgba(200,200,200,0.15);color: #c0c0c0; border: 1px solid rgba(200,200,200,0.2); }
.u-badge-purple { background: rgba(180,120,255,0.15);color: #c090ff; border: 1px solid rgba(180,120,255,0.2); }
.u-badge-muted  { background: rgba(255,255,255,0.08);color: #9a8aba; }

/* ── Buttons ── */
.u-btn {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #a090c0;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
    cursor: pointer;
}
.u-btn:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }
.u-btn-primary       { border-color: rgba(100,180,255,0.3); color: #80c0ff; }
.u-btn-primary:hover { background: rgba(100,180,255,0.12); }
.u-btn-danger        { border-color: rgba(220,60,60,0.3); color: #e07070; }
.u-btn-danger:hover  { background: rgba(220,60,60,0.15); }

/* ── Chips ── */
.u-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 14px;
    color: #d8c8f0;
}
.u-chip svg { opacity: 0.7; flex-shrink: 0; }

/* ── Divider ── */
.u-divider { height: 1px; background: rgba(255,255,255,0.06); }

/* ── Empty state ── */
.u-empty      { text-align: center; padding: 60px 20px; color: var(--c-muted); }
.u-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ── Layout helpers ── */
.u-flex      { display: flex; align-items: center; }
.u-flex-col  { display: flex; flex-direction: column; }
.u-flex-body { flex: 1; min-width: 0; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-between { justify-content: space-between; }
.u-gap-sm    { gap: 8px; }
.u-gap       { gap: 14px; }
.u-gap-lg    { gap: 20px; }
.u-mb-sm     { margin-bottom: 6px; }
.u-mb        { margin-bottom: 16px; }
.u-mb-lg     { margin-bottom: 24px; }
.u-pad       { padding: 20px; }
.u-pad-lg    { padding: 24px 28px; }
.u-shrink-0  { flex-shrink: 0; }
.u-grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 560px) { .u-grid-2 { grid-template-columns: 1fr; } }

/* ===================== /Unified Components ===================== */


/* ===================== ShowInfo ===================== */

.si-hero-id {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-bright);
    font-family: monospace;
    letter-spacing: 1.4px;
    overflow: auto;
}

.si-hero-icon  { font-size: 36px; flex-shrink: 0; }

.si-color-swatch {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid var(--border-hover);
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
}

.si-color-until b { color: #a090c0; }

/* ===================== /ShowInfo ===================== */


/* ===================== InOut ===================== */

.io-entry {
    margin-bottom: 6px;
    transition: border-color .15s;
}
.io-entry:hover { border-color: var(--border-hover); }
.io-entry.is-new { border-color: rgba(255, 214, 0, 0.2); }

.io-device { font-size: 20px; flex-shrink: 0; width: 32px; text-align: center; }

.io-time {
    font-size: 15px;
    font-weight: 700;
    color: #d0c0f0;
    white-space: nowrap;
    min-width: 44px;
}

.io-ip {
    font-family: monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 9px;
    width: 125px;
    color: #a090c0;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.io-badges { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }


/* ===================== /InOut ===================== */


/* ===================== PartyHistory ===================== */

.party-players      { display: flex; flex-wrap: wrap; gap: 10px; }
.party-player-badge {
    display: flex; align-items: center; gap: 8px;
    border-radius: 24px; padding: 6px 16px 6px 8px;
    font-size: 14px; font-weight: 600;
    border: 1px solid; text-decoration: none; transition: filter .15s;
}
.party-player-badge:hover { filter: brightness(1.2); text-decoration: none; }
.party-player-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.party-winner-badge {
    font-size: 11px; padding: 1px 6px; border-radius: 8px;
    margin-left: 4px; background: gold; color: #222; font-weight: 700;
}

.party-timeline { display: flex; flex-direction: column; gap: 2px; }

.tl-event {
    box-shadow: 0 0 2px #000;
    display: flex; align-items: flex-start; gap: 10px;
    margin: 1.5px 0; padding: 7px 12px;
    border-radius: 8px; transition: background .1s; line-height: 2.4;
}
.tl-event:hover { background: rgba(255,255,255,0.04); }
.tl-event.lvl1  { opacity: 0.85; }
.tl-event.lvl2  { opacity: 1; }
.tl-event.lvl8  {
    opacity: 1;
    background: linear-gradient(90deg, rgba(255,215,0,0.12) 0%, transparent 100%);
    border-left: 3px solid gold; border-radius: 0 8px 8px 0; padding-left: 14px;
}

.tl-icon {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px; font-size: 13px;
    background: rgba(255,255,255,0.06);
}
.tl-time { font-size: 11px; color: #a0acf9; white-space: nowrap; min-width: 68px; margin-top: 3px; font-family: monospace; }
.tl-text { font-size: 14px; flex: 1; color: inherit; }

.tl-turn-sep {
    display: flex; align-items: center; gap: 8px;
    margin: 6px 0 2px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 1px; color: #4a4060;
}
.tl-turn-sep::before, .tl-turn-sep::after {
    content: ''; flex: 1; height: 1px; background: #2a2040;
}


/* ===================== /PartyHistory ===================== */


/* ===================== Privacy ===================== */

.prv-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-body);
    margin: 0 0 10px;
}
.prv-text:last-child { margin-bottom: 0; }

.prv-text b { color: var(--c-bright); font-weight: 600; }

.prv-link {
    color: #b090e0;
    text-decoration: none;
    border-bottom: 1px solid rgba(176,144,224,0.3);
    transition: color .2s, border-color .2s;
}
.prv-link:hover {
    color: #d0b8ff;
    border-color: rgba(208,184,255,0.5);
}

.prv-sub {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-bright);
    margin: 16px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--divider-color);
}
.prv-sub:first-child { margin-top: 0; }

.prv-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prv-list-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-body);
}
.prv-list-item b { color: var(--c-bright); font-weight: 600; }

.prv-list-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 14px;
}

/* ===================== /Privacy ===================== */


/* ===================== Contacts ===================== */

.ct-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-card {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ct-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ct-icon img {
        max-width: 28px;
        max-height: 28px;
        object-fit: contain;
    }

.ct-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.ct-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .ct-links a {
        display: inline-block;
        font-size: 13px;
        color: var(--c-label);
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        padding: 5px 12px;
        text-decoration: none;
        transition: background 0.2s;
    }

        .ct-links a:hover {
            background: rgba(255,255,255,0.12);
            color: #fff;
            text-decoration: none;
        }

.ct-legal {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

@media (max-width: 400px) {
    .ct-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ct-links { justify-content: center; }
}

/* ===================== /Contacts ===================== */


/* ===================== Account Remove ===================== */

.acr-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acr-step {
    display: flex;
    gap: 16px;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 20px;
}

.acr-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acr-step-body {
    flex: 1;
    min-width: 0;
}

.acr-step-text {
    font-size: 15px;
    color: var(--c-label);
    margin-bottom: 12px;
    line-height: 1.5;
}

.acr-step-img {
    width: 100%;
    max-width: 360px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 440px) {
    .acr-step { flex-direction: column; align-items: center; text-align: center; }
    .acr-step-img { max-width: 100%; }
}

/* ===================== /Account Remove ===================== */


/* ===================== Payments ===================== */

/* ── PaySelect: payment method grid ── */
.pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.pay-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    text-decoration: none;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    cursor: pointer;
}
.pay-method:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--panel-shadow), 0 4px 16px rgba(0,0,0,0.3);
}

.pay-method-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.pay-method-logo {
    height: 40px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 6px;
}

.pay-method-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-body);
    text-align: center;
}

.pay-method-note {
    font-size: 10px;
    color: var(--c-muted);
    text-align: center;
    margin-top: -4px;
}

/* ── PayPage: order & form ── */
.pay-order-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffd800;
    margin-bottom: 12px;
}

.pay-order-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pay-order-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--c-bright);
}

.pay-order-discount {
    font-size: 16px;
    font-weight: 600;
    color: #ff4444;
}

.pay-field {
    margin-bottom: 20px;
}

.pay-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-body);
    margin-bottom: 8px;
}

.pay-field-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    color: var(--c-bright);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.pay-field-input::placeholder {
    color: var(--c-muted);
}
.pay-field-input:focus {
    border-color: rgba(180,140,255,0.5);
    box-shadow: 0 0 0 3px rgba(180,140,255,0.15);
}

.pay-submit {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}
.pay-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.pay-submit:active {
    transform: translateY(0);
}

.pay-alt-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pay-alt-link {
    font-size: 13px;
    color: #b090e0;
    text-decoration: none;
    border-bottom: 1px solid rgba(176,144,224,0.3);
    transition: color .2s;
}
.pay-alt-link:hover {
    color: #d0b8ff;
}

@media (max-width: 440px) {
    .pay-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pay-method { padding: 14px 10px; }
    .pay-order-name { font-size: 16px; }
    .pay-order-amount { font-size: 22px; }
    .io-ip {
        zoom:85%;
    }

    .io-entry {
        gap: 10px;
        padding: 10px 12px;
    }
    .tl-time {
        display: none;
    }
}

/* ===================== /Payments ===================== */


/* ===================== Risk ===================== */

.rk-table-wrap {
    background: var(--panel-bg);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    overflow: hidden;
}

.rk-scroll {
    overflow-x: auto;
    min-width: 100%;
}

.rk-row {
    display: grid;
    grid-template-columns: 70px repeat(9, 1fr);
    min-width: 600px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background .15s;
}
.rk-row:last-child { border-bottom: none; }
.rk-row:not(.rk-row-head):hover { background: rgba(255,255,255,0.03); }

.rk-row-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-label);
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rk-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 10px 4px;
    font-size: 12px;
}

.rk-cell-date {
    font-weight: 600;
    color: var(--c-body);
    font-family: monospace;
    font-size: 12px;
    justify-content: center;
}

.rk-bar-bg {
    width: 100%;
    max-width: 32px;
    height: 48px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.rk-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height .3s ease;
}

.rk-bar-ok  { background: linear-gradient(to top, #22c55e, #4ade80); }
.rk-bar-bad { background: linear-gradient(to top, #ef4444, #f87171); }

.rk-val {
    font-size: 11px;
    font-weight: 700;
}
.rk-val-ok  { color: #4ade80; }
.rk-val-bad { color: #f87171; }

.rk-legend {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 8px;
}
.rk-legend-ok  { background: rgba(34,197,94,0.15); color: #4ade80; }
.rk-legend-bad { background: rgba(239,68,68,0.15); color: #f87171; }

@media (max-width: 520px) {
    .rk-bar-bg { height: 36px; max-width: 24px; }
    .rk-cell { padding: 8px 2px; }
    .rk-val { font-size: 10px; }
}

/* ===================== /Risk ===================== */