* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; background: #0b0b0b; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-weight: 700; font-size: 20px; color: #fafafa; letter-spacing: .5px; }
.controls { display: flex; align-items: center; gap: 8px; }

select, button { background: #171717; color: #f1f1f1; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: not-allowed; }

.player { margin-top: 16px; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid #1f1f1f; }
.video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
video { width: 100%; height: 100%; display: block; background: #000; }

.video-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hint { color: #f5f5f5; font-size: 14px; background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 999px; }

.timeline { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #0e0e0e; border-top: 1px solid #1f1f1f; color: #d6d6d6; }
.progress { flex: 1; height: 6px; background: #1b1b1b; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0%; background: #4ade80; }

.footer-controls { display: flex; gap: 8px; align-items: center; }
.time { font-variant-numeric: tabular-nums; font-size: 12px; color: #aaa; min-width: 90px; text-align: right; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip { background: #171717; color: #e5e5e5; border: 1px solid #2a2a2a; padding: 8px 10px; border-radius: 999px; text-align: center; cursor: pointer; }
.chip.active { outline: 2px solid #4ade80; }

/* Optional: prevent text selection & long-press menu */
* { -webkit-tap-highlight-color: transparent; }
.no-select { -webkit-user-select: none; user-select: none; }