:root{--primary: #FF6B35;--primary-dark: #e55520;--secondary: #00A8E8;--accent: #FFD700;--accent-pink: #FF4B8B;--bg-dark: #0d0d1a;--bg-card: #1a1a2e;--bg-card2: #16213e;--text-primary: #ffffff;--text-secondary: #a0a0c0;--border: rgba(255,255,255,.08);--shadow-glow: 0 0 30px rgba(255,107,53,.3);--radius: 16px;--font-main: "Nunito", sans-serif;--font-display: "Baloo 2", cursive}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 20%,rgba(255,107,53,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,168,232,.08) 0%,transparent 50%);pointer-events:none;z-index:0}.app{position:relative;z-index:1;min-height:100vh}.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#0d0d1ae6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.logo{font-family:var(--font-display);font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.logo span{color:var(--accent);-webkit-text-fill-color:var(--accent)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:50px;font-family:var(--font-main);font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 20px #ff6b3566}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #ff6b3580}.btn-secondary{background:#ffffff14;color:#fff;border:1px solid var(--border)}.btn-secondary:hover{background:#ffffff26;transform:translateY(-1px)}.btn-accent{background:linear-gradient(135deg,var(--secondary),#0076a8);color:#fff;box-shadow:0 4px 20px #00a8e84d}.btn-accent:hover{transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.mic-btn{width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.8rem;transition:all .2s ease;position:relative;background:linear-gradient(135deg,var(--accent-pink),#c0096b);box-shadow:0 4px 20px #ff4b8b80}.mic-btn:hover{transform:scale(1.1)}.mic-btn.recording{background:linear-gradient(135deg,#ff2a2a,#c00);animation:mic-pulse 1s ease-in-out infinite}@keyframes mic-pulse{0%,to{box-shadow:0 0 #ff2a2ab3}50%{box-shadow:0 0 0 20px #ff2a2a00}}.waveform{display:flex;align-items:center;gap:3px;height:32px}.waveform-bar{width:4px;background:var(--accent-pink);border-radius:2px;animation:wave .8s ease-in-out infinite}.waveform-bar:nth-child(2){animation-delay:.1s}.waveform-bar:nth-child(3){animation-delay:.2s}.waveform-bar:nth-child(4){animation-delay:.3s}.waveform-bar:nth-child(5){animation-delay:.15s}@keyframes wave{0%,to{height:6px}50%{height:28px}}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;transition:width .5s ease}.upload-zone{border:2px dashed rgba(255,107,53,.4);border-radius:var(--radius);padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#ff6b350a}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--primary);background:#ff6b351a;transform:scale(1.01)}.upload-icon{font-size:3rem;margin-bottom:1rem;display:block}.upload-zone h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:.5rem}.upload-zone p{color:var(--text-secondary);font-size:.9rem}.player-wrapper{position:relative;width:100%;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}.player-wrapper video{width:100%;height:100%;object-fit:contain;display:block}.player-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.manga-bubble{position:absolute;max-width:280px;animation:bubble-pop .4s cubic-bezier(.175,.885,.32,1.275) forwards;pointer-events:none;z-index:50}@keyframes bubble-pop{0%{transform:scale(0) rotate(-5deg);opacity:0}70%{transform:scale(1.05) rotate(1deg)}to{transform:scale(1) rotate(0);opacity:1}}.bubble-inner{position:relative;padding:1rem 1.2rem;border-radius:20px;border:3px solid;font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.5;box-shadow:4px 4px #0000004d}.bubble-tail-bottom-left:after{content:"";position:absolute;bottom:-18px;left:20px;width:0;height:0;border-left:12px solid transparent;border-right:5px solid transparent;border-top:18px solid}.bubble-jagged .bubble-inner{border-radius:0;clip-path:polygon(5% 8%,12% 0%,18% 6%,30% 0%,38% 7%,50% 0%,62% 5%,72% 0%,80% 6%,90% 0%,96% 8%,100% 20%,95% 35%,100% 50%,95% 65%,100% 80%,93% 92%,80% 100%,65% 95%,50% 100%,35% 95%,20% 100%,8% 93%,0% 80%,5% 65%,0% 50%,5% 35%,0% 20%);padding:1.3rem 1.5rem}.bubble-text span{display:inline;opacity:0;animation:letter-appear .03s ease forwards}@keyframes letter-appear{to{opacity:1}}.char-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;opacity:.8}.qa-panel{background:var(--bg-card2);border-top:1px solid var(--border);padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:1rem}.qa-controls{display:flex;align-items:center;gap:1rem}.qa-transcript{background:#ffffff0d;border-radius:12px;padding:.75rem 1rem;font-size:.95rem;border-left:3px solid var(--primary);color:var(--text-secondary);min-height:48px;display:flex;align-items:center;flex:1}.text-input-row{display:flex;gap:.75rem;align-items:center}.text-input{flex:1;background:#ffffff14;border:1px solid var(--border);border-radius:50px;padding:.75rem 1.2rem;color:#fff;font-family:var(--font-main);font-size:1rem;outline:none;transition:border-color .2s}.text-input:focus{border-color:var(--primary)}.text-input::placeholder{color:var(--text-secondary)}.processing-step{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:10px;font-size:.9rem;transition:all .3s}.processing-step.active{background:#ff6b351a;border-left:3px solid var(--primary)}.processing-step.done{opacity:.6}.step-icon{font-size:1.2rem;min-width:24px;text-align:center}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.character-card{background:var(--bg-card);border:2px solid var(--border);border-radius:14px;padding:1.2rem;text-align:center;cursor:pointer;transition:all .25s ease}.character-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0006}.character-card.active{border-color:var(--primary);box-shadow:0 0 0 3px #ff6b3533}.char-emoji{font-size:2.5rem;margin-bottom:.5rem;display:block}.char-name{font-weight:800;font-size:.9rem}.response-card{background:linear-gradient(135deg,var(--bg-card),var(--bg-card2));border:1px solid rgba(255,107,53,.2);border-radius:var(--radius);padding:1.2rem;display:flex;flex-direction:column;gap:.75rem;animation:slide-up .4s ease}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.response-header{display:flex;align-items:center;gap:.75rem}.char-avatar{font-size:2rem}.response-text{font-family:var(--font-display);font-size:1.05rem;line-height:1.6;color:var(--text-primary)}.loading-ring{width:40px;height:40px;border:4px solid rgba(255,107,53,.2);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.sparkle{position:absolute;width:8px;height:8px;background:var(--accent);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:sparkle-float 2s ease-in-out infinite}@keyframes sparkle-float{0%,to{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-12px) rotate(180deg);opacity:.6}}.page-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 80px);padding:2rem;text-align:center}.page-hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);font-weight:900;background:linear-gradient(135deg,#fff 0%,var(--accent) 50%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;margin-bottom:1rem}.page-hero .subtitle{font-size:1.2rem;color:var(--text-secondary);max-width:500px;margin:0 auto 2rem;line-height:1.6}.main-layout{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;padding:1.5rem;max-width:1400px;margin:0 auto;align-items:start}@media (max-width: 900px){.main-layout{grid-template-columns:1fr}}.sidebar{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:90px}.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border-radius:50px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.tag-primary{background:#ff6b3533;color:var(--primary)}.tag-success{background:#32cd3233;color:#32cd32}.tag-info{background:#00a8e833;color:var(--secondary)}.tooltip{position:relative;cursor:help}.tooltip:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:.4rem .7rem;border-radius:8px;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}.tooltip:hover:after{opacity:1}.fade-in{animation:fade-in .4s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.bounce-in{animation:bounce-in .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes bounce-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#ff6b3566;border-radius:3px}.audio-player{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:#ffffff0f;border-radius:50px;border:1px solid var(--border)}.audio-player-icon{font-size:1.2rem}.audio-label{font-size:.85rem;color:var(--text-secondary)}.divider{height:1px;background:var(--border);margin:1rem 0}.section-title{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-bottom:.75rem}.stream-notice{background:#00a8e81a;border:1px solid rgba(0,168,232,.3);border-radius:8px;padding:.6rem 1rem;font-size:.8rem;color:var(--secondary);display:flex;align-items:center;gap:.5rem}