/* ============================================================
 *  tool-theme.css —— 创意工具工作台主题层（最后加载）
 *  作用：把 /creativeTool 页面里框架写死的青色 #00C2D6(#0,194,214)
 *        统一替换为 logo 琥珀橙，并与首页深/浅色保持一致。
 *  说明：该页不属于 guide-page 体系，选择器按框架实际类名编写；
 *        统一用 !important + 高特异性压过组件库默认值。
 * ============================================================ */

:root {
  --rf-amber-1: #ffb45a;   /* 高亮 */
  --rf-amber-2: #cf8c3a;   /* 品牌主橙（logo 取色） */
  --rf-amber-3: #b5701f;   /* 深橙 */
  --rf-amber-soft: rgba(207, 140, 58, .14);
  --rf-amber-soft-2: rgba(207, 140, 58, .10);
  --rf-amber-line: rgba(207, 140, 58, .45);
  --rf-amber-glow: rgba(207, 140, 58, .38);
}

/* ---------- 1. 左侧栏顶部横幅 ---------- */
html body .modelBox .topBanner {
  background-image:
    radial-gradient(120% 120% at 0% 0%, var(--rf-amber-soft), transparent 60%),
    linear-gradient(180deg, rgba(207, 140, 58, .08), transparent 70%) !important;
  border-bottom: 1px solid var(--rf-amber-line) !important;
}

/* ---------- 2. 功能区 / 大模型 / 工具箱 一级菜单 ---------- */
html body .modelBox .firstMenuRow .fItem.active {
  color: var(--rf-amber-1) !important;
  background-color: var(--rf-amber-soft) !important;
  border-color: var(--rf-amber-line) !important;
  box-shadow: 0 6px 18px -12px var(--rf-amber-glow) !important;
}
html body .modelBox .firstMenuRow .fItem.active span,
html body .modelBox .firstMenuRow .fItem.active img.icon,
html body .modelBox .firstMenuRow .fItem.active img.iconAC {
  color: var(--rf-amber-1) !important;
}
html body .modelBox .firstMenuRow .fItem:hover {
  color: var(--rf-amber-1) !important;
  border-color: var(--rf-amber-line) !important;
}

/* ---------- 3. 工具列表分类 tab（全部 / 电商专区 / 人像摄影…） ---------- */
html body .tool-list-panel .cat-tabs .cat-tab.active {
  color: var(--rf-amber-1) !important;
  border-bottom-color: var(--rf-amber-2) !important;
}
html body .tool-list-panel .cat-tabs .cat-tab:hover {
  color: var(--rf-amber-1) !important;
}

/* ---------- 4. 工具卡片选中态 ---------- */
html body .tool-list-wrap .tool-list .tool-card.active,
html body .tool-list-wrap .tool-list .tool-card.active .cover {
  border-color: var(--rf-amber-2) !important;
  box-shadow: 0 0 0 1px var(--rf-amber-line), 0 10px 26px -18px var(--rf-amber-glow) !important;
}

/* ---------- 5. 表单面板：比例 chip 选中态 ---------- */
html body .tool-form-panel .chip.active,
html body .media-row .chip.active,
html body .chip-group .chip.active {
  color: var(--rf-amber-1) !important;
  border-color: var(--rf-amber-2) !important;
  background-color: var(--rf-amber-soft) !important;
}
html body .chip:hover {
  border-color: var(--rf-amber-line) !important;
}

/* ---------- 6. 生成按钮 ---------- */
html body .tool-form-panel .footer .n-button--primary-type,
html body .footer > .n-button.n-button--primary-type,
html body .submit-btn {
  background: linear-gradient(135deg, var(--rf-amber-1), var(--rf-amber-2)) !important;
  border-color: transparent !important;
  color: #241505 !important;
  box-shadow: 0 10px 26px -16px var(--rf-amber-glow) !important;
}
html body .tool-form-panel .footer .n-button--primary-type:hover,
html body .footer > .n-button.n-button--primary-type:hover,
html body .submit-btn:hover {
  background: linear-gradient(135deg, #ffc274, var(--rf-amber-2)) !important;
  filter: brightness(1.04);
}
html body .footer > .n-button.n-button--primary-type .n-button__border,
html body .footer > .n-button.n-button--primary-type .n-button__state-border {
  border-color: transparent !important;
}

/* ---------- 7. 其它零散青色 ---------- */
html body .form-item .label-row .ai-pill.is-disabled {
  color: var(--rf-amber-2) !important;
  border-color: var(--rf-amber-line) !important;
}
html body .info .title-row .cat-tag {
  color: var(--rf-amber-2) !important;
  border-color: var(--rf-amber-line) !important;
  background: var(--rf-amber-soft-2) !important;
}

/* ---------- 8. 右上角头像按钮：去掉整块橙色底 ---------- */
html.polish-v4.polish-ready body .navBarUserInfo .vipIconWrap .guide-login-btn.guide-login-avatar-btn,
html body .navBarUserInfo .vipIconWrap .guide-login-btn.guide-login-avatar-btn {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 0 !important;
  overflow: visible !important;
}
html.polish-v4.polish-ready body .navBarUserInfo .vipIconWrap .guide-login-btn.guide-login-avatar-btn::before,
html body .navBarUserInfo .vipIconWrap .guide-login-btn.guide-login-avatar-btn::before,
html body .navBarUserInfo .vipIconWrap .guide-login-btn.guide-login-avatar-btn::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
html body .navBarUserInfo .vipIconWrap .guide-login-btn.guide-login-avatar-btn:hover {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  border: 0 !important;
}
html body .navBarUserInfo .guide-login-avatar-btn .n-avatar {
  box-shadow: 0 0 0 1.5px var(--rf-amber-line);
}

/* ---------- 9. 浅色模式：文字用深橙保证对比 ---------- */
html:not(.dark) body .modelBox .firstMenuRow .fItem.active,
html:not(.dark) body .tool-list-panel .cat-tabs .cat-tab.active,
html:not(.dark) body .media-row .chip.active,
html:not(.dark) body .chip-group .chip.active,
html:not(.dark) body .form-item .label-row .ai-pill.is-disabled,
html:not(.dark) body .info .title-row .cat-tag {
  color: #b5701f !important;
}
html:not(.dark) body .footer > .n-button.n-button--primary-type,
html:not(.dark) body .submit-btn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #9e5e16, #8f5514) !important;
}

/* ---------- 10. 补漏：选中卡片底色 / 禁用胶囊 / 顶部加载条 ---------- */
html body .tool-list-wrap .tool-list .tool-card.active {
  background-color: rgba(255, 180, 90, .06) !important;
}
html body .form-item .label-row .ai-pill.is-disabled {
  background-color: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .42) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
html:not(.dark) body .form-item .label-row .ai-pill.is-disabled {
  background-color: rgba(15, 40, 48, .06) !important;
  color: var(--sys-t3, #8896a3) !important;
  border-color: rgba(15, 40, 48, .12) !important;
}
html body .n-loading-bar,
html body .n-loading-bar--finishing,
html body .n-loading-bar--loading {
  background: linear-gradient(90deg, #ffb45a, #cf8c3a) !important;
}