*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;background:#0f0f0f;color:#e2e8f0;font-size:14px}.app{display:flex;flex-direction:column;height:100vh}.main{flex:1;overflow:hidden;display:flex;flex-direction:column}.nav{display:flex;align-items:center;gap:24px;padding:0 24px;height:52px;background:#111827;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;z-index:100}.nav-brand{font-size:1.1rem;font-weight:700;color:#e94560;letter-spacing:.05em}.nav-links{display:flex;gap:4px}.nav-link{padding:6px 14px;border-radius:6px;color:#94a3b8;text-decoration:none;font-size:.9rem;transition:background .15s,color .15s}.nav-link:hover{background:#ffffff0f;color:#e2e8f0}.nav-link.active{background:#e9456026;color:#e94560}.btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:opacity .15s,transform .1s}.btn:hover:not(:disabled){opacity:.85}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#e94560;color:#fff}.btn-secondary{background:#1e293b;color:#e2e8f0;border:1px solid rgba(255,255,255,.1)}.btn-sm{padding:5px 10px;font-size:.8rem}.btn-secondary-sm{padding:3px 8px;font-size:.78rem;background:#1e293b;color:#94a3b8;border:1px solid rgba(255,255,255,.1);border-radius:4px;cursor:pointer}.btn-danger-sm{padding:3px 8px;font-size:.78rem;background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3);border-radius:4px;cursor:pointer}.icon-btn{background:none;border:none;cursor:pointer;color:#64748b;padding:4px 6px;border-radius:4px;transition:color .15s,background .15s;font-size:1rem}.icon-btn:hover{color:#e2e8f0;background:#ffffff0f}.icon-btn.danger:hover{color:#f87171;background:#ef44441a}.icon-btn.sm{font-size:.8rem}.icon-btn:disabled{opacity:.25;cursor:default}.input{background:#1e293b;border:1px solid rgba(255,255,255,.1);color:#e2e8f0;border-radius:6px;padding:8px 12px;font-size:.875rem;outline:none;width:100%}.input:focus{border-color:#e9456080}.tabs{display:flex;gap:4px;margin-bottom:24px}.tab{padding:8px 20px;border:none;border-radius:6px;cursor:pointer;background:#1e293b;color:#94a3b8;font-size:.875rem}.tab.active{background:#e94560;color:#fff}.page{padding:28px;max-width:960px;margin:0 auto;overflow-y:auto;height:100%}.page h2{font-size:1.3rem;margin-bottom:20px;color:#f8fafc}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.8rem;color:#94a3b8;margin-bottom:6px}.muted{color:#64748b}.empty-state{text-align:center;padding:80px 20px;color:#64748b}.empty-state p{margin-bottom:20px}.char-panel{display:flex;gap:32px}.char-preview-box{width:260px;height:340px;flex-shrink:0;background:#111827;border-radius:10px;border:1px solid rgba(255,255,255,.06);overflow:hidden}.char-settings{flex:1}.voice-row{display:flex;gap:8px;align-items:center}.voice-row .input{flex:1}.sample-btn{white-space:nowrap;flex-shrink:0}.sample-text-hint{font-size:.75rem;color:#475569;margin-top:4px}.parts-grid{display:flex;flex-direction:column;gap:6px}.part-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#111827;border-radius:6px}.part-label{width:100px;font-size:.82rem;color:#94a3b8;flex-shrink:0}.part-status{width:20px;font-size:.9rem}.part-status.ok{color:#4ade80}.part-status.none{color:#475569}.settings-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.06)}.settings-section:last-of-type{border-bottom:none}.section-title{font-size:.8rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}.preview-hint{font-size:.72rem;color:#475569;text-align:center;margin-top:4px}.preset-btns{display:flex;flex-wrap:wrap;gap:6px}.preset-btn{padding:5px 12px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:#1e293b;color:#94a3b8;cursor:pointer;font-size:.8rem;transition:all .15s}.preset-btn:hover{border-color:#ffffff40;color:#e2e8f0}.preset-btn.active{background:#e9456033;border-color:#e94560;color:#e94560}.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.slider-label{width:160px;font-size:.82rem;color:#94a3b8;flex-shrink:0}.slider{flex:1;accent-color:#e94560}.editor-layout{display:flex;height:100%;overflow:hidden}.script-list{width:220px;flex-shrink:0;background:#111827;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden}.script-list-header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid rgba(255,255,255,.06)}.script-list-header h3{font-size:.9rem;color:#94a3b8}.script-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .1s}.script-item:hover{background:#ffffff08}.script-item.active{background:#e945601a}.script-item-title{flex:1;font-size:.85rem;display:flex;flex-direction:column;gap:2px}.script-item-title small{color:#475569;font-size:.75rem}.script-detail{flex:1;display:flex;flex-direction:column;overflow:hidden}.script-detail-header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.title-input{flex:1;font-size:1rem;font-weight:600}.lines-container{flex:1;overflow-y:auto;padding:12px 20px;display:flex;flex-direction:column;gap:8px}.line-row{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:8px;background:#111827;border-left:3px solid transparent}.line-row.char-1{border-left-color:#ff6b6b}.line-row.char-2{border-left-color:#4ecdc4}.line-order-btns{display:flex;flex-direction:column;gap:2px}.char-toggle{padding:4px 10px;border:none;border-radius:5px;cursor:pointer;font-size:.78rem;font-weight:600;white-space:nowrap;flex-shrink:0;transition:opacity .15s}.char-toggle:hover{opacity:.8}.char-toggle-1{background:#ff6b6b33;color:#ff6b6b;border:1px solid rgba(255,107,107,.4)}.char-toggle-2{background:#4ecdc433;color:#4ecdc4;border:1px solid rgba(78,205,196,.4)}.line-text{flex:1;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:#e2e8f0;border-radius:5px;padding:6px 10px;font-size:.875rem;resize:none;outline:none;line-height:1.5}.line-text:focus{border-color:#e9456066}.script-howto{margin:20px;padding:16px 20px;background:#e945600f;border:1px solid rgba(233,69,96,.2);border-radius:8px;color:#94a3b8;font-size:.85rem;line-height:1.8}.script-howto p{margin-bottom:8px;color:#cbd5e1}.script-howto ul{padding-left:18px}.script-howto li{margin-bottom:4px}.add-line-row{display:flex;gap:12px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}.char-add-btn{flex:1}.char-add-btn.char-1{background:#ff6b6b26;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.char-add-btn.char-2{background:#4ecdc426;color:#4ecdc4;border:1px solid rgba(78,205,196,.3)}.player-page{display:grid;grid-template-areas:"stage    sidebar" "prepare  sidebar" "controls sidebar";grid-template-columns:1fr 260px;grid-template-rows:1fr 36px 64px;height:100%;overflow:hidden}.player-stage{grid-area:stage;display:flex;align-items:flex-end;background:#0a0a0f;position:relative;overflow:hidden}.player-char{flex:1;display:flex;flex-direction:column;align-items:center;transition:opacity .3s;position:relative;z-index:20}.player-char.idle{opacity:.55}.player-char.speaking{opacity:1}.player-char-preview{flex:1;width:100%;min-height:0}.player-char-name{padding:8px 0 12px;font-size:.9rem;color:#64748b;transition:color .3s}.player-char-name.active{color:#e2e8f0;font-weight:600}.player-dialogue-box{position:absolute;bottom:0;left:0;right:0;z-index:20;background:#000c;border-top:1px solid rgba(255,255,255,.1);padding:12px 20px;min-height:72px}.player-dialogue-name{font-size:.8rem;font-weight:600;margin-bottom:4px}.player-dialogue-text{font-size:1.05rem;line-height:1.6;color:#f1f5f9}.prepare-bar{grid-area:prepare;display:flex;align-items:center;gap:12px;padding:6px 16px;background:#0d1117;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}.prepare-progress{flex:1;height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.prepare-progress-bar{height:100%;background:#e94560;border-radius:2px;transition:width .2s}.prepare-done-label{font-size:.78rem;color:#4ade80}.cache-dot{font-size:.5rem;color:#4ade80;margin-left:4px;flex-shrink:0}.prepare-status{font-size:.78rem;color:#94a3b8}.stage-preview{position:relative;width:100%;height:180px;background:#0a0a0f;border-radius:10px;overflow:hidden;margin-bottom:24px;border:1px solid rgba(255,255,255,.08)}.stage-preview-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.stage-preview-label{position:absolute;bottom:8px;right:10px;font-size:.72rem;color:#ffffff4d}.player-controls{grid-area:controls;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#111827;border-top:1px solid rgba(255,255,255,.06)}.player-controls-left{flex:1}.player-controls-center{display:flex;align-items:center;gap:8px}.player-controls-right{flex:1;text-align:right}.script-select{width:180px}.ctrl-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#1e293b;color:#e2e8f0;cursor:pointer;font-size:1rem;transition:background .15s,transform .1s}.ctrl-btn:hover:not(:disabled){background:#2d3f55}.ctrl-btn:active:not(:disabled){transform:scale(.92)}.ctrl-btn:disabled{opacity:.3;cursor:default}.ctrl-btn.primary{background:#e94560;border-color:#e94560;font-size:1.1rem;width:48px;height:48px}.ctrl-btn.primary:hover{background:#c73652}.progress-label{font-size:.82rem;color:#64748b}.player-script-list{grid-area:sidebar;background:#111827;border-left:1px solid rgba(255,255,255,.06);overflow-y:auto;display:flex;flex-direction:column}.script-list-title{padding:14px;font-size:.85rem;font-weight:600;color:#94a3b8;border-bottom:1px solid rgba(255,255,255,.06)}.script-line-item{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .1s;border-left:3px solid transparent;display:flex;flex-direction:column;gap:2px}.script-line-item:hover{background:#ffffff08}.script-line-item.current{background:#e9456014}.script-line-item.char-1{border-left-color:#ff6b6b}.script-line-item.char-2{border-left-color:#4ecdc4}.script-line-item.current.char-1{background:#ff6b6b1a}.script-line-item.current.char-2{background:#4ecdc41a}.script-line-char{font-size:.72rem;color:#64748b}.script-line-item.char-1 .script-line-char{color:#ff6b6b}.script-line-item.char-2 .script-line-char{color:#4ecdc4}.script-line-text{font-size:.82rem;line-height:1.4;color:#94a3b8}.script-line-item.current .script-line-text{color:#e2e8f0}.player-select-page{padding:40px}.player-select-page h2{margin-bottom:24px}.script-card-list{display:flex;flex-wrap:wrap;gap:16px}.script-card{background:#111827;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:20px 24px;cursor:pointer;transition:border-color .15s,transform .1s;min-width:180px}.script-card:hover{border-color:#e94560;transform:translateY(-2px)}.script-card-title{font-size:1rem;font-weight:600;margin-bottom:6px}.script-card-meta{font-size:.8rem;color:#64748b}.slots-container{display:flex;flex-direction:column;gap:0}.slots-title{font-size:1rem;font-weight:600;margin-bottom:16px;color:#f1f5f9}.slot-group{margin-bottom:20px}.slot-group h4{font-size:.82rem;color:#94a3b8;margin-bottom:8px}.slot-desc{font-size:.75rem;color:#475569;margin-bottom:10px;line-height:1.4}.drop-zones-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.drop-zone{position:relative;aspect-ratio:1 / 1;border:2px dashed rgba(255,255,255,.15);border-radius:10px;background:#111827;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:border-color .15s,background .15s;overflow:hidden}.drop-zone:hover,.drop-zone.drag-active{border-color:#e94560;background:#e945600f}.drop-zone-icon{font-size:1.6rem}.drop-zone-label{font-size:.72rem;color:#64748b;text-align:center;padding:0 4px}.drop-zone-image{width:100%;height:100%;object-fit:contain}.drop-zone-clear{position:absolute;top:4px;right:4px;background:#0009;border:none;border-radius:50%;color:#fff;width:20px;height:20px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.drop-zone-clear:hover{background:#e94560}.preview-container{width:100%;height:100%;position:relative}.preview-canvas-wrapper{width:100%;height:100%;position:relative;overflow:hidden}.preview-canvas{width:100%;height:100%;position:relative}.avatar-layer{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}@keyframes cfFadeIn{0%{opacity:0}to{opacity:1}}@keyframes cfFadeOut{0%{opacity:1}to{opacity:0}}@keyframes cfEyeSlideIn{0%{transform:translateY(-4px);opacity:0}to{transform:none;opacity:1}}@keyframes cfEyeSlideOut{0%{transform:none;opacity:1}to{transform:translateY(4px);opacity:0}}.cf-fade-in{animation:cfFadeIn var(--cf-speed, .15s) ease forwards}.cf-fade-out{animation:cfFadeOut var(--cf-speed, .15s) ease forwards;pointer-events:none}.cf-eye-slide-in{animation:cfEyeSlideIn var(--cf-speed, .15s) ease forwards}.cf-eye-slide-out{animation:cfEyeSlideOut var(--cf-speed, .15s) ease forwards;pointer-events:none}