/* Minimal, Videy-like layout */
:root{
  --bg:#0b0c10;
  --card:#12131a;
  --card2:#0f1016;
  --text:#e9e9ef;
  --muted:#a6a6b3;
  --line:#1e2030;
  --btn:#2d6cdf;
  --btn2:#202336;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #07070b 0%, #0b0c10 60%, #0b0c10 100%);
  color:var(--text);
}

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:rgba(8,9,12,.7);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand__dot{width:10px;height:10px;border-radius:999px;background:#5b7cff;box-shadow:0 0 18px rgba(91,124,255,.65)}
.brand__text{font-size:18px}

.nav{display:flex;gap:14px}
.nav__link{
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
}
.nav__link:hover{background:rgba(255,255,255,.06);color:var(--text)}

.page{
  max-width:1100px;
  margin:18px auto 40px;
  padding:0 14px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:16px;
}
@media (max-width: 940px){
  .page{grid-template-columns: 1fr; }
  .sidebar{order:2}
}

.player-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.player{
  width:100%;
  background: var(--card2);
  position:relative;
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
}

.embed, .mp4{
  width:100%;
  height:100%;
}

.embed iframe{
  width:100%;
  height:100%;
  border:0;
}

.mp4 video{
  width:100%;
  height:100%;
  background:#000;
}

.empty{
  text-align:center;
  padding:24px;
}
.empty__title{font-size:16px;font-weight:650;margin-bottom:8px}
.empty__hint{font-size:13px;color:var(--muted)}
.empty code{color:#c7c7ff}

.actions{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--line);
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:650;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{
  background:var(--btn);
  color:white;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{
  background:transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

.sidebar .side-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.side-title{
  font-weight:700;
  font-size:14px;
  color:var(--muted);
  margin-bottom:12px;
}

.hidden{display:none!important}