.chart-pattern-discovery-button {
  border-color: #d2a942 !important;
  background: #6f5518 !important;
  color: #fff7ce !important;
}

.chart-pattern-discovery-button[aria-expanded="true"] {
  border-color: #ffe277 !important;
  background: #b43a3f !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 119, 0.45);
}

.chart-pattern-discovery-panel {
  position: fixed;
  z-index: 1240;
  top: max(96px, 12vh);
  left: 10px;
  width: min(920px, calc(100vw - max(300px, 28vw) - 20px));
  height: min(720px, calc(100vh - 116px));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #59717c;
  border-radius: 6px;
  background: #152029;
  color: #edf5f7;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
}

.chart-pattern-discovery-panel[hidden] {
  display: none;
}

.chart-pattern-discovery-header,
.chart-pattern-discovery-controls,
.chart-pattern-discovery-summary,
.chart-pattern-discovery-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(141, 171, 181, 0.35);
  background: #23343e;
}

.chart-pattern-discovery-header {
  justify-content: space-between;
}

.chart-pattern-discovery-header strong {
  color: #ffe16b;
  font-size: 15px;
}

.chart-pattern-discovery-controls {
  flex-wrap: wrap;
  background: #1c2b34;
}

.chart-pattern-discovery-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
}

.chart-pattern-discovery-controls .field {
  height: 30px;
  min-width: 70px;
  border-color: #8ca5ad;
  background: #edf3f4;
  color: #15242a;
}

.chart-pattern-discovery-positions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chart-pattern-discovery-positions::before {
  content: "定位";
  margin-right: 2px;
  color: #dce9ec;
  font-size: 12px;
  font-weight: 900;
}

.chart-pattern-position {
  width: 30px;
  height: 30px;
  border: 1px solid #688591;
  border-radius: 3px;
  background: #29404a;
  color: #e9f2f4;
  font-weight: 900;
  cursor: pointer;
}

.chart-pattern-position[aria-pressed="true"] {
  border-color: #ffe16b;
  background: #b4383f;
  color: #fff;
}

.chart-pattern-position-summary {
  color: #ffe16b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.chart-pattern-discovery-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(141, 171, 181, 0.35);
  background: #16252d;
}

.chart-pattern-category {
  min-width: 104px;
  min-height: 38px;
  border: 1px solid #50717c;
  border-radius: 4px;
  background: #263c46;
  color: #e8f0f2;
  font-weight: 900;
  cursor: pointer;
}

.chart-pattern-category small {
  display: block;
  margin-top: 2px;
  color: #a9c0c7;
  font-size: 9px;
}

.chart-pattern-category[aria-pressed="true"] {
  border-color: #ffdf67;
  background: #a9343d;
  color: #fff;
}

.chart-pattern-category[aria-pressed="true"] small {
  color: #fff2bd;
}

.chart-pattern-discovery-summary {
  min-height: 38px;
  background: #17252d;
  color: #cfe0e4;
  font-size: 12px;
  line-height: 1.45;
}

.chart-pattern-discovery-table-wrap {
  min-height: 0;
  overflow: auto;
  background: #101a20;
}

.chart-pattern-discovery-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 11px;
}

.chart-pattern-discovery-table th,
.chart-pattern-discovery-table td {
  height: 34px;
  padding: 4px 6px;
  overflow: hidden;
  border-right: 1px solid rgba(90, 116, 126, 0.42);
  border-bottom: 1px solid rgba(90, 116, 126, 0.34);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-pattern-discovery-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #344853;
  color: #fff4bb;
  font-weight: 900;
}

.chart-pattern-discovery-table tbody tr {
  background: #18262e;
  color: #e8eff1;
  cursor: pointer;
}

.chart-pattern-discovery-table tbody tr:nth-child(even) {
  background: #1d2d35;
}

.chart-pattern-discovery-table tbody tr:hover,
.chart-pattern-discovery-table tbody tr:focus-visible {
  outline: none;
  background: #31505b;
}

.chart-pattern-discovery-table tbody tr.is-selected {
  background: #713039;
  box-shadow: inset 4px 0 #ffdf67;
}

.chart-pattern-name,
.chart-pattern-indicator {
  text-align: left !important;
  font-weight: 800;
}

.chart-pattern-hit,
.chart-pattern-rate {
  color: #ff7a76;
  font-weight: 900;
}

.chart-pattern-miss {
  color: #58b9f0;
  font-weight: 900;
}

.chart-pattern-lift,
.chart-pattern-similarity {
  color: #ffe16b;
  font-weight: 900;
}

.chart-pattern-discovery-table .is-warning {
  color: #ffb45b;
}

.chart-pattern-discovery-table .is-valid {
  color: #65df9a;
}

.chart-pattern-discovery-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: #a9bcc3;
  background: #101a20;
  font-weight: 800;
}

.chart-pattern-discovery-empty[hidden] {
  display: none;
}

.chart-pattern-discovery-footer {
  border-top: 1px solid rgba(141, 171, 181, 0.35);
  border-bottom: 0;
  color: #b9ccd1;
  font-size: 11px;
}

.chart-pattern-discovery-status {
  flex: 1;
}

.chart-pattern-discovery-status.is-error {
  color: #ff8985;
}

@media (max-width: 760px) {
  .chart-pattern-discovery-panel {
    top: 58px;
    left: 4px;
    width: calc(100vw - 8px);
    height: calc(100vh - 62px);
  }

  .chart-pattern-discovery-controls {
    gap: 5px;
  }

  .chart-pattern-category {
    min-width: 92px;
  }

  .chart-pattern-discovery-summary {
    max-height: 62px;
    overflow-y: auto;
  }
}