/* The browse page: a white working ground; ink, lines and accents from palette.css (linked first). Controls carry
   no red: red and green are for prices. The selected thing is an ink block, the active chart and strategy mode sea
   blue, the watchlist star magenta (the palette's colour for one's own list). */
:root { --bg: #FCFCFC; --panel: #F7F5F1; --sel: rgba(58, 106, 168, 0.14); --hover: rgba(39, 32, 27, 0.05); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 13px/1.4 "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; }
button { cursor: pointer; font: inherit; }
/* Toolbar: one segmented control for the period, one button style (links that act as buttons too), status and
   the keyboard help quiet on the right. */
#bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 5px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
#bar .grow { flex: 1; }
.muted { color: var(--muted); }
/* The 幕僚 mark (app/muliao.svg; docs/design.md): drawn in the colour of the text around it. */
.mark { display: inline-block; width: 14px; height: 14px; margin-right: 5px; flex: none; background: currentColor;
  -webkit-mask: url(/app/muliao.svg) center / contain no-repeat; mask: url(/app/muliao.svg) center / contain no-repeat; }
#bar button, #bar select, #bar .btn { height: 26px; border: 1px solid var(--line); background: #fff; padding: 0 9px; color: var(--ink); font: inherit; display: inline-flex; align-items: center; text-decoration: none; }
#bar button:hover, #bar .btn:hover { border-color: var(--ink-soft); }
#bar button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* The panel buttons, in the order the panels sit (策略, 自选, 幕僚): an open panel's button is underlined in ink,
   not filled, so three open panels do not make three black blocks. Then the help, then the account at the end. */
#bar button.tog.on { background: #fff; border-color: var(--ink-soft); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
#bar #help { margin-left: 6px; }
/* 指标, 文字, 事件 add to the chart; set apart from the periods, adjustment and layout that set it up. */
#bar #formulaBtn { margin-left: 8px; }
#eventControls { display: inline-flex; }
#bar .market-events-toggle[hidden] { display: none; }
body.options-mode #eventControls { display: none; }
/* 预警 watches the market, not this chart: on the right, set off from the panel buttons. */
#bar #alertBtn { margin-right: 6px; }
#bar #who::after { content: "▾"; margin-left: 5px; font-size: 10px; color: var(--muted); }
#bar .seg { display: inline-flex; border: 1px solid var(--line); background: #fff; margin-right: 4px; }
#bar .seg button { border: 0; height: 24px; color: var(--ink-soft); }
#bar .seg button:hover { color: var(--ink); }
#bar .seg button.on { background: var(--ink); color: #fff; }
#status { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#bar #help { width: 26px; justify-content: center; padding: 0; border-radius: 50%; color: var(--muted); cursor: help; }
/* The page never scrolls sideways: the charts take what the side panels leave, down to nothing. */
main { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; }
#workspace { position:relative; container-type:inline-size; display:flex; flex:1; min-width:0; min-height:0; }
#charts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chart { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.chart[hidden] { display: none; }
.chart + .chart { border-top: 1px solid var(--line); }
.chart.active { outline: 1px solid var(--sea); outline-offset: -1px; }
.chart.placing { cursor: text; }
/* Board columns (columns.mjs), right of the charts; their widths are set from the layout. */
#cols { display: grid; grid-template-columns: 340px; border-left: 1px solid var(--line); background: #fff; min-height: 0; }
#cols[hidden] { display: none; }
.bcol { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; container-type: inline-size; }
.cgrip { position: absolute; top: 0; bottom: 0; left: -3px; width: 6px; cursor: col-resize; z-index: 2; }
.cgrip:hover, body.widening .cgrip { background: var(--sea); opacity: .4; }
body.widening { cursor: col-resize; user-select: none; }
.bpanel.cur .bhead { box-shadow: inset 3px 0 0 var(--sea); }
.bhead span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bhead .agent { color: #3A68B0; }
.bcol + .bcol { border-left: 1px solid var(--line); }
.bpanel { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 60px; border-bottom: 1px solid var(--line); }
.bgrip { position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; cursor: row-resize; z-index: 1; }
.bgrip:hover { background: var(--sea); opacity: .4; }
.bhead { display: flex; justify-content: space-between; padding: 2px 8px; background: var(--panel); color: var(--ink); font-weight: bold; }
.bhead i { font-weight: normal; }
.bhead[draggable] { cursor: grab; }
.bpanel.dragging { opacity: .4; }
.bpanel.drop-before { box-shadow: inset 0 3px 0 var(--sea); }
.bpanel.drop-after { box-shadow: inset 0 -3px 0 var(--sea); }
.bcol.drop-end { box-shadow: inset 0 -3px 0 var(--sea); }
.bhead i { color: var(--muted); font-style: normal; font-size: 11px; margin-left: 6px; }
.bhead .x { color: var(--muted); cursor: pointer; }
.bhead .x:hover { color: var(--seal); }
.bpanel .rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.bpanel .rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 58px 46px 48px 56px; gap: 4px; padding: 1px 6px; cursor: default; white-space: nowrap; }
.bpanel .rows li > span { overflow: hidden; text-overflow: ellipsis; }
.bpanel .rows li.head { position: sticky; top: 0; background: #fff; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.bpanel .rows li.head:hover { background: #fff; }
.bpanel .rows li.head span:nth-child(n+4), .bpanel .rows .num { text-align: right; font-variant-numeric: tabular-nums; }
.bpanel .rows .n { color: var(--muted); text-align: right; font-size: 12px; }
.bpanel .rows .up { color: #E00000; }
.bpanel .rows .down { color: #009900; }
.bpanel .rows li:hover { background: var(--hover); }
.bpanel .rows li.on { background: var(--sel); }
.bpanel .rows li.empty { display: block; color: var(--muted); }
.bcol select { margin: 4px; max-width: calc(100% - 8px); font: inherit; color: var(--muted); }
/* A narrow column drops fields from the right: 5日涨幅%, 代码, 现价, 序号, 涨幅%; the name stays (the row's title has the code). */
@container (max-width: 299px) { .bpanel .rows li { grid-template-columns: 18px minmax(0, 1fr) 58px 46px 48px; } .bpanel .rows li > :nth-child(6) { display: none; } }
@container (max-width: 239px) { .bpanel .rows li { grid-template-columns: 18px minmax(0, 1fr) 46px 48px; } .bpanel .rows li > :nth-child(3) { display: none; } }
@container (max-width: 189px) { .bpanel .rows li { grid-template-columns: 18px minmax(0, 1fr) 46px; } .bpanel .rows li > :nth-child(5) { display: none; } }
@container (max-width: 139px) { .bpanel .rows li { grid-template-columns: minmax(0, 1fr) 46px; } .bpanel .rows li > :nth-child(1) { display: none; } }
@container (max-width: 109px) { .bpanel .rows li { grid-template-columns: minmax(0, 1fr); } .bpanel .rows li > :nth-child(4) { display: none; } }
.legends { position: absolute; left: 6px; top: 0; right: 70px; pointer-events: none; z-index: 3; }
.lg { position: absolute; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; white-space: nowrap; }
.lg .title { font-weight: bold; }
.lg .ind { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 0 10px; }
.lg .cap, .lg .rm, .lg .star { pointer-events: auto; cursor: pointer; }
/* ☆ before the name: this stock in the open list, in magenta (the palette's colour for one's own list). */
.lg .star { margin-right: -6px; color: var(--muted); font-size: 13px; }
.lg .star:hover, .lg .star.on { color: var(--mag); }
.lg .wt { pointer-events: auto; cursor: pointer; color: var(--sea); font-size: 12px; }
.lg .wt.hot { color: var(--mustard); }
/* The first row leaves room for the camera at the chart's top right. */
.lg[data-pane="0"] { padding-right: 28px; }
/* Download this chart as a picture; the icon stays quiet until hover or keyboard focus. */
.chart .dl { position: absolute; top: 3px; z-index: 4; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; opacity: .65; }
.chart:hover .dl, .chart .dl:focus-visible { opacity: 1; }
.chart .dl:hover { background: var(--hover); color: var(--ink); }
.chart .dl:focus-visible, .market-events-toggle:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
.lg .cap:hover { text-decoration: underline; }
.lg .rm { color: var(--muted); margin-left: -6px; }
.lg .rm:hover { color: var(--seal); }
.lg .err { color: var(--seal); }
.note-edit { position: absolute; z-index: 6; width: 240px; display: grid; gap: 2px; padding: 3px; border: 1px solid #B8A040; background: #FFFADD; box-shadow: 0 2px 8px rgba(39, 32, 27, .15); }
.note-edit input { font: 12px "Microsoft YaHei", sans-serif; padding: 2px 4px; border: 1px solid var(--line); background: #fff; }
.note-edit input[name=why] { color: var(--ink-soft); }
/* The selected note's 编辑, 删除; the hovered note's card: all its text, why it was noted, who and when. */
.note-bar { position: absolute; z-index: 5; display: flex; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(39, 32, 27, .12); }
.note-bar[hidden], .note-tip[hidden] { display: none; }
.note-bar button { height: 22px; border: 0; background: none; padding: 0 8px; color: var(--ink); font-size: 12px; }
.note-bar button + button { border-left: 1px solid var(--rule); }
.note-bar button:hover { background: var(--hover); }
.note-bar button[data-n=del]:hover { color: var(--seal); }
.note-tip { position: absolute; z-index: 4; max-width: 300px; padding: 6px 9px; background: var(--card); border: 1px solid var(--line); box-shadow: 2px 2px 0 var(--line); pointer-events: none; font-size: 12px; line-height: 18px; }
.note-tip .t { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.note-tip .why { margin-top: 3px; color: var(--ink-soft); padding-left: 7px; border-left: 2px solid var(--mustard); white-space: pre-wrap; }
.note-tip .m { margin-top: 4px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.note-tip .m span { white-space: nowrap; }
#sprite { position: fixed; right: 16px; bottom: 16px; z-index: 10; width: 320px; background: #fff; border: 1px solid #9A9A9A; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
#sprite[hidden] { display: none; }
#sprite .bar { display: flex; justify-content: space-between; padding: 4px 8px; background: #ECECEC; }
#sprite .bar span { color: var(--muted); font-size: 12px; }
#spriteInput { display: block; width: calc(100% - 12px); margin: 6px; padding: 3px 4px; font: inherit; border: 1px solid #9A9A9A; }
#spriteList { list-style: none; margin: 0 6px 6px; padding: 0; min-height: 180px; max-height: 260px; overflow-y: auto; border: 1px solid #D0D0D0; }
#spriteList li { display: grid; grid-template-columns: 84px 1fr auto; gap: 8px; padding: 2px 6px; cursor: default; }
#spriteList li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* codes such as HSTECH.HK, long US names */
#spriteList li.on { background: var(--sel); }
#spriteList li .m { color: var(--muted); }
#spriteList li.empty { display: block; color: var(--muted); }
#pop { position: fixed; z-index: 12; width: 260px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 8px 10px; display: grid; gap: 6px; }
#pop[hidden] { display: none; }
#pop .pop-title { font-weight: bold; }
#pop label { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
#pop input { width: 120px; font: inherit; }
#pop .pop-row { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
#pop .pop-row .grow { flex: 1; }
#pop button { height: 26px; border: 1px solid var(--line); background: #fff; padding: 0 10px; color: var(--ink); }
#pop button:hover { border-color: var(--ink-soft); }
#pop button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
/* The account menu: the name with 退出登录 beside it, then rows; 修改密码 opens its fields under it. */
#pop:has(.acct) { width: 280px; padding: 0; }
#pop .acct { display: grid; }
#pop .acct-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--rule); }
#pop .acct-head b { font: 700 14px var(--serif); }
#pop button.link { height: auto; border: 0; padding: 0; background: none; color: var(--muted); font-size: 12px; }
#pop button.link:hover { color: var(--seal); }
#pop .acct > p { margin: 8px 12px 0; font-size: 12px; line-height: 18px; }
#pop button.acct-item { display: flex; align-items: center; gap: 8px; height: 34px; border: 0; border-bottom: 1px solid var(--rule); padding: 0 12px; text-align: left; }
#pop button.acct-item:hover, #pop button.acct-item.on { background: var(--hover); }
#pop .acct-item .muted { flex: 1; font-size: 11px; }
#pop .acct-item i { margin-left: auto; font-style: normal; color: var(--muted); transition: transform .15s; }
#pop .acct-item.on i { transform: rotate(90deg); }
#pop .acct-form { display: grid; gap: 8px; padding: 10px 12px 12px; }
#pop .acct-form[hidden] { display: none; }
#pop .acct-form label { display: flex; flex-direction: column; align-items: stretch; gap: 3px; font-size: 12px; color: var(--ink-soft); }
#pop .acct-form input { width: auto; height: 28px; padding: 0 6px; border: 1px solid var(--line); color: var(--ink); }
#pop .acct-form input:focus { outline: none; border-color: var(--ink-soft); }
#pop .acct-err { color: var(--seal); font-size: 12px; }
#pop .acct-err:empty { display: none; }
#pop .acct-profile { display: grid; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
#pop .pop-profile { max-height: 220px; overflow-y: auto; display: grid; gap: 3px; font-size: 12px; }
#pop .pf { display: flex; gap: 4px; align-items: flex-start; }
#pop .pf .t { flex: 1; cursor: pointer; }
#pop .pf .t input { width: 100%; }
#pop .pf .x { cursor: pointer; color: var(--muted); }
#pop .pf .x:hover { color: var(--seal); }
/* Market tape at the bottom (tape.mjs): indexes left, wrapping onto a hidden second line when the page is narrow;
   涨跌家数 and the quotes' update time right. */
#tape { display: flex; align-items: center; gap: 12px; height: 22px; padding: 0 10px; background: var(--panel); border-top: 1px solid var(--line); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#tape .tl { flex: 1; min-width: 0; height: 22px; display: flex; flex-wrap: wrap; column-gap: 18px; overflow: hidden; }
#tape .ti { display: flex; gap: 6px; align-items: center; height: 22px; cursor: pointer; }
#tape .ti:hover b { text-decoration: underline; }
#tape .ti b { font-weight: normal; color: var(--ink); }
#tape .ti i { font-style: normal; color: var(--muted); }
#tape .tr { display: flex; gap: 14px; align-items: center; }
#tape .tb { display: flex; gap: 3px; align-items: center; color: var(--muted); }
#tape .tb b { font-weight: normal; color: var(--ink); margin-right: 4px; }
#tape .bar { display: flex; width: 60px; height: 6px; background: #009900; }
#tape .bar .up { background: #E00000; }
#tape .bar .flat { background: var(--muted); }
#tape .tf { color: var(--muted); }
#tape .tf.late { color: var(--seal); }
#tape .up { color: #E00000; }
#tape .down { color: #009900; }
@media (max-width: 720px) { #cols { display: none; } #status { display: none; } #tape .tb { display: none; } }
#boards { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; outline: none; }
#boards[hidden] { display: none; }
#boards .dlg { position: relative; width: min(820px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid #9A9A9A; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#boards .dlg-title { display: flex; justify-content: space-between; padding: 5px 10px; background: var(--ink); color: #fff; }
#boards .dlg-title span { cursor: pointer; padding: 0 4px; }
#boards .dlg-pane { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
#boards .grid { flex: 1; overflow-y: auto; background: #fff; border: 1px solid var(--line); padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-content: start; gap: 1px 6px; }
#boards .grid > div { padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; user-select: none; }
#boards .grid > div:hover { background: var(--hover); }
#boards .grid > div.on { background: var(--sel); }
#boards .boards > div::before { content: "📁 "; }
#boards .boards > div.cur { color: var(--sea); font-weight: bold; }
/* Boards an agent made (by: agent, src/tools.mjs board_save). */
#boards .boards > div.agent::after { content: " AI"; font-size: 10px; }
#boards .stocks > div.over { box-shadow: inset 0 -2px 0 var(--sea); }
#boards .stocks i { color: var(--muted); font-style: normal; font-size: 11px; margin-left: 6px; }
#boards .grid > div.empty { grid-column: 1 / -1; color: var(--muted); white-space: normal; }
#boards .grid input.rename { font: inherit; width: 100%; }
#boards .btns { width: 128px; display: flex; flex-direction: column; gap: 6px; }
#boards .btns button { width: 100%; padding: 4px 0; border: 1px solid var(--line); background: #fff; }
#boards .btns button:disabled { color: var(--muted); }
#boards .pair { display: flex; gap: 6px; }
#boards .drop-btn { position: relative; }
#boards .menu { position: absolute; right: 0; top: 100%; z-index: 2; min-width: 150px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
#boards .menu div { padding: 4px 10px; cursor: pointer; white-space: nowrap; }
#boards .menu div:hover { background: var(--sel); }
#boards .dlg-mid { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding: 0 8px; }
#boards .dlg-mid .find { width: 90px; font: inherit; }
#boards .dlg-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; border-top: 1px solid var(--line); }
#boards .dlg-foot .msg { color: var(--muted); }
#boards .dlg-foot button { padding: 3px 28px; border: 1px solid var(--line); background: #fff; }
#boards .imp { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border: 1px solid #9A9A9A; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
#boards .imp[hidden] { display: none; }
#boards .imp-title { font-weight: bold; }
#boards .imp-drop { padding: 14px; border: 1px dashed #9A9A9A; text-align: center; color: var(--muted); }
#boards .imp-drop[hidden], #boards .imp-board[hidden] { display: none; }
#boards .imp textarea { height: 150px; font: 12px/1.5 Consolas, monospace; resize: vertical; }
#boards .imp-preview { max-height: 220px; overflow-y: auto; font-size: 12px; }
#boards .imp-preview .old { color: var(--muted); text-decoration: line-through; }
#boards .imp-preview .missed { color: #B05A00; margin-top: 4px; }
#boards .imp-preview .sug { display: inline-block; margin: 1px 2px; padding: 0 4px; border: 1px solid #D0B090; color: var(--ink, #3C3C3C); cursor: pointer; }
#boards .imp-preview .sug.on { background: #FFE8C8; border-color: #B05A00; }
#boards .imp-btns { display: flex; justify-content: flex-end; gap: 8px; }
#boards .imp-btns button { padding: 3px 16px; border: 1px solid var(--line); background: #fff; }
#layouts { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; outline: none; }
#layouts[hidden] { display: none; }
#layouts .dlg { width: min(520px, calc(100vw - 32px)); height: min(400px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid #9A9A9A; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#layouts .dlg-title { display: flex; justify-content: space-between; padding: 5px 10px; background: var(--ink); color: #fff; }
#layouts .dlg-title span { cursor: pointer; padding: 0 4px; }
#layouts .dlg-pane { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
#layouts .list { flex: 1; overflow-y: auto; background: #fff; border: 1px solid var(--line); }
#layouts table { width: 100%; border-collapse: collapse; }
#layouts th { position: sticky; top: 0; background: #F4F4F4; font-weight: normal; color: var(--muted); text-align: left; padding: 2px 8px; border-bottom: 1px solid var(--line); }
#layouts td { padding: 2px 8px; white-space: nowrap; cursor: default; user-select: none; }
#layouts tr:hover td { background: var(--hover); }
#layouts tr.on td { background: var(--sel); }
#layouts tr.cur td:first-child { color: var(--sea); font-weight: bold; }
#layouts td input.rename { font: inherit; width: 100%; }
#layouts .btns { width: 128px; display: flex; flex-direction: column; gap: 6px; }
#layouts .btns button { width: 100%; padding: 4px 0; border: 1px solid var(--line); background: #fff; }
#layouts .btns button:disabled { color: var(--muted); }
#layouts .drop-btn { position: relative; }
#layouts .menu { position: absolute; right: 0; top: 100%; z-index: 2; min-width: 150px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
#layouts .menu[hidden] { display: none; }
#layouts .menu div { padding: 4px 10px; cursor: pointer; white-space: nowrap; }
#layouts .menu div:hover { background: var(--sel); }
#layouts .dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 8px; border-top: 1px solid var(--line); }
#layouts .dlg-foot .msg { color: var(--muted); }
#layouts .dlg-foot button { padding: 3px 28px; border: 1px solid var(--line); background: #fff; }
#formulas { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; outline: none; }
#formulas[hidden], #formulas [hidden] { display: none !important; }
#formulas .dlg { width: min(920px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid #9A9A9A; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#formulas .dlg-title { display: flex; justify-content: space-between; padding: 5px 10px; background: var(--ink); color: #fff; }
#formulas .dlg-title [data-a] { cursor: pointer; padding: 0 4px; }
#formulas .dlg-pane { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
#formulas .nav { width: 150px; display: flex; flex-direction: column; gap: 1px; }
#formulas .nav .h { color: var(--muted); font-size: 12px; padding: 8px 8px 2px; }
#formulas .nav [data-sec] { padding: 4px 10px; cursor: pointer; user-select: none; }
#formulas .nav [data-sec]:hover { background: var(--hover); }
#formulas .nav [data-sec].on { background: var(--sel); font-weight: bold; }
#formulas .nav button { margin-top: 6px; }
#formulas .main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#formulas .find { font: inherit; padding: 4px 8px; border: 1px solid var(--line); }
#formulas .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#formulas .chips span { padding: 1px 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12px; }
#formulas .chips span.on { background: var(--ink); border-color: var(--ink); color: #fff; }
#formulas .rows { flex: 1; overflow-y: auto; background: #fff; border: 1px solid var(--line); }
#formulas .item { display: grid; grid-template-columns: 22px 110px 1fr auto auto; gap: 2px 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--rule); }
#formulas .item:hover, #formulas .item.sel { background: var(--hover); }
#formulas .item.sel .acts { visibility: visible; }
#formulas .item .star { color: var(--mustard); cursor: pointer; text-align: center; }
#formulas .item .nm { font-weight: bold; overflow: hidden; text-overflow: ellipsis; }
#formulas .item .ti { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#formulas .item .ti i { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--rule); padding: 0 4px; margin-left: 6px; }
#formulas .item .by { color: var(--muted); font-size: 12px; white-space: nowrap; }
#formulas .item .acts { display: flex; gap: 4px; visibility: hidden; }
#formulas .item:hover .acts { visibility: visible; }
#formulas .item .acts button { padding: 1px 8px; font-size: 12px; }
#formulas .item .desc { grid-column: 3 / -1; color: var(--muted); font-size: 12px; }
#formulas .item .desc .pv { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#formulas .item .desc .full, #formulas .item .desc.open .pv { display: none; }
#formulas .item .desc.open .full { display: block; color: var(--ink); line-height: 1.6; }
#formulas .item .desc .full p, #formulas .item .desc .full ul { margin: 2px 0; }
#formulas .item .desc .full ul { padding-left: 18px; }
#formulas .item .desc[data-a=more] { cursor: pointer; }
#formulas .item .desc a { cursor: pointer; text-decoration: underline; }
#formulas .rows .empty { padding: 16px; color: var(--muted); }
#formulas .row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
#formulas .grow { flex: 1; }
#formulas label { display: inline-flex; gap: 6px; align-items: center; }
#formulas label.wide input { flex: 1; }
#formulas input, #formulas select, #formulas textarea { font: inherit; }
#formulas input[name=name] { width: 110px; text-transform: uppercase; }
#formulas textarea { flex: 1; min-height: 140px; resize: none; font-family: Consolas, 'Noto Sans Mono CJK SC', monospace; font-size: 13px; padding: 6px; border: 1px solid var(--line); }
#formulas .tabs [data-tab] { padding: 2px 12px; border: 1px solid var(--line); border-bottom: none; cursor: pointer; color: var(--muted); }
#formulas .tabs [data-tab].on { color: inherit; background: #fff; font-weight: bold; }
#formulas .row.tabs { gap: 0 4px; margin-bottom: -6px; }
#formulas textarea.usage { font-family: inherit; font-size: 13px; line-height: 1.6; }
/* The formula field (code-field.mjs): the textarea's text is transparent over a <pre> of the same text, coloured;
   both in one grid cell with the same font, padding and no wrapping, so each character sits over its colour. */
#formulas .code-field { flex: 1; min-height: 140px; display: grid; grid-template: minmax(0, 1fr) / auto minmax(0, 1fr); border: 1px solid var(--line); background: #fff; }
#formulas .code-field[hidden] { display: none; }
#formulas .code-field > * { grid-area: 1 / 2; margin: 0; min-height: 0; border: 0; padding: 6px 6px 6px 10px; font: 13px/1.5 Consolas, 'Noto Sans Mono CJK SC', monospace; white-space: pre; tab-size: 4; }
#formulas .code-field pre { overflow: hidden; padding: 6px 26px 6px 10px; color: var(--ink); pointer-events: none; }
#formulas .code-field pre.lines { grid-area: 1 / 1; padding: 6px 6px 6px 8px; min-width: 2ch; text-align: right; color: var(--muted); background: var(--panel); border-right: 1px solid var(--line); user-select: none; }
#formulas .code-field pre.lines b { color: var(--seal); }
#formulas .code-field textarea { color: transparent; caret-color: var(--ink); background: transparent; overflow: auto; }
#formulas .code-field textarea:disabled { cursor: default; }
#formulas .code-field .op, #formulas .code-field .attr, #formulas .code-field .color { color: var(--slate); }
#formulas .code-field .comment { color: var(--muted); font-style: italic; }
#formulas .code-field .drawn { position: relative; font-weight: 600; }
#formulas .code-field .drawn::before { content: ''; position: absolute; left: -8px; top: 2px; bottom: 2px; width: 4px; background: var(--c, var(--line)); }
#formulas .code-field .mid { opacity: .45; }
#formulas .code-field .err, #formulas .code-field .bad { text-decoration: underline wavy var(--seal); text-decoration-skip-ink: none; }
#formulas .code-field .gap { position: relative; }
#formulas .code-field .gap::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 1ch; border-bottom: 2px solid var(--seal); }
/* The 用法 field (md-field.mjs): the Markdown as it reads, a block at a time; a block clicked becomes its text. */
#formulas .md-field { flex: 1; min-height: 140px; display: flex; flex-direction: column; position: relative; }
#formulas .md-field[hidden] { display: none; }
#formulas .md-toggle { position: absolute; top: 4px; right: 18px; z-index: 1; font-size: 12px; padding: 0 6px; }
#formulas .md-view { flex: 1; overflow: auto; padding: 4px 8px; background: #fff; border: 1px solid var(--line); line-height: 1.6; }
#formulas .md-view .blk { padding: 1px 4px; margin: 0 -4px; border-radius: 2px; cursor: text; }
#formulas .md-view:not(.off) .blk:hover { background: var(--hover); }
#formulas .md-view.off .blk { cursor: default; }
#formulas .md-view p { margin: 4px 0; }
#formulas .md-view h4 { margin: 10px 0 2px; font-size: 13px; }
#formulas .md-view code { font-family: var(--mono); font-size: 12px; background: var(--panel); padding: 0 3px; }
#formulas .md-view .blk.empty, #formulas .md-view .blk.add { color: var(--muted); }
#formulas .md-view .blk.add { margin-top: 6px; font-size: 12px; }
#formulas .md-view .blk-edit { display: block; width: 100%; min-height: 0; flex: none; margin: 2px 0; padding: 3px 4px; font: 13px/1.6 Consolas, 'Noto Sans Mono CJK SC', monospace; border: 1px dashed var(--sea); resize: none; overflow: hidden; background: #fff; }
#formulas .live { font-size: 12px; color: var(--muted); min-height: 1.4em; }
#formulas .live.err { color: var(--seal); }
#formulas .out { margin: 0; max-height: 130px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line); font-size: 12px; white-space: pre-wrap; }
#formulas .out:empty { display: none; }
#formulas .out.err { color: var(--seal); }
#formulas .owner, #formulas .muted { color: var(--muted); }
#formulas .tokens table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
#formulas .tokens th { background: #F4F4F4; font-weight: normal; color: var(--muted); text-align: left; padding: 2px 8px; }
#formulas .tokens td { padding: 2px 8px; }
#formulas .betas { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
#formulas .betas .muted { margin-bottom: 4px; }
#formulas .betas .num { font-family: var(--mono); }
#formulas .betas .low { color: var(--mustard); }
#formulas .betas .out { color: var(--seal); }
#formulas .betas [name=bamount] { width: 4.5em; }
#formulas button { padding: 3px 14px; border: 1px solid var(--line); background: #fff; }
#formulas .dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 8px; border-top: 1px solid var(--line); }
#formulas .dlg-foot .msg { color: var(--muted); }
#skills { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; outline: none; }
#skills[hidden], #skills [hidden] { display: none !important; }
#skills .dlg { width: min(920px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid #9A9A9A; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#skills .dlg-title { display: flex; justify-content: space-between; padding: 5px 10px; background: var(--ink); color: #fff; }
#skills .dlg-title [data-a] { cursor: pointer; padding: 0 4px; }
#skills .dlg-pane { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
#skills .nav { width: 150px; display: flex; flex-direction: column; gap: 1px; }
#skills .nav .h { color: var(--muted); font-size: 12px; padding: 8px 8px 2px; }
#skills .nav [data-sec] { padding: 4px 10px; cursor: pointer; user-select: none; }
#skills .nav [data-sec]:hover { background: var(--hover); }
#skills .nav [data-sec].on { background: var(--sel); font-weight: bold; }
#skills .nav button { margin-top: 6px; }
#skills .main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#skills .find { font: inherit; padding: 4px 8px; border: 1px solid var(--line); }
#skills .rows { flex: 1; overflow-y: auto; background: #fff; border: 1px solid var(--line); }
#skills .item { display: grid; grid-template-columns: 22px 110px 1fr auto auto; gap: 2px 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--rule); }
#skills .item:hover { background: var(--hover); }
#skills .item .star { color: var(--mustard); cursor: pointer; text-align: center; }
#skills .item .nm { font-weight: bold; overflow: hidden; text-overflow: ellipsis; }
#skills .item .ti { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skills .item .ti i { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--rule); padding: 0 4px; margin-left: 6px; }
#skills .item .by { color: var(--muted); font-size: 12px; white-space: nowrap; }
#skills .item .acts { display: flex; gap: 4px; visibility: hidden; }
#skills .item:hover .acts { visibility: visible; }
#skills .item .acts button { padding: 1px 8px; font-size: 12px; }
#skills .item .desc { grid-column: 3 / -1; color: var(--muted); font-size: 12px; }
#skills .item .desc .pv { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#skills .item .desc .full, #skills .item .desc.open .pv { display: none; }
#skills .item .desc.open .full { display: block; color: var(--ink); line-height: 1.6; }
#skills .item .desc .full p, #skills .item .desc .full ul { margin: 2px 0; }
#skills .item .desc .full ul { padding-left: 18px; }
#skills .item .desc[data-a=more] { cursor: pointer; }
#skills .item .desc a { cursor: pointer; text-decoration: underline; }
#skills .rows .empty { padding: 16px; color: var(--muted); }
#skills .row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
#skills .grow { flex: 1; }
#skills label { display: inline-flex; gap: 6px; align-items: center; }
#skills label.wide input { flex: 1; }
#skills input, #skills select, #skills textarea { font: inherit; }
#skills textarea { flex: 1; min-height: 140px; resize: none; font-family: Consolas, 'Noto Sans Mono CJK SC', monospace; font-size: 13px; padding: 6px; border: 1px solid var(--line); }
#skills button { padding: 3px 14px; border: 1px solid var(--line); background: #fff; }
#skills .dlg-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 8px; border-top: 1px solid var(--line); }
#skills .dlg-foot .msg { color: var(--muted); }
#skills input[name=name] { width: 130px; }
#skills textarea { font-family: inherit; line-height: 1.6; }
#skills .item .ti { color: var(--muted); }
#quotes { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #fff; outline: none; }
#quotes[hidden] { display: none; }
#quotes .qt-title { display: flex; align-items: baseline; gap: 8px; padding: 2px 10px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--ink); font-weight: bold; }
#quotes .qt-title i { color: var(--muted); font-style: normal; font-size: 12px; font-weight: normal; }
#quotes .qt-title b { font-weight: normal; color: var(--ink); font-size: 12px; }
#quotes .qt-title b.late { color: var(--seal); }
#quotes .qt-title span { margin-left: auto; color: var(--muted); cursor: pointer; }
#quotes .qt-title span:hover { color: var(--seal); }
#quotes .qt-body { flex: 1; overflow: auto; min-height: 0; }
#quotes table { border-collapse: collapse; white-space: nowrap; font-size: 13px; }
#quotes th { position: sticky; top: 0; z-index: 1; padding: 2px 10px; background: #fff; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: normal; text-align: left; }
#quotes td { padding: 1px 10px; cursor: default; }
#quotes .num { text-align: right; font-variant-numeric: tabular-nums; }
#quotes td.n { color: var(--muted); text-align: right; }
#quotes td i { margin-left: 4px; color: var(--muted); font-style: normal; font-size: 11px; }
#quotes td.empty { color: var(--muted); padding: 8px 10px; }
#quotes tbody tr:hover { background: var(--hover); }
#quotes tbody tr.on { background: var(--sel); }
#quotes .up { color: #E00000; }
#quotes .down { color: #009900; }
#quotes .qt-foot { padding: 2px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
/* 策略 panel (strategy-tester.mjs), on the right: its width is dragged at the left edge (--strat-w). Its home lists
   strategies; an opened one has a head (back, name, kind), the scope (这只股 / 全市场组合) and the tabs. */
:root { --strat-w: 440px; }
#strat { position: relative; width: var(--strat-w); flex: none; border-left: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; min-height: 0; font-size: 13px; }
#strat[hidden], #strat [hidden] { display: none !important; }
#strat.on { box-shadow: inset 3px 0 0 var(--sea); } /* strategy mode (main.mjs) */
#strat .sgrip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; z-index: 3; cursor: col-resize; }
#strat .sgrip:hover, body.resizing #strat .sgrip { background: linear-gradient(to right, transparent 2px, var(--sea) 2px, var(--sea) 4px, transparent 4px); }
#strat .sview { display: flex; flex-direction: column; min-height: 0; flex: none; max-height: 100%; }
#strat:has(.sigs[hidden]) .sview { flex: 1; }
#strat button { font: inherit; font-size: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 2px 10px; cursor: pointer; }
#strat button:hover { border-color: var(--ink-soft); }
#strat .muted { color: var(--muted); font-size: 12px; font-weight: normal; }
#strat .grow { flex: 1; }
#strat .shead { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px 6px; }
#strat .shead .stitle { font-family: var(--serif); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#strat .shead .back { border: 0; padding: 0; color: var(--muted); background: none; }
#strat .shead .back:hover { color: var(--ink); }
#strat .shead [data-act=close] { border: 0; color: var(--muted); padding: 0 2px; background: none; }
#strat .seg { display: inline-flex; }
#strat .seg button + button { border-left: 0; }
#strat .seg button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#strat .scope { padding: 0 12px 6px; }
#strat .stabs { display: flex; gap: 18px; padding: 0 12px; border-bottom: 1px solid var(--line); }
#strat .stabs button { border: 0; border-bottom: 2px solid transparent; padding: 4px 0; font-size: 13px; color: var(--ink-soft); background: none; }
#strat .stabs button.on { border-bottom-color: var(--mag); color: var(--ink); font-weight: 500; }
#strat .err { padding: 2px 12px; color: #B05A00; background: #FFF6E5; font-size: 12px; white-space: pre-wrap; max-height: 64px; overflow: auto; }
#strat .sbody { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
#strat .sbody:empty { display: none; }
#strat .empty { color: var(--muted); padding: 4px 0; }
#strat .empty button { margin-left: 6px; }
#strat .hint, #strat .foot, #strat .info { color: var(--muted); font-size: 12px; margin: 0; }
#strat .info { font-variant-numeric: tabular-nums; }
#strat .bad { color: var(--seal); }
/* Home: the lists. */
#strat .home { gap: 2px; }
#strat .home h4 { margin: 10px 0 2px; font-family: var(--serif); font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
#strat .home h4:first-child { margin-top: 0; }
#strat .home h4 button { margin-left: auto; }
#strat .home p { margin: 2px 0; }
#strat .srow { display: grid; gap: 1px; text-align: left; border: 0; border-bottom: 1px solid var(--rule); padding: 7px 0; background: none; width: 100%; }
#strat .srow:hover { background: var(--hover); }
#strat .srow b { font-weight: 500; font-size: 13px; }
#strat .srow span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#strat .srow i { font-style: normal; font-variant-numeric: tabular-nums; }
/* 结果 */
#strat .verdict { margin: 0; font-size: 15px; line-height: 1.6; }
#strat .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
#strat .card { display: flex; flex-direction: column; background: var(--card); padding: 6px 10px; }
#strat .card span { color: var(--muted); font-size: 12px; }
#strat .card b { font-family: var(--num); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
#strat .card i { font-style: normal; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#strat .curves { width: 100%; height: 110px; display: block; }
#strat .legend { font-size: 12px; color: var(--muted); margin-top: -6px; }
#strat .legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin: 0 3px 0 0; }
#strat .legend .bh { margin-left: 10px; }
#strat .legend .eq { background: var(--sea); } #strat .legend .bh { background: #9AA4AE; }
#strat .more { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#strat .more summary { cursor: pointer; color: var(--ink); }
#strat .claimed { color: var(--ink-soft); font-size: 12px; }
#strat .idea { color: var(--ink-soft); margin: 0; }
#strat .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#strat .acts a { color: var(--ink-soft); font-size: 12px; border: 1px solid var(--line); padding: 1px 10px; text-decoration: none; }
#strat .acts a:last-child:not(:first-child) { margin-left: auto; }
#strat .acts .danger { color: var(--seal); }
/* 信号 of 这只股 */
#strat table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
#strat .tt { width: 100%; }
#strat .tt th { position: sticky; top: -10px; background: var(--panel); color: var(--muted); font-weight: normal; text-align: left; padding: 2px 6px; }
#strat .tt td { padding: 1px 6px; white-space: nowrap; }
#strat .tt tr:hover td { background: var(--hover); cursor: pointer; }
/* 参数 */
#strat .from { color: var(--muted); font-size: 12px; }
#strat .from input { font: inherit; font-size: 12px; }
#strat .ps { display: grid; gap: 6px; }
#strat .ps label { display: grid; grid-template-columns: 76px 1fr 64px 52px; gap: 6px; align-items: center; }
#strat .ps span { overflow: hidden; text-overflow: ellipsis; }
#strat .ps input[type=number] { font: inherit; width: 100%; }
#strat .ps i { font-style: normal; color: var(--muted); font-size: 11px; }
/* 规则 */
#strat .src { color: var(--ink-soft); font-size: 12px; }
#strat .map { list-style: none; margin: 0; padding: 0; }
#strat .map li { display: grid; grid-template-columns: 16px 1fr; gap: 0 6px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
#strat .map li > i { font-style: normal; }
#strat .map .ok > i { color: var(--sea); } #strat .map .substitute > i { color: var(--mustard); } #strat .map .missing > i { color: var(--seal); }
#strat .map em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
#strat .map code { grid-column: 2; font: 11px/1.5 var(--mono); color: var(--muted); }
#strat .def summary { cursor: pointer; color: var(--ink-soft); font-size: 12px; }
#strat .def[open] { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
#strat textarea { min-height: 260px; flex: 1; font: 12px/1.4 var(--mono); resize: vertical; border: 1px solid var(--line); padding: 4px 6px; }
#strat textarea[readonly] { background: var(--panel); }
/* 信号 of 全市场组合: a portfolio run's symbols and trades (strategy.mjs) */
#strat .sigs { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#strat .sigs .tools { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 12px 4px; color: var(--muted); }
#strat .sigs .tools span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#strat .sigs .tools a { border: 1px solid var(--line); background: #fff; padding: 0 8px; color: var(--ink); text-decoration: none; }
#strat .sigs .tools a:hover { border-color: var(--ink-soft); }
#strat .sigs .filter { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 12px 4px; }
#strat .sigs .filter button, #strat .sigs .period button { font-size: 12px; border: 0; background: none; color: var(--muted); padding: 1px 6px; }
#strat .sigs .filter .seg { border: 1px solid var(--line); }
#strat .sigs .filter .seg button.on { background: var(--ink); color: #fff; }
#strat .sigs .filter > button.on { color: var(--ink); background: var(--sel); }
#strat .sigs .period { display: flex; align-items: center; gap: 4px; padding: 0 12px 4px; color: var(--muted); }
#strat .sigs .period input { flex: 1; min-width: 0; font: inherit; font-size: 12px; }
#strat .sigs .warn { padding: 2px 12px; color: #B05A00; background: #FFF6E5; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#strat .sigs .empty { padding: 8px 12px; }
#strat .sigs .rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 3; min-height: 80px; }
#strat .sigs .rows li { display: grid; grid-template-columns: 60px 1fr 36px 72px; gap: 4px; padding: 1px 12px; cursor: default; font-variant-numeric: tabular-nums; }
#strat .sigs .rows li:hover, #strat .sigs tr:hover td { background: var(--hover); }
#strat .sigs .rows li.on { background: var(--sel); }
#strat .sigs .n { color: var(--muted); text-align: right; }
#strat .sigs .trips { flex: 2; min-height: 60px; overflow-y: auto; border-top: 1px solid var(--line); }
#strat .sigs .trips .sub { position: sticky; top: 0; padding: 2px 12px; background: var(--panel); color: var(--muted); }
#strat .sigs .trips table { width: 100%; }
#strat .sigs .trips td { padding: 1px 12px; white-space: nowrap; cursor: pointer; }
#strat .sigs .hint { padding: 4px 12px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { #strat { display: none; } }
/* The quote list leaves the 幕僚 panel in view: the assistant opens boards while the user reads its answer. */
:root { --chat-w: 360px; }
#cloudmap { position: absolute; inset: 0; z-index: 6; background: #fff; }
#cloudmap[hidden] { display: none; }
#cloudmap iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 幕僚 (chat.mjs): a panel on the right on the warm card ground; the user's words dark, the assistant's steps
   quiet with what each found, its answer plain. Its width is dragged at the left edge (--chat-w); the answer keeps a
   reading measure, the extra width goes to steps and cards. */
#chat { position: relative; width: var(--chat-w); border-left: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
#chat[hidden], #chat [hidden] { display: none !important; }
#chat .ch-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; z-index: 3; cursor: col-resize; }
#chat .ch-grip:hover, body.resizing #chat .ch-grip { background: linear-gradient(to right, transparent 2px, var(--sea) 2px, var(--sea) 4px, transparent 4px); }
body.resizing { cursor: col-resize; user-select: none; }
#chat .grow { flex: 1; }
#chat button { height: 24px; border: 1px solid var(--line); background: #fff; padding: 0 8px; color: var(--ink); font: inherit; cursor: pointer; }
#chat button:hover { border-color: var(--ink-soft); }
#chat button[type=submit] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Head: the name, 历史 as a tab underlined in magenta when open, 我的技能, then quiet actions and 新对话. */
#chat .ch-head { display: flex; align-items: center; height: 36px; padding: 0 6px 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
#chat .ch-name { display: inline-flex; align-items: center; font: 700 14px var(--serif); letter-spacing: .06em; margin-right: 12px; }
#chat .ch-name .mark { width: 16px; height: 16px; margin-right: 6px; color: var(--sea); }
#chat .ch-title { padding: 4px 12px; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat .ch-title:empty { display: none; }
/* The card of first things after the welcome: a short list, each ticked off in sea blue (the 幕僚's colour) once done. */
#chat .ch-start { margin: 8px 10px 0; padding: 6px 10px 8px; border: 1px solid var(--line); border-left: 3px solid var(--sea); background: #fff; display: grid; gap: 3px; }
#chat .ch-start[hidden] { display: none; }
#chat .ch-start-h { display: flex; gap: 8px; align-items: baseline; font: 700 13px var(--serif); }
#chat .ch-start-h .muted { font: 12px var(--mono); }
#chat .ch-start-h .x { margin-left: auto; cursor: pointer; color: var(--muted); font-weight: normal; }
#chat .ch-start-i { display: flex; gap: 7px; align-items: center; color: var(--ink); }
#chat .ch-start-i[data-a] { cursor: pointer; }
#chat .ch-start-i[data-a]:hover { color: var(--sea); }
#chat .ch-start-i i { flex: none; width: 11px; height: 11px; border: 1px solid var(--ink-soft); }
#chat .ch-start-i.done { color: var(--muted); text-decoration: line-through; }
#chat .ch-start-i.done i { background: var(--sea); border-color: var(--sea); }
#chat .ch-head .ch-view, #chat .ch-head .ch-quiet, #chat .ch-head .ch-x { height: 35px; border: 0; border-bottom: 2px solid transparent; background: none; padding: 2px 7px 0; color: var(--ink-soft); }
#chat .ch-head .ch-view:hover, #chat .ch-head .ch-quiet:hover { color: var(--ink); }
#chat .ch-head .ch-view.on { color: var(--ink); border-bottom-color: var(--mag); }
#chat .ch-head .ch-new { margin-left: 6px; }
#chat .ch-head button, #chat .ch-head b { white-space: nowrap; }
#chat .ch-head .ch-x { padding: 2px 6px 0; font-size: 16px; color: var(--muted); }
#chat .ch-head .ch-x:hover { color: var(--ink); }
#chat .ch-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
#chat .ch-hint { color: var(--muted); max-width: 40em; }
#chat .ch-q { align-self: flex-end; max-width: min(90%, 36em); background: var(--ink); color: #fff; padding: 5px 9px; white-space: pre-wrap; }
#chat .ch-a { max-width: 100%; }
#chat .ch-steps { color: var(--muted); font-size: 12px; line-height: 18px; }
#chat .ch-steps > summary { cursor: pointer; width: max-content; }
#chat .ch-lead { font-size: 16px; line-height: 1.5; margin: 2px 0 8px; }
#chat .ch-step-res { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#chat .ch-step-err { color: var(--copper); white-space: pre-wrap; }
#chat .ch-wait { color: var(--muted); }
#chat .ch-text { max-width: 40em; line-height: 1.6; }
#chat .ch-text p { margin: 4px 0; }
#chat .ch-text h4 { margin: 10px 0 2px; font-size: 13px; }
#chat .ch-text ul { margin: 4px 0; padding-left: 18px; }
#chat .ch-text code { font-family: var(--mono); font-size: 12px; background: var(--panel); padding: 0 3px; }
#chat .ch-text pre { margin: 0; font-family: var(--mono); font-size: 11px; white-space: pre; overflow-x: auto; }
/* Tables, rules and numbered lists of markdown() (chat.mjs), wherever it is shown. */
:is(#chat .ch-text, .desc .full, .md-view) :is(ul, ol) { margin: 4px 0; padding-left: 18px; }
:is(#chat .ch-text, .desc .full, .md-view) :is(ul, ol) :is(ul, ol) { margin: 0; }
:is(#chat .ch-text, .desc .full, .md-view) table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 4px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
:is(#chat .ch-text, .desc .full, .md-view) :is(th, td) { border-bottom: 1px solid var(--rule); padding: 2px 10px 2px 0; text-align: left; vertical-align: top; }
:is(#chat .ch-text, .desc .full, .md-view) th { border-bottom-color: var(--line); color: var(--ink-soft); font-weight: 600; }
:is(#chat .ch-text, .desc .full, .md-view) hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 0; }
#chat .ch-err { color: var(--seal); }
#chat .ch-prop { margin-top: 6px; padding: 5px 8px; background: var(--panel); border-left: 2px solid var(--sea); }
/* A report: a paper slip with the brand's magenta rule on top, to open or download. */
#chat .ch-report { display: flex; align-items: baseline; gap: 10px; max-width: 40em; margin: 6px 0 2px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--mag); color: var(--ink); font-size: 13px; }
#chat .ch-report .k { font: 11px var(--mono); letter-spacing: .14em; color: var(--muted); }
#chat .ch-report b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); }
#chat .ch-report a { color: var(--sea); text-decoration: none; }
#chat .ch-report a:hover { text-decoration: underline; }
#chat .ch-acts { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; }
#chat .ch-acts button { padding: 0 5px; opacity: .55; }
#chat .ch-acts button:hover { opacity: 1; }
#chat .ch-rate { display: flex; flex: 1; gap: 4px; }
#chat .ch-rate input { flex: 1; }
#chat .ch-hist { max-height: 45%; overflow-y: auto; border-bottom: 1px solid var(--line); padding: 4px 12px; background: var(--panel); }
#chat .ch-hrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; border-bottom: 1px dotted var(--line); }
#chat .ch-hrow.on .t { font-weight: 600; }
#chat .ch-hrow .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
#chat .ch-hrow .t:hover { color: var(--sea); }
#chat .ch-hrow .x { cursor: pointer; color: var(--muted); padding: 0 3px; }
#chat .ch-hrow .x:hover { color: var(--seal); }
#chat .ch-share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
#chat .ch-share a { color: var(--sea); word-break: break-all; }
#chat .ch-ask { border-top: 1px solid var(--line); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); }
#chat textarea { width: 100%; font: inherit; border: 1px solid var(--line); padding: 4px 6px; resize: vertical; background: #fff; }
#chat .ch-prop pre { white-space: pre-wrap; font: inherit; margin: 4px 0; }
/* A watch proposal (#148): magenta rule on the left and a halftone paper ground so it stands apart from the answer text. */
#chat .ch-watch { padding: 7px 10px; border: 1px solid var(--line); border-left: 3px solid var(--mag); background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px); background-size: 5px 5px; }
#chat .ch-watch button { margin-top: 4px; }
#chat .ch-watch .pick { float: right; }
#chat .ch-watch-sel { margin-top: 6px; }
#chat .ch-topic-watch .ch-tw-head { font-size: 13px; margin-bottom: 3px; }
#chat .ch-topic-watch .ch-tw-thesis { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.5; }
#chat .ch-topic-watch .ch-tw-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; padding: 6px 8px; background: var(--card); border: 1px solid var(--rule); }
#chat .ch-topic-watch .ch-tw-item { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.5; cursor: pointer; }
#chat .ch-topic-watch .ch-tw-item input { margin-top: 3px; flex-shrink: 0; }
#chat .ch-topic-watch .ch-tw-badge { font-size: 11px; padding: 0 4px; border: 1px solid var(--rule); background: var(--panel); white-space: nowrap; }
#chat .ch-topic-watch .ch-tw-badge.price { color: var(--mag); border-color: var(--line); }
#chat .ch-topic-watch .ch-tw-badge.fact { color: var(--sea); border-color: var(--line); }
#chat .ch-row { display: flex; align-items: center; gap: 6px; }
#chat .ch-row button.on { border-color: var(--sea); color: var(--sea); }
#chat .ch-files { display: flex; flex-wrap: wrap; gap: 4px; }
#chat .ch-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px; border: 1px solid var(--line); background: #fff; font-size: 12px; }
#chat .ch-skill-chip { border-color: var(--sea); color: var(--sea); }
#chat .ch-chip i { font-style: normal; font-size: 11px; }
#chat .ch-chip b { font-weight: normal; cursor: pointer; color: var(--muted); }
#chat .ch-skill-pick { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); background: #fff; padding: 4px 6px; font-size: 12px; }
#chat .ch-srow { display: flex; align-items: center; gap: 6px; padding: 3px 4px; cursor: pointer; border-bottom: 1px dotted var(--rule); }
#chat .ch-srow:hover { background: var(--hover); }
#chat .ch-srow i { width: 12px; font-style: normal; color: var(--sea); font-weight: bold; }
#chat .ch-srow b { white-space: nowrap; }
#chat .ch-srow .muted { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat .ch-sfoot { padding: 4px 4px 2px; text-align: right; }
#chat .ch-sfoot a { color: var(--sea); cursor: pointer; }
#chat .ch-sfoot a:hover { text-decoration: underline; }
#chat .ch-orig { font-size: 11px; color: var(--sea); text-decoration: none; margin-left: 4px; } #chat .ch-orig:hover { text-decoration: underline; }
#chat .ch-q details { margin-top: 4px; }
#chat .ch-q summary { cursor: pointer; opacity: .8; font-size: 12px; }
#chat .ch-q pre { max-height: 240px; overflow: auto; white-space: pre-wrap; font: 12px/1.4 var(--sans); margin: 4px 0 0; }
#chat .ch-cost { font-size: 11px; }

/* Unified monitoring: compact workstation list, readable conditions, persistent event history. */
#alerts{position:fixed;inset:0;z-index:20;background:rgba(39,32,27,.25);display:flex;align-items:center;justify-content:center;outline:none}
#alerts[hidden],#alerts [hidden]{display:none!important}
#alerts .dlg{width:min(940px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);color:var(--ink)}
#alerts .dlg-title{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px}
#alerts .t{font:600 23px var(--serif)}
#alerts .dlg-title>div{display:flex;gap:8px;align-items:center}
#alerts button{font:inherit;min-height:30px;padding:3px 12px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink)}
#alerts button:hover{background:var(--select)}
#alerts button.primary{background:var(--ink);color:var(--card);border-color:var(--ink)}
#alerts button:disabled{opacity:.55;cursor:default}
#alerts :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--sea);outline-offset:2px}
#alerts .nav{display:flex;gap:24px;border-bottom:1px solid var(--line);padding:0 20px}
#alerts .nav button{border:0;border-bottom:2px solid transparent;background:none;padding:8px 0}
#alerts .nav button.on{border-bottom-color:var(--mag);font-weight:600}
#alerts .unread{color:var(--seal);font-size:12px}
#alerts .dlg-pane{flex:1;min-height:0;overflow:auto;padding:0 20px}
#alerts .main{min-width:0}
#alerts .section-note,#alerts .muted,#alerts .by,#alerts small{color:var(--muted);font-size:12px;line-height:1.6}
#alerts .section-note{margin:12px 0}
#alerts .item{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--rule)}
#alerts .item>div:first-child{min-width:0;flex:1}
#alerts .item-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
#alerts .item-heading strong{font-size:15px}
#alerts .code{font:12px var(--mono);color:var(--muted)}
#alerts .state{color:var(--muted);font-size:12px}
#alerts .condition{margin:5px 0;overflow-wrap:anywhere;line-height:1.6}
#alerts .acts{display:flex;gap:6px;flex-shrink:0}
#alerts .err{color:var(--seal)}
#alerts .item.new{border-left:3px solid var(--seal);padding-left:12px}
#alerts .empty{padding:36px 0;color:var(--muted)}
#alerts .dlg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:10px 20px;min-height:48px}
#alerts .dlg-foot .msg{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
#alerts .edit-actions{display:flex;gap:8px;flex-shrink:0}
#alerts .edit,#alerts .settings,#alerts .detail{padding:16px 0}
#alerts .field{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-weight:600;margin:0 0 16px}
#alerts input,#alerts select,#alerts textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);padding:6px 8px;max-width:100%;min-width:0}
#alerts input:not([type=radio]){width:min(100%,450px)}
#alerts input[type=radio]{margin:0 4px 0 0}
#alerts .row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:12px 0}
#alerts .row label{display:inline-flex;align-items:center;gap:4px}
#alerts .ai-assist{background:var(--paper);border-left:3px solid var(--mag);padding:12px;margin:4px 0 20px}
#alerts .ai-assist .field{margin:8px 0;font-weight:400}
#alerts .ai-assist textarea{height:70px;min-height:60px;font-family:var(--sans);width:100%;resize:vertical}
#alerts .ai-result:empty{display:none}
#alerts .ai-result{font-size:13px;margin:8px 0 0;white-space:pre-wrap}
#alerts .formula-label{margin-bottom:6px}
#alerts .formula-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--line);border-bottom:0;background:var(--paper)}
#alerts .formula-tools label{display:flex;align-items:center;gap:6px}
#alerts textarea[name=formula]{display:block;width:100%;height:140px;resize:vertical;font:13px/1.65 var(--mono)}
#alerts .formula-summary:empty{display:none}
#alerts .formula-summary{white-space:pre-wrap}
#alerts .out{font:12px/1.7 var(--mono);white-space:pre-wrap;border:1px solid var(--line);padding:10px;margin:12px 0;background:var(--paper);overflow-wrap:anywhere}
#alerts .out:empty{display:none}
#alerts .detail h2{font:600 21px var(--serif)}
#alerts .detail pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.7 var(--mono)}
#alerts .detail li{padding:4px 0}
#alerts .enter-box{padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--mag);background:var(--paper)}
#alerts .enter-box input{width:130px}
#alerts .tw-pill{font-size:11px;padding:1px 6px;border:1px solid var(--line);background:var(--paper);color:var(--mag);font-weight:600}
#alerts .topic-thesis{padding:10px 12px;margin:10px 0;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--mag);line-height:1.6}
#alerts .topic-syms button{font-size:12px;min-height:26px;padding:2px 8px}
#alerts .tw-detail-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 18px}
#alerts .tw-detail-item{padding:10px 12px;border:1px solid var(--rule);background:var(--paper)}
#alerts .tw-badge{font-size:11px;padding:1px 6px;border:1px solid var(--line);background:var(--card)}
#alerts .tw-badge.price{color:var(--mag)}
#alerts .tw-badge.fact{color:var(--sea)}
#alerts .tw-finding{margin:6px 0 0;padding:6px 8px;background:var(--card);border-left:2px solid var(--sea);font-size:13px;line-height:1.6}
#alerts .topic-evidence{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
#alerts .topic-evidence ul{padding-left:18px;margin:6px 0}
#alerts .topic-evidence li{font-size:13px;line-height:1.6;padding:3px 0}
#alerts a{color:var(--sea)}
#alertBtn.added{border-color:var(--mag);box-shadow:inset 3px 0 var(--mag)}
@media(max-width:600px){
 #alerts .topic-evidence{grid-template-columns:1fr}
 #alerts .dlg{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
 #alerts .dlg-title{padding:12px;align-items:flex-start}
 #alerts .t{font-size:20px}
 #alerts .dlg-title>div{gap:4px}
 #alerts .dlg-title button{padding:3px 7px}
 #alerts .nav{padding:0 12px;gap:20px}
 #alerts .dlg-pane{padding:0 12px}
 #alerts button{min-height:36px}
 #alerts .item{align-items:flex-start;flex-direction:column;gap:8px}
 #alerts .dlg-foot{padding:10px 12px;flex-wrap:wrap}
 #alerts .edit-actions{margin-left:auto}
 #alerts .formula-tools select{font-size:12px}
}
#skills .item .facts, #skills .item .props { grid-column: 3 / -1; color: var(--muted); font-size: 12px; }
#skills .item .facts a, #skills .item .props a { cursor: pointer; text-decoration: underline; }

/* The welcome (welcome.mjs): the intro deck's cover (docs/marketing) as a sheet over the page, which shows dimmed
   around it, so what comes after it is in view: warm paper under a double magenta rule, serif titles, the demo chart
   beside a chat of bubbles (me on the right in ink, the 幕僚 on the left in sea blue). The questions are big square
   tiles; the chosen one an ink block. */
#welcome { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(39, 32, 27, .38); color: var(--ink); font-family: var(--sans); overflow-y: auto; }
#welcome[hidden] { display: none; }
#welcome .wl { width: min(1060px, 100%, calc((100vh - 300px) * 2 + 330px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px 28px 22px; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--ink-soft); }
#welcome .wl-top { display: flex; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 3px double var(--mag); }
#welcome .wl-top b { font: 900 20px var(--serif); letter-spacing: .08em; }
#welcome .wl-prog { font: 13px var(--mono); color: var(--muted); }
#welcome button { font: inherit; cursor: pointer; }
#welcome .wl-skip { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 14px; }
#welcome .wl-skip:hover { color: var(--ink); text-decoration: underline; }
#welcome .wl-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#welcome .wl-go { height: 44px; padding: 0 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 16px; }
#welcome .wl-go:hover { background: var(--ink-soft); }
#welcome .wl-go:disabled { opacity: .35; cursor: default; }
/* The one thing to click on the first sheet: magenta, the page's one accent, big, with an arrow that nudges. */
#welcome .wl-cta { height: 54px; padding: 0 26px; border-color: var(--mag); background: var(--mag); color: #fff; font: 700 18px var(--sans); display: inline-flex; align-items: center; gap: 12px; }
#welcome .wl-cta:hover { background: var(--mag); filter: brightness(.92); }
#welcome .wl-cta i { font-style: normal; font-size: 22px; animation: wl-nudge 1.4s ease-in-out infinite; }
@keyframes wl-nudge { 50% { transform: translateX(5px); } }
#welcome .wl-back, #welcome .wl-quiet { height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-size: 14px; }
#welcome .wl-back { border-color: transparent; background: none; padding: 0 4px; }
#welcome .wl-back:hover, #welcome .wl-quiet:hover { color: var(--ink); border-color: var(--ink-soft); }
#welcome .wl-back:hover { border-color: transparent; }
#welcome .wl-hint { color: var(--muted); font-size: 15px; line-height: 1.6; }
#welcome .wl-capabilities { margin: 8px 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
#welcome .wl-capabilities summary { cursor: pointer; width: fit-content; }
#welcome .wl-capabilities summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#welcome .wl-capabilities p { margin: 8px 0 0; }
/* hello */
#welcome .wl-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: clamp(12px, 2.4vh, 22px) 0 clamp(12px, 2vh, 18px); }
#welcome h1 { margin: 0; font: 900 clamp(26px, min(3.2vw, 4.8vh), 42px)/1.2 var(--serif); letter-spacing: .01em; }
#welcome h1 em { font-style: normal; color: var(--mag); }
#welcome .wl-lead { max-width: 340px; display: grid; gap: 12px; justify-items: start; }
#welcome .wl-lead p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
#welcome .wl-live { position: relative; flex: none; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
#welcome .wl-live[hidden] { display: none; }
#welcome .wl-graph { margin-right: 280px; border-right: 1px solid var(--rule); }
#welcome .wl-bar { display: flex; align-items: baseline; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
#welcome .wl-bar b { font-size: 15px; color: var(--ink); }
#welcome .wl-key { margin-left: auto; font-size: 12px; }
/* the chart, the pointer and what it shows */
#welcome .wl-stage { position: relative; display: flex; }
#welcome .wl-stage .plot { flex: 1; min-width: 0; }
#welcome .wl-tip { position: absolute; z-index: 2; width: 250px; padding: 8px 11px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ink); font-size: 13px; line-height: 1.55; color: var(--ink-soft); pointer-events: none; animation: wl-fade .3s both; }
#welcome .wl-tip[hidden] { display: none; }
#welcome .wl-tip b { display: block; color: var(--ink); } #welcome .wl-tip i { display: block; margin-top: 4px; font-style: normal; color: var(--sea); }
#welcome .wl-hand { position: absolute; z-index: 3; left: 0; top: 0; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); transition: transform .7s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
#welcome .wl-hand[hidden] { display: none; }
#welcome .ax { font: 11px var(--mono); fill: var(--muted); } #welcome .lg { font: 12px var(--sans); fill: var(--muted); } #welcome .rt { font: 600 12px var(--sans); }
#welcome .sig { opacity: 0; } #welcome .sig.on { opacity: 1; }
#welcome .et { font: 600 11.5px var(--sans); fill: #fff; } #welcome .ev { opacity: 0; } #welcome .ev.on { opacity: 1; animation: wl-fade .5s both; }
#welcome .sig.on .vl { animation: wl-drop .5s ease-out; } #welcome .sig.on .tag { animation: wl-fade .5s .25s both; }
#welcome .live-dot { animation: wl-pulse 1.6s ease-in-out infinite; }
/* the chat as tall as the chart beside it; older bubbles go out at the top */
#welcome .chat { position: absolute; top: 0; right: 0; bottom: 0; width: 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 12px 14px; background: var(--panel); overflow: hidden; }
#welcome .chat .m { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
#welcome .chat .m:not(.on) { display: none; }
#welcome .chat .m.on { animation: wl-rise .35s ease-out; }
#welcome .chat .av { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--sea); }
#welcome .chat .me { justify-content: flex-end; }
#welcome .chat .me .av { background: var(--ink); font-size: 13px; }
#welcome .chat p, #welcome .chat .m > div { margin: 0; padding: 7px 11px; border-radius: 12px; max-width: 240px; }
#welcome .chat .m > div > p { padding: 0; max-width: none; }
#welcome .chat .me p { background: var(--ink); color: var(--paper); border-top-right-radius: 3px; }
#welcome .chat .bot p, #welcome .chat .bot > div { background: #fff; border: 1px solid var(--rule); border-top-left-radius: 3px; }
#welcome .chat .bot > div p { border: 0; background: none; }
#welcome .chat .bot.cont { margin-top: -4px; } #welcome .chat .bot.cont .av { visibility: hidden; }
#welcome .chat .typing p { display: flex; gap: 5px; padding: 12px 13px; }
#welcome .chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: wl-pulse 1s infinite; }
#welcome .chat .typing i:nth-child(2) { animation-delay: .15s; } #welcome .chat .typing i:nth-child(3) { animation-delay: .3s; }
#welcome .chat .dm { margin-top: 7px; border: 1px solid var(--line); border-left: 3px solid var(--mag); padding: 5px 9px; font-size: 13px; background: var(--paper); }
#welcome .chat .dm .th { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); } #welcome .chat .dm .th b { color: var(--ink); }
#welcome .chat .dm .tl { font-size: 12px; color: var(--sea); }
@keyframes wl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wl-drop { from { stroke-dashoffset: -300; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes wl-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes wl-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #welcome .sig.on .vl, #welcome .sig.on .tag, #welcome .live-dot, #welcome .chat .m.on, #welcome .wl-cta i, #welcome .wl-tip { animation: none; } }
/* questions and the last step */
#welcome .wl-q { width: 100%; max-width: 760px; margin: clamp(20px, 5vh, 48px) auto clamp(8px, 3vh, 28px); display: grid; gap: 14px; }
#welcome .wl-q h2 { margin: 0; font: 700 clamp(28px, 4.4vh, 40px)/1.3 var(--serif); }
#welcome .wl-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
#welcome .wl-opt { min-height: 64px; padding: 0 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 17px; text-align: left; }
#welcome .wl-opt:hover { border-color: var(--ink-soft); }
#welcome .wl-opt.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#welcome .wl-nav { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#welcome .wl-nav .wl-go { margin-left: auto; }
#welcome .wl-nav .grow { flex: 1; }
#welcome .wl-nav .grow ~ .wl-go { margin-left: 0; }
#welcome .wl-idea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 17px/1.6 var(--sans); resize: vertical; }
#welcome .wl-idea:focus, #welcome .wl-acct input:focus { outline: none; border-color: var(--ink-soft); }
#welcome .wl-notes { padding: 10px 14px; border-left: 3px solid var(--sea); background: var(--card); display: grid; gap: 3px; font-size: 15px; }
#welcome .wl-notes-h { display: flex; align-items: center; color: var(--sea); font: 700 14px var(--serif); }
#welcome .wl-notes .wl-hint { font-size: 13px; margin-top: 4px; }
#welcome .wl-acct { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
#welcome .wl-acct .wl-hint, #welcome .wl-acct .wl-nav, #welcome .wl-acct .wl-err { grid-column: 1 / -1; margin: 0; }
#welcome .wl-acct label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
#welcome .wl-acct input { height: 40px; padding: 0 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 16px; }
#welcome .wl-err { color: var(--seal); font-size: 14px; }
#welcome .wl-err:empty { display: none; }
@media (max-width: 900px) {
  #welcome { padding: 0; }
  #welcome .wl { max-height: 100vh; padding: 14px 16px 20px; border: 0; }
  #welcome .wl-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  #welcome .chat { display: none; }
  #welcome .wl-graph { margin-right: 0; border-right: 0; }
  #welcome .wl-opts, #welcome .wl-acct { grid-template-columns: 1fr; }
}

/* Unsupported periods stay visible so users can understand the daily-only option coverage. */
#bar #periods button:disabled, #bar select:disabled { opacity: .45; cursor: not-allowed; }

/* Options workspace: one selection controls a standard chart above the compact T-chain. */
#optionsMarket { position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; min-width:0; overflow:auto; background:var(--card); scrollbar-gutter:stable; }
#optionsMarket[hidden] { display:none; }
.options-mode #tape { height:23px; flex:none; }
.options-mode #bar :is(#periods,#adj,#layoutBtn,#formulaBtn,#note,#status) { display:none; }
#bar #optionsMarketBtn[aria-pressed="true"] { border-bottom:2px solid var(--ink); }
#optionsMarket button,#optionsMarket select { min-height:28px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; padding:2px 8px; }
#optionsMarket button:hover { border-color:var(--ink); }
#optionsMarket :focus-visible { outline:2px solid var(--sea); outline-offset:-2px; }
.om-toolbar { display:flex; align-items:center; gap:8px; min-width:0; }
.om-toolbar[hidden] { display:none; }
.om-toolbar select { width:150px; }
.om-toolbar :focus-visible { outline:2px solid var(--sea); outline-offset:-2px; }
.om-info { position:relative; color:var(--muted); font-size:12px; }
.om-info summary { cursor:pointer; }
.om-info>div { position:absolute; top:28px; left:0; z-index:10; width:300px; padding:12px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); line-height:1.7; }
.om-workspace { display:grid; grid-template-columns:minmax(0,1fr) clamp(670px,50%,800px); align-items:start; flex:none; min-width:0; }
.om-chart-panel { position:sticky; top:0; min-width:0; border-right:1px solid var(--line); background:var(--card); }
.om-chain-panel { min-width:0; }
.om-chart-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; padding:4px 10px; border-bottom:1px solid var(--line); }
.om-selected-title { font-size:12px; font-weight:600; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.om-periods { position:absolute; top:4px; right:74px; z-index:4; display:inline-flex; border:1px solid var(--line); background:var(--card); }
#optionsMarket .om-periods button { min-height:22px; padding:1px 7px; border:0; font-size:11px; color:var(--ink-soft); background:transparent; }
#optionsMarket .om-periods button + button { border-left:1px solid var(--line); }
#optionsMarket .om-periods button:hover { color:var(--ink); background:var(--hover); }
#optionsMarket [data-tf][aria-pressed="true"],#optionsMarket button[data-side][aria-pressed="true"] { background:var(--ink); color:var(--card); }
.om-expiries { display:flex; align-items:center; gap:4px; min-height:36px; padding:4px 8px; overflow-x:auto; white-space:nowrap; border-bottom:1px solid var(--line); }
#optionsMarket .om-expiries button { flex:none; min-height:26px; border-color:transparent; }
#optionsMarket .om-expiries [aria-selected="true"] { border-bottom:2px solid var(--ink); font-weight:600; }
.om-chart-shell { display:flex; position:relative; flex-direction:column; height:440px; background:var(--bg); }
.om-axis-labels { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2px 8px; height:28px; min-height:28px; padding:0 8px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; border-bottom:1px solid var(--rule); background:var(--panel); }
.om-underlying-legend { display:flex; align-items:center; gap:4px; color:var(--sea); }
.om-underlying-hidden :is(.om-overlay-name,.om-underlying-value) { color:var(--muted); }
#optionsMarket [data-overlay] { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-height:24px; padding:3px; border:0; background:transparent; }
[data-overlay] svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
[data-overlay][aria-pressed="true"] .om-eye-slash { display:none; }
.om-chart-view { flex:1; min-height:0; }
.om-chart-view .star,.om-chart-view .dl,.om-chart-view .legends .title { display:none; }
.om-chart-view .legends { right:152px; font-size:11px; }
.om-chart-view .lg { font-size:11px; gap:2px 6px; padding:1px 4px; background:rgba(252,252,252,.88); }
.om-chart-view .lg > span { white-space:normal; }
.om-chart-view .lg[data-pane="0"] { padding-right:4px; }
.om-chart-message { position:absolute; inset:32px 0 0; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); background:var(--bg); }
.om-chart-shell[data-state="ready"] .om-chart-message { display:none; }
.om-chart-shell:not([data-state="ready"]) .om-chart-view { visibility:hidden; }
.om-body { min-height:160px; background:var(--bg); }
#optionsMarket[aria-busy] .om-body { opacity:.6; }
.om-body table { border-collapse:separate; border-spacing:0; width:100%; font-variant-numeric:tabular-nums; }
.om-body th,.om-body td { height:28px; padding:3px 2px; border-bottom:1px solid var(--rule); white-space:nowrap; text-align:right; }
.om-body td { font:12px var(--mono); cursor:pointer; }
.om-body thead { position:sticky; top:0; z-index:2; }
.om-body thead th { background:var(--panel); color:var(--ink-soft); font-weight:normal; }
.om-body .om-group { text-align:center; color:var(--ink); }
.om-body .om-strike { background:var(--paper); border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-family:var(--mono); }
.om-strike small { display:block; font:10px var(--sans); color:var(--muted); }
.om-body .om-name { text-align:left; }
#optionsMarket .om-name button { border:none; background:none; padding:0; min-height:20px; text-align:left; font:12px var(--sans); }
.om-body tr:hover td:not(.om-selected) { background:var(--hover); }
.om-body td.om-selected { background:var(--sel); }
.om-selected.om-name { box-shadow:inset 2px 0 var(--sea); }
.om-special { color:var(--muted); font-size:10px; }
.om-up { color:var(--up); }.om-down { color:var(--down); }
.om-foot { display:flex; flex-wrap:wrap; gap:4px 18px; padding:5px 12px; flex:none; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.om-unit-note { margin-left:auto; }
.om-error { padding:6px 12px; flex:none; background:var(--paper-warm); color:var(--ink-soft); font-size:12px; }
.om-empty { padding:30px 12px; color:var(--muted); }
.om-mobile-side { display:none; }
.om-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@container (max-width:1100px) {
  .om-workspace { grid-template-columns:minmax(0,1fr); }
  .om-chart-panel { position:static; border-right:0; border-bottom:1px solid var(--line); }
  .om-chart-shell { height:360px; }
}
@container (max-width:800px) {
  .om-chart-tools { min-height:36px; padding:6px 8px; }
  .om-chart-shell { height:320px; }
  #optionsMarket .om-periods button { min-height:26px; padding:2px 8px; }
  .om-mobile-side { display:flex; gap:6px; padding:4px 8px; }
  #optionsMarket[data-side="call"] .om-put,#optionsMarket[data-side="put"] .om-call { display:none; }
  .om-body th,.om-body td { height:36px; padding:4px; font-size:11px; }
  .om-body .om-strike { font-size:11px; }.om-strike small { font-size:9px; }
  #optionsMarket .om-name button { font-size:11px; min-height:32px; }
  .om-foot { padding:4px 8px; }.om-unit-note { margin-left:0; }
  #optionsMarket .om-expiries button { min-height:36px; }
}
/* Sidebars are siblings of the workspace, so every foreground view leaves room for the assistant. */
@media (max-width:720px) { #chat:not([hidden]) { position:absolute; inset:0; width:auto; z-index:20; } }

/* Upstream price events: a temporal layer, independent of price adjustment and user notes. */
.market-events-toggle { font-size:12px; color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); cursor:pointer; }
.market-events-toggle[aria-expanded="true"] { border-color:var(--ink); color:var(--ink); box-shadow:inset 0 -2px var(--ink); }
.market-events-panel { position:absolute; top:53px; left:12px; z-index:8; width:min(340px,calc(100% - 78px)); max-height:min(650px,calc(100% - 65px)); display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); font-size:12px; }
.market-events-panel[hidden] { display:none; }
.market-events-panel header { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-bottom:1px solid var(--line); flex-shrink:0; }
.market-events-panel header > strong { font:600 16px var(--serif); }
.market-events-panel header button { border:0; background:none; font-size:16px; width:30px; height:30px; color:var(--ink-soft); cursor:pointer; }
.market-events-panel button:focus-visible,.market-events-panel summary:focus-visible { outline:2px solid var(--sea); outline-offset:-2px; }
.me-body { overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.me-intro { padding:12px; background:var(--card); border-bottom:1px solid var(--line); }
.me-intro p { margin:6px 0; line-height:1.7; }
.me-intro > span,.me-draft { color:var(--muted); font-size:11px; }
.me-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; }
.me-tools .me-source,.me-tools .me-layer { font-size:11px; color:var(--muted); }
.me-tools .me-layer { display:flex; align-items:center; gap:3px; white-space:nowrap; }
.me-window { display:flex; justify-content:space-between; gap:8px; padding:0 12px 9px; border-bottom:1px solid var(--line); font-size:11px; }
.me-window span,.me-period,.me-row time,.me-row b { font-variant-numeric:tabular-nums; }
.me-window span { color:var(--muted); }
.me-notice { color:var(--muted); line-height:1.6; font-size:11px; margin:9px 12px; }
.me-detail { padding:12px; border-bottom:1px solid var(--line); line-height:1.6; background:var(--card); }
.me-title { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.me-title button,.me-group button { border:0; background:none; color:var(--muted); font-size:11px; padding:4px 0 4px 8px; white-space:nowrap; }
.me-period { margin:4px 0; }
.me-state,.me-hint { color:var(--muted); font-size:11px; }
.me-hint { margin:9px 12px; }
.me-caveat { margin:7px 0; font-size:12px; }
.me-meta { margin:5px 0 8px; font-size:11px; }
.me-meta summary { color:var(--muted); cursor:pointer; }
.me-detail dl { display:grid; grid-template-columns:65px 1fr; font-size:11px; margin:7px 0; }
.me-detail dt { color:var(--muted); } .me-detail dd { margin:0; overflow-wrap:anywhere; }
.me-detail .me-notice { margin:6px 0; }
.me-ask { padding:7px 10px; background:var(--ink); color:var(--card); border:0; cursor:pointer; }
.me-draft { display:block; margin-top:5px; }
.me-filter { display:flex; gap:4px; padding:10px 12px; }
.me-filter button { padding:5px 9px; background:transparent; border:1px solid var(--line); color:var(--ink-soft); }
.me-filter button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--card); }
.me-group { display:flex; align-items:center; justify-content:space-between; margin:0 12px 8px; }
.me-list { overflow-y:auto; max-height:280px; padding:0; overscroll-behavior:contain; }
.me-row { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; padding:9px 12px; border:0; border-top:1px solid var(--rule); background:transparent; cursor:pointer; font-size:12px; color:var(--ink); }
.me-row-label { display:block; }
.me-row time { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.me-row b { font-family:var(--mono); }
.me-row:hover { background:var(--hover); }
.me-row[aria-pressed="true"] { box-shadow:inset 3px 0 var(--sea); background:var(--sel); }
.me-up { color:var(--up); } .me-down { color:var(--down); }
.me-empty { margin:12px; line-height:1.7; }
.me-empty p { color:var(--muted); margin:5px 0; }
.me-fallback { padding:0 12px 12px; }
@media (max-width:600px) {
  .market-events-panel { top:auto; bottom:30px; left:12px; width:calc(100% - 24px); max-height:60%; }
  .me-row { min-height:48px; }
  .me-filter button,.me-title button,.me-group button { min-height:32px; }
}
@media (max-width:600px) and (max-height:650px) {
  .market-events-panel { max-height:70%; }
}
#chat .ch-q { overflow-wrap:anywhere; min-width:0; }
@media (max-width:800px) {
  .om-toolbar { gap:6px; }
  .om-toolbar select { width:112px; }
  .om-info>div { position:fixed; top:42px; left:12px; right:12px; width:auto; }
}
/* Pre-IPO instruments keep their unit, source and freshness visible even in a mixed board. */
.preipo-note { padding: 6px 10px; color: var(--ink-soft); background: var(--panel); border-bottom: 1px solid var(--rule); font-size: 12px; line-height: 1.5; }
.bhead button[data-quotes] { margin-left: auto; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); font: inherit; padding: 1px 6px; cursor: pointer; }
.preipo-caption { padding: 3px 6px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--rule); }
.bpanel .rows li.preipo-row, .bpanel .rows li.valuation-head { grid-template-columns: minmax(72px, 1fr) 54px 58px 64px 58px; min-width: 334px; }
.bpanel .rows li.preipo-row { cursor: pointer; }
.bpanel .rows li.preipo-row > span, .bpanel .rows li.valuation-head > span { display: block; }
.bpanel .rows li.valuation-head > span:nth-child(n+3) { text-align: right; }
.preipo-mixed small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; font-weight: normal; }
.bpanel .rows li.preipo-mixed > span:nth-child(2) { white-space: normal; }
.preipo-value { font-weight: 600; }
.preipo-name { color: var(--sea); }
.preipo-board-foot { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 5px 6px; border-top: 1px solid var(--rule); font-size: 11px; line-height: 1.4; color: var(--muted); }
.preipo-board-foot > span:first-child, .preipo-board-foot > span:last-child { flex-basis: 100%; }
.preipo-board-foot .late, #quotes .late, .preipo-chart-state.late { color: var(--seal); }
.preipo-row:focus-visible, .preipo-mixed:focus-visible, #quotes button:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
#quotes .qt-title select { font: inherit; color: var(--ink); max-width: 55%; background: transparent; border: 1px solid var(--line); padding: 4px; }
#quotes .qt-close, #quotes .qt-manage { color: var(--ink-soft); background: transparent; border: 1px solid var(--line); cursor: pointer; padding: 4px 8px; }
#quotes .qt-close { margin-left: auto; }
#quotes small { display: block; font-size: 11px; color: var(--muted); font-weight: normal; }
#quotes .qt-open { font: inherit; font-weight: 600; text-align: left; color: var(--sea); padding: 5px 0; border: 0; background: transparent; cursor: pointer; }
#quotes.preipo-quotes table { width: 100%; min-width: 520px; }
#quotes.preipo-quotes .qt-open { font-weight: normal; color: var(--sea); padding: 0; }
#quotes.preipo-quotes .qt-value { font-weight: 600; }
#quotes .qt-foot { line-height: 1.6; }
#quotes .qt-foot button { margin-left: 8px; }
.legends .lg .preipo-chart-note, .legends .lg .preipo-chart-state { flex-basis: 100%; white-space: normal; display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 720px) {
  #boards .dlg-foot button { flex-shrink: 0; white-space: nowrap; min-height: 44px; padding: 3px 16px; }
  #sideToggle { min-height: 44px; min-width: 44px; }
  #quotes .qt-manage { min-width: 44px; }
  #quotes .qt-title { flex-wrap: wrap; align-items: center; padding: 4px 6px; }
  #quotes .qt-title select, #quotes .qt-close, #quotes .qt-open, #quotes .qt-manage { min-height: 44px; }
  #quotes.preipo-quotes table { min-width: 360px; font-size: 12px; }
  #quotes.preipo-quotes th, #quotes.preipo-quotes td { padding-left: 4px; padding-right: 4px; }
  #quotes.preipo-quotes th { font-size: 11px; }
  .preipo-chart .lg[data-pane="0"] { padding-right: 0; }
  .preipo-chart .lg .title { padding-right: 60px; }
  .preipo-chart .lg > span { white-space: normal; max-width: 100%; }
  .preipo-chart .lg .preipo-chart-note, .preipo-chart .lg .preipo-chart-state { padding-right: 40px; }
}
.preipo-load { position: absolute; z-index: 8; top: 0; left: 0; right: 0; padding: 10px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.preipo-load button { margin-left: 8px; padding: 5px 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); cursor: pointer; }
@media (max-width: 720px) { .preipo-load button { min-height: 44px; } }