/* ==================== 杩滄櫙AI 路 璁捐浠ょ墝锛堟瀬绠€ / 鐢靛晢宸ヤ綔鍙帮級 ==================== */
@import url('/styles/tokens.css');

/* 鑷畾涔変笅鎷?/ 娴眰鍒楄〃锛氫娇鐢ㄥ叏灞€涓嬫媺鎶曞奖锛堝崱鐗囨湰浣撴棤鎶曞奖锛?*/
.yj-dropdown-surface {
  box-shadow: var(--shadow-dropdown);
}

/* Optional release update banner: non-blocking hint, user chooses when to refresh. */
.release-update-banner {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 10040;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(640px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-left: 3px solid rgba(124, 58, 237, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  transform: translateX(-50%);
  pointer-events: auto;
}

.release-update-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.release-update-banner__text strong {
  color: #5b21b6;
  font-weight: 800;
}

.release-update-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.release-update-banner__btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.release-update-banner__btn--primary {
  border-color: rgba(124, 58, 237, 0.42);
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.release-update-banner__btn:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .release-update-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .release-update-banner__actions {
    justify-content: flex-end;
  }
}

.commerce-mode-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #eef2f7;
  scrollbar-width: none;
}

.commerce-mode-switch::-webkit-scrollbar {
  display: none;
}

.commerce-mode-switch button {
  flex: 0 0 auto;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #475569;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.commerce-mode-switch button:hover,
.commerce-mode-switch button:focus-visible {
  color: #5b21b6;
  background: rgba(255, 255, 255, 0.72);
  outline: none;
}

.commerce-mode-switch button.is-active {
  color: #ffffff;
  background: #7c3aed;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.22);
}

.commerce-mode-switch--workbench {
  margin: 0 auto 12px;
  width: min(100%, 980px);
  justify-content: center;
}

.commerce-mode-switch--result {
  margin: 0 0 8px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: visible;
}

.commerce-mode-switch--result button {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}

body[data-ecommerce-nav="true"] .commerce-mode-switch--result {
  border-color: rgba(124, 58, 237, 0.22);
  background: #f3edff;
}

@media (max-width: 520px) {
  .commerce-mode-switch--workbench {
    justify-content: flex-start;
  }

  .commerce-mode-switch button {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  .commerce-mode-switch--result {
    display: flex;
    overflow-x: auto;
  }

  .commerce-mode-switch--result button {
    flex: 0 0 auto;
    width: auto;
    min-width: 88px;
  }
}

/* Ecommerce workbench, projects, asset library, and playbook pages. */
body[data-app-feature="projects"] .page-container.app-container,
body[data-app-feature="asset-library"] .page-container.app-container,
body[data-app-feature="projects"] .main-area,
body[data-app-feature="asset-library"] .main-area {
  background: #f7faff !important;
}

body[data-app-feature="projects"] #resultPanel,
body[data-app-feature="asset-library"] #resultPanel,
body[data-app-feature="projects"] #authOnboardBanner,
body[data-app-feature="asset-library"] #authOnboardBanner {
  display: none !important;
}

body[data-app-feature="projects"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="asset-library"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="projects"] #mainDynamicStack,
body[data-app-feature="asset-library"] #mainDynamicStack,
body[data-app-feature="projects"] .commerce-workbench-panel.dynamic-panel--visible,
body[data-app-feature="asset-library"] .commerce-workbench-panel.dynamic-panel--visible {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  height: 100% !important;
}

.commerce-workbench-panel {
  min-height: 100% !important;
  overflow-y: auto !important;
  color: var(--yj-text-title) !important;
  background: var(--yj-surface-page) !important;
}

.commerce-workbench-shell {
  width: min(100%, 1360px) !important;
  margin: 0 auto !important;
  padding: 42px 40px 48px !important;
}

.commerce-workbench-head,
.designer-advisor-shell {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
  padding: 22px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

.commerce-workbench-kicker {
  display: inline-flex !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #ede9fe !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.commerce-workbench-head h3,
.designer-advisor-shell h3 {
  margin: 10px 0 6px !important;
  color: #0f172a !important;
  font-size: 32px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.commerce-workbench-head p,
.designer-advisor-shell p {
  max-width: 760px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.commerce-sop-layout {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.2fr) minmax(300px, 1fr) !important;
  gap: 16px !important;
}

.commerce-sop-card,
.project-card,
.asset-card {
  min-width: 0 !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.commerce-sop-card {
  padding: 18px !important;
}

.commerce-sop-card--brief,
.commerce-sop-card--action {
  grid-column: span 2 !important;
}

.commerce-step-index {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.commerce-sop-card h4 {
  margin: 10px 0 14px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.commerce-upload-box {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 210px !important;
  padding: 20px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #e0fbff 100%) !important;
  color: #334155 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.commerce-upload-box span {
  display: inline-flex !important;
  width: 54px !important;
  height: 54px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: #fff !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}

.commerce-upload-box strong,
.commerce-upload-box em {
  display: block !important;
  margin-top: 8px !important;
  font-style: normal !important;
}

.commerce-upload-box em {
  max-width: 260px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.commerce-type-grid,
.commerce-select-grid,
.commerce-field-grid {
  display: grid !important;
  gap: 10px !important;
}

.commerce-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.commerce-type-grid button {
  min-height: 40px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.commerce-type-grid button.active {
  border-color: #7c3aed !important;
  background: #ede9fe !important;
  color: #5b21b6 !important;
}

.commerce-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.commerce-field-grid label,
.commerce-select-grid label {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.commerce-field-grid input,
.commerce-field-grid textarea,
.commerce-select-grid select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 9px 11px !important;
}

.commerce-field-grid textarea {
  resize: vertical !important;
}

.commerce-sop-card--action {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.commerce-sop-card--action p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.commerce-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

.commerce-primary-btn,
.commerce-ghost-btn {
  display: inline-flex !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.commerce-primary-btn {
  border: 1px solid #7c3aed !important;
  background: #7c3aed !important;
  color: #fff !important;
}

.commerce-primary-btn--dark {
  border-color: #111827 !important;
  background: #111827 !important;
}

.commerce-ghost-btn {
  border: 1px solid #e5eaf2 !important;
  background: #fff !important;
  color: #475569 !important;
}

.commerce-primary-btn:disabled {
  border-color: #cbd5e1 !important;
  background: #e2e8f0 !important;
  color: var(--text-tertiary, #64748b) !important;
  cursor: not-allowed !important;
}

.project-board-grid,
.asset-library-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.project-card,
.asset-card {
  display: grid !important;
  align-content: end !important;
  gap: 10px !important;
  min-height: 180px !important;
  padding: 18px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.9)),
    linear-gradient(135deg, #dbeafe, #dcfce7 52%, #fef3c7) !important;
  color: #fff !important;
}

.project-card--new {
  cursor: pointer !important;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.85), rgba(17, 24, 39, 0.92)),
    linear-gradient(135deg, #ede9fe, #cffafe) !important;
}

.project-card em,
.asset-card span {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.project-card strong,
.asset-card strong {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.project-card span,
.asset-card em {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-style: normal !important;
}

.designer-advisor-shell {
  width: min(100% - 48px, 1280px) !important;
  margin: 28px auto 0 !important;
}

.designer-advisor-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  max-width: 420px !important;
}

.designer-advisor-points span {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.use-case-tile--playbook {
  align-content: end !important;
  min-height: 190px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.34)),
    var(--case-bg, #eef2f7) !important;
}

.use-case-tile--playbook span {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.use-case-tile--playbook button {
  width: fit-content !important;
  min-height: 34px !important;
  margin-top: 8px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

@media (max-width: 1100px) {
  .commerce-sop-layout,
.project-board-grid,
.asset-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .commerce-sop-card--brief,
.commerce-sop-card--action {
    grid-column: span 2 !important;
  }
}

@media (max-width: 760px) {
  .commerce-workbench-shell {
    padding: 24px 14px 30px !important;
  }

  .commerce-workbench-head,
.designer-advisor-shell {
    flex-direction: column !important;
    padding: 16px !important;
  }

  .commerce-workbench-head h3,
.designer-advisor-shell h3 {
    font-size: 28px !important;
  }

  .commerce-sop-layout,
.project-board-grid,
.asset-library-grid,
.commerce-field-grid {
    grid-template-columns: 1fr !important;
  }

  .commerce-sop-card--brief,
.commerce-sop-card--action {
    grid-column: span 1 !important;
  }

  .commerce-sop-card--action {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .commerce-action-row,
.designer-advisor-points {
    justify-content: flex-start !important;
  }

  .commerce-primary-btn,
.commerce-ghost-btn {
    width: 100% !important;
  }

  .designer-advisor-shell {
    width: calc(100% - 28px) !important;
  }
}

@media (max-width: 900px) {
}

/* ==================== 閸忋劌鐪柌宥囩枂 ==================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-family);
  font-size: var(--text-body);
  letter-spacing: 0;
  color: var(--text-main);
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-page);
  background-image: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--r-control);
}

/* 韫囧懎锝為弰鐔峰娇閿涘牐顕㈡稊澶涚窗韫囧懎锝?闁挎瑨顕ら幓鎰仛閿涘奔濞囬悽?--danger閿?*/
.required-star {
  color: var(--danger);
  margin-left: var(--space-1);
  font-weight: 700;
}

/* 娑撴槒銆冮崡鏇窗閸栧搫娼￠弽鍥暯閸撳秶娈?1閳? 閸﹀棗鑸版惔蹇撳娇閿涘牓娼х槐顐礉濞村懓澹?SaaS閿?*/
.section-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 1px 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.section-step-label {
  font-weight: inherit;
  color: inherit;
}

.poster-flow-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-control);
  background: var(--brand-light);
  border: 1px solid var(--border-focus);
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
}

.module-title--sellpoint {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ui-gap-2);
  min-height: 30px;
  box-sizing: border-box;
}

.poster-feature-block .poster-title-label {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ---------- 閸欘垰顦查悽銊ョ唨缁紮绱檉eatures / 閺備即娼伴弶鎸庣瑤鏉╂稒甯撮崗銉礉閸曞じ绗岄弮褔鈧瀚ㄩ崳銊ュ暱缁愪緤绱?---------- */
/* 鐞涖劌宕?闂堛垺婢橀崡锛勫閿涙氨绮烘稉鈧悰銊╂桨閿涘牊娴涙禒锝夋祩閺?utility 缁紮绱?*/
.yj-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
}

.yj-card--panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 闁挎瑨顕?閸涘﹨顒熼崡锛勫閿涘牊娴涙禒?Tailwind 缁俱垺顢?+ bg-[#1E1E1E]閿?*/
.yj-card--alert {
  padding: var(--space-4);
  border-color: rgba(239, 68, 68, 0.35);
  background-color: #fef2f2;
  color: #b91c1c;
  font-size: var(--text-small);
  line-height: 1.5;
  box-shadow: var(--shadow-card);
}

.yj-card--alert__code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.95em;
  color: #92400e;
}

/* 鐞涘苯鍞?Emoji 閸楃姳缍呴敍鍫熸禌娴?fa-solid閿涘矂浼╅崗宥呯摟娴ｆ挻婀崝鐘烘祰閺冨墎娈戦弬鐟版健閿?*/
.yj-emoji {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.08em;
}

.yj-img--broken {
  width: 100% !important;
  min-height: 140px;
  height: auto !important;
  object-fit: contain !important;
  background: #f3f4f6
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Crect fill='%23f3f4f6' width='120' height='80'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%239ca3af' font-size='22'%3E%F0%9F%96%BC%3C/text%3E%3C/svg%3E")
    center / 48px 48px no-repeat;
}

.yj-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ui-text-label);
  margin-bottom: var(--ui-gap-2);
  line-height: 1.45;
}

.yj-input,
.yj-select {
  min-height: var(--btn-height);
  height: var(--btn-height);
  border-radius: var(--ui-radius-yj);
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--text-body);
  padding: 0 var(--ui-gap-4);
  line-height: 1.4;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

textarea.yj-input {
  height: auto;
  min-height: 88px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.45;
  resize: vertical;
}

.yj-input::placeholder,
.yj-select::placeholder {
  color: var(--ui-text-hint);
}

.yj-input:focus,
.yj-input:focus-visible,
.yj-select:focus,
.yj-select:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.yj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-1);
  min-height: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--space-4);
  border-radius: var(--ui-radius-yj);
  border: 1px solid var(--ui-border);
  background: var(--ui-btn-idle);
  color: var(--ui-text-heading);
  font-weight: 500;
  font-size: var(--text-small);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.yj-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.yj-btn--secondary {
  border-color: var(--ui-border);
  background: var(--ui-btn-idle);
  color: var(--ui-text-heading);
}

.yj-btn--compact {
  min-height: 32px;
  height: auto;
  padding: 0 var(--ui-gap-2);
  font-size: var(--text-small);
}

.yj-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-1);
  min-height: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--ui-radius-yj);
  background: var(--primary-green);
  color: #ffffff;
  font-weight: 500;
  font-size: var(--text-body);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}

.yj-btn--primary:hover:not(:disabled) {
  opacity: 0.92;
}

.yj-upload-zone-core {
  min-height: var(--upload-zone-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--ui-gap-6);
}

.yj-param-group {
  margin-bottom: var(--ui-gap-4);
}

/* ============================================
   妞ょ敻娼版い鍫曞劥鐎佃壈鍩呴弽?
   ============================================ */
.top-bar {
  width: 100%;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.top-bar-brand {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  max-height: 64px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.top-bar-brand:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.42);
  outline-offset: 4px;
  border-radius: 10px;
}

.top-bar-brand::after {
  display: none;
}

.brand-wordmark-img {
  width: 118px;
  height: auto;
  display: block;
  flex: 0 0 auto;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  padding: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, transparent), rgba(139, 92, 246, 0.1));
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border-focus);
}

.brand-mark--icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.64), rgba(249, 115, 22, 0.38), rgba(6, 182, 212, 0.46));
  border: 0;
  padding: 2px;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.18), 0 1px 0 rgba(255, 255, 255, 0.92) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-mark-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}

.brand-mark-letters {
  color: #fff;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  transform: skew(-6deg) scaleX(1.04);
  text-shadow: 0 2px 8px rgba(30, 27, 75, 0.38);
}

.top-bar-brand .brand-icon {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-primary) 35%, transparent), rgba(255, 255, 255, 0.95));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
}

.top-bar-brand .brand-text {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0;
  transform: none;
  transform-origin: left center;
  display: block;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
}

.top-bar-brand .brand-tagline {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}

.top-bar-brand .brand-sub {
  display: none;
}


.top-bar-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
  max-height: 64px;
}

/* 妞よ埖鐖崘?.vip-btn 婢跺秶鏁ゆ笟褎鐖猾璇叉倳閿涘矂娓堕崢缁樺竴閸忋劌鐪?margin-top閿涘奔绗岀粔顖氬瀻 pill閵嗕礁鐦戦柦銉ユ倱妤傛ê顕?*/
.top-bar .vip-btn {
  margin-top: 0;
}

.top-bar-right .balance-pill strong {
  color: var(--text-main);
  font-weight: 700;
}

.top-bar-service-link {
  height: 36px;
  min-width: 86px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(6, 182, 212, 0.24);
  border-radius: var(--r-control);
  background: var(--cyan-soft);
  color: #0e7490;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.top-bar-service-link:hover {
  border-color: rgba(6, 182, 212, 0.42);
  background: #cffafe;
  color: #155e75;
}

.top-bar-service-link__text--short {
  display: none;
}

.top-bar-right .nav-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease-out, transform 200ms ease-out;
}

.top-bar-right .nav-link:hover {
  color: var(--text-main);
  transform: translateY(-1px);
}

.top-bar-right .msg-badge {
  position: relative;
}

.top-bar-right .msg-badge .badge-dot {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--danger);
  color: #FFF;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 8px;
  line-height: 16px;
  font-weight: 600;
}

.top-bar-right .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}

.top-bar-right .user-info:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.top-bar-right .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.top-bar-right .user-name {
  font-size: 13px;
  color: var(--text-secondary);
}

.top-bar-right .vip-tag {
  font-size: 10px;
  background: var(--primary-gradient);
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.top-bar-right .user-arrow {
  font-size: 10px;
  color: #7B8190;
}

.top-bar-cta__text--short {
  display: none;
}

@media (max-width: 390px) {
  .top-bar-service-link__text--full {
    display: none;
  }

  .top-bar-service-link__text--short {
    display: inline;
  }

  .top-bar-service-link {
    min-width: 48px;
    padding: 0 8px;
    font-size: 12px;
  }

  .top-bar .upgrade-plan-btn .top-bar-cta__text--full {
    display: none !important;
  }

  .top-bar .upgrade-plan-btn .top-bar-cta__text--short {
    display: inline !important;
  }

  .top-bar .upgrade-plan-btn {
    min-width: 56px;
    max-width: 72px;
    padding: 0 8px;
    font-size: 12px;
  }
}

/* ============================================
   娑撳鐖稉璇茬鐏炩偓鐎圭懓娅?   ============================================ */
.page-container,
.app-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  background-color: var(--bg-page);
  box-sizing: border-box;
  scroll-padding-top: 0;
}

/* ============================================
   瀹革缚鏅堕崝鐔诲厴閺?
   ============================================ */
.sidebar {
  width: 200px;
  flex: 0 0 200px;
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-module-y);
  /* 閻ｃ儲鏁圭槐褍涔忛崣鍐插敶鏉堢绐涢敍灞芥躬 200px 閹顔旀稉瀣╄礋閺嶅洨顒?+ 閺傚洦顢嶉悾娆忓毉閸欘垵顕扮€硅棄瀹?*/
  padding: var(--pad-card);
  box-sizing: border-box;
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
  background-color: var(--bg-card);
}

/* 瀹革缚绗呯憴鎺斝濋崚?+ 娴犲懎顕遍懜顏勫隘濠婃艾濮?*/
.sidebar--stack {
  overflow: hidden;
  min-height: 0;
  align-self: stretch;
}

.sidebar-top-chrome {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sidebar-top-chrome .sidebar-brand-jump {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  justify-content: flex-start;
}

.sidebar-top-chrome .sidebar-collapse-toggle__text {
  display: none !important;
}

.sidebar-top-chrome .sidebar-collapse-toggle--inline {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.sidebar-top-chrome .sidebar-collapse-toggle--inline:hover,
.sidebar-top-chrome .sidebar-collapse-toggle--inline:focus-visible {
  border-color: rgba(124, 58, 237, 0.38);
  background: rgba(124, 58, 237, 0.07);
  color: #6d28d9;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
  outline: none;
}

.sidebar-top-chrome .sidebar-collapse-toggle--inline .sidebar-collapse-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.sidebar-top-chrome .sidebar-collapse-toggle--inline.is-collapsed {
  border-color: rgba(124, 58, 237, 0.30);
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.06);
}

.sidebar-top-chrome .brand-mark-img--topbar {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16);
}

.sidebar-top-chrome .brand-wordmark-img {
  width: 96px;
  height: auto;
  transition: opacity 160ms ease, transform 160ms ease, width 160ms ease;
}

body.sidebar-is-collapsed .sidebar-top-chrome {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 42px;
}

body.sidebar-is-collapsed .sidebar-top-chrome .sidebar-brand-jump {
  position: relative;
  z-index: 1;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  overflow: hidden !important;
}

body.sidebar-is-collapsed .sidebar-top-chrome .brand-mark-img--topbar {
  display: block;
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

body.sidebar-is-collapsed .sidebar-top-chrome .brand-wordmark-img {
  display: none;
}

/* Collapsed rail: park the expand control on the logo; reveal on hover/focus. */
@media (min-width: 1024px) {
  body.sidebar-is-collapsed:not(.has-mobile-tab-bar) .sidebar-top-chrome .sidebar-collapse-toggle--inline {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 3 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border-color: rgba(124, 58, 237, 0.42) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #6d28d9 !important;
    box-shadow: 0 10px 22px rgba(76, 29, 149, 0.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(0.92) !important;
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }

  body.sidebar-is-collapsed:not(.has-mobile-tab-bar) .sidebar-top-chrome:hover .sidebar-collapse-toggle--inline,
  body.sidebar-is-collapsed:not(.has-mobile-tab-bar) .sidebar-top-chrome:focus-within .sidebar-collapse-toggle--inline,
  body.sidebar-is-collapsed:not(.has-mobile-tab-bar) .sidebar-top-chrome .sidebar-collapse-toggle--inline:focus-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.sidebar-is-collapsed:not(.has-mobile-tab-bar) .sidebar-top-chrome:hover .brand-mark-img--topbar,
  body.sidebar-is-collapsed:not(.has-mobile-tab-bar) .sidebar-top-chrome:focus-within .brand-mark-img--topbar {
    opacity: 0.28;
    filter: saturate(0.7);
    transform: scale(0.96);
  }
}

.sidebar-collapse-toggle {
  display: none;
}

.sidebar--stack .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar-wallet {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding: 12px 12px 11px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: #fbfaff;
  border: 1px solid #ece9f6;
  box-shadow: var(--yj-shadow-1);
}

.sidebar-wallet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6d28d9 0%, #a78bfa 52%, #7c3aed 100%);
  pointer-events: none;
}

.sidebar-wallet__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sidebar-wallet__tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sidebar-wallet__tools > button {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.sidebar-wallet__tools .notice-btn__icon {
  width: 16px;
  height: 16px;
}

.sidebar-wallet__tools .sidebar-wallet__refresh .yj-emoji {
  font-size: 16px;
  line-height: 1;
}

.sidebar-wallet__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.sidebar-wallet__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
  flex-shrink: 0;
}

.sidebar-wallet__balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.sidebar-wallet__num {
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: #4c1d95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.sidebar-wallet__unit {
  color: #7c3aed;
  font-size: 12px;
  font-weight: 700;
}

.sidebar-wallet__refresh {
  flex-shrink: 0;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #7c3aed;
  cursor: pointer;
}

.sidebar-wallet__refresh:hover {
  color: #6d28d9;
  border-color: #c4b5fd;
  background: #ffffff;
}

.sidebar-wallet__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sidebar-wallet__action {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.sidebar-wallet__action--recharge {
  background: #ffffff;
  border: 1px solid #c4b5fd;
  color: #6d28d9;
  box-shadow: 0 1px 2px rgba(109, 40, 217, 0.06);
}

.sidebar-wallet__action--recharge:hover {
  background: #7c3aed;
  border-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.22);
}

.sidebar-wallet__action--account {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #e9d5ff;
  color: #5b21b6;
  font-weight: 600;
  line-height: 1.25;
  padding: 5px 8px;
  min-height: 38px;
}

.sidebar-wallet__action--account:hover {
  background: #ffffff;
  border-color: #ddd6fe;
  color: #4c1d95;
}

.sidebar-use-cases-dock {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
  border-top: none;
}

.sidebar-use-cases-dock[hidden] {
  display: none !important;
}

.sidebar-use-cases-dock__btn {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
  color: #6d28d9;
  box-shadow: 0 1px 3px rgba(109, 40, 217, 0.08);
}

.sidebar-use-cases-dock__btn:hover {
  border-color: #c4b5fd;
  background: #ede9fe;
  color: #5b21b6;
}

.path-guide-mount {
  display: block;
  margin: 0 0 8px;
}

.path-guide-mount[hidden] {
  display: none !important;
  margin: 0;
}

.feature-path-guide {
  display: flex;
  align-items: center;
  gap: 0;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 8px;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(255, 255, 255, 0.98) 100%);
  overflow-x: auto;
  scrollbar-width: none;
}

.feature-path-guide::-webkit-scrollbar {
  display: none;
}

.feature-path-guide__step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
}

.feature-path-guide__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: transparent;
  flex-shrink: 0;
}

.feature-path-guide__num {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-tertiary, #64748b);
}

.feature-path-guide__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-tertiary, #64748b);
  white-space: nowrap;
}

.feature-path-guide__connector {
  flex: 1 1 14px;
  min-width: 8px;
  max-width: 20px;
  height: 1px;
  margin: 0 4px;
  background: #dbe1ea;
}

.feature-path-guide__step.is-active .feature-path-guide__dot {
  border-color: #6d28d9;
  background: #7c3aed;
}

.feature-path-guide__step.is-active .feature-path-guide__num {
  color: #fff;
}

.feature-path-guide__step.is-active .feature-path-guide__label {
  color: #0f172a;
  font-weight: 700;
}

.feature-path-guide__step.is-done .feature-path-guide__dot {
  border-color: #c4b5fd;
  background: #ede9fe;
}

.feature-path-guide__step.is-done .feature-path-guide__num {
  color: #6d28d9;
}

.feature-path-guide__step.is-done .feature-path-guide__label {
  color: #64748b;
}

.sidebar-footer-credits__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-primary);
}

.sidebar-footer-credits__icon .lucide-nav-svg {
  display: block;
}

.sidebar-footer-credits__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.35;
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-footer-credits__line {
  font-size: var(--text-small);
  font-weight: 500;
  color: #0f172a;
}

.sidebar-footer-credits__num {
  font-weight: 800;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1;
  color: #5b21b6;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sidebar-footer-credits__refresh,
.sidebar-credits-card__refresh {
  flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  margin-left: 0;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #7c3aed;
}

.sidebar-footer-credits__refresh:hover,
.sidebar-credits-card__refresh:hover {
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.34);
  background: #ffffff;
}

.sidebar-card {
  background: var(--bg-page);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--r-card);
  padding: var(--pad-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

.sidebar-nav {
  flex: 1;
}

.module-title {
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: var(--gap-control);
}

.nav-btn {
  min-height: 38px;
  height: 38px;
  max-height: 40px;
  box-sizing: border-box;
  border-radius: var(--r-control);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  padding: 0 8px 0 9px;
  margin-bottom: var(--gap-control);
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.nav-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  min-width: 18px;
  max-width: 20px;
  color: inherit;
  transition: transform 200ms ease-out, filter 200ms ease-out;
}

.nav-btn__icon .lucide-nav-svg {
  display: block;
  width: 18px;
  height: 18px;
  transition: width 200ms ease-out, height 200ms ease-out, stroke-width 200ms ease-out;
}

.nav-btn__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
  max-width: none;
}

.nav-tag--hot,
.nav-tag--new {
  background: var(--brand-light);
  color: var(--brand-primary);
  border: 1px solid var(--border-focus);
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  line-height: 1.25;
}

.nav-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  min-width: 18px;
  color: var(--text-tertiary);
}

.nav-group-icon .lucide-nav-svg {
  display: block;
  width: 16px;
  height: 16px;
}

.nav-group-title {
  flex: 1;
}

.nav-btn:last-child {
  margin-bottom: 0;
}

.nav-btn--disabled,
.nav-btn:disabled {
  background: #eef1f5;
  border-color: #d7dde7;
  border-left-color: #aeb7c5;
  color: #667085;
  cursor: not-allowed;
  opacity: 1;
}

.nav-btn--disabled .nav-btn__icon,
.nav-btn:disabled .nav-btn__icon {
  color: #667085;
}

.nav-btn--disabled .nav-btn__label,
.nav-btn:disabled .nav-btn__label {
  color: #667085;
  font-weight: 600;
}

.nav-tag--disabled {
  background: #f8fafc;
  color: #8a94a6;
  border: 1px solid #d7dde7;
}


.nav-btn[data-nav="basic"] {
  margin-top: 16px;
}

.nav-btn:hover {
  background: var(--brand-light);
  color: var(--brand-primary);
}

.nav-btn.active {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
  box-shadow: none;
  transform: none;
}

/* A navigation click may start synchronous panel work. Keep the selected item
   visibly responsive while the next frame hands off to that work. */
.nav-btn.is-pending {
  background: #f5f3ff;
  color: #5b21b6;
  border-color: #ddd6fe;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.nav-btn.is-pending::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border: 2px solid rgba(124, 58, 237, 0.25);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: yj-nav-pending-spin 700ms linear infinite;
}

@keyframes yj-nav-pending-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-btn.is-pending::after { animation: none; }
}

.nav-btn.active .nav-btn__label {
  font-size: 13.5px;
  font-weight: 700;
}

.nav-btn.active .nav-btn__icon {
  transform: none;
  filter: none;
}

.nav-btn.active .nav-btn__icon .lucide-nav-svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.nav-btn i {
  width: 18px;
  min-width: 18px;
  max-width: 20px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
}

.nav-divider {
  height: 1px;
  background: var(--border-light);
  margin: 16px 0;
}

/* 娑撳鐖宀勬桨閿涙矮鏅堕弽蹇曟殣閸旂姴顔?+ 鐎佃壈鍩呯純鎴炵壐閿涘矂浼╅崗宥冣偓瀛╝no Ba閳ワ负鈧秶鐡戠敮姝岊潌閸氬秷顫﹂惇浣烘殣閿涘牓銆忛崘娆忔躬閸╄櫣顢?.nav-btn 娑斿鎮楁禒銉洬閻?flex/ellipsis閿?*/
@media (min-width: 1024px) {
  .sidebar {
    width: 218px;
    flex: 0 0 218px;
    padding: 12px 8px 12px 10px;
  }

  .sidebar .sidebar-nav.sidebar-card {
    padding: 10px 7px;
  }

  .sidebar--stack .sidebar-nav {
    overflow-x: clip;
  }

  .sidebar-nav .nav-btn {
    display: grid;
    grid-template-columns: 20px minmax(min-content, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 0 6px 0 8px;
  }

  .sidebar-nav .nav-btn__icon {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    justify-self: center;
  }

  .sidebar-nav .nav-btn__label {
    flex: unset;
    min-width: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .sidebar-nav .nav-tag {
    justify-self: end;
    margin-left: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
  }

  /* 娑擃參妫块柊宥囩枂閸栧搫濮炵€规枻绱伴崘鍛村劥閸楋紕澧栭柧鐑樺姬閿涘矂浼╅崗宥勭癌濞?max-width閿涙稒鐖ｆ０妯款攽鐏忓繐鐡х亸鎴炲焻閺?*/
  .main-area > .yj-card.yj-card--panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .main-area .dynamic-panel-stack {
    width: 100%;
    max-width: 100%;
  }

  .main-area #panelStandard.dynamic-panel--visible,
.main-area #panelGptImage.dynamic-panel--visible,
.main-area #panelNanoBanana.dynamic-panel--visible,
.main-area #panelRewrite.dynamic-panel--visible {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .main-area #gpt-image-panel,
.main-area #nano-banana-panel,
.main-area #gpt-image-form-root {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .main-area .params-section,
.main-area .param-group,
.main-area .upload-section-group {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .main-area .model-btns,
.main-area .ratio-btns,
.main-area .resolution-btns {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .main-area .step-inline-hint,
.main-area .step-inline-hint-slot {
    max-width: min(300px, 54%);
  }

  .main-area .step-title-main {
    overflow: visible;
    text-overflow: clip;
  }

  .main-area .param-group .module-title > .section-step-label {
    overflow: visible;
    text-overflow: clip;
  }

  .main-area .param-group .module-title > .hint-text--inline {
    max-width: min(50%, 300px);
  }

  #gpt-image-panel .ratio-btns--gpt-aspect,
#nano-banana-panel .ratio-btns--gpt-aspect,
.ratio-resolution-card .ratio-btns--gpt-aspect {
    gap: 7px;
  }

  #gpt-image-panel .ratio-btns--gpt-aspect .ratio-btn,
#nano-banana-panel .ratio-btns--gpt-aspect .ratio-btn,
.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn {
    min-height: 36px;
    height: 36px;
    max-height: 38px;
    padding: 3px 6px;
    font-size: 12px;
  }

  #gpt-image-panel .ratio-btns--gpt-aspect .ratio-btn__s,
#nano-banana-panel .ratio-btns--gpt-aspect .ratio-btn__s,
.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn__s {
    font-size: 10px;
  }

  #gpt-image-panel .resolution-btns--gpt-compact,
#nano-banana-panel .resolution-btns--gpt-compact,
.ratio-resolution-card .resolution-btns--gpt-compact {
    gap: 7px;
  }

  #gpt-image-panel .resolution-btns--gpt-compact .resolution-btn,
#nano-banana-panel .resolution-btns--gpt-compact .resolution-btn,
.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn {
    min-height: 34px;
    height: 34px;
    max-height: 36px;
    padding: 0 5px;
  }

  #gpt-image-panel .gpt-model-grid .model-btn .gpt-model-card-desc,
#nano-banana-panel .gpt-model-grid .model-btn .gpt-model-card-desc {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* 娑擃厾鐡戝宀勬桨鐟欏棗褰涢敍姘舵閽?HOT/NEW閿涘本濡哥€硅棄瀹抽悾娆戠舶閸旂喕鍏橀崥宥忕礄閳?361px 婵?1440 閸愬秵妯夌粈鐑樼垼缁涙拝绱?*/
@media (min-width: 1024px) and (max-width: 1360px) {
  .sidebar-nav .nav-tag {
    display: none;
  }
}

/* 娴兼艾鎲抽崡锛勫 */
.vip-card {
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--r-card);
  padding: 10px;
  box-shadow: none;
  border: 1px solid var(--border-light);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 1;
  min-height: 0;
}

.vip-card--quiet {
  background: #fff;
}

.vip-card__hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.vip-card .vip-icon {
  font-size: 22px;
  color: var(--primary-color);
  margin-bottom: 0;
}

.vip-card .vip-title {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0;
}

.vip-card .vip-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 0;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.vip-pricing {
  border: 1px solid rgba(249, 115, 22, 0.18);
  background: #ffffff;
  border-radius: var(--r-control);
  padding: 10px 12px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebar .vip-card .vip-pricing {
  display: none;
}

.vip-price-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
  color: var(--text-secondary);
  font-size: 12px;
}

.vip-price-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vip-price-item__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

.vip-price-item__title-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.vip-price-item__title-row .vip-price-item__value-line--after-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #9ca3af;
  font-weight: 400;
}

.vip-price-item__price-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.vip-price-item__amount {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: #c2410c;
  letter-spacing: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.vip-price-item__price-row .vip-price-item__value-line--after-price {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #9ca3af;
}

.vip-price-item__per {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.vip-price-item__value-line {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: #9ca3af;
}

.vip-btn {
  height: var(--btn-height);
  width: 100%;
  border-radius: var(--r-control);
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-coral));
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid rgba(249, 115, 22, 0.45);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  margin-top: 12px;
  flex-shrink: 0;
}

.vip-btn:hover {
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.22);
  filter: none;
  background: linear-gradient(135deg, #ea580c, var(--accent-coral));
}

.vip-btn:active {
  transform: none;
}

.sidebar .vip-card .vip-btn.vip-btn--sidebar-recharge {
  margin-top: 0;
  margin-bottom: 0;
  min-height: 40px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 52%, #ec4899 100%);
  color: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.28);
}

.sidebar .vip-card .vip-btn.vip-btn--sidebar-recharge:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.34);
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 52%, #db2777 100%);
  border-color: rgba(124, 58, 237, 0.28);
  color: #ffffff;
}

/* ============================================
   娑擃參妫块弽绋跨妇閹垮秳缍旈崠鐚寸礄濡楀矂娼版稉澶嬬埉閿涙氨瀹?460px閿涘瞼绮ㄩ弸婊冨隘 flex 閸楃姴澧挎担娆欑礆
   ============================================ */
.main-area {
  flex: 0 0 460px;
  width: 460px;
  min-width: 440px;
  max-width: 480px;
  flex-shrink: 0;
  flex-grow: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  background-color: var(--bg-page);
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--form-panel-padding);
  scroll-margin-top: 64px;
  --form-panel-padding: var(--pad-card);
  --form-step-gap: var(--gap-module-y);
  --form-title-gap: 6px;
  --form-step-padding: 10px;
}

.main-area > .yj-card--panel {
  flex: 1 1 auto;
  min-height: 0;
  /* 閸樼粯甯€娑撳簼瀵岄崠鍝勭俺閼硅弓姘﹂悾灞筋槱閻ㄥ嫬绨冲鍡欏殠閿?yj-card 閸ユ稖绔熼幓蹇氱珶閸︺劌绨抽柈銊︽閸涘牄鈧苯顦挎稉鈧弶锛勫殠閵嗗稄绱?*/
  border-bottom: none;
}

/* 瀹革缚鏅堕崝鐔诲厴娑撹宕遍敍姘瑢娑擃參妫块弽蹇撶俺閼规彃灏崚鍡礉缂佺喍绔撮崘鍛扮珶鐠烘繀绗岄崷鍡氼潡閿涘牅绮?main-area閿?*/
.main-area > .yj-card.yj-card--panel {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: var(--form-panel-padding);
  border-radius: var(--form-panel-radius);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

/* ---------- 瀹革缚鏅堕崝鐔诲厴閸栭缚銆冮崡鏇㈡？鐠烘繄閮寸紒鐕傜礄娴?.main-area閿涘奔绗夐崝銊х波閺嬫粌灏?瀵湱鐛ラ敍?---------- */
.main-area .param-group,
.main-area .model-section,
.main-area .upload-section-group,
.main-area .poster-feature-block,
.__REMOVE_ME__ {
  margin: 0 0 var(--form-step-gap);
  padding: 0;
  border: none;
  background: transparent;
}

.main-area .params-section {
  margin-bottom: var(--form-step-gap);
}

.main-area .model-section {
  margin-top: 0;
}

.main-area .module-title.step-title-row,
.main-area .upload-block .upload-card-header .step-title-row,
.main-area .matting-step-card > .step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--form-inner-gap);
  min-width: 0;
  margin-bottom: var(--form-title-gap);
  min-height: 0;
}

.main-area .step-title-row .step-title-main,
.main-area .upload-block .upload-block__main-title.step-title-main {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-area .step-inline-hint,
.main-area .step-inline-hint-slot {
  flex-shrink: 1;
  min-width: 0;
  max-width: min(46%, 188px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-small);
  line-height: 1.25;
}

.main-area .upload-ref-extras {
  border-top: none;
  margin-top: 5px;
  padding-top: 5px;
}

.main-area .main-generate-sticky {
  border-top: none;
  background: transparent;
  padding-top: 6px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0));
}

.main-area .poster-count-section {
  margin-bottom: var(--form-step-gap);
  padding: 5px 8px !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
}

.main-area .poster-count-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.main-area .poster-count-btn {
  min-height: 28px !important;
  height: 28px !important;
  max-height: 30px;
  padding: 0 6px;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--form-chips-radius);
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.main-area .poster-count-btn:hover:not(.active):not(:disabled) {
  border-color: rgba(124, 58, 237, 0.38) !important;
  background: #f5f3ff !important;
  color: #4c1d95 !important;
}

.main-area .poster-count-btn.active {
  border-color: #7c3aed !important;
  background: #7c3aed !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18) !important;
}

body:not([data-app-feature="poster"]) .poster-count-section {
  display: none !important;
}

.main-area .generate-btn {
  min-height: var(--form-main-btn-height);
  height: var(--form-main-btn-height);
  max-height: var(--form-main-btn-height);
  border-radius: var(--form-chips-radius);
  margin-top: 0;
}

.main-area .generate-hint {
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.main-area .btn-toggle-reference {
  min-height: 34px;
  align-items: center;
}

.main-area .btn-toggle-reference__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

.main-area .btn-toggle-reference__text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--yj-text-body, #334155);
}

.main-area .btn-toggle-reference__text small {
  font-size: 10px;
  font-weight: 500;
  color: var(--yj-text-muted, #64748b);
}

.main-area .custom-input:not(textarea),
.main-area input.custom-input.poster-title-input,
.main-area #poster-title-input.poster-title-input {
  min-height: var(--form-control-height);
  height: var(--form-control-height-max);
  max-height: var(--form-control-height-max);
  box-sizing: border-box;
}

.main-area #panelStandard:not(.mode-matting) .upload-block .preview-container.preview-area {
  max-height: 100px;
}

.main-area #panelStandard:not(.mode-matting) .upload-block .preview-container .upload-zone {
  min-height: 86px;
}

.main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product {
  padding: 9px 10px;
  gap: 7px;
}

.main-area #panelStandard:not(.mode-matting) .upload-card-header--minimal {
  margin-bottom: var(--form-title-gap);
}

.main-area #panelStandard .model-btn {
  min-height: var(--form-model-btn-height);
  height: var(--form-model-btn-height);
  max-height: var(--form-model-btn-height);
  border-radius: var(--form-chips-radius);
  font-size: 12px;
  padding: 6px 36px 6px 10px;
}

/* 閺嶅洤鍣稉缁樼ウ缁?#modelBtns閿涙矮瀵岄崥?+ 濞夈劏袙 */
.main-area #panelStandard #modelBtns.model-btns {
  gap: 6px;
  margin-bottom: 0;
}

.main-area #panelStandard #modelBtns.model-btns .model-btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  height: auto;
  max-height: none;
  padding: 5px 24px 5px 8px;
}

.main-area #panelStandard #modelBtns.model-btns .model-btn .model-name {
  flex: 0 0 auto;
  width: 100%;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.15;
}

.main-area #panelStandard #modelBtns.model-btns .model-btn .model-desc {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-area #panelStandard #modelBtns.model-btns .model-btn.selected .model-desc {
  color: rgba(255, 255, 255, 0.82);
}

.main-area #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card {
  padding: 9px var(--form-panel-padding);
  gap: 8px;
}

.main-area #panelStandard .ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn,
.main-area #panelStandard .ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn {
  min-height: var(--form-chip-height);
  max-height: calc(var(--form-chip-height) + 4px);
  border-radius: var(--form-chips-radius);
  font-size: 11px;
}

.main-area .saas-panel-head {
  margin-bottom: var(--form-step-gap);
}

.main-area .saas-step-block {
  margin-bottom: var(--form-step-gap);
}

.main-area .saas-step-block:last-of-type {
  margin-bottom: var(--form-step-gap);
}

.main-area .saas-step-head {
  margin-bottom: var(--form-title-gap);
  gap: var(--form-inner-gap);
  min-height: 0;
}

.main-area .saas-step-row-two-col,
.main-area .saas-step-row-dual {
  gap: var(--form-inner-gap);
}

.main-area .saas-step-row-upload-prompt {
  gap: var(--form-step-gap);
}

.main-area .saas-step-row-ratio-clarity .ratio-btn,
.main-area .saas-step-row-ratio-clarity .resolution-btn {
  min-height: var(--form-chip-height);
  height: var(--form-chip-height);
  max-height: calc(var(--form-chip-height) + 2px);
  border-radius: var(--form-chips-radius);
  font-size: 12px;
}

.main-area .saas-step-row-scene-model .model-btn {
  min-height: var(--form-model-btn-height);
  height: var(--form-model-btn-height);
  max-height: var(--form-model-btn-height);
  border-radius: var(--form-chips-radius);
}

.main-area .saas-advanced-block {
  margin-bottom: var(--form-step-gap);
}

.main-area .saas-advanced-block__body > .param-group {
  margin-bottom: 0;
}

.main-area #gpt-image-panel .param-group,
.main-area #nano-banana-panel .param-group,
.main-area #gpt-image-form-root .param-group {
  margin: 0 0 var(--form-step-gap);
  padding: 0;
  border: none;
  background: transparent;
}

.main-area #gpt-image-panel .param-group:last-child,
.main-area #nano-banana-panel .param-group:last-child,
.main-area #gpt-image-form-root .param-group:last-child {
  margin-bottom: var(--form-step-gap);
}

.main-area #gpt-image-panel .gpt-prompt-group,
.main-area #nano-banana-panel .gpt-prompt-group,
.main-area #gpt-image-form-root .gpt-prompt-group {
  margin-bottom: 0;
}

.main-area .matting-step-card {
  padding: var(--form-step-padding);
  border-radius: var(--r-card);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-card);
}

.main-area .matting-step-card > .step-title-row {
  margin-bottom: var(--form-title-gap);
}

.main-area .matting-tool-btn.active {
  background: var(--primary-solid);
  border-color: var(--primary-solid);
  color: #fff;
  box-shadow: var(--shadow-primary-hover);
}

/* 娑擃參妫块弽蹇撳隘閸ф妫跨捄婵撶窗閸忓ジ銆愭稉鈧仦蹇撶潔缁€杞扮瑢閸涚厧鎯涢幇?*/
.main-area > section {
  margin-bottom: 8px;
}

.main-area .dynamic-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.dynamic-panel {
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.dynamic-panel.dynamic-panel--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Infinite canvas FOUC guard: never flash raw ops DOM before deferred CSS pack is ready. */
html:not([data-yj-pack-ops-creation="ready"]) body[data-app-feature="operation-center"] #panelOperationCenter {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 鍔熻兘鍒囨崲鍚庡彲瑙侀潰鏉夸笉寰楀仠鐣欏湪 opacity:0锛堜粎浣滅敤浜庡綋鍓嶆樉绀虹殑 dynamic-panel锛?*/
.main-area .dynamic-panel.dynamic-panel--visible:not([hidden]) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 骞跺彂婊¤浇鎻愮ず锛氬彧浣滅敤浜庢彁浜ゆ寜閽紝涓嶅奖鍝嶇埗绾ч潰鏉?绱犳潗姹?*/
.generate-btn[data-yj-gen-concurrency-at-cap],
#rewriteSubmitBtn[data-yj-gen-concurrency-at-cap],
#gptImageGenerateBtn[data-yj-gen-concurrency-at-cap],
#nanoImageGenerateBtn[data-yj-gen-concurrency-at-cap] {
  cursor: pointer;
}

#panelStandard.dynamic-panel--visible {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 閺嶅洤鍣稉缁樼ウ缁嬪绱版径褍灏崸妞剧矌閻?flex gap閿涘矂浼╅崗?margin 娑?gap 閸欑姴甯囩€佃壈鍤ч妴灞肩瑐閺夊彞绗呯槐褋鈧?*/
#panelStandard.dynamic-panel--visible:not(.mode-matting) {
  gap: var(--form-step-gap);
}

.main-area #panelStandard:not(.mode-matting) > #standardUploadMount,
.main-area #panelStandard:not(.mode-matting) > #posterFeatureBlock,
.main-area #panelStandard:not(.mode-matting) > .target-platform-section,
.main-area #panelStandard:not(.mode-matting) > .model-section,
.main-area #panelStandard:not(.mode-matting) > .params-section {
  margin-block: 0;
}

.main-area #panelStandard:not(.mode-matting) #productUploadSection.upload-section-group {
  margin-bottom: 0;
  gap: var(--form-step-gap);
}

#panelStandard.mode-matting {
  display: flex;
  flex-direction: column;
  gap: var(--form-step-gap);
}

#panelStandard.mode-matting .panel-hide-when-matting {
  display: none !important;
}

/* 娑撯偓闁款喗濮為崶?缁彞鎱ㄩ敍姘瑝鐏炴洜銇氶崣鍌濃偓鍐ㄦ禈閸忋儱褰?*/
#panelStandard.mode-matting .upload-ref-extras {
  display: none !important;
}

/* 娑撯偓闁款喗濮為崶?缁彞鎱ㄩ敍姘獓閸濅礁娴橀崷銊ょ瑐閿涘本褰佺粈楦跨槤缁毖嗙閸忔湹绗呴敍鍫濇倱娑撯偓閸ф瀵曟潪钘夊隘閸愬懐鏃遍崥鎴炲笓閸掓绱?*/
#panelStandard.mode-matting #standardUploadMount {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--form-step-gap);
  margin-bottom: 0;
}

#panelStandard.mode-matting #productUploadSection {
  order: 1;
  flex: 0 0 auto;
  min-height: 0;
}

#panelStandard.mode-matting .upload-block--product {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  gap: 8px;
}

/* 閹剁姴娴樺Ο鈥崇础閿涙矮绗傛导鐘插隘缁毖冨櫨娴ｅ棔绮涢弰鎾跺仯閿涙稑鎬ラ崠鏍ㄧ垼妫版ɑ姊虹敮顔煎И閸ョ偓鐖?*/
#panelStandard.mode-matting .upload-block--product .upload-block__help {
  opacity: 0.42;
  color: #64748b;
}

#panelStandard.mode-matting .upload-block--product .upload-block__help:hover {
  opacity: 0.75;
  color: var(--text-tertiary, #64748b);
}

/* 閹剁姴娴橀幍褰掑櫤閿涙艾銇囨稉濠佺炊閸?+ 濞ｅ崬绨抽搹姘卞殠 + 閹锋牗瀚挎妯瑰瘨 */
#panelStandard.mode-matting #uploadZone {
  position: relative;
  z-index: 2;
  min-height: 188px;
  max-height: min(68vh, 720px);
  padding: 24px;
  background: #f7f8fb;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

#panelStandard.mode-matting #uploadZone.drag-over {
  border-color: var(--color-primary) !important;
  background: var(--brand-light) !important;
  box-shadow:
    0 0 0 1px var(--border-focus),
    inset 0 0 40px color-mix(in srgb, var(--color-primary) 6%, transparent);
}

#panelStandard.mode-matting .upload-block .preview-container .upload-zone {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  justify-items: stretch;
}

#panelStandard.mode-matting .upload-block .upload-zone .uploaded-item {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  min-height: 0;
  max-height: none;
}

#panelStandard.mode-matting .upload-block .upload-zone .add-image-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 132px;
  height: auto;
  padding: 24px 20px;
  gap: 10px;
  box-sizing: border-box;
  background: var(--bg-card);
  border-color: var(--border-light);
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item),
#panelStandard.mode-matting #uploadZone.upload-zone--has-items,
#panelStandard.mode-matting #uploadZone.upload-zone--matting-compact {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 100px !important;
  height: 100px !important;
  max-height: 100px !important;
  padding: 8px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #e2e8f0 !important;
  background: #fff !important;
  box-shadow: none;
}

#panelStandard.mode-matting #uploadZone.upload-zone--has-items {
  background: #fff;
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .uploaded-list,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .uploaded-list,
#panelStandard.mode-matting #uploadZone.upload-zone--matting-compact .uploaded-list {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  height: 84px;
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .uploaded-item,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .uploaded-item,
#panelStandard.mode-matting #uploadZone.upload-zone--matting-compact .uploaded-item,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .uploaded-item.uploaded-item--matting {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  min-width: 84px;
  height: 84px;
  min-height: 84px;
  aspect-ratio: 1;
  display: block;
  opacity: 1;
  visibility: visible;
  border-radius: 6px;
  overflow: hidden;
  background: #f7f8fb;
  border: 1px solid #e5e9f2;
  box-sizing: border-box;
}

#panelStandard.mode-matting #uploadZone.upload-zone--has-items .uploaded-item__remove-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .uploaded-item img,
#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .uploaded-item .preview-img,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .uploaded-item img,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .uploaded-item .preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .add-image-btn,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .add-image-btn,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .add-image-btn.add-image-btn--compact {
  flex: 0 0 84px !important;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  min-height: 84px !important;
  height: 84px !important;
  padding: 0 !important;
  margin: 0;
  flex-direction: column;
  gap: 0;
  border-style: dashed;
  justify-content: center;
  align-items: center;
  grid-column: auto;
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .add-image-btn__plus,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .add-image-btn__plus,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .add-image-btn.add-image-btn--compact .add-image-btn__plus {
  font-size: 22px;
}

#panelStandard.mode-matting #uploadZone:has(.uploaded-item) .add-image-btn .upload-text,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .add-image-btn .upload-text,
#panelStandard.mode-matting #uploadZone.upload-zone--has-items .add-image-btn.add-image-btn--compact .upload-text {
  display: none !important;
}

#panelStandard.mode-matting .upload-block--product:has(.uploaded-item) .preview-container.preview-area,
#panelStandard.mode-matting .upload-block--product:has(.uploaded-item) .upload-block__body--preview-only,
#panelStandard.mode-matting .upload-block--product:has(.upload-zone--has-items) .preview-container.preview-area,
#panelStandard.mode-matting .upload-block--product:has(.upload-zone--has-items) .upload-block__body--preview-only,
#panelStandard.mode-matting .upload-block--product:has(.upload-zone--matting-compact) .preview-container.preview-area,
#panelStandard.mode-matting .upload-block--product:has(.upload-zone--matting-compact) .upload-block__body--preview-only {
  min-height: 100px !important;
  max-height: 100px !important;
  overflow: visible;
}

#panelStandard.mode-matting .upload-block--product:has(.upload-zone--has-items),
#panelStandard.mode-matting .upload-block--product:has(.upload-zone--matting-compact) {
  min-height: 0 !important;
}

#panelStandard.mode-matting #uploadZone .uploaded-item__missing-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  color: #7b8496;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  background: #f7f8fb;
}

#panelStandard.mode-matting .upload-block .upload-zone .add-image-btn .upload-text,
#panelStandard.mode-matting .upload-block .reference-upload-zone .add-image-btn .upload-text {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.45;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#panelStandard.mode-matting #uploadZone .add-image-btn .upload-text {
  max-width: 260px;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

#panelStandard.mode-matting .upload-block .upload-zone .add-image-btn__plus i {
  font-size: 32px;
}

.matting-upload-title-hint {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
  margin-left: 4px;
}

.matting-upload-meta {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

#panelStandard.mode-matting .matting-upload-meta {
  margin-top: 8px;
}

.matting-upload-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.matting-upload-meta__count {
  font-size: 12px;
  color: var(--text-secondary);
}

#panelStandard.mode-matting #mattingClearAllBtn.gpt-upload-clear-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

#panelStandard.mode-matting .upload-card-header--minimal .step-title-row {
  align-items: center;
}

#panelStandard.mode-matting .matting-upload-meta {
  margin-top: 6px;
}

/* ========== 娑撯偓闁款喚娲块崙鐑樻崳閹躲儻绱板ù閿嬪Г閻╊喗鐖?+ 娑撶粯鐖ｆ０?========== */
.poster-feature-block {
  width: 100%;
  margin-bottom: var(--form-step-gap, 10px);
}

.poster-feature-block__group {
  margin-bottom: var(--form-step-gap, 10px);
}

.poster-feature-block__group:last-child {
  margin-bottom: 0;
}

.poster-scene-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.poster-scene-btn {
  min-height: 30px;
  height: 30px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid #dfe5ef;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.poster-scene-btn:hover:not(.active) {
  border-color: rgba(124, 58, 237, 0.34);
  color: var(--brand-primary);
}

.poster-scene-btn.active {
  border-color: rgba(124, 58, 237, 0.72);
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.16);
}

@media (max-width: 420px) {
  .poster-scene-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .poster-scene-btn {
    padding: 0 8px;
    border-radius: 5px;
  }
}

/* 娑撳娼伴弶鍖＄窗閻╊喗鐖ｉ獮鍐插酱閿涘牓鈧瀚ㄥΟ鈥崇€锋稊瀣閿?*/
.target-platform-section {
  margin-bottom: var(--form-step-gap, 10px);
}

.target-platform-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.target-platform-btn {
  min-height: var(--form-chip-height, 32px);
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: var(--form-chips-radius, 10px);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.target-platform-btn:hover:not(.active) {
  border-color: var(--border-focus);
  color: var(--brand-primary);
  background: var(--brand-light);
}

.target-platform-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

@media (max-width: 420px) {
  .target-platform-btns {
    grid-template-columns: 1fr;
  }
}

.poster-scene-hint {
  margin: var(--ui-gap-2) 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ui-text-hint);
}

.poster-title-label {
  display: block;
  margin-bottom: var(--ui-gap-2);
}

.poster-title-input {
  width: 100%;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-feature-block .module-title.step-title-row {
  margin-bottom: 8px;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-feature-block {
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid #e8ecf3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-feature-block__group {
  margin-bottom: 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-feature-block__group:last-child {
  margin-bottom: 0;
}

body[data-app-feature="poster"] .main-area #panelStandard .model-section {
  margin-top: 0;
  padding: 12px;
  border: 1px solid #e8ecf3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

body[data-app-feature="poster"] .main-area #panelStandard .model-section > .module-title.step-title-row {
  gap: 8px;
  margin-bottom: 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard .model-section > .module-title .step-title-main {
  flex: 0 0 auto;
  width: auto;
  overflow: visible;
  text-overflow: clip;
}

body[data-app-feature="poster"] .main-area #panelStandard .model-section > .module-title .section-step-label,
body[data-app-feature="poster"] .main-area #panelStandard .model-section > .module-title .required-star {
  flex: 0 0 auto;
  margin-left: 0;
}

body[data-app-feature="poster"] .main-area #panelStandard .model-section > .module-title .step-inline-hint {
  margin-left: auto;
}

body[data-app-feature="poster"] .main-area #panelStandard .custom-input-wrap {
  margin-bottom: 0;
  border-bottom: none;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-title-input {
  height: 36px;
  min-height: 36px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  padding: 0 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-title-input:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.35);
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-title-input:focus {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
  outline: none;
}

body[data-app-feature="poster"] .main-area #panelStandard .standard-output-select-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

body[data-app-feature="poster"] .main-area #panelStandard .gpt-ratio-section,
body[data-app-feature="poster"] .main-area #panelStandard .gpt-resolution-section {
  display: none !important;
}

body[data-app-feature="poster"] .main-area #panelStandard .gpt-aspect-clarity-card {
  padding: 12px;
  gap: 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard .standard-output-select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body[data-app-feature="poster"] .main-area #panelStandard .standard-setting-select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 0 28px 0 10px;
}

body[data-app-feature="poster"] #mainGenerateSticky.main-generate-sticky {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}

body[data-app-feature="poster"] #mainGenerateSticky .generate-btn {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
  border-radius: 5px !important;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="poster"] #mainGenerateSticky .generate-hint {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}

#panelStandard.mode-poster .panel-hide-when-poster,
body[data-app-feature="poster"] .panel-hide-when-poster {
  display: none !important;
}

#panelStandard:not(.mode-poster) #posterFeatureBlock,
#panelStandard:not(.mode-poster) .panel-show-when-poster,
body:not([data-app-feature="poster"]) #panelStandard #posterFeatureBlock {
  display: none !important;
}

#panelStandard.mode-poster #posterFeatureBlock:not([hidden]),
body[data-app-feature="poster"] #panelStandard #posterFeatureBlock:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-app-feature="poster"] #panelStandard .poster-feature-block__group,
#panelStandard.mode-poster .poster-feature-block__group {
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#panelStandard.mode-poster .panel-show-when-poster:not([hidden]),
body[data-app-feature="poster"] .panel-show-when-poster:not([hidden]) {
  display: inline !important;
}

#panelStandard.mode-poster .standard-output-select-grid .panel-show-when-poster.standard-output-select-field,
body[data-app-feature="poster"] .standard-output-select-grid .panel-show-when-poster.standard-output-select-field {
  display: flex !important;
}

body[data-app-feature="poster"] .main-area #panelStandard .upload-ref-extras.panel-hide-when-poster {
  display: block !important;
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

body[data-app-feature="poster"] .main-area #panelStandard .btn-toggle-reference {
  display: flex;
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e5e9f2;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  justify-content: flex-start;
}

body[data-app-feature="poster"] .main-area #panelStandard .btn-toggle-reference:hover {
  border-color: rgba(124, 58, 237, 0.32);
  background: #fbf8ff;
  color: var(--brand-primary);
}

body[data-app-feature="poster"] .main-area #panelStandard .btn-toggle-reference__icon {
  color: var(--brand-primary);
  font-size: 12px;
}

body[data-app-feature="poster"] .main-area #panelStandard .btn-toggle-reference__text strong {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}

@media (max-width: 520px) {
  #panelStandard.mode-matting .upload-block .preview-container .upload-zone {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #panelStandard.mode-matting #uploadZone:not(.upload-zone--has-items):not(.upload-zone--matting-compact) {
    min-height: 180px;
    max-height: min(58vh, 560px);
    padding: 24px;
  }

  #panelStandard.mode-matting #uploadZone:not(.upload-zone--has-items):not(.upload-zone--matting-compact) .add-image-btn {
    min-height: 140px;
    padding: 20px 14px;
  }
}

#panelStandard.mode-matting #mattingPromptWrap {
  order: 2;
  flex: 0 0 auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

#panelStandard.mode-matting .params-section {
  order: 3;
  flex: 0 1 auto;
  min-height: 0;
}

.matting-prompt-wrap {
  width: 100%;
  min-width: 0;
}

.matting-step-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: var(--r-card);
  background: var(--bg-card);
  padding: 12px;
  margin: 0;
  min-width: 0;
  box-shadow: var(--shadow-card);
}

#panelStandard.mode-matting .matting-step-card > .step-title-row {
  margin-bottom: 8px;
}

.matting-tool-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  width: 100%;
}

.matting-model-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  width: 100%;
}

.matting-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.matting-tool-btn {
  min-height: 40px;
  height: auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r-control);
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  line-height: 1.25;
  text-align: left;
  box-sizing: border-box;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.matting-tool-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  font-size: 14px;
  line-height: 1;
}

.matting-tool-btn__icon i {
  font-size: inherit;
  line-height: 1;
}

.matting-tool-btn__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matting-tool-btn:hover:not(.active) {
  border-color: var(--border-focus);
  color: var(--brand-primary);
  background: var(--brand-light);
}

.matting-tool-btn.active {
  background: var(--primary-gradient);
  border-color: color-mix(in srgb, var(--brand-primary-dark) 35%, transparent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

.matting-tool-btn.active .matting-tool-btn__icon {
  color: inherit;
}

.matting-tool-btn.active:hover {
  filter: brightness(1.05);
  color: #fff;
}

.matting-tool-btn:disabled,
.matting-tool-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.matting-model-btn {
  min-width: 0;
  min-height: 46px;
  padding: 6px 8px;
  border-radius: var(--r-control);
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "logo name tag"
    "logo name cost";
  gap: 2px 8px;
  align-items: center;
  box-sizing: border-box;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

#panelStandard.mode-matting .matting-model-grid .matting-model-btn {
  min-height: 46px;
  height: auto;
  max-height: none;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "logo name tag"
    "logo name cost";
  gap: 2px 8px;
}

.matting-model-logo {
  grid-area: logo;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.matting-model-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.matting-model-logo--banana img {
  width: 20px;
  height: 20px;
}

.matting-model-btn__name {
  grid-area: name;
  min-width: 0;
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matting-model-btn__tag {
  grid-area: tag;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  color: var(--brand-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  justify-self: end;
}

.matting-model-btn__tag--vip {
  background: rgba(245, 158, 11, 0.14);
  color: #b7791f;
}

.matting-model-btn__cost {
  grid-area: cost;
  justify-self: end;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 5px;
  color: var(--yj-appearance-primary,#7c3aed);
  background: #f3e8ff;
  border: 1px solid rgba(124, 58, 237, 0.14);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}

.matting-model-btn:hover:not(.active) {
  border-color: var(--border-focus);
  background: var(--brand-light);
}

.matting-model-btn.active {
  border-color: rgba(124, 58, 237, 0.5);
  background: #f7f1ff;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.22);
}

.matting-model-btn.active .matting-model-btn__name {
  color: var(--brand-primary);
}

.matting-prompt-field {
  margin-top: 0;
}

.matting-prompt-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 120px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-main);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.matting-prompt-textarea:hover {
  border-color: var(--border-focus);
}

.matting-prompt-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.matting-prompt-textarea::placeholder {
  color: var(--text-tertiary);
  font-size: 12px;
  opacity: 1;
}

#panelStandard.mode-matting .matting-prompt-textarea {
  min-height: 80px;
  max-height: 96px;
}

@media (max-width: 420px) {
  .matting-tool-btns,
.matting-model-btns {
    grid-template-columns: 1fr;
  }
}

.upload-context--rewrite .upload-ref-extras {
  display: none !important;
}

body[data-app-feature="rewrite"] #mainGenerateSticky {
  border-top: none;
  padding-top: 10px;
  background: transparent;
}

body[data-app-feature="rewrite"] #mainGenerateSticky .generate-btn {
  width: 100%;
  min-height: 42px;
  max-height: 44px;
  box-sizing: border-box;
}

body[data-app-feature="rewrite"] .generate-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.9;
}

/* ---------- 娑撳﹣绱堕崠鐚寸窗缁毖冨櫨閸楋紕澧?璺?閺嶅洭顣芥稉鈧悰?璺?娑撹缍?Flex閿涘牅绗傛导鐘插灙 order:1 + 妫板嫯顫?order:2閿?---------- */
.upload-section-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.upload-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-card);
  padding: 8px 12px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.upload-block:hover {
  border-color: var(--border-focus);
  background: var(--brand-light);
  box-shadow: var(--shadow-card);
}

.upload-block .upload-card-header.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
}

.upload-card-header--minimal {
  margin-bottom: 6px;
}

.upload-card-header--minimal .upload-block__main-title {
  flex: 1;
  min-width: 0;
}

.upload-block .title-area {
  min-width: 0;
}

.upload-block__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.upload-block__step {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  background: var(--brand-light);
  border: 1px solid var(--border-focus);
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.2;
  letter-spacing: 0;
}

.upload-block__main-title {
  margin: 0;
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0;
  line-height: 1.25;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.upload-block__main-title .section-step-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.matting-upload-title-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.upload-block__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  min-height: 0;
}

/* 娴犲懍绻氶悾娆忋亣閹锋牗鏂侀崠鐑樻閿涙艾宕板鈥愁啍鎼达讣绱濇稉宥呭晙娑撳簼鏅堕弽蹇嬧偓灞肩瑐娴肩姰鈧秴鑻熼幒?*/
.upload-block__body--preview-only {
  display: block;
}

.upload-block__body--preview-only .preview-container.preview-area {
  width: 100%;
  max-width: 100%;
  flex: none;
  order: 0;
  min-width: 0;
}

.upload-action {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 88px;
  flex-shrink: 0;
}

.upload-action__helper {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
  max-width: 96px;
}

.upload-action--minimal {
  gap: 0;
  width: 80px;
}

.upload-ref-extras {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-light);
}

.btn-toggle-reference {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  margin: 0;
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.btn-toggle-reference:hover {
  color: var(--brand-primary);
  background: var(--brand-light);
}

.btn-toggle-reference__icon {
  font-size: 12px;
  opacity: 0.9;
}

.upload-ref-expandable {
  margin-top: 6px;
}

.upload-ref-expandable[hidden] {
  display: none !important;
}

.upload-ref-expandable__inner {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
}

.upload-ref-expandable__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.upload-ref-expandable__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.upload-block__body--nested {
  gap: 6px 10px;
}

.upload-ref-expandable .preview-container {
  min-height: 88px;
  max-height: none;
  overflow: visible;
}

.upload-ref-expandable .preview-container:has(.reference-upload-zone.upload-zone--has-items) {
  min-height: 72px;
}

.upload-ref-expandable .preview-container .upload-zone {
  max-height: none;
  min-height: 0;
}

.preview-container.preview-area {
  order: 2;
  flex: 1;
  min-width: min(100%, 140px);
  min-height: 0;
  width: auto;
}

.upload-block .preview-area {
  flex: 1;
  min-height: 0;
  display: block;
}

/* 妫板嫯顫嶆径鏍攱閿涙氨鈥栨稉濠囨妤傛ê瀹?+ 鐟佷礁鍨忓┃銏犲毉閿涘矂浼╅崗宥嗘嫼妤傛ɑ鏆ｆい?*/
.upload-block .preview-container.preview-area {
  max-height: 96px;
  overflow: hidden;
}

/* 閹剁姴娴樺Ο鈥崇础閿涙俺袙闂?108px 鐟佷礁澹€閿涘奔瀵屾稉濠佺炊閸栫儤澧犻懗鐣屾暏鐡掓娊鐝惔锔肩礄閸氾箑鍨稉搴濈瑓閺傜懓寮弫鏉垮隘閸欑姴甯囬幇鐔峰繁閿?*/
#panelStandard.mode-matting .upload-block--product .preview-container.preview-area {
  max-height: none !important;
  overflow: visible !important;
}

.badge.badge--required {
  background: var(--warning-color);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  line-height: 1.2;
  height: 18px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
}

.badge.badge--optional {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary, #64748b);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
}

.upload-block__help {
  font-size: 14px;
  color: var(--text-placeholder);
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.upload-block__help:hover {
  color: #cbd5e1;
}

.btn-upload-header {
  background: transparent;
  border: 1px dashed var(--border-focus);
  color: #6ee7a7;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, border-style 0.2s ease, box-shadow 0.2s ease;
}

.btn-upload-header__plus {
  display: inline-flex;
  line-height: 1;
}

.btn-upload-header__plus i {
  font-size: 12px;
  font-weight: 700;
}

.btn-upload-header:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
  border-style: solid;
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn-upload-header--secondary {
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--text-tertiary, #64748b);
}

.btn-upload-header--secondary:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.5);
  box-shadow: none;
}

.btn-upload-header:disabled,
.btn-upload-header.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-upload-header--column {
  width: 100%;
  justify-content: center;
  padding: 8px 6px;
  flex-direction: column;
  gap: 4px;
}

.preview-area {
  width: 100%;
  min-width: 0;
}

.preview-area .upload-zone {
  margin-bottom: 0;
  width: 100%;
}

/* 閸楋紕澧栭崘鍛搭暕鐟欏牞绱癋lex + wrap閿涙盯鐝惔锔炬暠婢舵牕鐪?.preview-container 闂勬劕鍩楅敍灞惧閸戞椽娈ｉ挊?*/
.upload-block .preview-container .upload-zone {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 8px;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 56px;
  border-radius: 10px;
  margin-bottom: 0;
  position: relative;
}

.upload-block .upload-zone .uploaded-item {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0;
}

.upload-block .upload-zone .uploaded-item:hover {
  transform: scale(1.02);
}

.upload-block .upload-zone .uploaded-item img,
.upload-block .upload-zone .uploaded-item .preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.upload-block .upload-zone .add-image-btn {
  width: 78px;
  height: 72px;
  min-width: 78px;
  min-height: 72px;
  flex-shrink: 0;
  padding: 4px 3px;
  gap: 2px;
}

.upload-block .upload-zone .add-image-btn__plus i {
  font-size: 18px;
}

.upload-block .upload-zone .add-image-btn__sub {
  font-size: 9px;
}

.upload-block .upload-zone .add-image-btn__hint {
  font-size: 8px;
}

.upload-block .upload-zone .remove-image-btn {
  width: 18px;
  height: 18px;
  top: 2px;
  right: 2px;
  font-size: 10px;
}

.upload-block .reference-upload-zone {
  max-height: none !important;
}

@media (max-width: 420px) {
  .upload-block .upload-card-header.block-header {
    align-items: flex-start;
  }

  .upload-block__body:not(.upload-block__body--preview-only) {
    flex-direction: column;
    align-items: stretch;
  }

  .upload-action {
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .btn-upload-header--column {
    width: auto;
    flex-direction: row;
    padding: 6px 12px;
  }

  .upload-action__helper {
    text-align: left;
    max-width: none;
    flex: 1;
  }

  .upload-block__body:not(.upload-block__body--preview-only) .preview-container.preview-area {
    order: 2;
    min-width: 0;
    width: 100%;
  }
}

/* 婢舵艾娴樻稉濠佺炊閸栫尨绱癎rid 鐎靛棝鎽?+ 缁旀牕鎮滃姘З閿涘牏缂夐悾銉ユ禈缂佺喍绔存妯哄 + object-fit: cover閿?*/
.upload-zone {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--gap-control);
  align-content: start;
  justify-items: stretch;
  min-height: 0;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-control);
  background: var(--bg);
  border: 1px solid var(--border-light);
  padding: var(--gap-control) var(--gap-control);
  margin-bottom: var(--gap-module-y);
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  color: var(--text-tertiary);
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

.upload-zone::-webkit-scrollbar {
  width: 6px;
}
.upload-zone::-webkit-scrollbar-track {
  background: transparent;
}
.upload-zone::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--r-control);
}

.upload-zone:hover {
  border-color: var(--primary);
  background: var(--brand-light);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.upload-zone.drag-over {
  border-style: solid;
  border-color: var(--primary);
  border-width: 1px;
  background: color-mix(in srgb, var(--brand-light) 55%, var(--bg-card));
  box-shadow: var(--shadow-primary-hover);
  transform: none;
}

/* 閹锋牗瀚块弬鍥︽閹剙浠犻弮鑸靛絹缁€鐚寸礄pointer-events:none 闁灝鍘ら幐鈥茬秶閻愮懓鍤ǎ璇插閿?*/
.upload-zone-drop-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--brand-light) 85%, var(--bg-card));
  border: 2px dashed var(--border-focus);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  pointer-events: none;
}

.upload-zone.drag-over .upload-zone-drop-hint {
  display: flex;
}

/* 閸掓銆冩禒鍛窗娴ｅ稄绱扮€涙劙銆嶆稉濠傚磳娑?.upload-zone 閻?grid 鐎涙劙銆嶉敍鍫滅瑢閵嗗本鍧婇崝鐘偓宥嗗瘻闁筋喖鎮撴稉鈧純鎴炵壐閿?*/
.upload-preview-list,
.uploaded-list.upload-preview-list {
  display: contents;
}

.uploaded-item {
  width: 100%;
  height: 110px;
  min-height: 110px;
  border-radius: 8px;
  background: #f3f4f6;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-card);
}

.upload-zone .uploaded-item {
  cursor: grab;
}

.upload-zone .uploaded-item.uploading,
.upload-zone .uploaded-item.upload-error {
  cursor: default;
}

.upload-zone .uploaded-item.upload-sortable-chosen {
  cursor: grabbing;
  border-color: var(--border-focus);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent);
  z-index: 6;
  transform: scale(1.04);
}

.upload-zone .uploaded-item.upload-sortable-drag {
  opacity: 0.92;
  outline: 2px solid color-mix(in srgb, var(--color-primary) 68%, transparent);
  outline-offset: 2px;
}

.upload-zone .upload-sortable-ghost {
  opacity: 0.45;
  background: var(--brand-light);
  border: 2px dashed var(--border-focus);
}

.uploaded-item:hover {
  transform: scale(1.03);
  z-index: 2;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-hover);
}

.uploaded-item img,
.uploaded-item .preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uploaded-item .image-index {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.uploaded-item .reference-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  background: var(--brand-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.2;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 25%, transparent);
  pointer-events: none;
}

.uploaded-item .remove-image-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  z-index: 12;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(6px);
}

@media (hover: hover) {
  .uploaded-item .remove-image-btn {
    opacity: 0;
  }

  .uploaded-item:hover .remove-image-btn {
    opacity: 1;
  }
}

@media (hover: none) {
  .uploaded-item .remove-image-btn {
    opacity: 0.92;
  }
}

.uploaded-item .remove-image-btn:hover {
  background: rgba(239, 68, 68, 0.88);
  transform: scale(1.06);
}

.upload-status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  font-weight: 500;
  pointer-events: none;
}

.upload-status-badge.uploading {
  background: color-mix(in srgb, var(--color-primary) 90%, transparent);
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 88px;
}

.upload-status-badge__text {
  display: block;
  line-height: 1.2;
}

.upload-progress-track {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.upload-progress-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #fff;
  transition: width 0.2s ease;
}

.result-img--broken {
  object-fit: contain;
  background: var(--yj-loading-broken-bg, #f1f5f9);
}

.upload-status-badge.error {
  background: rgba(239, 68, 68, 0.9);
}

.upload-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.upload-status-badge i {
  font-size: 10px;
}

.uploaded-item.uploading {
  border-color: var(--border-focus);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
  animation: pulseBorder 1.5s ease-in-out infinite;
}

.uploaded-item.upload-error {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

#panelStandard.mode-matting .uploaded-item.upload-error::after,
body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .uploaded-item.upload-error::after,
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .uploaded-item.upload-error::after,
body[data-app-feature="poster"] #panelStandard:not(.mode-matting) #uploadZone .uploaded-item.upload-error::after,
#gpt-image-panel .upload-zone--gpt-compact .uploaded-item.upload-error::after,
#nano-banana-panel .upload-zone--gpt-compact .uploaded-item.upload-error::after,
.reference-upload-zone .uploaded-item.upload-error::after {
  content: "上传失败";
  position: absolute;
  inset: auto 4px 4px 4px;
  z-index: 11;
  min-height: 18px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

#panelStandard.mode-matting .uploaded-item.upload-error,
body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .uploaded-item.upload-error,
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .uploaded-item.upload-error,
body[data-app-feature="poster"] #panelStandard:not(.mode-matting) #uploadZone .uploaded-item.upload-error,
#gpt-image-panel .upload-zone--gpt-compact .uploaded-item.upload-error,
#nano-banana-panel .upload-zone--gpt-compact .uploaded-item.upload-error,
.reference-upload-zone .uploaded-item.upload-error {
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

#gpt-image-panel .upload-zone--gpt-compact .upload-status-badge,
#nano-banana-panel .upload-zone--gpt-compact .upload-status-badge,
body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge,
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge,
body[data-app-feature="poster"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge,
#panelStandard.mode-matting .upload-status-badge,
.reference-upload-zone .upload-status-badge {
  top: 4px;
  left: 4px;
  right: auto;
  max-width: calc(100% - 8px);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 14px;
  gap: 3px;
  white-space: nowrap;
}

#gpt-image-panel .upload-zone--gpt-compact .upload-status-badge.error,
#nano-banana-panel .upload-zone--gpt-compact .upload-status-badge.error,
body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error,
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error,
body[data-app-feature="poster"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error,
#panelStandard.mode-matting .upload-status-badge.error,
.reference-upload-zone .upload-status-badge.error {
  background: rgba(239, 68, 68, 0.92);
}

#gpt-image-panel .upload-zone--gpt-compact .upload-status-badge.error span:not(.yj-emoji),
#nano-banana-panel .upload-zone--gpt-compact .upload-status-badge.error span:not(.yj-emoji),
body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error span:not(.yj-emoji),
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error span:not(.yj-emoji),
body[data-app-feature="poster"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error span:not(.yj-emoji),
#panelStandard.mode-matting .upload-status-badge.error span:not(.yj-emoji),
.reference-upload-zone .upload-status-badge.error span:not(.yj-emoji) {
  display: none;
}

body[data-app-feature="main-image"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error .yj-emoji,
body[data-app-feature="detail-page"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error .yj-emoji,
body[data-app-feature="poster"] #panelStandard:not(.mode-matting) #uploadZone .upload-status-badge.error .yj-emoji {
  color: #fff;
  font-size: 11px;
}

.reference-upload-zone .upload-status-badge.error {
  width: 18px;
  height: 18px;
  padding: 0;
  justify-content: center;
  overflow: hidden;
  color: transparent;
}

.reference-upload-zone .upload-status-badge.error .yj-emoji {
  color: #fff;
  font-size: 11px;
}

@keyframes pulseBorder {
  0%,
100% {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
  50% {
    border-color: var(--border-focus);
    box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
}

.add-image-btn {
  width: 100%;
  height: 110px;
  min-height: 110px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px dashed var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  cursor: pointer;
  align-self: stretch;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
  text-align: center;
  padding: 6px 4px;
}

.add-image-btn:hover {
  border-color: var(--border-focus);
  color: var(--text-main);
  background: var(--brand-light);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent),
    0 10px 26px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.add-image-btn__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-bottom: 2px;
}

.add-image-btn__plus i {
  font-size: 26px;
  font-weight: 300;
  color: var(--accent-purple);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 35%, transparent));
}

.add-image-btn:hover .add-image-btn__plus i {
  color: var(--brand-primary);
}

.add-image-btn__sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  max-width: 84px;
}

.add-image-btn__hint {
  font-size: 9px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
  max-width: 88px;
}

/* 閸氬牆鑻熼崥搴ｆ畱閸楃姳缍呴弬鍥攳閿涘牅楠囬崫浣告禈 / 閸欏倽鈧啫娴橀敍?*/
.add-image-btn .upload-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.25;
  text-align: center;
  max-width: 92%;
  word-break: break-word;
}

.add-image-btn .upload-text__main,
.add-image-btn .upload-text__meta {
  display: block;
}

.add-image-btn .upload-text__main {
  color: #0f172a;
  font-weight: 600;
}

.add-image-btn .upload-text__meta {
  margin-top: 2px;
  color: #64748b;
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: 0;
}

.upload-block .upload-zone:not(.upload-zone--yj-compact) .add-image-btn .upload-text,
.upload-block .reference-upload-zone:not(.upload-zone--yj-compact) .add-image-btn .upload-text {
  font-size: 10px;
  line-height: 1.25;
  max-width: 152px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Legacy corner upload affordance disabled — unified in upload-zone-unify.css */
.main-area #panelStandard:not(.mode-matting) #uploadZone:not(.upload-zone--yj-compact) .add-image-btn {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  width: auto;
  min-width: 152px;
  height: auto;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  align-items: flex-end;
  text-align: right;
  color: var(--text-muted);
}

.main-area #panelStandard:not(.mode-matting) #uploadZone:not(.upload-zone--yj-compact) .add-image-btn:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
  color: var(--text-main);
}

.main-area #panelStandard:not(.mode-matting) #uploadZone:not(.upload-zone--yj-compact) .add-image-btn__plus {
  display: none;
}

/* E-commerce compact upload: see styles/upload-zone-unify.css */

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.uploaded-item) .upload-block__body--preview-only,
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.uploaded-item) .preview-container.preview-area,
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.upload-zone--has-items) .upload-block__body--preview-only,
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.upload-zone--has-items) .preview-container.preview-area,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.uploaded-item) .upload-block__body--preview-only,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.uploaded-item) .preview-container.preview-area,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.upload-zone--has-items) .upload-block__body--preview-only,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.upload-zone--has-items) .preview-container.preview-area,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.uploaded-item) .upload-block__body--preview-only,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.uploaded-item) .preview-container.preview-area,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.upload-zone--has-items) .upload-block__body--preview-only,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block:has(.upload-zone--has-items) .preview-container.preview-area {
  min-height: 100px !important;
  max-height: 112px !important;
  overflow: visible !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item),
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item),
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item),
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items {
  min-height: 94px !important;
  max-height: 112px !important;
  height: 100px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .uploaded-list,
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .uploaded-list,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .uploaded-list,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .uploaded-list,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .uploaded-list,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .uploaded-list {
  display: contents !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .uploaded-item,
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .uploaded-item,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .uploaded-item,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .uploaded-item,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .uploaded-item,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .uploaded-item {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn,
body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .add-image-btn,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .add-image-btn,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone.upload-zone--has-items .add-image-btn {
  flex: 0 0 146px !important;
  width: 146px !important;
  min-width: 146px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 6px 10px !important;
  flex-direction: row !important;
  gap: 7px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn__plus,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn__plus,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn__plus {
  font-size: 18px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn .upload-text,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn .upload-text,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) #uploadZone:has(.uploaded-item) .add-image-btn .upload-text {
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal !important;
}

.add-image-btn:hover .add-image-btn__hint {
  color: var(--text-tertiary, #64748b);
}

.add-image-btn:hover .upload-text {
  color: var(--text-main);
}

.add-image-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.add-image-btn.disabled {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 参考图上传区：无图 / 有图 两套布局 */
.reference-upload-zone {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-height: 88px;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  background: #f7f8fb !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.reference-upload-zone .uploaded-list {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
}

.reference-upload-zone .uploaded-item {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
  border-radius: 6px;
}

.reference-upload-zone .add-image-btn {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.reference-upload-zone .add-image-btn__plus i {
  font-size: 18px;
}

.reference-upload-zone .add-image-btn__sub {
  font-size: 10px !important;
}

.reference-upload-zone .add-image-btn__hint {
  display: none;
  font-size: 10px !important;
  line-height: 1.2;
  color: #64748b;
}

.upload-block .reference-upload-zone .add-image-btn .upload-text {
  max-width: 240px;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
}

/* 无图：整块区域即上传入口 */
.upload-ref-expandable .reference-upload-zone:not(.upload-zone--has-items) .uploaded-list {
  display: none !important;
}

.upload-ref-expandable .reference-upload-zone.upload-zone--yj-compact:not(.upload-zone--has-items) .add-image-btn {
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  flex-direction: row;
  gap: 8px;
}

.upload-ref-expandable .reference-upload-zone:not(.upload-zone--yj-compact):not(.upload-zone--has-items) .add-image-btn {
  flex: 1 1 auto;
  width: 100%;
  min-height: 88px;
  padding: 12px 10px;
}

.upload-ref-expandable .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn__plus {
  font-size: 20px;
  line-height: 1;
}

.upload-ref-expandable .reference-upload-zone.upload-zone--yj-compact:not(.upload-zone--has-items) .add-image-btn__hint {
  display: none;
}

.upload-ref-expandable .reference-upload-zone:not(.upload-zone--yj-compact):not(.upload-zone--has-items) .add-image-btn__hint {
  display: block;
}

/* 有图：缩略图横排 + 紧凑添加格 */
.reference-upload-zone.upload-zone--has-items,
.reference-upload-zone:has(.uploaded-item) {
  min-height: 72px;
  max-height: none;
  padding: 4px !important;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.reference-upload-zone.upload-zone--has-items .uploaded-list,
.reference-upload-zone:has(.uploaded-item) .uploaded-list {
  padding-left: 4px;
}

.reference-upload-zone.upload-zone--has-items .uploaded-item,
.reference-upload-zone:has(.uploaded-item) .uploaded-item {
  flex: 0 0 60px;
  width: 60px;
  min-width: 60px;
  height: 60px;
  min-height: 60px;
}

.reference-upload-zone.upload-zone--has-items .add-image-btn,
.reference-upload-zone:has(.uploaded-item) .add-image-btn {
  flex: 0 0 60px;
  width: 60px;
  min-width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  flex-direction: column;
  gap: 0;
}

.reference-upload-zone.upload-zone--has-items .add-image-btn__plus,
.reference-upload-zone:has(.uploaded-item) .add-image-btn__plus {
  font-size: 22px;
  line-height: 1;
}

.reference-upload-zone.upload-zone--has-items .add-image-btn .upload-text,
.reference-upload-zone.upload-zone--has-items .add-image-btn__hint,
.reference-upload-zone:has(.uploaded-item) .add-image-btn .upload-text,
.reference-upload-zone:has(.uploaded-item) .add-image-btn__hint {
  display: none !important;
}

.reference-upload-zone.upload-zone--maxed .add-image-btn {
  display: none !important;
}

.reference-upload-zone:hover {
  border-color: var(--border-focus) !important;
  background: color-mix(in srgb, var(--color-primary) 5%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

.reference-upload-zone.drag-over {
  border: 2px solid var(--border-focus) !important;
  border-style: solid !important;
  background: color-mix(in srgb, var(--color-primary) 9%, transparent) !important;
  box-shadow: 0 0 0 1px var(--border-focus), 0 10px 32px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  transform: scale(1.01);
}

.upload-ref-expandable__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}

.upload-ref-expandable__title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.upload-ref-expandable__meta {
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.reference-upload-clear-btn {
  flex: 0 0 auto;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

/* AI濡€崇€烽柅澶嬪閸?*/
.model-section {
  margin-top: 24px;
  margin-bottom: 6px;
}

.model-section > .module-title {
  margin-bottom: 8px;
  font-size: var(--text-module);
  letter-spacing: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  line-height: 1.25;
  box-sizing: border-box;
}

.model-section > .module-title .tooltip-trigger {
  flex-shrink: 0;
  align-self: center;
}

.model-section > .module-title .section-step-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}

.model-btn {
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  padding: 8px 40px 8px 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.2s ease;
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 6px;
}

.model-btn:hover {
  background: var(--brand-light);
  color: var(--brand-primary);
  border-color: var(--border-focus);
}

/* 閹恒劏宕橀敍姘舵涧缁鳖偅寮挎潏?+ 鏉炶鍘滈弲鏇礄閺堫亪鈧鑵戦弮璁圭礆 */
.model-btn.model-recommend:not(.selected) {
  border: 1px solid var(--border-focus);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* VIP / 妤傛ü鐜敍姘跺櫨閼瑰弶寮挎潏鐧哥礄閺堫亪鈧鑵戦弮璁圭礆 */
.model-btn.model-vip:not(.selected) {
  border: 1px solid var(--vip-color);
}

/* 闁鑵戦敍姘杽韫囧啫鎼ч悧宀冨閵嗕胶娅х€涙绱欑憰鍡欐磰閹恒劏宕?VIP 閹诲繗绔熼敍?*/
.model-btn.selected {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--brand-primary-dark) 45%, transparent) !important;
  box-shadow: var(--shadow-primary-hover) !important;
  transform: none;
  z-index: 1;
}

.model-btn.selected:hover {
  filter: brightness(1.05);
  color: #fff !important;
}

.model-tag {
  position: absolute;
  top: 4px;
  right: 5px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 5px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  max-width: 36%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-btn .model-name {
  font-weight: 500;
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.model-btn .model-icon {
  display: none !important;
}

.model-btn.selected .model-tag {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.model-desc {
  font-size: 11px;
  color: #7B8190;
  margin: 0;
  padding-left: 4px;
  line-height: 1.4;
}

/* ========== 閸忋劌鐪敍姘劄妤犮倖鐖ｆ０?+ 閸氬矁顢戦惌顓☆嚛閺?========== */
.step-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.step-title-row.module-title {
  flex-wrap: nowrap;
}

.step-title-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h3.step-title-main,
.step-title-main.upload-block__main-title {
  margin: 0;
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
}

.step-inline-hint {
  margin-left: auto;
  min-width: 0;
  max-width: 52%;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-tertiary);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-inline-hint-slot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  min-width: 0;
  max-width: 52%;
  gap: 0;
}

.step-inline-hint-slot > .step-inline-hint[hidden] {
  display: none !important;
}

.param-subfield-title,
.rewrite-param-label,
#gpt-image-panel .gpt-subfield-title,
#nano-banana-panel .gpt-subfield-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 5px;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.rewrite-param-group + .rewrite-param-group {
  margin-top: 9px;
}

#gpt-image-panel .gpt-aspect-clarity-card .gpt-resolution-section,
#nano-banana-panel .gpt-aspect-clarity-card .gpt-resolution-section,
.ratio-resolution-card .gpt-resolution-section {
  margin-top: 0;
  padding-top: 0;
}

.model-intro-bar {
  display: none !important;
}

.step-inline-hint--flash {
  animation: step-inline-hint-flash 0.55s ease-out;
}

@keyframes step-inline-hint-flash {
  0% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}

.upload-card-header--minimal .step-title-row {
  width: 100%;
}

.model-section > .module-title.step-title-row {
  margin-bottom: var(--gap-control);
}

@media (max-width: 390px) {
  .step-inline-hint,
.step-inline-hint-slot {
    display: none !important;
  }
}

/* 閸欏倹鏆熺拋鍓х枂閸?*/
.params-section {
  margin-bottom: 6px;
  min-width: 0;
  overflow-x: hidden;
}

.param-group {
  margin-bottom: var(--ui-gap-4);
}

.param-group:last-child {
  margin-bottom: 0;
}

.param-group .module-title {
  margin-bottom: var(--ui-gap-2);
  font-size: var(--text-module);
  letter-spacing: 0;
  line-height: 1.25;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
}

.param-group .module-title > .section-step-badge,
.param-group .module-title > .step-leader {
  flex-shrink: 0;
  align-self: center;
}

.param-group .module-title > .section-step-label {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-intent-section > .standard-setting-select {
  width: 100%;
  margin-top: 0;
}

.campaign-intent-section > .standard-setting-select,
#selfmediaCampaignEventSelect {
  line-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-position: right 10px center !important;
}

.param-group .module-title > .required-star {
  flex-shrink: 0;
  margin-left: 0;
  align-self: center;
}

.param-group .module-title > .hint-text--inline {
  flex: 1 1 auto;
  margin-left: 4px;
  min-width: 0;
  max-width: min(38%, 168px);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.param-group .module-title > .tooltip-trigger {
  flex-shrink: 0;
  align-self: center;
}

/* GPT Image閿涙I 閺呴缚鍏橀幍鈺勭槤閿涘牏鎻ｉ崙鎴烆偧鐟曚焦瀵滈柦顕嗙礉閸欏啿顕鎰瑝閸楃姵寮х悰宀嬬礆 */
.gpt-ai-expand-btn {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  min-height: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.25;
  background: linear-gradient(90deg, var(--color-primary) 0%, #7c3aed 52%, #9333ea 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

.gpt-ai-expand-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 6px 18px color-mix(in srgb, var(--color-primary) 45%, transparent),
    0 0 20px rgba(147, 51, 234, 0.2);
  filter: brightness(1.05);
}

.gpt-ai-expand-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.gpt-ai-expand-btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.gpt-ai-expand-btn:disabled,
.gpt-ai-expand-btn.is-busy {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 22px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* GPT Image / Nano Banana 瀹搞儱鍙跨粻杈€冮崡鏇窗瀹革箑顕鎰┾偓浣稿棘閺佹澘娼￠梻纾嬬獩閵嗕焦鐖ｆ０妯圭瑢鏉堟挸鍙?閹稿鎸抽崥灞筋啍 */
#gpt-image-panel,
#nano-banana-panel,
#gpt-image-form-root {
  text-align: left;
}

#gpt-image-panel .param-group,
#nano-banana-panel .param-group,
#gpt-image-form-root .param-group {
  margin-bottom: var(--form-step-gap, 11px);
}

#gpt-image-panel .param-group:last-child,
#nano-banana-panel .param-group:last-child,
#gpt-image-form-root .param-group:last-child {
  margin-bottom: var(--form-step-gap, 11px);
}

#gpt-image-panel .gpt-prompt-group,
#nano-banana-panel .gpt-prompt-group,
#gpt-image-form-root .gpt-prompt-group {
  margin-bottom: var(--form-step-gap, 11px);
}

#gpt-image-panel .gpt-prompt-controls,
#nano-banana-panel .gpt-prompt-controls,
#gpt-image-form-root .gpt-prompt-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
}

#gpt-image-panel .gpt-prompt-controls .prompt-input,
#nano-banana-panel .gpt-prompt-controls .prompt-input,
#gpt-image-form-root .gpt-prompt-controls .prompt-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

#gpt-image-panel .gpt-prompt-controls .gpt-ai-expand-btn,
#nano-banana-panel .gpt-prompt-controls .gpt-ai-expand-btn,
#gpt-image-form-root .gpt-prompt-controls .gpt-ai-expand-btn {
  margin-top: 6px;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
  align-self: flex-end;
}

#gpt-image-panel .gpt-prompt-group .custom-input-hint,
#nano-banana-panel .gpt-prompt-group .custom-input-hint,
#gpt-image-form-root .gpt-prompt-group .custom-input-hint {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

#gpt-image-panel .gpt-prompt-textarea,
#nano-banana-panel .gpt-prompt-textarea,
#gpt-image-form-root .gpt-prompt-textarea {
  min-height: 88px;
  height: 88px;
  max-height: 96px;
  line-height: 1.55;
  border: 1px solid var(--border-light);
  border-radius: var(--r-control);
  background: var(--bg-input);
  color: var(--text-primary);
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, min-height 0.18s ease, height 0.18s ease;
}

#gpt-image-panel .gpt-prompt-textarea:hover,
#nano-banana-panel .gpt-prompt-textarea:hover,
#gpt-image-form-root .gpt-prompt-textarea:hover {
  border-color: var(--primary);
}

#gpt-image-panel .gpt-prompt-textarea:focus,
#gpt-image-panel .gpt-prompt-textarea:focus-visible,
#nano-banana-panel .gpt-prompt-textarea:focus,
#nano-banana-panel .gpt-prompt-textarea:focus-visible,
#gpt-image-form-root .gpt-prompt-textarea:focus,
#gpt-image-form-root .gpt-prompt-textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--brand-light);
  min-height: 120px;
  height: 120px;
  max-height: 180px;
  resize: vertical;
}

#gpt-image-panel .model-section.gpt-model-section,
#nano-banana-panel .model-section.gpt-model-section,
#gpt-image-form-root .model-section.gpt-model-section {
  margin-top: 0;
  margin-bottom: 16px;
}

/* GPT Image / Nano閿涙矮绗傛导鐘插隘娑撳簺鈧瞼娲块崙杞板瘜閸ヤ勘鈧秴鎮撳▎鐐垼妫版顢戦敍鍧唋ock-header + upload-block__main-title閿?*/
#gpt-image-panel .gpt-upload-param .upload-card-header.block-header,
#nano-banana-panel .gpt-upload-param .upload-card-header.block-header,
#gpt-image-form-root .gpt-upload-param .upload-card-header.block-header {
  margin-bottom: 6px;
}

#gpt-image-panel .gpt-upload-param .upload-block__body--preview-only,
#nano-banana-panel .gpt-upload-param .upload-block__body--preview-only,
#gpt-image-form-root .gpt-upload-param .upload-block__body--preview-only {
  margin-top: 0;
}

/* GPT Image / Nano閿涙艾宕熼崸妞剧瑐娴肩姴灏崡鐘冲姬娑撯偓鐞涘矉绱欓柆鍨帳 auto-fill 婢舵艾鍨€佃壈鍤ч妴?閵嗗秶缂夐崷銊ヤ箯娓氀嶇礆 */
#gptImageUploadBox.upload-zone--gpt-product,
#nanoImageUploadBox.upload-zone--gpt-product,
#gpt-image-form-root .upload-zone--gpt-product {
  grid-template-columns: minmax(0, 1fr);
}

/* 娑?.param-group .module-title 娑撯偓閼疯揪绱伴崣鏍ㄧХ閸忋劌鐪?.module-title 閻ㄥ嫬銇囬崘娆庣瑢閸嬪繒鐭?*/
#gpt-image-panel .module-title,
#nano-banana-panel .module-title,
#gpt-image-form-root .module-title {
  font-weight: 500;
  font-size: var(--text-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  margin-bottom: var(--gap-control);
}

#gpt-image-panel .saas-step-head .module-title,
#nano-banana-panel .saas-step-head .module-title,
#gpt-image-form-root .saas-step-head .module-title {
  font-size: var(--text-module);
}

#gpt-image-panel .model-section > .module-title,
#nano-banana-panel .model-section > .module-title,
#gpt-image-form-root .model-section > .module-title {
  font-weight: 600;
  font-size: var(--text-module);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-text-heading);
  margin-bottom: var(--ui-gap-2);
}

.module-title--sellpoint .sellpoint-heading {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  cursor: default;
  font-size: inherit;
  letter-spacing: 0;
  min-width: 0;
}

.module-title--sellpoint .sellpoint-title {
  font-weight: 600;
  color: var(--ui-text-heading);
}

.module-title--sellpoint .sellpoint-optional {
  font-weight: 500;
  font-size: 10px;
  color: var(--ui-text-hint);
  margin-left: 2px;
}

.sellpoint-vague-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  background: color-mix(in srgb, var(--warning-color) 22%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--warning-color) 55%, transparent);
}

.sellpoint-vague-warn[hidden] {
  display: none !important;
}

.custom-input-hint {
  margin: var(--ui-gap-2) 0 0;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ui-text-hint);
}

.param-group .custom-input::placeholder {
  color: var(--ui-text-hint);
  opacity: 1;
}

.hint-text {
  font-size: 11px;
  color: var(--ui-text-hint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}

.hint-text--inline {
  margin-left: 4px;
}

.ratio-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ratio-btn,
.resolution-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: var(--r-control);
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.param-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: var(--r-control);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratio-btn:hover,
.resolution-btn:hover {
  color: var(--brand-primary);
  border-color: var(--border-focus);
  background: var(--brand-light);
}

.resolution-btn[disabled],
.resolution-btn.resolution-btn--locked-out {
  opacity: 0.42;
  cursor: not-allowed;
}

.resolution-btn[disabled]:hover,
.resolution-btn.resolution-btn--locked-out:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--bg-card);
}

.param-btn:hover {
  color: var(--text-main);
  border-color: var(--border-focus);
}

.ratio-btn.active,
.resolution-btn.active {
  background: var(--primary-gradient);
  color: #fff;
  border-color: color-mix(in srgb, var(--brand-primary-dark) 35%, transparent);
  box-shadow: var(--shadow-primary-hover);
}

.param-btn.active {
  background: var(--primary-gradient);
  color: #fff;
  border-color: color-mix(in srgb, var(--brand-primary-dark) 35%, transparent);
  box-shadow: var(--shadow-primary-hover);
}

.ratio-btn.active,
.resolution-btn.active,
.param-btn.active {
  animation: none;
}

@keyframes paramChipPop {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 40%, transparent);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

.resolution-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.resolution-btn {
  min-width: 68px;
}

.custom-input,
.prompt-input {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-body);
  font-family: inherit;
  resize: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.custom-input-wrap {
  position: relative;
  width: 100%;
}

.custom-input-wrap .custom-input {
  padding-right: 128px;
}

.custom-input-feedback {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  max-width: 46%;
  text-align: right;
  line-height: 1.3;
  pointer-events: none;
  letter-spacing: 0;
}

.custom-input-feedback--ok {
  color: var(--brand-primary);
}

.custom-input-feedback--warn {
  color: #fbbf24;
}

.custom-input {
  height: 42px;
  padding: 0 16px;
  line-height: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

textarea.custom-input {
  height: auto;
  min-height: 132px;
  padding: 10px 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
  text-overflow: clip;
}

textarea.custom-input::placeholder {
  white-space: pre-line;
}

.prompt-input {
  height: 100px;
  min-height: 100px;
  padding: 14px 16px;
  line-height: 1.5;
}

.custom-input::placeholder,
.prompt-input::placeholder {
  color: var(--text-placeholder);
}

.custom-input:focus,
.prompt-input:focus {
  outline: none;
  border: 1px solid var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-light);
}

/* 閻㈢喐鍨氶幐澶愭尦閿涙矮瀵岄懝鎻掔杽鎼?+ 鏉炲妲捐ぐ鎲嬬礄閸戝繐鐨径褔娼扮粔顖涚瑤閸欐ü绗岄崗澶嬫閿?*/
.generate-btn {
  width: 100%;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--primary-solid);
  letter-spacing: 0;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border: 1px solid var(--border-focus);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:
    filter 0.3s ease,
    transform 0.18s ease,
    box-shadow 0.28s ease,
    background 0.28s ease,
    color 0.28s ease;
  border-radius: var(--r-card);
  margin-top: 0;
  box-shadow: var(--shadow-primary-hover);
}

/* 娑撳孩膩閸ㄥ浠堥崝顭掔窗閺咁噣鈧碍膩閸ㄥ娼х槐顐犫偓涔侷P 濡€崇€烽柌鎴ｅ閿涘牏鏁撻幋鎰厬娴犲秷铔?.generating 閺嶅嘲绱￠敍?*/
.generate-btn.generate-btn--standard:not(.generating) {
  background: var(--primary-solid);
  color: #fff;
  box-shadow: var(--shadow-primary-hover);
}

.generate-btn.generate-btn--standard:hover:not(:disabled):not(.generating) {
  filter: brightness(1.04);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.generate-btn.generate-btn--vip:not(.generating) {
  background: linear-gradient(90deg, #eab308, #f59e0b);
  color: #1c1917;
  border-color: rgba(234, 179, 8, 0.45);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
}

.generate-btn.generate-btn--vip:hover:not(:disabled):not(.generating) {
  filter: brightness(1.04);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.28);
}

.generate-btn:hover:not(:disabled):not(.generating):not(.generate-btn--standard):not(.generate-btn--vip) {
  filter: brightness(1.04);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.generate-btn:active {
  transform: scale(0.98);
}

.generate-btn:active::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 0.8s ease-out;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.generate-btn.generating {
  background: var(--brand-primary-dark);
  color: #fff;
  opacity: 0.95;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary-dark) 25%, transparent);
}

.generate-btn.generating.generate-btn--stop-mode {
  background: #b91c1c;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.28);
}

.generate-btn.generating.generate-btn--stop-mode:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(185, 28, 28, 0.32);
}

.generate-btn.generating::before {
  display: none;
}

.generate-btn.generating .loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

.generate-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.generate-btn:disabled:hover {
  transform: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  filter: grayscale(0.35);
}

/* UIStateManager / 缂佹挻鐏夐崠?loading閿涙矮瀵岄悽鐔稿灇閹稿鎸抽悘鐗堚偓?+ 閺勫海鈥橀弬鍥攳閿涘牓浼╅崗宥囨箙鐠ч攱娼甸崓蹇娾偓婊勭Х婢舵墎鈧繐绱?*/
.generate-btn.generate-btn--ui-loading {
  background: var(--brand-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary-dark) 25%, transparent) !important;
  filter: none !important;
  letter-spacing: 0;
  cursor: pointer;
}

.generate-btn.generate-btn--ui-loading::before {
  display: none !important;
}

.generate-btn.generating:disabled {
  opacity: 0.85;
  filter: none;
}

/* 娑撶粯瀵滈柦?Material 妞嬪孩绋涘顏庣礄閻?script 濞夈劌鍙?span閿?*/
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  animation: ripple-animation 0.58s linear forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.quota-tip {
  display: none;
}

/* 閸欏厖鏅剁紒鎾寸亯閸栫尨绱伴崡鐘冲祦閸撯晙缍戦崗銊╁劥鐎硅棄瀹抽敍灞肩瑢娑撴槒鍎楅弲顖欑閼?*/
.result-panel {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border-left: 1px solid var(--border-light);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--bg-page);
  padding: var(--pad-card);
  box-sizing: border-box;
}

.result-gallery-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.result-panel .result-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 閸欏厖鏅堕妴宀€绮ㄩ弸婊呮暰瀵ゅ鈧秹顎囬弸璁圭礄index.html閿?*/
.result-panel--gallery-skel .result-panel__skel-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.result-panel--gallery-skel .result-panel__skel-eyebrow {
  margin-bottom: 4px;
}

.result-panel--gallery-skel .result-panel__skel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.result-panel--gallery-skel .result-panel__skel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.result-image-grid-placeholder[hidden] {
  display: none !important;
}

.result-image-grid-placeholder.result-gallery-image-grid--active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  width: 100%;
}

.result-image-grid-placeholder.result-gallery-image-grid--active .result-item {
  position: relative;
  min-height: 168px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background:
    radial-gradient(circle at 26% 22%, rgba(124, 58, 237, 0.1), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(14, 165, 233, 0.09), transparent 36%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 48%, #f8fafc 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 12px 28px rgba(15, 23, 42, 0.045);
  animation: skeleton-card-breathe var(--yj-loading-breathe-duration, 2.4s) ease-in-out infinite;
}

.result-image-grid-placeholder.result-gallery-image-grid--active .result-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(124, 58, 237, 0.12) 45%, rgba(14, 165, 233, 0.08) 56%, transparent 72%);
  transform: translateX(-100%);
  animation: skeletonSweep var(--yj-loading-sweep-duration, 1.6s) ease-in-out infinite;
}

.result-image-grid-placeholder.result-gallery-image-grid--active .result-item::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  pointer-events: none;
  animation: result-loading-inner-breathe 2.8s ease-in-out infinite;
}

.result-image-grid-placeholder.result-gallery-image-grid--active .result-item__img {
  min-height: 168px;
  background: transparent;
}

.result-panel-loading-state {
  --result-progress-pct: 7%;
  --result-prompt-share: 22%;
  --result-generate-share: 68%;
  --result-return-share: 10%;
  flex-shrink: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
  grid-template-areas:
    "bar line"
    "steps sub";
  align-items: center;
  gap: 6px 12px;
  padding: 11px 16px 10px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.035), rgba(20, 184, 166, 0.03) 46%, transparent 82%),
    var(--bg-card);
  overflow: hidden;
}

.result-panel-loading-state[hidden] {
  display: none !important;
}

.result-panel-loading-state__spinner {
  width: 48px;
  height: 48px;
  border: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-top-color: var(--brand-primary);
  border-bottom-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.result-panel-loading-state__bar {
  grid-area: bar;
  position: relative;
  height: 8px;
  min-width: 132px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0 calc(var(--result-prompt-share) - 1px),
      rgba(148, 163, 184, 0.42) calc(var(--result-prompt-share) - 1px) var(--result-prompt-share),
      transparent var(--result-prompt-share) calc(var(--result-prompt-share) + var(--result-generate-share) - 1px),
      rgba(148, 163, 184, 0.42) calc(var(--result-prompt-share) + var(--result-generate-share) - 1px) calc(var(--result-prompt-share) + var(--result-generate-share)),
      transparent calc(var(--result-prompt-share) + var(--result-generate-share))),
    linear-gradient(90deg, #edf2f7, #e8eef7);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
}

.result-panel-loading-state__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(124, 58, 237, 0.24), transparent 18%),
    radial-gradient(circle at 52% 50%, rgba(20, 184, 166, 0.2), transparent 16%),
    radial-gradient(circle at 84% 50%, rgba(14, 165, 233, 0.18), transparent 16%);
  opacity: 0.62;
}

.result-panel-loading-state__bar span {
  display: block;
  position: relative;
  width: var(--result-progress-pct);
  min-width: 20px;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed 0%, #14b8a6 56%, #06b6d4 100%);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.18);
  transition: width 0.55s ease;
}

.result-panel-loading-state__bar span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.6) 45%, transparent 76%);
  transform: translateX(-100%);
  animation: result-loading-sheen 1.2s ease-in-out infinite;
}

.result-panel-loading-state__bar i {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
  transform: translateY(-50%);
  animation: result-loading-cursor 1.1s ease-in-out infinite;
}

.result-panel-loading-state__steps {
  grid-area: steps;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-panel-loading-state__steps span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary, #64748b);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 0;
}

.result-panel-loading-state__steps span::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 999px;
  background: currentColor;
}

.result-panel-loading-state__steps .is-active {
  color: #6d28d9;
}

.result-panel-loading-state__steps .is-done {
  color: #0f766e;
}

.result-panel-loading-state__steps .is-active::before {
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
  animation: result-loading-step-pulse 1.4s ease-in-out infinite;
}

.result-panel-loading-state__line {
  grid-area: line;
  margin: 0;
  min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-panel-loading-state__sub {
  grid-area: sub;
  margin: 0;
  min-width: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes result-loading-sheen {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(130%);
  }
}

@keyframes result-loading-cursor {
  0%,
100% {
    transform: translateY(-50%) scale(0.88);
  }
  50% {
    transform: translateY(-50%) scale(1);
  }
}

@keyframes result-loading-step-pulse {
  0%,
100% {
    opacity: 0.72;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.result-gallery-body .result-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.result-panel-empty-hero {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 0;
}

.result-panel-empty-hint {
  display: block;
  margin-top: var(--ui-gap-2);
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-text-hint);
  line-height: 1.4;
}

/* 娓氭稑鎮楃紒顓炲帬闂呭棛娈戦崡锛勫妤犮劍鐏﹂敍姘礁娓氀冦亣閸ョ偓膩瀵繋绗呮妯哄闂呭繐娴橀懛顏堚偓鍌氱安 */
.result-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--ui-btn-idle);
  border: 1px solid var(--ui-border);
  box-shadow: var(--shadow-card);
}

.result-panel .result-item {
  aspect-ratio: auto;
}

.result-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-panel .result-item img,
.result-panel .result-item__img {
  width: 100% !important;
  height: auto !important;
  max-height: none;
  object-fit: contain !important;
  border-radius: 8px;
  display: block;
}

.result-item__actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-2);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.result-item:hover .result-item__actions,
.result-item:focus-within .result-item__actions {
  opacity: 1;
  pointer-events: auto;
}

.result-item__fab {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms ease;
}

.result-item__fab--download {
  background: var(--primary-gradient);
  color: #fff;
}

.result-item__fab--reuse {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.result-item__fab--delete {
  background: rgba(239, 68, 68, 0.82);
  color: #fff;
}

.result-item__fab:hover {
  transform: scale(1.08);
}

.result-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}

.result-item__caption-text {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 12px 0 14px;
  flex-shrink: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 20;
}

.result-toolbar:not(.batch-open) {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 12px;
  padding: 8px 0 10px;
}

.result-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.result-toolbar:not(.batch-open) .result-toolbar__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
}

.result-toolbar.batch-open {
  padding: 14px 12px;
  gap: 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.batch-hidden {
  display: none;
}

.result-toolbar.batch-open .batch-hidden {
  display: inline-flex;
}

.result-toolbar.batch-open #batchProcessBtn {
  display: none;
}

.result-toolbar.batch-open .toolbar-row-default {
  display: none !important;
}

.result-toolbar__batch-hint {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: min(460px, 42vw);
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-left: 3px solid rgba(124, 58, 237, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}

.result-toolbar__batch-hint[hidden],
.result-toolbar:not(.batch-open) .result-toolbar__batch-hint {
  display: none !important;
}

@media (max-width: 900px) {
  .result-toolbar__batch-hint {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

.preview-modal:focus {
  outline: none;
}

.preview-modal:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.65);
  outline-offset: 3px;
}

.toolbar-btn {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  padding: 0 12px;
  gap: 6px;
  border-radius: var(--r-control);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-right: 0;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.toolbar-btn.primary {
  background: var(--primary-solid);
  border-color: var(--border-focus);
  color: #fff;
}

.toolbar-btn:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--border-light);
  background: var(--brand-light);
}

.toolbar-btn.primary:hover {
  background: var(--primary-solid);
  box-shadow: var(--shadow-primary-hover);
  color: #fff;
  filter: brightness(1.03);
}

.toolbar-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

.toolbar-btn > i.fa-solid {
  font-size: 14px;
  opacity: 0.95;
}

.generation-history-modal-backdrop.visible {
  display: flex;
}

.generation-history-modal-backdrop.modal-backdrop {
  z-index: 1200;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.generation-history-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  background: var(--yj-surface-card, #ffffff);
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: var(--yj-radius-content, 12px);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.generation-history-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(20px, 2.4vw, 32px);
  box-sizing: border-box;
  overflow: auto;
  background: #f5f7fb;
  color: #0f172a;
}

.generation-history-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.generation-history-page__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
}

.generation-history-page__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary, var(--yj-appearance-primary,#7c3aed));
}

.generation-history-page__intro h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--yj-text-title, #0f172a);
}

.generation-history-page__intro p {
  margin: 0;
  color: var(--yj-text-body, #475569);
  font-size: 14px;
  line-height: 1.6;
}

.generation-history-page__refresh {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: var(--yj-radius-tool, 8px);
  background: var(--yj-surface-card, #ffffff);
  color: var(--yj-text-title, #0f172a);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.generation-history-page__refresh:hover {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.04);
}

.generation-history-page__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.generation-history-page__trash {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: var(--yj-radius-tool, 8px);
  background: rgba(124, 58, 237, 0.06);
  color: #6d28d9;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.generation-history-page__trash:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.1);
}

.generation-history-trash-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.generation-history-trash-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.generation-history-trash-panel__head strong {
  display: block;
  font-size: 15px;
  color: var(--yj-text-title, #0f172a);
}

.generation-history-trash-panel__head span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--yj-text-body, #64748b);
}

.generation-history-trash-panel__close {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: 8px;
  background: #ffffff;
  color: var(--yj-text-title, #0f172a);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.generation-history-trash-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(48vh, 420px);
  overflow: auto;
}

.generation-history-trash-empty {
  padding: 18px 8px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

.generation-history-trash-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.generation-history-trash-item--expired {
  opacity: 0.72;
}

.generation-history-trash-item__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #e2e8f0;
}

.generation-history-trash-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.generation-history-trash-item__placeholder {
  font-size: 11px;
  color: #64748b;
}

.generation-history-trash-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.generation-history-trash-item__body strong {
  font-size: 13px;
  color: #0f172a;
}

.generation-history-trash-item__body span {
  font-size: 12px;
  color: #64748b;
}

.generation-history-trash-item__restore {
  min-height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.generation-history-trash-item__restore:hover {
  background: #6d28d9;
}

.generation-history-trash-item__expired {
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
  white-space: nowrap;
}

.generation-history-page__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.generation-history-page__body .generation-history-item {
  width: 100%;
}

.generation-history-panel {
  color: #0f172a;
}

.generation-history-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--yj-border-default, #e2e8f0);
  background: var(--yj-surface-card, #ffffff);
}

.generation-history-modal__head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: var(--yj-text-title, #0f172a);
}

.generation-history-modal__head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--yj-text-body, #475569);
  line-height: 1.5;
}

#generationHistoryModalBackdrop .modal-close-btn {
  background: #f8fafc;
  color: #64748b;
  border-color: var(--yj-border-default, #e2e8f0);
}

#generationHistoryModalBackdrop .modal-close-btn:hover {
  color: #7c3aed;
  background: #f3efff;
  border-color: rgba(124, 58, 237, 0.28);
}

.generation-history-modal__body {
  padding: 12px 16px 16px;
  overflow-y: auto;
  background: var(--yj-surface-page, #f5f7fb);
}

.generation-history-empty {
  padding: 28px 16px;
  color: var(--yj-text-muted, #64748b);
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

.generation-history-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--yj-text-title, #0f172a);
  font-size: 15px;
}

.generation-history-empty span {
  display: block;
  max-width: 320px;
  margin: 0 auto 12px;
}

.generation-projects-section {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.generation-projects-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.generation-projects-section__head span,
.generation-projects-section__head em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.generation-projects-section__head strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.2;
}

.generation-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  gap: 12px;
}

.generation-project-card {
  position: relative;
}

.generation-project-card__open,
.generation-project-card--new {
  display: flex;
  min-height: 178px;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.generation-project-card__open:hover,
.generation-project-card__open:focus-visible,
.generation-project-card--new:hover,
.generation-project-card--new:focus-visible {
  border-color: #8b5cf6;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.generation-project-card__rename,
.generation-project-card__delete {
  position: absolute;
  top: 8px;
  z-index: 3;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(124, 58, 237, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  cursor: pointer;
}

.generation-project-card__rename {
  right: 56px;
}

.generation-project-card__delete {
  right: 8px;
  border-color: rgba(239, 68, 68, 0.24);
  color: #dc2626;
}

.generation-project-card:hover .generation-project-card__rename,
.generation-project-card:hover .generation-project-card__delete,
.generation-project-card__rename:focus-visible,
.generation-project-card__delete:focus-visible {
  opacity: 1;
}

.generation-project-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #e2e8f0;
}

.generation-project-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.generation-project-card__placeholder,
.generation-project-card__plus {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.generation-project-card__plus {
  font-size: 28px;
}

.generation-project-card strong {
  min-height: 18px;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-project-card em,
.generation-project-card span:not(.generation-project-card__cover):not(.generation-project-card__placeholder):not(.generation-project-card__plus) {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.generation-project-card--new {
  justify-content: center;
  border-style: dashed;
  background: #faf5ff;
}

.generation-history-empty--auth,
.generation-history-empty--error {
  border: 1px dashed var(--yj-border-default, #e2e8f0);
  border-radius: var(--yj-radius-content, 12px);
  background: var(--yj-surface-card, #ffffff);
  box-shadow: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.generation-history-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--yj-radius-tool, 6px);
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.22);
}

.generation-history-retry-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.generation-history-bulkbar {
  position: sticky;
  top: 0;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: -2px 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(236, 72, 153, 0.04)), var(--yj-surface-card, #ffffff);
  box-shadow: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  color: var(--yj-text-body, #334155);
  font-size: 12px;
}

.generation-history-bulkbar--muted {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
  color: #64748b;
}

.generation-history-bulkbar--muted strong {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.generation-history-bulkbar--active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.62) 42%, transparent 72%);
  transform: translateX(-120%);
  animation: historyBulkSweep 2.8s ease-in-out 0.25s infinite;
}

.generation-history-bulkbar strong {
  color: var(--primary);
  font-size: 14px;
}

.generation-history-bulkbar em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.generation-history-bulkbar__btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.22);
}

.generation-history-bulkbar__btn:hover,
.generation-history-bulkbar__btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.3);
}

.generation-history-bulkbar__btn:disabled {
  cursor: not-allowed;
  background: #e5e7eb;
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
}

.generation-history-bulkbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.generation-history-bulkbar__btn--secondary {
  background: transparent;
  color: #64748b;
  box-shadow: none;
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.generation-history-bulkbar__btn--secondary:hover,
.generation-history-bulkbar__btn--secondary:focus-visible {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.9);
  box-shadow: none;
  transform: none;
}

.generation-history-wall__days {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.generation-history-day {
  overflow: hidden;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: 12px;
  background: var(--yj-surface-card, #ffffff);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}

.generation-history-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.045), rgba(255, 255, 255, 0.96));
}

.generation-history-day__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--yj-text-title, #0f172a);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.generation-history-day__title {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.generation-history-day__count {
  color: var(--yj-text-muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.generation-history-day__chevron {
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.generation-history-day__toggle[aria-expanded="false"] .generation-history-day__chevron {
  transform: rotate(-45deg);
}

.generation-history-day__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.generation-history-day__action {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d8dce8;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.generation-history-day__action--primary {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}

.generation-history-day__action:hover,
.generation-history-day__action:focus-visible {
  border-color: rgba(124, 58, 237, 0.48);
  outline: none;
  transform: translateY(-1px);
}

.generation-history-day__action:disabled {
  cursor: not-allowed;
  border-color: #e5e7eb;
  background: #f8fafc;
  color: #94a3b8;
  transform: none;
}

.generation-history-day__panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px;
}

.generation-history-day__panel[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .generation-history-day__head {
    align-items: stretch;
    flex-direction: column;
  }

  .generation-history-day__toggle,
  .generation-history-day__actions {
    width: 100%;
  }

  .generation-history-day__actions .generation-history-day__action {
    flex: 1 1 0;
  }

  .generation-history-day__panel {
    grid-template-columns: 1fr;
  }
}

.generation-history-item {
  position: relative;
  width: 100%;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  background: var(--yj-surface-card, #ffffff);
  border-radius: var(--yj-radius-tool, 6px);
  padding: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 0;
  color: var(--yj-text-title, #0f172a);
  transform: translateY(0);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  animation: historyItemRise 220ms ease-out both;
  box-shadow: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.generation-history-item__previews {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.generation-history-item__thumb-wrap {
  position: relative;
  flex: 0 0 auto;
}

.generation-history-item__thumb {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.generation-history-item__thumb-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.58);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.generation-history-item__video-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.generation-history-item__preview-placeholder--video {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-weight: 700;
}

.generation-history-item--video {
  display: flex;
  width: 100%;
  text-align: left;
  cursor: default;
}

.generation-history-item__video-link {
  text-decoration: none;
  color: inherit;
}

.generation-history-item__video-link:hover,
.generation-history-item__video-link:focus-visible {
  text-decoration: underline;
}

.generation-history-item__thumb--broken {
  opacity: 0.35;
  filter: grayscale(1);
}

.generation-history-item__thumb-lost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  color: #fecaca;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.generation-history-item__preview-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.generation-history-item__preview-placeholder--failed {
  border-color: rgba(239, 68, 68, 0.28);
  background: #fef2f2;
  color: #dc2626;
}

.generation-history-item__preview-placeholder--running {
  border-color: rgba(124, 58, 237, 0.24);
  background: #f5f3ff;
  color: #7c3aed;
}

.generation-history-item__body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.generation-history-item__head,
.generation-history-item__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.generation-history-item__head strong,
.generation-history-item__main strong {
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}

.generation-history-item__head em,
.generation-history-item__main em {
  flex: 0 1 auto;
  min-width: 0;
  font-style: normal;
  font-size: 11px;
  color: var(--yj-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-history-item__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.generation-history-item:hover {
  border-color: rgba(124, 58, 237, 0.32);
  background: #faf7ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.08);
}

@keyframes historyBulkSweep {
  0%,
58% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

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

.generation-history-item__stage {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--yj-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-history-item__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.generation-history-modal .generation-history-item {
  cursor: default;
}

.generation-history-modal .generation-history-item__actions .generation-history-item__delete {
  position: static;
  top: auto;
  right: auto;
  opacity: 0;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.generation-history-modal .generation-history-item:hover .generation-history-item__actions .generation-history-item__delete,
.generation-history-modal .generation-history-item:focus-within .generation-history-item__actions .generation-history-item__delete,
.generation-history-modal .generation-history-item__actions .generation-history-item__delete:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.generation-history-modal .generation-history-item__action,
.generation-history-modal .generation-history-item__canvas,
.generation-history-modal .generation-history-item__actions .generation-history-item__delete {
  cursor: pointer;
}

.generation-history-item__action,
.generation-history-item__canvas,
.generation-history-item__consent {
  align-self: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid rgba(124, 58, 237, 0.24);
  border-radius: 8px;
  background: #fff;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.generation-history-item__consent {
  border-color: rgba(148, 163, 184, 0.45);
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
}

.generation-history-item__consent:hover,
.generation-history-item__consent:focus-visible {
  border-color: rgba(124, 58, 237, 0.42);
  background: rgba(124, 58, 237, 0.06);
  color: #6d28d9;
  outline: none;
}

.generation-history-item__delete {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  margin-left: auto;
  border: 1px solid rgba(239, 68, 68, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.generation-history-item:hover .generation-history-item__actions .generation-history-item__delete,
.generation-history-item:focus-within .generation-history-item__actions .generation-history-item__delete,
.generation-history-item__actions .generation-history-item__delete:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.generation-history-item__canvas:hover,
.generation-history-item__canvas:focus-visible,
.generation-history-item__delete:hover,
.generation-history-item__delete:focus-visible,
.generation-history-item:not([disabled]):hover .generation-history-item__action,
.generation-history-item:not([disabled]):focus-visible .generation-history-item__action {
  border-color: rgba(124, 58, 237, 0.58);
  background: rgba(124, 58, 237, 0.08);
  outline: none;
}

.generation-history-item__delete:hover,
.generation-history-item__delete:focus-visible {
  border-color: rgba(220, 38, 38, 0.48);
  background: rgba(254, 226, 226, 0.96);
}

.generation-history-item[disabled] .generation-history-item__action,
.generation-history-item[data-generation-history-restored="1"] .generation-history-item__action,
.generation-history-item__action--done,
.generation-history-item__action[data-generation-history-pool-restored="1"] {
  border-color: rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  color: var(--text-tertiary, #64748b);
  cursor: default;
  pointer-events: none;
}


.result-header {
  display: none;
}

.result-gallery-head__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.result-fit-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-control);
  height: var(--btn-height);
  padding: 0 var(--pad-card);
  border-radius: var(--r-control);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.result-fit-toggle:hover {
  color: var(--text-main);
  border-color: var(--border-focus);
  background: var(--brand-light);
}

.result-fit-toggle[aria-pressed="true"] {
  border-color: var(--border-focus);
  background: var(--brand-light);
  color: var(--brand-primary);
}

.result-fit-toggle__ico {
  font-size: 14px;
  line-height: 1;
  opacity: 0.95;
}

.toolbar-btn__emoji {
  margin-right: 4px;
  font-size: 14px;
  line-height: 1;
  vertical-align: -0.05em;
}

.result-stats {
  display: none;
}

.result-stats-compact {
  display: none;
}

.result-stat {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  box-shadow: var(--shadow-card);
}

.result-stat:hover {
  transform: translateY(-1px);
  background: var(--brand-light);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-hover);
}

.result-card .select-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--border-light);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  pointer-events: none;
}

.result-toolbar.batch-open ~ .result-grid .select-badge,
.result-toolbar.batch-open ~ .result-gallery-body .result-grid .select-badge,
.result-grid.batch-open .select-badge {
  opacity: 1;
  transform: scale(1);
}

.result-card.selected .select-badge {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  box-shadow: var(--shadow-focus);
}

/* 閹靛綊鍣哄Ο鈥崇础娑撳顫楅弽鍥ㄦ暭閸掓澘涔忔稉濠忕礉闁灝鍘ゆ稉搴″礁娑撳﹨顫楅幃顒€浠犻幙宥勭稊閹稿鎸抽柌宥呭綌 */
.result-toolbar.batch-open ~ .result-grid .result-card .select-badge,
.result-toolbar.batch-open ~ .result-gallery-body .result-grid .result-card .select-badge,
.result-grid.batch-open .result-card .select-badge {
  left: 10px;
  right: auto;
}

.result-stat span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0;
}

.result-stat strong {
  display: block;
  font-size: 15px;
  color: var(--text-main);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: start;
  justify-items: stretch;
  gap: 14px;
  align-items: start;
  width: 100%;
  padding-right: 4px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  box-sizing: border-box;
}

.result-empty-state {
  min-height: 200px;
  border-radius: var(--yj-radius-content, var(--r-card));
  border: 1px dashed var(--yj-border-default, var(--border-light));
  background: var(--yj-surface-card, var(--bg));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gap-module-y);
  padding: var(--space-6) var(--pad-card);
  color: var(--yj-text-muted, var(--text-secondary));
  box-shadow: var(--yj-shadow-card, var(--shadow-card));
}

.result-empty-state .result-panel-empty-hero {
  width: 28px;
  height: 28px;
  margin-bottom: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border-light));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-primary) 16%, var(--bg-card)),
    color-mix(in srgb, var(--accent-coral) 8%, var(--bg-card))
  );
  opacity: 1;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.result-panel-empty-hero--lite {
  filter: none;
}

.result-panel-empty-hero__glyph {
  position: relative;
  width: 14px;
  height: 12px;
  border: 1.5px solid var(--color-primary);
  border-radius: 2px;
  box-sizing: border-box;
}

.result-panel-empty-hero__glyph::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  top: 2px;
  right: 2px;
  border-radius: 50%;
  background: var(--color-primary);
}

.result-panel-empty-hero__glyph::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 5px;
  background: linear-gradient(135deg, transparent 0 32%, var(--color-primary) 34% 58%, transparent 60%),
    linear-gradient(45deg, transparent 0 28%, var(--accent-warm) 30% 54%, transparent 56%);
  opacity: 0.95;
}

.empty-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.empty-step {
  min-width: 88px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.empty-step i {
  color: var(--primary-color);
}

.result-empty-state strong {
  color: var(--text-primary-ui);
  font-size: 16px;
  font-weight: 600;
}

.result-empty-state span {
  font-size: 12px;
  line-height: 1.6;
  max-width: 240px;
}

.result-empty-state .result-empty-desc {
  max-width: min(280px, 92vw);
  color: var(--yj-text-muted, var(--text-secondary-ui));
  font-size: 13px;
  line-height: 1.55;
}

.result-empty-state .result-empty-guide {
  max-width: min(280px, 92vw);
}

.result-empty-state .result-empty-steps {
  counter-reset: result-empty-step;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--yj-text-muted, var(--text-secondary-ui));
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.result-empty-state .result-empty-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  counter-increment: result-empty-step;
}

.result-empty-state .result-empty-steps li::before {
  content: counter(result-empty-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.result-empty-brand {
  display: none;
}

.result-empty-brand {
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f7f3ff;
  color: #6d28d9;
  font-size: 13px;
  line-height: 1.5;
}

.result-empty-brand strong {
  display: block;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.result-empty-brand span {
  display: block;
  max-width: none;
  margin-top: 4px;
  margin-left: 0;
  background: linear-gradient(90deg, #7c3aed 0%, #d946ef 52%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 14px;
  font-weight: 800;
}

.empty-icon.empty-icon--hero {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background-color: var(--bg-page);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px);
  background-size: 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.empty-icon.empty-icon--hero i {
  font-size: 22px;
  color: #c5a46d;
}

.empty-icon.empty-icon--hero.empty-icon--svg {
  background-image: none;
  background-color: var(--bg-page);
}

.empty-icon-svg {
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  color: var(--text-tertiary, #64748b);
  opacity: 0.9;
}

.result-empty-state.generating-loading {
  min-height: 320px;
  border-radius: 18px;
  border: 1px dashed var(--border-focus);
  background: var(--brand-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 28px;
  color: var(--text-secondary);
  animation: pulseBorder 2s ease-in-out infinite;
}

.result-empty-state.generating-loading .waiting-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-top-color: var(--brand-primary-dark);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.result-empty-state.generating-loading .result-empty-icon {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
}

/* 閻㈢喐鍨氭稉顓炲窗娴ｅ秴宕遍敍姘鳖潠閹垛偓缂冩垶鐗?+ 鏉╂稑瀹抽弶鈩冨妳 + 鐏炲倹顐?*/
.result-empty-state.generating-loading.generating-loading--fx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-style: solid;
  border-color: var(--border-focus);
  background:
    radial-gradient(ellipse 85% 55% at 50% 35%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 58%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08), transparent 40%),
    var(--bg-card);
  color: var(--text-secondary);
}

.result-empty-state.generating-loading.generating-loading--fx > *:not(.gen-loading-grid) {
  position: relative;
  z-index: 1;
}

.gen-loading-grid {
  position: absolute;
  inset: -40%;
  z-index: 0;
  opacity: 0.11;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 40%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: genGridDrift 12s linear infinite;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 72%);
}

@keyframes genGridDrift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(24px, 24px);
  }
}

.gen-progress-track {
  width: min(280px, 90%);
  height: 5px;
  border-radius: 999px;
  background: var(--border-light);
  overflow: hidden;
}

.gen-progress-bar {
  width: 2%;
  min-width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 25%, transparent),
    #8b5cf6,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 25%, transparent)
  );
  transition: width 0.45s ease-out;
}

.result-empty-state.generating-loading .waiting-spinner.waiting-spinner--pulse {
  animation: spin 0.85s linear infinite, genSpinnerPulse 1.85s ease-in-out infinite;
  border-top-color: #8b5cf6;
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

@keyframes genSpinnerPulse {
  0%,
100% {
    filter: brightness(1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 18%, transparent);
  }
  50% {
    filter: brightness(1.08);
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.35);
  }
}

.result-empty-state.generating-loading.generating-loading--fx .result-empty-title {
  color: var(--text-main);
  font-weight: 600;
  letter-spacing: 0;
}

.result-empty-state.generating-loading.generating-loading--fx .result-empty-meta {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 22px;
}

.result-grid::-webkit-scrollbar {
  width: 4px;
}

.result-grid::-webkit-scrollbar-track {
  background: transparent;
}

.result-grid::-webkit-scrollbar-thumb {
  background: #2A3040;
  border-radius: 2px;
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 閹存劕濮涢崡鈽呯窗缁毖冨櫨閺傜懓娴樼紓鈺冩殣閿涘瞼鏁惧濠傜槕鎼达缚绱崗鍫幢婢堆冩禈鐟欎線顣╃憴鍫濊剨缁?*/
.result-card:not(.result-fail) {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  padding: 0;
  aspect-ratio: 1 / 1;
  display: block;
  width: 220px;
  max-width: 100%;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.07);
  animation: none;
  opacity: 1;
}

.result-presign-badge-wrap {
  position: absolute;
  left: 10px;
  bottom: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  pointer-events: none;
  max-width: calc(100% - 20px);
}

/* 妫板嫮顒烽崥宥囧Ц閹礁绐橀弽鍥风礄娴犲懐绮ㄩ弸婊冨幢閸愬拑绱濋柆鍨帳娑撳骸鍙忕粩娆忓従鐎?.badge 閸愯尙鐛婇敍?*/
.result-card .result-presign-badge-wrap .badge {
  position: relative;
  top: auto;
  left: auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.result-card .result-presign-badge-wrap .badge--error {
  background: #ffe5e5;
  color: #b00020;
}

.result-card .result-presign-badge-wrap .badge--warn {
  background: #fff4e5;
  color: #c77c00;
}

.uploaded-item .img-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(234, 179, 8, 0.38);
  color: #1c1917;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.uploaded-item .img-status i {
  font-size: 14px;
  color: #92400e;
}

.uploaded-item .img-status--small {
  background: rgba(251, 191, 36, 0.32);
}

.result-card.result-fail--friendly .fail-title {
  font-size: 15px;
  color: #991b1b;
}

.result-card.result-fail--friendly .fail-reason {
  color: #64748b;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.fail-raw-snippet {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
  word-break: break-word;
  max-width: 100%;
}

.fail-recover {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(239, 68, 68, 0.12);
}

.fail-recover-tip {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
}

.fail-recover-btn {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-purple) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-primary) 10%, transparent));
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  pointer-events: auto;
}

.fail-recover-btn:hover {
  filter: brightness(1.08);
}

.fail-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 9px;
  cursor: pointer;
  font-family: inherit;
}

.fail-card-close:hover {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.45);
  background: #fff;
}

.mobile-download-all-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-download-all-bar:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9980;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    background: rgba(15, 20, 25, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  }

  body.has-mobile-generate-bar .mobile-download-all-bar:not([hidden]) {
    display: none !important;
  }

  .mobile-download-all-btn {
    width: 100%;
    max-width: 420px;
    height: 48px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--brand-primary-dark));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 35%, transparent);
  }

  .result-panel.mobile-dl-bar-visible .result-grid,
.result-panel.mobile-dl-bar-visible .result-gallery-body .result-grid {
    padding-bottom: 88px;
  }
}

.result-card:not(.result-fail):hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.1),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: var(--border-focus);
}

.result-card:not(.result-fail).selected {
  background: var(--brand-light);
  border-color: var(--border-focus);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent),
    0 12px 28px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.result-card.selected .result-img {
  filter: saturate(1.08);
}

.result-card.result-fail {
  position: relative;
  cursor: default;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 180px;
  padding: var(--space-6);
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
  animation: fadeScaleIn 0.4s ease-out forwards;
  opacity: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.08);
}

.result-card.result-fail:hover {
  transform: none;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.38);
}

.result-card.result-fail .fail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fee2e2;
  font-size: 20px;
  font-weight: 800;
  color: #dc2626;
  line-height: 1;
}

.result-card.result-fail .fail-title {
  font-size: 14px;
  font-weight: 700;
  color: #991b1b;
}

.result-card.result-fail .fail-reason {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
}

.result-card.result-fail--single-retry {
  min-height: 168px;
  gap: 8px;
  padding: 16px 14px;
}

.result-card.result-fail--single-retry .fail-recover {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .generation-history-bulkbar--active::after,
.generation-history-item {
    animation: none;
  }

  .generation-history-item,
.generation-history-item:hover {
    transform: none;
  }

  .result-card {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .result-card:not(.result-fail):hover {
    transform: translateY(-4px);
  }

  .result-card:hover .result-card-media .result-img {
    transform: none;
  }

  .result-card-actions {
    transition: none;
  }

  .result-skeleton,
.result-skeleton::before,
.result-skeleton::after,
.skeleton-img__pulse,
.skeleton-generation-status,
.skeleton-loading-headline,
.result-card-media--loading,
.result-card-media--loading::before,
.result-card-media--loading::after,
.result-image-grid-placeholder.result-gallery-image-grid--active .result-item,
.result-image-grid-placeholder.result-gallery-image-grid--active .result-item::before,
.result-image-grid-placeholder.result-gallery-image-grid--active .result-item::after,
.generate-btn:active::before,
.preview-detail-image-stage--loading::before,
.preview-detail-image-stage--loading::after,
.image-editor-stage--loading::before,
.image-editor-stage--refining::before {
    animation: none !important;
  }

  .generate-btn:active::before {
    animation: none;
  }

  .gen-loading-grid,
.gen-progress-bar,
.skeleton-progress-bar .skeleton-progress-inner,
.result-panel-loading-state__bar span,
.result-panel-loading-state__bar span::before,
.result-panel-loading-state__bar i,
.result-panel-loading-state__steps .is-active::before {
    animation: none !important;
  }

  .result-panel-loading-state__bar span {
    transition: none !important;
  }

  .ratio-btn.active,
.resolution-btn.active,
.param-btn.active {
    animation: none !important;
  }

  .result-empty-state.generating-loading {
    animation: none;
  }

  .result-empty-state.generating-loading .waiting-spinner.waiting-spinner--pulse {
    animation: spin 0.85s linear infinite;
  }

  .shimmer,
[class*="shimmer"],
.skeleton-img__pulse,
.ops-chat-generation-card,
.ops-canvas-result-skeleton,
.ops-canvas-result-skeleton .skeleton-img::before,
.ops-canvas-card--generating-skeleton,
.ops-canvas-card--generating-skeleton .skeleton-img,
.generation-history-loading-card {
    animation: none !important;
  }
}

.result-card-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.result-card-media--loading {
  position: relative;
  background:
    radial-gradient(circle at 28% 24%, rgba(124, 58, 237, 0.11), transparent 34%),
    radial-gradient(circle at 78% 76%, rgba(14, 165, 233, 0.1), transparent 36%),
    var(--yj-loading-surface, linear-gradient(180deg, #f8fafc 0%, #eef2ff 48%, #f8fafc 100%));
  animation: skeleton-card-breathe var(--yj-loading-breathe-duration, 2.4s) ease-in-out infinite;
}

/* Screen/role labels stay in data-screen-label for sorting and export.
   Do not paint caption chips on historical material-pool thumbs — they clutter browsing. */
.result-card[data-screen-label]::after,
.result-card[data-slot-badge]::after {
  content: none;
  display: none;
}

/* Current ecommerce run only: short slot / responsibility badge. */
.result-card[data-current-run="1"][data-slot-badge]::after {
  content: attr(data-slot-badge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 7;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.result-card[data-current-run="1"] {
  position: relative;
}

#posterFeatureBlock .poster-feature-block__group:has(#posterSceneBtns) { display: none !important; }
#posterFeatureBlock .poster-strategy-group { margin-top: 0; padding: 0 !important; overflow: hidden; }
#posterFeatureBlock .poster-strategy-group:not([open]) { min-height: 58px !important; height: 58px; max-height: 58px; }
#posterFeatureBlock .poster-strategy-group .module-title {
  position: relative;
  width: 100%;
  min-height: 56px !important;
  height: 56px;
  padding: 8px 36px 8px 12px;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
#posterFeatureBlock .poster-strategy-group .module-title::-webkit-details-marker { display: none; }
.poster-role-summary__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f0ebff;
  color: var(--yj-appearance-primary,#6d3df0);
  font-size: 12px;
  font-weight: 800;
}
.poster-role-summary__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  text-align: left;
  justify-items: start;
  align-content: center;
}
.poster-role-summary__copy strong {
  overflow: hidden;
  color: #253047;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-align: left;
}
.poster-role-summary__copy small {
  color: var(--yj-appearance-primary,#7857df);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.poster-role-summary__chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin: 0;
  transform: translateY(-50%);
  color: var(--yj-appearance-primary,#6d3df0);
}
#posterFeatureBlock .poster-strategy-group[open] .poster-role-summary__chevron {
  transform: translateY(-50%) rotate(180deg);
}
.poster-role-picker { margin: 0 10px 10px; padding: 12px; border: 1px solid #e3e7ef; border-radius: 12px; background: #f8f9fd; }
.poster-role-picker > p { margin: 0 0 9px; color: #687386; font-size: 12px; }
.poster-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.poster-role-grid button { display: flex; align-items: flex-start; gap: 9px; min-height: 64px; padding: 10px 12px; border: 1px solid #d7dce5; border-radius: 10px; background: #fff; color: #273142; text-align: left; cursor: pointer; }
.poster-role-grid button.active { border-color: var(--yj-appearance-primary,#6d4aff); background: #f2efff; color: var(--yj-appearance-primary,#4b2bc5); }
.poster-role-grid [data-role-order] { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; border-radius: 50%; background: #e9e5ff; color: var(--yj-appearance-primary,#5334ce); font-size: 11px; }
.poster-role-copy { display: grid; gap: 3px; min-width: 0; }
.poster-role-copy strong { font-size: 13px; }
.poster-role-copy small { color: #7a8495; font-size: 11px; font-weight: 500; line-height: 1.4; }
@media (max-width: 620px) { .poster-role-grid { grid-template-columns: 1fr; } }

.result-card-media--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--yj-loading-sweep, linear-gradient(110deg, transparent 0%, rgba(124, 58, 237, 0.1) 45%, transparent 70%));
  transform: translateX(-100%);
  animation: skeletonSweep var(--yj-loading-sweep-duration, 1.6s) ease-in-out infinite;
}

.result-card-media--loading::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 10px 28px rgba(124, 58, 237, 0.08);
  pointer-events: none;
  animation: result-loading-inner-breathe 2.8s ease-in-out infinite;
}

.result-card .result-img.result-img--pending {
  opacity: 0;
}

.result-card .result-img.result-img--loaded {
  opacity: 1;
}

@keyframes result-loading-inner-breathe {
  0%,
100% {
    opacity: 0.56;
    transform: scale(0.985);
  }
  50% {
    opacity: 0.95;
    transform: scale(1);
  }
}

.result-card:not(.result-fail) .result-card-media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.result-card .result-img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  display: block;
  background: var(--bg-main);
  border-radius: 10px;
  transition: transform 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
}

/* 閹存劕濮涢崡鈽呯窗閸ュ搫鐣鹃悽缁橆攱閸?cover 闁剧儤寮?*/
.result-card:not(.result-fail) .result-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}

.result-card:not(.result-fail):hover .result-card-media .result-img {
  transform: scale(1.02);
}

/* 婢跺洭鈧绱扮€瑰本鏆ｅВ鏂剧伐閿涘牊娼堥柌宥嗘纯娴ｅ函绱伴悾銉х級鐏?+ 鏉炶崵浼嗛敍?*/
.result-grid--fit-contain .result-card:not(.result-fail) .result-card-media {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.result-grid--fit-contain .result-card:not(.result-fail) .result-img {
  object-fit: contain;
  opacity: 0.9;
  filter: grayscale(0.25) brightness(0.94);
  transform: scale(0.93);
}

.result-grid--fit-contain .result-card:not(.result-fail):hover .result-card-media .result-img {
  transform: scale(0.95);
  filter: grayscale(0.18) brightness(0.96);
}

/* 閸旂喕鍏樻い纰夌窗缂佹挻鐏夐崡鈩冪槷娓氬绱欓悽璇茬矕缁毖冨櫨閿涙稒鎹ｉ幎?鐠囷附鍎忛梹鍨禈妫板嫯顫嶅鍦崶閸愬懐婀呴崗銊ユ禈閿?*/
body[data-app-feature="poster"] .result-card:not(.result-fail) {
  aspect-ratio: 1 / 1;
  max-width: 220px;
}

body[data-app-feature="detail-page"] .result-card:not(.result-fail) {
  aspect-ratio: 1 / 1;
  max-width: 220px;
  max-height: none;
}

body[data-app-feature="detail-page"] .result-card:not(.result-fail) .result-img {
  object-fit: cover;
}

body[data-app-feature="matting-refine"] .result-card:not(.result-fail),
body[data-app-feature="image-edit"] .result-card:not(.result-fail) {
  max-width: 220px;
}

.result-card.img-failed .result-img {
  display: none;
}

.result-card.img-failed .result-card-actions {
  display: none;
}

.result-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 28px;
  gap: 4px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-4px);
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.result-card:hover .result-card-actions,
.result-card:focus-within .result-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: none) {
  .result-card .result-card-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.result-card-action-btn {
  width: 58px;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  font-size: 0;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  /* 閻栧墎楠?.result-card-actions 閸︺劑娈ｉ挊蹇斺偓浣疯礋 pointer-events:none 閺冭绱濇禒宥勭箽鐠囦焦瀵滈柦顔煎讲閸涙垝鑵戦妴浣稿讲閹凤附鍩呴悙鐟板毊 */
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.result-card-action-btn::before {
  content: attr(data-label);
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
}

.result-card-action-btn .yj-emoji {
  display: none;
}

.result-card-action-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.22);
  background: #fff;
  color: #7c3aed;
}

.result-card-action-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.result-card-action-btn[data-card-action="download"]:hover {
  background: #f5f3ff;
}

.result-card-action-btn[data-card-action="download"][aria-busy="true"],
.result-card-action-btn[data-card-action="download"].yj-btn-busy {
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.35);
  background: #f5f3ff;
}

.result-card-action-btn[data-card-action="download"][data-yj-download-state="done"] {
  color: #166534;
  border-color: rgba(34, 197, 94, 0.4);
  background: #dcfce7;
}

.result-card:has([data-card-action="download"][aria-busy="true"]) .result-card-actions,
.result-card:has([data-card-action="download"][data-yj-download-state="done"]) .result-card-actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.result-card-action-btn[data-card-action="reference"]:hover {
  background: #f5f3ff;
}

.result-card-action-btn--danger,
.result-card-action-btn[data-card-action="delete"] {
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(254, 242, 242, 0.94);
}

.result-card-action-btn[data-card-action="delete"]:hover {
  border-color: rgba(239, 68, 68, 0.32);
  background: #fee2e2;
  color: #b91c1c;
}

.result-card .img-error-hint {
  padding: 14px 12px 4px;
  color: var(--yj-loading-error-fg, #991b1b);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}

.result-card .img-error-sub {
  padding: 0 12px 4px;
  color: var(--yj-loading-error-muted, #64748b);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.result-card .img-error-url {
  padding: 0 12px 12px;
  color: #7B8190;
  font-size: 11px;
  line-height: 1.4;
  word-break: break-all;
  text-align: center;
}

.result-card .img-error-retry-btn,
.result-card .img-error-recover-btn,
.result-card .img-error-match-btn,
.result-card .img-error-history-btn,
.result-card .img-error-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 4px auto 0;
  padding: 0 10px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 8px;
  background: #ffffff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.result-card .img-error-remove-btn {
  border-color: rgba(220, 38, 38, 0.22);
  color: #b91c1c;
}

.result-card .img-error-retry-btn + .img-error-remove-btn {
  margin-top: 6px;
}

.result-card .result-img i {
  font-size: 30px !important;
}



.result-card .action-btn i {
  font-size: 11px;
}

.result-card .action-btn:hover {
  color: #FFFFFF;
  background: rgba(96, 165, 250, 0.3);
  transform: translateY(-1px);
}

/* Toast閿涙艾褰告稉瀣潡閸棗褰旈敍宀冨殰閸欏厖鏅跺鎴濆弳 */
.toast-container {
  position: fixed;
  top: calc(76px + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 10020;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(92vw, 420px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px var(--pad-card) 14px;
  border-radius: var(--r-card);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: var(--text-body);
  font-weight: 400;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: var(--gap-control);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 320ms cubic-bezier(0.34, 1.15, 0.64, 1);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

body.yj-cursor-wait,
body.yj-cursor-wait button:not([disabled]),
body.yj-cursor-wait .btn {
  cursor: wait !important;
}

button.yj-btn-busy,
.yj-btn-busy {
  opacity: 0.88;
  pointer-events: none;
}

button:not(:disabled):active,
.yj-btn-busy:active {
  transform: scale(0.98);
}

.yj-global-status {
  position: fixed;
  top: max(56px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.yj-global-status.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.yj-global-status--dock {
  top: auto;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  left: auto;
  right: max(16px, env(safe-area-inset-right, 0px));
  transform: translateY(8px);
  max-width: min(92vw, 360px);
  border-radius: 16px;
  padding: 12px 14px;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.32);
}

.yj-global-status--dock.is-visible {
  transform: translateY(0);
}

/* Prefer anchoring download progress in the result toolbar (next to retention notice). */
.result-download-status-host {
  display: none;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: min(100%, 420px);
  align-items: stretch;
}

.result-download-status-host:not([hidden]) {
  display: flex;
}

.result-download-status-host[hidden] {
  display: none !important;
}

.result-download-retry-bar {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: min(100%, 460px);
  padding: 7px 10px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid rgba(194, 65, 12, 0.28);
  color: #9a3412;
}

.result-download-retry-bar:not([hidden]) {
  display: inline-flex;
}

.result-download-retry-bar[hidden] {
  display: none !important;
}

.result-download-retry-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.result-download-retry-bar__btn {
  flex: 0 0 auto;
  border: 1px solid rgba(194, 65, 12, 0.35);
  background: #ea580c;
  color: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.result-download-retry-bar__btn--recovery {
  border-color: rgba(126, 34, 206, 0.35);
  background: #7e22ce;
}

.result-download-retry-bar__dismiss {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #9a3412;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.yj-global-status--toolbar {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  align-items: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  background: #0f172a;
  z-index: 2;
}

.yj-global-status--toolbar.is-visible {
  transform: none;
}

.yj-global-status--toolbar .yj-global-status__hint {
  color: rgba(255, 255, 255, 0.88);
}

.yj-global-status--toolbar .yj-global-status__spinner {
  margin-top: 0;
}

.yj-global-status--toolbar .yj-global-status__cancel {
  align-self: center;
}

.yj-global-status__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yj-global-status__hint {
  font-size: 11px;
  font-weight: 500;
  color: rgba(248, 250, 252, 0.78);
  line-height: 1.35;
}

.yj-global-status--dock .yj-global-status__spinner {
  margin-top: 2px;
}

.yj-global-status--dock .yj-global-status__cancel {
  align-self: center;
  flex-shrink: 0;
}

/* Docked download progress must never put the whole page into wait-cursor lock. */
body.yj-global-status-dock-active,
body.yj-global-status-dock-active button:not([disabled]),
body.yj-global-status-dock-active .btn {
  cursor: auto;
}

.yj-global-status__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: yj-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.yj-global-status__cancel {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

@keyframes yj-spin {
  to {
    transform: rotate(360deg);
  }
}

.toast .toast-msg {
  flex: 1;
  min-width: 0;
}

.toast > .yj-toast-ico {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  opacity: 0.95;
}

.toast.success > .yj-toast-ico {
  filter: none;
}

.toast.error > .yj-toast-ico {
  filter: none;
}

.toast.info > .yj-toast-ico {
  filter: none;
}

.toast.warning > .yj-toast-ico {
  filter: none;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 95%, transparent), color-mix(in srgb, var(--color-primary) 55%, transparent));
  transform-origin: left center;
  transition: transform 0.08s linear;
}

.toast.success {
  border-left: 3px solid var(--success);
}

.toast.error {
  border-left: 3px solid var(--danger);
}

.toast.info {
  border-left: 3px solid var(--primary);
}

.toast.warning {
  border-left: 3px solid var(--warning);
}

/* Footer */
.site-footer {
  margin-top: var(--space-6);
  padding: 18px 24px 24px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-placeholder);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 10px;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  transition: color 200ms ease-out;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.footer-link:hover {
  color: var(--text-main);
}

.footer-note {
  font-size: 12px;
  line-height: 1.6;
}

.footer-info-modal {
  max-width: 560px;
}

.footer-info-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  display: grid;
  gap: 10px;
}

.footer-info-body h4 {
  color: var(--text-main);
  font-size: 14px;
  margin-top: 4px;
}

.footer-info-body p {
  color: var(--text-secondary);
}

/* Key Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 26, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease;
  z-index: 1100;
  padding: 16px;
}

.modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop:not(.visible),
.modal-backdrop[hidden] {
  pointer-events: none !important;
}

#previewModalBackdrop.modal-backdrop {
  z-index: 3000;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Key Modal — light SaaS surface */
#keyModalBackdrop.modal-backdrop {
  z-index: 1300;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.key-modal {
  width: min(480px, 100%);
  border-radius: var(--yj-radius-content, 12px);
  background: var(--yj-surface-card, #ffffff);
  border: 1px solid var(--yj-border-default, #e2e8f0);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
  padding: var(--pad-card);
}

.key-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--yj-border-default, #e2e8f0);
}

.key-modal-header__left {
  flex: 1;
  min-width: 0;
}

.key-modal__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--yj-text-title, #0f172a);
}

.key-modal .step-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.key-modal .step-inline-hint {
  color: var(--yj-text-muted, #64748b);
  font-size: 12px;
  line-height: 1.5;
}

#keyModalBackdrop .modal-close-btn {
  background: #f8fafc;
  color: #64748b;
  border-color: var(--yj-border-default, #e2e8f0);
}

#keyModalBackdrop .modal-close-btn:hover {
  color: #7c3aed;
  background: #f3efff;
  border-color: rgba(124, 58, 237, 0.28);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 180ms ease;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

#closePreviewModal {
  background: transparent;
  color: #64748b;
  border-color: transparent;
  box-shadow: none;
}

#closePreviewModal::before {
  content: "\00D7";
  display: block;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

#closePreviewModal .yj-emoji {
  display: none;
}

#closePreviewModal:hover {
  color: #0f172a;
  background: #f1f5f9;
  border-color: transparent;
}

.modal-close-btn:hover {
  color: var(--text-main);
  background: #2a3144;
  background: color-mix(in srgb, var(--primary) 18%, var(--bg-hover));
}

.key-modal-tip {
  font-size: 12px;
  color: var(--text-placeholder);
  margin-bottom: 14px;
  line-height: 1.6;
}

.key-input-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ui-text-label);
  margin-bottom: var(--ui-gap-2);
  line-height: 1.45;
}

.key-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.key-input {
  flex: 1;
  height: 42px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-hover);
  color: var(--text-main);
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
}

.key-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}

.toggle-visibility-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 180ms ease;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
}

.toggle-visibility-btn:hover {
  color: var(--text-main);
  background: color-mix(in srgb, var(--primary) 15%, var(--bg-hover));
}

.key-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.key-modal-btn {
  height: 38px;
  border-radius: 12px;
  border: none;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}

#keyModalBackdrop .key-input-label {
  color: var(--yj-text-body, #334155);
}

#keyModalBackdrop .key-input,
#keyModalBackdrop .toggle-visibility-btn {
  background: #ffffff;
  border-color: var(--yj-border-default, #e2e8f0);
  color: var(--yj-text-title, #0f172a);
}

#keyModalBackdrop .key-input:focus {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

#keyModalBackdrop .key-modal-tip,
#keyModalBackdrop .step-inline-hint[style] {
  color: var(--yj-text-muted, #64748b);
}

.key-modal-recharge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: var(--yj-radius-tool, 6px);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(255, 255, 255, 0.98));
}

.key-modal-recharge-row span {
  min-width: 0;
  color: var(--yj-text-muted, #64748b);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.key-modal-btn--recharge {
  flex: 0 0 auto;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: #ffffff;
  color: #6d28d9;
  font-weight: 700;
}

.key-modal-btn--recharge:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.42);
  background: #f5f3ff;
}

.key-modal-btn.ghost {
  background: #ffffff;
  color: var(--yj-text-body, #334155);
  border: 1px solid var(--yj-border-default, #e2e8f0);
}

.key-modal-btn.ghost:hover {
  background: #f8fafc;
  color: var(--yj-text-title, #0f172a);
  border-color: rgba(124, 58, 237, 0.24);
}

.key-modal-btn.primary {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.key-modal-btn.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.insufficient-balance-modal__lead {
  margin: 0 0 16px;
  color: var(--color-text-secondary, #5c6470);
  font-size: 14px;
  line-height: 1.6;
}

.insufficient-balance-modal__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.insufficient-balance-modal__stat {
  padding: 12px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface-muted, #f4f6f8) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e8ec) 80%, transparent);
  text-align: center;
}

.insufficient-balance-modal__stat dt {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--color-text-secondary, #5c6470);
}

.insufficient-balance-modal__stat dd {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #1a1d21);
}

.insufficient-balance-modal__stat--deficit dd {
  color: var(--color-danger, #d64545);
}

@media (max-width: 560px) {
  .insufficient-balance-modal__stats {
    grid-template-columns: 1fr;
  }

  .key-modal-recharge-row {
    align-items: stretch;
    flex-direction: column;
  }

  .key-modal-btn--recharge {
    width: 100%;
  }
}

.wechat-box {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-hover);
  padding: 12px;
  margin-bottom: 12px;
}

.pricing-panel {
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  background: var(--brand-light);
  padding: 12px;
  margin-bottom: 12px;
}

.pricing-title {
  font-size: 12px;
  color: var(--primary-hover);
  font-weight: 700;
  margin-bottom: 8px;
}

.pricing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.pricing-item strong {
  color: var(--text-main);
}

.wechat-label {
  font-size: 12px;
  color: var(--text-placeholder);
  margin-bottom: 6px;
}

.wechat-value {
  font-size: 15px;
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.recharge-notes {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}

.preview-modal {
  width: min(760px, 94vw);
  border-radius: 20px;
  background: #ffffff;
  border: none;
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  padding: 16px;
}

.preview-modal--detail {
  position: relative;
  width: min(1080px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  --preview-side-width: min(300px, 34vw);
  --preview-image-center-x: calc((100% - var(--preview-side-width)) / 2);
  background: #ffffff;
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

.preview-nav-fab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  touch-action: manipulation;
  user-select: none;
}

.preview-nav-fab::before {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.preview-nav-fab .yj-emoji {
  display: none;
}

.preview-nav-fab--prev::before {
  content: "\2039";
}

.preview-nav-fab--next::before {
  content: "\203A";
}

.preview-nav-fab:hover {
  background: rgba(15, 23, 42, 0.72);
  transform: translateY(-50%) scale(1.04);
}

.preview-nav-fab:disabled,
.preview-nav-fab[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
  pointer-events: none;
}

.preview-nav-fab--prev {
  left: 20px;
}

.preview-nav-fab--next {
  right: calc(var(--preview-side-width) + 20px);
}

.preview-nav-counter {
  position: absolute;
  bottom: 16px;
  left: var(--preview-image-center-x);
  transform: translateX(-50%);
  z-index: 40;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 999px;
  pointer-events: none;
}

.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 16px 20px 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.preview-modal-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.preview-modal-body {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-hover);
}

.preview-modal-body .result-img {
  width: 100%;
  min-height: 420px;
}

.preview-modal-body--detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  position: relative;
  z-index: 1;
}

.preview-detail-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  align-items: stretch;
}

.preview-detail-image-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px 24px;
  background: #eef1f6;
  overflow: hidden;
}

.preview-detail-image-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.preview-detail-image-stage--loading::before {
  content: "";
  position: absolute;
  inset: 10% 8%;
  border-radius: 12px;
  background: var(--yj-loading-surface, #f8fafc);
  border: 1px solid rgba(124, 58, 237, 0.22);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.06);
  animation: skeleton-card-breathe var(--yj-loading-breathe-duration, 2.4s) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.preview-detail-image-stage--loading::after {
  content: "";
  position: absolute;
  inset: 10% 8%;
  border-radius: 12px;
  pointer-events: none;
  background: var(--yj-loading-sweep, linear-gradient(110deg, transparent 0%, rgba(124, 58, 237, 0.1) 45%, transparent 70%));
  transform: translateX(-100%);
  animation: skeletonSweep var(--yj-loading-sweep-duration, 1.6s) ease-in-out infinite;
  z-index: 1;
}

.preview-detail-image {
  max-width: 100%;
  max-height: min(72vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  transition: opacity 0.14s ease;
}

.preview-refine-mask-canvas {
  position: absolute;
  z-index: 4;
  touch-action: none;
  cursor: crosshair;
  border-radius: 12px;
  pointer-events: none;
}

.preview-modal--refine .preview-refine-mask-canvas {
  pointer-events: auto;
}

.preview-modal--refine .preview-detail-image-stage {
  cursor: crosshair;
}

.preview-modal--refine .preview-result-strip {
  display: none !important;
}

.preview-modal--refine .preview-detail-actions {
  display: none;
}

.preview-detail-image.preview-detail-image--loading {
  opacity: 0;
}

.generation-history-loading {
  padding: 20px 12px 8px;
}

.generation-history-loading__label {
  margin: 0 0 14px;
  text-align: center;
  color: var(--yj-text-muted, #64748b);
  font-size: 13px;
}

.generation-history-loading__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.generation-history-loading-card {
  min-height: 108px;
}

.generation-history-loading-card .skeleton-img__pulse {
  animation: spin 0.85s linear infinite !important;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .generation-history-loading-card .skeleton-img__pulse {
    animation: spin 1.15s linear infinite !important;
  }
}

.image-editor-stage--loading::before,
.image-editor-stage--refining::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.35);
  animation: skeleton-card-breathe var(--yj-loading-breathe-duration, 2.4s) ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.image-editor-stage--refining::after {
  content: "精修中…";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 12px;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 3;
}

.preview-result-strip {
  flex: 0 0 auto;
  width: min(100%, 680px);
  max-width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  scrollbar-width: thin;
}

.preview-result-strip[hidden] {
  display: none !important;
}

.preview-result-thumb {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.preview-result-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.preview-result-thumb.is-active {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14), 0 10px 22px rgba(15, 23, 42, 0.14);
}

.preview-result-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.preview-result-thumb span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.preview-result-thumb.is-active span {
  background: #7c3aed;
}

.preview-detail-side {
  width: min(300px, 34vw);
  flex-shrink: 0;
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  border-left: none;
  background: #ffffff;
}

.preview-detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-modal--refine .preview-detail-side > .preview-detail-section {
  display: none;
}

.preview-refine-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-refine-panel[hidden] {
  display: none !important;
}

.preview-refine-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.preview-refine-cost-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.preview-refine-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.preview-refine-tool {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.preview-refine-tool.is-active {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

.preview-refine-size-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
}

.preview-refine-size {
  width: 100%;
  min-width: 0;
}

.preview-refine-prompt {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 112px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #fff;
  color: #0f172a;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}

.preview-refine-prompt:focus {
  border-color: rgba(124, 58, 237, 0.58);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.preview-refine-status {
  white-space: pre-line;
}
.preview-refine-status.is-running {
  padding: 12px;
  border: 1px solid #d9c8ff;
  border-radius: 10px;
  background: #f5f0ff;
  color: #6331ad;
}
.preview-refine-status.is-running::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid #d9c8ff;
  border-top-color: #7434df;
  border-radius: 50%;
  animation: preview-refine-spin 1s linear infinite;
}
@keyframes preview-refine-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .preview-refine-status.is-running::before { animation: none; }
}
.preview-refine-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.preview-refine-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.preview-detail-h {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: none;
  padding-bottom: 0;
  line-height: 1.25;
}

.preview-detail-text {
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-detail-muted {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
}

.preview-detail-params {
  font-size: 13px;
  line-height: 1.65;
  color: #1e293b;
}

.preview-detail-params .preview-param-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.preview-detail-params .preview-param-k {
  color: #64748b;
  flex-shrink: 0;
  min-width: 4.5em;
}

.preview-detail-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-detail-thumbs img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: none;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.preview-detail-thumbs img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.preview-detail-copy {
  align-self: flex-start;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #7c3aed;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s ease;
}

.preview-detail-copy:hover {
  color: #6d28d9;
  background: transparent;
  border-color: transparent;
}

.preview-detail-actions {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-detail-btn {
  min-height: 40px;
  height: auto;
  box-sizing: border-box;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.preview-detail-btn:active {
  transform: scale(0.98);
}

.preview-detail-btn--primary {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}

.preview-detail-btn--primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.34);
}

.preview-detail-btn--secondary {
  background: #f1f5f9;
  color: #334155;
}

.preview-detail-btn--secondary:hover {
  background: #e8edf4;
}

.preview-detail-btn--ghost {
  background: transparent;
  color: #64748b;
}

.preview-detail-btn--ghost:hover {
  background: #f8fafc;
  color: #334155;
}

@media (max-width: 840px) {
  .preview-modal--detail {
    width: min(100vw - 20px, 100%);
    max-height: 94vh;
    --preview-side-width: 0px;
    --preview-image-center-x: 50%;
  }

  .preview-nav-counter {
    bottom: auto;
    top: 46px;
    font-size: 11px;
  }

  .preview-nav-fab {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  .preview-detail-layout {
    flex-direction: column;
  }

  .preview-detail-side {
    width: 100%;
    max-height: 42vh;
    border-left: none;
    border-top: none;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06);
    padding-top: 16px;
  }

  .preview-detail-image {
    max-height: 34vh;
  }

  .preview-result-strip {
    width: 100%;
    min-height: 64px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 14px;
  }

  .preview-result-thumb {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .preview-modal--detail {
    max-height: 95vh;
    padding: 0;
    border-radius: 16px;
  }

  .preview-modal-body--detail {
    max-height: calc(95vh - 52px);
  }

  .preview-detail-side {
    width: 100%;
    max-height: 38vh;
    min-height: 0;
    padding: 12px;
  }

  .preview-detail-image {
    max-height: 30vh;
  }

  .preview-detail-image-col {
    gap: 10px;
    padding: 14px;
  }

  .preview-nav-fab {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }

  .preview-nav-fab--prev {
    left: 12px;
  }

  .preview-nav-fab--next {
    right: 12px;
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tooltip 閹剚璇為幓鎰仛 */
.tooltip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-placeholder);
  cursor: help;
  transition: color 200ms ease-out;
  font-size: 14px;
  line-height: 1;
  z-index: 10;
}

.tooltip-trigger:hover {
  color: var(--primary);
}

.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 8px;
  width: 180px;
  max-width: 180px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out;
  z-index: 9999;
  box-shadow: var(--shadow-dropdown);
}

.tooltip-trigger::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--border-subtle) transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out;
  z-index: 10000;
}

.tooltip-trigger:hover::after,
.tooltip-trigger:hover::before,
.tooltip-trigger.tooltip-visible::after,
.tooltip-trigger.tooltip-visible::before {
  opacity: 1;
  visibility: visible;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  width: 100%;
}

.section-header .module-title {
  margin-bottom: 0;
  font-size: 13px;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.section-header .section-tip {
  font-size: 12px;
  color: #718096;
  line-height: 1.5;
  white-space: nowrap;
}

/* Loading 閸斻劎鏁?*/
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(13, 16, 21, 0.3);
  border-top-color: #0D1015;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 閸濆秴绨插蹇撶鐏炩偓 */
@media (max-width: 1200px) {
  .page-container {
    flex-direction: column;
    padding: 16px;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    width: 100%;
    flex-direction: column;
    gap: 16px;
    border-right: none;
  }

  .sidebar-nav {
    flex: none;
  }

  .sidebar-nav .nav-btn {
    display: inline-flex;
    width: auto;
    margin-bottom: 0;
    margin-right: 8px;
  }

  .sidebar-nav .nav-btn.active {
    transform: none;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(167, 139, 250, 0.14) inset;
  }

  .sidebar-nav .nav-btn.active .nav-btn__label {
    font-size: 13px;
  }

  .sidebar-nav .nav-btn.active .nav-btn__icon {
    transform: scale(1.08);
  }

  .sidebar .sidebar-card {
    padding: 12px 16px;
  }

  .sidebar .module-title {
    margin-bottom: 8px;
  }

  .nav-divider {
    margin: 10px 0;
  }

  .vip-card {
    display: none;
  }

  .main-area {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
    padding: 24px 16px;
    border-left: none;
    border-right: none;
  }

  .result-panel {
    width: 100%;
    flex: none;
    border-left: none;
  }

  .result-panel .result-grid,
#resultGrid.result-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 14px;
    justify-content: start;
    justify-items: start;
    align-items: start;
  }

  .upload-zone {
    max-height: 360px;
    height: auto;
  }

  .reference-upload-zone {
    height: auto !important;
    max-height: 240px !important;
  }

  .sidebar-nav .nav-tag {
    display: none;
  }
}

@media (max-width: 768px) {
  .top-bar {
    padding: 0 12px;
    gap: 8px;
  }

  .top-bar-brand .brand-tagline {
    display: none !important;
  }

  .top-bar-right .nav-link {
    display: none;
  }

  .top-bar-brand .brand-sub {
    display: none;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-mark-letters {
    font-size: 21px;
  }

  .top-bar-brand .brand-text {
    font-size: 15px;
  }

  .sidebar-nav .module-title {
    width: 100% !important;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .sidebar-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar {display: none;}

  .sidebar-nav .nav-btn {
    margin-right: 6px;
    font-size: 12px;
    padding: 0 12px;
    height: 36px;
    flex: 1 1 auto;
  }


  .upload-block {
    height: auto !important;
    min-height: 0 !important;
  }

  .upload-section-group .upload-block .preview-container.preview-area {
    max-height: 108px !important;
    overflow: hidden !important;
  }

  .upload-section-group .upload-ref-expandable .preview-container.preview-area {
    min-height: 84px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .upload-section-group .upload-ref-expandable .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn {
    min-height: 84px !important;
  }

  .upload-section-group .upload-ref-expandable .reference-upload-zone.upload-zone--has-items {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .reference-upload-zone.upload-zone--has-items .uploaded-item,
.reference-upload-zone.upload-zone--has-items .add-image-btn {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 84px !important;
  }

  .upload-section-group .upload-block .preview-container .upload-zone {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    max-height: 100% !important;
    min-height: 56px !important;
    overflow: hidden !important;
  }

  .upload-zone {
    max-height: 320px !important;
    min-height: 0;
    height: auto !important;
    padding: 8px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
  }

  .upload-placeholder {
    min-width: 0;
  }

  .upload-zone .uploaded-item,
.upload-zone .add-image-btn {
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
  }

  .upload-section-group .upload-block .upload-zone .uploaded-item,
.upload-section-group .upload-block .upload-zone .add-image-btn {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  .upload-section-group .upload-block .upload-zone .uploaded-item img,
.upload-section-group .upload-block .upload-zone .uploaded-item .preview-img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .reference-upload-zone {
    max-height: none !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 84px !important;
  }

  .reference-upload-zone.upload-zone--has-items .uploaded-item,
.reference-upload-zone.upload-zone--has-items .add-image-btn {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  .upload-section-group .upload-block .reference-upload-zone {
    max-height: 100% !important;
  }

  .model-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .model-btn {
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .main-area #panelStandard #modelBtns.model-btns .model-btn {
    min-height: 46px;
    height: auto;
    max-height: none;
  }

  .model-btn.selected {
    transform: none;
  }

  .custom-input-wrap .custom-input {
    padding-right: 16px;
  }

  .custom-input-feedback {
    position: static;
    transform: none;
    max-width: none;
    text-align: left;
    margin-top: 6px;
    padding-left: 2px;
  }

  .ratio-btns {
    gap: 6px;
  }
  .ratio-btn {
    padding: 0 12px;
    font-size: 12px;
  }

  .generate-btn {
    width: 100%;
  }

  .result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    justify-content: stretch;
    justify-items: stretch;
    overflow-x: hidden;
  }

  .result-card:not(.result-fail) {
    max-width: none;
    width: 100%;
  }

body[data-app-feature="detail-page"] .result-card:not(.result-fail) {
    max-height: none;
  }

  .section-header .section-tip {
    font-size: 11px !important;
  }
}

@media (max-width: 390px) {
  .result-panel {
    padding: 12px;
    overflow-x: hidden;
  }

  .result-grid {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ratio-resolution-card .ratio-btns--gpt-aspect,
#gptAspectGrid.ratio-btns--gpt-aspect,
#nanoAspectGrid.ratio-btns--gpt-aspect,
#rewriteRatioBtns.ratio-btns--gpt-aspect {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ratio-resolution-card .resolution-btns--gpt-compact,
#gptClarityGrid.resolution-btns--gpt-compact,
#nanoClarityGrid.resolution-btns--gpt-compact,
#resolutionBtns.resolution-btns--gpt-compact,
#rewriteQualityBtns.resolution-btns--gpt-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #rewriteQualityBtns.resolution-btns--gpt-compact.resolution-btns--rewrite-quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .param-group .module-title {
    flex-wrap: nowrap;
  }

  .result-card-actions {
    top: 4px;
    right: 4px;
    gap: 4px;
  }

body[data-app-feature="detail-page"] .result-card:not(.result-fail) {
    max-height: none;
  }
}
/* ============================================
   妞ゅ爼鍎寸€佃壈鍩呴弽?- 缁夘垰鍨庡Ο鈥虫健 + 鐠佸墽鐤嗙€靛棝鎸滈幐澶愭尦閿涘牆顦查崚璇叉禈閻楀洦鐗卞蹇ョ礆
   ============================================ */
/* 缁夘垰鍨庡Ο鈥虫健閿涘牅绮庢い鍫曞劥閺嶅繋濞囬悽顭掔礆閿涙氨鎻ｉ崙?pill閿涘苯宕熺悰?*/
.balance-card {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 10px 0 8px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-hover));
  border: 1px solid var(--border-light);
  border-radius: 999px;
  box-shadow: none;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}

/* 闁叉垵绔甸崶鐐垼 */
.coin-icon {
  width: 22px;
  height: 22px;
  background: var(--primary-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}

/* 缁夘垰鍨庨弬鍥х摟 */
.balance-text {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.balance-text #balanceNum {
  color: var(--brand-primary);
  font-weight: 700;
}

/* 閸掗攱鏌婇幐澶愭尦 */
.refresh-btn {
  background: transparent;
  border: none;
  color: var(--text-placeholder);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border-radius: 8px;
}
.refresh-btn:hover {
  color: var(--primary);
  transform: rotate(180deg);
}

/* 鐠佸墽鐤嗙€靛棝鎸滈敍姘剁帛鐠併倗鍤庡鍡幢閸欘垶鈧绗庨崣妯瑰瘜 CTA 鐟?.key-btn--primary */
.key-btn:not(.key-btn--ghost) {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  border-radius: var(--r-card);
  height: var(--btn-height);
  padding: 0 var(--pad-card);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: var(--shadow-card);
}
.key-btn:not(.key-btn--ghost):hover {
  filter: brightness(1.03);
  transform: none;
  box-shadow: var(--shadow-primary-hover);
}

/* 缁夎濮╃粩顖炩偓鍌炲帳 */
@media (max-width: 768px) {
  .result-panel-loading-state {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bar"
      "steps"
      "line"
      "sub";
    align-items: stretch;
    gap: 7px;
    padding: 11px 14px;
  }

  .result-panel-loading-state__bar {
    min-width: 0;
  }

  .result-panel-loading-state__steps {
    width: min(220px, 100%);
  }

  .result-panel-loading-state__line,
.result-panel-loading-state__sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .result-empty-state.generating-loading.generating-loading--compact {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .balance-card {
    padding: 0 8px 0 6px;
    gap: 4px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
  }
  .balance-text {
    font-size: 11px;
  }
  .key-btn:not(.key-btn--ghost) {
    padding: 8px 16px;
    font-size: 12px;
  }

  .key-modal {
    padding: 14px;
  }
}

/* ==================== 瀵搫鍩楅梾鎰閹靛綊鍣洪幙宥勭稊閹稿鎸抽敍鍫熸弓鏉╂稑鍙嗛幍褰掑櫤濡€崇础閺冭绱?==================== */
.result-toolbar:not(.batch-open) .batch-hidden {
  display: none !important;
}

.result-toolbar:not(.batch-open) #batchProcessBtn {
  display: inline-flex !important;
}

/* 閻㈢喐鍨氱拠瀛樻閿涙矮瀵岄幐澶愭尦娑撳鏌熸稉鈧悰灞界毈鐎?*/
.generate-hint {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 11px;
  color: var(--text-placeholder);
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0;
  opacity: 0.88;
}

body[data-app-feature="matting-refine"] #mainGenerateSticky {
  border-top: none;
  padding-top: 12px;
  background: transparent;
}

body[data-app-feature="matting-refine"] #mainGenerateSticky .generate-btn {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
}

/* ========== 缁撴灉鍖洪鏋跺睆锛堢敓鎴愪腑锛?========== */
.result-grid .skeleton-container {
  display: none;
}

.result-grid .skeleton-container.skeleton-container--active {
  display: contents;
}

.skeleton-generation-status {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 14px 18px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.skeleton-generation-status .status-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 5px;
}

.skeleton-generation-status .status-text #generationStatusStep,
.skeleton-generation-status .skeleton-loading-headline {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.skeleton-loading-headline {
  font-weight: 700;
  color: #0f172a;
}

.skeleton-generation-status .status-text #generationStatusTime {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.skeleton-status-detail {
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.skeleton-progress-bar {
  position: relative;
  width: 100%;
  height: 12px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.skeleton-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  pointer-events: none;
}

.skeleton-progress-bar .skeleton-progress-inner {
  width: 12%;
  min-width: 44px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #7c3aed, #06b6d4, #10b981);
  background-size: 240% 100%;
  background-position: 0 0;
  transition: width 0.55s ease-out;
  animation: skeleton-progress-shimmer 1.25s linear infinite;
}

@keyframes skeleton-progress-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.result-skeleton {
  position: relative;
  background: var(--yj-loading-surface-card, linear-gradient(180deg, #ffffff 0%, #faf7ff 52%, #ffffff 100%));
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.22);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 220px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(124, 58, 237, 0.06);
  animation: skeleton-card-breathe var(--yj-loading-breathe-duration, 2.4s) ease-in-out infinite;
}

#resultGrid > .skeleton-container > .result-skeleton,
#resultGrid > .a01-review-pool > .result-skeleton {
  width: 100%;
  min-width: 0;
}

.result-skeleton--compact {
  width: 100%;
  min-height: 0;
  padding: 8px;
}

.result-skeleton--compact .skeleton-img__eta,
.result-skeleton--compact .skeleton-img__charge,
.result-skeleton--compact .skeleton-img__label,
.result-skeleton--compact .generation-stage-timeline {
  display: none;
}

.result-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--yj-loading-sweep, linear-gradient(110deg, transparent 0%, rgba(124, 58, 237, 0.1) 45%, transparent 70%));
  transform: translateX(-100%);
  animation: skeletonSweep var(--yj-loading-sweep-duration, 1.6s) ease-in-out infinite;
}

@keyframes skeleton-card-breathe {
  0%,
100% {
    opacity: 1;
    border-color: rgba(124, 58, 237, 0.22);
  }
  50% {
    opacity: 0.96;
    border-color: rgba(124, 58, 237, 0.38);
  }
}

.result-skeleton .skeleton-img {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  background-size: 100% 100%;
  animation: none;
  border-radius: var(--radius-md);
  border: 1px solid #e8ecf3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: #0f172a;
}

.skeleton-img__pulse {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(124, 58, 237, 0.16);
  border-top-color: #7c3aed;
  animation: spin 0.85s linear infinite;
}

.skeleton-img__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}

.skeleton-img__sub {
  max-width: 150px;
  font-size: 11px;
  line-height: 1.35;
  color: #334155;
}

.skeleton-img__eta {
  max-width: 170px;
  font-size: 10px;
  line-height: 1.25;
  color: #64748b;
}

.skeleton-img__charge {
  max-width: 176px;
  padding: 3px 8px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #6d28d9;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.generation-stage-timeline {
  width: min(180px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 6px;
  text-align: left;
}

.generation-stage-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
}

.generation-stage-step__mark {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
}

.generation-stage-step__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-stage-step.is-active {
  color: #5b21b6;
  font-weight: 700;
}

.generation-stage-step.is-active .generation-stage-step__mark {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
}

.generation-stage-step.is-done {
  color: #0f766e;
}

.generation-stage-step.is-done .generation-stage-step__mark {
  background: rgba(20, 184, 166, 0.16);
  color: #0f766e;
}

.result-skeleton .skeleton-text {
  height: 8px;
  margin-top: 0;
  flex-shrink: 0;
  background: #e5e7eb;
  border-radius: 4px;
}

.result-skeleton .skeleton-text.skeleton-text--short {
  width: 60%;
}

@keyframes skeletonSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.skeleton-generation-status--error {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.skeleton-generation-status--error .skeleton-loading-headline {
  color: #b91c1c;
}

.skeleton-progress-bar--error .skeleton-progress-inner {
  background: linear-gradient(90deg, #f87171, #ef4444, #f87171);
  animation: none;
}

.result-skeleton--failed {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, #fff5f5 0%, #fef2f2 100%);
  animation: none;
}

.result-skeleton--failed::before {
  display: none;
}

.skeleton-img--failed {
  background: #fee2e2;
  animation: none;
  color: #991b1b;
}

.skeleton-retry-btn {
  margin-top: 4px;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.22);
}

.skeleton-retry-btn:hover {
  filter: brightness(1.05);
}

/* 娑撳酣顎囬弸璺虹潌閸氬本妞傞崙铏瑰箛閺冭绱濋悽鐔稿灇閻樿埖鈧焦娼弴瀵告彛閸?*/
.result-empty-state.generating-loading.generating-with-skeleton {
  min-height: 0;
  padding: 14px 20px;
  margin-top: 4px;
}

.result-empty-state.generating-loading.generating-loading--compact {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(160px, 0.9fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  border-style: solid;
  border-radius: 10px;
  box-shadow: none;
  animation: none;
}

.result-empty-state.generating-loading.generating-loading--compact .result-empty-title,
.result-empty-state.generating-loading.generating-loading--compact .result-empty-desc,
.result-empty-state.generating-loading.generating-loading--compact .result-empty-meta {
  margin: 0;
}

.result-empty-state.generating-loading.generating-loading--compact .result-empty-title {
  font-size: 13px;
  white-space: nowrap;
}

.result-empty-state.generating-loading.generating-loading--compact .result-empty-desc {
  max-width: none;
  font-size: 12px;
  color: var(--text-secondary);
}

.result-empty-state.generating-loading.generating-loading--compact .gen-progress-track {
  width: 100%;
}

.result-empty-state.generating-loading.generating-loading--compact .result-empty-meta {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.model-section .module-title .tooltip-trigger#modelTooltip {
  cursor: help;
  transition: color 0.2s ease;
}

.model-section .module-title .tooltip-trigger#modelTooltip:hover {
  color: var(--ui-text-heading);
}

/* ============================================================
   閸忋劌鐪梻纾嬬獩 / 鐞涖劌宕熺拠顓濈疅鐞涖儰绔甸敍鍫滅瑢 :root --ui-* 闁板秴顨滈敍?
   ============================================================ */
.form-group {
  margin-bottom: var(--ui-gap-4);
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-text-label);
  margin-bottom: var(--ui-gap-2);
  line-height: 1.35;
  letter-spacing: 0;
}

.ui-page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  letter-spacing: 0;
}

/* ============================================================
   閼惧嘲褰?API 鐎靛棝鎸滃鍦崶閿涘牆娲撳銉︾ウ缁?璺?閺冪姷顑囨稉澶嬫煙娴滃瞼娣惍浣哥氨閿?
   ============================================================ */
.api-key-modal {
  position: relative;
  width: min(420px, 94vw);
  max-width: 420px;
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-hover);
}

.api-key-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
}

.api-key-modal__close:hover {
  color: var(--text-main);
  background: var(--bg-page);
}

.api-key-modal__head {
  padding: 20px 40px 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.api-key-modal__title-row {
  max-width: 100%;
  margin: 0 auto;
}

.api-key-modal__title-row .api-key-modal__title.step-title-main {
  margin: 0;
  color: var(--text-main);
  font-size: 18px;
  font-weight: 700;
}

.api-key-modal__title {
  margin: 0;
  color: var(--text-main);
  font-size: 18px;
  font-weight: 700;
}

.api-key-modal__subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.api-key-modal__balance {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.api-key-modal__balance .money {
  color: #fbbf24;
  font-weight: 700;
}

.api-key-modal__body {
  padding: 20px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.api-key-stepper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.api-key-stepper__item {
  color: var(--text-muted);
  font-weight: 500;
}

.api-key-stepper__item.is-active {
  color: var(--color-primary);
  font-weight: 700;
}

.api-key-stepper__sep {
  color: var(--border-light);
  margin: 0 2px;
}

.api-key-panel {
  text-align: center;
}

.api-key-panel__title {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: 16px;
  font-weight: 600;
}

.api-key-panel__lead {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

.api-key-panel__hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.api-key-wechat-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-page);
  font-family: ui-monospace, Consolas, monospace;
  color: var(--color-primary);
  font-size: 15px;
  letter-spacing: 0;
  cursor: pointer;
  font-weight: 600;
}

.api-key-wechat-chip:hover {
  border-color: var(--color-primary);
}

.api-key-plans {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.api-key-plans--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}

.api-key-panel__tagline {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-page);
  border-radius: var(--r-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.recharge-plan-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 12px;
}

.recharge-plan-preview__item {
  display: grid;
  grid-template-columns: minmax(58px, 0.7fr) minmax(64px, 0.7fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--r-control);
  background: #fff;
  color: var(--text-primary);
}

.recharge-plan-preview__name {
  font-size: 13px;
  font-weight: 700;
}

.recharge-plan-preview__price {
  color: var(--brand-primary);
  font-size: 17px;
  font-weight: 800;
}

.recharge-plan-preview__meta {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.plan-item {
  flex: 1;
  min-width: 96px;
  max-width: 140px;
  padding: 12px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--bg-page);
  color: var(--text-main);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.api-key-plans--stack .plan-item {
  position: relative;
  flex: none;
  max-width: none;
  width: 100%;
  text-align: left;
  padding: 12px 78px 12px 14px;
}

.plan-item__bonus {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fed7aa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.plan-item.active .plan-item__bonus {
  background: #fff;
  border-color: var(--border-focus);
  color: var(--color-primary);
}

.plan-item__gen {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.35;
}

.plan-item__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.plan-item__price {
  display: block;
  margin: 6px 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.plan-item__price--sale {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.plan-item__price-old {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.plan-item__price-new {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
}

.plan-item__pts {
  display: block;
  font-size: 11px;
  color: #888;
}

.plan-item.active {
  border-color: var(--color-primary) !important;
  background: var(--brand-light) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.api-key-qrcode {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px dashed var(--border-light);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.qr-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: #888;
  font-size: 13px;
  text-align: center;
}

.qr-placeholder__sub {
  font-size: 11px;
  color: #666;
}

.qr-placeholder::before {
  content: "码";
  font-size: 22px;
  letter-spacing: 0;
  color: #555;
  line-height: 1;
}

.api-key-display {
  position: relative;
  margin-top: 4px;
  padding: 14px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-focus);
  background: var(--bg-page);
  text-align: left;
}

.api-key-display__text {
  display: block;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--color-primary);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
  padding-right: 4px;
}

.api-key-display__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.api-key-btn {
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.api-key-btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.api-key-btn--primary:hover {
  background: var(--brand-primary-dark);
}

.api-key-panel--done .api-key-btn--done-primary {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.api-key-panel--done .api-key-btn--done-primary:hover {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  filter: none;
}

.api-key-btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--border-focus);
  padding: 6px 12px;
  font-size: 12px;
}

.api-key-btn--ghost:hover {
  background: var(--brand-light);
}

.api-key-btn--pay:not(:disabled) {
  background: var(--success-color, #10b981);
  color: #fff;
}

.api-key-btn--pay:not(:disabled):hover {
  filter: brightness(1.03);
}

.api-key-btn--pay:disabled {
  background: #d1d5db !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  opacity: 0.85;
}

.api-key-instruction {
  margin: 0 auto 14px;
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-page);
  text-align: left;
  box-sizing: border-box;
}

.api-key-instruction__p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.api-key-instruction__p:last-child {
  margin-bottom: 0;
}

.api-key-instruction__p strong {
  color: var(--text-main);
  font-weight: 600;
}

.api-key-panel--done .api-key-panel__lead {
  margin-bottom: 12px;
}

.api-key-done-list {
  margin: 0 auto 18px;
  padding: 0 0 0 20px;
  max-width: 100%;
  text-align: left;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  box-sizing: border-box;
}

.api-key-done-list li {
  margin-bottom: 8px;
}

.api-key-done-list li:last-child {
  margin-bottom: 0;
}

.api-key-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* ========== 閺嬩胶鐣濆ù鍛紶 SaaS 婢х偠藟閿涙氨绮ㄩ弸婊冨隘瀹搞儱鍙块弽蹇涙閽?/ GPT 娑撳鐖蹇庡瘜閹垮秳缍?/ 閻忓灚鍔呴弶?========== */
.result-fit-toggle {
  display: none !important;
}

.result-panel {
  background: var(--bg-page);
}

.result-panel--gallery-skel {
  padding: var(--space-4) var(--space-4) var(--space-3);
  gap: 0;
}

.result-panel__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 0;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.result-panel__title {
  margin: 0;
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
  line-height: 1.25;
}

/* GPT / Nano 闂堛垺婢樻い鑸电埉 */
.saas-panel-head {
  margin-bottom: var(--gap-module-y);
}

.saas-panel-head__title {
  margin: 0 0 4px;
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
  line-height: 1.25;
}

.saas-panel-head__sub {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.4;
}

.saas-step-block {
  margin-bottom: var(--gap-module-y);
}

.saas-step-block:last-of-type {
  margin-bottom: var(--gap-module-y);
}

.saas-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 30px;
  box-sizing: border-box;
}

.saas-step-head .section-step-badge {
  flex-shrink: 0;
}

.saas-step-head .module-title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: 0;
}

.gpt-inspire-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.gpt-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--pad-card);
  border-radius: var(--r-control);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--brand-primary);
  font-size: var(--text-body);
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  box-shadow: none;
}

.gpt-secondary-btn:hover:not(:disabled) {
  background: var(--brand-light);
  border-color: var(--border-light);
}

.gpt-secondary-btn:disabled {
  background: var(--bg-hover);
  color: var(--text-tertiary);
  border-color: var(--border-light);
  opacity: 1;
  cursor: not-allowed;
}

.saas-advanced-block {
  margin-bottom: var(--gap-module-y);
  border-radius: var(--r-card);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.saas-adv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saas-advanced-block__summary-compact {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-size: 0;
}

.saas-advanced-block__summary-compact::-webkit-details-marker {
  display: none;
}

.saas-adv-arrow {
  font-size: 15px;
  line-height: 1;
  color: var(--brand-primary);
  transition: transform 0.2s ease;
}

.saas-advanced-block[open] .saas-adv-arrow {
  transform: rotate(90deg);
}

.saas-advanced-block > .saas-advanced-block__body {
  padding: 0 14px 12px;
}

.gpt-gen-cost-hint {
  margin: 6px 0 0;
  padding-bottom: 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.gpt-gen-cost-hint strong {
  color: var(--brand-primary);
  font-weight: 600;
}

.result-try-examples-btn {
  margin-top: 4px;
  height: var(--btn-height);
  padding: 0 18px;
  border-radius: var(--yj-radius-tool, var(--r-card));
  border: 1px solid transparent;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: var(--text-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.22);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.result-try-examples-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary-hover);
}

/* 閻忓灚鍔呯粈杞扮伐閿涙艾绨抽柈銊ㄤ氦闁插繑铆閸?chip閿涘牅绗夐崡鐘卞瘜鐟欏棜顫庨敍?*/
.result-inspiration-bar {
  flex-shrink: 0;
  margin-top: 8px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-light);
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0;
}

#resultPanel:has(#resultGrid .result-card:not(.result-fail)) .result-inspiration-bar,
#resultPanel .result-inspiration-bar[hidden] {
  display: none !important;
}

.result-inspiration-bar__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-secondary);
  line-height: 1.3;
}

.result-inspiration-bar__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(176px, 210px);
  grid-template-rows: 1fr;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.result-inspiration-bar__track::-webkit-scrollbar {
  height: 3px;
}

.result-inspiration-bar__track::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 3px;
}

.result-inspiration-card {
  scroll-snap-align: start;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 188px;
  min-height: 188px;
  padding: 0;
  border: 1px solid var(--yj-border-default, #e2e8f0);
  border-radius: 9px;
  background: var(--yj-surface-card, #ffffff);
  box-shadow: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.result-inspiration-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.54);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.result-inspiration-card.is-active {
  border-color: rgba(124, 58, 237, 0.78);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.16), 0 18px 42px rgba(79, 70, 229, 0.18);
}

.result-inspiration-card__media {
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: var(--yj-surface-muted, #f8fafc);
  overflow: hidden;
}

.result-inspiration-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.01);
  transition: transform 0.22s ease, filter 0.22s ease;
}

.result-inspiration-card:hover .result-inspiration-card__media img {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.03);
}

.result-inspiration-card__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.24);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.result-inspiration-card:hover .result-inspiration-card__hover,
.result-inspiration-card:focus-visible .result-inspiration-card__hover {
  opacity: 1;
}

.result-inspiration-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--yj-radius-tool, 6px);
  background: var(--primary-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.32);
  transform: translateY(6px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.result-inspiration-card:hover .result-inspiration-card__go,
.result-inspiration-card:focus-visible .result-inspiration-card__go {
  transform: translateY(0);
}

.result-inspiration-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 42px 10px 9px;
  min-width: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.58) 42%, rgba(15, 23, 42, 0.88) 100%);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.result-inspiration-card:hover .result-inspiration-card__body,
.result-inspiration-card:focus-visible .result-inspiration-card__body {
  opacity: 1;
  transform: translateY(0);
}

.result-inspiration-card__label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.42);
}

.result-inspiration-card__summary {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.result-inspiration-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  margin-top: 2px;
  overflow: hidden;
}

.result-inspiration-card__tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.result-inspiration-card__use {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 700;
  opacity: 0.82;
  white-space: nowrap;
  transform: translateY(0);
  transition: opacity 0.18s ease, color 0.18s ease;
}

.result-inspiration-card:hover .result-inspiration-card__use,
.result-inspiration-card.is-active .result-inspiration-card__use {
  opacity: 1;
  color: #fff;
}

/* 瀹稿弶婀侀悽鐔稿灇閸ョ偓妞傞敍姘变紥閹扮喎灏潻娑楃濮濄儱鎬ラ崠鏍电礉缁愪礁鍤紒鎾寸亯閻㈣绮?*/
#resultPanel:has(#resultGrid .result-card[data-url]) .result-inspiration-bar {
  opacity: 0.94;
}

#resultPanel:has(#resultGrid .result-card[data-url]) .result-inspiration-bar__title {
  color: var(--text-placeholder);
}

/* 无结果时灵感栏使用较浅的分隔线，避免与结果区视觉冲突 */
#resultPanel:not(:has(#resultGrid .result-card[data-url])) .result-inspiration-bar {
  border-top-color: color-mix(in srgb, var(--border-light) 70%, var(--border-focus));
}

@media (max-width: 430px) {
  html,
body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .result-inspiration-bar {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    max-width: 100%;
  }

  .result-inspiration-bar__track {
    grid-auto-columns: minmax(168px, calc(100vw - 32px));
    gap: 9px;
    padding-left: 1px;
    padding-right: 1px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .result-inspiration-card {
    height: 186px;
    min-height: 186px;
    max-width: calc(100vw - 32px);
  }

  .result-inspiration-card__label {
    font-size: 12px;
  }

  .result-inspiration-card__summary {
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  .result-inspiration-bar__track {
    grid-auto-columns: minmax(160px, calc(100vw - 28px));
  }

  html,
body,
.main-area,
#resultPanel {
    overflow-x: clip;
    max-width: 100vw;
  }

  #resultPanel .result-inspiration-bar__track {
    grid-auto-columns: minmax(0, min(240px, calc(100vw - 28px))) !important;
    max-width: calc(100vw - 16px) !important;
  }

  #resultPanel .result-inspiration-card {
    max-width: calc(100vw - 28px) !important;
  }
}

.upgrade-plan-btn {
  border: none;
  border-radius: 999px;
  height: var(--btn-height);
  padding: 0 var(--pad-card);
  font-size: var(--text-body);
  font-weight: 500;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  background: var(--primary-gradient);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.top-bar .upgrade-plan-btn {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  min-width: 120px;
  max-width: 140px;
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.upgrade-plan-btn:hover {
  filter: brightness(1.03);
  box-shadow: var(--shadow-primary-hover);
  transform: none;
}

.key-btn--ghost {
  border-radius: var(--r-control);
  height: var(--btn-height);
  padding: 0 var(--pad-card);
  font-size: var(--text-body);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0;
}

.key-btn--ghost:hover {
  border-color: var(--border-light);
  color: var(--brand-primary);
  background: var(--brand-light);
  box-shadow: var(--shadow-card);
}

.empty-icon-svg {
  color: var(--text-secondary-ui);
  width: 56px;
  height: 56px;
}

/* GPT / Nano閿涙艾宕熺仦蹇曟彛閸戞垳琚遍崚?/ 閻㈣绠?濞撳懏娅氭惔锕€鑻熼幒?*/
#gpt-image-panel.params-section--saas-compact,
#nano-banana-panel.params-section--saas-compact,
#gpt-image-form-root.params-section--saas-compact {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.saas-step-row-upload-prompt {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap-module-y);
  align-items: stretch;
  min-width: 0;
}

#gpt-image-panel .saas-step-row-upload-prompt .gpt-upload-param,
#nano-banana-panel .saas-step-row-upload-prompt .gpt-upload-param,
#gpt-image-form-root .saas-step-row-upload-prompt .gpt-upload-param,
#gpt-image-panel .saas-step-row-upload-prompt .gpt-prompt-group,
#nano-banana-panel .saas-step-row-upload-prompt .gpt-prompt-group,
#gpt-image-form-root .saas-step-row-upload-prompt .gpt-prompt-group {
  margin-bottom: 0;
}

.saas-step-row-two-col,
.saas-step-row-dual {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.saas-step-col-half {
  flex: 1 1 50%;
  min-width: 0;
}

.saas-step-row-scene-model .saas-step-head {
  margin-bottom: 0;
}

.saas-step-row-two-col.saas-step-row-scene-model {
  align-items: center;
}

.saas-step-row-scene-model .model-section.gpt-model-section {
  margin-top: 0;
  margin-bottom: 0;
}

.saas-step-row-scene-model .model-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
  padding-bottom: 0;
  width: 100%;
}

.saas-step-row-scene-model .model-btn {
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  min-width: 0;
  flex: 1 1 50%;
  width: auto;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}

.saas-step-block--aspect-clarity .saas-step-head {
  margin-bottom: 8px;
}

.saas-step-row-ratio-clarity .module-title {
  margin-bottom: var(--gap-control);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-secondary);
}

.saas-step-row-ratio-clarity .ratio-btns,
.saas-step-row-ratio-clarity .resolution-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.saas-step-row-ratio-clarity .ratio-btn,
.saas-step-row-ratio-clarity .resolution-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  padding: 4px 6px;
  font-size: 11px;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
}

#nanoImageUploadBox.upload-zone--gpt-product,
#gptImageUploadBox.upload-zone--gpt-product,
#gpt-image-form-root .upload-zone--gpt-product {
  padding-top: 16px;
  padding-bottom: 16px;
}

#nanoImageUploadBox.upload-zone--gpt-product .add-image-btn,
#gptImageUploadBox.upload-zone--gpt-product .add-image-btn,
#gpt-image-form-root .upload-zone--gpt-product .add-image-btn {
  padding-top: 16px;
  padding-bottom: 16px;
}

#gpt-image-panel .param-btn,
#nano-banana-panel .param-btn {
  min-height: var(--btn-height);
  height: var(--btn-height);
  box-sizing: border-box;
}

.saas-panel-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: auto;
  padding-top: var(--gap-control);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-card) 22%);
}

#gpt-image-panel .generate-btn.generate-btn--standard,
#nano-banana-panel .generate-btn.generate-btn--standard {
  width: 100%;
  min-height: 42px;
  height: 42px;
  max-height: 44px;
  padding: 0 var(--pad-card);
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
  border-radius: var(--r-card);
  background: var(--primary-gradient);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gpt-image-panel .generate-btn.generate-btn--standard:hover:not(:disabled),
#nano-banana-panel .generate-btn.generate-btn--standard:hover:not(:disabled) {
  box-shadow: var(--shadow-primary-hover);
}

#gpt-image-panel .gpt-secondary-btn,
#nano-banana-panel .gpt-secondary-btn,
#gpt-image-form-root .gpt-secondary-btn {
  min-height: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--pad-card);
  box-sizing: border-box;
}

#gpt-image-panel .gpt-prompt-group .custom-input-hint,
#nano-banana-panel .gpt-prompt-group .custom-input-hint,
#gpt-image-form-root .gpt-prompt-group .custom-input-hint {
  display: none;
}

#gpt-image-panel .gpt-gen-cost-hint,
#nano-banana-panel .gpt-gen-cost-hint,
#gpt-image-form-root .gpt-gen-cost-hint {
  margin-top: 6px;
  margin-bottom: 0;
}

/* ========== AI 閻㈢喎娴橀棃銏℃緲閿?gpt-image-panel閿涘绗撶仦鐐垫彛閸戞垵绔风仦鈧?========== */
#gpt-image-panel.params-section--gpt-image {
  gap: 0;
  padding: 5px;
}

#nano-banana-panel.params-section--gpt-image {
  gap: 0;
  padding: 5px;
}

#gpt-image-panel .gpt-image-stack,
#nano-banana-panel .gpt-image-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#gpt-image-panel .gpt-step-card,
#nano-banana-panel .gpt-step-card {
  min-width: 0;
}

#gpt-image-panel .gpt-step-card > .step-title-row.module-title,
#gpt-image-panel .gpt-step-card > .step-title-row,
#nano-banana-panel .gpt-step-card > .step-title-row.module-title,
#nano-banana-panel .gpt-step-card > .step-title-row {
  margin-bottom: 6px;
}

#gpt-image-panel .step-title-row.module-title,
#nano-banana-panel .step-title-row.module-title {
  font-size: var(--text-module);
  font-weight: 600;
  color: var(--ui-text-heading);
}
#gpt-image-panel .gpt-upload-param.param-group,
#gpt-image-panel .gpt-prompt-group.param-group,
#nano-banana-panel .gpt-upload-param.param-group,
#nano-banana-panel .gpt-prompt-group.param-group {
  margin-bottom: 0;
}

#gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
#nano-banana-panel .gpt-upload-block .upload-block__body--preview-only {
  margin-top: 0;
}

#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
#gpt-image-panel .upload-zone--gpt-compact.upload-zone--gpt-product,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact,
#nano-banana-panel .upload-zone--gpt-compact.upload-zone--gpt-product {
  min-height: 72px;
  max-height: none;
  height: auto;
  padding: 6px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
#gpt-image-panel .upload-zone--gpt-compact:not(:has(.uploaded-item)),
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
#nano-banana-panel .upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 80px;
  max-height: 88px;
}

#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-list:empty + .add-image-btn,
#gpt-image-panel .upload-zone--gpt-compact .uploaded-list:empty ~ .add-image-btn,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-list:empty + .add-image-btn,
#nano-banana-panel .upload-zone--gpt-compact .uploaded-list:empty ~ .add-image-btn {
  padding-top: 8px;
  padding-bottom: 8px;
}

#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
#gpt-image-panel .upload-zone--gpt-compact .add-image-btn,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn,
#nano-banana-panel .upload-zone--gpt-compact .add-image-btn {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  width: 100%;
}

#gpt-image-panel .upload-zone--gpt-compact .upload-text,
#nano-banana-panel .upload-zone--gpt-compact .upload-text {
  font-size: 12px;
  white-space: nowrap;
}

#gpt-image-panel .gpt-prompt-textarea,
#nano-banana-panel .gpt-prompt-textarea {
  min-height: 70px;
  max-height: 88px;
  height: 78px;
  resize: vertical;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}

/* ========== GPT 閸?/ Nano Banana 閸斻劍鈧線娼伴弶鍖＄窗閸旂喕鍏橀崠杞扮瑢 GPT Image 2 鐎靛綊缍堥敍鍫濇倗闂堛垺婢橀妴宀勨偓澶嬪濡€崇€烽妴宥夆偓澶愩€嶆稉搴ㄢ偓鏄忕帆娑撳秴褰夐敍?========== */
#panelGptImage,
#panelNanoBanana {
  overscroll-behavior-y: contain;
}

#panelGptImage #gpt-image-panel .gpt-image-stack,
#panelNanoBanana #nano-banana-panel .gpt-image-stack,
#gpt-image-form-root.params-section--saas-compact .saas-step-row-upload-prompt {
  gap: 8px;
}

#panelGptImage #gpt-image-panel .gpt-step-card > .step-title-row.module-title,
#panelGptImage #gpt-image-panel .gpt-step-card > .step-title-row,
#panelNanoBanana #nano-banana-panel .gpt-step-card > .step-title-row.module-title,
#panelNanoBanana #nano-banana-panel .gpt-step-card > .step-title-row {
  margin-bottom: 4px;
}

#panelGptImage #gpt-image-panel .gpt-prompt-textarea,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea {
  min-height: 88px;
  height: 88px;
  max-height: 96px;
  resize: none;
  transition: min-height 0.18s ease, height 0.18s ease;
}

#panelGptImage #gpt-image-panel .gpt-prompt-textarea:focus,
#panelGptImage #gpt-image-panel .gpt-prompt-textarea:focus-visible,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea:focus,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea:focus-visible {
  min-height: 120px;
  height: 120px;
  max-height: 180px;
  resize: vertical;
}

#panelGptImage #gpt-image-panel .gpt-aspect-clarity-card,
#panelNanoBanana #nano-banana-panel .gpt-aspect-clarity-card {
  padding: 8px 10px;
}

#panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt,
#panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt {
  padding-top: 10px;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact,
#gpt-image-form-root .upload-zone.upload-zone--gpt-compact,
#gpt-image-form-root .upload-zone.upload-zone--gpt-product.upload-zone--gpt-compact {
  position: relative;
  border: var(--yj-upload-shell-border);
  border-style: solid;
  background: var(--yj-upload-shell-bg);
  box-shadow: var(--yj-upload-shell-inset);
  align-items: stretch;
  justify-content: stretch;
  min-height: 76px;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact.drag-over,
#gpt-image-form-root .upload-zone.upload-zone--gpt-compact.drag-over,
#gpt-image-form-root .upload-zone.upload-zone--gpt-product.upload-zone--gpt-compact.drag-over {
  border: var(--yj-upload-shell-border-hover);
  border-style: solid;
  box-shadow: var(--yj-upload-shell-inset-hover);
  background: var(--yj-upload-shell-bg-hover);
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
#gpt-image-form-root .upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 76px;
  max-height: 96px;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact.drag-over,
#gpt-image-form-root .upload-zone--gpt-compact.drag-over {
  border-color: rgba(124, 58, 237, 0.28);
  border-style: solid;
  box-shadow: var(--yj-upload-shell-inset-hover, inset 0 0 0 1px rgba(167, 139, 250, 0.10));
  background: rgba(139, 92, 246, 0.06);
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
#gpt-image-form-root .upload-zone--gpt-compact .add-image-btn {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  box-sizing: border-box;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text,
#gpt-image-form-root .upload-zone--gpt-compact .add-image-btn .upload-text {
  position: static;
  margin: 0;
  text-align: center;
  white-space: normal;
  font-size: 11px;
  line-height: 1.25;
  max-width: 100%;
  color: var(--text-secondary);
  pointer-events: none;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn__plus,
#gpt-image-form-root .upload-zone--gpt-compact .add-image-btn__plus {
  font-size: 26px;
  line-height: 1;
  opacity: 0.92;
}

/* Nano 娑撳﹣绱堕崠鐚寸窗閹绘劙鐝导妯哄帥缁狙備簰鐟曞棛娲婃稉瀣瀮 #nano-banana-panel #nanoImageUploadBox 閻ㄥ嫰鈧氨鏁ょ亸鍝勵嚟閿涘奔绗?#panelGptImage 娑撯偓閼?*/
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact,
#panelNanoBanana #nano-banana-panel .upload-zone--gpt-compact.upload-zone--gpt-product {
  position: relative;
  border: 1px solid #e2e8f0;
  border-style: solid;
  background: #f7f8fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  align-items: stretch;
  justify-content: stretch;
  min-height: 76px;
  max-height: none;
  height: auto;
  padding: 6px 10px;
  box-sizing: border-box;
  display: flex;
}

#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 76px;
  max-height: 96px;
}

#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.drag-over {
  border-color: rgba(124, 58, 237, 0.28);
  border-style: solid;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.10);
  background: rgba(139, 92, 246, 0.06);
}

#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  box-sizing: border-box;
}

#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text {
  position: static;
  margin: 0;
  text-align: center;
  white-space: normal;
  font-size: 11px;
  line-height: 1.25;
  max-width: 100%;
  color: var(--text-secondary);
  pointer-events: none;
}

#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn__plus {
  font-size: 26px;
  line-height: 1;
  opacity: 0.92;
}

#gpt-image-panel .gpt-inspire-actions--below,
#nano-banana-panel .gpt-inspire-actions--below {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
}

#gpt-image-panel .gpt-secondary-btn,
#nano-banana-panel .gpt-secondary-btn {
  min-height: 32px;
  height: 32px;
  max-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
}

#gpt-image-panel .gpt-model-section.gpt-model-section,
#nano-banana-panel .gpt-model-section.gpt-model-section {
  margin-bottom: 0;
}

#gpt-image-panel .gpt-model-grid.model-btns,
#nano-banana-panel .gpt-model-grid.model-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 0;
}

#gpt-image-panel .gpt-model-grid .model-btn,
#nano-banana-panel .gpt-model-grid .model-btn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: stretch;
  text-align: left;
  gap: 2px;
  column-gap: 8px;
  min-height: 46px;
  height: auto;
  max-height: none;
  padding: 6px 8px;
  box-sizing: border-box;
}

#gpt-image-panel .gpt-model-grid .model-btn .model-logo,
#nano-banana-panel .gpt-model-grid .model-btn .model-logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

#gpt-image-panel .gpt-model-grid .model-btn .model-logo img,
#nano-banana-panel .gpt-model-grid .model-btn .model-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

#gpt-image-panel .gpt-model-grid .model-btn .model-logo--banana img,
#nano-banana-panel .gpt-model-grid .model-btn .model-logo--banana img {
  width: 20px;
  height: 20px;
}

#gpt-image-panel .gpt-model-grid .model-btn .model-name,
#nano-banana-panel .gpt-model-grid .model-btn .model-name {
  grid-column: 2;
  grid-row: 1;
  order: 0;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

#gpt-image-panel .gpt-model-grid .model-btn .gpt-model-card-desc,
#nano-banana-panel .gpt-model-grid .model-btn .gpt-model-card-desc {
  grid-column: 2;
  grid-row: 2;
  order: 1;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  display: block;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  color: var(--text-tertiary);
  margin-top: 0;
  border-top: none;
}

#gpt-image-panel .gpt-model-grid .model-btn .model-cost,
#nano-banana-panel .gpt-model-grid .model-btn .model-cost {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  border-radius: 0;
  padding: 0;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 650;
  color: #64748b;
  background: transparent;
  border: 0;
}

#gpt-image-panel .gpt-model-grid .model-btn.selected .gpt-model-card-desc,
#nano-banana-panel .gpt-model-grid .model-btn.selected .gpt-model-card-desc {
  color: rgba(255, 255, 255, 0.82);
}

#gpt-image-panel .gpt-model-grid .model-btn.selected .model-cost,
#nano-banana-panel .gpt-model-grid .model-btn.selected .model-cost {
  color: #6d28d9;
  background: transparent;
  border-color: transparent;
}

#gpt-image-panel .gpt-model-grid .model-btn .model-tag,
#nano-banana-panel .gpt-model-grid .model-btn .model-tag {
  top: 4px;
  right: 5px;
  max-width: none;
}

.ratio-resolution-card.gpt-param-card.gpt-aspect-clarity-card {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
}

.ratio-resolution-card > .module-title.step-title-row {
  margin-bottom: 0;
}

.ratio-resolution-card .gpt-ratio-section {
  margin-bottom: 0;
}

.ratio-resolution-card .gpt-subfield-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 5px;
  letter-spacing: 0;
  text-transform: none;
}

.ratio-resolution-card .ratio-btns--gpt-aspect {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn {
  min-height: 34px;
  height: auto;
  max-height: none;
  padding: 4px 4px;
  font-size: 11px;
  font-weight: 500;
  gap: 1px;
  line-height: 1.15;
  white-space: nowrap;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn__s {
  font-size: 9px;
  opacity: 0.85;
}

.ratio-resolution-card .resolution-btns--gpt-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.ratio-resolution-card .resolution-btns--gpt-compact.resolution-btns--rewrite-quality {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn {
  min-height: 34px;
  height: auto;
  max-height: none;
  padding: 4px 4px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  white-space: nowrap;
  border-radius: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn .ratio-btn__t {
  font-size: 11px;
  font-weight: 600;
}

.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn .ratio-btn__s {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.85;
}

.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn.active,
.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn.active {
  border-color: var(--brand-primary);
  background: var(--brand-light);
  color: var(--brand-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn.active {
  font-weight: 700;
}

.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn.active .ratio-btn__s,
.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn.active .ratio-btn__s {
  color: var(--brand-primary);
  opacity: 0.9;
}

#gpt-image-panel .gpt-count-section .gpt-count-row,
#nano-banana-panel .gpt-count-section .gpt-count-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

#gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn,
#nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn {
  min-height: 32px;
  height: 32px;
  max-height: 34px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
}

#gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn.active,
#nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn.active {
  border-color: var(--brand-primary);
  background: var(--brand-light);
  color: var(--brand-primary);
}

#gpt-image-panel .saas-panel-sticky-actions--gpt,
#nano-banana-panel .saas-panel-sticky-actions--gpt,
#panelOneClickVideo .saas-panel-sticky-actions--gpt {
  position: relative;
  bottom: auto;
  z-index: 1;
  margin-top: 10px;
  margin-bottom: 0;
  padding-top: 8px;
  padding-bottom: 0;
  background: transparent;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}

.key-btn.key-btn--ghost.key-btn--has-key {
  border-color: var(--border-focus);
  color: var(--brand-primary);
  background: var(--brand-light);
}

.gpt-secondary-btn.is-busy {
  opacity: 0.72;
  cursor: not-allowed;
}

.toggle-visibility-btn__ico {
  font-size: 20px;
  line-height: 1;
}

.result-panel__title-row .result-gallery-head__tools {
  margin-left: auto;
}

/* ========== 閻㈤潧鏅㈠銉ょ稊閸?璺?娴溠冩惂閸栨牕顤冪悰銉礄閺傚洦顢?鐢啫鐪?鐠囷附鍎忔い?濞叉顭堥幓鎰仛閿?========== */
.brand-tagline {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0;
  line-height: 1.3;
}

.upload-block__meta {
  margin: 0;
  flex: 0 1 46%;
  min-width: 0;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-ref-expandable__desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.ratio-btns--chips .ratio-btn,
.resolution-btns--chips .resolution-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  padding: 4px 6px;
  box-sizing: border-box;
  overflow: hidden;
}

.ratio-btn__t {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ratio-btn__s {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ratio-btns--chips .ratio-btn.active .ratio-btn__s,
.resolution-btns--chips .resolution-btn.active .ratio-btn__s {
  color: rgba(255, 255, 255, 0.88);
}

#ratioBtns.ratio-btns--chips,
#resolutionBtns.resolution-btns--chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.model-tag--vip {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.top-bar .top-bar-cta-commerce.vip-btn {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
}

.top-bar-cta-commerce.vip-btn {
  background: var(--warm-soft);
  color: #c2410c;
  border: 1px solid rgba(249, 115, 22, 0.28);
  box-shadow: none;
  font-weight: 500;
}

.top-bar-cta-commerce.vip-btn:hover {
  background: #ffedd5;
  box-shadow: var(--shadow-card-hover);
}

.main-generate-sticky {
  margin-top: auto;
  padding-top: var(--gap-module-y);
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--bg-card) 18%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* AI 閻㈢喎娴橀敍?mainGenerateSticky 閸?#generateBtn / .generate-hint 瀹告煡娈ｉ挊蹇ョ礉鐎圭懓娅掓禒宥勭箽閻?border-top閿涘苯绨抽柈銊ュ毉閻滄澘顦挎担娆惷痪鍖＄幢閺佹潙娼￠梾鎰閿涘湑TA 娑撳海袧閸掑棜顕╅弰搴℃躬 #gpt-image-panel 閸愬拑绱?*/
body[data-app-feature="gpt-image"] #mainGenerateSticky {
  display: none !important;
}

/* Nano Banana閿涙艾鎮撴稉濠忕礉娑撶粯鐖惔鏇㈠劥閸楃姳缍?#mainGenerateSticky 缁屽搫锛撶敮?border-top閿涙稓鏁撻幋鎰瑢閵嗗矂顣╃拋鈩冪Х閼版ぜ鈧秴婀?#nano-banana-panel 閸?*/
body[data-app-feature="nano-banana"] #mainGenerateSticky {
  display: none !important;
}

/* Matting panel: align spacing and control language with GPT Image / Nano Banana workspaces */
#panelStandard.mode-matting,
#panelStandard.mode-matting #standardUploadMount,
#panelStandard.mode-matting #mattingPromptWrap {
  gap: 15px;
}

#panelStandard.mode-matting .upload-block--product,
#panelStandard.mode-matting .matting-step-card {
  border-radius: 8px;
  border-color: #e5e9f2;
  box-shadow: none;
}

#panelStandard.mode-matting .upload-block--product {
  padding: 12px;
}

#panelStandard.mode-matting .upload-block--product .step-title-row,
#panelStandard.mode-matting .matting-step-card > .step-title-row {
  margin-bottom: 7px;
}

#panelStandard.mode-matting #uploadZone.upload-zone--yj-compact:not(.upload-zone--has-items):not(.upload-zone--matting-compact) {
  min-height: 80px;
  padding: 6px 10px;
  border-width: 1.5px !important;
  border-radius: 8px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary) 7%, transparent),
    rgba(255, 255, 255, 0)
  ) var(--bg-card);
}

#panelStandard.mode-matting #uploadZone.upload-zone--yj-compact:not(.upload-zone--has-items):not(.upload-zone--matting-compact) .add-image-btn {
  min-height: 52px;
  border-radius: 0;
}

#panelStandard.mode-matting .matting-tool-btn,
#panelStandard.mode-matting .matting-model-btn {
  border-radius: 5px;
  background: #fff;
}

#panelStandard.mode-matting .matting-tool-btn.active {
  background: var(--primary-gradient);
  border-color: rgba(124, 58, 237, 0.55);
  color: #fff;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.14);
}

#panelStandard.mode-matting .matting-model-btn.active {
  background: var(--primary-gradient);
  border-color: rgba(124, 58, 237, 0.55);
  color: #fff;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.14);
}

#panelStandard.mode-matting .matting-model-btn.active .matting-model-btn__name,
#panelStandard.mode-matting .matting-model-btn.active .matting-model-btn__cost {
  color: inherit;
}

#panelStandard.mode-matting .matting-model-btn.active .matting-model-btn__cost {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

#panelStandard.mode-matting .matting-model-btn.active .matting-model-btn__tag {
  background: rgba(124, 58, 237, 0.12);
  color: inherit;
}

#panelStandard.mode-matting .matting-prompt-textarea {
  min-height: 38px;
  height: 38px;
  max-height: 38px;
  resize: none;
  line-height: 18px;
  padding: 9px 11px;
  border-radius: 5px;
  background: #fff;
}

#panelStandard.mode-matting .matting-step-card--prompt {
  padding-bottom: 5px;
}

body[data-app-feature="matting-refine"] .main-generate-sticky {
  margin-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  padding-top: 0 !important;
}

body[data-app-feature="matting-refine"] #mainGenerateSticky {
  flex: 0 0 auto !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0 !important;
  margin-top: 8px !important;
}

body[data-app-feature="matting-refine"] #mainGenerateSticky .generate-btn {
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  border-radius: 5px;
  background: var(--primary-gradient) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.18);
}

body[data-app-feature="matting-refine"] #mainGenerateSticky .generate-hint {
  margin-top: 5px;
  color: #7b8496;
}

body[data-app-feature="matting-refine"] .main-area .dynamic-panel:not(.dynamic-panel--visible) {
  display: none !important;
}

.custom-input-hint--muted {
  color: var(--text-tertiary);
  font-size: 12px;
}

body[data-app-feature="detail-page"] .result-panel--gallery-skel .result-item {
  aspect-ratio: 9 / 20;
  max-height: min(78vh, 920px);
}

body[data-app-feature="detail-page"] .result-panel--gallery-skel .result-item__img {
  object-fit: contain;
}

.preview-modal {
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.04);
}

.preview-nav-fab {
  background: rgba(17, 24, 39, 0.35);
  box-shadow: var(--shadow-card);
}

/* Preserve positioning while pressed: the global button scale otherwise
   drops translateY(-50%) and moves the hit target before mouseup. */
button.preview-nav-fab:not(:disabled):active {
  transform: translateY(-50%) scale(0.98);
}

@media (max-width: 767px) {
  .main-generate-sticky {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0));
  }

  .preview-modal--detail {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .preview-detail-layout {
    flex-direction: column;
  }

  .preview-detail-side {
    width: 100%;
    max-height: 42vh;
    border-left: none;
    border-top: none;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06);
  }
}

/* ========== 閸忋劌鐫嗛崶鍓у缁彞鎱ㄩ敍鍦沵ageEditor閿?========== */
.image-editor-modal-backdrop {
  z-index: 1260;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.image-editor-modal-backdrop.visible {
  align-items: stretch;
}

.image-editor-modal__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background: #1f1f1f;
  color: #e5e7eb;
  box-sizing: border-box;
}

.image-editor-top {
  flex-shrink: 0;
  min-height: 56px;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #191919;
}

.image-editor-top__left,
.image-editor-top__center,
.image-editor-top__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.image-editor-top__right {
  flex: 1 1 auto;
  justify-content: flex-end;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.image-editor-title {
  font-size: 15px;
  font-weight: 600;
  color: #f9fafb;
}

.image-editor-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.image-editor-icon-btn:disabled {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

.image-editor-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.image-editor-tool-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.image-editor-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.image-editor-tool-btn.is-active,
.image-editor-tool-btn--primary.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 80%, white);
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: #fff;
}

.image-editor-tool-btn--primary {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.image-editor-brush-label {
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
  flex-shrink: 0;
}

.image-editor-brush-range {
  width: 72px;
  flex-shrink: 0;
}

.image-editor-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

.image-editor-sidebar {
  flex: 0 0 88px;
  width: 88px;
  padding: 10px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  background: #191919;
}

.image-editor-thumb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.image-editor-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #111;
  cursor: pointer;
}

.image-editor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-editor-thumb.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 80%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.image-editor-stage-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 12px;
  min-width: 0;
  background: radial-gradient(ellipse at center, #2a2a2a 0%, #1a1a1a 70%);
}

.image-editor-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: calc(100vh - 56px - 196px);
}

.image-editor-img {
  display: block;
  max-width: min(100vw - 120px, 1200px);
  max-height: calc(100vh - 56px - 196px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.image-editor-canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 8px;
  touch-action: none;
}

.image-editor-canvas--active {
  cursor: crosshair;
}

.image-editor-tool-btn[hidden],
.image-editor-brush-label[hidden],
.image-editor-brush-range[hidden] {
  display: none !important;
}

.image-editor-footer {
  flex-shrink: 0;
  padding: 10px 16px 18px;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #191919;
}

.image-editor-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: min(820px, calc(100vw - 240px));
  margin: 0 auto 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.image-editor-action-bar .image-editor-tool-btn--primary {
  font-size: 13px;
  padding: 9px 16px;
}

.image-editor-status {
  margin: 0 auto 10px;
  max-width: min(820px, calc(100vw - 240px));
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
  text-align: center;
  line-height: 1.45;
}

.image-editor-compose {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(820px, calc(100vw - 240px));
  margin: 0 auto;
  padding: 8px 12px;
  border-radius: 18px;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.image-editor-plus {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.image-editor-prompt {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #f3f4f6;
  font-size: 14px;
  outline: none;
}

.image-editor-prompt::placeholder {
  color: #6b7280;
}

.image-editor-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--color-primary) 80%, white);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.image-editor-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .image-editor-sidebar {
    display: none;
  }

  .image-editor-img {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 216px);
  }

  .image-editor-stage {
    max-height: calc(100vh - 216px);
  }

  .image-editor-status,
.image-editor-compose,
.image-editor-action-bar {
    max-width: calc(100vw - 24px);
  }

  .image-editor-action-bar {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* ========== 娴溿倓绨伴梻顓犲箚娣囶喛藟閿涘牏绨挎穱顔藉絹缁€?/ 缂佹挻鐏夐幓鎰仛 / 妞よ埖鐖?/ 娑撳﹣绱?/ 瀹搞儱鍙块弽蹇ョ礆 ========== */
.result-next-hints {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0;
  color: #475569;
  background: #f5f3ff;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.result-next-hints[hidden] {
  display: none !important;
}

.result-next-hints[data-mode="after-download"] {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12);
  color: #334155;
}

.result-next-hints strong {
  color: #0f172a;
  font-weight: 600;
}

.result-next-hints__copy {
  min-width: 0;
  color: #475569;
  font-size: 11px;
  line-height: 1.35;
}

.result-next-hints__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.result-next-hints__actions button {
  height: 26px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
  color: #5b21b6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.result-next-hints__actions button:hover {
  border-color: rgba(124, 58, 237, 0.32);
  background: #fff;
  color: #6d28d9;
}

.result-next-hints__actions button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .result-next-hints {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-next-hints__actions {
    justify-content: flex-start;
  }
}

.balance-text__prefix {
  display: inline;
}

.key-btn--topbar {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  min-width: 0;
  flex-shrink: 0;
  border-radius: 999px !important;
  box-sizing: border-box;
  white-space: nowrap;
}

.top-bar .key-btn--topbar-strong {
  border-color: rgba(124, 58, 237, 0.34) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%) !important;
  color: #6d28d9 !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.12) !important;
}

.top-bar .key-btn--topbar-strong:hover,
.top-bar .key-btn--topbar-strong:focus-visible {
  border-color: rgba(124, 58, 237, 0.55) !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
  color: #5b21b6 !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.18) !important;
}

.image-editor-wf-hint {
  margin: 0;
  padding: 8px 14px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
  background: rgba(250, 204, 21, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.image-editor-top__center {
  justify-content: center;
  flex: 1 1 140px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-tertiary, #64748b);
  font-variant-numeric: tabular-nums;
}

.image-editor-counter {
  min-width: 3.5em;
  text-align: center;
}

.image-editor-nav-mini {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.image-editor-nav-mini:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .image-editor-nav-mini {
    display: none;
  }
}

.image-editor-thumb-strip--mobile {
  display: none;
  flex-shrink: 0;
  padding: 8px 10px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #191919;
  max-width: 100vw;
  box-sizing: border-box;
}

.image-editor-thumb-strip--mobile .image-editor-thumb {
  display: inline-flex;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .image-editor-thumb-strip--mobile {
    display: flex;
  }
}

.result-card-action-btn--refine {
  width: 64px;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 0;
  line-height: 1;
}

.result-card-action-btn--refine {
  border-color: transparent !important;
  color: #475569 !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

.result-card-action-btn--refine:hover {
  border-color: rgba(124, 58, 237, 0.22) !important;
  color: #7c3aed !important;
  background: #f5f3ff !important;
}

@media (max-width: 768px) {
  .balance-text__prefix {
    display: none;
  }
}

@media (max-width: 480px) {
  .upload-section-group .upload-block .preview-container.preview-area {
    max-height: 168px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .upload-section-group .upload-block .preview-container .upload-zone {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-content: center !important;
    min-height: 100px !important;
    max-height: 156px !important;
    -webkit-overflow-scrolling: touch;
  }

  .upload-section-group .upload-ref-expandable .preview-container.preview-area {
    max-height: 120px !important;
  }

  .upload-section-group .upload-ref-expandable .preview-container .upload-zone {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    min-height: 88px !important;
  }
}

.page-container {
  overflow-x: clip;
}

body[data-app-feature="main-image"] .page-container,
body[data-app-feature="main-image"] .app-container {
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-app-feature="main-image"] .main-area {
  align-self: flex-start;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel {
  height: auto;
  min-height: 0;
}

body[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="main-image"] .main-area .dynamic-panel.dynamic-panel--visible,
body[data-app-feature="detail-page"] .main-area .dynamic-panel.dynamic-panel--visible {
  overflow: visible;
}

body[data-app-feature="main-image"] .upload-ref-expandable,
body[data-app-feature="detail-page"] .upload-ref-expandable {
  margin-top: 4px !important;
}

body[data-app-feature="main-image"] .upload-ref-expandable__inner,
body[data-app-feature="detail-page"] .upload-ref-expandable__inner {
  padding: 12px !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

body[data-app-feature="main-image"] .upload-ref-expandable__head,
body[data-app-feature="detail-page"] .upload-ref-expandable__head {
  margin-bottom: 8px !important;
  min-height: 20px !important;
}

body[data-app-feature="main-image"] .upload-ref-expandable .preview-container.preview-area,
body[data-app-feature="detail-page"] .upload-ref-expandable .preview-container.preview-area {
  min-height: 128px !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-app-feature="main-image"] .upload-ref-expandable .preview-container.preview-area:has(.reference-upload-zone.upload-zone--has-items),
body[data-app-feature="detail-page"] .upload-ref-expandable .preview-container.preview-area:has(.reference-upload-zone.upload-zone--has-items) {
  min-height: 72px !important;
}

body[data-app-feature="main-image"] .upload-ref-expandable .preview-container .reference-upload-zone:not(.upload-zone--commerce-stack),
body[data-app-feature="detail-page"] .upload-ref-expandable .preview-container .reference-upload-zone:not(.upload-zone--commerce-stack) {
  min-height: 88px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  align-items: stretch !important;
}

body[data-app-feature="main-image"] .upload-ref-expandable .reference-upload-zone.upload-zone--has-items,
body[data-app-feature="detail-page"] .upload-ref-expandable .reference-upload-zone.upload-zone--has-items {
  min-height: 72px !important;
  padding: 4px !important;
  align-items: center !important;
}

body[data-app-feature="main-image"] .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn,
body[data-app-feature="detail-page"] .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn {
  min-height: 52px !important;
  height: auto !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}

body[data-app-feature="main-image"] .reference-upload-zone.upload-zone--has-items .add-image-btn,
body[data-app-feature="detail-page"] .reference-upload-zone.upload-zone--has-items .add-image-btn {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  gap: 0 !important;
}

body[data-app-feature="main-image"] .reference-upload-zone .add-image-btn__plus,
body[data-app-feature="detail-page"] .reference-upload-zone .add-image-btn__plus {
  font-size: 20px !important;
  line-height: 1 !important;
}

body[data-app-feature="main-image"] .upload-block .reference-upload-zone .add-image-btn .upload-text,
body[data-app-feature="detail-page"] .upload-block .reference-upload-zone .add-image-btn .upload-text {
  max-width: 240px !important;
  font-size: 11px !important;
  line-height: 1.32 !important;
}

body:not([data-app-panel-mode="fashion"]) #panelStandard .fashion-model-reference-slot {
  display: none !important;
}

body:not([data-app-panel-mode="fashion"]) #panelStandard .upload-ref-slot--style .upload-ref-slot__head {
  display: none !important;
}

body[data-app-feature="main-image"] .reference-upload-zone .uploaded-item,
body[data-app-feature="detail-page"] .reference-upload-zone .uploaded-item {
  flex-basis: 60px !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-expandable__body-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot__title {
  min-width: 0;
  color: #334155;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot__meta {
  flex: 0 0 auto;
  color: var(--text-tertiary, #64748b);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .preview-container.preview-area {
  max-height: none !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone {
  min-width: 0;
  width: 100%;
}

@media (max-width: 760px) {
  body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-expandable__body-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========== 閸忋劌鐪?UI 娴溠冩惂閸栨牗鏁归崣锝忕礄閻掞妇鍋ｉ悳?/ 缁岃櫣濮搁幀?/ 鐎瑰鍙忛崠?/ 妫板嫯顫嶉崗銊ョ潌閿?========== */
#resultPanel {
  scroll-margin-top: 64px;
}

.yj-btn:focus-visible,
.generate-btn:focus-visible,
.toolbar-btn:focus-visible,
.nav-btn:focus-visible,
.vip-btn:focus-visible,
.result-fit-toggle:focus-visible,
.key-btn:focus-visible,
.recharge-close-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* 娑撯偓闁款喕瀵岄崶鎾呯窗閸楁牜鍋ｆ潏鎾冲弳閸栬櫣鎻ｉ崙鎴︾彯鎼达讣绱欐禒?#sellpointGroup閿涘奔绗夎ぐ鍗炴惙閸忔湹绮?.custom-input--brief閿?*/
#sellpointGroup .custom-input-wrap {
  margin-bottom: 0;
  border-bottom: none;
}

#sellpointGroup .custom-input-wrap .custom-input.custom-input--brief {
  padding-right: 72px;
}

#sellpointGroup textarea#prompt-input.custom-input--brief,
#sellpointGroup .custom-input.custom-input--brief,
#sellpointGroup .custom-input.custom-input--sellpoint {
  min-height: 108px;
  max-height: 220px;
  height: auto;
  resize: vertical;
  line-height: 1.45;
  border-radius: var(--r-card);
  padding: 10px 12px;
  box-sizing: border-box;
}

#sellpointGroup.param-group {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  vertical-align: middle;
  background: transparent;
  border: none;
  box-shadow: none;
}

.main-area #sellpointGroup .module-title.step-title-row {
  margin-bottom: 4px;
}

.result-empty-state {
  border: 1px dashed var(--border-light);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-hover) 100%);
  padding: 28px 20px;
}

.result-empty-state strong {
  font-size: 16px;
  color: var(--text-primary);
}

.top-bar-right #balanceNum {
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 768px) {
  #previewModalBackdrop.visible .preview-modal--detail {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 390px) {
  .page-container,
.app-container {
    overflow-x: hidden;
  }

  .top-bar {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box;
  }

  .main-area,
.result-gallery-body {
    overflow-x: hidden;
    min-width: 0;
  }

  .result-panel {
    padding: 12px;
  }
}

/* ========== 瀹搞儰缍旈崣鐗堟殻娴ｆ挾澧楅棃銏ゆ？鐠烘繀绱崠?========== */
@media (min-width: 1024px) {
  .page-container,
.app-container {
    background: #f6f8fc;
  }

  .sidebar {
    padding: 14px 10px 14px 12px;
    gap: 12px;
  }

  .main-area {
    flex-basis: 480px;
    width: 480px;
    min-width: 468px;
    max-width: 500px;
    padding: 12px;
    --form-panel-padding: 12px;
    --form-step-gap: 11px;
    --form-inner-gap: 10px;
    --form-title-gap: 7px;
  }

  .main-area > .yj-card.yj-card--panel {
    padding: 12px;
  }

  .result-panel {
    padding: 22px 24px 18px;
  }
}

.main-area .dynamic-panel-stack,
.main-area .dynamic-panel.dynamic-panel--visible {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-area .section-step-badge,
.main-area .step-leader {
  margin-right: 2px;
}

.main-area .step-title-row {
  line-height: 1.25;
}

.main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product {
  padding: 10px;
  gap: 8px;
}

.main-area #panelStandard:not(.mode-matting) .upload-block .preview-container .upload-zone {
  min-height: 90px;
}

.main-area #panelStandard #modelBtns.model-btns,
#gpt-image-panel .gpt-model-grid.model-btns,
#nano-banana-panel .gpt-model-grid.model-btns {
  gap: 8px;
}

.main-area #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card,
#gpt-image-panel .gpt-aspect-clarity-card,
#nano-banana-panel .gpt-aspect-clarity-card {
  padding: 10px 12px;
}

.main-area #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card .step-title-main {
  flex: 0 1 auto;
  min-width: max-content;
}

.main-area #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card .step-inline-hint-slot {
  flex: 0 0 auto;
  min-width: 68px;
  max-width: none;
}

.main-area #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card .step-inline-hint {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

#gpt-image-panel .gpt-image-stack,
#nano-banana-panel .gpt-image-stack {
  gap: var(--form-step-gap, 11px);
}

#gpt-image-panel .gpt-step-card > .step-title-row.module-title,
#gpt-image-panel .gpt-step-card > .step-title-row,
#nano-banana-panel .gpt-step-card > .step-title-row.module-title,
#nano-banana-panel .gpt-step-card > .step-title-row {
  margin-bottom: 7px;
}

#gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
#gpt-image-panel .upload-zone--gpt-compact.upload-zone--gpt-product,
#nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact,
#nano-banana-panel .upload-zone--gpt-compact.upload-zone--gpt-product {
  min-height: 84px;
  padding: 8px 12px;
}

#gpt-image-panel .gpt-prompt-textarea,
#nano-banana-panel .gpt-prompt-textarea {
  min-height: 88px;
  height: 88px;
  max-height: 96px;
}

#gpt-image-panel .gpt-count-section .gpt-count-row,
#nano-banana-panel .gpt-count-section .gpt-count-row {
  gap: 8px;
}

.result-gallery-body {
  padding-top: 2px;
}

@media (min-width: 1024px) and (max-height: 860px) {
  .main-area {
    --form-step-gap: 9px;
    --form-title-gap: 6px;
  }

  #gpt-image-panel .gpt-image-stack,
#nano-banana-panel .gpt-image-stack {
    gap: 10px;
  }

  #gpt-image-panel .gpt-prompt-textarea,
#nano-banana-panel .gpt-prompt-textarea {
    height: 78px;
  }
}

/* ---------- 娑擃參妫块柊宥囩枂闂堛垺婢橀敍?yj-card--panel閿涘绱板銉╊€冮崷鍡欏仯閵嗕焦鐖ｇ粵鍙ョ瑢閹稿鎸?---------- */
.main-area > .yj-card.yj-card--panel .step-leader {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  align-self: center;
  margin-right: 4px;
  min-height: 0;
  gap: 2px;
}

.main-area > .yj-card.yj-card--panel .step-leader__line {
  width: 12px;
  height: 2px;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
  border-radius: 1px;
  background: rgba(15, 23, 42, 0.18);
  align-self: center;
}

.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-step-card:last-child .step-leader__line,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-step-card:last-child .step-leader__line {
  display: none;
}

.main-area > .yj-card.yj-card--panel .step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid transparent;
}

.main-area > .yj-card.yj-card--panel .step-dot--pending {
  background: #c5c5c5;
  border-color: #c5c5c5;
}

.main-area > .yj-card.yj-card--panel .step-dot--done {
  background: var(--primary);
  border-color: var(--primary);
}

.main-area > .yj-card.yj-card--panel .step-dot--current {
  background: transparent;
  border: 2px solid var(--primary);
}

.main-area > .yj-card.yj-card--panel .step-title-main,
.main-area > .yj-card.yj-card--panel h3.upload-block__main-title.step-title-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
}

.main-area > .yj-card.yj-card--panel .module-title--sellpoint .sellpoint-heading.step-title-main {
  align-items: flex-start;
}
.main-area > .yj-card.yj-card--panel .sellpoint-title,
.main-area > .yj-card.yj-card--panel .param-subfield-title,
.main-area > .yj-card.yj-card--panel .gpt-subfield-title,
.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-subfield-title,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-subfield-title {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  line-height: 1.2;
}

.main-area > .yj-card.yj-card--panel .module-title--sellpoint .sellpoint-heading.step-title-main {
  align-items: flex-start;
}

.main-area > .yj-card.yj-card--panel .generate-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .model-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel #panelStandard #modelBtns.model-btns .model-btn {
  min-height: 36px;
  height: auto;
  max-height: none;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-model-grid.model-btns .model-btn,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-model-grid.model-btns .model-btn {
  min-height: 36px;
  height: auto;
  max-height: none;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .ratio-btn,
.main-area > .yj-card.yj-card--panel .resolution-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .target-platform-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .gpt-secondary-btn,
.main-area > .yj-card.yj-card--panel .gpt-ai-expand-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .param-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .saas-step-row-scene-model .model-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .saas-step-row-ratio-clarity .ratio-btn,
.main-area > .yj-card.yj-card--panel .saas-step-row-ratio-clarity .resolution-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .matting-tool-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel #gpt-image-form-root .saas-step-head:not(.step-title-row) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
}

.main-area > .yj-card.yj-card--panel #gpt-image-form-root .saas-step-block--aspect-clarity .step-leader__line {
  display: none;
}

.main-area > .yj-card.yj-card--panel .matting-step-card:last-of-type .step-leader__line {
  display: none;
}

.main-area > .yj-card.yj-card--panel #sellpointGroup .step-leader__line {
  display: none;
}

/* 2026-05-14: main config panel visual refinements */
.main-area > .yj-card.yj-card--panel {
  padding: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.main-area .module-title.step-title-row,
.main-area .upload-block .upload-card-header .step-title-row,
.main-area .matting-step-card > .step-title-row {
  margin-bottom: 7px;
}

.main-area .step-inline-hint,
.main-area .step-inline-hint-slot {
  max-width: min(38%, 150px);
  color: #9aa3b2;
  font-size: 10.5px;
  font-weight: 500;
}

.main-area > .yj-card.yj-card--panel .step-dot {
  width: 6px;
  height: 6px;
  border-width: 1.5px;
}

.main-area > .yj-card.yj-card--panel .step-leader__line {
  width: 1px;
  background: rgba(148, 163, 184, 0.34);
}

.main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product,
.main-area #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card {
  border-color: #e8ecf3;
  box-shadow: none;
}

.main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product {
  padding: 10px;
  gap: 8px;
}

.main-area #panelStandard:not(.mode-matting) .upload-block .preview-container .upload-zone:not(.upload-zone--yj-compact) {
  min-height: 82px;
  border-color: #dde4ef;
  background: #f6f8fc;
}

.main-area .target-platform-btns {
  gap: 4px;
  padding: 3px;
  border: 1px solid #e8ecf3;
  border-radius: 6px;
  background: #f7f8fb;
}

.main-area > .yj-card.yj-card--panel .target-platform-btn {
  min-height: 31px;
  height: 31px;
  max-height: 31px;
  border-color: transparent;
  background: transparent;
  color: #647084;
  box-shadow: none;
  border-radius: 4px;
}

.main-area > .yj-card.yj-card--panel .target-platform-btn:hover:not(.active) {
  background: #fff;
  color: var(--brand-primary);
  border-color: #e5e7f0;
}

.main-area > .yj-card.yj-card--panel .target-platform-btn.active {
  background: #fff;
  color: var(--brand-primary);
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.main-area #panelStandard #modelBtns.model-btns,
#gpt-image-panel .gpt-model-grid.model-btns,
#nano-banana-panel .gpt-model-grid.model-btns {
  gap: 7px;
}

body[data-app-feature="main-image"] .main-area #panelStandard #modelBtns.model-btns,
body[data-app-feature="detail-page"] .main-area #panelStandard #modelBtns.model-btns {
  gap: 8px;
}

body[data-app-feature="main-image"] .main-area #panelStandard #modelBtns.model-btns .model-btn,
body[data-app-feature="detail-page"] .main-area #panelStandard #modelBtns.model-btns .model-btn {
  min-height: 42px;
  padding: 8px 12px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .model-section > .module-title .section-step-label,
body[data-app-feature="detail-page"] .main-area #panelStandard .model-section > .module-title .section-step-label {
  flex: 0 0 auto;
}

body[data-app-feature="main-image"] .main-area #panelStandard .model-section > .module-title .required-star,
body[data-app-feature="detail-page"] .main-area #panelStandard .model-section > .module-title .required-star {
  flex: 0 0 auto;
  margin-left: 0;
}

body[data-app-feature="main-image"] .main-area #panelStandard .gpt-aspect-clarity-card,
body[data-app-feature="detail-page"] .main-area #panelStandard .gpt-aspect-clarity-card {
  padding: 10px 12px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="fashion"] .main-area #panelStandard .standard-output-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

body[data-app-feature="main-image"] .main-area #panelStandard .commerce-platform-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .commerce-platform-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-btns,
body[data-app-feature="detail-page"] .main-area #panelStandard .target-platform-btns {
  display: none;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-field,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-output-select-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-setting-select,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-setting-select {
  width: 100%;
  height: 34px;
  min-height: 34px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 0 28px 0 10px;
  outline: none;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-setting-select:hover:not(:disabled),
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-setting-select:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.35);
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-setting-select:focus,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-setting-select:focus {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

body[data-app-feature="main-image"] .main-area #panelStandard .gpt-ratio-section,
body[data-app-feature="main-image"] .main-area #panelStandard .gpt-resolution-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .gpt-ratio-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .gpt-resolution-section {
  display: none;
}

body[data-app-feature="main-image"] .main-area #panelStandard .module-title--sellpoint,
body[data-app-feature="detail-page"] .main-area #panelStandard .module-title--sellpoint {
  margin-bottom: 8px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-style-row,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-style-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings {
  margin-bottom: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: none;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-summary {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid transparent;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary::-webkit-details-marker,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-summary::-webkit-details-marker {
  display: none;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary::after,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-summary::after {
  content: "▾";
  color: var(--text-tertiary, #64748b);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.16s ease;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-summary::after,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-summary::after {
  transform: rotate(180deg);
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-summary,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-summary {
  border-bottom-color: #edf1f7;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary__hint,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-summary__hint {
  margin-left: 0;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 500;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-body,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: none;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-style-custom-input,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-style-custom-input {
  width: 100%;
  height: 34px;
  min-height: 34px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  padding: 0 10px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-style-custom-input[hidden],
body[data-app-feature="detail-page"] .main-area #panelStandard .main-style-custom-input[hidden] {
  display: none !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-designer-note,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-designer-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 6px;
  background: #f8f5ff;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  margin: 0;
  border-top: 1px solid #edf1f7;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .module-title--sellpoint,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .module-title--sellpoint,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint .module-title--sellpoint,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint .module-title--sellpoint {
  margin-bottom: 0;
  min-height: 0;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .module-title.step-title-row,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .module-title.step-title-row,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint .module-title.step-title-row,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint .module-title.step-title-row {
  margin-bottom: 0;
  min-height: 22px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .custom-input-wrap,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .custom-input-wrap,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint .custom-input-wrap,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint .custom-input-wrap {
  width: 100%;
  margin: 0;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint textarea#prompt-input.custom-input--brief,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint textarea#prompt-input.custom-input--brief,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint textarea#prompt-input.custom-input--brief,
body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .custom-input.custom-input--brief,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .custom-input.custom-input--brief,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint .custom-input.custom-input--brief,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint textarea#selfmediaSellpointInput.custom-input--brief,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint .custom-input.custom-input--brief,
body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .custom-input.custom-input--sellpoint,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .custom-input.custom-input--sellpoint {
  width: 100%;
  min-height: 108px;
  max-height: 220px;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.45;
  font-size: 13px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .sellpoint-vague-warn,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .sellpoint-vague-warn {
  margin: 0;
}

/* Advanced settings — poster / selfmedia card shell + sellpoint typography */
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-settings {
  margin-bottom: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: none;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-advanced-card {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-summary,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-summary {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid transparent;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-summary::-webkit-details-marker,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-summary::-webkit-details-marker {
  display: none;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-summary::after,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-summary::after {
  content: "▾";
  color: var(--text-tertiary, #64748b);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.16s ease;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-summary::after,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-settings[open] .main-advanced-summary::after {
  transform: rotate(180deg);
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-summary,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-settings[open] .main-advanced-summary {
  border-bottom-color: #edf1f7;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-summary__hint,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-summary__hint {
  margin-left: 0;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 500;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-body,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: none;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-body .main-style-row,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-body #designerDefaultPreferenceRow {
  display: none !important;
}

body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint {
  padding-top: 0;
  border-top: none;
  gap: 8px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-sellpoint .module-title.step-title-row,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-sellpoint .module-title.step-title-row,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-sellpoint .module-title.step-title-row,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-sellpoint .module-title.step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  min-height: 24px;
}

body[data-app-feature="main-image"] .main-advanced-sellpoint .sellpoint-heading,
body[data-app-feature="detail-page"] .main-advanced-sellpoint .sellpoint-heading,
body[data-app-feature="poster"] .main-advanced-sellpoint .sellpoint-heading,
body[data-app-feature="selfmedia-article"] .main-advanced-sellpoint .sellpoint-heading {
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}

body[data-app-feature="main-image"] .main-advanced-sellpoint .sellpoint-title,
body[data-app-feature="detail-page"] .main-advanced-sellpoint .sellpoint-title,
body[data-app-feature="poster"] .main-advanced-sellpoint .sellpoint-title,
body[data-app-feature="selfmedia-article"] .main-advanced-sellpoint .sellpoint-title {
  display: block;
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

body[data-app-feature="main-image"] .main-advanced-sellpoint .step-inline-hint,
body[data-app-feature="detail-page"] .main-advanced-sellpoint .step-inline-hint,
body[data-app-feature="poster"] .main-advanced-sellpoint .step-inline-hint,
body[data-app-feature="selfmedia-article"] .main-advanced-sellpoint .step-inline-hint {
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

body[data-app-feature="main-image"] .main-advanced-sellpoint textarea.custom-input--brief,
body[data-app-feature="detail-page"] .main-advanced-sellpoint textarea.custom-input--brief,
body[data-app-feature="poster"] .main-advanced-sellpoint textarea.custom-input--brief,
body[data-app-feature="selfmedia-article"] .main-advanced-sellpoint textarea.custom-input--brief {
  font-size: 12px;
  line-height: 1.5;
  color: #0f172a;
}

body[data-app-feature="main-image"] .main-advanced-sellpoint textarea.custom-input--brief::placeholder,
body[data-app-feature="detail-page"] .main-advanced-sellpoint textarea.custom-input--brief::placeholder,
body[data-app-feature="poster"] .main-advanced-sellpoint textarea.custom-input--brief::placeholder,
body[data-app-feature="selfmedia-article"] .main-advanced-sellpoint textarea.custom-input--brief::placeholder {
  color: var(--text-tertiary, #64748b);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
}

#sellpointGroup .main-advanced-sellpoint .custom-input-wrap .custom-input.custom-input--brief,
#panelSelfmediaArticle .main-advanced-sellpoint .custom-input-wrap .custom-input.custom-input--brief {
  padding-right: 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard #sellpointGroup .main-advanced-sellpoint textarea#prompt-input.custom-input--brief {
  min-height: 40px;
  height: auto;
  max-height: 96px;
  padding: 8px 10px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-style-field .gpt-subfield-title,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-style-field .gpt-subfield-title {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-block,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-block {
  margin-bottom: 8px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-head,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-chip,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-chip {
  min-width: 0;
  height: 30px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-chip:hover,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-chip:hover {
  border-color: rgba(6, 182, 212, 0.34);
  color: #0e7490;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-chip.active,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-chip.active {
  border-color: rgba(6, 182, 212, 0.42);
  background: var(--cyan-soft);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.08);
}

body[data-app-feature="main-image"] .main-area #panelStandard #prompt-input.custom-input--brief,
body[data-app-feature="detail-page"] .main-area #panelStandard #prompt-input.custom-input--brief {
  min-height: 108px;
  height: auto;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.main-area > .yj-card.yj-card--panel #panelStandard #modelBtns.model-btns .model-btn,
.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-model-grid.model-btns .model-btn,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-model-grid.model-btns .model-btn {
  min-height: 38px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-color: #e5e9f2;
  box-shadow: none;
}

.main-area > .yj-card.yj-card--panel #panelStandard #modelBtns.model-btns .model-btn:not(.selected),
.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-model-grid.model-btns .model-btn:not(.selected),
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-model-grid.model-btns .model-btn:not(.selected) {
  background: #fff;
}

.main-area > .yj-card.yj-card--panel #panelStandard #modelBtns.model-btns .model-btn.selected,
.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-model-grid.model-btns .model-btn.selected,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-model-grid.model-btns .model-btn.selected {
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.16);
}

.main-area #panelStandard #modelBtns.model-btns .model-btn .model-desc,
#gpt-image-panel .gpt-model-card-desc,
#nano-banana-panel .gpt-model-card-desc {
  opacity: 0.78;
}

.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-model-grid.model-btns .model-btn,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-model-grid.model-btns .model-btn {
  min-height: 46px;
  padding: 5px 8px;
}

.main-area .model-tag {
  top: 4px;
  right: 5px;
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.2;
}

.ratio-resolution-card .ratio-btns--gpt-aspect,
.ratio-resolution-card .resolution-btns--gpt-compact {
  gap: 5px;
}

.main-area > .yj-card.yj-card--panel .ratio-btn,
.main-area > .yj-card.yj-card--panel .resolution-btn {
  min-height: 32px;
  height: 32px;
  max-height: 32px;
  border-color: #e5e9f2;
  background: #fff;
  box-shadow: none;
}

.ratio-resolution-card .ratio-btns--gpt-aspect .ratio-btn.active,
.ratio-resolution-card .resolution-btns--gpt-compact .resolution-btn.active {
  background: #f3ecff;
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.12);
}

.main-area .custom-input.custom-input--brief {
  border-color: #e5e9f2;
  background: #fff;
}

.main-area > .yj-card.yj-card--panel .generate-btn {
  border-radius: 5px;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.18);
}

.main-area #gpt-image-panel .gpt-prompt-action-row,
.main-area #nano-banana-panel .gpt-prompt-action-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.main-area #gpt-image-panel .gpt-scene-row,
.main-area #nano-banana-panel .gpt-scene-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.main-area #gpt-image-panel .gpt-scene-label,
.main-area #nano-banana-panel .gpt-scene-label {
  color: #647084;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.main-area #gpt-image-panel .gpt-scene-select,
.main-area #nano-banana-panel .gpt-scene-select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 30px 0 10px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background:
    linear-gradient(45deg, transparent 50%, #8a94a6 50%) right 12px center / 6px 6px no-repeat,
    linear-gradient(135deg, #8a94a6 50%, transparent 50%) right 8px center / 6px 6px no-repeat,
    #fff;
  color: #2f3b4f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.main-area #gpt-image-panel .gpt-scene-select:hover,
.main-area #nano-banana-panel .gpt-scene-select:hover {
  border-color: rgba(124, 58, 237, 0.34);
}

.main-area #gpt-image-panel .gpt-scene-select:focus,
.main-area #nano-banana-panel .gpt-scene-select:focus {
  border-color: rgba(124, 58, 237, 0.58);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.main-area #gpt-image-panel .gpt-inspire-actions--below,
.main-area #nano-banana-panel .gpt-inspire-actions--below {
  margin-top: 0;
  flex: 0 0 104px;
  display: flex;
  align-items: center;
  align-self: center;
}

.main-area #gpt-image-panel .gpt-prompt-action-row .gpt-inspire-actions--below,
.main-area #nano-banana-panel .gpt-prompt-action-row .gpt-inspire-actions--below {
  width: 104px;
  max-width: 104px;
}

.main-area #gpt-image-panel .gpt-prompt-action-row #gptExpandPromptBtn.gpt-secondary-btn,
.main-area #nano-banana-panel .gpt-prompt-action-row #nanoExpandPromptBtn.gpt-secondary-btn {
  width: 100%;
  min-height: 32px;
  height: 32px;
  max-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-color: rgba(124, 58, 237, 0.24);
  background: #f7f1ff;
  color: var(--brand-primary);
  font-weight: 700;
  box-shadow: none;
}

.main-area #gpt-image-panel .gpt-scene-select,
.main-area #nano-banana-panel .gpt-scene-select,
.main-area #gpt-image-panel .gpt-setting-select,
.main-area #nano-banana-panel .gpt-setting-select,
.main-area #gpt-image-panel .param-btn,
.main-area #nano-banana-panel .param-btn,
.main-area #gpt-image-panel .gpt-secondary-btn,
.main-area #nano-banana-panel .gpt-secondary-btn {
  vertical-align: middle;
}

.main-area #gpt-image-panel .gpt-prompt-action-row #gptExpandPromptBtn.gpt-secondary-btn:hover:not(:disabled),
.main-area #nano-banana-panel .gpt-prompt-action-row #nanoExpandPromptBtn.gpt-secondary-btn:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.42);
  background: #f0e6ff;
}

.main-area #gpt-image-panel .gpt-prompt-action-row #gptExpandPromptBtn.gpt-secondary-btn.is-busy,
.main-area #nano-banana-panel .gpt-prompt-action-row #nanoExpandPromptBtn.gpt-secondary-btn.is-busy {
  opacity: 0.72;
}

.main-area #gpt-image-panel .gpt-aspect-clarity-card,
.main-area #nano-banana-panel .gpt-aspect-clarity-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.main-area #gpt-image-panel .gpt-aspect-clarity-card > .module-title,
.main-area #nano-banana-panel .gpt-aspect-clarity-card > .module-title {
  grid-column: 1 / -1;
}

.main-area #gpt-image-panel .gpt-ratio-section,
.main-area #gpt-image-panel .gpt-resolution-section,
.main-area #nano-banana-panel .gpt-ratio-section,
.main-area #nano-banana-panel .gpt-resolution-section {
  min-width: 0;
}

.main-area #gpt-image-panel .gpt-setting-select,
.main-area #nano-banana-panel .gpt-setting-select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background:
    linear-gradient(45deg, transparent 50%, #8a94a6 50%) right 12px center / 6px 6px no-repeat,
    linear-gradient(135deg, #8a94a6 50%, transparent 50%) right 8px center / 6px 6px no-repeat,
    #fff;
  color: #2f3b4f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.main-area #gpt-image-panel .gpt-setting-select:hover:not(:disabled),
.main-area #nano-banana-panel .gpt-setting-select:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.34);
}

.main-area #gpt-image-panel .gpt-setting-select:focus,
.main-area #nano-banana-panel .gpt-setting-select:focus {
  border-color: rgba(124, 58, 237, 0.58);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.main-area #gpt-image-panel .gpt-setting-select:disabled,
.main-area #nano-banana-panel .gpt-setting-select:disabled {
  cursor: not-allowed;
  color: #aab3c2;
  background:
    linear-gradient(45deg, transparent 50%, #b9c1cf 50%) right 12px center / 6px 6px no-repeat,
    linear-gradient(135deg, #b9c1cf 50%, transparent 50%) right 8px center / 6px 6px no-repeat,
    #f7f8fb;
}

.main-area #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
.main-area #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact {
  min-height: 84px;
  padding: 8px 10px;
}

.main-area #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
.main-area #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 84px;
  max-height: 92px;
}

.main-area #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
.main-area #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 68px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.main-area #gpt-image-panel .gpt-prompt-textarea,
.main-area #nano-banana-panel .gpt-prompt-textarea {
  min-height: 88px;
  height: 88px;
  max-height: 96px;
  padding: 8px 10px;
}

.main-area #gpt-image-panel .gpt-prompt-textarea:focus,
.main-area #gpt-image-panel .gpt-prompt-textarea:focus-visible,
.main-area #nano-banana-panel .gpt-prompt-textarea:focus,
.main-area #nano-banana-panel .gpt-prompt-textarea:focus-visible {
  min-height: 120px;
  height: 120px;
  max-height: 180px;
  resize: vertical;
}

.main-area #gpt-image-panel .gpt-image-stack,
.main-area #nano-banana-panel .gpt-image-stack {
  gap: var(--form-step-gap, 11px);
}

.main-area #gpt-image-panel .gpt-step-card > .step-title-row.module-title,
.main-area #gpt-image-panel .gpt-step-card > .step-title-row,
.main-area #nano-banana-panel .gpt-step-card > .step-title-row.module-title,
.main-area #nano-banana-panel .gpt-step-card > .step-title-row {
  margin-bottom: 7px;
}

.main-area #gpt-image-panel .gpt-step-card--prompt,
.main-area #nano-banana-panel .gpt-step-card--prompt {
  padding-top: 2px;
  padding-bottom: 2px;
}

.main-area #gpt-image-panel .gpt-prompt-action-row,
.main-area #nano-banana-panel .gpt-prompt-action-row {
  margin-top: 10px;
}

#panelGptImage #gpt-image-panel .gpt-upload-head-actions,
#panelNanoBanana #nano-banana-panel .gpt-upload-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload > .step-title-row,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload > .step-title-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  align-items: center;
  column-gap: 8px;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload > .step-title-row .step-title-main,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload > .step-title-row .step-title-main {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

#panelGptImage #gpt-image-panel .gpt-upload-head-actions .step-inline-hint,
#panelNanoBanana #nano-banana-panel .gpt-upload-head-actions .step-inline-hint {
  display: none;
}

#panelGptImage #gpt-image-panel .gpt-upload-subhint,
#panelNanoBanana #nano-banana-panel .gpt-upload-subhint {
  margin: -2px 0 6px;
  color: #9aa3b2;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

#panelGptImage #gpt-image-panel .gpt-upload-inline-hint,
#panelNanoBanana #nano-banana-panel .gpt-upload-inline-hint {
  color: #9aa3b2;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(0.5px);
}

.gpt-prompt-validation {
  margin: 6px 0 0;
  color: #dc2626 !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area p.gpt-prompt-validation {
  color: #dc2626 !important;
}

.gpt-prompt-validation--error {
  font-weight: 700;
}

.gpt-prompt-textarea--invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

#panelGptImage #gpt-image-panel .gpt-upload-clear-btn,
#panelNanoBanana #nano-banana-panel .gpt-upload-clear-btn {
  min-height: 24px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #e5e9f2;
  border-radius: 4px;
  background: #fff;
  color: #7b8496;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

#panelGptImage #gpt-image-panel .gpt-upload-clear-btn:hover,
#panelNanoBanana #nano-banana-panel .gpt-upload-clear-btn:hover {
  border-color: rgba(124, 58, 237, 0.32);
  background: #faf7ff;
  color: var(--brand-primary);
}

.result-toolbar:not(.batch-open) {
  justify-content: space-between;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload,
#panelGptImage #gpt-image-panel .gpt-step-card--prompt,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload,
#panelNanoBanana #nano-banana-panel .gpt-step-card--prompt {
  box-sizing: border-box;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
  min-height: 178px;
}

#panelGptImage #gpt-image-panel .gpt-step-card--prompt,
#panelNanoBanana #nano-banana-panel .gpt-step-card--prompt {
  min-height: 218px;
}

#panelGptImage #gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
#panelNanoBanana #nano-banana-panel .gpt-upload-block .upload-block__body--preview-only {
  min-height: 126px;
}

#panelGptImage #gpt-image-panel .gpt-upload-block .preview-container.preview-area,
#panelNanoBanana #nano-banana-panel .gpt-upload-block .preview-container.preview-area {
  min-height: 126px;
  max-height: none !important;
  overflow: visible !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact {
  min-height: 126px !important;
  max-height: none !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 126px !important;
  max-height: none !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 100px !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item),
#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item),
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items {
  min-height: 94px !important;
  max-height: 112px !important;
  height: 100px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .uploaded-list,
#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .uploaded-list,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .uploaded-list,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .uploaded-list {
  display: contents !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .uploaded-item,
#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .uploaded-item,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .uploaded-item,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .uploaded-item {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn,
#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .add-image-btn,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .add-image-btn {
  flex: 0 0 146px !important;
  width: 146px !important;
  min-width: 146px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 6px 10px !important;
  flex-direction: row !important;
  gap: 7px !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn__plus,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn__plus {
  font-size: 18px !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn .upload-text,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn .upload-text {
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal !important;
}

#panelGptImage #gpt-image-panel .gpt-upload-block:has(.uploaded-item) .upload-block__body--preview-only,
#panelGptImage #gpt-image-panel .gpt-upload-block:has(.uploaded-item) .preview-container.preview-area,
#panelGptImage #gpt-image-panel .gpt-upload-block:has(.upload-zone--has-items) .upload-block__body--preview-only,
#panelGptImage #gpt-image-panel .gpt-upload-block:has(.upload-zone--has-items) .preview-container.preview-area,
#panelNanoBanana #nano-banana-panel .gpt-upload-block:has(.uploaded-item) .upload-block__body--preview-only,
#panelNanoBanana #nano-banana-panel .gpt-upload-block:has(.uploaded-item) .preview-container.preview-area,
#panelNanoBanana #nano-banana-panel .gpt-upload-block:has(.upload-zone--has-items) .upload-block__body--preview-only,
#panelNanoBanana #nano-banana-panel .gpt-upload-block:has(.upload-zone--has-items) .preview-container.preview-area {
  min-height: 100px !important;
  max-height: 112px !important;
  overflow: visible !important;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.uploaded-item),
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.uploaded-item) {
  min-height: 142px;
}

#panelGptImage #gpt-image-panel .gpt-prompt-controls,
#panelNanoBanana #nano-banana-panel .gpt-prompt-controls {
  min-height: 180px;
}

#panelGptImage #gpt-image-panel .gpt-prompt-textarea,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea {
  min-height: 138px !important;
  height: 142px !important;
  max-height: 190px !important;
  padding: 12px 14px !important;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload > .step-title-row,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload > .step-title-row {
  width: 100%;
  box-sizing: border-box;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-param,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-param,
#panelGptImage #gpt-image-panel .gpt-step-card--prompt .gpt-prompt-group,
#panelNanoBanana #nano-banana-panel .gpt-step-card--prompt .gpt-prompt-group,
#panelGptImage #gpt-image-panel .gpt-upload-block,
#panelNanoBanana #nano-banana-panel .gpt-upload-block,
#panelGptImage #gpt-image-panel .gpt-prompt-controls,
#panelNanoBanana #nano-banana-panel .gpt-prompt-controls {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .main-area #gpt-image-panel .gpt-prompt-action-row,
.main-area #nano-banana-panel .gpt-prompt-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .main-area #gpt-image-panel .gpt-prompt-action-row .gpt-inspire-actions--below,
.main-area #nano-banana-panel .gpt-prompt-action-row .gpt-inspire-actions--below {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .main-area #gpt-image-panel .gpt-aspect-clarity-card,
.main-area #nano-banana-panel .gpt-aspect-clarity-card {
    grid-template-columns: 1fr;
  }
}

body[data-app-feature="main-image"] #mainGenerateSticky.main-generate-sticky,
body[data-app-feature="detail-page"] #mainGenerateSticky.main-generate-sticky {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}

body[data-app-feature="main-image"] #mainGenerateSticky .generate-btn,
body[data-app-feature="detail-page"] #mainGenerateSticky .generate-btn {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
  border-radius: 5px !important;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="main-image"] #mainGenerateSticky .generate-hint,
body[data-app-feature="detail-page"] #mainGenerateSticky .generate-hint {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}

body:not(.has-desktop-generate-dock)[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body:not(.has-desktop-generate-dock)[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel {
  padding-bottom: 0 !important;
}

body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="matting-refine"] .main-area > .yj-card.yj-card--panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body[data-app-feature="selfmedia-article"] .main-area .dynamic-panel-stack,
body[data-app-feature="poster"] .main-area .dynamic-panel-stack,
body[data-app-feature="matting-refine"] .main-area .dynamic-panel-stack {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  gap: 0 !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 0 !important;
}

body[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body[data-app-feature="poster"] .main-area .dynamic-panel-stack,
body[data-app-feature="selfmedia-article"] .main-area .dynamic-panel-stack {
  flex: 0 1 auto !important;
  height: auto !important;
  max-height: calc(100% - 52px) !important;
  overflow-y: auto !important;
}

body[data-app-feature="poster"] #panelStandard.dynamic-panel--visible {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 10px !important;
  padding: 1px 10px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 10px !important;
  padding: 1px 10px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle.dynamic-panel--visible {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 10px !important;
  padding: 1px 10px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 10px !important;
  padding: 1px 10px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="matting-refine"] #panelStandard.dynamic-panel--visible {
  flex: 1 1 0 !important;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: 12px !important;
}

body[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body[data-app-feature="detail-page"] .main-area .dynamic-panel.dynamic-panel--visible {
  overflow-x: hidden;
}

/* Rewrite page: aligned with the main-image form system. */
body[data-app-feature="rewrite"] #panelRewrite {
  color: #0f172a;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-mode-lead {
  margin: 0 0 8px !important;
  padding: 0 1px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-panel {
  margin: 0 0 10px !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col {
  min-width: 0 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__head.step-title-row,
body[data-app-feature="rewrite"] #panelRewrite .module-title.step-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 18px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 18px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__title.step-title-main,
body[data-app-feature="rewrite"] #panelRewrite .module-title.step-title-row .step-title-main,
body[data-app-feature="rewrite"] #panelRewrite .module-title.step-title-row .section-step-label {
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__title.step-title-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__title::before {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--primary-gradient) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__hint {
  display: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .step-inline-hint {
  flex: 0 0 auto !important;
  max-width: 52% !important;
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-clear-btn,
.standard-upload-clear-btn,
#mattingClearAllBtn.gpt-upload-clear-btn {
  flex: 0 0 auto !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #ef4444 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-clear-btn[hidden],
.standard-upload-clear-btn[hidden],
#mattingClearAllBtn.gpt-upload-clear-btn[hidden] {
  display: none !important;
}

body:not([data-app-feature="matting-refine"]) #mattingClearAllBtn,
#panelStandard:not(.mode-matting) #mattingClearAllBtn {
  display: none !important;
}

body[data-app-feature="matting-refine"] #standardProductClearUploadBtn,
#panelStandard.mode-matting #standardProductClearUploadBtn {
  display: none !important;
}

/* Rewrite upload compact layout: see styles/upload-zone-unify.css */

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border: 1px dashed #dfe5ef !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__icon {
  margin: 0 0 8px !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__line,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__sub {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__line {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__sub {
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview {
  display: flex !important;
  gap: 6px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
  overflow: hidden !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__add {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item {
  position: relative !important;
  border: 1px solid #dbe3ef !important;
  background: #fff !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__fname,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__badge {
  display: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__remove {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item.upload-error {
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item.upload-error::after {
  content: "\4E0A\4F20\5931\8D25";
  position: absolute;
  inset: auto 4px 4px 4px !important;
  z-index: 11;
  min-height: 20px !important;
  padding: 2px 5px !important;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item .upload-status-badge {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  z-index: 12 !important;
  max-width: calc(100% - 8px) !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  line-height: 14px !important;
  white-space: nowrap !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item .upload-status-badge.error {
  background: rgba(239, 68, 68, 0.92) !important;
  color: #fff !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item .upload-status-badge.error span:not(.yj-emoji) {
  display: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__item .upload-status-badge.uploading {
  background: color-mix(in srgb, var(--color-primary) 92%, transparent) !important;
  color: #fff !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__add {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px dashed #dfe5ef !important;
  background: #fff !important;
  color: #64748b !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__add-plus {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview__add-text {
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder[hidden],
body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-preview[hidden] {
  display: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-params-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-copy-textarea {
  width: 100% !important;
  min-height: 52px !important;
  max-height: 64px !important;
  padding: 8px 10px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btns,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btns {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn {
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  min-width: 0 !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  padding: 5px 6px !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card .ratio-btn.active,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card .resolution-btn.active {
  border-color: #a78bfa !important;
  background: #f2eaff !important;
  color: #7c3aed !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__t,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-name,
body[data-app-feature="rewrite"] #panelRewrite .standard-setting-select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__s,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-desc,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card .gpt-subfield-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 26px 6px 10px !important;
  color: #334155 !important;
  overflow: hidden !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn.selected {
  border-color: #8b5cf6 !important;
  background: var(--primary-gradient) !important;
  color: #fff !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-name,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-desc {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-desc {
  color: var(--text-tertiary, #64748b) !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn.selected .model-desc {
  color: rgba(255, 255, 255, 0.86) !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-tag,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-vip {
  position: absolute !important;
  top: 5px !important;
  right: 6px !important;
  height: 16px !important;
  padding: 0 5px !important;
  border-radius: 5px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-tag {
  color: #7c3aed !important;
  background: #ede9fe !important;
  border: 1px solid #d8b4fe !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn.selected .model-tag {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn .model-vip {
  color: #f97316 !important;
  background: #fff7ed !important;
  border: 1px solid #fdba74 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card.gpt-aspect-clarity-card {
  padding: 10px 12px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card > .module-title.step-title-row {
  margin-bottom: 6px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-output-select-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body[data-app-feature="rewrite"] #panelRewrite .standard-output-select-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card .gpt-subfield-title {
  margin: 0 !important;
  color: #64748b !important;
}

body[data-app-feature="rewrite"] #panelRewrite .standard-setting-select {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #334155 !important;
  outline: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .standard-setting-select:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.35) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .standard-setting-select:focus {
  border-color: rgba(124, 58, 237, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin-top: 4px !important;
  border: 1px solid rgba(124, 58, 237, 0.65) !important;
  border-radius: 8px !important;
  background: var(--primary-gradient) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn:disabled {
  border-color: rgba(124, 58, 237, 0.28) !important;
  background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%) !important;
  color: #7c3aed !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.92 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn:not(:disabled):hover {
  filter: brightness(1.03) !important;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.24) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-hint {
  margin: 6px 0 0 !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-grid,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-output-select-grid,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns {
    grid-template-columns: 1fr !important;
  }
}
/* Desktop workbench layout guard: keep side nav, form and result gallery in one row. */
.dynamic-panel[hidden],
.dynamic-panel:not(.dynamic-panel--visible),
[hidden] {
  display: none !important;
}

body:not([data-app-feature="rewrite"]) #rewriteModeLead,
body:not([data-app-feature="rewrite"]) #rewriteDualPanel,
body:not([data-app-feature="rewrite"]) #rewriteParamsRow,
body:not([data-app-feature="rewrite"]) #rewriteSubmitBtn,
body:not([data-app-feature="rewrite"]) .rewrite-submit-hint,
body:not([data-app-feature="rewrite"]) .rewrite-env-banner,
body:not([data-app-feature="rewrite"]) .rewrite-dual-panel,
body:not([data-app-feature="rewrite"]) .rewrite-params-row,
body:not([data-app-feature="rewrite"]) .rewrite-param-group,
body:not([data-app-feature="rewrite"]) .rewrite-submit-btn {
  display: none !important;
}

/* Require :not([hidden]) so initial HTML [hidden] is not pierced by feature attr alone. */
body[data-app-feature="operation-center"] #panelOperationCenter.operation-center-panel:not([hidden]) {
  display: block !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-card,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card {
  padding: 10px 12px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .module-title.step-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 18px !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .step-title-main,
body[data-app-feature="operation-center"] #panelOperationCenter .section-step-label {
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .step-inline-hint {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-empty {
  display: flex !important;
  min-height: 104px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px dashed #e4e9f2 !important;
  border-radius: 7px !important;
  color: #64748b !important;
  text-align: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-empty[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-list[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-validation-message[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb {
  position: relative !important;
  min-width: 0 !important;
  height: 94px !important;
  overflow: hidden !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  cursor: grab !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb.is-dragging {
  opacity: 0.48 !important;
  cursor: grabbing !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb.is-drop-target {
  border-color: rgba(124, 58, 237, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb span,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb button {
  position: absolute !important;
  z-index: 2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb span {
  left: 5px !important;
  bottom: 5px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.68) !important;
  color: #fff !important;
  font-size: 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb em {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  z-index: 2 !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #7c3aed !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-thumb button {
  top: 5px !important;
  right: 5px !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.68) !important;
  color: #fff !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-message-input {
  width: 100% !important;
  min-height: 104px !important;
  padding: 10px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-message-input:focus {
  border-color: rgba(124, 58, 237, 0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-quick-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-quick-row button,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-secondary-action {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-quick-row button:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-secondary-action:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: #faf5ff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-validation-message {
  margin: 8px 0 0 !important;
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-analyze-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 10px !important;
  border-radius: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(250, 245, 255, 0.74) 0%, #fff 48%) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-kicker {
  display: block !important;
  margin-bottom: 2px !important;
  color: #8b5cf6 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card h3,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-assets-block h4 {
  margin: 0 !important;
  color: #0f172a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-status-pill {
  flex: 0 0 auto !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-status-pill--ok {
  background: #ecfdf5 !important;
  color: #047857 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-status-pill--warn {
  background: #fff7ed !important;
  color: #c2410c !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-summary {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-summary--lite {
  color: #1e293b !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-footnote {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-card__head--lite h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block--lite {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  font-size: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-actions--lite {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-actions--lite .ops-secondary-action--text {
  margin-right: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-actions--lite .ops-confirm-action {
  min-width: 112px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--lite {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--lite .ops-confirm-meta__cost {
  grid-column: 1 / -1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-summary--compact {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-guardrail-note--compact {
  margin: 8px 0 0 !important;
  font-size: 10px !important;
  color: var(--text-tertiary, #64748b) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--essential {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--essential span {
  text-align: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--essential b {
  font-size: 10px !important;
  color: var(--text-tertiary, #64748b) !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--essential span {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding: 10px 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--simple {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta--simple span:nth-child(4) {
  grid-column: 1 / -1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta span {
  min-width: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta b {
  display: block !important;
  margin-bottom: 2px !important;
  color: #0f172a !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-choice-panel {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(248, 245, 255, 0.82) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-choice-panel b {
  color: #0f172a !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-choice-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-choice-chip {
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-choice-chip.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-choice-chip:hover:not(.active) {
  background: #faf5ff !important;
  border-color: rgba(124, 58, 237, 0.32) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-assets-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-assets-block h4 {
  font-size: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 7px !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row img {
  width: 54px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row__body {
  min-width: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row__top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row strong {
  color: #0f172a !important;
  font-size: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row p,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-assets,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-guardrail-block {
  margin: 4px 0 0 !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-role-select {
  max-width: 138px !important;
  height: 30px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-guardrail-block {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 7px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block {
  background: #fff7ed !important;
  color: #9a3412 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-fill-chip {
  grid-column: 2 !important;
  justify-self: start !important;
  max-width: 100% !important;
  margin-top: 6px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(234, 88, 12, 0.18) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #9a3412 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-fill-chip:hover {
  border-color: rgba(234, 88, 12, 0.36) !important;
  background: #fff7ed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-cta-chip {
  grid-column: 2 !important;
  justify-self: start !important;
  max-width: 100% !important;
  margin-top: 6px !important;
  margin-right: 6px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 999px !important;
  background: #7c3aed !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-upload-cta-chip:hover {
  background: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block--questions {
  background: #f8f5ff !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-guardrail-block {
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-guardrail-note {
  margin: -2px 0 0 !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block b,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-guardrail-block b {
  color: #0f172a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-secondary-action {
  width: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-action {
  min-height: 36px !important;
  border-radius: 7px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter button:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

@media (min-width: 1024px) {
  .page-container.app-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack {
    flex: 0 0 216px !important;
    width: 216px !important;
    min-width: 216px !important;
    height: 100% !important;
    transition: width 180ms ease, flex-basis 180ms ease, min-width 180ms ease, padding 180ms ease !important;
  }

  .page-container.app-container > .main-area {
    flex: 0 0 480px !important;
    width: 480px !important;
    min-width: 468px !important;
    max-width: 500px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .page-container.app-container > #resultPanel.result-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

@media (min-width: 1024px) {
  .sidebar-top-chrome .sidebar-collapse-toggle--inline {
    display: inline-flex !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    padding: 12px 8px !important;
    gap: 8px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-collapse-toggle__text,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group-title,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn__label,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-tag,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-divider,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-use-cases-dock,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-wallet {
    display: none !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot.sidebar-nav {
    padding: 8px 6px !important;
    border-radius: 8px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group + .nav-group,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group + .nav-divider + .nav-group {
    margin-top: 8px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group-header {
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 !important;
    margin: 0 0 5px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    opacity: 0.52 !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn {
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 auto 6px !important;
    border-radius: 8px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn__icon {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
}

/* Result panel visibility guard after layout repair. */
#resultPanel > .commerce-mode-switch,
#resultPanel > .result-toolbar,
#resultPanel > .result-panel__title-row,
#resultPanel > .result-gallery-body,
#resultPanel .result-empty-state,
#resultPanel .result-inspiration-bar {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

#resultPanel > .commerce-mode-switch {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  margin-bottom: 8px !important;
}

@media (max-width: 900px) {
  #resultPanel > .commerce-mode-switch--result {
    display: flex !important;
    overflow-x: auto !important;
  }

  #resultPanel > .commerce-mode-switch--result button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 88px !important;
  }
}

#resultPanel > .result-toolbar {
  display: flex !important;
  margin-top: 0 !important;
}

#resultPanel > .result-panel__title-row {
  display: flex !important;
}

#resultPanel > .result-gallery-body {
  display: flex !important;
}

.result-retention-notice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  box-shadow: 0 1px 2px rgba(146, 64, 14, 0.08);
}

.result-retention-notice:hover,
.result-retention-notice:focus-visible,
.result-retention-notice.is-open {
  border-color: rgba(245, 158, 11, 0.58);
  background: #fef3c7;
  color: #78350f;
}

.result-retention-notice::after {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 80;
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid rgba(146, 64, 14, 0.16);
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, -2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  white-space: normal;
}

.result-retention-notice::before {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  z-index: 81;
  width: 8px;
  height: 8px;
  background: #111827;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity 0.16s ease;
}

.result-retention-notice:hover::after,
.result-retention-notice:focus-visible::after,
.result-retention-notice.is-open::after,
.result-retention-notice:hover::before,
.result-retention-notice:focus-visible::before,
.result-retention-notice.is-open::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.result-retention-notice:hover::before,
.result-retention-notice:focus-visible::before,
.result-retention-notice.is-open::before {
  transform: translateX(-50%) rotate(45deg);
}

#resultToolbar .toolbar-btn:disabled[data-disabled-reason] {
  position: relative;
}

#resultToolbar .toolbar-btn:disabled[data-disabled-reason]::after {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 70;
  width: max-content;
  max-width: 220px;
  padding: 7px 9px;
  border-radius: 7px;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  content: attr(data-disabled-reason);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  white-space: normal;
}

#resultToolbar .toolbar-btn:disabled[data-disabled-reason]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 1024px) {
  #resultPanel.result-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    display: flex !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }
}

/* Phase 5 regression fixes: keep main-image CTA visible and pending cards horizontal on desktop. */
body[data-app-feature="main-image"] .page-container.app-container {
  align-items: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body[data-app-feature="main-image"] .main-area {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body[data-app-feature="main-image"] #mainGenerateSticky.main-generate-sticky {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  background: transparent !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Codex fix 2026-05-18: align rewrite panel with the other function cards. */
body[data-app-feature="rewrite"] #panelRewrite .rewrite-mode-lead {
  margin: 0 0 10px !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-panel {
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-grid {
  gap: 10px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__head.step-title-row,
body[data-app-feature="rewrite"] #panelRewrite .module-title.step-title-row {
  margin: 0 0 8px !important;
  min-height: 20px !important;
}

/* Rewrite upload shell: see styles/upload-zone-unify.css */
body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone {
  border-color: var(--border-color) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group {
  margin: 0 0 10px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group--span-all,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card.gpt-aspect-clarity-card {
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 10px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group--output .rewrite-aspect-resolution-card.gpt-aspect-clarity-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-copy-textarea {
  min-height: 58px !important;
  max-height: 86px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn {
  min-height: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  border-radius: 8px !important;
}

/* Codex fix 2026-05-19: align rewrite strength cards with model-card buttons. */
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btns {
  gap: 8px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 6px 8px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn:hover:not(.active) {
  border-color: #c4b5fd !important;
  background: #faf5ff !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active {
  border-color: #8b5cf6 !important;
  background: var(--primary-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__t {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__s {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 10px !important;
  line-height: 1.14 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active .ratio-btn__s {
  color: rgba(255, 255, 255, 0.86) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(124, 58, 237, 0.65) !important;
  border-radius: 8px !important;
  background: var(--primary-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18) !important;
  opacity: 1 !important;
}

.modal-backdrop.recharge-modal-overlay.visible {
  z-index: 1400;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.recharge-modal-overlay .api-key-modal {
  width: min(960px, 96vw) !important;
  max-width: 960px !important;
  max-height: min(92vh, 720px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.recharge-modal-overlay .api-key-modal__head {
  padding: 16px 40px 12px 16px !important;
}

.recharge-modal-overlay .api-key-modal__body {
  padding: 14px 16px 16px !important;
  gap: 12px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.recharge-modal-overlay .manual-recharge-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(230px, 1fr) minmax(210px, 0.92fr) !important;
  gap: 12px !important;
}

.recharge-modal-overlay .manual-recharge-col {
  padding: 12px !important;
}

.recharge-modal-overlay .api-key-panel__lead {
  font-size: 12px !important;
  margin-bottom: 8px !important;
}

.recharge-modal-overlay .api-key-plans--stack .plan-item {
  min-height: 0 !important;
  padding: 9px 64px 9px 12px !important;
}

.recharge-modal-overlay .recharge-qr-box--service {
  width: 138px !important;
  height: 138px !important;
  margin-bottom: 10px !important;
  padding: 8px !important;
}

@media (max-width: 768px) {
  .modal-backdrop.visible:not(.site-notice-center-backdrop) {
    align-items: flex-start;
    padding: 8px;
    overflow-y: auto;
  }

  .key-modal,
.recharge-modal-overlay .api-key-modal,
.generation-history-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 8px !important;
  }

  .key-modal,
.recharge-modal-overlay .api-key-modal {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .recharge-modal-overlay .api-key-modal__body,
.generation-history-modal__body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .recharge-modal-overlay .manual-recharge-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .recharge-modal-overlay .api-key-plans--stack .plan-item {
    padding: 10px 12px !important;
  }

  .api-key-modal__head,
.generation-history-modal__head {
    flex-shrink: 0;
  }

  .generation-history-bulkbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .generation-history-bulkbar__btn {
    width: 100%;
  }
}

/* Codex fix 2026-05-19: keep selection blocks equal-width regardless of label length. */
.sidebar-nav .nav-btn {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  box-sizing: border-box;
}

.sidebar-nav .nav-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-area #panelStandard #modelBtns.model-btns,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns,
.matting-model-btns,
.matting-tool-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.main-area #panelStandard #modelBtns.model-btns .model-btn,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.model-btns .model-btn,
.matting-model-btn,
.matting-tool-btn {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Codex fix 2026-05-23: responsive result cards and mobile-only full nav labels. */
#resultPanel .result-grid,
#resultGrid.result-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: start !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  overflow-x: hidden !important;
}

#resultPanel .result-card:not(.result-fail),
#resultGrid.result-grid .result-card:not(.result-fail),
body[data-app-feature="poster"] #resultPanel .result-card:not(.result-fail),
body[data-app-feature="detail-page"] #resultPanel .result-card:not(.result-fail),
body[data-app-feature="matting-refine"] #resultPanel .result-card:not(.result-fail),
body[data-app-feature="image-edit"] #resultPanel .result-card:not(.result-fail) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

@media (min-width: 1024px) and (max-width: 1380px) {
  #resultPanel .result-grid,
#resultGrid.result-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  .page-container.app-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  .sidebar--stack .sidebar-nav.sidebar-card,
#sidebarMenuRoot.sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #sidebarMenuRoot .nav-section,
#sidebarMenuRoot .nav-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-width: max-content !important;
  }

  #sidebarMenuRoot .module-title,
#sidebarMenuRoot .nav-group-header,
#sidebarMenuRoot .nav-divider {
    display: none !important;
  }

  #sidebarMenuRoot .nav-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: none !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-grid !important;
    grid-template-columns: 20px auto auto !important;
    justify-content: start !important;
    gap: 8px !important;
    scroll-snap-align: start;
  }

  #sidebarMenuRoot .nav-btn__label {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  #sidebarMenuRoot .nav-tag {
    display: inline-flex !important;
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  .sidebar-footer-credits {
    margin-top: 8px !important;
  }

  #resultPanel .result-grid,
#resultGrid.result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 430px) {
  #sidebarMenuRoot .nav-btn {
    min-width: 122px !important;
    height: 44px !important;
  }

  #sidebarMenuRoot .nav-btn__label {
    font-size: 12px !important;
  }

  #resultPanel .result-grid,
#resultGrid.result-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final sidebar active-state emphasis: keep the chosen feature visibly selected. */
#sidebarMenuRoot .nav-btn.active,
#sidebarMenuRoot .nav-group .nav-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(124, 58, 237, 0.13) 58%, rgba(251, 113, 133, 0.14) 100%) !important;
  color: #5b21b6 !important;
  border-color: rgba(139, 92, 246, 0.34) !important;
  border-left-color: #7c3aed !important;
  outline: 2px solid rgba(167, 139, 250, 0.22) !important;
  outline-offset: -2px !important;
  box-shadow: 0 7px 18px rgba(124, 58, 237, 0.17), 0 0 0 1px rgba(167, 139, 250, 0.18) inset !important;
  transform: translateX(1px) !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__label,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
  color: #5b21b6 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 1px rgba(124, 58, 237, 0.12) !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__icon,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon {
  color: #7c3aed !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  transform: scale(1.16) !important;
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.38)) !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__icon .lucide-nav-svg,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon .lucide-nav-svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.4 !important;
}

@media (max-width: 900px) {
  #sidebarMenuRoot .nav-btn.active,
#sidebarMenuRoot .nav-group .nav-btn.active {
    transform: none !important;
    box-shadow: 0 5px 14px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(167, 139, 250, 0.15) inset !important;
  }

  #sidebarMenuRoot .nav-btn.active .nav-btn__label,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
    font-size: 13px !important;
  }

  #sidebarMenuRoot .nav-btn.active .nav-btn__icon,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    transform: scale(1.1) !important;
  }
}

/* Sidebar group hierarchy refresh 2026-06-03 */
#sidebarMenuRoot.sidebar-nav {
  gap: 10px;
}

#sidebarMenuRoot .nav-group {
  padding: 8px 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

#sidebarMenuRoot .nav-group + .nav-divider {
  display: none;
}

#sidebarMenuRoot .nav-group-header {
  min-height: 30px;
  margin: 0 0 8px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

#sidebarMenuRoot .nav-group-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#sidebarMenuRoot .nav-group-icon .lucide-nav-svg {
  width: 14px;
  height: 14px;
}

#sidebarMenuRoot .nav-group-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebarMenuRoot .nav-group--flat {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.06), rgba(255, 255, 255, 0.78));
  border-color: rgba(124, 58, 237, 0.16);
}

#sidebarMenuRoot .nav-group--flat .nav-group-header {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  color: #6d28d9;
}

#sidebarMenuRoot .nav-group[data-nav-group="常用工具"] {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.06), rgba(255, 255, 255, 0.78));
  border-color: rgba(6, 182, 212, 0.18);
}

#sidebarMenuRoot .nav-group[data-nav-group="常用工具"] .nav-group-header {
  background: linear-gradient(135deg, #cffafe, #ecfeff);
  color: #0e7490;
}

#sidebarMenuRoot .nav-group[data-nav-group="我的资产"] {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.07), rgba(255, 255, 255, 0.8));
  border-color: rgba(245, 158, 11, 0.2);
}

#sidebarMenuRoot .nav-group[data-nav-group="我的资产"] .nav-group-header {
  background: linear-gradient(135deg, #fef3c7, #fff7ed);
  color: #b45309;
}

#sidebarMenuRoot .nav-group[data-nav-group="账户算力"] {
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.05), rgba(255, 255, 255, 0.78));
  border-color: rgba(148, 163, 184, 0.18);
}

#sidebarMenuRoot .nav-group[data-nav-group="账户算力"] .nav-group-header {
  background: linear-gradient(135deg, #f1f5f9, #ffffff);
  color: #64748b;
}

#sidebarMenuRoot .nav-group .nav-btn {
  min-height: 34px;
  height: 34px;
  margin: 4px 0 0;
  padding: 0 9px;
  border-radius: 8px;
  border-left-width: 1px;
  background: rgba(255, 255, 255, 0.56);
  color: #64748b;
}

#sidebarMenuRoot .nav-group .nav-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
}

#sidebarMenuRoot .nav-group .nav-btn.active {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.22);
  color: #5b21b6;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.1);
}

#sidebarMenuRoot .nav-group .nav-btn__icon {
  opacity: 0.72;
}

#sidebarMenuRoot .nav-group .nav-btn__label {
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
#sidebarMenuRoot .nav-group--flat .nav-btn {
    border-left: 4px solid #8b5cf6 !important;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.12), rgba(255, 255, 255, 0.9)) !important;
  }

#sidebarMenuRoot .nav-group[data-nav-group="常用工具"] .nav-btn {
    border-left: 4px solid #06b6d4 !important;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.12), rgba(255, 255, 255, 0.9)) !important;
  }

#sidebarMenuRoot .nav-group[data-nav-group="我的资产"] .nav-btn {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.13), rgba(255, 255, 255, 0.9)) !important;
  }

#sidebarMenuRoot .nav-group[data-nav-group="账户算力"] .nav-btn {
    border-left: 4px solid #94a3b8 !important;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.1), rgba(255, 255, 255, 0.9)) !important;
  }

  #sidebarMenuRoot .nav-group .nav-btn.active {
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12) !important;
  }
}

/* Codex fix 2026-05-23: prevent narrow desktop result cards from overlapping rows. */
#resultPanel > .result-gallery-body {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

#resultPanel #resultGrid.result-grid,
#resultPanel .result-grid {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  grid-auto-rows: minmax(0, auto) !important;
}

#resultPanel #resultGrid.result-grid .result-card:not(.result-fail),
#resultPanel .result-grid .result-card:not(.result-fail) {
  display: block !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  contain: layout paint;
}

#resultPanel #resultGrid.result-grid .result-card-media,
#resultPanel .result-grid .result-card-media {
  width: 100% !important;
  height: 100% !important;
}

#resultPanel .result-inspiration-bar {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Keep inspiration samples anchored at the bottom of the result panel. */
@media (min-width: 1024px) {
  #resultPanel.result-panel {
    overflow: hidden !important;
  }

  #resultPanel > .result-gallery-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 8px !important;
  }

  #resultPanel .result-inspiration-bar {
    margin-top: auto !important;
    padding-top: 8px !important;
  }

  #resultPanel .result-inspiration-bar__title {
    margin-bottom: 6px !important;
    font-size: 12px !important;
  }

  #resultPanel .result-inspiration-bar__track {
    grid-auto-columns: minmax(152px, 180px) !important;
    gap: 8px !important;
    padding: 1px 2px 6px !important;
  }

  #resultPanel .result-inspiration-card {
    height: 164px !important;
    min-height: 164px !important;
    border-radius: 8px !important;
  }

  #resultPanel .result-inspiration-card__body {
    gap: 3px !important;
    padding: 34px 8px 7px !important;
  }

  #resultPanel .result-inspiration-card__label {
    font-size: 12px !important;
  }

  #resultPanel .result-inspiration-card__summary {
    font-size: 10px !important;
  }

  #resultPanel .result-inspiration-card__meta {
    min-height: 16px !important;
    margin-top: 1px !important;
  }

  #resultPanel .result-inspiration-card__tag,
#resultPanel .result-inspiration-card__use {
    font-size: 9px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1380px) {
  #resultPanel #resultGrid.result-grid,
#resultPanel .result-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  #sidebarMenuRoot .nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    grid-template-columns: none !important;
  }

  #sidebarMenuRoot .nav-btn__label {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }
}

/* Codex fix 2026-05-25: mobile top bar, feature map, and result spacing polish. */
@media (max-width: 768px) {
  .top-bar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: visible !important;
    border-bottom-color: rgba(124, 58, 237, 0.14) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  .top-bar-brand {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .brand-wordmark-img {
    width: 116px !important;
    max-width: 42vw !important;
  }

  .top-bar-right {
    display: contents !important;
  }

  .top-bar-service-link,
.top-bar .upgrade-plan-btn,
.key-btn--topbar {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    justify-content: center !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .top-bar-service-link {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .top-bar .balance-pill {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(14, 165, 233, 0.08)) !important;
  }

  .top-bar .balance-pill .balance-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .top-bar .balance-pill .refresh-btn {
    margin-left: auto !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  .top-bar .upgrade-plan-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .key-btn--topbar {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .top-bar .upgrade-plan-btn .top-bar-cta__text--full,
.top-bar-service-link__text--full {
    display: inline !important;
  }

  .top-bar .upgrade-plan-btn .top-bar-cta__text--short,
.top-bar-service-link__text--short {
    display: none !important;
  }

  .key-btn--topbar {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .page-container.app-container {
    gap: 10px !important;
    padding-top: 10px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack {
    padding: 8px 12px 0 !important;
  }

  body[data-app-feature="main-image"] .main-area {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-app-feature="main-image"] #mainGenerateSticky.main-generate-sticky {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone .add-image-btn .upload-text {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 260px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) #uploadZone .add-image-btn .upload-text > span {
    display: block !important;
    width: 100% !important;
  }

  .sidebar--stack .sidebar-nav.sidebar-card,
#sidebarMenuRoot.sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(14, 165, 233, 0.06)) !important;
    border-color: rgba(124, 58, 237, 0.16) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
  }

  #sidebarMenuRoot .nav-section,
#sidebarMenuRoot .nav-group {
    display: contents !important;
    min-width: 0 !important;
  }

  #sidebarMenuRoot .module-title,
#sidebarMenuRoot .nav-group-header,
#sidebarMenuRoot .nav-divider {
    display: none !important;
  }

  #sidebarMenuRoot .nav-btn {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-left-width: 1px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
  }

  #sidebarMenuRoot .nav-btn.active {
    color: #6d28d9 !important;
    border-color: rgba(124, 58, 237, 0.34) !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(255, 255, 255, 0.94)) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12) !important;
  }

  #sidebarMenuRoot .nav-btn__label {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  #sidebarMenuRoot .nav-tag {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    max-width: 42px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar-footer-credits {
    margin-top: 8px !important;
  }

  .vip-card.vip-card--quiet {
    margin-top: 10px !important;
  }

  .page-container.app-container > #resultPanel.result-panel,
#resultPanel.result-panel {
    padding: 12px !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  #resultPanel > .result-toolbar {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 8px 0 10px !important;
  }

  #resultPanel > .result-panel__title-row {
    margin-bottom: 10px !important;
  }

  #resultPanel .result-empty-state {
    min-height: 250px !important;
  }

  #resultPanel .result-inspiration-bar {
    margin-top: 10px !important;
  }
}

@media (max-width: 430px) {
  .top-bar {
    padding: 8px 10px !important;
  }

  .brand-wordmark-img {
    width: 108px !important;
    max-width: 48vw !important;
  }

  .top-bar-right {
    gap: 7px !important;
  }

  .top-bar-service-link,
.top-bar .upgrade-plan-btn,
.key-btn--topbar {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .top-bar .balance-pill {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 12px !important;
  }

  .sidebar--stack .sidebar-nav.sidebar-card,
#sidebarMenuRoot.sidebar-nav {
    gap: 7px !important;
    padding: 8px !important;
  }

  #sidebarMenuRoot .nav-btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  #sidebarMenuRoot .nav-btn__label {
    font-size: 11px !important;
  }

  #sidebarMenuRoot .nav-tag {
    max-width: 36px !important;
  }
}

/* Operation center as a real chat surface. Scoped so other feature panels keep their form layout. */
body[data-app-feature="operation-center"] #panelOperationCenter.operation-center-panel {
  height: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #edf1f7 !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-head h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-new-chat-btn {
  width: auto !important;
  min-height: 32px !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-head-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-back-btn {
  width: auto !important;
  min-height: 32px !important;
  white-space: nowrap !important;
}

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

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-shell:not([hidden]),
body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell:not([hidden]),
body[data-app-feature="operation-center"] #panelOperationCenter .ops-shell:not([hidden]) {
  animation: opsShellFadeIn 0.2s ease-out;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 18px 18px 20px !important;
  overflow-y: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 40px) !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 88% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--assistant {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--user {
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--fallback .ops-chat-bubble--assistant {
  border: 1px solid #f5a8a8 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-fallback-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #b91c1c;
  background: #fee2e2;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__content--fallback p {
  color: #991b1b !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-avatar {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-avatar--assistant {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eef2ff !important;
  color: #6366f1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(99, 102, 241, 0.14) !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-avatar--assistant span {
  display: block !important;
  line-height: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-avatar--user {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ddd6fe !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__head {
  margin-bottom: 4px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__content p {
  margin: 0 !important;
  white-space: pre-line !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble p {
  margin: 0 !important;
  white-space: pre-line !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble strong,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__head strong {
  display: block !important;
  margin-bottom: 0 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__meta {
  display: block !important;
  margin-top: 6px !important;
  color: #8b5cf6 !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble span {
  display: block !important;
  margin-top: 7px !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--generation {
  max-width: 96% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__head--generation {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__head--generation strong {
  margin: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--assistant .ops-chat-avatar--assistant {
  order: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--assistant .ops-chat-bubble--assistant {
  order: 2 !important;
  align-self: auto !important;
  border: 1px solid #e8edf5 !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 14px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble--user {
  align-self: auto !important;
  order: 1 !important;
  border: 1px solid rgba(167, 139, 250, 0.42) !important;
  border-top-right-radius: 4px !important;
  border-top-left-radius: 14px !important;
  background: #ede9fe !important;
  color: #5b21b6 !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--user .ops-chat-avatar--user {
  order: 2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble--user p {
  color: #5b21b6 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble--user span {
  color: #8b5cf6 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--typing .ops-chat-typing-body {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 14px !important;
  border-top-left-radius: 4px !important;
  background: #fff !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08) !important;
  animation: opsTypingPulse 1.8s ease-in-out infinite !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--typing {
  align-self: flex-start !important;
  margin-right: auto !important;
  max-width: 88% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__copy {
  display: grid !important;
  gap: 2px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__main {
  color: #475569 !important;
  font-weight: 650 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__sub {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  min-width: 27px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__dots i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #7c3aed !important;
  opacity: 0.42 !important;
  animation: opsTypingDotJump 0.9s ease-in-out infinite !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__dots i:nth-child(2) {
  animation-delay: 0.12s !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__dots i:nth-child(3) {
  animation-delay: 0.24s !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--typing .ops-chat-typing-body {
  min-width: 238px !important;
  padding: 12px 14px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__timer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
}

@keyframes opsTypingPulse {
  0%,
100% {
    transform: translateY(0);
    border-color: #e5e9f2;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08);
  }
  50% {
    transform: translateY(-1px);
    border-color: #c4b5fd;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.14);
  }
}

@keyframes opsTypingDotJump {
  0%,
80%,
100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-4px);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--typing .ops-chat-typing-body,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing__dots i {
    animation: none !important;
  }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row#opsChatTyping[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-typing[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages > .ops-confirm-card {
  align-self: flex-start !important;
  width: min(720px, 92%) !important;
  max-width: 92% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer {
  margin: 0 16px 16px !important;
  padding: 10px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer .ops-message-input {
  min-height: 58px !important;
  max-height: 140px !important;
  padding: 8px 8px 4px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  resize: none !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer .ops-message-input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer .ops-analyze-btn {
  min-height: 36px !important;
  margin: 0 !important;
  border-radius: 999px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-model-select {
  width: 100% !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-model-note {
  margin: 8px 0 0 !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-quick-card .ops-quick-row {
  margin-top: 0 !important;
}

/* Operation center owns canvas/chat results; hide legacy global result panel on all breakpoints. */
body[data-app-feature="operation-center"] .page-container.app-container > #resultPanel.result-panel {
  display: none !important;
}

body[data-app-feature="operation-center"] #generationHistoryBtn {
  display: none !important;
}

@media (min-width: 1024px) {
  body[data-app-feature="operation-center"] .page-container.app-container > .main-area {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
    min-height: 560px !important;
  }
}

/* Operation center polish: centered GPT-like composer and taller conversation stage. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-layout {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 16px !important;
  min-height: calc(100vh - 132px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  min-height: calc(100vh - 132px) !important;
  border-radius: 14px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages {
  padding: 18px 22px 16px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer {
  width: min(820px, calc(100% - 52px)) !important;
  margin: 0 auto 22px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.10),
    0 0 0 4px rgba(124, 58, 237, 0.035) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer .ops-message-input {
  min-height: 42px !important;
  max-height: 96px !important;
  padding: 5px 9px 3px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer .ops-analyze-btn {
  min-height: 36px !important;
  width: 92px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.25) !important;
}

/* Operation center chat mode: keep the main function list, expand chat inside the work area. */
body[data-app-feature="operation-center"] .page-container.app-container > .main-area {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-inline: 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter.operation-center-panel {
  height: calc(100vh - 96px) !important;
  min-height: 620px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-layout {
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 72%, rgba(124, 58, 237, 0.055), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-head {
  min-height: 54px !important;
  padding: 12px 18px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(12px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-head h3 {
  font-size: 15px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages {
  align-items: center !important;
  padding: 52px 24px 24px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero {
  width: min(760px, 100%) !important;
  margin: auto 0 22px !important;
  text-align: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero h2 {
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: clamp(26px, 3.2vw, 42px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero p {
  max-width: 680px !important;
  margin: 0 auto 18px !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero .ops-quick-row {
  justify-content: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages > .ops-confirm-card {
  width: auto !important;
  max-width: 88% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--assistant {
  align-self: flex-start !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-row--user {
  align-self: flex-end !important;
  margin-left: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages > .ops-confirm-card {
  width: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-composer-upload-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-composer-upload-list[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-composer-upload-list .ops-upload-thumb {
  width: 74px !important;
  min-height: 82px !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-drop-overlay {
  position: absolute !important;
  inset: 12px !important;
  z-index: 12 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed rgba(124, 58, 237, 0.48) !important;
  border-radius: 16px !important;
  background: rgba(248, 250, 252, 0.86) !important;
  color: #4c1d95 !important;
  text-align: center !important;
  pointer-events: none !important;
  backdrop-filter: blur(10px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-drop-overlay strong {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 20px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-drop-overlay span {
  color: #64748b !important;
  font-size: 13px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main.drag-over .ops-drop-overlay {
  display: flex !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-model-select--hidden {
  display: none !important;
}

/* Operation center infinite canvas mode. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 440px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #f8fafc !important;
}

/* Unified system: allow collapsing the right chat pane without switching "simple/advanced" modes. */
body[data-app-feature="operation-center"] #panelOperationCenter.is-ops-chat-collapsed .ops-chat-main {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter.is-ops-chat-collapsed .ops-chat-pane {
  display: none !important;
}

/* Phone: always show the dialog; desktop collapse class must not hide it. */
@media (max-width: 768px) {
  body[data-app-feature="operation-center"] #panelOperationCenter.is-ops-chat-collapsed .ops-chat-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(280px, 44vh) minmax(0, 1fr) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter.is-ops-chat-collapsed .ops-chat-pane {
    display: grid !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-toggle-btn {
    display: none !important;
  }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-pane,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-pane {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  position: relative !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane {
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-head,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 52px !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid #edf1f7 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  position: relative !important;
  z-index: 32 !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-head h3,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-head h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* Canvas dock: three compact groups — add, view, and resources. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-view-picker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 3px !important;
  border-left: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.28) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-template-menu__save {
  width: calc(100% - 12px) !important;
  margin: 6px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #5b21b6 !important;
  font-weight: 800 !important;
  text-align: left !important;
  background: #f5f3ff !important;
}

/* Sidebar: primary workspaces are one flat list; account remains in the wallet. */
body #sidebarMenuRoot .nav-group--flat {
  display: grid !important;
  gap: 6px !important;
}

body #sidebarMenuRoot .nav-group--flat .nav-btn {
  margin: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools span {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button {
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  color: #7c3aed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools .ops-canvas-tool-wide {
  min-width: 72px !important;
  color: #5b21b6 !important;
}

/* Make 「+ 组」 easier to spot among canvas tools. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools #opsCanvasAddGroupBtn {
  min-width: 76px !important;
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: #f3e8ff !important;
  color: #5b21b6 !important;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools #opsCanvasAddGroupBtn:hover {
  background: #ede9fe !important;
  border-color: rgba(124, 58, 237, 0.58) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools #opsCanvasReset {
  min-width: 52px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  background-color: #f8fafc !important;
  background-image: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport.is-panning {
  cursor: grabbing !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-surface {
  position: relative !important;
  width: 2200px !important;
  height: 1500px !important;
  transform-origin: 0 0 !important;
  will-change: transform !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-cards {
  position: absolute !important;
  inset: 0 !important;
  /* Nodes paint above groups, but the full-bleed layer must not eat group hits. */
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-layer {
  position: absolute !important;
  inset: 0 !important;
  /* Groups stay under nodes visually; empty/header areas remain editable. */
  z-index: 1 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame {
  position: absolute !important;
  box-sizing: border-box !important;
  border: 2px dashed rgba(124, 58, 237, 0.60) !important;
  border-radius: 12px !important;
  background: rgba(124, 58, 237, 0.085) !important;
  pointer-events: auto !important;
  overflow: visible !important;
  min-width: 360px !important;
  min-height: 280px !important;
  --ops-group-ui-scale: 1;
  --ops-group-head-h: 44px;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-selected {
  border-style: solid !important;
  border-width: 2.5px !important;
  border-color: rgba(124, 58, 237, 0.78) !important;
  box-shadow:
    0 0 0 6px rgba(124, 58, 237, 0.12),
    0 18px 40px rgba(76, 29, 149, 0.08) !important;
  z-index: 3 !important;
}

/* Empty frames stay under nodes; keep a stable selector for contract/smoke. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-empty {
  border-style: dashed !important;
}

/* Whole-group collapse: shrink to header and hide body/resize chrome. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-collapsed {
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-collapsed .ops-canvas-group-frame__body,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-collapsed .ops-canvas-group-frame__edge,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-collapsed .ops-canvas-group-frame__resize {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-group-collapsed-member {
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-running {
  border-color: rgba(37, 99, 235, 0.65) !important;
  box-shadow:
    0 0 0 2px rgba(37, 99, 235, 0.16),
    0 12px 28px rgba(37, 99, 235, 0.1) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__head {
  display: flex !important;
  align-items: center !important;
  gap: calc(8px * var(--ops-group-ui-scale, 1)) !important;
  min-height: var(--ops-group-head-h, 44px) !important;
  padding: calc(8px * var(--ops-group-ui-scale, 1)) calc(12px * var(--ops-group-ui-scale, 1)) !important;
  background: rgba(237, 229, 250, 0.96) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.24) !important;
  border-radius: 12px 12px 0 0 !important;
  cursor: move !important;
  user-select: none !important;
}

/* Reserve five full Chinese characters plus padding at every canvas scale. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__title {
  flex: 0 0 auto !important;
  width: 6em !important;
  max-width: none !important;
  min-width: 6em !important;
  height: calc(24px * var(--ops-group-ui-scale, 1)) !important;
  border: 0 !important;
  background: transparent !important;
  font-size: calc(13px * var(--ops-group-ui-scale, 1)) !important;
  font-weight: 600 !important;
  line-height: calc(24px * var(--ops-group-ui-scale, 1)) !important;
  color: rgba(76, 29, 149, 0.92) !important;
  padding: 0 calc(4px * var(--ops-group-ui-scale, 1)) !important;
  margin: 0 !important;
  outline: none !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  cursor: text !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__title:focus {
  max-width: calc(14em * var(--ops-group-ui-scale, 1)) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.28) !important;
  border-radius: 4px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__spacer {
  flex: 1 1 auto !important;
  min-width: calc(12px * var(--ops-group-ui-scale, 1)) !important;
  align-self: stretch !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__meta {
  flex: 0 0 auto !important;
  font-size: calc(12px * var(--ops-group-ui-scale, 1)) !important;
  color: rgba(100, 116, 139, 0.92) !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__action {
  flex: 0 0 auto !important;
  border: 1px solid rgba(124, 58, 237, 0.4) !important;
  background: #f3e8ff !important;
  color: #5b21b6 !important;
  border-radius: calc(7px * var(--ops-group-ui-scale, 1)) !important;
  font-size: calc(12.5px * var(--ops-group-ui-scale, 1)) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: calc(8px * var(--ops-group-ui-scale, 1)) calc(10px * var(--ops-group-ui-scale, 1)) !important;
  min-height: calc(30px * var(--ops-group-ui-scale, 1)) !important;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.1) !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-compact-actions .ops-canvas-group-frame__title {
  width: 6em !important;
  min-width: 6em !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-compact-actions .ops-canvas-group-frame__action {
  padding: calc(6px * var(--ops-group-ui-scale, 1)) calc(8px * var(--ops-group-ui-scale, 1)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__action:hover {
  background: #ede9fe !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__action--primary {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__action--primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__action:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__body {
  position: absolute !important;
  inset: var(--ops-group-head-h, 44px) 0 0 0 !important;
  pointer-events: auto !important;
  cursor: grab !important;
  border-radius: 0 0 12px 12px !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport.is-panning .ops-canvas-group-frame__body {
  cursor: grabbing !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__hint {
  position: absolute !important;
  left: calc(16px * var(--ops-group-ui-scale, 1)) !important;
  top: calc(14px * var(--ops-group-ui-scale, 1)) !important;
  margin: 0 !important;
  font-size: calc(12px * var(--ops-group-ui-scale, 1)) !important;
  color: rgba(100, 116, 139, 0.78) !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__budget {
  position: absolute !important;
  left: calc(16px * var(--ops-group-ui-scale, 1)) !important;
  top: calc(14px * var(--ops-group-ui-scale, 1)) !important;
  margin: 0 !important;
  max-width: calc(220px * var(--ops-group-ui-scale, 1)) !important;
  font-size: calc(12px * var(--ops-group-ui-scale, 1)) !important;
  color: rgba(100, 116, 139, 0.88) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__hint + .ops-canvas-group-frame__budget {
  top: calc(34px * var(--ops-group-ui-scale, 1)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__resize {
  position: absolute !important;
  right: calc(-7px * var(--ops-group-ui-scale, 1)) !important;
  bottom: calc(-7px * var(--ops-group-ui-scale, 1)) !important;
  width: calc(18px * var(--ops-group-ui-scale, 1)) !important;
  height: calc(18px * var(--ops-group-ui-scale, 1)) !important;
  padding: 0 !important;
  border: 2px solid rgba(124, 58, 237, 0.85) !important;
  border-radius: calc(5px * var(--ops-group-ui-scale, 1)) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
  cursor: nwse-resize !important;
  z-index: 4 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__edge {
  position: absolute !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 3 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__edge--e {
  top: var(--ops-group-head-h, 44px) !important;
  right: calc(-8px * var(--ops-group-ui-scale, 1)) !important;
  width: calc(16px * var(--ops-group-ui-scale, 1)) !important;
  bottom: calc(14px * var(--ops-group-ui-scale, 1)) !important;
  cursor: ew-resize !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame__edge--s {
  left: calc(8px * var(--ops-group-ui-scale, 1)) !important;
  right: calc(14px * var(--ops-group-ui-scale, 1)) !important;
  bottom: calc(-8px * var(--ops-group-ui-scale, 1)) !important;
  height: calc(16px * var(--ops-group-ui-scale, 1)) !important;
  cursor: ns-resize !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-selected .ops-canvas-group-frame__resize,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame:hover .ops-canvas-group-frame__resize {
  opacity: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card {
  position: absolute !important;
  width: 320px !important;
  min-height: 136px !important;
  padding: 14px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
  cursor: move !important;
  /* Ports sit outside the card edge; clipping made them look cut in half. */
  overflow: visible !important;
  user-select: none !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-dragging {
  z-index: 45 !important;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-selected {
  border-color: rgba(124, 58, 237, 0.62) !important;
  box-shadow:
    0 20px 52px rgba(15, 23, 42, 0.13),
    0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

/* Running beats selected: solid blue bar + thick ring (readable when zoomed out). */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-running {
  z-index: 36 !important;
  border: 2px solid #2563eb !important;
  box-shadow:
    inset 6px 0 0 #2563eb,
    0 16px 40px rgba(37, 99, 235, 0.2),
    0 0 0 4px rgba(37, 99, 235, 0.28) !important;
  animation: ops-canvas-card-running-pulse 1.6s ease-out infinite !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-failed {
  z-index: 36 !important;
  border: 2px solid #dc2626 !important;
  box-shadow:
    inset 6px 0 0 #dc2626,
    0 16px 36px rgba(220, 38, 38, 0.14),
    0 0 0 4px rgba(220, 38, 38, 0.2) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-succeeded:not(.is-selected):not(.is-multi-selected) {
  border-color: rgba(5, 150, 105, 0.55) !important;
  box-shadow:
    inset 6px 0 0 #059669,
    0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

@keyframes ops-canvas-card-running-pulse {
  0% {
    box-shadow:
      inset 6px 0 0 #2563eb,
      0 16px 40px rgba(37, 99, 235, 0.22),
      0 0 0 4px rgba(37, 99, 235, 0.34);
  }
  70% {
    box-shadow:
      inset 6px 0 0 #2563eb,
      0 16px 40px rgba(37, 99, 235, 0.12),
      0 0 0 10px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow:
      inset 6px 0 0 #2563eb,
      0 16px 40px rgba(37, 99, 235, 0.2),
      0 0 0 4px rgba(37, 99, 235, 0.28);
  }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--decision {
  width: 350px !important;
  border-color: rgba(124, 58, 237, 0.34) !important;
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--generating-skeleton {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--generating-skeleton .ops-canvas-result-skeleton {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--ops-skeleton-aspect, 1 / 1) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--generating-skeleton .skeleton-img {
  min-height: 0 !important;
  height: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--slot {
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px dashed rgba(124, 58, 237, 0.46) !important;
  border-radius: 6px !important;
  background: rgba(250, 245, 255, 0.84) !important;
  box-shadow: 0 16px 34px rgba(88, 28, 135, 0.1) !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--slot.is-selected {
  border-style: solid !important;
  background: rgba(245, 243, 255, 0.96) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-slot__head {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  top: 8px !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #4c1d95 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-slot__head span {
  color: #7c3aed !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-slot__body {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 48px 12px 46px !important;
  color: #6d28d9 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-slot__aspects {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  height: 28px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-slot__aspects button {
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(124, 58, 237, 0.24) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-slot__aspects button.active {
  border-color: rgba(124, 58, 237, 0.62) !important;
  background: #ede9fe !important;
  color: #4c1d95 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--generating {
  width: 390px !important;
  min-height: 250px !important;
  border-color: rgba(14, 165, 233, 0.38) !important;
  background: #ffffff !important;
  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(14, 165, 233, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--assets {
  width: 310px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--content {
  width: 360px !important;
  border-color: rgba(20, 184, 166, 0.34) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image {
  width: 340px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text {
  min-height: 180px !important;
  padding: 12px 12px 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  background: linear-gradient(180deg, #faf8ff 0%, #ffffff 48%) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-body, body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-body {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 148px !important;
  max-height: 320px !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(248, 250, 252, 0.98) !important;
  color: #0f172a !important;
  font: inherit !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  resize: vertical !important;
  outline: none !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
  touch-action: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-body, body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-body:focus {
  border-color: rgba(124, 58, 237, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-chrome,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-chrome {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  z-index: 2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-body,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-body {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 148px !important;
  max-height: 320px !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(248, 250, 252, 0.98) !important;
  color: #0f172a !important;
  font: inherit !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  resize: vertical !important;
  outline: none !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
  touch-action: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-body:focus,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-body:focus {
  border-color: rgba(124, 58, 237, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-params,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-params,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-params,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-params,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-params {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param select,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param select {
  width: 100% !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-trigger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-trigger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-trigger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-trigger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-trigger {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-trigger__chevron,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-trigger__chevron,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-trigger__chevron,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-trigger__chevron,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-trigger__chevron {
  color: #94a3b8 !important;
  font-size: 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-menu,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-menu,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-menu,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-menu,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-menu {
  position: absolute !important;
  z-index: 40 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-height: 220px !important;
  overflow: auto !important;
  padding: 6px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-menu[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-menu[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-menu[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-menu[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-menu[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-option,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-option,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-option,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-option,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-option {
  appearance: none !important;
  width: 100% !important;
  text-align: left !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-option:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-option.is-active,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-option:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-option.is-active,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-option:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-option.is-active,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-option:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-option.is-active,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-option:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-option.is-active {
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-param-option:disabled,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-param-option:disabled,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-param-option:disabled,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-param-option:disabled,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-param-option:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-tools {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-prompt-text-action,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-prompt-text-action {
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-prompt-text-action:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-prompt-text-action:hover {
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: #f8f5ff !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-action--primary,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-action--primary,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-prompt-text-action--primary,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--primary {
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: #f5f3ff !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-prompt-text-action--danger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-prompt-text-action--danger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--danger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-prompt-text-action--danger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-prompt-text-action--danger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-prompt-text-action--danger {
  border-color: rgba(252, 165, 165, 0.75) !important;
  color: #dc2626 !important;
}

/* Variable node: keep chrome inside the purple card; never strip the shell. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable[data-ops-variable-node="true"] {
  background: #faf5ff !important;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.08) !important;
  overflow: visible !important;
  border: 1px solid rgba(167, 139, 250, 0.5) !important;
  border-radius: 12px !important;
  padding: calc(12px * var(--ops-card-scale, 1)) calc(14px * var(--ops-card-scale, 1)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  min-width: 220px !important;
  min-height: 140px !important;
}

/* Designer node: teal shell; select-only, no edit form. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer[data-ops-designer-node="true"] {
  background: #f0fdfa !important;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.08) !important;
  overflow: visible !important;
  border: 1px solid rgba(45, 212, 191, 0.55) !important;
  border-radius: 12px !important;
  padding: calc(12px * var(--ops-card-scale, 1)) calc(14px * var(--ops-card-scale, 1)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  min-width: 220px !important;
  min-height: 140px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-head {
  display: flex !important;
  align-items: center !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  min-width: 0 !important;
  width: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: calc(13px * var(--ops-card-scale, 1)) !important;
  font-weight: 700 !important;
  color: #0f766e !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-scope {
  flex: 0 0 auto !important;
  font-size: calc(11px * var(--ops-card-scale, 1)) !important;
  font-weight: 600 !important;
  color: #0f766e !important;
  background: rgba(45, 212, 191, 0.18) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-select {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(45, 212, 191, 0.55) !important;
  border-radius: 8px !important;
  padding: calc(8px * var(--ops-card-scale, 1)) calc(10px * var(--ops-card-scale, 1)) !important;
  font-size: calc(12.5px * var(--ops-card-scale, 1)) !important;
  background: #fff !important;
  color: #0f172a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-summary {
  font-size: calc(12px * var(--ops-card-scale, 1)) !important;
  color: #334155 !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-summary p {
  margin: 4px 0 0 !important;
  font-weight: 400 !important;
  color: #64748b !important;
  white-space: pre-wrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-designer-actions,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-node-menu {
  display: flex !important;
  position: relative !important;
  flex-wrap: wrap !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-node-menu .ops-canvas-prompt-text-action {
  height: calc(28px * var(--ops-card-scale, 1)) !important;
  padding: 0 calc(10px * var(--ops-card-scale, 1)) !important;
  font-size: calc(12px * var(--ops-card-scale, 1)) !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-prompt-text-action:hover {
  border-color: rgba(13, 148, 136, 0.45) !important;
  background: #ecfdf5 !important;
  color: #0f766e !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-variable-head {
  display: flex !important;
  align-items: center !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-variable-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: clamp(13px, calc(14px * var(--ops-card-scale, 1)), 16px) !important;
}

/* Switch must stay compact in the head row — never full-width legacy button bar. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-variable-toggle {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  gap: 0 !important;
  margin: 0 !important;
  position: relative !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-variable-scope {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 6.5em !important;
  margin: 0 !important;
  font-size: clamp(11px, calc(12px * var(--ops-card-scale, 1)), 14px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-note-body {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: calc(60px * var(--ops-card-scale, 1)) !important;
  max-height: none !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: calc(10px * var(--ops-card-scale, 1)) !important;
  border: 1px solid rgba(196, 181, 253, 0.9) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font: inherit !important;
  font-size: clamp(13px, calc(14px * var(--ops-card-scale, 1)), 16px) !important;
  line-height: 1.55 !important;
  resize: none !important;
  outline: none !important;
  cursor: text !important;
  flex: 1 1 auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-variable-upload {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-node-menu {
  display: flex !important;
  position: relative !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-node-menu .ops-canvas-prompt-text-action {
  height: calc(28px * var(--ops-card-scale, 1)) !important;
  padding: 0 calc(10px * var(--ops-card-scale, 1)) !important;
  font-size: calc(12px * var(--ops-card-scale, 1)) !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-node-menu {
  display: flex !important;
  position: relative !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  margin-top: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-failure-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-failure-card p {
  margin: 0 !important;
  color: #7f1d1d !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-failure-card p strong {
  color: #991b1b !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-failure-card__sub {
  color: #64748b !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note[data-operation-partial-id] {
  border-color: rgba(248, 113, 113, 0.45) !important;
  background: #fff7f7 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note[data-operation-partial-id] .ops-canvas-node-menu {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
}

/* Compact, transparent memo-style text nodes */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  overflow: visible !important;
  border: 1px solid rgba(203, 213, 225, 0.55) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

/* LLM text node */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text {
  --ops-node-accent: #6d28d9;
  --ops-node-accent-soft: rgba(109, 40, 217, 0.12);
  width: 360px !important;
  min-height: 280px !important;
  padding: 12px 14px 14px 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-left: 3px solid var(--ops-node-accent) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.72) 0%, #ffffff 46%) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-model-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 10px !important;
  font-size: 12px !important;
  color: #64748b !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-model {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 30px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head--llm {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin-bottom: 2px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head-title-row--llm {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head-title-row--llm .ops-canvas-card-title {
  flex: 1 1 auto !important;
  max-width: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-head-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-options {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-head-live,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-node-head-live {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 28px !important;
  margin-top: 0 !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.28) !important;
  animation: ops-llm-head-live-pulse 1.4s ease-out infinite !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-node-head-live--failed {
  background: #dc2626 !important;
  box-shadow: 0 8px 16px rgba(220, 38, 38, 0.28) !important;
  animation: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-node-head-live--succeeded {
  background: #059669 !important;
  box-shadow: 0 8px 16px rgba(5, 150, 105, 0.28) !important;
  animation: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-head-live::before,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-node-head-live::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  margin-right: 7px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-node-head-live--failed::before {
  background: #fff !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-head-live b,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-head-live [data-ops-llm-head-elapsed] {
  font-variant-numeric: tabular-nums !important;
  margin-left: 2px !important;
}

@keyframes ops-llm-head-live-pulse {
  0% { box-shadow: 0 8px 16px rgba(37, 99, 235, 0.32), 0 0 0 0 rgba(37, 99, 235, 0.28); }
  70% { box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2), 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 8px 16px rgba(37, 99, 235, 0.28), 0 0 0 0 rgba(37, 99, 235, 0); }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-node-state {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  border-left-width: 4px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-node-state__label {
  flex: 0 0 auto !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-node-state__input {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-node-state[data-ops-node-state="running"] {
  border-color: #2563eb !important;
  background: #dbeafe !important;
  color: #1e3a8a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-node-state[data-ops-node-state="running"] .ops-canvas-node-state__label {
  background: #2563eb !important;
  color: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head--llm .ops-canvas-llm-option {
  min-height: 28px !important;
  padding: 0 8px 0 6px !important;
  gap: 6px !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head--llm .ops-canvas-llm-option__pill {
  width: 30px !important;
  height: 18px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head--llm .ops-canvas-llm-option__pill::after {
  width: 14px !important;
  height: 14px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-card__head--llm .ops-canvas-llm-option.is-on .ops-canvas-llm-option__pill::after {
  transform: translateX(12px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-options-hint {
  margin: 0 0 10px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 10px 0 8px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option__pill {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
  transition: background 0.15s ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option__pill::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18) !important;
  transition: transform 0.15s ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option.is-on {
  border-color: rgba(37, 99, 235, 0.34) !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option.is-on .ops-canvas-llm-option__pill {
  background: #2563eb !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option.is-on .ops-canvas-llm-option__pill::after {
  transform: translateX(14px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option.is-on.is-plain {
  border-color: rgba(109, 40, 217, 0.34) !important;
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option.is-on.is-plain .ops-canvas-llm-option__pill {
  background: #7c3aed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-option:has(input:disabled) {
  opacity: 0.62 !important;
  cursor: not-allowed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--primary {
  border: 0 !important;
  border-radius: 10px !important;
  background: #0f172a !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--primary:hover:not(:disabled) {
  background: #1e293b !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--primary.is-running,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-running .ops-canvas-prompt-text-action--primary {
  border: 0 !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
  opacity: 1 !important;
  cursor: wait !important;
  animation: ops-llm-run-btn-pulse 1.35s ease-out infinite !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--primary.is-running b,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-action--primary.is-running [data-ops-llm-elapsed-btn] {
  font-variant-numeric: tabular-nums !important;
  margin-left: 2px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-llm-run-spinner {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin-right: 6px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: #fff !important;
  border-radius: 999px !important;
  vertical-align: -2px !important;
  animation: ops-llm-run-spin 0.75s linear infinite !important;
}

@keyframes ops-llm-run-spin {
  to { transform: rotate(360deg); }
}

@keyframes ops-llm-run-btn-pulse {
  0% { box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28), 0 0 0 0 rgba(37, 99, 235, 0.24); }
  70% { box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22), 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28), 0 0 0 0 rgba(37, 99, 235, 0); }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-search-toggle {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  margin: -2px 0 10px !important;
  font-size: 12px !important;
  color: #334155 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-search-toggle input {
  margin: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-search-toggle em {
  flex: 1 1 100% !important;
  font-style: normal !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-gen-prompt {
  width: 100% !important;
  min-height: 88px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  resize: vertical !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #0f172a !important;
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output {
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output__text {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #0f172a !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  resize: vertical !important;
  outline: 0 !important;
  cursor: text !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output__text:focus {
  border-color: rgba(124, 58, 237, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output__empty {
  margin: 0 !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-prompt-text-tools {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-node-menu {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-gen-run-quote {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-refs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 8px 0 4px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-refs--empty {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px dashed rgba(148, 163, 184, 0.55) !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-refs .ops-gen-ref-thumb {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-refs .ops-gen-ref-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-refs__count {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output__empty {
  font-size: 13px !important;
  color: #94a3b8 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output__notes {
  margin: 8px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  white-space: pre-wrap !important;
}

/* LLM running card uses shared .ops-canvas-card.is-running; keep inner output tint blue. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-output.is-running {
  border-style: solid !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  background: #eff6ff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
  padding: 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running__top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running__bar {
  position: relative !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running__bar span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%) !important;
  transition: width 0.35s ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running__pulse {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55) !important;
  animation: ops-llm-pulse 1.2s ease-out infinite !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running strong {
  font-size: 13px !important;
  color: #1d4ed8 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running strong b,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running [data-ops-llm-elapsed] {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  margin-left: 6px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--llm-text .ops-canvas-llm-running em {
  font-style: normal !important;
  font-size: 12px !important;
  color: #2563eb !important;
}

@keyframes ops-llm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Note label: multiline title + footer actions pinned to bottom */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  padding: calc(8px * var(--ops-card-scale, 1)) calc(10px * var(--ops-card-scale, 1)) calc(6px * var(--ops-card-scale, 1)) !important;
  min-height: calc(72px * var(--ops-card-scale, 1)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-note-title {
  flex: 1 1 auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(36px * var(--ops-card-scale, 1)) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: calc(4px * var(--ops-card-scale, 1)) calc(6px * var(--ops-card-scale, 1)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: clamp(15px, calc(16px * var(--ops-card-scale, 1)), 18px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  resize: none !important;
  outline: none !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-note-title:focus {
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.28) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-note-title::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-node-menu {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: calc(6px * var(--ops-card-scale, 1)) !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: calc(6px * var(--ops-card-scale, 1)) !important;
  border-top: 1px solid rgba(203, 213, 225, 0.55) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-prompt-text-action {
  height: calc(24px * var(--ops-card-scale, 1)) !important;
  padding: 0 calc(8px * var(--ops-card-scale, 1)) !important;
  font-size: calc(11px * var(--ops-card-scale, 1)) !important;
  border-radius: 7px !important;
}

/* Variable chrome is owned by the purple card rules above — do not strip padding/border. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable[data-ops-variable-node="true"] .ops-canvas-note-body:focus {
  border-color: rgba(124, 58, 237, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-image-scale-picker {
  position: relative !important;
  display: inline-flex !important;
  margin-left: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-image-scale-trigger {
  height: 28px !important;
  min-width: 58px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card__kicker {
  display: inline-flex !important;
  margin-bottom: 8px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.09) !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card h4 {
  margin: 0 0 8px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card__media {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 0 10px !important;
  border-radius: 7px !important;
  background: #f1f5f9 !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image .ops-canvas-card__media {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card__media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-object {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 920px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background:
    linear-gradient(45deg, #f8fafc 25%, transparent 25%),
    linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f8fafc 75%),
    linear-gradient(-45deg, transparent 75%, #f8fafc 75%),
    #fff !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
  background-size: 16px 16px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14) !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.62) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.3) !important;
  opacity: 0 !important;
  transform: translateX(-50%) translateY(6px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image:hover .ops-canvas-image-quick-actions,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected .ops-canvas-image-quick-actions,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected .ops-canvas-image-quick-actions,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image:hover .ops-canvas-image-quick-actions,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-selected .ops-canvas-image-quick-actions,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-multi-selected .ops-canvas-image-quick-actions {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions button {
  height: 40px !important;
  min-width: 76px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions button:hover {
  background: #fff !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions button[aria-busy="true"],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions button.yj-btn-busy {
  opacity: 0.88 !important;
  cursor: wait !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions button[data-yj-download-state="done"] {
  background: #dcfce7 !important;
  color: #166534 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions:has(button[aria-busy="true"]),
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions:has(button[data-yj-download-state="done"]) {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions:has(button[aria-busy="true"]) button:not([aria-busy="true"]),
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-quick-actions:has(button[data-yj-download-state="done"]) button:not([data-yj-download-state="done"]):not([aria-busy="true"]) {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools {
  position: absolute !important;
  left: 8px !important;
  top: -40px !important;
  right: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: min(520px, calc(100vw - 360px)) !important;
  padding: 5px 6px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12) !important;
  opacity: 0 !important;
  transform: translateY(0) !important;
  transition: opacity 160ms ease !important;
  pointer-events: none !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image:hover .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image:hover .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-selected .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-multi-selected .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video:hover .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video.is-selected .ops-canvas-image-tools,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video.is-multi-selected .ops-canvas-image-tools {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools span {
  flex: 0 0 auto !important;
  padding: 0 7px !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 24px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools button {
  flex: 0 0 auto !important;
  min-width: 28px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(124, 58, 237, 0.24) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools .ops-canvas-image-scale-picker {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools .ops-canvas-object-more-menu {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools .ops-canvas-object-more-menu > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 24px !important;
  padding: 0 10px !important;
  list-style: none !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools .ops-canvas-object-more-menu > summary::-webkit-details-marker {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools .ops-canvas-image-action--danger {
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #dc2626 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools button:hover {
  background: rgba(124, 58, 237, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools .ops-canvas-image-action--danger:hover {
  background: rgba(254, 226, 226, 0.9) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools button[data-yj-download-state="done"] {
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #15803d !important;
  background: rgba(220, 252, 231, 0.95) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools:has(button[aria-busy="true"]),
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools:has(button[data-yj-download-state="done"]) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools:has(button[aria-busy="true"]) > :not(button[aria-busy="true"]),
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-tools:has(button[data-yj-download-state="done"]) > :not(button[data-yj-download-state="done"]):not(button[aria-busy="true"]) {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected {
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected .ops-canvas-image-object {
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.18),
    0 0 0 3px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image h4 {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image p {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  word-break: break-word !important;
  white-space: pre-line !important;
}

/* Status pills must beat the generic card `p` color above. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card p.ops-canvas-card-summary__status--running,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card p.ops-canvas-card-summary__status--failed {
  color: #fff !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card p.ops-canvas-card-summary__status--succeeded {
  color: #047857 !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-messages {
  align-items: stretch !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow-y: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px dashed #dbe3ef !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  text-align: left !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero h2 {
  margin: 0 0 6px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero p {
  margin: 0 0 10px !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero .ops-quick-row {
  justify-content: flex-start !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-row,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-messages > .ops-confirm-card {
  width: auto !important;
  max-width: 88% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-row--assistant {
  align-self: flex-start !important;
  margin-right: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-row--user {
  align-self: flex-end !important;
  margin-left: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-bubble {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 40px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-composer {
  width: auto !important;
  margin: 0 12px 12px !important;
  border-radius: 16px !important;
}

@media (max-width: 768px) {
  body[data-app-feature="operation-center"] #panelOperationCenter.operation-center-panel {
    height: calc(100vh - 78px) !important;
    min-height: 560px !important;
  }

  body[data-app-feature="operation-center"] .page-container.app-container > .main-area {
    padding-inline: 0 !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
    border-radius: 0 !important;
    border-inline: 0 !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-head {
    padding-inline: 14px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-messages {
    padding: 30px 16px 18px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero {
    margin-top: 18px !important;
    text-align: left !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero h2 {
    font-size: 27px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero p {
    margin-inline: 0 !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-empty-hero .ops-quick-row {
    justify-content: flex-start !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer {
    width: calc(100% - 24px) !important;
    margin-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(280px, 44vh) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-head {
    min-height: 48px !important;
    padding: 9px 10px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-dock {
    padding: 0 0 max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools {
    gap: 4px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools span {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools .ops-canvas-tool-wide {
    min-width: 66px !important;
    padding: 0 8px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card {
    width: 280px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-messages {
    padding: 10px !important;
  }
}

/* Operation center workspace refresh: white infinite canvas + bottom dock toolbar. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef2f7 !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-pane {
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane {
  border: 0 !important;
  border-left: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-head {
  min-height: 46px !important;
  padding: 10px 14px !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-head h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-dock {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 24 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 10px !important;
  background: transparent !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-dock-stack {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 10px) !important;
  transform: translateX(-50%) !important;
  width: min(420px, calc(100vw - 32px)) !important;
  padding: 12px 14px 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14) !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__head strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__close {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__close:hover {
  background: rgba(124, 58, 237, 0.08) !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 6px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__list li {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-shortcuts-panel__list kbd {
  display: inline-block !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-bottom-width: 2px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button.is-active,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools #opsCanvasShortcutsBtn.is-active {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools span {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button:hover {
  background: rgba(124, 58, 237, 0.08) !important;
}

/* Canvas dock: three compact groups — add, view, and resources. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-view-picker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 3px !important;
  border-left: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.28) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-template-menu__save {
  width: calc(100% - 12px) !important;
  margin: 6px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #5b21b6 !important;
  font-weight: 800 !important;
  text-align: left !important;
  background: #f5f3ff !important;
}

/* Sidebar: primary workspaces are one flat list; account remains in the wallet. */
body #sidebarMenuRoot .nav-group--flat {
  display: grid !important;
  gap: 6px !important;
}

body #sidebarMenuRoot .nav-group--flat .nav-btn {
  margin: 0 !important;
}

body .sidebar-resource-menu {
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
}

body .sidebar-resource-menu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

body .sidebar-resource-menu > summary::-webkit-details-marker { display: none; }
body .sidebar-resource-menu__chevron { margin-left: auto; transition: transform .16s ease; }
body .sidebar-resource-menu[open] .sidebar-resource-menu__chevron { transform: rotate(180deg); }
body .sidebar-resource-menu__content { display: grid; gap: 6px; padding-top: 6px; }

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-zoom-picker {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools .ops-canvas-zoom-range {
  width: 96px !important;
  height: 4px !important;
  margin: 0 2px !important;
  accent-color: #7c3aed !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools .ops-canvas-zoom-label {
  min-width: 42px !important;
  padding: 0 4px !important;
  color: #5b21b6 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap {
  position: absolute !important;
  left: 14px !important;
  bottom: 40px !important;
  z-index: 28 !important;
  width: 196px !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder {
  position: absolute !important;
  left: 14px !important;
  top: auto !important;
  bottom: 228px !important;
  z-index: 46 !important;
  width: 168px !important;
  max-height: 200px !important;
  padding: 4px !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow: hidden !important;
}

#panelOperationCenter .ops-canvas-group-finder {
  position: absolute;
  left: 14px;
  top: auto;
  bottom: 228px;
  z-index: 46;
  width: 168px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
  pointer-events: auto;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-height: 0 !important;
  max-height: inherit !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__head strong {
  font-weight: 600 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__head-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__collapse {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__collapse:hover {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__count {
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: right !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__search input {
  width: 100% !important;
  height: 24px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 5px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.55) !important;
  outline: none !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__search input:focus {
  border-color: rgba(15, 23, 42, 0.14) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  overflow: auto !important;
  min-height: 0 !important;
  max-height: 132px !important;
  padding: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #334155 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__item:hover {
  background: #f1f5f9 !important;
  border-color: transparent !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__item.is-active {
  background: #f1f5f9 !important;
  border-color: transparent !important;
  color: #0f172a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__item strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__item em {
  flex: 0 0 auto !important;
  font-style: normal !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__empty {
  padding: 8px 4px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__hint {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder__toggle {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder.is-collapsed {
  bottom: 228px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 72px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder.is-collapsed .ops-canvas-group-finder__panel {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-finder.is-collapsed .ops-canvas-group-finder__toggle {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 72px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  letter-spacing: 2px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-group-frame.is-locate-flash {
  animation: ops-canvas-group-locate-flash 0.9s ease !important;
}

@keyframes ops-canvas-group-locate-flash {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.55); }
  35% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
  color: #0f172a !important;
  font-size: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__panel {
  display: block !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__toggle {
  position: absolute !important;
  top: 4px !important;
  right: -1px !important;
  transform: none !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 64px !important;
  z-index: 80 !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
  border-radius: 0 10px 10px 0 !important;
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap.is-collapsed {
  bottom: 104px !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap.is-collapsed .ops-canvas-minimap__panel {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap.is-collapsed .ops-canvas-minimap__toggle {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 96px !important;
  border: 1px solid rgba(124, 58, 237, 0.32) !important;
  border-radius: 12px !important;
  background: #ede9fe !important;
  color: #5b21b6 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.16) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__body {
  position: relative !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  cursor: crosshair !important;
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__resize-handle {
  position: absolute !important;
  right: -4px !important;
  bottom: -4px !important;
  z-index: 2 !important;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
  cursor: nwse-resize !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__resize-handle:hover {
  border-color: rgba(124, 58, 237, 0.65) !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #c4b5fd 100%) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-minimap__hint {
  margin: 6px 0 0 !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-resize-handle {
  position: absolute !important;
  right: -10px !important;
  bottom: -10px !important;
  z-index: 40 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 0 10px 0 !important;
  background: transparent !important;
  cursor: nwse-resize !important;
  touch-action: none !important;
  /* Always interactive so corner drag works even when card isn't selected yet. */
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-resize-handle::before {
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px 0 7px 0 !important;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(124, 58, 237, 0.95) 46% 54%, transparent 54% 70%, rgba(124, 58, 237, 0.95) 70% 78%, transparent 78%) !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card:hover .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-resizing .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-multi-selected .ops-canvas-resize-handle {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-resizing .ops-canvas-resize-handle::before {
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(91, 33, 182, 1) 46% 54%, transparent 54% 70%, rgba(91, 33, 182, 1) 70% 78%, transparent 78%) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar {
  position: absolute !important;
  top: 76px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 44 !important;
  margin: 0 !important;
  transform: none !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #475569 !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport {
  margin: 0 !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  position: relative !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-pane {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  position: relative !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport {
  height: auto !important;
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-head__start {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-head__end {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-head .ops-home-back-btn {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-head .ops-home-back-btn:hover {
  border-color: rgba(124, 58, 237, 0.28) !important;
  background: #faf5ff !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project strong {
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 6em !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice {
  position: relative !important;
  z-index: 120 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 1px solid rgba(245, 158, 11, 0.34) !important;
  border-radius: 999px !important;
  background: #fffbeb !important;
  color: #92400e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: help !important;
  box-shadow: 0 1px 2px rgba(146, 64, 14, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice:focus-visible {
  border-color: rgba(245, 158, 11, 0.58) !important;
  background: #fef3c7 !important;
  color: #78350f !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice::after {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: auto !important;
  right: 0 !important;
  z-index: 130 !important;
  width: max-content !important;
  max-width: min(280px, calc(100vw - 32px)) !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(146, 64, 14, 0.16) !important;
  border-radius: 8px !important;
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18) !important;
  content: attr(data-tooltip) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  text-align: left !important;
  transform: translate(0, -2px) !important;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice::before {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  bottom: auto !important;
  left: auto !important;
  right: 10px !important;
  z-index: 131 !important;
  width: 8px !important;
  height: 8px !important;
  background: #111827 !important;
  content: "" !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: rotate(45deg) !important;
  transition: opacity 0.16s ease, visibility 0.16s ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice:hover::after,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice:focus-visible::after,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice.is-open::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(0, 0) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice:hover::before,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice:focus-visible::before,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-notice.is-open::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: rotate(45deg) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project__rename {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project__guide {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project__download {
  white-space: nowrap;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project__download:disabled {
  opacity: 0.55;
  cursor: default !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project__guide:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-current-project__guide:focus-visible {
  border-color: rgba(124, 58, 237, 0.28) !important;
  background: #faf5ff !important;
  color: #6d28d9 !important;
}

.ops-canvas-usage-guide {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(880px, 94vw);
  max-height: min(88vh, 860px);
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  color: #182033;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.ops-canvas-usage-guide::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.ops-canvas-usage-guide__shell {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 860px);
}

.ops-canvas-usage-guide__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid #eef2f7;
}

.ops-canvas-usage-guide__head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ops-canvas-usage-guide__head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.ops-canvas-usage-guide__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ops-canvas-usage-guide__close:hover {
  background: #eef2ff;
  color: #4338ca;
}

.ops-canvas-usage-guide__tabs {
  display: flex;
  gap: 6px;
  padding: 12px 22px 0;
}

.ops-canvas-usage-guide__tab {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ops-canvas-usage-guide__tab.is-active {
  border-color: rgba(124, 58, 237, 0.2);
  background: #f5f3ff;
  color: #6d28d9;
}

.ops-canvas-usage-guide__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 22px 24px;
}

.ops-canvas-usage-guide__panel[hidden] {
  display: none !important;
}

.ops-canvas-usage-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ops-canvas-usage-guide__card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
}

.ops-canvas-usage-guide__card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
}

.ops-canvas-usage-guide__card p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

.ops-canvas-usage-guide__viz {
  display: block;
  width: 88px;
  height: 72px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.ops-canvas-usage-guide__flow {
  display: grid;
  gap: 14px;
}

.ops-canvas-usage-guide__flow-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #fff;
}

.ops-canvas-usage-guide__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.ops-canvas-usage-guide__chip--src {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ops-canvas-usage-guide__chip--dst {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

.ops-canvas-usage-guide__arrow {
  color: #94a3b8;
  font-size: 18px;
  text-align: center;
}

.ops-canvas-usage-guide__flow-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.ops-canvas-usage-guide__play {
  display: grid;
  gap: 12px;
}

.ops-canvas-usage-guide__play-card {
  padding: 14px 16px;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  background: #fff;
}

.ops-canvas-usage-guide__play-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}

.ops-canvas-usage-guide__play-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}

.ops-canvas-usage-guide__play-steps span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.ops-canvas-usage-guide__play-steps em {
  color: #94a3b8;
  font-style: normal;
  font-weight: 700;
}

.ops-canvas-usage-guide__play-card p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.ops-canvas-usage-guide__keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ops-canvas-usage-guide__keys li {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #fff;
}

.ops-canvas-usage-guide__keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}

.ops-canvas-usage-guide__keys span {
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .ops-canvas-usage-guide__grid {
    grid-template-columns: 1fr;
  }

  .ops-canvas-usage-guide__flow-item {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ops-canvas-usage-guide__arrow {
    transform: rotate(90deg);
  }

  .ops-canvas-usage-guide__keys li {
    grid-template-columns: 1fr;
  }
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #64748b !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-toggle-btn__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-toggle-btn:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-toggle-btn:focus-visible {
  border-color: rgba(124, 58, 237, 0.38) !important;
  background: rgba(124, 58, 237, 0.07) !important;
  color: #6d28d9 !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12) !important;
  outline: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-toggle-btn.is-collapsed {
  border-color: rgba(124, 58, 237, 0.30) !important;
  color: #6d28d9 !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

body[data-app-feature="operation-center"] .main-area > .yj-card.yj-card--panel {
  padding: 0 !important;
}

body[data-app-feature="operation-center"] .main-area #mainDynamicStack.dynamic-panel-stack {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter.operation-center-panel {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-layout {
  min-height: 0 !important;
  height: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  min-height: 0 !important;
  height: 100% !important;
  background: #ffffff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero {
  padding: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero h2 {
  font-size: 18px !important;
  color: #0f172a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-messages {
  align-items: flex-start !important;
  padding: 10px 12px 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-row,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-messages > .ops-confirm-card {
  width: auto !important;
  max-width: 88% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-row--assistant {
  align-self: flex-start !important;
  margin-right: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-row--user {
  align-self: flex-end !important;
  margin-left: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-bubble {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 40px) !important;
  align-self: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero {
  width: 100% !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-empty-hero p {
  margin: 0 0 12px !important;
  font-size: 13px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-pane {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  position: relative !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport {
  min-height: 0 !important;
  height: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-dock {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 24 !important;
  padding: 0 0 10px !important;
  background: transparent !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] .main-area > .yj-card.yj-card--panel {
  padding: 0 !important;
}

body[data-app-feature="operation-center"] .main-area #mainDynamicStack.dynamic-panel-stack {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter.operation-center-panel {
  height: 100% !important;
  min-height: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-layout {
  min-height: 0 !important;
  height: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-main {
  min-height: 0 !important;
  height: 100% !important;
  background: #ffffff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-quick-row {
  justify-content: flex-start !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-quick-row button {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: #5b21b6 !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-bubble--assistant {
  border: 1px solid #e8edf5 !important;
  background: #f8fafc !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-bubble--user {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border: 1px solid rgba(167, 139, 250, 0.42) !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__media {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__media-item {
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: #f8fafc !important;
  aspect-ratio: 1 / 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__media-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-bubble__media-more {
  grid-column: 1 / -1 !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-verify-card {
  align-items: center !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  color: #166534 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  gap: 6px !important;
  line-height: 1.45 !important;
  margin-top: 10px !important;
  padding: 8px 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-verify-card__head {
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-verify-card__meta {
  color: #475569 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-verify-tick {
  color: #059669 !important;
  font-weight: 800 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-messages > .ops-confirm-card {
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-meta,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-assets-block,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-missing-block {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-asset-row {
  border: 0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
}

.global-maintenance-banner {
  display: none !important;
}

.image-channel-maintenance-banner {
  display: none !important;
}

.image-channel-maintenance-banner[hidden] {
  display: none !important;
}

body[data-generation-maintenance="partial"] .global-maintenance-banner,
body[data-generation-maintenance="on"] .global-maintenance-banner {
  display: none !important;
}

body[data-generation-maintenance="partial"] .page-container.app-container,
body[data-generation-maintenance="on"] .page-container.app-container {
  height: 100vh !important;
}

.site-notice-center__pinned {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.site-notice-center__pinned[hidden] {
  display: none !important;
}

.site-notice-pinned-banner {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-left: 4px solid #ef4444;
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.08);
}

.site-notice-pinned-banner--maintenance {
  border-color: rgba(248, 113, 113, 0.28);
  border-left-color: #ef4444;
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.site-notice-pinned-banner--update {
  border-color: rgba(124, 58, 237, 0.24);
  border-left-color: #7c3aed;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
}

.site-notice-pinned-banner__label {
  margin-bottom: 4px;
  color: #dc2626;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.site-notice-pinned-banner--update .site-notice-pinned-banner__label {
  color: #7c3aed;
}

.site-notice-pinned-banner__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.site-notice-pinned-banner__body {
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

body[data-generation-maintenance="partial"] .page-container.app-container > .sidebar.sidebar--stack,
body[data-generation-maintenance="on"] .page-container.app-container > .sidebar.sidebar--stack {
  height: 100% !important;
  padding-bottom: max(var(--pad-card), env(safe-area-inset-bottom)) !important;
}

body[data-generation-maintenance="partial"] .model-btn.is-maintenance-disabled,
body[data-generation-maintenance="partial"] .generate-btn.is-maintenance-disabled {
  opacity: 0.72;
}

body[data-generation-maintenance="partial"] .model-btn.is-maintenance-disabled,
body[data-generation-maintenance="partial"] .matting-model-btn.is-maintenance-disabled,
body[data-generation-maintenance="on"] .model-btn.is-maintenance-disabled,
body[data-generation-maintenance="on"] .matting-model-btn.is-maintenance-disabled {
  opacity: 0.82;
  cursor: not-allowed !important;
}

body[data-generation-maintenance="partial"] .model-btn.is-maintenance-disabled .model-name,
body[data-generation-maintenance="partial"] .matting-model-btn.is-maintenance-disabled .model-name,
body[data-generation-maintenance="on"] .model-btn.is-maintenance-disabled .model-name,
body[data-generation-maintenance="on"] .matting-model-btn.is-maintenance-disabled .model-name {
  opacity: 1;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

body[data-generation-maintenance="partial"] .gpt-model-grid .model-btn.is-maintenance-disabled .yj-maintenance-label,
body[data-generation-maintenance="partial"] .matting-model-btn.is-maintenance-disabled .yj-maintenance-label,
body[data-generation-maintenance="on"] .gpt-model-grid .model-btn.is-maintenance-disabled .yj-maintenance-label,
body[data-generation-maintenance="on"] .matting-model-btn.is-maintenance-disabled .yj-maintenance-label {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(254, 243, 199, 0.96);
  color: #b45309;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

body[data-generation-maintenance="partial"] .model-btn.is-maintenance-disabled .yj-maintenance-label,
body[data-generation-maintenance="partial"] .matting-model-btn.is-maintenance-disabled .yj-maintenance-label,
body[data-generation-maintenance="on"] .model-btn.is-maintenance-disabled .yj-maintenance-label,
body[data-generation-maintenance="on"] .matting-model-btn.is-maintenance-disabled .yj-maintenance-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(254, 243, 199, 0.96);
  color: #b45309;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-btn.is-maintenance-disabled .yj-maintenance-label {
  grid-column: 3;
  justify-self: end;
}

body[data-generation-maintenance="partial"] .nav-btn.is-maintenance-nav,
body[data-generation-maintenance="on"] .nav-btn.is-maintenance-nav {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-generation-maintenance="partial"] .nav-btn.is-maintenance-nav .nav-btn__label::after,
body[data-generation-maintenance="on"] .nav-btn.is-maintenance-nav .nav-btn__label::after {
  content: " · 维护中";
  font-size: 11px;
  font-weight: 500;
}

body[data-generation-maintenance="on"] .main-area {
  position: relative;
}

body[data-generation-maintenance="on"] .main-area::after {
  content: "生成服务维护中";
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 999px;
  background: rgba(255, 247, 237, 0.94);
  color: #c2410c;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.18);
  pointer-events: none;
}

body[data-generation-maintenance="on"] .generate-btn,
body[data-generation-maintenance="on"] .rewrite-submit-btn,
body[data-generation-maintenance="on"] .ops-analyze-btn {
  filter: grayscale(0.18);
  cursor: not-allowed !important;
}

/* Operation canvas final composer polish: custom model picker, compact but not cramped. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-composer {
  position: relative !important;
  z-index: 20 !important;
  display: grid !important;
  gap: 9px !important;
  width: calc(100% - 24px) !important;
  margin: 0 12px 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.09),
    0 0 0 3px rgba(124, 58, 237, 0.035) !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-chat-composer:focus-within {
  border-color: rgba(124, 58, 237, 0.34) !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.1),
    0 0 0 4px rgba(124, 58, 237, 0.075) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-message-input {
  min-height: 54px !important;
  max-height: 118px !important;
  padding: 6px 6px 2px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-actions {
  position: relative !important;
  z-index: 21 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px !important;
  grid-template-areas: "toolbar send" !important;
  gap: 8px !important;
  align-items: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-toolbar {
  grid-area: toolbar !important;
  display: grid !important;
  grid-template-columns: 40px minmax(104px, 126px) minmax(108px, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane [data-ops-select-field="opsAspectSelect"],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane [data-ops-select-field="opsClaritySelect"],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane [data-ops-select-field="opsCountSelect"] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-field {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 74px !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  position: relative !important;
  cursor: default !important;
  overflow: visible !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-toolbar > .ops-composer-select-field[data-ops-select-field="opsAspectSelect"],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-toolbar > .ops-composer-select-field[data-ops-select-field="opsClaritySelect"],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-toolbar > .ops-composer-select-field[data-ops-select-field="opsCountSelect"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-field::after {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-trigger {
  position: relative !important;
  width: 100% !important;
  height: 40px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 5px 24px 5px 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%),
    #fff !important;
  color: #0f172a !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-trigger::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #8b5cf6 !important;
  border-bottom: 2px solid #8b5cf6 !important;
  transform: translateY(-65%) rotate(45deg) !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-field.is-open .ops-composer-select-trigger,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-trigger:hover {
  border-color: rgba(124, 58, 237, 0.34) !important;
  background:
    linear-gradient(180deg, #fff 0%, #f5efff 100%),
    #fff !important;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.1) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-trigger:focus-visible {
  outline: none !important;
  border-color: rgba(124, 58, 237, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select__label {
  flex: 0 0 auto !important;
  color: #6d28d9 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select__value {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  cursor: default !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select:focus {
  outline: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-field:focus-within {
  border-color: rgba(124, 58, 237, 0.38) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select:disabled {
  opacity: 0.72 !important;
  cursor: not-allowed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-field:has(.ops-composer-select:disabled) {
  opacity: 0.72 !important;
  cursor: not-allowed !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 8px) !important;
  z-index: 90 !important;
  width: max(100%, 96px) !important;
  min-width: 96px !important;
  max-height: 260px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
  overflow-y: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu button {
  width: 100% !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu button:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu button.active {
  border-color: rgba(124, 58, 237, 0.24) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(14, 165, 233, 0.06)) !important;
  color: #111827 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu button.active::after {
  content: "" !important;
  width: 6px !important;
  height: 10px !important;
  margin-left: 8px !important;
  border-right: 2px solid #7c3aed !important;
  border-bottom: 2px solid #7c3aed !important;
  transform: rotate(45deg) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu button:disabled {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-picker {
  min-width: 118px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-trigger {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 5px 26px 5px 12px !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-trigger__value {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu {
  left: auto !important;
  right: 0 !important;
  width: min(286px, calc(100vw - 32px)) !important;
  min-width: 248px !important;
  max-height: 420px !important;
  gap: 10px !important;
  padding: 12px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu__section + .ops-composer-output-menu__section {
  padding-top: 8px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu__label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu__options {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu__options button {
  min-height: 30px !important;
  justify-content: center !important;
  padding: 6px 8px !important;
  text-align: center !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu__options button.active::after {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-picker {
  position: relative !important;
  grid-area: auto !important;
  min-width: 0 !important;
  max-width: 118px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-select--native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current {
  position: relative !important;
  width: 100% !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 24px 0 8px !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #fff 0%, #fbf8ff 100%),
    #fff !important;
  color: #475569 !important;
  font: inherit !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__text {
  min-width: 0 !important;
  display: grid !important;
  gap: 0 !important;
  line-height: 1.05 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__mode {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__logo {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: #fff !important;
  color: #7c3aed !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__logo img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  display: block !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__logo--banana img {
  width: 13px !important;
  height: 13px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current::after {
  content: "";
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 6px;
  height: 6px;
  border-right: 2px solid #8b5cf6;
  border-bottom: 2px solid #8b5cf6;
  transform: translateY(-65%) rotate(45deg);
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-current__name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu button {
  display: block !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-option__logo {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: #fff !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-option__logo img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  display: block !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-option__logo--banana img {
  width: 15px !important;
  height: 15px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + 8px) !important;
  z-index: 80 !important;
  width: max(100%, 188px) !important;
  min-width: 188px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 7px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu button:hover {
  border-color: rgba(124, 58, 237, 0.18) !important;
  background: #faf7ff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu button.active {
  border-color: rgba(124, 58, 237, 0.36) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(14, 165, 233, 0.06)) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu strong {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu {
  width: min(360px, calc(100vw - 32px)) !important;
  min-width: 320px !important;
  height: auto !important;
  min-height: 320px !important;
  max-height: min(420px, calc(100vh - 160px)) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "side panels" !important;
  gap: 8px !important;
  padding: 8px !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__side {
  grid-area: side !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__panels {
  grid-area: panels !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__foot,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__foot--in-panels {
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.92) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__foot[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__modes {
  display: grid !important;
  gap: 4px !important;
  align-content: start !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 3px !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.92) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__modes button,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel button {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__modes button {
  display: grid !important;
  gap: 1px !important;
  padding: 8px 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__modes button span,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-option em {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel button[data-ops-image-model-choice] {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-option__meta {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel button[data-ops-image-model-choice] .ops-image-model-option {
  width: 100% !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__modes button.active {
  border-color: rgba(124, 58, 237, 0.24) !important;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-menu__panels {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel {
  display: grid !important;
  gap: 5px !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 2px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel__label {
  display: block !important;
  padding: 2px 4px 4px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-mode-model-panel button[data-ops-image-model-choice] .ops-image-model-option strong {
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-analyze-btn {
  grid-area: send !important;
  width: 72px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22) !important;
}

@media (max-width: 768px) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-actions {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    grid-template-areas: "toolbar send" !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-toolbar {
    grid-template-columns: 38px minmax(78px, 96px) minmax(104px, 1fr) !important;
    gap: 4px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-field {
    min-width: 68px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select__label {
    font-size: 9px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select__value {
    font-size: 10px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-trigger {
    padding: 5px 20px 5px 8px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-select-menu {
    min-width: 88px !important;
    width: max(100%, 88px) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-composer-output-menu {
    min-width: min(248px, calc(100vw - 28px)) !important;
    width: min(272px, calc(100vw - 28px)) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-image-model-menu {
    min-width: 176px !important;
    width: max(100%, 176px) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-pane .ops-analyze-btn {
    width: 68px !important;
  }
}
/* Codex UI pass 2026-06-01: clearer tool hierarchy and first-run guidance. */
.workflow-guide {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.workflow-guide::-webkit-scrollbar {
  display: none;
}

.workflow-guide__item {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  white-space: nowrap;
}

.workflow-guide__item--active {
  padding: 0 7px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
}

.workflow-guide__arrow {
  color: #cbd5e1;
  font-weight: 800;
}

.top-bar-right {
  gap: 8px;
}

.top-bar .balance-card.balance-pill {
  min-height: 38px;
  border-color: rgba(124, 58, 237, 0.2);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.top-bar .balance-pill .balance-text {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.top-bar .balance-pill .refresh-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
}

.top-bar .key-btn--topbar,
.top-bar .top-bar-service-link {
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.22);
  background: #f8fafc;
}

.top-bar .key-btn--topbar:hover,
.top-bar .top-bar-service-link:hover {
  color: #475569;
  border-color: rgba(124, 58, 237, 0.22);
  background: #f5f3ff;
}

.key-btn--needs-attention {
  animation: yjKeyAttentionPulse 0.9s ease-in-out 2;
}

.key-modal--attention {
  animation: yjKeyModalAttention 0.9s ease-in-out 2;
}

@keyframes yjKeyAttentionPulse {
  0%,
100% {
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.14);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 14px 30px rgba(124, 58, 237, 0.2);
  }
}

@keyframes yjKeyModalAttention {
  0%,
100% {
    box-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1), 0 28px 76px rgba(15, 23, 42, 0.2);
  }
}

#sidebarMenuRoot .nav-group {
  padding: 2px 0 8px;
}

#sidebarMenuRoot .nav-group-header {
  margin: 6px 4px 7px;
  padding: 0 2px;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 800;
}

#sidebarMenuRoot .nav-divider {
  height: 1px;
  margin: 4px 2px 8px;
  background: rgba(148, 163, 184, 0.18);
}

#sidebarMenuRoot .nav-btn {
  background: transparent;
  color: #64748b;
  border-color: transparent;
}

#sidebarMenuRoot .nav-btn:hover {
  background: #f8fafc;
  color: #334155;
}

#sidebarMenuRoot .nav-btn.active {
  background: #f5f3ff;
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.18);
  border-left-color: #7c3aed;
  box-shadow: none;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__label {
  font-weight: 800;
}

/* First paint shell: keep the workspace legible while account and feature scripts hydrate. */
.entry-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  gap: 16px;
  align-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 43%, rgba(124, 58, 237, 0.08), transparent 24%),
    #ffffff;
  color: #0f172a;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
  animation: entryLoaderFailsafe 0.28s ease 2.8s forwards;
}

.entry-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entry-loader__mark {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  box-shadow: 0 20px 55px rgba(109, 40, 217, 0.24);
  will-change: transform, box-shadow;
  animation:
    entryLogoArrive 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    entryLogoPulse 1.15s ease-in-out 0.48s infinite;
}

.entry-loader__mark::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 24px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(124, 58, 237, 0.16) 95deg, transparent 170deg, transparent 360deg);
  animation: entryLogoSweep 1.05s linear infinite;
}

.entry-loader__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 16px;
  background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.18) 38%, transparent 56%);
  transform: translateX(-130%);
  animation: entryLogoGlint 1.25s ease-in-out infinite;
  pointer-events: none;
}

.entry-loader__mark img {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  display: block;
  object-fit: contain;
}

.entry-loader__copy {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  animation: entryCopyIn 0.36s ease 0.08s both;
}

.entry-loader__copy strong {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
}

.entry-loader__copy span {
  position: relative;
  width: 48px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #ede9fe;
}

.entry-loader__copy span::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background: #7c3aed;
  animation: entryLoaderLine 0.9s ease-in-out infinite;
}

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

@keyframes entryLogoPulse {
  0%,
100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 20px 55px rgba(109, 40, 217, 0.24);
  }
  50% {
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 24px 68px rgba(109, 40, 217, 0.3);
  }
}

@keyframes entryLogoSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes entryLogoGlint {
  0%,
40% {
    transform: translateX(-130%);
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

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

@keyframes entryLoaderLine {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(260%);
  }
}

@keyframes entryLoaderFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-loader {
    animation: entryLoaderFailsafe 0.12s ease 2.8s forwards !important;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  }

  .entry-loader__mark {
    animation-duration: 0.46s, 1.8s;
  }

  .entry-loader__mark::before {
    animation-duration: 1.8s;
  }
}

.mobile-generate-bar {
  display: none;
}

.mobile-generate-target--highlight {
  border-color: rgba(124, 58, 237, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16), 0 10px 28px rgba(124, 58, 237, 0.1) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (max-width: 1023px) {
  body.has-mobile-generate-bar {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-generate-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 34vw);
    align-items: center;
    gap: 10px;
    padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px);
    transform: translateY(105%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .mobile-generate-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-generate-bar__meta {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-generate-bar__meta strong {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-generate-bar__meta span {
    font-size: 12px;
    line-height: 1.25;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-generate-bar__btn {
    min-width: 0;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.24);
  }

  .mobile-generate-bar__btn:active {
    transform: translateY(1px);
  }

  .mobile-generate-bar__btn.is-disabled,
.mobile-generate-bar__btn:disabled {
    opacity: 0.55;
    box-shadow: none;
  }
}

.top-bar .balance-card.balance-pill {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
}

#sidebarMenuRoot .nav-group-icon,
#sidebarMenuRoot .nav-btn__icon {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .top-bar .balance-card.balance-pill {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    height: auto !important;
    min-height: 42px !important;
  }
}

/* Notice center: model updates and FAQ. */
.notice-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, #ffffff 0 16%, transparent 17%),
    linear-gradient(135deg, #f5f3ff 0%, #ffffff 58%, #eef2ff 100%);
  color: #6d28d9;
  box-shadow:
    0 10px 26px rgba(124, 58, 237, 0.16),
    0 0 0 4px rgba(124, 58, 237, 0.06);
  cursor: pointer;
  isolation: isolate;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.notice-btn:hover {
  border-color: rgba(124, 58, 237, 0.58);
  background:
    radial-gradient(circle at 32% 24%, #ffffff 0 16%, transparent 17%),
    linear-gradient(135deg, #ede9fe 0%, #ffffff 48%, #ddd6fe 100%);
  color: #5b21b6;
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 14px 32px rgba(124, 58, 237, 0.22),
    0 0 0 5px rgba(124, 58, 237, 0.08);
}

.notice-btn__icon {
  width: 20px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(91, 33, 182, 0.16));
}

.notice-btn__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.28);
}

.notice-btn--unread::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.32);
  background: rgba(124, 58, 237, 0.06);
  z-index: -1;
  animation: noticePulse 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes noticePulse {
  0% {
    opacity: 0.9;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

.notice-btn--sidebar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 10px;
}

.site-notice-center-backdrop {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(15, 23, 42, 0.28);
  transition: opacity 200ms ease, visibility 200ms ease;
}

.site-notice-center-backdrop .site-notice-center {
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-notice-center-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.site-notice-center-backdrop.visible .site-notice-center {
  transform: translateX(0);
}

.site-notice-center {
  width: min(420px, 100vw);
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-left: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: -18px 0 48px rgba(15, 23, 42, 0.16);
  outline: none;
}

.site-notice-center__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
}

.site-notice-center__eyebrow {
  margin: 0 0 4px;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 800;
}

.site-notice-center__head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.site-notice-center__close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.site-notice-center__thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
}

.site-notice-center__thread-label {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 13px;
  font-weight: 800;
}

.site-notice-center__feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 4px 2px 16px;
}

.site-notice-day {
  margin: 14px 0 8px;
  text-align: center;
  color: var(--text-tertiary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.site-notice-bubble {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 6px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.site-notice-bubble--warn {
  border-left: 3px solid #f59e0b;
}

.site-notice-bubble--release {
  border-left: 3px solid #7c3aed;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
}

.site-notice-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.site-notice-bubble__sender {
  color: #7c3aed;
  font-size: 12px;
  font-weight: 800;
}

.site-notice-bubble__time {
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
}

.site-notice-bubble__title {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.35;
}

.site-notice-bubble__body {
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

.site-notice-bubble__actions {
  margin-top: 10px;
}

.site-notice-bubble__btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  background: #ffffff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.site-notice-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-tertiary, #64748b);
  font-size: 13px;
}

.site-notice-center__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
}

.site-notice-center__foot-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.site-notice-center__foot-btn--primary {
  border-color: rgba(124, 58, 237, 0.35);
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

@media (max-width: 640px) {
  .site-notice-center {
    width: 100vw;
  }
}

.notice-modal-backdrop.visible {
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.notice-modal {
  width: min(560px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 36px));
  overflow: auto;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
  outline: none;
}

.notice-modal__close {
  position: sticky;
  top: 10px;
  float: right;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin: 10px 10px 0 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.notice-modal__close:hover {
  background: #ffffff;
  color: #111827;
}

.notice-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 8px;
}

.notice-modal__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #6d28d9;
  background: #f3e8ff;
}

.notice-modal__mark svg {
  width: 21px;
  height: 21px;
}

.notice-modal__eyebrow {
  margin: 0 0 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.notice-modal__head h2 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: 0;
}

.notice-modal__body {
  display: grid;
  gap: 10px;
  padding: 8px 24px 12px;
}

.notice-card {
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
}

.notice-card--update {
  border-color: rgba(124, 58, 237, 0.18);
  background: #ffffff;
}

.notice-card--faq {
  border-color: rgba(59, 130, 246, 0.18);
}

.notice-card__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.notice-card h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  line-height: 1.3;
}

.notice-card p {
  margin: 0 0 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

.notice-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.notice-tag--hot {
  background: #7c3aed;
}

.notice-tag--guide {
  background: #2563eb;
}

.notice-list,
.notice-steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 17px;
}

.notice-list li,
.notice-steps li {
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}

.notice-list strong,
.notice-steps strong {
  color: #111827;
  font-weight: 900;
}

.notice-list span,
.notice-steps span {
  margin-left: 4px;
  color: #475569;
}

.notice-link {
  color: #0f5bd7;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 91, 215, 0.35);
}

.notice-link:hover {
  color: #0b46a8;
  border-bottom-color: currentColor;
}

.notice-copy-wechat {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 2px;
  padding: 0 8px;
  border: 1px solid rgba(249, 115, 22, 0.32);
  border-radius: 7px;
  background: #fff7ed;
  color: #c2410c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.notice-copy-wechat:hover {
  background: #ffedd5;
}

.notice-safe-copy {
  margin: 12px 0 0 !important;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.notice-modal__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 24px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 36%);
}

.notice-action {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.notice-action--ghost {
  background: #ffffff;
  color: #334155;
}

.notice-action--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

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

@media (max-width: 768px) {
  .notice-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .notice-modal-backdrop.visible {
    align-items: flex-start;
    padding: 10px;
  }

  .notice-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 12px;
  }

  .notice-modal__head {
    padding: 24px 18px 10px;
    gap: 10px;
  }

  .notice-modal__mark {
    width: 40px;
    height: 40px;
  }

  .notice-modal__head h2 {
    font-size: 19px;
  }

  .notice-modal__body {
    padding: 8px 14px 14px;
  }

  .notice-card {
    padding: 14px;
  }

  .notice-modal__actions {
    padding: 12px 14px 18px;
  }

  .notice-action {
    flex: 0 1 auto;
    padding: 0 10px;
    font-size: 13px;
  }
}

#sidebarMenuRoot .nav-tag {
  padding: 1px 5px;
  border-radius: 999px;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
  font-size: 9px;
}

#panelGptImage #gpt-image-panel .gpt-step-card,
#panelNanoBanana #nano-banana-panel .gpt-step-card,
#panelStandard .upload-block,
#panelStandard .model-section,
#panelStandard .ratio-resolution-card,
#panelStandard .main-advanced-settings,
#panelStandard .param-group {
  border-radius: 8px;
}

#panelGptImage #gpt-image-panel .gpt-step-card > .step-title-row,
#panelNanoBanana #nano-banana-panel .gpt-step-card > .step-title-row,
#panelStandard .step-title-row {
  align-items: center;
}

#panelGptImage #gpt-image-panel .generate-btn,
#panelNanoBanana #nano-banana-panel .generate-btn,
#panelStandard .generate-btn {
  min-height: 46px;
  font-size: 15px;
  font-weight: 900;
}

.modal-backdrop[aria-hidden="true"] {
  pointer-events: none !important;
}

.modal-backdrop[aria-hidden="true"] * {
  pointer-events: none !important;
}

@media (min-width: 1024px) {
  .main-area > .yj-card.yj-card--panel {
    padding-top: 12px;
  }

  #resultPanel .result-empty-state {
    padding-top: 26px;
  }
}

@media (max-width: 768px) {
  .workflow-guide {
    margin: 0 0 5px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .top-bar {
    height: auto !important;
    min-height: 108px !important;
    max-height: none !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  .top-bar-brand {
    flex: 0 0 auto !important;
    height: 38px;
  }

  .brand-wordmark-img {
    width: 104px;
  }

  .top-bar-right {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px !important;
    width: 100%;
    max-height: none !important;
  }

  .top-bar .balance-pill {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
  }

  .top-bar .upgrade-plan-btn,
.top-bar .key-btn--topbar,
.top-bar .top-bar-service-link {
    height: 36px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  .top-bar .upgrade-plan-btn {
    grid-column: 1 / 2;
  }

  .top-bar .key-btn--topbar,
.top-bar .top-bar-service-link {
    font-size: 12px !important;
  }

  .page-container,
.app-container {
    height: calc(100vh - 108px);
    scroll-padding-top: 108px;
  }

  .sidebar-footer-credits,
.vip-card--quiet {
    display: none !important;
  }

  #sidebarMenuRoot .nav-btn {
    min-width: 118px !important;
  }
}

/* Codex density pass 2026-06-02: keep the core generation form visible on one screen. */
@media (min-width: 1024px) {
  .main-area > .yj-card.yj-card--panel {
    padding: 7px 10px 9px !important;
  }

  .workflow-guide {
    min-height: 26px;
    margin: 0 0 5px;
    padding: 4px 8px;
    gap: 6px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
  }

  .workflow-guide__item {
    min-height: 18px;
  }

  .workflow-guide__item--active {
    padding: 0 7px;
  }

  .main-area .param-group,
.main-area .model-section,
.main-area .upload-section-group,
.main-area .poster-feature-block {
    margin-bottom: 7px;
  }

  #panelGptImage #gpt-image-panel .gpt-image-stack,
#panelNanoBanana #nano-banana-panel .gpt-image-stack,
#gpt-image-form-root.params-section--saas-compact .saas-step-row-upload-prompt {
    gap: 6px;
  }

  #panelGptImage #gpt-image-panel .gpt-step-card,
#panelNanoBanana #nano-banana-panel .gpt-step-card {
    padding: 8px 10px !important;
  }

  #panelGptImage #gpt-image-panel .gpt-step-card--upload,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
    min-height: 146px;
  }

  #panelGptImage #gpt-image-panel .gpt-step-card--prompt,
#panelNanoBanana #nano-banana-panel .gpt-step-card--prompt {
    min-height: 188px;
  }

  #panelGptImage #gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
#panelNanoBanana #nano-banana-panel .gpt-upload-block .upload-block__body--preview-only,
#panelGptImage #gpt-image-panel .gpt-upload-block .preview-container.preview-area,
#panelNanoBanana #nano-banana-panel .gpt-upload-block .preview-container.preview-area,
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact,
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact,
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
    min-height: 104px !important;
  }

  #panelGptImage #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
    min-height: 82px !important;
  }

  #panelGptImage #gpt-image-panel .gpt-prompt-textarea,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea {
    min-height: 66px;
    height: 76px;
    max-height: 110px;
    padding: 7px 10px;
  }

  #panelGptImage #gpt-image-panel .gpt-aspect-clarity-card,
#panelNanoBanana #nano-banana-panel .gpt-aspect-clarity-card {
    padding: 7px 10px;
  }

  #panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt,
#panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt {
    padding-top: 6px;
  }

  #panelGptImage #gpt-image-panel .generate-btn,
#panelNanoBanana #nano-banana-panel .generate-btn,
#panelStandard .generate-btn {
    min-height: 42px;
    height: 42px;
    max-height: 42px;
  }
}

/* Keep the same compact rhythm when the browser pane reports a narrower viewport. */
#panelGptImage #gpt-image-panel .gpt-image-stack,
#panelNanoBanana #nano-banana-panel .gpt-image-stack,
#gpt-image-form-root.params-section--saas-compact .saas-step-row-upload-prompt {
  gap: 6px;
}

#panelGptImage #gpt-image-panel .gpt-step-card--upload,
#panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
  min-height: 146px;
}

#panelGptImage #gpt-image-panel .gpt-step-card--prompt,
#panelNanoBanana #nano-banana-panel .gpt-step-card--prompt {
  min-height: 188px;
}

#panelGptImage #gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
#panelNanoBanana #nano-banana-panel .gpt-upload-block .upload-block__body--preview-only,
#panelGptImage #gpt-image-panel .gpt-upload-block .preview-container.preview-area,
#panelNanoBanana #nano-banana-panel .gpt-upload-block .preview-container.preview-area,
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact,
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact,
#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 104px !important;
}

#panelGptImage #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
#panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 82px !important;
}

#panelGptImage #gpt-image-panel .gpt-prompt-textarea,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea {
  min-height: 66px;
  height: 76px;
  max-height: 110px;
  padding: 7px 10px;
}

#panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt,
#panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt {
  padding-top: 6px;
}

@media (max-width: 430px) {
  .top-bar {
    min-height: 112px !important;
  }

  .top-bar-right {
    grid-template-columns: minmax(0, 1fr) 76px 64px;
  }

  .top-bar .balance-pill .balance-text {
    font-size: 12px;
  }

  .page-container,
.app-container {
    height: calc(100vh - 112px);
    scroll-padding-top: 112px;
  }

  #sidebarMenuRoot .nav-btn {
    min-width: 112px !important;
    height: 42px !important;
  }

}

@media (max-width: 768px) {
  .top-bar {
    min-height: 104px !important;
  }

  .top-bar .top-bar-service-link {
    display: none !important;
  }

  .top-bar-right {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    align-content: start !important;
  }

  .top-bar .balance-pill {
    grid-column: 1 / -1 !important;
  }

  .top-bar .upgrade-plan-btn {
    grid-column: 1 / 2 !important;
  }

  .top-bar .key-btn--topbar {
    grid-column: 2 / 3 !important;
  }

  .top-bar .upgrade-plan-btn .top-bar-cta__text--full,
.top-bar-service-link__text--full {
    display: none !important;
  }

  .top-bar .upgrade-plan-btn .top-bar-cta__text--short,
.top-bar-service-link__text--short {
    display: inline !important;
  }

  .page-container,
.app-container {
    height: calc(100vh - 104px) !important;
    scroll-padding-top: 104px !important;
  }
}

@media (max-width: 430px) {
  .top-bar {
    min-height: 104px !important;
  }

  .top-bar-right {
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  .page-container,
.app-container {
    height: calc(100vh - 104px) !important;
    scroll-padding-top: 104px !important;
  }
}

/* Sidebar group visual quieting 2026-06-03 */
#sidebarMenuRoot .nav-group {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: none !important;
}

#sidebarMenuRoot .nav-group-header {
  background: transparent !important;
  color: var(--text-tertiary, #64748b) !important;
  min-height: 26px !important;
  margin-bottom: 6px !important;
  padding: 0 6px !important;
  position: relative;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: default !important;
  pointer-events: none;
  user-select: none;
}

#sidebarMenuRoot .nav-group-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: #cbd5e1;
  transform: translateY(-50%);
}

#sidebarMenuRoot .nav-group .nav-group-header::before {
  display: none;
}

#sidebarMenuRoot .nav-group-header .nav-group-icon {
  opacity: 0.52;
}

#sidebarMenuRoot .nav-group .nav-btn {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #64748b !important;
  box-shadow: none !important;
}

#sidebarMenuRoot .nav-group .nav-btn.active {
  background: #ffffff !important;
  color: #5b21b6 !important;
  border-color: rgba(124, 58, 237, 0.24) !important;
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.1) !important;
}

@media (max-width: 900px) {
  #sidebarMenuRoot .nav-group .nav-btn {
    background: rgba(255, 255, 255, 0.78) !important;
    border-left-width: 3px !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(1) .nav-btn {
    border-left-color: #a78bfa !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(3) .nav-btn {
    border-left-color: #67e8f9 !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(5) .nav-btn {
    border-left-color: #fbbf24 !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(7) .nav-btn {
    border-left-color: #cbd5e1 !important;
  }

  #sidebarMenuRoot .nav-group .nav-btn.active {
    border-left-color: #8b5cf6 !important;
  }
}

@media (max-width: 900px) {
  #sidebarMenuRoot .nav-group:nth-of-type(1) .nav-btn,
#sidebarMenuRoot .nav-group:nth-of-type(3) .nav-btn,
#sidebarMenuRoot .nav-group:nth-of-type(5) .nav-btn,
#sidebarMenuRoot .nav-group:nth-of-type(7) .nav-btn {
    background: rgba(255, 255, 255, 0.82) !important;
    background-image: none !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(1) .nav-btn {
    border-left-color: #ddd6fe !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(3) .nav-btn {
    border-left-color: #cffafe !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(5) .nav-btn {
    border-left-color: #fef3c7 !important;
  }

  #sidebarMenuRoot .nav-group:nth-of-type(7) .nav-btn {
    border-left-color: #e2e8f0 !important;
  }

  #sidebarMenuRoot .nav-group .nav-btn.active {
    background: #ffffff !important;
    background-image: none !important;
    border-left-color: #8b5cf6 !important;
  }
}

/* Notice button final placement overrides. */
@media (min-width: 769px) {
  .top-bar .notice-btn--topbar {
    flex: 0 0 42px;
  }
}

@media (max-width: 768px) {
  .top-bar-right {
    grid-template-columns: minmax(0, 1fr) 40px 76px !important;
    gap: 6px !important;
  }

  .top-bar .balance-pill {
    display: none !important;
  }

  .top-bar .notice-btn--topbar {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .top-bar .upgrade-plan-btn {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  .top-bar .key-btn--topbar {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
  }
}

/* Mobile top bar compact pass: one action row, more room for the creation form. */
@media (max-width: 768px) {
  .top-bar {
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    align-items: center !important;
  }

  .top-bar-brand {
    height: 38px !important;
    align-items: center !important;
  }

  .brand-wordmark-img {
    width: 92px !important;
    max-width: 28vw !important;
  }

  .top-bar-right {
    align-items: center !important;
  }

  .top-bar .upgrade-plan-btn,
.top-bar .key-btn--topbar {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 9px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .top-bar .notice-btn__icon {
    width: 17px !important;
    height: 17px !important;
  }

  .notice-btn__badge {
    top: -7px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    font-size: 9px;
    line-height: 13px;
  }

  .page-container,
.app-container {
    height: calc(100vh - 58px) !important;
    scroll-padding-top: 58px !important;
  }
}

@media (max-width: 430px) {
  .top-bar {
    min-height: 56px !important;
    height: 56px !important;
  }

  .brand-wordmark-img {
    width: 86px !important;
  }

  .top-bar-right {
    grid-template-columns: minmax(0, 1fr) 38px 72px !important;
  }

  .top-bar .upgrade-plan-btn,
.top-bar .key-btn--topbar {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 11px !important;
  }

  .top-bar .notice-btn--topbar {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .page-container,
.app-container {
    height: calc(100vh - 56px) !important;
    scroll-padding-top: 56px !important;
  }
}

/* Final sidebar active-state emphasis: keep the chosen feature visibly selected. */
#sidebarMenuRoot .nav-btn.active,
#sidebarMenuRoot .nav-group .nav-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(124, 58, 237, 0.13) 58%, rgba(251, 113, 133, 0.14) 100%) !important;
  color: #5b21b6 !important;
  border-color: rgba(139, 92, 246, 0.34) !important;
  border-left-color: #7c3aed !important;
  box-shadow: 0 7px 18px rgba(124, 58, 237, 0.17), 0 0 0 1px rgba(167, 139, 250, 0.18) inset !important;
  transform: translateX(1px) !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__label,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__icon,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon {
  color: #7c3aed !important;
  transform: scale(1.16) !important;
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.38)) !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__icon .lucide-nav-svg,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon .lucide-nav-svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.4 !important;
}

@media (max-width: 900px) {
  #sidebarMenuRoot .nav-btn.active,
#sidebarMenuRoot .nav-group .nav-btn.active {
    transform: none !important;
    box-shadow: 0 5px 14px rgba(124, 58, 237, 0.14), 0 0 0 1px rgba(167, 139, 250, 0.15) inset !important;
  }

  #sidebarMenuRoot .nav-btn.active .nav-btn__label,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
    font-size: 13px !important;
  }

#sidebarMenuRoot .nav-btn.active .nav-btn__icon,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon {
  transform: scale(1.1) !important;
}
}

/* Self-media article feature page 鈥?aligned with main-image / detail-page rhythm */
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle.selfmedia-article-panel {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
  padding: 1px 10px;
  box-sizing: border-box;
}

.selfmedia-article-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.selfmedia-step-card,
.selfmedia-upload-card {
  padding: 10px 12px;
  border: 1px solid #e8ecf3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

.selfmedia-step-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.selfmedia-draft-card {
  padding: 10px 12px;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  background: #fff;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .module-title.step-title-row {
  margin: 0 0 8px !important;
  min-height: 19px !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .step-title-main,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .section-step-label {
  font-size: 12px !important;
  line-height: 18px !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .step-inline-hint {
  font-size: 11px !important;
  line-height: 18px !important;
}

.selfmedia-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.selfmedia-upload-card {
  position: relative;
}

.selfmedia-upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  margin-top: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f7f8fb;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}

.selfmedia-upload-zone:hover,
.selfmedia-upload-zone--drag {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(139, 92, 246, 0.06);
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 88px;
  overflow: hidden;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  text-align: center;
  box-sizing: border-box;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder__icon {
  display: none;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder__line,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder__sub {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder__line {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder__sub {
  margin-top: 3px;
  color: #64748b;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone.selfmedia-upload-zone--has-items {
  justify-content: flex-start;
  align-items: center;
  min-height: 100px;
  height: 100px;
  max-height: 100px;
  padding: 8px 10px;
  border-style: solid;
  border-color: #e2e8f0;
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone.selfmedia-upload-zone--has-items .rewrite-slot-inner {
  position: static;
  width: auto;
  min-height: 84px;
  height: 84px;
  overflow: visible;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-placeholder[hidden],
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview[hidden] {
  display: none !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone.selfmedia-upload-zone--has-items .rewrite-slot-preview {
  position: static;
  inset: auto;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 84px;
  min-height: 84px;
  background: transparent;
  overflow: visible;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__add {
  flex: 0 0 84px;
  width: 84px;
  min-width: 84px;
  height: 84px;
  min-height: 84px;
  border-radius: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item {
  position: relative;
  border: 1px solid #e5e9f2;
  background: #f7f8fb;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__fname,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__badge {
  display: none !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item.upload-error {
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item .upload-status-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  max-width: calc(100% - 8px);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item .upload-status-badge.error {
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__item .upload-status-badge.uploading {
  background: color-mix(in srgb, var(--color-primary) 92%, transparent);
  color: #fff;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px dashed #dfe5ef;
  background: #fff;
  color: #64748b;
  cursor: pointer;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__add-plus {
  font-size: 22px;
  line-height: 1;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone .rewrite-slot-preview__add-text {
  display: none;
}

.selfmedia-upload-empty {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px;
  color: #64748b;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
}

.selfmedia-upload-empty strong {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.selfmedia-upload-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  padding: 6px;
}

.selfmedia-upload-preview:empty {
  display: none;
}

.selfmedia-upload-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e5e9f2;
  border-radius: 6px;
  background: #f8fafc;
}

.selfmedia-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.selfmedia-upload-thumb span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

.selfmedia-upload-clear {
  position: absolute;
  right: 12px;
  top: 12px;
}

.selfmedia-step-card--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.selfmedia-step-card--grid .standard-output-select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selfmedia-step-card--grid .gpt-setting-select,
.selfmedia-step-card--grid .custom-input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.selfmedia-textarea {
  width: 100%;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #e5e9f2;
  border-radius: 5px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}

.selfmedia-topic-textarea {
  min-height: 38px;
  height: 38px;
  max-height: 38px;
  padding: 10px 12px;
  line-height: 18px;
  overflow: hidden;
  resize: none;
  white-space: nowrap;
}

.selfmedia-textarea:focus,
.selfmedia-draft-card .custom-input:focus {
  outline: none;
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.selfmedia-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.selfmedia-role-trigger {
  width: 100%; min-height: 58px; padding: 8px 10px;
  border: 1px solid #e5e9f2; border-radius: 8px; background: #fff; color: #172033;
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
}
.selfmedia-role-trigger:hover,
.selfmedia-role-trigger[aria-expanded="true"] { border-color: var(--yj-appearance-primary,#a78bfa); box-shadow: 0 0 0 2px rgba(124,58,237,.08); }
.selfmedia-role-trigger__icon {
  width: 28px; height: 28px; border-radius: 7px; background: #f3e8ff; color: var(--yj-appearance-primary,#7c3aed);
  display: grid; place-items: center; flex: 0 0 auto; font-size: 12px; font-weight: 900;
}
.selfmedia-role-trigger__content { min-width: 0; flex: 1; display: grid; gap: 2px; }
.selfmedia-role-trigger__title { font-size: 12px; font-weight: 800; }
.selfmedia-role-trigger__selection { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 700; }
.selfmedia-role-trigger__meta { color: var(--yj-appearance-primary,#7c3aed); font-size: 10px; }
.selfmedia-role-trigger__chevron { color: var(--yj-appearance-primary,#7c3aed); transition: transform .16s ease; }
.selfmedia-role-trigger[aria-expanded="true"] .selfmedia-role-trigger__chevron { transform: rotate(180deg); }
.selfmedia-role-menu { padding-top: 10px; }

.selfmedia-route-btn {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  padding: 0 10px;
  border: 1px solid #e5e9f2;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.selfmedia-route-btn:hover:not(.active) {
  border-color: #c4b5fd;
  background: #faf5ff;
  color: #6d28d9;
}

.selfmedia-route-btn.active {
  border-color: #8b5cf6;
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.14);
}

.selfmedia-model-btns:not(.selfmedia-model-dropdown) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.selfmedia-model-btns:not(.selfmedia-model-dropdown) .model-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 42px;
  height: 42px;
  max-height: 42px;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
}

.selfmedia-model-btns:not(.selfmedia-model-dropdown) .model-btn .model-name {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selfmedia-model-btns:not(.selfmedia-model-dropdown) .model-btn .model-desc {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-app-feature="main-image"] .main-area #panelStandard .poster-output-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .poster-output-select-grid,
#panelStandard:not(.mode-poster) .poster-output-select-grid {
  display: none !important;
}

.poster-output-select-grid {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-output-select-grid,
#panelStandard.mode-poster .poster-output-select-grid {
  display: grid !important;
}

.poster-output-select-grid .standard-output-select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.poster-output-select-grid .gpt-setting-select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.selfmedia-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.poster-output-select-grid {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

body[data-app-feature="poster"] .main-area #panelStandard .poster-output-select-grid,
#panelStandard.mode-poster .poster-output-select-grid {
  display: grid !important;
}

.poster-output-select-grid .standard-output-select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.poster-output-select-grid .gpt-setting-select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.selfmedia-output-grid .standard-output-select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selfmedia-output-grid .gpt-setting-select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.selfmedia-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.selfmedia-switch-row input {
  width: 32px;
  height: 18px;
  accent-color: #0f766e;
}

.selfmedia-switch-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.selfmedia-switch-row strong {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.selfmedia-switch-row small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
}

.selfmedia-confirm-control {
  padding-top: 0;
  padding-bottom: 0;
}

.selfmedia-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.feature-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.feature-action-row .generate-btn,
.feature-action-row .rewrite-submit-btn {
  min-width: 0;
}

.feature-reset-btn {
  min-width: 64px;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  align-self: stretch;
  border-radius: 7px;
  white-space: nowrap;
}

#mainGenerateSticky .feature-reset-btn,
#gpt-image-panel .feature-reset-btn,
#nano-banana-panel .feature-reset-btn,
#panelRewrite .feature-reset-btn {
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
}

body[data-app-feature="main-image"] #mainGenerateSticky .feature-reset-btn,
body[data-app-feature="detail-page"] #mainGenerateSticky .feature-reset-btn,
body[data-app-feature="poster"] #mainGenerateSticky .feature-reset-btn,
body[data-app-feature="selfmedia-article"] .selfmedia-secondary-btn.feature-reset-btn {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
}

body[data-app-feature="rewrite"] #mainGenerateSticky,
body[data-app-feature="operation-center"] #mainGenerateSticky {
  display: none !important;
}

.selfmedia-secondary-btn.feature-reset-btn {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
}

.selfmedia-primary-btn {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}

.selfmedia-secondary-btn {
  min-width: 64px;
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
}

.selfmedia-draft-card {
  display: grid;
  gap: 10px;
  border-color: rgba(14, 165, 233, 0.28);
  background:
    linear-gradient(180deg, rgba(236, 254, 255, 0.72), #fff 32%);
}

.selfmedia-draft-card[hidden] {
  display: none !important;
}

.selfmedia-draft-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.selfmedia-draft-card label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.selfmedia-draft-card .custom-input {
  height: 34px;
  border-color: #dbe3ef;
  border-radius: 7px;
  font-size: 12px;
}

.selfmedia-copy-btn {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

body[data-app-feature="selfmedia-article"] #mainGenerateSticky {
  display: none !important;
}

body[data-app-feature="main-image"] #mainGenerateSticky.main-generate-sticky,
body[data-app-feature="detail-page"] #mainGenerateSticky.main-generate-sticky,
body[data-app-feature="poster"] #mainGenerateSticky.main-generate-sticky,
body[data-app-feature="matting-refine"] #mainGenerateSticky.main-generate-sticky {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

body[data-app-feature="matting-refine"] #panelStandard.dynamic-panel--visible {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: 12px !important;
}

body[data-app-feature="matting-refine"] #mainGenerateSticky.main-generate-sticky {
  margin-top: 10px !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-model-btns {
  gap: 8px !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-model-btn {
  min-height: 46px !important;
  height: 46px !important;
  max-height: 46px !important;
  padding: 5px 8px !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-model-btn__name {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-model-btn__cost {
  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* Desktop scroll polish: fit one screen when tall; scroll inside panel when viewport shrinks. */
body[data-app-feature="gpt-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="nano-banana"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="rewrite"] .main-area > .yj-card.yj-card--panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="gpt-image"] .main-area > .yj-card.yj-card--panel > .auth-onboard-banner,
body[data-app-feature="nano-banana"] .main-area > .yj-card.yj-card--panel > .auth-onboard-banner,
body[data-app-feature="rewrite"] .main-area > .yj-card.yj-card--panel > .auth-onboard-banner {
  flex: 0 0 auto;
}

body[data-app-feature="gpt-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="nano-banana"] .main-area .dynamic-panel-stack,
body[data-app-feature="rewrite"] .main-area .dynamic-panel-stack {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 24px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage.dynamic-panel--visible,
body[data-app-feature="nano-banana"] #panelNanoBanana.dynamic-panel--visible,
body[data-app-feature="rewrite"] #panelRewrite.dynamic-panel--visible {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel.params-section--gpt-image {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  padding: 5px !important;
}

body[data-app-feature="nano-banana"] #nano-banana-panel.params-section--gpt-image {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  padding: 5px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-image-stack,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-image-stack {
  gap: 6px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-step-card,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-step-card {
  padding: 6px 8px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-step-card > .step-title-row,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-step-card > .step-title-row {
  min-height: 18px !important;
  margin-bottom: 4px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-step-card--upload,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-step-card--upload {
  min-height: 0 !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-upload-block .preview-container.preview-area,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-upload-block .preview-container.preview-area {
  max-height: 82px !important;
}

body[data-app-feature="gpt-image"] #gptImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="nano-banana"] #nanoImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="gpt-image"] #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
body[data-app-feature="nano-banana"] #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 70px !important;
  height: 76px !important;
  max-height: 82px !important;
  padding: 6px 10px !important;
}

body[data-app-feature="gpt-image"] #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
body[data-app-feature="nano-banana"] #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 50px !important;
  padding: 6px 8px !important;
  gap: 3px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-prompt-textarea,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-prompt-textarea {
  min-height: 88px !important;
  height: 88px !important;
  max-height: 96px !important;
  padding: 8px 10px !important;
  resize: none !important;
  transition: min-height 0.18s ease, height 0.18s ease !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-prompt-textarea:focus,
body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-prompt-textarea:focus-visible,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-prompt-textarea:focus,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-prompt-textarea:focus-visible {
  min-height: 120px !important;
  height: 120px !important;
  max-height: 180px !important;
  resize: vertical !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-prompt-action-row,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-prompt-action-row {
  margin-top: 6px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-aspect-clarity-card,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-aspect-clarity-card {
  padding: 6px 8px !important;
  gap: 6px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-setting-select,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-setting-select {
  height: 30px !important;
  min-height: 30px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-count-section,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-count-section {
  padding: 6px 8px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-count-section .gpt-count-row,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-count-section .gpt-count-row {
  gap: 6px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn,
body[data-app-feature="nano-banana"] #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn {
  min-height: 30px !important;
  height: 30px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .saas-panel-sticky-actions--gpt,
body[data-app-feature="nano-banana"] #nano-banana-panel .saas-panel-sticky-actions--gpt,
#panelOneClickVideo .saas-panel-sticky-actions--gpt {
  margin-top: 0 !important;
  padding-top: 6px !important;
}

body[data-app-feature="gpt-image"] #gpt-image-panel .generate-btn.generate-btn--standard,
body[data-app-feature="nano-banana"] #nano-banana-panel .generate-btn.generate-btn--standard {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .params-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .params-section {
  overflow: visible !important;
}

body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: calc(100% - 78px) !important;
  max-height: calc(100% - 78px) !important;
  padding: 1px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard #sellpointGroup.param-group,
body[data-app-feature="detail-page"] .main-area #panelStandard #sellpointGroup.param-group,
body[data-app-feature="poster"] .main-area #panelStandard #sellpointGroup.param-group {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: auto !important;
  max-height: none !important;
  padding: 1px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product {
  padding: 10px !important;
  gap: 8px !important;
}

/* E-commerce compact upload: see styles/upload-zone-unify.css */

body[data-app-feature="main-image"] .main-area #panelStandard .gpt-aspect-clarity-card,
body[data-app-feature="detail-page"] .main-area #panelStandard .gpt-aspect-clarity-card {
  padding: 12px !important;
  gap: 10px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="main-image"] .main-area #panelStandard .commerce-platform-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .commerce-platform-select-grid {
  gap: 10px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-setting-select,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-setting-select {
  height: 36px !important;
  min-height: 36px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .main-advanced-settings {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-summary {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .model-section,
body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .model-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .target-platform-section {
  padding: 12px;
  border: 1px solid #e8ecf3;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

body[data-app-feature="main-image"] .main-area #panelStandard .model-section > .module-title,
body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-section > .module-title,
body[data-app-feature="detail-page"] .main-area #panelStandard .model-section > .module-title,
body[data-app-feature="detail-page"] .main-area #panelStandard .target-platform-section > .module-title {
  margin-bottom: 10px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-field,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-output-select-field {
  gap: 8px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .upload-ref-extras,
body[data-app-feature="detail-page"] .main-area #panelStandard .upload-ref-extras {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  overflow: visible !important;
}

body[data-app-feature="main-image"] #panelStandard #productUploadSection.upload-section-group,
body[data-app-feature="detail-page"] #panelStandard #productUploadSection.upload-section-group {
  gap: 12px !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .params-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .params-section {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

body[data-app-feature="main-image"] .main-area #panelStandard #sellpointGroup.param-group,
body[data-app-feature="detail-page"] .main-area #panelStandard #sellpointGroup.param-group {
  margin-bottom: 0 !important;
}


body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings:not([open]) > .main-advanced-body,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings:not([open]) > .main-advanced-body {
  display: none !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-body,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings[open] .main-advanced-body {
  display: block !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-style-field,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-style-field {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="main-image"] .main-area #panelStandard #sellpointGroup.param-group,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-settings,
body[data-app-feature="detail-page"] .main-area #panelStandard #sellpointGroup.param-group {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .main-usecase-block:not([hidden]),
body[data-app-feature="detail-page"] .main-area #panelStandard .main-usecase-block:not([hidden]) {
  display: block !important;
  margin-top: 8px;
}

body[data-app-feature="matting-refine"] #panelStandard.dynamic-panel--visible:not(.mode-matting) {
  padding-bottom: 0 !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting {
  gap: 12px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting #standardUploadMount {
  gap: 12px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting #mattingPromptWrap {
  gap: 10px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting .upload-block--product {
  padding: 12px !important;
  gap: 10px !important;
  min-height: 0 !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting #uploadZone {
  min-height: 150px !important;
  height: 150px !important;
  max-height: 150px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting .upload-block .upload-zone .add-image-btn {
  min-height: 76px !important;
  padding: 10px 12px !important;
  gap: 5px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting .upload-block .upload-zone .add-image-btn__plus i {
  font-size: 24px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting .upload-block .upload-zone .add-image-btn .upload-text {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-step-card {
  padding: 10px !important;
}

body[data-app-feature="matting-refine"] #mattingPromptWrap > section.matting-step-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-app-feature="matting-refine"] #mattingPromptWrap > section.matting-step-card:nth-of-type(2) {
  flex-wrap: wrap;
}

body[data-app-feature="matting-refine"] .main-area .matting-step-card > .step-title-row {
  min-height: 18px !important;
  margin-bottom: 8px !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-tool-btns,
body[data-app-feature="matting-refine"] .main-area .matting-model-btns {
  gap: 8px !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-tool-btn {
  min-height: 38px !important;
  height: 38px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

body[data-app-feature="matting-refine"] .main-area .matting-model-btn {
  min-height: 46px !important;
  height: 46px !important;
  max-height: 46px !important;
  padding: 5px 8px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting .matting-prompt-textarea {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 48px !important;
  padding: 8px 10px !important;
}

body[data-app-feature="matting-refine"] #mainGenerateSticky.main-generate-sticky {
  margin-top: 10px !important;
}

.sidebar,
#sidebarMenuRoot,
.main-area .dynamic-panel-stack,
.main-area .dynamic-panel,
.main-area .params-section,
.main-area #panelStandard,
#panelGptImage,
#panelNanoBanana,
#panelRewrite {
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar,
#sidebarMenuRoot::-webkit-scrollbar,
.main-area .dynamic-panel-stack::-webkit-scrollbar,
.main-area .dynamic-panel::-webkit-scrollbar,
.main-area .params-section::-webkit-scrollbar,
.main-area #panelStandard::-webkit-scrollbar,
#panelGptImage::-webkit-scrollbar,
#panelNanoBanana::-webkit-scrollbar,
#panelRewrite::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.yj-drag-scroll-area {
  cursor: default;
}

.yj-drag-scroll-area--dragging {
  cursor: grabbing;
  user-select: none;
}

@media (min-width: 768px) {
  .main-area .dynamic-panel-stack,
.main-area .dynamic-panel.dynamic-panel--visible,
.main-area #panelStandard.dynamic-panel--visible,
#panelGptImage.dynamic-panel--visible,
#panelNanoBanana.dynamic-panel--visible,
#panelRewrite.dynamic-panel--visible {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.58) transparent;
  }

  .main-area .dynamic-panel-stack {
    overscroll-behavior: contain;
    scroll-padding-bottom: 72px;
  }

  .main-area .dynamic-panel-stack::-webkit-scrollbar,
.main-area .dynamic-panel.dynamic-panel--visible::-webkit-scrollbar,
.main-area #panelStandard.dynamic-panel--visible::-webkit-scrollbar,
#panelGptImage.dynamic-panel--visible::-webkit-scrollbar,
#panelNanoBanana.dynamic-panel--visible::-webkit-scrollbar,
#panelRewrite.dynamic-panel--visible::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .main-area .dynamic-panel-stack::-webkit-scrollbar-track,
.main-area .dynamic-panel.dynamic-panel--visible::-webkit-scrollbar-track,
.main-area #panelStandard.dynamic-panel--visible::-webkit-scrollbar-track,
#panelGptImage.dynamic-panel--visible::-webkit-scrollbar-track,
#panelNanoBanana.dynamic-panel--visible::-webkit-scrollbar-track,
#panelRewrite.dynamic-panel--visible::-webkit-scrollbar-track {
    background: transparent;
  }

  .main-area .dynamic-panel-stack::-webkit-scrollbar-thumb,
.main-area .dynamic-panel.dynamic-panel--visible::-webkit-scrollbar-thumb,
.main-area #panelStandard.dynamic-panel--visible::-webkit-scrollbar-thumb,
#panelGptImage.dynamic-panel--visible::-webkit-scrollbar-thumb,
#panelNanoBanana.dynamic-panel--visible::-webkit-scrollbar-thumb,
#panelRewrite.dynamic-panel--visible::-webkit-scrollbar-thumb {
    min-height: 38px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.5);
    background-clip: content-box;
  }

  .main-area .dynamic-panel-stack:hover::-webkit-scrollbar-thumb,
.main-area .dynamic-panel.dynamic-panel--visible:hover::-webkit-scrollbar-thumb,
.main-area #panelStandard.dynamic-panel--visible:hover::-webkit-scrollbar-thumb,
#panelGptImage.dynamic-panel--visible:hover::-webkit-scrollbar-thumb,
#panelNanoBanana.dynamic-panel--visible:hover::-webkit-scrollbar-thumb,
#panelRewrite.dynamic-panel--visible:hover::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.58);
    background-clip: content-box;
  }

  body[data-app-feature="matting-refine"] #panelStandard.mode-matting.dynamic-panel--visible {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.58) transparent;
    scroll-padding-bottom: 72px;
  }

  body[data-app-feature="matting-refine"] #panelStandard.mode-matting.dynamic-panel--visible::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  body[data-app-feature="matting-refine"] #panelStandard.mode-matting.dynamic-panel--visible::-webkit-scrollbar-track {
    background: transparent;
  }

  body[data-app-feature="matting-refine"] #panelStandard.mode-matting.dynamic-panel--visible::-webkit-scrollbar-thumb {
    min-height: 38px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.5);
    background-clip: content-box;
  }

  body[data-app-feature="matting-refine"] #panelStandard.mode-matting.dynamic-panel--visible:hover::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.58);
    background-clip: content-box;
  }
}

.yj-drag-scroll-area--dragging * {
  user-select: none;
}

@media (max-width: 768px) {
  .selfmedia-upload-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .selfmedia-route-grid,
.selfmedia-model-btns:not(.selfmedia-model-dropdown),
.poster-output-select-grid,
.selfmedia-output-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final desktop sidebar collapse controls. */
@media (min-width: 1024px) {
  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 12px 8px !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-collapse-toggle--inline {
    display: inline-flex !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn {
    display: flex !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn__label,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-tag,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group-title,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-divider,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-use-cases-dock,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-wallet {
    display: none !important;
  }
}

/* Operation center slash image reference menu. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-chat-composer {
  position: relative !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: calc(100% - 42px) !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 268px !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu__head {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #0f172a !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu__head strong {
  font-weight: 900 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu__head span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu button {
  position: relative !important;
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 6px !important;
  border: 1px solid #e5e9f2 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  cursor: pointer !important;
  text-align: left !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu button:hover {
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu img {
  width: 100% !important;
  height: 54px !important;
  display: block !important;
  border-radius: 5px !important;
  object-fit: cover !important;
  background: #fff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu button span {
  overflow: hidden !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-slash-reference-menu button em {
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* Operation center canvas select mode and multi-selection. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-tools button.is-active {
  border-color: rgba(124, 58, 237, 0.58) !important;
  background: rgba(124, 58, 237, 0.1) !important;
  color: #6d28d9 !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: absolute !important;
  top: 76px !important;
  right: auto !important;
  left: 16px !important;
  z-index: 44 !important;
  width: 108px !important;
  max-width: calc(100% - 32px) !important;
  gap: 2px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  transform: none !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar span {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 0 2px !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar em {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 4px !important;
  color: #94a3b8 !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #334155 !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar #opsCanvasCreateGroupSelected {
  background: #f3e8ff !important;
  color: #5b21b6 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar #opsCanvasCreateGroupSelected:hover {
  background: #ede9fe !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar #opsCanvasDeleteSelected {
  border: 0 !important;
  color: #dc2626 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar button:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar #opsCanvasDeleteSelected:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-bar button:disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  background: transparent !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport.is-select-mode {
  cursor: crosshair !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport.is-select-mode .ops-canvas-card.is-selected,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport.is-select-mode .ops-canvas-card.is-multi-selected {
  cursor: grab !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-viewport.is-select-mode .ops-canvas-card.is-dragging {
  cursor: grabbing !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-box {
  position: absolute !important;
  z-index: 42 !important;
  border: 1px solid rgba(124, 58, 237, 0.78) !important;
  border-radius: 6px !important;
  background: rgba(124, 58, 237, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-selection-box[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected .ops-canvas-image-object {
  box-shadow:
    0 22px 54px rgba(15, 23, 42, 0.2),
    0 0 0 3px rgba(124, 58, 237, 0.62),
    0 0 0 8px rgba(124, 58, 237, 0.13) !important;
  transform: translateY(-2px) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected::after,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected::after {
  content: "已选中" !important;
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  z-index: 4 !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 999px !important;
  background: rgba(109, 40, 217, 0.9) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 22px !important;
  pointer-events: none !important;
  box-shadow: 0 8px 18px rgba(91, 33, 182, 0.22) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected::before,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  z-index: -1 !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(124, 58, 237, 0.055) !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected {
  cursor: move !important;
}

/* Final one-screen overrides for free image tools; placed last to beat legacy ID-heavy rules. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-image-stack,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-image-stack {
  row-gap: 5px !important;
  column-gap: 5px !important;
  gap: 5px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card {
  padding: 5px 8px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card > .step-title-row,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card > .step-title-row {
  min-height: 18px !important;
  margin-bottom: 3px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-upload-block .preview-container.preview-area {
  max-height: 74px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(:has(.uploaded-item)) {
  min-height: 62px !important;
  height: 68px !important;
  max-height: 74px !important;
  padding: 5px 8px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 46px !important;
  padding: 5px 8px !important;
  gap: 2px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn__plus,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn__plus {
  font-size: 18px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImagePromptInput.gpt-prompt-textarea,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImagePromptInput.gpt-prompt-textarea {
  min-height: 130px !important;
  height: 130px !important;
  max-height: 130px !important;
  padding: 8px 10px !important;
  resize: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-prompt-action-row,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-prompt-action-row {
  margin-top: 5px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card.gpt-aspect-clarity-card,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card.gpt-aspect-clarity-card {
  padding: 5px 8px !important;
  gap: 5px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-aspect-clarity-card .module-title,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-aspect-clarity-card .module-title {
  min-height: 18px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-setting-select,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-setting-select {
  height: 28px !important;
  min-height: 28px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section {
  padding: 5px 8px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-row,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-row {
  gap: 5px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn {
  min-height: 28px !important;
  height: 28px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt {
  padding-top: 4px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-action-row,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-action-row,
#panelOneClickVideo .gpt-action-row {
  gap: 6px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageGenerateBtn.generate-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageGenerateBtn.generate-btn,
#panelOneClickVideo #ocvPrimaryBtn.generate-btn {
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
  min-height: 150px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--prompt,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--prompt {
  min-height: 180px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-prompt-controls,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-prompt-controls {
  min-height: 0 !important;
  height: auto !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-upload-block {
  min-height: 0 !important;
  padding: 6px 8px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-param,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-upload-param,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-prompt-group,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-prompt-group {
  min-height: 0 !important;
  margin-bottom: 0 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-upload-block .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-upload-block .preview-container.preview-area {
  min-height: 0 !important;
  height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .mobile-generate-bar__reset {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  body.has-desktop-generate-dock[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt,
body.has-desktop-generate-dock[data-app-feature="gpt-image"] #gpt-image-panel .saas-panel-sticky-actions--gpt,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] #nano-banana-panel .saas-panel-sticky-actions--gpt,
body.has-desktop-generate-dock[data-app-feature="gpt-image"] #gptImageGenerateBtn,
body.has-desktop-generate-dock[data-app-feature="gpt-image"] #gptImageResetBtn,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] #nanoImageGenerateBtn,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] #nanoImageResetBtn,
body.has-desktop-generate-dock[data-app-feature="matting-refine"] #mainGenerateSticky,
body.has-desktop-generate-dock[data-app-feature="main-image"] #mainGenerateSticky,
body.has-desktop-generate-dock[data-app-feature="detail-page"] #mainGenerateSticky,
body.has-desktop-generate-dock[data-app-feature="poster"] #mainGenerateSticky,
body.has-desktop-generate-dock[data-app-feature="rewrite"] #panelRewrite .rewrite-action-row,
body.has-desktop-generate-dock[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-action-row {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel {
    padding-bottom: 76px !important;
  }

  body[data-app-feature="gpt-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="nano-banana"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="matting-refine"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="rewrite"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel {
    padding-bottom: 96px !important;
  }

  body[data-app-feature="matting-refine"] #panelStandard.dynamic-panel--visible {
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: 96px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  body[data-app-feature="gpt-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="nano-banana"] .main-area .dynamic-panel-stack,
body[data-app-feature="rewrite"] .main-area .dynamic-panel-stack {
    scroll-padding-bottom: 96px !important;
  }

  body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="poster"] #panelStandard.dynamic-panel--visible {
    height: auto !important;
    max-height: none !important;
    padding: 1px 10px !important;
    overflow: visible !important;
    scroll-padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-app-feature="main-image"] .main-area .dynamic-panel-stack {
    flex: 0 1 auto !important;
    height: auto !important;
    max-height: calc(100% - 8px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop {
    position: fixed;
    left: var(--desktop-generate-left, 238px);
    bottom: var(--desktop-generate-bottom, 22px);
    z-index: 1285;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(112px, .38fr);
    align-items: center;
    gap: 8px;
    width: var(--desktop-generate-width, 420px);
    min-height: 66px;
    padding: 9px 10px;
    border: 1px solid rgba(124, 58, 237, .20);
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12), 0 0 0 4px rgba(124, 58, 237, .035);
    box-sizing: border-box;
    backdrop-filter: blur(18px);
    transform: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: none;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  body.has-blocking-modal-open .mobile-generate-bar.mobile-generate-bar--desktop,
.mobile-generate-bar.mobile-generate-bar--desktop.is-blocked-by-modal {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__meta {
    display: grid;
    gap: 3px;
    min-width: 0;
    grid-column: 1;
    padding-left: 2px;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__meta strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__meta span {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__reset,
.mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn {
    height: 42px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__reset {
    grid-column: 2;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn {
    grid-column: 3;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__reset {
    border: 1px solid #e2e8f0;
    color: #334155;
    background: #fff;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__reset:hover {
    border-color: rgba(124, 58, 237, .32);
    color: #6d28d9;
    background: #faf7ff;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 52%, #ec4899 100%);
    box-shadow: 0 10px 24px rgba(124, 58, 237, .24);
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn.is-disabled,
.mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn:disabled {
    opacity: .55;
    box-shadow: none;
    cursor: not-allowed;
  }
}

/* Browser comment: keep the free-image upload target at 120px tall. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block {
  box-sizing: border-box !important;
  height: 130px !important;
  min-height: 130px !important;
  max-height: 130px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block .preview-container.preview-area {
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact {
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 105px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--model,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--model {
  min-height: 85px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-param-card.gpt-aspect-clarity-card,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-param-card.gpt-aspect-clarity-card {
  min-height: 90px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section {
  min-height: 70px !important;
}

body[data-app-feature="detail-page"] #productUploadSection > section.upload-block.upload-block--product {
  min-height: 0 !important;
}

body[data-app-feature="detail-page"] #productUploadSection #uploadZone {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  padding: 12px 14px !important;
}

body[data-app-feature="detail-page"] #productUploadSection #addImageBtn {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  padding: 10px 12px !important;
}

body[data-app-feature="matting-refine"] #mattingPromptWrap > section.matting-step-card:nth-of-type(1) {
  min-height: 132px !important;
}

body[data-app-feature="matting-refine"] #mattingPromptWrap > section.matting-step-card:nth-of-type(2) {
  min-height: 156px !important;
}

body[data-app-feature="matting-refine"] #mattingPromptWrap > section.matting-step-card.matting-step-card--prompt:nth-of-type(3) {
  min-height: 92px !important;
}

body[data-app-feature="matting-refine"] #mattingModelBtns > button.matting-model-btn {
  min-height: 46px !important;
  height: 46px !important;
  max-height: 46px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact {
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 105px !important;
}

body[data-app-feature="matting-refine"] #productUploadSection > section.upload-block.upload-block--product {
  min-height: 190px !important;
}

body[data-app-feature="matting-refine"] #productUploadSection #uploadZone {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
}

body[data-app-feature="matting-refine"] #productUploadSection #addImageBtn {
  height: 130px !important;
  min-height: 130px !important;
  max-height: 130px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox {
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}

/* One-screen compact overrides for main-image & detail-page (placed last). */
@media (min-width: 1024px) {
  body[data-app-feature="main-image"] .page-container,
body[data-app-feature="main-image"] .app-container,
body[data-app-feature="detail-page"] .page-container,
body[data-app-feature="detail-page"] .app-container,
body[data-app-feature="selfmedia-article"] .page-container,
body[data-app-feature="selfmedia-article"] .app-container,
body[data-app-feature="poster"] .page-container,
body[data-app-feature="poster"] .app-container {
    overflow: hidden !important;
  }

  body[data-app-feature="main-image"] .page-container.app-container > .main-area,
body[data-app-feature="detail-page"] .page-container.app-container > .main-area,
body[data-app-feature="selfmedia-article"] .page-container.app-container > .main-area,
body[data-app-feature="poster"] .page-container.app-container > .main-area {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 10px !important;
    --form-step-gap: 6px;
    --form-title-gap: 4px;
  }

  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel {
    height: 100% !important;
    padding: 10px !important;
    padding-bottom: 0 !important;
  }

  body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 1px 10px !important;
    scroll-padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel {
    padding-bottom: 76px !important;
  }

  body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible {
    height: auto !important;
    max-height: none !important;
    padding: 1px 10px !important;
  }

  body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible {
    height: auto !important;
    max-height: none !important;
    padding: 1px 10px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product {
    padding: 10px !important;
    gap: 8px !important;
  }

  body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block .preview-container.preview-area {
    min-height: 150px !important;
    max-height: 150px !important;
  }

  body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block .preview-container .upload-zone {
    min-height: 150px !important;
    max-height: 150px !important;
    height: 150px !important;
    padding: 12px 14px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .model-section,
body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-section {
    padding: 7px 9px !important;
    border: 1px solid #e8ecf3;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .model-section > .module-title,
body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-section > .module-title {
    margin-bottom: 5px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard #modelBtns.model-btns .model-btn {
    min-height: 36px !important;
    padding: 5px 8px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .gpt-aspect-clarity-card {
    padding: 7px 9px !important;
    gap: 5px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="main-image"] .main-area #panelStandard .commerce-platform-select-grid {
    gap: 6px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .standard-setting-select {
    height: 30px !important;
    min-height: 30px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .upload-ref-extras {
    margin-top: 4px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .btn-toggle-reference {
    min-height: 30px !important;
    padding: 4px 8px !important;
  }

  body[data-app-feature="main-image"] #productUploadSection.upload-section-group {
    gap: 5px !important;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop {
    min-height: 58px !important;
    padding: 7px 9px !important;
  }

  .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__reset,
.mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn {
    height: 38px !important;
  }

  /* main-image + detail-page + poster: relaxed vertical rhythm 鈥?spread sections to fill panel */
  body[data-app-feature="main-image"] .page-container.app-container > .main-area,
body[data-app-feature="detail-page"] .page-container.app-container > .main-area,
body[data-app-feature="poster"] .page-container.app-container > .main-area {
    --form-step-gap: 14px;
    --form-title-gap: 8px;
  }

  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel {
    padding: 12px !important;
  }

  body[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body[data-app-feature="poster"] .main-area .dynamic-panel-stack {
    flex: 0 1 auto !important;
    height: auto !important;
    max-height: calc(100% - 52px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="poster"] #panelStandard.dynamic-panel--visible {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 1px 10px !important;
    scroll-padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel {
    padding-bottom: 76px !important;
  }

  body[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body[data-app-feature="poster"] .main-area .dynamic-panel-stack {
    max-height: calc(100% - 8px) !important;
  }

  body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="poster"] #panelStandard.dynamic-panel--visible {
    height: auto !important;
    max-height: none !important;
  }

  body[data-app-feature="main-image"] #mainGenerateSticky.main-generate-sticky,
body[data-app-feature="detail-page"] #mainGenerateSticky.main-generate-sticky,
body[data-app-feature="poster"] #mainGenerateSticky.main-generate-sticky {
    margin-top: 8px !important;
    padding-top: 0 !important;
    background: transparent !important;
    border-top: 0 !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block.upload-block--product {
    padding: 10px !important;
    gap: 8px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard:not(.mode-matting) .upload-block .preview-container.preview-area,
body[data-app-feature="detail-page"] .main-area #panelStandard:not(.mode-matting) .upload-block .preview-container.preview-area,
body[data-app-feature="poster"] .main-area #panelStandard:not(.mode-matting) .upload-block .preview-container.preview-area {
    min-height: 100px !important;
    max-height: 100px !important;
  }

  /* E-commerce compact upload: see styles/upload-zone-unify.css */

  body[data-app-feature="main-image"] .main-area #panelStandard .model-section,
body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .model-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .target-platform-section,
body[data-app-feature="poster"] .main-area #panelStandard .model-section,
body[data-app-feature="poster"] .main-area #panelStandard .target-platform-section {
    padding: 12px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .model-section > .module-title,
body[data-app-feature="main-image"] .main-area #panelStandard .target-platform-section > .module-title,
body[data-app-feature="detail-page"] .main-area #panelStandard .model-section > .module-title,
body[data-app-feature="detail-page"] .main-area #panelStandard .target-platform-section > .module-title,
body[data-app-feature="poster"] .main-area #panelStandard .model-section > .module-title,
body[data-app-feature="poster"] .main-area #panelStandard .target-platform-section > .module-title {
    margin-bottom: 10px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard #modelBtns.model-btns,
body[data-app-feature="detail-page"] .main-area #panelStandard #modelBtns.model-btns,
body[data-app-feature="poster"] .main-area #panelStandard #modelBtns.model-btns {
    gap: 10px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard #modelBtns.model-btns .model-btn,
body[data-app-feature="detail-page"] .main-area #panelStandard #modelBtns.model-btns .model-btn,
body[data-app-feature="poster"] .main-area #panelStandard #modelBtns.model-btns .model-btn {
    min-height: 42px !important;
    padding: 8px 12px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .gpt-aspect-clarity-card,
body[data-app-feature="detail-page"] .main-area #panelStandard .gpt-aspect-clarity-card,
body[data-app-feature="poster"] .main-area #panelStandard .gpt-aspect-clarity-card {
    padding: 12px !important;
    gap: 10px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="main-image"] .main-area #panelStandard .commerce-platform-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="detail-page"] .main-area #panelStandard .commerce-platform-select-grid,
body[data-app-feature="poster"] .main-area #panelStandard .standard-output-select-grid,
body[data-app-feature="poster"] .main-area #panelStandard .commerce-platform-select-grid {
    gap: 10px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .standard-output-select-field,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-output-select-field,
body[data-app-feature="poster"] .main-area #panelStandard .standard-output-select-field {
    gap: 8px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .standard-setting-select,
body[data-app-feature="detail-page"] .main-area #panelStandard .standard-setting-select,
body[data-app-feature="poster"] .main-area #panelStandard .standard-setting-select {
    height: 36px !important;
    min-height: 36px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .main-advanced-summary,
body[data-app-feature="detail-page"] .main-area #panelStandard .main-advanced-summary,
body[data-app-feature="poster"] .main-area #panelStandard .main-advanced-summary {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard .params-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .params-section,
body[data-app-feature="poster"] .main-area #panelStandard .params-section {
    gap: 5px !important;
  }

  body[data-app-feature="main-image"] #panelStandard #productUploadSection.upload-section-group,
body[data-app-feature="detail-page"] #panelStandard #productUploadSection.upload-section-group,
body[data-app-feature="poster"] #panelStandard #productUploadSection.upload-section-group {
    gap: 12px !important;
  }

  body[data-app-feature="main-image"] .main-area #panelStandard #prompt-input.custom-input--brief,
body[data-app-feature="detail-page"] .main-area #panelStandard #prompt-input.custom-input--brief,
body[data-app-feature="poster"] .main-area #panelStandard #prompt-input.custom-input--brief {
    min-height: 96px !important;
    height: auto !important;
    padding: 10px 12px !important;
  }

  body[data-app-feature="poster"] .main-area #panelStandard .poster-feature-block {
    padding: 12px !important;
    margin-bottom: 0 !important;
  }

  body[data-app-feature="poster"] .main-area #panelStandard .poster-feature-block .module-title.step-title-row {
    margin-bottom: 10px !important;
  }

  body[data-app-feature="poster"] .main-area #panelStandard .poster-title-input {
    height: 36px !important;
    min-height: 36px !important;
  }

  /* selfmedia-article: mirror main-image / detail-page panel rhythm */
  body[data-app-feature="selfmedia-article"] .page-container.app-container > .main-area {
    --form-step-gap: 14px;
    --form-title-gap: 8px;
  }

  body[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel {
    padding: 12px !important;
  }

  body[data-app-feature="selfmedia-article"] .main-area .dynamic-panel-stack {
    flex: 0 1 auto !important;
    height: auto !important;
    max-height: calc(100% - 52px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle.dynamic-panel--visible {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 1px 10px !important;
    scroll-padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel {
    padding-bottom: 76px !important;
  }

  body[data-app-feature="selfmedia-article"] .main-area .dynamic-panel-stack {
    max-height: calc(100% - 8px) !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-article-shell {
    gap: 10px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-step-card,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-card {
    padding: 12px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .module-title.step-title-row {
    margin-bottom: 10px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-zone {
    min-height: 88px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-btns:not(.selfmedia-model-dropdown) .model-btn {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 8px 12px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-btns:not(.selfmedia-model-dropdown),
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-output-grid,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-route-grid,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-upload-grid,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-step-card--grid {
    gap: 10px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-step-card--grid .standard-output-select-field,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-output-grid .standard-output-select-field {
    gap: 8px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-step-card--grid .gpt-setting-select,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-output-grid .gpt-setting-select {
    height: 36px !important;
    min-height: 36px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-route-btn {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-topic-textarea {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 10px 12px !important;
  }
}

.main-area #mainDynamicStack.dynamic-panel-stack {
  gap: 0 !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible:not(.mode-matting),
body[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible:not(.mode-matting),
body[data-app-feature="poster"] #panelStandard.dynamic-panel--visible:not(.mode-matting),
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle.dynamic-panel--visible {
  gap: 10px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

body[data-app-feature="main-image"] #productUploadSection > section.upload-block.upload-block--product,
body[data-app-feature="detail-page"] #productUploadSection > section.upload-block.upload-block--product,
body[data-app-feature="poster"] #productUploadSection > section.upload-block.upload-block--product {
  padding: 10px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

body[data-app-feature="main-image"] #sellpointGroup.param-group,
body[data-app-feature="detail-page"] #sellpointGroup.param-group,
body[data-app-feature="poster"] #sellpointGroup.param-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-app-feature="main-image"] .main-area #panelStandard .params-section,
body[data-app-feature="detail-page"] .main-area #panelStandard .params-section,
body[data-app-feature="poster"] .main-area #panelStandard .params-section {
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* PageSpeed contrast polish: keep low-emphasis labels readable on white panels. */
#sidebarMenuRoot .nav-group-header,
#sidebarMenuRoot .nav-group-title,
#sidebarMenuRoot .nav-group-icon,
.sidebar .vip-card__hint {
  color: #64748b !important;
}

/* Final audit guard: the free-image upload drop target must stay 100px tall. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block {
  box-sizing: border-box !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block .preview-container.preview-area {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox {
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  min-height: 64px !important;
  height: 100% !important;
}

/* Upload comfort pass: keep GPT/Nano product thumbnails large enough for delete/reorder controls. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload {
  min-height: 124px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .preview-container.preview-area {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  overflow: visible !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item),
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items {
  align-items: center !important;
  gap: 10px !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  padding: 8px 12px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.uploaded-item),
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.upload-zone--has-items) {
  min-height: 164px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.uploaded-item) .gpt-upload-block,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.upload-zone--has-items) .gpt-upload-block,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.uploaded-item) .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.upload-zone--has-items) .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.uploaded-item) .preview-container.preview-area,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:has(.upload-zone--has-items) .preview-container.preview-area {
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item),
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-list,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .uploaded-list {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  height: 94px !important;
  width: max-content !important;
  min-width: max-content !important;
  overflow: visible !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item {
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 92px !important;
  min-height: 92px !important;
  overflow: visible !important;
  border-radius: 10px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item img,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item .preview-img {
  border-radius: 10px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item .image-index {
  left: 8px !important;
  bottom: 8px !important;
  z-index: 3 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .uploaded-item .remove-image-btn {
  top: -8px !important;
  right: -8px !important;
  z-index: 8 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28) !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  height: 92px !important;
  min-height: 92px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .add-image-btn .upload-text,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn .upload-text {
  max-width: 70px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .add-image-btn.disabled,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item:nth-child(5)) .add-image-btn {
  display: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item))::-webkit-scrollbar {
  display: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .uploaded-list {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 76px !important;
  min-height: 76px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  overflow: hidden !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn__plus {
  display: flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--accent-purple, #7c3aed) !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  max-width: calc(100% - 44px) !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  pointer-events: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text__main {
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text__meta {
  display: block !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Nano Banana upload sync: mirror image-2 sizing, no-overlap cards, and reorder affordance. */
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
  min-height: 124px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .preview-container.preview-area {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  overflow: visible !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items {
  align-items: center !important;
  gap: 10px !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  padding: 8px 12px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.uploaded-item),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.upload-zone--has-items) {
  min-height: 164px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.uploaded-item) .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.upload-zone--has-items) .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.uploaded-item) .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.upload-zone--has-items) .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.uploaded-item) .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:has(.upload-zone--has-items) .preview-container.preview-area {
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-list,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .uploaded-list {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  height: 94px !important;
  width: max-content !important;
  min-width: max-content !important;
  overflow: visible !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-item {
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 92px !important;
  min-height: 92px !important;
  overflow: visible !important;
  border-radius: 10px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-item img,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-item .preview-img {
  border-radius: 10px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-item .image-index {
  left: 8px !important;
  bottom: 8px !important;
  z-index: 3 !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .uploaded-item .remove-image-btn {
  top: -8px !important;
  right: -8px !important;
  z-index: 8 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28) !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn {
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  height: 92px !important;
  min-height: 92px !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .add-image-btn .upload-text,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item) .add-image-btn .upload-text {
  max-width: 70px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact.upload-zone--has-items .add-image-btn.disabled,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:has(.uploaded-item:nth-child(5)) .add-image-btn {
  display: none !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item))::-webkit-scrollbar {
  display: none !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .uploaded-list {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 76px !important;
  min-height: 76px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  overflow: hidden !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn__plus {
  display: flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--accent-purple, #7c3aed) !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  max-width: calc(100% - 44px) !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  pointer-events: none !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text__main {
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text__meta {
  display: block !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* 鏈厤缃巿鏉冪爜鏃剁殑涓婃墜寮曞 */
.auth-onboard-banner {
  margin: 0 0 12px;
  padding: 0;
}

.auth-onboard-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: var(--r-card, 6px);
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 72%);
}

.auth-onboard-banner__title {
  margin: 0;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--yj-appearance-primary,#5b21b6);
}

.auth-onboard-banner__steps {
  flex: 1 1 280px;
  margin: 0;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #475569);
}

.auth-onboard-banner__steps li + li {
  margin-top: 0;
}

.auth-onboard-banner__steps li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--yj-appearance-primary,#a78bfa);
  font-weight: 800;
}

.auth-onboard-banner__steps strong {
  color: var(--text-primary, #0f172a);
  font-weight: 650;
}

.auth-onboard-banner__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-onboard-banner__cta {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--color-primary, var(--yj-appearance-primary,#7c3aed));
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.auth-onboard-banner__cta--secondary {
  border: 1px solid rgba(124, 58, 237, 0.24);
  background: #ffffff;
  color: var(--yj-appearance-primary,#5b21b6);
}

.auth-onboard-banner__cta:hover,
.auth-onboard-banner__cta:focus-visible {
  background: var(--yj-appearance-primary,#6d28d9);
}

.email-onboard-modal {
  width: min(560px, calc(100vw - 24px));
  position: relative;
  padding-top: 12px;
}

.email-onboard-modal[data-email-onboard-view="promo"] {
  width: min(780px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #12061f;
  color: #f8fafc;
}

.email-onboard-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.email-onboard-modal[data-email-onboard-view="promo"] .email-onboard-modal__close {
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.35);
}

/* First-visit soft tip: bottom non-blocking bar (does not cover the page) */
.email-onboard-soft-tip {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1200;
  pointer-events: none;
}

.email-onboard-soft-tip.is-visible {
  pointer-events: auto;
}

/* Canvas has its own visible onboarding entry; keep its bottom tools reachable. */
body.ops-canvas-workspace-open .email-onboard-soft-tip {
  display: none;
}

.email-onboard-soft-tip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(8px);
}

.email-onboard-soft-tip__copy {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-onboard-soft-tip__title {
  font-size: 14px;
  font-weight: 700;
  color: #4c1d95;
  line-height: 1.3;
}

.email-onboard-soft-tip__sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

.email-onboard-soft-tip__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.email-onboard-soft-tip__btn {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: #fff;
  color: #5b21b6;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.email-onboard-soft-tip__btn--primary {
  border-color: transparent;
  background: #7c3aed;
  color: #fff;
}

.email-onboard-soft-tip__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

body.has-mobile-tab-bar .email-onboard-soft-tip {
  bottom: calc(var(--yj-mobile-tab-h, 52px) + env(safe-area-inset-bottom, 0px) + 10px);
}

@media (max-width: 767px) {
  .email-onboard-soft-tip {
    left: 8px;
    right: 8px;
  }

  .email-onboard-soft-tip__inner {
    padding: 10px 12px;
  }
}

.email-onboard-promo {
  margin: 0;
}

.email-onboard-promo__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(240px, 1.18fr);
  min-height: 360px;
  align-items: stretch;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 55%, rgba(168, 85, 247, 0.42) 0%, rgba(18, 6, 31, 0.2) 42%, #12061f 78%),
    linear-gradient(135deg, #1a0b2e 0%, #12061f 55%, #0b0414 100%);
}

/* Soft purple haze across the copy/art seam so the hard vertical edge disappears. */
.email-onboard-promo__layout::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34%;
  width: 28%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(26, 11, 46, 0.72) 0%,
    rgba(76, 29, 149, 0.28) 42%,
    rgba(18, 6, 31, 0.08) 72%,
    transparent 100%
  );
}

.email-onboard-promo__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 8px 28px 28px;
  margin-right: -48px;
  background: linear-gradient(
    90deg,
    rgba(26, 11, 46, 0.98) 0%,
    rgba(26, 11, 46, 0.94) 58%,
    rgba(26, 11, 46, 0.55) 82%,
    rgba(26, 11, 46, 0) 100%
  );
}

.email-onboard-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ddd6fe;
  font-size: 13px;
  font-weight: 650;
}

.email-onboard-promo__eyebrow-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  position: relative;
}

.email-onboard-promo__eyebrow-icon::after {
  content: "";
  position: absolute;
  inset: 4px 3px 5px 4px;
  border: 1.5px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  border-radius: 1px;
}

.email-onboard-promo__title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.email-onboard-promo__sub {
  margin: 0 0 6px;
  color: rgba(226, 232, 240, 0.88);
  font-size: 14px;
  line-height: 1.5;
}

.email-onboard-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.email-onboard-promo__btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.email-onboard-promo__btn--primary {
  background: linear-gradient(135deg, #c084fc 0%, #7c3aed 55%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35);
}

.email-onboard-promo__btn--primary:hover,
.email-onboard-promo__btn--primary:focus-visible {
  filter: brightness(1.05);
}

.email-onboard-promo__btn--secondary {
  background: rgba(248, 250, 252, 0.94);
  color: #1e1b4b;
}

.email-onboard-promo__btn--secondary:hover,
.email-onboard-promo__btn--secondary:focus-visible {
  background: #fff;
}

.email-onboard-promo__hint {
  margin: 4px 0 0;
  color: rgba(196, 181, 253, 0.78);
  font-size: 12px;
  line-height: 1.45;
}

.email-onboard-promo__art {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px 0 0;
  overflow: hidden;
  min-height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}

.email-onboard-promo__art img {
  /* Asset has empty left canvas; zoom into the mascot/coins on the right. */
  width: 168%;
  max-width: none;
  height: auto;
  display: block;
  margin-left: -58%;
  margin-right: -6%;
  margin-bottom: -6%;
  filter: drop-shadow(0 18px 28px rgba(76, 29, 149, 0.45));
  pointer-events: none;
  user-select: none;
}

.email-onboard-form[hidden],
.email-onboard-promo[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .email-onboard-promo__layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .email-onboard-promo__layout::after {
    display: none;
  }

  .email-onboard-promo__copy {
    margin-right: 0;
    padding: 24px 20px 12px;
    background: transparent;
  }

  .email-onboard-promo__art {
    justify-content: center;
    min-height: 210px;
    padding: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  }

  .email-onboard-promo__art img {
    width: 130%;
    margin-left: -18%;
    margin-right: -8%;
    margin-bottom: -4%;
  }
}

#emailOnboardModalBackdrop .key-input {
  background: #ffffff;
  border-color: var(--yj-border-default, #e2e8f0);
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
}

#emailOnboardModalBackdrop .key-input::placeholder {
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
  opacity: 1;
}

#emailOnboardModalBackdrop .key-input:focus {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}

#emailOnboardModalBackdrop .key-input:-webkit-autofill,
#emailOnboardModalBackdrop .key-input:-webkit-autofill:hover,
#emailOnboardModalBackdrop .key-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 99999s ease-out;
}

.email-onboard-modal__lead {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.email-onboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.email-onboard-tab {
  flex: 1 1 0;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.email-onboard-tab.active {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
}

.email-onboard-pane[hidden] {
  display: none !important;
}

.email-onboard-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #78350f;
  font-size: 12px;
  line-height: 1.45;
}

.email-onboard-reward strong {
  flex: 0 0 auto;
  color: #b45309;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.email-onboard-row {
  margin-bottom: 10px;
}

/* Keep the two account forms aligned, including browser autofill and narrow screens. */
#emailOnboardModalBackdrop {
  z-index: 20000;
}

#emailOnboardModalBackdrop .email-onboard-modal[data-email-onboard-view="form"] {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
}

#emailOnboardFormStage .key-modal-header {
  padding-right: 32px;
}

#emailOnboardFormStage .email-onboard-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#emailOnboardFormStage .email-onboard-row,
#emailOnboardFormStage .email-onboard-reward {
  margin: 0;
}

#emailOnboardFormStage .key-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 44px;
  box-sizing: border-box;
}

#emailOnboardFormStage .email-onboard-row--code {
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: stretch;
}

#emailOnboardFormStage .key-modal-btn,
#emailOnboardFormStage .email-onboard-tab {
  min-height: 44px;
  box-sizing: border-box;
}

#emailOnboardFormStage .email-onboard-submit {
  margin-top: 0;
}

@media (max-width: 480px) {
  #emailOnboardModalBackdrop .email-onboard-modal[data-email-onboard-view="form"] {
    padding: 20px 16px;
  }
}

.email-onboard-row--code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.email-onboard-submit {
  width: 100%;
  margin-top: 4px;
}

.email-onboard-message {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  background: #f8fafc;
  color: #334155;
}

.email-onboard-message[data-kind="success"] {
  background: #ecfdf5;
  color: #047857;
}

.email-onboard-message[data-kind="error"] {
  background: #fef2f2;
  color: #b91c1c;
}

.email-onboard-message[data-kind="info"] {
  background: #eff6ff;
  color: #1d4ed8;
}

.email-onboard-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}

.email-onboard-footer .key-modal-btn {
  flex: 1 1 0;
}

@media (max-width: 767px) {
  .auth-onboard-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-onboard-banner__steps {
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 6px;
  }

  .auth-onboard-banner__actions {
    width: 100%;
  }

  .auth-onboard-banner__cta {
    flex: 1 1 0;
    width: auto;
  }
}

.result-empty-state--assistant {
  position: relative;
  overflow: hidden;
  min-height: 252px;
  gap: 10px;
  border-color: rgba(124, 58, 237, 0.18);
  background:
    radial-gradient(circle at 18% 14%, rgba(217, 255, 63, 0.1) 0%, transparent 44%),
    radial-gradient(circle at 82% 18%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 50% 88%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    #ffffff;
  animation: result-empty-assistant-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-empty-state--assistant .result-empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #312e81 0%, #6d28d9 48%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.result-empty-spark {
  position: relative;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.result-empty-spark__mesh {
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.34) 0%, transparent 58%),
    radial-gradient(circle at 72% 68%, rgba(236, 72, 153, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(217, 255, 63, 0.16) 0%, transparent 62%);
  filter: blur(8px);
  animation: result-empty-spark-mesh 5.6s ease-in-out infinite;
}

.result-empty-spark__orbit {
  position: absolute;
  inset: 0;
  animation: result-empty-spark-orbit 10s linear infinite;
}

.result-empty-spark__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 46px;
  border-radius: 999px;
  box-shadow: 0 0 14px currentColor;
  transform-origin: -46px 0;
}

.result-empty-spark__dot--violet {
  color: #8b5cf6;
  background: #8b5cf6;
  animation: result-empty-spark-dot-violet 2.4s ease-in-out infinite;
}

.result-empty-spark__dot--pink {
  color: #ec4899;
  background: #ec4899;
  animation: result-empty-spark-dot-pink 2.4s ease-in-out infinite 0.45s;
}

.result-empty-spark__dot--lime {
  color: #a3e635;
  background: #a3e635;
  animation: result-empty-spark-dot-lime 2.4s ease-in-out infinite 0.9s;
}

.result-empty-spark__core {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.94) 0%, rgba(245, 243, 255, 0.88) 100%);
  box-shadow:
    0 18px 40px rgba(91, 33, 182, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  animation: result-empty-spark-float 4.2s ease-in-out infinite;
}

.result-empty-spark__logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  transform: translateZ(0);
  animation: result-empty-spark-logo 2.8s ease-in-out infinite;
  will-change: transform;
}

.result-empty-spark__shine {
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: skewX(-18deg);
  animation: result-empty-spark-shine 3.1s ease-in-out infinite;
}

.result-empty-spark__tag {
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
  animation: result-empty-spark-tag 3.6s ease-in-out infinite;
}

@keyframes result-empty-assistant-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes result-empty-spark-float {
  0%,
100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(-8px) rotate(2deg) scale(1.02);
  }
}

@keyframes result-empty-spark-logo {
  0%,
100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  35% {
    transform: translateY(-4px) scale(1.06) rotate(-3deg);
  }

  70% {
    transform: translateY(-2px) scale(1.03) rotate(3deg);
  }
}

@keyframes result-empty-spark-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes result-empty-spark-dot-violet {
  0%,
100% {
    opacity: 0.55;
    transform: rotate(0deg) scale(0.82);
  }

  50% {
    opacity: 1;
    transform: rotate(0deg) scale(1.12);
  }
}

@keyframes result-empty-spark-dot-pink {
  0%,
100% {
    opacity: 0.55;
    transform: rotate(120deg) scale(0.82);
  }

  50% {
    opacity: 1;
    transform: rotate(120deg) scale(1.12);
  }
}

@keyframes result-empty-spark-dot-lime {
  0%,
100% {
    opacity: 0.55;
    transform: rotate(240deg) scale(0.82);
  }

  50% {
    opacity: 1;
    transform: rotate(240deg) scale(1.12);
  }
}

@keyframes result-empty-spark-mesh {
  0%,
100% {
    opacity: 0.72;
    transform: scale(0.94) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.05) rotate(8deg);
  }
}

@keyframes result-empty-spark-shine {
  0%,
72%,
100% {
    left: -60%;
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  42% {
    left: 130%;
    opacity: 0;
  }
}

@keyframes result-empty-spark-tag {
  0%,
100% {
    opacity: 0.82;
    transform: translateX(-50%) translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-empty-state--assistant,
.result-empty-spark__mesh,
.result-empty-spark__orbit,
.result-empty-spark__core,
.result-empty-spark__logo,
.result-empty-spark__shine,
.result-empty-spark__tag,
.result-empty-spark__dot {
    animation: none;
  }
}

.result-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.result-try-examples-btn--secondary {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.24);
  color: #5b21b6;
  box-shadow: none;
}

.result-inspiration-bar--focus {
  outline: 2px solid rgba(124, 58, 237, 0.35);
  outline-offset: 3px;
}

/* Final guard: empty GPT/Nano upload prompts must show fully without an inner scrollbar. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item))::-webkit-scrollbar,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item))::-webkit-scrollbar {
  display: none !important;
}

/* Upload fit guard: keep the visible upload box inside its card and show the full hint. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
  min-height: 164px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-param,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-param,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .gpt-upload-block,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .upload-block__body--preview-only,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload .preview-container.preview-area {
  height: 128px !important;
  min-height: 128px !important;
  max-height: 128px !important;
  overflow: visible !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact {
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn .upload-text {
  max-width: 300px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

/* Workbench contrast guard: keep im-age-2 / Nano panels readable on the light canvas. */
#panelGptImage #gpt-image-panel .gpt-step-card,
#panelNanoBanana #nano-banana-panel .gpt-step-card {
  background: #ffffff;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  padding: 12px;
}

#panelGptImage #gpt-image-panel .gpt-step-card > .step-title-row,
#panelNanoBanana #nano-banana-panel .gpt-step-card > .step-title-row {
  color: #0f172a;
}

#panelGptImage #gpt-image-panel .section-step-label,
#panelNanoBanana #nano-banana-panel .section-step-label {
  color: #0f172a;
  font-weight: 700;
}

#panelGptImage #gpt-image-panel .step-inline-hint,
#panelGptImage #gpt-image-panel .gpt-upload-inline-hint,
#panelNanoBanana #nano-banana-panel .step-inline-hint,
#panelNanoBanana #nano-banana-panel .gpt-upload-inline-hint {
  color: #64748b;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact {
  background: #f8fafc;
  border-color: #d8e1ee !important;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text {
  color: #0f172a;
}

#panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn__plus,
#panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn__plus {
  color: #7c3aed;
  opacity: 1;
}

#panelGptImage #gpt-image-panel .gpt-prompt-textarea,
#panelNanoBanana #nano-banana-panel .gpt-prompt-textarea,
#panelGptImage #gpt-image-panel .gpt-setting-select,
#panelNanoBanana #nano-banana-panel .gpt-setting-select {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

#panelGptImage #gpt-image-panel .gpt-model-grid .model-btn:not(.selected),
#panelNanoBanana #nano-banana-panel .gpt-model-grid .model-btn:not(.selected) {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

#panelGptImage #gpt-image-panel .gpt-model-grid .model-btn:not(.selected) .model-name,
#panelNanoBanana #nano-banana-panel .gpt-model-grid .model-btn:not(.selected) .model-name {
  color: #334155;
}

#panelGptImage #gpt-image-panel .gpt-model-grid .model-btn:not(.selected) .gpt-model-card-desc,
#panelNanoBanana #nano-banana-panel .gpt-model-grid .model-btn:not(.selected) .gpt-model-card-desc {
  color: #64748b;
  opacity: 1;
}

/* Standard commerce output: merged main-image/detail-page entry with compact model picker. */
body[data-app-feature="main-image"] #panelStandard .commerce-output-type-section,
body[data-app-feature="detail-page"] #panelStandard .commerce-output-type-section {
  display: block;
  padding: 10px 12px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

body[data-app-feature="main-image"] #panelStandard .commerce-output-type-btns,
body[data-app-feature="detail-page"] #panelStandard .commerce-output-type-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 3px;
  border: 1px solid #e8ecf3;
  border-radius: 6px;
  background: #f7f8fb;
}

body[data-app-feature="main-image"] #panelStandard .commerce-output-type-btn,
body[data-app-feature="detail-page"] #panelStandard .commerce-output-type-btn {
  min-width: 0;
  height: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #647084;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body[data-app-feature="main-image"] #panelStandard .commerce-output-type-btn:hover:not(.active),
body[data-app-feature="detail-page"] #panelStandard .commerce-output-type-btn:hover:not(.active) {
  background: #ffffff;
  color: var(--brand-primary);
  border-color: #e5e7f0;
}

body[data-app-feature="main-image"] #panelStandard .commerce-output-type-btn.active,
body[data-app-feature="detail-page"] #panelStandard .commerce-output-type-btn.active {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 52%, #ec4899 100%);
  color: #ffffff;
  border-color: rgba(124, 58, 237, 0.18);
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(124, 58, 237, 0.22);
}

body:not([data-app-panel-mode="fashion"]) #panelStandard .panel-show-when-fashion {
  display: none !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .panel-show-when-fashion {
  display: block;
}

body[data-app-panel-mode="fashion"] #panelStandard #commerceOutputTypeSection {
  display: none !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .fashion-feature-section,
body[data-app-panel-mode="fashion"] #panelStandard .fashion-lock-section {
  padding: 10px 12px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(248, 245, 255, 0.96), #ffffff 46%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.fashion-mode-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 3px;
  border: 1px solid #e8ecf3;
  border-radius: 6px;
  background: #f7f8fb;
}

.fashion-mode-btn {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #647084;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 6px;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.fashion-mode-btn:hover:not(.active) {
  background: #ffffff;
  color: var(--brand-primary);
  border-color: #e5e7f0;
}

.fashion-mode-btn.active {
  background: linear-gradient(135deg, var(--yj-appearance-primary,#7c3aed) 0%, var(--yj-appearance-primary,#8b5cf6) 52%, #ec4899 100%);
  color: #ffffff;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 7px 16px rgba(124, 58, 237, 0.22);
}

.fashion-mode-btn__title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.fashion-mode-btn__desc {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.78;
}

.fashion-lock-dropdown {
  position: relative;
  z-index: 4;
}

.fashion-lock-trigger {
  width: 100%;
  min-height: 38px;
  height: 38px;
  border: 1px solid #dfe7f2;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.fashion-lock-dropdown.is-open .fashion-lock-trigger,
.fashion-lock-trigger:hover {
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.10);
}

.fashion-lock-trigger__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.18);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.fashion-lock-trigger__text {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fashion-lock-trigger__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  font-size: 12px;
  font-weight: 800;
}

.fashion-lock-trigger__meta {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 800;
}

.fashion-lock-trigger__chevron {
  color: var(--text-tertiary, #64748b);
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.fashion-lock-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  z-index: 45;
}

.fashion-lock-menu[hidden] {
  display: none !important;
}

.fashion-lock-option {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  user-select: none;
}

.fashion-lock-option input {
  width: 14px;
  height: 14px;
  accent-color: var(--brand-primary);
  flex-shrink: 0;
}

.fashion-lock-option:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.34);
  background: rgba(248, 245, 255, 0.92);
  color: var(--brand-primary);
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-extras .btn-toggle-reference__text strong {
  font-size: 12px;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown {
  position: relative;
  display: block;
  margin-bottom: 6px;
  z-index: 3;
}

.main-area #panelStandard .standard-model-trigger {
  width: 100%;
  min-height: 38px;
  height: 38px;
  border: 1px solid #dfe7f2;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.main-area #panelStandard .standard-model-trigger:hover,
.main-area #panelStandard #modelBtns.standard-model-dropdown.is-open .standard-model-trigger {
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.10);
}

.main-area #panelStandard .standard-model-trigger__text {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.main-area #panelStandard .standard-model-trigger__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  font-size: 12px;
  font-weight: 800;
}

.main-area #panelStandard .standard-model-trigger__meta {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 800;
}

.main-area #panelStandard .standard-model-trigger__chevron {
  color: var(--text-tertiary, #64748b);
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.main-area #panelStandard .standard-model-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 6px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  z-index: 40;
}

.main-area #panelStandard .standard-model-menu[hidden] {
  display: none !important;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-btn {
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  padding: 0 8px;
  border-radius: 6px;
  text-align: left;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-logo--banana img {
  width: 20px;
  height: 20px;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-name {
  min-width: 0;
  width: auto;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-cost {
  justify-self: end;
  color: var(--brand-primary);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-tag {
  display: none;
}

.main-area #panelStandard #modelBtns.standard-model-dropdown .model-btn.selected .model-cost {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.26);
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-btns.selfmedia-model-dropdown {
  position: relative;
  display: block;
  margin-bottom: 0;
  z-index: 5;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-trigger {
  width: 100%;
  min-height: 38px;
  height: 38px;
  border: 1px solid #dfe7f2;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-trigger:hover,
body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown.is-open .selfmedia-model-trigger {
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.10);
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 6px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  z-index: 45;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-menu[hidden] {
  display: none !important;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-btn {
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  justify-items: stretch;
  gap: 8px;
  padding: 0 8px;
  border-radius: 6px;
  text-align: left;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-logo--banana img {
  width: 20px;
  height: 20px;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-name {
  min-width: 0;
  width: auto;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-cost {
  justify-self: end;
  color: var(--brand-primary);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-tag {
  display: none;
}

body[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-model-dropdown .model-btn.selected .model-cost {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.26);
}

#panelGptImage #gpt-image-panel .gpt-model-grid.gpt-model-dropdown,
#panelNanoBanana #nano-banana-panel .gpt-model-grid.gpt-model-dropdown {
  position: relative;
  display: block;
  margin-bottom: 0;
  z-index: 5;
}

#panelGptImage #gpt-image-panel .gpt-model-trigger,
#panelNanoBanana #nano-banana-panel .gpt-model-trigger {
  width: 100%;
  min-height: 38px;
  height: 38px;
  border: 1px solid #dfe7f2;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

#panelGptImage #gpt-image-panel .gpt-model-trigger:hover,
#panelNanoBanana #nano-banana-panel .gpt-model-trigger:hover,
#panelGptImage #gpt-image-panel .gpt-model-dropdown.is-open .gpt-model-trigger,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown.is-open .gpt-model-trigger {
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.10);
}

#panelGptImage #gpt-image-panel .gpt-model-menu,
#panelNanoBanana #nano-banana-panel .gpt-model-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 6px;
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  z-index: 45;
}

#panelGptImage #gpt-image-panel .gpt-model-menu[hidden],
#panelNanoBanana #nano-banana-panel .gpt-model-menu[hidden] {
  display: none !important;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-btn,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-btn {
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  padding: 0 8px;
  border-radius: 6px;
  text-align: left;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-logo,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-logo img,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-logo--banana img,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-logo--banana img {
  width: 20px;
  height: 20px;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-name,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-name {
  min-width: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .gpt-model-card-desc,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .gpt-model-card-desc,
#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-tag,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-tag {
  display: none;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-cost,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-cost {
  justify-self: end;
  color: var(--brand-primary);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-btn.selected .model-cost,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-btn.selected .model-cost {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.26);
}

/* Form start visual guide: soft top color only, no extra text or layout step bar. */
body[data-app-feature="main-image"] #panelStandard #productUploadSection > .upload-block--product,
body[data-app-feature="detail-page"] #panelStandard #productUploadSection > .upload-block--product,
body[data-app-feature="poster"] #panelStandard #productUploadSection > .upload-block--product,
body[data-app-feature="matting-refine"] #panelStandard #productUploadSection > .upload-block--product,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.14) 0%, rgba(14, 165, 233, 0.07) 54px, rgba(255, 255, 255, 0.98) 138px),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-color: rgba(139, 92, 246, 0.20);
}

body[data-app-feature="matting-refine"] #panelStandard #productUploadSection > .upload-block--product {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.13) 0%, rgba(16, 185, 129, 0.07) 54px, rgba(255, 255, 255, 0.98) 138px),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

/* UI baseline pass: keep form rhythm consistent across non-canvas feature panels. */
#panelStandard .section-step-label,
#panelStandard .step-title-main,
#panelGptImage #gpt-image-panel .section-step-label,
#panelGptImage #gpt-image-panel .step-title-main,
#panelNanoBanana #nano-banana-panel .section-step-label,
#panelNanoBanana #nano-banana-panel .step-title-main,
#panelRewrite .section-step-label,
#panelRewrite .step-title-main,
#panelRewrite .rewrite-col__title,
#panelSelfmediaArticle .section-step-label,
#panelSelfmediaArticle .step-title-main {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #0f172a !important;
}

#panelStandard .step-inline-hint,
#panelStandard .gpt-upload-inline-hint,
#panelGptImage #gpt-image-panel .step-inline-hint,
#panelGptImage #gpt-image-panel .gpt-upload-inline-hint,
#panelNanoBanana #nano-banana-panel .step-inline-hint,
#panelNanoBanana #nano-banana-panel .gpt-upload-inline-hint,
#panelRewrite .step-inline-hint,
#panelSelfmediaArticle .step-inline-hint,
#panelRewrite .rewrite-col__hint {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panelStandard .target-platform-section,
#panelStandard .model-section,
#panelStandard .params-section,
#panelStandard .poster-feature-block,
#panelStandard.mode-matting .matting-step-card,
#panelGptImage #gpt-image-panel .gpt-step-card,
#panelNanoBanana #nano-banana-panel .gpt-step-card,
#panelRewrite .rewrite-param-group,
#panelSelfmediaArticle .selfmedia-step-card,
#panelSelfmediaArticle .selfmedia-upload-card {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border-color: #e5e9f2 !important;
  box-sizing: border-box !important;
}

#panelStandard .standard-setting-select,
#panelGptImage #gpt-image-panel .gpt-setting-select,
#panelGptImage #gpt-image-panel .gpt-scene-select,
#panelNanoBanana #nano-banana-panel .gpt-setting-select,
#panelNanoBanana #nano-banana-panel .gpt-scene-select,
#panelRewrite .standard-setting-select,
#panelSelfmediaArticle .gpt-setting-select,
#panelSelfmediaArticle select {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#panelStandard .standard-model-trigger,
#panelGptImage #gpt-image-panel .gpt-model-trigger,
#panelNanoBanana #nano-banana-panel .gpt-model-trigger,
#panelRewrite .rewrite-model-trigger,
#panelSelfmediaArticle .selfmedia-model-trigger {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 7px !important;
}

#panelStandard #modelBtns.standard-model-dropdown .model-btn,
#panelGptImage #gpt-image-panel .gpt-model-dropdown .model-btn,
#panelNanoBanana #nano-banana-panel .gpt-model-dropdown .model-btn,
#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-btn,
#panelSelfmediaArticle .selfmedia-model-dropdown .model-btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown {
  position: relative !important;
  display: block !important;
  margin-bottom: 6px !important;
  z-index: 5 !important;
}

#panelRewrite .rewrite-model-section > .module-title {
  margin-bottom: 10px !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .rewrite-model-trigger {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 9px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .rewrite-model-trigger:hover,
#panelRewrite #rewriteModelBtns.rewrite-model-dropdown.is-open .rewrite-model-trigger {
  border-color: rgba(124, 58, 237, 0.36) !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.10) !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .standard-model-trigger__text {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .standard-model-trigger__name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .standard-model-trigger__meta {
  flex: 0 0 auto !important;
  color: var(--brand-primary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .standard-model-trigger__chevron {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .rewrite-model-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  padding: 6px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
  z-index: 45 !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .rewrite-model-menu[hidden] {
  display: none !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-btn {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  text-align: left !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-logo {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  overflow: hidden !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-logo img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-logo--banana img {
  width: 20px !important;
  height: 20px !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-desc,
#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-tag,
#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-vip {
  display: none !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-cost {
  justify-self: end !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  color: var(--brand-primary) !important;
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-cost .yj-credit-amount,
#panelRewrite .rewrite-model-trigger .standard-model-trigger__meta .yj-credit-amount,
#panelRewrite .rewrite-submit-hint .yj-credit-amount,
body[data-app-feature="rewrite"] #panelRewrite #rewriteModelIntroInline .yj-credit-amount {
  color: var(--yj-appearance-primary,#7c3aed) !important;
  font-weight: 900 !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-btn.selected .model-cost {
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

#panelRewrite #rewriteModelBtns.rewrite-model-dropdown .model-btn.selected .model-cost .yj-credit-amount {
  color: #fde68a !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-cost .yj-credit-amount,
#panelSelfmediaArticle .selfmedia-model-trigger .standard-model-trigger__meta .yj-credit-amount,
#panelSelfmediaArticle .generate-hint .yj-credit-amount,
body[data-app-feature="selfmedia-article"] .generate-hint .yj-credit-amount {
  color: var(--yj-appearance-primary,#7c3aed) !important;
  font-weight: 900 !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-btn.selected .model-cost .yj-credit-amount {
  color: #fde68a !important;
}

#panelSelfmediaArticle .selfmedia-model-section .step-inline-hint .yj-credit-amount {
  color: #7c3aed !important;
  font-weight: 900 !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .model-cost .yj-credit-amount,
body[data-app-panel-mode="fashion"] #panelStandard .standard-model-trigger__meta .yj-credit-amount,
body[data-app-panel-mode="fashion"] .generate-hint .yj-credit-amount,
body[data-app-panel-mode="fashion"] #modelIntroInline .yj-credit-amount {
  color: var(--yj-appearance-primary,#7c3aed) !important;
  font-weight: 900 !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .model-btn.selected .model-cost .yj-credit-amount {
  color: #fde68a !important;
}

body[data-app-feature="main-image"]:not([data-app-panel-mode="fashion"]) #panelStandard .model-cost .yj-credit-amount,
body[data-app-feature="main-image"]:not([data-app-panel-mode="fashion"]) #panelStandard .standard-model-trigger__meta .yj-credit-amount,
body[data-app-feature="detail-page"]:not([data-app-panel-mode="fashion"]) #panelStandard .model-cost .yj-credit-amount,
body[data-app-feature="detail-page"]:not([data-app-panel-mode="fashion"]) #panelStandard .standard-model-trigger__meta .yj-credit-amount,
body[data-app-feature="main-image"]:not([data-app-panel-mode="fashion"]) .generate-hint .yj-credit-amount,
body[data-app-feature="detail-page"]:not([data-app-panel-mode="fashion"]) .generate-hint .yj-credit-amount,
body[data-app-feature="main-image"]:not([data-app-panel-mode="fashion"]) #modelIntroInline .yj-credit-amount,
body[data-app-feature="detail-page"]:not([data-app-panel-mode="fashion"]) #modelIntroInline .yj-credit-amount {
  color: var(--yj-appearance-primary,#7c3aed) !important;
  font-weight: 900 !important;
}

body[data-app-feature="main-image"]:not([data-app-panel-mode="fashion"]) #panelStandard .model-btn.selected .model-cost .yj-credit-amount,
body[data-app-feature="detail-page"]:not([data-app-panel-mode="fashion"]) #panelStandard .model-btn.selected .model-cost .yj-credit-amount {
  color: #fde68a !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown,
#panelSelfmediaArticle #selfmediaModelBtns.model-btns.selfmedia-model-dropdown {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  margin-bottom: 6px !important;
  z-index: 8 !important;
}

#panelSelfmediaArticle .selfmedia-model-section > .module-title {
  margin-bottom: 10px !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown .selfmedia-model-trigger {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 9px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown .selfmedia-model-trigger:hover,
#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown.is-open .selfmedia-model-trigger {
  border-color: rgba(124, 58, 237, 0.36) !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.10) !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown .standard-model-trigger__text {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown .standard-model-trigger__name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown .standard-model-trigger__meta {
  flex: 0 0 auto !important;
  color: var(--brand-primary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#panelSelfmediaArticle #selfmediaModelBtns.selfmedia-model-dropdown .standard-model-trigger__chevron {
  color: var(--text-tertiary, #64748b) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown {
  position: relative !important;
  display: block !important;
  z-index: 8 !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .selfmedia-model-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  padding: 6px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
  z-index: 60 !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .selfmedia-model-menu[hidden] {
  display: none !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-btn {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  text-align: left !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-logo {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  overflow: hidden !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-logo img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-logo--banana img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-tag {
  display: none !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-cost {
  justify-self: end !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  color: var(--brand-primary) !important;
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#panelSelfmediaArticle .selfmedia-model-dropdown .model-btn.selected .model-cost {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

#panelSelfmediaArticle .selfmedia-submit-hint {
  margin: 6px 0 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

#resultGrid.result-grid > .result-empty-state,
#resultGrid.result-grid > .generating-loading,
#resultGrid.result-grid > .result-recovery-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  justify-self: stretch !important;
}

/* Rewrite panel final pass: keep parameters visible and avoid desktop dock overlap. */
body[data-app-feature="rewrite"] #panelRewrite.dynamic-panel--visible {
  padding-bottom: 86px !important;
  scroll-padding-bottom: 100px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-mode-lead {
  display: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-panel {
  margin-bottom: 8px !important;
  padding: 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-grid {
  gap: 8px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-col__head.step-title-row,
body[data-app-feature="rewrite"] #panelRewrite .module-title.step-title-row {
  margin-bottom: 5px !important;
  min-height: 17px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone {
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
  padding: 8px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__icon {
  margin-bottom: 5px !important;
  font-size: 18px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__line {
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-slot-placeholder__sub {
  margin-top: 3px !important;
  font-size: 10px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group {
  margin-bottom: 8px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-copy-textarea {
  min-height: 46px !important;
  height: 46px !important;
  max-height: 54px !important;
  padding: 7px 10px !important;
  line-height: 1.35 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btns {
  gap: 6px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn {
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 5px 6px !important;
  border-radius: 7px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active {
  border-color: rgba(124, 58, 237, 0.18) !important;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 52%, #ec4899 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(124, 58, 237, 0.20) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__t {
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__s {
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active .ratio-btn__s {
  color: rgba(255, 255, 255, 0.86) !important;
}

body[data-app-feature="rewrite"] #panelRewrite #rewriteModelBtns.rewrite-model-dropdown {
  margin-bottom: 0 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card {
  min-height: 132px !important;
  height: auto !important;
  padding: 8px 10px !important;
  gap: 6px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-output-select-grid {
  gap: 8px !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-output-select-grid .standard-output-select-field {
  min-width: 0 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card .gpt-subfield-title {
  margin-bottom: 4px !important;
  text-align: left !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card .standard-setting-select {
  text-align: left !important;
}

@media (min-width: 1024px) and (max-width: 1200px) {
  body:not(.has-desktop-generate-dock) .mobile-generate-bar.mobile-generate-bar--desktop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body:not(.has-desktop-generate-dock)[data-app-feature="main-image"] #mainGenerateSticky.main-generate-sticky,
body:not(.has-desktop-generate-dock)[data-app-feature="detail-page"] #mainGenerateSticky.main-generate-sticky,
body:not(.has-desktop-generate-dock)[data-app-feature="poster"] #mainGenerateSticky.main-generate-sticky,
body:not(.has-desktop-generate-dock)[data-app-feature="matting-refine"] #mainGenerateSticky.main-generate-sticky {
    display: grid !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    border-top: 1px solid #e5e9f2 !important;
    pointer-events: auto !important;
  }

  body:not(.has-desktop-generate-dock)[data-app-feature="rewrite"] #panelRewrite .rewrite-action-row,
body:not(.has-desktop-generate-dock)[data-app-feature="selfmedia-article"] #panelSelfmediaArticle .selfmedia-action-row {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body:not(.has-desktop-generate-dock)[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt:not([hidden]),
body:not(.has-desktop-generate-dock)[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .saas-panel-sticky-actions--gpt[hidden],
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .saas-panel-sticky-actions--gpt[hidden] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="matting-refine"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="rewrite"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel {
    padding-bottom: 12px !important;
  }
}

/* Sidebar nav simplification: hide category labels and make feature targets easier to scan. */
#sidebarMenuRoot.sidebar-nav {
  gap: 0 !important;
}

#sidebarMenuRoot .nav-group {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#sidebarMenuRoot .nav-group-header,
#sidebarMenuRoot .nav-divider {
  display: none !important;
}

#sidebarMenuRoot .nav-group .nav-btn,
#sidebarMenuRoot .nav-btn {
  min-height: 46px !important;
  height: 46px !important;
  max-height: 48px !important;
  margin-bottom: 8px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  border-left-width: 3px !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

#sidebarMenuRoot .nav-group .nav-btn:last-child {
  margin-bottom: 0 !important;
}

#sidebarMenuRoot .nav-group .nav-btn__icon,
#sidebarMenuRoot .nav-btn__icon {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
}

#sidebarMenuRoot .nav-group .nav-btn__icon .lucide-nav-svg,
#sidebarMenuRoot .nav-btn__icon .lucide-nav-svg {
  width: 20px !important;
  height: 20px !important;
}

#sidebarMenuRoot .nav-group .nav-btn__label,
#sidebarMenuRoot .nav-btn__label {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

#sidebarMenuRoot .nav-tag {
  padding: 2px 5px !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

#sidebarMenuRoot .nav-btn.active,
#sidebarMenuRoot .nav-group .nav-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.20) 0%, rgba(124, 58, 237, 0.14) 56%, rgba(236, 72, 153, 0.16) 100%) !important;
  color: #5b21b6 !important;
  border-color: rgba(139, 92, 246, 0.42) !important;
  border-left-color: #7c3aed !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18), 0 0 0 1px rgba(167, 139, 250, 0.20) inset !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__label,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
  font-size: 14.5px !important;
  font-weight: 900 !important;
}

#sidebarMenuRoot .nav-btn.active .nav-btn__icon,
#sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon {
  transform: scale(1.12) !important;
}

@media (max-width: 900px) {
  #sidebarMenuRoot .nav-group .nav-btn,
#sidebarMenuRoot .nav-btn {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 46px !important;
    font-size: 13.5px !important;
  }
}

/* Creation shortcut cards replacing passive inspiration samples. */
#resultPanel .result-inspiration-bar {
  padding-top: 10px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

#resultPanel .result-inspiration-bar__title {
  margin: 0 0 8px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#resultPanel .result-inspiration-bar__track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: minmax(220px, 260px) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 2px 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  contain: layout paint !important;
}

#resultPanel .result-inspiration-card {
  height: 138px !important;
  min-height: 138px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#resultPanel .result-inspiration-card:hover,
#resultPanel .result-inspiration-card.is-active {
  transform: translateY(-2px) !important;
  border-color: rgba(124, 58, 237, 0.72) !important;
  box-shadow: 0 16px 34px rgba(79, 70, 229, 0.18) !important;
}

#resultPanel .result-inspiration-card__body,
#resultPanel .result-inspiration-card__label,
#resultPanel .result-inspiration-card__summary,
#resultPanel .result-inspiration-card__meta,
#resultPanel .result-inspiration-card__tag,
#resultPanel .result-inspiration-card__use {
  display: none !important;
}

#resultPanel .result-inspiration-card__hover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.28) !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
}

#resultPanel .result-inspiration-card:hover .result-inspiration-card__hover,
#resultPanel .result-inspiration-card:focus-visible .result-inspiration-card__hover {
  opacity: 1 !important;
}

#resultPanel .result-inspiration-card__go {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  background: var(--primary-gradient) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28) !important;
  transform: translateY(6px) !important;
  transition: transform 0.18s ease !important;
}

#resultPanel .result-inspiration-card:hover .result-inspiration-card__go,
#resultPanel .result-inspiration-card:focus-visible .result-inspiration-card__go {
  transform: translateY(0) !important;
}

#resultPanel .result-inspiration-card__media {
  background: #f8fafc !important;
}

#resultPanel .result-inspiration-card__media img {
  object-fit: cover !important;
  opacity: 0.96 !important;
}

@media (max-width: 1200px) {
  #resultPanel .result-inspiration-bar__track {
    grid-template-columns: none !important;
    grid-auto-columns: minmax(206px, 42vw) !important;
  }
}

@media (max-width: 768px) {
  #resultPanel .result-inspiration-bar__track {
    grid-auto-columns: minmax(0, min(260px, calc(100vw - 32px))) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }

  #resultPanel .result-inspiration-card {
    width: min(260px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    height: 130px !important;
    min-height: 130px !important;
  }

  #resultPanel .result-inspiration-card__media,
#resultPanel .result-inspiration-card__media img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #resultPanel .result-inspiration-card__body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Global sidebar collapse switch beside the brand. */
.top-bar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.top-bar-left .top-bar-brand {
  flex: 0 0 auto;
}

.top-bar-left .brand-mark-img--topbar {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16);
}

.top-bar-left .brand-wordmark-img {
  transition: opacity 160ms ease, transform 160ms ease, width 160ms ease;
}

.top-bar-left .sidebar-collapse-toggle.sidebar-collapse-toggle--topbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.top-bar-left .sidebar-collapse-toggle.sidebar-collapse-toggle--topbar:hover,
.top-bar-left .sidebar-collapse-toggle.sidebar-collapse-toggle--topbar:focus-visible {
  border-color: rgba(124, 58, 237, 0.38) !important;
  background: rgba(124, 58, 237, 0.07) !important;
  color: #6d28d9 !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12) !important;
  outline: none !important;
}

.top-bar-left .sidebar-collapse-toggle__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.top-bar-left .sidebar-collapse-toggle.is-collapsed {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  border-color: rgba(124, 58, 237, 0.30) !important;
  color: #6d28d9 !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

body.sidebar-is-collapsed .top-bar-left {
  flex: 0 0 auto;
  min-width: 0;
}

body.sidebar-is-collapsed .top-bar-left .top-bar-brand {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  overflow: hidden !important;
}

body.sidebar-is-collapsed .top-bar-left .brand-mark-img--topbar {
  display: block;
}

body.sidebar-is-collapsed .top-bar-left .brand-wordmark-img {
  display: none !important;
}

body.sidebar-is-collapsed .top-bar-left .sidebar-collapse-toggle.sidebar-collapse-toggle--topbar {
  display: none !important;
}

@media (min-width: 1024px) {
  .page-container.app-container > .sidebar.sidebar--stack {
    transition: width 180ms ease, flex-basis 180ms ease, min-width 180ms ease, max-width 180ms ease, padding 180ms ease;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 12px 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot.sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border-radius: 12px !important;
    overflow-x: hidden !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group-header,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-group-title,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-divider,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn__label,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-tag,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-use-cases-dock,
.page-container.app-container > .sidebar.sidebar--stack.is-collapsed .sidebar-wallet {
    display: none !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border-left-width: 1px !important;
    gap: 0 !important;
  }

  .page-container.app-container > .sidebar.sidebar--stack.is-collapsed #sidebarMenuRoot .nav-btn__icon {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
}

@media (max-width: 1023px) {
  .top-bar-left .sidebar-collapse-toggle.sidebar-collapse-toggle--topbar {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  body[data-app-feature="recharge"] .page-container.app-container {
    overflow: hidden !important;
  }

  body[data-app-feature="recharge"] .page-container.app-container > .main-area {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
    border-right: none !important;
    background: #07090f !important;
  }

  body[data-app-feature="recharge"] .page-container.app-container > #resultPanel.result-panel {
    display: none !important;
  }

  body[data-app-feature="recharge"] #authOnboardBanner {
    display: none !important;
  }

  body[data-app-feature="recharge"] .sidebar .vip-card {
    display: none !important;
  }

  body[data-app-feature="recharge"] .main-area > .yj-card.yj-card--panel {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100vh - 92px) !important;
    max-height: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-app-feature="recharge"] .main-area #mainDynamicStack.dynamic-panel-stack {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100vh - 92px) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-app-feature="recharge"] .main-area #panelRecharge.dynamic-panel--visible {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 92px) !important;
    display: block !important;
    overflow: visible !important;
  }
}

@media (min-width: 1024px) {
  body[data-app-feature="use-cases"] .page-container.app-container {
    overflow: hidden !important;
  }

  body[data-app-feature="use-cases"] .page-container.app-container > .main-area {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    background: #f5f7fb !important;
  }

  body[data-app-feature="use-cases"] .page-container.app-container > #resultPanel.result-panel,
body[data-app-feature="use-cases"] #authOnboardBanner {
    display: none !important;
  }

  body[data-app-feature="use-cases"] .main-area > .yj-card.yj-card--panel {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-app-feature="use-cases"] .main-area #mainDynamicStack.dynamic-panel-stack,
body[data-app-feature="use-cases"] .main-area #panelUseCases.dynamic-panel--visible {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

.use-cases-panel {
  color: #0f172a;
}

.use-cases-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 20px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(20px, 2.4vw, 32px);
  box-sizing: border-box;
  overflow: auto;
  background: #f5f7fb;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.use-cases-shell::before {
  display: none;
}

.use-cases-head,
.use-cases-section {
  position: relative;
  z-index: 1;
}

.use-cases-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.use-cases-head__intro {
  min-width: 0;
}

.use-cases-group-qr {
  flex-shrink: 0;
}

.use-cases-group-qr__card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 196px);
  padding: 14px 14px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px rgba(109, 40, 217, 0.08);
  text-align: center;
}

.use-cases-group-qr__img {
  display: block;
  width: 148px;
  height: auto;
  max-width: 148px;
  object-fit: contain;
  background: #000000;
  border: 1px solid rgba(15, 23, 42, 0.18);
}

.use-cases-group-qr__title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.use-cases-group-qr__hint {
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.use-cases-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: #f5f3ff;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.use-cases-head h3 {
  margin: 12px 0 6px;
  color: #0f172a;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.use-cases-head p {
  margin: 0;
  max-width: 720px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.use-cases-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.use-cases-section__head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.use-cases-section__head span {
  color: var(--text-tertiary, #64748b);
  font-size: 12px;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.use-case-tile {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.use-case-tile:hover {
  border-color: rgba(124, 58, 237, 0.24);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.use-case-video-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  min-height: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 24%, rgba(99, 102, 241, 0.08), transparent 42%),
    #f1f5f9;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.use-case-video-slot::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dbe3ef;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.use-case-video-slot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-36%, -50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #64748b;
}

.use-case-video-slot span {
  position: absolute;
  left: 10px;
  top: 9px;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.use-case-tile strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
}

.use-case-tile p {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}

.use-cases-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.use-cases-guide article {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.use-cases-guide span {
  display: block;
  margin-bottom: 8px;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.use-cases-guide strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
}

.use-cases-guide p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 1023px) {
  body[data-app-feature="use-cases"] .page-container.app-container,
body[data-app-feature="use-cases"] .page-container.app-container > .main-area,
body[data-app-feature="use-cases"] .main-area #mainDynamicStack.dynamic-panel-stack,
body[data-app-feature="use-cases"] .main-area #panelUseCases.dynamic-panel--visible {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .use-cases-shell {
    min-height: auto;
    overflow: visible;
  }

  .use-cases-head {
    grid-template-columns: 1fr;
  }

  .use-cases-group-qr {
    justify-self: start;
  }

  .use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.use-cases-shell {
  display: block;
  padding: clamp(22px, 2.6vw, 38px);
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, #f4f6fb 100%);
}

.use-cases-hero,
.use-cases-toolbar,
.use-cases-layout,
.use-cases-roadmap,
.shop-panel-download-card {
  width: min(100%, 1500px);
  margin-inline: auto;
  box-sizing: border-box;
}

.use-cases-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: clamp(18px, 3vw, 40px);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.use-cases-hero__copy {
  min-width: 0;
}

.use-cases-hero h3 {
  margin: 14px 0 8px;
  color: #0f172a;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.96;
  letter-spacing: 0;
}

.use-cases-hero p {
  max-width: 780px;
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.75;
}

.use-cases-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.use-cases-stats div {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
}

.use-cases-stats dt {
  margin: 0;
  color: #111827;
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
}

.use-cases-stats dd {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.use-cases-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.use-cases-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 12px;
  background: #eef2f7;
}

.use-cases-tabs button,
.use-cases-publish-btn {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.use-cases-tabs button {
  padding: 0 13px;
  background: transparent;
  color: #64748b;
}

.use-cases-tabs button.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
}

.use-cases-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.use-cases-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: min(34vw, 320px);
  min-width: 220px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #f8fafc;
  color: var(--text-tertiary, #64748b);
}

.use-cases-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
}

.use-cases-publish-btn {
  padding: 0 18px;
  background: #111827;
  color: #ffffff;
}

.use-cases-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.use-cases-feed {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.use-cases-featured-post {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dfe6f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.use-cases-post-media {
  position: relative;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(79, 70, 229, 0.38)),
    radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.5), transparent 22%),
    #1e293b;
}

.use-cases-post-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #4c1d95;
  font-size: 12px;
  font-weight: 800;
}

.use-cases-post-board {
  position: absolute;
  inset: auto 18px 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.use-cases-post-board span {
  aspect-ratio: 1;
  border-radius: 8px;
  background:
    radial-gradient(circle at 45% 32%, rgba(255, 255, 255, 0.72), transparent 30%),
    rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.use-cases-post-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 4px 4px;
}

.use-cases-post-type,
.use-cases-post-grid article span,
.use-cases-roadmap-grid article span,
.use-cases-side-card > div > span {
  color: var(--yj-appearance-primary,#7c3aed);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.03em;
}

.use-cases-post-body h4 {
  margin: 12px 0 10px;
  color: #0f172a;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: 0;
}

.use-cases-post-body p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.75;
}

.use-cases-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  color: #64748b;
  font-size: 12px;
}

.use-cases-post-body button {
  align-self: flex-start;
  min-height: 38px;
  margin-top: 18px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: #111827;
  color: #ffffff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

.use-cases-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.use-cases-post-grid .use-cases-section__head {
  grid-column: 1 / -1;
  margin: 0 0 -2px;
}

.use-cases-post-grid article,
.use-cases-roadmap-grid article,
.use-cases-side-card {
  min-width: 0;
  border: 1px solid #dfe6f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.use-cases-post-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.use-cases-post-grid article strong,
.use-cases-roadmap-grid article strong,
.use-cases-side-card strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
}

.use-cases-post-grid article p,
.use-cases-roadmap-grid article p,
.use-cases-side-card p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}

.use-cases-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.use-cases-side-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.use-cases-side-card--qr {
  justify-items: center;
  text-align: center;
}

.use-cases-side-card--qr div {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.use-cases-side-card--qr img {
  display: block;
  width: 168px;
  height: 168px;
  max-width: 100%;
  object-fit: contain;
  padding: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
}

.use-cases-mission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.use-cases-mission-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.use-cases-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.use-cases-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #22c55e);
}

.use-cases-topic-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.use-cases-topic-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #475569;
  font-size: 13px;
}

.use-cases-topic-list em {
  color: var(--text-tertiary, #64748b);
  font-style: normal;
  font-weight: 800;
}

.use-cases-roadmap {
  margin-top: 20px;
}

.use-cases-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.use-cases-roadmap-grid article {
  display: grid;
  gap: 9px;
  padding: 16px;
}

@media (max-width: 1180px) {
  .use-cases-layout,
.use-cases-hero {
    grid-template-columns: 1fr;
  }

  .use-cases-stats {
    max-width: 520px;
  }

  .use-cases-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .use-cases-toolbar,
.use-cases-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .use-cases-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .use-cases-search {
    width: 100%;
    min-width: 0;
  }

  .use-cases-featured-post,
.use-cases-post-grid,
.use-cases-roadmap-grid,
.use-cases-side {
    grid-template-columns: 1fr;
  }
}

.use-cases-shell:has(.use-cases-hero--lite) {
  padding: clamp(24px, 3vw, 42px);
  background: #f6f8fc;
}

.use-cases-hero--lite,
.use-cases-toolbar--lite,
.use-cases-layout--lite,
.use-cases-view .shop-panel-download-card,
.use-cases-shell > .shop-panel-download-card {
  width: min(100%, 1320px);
  margin-inline: auto;
  box-sizing: border-box;
}

.use-cases-hero--lite {
  display: block;
  padding: 0 0 18px;
  border-bottom: 1px solid #e6ebf3;
}

.use-cases-hero--lite h3 {
  margin: 12px 0 10px;
  font-size: clamp(42px, 4.6vw, 68px);
  line-height: 0.96;
  font-weight: 850;
}

.use-cases-hero--lite p {
  max-width: none;
  color: #52627a;
  font-size: 15px;
  line-height: 1.6;
}

.use-cases-hero--lite .use-cases-kicker {
  color: var(--yj-appearance-primary,#6d28d9);
  background: #f5f0ff;
  border-color: #d8c7ff;
}

.use-cases-toolbar--lite {
  margin-top: 18px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

.use-cases-toolbar--lite .use-cases-tabs {
  background: #f1f5f9;
}

.use-cases-toolbar--lite .use-cases-tabs button {
  min-width: 58px;
}

.use-cases-toolbar--lite .use-cases-search {
  width: min(30vw, 300px);
  background: #ffffff;
}

.use-cases-toolbar--lite .use-cases-publish-btn {
  min-width: 72px;
}

.use-cases-layout--lite {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  margin-top: 18px;
}

.use-cases-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 24px;
  border: 1px solid #dfe6f0;
  border-radius: 16px;
  background: #ffffff;
}

.use-cases-composer span,
.use-cases-post-grid--lite article span {
  color: #6d28d9;
  font-size: 12px;
  font-weight: 820;
}

.use-cases-composer h4 {
  margin: 8px 0 6px;
  color: #0f172a;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: 0;
}

.use-cases-composer p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.use-cases-composer button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  font-family: inherit;
  font-weight: 820;
  cursor: pointer;
}

.use-cases-post-grid--lite {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.use-cases-post-grid--lite .use-cases-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.use-cases-post-grid--lite article {
  min-height: 128px;
  padding: 18px;
  box-shadow: none;
  cursor: pointer;
}

.use-cases-post-card {
  cursor: pointer;
}

.use-cases-post-card:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.45);
  outline-offset: 2px;
}

.use-cases-post-card strong {
  cursor: default;
  pointer-events: none;
}

.use-cases-post-card--preset {
  border: 1.5px solid rgba(124, 58, 237, 0.25);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(236, 72, 153, 0.03) 100%);
}
.use-cases-preset-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(124,58,237,0.12);
}
.use-cases-preset-card__badge {
  font-size: 11px; font-weight: 600; color: #7c3aed; letter-spacing: 0.3px;
}
.use-cases-preset-card__title {
  font-size: 14px; font-weight: 700; color: #1e293b; pointer-events: auto; cursor: default;
}
.use-cases-preset-card__prompt {
  font-size: 12px; color: #64748b; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.use-cases-preset-card__meta {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.use-cases-preset-card__meta span {
  font-size: 11px; color: #94a3b8; background: rgba(100,116,139,0.06); padding: 2px 6px; border-radius: 4px;
}
.use-cases-preset-card__reuse {
  align-self: flex-start; margin-top: 4px; padding: 6px 14px; border-radius: 6px; border: none;
  background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s;
}
.use-cases-preset-card__reuse:hover { opacity: 0.85; }

.use-cases-preset-share-preview {
  margin: 12px 0 14px;
}

.use-cases-preset-card--share .use-cases-preset-card__title {
  pointer-events: auto;
}

.use-cases-post-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 10px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
}

.use-cases-post-meta {
  margin-top: 10px !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 11px !important;
}

.use-cases-post-grid--lite article.has-cover {
  padding-top: 12px;
}

.use-cases-post-cover {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.use-cases-post-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.use-cases-community-post-modal-backdrop {
  z-index: 1250;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.use-cases-community-post-modal-backdrop.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.use-cases-community-post-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(84vh, 920px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.use-cases-community-post-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eef2f7;
}

.use-cases-community-post-modal__tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 760;
}

.use-cases-community-post-modal__head h3 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.35;
}

.use-cases-community-post-modal__head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12px;
}

.use-cases-community-post-modal__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.use-cases-community-post-modal__body {
  padding: 16px 20px 22px;
  overflow: auto;
}

.use-cases-post-detail-cover,
.use-cases-post-detail-figure {
  margin: 0 0 16px;
}

.use-cases-post-detail-image {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
  cursor: zoom-in;
}

.use-cases-post-detail-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 52vh;
  object-fit: contain;
  pointer-events: none;
}

.use-cases-post-detail-body {
  color: #1e293b;
  font-size: 14px;
  line-height: 1.75;
  white-space: normal;
  word-break: break-word;
}

.use-cases-post-detail-marker {
  display: inline-block;
  margin: 2px 0;
  padding: 0 6px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.use-cases-post-detail-empty {
  margin: 0;
  color: var(--text-tertiary, #64748b);
  font-size: 13px;
}

.use-cases-post-detail-attachments {
  margin-top: 18px;
}

.use-cases-post-detail-attachments h5 {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
}

.use-cases-post-detail-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.use-cases-post-detail-attach--image {
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
  cursor: zoom-in;
}

.use-cases-post-detail-attach--image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  pointer-events: none;
}

.use-cases-post-detail-attach--video video {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #0f172a;
}

.use-cases-post-detail-attach--file {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #334155;
  font-size: 12px;
  text-decoration: none;
}

.use-cases-community-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(2, 6, 23, 0.82);
}

.use-cases-community-lightbox[hidden] {
  display: none !important;
}

.use-cases-community-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.use-cases-community-lightbox img {
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.use-cases-post-detail-comments {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
}

.use-cases-post-detail-comments h5 {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
}

.use-cases-post-detail-comments-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 240px;
  overflow: auto;
}

.use-cases-post-detail-comments-empty p,
.use-cases-post-detail-comments-list p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

.use-cases-comment-form--detail {
  margin-top: 0;
}

.use-cases-post-grid--lite article strong {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.35;
}

.use-cases-post-grid--lite article p {
  margin-top: 12px;
  font-size: 12px;
}

.use-cases-post-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.use-cases-post-actions button,
.use-cases-comment-form button {
  min-height: 30px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.use-cases-post-actions button {
  padding: 0 10px;
}

.use-cases-post-actions button[data-favorited="true"] {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}

.use-cases-comments {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.use-cases-comments[hidden],
.use-cases-comment-form[hidden] {
  display: none;
}

.use-cases-comments div {
  padding: 9px 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.use-cases-comments strong {
  display: block;
  margin: 0 0 4px;
  color: #334155;
  font-size: 12px;
}

.use-cases-comment-author {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
}

.use-cases-comment-author span {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 800;
}

.use-cases-comment-author--flagship span {
  background: linear-gradient(135deg, #1f1305, #7c2d12 48%, #f59e0b);
  color: #fff7ed;
  box-shadow: 0 4px 10px rgba(146, 64, 14, 0.16);
}

.use-cases-comments p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

.use-cases-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.use-cases-comment-form input {
  min-width: 0;
  min-height: 32px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
}

.use-cases-comment-form button {
  padding: 0 12px;
  background: #111827;
  color: #ffffff;
}

.use-cases-comment-form em {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.use-cases-side--lite {
  gap: 0;
}

.use-cases-side--lite .use-cases-side-card {
  box-shadow: none;
}

.use-cases-side--lite .use-cases-side-card--qr img {
  width: 150px;
  height: 150px;
}

.use-cases-compose-view {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 4px 0 40px;
}

.use-cases-compose-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.use-cases-compose-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
}

.use-cases-compose-back {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 820;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.use-cases-compose-back span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 15px;
  line-height: 1;
}

.use-cases-compose-back:hover {
  border-color: #a78bfa;
  background: #f8f5ff;
  color: #5b21b6;
}

.use-cases-compose-form {
  display: grid;
  gap: 18px;
}

.use-cases-compose-field {
  display: grid;
  gap: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 760;
}

.use-cases-compose-field input,
.use-cases-compose-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d6deeb;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
  font-size: 14px;
  outline: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.use-cases-compose-field input {
  height: 38px;
  padding: 0 12px;
}

.use-cases-compose-field textarea {
  min-height: 320px;
  padding: 16px 18px;
  line-height: 1.65;
  resize: vertical;
}

.use-cases-compose-field input:focus,
.use-cases-compose-field textarea:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.use-cases-compose-category {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
}

.use-cases-compose-category legend {
  padding: 0 6px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 820;
}

.use-cases-compose-category div {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f5f9;
}

.use-cases-compose-category button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #475569;
  font-family: inherit;
  font-size: 13px;
  font-weight: 820;
  cursor: pointer;
}

.use-cases-compose-category button.is-active {
  background: #ffffff;
  color: #5b21b6;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
}

.use-cases-compose-category p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.use-cases-compose-field--body {
  position: relative;
}

.use-cases-compose-tools {
  position: absolute;
  right: 0;
  top: -6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.use-cases-compose-tools button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}

.use-cases-compose-tools button span {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 6px;
  background: #eef2ff;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 900;
}

.use-cases-compose-tools button:hover {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}

.use-cases-compose-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}

.use-cases-compose-attachments:empty {
  display: none;
}

.use-cases-compose-attachments span {
  display: inline-flex;
  max-width: min(360px, 100%);
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #52627a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.use-cases-compose-attachments span img {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  object-fit: cover;
}

.use-cases-compose-attachments span.is-uploading {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fffbeb;
  color: #92400e;
}

.use-cases-compose-attachments span.is-ready {
  border-color: rgba(16, 185, 129, 0.28);
  background: #ecfdf5;
  color: #047857;
}

.use-cases-compose-attachments span.is-error {
  border-color: rgba(239, 68, 68, 0.28);
  background: #fef2f2;
  color: #b91c1c;
}

.use-cases-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 10px;
}

.use-cases-compose-status {
  margin-right: auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  max-width: min(560px, 100%);
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 720;
}

.use-cases-compose-status:empty {
  display: none;
}

.use-cases-compose-status[data-state="success"] {
  border-color: rgba(16, 185, 129, 0.28);
  background: #ecfdf5;
  color: #047857;
}

.use-cases-compose-status[data-state="warn"],
.use-cases-compose-status[data-state="loading"] {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fffbeb;
  color: #92400e;
}

.use-cases-compose-status[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.28);
  background: #fef2f2;
  color: #b91c1c;
}

.use-cases-compose-draft,
.use-cases-compose-submit {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 820;
  cursor: pointer;
}

.use-cases-compose-draft {
  background: #ffffff;
  color: #111827;
}

.use-cases-compose-submit {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

@media (max-width: 1180px) {
  .use-cases-layout--lite {
    grid-template-columns: 1fr;
  }

  .use-cases-post-grid--lite {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .use-cases-composer {
    align-items: stretch;
    flex-direction: column;
  }

  .use-cases-post-grid--lite {
    grid-template-columns: 1fr;
  }

  .use-cases-compose-head {
    gap: 16px;
  }

  .use-cases-compose-tools {
    position: static;
    justify-content: flex-start;
    margin-top: -2px;
  }

  .use-cases-compose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .use-cases-compose-status {
    margin-right: 0;
  }
}

/* Use-cases: keep sidebar/top chrome on the light workbench; content pane uses the same white surface. */
body[data-app-feature="use-cases"] {
  --bg: #f5f7fb;
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #e2e8f0;
  --ui-text-heading: #0f172a;
  --ui-text-label: #475569;
  --ui-text-hint: #64748b;
  --ui-bg-surface: #ffffff;
  --ui-bg-raised: #ffffff;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --shadow-card: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  background: #f5f7fb !important;
  color: #0f172a !important;
}

body[data-app-feature="use-cases"] .page-container.app-container,
body[data-app-feature="use-cases"] .page-container.app-container > .sidebar.sidebar--stack {
  background: #f5f7fb !important;
  color: #334155 !important;
}

body[data-app-feature="use-cases"] #sidebarMenuRoot.sidebar-nav,
body[data-app-feature="use-cases"] #sidebarMenuRoot.sidebar-nav.sidebar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  color: #334155 !important;
}

body[data-app-feature="use-cases"] .top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

/* Recharge: keep sidebar/top chrome on the light workbench; only the pricing pane stays cinematic dark. */
body[data-app-feature="recharge"] {
  --bg: #f5f7fb;
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #e2e8f0;
  --ui-text-heading: #0f172a;
  --ui-text-label: #475569;
  --ui-text-hint: #64748b;
  --ui-bg-surface: #ffffff;
  --ui-bg-raised: #ffffff;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --shadow-card: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  background: #f5f7fb !important;
  color: #0f172a !important;
}

body[data-app-feature="recharge"] .page-container.app-container,
body[data-app-feature="recharge"] .page-container.app-container > .sidebar.sidebar--stack {
  background: #f5f7fb !important;
  color: #334155 !important;
}

body[data-app-feature="recharge"] #sidebarMenuRoot.sidebar-nav,
body[data-app-feature="recharge"] #sidebarMenuRoot.sidebar-nav.sidebar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  color: #334155 !important;
}

body[data-app-feature="recharge"] .top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

/* Workbench reset: tool pages stay light and scannable; recharge keeps its own dark shell. */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) {
  --bg: #f5f7fb;
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #e2e8f0;
  --ui-text-heading: #0f172a;
  --ui-text-label: #475569;
  --ui-text-hint: #64748b;
  --ui-bg-surface: #ffffff;
  --ui-bg-raised: #ffffff;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --shadow-card: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  background: var(--yj-surface-page, #f5f7fb) !important;
  color: var(--yj-text-title, #0f172a) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .page-container.app-container,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area {
  background: var(--yj-surface-page, #f5f7fb) !important;
  color: var(--yj-text-title, #0f172a) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area > .yj-card.yj-card--panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--form-panel-radius, 6px) !important;
  box-shadow: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
  padding: var(--form-panel-padding, 12px) !important;
  height: 100%;
  min-height: 0;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel.result-panel {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel .result-gallery-body,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel .result-grid,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel .result-inspiration-bar {
  background: #ffffff !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-panel-loading-state {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-panel-loading-state__line {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-panel-loading-state__sub {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .page-container.app-container {
  background: #f5f7fb !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-block,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-step-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #gpt-image-panel .gpt-step-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #nano-banana-panel .gpt-step-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .target-platform-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ratio-resolution-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .poster-feature-block,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .rewrite-copy-panel,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .fashion-feature-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .fashion-lock-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-aspect-clarity-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-inspiration-bar {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-block:hover {
  background: #ffffff !important;
  border-color: rgba(124, 58, 237, 0.24) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #sidebarMenuRoot.sidebar-nav {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .param-group,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-section-group,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #sellpointGroup.param-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .main-advanced-settings {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .main-advanced-summary {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .main-advanced-summary__hint {
  color: var(--text-tertiary, #64748b) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .main-designer-note {
  background: #f8f5ff !important;
  border-color: rgba(124, 58, 237, 0.12) !important;
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-advanced-settings,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-panel,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card:not(.result-fail),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .custom-prompt-card {
  background: var(--yj-surface-card, #ffffff) !important;
  border-color: var(--yj-border-default, #e2e8f0) !important;
  color: var(--yj-text-title, #0f172a) !important;
  box-shadow: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail.result-fail--single-retry,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail.result-fail--friendly {
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  color: #991b1b !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.08) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail .fail-title {
  color: #991b1b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail .fail-reason,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail .fail-recover-tip {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card.result-fail .fail-icon {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-skeleton--failed {
  border-color: rgba(239, 68, 68, 0.28) !important;
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-skeleton--failed .skeleton-img--failed,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .skeleton-img--failed {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-skeleton--failed .skeleton-img__label {
  color: #991b1b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-skeleton--failed .skeleton-img__sub {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel.result-panel,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel > .result-gallery-body,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultGrid.result-grid,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state.result-empty-state--assistant {
  border-color: rgba(124, 58, 237, 0.18) !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(217, 255, 63, 0.1) 0%, transparent 44%),
    radial-gradient(circle at 82% 18%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 50% 88%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    #ffffff !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state--assistant .result-empty-title {
  background: linear-gradient(120deg, #312e81 0%, #6d28d9 48%, #db2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-next-hints {
  color: #475569 !important;
  background: #f5f3ff !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-next-hints strong {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state .result-panel-empty-hero {
  border-color: rgba(124, 58, 237, 0.24) !important;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(236, 72, 153, 0.06)) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state .result-panel-empty-hero__glyph {
  border-color: #6d28d9 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state .result-panel-empty-hero__glyph::before {
  background: #7c3aed !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state .result-panel-empty-hero__glyph::after {
  background: linear-gradient(135deg, transparent 0 32%, #7c3aed 34% 58%, transparent 60%),
    linear-gradient(45deg, transparent 0 28%, #a855f7 30% 54%, transparent 56%) !important;
  opacity: 1 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state h3,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state strong,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-title {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state p,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-empty-state span {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .module-title,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .step-title-main,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .section-step-label,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-block__main-title,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-name,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-panel__title,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card-title,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area h1,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area h2,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area h3,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area h4 {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .hint-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .hint-text--inline,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .step-inline-hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .custom-input-hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-model-card-desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generate-hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-card-meta,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area p:not(.gpt-prompt-validation),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area small {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .custom-input,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .custom-select,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .custom-textarea,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) input.custom-input,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) textarea.custom-input,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) select.custom-input,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .standard-setting-select,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-setting-select,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-prompt-textarea,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .prompt-input,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .rewrite-copy-textarea,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .selfmedia-textarea,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-message-input {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-zone,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .preview-container,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .preview-area,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-upload-block,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .rewrite-upload-zone {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-zone .add-image-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ratio-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .resolution-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-output-type-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .standard-output-select-field,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-platform-select-field,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .toolbar-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .rewrite-option-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference__text strong,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference__text small {
  color: #334155 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference__icon {
  color: #64748b !important;
  opacity: 1 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference:hover {
  background: #f5f3ff !important;
  border-color: rgba(124, 58, 237, 0.34) !important;
  color: #6d28d9 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference:hover .btn-toggle-reference__text strong,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .btn-toggle-reference:hover .btn-toggle-reference__icon {
  color: #6d28d9 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ratio-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .resolution-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-output-type-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .standard-output-select-field.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-platform-select-field.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .rewrite-option-card.active {
  background: rgba(139, 92, 246, 0.10) !important;
  border-color: rgba(124, 58, 237, 0.38) !important;
  color: var(--yj-appearance-text,#4c1d95) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
}

/* Light active chips: child icons/labels must not stay white on pale purple surfaces. */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard.mode-matting .matting-tool-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard.mode-matting .matting-model-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active {
  background: rgba(139, 92, 246, 0.10) !important;
  border-color: rgba(124, 58, 237, 0.38) !important;
  color: var(--yj-appearance-text,#4c1d95) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
  filter: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn.active .matting-tool-btn__icon,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn.active .matting-tool-btn__label,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn.active .yj-emoji,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active .matting-model-btn__name,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active .matting-model-btn__cost,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active .matting-model-btn__tag,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .model-name,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .model-desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .model-cost,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .gpt-model-card-desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.active .model-name,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.active .model-desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.active .model-cost,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ratio-btn.active .ratio-btn__s,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .resolution-btn.active .ratio-btn__s,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .standard-output-select-field.active *,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-platform-select-field.active *,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-output-type-btn.active *,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .rewrite-option-card.active * {
  color: var(--yj-appearance-text,#4c1d95) !important;
  opacity: 1 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-tool-btn.active .matting-tool-btn__icon {
  background: rgba(124, 58, 237, 0.12) !important;
  border-radius: 4px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active .matting-model-btn__cost,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .matting-model-btn.active .matting-model-btn__tag,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .model-tag {
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .model-desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .model-btn.selected .gpt-model-card-desc {
  color: #6d28d9 !important;
  opacity: 0.88 !important;
}

/* Free-image model cards: compact choice guidance without status badges. */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-tag,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-tag {
  display: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-btn {
  grid-template-columns: 26px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  justify-items: stretch !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  min-height: 46px !important;
  padding: 6px 8px !important;
  text-align: left !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-logo,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-logo {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 24px !important;
  height: 24px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-logo img,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-logo img {
  width: 18px !important;
  height: 18px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-name,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .gpt-model-card-desc,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .gpt-model-card-desc {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: #7b8496 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn.selected .gpt-model-card-desc,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-btn.selected .gpt-model-card-desc {
  color: #6d28d9 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-cost,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-cost {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  text-align: right !important;
  box-shadow: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-model-grid .model-btn.selected .model-cost,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-model-grid .model-btn.selected .model-cost {
  color: #6d28d9 !important;
}

/* Keep solid-purple chips readable with white labels (count/aspect pickers). */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-count-btn.param-btn.active:not(.image-channel-btn),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .gpt-count-btn.param-btn.active:not(.image-channel-btn) *,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .fashion-mode-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .fashion-mode-btn.active * {
  color: #ffffff !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-chat-main,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-canvas-pane,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-chat-pane,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-chat-head,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-chat-composer,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-empty-hero,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-image-model-current,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-image-model-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .ops-canvas-viewport {
  background-color: #f8fafc !important;
  background-image: none !important;
}

/* Final rollback: keep navigation and tool workbenches close to the clearer light version. */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body .page-container.app-container {
  overflow-x: hidden !important;
}

body[data-app-feature="recharge"] #mainGenerateSticky,
body[data-app-feature="use-cases"] #mainGenerateSticky,
body[data-app-feature="designer-cards"] #mainGenerateSticky,
body[data-app-feature="operation-center"] #mainGenerateSticky,
body[data-app-feature="recharge"] #mobileGenerateBar,
body[data-app-feature="use-cases"] #mobileGenerateBar,
body[data-app-feature="designer-cards"] #mobileGenerateBar,
body[data-app-feature="operation-center"] #mobileGenerateBar {
  display: none !important;
}

body .page-container.app-container > .sidebar.sidebar--stack {
  background: #f5f7fb !important;
  border-right: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

body #sidebarMenuRoot .nav-group,
body #sidebarMenuRoot .nav-group-header,
body #sidebarMenuRoot .nav-divider {
  background: transparent !important;
  border-color: #e2e8f0 !important;
  color: var(--text-tertiary, #64748b) !important;
  box-shadow: none !important;
}

body #sidebarMenuRoot .nav-group .nav-btn,
body #sidebarMenuRoot .nav-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body #sidebarMenuRoot .nav-group .nav-btn:hover,
body #sidebarMenuRoot .nav-btn:hover {
  background: #f8fafc !important;
  border-color: rgba(139, 92, 246, 0.32) !important;
  color: #334155 !important;
}

body #sidebarMenuRoot .nav-btn.active,
body #sidebarMenuRoot .nav-group .nav-btn.active {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.44) !important;
  color: #4c1d95 !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.2), 0 8px 18px rgba(124, 58, 237, 0.12) !important;
}

body #sidebarMenuRoot .nav-btn .nav-btn__label,
body #sidebarMenuRoot .nav-group .nav-btn .nav-btn__label {
  color: inherit !important;
}

body #sidebarMenuRoot .nav-btn.active .nav-btn__label,
body #sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
  color: #4c1d95 !important;
}

body .sidebar-wallet {
  background: linear-gradient(165deg, #ffffff 0%, #faf5ff 55%, #f5f3ff 100%) !important;
  border-color: #ddd6fe !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 22px rgba(109, 40, 217, 0.1) !important;
}

body .sidebar-wallet__num {
  color: #4c1d95 !important;
}

body .sidebar-wallet .vip-btn--sidebar-recharge,
body .sidebar-wallet__action--recharge {
  background: #ffffff !important;
  border-color: #c4b5fd !important;
  color: #6d28d9 !important;
  box-shadow: 0 1px 2px rgba(109, 40, 217, 0.06) !important;
}

body .sidebar-wallet .vip-btn--sidebar-recharge:hover,
body .sidebar-wallet__action--recharge:hover {
  background: #7c3aed !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.22) !important;
}

body .sidebar-wallet__action--account {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: #e9d5ff !important;
  color: #5b21b6 !important;
}

body .sidebar-wallet__action--account:hover {
  background: #ffffff !important;
  border-color: #ddd6fe !important;
  color: #4c1d95 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #authOnboardBanner {
  background: linear-gradient(135deg, #ffffff 0%, #f7f2ff 100%) !important;
  border-color: rgba(139, 92, 246, 0.24) !important;
  color: #334155 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #authOnboardBanner,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #authOnboardBanner li,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #authOnboardBanner strong {
  color: #334155 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .top-bar,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .page-container.app-container > .main-area,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel.result-panel {
  min-width: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel.result-panel {
  max-width: 100% !important;
}

@media (max-width: 1440px) and (min-width: 1101px) {
  /* The fixed desktop form column starts after the compact tablet band. */
  body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]):not([data-app-feature="operation-center"]):not([data-app-feature="generation-history"]):not([data-app-feature="account-center"]):not([data-app-feature="designer-cards"]):not([data-app-feature="developer-center"]) .page-container.app-container > .main-area {
    flex: 0 0 480px !important;
    width: 480px !important;
    min-width: 468px !important;
    max-width: 500px !important;
  }

  body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]):not([data-app-feature="operation-center"]):not([data-app-feature="generation-history"]):not([data-app-feature="account-center"]):not([data-app-feature="designer-cards"]):not([data-app-feature="developer-center"]) .page-container.app-container > #resultPanel.result-panel {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
  }
}

@media (max-width: 1440px) {
  body[data-app-feature="use-cases"] .use-cases-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-app-feature="use-cases"] .use-cases-shell {
    overflow-x: hidden !important;
  }
}

@media (max-width: 1440px) and (min-width: 1024px) {
  body[data-app-feature="recharge"] .page-container.app-container > .main-area,
body[data-app-feature="use-cases"] .page-container.app-container > .main-area,
body[data-app-feature="generation-history"] .page-container.app-container > .main-area {
    flex: 0 1 calc(100vw - 218px) !important;
    width: calc(100vw - 218px) !important;
    max-width: calc(100vw - 218px) !important;
    min-width: 0 !important;
  }

  body[data-app-feature="recharge"] .recharge-workspace-shell {
    overflow-x: hidden !important;
  }

  body[data-app-feature="recharge"] .recharge-workspace-mount .api-key-plans--stack {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-app-feature="recharge"] .recharge-workspace-mount .plan-item {
    min-height: 280px !important;
  }
}

/* Local polish pass: keep tool pages light, readable, and consistent. */
body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn:hover:not(.active) {
  background: #faf7ff !important;
  border-color: rgba(124, 58, 237, 0.34) !important;
  color: #1f2937 !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn.active {
  background: #f5efff !important;
  border-color: rgba(124, 58, 237, 0.58) !important;
  color: #312e81 !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.18) !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-btn__name,
body[data-app-feature="matting-refine"] #panelStandard .matting-model-btn.active .matting-model-btn__name {
  color: #0f172a !important;
  opacity: 1 !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-btn__cost,
body[data-app-feature="matting-refine"] #panelStandard .matting-model-btn.active .matting-model-btn__cost {
  background: #f3e8ff !important;
  border: 1px solid rgba(124, 58, 237, 0.24) !important;
  color: var(--yj-appearance-primary,#7c3aed) !important;
  opacity: 1 !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-btn__tag {
  background: #ede9fe !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  color: var(--yj-appearance-primary,#7c3aed) !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-btn__tag--vip {
  background: #fff7ed !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
  color: #b45309 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn:hover:not(.active):not(:disabled),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn:hover:not(.active):not(:disabled) {
  background: #f5f3ff !important;
  border-color: rgba(124, 58, 237, 0.38) !important;
  color: #4c1d95 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn.active,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn.active {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn:disabled,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn:disabled,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn[aria-disabled="true"],
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn[aria-disabled="true"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: var(--text-tertiary, #64748b) !important;
  opacity: 1 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group--span-all,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-aspect-resolution-card.gpt-aspect-clarity-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-param-group--output .rewrite-aspect-resolution-card.gpt-aspect-clarity-card {
  background: transparent !important;
  border-color: transparent !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-copy-textarea,
body[data-app-feature="rewrite"] #panelRewrite .standard-setting-select,
body[data-app-feature="rewrite"] #panelRewrite .gpt-setting-select {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone .upload-text {
  color: var(--yj-commerce-text-color, #64748b) !important;
  opacity: 1 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone .add-image-btn,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-copy-textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn:not(.active) {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn:not(.active) .ratio-btn__s {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable__inner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable__title {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable__meta {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-slot__title {
  color: #0f172a !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-slot__meta {
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable .reference-upload-zone,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable .reference-upload-zone .add-image-btn {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable .reference-upload-zone .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable .reference-upload-zone .add-image-btn__sub {
  color: #0f172a !important;
  opacity: 1 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable .reference-upload-zone .add-image-btn__hint {
  color: #64748b !important;
  opacity: 1 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-expandable .reference-upload-clear-btn {
  color: #64748b !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.btn-toggle-reference.is-expanded,
#toggleReferencePanel[aria-expanded="true"] {
  display: flex;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 10px 14px;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}

.btn-toggle-reference.is-expanded .btn-toggle-reference__icon,
#toggleReferencePanel[aria-expanded="true"] .btn-toggle-reference__icon {
  font-size: 14px;
}

.btn-toggle-reference.is-expanded .btn-toggle-reference__text strong,
#toggleReferencePanel[aria-expanded="true"] .btn-toggle-reference__text strong {
  font-size: 14px;
}

.upload-ref-extras .btn-toggle-reference.is-expanded,
.upload-ref-extras #toggleReferencePanel[aria-expanded="true"] {
  margin-bottom: 6px;
}

body:not([data-app-panel-mode="fashion"]) #panelStandard #toggleReferencePanel[aria-expanded="true"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 10px 14px;
  justify-content: center;
  gap: 8px;
}

body:not([data-app-panel-mode="fashion"]) #panelStandard #toggleReferencePanel[aria-expanded="true"] .btn-toggle-reference__text {
  display: flex !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-expandable__inner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  box-shadow: none !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot__title {
  color: #0f172a !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot__meta,
body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-expandable__desc {
  color: #64748b !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone,
body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .preview-container.preview-area {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone .add-image-btn,
body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone .upload-text,
body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone .add-image-btn__sub,
body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone .add-image-btn__hint {
  color: #64748b !important;
  opacity: 1 !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone:not(.upload-zone--has-items) {
  min-height: 84px !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn {
  min-height: 84px !important;
  padding: 10px 8px !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone.upload-zone--has-items {
  min-height: 68px !important;
  padding: 4px !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone.upload-zone--has-items .uploaded-item,
body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone.upload-zone--has-items .add-image-btn {
  flex-basis: 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone:not(.upload-zone--has-items) .upload-text {
  max-width: none !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .upload-ref-slot .reference-upload-zone:not(.upload-zone--has-items) .add-image-btn__hint {
  font-size: 9px !important;
}

/* Navigation icon polish: one consistent icon system for the sidebar. */
body #sidebarMenuRoot .nav-group .nav-btn__icon,
body #sidebarMenuRoot .nav-btn__icon {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-tertiary, #64748b) !important;
  transform: none !important;
  filter: none !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

body #sidebarMenuRoot .nav-group .nav-btn__icon .lucide-nav-svg,
body #sidebarMenuRoot .nav-btn__icon .lucide-nav-svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.9 !important;
  vector-effect: non-scaling-stroke !important;
}

body #sidebarMenuRoot .nav-group .nav-btn:hover .nav-btn__icon,
body #sidebarMenuRoot .nav-btn:hover .nav-btn__icon {
  background: #f5f3ff !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: #7c3aed !important;
}

body #sidebarMenuRoot .nav-btn.active .nav-btn__icon,
body #sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-color: rgba(124, 58, 237, 0.82) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.22) !important;
  transform: none !important;
  filter: none !important;
}

body #sidebarMenuRoot .nav-btn.active .nav-btn__icon .lucide-nav-svg,
body #sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__icon .lucide-nav-svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

/* Account entry consolidation: keep account assets in the sidebar, not the top bar. */
.topbar-account-hidden {
  display: none !important;
}

.top-bar-right .key-btn--topbar {
  display: none !important;
}

.top-bar-right--hidden {
  display: none !important;
}

.sidebar .vip-card.vip-card--quiet {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
}

.sidebar .vip-card.sidebar-recharge-zone {
  padding: 12px !important;
  gap: 8px !important;
}

.sidebar-account-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.sidebar .key-btn--sidebar-auth,
.sidebar-account-link {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}

.sidebar .key-btn--sidebar-auth {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

.sidebar .key-btn--sidebar-auth:hover {
  background: #f8fafc !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: #4c1d95 !important;
}

.sidebar .key-btn--sidebar-auth.key-btn--has-key {
  background: #f5f3ff !important;
  border-color: rgba(124, 58, 237, 0.34) !important;
  color: #5b21b6 !important;
}

.sidebar-account-link {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.18);
  color: #5b21b6;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.06);
}

.sidebar-account-link:hover {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.34);
  color: #4c1d95;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.1);
}

.sidebar .vip-card__hint {
  margin: 0 !important;
  color: var(--text-tertiary, #64748b) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

#resultPanel .result-try-examples-btn,
.result-try-examples-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Account center: light workbench panel with full-height scrollable usage log. */
body[data-app-feature="account-center"] {
  --bg: #f5f7fb;
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #e2e8f0;
  --ui-text-heading: #0f172a;
  --ui-text-label: #475569;
  --ui-text-hint: #64748b;
  --ui-bg-surface: #ffffff;
  --ui-bg-raised: #ffffff;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --shadow-card: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  background: #f5f7fb !important;
  color: #0f172a !important;
}

body[data-app-feature="account-center"] .page-container.app-container,
body[data-app-feature="account-center"] .page-container.app-container > .sidebar.sidebar--stack {
  background: #f5f7fb !important;
  color: #334155 !important;
}

body[data-app-feature="account-center"] #sidebarMenuRoot.sidebar-nav,
body[data-app-feature="account-center"] #sidebarMenuRoot.sidebar-nav.sidebar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  color: #334155 !important;
}

body[data-app-feature="account-center"] .page-container.app-container > .main-area {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  border-right: none !important;
  background: #f5f7fb !important;
  color: #0f172a !important;
}

body[data-app-feature="account-center"] .page-container.app-container > #resultPanel.result-panel,
body[data-app-feature="account-center"] #authOnboardBanner,
body[data-app-feature="account-center"] #mainGenerateSticky,
body[data-app-feature="account-center"] #mobileGenerateBar {
  display: none !important;
}

body[data-app-feature="account-center"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="account-center"] .main-area #mainDynamicStack.dynamic-panel-stack,
body[data-app-feature="account-center"] .main-area #panelAccountCenter.dynamic-panel--visible {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

.account-center-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0 4px;
  box-sizing: border-box;
  overflow: hidden;
  color: #0f172a;
  background: transparent;
  border: none;
}

.account-center-head,
.account-center-body,
.account-center-grid,
.account-center-main,
.account-card {
  position: relative;
  z-index: 1;
}

.account-center-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.account-center-head__intro {
  min-width: 0;
  flex: 1 1 auto;
}

.account-center-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  margin-top: 6px;
  max-width: 920px;
}

.account-center-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.account-center-steps__item .account-step-index {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 10px;
}

.account-center-steps__sep {
  width: 10px;
  height: 1px;
  flex: 0 0 10px;
  background: #cbd5e1;
}

.account-center-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.account-center-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.account-center-main__primary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-center-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.account-center-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.account-center-pill,
.account-card__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 750;
}

.account-center-head h3 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 800;
}

.account-center-head__lede,
.account-center-head p {
  margin: 0;
  max-width: 640px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.account-center-head__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 4px;
}

.account-center-head .notice-btn--account {
  width: 38px;
  min-width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.account-center-head__action,
.recharge-workspace-account-link {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer;
}

.account-center-head__action:hover,
.recharge-workspace-account-link:hover {
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: #5b21b6 !important;
  background: #faf5ff !important;
}

.account-center-content-grid {
  display: contents;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-chrome-hooks {
  display: none !important;
}

.account-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.account-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.account-card__head--compact {
  margin-bottom: 10px;
}

.account-card__head--compact h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: #f5f3ff;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.account-ledger-toolbar__lead h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-card__head h4 {
  margin: 6px 0 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}

.account-card__eyebrow {
  min-height: 20px;
  padding: 0 8px;
  font-size: 10px;
  color: #7c3aed;
}

.account-status-pill,
.account-ledger-count {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.account-status-pill[data-state="ready"] {
  border-color: rgba(16, 185, 129, 0.28);
  background: #ecfdf5;
  color: #047857;
}

.account-status-pill[data-state="syncing"] {
  border-color: rgba(124, 58, 237, 0.24);
  background: #f5f3ff;
  color: #6d28d9;
}

.account-status-pill[data-state="error"] {
  border-color: rgba(244, 63, 94, 0.28);
  background: #fff1f0;
  color: #b42318;
}

.account-key-label {
  display: block;
  margin-bottom: 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.account-key-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
}

.account-key-input {
  width: 100%;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 12px;
  box-sizing: border-box;
}

.account-key-input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.account-key-input::placeholder {
  color: var(--text-tertiary, #64748b);
}

.account-key-visibility,
.account-primary-btn,
.account-ghost-btn {
  height: 40px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.account-key-visibility,
.account-ghost-btn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
}

.account-key-visibility:hover,
.account-ghost-btn:hover {
  border-color: rgba(124, 58, 237, 0.28);
  color: #5b21b6;
  background: #faf5ff;
}

.account-key-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  margin-top: 10px;
}

.account-key-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, 68px);
  gap: 6px;
}

.account-key-secondary-actions .account-ghost-btn {
  min-width: 0;
  padding-inline: 0;
  white-space: nowrap;
}

.account-reset-key-btn {
  border-color: rgba(245, 158, 11, 0.34);
  color: #92400e;
  background: #fffbeb;
}

.account-subkey-block {
  margin-top: 14px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fafbfc;
  overflow: hidden;
}

.account-subkey-block > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 12px;
}

.account-subkey-block > summary::-webkit-details-marker {
  display: none;
}

.account-subkey-summary__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.account-subkey-summary__main h4 {
  margin: 0;
  flex: 0 0 auto;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

.account-subkey-summary__status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.account-subkey-summary__status[data-state="ready"] {
  color: #047857;
}

.account-subkey-summary__status[data-state="syncing"] {
  color: var(--yj-appearance-primary,#6d28d9);
}

.account-subkey-summary__status[data-state="locked"],
.account-subkey-summary__status[data-state="empty"],
.account-subkey-summary__status[data-state="error"] {
  color: #64748b;
}

.account-subkey-summary__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: #f5f3ff;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 11px;
  font-weight: 750;
}

.account-subkey-summary__cta-close {
  display: none;
}

.account-subkey-summary__cta-icon {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}

.account-subkey-block[open] .account-subkey-summary__cta-open {
  display: none;
}

.account-subkey-block[open] .account-subkey-summary__cta-close {
  display: inline;
}

.account-subkey-block[open] .account-subkey-summary__cta-icon {
  transform: rotate(180deg);
}

.account-subkey-block > summary:hover .account-subkey-summary__cta,
.account-subkey-block > summary:focus-visible .account-subkey-summary__cta {
  border-color: rgba(124, 58, 237, 0.4);
  background: #ede9fe;
}

.account-subkey-block > summary:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.35);
  outline-offset: 1px;
}

.account-subkey-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.account-subkey-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  margin-top: 8px;
}

.account-subkey-once {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.account-subkey-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.account-subkey-item,
.account-subkey-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.account-subkey-item.is-revoked {
  opacity: 0.72;
}

.account-subkey-item__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-subkey-item__main strong {
  font-size: 14px;
  color: #0f172a;
}

.account-subkey-item__main span,
.account-subkey-empty {
  font-size: 12px;
  color: #64748b;
}

.account-reset-key-btn:hover {
  border-color: rgba(245, 158, 11, 0.58);
  color: #78350f;
  background: #fef3c7;
}

.account-key-recharge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e8ecf3;
  border-radius: 8px;
  background: #f8fafc;
}

.account-key-recharge-row__hint {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.account-recharge-btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.account-recharge-btn:hover {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}

.account-primary-btn {
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
}

.account-primary-btn:hover {
  filter: brightness(1.04);
}

.account-ghost-btn--small {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.account-card__hint {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.account-card__hint--success {
  color: #047857;
}

.account-card__hint--warn {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: #fffbeb;
  color: #b45309;
  font-weight: 650;
}

.account-card__hint--error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(244, 63, 94, 0.35);
  background: #fff1f2;
  color: #be123c;
  font-weight: 700;
}

.account-balance-meter {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
  border: 1px solid rgba(124, 58, 237, 0.16);
}

.account-balance-meter__label,
.account-balance-meter__unit {
  color: #64748b;
  font-size: 12px;
}

.account-balance-meter strong {
  color: #4c1d95;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.account-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.account-metric-row div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.account-metric-row span {
  display: block;
  color: #64748b;
  font-size: 11px;
}

.account-metric-row strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-metric-row--today-settlement {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-metric-row--overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-card--today-settlement {
  flex: 0 0 auto;
  margin-top: 0;
}

.account-card--balance,
.account-card--overview {
  flex: 0 0 auto;
}

.account-card--key {
  overflow: visible;
}

.account-card--ledger {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  clear: both;
}

.account-card--community {
  min-height: 0;
  overflow: auto;
  align-self: stretch;
  max-height: 100%;
}

.account-community-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.account-community-preview {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #ede9fe;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07), rgba(255, 255, 255, 0.92));
}

.account-community-preview strong,
.account-community-preview span {
  display: block;
}

.account-community-preview strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.account-community-identity-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 20px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.account-community-identity-badge[data-identity-plan="flagship"] {
  border-color: rgba(245, 158, 11, 0.36);
  background: linear-gradient(135deg, #1f1305, #6b3b0b 48%, #f59e0b);
  color: #fff7ed;
  box-shadow: 0 8px 18px rgba(146, 64, 14, 0.18);
}

.account-community-identity-badge[data-identity-plan="standard"] {
  border-color: rgba(124, 58, 237, 0.28);
  background: linear-gradient(135deg, #ede9fe, #ffffff);
  color: #5b21b6;
}

.account-community-preview span {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.account-community-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.16);
}

.account-community-avatar span {
  position: relative;
  z-index: 2;
}

.account-community-avatar--identity {
  border: 2px solid rgba(255, 255, 255, 0.78);
}

.account-community-avatar--mini-frame {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22), 0 12px 24px rgba(14, 116, 144, 0.14);
}

.account-community-avatar--trial-frame {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 12px 24px rgba(37, 99, 235, 0.14);
}

.account-community-avatar--standard-frame {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.26), 0 14px 28px rgba(91, 33, 182, 0.18);
}

.account-community-avatar--flagship-frame {
  overflow: visible;
  color: #fff7ed;
  background: radial-gradient(circle at 35% 28%, #fbbf24 0 12%, #f97316 13% 34%, #3b1705 70%);
  border-color: rgba(255, 247, 237, 0.96);
  box-shadow:
    0 0 0 3px #f59e0b,
    0 0 0 7px rgba(127, 29, 29, 0.92),
    0 18px 30px rgba(127, 29, 29, 0.28);
}

.account-community-avatar--flagship-frame::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, transparent 0 14px, #f59e0b 15px 20px, transparent 21px) top left / 28px 28px no-repeat,
    linear-gradient(225deg, transparent 0 14px, #f59e0b 15px 20px, transparent 21px) top right / 28px 28px no-repeat,
    linear-gradient(45deg, transparent 0 14px, #f59e0b 15px 20px, transparent 21px) bottom left / 28px 28px no-repeat,
    linear-gradient(315deg, transparent 0 14px, #f59e0b 15px 20px, transparent 21px) bottom right / 28px 28px no-repeat;
  pointer-events: none;
}

.account-community-avatar--flagship-frame::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 1px solid rgba(253, 230, 138, 0.9);
  pointer-events: none;
}

.account-community-avatar--violet,
.account-community-swatch--violet {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.account-community-avatar--blue,
.account-community-swatch--blue {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.account-community-avatar--green,
.account-community-swatch--green {
  background: linear-gradient(135deg, #059669, #34d399);
}

.account-community-avatar--amber,
.account-community-swatch--amber {
  background: linear-gradient(135deg, #d97706, #fbbf24);
}

.account-community-avatar--rose,
.account-community-swatch--rose {
  background: linear-gradient(135deg, #e11d48, #fb7185);
}

.account-community-avatar--slate,
.account-community-swatch--slate {
  background: linear-gradient(135deg, #334155, #94a3b8);
}

.account-community-form {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.account-community-form .account-key-label,
.account-community-form .account-key-input {
  margin: 0;
}

.account-community-form .account-key-label {
  align-self: end;
}

.account-community-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.account-community-actions .account-primary-btn,
.account-community-actions .account-ghost-btn {
  width: 100%;
}

.account-community-avatar-picker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.account-community-swatch {
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
}

.account-community-swatch.active {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.42), 0 6px 14px rgba(124, 58, 237, 0.18);
}

.account-community-swatch:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.24);
  outline-offset: 2px;
}

.account-card--phone {
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
}

.account-card--key .account-card--phone {
  margin-top: 12px;
  border-style: dashed;
  border-color: rgba(124, 58, 237, 0.22);
  background: #fbfaff;
  box-shadow: none;
}

.account-card--key .account-phone-details > summary {
  padding: 12px;
}

.account-card--key .account-phone-body {
  padding: 0 12px 12px;
}

.account-card--key .account-phone-toolbar {
  max-width: none;
}

.account-phone-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
}

.account-phone-details > summary::-webkit-details-marker {
  display: none;
}

.account-phone-summary__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-phone-summary__main strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.account-phone-summary__hint {
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
}

.account-email-reward-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.account-email-reward-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #78350f;
  font-size: 12px;
  line-height: 1.45;
}

.account-email-reward-callout strong {
  flex: 0 0 auto;
  color: #b45309;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.account-phone-summary__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(124, 58, 237, 0.24);
  border-radius: 8px;
  background: #fff;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.1);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.account-phone-summary__cta-close {
  display: none;
}

.account-phone-summary__cta-icon {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.16s ease;
}

.account-phone-details > summary:hover .account-phone-summary__cta,
.account-phone-details > summary:focus-visible .account-phone-summary__cta {
  border-color: rgba(124, 58, 237, 0.42);
  background: #f5f3ff;
  color: var(--yj-appearance-primary,#5b21b6);
  transform: translateY(-1px);
}

.account-phone-details > summary:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.22);
  outline-offset: 2px;
}

.account-phone-details[open] .account-phone-summary__cta-open {
  display: none;
}

.account-phone-details[open] .account-phone-summary__cta-close {
  display: inline;
}

.account-phone-details[open] .account-phone-summary__cta-icon {
  transform: rotate(225deg) translate(-1px, -1px);
}

.account-phone-body {
  padding: 0 14px 10px;
  border-top: 1px solid #eef2f7;
}

.account-phone-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  max-width: 520px;
  padding-top: 8px;
}

.account-phone-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 2px;
  border-radius: 8px;
  background: #f1f5f9;
  flex: 1 1 auto;
  max-width: 100%;
}

.account-phone-tab {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.account-phone-tab.active {
  background: #fff;
  color: var(--yj-appearance-primary,#5b21b6);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.account-phone-pane {
  flex: 1 1 280px;
  min-width: 0;
}

.account-phone-pane__hint {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.account-phone-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.account-phone-compact__phone {
  width: 118px;
  min-width: 118px;
  flex: 0 0 118px;
}

.account-phone-compact__email {
  width: 168px;
  min-width: 168px;
  flex: 1 1 168px;
}

.account-phone-compact__password {
  width: 120px;
  min-width: 120px;
  flex: 1 1 120px;
}

.account-phone-toolbar--stack {
  flex-direction: column;
  align-items: stretch;
  max-width: 560px;
  gap: 6px;
}

.account-phone-compact--bind {
  margin-top: 6px;
}

.account-phone-compact__code {
  width: 76px;
  min-width: 76px;
  flex: 0 0 76px;
}

.account-phone-compact .account-ghost-btn--small {
  min-width: 52px;
  padding: 8px 8px;
  font-size: 12px;
}

.account-primary-btn--compact {
  min-width: 56px;
  padding: 8px 10px;
  font-size: 12px;
}

.account-phone-bound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
}

.account-phone-bound strong {
  color: #065f46;
}

.account-phone-message {
  margin-top: 8px;
}

#accountPhoneStatus[data-state="ready"] {
  border-color: rgba(16, 185, 129, 0.28);
  background: #ecfdf5;
  color: #047857;
}

.account-card__hint--compact {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.account-card--ledger {
  order: 1;
  grid-column: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 12px;
}

.account-center-secondary-grid > .account-card--community {
  order: 2;
  grid-column: 2;
}

.account-ledger-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

.account-community-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.account-community-toolbar .account-card__head {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.account-community-toolbar__summary {
  margin: 0;
  flex: 1 1 180px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  min-width: 0;
}

.account-community-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.account-community-details {
  margin-top: 0;
}

.account-detail-modal-backdrop {
  z-index: 10025;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
}

.account-detail-modal-backdrop.visible {
  display: grid;
  place-items: center;
}

.account-detail-dialog {
  position: relative;
  width: min(920px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
  overflow: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 22px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.account-detail-dialog--community {
  width: min(560px, calc(100vw - 40px));
}

.account-detail-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.account-detail-dialog__eyebrow {
  display: block;
  margin: 0 0 4px;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
}

.account-detail-dialog__head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.account-ledger-details--modal .account-ledger-table-wrap {
  max-height: min(52vh, 520px);
}

.account-card--community,
.account-card--ledger {
  align-self: stretch;
  height: auto;
  overflow: visible;
}

.account-ledger-toolbar__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 240px;
}

.account-ledger-toolbar__lead h4 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.account-ledger-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex: 1 1 360px;
}

.account-ledger-toolbar__controls--filters {
  justify-content: space-between;
  margin: 0 0 8px;
}

.account-ledger-details[hidden] {
  display: none !important;
}

.account-ledger-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.account-ledger-tabs,
.account-ledger-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.account-ledger-filter {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.account-ledger-filter:hover,
.account-ledger-filter.is-active {
  border-color: rgba(124, 58, 237, 0.36);
  background: #f5f3ff;
  color: #6d28d9;
}

.account-ledger-filter--alert.is-active {
  border-color: rgba(217, 119, 6, 0.42);
  background: #fffbeb;
  color: #92400e;
}

.account-ledger-search input {
  width: min(220px, 42vw);
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
}

.account-ledger-insight {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  flex: 1 1 180px;
  min-width: 0;
}

.account-ledger-insight:empty {
  display: none;
}

.account-ledger-table__row--flagged {
  background: #fffbeb;
}

.account-ledger-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(52vh, 560px);
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafafa;
}

.account-ledger-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: #334155;
  font-size: 12px;
}

.account-ledger-table th,
.account-ledger-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.account-ledger-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #64748b;
  font-weight: 800;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e2e8f0;
}

.account-ledger-table tbody tr:hover {
  background: #f5f3ff;
}

.account-ledger-table__negative {
  color: #dc2626 !important;
  font-weight: 700;
}

.account-ledger-table__positive {
  color: #059669 !important;
  font-weight: 700;
}

@media (min-width: 1024px) and (max-width: 1499px) {
  .account-center-shell {
    overflow: hidden;
  }

  .account-card--ledger,
  .account-card--community {
    min-height: 0;
  }

  .account-ledger-table-wrap,
  .account-ledger-details--modal .account-ledger-table-wrap {
    max-height: min(46vh, 520px);
  }
}

@media (min-width: 1500px) {
  .account-center-shell {
    overflow: hidden;
  }

  .account-card--ledger,
  .account-card--community {
    min-height: 0;
  }

  .account-community-preview {
    min-height: 92px;
    padding: 12px;
  }

  .account-community-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
  }

  .account-ledger-table-wrap,
  .account-ledger-details--modal .account-ledger-table-wrap {
    min-height: 0;
  }
}

@media (max-width: 1099px) {
  body[data-app-feature="account-center"] .page-container.app-container,
body[data-app-feature="account-center"] .page-container.app-container > .main-area,
body[data-app-feature="account-center"] .main-area #mainDynamicStack.dynamic-panel-stack,
body[data-app-feature="account-center"] .main-area #panelAccountCenter.dynamic-panel--visible {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .account-center-shell {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .account-center-body {
    overflow: visible;
  }

  .account-center-main {
    display: flex;
    flex-direction: column;
  }

  .account-center-secondary-grid {
    grid-template-columns: 1fr;
  }

  .account-card--ledger,
  .account-center-secondary-grid > .account-card--community {
    grid-column: 1;
  }

  .account-card--community,
  .account-card--ledger {
    height: auto;
    min-height: 0;
  }

  .account-ledger-table-wrap {
    max-height: min(42vh, 480px);
  }

  .account-center-head {
    flex-direction: column;
    align-items: stretch;
  }

  .account-center-head__actions {
    justify-content: flex-start;
    margin-top: 0;
  }

  .account-center-grid {
    grid-template-columns: 1fr;
  }

  .account-metric-row--today-settlement {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-phone-toolbar {
    max-width: none;
  }

  .account-phone-compact__phone,
.account-phone-compact__code {
    flex: 1 1 108px;
    width: auto;
    min-width: 0;
  }

  .account-metric-row,
.account-key-actions {
    grid-template-columns: 1fr;
  }

  .account-metric-row--overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-key-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* UI acceptance polish: resolve late cascade conflicts found in full-flow checks. */
@media (min-width: 1100px) {
  body[data-app-feature="use-cases"] .use-cases-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-app-feature="use-cases"] .use-case-tile {
    gap: 7px !important;
    padding: 9px !important;
  }

  body[data-app-feature="use-cases"] .use-case-video-slot {
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
  }

  body[data-app-feature="use-cases"] .use-cases-shell {
    gap: 16px !important;
    padding: clamp(22px, 2.2vw, 34px) !important;
  }
}

@media (min-width: 760px) and (max-width: 1099px) {
  body[data-app-feature="use-cases"] .use-cases-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 759px) {
  body[data-app-feature="use-cases"] .use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

body[data-app-feature="use-cases"] .use-case-video-slot__play {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #dbe3ef !important;
}

body[data-app-feature="use-cases"] .use-case-tile h4 {
  margin-top: 2px !important;
  font-size: 13px !important;
}

body[data-app-feature="use-cases"] .use-case-tile p {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="matting-refine"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="poster"] #panelStandard.dynamic-panel--visible,
body[data-app-feature="rewrite"] #panelRewrite.dynamic-panel--visible {
  padding-bottom: 14px !important;
}

body[data-app-feature="matting-refine"] #panelStandard.mode-matting #standardUploadMount,
body[data-app-feature="poster"] #panelStandard #standardUploadMount,
body[data-app-feature="main-image"] #panelStandard #standardUploadMount {
  padding-bottom: 16px !important;
}

body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn:hover:not(.active) .matting-model-btn__name,
body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn:hover:not(.active) .matting-model-btn__cost,
body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn:focus-visible .matting-model-btn__name,
body[data-app-feature="matting-refine"] #panelStandard .matting-model-grid .matting-model-btn:focus-visible .matting-model-btn__cost {
  opacity: 1 !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn:hover:not(.active):not(:disabled),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn:hover:not(.active):not(:disabled) {
  color: #4c1d95 !important;
  text-shadow: none !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn:disabled,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn:disabled,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-count-section .gpt-count-btn.param-btn[aria-disabled="true"],
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-count-section .gpt-count-btn.param-btn[aria-disabled="true"] {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border-color: #dbe3ef !important;
  text-shadow: none !important;
}

/* Image-channel chips: subtle commerce-style (light fill + purple text), not solid primary pills. */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn {
  color: #334155 !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn:hover:not(.active):not(:disabled),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn:hover:not(.active):not([aria-disabled="true"]),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn:hover:not(.active):not(:disabled),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn:hover:not(.active):not([aria-disabled="true"]),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn:hover:not(.active):not(:disabled),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn:hover:not(.active):not([aria-disabled="true"]),
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn:hover:not(.active):not(:disabled),
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn:hover:not(.active):not([aria-disabled="true"]),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn:hover:not(.active):not(:disabled),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn:hover:not(.active):not([aria-disabled="true"]) {
  color: #4c1d95 !important;
  background: #ede9fe !important;
  border-color: rgba(124, 58, 237, 0.42) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn.active:hover,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn.active:hover,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn.active:hover,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn.active,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn.active:hover,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .gpt-count-btn.param-btn.image-channel-btn.active,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .gpt-count-btn.param-btn.image-channel-btn.active:hover,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn.active,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn.active:hover,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .gpt-count-btn.param-btn.image-channel-btn.active,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .gpt-count-btn.param-btn.image-channel-btn.active:hover {
  color: #4c1d95 !important;
  background: rgba(139, 92, 246, 0.10) !important;
  border-color: rgba(124, 58, 237, 0.38) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .image-channel-row .image-channel-btn[aria-disabled="true"],
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .image-channel-row .image-channel-btn[aria-disabled="true"],
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .image-channel-row .image-channel-btn[aria-disabled="true"],
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn:disabled,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .image-channel-row .image-channel-btn[aria-disabled="true"],
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn:disabled,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .image-channel-row .image-channel-btn[aria-disabled="true"] {
  color: var(--text-tertiary, #64748b) !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  opacity: 1 !important;
}

.image-channel-model-maintenance-hint {
  margin-top: 6px;
  color: #b45309;
  font-size: 12px;
  line-height: 1.4;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-advanced-summary__hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-advanced-summary:hover .main-advanced-summary__hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-advanced-sellpoint .step-inline-hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-advanced-sellpoint:hover .step-inline-hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .module-title--sellpoint:hover .step-inline-hint {
  color: var(--text-tertiary, #64748b) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-dual-panel {
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone {
  background: var(--yj-upload-shell-bg) !important;
  border: var(--yj-upload-shell-border) !important;
  border-style: solid !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone:hover,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-upload-zone.drag-over {
  background: var(--yj-upload-shell-bg-hover) !important;
  border: var(--yj-upload-shell-border-hover) !important;
  border-style: solid !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active {
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.16) !important;
}

.legacy-key-modal-trigger {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#sidebarMenuRoot .legacy-nav-trigger,
#sidebarMenuRoot .nav-group .legacy-nav-trigger,
.legacy-nav-trigger {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#sidebarMenuRoot .legacy-nav-trigger *,
#sidebarMenuRoot .nav-group .legacy-nav-trigger *,
.legacy-nav-trigger * {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Workbench upload hint text — black for readability on light backgrounds */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn__sub,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn__hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-block .upload-zone .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .upload-block .reference-upload-zone .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .reference-upload-zone .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #gpt-image-panel .upload-zone--gpt-compact .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #nano-banana-panel .upload-zone--gpt-compact .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelGptImage #gptImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelNanoBanana #nanoImageUploadBox.upload-zone--gpt-compact .add-image-btn .upload-text {
  color: #0f172a !important;
  opacity: 1 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn:hover .upload-text,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn:hover .add-image-btn__hint,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .add-image-btn:hover .add-image-btn__sub {
  color: #0f172a !important;
}

/* Workbench generate CTA placeholder — keep bottom fields scrollable above dock / inline CTA */
@media (min-width: 1024px) {
  body[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="matting-refine"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="gpt-image"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="nano-banana"] .main-area > .yj-card.yj-card--panel,
body[data-app-feature="rewrite"] .main-area > .yj-card.yj-card--panel {
    --workbench-generate-reserve: 88px;
  }

  body.has-desktop-generate-dock[data-app-feature="main-image"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="detail-page"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="poster"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="matting-refine"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="selfmedia-article"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="gpt-image"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] .main-area > .yj-card.yj-card--panel::after,
body.has-desktop-generate-dock[data-app-feature="rewrite"] .main-area > .yj-card.yj-card--panel::after {
    content: "";
    display: block;
    flex: 0 0 var(--workbench-generate-reserve);
    height: var(--workbench-generate-reserve);
    min-height: var(--workbench-generate-reserve);
    width: 100%;
    pointer-events: none;
  }

  body.has-desktop-generate-dock[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="poster"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="matting-refine"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="selfmedia-article"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="gpt-image"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] .main-area .dynamic-panel-stack,
body.has-desktop-generate-dock[data-app-feature="rewrite"] .main-area .dynamic-panel-stack {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
    scroll-padding-bottom: var(--workbench-generate-reserve) !important;
  }

  body.has-desktop-generate-dock[data-app-feature="main-image"] #panelStandard.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="detail-page"] #panelStandard.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="poster"] #panelStandard.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="matting-refine"] #panelStandard.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="selfmedia-article"] #panelSelfmediaArticle.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="gpt-image"] #panelGptImage.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="nano-banana"] #panelNanoBanana.dynamic-panel--visible,
body.has-desktop-generate-dock[data-app-feature="rewrite"] #panelRewrite.dynamic-panel--visible {
    scroll-padding-bottom: var(--workbench-generate-reserve) !important;
  }

  body:not(.has-desktop-generate-dock):not(.has-mobile-generate-bar)[data-app-feature="main-image"] .main-area .dynamic-panel-stack,
body:not(.has-desktop-generate-dock):not(.has-mobile-generate-bar)[data-app-feature="detail-page"] .main-area .dynamic-panel-stack,
body:not(.has-desktop-generate-dock):not(.has-mobile-generate-bar)[data-app-feature="poster"] .main-area .dynamic-panel-stack,
body:not(.has-desktop-generate-dock):not(.has-mobile-generate-bar)[data-app-feature="matting-refine"] .main-area .dynamic-panel-stack,
body:not(.has-desktop-generate-dock):not(.has-mobile-generate-bar)[data-app-feature="selfmedia-article"] .main-area .dynamic-panel-stack {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-bottom: 8px !important;
  }

  body:not(.has-desktop-generate-dock):not(.has-mobile-generate-bar) #mainGenerateSticky.main-generate-sticky {
    flex: 0 0 auto !important;
    min-height: 58px !important;
  }
}

/* Workbench: remove remaining dark-surface leaks (modals, cards, placeholders) */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-bulkbar {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(236, 72, 153, 0.03)), #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-bulkbar__btn:disabled {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-bulkbar--muted {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  color: #64748b !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-modal__head p,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-empty,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-item__main em,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-item__stage {
  color: #475569 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generation-history-item {
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

@media (min-width: 1024px) {
  body[data-app-feature="generation-history"] .page-container.app-container {
    overflow: hidden !important;
  }

  body[data-app-feature="generation-history"] .page-container.app-container > .main-area {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    background: #f5f7fb !important;
  }

  body[data-app-feature="generation-history"] .page-container.app-container > #resultPanel.result-panel,
body[data-app-feature="generation-history"] #authOnboardBanner {
    display: none !important;
  }

  body[data-app-feature="generation-history"] .main-area > .yj-card.yj-card--panel {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-app-feature="generation-history"] .main-area #mainDynamicStack.dynamic-panel-stack,
body[data-app-feature="generation-history"] .main-area #panelGenerationHistory.dynamic-panel--visible {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

body[data-app-feature="generation-history"] {
  --bg: #f5f7fb;
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-soft: #f8fafc;
  --bg-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #e2e8f0;
  --ui-text-heading: #0f172a;
  --ui-text-label: #475569;
  --ui-text-hint: #64748b;
  --ui-bg-surface: #ffffff;
  --ui-bg-raised: #ffffff;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --shadow-card: var(--yj-shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
  background: #f5f7fb !important;
  color: #0f172a !important;
}

body[data-app-feature="generation-history"] .page-container.app-container,
body[data-app-feature="generation-history"] .page-container.app-container > .sidebar.sidebar--stack {
  background: #f5f7fb !important;
  color: #334155 !important;
}

body[data-app-feature="generation-history"] #sidebarMenuRoot.sidebar-nav,
body[data-app-feature="generation-history"] #sidebarMenuRoot.sidebar-nav.sidebar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  color: #334155 !important;
}

body[data-app-feature="generation-history"] .top-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

body[data-app-feature="generation-history"] #mainGenerateSticky,
body[data-app-feature="generation-history"] #mobileGenerateBar {
  display: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel .result-inspiration-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-inspiration-card {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #resultPanel .result-inspiration-card__media,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-inspiration-card__media {
  background: #f8fafc !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .result-img--broken {
  background: #f1f5f9 !important;
}

/* Workbench compact rhythm: align panelStandard / poster / fashion with gpt-image-stack density */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) {
  --form-step-gap: 8px;
  --form-title-gap: 4px;
  --form-inner-gap: 6px;
  --form-step-padding: 8px;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area > .yj-card.yj-card--panel {
  padding: 10px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .main-area .dynamic-panel-stack {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard.dynamic-panel--visible:not(.mode-matting),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite.dynamic-panel--visible {
  gap: 8px !important;
  padding: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) > *,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) #standardUploadMount,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .upload-section-group,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .target-platform-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .commerce-output-type-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .fashion-feature-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .fashion-lock-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .model-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .params-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) #posterFeatureBlock,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-matting) .main-advanced-settings {
  margin: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard #standardUploadMount {
  padding-bottom: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-section-group {
  gap: 6px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-block.upload-block--product,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #productUploadSection > .upload-block.upload-block--product {
  padding: 8px 10px !important;
  gap: 4px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .target-platform-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .model-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .commerce-output-type-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-feature-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-lock-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .ratio-resolution-card.gpt-aspect-clarity-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard.mode-matting .matting-step-card {
  padding: 8px 10px !important;
  box-shadow: none !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .params-section {
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .params-section > .param-group {
  margin: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .module-title.step-title-row,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .step-title-row,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-block .upload-card-header .step-title-row {
  margin-bottom: 4px !important;
  min-height: 18px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .model-section > .module-title,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .target-platform-section > .module-title,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .commerce-output-type-section > .module-title {
  margin-bottom: 4px !important;
  min-height: 18px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .model-btns {
  margin-bottom: 0 !important;
  gap: 6px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard:not(.mode-poster) .poster-feature-block__group {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .upload-ref-extras {
  margin-top: 4px !important;
  padding-top: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .ratio-resolution-card {
  gap: 6px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .gpt-subfield-title {
  margin-bottom: 4px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .commerce-output-type-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-feature-section,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-lock-section {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard.mode-matting {
  gap: 8px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelRewrite .rewrite-dual-panel {
  gap: 8px !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle.dynamic-panel--visible {
  gap: 8px !important;
  padding: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-step-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-upload-card,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-draft-card {
  padding: 8px 10px !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .module-title.step-title-row {
  margin-bottom: 4px !important;
  min-height: 18px !important;
}

body[data-app-panel-mode="fashion"] #panelStandard .panel-hide-when-fashion,
body[data-app-panel-mode="fashion"] #panelStandard #commerceOutputTypeSection {
  display: none !important;
}
/* One-click video */
.one-click-video-panel {
  width: 100%;
}

.ocv-shell {
  display: grid;
  gap: 10px;
}

.ocv-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px;
}

.ocv-panel-head h3,
.ocv-pane-head h3 {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.ocv-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--yj-appearance-primary,#8b5cf6) 0%, var(--yj-appearance-primary,#7c3aed) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
}

[data-ocv-step] {
  border-radius: 12px;
}

.ocv-workspace-pane--storyboard > [data-ocv-step] {
  border: 1px solid #d8dee8;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ocv-workspace-pane--storyboard > [data-ocv-step="1"] {
  border-left: 3px solid var(--yj-appearance-primary,#7c3aed);
}

.ocv-workspace-pane--storyboard > [data-ocv-step="2"] {
  border-left: 3px solid var(--yj-appearance-primary,#8b5cf6);
}

.ocv-workspace-pane[data-ocv-step="3"].is-current,
.ocv-workspace-pane[data-ocv-step="4"].is-current {
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ocv-workspace-pane[data-ocv-step="3"].is-done,
.ocv-workspace-pane[data-ocv-step="4"].is-done {
  border-color: #dbe4f0;
  background: #fff;
}

.ocv-workspace-pane--storyboard {
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.ocv-workspace-pane--storyboard .ocv-script-box,
.ocv-workspace-pane--storyboard .ocv-storyboard-box {
  background: #fff;
}

.ocv-workspace-pane--review,
.ocv-workspace-pane--video {
  min-height: 0;
}

.ocv-empty,
.ocv-step-wait {
  min-height: 120px;
}

.ocv-panel-head span,
.ocv-pane-head span,
.ocv-action-card span {
  color: #64748b;
  font-size: 12px;
}

.ocv-card {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.ocv-upload-zone {
  width: 100%;
  min-height: 98px;
  border: 1px dashed #cfdcf0;
  border-radius: 8px;
  background: #f8fbff;
  color: #172033;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
}

.ocv-upload-zone.is-dragging {
  border-color: var(--yj-appearance-primary,#7c3aed);
  background: #f3edff;
}

.ocv-subject-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.ocv-upload-zone__plus {
  color: var(--yj-appearance-primary,#7c3aed);
  font-size: 22px;
  line-height: 1;
}

.ocv-upload-zone strong {
  font-size: 13px;
}

.ocv-upload-zone em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.ocv-upload-list {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 88px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed #dbe4f0;
  border-radius: 8px;
  background: #fbfdff;
  overflow-x: auto;
  overflow-y: hidden;
}

.ocv-upload-list--with-add {
  align-items: center;
}

.ocv-upload-add-card {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  min-width: 72px;
  border: 1px dashed #cfdcf0;
  border-radius: 8px;
  background: #f8fbff;
  color: #1f2a44;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  cursor: pointer;
  text-align: center;
}

.ocv-upload-add-card strong {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.ocv-upload-add-card em {
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.ocv-upload-add-card:hover {
  border-color: var(--yj-appearance-primary,#8b5cf6);
  background: #f5f0ff;
}

body[data-app-feature="one-click-video"] #standardResetBtn {
  display: none !important;
}

.ocv-reference-assets {
  margin-top: 10px;
  border: 1px dashed #dbe4f0;
  border-radius: 8px;
  background: #fafbfd;
}

.ocv-reference-assets summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ocv-reference-assets summary span {
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  font-weight: 700;
}

.ocv-reference-mode-copy {
  margin: 0;
  padding: 0 10px 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.ocv-reference-video-status {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0 10px 10px;
  padding: 9px 10px;
  border: 1px solid #86efac;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
}

.ocv-reference-video-status__dot {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.ocv-reference-video-status strong,
.ocv-reference-video-status span,
.ocv-reference-video-status small {
  display: block;
  min-width: 0;
}

.ocv-reference-video-status strong {
  font-size: 12px;
  line-height: 1.3;
}

.ocv-reference-video-status span:not(.ocv-reference-video-status__dot) {
  margin-top: 2px;
  overflow: hidden;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-reference-video-status small {
  margin-top: 2px;
  color: #4b7a58;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.ocv-reference-video-status.is-analyzing {
  border-color: #c4b5fd;
  background: #faf5ff;
  color: var(--yj-appearance-primary,#6d28d9);
}

.ocv-reference-video-status.is-analyzing .ocv-reference-video-status__dot {
  background: var(--yj-appearance-primary,#7c3aed);
}

.ocv-reference-video-status.is-analyzing span:not(.ocv-reference-video-status__dot),
.ocv-reference-video-status.is-analyzing small {
  color: var(--yj-appearance-primary,#7c3aed);
}

.ocv-reference-video-status.is-failed {
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
}

.ocv-reference-video-status.is-failed .ocv-reference-video-status__dot {
  background: #dc2626;
}

.ocv-reference-video-status.is-failed span:not(.ocv-reference-video-status__dot),
.ocv-reference-video-status.is-failed small {
  color: #b91c1c;
}

.ocv-reference-analysis-review {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #d8c5ff;
  border-radius: 10px;
  background: #fbf9ff;
}

.ocv-reference-analysis-review strong { display: block; font-size: 13px; color: var(--yj-appearance-text,#37206d); }
.ocv-reference-analysis-review p { margin: 6px 0; color: var(--yj-appearance-text,#51466d); font-size: 12px; line-height: 1.55; }
.ocv-reference-analysis-review ol { margin: 6px 0 10px 18px; padding: 0; color: var(--yj-appearance-text,#51466d); font-size: 12px; line-height: 1.5; }
.ocv-reference-analysis-review .toolbar-btn.is-confirmed { color: #166534; border-color: #86efac; background: #f0fdf4; }

.ocv-reference-assets--rewrite {
  border-style: solid;
  border-color: #d9c8ff;
  background: linear-gradient(135deg, #fcfaff 0%, #fafbfd 100%);
}

.ocv-reference-assets--rewrite summary {
  cursor: default;
  color: var(--yj-appearance-text,#3b2771);
}

.ocv-reference-assets--rewrite summary span {
  color: var(--yj-appearance-primary,#7c3aed);
}

.ocv-reference-assets--rewrite .ocv-reference-row {
  padding-bottom: 10px;
}

.ocv-reference-assets--rewrite .ocv-reference-row .toolbar-btn {
  min-width: 104px;
  border-color: #c4b5fd;
  color: var(--yj-appearance-primary,#6d28d9);
  background: #fff;
}

.ocv-reference-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 10px 8px;
}

.ocv-reference-row .toolbar-btn {
  align-self: end;
  min-height: 36px;
}

.ocv-reference-hint {
  margin: 0;
  padding: 0 10px 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.ocv-reference-list {
  padding: 0 10px 10px;
  margin-top: 0;
}

.ocv-upload-thumb {
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  height: 72px;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.ocv-upload-thumb__media {
  position: relative;
  width: 72px;
  height: 72px;
  min-width: 72px;
}

.ocv-upload-thumb img,
.ocv-upload-thumb__pending {
  width: 72px;
  height: 72px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  object-fit: cover;
  background: #f8fafc;
}

.ocv-upload-thumb__badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 22px;
  max-width: calc(100% - 12px);
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-upload-thumb__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.ocv-upload-thumb__remove:hover {
  background: rgba(124, 58, 237, 0.92);
}

.ocv-upload-thumb.is-uploading img,
.ocv-upload-thumb.is-uploading .ocv-upload-thumb__pending {
  opacity: 0.58;
}

.ocv-upload-thumb.is-uploading .ocv-upload-thumb__badge {
  background: rgba(124, 58, 237, 0.86);
}

.ocv-upload-thumb.is-error img,
.ocv-upload-thumb.is-error .ocv-upload-thumb__pending {
  border-color: #fca5a5;
}

.ocv-segment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ocv-choice {
  min-height: 36px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #1f2a44;
  font-weight: 700;
  cursor: pointer;
}

.ocv-choice.active {
  border-color: var(--yj-appearance-primary,#8b5cf6);
  background: #ede9fe;
  color: var(--yj-appearance-primary,#5b21b6);
}

.ocv-core-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ocv-narrative-recommendation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: #faf8ff;
}

.ocv-narrative-recommendation > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
}

.ocv-narrative-recommendation__badge {
  padding: 3px 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 10px;
  font-weight: 800;
}

.ocv-narrative-recommendation strong {
  color: #312e81;
  font-size: 13px;
}

.ocv-narrative-recommendation > div > span:last-child {
  color: #6b7280;
  font-size: 11px;
}

.ocv-narrative-recommendation > div > small {
  flex-basis: 100%;
  color: #7c879d;
  font-size: 10px;
  line-height: 1.35;
}

.ocv-narrative-toggle {
  flex: 0 0 auto;
}

.ocv-narrative-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 8px;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 800;
}

.ocv-narrative-heading > span:last-child {
  color: #7c879d;
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.ocv-narrative-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.ocv-narrative-grid[hidden] {
  display: none !important;
}

.ocv-narrative-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 8px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
  color: #1f2a44;
  text-align: left;
  cursor: pointer;
}

.ocv-narrative-card:hover,
.ocv-narrative-card.active {
  border-color: var(--yj-appearance-primary,#8b5cf6);
  background: #f5f3ff;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .08);
}

.ocv-narrative-card__eyebrow {
  grid-row: 1 / span 2;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 10px;
  font-weight: 800;
}

.ocv-narrative-card strong {
  font-size: 13px;
}

.ocv-narrative-card > span:not(.ocv-narrative-card__eyebrow) {
  color: #6b7280;
  font-size: 11px;
}

.ocv-narrative-card small {
  grid-column: 2;
  color: #7c879d;
  font-size: 10px;
}

.ocv-narrative-hint {
  margin: 7px 0 0;
  color: #7c879d;
  font-size: 11px;
  line-height: 1.5;
}

.ocv-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ocv-field {
  display: grid;
  gap: 6px;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 700;
}

.ocv-field--full {
  grid-column: 1 / -1;
  margin-top: 10px;
}

.ocv-delivery-settings {
  display: grid;
  gap: 6px;
}

.ocv-delivery-settings__label {
  color: #1f2a44;
  font-size: 12px;
  font-weight: 700;
}

.ocv-delivery-settings__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ocv-delivery-settings > small {
  color: #7c879d;
  font-size: 11px;
  line-height: 1.45;
}

.ocv-field span em {
  margin-left: 4px;
  color: #8b95a8;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.ocv-advanced-settings {
  padding: 0;
  overflow: hidden;
}

.ocv-advanced-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #1f2a44;
  cursor: pointer;
  list-style: none;
}

.ocv-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.ocv-advanced-settings > summary::after {
  content: '⌄';
  color: var(--yj-appearance-primary,#7c3aed);
  font-size: 16px;
  transition: transform .18s ease;
}

.ocv-advanced-settings[open] > summary::after {
  transform: rotate(180deg);
}

.ocv-advanced-settings > summary span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.ocv-advanced-settings > summary strong {
  font-size: 13px;
}

.ocv-advanced-settings > summary em,
.ocv-advanced-settings > summary small {
  color: #7c879d;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.ocv-advanced-settings > summary small {
  margin-left: auto;
  text-align: right;
}

.ocv-advanced-settings__body {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
  border-top: 1px solid #edf0f5;
}

.ocv-brief-disclosure {
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #fbfcfe;
}

.ocv-brief-disclosure > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #1f2a44;
  cursor: pointer;
  list-style: none;
}

.ocv-brief-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ocv-brief-disclosure > summary::after {
  content: '⌄';
  flex: 0 0 auto;
  color: var(--yj-appearance-primary,#7c3aed);
  font-size: 16px;
  transition: transform .18s ease;
}

.ocv-brief-disclosure[open] {
  border-color: #c4b5fd;
  background: #fff;
}

.ocv-brief-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.ocv-brief-disclosure > summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.ocv-brief-disclosure strong {
  font-size: 12px;
}

.ocv-brief-disclosure em,
.ocv-brief-disclosure small {
  color: #7c879d;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.ocv-brief-disclosure small {
  margin-left: auto;
  text-align: right;
}

.ocv-brief-disclosure__body {
  padding: 0 12px 12px;
}

.ocv-brief-disclosure textarea {
  min-height: 92px;
}

.ocv-field select,
.ocv-field input,
.ocv-field textarea,
.ocv-script-box textarea,
#ocvPublishCopy,
.ocv-shot-row textarea,
.ocv-shot-row input {
  width: 100%;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
  padding: 9px 10px;
  outline: none;
}

.ocv-field textarea,
.ocv-script-box textarea,
#ocvPublishCopy,
.ocv-shot-row textarea {
  resize: vertical;
}

.ocv-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.ocv-action-summary {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.ocv-action-card strong {
  color: #111827;
  font-size: 14px;
}

.ocv-status {
  margin: 0;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
}

.ocv-status--success {
  background: #ecfdf5;
  color: #047857;
}

.ocv-status--error {
  background: #fef2f2;
  color: #b91c1c;
}

.ocv-live-progress {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d8c7ff;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbf8ff 0%, #f6f1ff 100%);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.08);
}

.ocv-live-progress[hidden] {
  display: none !important;
}

.ocv-live-progress__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.ocv-live-progress__head strong {
  color: var(--yj-appearance-text,#4c1d95);
  font-size: 12px;
  font-weight: 900;
}

.ocv-live-progress__head em {
  margin-left: auto;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ocv-live-progress__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--yj-appearance-primary,#7c3aed);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.42);
  animation: ocvPulseDot 1.2s ease-out infinite;
}

.ocv-live-progress__bar {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
}

.ocv-live-progress__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yj-appearance-primary,#7c3aed), var(--yj-appearance-primary,#c084fc));
  animation: ocvProgressSweep 1.65s ease-in-out infinite;
}

.ocv-live-progress p {
  margin: 0;
  color: var(--yj-appearance-primary,#5b21b6);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

#ocvLiveProgressHelp { font-weight: 400; }

.ocv-live-progress--video {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.ocv-live-progress--video .ocv-live-progress__dot,
.ocv-live-progress--video .ocv-live-progress__bar span {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.ocv-live-progress--video .ocv-live-progress__head strong,
.ocv-live-progress--video .ocv-live-progress__head em,
.ocv-live-progress--video p {
  color: #1d4ed8;
}

.ocv-review-generate-btn--working {
  position: relative;
  overflow: hidden;
  animation: ocvButtonBreath 1.15s ease-in-out infinite;
}

.ocv-review-generate-btn--working::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  animation: ocvButtonSheen 1.7s ease-in-out infinite;
}

.ocv-cost-hint {
  display: inline;
  margin-top: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

@keyframes ocvPulseDot {
  0% {
    transform: scale(0.86);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.38);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 9px rgba(124, 58, 237, 0);
  }
  100% {
    transform: scale(0.86);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

@keyframes ocvProgressSweep {
  0% {
    transform: translateX(-105%);
  }
  50% {
    transform: translateX(75%);
  }
  100% {
    transform: translateX(245%);
  }
}

@keyframes ocvButtonBreath {
  0%,
100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

@keyframes ocvButtonSheen {
  0% {
    transform: translateX(-120%);
  }
  55%,
100% {
    transform: translateX(120%);
  }
}

.ocv-review-action .ocv-cost-hint {
  color: var(--yj-appearance-primary,#7c3aed);
}

.ocv-workspace {
  min-height: 560px;
  display: grid;
  gap: 12px;
  align-content: start;
}

body[data-app-feature="one-click-video"] #resultPanel.result-panel {
  padding: 12px 16px !important;
  gap: 0 !important;
  background: #f5f7fb !important;
  border-left: 1px solid #e2e8f0 !important;
}

body[data-app-feature="one-click-video"] #resultPanel > .result-inspiration-bar,
body[data-app-feature="one-click-video"] #resultPanel #tryInspireExamplesBtn {
  display: none !important;
}

body[data-app-feature="one-click-video"] #resultPanel > .commerce-mode-switch,
body[data-app-feature="one-click-video"] #resultPanel > .result-retention-notice,
body[data-app-feature="one-click-video"] #resultPanel > .result-toolbar,
body[data-app-feature="one-click-video"] #resultPanel > .result-panel__title-row,
body[data-app-feature="one-click-video"] #resultPanel > .result-gallery-body,
body[data-app-feature="one-click-video"] #resultPanel > .result-inspiration-bar {
  display: none !important;
}

.one-click-video-panel .ocv-mode-switch {
  margin-bottom: 12px;
}

.commerce-mode-switch--workbench button.is-active,
.ocv-mode-switch button.is-active {
  color: var(--yj-appearance-primary,#5b21b6);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

body[data-app-feature="one-click-video"] #oneClickVideoWorkspace {
  display: grid !important;
  width: 100%;
  min-height: 100%;
}

.ocv-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}

.ocv-workspace-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ocv-workspace-kicker {
  margin: 0;
  color: var(--yj-appearance-primary,#7c3aed);
  font-size: 12px;
  font-weight: 800;
}

.ocv-workspace-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.ocv-workspace-head span {
  color: #64748b;
  font-size: 12px;
}

.ocv-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ocv-flow-steps li {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ocv-flow-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  line-height: 1;
}

.ocv-flow-steps li.is-active {
  border-color: var(--yj-appearance-primary,#8b5cf6);
  background: #ede9fe;
  color: var(--yj-appearance-primary,#5b21b6);
}

.ocv-flow-steps li.is-active span {
  background: var(--yj-appearance-primary,#7c3aed);
  color: #fff;
}

.ocv-flow-steps li.is-done {
  border-color: rgba(16, 185, 129, 0.35);
  background: #ecfdf5;
  color: #047857;
}

.ocv-flow-steps li.is-done span {
  background: #10b981;
  color: #fff;
}

.ocv-flow-now {
  margin: 0;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  background: #faf5ff;
  color: var(--yj-appearance-primary,#6d28d9);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px 12px;
}

#ocvWorkspaceStage {
  display: none;
}

body[data-app-feature="one-click-video"] #ocvWorkspaceStage.is-busy {
  display: block;
}

.ocv-workspace-head--nav {
  align-items: center;
  border-color: rgba(139, 92, 246, 0.18);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 30px rgba(88, 28, 135, 0.06);
  padding: 10px 12px;
}

.ocv-workspace-head--nav > div {
  display: none;
}

.ocv-category-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.ocv-category-nav button {
  min-width: 154px;
  display: grid;
  gap: 2px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  text-align: left;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.ocv-category-nav button:hover {
  border-color: rgba(124, 58, 237, 0.42);
  background: #fff;
  transform: translateY(-1px);
}

.ocv-category-nav button.is-active {
  border-color: rgba(124, 58, 237, 0.5);
  background: linear-gradient(180deg, #f4efff 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08), 0 10px 24px rgba(124, 58, 237, 0.1);
}

.ocv-category-nav strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.25;
}

.ocv-category-nav button.is-active strong {
  color: var(--yj-appearance-primary,#6d28d9);
}

.ocv-category-nav span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.ocv-workspace-head--nav .ocv-flow-steps {
  flex: 0 0 auto;
  grid-template-columns: repeat(4, auto);
  gap: 6px;
}

.ocv-workspace-head--nav .ocv-flow-steps li {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
}

.ocv-workspace-head--nav .ocv-flow-steps li span {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.ocv-stage-list {
  display: none;
}

.ocv-params-more {
  margin-top: 10px;
  border: 1px dashed #dbe4f0;
  border-radius: 8px;
  background: #fafbfd;
  padding: 8px 10px;
}

.ocv-params-more summary {
  cursor: pointer;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  list-style-position: inside;
}

.ocv-params-more[open] summary {
  margin-bottom: 8px;
  color: #475569;
}

.ocv-param-grid--core {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ocv-pane-actions--minor .toolbar-btn {
  font-size: 12px;
  padding: 6px 8px;
}

#ocvReferenceStoryboardBtn,
#ocvRerenderBtn {
  display: none !important;
}

.ocv-step-wait {
  display: grid;
  gap: 4px;
  border: 1px dashed #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  padding: 18px 14px;
  text-align: center;
}

.ocv-step-wait strong {
  color: #334155;
  font-size: 14px;
}

[data-ocv-step].is-pending {
  border-color: #e8eef7;
  background: #fafbfd;
}

[data-ocv-step].is-pending .ocv-step-badge {
  background: #e2e8f0;
  color: #64748b;
  box-shadow: none;
}

.ocv-workspace-pane.is-pending {
  min-height: 0;
  border-color: #e8eef7;
  background: #fafbfd;
  color: var(--text-tertiary, #64748b);
}

.ocv-workspace-pane.is-pending .ocv-step-wait,
.ocv-workspace-pane.is-pending .ocv-empty {
  min-height: 108px;
}

.ocv-workspace-pane--review.is-pending,
.ocv-workspace-pane--video.is-pending {
  gap: 8px;
  padding: 12px 14px;
}

.ocv-workspace-pane--review.is-pending .ocv-render-settings,
.ocv-workspace-pane--review.is-pending .ocv-review-action,
.ocv-workspace-pane--review.is-pending .ocv-shot-table,
.ocv-workspace-pane--video.is-pending .ocv-video-preview {
  display: none;
}

body[data-app-feature="one-click-video"] .ocv-workspace-pane--review.is-pending::after,
body[data-app-feature="one-click-video"] .ocv-workspace-pane--video.is-pending::after {
  display: block;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px dashed #dbe4f0;
  border-radius: 8px;
  color: #64748b;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

body[data-app-feature="one-click-video"] .ocv-workspace-pane--review.is-pending::after {
  content: "生成分镜后再确认";
}

body[data-app-feature="one-click-video"] .ocv-workspace-pane--video.is-pending::after {
  content: "确认后显示进度和预览";
}

.ocv-workspace-pane.is-pending .ocv-video-preview {
  min-height: 156px;
}

.ocv-workspace-pane.is-pending .ocv-video-actions,
.ocv-workspace-pane.is-pending #ocvPublishCopy {
  display: none;
}

[data-ocv-step].is-current {
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

[data-ocv-step].is-done {
  border-color: #dbe4f0;
  background: #fff;
}

.ocv-workspace-pane--storyboard > [data-ocv-step].is-done {
  background: #fcfffe;
  border-color: #d1fae5;
}

.ocv-mobile-tabs {
  display: none;
}

.ocv-workspace-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(520px, 1.25fr);
  grid-template-areas:
    "storyboard review"
    "video review";
  gap: 12px;
  align-items: start;
}

.ocv-workspace-pane {
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.ocv-workspace-pane--storyboard {
  grid-area: storyboard;
}

.ocv-workspace-pane--review {
  grid-area: review;
  min-height: 620px;
  align-self: stretch;
}

.ocv-workspace-pane--video {
  grid-area: video;
  min-height: 360px;
  align-self: stretch;
}

.ocv-workspace-pane--video .ocv-step-body {
  display: grid;
  grid-template-rows: auto minmax(380px, 1fr) auto auto;
  min-height: 100%;
  gap: 12px;
}

.ocv-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ocv-shot-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ocv-storyboard-sheet-host {
  display: grid;
  min-height: 320px;
}

.ocv-storyboard-sheet {
  display: grid;
  gap: 8px;
}

.ocv-storyboard-sheet__canvas {
  position: relative;
  min-height: 320px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.ocv-storyboard-sheet__canvas img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: contain;
  background: #f8fafc;
}

.ocv-storyboard-grid {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: 2;
}

.ocv-storyboard-panel {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(15, 23, 42, 0.02);
  color: #fff;
  cursor: pointer;
  padding: 8px;
  outline: 0;
}

.ocv-storyboard-panel span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ocv-storyboard-panel:hover,
.ocv-storyboard-panel:focus-visible,
.ocv-storyboard-panel.is-active {
  border-color: rgba(124, 58, 237, 0.86);
  background: rgba(124, 58, 237, 0.16);
  box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.55);
}

.ocv-storyboard-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ocv-storyboard-sheet__meta span {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}

.ocv-shot-card,
.ocv-shot-row {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.ocv-shot-card {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.ocv-shot-card img,
.ocv-shot-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2ff;
}

.ocv-shot-placeholder,
.ocv-shot-mini__fallback,
.ocv-empty,
.ocv-loading {
  display: grid;
  place-items: center;
  color: #64748b;
  text-align: center;
}

.ocv-shot-card strong {
  color: #111827;
  font-size: 12px;
}

.ocv-shot-card span {
  color: #64748b;
  font-size: 11px;
}

.ocv-storyboard-box,
.ocv-script-box {
  display: grid;
  gap: 10px;
}

.ocv-script-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #d8c9ff;
  border-radius: 8px;
  background: #fbf8ff;
  padding: 10px;
}

.ocv-script-next span {
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
}

.ocv-script-next__btn {
  min-width: 132px;
  padding: 8px 14px;
}

.ocv-pane-sub {
  display: block;
  margin-top: 4px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
}

.ocv-pane-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.ocv-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ocv-shot-card {
  position: relative;
  cursor: pointer;
}

.ocv-shot-card__upload {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.ocv-script-box {
  display: grid;
  gap: 10px;
}

.ocv-recognition-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 12px;
  color: #334155;
  font-size: 12px;
}

.ocv-recognition-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.ocv-recognition-card__head strong {
  color: #0f172a;
  font-size: 13px;
}

.ocv-recognition-card__head em {
  color: #64748b;
  font-style: normal;
  font-size: 11px;
}

.ocv-recognition-card p {
  margin: 0 0 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ocv-recognition-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ocv-recognition-chip {
  border-radius: 999px;
  background: #ede9fe;
  color: var(--yj-appearance-primary,#5b21b6);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.ocv-pane-head--review {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ocv-version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ocv-candidate-picker {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.ocv-candidate-picker[hidden] {
  display: none !important;
}

.ocv-candidate-picker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.ocv-candidate-picker__head strong {
  font-size: 13px;
  color: #0f172a;
}

.ocv-candidate-picker__head span {
  font-size: 12px;
  color: #64748b;
}

.ocv-candidate-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.ocv-scene-group-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dbe4f0;
}

.ocv-version-history summary {
  padding: 6px 8px;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
}

.ocv-version-history[open] > .ocv-version-tabs {
  margin-top: 6px;
}

.ocv-scene-group-actions span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#ocvStoryboardSheet button[data-ocv-replace-scene],
#ocvStoryboardSheet button[data-ocv-adjust-board],
#ocvStoryboardSheet button[data-ocv-regenerate-scenes] {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  height: auto;
  padding: 8px 6px;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  cursor: pointer;
}

#ocvStoryboardSheet button[data-ocv-adjust-board],
#ocvStoryboardSheet button[data-ocv-regenerate-scenes] {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
}

#ocvStoryboardSheet button[data-ocv-regenerate-scenes] {
  min-height: 44px;
  font-size: 13px;
}

#ocvStoryboardSheet button:hover:not(:disabled) {
  filter: brightness(.95);
}

#ocvStoryboardSheet button:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

#ocvStoryboardSheet button:disabled {
  opacity: .55;
  cursor: wait;
}

.ocv-candidate-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: #334155;
  position: relative;
  overflow: hidden;
}

.ocv-candidate-card img,
.ocv-candidate-card__empty {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: #e2e8f0;
}

.ocv-candidate-card__empty {
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #94a3b8;
}

.ocv-candidate-card.is-uploading {
  border-color: var(--yj-appearance-primary,#a78bfa);
  background: #fbf8ff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12), 0 10px 24px rgba(124, 58, 237, 0.08);
  cursor: wait;
}

.ocv-candidate-card.is-uploading::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 46%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yj-appearance-primary,#7c3aed), var(--yj-appearance-primary,#c084fc));
  animation: ocvSceneUploadSweep 1.2s ease-in-out infinite;
}

.ocv-candidate-card.is-uploading .ocv-candidate-card__empty {
  color: var(--yj-appearance-primary,#6d28d9);
  background: #f3e8ff;
  font-weight: 800;
}

@keyframes ocvSceneUploadSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(230%);
  }
}

.ocv-candidate-card strong {
  font-size: 12px;
}

.ocv-candidate-card em {
  font-style: normal;
  font-size: 11px;
  color: #64748b;
}

.ocv-candidate-card.is-active {
  border-color: #0f766e;
  box-shadow: inset 0 0 0 1px #0f766e;
}

.ocv-candidate-card.is-active em {
  color: #0f766e;
  font-weight: 700;
}

.ocv-version-tab {
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.ocv-version-tab.active {
  border-color: var(--yj-appearance-primary,#8b5cf6);
  background: #ede9fe;
  color: var(--yj-appearance-primary,#5b21b6);
}

.ocv-shot-prompt textarea {
  min-height: 88px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.ocv-workspace-pane--review {
  border-color: #e8edf3;
  background: #fff;
  box-shadow: none;
}

.ocv-workspace-pane--review .ocv-pane-head h3 {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
}

.ocv-workspace-pane--review #ocvReviewMeta {
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
}

.ocv-render-settings {
  display: grid;
  gap: 10px;
  border: 1px solid #e4e9f2;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 12px;
}

.ocv-render-settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ocv-render-settings__head strong {
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.ocv-render-settings__head span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-render-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ocv-render-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ocv-render-field span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.ocv-render-field select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 9px;
}

.ocv-render-field select:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.24);
  outline-offset: 1px;
}

.ocv-review-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  border: 1px solid #e7ddff;
  border-radius: 10px;
  background: #fbf8ff;
  padding: 12px;
}

.ocv-provider-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  border: 1px solid #f3c96b;
  border-radius: 9px;
  background: #fff8e8;
  color: #854d0e;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.ocv-provider-notice strong { flex: 0 0 auto; color: inherit; }
.ocv-provider-notice span { min-width: 0; overflow-wrap: anywhere; }

.ocv-provider-notice--blocked {
  border-color: #f3a6a6;
  background: #fff1f1;
  color: #b42318;
}

.ocv-review-action > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.ocv-review-action strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 800;
}

.ocv-review-action span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ocv-review-generate-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 16px;
}

.ocv-review-generate-btn:disabled {
  background: #e5e7eb;
  color: var(--text-tertiary, #64748b);
  box-shadow: none;
  cursor: not-allowed;
}

.ocv-review-generate-btn--pulse {
  animation: ocv-primary-pulse 1.8s ease-in-out infinite;
}

.ocv-shot-table {
  display: grid;
  gap: 8px;
  max-height: 720px;
  overflow: auto;
  padding-right: 2px;
}

.ocv-workspace-pane--review.is-pending .ocv-shot-table {
  display: none;
}

.ocv-shot-composer {
  border: 1px solid #eceff3;
  border-radius: 12px;
  background: #fcfcfd;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: visible;
}

.ocv-shot-composer.is-active {
  border-color: var(--yj-appearance-primary,#8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.ocv-shot-composer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 0;
}

.ocv-shot-composer__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ocv-shot-composer__index {
  flex: 0 0 auto;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}

.ocv-shot-composer__title strong {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ocv-shot-composer__lock {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  cursor: pointer;
}

.ocv-shot-composer__lock.is-locked {
  color: var(--yj-appearance-primary,#7c3aed);
  background: rgba(124, 58, 237, 0.08);
}

.ocv-shot-composer__body {
  display: block;
  padding: 6px 12px 10px;
}

.ocv-ref-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ocv-ref-zone--omni {
  width: 88px;
}

.ocv-ref-zone--start-end {
  width: 156px;
  gap: 2px;
}

.ocv-ref-zone--multi {
  width: 168px;
  gap: 4px;
}

.ocv-ref-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1e293b;
  cursor: pointer;
}

.ocv-ref-card:disabled {
  cursor: not-allowed;
}

.ocv-ref-card__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 6;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  border-radius: 999px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.ocv-ref-card:hover .ocv-ref-card__tooltip,
.ocv-ref-card:focus-visible .ocv-ref-card__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ocv-ref-card__sheet {
  display: grid;
  place-items: center;
  width: 56px;
  height: 72px;
  border-radius: 10px;
  background: #f0f1f3;
  border: 0;
  box-shadow: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ocv-ref-card--left .ocv-ref-card__sheet {
  transform: rotate(-7deg);
}

.ocv-ref-card--center .ocv-ref-card__sheet {
  transform: rotate(0deg);
}

.ocv-ref-card--right .ocv-ref-card__sheet {
  transform: rotate(7deg);
}

.ocv-ref-card:hover:not(:disabled) .ocv-ref-card__sheet,
.ocv-ref-card:focus-visible:not(:disabled) .ocv-ref-card__sheet {
  background: #e8eaee;
}

.ocv-ref-card__plus {
  color: #9ca3af;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.ocv-ref-card__label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.2;
}

.ocv-ref-swap {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: -16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ocv-ref-swap:hover:not(:disabled) {
  color: #6b7280;
  background: transparent;
}

.ocv-ref-swap:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ocv-ref-card__img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.ocv-shot-composer__ref {
  display: none;
}

.ocv-shot-composer__main {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ocv-shot-composer__prompt {
  width: 100%;
  min-height: 44px;
  field-sizing: content;
  padding: 0;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: #111827;
  font-size: 14px;
  line-height: 1.6;
}

.ocv-shot-composer__main .ocv-field {
  gap: 4px;
  margin: 0;
}

.ocv-shot-composer__main textarea[data-shot-field="voiceover"] {
  min-height: 34px;
  padding: 6px 8px;
  line-height: 1.5;
  field-sizing: content;
  resize: vertical;
}

.ocv-shot-composer__prompt::placeholder {
  color: #9ca3af;
}

.ocv-shot-composer__foot {
  display: none !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 14px;
  border-top: 0;
  background: transparent;
  border-radius: 0;
}

.ocv-shot-composer__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.ocv-shot-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease;
}

.ocv-shot-chip:hover,
.ocv-shot-chip:focus-within {
  background: #eceef2;
  box-shadow: none;
}

.ocv-shot-chip__icon {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.ocv-shot-chip__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 6px 18px 6px 2px;
  max-width: 148px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca3af' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0 center;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
}

.ocv-shot-chip__select:focus-visible {
  box-shadow: none;
  border-radius: 4px;
}

.ocv-shot-composer.is-placeholder {
  border-style: solid;
  background: #fcfcfd;
}

.ocv-shot-composer.is-placeholder .ocv-shot-composer__prompt:disabled {
  opacity: 1;
  color: #9ca3af;
  -webkit-text-fill-color: #9ca3af;
  background: transparent;
}

.ocv-shot-composer__hint {
  margin: 0 18px 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

.ocv-shot-composer__submit {
  flex: 0 0 auto;
  min-width: 86px;
  width: auto;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.88;
  padding: 0 12px;
  transition: opacity 0.15s ease;
}

.ocv-shot-composer__submit:hover:not(:disabled) {
  opacity: 1;
}

.ocv-shot-composer__submit:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 1;
}

.ocv-shot-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.ocv-shot-row label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.ocv-shot-row label:not(.ocv-duration-field),
.ocv-shot-actions {
  grid-column: 2;
}

.ocv-shot-mini {
  grid-row: span 5;
}

.ocv-shot-mini img,
.ocv-shot-mini__fallback {
  width: 72px;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  object-fit: cover;
  background: #ede9fe;
}

.ocv-duration-field {
  width: 120px;
}

.ocv-shot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ocv-shot-actions button {
  border: 1px solid #d8c8ff;
  border-radius: 8px;
  background: #fff;
  color: var(--yj-appearance-primary,#6d28d9);
  font-weight: 700;
  padding: 7px 9px;
  cursor: pointer;
}

.ocv-shot-actions button.is-locked {
  background: var(--yj-appearance-primary,#6d28d9);
  color: #fff;
}

.ocv-video-preview {
  min-height: 380px;
  border: 1px dashed #cfdcf0;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ocv-video-preview video {
  width: 100%;
  max-height: 680px;
  aspect-ratio: 9 / 16;
  background: #020617;
}

.ocv-video-stale-note {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  padding: 9px 12px;
}

.ocv-clip-review {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 12px;
  align-self: stretch;
}

.ocv-clip-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
}

.ocv-clip-card.is-failed {
  border-color: #fecaca;
  background: #fff7f7;
}

.ocv-clip-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ocv-clip-card video {
  max-height: 360px;
}

.ocv-clip-card small {
  color: #64748b;
}

.ocv-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ocv-loading {
  gap: 8px;
}

.ocv-loading span {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid #e9d5ff;
  border-top-color: var(--yj-appearance-primary,#7c3aed);
  animation: ocv-spin 1s linear infinite;
}

@keyframes ocv-spin {
  to { transform: rotate(360deg); }
}

.ocv-empty {
  min-height: 120px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 16px;
  font-size: 13px;
}

#sidebarMenuRoot.sidebar-nav {
  scroll-padding-bottom: 120px;
}

#sidebarMenuRoot .nav-btn[data-feature="one-click-video"] {
  position: relative;
  z-index: 1;
}

body #sidebarMenuRoot .nav-btn.nav-btn--disabled,
body #sidebarMenuRoot .nav-group .nav-btn.nav-btn--disabled,
body #sidebarMenuRoot .nav-btn:disabled,
body #sidebarMenuRoot .nav-group .nav-btn:disabled,
body #sidebarMenuRoot .nav-btn[aria-disabled="true"],
body #sidebarMenuRoot .nav-group .nav-btn[aria-disabled="true"] {
  background: #eef1f5 !important;
  border-color: #d7dde7 !important;
  border-left-color: #aeb7c5 !important;
  color: #8a94a6 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

body #sidebarMenuRoot .nav-btn.nav-btn--disabled:hover,
body #sidebarMenuRoot .nav-group .nav-btn.nav-btn--disabled:hover,
body #sidebarMenuRoot .nav-btn:disabled:hover,
body #sidebarMenuRoot .nav-group .nav-btn:disabled:hover,
body #sidebarMenuRoot .nav-btn[aria-disabled="true"]:hover,
body #sidebarMenuRoot .nav-group .nav-btn[aria-disabled="true"]:hover {
  background: #eef1f5 !important;
  border-color: #d7dde7 !important;
  color: #8a94a6 !important;
}

body #sidebarMenuRoot .nav-btn.nav-btn--disabled .nav-btn__icon,
body #sidebarMenuRoot .nav-btn.nav-btn--disabled .nav-btn__label,
body #sidebarMenuRoot .nav-btn:disabled .nav-btn__icon,
body #sidebarMenuRoot .nav-btn:disabled .nav-btn__label,
body #sidebarMenuRoot .nav-btn[aria-disabled="true"] .nav-btn__icon,
body #sidebarMenuRoot .nav-btn[aria-disabled="true"] .nav-btn__label {
  color: #8a94a6 !important;
}

@media (max-width: 1500px) {
  .ocv-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ocv-workspace-head--nav {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ocv-workspace-head--nav .ocv-category-nav {
    flex: 1 1 360px;
  }

  .ocv-workspace-head--nav .ocv-flow-steps {
    flex: 0 0 auto;
    grid-template-columns: repeat(4, auto);
  }

  .ocv-flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ocv-flow-steps li {
    flex-direction: column;
    gap: 2px;
    min-height: 48px;
    padding: 6px 4px;
    font-size: 11px;
  }

  .ocv-workspace-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .ocv-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  .ocv-mobile-tabs button {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-weight: 700;
    padding: 9px 10px;
  }

  .ocv-mobile-tabs button.active {
    border-color: var(--yj-appearance-primary,#8b5cf6);
    background: #ede9fe;
    color: var(--yj-appearance-primary,#5b21b6);
  }

  .ocv-workspace-pane {
    grid-area: auto;
    display: none;
  }

  .ocv-workspace-pane.active {
    display: grid;
  }
}

@media (max-width: 720px) {
.ocv-subject-type-grid,
.ocv-segment-grid,
.ocv-core-choice-grid,
.ocv-delivery-settings__controls,
.ocv-param-grid,
.ocv-upload-list,
.ocv-reference-row,
.ocv-shot-strip {
    grid-template-columns: 1fr;
  }

  .ocv-action-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ocv-action-card .ocv-action-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .ocv-narrative-recommendation,
  .ocv-advanced-settings > summary {
    align-items: stretch;
    flex-direction: column;
  }

  .ocv-narrative-toggle {
    width: 100%;
  }

  .ocv-advanced-settings > summary small {
    margin-left: 0;
    text-align: left;
  }

  .ocv-shot-composer__body {
    grid-template-columns: 1fr;
  }

  .ocv-ref-zone--omni,
.ocv-ref-zone--start-end,
.ocv-ref-zone--multi {
    width: 100%;
    justify-content: flex-start;
  }

  .ocv-ref-zone--start-end {
    gap: 8px;
  }

  .ocv-shot-composer__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .ocv-shot-composer__submit {
    width: 100%;
    border-radius: 10px;
  }
}


/* ops-home-shell: see styles/ops-creation-layout.css */


body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 126px !important;
  overflow: hidden !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 18px 16px !important;
  border: 1px solid rgba(219, 226, 236, 0.86) !important;
  border-radius: 8px !important;
  background: var(--skill-bg, #eef2f7) !important;
  color: #0f172a !important;
  text-align: left !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card::after {
  content: "" !important;
  position: absolute !important;
  right: -4px !important;
  bottom: -8px !important;
  width: 56% !important;
  height: 92% !important;
  background-image: var(--skill-img) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: contain !important;
  opacity: 0.92 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0) 100%) !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card:hover {
  border-color: rgba(124, 58, 237, 0.36) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-icon,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card strong,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card em {
  position: relative !important;
  z-index: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card strong {
  max-width: 58% !important;
  color: #101827 !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card em {
  max-width: 58% !important;
  color: rgba(51, 65, 85, 0.78) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-workflow-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(170px, 1fr)) !important;
  gap: 14px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-workflow-card {
  display: flex !important;
  min-height: 142px !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 16px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.92) 42%),
    linear-gradient(135deg, #fef3c7 0%, #dbeafe 55%, #dcfce7 100%) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-workflow-card strong {
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-workflow-card span {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-filter-row button {
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-filter-row button.active {
  border-color: #7c3aed !important;
  background: #7c3aed !important;
  color: #ffffff !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell .ops-home-section-head > button {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell .ops-home-skill-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell .ops-home-skill-card {
  min-height: 176px !important;
  padding: 20px 18px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card strong {
  max-width: 62% !important;
  font-size: 18px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card em {
  max-width: 60% !important;
  min-height: 34px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-meta,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-path {
  position: relative !important;
  z-index: 1 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-meta {
  display: grid !important;
  gap: 3px !important;
  max-width: 62% !important;
  margin-top: 3px !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-meta b,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-meta i {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-meta i {
  color: #64748b !important;
  font-weight: 500 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-path {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  max-width: 62% !important;
  margin-top: 4px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-skill-spec {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-skill-spec span {
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-skill-spec b {
  display: block !important;
  margin-bottom: 3px !important;
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview {
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  min-width: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview__head strong {
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview__head em,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview__head small {
  color: #64748b !important;
  font-size: 11px !important;
  font-style: normal !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview ol {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-height: 220px !important;
  overflow: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview li {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 7px 8px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  border: 1px solid #eef2f7 !important;
  min-width: 0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview li b {
  color: #334155 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview li span {
  color: #475569 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-workflow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell {
    padding: 32px 16px 28px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-head h2 {
    font-size: 24px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-workflow-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell .ops-home-skill-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card {
    min-height: 118px !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-filter-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-filter-row::-webkit-scrollbar {
    display: none !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-filter-row button {
    flex: 0 0 auto !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell .ops-home-skill-card {
    height: 156px !important;
    min-height: 156px !important;
    justify-content: flex-start !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-skills-shell .ops-home-skill-card em {
    display: none !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card strong,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-home-skill-card em,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-meta,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-skill-path {
    max-width: 58% !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-confirm-skill-spec {
    grid-template-columns: 1fr !important;
  }

  body[data-app-feature="operation-center"] #panelOperationCenter .ops-prompt-plan-preview li {
    grid-template-columns: 1fr !important;
  }

  body[data-app-feature="operation-center"] #authOnboardBanner.auth-onboard-banner {
    margin-bottom: 8px !important;
  }

  body[data-app-feature="operation-center"] #authOnboardBanner .auth-onboard-banner__inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  body[data-app-feature="operation-center"] #authOnboardBanner .auth-onboard-banner__title {
    width: 100% !important;
    font-size: 13px !important;
  }

  body[data-app-feature="operation-center"] #authOnboardBanner .auth-onboard-banner__steps {
    display: none !important;
  }

  body[data-app-feature="operation-center"] #authOnboardBanner .auth-onboard-banner__actions {
    width: 100% !important;
    gap: 8px !important;
  }

  body[data-app-feature="operation-center"] #authOnboardBanner .auth-onboard-banner__cta {
    height: 34px !important;
    font-size: 12px !important;
  }
}
body:not([data-app-feature="operation-center"]) .ops-video-result-card {
  display: none !important;
}

.ops-video-result-card {
  gap: 10px;
  min-height: 220px;
}

.ops-video-result-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #15213a;
}

.ops-video-result-card__head span {
  color: #7c3aed;
  font-weight: 700;
}

.ops-video-result-card__video,
.ops-canvas-video-object {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 420px;
  border-radius: 8px;
  background: #0f172a;
  object-fit: contain;
}

.ops-video-result-card__pending {
  min-height: 180px;
  border: 1px dashed rgba(124, 58, 237, 0.32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), rgba(255, 255, 255, 0.94));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: #4b5563;
}

.ops-video-result-card__pending b,
.ops-video-result-card__pending em {
  display: block;
  font-style: normal;
}

.ops-video-result-card__pulse {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #7c3aed;
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.38);
  animation: opsVideoPulse 1.1s ease-out infinite;
}

@keyframes opsVideoPulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.38); transform: scale(0.92); }
  70% { box-shadow: 0 0 0 14px rgba(124, 58, 237, 0); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); transform: scale(0.92); }
}

.ops-video-result-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-video-result-card__actions button {
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: #fff;
  color: #5b21b6;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.ops-canvas-card--result-video {
  background: #ffffff;
}

.ops-canvas-video-caption {
  margin: 8px 10px 10px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.is-video-delivery-error > video,
.is-video-delivery-error .ops-canvas-video-object,
.is-video-delivery-error .ops-video-result-card__video {
  display: none;
}

.ops-video-delivery-error {
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  line-height: 1.55;
}

/* ========== Form compact pass (2026-06-28): step dots, prompt, upload, spacing ========== */
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) {
  min-height: 108px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .gpt-upload-param,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .gpt-upload-param,
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .upload-block__body--preview-only,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .upload-block__body--preview-only {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .gpt-upload-block,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .gpt-upload-block {
  height: 95px !important;
  min-height: 95px !important;
  max-height: 95px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .preview-container.preview-area,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload:not(:has(.uploaded-item)):not(:has(.upload-zone--has-items)) .preview-container.preview-area {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)),
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  padding: 8px 10px !important;
}

body[data-app-feature="gpt-image"] #panelGptImage #gpt-image-panel .gpt-step-card--upload #gptImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn,
body[data-app-feature="nano-banana"] #panelNanoBanana #nano-banana-panel .gpt-step-card--upload #nanoImageUploadBox.upload-zone--gpt-compact:not(.upload-zone--has-items):not(:has(.uploaded-item)) .add-image-btn {
  height: 68px !important;
  min-height: 68px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#panelGptImage #gpt-image-panel .gpt-step-card,
#panelNanoBanana #nano-banana-panel .gpt-step-card {
  padding: 10px;
}

#panelGptImage #gpt-image-panel .gpt-image-stack,
#panelNanoBanana #nano-banana-panel .gpt-image-stack {
  gap: var(--form-step-gap, 11px);
}

#panelGptImage #gpt-image-panel .gpt-step-card > .step-title-row,
#panelNanoBanana #nano-banana-panel .gpt-step-card > .step-title-row {
  margin-bottom: 5px;
}

#panelGptImage #gpt-image-panel .gpt-step-card:last-child .step-leader__line,
#panelNanoBanana #nano-banana-panel .gpt-step-card:last-child .step-leader__line,
.main-area > .yj-card.yj-card--panel #gpt-image-panel .gpt-step-card:last-child .step-leader__line,
.main-area > .yj-card.yj-card--panel #nano-banana-panel .gpt-step-card:last-child .step-leader__line {
  display: none;
}

/* Unified choice buttons: restrained workbench style for option groups. */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) {
  --yj-choice-bg: #ffffff;
  --yj-choice-bg-hover: #fbfdff;
  --yj-choice-border: #dbe3ef;
  --yj-choice-border-hover: #cbd5e1;
  --yj-choice-text: #243047;
  --yj-choice-muted: #64748b;
  --yj-choice-active-bg: linear-gradient(180deg, #fbf9ff 0%, #f4efff 100%);
  --yj-choice-active-border: rgba(124, 58, 237, 0.42);
  --yj-choice-active-text: #5b21b6;
  --yj-nav-active-bg: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
  --yj-nav-active-shadow: 0 3px 9px rgba(109, 40, 217, 0.18);
  --yj-cta-bg: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
  --yj-cta-border: rgba(91, 33, 182, 0.58);
  --yj-cta-shadow: 0 8px 18px rgba(91, 33, 182, 0.22);
  --yj-cta-shadow-hover: 0 10px 22px rgba(91, 33, 182, 0.28);
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .poster-scene-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-route-btn,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn {
  border: 1px solid var(--yj-choice-border) !important;
  border-radius: 6px !important;
  background: var(--yj-choice-bg) !important;
  color: var(--yj-choice-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .poster-scene-btn:hover:not(.active),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn:hover:not(.active),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-route-btn:hover:not(.active),
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn:hover:not(.active) {
  border-color: var(--yj-choice-border-hover) !important;
  background: var(--yj-choice-bg-hover) !important;
  color: #111827 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .poster-scene-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .poster-scene-btn[aria-selected="true"],
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn[aria-checked="true"],
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-route-btn.active,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-route-btn[aria-checked="true"],
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active {
  border-color: var(--yj-choice-active-border) !important;
  background: var(--yj-choice-active-bg) !important;
  color: var(--yj-choice-active-text) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.10), 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn.active *,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn[aria-checked="true"] *,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active .ratio-btn__t {
  color: var(--yj-choice-active-text) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn__desc,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn .ratio-btn__s {
  color: var(--yj-choice-muted) !important;
  font-weight: 650 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn.active .fashion-mode-btn__desc,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelStandard .fashion-mode-btn[aria-checked="true"] .fashion-mode-btn__desc,
body[data-app-feature="rewrite"] #panelRewrite .rewrite-strength-btn.active .ratio-btn__s {
  color: var(--yj-appearance-primary,#6d28d9) !important;
}

/* Hierarchy layer: feature nav is stronger than options, primary CTA remains strongest. */
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-mode-switch:not(.ocv-mode-switch) {
  background: #eef2f7 !important;
  border-color: #dbe3ee !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-mode-switch:not(.ocv-mode-switch) button {
  color: #334155 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-mode-switch:not(.ocv-mode-switch) button:hover,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-mode-switch:not(.ocv-mode-switch) button:focus-visible {
  color: var(--yj-appearance-primary,#5b21b6) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .commerce-mode-switch:not(.ocv-mode-switch) button.is-active {
  color: #ffffff !important;
  background: var(--yj-nav-active-bg) !important;
  box-shadow: var(--yj-nav-active-shadow) !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generate-btn.generate-btn--standard:not(:disabled):not(.generating),
body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn:not(:disabled),
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn:not(:disabled):not(.is-disabled) {
  border: 1px solid var(--yj-cta-border) !important;
  background: var(--yj-cta-bg) !important;
  color: #ffffff !important;
  box-shadow: var(--yj-cta-shadow) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generate-btn.generate-btn--standard:hover:not(:disabled):not(.generating),
body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn:not(:disabled):hover,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .mobile-generate-bar.mobile-generate-bar--desktop .mobile-generate-bar__btn:hover:not(:disabled):not(.is-disabled) {
  filter: none !important;
  background: linear-gradient(180deg, #8b5cf6 0%, #5b21b6 100%) !important;
  box-shadow: var(--yj-cta-shadow-hover) !important;
}

body[data-app-feature="rewrite"] #panelRewrite .rewrite-submit-btn:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .generate-btn.generate-btn--standard:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .mobile-generate-bar__btn:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) .mobile-generate-bar__btn.is-disabled {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #mainGenerateSticky #generateBtn.generate-btn.generate-btn--standard:disabled,
body:not([data-app-feature="recharge"]):not([data-app-feature="use-cases"]) #panelSelfmediaArticle .selfmedia-primary-btn.generate-btn.generate-btn--standard:disabled,
#panelOneClickVideo #ocvPrimaryBtn.generate-btn.generate-btn--standard:disabled,
body[data-app-feature="rewrite"] #panelRewrite #rewriteSubmitBtn.rewrite-submit-btn:disabled {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  box-shadow: none !important;
  opacity: 0.92 !important;
}

/* Motion audit layer: keep every busy state visibly alive without changing business flow. */
@keyframes yjMotionSoftPulse {
  0%,
100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
  50% {
    opacity: 0.96;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
  }
}

@keyframes yjMotionSweepLite {
  0% { transform: translateX(-115%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}

@keyframes yjMotionBusyGlow {
  0%,
100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.18); }
  50% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.04); }
}

.result-card-action-btn,
.preview-detail-btn,
.toolbar-btn,
.generation-history-page__refresh,
.generation-history-page__trash,
.generation-history-retry-btn,
.commerce-mode-switch button,
.model-btn,
.ratio-btn,
.resolution-btn,
.param-btn {
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease !important;
}

.result-card-action-btn:hover:not(:disabled),
.preview-detail-btn:hover:not(:disabled),
.toolbar-btn:hover:not(:disabled),
.generation-history-page__refresh:hover:not(:disabled),
.generation-history-page__trash:hover:not(:disabled),
.generation-history-retry-btn:hover:not(:disabled),
.model-btn:hover:not(:disabled),
.ratio-btn:hover:not(:disabled),
.resolution-btn:hover:not(:disabled),
.param-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.result-card-action-btn:active:not(:disabled),
.preview-detail-btn:active:not(:disabled),
.toolbar-btn:active:not(:disabled),
.generation-history-page__refresh:active:not(:disabled),
.generation-history-page__trash:active:not(:disabled),
.generation-history-retry-btn:active:not(:disabled),
.model-btn:active:not(:disabled),
.ratio-btn:active:not(:disabled),
.resolution-btn:active:not(:disabled),
.param-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.result-card-action-btn--regenerate {
  border-color: rgba(124, 58, 237, 0.22) !important;
  background: linear-gradient(180deg, #f8f5ff 0%, #ffffff 100%) !important;
  color: #6d28d9 !important;
}

.result-card-action-btn--regenerate:hover:not(:disabled) {
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: #f5f3ff !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12) !important;
}

button[aria-busy="true"],
.yj-btn-busy,
.gpt-secondary-btn.is-busy,
.gpt-ai-expand-btn.is-busy,
.generate-btn.generating {
  cursor: progress !important;
  animation: yjMotionBusyGlow 1.45s ease-in-out infinite;
}

.result-panel-loading-state__bar::after,
.skeleton-progress-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.72) 42%, transparent 74%);
  transform: translateX(-115%);
  animation: yjMotionSweepLite 1.65s ease-in-out infinite;
}

.preview-detail-image-stage--loading::after,
.image-editor-stage--loading::before,
.result-card-media--loading::before,
.result-skeleton::before {
  will-change: transform;
}

.upload-spinner,
.loading-spinner,
.yj-global-status__spinner,
.skeleton-img__pulse,
.result-empty-state.generating-loading .waiting-spinner,
.ocv-loading span {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .upload-spinner,
.loading-spinner,
.yj-global-status__spinner,
.result-skeleton .skeleton-img__pulse,
.generation-history-loading-card .skeleton-img__pulse,
.result-empty-state.generating-loading .waiting-spinner,
.result-empty-state.generating-loading .waiting-spinner.waiting-spinner--pulse,
.ocv-loading span {
    animation: spin 1.15s linear infinite !important;
  }

  .skeleton-progress-bar .skeleton-progress-inner {
    animation: skeleton-progress-shimmer 2.1s linear infinite !important;
    transition: width 0.35s ease-out !important;
  }

  .result-panel-loading-state__bar span::before,
.result-panel-loading-state__bar i {
    animation: result-loading-cursor 1.35s ease-in-out infinite !important;
  }

  .result-panel-loading-state__bar span::before {
    animation-name: result-loading-sheen !important;
  }

  .result-panel-loading-state__bar::after,
.skeleton-progress-bar::before,
.result-skeleton::before,
.result-card-media--loading::before,
.preview-detail-image-stage--loading::after {
    animation: yjMotionSweepLite 2.4s ease-in-out infinite !important;
  }

  .result-skeleton,
.result-card-media--loading,
.preview-detail-image-stage--loading::before,
.image-editor-stage--loading::before,
button[aria-busy="true"],
.yj-btn-busy,
.gpt-secondary-btn.is-busy,
.gpt-ai-expand-btn.is-busy,
.generate-btn.generating {
    animation: yjMotionSoftPulse 2.4s ease-in-out infinite !important;
  }

  .result-card-action-btn:hover:not(:disabled),
.preview-detail-btn:hover:not(:disabled),
.toolbar-btn:hover:not(:disabled),
.model-btn:hover:not(:disabled),
.ratio-btn:hover:not(:disabled),
.resolution-btn:hover:not(:disabled),
.param-btn:hover:not(:disabled),
.result-card:not(.result-fail):hover {
    transform: none !important;
  }
}
.result-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 8px;
  background: rgba(248, 250, 255, 0.92);
  box-shadow: 0 8px 22px rgba(59, 42, 142, 0.06);
}

.result-view-tabs button {
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4d5d7c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-height: 28px;
  padding: 0 12px;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}

.result-view-tabs button:hover {
  background: rgba(124, 92, 255, 0.08);
  color: #5e34e8;
}

.result-view-tabs button.is-active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.24);
}

.result-gallery-head__tools {
  gap: 8px;
}

#resultGrid.case-wall-grid {
  column-gap: 16px;
  column-width: 228px;
  padding: 2px 0 12px;
}

.case-wall-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  border: 1px solid rgba(123, 134, 163, 0.2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.case-wall-card__media {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #f3f6fb;
  cursor: zoom-in;
}

.case-wall-card__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.22s ease;
}

.case-wall-card:hover .case-wall-card__media img,
.case-wall-card:focus-within .case-wall-card__media img {
  transform: scale(1.025);
}

.case-wall-card__actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.case-wall-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.46));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.case-wall-card:hover::after,
.case-wall-card:focus-within::after {
  opacity: 1;
}

.case-wall-card:hover .case-wall-card__actions,
.case-wall-card:focus-within .case-wall-card__actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.case-wall-card__actions button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  border-radius: 7px;
  background: #fff;
  color: #6d35e8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  white-space: nowrap;
}

.case-wall-card__actions button:hover {
  border-color: rgba(124, 92, 255, 0.52);
  background: rgba(124, 92, 255, 0.08);
}

.case-wall-card__actions .case-wall-card__primary {
  border-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #d77ce4);
  color: #fff;
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.3);
}

.case-wall-card__actions .case-wall-card__primary:hover {
  background: linear-gradient(135deg, #7c3aed, #c45ada);
}

@media (max-width: 900px) {
  .result-view-tabs {
    order: -1;
    width: 100%;
    justify-content: stretch;
  }

  .result-view-tabs button {
    flex: 1;
    padding-right: 8px;
    padding-left: 8px;
  }

  #resultGrid.case-wall-grid {
    column-gap: 12px;
    column-width: 168px;
  }

  .case-wall-card {
    margin-bottom: 12px;
  }
}

@media (hover: none) {
  .case-wall-card::after,
.case-wall-card .case-wall-card__actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .case-wall-card__actions {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  .case-wall-card__actions button {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
  }
}

/* Full-journey result wall (P0 2026-08-01) */
.result-journey-banner {
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #0f172a;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}
.result-journey-banner[hidden] {
  display: none !important;
}
.result-journey-banner--partial {
  border-color: rgba(180, 83, 9, 0.28);
  background: #fffbeb;
  color: #92400e;
}
.result-journey-banner--done {
  border-color: rgba(21, 128, 61, 0.22);
  background: #f0fdf4;
  color: #166534;
}
.yj-toolbar-retry-failed:not(:disabled) {
  border-color: rgba(180, 83, 9, 0.35);
  color: #9a3412;
}
.result-journey-banner--recover {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
  color: #1e40af;
}
.result-journey-banner--blocked {
  border-color: rgba(185, 28, 28, 0.28);
  background: #fef2f2;
  color: #991b1b;
}
.yj-toolbar-retry-failed[hidden] {
  display: none !important;
}

/* Feature gates must win over the mobile sidebar's display: contents rules. */
body #sidebarMenuRoot #customFeaturesNavGroup[hidden],
body #sidebarMenuRoot #customFeaturesNavDivider[hidden] {
  display: none !important;
}

/* Arrow overlay for canvas relationship lines */
body[data-app-feature="operation-center"] #opsCanvasArrowLayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link {
  fill: none !important;
  stroke: rgba(148, 163, 184, 0.92) !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: none !important;
  vector-effect: non-scaling-stroke;
  filter: none;
  animation: none !important;
  pointer-events: stroke;
  cursor: pointer;
}

body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link--manual {
  cursor: pointer;
  stroke-width: 2.35 !important;
  pointer-events: stroke !important;
}

body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link--progress {
  stroke: rgba(124, 58, 237, 0.92) !important;
  stroke-width: 2.35 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--generating-failed {
  border-color: rgba(220, 38, 38, 0.42) !important;
  background: #fef2f2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-generating-failed {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 16px;
  color: #b91c1c;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-generating-failed strong {
  font-size: 14px;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-generating-failed span {
  font-size: 12px;
  line-height: 1.45;
}

body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link.is-selected,
body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link--manual.is-selected {
  stroke: rgba(34, 197, 94, 0.95) !important;
  stroke-width: 2.6 !important;
  stroke-dasharray: 7 7 !important;
  filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.45));
  animation: ops-canvas-arrow-transmit 0.9s linear infinite !important;
}

body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link.is-hovered {
  stroke: rgba(59, 130, 246, 0.95) !important;
  stroke-width: 2.55 !important;
  cursor: pointer;
}

body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link--preview {
  stroke: rgba(148, 163, 184, 0.55) !important;
  stroke-width: 2 !important;
  stroke-dasharray: none !important;
  pointer-events: none !important;
  animation: none !important;
  opacity: 0.85;
}

@keyframes ops-canvas-arrow-transmit {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -28; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link.is-selected,
  body[data-app-feature="operation-center"] #opsCanvasArrowLayer .ops-canvas-arrow-link--manual.is-selected {
    animation: none !important;
  }
}



body[data-app-feature="operation-center"] #opsCanvasCards {
  position: relative !important;
  z-index: 2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel {
  position: absolute !important;
  left: calc(100% + 10px) !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 40 !important;
  width: min(300px, 72vw) !important;
  padding: 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__modes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__modes button {
  min-height: 32px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__modes button.is-active {
  border-color: rgba(124, 58, 237, 0.45) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%) 0 7px / 14px 14px,
    #e2e8f0 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed rgba(109, 40, 217, 0.55) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: rgba(245, 243, 255, 0.28) !important;
  transition: aspect-ratio 160ms ease !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__frame {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__source {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, 0.35) !important;
  background: #fff !important;
  pointer-events: none !important;
  user-select: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__handle {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 4px !important;
  background: #6d28d9 !important;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.35) !important;
  cursor: nwse-resize !important;
  z-index: 2 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__handle.is-dragging {
  background: #5b21b6 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__handle[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__label {
  margin: 0 0 6px !important;
  color: #5b21b6 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__hint {
  margin: 0 0 10px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__expand,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__ratios {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__expand[hidden],
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__ratios[hidden] {
  display: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__expand button,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__ratios button {
  min-height: 30px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__expand button.is-active,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__ratios button.is-active {
  border-color: rgba(124, 58, 237, 0.45) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: #6d28d9 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__actions button {
  min-height: 34px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-outpaint-panel__actions button.is-primary {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: #6d28d9 !important;
  color: #fff !important;
}

/* Reference-relationship node card on the canvas — dashed border + tinted bg to visually
   distinguish it from ordinary result / prompt cards, making the asset→generation flow legible. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt[data-ops-ref-link="true"] {
  width: 260px !important;
  background: rgba(245, 243, 255, 0.95) !important;
  border: 1.5px dashed rgba(124, 58, 237, 0.35) !important;
  box-shadow: 0 1px 4px rgba(109, 40, 217, 0.08) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt[data-ops-ref-link="true"] .ops-canvas-card__kicker {
  background: rgba(124, 58, 237, 0.13) !important;
  color: #5b21b6 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt[data-ops-ref-link="true"] h4 {
  font-size: 13px !important;
  color: #4c1d95 !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt[data-ops-ref-link="true"] p {
  font-size: 12px !important;
  color: #6d28d9 !important;
  opacity: 0.85 !important;
}


body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-placeholder{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;min-height:160px!important;padding:16px!important;border:1px dashed rgba(15,23,42,.18)!important;border-radius:8px!important;background:#f8fafc!important;color:#64748b!important;text-align:center!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-placeholder.is-error{border-color:rgba(220,38,38,.35)!important;background:#fef2f2!important;color:#b91c1c!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-placeholder strong{font-size:13px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-image-placeholder span{font-size:12px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate{width:320px!important;min-height:120px!important;padding:12px 14px 14px!important;border:1px solid rgba(203,213,225,.95)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 8px 20px rgba(15,23,42,.06)!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate{overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate.is-expanded{width:360px!important;overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi{width:380px!important;min-height:160px!important;padding:12px 14px 14px!important;border:1px solid rgba(203,213,225,.95)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 8px 20px rgba(15,23,42,.06)!important;overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi.is-expanded{width:420px!important;max-height:none!important;overflow:visible!important}

/* Video-generate node uses the same prompt param dropdown mechanics (absolute menu),
   so it must not be clipped by the base card overflow:hidden. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--video-generate{overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--video-generate.is-expanded{overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi > .ops-canvas-resize-handle{display:block!important;cursor:nwse-resize!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-list{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0 0 10px!important;overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-slot{padding:10px!important;border:1px solid rgba(203,213,225,.9)!important;border-radius:10px!important;background:#f8fafc!important;overflow:visible!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-prompt-text-param.is-open{z-index:60!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-slot__head{display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 6px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-slot__head strong{font-size:12px!important;color:#0f172a!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-slot__status{flex:1!important;font-size:11px!important;color:#64748b!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-slot__remove{appearance:none!important;width:20px!important;height:20px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#94a3b8!important;cursor:pointer!important;font-size:14px!important;line-height:1!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-prompt{min-height:60px!important;margin:0 0 6px!important;background:#fff!important;resize:vertical!important;overflow-x:hidden!important;overflow-y:auto!important;max-width:100%!important;padding:8px 10px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-slot__run{display:flex!important;align-items:center!important;gap:6px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-multi-actions{display:flex!important;gap:6px!important;margin:0 0 8px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-summary{margin:0 0 10px!important;white-space:pre-wrap!important;color:#64748b!important;font-size:12px!important;line-height:1.45!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-upload-zone{margin:0 0 10px!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-upload-btn{appearance:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;width:100%!important;min-height:40px!important;padding:8px 12px!important;border:1px dashed rgba(15,23,42,.2)!important;border-radius:10px!important;background:#f8fafc!important;color:#0f172a!important;cursor:pointer!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-upload-btn--compact{min-height:40px!important;width:40px!important;flex:0 0 auto!important;padding:0!important;justify-content:center!important;font-size:20px!important;font-weight:700!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-upload-btn__icon{font-size:16px!important;color:#6366f1!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-upload-btn strong{font-size:13px!important;font-weight:700!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-upload-btn em{font-style:normal!important;font-size:12px!important;color:#94a3b8!important;margin-left:auto!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-refs{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb{position:relative!important;display:block!important;width:56px!important;height:56px!important;padding:0!important;margin:0!important;border:1px solid rgba(15,23,42,.12)!important;border-radius:8px!important;overflow:hidden!important;background:#fff!important;flex:0 0 auto!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-prompt{display:block!important;box-sizing:border-box!important;width:100%!important;min-height:88px!important;margin:0 0 10px!important;padding:10px!important;border:1px solid rgba(203,213,225,.95)!important;border-radius:8px!important;background:#f8fafc!important;color:#0f172a!important;font:inherit!important;font-size:12.5px!important;line-height:1.5!important;resize:vertical!important;outline:0!important;user-select:text!important;-webkit-user-select:text!important;pointer-events:auto!important;touch-action:auto!important;cursor:text!important}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-prompt:focus{border-color:rgba(124,58,237,.45)!important;background:#fff!important}

/* Multi-slot textarea stays compact; do not inherit the bulky single-prompt size. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-gen-multi-prompt{
  min-height:72px !important;
  margin:0 0 8px !important;
  padding:8px 10px !important;
  font-size:12.5px !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-box-sized .ops-gen-multi-prompt{
  flex: 0 0 auto !important;
  min-height: 72px !important;
  max-height: 140px !important;
}

/* Slot-level run stays compact; footer 全部运行 matches 生图节点 28px. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-gen-multi-slot__run .ops-canvas-prompt-text-action{
  height:28px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  font-size:12px !important;
  line-height:1 !important;
}


body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb__badge {
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  z-index: 1 !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb.is-uploading {
  opacity: 0.72 !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb img.is-broken {
  opacity: 0.35 !important;
  filter: grayscale(1) !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb__empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb__remove {
  position: absolute !important;
  right: 2px !important;
  top: 2px !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms ease, background 120ms ease !important;
}
@media (hover: hover) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb:hover .ops-gen-ref-thumb__remove,
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb:focus-within .ops-gen-ref-thumb__remove {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
@media (hover: none) {
  body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb__remove {
    opacity: 0.92 !important;
    pointer-events: auto !important;
  }
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb__remove:hover,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb__remove:focus-visible {
  background: rgba(220, 38, 38, 0.92) !important;
  outline: 0 !important;
}
body[data-app-feature="operation-center"] #panelOperationCenter .ops-gen-ref-thumb.is-uploading .ops-gen-ref-thumb__remove {
  display: none !important;
}

/* Canvas node taxonomy: only advertise interactions that the node supports. */
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video {
  --ops-node-accent: #334155;
  --ops-node-accent-soft: rgba(51, 65, 85, 0.1);
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint {
  --ops-node-accent: #0f766e;
  --ops-node-accent-soft: rgba(15, 118, 110, 0.12);
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi {
  --ops-node-accent: #0e7490;
  --ops-node-accent-soft: rgba(14, 116, 144, 0.12);
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--video-generate {
  --ops-node-accent: #b45309;
  --ops-node-accent-soft: rgba(180, 83, 9, 0.12);
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-selected,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-multi-selected {
  border-color: rgba(124, 58, 237, 0.74) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16), 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card .ops-canvas-port {
  background: var(--ops-node-accent, #334155) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-port.is-connect-source,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card.is-connect-target .ops-canvas-port--in {
  background: #fff !important;
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2), 0 4px 12px rgba(124, 58, 237, 0.18) !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video .ops-canvas-resize-handle {
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-multi-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--asset-image.is-resizing .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-multi-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-image.is-resizing .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video.is-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video.is-multi-selected .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--result-video.is-resizing .ops-canvas-resize-handle {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-generate-multi .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-rewrite .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--image-outpaint .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--video-generate .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--note .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--variable .ops-canvas-resize-handle,
body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--designer .ops-canvas-resize-handle {
  display: block !important;
  cursor: nwse-resize !important;
}

body[data-app-feature="operation-center"] #panelOperationCenter .ops-canvas-card--prompt-text .ops-canvas-resize-handle {
  cursor: ew-resize !important;
}

/* Final sidebar override: keep the new grouped IA visually flat despite
   historical sidebar skin layers declared above. */
body #sidebarMenuRoot.sidebar-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 4px !important;
  flex: 0 0 auto !important;
}

/* Overrides the legacy :not(...) shell skin, whose selector otherwise wins
   over the flat navigation rule above. */
body[data-app-feature] #sidebarMenuRoot.sidebar-nav.sidebar-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px !important;
  flex: 0 0 auto !important;
}

body #sidebarMenuRoot .nav-group {
  display: grid !important;
  gap: 1px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body #sidebarMenuRoot .nav-group-header {
  display: flex !important;
  min-height: 13px !important;
  margin: 2px 9px 2px !important;
  color: #a0a8b6 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

body #sidebarMenuRoot .nav-group-header .nav-group-icon {
  display: none !important;
}

body #sidebarMenuRoot .nav-divider {
  display: block !important;
  height: 5px !important;
  margin: 0 !important;
  background: transparent !important;
}

body #sidebarMenuRoot .nav-group--append {
  margin-top: 2px !important;
}

body #sidebarMenuRoot .nav-group-header {
  margin: 0 8px 4px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #9aa4b2 !important;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

body #sidebarMenuRoot .nav-group .nav-btn {
  min-height: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #667085 !important;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif !important;
}

body #sidebarMenuRoot .nav-group .nav-btn__icon,
body #sidebarMenuRoot .nav-group .nav-btn__icon .lucide-nav-svg {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
}

body #sidebarMenuRoot .nav-group .nav-btn__label {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body #sidebarMenuRoot .nav-group .nav-btn:hover {
  background: #f8fafc !important;
  color: #475467 !important;
}

body #sidebarMenuRoot .nav-group .nav-btn.active {
  border-color: #ddd6fe !important;
  background: #faf9ff !important;
  color: #5b21b6 !important;
  box-shadow: none !important;
}

body #sidebarMenuRoot .nav-group .nav-btn.active .nav-btn__label {
  font-weight: 500 !important;
}

/* Account center must occupy the whole workbench; the result rail belongs to
   generation screens only. Kept in the final stylesheet to outrank legacy
   responsive shells (including the 1024–1440 form+result lock). */
body[data-app-feature="account-center"] .page-container.app-container > #resultPanel.result-panel {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

body[data-app-feature="account-center"] .page-container.app-container > .main-area {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
}

body[data-app-feature="account-center"] .page-container.app-container > .main-area > .yj-card.yj-card--panel,
body[data-app-feature="account-center"] .page-container.app-container > .main-area #mainDynamicStack.dynamic-panel-stack,
body[data-app-feature="account-center"] .page-container.app-container > .main-area #panelAccountCenter.dynamic-panel--visible {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Account and recharge are workspace routes; neither may resize or reflow the
   shared rail. The wallet stays on the same bottom baseline in both views. */
@media (min-width: 1024px) {
  body[data-app-feature="account-center"] .page-container.app-container > .sidebar.sidebar--stack,
  body[data-app-feature="recharge"] .page-container.app-container > .sidebar.sidebar--stack {
    box-sizing: border-box !important;
    flex: 0 0 192px !important;
    width: 192px !important;
    min-width: 192px !important;
    max-width: 192px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 12px 10px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body[data-app-feature="account-center"] #sidebarMenuRoot,
  body[data-app-feature="recharge"] #sidebarMenuRoot {
    margin-top: 0 !important;
  }

  body[data-app-feature="account-center"] #sidebarWallet,
  body[data-app-feature="recharge"] #sidebarWallet {
    align-self: stretch !important;
    margin: auto 0 0 !important;
    flex: 0 0 auto !important;
  }
}

body #sidebarMenuRoot .nav-btn.nav-btn--disabled,
body #sidebarMenuRoot .nav-group .nav-btn.nav-btn--disabled,
body #sidebarMenuRoot .nav-btn:disabled,
body #sidebarMenuRoot .nav-group .nav-btn:disabled {
  background: transparent !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  color: #a8b1c0 !important;
  opacity: .72 !important;
}

.result-transparency-notice { padding: 8px 10px; color: #874a13; background: #fff4de; font-size: 12px; line-height: 1.5; }