/* =========================================================
   价值罗盘 ValueCompass — 设计系统
   浅色主题 / 移动优先 / 中国市场配色（红涨绿跌）
   ========================================================= */

:root{
  /* 基础色 —— 纯白底 + 浅灰层次 + 稳重金（明亮悦目） */
  --ink:        #16233a;
  --ink-2:      #2c3e5c;
  --ink-3:      #5b6b84;
  --ink-4:      #8b98ad;
  --line:       #e8eaef;
  --line-2:     #f2f4f7;
  --paper:      #ffffff;
  --paper-2:    #f6f7f9;
  --card:       #ffffff;
  --gold:       #a8853f;
  --gold-soft:  #f7f0e2;
  --navy-soft:  #eef2f8;
  --blue:       #6ea6e1;   /* 浅蓝色（侧边栏文字强调色，较 #4a90d9 变浅 20%） */

  /* 涨跌（中国习惯：红涨绿跌） */
  --up:         #cc2f2f;
  --up-soft:    #fdf0f0;
  --down:       #12915c;
  --down-soft:  #eaf7f1;
  --warn:       #c8811b;
  --warn-soft:  #fdf4e3;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(22,35,58,.04), 0 8px 24px rgba(22,35,58,.06);
  --shadow-lg:  0 10px 44px rgba(22,35,58,.12);

  --tab-h:      58px;
  --top-h:      54px;
  --maxw:       none;       /* 页面内容宽度：与浏览器同宽 */
  --app-w:      100%;        /* 整体外壳最大宽度（全宽） */

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.62;
  overscroll-behavior-y:none;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; padding:0; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 .7em; }
p:last-child{ margin-bottom:0; }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:#d5d1c8; border-radius:3px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ============ 布局骨架 ============ */
#app-shell{
  max-width:var(--app-w);
  margin:0 auto;
  width:100%;
  height:100vh; height:100dvh;
  background:var(--paper);
  position:relative;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--line-2);
}

#topbar{
  position:relative; z-index:60;
  flex:0 0 auto;
  height:calc(var(--top-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:#cc2f2f;
  border-bottom:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:12px; padding-right:12px;
}
.tb-menu{
  display:none; width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  align-items:center; justify-content:center; color:#fff;
}
.tb-menu:active{ background:rgba(255,255,255,.2); }
.tb-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.tb-back{
  width:30px; height:30px; border-radius:9px; display:none;
  align-items:center; justify-content:center; color:#fff;
  flex:0 0 auto;
}
.tb-back:active{ background:rgba(255,255,255,.2); }
body.has-back .tb-back{ display:flex; }
.tb-brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.tb-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.tb-rsb{
  display:none; width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  align-items:center; justify-content:center; color:#fff;
}
.tb-rsb:active{ background:rgba(255,255,255,.2); }
.tb-logo{ display:flex; flex:0 0 auto; }
body.has-back .tb-logo{ display:none; }
.tb-title{ min-width:0; }
.tb-title strong{
  display:block; font-size:15.5px; line-height:1.2; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#fff;
}
.tb-title small{
  display:block; font-size:10.5px; color:rgba(255,255,255,.8); line-height:1.35;
  letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.level-chip{
  display:flex; align-items:center; gap:3px; flex:0 0 auto;
  padding:5px 9px 5px 11px; border-radius:99px;
  background:var(--navy-soft); color:var(--ink-2);
  font-size:12px; font-weight:600; letter-spacing:.03em;
  border:1px solid #d9e2f0;
}
.level-chip:active{ transform:scale(.96); }

#view{
  flex:1; width:100%;
  overflow-y:auto; overflow-x:hidden;
  outline:none;
  animation:viewIn .28s cubic-bezier(.22,.9,.3,1);
}
.view-wrap{ max-width:var(--maxw); margin:0 auto; padding:14px 14px 30px; width:100%; box-sizing:border-box; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }

#tabbar{
  position:relative; z-index:60;
  flex:0 0 auto;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink-4); font-size:10.5px; letter-spacing:.04em; transition:color .16s;
}
.tab svg{ width:22px; height:22px; }
.tab.on{ color:var(--ink); font-weight:600; }
.tab.on svg{ color:var(--gold); }

/* ============ 主区容器 ============ */
#main{
  flex:1; min-width:0; height:100%;
  display:flex; flex-direction:column;
  background:var(--paper);
  overflow:hidden;
}

/* ============ 左侧自选股侧边栏 ============ */
#sidebar{
  flex:0 0 198px; width:198px;
  background:var(--paper-2);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.sb-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  padding:16px 14px 10px;
}
.sb-title{
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase;
}
.sb-search{
  margin-left:auto;
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:15px; line-height:1;
  border:1px solid var(--line); background:var(--card);
}
.sb-search:hover{ background:var(--line-2); }
.sb-search:active{ transform:scale(.96); }
.sb-close{
  display:none; width:30px; height:30px; border-radius:9px;
  align-items:center; justify-content:center; color:var(--ink-3);
}
.sb-close:active{ background:var(--line-2); }
.sb-scroll{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding-bottom:8px;
}
.sb-list{
  padding:2px 8px 4px;
}
.sb-item{
  display:block; width:100%; text-align:left;
  padding:9px 10px; border-radius:11px; margin-bottom:2px;
  border:1px solid transparent;
}
.sb-item:hover{ background:var(--line-2); }
.sb-item.on{ background:var(--navy-soft); border-color:#d9e2f0; }
.sb-row1{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sb-nm{ font-size:13px; font-weight:600; color:var(--blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-px{ font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap; }
.sb-row2{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:2px; }
.sb-cd{ font-size:11px; color:var(--ink-4); font-family:var(--mono); white-space:nowrap; }
.sb-chg{ font-size:11px; font-family:var(--mono); white-space:nowrap; }
.sb-px.up, .sb-chg.up{ color:var(--up); }
.sb-px.down, .sb-chg.down{ color:var(--down); }
.sb-empty{ padding:24px 16px; text-align:center; color:var(--ink-4); font-size:13px; line-height:1.7; }
.sb-empty a{ color:var(--gold); }
/* 常用网站模块（自选股列表下方） */
.sb-sites{
  margin:2px 8px 0; padding-top:8px; border-top:1px dashed var(--line);
}
.sb-sites-head{
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase;
  padding:4px 4px 8px;
}
.sb-sites-list{ display:flex; flex-direction:column; gap:1px; }
.sb-site{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px; text-decoration:none;
  color:var(--ink-2); font-size:13px; font-weight:500;
  border:1px solid transparent;
}
.sb-site:hover{ background:var(--line-2); border-color:var(--line); }
.sb-site:active{ transform:scale(.98); }
.sb-site-badge{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
  background:#cc2f2f;
}
.sb-site-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-site-arr{ flex:0 0 auto; color:var(--ink-4); font-size:12px; }
/* 常用网站：可编辑（添加 / 编辑 / 删除） */
.sb-sites-head{ display:flex; align-items:center; }
.sb-sites-head .sb-site-add{ margin-left:auto; width:24px;height:24px;border:0;border-radius:7px;background:var(--line-2);color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer; }
.sb-sites-head .sb-site-add:hover{ background:var(--gold-soft,#f0e2c0); color:var(--gold,#b8860b); }
.sb-sites-empty{ font-size:12px;color:var(--ink-3);padding:6px 4px;line-height:1.6; }
.sb-site-row{ display:flex; align-items:center; gap:4px; }
.sb-site-row .sb-site{ flex:1; min-width:0; }
.sb-site-ops{ display:flex; gap:3px; flex:0 0 auto; opacity:0; transition:opacity .15s; }
.sb-site-row:hover .sb-site-ops{ opacity:1; }
.sb-site-op{ font-size:11px;color:var(--ink-3);cursor:pointer;padding:2px 6px;border-radius:6px;background:var(--line-2);user-select:none;white-space:nowrap; }
.sb-site-op:hover{ color:var(--gold,#b8860b); }
.sb-site-editor{ margin:8px 4px 2px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);display:flex;flex-direction:column;gap:6px; }
.sb-site-editor[hidden]{ display:none; }
.sb-site-editor input{ width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;box-sizing:border-box;outline:none; }
.sb-site-editor input:focus{ border-color:var(--gold,#b8860b); }
.sb-site-editor .sb-se-btns{ display:flex; gap:6px; }
.sb-site-editor .sb-se-btns button{ flex:1; }

/* 抽屉遮罩（仅窄屏抽屉态使用） */
.sb-mask{ display:none; }
.rsb-mask{ display:none; }

/* ============ 公告流条目（右侧面板复用） ============ */
.fi{
  display:block; padding:10px 10px; border-radius:11px; margin-bottom:6px;
  background:var(--card); border:1px solid var(--line); text-decoration:none; color:inherit;
}
.fi:active{ background:var(--line-2); }
.fi-title{ font-size:13px; line-height:1.5; color:var(--blue); }
.fi-name{ font-weight:700; }   /* 公司名：加粗（浅蓝色） */
.fi-ttl{ font-weight:400; }    /* 公告标题不加粗（浅蓝色） */
.fi-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:5px; }
.fi-code{ font-family:var(--mono); font-size:10.5px; color:var(--blue); }
.fi-tag{ font-size:10.5px; font-weight:600; padding:1.5px 7px; border-radius:99px; }
.fi-date{ font-size:10.5px; color:var(--ink-4); font-family:var(--mono); margin-left:auto; }  /* 公告日期：非浅蓝、不加粗 */
.fi-notice .fi-tag{ background:var(--navy-soft); color:var(--ink-2); }

/* ============ 右侧公告菜单（仅首页显示） ============ */
#rsb{
  display:none;
  flex:0 0 56px; width:56px;
  background:var(--paper-2);
  border-left:1px solid var(--line);
  flex-direction:column; align-items:center;
  padding:14px 0; gap:8px; overflow:hidden;
}
body.rsb-on #rsb{ display:flex; }

/* 展开为公告流面板 */
body.rsb-on #rsb.feed{ flex:0 0 298px; width:298px; align-items:stretch; padding:0; gap:0; }
#rsb.feed .rsb-btn{ display:none; }

.rsb-btn{
  width:46px; height:46px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink-3); background:transparent; border:1px solid transparent;
  font-size:11px; font-weight:600; transition:.15s;
}
.rsb-btn svg{ width:20px; height:20px; }
.rsb-btn:active{ background:var(--line-2); }
.rsb-btn.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.rsb-btn.on svg{ color:#fff; }

/* 右侧公告流面板 */
.rsb-feed{ display:none; flex-direction:column; flex:1; min-height:0; background:var(--paper-2); }
#rsb.feed .rsb-feed{ display:flex; }
.rsb-feed-head{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:16px 12px 10px; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.rsb-feed-back{
  width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); background:var(--card); border:1px solid var(--line); flex:0 0 auto;
}
.rsb-feed-back:active{ background:var(--line-2); }
.rsb-feed-title{ font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.02em; }
.rsb-feed-sub{ margin-left:auto; font-size:11px; color:var(--ink-4); }
.rsb-feed-scroll{ flex:1; min-height:0; overflow-y:auto; padding:6px 8px 12px; }
.rsb-feed-scroll::-webkit-scrollbar{ width:5px; }
.rsb-feed-scroll::-webkit-scrollbar-thumb{ background:#d5d1c8; border-radius:3px; }

@media (max-width: 980px){
  #sidebar{
    position:absolute; top:0; bottom:0; left:0; z-index:80;
    width:198px; max-width:82vw;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.22,.9,.3,1);
    box-shadow:var(--shadow-lg);
  }
  body.sb-open #sidebar{ transform:none; }
  body.sb-open .sb-mask{
    display:block; position:absolute; inset:0; z-index:79;
    background:rgba(16,23,40,.36);
  }
  .sb-close{ display:flex; }
  /* 窄屏显示菜单按钮（宽屏侧边栏常驻，无需按钮） */
  .tb-menu{ display:flex; }
  /* 窄屏：右侧公告面板改为抽屉（默认隐藏，点右上按钮滑入） */
  body.rsb-on #rsb.feed{
    position:absolute; top:0; bottom:0; right:0; z-index:82;
    width:298px; max-width:86vw; box-shadow:var(--shadow-lg);
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.22,.9,.3,1);
  }
  body.rsb-open #rsb.feed{ transform:none; }
  body.rsb-open .rsb-mask{
    display:block; position:absolute; inset:0; z-index:81;
    background:rgba(16,23,40,.36);
  }
  /* 窄屏显示公告菜单按钮 */
  body.rsb-on .tb-rsb{ display:flex; }
}


/* ============ 通用组件 ============ */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px;
  box-shadow:var(--shadow); margin-bottom:12px;
}
.card.flat{ box-shadow:none; }
.card.tight{ padding:12px; }

.sec-title{
  display:flex; align-items:baseline; gap:8px;
  margin:20px 2px 10px;
}
.sec-title h2{ font-size:16.5px; letter-spacing:.01em; }
.sec-title span{ font-size:11.5px; color:var(--ink-4); letter-spacing:.05em; }
.sec-title .more{ margin-left:auto; font-size:12px; color:var(--gold); font-weight:600; }

.eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  color:var(--gold); text-transform:uppercase; margin-bottom:6px;
}
.eyebrow.head-lg{ font-size:21px; letter-spacing:.04em; }
.muted{ color:var(--ink-3); }
.tiny{ font-size:11.5px; line-height:1.55; color:var(--ink-4); }
.small{ font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.up{ color:var(--up); } .down{ color:var(--down); }
.b{ font-weight:700; }
.center{ text-align:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600;
  background:var(--ink); color:#fff; transition:transform .12s, opacity .12s;
}
.btn:active{ transform:scale(.975); opacity:.9; }
.btn.ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn.gold{ background:var(--gold); color:#fff; }
.btn.sm{ padding:7px 12px; font-size:12.5px; border-radius:8px; }
.btn.block{ display:flex; width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.pill{
  display:inline-block; padding:2.5px 8px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  background:var(--line-2); color:var(--ink-3);
}
.pill.gold{ background:var(--gold-soft); color:#8a6d2f; }
.pill.up{ background:var(--up-soft); color:var(--up); }
.pill.down{ background:var(--down-soft); color:var(--down); }
.pill.warn{ background:var(--warn-soft); color:var(--warn); }
.pill.navy{ background:var(--navy-soft); color:var(--ink-2); }

.divider{ height:1px; background:var(--line); margin:13px -15px; }
.divider.inset{ margin-left:0; margin-right:0; }

/* 数据行 */
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 0; }
.kv + .kv{ border-top:1px dashed var(--line-2); }
.kv dt{ font-size:13px; color:var(--ink-3); flex:0 0 auto; }
.kv dd{ margin:0; font-size:14px; font-weight:650; font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }

/* 指标格 */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border-radius:var(--radius-sm); overflow:hidden; }
.metrics .m{ background:var(--card); padding:11px 8px; text-align:center; }
.metrics .m b{ display:block; font-size:17px; font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.metrics .m span{ display:block; font-size:10.5px; color:var(--ink-4); margin-top:2px; letter-spacing:.03em; }
.metrics.c2{ grid-template-columns:repeat(2,1fr); }
.metrics.c4{ grid-template-columns:repeat(4,1fr); }
/* #4：核心指标模块高度减半（紧凑版） */
.metrics.m-compact .m{ padding:3px 5px; }
.metrics.m-compact .m b{ font-size:12px; }
.metrics.m-compact .m span{ font-size:8px; margin-top:0; }
/* #4：核心指标模块字体扩大约 2 倍（相对紧凑版） */
.metrics.m-big2 .m{ padding:9px 7px; }
.metrics.m-big2 .m b{ font-size:22px; }
.metrics.m-big2 .m span{ font-size:14px; margin-top:2px; }
/* 核心指标模块字体扩大 1.5 倍（相对紧凑版） */
.metrics.m-big15 .m{ padding:6px 6px; }
.metrics.m-big15 .m b{ font-size:18px; }
.metrics.m-big15 .m span{ font-size:12px; margin-top:1px; }
/* 核心指标模块字体扩大 2 倍（相对紧凑版，即 m-big15 的 2 倍） */
.metrics.m-big3 .m{ padding:8px 6px; }
.metrics.m-big3 .m b{ font-size:34px; }
.metrics.m-big3 .m span{ font-size:22px; margin-top:2px; }

/* 表单 */
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12.5px; color:var(--ink-3); margin-bottom:5px; font-weight:600; }
.field label em{ font-style:normal; color:var(--ink-4); font-weight:400; }
.input, select.input, textarea.input{
  width:100%; padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:var(--paper-2);
  font-family:var(--mono); font-size:14px; outline:none; transition:border-color .15s, background .15s;
}
textarea.input{ font-family:var(--font); line-height:1.6; resize:vertical; min-height:78px; }
select.input{ font-family:var(--font); appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%235b6b84' stroke-width='2.2' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 9px center; background-size:15px; padding-right:30px; }
.input:focus{ border-color:var(--gold); background:#fff; }

/* 滑块 */
.slider-row{ margin-bottom:14px; }
.slider-row .sl-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:3px; }
.slider-row .sl-top label{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
.slider-row .sl-top b{ font-family:var(--mono); font-size:14px; color:var(--ink); }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:linear-gradient(90deg,var(--gold) var(--pct,50%), #e0ddd5 var(--pct,50%)); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:#fff; border:2px solid var(--gold); margin-top:-7.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
}
input[type=range]::-moz-range-track{ height:4px; border-radius:2px; background:#e0ddd5; }
input[type=range]::-moz-range-progress{ height:4px; border-radius:2px; background:var(--gold); }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--gold); }

/* 列表项 */
.row{
  display:flex; align-items:center; gap:11px; padding:12px 0;
  border-bottom:1px solid var(--line-2);
}
.row:last-child{ border-bottom:none; }
.row .rw-ico{
  width:36px; height:36px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-soft); color:var(--ink-2);
}
.row .rw-ico svg{ width:19px; height:19px; }
.row .rw-body{ flex:1; min-width:0; }
.row .rw-body b{ display:block; font-size:14px; font-weight:650; }
.row .rw-body span{ display:block; font-size:11.5px; color:var(--ink-4); line-height:1.45; margin-top:1px; }
.row .rw-arrow{ color:var(--ink-4); flex:0 0 auto; }

/* 引文 */
blockquote.quote{
  margin:0; padding:12px 14px; border-left:3px solid var(--gold);
  background:var(--gold-soft); border-radius:0 10px 10px 0;
  font-size:14px; line-height:1.68; color:#5c4a20;
}
blockquote.quote cite{ display:block; margin-top:6px; font-style:normal; font-size:11.5px; color:#8a7443; letter-spacing:.03em; }

/* 提示条 */
.note{
  display:flex; gap:8px; padding:10px 12px; border-radius:10px;
  font-size:12.5px; line-height:1.6; background:var(--navy-soft); color:var(--ink-2);
}
.note.warn{ background:var(--warn-soft); color:#7d5310; }
.note.danger{ background:var(--up-soft); color:#8e2020; }
.note.ok{ background:var(--down-soft); color:#0b6340; }
.note b{ font-weight:700; }
.note .ni{ flex:0 0 auto; font-size:14px; line-height:1.45; }

/* 折叠 */
.acc{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:9px; background:var(--card); }
.acc-h{ display:flex; align-items:center; gap:9px; padding:12px 13px; width:100%; text-align:left; }
.acc-h b{ flex:1; font-size:14px; font-weight:650; }
.acc-h .chev{ transition:transform .22s; color:var(--ink-4); flex:0 0 auto; }
.acc.open .acc-h .chev{ transform:rotate(180deg); }
.acc-c{ display:none; padding:0 13px 14px; font-size:13.5px; line-height:1.72; color:var(--ink-2); }
.acc.open .acc-c{ display:block; animation:viewIn .22s ease; }
.acc-n{ width:22px; height:22px; border-radius:6px; background:var(--ink); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-family:var(--mono); }

/* 网格入口 */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.entry{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 13px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:block; transition:transform .14s;
}
.entry:active{ transform:scale(.985); }
.entry .en-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:9px; }
.entry .en-ico svg{ width:19px; height:19px; }
.entry b{ display:block; font-size:14.5px; }
.entry span{ display:block; font-size:11.5px; color:var(--ink-4); line-height:1.5; margin-top:3px; }

/* 选择题 */
.opt{
  display:flex; align-items:flex-start; gap:9px; padding:11px 12px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
  background:var(--card); font-size:13.5px; line-height:1.55; text-align:left; width:100%;
  transition:border-color .14s, background .14s;
}
.opt .ok-box{
  width:19px; height:19px; border-radius:6px; border:1.6px solid var(--line);
  flex:0 0 auto; margin-top:1px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:transparent; background:var(--paper-2);
}
.opt.sel{ border-color:var(--gold); background:var(--gold-soft); }
.opt.sel .ok-box{ background:var(--gold); border-color:var(--gold); color:#fff; }
.opt.right{ border-color:var(--down); background:var(--down-soft); }
.opt.right .ok-box{ background:var(--down); border-color:var(--down); color:#fff; }
.opt.wrong{ border-color:var(--up); background:var(--up-soft); }
.opt.wrong .ok-box{ background:var(--up); border-color:var(--up); color:#fff; }

/* 进度条 */
.bar{ height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:3px; background:var(--gold); transition:width .5s cubic-bezier(.2,.8,.3,1); }
.bar.thin{ height:4px; }

/* 标签切换 */
.segs{ display:flex; gap:4px; padding:3px; background:var(--line-2); border-radius:10px; margin-bottom:13px; }
.segs button{ flex:1; padding:7px 4px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-3); transition:.16s; white-space:nowrap; }
.segs button.on{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.07); }

.chips{ display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; margin-bottom:12px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips button{
  padding:6px 13px; border-radius:99px; font-size:12.5px; font-weight:600; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); color:var(--ink-3);
}
.chips button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chips a{
  padding:6px 13px; border-radius:99px; font-size:12.5px; font-weight:600; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); color:var(--ink-3); text-decoration:none; display:inline-block;
}
.chips a.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* 表格 */
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl th, .tbl td{ padding:8px 6px; text-align:right; border-bottom:1px solid var(--line-2); }
.tbl th{ font-size:11px; color:var(--ink-4); font-weight:600; letter-spacing:.03em; }
.tbl th:first-child, .tbl td:first-child{ text-align:left; }
.tbl td{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tbl td:first-child{ font-family:var(--font); color:var(--ink-2); }
.tbl tr:last-child td{ border-bottom:none; }
.scroll-x{ overflow-x:auto; margin:0 -15px; padding:0 15px; }

/* 弹层 */
.sheet{ position:fixed; inset:0; z-index:200; }
.sheet-mask{ position:absolute; inset:0; background:rgba(16,24,38,.42); animation:fadeIn .2s; }
@keyframes fadeIn{ from{opacity:0}to{opacity:1} }
.sheet-body{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; max-width:var(--maxw); background:var(--paper);
  border-radius:18px 18px 0 0; max-height:86vh; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); animation:sheetUp .3s cubic-bezier(.2,.9,.3,1);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes sheetUp{ from{ transform:translate(-50%,100%);} to{ transform:translate(-50%,0);} }
.sheet-head{ display:flex; align-items:center; padding:15px 16px 11px; border-bottom:1px solid var(--line); }
.sheet-head h3{ flex:1; font-size:16px; }
.sheet-x{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ink-3); background:var(--line-2); }
.sheet-content{ overflow-y:auto; padding:15px 16px 22px; -webkit-overflow-scrolling:touch; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + 26px); transform:translateX(-50%);
  background:rgba(22,35,58,.94); color:#fff; padding:9px 17px; border-radius:99px;
  font-size:13px; z-index:300; animation:viewIn .2s; box-shadow:var(--shadow-lg); max-width:82%;
}

/* 空态 */
.empty{ text-align:center; padding:34px 16px; color:var(--ink-4); }
.empty svg{ width:46px; height:46px; opacity:.35; margin-bottom:9px; }
.empty p{ font-size:13px; }

/* Hero */
.hero{
  border-radius:16px; padding:19px 17px; margin-bottom:14px; position:relative; overflow:hidden;
  background:linear-gradient(140deg,#1b2b47 0%,#24395c 52%,#31496f 100%);
  color:#fff; box-shadow:0 8px 26px rgba(22,35,58,.24);
}
.hero::after{
  content:""; position:absolute; right:-46px; top:-52px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,164,92,.32),transparent 66%);
}
.hero::before{
  content:""; position:absolute; right:14px; bottom:-30px; width:120px; height:120px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
}
.hero h1{ font-size:20px; line-height:1.35; margin-bottom:6px; position:relative; letter-spacing:.01em; }
.hero p{ font-size:12.8px; opacity:.82; line-height:1.62; position:relative; }
.hero .hero-tag{
  display:inline-block; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:rgba(200,164,92,.2); color:#e5c887; letter-spacing:.1em; margin-bottom:9px; position:relative;
}

/* 紧凑型 Hero：高度约为默认的三分之一（仅保留标签 + 标题，隐藏描述段） */
.hero.compact{ padding:9px 14px; margin-bottom:12px; }
.hero.compact .hero-tag{ margin-bottom:5px; }
.hero.compact h1{ font-size:15px; line-height:1.2; margin-bottom:0; }
.hero.compact p{ display:none; }

/* 阶梯路径 */
.ladder{ position:relative; padding-left:26px; }
.ladder::before{ content:""; position:absolute; left:8px; top:8px; bottom:12px; width:1.5px; background:var(--line); }
.lad-item{ position:relative; margin-bottom:11px; }
.lad-item::before{
  content:""; position:absolute; left:-22px; top:15px; width:11px; height:11px; border-radius:50%;
  background:var(--card); border:2.2px solid var(--line);
}
.lad-item.on::before{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 0 3.5px var(--gold-soft); }
.lad-item.done::before{ border-color:var(--down); background:var(--down); }

/* 评分环 */
.score-ring{ display:flex; align-items:center; gap:15px; }
.score-ring .sr-txt{ flex:1; min-width:0; }
.score-ring .sr-txt h3{ font-size:16px; margin-bottom:3px; }

/* 打分条组 */
.scale{ display:flex; gap:5px; }
.scale button{
  flex:1; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--card);
  font-size:13px; font-weight:600; font-family:var(--mono); color:var(--ink-3);
}
.scale button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* checklist */
.chk{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--line-2); width:100%; text-align:left; }
.chk:last-child{ border-bottom:none; }
.chk .cb{
  width:20px; height:20px; border-radius:6px; border:1.6px solid var(--line); flex:0 0 auto; margin-top:1px;
  display:flex; align-items:center; justify-content:center; color:transparent; font-size:12px; font-weight:800;
}
.chk.on .cb{ background:var(--down); border-color:var(--down); color:#fff; }
.chk .ct{ flex:1; font-size:13.5px; line-height:1.55; }
.chk .ct em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-4); margin-top:2px; line-height:1.5; }
.chk.on .ct{ color:var(--ink-3); }

@media (max-width:360px){
  body{ font-size:14px; }
  .metrics .m b{ font-size:15.5px; }
  .grid3{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:721px){
  body{ background:var(--paper); }
  #app-shell{ min-height:100vh; box-shadow:0 0 60px rgba(22,35,58,.08); }
}

/* =========================================================
   交互式估值图表
   ========================================================= */
.vchart{ position:relative; margin:2px -4px 0; touch-action:pan-y; }
.vchart svg{ overflow:visible; }
.vchart .vc-hit{ cursor:crosshair; }
.vc-tip{
  display:none; position:absolute; top:-36px; z-index:6; pointer-events:none;
  background:rgba(22,35,58,.95); color:#fff; border-radius:9px; padding:7px 10px;
  font-size:11px; line-height:1.75; white-space:nowrap; box-shadow:0 6px 20px rgba(22,35,58,.25);
}
.vc-tip b{ display:block; font-size:11px; font-weight:700; opacity:.75; margin-bottom:2px;
  font-family:var(--mono); letter-spacing:.02em; }
.vc-tip i{ display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; vertical-align:1px; }
.vc-tip i.nb{ background:transparent; border:1px dashed rgba(255,255,255,.5); }
.vc-tip em{ font-style:normal; font-family:var(--mono); font-weight:700; margin-left:6px; }
.vc-tip br{ line-height:0; }
.vc-empty{
  padding:26px 12px; text-align:center; font-size:12.5px; color:var(--ink-4);
  background:var(--paper-2); border:1px dashed var(--line); border-radius:var(--radius-sm);
}
.chart-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; font-size:10.5px; color:var(--ink-4); }
.chart-legend span{ display:inline-flex; align-items:center; gap:4px; }
.chart-legend i{ width:11px; height:2.5px; border-radius:2px; display:inline-block; }
.chart-hint{ font-size:10.5px; color:var(--ink-4); margin-top:6px; display:flex; align-items:center; gap:4px; }

/* =========================================================
   搜索 / 自选股
   ========================================================= */
.searchbar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.searchbar .sb-in{
  flex:1; min-width:0; height:42px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); padding:0 13px; font-size:14.5px; outline:none;
  box-shadow:var(--shadow);
}
.searchbar .sb-in:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.searchbar .sb-btn{
  height:42px; padding:0 16px; border-radius:11px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; flex:0 0 auto;
}
.sres{ display:block; width:100%; text-align:left; padding:11px 2px; border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:10px; }
.sres:last-child{ border-bottom:none; }
.sres .sr-m{
  flex:0 0 auto; font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px;
  background:var(--navy-soft); color:var(--ink-2);
}
.sres .sr-m.hk{ background:#eef3ea; color:#4a6b32; }
.sres .sr-m.us{ background:#f3eef7; color:#5c4276; }
.sres .sr-b{ flex:1; min-width:0; }
.sres .sr-b b{ font-size:14.5px; font-weight:650; }
.sres .sr-b em{ display:block; font-style:normal; font-size:11px; color:var(--ink-4); font-family:var(--mono); }
.sres .sr-add{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  font-size:17px; line-height:1; color:var(--gold); background:var(--card);
}
.sres .sr-add.on{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* 自选股表：容器高度随视口自适应，下沿贴近底部固定菜单栏（--tab-h:58px）
   自选股页：顶部仅搜索框+标题；首页：顶部还有今日一课，故再低一档 */
.wl-wrap{ margin:0 -14px; height:calc(100vh - 221px); min-height:300px; max-height:820px; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.wl-home .wl-wrap{ height:calc(100vh - 340px); min-height:260px; max-height:720px; }
.wl-wrap::-webkit-scrollbar{ width:6px; height:6px; }
.wl-wrap::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
table.wl{ border-collapse:separate; border-spacing:0; width:100%; max-width:100%; table-layout:fixed; font-size:11px; }
table.wl th, table.wl td{ padding:8px 4px; text-align:right; overflow:hidden; }
table.wl th{
  font-size:11px; font-weight:600; color:var(--ink-4); background:var(--paper-2);
  border-bottom:1px solid var(--line); position:sticky; top:0; line-height:1.35; z-index:3;
  word-break:break-word;
}
table.wl th small{ display:block; font-size:9px; font-weight:400; opacity:.8; }
table.wl td{ border-bottom:1px solid var(--line-2); font-family:var(--mono); font-weight:600; white-space:nowrap; }
table.wl tr:last-child td{ border-bottom:none; }
table.wl .c1{ text-align:left; position:sticky; left:0; background:var(--card); z-index:2; width:120px; white-space:nowrap;
  box-shadow:1px 0 0 var(--line-2); }
table.wl th.c1{ background:var(--paper-2); z-index:3; }
table.wl .c1 b{ display:block; font-family:var(--font); font-size:13.5px; font-weight:650; }
table.wl .c1 em{ font-style:normal; font-size:10px; color:var(--ink-4); }
table.wl .c1 .mk{ font-size:9px; padding:1px 4px; border-radius:4px; background:var(--navy-soft);
  color:var(--ink-2); margin-left:4px; font-family:var(--font); }
table.wl .c1 .mk.hk{ background:#eef3ea; color:#4a6b32; }
table.wl .c1 .mk.us{ background:#f3eef7; color:#5c4276; }
table.wl td.up{ color:var(--up); } table.wl td.down{ color:var(--down); }
table.wl td.err{ color:var(--up); font-family:var(--font); font-weight:500; font-size:11px; }
table.wl tr.load td{ color:var(--ink-4); font-weight:400; font-family:var(--font); }
.wl-del{ color:var(--ink-4); font-size:15px; padding:0 3px; }
/* 持续跟踪表：指标名可点击排序 */
table.wl th[data-sort]{ cursor:pointer; user-select:none; }
table.wl th[data-sort]:hover{ color:var(--blue); }
table.wl th.sort-asc::after{ content:"▲"; font-size:8px; margin-left:3px; color:var(--blue); }
table.wl th.sort-desc::after{ content:"▼"; font-size:8px; margin-left:3px; color:var(--blue); }
/* 首页持续跟踪：拖拽排序手柄 + 移除列 */
table.wl .c1 .hw-grip{ display:inline-block; margin-right:5px; color:var(--ink-4); cursor:grab; font-size:12px; line-height:1; user-select:none; touch-action:none; }
table.wl .c1.dragging{ opacity:.5; }
table.wl tr.dragging{ background:var(--gold-soft,#f0e2c0); }
table.wl tr.drag-over-top td{ box-shadow:inset 0 2px 0 0 var(--gold,#b8860b); }
table.wl tr.drag-over-bottom td{ box-shadow:inset 0 -2px 0 0 var(--gold,#b8860b); }
table.wl th.c-rm, table.wl td.c-rm{ width:54px; text-align:center; padding-left:2px; padding-right:2px; }
table.wl .hw-rm{ font-size:11px; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--line); border-radius:7px; padding:3px 6px; cursor:pointer; white-space:nowrap; }
table.wl .hw-rm:hover{ color:var(--down); border-color:var(--down); }

.mini-tabs{ display:flex; gap:6px; background:var(--paper-2); padding:3px; border-radius:10px; margin-bottom:12px; }
.mini-tabs button{ flex:1; height:30px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-3); }
.mini-tabs button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.val-range{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:8px; padding:4px 26px 4px 8px; max-width:46%; cursor:pointer;
  -webkit-appearance:none; appearance:none; position:relative; z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238b98ad'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; }

/* 估值页：市盈率一对 / 市净率一对 上下堆叠对比，一屏一组 */
.val-pair{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.val-cell{ min-width:0; }
.val-cell .sec-title{ flex-wrap:wrap; }

.valbox{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0 2px; }
.valbox div{ background:var(--paper-2); border-radius:9px; padding:7px 4px; text-align:center; }
.valbox div span{ display:block; font-size:9.5px; color:var(--ink-4); }
.valbox div b{ font-size:13px; font-family:var(--mono); }

/* =========================================================
   价值投资理念页：模块与字体舒展放大，内容撑满到底部菜单上方
   （仅 .ph-page 作用域，不影响其他页面）
   ========================================================= */
.ph-page .segs{ margin-bottom:10px; padding:3px; border-radius:10px; }
.ph-page .segs button{ padding:8px 4px; font-size:13px; }
.ph-page #phBody > p.small{ font-size:13px; margin-bottom:10px; line-height:1.65; }
.ph-page .acc{ margin-bottom:8px; border-radius:10px; }
.ph-page .acc-h{ padding:12px 13px; gap:10px; }
.ph-page .acc-h b{ font-size:14px; }
.ph-page .acc-h em{ font-size:11px !important; margin-top:1px; }
.ph-page .acc-n{ width:24px; height:24px; font-size:11px; border-radius:6px; }
.ph-page .acc-c{ padding:0 14px 15px; font-size:14px; line-height:1.75; }
.ph-page .acc-c p{ font-size:14px; }
.ph-page .acc-c .quote{ margin-top:12px; }
.ph-page .quote{ font-size:14px; line-height:1.75; }
.ph-page .card{ padding:15px 14px; }
.ph-page .card h3{ font-size:16px !important; margin-bottom:5px; }
.ph-page .card h3 + p.small{ margin-bottom:9px; font-size:13px; }
.ph-page .eyebrow{ font-size:11px; }
.ph-page .note{ padding:11px 12px; font-size:13px; line-height:1.65; }
.ph-page .divider{ margin:12px -14px; }
.ph-page .slider-row{ margin-bottom:13px; }
.ph-page .slider-row .sl-top label{ font-size:13px; }
.ph-page .slider-row .sl-top b{ font-size:14.5px; }
.ph-page .btn{ font-size:13px; }
.ph-page #cpChart{ margin-top:4px; }
.ph-page #phBody .metrics{ margin-top:12px; }
.ph-page #mmBoard .mm-row{ padding:11px 12px; }

/* 复利演示卡（ph-cpd）：定向压缩，整页内容刚好落在底部菜单栏上方 */
.ph-page .ph-cpd{ padding:12px 13px; }
.ph-page .ph-cpd h3{ font-size:15px !important; margin-bottom:4px; }
.ph-page .ph-cpd h3 + p.small{ font-size:12.5px; margin-bottom:7px; }
.ph-page .ph-cpd .eyebrow{ font-size:10.5px; }
.ph-page .ph-cpd .divider{ margin:9px -13px; }
.ph-page .ph-cpd .slider-row{ margin-bottom:8px; }
.ph-page .ph-cpd .slider-row .sl-top label{ font-size:12px; }
.ph-page .ph-cpd .slider-row .sl-top b{ font-size:13.5px; }
.ph-page .ph-cpd #cpChart{ margin-top:3px; }
.ph-page .ph-cpd #cpResult .metrics{ margin-top:8px; }
.ph-page .ph-cpd .note{ padding:9px 10px; font-size:12.5px; margin-top:9px; line-height:1.6; }

/* 投机 vs 投资（ph-cmp）：定向压缩，最后一屏内落在底部菜单栏上方 */
.ph-page .ph-cmp .note{ padding:9px 10px; font-size:12.5px; margin-bottom:9px; line-height:1.6; }
.ph-page .ph-cmp .card{ padding:12px 13px; }
.ph-page .ph-cmp .quote{ font-size:13px; margin:0; line-height:1.7; }
.ph-page .ph-cmp .small{ font-size:12.5px; }
.ph-page .ph-cmp .btn{ font-size:13px; margin-top:4px; }

/* 复利演示卡：进一步微调，保证最后一行提示在底部菜单栏上方 */
.ph-page .ph-cpd .slider-row{ margin-bottom:7px; }
.ph-page .ph-cpd #cpChart{ margin-top:2px; }
.ph-page .ph-cpd .note{ padding:8px 10px; margin-top:8px; }

/* =========================================================
   头部中间指标（估值分析 / 财报体检：股票名与股价之间）
   ========================================================= */
.val-mid{ flex:1; min-width:0; display:flex; justify-content:center; align-items:stretch; gap:2px; padding:0 6px; }
.val-mid > div{ background:var(--paper-2); border-radius:8px; padding:4px 7px; text-align:center; min-width:0; }
.val-mid > div span{ display:block; font-size:9.5px; color:var(--ink-4); white-space:nowrap; }
.val-mid > div b{ display:block; font-size:12.5px; font-family:var(--mono); font-weight:700; white-space:nowrap; }
#valHead .metrics, #frHead .metrics{ background:transparent; gap:2px; border-radius:8px; }
#valHead .metrics .m, #frHead .metrics .m{ padding:5px 4px; background:var(--paper-2); border-radius:8px; }
#valHead .metrics .m b, #frHead .metrics .m b{ font-size:13px; }
#valHead .metrics .m span, #frHead .metrics .m span{ font-size:9.5px; }
@media (max-width:560px){
  .val-mid{ padding:0 3px; }
  .val-mid > div{ padding:3px 4px; }
  .val-mid > div b{ font-size:11px; }
  .val-mid > div span{ font-size:8.5px; }
  #valHead .metrics .m, #frHead .metrics .m{ padding:4px 3px; }
  #valHead .metrics .m b, #frHead .metrics .m b{ font-size:11.5px; }
  #valHead .metrics .m span, #frHead .metrics .m span{ font-size:8.5px; }
}
