*{
    box-sizing:border-box;
    font-family:tahoma, sans-serif;
}

body{
    margin:0;
    background:#080b24;
    color:white;
    direction:rtl;
}

.app{
    max-width:430px;
    margin:auto;
    min-height:100vh;
    padding:20px;
}

header{
    text-align:center;
    margin-bottom:25px;
}

.logo{
    font-size:55px;
}

header h1{
    margin:5px 0;
    font-size:28px;
}

header p{
    color:#aaa;
}
 

.profile,
.wallet,
.menu button{
    background:#111735;
    border:1px solid #252b55;
    border-radius:20px;
    padding:20px;
    margin-bottom:15px;
    box-shadow:0 0 25px #0005;
}


.avatar{
    font-size:60px;
    text-align:center;
}

.profile{
    text-align:center;
}


.wallet{
    text-align:center;
    font-size:30px;
}

.wallet small{
    display:block;
    font-size:14px;
    color:#aaa;
}

.wallet b{
    display:block;
    font-size:35px;
    color:#ffd700;
}


.menu button{
    width:100%;
    color:white;
    font-size:18px;
    cursor:pointer;
}

.menu button:hover{
    border-color:#7c3aed;
}

.wheel-box{
    background:#111735;
    border:1px solid #252b55;
    border-radius:25px;
    padding:20px;
    text-align:center;
    margin-bottom:20px;
    box-shadow:0 0 30px #0008;
}

.wheel-box h2{
    margin-top:0;
}


.wheel-area{
    position:relative;
    width:320px;
    height:350px;
    margin:auto;
}


#wheelCanvas{
    margin-top:20px;
    border-radius:50%;
    background:#10142b;
    box-shadow:
    0 0 20px #ffd700,
    0 0 50px #7c3aed;
}


.pointer{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    font-size:35px;
    z-index:5;
}


.crown-center{
    position:absolute;
    top:155px;
    left:50%;
    transform:translateX(-50%);
    width:65px;
    height:65px;
    border-radius:50%;
    background:#080b24;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:35px;
    z-index:4;
}


#spinButton{
    width:90%;
    margin-top:10px;
    padding:15px;
    border:none;
    border-radius:15px;
    background:#7c3aed;
    color:white;
    font-size:18px;
}


#wheelResult{
    color:#ffd700;
    font-size:20px;
}


.avatar img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #7c3aed;
}


.support-link {
    display: block;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

/* Missions modal */
.missions-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);
}

.missions-modal.show {
    display: flex;
}

.missions-panel {
    width: min(100%, 460px);
    max-height: 85vh;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 20px;
    background: #161616;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.missions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.missions-header h2 {
    margin: 0;
}

.missions-close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.missions-description {
    margin: 0 0 16px;
    color: #bbb;
    font-size: 14px;
}

.missions-list {
    display: grid;
    gap: 12px;
}

.mission-card {
    padding: 15px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.mission-card h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.mission-completed {
    border-color: rgba(46, 204, 113, 0.45);
    opacity: 0.82;
}

.mission-reward {
    margin: 0 0 13px;
    color: #ffd54a;
    font-size: 14px;
}

.mission-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
}

.mission-actions button {
    min-height: 42px;
    padding: 9px;
    border: 0;
    border-radius: 11px;
    font-size: 13px;
    cursor: pointer;
}

.mission-join {
    background: #2aabee;
    color: #fff;
}

.mission-claim {
    background: linear-gradient(135deg, #f8d34f, #e7a915);
    color: #171717;
    font-weight: 700;
}

.mission-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.missions-loading,
.missions-empty,
.missions-error {
    padding: 20px 10px;
    text-align: center;
    color: #bbb;
}

.missions-error {
    color: #ff7373;
}

@media (max-width: 380px) {
    .mission-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== Wallet ===== */

.wallet-card{
    border:1px solid rgba(255,215,0,.25);
    border-radius:20px;
    padding:18px;
    background:#1b1b1b;
}

.wallet-input{
    width:100%;
    padding:14px;
    margin:10px 0;
    border-radius:12px;
    border:1px solid #3a3a3a;
    background:#262626;
    color:#fff;
    font-size:16px;
    box-sizing:border-box;
}

.wallet-input:focus{
    outline:none;
    border-color:#FFD54A;
}

.wallet-save-btn{
    width:100%;
    padding:14px;
    margin-top:10px;
    border:none;
    border-radius:12px;
    background:linear-gradient(90deg,#FFD54A,#F5B301);
    color:#111;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

.wallet-save-btn:hover{
    transform:translateY(-2px);
}

.wallet-divider{
    margin:22px 0;
    border:none;
    border-top:1px solid rgba(255,255,255,.08);
}

.withdraw-history .mission-card{
    background:#242424;
    border:1px solid rgba(255,215,0,.18);
    border-radius:16px;
    padding:16px;
    margin-top:12px;
    text-align:center;
}

.withdraw-history a{
    display:inline-block;
    margin-top:12px;
    padding:8px 14px;
    background:#FFD54A;
    color:#111;
    text-decoration:none;
    border-radius:10px;
    font-weight:bold;
}

.withdraw-history a:hover{
    opacity:.9;
}

.wallet-status{
    margin-top:10px;
    text-align:center;
    font-weight:bold;
}

.leaderboard-card {
    position: relative;
    overflow: hidden;
    margin: 22px 14px;
    padding: 20px 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 213, 74, .16), transparent 40%),
        linear-gradient(145deg, #242424, #151515);
    border: 1px solid rgba(255, 215, 0, .32);
    border-radius: 22px;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.leaderboard-card::before {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 215, 0, .12);
    border-radius: 50%;
}

.leaderboard-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.leaderboard-crown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    font-size: 29px;
    background: linear-gradient(145deg, #ffd84f, #b88200);
    border: 1px solid rgba(255, 239, 156, .8);
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(255, 193, 7, .22);
}

.leaderboard-header h2 {
    margin: 0;
    color: #ffd84f;
    font-size: 19px;
    font-weight: 800;
}

.leaderboard-header p {
    margin: 5px 0 0;
    color: #999;
    font-size: 12px;
}

.leaderboard-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 15px;
}

.leaderboard-row.top-rank {
    background: linear-gradient(
        90deg,
        rgba(255, 215, 0, .13),
        rgba(255, 255, 255, .025)
    );
    border-color: rgba(255, 215, 0, .2);
}

.leaderboard-position {
    width: 42px;
    flex-shrink: 0;
    text-align: center;
    font-size: 23px;
    font-weight: 800;
}

.rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: #c5c5c5;
    background: #303030;
    border-radius: 9px;
    font-size: 13px;
}

.leaderboard-user {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
}

.leaderboard-user strong {
    overflow: hidden;
    color: #f2f2f2;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.leaderboard-user small {
    overflow: hidden;
    color: #858585;
    font-size: 11px;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.leaderboard-balance {
    flex-shrink: 0;
    text-align: right;
    direction: ltr;
}

.leaderboard-balance strong {
    display: block;
    color: #ffd84f;
    font-size: 14px;
}

.leaderboard-balance span {
    color: #8c8c8c;
    font-size: 10px;
}

.leaderboard-loading,
.leaderboard-empty,
.leaderboard-error {
    padding: 20px 10px;
    color: #999;
    text-align: center;
    font-size: 13px;
}

.leaderboard-error {
    color: #ff7777;
}

.leaderboard-card {
    position: relative;
    overflow: hidden;
    margin: 22px 14px;
    padding: 20px 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 213, 74, .16), transparent 40%),
        linear-gradient(145deg, #242424, #151515);
    border: 1px solid rgba(255, 215, 0, .32);
    border-radius: 22px;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.leaderboard-card::before {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 215, 0, .12);
    border-radius: 50%;
}

.leaderboard-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.leaderboard-crown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    font-size: 29px;
    background: linear-gradient(145deg, #ffd84f, #b88200);
    border: 1px solid rgba(255, 239, 156, .8);
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(255, 193, 7, .22);
}

.leaderboard-header h2 {
    margin: 0;
    color: #ffd84f;
    font-size: 19px;
    font-weight: 800;
}

.leaderboard-header p {
    margin: 5px 0 0;
    color: #999;
    font-size: 12px;
}

.leaderboard-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 15px;
}

.leaderboard-row.top-rank {
    background: linear-gradient(
        90deg,
        rgba(255, 215, 0, .13),
        rgba(255, 255, 255, .025)
    );
    border-color: rgba(255, 215, 0, .2);
}

.leaderboard-position {
    width: 42px;
    flex-shrink: 0;
    text-align: center;
    font-size: 23px;
    font-weight: 800;
}

.rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: #c5c5c5;
    background: #303030;
    border-radius: 9px;
    font-size: 13px;
}

.leaderboard-user {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
}

.leaderboard-user strong {
    overflow: hidden;
    color: #f2f2f2;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.leaderboard-user small {
    overflow: hidden;
    color: #858585;
    font-size: 11px;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.leaderboard-balance {
    flex-shrink: 0;
    text-align: right;
    direction: ltr;
}

.leaderboard-balance strong {
    display: block;
    color: #ffd84f;
    font-size: 14px;
}

.leaderboard-balance span {
    color: #8c8c8c;
    font-size: 10px;
}

.leaderboard-loading,
.leaderboard-empty,
.leaderboard-error {
    padding: 20px 10px;
    color: #999;
    text-align: center;
    font-size: 13px;
}

.leaderboard-error {
    color: #ff7777;
}

/* =========================
   My Rank Card
========================= */

.my-rank-card {
    position: relative;
    margin-top: 16px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 196, 61, 0.35);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 196, 61, 0.17),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(31, 25, 14, 0.96),
            rgba(12, 12, 12, 0.98)
        );
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.my-rank-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 193, 55, 0.1);
    filter: blur(20px);
    pointer-events: none;
}

.my-rank-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #ffd56a;
    font-size: 15px;
}

.my-rank-title span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 208, 91, 0.28);
    border-radius: 11px;
    background: rgba(255, 199, 62, 0.1);
    font-size: 18px;
}

.my-rank-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.my-rank-stats > div {
    min-width: 0;
    padding: 11px 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
}

.my-rank-stats small {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    white-space: nowrap;
}

.my-rank-stats strong {
    display: block;
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-rank-stats > div:first-child strong {
    color: #ffd15c;
    font-size: 18px;
}

.my-rank-loading,
.my-rank-error {
    position: relative;
    z-index: 1;
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.my-rank-error {
    color: #ff8e8e;
}

@media (max-width: 360px) {
    .my-rank-card {
        padding: 13px 10px;
    }

    .my-rank-stats {
        gap: 5px;
    }

    .my-rank-stats > div {
        padding: 10px 3px;
    }

    .my-rank-stats strong {
        font-size: 11px;
    }
}

/* =========================
   Hall Of Fame
========================= */

.hall-of-fame {
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 196, 61, .25);
    background: linear-gradient(145deg,#17120a,#0f0f0f);
}

.hall-of-fame-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.hall-of-fame-title span{
    font-size:30px;
}

.hall-of-fame-title strong{
    display:block;
    color:#ffd56a;
    font-size:17px;
}

.hall-of-fame-title small{
    color:#9c9c9c;
}

.hall-of-fame-list{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.hof-card{
    flex:1;
    text-align:center;
    padding:14px 10px;
    border-radius:18px;
    transition:.25s;
}

.hof-card:hover{
    transform:translateY(-3px);
}

.hof-1{
    background:linear-gradient(180deg,#4b3a08,#201700);
    border:1px solid #caa642;
    box-shadow:0 0 18px rgba(255,200,60,.25);
}

.hof-2{
    background:#232323;
    border:1px solid #8b8b8b;
}

.hof-3{
    background:#2d1d14;
    border:1px solid #8b5d3a;
}

.hof-medal{
    font-size:26px;
    margin-bottom:8px;
}

.hof-avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:bold;
    color:#fff;
    background:#444;
    border:3px solid rgba(255,255,255,.15);
}

.hof-1 .hof-avatar{
    border-color:#ffd54d;
}

.hof-name{
    margin-top:10px;
    color:#fff;
    font-weight:700;
    font-size:14px;
}

.hof-trx{
    margin-top:6px;
    color:#ffd54d;
    font-size:13px;
}

.hall-of-fame-loading{
    text-align:center;
    color:#999;
    padding:18px;
}

/* =========================
   ColonyClub Shop
========================= */
.shop-panel { max-height: 90vh; overflow-y: auto; }
.shop-info-card { margin-bottom: 14px; padding: 14px; border: 1px solid rgba(255,213,77,.25); border-radius: 16px; background: linear-gradient(145deg,rgba(255,213,77,.08),rgba(255,255,255,.025)); color: #eee; line-height: 1.8; }
.shop-info-card strong { display:block; margin-bottom:8px; color:#ffd54d; }
.shop-info-card p { margin:4px 0; font-size:13px; }
.shop-charge-note { margin-top:10px !important; color:#ffd54d; }
.shop-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.shop-tab { padding:11px; border:1px solid rgba(255,213,77,.2); border-radius:12px; background:#181818; color:#aaa; font-weight:700; cursor:pointer; }
.shop-tab.active { background:#ffd54d; color:#111; border-color:#ffd54d; }
.shop-products-list,.shop-orders-list { display:grid; gap:12px; }
.shop-product-card,.shop-order-card { padding:15px; border:1px solid rgba(255,213,77,.18); border-radius:17px; background:linear-gradient(145deg,#1b1b1b,#111); box-shadow:0 10px 25px rgba(0,0,0,.18); }
.shop-product-card h3,.shop-order-card h3 { margin:8px 0 6px; color:#fff; font-size:16px; }
.shop-product-card p,.shop-order-card p { margin:0; color:#aaa; font-size:13px; }
.shop-product-badge { color:#ffd54d; font-size:12px; font-weight:700; }
.shop-product-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.shop-product-footer strong { color:#ffd54d; font-size:16px; }
.shop-buy-btn,.shop-charge-btn { border:none; border-radius:11px; padding:10px 15px; background:#ffd54d; color:#111; font-weight:800; cursor:pointer; }
.shop-buy-btn:disabled { opacity:.55; cursor:wait; }
.shop-message { min-height:0; margin-bottom:10px; padding:0; border-radius:12px; font-size:13px; line-height:1.7; }
.shop-message:not(:empty) { padding:10px 12px; }
.shop-message.success { color:#9cffb2; background:rgba(42,190,87,.12); border:1px solid rgba(42,190,87,.25); }
.shop-message.error { color:#ffaaaa; background:rgba(255,70,70,.1); border:1px solid rgba(255,70,70,.22); }
.shop-message.loading { color:#ffd54d; background:rgba(255,213,77,.08); }
.shop-charge-btn { display:block; width:100%; margin-top:9px; }
.shop-loading,.shop-empty,.shop-error { padding:20px 10px; text-align:center; color:#999; }
.shop-error { color:#ff9d9d; }
.shop-order-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.shop-order-head strong { color:#ffd54d; }
.shop-order-head span { font-size:12px; color:#ddd; }
.shop-order-card small { display:block; margin-top:8px; color:#777; }
.shop-delivery { margin-top:12px; padding:11px; border-radius:12px; background:rgba(255,213,77,.07); border:1px solid rgba(255,213,77,.16); }
.shop-delivery strong { display:block; margin-bottom:6px; color:#ffd54d; }
.shop-delivery pre { margin:0; white-space:pre-wrap; word-break:break-word; color:#eee; font-family:inherit; font-size:12px; }


/* =========================================================
   ColonyClub Mini App Luxury V23
   Safe visual override - app.js logic remains untouched
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root{
    --cc-bg:#06070b;
    --cc-bg-2:#0a0c13;
    --cc-card:rgba(18,20,29,.88);
    --cc-card-2:rgba(12,14,21,.92);
    --cc-line:rgba(255,255,255,.075);
    --cc-line-gold:rgba(215,169,75,.26);
    --cc-gold:#d7a94b;
    --cc-gold-light:#f5d98e;
    --cc-gold-dark:#8a6320;
    --cc-text:#f8f3e8;
    --cc-muted:#8f95a7;
    --cc-success:#58d49d;
    --cc-danger:#ff7180;
    --cc-shadow:0 24px 70px rgba(0,0,0,.42);
}

*{
    box-sizing:border-box;
    font-family:"Vazirmatn",Tahoma,sans-serif;
}

html{
    background:var(--cc-bg);
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    color:var(--cc-text);
    direction:rtl;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 86% 4%,rgba(215,169,75,.11),transparent 22%),
        radial-gradient(circle at 10% 72%,rgba(69,53,128,.14),transparent 25%),
        linear-gradient(180deg,#07080d,#06070b 65%,#080910);
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(to bottom,#000,transparent 70%);
}

.cc-ambient{
    position:fixed;
    width:270px;
    height:270px;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    z-index:0;
    opacity:.16;
}
.cc-ambient-one{top:-100px;right:-80px;background:#c08a2f}
.cc-ambient-two{bottom:50px;left:-100px;background:#51438c}

.app.luxury-app{
    position:relative;
    z-index:1;
    max-width:460px;
    margin:auto;
    min-height:100vh;
    padding:18px 16px calc(112px + env(safe-area-inset-bottom));
}

.app-header{
    margin:0 0 16px;
    text-align:right;
}

.brand-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-badge{
    position:relative;
    flex:0 0 50px;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#191109;
    background:linear-gradient(145deg,var(--cc-gold-light),var(--cc-gold));
    box-shadow:0 12px 34px rgba(215,169,75,.25);
}

.brand-crown{font-size:25px;position:relative;z-index:2}
.brand-ring{
    position:absolute;
    inset:6px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:12px;
}

.brand-copy{min-width:0}
.brand-kicker,.section-kicker,.profile-label{
    display:block;
    color:var(--cc-gold);
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}
.brand-copy h1{
    margin:2px 0 0;
    color:var(--cc-text);
    font-size:18px;
    letter-spacing:.3px;
}
.brand-copy p{
    margin:2px 0 0;
    color:var(--cc-muted);
    font-size:10px;
}

.online-chip{
    margin-right:auto;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 9px;
    color:#91e4bd;
    border:1px solid rgba(88,212,157,.12);
    border-radius:10px;
    background:rgba(88,212,157,.06);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}
.online-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--cc-success);
    box-shadow:0 0 0 4px rgba(88,212,157,.09),0 0 15px rgba(88,212,157,.7);
    animation:ccPulse 1.8s infinite;
}
@keyframes ccPulse{50%{opacity:.45;transform:scale(.82)}}

.profile.luxury-profile,
.balance-card,
.wheel-box.luxury-wheel,
.leaderboard-card.luxury-leaderboard,
.my-rank-card{
    border:1px solid var(--cc-line);
    background:linear-gradient(155deg,var(--cc-card),var(--cc-card-2));
    box-shadow:var(--cc-shadow);
    backdrop-filter:blur(18px);
}

.profile.luxury-profile{
    padding:18px;
    margin-bottom:13px;
    border-radius:22px;
    text-align:right;
    overflow:hidden;
    position:relative;
}
.profile.luxury-profile:after{
    content:"";
    position:absolute;
    width:145px;height:145px;
    left:-55px;top:-70px;
    border-radius:50%;
    background:rgba(215,169,75,.08);
    filter:blur(2px);
}

.profile-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:14px;
}

.avatar{
    position:relative;
    flex:0 0 78px;
    width:78px;
    text-align:center;
}
.avatar img{
    width:78px;
    height:78px;
    display:block;
    object-fit:cover;
    border-radius:24px;
    border:2px solid rgba(245,217,142,.68);
    box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 25px rgba(215,169,75,.12);
}
.avatar-vip{
    position:absolute;
    right:-3px;
    bottom:-5px;
    padding:4px 8px;
    color:#1a1208;
    background:linear-gradient(135deg,var(--cc-gold-light),var(--cc-gold));
    border:3px solid #10131c;
    border-radius:8px;
    font-size:7px;
    font-weight:900;
    letter-spacing:1px;
}

.profile-copy{min-width:0}
.profile-copy h2{
    margin:4px 0 1px;
    font-size:21px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.profile-copy .username{
    color:var(--cc-muted);
    font-size:11px;
    direction:ltr;
    display:inline-block;
}

.last-prize-box{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:16px;
    padding:12px 13px;
    border:1px solid rgba(215,169,75,.13);
    border-radius:14px;
    background:rgba(215,169,75,.055);
}
.last-prize-icon{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    color:var(--cc-gold-light);
    background:rgba(215,169,75,.11);
}
.last-prize-box small{display:block;color:var(--cc-muted);font-size:9px}
.last-prize-box p{margin:2px 0 0!important;color:var(--cc-gold-light)!important;font-size:11px!important}

.balance-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    margin-bottom:13px;
}

.wallet{display:none!important}

.balance-card{
    min-width:0;
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:15px 12px;
    border-radius:17px;
    overflow:hidden;
}
.balance-card:after{
    content:"";
    position:absolute;
    width:70px;height:70px;
    left:-30px;bottom:-35px;
    border-radius:50%;
    background:rgba(215,169,75,.06);
}
.balance-icon{
    flex:0 0 34px;
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:11px;
    color:var(--cc-gold-light);
    background:rgba(215,169,75,.1);
    border:1px solid rgba(215,169,75,.12);
}
.balance-card small{display:block;color:var(--cc-muted);font-size:8px}
.balance-card b{
    display:block;
    margin-top:3px;
    color:var(--cc-gold-light);
    font-size:19px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:90px;
}
.balance-tag{
    position:absolute;
    top:9px;left:9px;
    color:#717789;
    font-size:7px;
    font-weight:900;
    letter-spacing:1px;
}

.wheel-box.luxury-wheel{
    position:relative;
    padding:18px;
    margin-bottom:13px;
    border-radius:23px;
    overflow:hidden;
}
.wheel-box.luxury-wheel:before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.25;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:25px 25px;
    mask-image:linear-gradient(to bottom,#000,transparent);
}

.section-heading,
.leaderboard-header{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:right;
}
.section-heading h2,
.leaderboard-header h2{
    margin:3px 0 1px;
    font-size:18px;
}
.section-heading p,
.leaderboard-header p{
    margin:0;
    color:var(--cc-muted);
    font-size:9px;
}
.section-icon,
.leaderboard-crown{
    width:43px;height:43px;
    display:grid;place-items:center;
    border-radius:13px;
    color:var(--cc-gold-light);
    background:rgba(215,169,75,.09);
    border:1px solid rgba(215,169,75,.13);
    font-size:20px;
}

.wheel-stage{
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    margin:15px 0 3px;
}
.wheel-halo{
    position:absolute;
    width:290px;height:290px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(215,169,75,.12),transparent 66%);
    filter:blur(7px);
}
.wheel-area{
    width:300px;
    height:326px;
    margin:auto;
    position:relative;
}
#wheelCanvas{
    width:300px!important;
    height:300px!important;
    margin-top:17px;
    border-radius:50%;
    background:#0d1018;
    box-shadow:
      0 0 0 7px rgba(215,169,75,.05),
      0 0 0 9px rgba(215,169,75,.24),
      0 18px 45px rgba(0,0,0,.55),
      0 0 35px rgba(215,169,75,.12);
}
.pointer{
    position:absolute;
    z-index:6;
    top:-1px;
    left:50%;
    transform:translateX(-50%);
    color:var(--cc-gold-light);
    text-shadow:0 0 18px rgba(215,169,75,.75);
    font-size:27px;
}
.crown-center{
    position:absolute;
    z-index:5;
    top:134px;
    left:50%;
    transform:translateX(-50%);
    width:67px;height:67px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#171008;
    background:radial-gradient(circle at 35% 28%,#fff0b8,var(--cc-gold) 58%,#805817);
    border:5px solid #0a0c13;
    box-shadow:0 0 35px rgba(215,169,75,.25);
}
.crown-center span{font-size:25px;line-height:22px}
.crown-center small{font-size:7px;font-weight:900;letter-spacing:1px}

#spinButton.gold-button{
    position:relative;
    z-index:2;
    overflow:hidden;
    width:100%;
    margin:4px 0 0;
    padding:14px;
    border:0;
    border-radius:14px;
    color:#181008;
    font-size:14px;
    font-weight:900;
    background:linear-gradient(135deg,var(--cc-gold-light),var(--cc-gold));
    box-shadow:0 13px 30px rgba(215,169,75,.2);
}
#spinButton.gold-button:active{transform:scale(.98)}
.button-shine{
    position:absolute;
    top:-70%;left:-35%;
    width:25%;height:240%;
    transform:rotate(25deg);
    background:rgba(255,255,255,.36);
    filter:blur(6px);
    animation:buttonShine 3s infinite;
}
@keyframes buttonShine{
    0%,55%{left:-40%}
    80%,100%{left:130%}
}
#wheelResult{
    position:relative;
    z-index:2;
    min-height:22px;
    margin:12px 0 2px;
    color:var(--cc-gold-light);
    font-size:14px;
    font-weight:700;
}
.daily-note{
    position:relative;
    z-index:2;
    color:#676d7d;
    font-size:9px;
}

.leaderboard-card.luxury-leaderboard{
    padding:18px;
    margin-bottom:13px;
    border-radius:22px;
}

.hall-of-fame{
    margin-top:15px;
    padding:14px;
    border:1px solid var(--cc-line-gold);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(215,169,75,.1),rgba(255,255,255,.018));
}
.hall-of-fame-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}
.hall-of-fame-title>span{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#181008;
    background:linear-gradient(135deg,var(--cc-gold-light),var(--cc-gold));
}
.hall-of-fame-title strong{display:block;color:var(--cc-gold-light);font-size:12px}
.hall-of-fame-title small{display:block;color:var(--cc-muted);font-size:8px;letter-spacing:1px}

.hall-of-fame-list,
.leaderboard-list{
    display:grid;
    gap:8px;
}
.hall-of-fame-loading,
.leaderboard-loading,
.my-rank-loading{
    padding:16px;
    text-align:center;
    color:var(--cc-muted);
    font-size:10px;
}

.leaderboard-list{margin-top:11px}
.leaderboard-item,
.hall-of-fame-item{
    border-color:var(--cc-line)!important;
    background:rgba(255,255,255,.025)!important;
    border-radius:13px!important;
}

.my-rank-card{
    margin-bottom:13px;
    padding:14px;
    border-radius:17px;
    border-color:var(--cc-line-gold);
}

.quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}
.quick-action,
.support-link.quick-action{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    min-height:58px;
    padding:12px;
    margin:0;
    color:var(--cc-text);
    text-decoration:none;
    border:1px solid var(--cc-line);
    border-radius:15px;
    background:linear-gradient(150deg,rgba(19,22,32,.9),rgba(11,13,20,.92));
    font-size:11px;
    cursor:pointer;
    box-shadow:0 13px 28px rgba(0,0,0,.2);
}
.quick-action:active{transform:scale(.98)}
.quick-icon{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    color:var(--cc-gold-light);
    background:rgba(215,169,75,.09);
    border:1px solid rgba(215,169,75,.12);
}

.menu{display:none!important}

.bottom-nav{
    position:fixed;
    z-index:900;
    right:50%;
    bottom:calc(10px + env(safe-area-inset-bottom));
    transform:translateX(50%);
    width:min(calc(100% - 24px),430px);
    height:68px;
    display:grid;
    grid-template-columns:1fr 1fr 1.05fr 1fr 1fr;
    align-items:center;
    padding:7px 8px;
    border:1px solid var(--cc-line-gold);
    border-radius:21px;
    background:rgba(10,12,18,.9);
    box-shadow:0 18px 55px rgba(0,0,0,.6);
    backdrop-filter:blur(22px);
}
.bottom-nav-item{
    height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#777d8f;
    border:0;
    background:transparent;
}
.bottom-nav-item span{font-size:18px}
.bottom-nav-item small{font-size:7px}
.bottom-nav-item.active{color:var(--cc-gold-light)}

.bottom-nav-spin{
    justify-self:center;
    width:54px;height:54px;
    transform:translateY(-17px);
    display:grid;place-items:center;
    border:5px solid #090b11;
    border-radius:18px;
    color:#181008;
    background:linear-gradient(145deg,var(--cc-gold-light),var(--cc-gold));
    box-shadow:0 12px 28px rgba(215,169,75,.3);
    font-size:25px;
}

/* Existing app.js generated modals - luxury skin */
.missions-modal,
.wallet-modal,
.shop-modal{
    background:rgba(0,0,0,.78)!important;
    backdrop-filter:blur(10px)!important;
}
.missions-panel,
.wallet-panel,
.shop-panel{
    border:1px solid var(--cc-line-gold)!important;
    border-radius:22px!important;
    color:var(--cc-text)!important;
    background:linear-gradient(155deg,#151822,#0b0d14)!important;
    box-shadow:0 25px 80px rgba(0,0,0,.62)!important;
}
.mission-card,
.withdraw-card,
.shop-product-card,
.shop-order-card{
    border-color:var(--cc-line)!important;
    background:rgba(255,255,255,.035)!important;
    border-radius:15px!important;
}
.mission-claim,
.shop-buy-btn,
#saveWalletButton,
#withdrawButton{
    color:#171008!important;
    background:linear-gradient(135deg,var(--cc-gold-light),var(--cc-gold))!important;
    font-weight:800!important;
}
.missions-close,
.wallet-close,
.shop-close{
    background:rgba(255,255,255,.07)!important;
    color:var(--cc-text)!important;
}
input,select,textarea{
    color:var(--cc-text)!important;
    background:#090b11!important;
    border-color:var(--cc-line)!important;
}
input:focus,select:focus,textarea:focus{
    border-color:rgba(215,169,75,.5)!important;
    outline:none!important;
    box-shadow:0 0 0 4px rgba(215,169,75,.06)!important;
}

@media(max-width:360px){
    .app.luxury-app{padding-left:11px;padding-right:11px}
    .wheel-area{width:280px;height:306px}
    #wheelCanvas{width:280px!important;height:280px!important}
    .crown-center{top:124px}
    .wheel-halo{width:270px;height:270px}
    .balance-card{padding:13px 10px}
    .balance-card b{font-size:16px;max-width:72px}
}
\n\n/* ===== ColonyClub V24.2 Premium Wheel + Crypto Deposit ===== */\n.wheel-heading-actions{display:flex;align-items:center;gap:10px}\n.wheel-sound-toggle{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,220,120,.3);background:rgba(8,10,18,.7);color:#fff;font-size:19px;box-shadow:inset 0 0 18px rgba(212,175,55,.08);cursor:pointer}\n.wheel-stage{transition:filter .3s ease,transform .3s ease}\n.wheel-stage.is-spinning{filter:drop-shadow(0 0 26px rgba(255,198,55,.62));transform:scale(1.015)}\n.wheel-stage.is-spinning .wheel-halo{animation:ccHaloPulse .8s ease-in-out infinite alternate}\n.wheel-stage.is-spinning .pointer{animation:ccPointerTick .14s ease-in-out infinite alternate}\n@keyframes ccHaloPulse{to{transform:translate(-50%,-50%) scale(1.07);opacity:1}}\n@keyframes ccPointerTick{to{transform:translateX(-50%) rotate(4deg) scale(1.08)}}\n#spinButton:disabled{opacity:.72;cursor:not-allowed;filter:saturate(.7)}\n.cc-confetti-layer{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden}\n.cc-confetti-layer span{position:absolute;top:-30px;color:#ffd76a;font-size:18px;text-shadow:0 0 8px rgba(255,194,51,.8);animation:ccConfettiFall linear forwards}\n.cc-confetti-layer span:nth-child(3n){color:#a56bff}.cc-confetti-layer span:nth-child(4n){color:#fff}\n@keyframes ccConfettiFall{to{transform:translate(var(--drift),110vh) rotate(720deg);opacity:.1}}\n.premium-prize-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,3,8,.78);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.25s}\n.premium-prize-modal.show{opacity:1;visibility:visible}\n.premium-prize-card{position:relative;width:min(92vw,390px);padding:30px 22px 24px;text-align:center;border:1px solid rgba(255,216,105,.5);border-radius:30px;background:radial-gradient(circle at top,#3a2b0b 0,#14101d 35%,#070910 100%);box-shadow:0 28px 80px rgba(0,0,0,.65),0 0 45px rgba(212,175,55,.22);transform:translateY(28px) scale(.92);transition:.28s}\n.premium-prize-modal.show .premium-prize-card{transform:none}\n.premium-prize-close{position:absolute;left:16px;top:14px;border:0;background:rgba(255,255,255,.08);color:#fff;width:34px;height:34px;border-radius:50%;font-size:15px}\n.premium-prize-crown{font-size:58px;color:#ffd660;text-shadow:0 0 28px rgba(255,194,36,.75);animation:ccCrownFloat 1.2s ease-in-out infinite alternate}\n@keyframes ccCrownFloat{to{transform:translateY(-7px) scale(1.04)}}\n.premium-prize-kicker{font-size:11px;letter-spacing:3px;color:#c8a848}.premium-prize-card h3{margin:8px 0 4px;font-size:30px;color:#fff}.premium-prize-card p{margin:10px 0 22px;font-size:22px;font-weight:800;color:#ffe499}.premium-prize-confirm{width:100%}\n.crypto-deposit-section{padding:4px 0}.deposit-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.deposit-title-row h3{margin:5px 0 0}.trc20-badge{padding:7px 10px;border-radius:999px;background:rgba(213,37,46,.15);border:1px solid rgba(255,86,94,.35);color:#ff9096;font-size:11px;font-weight:800}.deposit-network-warning{margin:14px 0;padding:11px 12px;border-radius:14px;background:rgba(255,165,0,.08);border:1px solid rgba(255,190,68,.2);color:#e8c77d;font-size:12px;line-height:1.8}.deposit-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.deposit-tab{border:1px solid rgba(255,255,255,.12);background:#0d111b;color:#aeb6c8;border-radius:13px;padding:11px;font-weight:800}.deposit-tab.active{border-color:rgba(255,215,93,.5);background:linear-gradient(135deg,#6e5110,#1b1609);color:#ffe79a;box-shadow:0 0 18px rgba(212,175,55,.12)}.deposit-qr-shell{width:190px;height:190px;margin:14px auto;padding:10px;border-radius:22px;background:#fff;box-shadow:0 0 0 5px rgba(255,214,95,.08),0 16px 35px rgba(0,0,0,.4)}.deposit-qr-shell img{display:block;width:100%;height:100%;border-radius:12px}.deposit-coin-label{display:block;text-align:center;color:#b8c0d2;margin-bottom:8px}.deposit-address-row{display:flex;align-items:center;gap:8px;direction:ltr}.deposit-address-row code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:12px;border-radius:12px;background:#080b12;border:1px solid rgba(255,255,255,.1);color:#e7eaf2;font-size:11px}.copy-address-btn{flex:0 0 auto;border:1px solid rgba(255,218,110,.35);background:rgba(212,175,55,.12);color:#ffe08a;border-radius:12px;padding:11px 13px;font-weight:800}.deposit-confirm-note{font-size:11px;line-height:1.8;color:#929bac;margin:10px 0 0}\n@media(max-width:360px){.deposit-qr-shell{width:168px;height:168px}.premium-prize-card{padding-inline:18px}}\n

/* ==========================
   Language Switcher
========================== */

.language-switcher{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.lang-btn{
    flex:1;
    padding:8px 12px;
    border:1px solid rgba(212,175,55,.45);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:#d4af37;
    font-size:13px;
    cursor:pointer;
    transition:.25s;
}

.lang-btn:hover{
    background:rgba(212,175,55,.15);
}

.lang-btn.active{
    background:linear-gradient(135deg,#d4af37,#f7e08a);
    color:#111;
    font-weight:700;
}

/* =========================================
   ColonyClub V24.5 - Premium VPN Services
========================================= */

.shop-orders-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.vpn-service-card{
    position:relative;
    overflow:hidden;
    padding:18px;
    direction:rtl;
    border:1px solid rgba(225,184,74,.32);
    border-radius:24px;
    background:
        radial-gradient(circle at top right,rgba(218,174,57,.13),transparent 34%),
        linear-gradient(155deg,#17130b 0%,#0d0f15 42%,#07080d 100%);
    box-shadow:
        0 24px 55px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.vpn-service-card::before{
    content:"";
    position:absolute;
    top:-80px;
    left:-80px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(218,174,57,.08);
    filter:blur(15px);
    pointer-events:none;
}

.vpn-service-header{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.vpn-service-kicker{
    display:block;
    margin-bottom:5px;
    direction:ltr;
    color:#b79538;
    font-size:9px;
    font-weight:900;
    letter-spacing:2px;
}

.vpn-service-header h3{
    margin:0;
    color:#fff3c5;
    font-size:19px;
    font-weight:900;
}

.vpn-service-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.vpn-service-status i{
    width:7px;
    height:7px;
    border-radius:50%;
}

.vpn-status-active{
    color:#75efad;
    border:1px solid rgba(56,221,133,.27);
    background:rgba(26,179,98,.1);
}

.vpn-status-active i{
    background:#3ce18a;
    box-shadow:0 0 10px rgba(60,225,138,.8);
}

.vpn-status-processing{
    color:#ffd36b;
    border:1px solid rgba(255,196,62,.28);
    background:rgba(255,182,36,.09);
}

.vpn-status-processing i{
    background:#ffc54f;
}

.vpn-guide-card{
    position:relative;
    z-index:1;
    margin-bottom:14px;
    padding:15px;
    border:1px solid rgba(222,181,70,.22);
    border-radius:18px;
    background:rgba(255,255,255,.025);
}

.vpn-guide-card h4{
    margin:0 0 12px;
    color:#f2cc67;
    font-size:15px;
}

.vpn-guide-card ol{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding-right:21px;
    color:#d2d5dd;
    font-size:12px;
    line-height:1.85;
}

.vpn-guide-card li::marker{
    color:#d7ad42;
    font-weight:900;
}

.vpn-guide-card b{
    direction:ltr;
    display:inline-block;
    color:#f8dc8b;
}

.vpn-guide-note{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:13px;
    padding:11px 12px;
    border-radius:13px;
    background:rgba(219,174,53,.075);
    border:1px solid rgba(219,174,53,.15);
}

.vpn-guide-note strong{
    color:#efd170;
    font-size:12px;
}

.vpn-guide-note span{
    color:#aeb3bf;
    font-size:11px;
    line-height:1.75;
}

.vpn-service-info{
    display:flex;
    flex-direction:column;
    margin-bottom:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;
    background:rgba(4,5,9,.4);
}

.vpn-info-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 13px;
    border-bottom:1px solid rgba(255,255,255,.055);
}

.vpn-info-row:last-child{
    border-bottom:0;
}

.vpn-info-row span{
    color:#858c9b;
    font-size:11px;
}

.vpn-info-row b{
    max-width:57%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#e8e9ed;
    font-size:12px;
}

.vpn-service-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-bottom:9px;
}

.vpn-action-btn{
    min-height:45px;
    padding:10px 8px;
    border:1px solid rgba(224,185,76,.25);
    border-radius:14px;
    background:rgba(218,174,57,.075);
    color:#ead488;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.vpn-copy-btn{
    color:#171008;
    border-color:transparent;
    background:linear-gradient(135deg,#ffe698,#c69426);
}

.vpn-open-btn{
    grid-column:1 / -1;
    color:#f8e2a2;
    background:linear-gradient(135deg,#6c5114,#251d0c);
}

.vpn-action-btn:active,
.vpn-show-link-btn:active{
    transform:scale(.98);
}

.vpn-show-link-btn{
    width:100%;
    min-height:42px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(255,255,255,.035);
    color:#b9bdc7;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.vpn-subscription-box{
    margin-top:9px;
    padding:11px;
    border:1px solid rgba(219,176,61,.18);
    border-radius:13px;
    background:#08090d;
}

.vpn-subscription-box span{
    display:block;
    margin-bottom:7px;
    color:#a99865;
    font-size:10px;
}

.vpn-subscription-box code{
    display:block;
    overflow:auto;
    padding:10px;
    border-radius:9px;
    background:#030406;
    color:#dedfe4;
    font-size:9px;
    line-height:1.7;
    word-break:break-all;
    white-space:normal;
}

.vpn-service-footer{
    margin-top:12px;
    text-align:center;
    color:#686e7b;
    font-size:9px;
    line-height:1.7;
}

.vpn-qr-modal{
    position:fixed;
    z-index:100050;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
}

.vpn-qr-modal.show{
    opacity:1;
    visibility:visible;
}

.vpn-qr-card{
    position:relative;
    width:min(92vw,340px);
    padding:25px 20px 20px;
    text-align:center;
    border:1px solid rgba(232,195,86,.38);
    border-radius:25px;
    background:linear-gradient(155deg,#17130d,#08090e);
    box-shadow:0 30px 80px rgba(0,0,0,.68);
}

.vpn-qr-card h4{
    margin:5px 0 18px;
    color:#f3d476;
}

.vpn-qr-code{
    width:230px;
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    padding:10px;
    border-radius:18px;
    background:#fff;
}

.vpn-qr-code img,
.vpn-qr-code canvas{
    max-width:100%;
    max-height:100%;
}

.vpn-qr-card p{
    margin:14px 0 0;
    color:#969ba7;
    font-size:11px;
}

.vpn-qr-close{
    position:absolute;
    top:12px;
    left:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.075);
    color:#fff;
    cursor:pointer;
}

.vpn-empty-service{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    padding:28px 17px;
    text-align:center;
}

.vpn-empty-icon{
    font-size:42px;
}

.vpn-empty-service strong{
    color:#e9d183;
}

.vpn-empty-service span{
    color:#898f9d;
    font-size:11px;
}

@media(max-width:360px){
    .vpn-service-card{
        padding:14px;
    }

    .vpn-service-header h3{
        font-size:17px;
    }

    .vpn-service-actions{
        grid-template-columns:1fr;
    }

    .vpn-open-btn{
        grid-column:auto;
    }

    .vpn-qr-code{
        width:205px;
        height:205px;
    }
}

/* =========================================
   ColonyClub VIP - VPN Service Card
   ========================================= */

.vpn-service-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    margin: 16px 0;
    border: 1px solid rgba(212, 175, 55, 0.38);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(18, 18, 18, 0.98), rgba(5, 5, 5, 0.99));
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #f7f2e7;
}

.vpn-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        transparent 15%,
        rgba(255, 215, 100, 0.05) 40%,
        transparent 65%
    );
}

.vpn-service-card > * {
    position: relative;
    z-index: 1;
}

.vpn-service-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.vpn-service-header small {
    display: block;
    margin-bottom: 5px;
    color: #cba94c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.vpn-service-header h3 {
    margin: 0;
    color: #fff6d6;
    font-size: 18px;
    font-weight: 900;
}

.vpn-active-badge,
.vpn-processing-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.vpn-active-badge {
    color: #bdf9cf;
    border: 1px solid rgba(63, 210, 108, 0.3);
    background: rgba(35, 145, 73, 0.14);
}

.vpn-processing-badge {
    color: #ffe29a;
    border: 1px solid rgba(255, 193, 7, 0.3);
    background: rgba(255, 193, 7, 0.12);
}

.vpn-guide-card {
    padding: 15px;
    margin-bottom: 14px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(8px);
}

.vpn-guide-card h4 {
    margin: 0 0 12px;
    color: #f7d56f;
    font-size: 15px;
    font-weight: 900;
}

.vpn-guide-card ol {
    margin: 0;
    padding-right: 22px;
    color: #ddd7c8;
    font-size: 12.5px;
    line-height: 2;
}

html[dir="ltr"] .vpn-guide-card ol {
    padding-right: 0;
    padding-left: 22px;
}

.vpn-guide-card li::marker {
    color: #d4af37;
    font-weight: 900;
}

.vpn-guide-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px;
    margin-top: 12px;
    border-radius: 13px;
    border: 1px solid rgba(212, 175, 55, 0.17);
    background: rgba(212, 175, 55, 0.07);
    color: #d9d2c2;
    font-size: 11.5px;
    line-height: 1.8;
}

.vpn-guide-note b {
    flex-shrink: 0;
    color: #f1cc62;
}

.vpn-service-info {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}

.vpn-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(255, 255, 255, 0.028);
}

.vpn-info-row span {
    color: #aaa18e;
    font-size: 11.5px;
}

.vpn-info-row b {
    max-width: 58%;
    overflow-wrap: anywhere;
    text-align: left;
    color: #f7e7aa;
    font-size: 12px;
    font-weight: 800;
}

html[dir="rtl"] .vpn-info-row b {
    text-align: left;
}

.vpn-service-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.vpn-service-actions button {
    min-height: 43px;
    padding: 10px 12px;
    border-radius: 13px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        filter 0.16s ease,
        border-color 0.16s ease;
}

.vpn-service-actions button:active {
    transform: scale(0.97);
}

.vpn-copy-btn {
    border: 1px solid #d5b74f;
    color: #130f04;
    background: linear-gradient(135deg, #f8dc7b, #b98b20);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.16);
}

.vpn-show-btn {
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #f3d578;
    background: rgba(212, 175, 55, 0.07);
}

.vpn-open-btn {
    grid-column: 1 / -1;
    border: 1px solid rgba(255, 215, 110, 0.42);
    color: #fff2c0;
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05)),
        #111;
}

.vpn-copy-btn:hover,
.vpn-show-btn:hover,
.vpn-open-btn:hover {
    filter: brightness(1.08);
}

.vpn-subscription-box {
    padding: 12px;
    margin-top: 11px;
    border: 1px dashed rgba(212, 175, 55, 0.32);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.3);
}

.vpn-subscription-box[hidden] {
    display: none !important;
}

.vpn-subscription-box span {
    display: block;
    margin-bottom: 7px;
    color: #b7aa8c;
    font-size: 10.5px;
}

.vpn-subscription-box code {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-all;
    color: #ecd986;
    font-family: monospace;
    font-size: 10.5px;
    line-height: 1.7;
    user-select: all;
}

.vpn-security-note {
    padding-top: 13px;
    margin-top: 13px;
    border-top: 1px solid rgba(212, 175, 55, 0.13);
    color: #9c9382;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.7;
}

.vpn-empty-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 28px 18px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 19px;
    background: linear-gradient(
        145deg,
        rgba(20, 20, 20, 0.96),
        rgba(5, 5, 5, 0.98)
    );
    color: #d7cfbd;
    text-align: center;
}

.vpn-empty-icon {
    font-size: 36px;
}

.vpn-empty-service strong {
    color: #f0d06c;
    font-size: 14px;
}

.vpn-empty-service span {
    color: #9e9584;
    font-size: 11.5px;
}

@media (max-width: 390px) {
    .vpn-service-card {
        padding: 14px;
        border-radius: 18px;
    }

    .vpn-service-header {
        flex-direction: column;
        align-items: stretch;
    }

    .vpn-active-badge,
    .vpn-processing-badge {
        align-self: flex-start;
    }

    .vpn-service-actions {
        grid-template-columns: 1fr;
    }

    .vpn-open-btn {
        grid-column: auto;
    }

    .vpn-info-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .vpn-info-row b {
        max-width: 100%;
        width: 100%;
    }
}


/* ColonyClub VPN application compatibility */
.vpn-apps-compatibility {
    padding: 22px 18px;
    border: 1px solid rgba(255, 205, 70, 0.28);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 205, 70, 0.045), transparent 45%),
        rgba(13, 17, 26, 0.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.vpn-apps-compatibility > strong {
    display: block;
    margin-bottom: 20px;
    color: #ffd44f;
    font-size: 17px;
    line-height: 1.8;
    text-align: center;
}

.vpn-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vpn-platform-box {
    min-width: 0;
    padding: 15px 13px;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 17px;
    background: rgba(255,255,255,0.025);
}

.vpn-platform-box h4 {
    margin: 0 0 11px;
    color: #f3c843;
    font-size: 15px;
}

.vpn-platform-box p {
    margin: 8px 0;
    color: #f1f1f1;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .vpn-apps-compatibility {
        padding: 18px 13px;
    }

    .vpn-platform-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}