/* ============================================================================
   lightweb-ui-desk.css —— StatArbDesk 项目个性化样式
   ----------------------------------------------------------------------------
   加载顺序：lightweb-ui.css → 本文件（必须在框架之后）
   只写本项目差异，通用规则仍归框架层 lightweb-ui.css。
   内容：顶部多级下拉主菜单、仿真交易左侧栏、占位页卡片。
   ============================================================================ */

/* ---------- 顶栏 ---------- */
.desk-topbar{ gap:10px; padding:0 5px; }
.desk-topbar .brand{ font-size:16px; }
/* 品牌区：左侧 logo 图标 + 右侧「主标题 / 一行小字 slogan」 */
.desk-brand{ display:flex; align-items:center; gap:5px; }
.desk-brand:hover{ text-decoration:none; }
.desk-brand-mark{ width:30px; height:30px; flex:0 0 auto; display:block; }
.desk-brand-text{ display:flex; flex-direction:column; justify-content:center; gap:1px; }
.desk-brand-name{ font-size:13px; font-weight:700; line-height:1.4; }
.desk-brand-slogan{ font-size:9px; font-weight:400; color:var(--fg-dim); line-height:1.15; letter-spacing:.5px; }
.desk-topbar .acct{ font-size:12px; }
/* 登录后「账户」菜单直接显示用户名：过长时省略，避免把菜单挤变形 */
.nav-link-user .nav-label{ max-width:8em; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 主菜单（顶部多级下拉） ---------- */
.topnav{ position:relative; align-self:stretch; display:flex; align-items:center; }
.topnav-list{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; height:100%; }
.nav-item{ position:relative; display:flex; align-items:center; }

.nav-link{
	position:relative;
	display:flex; align-items:center; gap:3px;
	padding:0 12px; height:var(--header-h);
	color:var(--fg); font-size:14px; white-space:nowrap;
	border-bottom:2px solid transparent;
}
/* 带下拉的项：箭头是紧贴主项右侧的独立按钮，右侧内边距让给它，整体视觉间距不变 */
.nav-item.has-drop > .nav-link{ padding-right:0; }
/* 悬浮态挂在 .nav-item 上：鼠标进入下拉面板后主项仍保持高亮，
   让「当前展开的是哪一栏」始终可见。 */
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link,
.nav-item.open > .nav-link,
.nav-link:hover{ color:var(--brand); text-decoration:none; background:var(--brand-soft); }
.nav-item.active > .nav-link{ color:var(--brand); font-weight:700; border-bottom-color:var(--brand); }

/* 主项本身可点击：只给文字加一条「滑入式」下划线（长度与文字一致），
   让人一眼看出主项是链接，而不是分组标题；下划线用背景渐变实现，
   不额外插入元素，也不会和当前栏目的底部色条打架。 */
.nav-label{
	background-image:linear-gradient(var(--brand), var(--brand));
	background-repeat:no-repeat;
	background-position:0 100%;
	background-size:0% 2px;
	transition:background-size .18s ease;
}
.nav-item:hover > .nav-link .nav-label,
.nav-item:focus-within > .nav-link .nav-label{ background-size:100% 2px; }
/* 当前栏目已有底部色条，文字下不再重复一条线 */
.nav-item.active > .nav-link .nav-label{ background-size:0% 2px; }
.nav-link:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }

/* 箭头是独立的 <button>（不能放进 <a>：否则点它只会跳转页面，手机上没有 hover 就再也展不开）。
   按钮自带边框/底色/内边距，这里全部抹掉，只留那个三角。
   高度撑满顶栏：hover 底色与主项连成一片，手指也有一整条可点的热区。 */
.nav-caret{
	display:flex; align-items:center;
	height:var(--header-h);
	min-height:0;	/* 框架层 button 有 min-height:26px */
	margin:0; padding:0 12px 0 3px;
	border:0; border-bottom:2px solid transparent; background:none; border-radius:0;
	font:inherit; color:var(--muted);
	cursor:pointer;
}
/* 当前栏目：底部色条要与主项连着，不能断在文字末尾 */
.nav-item.active > .nav-caret{ border-bottom-color:var(--brand); }
/* 旋转只给三角本身：转整个按钮的话，宽度不对称会把三角甩出去一截 */
.nav-caret-ico{ font-size:10px; line-height:1; transition:transform .18s ease; }
/* 手指比鼠标粗：触屏把箭头这条热区再放宽些，主项文字仍整块可点跳转 */
@media (pointer:coarse){
	.nav-caret{ padding:0 15px 0 12px; }
	.nav-caret-ico{ font-size:30px; }
}
.nav-item:hover > .nav-caret,
.nav-item:focus-within > .nav-caret,
.nav-item.open > .nav-caret{ color:var(--brand); background:var(--brand-soft); }
.nav-item:hover > .nav-caret .nav-caret-ico,
.nav-item:focus-within > .nav-caret .nav-caret-ico,
.nav-item.open > .nav-caret .nav-caret-ico{ transform:rotate(180deg); }
.nav-caret:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
/* 框架层有 button:hover{ border-color:var(--brand) }，会把上面预留的 2px 底边点亮，
   结果箭头上冒出一条贴着顶栏最底部的线，而标题下划线是贴在文字盒子下沿的 —— 两条线不在一个高度。
   箭头不画自己的线，悬浮时只留标题文字下划线；选中栏目的整条色条仍由上面那条规则给。
   （选择器权重 0,2,0 高于框架层的 button:hover 0,1,1，不必用 !important）
   想让箭头也有线且与标题齐平，得按文字行高反算 46px 按钮里的偏移，改字号就会错位，不划算。 */
.nav-caret:hover,
.nav-caret:focus,
.nav-caret:focus-visible{ border-color:transparent; }

/* 下拉面板：鼠标悬浮 / 键盘聚焦即展开 */
.nav-drop{
	display:none; position:absolute; top:100%; left:0;
	min-width:250px; padding:6px;
	background:var(--panel); border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 8px 24px rgba(16,24,40,.14);
	z-index:60;
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop{ display:block; }
/* 点箭头展开（JS 加 .open）：桌面、手机都认，且能再点一下收起 */
.nav-item.open > .nav-drop{ display:block; }
/* 触屏没有 hover：只认点击箭头产生的 .open —— 否则点一下会因 :focus-within 闪一下就收不回去 */
@media (hover:none){
	.nav-item:hover > .nav-drop,
	.nav-item:focus-within > .nav-drop{ display:none; }
	.nav-item.open > .nav-drop{ display:block; }
}
/* 悬停桥：避免鼠标从主项移到面板时穿过缝隙而关闭 */
.nav-drop::before{ content:""; position:absolute; top:-6px; left:0; right:0; height:6px; }

.drop-item{
	display:block; padding:8px 10px;
	border-radius:var(--radius); color:var(--fg);
	text-decoration:none;
}
.drop-item:hover{ background:var(--brand-soft); text-decoration:none; }
.drop-title{ display:block; font-size:14px; font-weight:700; line-height:1.35; }
.drop-desc{ display:block; font-size:12px; color:var(--muted); line-height:1.35; margin-top:2px; }
.drop-sep{ height:1px; background:var(--line-soft); margin:5px 6px; }

/* ---------- 内容与占位页 ---------- */
.desk-content{ max-width:none;padding-bottom:0px;}
.page-title{ margin:.2em 0 .2em; font-size:16px; }
.page-desc{ margin:0 0 12px; color:var(--muted); font-size:13px; }

.panel{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:12px 14px;
}
.placeholder{
	border-style:dashed;
	color:var(--fg-dim);
	min-height:96px;
	display:flex; align-items:center; justify-content:center;
	text-align:center; line-height:1.8;
}
.placeholder .big{ font-size:15px; color:var(--fg-dim); }

/* ---------- 跨期价差分析：左「合约多选」右「工具条 + 价差图 + 配对列表」 ----------
   固定左右两列（不做流式换行）：左列 196px（比原先的 14em 窄 1em）不变、可纵向滚动
   （活动合约能有几十个），右列吃掉剩余宽度；窗口再窄也不改成上下排列，宁可整页横向滚动。 */
.pair-builder{ display:flex; align-items:flex-start; gap:16px; }
.pair-pick{
	flex:0 0 170px; width:170px;
	background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
	padding:8px;
}
.pair-pick-head{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px;
	padding:2px 4px 6px; margin-bottom:6px;
	font-size:12px; font-weight:700; color:var(--muted);
	border-bottom:1px solid var(--line-soft);
}
.pair-pick-list{ display:flex; flex-direction:column; gap:1px; max-height:430px; overflow:auto; }
/* 勾选说明下面的快捷入口（期限结构 / 最新行情）：两个小链接并排 */
.pair-pick-links{ display:flex; gap:10px; margin-top:2px; font-size:12px; }
/* 栏头右侧的「清除」：一次取消所有勾选（纯前端，不发请求） */
.pair-pick-clear{ margin-left:auto; font-size:10px; color:var(--muted); font-weight:400; }
.pair-pick-clear:hover{ color:var(--brand); text-decoration:underline; }
.pair-pick-item{
	display:flex; align-items:center; gap:5px;
	padding:3px 4px; border-radius:var(--radius);
	font-size:13px; cursor:pointer; white-space:nowrap;
}
.pair-pick-item:hover{ background:var(--brand-soft); }
.pair-pick-item input{ margin:0; }
.pair-pick-code{ font-family:var(--mono); font-size:13px; }
/* 到期天数：靠右对齐（margin-left:auto），数字用等宽小字，单位「天」再小一号，
   窄面板里也不挤合约代码、不会把「主」标签顶走 */
.pair-pick-days{
	margin-left:auto; padding-left:4px;
	font-family:var(--mono); font-size:11.5px; color:var(--muted);
	white-space:nowrap;
}
.pair-pick-days i{ font-style:normal; font-size:9.5px; margin-left:1px; }
.pair-view{ flex:1 1 auto; min-width:800px; }
.pair-toolbar{ margin:0 0 10px; }
/* 价差图整体（标题 + 画布）的宽度由这一层决定：最小 800px（右列被窗口挤窄时不再压缩，
   宁可整页横向滚动），最大 1280px（大显示器上不再跟着铺满）。标题就按这一层居中，
   也就是按「图」居中，而不是按浏览器/整页居中 */
.pair-chart-box{ width:100%; min-width:800px; max-width:1280px; }
/* 价差图标题：配对代码（等宽、稍重）+ 生成时间（小灰字），在图上方居中 */
.pair-chart-title{
	display:flex; align-items:baseline; justify-content:center; gap:8px;
	margin:0;
}
.pair-chart-pair{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--fg); }
/* 单合约时图里画的是价格（不是价差）：跟在配对代码后面的一颗小灰字 */
.pair-chart-kind{ font-size:11px; color:var(--muted); }
.pair-chart-time{ font-size:11.5px; color:var(--muted); }
.pair-chart{ width:100%; height:430px; }
/* 配对列表（图下方，一行一条，不用表格）：代码 + 腿/表达式/区间/代数/点数 + 最新/极值 */
.pair-list{
	list-style:none; margin:10px 0 0; padding:8px 10px;
	background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
	font-size:12.5px;
}
.pair-list li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:1px 10px; }
.pair-list li + li{ margin-top:5px; padding-top:5px; border-top:1px dashed var(--line-soft); }
.pair-list-code{ font-family:var(--mono); color:var(--brand); font-weight:700; }
.pair-list-meta{ color:var(--fg-dim); }
/* 缺某年合约之类的说明：跟在行尾，用琥珀色区分，不占一列 */
.pair-list-note{ color:#b58900; }

/* ---------- 跨品种价差分析：左「品种 B 在品种 A 下面」右「工具条 + 价差图 + 配对列表」 ----------
   左边竖着堆两个选择器（A 在上、B 在下），每个里面是「交易所下拉 + 品种列表」；
   品种列表分三小列（一个交易所几十个品种，列少了太高），不出滚动条、高度自然撑开。 */
.cross-builder{ display:flex; align-items:flex-start; gap:16px; }
.cross-pickers{ flex:0 0 auto; display:flex; flex-direction:column; gap:12px; width:300px; }
.cross-pick{
	background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
	padding:8px;
}
.cross-pick-head{
	display:flex; align-items:center; gap:6px;
	padding:0 2px 5px; margin-bottom:5px;
	font-size:12px; font-weight:700; color:var(--muted);
	border-bottom:1px solid var(--line-soft);
}
/* 交易所下拉跟「品种 A 左腿」挤在同一行：靠右、压窄，省掉一整行高度。
   换交易所时表单立刻提交（该侧品种清空，由服务端回落到新交易所） */
.cross-pick-head select{
	margin-left:auto; width:auto; max-width:150px;
	height:22px; padding:0 2px; font-size:12px; font-weight:400; color:var(--fg);
}
/* 三小列、无滚动条：max-height/overflow 一律不设，品种多了整块往下长 */
.cross-pick-list{
	display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
	column-gap:4px; row-gap:0;
}
.cross-pick-item{
	display:flex; align-items:baseline; gap:4px; min-width:0;
	padding:3px 4px; border-radius:var(--radius);
	font-size:12.5px; white-space:nowrap; color:var(--fg);
}
.cross-pick-item:hover{ background:var(--brand-soft); }
/* 选中项：品牌色淡底 + 加粗，一眼看清左右腿各是谁 */
.cross-pick-item.active{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
/* 中文名超长时只截名字，代码那一截始终留在右侧不被挤掉 */
.cross-pick-name{ overflow:hidden; text-overflow:ellipsis; }
.cross-pick-code{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); }
.cross-pick-item.active .cross-pick-code{ color:var(--brand); }

/* ---------- 自定义公式（/spread/custom_formula.jsp）左侧面板 ----------
   与跨品种页同一个 .cross-pickers 左栏：标题「选择公式」后面是两个链接（添加 / 管理），
   下面是该账号的公式列表；点「添加 / 修改」时整块换成输入面板，所以左栏要临时加宽
   （一行是「方向 + 品种 + 乘数 + 删除」，300px 放不下）。 */
.cross-pickers.cform-adj{ width:220px; }
.cross-pickers.cform-wide{ width:auto; min-width:20em; max-width:34em; }
.cform-head{ gap:8px; }
.cform-title{ margin-right:auto; }
.cform-link{ font-size:12px; font-weight:400; white-space:nowrap; }
.cform-list{ display:flex; flex-direction:column; gap:2px; }
/* 一行 = 名称（上行）+ 公式（下行小灰字）+ 管理态下的「修改 / 删除」 */
.cform-item{ display:flex; align-items:center; gap:6px; padding:2px 4px; border-radius:var(--radius); }
.cform-item:hover{ background:var(--brand-soft); }
.cform-item.active{ background:var(--brand-soft); }
.cform-formula{
	flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;
	font-size:12.5px; color:var(--fg);
}
.cform-name,
.cform-formula-text{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cform-formula-text{ font-family:var(--mono); font-size:11px; color:var(--muted); }
/* 一行 = 公式（左，可省略）+ 手数配比（右，靠右对齐） */
.cform-line{ display:flex; align-items:baseline; gap:6px; max-width:100%; }
.cform-line > .cform-name,
.cform-line > .cform-formula-text{ flex:0 1 auto; min-width:0; }
.cform-ratio{
	margin-left:auto; flex:0 0 auto; padding-left:6px;
	font-family:var(--mono); font-size:11px; font-weight:400; color:var(--muted);
}
.cform-item.active .cform-formula{ color:var(--brand); font-weight:700; }
.cform-item.active .cform-formula-text{ color:var(--brand); font-weight:400; }
.cform-item .cform-edit{ flex:0 0 auto; font-size:11.5px; }
.cform-item .cform-del{ flex:0 0 auto; margin:0; }
.cform-item .cform-del button{ font-size:11.5px; padding:0; }
.cform-time{ flex:0 0 auto; font-size:11px; color:var(--muted); }
/* 输入面板：表格上方一行「名称」 */
.cform-field{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.cform-field > label{ flex:0 0 auto; font-size:12px; color:var(--muted); }
.cform-field > input[type=text]{ flex:1 1 auto; min-width:0; }
/* 输入面板：品种选择沿用框架的 .picker（只读输入框 + 弹出面板），这里只压窄一点 */
.cform-formula-table .picker-pop{ width:24em; }
.cform-formula-table .picker > input[type=text]{ font-family:var(--mono); }
.cform-dir{ width:4em; text-align:center; font-family:var(--mono); color:var(--brand); }
.cform-mult{ display:inline-flex; align-items:center; gap:2px; }
.cform-mult input{ width:5em; }
/* 公式预览：输入时实时拼出来的「jd-c*1.3+m」，就是保存进库的值 */
.cform-preview{
	margin:8px 0; padding:6px 8px; border:1px dashed var(--line-strong); border-radius:var(--radius);
	background:#fbfcfd; font-size:12.5px; color:var(--fg-dim);
}
.cform-preview b{ font-family:var(--mono); font-size:13px; color:var(--brand); word-break:break-all; }

/* ---------- 选项胶囊列表（tagbox）：无边框、无底色、无分隔线 ----------
   与 .subtabbar（分段控件：有外框、跟着容器铺满）区分：
     - 整块不加边框/底色，透明地铺在页面上，靠行首「品种」小标签说明这是选择项；
     - 可点感做在每一颗胶囊上：未选中是淡底无边框，选中才有品牌色边框；
   胶囊里分「中文名 + 代码」两段（.tag-name / .tag-code），代码用小号等宽灰字，
   扫一眼能按名称找、按代码核对。实时行情与跨期价差分析的品种列表共用。 */
.tagbox{
	display:flex; flex-wrap:wrap; align-items:center; gap:4px;
	margin:0 0 10px; padding:0;
	border:0; border-radius:0;
	background:none;
}
/* 行首小标签（「品种」）：说明这一排是可选可点的，不是正文 */
.tagbox .tag-label{
	padding:2px 2px 2px 0; margin-right:2px;
	color:var(--muted); font-size:12px; white-space:nowrap;
}
/* 每个胶囊一块淡底（不带边框）：既和正文拉开、又不像一颗颗「按钮」那么重；
   边框只留给选中项，未选中用透明边框占位，切换时不会抖 1px */
.tagbox .tag-item{
	display:inline-flex; align-items:baseline; gap:4px;
	padding:2px 8px; border:1px solid transparent; border-radius:4px;
	background:#f4f6f9; color:var(--fg-dim);
	font-size:12.5px; line-height:1.6; white-space:nowrap;
	transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.tagbox .tag-item .tag-code{
	font-family:var(--mono); font-size:11px; color:var(--muted);
	transition:color .12s ease;
}
/* 悬浮：淡底再深一档 + 文字转品牌色，明确「点得动」 */
.tagbox .tag-item:hover{
	background:#e9eef4; color:var(--brand); text-decoration:none;
}
.tagbox .tag-item:hover .tag-code{ color:var(--brand); }
/* 选中：浅蓝底 + 品牌色边框与文字，与未选中的灰胶囊拉开层级 */
.tagbox .tag-item.active{
	background:var(--brand-soft); border-color:var(--brand);
	color:var(--brand); font-weight:700;
}
.tagbox .tag-item.active .tag-code{ color:var(--brand); font-weight:400; }

/* ---------- 首页：系统通知条 ---------- */
/* 一行内「图标 + 标签 + 内容 + 日期」，窄屏时内容换行、日期仍靠右 */
.home-notice{
	display:flex; align-items:center; gap:8px;
	margin:0 0 18px; padding:8px 12px;
	font-size:12.5px; line-height:1.7;
	color:var(--warn);
	background:#fffaf0;
	border:1px solid #f0e0b0; border-radius:var(--radius);
}
.home-notice-icon{ display:flex; flex:0 0 auto; color:var(--warn); }
.home-notice-tag{ flex:0 0 auto; font-weight:700; }
.home-notice-text{ flex:1 1 auto; min-width:0; color:var(--fg-dim); }
.home-notice-date{ flex:0 0 auto; font-size:12px; color:var(--muted); }

/* ---------- 首页：左侧流式面板 + 右侧固定栏（右栏任何宽度下都不换行） ---------- */
.home-layout{ display:flex; align-items:stretch; gap:0; }
/* 左栏右侧留出 20px，避免面板贴着分割线 */
.home-main{ flex:1 1 auto; min-width:0; padding-right:20px; }
/* 右栏：与左侧流式区用一条竖分割线分开；高度撑满整行，分割线才是通长的 */
.home-side{
	flex:0 0 282px;				/* 20px 左内边距 + 262px 内容宽 */
	border-left:1px solid var(--line);
	padding-left:20px;
	min-height:30em;	/*撑开首页高度*/
}
/* 内容整体吸顶（外层被拉伸时，吸附交给内层，否则 sticky 没有移动空间） */
.home-side-inner{
	/*position:sticky;*/
	top:calc(var(--header-h) + 12px);
	display:flex; flex-direction:column; gap:18px;
}
/* 窄屏也不换行：只压缩右栏宽度，左侧面板自动减少列数 */
@media (max-width:1100px){
	.home-main{ padding-right:14px; }
	.home-side{ flex:0 0 242px; padding-left:14px; }
}
@media (max-width:900px){
	.home-main{ padding-right:12px; }
	.home-side{ flex:0 0 210px; padding-left:12px; }
}
/* 极窄窗口：右栏再收窄，左侧面板改为整行铺满（不再限制最小宽度，避免横向滚动条） */
@media (max-width:760px){
	.home-main{ padding-right:10px; }
	.home-side{ flex:0 0 180px; padding-left:10px; }
	.home-flow .home-panel{ flex:0 0 100%; max-width:100%; min-width:0; }
}
/* 订阅状态小卡：左侧「剩余天数」，右侧到期/状态 */
.home-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;}
.home-sub-main{ flex:0 0 auto; min-width:50px; text-align:center;}
.home-sub-days{ font-size:32px; font-weight:700; line-height:1.1; color:var(--brand); letter-spacing:.5px; }
.home-sub-days.is-warn{ color:var(--warn); }
.home-sub-days.is-expired{ color:var(--danger); }
.home-sub-days.is-none{ color:var(--muted); }
.home-sub-days-unit{ margin-left:4px; font-size:12px; font-weight:400; color:var(--fg-dim); letter-spacing:0; }
.home-sub-label{ margin-top:2px; font-size:12px; color:var(--muted); }
/* 续订：紧跟天数块，相对天数块垂直居中 */
.home-sub-renew{
	align-self:center; padding:1px 10px;
	font-size:12px; line-height:1.6; white-space:nowrap;
	color:var(--brand); border:1px solid var(--brand); border-radius:10px;
	text-decoration:none;
}
.home-sub-renew:hover{ color:var(--brand); background:var(--brand-soft); text-decoration:none; }
.home-sub-meta{ flex:1 1 140px; font-size:12.5px; line-height:2; color:var(--fg-dim); }
.home-sub-meta b{ color:var(--fg); font-weight:600; }

/* ---------- 首页：面板流式布局（新闻栏目式：无卡片边框 + 标题下分隔线） ---------- */
/* 真·流式：flex 自动换行 —— 一行最多 3 列；宽度不够就自动掉行 */
.home-flow{ display:flex; flex-wrap:wrap; gap:18px 20px; }
/* 一行最多 3 列；flex-grow 让同排面板等分本档列宽（max-width 兜住，不会超过 3 列/2 列该有的宽度） */
.home-flow .home-panel{
	flex:1 1 calc(33.333% - 14px);
	max-width:calc(33.333% - 14px);
	min-width:0;
}
/* 变窄时整列降档：2 列等分半宽、1 列整行，面板不会停留在三分之一宽 */
@media (max-width:1100px){
	.home-flow .home-panel{ flex-basis:calc(50% - 10px); max-width:calc(50% - 10px); }
}
@media (max-width:760px){
	.home-flow .home-panel{ flex-basis:100%; max-width:100%; }
}
.home-panel{
	margin:0; padding:0; min-height:96px;
	background:transparent; border:0; border-radius:0;
}
/* 右栏：卡片风格（白底 + 边框 + 圆角），与左侧新闻栏目的无框样式区分开 */
.home-side-inner .home-panel{
	flex:0 0 auto; min-width:0;
	padding:12px 14px;
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 1px 2px rgba(16,24,40,.05);
}
/* 卡片内标题不再画分隔线（边框已经承担分区），省一点纵向空间 */
.home-side-inner .home-panel-head{ padding-bottom:0; margin-bottom:8px; border-bottom:0; }
.home-side-inner .home-panel:last-child{ margin-bottom:0; }
/* 栏目标题行：标题 + 右侧「更多...」，下沿一条细分隔线 */
.home-panel-head{
	display:flex; align-items:baseline; gap:8px;
	padding-bottom:6px; margin-bottom:8px;
	border-bottom:1px solid var(--line);
}
.home-panel-title{
	display:flex; align-items:center; gap:6px;
	margin:0; font-size:14.5px; font-weight:700; color:var(--fg);
}
/* 标题前的小色条：与左侧栏/子页签统一的一级强调 */
.home-panel-title::before{
	content:""; width:3px; height:13px; border-radius:1px; background:var(--brand);
}
.home-panel-more{ margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
.home-panel-more:hover{ color:var(--brand); text-decoration:none; }
.home-panel-desc{ margin:0; font-size:12.5px; line-height:1.8; color:var(--fg-dim); }

/* ---------- 通用：左侧二级导航 + 右侧主区（subnav-*） ----------
   结构：<div class="subnav-layout">
           <aside class="subnav-sidebar"> <div class="subnav-title">…</div>
                                          <nav class="subnav-menu"> <a class="subnav-item">…</a> </nav>
           </aside>
           <section class="subnav-main">…</section>
         </div>
   与框架层整页骨架（.layout / .sidebar / .content）区分：这一套用于内容区内部的二级栏，
   固定 170px、圆角面板、跟随顶栏 sticky；仿真交易、系统管理等分区页面共用，
   后续新增分区的二级栏直接沿用，不要再按业务另起前缀。 */
.subnav-layout{ display:flex; align-items:flex-start; gap:16px; }
.subnav-sidebar{
	/* 固定 170px：不随窗口拉伸/压缩，与右侧主区始终左右并排（不做流式堆叠）。
	   position:sticky 暂未启用（同 .home-side-inner，滚动时整页一起走）。 */
	flex:0 0 170px; width:170px; min-width:170px;
	top:calc(var(--header-h) + 12px);
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:8px;
}
.subnav-title{
	padding:6px 10px 8px;
	font-size:12px; font-weight:700; color:var(--muted);
	border-bottom:1px solid var(--line-soft);
	margin-bottom:6px;
}
.subnav-menu{ display:flex; flex-direction:column; gap:2px; }
.subnav-item{ display:block; padding:7px 10px; border-radius:var(--radius); color:var(--fg); text-decoration:none; }
.subnav-item:hover{ background:var(--brand-soft); text-decoration:none; }
.subnav-item.active{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.subnav-item-title{ display:block; font-size:14px; }
.subnav-item-desc{ display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.subnav-main{ flex:1 1 auto; min-width:0; }

/* ---------- 管理页横向表单 / 表格滚动 ---------- */
.form-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.form-row label{ color:var(--fg-dim); font-size:13px; white-space:nowrap; }
/* 工具条里靠右的按钮（如「添加账户」）：与左侧查找区拉开 */
.toolbar-end{ margin-left:auto; }

/* ---------- 列表页工具条（筛选 / 操作区） ----------
   用法：<div class="toolbar"><form class="form-row">…</form></div>
   与 .panel（内嵌信息块：灰底、无投影）区分：工具条是整行的操作区，
   浅色渐变 + 细边 + 轻投影，控件比正文里略高一点，便于点击。 */
.toolbar{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
	margin:0 0 10px; padding:9px 12px;
	background:linear-gradient(180deg,#fdfefe,#f6f8fb);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.05);
}
/* 表单行撑满工具条，标签与控件基线对齐 */
.toolbar .form-row{ flex:1 1 auto; gap:8px 10px; }
.toolbar label{ font-size:12.5px; color:var(--fg-dim); }
.toolbar input[type=text],.toolbar input[type=password],
.toolbar input[type=number],.toolbar input[type=date],
.toolbar select{ height:28px; }
.toolbar button{ height:28px; }
/* 工具条里的竖线分隔（搜索 | 添加） */
.toolbar .toolbar-sep{ color:var(--line-strong); user-select:none; }
@media (max-width:760px){
	.toolbar{ padding:8px 10px; }
}
.w20{ width:20em; }
.table-wrap{ overflow-x:auto; }
/* 长文本列（备注、操作详情）：限宽换行，避免把表格顶宽 */
.cell-note{ max-width:600px; white-space:normal; word-break:break-word; line-height:1.6; }
/* 账户详情页：操作按钮行 + 展开的修改信息面板 */
.detail-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.info-edit{
	margin-top:10px; padding:10px 12px;
	border:1px dashed var(--line-strong); border-radius:var(--radius);
	background:#fcfcfd;
}
/* 修改信息面板：每个 .form-row 自成一行，行与行之间留 6px */
.info-edit form{ display:flex; flex-direction:column; gap:6px; }
.info-edit .form-row{ gap:6px 10px; }
.info-edit .comments{ margin:8px 0 0; }
.log-table td{ vertical-align:top; }

/* 列表分页条：左「共 N 条 / 第 x-y 页」，中页码，右每页条数 */
.pager{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	padding:6px 2px;
	font-size:13px; color:var(--fg-dim);
}
.pager-info{ margin-right:auto; }
.pager-links{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.pager-btn{
	display:inline-block; min-width:26px; height:26px; line-height:24px;
	padding:0 8px; text-align:center;
	border:1px solid var(--line-strong); border-radius:var(--radius);
	background:#fff; color:var(--fg); text-decoration:none;
}
.pager-btn:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.pager-btn.active{
	border-color:var(--brand); background:var(--brand); color:#fff; font-weight:700;
}
.pager-btn.active:hover{ color:#fff; }
/* 首页/末页方向键不可用：置灰且不响应点击 */
.pager-btn.disabled{ color:var(--muted); border-color:var(--line); background:var(--zebra); pointer-events:none; }
.pager-ps{ display:flex; align-items:center; gap:6px; }
.pager-ps select{ height:26px; }
/* 分页条放在表格末行（tfoot>tr>td）时：居中左排、不撑开表格，
   并覆盖框架 `table.gridtable tfoot td` 的右对齐 + 加粗 */
table.gridtable tfoot td.pager-cell{ padding:5px 8px; text-align:left; font-weight:400; }
table.gridtable tfoot td.pager-cell .pager{ gap:12px; padding:0; }
/* 左边「共 N 条」，页码与每页条数整体靠右（margin-right:auto 把后续项推到最右） */
table.gridtable tfoot td.pager-cell .pager-info{ margin-right:auto; }

/* ---------- 我的权益：信息 / 订阅状态 / 订阅记录 ---------- */
.me-page{ max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
/* 被禁用 / 未订阅 / 已到期：顶部醒目提示 */
.me-alert{
	display:flex; gap:12px; align-items:flex-start;
	padding:12px 14px;
	border:1px solid #efc4c4; border-radius:var(--radius);
	background:linear-gradient(180deg,#fdf3f3,#fbeaea);
}
.me-alert-icon{
	flex:0 0 auto; width:22px; height:22px; margin-top:1px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--danger); color:#fff;
	font-size:13px; font-weight:700;
}
.me-alert-title{ font-size:13.5px; font-weight:700; color:#b32f2f; letter-spacing:.5px; }
.me-alert-text{ margin-top:4px; font-size:12.5px; line-height:1.75; color:#8a5454; }

.me-card .page-title{ margin-bottom:10px; }
/* 一行两列、等宽：「我的信息」与「订阅状态」并排 */
.me-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* 信息表 + 下方操作按钮 */
.me-info-wrap{ display:flex; flex-direction:column; gap:10px; }
.me-info-table{ width:100%; margin-bottom:0; }
.me-info-actions{ display:flex; flex-direction:row; gap:8px; }
.me-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.me-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.me-field label{ font-size:12.5px; color:var(--fg-dim); }
.me-field input{ width:100%; }

/* 订阅状态：左侧天数、右侧明细 */
.me-status-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.me-status-main{ flex:0 0 auto; min-width:120px; text-align:center; }
.me-status-meta{ flex:1 1 260px; min-width:220px; }
.me-meta-line{ margin-bottom:6px; font-size:13px; color:var(--fg-dim); }
.me-meta-line b{ color:var(--fg); font-weight:600; }
.me-days{ font-size:44px; font-weight:700; line-height:1.05; color:var(--brand); letter-spacing:1px; }
.me-days.is-warn{ color:var(--warn); }
.me-days.is-expired{ color:var(--danger); }
.me-days-none{ color:var(--muted); }
.me-days-unit{ font-size:13px; font-weight:400; color:var(--fg-dim); margin-left:5px; letter-spacing:0; }
.me-days-label{ margin-top:6px; font-size:12px; color:var(--muted); letter-spacing:1px; }
.me-renew{
	margin-top:10px; padding-top:10px;
	border-top:1px dashed var(--line);
	font-size:11.5px; line-height:1.85; color:var(--muted);
}
.me-subs-empty{ margin:0; padding:16px; text-align:center; font-size:12.5px; color:var(--muted); }

/* 可订阅套餐：从左到右的卡片列表（等宽、可换行） */
.plan-cards{ display:flex; flex-wrap:wrap; gap:12px; }
.plan-card{
	position:relative;
	flex:0 0 178px;
	display:flex; flex-direction:column; gap:4px;
	padding:14px 14px 12px;
	border:1px solid #cfe3f5; border-radius:var(--radius);
	background:linear-gradient(180deg,#ffffff 0%,#eef6fd 100%);
	box-shadow:0 1px 2px rgba(16,24,40,.04);
	transition:border-color .16s, box-shadow .16s, transform .16s;
}
/* 顶部品牌色细条：卡片一眼可辨、又不会太抢 */
.plan-card::before{
	content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px;
	background:linear-gradient(90deg,var(--brand),#5aa9e6);
	border-radius:var(--radius) var(--radius) 0 0;
}
.plan-card:hover{
	border-color:var(--brand);
	box-shadow:0 8px 20px rgba(0,102,153,.16);
	transform:translateY(-2px);
}
.plan-card-name{ font-size:13.5px; font-weight:700; color:var(--fg); }
.plan-card-price{
	display:flex; align-items:baseline; gap:1px;
	font-size:26px; font-weight:700; line-height:1.15; color:var(--brand);
}
.plan-card-cur{ font-size:14px; font-weight:400; color:var(--brand); opacity:.75; }
.plan-card-meta{ font-size:12px; color:var(--fg-dim); }
/* 「折合月价」压到卡片底部，并用一条淡虚线分隔，同排卡片看起来更齐 */
.plan-card-sub{
	margin-top:auto; padding-top:8px;
	border-top:1px dashed #cfe3f5;
	font-size:12px; color:#5b7c99;
}
/* 只读信息表：左列标签、右列值 */
.me-info-table td:first-child{ width:80px; color:var(--fg-dim); white-space:nowrap; }

/* 窄屏放不下两列（半宽后表格/天数会被挤扁），改回上下堆叠 */
@media (max-width:820px){
	.me-pair{ grid-template-columns:1fr; }
}
@media (max-width:640px){
	.me-row{ grid-template-columns:1fr; }
	.me-status-row{ gap:14px; }
	.me-status-main{ text-align:left; }
}

/* ---------- 居中内容页（注册等单卡片页面） ---------- */
.center-page{
	display:flex; align-items:center; justify-content:center;
	min-height:calc(100vh - var(--header-h) - 90px);
	padding:30px 20px;
}
.center-page > .panel{ width:100%; max-width:520px; margin:0; text-align:center; }
.center-page > .panel .page-title{ margin-top:0; }

/* ---------- 登录页：左侧网站介绍 + 右侧登录 ---------- */
.lg-page{
	display:flex; align-items:center; justify-content:center;
	min-height:calc(100vh - var(--header-h) - 85px);
	padding:30px 20px;
	background:radial-gradient(900px 320px at 50% -10%, #f7f1e2 0%, rgba(247,241,226,0) 70%);
}
.lg-shell{
	display:grid; grid-template-columns:1.05fr .95fr;
	max-width:1000px; margin:0 auto;
	background:#fff;
	border:1px solid #e8e2d4; border-radius:14px; overflow:hidden;
	box-shadow:0 12px 34px rgba(14,34,56,.10);
}

/* 左：深海军蓝介绍栏 */
.lg-intro{
	position:relative; overflow:hidden;
	display:flex; flex-direction:column; gap:16px;
	padding:34px 34px 26px;
	color:#F5EFE0;
	background:
		radial-gradient(420px 260px at 100% 0%, rgba(212,175,55,.20), transparent 65%),
		linear-gradient(155deg,#122A42 0%,#0E2238 58%,#0b1b2c 100%);
}
/* 六边形水印，呼应龟壳 */
.lg-intro::after{
	content:""; position:absolute; right:-74px; bottom:-96px;
	width:260px; height:260px;
	border:2px solid rgba(212,175,55,.18);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	transform:rotate(12deg); pointer-events:none;
}
.lg-brandline{ display:flex; align-items:center; gap:12px; }
.lg-mark{ width:46px; height:46px; display:block; }
.lg-title{ font-size:19px; font-weight:700; letter-spacing:4px; line-height:1.25; }
.lg-slogan{ font-size:10.5px; color:#D4AF37; letter-spacing:2.5px; margin-top:3px; }
.lg-headline{ margin:4px 0 0; font-size:26px; line-height:1.45; letter-spacing:1px; color:#fff; }
.lg-headline em{ font-style:normal; color:#F0D48A; }
.lg-lead{ margin:0; max-width:34em; font-size:13px; line-height:1.9; color:rgba(245,239,224,.72); }
.lg-feats{
	list-style:none; margin:2px 0 0; padding:0;
	display:grid; grid-template-columns:1fr 1fr; gap:12px 18px;
}
.lg-feats li{ position:relative; padding-left:14px; }
.lg-feats li::before{
	content:""; position:absolute; left:0; top:.62em;
	width:5px; height:5px; background:#D4AF37; border-radius:1px; transform:rotate(45deg);
}
.lg-feats b{ display:block; font-size:13.5px; font-weight:700; color:#F5EFE0; letter-spacing:.5px; }
.lg-feats span{ display:block; margin-top:2px; font-size:11.5px; line-height:1.5; color:rgba(245,239,224,.62); }
.lg-note{
	margin:auto 0 0; padding-top:14px;
	border-top:1px solid rgba(212,175,55,.22);
	font-size:11.5px; letter-spacing:1px; color:rgba(245,239,224,.55);
}

/* 右：登录表单 */
.lg-panel{
	display:flex; flex-direction:column; justify-content:center;
	padding:38px 40px 30px;
}
.lg-panel h2{ margin:0; font-size:19px; font-weight:700; letter-spacing:3px; color:#0E2238; }
.lg-panel-desc{ margin:6px 0 20px; font-size:12.5px; color:#7a8794; }
.lg-field{ margin-bottom:14px; }
.lg-field label{ display:block; margin-bottom:5px; font-size:12.5px; letter-spacing:.5px; color:#5b6470; }
.lg-input{ position:relative; }
.lg-input input{
	width:100%; height:40px; padding:0 12px;
	font-size:14px; color:var(--fg);
	background:#fcfcfd; border:1px solid #d9dde2; border-radius:6px;
	transition:border-color .15s, box-shadow .15s, background .15s;
}
.lg-input input::placeholder{ color:#a8b0b8; }
.lg-input input:focus{
	outline:none; border-color:#D4AF37; background:#fff;
	box-shadow:0 0 0 3px rgba(212,175,55,.16);
}
.lg-input input.lg-pwd{ padding-right:52px; }	/* 给「显示」按钮留位，切换 type 后依然有效 */
.lg-eye{
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	height:26px; min-height:26px; padding:0 8px;
	font-size:12px; color:#7a8794;
	border:0; background:transparent; border-radius:4px;
}
.lg-eye:hover{ color:#0E2238; background:#f1efe9; border:0; }
.lg-submit{
	width:100%; height:42px; margin-top:8px;
	font-size:14px; font-weight:700; letter-spacing:6px; text-indent:6px;
	color:#F5EFE0; border:1px solid #0E2238; border-radius:6px; cursor:pointer;
	background:linear-gradient(180deg,#16324c,#0E2238);
	transition:background .15s, transform .05s;
}
.lg-submit:hover{ background:linear-gradient(180deg,#1b3a57,#122A42); }
.lg-submit:active{ transform:translateY(1px); }
.lg-submit:focus-visible{ outline:2px solid rgba(212,175,55,.65); outline-offset:2px; }
.lg-hint{ margin:16px 0 0; font-size:12px; line-height:1.8; color:var(--muted); }

@media (max-width:880px){
	.lg-page{ padding:20px 12px 40px; }
	.lg-shell{ grid-template-columns:1fr; max-width:520px; }
	.lg-intro{ padding:24px 24px 20px; gap:13px; }
	.lg-headline{ font-size:21px; }
	.lg-lead{ font-size:12.5px; line-height:1.8; }
	.lg-panel{ padding:26px 24px 24px; }
}
@media (max-width:520px){
	.lg-feats{ grid-template-columns:1fr; gap:10px; }
	.lg-intro::after{ display:none; }
}

/* ---------- 日线图表（/market/history_query.jsp?tab=chart） ----------
   框架层 .chart300/.chart400 是「单子图」尺寸（最高 400px、最宽 900px），
   K线 + 成交量两个子图再加缩放滑块放不下，这里按本项目尺寸单独给一档。 */
.daychart{
	width:100%; min-width:520px; max-width:1100px; height:460px;
	margin-top:6px; background:#fff;
	border:1px solid var(--line); border-radius:var(--radius);
}
/* 无数据时容器退回文字占位（沿用 .lh400 的行高居中） */
.daychart.lh400{ border:0; background:transparent; }

/* ---------- 配对表 / 策略扫描（/scan/spread_table.jsp 及其维护 / 配置页） ----------
   两栏骨架直接复用上面的 .subnav-layout（左清单 = 二级栏，右侧明细 = 主区），
   这里只补 .subnav-* 缺的三件事：栏头当操作入口（+ 新建配对表 | 表维护）、
   清单项整块可点的点击区铺满、以及带右侧链接的标题行和配置页的三列表单网格。 */
/* 栏头当操作入口用（+ 新建配对表 | 表维护）：一行放下，链接用品牌色 */
.subnav-title.subnav-head{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; }
.subnav-head a{ color:var(--brand); }
.subnav-head a:hover{ text-decoration:underline; }

/* 清单项整块可点：标题链接触发跳转，::after 把点击区铺满整块 */
.subnav-item{ position:relative; }
.subnav-link{ display:block; color:inherit; }
.subnav-link:hover{ text-decoration:none; }
.subnav-link::after{ content:""; position:absolute; inset:0; }
/* 选中项整块加粗，但描述行（配对数）保持常规字重 */
.subnav-item.active .subnav-item-desc{ font-weight:400; }
/* 清单项标题里的小状态标（「停用」）：跟标题基线对齐，不撑高行 */
.subnav-item-title .pill{ margin-left:5px; padding:0 4px; font-size:10px; vertical-align:1px; }

/* 标题行：h4 标题 + 右侧链接（与 .page-title 同级，用于带操作入口的页头） */
.title-row{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px;
	margin:0 0 8px; font-size:16px;
}
.title-row .comments{ font-weight:400; }
.title-row-links{ margin-left:auto; font-size:12px; font-weight:400; }

/* 配置页表单：标签 / 控件 / 说明 三列，窄屏自动回落到单列 */
.form-grid{
	display:grid;
	grid-template-columns:6em minmax(0,26em) minmax(0,1fr);
	align-items:center; gap:6px 10px;
}
.form-grid > label{ text-align:right; color:var(--fg-dim); font-size:12px; }
.form-grid > textarea{ resize:vertical; }
/* 表单里的多选框行（如「合约间隔」多选）：横排、可换行 */
.check-row{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; }
.check-row label{ color:var(--fg-dim); font-size:12px; white-space:nowrap; }

/* 参数栏：左侧二级栏里放竖直表单（标签在上、控件在下）
   与 .subnav-item 清单栏同宽一档略宽，标签靠左不占列，窄面板里更好排 */
.param-aside{ flex:0 0 200px; min-width:200px; }
.param-form{ display:flex; flex-direction:column; gap:10px; }
.param-field label{ display:block; margin-bottom:3px; font-size:12px; color:var(--fg-dim); }
.param-field input[type=text],
.param-field select,
.param-field textarea{ width:100%; box-sizing:border-box; }
.param-field input[readonly]{ background:#f6f8fa; color:var(--fg-dim); }
.param-field .comments{ display:block; margin-top:3px; line-height:1.5; }
/* 保存 / 取消：贴在参数栏底部，与字段用一条细线分开 */
.param-actions{
	display:flex; align-items:center; gap:10px;
	padding-top:9px; border-top:1px solid var(--line-soft);
}
.param-actions .btn-primary{ flex:1 1 auto; }
@media (max-width:760px){
	.form-grid{ grid-template-columns:1fr; align-items:stretch; }
	.form-grid > label{ text-align:left; }
}
/* 配置页底部保存条 */
.savebar{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px;
	margin-top:12px; padding-top:10px;
	border-top:1px solid var(--line);
}

/* ---------- 品种选择面板（配置页的只读输入框 + 下拉面板） ----------
   输入框只读，点击后在下方弹出面板；面板比字段宽（流式铺开的品种需要横向空间），
   下方空间不足时由脚本加 .up 改为向上弹。
   交易所标题是一行小字、随列表滚动；品种在标题下流式排布、自动换行。
   跨品种模式在列表上方多一条组合条：实线 chip = 已配对，虚线 = 待配对。 */
.picker{ position:relative; }
.picker > input[type=text]{ width:100%; padding-right:22px; cursor:pointer; background:#fff; }
.picker.disabled > input[type=text]{ background:#f6f8fa; color:var(--fg-dim); cursor:not-allowed; }
.picker-caret{
	position:absolute; right:1px; top:1px; bottom:1px; width:20px;
	padding:0; min-height:0; border:0; background:none;
	color:var(--muted); font-size:10px; line-height:1; cursor:pointer;
}
.picker-caret:hover{ color:var(--brand); }
.picker-caret:disabled{ color:var(--line-strong); cursor:not-allowed; }
.picker-pop{
	position:absolute; z-index:60; left:0; top:calc(100% + 4px);
	width:32em; max-width:86vw;
	background:var(--panel); border:1px solid var(--line-strong);
	border-radius:var(--radius); box-shadow:0 8px 24px rgba(16,24,40,.18);
}
.picker-pop.up{ top:auto; bottom:calc(100% + 4px); }
.picker-pop[hidden]{ display:none; }
.picker-pairs{
	display:flex; flex-wrap:wrap; align-items:center; gap:4px;
	padding:6px 8px; border-bottom:1px solid var(--line-soft); background:#fbfcfd;
}
.picker-chip{
	display:inline-flex; align-items:center; gap:3px;
	padding:0 6px; border:1px solid var(--line); border-radius:10px;
	background:#fff; font-size:12px;
}
.picker-chip a{ color:var(--muted); text-decoration:none; }
.picker-chip a:hover{ color:var(--danger); }
.picker-chip.pending{ border-style:dashed; color:var(--fg-dim); }
.picker-list{ max-height:16em; overflow:auto; padding:2px 8px 8px; }
/* 交易所标题：普通一行小字，随列表一起滚动（不吸顶） */
.picker-group{ padding:6px 2px 3px; font-size:11px; color:var(--fg-dim); }
.picker-group .ex{ color:var(--muted); }
/* 标题后的整组全选 / 取消全选 */
.picker-all{ margin-left:6px; font-size:11px; white-space:nowrap; }
/* 品种：流式排布，横向自动换行，选中的加边框＋底色 */
.picker-items{ display:flex; flex-wrap:wrap; gap:4px; }
.picker-item{
	display:inline-flex; align-items:center; gap:2px;
	padding:1px 4px; border:1px solid var(--line); border-radius:8px;
	background:#fff; font-size:12px; line-height:18px; cursor:pointer;
}
.picker-item:hover{ border-color:var(--brand); color:var(--brand); }
.picker-item.on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.picker-item .chk{ width:8px; color:var(--brand); }
.picker-item .code{ font-family:var(--mono); }
.picker-item .name{ color:var(--fg-dim); }
.picker-item.on .name{ color:var(--brand); }
.picker-foot{
	display:flex; align-items:center; gap:8px;
	padding:6px 8px; border-top:1px solid var(--line-soft); background:#fbfcfd;
}
.picker-foot .comments{ margin-right:auto; }
@media (max-width:760px){
	.picker-pop{ width:auto; left:0; right:0; }
}

/* ---------- 规则编辑布局（左：Tab 输入页 / 右：规则集合） ----------
   不做流式换行：左边面板按内容宽度（表单 6em 标签列 + 26em 控件列），不拉伸；
   右边规则集合占剩余宽度。窗口再窄也不折行，整页横向滚动。 */
.rule-layout{
	display:flex; align-items:flex-start; gap:12px;
}
.rule-editor{ flex:0 0 auto; max-width:100%; }
.rule-list{ flex:1 1 320px; min-width:320px; }
/* 两栏之间的竖分隔线：与 <hr> 同一档样式（1px 虚线 #bbb），高度跟随较高的一栏 */
.rule-divider{
	flex:0 0 0; align-self:stretch;
	border-left:1px dashed #bbb;
}


/* ---------- 观察清单：左表 + 右侧通知信号面板（左右流式，窄屏堆叠） ---------- */
/* 左栏按表格自身宽度收缩（gridtable 不设 width:100%，是 shrink-to-fit）——
   否则左栏 flex:1 会把剩余空间全吃掉，面板被推到最右边、和表格之间空一大块 */
.watch-layout{ display:flex; align-items:flex-start; gap:12px; }
/* 工具条上的「今日已触发 N 信号」：N 用红色大号粗体顶出来（触发是要人马上看到的），
   数字等宽，从 9 跳到 10 时不会左右抖 */
.watch-today{ font-size:12.5px; color:var(--fg-dim); }
.watch-today-num{
	margin:0 2px; font-size:19px; font-weight:700; line-height:1;
	color:var(--danger); font-variant-numeric:tabular-nums;
}
/* 表格比可用宽度还宽时，让左栏自己横向滚动，别把面板挤走（.table-wrap 没有 overflow 规则） */
.watch-layout > .watch-main{ flex:0 1 auto; min-width:0; overflow-x:auto; }
.watch-layout > .watch-side{ flex:1 1 380px; max-width:520px; }
.watch-panel{
	border:1px solid var(--line); border-radius:6px; background:#fff;
	padding:8px 10px 10px;
}
.watch-panel-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.watch-panel-title{ font-weight:700; color:var(--brand); }
/* 行内「?」提示：灰底小圆点，悬浮看 title（口径与 StatArbPro 的 account_settle 一致）。
   .circle 是 inline-block，放在文字后面对齐基线时下移 2px，不至于把行高顶开 */
.circle{
	width:15px; height:15px; background-color:#aaa; border-radius:50%;
	display:inline-block; position:relative; vertical-align:-2px; margin-left:3px;
	cursor:help;
}
.circle .question-mark{
	cursor:pointer; position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%); font-size:1em; color:#fff; line-height:1;
}
.watch-panel-close{ margin-left:auto; font-size:35px; line-height:1; color:var(--fg-dim); text-decoration:none; }
.watch-panel-close:hover{ color:var(--danger); text-decoration:none; }
.watch-panel-sub{ margin-bottom:6px; font-size:12px; }
/* 面板里的选表比主表小一号，400px 宽也放得下「条件 / 类型 / 值 / 删」四列 */
.watch-panel .gridtable{  }
.watch-panel .gridtable th,
.watch-panel .gridtable td{ padding:3px 4px; font-size:12px; }
.watch-panel .gridtable select{ width:100%; }
.watch-panel .gridtable input[type=number]{ width:100%; box-sizing:border-box; }
/* 值单元格：输入框 + 单位（元 / % / 根 / 月 / 天）同排。单位由前端按字段填，宽度不够时不换行只压缩输入框 */
.signal-value{ display:flex; align-items:center; gap:4px; }
/* 输入框给一个小的确定宽度（4em）再让它撑满剩余空间：不要用 width:auto ——
   auto 会取输入框固有宽度（约 150px）并把它算进单元格的 max-content，「值」列的
   width:7em 就形同虚设，输入框变得特长 */
.watch-panel .gridtable .signal-value input[type=number]{ flex:1 1 auto; width:4em; min-width:0; box-sizing:border-box; }
.signal-unit{ color:var(--fg-dim); white-space:nowrap; }
/* 术语悬浮说明：下划线 + 问号光标，口径写在 title 里（填写说明里的贴边度 / 主力月差 / 距离交割月） */
.help-tip{ text-decoration:underline; text-underline-offset:3px; cursor:help; }
@media (max-width:1100px){
	.watch-layout{ flex-direction:column; }
	.watch-layout > .watch-side{ flex:1 1 auto; max-width:none; width:100%; }
}

/* 展开行「规则与参数」tab：左边当前参数、右边信号规则判断 / 信号编辑器（窄屏自动上下堆叠） */
.watch-detail-cols{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.watch-detail-cols > .watch-detail-params{ flex:0 0 auto; }
.watch-detail-cols > .watch-detail-rules{ flex:1 1 420px; min-width:300px; }
/* 信号编辑行（点「设置」展开）：参数表在左，编辑器在右。
   这一行固定不换行（见 .signal-cols）：窗口变窄时编辑器继续留在参数表右边，
   由 .signal-help 先掉到表单下面腾地方；380 是编辑器能缩到的底线，再窄就横向滚动 */
.watch-detail-cols > .signal-editor{ flex:1 1 520px; min-width:380px; }
/* 编辑器这一行不许换行（.watch-detail-cols 默认是 wrap，那个行为留给 watch_detail.inja
   的「规则与参数」tab：它窄屏可以上下堆叠，编辑器不行 —— 表单被挤下去就不好填了） */
.watch-detail-cols.signal-cols{ flex-wrap:nowrap; }
/* 参数表与编辑器之间的竖线：<hr> 默认是横线，这里只留左边框并随行拉伸 */
hr.vsep{
	align-self:stretch; width:0; height:auto; margin:0; padding:0;
	border:0; border-left:1px solid var(--line);
}
/* 窄屏是上下堆叠，竖线没意义 */
@media (max-width:900px){ hr.vsep{ display:none; } }
/* 编辑器搬进展开行后不再画外框（外层 .detail-box 已有底色，右侧面板那套边框用不上） */
.signal-editor .watch-panel{ border:0; background:transparent; padding:0; }
/* 规则表单在左、填写说明在右。
   container-type 让下面那条 @container 能按「本行自己的宽度」判断（不是窗口宽度）：
   编辑器是 flex 项，窗口宽度和它实际宽度不是一回事，用 @media 断不准 */
.signal-form-row{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; container-type:inline-size; }
.signal-form-row > form{ flex:1 1 300px; min-width:280px; }
/* 说明 basis 240：与表单 300 加 14 间距 = 554，编辑器窄到 554 以下说明就让位 */
.signal-help{ flex:1 1 240px; min-width:0; max-width:250px; line-height:1.7; }
/* 说明掉到表单下面以后：占满整行且不再限宽。
   已经独占一行了，还截成 250 反而窄长难读；basis:100% 顺便把「一定换行」定死，
   不再靠 flex 的换行算法去凑。@container 在老浏览器里被忽略，退化成仍限 250，不影响能用 */
@container (max-width:553px){
	.signal-help{ flex-basis:100%; max-width:none; }
}
/* 判定文字上色：框架的 .detail-ok / .detail-block 只作用在 .detail-title 上，
   展开行表格里的「满足 / 未满足」也得能看出绿红，别只靠文字 */
.pair-detail .detail-table .detail-ok{ color:var(--ok); font-weight:700; }
.pair-detail .detail-table .detail-block{ color:var(--danger); }

/* ---------- 教程页（/tutorial/tutorial.jsp） ----------
   左目录直接复用 .subnav-*（与行情、仿真等分区同一套二级栏）；
   右侧 .tut-doc 负责把 markdown 渲染出来的内容排好版。 */
/* 目录树：一级 = 主菜单分组（可折叠），二级 = 页面章节。
   连线用虚线画在 ul 与 li 上，折叠时缩进与连线一起消失。 */
.tut-tree{ display:flex; flex-direction:column; }
.tut-tree-group{ margin-bottom:1px; }
.tut-tree-head{
	display:flex; align-items:center; gap:4px; padding:5px 6px;
	font-size:12px; font-weight:700; color:var(--muted);
	border-radius:var(--radius); cursor:pointer; user-select:none;
}
.tut-tree-head:hover{ background:var(--brand-soft); color:var(--brand); }
.tut-tree-arrow{ display:inline-block; width:10px; font-size:10px; line-height:1; transition:transform .12s; }
.tut-tree-group.collapsed .tut-tree-arrow{ transform:rotate(-90deg); }
.tut-tree-group.collapsed .tut-tree-items{ display:none; }
.tut-tree-items{ list-style:none; margin:0 0 4px; padding:0 0 0 12px; position:relative; }
.tut-tree-items::before{
	content:""; position:absolute; left:5px; top:1px; bottom:7px;
	border-left:1px dashed var(--line-soft);
}
.tut-tree-item{
	position:relative; display:block; padding:4px 8px; border-radius:var(--radius);
	font-size:13px; line-height:1.35; color:var(--fg); text-decoration:none;
}
.tut-tree-item::before{
	content:""; position:absolute; left:-7px; top:50%; width:7px;
	border-top:1px dashed var(--line-soft);
}
.tut-tree-item:hover{ background:var(--brand-soft); text-decoration:none; }
.tut-tree-item.active{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.tut-doc{ padding:12px 18px 20px; line-height:1.8; font-size:13px; }
.tut-doc h1, .tut-doc h2, .tut-doc h3, .tut-doc h4{ margin:18px 0 8px; line-height:1.4; color:var(--fg); }
.tut-doc h1:first-child{ margin-top:2px; }
.tut-doc h1{ font-size:20px; }
.tut-doc h2{ font-size:16px; padding-bottom:5px; border-bottom:1px solid var(--line-soft); }
.tut-doc h3{ font-size:14px; }
.tut-doc h4{ font-size:13px; color:var(--fg-dim); }
.tut-doc p{ margin:8px 0; }
.tut-doc ul, .tut-doc ol{ margin:8px 0; padding-left:22px; }
.tut-doc li{ margin:3px 0; }
.tut-doc code{ background:#f3f5f8; border:1px solid var(--line-soft); border-radius:3px; padding:0 3px; font-size:12px; }
.tut-doc pre.tut-code{ background:#f7f8fa; border:1px solid var(--line-soft); border-radius:4px; padding:8px 10px; overflow-x:auto; line-height:1.6; }
.tut-doc pre.tut-code code{ background:none; border:0; padding:0; }
.tut-doc table{ border-collapse:collapse; margin:10px 0; }
.tut-doc th, .tut-doc td{ border:1px solid #ddd; padding:3px 8px; font-size:12.5px; }
.tut-doc th{ background:#eef2f7; font-weight:400; color:#555; text-align:left; }
.tut-doc blockquote{ margin:10px 0; padding:6px 10px; border-left:3px solid var(--brand); background:var(--brand-soft); color:var(--fg-dim); }
.tut-doc blockquote p{ margin:0; }
.tut-doc hr{ border:0; border-top:1px solid var(--line-soft); margin:14px 0; }