:root {
  color-scheme: light dark;
  --background: #f5f5f7;
  --surface: #fff;
  --text: #1d1d1f;
  --muted: #626269;
  --line: #e5e5ea;
  --accent: #0066cc;
  --soft-accent: #edf5ff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--background); color: var(--text); }
body { min-height: 100svh; overscroll-behavior: none; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:disabled { opacity: .55; cursor: wait; }
button, a, input { outline-offset: 5px; }
:focus-visible { outline: 3px solid #4a9fff; }
button { transition: background .18s, transform .18s, opacity .18s; }
button:active:not(:disabled) { transform: scale(.96); }
svg { width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; min-height: 100svh; }
#setup { overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.setup-shell { width: min(100%, 420px); min-height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; padding: 36px 0; }
.setup-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 44px; font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.brand-mark { display: grid; place-items: center; background: var(--text); color: var(--surface); width: 34px; height: 34px; border-radius: 10px; }
.brand-mark svg { width: 23px; height: 23px; }
.setup-title { margin: 0; font-size: clamp(30px, 6vw, 38px); letter-spacing: -1.3px; font-weight: 700; line-height: 1.25; }
.setup-subtitle { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 16px 0 30px; }
.import-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: 0 4px 18px #00000003; }
.import-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.file-symbol { display: grid; place-items: center; background: var(--soft-accent); color: var(--accent); width: 44px; height: 50px; border-radius: 12px; }
.file-symbol svg { width: 26px; height: 26px; }
.import-heading h2 { font-size: 17px; margin: 0 0 5px; font-weight: 600; }
.import-heading p { font-size: 13px; color: var(--muted); margin: 0; }
.load-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 16px; color: #fff; background: var(--accent); border: 0; border-radius: 13px; font-size: 16px; font-weight: 600; }
.load-button:hover { background: #005ab6; }
.load-button .spinner { display: none; width: 18px; height: 18px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.load-button[aria-busy='true'] .spinner { display: block; }
.error-msg:empty { display: none; }
.error-msg { color: #b83222; font-size: 14px; line-height: 1.6; margin: 16px 0 0; }
.setup-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; line-height: 1.7; margin: 16px 2px 0; }
.setup-note svg { width: 14px; height: 14px; }
.quick-guide { display: flex; gap: 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide-item { flex: 1; }
.guide-item svg { width: 21px; height: 21px; color: var(--muted); margin-bottom: 8px; }
.guide-item h3 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.guide-item p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
#player { background: #000; color: #f5f5f7; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; --muted: #a1a1aa; color-scheme: dark; }
.player-toolbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); background: linear-gradient(#000c, #0000); display: flex; align-items: center; gap: 12px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #ffffff14; border-radius: 50%; color: #d1d1d6; background: #1c1c1e; }
.icon-button:hover { background: #2c2c2e; }
.file-info { min-width: 0; flex: 1; }
.file-info strong { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-info span { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.player-chrome { transition: opacity .25s, transform .25s; }
#player.controls-hidden .player-chrome { opacity: 0; pointer-events: none; }
#player.controls-hidden .player-toolbar { transform: translateY(-12px); }
#subtitle-area { position: absolute; left: 0; right: 0; bottom: max(32vh, var(--subtitle-reserve, 270px)); display: flex; justify-content: center; padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right)); pointer-events: none; z-index: 10; }
#subtitle { text-align: center; max-width: min(90vw, 1200px); line-height: 1.4; overflow-wrap: anywhere; }
#subtitle .primary { color: #ededf0; font-weight: 400; margin-bottom: 5px; }
#subtitle .secondary { color: #a9a9b1; font-weight: 400; }
.player-empty { position: absolute; inset: 20% 24px 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; pointer-events: none; }
.player-empty svg { width: 38px; height: 38px; color: #63636b; margin-bottom: 18px; }
.player-empty h2 { font-size: 20px; font-weight: 500; margin: 0 0 10px; letter-spacing: -.3px; }
.player-empty p { font-size: 14px; color: #a1a1aa; line-height: 1.7; margin: 0; }
#toast { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 64px); left: 50%; transform: translate(-50%, -6px); background: #2c2c2ee6; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-size: 14px; font-weight: 500; padding: 12px 18px; border: 1px solid #ffffff14; border-radius: 16px; max-width: calc(100% - 32px); width: max-content; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 35; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; padding: 40px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: linear-gradient(#0000, #000 28%); }
#player.controls-hidden #controls { transform: translateY(16px); }
.controls-inner { width: min(100%, 520px); margin: auto; padding: 14px 16px 10px; background: #1c1c1ef2; border: 1px solid #ffffff14; border-radius: 24px; }
.progress-row { display: flex; flex-direction: column; }
.progress-times { display: flex; justify-content: space-between; font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums; }
input[type='range'] { width: 100%; min-height: 44px; appearance: none; -webkit-appearance: none; background: transparent; margin: 0; cursor: pointer; touch-action: none; --progress: 0%; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, #f5f5f7 var(--progress), #48484b var(--progress)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; margin-top: -7px; box-shadow: 0 1px 4px #0006; }
input[type='range']::-moz-range-track { height: 4px; border-radius: 3px; background: #48484b; }
input[type='range']::-moz-range-progress { background: #f5f5f7; height: 4px; border-radius: 3px; }
input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.btn-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 5px 0 10px; }
.ctrl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 0 6px; font-size: 16px; color: #d1d1d6; background: transparent; border: 0; border-radius: 12px; }
.ctrl-btn:hover, .ctrl-btn.highlighted { color: #fff; background: #ffffff14; }
.ctrl-btn.prominent { min-width: 100px; min-height: 50px; padding: 0 18px; font-weight: 600; font-size: 16px; background: #f5f5f7; color: #1d1d1f; border-radius: 15px; }
.ctrl-btn.prominent:hover { background: #fff; }
.ctrl-btn.prominent svg { width: 17px; height: 17px; fill: currentColor; stroke-width: 0; }
#fontDown { font-size: 14px; } #fontUp { font-size: 18px; }
.offset-row { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid #ffffff12; gap: 8px; }
.offset-label { color: #a1a1aa; font-size: 12px; }
#offsetText { display: block; color: #e5e5ea; margin-top: 4px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.offset-actions { display: flex; gap: 4px; }
.offset-btn { font-size: 13px; padding: 0 12px; background: #2c2c2e; border: 1px solid #ffffff0a; }
.sync-hint { text-align: center; font-size: 11px; line-height: 1.5; color: #92929c; margin: 12px 0 0; }
.help-dialog { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: 0 20px 60px #0004; }
.help-dialog::backdrop { background: #0009; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.help-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.help-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
.help-heading button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--background); color: var(--muted); display: grid; place-items: center; }
.help-dialog p { line-height: 1.7; font-size: 14px; color: var(--muted); }
.help-dialog dl { margin: 24px 0; }
.help-dialog dt { margin-top: 18px; font-size: 15px; font-weight: 600; }
.help-dialog dd { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.help-footnote { padding-top: 18px; border-top: 1px solid var(--line); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) {
  :root { --background: #111113; --surface: #1c1c1e; --text: #f5f5f7; --muted: #a1a1aa; --line: #323235; --accent: #0a74e8; --soft-accent: #0a74e81a; }
  .error-msg { color: #ff9b8e; }
}
@media (min-width: 760px) and (min-height: 600px) {
  .setup-shell { padding-bottom: 70px; }
  .player-toolbar { padding-left: 32px; padding-right: 32px; padding-top: max(24px, env(safe-area-inset-top)); }
  #controls { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (min-width: 540px) {
  .setup-shell { width: min(100%, 600px); padding: 8px 0; }
  .setup-brand { margin-bottom: 16px; }
  .setup-title { font-size: 28px; }
  .setup-subtitle { margin: 8px 0 16px; }
  .import-card { padding: 16px; }
  .import-heading { margin-bottom: 12px; }
  .quick-guide { display: none; }
  #subtitle-area { bottom: var(--subtitle-reserve, 170px); }
  .player-toolbar { padding-top: max(8px, env(safe-area-inset-top)); }
  #controls { padding-top: 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .controls-inner { width: min(100%, 720px); display: grid; grid-template-columns: 1fr 260px; column-gap: 24px; padding: 10px 16px; border-radius: 20px; }
  .progress-row { grid-column: 1; grid-row: 1; justify-content: center; }
  .btn-row { grid-column: 2; grid-row: 1; gap: 2px; margin: 0; }
  .ctrl-btn.prominent { min-width: 76px; padding: 0 10px; }
  .offset-row { grid-column: 1 / -1; padding-top: 5px; margin-top: 6px; }
  .offset-label { display: flex; align-items: center; gap: 12px; }
  #offsetText { margin: 0; }
  .offset-btn { min-height: 44px; }
  .sync-hint { display: none; }
  .player-empty { inset: 70px 24px 155px; }
  .player-empty svg { display: none; }
  .player-empty h2 { font-size: 17px; }
  .player-empty p { font-size: 12px; }
}
@media (max-width: 350px) {
  #setup { padding-left: 20px; padding-right: 20px; }
  .import-card { padding: 20px; }
  .quick-guide { gap: 12px; }
  .controls-inner { padding-left: 10px; padding-right: 10px; }
  .btn-row { gap: 2px; }
  .ctrl-btn.prominent { min-width: 86px; padding: 0 10px; }
  .offset-btn { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}