/* 看台的组件层：页签、创意墙、商品格、单品详情、时间线、弹层。
   底层的配色变量、排版、表格和面板在 样式.css 里，这里只放页面组件。
   拆开是因为合在一起超过了单文件 400 行的上限。 */

/* ================= 页签与页 ================= */

.页签条 {
  display: flex; gap: 4px; padding: 0 clamp(18px, 3vw, 38px);
  border-bottom: 1px solid var(--线); background: var(--墨);
}
.页签 {
  position: relative; padding: 13px 18px 12px;
  font-size: 14px; font-family: var(--正文); font-weight: 550;
  color: var(--字次); background: transparent; border: 0; cursor: pointer;
  transition: color .15s ease;
}
.页签:hover { color: var(--字); }
.页签.选中 { color: var(--琥珀字); }
.页签.选中::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--琥珀); border-radius: 2px 2px 0 0;
}

.页 { display: flex; flex-direction: column; gap: 24px; }
.页头 {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.页头 h2 { font-size: 18px; letter-spacing: -.01em; }
.页头注 { margin: 5px 0 0; color: var(--字次); font-size: 12.5px; }
.筛选注 { color: var(--字弱); font-size: 11.5px; }

.工具组 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.分段 { display: flex; gap: 2px; padding: 3px; background: var(--墨浅); border: 1px solid var(--线); border-radius: 9px; }
.段 {
  padding: 6px 12px; font-size: 12.5px; font-family: var(--正文);
  color: var(--字次); background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.段:hover { color: var(--字); }
.段.选中 { background: var(--琥珀); color: var(--琥珀底字); font-weight: 650; }
#创意排序, #商品搜索 {
  padding: 7px 11px; font-size: 13px; font-family: var(--正文);
  color: var(--字); background: var(--墨浅);
  border: 1px solid var(--线); border-radius: 7px; color-scheme: inherit;
}
#商品搜索 { min-width: 230px; }
#创意排序 { cursor: pointer; }

/* ================= 创意墙 ================= */

.创意墙 {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.创意墙.密 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 16px 18px 18px; }

.创意卡 {
  display: flex; flex-direction: column;
  background: var(--墨浅); border: 1px solid var(--线); border-radius: var(--圆);
  overflow: hidden; transition: border-color .15s ease, transform .15s ease;
}
.创意卡:hover { border-color: var(--线亮); transform: translateY(-2px); }
/* 没指标的整卡压暗：一眼分出「跑出数据的」和「平台没给数的」，
   而不是让人挨个读每张卡的小字 */
.创意卡.无数据 { opacity: .62; }
.创意卡.无数据:hover { opacity: 1; }

.创意图框 { position: relative; aspect-ratio: 1 / 1; background: var(--凹); }
.创意图框 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.缺图 {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--字弱); font-size: 12px;
}
.名次 {
  position: absolute; left: 8px; top: 8px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--琥珀); color: var(--琥珀底字);
  font-family: var(--等宽); font-size: 12px; font-weight: 700; border-radius: 5px;
}
.驳回角 {
  position: absolute; right: 8px; top: 8px;
  padding: 3px 8px; font-size: 11px; font-family: var(--正文); font-weight: 600;
  color: #fff; background: color-mix(in srgb, var(--红) 92%, transparent);
  border: 0; border-radius: 5px; cursor: pointer;
}
.驳回角:hover { background: var(--红); }

.创意身 { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.创意名 {
  font-size: 13px; line-height: 1.5; color: var(--字); font-weight: 550;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.创意店 { color: var(--字弱); font-size: 11px; letter-spacing: .01em; }

/* 次要指标用等宽网格对齐，三列一行。
   原来是 flex 自由换行，每张卡的数字位置都不一样，
   一屏几十张卡看过去对不上列，只能一个个读。 */
.创意指标 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px;
  font-size: 10px; color: var(--字弱);
}
.创意指标 span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.创意指标 b {
  font-family: var(--等宽); font-size: 12.5px; font-weight: 600; color: var(--字次);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.创意指标.强 { padding-top: 6px; border-top: 1px solid var(--线); }
.创意指标.强 b { color: var(--琥珀字); font-size: 13px; }
.创意无数据 {
  padding: 8px 0; color: var(--字弱); font-size: 11.5px; line-height: 1.5;
}
.看商品钮 {
  margin-top: auto; padding: 6px 0; font-size: 11.5px; font-family: var(--正文);
  color: var(--青); background: transparent; border: 0;
  border-top: 1px solid var(--线); text-align: left; cursor: pointer;
  transition: color .15s ease;
}
.看商品钮:hover { color: var(--琥珀字); }

/* ================= 商品格 ================= */

.商品格 {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.商品卡 {
  display: flex; gap: 12px; padding: 12px;
  background: var(--墨浅); border: 1px solid var(--线); border-radius: var(--圆);
  cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
.商品卡:hover { border-color: var(--琥珀); transform: translateY(-2px); }
.商品图框 {
  width: 78px; height: 78px; flex-shrink: 0;
  background: var(--凹); border-radius: 7px; overflow: hidden;
}
.商品图框 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.商品身 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.商品名 {
  font-size: 12.5px; line-height: 1.4; color: var(--字);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.商品店 { color: var(--字弱); font-size: 11px; }
.商品指标 { display: flex; gap: 12px; font-size: 10.5px; color: var(--字弱); }
.商品指标 span { display: flex; flex-direction: column; gap: 1px; }
.商品指标 b { font-family: var(--等宽); font-size: 12.5px; font-weight: 600; color: var(--字次); }
.商品指标 .好 b { color: var(--绿); }
.商品指标 .差 b { color: var(--红); }
.签组 { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.签 {
  padding: 2px 7px; font-size: 10.5px; border-radius: 4px;
  color: var(--字次); background: var(--墨面); border: 1px solid var(--线);
}
.签.亮 { color: var(--琥珀字); border-color: color-mix(in srgb, var(--琥珀) 46%, transparent); background: var(--高亮底); }
.签.淡 { color: var(--字弱); }

/* ================= 单品详情 ================= */

.返回钮 {
  align-self: flex-start; padding: 7px 14px;
  font-size: 13px; font-family: var(--正文);
  color: var(--字次); background: var(--墨浅);
  border: 1px solid var(--线); border-radius: 7px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.返回钮:hover { color: var(--琥珀字); border-color: var(--琥珀); }

.详情头 {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px; background: var(--墨浅);
  border: 1px solid var(--线); border-radius: var(--圆);
}
.详情主图 {
  width: 112px; height: 112px; flex-shrink: 0;
  background: var(--凹); border-radius: 8px; overflow: hidden;
}
.详情主图 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.详情文 { flex: 1; min-width: 0; }
.详情文 h2 { font-size: 16px; line-height: 1.5; }
.详情店 { margin: 6px 0 14px; color: var(--字弱); font-size: 12px; font-family: var(--等宽); }
.小卡组 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.小卡 {
  padding: 9px 11px; background: var(--墨面);
  border: 1px solid var(--线); border-radius: 7px;
  display: flex; flex-direction: column; gap: 4px;
}
.小卡名 { color: var(--字弱); font-size: 11px; }
.小卡值 { font-family: var(--等宽); font-size: 15px; font-weight: 600; color: var(--琥珀字); }
.小卡值.未采 { font-size: 12px; font-weight: 400; color: var(--字弱); font-family: var(--正文); }

.图注 { margin: 0; padding: 0 18px 14px; color: var(--字弱); font-size: 11.5px; }

/* ================= 时间线 ================= */

.时间线框 { max-height: 520px; overflow-y: auto; padding: 14px 18px 18px; }
.线条 { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.线条::before {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 0;
  width: 1px; background: var(--线);
}
.线条:last-child { padding-bottom: 0; }
.线条:last-child::before { display: none; }
.线点 {
  width: 9px; height: 9px; margin-top: 4px; flex-shrink: 0;
  border-radius: 50%; background: var(--线亮); position: relative; z-index: 1;
}
.线点.亮 { background: var(--琥珀); box-shadow: 0 0 0 3px var(--高亮底); }
.线点.淡 { background: var(--字弱); }
.线身 { flex: 1; min-width: 0; }
.线头 { display: flex; align-items: baseline; gap: 9px; }
.线类 { font-size: 11px; color: var(--字次); }
.线类.亮 { color: var(--琥珀字); font-weight: 600; }
.线时 { color: var(--字弱); font-size: 11px; font-family: var(--等宽); }
.线文 { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--字); }
.线人 { margin-top: 3px; color: var(--字弱); font-size: 11px; }

/* ================= 弹层 ================= */

.弹层 {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: var(--遮罩);
}
.弹卡 {
  width: min(620px, 100%); max-height: 78vh; display: flex; flex-direction: column;
  background: var(--墨面); border: 1px solid var(--线亮); border-radius: 12px;
  box-shadow: 0 30px 80px var(--浮影影);
}
.弹头 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--线);
}
.弹头 h3 { margin: 0; font-size: 15px; }
.弹头 button {
  width: 28px; height: 28px; font-size: 19px; line-height: 1;
  color: var(--字次); background: transparent; border: 0; cursor: pointer; border-radius: 6px;
}
.弹头 button:hover { color: var(--字); background: var(--墨浅); }
.弹身 {
  padding: 16px 18px 20px; overflow-y: auto;
  color: var(--字次); font-size: 13px; line-height: 1.75; white-space: pre-wrap;
}

/* ================= 排序与升降 ================= */

.升降钮 {
  padding: 7px 13px; font-size: 12.5px; font-family: var(--正文);
  color: var(--字次); background: var(--墨浅);
  border: 1px solid var(--线); border-radius: 7px; cursor: pointer;
  white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.升降钮:hover { color: var(--琥珀字); border-color: var(--琥珀); }

.排序牌 {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 5px;
  background: color-mix(in srgb, var(--墨) 88%, transparent); color: var(--琥珀字);
  font-family: var(--等宽); font-size: 11px; font-weight: 600;
  backdrop-filter: blur(4px);
}
.排序值 { color: var(--琥珀字); font-family: var(--等宽); font-size: 11px; margin-left: 6px; }
.名次.小 { min-width: 18px; height: 18px; font-size: 10.5px; left: 6px; top: 6px; }

/* 创意的主指标：点击率和转化率放大，它们才说明图本身行不行。
   单独给一块底色框起来，和下面的次要指标分开——
   挤在一堆小字里的话，最该看的两个数和「曝光 1.4 万」一样不起眼。 */
.主指标 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 9px 10px; margin: 1px 0 2px;
  background: var(--凹); border-radius: 8px;
}
.主指标项 { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.主指标项 b {
  font-family: var(--等宽); font-size: 19px; font-weight: 680;
  line-height: 1.05; color: var(--青); letter-spacing: -.01em;
}
.主指标项 span { color: var(--字弱); font-size: 10.5px; letter-spacing: .03em; }

/* ================= 仪表盘 ================= */

.仪表墙 {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.仪表卡 {
  padding: 15px 16px 14px; position: relative; overflow: hidden;
  background: var(--卡面);
  border: 1px solid var(--线); border-radius: var(--圆);
}
.仪表卡::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--卡色, var(--线亮));
}
.仪表名 { color: var(--字次); font-size: 12px; }
.仪表值 {
  margin-top: 8px; font-family: var(--等宽); font-size: 30px;
  font-weight: 650; line-height: 1; color: var(--卡色, var(--字));
}
.仪表注 { margin-top: 7px; color: var(--字弱); font-size: 11px; line-height: 1.45; }

.可点表 tbody tr { cursor: pointer; }
.可点表 tbody tr:hover td { background: var(--高亮底); }

/* ================= 指标勾选 ================= */

.指标勾选 {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 14px 18px 4px;
}
.勾项 {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; cursor: pointer;
  font-size: 12.5px; color: var(--字次);
  background: var(--墨面); border: 1px solid var(--线); border-radius: 7px;
  transition: color .15s ease, border-color .15s ease;
}
.勾项:hover { color: var(--字); }
.勾项 input { display: none; }
.勾色 {
  width: 11px; height: 3px; border-radius: 2px;
  background: var(--线亮); transition: background .15s ease;
}
.勾项.选中 { color: var(--字); border-color: var(--线色); }
.勾项.选中 .勾色 { background: var(--线色); }

.操作点 { cursor: help; }

.操作条列 {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 18px 16px; border: 1px solid var(--线); border-radius: 8px;
  overflow: hidden; max-height: 190px; overflow-y: auto;
}
.操作块 { display: flex; gap: 14px; padding: 9px 13px; background: var(--墨面); }
.操作块 + .操作块 { border-top: 1px solid var(--线); }
.操作日 {
  flex-shrink: 0; color: var(--琥珀字);
  font-family: var(--等宽); font-size: 11.5px; padding-top: 1px;
}
.操作文 { color: var(--字次); font-size: 12px; line-height: 1.65; min-width: 0; }

/* ================= 悬停预览与右键菜单 ================= */

.预览层 {
  position: fixed; z-index: 70; pointer-events: none;
  width: 340px; padding: 8px;
  background: var(--墨面); border: 1px solid var(--线亮); border-radius: 10px;
  box-shadow: var(--浮影);
}
.预览层 img {
  width: 100%; display: block; border-radius: 6px;
  background: var(--凹); max-height: 340px; object-fit: contain;
}
.预览注 {
  margin-top: 7px; color: var(--字次); font-size: 11.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.右键菜单 {
  position: fixed; z-index: 80; min-width: 168px; padding: 5px;
  background: var(--墨面); border: 1px solid var(--线亮); border-radius: 9px;
  box-shadow: 0 20px 50px var(--浮影影);
  display: flex; flex-direction: column;
}
.右键菜单 button {
  padding: 8px 12px; text-align: left;
  font-size: 12.5px; font-family: var(--正文);
  color: var(--字次); background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.右键菜单 button:hover { color: var(--字); background: var(--墨浅); }

.吐司 {
  position: fixed; z-index: 90; left: 50%; bottom: 34px; transform: translateX(-50%);
  padding: 11px 20px; border-radius: 9px;
  background: var(--琥珀); color: var(--琥珀底字);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--浮影);
}
.吐司.错 { background: var(--红); color: #fff; }

.弹卡.宽 { width: min(940px, 100%); }
.弹身.无留白 { padding: 0; }