*{box-sizing:border-box;user-select:none}

body{
    background:#000;
    color:#b0b0b0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.card{
    width:420px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(10,10,10,.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding:16px;
}

.bar{
    height:6px;
    border-radius:999px;
    overflow:hidden;
    background:#050505;
}

.fill{
    height:100%;
    background:linear-gradient(90deg,#ffffff,#8EA2FF);
    transition:width .25s linear;
}

.line{
    font-size:12px;
    color:#777;
    opacity:.35;
}

.line.near{
    opacity:.6;
    color:#aaa;
}

.line.active{
    opacity:1;
    color:#fff;
    text-shadow:0 2px 12px rgba(255,255,255,.15);
    transform:scale(1.05);
}

.header{display:flex;gap:14px;align-items:center}
.avatarWrap{
    width:68px;
    height:68px;
    position:relative;
}

.avatar{
    width:68px;
    height:68px;
    border-radius:50%;
    border:1px solid #222;
    background:#060606;
    position:relative;
    z-index:1;
}

.avatarDecor{
    position:absolute;
    top:-6px;
    left:-6px;
    width:80px;
    height:80px;
    pointer-events:none;
    z-index:2;
}

.statusDot{
    position:absolute;
    right:4px;
    bottom:4px;
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid #0a0a0a;
    background:#555;
    z-index:3;
    animation:pulse 2.5s infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(255,255,255,.15)}
    70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}
    100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.info{flex:1;min-width:0}
.username{color:#ddd;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom{font-size:11px;color:#777;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity{font-size:11px;color:#aaa;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotifyWrap{margin-top:14px;padding-top:14px;border-top:1px solid #222}
.spotify{display:grid;grid-template-columns:56px 1fr;gap:12px}
.cover{width:56px;height:56px;border-radius:10px;border:1px solid #222;background:#060606;object-fit:cover}
.track{
    color:#ddd;
    font-size:12px;
    line-height:1.35;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
    word-break:break-word;
}

.artist{
    font-size:11px;
    color:#777;
    margin-top:4px;

    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.bar{margin-top:10px;height:6px;border:1px solid #222;background:#050505}
.fill{height:100%;width:0%;background:#5865F2;transition:width .2s linear}
.time{font-size:10px;color:#666;display:flex;justify-content:space-between;margin-top:6px}
.lyrics{margin-top:14px;padding-top:14px;border-top:1px dashed #222}
.lyricsViewport{
    height:120px;
    overflow:hidden;
    position:relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}
.lyricsInner{
    position:absolute;
    left:0;right:0;
    text-align:center;
    will-change:transform;
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.line{
    padding:6px 12px;
    font-size:12px;
    line-height:1.45;
    color:#666;
    opacity:.35;
    transition:opacity .22s,color .22s,transform .22s;
    word-break:break-word;
}
.line.near{opacity:.6;color:#999}
.line.active{opacity:1;color:#fff;transform:scale(1.05)}
.hide{display:none}
.usernameRow{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
}

.guildTag{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 6px;
    border-radius:6px;
    background:#1e1f22;
    border:1px solid rgba(255,255,255,.06);
    font-size:11px;
    font-weight:600;
    color:#dbdee1;
    line-height:1;
    flex-shrink:0;
}

.guildBadge{
    width:14px;
    height:14px;
    border-radius:3px;
}

.hide{
    display:none;
}

.deviceList{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-left:6px;
}

.deviceIcon{
    display:inline-flex;
    align-items:center;
}

.deviceIcon svg{
    display:block;
    fill:#aaa;
}