/* ...existing styles... */
:root { --bg: #fff; --text: #111; --muted: #666; --border: #e5e5e5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
.site-header { padding: 32px 20px 8px; text-align: center; }
.site-header h1 { margin: 0; font-size: 28px; letter-spacing: -0.02em; }
.sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.layout { max-width: 980px; margin: 0 auto; padding: 20px; display: grid; gap: 24px; }
.controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.control label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); }
.btn { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.primary { background: #111; color: #fff; border-color: #111; }
.player-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; }
.video-wrap { position: relative; background: #000; aspect-ratio: 16 / 9; }
#player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.meta { padding: 16px; display: grid; align-content: start; gap: 10px; }
.meta h2 { margin: 0; font-size: 18px; }
.meta p { margin: 0; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; padding: 6px 8px; border: 1px dashed var(--border); border-radius: 999px; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.favorites { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.fav-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.fav-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.fav-title { font-size: 14px; }
.fav-meta { color: var(--muted); font-size: 12px; }
.fav-actions { display: flex; gap: 6px; }
@media (max-width: 900px) { .controls { grid-template-columns: repeat(3, 1fr) auto; } .player-card { grid-template-columns: 1fr; } }
/* ...existing styles... */