/* ===== Center Panel ===== */
.cp-toolbar { height:44px; width:100%; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 16px; gap:8px; background:var(--bg-base); flex-shrink:0; }
.cp-toolbar button { padding:5px 10px; font-size:11px; color:var(--text-muted); border-radius:var(--radius-sm); transition:all .15s; }
.cp-toolbar button:hover { background:var(--bg-hover); color:var(--text); }
.cp-toolbar .mode-toggle { display:flex; gap:0; background:var(--bg-deep); border-radius:var(--radius-sm); padding:3px; border:1px solid var(--border); margin-left:4px; }
.cp-toolbar .mode-toggle .mode-btn { padding:5px 14px; font-size:11px; font-weight:600; color:var(--text-muted); border-radius:5px; transition:all .2s; }
.cp-toolbar .mode-toggle .mode-btn.active { background:var(--green); color:#fff; box-shadow:0 1px 4px rgba(34,197,94,0.3); }

.toolbar-meta { display:flex; align-items:center; gap:6px; min-width:0; }
.toolbar-meta .tm-tag { font-size:10px; color:var(--text-muted); white-space:nowrap; }
.toolbar-meta .tm-btn { padding:5px 10px; font-size:11px; color:var(--text-muted); border-radius:var(--radius-sm); transition:all .15s; cursor:pointer; background:none; border:none; white-space:nowrap; }
.toolbar-meta .tm-btn:hover { background:var(--bg-hover); color:var(--text); }
.toolbar-meta .tm-btn-accent { border:1px solid var(--green); color:var(--green); }
.toolbar-meta .tm-btn-accent:hover { background:var(--green-bg); }
.toolbar-meta .tm-sep { width:1px; height:16px; background:var(--border); margin:0 2px; flex-shrink:0; }

/* AI 生图结果区顶部生成信息工具条 */
.result-toolbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(55,35,110,0.55), rgba(25,55,95,0.6));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(120,190,255,0.15);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(10,20,60,0.35), 0 2px 8px rgba(10,20,60,0.2), inset 0 1px 0 rgba(180,220,255,0.08);
  flex-shrink: 0;
  max-width: 92%;
  flex-wrap: wrap;
  justify-content: center;
}
[data-theme="light"] .result-toolbar {
  background: linear-gradient(135deg, rgba(225,235,255,0.78), rgba(245,235,255,0.72));
  border-color: rgba(100,150,255,0.18);
}
.result-toolbar .rt-tag {
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  padding: 2px 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
[data-theme="light"] .result-toolbar .rt-tag { color: rgba(30,40,60,0.85); background: rgba(0,0,0,0.05); }
.result-toolbar .rt-btn {
  padding: 4px 9px;
  font-size: 11px;
  color: rgba(255,255,255,0.88);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.result-toolbar .rt-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.result-toolbar .rt-btn-accent {
  color: inherit;
  background: transparent;
}
.result-toolbar .rt-btn-accent:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
[data-theme="light"] .result-toolbar .rt-btn {
  color: rgba(30,40,60,0.82);
  background: transparent;
}
[data-theme="light"] .result-toolbar .rt-btn:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(20,30,50,0.95);
}
[data-theme="light"] .result-toolbar .rt-btn-accent {
  color: inherit;
  background: transparent;
}
[data-theme="light"] .result-toolbar .rt-btn-accent:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(20,30,50,0.95);
}

.gear-btn { width:32px; height:32px; border:1px solid var(--border); border-radius:6px; background:var(--bg-deep); color:var(--text-muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; margin-left:4px; }
.gear-btn:hover { border-color:var(--green); color:var(--green); background:var(--bg-hover); }
.cp-toolbar .new-task-btn { height:32px; padding:0 14px; border:none; border-radius:6px; background:var(--green); color:#fff; cursor:pointer; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; transition:all .2s; margin-left:4px; white-space:nowrap; }
.cp-toolbar .new-task-btn:hover { background:#16a34a; box-shadow:0 4px 16px rgba(34,197,94,0.4); transform:translateY(-1px); }
.cp-toolbar .new-task-btn:active { background:#15803d; transform:translateY(0); box-shadow:0 2px 8px rgba(34,197,94,0.3); }

/* Config Modal */
.cfg-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:var(--z-modal, 600); display:flex; align-items:center; justify-content:center; }
.cfg-modal { width:500px; max-width:90vw; max-height:85vh; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,0.5); }
.cfg-modal-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cfg-modal-header h3 { font-size:14px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.cfg-modal-close { width:24px; height:24px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .15s; }
.cfg-modal-close:hover { background:var(--bg-hover); color:var(--text); }
.cfg-modal-body { flex:1; overflow-y:auto; padding:16px 20px; }
.cfg-modal-tabs { display:flex; gap:0; background:var(--bg-deep); border-radius:8px; padding:3px; border:1px solid var(--border); margin-bottom:16px; }
.cfg-modal-tab { flex:1; padding:8px 12px; text-align:center; font-size:12px; font-weight:600; color:var(--text-muted); border-radius:6px; cursor:pointer; transition:all .2s; }
.cfg-modal-tab.active { background:var(--green); color:#fff; }
.cfg-modal-panel { display:none; }
.cfg-modal-panel.active { display:block; }
.cfg-modal-row { margin-bottom:14px; }
.cfg-modal-label { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.cfg-modal-input { width:100%; padding:8px 10px; background:var(--bg-deep); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; outline:none; transition:border .15s; }
.cfg-modal-input option { background:var(--bg-card); color:var(--text); }
.cfg-modal-input:focus { border-color:var(--green); }
.cfg-modal-input:disabled { opacity:0.5; }
.cfg-modal-row .pw-row { display:flex; gap:4px; }
.cfg-modal-row .pw-row input { flex:1; }
.cfg-modal-btn { padding:7px 12px; font-size:11px; color:var(--text-muted); border:1px solid var(--border); border-radius:6px; background:var(--bg-deep); cursor:pointer; transition:all .15s; }
.cfg-modal-btn:hover { border-color:var(--border-light); color:var(--text); }
.cfg-modal-status { padding:12px 0; border-top:1px solid var(--border); margin-top:16px; }
.cfg-modal-status .as-row { display:flex; justify-content:space-between; font-size:11px; padding:4px 0; }
.cfg-modal-status .as-label { color:var(--text-muted); }
.cfg-modal-status .as-value.ok { color:var(--green); }

/* Model Selector */
.cfg-model-selector { margin-bottom:14px; padding:10px 12px; background:var(--bg-deep); border:1px solid var(--border); border-radius:8px; }
.cfg-ms-row { display:flex; gap:6px; align-items:center; }
.cfg-ms-select { flex:1; padding:7px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; outline:none; cursor:pointer; min-width:0; }
.cfg-ms-select:focus { border-color:var(--green); }
.cfg-ms-btn { width:32px; height:32px; border:1px solid var(--border); border-radius:6px; background:var(--bg-card); color:var(--text-muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.cfg-ms-btn:hover { border-color:var(--green); color:var(--green); }
.cfg-ms-btn-del:hover { border-color:var(--red); color:var(--red); }
.cfg-ms-btn-default:hover { border-color:var(--warn); color:var(--warn); }
.cfg-ms-info { font-size:10px; color:var(--text-dim); margin-top:6px; display:flex; align-items:center; gap:4px; }
.cfg-ms-info .ms-default-badge { display:inline-block; padding:1px 6px; border-radius:3px; background:var(--warn); color:#fff; font-size:9px; font-weight:600; }

/* Section Title (collapsible) */
.cfg-modal-section-title { display:flex; align-items:center; gap:6px; padding:8px 0; cursor:pointer; user-select:none; font-size:12px; font-weight:600; color:var(--text-muted); border-top:1px solid var(--border); margin-top:8px; transition:color .15s; }
.cfg-modal-section-title:hover { color:var(--text); }
.cfg-modal-section-title .sec-arrow { font-size:9px; transition:transform .2s; }
.cfg-modal-section-title.open .sec-arrow { transform:rotate(90deg); }
.cfg-modal-section-body { padding:4px 0 8px; }

/* Store List */
/* Code Editor */
.cfg-code-hint { font-size:10px; color:var(--text-dim); margin-bottom:6px; line-height:1.5; }
.cfg-code-hint code { background:var(--bg-deep); padding:1px 5px; border-radius:3px; font-size:10px; color:var(--blue); }
.cfg-code-editor-wrap { border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:border .15s; }
.cfg-code-editor-wrap:focus-within { border-color:var(--green); }
.cfg-code-editor { width:100%; min-height:100px; padding:10px; background:var(--bg-deep); border:none; color:var(--text); font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:11px; line-height:1.6; resize:vertical; outline:none; tab-size:2; }
.cfg-code-editor::placeholder { color:var(--text-dim); }
.cfg-code-footer { display:flex; gap:6px; margin-top:6px; }
.cfg-var-list { margin-top:6px; padding:8px; background:var(--bg-deep); border:1px solid var(--border); border-radius:6px; font-size:10px; }
.cfg-var-list .var-item { display:flex; gap:8px; padding:3px 0; align-items:center; }
.cfg-var-list .var-name { color:var(--blue); font-family:monospace; font-size:10px; min-width:80px; }
.cfg-var-list .var-desc { color:var(--text-dim); font-size:10px; }
.cp-toolbar .sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.cp-toolbar .toolbar-logo { font-size:17px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:0; margin-right:12px; white-space:nowrap; }
.cp-toolbar .toolbar-logo .logo-green { color:var(--green); }
.cp-toolbar .toolbar-title { font-size:12px; font-weight:600; color:var(--text); margin-right:12px; }
.cp-toolbar .zoom-info { color:var(--text-muted); font-size:11px; }

/* Tab bar */
.tab-bar { display:flex; align-items:center; height:36px; border-bottom:1px solid var(--border); background:var(--bg-base); flex-shrink:0; overflow-x:auto; overflow-y:hidden; padding:0 8px; gap:2px; }
.tab-bar::-webkit-scrollbar { height:0; }
.tab-item { display:flex; align-items:center; gap:4px; padding:4px 12px; font-size:11px; color:var(--text-muted); background:var(--bg-deep); border:1px solid var(--border); border-radius:6px 6px 0 0; cursor:pointer; transition:all .15s; white-space:nowrap; max-width:160px; min-width:60px; user-select:none; position:relative; }
.tab-item:hover { background:var(--bg-hover); color:var(--text); }
.tab-item.active { background:var(--bg-deep); color:var(--text); border-bottom:2px solid var(--green); font-weight:600; }
.tab-title { overflow:hidden; text-overflow:ellipsis; flex:1; }
.tab-close { width:16px; height:16px; border:none; background:transparent; color:var(--text-dim); cursor:pointer; font-size:12px; border-radius:3px; display:flex; align-items:center; justify-content:center; transition:all .1s; flex-shrink:0; line-height:1; padding:0; }
.tab-close:hover { background:var(--red); color:#fff; }
.tab-add { width:28px; height:24px; border:1px dashed var(--border); border-radius:4px; background:transparent; color:var(--text-muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.tab-add:hover { border-color:var(--green); color:var(--green); background:var(--green-bg); }
.tab-status { width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:2px; flex-shrink:0; }
.tab-status.generating { background:var(--warn); animation:tab-pulse 1s infinite; }
.tab-status.completed { background:var(--green); }
.tab-status.error { background:var(--red); }
@keyframes tab-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.tab-title-input { width:100%; padding:1px 4px; font-size:11px; background:var(--bg-deep); border:1px solid var(--green); border-radius:3px; color:var(--text); outline:none; }

.cp-workspace { flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:center; background:var(--bg-deep); position:relative; overflow:hidden; }
.gen-overlay { position:absolute; inset:0; z-index:var(--z-overlay, 50); background:rgba(0,0,0,0.45); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; backdrop-filter:blur(2px); }
.gen-overlay-spinner { width:48px; height:48px; border:3px solid rgba(255,255,255,0.2); border-top-color:var(--green,#a6e3a1); border-radius:50%; animation:gen-spin 0.8s linear infinite; }
.gen-overlay-text { color:#fff; font-size:14px; font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
@keyframes gen-spin { to { transform:rotate(360deg); } }
.cp-bottom-bar { display:flex; flex-direction:column; gap:0; padding:8px 12px; background:var(--bg-base); border-top:1px solid var(--border); }
.cp-prompt-bar { width:100%; }
.cp-prompt-bar .prompt-ta-center { width:100%; min-height:100px; max-height:300px; padding:8px 12px; background:var(--bg-base); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; outline:none; resize:vertical; line-height:1.5; }
.cp-prompt-bar .prompt-ta-center:focus { border-color:var(--green); }
.cp-bottom-btn-row { display:flex; align-items:center; justify-content:space-between; gap:4px; height:57px; }
.cp-bottom-btn-row .btn-generate { width:90px; height:32px; min-height:32px; min-width:90px; max-height:32px; margin:0; padding:0; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:4px; border-radius:16px; background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color:#fff; border:none; cursor:pointer; transition:all .2s; box-shadow:0 2px 8px rgba(34,197,94,0.3); font-size:12px; font-weight:600; letter-spacing:0.5px; white-space:nowrap; }
.cp-bottom-btn-row .btn-generate:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(34,197,94,0.4); background:linear-gradient(135deg, #2ed86a 0%, #22c55e 100%); }
.cp-bottom-btn-row .btn-generate:active { transform:translateY(0); box-shadow:0 1px 4px rgba(34,197,94,0.3); }
.cp-bottom-btn-row .btn-generate:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.cp-bottom-btn-row .btn-generate .btn-icon { font-size:14px; line-height:1; width:20px; height:20px; border-radius:10px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; }
.cp-bottom-btn-row .btn-generate .btn-text { font-size:12px; }
.cp-bottom-btn-row .btn-setting { height:32px; padding:0 10px; border:1px solid var(--border); border-radius:16px; background:var(--bg-card); color:var(--text); cursor:pointer; font-size:11px; font-weight:600; transition:all .2s; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cp-bottom-btn-row .btn-setting:hover { border-color:var(--green); color:var(--green); background:rgba(34,197,94,0.05); }
.cp-bottom-btn-row .btn-setting .btn-setting-info { font-size:9px; color:var(--text-muted); font-weight:400; }

/* Empty state */
.empty-state { text-align:center; color:var(--text-muted); position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.empty-state .big-icon { font-size:48px; margin-bottom:12px; opacity:0.3; }
.empty-state .es-content { position:relative; z-index:2; animation:esFadeIn 0.8s ease-out; }
.empty-state .es-title { font-size:22px; font-weight:700; margin-bottom:10px; background:linear-gradient(135deg, #22c55e, #34d399, #10b981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:1px; position:relative; display:inline-block; overflow:hidden; }
.empty-state .es-title::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent); animation:titleShimmer 3s ease-in-out infinite; }
.empty-state .es-desc { font-size:13px; line-height:1.6; max-width:360px; margin:10px auto 0; color:#6ee7b7; opacity:0; animation:esDescFadeIn 0.8s ease-out 0.5s forwards; }
.empty-state .es-desc .es-char { display:inline-block; opacity:0; animation:charRandomIn 0.5s ease-out forwards, charFlicker 5s steps(1) infinite; will-change:opacity; }
.empty-state .es-frame { position:absolute; inset:28%; z-index:1; pointer-events:none; animation:frameBreathe 4s ease-in-out infinite; will-change:transform; }
.empty-state .es-corner { position:absolute; width:8px; height:8px; border:1.5px solid rgba(34,197,94,0.55); transition:all .3s; }
.empty-state .es-corner-tl { top:-1px; left:-1px; border-right:none; border-bottom:none; }
.empty-state .es-corner-tr { top:-1px; right:-1px; border-left:none; border-bottom:none; }
.empty-state .es-corner-bl { bottom:-1px; left:-1px; border-right:none; border-top:none; }
.empty-state .es-corner-br { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.empty-state .es-corner-dot { position:absolute; width:5px; height:5px; border:1px solid rgba(34,197,94,0.65); animation:cornerPulse 3s ease-in-out infinite; }
.empty-state .es-corner-dot-tl { top:-6px; left:-6px; }
.empty-state .es-corner-dot-tr { top:-6px; right:-6px; animation-delay:0.7s; }
.empty-state .es-corner-dot-bl { bottom:-6px; left:-6px; animation-delay:1.4s; }
.empty-state .es-corner-dot-br { bottom:-6px; right:-6px; animation-delay:2.1s; }
.empty-state .es-frame-line { position:absolute; background:rgba(34,197,94,0.18); }
.empty-state .es-frame-top { top:0; left:8px; right:8px; height:1px; }
.empty-state .es-frame-right { top:8px; right:0; bottom:8px; width:1px; }
.empty-state .es-frame-bottom { bottom:0; left:8px; right:8px; height:1px; }
.empty-state .es-frame-left { top:8px; left:0; bottom:8px; width:1px; }
.empty-state .es-anim-bg { position:absolute; inset:0; z-index:1; pointer-events:none; }
.empty-state .es-anim-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(88,166,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(88,166,255,0.04) 1px,transparent 1px); background-size:40px 40px; animation:gridMove 20s linear infinite; will-change:background-position; }
[data-theme="light"] .empty-state .es-anim-grid { background-image:linear-gradient(rgba(59,130,246,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.05) 1px,transparent 1px); }
.empty-state .es-anim-scan { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(88,166,255,0.35),rgba(167,139,250,0.35),transparent); animation:scanMove 4s ease-in-out infinite; opacity:0.6; will-change:top, opacity; }
.empty-state .es-anim-node { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(88,166,255,0.5); box-shadow:0 0 8px rgba(88,166,255,0.3),0 0 20px rgba(88,166,255,0.15); animation:nodePulse 3s ease-in-out infinite; will-change:transform, opacity; transform:translateZ(0); }
@keyframes esFadeIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
@keyframes esDescFadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
@keyframes gridMove { 0%{background-position:0 0;} 100%{background-position:40px 40px;} }
@keyframes scanMove { 0%,100%{top:0;opacity:0;} 10%{opacity:0.6;} 90%{opacity:0.6;} 50%{top:100%;} }
@keyframes nodePulse { 0%,100%{transform:scale(1);opacity:0.4;} 50%{transform:scale(2.5);opacity:1;} }
@keyframes titleShimmer { 0%{left:-100%;} 50%,100%{left:200%;} }
@keyframes frameBreathe { 0%,100%{transform:scale(1);opacity:0.8;} 50%{transform:scale(1.02);opacity:1;} }
@keyframes cornerPulse { 0%,100%{transform:scale(1);opacity:0.6;} 50%{transform:scale(1.3);opacity:1;} }
@keyframes charRandomIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
@keyframes charFlicker { 0%,100%{opacity:1;} 78%{opacity:1;} 80%{opacity:0.2;} 81%{opacity:1;} 88%{opacity:1;} 89%{opacity:0.4;} 90%{opacity:1;} 93%{opacity:1;} 94%{opacity:0.1;} 95%{opacity:1;} }
/* Result area */
.result-area { width:100%; max-width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px 12px; overflow:visible; position:relative; }
.result-img-wrap { max-width:100%; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; }
.generated-img { max-width:95%; max-height:calc(0.95 * (100vh - 255px)); width:auto; height:auto; object-fit:contain; border-radius:var(--radius); box-shadow:0 4px 24px rgba(0,0,0,0.4); border:1px solid var(--border); cursor:pointer; transition:all .2s; }
.generated-img:hover { box-shadow:0 4px 32px rgba(34,197,94,0.3); border-color:var(--green); }
.iter-strip { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:auto; max-width:92%; display:none; flex-direction:row; align-items:center; gap:0; padding:6px 8px; background:linear-gradient(135deg, rgba(55,35,110,0.55), rgba(25,55,95,0.6)); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(120,190,255,0.15); border-radius:14px; box-shadow:0 8px 32px rgba(10,20,60,0.35),0 2px 8px rgba(10,20,60,0.2),inset 0 1px 0 rgba(180,220,255,0.08); flex-shrink:0; z-index:var(--z-modal, 600); }
[data-theme="light"] .iter-strip { background:linear-gradient(135deg, rgba(225,235,255,0.78), rgba(245,235,255,0.72)); border-color:rgba(100,150,255,0.18); box-shadow:0 8px 32px rgba(60,100,200,0.12),0 2px 8px rgba(60,100,200,0.06),inset 0 1px 0 rgba(255,255,255,0.9); }
.iter-strip-label { font-size:10px; color:var(--text-muted); white-space:nowrap; font-weight:500; }
.iter-scroll-wrap { display:flex; align-items:center; flex:1; justify-content:center; min-width:0; }
.iter-strip-thumbs { display:flex; gap:6px; overflow-x:auto; align-items:center; justify-content:flex-start; padding:2px 4px; scroll-behavior:smooth; max-width:1116px; }
.iter-strip-thumbs::-webkit-scrollbar { height:3px; }
.iter-strip-thumbs::-webkit-scrollbar-thumb { background:rgba(150,200,255,0.2); border-radius:2px; }
[data-theme="light"] .iter-strip-thumbs::-webkit-scrollbar-thumb { background:rgba(100,150,255,0.18); }
.iter-scroll-btn { width:24px; height:28px; flex-shrink:0; border:none; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.6); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; border-radius:4px; }
.iter-scroll-btn:hover { background:rgba(255,255,255,0.15); color:#fff; }
.iter-scroll-btn.hidden { visibility:hidden; pointer-events:none; }
[data-theme="light"] .iter-scroll-btn { background:rgba(0,0,0,0.06); color:rgba(0,0,0,0.5); }
[data-theme="light"] .iter-scroll-btn:hover { background:rgba(0,0,0,0.12); color:rgba(0,0,0,0.8); }
.iter-thumb { width:56px; height:42px; flex-shrink:0; position:relative; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid rgba(130,200,255,0.12); transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s ease; background:rgba(45,35,90,0.35); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(10,20,60,0.25); will-change:transform; }
.iter-thumb:hover { z-index:2; border-color:rgba(140,210,255,0.4); transform:translateY(-3px) scale(1.06); box-shadow:0 8px 24px rgba(20,40,100,0.35); }
.iter-thumb.active { z-index:1; border-color:var(--green); box-shadow:0 0 16px rgba(34,197,94,0.35); }
[data-theme="light"] .iter-thumb { border-color:rgba(100,160,255,0.14); background:rgba(210,220,255,0.45); box-shadow:0 2px 6px rgba(60,100,200,0.1); }
[data-theme="light"] .iter-thumb:hover { border-color:rgba(80,140,255,0.3); box-shadow:0 8px 24px rgba(60,100,200,0.18); }
.iter-thumb img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.iter-thumb-placeholder { width:20px; height:20px; background:rgba(150,190,255,0.2); border-radius:3px; opacity:0.5; }
.iter-thumb-order { position:absolute; bottom:2px; right:2px; min-width:14px; height:14px; line-height:14px; text-align:center; font-size:8px; font-weight:600; color:#fff; background:rgba(25,35,80,0.75); border-radius:3px; padding:0 3px; pointer-events:none; }
.meta-bar { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; align-items:center; flex-shrink:0; padding:2px 0; }
.meta-bar .mb-tag { padding:3px 8px; background:var(--bg-card); border:1px solid var(--border); border-radius:4px; font-size:10px; color:var(--text-muted); white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.meta-bar .mb-btn { padding:5px 10px; border:1px solid var(--border); border-radius:4px; background:var(--bg-card); color:var(--text); cursor:pointer; font-size:10px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; transition:all .15s; font-weight:500; }
.meta-bar .mb-btn:hover { border-color:var(--border-light); background:var(--bg-hover); }
.meta-bar .mb-btn.primary { background:var(--green); border-color:var(--green); color:#fff; }
.meta-bar .mb-btn.primary:hover { background:#16a34a; }
.meta-bar .mb-btn.green { color:var(--green); }
/* Image Context Menu */
.img-ctx-menu { position:fixed; z-index:var(--z-context-menu, 800); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px; min-width:170px; box-shadow:0 8px 24px rgba(0,0,0,0.4); opacity:0; transform:scale(0.92); transition:opacity .12s,transform .12s; pointer-events:none; }
.img-ctx-menu.show { opacity:1; transform:scale(1); pointer-events:auto; }
.img-ctx-menu .ctx-item { padding:8px 12px; font-size:12px; cursor:pointer; border-radius:4px; color:var(--text); display:flex; align-items:center; gap:8px; transition:background .1s; }
.img-ctx-menu .ctx-item:hover { background:var(--bg-hover); }
.img-ctx-menu .ctx-divider { height:1px; background:var(--border); margin:4px 0; }

/* Group Context Menu */
.group-ctx-menu { position:fixed; z-index:var(--z-context-menu, 800); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px; min-width:140px; box-shadow:0 8px 24px rgba(0,0,0,0.4); opacity:0; transform:scale(0.92); transition:opacity .12s,transform .12s; pointer-events:none; }
.group-ctx-menu.show { opacity:1; transform:scale(1); pointer-events:auto; }
.group-ctx-menu .ctx-item { padding:8px 12px; font-size:12px; cursor:pointer; border-radius:4px; color:var(--text); display:flex; align-items:center; gap:8px; transition:background .1s; }
.group-ctx-menu .ctx-item:hover { background:var(--bg-hover); }
.group-ctx-menu .ctx-divider { height:1px; background:var(--border); margin:4px 0; }

.move-menu { position:fixed; z-index:var(--z-context-menu, 800); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px; min-width:180px; max-height:280px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.4); opacity:0; transform:scale(0.92); transition:opacity .12s,transform .12s; pointer-events:none; }
.move-menu.show { opacity:1; transform:scale(1); pointer-events:auto; }
.move-menu .ctx-item { padding:8px 12px; font-size:12px; cursor:pointer; border-radius:4px; color:var(--text); display:flex; align-items:center; gap:8px; transition:background .1s; }
.move-menu .ctx-item:hover { background:var(--bg-hover); }
.move-menu .ctx-item.disabled { color:var(--text-dim); cursor:default; }
.move-menu .ctx-item.disabled:hover { background:transparent; }
.move-menu .ctx-divider { height:1px; background:var(--border); margin:4px 0; }
.move-menu .ctx-item .arrow { margin-left:auto; font-size:10px; color:var(--text-dim); }
.move-menu .ctx-sub { position:fixed; z-index:var(--z-context-sub, 810); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px; min-width:160px; max-height:280px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.4); display:none; }
.move-menu .ctx-sub.show { display:block; }
.move-menu.flip-right .ctx-sub { }
.move-menu .ctx-sub-item { padding:7px 12px; font-size:11px; cursor:pointer; border-radius:4px; color:var(--text); display:flex; align-items:center; gap:6px; transition:background .1s; }
.move-menu .ctx-sub-item:hover { background:var(--bg-hover); }
.move-menu .ctx-sub-item.current { color:var(--text-dim); cursor:default; }
.move-menu .ctx-sub-item.current:hover { background:transparent; }
.move-menu .ctx-sub-item .count { margin-left:auto; font-size:9px; color:var(--text-dim); background:var(--bg-deep); padding:1px 5px; border-radius:8px; }

.ctx-sub { position:fixed; z-index:var(--z-context-sub, 810); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px; min-width:160px; max-height:280px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.4); display:none; opacity:0; transform:scale(0.92); transition:opacity .12s,transform .12s; pointer-events:none; }
.ctx-sub.show { display:block; opacity:1; transform:scale(1); pointer-events:auto; }
.ctx-sub-item { padding:7px 12px; font-size:11px; cursor:pointer; border-radius:4px; color:var(--text); display:flex; align-items:center; gap:6px; transition:background .1s; }
.ctx-sub-item:hover { background:var(--bg-hover); }
.ctx-sub-item.current { color:var(--text-dim); cursor:default; }
.ctx-sub-item.current:hover { background:transparent; }
.ctx-sub-item .count { margin-left:auto; font-size:9px; color:var(--text-dim); background:var(--bg-deep); padding:1px 5px; border-radius:8px; }

.gen-panel { position:fixed; bottom:80px; right:20px; width:320px; max-height:420px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:var(--z-floating-panel, 700); display:none; flex-direction:column; overflow:hidden; transition:opacity .2s,transform .2s; }
.gen-panel.visible { display:flex; }
.gen-panel.minimized { width:auto; max-height:none; border-radius:20px; }
.gen-panel-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); cursor:move; user-select:none; }
.gen-panel-header .gp-title { font-size:12px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.gen-panel-header .gp-title .gp-count { background:var(--green); color:#fff; font-size:10px; font-weight:600; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 5px; }
.gen-panel-header .gp-actions { display:flex; gap:4px; align-items:center; }
.gen-panel-header .gp-auto-clean { font-size:10px; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; gap:3px; padding:0 4px; white-space:nowrap; user-select:none; }
.gen-panel-header .gp-auto-clean input { margin:0; cursor:pointer; }
.gen-panel-header .gp-btn { width:24px; height:24px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; border-radius:4px; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.gen-panel-header .gp-btn:hover { background:var(--bg-hover); color:var(--text); }
.gen-panel-body { flex:1; overflow-y:auto; padding:6px; }
.gen-panel-body::-webkit-scrollbar { width:4px; }
.gen-panel-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.gen-task.done-unviewed { border-color:var(--green); border-width:2px; box-shadow:0 0 12px rgba(34,197,94,0.3); animation:genTaskPulse 2s ease-in-out infinite; }
@keyframes genTaskPulse { 0%,100%{box-shadow:0 0 12px rgba(34,197,94,0.3);} 50%{box-shadow:0 0 20px rgba(34,197,94,0.5);} }
.gen-task { padding:8px 10px; border-radius:8px; margin-bottom:4px; border:1px solid var(--border); background:var(--bg-deep); transition:all .15s; }
.gen-task:hover { border-color:var(--border-light); }
.gen-task.draggable { cursor:grab; }
.gen-task.draggable:active { cursor:grabbing; }
.gen-task.drag-over { border-color:var(--green); border-style:dashed; background:rgba(34,197,94,0.05); }
.gen-task.dragging { opacity:0.4; }
.gen-task-top { display:flex; align-items:center; gap:8px; }
.gen-task-icon { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:6px; }
.gen-task-icon svg { width:16px; height:16px; }
.gen-task-icon.running { background:rgba(34,197,94,0.15); color:var(--green); }
.gen-task-icon.done { background:transparent; color:var(--blue); }
.gen-task-icon.error { background:transparent; color:var(--red); }
.gen-task-icon.pending { background:transparent; color:var(--text-muted); }
.gen-task-icon.running svg { animation:spin 1.5s linear infinite; }
.gen-task-info { flex:1; min-width:0; }
.gen-task-prompt { font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-task-status { font-size:10px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
.gen-task-status .gp-spinner { width:10px; height:10px; border:2px solid var(--border); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; }
.gen-task-actions { display:flex; gap:4px; flex-shrink:0; }
.gen-task-btn { width:24px; height:24px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); cursor:pointer; border-radius:4px; font-size:10px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.gen-task-btn:hover { border-color:var(--green); color:var(--green); }
.gen-task-btn.view-btn:hover { border-color:var(--blue); color:var(--blue); }
.gen-task-thumb { margin-top:6px; }
.gen-task-thumb img { width:100%; max-height:120px; object-fit:contain; border-radius:4px; cursor:pointer; border:1px solid var(--border); }
.gen-panel-minimized { position:fixed; bottom:80px; right:20px; width:44px; height:44px; background:var(--green); border:none; border-radius:22px; color:#fff; cursor:pointer; z-index:var(--z-floating-panel, 700); display:none; align-items:center; justify-content:center; font-size:16px; box-shadow:0 4px 16px rgba(34,197,94,0.4); transition:all .2s; }
.gen-panel-minimized.visible { display:flex; }
.gen-panel-minimized:hover { transform:scale(1.1); }
.gen-panel-minimized .gp-badge { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; line-height:16px; text-align:center; font-size:9px; font-weight:600; background:var(--red); color:#fff; border-radius:8px; padding:0 4px; }

.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px; }
@keyframes spin { to{transform:rotate(360deg);} }
.loading-box { text-align:center; padding:40px; }
.loading-box p { font-size:12px; color:var(--text-muted); }
.error-box { padding:14px; border:1px solid var(--red); border-radius:var(--radius); background:rgba(239,68,68,0.05); color:var(--red); font-size:12px; text-align:center; }

/* ===== Task 5: 用户中心在顶部工具条的紧凑样式 ===== */
/* #loginArea 从 right-panel 迁移到 .cp-toolbar 后，覆盖 auth-admin.css 中的全宽样式 */
.cp-toolbar-login { display:flex; align-items:center; flex-shrink:0; margin-left:4px; }
.cp-toolbar-login .auth-login-btn { width:auto; padding:5px 12px; font-size:12px; }
.cp-toolbar-login .user-bar { width:auto; flex-wrap:nowrap; padding:4px 8px; gap:6px; background:transparent; border:none; }
.cp-toolbar-login .user-bar .user-avatar { width:24px; height:24px; font-size:11px; }
.cp-toolbar-login .user-bar .user-meta { flex:0 1 auto; min-width:0; }
.cp-toolbar-login .user-bar .user-name { font-size:11px; max-width:100px; }
.cp-toolbar-login .user-bar .user-points { font-size:10px; }
.cp-toolbar-login .user-bar .user-actions { margin-left:0; gap:4px; }
.cp-toolbar-login .user-bar .uc-btn { padding:3px 8px; font-size:10px; }
.cp-toolbar-login .user-bar .uc-btn-ghost { padding:3px 6px; }