:root{
  --header-h: 84px;
  --footer-h: 56px;

  --bg1:#0f1226; --bg2:#1b1f3b;
  --primary:#8f94fb; --accent:#4e54c8;
  --text:#fff; --muted:#cfd2ff;
  --radius:12px; --shadow:0 10px 25px rgba(0,0,0,.25);
}

/* Base layout */
html, body { height: 100%; }
body{
  margin:0; color:var(--text);
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 20% 0%, var(--bg2), transparent),
              linear-gradient(135deg, var(--bg1), var(--bg2));
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
}

/* Header & footer */
.header, .footer{
  position: fixed; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.header{ top: 0; height: var(--header-h); }
.footer{
  bottom: 0; height: var(--footer-h);
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: none;
}
.brand{
  font-weight: 800; letter-spacing: .3px; text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; font-size: 1.1rem;
}
.actions{ display:flex; gap: 10px; align-items:center; flex-wrap: nowrap; }

/* Main area */
.main{
  width: 100%; max-width: 1000px; margin: 0 auto; padding: 16px;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  display: flex; flex-direction: column; justify-content: center;
}

/* Card & video */
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); text-align:center;
}
video{
  width: 100%; max-width: 900px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background:#000;
}

/* Buttons */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap:10px;
  border: none; border-radius: var(--radius); cursor: pointer;
  color:#fff; background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: var(--shadow); transition: transform .08s ease, opacity .2s ease;
  padding: 12px 18px; font-size: 1rem;
}
.btn.big{ padding: 16px 24px; font-size: 1.05rem; }
.btn.ghost{
  background: transparent; border: 1px solid rgba(255,255,255,.25); box-shadow: none;
}
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Badges */
.badges{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 0; }
.badge{ padding:4px 10px; border-radius:999px; font-size:.85rem; background:rgba(255,255,255,.08); }
.badge.live{ background:#e11d48; }

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--footer-h) + 12px);
  background:#111827; color:#fff; padding:10px 14px;
  border-radius:10px; box-shadow:var(--shadow); opacity:.95; z-index:9999;
  border:1px solid rgba(255,255,255,.08); display:none;
}

/* Skeleton */
.skel{
  width:100%; max-width:900px; height:360px; border-radius:var(--radius);
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02), rgba(255,255,255,.06));
  background-size:200% 100%; animation:shine 1.3s linear infinite;
  border:1px solid rgba(255,255,255,.08);
}
@keyframes shine{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Logo (home) */
.logo{
  width:90px; height:90px; border-radius:22px;
  background: conic-gradient(from 180deg, var(--accent), var(--primary));
  display:inline-flex; align-items:center; justify-content:center;
  margin: 0 auto 12px; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800; font-size: 1.4rem;
}

/* Player wrapper */
.player { position: relative; display: inline-block; width: 100%; max-width: 900px; }
.player video { display:block; width:100%; height:auto; }

/* Overlay (we only keep top-left) */
.player .overlay{
  position:absolute; left:0; right:auto; display:flex; align-items:center; gap:8px; padding:8px 10px;
  opacity:0; transition:opacity .2s ease;
}
.player .overlay.top-left{ top:10px; left:10px; opacity:1; pointer-events:none; }

/* Outside toolbar (quality) */
.toolbar{
  display:flex; gap:10px; align-items:center; justify-content:center;
  margin: 12px auto 0;
}
.toolbar label{ opacity:.9; }
.toolbar select{
  appearance:none; background:#111827; color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:8px 10px; min-width: 140px; cursor:pointer;
  box-shadow: var(--shadow);
}

/* Responsive */
@media (max-width: 820px){
  :root{ --header-h: 108px; }
  .header{ flex-direction: column; justify-content:center; gap:10px; padding-top:8px; padding-bottom:8px; }
  .actions{ flex-wrap: wrap; justify-content:center; }
  .btn.big{ padding: 16px 22px; font-size: 1.05rem; }
}
@media (max-width: 480px){
  :root{ --header-h: 132px; }
  .actions .btn{ width: 100%; }
}

/* iOS safe areas */
.header{ padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
.footer{ padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }