* { box-sizing: border-box; }
body { margin: 0; font-family: Segoe UI, Arial, sans-serif; background: #f4f6fb; color: #1a2233; }
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: #0f172a; color: #e2e8f0; padding: 20px; }
.logo { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.menu button { width: 100%; border: 0; background: #1e293b; color: #e2e8f0; padding: 12px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.menu button.active { background: #2563eb; }
.main { padding: 20px; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.input, .button, .select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; }
.button { background: #2563eb; color: #fff; cursor: pointer; border: 0; }
.button.secondary { background: #334155; }
.muted { color: #64748b; font-size: 14px; }
.viewer-wrap { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
.viewer-top { background: #0f172a; color: #fff; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; }
.player-area { display: grid; grid-template-columns: 1fr; padding: 18px; gap: 12px; }
.video-box { background: #000; border-radius: 12px; min-height: 420px; overflow: hidden; }
.video-box video { width: 100%; height: 100%; object-fit: contain; }
.transcript { background: #fff; border-radius: 12px; padding: 10px; height: 220px; overflow: auto; border: 1px solid #e2e8f0; }
.transcript p { margin: 6px 0; }
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: flex; gap: 12px; align-items: center; }
  .menu { display: flex; gap: 8px; }
  .menu button { margin: 0; }
}