/* 风格 P · 阳光玻璃 · 首页工作台（0920 夜间任务①）
   只放首页特有的组件：网格、模块（薄玻璃／拾起态）、尺寸族密度、编辑态。顶栏、按钮、字阶、光场全部沿 styles.css。
   纪律同 styles.css：零裸色（只引 --b- 变量）、动效只引 --m- 变量与 m-* 关键帧、关键帧不在此定义。
   材质结论（首页玻璃模块网格方案 §0／§2）：
     静止模块＝薄玻璃：底 --b-tile-bg ＋ 发丝线 ＋ 顶部一线高光，模糊参数与顶栏同一套，没有镜面边、没有指针高光、没有透镜。
     拾起模块＝完整 Liquid Glass：底更透 --b-tile-bg-lift、135° 镜面边、指针高光、透镜位移、厚影。这是首页唯一的签名装置。
     模块内是薄覆层内容：墨字、中性填充、一枚黄主按钮（交给团团）；不放玻璃按钮，不做纸卡嵌玻璃。 */

/* ── 网格 ── */
.wb { padding: var(--b-sp-7) 0 0; }
.wb-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--b-wb-row); gap: var(--b-gutter); align-items: stretch; --wb-rows: 4; }
/* 编辑态多留一行空槽，网格自身把这一行算进高度，空槽不会溢到页脚 */
body.is-editing .wb-grid { grid-template-rows: repeat(var(--wb-rows), var(--b-wb-row)); }
.wb-slots { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--b-wb-row); gap: var(--b-gutter); pointer-events: none; opacity: 0; }
.wb-slots i { display: block; border-radius: var(--b-radius-card); background: var(--b-slot-fill); box-shadow: inset 0 0 0 1px var(--b-slot-line); }
.wb-ghost { position: absolute; z-index: 1; border-radius: var(--b-radius-card); box-shadow: inset 0 0 0 2px var(--b-text-1); opacity: .28; pointer-events: none; }

/* ── 模块：薄玻璃 ── */
.tile { position: relative; z-index: 2; isolation: isolate; min-width: 0; min-height: 0; display: flex; border-radius: var(--b-radius-card); background: var(--b-tile-bg);
  -webkit-backdrop-filter: blur(var(--b-glass-blur)) saturate(var(--b-glass-saturate)) brightness(var(--b-glass-brightness));
  backdrop-filter: blur(var(--b-glass-blur)) saturate(var(--b-glass-saturate)) brightness(var(--b-glass-brightness));
  box-shadow: var(--b-tile-shadow); --sx: 30%; --sy: -10%; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; box-shadow: inset 0 1px 0 var(--b-tile-glow), inset 0 0 0 1px var(--b-glass-line); }
.tile:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 3px; }
/* 拾起才出现的三样：镜面边、指针高光、透镜 */
.tile-chrome { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; }
.tc-edge { position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(var(--b-text-1) 0 0) content-box, linear-gradient(var(--b-text-1) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--b-text-1) 0 0) content-box, linear-gradient(var(--b-text-1) 0 0); mask-composite: exclude;
  background: linear-gradient(135deg, var(--b-glass-edge-a) 0%, var(--b-glass-edge-b) 28%, var(--b-glass-edge-c) 62%, var(--b-glass-edge-b) 100%); }
.tc-spec { position: absolute; inset: 1px; border-radius: inherit; overflow: hidden; background: radial-gradient(var(--b-spec-w) var(--b-spec-h) at var(--sx) var(--sy), var(--b-glass-spec), transparent 70%); }
.tile.is-lift { z-index: 6; background: var(--b-tile-bg-lift); box-shadow: var(--b-glass-shadow-thick), 0 22px 44px -18px var(--b-glass-caustic);
  -webkit-backdrop-filter: blur(var(--b-glass-blur-thick)) saturate(var(--b-glass-saturate)) brightness(var(--b-glass-brightness));
  backdrop-filter: blur(var(--b-glass-blur-thick)) saturate(var(--b-glass-saturate)) brightness(var(--b-glass-brightness)); }
.tile.is-lift .tile-chrome { opacity: 1; }
@supports (backdrop-filter: url(#lens)) {
  /* url() 必须在链尾（direction.md 第十节：链首会衰减其后的 blur） */
  .tile.is-lift { -webkit-backdrop-filter: blur(var(--b-glass-blur-thick)) saturate(var(--b-glass-saturate)) brightness(var(--b-glass-brightness)) url(#lens); backdrop-filter: blur(var(--b-glass-blur-thick)) saturate(var(--b-glass-saturate)) brightness(var(--b-glass-brightness)) url(#lens); }
}

/* ── 模块内容：薄覆层 ── */
.tile-body { position: relative; z-index: 2; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--b-sp-3); padding: var(--b-sp-5); border-radius: inherit; overflow: hidden; color: inherit; }
a.tile-body:hover .t-title { color: var(--b-text-1); }
a.tile-body:hover .kicker { color: var(--b-text-2); }
.t-main { display: grid; gap: var(--b-sp-2); align-content: start; min-width: 0; }
.t-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-sp-2); min-height: 17px; }
.t-meta { font-size: var(--b-fs-12); color: var(--b-text-3); white-space: nowrap; }
.t-hero { display: flex; align-items: baseline; gap: var(--b-sp-3); min-width: 0; }
.t-num { font-size: var(--b-fs-40); line-height: 1; font-weight: 700; letter-spacing: var(--b-ls-display); flex: none; }
.t-title { font-size: var(--b-fs-17); line-height: var(--b-lh-title); font-weight: 600; letter-spacing: var(--b-ls-title); color: var(--b-text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.t-title-lg { font-size: var(--b-fs-20); }
.t-sub { font-size: var(--b-fs-13); line-height: 1.5; color: var(--b-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-desc { font-size: var(--b-fs-13); line-height: 1.6; color: var(--b-text-2); }
.t-aside { display: none; min-width: 0; }
.t-more { display: none; min-height: 0; }
/* 进度轨道：绿做完成，黄不做状态 */
.t-track { display: block; height: 4px; border-radius: 2px; background: var(--b-neutral-tint); overflow: hidden; margin-top: var(--b-sp-1); }
.t-track-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--b-ok-fill); }
/* 封面是内容：压在玻璃上的图，不是第二层材质 */
.t-media { position: relative; display: block; margin: 0; border-radius: var(--b-radius-inner); overflow: hidden; background: var(--b-bg-card); box-shadow: inset 0 0 0 1px var(--b-line); aspect-ratio: 5 / 2; }
.t-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.t-media .t-title { position: absolute; left: var(--b-sp-3); bottom: var(--b-sp-3); max-width: calc(100% - var(--b-sp-6)); display: inline-block; height: 28px; line-height: 28px; padding: 0 var(--b-sp-3); border-radius: var(--b-radius-pill); color: var(--b-on-media); background: var(--b-media-dim); font-size: var(--b-fs-12); font-weight: 600; letter-spacing: var(--b-ls-cap); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* 内容层不放玻璃：实底压暗胶囊（同任务页 .cover-cap） */
.t-thumb { align-self: center; }
.t-thumb img { display: block; width: 120px; height: 96px; object-fit: cover; border-radius: var(--b-radius-inner); box-shadow: inset 0 0 0 1px var(--b-line); }

/* 今日行动的清单：与任务详情的交付清单同一套索引线语法 */
.t-stats { gap: var(--b-sp-6); }
.t-stat { display: inline-flex; align-items: baseline; gap: var(--b-sp-2); font-size: var(--b-fs-13); color: var(--b-text-2); }
.t-stat b { font-size: var(--b-fs-22); font-weight: 700; letter-spacing: var(--b-ls-title); color: var(--b-text-1); }
.t-items { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 0; overflow: hidden; -webkit-mask-image: linear-gradient(var(--b-text-1) calc(100% - 28px), transparent); mask-image: linear-gradient(var(--b-text-1) calc(100% - 28px), transparent); }
.t-item { display: grid; gap: var(--b-sp-1); padding: var(--b-sp-4) 0; border-top: 1px solid var(--b-line); }
.t-item-top { display: flex; align-items: center; justify-content: space-between; gap: var(--b-sp-2); }
.t-group { font-size: var(--b-fs-12); font-weight: 600; letter-spacing: var(--b-ls-cap); color: var(--b-text-3); }
.t-item-title { font-size: var(--b-fs-15); font-weight: 600; letter-spacing: var(--b-ls-title); }
.t-item-due { display: flex; flex-wrap: wrap; gap: var(--b-sp-1) var(--b-sp-3); font-size: var(--b-fs-13); color: var(--b-text-2); }
.t-item-due time { font-weight: 600; color: var(--b-text-1); }
.t-item-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--b-sp-3); margin-top: var(--b-sp-2); }
.t-eta { font-size: var(--b-fs-12); color: var(--b-text-3); white-space: nowrap; }
.t-btns { display: inline-flex; gap: var(--b-sp-2); }
.t-go { color: var(--b-text-1); font-weight: 600; }
.t-go svg { width: 14px; height: 14px; }

/* 团团助手模块 */
.t-assistant { flex-direction: row; align-items: center; gap: var(--b-sp-5); }
.t-pet { flex: none; width: 96px; height: 96px; object-fit: contain; filter: var(--b-mascot-shadow); }
.t-assistant .t-main { flex: 1; }
.t-assistant .t-title { font-size: var(--b-fs-20); }
.t-ask { gap: var(--b-sp-2); width: 380px; max-width: 100%; }
.t-form { display: flex; gap: var(--b-sp-2); }
.t-form .field { flex: 1; }
.t-form .btn { flex: none; }
.t-resume { display: inline-flex; align-items: center; gap: var(--b-sp-1); font-size: var(--b-fs-13); }
.t-resume b { font-weight: 600; color: var(--b-text-1); }
.t-dot { color: var(--b-text-3); margin: 0 2px; }

/* ── 尺寸族：内容随尺寸重组，不是放大（HIG「小尺寸一条信息，大尺寸加层次」）── */
/* 宽 ≥ 2：出现侧栏（统计、表单、缩略图） */
.tile[data-w="2"] .t-aside, .tile[data-w="3"] .t-aside, .tile[data-w="4"] .t-aside { display: flex; }
.tile[data-w="2"] .t-ask, .tile[data-w="3"] .t-ask, .tile[data-w="4"] .t-ask { display: grid; }
/* 宽 ≥ 3 的清单排双栏，别让大模块一半是空 */
.tile[data-w="3"] .t-items, .tile[data-w="4"] .t-items { grid-template-columns: 1fr 1fr; column-gap: var(--b-sp-7); }
.tile[data-w="3"] .t-item:nth-child(2), .tile[data-w="4"] .t-item:nth-child(2) { border-top-color: var(--b-line); }
/* 高 ≥ 2：出现清单（.t-more） */
.tile[data-h="2"] .t-more, .tile[data-h="3"] .t-more, .tile[data-h="4"] .t-more { display: grid; flex: 1; }
.tile[data-h="4"] .t-more { overflow: auto; -webkit-mask-image: none; mask-image: none; }
/* 宽 1 且高 ≥ 2：清单只留标题与状态 */
.tile[data-w="1"] .t-desc, .tile[data-w="1"] .t-item-foot, .tile[data-w="1"] .t-item-due .t-warn { display: none; }
.tile[data-w="1"] .t-item { padding: var(--b-sp-3) 0; }
/* 高 1 且宽 ≥ 2：横排——主信息在左、侧栏在右 */
.tile[data-h="1"]:not([data-w="1"]) .tile-body { flex-direction: row; align-items: center; }
.tile[data-h="1"]:not([data-w="1"]) .t-main { flex: 1; }
.tile[data-h="1"]:not([data-w="1"]) .t-aside { flex: none; }
.tile[data-h="1"]:not([data-w="1"]) .t-stats { flex-direction: column; gap: var(--b-sp-2); align-items: flex-start; }
/* 宽 ≥ 2 且高 ≥ 2：侧栏横排在主信息下方 */
.tile:not([data-h="1"]):not([data-w="1"]) .t-stats { flex-direction: row; align-items: baseline; }
/* 1×1：一条信息 */
.tile[data-w="1"][data-h="1"] .t-title { -webkit-line-clamp: 2; }
.tile[data-w="1"][data-h="1"] .t-sub { -webkit-line-clamp: 1; }
.tile[data-w="1"][data-h="1"] .t-track { display: block; }
/* 团团各尺寸 */
.tile[data-w="1"] .t-assistant { flex-direction: column; align-items: flex-start; gap: var(--b-sp-3); }
.tile[data-w="1"] .t-pet { width: 56px; height: 56px; }
.tile[data-w="1"] .t-assistant .t-sub { display: none; }
.tile[data-w="1"] .t-assistant .t-title { font-size: var(--b-fs-17); }
.tile:not([data-h="1"]) .t-assistant { flex-direction: column; align-items: flex-start; }
.tile:not([data-h="1"]):not([data-w="1"]) .t-assistant .t-ask { width: 100%; }
.tile:not([data-h="1"]):not([data-w="1"]) .t-pet { width: 128px; height: 128px; }
.tile[data-w="4"] .t-assistant .t-title { font-size: var(--b-fs-22); }
/* 大尺寸主数字升档 */
.tile[data-w="3"]:not([data-h="1"]) .t-num, .tile[data-w="4"]:not([data-h="1"]) .t-num { font-size: var(--b-fs-48); }
.tile[data-w="4"][data-h="4"] .t-title, .tile[data-w="4"][data-h="3"] .t-title { font-size: var(--b-fs-22); }
.tile:not([data-w="1"]):not([data-h="1"]) .t-media { aspect-ratio: auto; flex: 1; min-height: 120px; }
.tile:not([data-w="1"]):not([data-h="1"]) .t-media-tile .t-main { flex: 1; }
.tile[data-w="1"]:not([data-h="1"]) .t-thumb img, .tile[data-h="1"][data-w="2"] .t-thumb img { width: 96px; height: 76px; }

/* ── 编辑态 ── */
.tile-edit { display: none; }
body.is-editing .tile-edit { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; }
/* 把手（0920 回修：原来是墨色实心圆钮＋白字形，压在玻璃上像贴纸）：改成与顶栏、弹层同一门材质——厚玻璃小圆钮，
   发丝描边＋顶部一线高光＋薄影，字形是 1.5px 细线、次级墨色，悬停才升到主墨色。两枚把手同材质同尺寸，只差形状：移出是圆、改尺寸是圆角方（暗示它是个角） */
.t-remove, .t-resize { position: absolute; border: 0; padding: 0; font: inherit; width: var(--b-wb-handle); height: var(--b-wb-handle); border-radius: 50%; color: var(--b-text-2); pointer-events: auto; cursor: pointer;
  background: var(--b-glass-bg-thick);
  -webkit-backdrop-filter: blur(var(--b-glass-blur)) saturate(var(--b-glass-saturate));
  backdrop-filter: blur(var(--b-glass-blur)) saturate(var(--b-glass-saturate));
  box-shadow: inset 0 1px 0 var(--b-glass-glow), inset 0 0 0 1px var(--b-glass-line), 0 1px 2px var(--b-card-shadow), 0 6px 14px -6px var(--b-card-shadow-far); }
.t-remove:hover, .t-resize:hover, .t-remove:focus-visible, .t-resize:focus-visible { color: var(--b-text-1); box-shadow: inset 0 1px 0 var(--b-glass-glow), inset 0 0 0 1px var(--b-line-strong), 0 1px 2px var(--b-card-shadow), 0 8px 18px -6px var(--b-card-shadow-far); }
.t-remove:focus-visible, .t-resize:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 2px; }
.t-remove { left: -7px; top: -7px; }
.t-remove::before, .t-remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.t-remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
.t-resize { right: -7px; bottom: -7px; border-radius: var(--b-radius-chip); cursor: nwse-resize; }
/* 角形字形：一段带圆角的 L 形细线，贴在把手内侧的右下角 */
.t-resize::before { content: ""; position: absolute; right: 7px; bottom: 7px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-bottom-right-radius: 3px; }
.t-size { position: absolute; left: var(--b-sp-3); bottom: var(--b-sp-2); font-size: var(--b-fs-12); font-weight: 600; color: var(--b-text-3); letter-spacing: var(--b-ls-cap); }
.t-pin { position: absolute; right: var(--b-sp-3); top: var(--b-sp-2); font-size: var(--b-fs-12); color: var(--b-text-3); }
body.is-editing .tile { cursor: grab; }
body.is-editing .tile.is-lift { cursor: grabbing; }
body.is-editing .tile-body { pointer-events: none; user-select: none; }
body.is-editing .wb-slots { opacity: 1; }
.wb-grid.is-dragging .tile:not(.is-lift) { cursor: default; }
/* 编辑态顶栏：导航位换提示，滑杆换成两个按钮 */
.edit-hint { display: inline-flex; align-items: center; gap: var(--b-sp-2); font-size: var(--b-fs-13); color: var(--b-text-2); }
.edit-hint svg { width: 16px; height: 16px; color: var(--b-text-3); }
.edit-actions { display: inline-flex; gap: var(--b-sp-2); margin-left: var(--b-sp-2); }
body.is-editing .nav { display: none; }
body.is-editing [data-edit-toggle] { display: none; }
/* 已移出的模块托盘 */
.wb-tray { display: flex; align-items: center; gap: var(--b-sp-3); flex-wrap: wrap; margin-top: var(--b-sp-6); padding: var(--b-sp-4) var(--b-sp-5); border-radius: var(--b-radius-card); background: var(--b-slot-fill); box-shadow: inset 0 0 0 1px var(--b-slot-line); }
.wb-tray-list { display: flex; gap: var(--b-sp-2); flex-wrap: wrap; }
.wb-tray-list:empty::after { content: "—"; color: var(--b-text-3); font-size: var(--b-fs-13); }
.edit-actions .btn svg { width: 14px; height: 14px; stroke-width: 1.7; }

/* ── 工作台面板（0920 回修：更换模板／添加模块）──
   功能层玻璃 ④：材质照任务页弹层 .sheet-glass（厚底＋厚模糊＋厚影＋.glass 的镜面边与顶部高光），只是位置在右侧、贴顶栏之下，不遮罩、不盖网格。
   面板内的模板卡与目录行是纸（--b-bg-card ＋ 发丝线），玻璃只做壳——同任务页弹层里的 .course／.summary。 */
.wb-panel { position: fixed; top: calc(var(--b-topbar-h) + var(--b-sp-4)); right: var(--b-sp-4); bottom: var(--b-sp-4); z-index: var(--b-z-sheet); width: var(--b-sheet-w); max-width: calc(100vw - var(--b-sp-8)); display: flex; flex-direction: column; }
.wb-panel-glass { position: absolute; inset: 0; border-radius: var(--b-radius-sheet); background: var(--b-glass-bg-thick);
  -webkit-backdrop-filter: blur(var(--b-glass-blur-thick)) saturate(var(--b-glass-saturate)); backdrop-filter: blur(var(--b-glass-blur-thick)) saturate(var(--b-glass-saturate));
  box-shadow: var(--b-glass-shadow-thick); transform-origin: 100% 0; }
.wb-panel-body { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--b-sp-3); padding: var(--b-sp-5) var(--b-sp-6) var(--b-sp-6); }
.wb-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b-sp-3); }
.wb-panel-heading { display: grid; gap: 2px; }
.wb-panel-title { font-size: var(--b-fs-22); font-weight: 700; letter-spacing: var(--b-ls-title); line-height: var(--b-lh-title); }
.wb-panel-intro { font-size: var(--b-fs-13); line-height: 1.6; color: var(--b-text-2); }
.wb-panel-list { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: var(--b-sp-3); padding-bottom: var(--b-sp-2); }
.wb-panel-empty { padding: var(--b-sp-6) 0; text-align: center; font-size: var(--b-fs-13); color: var(--b-text-3); }
/* 筛选：同任务页的 .chips，选中的一枚用墨色（它是控件不是动作，不用黄） */
.wb-filter { margin-top: var(--b-sp-1); }
.wb-filter button[aria-pressed="true"] { color: var(--b-bg-card); background: var(--b-text-1); }
/* 模板卡：纸卡，左侧迷你布局预览（4 列、按模板行数）＋名称／适用人／模块清单；当前布局与某模板一致时描一圈墨线 */
.wb-tpl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--b-sp-4); align-items: start; width: 100%; padding: var(--b-sp-4); border: 0; border-radius: var(--b-radius-inner); background: var(--b-bg-card); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--b-line); }
.wb-tpl:hover { box-shadow: inset 0 0 0 1px var(--b-line-strong), 0 8px 20px -12px var(--b-card-shadow-far); }
.wb-tpl[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--b-text-1); }
.wb-tpl:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 2px; }
.wb-tpl-prev { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14px; gap: 3px; padding: var(--b-sp-2); border-radius: var(--b-radius-chip); background: var(--b-bg-inset); box-shadow: inset 0 0 0 1px var(--b-line); }
.wb-tpl-prev i { display: block; border-radius: 3px; background: var(--b-neutral-tint); box-shadow: inset 0 0 0 1px var(--b-line); }
.wb-tpl-prev i.is-pinned { background: var(--b-primary-tint); }
.wb-tpl-main { display: grid; gap: var(--b-sp-1); min-width: 0; }
.wb-tpl-name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-sp-2); font-size: var(--b-fs-15); font-weight: 600; letter-spacing: var(--b-ls-title); }
.wb-tpl-name .tag { flex: none; }
.wb-tpl-who { font-size: var(--b-fs-13); line-height: 1.5; color: var(--b-text-2); }
.wb-tpl-mods { font-size: var(--b-fs-12); line-height: 1.6; color: var(--b-text-3); }
.wb-tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--b-sp-2); margin-top: var(--b-sp-1); font-size: var(--b-fs-12); color: var(--b-text-3); }
.wb-tpl-foot .btn { pointer-events: none; }
/* 目录行：左侧真实缩略预览／名称／一句介绍／档位标签＋默认尺寸，右侧「添加」 */
.wb-pick { display: flex; align-items: center; gap: var(--b-sp-4); padding: var(--b-sp-4); border-radius: var(--b-radius-inner); background: var(--b-bg-card); box-shadow: inset 0 0 0 1px var(--b-line); }
/* 预览框：页底纸色（模块落到网格后就坐在这个底上）＋发丝线，里面是按比例缩小的真模块；宽固定 132，高按默认尺寸的长宽比由脚本给 */
.wb-pick-prev { position: relative; flex: none; width: 132px; overflow: hidden; border-radius: var(--b-radius-chip); background: var(--b-bg-canvas); box-shadow: inset 0 0 0 1px var(--b-line); }
.wb-prev-tile { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 1; }
.wb-prev-tile .tile-body { pointer-events: none; }
.wb-pick-main { flex: 1; min-width: 0; display: grid; gap: var(--b-sp-1); }
.wb-pick-name { font-size: var(--b-fs-15); font-weight: 600; letter-spacing: var(--b-ls-title); }
.wb-pick-intro { font-size: var(--b-fs-13); line-height: 1.5; color: var(--b-text-2); }
.wb-pick-meta { display: flex; align-items: center; gap: var(--b-sp-2); font-size: var(--b-fs-12); color: var(--b-text-3); }
.wb-pick .btn { flex: none; }
body.is-editing [data-open-panel][aria-expanded="true"] { background: var(--b-line-strong); }

/* ── 动效挂接（变量与关键帧在 motion.css）── */
.tile { transition: background-color var(--m-smooth-t) var(--m-spring-smooth), box-shadow var(--m-smooth-t) var(--m-spring-smooth), -webkit-backdrop-filter var(--m-smooth-t) var(--m-spring-smooth), backdrop-filter var(--m-smooth-t) var(--m-spring-smooth); }
.tile-chrome { transition: opacity var(--m-smooth-t) var(--m-spring-smooth); }
.tc-spec { transition: background-position var(--m-fast) linear; }
.wb-slots { transition: opacity var(--m-snappy-t) var(--m-spring-snappy); }
.wb-ghost { transition: left var(--m-snappy-t) var(--m-spring-snappy), top var(--m-snappy-t) var(--m-spring-snappy), width var(--m-snappy-t) var(--m-spring-snappy), height var(--m-snappy-t) var(--m-spring-snappy); }
.t-remove, .t-resize { transition: transform var(--m-snappy-t) var(--m-spring-snappy), background-color var(--m-snappy-t) var(--m-spring-snappy); }
.t-remove:hover, .t-resize:hover { transform: scale(1.12); }
.t-track-fill { transition: width var(--m-smooth-t) var(--m-spring-smooth); }
body.is-editing .tile-edit > * { animation: m-materialize var(--m-snappy-t) var(--m-spring-snappy) both; }
.tile.m-enter { animation: m-enter var(--m-smooth-t) var(--m-spring-smooth) both; }
.wb-tray:not([hidden]) { animation: m-rise var(--m-smooth-t) var(--m-spring-smooth) both; }
.wb-tray-list .btn { animation: m-materialize var(--m-snappy-t) var(--m-spring-snappy) both; }
/* 面板：玻璃先凝结（右上角为原点），内容随后上浮；收起反放 */
.wb-panel.is-in .wb-panel-glass { animation: m-materialize var(--m-smooth-t) var(--m-spring-smooth) both; }
.wb-panel.is-in .wb-panel-body { animation: m-rise var(--m-smooth-t) var(--m-spring-smooth) both; animation-delay: 90ms; }
.wb-panel.is-out .wb-panel-glass { animation: m-materialize var(--m-snappy-t) var(--m-spring-snappy) reverse both; }
.wb-panel.is-out .wb-panel-body { animation: m-rise var(--m-fast) var(--m-ease-out) reverse both; }
.wb-panel-list > * { animation: m-rise var(--m-snappy-t) var(--m-spring-snappy) both; }
.wb-tpl, .wb-pick, .wb-filter button { transition: box-shadow var(--m-snappy-t) var(--m-spring-snappy), background-color var(--m-snappy-t) var(--m-spring-snappy), color var(--m-snappy-t) var(--m-spring-snappy); }

/* ── 降级 ── */
@media (prefers-reduced-transparency: reduce) {
  .tile, .tile.is-lift, .t-remove, .t-resize, .wb-panel-glass { background: var(--b-glass-frost); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tc-spec { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.m-enter, body.is-editing .tile-edit > *, .wb-tray:not([hidden]), .wb-tray-list .btn, .wb-panel.is-in .wb-panel-glass, .wb-panel.is-in .wb-panel-body, .wb-panel.is-out .wb-panel-glass, .wb-panel.is-out .wb-panel-body, .wb-panel-list > * { animation: none; }
  .tile, .tile-chrome, .wb-ghost, .t-track-fill, .wb-tpl, .wb-pick, .wb-filter button { transition: none; }
}
/* 收窄：两列，宽模块钳到 2 列（位置由脚本按两列重排） */
@media (max-width: 1100px) {
  .wb-grid, .wb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-ask { width: 100%; }
}