*{margin:0;padding:0;box-sizing:border-box}

/* 浅色主题（默认） */
:root{
--bg:#f8f9fa;
--surface:#ffffff;
--surface-hover:#f1f3f5;
--border:#e9ecef;
--text:#212529;
--text-secondary:#6c757d;
--text-muted:#adb5bd;
--accent:#6366f1;
--accent-hover:#4f46e5;
--success:#22c55e;
--error:#ef4444;
--inspiration-primary:#f59e0b;
--inspiration-secondary:#f97316;
--inspiration-gradient:linear-gradient(135deg,#f59e0b,#f97316);
}

/* 深色主题 */
[data-theme="dark"]{
--bg:#0f0f11;
--surface:#1a1a1e;
--surface-hover:#25252a;
--border:#2a2a30;
--text:#f5f5f7;
--text-secondary:#8b8b92;
--text-muted:#555560;
--accent:#6366f1;
--accent-hover:#818cf8;
--success:#22c55e;
--error:#ef4444;
--inspiration-primary:#fbbf24;
--inspiration-secondary:#f59e0b;
--inspiration-gradient:linear-gradient(135deg,#fbbf24,#f59e0b);
}

html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;overflow-y:auto;transition:background-color 0.3s,color 0.3s;-webkit-tap-highlight-color:transparent}

/* 全局按钮触摸优化 - 确保移动端可点击 */
button,[role="button"],.btn,.nav-btn,.tag,.wizard-option,.inspiration-type-btn,.inspiration-send-btn,.inspiration-btn,.action-btns .btn,.upgrade-modal-actions .btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  cursor:pointer;
}

/* 自定义大滚动条 */
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:var(--surface);border-left:1px solid var(--border)}
::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:8px;border:3px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:var(--surface)}

/* Hamburger Menu Button */
.hamburger-btn{display:none;width:40px;height:40px;border:none;background:transparent;color:var(--text);font-size:1.5rem;cursor:pointer;border-radius:8px;transition:background 0.15s;flex-shrink:0}
.hamburger-btn:hover{background:var(--surface-hover)}

/* Header */
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.25rem;letter-spacing:-0.3px;flex-shrink:0;margin-left:2px}
.brand::before{content:"◆";color:var(--accent);font-size:1.4rem}

/* Main Layout */
main{flex:1;display:flex;overflow-y:auto}

/* Sidebar */
.sidebar{width:200px;min-width:200px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}

/* Sidebar Navigation */
.sidebar-nav{padding:12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary);font-size:0.85rem;cursor:pointer;transition:all 0.15s;text-align:left;width:100%;font-weight:500}
.nav-btn:hover{background:var(--surface-hover);color:var(--text)}
.nav-btn.active{background:var(--accent);color:#fff}
.nav-btn.nav-tool.active{background:var(--surface-hover);color:var(--accent);border:1px solid var(--accent)}
.nav-divider{height:1px;background:var(--border);margin:6px 0}


.panel{padding:20px;border-bottom:1px solid var(--border)}
.panel:last-child{border-bottom:none;flex:1}
.panel-title{font-size:0.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:16px}

.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
label{display:block;font-size:0.8rem;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
select,input[type="password"],input[type="text"]{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.9rem;outline:none;transition:border-color 0.15s}
select:focus,input:focus{border-color:var(--accent)}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b8b92' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

.checkbox{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;transition:opacity 0.15s}
.checkbox:hover{opacity:0.9}
.checkbox input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.checkbox-text{font-size:0.88rem}
.checkbox-desc{font-size:0.75rem;color:var(--text-secondary);margin-left:4px}

/* Content Area */
.content{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:200px;min-width:0}

/* Content Config - 普通模式配置面板在内容区 */
.content-config{display:flex;gap:0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.content-config .panel{flex:1;min-width:200px;padding:16px 20px;border-bottom:none;border-right:1px solid var(--border)}
.content-config .panel:last-child{border-right:none}
.content-config .panel-title{font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.content-config .field{margin-bottom:8px}
.content-config .field:last-child{margin-bottom:0}
.content-config select{width:100%}

/* Input Section */
.input-area{padding:24px 32px;border-bottom:1px solid var(--border)}

.quick-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tag{padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:0.8rem;color:var(--text-secondary);cursor:pointer;transition:all 0.15s}
.tag:hover{border-color:var(--accent);color:var(--accent)}
.tag:active{transform:scale(0.98)}

textarea{width:100%;min-height:120px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:0.95rem;line-height:1.6;resize:vertical;outline:none;transition:border-color 0.15s;font-family:inherit}
textarea:focus{border-color:var(--accent)}
textarea::placeholder{color:var(--text-secondary);opacity:0.6}
.key-row{display:flex;gap:8px}
.key-row input{flex:1}
.verify-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:0.82rem;cursor:pointer;white-space:nowrap;transition:all 0.15s;font-weight:500}
.verify-btn:hover{opacity:0.85}
.verify-btn:disabled{opacity:0.5;cursor:not-allowed}
.verify-btn.loading{background:var(--text-secondary);border-color:var(--text-secondary)}
.verify-status{font-size:0.78rem;margin-top:6px;min-height:18px;transition:all 0.2s}
.verify-status.success{color:var(--success)}
.verify-status.error{color:var(--error)}
.verify-status.loading{color:var(--text-secondary)}

.actions{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:12px}
.action-btns{display:flex;gap:10px}
.btn-accent{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-size:0.85rem;cursor:pointer;transition:all 0.2s;font-weight:500}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(102,126,234,0.4)}
.btn-accent:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn{padding:10px 20px;border:none;border-radius:8px;font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:6px}
.btn:active{transform:scale(0.98)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--text-secondary)}
.hint{font-size:0.75rem;color:var(--text-secondary)}

/* Result Section */
.result-area{flex:1;overflow-y:auto;padding:24px 32px;display:none;-webkit-overflow-scrolling:touch}
.result-area.show{display:flex;flex-direction:column}

.result-header{display:flex;align-items:center;gap:24px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:12px}
.result-tab{padding:8px 4px;font-size:0.9rem;color:var(--text-secondary);cursor:pointer;border:none;background:none;position:relative;transition:color 0.15s;font-weight:500}
.result-tab:hover{color:var(--text)}
.result-tab.active{color:var(--accent)}
.result-tab.active::after{content:'';position:absolute;bottom:-13px;left:0;right:0;height:2px;background:var(--accent);border-radius:1px}

.result-panel{display:none}
.result-panel.active{display:block;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.output-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;min-height:200px;max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;line-height:1.7;font-size:0.92rem}

.output-actions{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.output-meta{font-size:0.8rem;color:var(--text-secondary)}

/* Score Panel */
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.score-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;text-align:center;transition:border-color 0.15s}
.score-card:hover{border-color:var(--border)}
.score-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.score-value{font-size:2.5rem;font-weight:700;line-height:1}
.score-value.before{color:var(--text-secondary)}
.score-value.after{color:var(--success)}
.score-value.diff{color:var(--accent)}

.dimensions{display:grid;gap:12px}
.dimension{display:flex;flex-direction:column;gap:6px}
.dimension-header{display:flex;align-items:center;justify-content:space-between}
.dimension-name{font-size:0.85rem;font-weight:500}
.dimension-values{font-size:0.8rem;color:var(--text-secondary)}
.dimension-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.dimension-fill{height:100%;border-radius:3px;transition:width 0.4s ease}
.dimension-fill.before{background:var(--text-secondary);opacity:0.4}
.dimension-fill.after{background:var(--accent)}

/* Changes Panel */
.change-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px;border-left:3px solid var(--accent)}
.change-title{font-size:0.8rem;color:var(--accent);font-weight:600;margin-bottom:6px}
.change-desc{font-size:0.85rem;color:var(--text-secondary)}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:0.88rem;color:var(--text);opacity:0;transform:translateY(20px);transition:all 0.3s ease;pointer-events:none;z-index:1000}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-color:var(--success);color:var(--success)}
.toast.error{border-color:var(--error);color:var(--error)}

/* Theme Toggle */
.theme-toggle{cursor:pointer;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.92rem;display:flex;align-items:center;gap:6px;transition:all 0.15s}
.suibian-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.theme-toggle:hover{border-color:var(--accent)}

/* Video-only option */
.video-only{display:none}
body.video-mode .video-only{display:inline}

/* Header Actions */
.header-left-actions{display:flex;align-items:center;gap:4px;margin-left:8px}
.header-icon-btn{width:36px;height:36px;border:none;background:transparent;color:var(--text-secondary);font-size:1.1rem;cursor:pointer;border-radius:8px;transition:all 0.15s;display:flex;align-items:center;justify-content:center}
.header-icon-btn:hover{background:var(--surface-hover);color:var(--text)}
.header-actions{display:flex;align-items:center;gap:8px}
.suibian-toggle{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none}
.suibian-toggle:hover{background:linear-gradient(135deg,#5a6fd6,#6a4190)}
.suibian-toggle.active{box-shadow:0 0 0 3px rgba(102,126,234,0.4)}
.expand-toggle{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none}
.expand-toggle:hover{background:linear-gradient(135deg,#e07ce0,#e0455a)}
.expand-toggle.active{box-shadow:0 0 0 3px rgba(240,147,251,0.4)}

/* Loading Overlay */
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:1100;opacity:0;pointer-events:none;transition:opacity 0.3s;display:none;align-items:center;justify-content:center}
.loading-overlay.show{opacity:1;pointer-events:auto;display:flex}
.loading-content{text-align:center;color:#fff;padding:40px}
.loading-spinner{width:56px;height:56px;border:4px solid rgba(255,255,255,0.2);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 24px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:1.25rem;font-weight:600;margin-bottom:8px}
.loading-subtext{font-size:0.9rem;opacity:0.8;max-width:300px;margin:0 auto;line-height:1.5}

/* Task Progress Panel - 后台任务进度面板 */
.task-panel{position:fixed;bottom:20px;right:20px;width:360px;max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.2);z-index:1050;overflow:hidden;transition:transform 0.3s ease,opacity 0.3s ease}
.task-panel.collapsed{transform:translateY(calc(100% - 50px))}
.task-panel.hidden{opacity:0;pointer-events:none}
.task-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.task-panel-title{font-size:0.9rem;font-weight:600;display:flex;align-items:center;gap:8px}
.task-panel-title::before{content:"⏳";font-size:1rem}
.task-panel-title.completed::before{content:"✓";color:var(--success)}
.task-panel-actions{display:flex;gap:8px}
.task-panel-btn{width:28px;height:28px;border:none;background:var(--surface);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-secondary);transition:all 0.15s}
.task-panel-btn:hover{background:var(--surface-hover);color:var(--text)}
.task-panel-body{max-height:400px;overflow-y:auto;padding:12px}
.task-item{padding:12px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:var(--bg);transition:all 0.2s}
.task-item:last-child{margin-bottom:0}
.task-item:hover{border-color:var(--accent)}
.task-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.task-item-name{font-size:0.85rem;font-weight:500;color:var(--text);display:flex;align-items:center;gap:6px}
.task-item-status{font-size:0.75rem;padding:2px 8px;border-radius:12px;background:var(--surface);color:var(--text-secondary)}
.task-item-status.running{background:var(--accent);color:#fff}
.task-item-status.completed{background:var(--success);color:#fff}
.task-item-status.error{background:var(--error);color:#fff}
.task-item-status.cancelled{background:var(--text-secondary);color:#fff}
.task-progress{height:6px;background:var(--surface);border-radius:3px;overflow:hidden;margin-bottom:6px}
.task-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#818cf8);border-radius:3px;transition:width 0.3s ease;min-width:0}
.task-progress-bar.indeterminate{background:linear-gradient(90deg,var(--accent),#818cf8,#6366f1);background-size:200% 100%;animation:progressIndeterminate 1.5s ease-in-out infinite}
@keyframes progressIndeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}
.task-item-info{font-size:0.75rem;color:var(--text-secondary);display:flex;justify-content:space-between}
.task-item-actions{display:flex;gap:6px;margin-top:8px}
.task-item-btn{padding:4px 10px;font-size:0.75rem;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s}
.task-item-btn.cancel{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.task-item-btn.cancel:hover{border-color:var(--error);color:var(--error)}
.task-item-btn.retry{background:var(--accent);color:#fff}
.task-item-btn.retry:hover{opacity:0.85}
.task-item-btn.view{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.task-item-btn.view:hover{border-color:var(--accent);color:var(--accent)}
.task-empty{text-align:center;padding:24px;color:var(--text-secondary);font-size:0.85rem}
.task-empty::before{content:"📋";display:block;font-size:2rem;margin-bottom:8px;opacity:0.5}
.task-badge{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(99,102,241,0.4);z-index:1049;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:transform 0.2s,box-shadow 0.2s}
.task-badge:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(99,102,241,0.5)}
.task-badge.hidden{display:none}
.task-badge-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:var(--error);color:#fff;font-size:0.7rem;font-weight:600;border-radius:9px;display:flex;align-items:center;justify-content:center}

/* Settings Modal */
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:950;opacity:0;pointer-events:none;transition:opacity 0.25s}
.settings-overlay.show{opacity:1;pointer-events:auto}
.settings-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);width:520px;max-width:92vw;max-height:85vh;background:var(--surface);border:1px solid var(--border);border-radius:20px;z-index:960;opacity:0;pointer-events:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 24px 80px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.03);display:flex;flex-direction:column;overflow:hidden}
.settings-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}
.settings-title{font-size:1.05rem;font-weight:700;letter-spacing:-0.3px}
.settings-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px;gap:0;margin-top:16px}
.settings-tab{padding:10px 16px;font-size:0.82rem;color:var(--text-secondary);cursor:pointer;border:none;background:none;position:relative;transition:color 0.15s;font-weight:500;letter-spacing:0.2px}
.settings-tab:hover{color:var(--text)}
.settings-tab.active{color:var(--accent);font-weight:600}
.settings-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent);border-radius:1px}
.settings-tab-content{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.settings-tab-content.active{display:flex;flex-direction:column}

/* API 配置面板 */
.api-config{padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px}
.api-config-row{display:flex;gap:12px}
.api-config-field{display:flex;flex-direction:column;gap:6px}
.api-config-field-half{flex:1;min-width:0}
.api-config-field label{font-size:0.78rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.api-config-field select{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:0.88rem;outline:none;transition:border-color 0.15s;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b8b92' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.api-config-field select:focus{border-color:var(--accent)}
.api-config-field select option{padding:6px 8px}
.api-key-input-wrap{position:relative;display:flex;align-items:center}
.api-key-input-wrap input{width:100%;padding:10px 40px 10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:0.88rem;outline:none;transition:border-color 0.15s;font-family:'SF Mono',Monaco,Consolas,monospace;letter-spacing:0.3px}
.api-key-input-wrap input:focus{border-color:var(--accent)}
.api-key-toggle{position:absolute;right:8px;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color 0.15s}
.api-key-toggle:hover{color:var(--text)}
.api-config-status{font-size:0.82rem;min-height:20px;padding:0 2px;transition:all 0.2s}
.api-config-status.success{color:var(--success)}
.api-config-status.error{color:var(--error)}
.api-config-status.loading{color:var(--text-secondary)}
.api-config-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.api-config-actions .btn{padding:8px 20px;border-radius:10px;font-size:0.85rem;font-weight:500}
.settings-body{padding:0 24px 20px}
.settings-body .field{margin-bottom:16px}
.settings-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}
/* 主题选项 */
.theme-options{display:flex;flex-direction:column;gap:10px}
.theme-option{display:flex;align-items:center;gap:14px;padding:16px;border:2px solid var(--border);border-radius:12px;background:var(--bg);cursor:pointer;transition:all 0.2s;text-align:left;width:100%}
.theme-option:hover{border-color:var(--text-secondary)}
.theme-option.active{border-color:var(--accent);background:var(--surface)}
.theme-option-icon{font-size:1.5rem;width:36px;text-align:center;flex-shrink:0}
.theme-option-label{font-size:0.92rem;font-weight:600;color:var(--text);display:block}
.theme-option-desc{font-size:0.78rem;color:var(--text-secondary);display:block;margin-top:2px}

/* Dev Panel Overlay */
.dev-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:900;opacity:0;pointer-events:none;transition:opacity 0.25s}
.dev-overlay.show{opacity:1;pointer-events:auto}

/* Dev Panel */
.dev-panel{position:fixed;top:0;right:0;width:520px;max-width:90vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:910;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.dev-panel.show{transform:translateX(0)}

.dev-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.dev-panel-title{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}
.dev-panel-title::before{content:"⚙";font-size:1.1rem}
.dev-close{cursor:pointer;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1}
.dev-close:hover{background:var(--bg);color:var(--text)}

.dev-panel-body{flex:1;overflow-y:auto;padding:0}

/* Media Tabs in Dev Panel */
.dev-media-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px;background:var(--bg)}
.dev-media-tab{padding:14px 20px;font-size:0.85rem;color:var(--text-secondary);cursor:pointer;border:none;background:none;font-weight:500;position:relative;transition:color 0.15s}
.dev-media-tab:hover{color:var(--text)}
.dev-media-tab.active{color:var(--accent)}
.dev-media-tab.active::after{content:'';position:absolute;bottom:-1px;left:12px;right:12px;height:2px;background:var(--accent);border-radius:1px}

/* Strategy Cards */
.dev-strategies{padding:20px 24px}
.dev-strategy-group{margin-bottom:24px}
.dev-strategy-group:last-child{margin-bottom:0}
.dev-group-label{font-size:0.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px;padding-left:2px}
.dev-strategy-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;transition:border-color 0.15s}
.dev-strategy-card:last-child{margin-bottom:0}
.dev-strategy-card:hover{border-color:var(--accent)}
.dev-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dev-card-name{font-size:0.9rem;font-weight:600;color:var(--text)}
.dev-card-desc{font-size:0.75rem;color:var(--text-secondary);background:var(--surface);padding:2px 8px;border-radius:4px}
.dev-card-content{font-size:0.82rem;color:var(--text-secondary);line-height:1.7;white-space:pre-wrap}

/* Media Recognize */
.recognize-area{padding:20px 32px;border-bottom:1px solid var(--border)}
.recognize-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.recognize-title{font-size:0.9rem;font-weight:600;display:flex;align-items:center;gap:8px}
.recognize-title::before{content:"🔍";font-size:1rem}
.recognize-hint{font-size:0.75rem;color:var(--text-secondary)}
.recognize-inputs{display:flex;gap:10px;margin-bottom:12px}
.recognize-inputs input{flex:1}
.upload-btn{padding:10px 16px;background:var(--surface);border:1px dashed var(--border);border-radius:8px;color:var(--text-secondary);font-size:0.85rem;cursor:pointer;transition:all 0.15s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.upload-btn:hover{border-color:var(--accent);color:var(--accent)}
.upload-btn input{display:none}
.recognize-actions{display:flex;gap:10px;align-items:center}
.video-gen-options{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.video-gen-option{display:flex;align-items:center;gap:6px;white-space:nowrap}
.video-gen-label{font-size:0.82rem;color:var(--text-secondary);font-weight:500}
.video-gen-select{padding:6px 24px 6px 8px;font-size:0.82rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;appearance:none;background-image:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%2210%22 viewBox=%220 0 10 10%22><path fill=%22%238b8b92%22 d=%22M5 7L1 3h8z%22/></svg>');background-repeat:no-repeat;background-position:right 8px center}
.recognize-result{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;display:none;font-size:0.88rem;line-height:1.7;color:var(--text-secondary);white-space:pre-wrap;max-height:240px;overflow-y:auto}
.recognize-result.show{display:block;animation:fadeIn 0.2s ease}
.recognize-result-actions{display:flex;gap:8px;margin-top:10px}
.recognize-preview{margin-top:10px;max-width:200px;max-height:140px;border-radius:8px;object-fit:cover;display:none;border:1px solid var(--border)}
.recognize-preview.show{display:block}

/* History Panel */
.history-btn{cursor:pointer;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.85rem;display:flex;align-items:center;gap:6px;transition:all 0.15s}
.history-btn:hover{border-color:var(--accent)}
.history-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:950;opacity:0;pointer-events:none;transition:opacity 0.25s}
.history-overlay.show{opacity:1;pointer-events:auto}
.history-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);width:600px;max-width:90vw;max-height:80vh;background:var(--surface);border:1px solid var(--border);border-radius:16px;z-index:960;opacity:0;pointer-events:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 20px 60px rgba(0,0,0,0.3);display:flex;flex-direction:column}
.history-panel.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.history-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.history-title{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}
.history-title::before{content:"📜";font-size:1rem}
.history-close{cursor:pointer;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:1.1rem;display:flex;align-items:center;transition:all 0.15s;line-height:1}
.history-close:hover{border-color:var(--error);color:var(--error)}
.history-body{flex:1;overflow-y:auto;padding:12px 16px}
.history-empty{text-align:center;padding:40px 20px;color:var(--text-secondary);font-size:0.9rem}
.history-empty::before{content:"📭";display:block;font-size:2.5rem;margin-bottom:12px;opacity:0.6}
.history-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;transition:border-color 0.15s;cursor:pointer}
.history-item:hover{border-color:var(--accent)}
.history-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.history-item-time{font-size:0.72rem;color:var(--text-secondary)}
.history-item-score{display:flex;align-items:center;gap:8px;font-size:0.75rem}
.history-item-score .before{color:var(--text-secondary)}
.history-item-score .after{color:var(--success);font-weight:600}
.history-item-score .diff{color:var(--accent)}
.history-item-input{font-size:0.82rem;color:var(--text-secondary);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.history-item-result{font-size:0.85rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.history-item-actions{display:flex;gap:6px;margin-top:10px}
.history-item-actions button{padding:5px 10px;font-size:0.75rem;border-radius:6px;cursor:pointer;transition:all 0.15s}
.history-item-actions .btn-use{display:none}
.history-item-actions .btn-copy{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.history-item-actions .btn-copy:hover{border-color:var(--accent);color:var(--accent)}
.history-item-actions .btn-delete{background:transparent;color:var(--error);border:1px solid var(--border)}
.history-item-actions .btn-delete:hover{background:var(--error);color:#fff;border-color:var(--error)}
.history-item-detail{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.history-item-detail.show{display:block;animation:fadeIn 0.2s ease}
.history-detail-label{font-size:0.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;margin-top:8px}
.history-detail-label:first-child{margin-top:0}
.history-detail-content{font-size:0.82rem;color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;background:var(--bg);padding:10px;border-radius:8px;max-height:200px;overflow-y:auto}
.history-footer{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.history-clear{padding:8px 16px;font-size:0.82rem;border-radius:8px;cursor:pointer;background:transparent;color:var(--error);border:1px solid var(--border);transition:all 0.15s}
.history-clear:hover{background:var(--error);color:#fff;border-color:var(--error)}

@media(max-width:600px){
.history-panel{width:100%;max-width:100%;max-height:90vh;border-radius:16px 16px 0 0;top:auto;bottom:0;transform:translate(-50%,100%)}
.history-panel.show{transform:translate(-50%,0)}
.history-item{padding:12px}
.history-item-actions{flex-wrap:wrap}
}

/* ========== 平板适配 (600px - 900px) ========== */
@media(max-width:900px) and (min-width:601px){
  .score-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .score-card{padding:18px 12px}
  .score-value{font-size:2rem}
  .recognize-inputs{flex-wrap:wrap}
  .recognize-inputs input{min-width:0;flex:1 1 200px}
  .output-actions{flex-direction:column;align-items:flex-start;gap:10px}
  .actions{flex-wrap:wrap}
  .hint{width:100%;text-align:right}
}

/* ========== 安卓手机适配 (≤600px) ========== */
@media(max-width:600px){
  /* Header */
  header{height:48px;padding:0 12px}
  .brand{font-size:1.05rem;gap:6px}
  .brand::before{font-size:1.15rem}
  .hamburger-btn{width:36px;height:36px;font-size:1.3rem}
  .header-left-actions{gap:2px;margin-left:4px}
  .header-icon-btn{width:32px;height:32px;font-size:0.95rem}
  .sidebar-nav{top:48px}
  .mobile-menu-overlay{top:48px}
  .nav-btn{padding:7px 10px;font-size:0.78rem;gap:5px}
  .nav-divider{width:1px;height:20px;margin:0 3px}

  /* Sidebar - 移动端不限制高度，不单独滚动 */
  .sidebar{max-height:none;overflow-y:visible}
  .panel{padding:14px}
  .panel-title{font-size:0.7rem;margin-bottom:12px}
  .field{margin-bottom:10px}
  label{font-size:0.75rem;margin-bottom:4px}
  select,input[type="password"],input[type="text"]{padding:8px 10px;font-size:0.85rem;border-radius:6px}
  .checkbox{padding:6px 0;gap:8px}
  .checkbox input{width:16px;height:16px}
  .checkbox-text{font-size:0.82rem}
  .checkbox-desc{font-size:0.7rem}

  /* Recognize Area */
  .recognize-area{padding:12px 14px}
  .recognize-header{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:10px}
  .recognize-title{font-size:0.82rem}
  .recognize-hint{font-size:0.7rem}
  .recognize-inputs{flex-direction:column;gap:8px}
  .recognize-inputs input{width:100%}
  .upload-btn{justify-content:center;padding:8px 12px;font-size:0.8rem}
  .recognize-actions{flex-wrap:wrap;gap:8px}
  .video-gen-options{flex-wrap:wrap;gap:8px;width:100%}
  .video-gen-option{flex:1 1 auto;min-width:80px}
  .video-gen-select{width:100%;min-width:0}
  .recognize-preview{max-width:100%;max-height:180px}

  /* Input Area */
  .input-area{padding:12px 14px}
  .quick-tags{gap:6px;margin-bottom:12px}
  .tag{padding:5px 10px;font-size:0.75rem;border-radius:16px}
  textarea{min-height:100px;padding:12px;font-size:0.88rem;border-radius:10px}
  .key-row{flex-direction:column;gap:6px}
  .key-row input{width:100%}
  .verify-btn{width:100%;text-align:center;padding:10px}
  .actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
  .action-btns{justify-content:stretch}
  .action-btns .btn{flex:1;justify-content:center;padding:10px 12px;font-size:0.82rem}
  .hint{text-align:center;font-size:0.7rem}

  /* Result Area */
  .result-area{padding:12px 14px}
  .result-header{gap:16px;margin-bottom:14px;flex-wrap:wrap}
  .result-tab{font-size:0.85rem;padding:6px 2px}
  .output-box{padding:14px;min-height:150px;max-height:400px;font-size:0.85rem;border-radius:10px}
  .output-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
  .output-meta{text-align:center}
  .output-actions .action-btns{justify-content:center}

  /* Score Grid */
  .score-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
  .score-card{padding:14px 8px;border-radius:10px}
  .score-label{font-size:0.65rem;margin-bottom:6px}
  .score-value{font-size:1.6rem}
  .dimension-name{font-size:0.8rem}
  .dimension-values{font-size:0.72rem}

  /* Changes Panel */
  .change-item{padding:12px;margin-bottom:8px;border-radius:8px}
  .change-title{font-size:0.75rem}
  .change-desc{font-size:0.8rem}

  /* Settings Modal */
  .settings-modal{width:100%;max-width:100%;border-radius:16px 16px 0 0;top:auto;bottom:0;transform:translate(-50%,100%)}
  .settings-modal.show{transform:translate(-50%,0)}
  .settings-header{padding:16px 18px 12px}
  .settings-title{font-size:0.92rem}
  .settings-body{padding:0 18px 16px}
  .settings-footer{padding:12px 18px}

  /* Dev Panel */
  .dev-panel{width:100vw;max-width:100vw}
  .dev-panel-header{padding:16px 18px}
  .dev-media-tabs{padding:0 12px}
  .dev-media-tab{padding:12px 14px;font-size:0.8rem}
  .dev-strategies{padding:14px 16px}
  .dev-strategy-card{padding:12px;margin-bottom:8px}
  .dev-card-name{font-size:0.85rem}
  .dev-card-desc{font-size:0.7rem}
  .dev-card-content{font-size:0.78rem}

  /* Toast */
  .toast{bottom:16px;right:12px;left:12px;text-align:center;font-size:0.82rem;padding:10px 16px;border-radius:8px}

  /* Loading Overlay */
  .loading-text{font-size:1.1rem}
  .loading-subtext{font-size:0.82rem;max-width:260px}

  /* Task Panel - 移动端调整位置避免遮挡底部按钮 */
  .task-panel{bottom:80px;right:12px;width:calc(100vw - 24px);max-width:none;z-index:900}
  .task-badge{bottom:80px;right:12px;z-index:899}
  /* 移动端收起后变为悬浮球 */
  .task-panel.collapsed{transform:none;width:52px;height:52px;border-radius:50%;bottom:80px;right:12px;padding:0;background:var(--accent);border:none;box-shadow:0 4px 16px rgba(99,102,241,0.4);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;transition:box-shadow 0.2s}
  .task-panel.collapsed .task-panel-header{padding:0;border:none;justify-content:center;align-items:center;width:100%;height:100%}
  .task-panel.collapsed .task-panel-title{display:none}
  .task-panel.collapsed .task-panel-actions{display:none}
  .task-panel.collapsed .task-panel-body{display:none}
  .task-panel.collapsed::before{content:"⏳";font-size:1.4rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;z-index:1;pointer-events:none}
  .task-panel.collapsed.dragging{box-shadow:0 6px 24px rgba(99,102,241,0.5);opacity:0.9}
}

/* ========== 超小屏适配 (≤380px) ========== */
@media(max-width:380px){
  header{height:44px;padding:0 8px}
  .brand{font-size:0.95rem}
  .header-left-actions{gap:1px;margin-left:2px}
  .header-icon-btn{width:28px;height:28px;font-size:0.85rem}
  .theme-toggle{padding:5px 8px;font-size:0.78rem}
  .score-grid{gap:6px}
  .score-card{padding:10px 6px}
  .score-value{font-size:1.3rem}
  .score-label{font-size:0.6rem}
  .tag{padding:4px 8px;font-size:0.7rem}
  .inspiration-typing span{width:5px;height:5px}
  .inspiration-typing-label{font-size:0.8rem}
}

/* ========== 移动端适配 - 整页竖排滚动 (≤900px) ========== */
@media(max-width:900px){
html,body{height:auto;min-height:100%}
body{overflow-y:auto;-webkit-overflow-scrolling:touch}
main{flex-direction:column;overflow:visible!important;height:auto;display:block}
.content{overflow:visible;height:auto;flex:none;width:100%;min-height:300px}
.sidebar{width:100%!important;min-width:0!important;border-right:none;border-bottom:1px solid var(--border);max-height:none;flex:none;overflow-y:visible}
.result-area{padding:16px 20px;max-height:none;flex:none;height:auto;overflow:visible}
.input-area{padding:16px 20px}
.recognize-area{padding:16px 20px}
/* 移动端content-config垂直堆叠 */
.content-config{flex-direction:column;gap:0}
.content-config .panel{border-right:none;border-bottom:1px solid var(--border);min-width:0;padding:14px 20px}
.content-config .panel:last-child{border-bottom:none}
/* 移动端使用细滚动条 */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{border:1px solid var(--surface)}

  .hamburger-btn{display:flex;align-items:center;justify-content:center}
  header{gap:8px}

  /* 移动端sidebar-nav默认隐藏，通过汉堡菜单控制 */
  .sidebar-nav{
    display:none!important;
    position:fixed;
    top:56px;
    left:12px;
    right:auto;
    bottom:12px;
    width:min(320px,78vw);
    max-width:calc(100vw - 56px);
    z-index:1000;
    background:var(--surface);
    background:color-mix(in srgb,var(--surface) 96%,transparent);
    flex-direction:column;
    overflow-y:auto;
    padding:10px;
    gap:3px;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,0.22);
    backdrop-filter:blur(16px);
    animation:slideInMenu 0.22s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar-nav.open{display:flex!important}
  .sidebar-nav .nav-btn{
    width:100%;
    min-height:38px;
    white-space:nowrap;
    padding:9px 11px;
    font-size:0.82rem;
    line-height:1.2;
    gap:7px;
    border-radius:12px;
    background:transparent;
    color:var(--text-secondary);
    justify-content:flex-start;
  }
  .sidebar-nav .nav-btn:hover{background:var(--surface-hover);color:var(--text)}
  .sidebar-nav .nav-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;box-shadow:0 6px 14px rgba(99,102,241,0.22)}
  .sidebar-nav .nav-btn.nav-tool.active{background:rgba(99,102,241,0.1);color:var(--accent);border:1px solid rgba(99,102,241,0.35);box-shadow:none}
  .sidebar-nav .nav-btn-accent{box-shadow:0 6px 16px rgba(245,158,11,0.18)}
  .sidebar-nav .nav-divider{width:100%;height:1px;margin:6px 0;background:var(--border)}

  /* 移动端菜单遮罩 */
  .mobile-menu-overlay{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:rgba(0,0,0,0.34);z-index:999;backdrop-filter:blur(2px)}
  .mobile-menu-overlay.open{display:block}

  @keyframes slideInMenu{
    from{transform:translateX(-16px);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
}

@media(max-width:600px){
  .sidebar-nav{top:56px;width:min(300px,80vw);max-width:calc(100vw - 48px);bottom:12px}
  .mobile-menu-overlay{top:48px}
  .sidebar-nav .nav-btn{min-height:36px;padding:8px 10px;font-size:0.8rem}
}

/* 移动端功能页 UI 优化 */
@media(max-width:600px){
  body{background:var(--bg)}
  main{background:var(--bg)}
  .content{padding:8px 0 18px}

  .content-config{
    margin:8px 12px 0;
    gap:10px;
    border-bottom:none;
    background:transparent;
  }
  .content-config .panel{
    padding:14px!important;
    border:1px solid var(--border)!important;
    border-radius:16px;
    background:var(--surface);
    box-shadow:0 8px 24px rgba(15,23,42,0.06);
  }
  .content-config .panel-title{
    margin-bottom:10px;
    font-size:0.72rem;
    letter-spacing:0.8px;
  }
  .content-config select,
  .content-config input[type="text"],
  .content-config input[type="password"]{
    min-height:42px;
    border-radius:12px;
    background:var(--bg);
  }

  .checkbox{
    padding:10px 11px;
    margin-bottom:8px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--bg);
    gap:9px;
  }
  .checkbox:last-child{margin-bottom:0}
  .checkbox-text{font-size:0.82rem;font-weight:600}
  .checkbox-desc{font-size:0.68rem;color:var(--text-muted)}

  .input-area,
  .recognize-area{
    margin:8px 10px 12px;
    padding:12px!important;
    border:1px solid var(--border);
    border-radius:17px;
    background:var(--surface);
    box-shadow:0 8px 22px rgba(15,23,42,0.06);
  }
  .input-area textarea,
  .recognize-area textarea,
  .recognize-area input[type="text"]{
    width:100%!important;
    border-radius:14px!important;
    background:var(--bg)!important;
    border:1px solid var(--border)!important;
    font-size:0.88rem!important;
  }
  .input-area textarea{min-height:140px}
  .recognize-area textarea{min-height:96px!important}

  .recognize-header{
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:4px 8px;
    margin-bottom:9px;
  }
  .recognize-title{
    order:1;
    flex:1 1 auto;
    width:auto;
    font-size:0.92rem;
    font-weight:750;
    letter-spacing:-0.2px;
    min-height:30px;
    align-items:center;
  }
  #imageGenArea .recognize-title::before,
  #videoGenArea .recognize-title::before{content:none}
  .recognize-header .recognize-hint{
    order:3;
    flex:0 0 100%;
    line-height:1.45;
    font-size:0.72rem;
    color:var(--text-muted);
  }
  .recognize-header .btn{
    order:2;
    margin-left:auto!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    font-size:0.72rem!important;
    min-height:30px;
    white-space:nowrap;
  }
  .recognize-inputs{
    flex-direction:column;
    gap:8px;
    margin-bottom:10px;
  }
  .upload-btn{
    justify-content:center;
    min-height:39px;
    border-radius:13px;
    background:var(--bg);
    font-size:0.8rem;
  }
  .recognize-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .recognize-actions > .btn,
  .recognize-actions > button,
  .action-btns .btn{
    min-height:40px;
    justify-content:center;
    border-radius:13px;
  }
  .recognize-actions > div[style*="display:flex"]{
    width:100%;
    flex-wrap:wrap!important;
    gap:7px!important;
  }
  .recognize-actions > div[style*="display:flex"] > div{
    flex:1 1 calc(50% - 4px);
    min-width:130px;
    padding:8px 9px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--bg);
    justify-content:space-between;
  }
  .recognize-actions > div[style*="display:flex"] > .btn,
  .recognize-actions > div[style*="display:flex"] > button{
    flex:1 1 0;
    min-height:40px;
    justify-content:center;
    border-radius:13px;
  }
  .recognize-actions select,
  .video-gen-select{
    width:100%!important;
    min-height:36px;
    border-radius:11px!important;
    background-color:var(--surface)!important;
    font-size:0.78rem!important;
  }
  .video-gen-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:100%;
  }
  .video-gen-option{
    width:100%;
    min-width:0;
    padding:8px 9px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }
  .video-gen-option:last-child:nth-child(odd){grid-column:1/-1}
  .video-gen-label{font-size:0.76rem}

  #artStyleBtn{
    width:100%;
    justify-content:center;
    min-height:39px;
    border-radius:13px!important;
    font-size:0.8rem!important;
  }
  #imageGenBtn,
  #videoGenBtn,
  #recognizeBtn{
    width:100%;
    min-height:42px;
    justify-content:center;
  }
  #clearImageGenChatBtn{
    margin-left:0!important;
    width:100%;
    justify-content:center;
  }
  #imageGenChatHistory{
    max-height:180px!important;
    border-radius:14px!important;
    background:var(--bg)!important;
    margin-bottom:9px!important;
  }
  #videoRefImgsContainer{
    min-height:72px!important;
    padding:10px!important;
    border-radius:14px!important;
    background:var(--bg)!important;
  }
  #videoRefUploadBtn{
    width:100%;
    justify-content:center;
    border-radius:13px!important;
  }
  #videoRefUploadHint{display:block;width:100%;text-align:center;margin-top:2px}
  #imageGenResult,
  #videoGenResult{
    margin-top:10px!important;
    padding:12px!important;
  }
  #imageGenResult > div:last-child,
  #videoGenResult > div:last-child{
    gap:7px!important;
    margin-top:10px!important;
  }
  #imageGenResult .btn,
  #videoGenResult .btn{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
    min-height:38px;
    border-radius:12px;
    font-size:0.78rem;
  }

  .actions{
    gap:9px;
    margin-top:12px;
  }
  .action-btns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .action-btns .btn{
    width:100%;
    padding:10px 8px;
    font-size:0.82rem;
  }
  .hint{
    padding:6px 0 0;
    color:var(--text-muted);
  }

  .output-box,
  .recognize-result{
    border-radius:16px;
    background:var(--surface);
    border-color:var(--border);
  }
  .recognize-result{
    max-height:320px;
    padding:13px;
    font-size:0.84rem;
  }
  .recognize-result-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .recognize-result-actions .btn{
    justify-content:center;
    border-radius:12px;
  }

  .settings-modal,
  .history-panel{
    width:calc(100% - 24px)!important;
    max-width:420px!important;
    left:50%;
    bottom:12px!important;
    border-radius:20px!important;
    border:1px solid var(--border);
    box-shadow:0 18px 50px rgba(0,0,0,0.24);
  }
  .settings-modal{
    max-height:88vh;
    transform:translate(-50%,calc(100% + 24px));
  }
  .settings-modal.show{transform:translate(-50%,0)}
  .settings-header,
  .history-header{
    padding:16px 18px 12px!important;
  }
  .settings-title,
  .history-title{
    font-size:0.98rem;
  }
  .settings-tabs{
    padding:0 10px;
    overflow-x:auto;
    gap:4px;
  }
  .settings-tab{
    flex:0 0 auto;
    padding:10px 12px;
    font-size:0.78rem;
  }
  .api-config{
    padding:14px 18px 18px!important;
    gap:13px;
  }
  .api-config-row{
    flex-direction:column;
    gap:12px;
  }
  .api-config-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .api-config-actions .btn{
    width:100%;
    justify-content:center;
    padding:10px 8px;
  }
  .theme-option{
    padding:13px;
    border-width:1px;
    border-radius:14px;
  }

  #templateModal > div[style*="padding:20px"],
  #artStyleModal > div[style*="padding:20px"]{
    padding:14px!important;
  }
  #templateCategories{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
  }
  .template-cat-btn{
    width:100%;
    padding:9px 8px;
    border-radius:12px;
    font-size:0.78rem;
  }
  .template-item{
    padding:12px;
    border-radius:14px;
    border-width:1px;
    background:var(--surface);
  }
  #templateList{max-height:50vh!important}
  #artStyleOptions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
  }
  .art-style-option{
    min-width:0;
    padding:10px 8px;
    border-width:1px;
    border-radius:13px;
  }

  .history-panel{
    top:auto!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
    max-height:calc(100dvh - 96px);
    transform:translate(-50%,calc(100% + 24px));
  }
  .history-panel.show{transform:translate(-50%,0)}
  .history-tabs{
    display:flex!important;
    padding:0 10px!important;
    overflow-x:auto;
    gap:4px;
    flex-shrink:0;
    min-height:42px;
    background:var(--surface);
    border-bottom:1px solid var(--border)!important;
    position:relative;
    z-index:2;
  }
  .history-tab{
    display:flex!important;
    align-items:center;
    justify-content:center;
    flex:1 0 auto;
    padding:10px 8px!important;
    font-size:0.78rem!important;
    white-space:nowrap;
    min-height:42px;
  }
  .history-body{
    padding:12px!important;
    max-height:calc(100dvh - 230px);
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .history-item{
    border-radius:14px;
    background:var(--surface);
    padding:11px!important;
  }
  .history-item-header{
    align-items:flex-start;
    gap:8px;
  }
  .history-item-score{
    flex-wrap:wrap;
    justify-content:flex-end;
    row-gap:2px;
  }
  .history-detail-content{
    max-height:150px;
    font-size:0.8rem;
  }
  .history-item > div[style*="display:flex"][style*="gap:12px"]{
    flex-direction:column;
    gap:9px!important;
  }
  .history-item img,
  .history-item video{
    width:100%!important;
    height:auto!important;
    max-height:190px;
    border-radius:12px!important;
  }
  .history-item-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .history-item-actions button{
    width:100%;
    padding:7px 6px;
    border-radius:10px;
    font-size:0.72rem;
  }
  .history-footer{padding:12px!important}
  .history-header,
  .history-footer{
    flex-shrink:0;
  }
  .history-clear{
    width:100%;
    border-radius:12px;
    padding:10px;
  }
}

/* 升级提示弹窗 */
.upgrade-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(4px)}
.upgrade-modal-overlay.show{opacity:1;pointer-events:auto}
.upgrade-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);width:460px;max-width:90vw;background:var(--surface);border:1px solid var(--border);border-radius:24px;z-index:10000;opacity:0;pointer-events:none;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:0 32px 80px rgba(0,0,0,0.3);overflow:hidden}
.upgrade-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
@keyframes modalIconIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
.upgrade-modal-banner{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a78bfa 100%);padding:36px 28px 28px;text-align:center;position:relative;overflow:hidden}
.upgrade-modal-banner::before{content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:rgba(255,255,255,0.08);border-radius:50%}
.upgrade-modal-banner::after{content:'';position:absolute;bottom:-40%;left:-20%;width:160px;height:160px;background:rgba(255,255,255,0.06);border-radius:50%}
.upgrade-modal-icon{font-size:3rem;margin-bottom:12px;display:block;animation:modalIconIn 0.5s ease;position:relative;z-index:1}
.upgrade-modal-title{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-0.5px;position:relative;z-index:1}
.upgrade-modal-subtitle{font-size:0.88rem;color:rgba(255,255,255,0.8);position:relative;z-index:1}
.upgrade-modal-body{font-size:0.88rem;color:var(--text-secondary);line-height:1.8;padding:20px 24px 4px;text-align:left}
.upgrade-modal-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 24px 16px}
.upgrade-modal-feature{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg);border-radius:12px;border:1px solid var(--border);transition:all 0.2s}
.upgrade-modal-feature:hover{border-color:var(--accent);background:var(--surface-hover)}
.upgrade-modal-feature-icon{font-size:1.3rem;flex-shrink:0}
.upgrade-modal-feature-text{font-size:0.82rem;color:var(--text);font-weight:500;line-height:1.4}
.upgrade-modal-tip{font-size:0.78rem;color:var(--text-muted);text-align:center;padding:0 24px 4px}
.upgrade-modal-actions{display:flex;gap:10px;justify-content:center;padding:16px 24px 24px;border-top:1px solid var(--border)}
.upgrade-modal-actions .btn{min-width:140px;padding:11px 22px;font-size:0.9rem;border-radius:12px;font-weight:600;justify-content:center;text-align:center}

/* 升级弹窗移动端适配 */
@media(max-width:600px){
  .upgrade-modal{width:calc(100% - 24px);max-width:420px;border-radius:20px;top:auto;bottom:12px;left:50%;right:auto;transform:translate(-50%,calc(100% + 24px));max-height:min(88vh,640px);overflow:hidden;display:flex;flex-direction:column}
  .upgrade-modal.show{transform:translate(-50%,0)}
  .upgrade-modal-banner{padding:22px 18px 18px}
  .upgrade-modal-icon{font-size:2.1rem;margin-bottom:8px}
  .upgrade-modal-title{font-size:1.05rem}
  .upgrade-modal-subtitle{font-size:0.78rem}
  .upgrade-modal-body{padding:14px 18px 2px;font-size:0.82rem;line-height:1.6;text-align:center}
  .upgrade-modal-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 18px 12px}
  .upgrade-modal-feature{padding:10px 8px;gap:6px;justify-content:center;min-height:54px}
  .upgrade-modal-feature-icon{font-size:1.15rem}
  .upgrade-modal-feature-text{font-size:0.76rem;line-height:1.25}
  .upgrade-modal-tip{padding:0 18px 4px;font-size:0.72rem}
  .upgrade-modal-actions{flex-direction:row;gap:8px;padding:12px 18px 18px;flex-shrink:0}
  .upgrade-modal-actions .btn{flex:1;min-width:0;width:auto;justify-content:center;padding:11px 8px;font-size:0.82rem;white-space:nowrap}
}

/* ========== 灵感对话模式 ========== */
.inspiration-overlay{position:fixed;inset:0;background:var(--bg);z-index:8000;display:none;flex-direction:column}
.inspiration-overlay.show{display:flex;opacity:1;pointer-events:auto}
.inspiration-container{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:860px;width:100%;margin:0 auto}
.inspiration-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.inspiration-title{font-size:1.1rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.inspiration-header-actions{display:flex;gap:8px}
.inspiration-btn{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:0.85rem;color:var(--text-secondary);transition:all 0.2s}
.inspiration-btn:hover{background:var(--border);color:var(--text)}
.inspiration-messages{flex:1;overflow-y:auto;padding:32px 24px;display:flex;flex-direction:column;gap:20px;scroll-behavior:smooth}
.inspiration-messages::-webkit-scrollbar{width:6px}
.inspiration-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.inspiration-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;gap:16px}
.inspiration-welcome-icon{font-size:4rem;animation:inspirationPulse 2s ease-in-out infinite}
@keyframes inspirationPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.inspiration-welcome-title{font-size:1.4rem;font-weight:700;color:var(--text)}
.inspiration-welcome-desc{font-size:0.95rem;color:var(--text-secondary);max-width:400px;line-height:1.6}
.inspiration-type-selector{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.inspiration-type-btn{background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:14px 28px;cursor:pointer;font-size:1rem;color:var(--text);transition:all 0.25s;display:flex;align-items:center;gap:8px}
.inspiration-type-btn:hover{border-color:var(--accent);background:var(--accent-bg);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.inspiration-type-btn.selected{border-color:var(--accent);background:var(--accent-bg)}
.inspiration-msg{display:flex;gap:12px;max-width:85%;animation:inspirationMsgIn 0.3s ease}
@keyframes inspirationMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.inspiration-msg.ai{align-self:flex-start}
.inspiration-msg.user{align-self:flex-end;flex-direction:row-reverse}
.inspiration-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.inspiration-msg.ai .inspiration-avatar{background:var(--inspiration-gradient);color:#fff}
.inspiration-msg.user .inspiration-avatar{background:var(--border);color:var(--text-secondary)}
.inspiration-bubble{padding:14px 18px;border-radius:16px;line-height:1.7;font-size:0.92rem;word-break:break-word;min-height:44px}
.inspiration-msg.ai .inspiration-bubble{background:var(--surface);border:1px solid var(--border);color:var(--text);border-top-left-radius:4px}
.inspiration-msg.user .inspiration-bubble{background:var(--inspiration-gradient);color:#fff;border-top-right-radius:4px}
.inspiration-bubble .wizard-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.inspiration-bubble .wizard-option{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 16px;cursor:pointer;font-size:0.85rem;color:var(--text);transition:all 0.2s}
.inspiration-bubble .wizard-option:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.inspiration-bubble .wizard-option.selected{border-color:var(--accent);background:var(--accent);color:#fff}
.inspiration-bubble .wizard-skip-row{margin-top:10px;text-align:right}
.inspiration-bubble .wizard-skip-btn{background:none;border:none;color:var(--text-secondary);font-size:0.82rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.2s}
.inspiration-bubble .wizard-skip-btn:hover{color:var(--inspiration-primary);background:var(--bg)}
.inspiration-result{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin-top:8px;width:85%;align-self:center;animation:inspirationMsgIn 0.3s ease}
.inspiration-result-title{font-weight:700;color:var(--inspiration-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px;font-size:1rem}
.inspiration-result-prompt{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;font-size:0.9rem;line-height:1.8;color:var(--text);margin-bottom:16px;white-space:pre-wrap;word-break:break-word}
.inspiration-result-desc{font-size:0.9rem;line-height:1.8;color:var(--text-secondary);margin-bottom:16px}
.inspiration-result-desc strong{color:var(--text)}
.inspiration-result-actions{display:flex;gap:10px;flex-wrap:wrap}
.inspiration-result-actions .btn{font-size:0.85rem;padding:8px 18px}
.inspiration-input-area{padding:20px 24px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.inspiration-input-wrap{display:flex;gap:10px;align-items:flex-end;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:10px 14px;transition:border-color 0.2s}
.inspiration-input-wrap:focus-within{border-color:var(--accent)}
.inspiration-input-wrap textarea{flex:1;background:none;border:none;outline:none;resize:none;font-size:0.92rem;line-height:1.5;color:var(--text);font-family:inherit;max-height:120px;min-height:24px}
.inspiration-input-wrap textarea::placeholder{color:var(--text-muted)}
.inspiration-send-btn{background:var(--inspiration-gradient);color:#fff;border:none;border-radius:10px;padding:8px 18px;cursor:pointer;font-size:0.88rem;font-weight:600;transition:all 0.2s;white-space:nowrap;flex-shrink:0}
.inspiration-send-btn:hover{opacity:0.9;transform:scale(1.02)}
.inspiration-send-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.inspiration-input-hints{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:0.78rem;color:var(--text-muted)}
.inspiration-round-count{background:var(--bg);padding:2px 8px;border-radius:4px}
.inspiration-typing{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;padding:4px 0;line-height:1.7}
.inspiration-typing span{width:7px;height:7px;background:var(--inspiration-primary);border-radius:50%;animation:inspirationTyping 1.2s ease-in-out infinite;flex-shrink:0}
.inspiration-typing span:nth-child(2){animation-delay:0.2s}
.inspiration-typing span:nth-child(3){animation-delay:0.4s}
.inspiration-typing-label{font-size:0.92rem;color:var(--text-secondary);animation:inspirationPulse 2s ease-in-out;white-space:nowrap}
@keyframes inspirationTyping{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-8px);opacity:1}}
@keyframes inspirationPulse{0%,100%{opacity:0.5}50%{opacity:1}}
.nav-btn-accent{background:var(--inspiration-gradient)!important;color:#fff!important;border:none!important;position:relative;overflow:hidden}
.nav-btn-accent:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,158,11,0.3)}

/* 灵感对话移动端适配 */
@media(max-width:600px){
  .inspiration-container{height:100vh;height:100dvh;max-height:100dvh}
  .inspiration-header{padding:12px 16px}
  .inspiration-title{font-size:1rem}
  .inspiration-btn{padding:6px 10px;font-size:0.8rem}
  .inspiration-messages{padding:16px;gap:12px}
  .inspiration-welcome{padding:32px 16px;gap:10px}
  .inspiration-welcome-icon{font-size:2.8rem}
  .inspiration-welcome-title{font-size:1.15rem}
  .inspiration-welcome-desc{font-size:0.84rem}
  .inspiration-type-selector{gap:8px}
  .inspiration-type-btn{padding:10px 18px;font-size:0.88rem;border-radius:10px}
  .inspiration-msg{max-width:92%;gap:8px}
  .inspiration-avatar{width:32px;height:32px;font-size:0.95rem}
  .inspiration-bubble{padding:10px 14px;font-size:0.85rem;border-radius:12px;min-height:36px}
  .inspiration-bubble .wizard-options{gap:6px;margin-top:8px}
  .inspiration-bubble .wizard-option{padding:8px 14px;font-size:0.82rem}
  .inspiration-typing{gap:4px;padding:2px 0}
  .inspiration-typing span{width:6px;height:6px}
  .inspiration-typing-label{font-size:0.85rem}
  .inspiration-result{width:92%;padding:16px;border-radius:12px}
  .inspiration-result-prompt{padding:12px;font-size:0.82rem}
  .inspiration-result-desc{font-size:0.82rem}
  .inspiration-result-actions{gap:8px}
  .inspiration-result-actions .btn{padding:8px 14px;font-size:0.8rem}
  .inspiration-input-area{padding:12px 16px}
  .inspiration-input-wrap{padding:8px 12px;border-radius:12px}
  .inspiration-input-wrap textarea{font-size:0.88rem;min-height:20px}
  .inspiration-send-btn{padding:8px 14px;font-size:0.84rem}
  .inspiration-input-hints{font-size:0.72rem;margin-top:6px}
}


/* 现代轻量 SVG 图标系统 - Generated by Trae Work */
.ui-icon{width:1.08em;height:1.08em;display:inline-block;vertical-align:-0.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ui-icon-lg{width:1.28em;height:1.28em}
.nav-btn .ui-icon{width:1.15em;height:1.15em}
.header-icon-btn .ui-icon{width:1.15rem;height:1.15rem}
.upgrade-modal-feature-icon{display:inline-flex;align-items:center;justify-content:center}
.upgrade-modal-feature-icon .ui-icon{width:1.28rem;height:1.28rem}
.inspiration-welcome-icon{color:var(--inspiration-primary);line-height:1}
.inspiration-welcome-icon .ui-icon{width:4rem;height:4rem;filter:drop-shadow(0 8px 18px rgba(245,158,11,0.24))}
.task-panel-title::before,.task-empty::before{display:none!important}
.task-panel-title .ui-icon{color:var(--accent)}



/* 图标立体感增强：彩色渐变底座 + 柔光阴影 */
.ui-icon{
  width:1.62em;
  height:1.62em;
  vertical-align:-0.46em;
  overflow:visible;
  stroke:none;
  filter:drop-shadow(0 6px 12px rgba(99,102,241,0.18));
}
.nav-btn .ui-icon{width:1.5em;height:1.5em;margin-right:1px;vertical-align:-0.42em}
.btn .ui-icon{width:1.45em;height:1.45em;vertical-align:-0.4em}
.result-tab .ui-icon,.settings-tab .ui-icon,.inspiration-type-btn .ui-icon{width:1.42em;height:1.42em;vertical-align:-0.38em}
.header-icon-btn .ui-icon{width:1.72rem;height:1.72rem}
.upgrade-modal-feature-icon .ui-icon{width:1.78rem;height:1.78rem}
.upgrade-modal-icon .ui-icon{width:2.2rem;height:2.2rem}
.inspiration-welcome-icon .ui-icon{width:4.8rem;height:4.8rem;filter:drop-shadow(0 12px 28px rgba(245,158,11,0.28))}
.recognize-title .ui-icon{width:1.55em;height:1.55em;vertical-align:-0.42em;margin-right:4px}
.upload-btn .ui-icon{width:1.38em;height:1.38em;vertical-align:-0.38em}

/* ===== CueOptix split boundary ===== */

/* 响应式导航与按钮尺寸优化 - Generated by Trae Work */
:root{
  --nav-btn-radius:14px;
  --tap-target:44px;
}

/* 桌面端：侧边栏更宽，按钮更舒展 */
@media (min-width:901px){
  header{
    height:64px;
    padding:0 28px;
  }
  .brand{
    font-size:1.35rem;
    gap:12px;
  }
  .brand::before{
    font-size:1.52rem;
  }
  .header-left-actions,
  .header-actions{
    gap:8px;
  }
  .header-icon-btn{
    width:44px;
    height:44px;
    border-radius:14px;
  }
  .header-icon-btn .ui-icon{
    width:1.9rem;
    height:1.9rem;
  }
  .sidebar{
    width:232px;
    min-width:232px;
  }
  .sidebar-nav{
    padding:15px;
    gap:7px;
  }
  .nav-btn{
    min-height:48px;
    padding:12px 16px;
    gap:11px;
    border-radius:var(--nav-btn-radius);
    font-size:0.94rem;
    line-height:1.25;
    letter-spacing:-0.01em;
  }
  .nav-btn .ui-icon{
    width:1.72em;
    height:1.72em;
    vertical-align:-0.5em;
  }
  .nav-divider{
    margin:8px 0;
  }
  .btn{
    min-height:42px;
    padding:11px 18px;
    border-radius:12px;
  }
}

/* 平板端：菜单弹层更大，保持单手可点 */
@media (max-width:900px){
  header{
    min-height:60px;
    height:60px;
    padding:0 16px;
  }
  .hamburger-btn{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:1.38rem;
  }
  .header-icon-btn{
    width:42px;
    height:42px;
    border-radius:13px;
  }
  .header-icon-btn .ui-icon{
    width:1.72rem;
    height:1.72rem;
  }
  .brand{
    font-size:1.16rem;
  }
  .sidebar-nav{
    top:68px!important;
    left:14px;
    bottom:14px;
    width:min(368px,84vw)!important;
    max-width:calc(100vw - 44px)!important;
    padding:14px!important;
    gap:8px!important;
    border-radius:22px!important;
  }
  .mobile-menu-overlay{
    top:60px!important;
  }
  .sidebar-nav .nav-btn,
  .nav-btn{
    min-height:50px!important;
    padding:12px 14px!important;
    gap:11px!important;
    border-radius:15px!important;
    font-size:0.95rem!important;
    line-height:1.25!important;
  }
  .sidebar-nav .nav-btn .ui-icon,
  .nav-btn .ui-icon{
    width:1.66em!important;
    height:1.66em!important;
    vertical-align:-0.48em!important;
  }
  .sidebar-nav .nav-divider{
    margin:8px 0!important;
  }
  .btn,
  .inspiration-btn,
  .inspiration-send-btn{
    min-height:42px;
    border-radius:12px;
  }
  .result-tab{
    min-height:40px;
    padding:8px 4px;
  }
}

/* 手机端：增大触控区，避免误触 */
@media (max-width:600px){
  header{
    min-height:58px!important;
    height:58px!important;
    padding:0 12px!important;
  }
  .hamburger-btn{
    width:44px!important;
    height:44px!important;
    font-size:1.35rem!important;
  }
  .header-icon-btn{
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
  }
  .header-icon-btn .ui-icon{
    width:1.62rem!important;
    height:1.62rem!important;
  }
  .brand{
    font-size:1.08rem!important;
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand::before{
    font-size:1.22rem!important;
  }
  .sidebar-nav{
    top:66px!important;
    width:min(348px,88vw)!important;
    max-width:calc(100vw - 28px)!important;
    left:14px!important;
    bottom:14px!important;
    padding:13px!important;
    gap:8px!important;
  }
  .mobile-menu-overlay{
    top:58px!important;
  }
  .sidebar-nav .nav-btn,
  .nav-btn{
    min-height:49px!important;
    padding:12px 13px!important;
    gap:10px!important;
    font-size:0.92rem!important;
    border-radius:15px!important;
  }
  .sidebar-nav .nav-btn .ui-icon,
  .nav-btn .ui-icon{
    width:1.58em!important;
    height:1.58em!important;
  }
  .action-btns{
    gap:9px;
  }
  .action-btns .btn,
  .recognize-actions .btn,
  .output-actions .btn,
  .inspiration-type-btn{
    min-height:44px!important;
    padding:11px 13px!important;
    font-size:0.86rem!important;
    border-radius:13px!important;
  }
  .result-tab{
    min-height:42px!important;
    padding:9px 6px!important;
    font-size:0.88rem!important;
  }
}

/* 超小屏：保持可点，但略收窄避免挤出 */
@media (max-width:380px){
  header{
    min-height:56px!important;
    height:56px!important;
    padding:0 9px!important;
  }
  .hamburger-btn{
    width:42px!important;
    height:42px!important;
  }
  .header-icon-btn{
    width:38px!important;
    height:38px!important;
  }
  .header-icon-btn .ui-icon{
    width:1.5rem!important;
    height:1.5rem!important;
  }
  .sidebar-nav{
    top:64px!important;
    left:10px!important;
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    padding:11px!important;
  }
  .sidebar-nav .nav-btn,
  .nav-btn{
    min-height:46px!important;
    padding:10px 11px!important;
    font-size:0.88rem!important;
    gap:9px!important;
  }
  .sidebar-nav .nav-btn .ui-icon,
  .nav-btn .ui-icon{
    width:1.5em!important;
    height:1.5em!important;
  }
}

/* ===== CueOptix split boundary ===== */

/* 电脑端整体 UI 密度与排版优化 - Generated by Trae Work */
@media (min-width:901px){
  :root{
    --desktop-page-pad:24px;
    --desktop-card-radius:22px;
    --desktop-card-shadow:0 14px 42px rgba(15,23,42,0.065);
    --desktop-card-border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    --desktop-soft-bg:color-mix(in srgb,var(--surface) 88%,var(--bg));
  }

  html,body{
    height:100%;
  }

  body{
    background:
      radial-gradient(circle at 12% 8%, rgba(99,102,241,0.08), transparent 28%),
      radial-gradient(circle at 90% 12%, rgba(129,140,248,0.08), transparent 26%),
      var(--bg);
  }

  header{
    height:66px;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--border) 88%,transparent);
    backdrop-filter:blur(18px);
  }

  main{
    height:calc(100vh - 66px);
    overflow:hidden;
    background:transparent;
  }

  .sidebar{
    width:246px;
    min-width:246px;
    background:color-mix(in srgb,var(--surface) 76%,var(--bg));
    border-right:1px solid color-mix(in srgb,var(--border) 88%,transparent);
  }

  .sidebar-nav{
    padding:18px 16px;
    gap:8px;
    border-bottom:none;
  }

  .nav-divider{
    height:1px;
    margin:9px 4px;
    background:linear-gradient(90deg,transparent,var(--border),transparent);
  }

  .nav-btn{
    min-height:50px;
    padding:12px 15px;
    border-radius:16px;
    font-size:0.94rem;
    font-weight:650;
    color:var(--text-secondary);
    background:transparent;
  }

  .nav-btn:hover{
    background:color-mix(in srgb,var(--surface-hover) 84%,transparent);
    color:var(--text);
    transform:translateY(-1px);
  }

  .nav-btn.active{
    background:linear-gradient(135deg,var(--accent),var(--accent-hover));
    color:#fff;
    box-shadow:0 10px 24px rgba(99,102,241,0.22);
  }

  .nav-btn.nav-tool.active{
    background:color-mix(in srgb,var(--accent) 10%,var(--surface));
    color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);
    box-shadow:none;
  }

  .content{
    min-width:0;
    padding:var(--desktop-page-pad);
    gap:18px;
    background:transparent;
    overflow-y:auto;
    scroll-padding:24px;
  }

  .content::-webkit-scrollbar{
    width:10px;
  }

  .content::-webkit-scrollbar-thumb{
    border:2px solid var(--bg);
    border-radius:10px;
    background:color-mix(in srgb,var(--text-secondary) 42%,transparent);
  }

  .content-config{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:minmax(260px,0.8fr) minmax(420px,1.2fr);
    gap:0;
    border:var(--desktop-card-border);
    border-radius:var(--desktop-card-radius);
    background:var(--desktop-soft-bg);
    box-shadow:var(--desktop-card-shadow);
    overflow:hidden;
  }

  .content-config .panel{
    min-width:0;
    padding:18px 22px;
    border-right:1px solid var(--border);
    border-bottom:none;
    background:transparent;
  }

  .content-config .panel:last-child{
    border-right:none;
  }

  .panel-title,
  .content-config .panel-title{
    margin-bottom:12px;
    font-size:0.74rem;
    font-weight:800;
    letter-spacing:0.11em;
    color:var(--text-secondary);
  }

  .content-config .field{
    margin-bottom:12px;
  }

  label{
    font-size:0.78rem;
    font-weight:650;
    color:var(--text-secondary);
  }

  select,
  input[type="password"],
  input[type="text"]{
    min-height:42px;
    border-radius:12px;
    background:var(--bg);
    border:1px solid color-mix(in srgb,var(--border) 86%,transparent);
    transition:border-color .18s, box-shadow .18s, background .18s;
  }

  select:focus,
  input:focus,
  textarea:focus{
    border-color:color-mix(in srgb,var(--accent) 72%,var(--border));
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);
  }

  .checkbox{
    padding:9px 10px;
    border-radius:12px;
  }

  .checkbox:hover{
    background:color-mix(in srgb,var(--surface-hover) 72%,transparent);
  }

  .input-area,
  .recognize-area{
    flex:0 0 auto;
    margin:0;
    padding:22px;
    border:var(--desktop-card-border);
    border-radius:var(--desktop-card-radius);
    background:var(--desktop-soft-bg);
    box-shadow:var(--desktop-card-shadow);
  }

  .input-area{
    border-bottom:var(--desktop-card-border);
  }

  textarea,
  .recognize-area textarea,
  .recognize-area input[type="text"]{
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--border) 86%,transparent);
    background:var(--bg);
    font-size:0.94rem;
  }

  .input-area textarea{
    min-height:150px;
    max-height:260px;
    resize:vertical;
    padding:18px;
  }

  .quick-tags{
    margin-bottom:14px;
    gap:9px;
  }

  .tag{
    padding:7px 13px;
    border-radius:999px;
    background:var(--bg);
    font-weight:600;
  }

  .actions{
    margin-top:16px;
  }

  .action-btns{
    gap:10px;
    flex-wrap:wrap;
  }

  .btn{
    min-height:42px;
    border-radius:13px;
    font-weight:700;
    letter-spacing:-0.01em;
  }

  .btn-primary,
  .btn-accent{
    box-shadow:0 10px 22px rgba(99,102,241,0.18);
  }

  .btn-secondary{
    background:var(--bg);
    border:1px solid color-mix(in srgb,var(--border) 86%,transparent);
  }

  .btn:hover{
    transform:translateY(-1px);
  }

  .recognize-header{
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  }

  .recognize-title{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:1rem;
    font-weight:800;
    letter-spacing:-0.025em;
  }

  .recognize-hint{
    font-size:0.8rem;
    color:var(--text-muted);
  }

  .recognize-header .btn{
    margin-left:auto!important;
    min-height:36px;
    padding:8px 13px!important;
    border-radius:999px;
    font-size:0.78rem!important;
  }

  .recognize-inputs{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
    gap:12px;
    margin-bottom:14px;
  }

  #imageGenArea .recognize-inputs,
  #videoGenArea .recognize-inputs{
    display:block;
  }

  #imageGenInput,
  #videoGenInput{
    min-height:108px!important;
    padding:16px!important;
    border-radius:16px!important;
  }

  .upload-btn{
    min-height:42px;
    padding:0 16px;
    border-radius:13px;
    background:var(--bg);
    border:1px dashed color-mix(in srgb,var(--accent) 32%,var(--border));
    color:var(--text-secondary);
    font-weight:650;
  }

  .upload-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 7%,var(--bg));
  }

  .recognize-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    align-items:center;
  }

  .recognize-actions > div[style*="display:flex"]{
    width:100%;
    padding:12px;
    border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
    border-radius:16px;
    background:var(--bg);
  }

  .recognize-actions > div[style*="display:flex"] > div{
    padding:8px 10px;
    border-radius:12px;
    background:var(--surface);
    border:1px solid var(--border);
  }

  .recognize-actions select,
  .video-gen-select{
    min-height:36px;
    border-radius:11px;
    font-size:0.82rem;
  }

  .video-gen-options{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
  }

  .video-gen-option{
    min-width:0;
    padding:10px 12px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    border-radius:14px;
    background:var(--bg);
  }

  .video-gen-label{
    font-weight:700;
    color:var(--text-secondary);
  }

  #artStyleBtn{
    border-radius:999px!important;
  }

  #imageGenChatHistory{
    max-height:240px!important;
    border-radius:16px!important;
    background:var(--bg)!important;
  }

  #videoRefImgsContainer{
    min-height:96px!important;
    border-radius:16px!important;
    background:var(--bg)!important;
  }

  #imageGenResult,
  #videoGenResult,
  .recognize-result{
    border-radius:18px;
    background:var(--bg);
    border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  }

  .recognize-preview{
    max-height:320px;
    border-radius:16px;
    box-shadow:0 14px 38px rgba(15,23,42,0.12);
  }

  .result-area.show{
    margin:0;
    padding:22px;
    border:var(--desktop-card-border);
    border-radius:var(--desktop-card-radius);
    background:var(--desktop-soft-bg);
    box-shadow:var(--desktop-card-shadow);
    min-height:260px;
  }

  .result-header{
    gap:10px;
    margin-bottom:16px;
    padding-bottom:12px;
  }

  .result-tab{
    min-height:38px;
    padding:8px 12px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .result-tab:hover{
    background:var(--bg);
  }

  .result-tab.active{
    background:color-mix(in srgb,var(--accent) 10%,transparent);
  }

  .result-tab.active::after{
    display:none;
  }

  .output-box{
    min-height:230px;
    max-height:48vh;
    border-radius:18px;
    padding:22px;
    background:var(--bg);
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    font-size:0.94rem;
    line-height:1.75;
  }

  .output-actions{
    margin-top:14px;
  }

  .score-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:20px;
  }

  .score-card{
    border-radius:18px;
    padding:22px 18px;
    background:var(--bg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.45);
  }

  .score-value{
    font-size:2.35rem;
  }

  .change-item{
    border-radius:15px;
    background:var(--bg);
    padding:15px 16px;
  }

  .settings-modal,
  .dev-panel,
  .upgrade-modal{
    border-radius:24px;
    border:1px solid color-mix(in srgb,var(--border) 76%,transparent);
    box-shadow:0 30px 90px rgba(15,23,42,0.26);
  }

  .settings-modal{
    width:min(760px,92vw);
  }

  .settings-tabs{
    gap:6px;
  }

  .settings-tab{
    border-radius:999px 999px 0 0;
    min-height:40px;
  }

  .api-config{
    gap:18px;
  }

  .theme-option{
    border-radius:16px;
    background:var(--bg);
  }

  .inspiration-container{
    max-width:min(980px,calc(100vw - 80px));
    padding:22px 0;
  }

  .inspiration-header,
  .inspiration-input-area{
    border:1px solid var(--border);
    background:var(--desktop-soft-bg);
  }

  .inspiration-header{
    border-radius:22px 22px 0 0;
  }

  .inspiration-messages{
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 80%,var(--surface));
  }

  .inspiration-input-area{
    border-radius:0 0 22px 22px;
  }

  .inspiration-bubble,
  .inspiration-result,
  .inspiration-input-wrap{
    border-radius:18px;
  }

  .upgrade-modal{
    width:560px;
  }

  .upgrade-modal-features{
    gap:12px;
  }

  .upgrade-modal-feature{
    min-height:70px;
    border-radius:16px;
    background:var(--bg);
  }
}

/* 宽屏桌面：让主要工作区更像专业编辑器 */
@media (min-width:1280px){
  .content{
    padding:28px 34px;
  }

  .content-config{
    grid-template-columns:minmax(300px,0.72fr) minmax(520px,1.28fr);
  }

  .input-area textarea{
    min-height:170px;
  }

  .output-box{
    max-height:52vh;
  }
}

/* ===== CueOptix split boundary ===== */

/* 电脑端顶部导航栏优化：隐藏历史/设置图标，品牌标题居中 - Generated by Trae Work */
@media (min-width:901px){
  header{
    position:relative;
    justify-content:center!important;
  }

  header .header-left-actions{
    display:none!important;
  }

  header .brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    pointer-events:none;
  }

  header .hamburger-btn{
    display:none!important;
  }

  header .header-actions{
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
  }
}

/* ===== CueOptix split boundary ===== */

/* 移动端功能区与汉堡菜单细化 - Generated by Trae Work */
@media (max-width:900px){
  /* 汉堡菜单：不占满左右宽度，按钮更紧凑 */
  .sidebar-nav{
    width:min(286px,72vw)!important;
    max-width:min(286px,calc(100vw - 52px))!important;
    left:12px!important;
    right:auto!important;
    padding:10px!important;
    gap:5px!important;
    border-radius:18px!important;
  }

  .sidebar-nav .nav-btn{
    min-height:42px!important;
    padding:9px 11px!important;
    gap:9px!important;
    font-size:0.88rem!important;
    border-radius:13px!important;
  }

  .sidebar-nav .nav-btn .ui-icon{
    width:1.42em!important;
    height:1.42em!important;
  }

  .sidebar-nav .nav-divider{
    margin:4px 0!important;
  }

  /* 移动端功能区顶部：去掉标题/按钮行多余空白 */
  .recognize-area{
    margin-top:6px!important;
  }

  .recognize-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "title api"
      "hint hint";
    align-items:center!important;
    gap:3px 8px!important;
    margin-bottom:8px!important;
    padding-bottom:8px!important;
  }

  .recognize-title{
    grid-area:title;
    width:auto!important;
    min-height:0!important;
    line-height:1.2!important;
    margin:0!important;
  }

  .recognize-header .recognize-hint{
    grid-area:hint;
    margin:0!important;
    padding:0!important;
    line-height:1.35!important;
  }

  .recognize-header > .btn,
  .recognize-header button[onclick*="Config"]{
    grid-area:api;
    margin-left:0!important;
    align-self:center!important;
    min-height:30px!important;
    height:30px!important;
    padding:5px 10px!important;
    border-radius:999px!important;
    font-size:0.72rem!important;
    white-space:nowrap!important;
  }

  #recognizeArea,
  #imageGenArea,
  #videoGenArea{
    padding-top:10px!important;
  }

  #recognizeArea .recognize-inputs,
  #imageGenArea .recognize-inputs,
  #videoGenArea .recognize-inputs{
    margin-top:0!important;
  }
}

@media (max-width:600px){
  /* 手机端菜单进一步收窄，避免接近全屏宽度 */
  .sidebar-nav{
    width:min(272px,74vw)!important;
    max-width:min(272px,calc(100vw - 36px))!important;
    left:10px!important;
    bottom:12px!important;
    padding:9px!important;
    gap:4px!important;
    border-radius:17px!important;
  }

  .sidebar-nav .nav-btn{
    min-height:40px!important;
    padding:8px 10px!important;
    gap:8px!important;
    font-size:0.85rem!important;
    border-radius:12px!important;
  }

  .sidebar-nav .nav-btn .ui-icon{
    width:1.34em!important;
    height:1.34em!important;
  }

  .sidebar-nav .nav-divider{
    margin:3px 0!important;
  }

  .recognize-area{
    margin:6px 10px 10px!important;
    padding:10px!important;
  }

  .recognize-header{
    gap:2px 7px!important;
    margin-bottom:7px!important;
    padding-bottom:7px!important;
  }

  .recognize-title{
    font-size:0.9rem!important;
  }

  .recognize-header .recognize-hint{
    font-size:0.7rem!important;
  }

  .recognize-header > .btn,
  .recognize-header button[onclick*="Config"]{
    min-height:28px!important;
    height:28px!important;
    padding:4px 9px!important;
    font-size:0.7rem!important;
  }
}

@media (max-width:380px){
  .sidebar-nav{
    width:min(250px,76vw)!important;
    max-width:min(250px,calc(100vw - 24px))!important;
    left:8px!important;
    padding:8px!important;
  }

  .sidebar-nav .nav-btn{
    min-height:38px!important;
    padding:7px 9px!important;
    font-size:0.82rem!important;
  }
}

/* ===== CueOptix split boundary ===== */

/* 修正具体功能区旧图标 - Generated by Trae Work */
.recognize-title::before,
.history-title::before,
.history-empty::before{
  content:none!important;
  display:none!important;
}
.settings-title .ui-icon,
.history-title .ui-icon,
.template-cat-btn .ui-icon,
.history-tab .ui-icon{
  width:1.45em;
  height:1.45em;
  vertical-align:-0.4em;
  margin-right:5px;
}
.history-title,
.settings-title,
.template-cat-btn,
.history-tab{
  display:flex!important;
  align-items:center;
  gap:6px;
}
.history-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.history-empty .ui-icon{
  width:3rem;
  height:3rem;
  opacity:.88;
}

/* ===== CueOptix split boundary ===== */

/* 开屏弹窗性能优化：延迟显示、低开销模糊、轻量动画 - Generated by Trae Work */
.upgrade-modal-overlay{
  transition:opacity .22s ease!important;
  will-change:opacity;
}
.upgrade-modal{
  transition:opacity .24s ease,transform .24s ease!important;
  will-change:opacity,transform;
}
.upgrade-modal-icon{
  animation:none!important;
}

@media (max-width:900px){
  .upgrade-modal-overlay{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(0,0,0,.42)!important;
  }
}

@media (min-width:901px){
  .upgrade-modal-overlay{
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
  }
}

/* ===== CueOptix split boundary ===== */

/* 生图融图功能 - Generated by Trae Work */
.fusion-ref-panel{
  margin:12px 0;
  padding:12px;
  border:1px dashed color-mix(in srgb,var(--accent) 34%,var(--border));
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 5%,var(--bg));
}
.fusion-ref-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.fusion-ref-title{
  font-size:.82rem;
  color:var(--text-secondary);
  font-weight:700;
}
.fusion-ref-count{
  font-size:.74rem;
  color:var(--text-secondary);
}
.fusion-ref-container{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-height:76px;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:var(--surface);
  align-items:center;
}
.fusion-ref-empty{
  width:100%;
  text-align:center;
  color:var(--text-secondary);
  font-size:.8rem;
  line-height:1.5;
}
.fusion-ref-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.fusion-ref-hint{
  color:var(--text-secondary);
  font-size:.72rem;
}
@media(max-width:600px){
  .fusion-ref-panel{padding:10px;margin:10px 0}
  .fusion-ref-container{min-height:68px;padding:8px}
}

/* ===== CueOptix split boundary ===== */

/* 模式切换提示居中显示 - Generated by Trae Work */
.toast.mode-toast{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:auto;
  max-width:min(420px,calc(100vw - 48px));
  min-width:180px;
  text-align:center;
  padding:14px 22px;
  border-radius:16px;
  font-weight:700;
  letter-spacing:-0.01em;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
  box-shadow:0 20px 60px rgba(15,23,42,.22),0 0 0 1px rgba(255,255,255,.08) inset;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transform:translate(-50%,calc(-50% + 18px)) scale(.98)!important;
  z-index:12000;
}
.toast.mode-toast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1)!important;
  pointer-events:none;
}

@media(max-width:900px){
  .toast.mode-toast{
    max-width:min(360px,calc(100vw - 40px));
    min-width:168px;
    padding:13px 18px;
    border-radius:15px;
    font-size:.88rem;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

@media(max-width:420px){
  .toast.mode-toast{
    max-width:calc(100vw - 32px);
    min-width:150px;
    padding:12px 16px;
    font-size:.84rem;
    border-radius:14px;
  }
}

/* ===== CueOptix split boundary ===== */

/* 轻量现代动效系统 - Generated by Trae Work */
:root{
  --motion-fast:140ms;
  --motion-base:220ms;
  --motion-slow:320ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
}

button,
.btn,
.nav-btn,
.tag,
.upload-btn,
.template-cat-btn,
.history-tab,
.settings-tab,
.theme-option,
.upgrade-modal-feature,
.wizard-option,
.inspiration-type-btn,
.inspiration-btn,
.inspiration-send-btn,
.header-icon-btn,
.hamburger-btn{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}

button:hover,
.btn:hover,
.nav-btn:hover,
.tag:hover,
.upload-btn:hover,
.template-cat-btn:hover,
.history-tab:hover,
.settings-tab:hover,
.theme-option:hover,
.upgrade-modal-feature:hover,
.wizard-option:hover,
.inspiration-type-btn:hover,
.inspiration-btn:hover,
.inspiration-send-btn:hover,
.header-icon-btn:hover,
.hamburger-btn:hover{
  transform:translateY(-1px);
}

button:active,
.btn:active,
.nav-btn:active,
.tag:active,
.upload-btn:active,
.template-cat-btn:active,
.history-tab:active,
.settings-tab:active,
.theme-option:active,
.wizard-option:active,
.inspiration-type-btn:active,
.inspiration-btn:active,
.inspiration-send-btn:active,
.header-icon-btn:active,
.hamburger-btn:active{
  transform:translateY(0) scale(.985);
}

.nav-btn.active,
.template-cat-btn.active,
.history-tab.active,
.settings-tab.active,
.theme-option.active{
  animation:cueSoftPop var(--motion-base) var(--motion-ease);
}

.recognize-area[style*="display: block"],
.recognize-area[style*="display:;"],
.result-area.show,
.recognize-result.show,
.output-box,
.score-card,
.change-item,
.history-item,
.task-item,
.fusion-ref-panel{
  animation:cueFadeRise var(--motion-base) var(--motion-ease);
}

.modal.show,
.settings-modal.show,
.history-panel.show,
.dev-panel.show,
.upgrade-modal.show,
.img-gen-modal.show,
.video-gen-modal.show,
.recognize-config-modal.show,
.art-style-modal.show{
  animation:cueModalIn var(--motion-base) var(--motion-ease);
}

.history-overlay.show,
.dev-overlay.show,
.upgrade-modal-overlay.show,
.modal-overlay.show,
.img-gen-modal-overlay.show,
.video-gen-modal-overlay.show,
.recognize-config-overlay.show,
.art-style-modal-overlay.show,
.mobile-menu-overlay.open{
  animation:cueFadeOnly var(--motion-base) ease;
}

.sidebar-nav.open{
  animation:cueSlideMenu var(--motion-base) var(--motion-ease);
}

.inspiration-msg,
.inspiration-result,
#imageGenChatHistory > div,
.fusion-ref-container > div,
#videoRefImgsContainer > div{
  animation:cueFadeRise var(--motion-base) var(--motion-ease);
}

@keyframes cueFadeRise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes cueSoftPop{
  0%{transform:scale(.98)}
  65%{transform:scale(1.018)}
  100%{transform:scale(1)}
}

@keyframes cueModalIn{
  from{opacity:0;transform:translate(-50%,-48%) scale(.985)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

@keyframes cueFadeOnly{
  from{opacity:0}
  to{opacity:1}
}

@keyframes cueSlideMenu{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}

@media(max-width:600px){
  :root{
    --motion-fast:110ms;
    --motion-base:180ms;
    --motion-slow:260ms;
  }
  button:hover,
  .btn:hover,
  .nav-btn:hover,
  .tag:hover,
  .upload-btn:hover,
  .template-cat-btn:hover,
  .history-tab:hover,
  .settings-tab:hover,
  .theme-option:hover,
  .upgrade-modal-feature:hover,
  .wizard-option:hover,
  .inspiration-type-btn:hover,
  .inspiration-btn:hover,
  .inspiration-send-btn:hover,
  .header-icon-btn:hover,
  .hamburger-btn:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ===== CueOptix split boundary ===== */

/* 移动端弹窗防跳动修正 - Generated by Trae Work */
@media(max-width:900px){
  .modal.show,
  .settings-modal.show,
  .history-panel.show,
  .dev-panel.show,
  .upgrade-modal.show,
  .img-gen-modal.show,
  .video-gen-modal.show,
  .recognize-config-modal.show,
  .art-style-modal.show{
    animation:cueMobileModalFadeIn 160ms ease-out!important;
  }

  .history-overlay.show,
  .dev-overlay.show,
  .upgrade-modal-overlay.show,
  .modal-overlay.show,
  .img-gen-modal-overlay.show,
  .video-gen-modal-overlay.show,
  .recognize-config-overlay.show,
  .art-style-modal-overlay.show{
    animation:cueMobileOverlayFadeIn 140ms ease-out!important;
  }
}

@keyframes cueMobileModalFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes cueMobileOverlayFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* ===== CueOptix split boundary ===== */

/* 普通模式隐藏优化策略展示区 - Generated by Trae Work */
#sidebarConfig .panel:has(#strategyList){
  display:none!important;
}

#sidebarConfig{
  grid-template-columns:minmax(260px,1fr)!important;
}

@media(max-width:900px){
  #sidebarConfig{
    display:block!important;
  }
  #sidebarConfig .panel:first-child{
    border-right:none!important;
  }
}

/* ===== CueOptix split boundary ===== */

.art-style-option{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:var(--bg);border:2px solid var(--border);border-radius:12px;cursor:pointer;font-size:0.85rem;transition:all 0.2s;min-width:80px}
.art-style-option:hover{border-color:var(--accent);background:var(--surface)}
.art-style-option.selected{border-color:var(--accent);background:var(--accent);color:#fff}

/* 视频参考图相关样式 */
#videoRefUploadBtn:hover{border-color:var(--accent);color:var(--accent)}
#videoRefUploadBtn.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}


/* 现代轻量 SVG 图标系统 - Generated by Trae Work */
.ui-icon{width:1.08em;height:1.08em;display:inline-block;vertical-align:-0.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ui-icon-lg{width:1.28em;height:1.28em}
.nav-btn .ui-icon{width:1.15em;height:1.15em}
.header-icon-btn .ui-icon{width:1.15rem;height:1.15rem}
.upgrade-modal-feature-icon{display:inline-flex;align-items:center;justify-content:center}
.upgrade-modal-feature-icon .ui-icon{width:1.28rem;height:1.28rem}
.inspiration-welcome-icon{color:var(--inspiration-primary);line-height:1}
.inspiration-welcome-icon .ui-icon{width:4rem;height:4rem;filter:drop-shadow(0 8px 18px rgba(245,158,11,0.24))}
.task-panel-title::before,.task-empty::before{display:none!important}
.task-panel-title .ui-icon{color:var(--accent)}

/* ===== CueOptix split boundary ===== */

.template-cat-btn{padding:8px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:0.82rem;transition:all 0.2s;color:var(--text)}
.template-cat-btn:hover{border-color:var(--accent);background:var(--surface-hover)}
.template-cat-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}
.template-item{padding:14px;margin-bottom:10px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.2s}
.template-item:hover{border-color:var(--accent);background:var(--surface-hover)}
.template-item-title{font-weight:600;font-size:0.88rem;margin-bottom:6px;color:var(--text)}
.template-item-desc{font-size:0.78rem;color:var(--text-secondary);line-height:1.5}


/* 现代轻量 SVG 图标系统 - Generated by Trae Work */
.ui-icon{width:1.08em;height:1.08em;display:inline-block;vertical-align:-0.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ui-icon-lg{width:1.28em;height:1.28em}
.nav-btn .ui-icon{width:1.15em;height:1.15em}
.header-icon-btn .ui-icon{width:1.15rem;height:1.15rem}
.upgrade-modal-feature-icon{display:inline-flex;align-items:center;justify-content:center}
.upgrade-modal-feature-icon .ui-icon{width:1.28rem;height:1.28rem}
.inspiration-welcome-icon{color:var(--inspiration-primary);line-height:1}
.inspiration-welcome-icon .ui-icon{width:4rem;height:4rem;filter:drop-shadow(0 8px 18px rgba(245,158,11,0.24))}
.task-panel-title::before,.task-empty::before{display:none!important}
.task-panel-title .ui-icon{color:var(--accent)}

/* ===== CueOptix split boundary ===== */

/* 分镜脚本结果区样式 */
.storyboard-result{
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:0.85rem;
  line-height:1.85;
  color:var(--text);
  white-space:pre-wrap;
  max-height:600px;
  overflow-y:auto;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}
.storyboard-result::-webkit-scrollbar{width:6px}
.storyboard-result::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
@keyframes fadeOut{
from{opacity:1}
to{opacity:0}
}


/* 现代轻量 SVG 图标系统 - Generated by Trae Work */
.ui-icon{width:1.08em;height:1.08em;display:inline-block;vertical-align:-0.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ui-icon-lg{width:1.28em;height:1.28em}
.nav-btn .ui-icon{width:1.15em;height:1.15em}
.header-icon-btn .ui-icon{width:1.15rem;height:1.15rem}
.upgrade-modal-feature-icon{display:inline-flex;align-items:center;justify-content:center}
.upgrade-modal-feature-icon .ui-icon{width:1.28rem;height:1.28rem}
.inspiration-welcome-icon{color:var(--inspiration-primary);line-height:1}
.inspiration-welcome-icon .ui-icon{width:4rem;height:4rem;filter:drop-shadow(0 8px 18px rgba(245,158,11,0.24))}
.task-panel-title::before,.task-empty::before{display:none!important}
.task-panel-title .ui-icon{color:var(--accent)}