* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

.wrap { 
    font-family: font-sans; 
    background: #100818; 
    color: #f0e0ff; 
    min-height: 540px; 
}

.hero { 
    padding: 40px 24px 28px; 
    text-align: center; 
    background: radial-gradient(ellipse at 50% 0%, #2a0a3a 0%, #100818 70%); 
    border-bottom: 1px solid #2e1040; 
}

.avatar { 
    width: 96px; 
    height: 96px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, #ff6ec7, #a855f7); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 38px; 
    margin: 0 auto 16px; 
    border: 3px solid #d946ef; 
    box-shadow: 0 0 0 5px #1e0a30; 
}

.name { 
    font-size: 23px; 
    font-weight: 700; 
    color: #d946ef; 
    margin-bottom: 8px; 
}

.status-row { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 7px; 
    margin-bottom: 14px; 
    min-height: 22px; 
}

.dot-live { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: #e91916; 
    flex-shrink: 0; 
    animation: pulse 1.3s ease-in-out infinite; 
}

.dot-off { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: #3a2550; 
    flex-shrink: 0; 
}

@keyframes pulse { 
    0%,100%{opacity:1;transform:scale(1)} 
    50%{opacity:.5;transform:scale(.8)} 
}

.status-text { 
    font-size: 12px; 
    letter-spacing: .06em; 
}

.bio { 
    font-size: 14px; 
    color: #d4b8f0; 
    line-height: 1.7; 
    margin-bottom: 18px; 
}

.tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    justify-content: center; 
    min-height: 28px; 
    max-width: 420px; 
    margin: 0 auto; 
}

.tag { 
    background: #1e0a30; 
    color: #c084fc; 
    font-size: 11px; 
    padding: 3px 11px; 
    border-radius: 20px; 
    border: 1px solid #4a1a70; 
}

.tag-dim { 
    color: #5a3a80; 
    border-color: #2a1050; 
}

.preview-wrap { 
    padding: 20px 24px 4px; 
    max-width: 420px; 
    margin: 0 auto; 
}

.preview-link { 
    display: block; 
    position: relative; 
    border-radius: 12px; 
    overflow: hidden; 
    border: 2px solid #9147ff; 
    text-decoration: none; 
    cursor: pointer; 
}

.preview-link:hover .overlay { 
    background: rgba(0,0,0,.15); 
}

.preview-img { 
    width: 100%; 
    display: block; 
}

.overlay { 
    position: absolute; 
    inset: 0; 
    background: rgba(0,0,0,.32); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    transition: background .15s; 
}

.play-btn { 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    background: #9147ff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.stream-title { 
    color: #fff; 
    font-size: 13px; 
    font-weight: 500; 
    max-width: 80%; 
    text-align: center; 
    text-shadow: 0 1px 6px rgba(0,0,0,.9); 
    line-height: 1.4; 
}

.stream-game { 
    color: #e0b8ff; 
    font-size: 11px; 
    background: rgba(0,0,0,.55); 
    padding: 2px 10px; 
    border-radius: 20px; 
}

.live-pill { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    background: #e91916; 
    color: #fff; 
    font-size: 10px; 
    font-weight: 700; 
    padding: 2px 8px; 
    border-radius: 4px; 
    letter-spacing: .07em; 
}

.viewers-pill { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: rgba(0,0,0,.65); 
    color: #fff; 
    font-size: 11px; 
    padding: 2px 9px; 
    border-radius: 4px; 
}

.section { 
    padding: 24px 24px 0; 
    max-width: 420px; 
    margin: 0 auto; 
}

.section-title { 
    font-size: 10px; 
    font-weight: 600; 
    letter-spacing: .12em; 
    color: #6b4a90; 
    text-transform: uppercase; 
    margin-bottom: 12px; 
}

.btn-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 9px; 
}

.btn { 
    display: flex; 
    align-items: center; 
    gap: 9px; 
    border-radius: 12px; 
    font-size: clamp(14px, 2vw, 18px);
    padding: clamp(10px, 1.5vw, 16px) clamp(14px, 2vw, 20px);
    font-weight: 500; 
    color: #fff; 
    text-decoration: none; 
    transition: opacity .15s, transform .1s; 
}

.btn:hover { 
    opacity: .82; 
    transform: translateY(-1px); 
}

.btn:active { 
    transform: scale(.97); 
}

.btn svg { 
    width: 18px; 
    height: 18px; 
    flex-shrink: 0; 
}

.btn-twitch { 
    background: #9147ff; 
}

.btn-yt { 
    background: #cc0000; 
}

.btn-tg { 
    background: #229ed9; 
}

.btn-tiktok { 
    background: #1a1a2e; 
    border: 1px solid #2e1f4e; 
}

.btn-da { 
    background: #f2a003; 
    color: #1a0800; 
}

.btn-don { 
    background: #1a9e4a; 
}

.footer { 
    padding: 20px 24px 28px; 
    max-width: 420px; 
    margin: 0 auto; 
}

.contact-item { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 6px 0; 
    font-size: 13px; 
}

.contact-label { 
    color: #6b4a90; 
    width: 68px; 
    flex-shrink: 0; 
    font-size: 12px; 
}

.contact-val { 
    color: #c084fc; 
}

.copyright { 
    font-size: 11px; 
    color: #3a1a50; 
    margin-top: 14px; 
    text-align: center; 
}

.skeleton { 
    background: #1e0a30; 
    border-radius: 20px; 
    height: 22px; width: 80px; 
    display: inline-block; 
    animation: shimmer 1.4s ease-in-out infinite; 
}

@keyframes shimmer { 
    0%,100%{opacity:.4} 
    50%{opacity:.8} 
}