/* 看台的外围层：主题切换、活动明细展开、账号与权限页。
   页面主体组件（页签、创意墙、商品格、详情、时间线、弹层）在 组件.css，
   配色变量和排版底座在 样式.css。拆三份是因为单文件 400 行的上限。 */

/* ================= 主题切换 ================= */

.主题切 {
  display: flex; gap: 2px; padding: 3px;
  background: var(--墨浅); border: 1px solid var(--线); border-radius: 8px;
}
.主题钮 {
  width: 30px; height: 26px; padding: 0;
  font-size: 13px; line-height: 1; cursor: pointer;
  color: var(--字次); background: transparent; border: 0; border-radius: 5px;
  transition: background .15s ease, color .15s ease;
}
.主题钮:hover { color: var(--字); }
.主题钮.选中 { background: var(--琥珀); color: var(--琥珀底字); }

/* ================= 活动明细展开 ================= */

.活动行 { cursor: pointer; }
.活动行:hover td { background: var(--高亮底); }
.活动行.展开 td { background: var(--高亮底); }
.活动行 td:first-child::before {
  content: "▸ "; color: var(--字弱); font-size: 10px;
}
.活动行.展开 td:first-child::before { content: "▾ "; }
.报名行 td { padding: 0 !important; background: var(--凹); }
.报名表 { padding: 10px 16px 12px 34px; display: flex; flex-direction: column; gap: 1px; }
.报名条 {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 150px 220px;
  gap: 12px; align-items: center;
  padding: 6px 0; font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--线) 55%, transparent);
}
.报名条:last-child { border-bottom: 0; }
.报名店 { color: var(--字次); }
.报名期 { color: var(--字弱); font-family: var(--等宽); font-size: 11px; text-align: right; }
@media (max-width: 900px) {
  .报名条 { grid-template-columns: 58px minmax(0, 1fr); }
  .报名店, .报名期 { display: none; }
}

/* ================= 账号与权限 ================= */

.登录卡 input + input { margin-top: 10px; }
.登录切 {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--线);
  color: var(--字弱); font-size: 12.5px; text-align: center;
}
.登录切 button {
  width: auto; margin: 0 0 0 4px; padding: 0; display: inline;
  color: var(--琥珀字); background: transparent; border: 0;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.登录错.好消息 { color: var(--绿); }

.当前用户 {
  padding: 5px 11px; border-radius: 6px;
  color: var(--字次); background: var(--墨浅); border: 1px solid var(--线);
  font-size: 12px; white-space: nowrap;
}

/* 没开通的板块直接 hidden，不留占位；这里只管管理页签靠右 */
.页签[hidden] { display: none; }
.管理页签 { margin-left: auto; }

.无权提示 { display: grid; place-items: center; padding: 90px 20px; }
.无权卡 {
  max-width: 460px; padding: 40px 36px; text-align: center;
  background: var(--卡面); border: 1px solid var(--线); border-radius: 16px;
}
.无权图 { font-size: 40px; line-height: 1; margin-bottom: 18px; }
.无权卡 h2 { font-size: 18px; margin-bottom: 12px; }
.无权卡 p { margin: 0; color: var(--字次); font-size: 13.5px; line-height: 1.7; }
.无权次说明 { margin-top: 12px !important; color: var(--字弱) !important; font-size: 12px !important; }

.账号表 .管理员行 td { background: var(--高亮底); }
.权限勾 { display: inline-flex; cursor: pointer; }
.权限勾 input { display: none; }
.权限勾 span {
  width: 19px; height: 19px; border-radius: 5px;
  border: 1.5px solid var(--线亮); background: var(--凹);
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.权限勾 span::after {
  content: "✓"; color: var(--琥珀底字); font-size: 12px; font-weight: 800; opacity: 0;
  transition: opacity .12s ease;
}
.权限勾 input:checked + span { background: var(--绿); border-color: var(--绿); }
.权限勾 input:checked + span::after { opacity: 1; }
.权限勾 input:disabled + span { opacity: .4; cursor: not-allowed; }

.备注框 {
  width: 100%; min-width: 90px; padding: 5px 8px;
  font-size: 12px; font-family: var(--正文);
  color: var(--字); background: var(--凹);
  border: 1px solid var(--线); border-radius: 6px;
}

/* 时间线和操作条列上的状态徽标。颜色和全店总览那一页的档色一致：
   生效绿、审核琥珀、驳回红、失效不上色、状态不明弱化 */
.签.好 { color: var(--绿); border-color: color-mix(in srgb, var(--绿) 42%, transparent); }
.签.重 { color: var(--琥珀字); border-color: color-mix(in srgb, var(--琥珀) 42%, transparent); }
.签.差 { color: var(--红); border-color: color-mix(in srgb, var(--红) 42%, transparent); }
.签.未采 { color: var(--字弱); }

/* ================= 折线图悬停浮层 ================= */

/* 图上任意位置都能读数，光标给个十字提示这件事 */
.趋势容器 { cursor: crosshair; }

/* pointer-events:none 是必须的：浮层跟着鼠标走，能接事件的话
   鼠标一移上去就等于离开了图，浮层会开始疯狂闪 */
.图提示 {
  position: fixed; z-index: 80; pointer-events: none;
  min-width: 190px; max-width: 340px; padding: 9px 11px;
  background: var(--墨面); border: 1px solid var(--线亮); border-radius: 9px;
  box-shadow: var(--浮影); font-size: 12px; line-height: 1.5;
}
.提示日 {
  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--线);
  color: var(--字); font-family: var(--等宽); font-size: 12px;
}
.提示行 { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.提示行 + .提示行 { margin-top: 3px; }
.提示名 { display: flex; align-items: center; gap: 6px; color: var(--字次); }
.提示名 i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.提示值 { color: var(--字); font-family: var(--等宽); white-space: nowrap; }
.提示值.未采 { color: var(--字弱); }
.提示操作 { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--线); }
.提示操作头 { margin-bottom: 3px; color: var(--琥珀字); font-size: 11px; }
.提示操作行 { color: var(--字次); font-size: 11.5px; }
.提示操作行 + .提示操作行 { margin-top: 2px; }
.提示档 { font-size: 10.5px; color: var(--字弱); }
.提示档.好 { color: var(--绿); }
.提示档.重 { color: var(--琥珀字); }
.提示档.差 { color: var(--红); }
.提示档.未采 { color: var(--字弱); }
.备注框:disabled { opacity: .45; }
.操作列 { white-space: nowrap; }
.小钮 {
  padding: 4px 10px; margin-left: 5px;
  font-size: 11.5px; font-family: var(--正文);
  color: var(--字次); background: var(--墨面);
  border: 1px solid var(--线); border-radius: 5px; cursor: pointer;
}
.小钮:hover { color: var(--字); border-color: var(--线亮); }
.小钮.危:hover { color: var(--红); border-color: var(--红); }
.淡字 { color: var(--字弱); font-size: 12px; }