/* Dedicated draw history surface. */
body[data-page="history"] {
  min-height: 100vh;
  background: #fff;
  color: #2a211b;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

body[data-page="history"] .history-app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  color: #fff;
}

body[data-page="history"] .history-app-header-inner {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  width: min(640px, 100%);
  min-height: 52px;
  margin: 0 auto;
  padding: 4px 10px;
  background: #d92f2f;
  box-shadow: 0 8px 24px rgb(101 31 24 / 18%);
}

body[data-page="history"] .history-app-header strong {
  overflow: hidden;
  font-size: clamp(1.05rem, 4vw, 1.38rem);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="history"] .history-back {
  display: inline-flex;
  color: #fff;
  text-decoration: none;
  touch-action: manipulation;
}

body[data-page="history"] .history-back span:first-child { line-height: 1; }
body[data-page="history"] .history-back:hover { background: rgb(255 255 255 / 20%); }
body[data-page="history"] .history-header-balance { width: 58px; }

body[data-page="history"] .history-page-shell {
  width: min(640px, 100%);
  min-height: calc(100vh - 52px);
  margin: 0 auto;
  background: #fffef6;
  box-shadow: 0 20px 48px rgb(82 60 31 / 10%);
}

body[data-page="history"] .history-filter-panel {
  overflow: hidden;
  border: 1px solid #e5dfc8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 20px rgb(91 67 30 / 7%);
}

body[data-page="history"] .history-filter-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 50px;
  border-bottom: 1px solid #ebe5cd;
}

body[data-page="history"] .history-filter-row:last-child { border-bottom: 0; }
body[data-page="history"] .history-filter-row > strong {
  display: grid;
  place-items: center;
  padding: 8px 5px;
  background: #fff9dc;
  color: #c72727;
  font-size: .82rem;
}

body[data-page="history"] .history-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
}

body[data-page="history"] .history-condition-chips {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
body[data-page="history"] .history-condition-chips .history-chip {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  padding: 0;
}
body[data-page="history"] .history-condition-group { display: none; flex-wrap: wrap; gap: 6px; }
body[data-page="history"][data-history-trend="sx"] [data-history-condition-group="sx"],
body[data-page="history"] [data-history-page][data-history-trend="sx"] [data-history-condition-group="sx"],
body[data-page="history"] [data-history-page][data-history-trend="wx"] [data-history-condition-group="wx"],
body[data-page="history"] [data-history-page][data-history-trend="tail"] [data-history-condition-group="tail"] { display: contents; }

body[data-page="history"] .history-chip {
  display: inline-flex;
  min-width: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid #dedbcf;
  border-radius: 9px;
  background: #fff;
  color: #332a23;
  font-size: .82rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 7px rgb(71 52 27 / 5%);
  touch-action: manipulation;
}

body[data-page="history"] .history-chip:hover { border-color: #d92f2f; color: #b42318; }
body[data-page="history"] .history-chip.is-active {
  border-color: #d92f2f;
  background: #d92f2f;
  color: #fff;
  box-shadow: 0 5px 12px rgb(176 35 35 / 18%);
}

body[data-page="history"] .history-log-card {
  margin-top: 10px;
  border: 1px solid #e5dfc8;
  border-radius: 12px;
  background: #fffef7;
  box-shadow: 0 8px 24px rgb(91 67 30 / 8%);
}

body[data-page="history"] .history-log-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
body[data-page="history"] .history-log-list { min-width: 344px; font-variant-numeric: tabular-nums; }
body[data-page="history"] .history-log-header,
body[data-page="history"] .history-log-row {
  display: grid;
  grid-template-columns: minmax(62px, 1.18fr) repeat(7, minmax(40px, 1fr));
}

body[data-page="history"] .history-log-header {
  min-height: 42px;
  border-bottom: 2px solid #d92f2f;
  background: #fff9dc;
}

body[data-page="history"] .history-log-heading {
  display: grid;
  place-items: center;
  padding: 7px 2px;
  border-right: 1px solid #e7dfbd;
  color: #3b3028;
  font-size: clamp(.67rem, 2.3vw, .78rem);
  font-weight: 850;
  white-space: nowrap;
}

body[data-page="history"] .history-log-heading:last-child { border-right: 0; }
body[data-page="history"] .history-special-heading,
body[data-page="history"] .history-ball-cell.is-special-cell { border-left: 2px solid #d92f2f; }
body[data-page="history"] .history-log-body { position: relative; }
body[data-page="history"] .history-log-row { min-height: 66px; border-bottom: 1px solid #e9e3cf; }
body[data-page="history"] .history-log-row:last-of-type { border-bottom: 0; }

body[data-page="history"] .history-issue-cell,
body[data-page="history"] .history-ball-cell {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 6px 2px;
  border-right: 1px solid #ebe5d1;
}

body[data-page="history"] .history-issue-cell { background: rgb(255 249 220 / 62%); color: #c72727; }
body[data-page="history"] .history-issue-cell strong { font-size: clamp(.65rem, 2.35vw, .78rem); white-space: nowrap; }
body[data-page="history"] .history-ball-cell:last-child { border-right: 0; }

body[data-page="history"] .history-ball {
  display: grid;
  width: clamp(27px, 7.4vw, 34px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(.72rem, 2.8vw, .88rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 7px rgb(54 39 24 / 18%);
}

body[data-page="history"] .history-ball-red { background: #ec3447; }
body[data-page="history"] .history-ball-blue { background: #179ed0; }
body[data-page="history"] .history-ball-green { background: #3eb967; }
body[data-page="history"] .history-ball-cell small {
  margin-top: 2px;
  color: #453a31;
  font-size: clamp(.59rem, 2.15vw, .7rem);
  line-height: 1.1;
  white-space: nowrap;
}

body[data-page="history"] .history-ball.is-trend-match {
  outline: 3px solid #ff6a1a;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 88%), 0 5px 13px rgb(151 50 19 / 28%);
}

body[data-page="history"] .history-trend-canvas {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  pointer-events: none;
}

body[data-page="history"] .history-back-to-top {
  position: fixed;
  z-index: 25;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  background: #d92f2f;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 7px 18px rgb(101 31 24 / 28%);
  cursor: pointer;
  touch-action: manipulation;
}

body[data-page="history"] .history-back-to-top:hover { background: #bd2424; }
body[data-page="history"] .history-back-to-top:focus-visible { outline: 3px solid #ffb45c; outline-offset: 2px; }
body[data-page="history"] .history-back-to-top[hidden] { display: none; }

body[data-page="history"] .history-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #766b5e;
}

body[data-page="history"] .history-load-zone { padding: 12px; text-align: center; }
body[data-page="history"] .history-load-more {
  background: transparent;
  display: none;
  width: 100%;
  min-height: 28px;
  color: #d97706;
  touch-action: manipulation;
}

body[data-page="history"] .history-load-more:disabled { cursor: wait; opacity: .62; }
body[data-page="history"] .history-page-shell.is-enhanced .history-load-more { display: block; }
body[data-page="history"] .history-load-status { min-height: 1.5em; margin: 6px 0 0; color: #8a302b; font-size: .78rem; }
body[data-page="history"] .history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 12px 16px;
  color: #6f6358;
  font-size: .82rem;
}

body[data-page="history"] .history-pagination a { color: #b42318; font-weight: 800; }
body[data-page="history"] .history-pagination [aria-disabled="true"] { opacity: .45; }
body[data-page="history"] .history-page-shell.is-enhanced .history-pagination { display: none; }
body[data-page="history"] .history-footer {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 18px 12px 30px;
  color: #71675d;
  font-size: .75rem;
  text-align: center;
}

@media (max-width: 520px) {
  body[data-page="history"] .history-page-shell { padding-inline: 0; }
  body[data-page="history"] .history-filter-panel,
  body[data-page="history"] .history-log-card { border-inline: 0; border-radius: 0; }
  body[data-page="history"] .history-chip-row { gap: 5px; padding-inline: 7px; }
  body[data-page="history"] .history-condition-chips { gap: 4px; }
  /*body[data-page="history"] .history-chip { min-width: 38px; min-height: 36px; padding-inline: 9px; }*/
}

@media (pointer: coarse) {
  /*body[data-page="history"] .history-chip,*/
  body[data-page="history"] .history-load-more { min-height: 48px; }
}