:root{--primary-color:#4a6bfd;--secondary-color:#6f42c1;--accent-color:#fd7e14;--success-color:#28a745;--danger-color:#dc3545;--light-color:#f8f9fa;--dark-color:#343a40;--text-color:#212529;--border-radius:8px;--box-shadow:0 4px 6px rgba(0,0,0,0.1);--transition-speed:0.3s}*{-webkit-box-sizing:border-box;box-sizing:border-box}*,body{margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-color);background-color:#f5f7fa}#app{max-width:1200px;margin:0 auto;padding:20px}.container{background-color:#fff;border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);padding:30px;margin-bottom:30px}h2{color:var(--primary-color);margin-bottom:20px;font-weight:600;position:relative;padding-bottom:10px;font-size:1.8rem}h2:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:3px;background:var(--primary-color);border-radius:3px}h3{color:var(--secondary-color);margin:15px 0;font-weight:500;font-size:1.2rem}.step{display:none;-webkit-animation:fadeIn .5s ease-in-out;animation:fadeIn .5s ease-in-out}@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.step.active{display:block}.form-group{margin-bottom:20px}label{display:block;margin-bottom:8px;font-weight:500;color:var(--dark-color)}input[type=text],textarea{width:100%;padding:12px 15px;margin-bottom:15px;border:1px solid #ced4da;border-radius:var(--border-radius);font-size:16px;-webkit-transition:border-color var(--transition-speed);transition:border-color var(--transition-speed);background-color:#fcfdff;color:var(--text-color)}input:focus,textarea:focus{outline:none;border-color:var(--primary-color);-webkit-box-shadow:0 0 0 3px rgba(74,107,253,.25);box-shadow:0 0 0 3px rgba(74,107,253,.25)}textarea{min-height:150px;resize:vertical}select{display:block;width:100%;padding:12px 15px;margin-bottom:15px;border:1px solid #ced4da;border-radius:var(--border-radius);font-size:16px;background-color:#fcfdff;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:8px 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none}select:focus{outline:none;border-color:var(--primary-color);-webkit-box-shadow:0 0 0 3px rgba(74,107,253,.25);box-shadow:0 0 0 3px rgba(74,107,253,.25)}.btn-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:20px}button{padding:12px 25px;border:none;border-radius:var(--border-radius);font-size:16px;font-weight:500;cursor:pointer;-webkit-transition:all var(--transition-speed);transition:all var(--transition-speed);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}button:focus{outline:none}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#3a5cfd;-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(74,107,253,.3);box-shadow:0 4px 8px rgba(74,107,253,.3)}.btn-primary:disabled{background-color:#a5b3f5;cursor:not-allowed;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}.btn-secondary{background-color:#e9ecef;color:var(--dark-color)}.btn-secondary:hover{background-color:#dde2e6;-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);box-shadow:0 4px 8px rgba(0,0,0,.1)}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-danger:hover{background-color:#c82333;-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(220,53,69,.3);box-shadow:0 4px 8px rgba(220,53,69,.3)}.btn-success{background-color:var(--success-color);color:#fff}.btn-success:hover{background-color:#218838;-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(40,167,69,.3);box-shadow:0 4px 8px rgba(40,167,69,.3)}.btn-icon{margin-right:8px}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-spinner{width:70px;height:70px;border:5px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:var(--primary-color);-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite;margin-bottom:20px}.loading-text{color:#fff;font-size:18px;font-weight:500}@-webkit-keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.shot-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px;margin-bottom:20px}.shot-item{background-color:#fff;border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);padding:20px;-webkit-transition:-webkit-transform var(--transition-speed),-webkit-box-shadow var(--transition-speed);transition:-webkit-transform var(--transition-speed),-webkit-box-shadow var(--transition-speed);transition:transform var(--transition-speed),box-shadow var(--transition-speed);transition:transform var(--transition-speed),box-shadow var(--transition-speed),-webkit-transform var(--transition-speed),-webkit-box-shadow var(--transition-speed)}.shot-item:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);-webkit-box-shadow:0 10px 15px rgba(0,0,0,.1);box-shadow:0 10px 15px rgba(0,0,0,.1)}.shot-item img,.shot-item video{width:100%;border-radius:var(--border-radius);margin-bottom:15px;-o-object-fit:cover;object-fit:cover;height:200px;background-color:#f8f9fa}.shot-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px;margin-top:15px}.shot-controls button{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:100px;padding:8px 15px;font-size:14px}.section-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.section-icon{margin-right:10px;font-size:24px;color:var(--primary-color)}.music-selection,.transition-selection,.voice-selection{background-color:#fff;border-radius:var(--border-radius);padding:20px;margin-bottom:20px;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.file-upload{margin-top:15px}.file-upload label{display:block;background-color:#e9ecef;color:var(--dark-color);padding:12px 15px;border-radius:var(--border-radius);cursor:pointer;text-align:center;-webkit-transition:background-color var(--transition-speed);transition:background-color var(--transition-speed)}.file-upload label:hover{background-color:#dde2e6}.file-upload input[type=file]{display:none}.file-upload .file-name{margin-top:10px;font-size:14px;color:#6c757d}.video-preview{background-color:#fff;border-radius:var(--border-radius);padding:20px;margin:20px 0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.video-preview video{width:100%;max-width:100%;border-radius:var(--border-radius);background-color:#f8f9fa}.step-indicator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:30px;position:relative}.step-indicator:before{content:"";position:absolute;top:20px;left:0;right:0;height:2px;background-color:#e9ecef;z-index:1}.step-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:2}.step-item,.step-number{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.step-number{width:40px;height:40px;border-radius:50%;background-color:#e9ecef;color:var(--dark-color);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-weight:500;margin-bottom:10px;-webkit-transition:all var(--transition-speed);transition:all var(--transition-speed)}.step-text{font-size:14px;font-weight:500;color:#6c757d;-webkit-transition:color var(--transition-speed);transition:color var(--transition-speed)}.step-item.active .step-number{background-color:var(--primary-color);color:#fff}.step-item.active .step-text{color:var(--primary-color)}.step-item.completed .step-number{background-color:var(--success-color);color:#fff}@media (max-width:768px){.shot-container{grid-template-columns:1fr}.btn-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px}button{width:100%}.step-text{font-size:12px}}