/* ============================================================================
 * v4 基础样式 —— 移植自 DC 源 <helmet><style>（行 15-35），但【作用域收敛到 .zzm-v4】
 *   旧 index.css 已有全局滚动条/selection/背景；为避免过渡期与旧 App/shadcn 打架，
 *   v4 的画布底、朱色 selection、占位符灰、滚动条一律限定在 .zzm-v4 子树内。
 *   暗色走 DC 的 invert 反色 trick（data-theme=dark），img/video/canvas 反反色还原。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 * ========================================================================== */

.zzm-v4 {
  background: var(--zzm-paper);
  color: var(--zzm-ink);
  font-family: var(--zzm-font);
  -webkit-font-smoothing: antialiased;
}

.zzm-v4 ::selection { background: rgba(166, 64, 47, .16); }
.zzm-v4 input::placeholder { color: #B4B4AF; }

.zzm-v4 ::-webkit-scrollbar { width: 10px; height: 10px; }
.zzm-v4 ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .14);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.zzm-v4 ::-webkit-scrollbar-track { background: transparent; }

/* 暗色反色 trick（DC 行 32-35）：整树反相 + 色相翻转，媒体/画布二次反相还原真色 */
.zzm-v4[data-theme="dark"] { filter: invert(1) hue-rotate(180deg); }
.zzm-v4[data-theme="dark"] img,
.zzm-v4[data-theme="dark"] video,
.zzm-v4[data-theme="dark"] canvas { filter: invert(1) hue-rotate(180deg); }
.zzm-v4[data-theme="dark"] .zzm-splash { filter: invert(1) hue-rotate(180deg); }
.zzm-v4[data-theme="dark"] .zzm-splash canvas { filter: none; }

/* ── 悬停助手类（还原 DC 的 style-hover，用真伪类而非 JS，作用域 .zzm-v4）── */
.zzm-v4 .zzm-hovercard { transition: all .16s ease; }
.zzm-v4 .zzm-hovercard:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 0, 0, .3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.zzm-v4 .zzm-pill { transition: all .15s ease; }
.zzm-v4 .zzm-pill:hover { border-color: rgba(0, 0, 0, .35) !important; }
.zzm-v4 .zzm-node { transition: opacity .15s ease; }
.zzm-v4 .zzm-node:hover { opacity: .75; }
.zzm-v4 .zzm-dark-btn:hover { background: #000000 !important; }


/* ── 侧栏/通用悬停（app-shell/Sidebars 及各屏族共用；命名=行为，勿按屏命名）── */
.zzm-v4 .zzm-navbtn:hover { background: rgba(0, 0, 0, .07) !important; }
.zzm-v4 .zzm-iconbtn:hover { background: rgba(0, 0, 0, .07); }
.zzm-v4 .zzm-userfoot:hover { background: rgba(0, 0, 0, .045); border-color: rgba(0, 0, 0, .07) !important; }
.zzm-v4 .zzm-ghostline:hover { border-color: rgba(0, 0, 0, .3) !important; color: #161616; }
.zzm-v4 .zzm-ghostnav:hover { background: rgba(0, 0, 0, .07); color: #161616; }
.zzm-v4 .zzm-ghostnav-lite:hover { background: rgba(0, 0, 0, .07); color: #161616; }
.zzm-v4 .zzm-fadelink:hover { color: #8B8B85; }
/* 灰字文字链（components/v4/Breadcrumb 消费）：基色随父容器继承——消费方禁写内联 color，否则压死 :hover；
   键盘焦点用全站统一的朱色光晕（与 .zzm-btn 同款），不落回浏览器默认环 */
.zzm-v4 .zzm-inklink { color: inherit; transition: color .16s ease; }
.zzm-v4 .zzm-inklink:hover { color: #161616; }
.zzm-v4 .zzm-inklink:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(166, 64, 47, .2); }
.zzm-v4 .zzm-lift { transition: transform .16s ease; }
.zzm-v4 .zzm-lift:hover { transform: translateY(-2px); }
.zzm-v4 .zzm-fade86:hover { opacity: .86; }
.zzm-v4 .zzm-fade88:hover { opacity: .88; }
.zzm-v4 .zzm-rowhover:hover { background: rgba(0, 0, 0, .04); }
.zzm-v4 .zzm-rowhover-lite:hover { background: rgba(0, 0, 0, .03); }
.zzm-v4 .zzm-hairbtn:hover { border-color: #161616 !important; color: #161616; }
.zzm-v4 .zzm-accentlink:hover { text-decoration-color: var(--zzm-accent, #A6402F) !important; color: var(--zzm-accent, #A6402F); }
.zzm-v4 input.zzm-input:focus, .zzm-v4 textarea.zzm-input:focus { border-color: #161616 !important; }
.zzm-v4 input.zzm-input-accent:focus { border-color: var(--zzm-accent, #A6402F) !important; }

/* ── 骨架屏（数据加载占位；components/v4/Skeleton 消费）：纸灰底 + 微光扫过 ── */
.zzm-v4 .zzm-skel {
  position: relative;
  overflow: hidden;
  background: #EFEFEC;
  border-radius: 8px;
}
.zzm-v4 .zzm-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: zzmShimmer 1.4s ease infinite;
}