:root{--brand-gradient: linear-gradient( 135deg, #0f4c81 0%, #3b82f6 50%, #06b6d4 100% );--accent-color: #2563eb;--text-dark: #0f172a;--text-gray: #64748b;--glass-bg: rgba(255, 255, 255, .9)}*{box-sizing:border-box;margin:0;padding:0;font-family:PingFang SC,Inter,-apple-system,sans-serif}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(20px,30px)}}@keyframes wave{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes glow{0%,to{box-shadow:0 0 10px #2563eb4d}50%{box-shadow:0 0 20px #2563eb99}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-container{height:100vh;background-color:#f8fafc;color:var(--text-dark);display:flex;flex-direction:column;position:relative;animation:fadeIn .6s ease-out}.bg-blob{position:fixed;border-radius:50%;filter:blur(80px);z-index:0;opacity:.5;animation:float 15s infinite ease-in-out,pulse 8s ease-in-out infinite;pointer-events:none}.blob-1{width:600px;height:600px;background:#3b83f665;top:-100px;left:-100px;animation-delay:0s,0s}.blob-2{width:500px;height:500px;background:#06b6d41a;bottom:-100px;right:-50px;animation-delay:-5s,-2s}.navbar{height:72px;padding:0 40px;display:flex;align-items:center;z-index:10;animation:fadeInUp .6s ease-out}.nav-logo{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;color:var(--text-dark);text-decoration:none;letter-spacing:-.5px;transition:transform .3s}.nav-logo:hover{transform:scale(1.05)}.nav-logo svg{transition:transform .5s cubic-bezier(.4,0,.2,1);animation:pulse 3s ease-in-out infinite}.logo-gradient-text{background:linear-gradient(90deg,#2563eb,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite;background-size:200% 100%}.main-container{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 40px 40px;max-width:1440px;width:100%;margin:0 auto}.hero-wrapper{width:100%;height:100%;max-height:700px;border-radius:40px;background:var(--brand-gradient);position:relative;overflow:hidden;box-shadow:0 30px 60px -15px #2563eb40;display:flex;align-items:center;animation:fadeInScale 1s ease-out .2s backwards;transition:transform .3s,box-shadow .3s}.hero-wrapper:hover{transform:translateY(-5px);box-shadow:0 40px 80px -15px #2563eb59}.deco-line{position:absolute;background:#ffffff26;border-radius:10px;animation:slideInLeft 1s ease-out backwards}.line-1{height:2px;width:60%;top:20%;left:5%;animation:slideInLeft 1s ease-out .5s backwards,shimmer 3s linear infinite;background-size:200% 100%}.line-2{height:2px;width:40%;top:25%;left:5%;animation:slideInLeft 1s ease-out .7s backwards}.circle-big{position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.1);border-radius:50%;right:-100px;bottom:-200px;pointer-events:none;animation:rotateSlow 20s linear infinite}.sound-wave{position:absolute;left:80px;bottom:80px;display:flex;gap:6px;align-items:flex-end;height:40px}.bar{width:6px;background:#ffffffb3;border-radius:4px;animation:wave 1.2s infinite ease-in-out}.bar:nth-child(1){height:40%;animation-delay:0s}.bar:nth-child(2){height:80%;animation-delay:.1s}.bar:nth-child(3){height:100%;animation-delay:.2s}.bar:nth-child(4){height:60%;animation-delay:.3s}.bar:nth-child(5){height:30%;animation-delay:.4s}.hero-left{flex:1;padding:80px;color:#fff;z-index:2;position:relative;animation:slideInLeft 1s ease-out .4s backwards}.tag-pill{display:inline-block;padding:6px 16px;background:#ffffff26;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:24px;border:1px solid rgba(255,255,255,.25);color:#e0f2fe;animation:bounce 2s ease-in-out infinite;transition:all .3s}.tag-pill:hover{background:#ffffff40;transform:scale(1.05)}.hero-left h1{font-size:3.8rem;line-height:1.05;font-weight:800;margin-bottom:24px;letter-spacing:-1px;text-shadow:0 4px 20px rgba(0,0,0,.1);animation:slideUp 1s ease-out .6s backwards;position:relative}.hero-left h1:after{content:"";position:absolute;bottom:0;left:0;width:0;height:4px;background:#ffffff80;animation:typewriter 1.5s ease-out 1.2s forwards}.hero-left p{font-size:1.15rem;line-height:1.6;opacity:.95;max-width:540px;margin-bottom:40px;color:#f1f5f9;animation:slideUp 1s ease-out .8s backwards}.feature-icons{display:flex;gap:24px}.f-item{display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);animation:scaleIn .6s ease-out backwards}.f-item:nth-child(1){animation-delay:1s}.f-item:nth-child(2){animation-delay:1.1s}.f-item:nth-child(3){animation-delay:1.2s}.f-item:hover{transform:translateY(-8px) scale(1.05)}.icon-box{width:48px;height:48px;background:#ffffff1a;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.icon-box:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(45deg);transition:all .5s;opacity:0;pointer-events:none}.f-item:hover .icon-box{background:#ffffff40;transform:rotate(5deg) scale(1.1);box-shadow:0 8px 16px #0003}.f-item:hover .icon-box:before{animation:shimmer 1s linear;opacity:1}.hero-right{flex:.8;height:100%;display:flex;align-items:center;justify-content:center;background:#ffffff0d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-left:1px solid rgba(255,255,255,.1);animation:slideInRight 1s ease-out .6s backwards}.login-card{width:360px;background:#fffffff2;border-radius:28px;padding:40px 32px;box-shadow:0 20px 40px #0000001a;transform:translateY(0);transition:all .3s cubic-bezier(.4,0,.2,1);animation:scaleIn .8s ease-out .8s backwards;position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(37,99,235,.1),transparent);transform:rotate(45deg);transition:all .5s;opacity:0;pointer-events:none}.login-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 60px #004e9233}.login-card:hover:before{animation:shimmer 1.5s linear;opacity:1}.login-header{margin-bottom:30px;text-align:center;animation:fadeInUp .6s ease-out 1s backwards}.login-header h3{font-size:1.4rem;color:#0f172a;margin-bottom:8px;animation:slideUp .5s ease-out 1.2s backwards}.login-header p{font-size:.9rem;color:#64748b;animation:fadeInUp .5s ease-out 1.3s backwards}.input-group{margin-bottom:20px;position:relative;animation:fadeInUp .5s ease-out backwards}.login-card>.input-field{margin-bottom:20px;animation:fadeInUp .5s ease-out backwards;animation-delay:1.4s}.input-group{animation-delay:1.5s}.input-field{width:100%;height:50px;padding:0 16px;border:2px solid #cbd5e1;border-radius:14px;font-size:.95rem;outline:none;background:#f8fafc;transition:all .3s cubic-bezier(.4,0,.2,1);color:#334155}.input-field:focus{background:#fff;border-color:var(--accent-color);box-shadow:0 0 0 4px #2563eb1a;transform:translateY(-2px);animation:glow 2s ease-in-out infinite}.verify-row{display:flex;gap:10px;align-items:stretch}.btn-code{height:50px;padding:0 20px;border:2px solid var(--accent-color);background:transparent;color:var(--accent-color);border-radius:14px;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1}.btn-code:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#2563eb1a;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.btn-code:hover:not(:disabled){background:#eff6ff;transform:translateY(-2px);box-shadow:0 4px 12px #2563eb33}.btn-code:hover:not(:disabled):before{width:300px;height:300px}.btn-code:active:not(:disabled){transform:translateY(0)}.btn-code:disabled{border-color:#e2e8f0;color:#94a3b8;cursor:not-allowed;background:#f8fafc}.btn-submit{width:100%;height:52px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:10px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;animation:fadeInUp .5s ease-out 1.6s backwards;box-shadow:0 4px 14px #0f172a4d}.btn-submit:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.btn-submit:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 24px #0f172a4d}.btn-submit:hover:not(:disabled):before{width:400px;height:400px}.btn-submit:active:not(:disabled){transform:translateY(-1px)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.btn-submit.loading{pointer-events:none;opacity:.9;animation:pulse 1.5s ease-in-out infinite}.btn-submit.loading:after{content:"登录中..."}.btn-submit.loading span{display:none}.agreement{margin-top:20px;font-size:.75rem;color:#94a3b8;text-align:center;line-height:1.5}.agreement a{color:#64748b;text-decoration:underline;transition:color .2s}.agreement a:hover{color:var(--accent-color)}.footer-fixed{position:absolute;bottom:20px;width:100%;text-align:center;font-size:.8rem;color:#94a3b8;animation:fadeInUp 1s ease-out 1.8s backwards;transition:opacity .3s;display:flex;flex-direction:column;gap:8px}.icp-link a{color:#94a3b8;text-decoration:none;transition:color .2s}.icp-link a:hover{color:var(--accent-color);text-decoration:underline}.footer-fixed:hover{opacity:.7}@media(max-width:1024px){.login-container{height:auto;overflow-y:auto}.main-container{padding:20px}.hero-wrapper{flex-direction:column;height:auto;padding-bottom:40px}.hero-left{padding:40px;text-align:center}.hero-left h1{font-size:2.5rem}.hero-left p{font-size:.9rem}.feature-icons{justify-content:center}.hero-right{border-left:none;width:100%;padding:0 20px}.login-card{width:100%}.footer-fixed{position:relative;margin-top:40px}.sound-wave,.circle-big{display:none}}@media(max-width:600px){.navbar{padding:0 20px}.main-container{padding:20px}.hero-left{padding:1.5rem}.hero-left h1{font-size:2rem}.hero-right{padding:0}.login-card{padding:1.5rem}.verify-row{flex-direction:column;gap:.75rem}.btn-code{width:100%}.feature-icons{gap:1rem}}@media(max-width:400px){.hero-left{display:none}.hero-wrapper{border-radius:20px}.login-card{padding:1.25rem}}.user-page{background-color:#f1f5f9;color:#0f172a;height:100vh;display:flex;flex-direction:column;overflow:hidden;animation:fadeIn .6s ease-out}:root{--primary: #6366f1;--primary-light: #eef2ff;--primary-hover: #4f46e5;--primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--bg-body: #f1f5f9;--bg-card: #ffffff;--bg-panel: #ffffff;--text-main: #0f172a;--text-sub: #64748b;--border: #e2e8f0;--danger: #ef4444;--success: #10b981;--warning-bg: #fffbeb;--warning-text: #b45309;--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .08);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .08);--radius: 16px;--radius-lg: 24px;--radius-sm: 8px;--slider-color: #6366f1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes wave{0%,to{transform:scaleY(1)}50%{transform:scaleY(2)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typewriter{0%{width:0}to{width:100%}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes rotateSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.timeline-container{position:relative;padding-left:20px}.timeline-container:before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#e2e8f0}.timeline-item{position:relative;margin-bottom:24px}.timeline-dot{position:absolute;left:-20px;top:20px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--primary);z-index:1}.timeline-item-meta{font-size:.8rem;color:var(--text-sub);margin-bottom:4px}.timeline-item-text{margin-bottom:8px;font-weight:500;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.timeline-item-credits{font-size:.8rem;margin-bottom:8px}.timeline-item-credits .credits-cost{font-weight:600;color:var(--danger)}.timeline-item-actions{display:flex;align-items:center;gap:8px}.history-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:10px;cursor:pointer;transition:color .2s,background .2s,transform .15s,box-shadow .2s}.history-icon-btn:hover:not(:disabled){transform:scale(1.05)}.history-icon-btn:active:not(:disabled){transform:scale(.98)}.history-icon-btn:disabled{opacity:.6;cursor:wait}.history-icon-btn--play{color:#059669;background:#0596691f}.history-icon-btn--play:hover:not(:disabled){color:#047857;background:#05966933;box-shadow:0 2px 8px #05966940}.history-icon-btn--play.is-playing,.history-icon-btn--play:focus-visible{color:#047857;background:#05966938}.history-icon-btn--download{color:var(--primary);background:#6366f11f}.history-icon-btn--download:hover:not(:disabled){color:#4f46e5;background:#6366f138;box-shadow:0 2px 8px #6366f14d}.history-icon-btn--download:focus-visible{background:#6366f133}.timeline-empty{text-align:center;color:var(--text-sub);margin-top:40px}.upload-area{border:1px dashed var(--border);border-radius:8px;padding:30px;text-align:center;background:#f8fafc;cursor:pointer;transition:all .2s;margin-bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(99,102,241,.1),transparent);transform:rotate(45deg);transition:all .5s;opacity:0;pointer-events:none}.upload-area:hover:before{animation:shimmer 1s linear;opacity:1}.upload-area:hover{border-color:var(--primary);background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.upload-area--drag-over{border-color:var(--primary);background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.upload-icon{width:48px;height:48px;color:var(--primary);opacity:.8}.emotion-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:0}.emotion-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;font-size:.9rem;color:var(--text-sub);cursor:pointer;border-radius:10px 10px 0 0;border:1px solid transparent;border-bottom:none;margin-bottom:-1px;background:transparent;transition:color .2s,background .2s,border-color .2s}.emotion-tab:hover{color:var(--text-main);background:#6366f10a}.emotion-tab.active{color:var(--primary);font-weight:600;background:#fff;border-color:var(--border);box-shadow:0 -1px #fff}.emotion-panel-shell{padding:20px 0 0;position:relative}.emotion-panel-shell>*{display:flex;flex-direction:column;gap:14px}.emotion-panel{padding:16px;border-radius:12px;background:#fafbfc;border:1px solid var(--border);box-sizing:border-box}.emotion-panel--centered{justify-content:center;align-items:center;text-align:center}.smart-emotion-box{border:1px solid var(--border);border-radius:12px;padding:28px 24px;text-align:center;background:#fff;color:var(--text-sub);font-size:.9rem;line-height:1.5}.smart-emotion-title{color:var(--text-main);font-weight:600;font-size:1rem;margin-bottom:6px;display:block}.emo-ref-wrap{display:flex;flex-direction:column;gap:14px}.emo-ref-upload{cursor:pointer}.emo-ref-upload.upload-area{margin-bottom:0;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px}.emo-ref-upload--has-file{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;min-height:80px}.emo-ref-ready{width:100%;text-align:center;padding:4px 0}.emo-ref-ready-title{color:var(--primary);font-weight:600;font-size:.95rem;margin-bottom:6px}.emo-ref-ready-name{color:var(--text-main);font-size:.9rem;font-weight:500;margin-bottom:10px;word-break:break-all;display:block}.emo-ref-ready-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.emo-weight-row{margin-top:4px;padding-top:14px;border-top:1px solid var(--border)}.emo-weight-label{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--text-main);min-width:100px}.emo-weight-icon{width:22px;height:22px;color:var(--primary);flex-shrink:0}.emo-weight-value{min-width:44px;text-align:center;font-size:1rem;font-weight:700;color:var(--primary);background:var(--primary-light);padding:8px 12px;border-radius:10px}.emo-reset-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:.9rem;font-weight:500;color:var(--primary);background:var(--primary-light);border:1px solid rgba(99,102,241,.25);border-radius:10px;cursor:pointer;transition:background .2s,border-color .2s}.emo-reset-btn:hover{background:#6366f12e;border-color:var(--primary)}.emo-reset-btn svg{width:18px;height:18px;flex-shrink:0}.emo-vector-wrap{display:flex;flex-direction:column;gap:14px}.emo-vector-intro{color:var(--text-sub);font-size:.85rem;line-height:1.4;text-align:center}.emotion-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0px;margin-bottom:0}@media(max-width:1200px){.emotion-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:768px){.emotion-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:480px){.emotion-grid{grid-template-columns:repeat(2,1fr)}}.emotion-slider-item{background:#f8fafc;border:1px solid transparent;border-radius:12px;padding:16px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;height:260px;transition:all .3s;overflow:visible}.emotion-slider-item:hover{background:#fff;border-color:var(--primary-light);box-shadow:0 1px 3px #00000014;transform:translateY(-2px)}.es-val{font-family:monospace;font-size:.75rem;color:var(--primary);background:transparent;padding:0;border:none;font-weight:600;min-width:32px;text-align:center}.slider-vertical-wrapper{width:20px;height:140px;display:flex;align-items:center;justify-content:center;margin:10px 0;position:relative;overflow:visible}.emotion-slider-item .slider-container{width:140px!important;height:8px!important;transform:rotate(-90deg)!important;transform-origin:center!important;margin:0!important;position:absolute!important}.emotion-slider-item .slider-container:before{content:""!important;position:absolute!important;top:0!important;left:0!important;width:100%!important;height:8px!important;background:#f1f5f9!important;border-radius:10px!important;box-shadow:inset 0 1px 2px #00000014!important;z-index:0!important}.emotion-slider-item .slider-progress{position:absolute!important;top:0!important;left:0!important;height:8px!important;background:linear-gradient(90deg,#6366f1,#8b5cf6)!important;border-radius:10px!important;pointer-events:none!important;z-index:1!important;transition:width .1s linear!important;box-shadow:0 1px 4px #6366f166!important}.emotion-slider-item input[type=range]{-webkit-appearance:none!important;appearance:none!important;width:140px!important;height:8px!important;background:transparent!important;position:absolute!important;top:0!important;left:0!important;margin:0!important;cursor:pointer!important;outline:none!important;z-index:2!important}.emotion-slider-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:20px!important;height:20px!important;border-radius:50%!important;background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;border:3px solid #fff!important;box-shadow:0 2px 8px #6366f166,0 0 0 3px #6366f11a!important;cursor:grab!important;margin-top:-7px!important;position:relative!important;box-sizing:border-box!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.emotion-slider-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)!important;box-shadow:0 4px 12px #6366f180,0 0 0 4px #6366f126!important}.emotion-slider-item input[type=range]::-webkit-slider-thumb:active{cursor:grabbing!important;transform:scale(1.15)!important}.emotion-slider-item input[type=range]::-moz-range-thumb{width:20px!important;height:20px!important;border-radius:50%!important;background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;border:3px solid #fff!important;box-shadow:0 2px 8px #6366f166,0 0 0 3px #6366f11a!important;cursor:grab!important;box-sizing:border-box!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.emotion-slider-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)!important;box-shadow:0 4px 12px #6366f180,0 0 0 4px #6366f126!important}.emotion-slider-item input[type=range]::-moz-range-thumb:active{cursor:grabbing!important;transform:scale(1.15)!important}.emotion-slider-item input[type=range]::-webkit-slider-runnable-track{width:100%!important;height:8px!important;background:transparent!important;cursor:pointer!important}.emotion-slider-item input[type=range]::-moz-range-track{width:100%!important;height:8px!important;background:transparent!important;cursor:pointer!important}.es-label{font-weight:600;font-size:.85rem;color:var(--text-main);text-align:center;margin:0}.emotion-slider-item input[type=range]:focus-visible{outline:none!important}.emotion-slider-item input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #6366f14d!important}.emotion-slider-item input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #6366f14d!important}.emo-reset-btn{background:#fff;border-radius:6px;padding:4px 6px;color:var(--text-sub);border:1px solid var(--border);transition:color .2s,border-color .2s;font-size:.7rem}.emo-reset-btn:hover{color:var(--primary);border-color:var(--primary)}.emo-reset-btn svg{width:12px;height:12px;flex-shrink:0}.reset-btn:hover{color:var(--primary);border-color:var(--primary)}.emotion-panel-shell input[type=range]:focus-visible{outline:none;box-shadow:0 0 0 3px #6366f133}.emo-vector-footer{display:flex;flex-direction:column;gap:10px;margin-top:4px}.emo-text-wrap{position:relative}.emo-text-wrap .main-textarea{min-height:80px;padding:15px;border-radius:10px;border:1px solid var(--border);resize:vertical}.emo-text-wrap .composer-bar{position:absolute;bottom:-1px;right:8px;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:4px 8px;background:#fff0;border-radius:4px;pointer-events:none}.emo-vector-wrap .emo-vector-footer .divider{margin:2px 0 0}.divider{height:1px;background:var(--border);margin:6px 0 0}.bp-item--compact{display:grid;grid-template-columns:minmax(80px,auto) 1fr 48px auto;align-items:center;gap:12px}.bp-right{margin-left:auto;display:flex;align-items:center;gap:8px}.bp-val-display--muted{background:#6366f10a;color:var(--text-sub);padding:6px 8px;border-radius:8px;font-weight:700}.slider-container--soft .slider--soft::-webkit-slider-thumb{width:14px;height:14px;margin-top:-3px;border-radius:50%;border:2px solid rgba(99,102,241,.12);box-shadow:0 8px 18px #6366f114;z-index:3}.slider-container--soft .slider-progress{height:8px;border-radius:6px;background:var(--primary-light);pointer-events:none}.top-tabs{display:flex;background:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:0 16px;border-bottom:1px solid var(--border)}.top-tab{flex:1;text-align:center;padding:16px;font-weight:600;color:var(--text-sub);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.top-tab.active{color:var(--primary);border-bottom-color:var(--primary)}:root{--bg-body: #f1f5f9;--bg-card: #ffffff;--bg-panel: #ffffff;--panel-bg: #f8fafc;--text-main: #0f172a;--text-sub: #64748b;--border: #e2e8f0;--danger: #ef4444;--success: #10b981;--warning-bg: #fffbeb;--warning-text: #b45309;--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .08);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .08);--radius: 16px;--radius-lg: 24px;--radius-sm: 8px;--slider-color: #6366f1}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}body{background-color:var(--bg-body);color:var(--text-main);height:100vh;display:flex;flex-direction:column;overflow:hidden;letter-spacing:-.01em}.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.icon-sm{width:16px;height:16px}.icon-lg{width:28px;height:28px;stroke-width:1.2}.hidden{display:none!important}.fade-in{animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes glow{0%,to{box-shadow:0 0 5px #6366f14d}50%{box-shadow:0 0 20px #6366f199}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}body{animation:fadeIn .6s ease-out}.control-card{animation:slideInRight .5s ease-out backwards}.control-card:nth-child(1){animation-delay:.1s}.control-card:nth-child(2){animation-delay:.2s}.control-card:nth-child(3){animation-delay:.3s}.control-card:nth-child(4){animation-delay:.4s}.panel{animation:slideInLeft .5s ease-out}.panel:last-child{animation:slideInRight .5s ease-out}.voice-card{animation:scaleIn .3s ease-out backwards}.voice-card:nth-child(1){animation-delay:.1s}.voice-card:nth-child(2){animation-delay:.15s}.voice-card:nth-child(3){animation-delay:.2s}.btn-primary:active{animation:scaleIn .2s ease-out}.main-textarea:focus{animation:glow 2s ease-in-out infinite}.tab-btn{position:relative;overflow:hidden}.tab-btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#6366f11a;transform:translate(-50%,-50%);transition:width .6s,height .6s}.tab-btn:active:after{width:300px;height:300px}.slider-progress{transition:width .1s linear}.feed-item{animation:slideInRight .4s ease-out backwards}.feed-item:nth-child(1){animation-delay:.05s}.feed-item:nth-child(2){animation-delay:.1s}.feed-item:nth-child(3){animation-delay:.15s}.preset-badge,.clone-badge{animation:scaleIn .3s ease-out}.voice-card:hover .icon{animation:bounce .6s ease-in-out}.btn-primary.loading{position:relative;overflow:hidden}.btn-primary.loading:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff3;animation:shimmer 1.5s infinite}.voice-card.active{animation:scaleIn .3s ease-out}.upload-compact-label{position:relative;overflow:hidden}.upload-compact-label:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:#6366f114;transform:rotate(45deg);transition:all .5s;opacity:0}.upload-compact-label:hover:before{animation:shimmer 1s linear;opacity:1}.bp-val-display,.es-val{transition:all .3s}.bp-val-display:active,.es-val:active{animation:bounce .3s ease-out}.slider-progress{transition:width .2s cubic-bezier(.4,0,.2,1)}.result-card{animation:slideInRight .5s ease-out}.modal-box{animation:scaleIn .3s cubic-bezier(.4,0,.2,1)}.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:120;background:#06125061;-webkit-tap-highlight-color:transparent}.modal-card{width:420px;max-width:calc(100% - 48px);background:#fff;border-radius:14px;padding:20px;box-shadow:0 18px 40px #0612502e;color:var(--text-main);border:1px solid rgba(99,102,241,.08)}.modal-card--blue .modal-card__title{color:#0f172a;font-size:1.05rem;margin:0 0 8px;font-weight:700}.modal-card__desc{color:var(--text-sub);margin-bottom:16px;font-size:.92rem}.modal-card__row{display:flex;gap:12px;align-items:center}.modal-input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(15,23,42,.08);background:#fff;color:var(--text-main);box-shadow:inset 0 1px #0f172a05}.modal-card__actions{margin-top:14px;display:flex;justify-content:flex-end;gap:10px}.btn{cursor:pointer;border-radius:10px;padding:8px 12px;font-weight:600;border:0;display:inline-flex;align-items:center;gap:8px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px #6366f12e;border:1px solid rgba(99,102,241,.12)}.btn-cancel{background:#fff;color:var(--text-sub);border:1px solid rgba(15,23,42,.06)}.btn-danger{background:#fff;color:var(--danger);border:1px solid rgba(239,68,68,.08)}.modal-btn{padding:10px 14px;border-radius:10px}.modal-overlay .modal-card{max-width:520px}.toast{animation:slideInRight .3s ease-out,fadeIn .3s ease-out}.es-reset{transition:transform .3s cubic-bezier(.4,0,.2,1)}.es-reset:active{animation:spin .5s ease-out}.char-count{transition:all .3s}.char-count:active{animation:bounce .3s ease-out}.tab-btn.active{animation:scaleIn .2s ease-out}.card-body>div{animation:fadeIn .3s ease-out}.action-icon:active{animation:bounce .3s ease-out}header{background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:none;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:50;box-shadow:var(--shadow-sm)}.logo{display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:700;color:var(--text-main);letter-spacing:-.02em;cursor:pointer;transition:transform .2s}.logo-badge{font-size:.75rem;background:var(--primary-light);color:var(--primary);padding:2px 6px;border-radius:6px;font-weight:600;margin-left:8px}.user-profile{display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s;padding:8px 12px;border-radius:10px}.user-profile:hover{background:var(--bg-body);transform:translateY(-1px)}.credits-pill{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;cursor:pointer}.credits-val{font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:4px}.credits-val span{color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:6px;font-weight:700}.credits-exp{font-size:.7rem;color:var(--text-sub)}.avatar{width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px #0000001a,0 0 0 2px var(--primary-light);object-fit:cover;transition:all .2s}.user-profile:hover .avatar{box-shadow:0 4px 12px #6366f14d,0 0 0 2px var(--primary)}margin-left: 8px; } .logo:hover{transform:scale(1.02)}.logo svg{color:var(--primary);filter:drop-shadow(0 2px 4px rgba(99,102,241,.2));transition:transform .3s}.logo:hover svg{transform:rotate(5deg)}.user-profile{display:flex;align-items:center;gap:18px;transition:all .2s;padding:6px 8px;border-radius:10px}.user-credits{display:flex;align-items:center}.credits-pill{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .18s,transform .12s}.credits-pill:focus,.credits-pill:hover{background:#6366f10f;transform:translateY(-1px)}.credits-val{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:6px}.credits-val span{color:#2750d6;background:#6366f114;padding:2px 8px;border-radius:8px;font-weight:800}.credits-exp{font-size:.72rem;color:var(--text-sub)}.user-sep{width:1px;height:32px;background:#0f172a0a;border-radius:2px;margin:0 6px}.user-avatar-wrapper{display:flex;align-items:center;padding:4px;border-radius:999px}.avatar{width:44px;height:44px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px #00000014;object-fit:cover;transition:transform .15s,box-shadow .18s;cursor:pointer}.avatar:focus,.avatar:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px #2750d62e,0 0 0 3px #6366f11f}.workspace{flex:1;display:grid;grid-template-columns:280px 1fr 300px;height:calc(100vh - 64px);overflow:hidden}.panel{display:flex;flex-direction:column;height:100%;min-height:0;border-right:none;background:#fff;box-shadow:1px 0 0 0 var(--border)}.panel:last-child{border-right:none}.panel-header{padding:16px 20px;border-bottom:1px solid var(--border);font-size:.95rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;color:var(--text-main);background:linear-gradient(to right,#fff,#fafbfc);position:relative;flex-shrink:0}.panel-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--primary),transparent);opacity:.3}.filter-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1px solid var(--border);border-radius:6px;font-size:.8rem;color:var(--text-sub);cursor:pointer;transition:all .2s}.filter-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}.panel-header--with-filter{padding-right:12px}.stage-scroll{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}.stage-scroll::-webkit-scrollbar{width:8px}.stage-scroll::-webkit-scrollbar-track{background:#e2e8f0;border-radius:4px}.stage-scroll::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px}.stage-scroll::-webkit-scrollbar-thumb:hover{background:#64748b}.filter-wrap{position:relative;display:flex;align-items:center}.filter-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1px solid var(--border);border-radius:10px;font-size:.85rem;font-weight:500;color:var(--text-sub);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000000a}.filter-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);box-shadow:0 2px 8px #6366f126;transform:translateY(-1px)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px #6366f14d}.filter-btn.active svg{color:#fff}.filter-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 40px #0000001f;padding:12px;z-index:100;animation:scaleIn .2s ease-out}.filter-dropdown:before{content:"";position:absolute;top:-6px;right:16px;width:12px;height:12px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}.filter-dropdown-section{margin-bottom:12px}.filter-dropdown-section:last-child{margin-bottom:0}.filter-dropdown-label{display:block;font-size:.75rem;font-weight:600;color:var(--text-sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.filter-dropdown-options{display:flex;flex-wrap:wrap;gap:6px}.filter-opt{padding:6px 12px;font-size:.8rem;font-weight:500;color:var(--text-sub);background:#f8fafc;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}.filter-opt:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}.filter-opt.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px #6366f14d}.panel-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--border)}.voice-list-container{flex:1!important;overflow-y:auto!important;padding:16px;min-height:0!important}.voice-list-container::-webkit-scrollbar{width:6px}.voice-list-container::-webkit-scrollbar-track{background:transparent}.voice-list-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.voice-list-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.voice-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid transparent;margin-bottom:8px;position:relative;overflow:hidden}.voice-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.voice-card:hover:before{left:100%}.voice-card:hover{background:var(--bg-body);border-color:var(--border);transform:translate(4px);box-shadow:var(--shadow-sm)}.voice-card.active{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-color:var(--primary);box-shadow:0 2px 8px #6366f133}.voice-card:active{transform:translate(2px) scale(.98)}.voice-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden;transition:all .3s;box-shadow:0 2px 4px #0000001a}.voice-card:hover .voice-icon{transform:scale(1.1);box-shadow:0 4px 8px #00000026}.voice-card.active .voice-icon{box-shadow:0 4px 12px #6366f14d}.voice-play-overlay{position:absolute;inset:0;background:#ffffff40;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s;color:#fff;border-radius:inherit}.voice-card:hover .voice-play-overlay,.voice-card:hover .voice-play-overlay .play-icon{opacity:1}.voice-card.playing .voice-play-overlay{opacity:1;background:#6366f166}.voice-play-overlay .play-icon,.voice-play-overlay .pause-icon{position:absolute;transition:opacity .2s}.voice-play-overlay .play-icon,.voice-play-overlay .pause-icon{opacity:0}.voice-card.playing .voice-play-overlay .pause-icon{opacity:1}.voice-card.playing .voice-play-overlay .play-icon{opacity:0}.voice-card.playing:hover .voice-play-overlay .pause-icon{opacity:1}.voice-card.playing:hover .voice-play-overlay .play-icon{opacity:0}.voice-play-overlay .icon.pause-icon,.voice-play-overlay .icon.play-icon{fill:#fff!important;stroke:none!important}.voice-card.playing .voice-icon{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 4px 12px #6366f14d}50%{transform:scale(1.08);box-shadow:0 6px 20px #6366f180}}.voice-play-overlay:active svg{transform:scale(.95)}.v-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.v-pink{background:linear-gradient(135deg,#ec4899,#db2777);color:#fff}.v-orange{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff}.v-purple{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff}.voice-info{flex:1;min-width:0;max-height:80px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;justify-content:center;padding-right:4px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.voice-info::-webkit-scrollbar{width:4px}.voice-info::-webkit-scrollbar-track{background:transparent}.voice-info::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.voice-info::-webkit-scrollbar-thumb:hover{background:#94a3b8}.voice-card.active .voice-info::-webkit-scrollbar-thumb{background:var(--primary)}.voice-card.active .voice-info::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}.voice-name{font-size:.9rem;font-weight:500;color:var(--text-main);margin-bottom:4px;line-height:1.4;word-wrap:break-word;word-break:break-word}.voice-tag{font-size:.75rem;color:var(--text-sub);display:inline-flex;align-items:center;gap:4px;line-height:1.4;word-wrap:break-word;word-break:break-word}.btn-primary,.generate-btn,.filter-btn,.filter-opt,.emotion-tab{transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary:hover,.generate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px #6366f140}.btn-primary:active,.generate-btn:active{transform:translateY(0) scale(.98);box-shadow:0 4px 8px #6366f133}.main-textarea,.modal-input,.param-value,.emo-text-input{transition:all .3s cubic-bezier(.4,0,.2,1)}.main-textarea:focus,.modal-input:focus,.param-value:focus,.emo-text-input:focus{transform:translateY(-1px)}.upload-area{transition:all .3s cubic-bezier(.4,0,.2,1)}.upload-area:hover{transform:scale(1.01)}.filter-btn:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--x, 50%) var(--y, 50%),rgba(99,102,241,.2),transparent 60%);opacity:0;transition:opacity .3s}.filter-btn:hover:after{opacity:1}.icon{transition:transform .3s cubic-bezier(.4,0,.2,1)}.user-avatar-wrapper:hover .avatar,.action-icon:hover,.emo-play-btn:hover{transform:scale(1.05)}.theme-toggle:hover{background:var(--bg-hover);color:var(--primary);transform:rotate(15deg)}.credits-pill{transition:all .3s cubic-bezier(.4,0,.2,1)}.credits-pill:hover{transform:scale(1.02);box-shadow:0 4px 12px #6366f133}.history-item,.generated-audio-item{transition:all .3s cubic-bezier(.4,0,.2,1)}.history-item:hover,.generated-audio-item:hover{transform:translate(4px)}.emo-ref-file{transition:all .3s cubic-bezier(.4,0,.2,1)}.emo-ref-file:hover{transform:scale(1.01);border-color:var(--primary)}input[type=range]::-webkit-slider-thumb{transition:all .2s cubic-bezier(.4,0,.2,1)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{transition:all .2s cubic-bezier(.4,0,.2,1)}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.top-tab{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.top-tab:before{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--primary);transition:all .3s cubic-bezier(.4,0,.2,1);transform:translate(-50%)}.top-tab:hover:before,.top-tab.active:before{width:100%}.mobile-menu-btn{transition:all .3s cubic-bezier(.4,0,.2,1)}.mobile-menu-btn:hover{transform:scale(1.1)}.mobile-menu-btn:active{transform:scale(.95)}.logo{transition:all .3s cubic-bezier(.4,0,.2,1)}.logo:hover{transform:scale(1.02)}.logo:hover .icon-lg{transform:rotate(5deg)}@media(max-width:768px){.panel{transition:transform .3s cubic-bezier(.4,0,.2,1)}.panel.mobile-sidebar-open{transform:translate(0)}}.voice-list-container,.stage-scroll,.timeline-container{scroll-behavior:smooth}.loading-shimmer{position:relative;overflow:hidden}.loading-shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 1.5s infinite}.stage-container{padding:24px 24px 120px;display:flex;flex-direction:column;gap:16px;max-width:900px;margin:0 auto;width:100%;flex:1 1 0%;min-height:0;overflow-y:auto;overflow-x:hidden}.composer-bar{position:absolute;bottom:4px;right:8px;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:5px 8px;background:#fff0;border-radius:4px;pointer-events:none}.composer-count{color:var(--text-sub);font-size:.75rem}.composer-actions{display:flex;justify-content:center;padding:16px 0 24px}.generate-btn{flex:1;height:48px;background:var(--primary-gradient);color:#fff;border:none;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.generate-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.generate-btn:hover:before{width:300px;height:300px}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #6366f180}.generate-btn:active:not(:disabled){transform:translateY(0)}.generate-btn:disabled{background:#cbd5e1;cursor:not-allowed;transform:none;box-shadow:none}.generate-btn.loading{position:relative;overflow:hidden}.generate-btn.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.control-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:none;overflow:hidden;margin-bottom:4px;flex-shrink:0;transition:all .3s cubic-bezier(.4,0,.2,1)}.control-card:hover{box-shadow:var(--shadow-lg)}.card-tabs{display:flex;border-bottom:1px solid var(--border);background:#f8fafc;position:relative}.card-body{padding:10px;min-height:0}.control-card--composer{min-height:auto}.card-body--composer{padding:0}.composer-inner{position:relative;display:flex;flex-direction:column;min-height:auto}.composer-inner .main-textarea{flex:1;min-height:100px;padding:15px;border:none;border-radius:0;resize:vertical}.submit-msg-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#06125061;z-index:100}.submit-msg-box{min-width:320px;max-width:420px;padding:24px;border-radius:14px;box-shadow:0 18px 40px #0612502e;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}.submit-msg-box__text{margin:0;font-size:1rem;font-weight:500;line-height:1.5}.submit-msg-audio-wrap{margin-top:16px;width:100%}.submit-msg-credits{font-size:.9rem;color:var(--text-sub);margin-bottom:8px}.submit-msg-credits span{font-weight:600;color:var(--primary)}.submit-msg-audio{width:100%;height:40px}.custom-audio-player audio{display:none!important}.custom-audio-player{display:flex;align-items:center;gap:12px;width:100%}.custom-audio-play-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:var(--primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.custom-audio-play-btn:hover:not(:disabled){background:var(--primary-hover)}.custom-audio-play-btn:disabled{opacity:.6;cursor:not-allowed}.custom-audio-play-btn .spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.custom-audio-progress-wrap{flex:1;height:16px;border-radius:8px;position:relative;background:var(--border);display:flex;align-items:center}.custom-audio-progress{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;background:transparent;position:relative;z-index:2}.custom-audio-progress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:transform .1s}.custom-audio-progress::-webkit-slider-thumb:hover{transform:scale(1.15)}.custom-audio-progress::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer;box-shadow:0 2px 6px #0000004d}.custom-audio-progress:disabled{cursor:not-allowed;opacity:.6}.custom-audio-time{flex-shrink:0;display:flex;align-items:center;gap:4px;font-size:.85rem;color:var(--text-sub);font-variant-numeric:tabular-nums;min-width:80px;justify-content:flex-end}.custom-audio-time-current{color:var(--text-main);font-weight:500}.custom-audio-time-separator,.custom-audio-time-total{color:var(--text-sub)}.submit-msg-box__btn{padding:10px 32px;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;border:none;min-width:100px}.submit-msg-box--success{background:#fff;color:var(--text-main);border:1px solid rgba(99,102,241,.35)}.submit-msg-box--success .submit-msg-box__text{color:var(--primary)}.submit-msg-box--success .submit-msg-box__btn{background:var(--primary);color:#fff}.submit-msg-box--success .submit-msg-box__btn:hover{background:var(--primary-hover)}.submit-msg-box--error{background:#fff;color:#0f172a;border:1px solid #fecaca}.submit-msg-box--error .submit-msg-box__text{color:#dc2626}.submit-msg-box--error .submit-msg-box__btn{background:#dc2626;color:#fff}.submit-msg-box--error .submit-msg-box__btn:hover{background:#b91c1c}.card-header-text{font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--text-main);display:flex;align-items:center;gap:8px}.main-textarea{width:100%;padding:16px;border-radius:var(--radius);border:1px solid var(--border);background:#f8fafc;font-size:1rem;line-height:1.6;resize:vertical;outline:none;box-shadow:inset 0 2px 4px #00000005;transition:all .3s cubic-bezier(.4,0,.2,1);display:block}.main-textarea:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-light),var(--shadow-md);transform:translateY(-1px)}.char-count{text-align:right;font-size:.8rem;color:var(--text-sub);margin-top:8px}.basic-params{display:flex;flex-direction:column;gap:16px}.bp-item{padding:16px;background:#f8fafc;border-radius:12px;border:1px solid transparent;transition:all .3s}.bp-item:hover{background:#fff;border-color:var(--primary-light);box-shadow:var(--shadow-sm)}.bp-label{font-size:.9rem;font-weight:500;color:var(--text-main)}.bp-val-display{font-size:.9rem;font-weight:600;color:var(--primary);background:var(--primary-light);padding:4px 8px;border-radius:6px;text-align:center}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;height:8px;position:relative;margin:12px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px;background:transparent;border-radius:10px}input[type=range]::-moz-range-track{width:100%;height:8px;background:transparent;border-radius:10px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);margin-top:-9px;box-shadow:0 2px 8px #6366f166,0 0 0 3px #6366f11a;transition:all .3s cubic-bezier(.4,0,.2,1);border:3px solid #fff;cursor:grab;position:relative;box-sizing:border-box}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #6366f180,0 0 0 4px #6366f126}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}input[type=range]::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 2px 8px #6366f166,0 0 0 3px #6366f11a;transition:all .3s cubic-bezier(.4,0,.2,1);border:3px solid #fff;cursor:grab;box-sizing:border-box}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #6366f180,0 0 0 4px #6366f126}.slider-container{position:relative;display:flex;align-items:center;height:24px}.slider{position:relative;z-index:3;pointer-events:auto}.slider::-webkit-slider-thumb{z-index:4;pointer-events:auto}.emo-ref-actions{position:relative;z-index:3}.slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:transparent;cursor:pointer;position:relative;margin:12px 0}.slider:focus{outline:none}.slider::-webkit-slider-runnable-track{width:100%;height:8px;background:transparent;border-radius:10px}.slider::-moz-range-track{width:100%;height:8px;background:transparent;border-radius:10px}.slider::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);margin-top:-9px;box-shadow:0 2px 8px #6366f166,0 0 0 3px #6366f11a;transition:all .3s cubic-bezier(.4,0,.2,1);border:3px solid #fff;cursor:grab;position:relative;box-sizing:border-box}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #6366f180,0 0 0 4px #6366f126}.slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.slider::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 2px 8px #6366f166,0 0 0 3px #6366f11a;transition:all .3s cubic-bezier(.4,0,.2,1);border:3px solid #fff;cursor:grab;box-sizing:border-box}.slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #6366f180,0 0 0 4px #6366f126}.slider-container{position:relative;width:100%;height:12px;margin:12px 0;display:flex;align-items:center}.slider-progress{position:absolute;top:0;left:0;height:8px;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:10px;pointer-events:none;z-index:1;transition:width .1s linear;box-shadow:0 1px 4px #6366f166}.slider-container input[type=range]{position:relative;z-index:2}.slider-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:8px;background:#e2e8f0;border-radius:10px;box-shadow:inset 0 1px 2px #00000014;z-index:0}.slider-container--emo:before{background:#f1f5f9}.bp-slider-track .slider-container:before{background:#f8fafc}.slider:hover{height:8px}.slider:hover::-webkit-slider-thumb{transform:scale(1.1)}.slider:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 0 8px var(--primary-light)}.btn-primary{width:100%;padding:16px;font-size:1rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:var(--radius);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.btn-primary.loading{cursor:wait}.feed-container{overflow-y:auto;padding:16px}.empty-feed{text-align:center;padding:40px 20px;color:var(--text-sub);font-size:.9rem}.feed-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:all .2s;border:1px solid var(--border)}.feed-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d1d5db}.feed-header{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-sub);margin-bottom:8px}.feed-voice{font-size:.8rem;font-weight:600;color:var(--primary);background:var(--primary-light);padding:3px 8px;border-radius:6px}.feed-time{font-size:.75rem;color:var(--text-sub)}.feed-text{font-size:.875rem;line-height:1.5;color:var(--text-main);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.feed-footer{display:flex;justify-content:space-between;align-items:center}.status-badge{font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:6px;text-transform:capitalize}.status-completed{background-color:#e0f2f1;color:#0d9488}.status-processing{background-color:#fef3c7;color:#d97706}.status-failed{background-color:#fee2e2;color:#dc2626}.action-icon{font-size:.8rem;color:var(--text-sub);cursor:pointer;transition:color .2s;text-decoration:none;padding:4px}.action-icon:hover{color:var(--primary)}.mobile-menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0;margin-right:8px;color:var(--text-main);transition:color .2s}.mobile-menu-btn:hover{color:var(--primary)}.mobile-menu-btn svg{width:24px;height:24px}.mobile-sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:100}.mobile-sidebar-close{display:none;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;cursor:pointer;padding:0;color:var(--text-sub);transition:color .2s,background .2s;border-radius:6px}.mobile-sidebar-close:hover{color:var(--danger);background:#ef44441a}.mobile-sidebar-close svg{width:20px;height:20px}@media(max-width:768px){.mobile-menu-btn,.mobile-sidebar-close{display:flex}header{padding:0 16px;height:56px;justify-content:flex-start}.logo{font-size:1rem}.logo-badge{font-size:.65rem;padding:2px 4px}.avatar{width:36px;height:36px;margin-left:auto}.credits-val{font-size:.8rem}.credits-exp{font-size:.65rem}.workspace{grid-template-columns:1fr;position:relative}.panel{display:none!important}.panel:first-child{display:flex!important;position:fixed;top:56px;left:-320px;width:320px;height:calc(100vh - 56px);z-index:101;background:#fff;box-shadow:2px 0 8px #0000001a;transition:left .3s ease}.panel:first-child.mobile-sidebar-open{left:0}.mobile-sidebar-overlay{display:block}.panel.panel-bg{height:calc(100vh - 56px)}.stage-container{padding:12px 16px 20px;max-width:100%}.tab-btn{padding:12px;font-size:.85rem}.upload-area{padding:20px 16px;min-height:120px}.upload-icon{width:40px;height:40px}.bp-item{padding:12px}.bp-input-group{gap:12px}.bp-label{font-size:.85rem}.main-textarea{font-size:.95rem;padding:12px}.btn-primary{padding:14px;font-size:.95rem}.composer-actions{padding:12px 0 20px;position:sticky;bottom:0;background:var(--bg-body);z-index:10}.modal-card{width:100%;max-width:calc(100% - 32px);margin:16px;padding:16px}}@media(max-width:480px){.mobile-menu-btn{width:36px;height:36px}.mobile-menu-btn svg{width:20px;height:20px}header{padding:0 12px;height:52px}.logo{font-size:.95rem;gap:8px}.logo-badge{display:none}.logo svg{width:24px;height:24px}.avatar{width:32px;height:32px}.user-credits{display:none}.panel:first-child{top:52px;left:-280px;width:280px;height:calc(100vh - 52px)}.panel.panel-bg{height:calc(100vh - 52px)}.stage-container{padding:10px 12px 16px}.tab-btn{padding:10px;font-size:.8rem}.emotion-tab{min-height:40px;padding:0 12px;font-size:.85rem}.upload-area{padding:16px 12px;min-height:100px}.upload-icon{width:36px;height:36px}.slider::-webkit-slider-thumb{width:18px;height:18px}.slider::-moz-range-thumb{width:18px;height:18px}.main-textarea{font-size:.9rem;padding:10px;min-height:120px}.btn-primary{padding:12px;font-size:.9rem}.generate-btn{padding:10px 16px;font-size:.85rem}.composer-actions{padding:10px 0 16px}.modal-card{margin:12px;padding:14px;border-radius:12px}.modal-card__title{font-size:1rem}.modal-card__desc{font-size:.85rem}.modal-input{padding:8px 10px;font-size:.9rem}.modal-btn{padding:8px 12px;font-size:.85rem}}@media(max-width:360px){header{padding:0 8px;height:48px}.logo{font-size:.85rem}.logo svg{width:20px;height:20px}.panel:first-child{top:48px;width:260px;height:calc(100vh - 48px);left:-260px}.panel.panel-bg{height:calc(100vh - 48px)}.stage-container{padding:8px 10px 14px}.card-body{padding:10px}.tab-btn{padding:8px;font-size:.75rem}.main-textarea{font-size:.85rem;padding:8px}.btn-primary{padding:10px;font-size:.85rem}}.result-card{border:none;background:var(--bg-card);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-md);margin:16px 0;animation:slideInRight .5s ease-out}.play-btn-circle{width:44px;height:44px;border-radius:50%;background:var(--primary-gradient);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;position:relative;box-shadow:0 4px 12px #6366f166}.play-btn-circle:hover{transform:scale(1.1);box-shadow:0 6px 16px #6366f180}.play-btn-circle:active{transform:scale(.95)}.visualizer{display:flex;align-items:flex-end;gap:2px;height:16px;position:absolute}.visualizer span{width:2px;height:100%;background:#fff;border-radius:1px;transform-origin:bottom;display:none}.play-btn-circle.playing .visualizer span{display:block;animation:bar-jump .6s ease-in-out infinite alternate}.visualizer span:nth-child(1){animation-delay:0s}.visualizer span:nth-child(2){animation-delay:.1s}.visualizer span:nth-child(3){animation-delay:.2s}.visualizer span:nth-child(4){animation-delay:.15s}@keyframes bar-jump{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.play-icon,.pause-icon{pointer-events:none}.result-info{flex:1;min-width:0}.result-text{font-size:.95rem;font-weight:500;color:var(--text-main);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}.result-voice{font-size:.8rem;color:var(--primary);font-weight:500}.result-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.cost-badge{font-size:.75rem;color:var(--danger);background:#ef44441a;padding:4px 8px;border-radius:6px;font-weight:600}.action-icon{width:36px;height:36px;border-radius:8px;border:none;background:#6366f11a;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;text-decoration:none}.action-icon:hover{background:#6366f133;transform:translateY(-1px)}.result-progress{display:flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer}.result-progress-track{flex:1;height:4px;background:var(--bg-hover);border-radius:2px;overflow:hidden;position:relative}.result-progress-fill{height:100%;background:var(--primary-gradient);border-radius:2px;transition:width .1s linear}.result-time{font-size:.75rem;color:var(--text-sub);font-weight:500;min-width:80px;text-align:right}html.dark-mode .result-progress-track{background:#3f3f46}@media(max-width:768px){.result-card{padding:16px;margin:12px 0}.play-btn-circle{width:40px;height:40px}.result-text{font-size:.9rem;-webkit-line-clamp:2}.action-icon{width:32px;height:32px}}html.dark-mode{--bg-body: #09090b;--bg-card: #18181b;--bg-panel: #18181b;--bg-hover: #27272a;--text-main: #f4f4f5;--text-sub: #a1a1aa;--border: #27272a;--primary-light: #312e81;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .8);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .8);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .9);--input-bg: #27272a;--gradient-text: linear-gradient(135deg, #818cf8 0%, #c084fc 100%)}html.dark-mode body{background:var(--bg-body);color:var(--text-main)}html.dark-mode header{background:#18181bcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--border)}html.dark-mode .logo span,html.dark-mode .logo-badge{color:var(--text-main)}html.dark-mode .user-credits .credits-pill{background:#6366f126;border:1px solid rgba(99,102,241,.3)}html.dark-mode .user-credits .credits-val,html.dark-mode .user-credits .credits-exp{color:var(--text-main)}html.dark-mode .user-credits .credits-val span{color:#818cf8}html.dark-mode .theme-toggle:hover{background:var(--bg-hover);color:var(--text-main)}html.dark-mode .panel{background:var(--bg-panel);border-color:var(--border)}html.dark-mode .panel-header{background:linear-gradient(to right,#18181b,#1c1c1f);border-bottom-color:var(--border)}html.dark-mode .panel-header h3{color:var(--text-main)}html.dark-mode .voice-card{background:var(--bg-hover);border-color:var(--border)}html.dark-mode .voice-card:hover{background:#2d2d30;border-color:var(--primary)}html.dark-mode .voice-card.active{background:#6366f126;border-color:var(--primary)}html.dark-mode .voice-name{color:var(--text-main)}html.dark-mode .voice-tag{color:var(--text-sub);background:#6366f11a}html.dark-mode .voice-card:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}html.dark-mode .voice-play-overlay{background:#0006}html.dark-mode .loading-shimmer:before{background:#ffffff0d}html.dark-mode .control-card{background:var(--bg-card);border-color:var(--border)}html.dark-mode .top-tab{color:var(--text-sub)}html.dark-mode .top-tab.active{color:var(--primary);background:#6366f11a}html.dark-mode .upload-area{background:var(--input-bg);border-color:var(--border)}html.dark-mode .upload-area:hover{background:#2d2d30;border-color:var(--primary)}html.dark-mode .upload-area.upload-area--drag-over{background:#6366f11a;border-color:var(--primary)}html.dark-mode .card-body>.upload-area.no-upload-animation:hover{background:var(--input-bg);border-color:var(--border)}html.dark-mode .main-textarea{background:var(--input-bg);color:var(--text-main);border-color:var(--border)}html.dark-mode .main-textarea::placeholder{color:var(--text-sub)}html.dark-mode .main-textarea:focus{background:#2d2d30;border-color:var(--primary)}html.dark-mode .text-composer__count{color:var(--text-sub)}html.dark-mode .text-composer__count.warning{color:#fbbf24}html.dark-mode .text-composer__count.error{color:#ef4444}html.dark-mode .emotion-tab{color:var(--text-sub);background:var(--input-bg);border-color:var(--border)}html.dark-mode .emotion-tab.active{color:var(--primary);background:#6366f11a;border-color:var(--primary)}html.dark-mode .emotion-tab:hover:not(.active){background:var(--bg-hover)}html.dark-mode .emo-ref-upload{background:var(--input-bg);border-color:var(--border)}html.dark-mode .emo-ref-upload:hover{background:#2d2d30;border-color:var(--primary)}html.dark-mode .emo-ref-file{background:var(--bg-hover);border-color:var(--border)}html.dark-mode .emo-file-name{color:var(--text-main)}html.dark-mode .emo-remove-btn{color:var(--text-sub)}html.dark-mode .emo-remove-btn:hover{color:#ef4444;background:#ef44441a}html.dark-mode .emo-play-btn{color:var(--primary)}html.dark-mode .emo-play-btn:hover{background:#6366f11a}html.dark-mode .emo-weight-label,html.dark-mode .emo-text-label{color:var(--text-sub)}html.dark-mode .emo-weight-value,html.dark-mode .emo-text-input{color:var(--text-main);background:var(--input-bg);border-color:var(--border)}html.dark-mode .param-row label{color:var(--text-sub)}html.dark-mode .param-value{color:var(--text-main);background:var(--input-bg);border-color:var(--border)}html.dark-mode input[type=range]{background:var(--bg-hover)}html.dark-mode input[type=range]::-webkit-slider-thumb{background:linear-gradient(135deg,var(--primary) 0%,#a78bfa 100%);box-shadow:0 2px 6px #6366f166}html.dark-mode input[type=range]::-moz-range-thumb{background:linear-gradient(135deg,var(--primary) 0%,#a78bfa 100%);box-shadow:0 2px 6px #6366f166}html.dark-mode .slider-container:before{background:#27272a;box-shadow:inset 0 1px 2px #0000004d}html.dark-mode .slider-container--emo:before{background:#27272a}html.dark-mode .bp-slider-track .slider-container:before{background:#27272a}html.dark-mode .slider-progress,html.dark-mode .slider-container--soft .slider-progress{background:#6366f14d}html.dark-mode .emotion-slider-item .slider-container:before{background:#27272a!important;box-shadow:inset 0 1px 2px #0000004d!important}html.dark-mode .emotion-slider-item .slider-progress{background:linear-gradient(90deg,#6366f1,#8b5cf6)!important}html.dark-mode .emotion-slider-item{background:var(--bg-card)!important;border-color:var(--border)}html.dark-mode .emotion-slider-item:hover{background:var(--bg-hover)!important;border-color:var(--primary)}html.dark-mode .emotion-panel{background:var(--bg-card);border-color:var(--border)}html.dark-mode .smart-emotion-box{background:var(--bg-card);border-color:var(--border);color:var(--text-sub)}html.dark-mode .smart-emotion-title{color:var(--text-main)}html.dark-mode .generate-btn{background:linear-gradient(135deg,var(--primary) 0%,#7c3aed 100%);box-shadow:0 4px 12px #6366f14d}html.dark-mode .generate-btn:hover{box-shadow:0 6px 16px #6366f166}html.dark-mode .generate-btn:active{box-shadow:0 2px 8px #6366f14d}html.dark-mode .generate-btn:disabled{background:var(--bg-hover);color:var(--text-sub);box-shadow:none}.history-count-badge{font-size:.8rem;background:#f1f5f9;padding:2px 8px;border-radius:10px;color:var(--text-sub)}html.dark-mode .history-count-badge{background:var(--bg-hover);color:var(--text-sub)}html.dark-mode .history-empty{color:var(--text-sub)}html.dark-mode .history-item{background:var(--bg-hover);border-color:var(--border)}html.dark-mode .history-item:hover{background:#2d2d30}html.dark-mode .history-item__text{color:var(--text-main)}html.dark-mode .history-item__meta{color:var(--text-sub)}html.dark-mode .history-item__voice{color:var(--primary)}html.dark-mode .history-item__actions button{color:var(--text-sub)}html.dark-mode .history-item__actions button:hover{background:#6366f11a;color:var(--primary)}html.dark-mode .history-item__actions button.history-item__delete:hover{background:#ef44441a;color:#ef4444}html.dark-mode .result-card{background:var(--bg-card);border-color:var(--border)}html.dark-mode .result-text{color:var(--text-main)}html.dark-mode .result-voice{color:var(--primary)}html.dark-mode .cost-badge{background:#ef444433;color:#f87171}html.dark-mode .action-icon{background:#6366f133;color:var(--primary)}html.dark-mode .action-icon:hover{background:#6366f14d}html.dark-mode .filter-btn{background:var(--bg-card)!important;border-color:var(--border)!important;color:var(--text-sub)!important}html.dark-mode .filter-btn:hover{background:var(--bg-hover)!important;border-color:var(--primary)!important;color:var(--primary)!important}html.dark-mode .filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}html.dark-mode .filter-btn.active svg{color:#fff}html.dark-mode .filter-dropdown:before{background:var(--bg-card)}html.dark-mode .filter-dropdown{background:var(--bg-card);border-color:var(--border);box-shadow:var(--shadow-lg)}html.dark-mode .filter-dropdown-label{color:var(--text-sub)}html.dark-mode .filter-opt{color:var(--text-sub);background:var(--input-bg);border-color:var(--border)}html.dark-mode .filter-opt:hover{background:var(--bg-hover);color:var(--text-main)}html.dark-mode .filter-opt.active{background:var(--primary);color:#fff;border-color:var(--primary)}html.dark-mode .modal-overlay{background:#000c}html.dark-mode .modal-card{background:var(--bg-card);border-color:var(--border)}html.dark-mode .modal-card__title{color:var(--text-main)}html.dark-mode .modal-card__desc{color:var(--text-sub)}html.dark-mode .modal-input{background:var(--input-bg);color:var(--text-main);border-color:var(--border)}html.dark-mode .modal-input::placeholder{color:var(--text-sub)}html.dark-mode .modal-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f133}html.dark-mode ::-webkit-scrollbar-track{background:var(--bg-panel)}html.dark-mode ::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:3px}html.dark-mode ::-webkit-scrollbar-thumb:hover{background:#52525b}html.dark-mode .voice-list-container::-webkit-scrollbar-thumb{background:#3f3f46}html.dark-mode .voice-list-container::-webkit-scrollbar-thumb:hover{background:#52525b}html.dark-mode .stage-container::-webkit-scrollbar-track{background:#1e293b}html.dark-mode .stage-container::-webkit-scrollbar-thumb{background:#3f3f46}html.dark-mode .stage-container::-webkit-scrollbar-thumb:hover{background:#52525b}html.dark-mode .history-feed::-webkit-scrollbar-thumb{background:#3f3f46}html.dark-mode .history-feed::-webkit-scrollbar-thumb:hover{background:#52525b}html.dark-mode .mobile-sidebar-overlay{background:#0009}html.dark-mode .mobile-menu-btn{color:var(--text-sub)}html.dark-mode .mobile-menu-btn:hover{background:var(--bg-hover);color:var(--text-main)}html.dark-mode .mobile-sidebar-close{color:var(--text-sub)}html.dark-mode .mobile-sidebar-close:hover{background:var(--bg-hover);color:var(--text-main)}.filter-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeInOverlay .2s ease-out forwards}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.filter-modal-box{background:#fff;border-radius:var(--radius-lg);width:600px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);transform:scale(.95);animation:scaleIn .2s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden}@keyframes scaleIn{to{transform:scale(1)}}.filter-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}.filter-modal-title{font-size:1.2rem;font-weight:700;color:var(--text-main)}.filter-modal-close{cursor:pointer;color:var(--text-sub);transition:color .2s;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px}.filter-modal-close:hover{color:var(--text-main);background:var(--bg-body)}.filter-modal-content{padding:24px;overflow-y:auto;flex:1}.filter-group{margin-bottom:24px}.filter-group:last-child{margin-bottom:0}.filter-group-title{font-size:.9rem;font-weight:600;color:var(--text-main);margin-bottom:12px}.segmented-control{display:flex;background:#f1f5f9;padding:4px;border-radius:8px;gap:4px}.seg-item{flex:1;text-align:center;padding:8px;font-size:.9rem;color:var(--text-sub);cursor:pointer;border-radius:6px;transition:all .2s;font-weight:500;white-space:nowrap}.seg-item:hover{color:var(--text-main)}.seg-item.active{background:#fff;color:var(--text-main);box-shadow:0 1px 3px #0000001a;font-weight:600}.filter-tags{display:flex;flex-wrap:wrap;gap:10px}.filter-tag{padding:8px 16px;border:1px solid var(--border);border-radius:20px;font-size:.85rem;color:var(--text-sub);cursor:pointer;transition:all .2s;background:#fff}.filter-tag:hover{border-color:var(--primary);color:var(--primary)}.filter-tag.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);font-weight:500}.filter-modal-footer{margin-top:8px;padding:20px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px;align-items:center}.btn-reset{color:var(--text-sub);font-size:.9rem;cursor:pointer;padding:8px 16px;border-radius:8px;background:transparent;border:none;transition:color .2s}.btn-reset:hover{color:var(--text-main);background:#f1f5f9}.btn-confirm{padding:10px 24px;font-size:.9rem;background:var(--primary);color:#fff;border-radius:8px;cursor:pointer;border:none;font-weight:500;transition:background .2s}.btn-confirm:hover{background:var(--primary-hover)}html.dark-mode .filter-modal-overlay{background:#000000b3}html.dark-mode .filter-modal-box{background:var(--bg-card);border-color:var(--border)}html.dark-mode .filter-modal-header{border-color:var(--border)}html.dark-mode .filter-modal-title{color:var(--text-main)}html.dark-mode .filter-modal-close{color:var(--text-sub)}html.dark-mode .filter-modal-close:hover{background:var(--bg-hover);color:var(--text-main)}html.dark-mode .filter-group-title{color:var(--text-main)}html.dark-mode .segmented-control{background:#27272a}html.dark-mode .seg-item{color:var(--text-sub)}html.dark-mode .seg-item:hover{color:var(--text-main)}html.dark-mode .seg-item.active{background:#3f3f46;color:var(--text-main)}html.dark-mode .filter-tag{background:#27272a;border-color:#3f3f46;color:var(--text-sub)}html.dark-mode .filter-tag:hover{border-color:var(--primary);color:var(--primary)}html.dark-mode .filter-tag.active{background:#3730a3;border-color:var(--primary);color:#e0e7ff}html.dark-mode .filter-modal-footer{border-color:var(--border)}html.dark-mode .btn-reset{color:var(--text-sub)}html.dark-mode .btn-reset:hover{color:var(--text-main);background:var(--bg-hover)}.panel-bg{background:var(--bg-body)}.card-tabs{display:flex;border-bottom:1px solid var(--border);background:linear-gradient(to bottom,#fafbfc,#f8fafc);position:relative}.tab-btn{flex:1;padding:14px;font-size:.9rem;color:var(--text-sub);cursor:pointer;text-align:center;border-bottom:2px solid transparent;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.tab-btn:before{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%) scaleX(0);width:60%;height:2px;background:var(--primary);transition:transform .3s}.tab-btn:hover{color:var(--text-main);background:#f1f5f9}.tab-btn.active{color:var(--primary);background:#fff}.tab-btn.active:before{transform:translate(-50%) scaleX(1)}.preset-display{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;padding:18px;border-radius:12px;transition:all .3s;box-shadow:0 2px 8px #6366f126}.preset-display:hover{box-shadow:0 4px 12px #6366f140;transform:translateY(-1px)}.preset-badge{background:#fff;color:var(--primary);font-size:.75rem;padding:2px 8px;border-radius:4px;font-weight:600;box-shadow:0 1px 2px #0000000d}.clone-display{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#faf5ff,#f3e8ff);border:1px solid #d8b4fe;padding:18px;border-radius:12px;transition:all .3s;box-shadow:0 2px 8px #9333ea26}.clone-display:hover{box-shadow:0 4px 12px #9333ea40;transform:translateY(-1px)}.clone-badge{background:#fff;color:#9333ea;font-size:.75rem;padding:2px 8px;border-radius:4px;font-weight:600;box-shadow:0 1px 2px #0000000d}.fixed-action-bar{position:relative;flex-shrink:0;padding:16px 24px;background:#fff0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;justify-content:center;z-index:100}.action-bar-inner{width:100%;max-width:900px}.action-bar{display:flex;gap:16px;align-items:center;margin-top:0}html.dark-mode .panel-bg{background:var(--bg-body)}html.dark-mode .card-tabs{background:#09090b;border-bottom-color:var(--border)}html.dark-mode .tab-btn{color:var(--text-sub)}html.dark-mode .tab-btn:hover{background:#27272a;color:var(--text-main)}html.dark-mode .tab-btn.active{background:var(--bg-card);color:var(--primary)}html.dark-mode .preset-display{background:#6366f126;border-color:var(--primary)}html.dark-mode .clone-display{background:#9333ea26;border-color:#9333ea}html.dark-mode .fixed-action-bar{background:#18181be6;border-top-color:var(--border);box-shadow:0 -4px 12px #0003}html.dark-mode .preset-badge{background:var(--bg-card);color:var(--primary)}html.dark-mode .clone-badge{background:var(--bg-card);color:#9333ea}.bp-label-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}.bp-badge{background:transparent;color:var(--text-main);padding:0;font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px}.bp-badge svg{color:var(--primary);filter:drop-shadow(0 2px 4px rgba(99,102,241,.2))}.bp-input-group{display:flex;align-items:center;gap:16px}.bp-slider-track{flex:1;position:relative}.bp-val-display{background:#fff;border:1px solid var(--border);padding:4px 12px;border-radius:8px;font-size:.9rem;font-family:monospace;min-width:54px;text-align:center;box-shadow:var(--shadow-sm);font-weight:600;color:var(--primary)}.es-reset{width:18px;height:18px;color:var(--text-sub);transition:all .2s}.es-reset:hover{color:var(--primary);transform:rotate(-90deg)}html.dark-mode .bp-badge{background:#6366f133;color:var(--primary)}html.dark-mode .bp-val-display{background:var(--bg-card);border-color:var(--border);color:var(--text-main)}html.dark-mode .bp-item{background:#27272a;border-color:#3f3f46}html.dark-mode .bp-item:hover{background:#3f3f46;border-color:var(--primary)}html.dark-mode .es-reset{color:var(--text-sub)}html.dark-mode .es-reset:hover{color:var(--primary)}.history-feed{position:relative;padding:16px;flex:1;flex-direction:column-reverse;min-height:0;overflow-y:auto;overflow-x:hidden}.history-feed::-webkit-scrollbar{width:6px}.history-feed::-webkit-scrollbar-track{background:transparent}.history-feed::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.history-feed::-webkit-scrollbar-thumb:hover{background:#94a3b8}.feed-item{position:relative;margin-bottom:24px;padding-left:20px}.feed-dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--primary);z-index:2;box-shadow:0 0 0 4px #6366f11a}.feed-line{position:absolute;left:5px;top:16px;bottom:-24px;width:2px;background:#e2e8f0}.feed-item:last-child .feed-line{display:none}.feed-card{background:#fff;border:1px solid transparent;border-radius:12px;padding:16px;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}.feed-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--primary);transform:scaleY(0);transition:transform .3s}.feed-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translate(4px);background:linear-gradient(to right,#eef2ff,#fff)}.feed-card:hover:before{transform:scaleY(1)}.feed-card:active{animation:scaleIn .2s ease-out}.feed-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.75rem;color:var(--text-sub)}.feed-text{font-size:.85rem;color:var(--text-main);line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-actions-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.feed-player{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.feed-play-btn{width:36px;height:36px;border-radius:50%;background:var(--primary-gradient);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0;box-shadow:0 2px 8px #6366f14d}.feed-play-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 12px #6366f166}.feed-play-btn:active:not(:disabled){transform:scale(.95)}.feed-play-btn:disabled{opacity:.6;cursor:not-allowed}.feed-progress{flex:1;display:flex;align-items:center;gap:8px;cursor:pointer}.feed-progress-track{flex:1;height:4px;background:var(--bg-hover);border-radius:2px;overflow:hidden;position:relative}.feed-progress-fill{height:100%;background:var(--primary-gradient);border-radius:2px;transition:width .1s linear}.feed-time{font-size:.75rem;color:var(--text-sub);font-weight:500;min-width:80px;text-align:right}.feed-download{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-sub);transition:all .2s ease;flex-shrink:0}.feed-download:hover{color:var(--primary);background:#6366f11a}html.dark-mode .feed-progress-track{background:#3f3f46}html.dark-mode .feed-download:hover{background:#6366f133}.feed-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.cost-badge{font-size:.75rem;color:var(--danger);font-weight:600;background:#ef44441a;padding:2px 8px;border-radius:4px}.action-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;cursor:pointer;color:var(--primary);background:#6366f11a;transition:all .2s}.action-icon:hover{background:#6366f133;transform:scale(1.05)}html.dark-mode .history-feed{background:transparent}html.dark-mode .feed-dot{background:var(--bg-card);border-color:var(--primary);box-shadow:0 0 0 4px #6366f133}html.dark-mode .feed-line{background:#3f3f46}html.dark-mode .feed-card{background:var(--bg-card);border-color:transparent;color:var(--text-main)}html.dark-mode .feed-card:hover{border-color:var(--primary);background:linear-gradient(to right,rgba(99,102,241,.15),var(--bg-card))}html.dark-mode .feed-meta{color:var(--text-sub)}html.dark-mode .feed-text{color:var(--text-main)}html.dark-mode .cost-badge{color:#ef4444;background:#ef444426}html.dark-mode .action-icon{color:var(--primary);background:#6366f126}html.dark-mode .action-icon:hover{background:#6366f140}.admin-container{display:flex;min-height:100vh;background:#f5f7fa}.admin-sidebar{width:240px;background:#fff;box-shadow:2px 0 8px #0000000d;display:flex;flex-direction:column}.admin-logo{padding:1.5rem 1rem;border-bottom:1px solid #e5e7eb}.logo-text{font-size:1.1rem;font-weight:600;color:#667eea}.admin-menu{flex:1;padding:1rem 0}.menu-item{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.5rem;cursor:pointer;transition:all .2s;color:#6b7280;font-weight:500}.menu-item:hover{background:#f9fafb;color:#1f2937}.menu-item.active{background:#eff6ff;color:#3b82f6;border-left:3px solid #3b82f6}.menu-icon{font-size:1.25rem}.admin-main{flex:1;display:flex;flex-direction:column}.admin-header{background:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000000d}.page-title{font-size:1.5rem;font-weight:600;color:#1f2937}.header-right{display:flex;align-items:center;gap:1rem}.admin-badge{background:#fef3c7;color:#d97706;padding:.375rem .875rem;border-radius:12px;font-size:.85rem;font-weight:600}.username{font-weight:500;color:#1f2937}.logout-btn{padding:.5rem 1rem;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.logout-btn:hover{background:#fecaca}.admin-content{flex:1;padding:1.5rem}.content-section{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000d}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.section-header h2{font-size:1.25rem;font-weight:600;color:#1f2937}.export-btn{padding:.5rem 1.25rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.export-btn:hover{background:#2563eb}.filter-section{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:.5rem}.filter-input{padding:.5rem .875rem;border:1px solid #e5e7eb;border-radius:8px;font-size:.9rem;min-width:120px}.date-input{min-width:150px}.filter-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.filter-separator{color:#9ca3af;font-size:.9rem}.filter-select{padding:.5rem .875rem;border:1px solid #e5e7eb;border-radius:8px;font-size:.9rem;min-width:120px;cursor:pointer;background:#fff}.filter-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-btn{padding:.5rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.search-btn:hover{background:#5568d3}.search-btn:disabled{opacity:.7;cursor:not-allowed}.invite-code-toolbar{margin-bottom:1.5rem}.table-container{overflow-x:auto;margin-bottom:1.5rem}.data-table{width:100%;border-collapse:collapse;table-layout:fixed}.data-table:not(.data-table--users) th:nth-child(1),.data-table:not(.data-table--users) td:nth-child(1),.data-table:not(.data-table--users) th:nth-child(2),.data-table:not(.data-table--users) td:nth-child(2),.data-table:not(.data-table--users) th:nth-child(3),.data-table:not(.data-table--users) td:nth-child(3),.data-table:not(.data-table--users) th:nth-child(4),.data-table:not(.data-table--users) td:nth-child(4),.data-table:not(.data-table--users) th:nth-child(5),.data-table:not(.data-table--users) td:nth-child(5),.data-table:not(.data-table--users) th:nth-child(6),.data-table:not(.data-table--users) td:nth-child(6){width:16.67%}.data-table--users th:nth-child(1),.data-table--users td:nth-child(1),.data-table--users th:nth-child(2),.data-table--users td:nth-child(2),.data-table--users th:nth-child(3),.data-table--users td:nth-child(3),.data-table--users th:nth-child(4),.data-table--users td:nth-child(4),.data-table--users th:nth-child(5),.data-table--users td:nth-child(5),.data-table--users th:nth-child(6),.data-table--users td:nth-child(6),.data-table--users th:nth-child(7),.data-table--users td:nth-child(7){width:14.29%}.invite-code-cell{font-family:ui-monospace,monospace;font-size:.9rem}.data-table th{background:#f9fafb;padding:1rem 1.125rem;text-align:left;font-weight:600;color:#6b7280;font-size:.875rem;border-bottom:1px solid #e5e7eb}.data-table td{padding:1rem 1.125rem;border-bottom:1px solid #f3f4f6;color:#1f2937;font-size:.9rem;line-height:1.5}.data-table tbody tr:hover{background:#f9fafb}.text-center{text-align:center;color:#9ca3af}.positive{color:#10b981;font-weight:600}.negative{color:#ef4444;font-weight:600}.status-badge{padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:500}.status-badge.completed{background:#d1fae5;color:#065f46}.status-badge.pending{background:#fef3c7;color:#d97706}.status-badge.failed{background:#fee2e2;color:#dc2626}.admin-user-actions{display:flex;gap:8px;flex-wrap:wrap}.action-btn{padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn--status{background:#fef3c7;color:#d97706;border-color:#fcd34d}.action-btn--status:hover:not(:disabled){background:#fde68a}.action-btn--recharge{background:#d1fae5;color:#065f46;border-color:#6ee7b7}.action-btn--recharge:hover{background:#a7f3d0}.admin-message-modal{display:flex;align-items:flex-start;gap:14px;padding:8px 0 4px}.admin-message-modal__icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;line-height:1}.admin-message-modal--success .admin-message-modal__icon{background:#d1fae5;color:#059669}.admin-message-modal--error .admin-message-modal__icon{background:#fee2e2;color:#dc2626}.admin-message-modal__text{margin:0;color:#64748b;font-size:.95rem;line-height:1.5;padding-top:6px}.admin-recharge-modal{padding:4px 0}.admin-recharge-user{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;margin-bottom:20px}.admin-recharge-user__label{font-size:.8rem;color:#64748b;margin-bottom:6px}.admin-recharge-user__uuid{font-size:.9rem;margin-bottom:6px}.admin-recharge-user__uuid code{font-family:ui-monospace,monospace;font-size:.85rem;background:#e2e8f0;padding:2px 8px;border-radius:6px;word-break:break-all}.admin-recharge-user__meta{font-size:.9rem;color:#475569}.admin-recharge-user__meta span+span{margin-left:4px}.admin-recharge-form{display:flex;flex-direction:column;gap:16px}.admin-recharge-row{margin-bottom:0}.admin-recharge-row label{display:block;font-size:.9rem;font-weight:500;color:#374151;margin-bottom:6px}.admin-recharge-row label .required{color:#dc2626}.admin-recharge-row .modal-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e5e7eb;font-size:.95rem}.admin-recharge-row .modal-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f626}.pagination{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #e5e7eb}.pagination-info{color:#6b7280;font-size:.9rem}.pagination-controls{display:flex;align-items:center;gap:.5rem}.page-num{color:#6b7280;font-size:.9rem}.page-btn{padding:.5rem .875rem;background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:.9rem;color:#6b7280;transition:all .2s}.page-btn:hover:not(:disabled){border-color:#3b82f6;color:#3b82f6}.page-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-jump{display:flex;align-items:center;gap:.5rem;color:#6b7280;font-size:.9rem}.page-input{width:50px;padding:.375rem;border:1px solid #e5e7eb;border-radius:6px;text-align:center;font-size:.9rem}.page-input:focus{outline:none;border-color:#3b82f6}.coming-soon{text-align:center;color:#9ca3af;font-size:1.1rem;padding:3rem 0}.admin-container .modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;background:#06125061;-webkit-tap-highlight-color:transparent}.admin-container .modal-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 18px 40px #0612502e;border:1px solid rgba(99,102,241,.08);color:#0f172a;animation:admin-modal-in .25s ease-out}@keyframes admin-modal-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.admin-container .modal-card--blue .modal-card__title{font-size:1.1rem;font-weight:700;color:#0f172a;margin:0 0 12px}.admin-container .modal-card__desc,.admin-modal-desc{color:#64748b;font-size:.95rem;line-height:1.5;margin:0 0 20px}.admin-container .modal-card__actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #e2e8f0}.admin-container .modal-card .btn{min-width:120px;width:120px;padding:10px 16px;height:40px;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box}.admin-container .modal-card .btn:disabled{opacity:.6;cursor:not-allowed}.admin-container .modal-card .btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 4px 14px #6366f159}.admin-container .modal-card .btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #6366f173;transform:translateY(-1px)}.admin-container .modal-card .btn-cancel{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}.admin-container .modal-card .btn-cancel:hover:not(:disabled){background:#e2e8f0;color:#334155}.admin-container .modal-card .btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 14px #ef44444d}.admin-container .modal-card .btn-danger:hover:not(:disabled){box-shadow:0 6px 20px #ef444466;transform:translateY(-1px)}.admin-container .modal-card .btn-ghost{background:transparent;color:#64748b;border:1px solid #e2e8f0}.admin-container .modal-card .btn-ghost:hover:not(:disabled){background:#f8fafc;color:#475569}.admin-user-actions .btn.action-btn{min-width:80px;width:80px;padding:8px 12px;height:34px;font-size:.85rem;border-radius:8px;font-weight:500;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.admin-user-actions .btn.action-btn--status{background:#fef3c7;color:#d97706;border:1px solid #fcd34d}.admin-user-actions .btn.action-btn--status:hover:not(:disabled){background:#fde68a;color:#b45309}.admin-user-actions .btn.action-btn--recharge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;box-shadow:0 2px 8px #10b9814d}.admin-user-actions .btn.action-btn--recharge:hover:not(:disabled){box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}@media(max-width:768px){.admin-sidebar{width:200px}.filter-section{flex-direction:column}.pagination{flex-direction:column;gap:1rem;align-items:flex-start}.data-table{font-size:.85rem}.data-table th,.data-table td{padding:.75rem .875rem}}@media(max-width:480px){.admin-sidebar{display:none}.admin-header{padding:.875rem 1rem}.page-title{font-size:1.1rem}.header-right{gap:.5rem}.admin-badge{font-size:.75rem;padding:.3rem .6rem}.username{font-size:.85rem}.logout-btn{padding:.4rem .75rem;font-size:.85rem}.admin-content{padding:1rem}.content-section{padding:1rem;border-radius:10px}.section-header{flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.section-header h2{font-size:1.1rem}.export-btn{padding:.4rem .875rem;font-size:.85rem;width:100%}.filter-section{gap:.5rem}.filter-group{flex-direction:column;align-items:stretch}.filter-input,.filter-select{width:100%;min-width:unset;font-size:.85rem;padding:.6rem .75rem}.search-btn{padding:.6rem 1rem;font-size:.85rem;width:100%}.table-container{margin-bottom:1rem}.data-table{font-size:.75rem;table-layout:auto}.data-table th,.data-table td{padding:.6rem .5rem;white-space:nowrap}.admin-user-actions{flex-direction:column;gap:4px}.admin-user-actions .btn.action-btn{width:100%;min-width:unset;font-size:.75rem;padding:6px 8px;height:auto}.pagination{padding-top:.75rem;gap:.75rem}.pagination-info{font-size:.8rem}.pagination-controls{flex-wrap:wrap;justify-content:center}.page-btn{padding:.4rem .6rem;font-size:.8rem}.page-input{width:40px;font-size:.8rem}.admin-container .modal-card{width:calc(100% - 24px);max-width:calc(100% - 24px);margin:12px;padding:16px}.admin-container .modal-card .btn{min-width:100px;width:100px;padding:8px 12px;font-size:.85rem;height:36px}}@media(max-width:360px){.admin-header{padding:.75rem .875rem}.page-title{font-size:1rem}.admin-content{padding:.75rem}.content-section{padding:.875rem}.data-table{font-size:.7rem}.data-table th,.data-table td{padding:.5rem .4rem}.admin-container .modal-card{width:calc(100% - 16px);max-width:calc(100% - 16px);margin:8px;padding:14px}.admin-container .modal-card .btn{width:100%;min-width:unset}.admin-container .modal-card__actions{flex-direction:column}}.App{width:100%;height:100%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#1f2937}#root{width:100%;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#f3f4f6;padding:2px 6px;border-radius:4px;color:#3b82f6}