:root {
  --page: #f6f9fd;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --sidebar: #fbfdff;
  --stroke: #e4ebf4;
  --stroke-strong: #d7e2ef;
  --text: #26344a;
  --muted: #7c8ca3;
  --blue: #2f80ed;
  --green: #22b37c;
  --violet: #9b6df4;
  --amber: #ffb23f;
  --red: #ff6267;
  --teal: #39c4bd;
  --gold: #f2b521;
  --cyan: #3aa7ff;
  --shadow: 0 12px 30px rgba(32, 69, 112, 0.08);
  --shadow-soft: 0 8px 22px rgba(32, 69, 112, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--page);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family:
    Inter,
    "Segoe UI",
    "Microsoft YaHei",
    Arial,
    sans-serif;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 80% 8%, rgba(67, 139, 239, 0.08), transparent 34rem),
    radial-gradient(circle at 20% 80%, rgba(57, 196, 189, 0.08), transparent 30rem),
    linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

.icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 190px;
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  padding: 20px 16px;
  border-right: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow: 10px 0 30px rgba(36, 65, 99, 0.04);
}

.brand {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 4px 22px;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  width: 42px;
  height: 42px;
  padding: 11px 9px 9px;
  border: 1px solid rgba(47, 128, 237, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, #55a0ff, #236fff);
  box-shadow: 0 12px 24px rgba(47, 128, 237, 0.26);
}

.brand-mark span {
  display: block;
  width: 5px;
  border-radius: 4px 4px 0 0;
  background: rgba(255, 255, 255, 0.9);
}

.brand-mark span:nth-child(1) {
  height: 9px;
}

.brand-mark span:nth-child(2) {
  height: 16px;
}

.brand-mark span:nth-child(3) {
  height: 23px;
}

.brand h1 {
  margin: 0;
  overflow: hidden;
  color: #1f2d42;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.nav-item {
  width: 100%;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 11px;
  color: #637287;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover,
.nav-item:focus-visible {
  color: var(--blue);
  border-color: rgba(47, 128, 237, 0.16);
  background: #f1f7ff;
  outline: none;
}

.nav-item.is-active {
  color: #1f6fe6;
  background: linear-gradient(90deg, rgba(47, 128, 237, 0.14), rgba(47, 128, 237, 0.06));
  box-shadow: inset 3px 0 0 var(--blue);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #edf4ff;
  color: #7b91ad;
  flex: none;
}

.nav-icon .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.nav-item.is-active .nav-icon {
  color: #fff;
  background: var(--blue);
}

.sidebar-footer {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px 10px;
  align-items: center;
  margin-top: auto;
  padding: 20px 2px 0;
  border-top: 1px solid var(--stroke);
}

.profile-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #8fa1b8 0 4px, transparent 5px),
    radial-gradient(circle at 50% 78%, #8fa1b8 0 9px, transparent 10px),
    #eaf1f9;
}

.profile-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.profile-copy strong {
  overflow: hidden;
  color: #243247;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy span {
  flex: none;
  padding: 3px 8px;
  color: #c68a08;
  border: 1px solid rgba(242, 181, 33, 0.26);
  border-radius: 999px;
  background: rgba(242, 181, 33, 0.14);
  font-size: 12px;
}

.status-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.status-block span:last-child {
  position: relative;
  padding-left: 16px;
}

.status-block span:last-child::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  content: "";
  transform: translateY(-50%);
}

.dashboard {
  grid-column: 2;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px 20px 22px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.topbar-spacer {
  min-width: 1px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 110px;
  min-height: 36px;
  padding: 0 15px;
  color: #354258;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.topbar[hidden],
.toolbar[hidden],
.toolbar-button[hidden] {
  display: none;
}

.toolbar-button .icon {
  width: 15px;
  height: 15px;
  color: #8c9bb0;
  flex: none;
}

.toolbar-button:hover,
.toolbar-button:focus-visible {
  color: var(--blue);
  border-color: rgba(47, 128, 237, 0.34);
  outline: none;
}

.toolbar-button:hover .icon,
.toolbar-button:focus-visible .icon {
  color: currentColor;
}

.toolbar-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  gap: 10px;
}

.kpi-grid.is-hidden {
  display: none;
}

.kpi-card,
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.kpi-card {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 12px 14px;
}

.kpi-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
  content: "";
  pointer-events: none;
}

.kpi-topline,
.kpi-value,
.sparkline {
  position: relative;
  z-index: 1;
}

.kpi-topline {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.kpi-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #ffffff), var(--accent));
  font-weight: 800;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

.kpi-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.1;
}

.kpi-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-value {
  color: #21304a;
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 800;
  line-height: 1;
}

.sparkline {
  height: 31px;
}

.sparkline svg {
  width: 100%;
  height: 100%;
}

.sparkline polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accent-blue {
  --accent: var(--blue);
}

.accent-green {
  --accent: var(--green);
}

.accent-violet {
  --accent: var(--violet);
}

.accent-amber {
  --accent: var(--amber);
}

.accent-red {
  --accent: var(--red);
}

.accent-teal {
  --accent: var(--teal);
}

.accent-gold {
  --accent: var(--gold);
}

.accent-cyan {
  --accent: var(--cyan);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.page-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 2px 4px;
  color: #25344a;
}

.page-heading-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, #55a0ff, #236fff);
  box-shadow: 0 10px 20px rgba(47, 128, 237, 0.18);
}

.page-heading-icon .icon {
  width: 19px;
  height: 19px;
}

.page-heading h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

.page-heading span {
  color: var(--muted);
  font-size: 12px;
}

.panel {
  display: grid;
  grid-column: span var(--span);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 242px;
}

.panel-tall {
  min-height: 316px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.82));
}

.panel-header h2 {
  margin: 0;
  color: #27364c;
  font-size: 15px;
  font-weight: 800;
}

.panel-header button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 25px;
  color: #718199;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.panel-header button:hover,
.panel-header button:focus-visible {
  color: var(--blue);
  border-color: rgba(47, 128, 237, 0.28);
  outline: none;
}

.preview {
  position: relative;
  min-height: 0;
  margin: 12px;
  border-radius: 6px;
  background:
    linear-gradient(rgba(119, 142, 169, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 142, 169, 0.14) 1px, transparent 1px);
  background-size: 48px 48px;
}

.preview-number {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 70px;
  min-height: 70px;
  padding: 12px;
  color: #2b3b52;
  border: 1px solid rgba(47, 128, 237, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(36, 65, 99, 0.12);
  font-size: 31px;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.preview-line svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.preview-line path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
}

.preview-line path:nth-child(1) {
  stroke: var(--blue);
}

.preview-line path:nth-child(2) {
  stroke: var(--green);
}

.preview-line path:nth-child(3) {
  stroke: var(--red);
}

.preview-table {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(180deg, #fbfdff, #ffffff);
}

.preview-table i {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  min-height: 25px;
  font-style: normal;
}

.preview-table b {
  display: grid;
  place-items: center;
  min-width: 0;
  color: #6f7f94;
  border-radius: 5px;
  background: #f2f6fb;
  font-size: 12px;
  font-weight: 700;
}

.preview-scatter i {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(34, 179, 124, 0.14);
}

.preview-scatter i:nth-child(3n) {
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(255, 178, 63, 0.16);
}

.preview-scatter i:nth-child(4n) {
  background: var(--violet);
  box-shadow: 0 0 0 5px rgba(155, 109, 244, 0.14);
}

.preview-bar {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 26px;
  background: none;
}

.preview-bar i {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(34, 179, 124, 0.76), rgba(57, 196, 189, 0.34));
}

.preview-heatmap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  padding: 10px;
  background: #fbfdff;
}

.preview-heatmap i {
  min-height: 20px;
  border-radius: 4px;
  background: rgba(47, 128, 237, 0.16);
}

.preview-heatmap i:nth-child(7n + 2) {
  background: rgba(57, 196, 189, 0.22);
}

.preview-heatmap i:nth-child(7n + 3) {
  background: rgba(34, 179, 124, 0.26);
}

.preview-heatmap i:nth-child(7n + 4) {
  background: rgba(255, 178, 63, 0.3);
}

.preview-heatmap i:nth-child(7n + 5) {
  background: rgba(255, 98, 103, 0.28);
}

.preview-heatmap i:nth-child(7n + 6) {
  background: rgba(155, 109, 244, 0.26);
}

.preview-heatmap i:nth-child(7n) {
  background: rgba(58, 167, 255, 0.28);
}

.preview-donut {
  display: grid;
  place-items: center;
  background: none;
}

.donut {
  width: min(72%, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #77b7ff 0 22%,
    var(--green) 22% 40%,
    var(--teal) 40% 57%,
    var(--amber) 57% 72%,
    var(--red) 72% 85%,
    var(--violet) 85% 100%
  );
  box-shadow: 0 14px 30px rgba(47, 128, 237, 0.14);
}

.donut::after {
  display: block;
  width: 52%;
  height: 52%;
  margin: 24%;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--stroke);
  content: "";
}

.preview-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  background: none;
}

.preview-list i {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: #fbfdff;
  font-style: normal;
}

.preview-list b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: #fff;
  border-radius: 6px;
  background: var(--amber);
}

.preview-list span {
  height: 10px;
  border-radius: 999px;
  background: #eaf0f7;
}

.content-grid.is-super-rotation {
  grid-template-columns: minmax(0, 1.07fr) minmax(420px, 0.93fr);
  align-items: stretch;
  gap: 10px;
}

.sr-strategy-stack {
  display: grid;
  grid-column: 1;
  gap: 10px;
  min-width: 0;
}

.sr-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #bfd9f7;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(235, 246, 255, 0.64), rgba(255, 255, 255, 0.84) 45%),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 24px rgba(39, 102, 177, 0.12);
}

.sr-card h2 {
  margin: 0;
  color: #0752bd;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.sr-strategy-card {
  display: grid;
  gap: 10px;
  min-height: 310px;
  padding: 14px 18px 16px;
}

.sr-strategy-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.sr-strategy-title span {
  overflow: hidden;
  color: #395178;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-holding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sr-mini-panel {
  overflow: hidden;
  border: 1px solid #c3ddfa;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.sr-mini-panel h3 {
  margin: 0;
  padding: 10px 12px 7px;
  color: #0752bd;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #172541;
  font-size: 14px;
}

.sr-table th,
.sr-table td {
  height: 41px;
  padding: 0 10px;
  border-bottom: 1px solid #cfe2f7;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-table th {
  color: #101820;
  background: linear-gradient(180deg, #edf7ff, #e4f2ff);
  font-weight: 800;
}

.sr-table td {
  font-weight: 650;
}

.sr-table tr:last-child td {
  border-bottom: 0;
}

.sr-table-compact th,
.sr-table-compact td {
  padding: 0 4px;
  font-size: 13px;
}

.sr-table-compact th {
  font-size: 12px;
}

.sr-col-code {
  width: 22%;
}

.sr-col-name {
  width: 32%;
}

.sr-col-weight {
  width: 22%;
}

.sr-col-change {
  width: 24%;
}

.sr-holding-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 36px;
  padding: 0 14px;
  border-top: 1px solid #cfe2f7;
  color: #1c2b46;
  font-size: 14px;
}

.sr-holding-summary strong,
.sr-decision-row strong,
.sr-as-of strong {
  font-weight: 800;
}

.sr-preview-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 16px;
  color: #1d2c48;
  font-size: 14px;
  font-weight: 600;
}

.sr-preview-strip strong {
  color: #a35a00;
  font-weight: 800;
}

.sr-action-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 35px;
  padding: 0 12px;
  border-radius: 7px;
  background: rgba(232, 244, 255, 0.82);
  color: #1d2c48;
  font-size: 15px;
  font-weight: 650;
}

.sr-action-strip strong {
  font-weight: 900;
}

.sr-decision-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 12px 0 76px;
  color: #1e2b45;
  font-size: 15px;
  font-weight: 650;
}

.is-positive {
  color: #ff1e1e;
}

.is-negative {
  color: #079b45;
}

.sr-ranking-card {
  grid-column: 2;
  padding: 16px;
}

.sr-ranking-card h2 {
  margin-bottom: 16px;
}

.sr-ranking-scroll {
  height: min(520px, calc(var(--ranking-visible-rows) * 42px + 44px));
  overflow-x: auto;
  overflow-y: auto;
  border-bottom: 1px solid #cfe2f7;
  scrollbar-color: #8db9e8 #edf6ff;
  scrollbar-width: thin;
}

.sr-ranking-scroll:focus-visible {
  outline: 2px solid rgba(47, 128, 237, 0.42);
  outline-offset: 2px;
}

.sr-ranking-scroll::-webkit-scrollbar {
  width: 8px;
}

.sr-ranking-scroll::-webkit-scrollbar-track {
  background: #edf6ff;
}

.sr-ranking-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #8db9e8;
}

.sr-ranking-table thead {
  position: sticky;
  z-index: 2;
  top: 0;
}

.sr-ranking-table th,
.sr-ranking-table td {
  height: 42px;
  padding: 0 4px;
  font-size: 14px;
}

.sr-ranking-table {
  min-width: 680px;
}

.sr-ranking-table td:first-child {
  color: #050505;
}

.sr-ranking-table th:nth-child(3),
.sr-ranking-table td:nth-child(3) {
  line-height: 1.25;
  white-space: normal;
}

.sr-ranking-table th:nth-child(1) {
  width: 7%;
}

.sr-ranking-table th:nth-child(2) {
  width: 12%;
}

.sr-ranking-table th:nth-child(3) {
  width: 19%;
}

.sr-ranking-table th:nth-child(4) {
  width: 13%;
}

.sr-ranking-table th:nth-child(5) {
  width: 16%;
}

.sr-ranking-table th:nth-child(6) {
  width: 17%;
}

.sr-ranking-table th:nth-child(7) {
  width: 16%;
}

.sr-stage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #cdd9e8;
  border-radius: 5px;
  background: #f3f6fa;
  color: #52647c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}

.sr-stage-badge.is-rising {
  border-color: #ffc8c3;
  background: #fff1ef;
  color: #d83128;
}

.sr-stage-badge.is-trending {
  border-color: #b9d6ff;
  background: #edf5ff;
  color: #1763bd;
}

.sr-stage-badge.is-peak {
  border-color: #ffd5a3;
  background: #fff7e9;
  color: #b66400;
}

.sr-stage-badge.is-fading {
  border-color: #bde3cd;
  background: #effaf3;
  color: #148342;
}

.sr-ranking-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 14px 0 0;
  color: #24396b;
  font-size: 15px;
  font-weight: 650;
}

.sr-quote-note {
  display: block;
  margin-top: 2px;
  color: #6b7a99;
  font-size: 12px;
  font-weight: 500;
}

.sr-ranking-note span {
  color: #006cff;
  font-size: 28px;
  line-height: 1;
}

.sr-chart-card,
.sr-return-card {
  padding: 14px 16px 16px;
}

.sr-chart-card {
  grid-column: 1;
}

.sr-return-card {
  grid-column: 2;
}

.sr-card-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 6px;
}

.sr-card-heading h2 {
  white-space: nowrap;
}

.sr-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px 28px;
  min-width: 0;
  color: #1f2e49;
  font-size: 13px;
  font-weight: 650;
}

.sr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.sr-legend i {
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--series-color);
  box-shadow: 10px 0 0 -8px var(--series-color);
}

.sr-legend i.is-dashed {
  background: repeating-linear-gradient(
    90deg,
    var(--series-color) 0 7px,
    transparent 7px 11px
  );
  box-shadow: none;
}

.sr-chart-zoom {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  height: 30px;
  overflow: hidden;
  border: 1px solid #bed8f5;
  border-radius: 6px;
  background: #f7fbff;
}

.sr-chart-zoom button {
  display: grid;
  min-width: 32px;
  height: 100%;
  place-items: center;
  border: 0;
  border-right: 1px solid #d7e7f8;
  background: transparent;
  color: #1551a6;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.sr-chart-zoom button:last-child {
  border-right: 0;
}

.sr-chart-zoom button:hover,
.sr-chart-zoom button:focus-visible {
  background: #e7f2ff;
  outline: none;
}

.sr-chart-zoom button:disabled {
  color: #9cafc4;
  cursor: default;
  background: #f4f7fa;
}

.sr-chart-zoom .sr-chart-zoom-reset {
  min-width: 48px;
  color: #29466e;
  font-size: 12px;
  font-weight: 700;
}

.sr-chart-frame {
  position: relative;
}

.sr-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-color: #9ec4ef #edf6ff;
  scrollbar-width: thin;
  user-select: none;
}

.sr-chart-scroll:focus-visible {
  outline: 2px solid rgba(47, 128, 237, 0.42);
  outline-offset: 2px;
}

.sr-chart-scroll.is-dragging {
  cursor: grabbing;
}

.sr-chart-scroll::-webkit-scrollbar {
  height: 8px;
}

.sr-chart-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #edf6ff;
}

.sr-chart-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #9ec4ef;
}

.sr-line-chart {
  display: block;
  width: 100%;
  height: 300px;
  overflow: visible;
}

.sr-chart-grid line {
  stroke: #d8e7f8;
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.sr-chart-grid text,
.sr-chart-axis text {
  fill: #20304a;
  font-size: 14px;
  font-weight: 650;
}

.sr-chart-axis line {
  stroke: #d9e8f8;
  stroke-width: 1;
}

.sr-chart-lines polyline {
  fill: none;
  stroke: var(--series-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.sr-chart-lines polyline.is-dashed {
  stroke-dasharray: 8 7;
}

.sr-chart-lines circle {
  fill: var(--series-color);
  stroke: #ffffff;
  stroke-width: 1.2;
}

.sr-chart-point .sr-chart-marker {
  pointer-events: none;
  transition: r 120ms ease;
}

.sr-chart-point .sr-chart-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  cursor: crosshair;
}

.sr-chart-point:hover .sr-chart-marker {
  r: 6px;
  stroke-width: 2px;
}

.sr-chart-value-label {
  pointer-events: none;
}

.sr-chart-value-label rect {
  fill: rgba(255, 255, 255, 0.9);
  stroke: color-mix(in srgb, var(--series-color) 55%, #ffffff);
  stroke-width: 0.8;
}

.sr-chart-value-label text {
  fill: var(--series-color);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
}

.sr-chart-value-label.is-max text,
.sr-chart-value-label.is-min text {
  font-weight: 900;
}

.sr-chart-tooltip {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 9px 11px;
  border: 1px solid #bfd8f4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 18px rgba(37, 78, 128, 0.18);
  color: #263b5a;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}

.sr-chart-tooltip[hidden] {
  display: none;
}

.sr-chart-tooltip-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #102f61;
}

.sr-chart-tooltip-title i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

.sr-chart-tooltip > span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.sr-return-card h2 {
  margin-bottom: 8px;
}

.sr-return-table th,
.sr-return-table td {
  height: 32px;
  padding: 0 6px;
  font-size: 13px;
}

.sr-return-table th:nth-child(1) {
  width: 22%;
}

.sr-return-table th:nth-child(2),
.sr-return-table th:nth-child(3) {
  width: 28%;
}

.sr-return-table th:nth-child(4) {
  width: 22%;
}

.sr-as-of {
  margin: 18px 8px 0;
  color: #24314d;
  font-size: 15px;
  font-weight: 650;
}

.sr-data-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 4px;
  color: #24314d;
  font-size: 13px;
  font-weight: 650;
}

.sr-data-meta strong {
  font-weight: 800;
}

.content-grid.is-high-dividend {
  display: block;
}

.hd-dashboard {
  --hd-blue: #0754b8;
  --hd-stroke: #b9d8f7;
  min-width: 0;
  padding: 2px;
  color: #102849;
}

.hd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding: 0 6px 8px;
  border-bottom: 1px solid #8ebff0;
}

.hd-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hd-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.hd-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.hd-header-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  color: #0754b8;
  border: 1px solid #a9cff5;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
  box-shadow: 0 6px 16px rgba(21, 96, 177, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.hd-header-actions button.is-primary {
  color: #ffffff;
  border-color: #0754b8;
  background: linear-gradient(135deg, #0754b8 0%, #0d8bff 100%);
}

.hd-header-actions button:hover,
.hd-header-actions button:focus-visible {
  transform: translateY(-1px);
}

.hd-header-actions button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.hd-header-actions .icon {
  width: 15px;
  height: 15px;
}

.hd-header h1 {
  margin: 0;
  color: #064caa;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}

.hd-header p {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  color: #174d9d;
  font-size: 13px;
  font-weight: 750;
}

.hd-data-times span,
.hd-data-times b {
  white-space: nowrap;
}

.hd-data-times b {
  color: #0a3d82;
}

.hd-update-message {
  max-width: 560px;
  color: #0754b8;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.hd-update-message.is-error {
  color: #c62828;
}

.hd-update-message[hidden] {
  display: none;
}

.hd-header p i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #159447;
  box-shadow: 0 0 0 3px rgba(21, 148, 71, 0.1);
}

.hd-header p i.is-warn { background: #e0a100; box-shadow: 0 0 0 3px rgba(224, 161, 0, 0.14); }
.hd-header p i.is-error { background: #d93a35; box-shadow: 0 0 0 3px rgba(217, 58, 53, 0.12); }
.hd-header p i.is-idle { background: #9aa9bb; box-shadow: 0 0 0 3px rgba(154, 169, 187, 0.16); }
.page-header { grid-column: 1 / -1; margin-bottom: 14px; }
.page-header .hd-header-actions select { min-height: 30px; padding: 0 10px; color: #0754b8; border: 1px solid #a9cff5; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; }
.page-header .hd-header-actions label { display: inline-flex; align-items: center; gap: 6px; color: #174d9d; font-size: 12px; font-weight: 800; }

.hd-mock-badge {
  padding: 4px 7px;
  color: #936100;
  border: 1px solid #ffd581;
  border-radius: 5px;
  background: #fff8e8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.hd-mock-badge.is-real {
  color: #08763d;
  border-color: #9fd8b8;
  background: #effbf4;
}

.hd-summary,
.hd-panel {
  overflow: hidden;
  border: 1px solid var(--hd-stroke);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(238, 247, 255, 0.68), rgba(255, 255, 255, 0.94) 45%),
    #fff;
  box-shadow: 0 5px 15px rgba(37, 91, 154, 0.08);
}

.hd-summary {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 8px;
}

.hd-summary > strong {
  display: flex;
  align-items: flex-start;
  padding: 15px 14px;
  color: var(--hd-blue);
  font-size: 15px;
  font-weight: 900;
}

.hd-summary-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(240px, 1.6fr);
  gap: 10px;
  padding: 6px;
}

.hd-summary-items > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 14px;
  border: 1px solid #b8d6f4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
}

.hd-summary-items > div > span,
.hd-summary-selection > .icon {
  color: #0865cf;
}

.hd-summary-items .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}

.hd-summary-items p {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.hd-summary-items p strong {
  color: #074eae;
  font-size: 24px;
  line-height: 1;
}

.hd-summary-items p small {
  margin-left: 6px;
  color: #263d5c;
  font-size: 12px;
}

.hd-summary-selection p strong {
  display: inline;
  font-size: 16px;
}

.hd-summary-selection p b {
  color: #0a55ba;
  font-size: 15px;
}

.hd-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 10px;
  margin-top: 10px;
}

.hd-panel {
  min-width: 0;
  padding: 8px;
}

.hd-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  margin: 0 0 7px;
  color: var(--hd-blue);
  font-size: 15px;
  font-weight: 900;
}

.hd-panel-title .icon {
  width: 16px;
  height: 16px;
}

.hd-ranking {
  grid-column: 1 / -1;
}

.hd-core {
  grid-column: 1 / -1;
}

.hd-consensus {
  grid-column: 1 / -1;
}

.hd-plan {
  grid-column: 1 / span 2;
}

.hd-portfolio {
  grid-column: 3;
}

.hd-history {
  grid-column: 1 / -1;
}

.hd-projection {
  grid-column: 1 / -1;
}

.hd-history-vertical {
  grid-column: 1 / -1;
}

.hd-sort-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

.hd-sort-tabs button {
  min-height: 30px;
  padding: 4px;
  overflow: hidden;
  color: #334967;
  border: 1px solid #b9d6f3;
  border-radius: 5px;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.hd-sort-tabs button:hover,
.hd-sort-tabs button:focus-visible,
.hd-sort-tabs button.is-active {
  color: #fff;
  border-color: #0876e8;
  background: #0876e8;
  outline: none;
}

.hd-table-scroll {
  max-width: 100%;
  overflow: auto;
  scrollbar-color: #91bce8 #edf6ff;
  scrollbar-width: thin;
}

.hd-ranking-scroll {
  height: auto;
  overflow-x: auto;
  overflow-y: visible;
}

.hd-table {
  width: 100%;
  border-collapse: collapse;
  color: #112744;
  font-size: 11px;
  font-weight: 650;
  table-layout: auto;
}

.hd-ranking .hd-table {
  min-width: 1810px;
  font-size: 10px;
}

.hd-dividend-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.hd-dividend-plan strong {
  color: #d8252d;
}

.hd-dividend-plan small {
  padding: 1px 3px;
  color: #1764ad;
  border-radius: 3px;
  background: #e5f2ff;
  font-size: 8px;
  font-weight: 850;
}

.hd-implementation-dates {
  display: grid;
  gap: 1px;
  color: #315575;
  font-size: 9px;
  line-height: 1.15;
}

.hd-implementation-dates time + time {
  padding-top: 1px;
  border-top: 1px dashed #b7cfe7;
}

.hd-dividend-composition {
  display: grid;
  min-width: 250px;
  text-align: left;
}

.hd-consensus-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hd-consensus-heading p {
  max-width: 680px;
  margin: 2px 0 0;
  color: #4d6988;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.hd-consensus-selected {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) repeat(3, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.hd-consensus-selected > div,
.hd-consensus-selected > article {
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid #bad9f7;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(232, 245, 255, 0.88), rgba(255, 255, 255, 0.96)),
    #fff;
}

.hd-consensus-selected b,
.hd-consensus-selected span,
.hd-consensus-selected small {
  display: block;
  color: #5b7390;
  font-size: 10px;
  font-weight: 800;
}

.hd-consensus-selected strong {
  display: block;
  margin: 3px 0;
  color: #0754b8;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
}

.hd-consensus-selected article strong {
  color: #d9252f;
}

.hd-consensus-selected article.is-empty strong {
  color: #8a9bb0;
}

.hd-consensus-scroll {
  max-height: 360px;
}

.hd-consensus-table {
  min-width: 1240px;
}

.hd-composition-line {
  display: grid;
  grid-template-columns: 26px 58px 48px minmax(108px, 1fr);
  align-items: center;
  gap: 2px;
  min-height: 19px;
  padding: 1px 2px;
  border-bottom: 1px dashed #c7daed;
  white-space: nowrap;
}

.hd-composition-line:last-child {
  border-bottom: 0;
}

.hd-composition-line b {
  color: #0d4c94;
  font-weight: 900;
}

.hd-composition-line em,
.hd-composition-line i {
  color: #203b5d;
  font-style: normal;
  font-weight: 750;
}

.hd-composition-line small {
  color: #51708f;
  font-size: 8px;
  font-weight: 750;
}

.hd-composition-line.is-total {
  background: #edf6ff;
}

.hd-forecast-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  min-width: 220px;
  gap: 2px 7px;
  padding: 2px;
  text-align: left;
}

.hd-forecast-title {
  grid-column: 1 / -1;
  color: #0d4c94;
  font-weight: 900;
}

.hd-forecast-metrics > span:not(.hd-forecast-title) {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.hd-forecast-metrics b {
  color: #5c7490;
  font-size: 8px;
}

.hd-forecast-metrics strong {
  color: #163b67;
  font-size: 9px;
}

.hd-forecast-metrics strong.is-up {
  color: #e73232;
}

.hd-forecast-metrics strong.is-down {
  color: #07863e;
}

.hd-forecast-metrics small {
  color: #9b6613;
  font-size: 8px;
  white-space: nowrap;
}

.hd-table th,
.hd-table td {
  height: 29px;
  padding: 3px 6px;
  border: 1px solid #c9def3;
  text-align: center;
  white-space: nowrap;
}

.hd-ranking .hd-table th,
.hd-ranking .hd-table td {
  height: 25px;
  padding: 2px 4px;
}

.hd-table thead {
  position: sticky;
  z-index: 2;
  top: 0;
}

.hd-table thead th {
  color: #0d448c;
  background: linear-gradient(180deg, #edf7ff, #dfefff);
  font-weight: 900;
}

.hd-table tbody tr:nth-child(even) {
  background: rgba(240, 247, 255, 0.56);
}

.hd-table tbody tr.is-selected {
  color: #084fae;
  background: #e9f4ff;
  font-weight: 850;
}

.hd-ranking tbody tr[data-hd-code] {
  cursor: pointer;
}

.hd-ranking tbody tr[data-hd-code]:hover,
.hd-ranking tbody tr[data-hd-code]:focus-visible {
  background: #eaf5ff;
  outline: 2px solid #65aaf0;
  outline-offset: -2px;
}

.content-grid.is-hd-updating .hd-dashboard {
  opacity: 0.72;
  pointer-events: none;
}

.hd-positive {
  color: #e62027;
  font-weight: 850;
}

.hd-negative {
  color: #098842;
  font-weight: 850;
}

.hd-warning {
  color: #e55b18 !important;
}

.hd-blue {
  color: #075cc8 !important;
}

.hd-rank {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #36506f;
  background: #dbe6f1;
  font-size: 10px;
  font-weight: 900;
}

.hd-rank-1,
.hd-rank-2,
.hd-rank-3 {
  color: #fff;
  background: #f7a712;
}

.hd-rank-2 {
  background: #91a4b8;
}

.hd-rank-3 {
  background: #e48016;
}

.hd-core-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 175px;
  gap: 7px;
}

.hd-core-metrics {
  display: grid;
  gap: 7px;
}

.hd-detail-section,
.hd-risk,
.hd-plan-list {
  min-width: 0;
  border: 1px solid #c3dcf5;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
}

.hd-detail-section h3,
.hd-risk h3,
.hd-plan-list h3 {
  margin: 0;
  padding: 5px 8px;
  color: #0751b2;
  font-size: 13px;
  font-weight: 900;
}

.hd-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0 6px 6px;
}

.hd-metric {
  display: grid;
  align-content: center;
  min-height: 54px;
  padding: 5px;
  border: 1px solid #cce0f4;
  border-radius: 5px;
  text-align: center;
}

.hd-metric > span {
  color: #40536d;
  font-size: 10px;
  font-weight: 700;
}

.hd-metric strong {
  margin-top: 4px;
  color: #102d52;
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
}

.hd-metric small,
.hd-plan-list small,
.hd-portfolio small {
  margin-left: 3px;
  font-size: 10px;
}

.hd-risk {
  padding-bottom: 6px;
}

.hd-risk-level {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 6px 5px;
  padding: 6px;
  color: #168944;
  border: 1px solid #bde7c9;
  border-radius: 5px;
  background: #f0fbf3;
  font-size: 11px;
  font-weight: 800;
}

.hd-risk-level .icon {
  width: 18px;
  height: 18px;
}

.hd-risk dl,
.hd-assumption-list {
  margin: 0 6px;
}

.hd-risk dl div,
.hd-assumption-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 29px;
  border-bottom: 1px solid #d9e8f7;
  font-size: 10px;
  font-weight: 700;
}

.hd-risk dt,
.hd-risk dd,
.hd-assumption-list dt,
.hd-assumption-list dd {
  margin: 0;
}

.hd-risk dd {
  color: #15863f;
  font-weight: 900;
}

.hd-risk p {
  margin: 6px;
  padding: 6px;
  color: #435873;
  border-radius: 4px;
  background: #f4f8fc;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
}

.hd-chart-section {
  margin-top: 7px;
}

.hd-chart-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: -1px 0 2px;
  color: #334a68;
  font-size: 9px;
  font-weight: 700;
}

.hd-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hd-chart-legend i {
  width: 22px;
  height: 2px;
  background: var(--line-color);
}

.hd-yield-chart {
  display: block;
  width: 100%;
  height: 146px;
}

.hd-chart-grid line {
  stroke: #d7e6f5;
  stroke-width: 1;
}

.hd-chart-grid text {
  fill: #405571;
  font-size: 9px;
  font-weight: 650;
}

.hd-yield-chart polyline {
  fill: none;
  stroke: var(--line-color);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hd-yield-chart circle {
  fill: var(--line-color);
}

.hd-plan-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 7px;
}

.hd-plan-list {
  padding-bottom: 5px;
}

.hd-plan-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  margin: 0 7px;
  border-bottom: 1px solid #d9e7f5;
  font-size: 10px;
  font-weight: 700;
}

.hd-plan-list > div strong {
  font-size: 13px;
}

.hd-donut {
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(#0879ef 0 var(--donut-value), #70b9ff var(--donut-value) 66%, #d7ebff 66% 100%);
}

.hd-donut::before {
  grid-area: 1 / 1;
  width: 104px;
  height: 104px;
  content: "";
  border-radius: 50%;
  background: #fff;
}

.hd-donut > div {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  gap: 5px;
  text-align: center;
}

.hd-donut span {
  font-size: 12px;
  font-weight: 750;
}

.hd-donut strong {
  color: #e51f27;
  font-size: 27px;
  font-weight: 900;
}

.hd-plan-bottom {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7px;
  margin-top: 7px;
}

.hd-assumption-list {
  padding-bottom: 6px;
}

.hd-assumption-list dd {
  font-weight: 850;
}

.hd-target-table {
  width: calc(100% - 12px);
  margin: 0 6px 6px;
}

.hd-matrix-table {
  min-width: 760px;
}

.hd-vertical-table {
  min-width: 1120px;
}

.hd-vertical-table tbody th {
  color: #0d448c;
  background: #edf6ff;
  font-weight: 900;
}

.hd-vertical-table td.is-highlighted {
  background: #fff6a8;
  font-weight: 850;
}

.hd-matrix-table tbody th {
  min-width: 122px;
  color: #1c3e6b;
  background: #f2f7fd;
  text-align: left;
}

.hd-matrix-table tr.is-highlighted {
  background: #fff6a8 !important;
}

.hd-projection .hd-table {
  min-width: 640px;
}

.hd-projection-note {
  margin: 5px 0 0;
  padding: 7px;
  color: #5b4700;
  border: 1px solid #e6bf00;
  border-radius: 5px;
  background: #ffe51b;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.hd-portfolio-grid {
  display: grid;
  gap: 9px;
  padding: 6px 2px;
}

.hd-portfolio-grid > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 65px;
  padding: 8px;
  border: 1px solid #c5dcf3;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.76);
}

.hd-portfolio-icon {
  color: #0864cb;
}

.hd-portfolio-icon .icon {
  width: 26px;
  height: 26px;
}

.hd-portfolio-grid > div > span:last-child {
  display: grid;
  gap: 5px;
  color: #3b5271;
  font-size: 11px;
  font-weight: 700;
}

.hd-portfolio-grid strong {
  color: #122c50;
  font-size: 21px;
  line-height: 1;
}

.hd-portfolio-grid .is-emphasis strong {
  color: #e32028;
}

.content-grid.is-stock-t0 {
  display: block;
}

.t0-dashboard {
  --t0-blue: #0755ad;
  --t0-sky: #2e8df5;
  --t0-green: #13a667;
  --t0-red: #f04444;
  --t0-orange: #ef8a1a;
  --t0-stroke: #d1e2f5;
  min-width: 0;
  color: #16304f;
  font-size: 12px;
}

.t0-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 2px 8px;
}

.t0-header > div,
.t0-header > p,
.t0-header > aside {
  display: flex;
  align-items: center;
}

.t0-header > div {
  gap: 10px;
  min-width: 0;
}

.t0-header h1 {
  margin: 0;
  overflow: hidden;
  color: #074e9f;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t0-logo {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #fff;
  border-radius: 7px;
  background: linear-gradient(135deg, #5d9cff, #5269e9);
}

.t0-logo .icon {
  width: 17px;
  height: 17px;
}

.t0-header b {
  padding: 4px 8px;
  color: #2f6daf;
  border-radius: 5px;
  background: #e7f1ff;
  font-size: 11px;
  white-space: nowrap;
}

.t0-header > p {
  gap: 8px;
  margin: 0;
  color: #45617f;
  font-weight: 750;
  white-space: nowrap;
}

.t0-header > p i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t0-green);
}

.t0-header > p i.is-stale {
  background: var(--t0-orange);
}

.t0-header > p strong {
  color: var(--t0-green);
}

.t0-header > p strong.is-stale {
  color: var(--t0-orange);
}

.t0-header > aside {
  justify-content: flex-end;
  gap: 18px;
  color: #4d6682;
  font-size: 11px;
  font-weight: 750;
}

.t0-header button {
  padding: 7px 14px;
  color: #1766ba;
  border: 0;
  border-radius: 6px;
  background: #e4f0ff;
  font-weight: 850;
  cursor: pointer;
}

.t0-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.t0-summary-card,
.t0-panel {
  min-width: 0;
  border: 1px solid var(--t0-stroke);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(241, 248, 255, 0.58), rgba(255, 255, 255, 0.96) 48%),
    #fff;
  box-shadow: 0 6px 18px rgba(37, 91, 154, 0.08);
}

.t0-summary-card {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 102px;
  padding: 12px 14px;
  overflow: hidden;
}

.t0-summary-card > span {
  color: #425b77;
  font-size: 11px;
  font-weight: 750;
}

.t0-summary-card > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: #122d4f;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.t0-summary-card > strong .icon {
  width: 22px;
  height: 22px;
}

.t0-summary-card > small {
  margin-top: 7px;
  color: #1972cf;
  font-size: 10px;
  font-weight: 750;
}

.t0-summary-card.is-up > strong,
.t0-summary-card.is-up > small {
  color: var(--t0-red);
}

.t0-summary-card.is-down > strong,
.t0-summary-card.is-down > small,
.t0-summary-card.is-status > strong {
  color: var(--t0-green);
}

.t0-summary-card.is-stale > strong,
.t0-summary-card.is-stale > small {
  color: var(--t0-orange);
}

.t0-summary-card svg {
  position: absolute;
  right: 9px;
  bottom: 10px;
  width: 72px;
  height: 31px;
}

.t0-summary-card svg polyline {
  fill: none;
  stroke: #5fa3ff;
  stroke-width: 2;
}

.t0-progress {
  position: relative;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe8f5;
}

.t0-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--t0-green);
}

.t0-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.t0-panel {
  padding: 10px;
}

.t0-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin-bottom: 7px;
}

.t0-panel-header h2,
.t0-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--t0-blue);
  font-size: 15px;
  font-weight: 900;
}

.t0-strategy-icon {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: var(--t0-green);
  border-radius: 50%;
  background: #e5f8f0;
}

.t0-strategy-sell .t0-strategy-icon {
  color: var(--t0-orange);
  background: #fff2e3;
}

.t0-strategy-icon .icon {
  width: 13px;
  height: 13px;
}

.t0-status-chip {
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 850;
}

.t0-status-chip.is-green {
  color: #168f59;
  background: #e7f8ef;
}

.t0-status-chip.is-orange {
  color: #dc7a0b;
  background: #fff1de;
}

.t0-strategy-body {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 9px;
}

.t0-condition-panel,
.t0-chart-card,
.t0-order-cards article {
  overflow: hidden;
  border: 1px solid #d5e5f6;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
}

.t0-condition-panel {
  padding: 8px;
}

.t0-condition-panel h3,
.t0-ledger-grid h3,
.t0-analysis h3 {
  margin: 0 0 7px;
  color: #1d4e84;
  font-size: 11px;
  font-weight: 900;
}

.t0-condition-panel ul,
.t0-alerts ul,
.t0-position-legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

.t0-condition-panel li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  border-bottom: 1px solid #e0ebf6;
  color: #3a526e;
  font-size: 10px;
  font-weight: 700;
}

.t0-condition-panel li strong {
  color: var(--t0-green);
}

.t0-condition-panel li i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #b7c7d8;
  font-style: normal;
}

.t0-condition-panel li i.is-pass {
  background: #72cba3;
}

.t0-next-action {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px;
  border-radius: 6px;
  background: #f0f7ff;
}

.t0-next-action > span {
  color: #28639e;
  font-weight: 900;
}

.t0-next-action strong {
  color: #1d5ca3;
  font-size: 11px;
}

.t0-next-action small {
  color: #6b8098;
  font-size: 9px;
}

.t0-chart-tabs {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 32px;
  padding: 0 9px;
  color: #516981;
  border-bottom: 1px solid #dce9f6;
  font-size: 10px;
  font-weight: 750;
}

.t0-chart-tabs > strong {
  color: #135eb4;
}

.t0-chart-tabs > div {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.t0-chart-tabs b {
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 750;
}

.t0-chart-tabs b.is-active {
  color: #1470ce;
  background: #e8f3ff;
}

.t0-kline {
  display: block;
  width: 100%;
  height: 268px;
}

.t0-chart-empty,
.t0-trend-empty {
  display: grid;
  min-height: 160px;
  place-items: center;
  color: #8192a6;
  font-size: 20px;
  font-weight: 800;
}

.t0-trend-empty {
  min-height: 48px;
}

.t0-chart-grid line {
  stroke: #dce8f5;
  stroke-width: 1;
}

.t0-chart-grid text,
.t0-chart-meta text,
.t0-chart-legend text {
  fill: #506780;
  font-size: 9px;
  font-weight: 650;
}

.t0-chart-legend text:nth-child(1) {
  fill: #ff765d;
}

.t0-chart-legend text:nth-child(2) {
  fill: #e7a52c;
}

.t0-chart-legend text:nth-child(3) {
  fill: #4084ef;
}

.t0-candle line,
.t0-candle rect {
  stroke-width: 1.1;
}

.t0-candle.is-up line,
.t0-candle.is-up rect,
.t0-macd-bars rect.is-up {
  fill: #ef5454;
  stroke: #ef5454;
}

.t0-candle.is-down line,
.t0-candle.is-down rect,
.t0-macd-bars rect.is-down {
  fill: #17ad70;
  stroke: #17ad70;
}

.t0-ma,
.t0-vwap {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.t0-ma-5 {
  stroke: #ff8465;
}

.t0-ma-10 {
  stroke: #e4a51c;
}

.t0-vwap {
  stroke: #3c82ef;
  stroke-width: 2;
}

.t0-signal circle {
  fill: var(--t0-red);
}

.t0-signal-s circle {
  fill: var(--t0-green);
}

.t0-signal text {
  fill: #fff;
  font-size: 10px;
  font-weight: 900;
}

.t0-price-badge rect {
  fill: #64748b;
}

.t0-price-badge.is-up rect {
  fill: #ef5454;
}

.t0-price-badge.is-down rect {
  fill: #17ad70;
}

.t0-price-badge text {
  fill: #fff;
  font-size: 9px;
  font-weight: 900;
}

.t0-trend {
  margin-top: 7px;
}

.t0-trend > span {
  color: #21568f;
  font-size: 10px;
  font-weight: 850;
}

.t0-trend svg {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 2px;
}

.t0-trend svg path {
  fill: none;
  stroke: #d6e6f7;
}

.t0-trend svg polyline {
  fill: none;
  stroke: #4a95f4;
  stroke-width: 1.5;
}

.t0-trend svg rect {
  fill: #438fed;
}

.t0-trend > div {
  display: flex;
  justify-content: space-around;
  color: #688099;
  font-size: 8px;
}

.t0-resource-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.82fr 1.1fr 0.66fr;
  gap: 10px;
  margin-top: 10px;
}

.t0-section-title {
  margin-bottom: 9px;
}

.t0-position-body {
  display: grid;
  grid-template-columns: 135px 130px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.t0-position-donut,
.t0-cost-donut {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.t0-position-donut {
  width: 116px;
  height: 116px;
  margin: auto;
  background: conic-gradient(#5a99f3 0 62%, #52c1a0 62% 80%, #59b2d7 80% 92%, #d1deed 92%);
}

.t0-position-donut.is-empty {
  background: #d8e5f2;
}

.t0-position-donut::before,
.t0-cost-donut::before {
  grid-area: 1 / 1;
  content: "";
  border-radius: 50%;
  background: #fff;
}

.t0-position-donut::before {
  width: 72px;
  height: 72px;
}

.t0-position-donut > div,
.t0-cost-donut > div {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  text-align: center;
}

.t0-position-donut span {
  font-size: 10px;
}

.t0-position-donut strong {
  color: #15375e;
  font-size: 18px;
}

.t0-position-legend {
  display: grid;
  gap: 7px;
}

.t0-position-legend li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  font-size: 9px;
}

.t0-position-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.t0-asset-list,
.t0-inventory dl,
.t0-cost-area dl {
  margin: 0;
}

.t0-asset-list > div,
.t0-inventory dl > div,
.t0-cost-area dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 29px;
  border-bottom: 1px solid #e0ebf6;
}

.t0-asset-list dt,
.t0-asset-list dd,
.t0-inventory dt,
.t0-inventory dd,
.t0-cost-area dt,
.t0-cost-area dd {
  margin: 0;
}

.t0-asset-list dd {
  display: flex;
  gap: 12px;
  font-size: 9px;
}

.t0-inventory dl > div {
  font-size: 10px;
}

.t0-inventory dl > div.is-strong {
  font-weight: 900;
}

.t0-inventory p {
  margin: 7px 0 0;
  color: var(--t0-green);
  font-size: 10px;
  font-weight: 850;
}

.t0-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #94bce7 #edf5fd;
}

.t0-table {
  width: 100%;
  border-collapse: collapse;
  color: #243d5b;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.t0-table th,
.t0-table td {
  height: 26px;
  padding: 3px 6px;
  border-bottom: 1px solid #dce8f5;
  text-align: center;
}

.t0-table th {
  color: #526a83;
  background: #f2f7fd;
  font-weight: 850;
}

.t0-usage .t0-table {
  min-width: 420px;
}

.t0-usage-bar {
  display: inline-block;
  width: 55px;
  height: 5px;
  margin-right: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe8f4;
  vertical-align: middle;
}

.t0-usage-bar i {
  display: block;
  height: 100%;
  background: #3b8ef0;
}

.t0-red {
  color: var(--t0-red) !important;
}

.t0-green {
  color: var(--t0-green) !important;
}

.t0-alerts ul {
  display: grid;
  gap: 8px;
}

.t0-alerts li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  color: #6b7788;
  font-size: 10px;
  font-weight: 750;
}

.t0-alerts li i {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #e0ad1c;
  font-style: normal;
  font-size: 9px;
}

.t0-alerts li.is-warn {
  color: #e97616;
}

.t0-alerts li.is-warn i {
  background: #f39a1b;
}

.t0-alerts li.is-ok {
  color: var(--t0-green);
}

.t0-alerts li.is-ok i {
  background: var(--t0-green);
}

.t0-bottom-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 10px;
  margin-top: 10px;
}

.t0-order-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.t0-order-cards article {
  padding: 8px;
}

.t0-order-cards .t0-empty-card {
  display: grid;
  min-height: 90px;
  place-items: center;
  color: #8192a6;
  font-size: 20px;
  font-weight: 800;
}

.t0-order-cards header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1c5798;
}

.t0-order-cards header span {
  padding: 4px 7px;
  color: #286ab1;
  border-radius: 5px;
  background: #e9f3ff;
  font-size: 9px;
  font-weight: 850;
}

.t0-order-cards dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
}

.t0-order-cards dl div {
  display: grid;
  gap: 3px;
  text-align: center;
}

.t0-order-cards dt,
.t0-order-cards dd {
  margin: 0;
}

.t0-order-cards dt {
  color: #698099;
  font-size: 8px;
}

.t0-order-cards dd {
  color: #173b65;
  font-size: 10px;
  font-weight: 850;
}

.t0-ledger-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 9px;
  margin-top: 10px;
}

.t0-ledger-grid > div {
  min-width: 0;
}

.t0-ledger-grid .t0-table {
  min-width: 510px;
}

.t0-pnl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.t0-pnl-cards > div {
  display: grid;
  gap: 6px;
  min-height: 57px;
  padding: 8px;
  border: 1px solid #d9e7f6;
  border-radius: 6px;
  background: #fff;
}

.t0-pnl-cards span {
  color: #5b7189;
  font-size: 9px;
}

.t0-pnl-cards strong {
  font-size: 17px;
}

.t0-cost-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: center;
  margin: 9px 0;
}

.t0-cost-area dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.t0-cost-area dl > div {
  font-size: 9px;
}

.t0-cost-area dd {
  color: #15945d;
  font-weight: 850;
}

.t0-cost-donut {
  width: 92px;
  height: 92px;
  margin: auto;
  background: conic-gradient(#5897ef 0 var(--cost-share, 0%), #ccdff4 var(--cost-share, 0%) 100%);
}

.t0-cost-donut::before {
  width: 61px;
  height: 61px;
}

.t0-cost-donut strong {
  color: #1a4e89;
  font-size: 15px;
}

.t0-cost-donut span {
  color: #6b7f95;
  font-size: 8px;
}

.t0-analysis > .t0-table-scroll .t0-table {
  min-width: 520px;
}

.t0-footer {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  color: #536a82;
  border-top: 1px solid #ccdff2;
  font-size: 9px;
}

.t0-footer > div {
  display: flex;
  gap: 14px;
}

.t0-footer strong {
  color: #15559a;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .t0-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .t0-summary-card:last-child {
    grid-column: span 2;
  }

  .t0-strategy-body {
    grid-template-columns: 155px minmax(0, 1fr);
  }

  .t0-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .t0-header {
    grid-template-columns: 1fr auto;
  }

  .t0-header > aside {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .t0-strategy-grid,
  .t0-bottom-grid {
    grid-template-columns: 1fr;
  }

  .t0-strategy-body {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .t0-header {
    grid-template-columns: 1fr;
  }

  .t0-header > p,
  .t0-header > aside {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .t0-header h1 {
    font-size: 22px;
  }

  .t0-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .t0-summary-card:last-child {
    grid-column: span 2;
  }

  .t0-strategy-body,
  .t0-resource-grid,
  .t0-position-body,
  .t0-ledger-grid,
  .t0-footer {
    grid-template-columns: 1fr;
  }

  .t0-chart-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .t0-position-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .t0-order-cards,
  .t0-pnl-cards {
    grid-template-columns: 1fr;
  }

  .t0-order-cards dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .t0-cost-area {
    grid-template-columns: 1fr;
  }

  .t0-footer > div {
    display: grid;
    gap: 4px;
  }
}

.content-grid.is-futures-hedge {
  display: block;
}

.fh-dashboard {
  --fh-blue: #075bc5;
  --fh-dark: #123665;
  --fh-green: #0ca45c;
  --fh-red: #ef323b;
  --fh-orange: #ff8415;
  --fh-stroke: #bfd8f4;
  min-width: 0;
  color: #183657;
  font-size: 12px;
}

.fh-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 72px;
  position: relative;
  text-align: center;
}

.fh-header h1 {
  margin: 0;
  color: #082f6a;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.1;
}

.fh-header p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 7px 0 0;
  color: #234e80;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
}

.fh-header p .icon {
  color: #1267ce;
  width: 23px;
  height: 23px;
}

.fh-header > span {
  position: absolute;
  right: 6px;
  bottom: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #294a70;
  font-size: 13px;
  font-weight: 750;
}

.fh-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}

.fh-summary-card,
.fh-panel {
  min-width: 0;
  border: 1px solid var(--fh-stroke);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(239, 247, 255, 0.66), rgba(255, 255, 255, 0.96) 48%),
    #fff;
  box-shadow: 0 7px 18px rgba(30, 90, 159, 0.09);
}

.fh-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  min-height: 94px;
  padding: 11px 12px;
  overflow: hidden;
}

.fh-summary-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #0873e4;
  border: 1px solid #b7d6f6;
  border-radius: 9px;
  background: #f5faff;
}

.fh-summary-icon .icon {
  width: 25px;
  height: 25px;
}

.fh-summary-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.fh-summary-card > div > span {
  color: #273f60;
  font-size: 11px;
  font-weight: 800;
}

.fh-summary-card strong {
  color: #102f59;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.fh-summary-card small {
  color: #6c7f93;
  font-size: 9px;
  font-weight: 700;
}

.fh-summary-card.is-red strong,
.fh-summary-card.is-red small {
  color: var(--fh-red);
}

.fh-summary-card.is-green strong {
  color: var(--fh-green);
}

.fh-summary-card > svg {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 50px;
  height: 25px;
}

.fh-summary-card > svg polyline {
  fill: none;
  stroke: #4fa0fa;
  stroke-width: 1.8;
}

.fh-summary-card.is-red > svg polyline {
  stroke: #ef4a51;
}

.fh-summary-card.is-green > svg polyline {
  stroke: #16a968;
}

.fh-main-grid {
  display: grid;
  grid-template-columns: minmax(410px, 1.02fr) minmax(430px, 1fr) minmax(360px, 0.94fr);
  gap: 10px;
}

.fh-panel {
  padding: 9px;
}

.fh-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #174b86;
  font-size: 15px;
  font-weight: 900;
}

.fh-panel-title .icon {
  width: 17px;
  height: 17px;
  color: #0871e0;
}

.fh-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fh-panel-heading > span {
  padding: 5px 11px;
  color: #426384;
  border: 1px solid #d6e6f6;
  border-radius: 5px;
  background: #f5f9fd;
  font-size: 10px;
}

.fh-panel-heading > strong {
  color: #2d4e73;
  font-size: 12px;
}

.fh-intraday-premium {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 13px 15px 11px;
}

.fh-intraday-title {
  margin: 0;
  color: #111827;
  text-align: center;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.15;
}

.fh-intraday-range {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.fh-intraday-range button {
  min-width: 48px;
  padding: 4px 10px;
  border: 1px solid #c9dbef;
  border-radius: 6px;
  background: #f8fbff;
  color: #2d4e73;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.fh-intraday-range button:hover {
  border-color: #2f6fb3;
}

.fh-intraday-range button.is-active {
  border-color: #1d5fa8;
  background: #1d5fa8;
  color: #ffffff;
}

.fh-intraday-range button:focus-visible {
  outline: 2px solid #1d5fa8;
  outline-offset: 2px;
}

.fh-intraday-premium.is-loading .fh-intraday-svg {
  opacity: 0.45;
  transition: opacity 0.15s;
}

.fh-intraday-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 12px 0 2px;
  color: #1f2f45;
  font-size: 12px;
  font-weight: 750;
}

.fh-intraday-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fh-intraday-legend i {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: #111827;
}

.fh-intraday-legend .is-mean {
  background: #ff9f1a;
}

.fh-intraday-legend .is-open {
  background: repeating-linear-gradient(90deg, #13a65d 0 6px, transparent 6px 10px);
}

.fh-intraday-legend .is-close {
  background: repeating-linear-gradient(90deg, #f04444 0 6px, transparent 6px 10px);
}

.fh-intraday-legend .is-band {
  width: 23px;
  height: 12px;
  border-radius: 2px;
  background: rgba(255, 226, 120, 0.3);
}

.fh-intraday-svg {
  display: block;
  width: 100%;
  height: 450px;
  margin-top: 2px;
}

.fh-intraday-shades rect {
  fill: rgba(255, 226, 120, 0.28);
}

.fh-intraday-grid line {
  stroke: #dbe5ef;
  stroke-width: 1;
}

.fh-intraday-grid line.is-day {
  stroke: #c8d6e6;
  stroke-width: 1.1;
}

.fh-intraday-grid line.is-zero {
  stroke: #9fb0c5;
  stroke-dasharray: 2 3;
}

.fh-intraday-grid text {
  fill: #1f2937;
  font-size: 11px;
  font-weight: 700;
}

.fh-intraday-grid .fh-y-axis,
.fh-intraday-grid .fh-x-axis {
  fill: #111827;
  font-size: 12px;
  font-weight: 750;
}

.fh-intraday-premium-line,
.fh-intraday-mean-line,
.fh-intraday-open-line,
.fh-intraday-close-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fh-intraday-premium-line {
  stroke: #111827;
  stroke-width: 2;
}

.fh-intraday-mean-line {
  stroke: #ff9f1a;
  stroke-width: 1.55;
}

.fh-intraday-open-line {
  stroke: #13a65d;
  stroke-width: 1.45;
  stroke-dasharray: 7 5;
}

.fh-intraday-close-line {
  stroke: #f04444;
  stroke-width: 1.45;
  stroke-dasharray: 7 5;
}

.fh-intraday-callout-line {
  stroke: #4b83f6;
  stroke-width: 1.4;
}

.fh-intraday-last-dot {
  fill: #367af6;
  stroke: #fff;
  stroke-width: 2;
}

.fh-intraday-hover {
  display: none;
  pointer-events: none;
}

.fh-intraday-hover.is-visible {
  display: block;
}

.fh-intraday-hover-x,
.fh-intraday-hover-y {
  stroke: rgba(43, 102, 219, 0.58);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

.fh-intraday-hover-dot {
  fill: #fff;
  stroke: #2367dc;
  stroke-width: 2.8;
}

.fh-intraday-badge rect {
  fill: rgba(235, 243, 255, 0.96);
  stroke: #86aef8;
}

.fh-intraday-badge text {
  fill: #3267e8;
  font-size: 12px;
  font-weight: 850;
}

.fh-intraday-note {
  margin: 1px 4px 0;
  color: #5e7188;
  font-size: 12px;
  font-weight: 700;
}

.fh-intraday-tooltip {
  position: absolute;
  z-index: 5;
  display: none;
  min-width: 188px;
  padding: 9px 11px;
  color: #10243f;
  border: 1px solid #8eb8f8;
  border-radius: 7px;
  background: rgba(247, 251, 255, 0.96);
  box-shadow: 0 10px 24px rgba(17, 48, 88, 0.18);
  pointer-events: none;
  font-size: 11px;
  font-weight: 750;
}

.fh-intraday-tooltip.is-visible {
  display: block;
}

.fh-intraday-tooltip strong {
  display: block;
  margin-bottom: 6px;
  color: #0b4fad;
  font-size: 12px;
  font-weight: 900;
}

.fh-intraday-tooltip dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.fh-intraday-tooltip div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.fh-intraday-tooltip dt,
.fh-intraday-tooltip dd {
  margin: 0;
}

.fh-intraday-tooltip dt {
  color: #60758d;
}

.fh-intraday-tooltip dd {
  color: #0f2d56;
  font-weight: 900;
}

.fh-monitor {
  grid-column: 1;
  grid-row: 2;
}

.fh-z20 {
  grid-column: 2;
  grid-row: 2;
}

.fh-right-stack {
  display: grid;
  grid-column: 3;
  grid-row: 2 / span 2;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.fh-premium-chart {
  grid-column: 1;
  grid-row: 3;
}

.fh-pnl-chart {
  grid-column: 2;
  grid-row: 3;
}

.fh-table-scroll {
  max-width: 100%;
  overflow: auto;
  margin-top: 8px;
  scrollbar-width: thin;
  scrollbar-color: #95bde8 #edf5fd;
}

.fh-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: #27435f;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.fh-table th,
.fh-table td {
  height: 35px;
  padding: 4px 6px;
  border-bottom: 1px solid #d8e7f5;
  text-align: center;
}

.fh-table th {
  color: #274a70;
  background: #f4f9fe;
  font-weight: 850;
}

.fh-table tr.is-selected {
  color: #0759bd;
  background: #eaf4ff;
}

.fh-table tbody tr[data-futures-strategy] {
  cursor: pointer;
}

.fh-table tbody tr[data-futures-strategy]:hover {
  background: #edf6ff;
}

.fh-star {
  margin-right: 5px;
  color: #0765d8;
  font-style: normal;
}

.fh-red {
  color: var(--fh-red) !important;
}

.fh-green {
  color: var(--fh-green) !important;
}

.fh-blue {
  color: var(--fh-blue) !important;
}

.fh-holding,
.fh-leg,
.fh-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 3px 7px;
  border-radius: 5px;
  font-weight: 850;
}

.fh-holding.is-on,
.fh-leg.is-long,
.fh-signal.is-green {
  color: #168c52;
  background: #e6f7ee;
}

.fh-holding.is-off {
  color: #526d8c;
  background: #edf3f9;
}

.fh-leg.is-short {
  color: #df343d;
  background: #fff0f0;
}

.fh-signal.is-blue {
  color: #fff;
  background: #0874e6;
}

.fh-signal.is-orange {
  color: #fff;
  background: #ff8518;
}

.fh-signal.is-muted {
  color: #57708d;
  background: #eaf0f6;
}

.fh-note {
  margin: 8px 5px 0;
  color: #415a78;
  font-size: 9px;
}

.fh-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 2px 38px;
  color: #48617d;
  font-size: 9px;
  font-weight: 700;
}

.fh-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fh-chart-legend i {
  width: 24px;
  height: 2px;
  background: #1670e7;
}

.fh-chart-legend i.is-green {
  background: #13a65d;
}

.fh-chart-legend i.is-red {
  background: #ef3e44;
}

.fh-chart-legend i.is-orange {
  background: #ff7a16;
}

.fh-chart-legend i.dashed {
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);
}

.fh-chart-legend i.is-band {
  width: 18px;
  height: 13px;
  border-radius: 3px;
  background: #dcecff;
}

.fh-chart-legend i.is-green-block,
.fh-chart-legend i.is-red-block {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.fh-chart-legend i.is-green-block {
  background: #51bd83;
}

.fh-chart-legend i.is-red-block {
  background: #f06a6a;
}

.fh-z20-chart,
.fh-premium-chart svg,
.fh-pnl-chart svg {
  display: block;
  width: 100%;
  height: 272px;
}

.fh-grid line {
  stroke: #dce8f5;
  stroke-width: 1;
}

.fh-grid text {
  fill: #536b84;
  font-size: 9px;
  font-weight: 650;
}

.fh-main-line,
.fh-mean-line,
.fh-cumulative-line {
  fill: none;
  stroke: #086ee4;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fh-mean-line {
  stroke: #ff7c18;
  stroke-width: 1.8;
}

.fh-threshold {
  stroke-width: 1.6;
  stroke-dasharray: 7 5;
}

.fh-threshold.is-open {
  stroke: #13a55e;
}

.fh-threshold.is-close {
  stroke: #ef383e;
}

.fh-threshold-label {
  font-size: 9px;
  font-weight: 800;
}

.fh-threshold-label.is-open {
  fill: #169253;
}

.fh-threshold-label.is-close {
  fill: #e73339;
}

.fh-last-dot {
  fill: #fff;
  stroke: #0871e5;
  stroke-width: 3;
}

.fh-last-badge rect {
  fill: #0871e5;
}

.fh-last-badge text {
  fill: #fff;
  font-size: 10px;
  font-weight: 900;
}

.fh-current-value {
  margin: -3px 0 0;
  color: #546c85;
  text-align: center;
  font-size: 11px;
}

.fh-current-value strong {
  margin-left: 12px;
  color: #0866d3;
  font-size: 16px;
}

.fh-signal-summary {
  min-height: 185px;
}

.fh-signal-body {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 8px;
  margin-top: 8px;
}

.fh-signal-body dl {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #d3e3f4;
  border-radius: 6px;
  background: #f8fbff;
}

.fh-signal-body dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  align-items: center;
}

.fh-signal-body dt,
.fh-signal-body dd {
  margin: 0;
}

.fh-signal-body dd {
  font-weight: 850;
}

.fh-trigger {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #075dca;
  border: 1px solid #cbdff5;
  border-radius: 7px;
  background: radial-gradient(circle, #fff 0 24%, #edf6ff 25% 42%, #dcecff 43% 55%, #f8fbff 56%);
  text-align: center;
}

.fh-trigger .icon {
  width: 55px;
  height: 55px;
}

.fh-trigger strong {
  font-size: 20px;
  font-weight: 900;
}

.fh-band {
  fill: rgba(72, 151, 241, 0.14);
  stroke: none;
}

.fh-bar-etf {
  fill: #4ebd81;
}

.fh-bar-futures {
  fill: #ef6868;
}

.fh-cumulative-line {
  stroke: #0871e6;
  stroke-width: 1.8;
}

.fh-cumulative-dot {
  fill: #0871e6;
  stroke: #fff;
  stroke-width: 1.5;
}

.fh-pnl-total text {
  font-size: 10px;
  font-weight: 900;
}

.fh-pnl-note {
  margin: -3px 35px 0;
  padding: 7px;
  color: #315b89;
  border-radius: 6px;
  background: #eef6ff;
  text-align: center;
  font-size: 10px;
  font-weight: 750;
}

.fh-structure {
  min-height: 188px;
}

.fh-legs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.fh-legs article {
  padding: 8px;
  border: 1px solid #cde1f3;
  border-radius: 6px;
  text-align: center;
}

.fh-legs article:last-child {
  border-color: #f1d2d2;
}

.fh-legs h3 {
  margin: 0 0 6px;
  color: #168d53;
  font-size: 12px;
}

.fh-legs article:last-child h3 {
  color: #df343d;
}

.fh-legs span {
  display: block;
  text-align: left;
  font-size: 9px;
}

.fh-legs strong {
  display: block;
  color: #111f34;
  font-size: 23px;
  line-height: 1.1;
}

.fh-legs small {
  margin-left: 5px;
  font-size: 10px;
}

.fh-legs p {
  margin: 4px 0 0;
  font-size: 9px;
}

.fh-hedge-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  border-top: 1px solid #d7e5f3;
}

.fh-hedge-stats > div {
  display: grid;
  gap: 3px;
  padding: 8px 4px;
  text-align: center;
}

.fh-hedge-stats > div + div {
  border-left: 1px solid #d7e5f3;
}

.fh-hedge-stats span {
  color: #526a84;
  font-size: 9px;
}

.fh-hedge-stats strong {
  color: #1d3554;
  font-size: 15px;
}

.fh-logs {
  min-height: 190px;
}

.fh-log-list {
  display: grid;
  gap: 0;
  max-height: 138px;
  margin-top: 8px;
  overflow-y: auto;
  border: 1px solid #d5e4f3;
  border-radius: 6px;
}

.fh-log-list > div {
  display: grid;
  grid-template-columns: 9px 43px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 8px;
  border-bottom: 1px solid #e0ebf5;
  font-size: 9px;
}

.fh-log-list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38b37c;
}

.fh-log-list time {
  color: #315f91;
  font-weight: 800;
}

.fh-logs > p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0;
  color: #526b85;
  font-size: 9px;
}

.fh-logs > p .icon {
  width: 13px;
  height: 13px;
  color: #0870dd;
}

.fh-footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  margin-top: 10px;
  padding: 10px 15px;
  color: #274e78;
  border-radius: 7px;
  background: #eff7ff;
  font-size: 11px;
  font-weight: 750;
}

.fh-footer span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fh-footer .icon {
  color: #0871dd;
}

@media (max-width: 1450px) {
  .fh-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fh-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fh-intraday-premium {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .fh-monitor,
  .fh-premium-chart {
    grid-column: 1;
  }

  .fh-z20,
  .fh-pnl-chart {
    grid-column: 2;
  }

  .fh-monitor,
  .fh-z20 {
    grid-row: 2;
  }

  .fh-premium-chart,
  .fh-pnl-chart {
    grid-row: 3;
  }

  .fh-right-stack {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fh-header {
    justify-content: flex-start;
    text-align: left;
  }

  .fh-header h1 {
    font-size: 25px;
  }

  .fh-header p {
    justify-content: flex-start;
  }

  .fh-header > span {
    position: static;
    margin-left: auto;
  }

  .fh-summary,
  .fh-main-grid,
  .fh-right-stack {
    grid-template-columns: 1fr;
  }

  .fh-monitor,
  .fh-intraday-premium,
  .fh-z20,
  .fh-premium-chart,
  .fh-pnl-chart,
  .fh-right-stack {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .fh-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .fh-header h1 {
    font-size: 22px;
  }

  .fh-header > span {
    margin-left: 0;
  }

  .fh-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fh-summary-card {
    min-height: 88px;
  }

  .fh-signal-body,
  .fh-legs {
    grid-template-columns: 1fr;
  }

  .fh-chart-legend {
    flex-wrap: wrap;
    margin-left: 5px;
  }

  .fh-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.content-grid.is-market-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.ms-header,
.ms-index-strip,
.ms-grid,
.ms-footer {
  grid-column: 1 / -1;
}

.ms-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 8px 4px 2px;
}

.ms-eyebrow,
.ms-kicker {
  color: #6c829f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ms-header h1 {
  margin: 3px 0 2px;
  color: #173963;
  font-size: 26px;
  line-height: 1.2;
}

.ms-header p,
.ms-panel-note,
.ms-method-note {
  margin: 0;
  color: #7e8fa5;
  font-size: 12px;
}

.ms-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #60758f;
  font-size: 12px;
  white-space: nowrap;
}

.ms-header-meta strong {
  margin-left: 12px;
  color: #304761;
  font-weight: 650;
}

.ms-header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ms-collector-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbdced;
  border-radius: 6px;
  color: #245b94;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ms-collector-button:hover,
.ms-collector-button:focus-visible {
  border-color: #8ab5e5;
  background: #edf6ff;
  outline: none;
}

.ms-collector-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.ms-collector-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7c899a;
  font-size: 11px;
  white-space: nowrap;
}

.ms-collector-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa8b8;
}

.ms-collector-state.is-running {
  color: #168356;
}

.ms-collector-state.is-running i {
  background: #20a36b;
  box-shadow: 0 0 0 3px rgba(32, 163, 107, 0.12);
}

.ms-collector-state.has-error {
  color: #b85d16;
}

.ms-collector-state.has-error i {
  background: #d78320;
}

.ms-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23a56f;
  box-shadow: 0 0 0 3px rgba(35, 165, 111, 0.12);
}

.ms-status-dot.is-stale {
  background: #d78320;
  box-shadow: 0 0 0 3px rgba(215, 131, 32, 0.13);
}

.ms-index-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
}

.ms-index-card,
.ms-panel,
.ms-risk-summary {
  min-width: 0;
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 16px rgba(35, 74, 119, 0.045);
}

.ms-index-card {
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 13px 15px;
}

.ms-index-card > span {
  color: #687d97;
  font-size: 12px;
}

.ms-index-card > strong {
  color: #243b59;
  font-size: 22px;
  line-height: 1;
}

.ms-index-card > small {
  color: #687d97;
  font-size: 12px;
}

.ms-index-card .is-up,
.ms-risk-score b {
  color: #db3f42;
}

.ms-index-card .is-down {
  color: #12894c;
}

.ms-index-card.ms-risk-card > strong {
  color: #c87b19;
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.ms-panel,
.ms-risk-summary {
  padding: 16px;
}

.ms-index-trend {
  grid-column: span 8;
}

.ms-breadth {
  grid-column: span 4;
}

.ms-etf-panel {
  grid-column: 1 / -1;
}

.ms-concentration-panel {
  grid-column: span 7;
}

.ms-sector-panel {
  grid-column: span 5;
}

.ms-risk-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 145px minmax(180px, 0.8fr) minmax(180px, 1fr) minmax(320px, 2fr);
  align-items: center;
  gap: 14px 20px;
}

.ms-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ms-panel-heading h2,
.ms-risk-summary h2 {
  margin: 3px 0 0;
  color: #203a5b;
  font-size: 17px;
}

.ms-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 6px 46px;
  color: #566b85;
  font-size: 11px;
}

.ms-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ms-chart-legend i {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 4px;
  background: var(--series);
}

.ms-chart-svg {
  display: block;
  width: 100%;
  height: 260px;
  overflow: visible;
}

.ms-chart-frame {
  position: relative;
}

.ms-chart-svg .ms-crossline {
  stroke: #9fb3cc;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.ms-chart-tip {
  position: absolute;
  top: 8px;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid #c9dcf2;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(23, 61, 104, 0.14);
  color: #203a5b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ms-chart-tip[hidden] {
  display: none;
}

.ms-chart-tip span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ms-chart-tip i {
  width: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--series);
}

.ms-chart-tip b {
  margin-left: auto;
  padding-left: 12px;
}

.ms-chart-tip b.is-up { color: #d83b4b; }
.ms-chart-tip b.is-down { color: #14945a; }

.ms-chart-tip small {
  color: #8494a9;
  font-size: 11px;
}

.ms-chart-svg text {
  fill: #7789a0;
  font-family: inherit;
  font-size: 10px;
}

.ms-chart-svg .ms-gridline {
  stroke: #e5edf6;
  stroke-width: 1;
}

.ms-empty-chart {
  display: grid;
  place-items: center;
  min-height: 200px;
  color: #8494a9;
  font-size: 13px;
}

.ms-breadth .ms-panel-heading > strong {
  color: #60758f;
  font-size: 13px;
}

.ms-breadth-bar {
  display: flex;
  height: 20px;
  overflow: hidden;
  margin: 22px 0 14px;
  border-radius: 4px;
  background: #edf2f7;
}

.ms-breadth-legend {
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8eef5;
}

.ms-breadth-legend span,
.ms-breadth-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #61758e;
  font-size: 12px;
}

.ms-breadth-legend span {
  justify-content: start;
  gap: 8px;
}

.ms-breadth-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #aab7c8;
}

.ms-breadth-legend i.is-up { background: #e34f59; }
.ms-breadth-legend i.is-down { background: #15945a; }
.ms-breadth-legend b { margin-left: auto; color: #314760; font-weight: 700; }

.ms-breadth-stat {
  padding: 11px 0 0;
}

.ms-breadth-stat strong {
  color: #2e435e;
  font-size: 13px;
}

.ms-breadth-stat strong i { color: #a5b1c0; font-style: normal; }

.ms-demo-badge {
  padding: 5px 8px;
  border: 1px solid #f3cf85;
  border-radius: 5px;
  color: #96600c;
  background: #fff8e8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ms-etf-explainer {
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
  color: #6e8096;
  font-size: 11px;
  line-height: 1.6;
}

.ms-etf-explainer b { flex: none; color: #3b5876; }
.ms-etf-panel .ms-chart-svg { height: 255px; }

.ms-concentration-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #e7edf5;
}

.ms-concentration-kpis > div {
  display: grid;
  gap: 6px;
  padding: 12px 8px 2px;
  border-right: 1px solid #e7edf5;
}

.ms-concentration-kpis > div:last-child { border: 0; }
.ms-concentration-kpis span { color: #73869e; font-size: 11px; }
.ms-concentration-kpis strong { color: #253d5b; font-size: 18px; }

.ms-sector-list {
  display: grid;
  gap: 13px;
  padding: 7px 0 11px;
}

.ms-sector-row {
  display: grid;
  grid-template-columns: 86px minmax(50px, 1fr) 64px;
  align-items: center;
  gap: 9px;
  color: #4f647e;
  font-size: 11px;
}

.ms-sector-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sector-row > strong { text-align: right; font-size: 11px; }
.ms-sector-row .is-up { color: #db3f42; }
.ms-sector-row .is-down { color: #12894c; }
.ms-sector-track { height: 8px; overflow: hidden; border-radius: 5px; background: #eef2f6; }
.ms-sector-track i { display: block; height: 100%; border-radius: inherit; }
.ms-sector-track i.is-inflow { background: #e36a65; }
.ms-sector-track i.is-outflow { background: #25a16d; }
.ms-method-note { padding-top: 9px; border-top: 1px solid #e8eef5; font-size: 10px; }

.ms-risk-summary > .ms-kicker { grid-column: 1; }
.ms-risk-summary h2 { grid-column: 1; margin-top: -10px; }
.ms-risk-score { display: flex; align-items: baseline; gap: 4px; }
.ms-risk-score strong { color: #1d4f88; font-size: 34px; }
.ms-risk-score span { color: #8594a6; font-size: 12px; }
.ms-risk-score b { margin-left: 8px; font-size: 13px; }
.ms-risk-meter { height: 8px; overflow: hidden; border-radius: 5px; background: #edf1f6; }
.ms-risk-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #31a875, #efb447, #df5a59); }
.ms-risk-summary > p { margin: 0; color: #334b67; font-size: 13px; font-weight: 700; }
.ms-risk-summary > small { grid-column: 2 / -1; color: #7c8da2; font-size: 11px; }
.ms-risk-factors { grid-column: 4; display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #e7edf5; }
.ms-risk-factors span { color: #71839a; font-size: 11px; }
.ms-risk-factors b { display: block; margin-top: 4px; color: #344c67; font-size: 14px; }

.ms-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 4px;
  color: #8392a6;
  font-size: 10px;
}

@media (max-width: 1200px) {
  .ms-index-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ms-index-trend { grid-column: span 7; }
  .ms-breadth { grid-column: span 5; }
  .ms-concentration-panel { grid-column: span 7; }
  .ms-sector-panel { grid-column: span 5; }
  .ms-risk-summary { grid-template-columns: 130px minmax(150px, 1fr) minmax(160px, 1fr); }
  .ms-risk-factors { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .ms-header { align-items: start; flex-direction: column; }
  .ms-header-tools { align-items: flex-start; flex-wrap: wrap; }
  .ms-header-meta { flex-wrap: wrap; white-space: normal; }
  .ms-header h1 { font-size: 22px; }
  .ms-index-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-index-trend,
  .ms-breadth,
  .ms-concentration-panel,
  .ms-sector-panel { grid-column: 1 / -1; }
  .ms-panel, .ms-risk-summary { padding: 13px; }
  .ms-panel-heading { align-items: flex-start; }
  .ms-panel-heading h2 { font-size: 15px; }
  .ms-panel-note { text-align: right; font-size: 10px; }
  .ms-chart-svg { height: 220px; }
  .ms-etf-panel .ms-chart-svg { height: 215px; }
  .ms-chart-legend { gap: 8px 12px; margin-left: 0; font-size: 10px; }
  .ms-risk-summary { display: flex; flex-wrap: wrap; gap: 10px 14px; }
  .ms-risk-summary > .ms-kicker { width: 100%; }
  .ms-risk-summary h2 { width: 100%; margin: -8px 0 0; }
  .ms-risk-score, .ms-risk-meter { flex: 1 1 40%; }
  .ms-risk-summary > p, .ms-risk-summary > small { width: 100%; }
  .ms-risk-factors { width: 100%; flex-wrap: wrap; }
  .ms-risk-factors span { flex: 1 1 28%; }
  .ms-concentration-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-concentration-kpis > div:nth-child(2) { border-right: 0; }
  .ms-footer { flex-wrap: wrap; }
}

.sr-loading {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #0752bd;
  border: 1px solid #bfd9f7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  font-size: 16px;
  font-weight: 800;
}

.load-error {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--text);
  font-size: 48px;
  font-weight: 900;
}

@media (max-width: 1450px) {
  .hd-summary {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .hd-summary-items {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .hd-summary-selection {
    grid-column: 1 / -1;
  }

  .hd-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hd-ranking {
    grid-column: 1 / -1;
  }

  .hd-core {
    grid-column: 1 / -1;
  }

  .hd-plan {
    grid-column: 1;
  }

  .hd-portfolio {
    grid-column: 2;
  }

  .hd-history {
    grid-column: 1 / -1;
  }

  .hd-projection {
    grid-column: 1 / -1;
  }

  .hd-portfolio-grid {
    grid-template-columns: 1fr;
  }
}

.content-grid.is-tender-offer {
  display: block;
}

.to-dashboard {
  --to-blue: #0865c8;
  --to-ink: #183454;
  --to-muted: #607791;
  --to-line: #c8dcf2;
  min-width: 0;
  padding: 2px;
  color: var(--to-ink);
}

.to-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 0 6px 10px;
  border-bottom: 1px solid #91bff0;
}

.to-header h1 {
  margin: 0;
  color: #093c7c;
  font-size: 25px;
  font-weight: 850;
}

.to-header p {
  margin: 5px 0 0;
  color: var(--to-muted);
  font-size: 12px;
  font-weight: 650;
}

.to-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--to-muted);
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

.to-state,
.to-status,
.to-quote {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.to-state.is-live,
.to-status.is-open,
.to-quote.is-fresh {
  color: #087944;
  background: #e8f7ee;
}

.to-state.is-waiting,
.to-status.is-closed,
.to-quote.is-stale {
  color: #946319;
  background: #fff4da;
}

.to-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 10px 0;
}

.to-summary article,
.to-panel {
  min-width: 0;
  border: 1px solid var(--to-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(23, 76, 133, 0.055);
}

.to-summary article {
  display: grid;
  gap: 8px;
  min-height: 78px;
  padding: 12px 14px;
}

.to-summary article > span {
  color: var(--to-muted);
  font-size: 11px;
  font-weight: 700;
}

.to-summary strong {
  color: #0a4f9f;
  font-size: 23px;
  line-height: 1;
}

.to-summary small {
  margin-left: 4px;
  color: var(--to-muted);
  font-size: 11px;
  font-weight: 600;
}

.to-summary article:last-child small {
  margin: 0;
  font-size: 10px;
}

.to-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.85fr);
  gap: 10px;
  align-items: stretch;
}

.to-panel {
  overflow: hidden;
  padding: 10px;
}

.to-list,
.to-detail {
  min-height: 360px;
}

.to-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 25px;
  margin-bottom: 9px;
}

.to-panel-header h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #164e8b;
  font-size: 14px;
  font-weight: 800;
}

.to-panel-header h2 .icon {
  width: 16px;
  height: 16px;
  color: var(--to-blue);
}

.to-panel-header > span,
.to-history-heading span {
  color: var(--to-muted);
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

.to-table-scroll {
  overflow: auto;
  max-width: 100%;
  max-height: 470px;
  border: 1px solid #d7e6f5;
  border-radius: 5px;
}

.to-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: center;
}

.to-table th,
.to-table td {
  padding: 8px 7px;
  border-bottom: 1px solid #d8e5f2;
  white-space: nowrap;
}

.to-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #174f8d;
  background: #e8f3ff;
  font-weight: 800;
}

.to-table tbody tr:nth-child(even) {
  background: #f6faff;
}

.to-list .to-table tbody tr {
  cursor: pointer;
  outline: none;
}

.to-list .to-table tbody tr:hover,
.to-list .to-table tbody tr:focus-visible {
  background: #edf6ff;
}

.to-list .to-table tbody tr[aria-selected="true"] {
  background: #e4f1ff;
  box-shadow: inset 3px 0 #1476dc;
}

.to-table td:first-child {
  text-align: left;
}

.to-table td strong,
.to-table td small {
  display: block;
}

.to-table td small {
  margin-top: 3px;
  color: var(--to-muted);
  font-size: 10px;
}

.to-table .is-positive {
  color: #087d43;
  font-weight: 800;
}

.to-table .is-negative {
  color: #d9363e;
  font-weight: 800;
}

.to-detail-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.to-detail-spread > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dce9f6;
  border-radius: 4px;
  background: #f9fcff;
}

.to-detail-spread span {
  color: var(--to-muted);
  font-size: 10px;
  font-weight: 650;
}

.to-detail-spread strong {
  color: #173a62;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.to-detail-spread strong.is-positive {
  color: #087d43;
}

.to-detail-spread strong.is-negative {
  color: #d9363e;
}

.to-detail-spread strong.is-neutral {
  color: #607791;
}

.to-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 13px 2px 2px;
  color: #174e8b;
  font-size: 11px;
}

.to-chart {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
}

.to-chart text {
  fill: #59738e;
  font-family: inherit;
  font-size: 10px;
}

.to-chart-zero {
  stroke: #aabbd0;
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.to-chart-line {
  fill: none;
  stroke: #0872d5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.to-chart-dot {
  fill: #0872d5;
  stroke: #fff;
  stroke-width: 2;
}

.to-chart-empty,
.to-empty {
  padding: 22px 10px;
  color: #75879c;
  font-size: 11px;
  text-align: center;
}

.to-detail-list {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
}

.to-detail-list > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 1px;
  border-top: 1px solid #e0ebf6;
  font-size: 10px;
  line-height: 1.45;
}

.to-detail-list dt {
  color: var(--to-muted);
  font-weight: 650;
}

.to-detail-list dd {
  margin: 0;
  color: var(--to-ink);
  overflow-wrap: anywhere;
}

.to-conditions {
  margin: 7px 0;
  padding: 7px 8px;
  border-left: 3px solid #e4a322;
  background: #fff9e9;
  color: #67552e;
  font-size: 10px;
  line-height: 1.5;
}

.to-source-link,
.to-candidate-table a {
  color: #0968c5;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.to-source-link:hover,
.to-candidate-table a:hover {
  text-decoration: underline;
}

.to-candidates {
  grid-column: 1 / -1;
}

.to-candidate-table td:nth-child(4),
.to-candidate-table td:nth-child(5) {
  text-align: left;
  white-space: normal;
}

.to-candidate-table td:nth-child(4) {
  min-width: 260px;
}

.to-candidate-table td:nth-child(5) {
  min-width: 200px;
  color: var(--to-muted);
  font-size: 10px;
}

.to-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 9px 2px 0;
  color: #697c91;
  font-size: 10px;
  line-height: 1.5;
}

.to-warning .icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: #cc9020;
}

@media (max-width: 1120px) {
  .to-main-grid {
    grid-template-columns: 1fr;
  }

  .to-candidates {
    grid-column: 1;
  }
}

@media (max-width: 700px) {
  .to-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
  }

  .to-header-meta {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .to-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .to-summary article:last-child {
    grid-column: 1 / -1;
  }

  .to-list,
  .to-detail {
    min-height: 0;
  }

  .to-panel {
    padding: 8px;
  }
}

.content-grid.is-nasdaq-premium {
  display: block;
}

.np-dashboard {
  --np-blue: #0872d5;
  --np-ink: #173554;
  --np-muted: #657c94;
  --np-line: #cbdff4;
  min-width: 0;
  padding: 2px;
  color: var(--np-ink);
}

.np-header,
.np-title,
.np-header-tools,
.np-panel-title,
.np-legend {
  display: flex;
  align-items: center;
}

.np-header {
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 0 4px 10px;
  border-bottom: 1px solid #b9d5f2;
}

.np-title {
  gap: 10px;
  min-width: 0;
}

.np-title-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--np-blue);
}

.np-title-icon .icon {
  width: 25px;
  height: 25px;
}

.np-title h1 {
  margin: 0;
  color: #0c4688;
  font-size: 22px;
  font-weight: 850;
}

.np-title p {
  margin: 4px 0 0;
  color: var(--np-muted);
  font-size: 11px;
}

.np-header-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.np-holding-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--np-muted);
  font-size: 11px;
  font-weight: 700;
}

.np-holding-control select,
.np-control-button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #bad4ef;
  border-radius: 4px;
  background: #f7fbff;
  color: #164d88;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}

.np-control-button {
  cursor: pointer;
}

.np-control-button:hover:not(:disabled) {
  border-color: var(--np-blue);
  background: #eaf4ff;
}

.np-control-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.np-collector-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8a692c;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.np-collector-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d2992c;
}

.np-collector-state.is-running {
  color: #07834d;
}

.np-collector-state.is-running i {
  background: #0b9b59;
  box-shadow: 0 0 0 3px #e4f6ed;
}

.np-collector-state.is-standby {
  color: #6b7a8c;
}

.np-collector-state.is-standby i {
  background: #9aa8b8;
}

.np-message {
  margin: 9px 0;
  padding: 8px 10px;
  border: 1px solid #d3e4f5;
  border-radius: 4px;
  background: #f5faff;
  color: #58718c;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.is-np-updating .np-message::after {
  content: " · 正在同步";
  color: var(--np-blue);
  font-weight: 800;
}

.np-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0;
}

.np-kpis article,
.np-panel {
  min-width: 0;
  border: 1px solid var(--np-line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 7px rgba(23, 76, 133, 0.045);
}

.np-kpis article {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px 12px;
}

.np-kpis article > span {
  color: var(--np-muted);
  font-size: 10px;
  font-weight: 750;
}

.np-kpis strong {
  color: #123f75;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.np-kpis small {
  color: #70849a;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-signal-card {
  background: #f1f8ff !important;
}

.np-signal-card strong {
  color: #087849;
  font-size: 17px;
}

.np-signal-card .np-signal-note {
  overflow: visible;
  color: #b45309;
  white-space: normal;
}

.np-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 9px;
  align-items: stretch;
}

.np-panel {
  overflow: hidden;
  padding: 10px;
}

.np-ranking {
  grid-column: 1 / -1;
}

.np-panel-title {
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 8px;
}

.np-panel-title h2 {
  margin: 0;
  color: #164e8b;
  font-size: 14px;
  font-weight: 820;
}

.np-panel-title p {
  margin: 3px 0 0;
  color: var(--np-muted);
  font-size: 10px;
}

.np-panel-title > span {
  color: var(--np-muted);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.np-table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #d5e5f5;
  border-radius: 4px;
}

.np-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.np-table th,
.np-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e0ebf6;
  white-space: nowrap;
}

.np-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eaf4ff;
  color: #174f8d;
  font-weight: 800;
}

.np-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.np-table tbody tr {
  cursor: pointer;
}

.np-table tbody tr:hover,
.np-table tbody tr:focus-visible {
  outline: none;
  background: #edf6ff;
}

.np-table tbody tr.is-selected {
  background: #e5f2ff;
  box-shadow: inset 3px 0 #1680e8;
}

.np-table td:first-child {
  width: 42px;
  color: #607b98;
  font-weight: 800;
}

.np-instrument {
  text-align: left;
}

.np-instrument strong,
.np-instrument small,
.np-table td small {
  display: block;
}

.np-instrument small,
.np-table td small {
  margin-top: 2px;
  color: #75899e;
  font-size: 9px;
}

.np-table .is-muted {
  color: #9aa8b7;
}

.np-footnote {
  margin: 7px 2px 0;
  color: var(--np-muted);
  font-size: 10px;
  line-height: 1.5;
}

.np-legend {
  flex-wrap: wrap;
  gap: 5px;
}

.np-legend i {
  width: 14px;
  height: 3px;
  margin-left: 5px;
  background: #1674e8;
}

.np-legend i.is-lowest {
  background: #0b9855;
}

.np-chart {
  display: block;
  width: 100%;
  height: 245px;
}

.np-gridline {
  stroke: #e3edf7;
  stroke-dasharray: 3 4;
}

.np-axis-label {
  fill: #6c829a;
  font-family: inherit;
  font-size: 10px;
}

.np-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.np-anchor-line {
  stroke: #1674e8;
}

.np-cheapest-line {
  stroke: #0b9855;
  stroke-dasharray: 5 4;
}

.np-dot {
  stroke: white;
  stroke-width: 1.2;
}

.np-anchor-dot {
  fill: #1674e8;
}

.np-cheapest-dot {
  fill: #0b9855;
}

.np-chart-empty {
  display: grid;
  min-height: 170px;
  place-items: center;
  color: #7b8da0;
  font-size: 11px;
}

.np-thresholds {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  padding-top: 7px;
  border-top: 1px solid #e4edf6;
  color: #647a92;
  font-size: 10px;
}

.np-signal-list {
  max-height: 290px;
  overflow: auto;
}

.np-signal-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.7fr) minmax(115px, 1fr) minmax(145px, 1.2fr);
  gap: 5px 9px;
  align-items: center;
  padding: 8px 3px;
  border-bottom: 1px solid #e3edf6;
  font-size: 10px;
}

.np-signal-row time {
  color: #6d8299;
  font-variant-numeric: tabular-nums;
}

.np-signal-row strong {
  color: #0a6d43;
}

.np-signal-row span {
  color: #24496e;
  text-align: right;
}

.np-signal-row small {
  grid-column: 2 / -1;
  color: #7a8da1;
}

.np-rules dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.np-rules dl > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid #e4edf6;
  font-size: 10px;
  line-height: 1.45;
}

.np-rules dt {
  color: var(--np-muted);
  font-weight: 700;
}

.np-rules dd {
  margin: 0;
  color: #254769;
  overflow-wrap: anywhere;
}

.np-caveat {
  margin-top: 9px;
  padding: 8px;
  border-left: 3px solid #e1ad44;
  background: #fffaf0;
  color: #75623b;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .np-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .np-content-grid {
    grid-template-columns: 1fr;
  }

  .np-ranking {
    grid-column: 1;
  }
}

@media (max-width: 700px) {
  .np-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .np-header-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .np-title h1 {
    font-size: 18px;
  }

  .np-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .np-panel-title {
    align-items: flex-start;
  }

  .np-chart {
    height: 205px;
  }

  .np-signal-row {
    grid-template-columns: 1fr 1fr;
  }

  .np-signal-row span {
    text-align: left;
  }

  .np-signal-row small {
    grid-column: 1 / -1;
  }
}

.hd-decision-core {
  padding: 10px;
  color: #112f59;
}

.hd-decision-header {
  display: grid;
  gap: 8px;
}

.hd-decision-identity {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  min-height: 34px;
}

.hd-decision-identity > .icon {
  width: 20px;
  height: 20px;
  color: #0868d9;
  flex: none;
}

.hd-decision-identity h2 {
  margin: 0;
  color: #0b356e;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}

.hd-decision-identity > span {
  padding: 4px 10px;
  color: #0864d8;
  border: 1px solid #b7d5f8;
  border-radius: 5px;
  background: #f2f8ff;
  font-size: 12px;
  font-weight: 850;
}

.hd-decision-identity > strong,
.hd-decision-identity time {
  color: #25436c;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.hd-decision-identity > i {
  width: 1px;
  height: 20px;
  background: #bdd3eb;
}

.hd-decision-identity > b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  color: #118745;
  border: 1px solid #a9dfbd;
  border-radius: 5px;
  background: #f0fbf4;
  font-size: 12px;
  white-space: nowrap;
}

.hd-decision-identity > b .icon {
  width: 15px;
  height: 15px;
}

.hd-decision-identity > em {
  margin-left: auto;
  color: #244165;
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.hd-decision-identity > em strong {
  margin-left: 5px;
  color: #0862cf;
  font-size: 18px;
}

.hd-decision-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 6px 14px;
  color: #173e76;
  border: 1px solid #b6d4f5;
  border-radius: 5px;
  background: #f6faff;
  font-size: 14px;
  font-weight: 850;
}

.hd-decision-summary .icon {
  width: 20px;
  height: 20px;
  color: #086ee2;
  flex: none;
}

.hd-decision-kpis {
  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr 1fr 1fr 1.15fr;
  margin-top: 10px;
  border: 1px solid #bdd9f6;
  border-radius: 6px;
  background: #fff;
}

.hd-decision-kpis > div {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 76px;
  padding: 8px 12px;
  text-align: center;
}

.hd-decision-kpis > div + div {
  border-left: 1px solid #d0e2f4;
}

.hd-decision-kpis > div > span {
  color: #294568;
  font-size: 11px;
  font-weight: 800;
}

.hd-decision-kpis > div > strong {
  margin-top: 8px;
  color: #123a73;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.hd-decision-kpis > div > strong small {
  margin-left: 3px;
  font-size: 13px;
}

.hd-forecast-range p {
  display: grid;
  grid-template-columns: 55px minmax(90px, 1fr) 62px 55px;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 0;
}

.hd-forecast-range p small {
  color: #355177;
  font-size: 13px;
  font-weight: 750;
}

.hd-forecast-range p strong {
  color: #113a72;
  font-size: 18px;
}

.hd-forecast-range p > i {
  position: relative;
  height: 7px;
  border-radius: 5px;
  background: #dceafa;
}

.hd-forecast-range p > i b {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0b6de2;
  box-shadow: 0 0 0 1px #83b7f0;
  transform: translate(-50%, -50%);
}

.hd-decision-main {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(290px, 0.95fr);
  gap: 10px;
  margin-top: 10px;
}

.hd-decision-chart,
.hd-quality-risk,
.hd-dividend-progress {
  min-width: 0;
  border: 1px solid #bdd9f6;
  border-radius: 6px;
  background: #fff;
}

.hd-decision-chart h3,
.hd-quality-risk h3,
.hd-dividend-progress h3 {
  margin: 0;
  padding: 9px 12px 4px;
  color: #0755b8;
  font-size: 14px;
  font-weight: 900;
}

.hd-decision-chart > p {
  margin: 0;
  padding: 0 12px 9px;
  color: #536d8c;
  font-size: 9px;
  font-weight: 650;
}

.hd-decision-chart .hd-chart-legend {
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 8px 1px;
  font-size: 10px;
}

.hd-chart-legend i.is-band {
  height: 8px;
  border-radius: 2px;
  background: #cfe2fb;
}

.hd-chart-legend i.is-median {
  height: 0;
  border-top: 2px dashed #8da1b8;
  background: transparent;
}

.hd-decision-chart .hd-yield-chart {
  width: 100%;
  height: 315px;
}

.hd-decision-chart .hd-chart-grid line {
  stroke: #dce9f7;
}

.hd-decision-chart .hd-chart-grid text {
  fill: #405a79;
  font-size: 10px;
}

.hd-decision-chart .hd-yield-chart polyline {
  stroke-width: 2.4;
}

.hd-chart-forecast-band {
  fill: #cfe2fb;
  opacity: 0.82;
}

.hd-chart-median {
  stroke: #8da1b8;
  stroke-dasharray: 6 4;
  stroke-width: 1.4;
}

.hd-chart-median-label {
  fill: #6b7f97;
  font-size: 10px;
  font-weight: 800;
}

.hd-chart-point circle {
  fill: var(--line-color);
  stroke: #fff;
  stroke-width: 1.5;
}

.hd-chart-point text {
  fill: var(--line-color);
  font-size: 9px;
  font-weight: 800;
}

.hd-chart-callout rect {
  fill: #f7fbff;
  stroke: #4a91e7;
}

.hd-chart-callout text {
  fill: #1261c5;
  font-size: 9px;
  font-weight: 900;
}

.hd-quality-risk {
  padding: 0 9px 9px;
}

.hd-quality-risk h3 {
  padding-left: 2px;
}

.hd-quality-list {
  border: 1px solid #c8def4;
  border-radius: 5px;
  overflow: hidden;
}

.hd-quality-row {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) 68px minmax(65px, 0.9fr) 44px 9px;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 9px;
  color: #18375f;
  font-size: 10px;
  font-weight: 750;
}

.hd-quality-row + .hd-quality-row {
  border-top: 1px solid #d8e7f6;
}

.hd-quality-row > strong {
  color: #0a5dca;
  font-size: 13px;
  text-align: right;
}

.hd-quality-row > strong.is-up {
  color: #e32d32;
}

.hd-quality-row > strong.is-down {
  color: #07863e;
}

.hd-quality-row > i {
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #dce9f7;
}

.hd-quality-row > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #096be0;
}

.hd-quality-row.is-warn > i b {
  background: #ef8a19;
}

.hd-quality-row.is-danger > i b {
  background: #d93036;
}

.hd-quality-row > em {
  color: #294769;
  font-style: normal;
  text-align: right;
}

.hd-quality-row > small {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #15934b;
}

.hd-quality-row.is-warn > small {
  background: #f29a1f;
}

.hd-quality-row.is-danger > small {
  background: #d93036;
}

.hd-quality-row.is-muted > small {
  background: #aab8c8;
}

.hd-risk-pass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  color: #118743;
  border-bottom: 1px solid #d2e4f5;
  font-size: 13px;
}

.hd-risk-pass span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #118743;
  font-weight: 900;
}

.hd-quality-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #c8def4;
  border-radius: 5px;
}

.hd-quality-summary > div {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px 5px;
  text-align: center;
}

.hd-quality-summary > div + div {
  border-left: 1px solid #d5e4f4;
}

.hd-quality-summary span {
  color: #284665;
  font-size: 9px;
  font-weight: 750;
}

.hd-quality-summary strong {
  color: #0961ce;
  font-size: 20px;
}

.hd-quality-summary small {
  margin-left: 3px;
  color: #df7212;
  font-size: 10px;
}

.hd-dividend-progress {
  margin-top: 10px;
}

.hd-progress-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr 3fr 1.35fr;
  align-items: stretch;
  padding: 0 8px 9px;
}

.hd-progress-grid > div {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 7px 12px;
  text-align: center;
}

.hd-progress-grid > div + div {
  border-left: 1px solid #d0e2f4;
}

.hd-progress-grid > div > span,
.hd-progress-bar-wrap p {
  color: #294568;
  font-size: 10px;
  font-weight: 800;
}

.hd-progress-grid > div > strong {
  margin-top: 8px;
  color: #0862cf;
  font-size: 22px;
}

.hd-progress-grid strong small {
  margin-left: 3px;
  font-size: 11px;
}

.hd-progress-bar-wrap {
  width: 100%;
}

.hd-progress-bar-wrap p {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 9px;
}

.hd-progress-bar-wrap p b {
  margin-left: 5px;
  color: #0b8d45;
}

.hd-progress-bar-wrap p span:last-child b {
  color: #0967d9;
}

.hd-progress-bar-wrap > i {
  display: grid;
  grid-template-columns: var(--implemented) calc(100% - var(--implemented));
  width: 100%;
  height: 27px;
  overflow: hidden;
  border-radius: 15px;
  color: #fff;
  background: #0b67df;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.hd-progress-bar-wrap > i b,
.hd-progress-bar-wrap > i em {
  display: grid;
  place-items: center;
  min-width: 0;
  font-style: normal;
}

.hd-progress-bar-wrap > i b {
  background: #0c9349;
}

.hd-progress-bar-wrap > i em {
  border-left: 1px solid #fff;
}

.hd-progress-grid .hd-next-node {
  font-size: 16px;
  line-height: 1.25;
}

@media (max-width: 1250px) {
  .hd-decision-identity {
    flex-wrap: wrap;
  }

  .hd-decision-identity > em {
    margin-left: 0;
  }

  .hd-decision-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hd-decision-kpis > div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid #d0e2f4;
  }

  .hd-decision-kpis > div:nth-child(5),
  .hd-decision-kpis > div:nth-child(6) {
    border-top: 1px solid #d0e2f4;
  }

  .hd-decision-main {
    grid-template-columns: 1fr;
  }

  .hd-progress-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hd-progress-bar-wrap {
    grid-column: 1 / span 2;
    border-top: 1px solid #d0e2f4;
  }

  .hd-progress-grid > div:nth-child(4) {
    border-left: 0;
  }

  .hd-progress-grid > div:nth-child(4),
  .hd-progress-grid > div:nth-child(5) {
    border-top: 1px solid #d0e2f4;
  }
}

@media (max-width: 700px) {
  .hd-decision-identity h2 {
    width: 100%;
    white-space: normal;
  }

  .hd-decision-kpis,
  .hd-progress-grid {
    grid-template-columns: 1fr;
  }

  .hd-decision-kpis > div,
  .hd-decision-kpis > div:nth-child(4),
  .hd-progress-grid > div,
  .hd-progress-grid > div:nth-child(4) {
    border-top: 1px solid #d0e2f4;
    border-left: 0;
  }

  .hd-decision-kpis > div:first-child,
  .hd-progress-grid > div:first-child {
    border-top: 0;
  }

  .hd-progress-bar-wrap {
    grid-column: auto;
  }

  .hd-quality-row {
    grid-template-columns: minmax(70px, 1fr) 64px minmax(55px, 0.8fr) 40px 8px;
  }

  .hd-decision-chart .hd-yield-chart {
    min-width: 760px;
  }

  .hd-decision-chart {
    overflow-x: auto;
  }
}

.hd-calculator {
  padding: 10px;
}

.hd-calculator > .hd-panel-title {
  margin-bottom: 10px;
  font-size: 17px;
}

.hd-calculator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.95fr);
  gap: 10px;
}

.hd-calculator-inputs,
.hd-calculator-results,
.hd-calculator-bands {
  min-width: 0;
  border: 1px solid #c2dcf6;
  border-radius: 6px;
  background: #fff;
}

.hd-calculator-inputs h3,
.hd-calculator-results h3,
.hd-calculator-bands h3 {
  margin: 0;
  padding: 9px 12px 5px;
  color: #0753b5;
  font-size: 13px;
  font-weight: 900;
}

.hd-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  padding: 6px 12px 10px;
}

.hd-input-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.hd-input-grid label > span {
  color: #34506f;
  font-size: 10px;
  font-weight: 800;
}

.hd-input-grid label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b9d5f1;
  border-radius: 5px;
  background: #f9fcff;
}

.hd-input-grid input,
.hd-input-grid select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  color: #12385f;
  border: 1px solid #b9d5f1;
  border-radius: 5px;
  background: #f9fcff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  outline: none;
}

.hd-input-grid label > div input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hd-input-grid input:focus,
.hd-input-grid select:focus {
  border-color: #1680ea;
  box-shadow: 0 0 0 2px rgba(22, 128, 234, 0.12);
}

.hd-input-grid label > div small {
  color: #526e8d;
  font-size: 10px;
  font-weight: 750;
  text-align: center;
}

.hd-calculator-inputs > p {
  margin: 0 12px 10px;
  color: #607893;
  font-size: 9px;
  line-height: 1.45;
}

.hd-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 6px 10px 10px;
  border: 1px solid #c8def4;
  border-radius: 5px;
}

.hd-result-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  min-height: 66px;
  padding: 9px 6px;
  text-align: center;
}

.hd-result-grid > div:nth-child(n + 4) {
  border-top: 1px solid #d7e6f5;
}

.hd-result-grid > div:not(:nth-child(3n + 1)) {
  border-left: 1px solid #d7e6f5;
}

.hd-result-grid span {
  width: 100%;
  color: #405c7b;
  font-size: 9px;
  font-weight: 750;
}

.hd-result-grid strong {
  max-width: 100%;
  overflow: hidden;
  color: #0d3c73;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
}

.hd-result-grid small {
  color: #55708d;
  font-size: 9px;
}

.hd-yield-summary {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 10px 10px;
}

.hd-calculator-donut {
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(#0879ef 0 var(--donut-value), #d8ebff var(--donut-value) 100%);
}

.hd-calculator-donut::before {
  grid-area: 1 / 1;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.hd-calculator-donut span,
.hd-calculator-donut strong {
  z-index: 1;
  grid-area: 1 / 1;
  text-align: center;
}

.hd-calculator-donut span {
  align-self: center;
  margin-top: -24px;
  color: #294768;
  font-size: 9px;
  font-weight: 800;
}

.hd-calculator-donut strong {
  align-self: center;
  margin-top: 18px;
  color: #e5222a;
  font-size: 22px;
  font-weight: 900;
}

.hd-yield-summary dl {
  margin: 0;
  border: 1px solid #c8def4;
  border-radius: 5px;
}

.hd-yield-summary dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 31px;
  padding: 0 9px;
  color: #385471;
  font-size: 9px;
  font-weight: 750;
}

.hd-yield-summary dl div + div {
  border-top: 1px solid #d8e7f5;
}

.hd-yield-summary dt,
.hd-yield-summary dd {
  margin: 0;
}

.hd-yield-summary dd {
  color: #0b4e9c;
  font-weight: 900;
  text-align: right;
}

.hd-calculator-bands {
  margin-top: 10px;
}

.hd-calculator-bands .hd-target-table {
  width: calc(100% - 20px);
  margin: 4px 10px 10px;
}

.hd-calculator-bands .hd-target-table th,
.hd-calculator-bands .hd-target-table td {
  height: 28px;
}

@media (max-width: 1450px) {
  .hd-calculator-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .hd-input-grid,
  .hd-result-grid {
    grid-template-columns: 1fr;
  }

  .hd-result-grid > div,
  .hd-result-grid > div:nth-child(n + 4),
  .hd-result-grid > div:not(:nth-child(3n + 1)) {
    border-top: 1px solid #d7e6f5;
    border-left: 0;
  }

  .hd-result-grid > div:first-child {
    border-top: 0;
  }

  .hd-yield-summary {
    grid-template-columns: 1fr;
  }
}

.hd-ranking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hd-ranking-heading .hd-panel-title {
  margin-bottom: 6px;
}

.hd-ranking-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.hd-ranking-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #405b79;
  font-size: 10px;
  font-weight: 750;
}

.hd-ranking-controls select {
  height: 28px;
  padding: 0 24px 0 8px;
  color: #173b66;
  border: 1px solid #b9d5f1;
  border-radius: 5px;
  background: #f8fbff;
  font-size: 10px;
  font-weight: 750;
}

.hd-risk-toggle {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #b9d5f1;
  border-radius: 5px;
  background: #f8fbff;
  cursor: pointer;
}

.hd-risk-toggle input {
  accent-color: #0876e8;
}

.hd-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

.hd-ranking-tabs button {
  min-height: 32px;
  padding: 4px 10px;
  color: #29486d;
  border: 1px solid #b8d5f2;
  border-radius: 5px;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.hd-ranking-tabs button:hover,
.hd-ranking-tabs button:focus-visible,
.hd-ranking-tabs button.is-active {
  color: #fff;
  border-color: #0876e8;
  background: #0876e8;
  outline: none;
}

.hd-ranking .hd-ranking-table {
  font-size: 10px;
}

.hd-ranking .hd-ranking-table.is-returns {
  min-width: 1280px;
}

.hd-ranking .hd-ranking-table.is-quality {
  min-width: 1320px;
}

.hd-ranking .hd-ranking-table.is-progress {
  min-width: 1500px;
}

.hd-ranking .hd-ranking-table.is-risk {
  min-width: 1480px;
}

.hd-ranking-table th,
.hd-ranking-table td {
  height: 36px !important;
  padding: 4px 6px !important;
}

.hd-ranking-table thead th {
  background: #e5f2ff;
}

.hd-sort-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 28px;
  padding: 0 2px;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.hd-sort-header:hover,
.hd-sort-header:focus-visible,
.hd-sort-header.is-active {
  color: #0864ca;
  outline: none;
}

.hd-sort-header i {
  position: relative;
  width: 9px;
  height: 13px;
  flex: none;
}

.hd-sort-header i::before,
.hd-sort-header i::after {
  position: absolute;
  left: 1px;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.hd-sort-header i::before {
  top: 1px;
  border-bottom: 5px solid #a2b6ca;
}

.hd-sort-header i::after {
  bottom: 1px;
  border-top: 5px solid #a2b6ca;
}

.hd-sort-header i.is-asc::before {
  border-bottom-color: #0876e8;
}

.hd-sort-header i.is-desc::after {
  border-top-color: #0876e8;
}

.hd-sort-header i.is-asc::after,
.hd-sort-header i.is-desc::before {
  opacity: 0.3;
}

.hd-ranking-table .hd-sticky-rank,
.hd-ranking-table .hd-sticky-code,
.hd-ranking-table .hd-sticky-name,
.hd-ranking-table .hd-sticky-price {
  position: sticky;
  z-index: 3;
  background: #fff;
}

.hd-market-badge,
.hd-currency {
  display: inline-block;
  margin-left: 4px;
  color: #58728f;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.hd-market-badge {
  padding: 1px 4px;
  border: 1px solid #b8d5f2;
  border-radius: 999px;
  background: #eef7ff;
}

.hd-market-badge.is-hk {
  color: #8a4d00;
  border-color: #f1cf94;
  background: #fff7e7;
}

.hd-ranking-table .hd-sticky-rank {
  left: 0;
  width: 46px;
  min-width: 46px;
}

.hd-ranking-table .hd-sticky-code {
  left: 46px;
  width: 72px;
  min-width: 72px;
}

.hd-ranking-table .hd-sticky-name {
  left: 118px;
  width: 112px;
  min-width: 112px;
}

.hd-ranking-table .hd-sticky-price {
  left: 230px;
  width: 68px;
  min-width: 68px;
  border-right: 2px solid #a9cceb;
}

.hd-ranking-table thead .hd-sticky-rank,
.hd-ranking-table thead .hd-sticky-code,
.hd-ranking-table thead .hd-sticky-name,
.hd-ranking-table thead .hd-sticky-price {
  z-index: 7;
  background: #dceeff;
}

.hd-ranking-table tbody tr:nth-child(even) .hd-sticky-rank,
.hd-ranking-table tbody tr:nth-child(even) .hd-sticky-code,
.hd-ranking-table tbody tr:nth-child(even) .hd-sticky-name,
.hd-ranking-table tbody tr:nth-child(even) .hd-sticky-price {
  background: #f4f9ff;
}

.hd-ranking-table tbody tr.is-selected .hd-sticky-rank,
.hd-ranking-table tbody tr.is-selected .hd-sticky-code,
.hd-ranking-table tbody tr.is-selected .hd-sticky-name,
.hd-ranking-table tbody tr.is-selected .hd-sticky-price {
  background: #e3f1ff;
}

.hd-scenario {
  display: grid;
  grid-template-columns: repeat(3, minmax(42px, 1fr));
  align-items: center;
  min-width: 160px;
  overflow: hidden;
  border: 1px solid #c8def4;
  border-radius: 4px;
}

.hd-scenario > * {
  padding: 3px 4px;
  text-align: center;
}

.hd-scenario > * + * {
  border-left: 1px solid #d3e4f5;
}

.hd-scenario small {
  color: #57708c;
  font-size: 8px;
}

.hd-scenario strong {
  color: #075bc3;
  background: #edf6ff;
  font-size: 10px;
}

.hd-scenario.is-yield strong {
  color: #e62027;
}

.hd-confidence {
  display: grid;
  grid-template-columns: 72px 34px 28px;
  align-items: center;
  gap: 5px;
  min-width: 145px;
}

.hd-confidence > i {
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #dce9f7;
}

.hd-confidence > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0876e8;
}

.hd-confidence strong {
  color: #0b4f9e;
}

.hd-confidence small {
  color: #b46d0b;
  font-size: 8px;
}

.hd-score-badge {
  display: inline-grid;
  min-width: 30px;
  height: 24px;
  place-items: center;
  padding: 0 5px;
  color: #0961c8;
  border-radius: 4px;
  background: #e9f4ff;
  font-size: 11px;
}

.hd-score-badge.is-composite {
  color: #fff;
  background: #0876e8;
}

.hd-progress-done {
  color: #078743;
  font-weight: 850;
}

.hd-progress-pending {
  color: #0967d9;
  font-weight: 850;
}

.hd-plan-status,
.hd-freshness,
.hd-risk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.hd-plan-status {
  color: #0a5ebc;
  background: #e9f4ff;
}

.hd-next-cell {
  min-width: 120px;
  color: #194a80;
  font-weight: 800;
}

.hd-progress-components {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  min-width: 150px;
}

.hd-progress-components small {
  padding: 2px 5px;
  color: #315878;
  border-radius: 3px;
  background: #edf5fc;
  font-size: 8px;
}

.hd-risk-badge.is-0 {
  color: #087d3e;
  background: #eaf8ef;
}

.hd-risk-badge.is-1 {
  color: #9a6a0c;
  background: #fff6dc;
}

.hd-risk-badge.is-2 {
  color: #c15d0a;
  background: #fff0df;
}

.hd-risk-badge.is-3,
.hd-risk-badge.is-4 {
  color: #c52a31;
  background: #ffebed;
}

.hd-risk-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  min-width: 165px;
}

.hd-risk-tags small {
  padding: 2px 5px;
  color: #b24f0b;
  border-radius: 3px;
  background: #fff1df;
  font-size: 8px;
}

.hd-risk-tags small.is-clear {
  color: #087d3e;
  background: #eaf8ef;
}

.hd-freshness.is-fresh {
  color: #087d3e;
  background: #eaf8ef;
}

.hd-freshness.is-degraded,
.hd-freshness.is-closed {
  color: #9a6a0c;
  background: #fff6dc;
}

.hd-freshness.is-stale {
  color: #c52a31;
  background: #ffebed;
}

.hd-model-cell {
  max-width: 150px;
  overflow: hidden;
  color: #4c6885;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .hd-ranking-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .hd-ranking-controls {
    justify-content: space-between;
  }

  .hd-ranking-tabs {
    grid-template-columns: repeat(4, 112px);
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

@media (max-width: 1120px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }

  .panel {
    grid-column: span 6;
  }

  .content-grid.is-super-rotation {
    grid-template-columns: 1fr;
  }

  .sr-strategy-stack,
  .sr-ranking-card,
  .sr-chart-card,
  .sr-return-card {
    grid-column: 1;
  }

  .hd-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .hd-header-side,
  .hd-header-actions,
  .hd-header p {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .hd-main-grid {
    grid-template-columns: 1fr;
  }

  .hd-ranking,
  .hd-core,
  .hd-plan,
  .hd-history,
  .hd-projection,
  .hd-portfolio {
    grid-column: 1;
  }
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: auto;
    height: auto;
    min-height: auto;
  }

  .dashboard {
    grid-column: auto;
  }

  .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-item {
    justify-content: center;
  }

  .sidebar-footer {
    margin-top: 18px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar {
    justify-content: stretch;
  }

  .toolbar-button {
    flex: 1 1 120px;
  }

  .content-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .panel {
    grid-column: span 6;
  }

  .sr-holding-grid,
  .sr-strategy-title,
  .sr-card-heading {
    grid-template-columns: 1fr;
  }

  .sr-strategy-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .sr-legend {
    justify-content: flex-start;
    gap: 18px;
  }

  .sr-chart-zoom {
    justify-self: start;
  }

  .sr-decision-row,
  .sr-action-strip {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 12px;
  }

  .hd-summary {
    grid-template-columns: 1fr;
  }

  .hd-summary > strong {
    padding-bottom: 5px;
  }

  .hd-core-top {
    grid-template-columns: 1fr;
  }

  .hd-risk {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .hd-risk h3,
  .hd-risk p {
    grid-column: 1 / -1;
  }

  .hd-plan-top {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
}

@media (max-width: 640px) {
  .dashboard,
  .sidebar {
    padding: 16px;
  }

  .brand {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-card {
    min-height: 112px;
  }

  .kpi-value {
    font-size: 23px;
  }

  .panel,
  .panel-tall {
    min-height: 260px;
  }

  .preview-number {
    min-width: 58px;
    min-height: 58px;
    font-size: 26px;
  }

  .sr-card h2 {
    font-size: 19px;
  }

  .sr-strategy-card,
  .sr-ranking-card,
  .sr-chart-card,
  .sr-return-card {
    padding: 12px;
  }

  .sr-table {
    font-size: 12px;
  }

  .sr-table th,
  .sr-table td {
    padding: 0 5px;
  }

  .sr-line-chart {
    height: 250px;
  }

  .hd-header h1 {
    font-size: 25px;
  }

  .hd-header p {
    flex-wrap: wrap;
    white-space: normal;
  }

  .hd-summary-items {
    grid-template-columns: 1fr;
  }

  .hd-summary-selection {
    grid-column: 1;
  }

  .hd-sort-tabs {
    grid-template-columns: repeat(5, 105px);
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hd-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hd-risk {
    display: block;
  }

  .hd-plan-top,
  .hd-plan-bottom {
    grid-template-columns: 1fr;
  }

  .hd-donut {
    margin: 8px auto;
  }

  .hd-portfolio-grid {
    grid-template-columns: 1fr;
  }
}

.sr-return-fund { display: block; margin-top: 2px; color: #6b7f96; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: left; }
.sr-return-table td.sr-return-cell, .sr-return-table th:nth-child(n+2) { text-align: left; padding-left: 14px; }
.sr-return-table td.sr-return-cell { height: auto; padding-top: 5px; padding-bottom: 5px; }
.sr-return-scroll { max-height: 440px; overflow-y: auto; }
.sr-return-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* 净值曲线（同花顺式交互） */
.sr-nav-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sr-nav-range { color: #4f6d8f; font-size: 12px; font-weight: 700; }
.sr-nav-frame { position: relative; margin-top: 6px; cursor: crosshair; user-select: none; touch-action: pan-y; outline: none; }
.sr-nav-frame:focus-visible { box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.35); border-radius: 6px; }
.sr-nav-frame.is-dragging { cursor: grabbing; }
.sr-nav-chart { display: block; overflow: visible; }
.sr-nav-plot { fill: #fbfdff; stroke: none; }
.sr-nav-extreme circle { fill: #fff; stroke: var(--series-color); stroke-width: 1.6; }
.sr-nav-extreme text { fill: var(--series-color); font-size: 11px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.sr-nav-cross line { stroke: #50657f; stroke-width: 1; stroke-dasharray: 4 3; }
.sr-nav-cross circle { fill: var(--series-color); stroke: #fff; stroke-width: 1.5; }
.sr-nav-tag rect { fill: #1e3a5f; }
.sr-nav-tag text { fill: #fff; font-size: 11px; font-weight: 700; }
.sr-nav-panel { position: absolute; top: 34px; left: 70px; z-index: 2; display: grid; gap: 3px; min-width: 210px; padding: 8px 10px; border: 1px solid #c9dcf2; border-radius: 6px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 22px rgba(23, 61, 104, 0.14); font-size: 12px; pointer-events: none; }
.sr-nav-panel.is-right { left: auto; right: 78px; }
.sr-nav-panel[hidden] { display: none; }
.sr-nav-panel strong { color: #0a3d82; font-size: 12px; }
.sr-nav-panel span { display: grid; grid-template-columns: 16px 1fr auto 58px; align-items: center; gap: 6px; color: #3b5270; }
.sr-nav-panel i { width: 14px; height: 0; border-top: 2px solid var(--series-color); }
.sr-nav-panel i.is-dashed { border-top-style: dashed; }
.sr-nav-panel b { color: #102a4c; font-variant-numeric: tabular-nums; }
.sr-nav-panel em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sr-nav-panel em.is-up { color: #e34641; }
.sr-nav-panel em.is-down { color: #0c9b68; }
.sr-nav-hint { margin: 4px 0 0; color: #8a9bb0; font-size: 11px; }
.sr-chart-zoom button.sr-chart-zoom-reset { min-width: 46px; padding: 0 8px; }

/* 基金收益贡献 */
.sr-contrib-card { grid-column: 1 / -1; padding: 14px 16px 16px; }
.sr-contrib-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr-contrib-head h2 { margin: 0; }
.sr-contrib-since { color: #4f6d8f; font-size: 12px; font-weight: 700; }
.sr-contrib-head .sr-chart-zoom { margin-left: auto; }
.sr-chart-zoom button.is-active { color: #fff; background: #0754b8; border-color: #0754b8; }
.sr-contrib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.sr-contrib-strategy h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; color: #0754b8; font-size: 16px; }
.sr-contrib-strategy h3 span { color: #4f6d8f; font-size: 12px; font-weight: 700; }
.sr-contrib-columns, .sr-contrib-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(80px, 1fr) 70px 56px; align-items: center; gap: 10px; }
.sr-contrib-columns { padding: 0 4px 4px; color: #8a9bb0; font-size: 11px; font-weight: 700; border-bottom: 1px solid #e3edf8; }
.sr-contrib-columns span:nth-child(n+3) { text-align: right; }
.sr-contrib-group h4 { display: flex; justify-content: space-between; margin: 10px 0 4px; padding: 0 4px; color: #2b4565; font-size: 12px; }
.sr-contrib-row { padding: 5px 4px; border-bottom: 1px dashed #edf2f8; font-size: 12px; }
.sr-contrib-name { min-width: 0; color: #1d3557; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sr-contrib-name small { display: block; color: #8a9bb0; font-size: 10px; font-weight: 600; }
.sr-contrib-bar { height: 8px; border-radius: 4px; background: #f1f5fa; overflow: hidden; }
.sr-contrib-bar i { display: block; height: 100%; border-radius: 4px; }
.sr-contrib-bar i.is-up { background: #e34641; }
.sr-contrib-bar i.is-down { background: #0c9b68; }
.sr-contrib-row b, .sr-contrib-row em { text-align: right; font-style: normal; font-variant-numeric: tabular-nums; }
.sr-contrib-row em { color: #4f6d8f; font-weight: 700; }
.sr-contrib-card .is-up { color: #e34641; }
.sr-contrib-card .is-down { color: #0c9b68; }
.sr-contrib-bar i.is-up, .sr-contrib-bar i.is-down { color: transparent; }
@media (max-width: 900px) { .sr-contrib-grid { grid-template-columns: 1fr; } }
.sr-nav-panel span small { grid-column: 2 / -1; margin-top: -2px; color: #7a8ea6; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-nav-panel { max-width: 380px; }

/* 期货对冲：布局与可读性 */
/* row 1 premium chart, row 2 monitor list, row 3 the three charts, row 4 signal / structure / log */
.fh-main-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.fh-monitor { grid-column: 1 / -1; grid-row: 2; }
.fh-z20 { grid-column: 1; grid-row: 3; }
.fh-premium-chart { grid-column: 2; grid-row: 3; }
.fh-pnl-chart { grid-column: 3; grid-row: 3; }
.fh-right-stack { grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.fh-monitor .fh-table-scroll { max-height: none; }
.fh-monitor tr.is-pending td { color: #7a8ea6; }
.fh-monitor td.fh-pending { text-align: left; font-style: italic; }
.fh-intraday-shades rect { fill: #f6c445; opacity: 0.75; }
.fh-intraday-legend .is-band { height: 4px; }
.fh-log-list { max-height: 260px; }
.fh-log-list > div { grid-template-columns: 9px 70px minmax(0, 1fr); align-items: start; padding: 6px 8px; font-size: 11px; line-height: 1.45; }
.fh-log-list > div span { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 1100px) {
  .fh-main-grid, .fh-right-stack { grid-template-columns: 1fr; }
  .fh-monitor, .fh-z20, .fh-premium-chart, .fh-right-stack, .fh-pnl-chart { grid-column: 1; grid-row: auto; }
}

/* 期货对冲：收益表现 */
.fh-performance { margin-top: 10px; padding: 12px 14px; }
.fh-perf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fh-perf-head > span { color: #4f6d8f; font-size: 12px; font-weight: 700; }
.fh-perf-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fh-perf-tiles article { padding: 8px 10px; border: 1px solid #d6e6f6; border-radius: 6px; background: #f8fbff; }
.fh-perf-tiles span { display: block; color: #4f6d8f; font-size: 11px; font-weight: 700; }
.fh-perf-tiles strong { display: block; margin: 2px 0; color: #123665; font-size: 20px; font-weight: 900; }
.fh-perf-tiles small { color: #7a8ea6; font-size: 11px; }
.fh-perf-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.fh-perf-legend { display: flex; gap: 16px; color: #4f6d8f; font-size: 11px; font-weight: 700; }
.fh-perf-legend i { display: inline-block; margin-right: 5px; vertical-align: middle; }
.fh-perf-legend i.is-bar { width: 10px; height: 10px; background: linear-gradient(90deg, #ef323b 50%, #0ca45c 50%); }
.fh-perf-legend i.is-line { width: 16px; height: 0; border-top: 2px solid #075bc5; }
.fh-perf-frame { position: relative; }
.fh-perf-svg { display: block; width: 100%; height: auto; }
.fh-perf-grid line { stroke: #e3edf8; stroke-dasharray: 3 4; }
.fh-perf-grid line.is-zero { stroke: #9fb4cc; stroke-dasharray: none; }
.fh-perf-grid text { fill: #6b7f96; font-size: 11px; }
.fh-perf-grid text.is-cum { fill: #075bc5; }
.fh-perf-bars .is-up { fill: #ef323b; }
.fh-perf-bars .is-down { fill: #0ca45c; }
.fh-perf-line { fill: none; stroke: #075bc5; stroke-width: 2; }
.fh-perf-cross { stroke: #50657f; stroke-dasharray: 4 3; }
.fh-perf-tip { position: absolute; top: 8px; z-index: 2; display: grid; gap: 3px; min-width: 220px; padding: 8px 10px; border: 1px solid #c9dcf2; border-radius: 6px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 22px rgba(23, 61, 104, 0.14); font-size: 12px; pointer-events: none; }
.fh-perf-tip[hidden] { display: none; }
.fh-perf-tip span { display: flex; justify-content: space-between; gap: 12px; color: #4f6d8f; }
.fh-perf-tip b { font-variant-numeric: tabular-nums; }
.fh-perf-table { max-height: 340px; overflow-y: auto; border: 1px solid #d6e6f6; border-radius: 6px; }
.fh-perf-table thead th { position: sticky; top: 0; z-index: 1; background: #eef5fd; }
.fh-perf-table td { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .fh-perf-body, .fh-perf-tiles { grid-template-columns: 1fr; } }
.fh-perf-table .fh-table { width: 100%; min-width: 0; table-layout: auto; }
.fh-perf-table .fh-table th, .fh-perf-table .fh-table td { padding: 0 8px; white-space: nowrap; text-align: right; }
.fh-perf-table .fh-table th:first-child, .fh-perf-table .fh-table td:first-child { text-align: left; }

/* 期货对冲页头的标的选择框：自绘下拉，菜单固定在按钮下方展开。 */
.fh-strategy-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #174d9d;
  font-size: 12px;
  font-weight: 800;
}

.page-header .hd-header-actions .fh-strategy-toggle {
  min-width: 160px;
  justify-content: space-between;
  gap: 10px;
}

.fh-strategy-caret {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}

.fh-strategy-toggle[aria-expanded="true"] .fh-strategy-caret {
  transform: rotate(180deg);
}

.fh-strategy-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid #a9cff5;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(21, 96, 177, 0.18);
}

.fh-strategy-menu[hidden] {
  display: none;
}

.fh-strategy-menu li {
  padding: 7px 12px;
  border-radius: 7px;
  color: #123665;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.fh-strategy-menu li:hover,
.fh-strategy-menu li:focus {
  outline: none;
  background: #edf7ff;
}

.fh-strategy-menu li[aria-selected="true"] {
  color: #ffffff;
  background: #0754b8;
}

/* 溢价率走势：最高 / 最低标注和统计条 */
.fh-intraday-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 980px;
  margin: 10px auto 0;
}

.fh-intraday-stats > div {
  padding: 6px 10px;
  border: 1px solid #d6e6f6;
  border-radius: 6px;
  background: #f8fbff;
  text-align: center;
}

.fh-intraday-stats dt {
  color: #4f6d8f;
  font-size: 11px;
  font-weight: 700;
}

.fh-intraday-stats dd {
  margin: 2px 0 0;
  color: #123665;
  font-size: 18px;
  font-weight: 900;
}

.fh-intraday-stats dd.is-high {
  color: #d92d20;
}

.fh-intraday-stats dd.is-low {
  color: #12805c;
}

.fh-intraday-stats small {
  display: block;
  color: #7a8ea6;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fh-intraday-extreme line {
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.fh-intraday-extreme circle {
  stroke: #ffffff;
  stroke-width: 2;
}

.fh-intraday-extreme rect {
  fill: #ffffff;
  stroke-width: 1.2;
}

.fh-intraday-extreme text {
  font-size: 13px;
  font-weight: 900;
}

.fh-intraday-extreme text.is-time {
  fill: #4f6d8f;
  font-size: 11px;
  font-weight: 700;
}

.fh-intraday-extreme.is-max line,
.fh-intraday-extreme.is-max rect {
  stroke: #d92d20;
}

.fh-intraday-extreme.is-max circle,
.fh-intraday-extreme.is-max text:not(.is-time) {
  fill: #d92d20;
}

.fh-intraday-extreme.is-min line,
.fh-intraday-extreme.is-min rect {
  stroke: #12805c;
}

.fh-intraday-extreme.is-min circle,
.fh-intraday-extreme.is-min text:not(.is-time) {
  fill: #12805c;
}

.is-runtime-monitor { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; }
.runtime-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.runtime-heading h1 { margin: 4px 0; color: #132b49; font-size: 25px; }
.runtime-heading p { margin: 0; color: #6d7f95; font-size: 13px; }
.runtime-health { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; font-weight: 800; background: #e8f7ef; color: #087847; }
.runtime-health.is-error { background: #fff0ed; color: #b42318; }
.runtime-health i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.runtime-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.runtime-kpis article, .runtime-panel { min-width: 0; padding: 16px 18px; border: 1px solid #e3eaf2; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px #183b6410; }
.runtime-kpis article { display: grid; gap: 9px; }
.runtime-kpis article span, .runtime-panel-heading span { color: #718096; font-size: 12px; }
.runtime-kpis article strong { color: #15385f; font-size: 17px; overflow-wrap: anywhere; }
.runtime-panel { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.runtime-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #e9eef4; }
.runtime-panel-heading h2 { margin: 0; color: #183858; font-size: 16px; }
.runtime-table-wrap { overflow-x: auto; }
.runtime-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.runtime-table th, .runtime-table td { padding: 11px 14px; border-bottom: 1px solid #edf1f5; vertical-align: top; }
.runtime-table th { color: #75869b; font-size: 11px; white-space: nowrap; }
.runtime-table td:first-child { min-width: 150px; color: #213d5c; }
.runtime-table td:first-child small { display: block; margin-top: 3px; color: #94a1b1; }
.runtime-error { max-width: 380px; color: #697b90; overflow-wrap: anywhere; }
.runtime-state { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #edf1f5; color: #63758a; white-space: nowrap; font-size: 11px; font-weight: 800; }
.runtime-state.is-running { background: #e5f7ed; color: #087847; }
.runtime-state.is-failed, .runtime-state.is-error, .runtime-state.is-source_error { background: #fff0ed; color: #b42318; }
.runtime-state.is-partial, .runtime-state.is-starting, .runtime-state.is-stopping { background: #fff6df; color: #946200; }
.runtime-log-list { max-height: 420px; overflow: auto; }
.runtime-log { display: grid; grid-template-columns: 178px 155px minmax(140px, 1fr) minmax(140px, 2fr); align-items: start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #edf1f5; color: #42566e; font-size: 12px; }
.runtime-log time { color: #8291a3; }
.runtime-log b { color: #304c6b; }
.runtime-log small { color: #b42318; overflow-wrap: anywhere; }
.runtime-log.is-error { background: #fff9f8; }
.runtime-log.is-warn { background: #fffdf6; }
.runtime-empty { padding: 18px; color: #8190a2; }

@media (max-width: 760px) {
  .runtime-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-heading { align-items: flex-start; }
  .runtime-log { grid-template-columns: 1fr; gap: 4px; }
  .fh-intraday-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}