/* ============================================================================
   lightweb-ui.css —— **框架层**样式（跨项目通用 Web UI 皮肤）
   ----------------------------------------------------------------------------
   ⚠ 本文件是**框架**，不是某个项目的样式表：请勿在此添加项目专属规则。

   【什么该放这里】只有跨项目通用的部分：
     · 设计令牌（:root 变量）· 基础排版 · 顶栏 / 侧栏 / 内容区骨架 · 表格 · 表单
     · 按钮 · 主 Tab / 子 Tab · 提示条 · 通用工具类
     · 以及**被 ≥2 个项目实际复用**的组件（只想给一个项目用的规则，不属于这里）
   【什么不该放这里】项目差异（配色 / 尺寸 / 只在一个项目出现的组件）⇒ 写进
     `lightweb-ui-<proj>.css`（本项目为 lightweb-ui-opt.css），且：
       · **优先覆盖变量**（--sidebar-w / --fs-sub / --menu-pad / --cell-pad …），
         而不是重复选择器 —— 否则本文件一改，项目文件里的旧副本会把它静默盖回去；
       · 不要用 !important 反制本文件（那是"覆盖失败"的信号，先回来改变量）。
   【加载顺序】本文件 → `lightweb-ui-<proj>.css`（后者靠"同优先级 + 后加载"生效）。
     模板里两行 <link> 的顺序不要调换。

   【多项目分发】lightweb 只挂**一个 web 根**，静态资源从各工程自己的 bin/web/ 直读
     ⇒ 本文件在 MarketServer / StatArbPro / OptsArbPro 下各有一份**物理拷贝**（无法真共享）。
     改动请三处同步，并运行 `tools\web_framework_check.bat` 校验三份逐字节一致
     （该脚本同时校验框架脚本 `lightweb-ui.js`）。
   【版本】任何改动都要递增下一行 —— 它是判断三份是否同步的唯一依据。
     @framework-version: 1.0.2
     （1.0.0 = 2026-10-06 自 OptsArbPro 原 style.css 抽出为基准；差异取值已变量化。
      1.0.1 = 同日并入 MarketServer 原 style-market.css 的 7 条**通用**规则
              （图表容器 .chart300/.chart400/.lh400 + 工具类 .vtop/.mt8/.form-inline）
              ⇒ 三份框架拷贝同步更新，MarketServer 侧不再重复声明。
      1.0.2 = 同日：校验脚本改名（web_css_check.bat → web_framework_check.bat，
              因为它现在同时校验 CSS 与 JS）⇒ 本文件仅头部引用文字变化，样式零改动。）

   风格：白底 + 灰边框 + 红涨绿跌（经典风）
   布局：纯流式自适应，不设任何固定 / 最大宽度

   【章节索引】
     1 设计令牌  ·  2 基础  ·  3 顶栏  ·  4 布局骨架  ·  5 页脚  ·  6 工具类
     7 表格  ·  8 主 Tab  ·  8b 子 Tab  ·  9 按钮  ·  10 表单  ·  11 提示条
     12 配置浏览 / 编辑态  ·  13 配对详情展开面板  ·  14 浮动菜单模式
     15 其他组件与工具类（补充）  ·  16 图表容器与工具类（补充）
   ============================================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
	--bg:#fdfdfe;
	--panel:#fff;
	--fg:#24292f;
	--fg-dim:#5b6470;
	--muted:#8b949e;
	--line:#d9dde2;
	--line-soft:#eceff2;
	--line-strong:#b9c0c8;
	--head-bg:#eef1f4;
	--zebra:#f5f6f8;
	--brand:#069;
	--brand-soft:#e8f2fb;
	--up:#d1343b;			/* 涨 / 盈利 */
	--down:#0a8f4a;			/* 跌 / 亏损 */
	--warn:#b58900;
	--danger:#c00;
	--ok:#0a8f4a;
	--warn-bg:#fff3cd;
	--danger-bg:#f8d7da;
	--hl-bg:#eef7ff;
	/* V20.13: 展开详情 / 当前选中行底色。与 --warn-bg（同为黄系）刻意拉开深浅：
	   告警与"选中"语义不同，同屏出现时不能只靠上下文去猜。 */
	--sel-bg:#ffe9a8;
	--radius:4px;
	--mono:"Courier New",Consolas,monospace;
	/* ---- 跨项目**取值差异**的落点（见文件头：项目文件覆盖变量，别重复选择器）----
	   默认值 = OptsArbPro 的取值；另两个项目的差异在各自 lightweb-ui-<proj>.css 里覆盖。 */
	--sidebar-w:110px;		/* 侧栏宽度：MarketServer 用 130px */
	--menu-pad:8px;			/* 侧栏菜单内边距：StatArbPro 用 8px 4px */
	--fs-sub:12px;			/* .sub 小字号：StatArbPro 用 11px */
	--cell-pad:2px 5px;		/* 表格单元格内边距：MarketServer 4px 8px / StatArbPro 2px 6px */
	--header-h:46px;
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	background:var(--bg);
	color:var(--fg);
	font-family:"Courier New","Microsoft YaHei",monospace;
	font-size:14px;
	line-height:1.5;
	/* 常规情况下内容在视口内换行压缩；仅当压缩到极限仍放不下时，
	   body 才随之变宽（顶栏/页脚一起变宽，右侧按钮保持右对齐） */
	min-width:min-content;
}
a{ color:var(--brand); text-decoration:none; white-space:nowrap; padding:0 2px; }
a:hover{ text-decoration:underline; }
h4{ margin:.8em 0 .5em; font-size:15px; }
h5{ margin:.8em 0 .4em; font-size:14px; }
h6{ margin:.7em 0 .35em; font-size:13px; }
hr{ border:0; border-top:1px dashed #bbb; margin:10px 0; }
img{ vertical-align:middle; }

/* ---------- 3. 顶栏 ---------- */
.topbar{
	height:var(--header-h);
	display:flex; align-items:center; gap:10px;
	padding:0 14px;
	background:var(--panel);
	border-bottom:1px solid var(--line);
	position:sticky; top:0; z-index:30;
}
.topbar .brand{ font-weight:700; font-size:15px; color:var(--fg); white-space:nowrap; }
.topbar .acct{ color:var(--fg-dim); white-space:nowrap; }
.topbar .spacer{ flex:1 1 auto; }
.topbar .toplink{ white-space:nowrap; }

/* 顶栏图标按钮：去掉默认按钮的边框与底色，做成图标 + 文字 */
.topbar .navbtn{
	border:0; background:none;
	padding:4px 8px; min-height:auto;
	border-radius:var(--radius);
	color:var(--brand);
	font:inherit; cursor:pointer;
	white-space:nowrap;
}
.topbar .navbtn:hover{ background:var(--brand-soft); color:var(--brand); }

/* 顶栏状态小标签 */
.pill{
	display:inline-block; padding:1px 8px;
	border:1px solid var(--line); border-radius:10px;
	font-size:12px; color:var(--fg-dim); background:var(--bg);
	white-space:nowrap;
}
.pill.ok{ color:var(--ok); border-color:#bfe3cc; background:#f0f9f3; }
.pill.danger{ color:var(--danger); border-color:#f0c0c0; background:#fdf0f0; font-weight:700; }

/* ---------- 4. 布局骨架（纯流式） ---------- */
.layout{ display:flex; align-items:flex-start; }
.sidebar{
	flex:0 0 var(--sidebar-w);
	position:sticky; top:var(--header-h);
	height:calc(100vh - var(--header-h));
	overflow:auto;
	background:var(--panel);
	border-right:1px solid var(--line);
}
.content{
	flex:1 1 auto;
	padding:12px 16px 24px;
}

/* 侧栏菜单 */
.menu{ display:flex; flex-direction:column; padding:var(--menu-pad); gap:2px; }
.menu .mi{
	display:block; padding:8px 10px; min-height:36px;
	border-radius:var(--radius);
	color:var(--fg); text-align:center;
}
.menu .mi:hover{ background:var(--brand-soft); text-decoration:none; }
.menu .mi.active{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.menu-sep{ height:1px; background:var(--line-soft); margin:6px 2px; }
.menu-title{ padding:8px 10px 2px; font-size:12px; font-weight:700; color:var(--muted); }
.menu-form{ margin:0; padding:6px 10px; text-align:center; }
.menu-check{
	align-items:center; gap:6px;
	padding:8px 10px; cursor:pointer;
	text-align:center; 
	user-select:none; font-size:13px; color:var(--fg-dim);
}

/* ---------- 5. 页脚（位于内容区底部，不横跨侧栏） ---------- */
.footer{
	margin-top:16px; padding:12px 0 0;
	border-top:1px dashed var(--line);
	text-align:center; color:var(--muted); font-size:12px;
}

/* ---------- 6. 工具类（替代散落的内联样式） ---------- */
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.center{ text-align:center; }
.text{text-align:left;}
.nowrap{ white-space:nowrap; }
.sub{ font-weight:400; font-size:var(--fs-sub); color:var(--fg-dim); }
.comments{ color:var(--muted); font-size:12px; font-weight:400; }
/* V21.72: 原 `.hedge-sup`（手数格内的对冲手数小字）已删除 —— 对冲手数在 V21.72 起
   独立成格「对冲（近/远）」（见 strategy_panel.inja 第 4 行），不再需要该样式。 */
.muted{ color:var(--muted); }

/* 提示文字色 */
.text-danger{ color:var(--danger); }
.text-warn{ color:var(--warn); }
.text-ok{ color:var(--ok); }
.text-brand{ color:var(--brand); }
.bold{ font-weight:700; }

/* 其它工具类 */
.preline{ white-space:pre-line; }
.small{ font-size:11px; }
.wordspace{ word-spacing:4px; }
.w5{ width:5em; }
.mw5{ min-width:5em; }
.strike{ background:#f0f4f8; }
.wrapcell{ font-size:12px; color:#555; max-width:70em; word-break:break-all; }

/* 涨跌 / 盈亏（经典红涨绿跌） */
.val-up{ color:var(--up); }
.val-down{ color:var(--down); }

/* 整行底色（!important 用于压过表格斑马纹） */
.row-hl{ background:var(--hl-bg) !important; }
.row-warn{ background:var(--warn-bg) !important; }
.row-danger{ background:var(--danger-bg) !important; }
.row-atm{ background:var(--warn-bg) !important; }
.row-muted{ color:#777; }
/* V20.13: 详情展开行 —— 标出"当前正在看哪一行的详情"，兼作选中态。
   与 .row-muted（只改字色，不改底）可叠加：被阻断的行展开后仍是灰字 + 黄底，
   两者不抢同一个属性，故无需考虑优先级。 */
.row-sel{ background:var(--sel-bg) !important; }

/* ---------- 7. 表格 ---------- */

table.gridtable{
	border-collapse:collapse;
	margin-bottom:.5rem;
	color:#333;
	background:#fff;
}
table.gridtable th,
table.gridtable td{
	border:1px solid var(--line);
	padding:var(--cell-pad);
}
/* 表格内联表单：操作列的表单与相邻链接（如"开仓"+"分析"）保持同一行。
   form 默认是**块级**元素，会独占一整行、把后面的链接挤到下一行；
   这也是 white-space:nowrap 在 td 上无效的原因——它只约束文本与行内级
   内容的折行，管不到块级盒的独占行行为。
   作用域限定在 gridtable 的 td 内：页面级表单（筛选条 / 配置编辑器 /
   登录 / 策略分析页）是整块布局的容器，必须保持块级，不受本规则影响。 */
table.gridtable td form{ display:inline; }
table.gridtable th{
	font-weight:400;
	background:var(--head-bg);
	border-bottom:2px solid var(--line-strong);
}
table.gridtable tr:nth-child(even){ background:var(--zebra); }
table.gridtable tfoot tr{ background:#fff; }
table.gridtable tfoot td{ font-weight:700; text-align:right; }

/* ---------- 8. Tab ---------- */
.tabbar{
	display:flex; flex-wrap:wrap; align-items:flex-end;
	gap:2px;
	margin:8px 0 10px;
	border-bottom:1px solid var(--line-strong);
	font-size:14px;
}
.tabbar .tab{
	display:inline-block;
	padding:5px 14px;
	color:var(--brand);
	border:1px solid transparent;
	border-bottom:none;
	border-radius:var(--radius) var(--radius) 0 0;
}
.tabbar .tab:hover{ background:var(--brand-soft); text-decoration:none; }
.tabbar .tab.active{
	background:var(--panel);
	border-color:var(--line-strong);
	border-bottom-color:var(--panel);
	margin-bottom:-1px;
	color:var(--fg);
	font-weight:700;
}
.tabbar .tabtools{ margin-left:auto; display:flex; gap:4px; padding-bottom:3px; }

/* ---------- 8b. 子 Tab（主 Tab 内部的一级视图切换） ---------- */
/* 层级暗示全在"更轻、更小、不构成区块分界"三点上：
     主 Tab（.tabbar）：文件夹页签 —— 字号 14px、页签较高、通栏宽度，
        且底边框与内容区连成一条横贯整页的实线（那条线是"页面级区块分界"）；
     子 Tab（.subtabbar）：分段控件 —— 字号 12px、圆角药丸、宽度只包住自身，
        外框是一圈**淡边**（--line 而非 --line-strong），**不画通栏底线**：
        它只是同一区块内的视图切换，不构成区块分界。
   故两者即便同屏出现也不会被误认成同一层级。
   用法：
     <p class='subtabbar'>
       <span class='subtabgroup'>
         <span class='subtab active' onclick="...">甲</span>
         <span class='subtab' onclick="...">乙</span>
       </span>
       <span class='subtabtools'>…靠右的辅助链接…</span>
     </p>
     <div id='panelA'>…</div>
     <div id='panelB' style='display:none'>…</div>
   面板本身不需要样式：切换只改 display（与本工程既有的 #chain_near/#chain_far 同一做法）。
   若面板里有 echarts 图，切回时必须自行 resize —— 详见 strategy_analysis.inja 的 anaShowPanel。 */
.subtabbar{
	display:flex; flex-wrap:wrap; align-items:center; gap:6px;
	margin:6px 0 8px;
	font-size:12px;
}
.subtabbar .subtabgroup{
	display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px;
	padding:2px;
	border:1px solid var(--line);
	border-radius:14px;
	background:var(--head-bg);
}
.subtabbar .subtab{
	display:inline-block;
	padding:2px 12px;
	color:var(--brand);
	border:1px solid transparent;
	border-radius:11px;
	cursor:pointer;
}
.subtabbar .subtab:hover{ background:var(--brand-soft); text-decoration:none; }
.subtabbar .subtab.active{
	background:var(--panel);
	border-color:var(--line);
	color:var(--fg);
	font-weight:700;
}
.subtabbar .subtabtools{ margin-left:auto; display:flex; align-items:center; gap:6px; }

/* ---------- 9. 按钮 ---------- */
button{
	font:inherit;
	padding:3px 12px; min-height:26px;
	border:1px solid var(--line-strong);
	border-radius:var(--radius);
	background:#fff; color:var(--fg);
	cursor:pointer;
}
button:hover{ border-color:var(--brand); color:var(--brand); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; }
.btn-primary:hover{ color:#fff; opacity:.9; }
.cfgbtn{ margin-left:1px; }
.cfgprimary{ font-weight:700; }

/* 链接式按钮：开仓 / 平仓 / 撤单 等 */
.btn-link{
	background:none; border:0; padding:0 4px; min-height:auto;
	color:var(--brand); cursor:pointer; font:inherit;
}
.btn-link:hover{ color:var(--brand); text-decoration:underline; }

/* ---------- 10. 表单 ---------- */
input[type=text],input[type=password],input[type=number],input[type=date],
select,textarea{
	font:inherit;
	padding:2px 6px;
	border:1px solid var(--line-strong);
	border-radius:var(--radius);
	background:#fff; color:var(--fg);
}
input[type=text],input[type=password],input[type=number],input[type=date]{ height:26px; }
select{ height:26px; }
textarea{ font-family:var(--mono); font-size:12px; width:100%; }
input:focus,select:focus,textarea:focus{
	outline:none; border-color:var(--brand);
	box-shadow:0 0 0 2px var(--brand-soft);
}

/* ---------- 11. 提示条 ---------- */
.alert{
	margin:6px 0; padding:6px 10px;
	border:1px solid transparent; border-radius:var(--radius);
}
.alert.ok{ color:var(--ok); background:#f0f9f3; border-color:#cbe8d8; }
.alert.err{ color:var(--danger); background:#fdf0f0; border-color:#f0c0c0; }
.alert.warn{ color:var(--warn); background:#fffaf0; border-color:#f0e0b0; }

/* 内嵌信息面板 */
.panel{
	margin:6px 0; padding:8px 10px;
	border:1px solid var(--line); border-radius:var(--radius);
	background:#fafafa;
}

/* ---------- 12. 配置浏览 / 编辑态 ---------- */
#cfgRoot .vedit{ display:none; }
#cfgRoot.edit .vedit{ display:inline-block; }
#cfgRoot.edit .vtxt{ display:none; }
td.cfgval input.vedit,
td.cfgval select.vedit{ width:8em; text-align:left; }
#cfgTradable textarea.vedit{ width:100%; max-width:100%; }
#cfgRoot.edit #cfgTradable{ border-color:#f0a000; background:#fffdf5; }

/* ---------- 13. 配对详情展开面板 ---------- */
.pair-detail > td{
	background:#fbfbfb;
	border-top:1px dashed #bbb;
	padding:8px 10px;
}
.pair-detail .detail-box{ font-size:12px; color:#333; }
.pair-detail .detail-title{ font-weight:700; margin-bottom:6px; color:var(--brand); }
.pair-detail .detail-title .detail-block{ color:var(--danger); margin-left:10px; }
.pair-detail .detail-title .detail-ok{ color:var(--ok); margin-left:10px; }
.pair-detail .detail-sub{ margin:8px 0 3px; font-weight:700; color:#555; }
.pair-detail .detail-table{ border-collapse:collapse; margin-bottom:4px; }
.pair-detail .detail-table th,
.pair-detail .detail-table td{
	border:1px solid #ddd;
	padding:2px 6px;
	font-size:12px;
	background:#fff;
}
.pair-detail .detail-table th{ background:#eef2f7; font-weight:400; color:#555; }
.pair-detail .detail-table td.gate-group{ background:#eef2f7; font-weight:700; text-align:left; }
.pair-detail tr.gate-fail td{ background:#fff4f4; color:var(--danger); }

/* ---------- 14. 浮动菜单模式（左上角菜单球 + 下拉面板） ---------- */
/* 侧栏模式下不显示菜单球 */
.navball-btn{ display:none; }

/* 浮动模式：侧栏脱离文档流，固定在左上角，只留一个圆球 */
body.nav-float .sidebar{
	position:fixed;
	left:12px; top:calc(var(--header-h) + 12px);
	flex:none; width:auto; height:auto;
	overflow:visible;
	background:transparent;
	border-right:0;
	z-index:40;
}

/* 菜单球：固定定位，不随页面滚动移动 */
body.nav-float .navball-btn{
	display:flex; align-items:center; justify-content:center;
	width:44px; height:44px; padding:0; min-height:0;
	border:0; border-radius:50%;
	background:var(--brand); color:#fff;
	font-size:20px; line-height:1;
	box-shadow:0 3px 10px rgba(0,0,0,.22);
	cursor:grab;
	touch-action:none;			/* 触屏拖拽时禁止页面滚动 */
	user-select:none;
	-webkit-user-select:none;
	transition:transform .15s, box-shadow .15s;
}
body.nav-float .navball-btn:hover{ color:#fff; opacity:.9; }

/* 拖拽中：高亮放大，禁用过渡保证跟手 */
body.nav-float .sidebar.dragging .navball-btn{
	cursor:grabbing;
	transform:scale(1.08);
	box-shadow:0 8px 22px rgba(0,0,0,.32);
	transition:none;
}
body.nav-float .sidebar.dragging .menu{ display:none; }

/* 圆球靠近视口底部时，面板改为向上展开 */
body.nav-float .sidebar.drop-up .menu{ top:auto; bottom:calc(100% + 8px); }

/* 下拉菜单面板：默认收起，点击圆球后展开 */
body.nav-float .menu{
	display:none;
	position:absolute;
	left:0; top:calc(100% + 8px);
	min-width:150px;
	max-height:calc(100vh - var(--header-h) - 80px);
	overflow:auto;
	flex-direction:column;
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 6px 22px rgba(0,0,0,.16);
	padding:6px;
}
body.nav-float .sidebar.open .menu{ display:flex; }
body.nav-float .menu .mi{ text-align:left; }
body.nav-float .menu-form{ text-align:left; }
body.nav-float .menu-check{ text-align:left; }

/* “取消浮动”项：仅在浮动模式下出现 */
.menu-sep.navfloat-only,
.menu .mi.navfloat-only{ display:none; }
body.nav-float .menu-sep.navfloat-only{ display:block; }
body.nav-float .menu .mi.navfloat-only{ display:block; }

/* ---------- 15. 其他组件与工具类（补充） ---------- */
/* V21.73: 原标题"本项目特有"已修正 —— 本节内容（卡片布局 / 登录表单 / 输入框宽度 /
   间距工具类 / 图表容器…）**三个项目逐字相同**，属框架公共件；标成"本项目特有"
   会诱导后来者往框架文件里塞项目专属规则（正是本文件头部禁止的事）。
   本项目真正独有的规则请写进 lightweb-ui-opt.css。 */
/* API 文档小节标题 */
.api_title{ font-weight:700; }

/* 流式卡片布局（自适应换行） */
.modern-layout{
	display:flex; flex-wrap:wrap;
	justify-content:flex-start;
	padding:10px 0;
}
.modern-layout .layout{
	display:block;			/* 覆盖骨架 .layout 的 flex，避免卡片内容横排 */
	margin:5px; padding:5px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--panel);
}

/* 登录表单行间距 */
.loginform table{ border-collapse:separate; border-spacing:0 6px; }

/* 账户分析：两个 tab 的内容宽度上限（账户业绩更宽，以容纳图表） */
.tab-cal{ max-width:30em; }		/* 盈亏日历 */
.tab-perf{ max-width:60em; }	/* 账户业绩 */

/* 左外边距 */
.ml8{ margin-left:8px; }

/* 可排序表头 */
.th-sort{ text-decoration:underline; text-underline-offset:3px; }

/* 输入框宽度 */
.w6{ width:6em; }
.w10{ width:10em; }
.w15{ width:15em; }

/* 字重 */
.fw-normal{ font-weight:400; }

/* 间距 */
.ml1{ margin-left:1em; }
.mt10{ margin-top:10px; }
.pl3{ padding-left:3em; }

/* 最小宽度 */
.mw2{ min-width:2em; }

/* 表单分组框 */
.fieldbox{
	border:1px solid var(--line-strong);
	border-radius:var(--radius);
	padding:10px; max-width:32em;
}

/* 布局辅助 */
.floatright{ float:right; }
.wfull{ width:100%; }
.w50{ width:50%; }
.mb5{ margin-bottom:5px; }
.row-spacer{ height:1em; }

/* 图表容器（自适应宽度，不设最小宽度） */
.chartbox{ width:100%; height:250px; }

/* 删除线（数据不存在） */
.strike-through{ text-decoration:line-through; text-decoration-color:#2b303b; }

/* 保留换行 */
.prewrap{ white-space:pre-wrap; }

/* tfoot 内需要居中的单元格 */
table.gridtable tfoot td.center{ text-align:center; }

/* 分隔列（1px 灰条） */
.sep-col{ background:#ccc; width:1px; padding:0; }

/* 紫色链接 */
.text-purple{ color:Purple; }

/* 置灰删除线 */
.strike-gray{ text-decoration:line-through; color:gray; }

/* 无内边距 */
.p0{ padding:0; }

/* 左右内边距 */
.px3{ padding:0 3px; }

/* ---------- 16. 图表容器与工具类（补充） ---------- */
/* V21.74: 本组由 MarketServer 原 `style-market.css` **上移**而来 —— 它们是**通用**件
   （图表容器 + 顺手能用的工具类），并非市场端专属；原先只因为"StatArbPro 那份框架里没有"
   才被写进 MarketServer 的项目文件。上移后 MarketServer 侧不再重复声明，另两个项目也
   直接可用（此前只是还没用到）。
   ⚠ 与本节同类的"补齐式"规则都应上移到这里，而不是留在某个项目的 lightweb-ui-<proj>.css 里。 */
.chart300{ width:100%; min-width:500px; max-width:900px; height:300px; }
.chart400{ width:100%; min-width:500px; max-width:850px; height:400px; }
.lh400{ line-height:400px; }
.vtop{ vertical-align:top; }
.mt8{ margin-top:8px; }
.form-inline{ display:inline; }