/* 前台与后台共用的设计令牌与基础组件。
   两个应用的外壳(顶栏/导航)与原语(卡片/按钮/表单/表格/徽标)必须一致 ——
   后台是同一个产品的一部分,不是另一个网站。 */

  /* ================= 设计令牌 =================
     三条原则:
     1. 涨用红,跌用钢蓝,全局不出现绿色。红涨是 A 股的硬约定,不能动;
        跌色改蓝是取舍 —— 散户最熟的是绿跌,蓝跌来自港股与机构终端,
        换来的是整套界面没有红绿对撞、也不再有红绿色盲读不出方向的问题。
        跌色特意选偏青的钢蓝,与品牌靛蓝拉开距离,不会被误当成链接。
     2. 品牌色与涨跌色彻底分离。品牌用靛蓝 —— 这个产品的价值是"泼冷水"
        (健康度提示、口径页、过拟合判定),不是渲染财富感;主色用红会吸引
        错误的用户预期。
     3. 所有颜色都是令牌,组件里不写字面色值,否则换肤要翻遍代码。
     ============================================ */
  :root{
    /* 物理色板 —— 只在这里出现,组件一律用下面的语义令牌 */
    --c-red:#D9342B; --c-red-soft:#FDECEA; --c-red-ink:#9E2018;
    --c-cool:#2E6FA8; --c-cool-soft:#E7F0F8; --c-cool-ink:#1D4E78;

    --bg:#F5F6F8; --surface:#FFFFFF; --surface2:#EFF1F5; --surface3:#E8EBF0;
    --ink:#14161C; --ink2:#4A5060; --muted:#868D9B;
    --line:#E5E8ED; --line2:#D3D8E0;
    --accent:#2B5AD9; --accent-soft:#E9EEFC; --accent-ink:#1B3E9E;
    --accent-grad-a:#1B3E9E; --accent-grad-b:#3A6FE0;
    --warn:#B47714; --warn-soft:#FDF3E0; --warn-line:#E8CF9B; --warn-ink:#7A5510;
    --danger:#C0392B;
    --on-accent:#FFFFFF;
    --hero-a:#12294D; --hero-b:#1E4E8C; --hero-c:#2F6BB1;
    --hero-ink:#C8D9EC; --hero-dim:#A9C9EF; --hero-err:#FFD7D2;
    --shadow-xs:0 1px 2px rgba(20,24,32,.06);
    --shadow-sm:0 1px 4px rgba(20,24,32,.10);
    --shadow:0 1px 2px rgba(20,24,32,.05),0 4px 14px rgba(20,24,32,.05);
    --shadow-pop:0 6px 24px rgba(20,24,32,.14);
    --overlay:rgba(255,255,255,.92);
  }
  /* 涨跌方向偏好。默认涨红跌蓝;看港美股的用户可切成涨蓝跌红。 */
  :root,:root[data-updown="rg"]{
    --up:var(--c-red); --up-soft:var(--c-red-soft); --up-ink:var(--c-red-ink);
    --dn:var(--c-cool); --dn-soft:var(--c-cool-soft); --dn-ink:var(--c-cool-ink);
  }
  :root[data-updown="gr"]{
    --up:var(--c-cool); --up-soft:var(--c-cool-soft); --up-ink:var(--c-cool-ink);
    --dn:var(--c-red); --dn-soft:var(--c-red-soft); --dn-ink:var(--c-red-ink);
  }

  /* 深色:股民主要在盘后夜间复盘,这是 A 股 App 的标配而非加分项。
     跟随系统,且允许用户显式覆盖(三态:auto / light / dark)。 */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --c-red:#FF5C52; --c-red-soft:#2E1A18; --c-red-ink:#FF9A93;
      --c-cool:#5AA0D8; --c-cool-soft:#15222E; --c-cool-ink:#9CC8ED;
      --bg:#0E1117; --surface:#171A21; --surface2:#1E222B; --surface3:#262B35;
      --ink:#E8EAF0; --ink2:#A7AEBD; --muted:#6E7686;
      --line:#262B35; --line2:#333945;
      --accent:#5B8DEF; --accent-soft:#18233A; --accent-ink:#A8C4F8;
      --accent-grad-a:#2A4C8F; --accent-grad-b:#4C7FE0;
      --warn:#E0A93C; --warn-soft:#2A2216; --warn-line:#4A3D22; --warn-ink:#E8C376;
      --danger:#E06C5C;
      --hero-a:#101B2E; --hero-b:#17335C; --hero-c:#1F4A82;
      --shadow-xs:0 1px 2px rgba(0,0,0,.4);
      --shadow-sm:0 1px 4px rgba(0,0,0,.45);
      --shadow:0 1px 2px rgba(0,0,0,.32),0 4px 16px rgba(0,0,0,.28);
      --shadow-pop:0 10px 30px rgba(0,0,0,.5);
      --overlay:rgba(23,26,33,.92);
    }
  }
  :root[data-theme="dark"]{
    --c-red:#FF5C52; --c-red-soft:#2E1A18; --c-red-ink:#FF9A93;
    --c-cool:#5AA0D8; --c-cool-soft:#15222E; --c-cool-ink:#9CC8ED;
    --bg:#0E1117; --surface:#171A21; --surface2:#1E222B; --surface3:#262B35;
    --ink:#E8EAF0; --ink2:#A7AEBD; --muted:#6E7686;
    --line:#262B35; --line2:#333945;
    --accent:#5B8DEF; --accent-soft:#18233A; --accent-ink:#A8C4F8;
    --accent-grad-a:#2A4C8F; --accent-grad-b:#4C7FE0;
    --warn:#E0A93C; --warn-soft:#2A2216; --warn-line:#4A3D22; --warn-ink:#E8C376;
    --danger:#E06C5C;
    --hero-a:#101B2E; --hero-b:#17335C; --hero-c:#1F4A82;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 4px rgba(0,0,0,.45);
    --shadow:0 1px 2px rgba(0,0,0,.32),0 4px 16px rgba(0,0,0,.28);
      --shadow-pop:0 10px 30px rgba(0,0,0,.5);
    --overlay:rgba(23,26,33,.92);
  }

  /* ================= 字号标尺 =================
     商用 C 端产品的最小可用字号是 12px。改造前这里有 8px/8.5px/9px 的正文,
     那不是"信息密度高",是读不清 —— 尤其目标用户里有大量中老年散户。

     只有八档,且组件里一律引用令牌:字号一旦可以随手写数字,页面就会长出
     8.5px 和 9.5px 这种彼此差半像素、却谁也说不出理由的层级。
     ============================================ */
  :root{
    --fs-caption:12px;    /* 角标、脚注 —— 下限,不得再小 */
    --fs-small:13px;      /* 次要说明、表格内文字 */
    --fs-body:15px;       /* 正文基准 */
    --fs-body-lg:16px;    /* 卡片主文案 */
    --fs-h3:18px;         /* 卡片标题 */
    --fs-h2:21px;         /* 区块标题 */
    --fs-h1:25px;         /* 页面标题 */
    --fs-display:32px;    /* 首屏主标题、大数字 */
  }

  /* color-scheme 决定 UA 给表单控件(button/input/select)的默认配色,
     它跟随的是**系统**偏好,不是我们的 data-theme。写成 `light dark` 后,
     系统深色 + 用户选浅色 时,任何没显式设色的 button 都会拿到深色模式的
     buttontext(白字) —— 顶栏那颗用户名按钮就是白底白字,整个看不见。
     所以这里必须和主题解析结果保持一致,三个分支缺一不可。 */
  :root{color-scheme:light}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
  :root[data-theme="dark"]{color-scheme:dark}
  :root[data-theme="light"]{color-scheme:light}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-size:var(--fs-body);line-height:1.6;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
  .num{font-variant-numeric:tabular-nums}
  code,.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}

  .bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;
    padding:9px 24px;background:var(--overlay);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .bar b.logo{font-size:var(--fs-body-lg);display:flex;align-items:center;gap:9px;white-space:nowrap}
  .brand-mark{display:inline-flex;width:32px;height:32px;border-radius:9px;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent-grad-a),var(--accent-grad-b));color:var(--on-accent);box-shadow:var(--shadow)}
  .brand-copy{line-height:1.05}.brand-copy small{display:block;color:var(--muted);font-size:var(--fs-caption);letter-spacing:.14em;margin-top:4px}
  /* flex-wrap 在窄屏下会把每个标签压成一字一行(整块导航变成竖排单字)。
     标签本身不换行,容器改横向滚动 —— 顶栏宁可滑动也不该变形。 */
  .tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{border:0;background:none;cursor:pointer;font:inherit;color:var(--ink2);padding:7px 12px;flex:0 0 auto;white-space:nowrap;
    border-radius:8px;transition:color .14s,background .14s}
  .tab:hover{background:var(--surface2);color:var(--ink)}
  /* 选中项用实底 + 反白:淡底方案在顶栏这种半透明背景上层级不够,
     扫一眼分不清当前在哪一页。 */
  .tab.on{background:var(--accent);color:var(--on-accent);font-weight:600}
  .tab.on:hover{background:var(--accent);color:var(--on-accent)}
  /* 平板/窄窗口:右侧的积分、消息、外观、用户四件套会把导航挤到只剩一个标签宽,
     其余标签虽然能滑动但没人知道它们在 —— 让导航整体换到第二行,占满宽度。 */
  @media (max-width: 900px){
    .bar{flex-wrap:wrap;row-gap:4px;padding:8px 14px}
    .tabs{order:9;flex:1 1 100%;min-width:100%}
  }
  .themebtn{border:1px solid var(--line);background:var(--surface);color:var(--ink2);
    width:30px;height:30px;border-radius:99px;cursor:pointer;font-size:var(--fs-body);line-height:1;
    display:inline-flex;align-items:center;justify-content:center}
  .themebtn:hover{border-color:var(--line2);color:var(--ink)}
  /* color 必须显式写:button 不继承父级文字色,靠 UA 默认值就会被
     color-scheme 牵着走。max-width + 省略号是为了长用户名不把导航挤掉。 */
  .userchip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
    color:var(--ink);border-radius:99px;padding:4px 10px 4px 6px;font:inherit;cursor:pointer;
    max-width:210px;transition:border-color .14s,background .14s}
  .userchip:hover{background:var(--surface2);border-color:var(--line2)}
  .userchip #uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small)}
  /* 退出是这颗按钮唯一的动作,得让人看出来它可点 —— 原先只有一个
     confirm 对话框,按钮本身没有任何可点的暗示。 */
  .userchip::after{content:"退出";flex:none;color:var(--muted);font-size:var(--fs-caption);
    border-left:1px solid var(--line);padding-left:8px;margin-left:2px}
  .userchip:hover::after{color:var(--up)}
  .bellwrap{position:relative}
  .bellbtn{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:50%;
    width:34px;height:34px;cursor:pointer;font-size:var(--fs-body-lg);line-height:1}
  .bellbtn:hover{background:var(--surface2)}
  .bellbadge{position:absolute;top:-4px;right:-4px;background:var(--up);color:var(--on-accent);border-radius:99px;
    font-size:var(--fs-caption);font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px}
  .bellpanel{position:absolute;right:0;top:calc(100% + 8px);width:340px;background:var(--surface);
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);
    display:none;z-index:60}
  .bellpanel.open{display:block}
  .ntf{padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
  .ntf:last-child{border-bottom:0}
  .ntf.unread{background:var(--accent-soft)}
  .ntf b{font-size:var(--fs-small)}
  .ntf .nc{color:var(--ink2);margin-top:2px}
  .ntf .nt{color:var(--muted);font-size:var(--fs-small);margin-top:3px}
  .avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
    display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:600;flex:none}
  main{max-width:1280px;margin:0 auto;padding:20px 24px 42px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);margin-bottom:14px}
  /* 标题不许被旁边的说明文字挤成竖排(flex 子项默认可以缩到单字宽):标题不收缩,
     放不下时说明文字换行或整体折到下一行 */
  .card-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:11px 16px;border-bottom:1px solid var(--line)}
  .card-h h3{margin:0;font-size:var(--fs-body);flex:1 0 auto;white-space:nowrap}
  .card-h .sec,.card-h .muted{min-width:0;overflow-wrap:anywhere}
  .card-b{padding:14px 16px}
  .btn{cursor:pointer;font:inherit;border-radius:8px;padding:7px 14px;border:1px solid var(--line2);
    background:var(--surface);color:var(--ink)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
  .btn.sm{padding:4px 10px;font-size:var(--fs-small)}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  .fld{margin-bottom:12px}
  .fld label{display:block;font-size:var(--fs-small);color:var(--muted);margin-bottom:4px}
  .fld input,.fld select,.fld textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);
    border:1px solid var(--line2);border-radius:8px;padding:8px 12px}
  .pill{display:inline-block;font-size:var(--fs-small);padding:2px 8px;border-radius:99px;font-weight:600}
    /* 成功/校验通过不能借用跌色 —— 语义不对,而且切换涨跌方向后
     这枚徽标会跟着变红。 */
  .pill.ok{background:var(--accent-soft);color:var(--accent-ink)}
  .pill.warn{background:var(--warn-soft);color:var(--warn)}
  .pill.red{background:var(--up-soft);color:var(--up)}
  .pill.cool{background:var(--dn-soft);color:var(--dn)}
  .pill.blue{background:var(--accent-soft);color:var(--accent)}
  .pill.gray{background:var(--surface2);color:var(--ink2)}
  .muted{color:var(--muted)} .sec{color:var(--ink2)}
  .up{color:var(--up)} .dn{color:var(--dn)}
  table{border-collapse:collapse;width:100%}
  th{font-size:var(--fs-small);color:var(--muted);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
  td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
  tr:last-child td{border-bottom:0}
  /* 纵向可滚的表格:底部给一条渐隐,提示"下面还有" ——
     否则内容被容器边缘齐平切断,看起来像渲染坏了而不是可以继续滚。
     scroll-padding 让键盘翻页停在整行边界,不会半行卡在表头下面。 */
  .table-wrap{overflow-x:auto;scroll-padding-top:34px;max-width:100%}
  .card{min-width:0}   /* 作为 grid/flex 子项时允许收缩:宽表交给 .table-wrap 内部滚动,不许把页面撑出横向滚动 */
  .table-wrap.scrolly{
    position:relative;
    -webkit-mask-image:linear-gradient(to bottom,black calc(100% - 22px),transparent);
    mask-image:linear-gradient(to bottom,black calc(100% - 22px),transparent)}
  .toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
    padding:9px 18px;border-radius:99px;font-size:var(--fs-small);display:none;z-index:80;max-width:80vw}
  .auth-wrap{display:flex;justify-content:center;padding-top:56px}
  .auth{width:380px}
  .err{color:var(--up);font-size:var(--fs-small);margin-top:8px;white-space:pre-line;min-height:16px}
  .okmsg{color:var(--accent-ink)}
  .jsonbox{background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:12px;
    font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-caption);line-height:1.6;overflow:auto;max-height:300px;white-space:pre}
  .hidden{display:none}
  .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  @media(max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
  .disclaimer{font-size:var(--fs-small);color:var(--muted);text-align:center;padding:14px 0}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
  .tile span{font-size:var(--fs-small);color:var(--muted);display:block}
  .tile b{font-size:var(--fs-h3)}
  /* chat */