/* JBE Reborn final overrides — loaded AFTER theme_dark/theme_ghost. */
html {
    min-height: 100%;
    background: #0a0d12 !important;
}

body {
    min-height: 100vh !important;
    background-color: #0a0d12 !important;
    background-image:
        radial-gradient(circle at 10% 0%, rgba(240,170,30,.09), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(27,117,168,.07), transparent 30%) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.wapper.jbe-wapper {
    height: auto !important;
    min-height: 100vh !important;
    background: #0a0d12 !important;
}

.wapper.jbe-wapper > .jbe-content,
.jbe-content {
    flex: 1 0 auto !important;
    min-height: calc(100vh - 74px) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(240,170,30,.09), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(27,117,168,.07), transparent 30%),
        #0a0d12 !important;
}

.wapper.jbe-wapper > .jbe-footer,
.jbe-footer {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    border-color: var(--jbe-border) !important;
    background: #090c11 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.jbe-page-container {
    padding-bottom: 90px !important;
}

/* Settings: Steam is the primary account block. */
.jbe-settings-page {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jbe-steam-hub {
    position: relative;
    scroll-margin-top: 92px;
    margin-bottom: 28px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(57,145,198,.45);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 18%, rgba(45,137,189,.17), transparent 28%),
        linear-gradient(145deg, rgba(17,34,48,.98), rgba(14,19,27,.98));
    box-shadow: 0 22px 58px rgba(0,0,0,.20);
}


.jbe-steam-hub__anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.jbe-steam-hub::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(#48a4d7, #176a9b);
}

.jbe-steam-hub__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
}

.jbe-steam-hub__title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.jbe-steam-hub__logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(94,185,235,.28);
    border-radius: 16px;
    background: rgba(31,111,157,.15);
    color: #72c4ef;
    font-size: 27px;
}

.jbe-steam-hub__kicker {
    color: #78c7ef;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .13em;
}

.jbe-steam-hub__title h2 {
    margin: 3px 0 4px;
    color: var(--jbe-text);
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.04em;
}

.jbe-steam-hub__title p {
    max-width: 580px;
    margin: 0;
    color: var(--jbe-muted);
    font-size: 11px;
}

.jbe-steam-hub__status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--jbe-border);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: var(--jbe-muted);
    font-size: 10px;
    font-weight: 850;
}

.jbe-steam-hub__status--ok {
    border-color: rgba(98,210,138,.30);
    background: rgba(98,210,138,.08);
    color: #9de3b5;
}

.jbe-steam-hub__status--warn {
    border-color: rgba(240,170,30,.30);
    background: rgba(240,170,30,.08);
    color: #ffd274;
}

.jbe-steam-hub__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 12px;
}

.jbe-steam-hub__idbox,
.jbe-steam-hub__profilebox {
    min-height: 118px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: rgba(6,12,18,.42);
}

.jbe-steam-hub__idbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jbe-steam-hub__idbox > span {
    color: var(--jbe-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.jbe-steam-hub__idbox > strong {
    margin: 7px 0 4px;
    overflow-wrap: anywhere;
    color: #fff;
    font: 800 clamp(19px, 2vw, 27px)/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -.025em;
}

.jbe-steam-hub__idbox > small,
.jbe-steam-hub__profilebox small {
    color: var(--jbe-muted);
    font-size: 10px;
}

.jbe-steam-hub__profilebox {
    display: flex;
    align-items: center;
    gap: 13px;
}

.jbe-steam-hub__profile-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(45,137,189,.13);
    color: #74c6ef;
    font-size: 20px;
}

.jbe-steam-hub__profilebox > div {
    min-width: 0;
    display: grid;
}

.jbe-steam-hub__profilebox strong {
    color: var(--jbe-text);
    font-size: 12px;
}

.jbe-steam-hub__steam-user {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--jbe-text) !important;
    text-decoration: none !important;
}

.jbe-steam-hub__steam-user img {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 2px solid rgba(106,196,238,.38);
    border-radius: 13px;
    object-fit: cover;
}

.jbe-steam-hub__steam-user > span {
    min-width: 0;
    display: grid;
}

.jbe-steam-hub__steam-user strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-steam-hub__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}

.jbe-steam-hub__edit label {
    display: block;
    margin-bottom: 7px;
    color: #dfe7ef;
    font-size: 10px;
    font-weight: 850;
}

.jbe-steam-hub .form-control {
    min-height: 42px;
    border-color: rgba(92,143,181,.34) !important;
    background: rgba(7,12,18,.78) !important;
    color: var(--jbe-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.jbe-steam-hub .btn {
    min-height: 42px;
    white-space: nowrap;
}

.btn-steam {
    border: 1px solid #2d89bd !important;
    background: #216f9e !important;
    color: #fff !important;
}

.btn-steam:hover {
    background: #2a83b8 !important;
}

.jbe-steam-hub__buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main page: Steam tile is the dominant tile. */
.jbe-tiles .jbe-tile--steam-primary {
    grid-column: 1 / -1 !important;
    min-height: 230px;
    border-color: rgba(50,145,199,.46);
    background:
        radial-gradient(circle at 90% 20%, rgba(46,145,201,.16), transparent 28%),
        linear-gradient(145deg, rgba(19,48,67,.78), rgba(12,18,26,.98));
}

.jbe-tile--steam-primary .jbe-tile__media {
    width: 126px;
    height: 126px;
    flex-basis: 126px;
    border-color: rgba(83,176,228,.30);
    box-shadow: 0 0 0 7px rgba(47,142,196,.05);
}

.jbe-tile__steamid {
    max-width: 100%;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9edcff;
    font: 800 15px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.jbe-tile--steam-primary .jbe-tile__arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 8px 11px;
    border: 1px solid rgba(81,176,229,.28);
    border-radius: 9px;
    background: rgba(45,137,189,.08);
    color: #8fd5fa;
}

@media (max-width: 991px) {
    .jbe-steam-hub__head {
        align-items: stretch;
        flex-direction: column;
    }
    .jbe-steam-hub__status { align-self: flex-start; }
    .jbe-steam-hub__actions { grid-template-columns: 1fr; }
    .jbe-steam-hub__buttons .btn { width: 100%; }
}

@media (max-width: 700px) {
    .jbe-steam-hub { padding: 19px; }
    .jbe-steam-hub__grid { grid-template-columns: 1fr; }
    .jbe-steam-hub__title { align-items: flex-start; }
    .jbe-steam-hub__logo { width: 48px; height: 48px; flex-basis: 48px; font-size: 22px; }
    .jbe-steam-hub__title h2 { font-size: 27px; }
    .jbe-steam-hub__actions .input-group { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .jbe-steam-hub__actions .input-group-append { margin-left: 0; }
    .jbe-steam-hub__actions .input-group-append .btn { width: 100%; border-radius: .25rem; }
    .jbe-tiles .jbe-tile--steam-primary { min-height: 190px; }
}

@media (max-width: 520px) {
    .jbe-tiles .jbe-tile--steam-primary {
        min-height: 190px;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .jbe-tile--steam-primary .jbe-tile__media { width: 84px; height: 84px; flex-basis: 84px; }
    .jbe-tile__steamid { white-space: normal; overflow-wrap: anywhere; }
}


/* =========================================================
   PROFILE V2
   ========================================================= */

.jbe-profile-v2 {
    width: 100%;
    min-width: 0;
    padding-bottom: 34px;
}

.jbe-profile-v2 a {
    text-decoration: none;
}

.jbe-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) minmax(250px,auto);
    align-items: center;
    gap: 22px;
    min-height: 190px;
    margin-bottom: 14px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--jbe-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 80% 5%, rgba(63,122,181,.14), transparent 30%),
        radial-gradient(circle at 10% 100%, rgba(240,170,30,.08), transparent 30%),
        linear-gradient(145deg, #121923, #0f141c);
    box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.jbe-profile-hero::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(#f0aa1e, #397eb1);
}

.jbe-profile-hero__avatar {
    position: relative;
    z-index: 1;
    width: 126px;
    height: 126px;
}

.jbe-profile-hero__avatar > img {
    width: 100%;
    height: 100%;
    display: block;
    border: 4px solid rgba(255,255,255,.86);
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 0 0 5px rgba(240,170,30,.16),
        0 18px 38px rgba(0,0,0,.28);
}

.jbe-profile-presence {
    position: absolute;
    right: 4px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    border: 4px solid #111821;
    border-radius: 50%;
    background: #65717d;
}

.jbe-profile-presence--online {
    background: #54cc81;
    box-shadow: 0 0 0 4px rgba(84,204,129,.12);
}

.jbe-profile-hero__main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.jbe-profile-hero__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.jbe-profile-id,
.jbe-profile-group {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--jbe-border);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: var(--jbe-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
}

.jbe-profile-hero__main h1 {
    margin: 0;
    overflow: hidden;
    color: var(--jbe-text);
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: -.045em;
    text-overflow: ellipsis;
}

.jbe-profile-hero__presence {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: var(--jbe-muted);
    font-size: 11px;
    font-weight: 700;
}

.jbe-profile-hero__presence .fa-circle {
    color: #54cc81;
    font-size: 7px;
}

.jbe-profile-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
    color: #b5c0cb;
    font-size: 10px;
}

.jbe-profile-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jbe-profile-hero__meta i,
.jbe-profile-hero__meta .glyphicon {
    color: #71859a;
}

.jbe-profile-hero__side {
    position: relative;
    z-index: 1;
    min-width: 250px;
}

.jbe-profile-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.jbe-profile-wallet > span {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1px 8px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    background: rgba(6,11,16,.42);
}

.jbe-profile-wallet i {
    grid-row: 1 / 3;
    align-self: center;
    color: #f0aa1e;
    font-size: 14px;
}

.jbe-profile-wallet small {
    color: var(--jbe-muted);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.jbe-profile-wallet strong {
    overflow: hidden;
    color: var(--jbe-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.jbe-profile-actions .btn {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    margin: 0;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.jbe-profile-summary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.jbe-profile-summary__item {
    min-width: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--jbe-border);
    border-radius: 14px;
    background: rgba(16,22,31,.82);
}

.jbe-profile-summary__item--steam {
    border-color: rgba(52,139,191,.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(42,131,184,.12), transparent 45%),
        rgba(16,22,31,.86);
}

.jbe-profile-summary__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: #8eb5d3;
}

.jbe-profile-summary__item--steam .jbe-profile-summary__icon {
    color: #72c4ef;
}

.jbe-profile-summary__item > div {
    min-width: 0;
    display: grid;
}

.jbe-profile-summary__item small {
    color: var(--jbe-muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.jbe-profile-summary__item strong {
    overflow: hidden;
    color: var(--jbe-text);
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-profile-summary__item--steam strong {
    color: #9edcff;
    font: 800 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.jbe-profile-layout {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr);
    gap: 14px;
    align-items: start;
}

.jbe-profile-layout__main,
.jbe-profile-layout__side {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.jbe-profile-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--jbe-border);
    border-radius: 16px;
    background: rgba(16,22,31,.90);
    box-shadow: 0 16px 42px rgba(0,0,0,.12);
}

.jbe-profile-card__head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.jbe-profile-card__head > div {
    min-width: 0;
}

.jbe-profile-card__head > div > span {
    color: #6d86a0;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.jbe-profile-card__head h2 {
    margin: 3px 0 0;
    color: var(--jbe-text);
    font-size: 17px;
    letter-spacing: -.025em;
}

.jbe-profile-card__head h2 a {
    color: inherit;
}

.jbe-profile-card__head > i,
.jbe-profile-card__head > .glyphicon {
    flex: 0 0 auto;
    color: #536b83;
    font-size: 17px;
}

.jbe-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.jbe-profile-info {
    min-width: 0;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(7,11,16,.34);
}

.jbe-profile-info small {
    color: var(--jbe-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.jbe-profile-info strong {
    margin-top: 3px;
    overflow: hidden;
    color: #eaf0f5;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-profile-last-topic {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 13px;
    border: 1px solid rgba(240,170,30,.14);
    border-radius: 11px;
    background: rgba(240,170,30,.045);
    color: var(--jbe-text) !important;
}

.jbe-profile-last-topic--empty {
    border-color: rgba(255,255,255,.055);
    background: rgba(255,255,255,.02);
}

.jbe-profile-last-topic__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(240,170,30,.08);
    color: #e6ad3e;
}

.jbe-profile-last-topic > span:nth-child(2) {
    min-width: 0;
    display: grid;
}

.jbe-profile-last-topic small {
    color: var(--jbe-muted);
    font-size: 8px;
    text-transform: uppercase;
}

.jbe-profile-last-topic strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-profile-last-topic > .fa-arrow-right {
    color: #75879a;
    font-size: 10px;
}

.jbe-profile-admins-table {
    border-radius: 11px;
    overflow: hidden;
}

.jbe-profile-admins-table .table {
    background: rgba(7,11,16,.25);
    color: var(--jbe-text);
}

.jbe-profile-admins-table .table td {
    vertical-align: middle;
    border-color: rgba(255,255,255,.07) !important;
    font-size: 10px;
}

.jbe-profile-admins-table thead td {
    color: var(--jbe-muted);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.jbe-profile-social-list {
    display: grid;
    gap: 8px;
}

.jbe-profile-social {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    background: rgba(7,11,16,.34);
    color: var(--jbe-text) !important;
}

.jbe-profile-social:hover {
    border-color: rgba(113,166,209,.28);
    background: rgba(24,34,45,.72);
}

.jbe-profile-social__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid !important;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.04);
    color: #8ba0b4;
}

.jbe-profile-social > img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin-left: -3px;
    border-radius: 9px;
    object-fit: cover;
}

.jbe-profile-social > div {
    min-width: 0;
    display: grid;
    flex: 1;
}

.jbe-profile-social small {
    color: var(--jbe-muted);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.jbe-profile-social strong,
.jbe-profile-social > div > span {
    overflow: hidden;
    color: #e8eef4;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-profile-social > .fa-external-link {
    margin-left: auto;
    color: #60768a;
    font-size: 9px;
}

.jbe-profile-social--steam .jbe-profile-social__icon { color: #6ec5f1; }
.jbe-profile-social--vk .jbe-profile-social__icon { color: #77b7eb; }
.jbe-profile-social--telegram .jbe-profile-social__icon { color: #56b8ee; }
.jbe-profile-social--discord .jbe-profile-social__icon { color: #9b9ff3; }
.jbe-profile-social--facebook .jbe-profile-social__icon { color: #7ea9f4; }
.jbe-profile-social--muted { opacity: .7; }

.jbe-profile-steamid {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(50,145,199,.21);
    border-radius: 11px;
    background: rgba(35,111,154,.055);
}

.jbe-profile-steamid span {
    color: #5c91b0;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.jbe-profile-steamid strong {
    overflow-wrap: anywhere;
    color: #9edcff;
    font: 800 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.jbe-profile-friends,
.jbe-profile-widget-list {
    min-width: 0;
}

.jbe-profile-widget-list img {
    max-width: 100%;
}

.jbe-profile-admin-actions {
    display: grid;
    gap: 8px;
}

.jbe-profile-admin-actions .btn {
    width: 100%;
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    border-radius: 9px;
    font-size: 10px;
}

.jbe-profile-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 10px;
    color: var(--jbe-muted);
    font-size: 10px;
}

.jbe-profile-wall__editor {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(7,11,16,.28);
}

.jbe-profile-wall__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jbe-profile-wall__actions #send_btn {
    min-height: 38px;
    margin: 0;
    border-radius: 9px;
    font-size: 10px;
}

.jbe-profile-wall__comments {
    margin-top: 14px;
}

.jbe-profile-wall #comments .comment {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 10px;
    margin: 0 0 8px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
    background: rgba(7,11,16,.28);
}

.jbe-profile-wall #comments .comment > a > img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
}

.jbe-profile-wall #comments .comment > div {
    min-width: 0;
}

.jbe-profile-wall #comments .comment .info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.jbe-profile-wall #comments .comment .author {
    min-width: 0;
    flex: 1;
    font-size: 10px;
    font-weight: 850;
}

.jbe-profile-wall #comments .comment .date {
    color: var(--jbe-muted);
    font-size: 8px;
}

.jbe-profile-wall #comments .comment .with_code {
    color: #c6d0da;
    font-size: 10px;
    line-height: 1.55;
}

.jbe-profile-wall #comments .clearfix {
    display: none;
}

@media (max-width: 1100px) {
    .jbe-profile-hero {
        grid-template-columns: auto minmax(0,1fr);
    }

    .jbe-profile-hero__side {
        grid-column: 1 / -1;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0,300px) 1fr;
        align-items: center;
        gap: 10px;
    }

    .jbe-profile-wallet { margin-bottom: 0; }
    .jbe-profile-actions { justify-content: flex-start; }

    .jbe-profile-layout {
        grid-template-columns: minmax(0,1.4fr) minmax(280px,.8fr);
    }
}

@media (max-width: 880px) {
    .jbe-profile-summary {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .jbe-profile-layout {
        grid-template-columns: 1fr;
    }

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

    .jbe-profile-layout__side > .jbe-profile-socials {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .jbe-profile-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .jbe-profile-hero__avatar {
        width: 104px;
        height: 104px;
        margin: 0 auto;
    }

    .jbe-profile-hero__labels,
    .jbe-profile-hero__presence,
    .jbe-profile-hero__meta {
        justify-content: center;
    }

    .jbe-profile-hero__side {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .jbe-profile-actions {
        justify-content: center;
    }

    .jbe-profile-actions .btn {
        flex: 1 1 140px;
    }

    .jbe-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .jbe-profile-layout__side {
        grid-template-columns: 1fr;
    }

    .jbe-profile-layout__side > .jbe-profile-socials {
        grid-column: auto;
    }
}

@media (max-width: 470px) {
    .jbe-profile-hero,
    .jbe-profile-card {
        padding: 16px;
        border-radius: 14px;
    }

    .jbe-profile-summary {
        grid-template-columns: 1fr;
    }

    .jbe-profile-summary__item {
        min-height: 67px;
    }

    .jbe-profile-wallet {
        grid-template-columns: 1fr;
    }

    .jbe-profile-actions {
        flex-direction: column;
    }

    .jbe-profile-actions .btn {
        width: 100%;
        flex: none;
    }

    .jbe-profile-last-topic {
        grid-template-columns: auto minmax(0,1fr);
    }

    .jbe-profile-last-topic > .fa-arrow-right {
        display: none;
    }
}


/* =========================================================
   PROFILE V1.4 — ADMIN ACTIONS AT TOP
   ========================================================= */

.jbe-profile-admin-top {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.jbe-profile-admin-top__label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 7px;
    color: #687f96;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.jbe-profile-admin-top__label i {
    color: #e3a72b;
}

.jbe-profile-admin-top__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.jbe-profile-admin-top__actions .btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.jbe-profile-admin-top__actions .btn i {
    color: #f0aa1e;
}

@media (max-width: 1100px) {
    .jbe-profile-admin-top__label,
    .jbe-profile-admin-top__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .jbe-profile-admin-top__label,
    .jbe-profile-admin-top__actions {
        justify-content: center;
    }

    .jbe-profile-admin-top__actions .btn {
        flex: 1 1 120px;
    }
}

@media (max-width: 470px) {
    .jbe-profile-admin-top__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .jbe-profile-admin-top__actions .btn {
        width: 100%;
    }
}


/* PROFILE v1.5 — correct Font Awesome brand family */
.jbe-profile-v2 .fa-brands {
    font-family: "Font Awesome 5 Brands" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   HOME PAGE VARIANT v1.6 — dark tile showcase like reference
   ========================================================= */

.jbe-home-arcade {
    width: 100%;
    min-width: 0;
}

.jbe-arcade-kicker {
    display: inline-block;
    color: #7b88a0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jbe-arcade-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 10px 4px 0;
}

.jbe-arcade-head__title h1 {
    margin: 6px 0 8px;
    color: var(--jbe-text);
    font-size: clamp(34px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -.04em;
}

.jbe-arcade-head__title p {
    max-width: 760px;
    margin: 0;
    color: var(--jbe-muted);
    font-size: 13px;
    line-height: 1.6;
}

.jbe-arcade-head__tools {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.jbe-arcade-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #bac6d3;
    font-size: 11px;
    font-weight: 800;
}

.jbe-arcade-status .fa-circle {
    color: #54cc81;
    font-size: 8px;
}

.jbe-arcade-mini-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jbe-arcade-mini-links a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--jbe-border);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: #8697aa !important;
}

.jbe-arcade-mini-links a:hover {
    border-color: rgba(120,168,220,.35);
    color: #d9e6f2 !important;
}

.jbe-portal-home {
    display: grid;
    grid-template-columns: 188px minmax(0,1fr);
    gap: 12px;
    align-items: start;
}

.jbe-portal-home__sidebar {
    display: grid;
    gap: 8px;
}

.jbe-home-filter {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--jbe-border);
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    background: rgba(255,255,255,.02);
    color: var(--jbe-text);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    transition: .15s ease;
}

.jbe-home-filter:hover,
.jbe-home-filter.is-active {
    border-left-color: #6d7cff;
    background: rgba(109,124,255,.10);
}

.jbe-home-sidebar-note {
    margin-top: 8px;
    padding: 14px;
    border: 1px solid var(--jbe-border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.jbe-home-sidebar-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--jbe-text);
    font-size: 13px;
}

.jbe-home-sidebar-note small {
    color: var(--jbe-muted);
    line-height: 1.55;
}

.jbe-portal-home__content {
    min-width: 0;
}

.jbe-home-chipbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.jbe-home-chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--jbe-border);
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    color: #cfd8e2;
    font-size: 12px;
    font-weight: 800;
}

.jbe-home-chip:hover,
.jbe-home-chip.is-active {
    border-color: rgba(109,124,255,.42);
    background: #6d7cff;
    color: #fff;
}

.jbe-home-showcase {
    display: grid;
    gap: 12px;
}

.jbe-home-monitor {
    padding: 14px;
    border: 1px solid var(--jbe-border);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

.jbe-home-monitor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.jbe-home-monitor__head h2 {
    margin: 4px 0 0;
    color: var(--jbe-text);
    font-size: 24px;
    letter-spacing: -.03em;
}

.jbe-home-monitor__hint {
    color: #8e9fb1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jbe-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.jbe-home-tile {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 232px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid var(--jbe-border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(9,13,19,.4), rgba(9,13,19,.95));
    color: var(--jbe-text) !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.jbe-home-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(125,170,216,.35);
    box-shadow: 0 16px 40px rgba(0,0,0,.20);
}

.jbe-home-tile--wide {
    grid-column: span 2;
}

.jbe-home-tile__visual {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: .30;
}

.jbe-home-tile__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8,12,18,.15) 0%, rgba(8,12,18,.55) 55%, rgba(8,12,18,.95) 100%);
}

.jbe-home-tile__visual--social {
    background:
        linear-gradient(180deg, rgba(23,28,38,.5), rgba(9,13,19,.9)),
        radial-gradient(circle at 50% 0%, rgba(114,147,198,.14), transparent 45%);
    opacity: 1;
}

.jbe-home-tile__ring {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 50%;
    background: rgba(8,12,18,.72);
    box-shadow: 0 0 0 6px rgba(255,255,255,.05);
    z-index: 2;
}

.jbe-home-tile__ring img,
.jbe-home-tile__ring i {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: contain;
    color: #dbe8f5;
    font-size: 28px;
    line-height: 52px;
    text-align: center;
}

.jbe-home-tile__icon {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(8,12,18,.7);
    color: #9cb8d5;
    z-index: 2;
}

.jbe-home-tile__body {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 118px 16px 16px;
}

.jbe-home-tile__tag {
    color: #87a0ba;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jbe-home-tile__body strong {
    overflow: hidden;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-home-tile__body small {
    display: block;
    color: #b4c0cc;
    font-size: 12px;
    line-height: 1.55;
}

.jbe-home-tile__accent {
    overflow-wrap: anywhere;
    color: #9edcff;
    font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.jbe-home-tile--steam {
    background:
        radial-gradient(circle at 100% 0%, rgba(42,131,184,.17), transparent 34%),
        linear-gradient(180deg, rgba(9,13,19,.2), rgba(9,13,19,.98));
}

.jbe-home-tile--steam .jbe-home-tile__icon,
.jbe-home-tile--steam .jbe-home-tile__ring i {
    color: #72c4ef;
}

@media (max-width: 1100px) {
    .jbe-portal-home {
        grid-template-columns: 1fr;
    }

    .jbe-portal-home__sidebar {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }

    .jbe-home-sidebar-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .jbe-home-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .jbe-home-tile--wide {
        grid-column: span 2;
    }

    .jbe-arcade-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .jbe-arcade-head__tools {
        justify-items: start;
    }
}

@media (max-width: 680px) {
    .jbe-portal-home__sidebar {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .jbe-home-filter {
        border-radius: 10px;
        border-left-width: 1px;
    }

    .jbe-home-grid {
        grid-template-columns: 1fr;
    }

    .jbe-home-tile--wide {
        grid-column: auto;
    }
}

@media (max-width: 460px) {
    .jbe-home-chipbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .jbe-home-chip {
        width: 100%;
    }

    .jbe-home-tile {
        min-height: 214px;
    }

    .jbe-home-tile__ring {
        width: 66px;
        height: 66px;
    }

    .jbe-home-tile__ring img,
    .jbe-home-tile__ring i {
        width: 44px;
        height: 44px;
        font-size: 24px;
        line-height: 44px;
    }

    .jbe-home-tile__body {
        padding-top: 106px;
    }

    .jbe-home-tile__body strong {
        font-size: 24px;
    }
}


/* =========================================================
   HOME V1.7 REWORK
   ========================================================= */
.jbe-home-v17 {
    width: 100%;
    min-width: 0;
}

.jbe-home-v17__eyebrow {
    display: inline-block;
    color: #7f90a5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.jbe-home-v17__hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 4px 4px 0;
}

.jbe-home-v17__hero-main h1 {
    margin: 6px 0 8px;
    color: var(--jbe-text);
    font-size: clamp(34px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -.04em;
}

.jbe-home-v17__hero-main p {
    max-width: 730px;
    margin: 0;
    color: var(--jbe-muted);
    font-size: 13px;
    line-height: 1.6;
}

.jbe-home-v17__hero-tools {
    display: grid;
    justify-items: end;
    gap: 9px;
}

.jbe-home-v17__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c9d3de;
    font-size: 11px;
    font-weight: 800;
}

.jbe-home-v17__state .fa-circle {
    color: #54cc81;
    font-size: 8px;
}

.jbe-home-v17__tool-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jbe-home-v17__tool-links a {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid var(--jbe-border);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    color: #8da0b4 !important;
}

.jbe-home-v17__tool-links a:hover {
    border-color: rgba(123,169,220,.35);
    color: #e8eff7 !important;
}

.jbe-home-v17__layout {
    display: grid;
    grid-template-columns: 250px minmax(0,1fr);
    gap: 16px;
    align-items: start;
}

.jbe-home-v17__sidebar,
.jbe-home-v17__content {
    min-width: 0;
}

.jbe-home-v17__sidebar {
    display: grid;
    gap: 12px;
}

.jbe-home-v17__sidebar-card,
.jbe-home-v17__monitor-wrap {
    padding: 16px;
    border: 1px solid var(--jbe-border);
    border-radius: 14px;
    background: rgba(16,22,31,.78);
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

.jbe-home-v17__sidebar-title {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.jbe-home-v17__sidebar-title strong {
    color: var(--jbe-text);
    font-size: 18px;
}

.jbe-home-v17__filters {
    display: grid;
    gap: 8px;
}

.jbe-home-v17__filter {
    min-height: 43px;
    padding: 0 14px;
    border: 1px solid var(--jbe-border);
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    background: rgba(255,255,255,.02);
    color: var(--jbe-text);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    transition: .15s ease;
}

.jbe-home-v17__filter:hover,
.jbe-home-v17__filter.is-active {
    border-left-color: #6d7cff;
    background: rgba(109,124,255,.11);
}

.jbe-home-v17__notes {
    margin: 0;
    padding-left: 18px;
    color: var(--jbe-muted);
    font-size: 12px;
    line-height: 1.65;
}

.jbe-home-v17__quick-links {
    display: grid;
    gap: 8px;
}

.jbe-home-v17__quick-links a {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    color: #dce5ef !important;
}

.jbe-home-v17__quick-links a i,
.jbe-home-v17__quick-links a .glyphicon {
    width: 18px;
    text-align: center;
    color: #8eb4d4;
}

.jbe-home-v17__content {
    display: grid;
    gap: 12px;
}

.jbe-home-v17__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jbe-home-v17__chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--jbe-border);
    border-radius: 9px;
    background: rgba(255,255,255,.02);
    color: #ced7e1;
    font-size: 12px;
    font-weight: 800;
}

.jbe-home-v17__chip:hover,
.jbe-home-v17__chip.is-active {
    border-color: rgba(109,124,255,.42);
    background: #6d7cff;
    color: #fff;
}

.jbe-home-v17__block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.jbe-home-v17__block-head h2 {
    margin: 4px 0 0;
    color: var(--jbe-text);
    font-size: 25px;
    letter-spacing: -.03em;
}

.jbe-home-v17__block-hint {
    color: #91a4b7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jbe-home-v17__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.jbe-home-v17__tile {
    min-width: 0;
    min-height: 214px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    border: 1px solid var(--jbe-border);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(18,25,35,.98), rgba(10,14,20,.98)),
        linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    color: var(--jbe-text) !important;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jbe-home-v17__tile:hover {
    transform: translateY(-2px);
    border-color: rgba(123,169,220,.35);
    box-shadow: 0 18px 42px rgba(0,0,0,.20);
}

.jbe-home-v17__tile--featured {
    grid-column: span 2;
    min-height: 214px;
    background:
        radial-gradient(circle at 75% 30%, rgba(39,116,170,.20), transparent 38%),
        linear-gradient(180deg, rgba(18,25,35,.98), rgba(10,14,20,.98));
}

.jbe-home-v17__tile-media {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: auto;
}

.jbe-home-v17__tile-circle {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), rgba(7,11,16,.9)),
        rgba(7,11,16,.86);
    box-shadow: 0 0 0 7px rgba(255,255,255,.04);
}

.jbe-home-v17__tile-circle img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.jbe-home-v17__tile-circle--social i {
    color: #eef5fb;
    font-size: 30px;
}

.jbe-home-v17__tile-badge {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.04);
    color: #8eb6d7;
}

.jbe-home-v17__tile-body {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.jbe-home-v17__tile-topline {
    color: #8198b1;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jbe-home-v17__tile-body strong {
    overflow: hidden;
    color: #fff;
    font-size: 27px;
    line-height: 1;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-home-v17__tile-accent {
    overflow-wrap: anywhere;
    color: #9edcff;
    font: 800 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.jbe-home-v17__tile-body small {
    color: #b4c0cc;
    font-size: 12px;
    line-height: 1.55;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-badge,
.jbe-home-v17__tile--featured .jbe-home-v17__tile-circle--social i {
    color: #71c4ef;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-circle {
    box-shadow: 0 0 0 7px rgba(113,196,239,.06);
}

@media (max-width: 1180px) {
    .jbe-home-v17__layout {
        grid-template-columns: 220px minmax(0,1fr);
    }
}

@media (max-width: 980px) {
    .jbe-home-v17__hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .jbe-home-v17__hero-tools {
        justify-items: start;
    }

    .jbe-home-v17__layout {
        grid-template-columns: 1fr;
    }

    .jbe-home-v17__sidebar {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

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

    .jbe-home-v17__tile--featured {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .jbe-home-v17__sidebar {
        grid-template-columns: 1fr;
    }

    .jbe-home-v17__grid {
        grid-template-columns: 1fr;
    }

    .jbe-home-v17__tile--featured {
        grid-column: auto;
    }
}

@media (max-width: 460px) {
    .jbe-home-v17__chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .jbe-home-v17__chip {
        width: 100%;
    }

    .jbe-home-v17__sidebar-card,
    .jbe-home-v17__monitor-wrap,
    .jbe-home-v17__tile {
        padding: 14px;
    }

    .jbe-home-v17__tile-circle {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .jbe-home-v17__tile-circle img {
        width: 48px;
        height: 48px;
    }

    .jbe-home-v17__tile-body strong {
        font-size: 24px;
    }
}


/* =========================================================
   HOME V1.8 TILE POLISH
   ========================================================= */
.jbe-home-v17__grid {
    gap: 14px;
}

.jbe-home-v17__tile {
    position: relative;
    overflow: hidden;
    min-height: 196px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(118,144,176,.18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,255,255,.03), transparent 34%),
        linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}

.jbe-home-v17__tile::before {
    content: '';
    position: absolute;
    top: -34px;
    left: -26px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
    opacity: .45;
    pointer-events: none;
}

.jbe-home-v17__tile::after {
    content: '';
    position: absolute;
    inset: auto 14px 0 14px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    opacity: .45;
}

.jbe-home-v17__tile:hover {
    transform: translateY(-2px);
    border-color: rgba(130,173,221,.36);
}

.jbe-home-v17__tile--featured {
    min-height: 196px;
    background:
        radial-gradient(circle at 76% 20%, rgba(34,118,173,.24), transparent 34%),
        linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}

.jbe-home-v17__tile-media,
.jbe-home-v17__tile-body,
.jbe-home-v17__tile-footer {
    position: relative;
    z-index: 1;
}

.jbe-home-v17__tile-media {
    align-items: flex-start;
    margin: 0;
}

.jbe-home-v17__tile-circle {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.035);
}

.jbe-home-v17__tile-circle img {
    width: 42px;
    height: 42px;
}

.jbe-home-v17__tile-circle--social i {
    font-size: 24px;
}

.jbe-home-v17__tile-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(22,36,51,.84);
}

.jbe-home-v17__tile-body {
    margin-top: 0;
    align-content: start;
}

.jbe-home-v17__tile-topline {
    color: #8aa1b8;
}

.jbe-home-v17__tile-body strong {
    font-size: 23px;
}

.jbe-home-v17__tile-body small {
    font-size: 12px;
    line-height: 1.45;
}

.jbe-home-v17__tile-accent {
    margin-top: -1px;
    font-size: 11px;
}

.jbe-home-v17__tile-footer {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.jbe-home-v17__tile-status {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: #94a6b9;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.jbe-home-v17__tile-status.is-linked {
    color: #7de0a2;
    border-color: rgba(104,214,145,.2);
    background: rgba(104,214,145,.08);
}

.jbe-home-v17__tile-status.is-pending {
    color: #f0c36c;
    border-color: rgba(240,195,108,.2);
    background: rgba(240,195,108,.08);
}

.jbe-home-v17__tile-link {
    color: #dbe9f5;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.jbe-home-v17__tile-link i {
    margin-left: 5px;
    font-size: 10px;
    color: #8fb6d6;
}

.jbe-home-v17__tile--news {
    background: radial-gradient(circle at 90% 12%, rgba(223,176,61,.16), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--forum {
    background: radial-gradient(circle at 90% 12%, rgba(105,138,201,.16), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--banlist {
    background: radial-gradient(circle at 90% 12%, rgba(180,73,88,.18), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--store {
    background: radial-gradient(circle at 90% 12%, rgba(217,161,64,.15), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--chat {
    background: radial-gradient(circle at 90% 12%, rgba(66,156,133,.17), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--profile {
    background: radial-gradient(circle at 90% 12%, rgba(88,116,202,.16), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--vk {
    background: radial-gradient(circle at 90% 12%, rgba(94,146,208,.18), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--telegram {
    background: radial-gradient(circle at 90% 12%, rgba(88,170,224,.18), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}
.jbe-home-v17__tile--discord {
    background: radial-gradient(circle at 90% 12%, rgba(111,122,232,.18), transparent 32%), linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}

@media (max-width: 980px) {
    .jbe-home-v17__tile,
    .jbe-home-v17__tile--featured {
        min-height: 188px;
    }
}

@media (max-width: 460px) {
    .jbe-home-v17__tile,
    .jbe-home-v17__tile--featured {
        min-height: 178px;
        padding: 13px;
    }

    .jbe-home-v17__tile-body strong {
        font-size: 21px;
    }

    .jbe-home-v17__tile-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   HOME V1.9 — FIX SQUARE ICONS
   ========================================================= */

/* Убираем ощущение квадратов внутри круглых витрин */
.jbe-home-v17__tile-circle {
    overflow: hidden;
}

.jbe-home-v17__tile-circle img {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: cover;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Соцсети тоже держим строго круглыми */
.jbe-home-v17__tile-circle--social {
    overflow: hidden;
}

.jbe-home-v17__tile-circle--social i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Верхний маленький индикатор делаем круглым, а не квадратным */
.jbe-home-v17__tile-badge {
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(15,24,34,.92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.jbe-home-v17__tile-badge .glyphicon,
.jbe-home-v17__tile-badge i {
    font-size: 13px;
}

/* Чуть мягче делаем фон и кольцо, чтобы круг читался лучше */
.jbe-home-v17__tile-circle {
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.08), rgba(10,15,22,.95)),
        rgba(10,15,22,.92);
    box-shadow:
        0 0 0 4px rgba(255,255,255,.035),
        inset 0 0 18px rgba(255,255,255,.03);
}

/* Для главной Steam-плитки сделаем круг ещё чище */
.jbe-home-v17__tile--steam .jbe-home-v17__tile-circle img {
    width: 42px;
    height: 42px;
}


/* =========================================================
   HOME V2.0 — UNIFY TILE ICONS LIKE VK
   ========================================================= */
.jbe-home-v17__tile-circle--icon {
    overflow: hidden;
}

.jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile-circle--icon .glyphicon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eef5fb;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
}

.jbe-home-v17__tile--steam .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--steam .jbe-home-v17__tile-badge i {
    color: #72c4ef;
}

.jbe-home-v17__tile--news .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--news .jbe-home-v17__tile-badge i {
    color: #ddb353;
}

.jbe-home-v17__tile--forum .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--forum .jbe-home-v17__tile-circle--icon .glyphicon,
.jbe-home-v17__tile--forum .jbe-home-v17__tile-badge i,
.jbe-home-v17__tile--forum .jbe-home-v17__tile-badge .glyphicon {
    color: #9eb6da;
}

.jbe-home-v17__tile--banlist .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--banlist .jbe-home-v17__tile-badge i {
    color: #d17382;
}

.jbe-home-v17__tile--store .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--store .jbe-home-v17__tile-badge i {
    color: #ddb15c;
}

.jbe-home-v17__tile--chat .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--chat .jbe-home-v17__tile-badge i {
    color: #7dcbb2;
}

.jbe-home-v17__tile--profile .jbe-home-v17__tile-circle--icon i,
.jbe-home-v17__tile--profile .jbe-home-v17__tile-badge i {
    color: #9aaff1;
}

.jbe-home-v17__tile--vk .jbe-home-v17__tile-circle--social i,
.jbe-home-v17__tile--vk .jbe-home-v17__tile-badge i {
    color: #8fbcff;
}

.jbe-home-v17__tile--telegram .jbe-home-v17__tile-circle--social i,
.jbe-home-v17__tile--telegram .jbe-home-v17__tile-badge i {
    color: #7fd4ff;
}

.jbe-home-v17__tile--discord .jbe-home-v17__tile-circle--social i,
.jbe-home-v17__tile--discord .jbe-home-v17__tile-badge i {
    color: #aeb2ff;
}


/* =========================================================
   HOME V2.1 — FEATURED STEAM TILE SPACING FIX
   ========================================================= */

/* Делаем главную плитку SteamID компактнее и убираем лишнюю пустоту */
.jbe-home-v17__tile--featured {
    min-height: 170px;
    grid-template-columns: 78px minmax(0,1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "media body"
        "footer footer";
    column-gap: 16px;
    row-gap: 10px;
    align-items: start;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-media {
    grid-area: media;
    display: block;
    margin: 0;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-circle {
    width: 72px;
    height: 72px;
    flex: none;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-circle i,
.jbe-home-v17__tile--featured .jbe-home-v17__tile-circle .glyphicon {
    width: 46px;
    height: 46px;
    font-size: 25px;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-badge {
    position: absolute;
    top: 14px;
    right: 14px;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-body {
    grid-area: body;
    margin-top: 0;
    padding-right: 36px;
    align-content: center;
    min-height: 72px;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-topline {
    margin-bottom: 2px;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-body strong {
    font-size: 22px;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-accent {
    margin-top: -2px;
    font-size: 11px;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-body small {
    max-width: none;
    line-height: 1.45;
}

.jbe-home-v17__tile--featured .jbe-home-v17__tile-footer {
    grid-area: footer;
    padding-top: 11px;
}

@media (max-width: 980px) {
    .jbe-home-v17__tile--featured {
        min-height: 164px;
    }
}

@media (max-width: 700px) {
    .jbe-home-v17__tile--featured {
        grid-template-columns: 70px minmax(0,1fr);
        min-height: 160px;
        column-gap: 14px;
    }

    .jbe-home-v17__tile--featured .jbe-home-v17__tile-circle {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 460px) {
    .jbe-home-v17__tile--featured {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "media"
            "body"
            "footer";
        min-height: 178px;
    }

    .jbe-home-v17__tile--featured .jbe-home-v17__tile-media {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .jbe-home-v17__tile--featured .jbe-home-v17__tile-body {
        padding-right: 0;
        min-height: 0;
    }
}


/* =========================================================
   HOME V2.2 — MONITOR REWORK
   ========================================================= */
.jbe-home-v17__monitor-wrap {
    padding: 18px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(14,20,29,.92), rgba(11,15,22,.92)),
        linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.jbe-home-v17__block-head {
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.jbe-home-v17__block-hint {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #a5b7c8;
    line-height: 1;
}

.jbe-server-grid {
    gap: 0;
}

.jbe-server-loading {
    min-height: 144px;
    border-style: solid;
    background: rgba(255,255,255,.02);
}

.jbe-server-card {
    min-height: 0;
    grid-template-columns: 128px 1fr;
    gap: 20px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background:
        radial-gradient(circle at 85% 10%, rgba(55,114,189,.10), transparent 28%),
        linear-gradient(145deg, rgba(19,27,38,.96), rgba(12,17,24,.98));
}

.jbe-server-card:hover {
    border-color: rgba(120,170,220,.28);
    background:
        radial-gradient(circle at 85% 10%, rgba(55,114,189,.14), transparent 30%),
        linear-gradient(145deg, rgba(22,30,43,.98), rgba(13,18,26,.98));
}

.jbe-server-card__visual {
    align-self: stretch;
}

.jbe-server-card__ring {
    width: 106px;
    height: 106px;
    padding: 5px;
    border: 1px solid rgba(240,170,30,.26);
    box-shadow: 0 0 0 4px rgba(240,170,30,.03);
}

.jbe-server-card__content {
    gap: 0;
}

.jbe-server-card__topline {
    align-items: center;
    margin-bottom: 8px;
}

.jbe-server-card__game,
.jbe-server-card__players {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
}

.jbe-server-card__game {
    color: #afbdd0;
}

.jbe-server-card__players {
    color: #9de3b5;
}

.jbe-server-card__content > strong {
    margin-bottom: 9px;
    font-size: 18px;
    line-height: 1.25;
    white-space: normal;
}

.jbe-server-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jbe-server-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: var(--jbe-muted);
    font-size: 11px;
}

.jbe-server-card__progress-wrap {
    margin-top: 12px;
}

.jbe-server-card__progress-text {
    display: inline-block;
    margin-bottom: 7px;
    color: #8397aa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.jbe-server-card__progress {
    height: 6px;
    margin-top: 0;
    background: rgba(255,255,255,.06);
}

.jbe-server-card__progress > span {
    background: linear-gradient(90deg, #1f90c8, #67d0ff);
}

.jbe-server-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.jbe-server-card__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(96,212,142,.17);
    border-radius: 999px;
    background: rgba(96,212,142,.08);
    color: #9de3b5;
    font-size: 10px;
    font-weight: 800;
}

.jbe-server-card__status .fa-circle {
    font-size: 8px;
}

.jbe-server-card__connect {
    margin-top: 0;
    color: #ffd274;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 760px) {
    .jbe-server-card {
        grid-template-columns: 92px 1fr;
        gap: 14px;
        padding: 15px;
    }

    .jbe-server-card__ring {
        width: 82px;
        height: 82px;
    }

    .jbe-server-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .jbe-server-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .jbe-server-card__visual {
        justify-content: start;
    }

    .jbe-server-card__topline {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* =========================================================
   HOME V2.3 — CLEAN MAIN PAGE
   ========================================================= */
.jbe-home-clean__hero {
    margin-bottom: 14px;
    padding: 2px 2px 0;
}

.jbe-home-clean__hero h1 {
    margin: 5px 0 6px;
    color: var(--jbe-text);
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1;
    letter-spacing: -.04em;
}

.jbe-home-clean__hero p {
    margin: 0;
    color: var(--jbe-muted);
    font-size: 12px;
}

.jbe-home-clean__layout {
    display: grid;
    grid-template-columns: 170px minmax(0,1fr);
    gap: 14px;
    align-items: start;
}

.jbe-home-clean__sidebar {
    position: sticky;
    top: 84px;
    padding: 12px;
    border: 1px solid var(--jbe-border);
    border-radius: 13px;
    background: rgba(16,22,31,.76);
}

.jbe-home-clean__filter-title {
    margin-bottom: 9px;
    color: #8497aa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.jbe-home-clean__filters {
    display: grid;
    gap: 6px;
}

.jbe-home-clean__filters .jbe-home-v17__filter {
    min-height: 38px;
    padding: 0 11px;
    border-radius: 8px;
    border-left-width: 1px;
    font-size: 11px;
}

.jbe-home-clean__filters .jbe-home-v17__filter.is-active,
.jbe-home-clean__filters .jbe-home-v17__filter:hover {
    border-color: rgba(109,124,255,.36);
    background: rgba(109,124,255,.11);
}

.jbe-home-clean__content {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.jbe-home-clean__monitor {
    padding: 15px;
}

.jbe-home-clean__monitor .jbe-home-v17__block-head {
    margin-bottom: 11px;
    padding-bottom: 10px;
}

.jbe-home-clean__monitor .jbe-home-v17__block-head h2 {
    font-size: 22px;
}

/* Мониторинг всегда виден и больше не участвует в фильтрации. */
.jbe-home-clean__monitor[data-home-cat] {
    display: block !important;
}

/* SteamID — главный баннер на всю ширину. */
.jbe-home-clean .jbe-home-v17__tile--featured {
    grid-column: 1 / -1 !important;
}

/* Социальные привязки компактнее основных разделов. */
.jbe-home-clean .jbe-home-v17__tile--vk,
.jbe-home-clean .jbe-home-v17__tile--telegram,
.jbe-home-clean .jbe-home-v17__tile--discord {
    min-height: 158px;
}

.jbe-home-clean .jbe-home-v17__tile--vk .jbe-home-v17__tile-circle,
.jbe-home-clean .jbe-home-v17__tile--telegram .jbe-home-v17__tile-circle,
.jbe-home-clean .jbe-home-v17__tile--discord .jbe-home-v17__tile-circle {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
}

.jbe-home-clean .jbe-home-v17__tile--vk .jbe-home-v17__tile-circle i,
.jbe-home-clean .jbe-home-v17__tile--telegram .jbe-home-v17__tile-circle i,
.jbe-home-clean .jbe-home-v17__tile--discord .jbe-home-v17__tile-circle i {
    width: 36px;
    height: 36px;
    font-size: 21px;
}

.jbe-home-clean .jbe-home-v17__tile--vk .jbe-home-v17__tile-body strong,
.jbe-home-clean .jbe-home-v17__tile--telegram .jbe-home-v17__tile-body strong,
.jbe-home-clean .jbe-home-v17__tile--discord .jbe-home-v17__tile-body strong {
    font-size: 21px;
}

/* Убираем старые дублирующие элементы, если браузер держит старую разметку в кеше. */
.jbe-home-clean .jbe-home-v17__chips,
.jbe-home-clean .jbe-home-v17__hero-tools,
.jbe-home-clean .jbe-home-v17__quick-links,
.jbe-home-clean .jbe-home-v17__notes {
    display: none !important;
}

@media (max-width: 920px) {
    .jbe-home-clean__layout {
        grid-template-columns: 1fr;
    }

    .jbe-home-clean__sidebar {
        position: static;
        padding: 9px;
    }

    .jbe-home-clean__filter-title {
        display: none;
    }

    .jbe-home-clean__filters {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .jbe-home-clean__filters .jbe-home-v17__filter {
        text-align: center;
    }
}

@media (max-width: 560px) {
    .jbe-home-clean__filters {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   HEADER V2.4 — PROFILE + BALANCE
   ========================================================= */
.jbe-topbar__inner {
    gap: 12px;
}

.jbe-topbar__actions {
    margin-left: auto;
    flex-wrap: nowrap;
    gap: 7px !important;
}

.jbe-header-link {
    min-height: 40px;
    padding-left: 8px;
    padding-right: 8px;
}

.jbe-user-chip--header {
    flex: 0 0 auto;
    gap: 6px;
    padding-left: 2px;
    white-space: nowrap;
}

.jbe-user-chip--header .jbe-user-chip__profile {
    min-height: 44px;
    padding: 4px 8px 4px 4px;
    border-radius: 11px;
}

.jbe-user-chip--header .jbe-user-chip__profile img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
}

.jbe-user-chip--header .jbe-user-chip__profile b {
    max-width: 115px;
}

.jbe-balance-chip {
    min-width: 82px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--jbe-border);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: var(--jbe-text) !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease;
}

.jbe-balance-chip:hover {
    border-color: rgba(240,170,30,.32);
    background: rgba(240,170,30,.055);
}

.jbe-balance-chip__icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(240,170,30,.09);
    color: #efb649;
    font-size: 11px;
}

.jbe-balance-chip strong {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: #f2f5f8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.jbe-balance-chip strong font {
    font: inherit;
    color: inherit;
}

.jbe-balance-chip strong em {
    color: #9caaba;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.jbe-user-chip--header .jbe-user-chip__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
}

/* Чуть освобождаем место в шапке на средних десктопах. */
@media (max-width: 1180px) {
    .jbe-brand__name {
        display: none;
    }

    .jbe-topbar__inner {
        gap: 8px;
    }

    .jbe-header-link {
        gap: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile b {
        max-width: 90px;
    }
}

@media (max-width: 991px) {
    .jbe-balance-chip {
        min-width: 67px;
        padding: 0 8px;
    }

    .jbe-balance-chip__icon {
        display: none;
    }
}

@media (max-width: 700px) {
    .jbe-balance-chip {
        min-width: 58px;
        height: 38px;
        padding: 0 7px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile {
        min-height: 38px;
        padding: 2px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile img {
        width: 32px;
        height: 32px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile span {
        display: none;
    }

    .jbe-user-chip--header .jbe-user-chip__icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

@media (max-width: 520px) {
    .jbe-balance-chip {
        min-width: 54px;
        height: 34px;
        border-radius: 9px;
    }

    .jbe-balance-chip strong {
        font-size: 10px;
    }

    .jbe-balance-chip strong em {
        font-size: 9px;
    }
}


/* =========================================================
   V2.5 — HEADER BALANCE + STEAM ICON FIX
   ========================================================= */

/* Balance: no blank square, clear wallet/card icon */
.jbe-balance-chip {
    min-width: 92px;
    gap: 8px;
    padding: 0 10px 0 7px;
}

.jbe-balance-chip__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: linear-gradient(145deg, #348cff, #2474de);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 6px 16px rgba(47,132,242,.20);
}

.jbe-balance-chip__icon .glyphicon {
    top: 0;
    line-height: 1;
}

.jbe-balance-chip strong {
    gap: 3px;
    font-size: 13px;
}

.jbe-balance-chip strong em {
    color: #d9e3ed;
    font-size: 11px;
}

/* Steam tile: one clean centered icon, without second duplicate badge */
.jbe-home-v17__tile-circle--steam {
    overflow: visible;
    background:
        radial-gradient(circle at 35% 28%, rgba(42,145,203,.30), rgba(13,35,50,.92) 58%, rgba(8,14,20,.98));
    border-color: rgba(208,230,244,.90);
    box-shadow:
        0 0 0 5px rgba(54,145,197,.08),
        inset 0 0 24px rgba(59,164,220,.12);
}

.jbe-home-v17__tile-circle--steam i.fa-steam {
    width: auto !important;
    height: auto !important;
    display: block !important;
    color: #eef8ff !important;
    font-size: 29px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    text-shadow: 0 3px 10px rgba(51,157,215,.28);
}

/* Featured Steam no longer has a small duplicate icon in the top-right corner. */
.jbe-home-v17__tile--steam .jbe-home-v17__tile-media {
    position: relative;
}

@media (max-width: 900px) {
    .jbe-balance-chip {
        min-width: 82px;
    }
}


/* =========================================================
   V2.6 — HEADER REWORK + BANNER CAROUSEL
   ========================================================= */

.jbe-topbar--v26 {
    min-height: 72px;
    background: rgba(8,12,17,.96);
    border-bottom: 1px solid rgba(104,127,151,.18);
}

.jbe-topbar__inner--v26 {
    min-height: 72px;
    gap: 18px;
}

.jbe-brand--v26 {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 1 auto;
}

.jbe-brand__badge--v26 {
    width: 44px;
    height: 34px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #f0aa1e, #d48a12);
    color: #16110a;
    box-shadow: 0 8px 24px rgba(240,170,30,.13);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.jbe-brand__copy {
    min-width: 0;
    display: grid;
    line-height: 1.12;
}

.jbe-brand__copy b {
    max-width: 250px;
    overflow: hidden;
    color: #f1f5f8;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbe-brand__copy small {
    margin-top: 3px;
    color: #6f8194;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.jbe-topbar__actions--v26 {
    min-width: 0;
    margin-left: auto;
}

.jbe-user-chip--v26 {
    min-width: 0;
}

.jbe-user-chip--v26 .jbe-user-chip__profile {
    border: 1px solid rgba(115,140,165,.18);
    background: rgba(255,255,255,.025);
}

.jbe-user-chip--v26 .jbe-user-chip__profile:hover {
    border-color: rgba(120,168,215,.30);
    background: rgba(255,255,255,.04);
}

.jbe-balance-chip--v26 {
    min-width: 184px;
    height: 44px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 6px 0 7px;
    border-color: rgba(115,140,165,.18);
    background: rgba(255,255,255,.025);
}

.jbe-balance-chip--v26 strong {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.jbe-balance-chip__refill {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    color: #eef4fa;
    font-size: 9px;
    font-weight: 900;
    transition: background .15s ease;
}

.jbe-balance-chip--v26:hover .jbe-balance-chip__refill {
    background: rgba(52,140,255,.15);
}

/* Banner carousel */
.jbe-banner-shell {
    min-width: 0;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid rgba(112,137,164,.18);
    border-radius: 16px;
    background: #0c1118;
    box-shadow: 0 16px 38px rgba(0,0,0,.14);
}

.jbe-banner-carousel,
.jbe-banner-carousel .carousel-inner,
.jbe-banner-carousel .carousel-item {
    min-height: 205px;
}

.jbe-banner-slide {
    position: relative;
    min-height: 205px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

.jbe-banner-slide__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7,11,16,.94) 0%, rgba(7,11,16,.76) 45%, rgba(7,11,16,.25) 78%, rgba(7,11,16,.12) 100%),
        linear-gradient(0deg, rgba(7,11,16,.74), transparent 60%);
}

.jbe-banner-slide__content {
    position: relative;
    z-index: 2;
    width: min(660px, 82%);
    padding: 24px 68px 25px 24px;
}

.jbe-banner-slide__kicker {
    color: #78a9ce;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .14em;
}

.jbe-banner-slide__content h2 {
    margin: 5px 0 7px;
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.jbe-banner-slide__text {
    max-height: 43px;
    overflow: hidden;
    color: #b4c0cc;
    font-size: 11px;
    line-height: 1.55;
}

.jbe-banner-slide__text p {
    margin: 0;
}

.jbe-banner-slide__button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 0 12px;
    border: 1px solid rgba(240,170,30,.28);
    border-radius: 9px;
    background: rgba(240,170,30,.10);
    color: #ffd274 !important;
    font-size: 9px;
    font-weight: 900;
}

.jbe-banner-slide__button:hover {
    background: rgba(240,170,30,.16);
}

.jbe-banner-indicators {
    right: auto;
    bottom: 12px;
    left: 24px;
    width: auto;
    margin: 0;
    justify-content: flex-start;
}

.jbe-banner-indicators li {
    width: 16px;
    height: 3px;
    margin: 0 4px 0 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
}

.jbe-banner-indicators li.active {
    background: #f0aa1e;
}

.jbe-banner-arrow {
    top: 50%;
    bottom: auto;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
    background: rgba(8,13,19,.72);
    color: #dce9f5;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.jbe-banner-arrow--prev { left: 12px; }
.jbe-banner-arrow--next { right: 12px; }

.jbe-banner-carousel:hover .jbe-banner-arrow {
    opacity: 1;
}

.jbe-banner-arrow:hover {
    background: rgba(21,32,44,.94);
    color: #fff;
}

@media (max-width: 1180px) {
    .jbe-brand__copy small { display: none; }
    .jbe-brand__copy b { max-width: 160px; }
    .jbe-balance-chip--v26 { min-width: 145px; }
    .jbe-balance-chip__refill { display: none; }
}

@media (max-width: 900px) {
    .jbe-brand__copy { display: none; }
    .jbe-balance-chip--v26 { min-width: 82px; }
}

@media (max-width: 700px) {
    .jbe-topbar__inner--v26 { min-height: 62px; }
    .jbe-header-link { display: none; }
    .jbe-brand__badge--v26 { width: 40px; height: 32px; flex-basis: 40px; }
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide { min-height: 175px; }
    .jbe-banner-slide__content { width: 90%; padding: 20px 48px 22px 18px; }
}

@media (max-width: 520px) {
    .jbe-balance-chip--v26 { min-width: 58px; padding: 0 7px; }
    .jbe-balance-chip--v26 .jbe-balance-chip__icon { display: none; }
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide { min-height: 155px; }
    .jbe-banner-slide__content { width: 100%; padding: 16px 18px 21px; }
    .jbe-banner-slide__text { display: none; }
    .jbe-banner-arrow { display: none; }
}


/* =========================================================
   V2.7 — BANNER HEIGHT FIX
   ========================================================= */
.jbe-banner-carousel,
.jbe-banner-carousel .carousel-inner,
.jbe-banner-carousel .carousel-item,
.jbe-banner-slide {
    min-height: 168px;
}

.jbe-banner-slide {
    align-items: stretch;
    background-position: center center;
}

.jbe-banner-slide__shade {
    background:
        linear-gradient(90deg, rgba(7,11,16,.95) 0%, rgba(7,11,16,.82) 42%, rgba(7,11,16,.32) 76%, rgba(7,11,16,.14) 100%),
        linear-gradient(0deg, rgba(7,11,16,.82), transparent 58%);
}

.jbe-banner-slide__content {
    width: min(620px, 78%);
    padding: 18px 62px 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jbe-banner-slide__content h2 {
    margin: 4px 0 6px;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.08;
}

.jbe-banner-slide__text {
    max-height: 36px;
    font-size: 10px;
    line-height: 1.5;
}

.jbe-banner-slide__button {
    min-height: 30px;
    margin-top: 10px;
}

.jbe-banner-indicators {
    bottom: 10px;
}

@media (max-width: 700px) {
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 152px;
    }

    .jbe-banner-slide__content {
        width: 92%;
        padding: 16px 46px 17px 18px;
    }

    .jbe-banner-slide__content h2 {
        font-size: 21px;
    }
}

@media (max-width: 520px) {
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 138px;
    }

    .jbe-banner-slide__content {
        padding: 14px 18px 18px;
    }

    .jbe-banner-slide__content h2 {
        font-size: 18px;
    }

    .jbe-banner-slide__button {
        min-height: 28px;
        padding: 0 10px;
        font-size: 8px;
    }
}


/* =========================================================
   V2.8 — BANNER HEIGHT UP
   ========================================================= */
.jbe-banner-carousel,
.jbe-banner-carousel .carousel-inner,
.jbe-banner-carousel .carousel-item,
.jbe-banner-slide {
    min-height: 190px;
}

.jbe-banner-slide__content {
    width: min(640px, 80%);
    padding: 22px 64px 22px 24px;
}

.jbe-banner-slide__content h2 {
    margin: 5px 0 7px;
    font-size: clamp(22px, 2.7vw, 31px);
}

.jbe-banner-slide__text {
    max-height: 42px;
    font-size: 11px;
}

.jbe-banner-slide__button {
    min-height: 31px;
    margin-top: 11px;
}

@media (max-width: 700px) {
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 168px;
    }

    .jbe-banner-slide__content {
        width: 92%;
        padding: 18px 48px 19px 18px;
    }

    .jbe-banner-slide__content h2 {
        font-size: 22px;
    }
}

@media (max-width: 520px) {
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 148px;
    }

    .jbe-banner-slide__content {
        padding: 15px 18px 18px;
    }

    .jbe-banner-slide__content h2 {
        font-size: 19px;
    }
}


/* =========================================================
   V3.0 — COLOR STYLES (RED / YELLOW / GREEN)
   Usage:
   ?jbe_color=red
   ?jbe_color=yellow
   ?jbe_color=green
   ?jbe_color=blue   (reset to default)
   ========================================================= */

html[data-jbe-color="red"] {
    --jbe-accent: #d9544f;
    --jbe-accent-2: #ffb36a;
    --jbe-blue: #cf5a70;
    --jbe-green: #77d89a;
    --jbe-danger: #f06f77;
    --jbe-style-main: 217,84,79;
    --jbe-style-second: 255,179,106;
}

html[data-jbe-color="yellow"] {
    --jbe-accent: #d9a823;
    --jbe-accent-2: #ffd85e;
    --jbe-blue: #d1a33b;
    --jbe-green: #b5d865;
    --jbe-danger: #ef8b67;
    --jbe-style-main: 217,168,35;
    --jbe-style-second: 255,216,94;
}

html[data-jbe-color="green"] {
    --jbe-accent: #34b56f;
    --jbe-accent-2: #8fe48f;
    --jbe-blue: #31a77a;
    --jbe-green: #8fe48f;
    --jbe-danger: #f08173;
    --jbe-style-main: 52,181,111;
    --jbe-style-second: 143,228,143;
}

html[data-jbe-color] body {
    background-image:
        radial-gradient(circle at 10% 0%, rgba(var(--jbe-style-main), .12), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(var(--jbe-style-second), .08), transparent 30%) !important;
}

html[data-jbe-color] .wapper.jbe-wapper > .jbe-content,
html[data-jbe-color] .jbe-content {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--jbe-style-main), .12), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(var(--jbe-style-second), .08), transparent 30%),
        #0a0d12 !important;
}

html[data-jbe-color] .jbe-topbar__brand-badge,
html[data-jbe-color] .jbe-balance-chip__icon {
    background: linear-gradient(135deg, rgba(var(--jbe-style-main), .96), rgba(var(--jbe-style-second), .96)) !important;
    box-shadow: 0 10px 24px rgba(var(--jbe-style-main), .18) !important;
}

html[data-jbe-color] .jbe-header-link:hover,
html[data-jbe-color] .jbe-user-chip__icon:hover,
html[data-jbe-color] .jbe-home-v17__quick-links a:hover {
    border-color: rgba(var(--jbe-style-main), .28) !important;
    color: var(--jbe-text) !important;
    box-shadow: 0 8px 22px rgba(var(--jbe-style-main), .08);
}

html[data-jbe-color] .jbe-home-v17__filter:hover,
html[data-jbe-color] .jbe-home-v17__filter.is-active {
    border-left-color: var(--jbe-accent);
    background: rgba(var(--jbe-style-main), .11);
}

html[data-jbe-color] .jbe-home-v17__chip:hover,
html[data-jbe-color] .jbe-home-v17__chip.is-active {
    border-color: rgba(var(--jbe-style-main), .42);
    background: var(--jbe-accent);
}

html[data-jbe-color] .jbe-home-v17__monitor-wrap,
html[data-jbe-color] .jbe-banner-carousel {
    box-shadow: 0 18px 48px rgba(var(--jbe-style-main), .05);
}

html[data-jbe-color] .jbe-home-v17__tile--featured {
    background:
        radial-gradient(circle at 76% 20%, rgba(var(--jbe-style-main), .22), transparent 34%),
        linear-gradient(180deg, rgba(17,24,34,.97), rgba(10,14,20,.98));
}

html[data-jbe-color] .jbe-home-v17__tile-circle,
html[data-jbe-color] .jbe-server-card__ring {
    box-shadow:
        0 0 0 4px rgba(var(--jbe-style-main), .05),
        inset 0 0 18px rgba(255,255,255,.03);
}

html[data-jbe-color] .jbe-home-v17__tile-badge,
html[data-jbe-color] .jbe-home-v17__block-hint,
html[data-jbe-color] .jbe-server-card__game,
html[data-jbe-color] .jbe-server-card__meta,
html[data-jbe-color] .jbe-server-card__players {
    border-color: rgba(var(--jbe-style-main), .14) !important;
}

html[data-jbe-color] .jbe-server-card {
    background:
        radial-gradient(circle at 85% 10%, rgba(var(--jbe-style-main), .14), transparent 28%),
        linear-gradient(145deg, rgba(19,27,38,.96), rgba(12,17,24,.98));
}

html[data-jbe-color] .jbe-server-card:hover {
    border-color: rgba(var(--jbe-style-main), .28);
    background:
        radial-gradient(circle at 85% 10%, rgba(var(--jbe-style-main), .17), transparent 30%),
        linear-gradient(145deg, rgba(22,30,43,.98), rgba(13,18,26,.98));
}

html[data-jbe-color] .jbe-server-card__progress > span,
html[data-jbe-color] .jbe-banner-slide__button,
html[data-jbe-color] .jbe-home-v17__tile-status.is-linked,
html[data-jbe-color] .jbe-steam-hub::before {
    background: linear-gradient(90deg, var(--jbe-accent), var(--jbe-accent-2)) !important;
}

html[data-jbe-color] .jbe-banner-slide__button {
    border-color: rgba(var(--jbe-style-main), .35) !important;
    color: #fff !important;
}

html[data-jbe-color] .jbe-home-v17__tile-status.is-linked,
html[data-jbe-color] .jbe-server-card__status {
    border-color: rgba(var(--jbe-style-main), .22) !important;
    background: rgba(var(--jbe-style-main), .12) !important;
    color: #dffbe8 !important;
}

html[data-jbe-color] .jbe-home-v17__tile-status.is-pending {
    border-color: rgba(var(--jbe-style-second), .22) !important;
    background: rgba(var(--jbe-style-second), .10) !important;
    color: #ffe9b8 !important;
}

html[data-jbe-color] .jbe-home-v17__tile-link,
html[data-jbe-color] .jbe-server-card__connect,
html[data-jbe-color] .jbe-banner-slide__content .jbe-home-v17__eyebrow,
html[data-jbe-color] .jbe-arcade-kicker,
html[data-jbe-color] .jbe-steam-hub__kicker,
html[data-jbe-color] .jbe-home-v17__tile-accent {
    color: var(--jbe-accent-2) !important;
}

html[data-jbe-color] .jbe-home-v17__tile-link i,
html[data-jbe-color] .jbe-server-card__connect i,
html[data-jbe-color] .jbe-topbar__brand-meta strong,
html[data-jbe-color] .jbe-home-v17__state .fa-circle {
    color: var(--jbe-accent) !important;
}

html[data-jbe-color] .jbe-banner-indicators li.active {
    background: var(--jbe-accent) !important;
}

html[data-jbe-color] .btn-primary,
html[data-jbe-color] .btn.btn-primary,
html[data-jbe-color] .btn-outline-primary:hover,
html[data-jbe-color] .btn-primary:focus,
html[data-jbe-color] .btn.btn-primary:focus {
    background: linear-gradient(135deg, var(--jbe-accent), var(--jbe-accent-2)) !important;
    border-color: rgba(var(--jbe-style-main), .4) !important;
    color: #fff !important;
}

html[data-jbe-color] .btn-outline-primary,
html[data-jbe-color] .btn.btn-outline-primary {
    border-color: rgba(var(--jbe-style-main), .34) !important;
    color: var(--jbe-accent-2) !important;
}


/* =========================================================
   MOBILE ADAPTATION v3.1
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.jbe-page-row,
.jbe-page-row > [class*="col-"],
.jbe-home-v17,
.jbe-home-clean,
.jbe-settings-page,
.jbe-profile-v2 {
    min-width: 0;
}

@media (max-width: 900px) {
    /* Base containers */
    .jbe-topbar .container,
    .jbe-page-container,
    .jbe-footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .jbe-page-container {
        padding-top: 22px !important;
        padding-bottom: 54px !important;
    }

    .jbe-page-row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .jbe-page-row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Header */
    .jbe-topbar__inner,
    .jbe-topbar__inner--v26 {
        min-height: 64px;
        gap: 8px;
    }

    .jbe-brand__copy small {
        display: none !important;
    }

    .jbe-brand__copy b {
        max-width: 150px;
    }

    .jbe-topbar__actions,
    .jbe-topbar__actions--v26 {
        gap: 5px !important;
    }

    .jbe-header-link {
        min-height: 38px;
        padding: 0 8px;
    }

    .jbe-header-link span:last-child {
        display: none;
    }

    .jbe-user-chip--header,
    .jbe-user-chip--v26 {
        gap: 5px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile b {
        max-width: 90px;
    }

    .jbe-balance-chip--v26 {
        min-width: 92px;
    }

    .jbe-balance-chip__refill {
        display: none !important;
    }

    /* Main home */
    .jbe-home-clean__hero {
        margin-bottom: 16px;
    }

    .jbe-home-clean__hero h1 {
        font-size: 34px;
    }

    .jbe-home-clean__layout {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .jbe-home-clean__sidebar {
        position: static !important;
        padding: 8px !important;
    }

    .jbe-home-clean__filter-title {
        display: none !important;
    }

    .jbe-home-clean__filters {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 7px !important;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .jbe-home-clean__filters::-webkit-scrollbar {
        display: none;
    }

    .jbe-home-clean__filters .jbe-home-v17__filter {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 14px;
        text-align: center;
        white-space: nowrap;
    }

    .jbe-home-v17__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .jbe-home-v17__tile--featured {
        grid-column: 1 / -1 !important;
    }

    /* Banner */
    .jbe-banner-shell {
        border-radius: 14px;
    }

    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 174px !important;
    }

    .jbe-banner-slide {
        background-position: center center;
        touch-action: pan-y;
    }

    .jbe-banner-slide__content {
        width: min(620px, 88%) !important;
        padding: 19px 48px 22px 20px !important;
    }

    .jbe-banner-slide__content h2 {
        font-size: clamp(21px, 5vw, 28px) !important;
    }

    .jbe-banner-slide__text {
        max-height: 40px;
    }

    /* Monitoring */
    .jbe-home-v17__monitor-wrap {
        padding: 14px !important;
    }

    .jbe-home-v17__block-head h2 {
        font-size: 21px !important;
    }

    .jbe-server-card {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    .jbe-server-card__ring {
        width: 86px !important;
        height: 86px !important;
    }

    .jbe-server-card__content > strong {
        font-size: 16px !important;
    }

    /* Settings */
    .jbe-settings-page {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .jbe-steam-hub {
        padding: 20px !important;
        margin-bottom: 18px;
    }

    .jbe-steam-hub__head {
        gap: 14px;
    }

    .jbe-steam-hub__grid {
        grid-template-columns: 1fr !important;
    }

    .jbe-steam-hub__actions {
        grid-template-columns: 1fr !important;
    }

    .jbe-steam-hub__buttons {
        flex-wrap: wrap;
    }

    /* Profile */
    .jbe-profile-hero {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .jbe-profile-hero__side {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    .jbe-profile-layout {
        grid-template-columns: 1fr !important;
    }

    .jbe-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Stock/legacy pages */
    .jbe-page-row > .col-lg-3,
    .jbe-page-row > .col-lg-4,
    .jbe-page-row > .col-lg-5,
    .jbe-page-row > .col-lg-6,
    .jbe-page-row > .col-lg-7,
    .jbe-page-row > .col-lg-8,
    .jbe-page-row > .col-lg-9,
    .jbe-page-row > .col-lg-10,
    .jbe-page-row > .col-lg-11,
    .jbe-page-row > .col-lg-12 {
        max-width: 100%;
    }

    .jbe-page-row .order-is-first {
        order: 1;
    }

    .jbe-page-row .order-is-last {
        order: 2;
    }

    .jbe-page-row .block {
        margin-bottom: 12px;
    }

    .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 28px) !important;
        margin: 14px auto !important;
    }

    .modal-dialog.modal-lg {
        max-width: calc(100vw - 20px) !important;
    }

    .jbe-footer__inner {
        min-height: 64px;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    /* Header: compact one-line control bar */
    .jbe-topbar .container,
    .jbe-page-container,
    .jbe-footer .container {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .jbe-topbar__inner,
    .jbe-topbar__inner--v26 {
        min-height: 58px !important;
        padding-top: 7px;
        padding-bottom: 7px;
        gap: 5px !important;
    }

    .jbe-brand--v26 {
        flex: 0 0 auto;
    }

    .jbe-brand__badge--v26 {
        width: 38px !important;
        height: 34px !important;
        flex-basis: 38px !important;
        font-size: 10px;
    }

    .jbe-brand__copy {
        display: none !important;
    }

    .jbe-header-link {
        display: none !important;
    }

    .jbe-login-btn {
        min-height: 40px !important;
        padding: 0 12px !important;
        white-space: nowrap;
    }

    .jbe-topbar__actions,
    .jbe-topbar__actions--v26 {
        min-width: 0;
        margin-left: auto;
    }

    .jbe-user-chip--header,
    .jbe-user-chip--v26 {
        min-width: 0;
        gap: 4px !important;
        padding-left: 0 !important;
    }

    .jbe-user-chip--header .jbe-user-chip__profile,
    .jbe-user-chip--v26 .jbe-user-chip__profile {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px !important;
        padding: 3px !important;
        justify-content: center;
        border-radius: 10px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile img,
    .jbe-user-chip--v26 .jbe-user-chip__profile img {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
        border-radius: 8px;
    }

    .jbe-user-chip--header .jbe-user-chip__profile span,
    .jbe-user-chip--v26 .jbe-user-chip__profile span {
        display: none !important;
    }

    .jbe-balance-chip,
    .jbe-balance-chip--v26 {
        min-width: 76px !important;
        width: auto !important;
        height: 40px !important;
        gap: 5px !important;
        padding: 0 7px !important;
        border-radius: 10px !important;
    }

    .jbe-balance-chip__icon {
        width: 27px !important;
        height: 27px !important;
        flex: 0 0 27px;
        border-radius: 8px !important;
    }

    .jbe-balance-chip strong {
        font-size: 11px !important;
    }

    .jbe-balance-chip strong em {
        font-size: 9px !important;
    }

    .jbe-user-chip__icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    /* Home heading */
    .jbe-page-container {
        padding-top: 17px !important;
        padding-bottom: 42px !important;
    }

    .jbe-home-clean__hero h1 {
        font-size: 30px !important;
    }

    .jbe-home-clean__hero p {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.5;
    }

    /* Tiles: phone-friendly horizontal cards */
    .jbe-home-v17__grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .jbe-home-v17__tile,
    .jbe-home-v17__tile--featured {
        min-height: 0 !important;
        grid-column: auto !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "media body"
            "footer footer" !important;
        column-gap: 13px !important;
        row-gap: 8px !important;
        padding: 13px !important;
        align-items: center !important;
    }

    .jbe-home-v17__tile-media,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-media {
        grid-area: media !important;
        display: flex !important;
        margin: 0 !important;
        align-items: center;
    }

    .jbe-home-v17__tile-circle,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-circle {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,.035) !important;
    }

    .jbe-home-v17__tile-circle--icon i,
    .jbe-home-v17__tile-circle--icon .glyphicon,
    .jbe-home-v17__tile-circle--social i,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-circle i {
        width: 38px !important;
        height: 38px !important;
        font-size: 21px !important;
    }

    .jbe-home-v17__tile-badge,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-badge {
        display: none !important;
    }

    .jbe-home-v17__tile-body,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-body {
        grid-area: body !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-content: center !important;
    }

    .jbe-home-v17__tile-body strong,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-body strong {
        font-size: 20px !important;
    }

    .jbe-home-v17__tile-body small {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .jbe-home-v17__tile-accent {
        font-size: 10px !important;
    }

    .jbe-home-v17__tile-footer,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-footer {
        grid-area: footer !important;
        min-width: 0;
        padding-top: 9px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .jbe-home-v17__tile-status {
        max-width: 56%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jbe-home-v17__tile-link {
        margin-left: auto;
    }

    /* Banner */
    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 160px !important;
    }

    .jbe-banner-slide__content {
        width: 92% !important;
        padding: 17px 42px 22px 17px !important;
    }

    .jbe-banner-slide__content h2 {
        font-size: 21px !important;
        line-height: 1.08 !important;
    }

    .jbe-banner-slide__text {
        max-height: 34px !important;
        font-size: 10px !important;
    }

    .jbe-banner-slide__button {
        margin-top: 8px !important;
    }

    .jbe-banner-arrow {
        display: none !important;
    }

    .jbe-banner-indicators {
        left: 17px !important;
        bottom: 9px !important;
    }

    /* Monitoring */
    .jbe-home-v17__monitor-wrap {
        padding: 12px !important;
    }

    .jbe-home-v17__block-head {
        margin-bottom: 10px !important;
        padding-bottom: 9px !important;
    }

    .jbe-home-v17__block-head h2 {
        font-size: 19px !important;
    }

    .jbe-server-card {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 11px !important;
        padding: 12px !important;
        text-align: left !important;
    }

    .jbe-server-card__ring {
        width: 66px !important;
        height: 66px !important;
        padding: 4px !important;
    }

    .jbe-server-card__online {
        width: 20px;
        height: 20px;
        border-width: 3px;
        right: 0;
        bottom: 4px;
    }

    .jbe-server-card__topline {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 5px !important;
        margin-bottom: 6px !important;
    }

    .jbe-server-card__game,
    .jbe-server-card__players {
        min-height: 22px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .jbe-server-card__content > strong {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .jbe-server-card__meta-row {
        gap: 5px !important;
    }

    .jbe-server-card__meta {
        min-height: 23px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .jbe-server-card__progress-text {
        display: none !important;
    }

    .jbe-server-card__progress-wrap {
        margin-top: 8px !important;
    }

    .jbe-server-card__footer {
        grid-column: 1 / -1;
        margin-top: 9px !important;
        padding-top: 9px !important;
    }

    .jbe-server-card__status {
        min-height: 25px !important;
        padding: 0 8px !important;
        font-size: 9px !important;
    }

    .jbe-server-card__connect {
        font-size: 10px !important;
    }

    /* Steam/settings */
    .jbe-steam-hub {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    .jbe-steam-hub__head {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    .jbe-steam-hub__title {
        gap: 11px !important;
    }

    .jbe-steam-hub__logo {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
        font-size: 21px !important;
        border-radius: 12px !important;
    }

    .jbe-steam-hub__title h2 {
        font-size: 25px !important;
    }

    .jbe-steam-hub__title p {
        font-size: 10px !important;
        line-height: 1.45;
    }

    .jbe-steam-hub__status {
        width: fit-content;
        max-width: 100%;
    }

    .jbe-steam-hub__idbox,
    .jbe-steam-hub__profilebox {
        min-height: 0 !important;
        padding: 13px !important;
    }

    .jbe-steam-hub__idbox > strong {
        font-size: 17px !important;
    }

    .jbe-steam-hub__buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .jbe-steam-hub__buttons .btn {
        width: 100%;
    }

    /* Profile */
    .jbe-profile-hero {
        grid-template-columns: 1fr !important;
        text-align: center;
        padding: 16px !important;
        border-radius: 15px !important;
    }

    .jbe-profile-hero__avatar {
        width: 94px !important;
        height: 94px !important;
        margin: 0 auto;
    }

    .jbe-profile-hero__labels,
    .jbe-profile-hero__presence,
    .jbe-profile-hero__meta {
        justify-content: center !important;
    }

    .jbe-profile-hero__main h1 {
        font-size: 32px !important;
    }

    .jbe-profile-hero__side {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .jbe-profile-wallet {
        grid-template-columns: 1fr 1fr !important;
    }

    .jbe-profile-actions {
        justify-content: center !important;
    }

    .jbe-profile-actions .btn {
        flex: 1 1 130px;
    }

    .jbe-profile-summary {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .jbe-profile-summary__item {
        min-height: 67px !important;
        padding: 10px !important;
    }

    .jbe-profile-card {
        padding: 15px !important;
        border-radius: 14px !important;
    }

    .jbe-profile-info-grid {
        grid-template-columns: 1fr !important;
    }

    /* Legacy forms / tables */
    .jbe-page-row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .jbe-page-row .block {
        border-radius: 12px !important;
    }

    .jbe-page-row .block_head {
        font-size: 15px;
    }

    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control {
        max-width: 100%;
    }

    .input-group {
        min-width: 0;
    }

    .input-group > .form-control,
    .input-group > input,
    .input-group > select {
        min-width: 0;
    }

    .table {
        font-size: 11px;
    }

    .table td,
    .table th {
        white-space: nowrap;
    }

    /* Footer */
    .jbe-footer__inner {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        text-align: center;
    }

    .jbe-footer__links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    /* Cookies */
    .cookies-noty {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 420px) {
    /* Avoid iOS input zoom and fit 320–390px phones */
    input,
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }

    .jbe-topbar .container,
    .jbe-page-container,
    .jbe-footer .container {
        padding-left: max(9px, env(safe-area-inset-left)) !important;
        padding-right: max(9px, env(safe-area-inset-right)) !important;
    }

    .jbe-brand__badge--v26 {
        width: 34px !important;
        height: 32px !important;
        flex-basis: 34px !important;
        border-radius: 9px !important;
    }

    .jbe-user-chip--header .jbe-user-chip__profile,
    .jbe-user-chip--v26 .jbe-user-chip__profile {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .jbe-user-chip--header .jbe-user-chip__profile img,
    .jbe-user-chip--v26 .jbe-user-chip__profile img {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }

    .jbe-balance-chip,
    .jbe-balance-chip--v26 {
        min-width: 66px !important;
        height: 36px !important;
        padding: 0 6px !important;
    }

    .jbe-balance-chip__icon {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }

    .jbe-user-chip__icon {
        width: 36px !important;
        height: 36px !important;
    }

    .jbe-home-clean__hero h1 {
        font-size: 28px !important;
    }

    .jbe-home-clean__filters .jbe-home-v17__filter {
        min-height: 36px;
        padding: 0 12px;
        font-size: 10px;
    }

    .jbe-banner-carousel,
    .jbe-banner-carousel .carousel-inner,
    .jbe-banner-carousel .carousel-item,
    .jbe-banner-slide {
        min-height: 148px !important;
    }

    .jbe-banner-slide__content {
        width: 100% !important;
        padding: 14px 15px 20px !important;
    }

    .jbe-banner-slide__content h2 {
        max-width: 94%;
        font-size: 18px !important;
    }

    .jbe-banner-slide__text {
        display: none !important;
    }

    .jbe-banner-slide__button {
        min-height: 29px !important;
        padding: 0 10px !important;
        font-size: 8px !important;
    }

    .jbe-home-v17__tile,
    .jbe-home-v17__tile--featured {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        padding: 11px !important;
    }

    .jbe-home-v17__tile-circle,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-circle {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
    }

    .jbe-home-v17__tile-circle--icon i,
    .jbe-home-v17__tile-circle--icon .glyphicon,
    .jbe-home-v17__tile-circle--social i,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-circle i {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
    }

    .jbe-home-v17__tile-body strong,
    .jbe-home-v17__tile--featured .jbe-home-v17__tile-body strong {
        font-size: 18px !important;
    }

    .jbe-home-v17__tile-status {
        max-width: 52%;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }

    .jbe-home-v17__tile-link {
        font-size: 9px !important;
    }

    .jbe-server-card {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    .jbe-server-card__ring {
        width: 54px !important;
        height: 54px !important;
    }

    .jbe-server-card__game {
        display: none !important;
    }

    .jbe-server-card__players {
        margin-left: auto;
    }

    .jbe-server-card__meta {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jbe-server-card__footer {
        flex-direction: row !important;
        align-items: center !important;
    }

    .jbe-server-card__status {
        max-width: 52%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jbe-profile-summary {
        grid-template-columns: 1fr !important;
    }

    .jbe-profile-wallet {
        grid-template-columns: 1fr !important;
    }

    .jbe-profile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .jbe-profile-actions .btn {
        width: 100%;
        flex: none !important;
    }

    .modal-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}