/* ═══ 屏级共用版式 ═══
   单屏独有的规则写在 css/s-<屏名>.css，并在 index.html 里加一条 link。
   这样多条线同时改不同屏时不会撞同一个文件。 */

.screen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.screen > .page { flex: 1; min-height: 0; overflow-y: auto; }

/* 筛选条 */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
           padding: var(--space-3) 18px 0; flex-shrink: 0; }
.filters .sepdot { color: var(--c-neutral-200); }

/* 列表页通用：顶部一条 KPI + 一条筛选 + 主体 */
.listhead { padding: 14px 18px 0; flex-shrink: 0; }
.listbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }

/* 元信息行里的一格 */
.mcell { display: inline-flex; align-items: center; gap: 3px; }
.mcell.muted { color: var(--c-neutral-500); }
.card .rule { margin-left: var(--space-1); }

/* 加载条：不用骨架屏 */
.loading { padding: var(--space-4); color: var(--c-neutral-500); }

/* 空状态里的提示清单 */
.hintlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
            gap: var(--space-1); font-size: var(--size-base); color: var(--c-neutral-600); }

/* 图表 */
.chart { display: block; }
.spark { flex-shrink: 0; }
.stackbar { display: flex; border-radius: 3px; overflow: hidden; background: var(--c-neutral-100); }
.stackbar i { display: block; height: 100%; }
.chartwrap { border: 1px solid var(--c-neutral-100); border-radius: var(--radius-10);
             padding: var(--space-3); background: var(--c-neutral-0); }
.chartwrap > header { display: flex; align-items: center; gap: var(--space-2);
                      margin-bottom: var(--space-2); font-size: var(--size-sm);
                      color: var(--c-neutral-600); }
/* 迷你图旁边永远要有数字（红线⑦）—— 这条 CSS 只是给那个数字定位，
   真正保证它存在的是调用方，selfcheck 管不到，写代码时自己盯。 */
.sparkrow { display: inline-flex; align-items: center; gap: var(--space-2); }

/* 五列看板（新品孵化） */
.board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr));
         gap: var(--space-3); align-items: start; }
.board > section { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.board > section > header { display: flex; align-items: baseline; gap: var(--space-2);
                            padding-bottom: var(--space-2);
                            border-bottom: 1px solid var(--c-neutral-100); }
.board .colname { font-size: var(--size-base); font-weight: 500; }
.board .colnum { font-family: var(--font-mono); font-size: var(--size-sm); color: var(--c-neutral-500); }
@media (max-width: 1180px) { .board { grid-template-columns: repeat(2, minmax(180px, 1fr)); } }

/* 详情页两栏 */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); }
@media (max-width: 1080px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.detail .side { display: flex; flex-direction: column; gap: var(--space-3); }

/* 定义列表：详情页的字段一栏 */
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr);
      gap: var(--space-2) var(--space-3); font-size: var(--size-base); align-items: baseline; }
.dl dt { color: var(--c-neutral-500); }
.dl dd { margin: 0; color: var(--c-neutral-900); min-width: 0; }

/* 商品主图：接口不代理图片，直接指平台原图。必须 no-referrer。 */
.thumb { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover;
         background: var(--c-neutral-50); border: 1px solid var(--c-neutral-100); flex-shrink: 0; }
.thumb.big { width: 132px; height: 132px; }
/* 没有主图时画虚线占位而**不是斜纹** —— 斜纹是「未抓到」专属，而主图地址是取到了的。
   ⛔ **不许加第三种质地**（权威处「质地只有两种，永远不加第三种」，设计线 2026-09-05 裁）：
   我原先给加载失败加过一条 `.failed` 实线，已删。两态共用这一种质地，**区分交给措辞**。 */
.thumb.none { border-style: dashed; display: flex; align-items: center; justify-content: center;
              text-align: center; line-height: var(--leading-tight);
              color: var(--c-neutral-400); font-size: var(--size-xs); }

/* 闸门屏（登录 / 同意 / 改密 / 首启）：整屏，不套外壳 */
.gate { min-height: 100%; display: flex; align-items: center; justify-content: center;
        padding: var(--space-6) var(--space-4); background: var(--c-neutral-25); }
.gate > .box { width: 100%; max-width: 460px; background: var(--c-neutral-0);
               border: 1px solid var(--c-neutral-100); border-radius: var(--radius-lg);
               padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.gate > .box.wide { max-width: 780px; }
.gate .mark { padding: 0 0 var(--space-2); }
.gate .field + .field { margin-top: var(--space-3); }
/* 同意页要能滚，但两个勾选和「继续」必须一直看得见 —— 否则用户会以为读完才出现。 */
.gate .scroll { max-height: 46vh; overflow-y: auto; border: 1px solid var(--c-neutral-100);
                border-radius: var(--radius-md); padding: var(--space-3);
                font-size: var(--size-base); line-height: var(--leading-snug);
                color: var(--c-neutral-600); }
.gate .consentrow { display: flex; gap: var(--space-2); align-items: flex-start;
                    font-size: var(--size-base); line-height: var(--leading-snug); }

/* 管理端 */
.adminbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
            padding: var(--space-3) 18px; border-bottom: 1px solid var(--c-neutral-100);
            font-size: var(--size-base); color: var(--c-neutral-600); flex-shrink: 0; }
.adminbar b { font-family: var(--font-mono); color: var(--c-neutral-900); }

/* 四大数 */
.headline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 980px) { .headline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.headline > div { border: 1px solid var(--c-neutral-100); border-radius: var(--radius-10);
                  padding: var(--space-3) var(--space-4); }
.headline .l { font-size: var(--size-11); color: var(--c-neutral-500); }
.headline .v { font-size: var(--size-3xl); font-weight: 600; font-family: var(--font-mono);
               font-variant-numeric: tabular-nums; line-height: var(--leading-tight);
               margin: 4px 0; }
.headline .range { font-size: var(--size-sm); color: var(--c-neutral-600); }
.headline.hit .v, .headline > div.hit .v { color: var(--c-severity-high); }

/* 密度：设置页可切。紧凑只压行高与内距，不砍字段。 */
:root[data-density="compact"] .card { padding: 8px 11px; }
:root[data-density="compact"] table.t th,
:root[data-density="compact"] table.t td { padding: 5px var(--space-2); }
:root[data-density="compact"] .nav { height: 30px; }