:root {
  color-scheme: dark;
  --ink: #10110f;
  --panel: #171815;
  --panel-2: #1d1f1b;
  --line: #2a2c27;
  --soft-line: #232520;
  --lime: #c5f26a;
  --lime-deep: #91bc3f;
  --muted: #999d91;
}

* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; font-family: Inter, "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
small { font-size: 12px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { height: 100dvh; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #131411; }
.brand { display: flex; align-items: center; gap: 10px; color: #f5f7f1; font-weight: 750; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--lime); border-radius: 10px; box-shadow: 0 0 24px rgba(197, 242, 106, .14); }
.brand-mark svg { width: 19px; stroke-width: 2.2; }
.top-divider { width: 1px; height: 24px; background: var(--line); }
.project-block { min-width: 0; }
.project-name { width: 210px; min-width: 0; border: 0; outline: none; color: #e6e8e2; background: transparent; font-size: 13px; font-weight: 600; text-overflow: ellipsis; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.save-status { display: block; margin-top: 2px; color: #777c70; font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-picker, .language-picker { position: relative; }
.theme-menu { position: absolute; right: 0; top: 42px; z-index: 30; width: 270px; padding: 7px; border: 1px solid #363a31; border-radius: 12px; color: #e9ece5; background: #1b1d19; box-shadow: 0 18px 50px rgba(0,0,0,.36); }
.language-menu { width: 220px; }
.theme-menu-title { padding: 6px 9px 7px; color: #777c70; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.theme-menu button { width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 8px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 9px; align-items: center; gap: 9px; color: #b8bdb1; background: transparent; cursor: pointer; text-align: left; }
.theme-menu button:hover { color: #eef1e8; background: #242620; border-color: #33362f; }
.theme-menu button svg { width: 17px; height: 17px; }
.theme-menu button span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.theme-menu button strong { font-size: 12px; font-weight: 700; }
.theme-menu button small { color: #777c70; font-size: 12px; line-height: 1.35; }
.theme-menu button i { width: 7px; height: 7px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px #555b4f inset; }
.theme-menu button.active { color: var(--lime); background: #24291e; border-color: #3d4c2c; }
.theme-menu button.active i { background: var(--lime); box-shadow: none; }

.icon-button, .transport-button, .mini-icon { border: 1px solid transparent; display: grid; place-items: center; cursor: pointer; background: transparent; color: #aeb2a7; border-radius: 8px; transition: .18s ease; }
.icon-button { width: 34px; height: 34px; }
.icon-button:hover, .transport-button:hover, .mini-icon:hover { color: white; background: #242620; border-color: #33362f; }
.primary-button, .secondary-button, .done-button { border: 0; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 8px; font-weight: 700; transition: .18s ease; }
.primary-button { height: 36px; padding: 0 14px; color: #15170f; background: var(--lime); font-size: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.primary-button:hover { background: #d4ff7c; transform: translateY(-1px); }
.primary-button svg, .secondary-button svg { width: 16px; height: 16px; }
.secondary-button { height: 36px; padding: 0 12px; color: #d9dcd3; background: #20221d; border: 1px solid #30332c; font-size: 12px; }
.secondary-button:hover { border-color: #4a4e43; background: #292c25; }

.workspace { min-height: 0; display: grid; grid-template-columns: minmax(420px, 1fr) 380px; }
.mode-nav { display: flex; align-items: center; gap: 2px; }
.mode-nav-link { height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; color: #777c70; text-decoration: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s ease; }
.mode-nav-link svg { width: 15px; height: 15px; }
.mode-nav-link:hover { color: #eef1e8; background: #20221d; }
.mode-nav-link.active { color: var(--lime); background: #20221d; border-color: #2e312a; }

.preview-pane { --transport-height: 58px; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto var(--transport-height) minmax(0, 1fr); align-content: start; overflow: hidden; background: #0d0e0c; }
.video-section { min-height: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; gap: 0; overflow: hidden; }
.video-stage { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 100%; justify-self: start; align-self: start; overflow: hidden; border-radius: 0; background: #080908; border: 1px solid #282a25; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.srt-editor-slot { min-width: 0; overflow-y: auto; scrollbar-color: #383b33 transparent; scrollbar-width: thin; }
.srt-editor-slot .active-editor { width: 100%; height: 100%; overflow-y: auto; border: 1px solid var(--line); border-radius: 0; }
.empty-video { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 40%, #1c2019 0, #0e0f0d 55%, #090a09 100%); }
.empty-visual { position: relative; width: 112px; height: 82px; margin-bottom: 22px; }
.film-card { position: absolute; width: 84px; height: 58px; border-radius: 8px; border: 1px solid #484d40; background: linear-gradient(145deg, #2d3129, #181a17); }
.film-card-back { left: 2px; top: 3px; transform: rotate(-8deg); opacity: .6; }
.film-card-front { right: 2px; bottom: 1px; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.play-orb { width: 29px; height: 29px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: var(--lime); }
.play-orb svg { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; stroke: none; }
.video-player { width: 100%; height: 100%; display: none; object-fit: contain; background: black; }
.video-player.loaded { display: block; }
.video-badge { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 5px 8px; display: flex; align-items: center; gap: 5px; color: #c9ccc3; background: rgba(10,11,9,.68); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; font-size: 12px; letter-spacing: .04em; }
.video-badge > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.caption-overlay { position: absolute; left: 12%; right: 12%; bottom: 10%; z-index: 4; padding: 4px 8px; color: white; font-size: clamp(14px, 2vw, 25px); font-weight: 700; line-height: 1.4; text-align: center; text-shadow: 0 2px 4px black, 0 0 12px black; white-space: pre-line; pointer-events: none; }
.caption-word { color: rgba(255,255,255,.55); transition: color .1s ease; }
.caption-word.done { color: white; }
.caption-word.active { color: var(--lime); text-shadow: 0 0 16px rgba(197,242,106,.5), 0 2px 4px black; }
.audio-stage { position: relative; width: min(100%, 880px); height: 164px; padding: 18px 22px; display: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 10px; overflow: hidden; border: 1px solid #30342b; border-radius: 12px; background: radial-gradient(circle at 18% 20%, #303a25, #161814 52%, #0d0e0c); box-shadow: 0 12px 36px rgba(0,0,0,.24); }
body[data-mode="lrc"] .video-stage, body[data-mode="word"] .video-stage { display: none; }
body[data-mode="lrc"] .preview-pane, body[data-mode="word"] .preview-pane { grid-template-rows: var(--transport-height) minmax(260px, 1fr); }
body[data-mode="lrc"] .video-section, body[data-mode="word"] .video-section { display: none; }
.audio-art { width: 72px; height: 72px; grid-row: 1; display: grid; place-items: center; border: 1px solid #536044; border-radius: 14px; color: var(--lime); background: linear-gradient(145deg, #303a27, #171a15); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.audio-art svg { width: 30px; height: 30px; }
.audio-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.audio-copy span { color: var(--lime); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.audio-copy strong, .audio-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-copy strong { font-size: 18px; }
.audio-copy p { color: #858b7d; font-size: 12px; }
.lyric-preview { position: absolute; left: 18px; right: 18px; top: 158px; min-width: 0; padding: 8px 12px; display: none; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; border-top: 1px solid var(--line); color: white; text-align: center; font-size: 13px; font-weight: 750; line-height: 1.25; }
body[data-mode="lrc"] .lyric-preview, body[data-mode="word"] .lyric-preview { display: flex; }
.lyric-preview div, .lyric-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyric-preview small { color: #969d8d; font-size: 12px; font-weight: 500; }
.lyric-preview .lyric-romanization { color: #7d8577; font-style: italic; }

.transport { padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #151613; }
.transport-left, .transport-right { display: flex; align-items: center; gap: 7px; }
.transport-left { min-width: 0; flex: 1; }
.transport-right { flex: 0 0 auto; }
.transport-divider { width: 1px; height: 20px; background: var(--line); }
.audio-upload-button { display: none; }
body[data-mode="lrc"] .audio-upload-button, body[data-mode="word"] .audio-upload-button { display: inline-flex; }
.transport-button { width: 32px; height: 32px; }
.transport-button svg { width: 17px; height: 17px; }
.play-button { width: 34px; height: 34px; border: 0; display: grid; place-items: center; cursor: pointer; color: #13150f; background: var(--lime); border-radius: 50%; }
.play-button svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }
.play-button.playing svg { margin: 0; fill: none; stroke: currentColor; stroke-width: 2.2; }
.time-display { margin-left: 7px; display: flex; align-items: center; gap: 6px; color: #70756a; font-variant-numeric: tabular-nums; font-size: 12px; }
.time-display[hidden] { display: none; }
.time-display strong { color: #d7dad2; font-weight: 650; }
.speed-button { height: 27px; min-width: 34px; padding: 0 8px; border: 1px solid #30332c; border-radius: 6px; color: #aeb2a7; background: #1d1f1b; cursor: pointer; font-size: 12px; }

.timeline-section { min-width: 0; min-height: 0; display: grid; grid-template-rows: 47px minmax(0, 1fr); background: #141512; }
body[data-mode="lrc"] .timeline-section, body[data-mode="word"] .timeline-section { grid-template-rows: 47px 210px auto; align-content: start; }
body[data-mode="word"] .timeline-section { grid-template-rows: 47px 240px auto; }
.timeline-section.timeline-unavailable .timeline-toolbar,
.timeline-section.timeline-unavailable .timeline-scroll { display: none; }
body[data-mode="srt"] .timeline-section.timeline-unavailable { display: none; }
body[data-mode="lrc"] .timeline-section.timeline-unavailable,
body[data-mode="word"] .timeline-section.timeline-unavailable { grid-template-rows: auto; }
body.timeline-unavailable[data-mode="srt"] .preview-pane { grid-template-rows: auto var(--transport-height); }
.timeline-toolbar { padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--soft-line); }
.timeline-toolbar-left { min-width: 0; display: flex; align-items: center; gap: 8px; }
.timeline-toolbar-left .shortcut-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-toolbar-left .cue-navigation-button { flex: 0 0 auto; border-color: var(--line); background: var(--panel-2); }
.section-label { color: #daddd5; font-size: 12px; font-weight: 750; letter-spacing: .04em; }
.shortcut-hint { color: #6e7368; font-size: 12px; }
.mini-icon { width: 27px; height: 27px; font-size: 14px; }
.mini-icon svg { width: 14px; height: 14px; }
.mini-icon.danger { color: #e28a81; }
.mini-icon.danger:hover { color: #ff857d; background: #321f1c; border-color: #59302b; }
.zoom-range { width: 68px; height: 2px; accent-color: var(--lime); }
.timeline-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-color: #383b33 transparent; scrollbar-width: thin; }
.timeline-editor-slot { display: none; min-width: 0; max-height: min(46vh, 380px); overflow-y: auto; scrollbar-color: #383b33 transparent; scrollbar-width: thin; }
body[data-mode="lrc"] .timeline-editor-slot, body[data-mode="word"] .timeline-editor-slot { display: block; }
body[data-mode="word"] .timeline-editor-slot { max-height: min(56vh, 520px); }
.timeline { position: relative; height: 100%; min-width: 100%; width: 100%; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(255,255,255,.025) 10%); }
.ruler { position: absolute; left: 0; right: 0; top: 0; height: 29px; color: #656a5f; border-bottom: 1px solid #252720; font-size: 12px; font-variant-numeric: tabular-nums; }
.ruler-mark { position: absolute; top: 8px; transform: translateX(-50%); }
.ruler-mark::after { content: ""; position: absolute; left: 50%; top: 13px; height: 7px; border-left: 1px solid #3a3d35; }
.waveform { position: absolute; left: 0; right: 0; top: 37px; height: 42px; display: flex; align-items: center; gap: 2px; opacity: .4; overflow: hidden; }
.wave-bar { flex: 1 0 2px; max-width: 4px; min-height: 3px; border-radius: 4px; background: #7d8275; }
.timeline-cues { position: absolute; left: 0; right: 0; top: 91px; height: 64px; }
.timeline-cue { position: absolute; height: 52px; min-width: 34px; padding: 7px 8px; overflow: hidden; border: 1px solid #53643a; border-radius: 6px; color: #dce5cb; background: #26321c; cursor: pointer; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; transition: .15s ease; }
.timeline-cue:hover, .timeline-cue.active { border-color: var(--lime); background: #354825; color: white; }
.timeline-cue.word-cue { display: flex; gap: 1px; padding: 5px; }
.timeline-word { position: relative; flex: 0 0 auto; min-width: 8px; height: 100%; padding: 0 5px; display: grid; place-items: center; overflow: visible; border-radius: 2px; background: rgba(197,242,106,.16); border-left: 1px solid rgba(197,242,106,.45); color: #dbe8c5; font-size: 12px; text-overflow: clip; white-space: nowrap; }
.timeline-word b { max-width: 100%; overflow: hidden; font-weight: 600; pointer-events: none; text-overflow: clip; }
.timeline-word.active { outline: 1px solid var(--lime); background: rgba(197,242,106,.34); }
.timeline-word-edge { position: absolute; z-index: 2; top: 0; bottom: 0; width: 7px; cursor: ew-resize; touch-action: none; }
.timeline-word-edge.start { left: -4px; }
.timeline-word-edge.end { right: -4px; }
.timeline-word-edge::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 3px; width: 1px; border-radius: 2px; background: rgba(255,255,255,.45); opacity: 0; transition: opacity .12s ease; }
.timeline-word:hover .timeline-word-edge::after, .timeline-word.active .timeline-word-edge::after { opacity: 1; }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; width: 13px; transform: translateX(-6px); cursor: ew-resize; touch-action: none; user-select: none; }
.playhead::after { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 1px; background: #ff7f6e; pointer-events: none; }
.playhead span { position: absolute; left: 2px; top: 0; width: 9px; height: 9px; background: #ff7f6e; clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.playhead.dragging { cursor: grabbing; }

.subtitle-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); border-left: 1px solid var(--line); background: #181916; }
body[data-mode="lrc"] .subtitle-pane, body[data-mode="word"] .subtitle-pane { grid-template-rows: auto auto minmax(0, 1fr); }
.sidebar-editor-slot { display: contents; }
.subtitle-header { padding: 17px 16px 13px; display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.subtitle-header > div:first-child { min-width: 0; }
.subtitle-header h1 { color: #f2f4ee; font-size: 15px; font-weight: 750; }
.subtitle-header p { margin-top: 3px; overflow: hidden; color: #777c70; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.subtitle-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.panel-action-button { height: 32px; padding: 0 8px; border-radius: 7px; }
.clear-list-button { height: 32px; padding: 0 8px; border: 1px solid #49302b; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; color: #e28a81; background: #251b18; cursor: pointer; font-size: 12px; font-weight: 700; transition: .18s ease; }
.clear-list-button:hover { color: #ffaca4; border-color: #6b3a33; background: #321f1c; }
.clear-list-button:disabled { opacity: .4; cursor: not-allowed; }
.clear-list-button svg { width: 14px; height: 14px; }
.mode-tabs { display: none; margin: 0 14px 10px; padding: 3px; grid-template-columns: repeat(3, 1fr); gap: 3px; border: 1px solid #2b2e27; border-radius: 8px; background: #121310; }
.mode-tab { height: 30px; border: 0; border-radius: 5px; color: #777c70; background: transparent; font-size: 12px; font-weight: 700; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mode-tab.active { color: #171a11; background: var(--lime); }
.count-badge { padding: 2px 6px; border-radius: 8px; color: #aeb3a5; background: #272923; font-size: 12px; font-variant-numeric: tabular-nums; }
.cue-list { min-height: 0; padding: 0 9px 10px; overflow-y: auto; scrollbar-color: #383b33 transparent; scrollbar-width: thin; }
.cue-card { position: relative; margin-bottom: 4px; padding: 9px 10px 9px 43px; border: 1px solid transparent; border-radius: 8px; color: #a9ada3; background: transparent; cursor: pointer; transition: .14s ease; }
.cue-card:hover { background: #1f211c; }
.cue-card.active { color: #e9ece4; background: #24291e; border-color: #3d4c2c; box-shadow: inset 2px 0 var(--lime); }
.cue-index { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: #73786c; background: #23251f; font-size: 12px; font-variant-numeric: tabular-nums; }
.cue-card.active .cue-index { color: var(--ink); background: var(--lime); font-weight: 800; }
.cue-time { display: flex; align-items: center; gap: 4px; color: #71766a; font-size: 12px; font-variant-numeric: tabular-nums; }
.cue-card p { margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.55; font-size: 12px; white-space: pre-line; }
.empty-cues { height: 100%; display: grid; place-items: center; color: #72776b; text-align: center; font-size: 12px; }

.active-editor { padding: 12px 14px 14px; border-top: 1px solid var(--line); background: #151613; }
.editor-topline, .editor-footer { display: flex; align-items: center; justify-content: space-between; }
.editor-actions { display: flex; align-items: center; gap: 3px; }
.editor-action-divider { width: 1px; height: 15px; margin: 0 2px; background: var(--line); }
.time-inputs { margin: 8px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; color: #666b60; }
.time-inputs label { color: #777c70; font-size: 12px; }
.time-inputs input { width: 100%; margin-top: 4px; padding: 6px 7px; outline: none; border: 1px solid #2c2f28; border-radius: 6px; color: #cdd1c6; background: #10110f; font-size: 12px; font-variant-numeric: tabular-nums; }
.time-inputs input:focus, .active-editor textarea:focus { border-color: #637d3c; }
.active-editor textarea { width: 100%; resize: none; outline: none; padding: 9px 10px; border: 1px solid #2c2f28; border-radius: 7px; color: #e5e8df; background: #10110f; line-height: 1.5; font-size: 12px; }
.lyric-meta-fields { display: none; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
body[data-mode="word"] .lyric-meta-fields { display: grid; }
.lyric-meta-fields label { color: #777c70; font-size: 12px; }
.lyric-meta-fields input { width: 100%; margin-top: 4px; padding: 6px 7px; outline: none; border: 1px solid #2c2f28; border-radius: 6px; color: #cdd1c6; background: #10110f; font-size: 12px; }
.lyric-meta-fields input:focus { border-color: #637d3c; }
.word-panel { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #292c26; }
.word-panel.visible { display: block; }
.word-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #858a7e; font-size: 12px; }
.word-toolbar > div { display: flex; gap: 4px; }
.word-tool { min-height: 27px; padding: 0 6px; border: 1px solid #32362e; border-radius: 5px; color: #9fa499; background: #1e201b; cursor: pointer; font-size: 12px; }
.word-tool:hover, .word-tool.accent { color: #19200f; border-color: #7c9e4b; background: var(--lime); }
.word-tool:disabled { opacity: .35; cursor: not-allowed; }
.word-session { margin-top: 8px; padding: 9px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #30362c; border-radius: 8px; background: #10120e; }
.word-session-button { height: 36px; padding: 0 13px; border: 1px solid #708d47; border-radius: 7px; color: #17200e; background: var(--lime); cursor: pointer; font-size: 12px; font-weight: 750; }
.word-session-button.active { color: #ffd7d2; border-color: #8b4941; background: #482722; box-shadow: 0 0 0 2px rgba(255,127,110,.12); }
.word-progress { min-width: 0; }
.word-progress > div:first-child { margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; color: #777d70; font-size: 12px; }
.word-progress > div:first-child span:first-child { color: #d6dbcf; font-variant-numeric: tabular-nums; font-weight: 700; }
.word-progress-track { height: 3px; overflow: hidden; border-radius: 4px; background: #2b2f27; }
.word-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lime); transition: width .16s ease; }
.word-chips { max-height: 132px; margin-top: 8px; padding: 7px; display: flex; flex-wrap: wrap; align-content: start; gap: 5px; overflow-y: auto; border: 1px solid #292e26; border-radius: 8px; background: #11120f; }
.word-chip { min-width: 32px; padding: 7px 8px; border: 1px solid #30342c; border-radius: 6px; color: #b8bdb1; background: #181a16; cursor: pointer; font-size: 13px; }
.word-chip small { display: block; margin-top: 2px; color: #676c61; font-size: 12px; font-variant-numeric: tabular-nums; }
.word-chip.active { color: #18200e; border-color: var(--lime); background: var(--lime); }
.word-chip.active small { color: #455c27; }
.word-chip.recording { color: #fff0ed; border-color: #ff7f6e; background: #5b2d27; box-shadow: 0 0 0 2px rgba(255,127,110,.13); }
.word-timing { margin-top: 8px; display: grid; gap: 7px; }
.word-navigation { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 5px; }
.word-navigation strong { min-width: 0; overflow: hidden; color: #b9beb3; font-size: 12px; font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.word-time-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: end; gap: 5px; }
.word-time-inputs label { color: #777c70; font-size: 12px; }
.word-time-inputs input { width: 100%; margin-top: 4px; padding: 6px 7px; outline: none; border: 1px solid #2c2f28; border-radius: 6px; color: #cdd1c6; background: #10110f; font-size: 12px; font-variant-numeric: tabular-nums; }
.word-time-inputs input:focus { border-color: #637d3c; }
.editor-footer { margin-top: 7px; color: #6f7469; font-size: 12px; }
.done-button { height: 29px; padding: 0 9px; color: #15170f; background: var(--lime); font-size: 12px; }
.done-button svg { width: 12px; height: 12px; stroke-width: 2.5; }
.mobile-nav { display: none; }

.export-dialog { width: min(420px, calc(100% - 28px)); padding: 20px; border: 1px solid #363a31; border-radius: 14px; color: white; background: #1b1d19; box-shadow: 0 25px 80px rgba(0,0,0,.5); }
.export-dialog::backdrop { background: rgba(5,6,5,.72); backdrop-filter: blur(5px); }
.dialog-head { display: flex; align-items: start; justify-content: space-between; }
.dialog-head h2 { font-size: 16px; font-weight: 750; }
.dialog-head p { margin-top: 4px; color: #858a7e; font-size: 12px; }
.format-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.format-card { padding: 14px; display: flex; flex-direction: column; align-items: start; border: 1px solid #30342c; border-radius: 9px; color: #b8bcb1; background: #151613; cursor: pointer; }
.format-card strong { color: white; font-size: 13px; }
.format-card span { margin-top: 4px; color: #74796e; font-size: 12px; }
.format-card.selected { border-color: #779948; background: #222a1c; box-shadow: 0 0 0 2px rgba(197,242,106,.06); }
.import-lyrics-dialog { width: min(560px, calc(100% - 28px)); }
.import-file-button { width: 100%; margin-top: 18px; justify-content: center; }
.import-divider { margin: 16px 0; display: flex; align-items: center; gap: 10px; color: #74796e; font-size: 12px; }
.import-divider::before, .import-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.import-paste-field { display: flex; flex-direction: column; gap: 7px; color: #aeb3a5; font-size: 12px; font-weight: 700; }
.import-paste-field textarea { width: 100%; resize: vertical; min-height: 180px; padding: 10px; outline: none; border: 1px solid #30342c; border-radius: 8px; color: #e5e8df; background: #10110f; line-height: 1.5; font-size: 12px; }
.import-paste-field textarea:focus { border-color: #637d3c; }
.toast { position: fixed; left: 50%; top: 74px; z-index: 50; padding: 8px 12px; border: 1px solid #3b4035; border-radius: 8px; color: #e9ece5; background: rgba(31,34,28,.92); opacity: 0; transform: translate(-50%, -8px); transition: .2s ease; pointer-events: none; font-size: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.28); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) {
  .project-name { width: 150px; }
  .top-actions { gap: 5px; }
  .workspace { grid-template-columns: minmax(360px, 1fr) 330px; }
  .mode-nav-link { padding: 0 8px; }
  .preview-pane { --transport-height: 55px; }
  body[data-mode="lrc"] .preview-pane, body[data-mode="word"] .preview-pane { grid-template-rows: var(--transport-height) minmax(230px, 1fr); }
  .video-section { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  .app-shell { grid-template-rows: 56px minmax(0, 1fr) calc(61px + env(safe-area-inset-bottom)); }
  .topbar { height: 56px; padding: 0 11px; }
  .brand-mark { width: 31px; height: 31px; }
  .project-block { display: none; }
  .top-actions { gap: 5px; }
  .theme-menu { position: fixed; right: 10px; top: 56px; }
  .primary-button, .secondary-button { height: 33px; padding: 0 10px; }
  .workspace { display: block; min-height: 0; overflow: hidden; }
  .mode-nav { display: none; }
  .preview-pane { --transport-height: 52px; height: 100%; display: none; }
  body[data-mode="lrc"] .preview-pane, body[data-mode="word"] .preview-pane { grid-template-rows: var(--transport-height) minmax(208px, 1fr); }
  .preview-pane.mobile-active { display: grid; }
  .video-section { grid-template-columns: minmax(0, 1fr); }
  .video-stage { width: 100%; max-height: none; }
  .srt-editor-slot { display: none; }
  .audio-stage { width: 100%; height: 138px; padding: 12px 14px; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; }
  .audio-art { width: 52px; height: 52px; border-radius: 11px; }
  .audio-art svg { width: 24px; height: 24px; }
  .audio-copy strong { font-size: 13px; }
  .audio-copy p { font-size: 12px; }
  .audio-upload-button { width: 34px; padding: 0; justify-content: center; }
  .audio-upload-button span { display: none; }
  .lyric-preview { left: 10px; right: 10px; top: 150px; padding: 6px 8px; font-size: 12px; }
  .empty-visual { width: 88px; height: 65px; margin-bottom: 15px; }
  .film-card { width: 66px; height: 46px; }
  .empty-video p.text-lg { font-size: 14px; }
  .empty-video p.text-sm { padding: 0 24px; font-size: 12px; }
  .empty-video .primary-button { margin-top: 12px; }
  .transport { padding: 0 10px; }
  .transport-right { display: none; }
  .time-display { margin-left: 2px; font-size: 12px; }
  .timeline-toolbar { padding: 0 10px; }
  .timeline-toolbar-left { gap: 5px; }
  body[data-mode="lrc"] .timeline-section, body[data-mode="word"] .timeline-section { grid-template-rows: 47px 200px auto; }
  .timeline-editor-slot { max-height: 46vh; }
  body[data-mode="lrc"] .timeline-toolbar-left .section-label,
  body[data-mode="word"] .timeline-toolbar-left .section-label { display: none; }
  .zoom-range, #zoomOut, #zoomIn { display: none; }
  .timeline-cue { height: 46px; }
  .subtitle-pane { height: 100%; display: none; border-left: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  body[data-mode="lrc"] .subtitle-pane, body[data-mode="word"] .subtitle-pane { grid-template-rows: auto auto minmax(0, 1fr); }
  .subtitle-pane.mobile-active { display: grid; }
  .subtitle-header { padding-top: 13px; }
  .panel-action-button { width: 32px; padding: 0; justify-content: center; }
  .clear-list-button { width: 32px; padding: 0; justify-content: center; }
  .clear-list-button span { display: none; }
  .mode-tabs { display: grid; }
  .cue-card { padding-top: 11px; padding-bottom: 11px; }
  .active-editor { padding-bottom: 12px; }
  .word-toolbar { align-items: start; }
  .word-toolbar > div { flex-wrap: wrap; justify-content: end; }
  .word-session { grid-template-columns: 1fr; }
  .word-session-button { width: 100%; }
  .word-progress > div:first-child span:last-child { display: none; }
  .word-time-inputs { grid-template-columns: 1fr 1fr; }
  .lyric-meta-fields { grid-template-columns: 1fr; }
  .mobile-nav { padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: #141512; }
  .mobile-nav button { border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #777c70; background: transparent; font-size: 12px; }
  .mobile-nav button.active { color: var(--lime); }
  .mobile-nav svg { width: 18px; height: 18px; }
  .mobile-add { width: 29px; height: 29px; display: grid; place-items: center; margin-top: -16px; border-radius: 50%; color: #13150f; background: var(--lime); box-shadow: 0 0 0 5px #141512; }
  .mobile-add svg { width: 16px; height: 16px; stroke-width: 2.3; }
  .caption-overlay { font-size: 14px; }
}

html[data-theme="light"] {
  color-scheme: light;
  --panel: #ffffff;
  --panel-2: #f4f6f1;
  --line: #d9ddd4;
  --soft-line: #e5e8e1;
  --lime: #91bd3f;
  --lime-deep: #6f9827;
  --muted: #687066;
}

html[data-theme="light"] body { color: #171a16 !important; background: #f4f5f1 !important; }
html[data-theme="light"] .text-white { color: #171a16 !important; }
html[data-theme="light"] .text-muted { color: #687066 !important; }
html[data-theme="light"] .topbar { background: #ffffff; }
html[data-theme="light"] .brand,
html[data-theme="light"] .project-name { color: #20241e; }
html[data-theme="light"] .save-status { color: #747c71; }
html[data-theme="light"] .icon-button,
html[data-theme="light"] .transport-button,
html[data-theme="light"] .mini-icon { color: #626a5f; }
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .transport-button:hover,
html[data-theme="light"] .mini-icon:hover { color: #171a16; background: #eef1eb; border-color: #d9ddd4; }
html[data-theme="light"] .secondary-button { color: #343a31; background: #f2f4ef; border-color: #d9ddd4; }
html[data-theme="light"] .secondary-button:hover { background: #e8ece5; border-color: #c5cbc0; }
html[data-theme="light"] .theme-menu { color: #20241e; background: #ffffff; border-color: #d9ddd4; box-shadow: 0 18px 50px rgba(36,43,32,.16); }
html[data-theme="light"] .theme-menu-title,
html[data-theme="light"] .theme-menu button small { color: #747c71; }
html[data-theme="light"] .theme-menu button { color: #4d554a; }
html[data-theme="light"] .theme-menu button:hover { color: #171a16; background: #f2f4ef; border-color: #d9ddd4; }
html[data-theme="light"] .theme-menu button.active { color: #587b1e; background: #f0f6e7; border-color: #c8d9aa; }
html[data-theme="light"] .mode-nav-link { color: #747c71; }
html[data-theme="light"] .mode-nav-link:hover { color: #20241e; background: #f0f3ed; }
html[data-theme="light"] .mode-nav-link.active { color: #668d24; background: #f0f3ed; border-color: #d9ddd4; }
html[data-theme="light"] .preview-pane { background: #eef0eb; }
html[data-theme="light"] .empty-video,
html[data-theme="light"] .audio-stage { color: #ffffff; }
html[data-theme="light"] .empty-video .text-muted { color: #999d91 !important; }
html[data-theme="light"] .transport { background: #ffffff; }
html[data-theme="light"] .time-display { color: #7b8378; }
html[data-theme="light"] .time-display strong { color: #30362e; }
html[data-theme="light"] .lyric-preview { color: #30362e; }
html[data-theme="light"] .lyric-preview small { color: #747c71; }
html[data-theme="light"] .lyric-preview .lyric-romanization { color: #8a9187; }
html[data-theme="light"] .lyric-preview .caption-word { color: #92998f; }
html[data-theme="light"] .lyric-preview .caption-word.done { color: #30362e; }
html[data-theme="light"] .lyric-preview .caption-word.active { color: #668d24; }
html[data-theme="light"] .mini-icon.danger { color: #e28a81; }
html[data-theme="light"] .speed-button { color: #51594e; background: #f1f3ee; border-color: #d6dbd1; }
html[data-theme="light"] .timeline-section { background: #f8f9f6; }
html[data-theme="light"] .section-label { color: #30362e; }
html[data-theme="light"] .shortcut-hint { color: #7a8277; }
html[data-theme="light"] .timeline-scroll,
html[data-theme="light"] .cue-list { scrollbar-color: #c8cdc4 transparent; }
html[data-theme="light"] .timeline { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(35,43,31,.045) 10%); }
html[data-theme="light"] .ruler { color: #7c8479; border-color: #e1e5dd; }
html[data-theme="light"] .ruler-mark::after { border-color: #cdd2c9; }
html[data-theme="light"] .wave-bar { background: #858e80; }
html[data-theme="light"] .timeline-cue { color: #42512d; background: #e5efd7; border-color: #a9bf85; }
html[data-theme="light"] .timeline-cue:hover,
html[data-theme="light"] .timeline-cue.active { color: #26331b; background: #d8e8c2; }
html[data-theme="light"] .timeline-word { color: #40502d; background: rgba(111,152,39,.13); border-color: rgba(111,152,39,.38); }
html[data-theme="light"] .subtitle-pane { background: #ffffff; }
html[data-theme="light"] .subtitle-header h1 { color: #20241e; }
html[data-theme="light"] .subtitle-header p { color: #747c71; }
html[data-theme="light"] .clear-list-button { color: #a44a42; background: #fff5f3; border-color: #e8c8c3; }
html[data-theme="light"] .clear-list-button:hover { color: #87352f; background: #fdeae7; border-color: #dca9a2; }
html[data-theme="light"] .mode-tabs { background: #f1f3ee; border-color: #d9ddd4; }
html[data-theme="light"] .mode-tab { color: #747c71; }
html[data-theme="light"] .mode-tab.active { color: #17200e; }
html[data-theme="light"] .count-badge { color: #5d655a; background: #edf0ea; }
html[data-theme="light"] .cue-card { color: #596156; }
html[data-theme="light"] .cue-card:hover { background: #f3f5f1; }
html[data-theme="light"] .cue-card.active { color: #293126; background: #edf4e4; border-color: #c4d5a9; }
html[data-theme="light"] .cue-index { color: #687066; background: #ecefe9; }
html[data-theme="light"] .cue-time,
html[data-theme="light"] .empty-cues { color: #747c71; }
html[data-theme="light"] .active-editor { background: #f8f9f6; }
html[data-theme="light"] .time-inputs,
html[data-theme="light"] .time-inputs label,
html[data-theme="light"] .lyric-meta-fields label,
html[data-theme="light"] .editor-footer,
html[data-theme="light"] .word-timing > span { color: #747c71; }
html[data-theme="light"] .time-inputs input,
html[data-theme="light"] .active-editor textarea,
html[data-theme="light"] .lyric-meta-fields input { color: #30362e; background: #ffffff; border-color: #d6dbd1; }
html[data-theme="light"] .word-panel { border-color: #e0e4dc; }
html[data-theme="light"] .word-toolbar { color: #687066; }
html[data-theme="light"] .word-tool { color: #51594e; background: #edf0ea; border-color: #d1d7cd; }
html[data-theme="light"] .word-tool:hover,
html[data-theme="light"] .word-tool.accent { color: #17200e; }
html[data-theme="light"] .word-session,
html[data-theme="light"] .word-chips { background: #f1f4ee; border-color: #d6dbd1; }
html[data-theme="light"] .word-progress > div:first-child { color: #747c71; }
html[data-theme="light"] .word-progress > div:first-child span:first-child,
html[data-theme="light"] .word-navigation strong { color: #414a3e; }
html[data-theme="light"] .word-progress-track { background: #d8ded3; }
html[data-theme="light"] .word-chip { color: #4d554a; background: #ffffff; border-color: #d6dbd1; }
html[data-theme="light"] .word-chip small { color: #7b8378; }
html[data-theme="light"] .word-chip.active { color: #17200e; }
html[data-theme="light"] .word-chip.recording { color: #fff7f5; background: #9a4c42; border-color: #c9675b; }
html[data-theme="light"] .word-time-inputs label { color: #747c71; }
html[data-theme="light"] .word-time-inputs input { color: #30362e; background: #ffffff; border-color: #d6dbd1; }
html[data-theme="light"] .export-dialog { color: #20241e; background: #ffffff; border-color: #d9ddd4; box-shadow: 0 25px 80px rgba(36,43,32,.24); }
html[data-theme="light"] .export-dialog::backdrop { background: rgba(31,37,28,.34); }
html[data-theme="light"] .dialog-head p { color: #747c71; }
html[data-theme="light"] .format-card { color: #4d554a; background: #f8f9f6; border-color: #d9ddd4; }
html[data-theme="light"] .format-card strong { color: #20241e; }
html[data-theme="light"] .format-card span { color: #747c71; }
html[data-theme="light"] .format-card.selected { background: #edf4e4; border-color: #9dbb6d; }
html[data-theme="light"] .import-divider,
html[data-theme="light"] .import-paste-field { color: #687066; }
html[data-theme="light"] .import-paste-field textarea { color: #30362e; background: #ffffff; border-color: #d6dbd1; }
html[data-theme="light"] .toast { color: #30362e; background: rgba(255,255,255,.96); border-color: #d9ddd4; box-shadow: 0 8px 30px rgba(36,43,32,.18); }
html[data-theme="light"] .mobile-nav { background: #ffffff; }
html[data-theme="light"] .mobile-nav button { color: #747c71; }
html[data-theme="light"] .mobile-nav button.active { color: #668d24; }
html[data-theme="light"] .mobile-add { color: #17200e; box-shadow: 0 0 0 5px #ffffff; }

/* GEO content */
.geo-content { border-top: 1px solid var(--line); background: #0e0f0d; color: #999d91; font-size: 13px; line-height: 1.7; }
.geo-inner { max-width: 860px; margin: 0 auto; padding: 32px 24px 48px; }
.geo-heading { font-size: 18px; font-weight: 700; color: #e9ece5; margin-bottom: 8px; }
.geo-desc { margin-bottom: 24px; }
.geo-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 28px; }
.geo-features article { padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.geo-features h3 { font-size: 14px; font-weight: 700; color: #e2e6dc; margin-bottom: 6px; }
.geo-features p { font-size: 13px; }
.geo-faq { margin-top: 4px; }
.geo-faq summary { cursor: pointer; font-size: 15px; font-weight: 700; color: #e2e6dc; padding: 10px 0; }
.geo-faq summary:hover { color: #c5f26a; }
.geo-faq-list { padding-top: 8px; }
.geo-faq dt { font-weight: 600; color: #d9dcd3; margin-top: 14px; }
.geo-faq dt:first-child { margin-top: 0; }
.geo-faq dd { margin: 4px 0 0; }
html[data-theme="light"] .geo-content { background: #f4f5f1; color: #687066; }
html[data-theme="light"] .geo-heading { color: #1a1d18; }
html[data-theme="light"] .geo-features article { border-color: #d9ddd4; background: #ffffff; }
html[data-theme="light"] .geo-features h3 { color: #20241e; }
html[data-theme="light"] .geo-faq summary { color: #20241e; }
html[data-theme="light"] .geo-faq summary:hover { color: #587b1e; }
html[data-theme="light"] .geo-faq dt { color: #343a31; }