/* UIOPT-R1 · 视觉契约 v1.1（tmp/CONTRACT-v1-spatial.md）· tokens + chrome 皮肤层
   挂载序最后，仅覆盖皮肤值（颜色/圆角/阴影），不动结构/布局/JS。
   圆角裁定（蒋哥 09-20）：工作台图片居多 → 卡 8，禁大倒角。 */

:root {
  /* §1 表面与颜色 */
  --canvas-bg: #E9EAEC;
  --card-bg: #F7F8F9;
  --card-tint-blue: #2AB7F0;
  --card-tint-peach: #F2C299;
  --card-tint-green: #23A649;
  --ink-1: #141414;
  --ink-2: #6E6E6E;
  --ink-3: #A8A8A8;
  --accent-marker: #F2E93B;
  --accent-ui: #6E56CF;
  --surface: #FFFFFF;
  --surface-soft: rgba(255, 255, 255, .92);
  --hairline: rgba(20, 20, 20, .06);
  --ctl-hover: #F1F2F4;
  --chip-bg: #ECEEF1;
  /* §2 圆角（v1.1：卡 8 不用大倒角） */
  --r-ctl: 6px;
  --r-card: 8px;
  --r-pop: 10px;
  --r-pill: 999px;
  /* §3 阴影：图片保留可见像素轮廓，颜色随主题，用户可覆写完整filter。 */
  --sh-image-color: color-mix(in srgb, var(--u6-ink, var(--ink-1)) 26%, transparent);
  --sh-image-rest: drop-shadow(0 8px 16px var(--sh-image-color));
  --sh-rest: 0 1px 2px rgba(16, 18, 20, .04), 0 8px 24px rgba(16, 18, 20, .06);
  --sh-lift: 0 2px 4px rgba(16, 18, 20, .06), 0 16px 40px rgba(16, 18, 20, .10);
  --sh-pop: 0 4px 8px rgba(16, 18, 20, .06), 0 24px 64px rgba(16, 18, 20, .12);
}

/* 基础表面：全应用冷灰桌面 */
:root, body { background: var(--canvas-bg); color: var(--ink-1); }
.app-frame { background: var(--canvas-bg); }

/* 顶栏 → 面包屑轻 chrome */
.app-header { background: var(--surface-soft); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.brand-mark { background: var(--ink-1); color: #fff; border-radius: var(--r-ctl); }
.crumb { color: var(--ink-2); }
.crumb:hover, .root-crumb:hover { color: var(--ink-1); }
.project-title { color: var(--ink-1); }
.sync { color: var(--ink-2); }
.icon-button:hover { background: var(--ctl-hover); }

/* 入口页 → 亮冷灰（裁决①）：封面暗壳由 5 个语义变量控制，变量级翻转，下游全部跟随 */
:root {
  --project-shell: var(--canvas-bg);
  --project-shell-deep: var(--surface-soft);
  --project-shell-line: var(--hairline);
  --project-shell-text: var(--ink-1);
  --project-shell-muted: var(--ink-2);
  --project-band: #FFFFFF;   /* 卡题纸带=纸白（勿翻暗：卡脚与主按钮 hover 都吃它） */
  --project-band-text: var(--ink-1);
}
.projects-page { background: var(--canvas-bg); }
.app-frame:has(.projects-page) .brand-mark { background: var(--ink-1); color: #fff; }
.app-frame:has(.projects-page) .avatar.owner { background: var(--ink-1); color: #fff; }
.projects-heading .primary-button { background: var(--accent-ui); color: #fff; border-color: transparent; border-radius: var(--r-ctl); }
.projects-heading .primary-button:hover { background: #5B45B8; color: #fff; }
.project-search { background: var(--chip-bg); border-color: transparent; color: var(--ink-2); }
.project-search input { color: var(--ink-1); }
.project-search input::placeholder { color: var(--ink-3); }
.project-daily-line::before { background: var(--ink-3); }
.app-frame:has(.projects-page) .crumb:hover,
.app-frame:has(.projects-page) .icon-button:hover { background: var(--ctl-hover); color: var(--ink-1); }
.projects-heading-aside-head { color: var(--ink-3); }
.eyebrow { color: var(--ink-3); }
.projects-heading h1 { color: var(--ink-1); }
.primary-button { background: var(--accent-ui); border-radius: var(--r-ctl); }
.project-filters button { color: var(--ink-2); }
.project-filters button.active { color: var(--ink-1); border-bottom-color: var(--accent-ui); }
.project-card { background: var(--card-bg); border: 0; border-radius: var(--r-card); box-shadow: var(--sh-rest); }
.project-card:hover { box-shadow: var(--sh-lift); border-color: transparent; }
.project-symbol { background: var(--chip-bg); color: var(--ink-1); border-radius: var(--r-card); }
.project-state { color: var(--ink-2); }
.project-meta span { background: var(--chip-bg); color: var(--ink-2); border-radius: 4px; }
.project-card.featured { background: var(--accent-ui); color: #fff; }
.project-card.featured .project-symbol { background: rgba(255, 255, 255, .16); color: #fff; }
.project-card.featured .project-meta span { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); }
.project-card.featured .project-state { color: rgba(255, 255, 255, .75); }
.project-preview i { background: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .5); }

/* 画布：冷灰桌面，无纹理无网格 */
.canvas-stage { background-color: var(--canvas-bg); background-image: none; }
.canvas-label span { background: var(--surface-soft); color: var(--ink-2); border-radius: var(--r-ctl); }

/* 卡：纸，无描边，倒角 8（图片居多裁定） */
.canvas-card { background: var(--card-bg); border: 0; border-radius: var(--r-card); box-shadow: var(--sh-rest); }
/* W1-AV 直角裁定 → 契约 v1.1（R2FIX-P1 重组，圆角+overflow 落在「带背景的那一层」，内层只跟随=0）：
   带背景层 = .asset-preview-frame（CAD 黑底 #101311 即在它身上，原缺裁→黑角）/ .asset-video-shell（黑底）/
   .asset-generated-preview（独立态有底）/ .canvas-real-image（单图 #e6e6e0）/ .knowledge-object（纸底）。
   内层跟随清零 = frame 内 preview、video-shell 内 poster/video。 */
.canvas-card.imported-canvas-object .asset-preview-frame,
.canvas-card.imported-canvas-object .asset-video-shell,
.canvas-card.imported-canvas-object .asset-generated-preview,
.canvas-card.imported-canvas-object .canvas-real-image,
.canvas-card.imported-canvas-object .knowledge-object {
  border-radius: var(--r-card);
  overflow: hidden;
}
.canvas-card.imported-canvas-object .asset-preview-frame .asset-real-preview,
.canvas-card.imported-canvas-object .asset-preview-frame .asset-generated-preview,
.canvas-card.imported-canvas-object .asset-video-shell .asset-video-poster,
.canvas-card.imported-canvas-object .asset-video-shell .asset-video { border-radius: 0; }
/* 其余卡内 img（组图成员、集合图等）自身圆角；被上面 frame 内清零规则按特异度覆盖 */
.canvas-card.imported-canvas-object img { border-radius: var(--r-card); }
.canvas-card.imported-canvas-object.selected { outline-color: rgba(110, 86, 207, .7); }
.material-thumb { border-radius: var(--r-ctl); }
.canvas-card.selected { border: 0; box-shadow: 0 0 0 2px var(--accent-ui), var(--sh-lift); }
.canvas-card.connect-source { box-shadow: 0 0 0 3px rgba(110, 86, 207, .25), var(--sh-rest); }
.canvas-card.connect-target { outline-color: var(--accent-ui); }
.canvas-card .conn-handle { background: var(--surface); border-color: var(--ink-3); color: var(--ink-1); }
.card-kind { background: var(--chip-bg); color: var(--ink-2); border-radius: 4px; }
.card-meta { border-top-color: var(--hairline); color: var(--ink-3); }

/* 卡上浮动操作条 → 浅色弹层 */
.card-actions { background: var(--surface); border-radius: var(--r-pop); box-shadow: var(--sh-pop); }
.card-actions button { color: var(--ink-2); border-radius: var(--r-ctl); }
.card-actions button:hover { background: var(--ctl-hover); color: var(--ink-1); }

/* 底部工具栏 → 白胶囊（Allume 式；单色灰，激活才紫 = 裁决②） */
.canvas-toolbar { background: var(--surface-soft); backdrop-filter: blur(14px); border-radius: var(--r-pill); box-shadow: var(--sh-pop); }
.canvas-toolbar button { color: var(--ink-2); border-radius: var(--r-pill); }
.canvas-toolbar button:hover { background: var(--ctl-hover); color: var(--ink-1); }
.canvas-toolbar button.active { background: rgba(110, 86, 207, .12); color: var(--accent-ui); }

/* zoom 控件 → 胶囊 */
.zoom-control { background: var(--surface-soft); backdrop-filter: blur(14px); border: 0; border-radius: var(--r-pill); box-shadow: var(--sh-rest); }
.zoom-control button, .zoom-control span { color: var(--ink-2); }
.zoom-control button:hover:not(:disabled) { color: var(--ink-1); }

/* 侧栏/rail → 中性浅灰（结构去留属 R3，本轮只去绿味） */
.left-rail { background: #F4F5F7; border-right: 1px solid var(--hairline); }
.left-rail button { color: var(--ink-2); }
.left-rail button:hover, .left-rail button.active { background: rgba(110, 86, 207, .12); color: var(--accent-ui); }
.sidebar { background: #F4F5F7; border-right: 1px solid var(--hairline); }
.sidebar-tabs button.active { color: var(--accent-ui); border-bottom-color: var(--accent-ui); }
.sidebar-search { background: var(--chip-bg); border-color: transparent; color: var(--ink-3); border-radius: var(--r-ctl); }

/* 杂项 chrome：绿系 → 紫/中性 */
.slider-row input { accent-color: var(--accent-ui); }
.generate-button { background: var(--accent-ui); border-radius: var(--r-ctl); }
.editor-chip { background: var(--accent-ui); border-radius: 4px; }
.toast { background: var(--ink-1); border-radius: var(--r-pill); box-shadow: var(--sh-pop); }
.group-frame { border-color: var(--ink-3); }
.group-frame span { background: var(--ink-2); }
.connections path { stroke: var(--ink-3); }
.connections path.manual { stroke: var(--accent-ui); }

/* R2FIX-P1 对齐段（契约刻度=卡 8，本文件末尾唯一落点）：旧值 9/7 统一 8。
   group-layer 旧 9px（refinement 1573）、collection 内层旧 7px（232/239）。 */
.imported-canvas-object .group-layer { border-radius: var(--r-card); }
.collection-stack > div,
.collection-image { border-radius: var(--r-card); }

/* R2FIX-P1 表卡面：.u2b-tbl-card 自带底色 #fdfcf8 且撑满壳（3402 已 overflow:hidden），
   圆角落在带背景层自身（契约卡 8）。普通壳其他面均透明/不触壳角，不动。 */
.canvas-card.table-card .u2b-tbl-card { border-radius: var(--r-card); }