/* 窗口布局演示组件的 DOM 铬层样式。
   配色与尺寸逐项取自真机深色主题 token 与各 widget 源码常数（清单见 src/layout_consts_audit.md）。

   文字为什么全在 DOM：DOM 光栅化器有 ClearType 子像素渲染，canvas 只有灰度抗锯齿。
   本组件窗格里的中文标签比 RRG 还密，退回 canvas 画字会整屏糊一档。 */

.lw { overflow: hidden; }
.lw__scene {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  font-family: 'Kc Noto SC', 'Microsoft YaHei', sans-serif;
}
.lw__win {
  position: absolute; border-radius: 8px; overflow: hidden;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .55), 0 0 0 1px rgba(45, 52, 61, .55);
}
.lw__win--sub { z-index: 10; transform-origin: 50% 50%; box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(95, 146, 255, .28); }

.lw__cv { position: absolute; left: 0; top: 0; display: block; }
.lw__panes, .lw__txt { position: absolute; inset: 0; pointer-events: none; }

/* 窗格边框：常态无边（真机 PaneHost 是纯内容），只有活动格与落点格有。
   真机那 2px 是**物理像素**（PixelBoxBorder.physicalWidth），换算成场景内的 CSS 长度
   要除掉「场景缩放 × dpr」，由组件每帧写进 --lw-px2；写死 2px 在 dpr=2 下会粗一倍。
   内发光是 sigma=8 的高斯，CSS blur 半径约等于 2σ，故取 16px 而非 8px */
.lw__pane { position: absolute; box-sizing: border-box; overflow: hidden; }
/* 热力/轮动窗格嵌的是功能区同一套 live 组件，铺满格子、自己按场景等比缩小 */
.lw__embed,
.lw__embed.hm,
.lw__embed.rrg { position: absolute; inset: 0; overflow: hidden; pointer-events: auto; }
.lw__pane.is-active {
  border: var(--lw-px2, 2px) solid #5F92FF;
  box-shadow: inset 0 0 16px rgba(95, 146, 255, .45);
}
.lw__pane.is-drop {
  border: var(--lw-px2, 2px) solid #5F92FF; background: rgba(95, 146, 255, .06);
}

/* ── 窗格内文字 ── */
.lw__ptxt { position: absolute; white-space: nowrap; line-height: 1; color: #EEF1F5; }
.lw__ptxt.is-ttl { font-size: 12px; font-weight: 600; }
.lw__ptxt.is-ax { font-size: 10px; color: #B6BFC9; font-variant-numeric: tabular-nums; }
.lw__ptxt.is-nm { font-size: 12px; }
.lw__ptxt.is-cd { font-size: 10px; color: rgba(182, 191, 201, .62); font-variant-numeric: tabular-nums; }
.lw__ptxt.is-val { font-size: 12px; color: #B6BFC9; font-variant-numeric: tabular-nums; }
.lw__ptxt.is-up { font-size: 12px; color: #EF4444; font-variant-numeric: tabular-nums; }
/* 跌色取全局默认 ChartDefaults.candleDownBody #22C55E（#22A867 只是 RRG 页的局部覆盖） */
.lw__ptxt.is-dn { font-size: 12px; color: #22C55E; font-variant-numeric: tabular-nums; }
.lw__ptxt.is-hd { font-size: 10px; color: rgba(220, 220, 230, .95); }
.lw__ptxt.is-chip { font-size: 10px; color: #5F92FF; }
/* K 线窗格指标 legend：色=真机指标调色板（l1=MA5/DIF、l2=MA10/DEA、l3=MA20、vp=量价分布） */
.lw__ptxt.is-ind { font-size: 10px; color: #B6BFC9; }
.lw__ptxt.is-l1 { font-size: 10px; color: #FBBF24; font-variant-numeric: tabular-nums; }
.lw__ptxt.is-l2 { font-size: 10px; color: #60A5FA; font-variant-numeric: tabular-nums; }
.lw__ptxt.is-l3 { font-size: 10px; color: #A78BFA; font-variant-numeric: tabular-nums; }
.lw__ptxt.is-vp { font-size: 10px; color: #3DA5FF; }
/* 空窗格占位：bodyMedium 14 + 32px crop_din，文字与图标**同色** outline #2D343D */
.lw__ptxt.is-ph { font-size: 14px; line-height: 20px; color: #2D343D; }
.lw__ptxt.is-ph-ico { font-family: 'Kc Symbols'; font-size: 32px; color: #2D343D; }
.lw__ptxt.is-q-leading { font-size: 10px; color: rgba(255, 0, 0, .85); }
.lw__ptxt.is-q-improving { font-size: 10px; color: rgba(0, 255, 0, .85); }
.lw__ptxt.is-q-lagging { font-size: 10px; color: rgba(204, 51, 255, .85); }
.lw__ptxt.is-q-weakening { font-size: 10px; color: rgba(51, 153, 255, .85); }

/* ── 布局选择器弹窗：Material 3 Dialog，surfaceContainerHigh + 圆角 28 ── */
.lw__scrim {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .54);
}
/* 真机 M3 Dialog 的 shadowColor 是 transparent——不画投影，靠遮罩分层 */
.lw__dlg {
  width: 600px; max-height: 738px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: #1B2027; border-radius: 28px; color: #EEF1F5;
}
.lw__dlghd { display: flex; align-items: center; gap: 8px; padding: 16px 12px 12px 16px; }
.lw__dlghd .lw__ico { color: #5F92FF; }
.lw__dlgttl { font-size: 12px; font-weight: 600; line-height: 16px; }
.lw__grow { flex: 1 1 auto; }
.lw__iconbtn {
  width: 40px; height: 40px; flex: none; border-radius: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #B6BFC9;
}
.lw__hr { height: 1px; flex: none; background: #1B2027; }   /* Divider = outlineVariant */
.lw__dlgbody { flex: 1 1 auto; overflow: hidden auto; padding: 8px 16px; }
.lw__prow { display: flex; padding: 4px 0; }
/* labelSmall 是 10/14 **w500**，落 400 会整体偏细一档 */
.lw__plab {
  width: 52px; flex: none; padding-top: 8px;
  font-size: 10px; line-height: 14px; font-weight: 500; color: #B6BFC9;
}
.lw__pwrap { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 8px; }
.lw__thumb {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer;
}
.lw__thumbbox {
  width: 62px; height: 42px; box-sizing: border-box; padding: 4px;
  background: #202730; border: 1px solid #1B2027; border-radius: 8px;
}
.lw__diag { position: relative; }
.lw__diag > i {
  position: absolute; box-sizing: border-box; border-radius: 2px;
  background: rgba(95, 146, 255, .32); border: 1px solid rgba(95, 146, 255, .78);
}
.lw__thumblb {
  width: 62px; font-size: 10px; line-height: 14px; font-weight: 500; color: #B6BFC9;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lw__fillbar { display: flex; align-items: center; padding: 12px 16px 8px; }
.lw__syncbar { display: flex; align-items: center; padding: 0 16px 4px; }
.lw__fldlb { font-size: 12px; font-weight: 500; line-height: 16px; }
/* M3 SegmentedButton：药丸外形，选中态是 secondaryContainer 实底而非蓝调半透明 */
.lw__seg {
  display: flex; margin-left: 12px; border: 1px solid #2D343D;
  border-radius: 999px; overflow: hidden;
}
/* 按钮类文字走 labelLarge = 14/20 **w500**，只写字号会落到 400 细一档 */
.lw__segb {
  padding: 4px 14px; border: 0; background: none; cursor: pointer;
  font-size: 14px; line-height: 20px; font-weight: 500; color: #EEF1F5; font-family: inherit;
}
.lw__segb + .lw__segb { border-left: 1px solid #2D343D; }
.lw__segb.is-on { background: #B6BFC9; color: #0E1218; }
.lw__chips { display: flex; gap: 8px; margin-left: 12px; }
/* M3 FilterChip：选中带勾选标 + secondaryContainer 实底 */
.lw__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 8px; border: 1px solid #2D343D;
  font-size: 12px; line-height: 16px; color: #B6BFC9;
}
.lw__chip.is-on { background: #B6BFC9; color: #0E1218; border-color: transparent; }
.lw__chip.is-on::before {
  content: ''; width: 12px; height: 7px; flex: none;
  border-left: 1.6px solid #0E1218; border-bottom: 1.6px solid #0E1218;
  transform: rotate(-45deg) translate(1px, -1px);
}
.lw__dlgft { display: flex; align-items: center; gap: 8px; padding: 4px 12px 12px 16px; }
.lw__hint { font-size: 12px; line-height: 16px; color: #B6BFC9; }
.lw__tbtn {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: #5F92FF; font-size: 14px; font-weight: 500; font-family: inherit;
}
.lw__ico { font-style: normal; line-height: 1; display: block; }

/* ── 自定义排版编辑器页 ── */
.lw__ed {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; background: #0E1218;
}
.lw__edbar {
  height: 48px; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; background: #151A22; border-bottom: 1px solid #1B2027;
}
/* 真机 Outlined/Filled 的内边距 16、labelLarge 14 → 实高约 44；前景色分别是 primary 与 onPrimary */
.lw__obtn, .lw__fbtn {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: 8px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.lw__obtn { border: 1px solid #2D343D; background: none; color: #5F92FF; }
.lw__fbtn { border: 1px solid transparent; background: #5F92FF; color: #0E1218; }
.lw__tpl {
  height: 110px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; box-sizing: border-box;
  background: #181D25; border-bottom: 1px solid #1B2027;
}
.lw__tplc {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; border: 1px solid #1B2027; border-radius: 8px;
}
.lw__tplc.is-on { background: rgba(10, 33, 96, .4); border: 1.5px solid #5F92FF; }
.lw__tplthumb { width: 96px; height: 56px; }
.lw__tpln { font-size: 10px; line-height: 14px; font-weight: 500; color: #EEF1F5; }
.lw__tplc.is-on .lw__tpln { color: #5F92FF; }
/* 画布：0.05 步长网格 + 0.5px 线，与真机 _gridStep / strokeWidth 一致 */
.lw__edcv {
  position: relative; flex: 1 1 auto; margin: 12px; border-radius: 8px;
  background-color: #0B0E14; border: 1px solid #1B2027; overflow: hidden;
  /* 线画在每格的**末端**：真机从第 1 格起画（x=step 开始），不画 x=0/y=0 那两条 */
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(5% - .5px), rgba(27, 32, 39, .25) calc(5% - .5px) 5%),
    repeating-linear-gradient(to bottom, transparent 0 calc(5% - .5px), rgba(27, 32, 39, .25) calc(5% - .5px) 5%);
}
.lw__slot {
  position: absolute; box-sizing: border-box; border-radius: 8px;
  border: 1px solid rgba(45, 52, 61, .6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lw__slot::before {
  content: ''; position: absolute; inset: 0; border-radius: 7px;
  background: var(--sc); opacity: .18;
}
.lw__slot.is-sel { border: 2px solid #5F92FF; }
.lw__slotlb { position: relative; font-size: 14px; font-weight: 700; color: var(--sc); opacity: .95; }
.lw__slotsz { position: relative; margin-top: 4px; font-size: 10px; font-weight: 500; color: #B6BFC9; }
.lw__slotdel {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  display: none; align-items: center; justify-content: center;
  border-radius: 12px; background: #DC2626; color: #FFFFFF;   /* error / onError */
}
.lw__slot.is-sel .lw__slotdel { display: flex; }
/* 辅助线压在槽位之上：吸附点常与槽位边重合，压在下面就等于没画。
   色取真机 tertiary 的 SDK 派生值（= secondary #B6BFC9），不是主色蓝 */
.lw__guide { position: absolute; z-index: 5; background: #B6BFC9; display: none; }
.lw__guide--v { top: 0; bottom: 0; width: 1px; }
.lw__guide--h { left: 0; right: 0; height: 1px; }

/* ── 自选侧栏（favorites_sidebar + resizable_sidebar 1:1）──
   壳：320 宽（内含右缘 4px 拖拽手柄）+ 1px PixelVerticalDivider（这里用右边框承担）。
   头：surfaceContainerLow 底、8/6 内边距、13px 粗体标题、分组下拉、28×28 图标钮。
   表：列集=真机 sidebar 预设 name/close/pct_chg，行高 32（TableStyleTokens.rowHeight）。 */
.lw__side {
  position: absolute; bottom: 0; z-index: 15; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #0E1218; border-right: 1px solid #1B2027;
}
.lw__sidehd {
  flex: none; display: flex; align-items: center;
  padding: 6px 8px; background: #151A22;
  border-bottom: 1px solid rgba(27, 32, 39, .5);
}
.lw__sidettl { flex: none; padding: 0 4px; font-size: 13px; font-weight: 700; color: #EEF1F5; }
.lw__sidedd {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px;
  font-size: 12px; color: #EEF1F5; cursor: default;
}
.lw__sidecaret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #B6BFC9;
}
.lw__sideacts { display: inline-flex; gap: 2px; }
.lw__sideibtn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #B6BFC9;
}
.lw__sidecols {
  flex: none; display: grid; grid-template-columns: 1fr 72px 80px; gap: 4px;
  padding: 0 8px; height: 28px; align-items: center;
  font-size: 11px; color: #B6BFC9; border-bottom: 1px solid rgba(27, 32, 39, .6);
}
.lw__sidecols .is-r { text-align: right; }
.lw__sidebody { flex: 1 1 auto; overflow: hidden; }
.lw__siderow {
  display: grid; grid-template-columns: 1fr 72px 80px; gap: 4px;
  padding: 0 8px; height: 32px; align-items: center; cursor: pointer;
}
.lw__siderow:hover { background: rgba(255, 255, 255, .03); }
.lw__siderow.is-cur { background: rgba(95, 146, 255, .10); }
.lw__sidenm { font-size: 12px; color: #EEF1F5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw__sidepx, .lw__sidepct { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.lw__sidepx.is-up, .lw__sidepct.is-up { color: #EF4444; }
.lw__sidepx.is-dn, .lw__sidepct.is-dn { color: #22C55E; }
.lw__sidehandle { position: absolute; right: -1px; top: 0; bottom: 0; width: 4px; }

/* ── M3 AlertDialog（选择组件 / 添加模板命名，_showComponentPicker / _showNameInputDialog）──
   surfaceContainerHigh 底、圆角 28、headlineSmall 标题、右对齐动作区——与真机 showDialog 同族 */
.lw__adlg {
  min-width: 280px; max-width: 460px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: #1B2027; border-radius: 28px; color: #EEF1F5;
}
.lw__adlgttl { flex: none; padding: 24px 24px 16px; font-size: 24px; line-height: 32px; }
.lw__adlgbody { flex: 1 1 auto; overflow: hidden auto; width: 360px; box-sizing: border-box; max-height: 520px; }
.lw__adlgbody--pad { padding: 4px 24px 8px; width: 340px; max-height: none; }
.lw__adlgft { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 8px 24px 24px; }
/* dense 双行 ListTile：高 60、前导图标 24、主行 bodyLarge 16、副行 bodySmall 12 */
.lw__crow {
  display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 16px;
  cursor: pointer;
}
.lw__crow:hover { background: rgba(255, 255, 255, .04); }
.lw__crow > .lw__ico { color: #B6BFC9; }
.lw__crowtx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lw__crowlb { font-size: 16px; line-height: 24px; color: #EEF1F5; }
.lw__crowkey { font-size: 12px; line-height: 16px; color: #B6BFC9; }
.lw__crowcur { margin-left: auto; color: #5F92FF; }
.lw__crowhr { height: 1px; background: #1B2027; }   /* Divider = outlineVariant（同 .lw__hr） */
/* 命名输入：M3 TextField 下划线形态，聚焦态 2px 主色 + 闪动插入符 */
.lw__nfield {
  position: relative; display: flex; align-items: center; height: 40px;
  border-bottom: 1px solid #B6BFC9; font-size: 14px;
}
.lw__nfield.is-focus { border-bottom: 2px solid #5F92FF; }
.lw__nval { color: #EEF1F5; white-space: pre; }
.lw__nhint { color: #6B7C99; }
.lw__ncaret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: #5F92FF; }
.lw__nfield.is-focus .lw__ncaret { display: block; animation: lw-caret 1s step-end infinite; }
@keyframes lw-caret { 50% { opacity: 0; } }
.lw__nokbtn {
  height: 40px; padding: 0 24px; border: 0; border-radius: 20px; cursor: pointer;
  background: #5F92FF; color: #0E1218; font-size: 14px; font-weight: 500; font-family: inherit;
}
/* 工具条禁用钮（重命名模板在无激活用户模板时禁用，M3 disabled 38% 前景） */
.lw__obtn.is-disabled { opacity: .38; cursor: default; }
/* 真机 SnackBar 的最小等价（inverseSurface 亮底暗字，底部浮出 2s 自散） */
.lw__toast {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px);
  z-index: 40; padding: 10px 16px; border-radius: 4px;
  background: #E9EEF8; color: #0E1218; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.lw__toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ── 幽灵指针 / 拖拽卡片 / 字幕 ──
   点击动效两件套：指针本体朝笔尖方向下压缩小（按住期间保持，读作"正按着"），
   笔尖处炸开一圈「实心脉冲 + 描边环」的大涟漪（一次性，click/press/双击都触发）。 */
.lw__ghost {
  position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
}
.lw__ghost svg { display: block; transition: transform .1s ease-out; transform-origin: 2px 2px; }
.lw__ghost.is-press svg { transform: scale(.76); }
.lw__rip {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  border: 2px solid rgba(95, 146, 255, .95); border-radius: 50%;
  background: rgba(95, 146, 255, .35); opacity: 0;
}
.lw__rip.is-go { animation: lw-rip .5s ease-out; }
@keyframes lw-rip {
  0% { transform: scale(.12); opacity: 1; }
  70% { opacity: .5; }
  100% { transform: scale(1); opacity: 0; }
}

.lw__drag {
  position: absolute; z-index: 55; pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  background: #202730; color: #EEF1F5; border: 1px solid #5F92FF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.lw__drag--tool { background: #0A2160; color: #C9DDFF; border-color: transparent; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.lw__drag--tab {
  width: 176px; height: 40px; padding: 0; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: #0E1218; color: #EEF1F5; font-size: 14px;
  border: 1px solid rgba(27, 32, 39, .6); opacity: .85;
}
.lw__drag--fly {
  padding: 8px 12px; border-radius: 8px; background: #0E1218;
  border: 1px solid rgba(95, 146, 255, .45); color: #EEF1F5; font-size: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
}
.lw__cap {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 58; padding: 4px 12px; border-radius: 8px;
  background: rgba(32, 39, 48, .92); color: #EEF1F5; font-size: 12px; line-height: 20px;
}
.lw__badge { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: #6B7C99; }

@media (prefers-reduced-motion: reduce) {
  .lw__ghost, .lw__drag { display: none !important; }
  .lw__rip.is-go { animation: none; }
}