:root {
  --bg: #09090c;
  --surface: #15131a;
  --line: rgba(255, 255, 255, .1);
  --text: #f4f1f6;
  --muted: #948e9d;
  --accent: #ed215b;
  --accent-bright: #ff5e8b;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 70% -10%, #2a1023, transparent 32rem), var(--bg); font-family: "Outfit", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.player-header, .player-layout, .player-footer { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.player-header { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 8px; align-items: center; font-size: 19px; font-weight: 800; letter-spacing: -.06em; }
.brand > span:last-child > span { color: var(--accent); }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, var(--accent-bright), #b30944); color: white; font-size: 17px; font-style: italic; }
.back-link { color: #c3bdc8; font-size: 13px; transition: color .2s; }.back-link span { margin-right: 7px; color: var(--accent-bright); font-size: 17px; }.back-link:hover { color: #fff; }
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; padding: 55px 0 40px; }
.video-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 48% 45%, #3d1a2d, #0d0c10 64%); box-shadow: 0 24px 54px rgba(0,0,0,.45); }
.video-wrap::before { content: ""; position: absolute; z-index: 1; inset: 0; opacity: .4; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 100% 4px; }
video { width: 100%; height: 100%; display: block; background: #050506; }
.start-button { position: absolute; z-index: 2; top: 50%; left: 50%; min-height: 49px; padding: 0 23px; display: inline-flex; align-items: center; gap: 11px; border: 1px solid #ff8cac; border-radius: 3px; color: white; background: linear-gradient(100deg, #e21753, #962ccf); box-shadow: 0 10px 28px rgba(225,29,93,.4); font-size: 14px; font-weight: 700; transform: translate(-50%, -50%); transition: transform .2s, box-shadow .2s; }
.start-button:hover { transform: translate(-50%, calc(-50% - 3px)); box-shadow: 0 15px 33px rgba(225,29,93,.58); }
.play-triangle { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid white; }
.player-message { position: absolute; z-index: 3; right: 16px; bottom: 15px; left: 16px; margin: 0; padding: 10px 12px; color: #fff; background: rgba(117, 18, 47, .91); font-size: 12px; line-height: 1.5; }
.video-caption { display: flex; align-items: end; justify-content: space-between; padding-top: 20px; }.eyebrow { margin: 0 0 8px; color: var(--accent-bright); font: 10px "DM Mono", monospace; letter-spacing: .15em; }.video-caption h1, .playlist-heading h2 { margin: 0; letter-spacing: -.04em; }.video-caption h1 { font-size: 25px; }.quality, .stream-tag { padding: 4px 6px; color: white; background: var(--accent); font: 10px "DM Mono", monospace; letter-spacing: .08em; }
.playlist-panel { padding: 24px 20px; align-self: start; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }.playlist-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.playlist-heading h2 { font-size: 20px; }.playlist-heading > span { color: var(--muted); font-size: 11px; }
.playlist { border-top: 1px solid var(--line); }.stream-item { width: 100%; min-height: 58px; padding: 0; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; border: 0; border-bottom: 1px solid var(--line); color: #bdb7c2; background: transparent; text-align: left; transition: .2s; }.stream-item:hover, .stream-item.is-active { padding: 0 9px; color: #fff; background: rgba(237,33,91,.1); }.stream-number { color: #827b87; font: 12px "DM Mono", monospace; }.stream-name { font-size: 13px; }.stream-tag { background: #4a2638; font-size: 9px; }
.tip-box { margin-top: 22px; padding: 14px; border-left: 2px solid var(--accent); background: rgba(237,33,91,.07); }.tip-box strong { color: #f3e7ec; font-size: 12px; }.tip-box p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.player-footer { padding: 25px 0 36px; border-top: 1px solid var(--line); color: #746e79; font-size: 11px; text-align: center; }

@media (max-width: 800px) { .player-header, .player-layout, .player-footer { width: min(100% - 32px, 620px); }.player-layout { grid-template-columns: 1fr; padding-top: 32px; }.playlist-panel { width: 100%; }.video-caption h1 { font-size: 22px; } }
@media (max-width: 460px) { .player-header { height: 64px; }.back-link { font-size: 12px; }.player-layout { padding-top: 25px; }.start-button { width: max-content; min-height: 44px; padding: 0 16px; font-size: 12px; }.video-caption { align-items: start; flex-direction: column; gap: 10px; } }