/* ============================================================
   refresh.css —— 整体视觉刷新层
   ------------------------------------------------------------
   加载顺序排在所有页面样式之后（quick.css 之后），只做三件事：
     ① 页面区分色：每个功能页一个主色调，导航选中态、
        顶栏标题圆点、保存状态点跟着变 —— 一眼知道「我在哪一页」。
     ② 卡片悬浮反馈与阴影层次。
     ③ 少量微交互补强（按下回弹、悬浮上浮）。

   颜色全部走 base.css 的 token，浅色 / 深色主题自动跟随；
   prefers-reduced-motion 时由 polish.css 的总开关统一关闭动效。
   ============================================================ */

/* ---------- ① 页面区分色 ----------
   .app 上挂 --page，:has() 感知当前是哪一页在显示。
   页面 → 色相：
     一键算价   蓝      总览   青
     成本表     琥珀    定价   绿（主色，页面内部绿色元件最多）
     上新       玫红    标题   紫
     知识库     靛蓝                                     */
.app { --page: var(--p-blue); }
.app:has(#panel-quick.on)     { --page: var(--p-blue); }
.app:has(#panel-overview.on)  { --page: var(--p-teal); }
.app:has(#panel-cost.on)      { --page: var(--p-amber); }
.app:has(#panel-pricing.on)   { --page: var(--accent); }
.app:has(#panel-launch.on)    { --page: var(--p-rose); }
.app:has(#panel-title.on)     { --page: var(--p-purple); }
.app:has(#panel-knowledge.on) { --page: var(--p-indigo); }

/* 顶栏标题前一枚页面色圆点 + 外圈柔光 */
.topbar .title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.topbar .title::before {
  content: '';
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--page);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page) 16%, transparent);
}

/* 侧边栏当前项：从「永远绿色」换成「本页颜色」 */
.app .nav-item.on {
  background: color-mix(in srgb, var(--page) 11%, transparent);
  color: var(--page);
}
.app .nav-item.on::before { background: var(--page); }
.app .nav-item.on .ico { color: var(--page); }

/* 顶栏「数据已保存在本机」的小圆点也跟页面色走 */
.save-state i { background: var(--page); }

/* ---------- ② 卡片悬浮反馈 ----------
   只抬影子不抬盒子：卡片里全是输入框，位移会让
   「鼠标没动、框却在跳」，所以 hover 只加深阴影和描边。 */
.card {
  transition: box-shadow .2s ease, border-color .2s ease,
              background-color .22s ease, color .22s ease;
}
.card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-2);
}

/* 强调卡的顶部色条加一点点渐变，比纯色更有精神 */
.card.accent-top { border-top: 2px solid transparent;
  background-image: linear-gradient(var(--surface), var(--surface)),
                    linear-gradient(90deg, var(--accent), var(--accent-hi));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* KPI 左侧色条带一点同色柔光 */
.kpi::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kpi-color, var(--border-2)) 100%, transparent),
    color-mix(in srgb, var(--kpi-color, var(--border-2)) 55%, transparent));
}

/* ---------- ③ 微交互补强 ---------- */

/* 次级按钮：与主按钮同款的上浮（继承 .btn 的 transform 过渡） */
.btn-toned:hover,
.btn-warned:hover { transform: translateY(-1px); }

/* 分段控件选中项带一枚同色小影子，跟主按钮一个语言 */
.seg button.on { box-shadow: 0 1px 4px rgba(12, 166, 120, .35); }

/* 选品栏选中格：外圈柔光呼吸一次 */
@keyframes refreshPickOn {
  from { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
  to   { box-shadow: 0 0 0 2px var(--accent-soft); }
}
.pick-tile.on { animation: refreshPickOn .4s ease-out; }

/* 知识库类目 chip 按下回弹（与 .chip 同语言） */
.kb-cat { transition: border-color .13s, background .13s, color .13s, transform .1s; }
.kb-cat:active { transform: scale(.96); }
.dim-opt:active { transform: scale(.97); }
.dim-opt { transition: color .13s, background .13s, border-color .13s, transform .1s; }

/* Toast 圆角再大半档，出入场曲线带一点回弹 */
.toast { border-radius: var(--r-lg); transition: opacity .22s, transform .28s cubic-bezier(.22, 1, .36, 1); }

/* 生成条（定价页「生成 N 个 SKU」）里的数字牌用渐变，和主按钮呼应 */
.gen-n { background: linear-gradient(160deg, var(--accent-hi), var(--accent)); }

/* ---------- ④ 细节收口（2026-10-17 第二轮用户反馈） ---------- */

/* 数字输入框的原生 spinner 全局隐藏：
   备货 / 数量 / 折扣 / 成本这些紧凑小框都是居中对齐，
   hover 冒出的上下箭头既挤占 20px 宽度又破坏视觉居中。
   键盘上下键、直接敲数都不受影响，只去掉装饰性的箭头。 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* 一键对比条 / 结论卡等无 hover 的静态块不动，保持安静。 */