/* 板上见 · 公共组件样式（docs/前端标准.md 第四版：圆角三档、间距尺、动效三档、层次靠明暗）
 * 字色分工：弱字 --lb-text-3 只给代码、序号、单位、空值；数据时间、原因、提示、上下文一律用次要字 --lb-text-2。
 * 只准用 tokens.css 里的变量，不写色值（tests/test_frontend_std.py 会检查）。
 * 类名一律 lb- 开头，和老页面的样式互不影响。颜色只给涨跌、标签、状态用。
 */

/* ---------- 基础 ---------- */
.lb-root, .lb-root * { box-sizing: border-box; }
.lb-root {
  margin: 0;
  min-width: 1240px; /* 1280 窗口减去滚动条也不出横向滚动 */
  min-height: 100vh;
  background: var(--lb-bg-0);
  color: var(--lb-text-1);
  font-family: var(--lb-font);
  font-size: var(--lb-fs-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  accent-color: var(--lb-primary); /* 勾选框、滑块用板金，不用浏览器默认蓝（精修：一屏强调色只留金、红、绿） */
}
.lb-root a { color: inherit; text-decoration: none; }
.lb-root button { font: inherit; color: inherit; }
/* 焦点环只一种画法（第四版）：2px 板金、离元素 2px，圆角跟着元素走 */
.lb-root :focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 2px; }
/* 滚动条全站一种细条（11/11 小修：Windows 上原是系统粗灰条）：抽屉、键盘精灵、个股浮层、表格、页面都一样，颜色跟主题走；尺寸和旧外框 app.css 一致 */
* { scrollbar-width: thin; scrollbar-color: var(--lb-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--lb-line-strong); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--lb-text-3); background-clip: content-box; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
.lb-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* 悬停、按下、颜色：150ms 一条曲线（第四版动效），不做别的动画 */
.lb-root a, .lb-root button, .lb-chip, .lb-search { transition: color var(--lb-t1) var(--lb-ease), background-color var(--lb-t1) var(--lb-ease), border-color var(--lb-t1) var(--lb-ease), box-shadow var(--lb-t1) var(--lb-ease), opacity var(--lb-t1) var(--lb-ease), transform var(--lb-t1) var(--lb-ease), filter var(--lb-t1) var(--lb-ease); }
@media (prefers-reduced-motion: reduce) { .lb-root a, .lb-root button, .lb-chip, .lb-search { transition: none; } }
.lb-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lb-muted { color: var(--lb-text-2); }
.lb-faint { color: var(--lb-text-3); }
.lb-rise { color: var(--lb-rise); }
.lb-fall { color: var(--lb-fall); }
.lb-flat { color: var(--lb-flat); }
.lb-empty-val { color: var(--lb-text-3); }
[data-lb-term] { cursor: help; }
.lb-term-u { border-bottom: 1px dotted var(--lb-text-3); }

.lb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; cursor: pointer; border-radius: var(--lb-r-s);
  background: var(--lb-bg-2); border: 1px solid var(--lb-line-strong); color: var(--lb-text-1);
  font-size: var(--lb-fs-body); white-space: nowrap;
}
.lb-btn:hover { background: var(--lb-bg-3); }
.lb-btn--ghost { background: transparent; border-color: transparent; color: var(--lb-text-2); }
.lb-btn--ghost:hover { color: var(--lb-text-1); background: var(--lb-bg-2); }
.lb-btn[disabled] { opacity: 0.4; cursor: default; }
/* 按下反馈（第四版）：按钮、股票小块、圆形图标按钮按下缩到 0.96、略变暗；表格行不缩 */
.lb-btn:active:not([disabled]), .lb-chip:active, .lb-datesw button:active:not([disabled]), .lb-drawer-close:active, .lb-panel-close:active { transform: scale(0.96); filter: brightness(0.9); }
@media (prefers-reduced-motion: reduce) { .lb-btn:active, .lb-chip:active, .lb-datesw button:active, .lb-drawer-close:active, .lb-panel-close:active { transform: none; } }

/* ---------- 顶栏：标志 · 站名 · 定位语 · 一级菜单 · 搜索 · 主题 · 头像 ---------- */
/* 底色铺满整屏；里面一层（.lb-bar-in）和内容区一样宽、居中，左右对齐 */
.lb-bar-in {
  display: flex; align-items: center; gap: 20px; height: 100%;
  max-width: calc(var(--lb-page-max) + 2 * var(--lb-gutter)); margin: 0 auto; padding: 0 var(--lb-gutter);
}
.lb-topbar {
  /* 层级要高于个股浮层（40）：顶栏的下拉菜单会伸到浮层上面，低了会被浮层挡住点不到 */
  position: sticky; top: 0; z-index: 50;
  height: var(--lb-topbar-h);
  background: var(--lb-topbar-bg); color: var(--lb-topbar-fg); border-bottom: 1px solid var(--lb-topbar-line);
  transition: transform var(--lb-t2) var(--lb-ease);
}
/* 往下滚收起、往上滚出来（std/topbar.js 加减 is-topbar-hidden）。跟着顶栏吸顶的东西一律 top: var(--lb-sticky-top)，一起上移 */
.lb-root { --lb-sticky-top: var(--lb-topbar-h); }
.lb-root.is-topbar-hidden { --lb-sticky-top: 0px; }
.lb-root.is-topbar-hidden .lb-topbar { transform: translateY(-100%); }
/* 顶栏毛玻璃（第四版）：往下滚时内容从半透明顶栏底下滑过；不支持的浏览器照旧不透明 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lb-topbar { background: var(--lb-topbar-glass); border-bottom-color: var(--lb-topbar-glass-line); -webkit-backdrop-filter: var(--lb-glass-fx); backdrop-filter: var(--lb-glass-fx); }
}
@media (prefers-reduced-motion: reduce) { .lb-topbar { transition: none; } }
.lb-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto; }
.lb-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.lb-mark-board { fill: var(--lb-mark-board); }
.lb-mark-sun { fill: var(--lb-mark-sun); }
.lb-logo { font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--lb-topbar-fg); }
.lb-menu { display: flex; gap: 4px; height: 100%; margin-left: 24px; }
.lb-menu a {
  position: relative; display: flex; align-items: center; padding: 0 var(--lb-s16); height: 100%;
  color: var(--lb-topbar-fg-2); font-size: var(--lb-fs-l); font-weight: 600; white-space: nowrap;
}
.lb-menu a:hover { color: var(--lb-topbar-fg); }
.lb-menu a.is-active { color: var(--lb-topbar-fg); }
/* 当前项：和字一样宽的一小段 3px 金线，上边两个角微圆——就是标志里的一字板 */
.lb-menu a.is-active::after {
  content: ""; position: absolute; left: var(--lb-s16); right: var(--lb-s16); bottom: 0; height: 3px;
  border-radius: var(--lb-r-s) var(--lb-r-s) 0 0; background: var(--lb-topbar-active);
}
.lb-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lb-topbar .lb-btn--ghost { color: var(--lb-topbar-fg-2); }
.lb-topbar .lb-btn--ghost:hover { color: var(--lb-topbar-fg); background: var(--lb-topbar-input); }

/* 二级菜单条：贯通整页，紧贴顶栏下面；不吸顶，跟着页面滚走（用户 11/8 定） */
.lb-subnav { height: var(--lb-subnav-h); background: var(--lb-subnav-bg); border-bottom: 1px solid var(--lb-subnav-line); }
.lb-subnav .lb-bar-in { gap: 4px; }
.lb-subnav a {
  display: flex; align-items: center; height: 100%; padding: 2px 14px 0; font-size: 15px;
  color: var(--lb-subnav-fg); border-bottom: 2px solid transparent; white-space: nowrap;
}
.lb-subnav a:hover { color: var(--lb-text-1); }
.lb-subnav a.is-active { color: var(--lb-brand-gold-text); border-bottom-color: var(--lb-brand-gold); font-weight: 600; }

.lb-datesw { display: inline-flex; align-items: center; gap: 2px; }
.lb-datesw button {
  border: 0; background: transparent; cursor: pointer; height: 28px; min-width: 28px; padding: 0 6px;
  border-radius: 999px; color: var(--lb-topbar-fg-2); display: inline-flex; align-items: center; justify-content: center;
}
.lb-datesw button:hover:not([disabled]) { background: var(--lb-topbar-input); color: var(--lb-topbar-fg); }
.lb-datesw button[disabled] { opacity: 0.35; cursor: default; }
.lb-datesw .lb-date-label { color: var(--lb-topbar-fg); min-width: 92px; font-weight: 500; }

.lb-search {
  width: 300px; height: 36px; padding: 0 var(--lb-s12); gap: var(--lb-s8); cursor: text;
  background: var(--lb-topbar-input); border: 0; border-radius: var(--lb-r-m);
  color: var(--lb-topbar-fg-2); display: flex; align-items: center; font-size: var(--lb-fs-s);
}
.lb-search .lb-kbd { margin-left: auto; }
/* 盘面状态（START-36）：8px 点 + "盘中 · 11-11 周三"。点只在竞价、盘中是实心（红点 = 实时，读标志太阳色，经典红顶栏上反白），其余空心次要字色 */
.lb-mkt { display: inline-flex; align-items: center; gap: var(--lb-s8); height: 28px; padding: 0 var(--lb-s12); border-radius: 999px; background: var(--lb-topbar-input); color: var(--lb-topbar-fg-2); font-size: var(--lb-fs-s); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-mkt-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--lb-topbar-fg-2); flex: 0 0 auto; box-sizing: border-box; }
.lb-mkt.is-live { color: var(--lb-topbar-fg); }
.lb-mkt.is-live .lb-mkt-dot { border: 0; background: var(--lb-mark-sun); }
.lb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lb-topbar-input); color: var(--lb-topbar-fg);
  display: flex; align-items: center; justify-content: center; font-size: var(--lb-fs-s);
}
.lb-menu-pop {
  position: absolute; right: 0; top: 40px; z-index: 60; min-width: 168px; padding: 4px;
  background: var(--lb-bg-1); border: 1px solid var(--lb-line-strong); border-radius: var(--lb-r-m);
  box-shadow: var(--lb-shadow); color: var(--lb-text-1);
}
.lb-menu-pop[hidden] { display: none; }
.lb-menu-pop button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 4px 8px; min-height: 32px; border: 0; border-radius: var(--lb-r-s);
  background: transparent; cursor: pointer; text-align: left; color: var(--lb-text-1);
}
.lb-menu-pop button:hover { background: var(--lb-bg-2); }
.lb-menu-pop button[aria-checked="true"] { background: var(--lb-bg-3); }
.lb-menu-group { margin-top: var(--lb-s4); padding-top: var(--lb-s4); border-top: 1px solid var(--lb-hairline); }
.lb-menu-sub { padding: var(--lb-s4) var(--lb-s8); color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-menu-pop i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--lb-line-strong); flex: 0 0 auto; }

/* ---------- 页面框架：限宽居中；浮层打开时"内容区＋浮层"一组居中 ---------- */
.lb-root--data { --lb-page-max: 1920px; }
.lb-work {
  max-width: calc(var(--lb-page-max) + 2 * var(--lb-gutter)); margin: 0 auto;
  padding: var(--lb-s24) var(--lb-gutter) var(--lb-s32);
}
/* 浮层开着：组宽 = 内容上限 + 间隙 + 浮层。放得下时两边留白相等（--lb-side-m）；
   放不下时浮层贴屏幕右边、内容左边留 --lb-gutter、内容变窄，右栏收起（和以前一样）。 */
.lb-root.has-panel { --lb-side-m: calc((var(--lb-vw) - var(--lb-page-max) - var(--lb-gap) - var(--lb-panel-w)) / 2); }
.lb-root.has-panel .lb-work {
  max-width: none; padding-left: 0; padding-right: 0;
  margin-left: max(var(--lb-gutter), var(--lb-side-m));
  margin-right: calc(max(0px, var(--lb-side-m)) + var(--lb-panel-w) + var(--lb-gap));
}
/* 页头只留一层：左边页大标题 + 一句话说明，右边操作和数据时间 */
.lb-workhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-s12) var(--lb-s16); margin-bottom: var(--lb-s24); min-width: 0; }
.lb-headtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-title { font-size: var(--lb-fs-page); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; white-space: nowrap; }
.lb-desc { color: var(--lb-text-2); font-size: var(--lb-fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 分段按钮 LB.seg（std/seg.js，第四版）：外壳中圆角、内边 3px、每项等宽；选中块滑过去（--lb-t3），底下正中一小段金条 */
.lb-seg {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 0 0 auto;
  padding: 3px; background: var(--lb-fill); border-radius: var(--lb-r-m);
}
.lb-seg button {
  position: relative; z-index: 1; height: 28px; padding: 0 var(--lb-s12); border: 0; border-radius: var(--lb-r-s);
  background: transparent; cursor: pointer; color: var(--lb-text-2); white-space: nowrap; font-weight: 500;
}
.lb-seg button:hover { color: var(--lb-text-1); }
.lb-seg button[aria-pressed="true"] { color: var(--lb-text-1); }
/* 没加上滑块（脚本没跑）时选中项自己带底 */
.lb-seg:not(.has-thumb) button[aria-pressed="true"] { background: var(--lb-seg-thumb); box-shadow: var(--lb-seg-shadow); }
.lb-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 1));
  transform: translateX(calc(100% * var(--i, 0))); border-radius: var(--lb-r-s);
  background: var(--lb-seg-thumb); box-shadow: var(--lb-seg-shadow);
  transition: transform var(--lb-t3) var(--lb-ease);
}
.lb-seg-thumb::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px;
  border-radius: 999px; background: var(--lb-selected);
}
.lb-seg.is-none .lb-seg-thumb { opacity: 0; }
.lb-seg--s button { height: 24px; padding: 0 var(--lb-s8); font-size: var(--lb-fs-s); }
/* 小号（放在表格行里）不画金条，只留选中底色：一张表十行全是金条太花（11/11 小修） */
.lb-seg--s .lb-seg-thumb::after { content: none; }
@media (prefers-reduced-motion: reduce) { .lb-seg-thumb { transition: none; } }
.lb-seg .lb-now { margin-left: 4px; color: var(--lb-primary-text); font-size: var(--lb-fs-s); }
/* 主区变窄（浮层开着、1280 宽）时右边操作整组折到标题下面，不和标题叠 */
.lb-workhead-right { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; align-items: center; min-width: 0; }
.lb-workhead-right .lb-datesw button { color: var(--lb-text-2); background: var(--lb-fill); }
.lb-workhead-right .lb-datesw button:hover:not([disabled]) { background: var(--lb-bg-2); color: var(--lb-text-1); }
.lb-workhead-right .lb-datesw .lb-date-label { color: var(--lb-text-1); }

/* 页脚：一行小字 */
.lb-icp, .lb-icp:hover { color: inherit; text-decoration: none; }
.lb-foot { padding: var(--lb-s12) 0 var(--lb-s4); color: var(--lb-text-3); font-size: var(--lb-fs-s); text-align: center; }

/* 一句话结论 + 时段提示 */
.lb-brief { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--lb-gap); min-height: 22px; }
.lb-brief-text { font-size: var(--lb-fs-l); color: var(--lb-text-1); }
.lb-brief-note { color: var(--lb-text-2); font-size: var(--lb-fs-s); white-space: nowrap; }

.lb-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--lb-side-w); gap: var(--lb-gap); align-items: start; }
.lb-root.has-panel .lb-grid { grid-template-columns: minmax(0, 1fr); }
.lb-root.has-panel .lb-col--side { display: none; }
.lb-col { display: flex; flex-direction: column; gap: var(--lb-gap); min-width: 0; }

/* ---------- 卡片：标题 + 一句问题 + 数据时间 ---------- */
/* 第四版：卡片不描边，靠 --lb-bg-1 和页面底色的差 + 极淡阴影；卡片头 44px 不画下边线 */
.lb-card { background: var(--lb-bg-1); border-radius: var(--lb-r-m); box-shadow: var(--lb-card-shadow); min-width: 0; overflow: hidden; }
.lb-card-head {
  display: flex; align-items: center; gap: var(--lb-s12); min-width: 0;
  height: 44px; padding: 0 var(--lb-pad);
  background: var(--lb-cardhead-bg); color: var(--lb-cardhead-fg);
}
.lb-card-title { font-size: var(--lb-fs-l); font-weight: 600; white-space: nowrap; }
.lb-card-q { color: var(--lb-cardhead-fg-2); font-size: var(--lb-fs-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lb-card-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--lb-cardhead-meta); font-size: var(--lb-fs-s); white-space: nowrap; }
.lb-card-meta .lb-btn--ghost { color: var(--lb-cardhead-meta); height: 24px; }
.lb-card-meta .lb-btn--ghost:hover { color: var(--lb-cardhead-fg); background: transparent; }
.lb-delay { color: var(--lb-cardhead-warn); }
/* 不在卡片标题条上（页头、正文里）的"数据延迟"用页面上的弱红：经典红主题的标题条浅黄字放在浅底上看不见 */
.lb-workhead .lb-delay, .lb-card-body .lb-delay { color: var(--lb-delay); }
.lb-card-body { padding: var(--lb-s4) var(--lb-pad) var(--lb-pad-y); }
.lb-card-foot { padding: var(--lb-s8) var(--lb-pad); border-top: 1px solid var(--lb-hairline); }

/* ---------- 指标块：大数字 + 一行上下文 ---------- */
.lb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lb-stat { padding: var(--lb-s12) var(--lb-pad); border-right: 1px solid var(--lb-hairline); min-width: 0; }
.lb-stat:last-child { border-right: 0; }
.lb-stat-label { color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-stat-value { font-size: var(--lb-fs-num); font-weight: 600; line-height: 1.35; white-space: nowrap; }
.lb-stat-ctx { color: var(--lb-text-2); font-size: var(--lb-fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-stat-unit { margin-left: var(--lb-s4); color: var(--lb-text-2); font-size: var(--lb-fs-body); font-weight: 400; letter-spacing: 0; }
/* 大数字（第四版：每页一个视觉重心）：页头下面一排、最多 4 个，直接放在页面底色上，不套卡片、不画竖线。
   --lb-fs-hero 只准用在这里（自动检查） */
.lb-stats--hero { gap: var(--lb-s24); margin: 0 0 var(--lb-s32); padding: 0 var(--lb-s4); }
.lb-stats--hero .lb-stat { padding: 0; border-right: 0; }
.lb-stats--hero .lb-stat-label { font-size: var(--lb-fs-m); }
.lb-stats--hero .lb-stat-value { font-size: var(--lb-fs-hero); line-height: 1.2; letter-spacing: -0.02em; }

/* ---------- 页签 ---------- */
.lb-tabs { display: flex; gap: var(--lb-s4); height: 100%; align-items: stretch; min-width: 0; }
.lb-tabs button {
  border: 0; background: transparent; cursor: pointer; padding: 0 9px; white-space: nowrap;
  color: inherit; opacity: 0.72; border-bottom: 2px solid transparent;
}
.lb-tabs button:hover { opacity: 1; }
.lb-tabs button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--lb-cardhead-active); font-weight: 500; }
.lb-tabs .lb-key { opacity: 0.6; font-size: var(--lb-fs-s); margin-left: 3px; }

/* ---------- 股票表格（不准横向滚动：窄了按优先级藏列） ---------- */
.lb-table-wrap { overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 230px); container-type: inline-size; }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; font-size: var(--lb-fs-m); }
.lb-table th, .lb-table td {
  height: var(--lb-row-h); padding: 0 var(--lb-s8); white-space: nowrap;
  border-bottom: 1px solid var(--lb-row-line);
}
.lb-table thead th { border-bottom-color: var(--lb-hairline); }
.lb-table th:first-child, .lb-table td:first-child { padding-left: var(--lb-pad); }
.lb-table th:last-child, .lb-table td:last-child { padding-right: var(--lb-pad); }
.lb-table thead th {
  position: sticky; top: 0; z-index: 2; height: var(--lb-head-h);
  background: var(--lb-bg-1); color: var(--lb-text-2);
  font-size: var(--lb-fs-s); font-weight: 400; text-align: left; user-select: none;
}
.lb-table th.lb-num { text-align: right; }
.lb-table th[data-sortable] { cursor: pointer; }
.lb-table th[data-sortable]:hover { color: var(--lb-text-1); }
.lb-table th .lb-sort { display: inline-block; width: 10px; margin-left: 2px; color: var(--lb-primary-text); }
.lb-table tbody tr { cursor: pointer; }
.lb-table tbody tr:hover td { background: var(--lb-bg-2); }
.lb-table tbody tr.is-current td { background: var(--lb-bg-3); }
.lb-table tbody tr.is-current td:first-child { box-shadow: inset 2px 0 0 var(--lb-selected); }
.lb-table td.lb-rank { color: var(--lb-text-3); width: 32px; }
.lb-table td.lb-cell-stock { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.lb-table td.lb-cell-tags { max-width: 220px; overflow: hidden; }
/* 表格自己的宽度（不是窗口宽度）不够时藏列：先藏 3 级，再藏 2 级，再藏标签 */
@container (max-width: 980px) { .lb-table [data-pri="3"] { display: none; } }
@container (max-width: 820px) { .lb-table [data-pri="2"] { display: none; } }
@container (max-width: 640px) { .lb-table .lb-cell-tags, .lb-table th.lb-th-tags { display: none; } }
.lb-stock { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; }
.lb-stock-name { color: var(--lb-text-1); font-weight: 500; }
.lb-stock:hover .lb-stock-name { color: var(--lb-primary-text); }
.lb-stock-code { color: var(--lb-text-3); font-size: var(--lb-fs-s); }

/* 数字变化闪一下：涨红跌绿，0.6 秒淡出 */
@keyframes lb-flash-up { from { background-color: var(--lb-flash-up); } to { background-color: transparent; } }
@keyframes lb-flash-down { from { background-color: var(--lb-flash-down); } to { background-color: transparent; } }
.lb-flash-up { animation: lb-flash-up 0.6s ease-out; }
.lb-flash-down { animation: lb-flash-down 0.6s ease-out; }

/* ---------- 标签 ---------- */
.lb-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 5px; margin-right: 4px;
  border-radius: var(--lb-r-s); font-size: var(--lb-fs-s); line-height: 1; white-space: nowrap; vertical-align: middle;
}
.lb-tag--limit-up { background: var(--lb-limit-up); color: var(--lb-text-on-solid); }
.lb-tag--one-word { background: var(--lb-one-word); color: var(--lb-text-on-solid); }
.lb-tag--broken { color: var(--lb-broken); box-shadow: inset 0 0 0 1px var(--lb-broken); }
.lb-tag--limit-down { background: var(--lb-limit-down); color: var(--lb-text-on-solid); }
.lb-tag--st { color: var(--lb-st); background: var(--lb-st-soft); }
.lb-tag--streak { color: var(--lb-streak); background: var(--lb-streak-soft); }
.lb-tag--streak-high { background: var(--lb-streak-high); color: var(--lb-text-on-solid); }
.lb-tag--theme { color: var(--lb-theme-tag); background: var(--lb-theme-tag-soft); }
.lb-tag--muted { color: var(--lb-text-2); background: var(--lb-bg-3); }

/* ---------- 股票小块：名称 + 涨跌幅 ---------- */
.lb-chip {
  display: inline-flex; align-items: baseline; gap: var(--lb-s4); height: 24px; padding: 0 var(--lb-s8); margin: 0 var(--lb-s8) var(--lb-s8) 0;
  border-radius: var(--lb-r-s); background: var(--lb-bg-2); cursor: pointer; white-space: nowrap; line-height: 24px;
}
.lb-chip:hover { background: var(--lb-bg-3); }
.lb-chip-name { color: var(--lb-text-1); }
.lb-chip-pct { font-size: var(--lb-fs-s); }
.lb-chip.is-current { box-shadow: inset 0 0 0 1px var(--lb-selected); }

/* 悬停小卡（股票小块停 0.3 秒） + 名词解释 */
.lb-pop {
  position: fixed; z-index: 70; pointer-events: none;
  background: var(--lb-bg-1); border: 1px solid var(--lb-line-strong); border-radius: var(--lb-r-m);
  box-shadow: var(--lb-shadow); color: var(--lb-text-1);
}
.lb-pop[hidden] { display: none; }
.lb-hover { width: 240px; padding: 10px 12px; }
.lb-hover-row { display: flex; align-items: baseline; gap: 8px; }
.lb-hover-name { font-weight: 600; }
.lb-hover-px { margin-left: auto; font-size: var(--lb-fs-l); font-weight: 600; }
.lb-hover-tags { margin: 6px 0; min-height: 18px; }
.lb-hover-spark { height: 48px; color: var(--lb-text-2); font-size: var(--lb-fs-s); display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--lb-line); margin-top: 6px; }
.lb-hover-spark svg { width: 100%; height: 44px; }
.lb-hover-hint { color: var(--lb-text-2); font-size: var(--lb-fs-s); margin-top: 4px; }
.lb-tip { max-width: 300px; padding: 8px 10px; background: var(--lb-tip-bg); color: var(--lb-tip-fg); border-color: var(--lb-tip-bg); font-size: var(--lb-fs-s); line-height: 1.6; }
.lb-tip b { font-weight: 600; margin-right: 4px; }
.lb-tip .lb-tip-calc { opacity: 0.75; margin-top: 2px; }

/* ---------- 连板天梯 ---------- */
.lb-ladder { list-style: none; margin: 0; padding: 0; }
.lb-ladder li { display: flex; gap: var(--lb-s12); padding: var(--lb-item-y) var(--lb-pad) var(--lb-s4); border-bottom: 1px solid var(--lb-row-line); }
.lb-ladder li:last-child { border-bottom: 0; }
.lb-ladder-level { flex: 0 0 128px; padding-top: 2px; }
.lb-ladder-level b { display: block; font-size: var(--lb-fs-l); font-weight: 600; }
.lb-ladder-level span { color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-ladder-chips { flex: 1 1 auto; min-width: 0; }
.lb-more { border: 0; background: transparent; cursor: pointer; color: var(--lb-text-2); font-size: var(--lb-fs-s); padding: 0 4px; height: 24px; }
.lb-more:hover { color: var(--lb-text-1); }

/* ---------- 题材排行 ---------- */
.lb-rank-list { list-style: none; margin: 0; padding: 0; }
.lb-rank-list li { padding: var(--lb-item-y) var(--lb-pad) var(--lb-s4); border-bottom: 1px solid var(--lb-row-line); }
.lb-rank-list li:last-child { border-bottom: 0; }
.lb-rank-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lb-rank-head b { font-weight: 600; }
.lb-rank-head span { color: var(--lb-text-2); font-size: var(--lb-fs-s); }

/* ---------- 三种状态 ---------- */
.lb-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 160px; padding: 24px; text-align: center; color: var(--lb-text-2);
}
.lb-state svg { width: 36px; height: 36px; color: var(--lb-text-3); }
.lb-state-title { color: var(--lb-text-1); font-size: var(--lb-fs-m); }
.lb-state-desc { color: var(--lb-text-2); font-size: var(--lb-fs-s); max-width: 380px; }
.lb-state--error svg { color: var(--lb-error); }
.lb-skel { padding: 4px 0; overflow: hidden; }
.lb-skel-row { display: flex; gap: var(--lb-s16); align-items: center; height: var(--lb-row-h); padding: 0 var(--lb-s8); border-bottom: 1px solid var(--lb-row-line); }
.lb-skel-bar {
  height: 10px; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--lb-skeleton) 0%, var(--lb-skeleton-hi) 50%, var(--lb-skeleton) 100%);
  background-size: 200% 100%; animation: lb-shimmer 1.4s linear infinite;
}
@keyframes lb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lb-skel-bar, .lb-flash-up, .lb-flash-down { animation: none; } }

/* ---------- 个股浮层（全站唯一，贴在右边） ---------- */
.lb-panel {
  position: fixed; top: var(--lb-topbar-h); right: 0; bottom: 0; z-index: 40;
  width: var(--lb-panel-w); display: flex; flex-direction: column;
  background: var(--lb-bg-1); box-shadow: var(--lb-pop-shadow);
  border-radius: var(--lb-r-l) 0 0 var(--lb-r-l); overflow: hidden;  /* 只换皮（第四版）：靠内容区那侧两个大圆角；位置算法不动 */
}
.lb-panel[hidden] { display: none; }
.lb-root.has-panel .lb-panel { right: max(0px, var(--lb-side-m)); }
.lb-panel-head { padding: var(--lb-s12) var(--lb-s16) 0; border-bottom: 1px solid var(--lb-hairline); background: var(--lb-bg-1); }
.lb-panel-row { display: flex; align-items: baseline; gap: 10px; }
.lb-panel-name { font-size: var(--lb-fs-l); font-weight: 600; }
.lb-panel-price { font-size: var(--lb-fs-num); font-weight: 600; }
.lb-panel-asof { color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-panel-close {
  margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--lb-text-2);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; align-self: center;
}
.lb-panel-close { background: var(--lb-fill); }
.lb-panel-close:hover { color: var(--lb-text-1); background: var(--lb-fill-2); }
.lb-panel-tags { margin: 6px 0 8px; min-height: 18px; }
.lb-panel-tabs { height: 34px; color: var(--lb-text-1); }
.lb-panel-tabs button[aria-selected="true"] { border-bottom-color: var(--lb-selected); }
.lb-panel-body { flex: 1 1 auto; overflow: auto; }
.lb-panel-foot { padding: var(--lb-s8) var(--lb-s16); border-top: 1px solid var(--lb-hairline); color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 2px;
  border: 1px solid var(--lb-line-strong); border-radius: var(--lb-r-s); text-align: center;
  color: var(--lb-text-2); font-size: var(--lb-fs-s); line-height: 16px;
}
.lb-topbar .lb-kbd { border-color: var(--lb-topbar-line); color: var(--lb-topbar-fg-2); }
.lb-chart { height: 360px; margin: 12px 16px 6px; position: relative; }
.lb-chart-note { margin: 0 16px; color: var(--lb-text-2); font-size: var(--lb-fs-s); }

/* 资讯、讨论列表 */
.lb-feed { list-style: none; margin: 0; padding: 0; }
.lb-feed li { padding: var(--lb-item-y) var(--lb-pad); border-bottom: 1px solid var(--lb-row-line); }
.lb-feed-meta { display: flex; gap: 8px; color: var(--lb-text-3); font-size: var(--lb-fs-s); margin-bottom: 2px; }
.lb-feed-title { color: var(--lb-text-1); }
.lb-feed a.lb-feed-title:hover { color: var(--lb-primary-text); }
.lb-feed-body { color: var(--lb-text-2); font-size: var(--lb-fs-m); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 键盘精灵 ---------- */
.lb-spirit-mask { position: fixed; inset: 0; z-index: 80; background: var(--lb-mask); }
.lb-spirit-mask[hidden] { display: none; }
/* 第四版：做成聚焦搜索的样子——宽 600、离顶 120、居中、大圆角、毛玻璃；结果分"功能""股票"两组 */
.lb-spirit {
  position: absolute; top: 120px; left: 50%; transform: translateX(-50%); width: 600px;
  background: var(--lb-bg-1); border: 1px solid var(--lb-line-strong); border-radius: var(--lb-r-l); box-shadow: var(--lb-pop-shadow); overflow: hidden;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lb-spirit { background: var(--lb-glass-bg); border-color: var(--lb-glass-line); -webkit-backdrop-filter: var(--lb-glass-fx); backdrop-filter: var(--lb-glass-fx); }
}
.lb-spirit-input-row { display: flex; align-items: center; gap: var(--lb-s12); height: 56px; padding: 0 var(--lb-s24) 0 var(--lb-s16); border-bottom: 1px solid var(--lb-glass-line); color: var(--lb-text-2); }
.lb-spirit-input-row .lb-icon { width: 20px; height: 20px; }
.lb-spirit input {
  flex: 1 1 auto; height: 100%; border: 0; outline: 0; background: transparent; caret-color: var(--lb-primary);
  color: var(--lb-text-1); font: inherit; font-size: var(--lb-fs-num);
}
/* 输入框自己不画焦点框（大框本身就是焦点所在；以前的金框上边会被切掉一截） */
.lb-spirit input:focus-visible { outline: none; }
.lb-spirit-list { list-style: none; margin: 0; padding: var(--lb-s8); max-height: 400px; overflow: auto; }
.lb-spirit-list li { position: relative; display: flex; align-items: center; gap: var(--lb-s12); padding: 0 var(--lb-s12); height: 40px; border-radius: var(--lb-r-s); cursor: pointer; }
.lb-spirit-list li.lb-spirit-group { height: auto; padding: var(--lb-s12) var(--lb-s12) var(--lb-s4); color: var(--lb-text-2); font-size: var(--lb-fs-s); cursor: default; }
.lb-spirit-list li.lb-spirit-group:first-child { padding-top: var(--lb-s4); }
.lb-spirit-list li[aria-selected="true"] { background: var(--lb-fill-2); }
/* 选中行左边一小段竖金条（品牌记号：金线 = 选中） */
.lb-spirit-list li[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 16px; border-radius: 999px; background: var(--lb-selected);
}
.lb-spirit-code { color: var(--lb-text-2); width: 64px; font-variant-numeric: tabular-nums; }
.lb-spirit-name { color: var(--lb-text-1); font-weight: 500; }
.lb-spirit-py { margin-left: auto; color: var(--lb-text-2); font-size: var(--lb-fs-s); text-transform: uppercase; }
.lb-spirit-empty { padding: var(--lb-s16) var(--lb-s12); color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-spirit-foot { display: flex; align-items: center; gap: var(--lb-s4); padding: var(--lb-s8) var(--lb-s24); border-top: 1px solid var(--lb-glass-line); color: var(--lb-text-2); font-size: var(--lb-fs-s); }
/* 底部按键提示：小键帽 */
.lb-spirit-foot .lb-kbd { min-width: 22px; padding: 1px 6px; border: 0; background: var(--lb-fill-2); line-height: 18px; }

/* ---------- 新手引导（全站一次，三步，可关） ---------- */
.lb-guide { position: fixed; z-index: 90; width: 280px; padding: 12px 14px; pointer-events: auto;
  background: var(--lb-bg-1); border: 1px solid var(--lb-selected); border-radius: var(--lb-r-l); box-shadow: var(--lb-shadow); }
.lb-guide[hidden] { display: none; }
.lb-guide-step { color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-guide-text { margin: 4px 0 10px; }
.lb-guide-actions { display: flex; gap: 8px; justify-content: flex-end; }
.lb-guide-target { position: relative; z-index: 85; box-shadow: 0 0 0 2px var(--lb-selected); border-radius: var(--lb-r-s); }

/* ---------- 抽屉 LB.drawer：右侧滑出，标题＋一句话、×、Esc、点外面关（START-18） ---------- */
/* 贴在内容区右边，层级 41（高于个股浮层 40、低于顶栏 50）；同一时间只开一个 */
/* 第四版：悬浮——离顶栏下沿、屏幕右边、底边各 12px，大圆角、毛玻璃 */
.lb-drawer {
  position: fixed; top: calc(var(--lb-sticky-top) + var(--lb-s12)); right: max(var(--lb-s12), calc((var(--lb-vw) - var(--lb-page-max)) / 2)); bottom: var(--lb-s12); z-index: 41;
  width: var(--lb-drawer-w); overflow-y: auto;
  background: var(--lb-bg-1); border: 1px solid var(--lb-line-strong); border-radius: var(--lb-r-l); box-shadow: var(--lb-pop-shadow);
  animation: lb-drawer-in var(--lb-t3) var(--lb-ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lb-drawer { background: var(--lb-glass-bg); border-color: var(--lb-glass-line); -webkit-backdrop-filter: var(--lb-glass-fx); backdrop-filter: var(--lb-glass-fx); }
  /* 头部吸在顶上：自己也是毛玻璃（浅色主题是不透明底），往下滚时下面的行不和标题叠在一起 */
  .lb-drawer .lb-drawer-head { background: color-mix(in srgb, var(--lb-glass-bg), var(--lb-bg-1) 70%); -webkit-backdrop-filter: var(--lb-glass-fx); backdrop-filter: var(--lb-glass-fx); }
}
@keyframes lb-drawer-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lb-drawer { animation: none; } }
/* 头部高 60：标题 18 号 + 一句话 12 号上下两行，右边 32px 圆形 × */
.lb-drawer-head {
  position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: var(--lb-s12);
  height: 60px; padding: 0 var(--lb-s16) 0 var(--lb-s24); background: var(--lb-bg-1);
}
.lb-drawer-head .lb-card-title { grid-column: 1; grid-row: 1; font-size: var(--lb-fs-h); line-height: 1.3; }
.lb-drawer-desc { grid-column: 1; grid-row: 2; color: var(--lb-text-2); font-size: var(--lb-fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* × 32px 圆形（可点区域 ≥ 32px） */
.lb-drawer-close {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--lb-fill-2); cursor: pointer;
  color: var(--lb-text-1); display: inline-flex; align-items: center; justify-content: center;
}
.lb-drawer-close:hover { background: var(--lb-fill); filter: brightness(1.2); }
.lb-drawer-close .lb-icon { width: 16px; height: 16px; }
[data-lb-input="pointer"] .lb-drawer-close:focus-visible { outline: none; }
.lb-drawer-body { padding: var(--lb-s8) var(--lb-s16) var(--lb-s24); display: flex; flex-direction: column; gap: var(--lb-s24); }
/* 分区 = 框外小标题（13 号次要字）+ 分组框（中圆角浅底）；框里一行一项，左文字右控件，行间一根左边缩进 16 的淡线 */
.lb-drawer-sec { margin: 0; display: flex; flex-direction: column; gap: var(--lb-s8); }
.lb-drawer-sec-title { margin: 0; padding: 0 var(--lb-s8); color: var(--lb-text-2); font-size: var(--lb-fs-m); font-weight: 400; }
.lb-drawer-group { display: flex; flex-direction: column; background: var(--lb-fill); border-radius: var(--lb-r-m); }
.lb-drawer-group > * { margin: 0; padding: var(--lb-s12) var(--lb-s16); }
.lb-drawer-group > * + * { background: linear-gradient(var(--lb-hairline), var(--lb-hairline)) var(--lb-s16) 0 / calc(100% - var(--lb-s16)) 1px no-repeat; }
.lb-drawer-group > .lb-switch, .lb-drawer-group > .lb-check, .lb-drawer-group > label, .lb-drawer-group > .lb-drawer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lb-s12); min-height: 48px; padding-top: 0; padding-bottom: 0;
}
.lb-drawer-group > .lb-switch, .lb-drawer-group > .lb-check, .lb-drawer-group > label:has(> input[type="checkbox"]:first-child) { flex-direction: row-reverse; }
[data-lb-density="compact"] .lb-drawer-group > .lb-switch, [data-lb-density="compact"] .lb-drawer-group > .lb-check, [data-lb-density="compact"] .lb-drawer-group > label, [data-lb-density="compact"] .lb-drawer-group > .lb-drawer-row { min-height: 40px; }
.lb-drawer-group > .lb-btn { align-self: flex-start; margin: var(--lb-s12) var(--lb-s16); padding: 0 var(--lb-s12); }
.lb-drawer-group > .lb-btn + * { background: none; }
.lb-drawer-group > [hidden] { display: none; }

/* ---------- 轻提示 LB.toast：页面右上、顶栏下面，2 秒消失，不挡操作，同时只一条（START-18） ---------- */
.lb-toast {
  position: fixed; z-index: 85; pointer-events: none;
  top: calc(var(--lb-sticky-top) + 12px); right: max(var(--lb-gutter), calc((var(--lb-vw) - var(--lb-page-max)) / 2));
  display: flex; align-items: center; gap: var(--lb-s8); max-width: 360px; min-height: 36px; padding: var(--lb-s8) var(--lb-s16); border-radius: 999px;
  background: var(--lb-bg-1); border: 1px solid var(--lb-line-strong); box-shadow: var(--lb-pop-shadow);
  color: var(--lb-text-1); font-size: var(--lb-fs-body); font-weight: 500; line-height: 1.4;
  opacity: 0; transform: translateY(-4px); transition: opacity var(--lb-t2) var(--lb-ease), transform var(--lb-t2) var(--lb-ease);
}
.lb-toast.is-on { opacity: 1; transform: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lb-toast { background: var(--lb-glass-bg); border-color: var(--lb-glass-line); -webkit-backdrop-filter: var(--lb-glass-fx); backdrop-filter: var(--lb-glass-fx); }
}
/* "已保存"类前面一个板金小圆对勾；出错的用红字、不加对勾 */
.lb-toast.is-ok { padding-left: var(--lb-s12); }
.lb-toast.is-ok::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--lb-primary);
  -webkit-mask: var(--lb-check-mask); mask: var(--lb-check-mask);
}
.lb-toast.is-error { color: var(--lb-error); }
/* 抽屉开着：挪到抽屉左边，不压住抽屉的 × */
.lb-root.has-drawer .lb-toast { right: calc(max(var(--lb-s12), calc((var(--lb-vw) - var(--lb-page-max)) / 2)) + var(--lb-drawer-w) + var(--lb-s12)); }
@media (prefers-reduced-motion: reduce) { .lb-toast { transition: none; } }

/* ---------- 开关 LB.switch：总开关用它，板金表示开；附加条件仍用勾选框（START-18） ---------- */
.lb-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.lb-switch-btn {
  position: relative; flex: 0 0 auto; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lb-switch-off);
}
.lb-switch-btn::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lb-text-on-solid); box-shadow: var(--lb-knob-shadow); transition: transform var(--lb-t1) var(--lb-ease);
}
.lb-switch-btn[aria-checked="true"] { background: var(--lb-primary); }
.lb-switch-btn[aria-checked="true"]::after { transform: translateX(18px); }
.lb-switch-btn:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .lb-switch-btn::after { transition: none; } }
/* 勾选框（附加条件）：框在前、字在后 */
.lb-check { display: flex; align-items: center; gap: var(--lb-s8); cursor: pointer; }
/* 勾选框：小圆角、板金（accent-color） */
.lb-root input[type="checkbox"] { width: 18px; height: 18px; margin: 0; border-radius: var(--lb-r-s); }

/* ---------- 表单（公共）：登录页等 ---------- */
.lb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lb-field label { color: var(--lb-text-2); font-size: var(--lb-fs-body); }
.lb-input {
  height: 36px; padding: 0 var(--lb-s12); border-radius: var(--lb-r-s); border: 1px solid var(--lb-line-strong);
  background: var(--lb-bg-0); color: var(--lb-text-1); font: inherit; font-size: var(--lb-fs-body);
}
.lb-input:focus { outline: 2px solid var(--lb-focus); outline-offset: 2px; }
.lb-root .lb-btn--primary, .lb-btn--primary { background: var(--lb-primary); border-color: var(--lb-primary); color: var(--lb-text-on-primary); font-weight: 600; }
.lb-root .lb-btn--primary:hover { background: var(--lb-primary); filter: brightness(1.08); }
.lb-btn--block { display: flex; width: 100%; height: 38px; justify-content: center; }

/* ---------- 居中卡片页：登录、404、500（START-18；不放顶栏菜单） ---------- */
.lb-root--card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px var(--lb-gutter); }
.lb-root--card .lb-work { width: 100%; max-width: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.lb-cardpage { width: 380px; padding: var(--lb-s32) var(--lb-s32) var(--lb-s24); border-radius: var(--lb-r-l); background: var(--lb-bg-1); box-shadow: var(--lb-pop-shadow); }
.lb-cardpage-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; text-align: center; }
.lb-cardpage-brand .lb-mark { width: 56px; height: 56px; }
/* 卡片底不是红顶栏：经典红主题也用原色标志（金板红日），不反白 */
.lb-cardpage-brand { --lb-mark-board: var(--lb-brand-gold); --lb-mark-sun: var(--lb-brand-red); }
.lb-cardpage-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.lb-cardpage-slogan { color: var(--lb-text-2); font-size: var(--lb-fs-body); letter-spacing: 1px; }
.lb-cardpage-msg { margin: 0 0 20px; text-align: center; font-size: var(--lb-fs-h); font-weight: 600; }
.lb-cardpage-error { margin-bottom: 14px; padding: var(--lb-s8) var(--lb-s12); border-radius: var(--lb-r-s); border: 1px solid var(--lb-error); color: var(--lb-error); font-size: var(--lb-fs-body); }
.lb-cardpage-note { margin-bottom: 14px; color: var(--lb-text-2); font-size: var(--lb-fs-s); line-height: 1.7; }
.lb-cardpage-hint { margin: 18px 0 0; text-align: center; color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-cardpage-foot { margin-top: 20px; text-align: center; color: var(--lb-text-3); font-size: var(--lb-fs-s); }

/* ---------- 组件一览（样板页用） ---------- */
.lb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.lb-swatch { display: flex; align-items: center; gap: 8px; font-size: var(--lb-fs-s); color: var(--lb-text-2); }
.lb-swatch i { width: 22px; height: 22px; border-radius: var(--lb-r-s); border: 1px solid var(--lb-line-strong); flex: 0 0 auto; }
.lb-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lb-gap); }
.lb-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lb-gap); align-items: start; }
.lb-kv { width: 100%; border-collapse: collapse; }
.lb-kv td { padding: 5px 0; border-bottom: 1px solid var(--lb-line); }
.lb-kv td:first-child { color: var(--lb-text-2); }
.lb-kv td:last-child { text-align: right; }
.lb-hint { color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-kit-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lb-kit-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-p { margin: 0 0 8px; }

/* 组件一览 · 第四版 */
.lb-kit-caption { margin: 0 0 var(--lb-s12); color: var(--lb-text-2); font-size: var(--lb-fs-s); }
.lb-kit-radius { gap: var(--lb-s16); margin-bottom: var(--lb-s16); }
.lb-kit-cell { display: flex; flex-direction: column; gap: var(--lb-s8); width: 132px; }
.lb-kit-shape { height: 56px; background: var(--lb-fill-2); }
.lb-kit-spaces { display: flex; flex-direction: column; gap: var(--lb-s4); }
.lb-kit-space { display: flex; align-items: center; gap: var(--lb-s12); }
.lb-kit-space i { height: 12px; border-radius: var(--lb-r-s); background: var(--lb-primary); }
.lb-kit-track { position: relative; width: 100%; height: 20px; border-radius: 999px; background: var(--lb-fill); }
.lb-kit-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--lb-primary); }
.lb-kit-demo.is-moved .lb-kit-dot { transform: translateX(240px); }
@media (prefers-reduced-motion: reduce) { .lb-kit-dot { transition: none !important; } }
.lb-kit-marks { align-items: center; gap: var(--lb-s16); }
.lb-kit-menu { display: inline-flex; height: 36px; }
.lb-kit-menu a { position: relative; display: flex; align-items: center; padding: 0 var(--lb-s12); color: var(--lb-text-2); font-weight: 600; }
.lb-kit-menu a.is-active { color: var(--lb-text-1); }
.lb-kit-menu a.is-active::after { content: ""; position: absolute; left: var(--lb-s12); right: var(--lb-s12); bottom: 0; height: 3px; border-radius: var(--lb-r-s) var(--lb-r-s) 0 0; background: var(--lb-selected); }
.lb-kit-live { display: inline-flex; align-items: center; gap: var(--lb-s8); height: 28px; padding: 0 var(--lb-s12); border-radius: 999px; background: var(--lb-fill); font-size: var(--lb-fs-s); }
.lb-kit-reddot { width: 8px; height: 8px; border-radius: 50%; background: var(--lb-brand-red); }
.lb-kit-dens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lb-s12); align-items: start; margin-bottom: var(--lb-s8); }
.lb-kit-dens .lb-hint { margin-bottom: var(--lb-s4); }

/* 页头里的一句话结论（样板页）：放在大标题下面，太长时折到第二行 */
.lb-headtext .lb-brief { margin: 0; min-height: 0; flex-wrap: wrap; row-gap: 2px; }