/* X2O2 Mobile Genres */
@media (max-width: 767px) {

    .genre_lst .gnr_list_item {
        flex: 0 0 45% !important;
        width: 45% !important;
    }

    .genre_lst .gnr_list_item .name {
        position: absolute !important;
        top: 0 !important;
        left: 10px !important;
        right: auto !important;
        width: auto !important;
        max-width: calc(100% - 20px) !important;
        padding: 8px 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font: normal normal bold 13.6px/17px Montserrat !important;
    }

    .genre_lst .gnr_list_item .song_count {
        position: absolute !important;
        top: 32px !important;
        left: 10px !important;
        right: auto !important;
        width: auto !important;
        padding: 0 !important;
        text-align: left !important;
        font: normal normal 500 8px/10px Montserrat !important;
    }
}
/* X2O2 User Radio/Stream title prefix */
.x2o2-stream-prefix{
    display:inline-block;
    color:#ff3b30;
    font-size:.72em;
    line-height:1;
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
    vertical-align:baseline;
}
.x2o2-stream-prefix::before{
    content:"●";
    color:#ff3b30;
    font-size:.8em;
    margin-right:3px;
    vertical-align:baseline;
}
/* X2O2 Top Songs: align artist names to the right edge of the artist column. */
@media (min-width: 992px) {
    body.ltr .store_songs .short_list_cont .s_lsongs_child .second .second_bb {
        text-align: right;
    }
}


/* X2O2 Premium Package Cards - visual-only enhancement */
.x2o2_pro_page .x2o2_pro_intro {
    position: relative;
    max-width: 980px;
    margin: 0 auto 34px;
    padding: 8px 12px 0;
    text-align: center;
}
.x2o2_pro_page .x2o2_pro_kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.x2o2_pro_page .x2o2_pro_intro h3 {
    margin: 0 !important;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -.025em;
    color: #f5f5f7;
}
.x2o2_pro_page .x2o2_pro_subtitle {
    max-width: 680px;
    margin: 11px auto 0;
    color: rgba(255,255,255,.56);
    font-size: 14px;
    line-height: 1.6;
}
.x2o2_pro_page .x2o2_plan_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-left: -10px;
    margin-right: -10px;
}
.x2o2_pro_page .x2o2_plan_col {
    flex: 0 1 480px;
    width: min(480px, 100%);
    padding: 10px;
    margin: 0;
}
.x2o2_pro_page .x2o2_plan_card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    margin: 0 !important;
    padding: 32px 30px 28px !important;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px !important;
    background:
        radial-gradient(70% 45% at 50% 0%, rgba(255,126,24,.07), transparent 72%),
        linear-gradient(145deg, rgba(40,40,44,.98), rgba(28,28,31,.99));
    box-shadow:
        0 18px 50px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.x2o2_pro_page .x2o2_plan_card::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,140,0,.62), transparent);
    opacity: .7;
}
.x2o2_pro_page .x2o2_plan_card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -80px;
    bottom: -95px;
    border-radius: 50%;
    background: rgba(255,126,24,.09);
    filter: blur(14px);
    pointer-events: none;
}
.x2o2_pro_page .x2o2_plan_card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,132,28,.24);
    box-shadow:
        0 26px 60px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,132,28,.04),
        inset 0 1px 0 rgba(255,255,255,.045);
}
.x2o2_pro_page .x2o2_plan_card_free {
    background:
        radial-gradient(80% 45% at 20% 0%, rgba(255,255,255,.045), transparent 72%),
        linear-gradient(145deg, rgba(43,43,47,.98), rgba(29,29,32,.99));
}
.x2o2_pro_page .x2o2_plan_card_free::after { background: rgba(255,255,255,.045); }
.x2o2_pro_page .x2o2_plan_card_premium {
    border-color: rgba(255,126,24,.19);
    background:
        radial-gradient(85% 55% at 50% 0%, rgba(255,126,24,.13), transparent 72%),
        linear-gradient(145deg, rgba(50,42,37,.98), rgba(29,29,32,.99));
}
.x2o2_pro_page .x2o2_plan_card_premium::before {
    background: linear-gradient(90deg, transparent, rgba(255,146,52,.9), transparent);
}
.x2o2_pro_page .price_plans h5 {
    position: relative;
    z-index: 1;
    margin: 0 92px 18px 0 !important;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.x2o2_pro_page .x2o2_plan_card_free h5::after,
.x2o2_pro_page .x2o2_plan_card_premium h5::after {
    position: absolute;
    right: -82px;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}
.x2o2_pro_page .x2o2_plan_card_free h5::after {
    content: "FREE";
    color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
}
.x2o2_pro_page .x2o2_plan_card_premium h5::after {
    content: "PREMIUM";
    color: #fff;
    border: 1px solid rgba(255,134,32,.35);
    background: rgba(255,126,24,.10);
}
.x2o2_pro_page .pricing_p_price {
    position: relative;
    z-index: 1;
    min-height: 70px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 0;
    color: #fff;
}
.x2o2_pro_page .pricing_p_price sup {
    position: relative;
    top: auto;
    margin-right: 2px;
    font-size: 17px;
    color: rgba(255,255,255,.68);
}
.x2o2_pro_page .pricing_p_price b {
    background: none;
    font-size: 54px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.045em;
    background-image: linear-gradient(to top, rgba(255,132,28,.42) 14%, transparent 14.5%);
}
.x2o2_pro_page .pricing_p_price sub {
    margin-left: 6px;
    font-size: 14px;
    color: rgba(255,255,255,.56);
    font-weight: 500;
    bottom: 0;
}
.x2o2_pro_page .price_plans hr {
    margin: 22px 0 20px !important;
    border-color: rgba(255,255,255,.08) !important;
}
.x2o2_pro_page .price_plans .plan_body {
    position: relative;
    z-index: 1;
    margin-bottom: 28px !important;
    display: grid;
    gap: 7px;
}
.x2o2_pro_page .price_plans p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.45;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.x2o2_pro_page .price_plans p:hover {
    transform: translateX(2px);
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.032);
}
.x2o2_pro_page .price_plans p svg {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}
.x2o2_pro_page .button_go_pro {
    position: relative;
    z-index: 2;
    margin-top: auto !important;
}
.x2o2_pro_page .x2o2_plan_button {
    width: 100%;
    min-height: 52px;
    line-height: 1 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.x2o2_pro_page .x2o2_plan_button:hover {
    transform: translateY(-1px);
}
.x2o2_pro_page .x2o2_plan_button_current {
    color: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: none !important;
}
.x2o2_pro_page .x2o2_plan_button_upgrade {
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff9a2b, #ff7715) !important;
    box-shadow: 0 10px 25px rgba(255,126,24,.18) !important;
}
.x2o2_pro_page .x2o2_plan_button_upgrade:hover {
    background: linear-gradient(135deg, #ffa43b, #ff7b1c) !important;
    box-shadow: 0 14px 30px rgba(255,126,24,.25) !important;
}
.x2o2_pro_page .pro_features {
    margin-top: 28px;
}
.x2o2_pro_page .pro_features .p_feat_innr {
    color: rgba(255,255,255,.55);
    font-size: 13px;
}
.x2o2_pro_page .pro_features .p_feat_innr svg {
    width: 38px;
    height: 38px;
}
@media (max-width: 767px) {
    .x2o2_pro_page .x2o2_plan_grid { margin-left: -6px; margin-right: -6px; }
    .x2o2_pro_page .x2o2_plan_col { flex-basis: 100%; padding: 6px; }
    .x2o2_pro_page .x2o2_plan_card { min-height: 0; padding: 26px 22px 22px !important; }
    .x2o2_pro_page .x2o2_pro_intro { margin-bottom: 22px; }
    .x2o2_pro_page .x2o2_pro_subtitle { font-size: 13px; }
    .x2o2_pro_page .pricing_p_price b { font-size: 48px; }
}


/* X2O2 Modern Messages Drawer v1.0 */
.x2o2-messages-page,
.x2o2-messages-page * { box-sizing: border-box; }
.x2o2-messages-page {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.x2o2-chat-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.46);
    opacity: 0;
    pointer-events: auto;
    transition: opacity .22s ease;
}
.x2o2-chat-drawer {
    position: absolute;
    top: 74px;
    right: 18px;
    bottom: 18px;
    width: min(960px, calc(100vw - 36px));
    min-width: 320px;
    overflow: hidden;
    pointer-events: auto;
    color: #f4f4f5;
    background: #111113;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.02), 0 0 45px color-mix(in srgb, var(--main) 12%, transparent);
    transform: translateX(calc(100% + 28px));
    opacity: .96;
    transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.x2o2-chat-drawer.is-ready { transform: translateX(0); opacity: 1; }
.x2o2-chat-backdrop.is-visible { opacity: 1; }
.x2o2-chat-layout { display: grid; grid-template-columns: 338px minmax(0,1fr); height: 100%; min-height: 0; }
.x2o2-chat-people,
.x2o2-chat-conversation { min-width: 0; min-height: 0; }
.x2o2-chat-people { background: #151517; border-right: 1px solid rgba(255,255,255,.07); }
.x2o2-chat-drawer:not(.has-chat) { width:min(430px, calc(100vw - 36px)); }
.x2o2-chat-drawer:not(.has-chat) .x2o2-chat-layout { grid-template-columns:1fr; }
.x2o2-chat-drawer:not(.has-chat) .x2o2-chat-conversation { display:none; }

.x2o2-chat-conversation { display: flex; flex-direction: column; background: #0f0f11; }

.x2o2-messages-sidebar { height: 100%; display: flex; flex-direction: column; overflow: hidden !important; padding: 0 !important; background: transparent !important; }
.x2o2-chat-list-head { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:72px; padding: 14px 14px 12px 18px; border-bottom:1px solid rgba(255,255,255,.065); background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)); }
.x2o2-chat-list-title { display:flex; flex-direction:column; min-width:0; }
.x2o2-chat-list-title strong { color:#fff; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.x2o2-chat-list-title span { margin-top:5px; color:rgba(255,255,255,.42); font-size:11px; line-height:1.2; }
.x2o2-chat-close,
.x2o2-chat-back,
.x2o2-chat-delete,
.x2o2-chat-tool,
.x2o2-chat-send { -webkit-tap-highlight-color: transparent; }
.x2o2-chat-close { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; padding:0; border:1px solid rgba(255,255,255,.08); border-radius:12px; color:#aaa; background:rgba(255,255,255,.035); cursor:pointer; transition:all .16s ease; }
.x2o2-chat-close svg { width:18px; height:18px; }
.x2o2-chat-close:hover { color:#fff; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.075); }

.x2o2-chat-search { position:relative !important; flex:0 0 auto; margin:12px 12px 8px; padding:0 !important; border:0 !important; }
.x2o2-chat-search input { width:100% !important; height:42px !important; padding:0 14px 0 42px !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:13px !important; outline:none !important; background:#202023 !important; color:#f5f5f5 !important; font-size:13px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important; }
.x2o2-chat-search input::placeholder { color:rgba(255,255,255,.36) !important; }
.x2o2-chat-search input:focus { border-color: color-mix(in srgb, var(--main) 58%, rgba(255,255,255,.08)) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--main) 12%, transparent) !important; }
.x2o2-chat-search > svg { position:absolute !important; left:14px !important; top:11px !important; width:19px !important; height:19px !important; margin:0 !important; color:rgba(255,255,255,.44); }
.x2o2-search-spin { animation:x2o2-spin .8s linear infinite; transform-origin:center; }
.x2o2-chat-mark-read { width:calc(100% - 24px); min-height:38px; margin:0 12px 8px; padding:0 12px; display:flex; align-items:center; justify-content:flex-start; gap:9px; border:1px solid rgba(255,255,255,.06); border-radius:11px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.65); font-size:11px; font-weight:600; cursor:pointer; transition:all .16s ease; }
.x2o2-chat-mark-read svg { width:17px; height:17px; flex:0 0 17px; }
.x2o2-chat-mark-read:hover { color:#fff; background:rgba(255,255,255,.065); }
.x2o2-chat-mark-read .x2o2-spin { animation:x2o2-spin .8s linear infinite; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-dasharray:32 16; }

.x2o2-messages-sidebar > ul.list-group { flex:1 1 auto; min-height:0; height:auto !important; overflow-y:auto; overflow-x:hidden; margin:0 !important; padding:2px 8px 14px !important; list-style:none; scrollbar-width:thin; background:transparent !important; }
.x2o2-messages-sidebar > ul.list-group::-webkit-scrollbar { width:6px; }
.x2o2-messages-sidebar > ul.list-group::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:10px; }
.x2o2-messages-sidebar > ul.list-group > li.user-list { height:auto !important; min-height:76px; margin:2px 0 !important; padding:0 !important; border-radius:13px !important; background:transparent !important; box-shadow:none !important; }
.x2o2-messages-sidebar > ul.list-group > li.user-list:hover { background:rgba(255,255,255,.045) !important; }
.x2o2-messages-sidebar > ul.list-group > li.user-list.is-active { background: color-mix(in srgb, var(--main) 13%, rgba(255,255,255,.03)) !important; }
.x2o2-messages-sidebar li .list-innr { display:flex !important; align-items:center !important; gap:12px; min-height:76px; padding:10px 10px !important; color:#fff !important; border:0; }
.x2o2-messages-sidebar li .list-innr:focus-visible { outline:2px solid color-mix(in srgb, var(--main) 70%, #fff); outline-offset:-2px; }
.x2o2-messages-sidebar li .list-innr .user-avatar { float:none !important; width:52px !important; height:52px !important; min-width:52px !important; margin:0 !important; position:relative; }
.x2o2-messages-sidebar li .list-innr .user-avatar:after { content:""; position:absolute; inset:-2px; border-radius:50%; border:1px solid rgba(255,255,255,.08); pointer-events:none; }
.x2o2-messages-sidebar li .list-innr .user-avatar img { display:block; width:52px !important; height:52px !important; border-radius:50% !important; object-fit:cover; }
.x2o2-contact-main { min-width:0; flex:1 1 auto; }
.x2o2-contact-topline, .x2o2-contact-bottomline { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.x2o2-contact-topline { margin-bottom:5px; }
.x2o2-contact-topline .user-name { margin:0 !important; display:block; min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f2f2f2 !important; font-size:14px !important; font-weight:650 !important; line-height:1.15; }
.x2o2-contact-topline .user-last-time { float:none !important; flex:0 0 auto; margin:0 !important; color:rgba(255,255,255,.34) !important; font-size:10px !important; white-space:nowrap; }
.x2o2-contact-bottomline .user-last-message { min-width:0; flex:1 1 auto; margin:0 !important; color:rgba(255,255,255,.46) !important; font-size:12px !important; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.x2o2-contact-bottomline .countunseen { float:none !important; flex:0 0 auto; min-width:21px; height:21px; margin:0 !important; padding:0 6px !important; display:inline-flex !important; align-items:center; justify-content:center; border-radius:999px !important; background:var(--main) !important; color:#fff !important; font-size:10px !important; font-weight:700; }
.x2o2-contact-bottomline .countunseen:empty { display:none !important; }
.x2o2-contact-main + .username { display:none !important; }

.x2o2-chat-header { flex:0 0 70px; min-height:70px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.065); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)); }
.x2o2-chat-back { width:38px; height:38px; min-width:38px; display:none; align-items:center; justify-content:center; padding:0; border:0; border-radius:11px; background:transparent; color:#aaa; cursor:pointer; }
.x2o2-chat-back svg { width:22px; height:22px; }
.x2o2-chat-back:hover { background:rgba(255,255,255,.06); color:#fff; }
.x2o2-chat-header-user { min-width:0; flex:1 1 auto; }
.x2o2-chat-user-link { min-width:0; display:flex; align-items:center; gap:11px; color:inherit !important; text-decoration:none !important; }
.x2o2-chat-header-user > :not(.x2o2-chat-user-link) { min-width:0; display:flex; align-items:center; gap:11px; }
.x2o2-chat-avatar { width:44px; height:44px; min-width:44px; }
.x2o2-chat-avatar img { display:block; width:44px; height:44px; object-fit:cover; border-radius:50%; background:#202023; box-shadow:0 0 0 2px rgba(255,255,255,.05); }
.x2o2-chat-user-meta { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.x2o2-chat-user-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:14px; line-height:1.15; font-weight:700; }
.x2o2-chat-user-subtitle { margin-top:4px; color:rgba(255,255,255,.38); font-size:10px; line-height:1; }
.x2o2-chat-header-actions { flex:0 0 auto; display:flex; align-items:center; }
.x2o2-chat-delete { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:11px; background:transparent; color:rgba(255,255,255,.42); cursor:pointer; }
.x2o2-chat-delete svg { width:19px; height:19px; }
.x2o2-chat-delete:hover { background:rgba(255,70,70,.09); color:#ff6b6b; }
.x2o2-chat-delete.is-busy { opacity:.45; pointer-events:none; animation:x2o2-pulse .9s ease-in-out infinite; }

.x2o2-chat-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#0d0d0f; }
.x2o2-chat-body .pt_msg_area { flex:1 1 auto; min-height:0; height:auto !important; padding:18px 18px 14px !important; overflow-y:auto !important; overflow-x:hidden; background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--main) 3%, transparent) 0, transparent 35%),
    radial-gradient(circle at 90% 100%, rgba(255,255,255,.018) 0, transparent 42%),
    #0d0d0f !important; scrollbar-width:thin; }
.x2o2-chat-body .pt_msg_area::-webkit-scrollbar { width:6px; }
.x2o2-chat-body .pt_msg_area::-webkit-scrollbar-thumb { background:rgba(255,255,255,.11); border-radius:10px; }
.x2o2-chat-body .messages { display:flex; flex-direction:column; gap:2px; min-height:100%; justify-content:flex-end; }
.x2o2-chat-body .message { display:flex !important; align-items:flex-end; width:100% !important; max-width:none !important; margin:2px 0 !important; float:none !important; position:relative; }
.x2o2-chat-body .message.pull-left { justify-content:flex-start; }
.x2o2-chat-body .message.pull-right { justify-content:flex-end; }
.x2o2-chat-body .message .user-avatar { width:30px !important; height:30px !important; min-width:30px !important; margin-right:7px !important; float:none !important; align-self:flex-end; }
.x2o2-chat-body .message .user-avatar img { display:block; width:30px !important; height:30px !important; border-radius:50%; object-fit:cover; }
.x2o2-chat-body .x2o2-bubble-wrap { display:flex; align-items:flex-end; min-width:0; max-width:min(76%, 570px); position:relative; }
.x2o2-chat-body .message.pull-right .x2o2-bubble-wrap { justify-content:flex-end; flex-direction:column; align-items:flex-end; }
.x2o2-chat-body .message.pull-left .x2o2-bubble-wrap { justify-content:flex-start; }
.x2o2-chat-body .message .user-message { width:auto !important; max-width:100%; margin:0 !important; padding:9px 12px !important; border-radius:15px !important; border:1px solid rgba(255,255,255,.055); background:#202023 !important; color:#f1f1f2 !important; box-shadow:0 5px 16px rgba(0,0,0,.16); word-break:break-word; overflow-wrap:anywhere; font-size:13px; line-height:1.45; }
.x2o2-chat-body .message.pull-left .user-message { border-bottom-left-radius:5px !important; }
.x2o2-chat-body .message.pull-right .user-message { border:0; border-bottom-right-radius:5px !important; background:var(--main) !important; color:#fff !important; box-shadow:0 5px 18px color-mix(in srgb, var(--main) 18%, rgba(0,0,0,.25)); }
.x2o2-chat-body .message .user-message img { max-width:min(280px, 100%); height:auto; display:block; margin:-9px -12px !important; border-radius:12px; }
.x2o2-chat-body .message-status { display:block !important; margin-top:-16px !important; margin-right:7px !important; margin-bottom:3px !important; padding:0 !important; font-size:10px !important; line-height:1 !important; opacity:.78 !important; color:rgba(255,255,255,.92) !important; position:relative; z-index:2; }
.x2o2-chat-body .message-checks { letter-spacing:-2px; font-weight:700; }
.x2o2-chat-body .message.pull-left + .message.pull-right,
.x2o2-chat-body .message.pull-right + .message.pull-left { margin-top:8px !important; }
.x2o2-chat-body .message.pull-left + .message.pull-left .user-avatar { visibility:hidden; }
.x2o2-chat-body .empty_state { inset:auto !important; position:absolute; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:min(300px,90%); padding:25px !important; text-align:center; }
.x2o2-chat-body .empty_state svg { width:72px !important; height:72px !important; margin:0 auto 14px !important; opacity:.3 !important; }
.x2o2-chat-body .empty_state p { margin:0; color:rgba(255,255,255,.4); font-size:12px; }

#load-more-messages { position:absolute !important; top:54px !important; left:50% !important; transform:translateX(-50%); margin:0 !important; width:36px !important; height:36px !important; display:none; border:1px solid rgba(255,255,255,.08) !important; border-radius:50% !important; background:#1f1f22 !important; color:#cfcfd1 !important; box-shadow:0 10px 26px rgba(0,0,0,.26) !important; z-index:20; }
#load-more-messages:hover { transform:translateX(-50%) translateY(-2px) !important; background:#262629 !important; }

.x2o2-chat-composer { flex:0 0 auto; padding:9px 10px 10px; border-top:1px solid rgba(255,255,255,.055); background:#121214; }
.x2o2-chat-composer form { width:100%; display:flex; align-items:flex-end; gap:7px; min-width:0; }
.x2o2-chat-composer textarea { flex:1 1 auto !important; min-width:0; min-height:42px !important; max-height:112px !important; width:auto !important; height:42px; resize:none !important; overflow-y:auto; margin:0 !important; padding:11px 14px !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:14px !important; outline:none !important; background:#202023 !important; color:#fff !important; font-size:13px !important; line-height:20px !important; box-shadow:none !important; transition:border-color .16s ease, box-shadow .16s ease; }
.x2o2-chat-composer textarea:focus { border-color:color-mix(in srgb, var(--main) 58%, rgba(255,255,255,.08)) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--main) 10%, transparent) !important; }
.x2o2-chat-composer textarea::placeholder { color:rgba(255,255,255,.34) !important; }
.x2o2-chat-tool,
.x2o2-chat-send { flex:0 0 42px; width:42px; height:42px; display:inline-flex !important; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.06); border-radius:13px; background:#1b1b1e; color:rgba(255,255,255,.62); cursor:pointer; transition:all .16s ease; }
.x2o2-chat-tool button { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border:0; padding:0; border-radius:inherit; background:transparent; color:inherit; cursor:pointer; }
.x2o2-chat-tool svg,
.x2o2-chat-send svg { width:19px; height:19px; }
.x2o2-chat-tool:hover { color:#fff; background:#242427; border-color:rgba(255,255,255,.11); }
.x2o2-chat-send { border:0; background:var(--main); color:#fff; box-shadow:0 8px 22px color-mix(in srgb, var(--main) 20%, rgba(0,0,0,.25)); }
.x2o2-chat-send:hover { filter:brightness(1.08); transform:translateY(-1px); }
.x2o2-chat-send:active { transform:translateY(0); }
.x2o2-chat-emoji .dropdown-toggle:after { display:none !important; }
.x2o2-chat-emoji > .dropdown-menu { left:0 !important; bottom:calc(100% + 8px) !important; top:auto !important; min-width:278px !important; max-width:320px; max-height:285px !important; padding:9px !important; overflow:auto; border:1px solid rgba(255,255,255,.08) !important; border-radius:15px !important; background:#1b1b1e !important; box-shadow:0 18px 48px rgba(0,0,0,.45) !important; }
.x2o2-chat-emoji .dropdown-menu .emoji_holder { display:inline-flex !important; align-items:center; justify-content:center; width:34px !important; height:34px !important; margin:1px !important; border-radius:10px; font-size:21px !important; cursor:pointer; transition:background .12s ease, transform .12s ease; }
.x2o2-chat-emoji .dropdown-menu .emoji_holder:hover { background:rgba(255,255,255,.07); transform:scale(1.05); }

@keyframes x2o2-spin { to { transform:rotate(360deg); } }
@keyframes x2o2-pulse { 50% { opacity:.45; } }

@media (max-width: 980px) {
    .x2o2-chat-drawer { width:min(860px, calc(100vw - 28px)); right:14px; }
}

@media (max-width: 767px) {
    .x2o2-messages-page { z-index:100000; }
    .x2o2-chat-backdrop { background:rgba(0,0,0,.52); }
    .x2o2-chat-drawer {
        top:8px;
        right:8px;
        bottom:8px;
        width:calc(100vw - 16px);
        min-width:0;
        border-radius:17px;
        transform:translateX(calc(100% + 16px));
    }
    .x2o2-chat-layout { display:block; position:relative; overflow:hidden; }
    .x2o2-chat-people,
    .x2o2-chat-conversation { position:absolute; inset:0; width:100%; height:100%; transition:transform .24s cubic-bezier(.22,.61,.36,1); }
    .x2o2-chat-people { border-right:0; transform:translateX(0); }
    .x2o2-chat-conversation { transform:translateX(100%); }
    .x2o2-chat-drawer.has-chat.is-chat-view .x2o2-chat-people { transform:translateX(-100%); }
    .x2o2-chat-drawer.has-chat.is-chat-view .x2o2-chat-conversation { transform:translateX(0); }
    .x2o2-chat-drawer:not(.has-chat) .x2o2-chat-conversation { display:none; }
    .x2o2-chat-list-head { min-height:64px; padding:10px 12px 10px 14px; }
    .x2o2-chat-list-title strong { font-size:20px; }
    .x2o2-chat-list-title span { display:none; }
    .x2o2-chat-close { width:36px; height:36px; flex-basis:36px; }
    .x2o2-chat-search { margin:9px 10px 7px; }
    .x2o2-chat-search input { height:41px !important; }
    .x2o2-chat-mark-read { width:calc(100% - 20px); margin:0 10px 6px; }
    .x2o2-messages-sidebar > ul.list-group { padding-left:5px !important; padding-right:5px !important; }
    .x2o2-chat-header { flex-basis:62px; min-height:62px; padding:8px 9px; gap:7px; }
    .x2o2-chat-back { display:inline-flex; }
    .x2o2-chat-avatar, .x2o2-chat-avatar img { width:40px; height:40px; min-width:40px; }
    .x2o2-chat-user-name { font-size:13px; }
    .x2o2-chat-user-subtitle { font-size:9px; }
    .x2o2-chat-delete { width:36px; height:36px; }
    .x2o2-chat-body .pt_msg_area { padding:12px 10px 10px !important; }
    .x2o2-chat-body .x2o2-bubble-wrap { max-width:84%; }
    .x2o2-chat-body .message .user-avatar { width:27px !important; height:27px !important; min-width:27px !important; margin-right:6px !important; }
    .x2o2-chat-body .message .user-avatar img { width:27px !important; height:27px !important; }
    .x2o2-chat-body .message .user-message { padding:8px 10px !important; font-size:12.5px; line-height:1.42; border-radius:14px !important; }
    .x2o2-chat-composer { padding:7px 7px calc(7px + env(safe-area-inset-bottom)); }
    .x2o2-chat-composer form { gap:5px; }
    .x2o2-chat-composer textarea { min-height:40px !important; max-height:100px !important; height:40px; padding:9px 11px !important; border-radius:13px !important; font-size:13px !important; }
    .x2o2-chat-tool, .x2o2-chat-send { flex-basis:40px; width:40px; height:40px; border-radius:12px; }
    .x2o2-chat-tool svg, .x2o2-chat-send svg { width:18px; height:18px; }
    .x2o2-chat-emoji > .dropdown-menu { position:fixed !important; left:8px !important; right:8px !important; bottom:62px !important; width:auto !important; max-width:none !important; max-height:min(42vh,300px) !important; }
    #load-more-messages { top:48px !important; width:34px !important; height:34px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .x2o2-chat-drawer,
    .x2o2-chat-backdrop,
    .x2o2-chat-people,
    .x2o2-chat-conversation { transition:none !important; }
}


/* X2O2 Modern Messages: override the older mobile composer rules that came before this drawer. */
@media (max-width: 767px) {
    #new-message-form {
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
    }
    #new-message-form > textarea {
        order: 1 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #new-message-form > span {
        order: 2 !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
    }
    #new-message-form #send-button {
        order: 2 !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }
    .x2o2-chat-drawer:not(.has-chat) {
        width: calc(100vw - 16px) !important;
    }
}

/* 1. Modern standard (Firefox) */
textarea#new-message {
  scrollbar-color: #4a4a4d #202023; /* thumb color, track color */
  scrollbar-width: thin;
}

/* 2. Chrome, Safari, and Edge */
textarea#new-message::-webkit-scrollbar {
  width: 8px;
}

textarea#new-message::-webkit-scrollbar-track {
  background: #202023; /* Match your background-color */
}

textarea#new-message::-webkit-scrollbar-thumb {
  background-color: #4a4a4d; /* Dark grey thumb */
  border-radius: 10px;
  border: 2px solid #202023; /* Creates a padding effect around the thumb */
}

textarea#new-message::-webkit-scrollbar-thumb:hover {
  background-color: #5a5a5d; /* Slightly lighter on hover */
}

/* ================================================================
   X2O2 AUREL INTEREST CHIPS — AUREL-SIZED PASS
   Slightly more breathing room than the compact pass so the
   Interest panel visually matches the height of the settings sidebar.
   ================================================================ */
.sett_page .st_content .ma_interest {
    width: 100%;
}

.sett_page .st_content .ma_interest_innr {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.sett_page .st_content .ma_interest_list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    gap: 9px 9px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sett_page .st_content .ma_interest_list > li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

.sett_page .st_content .ma_interest_list > li > input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

.sett_page .st_content .ma_interest_list > li > label {
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap !important;
    cursor: pointer;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -1px 0 rgba(0,0,0,.24),
        0 4px 12px rgba(0,0,0,.20) !important;
    transform: translateZ(0);
    transition:
        transform .16s cubic-bezier(.2,.7,.2,1),
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.sett_page .st_content .ma_interest_list > li > label:hover {
    transform: translateY(-2px) scale(1.015) !important;
    border-color: rgba(255,122,24,.46) !important;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,168,82,.18), transparent 34%),
        linear-gradient(180deg, rgba(255,122,24,.14), rgba(255,122,24,.05)) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(0,0,0,.24),
        0 7px 18px rgba(255,122,24,.12),
        0 5px 14px rgba(0,0,0,.24) !important;
}

.sett_page .st_content .ma_interest_list > li > label:active {
    transform: translateY(0) scale(.975) !important;
}

.sett_page .st_content .ma_interest_list > li > input[type="checkbox"]:checked + label {
    color: #fff !important;
    border-color: rgba(255,176,104,.78) !important;
    background:
        radial-gradient(circle at 25% 15%, rgba(255,255,255,.24), transparent 34%),
        linear-gradient(180deg, #ff9137 0%, #ff6d17 54%, #ef5d0e 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -2px 0 rgba(155,48,0,.22),
        0 7px 18px rgba(255,106,20,.24),
        0 0 0 1px rgba(255,138,36,.10) !important;
}

.sett_page .st_content .ma_interest_list > li > input[type="checkbox"]:checked + label:hover {
    transform: translateY(-2px) scale(1.015) !important;
    border-color: rgba(255,208,164,.95) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -2px 0 rgba(155,48,0,.22),
        0 10px 24px rgba(255,106,20,.30),
        0 0 18px rgba(255,122,24,.10) !important;
}

@media (max-width: 767px) {
    .sett_page .st_content .ma_interest_list {
        gap: 8px 8px !important;
    }

    .sett_page .st_content .ma_interest_list > li > label {
        min-height: 38px !important;
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sett_page .st_content .ma_interest_list > li > label {
        transition: none !important;
    }
}

/* ================================================================
   X2O2 AUREL INTEREST — EQUAL HEIGHT PASS
   Makes the settings content panel and the left settings sidebar
   occupy the same desktop height without changing functionality.
   ================================================================ */
@media (min-width: 901px) {
    .ma_page_content .sett_page {
        align-items: stretch !important;
    }

    .ma_page_content .sett_page > .col-md-4,
    .ma_page_content .sett_page > .col-md-8 {
        display: flex !important;
        align-self: stretch !important;
    }

    .ma_page_content .sett_page .st_sidebar,
    .ma_page_content .sett_page .st_content {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .ma_page_content .sett_page .st_sidebar {
        align-self: stretch !important;
    }

    .ma_page_content .sett_page .st_content {
        align-self: stretch !important;
    }
}

@media (max-width: 900px) {
    .ma_page_content .sett_page .st_sidebar,
    .ma_page_content .sett_page .st_content {
        height: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ma_page_content .sett_page .st_sidebar,
    .ma_page_content .sett_page .st_content {
        transition: none !important;
    }
}

.x2o2-bank-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 106, 0, .16);
    border-radius: 20px;
    background: linear-gradient(180deg, #1b1818 0%, #111113 100%);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

.x2o2-bank-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.x2o2-bank-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255, 106, 0, .1);
    color: #ff6a00;
    font-size: 18px;
}

.x2o2-bank-title h4 {
    margin: 0;
    color: #f5f2ee;
    font-size: 17px;
    font-weight: 700;
}

.x2o2-bank-title p {
    margin: 4px 0 0;
    color: #8e8a86;
    font-size: 12px;
}

.x2o2-bank-body {
    padding: 20px 22px 22px;
}

.x2o2-bank-notice,
.x2o2-bank-warning {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 14px;
}

.x2o2-bank-notice {
    margin-bottom: 18px;
    background: rgba(255, 106, 0, .06);
    border: 1px solid rgba(255, 106, 0, .1);
}

.x2o2-bank-notice > i,
.x2o2-bank-warning > i {
    margin-top: 2px;
    color: #ff6a00;
}

.x2o2-bank-notice strong {
    display: block;
    margin-bottom: 3px;
    color: #eee;
    font-size: 13px;
}

.x2o2-bank-notice p {
    margin: 0;
    color: #918d88;
    font-size: 12px;
    line-height: 1.5;
}

.x2o2-bank-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.x2o2-bank-detail {
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
}

.x2o2-bank-highlight {
    border-color: rgba(255, 106, 0, .2);
    background: rgba(255, 106, 0, .055);
}

.x2o2-bank-label {
    display: block;
    margin-bottom: 6px;
    color: #85817d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.x2o2-bank-detail strong {
    display: block;
    color: #f3f0ec;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.x2o2-bank-value {
    font-size: 16px !important;
    letter-spacing: .04em;
}

.x2o2-bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.x2o2-bank-grid .x2o2-bank-detail:last-child {
    grid-column: 1 / -1;
}

.x2o2-bank-warning {
    margin-top: 16px;
    background: rgba(255, 185, 70, .05);
    border: 1px solid rgba(255, 185, 70, .12);
    color: #8f8a84;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .x2o2-bank-header {
        padding: 17px 16px;
    }

    .x2o2-bank-body {
        padding: 16px;
    }

    .x2o2-bank-grid {
        grid-template-columns: 1fr;
    }

    .x2o2-bank-grid .x2o2-bank-detail:last-child {
        grid-column: auto;
    }

    .x2o2-bank-value {
        font-size: 14px !important;
    }
}