:root{--bg: #0c0c10;--panel: #15151d;--border: #2a2a38;--accent: #e8412e;--accent-hi: #ff5b45;--text: #f2f2f7;--muted: #9a9ab0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:1720px;margin:0 auto;padding:16px 32px;height:100vh;display:flex;flex-direction:column}header p{margin:0 0 10px;color:var(--muted);font-size:14px}.header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.lang-switch{display:flex;gap:4px;flex:none}.lang{padding:5px 10px;font-size:12px;border-radius:8px;background:#1c1c26;border:1px solid var(--border);color:var(--muted)}.lang.on{background:var(--accent);border-color:var(--accent);color:#fff}.app-badge{display:inline-flex;align-items:baseline;gap:4px;margin:0 0 6px;background:#e8412e;color:#fff;padding:5px 16px;border-radius:16px}.badge-kanji{font-size:30px;font-weight:800}.badge-sep{font-size:26px;opacity:.7;font-weight:400}.badge-romaji{font-size:26px;font-weight:800;letter-spacing:.5px}.footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:14px;margin-top:12px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}.footer-logo{height:18px}.layout{flex:1;min-height:0;display:flex;gap:20px}.controls{flex:0 0 440px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:0;padding-right:4px}.preview-col{flex:1 1 auto;display:flex;flex-direction:column;gap:16px;min-height:0}.preview-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}.settings-bar{flex:none}.settings-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}.settings-row+.settings-row{margin-top:12px}.settings-row.toggles{align-items:center}.settings-bar .field{flex:1 1 200px;margin-bottom:0}.settings-bar .posfield{flex:0 1 180px}.settings-bar .toggle{margin-bottom:0}.settings-row.export-row{align-items:center}.settings-row.export-row .export{flex:1 1 220px}.settings-row.export-row .warn,.settings-row.export-row .hint{margin:0}.preview-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}.preview-badge{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:20px}@media (max-width: 900px){.app{height:auto}.layout{flex-direction:column}.controls{flex:none}.preview-stage{height:70vh}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}.panel h2{margin:0 0 12px;font-size:15px;color:var(--muted);font-weight:600}.preview-panel{padding:14px 16px}.panel.grow{flex:1}.dropzone{display:flex;align-items:center;justify-content:center;height:260px;border:2px dashed var(--border);border-radius:12px;color:var(--muted);cursor:pointer;text-align:center;padding:20px}.dropzone:hover{border-color:var(--accent);color:var(--text)}.phototools{display:flex;gap:8px;margin-bottom:10px}.phototools .mini{display:inline-flex;align-items:center;padding:6px 12px;font-size:13px;cursor:pointer}.photo-wrap{position:relative;cursor:crosshair;line-height:0;touch-action:none}.photo-wrap img{width:100%;border-radius:12px;-webkit-user-select:none;user-select:none}.crop-overlay{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px #00000059;border-radius:4px;pointer-events:none}.hover-preview{position:absolute;top:8px;right:8px;pointer-events:none;border-radius:10px;overflow:hidden;box-shadow:0 6px 24px #0009;border:2px solid var(--accent)}.hover-canvas{width:84px;height:149px;display:block;background:#000}.hover-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;line-height:16px;background:#0000008c;color:#fff;text-transform:uppercase;letter-spacing:1px}.marker{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 0 0 3px #e8412e59;pointer-events:none}.hint{color:var(--muted);font-size:13px;margin-top:12px}.warn{color:#ffb020;font-size:13px;margin-top:12px}.link{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:13px;text-decoration:underline}.preview{height:100%;width:auto;max-width:100%;background:#000;border-radius:16px}.transport{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px}.transport input[type=range]{flex:1;accent-color:var(--accent)}.time{color:var(--muted);font-size:13px;width:42px;text-align:right}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px;color:var(--muted)}.field input,.field select{background:#0d0d12;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font-size:14px}button{background:#22222e;border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:10px;cursor:pointer;font-size:14px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}.export{width:100%;background:var(--accent);border:none;font-weight:700;padding:14px}.bar{margin-top:12px;height:6px;background:#22222e;border-radius:4px;overflow:hidden}.bar>div{height:100%;background:var(--accent);transition:width .1s}.logo{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;padding:2px 8px;font-size:22px;margin-right:6px;vertical-align:middle}.toggle{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px;cursor:pointer}.toggle input{accent-color:var(--accent);width:16px;height:16px}.exif{color:#4ade80;font-size:12px;margin-top:8px}.snapsel{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}.snapbtn{width:34px;height:34px;padding:0;border-radius:8px;font-weight:700}.snapbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}.thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.thumb{display:flex;flex-direction:column;align-items:center;gap:6px}.thumb-img{position:relative;cursor:pointer;line-height:0}.thumb-img:hover canvas{border-color:var(--accent)}.thumb-zoom{width:72px;accent-color:var(--accent)}.zoomfield{margin-top:12px}.zoomfield input[type=range]{accent-color:var(--accent)}.thumb canvas{width:72px;height:128px;border-radius:8px;border:1px solid var(--border);background:#000;display:block}.thumb-num{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.ghost{background:transparent;width:100%}.filelabel{display:block;text-align:center;border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;font-size:14px}.filelabel:hover{border-color:var(--accent)}.jamendo{margin-top:12px;font-size:13px}.jamendo summary{cursor:pointer;color:var(--muted);margin-bottom:10px}.key{width:100%;margin-bottom:8px;background:#0d0d12;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px}.searchrow{display:flex;gap:8px}.searchrow input{flex:1;background:#0d0d12;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px}.results{margin-top:10px;max-height:200px;overflow-y:auto}.track{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}.tname{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tname em{color:var(--muted);font-style:normal}.mini{padding:4px 10px;font-size:12px}.stepper{display:flex;align-items:center;gap:4px;margin-bottom:12px}.step-wrap{display:flex;align-items:center;flex:0 0 auto}.step-line{width:40px;height:2px;background:var(--border);margin:0 6px}.step-line.on{background:var(--accent)}.step{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);padding:8px 16px;border-radius:24px;font-size:14px;color:var(--muted)}.step .step-num{width:22px;height:22px;border-radius:50%;background:#22222e;color:var(--text);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.step.active{color:var(--text);border-color:var(--accent)}.step.active .step-num{background:var(--accent);color:#fff}.step.done .step-num{background:#4ade80;color:#0d0d12}.phase{max-width:760px;margin:0 auto;width:100%}.phase-upload{margin:auto;position:relative}.phase-upload:before{content:"";position:absolute;inset:-80px -120px auto;height:300px;background:radial-gradient(60% 100% at 50% 0%,rgba(232,65,46,.14),transparent 70%);pointer-events:none}.phase-sub{color:var(--muted);margin:-8px 0 18px}.dropzone.big{flex-direction:column;gap:10px;height:240px;transition:border-color .15s,background .15s,transform .1s}.dropzone.drag{border-color:var(--accent);background:#e8412e14;transform:scale(1.01)}.dz-icon{font-size:42px}.dz-sub{font-size:12px;opacity:.7}.analyzing{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:14px}.spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.marker.draggable{pointer-events:auto;cursor:grab}.marker.draggable:active{cursor:grabbing}.thumb-del{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;border-radius:50%;background:#0009;border:1px solid var(--border);color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}.thumb-del:hover{background:var(--accent);border-color:var(--accent)}.jumps{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.jump{padding:5px 12px;font-size:12px;border-radius:20px;background:#1c1c26;border:1px solid var(--border);color:var(--muted)}.jump.on{background:var(--accent);border-color:var(--accent);color:#fff}.result-card{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}.result-card video{width:200px;border-radius:12px;background:#000;box-shadow:0 8px 30px #00000080}.result-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.result-tip{color:var(--muted);font-size:12px}.result-tip b{color:var(--text)}.reqs{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:8px}.reqs li{font-size:14px;color:var(--muted);padding-left:26px;position:relative}.reqs li:before{content:"○";position:absolute;left:6px;color:var(--muted)}.reqs li.ok{color:var(--text)}.reqs li.ok:before{content:"✓";color:#4ade80}.reqs li.bad{color:#ff6b6b}.reqs li.bad:before{content:"✕";color:#ff6b6b}.reqs li.warn{color:#ffb020}.reqs li.warn:before{content:"!";color:#ffb020}.preview-strip{display:flex;gap:16px;align-items:center;margin-top:18px;padding:14px;background:#0d0d12;border:1px solid var(--border);border-radius:12px}.preview-strip img{width:180px;height:auto;border-radius:8px}.preview-meta{flex:1;min-width:0}.preview-meta .cam{font-weight:700;margin:0 0 6px}.preview-meta p{margin:0 0 6px}.phase-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}.phase-nav .ghost,.phase-nav .primary{width:auto}.primary{background:var(--accent);border:none;color:#fff;font-weight:700;padding:12px 28px}.pillcount{margin-left:auto;align-self:center;background:#22222e;border-radius:20px;padding:4px 12px;font-size:13px;color:var(--muted)}.frames-view{position:relative;line-height:0}.frames-view img{width:100%;border-radius:12px;-webkit-user-select:none;user-select:none}.frame-box{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 2px #0006,0 0 22px #e8412e99;animation:framepulse 1.8s ease-in-out infinite}@keyframes framepulse{0%,to{box-shadow:0 0 0 2px #0006,0 0 10px #e8412e59}50%{box-shadow:0 0 0 2px #0006,0 0 26px #e8412ed9}}.frame-tag{position:absolute;top:-12px;left:-12px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;line-height:26px;text-align:center;box-shadow:0 2px 8px #00000080}.export-panel{flex:none}.export-panel .phase-nav{margin-top:14px}