:root{--bg-primary: #121316;--bg-secondary: #1a1c22;--bg-card: #22252c;--bg-hover: #2c303a;--border-color: #313642;--text-primary: #f0f2f5;--text-secondary: #9aa1b2;--text-muted: #697082;--accent-color: #d4a373;--accent-hover: #e0b284;--accent-glow: rgba(212, 163, 115, .25);--success-color: #52c41a;--error-color: #ff4d4f;--paper-bg: #fbf9f5;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .45)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;min-height:100vh}.app-header{height:64px;padding:0 24px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.header-brand{display:flex;align-items:center;gap:12px}.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#d4a373,#a97142);color:#fff;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px var(--accent-glow)}.brand-text h1{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}.version-tag{font-size:.72rem;color:var(--accent-color);font-weight:500;letter-spacing:.04em;margin-left:6px}.header-tips{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted)}.app-workspace{flex:1;display:grid;grid-template-columns:1fr 340px;gap:20px;padding:20px 24px;max-width:1600px;margin:0 auto;width:100%}@media (max-width: 1080px){.app-workspace{grid-template-columns:1fr}}.workspace-canvas-panel{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;position:relative}.canvas-view-toolbar{display:flex;align-items:center;padding:3px;background:#181a20;border:1px solid var(--border-color);border-radius:var(--radius-sm)}.view-mode-button{min-height:34px;padding:6px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:var(--text-muted);border:0;border-radius:4px;cursor:pointer;font-size:.78rem;font-weight:600}.view-mode-button:hover:not(:disabled){color:var(--text-primary);background:var(--bg-hover)}.view-mode-button.active{background:var(--accent-color);color:#121316}.view-mode-button:disabled{opacity:.35;cursor:not-allowed}.canvas-container-outer{width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#242731,#15161a);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;min-height:580px;box-shadow:inset 0 2px 12px #00000080}.comparison-stage{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}.comparison-stage.mode-compare{grid-template-columns:repeat(2,minmax(220px,1fr));overflow-x:auto;padding-bottom:4px}.comparison-pane{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px}.comparison-pane.is-hidden{display:none}.comparison-label{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--text-primary);font-size:.8rem;font-weight:600}.comparison-label small{color:var(--text-muted);font-size:.7rem;font-weight:400;text-align:right}.canvas-wrapper{display:flex;justify-content:center;align-items:center}.comparison-pane .canvas-wrapper{width:100%}.comparison-pane .canvas-easel-frame{max-width:100%;margin:0 auto}.target-preview-empty{width:min(680px,100%);aspect-ratio:1;min-width:280px;display:grid;place-items:center;padding:24px;color:#8a8f9c;background:var(--paper-bg);text-align:center;font-size:.82rem}.target-preview-canvas{image-rendering:auto}.canvas-easel-frame{padding:8px;background:#2a2d36;border-radius:var(--radius-md);box-shadow:var(--shadow-lg),0 0 0 1px #ffffff0f}.sketch-canvas{display:block;background-color:var(--paper-bg);border-radius:var(--radius-sm);width:auto!important;height:auto!important;max-width:100%;max-height:65vh;object-fit:contain}.workspace-controls-bar{width:100%;max-width:780px}.playback-controls-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:14px}.progress-section{display:flex;flex-direction:column;gap:6px}.progress-slider-wrapper{width:100%}.progress-slider{width:100%;height:6px;border-radius:3px;background:#2c303c;outline:none;-webkit-appearance:none;cursor:pointer}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;box-shadow:0 0 8px var(--accent-glow);transition:transform .1s ease}.progress-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.progress-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-secondary)}.controls-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.button-group{display:flex;align-items:center;gap:10px}.ctrl-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:.88rem;font-weight:500;cursor:pointer;transition:all .15s ease}.btn-play,.btn-resume{background-color:var(--accent-color);color:#121316}.btn-play:hover:not(:disabled),.btn-resume:hover:not(:disabled){background-color:var(--accent-hover)}.btn-pause{background-color:#3b404d;color:var(--text-primary)}.btn-pause:hover:not(:disabled){background-color:#484f60}.btn-replay{background-color:transparent;border-color:var(--border-color);color:var(--text-primary)}.btn-replay:hover:not(:disabled){background-color:var(--bg-hover)}.btn-export{background-color:#272c38;border-color:#3a4153;color:var(--accent-color)}.btn-export:hover:not(:disabled){background-color:#323947;border-color:var(--accent-color)}.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.speed-group{display:flex;align-items:center;gap:8px}.speed-icon{color:var(--text-muted)}.speed-pills{display:flex;background-color:#14151a;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:2px}.speed-pill{background:transparent;border:none;color:var(--text-muted);padding:4px 8px;font-size:.75rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .1s ease}.speed-pill:hover:not(:disabled){color:var(--text-primary)}.speed-pill.active{background-color:var(--accent-color);color:#121316}.speed-pill:disabled{opacity:.4;cursor:not-allowed}.workspace-sidebar{display:flex;flex-direction:column;gap:16px}.sidebar-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px}.card-title{font-size:.92rem;font-weight:600;color:var(--text-primary);margin-bottom:12px}.card-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-title-row .card-title{margin-bottom:0}.btn-cancel-generation{background:transparent;border:1px solid #ff4d4f;color:#ff4d4f;font-size:.75rem;padding:2px 8px;border-radius:4px;cursor:pointer}.dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-md);padding:24px 16px;text-align:center;cursor:pointer;background-color:#ffffff04;transition:all .2s ease}.dropzone:hover:not(.disabled){border-color:var(--accent-color);background-color:#d4a3730d}.dropzone.drag-over{border-color:var(--accent-color);background-color:#d4a3731a;transform:scale(1.01)}.dropzone.disabled{opacity:.5;cursor:not-allowed}.icon-wrapper{width:48px;height:48px;border-radius:50%;background-color:var(--bg-hover);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:var(--accent-color)}.main-text{font-size:.88rem;font-weight:500;color:var(--text-primary)}.sub-text{font-size:.75rem;color:var(--text-muted);margin-top:4px}.upload-error-banner{margin-top:8px;display:flex;align-items:center;gap:6px;color:var(--error-color);font-size:.8rem}.status-box{border-radius:var(--radius-sm);padding:12px;background-color:var(--bg-card)}.status-box.idle{display:flex;align-items:flex-start;gap:10px;color:var(--text-muted)}.status-box.idle .status-title{font-size:.84rem;font-weight:500;color:var(--text-secondary)}.status-box.idle .status-desc{font-size:.75rem;margin-top:2px}.status-box.generating .status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.status-title-row{display:flex;align-items:center;gap:8px}.status-spinner.spin{animation:spin 1s linear infinite;color:var(--accent-color)}@keyframes spin{to{transform:rotate(360deg)}}.status-percentage{font-size:.85rem;font-weight:600;color:var(--accent-color)}.progress-bar-track{height:6px;background-color:var(--bg-primary);border-radius:3px;overflow:hidden;margin-bottom:8px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#d4a373,#e0b284);transition:width .2s ease}.status-msg{font-size:.78rem;color:var(--text-secondary)}.status-box.error{display:flex;align-items:flex-start;gap:10px;border-left:3px solid var(--error-color)}.error-icon{color:var(--error-color)}.status-box.ready .ready-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.success-icon{color:var(--success-color)}.ready-title-group{display:flex;align-items:center;gap:8px}.status-badge{background-color:#52c41a26;color:#73d13d;font-size:.72rem;padding:1px 6px;border-radius:4px;font-weight:600}.script-metadata-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meta-item{background-color:var(--bg-primary);padding:6px 8px;border-radius:4px;display:flex;flex-direction:column}.meta-item:last-child{grid-column:span 2}.meta-label{font-size:.68rem;color:var(--text-muted)}.meta-val{font-size:.78rem;font-weight:500;color:var(--text-secondary)}.meta-list{display:flex;flex-direction:column;gap:6px}.meta-row{display:flex;justify-content:space-between;font-size:.8rem}.meta-row .k{color:var(--text-muted)}.meta-row .v{color:var(--text-primary);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tips-card{font-size:.8rem}.drawing-layers-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:6px}.drawing-layers-list li{display:flex;align-items:flex-start;gap:6px;color:var(--text-secondary);font-size:.76rem;line-height:1.4}.layer-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}.layer-1{background-color:#8892b0}.layer-2{background-color:#ccd6f6}.layer-3{background-color:#d4a373}.layer-4{background-color:#a97142}.layer-5{background-color:#55341c}@media (max-width: 760px){.canvas-view-toolbar{width:100%}.view-mode-button{flex:1;padding-inline:6px}.comparison-label{flex-wrap:wrap}}.resolution-picker{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--text-secondary, #aab)}.resolution-picker select{background:var(--bg-secondary, #2a2d36);color:inherit;border:1px solid var(--border-color, #3a3d46);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}