:root{--bg1:#120018;--bg2:#2a003f;--card:rgba(255,255,255,.07);--glow:rgba(255,0,255,.25);--glow2:rgba(0,200,255,.18);--txt:#fff;--muted:rgba(255,255,255,.7);}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--txt);
background:radial-gradient(circle at 15% 10%, rgba(255,0,255,.18), transparent 35%),
radial-gradient(circle at 75% 20%, rgba(0,200,255,.14), transparent 40%),
radial-gradient(circle at 50% 70%, rgba(255,120,255,.12), transparent 45%),
linear-gradient(180deg,var(--bg2),var(--bg1));min-height:100vh;}
a{color:#fff;text-decoration:none}
.vml-top{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(10,0,20,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.35);}
.vml-left{display:flex;align-items:center;gap:10px;min-width:240px}
.vml-radio-btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 0 18px var(--glow);}
.vml-logo{font-weight:800;letter-spacing:.4px}
.vml-sub{font-size:12px;color:var(--muted);margin-top:2px}
.vml-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vml-nav a{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vml-right{display:flex;align-items:center;gap:10px;min-width:240px;justify-content:flex-end}
.vml-online{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
.vml-user{color:var(--muted)}
.vml-login,.vml-logout{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.vml-main{padding:92px 14px 72px;max-width:1200px;margin:0 auto}
.vml-bottom{position:fixed;bottom:0;left:0;right:0;z-index:9999;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px 14px;background:rgba(10,0,20,.88);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08);}
.vml-bottom a{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vml-bottom-online{margin-left:auto;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
@media(max-width:980px){.vml-bottom-online{margin-left:0}}
@media(max-width:640px){.vml-nav{display:none}}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;box-shadow:0 0 24px var(--glow2);}
.tile{display:block;padding:18px;border-radius:20px;background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);box-shadow:0 0 20px var(--glow);transition:transform .15s ease, box-shadow .15s ease;min-height:120px}
.tile:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(255,0,255,.35)}
.t-title{font-weight:800}
.t-sub{color:var(--muted);font-size:12px;margin-top:8px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1 1 260px}
.input,textarea,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff}
.btn{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.small{font-size:12px;color:var(--muted)}

/* ===== Profile Upgrade (safe) ===== */
.profile-wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.profile-left{flex:1 1 520px;min-width:320px}
.profile-right{flex:0 0 420px;min-width:300px}
.profile-hero{display:flex;gap:16px;align-items:center}
.avatar-ring{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 0 28px rgba(255,0,200,.18), 0 0 22px rgba(0,200,255,.12);
  position:relative;
}
.avatar-ring.vip{border-color:rgba(255,220,120,.55); box-shadow:0 0 30px rgba(255,220,120,.18), 0 0 22px rgba(255,0,200,.14);}
.avatar-initial{font-size:56px;font-weight:800;letter-spacing:.02em;line-height:1}
.avatar-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:12px;padding:4px 8px;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16)
}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14)
}
.badge-dot{width:10px;height:10px;border-radius:50%;background:rgba(120,255,160,.95);box-shadow:0 0 12px rgba(120,255,160,.55)}
.badge-ok{background:rgba(120,255,160,.16);border-color:rgba(120,255,160,.28)}
.badge-v{background:rgba(0,200,255,.14);border-color:rgba(0,200,255,.26)}
.handle{display:inline-block;margin-left:8px;font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.kpi{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.kpi .val{font-size:18px;font-weight:700}
.kpi .lab{font-size:12px;color:var(--muted);margin-top:4px}
@media(max-width:900px){.profile-right{flex:1 1 420px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.progress{height:12px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.progress>span{display:block;height:100%;width:0%;background:linear-gradient(90deg, rgba(0,200,255,.75), rgba(255,0,200,.7));box-shadow:0 0 18px rgba(255,0,200,.22)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tab{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);cursor:pointer}
.tab.active{background:rgba(0,200,255,.10);border-color:rgba(0,200,255,.25)}
.profile-card-mini{display:flex;gap:12px;align-items:center}
.mini-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.tab-panel{margin-top:10px}
.notice{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22)}
.notice.ok{border-color:rgba(120,255,160,.28);background:rgba(120,255,160,.12)}
.notice.err{border-color:rgba(255,90,90,.28);background:rgba(255,90,90,.10)}

.btn.btn-ghost{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.14)}

.outfit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
@media(max-width:900px){.outfit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.outfit-slot{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}

.wardrobe-list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.wardrobe-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.wardrobe-item.owned{border-color:rgba(120,255,160,.22)}
.wardrobe-item.locked{opacity:.65}

/* Music */
.music-list{display:grid;gap:10px;margin-top:10px}
.music-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.music-item .mi-left{min-width:220px}
.music-item .mi-mid{flex:1;display:flex;justify-content:center}
.music-item .mi-right{display:flex;gap:8px;align-items:center}
.wi-left{display:flex;gap:12px;align-items:center}
.wi-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.wi-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.price{font-weight:800}

/* ===== Coins & Credits (safe, no redesign) ===== */
.coins-wrap{display:flex;flex-direction:column;gap:14px}
.coins-hero{position:relative;overflow:hidden}
.coins-hero:before{content:"";position:absolute;inset:-2px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,0,200,.22), transparent 38%),
    radial-gradient(circle at 70% 30%, rgba(0,200,255,.18), transparent 42%),
    radial-gradient(circle at 55% 78%, rgba(255,120,255,.14), transparent 46%);
  pointer-events:none;
}
.coins-hero-top{position:relative;text-align:center;padding:10px 10px 2px}
.coins-title{margin:6px 0 2px;font-size:44px;letter-spacing:.5px}
.coins-sub{color:var(--muted);font-size:14px;margin-bottom:6px}
.coins-balance{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.coins-balance-item{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);text-align:center}
.coins-balance-item .lab{color:var(--muted);font-size:12px}
.coins-balance-item .val{font-size:28px;font-weight:900;margin-top:6px;text-shadow:0 0 18px rgba(255,0,200,.18)}

.coins-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){.coins-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.coins-title{font-size:34px}.coins-balance{grid-template-columns:1fr}.coins-grid3{grid-template-columns:1fr}}

.coins-card{border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.22));
  box-shadow:0 0 28px rgba(0,200,255,.10);
  transition:transform .15s ease, box-shadow .15s ease;
}
.coins-card:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,0,255,.22)}
.coins-card .hd{font-weight:900;font-size:18px;margin-bottom:10px}
.coins-card ul{margin:0;padding-left:18px;color:rgba(255,255,255,.88)}
.coins-card li{margin:6px 0}
.coins-card-a{box-shadow:0 0 26px rgba(255,0,200,.14)}
.coins-card-b{box-shadow:0 0 26px rgba(0,200,255,.12)}
.coins-card-c{box-shadow:0 0 26px rgba(255,200,120,.10)}

.coins-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.coins-btn{min-width:180px;text-align:center;background:rgba(255,255,255,.06)}
.coins-row{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.coins-log{flex:1 1 640px;min-width:320px}
.coins-goals{flex:0 0 380px;min-width:300px}

.coins-row-hd{display:flex;gap:10px;align-items:flex-end;justify-content:space-between}
.coins-table{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.coins-tr{display:grid;grid-template-columns:170px 1fr 120px;gap:10px;padding:10px 12px;
  background:rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.08)}
.coins-tr:last-child{border-bottom:none}
.coins-th{background:rgba(255,255,255,.06);font-weight:800}
.coins-tr .r{text-align:right;font-weight:800}
.coins-tr .muted{color:var(--muted)}
.coins-tr .pos{text-shadow:0 0 14px rgba(120,255,160,.18)}
.coins-tr .neg{text-shadow:0 0 14px rgba(255,90,90,.20)}

.coins-goal{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.coins-goal .lab{color:var(--muted);font-size:12px}
.coins-goal .val{font-size:22px;font-weight:900;margin-top:4px}
.coins-sec{opacity:.92}