*{box-sizing:border-box}
:root{
  --bg0:#0b1020;
  --bg1:#0f1528;
  --stroke:rgba(255,255,255,.16);
  --fg:255,255,255;
  --sp:#1DB954;
  --chip:#ffffff1f;
  --chip-stroke:#ffffff2d;
  --moodA: rgba(88,101,242,.18);
  --moodB: rgba(29,185,84,.14);
}
html,body{height:100%}
body{
  margin:0;
  color:rgb(var(--fg));
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: linear-gradient(180deg,var(--bg0),var(--bg1));
}
.bg{position:fixed; inset:0; pointer-events:none; background: radial-gradient(1000px 700px at 10% -10%, rgba(88,101,242,.18), transparent), radial-gradient(800px 600px at 110% 0%, rgba(29,185,84,.14), transparent); filter: blur(110px) saturate(120%); opacity:.28}
.mood{position:fixed; inset:0; pointer-events:none; transition:opacity .6s ease, background .6s ease; opacity:.32; mix-blend-mode:screen; background: radial-gradient(1200px 800px at 20% -10%, var(--moodA), transparent), radial-gradient(800px 600px at 120% 10%, var(--moodB), transparent)}
body.state-online{--moodA: rgba(60,186,84,.24); --moodB: rgba(60,186,84,.14)}
body.state-idle{--moodA: rgba(250,188,45,.24); --moodB: rgba(250,188,45,.14)}
body.state-dnd{--moodA: rgba(234,67,53,.20); --moodB: rgba(234,67,53,.10)}
body.state-offline{--moodA: rgba(88,101,242,.14); --moodB: rgba(88,101,242,.08)}
.container{max-width:980px;margin:28px auto;padding:0 18px;position:relative}
.stage{position:relative}
.bgfx{position:absolute; inset:-80px; z-index:0; pointer-events:none}
.bgfx:before,.bgfx:after{content:""; position:absolute; width:360px; height:360px; border-radius:50%; filter: blur(70px); opacity:.22}
.bgfx:before{left:-40px; top:-20px; background:#5865F2; animation:float1 18s ease-in-out infinite}
.bgfx:after{right:-20px; top:40%; background:#1DB954; animation:float2 22s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,20px) scale(1.04)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-10px) scale(1.05)}}
.panel{position:relative; z-index:1; background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.05)); border:1px solid var(--stroke); border-radius:18px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); overflow:hidden; transform:translateZ(0); transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.tap:hover{transform:translateY(-1px)}
.tap:active{transform:scale(.998)}
[data-ripple]{position:relative; overflow:hidden}
.ripple{position:absolute; border-radius:999px; transform:translate(-50%,-50%); pointer-events:none; width:12px; height:12px; background:rgba(255,255,255,.15); animation:ripple .65s ease-out forwards}
@keyframes ripple{from{opacity:.35; width:12px; height:12px}to{opacity:0; width:160px; height:160px}}
.profile .banner{height:220px; background:linear-gradient(135deg, rgba(88,101,242,.22), rgba(29,185,84,.16))}
.banner-img{width:100%;height:100%;object-fit:cover;display:block}
.head{display:flex;gap:16px;align-items:flex-end;padding:0 20px;margin-top:-44px}
.avatar{position:relative;width:112px;height:112px;border-radius:999px}
.avatar-img{width:112px;height:112px;border-radius:999px;display:block;box-shadow:0 10px 28px rgba(0,0,0,.42)}
.state{position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;border-radius:6px;background:transparent;padding:0}
.info{display:flex;flex-direction:column;gap:6px}
.name{font-size:1.8rem;font-weight:800;letter-spacing:.2px}
.handle{opacity:.8}
.custom-inline{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:var(--chip);border:1px solid var(--chip-stroke);width:max-content;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-inline .emoji{width:18px;height:18px;display:inline-block;vertical-align:middle}
.presence{margin-top:2px;padding:4px 10px;border-radius:999px;border:1px solid var(--chip-stroke);background:var(--chip);font-size:.85rem;opacity:.9}
.hide{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-stroke);font-size:.85rem;transition:transform .2s ease, background .2s ease}
.chip:hover{transform:translateY(-1px);background:#ffffff24}
.chip img{width:18px;height:18px;border-radius:4px}
.device.state-online{box-shadow:0 0 0 1px #3CBA54 inset}
.device.state-idle{box-shadow:0 0 0 1px #FABC2D inset}
.device.state-dnd{box-shadow:0 0 0 1px #EA4335 inset}
.actions{display:flex;flex-wrap:wrap;gap:10px;padding:8px 20px 14px;border-top:1px solid var(--stroke)}
.btn{padding:8px 12px;border-radius:12px;border:1px solid var(--chip-stroke);background:var(--chip);color:#fff;font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn.link{display:inline-flex;align-items:center}
.widget{padding:14px;border-top:1px solid var(--stroke)}
.widget-head{display:flex;align-items:center;gap:10px;padding:6px 10px 10px}
.dot{width:10px;height:10px;border-radius:999px;background:var(--sp);box-shadow:0 0 10px var(--sp)}
.dot-game{background:#7aa2ff; box-shadow:0 0 10px #7aa2ff}
.title{opacity:.9;font-weight:600}
.widget-body{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:0 6px 10px}
.art{width:120px;height:120px;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.art-img{width:100%;height:100%;object-fit:cover}
.meta{flex:1 1 260px;min-width:220px}
.track{font-weight:800;font-size:1.15rem;margin:.2rem 0;background:linear-gradient(90deg,#fff,#cdd3ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.artist{opacity:.85}
.bar{height:8px;background:rgba(255,255,255,.12);border-radius:999px;margin-top:12px;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#1DB954,#1ed760)}
.time{display:flex;justify-content:space-between;font-size:.85rem;opacity:.8;margin-top:6px}
.about{display:block;padding:6px 20px 18px}
.about-left{max-width:720px}
.about-title{font-weight:700;margin-bottom:6px;opacity:.9}
@media (max-width: 640px){
  .avatar,.avatar-img{width:96px;height:96px}
  .state{width:24px;height:24px;right:-6px;bottom:-6px}
  .name{font-size:1.5rem}
  .art{width:96px;height:96px}
  .meta{min-width:180px}
  .custom-inline{max-width:calc(100vw - 180px)}
}