:root{--bg-color: #f0f2f5;--panel-bg: rgba(255, 255, 255, .88);--card-bg: #ffffff;--border-color: rgba(0, 0, 0, .07);--text-primary: #1a1a2e;--text-secondary: #6b7280;--text-muted: #9ca3af;--accent-color: #3b82f6;--accent-hover: #2563eb;--accent-light: rgba(59, 130, 246, .06);--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.background-decor{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(135deg,#e8ecf4,#f0f2f5 40%,#eee8f6)}.circle{position:absolute;border-radius:50%;filter:blur(120px);opacity:.3}.circle-1{width:500px;height:500px;background:#93c5fd;top:-120px;left:-80px;animation:float 12s ease-in-out infinite alternate}.circle-2{width:600px;height:600px;background:#c4b5fd;bottom:-180px;right:-100px;animation:float 15s ease-in-out infinite alternate-reverse}@keyframes float{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.app-container{width:100%;max-width:1300px;height:94vh;display:flex;flex-direction:column;background:var(--panel-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--border-color);border-radius:20px;z-index:1;box-shadow:0 20px 60px -10px #00000014,0 0 0 1px #ffffffb3 inset;margin:0 20px;overflow:hidden}.app-header{padding:18px 30px;border-bottom:1px solid var(--border-color);text-align:center;background:#ffffff80;flex-shrink:0}.app-header h1{font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.5px}.app-header .header-desc{display:inline-block;font-size:.85rem;color:var(--text-secondary);margin-top:10px;line-height:1;padding:8px 20px;background:#3b82f60f;border:1px solid rgba(59,130,246,.12);border-radius:20px;white-space:nowrap}.main-layout{display:flex;flex:1;overflow:hidden}.left-panel{width:340px;min-width:340px;border-right:1px solid var(--border-color);padding:22px;display:flex;flex-direction:column;gap:18px;overflow-y:auto;background:#ffffff4d}.left-panel::-webkit-scrollbar{width:4px}.left-panel::-webkit-scrollbar-thumb{background:#00000014;border-radius:2px}.panel-title{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:var(--text-primary)}.panel-title .material-icons{font-size:20px;color:var(--accent-color)}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:.9rem;font-weight:500;color:var(--text-primary)}.upload-area{display:flex;align-items:center;justify-content:center;min-height:120px;border:2px dashed rgba(59,130,246,.25);border-radius:14px;cursor:pointer;transition:all .25s ease;background:var(--accent-light);overflow:hidden}.upload-area:hover{border-color:var(--accent-color);background:#3b82f614}.upload-area.drag-active{border-color:var(--accent-color);background:#3b82f61f;border-style:solid}.drag-overlay{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--accent-color);font-size:.95rem;font-weight:500}.drag-overlay.hidden{display:none}.drag-overlay .material-icons{font-size:40px;animation:bounceDown .8s ease infinite}@keyframes bounceDown{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-secondary);font-size:.9rem}.upload-placeholder .material-icons{font-size:32px;color:var(--accent-color);opacity:.7}.upload-hint{font-size:.75rem;color:var(--text-muted)}.image-preview-container{width:100%}.image-preview-container.hidden{display:none}.image-preview-container img{width:100%;max-height:180px;object-fit:contain;border-radius:10px}.remove-image-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(239,68,68,.3);color:#ef4444;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:.8rem;transition:all .2s;width:fit-content}.remove-image-btn:hover{background:#ef444414}.remove-image-btn .material-icons{font-size:16px}.remove-image-btn.hidden{display:none}.prompt-textarea{width:100%;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:12px 14px;color:var(--text-primary);font-size:.9rem;line-height:1.6;resize:vertical;outline:none;font-family:inherit;min-height:70px;max-height:160px;transition:border-color .3s ease,box-shadow .3s ease}.prompt-textarea:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.prompt-textarea::placeholder{color:var(--text-muted)}.generate-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--accent-color),#6366f1);color:#fff;border:none;border-radius:12px;padding:13px 24px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 14px #3b82f640}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #3b82f659}.generate-btn:active{transform:translateY(0)}.generate-btn .material-icons{font-size:20px}.queue-panel{width:260px;min-width:260px;border-right:1px solid var(--border-color);padding:22px 16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;background:#fff3}.queue-panel::-webkit-scrollbar{width:4px}.queue-panel::-webkit-scrollbar-thumb{background:#00000014;border-radius:2px}.queue-count{font-size:.75rem;font-weight:500;color:var(--text-muted);margin-left:auto}.queue-list{display:flex;flex-direction:column;gap:8px;flex:1}.queue-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:.85rem;margin-top:40px}.queue-empty .material-icons{font-size:36px;opacity:.4}.queue-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#fff9;border:1px solid var(--border-color);cursor:pointer;transition:all .2s;animation:fadeIn .25s ease forwards}.queue-item:hover{background:#3b82f60d;border-color:#3b82f633}.queue-item.selected{background:#3b82f614;border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f61a}.queue-item-status{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.7rem;font-weight:600}.queue-item-status .material-icons{font-size:16px}.queue-item-status.status-queued{background:#f59e0b1a;color:var(--warning-color)}.queue-item-status.status-processing{background:#3b82f61a;color:var(--accent-color)}.queue-item-status.status-processing .material-icons{animation:spin 1.2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.queue-item-status.status-done{background:#10b9811a;color:var(--success-color)}.queue-item-status.status-error{background:#ef44441a;color:var(--error-color)}.queue-item-info{flex:1;overflow:hidden}.queue-item-title{font-size:.82rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item-label{font-size:.72rem;color:var(--text-muted);margin-top:2px}.queue-item-thumb{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.right-panel{flex:1;padding:22px;display:flex;flex-direction:column;gap:14px;overflow:hidden}.preview-area{flex:1;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#ffffff80;border:1px solid var(--border-color);overflow:hidden;position:relative}.preview-area.switching{animation:previewFadeIn .35s ease forwards}@keyframes previewFadeIn{0%{opacity:.3}to{opacity:1}}.empty-state,.queued-state,.error-state{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-muted)}.empty-state.hidden,.queued-state.hidden,.error-state.hidden{display:none}.empty-icon,.queued-icon,.error-icon{font-size:56px;opacity:.25}.error-icon{color:var(--error-color);opacity:.6}.queued-icon{color:var(--warning-color);opacity:.5}.empty-title,.queued-title,.error-title{font-size:1.05rem;font-weight:500;color:var(--text-secondary)}.empty-subtitle,.queued-subtitle{font-size:.85rem;max-width:280px;text-align:center;line-height:1.5}.error-message{font-size:.85rem;color:var(--error-color);text-align:center;max-width:320px;line-height:1.5}.loading-state{display:flex;flex-direction:column;align-items:center;gap:24px}.loading-state.hidden{display:none}.loader-ring{display:inline-block;position:relative;width:60px;height:60px}.loader-ring div{box-sizing:border-box;display:block;position:absolute;width:48px;height:48px;margin:6px;border:3px solid transparent;border-radius:50%;animation:ring-spin 1.2s cubic-bezier(.5,0,.5,1) infinite;border-top-color:var(--accent-color)}.loader-ring div:nth-child(1){animation-delay:-.45s}.loader-ring div:nth-child(2){animation-delay:-.3s}.loader-ring div:nth-child(3){animation-delay:-.15s}@keyframes ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:.95rem;color:var(--text-secondary);animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.result-state{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px;overflow-y:auto}.result-state.hidden{display:none}.result-image{max-width:100%;max-height:70%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px -6px #0000001a;transition:opacity .3s ease}@keyframes imageReveal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.result-text{font-size:.88rem;color:var(--text-secondary);line-height:1.6;text-align:center;max-width:90%;word-wrap:break-word}.result-actions{display:flex;gap:10px}.download-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--accent-color),#6366f1);color:#fff;border:none;border-radius:10px;padding:10px 20px;font-size:.88rem;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:0 3px 10px #3b82f633}.download-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px #3b82f64d}.download-btn .material-icons{font-size:18px}.task-detail{flex-shrink:0;padding:16px 20px;background:#f0f2f599;border:1px solid rgba(0,0,0,.08);border-radius:14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 4px #00000008}.task-detail.hidden{display:none}.detail-row{display:flex;align-items:flex-start;gap:8px;font-size:.85rem}.detail-label{color:var(--text-muted);flex-shrink:0;font-weight:500}.detail-value{color:var(--text-primary);line-height:1.5;word-break:break-all}.detail-thumb{height:56px;border-radius:8px;object-fit:contain;box-shadow:0 2px 6px #00000014}.detail-actions{display:flex;gap:10px;margin-top:2px}.retry-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid rgba(59,130,246,.3);color:var(--accent-color);border-radius:8px;padding:6px 14px;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s}.retry-btn:hover{background:#3b82f60f;border-color:var(--accent-color)}.retry-btn .material-icons{font-size:16px}@media (max-width: 900px){.main-layout{flex-direction:column}.left-panel{width:100%;min-width:auto;border-right:none;border-bottom:1px solid var(--border-color);max-height:35vh}.queue-panel{width:100%;min-width:auto;border-right:none;border-bottom:1px solid var(--border-color);max-height:20vh;flex-direction:row;flex-wrap:wrap}.queue-list{flex-direction:row;overflow-x:auto}.app-container{height:100vh;border-radius:0;margin:0}}