.record-area .btn-convert{font-size:.875rem}.record-area,.record-area .record-content{margin-bottom:2rem}.record-area .record-content>*{margin-bottom:1rem}.record-area .record-content h3{font-weight:400;font-size:1rem}.record-area .record-content .record-list{display:flex;gap:1rem;flex-wrap:wrap}.record-area .record-content .record-list .record-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;justify-content:center;background-color:#e1e4e8;border-radius:.5rem;flex:1;height:6rem;min-width:6rem}.record-area .record-content .record-list .record-item .iconfont{font-size:1.5rem}.record-area .record-content .record-list .record-item span{font-size:.75rem;color:var(--text-light)}.record-area .record-content .record-list .record-item span:first-child{font-size:1rem}.record-area .record-content .record-list .record-item.active{background-color:var(--accent-color);color:#fff}.record-area .record-content .record-list .record-item.active span{color:#fff}.record-area .record-content .record-tip{background-color:var(--bg-light);color:var(--text-light);border-radius:.5rem;padding:1rem;font-size:.875rem}.record-area .record-content .record-tip p{margin-bottom:1rem;font-family:cursive}.control-panel .model-note p:last-child,.record-area .record-content .record-tip p:last-child{margin-bottom:0}.record-area .record-content .record-tip p a{color:var(--accent-color);margin-left:.25rem;margin-right:.25rem}.record-area .record-content .recording-preview{position:relative;display:flex;align-items:center;justify-content:center;gap:1rem}.record-area .record-content .recording-preview .recording-media{flex:1}.record-area .record-content .recording-preview .recording-media .video-preview{width:100%;height:auto;border-radius:.875rem;object-fit:contain;cursor:pointer}.record-area .record-content .recording-preview .recording-media .audio-preview{margin-top:3rem}.record-area .record-content .recording-preview .recording-preview-text{font-size:.875rem;position:absolute;top:.25rem;left:.25rem;display:flex;align-items:baseline;gap:.25rem;color:var(--accent-color)}.record-area .record-content .recording-preview .recording-preview-text .iconfont{font-size:.875rem;display:inline-block;animation:blink 1s infinite}.record-area .record-content .recording-info{text-align:center;flex:1}.record-area .record-content .recording-info .recording-time{font-size:1.5rem;margin-bottom:.5rem;color:#198754}.record-area .record-content .recording-info .recording-label{color:gray;font-size:.875rem}.record-control{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.control-panel{background-color:var(--bg-light);color:var(--text-color);padding:1rem}.control-panel .panel-title{font-size:1rem;font-weight:700;margin-bottom:1rem}.control-panel .tab-buttons{display:flex;flex-wrap:wrap;gap:.5rem;white-space:nowrap}.control-panel .tab-buttons .tab-btn{flex:1;padding:.5rem .8rem;background:#fff;border:.0625rem solid var(--border-color);border-radius:.5rem;font-size:.875rem;cursor:pointer}.control-panel .tab-buttons .tab-btn.active{background:var(--primary-color);color:#fff}.control-panel .color-options{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.control-panel .color-options .color-btn{width:2rem;height:2rem;border-radius:50%;border:.2rem solid transparent;cursor:pointer;box-shadow:0 .2rem .5rem rgba(0,0,0,.15)}.control-panel .custom-color-wrapper,.control-panel .custom-image-wrapper{margin-top:1rem}.control-panel .custom-color-wrapper .custom-color-label{display:block;font-size:.875rem;color:var(--text-light);margin-bottom:.5rem}.control-panel .custom-color-wrapper .custom-color-input{width:2rem!important;height:2rem!important;cursor:pointer;border:0;background:0 0;border-radius:50%;box-sizing:border-box;appearance:none;-webkit-appearance:none;padding:0;margin:0}.control-panel .custom-color-wrapper .custom-color-input::-webkit-color-swatch-wrapper{padding:0!important}.control-panel .custom-color-wrapper .custom-color-input::-webkit-color-swatch{border:0!important}.control-panel .custom-image-wrapper .custom-bg-btn{width:100%;padding:.875rem;font-size:.875rem;background:#fff;border:.0625rem dashed var(--primary-color);border-radius:.5rem;cursor:pointer;color:var(--primary-color)}.control-panel .custom-image-wrapper .custom-bg-btn:hover{background:#f0f2ff}.control-panel .custom-image-wrapper input{display:none}.control-panel .model-options{margin-top:1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.control-panel .model-options .model-btn{padding:.5rem .8rem;background:#fff;border:.0625rem solid var(--primary-color);border-radius:.5rem;cursor:pointer;font-size:.875rem;text-align:center;color:var(--text-color)}.control-panel .model-options .model-btn.active{background:var(--primary-color);color:#fff}button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:var(--border-color)!important}.control-panel .model-note{margin-top:1rem;font-size:.75rem;color:var(--text-light)}.control-panel .model-note p{margin-bottom:.5rem}.control-panel .model-note p a{color:var(--primary-color)}.video-hidden{position:absolute;left:-9999rem;top:0;width:1rem;height:1rem}.canvas-wrapper{width:100%;height:100%;max-width:100%;overflow:hidden}.canvas-wrapper canvas{width:100%;max-width:100%!important;height:auto!important}.canvas-wrapper canvas.video-canvas{background-color:var(--bg-light)}@media (max-width:768px){.record-control{grid-template-columns:1fr}}