*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#ffe98a}
body{background:#080403;overflow-x:hidden}
.vip-bg{position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.2),rgba(0,0,0,.72)),url('../assets/img/bg.jpg') center/cover fixed no-repeat;filter:saturate(.85) contrast(1.05);z-index:-3}
.vip-shade{position:fixed;inset:0;background:radial-gradient(circle at 50% 15%,rgba(255,120,25,.16),transparent 36%),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.86));z-index:-2}
a{color:inherit}
.vip-top{width:min(1180px,calc(100% - 28px));margin:24px auto 0;text-align:center}
.vip-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:3px}
.vip-nav a{min-width:116px;padding:18px 16px;text-align:center;text-decoration:none;text-transform:uppercase;font-weight:950;color:#fff06a;background:linear-gradient(180deg,rgba(80,45,20,.92),rgba(35,14,9,.96));border:1px solid #a75112;box-shadow:inset 0 0 0 1px rgba(255,186,80,.24),0 7px 20px rgba(0,0,0,.35);text-shadow:0 2px 0 #000}
.vip-nav a.active{color:#7ff5ff;border-color:#ffc15c;background:linear-gradient(180deg,rgba(100,55,25,.98),rgba(52,18,10,.98))}
.vip-nav a.admin{color:#ff5a4b}
.vip-realm{margin:12px 0 0;color:#6ff8ff;font-size:22px;font-weight:950;text-shadow:0 2px 8px #000}
.vip-shell{width:min(1180px,calc(100% - 28px));margin:18px auto 30px}
.vip-title-row{display:grid;grid-template-columns:430px 1fr;gap:28px;align-items:center;margin-bottom:12px}
.vip-side-title,.vip-main-title{height:58px;display:flex;align-items:center;padding:0 28px;background:linear-gradient(180deg,rgba(71,47,26,.88),rgba(31,20,14,.94));border:1px solid rgba(218,140,45,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-family:Georgia,serif;font-size:28px;text-transform:uppercase;color:#ffdf78;text-shadow:0 2px 0 #000}
.vip-main-title{justify-content:center}
.vip-panel{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent),rgba(14,11,8,.86);border:1px solid rgba(226,145,45,.36);box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.035)}
.vip-profile-grid{display:grid;grid-template-columns:250px 1fr 260px;gap:18px}
.vip-language-panel{padding:22px;text-align:center}
.vip-language-panel h2,.vip-currency-panel h2{margin:0 0 18px;color:#ffe5a3;font-family:Georgia,serif;text-transform:uppercase;font-size:22px}
.vip-language-panel a{display:block;text-decoration:none;margin:10px 0;padding:13px;background:linear-gradient(#e65a20,#9c2d12);border:1px solid #f08a38;color:#fff26e;font-weight:950;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.vip-profile-panel{padding:28px;display:grid;grid-template-columns:220px 1fr;gap:26px}
.vip-account-main{text-align:center;border-right:1px solid rgba(226,145,45,.25);padding-right:22px}
.vip-avatar{width:120px;height:120px;margin:0 auto 14px;display:grid;place-items:center;background:radial-gradient(circle,rgba(140,255,40,.22),rgba(0,0,0,.58));border:1px solid rgba(255,217,116,.45)}
.vip-avatar span{font-size:54px;color:#fff}
.vip-account-main h1{margin:0;color:#aaff2b;font-size:28px;text-shadow:0 2px 0 #000;word-break:break-word}
.vip-account-main p{margin:8px 0 0;color:#fff}
.vip-profile-table{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vip-profile-table div{min-height:62px;padding:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.045)}
.vip-profile-table span{display:block;color:#ffe98a;text-transform:uppercase;font-size:12px;font-weight:950}
.vip-profile-table b{display:block;color:#fff;margin-top:6px;word-break:break-word}
.vip-currency-panel{padding:24px}
.vip-currency-panel div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(226,145,45,.18);font-weight:950}
.vip-green{color:#9cff23!important}.vip-cyan{color:#6ff8ff!important}
.vip-green-button{display:block;text-align:center;margin-top:20px;padding:15px;text-transform:uppercase;text-decoration:none;font-weight:950;color:#1b1506;background:linear-gradient(#c9ff38,#6ec01b);border:1px solid #d7ff80;box-shadow:0 0 22px rgba(145,255,38,.20)}
.vip-content-panel{padding:32px;min-height:420px}
.vip-content-panel h1{font-family:Georgia,serif;text-transform:uppercase;font-size:36px;color:#ff8b2b;text-align:center;margin:0 0 8px;text-shadow:0 2px 0 #000}
.vip-content-panel p{text-align:center;color:#fff0a0;font-weight:850}
.vip-package-grid,.vip-service-grid,.vip-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.vip-package-grid div,.vip-service-grid a,.vip-admin-grid a{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:18px;background:rgba(0,0,0,.25);border:1px solid rgba(226,145,45,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.vip-service-grid a,.vip-admin-grid a{font-size:32px}
.vip-service-grid b,.vip-admin-grid b,.vip-package-grid b{display:block;margin:8px 0;color:#fff06a;text-transform:uppercase;font-size:16px}
.vip-service-grid span,.vip-admin-grid span,.vip-package-grid span{color:#fff;font-size:13px}
.vip-admin-grid a{background:linear-gradient(180deg,rgba(95,18,12,.55),rgba(20,8,6,.88));border-color:rgba(255,75,40,.48)}
.vip-form-preview{max-width:560px;margin:28px auto;border:2px solid rgba(255,255,255,.82);padding:26px;text-align:center}
.vip-form-preview label{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:12px;margin:10px 0;text-align:left;font-weight:950;color:#ffe98a}
.vip-form-preview input{padding:12px;background:#5bbcff;border:0;color:#001627;font-weight:900}
.vip-form-preview button{margin-top:12px;min-width:220px;padding:13px;border:0;background:linear-gradient(#e65a20,#9c2d12);color:#fff06a;font-weight:950;font-size:18px}
.vip-table{width:100%;border-collapse:collapse;margin-top:24px}.vip-table th,.vip-table td{padding:14px;border:1px solid rgba(226,145,45,.26);text-align:left}.vip-table th{background:#b63a13;color:#ffe98a}
.vip-login-wrap{min-height:100vh;display:grid;place-items:center;padding:30px}.vip-login-card{width:min(460px,100%);padding:34px;background:rgba(12,8,5,.9);border:1px solid rgba(226,145,45,.45);box-shadow:0 30px 80px #000;text-align:center}.vip-login-logo{font-family:Georgia,serif;font-size:34px;color:#9cff23}.vip-login-card h1{margin:12px 0;color:#ffdf78}.vip-login-card p{color:#ded2b8}.vip-login-form{text-align:left}.vip-login-form label{display:block;margin:14px 0;color:#ffe98a;font-weight:950}.vip-login-form input{width:100%;padding:14px;margin-top:7px;background:#0b0806;border:1px solid rgba(226,145,45,.35);color:#fff}.vip-login-form button{width:100%;padding:15px;border:0;background:linear-gradient(#c9ff38,#6ec01b);font-weight:950;text-transform:uppercase}.vip-alert{padding:12px;margin:12px 0;border:1px solid #aa2b2b;color:#ffb1b1}.vip-back-link{display:inline-block;margin-top:16px;color:#7ff5ff}
.vip-footer{width:min(1180px,calc(100% - 28px));margin:0 auto 28px;text-align:center}.vip-footer a{margin:0 12px;color:#ffdf78;text-transform:uppercase;text-decoration:none;font-weight:950}
@media(max-width:1000px){.vip-profile-grid,.vip-profile-panel,.vip-title-row{grid-template-columns:1fr}.vip-account-main{border-right:0;border-bottom:1px solid rgba(226,145,45,.25);padding-right:0;padding-bottom:20px}.vip-package-grid,.vip-service-grid,.vip-admin-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.vip-profile-table,.vip-package-grid,.vip-service-grid,.vip-admin-grid{grid-template-columns:1fr}.vip-nav a{min-width:48%}.vip-form-preview label{grid-template-columns:1fr}}

.vip-note{margin-top:22px!important;color:#ffe98a!important}
.vip-buy-packages div em{display:block;color:#7ff5ff;font-style:normal;margin:8px 0 12px;font-weight:900}
.vip-buy-packages button,.vip-shop-table button{
    padding:10px 18px;border:0;background:linear-gradient(#e65a20,#9c2d12);
    color:#fff06a;font-weight:950;text-transform:uppercase;cursor:pointer;
}
.vip-shop-table th{text-align:center}
.vip-shop-table td{text-align:center}
.vip-shop-table button{min-width:110px}


/* VIP Manager v3 professional polish */
.vip-top-pro{
    margin-top:18px;
}
.vip-brand-row{
    display:grid;
    grid-template-columns:240px 1fr 150px;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
}
.vip-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    padding:12px 16px;
    background:rgba(0,0,0,.38);
    border:1px solid rgba(226,145,45,.35);
}
.vip-brand-mark{
    width:42px;height:42px;display:grid;place-items:center;
    background:radial-gradient(circle,rgba(157,255,56,.22),rgba(0,0,0,.7));
    border:1px solid rgba(157,255,56,.3);
}
.vip-brand b{
    display:block;color:#9dff38;font-family:Georgia,serif;font-size:21px;
}
.vip-brand em{
    display:block;color:#ffe19a;font-style:normal;font-size:11px;text-transform:uppercase;font-weight:900;
}
.vip-logout-top{
    text-decoration:none;text-transform:uppercase;text-align:center;font-weight:950;
    color:#ffe98a;padding:13px;background:linear-gradient(180deg,rgba(80,45,20,.92),rgba(35,14,9,.96));
    border:1px solid #a75112;
}
.vip-nav-pro{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:6px;
}
.vip-nav-pro a{
    min-width:0!important;
    min-height:66px;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:0;
    background:
        linear-gradient(180deg,rgba(105,61,30,.72),rgba(26,13,9,.96)),
        radial-gradient(circle at 50% 0,rgba(255,190,80,.22),transparent 45%)!important;
}
.vip-nav-pro a span{
    font-size:19px;
    line-height:1;
}
.vip-nav-pro a.active{
    box-shadow:inset 0 -4px 0 #7ff5ff,0 10px 26px rgba(0,0,0,.38)!important;
}
.vip-realm{
    margin:0!important;
}
.vip-profile-hero{
    display:grid;
    grid-template-columns:230px minmax(0,1fr) 260px;
    gap:18px;
    padding:26px;
}
.profile-hero-left{
    text-align:center;
    border-right:1px solid rgba(226,145,45,.22);
    padding-right:22px;
}
.vip-avatar-pro{
    width:138px!important;
    height:138px!important;
}
.profile-hero-left h1{
    color:#9dff38;
    font-size:30px;
    margin:12px 0 4px;
    text-shadow:0 2px 0 #000,0 0 22px rgba(157,255,56,.22);
    word-break:break-word;
}
.profile-hero-left p{
    margin:0 0 12px;
    color:#fff;
}
.vip-profile-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
}
.vip-profile-badges span{
    padding:7px 9px;
    background:rgba(157,255,56,.08);
    border:1px solid rgba(157,255,56,.18);
    color:#dfffbe;
    font-size:11px;
    text-transform:uppercase;
    font-weight:900;
}
.vip-profile-titleline{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(226,145,45,.24);
}
.vip-profile-titleline span{
    color:#ffe19a;
    font-family:Georgia,serif;
    font-size:26px;
    text-transform:uppercase;
}
.vip-profile-titleline b{
    color:#9dff38;
    font-size:12px;
    text-transform:uppercase;
}
.vip-profile-table-pro div{
    min-height:70px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.15));
}
.vip-currency-pro{
    background:
        radial-gradient(circle at 50% 100%,rgba(157,255,56,.16),transparent 46%),
        rgba(14,11,8,.86);
}
.vip-quick-actions{
    margin-top:18px;
    padding:24px;
}
.vip-quick-actions h2{
    margin:0 0 18px;
    color:#ffe19a;
    font-family:Georgia,serif;
    text-transform:uppercase;
    font-size:28px;
}
.vip-buycoins-pro{
    background:
        radial-gradient(circle at 20% 20%,rgba(255,140,30,.12),transparent 35%),
        radial-gradient(circle at 80% 60%,rgba(157,255,56,.10),transparent 35%),
        rgba(14,11,8,.86)!important;
}
.coin-calc-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    max-width:900px;
    margin:26px auto;
}
.coin-calc-left,.coin-calc-right{
    padding:28px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(226,145,45,.28);
    text-align:center;
}
.coin-visual{
    width:116px;height:116px;margin:0 auto 14px;
    display:grid;place-items:center;
    font-size:66px;
    background:radial-gradient(circle,rgba(255,207,72,.35),rgba(0,0,0,.56));
    border:1px solid rgba(255,207,72,.38);
    border-radius:50%;
    box-shadow:0 0 45px rgba(255,207,72,.16);
}
.coin-calc-left h2{
    color:#ffe19a;
    font-size:36px;
    margin:8px 0 6px;
    font-family:Georgia,serif;
}
#coinRange{
    width:100%;
    margin:22px 0;
}
.coin-presets{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}
.coin-presets button,.pkgPick{
    padding:11px;
    border:1px solid rgba(255,190,80,.42);
    background:linear-gradient(#e65a20,#9c2d12);
    color:#fff06a;
    font-weight:950;
    cursor:pointer;
}
.calc-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:17px 0;
    border-bottom:1px solid rgba(226,145,45,.20);
    font-weight:950;
}
.calc-row span{
    color:#ffe98a;
}
.calc-row b{
    color:#9dff38;
    font-size:22px;
}
.vip-buy-packages div{
    position:relative;
    overflow:hidden;
}
.vip-buy-packages div:before{
    content:"🪙";
    position:absolute;
    right:16px;
    top:10px;
    font-size:42px;
    opacity:.18;
}
.vip-buy-packages small{
    display:block;
    color:#e7ddc5;
    min-height:32px;
    line-height:1.35;
    margin-bottom:12px;
}
@media(max-width:1050px){
    .vip-brand-row,.vip-profile-hero,.coin-calc-wrap{grid-template-columns:1fr}
    .vip-nav-pro{grid-template-columns:repeat(3,1fr)}
    .profile-hero-left{border-right:0;border-bottom:1px solid rgba(226,145,45,.22);padding-right:0;padding-bottom:20px}
}
@media(max-width:650px){
    .vip-nav-pro{grid-template-columns:repeat(2,1fr)}
    .coin-presets{grid-template-columns:repeat(2,1fr)}
}


/* VIP Manager v4: functional shop manager + no casino */
.vip-page-message{
    width:min(1180px, calc(100% - 28px));
    margin:0 auto 14px;
    padding:14px 18px;
    border:1px solid rgba(226,145,45,.30);
    background:rgba(0,0,0,.36);
    font-weight:900;
}
.vip-page-message.success{color:#9dff38;border-color:rgba(157,255,56,.35)}
.vip-page-message.error{color:#ff8c7c;border-color:rgba(255,70,45,.35)}
.wowhead-link{
    color:#7ff5ff;
    text-decoration:none;
    font-weight:950;
}
.wowhead-link:hover{color:#ffe19a}
.vip-admin-shop-manager{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid rgba(226,145,45,.24);
}
.vip-admin-shop-manager h2{
    color:#ffe19a;
    font-family:Georgia,serif;
    text-transform:uppercase;
    text-align:center;
    font-size:28px;
}
.vip-admin-add-form{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:12px;
    margin:20px 0;
    padding:18px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(226,145,45,.24);
}
.vip-admin-add-form label{
    display:block;
    color:#ffe98a;
    font-weight:950;
    text-transform:uppercase;
    font-size:12px;
}
.vip-admin-add-form input,
.vip-admin-add-form select{
    width:100%;
    margin-top:7px;
    padding:12px;
    background:#10100f;
    border:1px solid rgba(226,145,45,.32);
    color:#fff;
}
.vip-admin-add-form .wide{
    grid-column:span 3;
}
.vip-admin-add-form button,
.admin-actions button{
    padding:12px;
    border:1px solid rgba(255,190,80,.42);
    background:linear-gradient(#e65a20,#9c2d12);
    color:#fff06a;
    font-weight:950;
    text-transform:uppercase;
    cursor:pointer;
}
.admin-actions{
    display:flex;
    gap:6px;
    justify-content:center;
}
.admin-actions form{margin:0}
.vip-form-preview input[readonly]{
    opacity:.75;
}
@media(max-width:900px){
    .vip-admin-add-form{grid-template-columns:1fr 1fr}
    .vip-admin-add-form .wide{grid-column:span 2}
}
@media(max-width:620px){
    .vip-admin-add-form{grid-template-columns:1fr}
    .vip-admin-add-form .wide{grid-column:span 1}
}

.vip-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.vip-profile-settings{margin-top:18px;padding:22px}
.vip-profile-settings h2,.vip-subtitle{margin:0 0 14px;color:#ffe19a;font-family:Georgia,serif;text-transform:uppercase}
.vip-profile-form{display:grid;grid-template-columns:1fr 2fr 1fr auto;gap:12px;align-items:end}
.vip-profile-form label{display:block;color:#ffe98a;font-size:12px;text-transform:uppercase;font-weight:950}
.vip-profile-form input,.vip-profile-form select,.vip-form-preview select{
    width:100%;margin-top:7px;padding:12px;background:#10100f;border:1px solid rgba(226,145,45,.32);color:#fff;
}
.vip-profile-form button,.paypal-buy-form button{border:0;cursor:pointer}
.paypal-buy-form{margin:18px 0 0}
.vip-form-preview select{color:#fff}
@media(max-width:900px){.vip-profile-form{grid-template-columns:1fr}}


/* v11 item/spell names instead of raw IDs */
.vip-item-link{
    color:#9dff38;
    text-decoration:none;
    font-weight:950;
}
.vip-item-link:hover{
    color:#ffe19a;
    text-shadow:0 0 12px rgba(157,255,56,.45);
}
.vip-spell-link{
    color:#7ff5ff;
}
.vip-table small{
    color:#c9b894;
    font-size:11px;
}

.vip-admin-tool-panel{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid rgba(226,145,45,.24);
}
.vip-admin-tool-panel h2{
    color:#ffe19a;
    font-family:Georgia,serif;
    text-transform:uppercase;
    text-align:center;
    font-size:28px;
}
.vip-admin-tool-panel .vip-table{
    margin-top:18px;
}

/* v14 PayPal donation packages */
.vip-donation-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    max-width:900px;
    margin:22px auto;
}
.vip-donation-info div{
    padding:18px;
    text-align:center;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(226,145,45,.28);
}
.vip-donation-info b{
    display:block;
    color:#9dff38;
    font-size:26px;
}
.vip-donation-info span{
    display:block;
    margin-top:6px;
    color:#ffe19a;
    font-weight:900;
}
.vip-donation-packages{
    grid-template-columns:repeat(3,1fr)!important;
}
.vip-donation-packages div{
    position:relative;
    padding-top:26px!important;
}
.vip-donation-packages .coin-stack{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    margin:0 auto 8px;
    font-size:42px;
    background:radial-gradient(circle,rgba(255,207,72,.34),rgba(0,0,0,.42));
    border:1px solid rgba(255,207,72,.38);
    border-radius:50%;
}
.vip-donation-packages .has-bonus{
    border-color:rgba(157,255,56,.45)!important;
    box-shadow:0 0 28px rgba(157,255,56,.12), inset 0 0 0 1px rgba(157,255,56,.10)!important;
}
.vip-donation-packages strong{
    color:#9dff38;
}
.vip-donation-packages form{
    margin-top:14px;
}
.vip-donation-packages button{
    width:100%;
    padding:12px 14px;
    border:1px solid rgba(255,190,80,.42);
    background:linear-gradient(#e65a20,#9c2d12);
    color:#fff06a;
    font-weight:950;
    text-transform:uppercase;
    cursor:pointer;
}
@media(max-width:900px){
    .vip-donation-info,.vip-donation-packages{grid-template-columns:1fr!important}
}

.inline-buy-form{margin:0}
.inline-buy-form button{
    padding:10px 16px;
    border:1px solid rgba(255,190,80,.42);
    background:linear-gradient(#e65a20,#9c2d12);
    color:#fff06a;
    font-weight:950;
    text-transform:uppercase;
    cursor:pointer;
}


/* v16 vip item character select */
.inline-buy-form{
    display:grid;
    gap:8px;
    min-width:180px;
}
.inline-buy-form select{
    width:100%;
    padding:9px;
    background:#10100f;
    border:1px solid rgba(226,145,45,.32);
    color:#fff;
}
.inline-buy-form option:disabled{
    color:#888;
}

/* v19 Played Point Shop */
.vip-pp-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin:22px 0;
}
.vip-pp-summary div{
    background:rgba(0,0,0,.30);
    border:1px solid rgba(226,145,45,.26);
    padding:18px;
    text-align:center;
}
.vip-pp-summary b{
    display:block;
    color:#9dff38;
    font-size:27px;
    margin-bottom:6px;
}
.vip-pp-summary span{
    color:#ffe19a;
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
}
.vip-pointshop-table .inline-buy-form{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.vip-pointshop-table select{
    min-width:170px;
}
@media(max-width:900px){
    .vip-pp-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .vip-pp-summary{grid-template-columns:1fr}
}

.vip-admin-grid a{text-decoration:none}
.vip-admin-panel h1{margin-bottom:12px}

.vip-search-form{
    margin:20px 0;
    align-items:end;
}
.vip-search-form .wowhead-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
}