/* ============================================================
 *  workspace-theme.css · 登录后后台工作区布局修正
 *  在 index.html 中于 login-theme.css 之后加载（?v=N 破缓存）
 * ============================================================ */

/* ===== 1. 移除顶部固定导航栏 =====
 * 背景：#navBarBox 是 sticky 流内元素（高 60px、半透明底 + 发丝下边框 + 模糊），
 * 登录后出现在每个后台页面顶部；栏内只有“品牌Logo+站名”和“头像按钮”，
 * 品牌与侧边栏顶部重复，用户反馈此栏不需要。
 * 直接 display:none 会连带隐藏头像按钮——而头像菜单（个人中心/退出登录/
 * 积分/卡密兑换/签到/邀请/公告）是用户在后台的唯一入口，不能丢。
 * 方案：把栏本体制空（零高、透明、无边框无投影），品牌区隐藏，
 * 仅将头像区提为绝对定位，浮于内容区右上角，功能不降级。 */
html.polish-v4.polish-ready #navBarBox:has(.guide-login-avatar-btn) {
  position: sticky !important;
  top: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}
/* 品牌区（与侧栏顶部的 Logo+站名重复） */
html.polish-v4.polish-ready #navBarBox:has(.guide-login-avatar-btn) .navBarLeft {
  display: none !important;
}
/* 头像/VIP 区：脱离零高栏的流，锚定右上角 */
html.polish-v4.polish-ready #navBarBox:has(.guide-login-avatar-btn) .navBarUserInfo {
  position: absolute !important;
  top: 12px !important;
  right: 20px !important;
  pointer-events: auto !important;
}
/* 游客态（无头像按钮，栏内为“登录/注册”）保持原样，不误伤 */

/* ===== 2. 移除“联系客服”入口 =====
 * 产品决策：全站下线客服联系信息。数据库中的联系方式配置
 * （qqNumber/vxNumber/wechatImage/chatOnline）已清空；此处移除前端
 * 仍写死在构建产物中的两处客服入口（全路由扫描确认仅剩这两处可见）：
 *  a. 画布编辑器 /canvas/:id 右侧悬浮坞中的“联系客服”按钮（cv-dock-ic）；
 *  b. D3 绘画页 /d3draw 左侧栏底部的“客服”项（同栏“会员”项保留）。
 * 选择器经实测只命中客服项，不误伤相邻的“会员”项与帮助按钮。 */
html.polish-v4.polish-ready .cv-dock-ic[data-tip="联系客服"],
html.polish-v4.polish-ready .cv-dock-ic[aria-label="联系客服"] {
  display: none !important;
}
html.polish-v4.polish-ready div[style*="text-align: center"]:has(img[src*="people-6bc4e6c3"]) {
  display: none !important;
}

/* ===== 3. 头像：正方形 + 正圆 + 上移 =====
 * 现象：头像实际盒 40×34（非正方形），内部 img 36×30 + object-fit:fill，
 * 所以看起来是“扁椭圆”，不是圆。
 * 原因：.navBarUserInfo 被框架用 transform:translateY(34px) 下推（原本给
 * 60px 高顶栏做垂直居中），顶栏被压成 0 高后这 34px 就成了纯下坠。
 * 处理：清掉 transform、把头像定成 36×36 正圆、img 用 cover 裁切、去掉
 * n-avatar 的 2px 白描边。 */

html.polish-v4.polish-ready #navBarBox:has(.guide-login-avatar-btn) .navBarUserInfo {
  top: 6px !important;
  right: 20px !important;
  height: 36px !important;
  transform: none !important;
  align-items: center !important;
}

html.polish-v4.polish-ready #navBarBox .guide-login-avatar-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.polish-v4.polish-ready #navBarBox .guide-login-avatar-btn .n-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 0 !important;
  --n-border: 0 none !important;
  --n-border-radius: 50% !important;
}

html.polish-v4.polish-ready #navBarBox .guide-login-avatar-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* ===== 4. 头像弹层可点（修复“退不出去”）=====
 * 根因：第 1 节给 #navBarBox 设了 pointer-events:none（让零高栏不挡内容），
 * pointer-events 是可继承属性，弹层 .settings-panel 挂在 navBarBox 下
 * （不是挂在已恢复 auto 的 .navBarUserInfo 上），于是整块面板继承 none：
 * 看得见、点不动，退出登录/个人中心等全部失效。
 * 这里只对弹层恢复 auto，栏体本身仍是 none，不影响内容区交互。 */
html.polish-v4.polish-ready #navBarBox .settings-panel {
  pointer-events: auto !important;
}
html.polish-v4.polish-ready #navBarBox .settings-panel * {
  pointer-events: auto !important;
}

/* ===== 5. 功能区搜索框：去青色 + 与登录输入框统一 =====
 * 现象：点进搜索框后出现两条冲突的聚焦反馈——
 *   a. .search 容器边框变青色 rgb(0,202,224)（框架 primary），
 *   b. input 自身还有 system.css 全局 :focus-visible 的 2px 琥珀实线 outline，
 * 两者叠在一个 8px 圆角的小框上，既刺眼又乱。
 * 处理：与登录页 .inpBox 完全一致的令牌——胶囊圆角、边框转琥珀、
 * 3px 极淡外发光、清掉 outline 与内层描边。 */
html.polish-v4.polish-ready .search {
  border-radius: var(--sys-r-pill) !important;
  transition: border-color var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease),
              background-color var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .search:focus-within {
  border-color: rgba(255, 180, 90, .34) !important;
  box-shadow: 0 0 0 3px rgba(255, 180, 90, .10) !important;
  background-color: rgba(255, 180, 90, .035) !important;
}
html.polish-v4.polish-ready:not(.dark) .search {
  background-color: #ffffff !important;
  border-color: var(--sys-line) !important;
}
html.polish-v4.polish-ready:not(.dark) .search:focus-within {
  border-color: rgba(181, 112, 31, .42) !important;
  box-shadow: 0 0 0 3px rgba(181, 112, 31, .10) !important;
  background-color: #ffffff !important;
}
html.polish-v4.polish-ready:not(.dark) .search input {
  color: #17212b !important;
}
html.polish-v4.polish-ready:not(.dark) .search input::placeholder {
  color: #8896a3 !important;
}
/* 清掉 focus 硬描边（容器自带边框+发光，不需要第二条线） */
html.polish-v4.polish-ready .search input:focus,
html.polish-v4.polish-ready .search input:focus-visible,
html.polish-v4.polish-ready .search:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
}
html.polish-v4.polish-ready .search input {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* ===== 6. 工具卡片选中态：完整描边 + 参考站同款层次 =====
 * 现象：“选中后外边框显示不完整”——原规则用 box-shadow: 0 0 0 1px 在卡片
 * 外沿画 1px 环，而卡片紧贴 .tool-list-wrap（overflow:hidden auto）左沿与
 * 顶部，外扩的那 1px 被父容器直接裁掉，于是只剩右下两边有线。
 * 另有同名规则把同一圈 ring 也加到了 .cover（45×45 圆形图标）上，图标外
 * 多出一圈错位描边。
 * 处理：改用 inset 内描边（画在盒内，永不被父级裁剪，也不改变布局尺寸），
 * 叠加与参考站同构的左上→右下渐变底 + 顶部内高光；图标去掉多余 ring。 */
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card {
  border-radius: 12px !important;
  transition: background-color var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card:hover:not(.active) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
  background-color: rgba(255, 255, 255, .035) !important;
}
html.polish-v4.polish-ready:not(.dark) body .tool-list-wrap .tool-list .tool-card:hover:not(.active) {
  box-shadow: inset 0 0 0 1px rgba(15, 40, 48, .10) !important;
  background-color: rgba(15, 40, 48, .035) !important;
}
/* 选中态本体样式已统一移至第 9 节（克制版），此处不再重复，避免两套规则互相覆盖 */
/* 图标容器不要跟着画 ring（原规则把它一起选了） */
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card.active .cover,
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card .cover {
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}
/* 列表容器右侧留 1px，避免 inset 描边贴边被滚动条压住 */
html.polish-v4.polish-ready .tool-list-wrap {
  padding-right: 4px !important;
}

/* ===== 7. 分类行：6 个分类压进侧栏宽度 =====
 * 菜单恢复 6 个分类（全部/短剧/模型/工具/灵感/资产）后，naive-ui 的
 * .n-tabs-tab-pad 默认 18px 间距会把总宽撑到 258px，超出可用 234px，
 * 末位“资产”被裁掉并触发右侧溢出阴影（看起来像被切了一半）。
 * 只收紧分隔垫片，字号与点击热区不变。 */
html.polish-v4.polish-ready .modelBox .n-tabs-tab-pad {
  width: 12px !important;
}
html.polish-v4.polish-ready .modelBox .n-tabs-tab {
  white-space: nowrap !important;
}
html.polish-v4.polish-ready .modelBox .n-tabs-nav-scroll-wrapper {
  overflow: visible !important;
}

/* ==========================================================================
   8. 工具箱分类条（.cat-tabs）横向滚动条细化
   背景：分类条内容超出（580px / 可视 258px）时出现原生横向滚动条。
   polish.css 在 html 上设了 scrollbar-width: thin（该属性可继承），而 Chrome
   只要看到 scrollbar-width 非 auto 就会【忽略 ::-webkit-scrollbar 自定义样式】，
   于是退化成系统默认的浅灰实心粗条，压在分类行下面非常突兀。
   做法：本容器把 scrollbar-width 改回 auto 以重新启用自定义伪元素，
   做成 4px 圆角细条；平时低调半透明，悬停才泛起品牌琥珀色。
   ========================================================================== */
html.polish-v4.polish-ready .cat-tabs {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
  /* 底部留白略收：细条贴着分类文字下方，又不至于和搜索框挤在一起 */
  padding-bottom: 10px !important;
}
html.polish-v4.polish-ready .cat-tabs::-webkit-scrollbar {
  height: 6px;
}
html.polish-v4.polish-ready .cat-tabs::-webkit-scrollbar-track {
  background: transparent;
}
html.polish-v4.polish-ready .cat-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 99px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
html.polish-v4.polish-ready .cat-tabs:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 180, 90, .38);
}
html.polish-v4.polish-ready:not(.dark) .cat-tabs::-webkit-scrollbar-thumb {
  background: rgba(46, 32, 16, .16);
}
html.polish-v4.polish-ready:not(.dark) .cat-tabs:hover::-webkit-scrollbar-thumb {
  background: rgba(181, 112, 31, .42);
}



/* ===== 9. 选中卡渲染：照搬参考站（manju-const）的手法 =====
 * 登录参考站实测拿到的真实实现（桌面端 /shortPlay/pro）：
 *   .tool-card.active {
 *     background: rgba(0, 194, 214, 0.2);   ← 单色半透明填充
 *     background-image: none;                ← 无渐变
 *     box-shadow: none;                      ← 无阴影
 *     border: 0;                             ← 无边框
 *     border-radius: 10px;
 *   }
 *   .fItem.active {                          ← 顶部功能区按钮
 *     background: rgba(0,194,214,.1);
 *     border: 1px solid rgba(0,194,214,.2);
 *     color: rgb(0,194,214);                 ← 文字与强调色同色
 *   }
 * 结论：参考站的好看来自「高饱和冷色 + 单色半透明填充 / 清晰单线边框 + 文字同色」，
 * **没有渐变、没有阴影、没有光效**。我们之前 v6/v7/v8 一路加渐变+光斑+多层阴影，
 * 正是把"极简"做成了"堆料"，所以越改越丑。
 * 同一手法换成品牌琥珀色（见 --sel-accent）依然干净：
 *   底 rgba(accent,.10) + 单线 inset 1px rgba(accent,.42) + 标题同色
 * —— 这就是参考站 fItem.active 的结构。
 * 想要参考站的青色版：给 <html> 加 class "acc-cyan" 即可。
 */

html.polish-v4.polish-ready {
  --sel-accent: 255, 180, 90;   /* 品牌琥珀；改成 0, 194, 214 即参考站青 */
}
html.polish-v4.polish-ready.acc-cyan {
  --sel-accent: 0, 194, 214;
}

html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card {
  border-radius: 10px !important;
  border-color: transparent !important;
  transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1),
              background-color 200ms cubic-bezier(.4, 0, .2, 1) !important;
}
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card:hover:not(.active) {
  background-color: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}
html.polish-v4.polish-ready:not(.dark) body .tool-list-wrap .tool-list .tool-card:hover:not(.active) {
  background-color: rgba(15, 40, 48, .04) !important;
}
/* 选中：单色半透明底 + 清晰单线边框（无渐变、无阴影） */
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card.active {
  background-color: rgba(var(--sel-accent), .10) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(var(--sel-accent), .42) !important;
}
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card.active .title {
  color: rgb(var(--sel-accent)) !important;
}
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card.active .cover {
  background: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card.active .cover img {
  filter: none !important;
}
html.polish-v4.polish-ready body .tool-list-wrap .tool-list .tool-card.active .cat-tag {
  box-shadow: none !important;
}
/* 浅色主题：底更淡、边更实，保证可读 */
html.polish-v4.polish-ready:not(.dark) body .tool-list-wrap .tool-list .tool-card.active {
  background-color: rgba(var(--sel-accent), .12) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--sel-accent), .45) !important;
}