:root{--bg-primary: #0f1419;--bg-secondary: #1a1f2e;--bg-tertiary: #0d111a;--text-primary: #ffffff;--text-secondary: #a0a8b8;--text-accent: #6366f1;--accent-gradient-start: #6366f1;--accent-gradient-end: #3b82f6;--red-gradient-start: #ef4444;--red-gradient-end: #dc2626;--border-color: rgba(99, 102, 241, .15);--border-hover: #6366f1;--shadow-color: rgba(99, 102, 241, .2);--shadow-hover: rgba(99, 102, 241, .3);--btn-bg: linear-gradient(135deg, #6366f1, #3b82f6);--btn-hover-bg: linear-gradient(135deg, #7c3aed, #2563eb);--btn-disabled-bg: #374151;--card-bg: rgba(26, 31, 46, .5);--upload-bg: rgba(30, 41, 59, .3);--upload-hover-bg: rgba(30, 41, 59, .5);--style-option-bg: rgba(31, 41, 55, .4);--style-option-hover-bg: rgba(31, 41, 55, .7);--audio-preview-bg: rgba(30, 41, 59, .4)}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%);color:var(--text-primary);min-height:100vh;padding:0;background-attachment:fixed}.social-link{display:inline-flex;align-items:center;position:absolute;top:20px;left:20px;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--inactive);transition:all .3s cubic-bezier(.4,0,.2,1);background-color:#6366f10d;border:1px solid rgba(99,102,241,.1)}.social-link:hover{color:var(--accent);background-color:#6366f126;border-color:var(--accent);transform:translateY(-2px)}.social-link svg{width:20px;height:20px}.header{display:flex;justify-content:flex-end;align-items:center;padding:0 30px;height:70px;background:#0f141980;border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px)}.container{max-width:1000px;margin:0 auto;padding:40px 20px}.logo{text-align:center;margin-bottom:20px}.logo h1{font-size:3.5rem;background:linear-gradient(135deg,var(--accent-gradient-start),var(--accent-gradient-end));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:3px;font-weight:800;margin:0}.subtitle{text-align:center;color:var(--text-secondary);margin-bottom:50px;font-size:1.15rem;letter-spacing:.3px;font-weight:400}.card{background:var(--card-bg);backdrop-filter:blur(15px);border-radius:16px;padding:40px;margin-bottom:30px;border:1px solid var(--border-color);box-shadow:0 8px 32px #0003;position:relative;overflow:hidden;transition:all .3s ease}.card:hover{border-color:#6366f140;box-shadow:0 12px 40px #6366f126}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-gradient-start),transparent)}.section-title{font-size:1.5rem;margin-bottom:30px;color:var(--text-primary);display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.5px}.section-title:before{content:"";width:4px;height:24px;background:linear-gradient(180deg,var(--accent-gradient-start),var(--accent-gradient-end));border-radius:2px}.upload-area{border:2px dashed var(--border-color);border-radius:12px;padding:50px 40px;text-align:center;transition:all .3s ease;background:var(--upload-bg);cursor:pointer}.upload-area:hover{border-color:var(--border-hover);background:var(--upload-hover-bg);transform:translateY(-2px)}.upload-icon{font-size:3.5rem;margin-bottom:20px;color:var(--text-accent);opacity:.8}.upload-text{font-size:1.25rem;margin-bottom:12px;color:var(--text-primary);font-weight:600}.upload-subtext{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.file-input{display:none}.file-info{margin-top:20px;padding:12px 16px;background:#6366f114;border-radius:8px;border-left:3px solid var(--accent-gradient-start)}.file-name{font-weight:500;color:var(--text-accent);font-size:.95rem}.styles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:35px}.style-option{background:var(--style-option-bg);border:1.5px solid var(--border-color);border-radius:12px;padding:24px 20px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.style-option:hover{background:var(--style-option-hover-bg);border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 8px 20px #6366f126}.style-option.selected{background:#6366f126;border-color:var(--accent-gradient-start);box-shadow:0 8px 25px #6366f140}.style-icon{font-size:2.5rem;margin-bottom:12px;color:var(--text-accent)}.style-name{font-weight:700;margin-bottom:6px;color:var(--text-primary);font-size:1rem}.style-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.4}.action-btn{background:var(--btn-bg);border:none;padding:14px 48px;border-radius:10px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;margin:0 auto;box-shadow:0 6px 20px #6366f140;letter-spacing:.3px;text-transform:uppercase}.action-btn:hover:not(:disabled){background:var(--btn-hover-bg);box-shadow:0 12px 30px #6366f166;transform:translateY(-3px)}.action-btn:disabled{background:#4b5563;cursor:not-allowed;box-shadow:none;transform:none;opacity:.7}.processing{text-align:center;padding:40px;display:flex;flex-direction:column;align-items:center}.spinner{border:3px solid rgba(99,102,241,.2);border-top:3px solid var(--accent-gradient-start);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.audio-preview{margin-top:30px;padding:30px;background:var(--audio-preview-bg);border-radius:12px;border:1px solid var(--border-color);display:none;transition:all .3s ease}.preview-title{font-size:1.2rem;margin-bottom:20px;color:var(--text-primary);display:flex;align-items:center;gap:10px;font-weight:700}audio{width:100%;margin-top:15px;background:#1e293b80;border-radius:8px;border:1px solid var(--border-color)}.status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%;background:#0f8;margin-right:8px;box-shadow:0 0 10px #0f8}@media(max-width:768px){.styles-grid{grid-template-columns:repeat(2,1fr)}.card{padding:25px 20px}}@media(max-width:480px){.styles-grid{grid-template-columns:1fr}.logo h1{font-size:2.2rem}}.info-banner{width:100%;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-bottom:1px solid var(--border-color);padding:20px 0;box-shadow:0 4px 20px #0000004d;position:sticky;top:0;margin:0;z-index:100}.banner-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}.banner-item{display:flex;align-items:center;gap:12px;text-align:center;flex:1;min-width:250px}.banner-icon{font-size:1.8rem;color:var(--accent-gradient-start);filter:drop-shadow(0 0 8px rgba(99,102,241,.5))}.banner-content h3{font-size:1.1rem;margin-bottom:4px;font-weight:600;color:var(--text-primary)}.banner-content p{font-size:.9rem;color:var(--text-secondary);line-height:1.4}#waveform[data-v-aed6b2f1]{cursor:pointer;position:relative;overflow:hidden}.audio-controls[data-v-aed6b2f1]{display:flex;gap:20px;justify-self:center;padding:30px}.control-btn[data-v-aed6b2f1]{width:60px;height:60px;border-radius:50%;border:none;background:var(--btn-bg);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s ease;outline:none}.control-btn[data-v-aed6b2f1]:hover{transform:translateY(-2px);background:var(--btn-hover-bg)}.control-btn[data-v-aed6b2f1]:active{transform:translateY(1px)}.control-btn.pause[data-v-aed6b2f1]{background:btn-bg}.control-btn.delete[data-v-aed6b2f1]{background:linear-gradient(45deg,var(--red-gradient-start),var(--red-gradient-end))}.control-btn.pause[data-v-aed6b2f1]:hover{background:btn-hover-bg}.control-btn.delete[data-v-aed6b2f1]:hover{background:linear-gradient(45deg,var(--red-gradient-end),var(--red-gradient-start))}.control-btn svg[data-v-aed6b2f1]{width:24px;height:24px}.pause-icon path[data-v-aed6b2f1]{fill:var(--text-primary)}.delete-icon path[data-v-aed6b2f1]{fill:var(--text-primary)}.control-row[data-v-c9ae21ac]{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.control-row label[data-v-c9ae21ac]{font-weight:600;color:var(--text-primary);font-size:.95rem}.control-row strong[data-v-c9ae21ac]{color:var(--text-accent);margin-left:4px}.control-row input[type=range][data-v-c9ae21ac]{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#6366f133,#6366f14d);outline:none;-webkit-appearance:none;appearance:none}.control-row input[type=range][data-v-c9ae21ac]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#3b82f6);cursor:pointer;box-shadow:0 2px 8px #6366f14d;transition:all .2s ease}.control-row input[type=range][data-v-c9ae21ac]::-webkit-slider-thumb:hover{width:20px;height:20px;box-shadow:0 4px 12px #6366f180}.control-row input[type=range][data-v-c9ae21ac]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#3b82f6);cursor:pointer;box-shadow:0 2px 8px #6366f14d;transition:all .2s ease;border:none}.control-row input[type=range][data-v-c9ae21ac]::-moz-range-thumb:hover{width:20px;height:20px;box-shadow:0 4px 12px #6366f180}.control-row input[type=range][data-v-c9ae21ac]::-moz-range-track{background:transparent;border:none}.action-btn[data-v-c9ae21ac]:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.action-btn[data-v-c9ae21ac]:disabled:hover{background:#4b5563;box-shadow:none}h3[data-v-c9ae21ac]{margin-bottom:16px;color:var(--text-primary);font-weight:700;font-size:1.1rem}div[style*="text-align: right"][data-v-c9ae21ac]{margin-top:24px}