.wl-page { display: grid; gap: 14px; }
.wl-page > .dashboard-toolbar { margin-bottom: 0; }
.wl-page .panel-heading { flex-wrap: wrap; align-items: center; gap: 12px; }
.wl-page [data-widget="watch-quotes"] .table-scroll { flex: 1; min-height: 0; overflow: auto; }
.wl-page [data-widget="watch-quotes"] .wl-candidates { flex-shrink: 0; max-height: 40%; }
.wl-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; max-width: 100%; }
.wl-tools input { width: 220px; min-width: 0; max-width: 100%; height: 34px; border: 1px solid var(--line, #d8d8d8); border-radius: 6px; padding: 5px 11px; background: var(--paper, #fff); color: var(--ink, #252525); font: 12px var(--font-ui, sans-serif); }
.wl-tools input::placeholder { color: var(--muted, #777); }
.wl-tools .button { flex-shrink: 0; white-space: nowrap; }
.wl-table { min-width: 650px; }
.wl-table tbody tr { cursor: pointer; }
.wl-table button { background: none; border: 0; padding: 0 5px; color: var(--muted, #777); }
.wl-table th button { font-weight: 700; color: var(--ink, #252525); }
.wl-table th button span { font: 11px var(--font-ui, sans-serif); color: var(--muted, #777); }
.wl-name strong { display: block; font-size: 18px; color: var(--navy, #333); }
.wl-name small { display: block; color: var(--muted, #777); font: 11px/1.7 var(--font-ui, sans-serif); }
.wl-table td:first-child { width: 42px; color: var(--muted, #777); font: 11px var(--font-ui, sans-serif); }
.wl-table td:last-child button { font: 21px var(--font-ui, sans-serif); }
.wl-table td:last-child button:hover { color: var(--up, #b74947); }
.wl-table td.numeric small { font-size: 11px; color: var(--muted, #777); }
.wl-up { color: var(--up, #b74947); }
.wl-down { color: var(--down, #2b806d); }
.wl-flat { color: var(--muted, #777); }
.wl-date { font: 12px var(--font-ui, sans-serif); color: var(--muted, #777); }
.wl-spark { width: 100px; height: 30px; }
.wl-spark polyline { fill: none; stroke: var(--navy, #444); stroke-width: 1.6; stroke-linejoin: round; }
.wl-candidates { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; padding: 0 16px 16px; max-height: 230px; overflow: auto; }
.wl-candidates button { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line, #d8d8d8); background: var(--soft, #f5f5f5); border-radius: 6px; padding: 8px 10px; font-size: 16px; color: var(--navy, #333); }
.wl-candidates button:hover { background: var(--paper, #fff); border-color: var(--navy, #444); }
.wl-candidates small { display: block; font: 10px/1.8 var(--font-ui, sans-serif); color: var(--muted, #777); }
.wl-heatmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; padding: 0 15px 15px; min-height: 140px; align-content: stretch; }
.wl-heat-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; min-width: 0; text-align: center; padding: 13px 8px; border-radius: 5px; background: var(--soft, #f5f5f5); color: var(--muted, #777); }
.wl-heat-up { --wl-heat-color: var(--up, #b74947); background: color-mix(in srgb, var(--wl-heat-color) var(--wl-heat-mix), var(--paper, #fff)); color: var(--wl-heat-color); }
.wl-heat-down { --wl-heat-color: var(--down, #2b806d); background: color-mix(in srgb, var(--wl-heat-color) var(--wl-heat-mix), var(--paper, #fff)); color: var(--wl-heat-color); }
.wl-heat-strong { color: var(--heat-contrast, #fff); }
.wl-heat-cell:hover { filter: brightness(.96); outline: 2px solid currentColor; outline-offset: -2px; }
.wl-heat-cell strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.wl-heat-cell > span { font: 600 23px/1.6 var(--font-ui, sans-serif); font-variant-numeric: tabular-nums; }
.wl-heat-cell small { font: 10px var(--font-ui, sans-serif); opacity: .75; }
.wl-empty { grid-column: 1/-1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; min-height: 110px; color: var(--muted, #777); }
.wl-empty a { color: var(--navy, #333); font-size: 13px; }
.dashboard-widget .wl-heatmap { flex: 1; min-height: 0; overflow: auto; }
@container (max-width: 530px) {
  .wl-page .wl-tools { width: 100%; margin-left: 0; }
  .wl-page .wl-tools input { flex: 1; width: auto; }
}
@media (max-width: 760px) {
  .wl-page [data-widget="watch-quotes"] { max-height: 650px; }
  .wl-page [data-widget="watch-quotes"] .wl-candidates { max-height: 230px; }
  .wl-page [data-widget="watch-heatmap"] { min-height: 220px; }
}
@media (max-width: 680px) {
  .wl-tools { width: 100%; margin-left: 0; }
  .wl-tools input { flex: 1; min-width: 0; width: auto; }
  .wl-heatmap { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); padding: 0 10px 10px; }
  .wl-heat-cell { min-height: 108px; }
  .wl-heat-cell strong { font-size: 17px; }
  .wl-heat-cell > span { font-size: 20px; }
}