/* 财务月报大屏（Phase 5 批二）。颜色一律走 app.css 的主题变量，⛔ 不写死色值
   —— 唯一例外是堆叠柱的分段配色（与主题无关的固定色，同周报 GROUP_COLORS 的做法）。

   ⚠️ 为什么不复用 weekly.css：那是周报页的专属样式（三栏详情/批注栏/看板），
   本页一个都用不到，而挂上去等于把月报的呈现绑死在周报的改动面上（⛔ 本批不改周报）。
   app.css 只提供主题变量 + reset + 少量按钮，页面骨架没有可复用的类。 */

.fin-page { display: flex; flex-direction: column; min-height: 100%; background: var(--bg); }

/* ---------- 顶栏 ---------- */
/* ⚠️⚠️ padding-right **必须 ≥ 100px**：右上角有**两颗** `position:fixed; top:7px; z-index:65`
   的浮标 —— 帮助浮标（`.hlp-fab`，help.js 自注入，right:14px 34×34）与主题切换浮标
   （`.thm-fab`，theme.js 自注入，right:56px 34×34），不让位的话它们会**盖住**本页 header
   最右侧的控件（这里是 `.fin-user`）—— 元素还在、有尺寸、visible，就是**看不见也点不到**。
   2026-08-27 实测踩过：本页主题切换按钮被帮助浮标完全盖住，Aaron 报「我没有看到」。
   ⚠️ 该数值 2026-08-31 由 58 加宽到 100（主题按钮从本页顶栏搬出去做成第二颗浮标，
   横向占位变宽）；算法见 `app.css` 的 `.top-bar, .reader-bar` 上方注释。
   ⚠️ 同一条让位在 `app.css`（.top-bar/.reader-bar）与 `weekly.css`（.wk-header）都写了 ——
   我写本文件时抄了 header 的形状、没抄这一条。**新建页面时这是必抄的一条。** */
.fin-header { display: flex; align-items: center; justify-content: space-between;
              padding: 10px 100px 10px 20px; background: var(--panel);
              border-bottom: 1px solid var(--border); }
.fin-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.fin-logo img { width: 24px; height: 24px; }
.fin-logo span { color: var(--accent); }
.fin-header-right { display: flex; align-items: center; gap: 10px; }
.fin-user { font-size: 13px; color: var(--muted); }

.fin-hint { margin: 40px auto; padding: 18px 22px; max-width: 560px; text-align: center;
            background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
            color: var(--muted); }
.fin-hint a { margin-left: 8px; color: var(--accent); }

.fin-layout { flex: 1; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- 五维筛选（月度→部门→店铺→父ASIN→运营）----------
   财务要求「平级」：五格**等宽**，⛔ 不再给店铺格开小灶。月度那格内部上下两行，
   所以它的外宽和其它四格一样 —— 这就是「权重改为平级」的落地形态。 */
.fin-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
               padding: 14px 16px; background: var(--panel);
               border: 1px solid var(--border); border-radius: 12px; }
.fin-filter { display: flex; flex-direction: column; gap: 6px;
              flex: 1 1 178px; min-width: 178px; max-width: 240px; }
.fin-filter-asin { flex: 1.4 1 230px; max-width: 320px; }
.fin-filter label { font-size: 12px; color: var(--muted); font-weight: 600; }
.fin-count { font-weight: 400; opacity: .8; }
.fin-filter select, .fin-filter input, .fin-filter textarea {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; }
/* 父ASIN 粘贴框：textarea（input 会吃掉换行），但外观压成一行高，不撑乱筛选栏 */
.fin-filter textarea { resize: vertical; min-height: 32px; max-height: 96px; line-height: 1.4; }
/* 月度：起/止上下两行，各带一个行内小标签 */
.fin-range { display: flex; align-items: center; gap: 6px; }
.fin-range-tag { flex: 0 0 auto; font-size: 12px; color: var(--muted); width: 16px; }
/* ---------- 父ASIN 组合框（外观对齐原生 select，行为自己写）----------
   ⚠️ **收起态必须和左右四个 <select> 长得一样**：同样的 padding / 边框 / 圆角 /
   字号 / 背景，右侧一个 ▾。差一点就会显得"这一格是外来的"。
   ⚠️ 浮层用 position:absolute + z-index：`.fin-filters` 没有设 overflow，
   所以不会被裁；但它下面紧挨着指标卡，z-index 必须压得住卡片。 */
.fin-combo { position: relative; }
/* ⚠️ 高度必须和原生 select **完全一致**：实测 line-height:1.5 算出来 33.5px、
   而 select 是 31px —— 差 2.5px 肉眼就能看出这一格是"外来的"。
   ⇒ 用同一条 `min-height` 同时驱动两者，⛔ 不各写各的数字（改一个忘一个又会分叉）。 */
.fin-filter select, .fin-combo-btn { min-height: 31px; }
.fin-combo-btn { width: 100%; text-align: left; padding: 5px 26px 5px 8px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
    color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.4;
    position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-combo-btn::after { content: "▾"; position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); color: var(--muted); font-size: 11px; }
.fin-combo-btn:hover { border-color: var(--accent); }
.fin-combo-btn[aria-expanded="true"] { border-color: var(--accent); }
.fin-combo-btn.has-value { color: var(--accent); font-weight: 600; }
.fin-combo-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
    width: 300px; max-width: 78vw; padding: 10px; display: flex; flex-direction: column; gap: 6px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow); }
.fin-combo-panel textarea { resize: vertical; min-height: 44px; max-height: 120px; line-height: 1.4; }
/* 父ASIN 已选芯片 */
.fin-asin-picked { font-size: 12px; color: var(--muted); display: flex;
                   flex-wrap: wrap; gap: 4px; align-items: center; }
.fin-chip { background: var(--accent-soft); color: var(--accent); border-radius: 10px;
            padding: 1px 7px; cursor: pointer; font-size: 11px; }
.fin-chip:hover { filter: brightness(.95); }
.fin-chip-clear { font-size: 11px; color: var(--muted); text-decoration: underline; }
.fin-filter-actions { display: flex; flex-direction: column; gap: 6px; margin-left: auto;
                      align-items: flex-end; }
.fin-scope { font-size: 12px; color: var(--muted); text-align: right; max-width: 340px; }
/* 级联语义的小字说明（Aaron 2026-08-27：接受语义并在界面用小字标明） */
.fin-cascade-note { font-size: 11px; color: var(--muted); opacity: .85;
                    text-align: right; max-width: 340px; line-height: 1.5; }

/* ---------- 12 项指标卡 ---------- */
.fin-cards { display: grid; gap: 12px;
             grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.fin-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
            padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
            /* 卡片可点 ⇒ 把该字段画成折线。⚠️ 光标与 hover 是"这东西能点"的唯一提示 */
            cursor: pointer; user-select: none;
            transition: border-color .12s, background .12s; }
.fin-card:hover { border-color: var(--accent); }
.fin-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-card.core { border-color: var(--accent); }
/* 折线模式选中态。⚠️ **边框 + 底色 + 色块三样一起**：只靠边框在暗色主题下几乎看不出来，
   而 .fin-card.core 本来就是 accent 边框 ⇒ 核心三卡选没选中光看边框根本分不出。
   ⚠️ 底色用 --accent-soft（明暗两套都有定义），⛔ 不写死颜色。 */
.fin-card.picked { border-color: var(--accent); background: var(--accent-soft);
                   box-shadow: inset 0 0 0 1px var(--accent); }
.fin-card-label { font-size: 12px; color: var(--muted); font-weight: 600; }
/* 与折线**同色**的小色块（颜色由 JS 内联写入，见 finance.js 的 lineField）：
   卡片和图上哪条线是一对，一眼能认出来。 */
.fin-card-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
                margin-right: 5px; vertical-align: baseline; }
.fin-card-value { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.fin-card-value.neg { color: var(--danger); }
.fin-card-share { font-size: 12px; color: var(--muted); }

/* ---------- 图表 ---------- */
.fin-chart-box { background: var(--panel); border: 1px solid var(--border);
                 border-radius: 12px; padding: 14px 16px 8px; }
.fin-chart-head { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.fin-chart-head h2 { font-size: 15px; }
/* 头部右侧 = 脚注 + 「× 返回柱状图」。⚠️ 脚注可以很长，让它占剩余宽度并允许换行，
   按钮 flex 固定不被压缩 —— 否则窄屏下按钮会被挤成竖排的几个字。 */
.fin-chart-head-right { display: flex; align-items: baseline; gap: 12px;
                        flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
                        justify-content: flex-end; }
.fin-legend-note { font-size: 12px; color: var(--muted); flex: 1 1 240px; min-width: 0; }
/* 退出折线模式。⚠️ `.hidden` 在 app.css 里带 !important，故这里写 display 也压不住它。 */
.fin-line-exit { flex: 0 0 auto; display: inline-flex; align-items: center;
                 font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 8px;
                 cursor: pointer; white-space: nowrap;
                 background: var(--panel); color: var(--text);
                 border: 1px solid var(--border); }
.fin-line-exit:hover { border-color: var(--accent); color: var(--accent); }
.fin-chart { width: 100%; height: 460px; }

@media (max-width: 720px) {
  .fin-layout { padding: 12px 12px 24px; }
  .fin-filter-actions { margin-left: 0; align-items: flex-start; }
  .fin-chart { height: 380px; }
}

/* ================================================================ 批三：预警产品 / 预警详情 / ASIN 历史明细
   ⛔ 不把 weekly.css 整个挂进来（会把周报样式全带进来）。这里只补财务页要用的那一小撮，
   类名与周报**同名**（.table-scroll / .wk-table / .seg-tabs / .al-* / .rule-chip / .wk-drop-menu …）
   是刻意的：同一套交互形态用同一套名字，B3-17 用 getComputedStyle 断言它们在本页真的生效。
   .al-* 全带 `.wk-table.fin-table` 前缀（特异性 (0,3,1) 稳赢 `.wk-table td:first-child` 的 (0,2,1)）。
   颜色一律走 app.css 变量；规则芯片底色照周报逐色手写（含 dark）。 */

.fin-nav { display: flex; gap: 4px; }
.fin-nav a { font-size: 13px; padding: 4px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.fin-nav a:hover { background: var(--hover); color: var(--text); }
.fin-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.fin-view { padding: 12px 20px 24px; }
.fa-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fa-field { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.fa-field select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
                   background: var(--panel); color: var(--text); font-size: 13px; }
.fa-stat { font-size: 14px; }
.fa-stat b { font-size: 16px; }
.fa-stat-note { font-size: 12px; color: var(--muted); margin-left: 8px; }
.fa-toggle { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

.seg-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-tabs button { padding: 5px 13px; font-size: 13px; color: var(--muted); background: transparent;
                   border: none; border-right: 1px solid var(--border); cursor: pointer; }
.seg-tabs button:last-child { border-right: none; }
.seg-tabs button:hover { background: var(--hover); }
.seg-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ---- 规则芯片（7 枚恒显；零命中灰显 + 角标 0，⛔ 不做「消失」）---- */
.rule-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rule-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
             border: 1px solid transparent; color: #1f2937; user-select: none; }
:root[data-theme="dark"] .rule-chip { color: #e5e7eb; }
.rule-chip.on { border-color: var(--accent); font-weight: 600; }
.rule-chip.zero { opacity: .45; }
.rule-chip .chip-n { opacity: .75; margin-left: 3px; }
.chip-r1 { background: #FFE0E0; } :root[data-theme="dark"] .chip-r1 { background: #5A1E1E; }
.chip-r2 { background: #FFF0CC; } :root[data-theme="dark"] .chip-r2 { background: #5A4A00; }
.chip-r3 { background: #E8F4FD; } :root[data-theme="dark"] .chip-r3 { background: #1A3A5C; }
.chip-r4 { background: #FFF3E0; } :root[data-theme="dark"] .chip-r4 { background: #5C3800; }
.chip-r5 { background: #F3E5F5; } :root[data-theme="dark"] .chip-r5 { background: #3A0060; }
.chip-r6 { background: #E8F5E9; } :root[data-theme="dark"] .chip-r6 { background: #1B4A1E; }
.chip-r7 { background: #FFFDE7; } :root[data-theme="dark"] .chip-r7 { background: #5C5000; }
.cell-chips { display: flex; gap: 4px; flex-wrap: wrap; white-space: normal; }
.cell-chips .rule-chip { cursor: default; }

/* ---- 表格（照周报的 .table-scroll / .wk-table，但 max-height 用视口算、不写死 420px）---- */
.table-scroll { position: relative; overflow: auto; background:
    linear-gradient(to left, var(--table-scroll-fade), transparent 26px) right / 26px 100% no-repeat local; }
.fa-scroll { max-height: calc(100vh - 230px); }
.fh-scroll { max-height: calc(100vh - 150px); }
.wk-table { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
.wk-table th, .wk-table td { border: 1px solid var(--table-border); padding: 7px 11px; text-align: right; }
.wk-table th:first-child, .wk-table td:first-child { text-align: left; }
.wk-table thead th { position: sticky; top: 0; background: var(--table-head-bg); z-index: 2; }
.wk-table tbody tr:nth-child(even) { background: var(--table-stripe); }
.wk-table tbody tr:hover { background: var(--table-hover-bg); }
.wk-table.fin-table { table-layout: fixed; }
.wk-table.fin-table td { vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.wk-table.fin-table th.al-l, .wk-table.fin-table td.al-l { text-align: left; }
.wk-table.fin-table th.al-c, .wk-table.fin-table td.al-c { text-align: center; }
.wk-table.fin-table th.al-r, .wk-table.fin-table td.al-r { text-align: right; }
.wk-table.fin-table td.al-l .cell-chips { justify-content: flex-start; }
.wk-table.fin-table td.al-c .cell-chips { justify-content: center; }
/* ⚠️ 不写 `th { position: relative }`：thead th 已是 sticky（同样是定位元素，拖宽把手的 absolute 照样贴着它），
   写了会以 (0,3,1) 压掉 sticky，表头就不再吸顶（冒烟抓到的）。 */
.wk-table.fin-table th.sortable { cursor: pointer; user-select: none; }
.wk-table.fin-table th.sortable:hover, .wk-table.fin-table th.sorted { color: var(--accent); }
.th-sort { font-size: 9px; margin-left: 3px; opacity: .4; }
.wk-table.fin-table th.sorted .th-sort { opacity: 1; }
.th-note { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.fin-table .neg { color: var(--danger); }
.fin-table .num { font-variant-numeric: tabular-nums; }
.fa-link { color: var(--accent); cursor: pointer; text-decoration: none; }
.fa-link:hover { text-decoration: underline; }
.fa-cell-btn { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
               color: inherit; font-size: 12px; cursor: pointer; }
.fa-cell-btn:hover { border-color: var(--accent); color: var(--accent); }
.fa-empty { padding: 26px; text-align: center; color: var(--muted); }
/* 列宽拖拽把手：⚠️ 刻意不叫 .col-resizer —— app.css 里同名类是三栏布局的分隔条 */
.fa-resizer { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 3; }
.fa-resizer:hover { background: var(--accent); opacity: .3; }
body.fa-col-resizing, body.fa-col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ---- 趋势格：纵向堆若干条 mini 折线；点数 < 3 显「—」+ 角标 ---- */
.trend-spark { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.trend-spark svg { display: block; }
.trend-spark > span { display: inline-flex; align-items: center; gap: 5px; }
.fa-nodata { color: var(--muted); }
.fa-nodata sup { font-size: 9px; margin-left: 2px; opacity: .8; }

/* ---- 下拉菜单（⚙ 列 / 📈 折线）：照周报的 .wk-drop-menu / .col-menu-* ---- */
.wk-menu-wrap { position: relative; }
.wk-btn-menu { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
               background: var(--panel); color: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.wk-btn-menu:hover { border-color: var(--accent); color: var(--accent); }
.wk-drop-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 42;
                min-width: 200px; max-height: 340px; overflow-y: auto;
                background: var(--panel); border: 1px solid var(--border);
                border-radius: 10px; padding: 7px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.col-menu-head { font-size: 12px; color: var(--muted); padding: 2px 6px 6px; }
.col-menu-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px;
                 border-radius: 7px; font-size: 13px; cursor: pointer; }
.col-menu-item:hover { background: var(--hover); }
.col-menu-lab { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; cursor: inherit; }
.col-drag { color: var(--muted); font-size: 13px; line-height: 1; cursor: grab; padding: 3px 3px;
            user-select: none; flex: none; }
.col-drag:active { cursor: grabbing; }
.col-menu-item.dragging { opacity: .4; }
.col-menu-item.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.col-menu-item.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }
.col-menu-note { font-size: 11px; color: var(--muted); padding: 6px 6px 2px; margin-top: 5px;
                 border-top: 1px solid var(--border); line-height: 1.5; }
.col-menu-reset { width: 100%; margin-top: 6px; padding: 5px; font-size: 12px; border: 1px solid var(--border);
                  border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
.col-menu-reset:hover { border-color: var(--accent); color: var(--accent); }
.series-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* ---- 文本形态（可整段复制进飞书）---- */
.fa-views.both { display: flex; flex-direction: column; gap: 14px; }
.fa-text { font-size: 13px; line-height: 1.7; }
.fa-text-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
                background: var(--panel); white-space: pre-wrap; word-break: break-all; }
.fa-text-item .atx-head { font-weight: 600; }
.fa-text-item .atx-rules { color: var(--danger); }
.fa-text-item .atx-line { color: var(--muted); }

/* ---- 浮窗（财务侧独立实现，~30 行，⛔ 不碰 weekly-history.js）---- */
.fa-pop { position: fixed; z-index: 60; max-width: 420px; min-width: 240px; background: var(--panel);
          border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
          padding: 10px 13px; font-size: 13px; line-height: 1.6; }
.fa-pop-head { font-weight: 600; margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.fa-pop-item + .fa-pop-item { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); }
.fa-pop-rule { font-weight: 600; }
.fa-pop-detail { color: var(--muted); margin-top: 2px; }

/* ---- 预警详情页：左栏清单 + 中栏展开 + 右栏（批四：批注 / AI 两个 tab）。
   三列由变量 --fd-cols 定义；≤900px 回落单列（见文件末尾 @media）。 ---- */
.fd-layout { --fd-cols: 280px minmax(0, 1fr) 320px; display: grid; grid-template-columns: var(--fd-cols); gap: 14px;
             min-height: calc(100vh - 150px); }
.fd-list { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow-y: auto;
           max-height: calc(100vh - 150px); }
.fd-item { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.fd-item:hover { background: var(--hover); }
.fd-item.on { background: var(--accent-soft); }
.fd-item .fd-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-item .fd-item-sub { color: var(--muted); font-size: 12px; }
.fd-main { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 16px 20px;
           overflow: auto; }
.fd-head h2 { margin: 0 0 4px; font-size: 18px; }
.fd-head .fd-sub { color: var(--muted); font-size: 13px; }
.fd-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; font-size: 13px; }
.fd-status span b { font-variant-numeric: tabular-nums; }
.fd-stale { background: #FFF3E0; color: #7a4a00; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
:root[data-theme="dark"] .fd-stale { background: #5C3800; color: #ffe0b2; }
.fd-rules { margin: 12px 0; border-top: 1px solid var(--border); }
.fd-rule { display: grid; grid-template-columns: 26px 150px 1fr; gap: 10px; padding: 8px 4px;
           border-bottom: 1px solid var(--border); font-size: 13px; align-items: baseline; }
.fd-rule.hit .fd-rule-name { color: var(--danger); font-weight: 600; }
.fd-rule.skipped { color: var(--muted); }
.fd-rule-detail { color: var(--muted); }
.fd-trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.fd-trend { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.fd-trend-head { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.fd-trend svg { width: 100%; height: 64px; display: block; }
.fd-trend-months { font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; }
@media (max-width: 900px) { .fd-layout { --fd-cols: 1fr; } .fd-list { max-height: 220px; } }

/* ================================================================ 批四：详情页右栏 / 批注面板 / 抽屉 / 看板 / AI */

/* 右栏：tab + 两个 pane（批注 pane 里是搬进来的 #fa-annotation-panel，AI pane 里是搬进来的 #fai-pane） */
.fd-side { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); display: flex;
           flex-direction: column; min-width: 0; max-height: calc(100vh - 150px); overflow: hidden; }
.fd-tabs { margin: 9px 12px; align-self: stretch; }
.fd-tabs button { flex: 1; }
.fd-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fd-pane.hidden { display: none; }

/* 批注面板（单例）：上下文行 / 时间线（卡片由 notes-board 渲染）/ 输入区 */
.fa-annotation-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fap-context { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.6; }
.fap-ctx-t { font-weight: 600; font-size: 13px; }
.fap-ctx-s { color: var(--muted); }
.fap-timeline { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.fap-timeline .nb-cards { grid-template-columns: 1fr; gap: 8px; }
.fap-timeline .nb-section-head { display: none; }      /* 面板里只有一个分区，标题是多余的 */
.fap-input { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fap-input textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
                      background: var(--bg); color: inherit; resize: vertical; font-size: 13px; font-family: inherit; }
.fap-input-row { display: flex; align-items: center; gap: 8px; }
.fap-input-row select { font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border);
                        background: var(--panel); color: inherit; }
.fap-submit { margin-left: auto; background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 14px;
              font-size: 13px; font-weight: 600; }
.fap-submit:disabled { opacity: .5; cursor: default; }

/* 抽屉：大屏「本月批注」与预警产品页「店铺批注」共用（面板默认住这里） */
.fa-drawer { position: fixed; top: 64px; right: 18px; bottom: 18px; z-index: 55; width: 380px; max-width: calc(100vw - 36px);
             display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border);
             border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); overflow: hidden; }
.fa-drawer[hidden] { display: none; }        /* display:flex 会盖掉 UA 的 [hidden]，这条不能省 */
.fa-drawer-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border);
                 background: var(--table-head-bg); }
.fa-drawer-title { flex: 1; font-size: 13px; font-weight: 600; }
.fa-drawer-host { flex: 1; min-height: 0; display: flex; }
.fa-note-btn { border-color: var(--accent); color: var(--accent); }

/* 预警产品页：按店铺分组的行头 */
.fa-shop-row td { background: var(--table-head-bg); font-weight: 600; font-size: 12.5px; padding: 6px 10px; }
.fa-shop-note { margin-left: 12px; font-size: 11.5px; font-weight: 500; color: var(--accent); border: 1px solid var(--accent);
                border-radius: 999px; padding: 1px 9px; background: none; }
.fa-shop-note:hover { background: var(--accent-soft); }

/* 看板视图（#notes）：顶栏复用 .fa-bar，工具行与卡片区样式在 notes-board.css */
#fn-view { display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
#fn-view.hidden { display: none; }
#fn-view .nb-scroll { max-height: calc(100vh - 190px); }

/* AI 问答 pane（单例）+ 浮层 */
.fai-btn { background: var(--accent); color: #fff; border-radius: 9px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.fai-btn:disabled { opacity: .6; cursor: default; }
.fai-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.fai-ctx { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.6;
           display: flex; flex-direction: column; gap: 2px; }
.fai-ctx-t { font-weight: 600; font-size: 13px; }
.fai-ctx-s { color: var(--muted); }
.fai-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.fai-msgs .empty { color: var(--muted); font-size: 13px; text-align: center; margin-top: 20px; line-height: 1.7; }
.fai-msgs .bubble { max-width: 100%; font-size: 13px; }
.fai-msgs .trace { max-width: 100%; }
.fai-input { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: flex-end; gap: 8px; }
.fai-input textarea { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg);
                      color: inherit; resize: vertical; font-size: 13px; font-family: inherit; }
.fai-send { background: var(--accent); color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.fai-send:disabled { opacity: .5; cursor: default; }
.fai-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 440px; max-width: calc(100vw - 36px);
             height: min(72vh, 640px); display: flex; flex-direction: column; background: var(--panel);
             border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); overflow: hidden; }
.fai-float[hidden] { display: none; }
.fai-float-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border);
                 background: var(--table-head-bg); }
.fai-float-title { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fai-float-host { flex: 1; min-height: 0; display: flex; }

@media (max-width: 900px) {
  .fd-side { max-height: none; min-height: 320px; }
  .fa-drawer, .fai-float { right: 8px; left: 8px; bottom: 8px; width: auto; }
}