/* www/public/player.css - App Mockup, Downbit Download Row & Video Practice Player */
.app-window { max-width:960px; margin:0 auto 60px; background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--window-shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility }
.window-titlebar { height:42px; background:var(--bg-subtle); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 14px; user-select:none; z-index:10 }
.window-dots { display:flex; gap:7px }
.dot { width:11px; height:11px; border-radius:50% }
.dot-red { background:#ff5f56 }
.dot-yellow { background:#ffbd2e }
.dot-green { background:#27c93f }
.demo-play-pill { display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); padding:4px 14px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; color:var(--text); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.08); transition:all var(--duration-fast) }
.demo-play-pill:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-0.5px) }
.status-indicator { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2s infinite }
.demo-play-pill.paused .status-indicator { background:var(--text-dim); box-shadow:none; animation:none }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1) }
50% { opacity:0.5; transform:scale(0.85) }
}
.window-meta-info { font-size:11px; font-family:var(--font-mono); color:var(--text-dim) }
.demo-timeline-bar { display:flex; align-items:center; gap:12px; padding:8px 16px 10px; background:var(--surface-raised); border-bottom:1px solid var(--border); user-select:none }
.timeline-step { flex:1; display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:4px 6px; border-radius:var(--radius-sm); transition:all var(--duration-fast) }
.timeline-step:hover { background:var(--surface) }
.step-label-row { display:flex; align-items:center; gap:6px }
.step-num { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-dim) }
.step-name { font-size:11px; font-weight:600; color:var(--text-muted); transition:color var(--duration-fast) }
.timeline-step.active .step-num { color:var(--accent) }
.timeline-step.active .step-name { color:var(--text); font-weight:700 }
.step-track { width:100%; height:3px; background:var(--border); border-radius:2px; overflow:hidden }
.step-track-fill { height:100%; width:0%; background:var(--accent); border-radius:2px; transition:width 0.12s linear }
.timeline-step.completed .step-track-fill { width:100% !important; background:#27c93f }

/* Camera Viewport & Rig: Pixel-crisp 1:1 Rendering (Zero 3D scale blur) */
.camera-viewport { position:relative; width:100%; min-height:590px; overflow:hidden; background:var(--bg) }
.camera-rig { width:100%; height:100%; transition:opacity 0.25s ease }
.camera-rig.camera-step-0,
.camera-rig.camera-step-1,
.camera-rig.camera-step-2 { transform:none !important }

.virtual-cursor { position:absolute; top:50px; left:200px; z-index:100; pointer-events:none; transition:top 0.65s cubic-bezier(0.2,0.9,0.3,1),left 0.65s cubic-bezier(0.2,0.9,0.3,1),transform 0.2s ease; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.35)) }
.virtual-cursor.hidden { display:none }
.virtual-cursor.clicking { transform:scale(0.82) translate(1px,1px) }
.cursor-ripple-layer { position:absolute; inset:0; pointer-events:none; z-index:99 }
.cursor-ripple { position:absolute; width:28px; height:28px; border-radius:50%; border:2px solid var(--accent); transform:translate(-50%,-50%) scale(0.2); opacity:0.9; animation:rippleOut 0.55s ease-out forwards }
@keyframes rippleOut { to { transform:translate(-50%,-50%) scale(2.2); opacity:0 }
}

.app-frame { display:flex; min-height:590px }
.app-sidebar { width:180px; background:var(--bg-subtle); border-right:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; justify-content:space-between; flex-shrink:0; user-select:none }
.sidebar-brand { display:flex; align-items:center; gap:8px; padding-bottom:14px; margin-bottom:12px; border-bottom:1px solid var(--border) }
.brand-icon { width:22px; height:22px; border-radius:6px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center }
.sidebar-nav { display:flex; flex-direction:column; gap:4px }
.sidebar-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--radius-sm); font-size:12px; color:var(--text-muted); cursor:pointer; transition:all var(--duration-fast) }
.sidebar-item:hover { background:var(--surface-raised); color:var(--text) }
.sidebar-item.active { background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.08) }
.sidebar-badge { margin-left:auto; font-size:10px; padding:1px 5px; border-radius:var(--radius-pill); background:var(--surface-raised); color:var(--text-dim); font-family:var(--font-mono) }
.app-main { flex:1; background:var(--surface); position:relative; overflow:hidden; display:flex; flex-direction:column }
.stage-pane { position:absolute; inset:0; padding:18px 22px; display:none; flex-direction:column; opacity:0; transform:translateY(4px); transition:opacity 0.25s ease,transform 0.25s ease; overflow-y:auto }
.stage-pane.active { display:flex; opacity:1; transform:translateY(0) }
.step-guide-tag { display:inline-flex; align-items:center; align-self:flex-start; font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-subtle); border:1px solid var(--accent); padding:3px 10px; border-radius:var(--radius-pill); margin-bottom:14px }

/* Stage 0: 找个视频，复制链接 (YouTube Browser View) */
.step0-container { display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto; width:100% }
.safari-card { background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.08) }
.safari-header { height:40px; background:var(--surface-raised); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 12px; gap:12px }
.safari-dots { display:flex; gap:5px }
.safari-dots span { width:8px; height:8px; border-radius:50%; background:var(--border) }
.safari-nav-arrows { display:flex; gap:4px; color:var(--text-dim) }
.safari-url-pill { flex:1; max-width:400px; margin:0 auto; height:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--text-muted); font-family:var(--font-mono) }
.safari-copy-btn { display:flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:5px 12px; font-size:11px; font-weight:600; cursor:pointer; transition:all var(--duration-fast); white-space:nowrap }
.safari-copy-btn:hover { filter:brightness(1.1) }
.safari-copy-btn.copied { background:#27c93f }
.safari-page { padding:16px 18px; display:flex; flex-direction:column; gap:14px }
.safari-yt-box { display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px }
.safari-thumb-wrap { width:200px; height:112px; border-radius:8px; overflow:hidden; position:relative; background:#000; flex-shrink:0 }
.safari-thumb-img { width:100%; height:100%; object-fit:cover }
.safari-thumb-time { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.75); color:#fff; font-size:9px; padding:1px 4px; border-radius:3px; font-family:var(--font-mono) }
.safari-thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.9); font-size:20px; background:rgba(0,0,0,0.2) }
.safari-meta-wrap { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0 }
.safari-yt-title { font-size:14.5px; font-weight:700; color:var(--text); line-height:1.35 }
.safari-yt-sub { font-size:12px; color:var(--text-dim) }
.safari-yt-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px }
.safari-copy-hint { display:flex; align-items:center; gap:8px; background:var(--surface-raised); border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:10px 14px; font-size:12px; color:var(--text-muted); transition:all var(--duration-fast) }
.safari-copy-hint.active { border-color:#27c93f; background:rgba(39,201,63,0.08); color:var(--text) }

/* Stage 1: 打开 Ear 自动读取剪贴板，解析 URL，确认下载 */
.step1-container { display:flex; flex-direction:column; gap:14px }
.ear-ingest-card { background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; display:flex; flex-direction:column; gap:10px; transition:border-color var(--duration-fast) }
.ear-omni-header { display:flex; align-items:center; justify-content:space-between; gap:12px }
.ear-clipboard-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-subtle); border:1px solid var(--accent); padding:3px 10px; border-radius:var(--radius-pill); flex-shrink:0 }
.clipboard-pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite }
.ear-omni-input-box { flex:1; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 12px; font-size:12px; color:var(--text); font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ear-parse-info { display:flex; justify-content:space-between; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; gap:12px }
.ear-parse-left { display:flex; flex-direction:column; gap:4px; min-width:0 }
.ear-parse-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ear-badges { display:flex; gap:6px; flex-wrap:wrap }
.badge-tag { font-size:10px; font-family:var(--font-mono); font-weight:600; padding:2px 7px; border-radius:var(--radius-pill); background:var(--surface-raised); border:1px solid var(--border); color:var(--text-muted) }
.badge-tag.accent { background:var(--accent-subtle); border-color:var(--accent); color:var(--accent) }
.confirm-dl-btn { background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:7px 16px; font-size:12px; font-weight:700; cursor:pointer; transition:all var(--duration-fast); white-space:nowrap; flex-shrink:0 }
.confirm-dl-btn:hover { filter:brightness(1.1); transform:translateY(-1px) }
.confirm-dl-btn.clicked { transform:scale(0.96) }

/* Downbit-Style Active Download Row */
.active-download-row { display:flex; align-items:center; gap:16px; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; box-shadow:0 4px 16px rgba(0,0,0,0.05); position:relative; overflow:hidden }
.dl-thumb-container { width:200px; height:112px; border-radius:8px; overflow:hidden; position:relative; background:#000; flex-shrink:0; border:1px solid var(--border) }
.dl-thumb-base { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%) brightness(0.85) }
.dl-thumb-color-clip { position:absolute; top:0; bottom:0; left:0; width:0%; overflow:hidden; transition:width 0.15s linear; border-right:2px solid var(--accent) }
.dl-thumb-color-img { position:absolute; top:0; left:0; width:200px; height:112px; object-fit:cover }
.dl-thumb-chip { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.75); color:#fff; font-size:9px; padding:1px 4px; border-radius:3px; font-family:var(--font-mono); z-index:2 }
.dl-details-box { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0 }
.dl-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px }
.dl-title-text { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dl-tag-engine { font-size:10px; font-family:var(--font-mono); padding:1px 6px; border-radius:var(--radius-pill); background:var(--accent-subtle); color:var(--accent); border:1px solid var(--accent); flex-shrink:0 }
.dl-status-text { font-size:11.5px; color:var(--text-dim) }
.dl-bar-track { width:100%; height:6px; background:var(--surface); border-radius:var(--radius-pill); overflow:hidden; border:1px solid var(--border) }
.dl-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#2f7cf6,#27c93f); border-radius:var(--radius-pill); transition:width 0.12s linear }
.dl-metrics-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-family:var(--font-mono); color:var(--text-dim) }
.dl-complete-action { display:none; background:var(--surface); border:1px solid #27c93f; border-radius:var(--radius-md); padding:12px 16px; justify-content:space-between; align-items:center; animation:fadeIn 0.3s ease }
.dl-complete-action.active { display:flex }
.dl-complete-msg { display:flex; align-items:center; gap:10px }
.dl-check-icon { width:24px; height:24px; border-radius:50%; background:#27c93f; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800 }
.btn-start-play { background:#27c93f; color:#fff; border:none; border-radius:var(--radius-pill); padding:7px 18px; font-size:12px; font-weight:700; cursor:pointer; transition:all var(--duration-fast); box-shadow:0 2px 10px rgba(39,201,63,0.35) }
.btn-start-play:hover { transform:translateY(-1px); filter:brightness(1.1) }
.btn-start-play.clicked { transform:scale(0.95) }

/* Stage 2: 播放视频，下面显示字幕 */
.player-stage { display:flex; flex-direction:column; gap:8px; height:100% }
.player-top-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:4px; border-bottom:1px solid var(--border) }
.player-header-left { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600 }
.player-back-btn { background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); width:22px; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer }
.mask-toggle-btn { display:flex; align-items:center; gap:5px; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px 10px; font-size:11px; color:var(--text-muted); cursor:pointer }
.video-container { width:100%; height:320px; background:#000; border-radius:var(--radius-md); position:relative; overflow:hidden; box-shadow:inset 0 0 20px rgba(0,0,0,0.85) }
.video-container video { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block }
.video-center-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:all var(--duration-fast); opacity:0; pointer-events:none }
.video-container.paused .video-center-play { opacity:1; pointer-events:auto }
.vctrl-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.55) 65%,transparent 100%); padding:18px 14px 10px; display:flex; flex-direction:column; gap:6px; z-index:10 }
.vctrl-progress-box { position:relative; width:100%; height:12px; display:flex; align-items:center; cursor:pointer }
.vctrl-track { position:relative; width:100%; height:5px; background:rgba(255,255,255,0.28); border-radius:var(--radius-pill); overflow:hidden }
.vctrl-fill { height:100%; width:0%; background:#2f7cf6; border-radius:var(--radius-pill); transition:width 0.08s linear }
.vctrl-tick { position:absolute; top:0; bottom:0; width:1.5px; background:rgba(255,255,255,0.45); pointer-events:none }
.vctrl-thumb { position:absolute; top:50%; left:0%; transform:translate(-50%,-50%); width:10px; height:10px; background:#fff; border:1px solid rgba(0,0,0,0.3); border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.4); pointer-events:none }
.vctrl-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px }
.vctrl-group-left,.vctrl-group-right { display:flex; align-items:center; gap:6px }
.vctrl-btn-icon { width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--duration-fast) }
.vctrl-btn-icon:hover { background:rgba(255,255,255,0.22) }
.vctrl-btn-text { height:28px; padding:0 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.9); font-size:11px; display:flex; align-items:center; gap:4px; cursor:pointer; transition:all var(--duration-fast); white-space:nowrap }
.vctrl-btn-text:hover { background:rgba(255,255,255,0.2); color:#fff }
.vctrl-btn-primary { height:28px; padding:0 10px; border-radius:6px; background:#2f7cf6; border:none; color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; gap:4px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:all var(--duration-fast); white-space:nowrap }
.vctrl-btn-primary:hover { background:#2269d4 }
.vctrl-time { margin-left:4px; font-size:11px; font-family:var(--font-mono); color:#fff; white-space:nowrap }
.vctrl-time-sep { color:rgba(255,255,255,0.55) }
.sentence-meta-bar { display:flex; align-items:center; justify-content:space-between; padding:6px 4px; border-bottom:1px solid var(--border) }
.s-tag-idx { font-size:10px; font-family:var(--font-mono); color:var(--text-dim) }
.s-hint-tip { font-size:10px; color:var(--text-muted) }
.sentence-roller-area { display:flex; flex-direction:column; gap:5px; margin-top:2px }
.sentence-row { display:flex; align-items:baseline; gap:12px; font-size:12.5px; color:var(--text-dim); padding:4px 10px; border-radius:var(--radius-sm); transition:all var(--duration-fast) }
.sentence-row.preceding,.sentence-row.upcoming { opacity:0.55 }
.sentence-row.active { background:var(--surface-raised); border:1px solid var(--border); padding:8px 12px; box-shadow:0 2px 6px rgba(0,0,0,0.06); color:var(--text) }
.s-caption-box { cursor:pointer; position:relative; min-height:22px }
.s-mask-line { font-family:var(--font-mono); letter-spacing:0.15em; color:var(--text-dim); font-size:13px; font-weight:700; transition:opacity 0.2s ease }
.s-real-line { font-size:13px; font-weight:600; color:var(--text); line-height:1.4; display:none }
.s-caption-box.revealed .s-mask-line { display:none }
.s-caption-box.revealed .s-real-line { display:block; animation:textGlow 0.25s ease }
@keyframes textGlow { from { opacity:0; transform:translateY(2px) }
to { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn { from { opacity:0; transform:translateY(4px) }
to { opacity:1; transform:translateY(0) }
}
@media (max-width:768px) { .app-sidebar { display:none }
.stage-pane { padding:14px 10px }
.video-container { height:240px }
.dl-thumb-container { width:140px; height:80px }
.dl-thumb-color-img { width:140px; height:80px }
.vctrl-btn-text span { display:none }
}