/* ============================================================
 * 薯灵感 · UI 与动效增强层（小红书风格：明亮 / 清爽 / 圆润 / 有温度）
 * ------------------------------------------------------------
 * 加载顺序：style.css → icons.css → spark-ui.css
 * 设计原则：
 *   1. 纯增量 —— 不重定义 style.css 已有令牌（--r-* / --shadow-* / --ease-* 等），
 *      新增令牌统一 --ui-* 前缀，避免覆盖既有视觉；
 *   2. 不引入任何框架，不改动 DOM 结构；
 *   3. 动效只使用 transform / opacity（外加颜色过渡），不触发重排；
 *   4. 尊重 prefers-reduced-motion；
 *   5. 不做深色背景、不做玻璃拟态、不用冷色光晕。
 * ============================================================ */

/* ============================================================
 * 0. 新增令牌（只补空缺，不覆盖）
 * ============================================================ */
:root {
  /* 品牌色别名（供 icons.css 与本页面复用，值与 --red-* 保持一致） */
  --xhs-red: var(--red-500, #FF2442);
  --xhs-red-hover: var(--red-600, #E01230);
  --xhs-red-light: var(--red-50, #FFF5F6);
  --xhs-red-tint: rgba(255, 36, 66, .08);

  /* 文字 / 面 / 线（映射到既有的暖灰体系） */
  --text-primary: var(--ink, #1F1B1D);
  --text-secondary: var(--ink2, #5B5457);
  --text-tertiary: var(--ink3, #767076);
  --bg-base: var(--card, #FFFFFF);
  --bg-subtle: var(--bg, #FBF9FA);
  --border-subtle: var(--line, #F2EDEE);
  --border-default: var(--line2, #E8E2E4);

  /* 语义色（沿用项目既有绿/琥珀，不引入新色相） */
  --success: var(--green, #1E9E6A);
  --warning: var(--amber, #D98E0B);
  --danger: var(--red-600, #E01230);
  --info: #2F6BFF;

  /* 暖色光晕（弱，不刺眼） */
  --ui-glow: 0 0 24px rgba(255, 36, 66, .15);
  --ui-warm: 0 6px 18px rgba(255, 36, 66, .08);

  /* 时长（与 --t-fast/med/slow 对齐） */
  --ui-dur-1: 200ms;
  --ui-dur-2: 300ms;
  --ui-dur-3: 450ms;

  /* 间距（8px 网格） */
  --ui-1: 8px; --ui-2: 16px; --ui-3: 24px; --ui-4: 32px; --ui-5: 40px;

  /* 极浅暖色纸纹（仅大区块容器使用，透明度极低） */
  --ui-paper: linear-gradient(180deg, rgba(255, 245, 246, .6) 0%, rgba(255, 255, 255, 0) 60%);
}

[data-theme="dark"] {
  --xhs-red-light: rgba(255, 36, 66, .16);
  --ui-glow: 0 0 24px rgba(255, 36, 66, .28);
  --ui-paper: linear-gradient(180deg, rgba(255, 36, 66, .05) 0%, rgba(0, 0, 0, 0) 60%);
}

/* ============================================================
 * 1. 图标与文字混排（本次图标系统化的落地重点）
 * ============================================================ */

/* 区块标题图标：跟随标题字号，品牌红，与文字基线对齐 */
.sec-title > .icon,
.sec-head .icon,
.sec-title > .icon-inline { color: var(--xhs-red-text, #D81B37); }

/* 顶部导航 / 底部 tabbar：16px，选中态变红 */
#topnav button > .icon,
#tabbar button > .icon {
  width: 16px; height: 16px;
  vertical-align: -3px;   /* 实测图标中心比文字中心高 3px，下移对齐 */
}
#topnav button.on > .icon,
#tabbar button.on > .icon { color: inherit; }
#topnav button:hover > .icon,
#tabbar button:hover > .icon { transform: scale(1.18) rotate(-3deg); color: var(--xhs-red-text, #D81B37); }

/* 排序胶囊 / 筛选按钮里的图标 */
.sopt > .icon, .chip > .icon, .cat-item > .icon { width: 15px; height: 15px; }
.sopt.on > .icon { color: var(--xhs-red-text, #D81B37); }

/* 搜索框放大镜 */
.sicon { display: inline-flex; align-items: center; }
.sicon > .icon { width: 18px; height: 18px; }

/* 空状态：88px 浅粉圆底内放大图标 */
.empty-icon > .icon,
.empty .empty-icon > .icon {
  width: 38px; height: 38px;
  color: var(--xhs-red-text, #D81B37);
}
.empty .icon { margin-bottom: 2px; }

/* 卡片标题、列表项图标默认尺寸收敛，避免 20px 在 13px 字号里显大 */
.card-title .icon, .kv .icon, .list-item .icon { width: 16px; height: 16px; }

/* ============================================================
 * 2. 视觉层：卡片交互（沿用既有圆角与阴影，只补动效）
 * ============================================================ */

/* 卡片悬停：轻微上浮 + 暖色阴影（不改动既有 border-radius / padding） */
.topic-card:hover,
.fav-card:hover,
.card.card-pad:hover {
  box-shadow: var(--shadow-md), var(--ui-warm);
}
.topic-card:hover > .icon,
.fav-card:hover > .icon { transform: scale(1.15) rotate(-3deg); color: var(--xhs-red-text, #D81B37); }

/* 可选：鼠标跟随光晕（需元素带 .glow，默认不启用，性能友好） */
.glow { position: relative; overflow: hidden; }
.glow::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 36, 66, .10), transparent 62%);
  transition: opacity var(--ui-dur-2) var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.glow:hover::before { opacity: 1; }
.glow > * { position: relative; z-index: 1; }

/* 极浅暖色纸纹（仅 .ui-paper 容器使用） */
.ui-paper { background-image: var(--ui-paper); background-repeat: no-repeat; }

/* ============================================================
 * 3. 动效层
 * ============================================================ */

/* 3.1 页面转场：style.css 已有 pageIn（淡入 + 上移），这里不重复定义，避免覆盖 */

/* 3.2 滚动进场：style.css 已定义 .reveal / .reveal.in / 无 JS 兜底与观察器（app.js:1054），
 *     此处刻意不再定义，避免同一条 .reveal 规则被两处 CSS 以不同位移值重复声明。 */

/* 3.3 按钮微交互（保留既有圆角/配色，只加位移与回弹） */
.btn, .icon-btn {
  transition: transform var(--ui-dur-1) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              box-shadow var(--ui-dur-1) var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
              background var(--ui-dur-1) var(--ease-standard, cubic-bezier(.4,0,.2,1)),
              color var(--ui-dur-1) var(--ease-standard, cubic-bezier(.4,0,.2,1)),
              border-color var(--ui-dur-1) var(--ease-standard, cubic-bezier(.4,0,.2,1));
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: scale(.96); }
.btn-primary:hover { box-shadow: var(--shadow-red-lg, 0 10px 28px rgba(255,36,66,.34)); }
.btn-soft:hover, .btn-ghost:hover { box-shadow: var(--ui-warm); }
.btn[disabled], .btn:disabled { transform: none !important; opacity: .55; }

/* 3.4 导航按钮悬停 */
#topnav button:hover, #tabbar button:hover { transform: translateY(-1px); }

/* 3.5 骨架屏微光扫过（浅粉，非冷色） */
.skeleton { position: relative; overflow: hidden; background: var(--bg-subtle); border-radius: var(--r-md, 12px); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 245, 246, .9), transparent);
  animation: ui-shimmer 1.4s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

/* 3.6 状态反馈：成功扩散光圈 / 失败抖动 / 加载三点 */
.ui-success { position: relative; }
.ui-success::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--success); opacity: 0; pointer-events: none;
  animation: ui-ripple-out .6s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)) forwards;
}
@keyframes ui-ripple-out {
  0%   { opacity: .9; transform: scale(.96); }
  100% { opacity: 0;  transform: scale(1.06); }
}

.shake { animation: ui-shake-x .4s var(--ease-standard, cubic-bezier(.4,0,.2,1)); }
@keyframes ui-shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.dots { display: inline-flex; gap: var(--s-4); align-items: center; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--xhs-red); opacity: .35;
  animation: ui-dot-bounce .9s var(--ease-standard, cubic-bezier(.4,0,.2,1)) infinite;
}
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ui-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* 3.8 弹窗：不动既有 transform 过渡（.modal-mask.show + .modal 已实现弹簧入场），
 *     仅补一层暖色阴影，让弹窗与卡片语言统一 */
.modal-mask.show + .modal { box-shadow: var(--shadow-lg), var(--ui-warm); }

/* 3.9 下拉 / 抽屉菜单：逐项阶梯淡入 */
.nav-more-panel.show button, .sheet.show button, .dropdown.show > * {
  animation: ui-menu-in var(--ui-dur-1) var(--ease-out-expo, cubic-bezier(.16,1,.3,1)) both;
}
.nav-more-panel.show button:nth-child(1) { animation-delay: 0ms; }
.nav-more-panel.show button:nth-child(2) { animation-delay: 40ms; }
.nav-more-panel.show button:nth-child(3) { animation-delay: 80ms; }
.nav-more-panel.show button:nth-child(4) { animation-delay: 120ms; }
.nav-more-panel.show button:nth-child(n+5) { animation-delay: 160ms; }
@keyframes ui-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
 * 4. 组件层（只做增强，不覆盖既有配色）
 * ============================================================ */

/* 4.1 输入框聚焦：品牌红光晕 */
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="search"]:focus, textarea:focus, select:focus,
.fav-note-input:focus {
  outline: none;
  border-color: var(--xhs-red-text, #D81B37);
  box-shadow: 0 0 0 4px var(--ring-red);
}
.field-error input, .field-error textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--ring-red);
}

/* 4.2 标签 / 胶囊：只加悬停微放大，不动配色 */
.tag, .chip { transition: transform var(--ui-dur-1) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
                          box-shadow var(--ui-dur-1) var(--ease-out-expo, cubic-bezier(.16,1,.3,1)); }
.tag:hover, .chip:hover { transform: scale(1.06); box-shadow: var(--shadow-xs); }

/* 4.3 文字型按钮：下划线由左展开 */
.btn-text {
  position: relative; background: none; border: none;
  color: var(--xhs-red-text, #D81B37); padding: var(--s-4) 2px;
}
.btn-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
  background: var(--xhs-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ui-dur-1) var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.btn-text:hover::after { transform: scaleX(1); }

/* 4.4 空状态容器：更暖的留白 */
.empty-state { text-align: center; padding: var(--ui-5) var(--ui-3); color: var(--text-tertiary); }
.empty-state .empty-art { margin-bottom: var(--ui-2); animation: ui-float-y 3s var(--ease-standard, cubic-bezier(.4,0,.2,1)) infinite; }
@keyframes ui-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================================================
 * 5. 细节层
 * ============================================================ */

/* 5.1 滚动条：细、圆、悬停转品牌红 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink4, #C9C3C5); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--xhs-red); }

/* 5.2 选中文字：浅红底 */
::selection { background: rgba(255, 36, 66, .15); color: inherit; }

/* 5.3 键盘焦点环 */
:focus-visible { outline: 2px solid var(--xhs-red); outline-offset: 2px; }

/* 5.4 移动端：去掉位移类动效，省性能、防误触 */
@media (max-width: 640px) {
  .topic-card:hover, .fav-card:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* 5.5 无障碍：尊重系统「减少动效」 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .topic-card:hover, .icon:hover { transform: none !important; }
}

/* ============================================================
 * 6. 新增能力工作台（PRD v3.0 页面：团队 / 消息 / 增长 / 数据与设置）
 *    仅补充布局类样式，不覆盖既有设计令牌
 * ============================================================ */

/* 表格容器：横向可滚动，窄屏不撑破卡片 */
.ws-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-table th {
  text-align: left; font-weight: 600; color: var(--text-3, #6E6869);
  padding: var(--s-8) var(--s-10); border-bottom: 1px solid var(--border-1, #ececf0); white-space: nowrap;
}
.ws-table td {
  padding: var(--s-10); border-bottom: 1px solid var(--border-1, #f2f2f5);
  color: var(--text-1, #22252a); vertical-align: middle; word-break: break-word;
}
.ws-table tbody tr:hover { background: var(--bg-2, #FBF9FA); }

/* 一行内排布的输入 + 按钮 */
/* 2026-10-03：输入框与按钮挨太近（团队协作/增长资产/数据与设置），8→14px */
.ws-row { display: flex; flex-wrap: wrap; gap: var(--s-14); align-items: center; margin: var(--s-16) 0; }
.ws-row .fav-note-input { flex: 1 1 160px; min-width: 120px; height: 42px; }
.ws-row .btn { flex: 0 0 auto; }

/* 说明条：用于提示合规边界与数据口径 */
.ws-tip {
  background: var(--bg-2, #FBF9FA); border: 1px solid var(--border-1, #ececf0);
  border-radius: 12px; padding: var(--s-10) var(--s-12); margin: var(--s-10) 0;
  font-size: 13px; line-height: 1.7; color: var(--text-2, #5b6069);
}
.ws-muted { color: var(--text-3, #6E6869); font-size: 12px; }
/* 工作台内的空状态：分区内出现，收紧留白（不改动 .empty 本身，其他页面不受影响） */
.ws-empty { padding: var(--s-32) var(--s-16); }
.ws-empty .empty-icon { width: 64px; height: 64px; margin-bottom: var(--s-12); }
.ws-empty .empty-icon .spark-icon { width: 28px; height: 28px; }
.ws-empty .empty-icon { color: var(--red-400, #D81B37); }
.ws-check { display: inline-flex; align-items: center; gap: var(--s-6); margin-right: var(--s-14); font-size: 13px; }
.ws-table code {
  background: var(--bg-3, #f2f3f5); padding: 2px var(--s-6); border-radius: 6px;
  font-size: 12px; word-break: break-all;
}

@media (max-width: 640px) {
  .ws-row .fav-note-input { flex: 1 1 100%; }
  .ws-table { font-size: 12px; }
  .ws-table th, .ws-table td { padding: var(--s-8) var(--s-6); }
}

/* ---- 版本 diff 行 / 保留换行的说明块（PRD 功能点 16 / 15 配套） ---- */
.ws-op-add  { background: rgba(36, 168, 102, .10); }
.ws-op-del  { background: rgba(230, 30, 60, .08); }
.ws-op-same { color: var(--text-3, #6E6869); }
.ws-op-add td:first-child, .ws-op-del td:first-child, .ws-op-same td:first-child { text-align: center; color: var(--text-3, #6E6869); }
[data-theme="dark"] .ws-op-add { background: rgba(36, 168, 102, .16); }
[data-theme="dark"] .ws-op-del { background: rgba(230, 30, 60, .14); }

.ws-pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; max-height: 420px; overflow: auto; }

/* [qw4-20261018] 排序 chip 防溢出（B3 UX 快赢 #7 的零风险部分）
   chip 文字过长时在窄屏会撑破容器，限制最大宽度并纳入 border-box 计算。 */
.sopt, .chip { max-width: 100%; box-sizing: border-box; }