:root{--bg:#f7f7fb;--accent:#1e88e5}.html,:root,html,body,#root{height:100%}body{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);margin:0;padding:20px;box-sizing:border-box}.app{max-width:1200px;margin:0 auto;min-height:calc(100vh - 40px);display:flex;flex-direction:column}.main{margin-left:220px;display:flex;gap:16px;align-items:flex-start}.main-left{flex:1;min-width:0}.player{background:#fff;border:1px solid #e6e6ef;padding:16px;border-radius:8px;display:flex;flex-direction:column;flex:1}.sidebar{position:fixed;left:0;top:0;width:200px;height:100%;background:#fafafa;border-right:1px solid #eee;padding:16px;box-sizing:border-box}.sidebar-inner{position:sticky;top:16px}.sidebar h3{margin:0 0 8px}.sidebar button{display:block;margin-bottom:8px}.sidebar .status{margin-top:12px;font-size:13px;color:#444}.subtitle-box{margin-top:12px;padding:12px;background:#fff;color:#000;border-radius:6px;min-height:auto;display:flex;align-items:flex-start;box-shadow:0 1px 4px #0000000f;flex:none}.subtitle.muted{opacity:.7;color:#ddd}.subtitle{font-size:18px;text-align:justify;line-height:1.5;margin:0;padding:8px}.cue-list{margin-top:12px;max-height:220px;overflow:auto}.cue{padding:8px;border-bottom:1px solid #eee;text-align:justify}.cue.current{background:#fff7a8;padding:10px;border-radius:6px}.essay{width:100%;height:40vh;max-height:60vh;overflow:auto;background:transparent;padding:4px}.essay p{margin:0;text-align:justify;color:#000;line-height:1.8}.essay .word{display:inline;padding:2px 6px}.essay .word.current{background:#fff7a8;border-radius:4px;transition:background .18s}.word-token{cursor:pointer}.word-token:hover{background:#eef3ff;border-radius:4px}.right-panel{width:280px;display:flex;flex-direction:column;gap:12px}.panel-card{background:#fff;border:1px solid #e6e6ef;border-radius:10px;padding:12px;box-shadow:0 2px 6px #0000000f}.panel-title{font-weight:600;margin-bottom:8px}.panel-word{font-size:20px;font-weight:700;color:#1e88e5;margin-bottom:8px}.panel-label{font-size:12px;color:#666;margin-top:8px}.panel-value{font-size:14px;color:#222}.panel-muted{font-size:13px;color:#777}.panel-error{color:#c62828;font-size:13px;margin-top:6px}.lang-row{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:10px}.lang-label{font-size:12px;color:#555}.lang-select{padding:6px;border:1px solid #ddd;border-radius:6px}.history-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px;border-radius:6px}.history-item:hover{background:#f3f6ff}.history-main{flex:1;cursor:pointer}.history-trash{border:none;background:transparent;color:#c62828;cursor:pointer;font-size:16px;line-height:1}.history-trash:hover{color:#b71c1c}.danger{background:#c62828;color:#fff;border:1px solid #b71c1c;border-radius:6px;padding:6px 10px;cursor:pointer}.danger:hover{background:#b71c1c}.history-word{font-weight:600}.history-translation{color:#555;font-size:13px}.editor-cue{border:1px solid #ddd;padding:8px;margin-bottom:8px;border-radius:6px;background:#fff}.editor-cue.active{background:#fff7a8;border-color:#f1d36a}.drag-handle{cursor:grab;padding:6px 8px;border:1px dashed #ccc;border-radius:6px;color:#666;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:28px;height:44px}.drag-handle .dot{display:block;width:6px;height:6px;background:#666;border-radius:50%;margin:3px 0}.drag-handle:active{cursor:grabbing}@media (max-width: 800px){.sidebar{width:260px;transform:translate(-110%);transition:transform .24s ease;z-index:60}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:50}.main{margin-left:0}.right-panel{display:none}.sidebar-close{display:inline-block!important;margin-bottom:8px;background:transparent;border:none;font-size:14px;cursor:pointer}.sidebar-close{padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center}.sidebar-close:hover{background:#f3f6ff;border-color:#cfe0ff}.sidebar-toggle{padding:6px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center}.sidebar-toggle:hover{background:#f3f6ff;border-color:#cfe0ff}.app-header{position:relative;z-index:70}.sidebar-toggle{position:relative;z-index:80}.sidebar-inner{position:relative}.sidebar-inner{padding-top:44px}.sidebar{box-shadow:2px 0 12px #0000001f}.sidebar-toggle{display:inline-block}}@media (min-width: 801px){.sidebar-toggle{display:none}}.right-panel{width:280px}.right-backdrop{display:none}.right-panel.open{transform:none}@media (max-width: 800px){.right-panel{display:flex;position:fixed;right:0;top:0;height:100%;background:#fff;border-left:1px solid #eee;width:260px;transform:translate(110%);transition:transform .24s ease;z-index:60;padding:12px;box-sizing:border-box}.right-panel.open{transform:translate(0)}.right-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:50}.right-toggle,.sidebar-toggle{display:inline-block}}@media (min-width: 801px){.right-toggle{display:none}}.app-header{padding:0}.app-title{font-size:20px}.selected-title{font-size:16px;color:#333}@media (max-width: 800px){.app-header{padding-left:0}.selected-title{margin-left:40px!important;font-size:15px}}@media (max-width: 800px){.player .label-text{display:none}.player{min-height:calc(100vh - 120px);max-height:calc(100vh - 120px);display:flex;flex-direction:column}.player .subtitle-box{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden}.player .essay{flex:1 1 auto;height:100%;max-height:none;overflow:auto}}.editor-actions button{padding:6px 10px;border-radius:6px;border:1px solid #ccc;background:#fff}.editor-actions button:hover{background:#f3f6ff}.editor-cue-text{padding:4px;border-radius:4px}.editor-cue-text.active-text{background:#fff7a8}.editor-modal{background:#fff;padding:16px;border-radius:8px;display:flex;flex-direction:column;box-shadow:0 6px 18px #00000026;overflow:hidden}.editor-modal-header{padding-bottom:8px;border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:4;display:flex;flex-direction:column}.editor-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.editor-cues-container{overflow:auto;padding:12px;flex:1}.editor-cues-container .editor-cue{margin-bottom:10px}.spinner{width:18px;height:18px;border:3px solid rgba(0,0,0,.1);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;display:inline-block;margin-left:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mp3-list{margin-top:6px}.mp3-item{padding:6px 8px;border-radius:4px;color:#222}.mp3-item.selected{background:#e8f0ff;border:1px solid #cfe0ff}.mp3-item:hover{background:#f3f6ff}.mp3-item.placeholder{color:transparent;background:transparent;border:none}.sidebar-divider{height:1px;background:#eee;width:100%;margin:12px 0}