:root {
    --sick-red: #df102b;
    --sick-red-bright: #ff2445;
    --sick-red-dark: #820b1c;
    --sick-bg: #050506;
    --sick-panel: rgba(11, 11, 13, .94);
    --sick-panel-soft: rgba(18, 18, 21, .88);
    --sick-line: rgba(255, 255, 255, .1);
    --sick-line-red: rgba(223, 16, 43, .38);
    --sick-text: #f4f4f6;
    --sick-muted: #9fa1aa;
}

.sickness-dashboard {
    min-height: 100vh;
    color: var(--sick-text);
    font-family: "Rajdhani", sans-serif;
    background: #050506;
}

.sickness-dashboard .video-background {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 2, 3, .94), rgba(5, 5, 7, .74) 48%, rgba(2, 2, 3, .92)),
        linear-gradient(180deg, rgba(0, 0, 0, .18), #050506 92%),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.sickness-dashboard .video-background::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .26;
    background:
        radial-gradient(circle at 78% 18%, rgba(223, 16, 43, .3), transparent 28%),
        url("../img/sickness/blood-scratches.png") center / cover no-repeat;
}

.sickness-dashboard .video-background::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(5, 5, 6, .88));
}

.sickness-dashboard #bg-video,
.sickness-dashboard .video-overlay {
    display: none;
}

.sickness-dashboard aside.sidebar {
    width: 286px;
    border-right: 1px solid var(--sick-line-red);
    background:
        linear-gradient(180deg, rgba(20, 5, 9, .34), transparent 24%),
        rgba(6, 6, 8, .97);
    box-shadow: 20px 0 70px rgba(0, 0, 0, .48);
}

.sickness-dashboard .sidebar-left {
    padding: 20px 17px;
}

.sickness-dashboard .auth_block_top {
    margin-bottom: 14px;
    padding-bottom: 18px;
    border-bottom-color: var(--sick-line);
}

.sickness-dashboard .auth_logo img {
    width: 205px;
    max-height: 126px;
    filter: drop-shadow(0 8px 20px rgba(223, 16, 43, .24));
}

.sickness-dashboard .auth_header_top {
    padding: 14px;
    border: 1px solid var(--sick-line);
    border-left: 2px solid var(--sick-red);
    border-radius: 0;
    background: linear-gradient(105deg, rgba(223, 16, 43, .09), rgba(255, 255, 255, .025));
}

.sickness-dashboard .auth_header_title p {
    color: #fff;
    font-family: "Cinzel", serif;
    font-size: 16px;
}

.sickness-dashboard .auth_bottom_text small {
    color: var(--sick-muted);
}

.sickness-dashboard .auth_header_title svg,
.sickness-dashboard .sidebar-menu svg,
.sickness-dashboard .sidebar-menu img,
.sickness-dashboard .auth_nav_top i,
.sickness-dashboard .auth_top_r svg {
    color: var(--sick-red-bright);
}

.sickness-dashboard .sidebar-menu {
    gap: 5px;
}

.sickness-dashboard .sidebar-menu a,
.sickness-dashboard .logout button {
    min-height: 43px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 0;
    color: #aeb0b8;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .055em;
}

.sickness-dashboard .sidebar-menu a:hover,
.sickness-dashboard .logout button:hover,
.sickness-dashboard .sidebar-menu a.active {
    border-color: var(--sick-line-red);
    border-left-color: var(--sick-red-bright);
    background: linear-gradient(90deg, rgba(223, 16, 43, .17), rgba(223, 16, 43, .025));
    color: #fff;
}

.sickness-dashboard .sidebar-menu.bottom {
    border-top-color: var(--sick-line);
}

.sickness-dashboard .logout button {
    color: #e88a98;
}

.sickness-dashboard .main-content {
    width: calc(100% - 286px);
    margin-left: 286px;
    padding: 22px 28px 60px;
}

.sickness-dashboard .main-wrap {
    width: min(1240px, 100%);
}

.sickness-dashboard .auth_top {
    top: 12px;
    min-height: 64px;
    margin-bottom: 20px;
    padding: 9px 12px;
    border: 1px solid var(--sick-line);
    border-radius: 0;
    background: rgba(7, 7, 9, .92);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .36);
    backdrop-filter: blur(14px);
}

.sickness-dashboard .auth_nav_top a,
.sickness-dashboard .auth_top_r .btn-accent,
.sickness-dashboard .nav__langs-selected {
    min-height: 42px;
    border-radius: 0;
    color: #d6d7dc;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.sickness-dashboard .auth_nav_top a:hover,
.sickness-dashboard .auth_nav_top li:first-child a {
    border-color: var(--sick-line-red);
    background: rgba(223, 16, 43, .11);
    color: #fff;
}

.sickness-dashboard .auth_top_r .btn-accent,
.sickness-dashboard .nav__langs-selected {
    border: 1px solid var(--sick-line-red);
    background: linear-gradient(180deg, #e51a38, #a90a23);
    color: #fff;
    box-shadow: 0 10px 28px rgba(223, 16, 43, .2);
}

.sickness-dashboard .nav__langs-item {
    border-color: var(--sick-line-red);
    border-radius: 0;
    background: #0b0b0d;
}

.sickness-dashboard .dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    margin-bottom: 18px;
    padding: 30px 34px;
    border: 1px solid var(--sick-line);
    border-left: 3px solid var(--sick-red);
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(8, 8, 10, .98), rgba(8, 8, 10, .73)),
        url("../img/sickness/web-blood-castle.jpg") center 32% / cover;
    box-shadow: 0 24px 65px rgba(0, 0, 0, .38);
}

.sickness-dashboard .dashboard-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 82% 50%, rgba(223, 16, 43, .16), transparent 30%);
}

.sickness-dashboard .dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.sickness-dashboard .dashboard-hero span {
    color: var(--sick-red-bright);
    font-family: "Rajdhani", sans-serif;
    letter-spacing: .18em;
}

.sickness-dashboard .dashboard-hero span::before {
    background: var(--sick-red);
}

.sickness-dashboard .dashboard-hero h1,
.sickness-dashboard .create_game_account p,
.sickness-dashboard .title h1,
.sickness-dashboard .title,
.sickness-dashboard .popup-title,
.sickness-dashboard .service-top-block h2,
.sickness-dashboard .donate-title {
    color: #fff;
    font-family: "Cinzel", serif;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.sickness-dashboard .dashboard-hero h1 {
    font-size: clamp(30px, 4vw, 47px);
}

.sickness-dashboard .dashboard-hero p {
    max-width: 650px;
    color: #b7b8c0;
    font-size: 16px;
}

.sickness-dashboard .dashboard-hero__brand img {
    width: 220px;
    max-height: 145px;
    object-fit: contain;
    filter: drop-shadow(0 12px 25px rgba(223, 16, 43, .25));
}

.sickness-dashboard .auth-main-link {
    gap: 14px;
}

.sickness-dashboard .auth-main-top-item,
.sickness-dashboard .auth-content-main,
.sickness-dashboard .master-acc-item,
.sickness-dashboard .popup-content,
.sickness-dashboard .card,
.sickness-dashboard .service-item,
.sickness-dashboard .ticket-sidebar,
.sickness-dashboard .ticket-section,
.sickness-dashboard .streamer-referral-card,
.sickness-dashboard .streamer-referral-history {
    border: 1px solid var(--sick-line);
    border-radius: 0;
    background:
        radial-gradient(circle at 95% 0%, rgba(223, 16, 43, .09), transparent 32%),
        linear-gradient(180deg, var(--sick-panel-soft), var(--sick-panel));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .025);
}

.sickness-dashboard .auth-main-top-item {
    min-height: 126px;
    padding: 20px;
}

.sickness-dashboard .refresh_link {
    border-color: var(--sick-line-red);
    border-radius: 0;
    background: rgba(223, 16, 43, .08);
    color: var(--sick-red-bright);
}

.sickness-dashboard .auth_donation_coins p,
.sickness-dashboard .tooltip_title {
    color: var(--sick-muted);
    font-family: "Rajdhani", sans-serif;
    letter-spacing: .07em;
}

.sickness-dashboard .auth_donate_title span,
.sickness-dashboard .streamer-nick {
    color: #fff;
    font-family: "Cinzel", serif;
}

.sickness-dashboard .auth-content-main {
    padding: 25px;
}

.sickness-dashboard .create_game_account {
    border: 1px solid var(--sick-line);
    border-left: 2px solid var(--sick-red);
    border-radius: 0;
    background: rgba(255, 255, 255, .025);
}

.sickness-dashboard .create_game_account p::before {
    background: var(--sick-red-bright);
    box-shadow: 0 0 16px rgba(255, 36, 69, .7);
}

.sickness-dashboard .btn-primary,
.sickness-dashboard .btn-green,
.sickness-dashboard .btn-accent {
    border: 1px solid rgba(255, 68, 94, .45);
    border-radius: 0;
    background: linear-gradient(180deg, #ec1c3c, #a90922);
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: .055em;
    box-shadow: 0 14px 34px rgba(223, 16, 43, .2);
}

.sickness-dashboard .btn-gray-no-border,
.sickness-dashboard .default-link {
    border: 1px solid var(--sick-line);
    border-radius: 0;
    background: rgba(255, 255, 255, .035);
    color: #d7d8dd;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
}

.sickness-dashboard .btn-gray-no-border:hover,
.sickness-dashboard .default-link:hover,
.sickness-dashboard .default-link.active {
    border-color: var(--sick-line-red);
    background: rgba(223, 16, 43, .1);
    color: #fff;
}

.sickness-dashboard .change-game-password-block {
    border-bottom-color: var(--sick-line);
    background: rgba(255, 255, 255, .025);
}

.sickness-dashboard .master-name-plus #game_login,
.sickness-dashboard .master-name-plus p:last-child {
    color: #fff;
    font-family: "Cinzel", serif;
}

.sickness-dashboard .plus-toggle {
    border-color: var(--sick-line-red);
    background: rgba(223, 16, 43, .14);
}

.sickness-dashboard .omg-table thead {
    background: rgba(223, 16, 43, .08);
}

.sickness-dashboard .omg-table th,
.sickness-dashboard .omg-table td {
    border-color: var(--sick-line);
    color: #c7c8ce;
    font-family: "Rajdhani", sans-serif;
}

.sickness-dashboard .omg-table th {
    color: #fff;
    letter-spacing: .08em;
}

.sickness-dashboard .omg-table tbody tr:hover {
    background: rgba(223, 16, 43, .06);
}

.sickness-dashboard .form-control,
.sickness-dashboard select.form-control,
.sickness-dashboard textarea,
.sickness-dashboard .area-for-response-text {
    border: 1px solid var(--sick-line);
    border-radius: 0;
    background: rgba(4, 4, 6, .86);
    color: #fff;
    font-family: "Rajdhani", sans-serif;
}

.sickness-dashboard .form-control:focus,
.sickness-dashboard select.form-control:focus,
.sickness-dashboard textarea:focus,
.sickness-dashboard .area-for-response-text:focus {
    border-color: var(--sick-red-bright);
    box-shadow: 0 0 0 3px rgba(223, 16, 43, .1);
}

.sickness-dashboard .form-control::placeholder,
.sickness-dashboard textarea::placeholder {
    color: #72747d;
}

.sickness-dashboard .popup-overlay {
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(8px);
}

.sickness-dashboard .popup-content {
    border-top: 2px solid var(--sick-red);
}

.sickness-dashboard .popup-close,
.sickness-dashboard .close {
    border-color: var(--sick-line-red);
    border-radius: 0;
    background: rgba(223, 16, 43, .08);
    color: var(--sick-red-bright);
}

.sickness-dashboard .alert-success,
.sickness-dashboard .alert-danger {
    border-radius: 0;
    background: linear-gradient(90deg, rgba(22, 86, 52, .7), rgba(8, 8, 10, .92));
}

.sickness-dashboard .alert-danger {
    border-color: rgba(223, 16, 43, .42);
    background: linear-gradient(90deg, rgba(115, 10, 29, .72), rgba(8, 8, 10, .92));
}

.sickness-dashboard .dashboard-empty-state {
    border-color: var(--sick-line-red);
    border-radius: 0;
    background: rgba(223, 16, 43, .035);
}

.sickness-dashboard .dashboard-empty-state__icon,
.sickness-dashboard .pk-count,
.sickness-dashboard .text-danger {
    color: var(--sick-red-bright);
}

.sickness-dashboard .service-top-block,
.sickness-dashboard .ticket-top-block,
.sickness-dashboard .ticket-filter,
.sickness-dashboard .ticket-item,
.sickness-dashboard .message {
    border-color: var(--sick-line);
}

.sickness-dashboard .ticket-item.active,
.sickness-dashboard .ticket-item:hover {
    background: rgba(223, 16, 43, .08);
}

.sickness-dashboard .message.right {
    border-color: var(--sick-line-red);
    background: rgba(223, 16, 43, .1);
}

.sickness-dashboard .orange,
.sickness-dashboard .bonus-eyebrow,
.sickness-dashboard .price_col,
.sickness-dashboard .payment_bonus_price span,
.sickness-dashboard .bonus-item p span,
.sickness-dashboard .streamer-referral-commission strong {
    color: var(--sick-red-bright) !important;
}

.sickness-dashboard .pay_method,
.sickness-dashboard .payment_bonus_price,
.sickness-dashboard .bonus-item,
.sickness-dashboard .streamer-referral-hero,
.sickness-dashboard .streamer-referral-box {
    border-color: var(--sick-line) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .025) !important;
}

.sickness-dashboard .pay_method:hover,
.sickness-dashboard .pay_method.active {
    border-color: var(--sick-red-bright) !important;
    background: rgba(223, 16, 43, .1) !important;
}

.sickness-dashboard .noUi-connect {
    background: linear-gradient(90deg, var(--sick-red-dark), var(--sick-red-bright));
}

.sickness-dashboard .noUi-handle {
    border-color: var(--sick-red-bright);
    background: #fff;
    box-shadow: 0 0 18px rgba(223, 16, 43, .38);
}

.sickness-dashboard .custom-select-options,
.sickness-dashboard .custom-select-option {
    border-color: var(--sick-line) !important;
    background-color: #0b0b0d !important;
    color: #fff !important;
}

.sickness-dashboard .gw-burger {
    border-color: var(--sick-line-red);
    border-radius: 0;
    background: #0b0b0d;
}

.sickness-dashboard .gw-burger__line {
    background: var(--sick-red-bright);
}

.premium-modal-open,
.premium-modal-open body {
    overflow: hidden;
}

.premium-reward-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 22px;
    animation: premium-modal-in .3s ease both;
}

.premium-reward-modal.is-closing {
    animation: premium-modal-out .22s ease both;
}

.premium-reward-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(10px);
}

.premium-reward-modal__panel {
    position: relative;
    overflow: hidden;
    width: min(680px, 100%);
    padding: 42px 48px 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-top: 3px solid var(--sick-red);
    background:
        radial-gradient(circle at 50% 0%, rgba(223, 16, 43, .25), transparent 35%),
        linear-gradient(145deg, #141417, #070708 72%);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .75), 0 0 70px rgba(223, 16, 43, .12);
    text-align: center;
}

.premium-reward-modal__panel::before {
    content: "PREMIUM";
    position: absolute;
    left: 50%;
    top: 44%;
    color: rgba(255, 255, 255, .022);
    font-family: "Cinzel", serif;
    font-size: 96px;
    font-weight: 900;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.premium-reward-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sick-line);
    background: rgba(255, 255, 255, .04);
    color: #aeb0b8;
    font-size: 25px;
    cursor: pointer;
}

.premium-reward-modal__seal {
    position: relative;
    z-index: 1;
    width: 128px;
    height: 128px;
    margin: 0 auto 22px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(255, 64, 91, .55);
    background: radial-gradient(circle, rgba(223, 16, 43, .28), rgba(0, 0, 0, .25));
    box-shadow: inset 0 0 36px rgba(223, 16, 43, .18), 0 0 38px rgba(223, 16, 43, .18);
    animation: premium-seal-pulse 2.4s ease-in-out infinite;
}

.premium-reward-modal__seal strong {
    color: #fff;
    font-family: "Cinzel", serif;
    font-size: 54px;
    line-height: .82;
}

.premium-reward-modal__seal span,
.premium-reward-modal__seal small {
    color: var(--sick-red-bright);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.premium-reward-modal__seal small {
    margin-top: 5px;
    color: #fff;
    font-size: 9px;
}

.premium-reward-modal__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 7px;
    color: var(--sick-red-bright);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.premium-reward-modal h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-family: "Cinzel", serif;
    font-size: clamp(29px, 5vw, 44px);
    line-height: 1.12;
    text-transform: uppercase;
}

.premium-reward-modal__text {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 16px auto 24px;
    color: #bfc0c7;
    font-size: 17px;
    line-height: 1.55;
}

.premium-reward-modal__steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 26px;
    background: var(--sick-line);
}

.premium-reward-modal__steps span {
    min-height: 78px;
    padding: 13px 10px;
    display: grid;
    place-content: center;
    gap: 5px;
    background: #0c0c0e;
    color: #d6d7dc;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.premium-reward-modal__steps b {
    color: var(--sick-red-bright);
    font-family: "Cinzel", serif;
    font-size: 15px;
}

.premium-reward-modal__actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.premium-reward-modal__actions > * {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes premium-modal-in {
    from { opacity: 0; transform: scale(.97); }
}

@keyframes premium-modal-out {
    to { opacity: 0; transform: scale(.98); }
}

@keyframes premium-seal-pulse {
    50% { box-shadow: inset 0 0 42px rgba(223, 16, 43, .24), 0 0 54px rgba(223, 16, 43, .28); }
}

@media (max-width: 1180px) {
    .sickness-dashboard aside.sidebar { width: 260px; }
    .sickness-dashboard .main-content { width: calc(100% - 260px); margin-left: 260px; }
}

@media (max-width: 960px) {
    .sickness-dashboard aside.sidebar { width: min(84vw, 286px); }
    .sickness-dashboard .main-content { width: 100%; margin-left: 0; padding: 14px; }
    .sickness-dashboard .auth_top { padding-left: 56px; }
}

@media (max-width: 675px) {
    .sickness-dashboard .main-content { padding: 9px; }
    .sickness-dashboard .dashboard-hero { min-height: 160px; padding: 22px 19px; }
    .sickness-dashboard .dashboard-hero h1 { font-size: 29px; }
    .sickness-dashboard .auth-content-main { padding: 15px; }
    .sickness-dashboard .auth-main-top-item { padding: 16px; }
    .premium-reward-modal { padding: 10px; }
    .premium-reward-modal__panel { padding: 34px 18px 24px; }
    .premium-reward-modal__seal { width: 104px; height: 104px; }
    .premium-reward-modal__seal strong { font-size: 44px; }
    .premium-reward-modal__steps { grid-template-columns: 1fr; }
    .premium-reward-modal__steps span { min-height: 55px; }
    .premium-reward-modal__actions { flex-direction: column; }
}
