body { background:#121212; color:#ffffff; font-family:'Segoe UI',sans-serif; display:flex; justify-content:center; align-items:flex-start; min-height:100vh; margin:0; padding:15px 10px; box-sizing:border-box; }
.card { background:#1e1e1e; padding:24px; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,0.5); text-align:center; width:100%; max-width:420px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; }
.hdr { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #282828; width:100%; }
.icon { width:clamp(54px,15vw,68px); height:clamp(54px,15vw,68px); object-fit:cover; border-radius:12px; }
.stk { display:flex; flex-direction:column; line-height:1.3; }
.t1, .t2 { font-size:clamp(18px,5vw,22px); font-weight:700; }
.art { width:100%; max-width:320px; aspect-ratio:1/1; object-fit:cover; border-radius:18px; margin-bottom:20px; box-shadow:0 5px 15px rgba(0,0,0,0.3); background:#282828; }
h1 { font-size:clamp(20px,5.5vw,24px); margin:10px 0 6px 0; color:#1db954; word-wrap:break-word; overflow-wrap:break-word; }
h2 { font-size:clamp(14px,4vw,16px); margin:0 0 20px 0; color:#b3b3b3; font-weight:400; }
.v-box { background:#0b0b0b; border:2px solid #282828; border-radius:10px; padding:12px; margin:0 auto 22px auto; box-sizing:border-box; display:flex; flex-direction:column; gap:8px; width:100%; }
.v-ch { display:flex; align-items:center; gap:8px; }
.v-lbl { font-size:11px; font-weight:800; color:#555555; width:10px; }
.v-leds { display:flex; gap:3px; flex-grow:1; }
.led { height:10px; flex-grow:1; background:#222222; border-radius:2px; transition:background 0.04s ease; }
audio { width:100%; margin-top:5px; border-radius:30px; background:#b7111e; height:48px; }
audio::-webkit-media-controls-panel { background-color:#b7111e !important; }
audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display { color:#ffffff !important; }
audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-mute-button { background-color:#ffffff !important; border-radius:50%; }
.h-box { width:100%; max-width:340px; margin-top:24px; text-align:left; background:#141414; border:1px solid #282828; border-radius:12px; padding:14px; box-sizing:border-box; }
.h-hdr { font-size:13px; font-weight:700; color:#1db954; text-transform:uppercase; border-bottom:1px solid #282828; padding-bottom:6px; margin-bottom:10px; }
.h-list { list-style:none; margin:0; padding:0; max-height:120px; overflow-y:auto; font-size:12px; color:#b3b3b3; }
.h-item { padding:4px 0; border-bottom:1px dashed #222222; display:flex; justify-content:space-between; }
.h-time { color:#555555; font-family:monospace; }