.sr-page { gap: 14px; }

.sr-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.sr-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--ink-dim);
  font-size: 12px;
}

.sr-toolbar input,
.sr-toolbar select {
  min-width: 142px;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

.sr-toolbar #srStatus { margin: 0 0 9px auto; }
.sr-toolbar .sr-source { margin-bottom: 9px; }
.sr-toolbar input { min-width: min(360px, 70vw); }

.sr-timeframes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sr-timeframes button {
  min-height: 48px;
  padding: 8px 12px;
  color: var(--ink-dim);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
}

.sr-timeframes button small {
  display: block;
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 9px;
  letter-spacing: .08em;
}

.sr-timeframes button.active {
  color: var(--ink);
  border-color: rgba(96, 165, 250, .7);
  background: rgba(59, 130, 246, .12);
}

.sr-timeframes button[data-timeframe="3d"] { box-shadow: -9px 0 0 -8px rgba(148, 163, 184, .4); }
.sr-long-timeframe { background: rgba(96, 165, 250, .04) !important; }
.sr-higher-hint {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 10px;
  color: #fbbf24;
  background: rgba(245, 158, 11, .08);
  font-size: 12px;
}
.sr-higher-hint[hidden] { display: none; }
.sr-history-limited { color: #fbbf24 !important; }
.sr-history-insufficient { color: var(--down) !important; }

.sr-overview .overview-card { min-height: 132px; }
.sr-nearest { border-left: 3px solid transparent; }
.sr-support { border-left-color: var(--up); }
.sr-resistance { border-left-color: var(--down); }
.sr-chart-card { overflow: hidden; }

.sr-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 410px;
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: rgba(5, 12, 24, .55);
}

.sr-canvas-wrap canvas { display: block; min-width: 720px; }
.sr-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
}
.sr-chart-empty[hidden] { display: none; }

.sr-chart-legend {
  display: flex;
  gap: 16px;
  padding-top: 10px;
  color: var(--ink-faint);
  font-size: 11px;
}

.sr-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sr-chart-legend i { width: 18px; height: 8px; border-radius: 2px; }
.sr-chart-legend .support { background: rgba(45, 212, 191, .45); }
.sr-chart-legend .resistance { background: rgba(251, 113, 133, .45); }
.sr-chart-legend .inside { background: rgba(167, 139, 250, .45); }
.sr-zones-card { overflow: hidden; }
.sr-table-wrap { overflow-x: auto; }

.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sr-table th,
.sr-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
  white-space: nowrap;
}

.sr-table th { color: var(--ink-faint); font-size: 11px; font-weight: 600; }
.sr-table tbody tr:last-child td { border-bottom: 0; }
.sr-table .sr-empty { padding: 28px 10px; color: var(--ink-faint); text-align: center; }
.sr-table tbody tr[tabindex] { cursor: pointer; }
.sr-table tbody tr[tabindex]:hover,
.sr-table tbody tr[tabindex]:focus,
.sr-table tbody tr.selected { background: rgba(96, 165, 250, .08); outline: none; }
.sr-table .sr-error { color: var(--down); }
.sr-multi-table td:first-child { font-weight: 650; }

.sr-type {
  display: inline-flex;
  min-width: 58px;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--card-border);
  font-size: 11px;
}

.sr-type-support { color: var(--up); }
.sr-type-resistance { color: var(--down); }
.sr-type-inside { color: var(--ink); }

@media (max-width: 700px) {
  .sr-toolbar { align-items: stretch; }
  .sr-toolbar label, .sr-toolbar input, .sr-toolbar select { width: 100%; min-width: 0; }
  .sr-toolbar #srStatus { width: 100%; margin: 0; }
  .sr-toolbar .sr-source { width: 100%; margin: 0; }
  .sr-timeframes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-timeframes button[data-timeframe="3d"] { box-shadow: none; }
}