/*
 * advanced-c — spec 06 §5.1 (A-area 36/72 grid) and §5.7–§5.12 (C-area modules:
 * 热度斜率, 二阶关联, 连续形态, 时间热力图, 均衡度, 房间对比).
 * Values copied verbatim from the original stylesheet, in the original source order.
 * Shared module components (.analytics-v2-number, .analytics-v2-toolbar-line, .analytics-v2-table,
 * .analytics-v2-insight, .analytics-v2-periods, .analytics-v2-empty, mobile frame rules) live in
 * advanced.css (frame owner).
 */

/* ------------------------------------------------------------------ */
/* §5.1 36位数据 / 72位数据                                             */
/* ------------------------------------------------------------------ */
.analytics-v2-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--v2-grid-columns), minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #d7dbe4;
  border-left: 1px solid #d7dbe4;
  background: #101a29;
  overscroll-behavior: contain;
}

.analytics-v2-grid .history-cell,
.analytics-v2-grid-pad {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.analytics-v2-grid.is-row-fitted .history-cell,
.analytics-v2-grid.is-row-fitted .analytics-v2-grid-pad {
  height: var(--v2-grid-row-height);
  aspect-ratio: auto;
}

.analytics-v2-grid.is-row-fitted {
  padding-bottom: 2px;
}

.analytics-v2-grid .history-cell {
  font-size: clamp(7px, calc((100vw - min(100vw, 56.25vh) - 32px) / var(--v2-grid-columns) * .72), 14px);
  font-weight: 390;
}

.analytics-v2-grid .history-cell.num-9 {
  font-size: clamp(7px, calc((100vw - min(100vw, 56.25vh) - 32px) / var(--v2-grid-columns) * .72), 14px);
}

.analytics-v2-grid-pad {
  visibility: hidden;
}

/* ------------------------------------------------------------------ */
/* §5.7 热度斜率                                                        */
/* ------------------------------------------------------------------ */
.analytics-v2-slope-meter {
  position: relative;
  min-width: 116px;
  height: 16px;
  overflow: hidden;
  border-radius: 3px;
  background: #ffffff0e;
}

.analytics-v2-slope-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  opacity: .72;
}

.analytics-v2-slope-meter.is-up span {
  background: linear-gradient(90deg, #ff5d5d6b, #ff6b6b);
}

.analytics-v2-slope-meter.is-down span {
  background: linear-gradient(90deg, #47a7f16b, #5cbcff);
}

.analytics-v2-slope-meter b {
  position: relative;
  z-index: 1;
  display: block;
  color: #f3f8ff;
  font-size: 9px;
  line-height: 16px;
}

@media (min-width: 768px) {
  .analytics-v2-module-c .analytics-v2-slope-table th,
  .analytics-v2-module-c .analytics-v2-slope-table td {
    height: 24px;
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

.analytics-v2-trend-state {
  display: inline-flex;
  min-width: 45px;
  min-height: 21px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.analytics-v2-trend-state.state-升温 {
  border-color: #ff646461;
  background: #c7353c33;
  color: #ff8f94;
}

.analytics-v2-trend-state.state-降温 {
  border-color: #53b1f461;
  background: #2771aa33;
  color: #75c8ff;
}

.analytics-v2-trend-state.state-横盘 {
  border-color: #f5d88e4d;
  background: #76531c2e;
  color: #d9c38e;
}

/* ------------------------------------------------------------------ */
/* §5.8 二阶关联                                                        */
/* ------------------------------------------------------------------ */
.analytics-v2-pair-toolbar {
  justify-content: flex-start;
}

.analytics-v2-pair-toolbar > small {
  margin-left: auto;
}

.analytics-v2-pair-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.analytics-v2-pair-source b {
  color: #f5d88e;
  font-size: 17px;
}

.analytics-v2-pair-source .analytics-v2-number {
  width: 26px;
  height: 26px;
  min-height: 26px;
  font-size: 12px;
}

.analytics-v2-pair-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px 10px 0;
}

.analytics-v2-pair-summary article {
  min-width: 0;
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid rgba(116, 152, 194, .2);
  border-radius: 7px;
  background: #0d1d2fc7;
  text-align: center;
}

.analytics-v2-pair-summary article.is-highlight {
  border-color: #f5d88e80;
  background: #6f4e1d33;
}

.analytics-v2-pair-summary article > span,
.analytics-v2-pair-summary article > small {
  color: #91a9c5;
  font-size: 9px;
  font-weight: 800;
}

.analytics-v2-pair-summary article > strong {
  color: #f2f7ff;
  font-size: 21px;
  line-height: 1;
}

.analytics-v2-pair-summary article > strong small {
  margin-left: 2px;
  color: #91a9c5;
  font-size: 9px;
}

.analytics-v2-pair-summary article.is-highlight > div,
.analytics-v2-pair-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.analytics-v2-pair-summary article.is-highlight > div > strong {
  color: #ffe29a;
  font-size: 17px;
}

.analytics-v2-pair-top > b {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.analytics-v2-pair-top > b small {
  color: #eaf4ff;
  font-size: 8px;
}

.analytics-v2-pair-help {
  margin: 7px 10px 0;
  padding: 6px 9px;
  border-left: 2px solid rgba(245, 216, 142, .64);
  background: #f5d88e0e;
  color: #aebed1;
  font-size: 10px;
  line-height: 1.35;
}

.analytics-v2-pair-help b {
  color: #ffe29a;
}

.analytics-v2-pair-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr);
  gap: 8px;
  padding: 7px 10px 0;
}

.analytics-v2-pair-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
}

.analytics-v2-pair-grid article {
  min-width: 0;
  min-height: 45px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(116, 152, 194, .18);
  border-radius: 6px;
  background: #0d1d2fc7;
}

.analytics-v2-pair-grid article.is-strongest {
  border-color: #f5d88e8c;
  box-shadow: inset 0 0 18px #f5d88e14;
}

.analytics-v2-pair-grid article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.analytics-v2-pair-grid article > div > span {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff12;
}

.analytics-v2-pair-grid article i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4e9fe4, #70d79c);
}

.analytics-v2-pair-grid article b {
  color: #edf6ff;
  font-size: 11px;
}

.analytics-v2-pair-grid article small {
  color: #8295ae;
  font-size: 8px;
  white-space: nowrap;
}

.analytics-v2-pair-grid article em {
  font-style: normal;
  font-weight: 850;
}

.analytics-v2-pair-grid article em.is-positive {
  color: #73e39b;
}

.analytics-v2-pair-grid article em.is-negative {
  color: #65c7ff;
}

.analytics-v2-pair-recent {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(116, 152, 194, .18);
  border-radius: 6px;
  background: #0a1828b8;
}

.analytics-v2-pair-recent > strong {
  display: block;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: #f0d89d;
  font-size: 9px;
}

.analytics-v2-pair-recent table {
  width: 100%;
  border-collapse: collapse;
  color: #dce9f8;
  font-size: 8px;
}

.analytics-v2-pair-recent th,
.analytics-v2-pair-recent td {
  height: 21px;
  padding: 1px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  text-align: center;
  white-space: nowrap;
}

.analytics-v2-pair-recent th {
  color: #8fa5be;
}

.analytics-v2-pair-recent .analytics-v2-number {
  width: 17px;
  height: 17px;
  min-height: 17px;
  font-size: 9px;
}

.analytics-v2-pair-recent > p {
  margin: 0;
  padding: 20px 10px;
  color: #8295ae;
  font-size: 9px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* §5.9 连续形态 (+ shared card styles of §5.11 metric grid)            */
/* ------------------------------------------------------------------ */
.analytics-v2-sequence-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .9vw, 16px);
  padding: 12px 10px 8px;
  overflow: hidden;
}

.analytics-v2-sequence-row .analytics-v2-number {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 24px;
}

.analytics-v2-pattern-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 12px;
}

.analytics-v2-pattern-grid article,
.analytics-v2-metric-grid article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(116, 152, 194, .2);
  border-radius: 7px;
  background: #0d1d2fc7;
}

.analytics-v2-pattern-grid article.is-active {
  border-color: #f5d88e99;
  background: #6f4e1d3d;
  box-shadow: 0 0 18px #f5d88e17;
}

.analytics-v2-pattern-grid span,
.analytics-v2-metric-grid span {
  color: #9fb0c8;
  font-size: 10px;
  font-weight: 800;
}

.analytics-v2-pattern-grid strong,
.analytics-v2-metric-grid strong {
  color: #f2f7ff;
  font-size: 20px;
  line-height: 1.15;
}

.analytics-v2-pattern-grid small,
.analytics-v2-metric-grid small {
  color: #8295ae;
  font-size: 9px;
}

.analytics-v2-pattern-grid b {
  color: #f2d28b;
  font-size: 9px;
}

/* ------------------------------------------------------------------ */
/* §5.10 时间热力图                                                     */
/* ------------------------------------------------------------------ */
.analytics-v2-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
}

.analytics-v2-mode-switch button {
  min-height: 25px;
  padding: 0 10px;
  border-color: #7498c242;
  border-radius: 4px;
  background: #0e1f33b8;
  color: #9fb0c8;
  font-size: 10px;
  font-weight: 800;
}

.analytics-v2-mode-switch button.is-active {
  border-color: #f5d88eb3;
  background: #76531c70;
  color: #ffe39a;
}

.analytics-v2-heatmap-wrap {
  width: 100%;
  overflow: auto;
}

.analytics-v2-heatmap {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  color: #dce9f8;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.analytics-v2-heatmap th,
.analytics-v2-heatmap td {
  height: 27px;
  padding: 1px 2px;
  border: 1px solid rgba(123, 151, 184, .12);
  text-align: center;
}

.analytics-v2-heatmap thead th,
.analytics-v2-heatmap tbody th {
  background: #0f1c2e;
  color: #d8bc7b;
  font-weight: 850;
}

.analytics-v2-heatmap thead th {
  font-size: 10px;
}

.analytics-v2-heatmap tbody th {
  width: 42px;
}

.analytics-v2-heatmap tbody th .analytics-v2-number {
  width: 21px;
  height: 21px;
  min-height: 21px;
  font-size: 11px;
}

.analytics-v2-heatmap tbody td {
  background: rgba(53, 142, 213, calc(.06 + var(--heat) * .58));
  color: rgba(239, 247, 255, calc(.55 + var(--heat) * .45));
  font-size: 9px;
  font-weight: 750;
}

/* ------------------------------------------------------------------ */
/* §5.11 均衡度                                                         */
/* ------------------------------------------------------------------ */
.analytics-v2-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.analytics-v2-deviation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px 10px;
}

.analytics-v2-deviation-grid article {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 4px 7px;
  border: 1px solid rgba(116, 152, 194, .16);
  border-radius: 7px;
  background: #0a1828b8;
}

.analytics-v2-deviation-grid article header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.analytics-v2-deviation-grid article header .analytics-v2-number {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 24px;
  font-size: 12px;
}

.analytics-v2-deviation-grid article header > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.analytics-v2-deviation-grid article header b {
  color: #f0f6ff;
  font-size: 11px;
}

.analytics-v2-deviation-grid article header small {
  color: #8295ae;
  font-size: 9px;
}

.analytics-v2-deviation-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.analytics-v2-deviation-values span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px;
  color: #7f94ad;
  font-size: 8px;
}

.analytics-v2-deviation-values strong {
  color: #edf6ff;
  font-size: 10px;
}

.analytics-v2-deviation-values strong.is-positive {
  color: #ff8689;
}

.analytics-v2-deviation-values strong.is-negative {
  color: #69c8ff;
}

.analytics-v2-deviation-meter {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff12;
}

.analytics-v2-deviation-meter i {
  display: block;
  height: 100%;
}

.analytics-v2-deviation-meter i.is-positive {
  background: linear-gradient(90deg, #ff6f7273, #ff6f72);
}

.analytics-v2-deviation-meter i.is-negative {
  background: linear-gradient(90deg, #61baff73, #61baff);
}

@media (min-width: 768px) {
  .analytics-v2-module-c .analytics-v2-balance-metrics {
    gap: 6px;
    padding: 7px 10px;
  }

  .analytics-v2-module-c .analytics-v2-balance-metrics article {
    gap: 2px;
    padding: 6px 9px;
  }

  .analytics-v2-module-c .analytics-v2-balance-metrics strong {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------------ */
/* §5.12 房间对比                                                       */
/* ------------------------------------------------------------------ */
.analytics-v2-room-table tr.is-current-room td {
  background: #f5d88e13;
}

.analytics-v2-room-table td:nth-child(2) {
  text-align: left;
}

.analytics-v2-room-table td:nth-child(2) b,
.analytics-v2-room-table td:nth-child(2) small {
  display: block;
}

.analytics-v2-room-table td:nth-child(2) small {
  margin-top: 2px;
  color: #8295ae;
  font-size: 8px;
}

.analytics-v2-room-hot-numbers {
  min-width: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.analytics-v2-room-hot-numbers .analytics-v2-number {
  flex: 0 0 auto;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease, box-shadow .16s ease;
}

.analytics-v2-room-hot-numbers .is-room-candidate {
  opacity: .5;
  filter: saturate(.72);
  transform: scale(.88);
}

.analytics-v2-room-hot-numbers .is-room-hot {
  width: 26px;
  height: 26px;
  min-height: 26px;
  opacity: 1;
  filter: saturate(1.16);
  font-size: 13px;
  font-weight: 950;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px #ffefb180, 0 0 13px #f5d88ed1;
}

/* ------------------------------------------------------------------ */
/* Phone overrides (part of the original max-width:767px block)       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /*
   * Cascade fix-up: in the original single stylesheet the frame's
   * `.analytics-v2-mobile-body>*{border-left:1px solid rgba(245,216,142,.18)}` (phone block) comes AFTER
   * `.analytics-v2-grid{border-left:1px solid #d7dbe4}` and `.analytics-v2-pair-help{border-left:2px …}`,
   * so inside the phone body both get the faint gold 1px left border. This file loads after
   * advanced.css, so the same result needs an explicit rule here.
   */
  .analytics-v2-mobile-body > .analytics-v2-grid,
  .analytics-v2-mobile-body > .analytics-v2-pair-help {
    border-left: 1px solid rgba(245, 216, 142, .18);
  }

  .analytics-v2-slope-table {
    min-width: 640px;
  }

  .analytics-v2-pair-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 0 0;
  }

  .analytics-v2-pair-help {
    margin-right: 0;
    margin-left: 0;
  }

  .analytics-v2-pair-detail {
    grid-template-columns: 1fr;
    padding: 7px 0 0;
  }

  .analytics-v2-pair-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
  }

  .analytics-v2-pair-grid article {
    min-height: 58px;
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 5px;
  }

  .analytics-v2-pair-grid article b {
    font-size: 9px;
  }

  .analytics-v2-pair-grid article small {
    font-size: 7px;
  }

  .analytics-v2-pair-recent > strong,
  .analytics-v2-pair-recent table {
    font-size: 9px;
  }

  .analytics-v2-sequence-row {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .analytics-v2-pattern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .analytics-v2-pattern-grid article:last-child {
    grid-column: 1 / -1;
  }

  .analytics-v2-heatmap {
    min-width: 1050px;
  }

  .analytics-v2-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .analytics-v2-deviation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 8px 8px;
  }

  .analytics-v2-deviation-grid article {
    padding: 8px;
  }

  .analytics-v2-room-table {
    min-width: 920px;
  }
}
