/* ================================================================
 * cohort.css — 选币分组看板
 *   配色只用 base.css 的变量, 不写死色值(主题一改这里跟着走)。
 *   本模块是独立页面(.page 默认 display:none), 除入口胶囊外零占位。
 * ============================================================== */

#page-cohort {
    /* 两个吸顶位:搜索栏停在 nav-bar 下沿, 组头再停在搜索栏下沿。
       ★ 这里只是兜底初值 —— 真实数值由 cohort.js 的 cohortSyncStickTop()
         运行时量出来后写进这两个变量。不写死是因为它同时被"吸顶位置"和
         "展开后滚到哪"两处消费, 手工维护两份必然会改漏一处。 */
    --cohort-search-top: 64px;   /* nav-bar: padding 14×2 + .nav-back 36 */
    --cohort-stick-top: 112px;   /* 再叠搜索栏: 药丸 38 + 下衬 10 */
}

/* ---------- 搜索栏 ---------- */

/* 这个页面的顶栏内容较多，单独收紧右侧信息，并在下方留出呼吸空间。 */
#page-cohort .nav-bar {
    padding-bottom: 10px;
}

/* 外层是铺满页宽的底衬。★ 必须有不透明背景 —— 只给药丸本身 sticky 的话,
   左右和下方的留白是透的, 滚动时内容会从缝里穿过去, 看着像没吸住。 */
.cohort-search-bar {
    position: sticky;
    top: var(--cohort-search-top);
    z-index: 30;                 /* 高于组头 20, 低于 nav-bar 50 */
    padding: 10px 16px 12px;
    background: var(--bg-page);
}

/* 两种查询收进同一张面板，避免两个药丸堆叠造成视觉割裂。 */
.cohort-filter-panel {
    overflow: hidden;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.06), var(--shadow-card);
}
.cohort-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    height: 42px;
    border-radius: 12px;
    transition: background 0.18s, box-shadow 0.18s;
}
.cohort-search-box:focus-within {
    background: rgba(59, 130, 246, 0.055);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.cohort-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--bg-input);
}
.cohort-field-icon .icon {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#cohort-search {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
}
#cohort-search::placeholder { color: var(--text-muted); }

.cohort-filter-divider {
    height: 1px;
    margin: 0 8px 0 44px;
    background: var(--border);
}

/* 时间查询:留空=当前, 输入整点=看那一小时的存档现场 */
.cohort-time-box {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px 0 8px;
    height: 42px;
    border-radius: 12px;
    transition: background 0.18s, box-shadow 0.18s;
}
.cohort-time-box:focus-within {
    background: rgba(59, 130, 246, 0.055);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.cohort-time-label {
    flex-shrink: 0;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    font-size: 10px;
    font-weight: 600;
}
#cohort-at {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
}
#cohort-at::placeholder { color: var(--text-muted); font-family: var(--font-sans); }

.cohort-at-btn, .cohort-at-now {
    flex-shrink: 0;
    height: 30px;
    padding: 0 13px;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, opacity 0.12s;
}
.cohort-at-btn {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.22);
}
.cohort-at-now {
    display: none;           /* 只在看历史时由 JS 显示 */
    align-items: center;
    background: var(--bg-input);
    color: var(--text-secondary);
}
.cohort-at-btn:active, .cohort-at-now:active { transform: scale(0.95); }

/* 历史态标识:顶栏时间换配色, 免得把存档当成当前 */
.cohort-time.hist {
    color: #854f0b;
    background: rgba(245, 158, 11, 0.14);
    padding: 2px 8px;
    border-radius: 999px;
}
.cohort-hist-note {
    margin: 0 16px 12px;
    padding: 9px 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-md);
    font-size: 11px;
    line-height: 1.6;
    color: #854f0b;
}

/* ---------- 派单结局行(存档专有) ---------- */
.cohort-dsp {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
/* ★ 用 .cohort-dsp-list 包一层再 :last-child。原来写的是 .cohort-dsp:last-of-type,
   而 :last-of-type 认的是元素类型(div)不是 class —— 派单行后面还有成员表的
   若干个 div, 那条规则一次都命中不了。 */
.cohort-dsp-list .cohort-dsp:last-child { border-bottom: none; }
.cohort-dsp.ok .cohort-mem-dot { background: var(--accent-green); }
.cohort-dsp.no .cohort-mem-dot { background: var(--accent-amber); }
.cohort-dsp-grp {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cohort-dsp.ok .cohort-mem-tag { background: rgba(34, 197, 94, 0.12); color: var(--accent-green); }
.cohort-dsp.no .cohort-mem-tag { background: rgba(245, 158, 11, 0.14); color: #b45309; }
/* ⚠️ 缺行 ≠ 拒绝:某个账号组在这一组上没有记录, 是因为它在梯队更前面就
   接满或被终止了, 压根没评估到这一名。不写清楚, 用户会当成"它拒了"。 */
.cohort-dsp-note {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted);
}

.cohort-search-clear {
    display: none;               /* 有词时才由 JS 显示 */
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
}

@media (max-width: 380px) {
    .cohort-search-bar { padding-left: 12px; padding-right: 12px; }
    .cohort-time-label { display: none; }
    #cohort-at { font-size: 11px; }
    .cohort-at-btn, .cohort-at-now { padding: 0 10px; }
}

/* ---------- 搜索结果行 ---------- */
/* 一行两段:上段点了跳 K 线, 下段的组名点了跳回分组视图并展开那一组。
   两段分开是因为它们去的地方不一样, 挤在一行里点不准。 */

.cohort-hit {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
}
.cohort-hit:last-child { border-bottom: none; }
.cohort-hit.picked { border-left-color: var(--accent-green); }
.cohort-hit.pass   { border-left-color: var(--accent-blue); }

.cohort-hit-main { cursor: pointer; }
.cohort-hit-main:active { opacity: 0.6; }
.cohort-hit-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cohort-hit-top .cohort-mem-sym { font-size: 13px; }

.cohort-hit-gid {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    word-break: break-all;
}
.cohort-hit-gid.link {
    color: var(--accent-blue);
    cursor: pointer;
}
.cohort-hit-gid.link:active { opacity: 0.6; }

/* 结果行复用成员行的标签配色 */
.cohort-hit.picked .cohort-mem-tag { background: rgba(34, 197, 94, 0.12); color: var(--accent-green); }
.cohort-hit.pass   .cohort-mem-tag { background: rgba(59, 130, 246, 0.12); color: var(--accent-blue); }
.cohort-hit.out .cohort-mem-sym,
.cohort-hit.out .cohort-mem-num { color: var(--text-muted); }

/* ---------- 入口胶囊: 挂在「精选候选池」标题右侧 ---------- */

.cohort-entry-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cohort-capsule {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    appearance: none;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.cohort-capsule:active { transform: scale(0.95); }
@media (hover: hover) {
    .cohort-capsule:hover { background: #fff; border-color: var(--border-strong); }
}
.cohort-capsule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    flex-shrink: 0;
}

/* ---------- 顶栏数据时间 ---------- */
/* ★ 分组每小时才重算一次, 这个时间是判断"看到的是新是旧"的唯一依据,
     所以给它等宽字体 + 独立色阶, 不要和标题混成一片。 */
.cohort-time {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    /* 窄屏时宁可把时间串省略掉, 也不要让标题被挤成两行 */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-cohort .nav-title { flex-shrink: 0; }
.cohort-refresh {
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border: none;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.cohort-refresh:active { background: var(--bg-hover); }

.cohort-empty-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* .section-label 没有上内边距(components.css), 首个会紧贴 sticky nav-bar。
   搜索页已经踩过同一个坑(pages.css 的 #page-search > .section-label)。 */
#cohort-body > .section-label:first-child { padding-top: 10px; }

/* ---------- 大盘走势 ---------- */

.cohort-market {
    position: relative;
    margin: 0 16px 18px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    color: var(--accent-blue);
}
.cohort-market.up { color: var(--accent-green); }
.cohort-market.down { color: var(--accent-red); }
.cohort-market-head {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.cohort-market-head > div {
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
}
.cohort-market-caption {
    margin-bottom: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}
.cohort-market-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font: 600 24px var(--font-mono);
    letter-spacing: -0.6px;
    color: var(--text-primary);
}
.cohort-market-change {
    font-size: 12px;
    letter-spacing: 0;
    color: var(--accent-blue);
}
.cohort-market.up .cohort-market-change { color: var(--accent-green); }
.cohort-market.down .cohort-market-change { color: var(--accent-red); }
.cohort-market-plot { position: relative; }
.cohort-market-chart { display: block; width: 100%; height: 280px; }
.cohort-market-area { fill: currentColor; opacity: 0.07; }
.cohort-market-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cohort-market-baseline { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.45; }
.cohort-market-times {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font: 10px var(--font-mono);
}
.cohort-market-empty { display: grid; gap: 8px; padding: 24px 14px; color: var(--text-secondary); font-size: 12px; }
.cohort-market-empty small { color: var(--text-muted); font-size: 11px; }

/* ---------- 漏斗条 ---------- */

.cohort-funnel {
    background: var(--bg-card);
    margin: 0 16px 18px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.cohort-fn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}
.cohort-fn-label {
    width: 62px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary);
}
.cohort-fn-track {
    flex: 1;
    height: 14px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}
.cohort-fn-track > i {
    display: block;
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    opacity: 0.75;
}
.cohort-fn-val {
    width: 34px;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
}
.cohort-fn-cut {
    width: 34px;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

/* 席位用离散格子, 不用横条 —— 6 格亮 4 格一眼看出没派满 */
.cohort-fn-row.seat {
    margin-bottom: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.cohort-fn-row.seat .cohort-fn-label { color: var(--accent-green); font-weight: 600; }
.cohort-fn-row.seat .cohort-fn-val   { color: var(--accent-green); font-weight: 600; }
.cohort-fn-cells {
    flex: 1;
    display: flex;
    gap: 3px;
}
.cohort-fn-cells > i {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background: var(--bg-input);
}
.cohort-fn-cells > i.on { background: var(--accent-green); }

.cohort-fn-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.6;
    color: var(--accent-amber);
}

/* ---------- 各账号组取位(2026-08 席位回填) ---------- */
.cohort-walk-title {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--text-muted);
}
.cohort-walk {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.cohort-walk-grp {
    width: 92px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-primary);
}
.cohort-walk .cohort-fn-cells { flex: 0 0 auto; }
.cohort-walk-tail {
    flex: 1;
    text-align: right;
    font-size: 10px;
    color: var(--text-muted);
}
/* 三种收尾的处置方向不同, 给不同的颜色:
   ok=接满(正常) / stop=被全组性闸门截断 / warn=挖穿深度上限仍没凑齐 */
.cohort-walk.ok   .cohort-walk-tail { color: var(--accent-green); }
.cohort-walk.stop .cohort-walk-tail { color: var(--accent-red); }
.cohort-walk.warn .cohort-walk-tail { color: var(--accent-amber); }

/* ---------- 分组卡 ---------- */
/* 小圆点 = 组状态: 绿=拿到席位 / 琥珀=有幸存者但未获席位 / 灰=全军覆没 */

/* ★ 一组一张卡, 且这一层【不能】有 overflow:hidden ——
     sticky 元素只要有一个 overflow 非 visible 的祖先就不再吸顶,
     而组头吸顶是本页的核心交互。原来套的 .list-card 正是 overflow:hidden。 */
.cohort-list { padding-bottom: 2px; }

.cohort-grp {
    margin: 0 16px 7px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

/* 组头那一条 = 标题 + 折叠按钮。展开时吸顶, 成员表在它下面滚。 */
.cohort-grp-bar {
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.cohort-grp-bar:active { background: var(--bg-hover); }

.cohort-grp.open > .cohort-grp-bar {
    position: sticky;
    top: var(--cohort-stick-top);
    z-index: 20;                 /* 低于 .nav-bar 的 50, 让顶栏压在上面 */
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

/* 展开时右下角给一个明确的"点这里收起", 光靠箭头不够明显 */
.cohort-fold {
    margin-left: auto;
    padding-left: 10px;
    font-family: var(--font-sans);
    font-size: 10px;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.cohort-grp-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cohort-state-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--border-strong);
}
.cohort-grp.picked .cohort-state-dot {
    background: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cohort-grp.waiting .cohort-state-dot {
    background: var(--accent-amber);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
/* bench = 上了候选梯队但没有任何账号组接单(名次靠后没轮到 / 各组都拒了)。
   2026-08 席位回填之前不存在这个状态 —— 那时"上榜"就等于"拿到席位"。 */
.cohort-grp.bench .cohort-state-dot {
    background: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(89, 104, 239, 0.1);
}
.cohort-sym {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.cohort-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
}
.cohort-tag.ok   { background: rgba(34, 197, 94, 0.12);  color: var(--accent-green); }
.cohort-tag.warn { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.cohort-tag.mute { background: var(--bg-input);          color: var(--text-muted); }
.cohort-tag.info { background: rgba(89, 104, 239, 0.12); color: var(--accent-blue); }

.cohort-score {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}
.cohort-chev {
    font-size: 11px;
    color: var(--text-muted);
    width: 12px;
    text-align: right;
}
.cohort-grp-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 3px 0 0 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.cohort-grp-meta-txt {
    min-width: 0;          /* flex 子项默认 min-width:auto, 不清零长串会顶破 */
    word-break: break-all;
}

/* ---------- 展开明细 ---------- */

/* 明细直接贴在吸顶条下面, 不留外边距 —— 中间有缝的话滚动时会从缝里
   透出下面的成员行, 看着像吸顶条没盖住。 */
.cohort-detail {
    padding: 10px 13px 12px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.cohort-meta-box {
    padding: 9px 10px;
    background: var(--bg-page);
    border-radius: var(--radius-sm);
}
.cohort-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    line-height: 1.9;
}
.cohort-kv span:first-child { color: var(--text-muted); flex-shrink: 0; }
.cohort-kv span:last-child  { color: var(--text-primary); text-align: right; word-break: break-all; }

.cohort-mem-title {
    margin: 9px 0 3px;
    font-size: 10px;
    color: var(--text-muted);
}

.cohort-mem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;   /* 点任一成员跳 K 线 */
}
.cohort-mem:active { opacity: 0.6; }
.cohort-mem:last-child { border-bottom: none; }
.cohort-mem-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
}
.cohort-mem.picked .cohort-mem-dot { background: var(--accent-green); }
.cohort-mem.pass   .cohort-mem-dot { background: var(--accent-blue); }

.cohort-mem-sym {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
}
.cohort-mem.out .cohort-mem-sym { color: var(--text-muted); }

.cohort-mem-tag {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-muted);
    white-space: nowrap;
}
.cohort-mem.picked .cohort-mem-tag { background: rgba(34, 197, 94, 0.12); color: var(--accent-green); }
.cohort-mem.pass   .cohort-mem-tag { background: rgba(59, 130, 246, 0.12); color: var(--accent-blue); }

.cohort-mem-num {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.cohort-mem.out .cohort-mem-num { color: var(--text-muted); }

/* ---------- 单币四条门实测值(2026-08 新增) ---------- */
/* 挂在成员行下方。★ 对【所有信号门原料齐全的池内币】都显示, 不只是通过的
   那批 —— 没过门的"差多少就过了"只有这几个数答得出。
   绿=这一条过了 / 灰=没过或判不了。四条全绿才是幸存。 */
.cohort-gates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 6px 14px;
}
.cohort-gate {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    background: var(--bg-input);
    color: var(--text-muted);
}
.cohort-gate > b {
    font-weight: 700;
    opacity: 0.75;
}
.cohort-gate.on {
    background: rgba(34, 197, 94, 0.10);
    color: var(--accent-green);
}

.cohort-mem-more {
    margin-top: 7px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}

.cohort-free {
    margin: 14px 16px 0;
    padding: 9px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
}