/* ==========================================================================
   CreAna 统一外壳（导航 + 页脚 + 底部安全区）
   --------------------------------------------------------------------------
   以前这些样式在 index.html / flow.html / financial.html 里各抄了一份，结果
   三页的手机端尺寸、贴底距离、页脚留白全不一样（26 / 36 / 98·102·106px），
   改一处必忘另外两处。现在只留这一份，四个页面统一 <link> 引用：

       <link rel="stylesheet" href="/static/shell.css?v=1">

   手机端尺寸（三页完全一致，只把文字左右间距收窄）：
       按钮 高 38 · 最小宽 46 · 左右内边距 7 · 字号 15 · 间距 3
       （财报带「资料」时 7 项也能在 390 宽一行放下：7×46+6×3+10 = 350）
   底部位置由 shell.js 实测页脚高度后写入 --shell-foot-h，导航永远坐在页脚
   正上方；内容区留白由 --shell-reserve 动态给出，因此分享页 / 独立页 / 内嵌页
   都不会再被导航压住，iPhone 微信的底部安全区也一并算进去。
   ========================================================================== */

:root{
  --shell-nav-bottom:38px;   /* 页脚 30 + 8；shell.js 会按实测值覆盖 */
  /* 顶栏两颗按钮（历史记录 / 深浅切换）共用同一个高度：
     外壳注入的 .theme-btn 直接取这个值，所以两者永远齐平。
     改一处即可，不用再去四个模板里对 padding。 */
  --tb-h:36px;
}

/* ==========================================================================
   顶栏统一样式（四页同一套）
   --------------------------------------------------------------------------
   原来每页各写一份，尺寸还都不一样（logo 46/42、标题 19、副标题 12）。
   这里统一收一档：logo 46→34、标题 19→15、副标题 12→10.5，上下内边距
   18/16→13/13，整条顶栏 80px → 60px（正好 3/4）。
   shell.css 在每页自己的 <style> 之后加载，所以这几条能直接压住页面自带的值。
   ========================================================================== */
.topbar{padding:13px 20px}
.topbar .logo-img{height:34px;border-radius:7px}
.topbar h1{font-size:15px;letter-spacing:.3px;line-height:1.25}
.topbar p{font-size:10.5px;line-height:1.3}
.topbar .brand-text{gap:1px}
/* 顶栏里其它控件一起收一档，否则「标签 / 历史记录 / 深浅色」会把整条撑回原高
   —— 实测只压 logo 时高度还停在 69px，压到 60 靠的是这三处 */
.topbar .topbar-tabs{padding:3px;border-radius:10px}
.topbar .topbar-tabs a{padding:5px 13px;font-size:12.5px;border-radius:8px}
.topbar .btn-history-top{padding:0 12px;height:var(--tb-h, 36px);font-size:12.5px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}

/* ---------- 深浅色按钮（外壳注入，四个页面顶栏都有） ----------
   尺寸跟着顶栏的「历史记录」按钮走：--tb-h 由各页顶栏定（36px），
   这里高度直接取同一个值，两颗按钮并排才一样高。
   以前是 padding:3 + 22px 的圆钮，总高只有 30px，比旁边的按钮矮一截，
   视觉上像「掉下去了」。 */
.theme-btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:2px;
  margin-left:10px;padding:0 4px;height:var(--tb-h, 36px);border-radius:10px;
  border:1px solid rgba(37,99,235,.16);background:rgba(255,255,255,.6);
  box-sizing:border-box;
}
.theme-btn button{
  width:26px;height:26px;border:0;border-radius:8px;background:none;
  color:#8794ab;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;padding:0;transition:background .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.theme-btn button:hover{color:var(--brand, #2563eb)}
.theme-btn button.on{background:#fff;color:var(--brand-deep, #1d4ed8);
  box-shadow:0 1px 3px rgba(37,99,235,.22)}
.theme-btn svg{width:15px;height:15px;display:block}

/* ==========================================================================
   顶栏窄屏重排（四个页面共用一份，避免各写一套还对不齐）
   --------------------------------------------------------------------------
   宽屏一行：logo | 标题+副标题 | 深浅切换 ……… [ tab | 历史记录 ]
   窄屏两行：① logo | 标题+副标题 | 深浅切换
             ② [ tab | 历史记录 ]  —— 整组居中，tab 按内容宽度不拉伸

   ② 之所以能整组换行，是因为 shell.js 把 tab 与历史记录收进了一个
   .topbar-actions 容器：给容器 flex-basis:100%，它必然独占一行，
   tab 与历史记录就再也不会被拆到两行上去（以前两者是独立的 flex 项，
   760px 附近会出现「tab 在第一行、历史记录孤零零在第二行」）。
   ========================================================================== */
.topbar-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
/* 容器接管对齐：内部两个子项不再自己抢外边距 */
.topbar-actions .topbar-tabs,
.topbar-actions .shell-tabs{margin-left:0;margin-right:0;width:auto;flex:0 0 auto}
.topbar-actions .btn-history-top,
.topbar-actions .btn-history{margin-left:0;margin-right:0;flex:none}

@media (max-width:900px){
  .topbar-inner,.shell-inner{flex-wrap:wrap;row-gap:8px}
  .topbar-inner>.logo-img,.shell-inner>.logo-img{order:1}
  .topbar-inner>.brand-text,.shell-inner>.brand-text{order:2;flex:1 1 auto;min-width:0}
  .topbar-inner>#themeBtn,.shell-inner>#themeBtn{order:3;flex:none;margin-left:8px}
  /* 独占一整行并居中：tab + 历史记录永远在同一行、居中对齐 */
  .topbar-inner>.topbar-actions,.shell-inner>.topbar-actions{
    order:4;flex:1 1 100%;margin-left:0;justify-content:center}
}
/* 340 这类超窄屏：tab 三个中文 + 历史记录四个中文，按常规内边距会超出
   顶栏 14px。整组收一档内边距与字号，保证仍在同一行且不出屏。 */
@media (max-width:400px){
  .topbar-actions .topbar-tabs a,
  .topbar-actions .shell-tabs a{padding:6px 9px;font-size:12.5px}
  .topbar-actions .btn-history-top,
  .topbar-actions .btn-history{padding:0 9px;font-size:12px}
}
/* 标题/副标题永远不许被压成竖排：压到极限就省略号，宁可少几个字 */
.topbar-inner .brand-text h1,
.topbar-inner .brand-text p,
.shell-inner .brand-text h1,
.shell-inner .brand-text p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ==========================================================================
   深色色板（全站一份）
   --------------------------------------------------------------------------
   原来是「黑到发蓝」的 #0d1218 / #151b25，整页像关灯。这里整体提亮、
   去蓝偏灰：底 #232a34、卡 #2c333e，正文不在纯黑上，长时间看不刺眼。
   写在外壳里 = 四个页面共用一份，页面自己的深色规则只负责组件细节。
   ========================================================================== */
html[data-theme="dark"]{
  --ink:#e6ebf3;--muted:#9aa5b7;--line:#3d4653;--bg:#232a34;--card:#2c333e;
  --brand:#6b9bf7;--brand-deep:#a6c3fb;
  --red:#f0777e;--green:#4ecf99;--amber:#e0a556;--gold:#e0b75f;
  --bar-in:#4ecf93;--bar-out:#e8848a;--net-in:#3ddc97;
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .topbar{
  background:linear-gradient(135deg,#2b3340 0%,#323b49 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.26);
}
html[data-theme="dark"] .theme-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .theme-btn button{color:#95a1b6}
html[data-theme="dark"] .theme-btn button.on{background:#3b4655;color:#cfe0ff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
html[data-theme="dark"] .topbar-tabs{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .topbar-tabs a{color:#9fabc0}
html[data-theme="dark"] .topbar-tabs a.active{color:#cfe0ff}
html[data-theme="dark"] .tab-slider{background:#3a4453;box-shadow:0 1px 4px rgba(0,0,0,.35)}
html[data-theme="dark"] .btn-history-top{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#cfe0ff;
}

/* 通用容器：四个页面共用的卡片类名，一次铺完，页面不必各自再写 */
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .upload-card,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .subj-card,
html[data-theme="dark"] .ov-card,
html[data-theme="dark"] .pending-card,
html[data-theme="dark"] .prog-card,
html[data-theme="dark"] .drop-mini,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .hist-box,
html[data-theme="dark"] .ind-card,
html[data-theme="dark"] .exp-card,
html[data-theme="dark"] .adock-pop,
html[data-theme="dark"] .pwd-box{background:var(--card);border-color:var(--line);color:var(--ink)}

/* 历史记录弹窗内部：圆叉、条目 hover、底栏、模块徽标在三个内页里都是写死的浅色。
   深色规则统一放这里一份，征信 / 流水 / 财报 / /app 四端同时生效 ——
   以前只在 app.html 里补过，另三页深色下圆叉是浅灰块、hover 是浅蓝条。 */
html[data-theme="dark"] .hist-foot{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .hist-head .modal-x{background:#333c49;color:#a9b4c6}
html[data-theme="dark"] .hist-head .modal-x:hover{background:#3d4757;color:#e6ebf3}
html[data-theme="dark"] .hist-item:hover{background:rgba(255,255,255,.055)}
html[data-theme="dark"] .hist-item .badge{background:rgba(107,155,247,.18);color:#a6c3fb}
html[data-theme="dark"] .hist-item .badge.flow{background:rgba(78,207,153,.16);color:#6ee7b7}
html[data-theme="dark"] .hist-item .go{color:#5d6779}
html[data-theme="dark"] .hist-item:hover .go{color:#8fa4c4}

/* 表单件与次级按钮 */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:#262d37;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#7d8798}
html[data-theme="dark"] .btn{background:#333c49;border-color:var(--line);color:var(--ink)}
/* 主按钮（不带 ghost / danger 的 .btn）在深色下必须还是品牌蓝：
   上面那条通用规则把它一并压成灰底，主要动作和次要动作长得一模一样。
   蓝底用比 --brand（深色下是浅蓝 #6b9bf7）更深一档的 #3a6fd8，
   配白字对比度约 5:1；浅蓝底 + 白字只有 2.2:1，等于看不清。 */
html[data-theme="dark"] .btn:not(.ghost):not(.danger){
  background:#3a6fd8;border-color:#3a6fd8;color:#fff}
html[data-theme="dark"] .btn:not(.ghost):not(.danger):hover{
  background:#2f62c4;border-color:#2f62c4;color:#fff}

/* 表头 / 斑马纹 / 分隔线 */
html[data-theme="dark"] th{background:#333b47 !important;color:#c3cddd;border-color:var(--line)}
html[data-theme="dark"] td{border-color:#39424f}
html[data-theme="dark"] tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
html[data-theme="dark"] .mt th,
html[data-theme="dark"] .mt td{background-image:none}

/* 页脚与分隔线跟随色板 */
html[data-theme="dark"] .site-foot.fixed{background:var(--bg)}

/* 正文里写死的深色文字：这些类名在页面 CSS 里是 #16213a / #5b6678 / #4a5468
   这类「白底专用」的深灰，深色下几乎看不见，统一改跟随色板 */
html[data-theme="dark"] .s-name,
html[data-theme="dark"] .s-title,
html[data-theme="dark"] .card-title{color:var(--ink)}
html[data-theme="dark"] .s-bank,
html[data-theme="dark"] .s-sub{color:#a9b4c6}
html[data-theme="dark"] .cval{color:#b9c4d6}

/* 手机：顶栏再收一档（logo 30 + 内边距 20 = 50px） */
@media (max-width:640px){
  :root{--tb-h:32px}
  .topbar{padding:9px 14px}
  .topbar .logo-img{height:30px;border-radius:6px}
  .topbar h1{font-size:14px}
  .topbar p{font-size:10px}
  /* 手机上一行要塞 标题 + 主题开关，按钮比桌面收一档，
     但仍与历史记录按钮同高（--tb-h 在页面里同步降到 32） */
  .theme-btn{margin-left:8px;padding:0 3px}
  .theme-btn button{width:24px;height:24px}
  .theme-btn svg{width:14px;height:14px}
}

/* ---------- 页脚 ---------- */
.site-foot{
  text-align:center;font-size:12px;color:#9aa3b2;line-height:1.35;
  padding:8px 0 6px;flex:none;
}
.site-foot.fixed{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:8px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background:var(--bg, #f2f5fa);
  pointer-events:none;
}
/* 内嵌在 /app 外壳里时用外壳自己的页脚，页面内不再重复一条 */
html.in-iframe .site-foot{display:none}

/* ---------- 电梯导航 ---------- */
.lift-nav{
  position:fixed;right:44px;top:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:2px;
  padding:6px;border-radius:12px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid #e3eaf6;box-shadow:0 4px 18px rgba(28,35,51,.10);
  opacity:.6;
  transition:opacity .2s ease, top .2s ease, left .2s ease,
             bottom .2s ease, transform .2s ease;
}
.lift-nav.show{display:flex}
.lift-nav:hover{opacity:1}
.lift-nav button{
  border:none;background:none;font:inherit;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;
  color:#5b6678;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s;
}
/* hover 只在真能 hover 的设备上生效：手机点完一次 :hover 会一直「粘」在
   那个按钮上，滑到别的板块时看着就像点过的 tab 留了一块底色。 */
@media (hover:hover){
  .lift-nav button:hover{background:#f1f5fd;color:var(--brand-deep, #1d4ed8)}
}
.lift-nav button:focus{outline:none}
.lift-nav button:focus-visible{outline:2px solid var(--brand, #2563eb);outline-offset:2px}
.lift-nav button.on{
  background:var(--brand, #2563eb);color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,.28);
}
/* 深色模式：三页共用这一份外壳，所以深色也写在这里。
   不加的话晚上看流水时右侧会挂一条纯白竖条，比正文还亮 */
html[data-theme="dark"] .lift-nav{
  background:rgba(24,32,44,.94);border-color:#33405a;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
html[data-theme="dark"] .lift-nav button{color:#9fadc4}
/* 深色下选中态用更深的蓝：浅品牌蓝 #6b9bf7 上压白字只有 2.7:1 */
html[data-theme="dark"] .lift-nav button.on{background:#4d7fd6;color:#fff}
html[data-theme="dark"] .site-foot{color:#6b7789}

/* ---------- 底部横排（手机 / 窄窗口，三页同一尺寸） ----------
   1290px 是「竖排导航还放得下」的下界：正文 .wrap 最大 1080，两侧各留
   44px 边距 + 约 52px 导航宽 + 8px 气口 → 屏幕窄于 1290 时，竖排导航会压住
   卡片右侧的按钮（分享 / 导出表格），这时改到底部横排。 */
@media (max-width:1289px){
  .lift-nav{
    right:auto;left:50%;top:auto;transform:translateX(-50%);
    /* 页脚上方 8px；--shell-foot-h 由 shell.js 实测（含 iPhone 安全区） */
    bottom:calc(var(--shell-foot-h, 30px) + 8px);
    flex-direction:row;align-items:center;padding:5px;gap:3px;
    border-radius:999px;background:#fff;opacity:1;
    box-shadow:0 6px 20px rgba(28,35,51,.18);
    /* 横排导航是纯白不透明的，毛玻璃在这里一点视觉收益都没有，
       却让 iOS 必须每帧对「下面滚动的内容」重新做一次模糊 —— 滑到底部
       回弹时这一条最容易看出滞后/抖动。窄屏直接关掉。 */
    -webkit-backdrop-filter:none;backdrop-filter:none;
    max-width:calc(100vw - 12px);
    /* 万一按钮多到放不下（财报有「资料」时 7 个），整条自己横滑，不再缩字 */
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lift-nav::-webkit-scrollbar{display:none}
  .lift-nav button{
    /* 46 → 40：财报页第二十轮多了「收入」板块，加上「资料」一共 8 颗，
       390px 宽下 8×46 再加间距已经压到屏幕外（实测最右到 401px）。
       40px 仍放得下两个 15px 的字（30px + 左右各 5px）。 */
    flex:none;width:auto;min-width:40px;height:38px;
    padding:0 5px;border-radius:999px;
    font-size:15px;letter-spacing:.2px;
  }
}
/* 财报页第十四轮把导航加到 9 颗（概览 / 趋势 / 收入 / 现金 / 偿债 / 结构 / 指标 /
   风险 / 明细）：手机上一排 9×40 会出屏。**只有长导航**（>8 颗，shell.js 打的
   .many）才把珠子做窄一格；征信 / 流水 5~6 颗时维持 40×38、15px 不变。 */
@media (max-width:430px){
  .lift-nav.many{gap:2px;padding:5px 4px}
  .lift-nav.many button{min-width:34px;padding:0 3px;font-size:14px;height:36px}
}

/* ---------- 底部留白：导航 + 页脚 + 安全区（JS 实测后写入） ---------- */
body.shell-on{
  padding-bottom:calc(var(--shell-reserve, 96px) +
                      env(safe-area-inset-bottom, 0px)) !important;
}

/* ---------- 悬浮层统一提升为独立合成层 ----------
   iPhone 滚到底部回弹时，position:fixed 的「电梯导航 / 回到顶部 / 右下角
   主体（账户、期数）胶囊」如果和正文挤在同一个合成层，会跟着正文的重新
   栅格化一起抖，三层各自慢半拍——看着就像「不在一个图层、互相错位」。
   backface-visibility:hidden 是最便宜的提层手段：不写 transform，
   所以不会打乱这几个元素自己算好的定位（导航的 translateY/translateX 还在）。
   三个胶囊在各自模板里各提一次（.sdock / .adock / .pdock）。 */
.lift-nav,.back-top-btn{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* ==========================================================================
   统一弹窗（三套老样式的公共骨架）
   --------------------------------------------------------------------------
   项目里有三套弹窗各写了一套尺寸：
       .ind-*    指标说明 / 统计逻辑（征信、流水、财报）
       .hist-*   历史记录、服务器端全部记录（外壳、征信、流水、财报）
       .modal-*  流水明细弹窗
   手机端点开任何一个都会被屏幕占满。根子在高度写的是
       max-height: calc(100vh - 32px)   /   82vh   /   78vh
   而手机浏览器的 100vh 是「大视口」——浏览器工具栏收起时的高度，真正能看见的
   只有它的一部分；再叠加原来的 max-height 只减 32px，卡片就顶到屏幕上沿、
   下沿被切掉（✕ 还在，但正文永远滚不到底，底下也没有圆角，看着像整页）。

   现在三套共用下面这套骨架，只保留各自的宽度/配色/排版：
     · 高度跟内容走（height:auto），短弹窗就是短的，不再强行撑到视口高度；
     · 只有超长才封顶，封顶值用 dvh（动态可视高度，工具栏收放时跟着变），
       老浏览器退回 82vh 并额外留出边距，两种都与屏幕边保持空隙；
     · 标题行常驻弹窗顶部：.ind-card 用 sticky（整卡滚动），.hist-box /
       .modal 本来就是固定头 + 内部滚动，这里只把它们的高度口径统一；
     · 遮罩四边留白用 --mb-gap，手机端收到 14px，卡片圆角同步收小。
   ========================================================================== */
:root{
  --mb-gap:20px;                       /* 弹窗与屏幕四边的距离 */
  --mb-max:min(82vh, 820px);           /* 弹窗最大高度（兜底口径） */
}
/* 支持 dvh 的浏览器改用动态可视高度：地址栏/工具栏收放时 max-height 跟着变，
   不会出现「100vh 比看见的还高」这种卡片被切掉的情况。 */
@supports (height:1dvh){
  :root{--mb-max:min(82dvh, 820px)}
}

/* 遮罩：居中 + 四边留白 + 顶部/底部安全区（iPhone 刘海与横条） */
.ind-mask,.hist-mask,.modal-mask,.pwd-mask{
  padding:var(--mb-gap);
  padding-top:max(var(--mb-gap), env(safe-area-inset-top, 0px));
  padding-bottom:max(var(--mb-gap), env(safe-area-inset-bottom, 0px));
  align-items:center;justify-content:center;
  overscroll-behavior:contain;
}

/* 卡片：高度自适应，超长才封顶 */
.ind-card,.hist-box,.modal,.pwd-box{
  max-height:var(--mb-max);
  height:auto;
}
/* 历史记录/明细：本来就是 flex 列 + 固定头，只需去掉写死的 min-height，
   否则只查到两条记录时也被撑成 280px 高，看着像空了一大块。 */
.hist-box{min-height:0}
.hist-list,.modal-scroll{flex:1 1 auto;min-height:0;overscroll-behavior:contain}

/* 指标说明/统计逻辑：整卡滚动，标题行吸顶，✕ 永远在手边 */
.ind-card{
  /* 顶部内边距交给 .ind-head 自己给，否则吸顶时上面会漏出 18px 的内容 */
  padding:0 var(--ip, 20px) 16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.ind-head{
  position:sticky;top:0;z-index:3;background:#fff;
  display:flex;align-items:flex-start;gap:10px;
  /* 负边距让白色底铺满卡片左右内边距，正文从它下面穿过去 */
  margin:0 calc(var(--ip, 20px) * -1);
  padding:18px var(--ip, 20px) 10px;
  border-radius:16px 16px 0 0;
}
/* 明细弹窗的头本来就在 flex 列里固定，补个底色防止正文从缝隙透出来 */
.modal-head{background:var(--card, #fff)}

/* 加密 PDF 的密码框：内容本来不长，但文件名字段会换行堆高，一并封顶 */
.pwd-box{overflow:auto;-webkit-overflow-scrolling:touch}

@media (max-width:640px){
  :root{--mb-gap:14px}
  /* 手机上卡片圆角收小一号，与遮罩留白更协调 */
  .ind-card,.hist-box,.modal,.pwd-box{border-radius:14px}
  .ind-head{border-radius:14px 14px 0 0;padding-top:16px}
  /* 侧边内边距 20 → 15，正文更多一点宽度 */
  .ind-card{--ip:15px;padding-bottom:14px}
}