/* ============================================================
   BymVPN Console — CLEAN BymCloud UI
   No wildcard component selectors.
   ============================================================ */

:root {
    --bym-bg: #f4f1eb;
    --bym-paper: #ffffff;
    --bym-paper-soft: #faf8f4;
    --bym-black: #111111;
    --bym-text: #171717;
    --bym-muted: #827e77;
    --bym-muted-2: #a09c95;
    --bym-border: #d8d2c8;
    --bym-border-soft: #e9e4dc;
    --bym-danger: #e86e6e;
    --bym-green: #35a96b;
    --sidebar-w: 252px;
}


/* ============================================================
   BASE
   ============================================================ */

html {
    background: var(--bym-bg) !important;
    color-scheme: light !important;
    overflow-x: hidden;
}

body {
    margin: 0 !important;

    color: var(--bym-text) !important;
    background:
        radial-gradient(
            circle at 72% -15%,
            rgba(228, 220, 235, .42),
            transparent 34rem
        ),
        radial-gradient(
            circle at 18% -18%,
            rgba(245, 223, 211, .40),
            transparent 31rem
        ),
        var(--bym-bg) !important;

    font-family: Manrope, system-ui, sans-serif !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}

button,
input,
select,
textarea {
    font-family: inherit !important;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #111 !important;
    outline-offset: 2px !important;
}


/* ============================================================
   APP FRAME
   ============================================================ */

.ss-shell {
    width: 100% !important;
    min-height: 100vh !important;

    display: grid !important;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;

    background: transparent !important;

    overflow: visible !important;
}

.ss-main {
    grid-column: 2 !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    height: auto !important;

    color: var(--bym-text) !important;
    background: transparent !important;

    overflow: visible !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.ss-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;

    width: var(--sidebar-w) !important;
    height: 100vh !important;

    padding: 24px 16px 18px !important;

    display: flex !important;
    flex-direction: column !important;

    color: var(--bym-text) !important;
    background: rgba(255,255,255,.78) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 0 !important;
    border-right: 1px solid var(--bym-border) !important;

    box-shadow: none !important;

    overflow: hidden !important;

    z-index: 30 !important;
}

.ss-brand {
    height: 54px !important;

    margin: 0 4px 28px !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ss-brand__logo {
    width: 28px !important;
    height: 28px !important;

    object-fit: contain !important;

    filter: none !important;
}

.ss-brand__name {
    color: #111 !important;

    font-family: Manrope, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
}

.ss-brand__name span {
    color: inherit !important;
}

.ss-nav {
    display: grid !important;
    gap: 7px !important;
}

.ss-nav__item {
    min-height: 48px !important;
    height: 48px !important;

    padding: 0 14px !important;

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

    color: #6f6b65 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 12px !important;

    box-shadow: none !important;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease !important;
}

.ss-nav__item .ss-cell__icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;

    display: grid !important;
    place-items: center !important;

    color: #807c75 !important;

    transition:
        color .16s ease,
        transform .16s ease !important;
}

.ss-nav__item .ss-cell__icon svg {
    width: 18px !important;
    height: 18px !important;

    display: block !important;

    stroke: currentColor !important;
}

.ss-nav__item .ss-cell__title {
    color: inherit !important;

    font-size: 14px !important;
    font-weight: 650 !important;
}

.ss-nav__item:hover {
    color: #111 !important;
    background: #ece8e1 !important;

    transform: translateX(2px) !important;
}

.ss-nav__item:hover .ss-cell__icon {
    color: #111 !important;

    transform: scale(1.06) !important;
}

.ss-nav__item.is-active {
    color: #fff !important;
    background: #111 !important;

    box-shadow: none !important;

    transform: none !important;
}

.ss-nav__item.is-active .ss-cell__icon {
    color: #fff !important;
}

.ss-sidebottom {
    margin-top: auto !important;

    display: grid !important;
    gap: 12px !important;
}

.ss-nav--links {
    padding-top: 14px !important;

    border-top: 1px solid var(--bym-border-soft) !important;
}

.ss-nav--links .ss-cell {
    min-height: 42px !important;

    padding: 5px 12px !important;

    color: #77736d !important;
    background: transparent !important;

    border-radius: 10px !important;
}

.ss-nav--links .ss-cell:hover {
    color: #111 !important;
    background: #ece8e1 !important;
}

.ss-profile {
    padding: 10px 11px !important;

    color: #111 !important;
    background: #fff !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 14px !important;

    box-shadow: none !important;
}

.ss-avatar {
    width: 36px !important;
    height: 36px !important;

    display: grid !important;
    place-items: center !important;

    color: #fff !important;
    background: #111 !important;

    border-radius: 50% !important;
}

.ss-profile__email {
    color: #111 !important;
}

.ss-profile__id {
    color: var(--bym-muted) !important;
}

.ss-iconbtn {
    color: #111 !important;
    background: transparent !important;

    border: 1px solid var(--bym-border) !important;
}

.ss-foot {
    color: #918d86 !important;
}

.ss-foot i {
    background: var(--bym-green) !important;
    box-shadow: none !important;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.ss-topbar {
    position: relative !important;
    top: auto !important;

    min-height: 94px !important;
    height: auto !important;

    padding: 18px clamp(26px, 3vw, 48px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;

    color: var(--bym-text) !important;
    background: rgba(250,248,244,.78) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 0 !important;
    border-bottom: 1px solid var(--bym-border) !important;

    box-shadow: none !important;
}

.ss-topbar__overline {
    margin-bottom: 2px !important;

    color: #9a968f !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
}

.ss-title {
    margin: 0 !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -2.2px !important;
}

.ss-topactions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ss-search,
.ss-balance,
.ss-user {
    height: 44px !important;

    color: #111 !important;
    background: rgba(255,255,255,.82) !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 12px !important;

    box-shadow: none !important;
}

.ss-search {
    padding: 0 12px !important;
}

.ss-search kbd {
    color: #8d8982 !important;
    background: #f1eee8 !important;

    border-color: #dcd7cf !important;
}

.ss-balance {
    padding: 0 12px !important;
}

.ss-balance small {
    color: #99958e !important;
}

.ss-balance b {
    color: #111 !important;
}

.ss-balance > span {
    width: 22px !important;
    height: 22px !important;

    color: #fff !important;
    background: #111 !important;

    border-radius: 7px !important;
}

.ss-user {
    padding: 0 11px !important;
}

.ss-user__dot {
    width: 34px !important;
    height: 34px !important;

    display: grid !important;
    place-items: center !important;

    color: #111 !important;
    background: #d8c7ef !important;

    border-radius: 50% !important;
}


/* ============================================================
   CONTENT
   ============================================================ */

.ss-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding:
        36px
        clamp(28px, 3vw, 50px)
        70px !important;

    overflow: visible !important;
}

.ss-group {
    margin: 0 0 30px !important;
}

.ss-group__head {
    min-height: 34px !important;

    margin: 0 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.ss-group__title {
    color: #918d86 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
}


/* ============================================================
   CARDS
   ============================================================ */

.ss-card,
.ss-panel,
.ss-hero {
    color: #111 !important;
    background: rgba(255,255,255,.94) !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 18px !important;

    box-shadow:
        0 10px 28px rgba(39,34,28,.035) !important;
}

.ss-card:hover,
.ss-panel:hover {
    border-color: #c5beb3 !important;

    box-shadow:
        0 14px 34px rgba(39,34,28,.055) !important;
}


/* ============================================================
   MAIN WELCOME HERO
   ============================================================ */

.ss-welcome {
    position: relative !important;

    min-height: 310px !important;

    margin: 0 0 20px !important;
    padding: 46px 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important;

    overflow: hidden !important;

    color: #111 !important;
    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(225,220,231,.55),
            transparent 28%
        ),
        rgba(255,255,255,.92) !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 24px !important;

    box-shadow:
        0 14px 36px rgba(34,29,24,.045) !important;
}

.ss-welcome::before {
    content: none !important;
}

.ss-welcome__copy {
    position: relative !important;
    z-index: 2 !important;

    width: min(650px, 62%) !important;
    max-width: 650px !important;
}

.ss-welcome__eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    color: #77726c !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.ss-welcome__eyebrow i {
    width: 26px !important;
    height: 1px !important;

    background: #77726c !important;

    box-shadow: none !important;
}

.ss-welcome h2 {
    max-width: 570px !important;

    margin: 22px 0 14px !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: clamp(40px, 4.3vw, 64px) !important;
    font-weight: 700 !important;
    line-height: .94 !important;
    letter-spacing: -4px !important;
}

.ss-welcome p {
    max-width: 620px !important;

    margin: 0 !important;

    color: #78736d !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
}

.ss-welcome__actions {
    margin-top: 27px !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}


/* ============================================================
   ORBIT
   ============================================================ */

.ss-orb {
    position: absolute !important;
    z-index: 1 !important;

    top: 50% !important;
    right: 6% !important;

    width: 255px !important;
    height: 255px !important;

    transform: translateY(-50%) !important;

    opacity: .82 !important;

    pointer-events: none !important;
}

.ss-orb__halo,
.ss-orb__halo::before,
.ss-orb__halo::after,
.ss-orb__grid {
    border-color: #d5d0c9 !important;
}

.ss-orb__core {
    background: #dedad3 !important;

    box-shadow: none !important;
}

.ss-orb__node {
    background: #fff !important;

    border: 3px solid #111 !important;

    box-shadow: none !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.ss-btn {
    min-height: 44px !important;
    height: auto !important;

    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    border-radius: 11px !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow: none !important;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

.ss-btn:hover {
    transform: translateY(-1px) !important;
}

.ss-btn--primary {
    color: #fff !important;
    background: #111 !important;

    border: 1px solid #111 !important;
}

.ss-btn--primary:hover {
    background: #292929 !important;
}

.ss-btn--ghost {
    color: #111 !important;
    background: #fff !important;

    border: 1px solid var(--bym-border) !important;
}

.ss-btn--ghost:hover {
    background: #f2efe9 !important;

    border-color: #c5beb4 !important;
}

.ss-btn--sm {
    min-height: 40px !important;

    padding: 0 15px !important;
}

.ss-btn--block {
    width: 100% !important;
}


/* ============================================================
   STATS — REAL COMPACT ROW
   ============================================================ */

.ss-grid3 {
    width: 100% !important;

    margin: 0 0 30px !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.ss-stat {
    min-height: 88px !important;
    height: 88px !important;
    max-height: 88px !important;

    padding: 15px 18px !important;

    display: grid !important;
    grid-template-columns: 42px auto minmax(0,1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 12px !important;

    overflow: hidden !important;
}

.ss-stat::before,
.ss-stat::after {
    content: none !important;
    display: none !important;
}

.ss-stat__ic {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    color: #111 !important;
    background: #f5f2ed !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 11px !important;
}

.ss-stat__ic svg {
    width: 18px !important;
    height: 18px !important;

    stroke: currentColor !important;
}

.ss-stat__val {
    margin: 0 !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
}

.ss-stat__label {
    margin: 0 !important;

    color: #77736d !important;

    font-size: 11px !important;
    line-height: 1.25 !important;
}

.ss-stat:hover {
    transform: translateY(-2px) !important;
}


/* ============================================================
   SUBSCRIPTION HERO — NO GIANT EMPTY BOX
   ============================================================ */

.ss-hero {
    position: relative !important;

    min-height: 150px !important;
    height: auto !important;
    max-height: none !important;

    padding: 24px 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;

    overflow: hidden !important;
}

.ss-hero::before {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    right: 8% !important;

    width: 150px !important;
    height: 150px !important;

    transform: translateY(-50%) !important;

    border: 1px solid #e2ddd5 !important;
    border-radius: 50% !important;

    box-shadow:
        0 0 0 30px rgba(225,221,214,.22),
        0 0 0 60px rgba(225,221,214,.10) !important;
}

.ss-hero__top,
.ss-hero__actions {
    position: relative !important;
    z-index: 2 !important;
}

.ss-badge {
    padding: 6px 9px !important;

    color: #75716b !important;
    background: #f5f2ed !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 999px !important;

    box-shadow: none !important;
}

.ss-badge__dot {
    width: 6px !important;
    height: 6px !important;

    background: var(--bym-green) !important;

    box-shadow: none !important;
}

.ss-hero__plan {
    margin: 14px 0 0 !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
}

.ss-hero__meta {
    margin-top: 7px !important;

    color: #7c7872 !important;

    font-size: 11px !important;
}

.ss-hero__actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}


/* ============================================================
   SUB TOOLS
   ============================================================ */

.ss-subtools {
    margin: 0 0 28px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr) !important;
    gap: 14px !important;
}

.ss-connect-card,
.ss-slots-card {
    min-height: 170px !important;
    height: auto !important;

    padding: 24px !important;

    overflow: hidden !important;
}

.ss-connect-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
}

.ss-connect-card::after,
.ss-slots-card::after {
    content: none !important;
}

.ss-connect-card__icon {
    width: 48px !important;
    height: 48px !important;

    display: grid !important;
    place-items: center !important;

    color: #111 !important;
    background: #f5f2ed !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 13px !important;
}

.ss-connect-card__icon svg {
    width: 20px !important;
    height: 20px !important;
}

.ss-kicker {
    color: #969189 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

.ss-connect-card h3,
.ss-rewardcard h3,
.ss-refcard h3 {
    margin: 6px 0 7px !important;

    color: #111 !important;

    font-size: 19px !important;
    font-weight: 750 !important;
}

.ss-connect-card p,
.ss-slots-card p,
.ss-rewardcard p,
.ss-refcard p {
    margin: 0 !important;

    color: #817d76 !important;

    font-size: 12px !important;
    line-height: 1.55 !important;
}

.ss-slots-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.ss-slots-card__count {
    margin: 10px 0 6px !important;

    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.ss-slots-card__count strong {
    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: 35px !important;
    line-height: 1 !important;
}

.ss-slots-card__count span {
    color: #8c8881 !important;

    font-size: 10px !important;
}

.ss-slots-card .ss-btn {
    margin-top: auto !important;
}


/* ============================================================
   DEVICES
   ============================================================ */

.ss-devices-list {
    overflow: hidden !important;
}

.ss-device {
    min-height: 66px !important;

    padding: 10px 16px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;

    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid var(--bym-border-soft) !important;

    transition: background .15s ease !important;
}

.ss-device:last-child {
    border-bottom: 0 !important;
}

.ss-device:hover {
    background: #f8f6f2 !important;
}

.ss-device__icon {
    width: 38px !important;
    height: 38px !important;

    display: grid !important;
    place-items: center !important;

    color: #111 !important;
    background: #f5f2ed !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 11px !important;
}

.ss-device__icon svg {
    width: 17px !important;
    height: 17px !important;
}

.ss-device__meta strong {
    display: block !important;

    color: #111 !important;

    font-size: 12px !important;
}

.ss-device__meta span {
    display: block !important;

    margin-top: 3px !important;

    color: #99948c !important;

    font-size: 9px !important;
}

.ss-device__remove,
.ss-binding button {
    min-height: 34px !important;

    padding: 0 12px !important;

    color: var(--bym-danger) !important;
    background: #fff8f8 !important;

    border: 1px solid #f1cccc !important;
    border-radius: 9px !important;
}


/* ============================================================
   TARIFF PERIODS
   ============================================================ */

.ss-periods {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 18px !important;
    padding: 5px !important;

    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 4px !important;

    background: #e9e5de !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 14px !important;

    overflow: visible !important;
}

.ss-periods button {
    position: relative !important;

    min-height: 44px !important;
    height: 44px !important;

    color: #6f6b65 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 10px !important;

    font-size: 12px !important;
    font-weight: 750 !important;
}

.ss-periods button:hover {
    color: #111 !important;
    background: rgba(255,255,255,.55) !important;
}

.ss-periods button.is-active {
    color: #fff !important;
    background: #111 !important;
}

.ss-off {
    position: absolute !important;

    top: -10px !important;
    right: 9px !important;

    padding: 2px 5px !important;

    color: #fff !important;
    background: #77726b !important;

    border-radius: 5px !important;

    font-size: 8px !important;
}


/* ============================================================
   TARIFF CARDS
   ============================================================ */

.ss-grid2 {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;
    gap: 16px !important;
}

.ss-tariff {
    min-height: 300px !important;
    height: auto !important;

    padding: 28px !important;
}

.ss-tariff__label,
.ss-label {
    color: #8e8982 !important;
}

.ss-price {
    margin: 12px 0 0 !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
}

.ss-price small {
    color: #111 !important;
}

.ss-old {
    color: #99948c !important;
}

.ss-devpick {
    min-height: 48px !important;

    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    align-items: center !important;

    overflow: hidden !important;

    background: #faf8f4 !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 11px !important;
}

.ss-devpick button {
    width: 48px !important;
    height: 48px !important;

    color: #fff !important;
    background: #111 !important;

    border: 0 !important;
}

.ss-devpick__val {
    text-align: center !important;

    color: #111 !important;

    font-size: 20px !important;
    font-weight: 800 !important;
}

.ss-feat {
    min-height: 50px !important;

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

    color: #3d3a36 !important;

    border-bottom: 1px solid var(--bym-border-soft) !important;

    font-size: 12px !important;
}

.ss-feat:last-child {
    border-bottom: 0 !important;
}

.ss-feat__ic {
    width: 25px !important;
    height: 25px !important;

    display: grid !important;
    place-items: center !important;

    color: #111 !important;
    background: #f2efe9 !important;

    border-radius: 50% !important;
}

.ss-feat__ic svg {
    width: 13px !important;
    height: 13px !important;
}


/* ============================================================
   REWARDS
   ============================================================ */

.ss-rewardhero {
    min-height: 180px !important;
    height: auto !important;

    margin: 0 0 14px !important;
    padding: 28px 32px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;

    color: #111 !important;
    background:
        radial-gradient(
            circle at 82% 0,
            rgba(229,224,217,.48),
            transparent 34%
        ),
        #fff !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 20px !important;

    box-shadow:
        0 10px 28px rgba(39,34,28,.035) !important;
}

.ss-rewardhero__balance {
    margin: 8px 0 4px !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: 46px !important;
    line-height: 1 !important;
    letter-spacing: -2.5px !important;
}

.ss-rewardhero__balance small {
    font-size: 18px !important;
}

.ss-rewardhero p {
    margin: 0 !important;

    color: #817d76 !important;

    font-size: 12px !important;
}

.ss-rewardgrid {
    margin-bottom: 14px !important;
}

.ss-rewardcard {
    min-height: 190px !important;

    padding: 24px !important;
}

.ss-promorow {
    margin-top: 18px !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
}

.ss-refcard {
    min-height: 145px !important;

    margin-bottom: 28px !important;
    padding: 24px !important;

    display: grid !important;
    grid-template-columns: 1fr minmax(340px,.8fr) !important;
    align-items: center !important;
    gap: 25px !important;
}

.ss-refcopy {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 7px !important;
}

.ss-refcopy code {
    grid-column: 1 / -1 !important;

    padding: 12px !important;

    overflow: hidden !important;

    color: #ddd8d0 !important;
    background: #171717 !important;

    border: 0 !important;
    border-radius: 10px !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* ============================================================
   AUTORENEW — MONOCHROME
   ============================================================ */

.ss-switch {
    margin-top: 18px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: #111 !important;
}

.ss-switch span {
    width: 44px !important;
    height: 24px !important;

    background: #d5d0c8 !important;

    border-radius: 999px !important;
}

.ss-switch span::after {
    width: 18px !important;
    height: 18px !important;

    top: 3px !important;
    left: 3px !important;

    background: #fff !important;

    box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}

.ss-switch input:checked + span {
    background: #111 !important;
}

.ss-switch input:checked + span::after {
    left: 23px !important;

    background: #fff !important;

    box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}


/* ============================================================
   FORMS / PANELS / TABLES
   ============================================================ */

.field,
.ss-content input,
.ss-content select,
.ss-content textarea {
    min-height: 46px !important;

    color: #111 !important;
    background: #faf8f4 !important;

    border: 1px solid var(--bym-border) !important;
    border-radius: 11px !important;

    box-shadow: none !important;
}

.field:focus,
.ss-content input:focus,
.ss-content select:focus,
.ss-content textarea:focus {
    border-color: #aaa39a !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(17,17,17,.05) !important;
}

.ss-prow,
.ss-binding,
.ss-tx {
    background: #fff !important;

    border-color: var(--bym-border-soft) !important;
}

.ss-table {
    color: #111 !important;
}

.ss-table th {
    color: #8c8881 !important;
}

.ss-chip,
.ss-pill {
    border-radius: 999px !important;
}

.ss-pill.on,
.ss-chip.ok {
    color: #2b6d48 !important;
    background: #edf6f0 !important;
}

.ss-pill.off {
    color: #817d76 !important;
    background: #f2efe9 !important;
}


/* ============================================================
   EMPTY
   ============================================================ */

.ss-empty {
    padding: 34px !important;
}

.ss-empty__ic {
    color: #111 !important;
    background: #f5f2ed !important;

    border: 1px solid var(--bym-border) !important;
}


/* ============================================================
   MODAL / TOAST
   ============================================================ */

.ss-modal {
    color: #111 !important;
    background: #fff !important;

    border: 1px solid var(--bym-border) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.14) !important;
}

.ss-modal-overlay {
    background: rgba(30,28,25,.34) !important;

    backdrop-filter: blur(6px);
}

.ss-toast {
    color: #fff !important;
    background: #111 !important;
}


/* ============================================================
   AUTH / LOGIN
   ============================================================ */

.auth-body {
    min-height: 100vh !important;

    color: #111 !important;
    background: var(--bym-bg) !important;

    overflow-y: auto !important;
}

.auth-shell {
    min-height: 100vh !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(430px, .65fr) !important;

    background: var(--bym-bg) !important;
}

.auth-story {
    position: relative !important;

    min-height: 100vh !important;

    padding:
        34px
        clamp(48px, 6vw, 92px)
        38px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    overflow: hidden !important;

    color: #111 !important;
    background:
        radial-gradient(
            circle at 16% -12%,
            rgba(248,220,207,.50),
            transparent 34rem
        ),
        radial-gradient(
            circle at 80% -15%,
            rgba(227,217,241,.50),
            transparent 36rem
        ),
        #fbfaf7 !important;
}

.auth-brand {
    position: relative !important;
    z-index: 4 !important;

    width: fit-content !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: #111 !important;
}

.auth-brand img {
    width: 28px !important;
    height: 28px !important;

    object-fit: contain !important;
}

.auth-brand span {
    color: #111 !important;

    font-family: Manrope, sans-serif !important;
    font-weight: 800 !important;
}

.auth-story__copy {
    position: relative !important;
    z-index: 3 !important;

    max-width: 700px !important;
}

.auth-story .eyebrow {
    width: fit-content !important;

    color: #6f6b65 !important;
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}

.auth-story h1 {
    margin: 25px 0 24px !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: clamp(50px, 6vw, 82px) !important;
    line-height: .94 !important;
    letter-spacing: -5px !important;
}

.auth-story h1 em {
    color: #aaa7a1 !important;
    font-style: normal !important;
}

.auth-story__copy p {
    max-width: 620px !important;

    color: #77736d !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

.auth-metrics {
    position: relative !important;
    z-index: 4 !important;

    padding-top: 20px !important;

    border-top: 1px solid var(--bym-border) !important;
}

.auth-metrics strong {
    color: #111 !important;
}

.auth-metrics span {
    color: #99948d !important;
}


/* login orbit restored */

.auth-orbit {
    position: absolute !important;

    top: 50% !important;
    right: -20px !important;

    width: 430px !important;
    height: 300px !important;

    transform: translateY(-50%) !important;

    border: 1px solid rgba(150,145,138,.28) !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    opacity: .72 !important;

    animation: authOrbitFloat 7s ease-in-out infinite !important;

    pointer-events: none !important;
}

.auth-orbit::before,
.auth-orbit::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    border: 1px solid rgba(150,145,138,.28) !important;
    border-radius: 50% !important;
}

.auth-orbit::before {
    transform: rotate(55deg) scale(.86, 1.18) !important;

    animation: authOrbitTurn 15s linear infinite !important;
}

.auth-orbit::after {
    transform: rotate(-48deg) scale(.9, 1.12) !important;

    animation: authOrbitTurnReverse 19s linear infinite !important;
}

.auth-orbit > span {
    position: absolute !important;

    width: 9px !important;
    height: 9px !important;

    background: #bab6af !important;

    border-radius: 50% !important;

    box-shadow: none !important;
}

.auth-orbit > span:nth-child(1) {
    top: 12% !important;
    left: 48% !important;
}

.auth-orbit > span:nth-child(2) {
    right: 7% !important;
    bottom: 24% !important;
}

.auth-orbit > span:nth-child(3) {
    left: 19% !important;
    bottom: 16% !important;
}

@keyframes authOrbitFloat {
    0%,100% { transform: translateY(-50%) translateY(0); }
    50% { transform: translateY(-50%) translateY(-8px); }
}

@keyframes authOrbitTurn {
    to {
        transform: rotate(415deg) scale(.86, 1.18);
    }
}

@keyframes authOrbitTurnReverse {
    to {
        transform: rotate(-408deg) scale(.9, 1.12);
    }
}


.auth-panel {
    min-height: 100vh !important;

    padding: 40px clamp(35px, 6vw, 90px) !important;

    display: grid !important;
    place-items: center !important;

    background: #f6f3ee !important;
}

.auth-card {
    width: min(430px, 100%) !important;

    padding: 0 !important;

    color: #111 !important;
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}

.auth-kicker {
    color: #969189 !important;
}

.auth-title {
    margin: 4px 0 0 !important;

    color: #111 !important;

    font-family: Unbounded, Manrope, sans-serif !important;
    font-size: 35px !important;
    line-height: 1 !important;
    letter-spacing: -2.3px !important;
}

.auth-sub {
    color: #8a867f !important;
}

.auth-card .field-wrap {
    min-height: 54px !important;

    color: #111 !important;
    background: #fff !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 13px !important;

    box-shadow:
        inset 0 0 0 1px #ddd7cf !important;
}

.auth-card .field-wrap:focus-within {
    box-shadow:
        inset 0 0 0 1px #9f9990,
        0 0 0 3px rgba(17,17,17,.04) !important;
}

.auth-card .field {
    color: #111 !important;
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}

.auth-card .btn-primary {
    min-height: 52px !important;

    color: #fff !important;
    background: #111 !important;

    border: 0 !important;
    border-radius: 12px !important;

    box-shadow: none !important;
}

.auth-card .btn-link {
    color: #8b8780 !important;
}

.auth-card .btn-link strong {
    color: #111 !important;
}

.auth-divider {
    color: #99958e !important;
}

.auth-oauth .btn-oauth {
    color: #111 !important;
    background: #fff !important;

    border: 1px solid var(--bym-border) !important;
}

.auth-msg.ok {
    color: #318458 !important;
}

.auth-legal {
    color: #9a968e !important;
}

.auth-legal a {
    color: #57534e !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}


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

@media (max-width: 1050px) {

    .ss-welcome {
        padding: 38px !important;
    }

    .ss-orb {
        right: 2% !important;

        width: 220px !important;
        height: 220px !important;
    }

    .ss-welcome__copy {
        width: 68% !important;
    }

}


@media (max-width: 920px) {

    .ss-shell {
        display: block !important;
    }

    .ss-main {
        grid-column: auto !important;
    }

    .ss-sidebar {
        transform: translateX(-105%) !important;

        transition: transform .2s ease !important;
    }

    .ss-sidebar.is-open {
        transform: translateX(0) !important;
    }

    .ss-content {
        padding:
            26px
            20px
            60px !important;
    }

    .ss-topbar {
        min-height: 82px !important;

        padding: 14px 20px !important;
    }

    .ss-subtools {
        grid-template-columns: 1fr !important;
    }

    .auth-shell {
        grid-template-columns: 1fr !important;
    }

    .auth-story {
        display: none !important;
    }

    .auth-panel {
        min-height: 100vh !important;
    }

    .auth-mobile-brand {
        display: block !important;

        color: #111 !important;
    }

    .auth-mobile-brand span {
        color: #111 !important;
    }

}


@media (max-width: 700px) {

    .ss-title {
        font-size: 25px !important;
        letter-spacing: -1.5px !important;
    }

    .ss-search {
        display: none !important;
    }

    .ss-grid3 {
        grid-template-columns: 1fr !important;
    }

    .ss-stat {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }

    .ss-welcome {
        min-height: 360px !important;

        padding: 30px 24px !important;

        align-items: flex-start !important;
    }

    .ss-welcome__copy {
        width: 100% !important;
        max-width: none !important;
    }

    .ss-welcome h2 {
        font-size: 36px !important;
        letter-spacing: -2.5px !important;
    }

    .ss-orb {
        top: auto !important;
        right: -50px !important;
        bottom: -70px !important;

        width: 200px !important;
        height: 200px !important;

        transform: none !important;

        opacity: .45 !important;
    }

    .ss-welcome__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .ss-welcome__actions .ss-btn {
        width: 100% !important;
    }

    .ss-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .ss-hero__actions {
        width: 100% !important;
    }

    .ss-grid2 {
        grid-template-columns: 1fr !important;
    }

    .ss-connect-card {
        grid-template-columns: 48px minmax(0,1fr) !important;
    }

    .ss-connect-card .ss-btn {
        grid-column: 1 / -1 !important;

        width: 100% !important;
    }

    .ss-refcard {
        grid-template-columns: 1fr !important;
    }

    .ss-refcopy {
        grid-template-columns: 1fr 1fr !important;
    }

    .ss-rewardhero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .ss-promorow {
        grid-template-columns: 1fr !important;
    }

    .ss-device {
        grid-template-columns: 40px minmax(0,1fr) !important;
    }

    .ss-device__remove {
        grid-column: 2 !important;

        justify-self: start !important;
    }

}

/* === BYM CONSOLE MOBILE PERFECT V1 START === */

@media (max-width: 920px) {

    /* =====================================================
       TOP BAR
    ===================================================== */

    .ss-topbar {
        width: 100% !important;

        min-width: 0 !important;

        height: 78px !important;

        padding:
            0
            14px !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        overflow: visible !important;
    }


    /* burger -> right side */
    .ss-burger {
        order: 999 !important;

        flex: 0 0 44px !important;

        width: 44px !important;
        height: 44px !important;

        margin:
            0
            0
            0
            4px !important;

        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        border: 0 !important;
        border-radius: 14px !important;

        background: #111311 !important;

        color: #fff !important;

        font-size: 21px !important;

        box-shadow: none !important;
    }


    .ss-burger svg,
    .ss-burger path {
        color: #fff !important;
        stroke: currentColor !important;
    }


    /* =====================================================
       RIGHT DRAWER
    ===================================================== */

    .ss-sidebar {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: min(86vw, 360px) !important;

        min-width: 0 !important;
        max-width: 360px !important;

        height:
            100dvh !important;

        padding:
            max(20px, env(safe-area-inset-top))
            14px
            max(18px, env(safe-area-inset-bottom))
            !important;

        border:
            0 !important;

        border-left:
            1px solid #ddd9d0 !important;

        border-radius: 0 !important;

        background: #f5f3ee !important;

        box-shadow:
            -24px
            0
            80px
            rgba(25, 24, 20, .18) !important;

        transform:
            translateX(105%) !important;

        transition:
            transform
            .27s
            cubic-bezier(.2,.8,.2,1)
            !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 10000 !important;
    }


    .ss-sidebar.open,
    .ss-sidebar.is-open {
        transform:
            translateX(0) !important;
    }


    .ss-scrim {
        position: fixed !important;

        inset: 0 !important;

        background:
            rgba(20, 20, 18, .52) !important;

        backdrop-filter:
            blur(3px) !important;

        -webkit-backdrop-filter:
            blur(3px) !important;

        z-index: 9999 !important;
    }


    /* =====================================================
       SIDEBAR BRAND
    ===================================================== */

    .ss-sidebar .ss-brand {
        min-height: 72px !important;

        padding:
            0
            12px !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        color: #111311 !important;
    }


    .ss-sidebar .ss-brand img {
        display: none !important;
    }


    .ss-sidebar .ss-brand__name,
    .ss-sidebar [class*="brand__name"] {
        color: #111311 !important;

        font-size: 20px !important;
        font-weight: 800 !important;

        letter-spacing: -.5px !important;
    }


    /* =====================================================
       SIDEBAR NAVIGATION
    ===================================================== */

    .ss-nav {
        width: 100% !important;

        margin: 8px 0 0 !important;

        padding: 0 !important;

        display: grid !important;

        gap: 6px !important;
    }


    .ss-nav__item,
    .ss-cell.ss-nav__item {
        width: 100% !important;

        min-height: 54px !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            0
            14px !important;

        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        border: 0 !important;
        border-radius: 15px !important;

        background: transparent !important;

        color: #797b76 !important;

        box-shadow: none !important;

        font-size: 15px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;

        text-align: left !important;
    }


    .ss-nav__item .ss-cell__icon {
        flex: 0 0 24px !important;

        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        color: currentColor !important;
    }


    .ss-nav__item .ss-cell__title {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        color: currentColor !important;

        font-size: inherit !important;
        font-weight: inherit !important;

        line-height: inherit !important;
    }


    .ss-nav__item.active,
    .ss-nav__item.is-active,
    .ss-nav__item.ss-nav__item--active,
    .ss-nav__item[aria-current="page"] {
        background: #111311 !important;
        color: #fff !important;

        box-shadow:
            0
            8px
            24px
            rgba(12, 13, 11, .10)
            !important;
    }


    .ss-nav__item.active *,
    .ss-nav__item.is-active *,
    .ss-nav__item.ss-nav__item--active *,
    .ss-nav__item[aria-current="page"] * {
        color: #fff !important;
    }


    /* lower links */
    .ss-nav--links {
        width: 100% !important;

        margin-top: 14px !important;

        padding-top: 14px !important;

        border-top:
            1px solid #ddd9d0 !important;
    }


    .ss-nav--links .ss-cell,
    .ss-nav--links a,
    .ss-nav--links button {
        width: 100% !important;

        min-height: 50px !important;

        padding:
            8px
            14px !important;

        border-radius: 14px !important;

        background: transparent !important;

        color: #797b76 !important;

        text-align: left !important;
    }


    .ss-nav--links .ss-cell:hover,
    .ss-nav--links a:hover,
    .ss-nav--links button:hover {
        background: #eae7e0 !important;
        color: #111311 !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 660px) {

    .ss-content {
        width: 100% !important;

        max-width: 100% !important;

        padding:
            24px
            16px
            70px !important;

        overflow-x: hidden !important;
    }


    /* -----------------------------------------------------
       STAT CARDS
       icon + value + label centered as ONE group
    ----------------------------------------------------- */

    .ss-grid3 {
        width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 12px !important;
    }


    .ss-stat {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 112px !important;

        padding:
            18px
            20px !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 16px !important;

        text-align: center !important;

        overflow: hidden !important;
    }


    .ss-stat::after {
        display: none !important;
    }


    .ss-stat__ic {
        flex: 0 0 46px !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;

        margin: 0 !important;

        display: grid !important;
        place-items: center !important;

        border-radius: 14px !important;
    }


    .ss-stat__val,
    .ss-stat__value {
        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 34px !important;
        line-height: 1 !important;

        text-align: center !important;
    }


    .ss-stat__label,
    .ss-stat__title,
    .ss-stat__meta {
        flex: 0 1 auto !important;

        width: auto !important;
        max-width: 190px !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.3 !important;

        text-align: center !important;
    }


    /* -----------------------------------------------------
       SUBSCRIPTION / HERO CARD
    ----------------------------------------------------- */

    .ss-hero {
        width: 100% !important;

        min-width: 0 !important;

        padding:
            24px
            20px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 20px !important;

        text-align: center !important;

        overflow: hidden !important;
    }


    .ss-hero__top {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }


    .ss-hero__top > * {
        max-width: 100% !important;
    }


    .ss-hero__plan,
    .ss-hero__meta {
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .ss-hero__actions {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .62fr) !important;

        gap: 9px !important;
    }


    .ss-hero__actions > * {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        white-space: normal !important;
    }


    /* Generic buttons cannot overflow */
    .ss-content .ss-btn,
    .ss-content button,
    .ss-content a {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       TELEGRAM — not Telegram blue
    ----------------------------------------------------- */

    .ss-content a[href*="t.me"],
    .ss-content a[href*="telegram.me"],
    .ss-content a[href*="telegram.org"] {
        border-color: #111311 !important;

        background: #111311 !important;

        color: #fff !important;

        box-shadow: none !important;
    }


    .ss-content a[href*="t.me"] svg,
    .ss-content a[href*="telegram.me"] svg,
    .ss-content a[href*="telegram.org"] svg {
        color: #fff !important;

        fill: currentColor !important;
        stroke: currentColor !important;
    }


    /* -----------------------------------------------------
       prevent page/card horizontal overflow
    ----------------------------------------------------- */

    .ss-card,
    .ss-panel,
    .ss-hero,
    .ss-tariff,
    .ss-prow {
        max-width: 100% !important;

        min-width: 0 !important;
    }
}


/* super-small */
@media (max-width: 390px) {

    .ss-stat {
        gap: 12px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    .ss-stat__val,
    .ss-stat__value {
        font-size: 31px !important;
    }


    .ss-stat__label,
    .ss-stat__title,
    .ss-stat__meta {
        font-size: 13px !important;
    }


    .ss-hero__actions {
        grid-template-columns:
            1fr !important;
    }
}

/* === BYM CONSOLE MOBILE PERFECT V1 END === */

/* === BYM CONSOLE FINAL MOBILE POLISH BEGIN === */

:root {
    --bym-mobile-content-x: 16px;
}


/* ---------------------------------------------------------
   ICON NORMALIZATION
   --------------------------------------------------------- */

.ss-cell__icon,
.ss-stat__ic,
.ss-burger,
.ss-btn > svg,
.ss-btn > span:first-child,
.ss-content button svg,
.ss-content a svg {
    flex: 0 0 auto;
}

.ss-cell__icon,
.ss-stat__ic {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
}

.ss-cell__icon svg,
.ss-stat__ic svg {
    display: block !important;
    margin: auto !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 920px) {

    /* -----------------------------------------------------
       TOPBAR
       burger | title ........ balance | user
       ----------------------------------------------------- */

    .ss-topbar {
        width: 100% !important;
        min-height: 72px !important;
        height: 72px !important;

        padding:
            0 var(--bym-mobile-content-x) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 9px !important;

        overflow: visible !important;
    }

    /* BURGER СНОВА СЛЕВА */
    .ss-burger {
        order: -100 !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        display: grid !important;
        place-items: center !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 13px !important;

        background: #111 !important;
        color: #fff !important;

        font-size: 0 !important;
        line-height: 1 !important;
    }

    .ss-burger svg {
        width: 21px !important;
        height: 21px !important;

        margin: auto !important;

        stroke: currentColor !important;
    }

    /* если бургер текстовый ≡ */
    .ss-burger::after {
        content: "☰";

        display: block;

        color: #fff;

        font-family: Arial, sans-serif;
        font-size: 21px;
        font-weight: 500;
        line-height: 1;
    }

    .ss-burger svg,
    .ss-burger > span {
        position: absolute;
    }


    /* Заголовок после бургера */
    .ss-topbar__title,
    .ss-topbar h1,
    .ss-topbar h2 {
        order: -90 !important;

        min-width: 0 !important;

        margin: 0 !important;

        font-size:
            clamp(21px, 6vw, 28px) !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }

    .ss-topactions {
        order: 10 !important;

        margin-left: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 7px !important;
    }

    .ss-balance,
    .ss-user {
        min-height: 44px !important;
        height: 44px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       CONTENT WIDTH
       ----------------------------------------------------- */

    .ss-content {
        width: 100% !important;

        max-width: 760px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding:
            22px
            var(--bym-mobile-content-x)
            80px !important;
    }

    .ss-content .ss-grid3,
    .ss-content .ss-grid2,
    .ss-content .ss-hero,
    .ss-content .ss-panel,
    .ss-content .ss-card,
    .ss-content [class*="subscription"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       STATS — ИКОНКА / ЧИСЛО / ТЕКСТ
       СТРОГО ПО ОДНОЙ ГОРИЗОНТАЛЬНОЙ ОСИ
       ----------------------------------------------------- */

    .ss-grid3 {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .ss-stat {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 116px !important;
        height: 116px !important;

        margin: 0 !important;
        padding: 18px 20px !important;

        display: grid !important;

        grid-template-columns:
            58px
            max-content
            minmax(0, max-content) !important;

        align-items: center !important;
        align-content: center !important;

        justify-content: center !important;

        column-gap: 16px !important;

        border-radius: 22px !important;
    }

    .ss-stat::before,
    .ss-stat::after {
        pointer-events: none !important;
    }

    .ss-stat__ic {
        grid-column: 1 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: center !important;

        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 15px !important;
    }

    .ss-stat__ic svg {
        width: 23px !important;
        height: 23px !important;
    }

    .ss-stat__val,
    .ss-stat__value {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;

        margin: 0 !important;

        font-size: 38px !important;
        line-height: .9 !important;

        white-space: nowrap !important;
    }

    .ss-stat__label {
        grid-column: 3 !important;
        grid-row: 1 !important;

        align-self: center !important;

        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.25 !important;

        text-align: left !important;

        white-space: normal !important;
    }


    /* -----------------------------------------------------
       HERO / SUBSCRIPTION — SAME WIDTH
       ----------------------------------------------------- */

    .ss-hero,
    .ss-panel,
    .ss-card,
    .ss-content [class*="subscription"] {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ss-hero {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .ss-hero__actions,
    .ss-content [class*="subscription"] [class*="actions"] {
        width: 100% !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items: stretch !important;

        gap: 8px !important;
    }

    .ss-hero__actions > *,
    .ss-content
    [class*="subscription"]
    [class*="actions"] > * {
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       BUTTON ICON ALIGNMENT
       ----------------------------------------------------- */

    .ss-btn,
    .ss-content button,
    .ss-content a[class*="btn"] {
        align-items: center !important;
        justify-content: center !important;
    }

    .ss-btn svg,
    .ss-content button svg,
    .ss-content a[class*="btn"] svg {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* -----------------------------------------------------
       SIDEBAR — СУЩЕСТВЕННО УЖЕ
       ----------------------------------------------------- */

    .ss-sidebar {
        width: min(66vw, 286px) !important;
        min-width: 0 !important;
        max-width: 286px !important;

        padding:
            22px
            14px
            max(16px, env(safe-area-inset-bottom))
            !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background:
            rgba(246,245,241,.985) !important;

        border-right:
            1px solid #ddd9d1 !important;

        box-shadow:
            18px 0 50px rgba(0,0,0,.12) !important;
    }

    .ss-sidebar.open,
    .ss-sidebar.is-open {
        transform: translateX(0) !important;
    }

    .ss-brand {
        min-height: 58px !important;

        padding: 0 9px !important;

        display: flex !important;
        align-items: center !important;
    }

    .ss-brand img,
    .ss-brand picture {
        display: none !important;
    }

    .ss-brand__name,
    .ss-brand strong,
    .ss-brand span {
        font-size: 16px !important;
        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       SIDEBAR NAV
       ВСЕ ИКОНКИ И ТЕКСТА СТРОГО ПО ЛИНИИ
       ----------------------------------------------------- */

    .ss-nav {
        width: 100% !important;

        display: grid !important;

        gap: 4px !important;
    }

    .ss-nav__item,
    .ss-cell.ss-nav__item {
        width: 100% !important;

        min-height: 50px !important;
        height: 50px !important;

        padding: 0 10px !important;

        display: grid !important;

        grid-template-columns:
            32px
            minmax(0, 1fr) !important;

        align-items: center !important;

        column-gap: 9px !important;

        border-radius: 13px !important;

        overflow: hidden !important;
    }

    .ss-nav__item .ss-cell__icon {
        grid-column: 1 !important;

        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;
        justify-self: center !important;

        color: #888983 !important;
    }

    .ss-nav__item .ss-cell__icon svg {
        width: 20px !important;
        height: 20px !important;

        margin: auto !important;
    }

    .ss-nav__item .ss-cell__title {
        grid-column: 2 !important;

        min-width: 0 !important;

        margin: 0 !important;

        align-self: center !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;

        text-align: left !important;
    }

    .ss-nav__item.active,
    .ss-nav__item.is-active,
    .ss-nav__item[aria-current="page"] {
        background: #111 !important;
        color: #fff !important;
    }

    .ss-nav__item.active .ss-cell__icon,
    .ss-nav__item.is-active .ss-cell__icon,
    .ss-nav__item[aria-current="page"]
    .ss-cell__icon {
        color: #fff !important;
    }


    /* -----------------------------------------------------
       LOWER SIDEBAR LINKS
       ----------------------------------------------------- */

    .ss-nav--links {
        width: 100% !important;

        padding-top: 12px !important;

        display: grid !important;

        gap: 3px !important;
    }

    .ss-nav--links .ss-cell,
    .ss-nav--links a,
    .ss-nav--links button {
        width: 100% !important;
        min-height: 52px !important;

        padding: 7px 9px !important;

        display: grid !important;

        grid-template-columns:
            32px
            minmax(0, 1fr) !important;

        align-items: center !important;

        column-gap: 9px !important;

        text-align: left !important;
    }

    .ss-nav--links .ss-cell__icon {
        width: 32px !important;
        height: 32px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;
    }

    .ss-nav--links .ss-cell__title {
        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    .ss-nav--links .ss-cell__sub,
    .ss-nav--links small {
        margin-top: 4px !important;

        font-size: 10px !important;
        line-height: 1.3 !important;
    }


    /* -----------------------------------------------------
       USER CARD IN SIDEBAR
       ----------------------------------------------------- */

    .ss-sidebottom {
        width: 100% !important;
    }

    .ss-sidebar [class*="user"] {
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       SCRIM
       ----------------------------------------------------- */

    .ss-scrim {
        background:
            rgba(17,17,17,.48) !important;

        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }


    /* -----------------------------------------------------
       TELEGRAM BUTTON INSIDE CONTENT
       BLACK, NOT BLUE
       ----------------------------------------------------- */

    .ss-content a[href*="t.me"],
    .ss-content a[href*="telegram.me"],
    .ss-content button[class*="telegram"],
    .ss-content a[class*="telegram"] {
        background: #111 !important;
        border-color: #111 !important;

        color: #fff !important;

        box-shadow: none !important;
    }

    .ss-content a[href*="t.me"] svg,
    .ss-content a[href*="telegram.me"] svg,
    .ss-content [class*="telegram"] svg {
        color: #fff !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }
}


@media (max-width: 560px) {

    :root {
        --bym-mobile-content-x: 14px;
    }

    .ss-topbar {
        height: 68px !important;
        min-height: 68px !important;
    }

    .ss-burger {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
    }

    .ss-topbar__title,
    .ss-topbar h1,
    .ss-topbar h2 {
        font-size: 21px !important;
    }

    .ss-stat {
        min-height: 108px !important;
        height: 108px !important;

        grid-template-columns:
            52px
            max-content
            minmax(0, max-content) !important;

        column-gap: 13px !important;

        padding:
            16px 14px !important;
    }

    .ss-stat__ic {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
    }

    .ss-stat__val,
    .ss-stat__value {
        font-size: 35px !important;
    }

    .ss-stat__label {
        font-size: 13px !important;
    }

    .ss-sidebar {
        width: min(66vw, 270px) !important;
        max-width: 270px !important;
    }
}

/* === BYM CONSOLE FINAL MOBILE POLISH END === */

/* === BYM PREMIUM LIGHT START === */

:root {
    --bym-bg: #ffffff;
    --bym-surface: #ffffff;
    --bym-soft: #f5f5f6;
    --bym-text: #111111;
    --bym-muted: #74747a;
    --bym-line: rgba(0,0,0,.035);
}


html,
body {
    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

.ss-shell,
.ss-main,
.ss-content {
    background: #ffffff !important;
    color: #111111 !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.ss-topbar {
    background:
        rgba(255,255,255,.95) !important;

    border-bottom:
        1px solid rgba(0,0,0,.035) !important;

    box-shadow: none !important;
}


.ss-topbar,
.ss-topbar * {
    color: #111111 !important;
}


.ss-balance,
.ss-user,
.ss-search {
    background: #ffffff !important;

    border:
        1px solid rgba(0,0,0,.035) !important;

    box-shadow:
        0 4px 20px rgba(0,0,0,.035) !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.ss-sidebar {
    background: #ffffff !important;

    border-right:
        1px solid rgba(0,0,0,.04) !important;

    box-shadow: none !important;
}


.ss-brand,
.ss-brand *,
.ss-sidebar {
    color: #111111 !important;
}


.ss-nav__item,
.ss-cell.ss-nav__item {
    background: transparent !important;

    color: #6e6e74 !important;

    border: 0 !important;

    box-shadow: none !important;
}


.ss-nav__item:hover,
.ss-cell.ss-nav__item:hover {
    background: #f5f5f6 !important;

    color: #111111 !important;
}


.ss-nav__item.active,
.ss-nav__item.is-active,
.ss-nav__item[aria-current="page"],
.ss-cell.ss-nav__item.active,
.ss-cell.ss-nav__item.is-active {
    background: #f0f0f1 !important;

    color: #111111 !important;

    box-shadow: none !important;
}


.ss-nav__item.active *,
.ss-nav__item.is-active *,
.ss-nav__item[aria-current="page"] * {
    color: #111111 !important;
}


.ss-nav--links {
    border-top:
        1px solid rgba(0,0,0,.04) !important;
}


.ss-nav--links a,
.ss-nav--links button,
.ss-nav--links .ss-cell {
    background: transparent !important;

    color: #707076 !important;
}


.ss-nav--links a:hover,
.ss-nav--links button:hover,
.ss-nav--links .ss-cell:hover {
    background: #f5f5f6 !important;

    color: #111111 !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.ss-card,
.ss-panel,
.ss-hero,
.ss-stat,
.ss-tariff,
.console-block,
[class*="subscription-card"],
[class*="device-card"] {
    background: #ffffff !important;

    color: #111111 !important;

    border-radius: 20px !important;

    border:
        1px solid rgba(0,0,0,.02) !important;

    box-shadow:
        0 4px 24px rgba(0,0,0,.04) !important;
}


.ss-card,
.ss-panel,
.ss-tariff {
    padding: 24px;
}


.ss-card *,
.ss-panel *,
.ss-hero *,
.ss-stat *,
.ss-tariff * {
    color: inherit;
}


.ss-stat__label,
.ss-hero__meta,
.ss-card p,
.ss-panel p,
.ss-tariff p,
[class*="meta"],
[class*="sub"] {
    color: #75757b !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ss-btn,
.btn-primary,
.ss-content button {
    background: #111111 !important;
    color: #ffffff !important;

    border-radius: 14px !important;

    padding: 14px 24px !important;

    font-weight: 600 !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;

    transition:
        opacity .2s ease !important;
}


.ss-btn *,
.ss-content button * {
    color: #ffffff !important;
}


.ss-btn:active,
.btn-primary:active,
.ss-content button:active {
    opacity: .7 !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.ss-badge,
.ss-chip,
.ss-pill,
.badge,
[class*="badge"],
[class*="chip"] {
    background: #f0f0f0 !important;
    color: #46464b !important;

    border-radius: 30px !important;

    padding: 6px 12px !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   MOBILE MENU / DRAWER
   ========================================================= */

@media (max-width: 920px) {

    .ss-sidebar {
        background: #ffffff !important;

        box-shadow:
            14px 0 40px rgba(0,0,0,.06) !important;
    }


    .ss-scrim {
        background:
            rgba(20,20,24,.12) !important;

        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }


    .ss-burger {
        background: #ffffff !important;

        color: #111111 !important;

        border:
            1px solid rgba(0,0,0,.04) !important;

        box-shadow:
            0 3px 14px rgba(0,0,0,.035) !important;
    }


    .ss-burger svg,
    .ss-burger path {
        color: #111111 !important;
        stroke: #111111 !important;
    }

}

/* === BYM PREMIUM LIGHT END === */

/* === BYM CONSOLE HEADER FLEX FIX START === */

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

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   BASE HEADER
   ========================================================= */

.ss-topbar {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
}

.ss-topbar > * {
    min-width: 0 !important;
}


/* =========================================================
   MOBILE HEADER:
   [ MENU ] [ TITLE................ ] [ BALANCE + AVATAR ]
   ========================================================= */

@media (max-width: 660px) {

    .ss-topbar {
        position: relative !important;

        width: 100% !important;
        max-width: 100vw !important;

        height: 76px !important;
        min-height: 76px !important;

        margin: 0 !important;

        padding:
            0
            14px !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 9px !important;

        overflow: hidden !important;
    }


    /* -----------------------------------------------------
       1. MENU
       ----------------------------------------------------- */

    .ss-burger {
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        order: 1 !important;

        flex:
            0
            0
            44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;

        display: grid !important;
        place-items: center !important;

        overflow: hidden !important;
    }


    /* -----------------------------------------------------
       2. TITLE
       ----------------------------------------------------- */

    .bym-console-title-slot {
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        order: 2 !important;

        flex:
            1
            1
            auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;

        overflow: hidden !important;
    }


    .bym-console-title-slot h1,
    .bym-console-title-slot h2,
    .bym-console-title-slot h3,
    .bym-console-title-slot .ss-page-title,
    .bym-console-title-slot .ss-topbar__title,
    .bym-console-title-slot [class*="page-title"],
    .bym-console-title-slot [class*="topbar__title"] {
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;

        font-size:
            clamp(
                20px,
                5.7vw,
                25px
            ) !important;

        line-height: 1.08 !important;

        letter-spacing:
            -0.7px !important;

        text-align: left !important;
    }


    /* если сам wrapper был абсолютным раньше */
    .ss-topbar > .bym-console-title-slot {
        position: static !important;
        inset: auto !important;

        translate: none !important;
        scale: none !important;
        rotate: none !important;
    }


    /* -----------------------------------------------------
       3. BALANCE + AVATAR
       ----------------------------------------------------- */

    .ss-topactions {
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        order: 3 !important;

        flex:
            0
            0
            auto !important;

        min-width: 0 !important;
        max-width: none !important;

        margin:
            0
            0
            0
            auto !important;

        padding: 0 !important;

        align-self: center !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 6px !important;
    }


    .ss-balance {
        position: static !important;

        transform: none !important;

        flex:
            0
            0
            auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 90px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;

        padding:
            0
            8px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        white-space: nowrap !important;
    }


    .ss-balance small {
        display: none !important;
    }


    .ss-user {
        position: static !important;

        transform: none !important;

        flex:
            0
            0
            44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        overflow: hidden !important;
    }


    .ss-user > span:not(:first-child),
    .ss-user .ss-user__name,
    .ss-user .ss-user__meta {
        display: none !important;
    }


    /* -----------------------------------------------------
       УБИРАЕМ ЛЮБЫЕ СТАРЫЕ POSITION / TRANSLATE У TITLE
       ----------------------------------------------------- */

    .ss-topbar h1,
    .ss-topbar h2,
    .ss-topbar h3,
    .ss-topbar [class*="title"] {
        left: auto !important;
        right: auto !important;

        translate: none !important;
    }


    /* -----------------------------------------------------
       CONTENT НЕ ЛЕЗЕТ ПОД HEADER
       ----------------------------------------------------- */

    .ss-content {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        overflow-x: hidden !important;
    }


    /* -----------------------------------------------------
       НОРМАЛЬНЫЕ ОТСТУПЫ СЕКЦИЙ
       ----------------------------------------------------- */

    .ss-content > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    .ss-content > * + * {
        margin-top: 20px !important;
    }


    .ss-grid2,
    .ss-grid3 {
        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 14px !important;
    }


    .ss-grid2 > *,
    .ss-grid3 > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .ss-card,
    .ss-panel,
    .ss-hero,
    .ss-stat,
    .ss-tariff {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


/* =========================================================
   VERY NARROW IPHONE
   ========================================================= */

@media (max-width: 390px) {

    .ss-topbar {
        padding-left: 11px !important;
        padding-right: 11px !important;

        gap: 7px !important;
    }


    .ss-burger {
        flex-basis: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }


    .ss-balance {
        height: 40px !important;
        min-height: 40px !important;

        max-width: 82px !important;

        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    .ss-user {
        flex-basis: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }


    .bym-console-title-slot h1,
    .bym-console-title-slot h2,
    .bym-console-title-slot h3,
    .bym-console-title-slot .ss-page-title,
    .bym-console-title-slot .ss-topbar__title,
    .bym-console-title-slot [class*="page-title"],
    .bym-console-title-slot [class*="topbar__title"] {
        font-size:
            clamp(
                18px,
                5.4vw,
                22px
            ) !important;
    }

}


/* === BYM CONSOLE HEADER FLEX FIX END === */

/* === BYM CONSOLE PREMIUM HEADER V5 START === */


:root {
    --bym-console-bg: #f7f7f8;
    --bym-console-card: #ffffff;
    --bym-console-text: #000000;
    --bym-console-muted: #66666d;
    --bym-console-border: rgba(0,0,0,.08);
}


/* ==========================================================
   КОНТРАСТ / РАЗДЕЛЕНИЕ
   ========================================================== */

html,
body,
.ss-shell,
.ss-main,
.ss-content {
    background: var(--bym-console-bg) !important;
    color: var(--bym-console-text) !important;
}


.ss-card,
.ss-panel,
.ss-hero,
.ss-stat,
.ss-tariff,
.ss-rewardhero,
.ss-rewardcard,
.ss-refcard,
[class*="subscription-card"],
[class*="device-card"] {
    background: #ffffff !important;

    border:
        1px solid rgba(0,0,0,.08) !important;

    box-shadow:
        0 10px 32px rgba(0,0,0,.055) !important;
}


.ss-content h1,
.ss-content h2,
.ss-content h3,
.ss-content h4,
.ss-card__title,
.ss-hero__plan,
.ss-stat__val {
    color: #000000 !important;
}


.ss-content p,
.ss-content small,
.ss-stat__label,
.ss-hero__meta,
[class*="meta"],
[class*="subtitle"] {
    color: #68686f !important;
}


/* ==========================================================
   TOPBAR
   ========================================================== */

.ss-topbar {
    background: #ffffff !important;

    border-bottom:
        1px solid rgba(0,0,0,.07) !important;

    box-shadow:
        0 6px 24px rgba(0,0,0,.035) !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.ss-sidebar {
    background: #ffffff !important;

    border-right:
        1px solid rgba(0,0,0,.08) !important;
}


.ss-nav__item,
.ss-cell.ss-nav__item {
    color: #717178 !important;
}


.ss-nav__item:hover,
.ss-cell.ss-nav__item:hover {
    background: #f2f2f3 !important;

    color: #000000 !important;
}


.ss-nav__item.active,
.ss-nav__item.is-active,
.ss-nav__item[aria-current="page"] {
    background: #111111 !important;

    color: #ffffff !important;
}


.ss-nav__item.active *,
.ss-nav__item.is-active *,
.ss-nav__item[aria-current="page"] * {
    color: #ffffff !important;
}


/* ==========================================================
   HEADER TRIAD:
   [ MENU ] [ TITLE ] [ BALANCE / AVATAR ]
   ========================================================== */

@media (max-width: 660px) {

    .ss-topbar {
        position: relative !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100vw !important;

        height: 76px !important;
        min-height: 76px !important;

        padding: 0 14px !important;

        gap: 9px !important;

        overflow: hidden !important;
    }


    /* LEFT — MENU */

    .ss-burger {
        position: static !important;

        flex: 0 0 44px !important;

        order: 1 !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        overflow: hidden !important;

        transform: none !important;

        color: #111111 !important;
    }


    /*
     * Старые патчи прятали SVG — возвращаем.
     */

    .ss-burger svg {
        display: block !important;

        width: 22px !important;
        height: 22px !important;

        margin: 0 !important;

        stroke: #111111 !important;
        color: #111111 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    .ss-burger svg path,
    .ss-burger svg line {
        stroke: #111111 !important;
    }


    /*
     * Если внутри вообще нет SVG,
     * JS ниже вставит правильный.
     */

    .ss-burger::before,
    .ss-burger::after {
        content: none !important;
        display: none !important;
    }


    /* CENTER — TITLE */

    .bym-console-header-title {
        position: static !important;

        order: 2 !important;

        flex:
            1
            1
            0% !important;

        min-width: 0 !important;
        max-width: none !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        transform: none !important;
    }


    .bym-console-header-title h1,
    .bym-console-header-title h2,
    .bym-console-header-title h3,
    .bym-console-header-title [class*="title"] {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #000000 !important;

        font-size:
            clamp(19px, 5.4vw, 24px) !important;

        line-height: 1.08 !important;

        letter-spacing:
            -.7px !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;

        text-align: left !important;

        transform: none !important;
    }


    /* RIGHT — BALANCE / USER */

    .ss-topactions {
        position: static !important;

        order: 3 !important;

        flex: 0 0 auto !important;

        min-width: 0 !important;

        margin: 0 0 0 auto !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 6px !important;

        transform: none !important;
    }


    .ss-balance {
        position: static !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 90px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;

        padding: 0 8px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        white-space: nowrap !important;

        transform: none !important;
    }


    .ss-balance small {
        display: none !important;
    }


    .ss-user {
        position: static !important;

        flex: 0 0 44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        overflow: hidden !important;

        transform: none !important;
    }


    .ss-user > span:not(:first-child),
    .ss-user__name,
    .ss-user__meta {
        display: none !important;
    }


    /* ======================================================
       КОНТЕНТ
       ====================================================== */

    .ss-content {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        padding:
            24px
            16px
            max(120px, env(safe-area-inset-bottom))
            !important;

        overflow-x: hidden !important;
    }


    .ss-content > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    .ss-content > * + * {
        margin-top: 22px !important;
    }


    .ss-grid2,
    .ss-grid3 {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        width: 100% !important;

        gap: 15px !important;
    }


    .ss-grid2 > *,
    .ss-grid3 > *,
    .ss-card,
    .ss-panel,
    .ss-hero,
    .ss-stat,
    .ss-tariff {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


@media (max-width: 390px) {

    .ss-topbar {
        padding-left: 10px !important;
        padding-right: 10px !important;

        gap: 7px !important;
    }


    .ss-burger {
        flex-basis: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }


    .ss-balance {
        height: 40px !important;
        min-height: 40px !important;

        max-width: 80px !important;
    }


    .ss-user {
        flex-basis: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }


    .bym-console-header-title h1,
    .bym-console-header-title h2,
    .bym-console-header-title h3,
    .bym-console-header-title [class*="title"] {
        font-size:
            clamp(17px, 5vw, 21px) !important;
    }

}


/* === BYM CONSOLE PREMIUM HEADER V5 END === */

/* === BYM CONSOLE AXIS FIX V2 START === */
.ss-brand__name,.ss-title,.ss-stat__val,.ss-hero__plan,.ss-slots-card__count strong,.ss-table,.ss-prow,.ss-card h2,.ss-card h3,.ss-panel h2,.ss-panel h3{font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important}
.ss-brand{padding:0 12px!important;gap:0!important}.ss-brand__name{font-size:19px!important;font-weight:800!important;letter-spacing:-.55px!important}.ss-brand__name span{color:inherit!important}
.ss-foot i,.ss-badge__dot{display:inline-block!important;width:8px!important;height:8px!important;flex:0 0 8px!important;border-radius:50%!important;background:#22a55d!important;box-shadow:0 0 0 4px rgba(34,165,93,.12)!important}
.ss-brand__collapse,.ss-burger{border:1px solid rgba(17,17,17,.1)!important;border-radius:12px!important;background:#f3f1ec!important}.ss-brand__collapse svg,.ss-burger svg,.ss-iconbtn svg,.ss-user__logout svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.ss-topactions{margin-right:10px!important}.ss-balance{display:grid!important;grid-template-columns:auto auto 30px!important;align-items:center!important;gap:8px!important;height:46px!important;padding:0 7px 0 13px!important;border-radius:13px!important}.ss-balance>span{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;padding:0 0 2px!important;border-radius:9px!important;line-height:1!important;font-size:20px!important}
.ss-user{width:auto!important;min-width:0!important;height:46px!important;gap:10px!important}.ss-user__name{display:block!important;max-width:150px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important}.ss-user__logout,.ss-iconbtn{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;color:#111!important;background:#f3f1ec!important;border:1px solid rgba(17,17,17,.09)!important;border-radius:11px!important}
.ss-profile__row{display:grid!important;grid-template-columns:minmax(0,1fr) 38px!important;align-items:center!important;gap:10px!important}.ss-profile__email{font-size:12px!important;font-weight:750!important}
.ss-grid3{align-items:stretch!important}.ss-stat{height:104px!important;min-height:104px!important;max-height:none!important;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;grid-template-rows:34px 22px!important;align-content:center!important;align-items:center!important;column-gap:14px!important;row-gap:2px!important;padding:17px 18px!important}.ss-stat__ic{grid-column:1!important;grid-row:1/3!important;align-self:center!important}.ss-stat__val{grid-column:2!important;grid-row:1!important;align-self:end!important;font-size:27px!important;font-weight:800!important;line-height:1!important;letter-spacing:-.7px!important}.ss-stat__label{grid-column:2!important;grid-row:2!important;align-self:start!important;font-size:11px!important;line-height:1.2!important}
.ss-hero{min-height:178px!important;align-items:center!important}.ss-hero__plan{font-size:clamp(25px,2.2vw,32px)!important;font-weight:800!important;letter-spacing:-.8px!important}.ss-hero__actions{align-self:center!important}
.ss-subtools{grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr)!important}.ss-connect-card,.ss-slots-card{min-height:210px!important;padding:26px!important}.ss-slots-card .ss-btn{margin-top:20px!important;width:100%!important}
.ss-table th,.ss-table td{vertical-align:middle!important;padding:16px 18px!important}.ss-prow{display:grid!important;grid-template-columns:minmax(150px,.55fr) minmax(0,1fr)!important;align-items:center!important;min-height:62px!important;padding:14px 18px!important}
@media(max-width:920px){.ss-subtools{grid-template-columns:1fr!important}}
@media(max-width:660px){.ss-topactions{margin-right:0!important;gap:5px!important}.ss-balance{grid-template-columns:auto 28px!important;height:42px!important;padding:0 6px 0 9px!important;gap:6px!important}.ss-balance small{display:none!important}.ss-balance>span{width:28px!important;height:28px!important}.ss-user{width:40px!important;min-width:40px!important;max-width:40px!important;height:42px!important}.ss-user__name{display:none!important}.ss-user__logout{width:40px!important;height:40px!important}.ss-grid3{grid-template-columns:1fr!important;gap:10px!important}.ss-stat{height:88px!important;min-height:88px!important}.ss-hero{min-height:0!important;align-items:stretch!important}.ss-hero__actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;margin-top:18px!important}.ss-connect-card,.ss-slots-card{min-height:190px!important;padding:22px!important}.ss-prow{grid-template-columns:1fr!important;gap:6px!important}}
/* === BYM CONSOLE AXIS FIX V2 END === */

.ss-welcome__eyebrow i{display:inline-block!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#22a55d!important;box-shadow:0 0 0 4px rgba(34,165,93,.12)!important}

/* === BYM CONSOLE PRODUCT UX V3 START === */
:root{--ux-font:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--ux-sidebar:252px;--ux-line:#e7e3dc;--ux-soft:#f5f3ee;--ux-green:#22a55d}
html,body{margin:0!important;min-height:100%!important;font-family:var(--ux-font)!important;overflow-x:hidden!important}
body,button,input,select,textarea{font-family:var(--ux-font)!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important}
.ss-shell{display:grid!important;grid-template-columns:var(--ux-sidebar) minmax(0,1fr)!important;min-height:100vh!important;width:100%!important;overflow:visible!important}
.ss-main{grid-column:2!important;min-width:0!important;min-height:100vh!important;margin:0!important;padding:0!important;overflow:visible!important}
.ss-sidebar{position:fixed!important;inset:0 auto 0 0!important;width:var(--ux-sidebar)!important;height:100vh!important;height:100dvh!important;padding:22px 16px 18px!important;display:flex!important;flex-direction:column!important;transform:none!important;overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important;border:0!important;border-right:1px solid var(--ux-line)!important;box-shadow:none!important;z-index:1000!important}
.ss-brand{display:flex!important;align-items:center!important;min-height:52px!important;margin:0 0 22px!important;padding:0 12px!important}.ss-brand__name{font-family:var(--ux-font)!important;font-size:20px!important;font-weight:850!important;letter-spacing:-.7px!important}.ss-brand__collapse{margin-left:auto!important}
.ss-nav{display:grid!important;gap:6px!important}.ss-nav__item{min-height:48px!important;padding:0 13px!important;border-radius:13px!important}.ss-sidebottom{margin-top:auto!important;padding-top:22px!important;display:grid!important;gap:14px!important}.ss-foot{padding:0 10px 2px!important}
.ss-topbar{position:sticky!important;top:0!important;z-index:100!important;width:100%!important;min-height:82px!important;height:82px!important;margin:0!important;padding:0 clamp(22px,3vw,44px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--ux-line)!important;backdrop-filter:blur(18px)!important;box-shadow:none!important;overflow:visible!important}
.ss-topbar>div:first-of-type{min-width:0!important}.ss-topbar__overline{font-family:var(--ux-font)!important;font-size:9px!important;line-height:1.2!important}.ss-title{margin:3px 0 0!important;font-family:var(--ux-font)!important;font-size:clamp(22px,2vw,28px)!important;font-weight:800!important;line-height:1.05!important;letter-spacing:-.7px!important}.ss-topactions{display:flex!important;align-items:center!important;gap:8px!important;margin:0 8px 0 auto!important;transform:none!important}
.ss-content{position:relative!important;width:min(1240px,100%)!important;min-height:0!important;margin:0 auto!important;padding:30px clamp(22px,3vw,44px) 72px!important;display:block!important;transform:none!important;overflow:visible!important}.ss-content>*{position:relative!important;min-width:0!important;max-width:100%!important;transform:none!important}.ss-content>*+*{margin-top:0!important}
.ss-welcome{min-height:360px!important;height:auto!important;margin:0 0 28px!important;padding:42px!important;display:flex!important;align-items:center!important}.ss-welcome__copy{position:relative!important;z-index:2!important;width:min(620px,62%)!important}.ss-welcome__actions{margin-top:24px!important;display:grid!important;grid-template-columns:repeat(2,minmax(180px,1fr))!important;gap:10px!important;width:min(470px,100%)!important}.ss-welcome__eyebrow i,.ss-foot i,.ss-badge__dot{display:inline-block!important;width:8px!important;height:8px!important;flex:0 0 8px!important;border-radius:50%!important;background:var(--ux-green)!important;box-shadow:0 0 0 4px rgba(34,165,93,.12)!important}
.ss-grid3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:14px!important;margin:0 0 28px!important}.ss-stat{height:104px!important;min-height:104px!important;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;grid-template-rows:34px 22px!important;align-content:center!important;column-gap:14px!important;row-gap:2px!important;padding:17px 18px!important}.ss-stat__ic{grid-column:1!important;grid-row:1/3!important;margin:0!important;align-self:center!important}.ss-stat__val{grid-column:2!important;grid-row:1!important;align-self:end!important;margin:0!important;font-family:var(--ux-font)!important;font-size:27px!important;font-weight:800!important;line-height:1!important;letter-spacing:-.6px!important}.ss-stat__label{grid-column:2!important;grid-row:2!important;align-self:start!important;margin:0!important;font-size:11px!important;line-height:1.2!important}
.ss-group{margin:0 0 28px!important}.ss-group__head{margin:0 0 13px!important}.ss-hero{min-height:180px!important;height:auto!important;padding:28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}.ss-hero__plan,.ss-slots-card__count strong,.ss-rewardhero__balance,.ss-table,.ss-prow{font-family:var(--ux-font)!important}.ss-hero__plan{font-size:clamp(25px,2.2vw,32px)!important;font-weight:800!important;letter-spacing:-.8px!important}.ss-hero__actions{position:relative!important;align-self:center!important;display:flex!important;gap:9px!important;margin:0!important;transform:none!important}
.ss-subtools{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr)!important;gap:14px!important;margin:0 0 28px!important}.ss-connect-card,.ss-slots-card{min-height:210px!important;height:100%!important;padding:26px!important}.ss-slots-card{display:flex!important;flex-direction:column!important}.ss-slots-card .ss-btn{position:static!important;width:100%!important;margin:20px 0 0!important;transform:none!important}
.ss-table th,.ss-table td{padding:16px 18px!important;vertical-align:middle!important}.ss-prow{display:grid!important;grid-template-columns:minmax(150px,.55fr) minmax(0,1fr)!important;align-items:center!important;min-height:62px!important;padding:14px 18px!important}.ss-card,.ss-panel,.ss-hero,.ss-stat,.ss-tariff{border-radius:18px!important}
.ss-burger{display:none!important}.ss-scrim{position:fixed!important;inset:0!important;z-index:990!important;background:rgba(18,18,16,.42)!important;backdrop-filter:blur(2px)!important;opacity:0!important;pointer-events:none!important;transition:opacity .22s ease!important}.ss-scrim.is-on{opacity:1!important;pointer-events:auto!important}
@media(max-width:920px){
 .ss-shell{display:block!important;min-height:100vh!important}.ss-main{grid-column:auto!important;width:100%!important;min-height:100vh!important}
 .ss-sidebar{top:0!important;right:auto!important;bottom:0!important;left:0!important;width:min(84vw,320px)!important;max-width:320px!important;height:100vh!important;height:100dvh!important;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))!important;transform:translate3d(-105%,0,0)!important;transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;box-shadow:18px 0 60px rgba(0,0,0,.16)!important;overscroll-behavior:contain!important}
 .ss-sidebar.is-open,.ss-sidebar.open{transform:translate3d(0,0,0)!important}
 .ss-burger{order:1!important;display:grid!important;place-items:center!important;flex:0 0 42px!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;background:var(--ux-soft)!important;color:#111!important}
 .ss-topbar{position:sticky!important;top:0!important;height:70px!important;min-height:70px!important;padding:0 12px!important;gap:9px!important}.ss-topbar>div:first-of-type{order:2!important;flex:1 1 0!important}.ss-topbar__overline{display:none!important}.ss-title{font-size:20px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.ss-topactions{order:3!important;flex:0 0 auto!important;margin:0!important;gap:5px!important}.ss-search{display:none!important}
 .ss-content{width:100%!important;min-height:0!important;padding:20px 14px max(72px,env(safe-area-inset-bottom))!important}.ss-welcome{min-height:320px!important;padding:28px!important}.ss-welcome__copy{width:min(100%,520px)!important}.ss-orb{opacity:.28!important;right:-70px!important}.ss-subtools{grid-template-columns:1fr!important}
}
@media(max-width:660px){
 .ss-content{padding-top:16px!important}.ss-welcome{min-height:0!important;margin-bottom:16px!important;padding:24px 20px!important;align-items:flex-start!important}.ss-welcome__copy{width:100%!important}.ss-welcome h2{font-size:clamp(31px,10vw,42px)!important}.ss-welcome__actions{grid-template-columns:1fr!important;width:100%!important;margin-top:20px!important}.ss-orb{display:none!important}
 .ss-grid3{grid-template-columns:1fr!important;gap:9px!important;margin-bottom:20px!important}.ss-stat{height:84px!important;min-height:84px!important}.ss-hero{min-height:0!important;padding:21px!important;display:block!important}.ss-hero__actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;margin-top:18px!important}.ss-hero__actions .ss-btn{width:100%!important;min-height:46px!important}
 .ss-connect-card,.ss-slots-card{min-height:0!important;padding:21px!important}.ss-connect-card{grid-template-columns:44px minmax(0,1fr)!important}.ss-connect-card .ss-btn{grid-column:1/-1!important;width:100%!important;margin-top:8px!important}.ss-prow{grid-template-columns:1fr!important;gap:6px!important}
 .ss-balance{height:42px!important;grid-template-columns:auto 28px!important;padding:0 6px 0 9px!important;gap:6px!important}.ss-balance small{display:none!important}.ss-balance>span{width:28px!important;height:28px!important}.ss-user{width:40px!important;min-width:40px!important;max-width:40px!important;height:42px!important}.ss-user__name{display:none!important}.ss-user__logout{width:40px!important;height:40px!important}
}
@media(min-width:921px){.ss-sidebar{transform:none!important}.ss-scrim{display:none!important}}
/* === BYM CONSOLE PRODUCT UX V3 END === */

/* === BYM SCREENSHOT FIXES V4 START === */
.ss-nav__item.is-active,.ss-nav__item.active,.ss-nav__item[aria-current="page"]{background:#111!important;color:#fff!important;border-color:#111!important;box-shadow:none!important}
.ss-nav__item.is-active *,.ss-nav__item.active *,.ss-nav__item[aria-current="page"] *{color:#fff!important;stroke:currentColor!important;opacity:1!important}
.ss-nav__item.is-active .ss-cell__icon svg,.ss-nav__item.active .ss-cell__icon svg{stroke:#fff!important}
.ss-hero{min-height:150px!important;padding:25px 28px!important}.ss-hero__top{min-width:0!important;align-self:center!important}.ss-hero__actions{margin-left:auto!important}
.ss-prow__k,.ss-prow__v{min-width:0!important;text-align:left!important}.ss-prow__v{justify-self:start!important;overflow-wrap:anywhere!important}.ss-prow>span:last-child{justify-self:start!important;text-align:left!important}
@media(max-width:920px){
 .ss-burger{order:1!important}.ss-topbar>div:first-of-type{order:2!important}.ss-topactions{order:3!important}
}
@media(max-width:660px){
 .ss-topbar{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;align-items:center!important;gap:9px!important}
 .ss-burger{grid-column:1!important;order:1!important}.ss-topbar>div:first-of-type{grid-column:2!important;order:2!important}.ss-topactions{grid-column:3!important;order:3!important}
 .ss-title{font-size:19px!important}.ss-hero{min-height:0!important;padding:20px!important}.ss-hero__actions{margin:18px 0 0!important}
 .ss-prow{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;align-items:start!important;padding:16px 18px!important}.ss-prow__v,.ss-prow>span:last-child{justify-self:start!important;text-align:left!important}
}
/* === BYM SCREENSHOT FIXES V4 END === */

/* === BYM FINAL VISUAL SCROLL V5 START === */
html{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:scroll!important;scroll-behavior:smooth!important}
body{position:static!important;height:auto!important;min-height:100vh!important;overflow-x:hidden!important;overflow-y:visible!important;touch-action:pan-y!important}
.ss-shell,.ss-main{height:auto!important;min-height:100vh!important;max-height:none!important;overflow:visible!important;touch-action:pan-y!important}
.ss-content{height:auto!important;min-height:calc(100vh - 82px)!important;max-height:none!important;overflow:visible!important;touch-action:pan-y!important}
.ss-welcome__eyebrow i,.ss-foot i,.ss-badge__dot{width:7px!important;height:7px!important;min-width:7px!important;flex-basis:7px!important;background:#25a966!important;box-shadow:none!important;border:0!important}
.ss-badge{gap:8px!important}
@media(max-width:920px){
 html{overflow-y:scroll!important}.ss-main{overflow:visible!important}.ss-sidebar{left:0!important;right:auto!important;transform:translate3d(-105%,0,0)!important}.ss-sidebar.is-open,.ss-sidebar.open{transform:translate3d(0,0,0)!important}
 .ss-topbar{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important}.ss-burger{grid-column:1!important;grid-row:1!important}.ss-topbar>div:first-of-type{grid-column:2!important;grid-row:1!important}.ss-topactions{grid-column:3!important;grid-row:1!important}
}
/* === BYM FINAL VISUAL SCROLL V5 END === */

/* ============================================================
   BYM DEVICE DELETE — FINAL ACTIVE OVERRIDE
   ============================================================ */

.ss-device__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ss-device__remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 36px !important;
    padding: 0 13px !important;

    border: 1px solid #f1cccc !important;
    border-radius: 9px !important;

    background: #fff8f8 !important;
    color: #d94b4b !important;

    font-size: 10px !important;
    font-weight: 750 !important;

    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.ss-device__remove:hover {
    background: #fff0f0 !important;
    border-color: #e7abab !important;
}

.ss-device__remove:disabled {
    opacity: .55 !important;
    cursor: wait !important;
}

@media (max-width: 660px) {
    .ss-device__actions {
        grid-column: 2 !important;
        justify-content: flex-start !important;
    }

    .ss-device__remove {
        width: max-content !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   BYM PAYMENT QR
   ============================================================ */

.ss-payqr-wrap {
    margin: 18px 0 !important;
    padding: 18px !important;

    border: 1px solid #e3dfd8 !important;
    border-radius: 16px !important;

    background: #f8f6f2 !important;

    text-align: center !important;
}

.ss-payqr-title {
    margin-bottom: 12px !important;

    color: #171717 !important;

    font-size: 12px !important;
    font-weight: 800 !important;
}

.ss-payqr {
    width: 236px !important;
    min-height: 236px !important;

    margin: 0 auto !important;

    display: grid !important;
    place-items: center !important;

    padding: 10px !important;

    border: 1px solid #e0dcd5 !important;
    border-radius: 18px !important;

    background: #ffffff !important;

    overflow: hidden !important;
}

.ss-payqr__image {
    display: block !important;

    width: 216px !important;
    height: 216px !important;

    max-width: 100% !important;

    object-fit: contain !important;

    border-radius: 8px !important;
}

.ss-payqr__loading,
.ss-payqr__error {
    max-width: 190px !important;

    color: #77736c !important;

    font-size: 11px !important;
    line-height: 1.5 !important;
}

.ss-payqr__loading {
    display: grid !important;
    justify-items: center !important;

    gap: 10px !important;
}

.ss-payqr__loading i {
    width: 22px !important;
    height: 22px !important;

    border: 2px solid #e2ded7 !important;
    border-top-color: #171717 !important;
    border-radius: 50% !important;

    animation: bymPayQrSpin .8s linear infinite !important;
}

.ss-payqr-hint {
    margin-top: 11px !important;

    color: #77736c !important;

    font-size: 10px !important;
    line-height: 1.45 !important;
}

.ss-crypto-payment {
    display: grid !important;
    gap: 17px !important;
}

.ss-crypto-payment__head {
    display: flex !important;
    align-items: center !important;

    gap: 13px !important;
}

.ss-crypto-payment__logo {
    width: 48px !important;
    height: 48px !important;

    display: grid !important;
    place-items: center !important;

    flex: 0 0 48px !important;

    border: 1px solid #dfdad1 !important;
    border-radius: 15px !important;

    background: #f6f4ef !important;
}

.ss-crypto-payment__logo .pay-logo {
    width: 30px !important;
    height: 30px !important;

    object-fit: contain !important;
}

.ss-crypto-payment__head .ss-h3 {
    margin: 0 0 4px !important;
}

.ss-crypto-payment__head .ss-muted {
    margin: 0 !important;
}

.ss-crypto-payment__amount {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    padding: 14px 16px !important;

    border: 1px solid #e6e1da !important;
    border-radius: 13px !important;

    background: #faf9f6 !important;
}

.ss-crypto-payment__amount span {
    color: #77736c !important;
    font-size: 11px !important;
}

.ss-crypto-payment__amount strong {
    color: #171717 !important;
    font-size: 16px !important;
}

.ss-crypto-payment__open {
    text-decoration: none !important;
}

@keyframes bymPayQrSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   BYM DEVICE REMOVE — CHECKING STATE
   ============================================================ */

.ss-device__remove.is-checking,
.ss-device__remove:disabled.is-checking {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    min-width: 132px !important;
    min-height: 36px !important;

    color: #77736c !important;
    background: #f7f5f1 !important;
    border-color: #dfdad1 !important;

    cursor: wait !important;
    pointer-events: none !important;
}

.ss-device__remove.is-checking::before {
    content: "" !important;

    display: block !important;

    width: 13px !important;
    height: 13px !important;

    flex: 0 0 13px !important;

    border: 2px solid #d8d3cb !important;
    border-top-color: #171717 !important;
    border-radius: 50% !important;

    animation: bymDeviceCheckSpin .75s linear infinite !important;
}

@keyframes bymDeviceCheckSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 660px) {
    .ss-device__actions {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ss-device__remove,
    .ss-device__remove.is-checking {
        display: inline-flex !important;
        visibility: visible !important;

        width: auto !important;
        min-width: 132px !important;
        max-width: 100% !important;

        white-space: nowrap !important;
    }
}

/* ============================================================
   BYM DEVICE DELETE — STRONG RED + COOLDOWN
   ============================================================ */

.ss-device__remove,
.ss-device__remove:not(:disabled) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 38px !important;
    padding: 0 15px !important;

    color: #ffffff !important;
    background: #dc3f45 !important;

    border: 1px solid #dc3f45 !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-weight: 750 !important;

    cursor: pointer !important;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease !important;
}

.ss-device__remove:hover:not(:disabled) {
    color: #ffffff !important;
    background: #c9343a !important;
    border-color: #c9343a !important;
}

.ss-device__remove:active:not(:disabled) {
    color: #ffffff !important;
    background: #b72e34 !important;
    border-color: #b72e34 !important;

    transform: translateY(1px) !important;
}

.ss-device__remove:focus,
.ss-device__remove:focus-visible {
    color: #ffffff !important;
    background: #dc3f45 !important;

    outline: 3px solid rgba(220,63,69,.18) !important;
    outline-offset: 2px !important;
}

.ss-device__remove.is-checking,
.ss-device__remove:disabled.is-checking {
    color: #171717 !important;
    background: #f2f0eb !important;

    border-color: #d9d4cb !important;

    opacity: 1 !important;
}

.ss-device__remove.is-waiting,
.ss-device__remove:disabled.is-waiting {
    display: inline-flex !important;
    visibility: visible !important;

    min-width: 145px !important;

    color: #6c6862 !important;
    background: #f2f0eb !important;

    border: 1px solid #d9d4cb !important;

    opacity: 1 !important;

    cursor: wait !important;
    pointer-events: none !important;
}

@media (max-width: 660px) {
    .ss-device__remove,
    .ss-device__remove.is-checking,
    .ss-device__remove.is-waiting {
        display: inline-flex !important;
        visibility: visible !important;

        min-height: 40px !important;
        max-width: 100% !important;

        white-space: nowrap !important;
    }
}

/* DEVICE DELETE BUTTON FIX */
.ss-device__remove {
    background:#fff1f1!important;
    border-color:#ffb4b4!important;
    color:#c62828!important;
}

.ss-device__remove:hover {
    background:#ffe0e0!important;
}


/* DEVICE DELETE STATUS UI */

.ss-device-delete-hint {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8f8;
    border: 1px solid #ffd5d5;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
}

.ss-device-delete-hint b {
    color: #d64545;
}

.ss-device__remove.is-waiting {
    opacity: .65!important;
    cursor: wait!important;
}



/* BYM QR FINAL V1 */

.ss-payqr-wrap,
.ss-crypto-payment .ss-payqr {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ss-payqr {
    width: min(236px, 100%) !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ss-payqr__image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
}

@media (max-width: 760px) {
    .ss-payqr-wrap {
        display: block !important;
        padding: 14px !important;
    }

    .ss-crypto-payment .ss-payqr {
        display: block !important;
        width: min(230px, 82vw) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}