:root { --fg:#111; --bg:#fff; --muted:#666; --accent:#0070f3; --line:#eee; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.wrap { max-width: 900px; margin: 24px auto; padding: 0 12px; }
header h1 { margin:0 0 6px; font-size: 20px; }
.hint { color: var(--muted); margin:0 0 12px; }
.controls.top { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.url { flex:1; padding:10px; border:1px solid var(--line); border-radius:8px; }
button, select, input[type="range"], label.sub-file { border:1px solid var(--line); background:#fafafa; padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; }
label.sub-file { display:inline-flex; align-items:center; gap:8px; }
label.sub-file input { display:none; }
.player { border:1px solid var(--line); border-radius:12px; padding:10px; }
.video-shell { position:relative; background:#000; border-radius:8px; overflow:hidden; }
video { width:100%; height:auto; display:block; background:#000; }
.controls.bottom { display:flex; align-items:center; gap:8px; padding:8px 0 0; flex-wrap:wrap; }
#seek { flex:1; }
#time { min-width: 120px; text-align:center; color:var(--muted); }
#overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(0,0,0,0.35); color:#fff; }
.hidden { display:none !important; }
.spinner { width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,0.3); border-top-color:#fff; animation:spin 1s linear infinite; }
.status { font-size: 14px; opacity:0.9; }
progress { width:240px; height:8px; background:#444; border-radius:999px; overflow:hidden; }
progress::-webkit-progress-bar { background:#444; }
progress::-webkit-progress-value { background:#fff; }
progress::-moz-progress-bar { background:#fff; }
.message { margin-top:6px; color:#b00020; min-height:1.2em; }
footer { margin-top:10px; color:var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive tweaks */
@media (max-width: 560px) {
  .controls.bottom { gap:6px; }
  #time { min-width: 96px; font-size:12px; }
}