.live-page { --live-blue:#075ec8; --live-cyan:#14bde8; --live-ink:#07152f; --live-muted:#5c6d86; background:#f6faff; overflow:hidden; }
.live-hero { position:relative; min-height:560px; overflow:hidden; color:#fff; background:#07152f; }
.live-hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.live-hero-slide.is-active, .live-hero-slide:first-child { opacity:1; }
.live-hero-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.08); }
.live-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,13,32,.92), rgba(3,13,32,.54), rgba(3,13,32,.2)); }
.live-hero-content { position:relative; z-index:2; display:grid; align-content:center; min-height:560px; max-width:780px; }
.live-kicker { display:inline-flex; align-items:center; gap:8px; width:max-content; color:#91edff; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.live-kicker.dark { color:var(--live-blue); }
.live-hero h1 { margin:14px 0 12px; color:#fff; font-size:clamp(46px, 7vw, 82px); line-height:.98; letter-spacing:-.05em; }
.live-hero p { max-width:680px; color:#d9ecff; font-size:clamp(17px, 2vw, 22px); line-height:1.55; }
.live-btn { display:inline-flex; align-items:center; justify-content:center; width:max-content; min-height:46px; margin-top:20px; padding:12px 22px; border-radius:999px; color:#fff !important; background:linear-gradient(135deg, var(--live-blue), var(--live-cyan)); font-size:12px; font-weight:900; text-transform:uppercase; box-shadow:0 18px 40px rgba(0,122,255,.3); }
.live-hero-dots { position:absolute; z-index:4; left:50%; bottom:24px; display:flex; gap:8px; transform:translateX(-50%); }
.live-hero-dots button { width:9px; height:9px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.5); }
.live-hero-dots button.is-active { width:30px; background:#fff; }
.live-watch-grid { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(300px, .55fr); gap:24px; align-items:stretch; }
.live-player-card, .live-info-card, .live-video-card { border:1px solid #dbe7f5; border-radius:24px; background:#fff; box-shadow:0 18px 48px rgba(7,21,47,.08); }
.live-player-card { overflow:hidden; }
.live-player-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid #e6eef8; }
.live-player-head span { color:#c72222; font-weight:900; text-transform:uppercase; font-size:12px; }
.live-player-head span i { font-size:9px; animation:live-pulse 1.4s infinite; }
.live-player-head a { color:var(--live-blue); font-size:12px; font-weight:900; text-transform:uppercase; }
@keyframes live-pulse { 50% { opacity:.35; } }
.live-embed { position:relative; aspect-ratio:16/9; background:#061735; }
.live-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.live-empty-player { display:grid; height:100%; place-content:center; padding:24px; color:#fff; text-align:center; }
.live-empty-player i { color:#ff3434; font-size:48px; }
.live-info-card { padding:28px; }
.live-info-card h2 { margin:10px 0; color:var(--live-ink); font-size:clamp(28px, 4vw, 42px); line-height:1.05; }
.live-info-card p { color:var(--live-muted); line-height:1.7; }
.live-steps { display:grid; gap:10px; margin-top:20px; }
.live-steps b { display:flex; gap:10px; align-items:center; padding:12px; border-radius:14px; color:#17446f; background:#eef8ff; font-size:13px; }
.live-section-head { max-width:780px; margin:0 auto 32px; text-align:center; }
.live-section-head h2 { margin:8px 0; color:var(--live-ink); font-size:clamp(32px, 5vw, 54px); letter-spacing:-.035em; }
.live-section-head p { color:var(--live-muted); font-size:17px; }
.live-video-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.live-video-card { overflow:hidden; }
.live-video-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#dce9f7; }
.live-video-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease, filter .35s ease; }
.live-video-thumb span { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(4,18,43,.18); }
.live-video-thumb span i { display:grid; width:54px; height:54px; place-items:center; border-radius:50%; background:linear-gradient(135deg, #ff2525, #d60707); box-shadow:0 15px 35px rgba(214,7,7,.32); }
.live-video-card:hover img { transform:scale(1.04); filter:brightness(.9); }
.live-video-card > div { padding:18px; }
.live-video-card small { color:var(--live-blue); font-size:12px; font-weight:900; text-transform:uppercase; }
.live-video-card h3 { margin:6px 0 8px; color:var(--live-ink); font-size:20px; line-height:1.18; }
.live-video-card p { color:var(--live-muted); font-size:14px; }
.live-empty-list { padding:56px 20px; border:1px dashed #bdd0e7; border-radius:24px; background:#fff; text-align:center; }
.live-empty-list i { color:var(--live-blue); font-size:44px; }
@media (max-width: 960px) { .live-watch-grid, .live-video-grid { grid-template-columns:1fr; } .live-hero, .live-hero-content { min-height:460px; } }
@media (max-width: 560px) { .live-hero, .live-hero-content { min-height:420px; } .live-player-head { align-items:flex-start; flex-direction:column; } .live-info-card { padding:22px; } }