/* Roulette (compact, basic) */
.roulette-box{ /* uses .unibox structure */ }
.roulette-label{display:block; font-size:13px; margin:0 0 6px 0; font-weight:600}
.roulette-select{
    width:100%; max-width:360px;
    padding:8px 10px;
    background:#14181e;
    color:#e6e9ed;
    border:1px solid #21262d;
    border-radius:3px;
    font-size:13px;
    margin:0 0 14px 0;
}
.roulette-spin-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:16px;
    background:#14181e;
    border:1px solid #21262d;
    border-radius:4px;
    margin:0 0 16px 0;
}
.roulette-thumb{
    width:140px; height:140px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.25);
    border-radius:4px;
}
.roulette-thumb img{max-width:100%; max-height:100%}
.roulette-placeholder{color:#a9b1ba; font-size:14px}
.roulette-meta{ text-align:center; }
.roulette-meta p{ margin:4px 0; font-size:14px; }
.roulette-result{
    padding:16px;
    background:#14181e;
    border:1px solid #21262d;
    border-radius:4px;
    text-align:center;
}
.roulette-result h3{
    margin:0 0 10px 0;
    color:#e89f2a;
    font-size:16px;
}
@media screen and (max-width:640px){
    .roulette-thumb{width:110px; height:110px}
    .roulette-select{max-width:100%}
}

/* Purple button variant (subtle glow, non-overloading) */
.btn-primary.purple{
    background:#7b61ff; color:#fff; border-color:#7b61ff;
    box-shadow:0 2px 8px rgba(123,97,255,0.06);
    /* do not override base .btn paddings here */
    font-size:13px;
}
.btn-primary.purple:hover{ background:#654fe0; border-color:#654fe0 }

/* Teal button variant (accent2 #2a9d8f) */
.btn-primary.teal{
    background:#2a9d8f;
    color:#fff;
    border-color:#2a9d8f;
    box-shadow:0 2px 8px rgba(42,157,143,0.08);
    /* keep base .btn paddings */
    font-size:13px;
}
.btn-primary.teal:hover{
    background:#248775;
    border-color:#248775;
}

/* social buttons under Servers block */
.server-social-buttons{
    margin-top:10px;
    display:flex;
    flex-direction:row;
    gap:8px;
}
.server-social-btn{
    flex:1 1 0;
    text-align:center;
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.server-social-icon{
    width:18px;
    height:18px;
    display:inline-block;
}

/* Generic Tab Switcher Layout (reusable: support, account, etc.) */
.tab-layout{
    display:flex;
    flex-direction:column;
    border:1px solid #21262d;
    background:#14181e;
    padding:0;
    border-radius:4px;
}

/* Support page pre-header with gradient (inside tab-layout, full width) */
.support-pre-header{
    height:64px;
    background:linear-gradient(to bottom, rgba(223,123,38,0.45) 0%, rgba(223,123,38,0.22) 25%, rgba(223,123,38,0.08) 50%, rgba(223,123,38,0) 75%);
    display:flex;
    align-items:center;
    padding:0 18px;
    border:none;
    border-radius:4px 4px 0 0;
}
.pre-header-text{
    font-size:16px;
    font-weight:600;
    color:#e6e9ed;
    text-transform:uppercase;
    letter-spacing:0.5px;
    opacity:0.85;
}

/* Inner wrapper holds the side + content flex layout */
.tab-layout-inner{
    display:flex;
    align-items:flex-start;
    gap:24px;
    padding:16px 18px;
}
.tab-side{
    width:300px;
    flex:0 0 300px;
}
.tab-menu{
    list-style:none;
    margin:0;
    padding:0;
}
.tab-menu li{
    cursor:pointer;
    padding:10px 12px;
    border:1px solid #21262d;
    background:#0e0f12;
    border-radius:3px;
    margin-bottom:6px;
}
.tab-menu li .main{
    display:block;
    font-size:16px;
    font-weight: normal;
}
.tab-menu li .sub{
    display:block;
    font-size:12px;
    color:#a9b1ba;
    margin-top:2px;
}
.tab-menu li.active{
    border-color:#e89f2a;
    background:#1c2127;
}
.tab-content{
    flex:1 1 auto;
    min-width:0;
}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.tab-pane h2{margin-top:0;}
.tab-faq-list,
.tab-guides-list,
.tab-rules-list,
.tab-privacy-list{
    list-style:none;
    margin:8px 0 0 0;
    padding:0;
    font-size:14px;
}
.tab-faq-list li,
.tab-guides-list li,
.tab-rules-list li,
.tab-privacy-list li{
    padding:6px 0;
    border-bottom:1px solid rgba(33,38,45,0.5);
}

/* Make sure muted text has consistent color */
.tab-pane .muted{
    color:#a9b1ba;
    font-size:14px;
}

/* Forms inside tab panes */
.tab-form{
    max-width:480px;
    padding:12px 14px;
    border:1px solid #21262d;
    background:#0e0f12;
    border-radius:3px;
    margin-bottom:16px;
}
.tab-form .field{margin-bottom:10px;}
.tab-form .label{
    display:block;
    font-size:13px;
    margin-bottom:4px;
}
.tab-form input,
.tab-form textarea{
    width:100% !important;
    background:#14181e !important;
    color:#e6e9ed !important;
    border:1px solid #21262d !important;
    padding:7px 9px;
    border-radius:3px;
    font-family:inherit;
    font-size:14px;
    outline:none;
}
.tab-form input:focus,
.tab-form textarea:focus{
    border-color:#e89f2a !important;
}
.form-status{
    margin-left:8px;
    font-size:12px;
}

@media screen and (max-width:960px){
    .tab-layout-inner{
        flex-direction:column;
    }
    .tab-side{
        width:100%;
        flex:0 0 auto;
    }
}

/* Account header (avatar + username + divider) */
.account-header{
    display:flex;
    align-items:center;
    gap:12px;
    background:#0e0f12;
}
.account-header-avatar{
    width:60px;
    height:60px;
    border:2px solid #4b4f56;
    overflow:hidden;
    background:#1c2127;
    box-sizing:border-box;
}
.account-header-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.account-header-main{
    flex:1 1 auto;
    min-width:0;
}
.account-header-username{
    font-size:22px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.account-header-divider{
    border:0;
    border-top:1px solid rgba(59,63,70,0.9);
    margin:8px 0 14px 0;
}
@media screen and (max-width:640px){
    .account-header{
        gap:10px;
    }
    .account-header-avatar{
        width:52px;
        height:52px;
    }
    .account-header-username{
        font-size:17px;
    }
    .account-header-divider{
        margin-bottom:10px;
    }
}

/* Payment logos (keep existing look) */
.paylogos{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}
.pay-card{
    background:#ffffff;
    border:2px solid #d1d5db;
    border-radius:10px;
    padding:8px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:44px;
    min-width:74px;
    box-shadow:0 3px 8px rgba(0,0,0,0.28);
}
.pay-card img{
    display:block;
    max-height:28px;
    max-width:92px;
    object-fit:contain;
}

/* Green-variant card: clearer method hint */
.pay-card-green{
    border-color:#8ddf7d; /* light, vivid green */
    /* solid top→bottom gradient: light grey → white (no transparency) */
    background: linear-gradient(to bottom, #C6C9CD 0%, #FFFFFF 100%);
    box-shadow:0 3px 8px rgba(0,0,0,0.26);
}

/* Payment rows */
.payrow{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 0 12px 0;
    flex-wrap:wrap;
}
/* right cluster (coin + amount + button) aligns to the right of the row */
.pay-right{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto; /* push to the right */
    flex-wrap:wrap;
}
.pay-amount-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-size:15px; /* slightly larger for proportional row height */
}
.pay-amount-input{
    width:64px !important;   /* proportional width */
    height:40px;
    padding:6px 10px;
    font-size:15px;
    line-height:1.2;
}
.pay-amount-input:focus{
    border-width:1px;
    box-sizing:border-box;
}
.pay-amount-unit{
    font-size:12px;
    opacity:.7;
}
/* Inline coin icon next to amount input (black halo) */
.pay-amount-unit img{
    width:22px;
    height:22px;
    display:inline-block;
    vertical-align:middle;
    border-radius:50%;
    /* softer dual halo: inner white, outer light green */
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,0.70))
        drop-shadow(0 0 6px rgba(0,0,0,0.40));
}

/* Inline larger action buttons aligned with amount row */
.pay-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.pay-action-btn{
    padding:10px 16px;
    font-size:15px;
    line-height:1.1;
}

.pay-status{
    margin-left:10px;
    font-size:12px;
    opacity:.85;
}

/* Payment amount: hide native number spinners & keep size stable (scoped to payment rows) */
.payrow input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
    box-sizing: border-box;     /* ensure padding/border don't change rendered size */
}

/* WebKit/Chrome: remove spin buttons */
.payrow input[type="number"]::-webkit-outer-spin-button,
.payrow input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Keep focus from causing visual expansion */
.payrow input[type="number"]:focus {
    outline: none;
    /* do not change border width or padding on focus */
    box-sizing: border-box;
}

@media screen and (max-width:640px){
    .payrow{ gap:12px; }
    .paylogos{ gap:8px; }
    .pay-right{ flex:1 1 100%; justify-content:flex-end; gap:10px; }
    .pay-amount-label{ flex:0 0 auto; }
    .pay-actions{ flex:0 0 auto; }
    .pay-action-btn{ width:auto; }
}