/* Market page, index board, ETF/ETN, FX, rates, bonds, futures, and options styles. */

.side-market-ico .market-ico-base {
        opacity: 0.62;
      }

.market-subnav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

.market-subnav-row .event-subnav {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
      }

.market-head-tools {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-width: 112px;
      }

.index-edit-button {
        min-height: 28px;
        border: 0.5px solid rgba(255, 176, 32, 0.42);
        background: rgba(255, 176, 32, 0.1);
        color: #ffd27a;
        cursor: pointer;
        padding: 0 11px;
        font-size: 11px;
        font-weight: 800;
      }

.index-edit-button:hover,
      .index-edit-button[aria-expanded="true"] {
        background: rgba(255, 176, 32, 0.18);
        color: #ffe6aa;
      }

.index-picker {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 18;
        width: 286px;
        border: 0.5px solid rgba(255, 176, 32, 0.28);
        background: rgba(8, 11, 16, 0.98);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
        padding: 10px;
        display: grid;
        gap: 8px;
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
        transition:
          opacity 130ms ease,
          transform 130ms ease,
          visibility 130ms ease;
      }

.index-picker.open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }

.index-picker-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: rgba(232, 237, 248, 0.78);
        font-size: 11px;
        font-weight: 800;
      }

.index-picker-title span:last-child {
        color: rgba(255, 176, 32, 0.72);
        font-size: 10px;
      }

.index-picker-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
      }

.index-option {
        min-height: 30px;
        border: 0.5px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.026);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        padding: 0 8px;
        color: rgba(232, 237, 248, 0.68);
        cursor: pointer;
        font-size: 11px;
        font-weight: 800;
      }

.index-option:hover {
        border-color: rgba(255, 176, 32, 0.35);
        color: var(--text);
      }

.index-option input {
        width: 13px;
        height: 13px;
        accent-color: #ffb020;
      }

.index-option small {
        display: block;
        margin-top: 1px;
        color: rgba(232, 237, 248, 0.38);
        font-size: 9px;
        font-weight: 700;
      }

.market-index-board.scroll-panel {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        cursor: grab;
        scroll-snap-type: x proximity;
        user-select: none;
      }

.market-index-board.dragging {
        cursor: grabbing;
        scroll-snap-type: none;
      }

.market-index-board .market-index-card {
        flex: 0 0 clamp(300px, 19vw, 398px);
        min-height: 172px;
        border-radius: 4px;
        border-color: rgba(255, 176, 32, 0.26);
        cursor: pointer;
        scroll-snap-align: start;
        transition:
          border-color 140ms ease,
          box-shadow 140ms ease,
          transform 140ms ease;
      }

.market-index-board .market-index-card:hover {
        border-color: rgba(255, 176, 32, 0.48);
      }

.market-index-board .market-index-card.active {
        border-color: rgba(255, 216, 79, 0.82);
        box-shadow:
          inset 0 0 0 1px rgba(255, 176, 32, 0.34),
          0 0 0 1px rgba(255, 176, 32, 0.08);
        transform: translateY(-1px);
      }

.market-index-board .market-index-head {
        grid-template-columns: 1fr;
        gap: 2px;
        align-items: start;
        padding: 0 2px;
      }

.market-index-board .market-index-date,
      .market-index-board .market-index-change {
        text-align: left;
      }

.market-subnav-row.index-tools-hidden .market-head-tools {
        visibility: hidden;
        pointer-events: none;
      }

.market-index-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
        gap: 12px;
        align-items: stretch;
      }

.market-index-detail-grid .terminal-card {
        min-height: 316px;
        border-radius: 4px;
      }

.market-detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.16);
        padding-bottom: 8px;
      }

.market-detail-head h2 {
        margin: 0;
      }

.market-detail-head span {
        color: rgba(255, 176, 32, 0.72);
        font-size: 10px;
        font-weight: 900;
        white-space: nowrap;
      }

.global-index-table {
        display: grid;
        overflow: hidden;
        border-top: 0.5px solid rgba(255, 255, 255, 0.07);
      }

.global-index-row {
        display: grid;
        grid-template-columns: minmax(96px, 1.15fr) 82px 104px 76px 82px 66px;
        gap: 9px;
        align-items: center;
        min-height: 34px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.055);
        color: rgba(232, 237, 248, 0.66);
        font-size: 11px;
        font-weight: 800;
      }

.global-index-row.header {
        min-height: 28px;
        color: rgba(255, 176, 32, 0.72);
        font-size: 10px;
        font-weight: 900;
      }

.global-index-row.selected {
        background: linear-gradient(90deg, rgba(255, 176, 32, 0.12), rgba(255, 176, 32, 0.03));
      }

.global-index-row b {
        overflow: hidden;
        color: rgba(232, 237, 248, 0.92);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.global-index-row span {
        min-width: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
      }

.global-index-row span:nth-child(2),
      .global-index-row span:nth-child(5),
      .global-index-row span:nth-child(6) {
        text-align: left;
      }

.global-index-row .up {
        color: var(--green);
      }

.global-index-row .down {
        color: var(--red);
      }

.global-index-row .status-strong {
        color: #ffd27a;
      }

.global-index-row .status-good {
        color: var(--green);
      }

.global-index-row .status-bad {
        color: var(--red);
      }

.index-session-note {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin-top: 12px;
      }

.index-session-note span {
        border: 0.5px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.028);
        padding: 7px 8px;
        color: rgba(232, 237, 248, 0.56);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.35;
      }

.index-session-note b {
        display: block;
        color: rgba(255, 216, 79, 0.82);
        font-size: 10px;
      }

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

.selected-index-summary div {
        border: 0.5px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.03);
        padding: 8px;
      }

.selected-index-summary small {
        display: block;
        color: rgba(232, 237, 248, 0.42);
        font-size: 9px;
        font-weight: 900;
      }

.selected-index-summary strong {
        display: block;
        margin-top: 4px;
        color: var(--text);
        font-size: 14px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
      }

.selected-index-summary strong.up {
        color: var(--green);
      }

.selected-index-summary strong.down {
        color: var(--red);
      }

.market-panel {
        display: none;
      }

.market-panel.active {
        display: block;
      }

.market-section-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
        gap: 12px;
      }

.market-section-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

.etf-etn-dashboard {
        display: grid;
        grid-template-columns: minmax(0, 1.72fr) minmax(320px, 0.86fr);
        gap: 12px;
        align-items: stretch;
      }

.etf-heatmap-card,
      .etf-ranking-card {
        min-height: 520px;
        border-radius: 4px;
      }

.etf-panel-head,
      .etf-ranking-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.16);
        padding-bottom: 8px;
      }

.etf-panel-title {
        color: var(--text);
        font-size: 13px;
        font-weight: 900;
      }

.etf-panel-title span {
        margin-left: 8px;
        color: rgba(255, 176, 32, 0.68);
        font-size: 10px;
        font-weight: 800;
      }

.etf-map {
        position: relative;
        height: clamp(390px, 39vw, 590px);
        min-height: 390px;
        overflow: hidden;
        border: 0.5px solid rgba(255, 176, 32, 0.18);
        background: #070a0f;
      }

.etf-map-canvas,
      .etf-map-sector,
      .etf-tile {
        position: absolute;
      }

.etf-map-canvas {
        left: 0;
        top: 0;
      }

.etf-map-sector {
        overflow: hidden;
        border: 0.5px solid rgba(255, 255, 255, 0.16);
        background: #0c1118;
      }

.etf-sector-label {
        height: 18px;
        overflow: hidden;
        background: rgba(255, 176, 32, 0.13);
        color: rgba(255, 232, 185, 0.92);
        padding: 1px 5px;
        font-size: 10px;
        font-weight: 900;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.etf-sector-grid {
        position: absolute;
        inset: 18px 0 0;
        overflow: hidden;
      }

.etf-tile {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
        border: 0.5px solid rgba(10, 12, 16, 0.84);
        padding: 4px;
        text-align: center;
      }

.etf-tile:hover {
        z-index: 4;
        border-color: rgba(255, 232, 185, 0.95);
        box-shadow:
          inset 0 0 0 1px rgba(255, 176, 32, 0.72),
          0 0 0 1px rgba(0, 0, 0, 0.65);
      }

.etf-tile-name {
        max-width: 100%;
        overflow: hidden;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.08;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.etf-tile-change {
        margin-top: 3px;
        color: #fff;
        font-size: 10px;
        font-weight: 900;
      }

.etf-tile.micro .etf-tile-name {
        display: none;
      }

.etf-tile.micro .etf-tile-change {
        margin-top: 0;
        font-size: 9px;
      }

.etf-ranking-toggle {
        display: inline-flex;
        gap: 4px;
      }

.etf-ranking-toggle button {
        min-height: 26px;
        border: 0.5px solid rgba(255, 176, 32, 0.24);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(232, 237, 248, 0.58);
        padding: 0 9px;
        font-size: 10px;
        font-weight: 900;
      }

.etf-ranking-toggle button.active {
        border-color: rgba(255, 176, 32, 0.62);
        background: rgba(255, 176, 32, 0.14);
        color: #ffd27a;
      }

.etf-ranking-list {
        display: grid;
        gap: 7px;
      }

.etf-ranking-row {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) 70px 68px;
        gap: 8px;
        align-items: center;
        min-height: 42px;
        border: 0.5px solid rgba(255, 255, 255, 0.065);
        background: rgba(255, 255, 255, 0.024);
        padding: 7px 8px;
      }

.etf-rank-no {
        color: rgba(255, 176, 32, 0.78);
        font-size: 11px;
        font-weight: 900;
        text-align: center;
      }

.etf-rank-name {
        min-width: 0;
      }

.etf-rank-name b {
        display: block;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.92);
        font-size: 11px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.etf-rank-name span {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.42);
        font-size: 9px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.etf-rank-change,
      .etf-rank-volume {
        text-align: right;
        font-size: 11px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
      }

.etf-rank-change.up {
        color: var(--green);
      }

.etf-rank-change.down {
        color: var(--red);
      }

.etf-rank-volume {
        color: rgba(232, 237, 248, 0.68);
      }

.market-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
      }

.market-stat-card {
        min-height: 76px;
        border: 0.5px solid rgba(255, 176, 32, 0.18);
        background: rgba(255, 255, 255, 0.026);
        padding: 10px;
      }

.market-stat-card small {
        display: block;
        color: rgba(232, 237, 248, 0.45);
        font-size: 10px;
        font-weight: 800;
      }

.market-stat-card strong {
        display: block;
        margin-top: 7px;
        color: var(--text);
        font-size: 19px;
        font-variant-numeric: tabular-nums;
        font-weight: 900;
      }

.market-stat-card em {
        display: block;
        margin-top: 3px;
        color: var(--green);
        font-size: 11px;
        font-style: normal;
        font-weight: 800;
      }

.market-stat-card em.down {
        color: var(--red);
      }

.market-table {
        display: grid;
        border-top: 0.5px solid rgba(255, 255, 255, 0.06);
      }

.market-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 86px 72px 76px;
        gap: 10px;
        align-items: center;
        min-height: 38px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.055);
        color: rgba(232, 237, 248, 0.62);
        font-size: 12px;
        font-weight: 700;
      }

.market-table-row.header {
        min-height: 30px;
        color: rgba(255, 176, 32, 0.72);
        font-size: 10px;
        font-weight: 900;
      }

.market-table-row b {
        overflow: hidden;
        color: rgba(232, 237, 248, 0.88);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.market-table-row span {
        text-align: right;
        font-variant-numeric: tabular-nums;
      }

.market-table-row .up {
        color: var(--green);
      }

.market-table-row .down {
        color: var(--red);
      }

.market-depth-list {
        display: grid;
        gap: 8px;
      }

.market-depth-item {
        border: 0.5px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.025);
        padding: 10px;
      }

.market-depth-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: rgba(232, 237, 248, 0.88);
        font-size: 12px;
        font-weight: 900;
      }

.market-depth-top span {
        color: var(--amber);
        font-variant-numeric: tabular-nums;
      }

.market-depth-bar {
        height: 6px;
        margin-top: 9px;
        background: rgba(255, 255, 255, 0.065);
        overflow: hidden;
      }

.market-depth-bar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--blue), var(--green));
      }

.market-scenario-grid {
        display: grid;
        gap: 8px;
      }

.market-scenario {
        border-left: 2px solid rgba(255, 176, 32, 0.5);
        background: rgba(255, 176, 32, 0.055);
        padding: 10px 12px;
        color: rgba(232, 237, 248, 0.66);
        font-size: 12px;
        line-height: 1.48;
      }

.market-scenario b {
        display: block;
        margin-bottom: 4px;
        color: var(--text);
        font-size: 12px;
      }

.market-placeholder-chart {
        position: relative;
        min-height: 210px;
        border: 0.5px solid rgba(255, 255, 255, 0.06);
        background:
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
          rgba(255, 255, 255, 0.018);
        overflow: hidden;
      }

.market-placeholder-chart::before {
        content: "";
        position: absolute;
        inset: 38px 18px 34px;
        background: linear-gradient(135deg, transparent 0 18%, rgba(77, 163, 255, 0.12) 18% 34%, transparent 34% 46%, rgba(0, 208, 132, 0.16) 46% 66%, transparent 66%);
        clip-path: polygon(0 72%, 16% 64%, 30% 68%, 45% 43%, 58% 52%, 72% 30%, 86% 38%, 100% 24%, 100% 100%, 0 100%);
      }

.market-placeholder-chart span {
        position: absolute;
        left: 14px;
        bottom: 12px;
        color: rgba(232, 237, 248, 0.45);
        font-size: 10px;
        font-weight: 800;
      }

.fx-map-panel {
        position: relative;
        margin-bottom: 12px;
        border: 0.5px solid rgba(255, 176, 32, 0.22);
        background:
          radial-gradient(circle at 72% 42%, rgba(255, 176, 32, 0.09), transparent 30%),
          radial-gradient(circle at 20% 38%, rgba(77, 163, 255, 0.08), transparent 28%),
          rgba(7, 10, 15, 0.58);
        overflow: hidden;
      }

.fx-overview-grid {
        display: grid;
        grid-template-columns: minmax(320px, 0.86fr) minmax(420px, 1.14fr);
        gap: 12px;
        align-items: stretch;
        margin-bottom: 12px;
      }

.fx-overview-grid .fx-map-panel {
        margin-bottom: 0;
      }

.fx-map-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.16);
        padding: 10px 12px 8px;
      }

.fx-map-title {
        color: var(--text);
        font-size: 13px;
        font-weight: 900;
      }

.fx-map-title span {
        margin-left: 8px;
        color: rgba(255, 176, 32, 0.7);
        font-size: 10px;
        font-weight: 800;
      }

.fx-map-sub {
        color: rgba(232, 237, 248, 0.42);
        font-size: 10px;
        font-weight: 800;
        text-align: right;
      }

.fx-map-stage {
        position: relative;
        height: clamp(390px, 32vw, 520px);
        min-height: 360px;
        background:
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 44px),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 56px);
      }

.fx-overview-grid .fx-map-stage {
        height: clamp(190px, 16vw, 260px);
        min-height: 190px;
      }

.fx-overview-grid .fx-region-label {
        font-size: 11px;
      }

.fx-overview-grid .fx-flow-label {
        font-size: 11px;
      }

.fx-world-map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }

.fx-world-image {
        opacity: 0.72;
        pointer-events: none;
      }

.fx-region-label {
        fill: rgba(232, 237, 248, 0.34);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.4px;
      }

.fx-hub-dot {
        fill: #ffb020;
        stroke: rgba(8, 11, 16, 0.9);
        stroke-width: 3;
      }

.fx-hub-label {
        fill: #ffd27a;
        font-size: 12px;
        font-weight: 900;
      }

.fx-flow-line {
        fill: none;
        stroke: rgba(255, 176, 32, 0.78);
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-dasharray: 9 6;
        filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.35));
        pointer-events: none;
      }

.fx-flow-group.secondary .fx-flow-line {
        stroke: rgba(77, 163, 255, 0.72);
        filter: drop-shadow(0 0 7px rgba(77, 163, 255, 0.28));
      }

.fx-flow-group:hover .fx-flow-line,
      .fx-flow-group:focus-within .fx-flow-line {
        stroke-width: 4.2;
        stroke: #ffe6aa;
        filter: drop-shadow(0 0 12px rgba(255, 176, 32, 0.62));
      }

.fx-flow-hit {
        fill: none;
        stroke: transparent;
        stroke-width: 22;
        stroke-linecap: round;
        cursor: crosshair;
        pointer-events: stroke;
      }

.fx-flow-label {
        fill: rgba(255, 232, 185, 0.92);
        font-size: 13px;
        font-weight: 900;
        paint-order: stroke;
        stroke: rgba(7, 10, 15, 0.78);
        stroke-width: 3px;
        stroke-linejoin: round;
      }

.fx-map-note {
        position: absolute;
        left: 12px;
        bottom: 10px;
        color: rgba(232, 237, 248, 0.42);
        font-size: 10px;
        font-weight: 800;
      }

.fx-map-tooltip {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 130;
        width: 254px;
        border: 0.5px solid rgba(255, 176, 32, 0.34);
        background: rgba(7, 10, 15, 0.88);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.44);
        color: var(--text);
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-9999px, -9999px, 0);
        transition: opacity 90ms ease;
        backdrop-filter: blur(5px);
      }

.fx-map-tooltip.visible {
        opacity: 1;
      }

.fx-tooltip-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.18);
        padding: 9px 10px 7px;
      }

.fx-tooltip-pair {
        color: #fff;
        font-size: 15px;
        font-weight: 900;
      }

.fx-tooltip-route {
        margin-top: 4px;
        color: rgba(232, 237, 248, 0.48);
        font-size: 10px;
        font-weight: 800;
      }

.fx-tooltip-status {
        color: #ffd27a;
        font-size: 11px;
        font-weight: 900;
        text-align: right;
        white-space: nowrap;
      }

.fx-tooltip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: rgba(255, 255, 255, 0.045);
      }

.fx-tooltip-grid span,
      .fx-tooltip-note {
        background: rgba(0, 0, 0, 0.18);
        padding: 7px 8px;
      }

.fx-tooltip-grid small,
      .fx-tooltip-note small {
        display: block;
        margin-bottom: 4px;
        color: rgba(232, 237, 248, 0.42);
        font-size: 9px;
        font-weight: 900;
      }

.fx-tooltip-grid b,
      .fx-tooltip-note b {
        color: rgba(232, 237, 248, 0.88);
        font-size: 11px;
        font-weight: 850;
      }

.fx-tooltip-note {
        border-top: 0.5px solid rgba(255, 255, 255, 0.055);
      }

.fx-country-panel {
        border: 0.5px solid rgba(255, 176, 32, 0.22);
        background:
          linear-gradient(180deg, rgba(7, 10, 15, 0.84), rgba(7, 10, 15, 0.7)),
          rgba(7, 10, 15, 0.68);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
      }

.fx-country-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.16);
        padding: 10px 12px 8px;
      }

.fx-country-title {
        color: var(--text);
        font-size: 13px;
        font-weight: 950;
      }

.fx-country-title span {
        display: block;
        margin-top: 3px;
        color: rgba(232, 237, 248, 0.42);
        font-size: 10px;
        font-weight: 800;
      }

.fx-country-code {
        border: 0.5px solid rgba(255, 176, 32, 0.28);
        background: rgba(255, 176, 32, 0.11);
        color: #ffd27a;
        font-size: 10px;
        font-weight: 950;
        padding: 5px 7px;
      }

.fx-country-selector.scroll-panel {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.055);
        padding: 7px 8px;
      }

.fx-country-selector button {
        flex: 0 0 auto;
        border: 0.5px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(232, 237, 248, 0.56);
        cursor: pointer;
        font-size: 10px;
        font-weight: 900;
        padding: 6px 9px;
      }

.fx-country-selector button:hover,
      .fx-country-selector button.active {
        border-color: rgba(255, 176, 32, 0.5);
        background: rgba(255, 176, 32, 0.14);
        color: #ffd27a;
      }

.fx-rate-table.scroll-panel {
        min-height: 0;
        overflow: auto;
        padding: 8px;
      }

.fx-rate-row {
        display: grid;
        grid-template-columns: 82px 68px 70px 78px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        min-height: 37px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.055);
        color: rgba(232, 237, 248, 0.72);
        font-size: 11px;
        font-weight: 800;
      }

.fx-rate-row.header {
        min-height: 24px;
        color: rgba(232, 237, 248, 0.34);
        font-size: 9px;
        font-weight: 950;
      }

.fx-rate-row b {
        color: var(--text);
        font-size: 12px;
        font-weight: 950;
      }

.fx-rate-row .up {
        color: var(--green);
      }

.fx-rate-row .down {
        color: var(--red);
      }

.fx-rate-impact {
        overflow: hidden;
        color: rgba(232, 237, 248, 0.56);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.fx-country-note {
        margin-top: 8px;
        border-left: 2px solid rgba(77, 163, 255, 0.72);
        background: rgba(77, 163, 255, 0.08);
        color: rgba(232, 237, 248, 0.64);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.5;
        padding: 8px 9px;
      }

.home-heatmap,
      .home-news-panel,
      .market-judgment-panel,
      .home-sector-panel,
      .market-index-card,
      .ranking-panel,
      .panel {
        background: var(--panel);
        border: 0.5px solid var(--line);
        border-radius: 12px;
      }

.market-judgment-panel {
        display: grid;
        gap: 9px;
        padding: 12px;
      }

.market-conclusion {
        border-left: 2px solid rgba(255, 176, 32, 0.72);
        background: linear-gradient(90deg, rgba(255, 176, 32, 0.1), rgba(255, 255, 255, 0.018));
        padding: 9px 11px;
        color: rgba(255, 232, 185, 0.92);
        font-size: 12px;
        font-weight: 900;
        line-height: 1.45;
      }

.market-signal-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

.market-signal-card {
        min-width: 0;
        min-height: 148px;
        overflow: hidden;
        border: 0.5px solid rgba(255, 255, 255, 0.075);
        background: rgba(255, 255, 255, 0.026);
        padding: 8px;
      }

.market-signal-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 5px;
      }

.market-signal-name {
        color: rgba(232, 237, 248, 0.62);
        font-size: 10px;
        font-weight: 800;
      }

.market-signal-state {
        border: 0.5px solid rgba(255, 176, 32, 0.22);
        background: rgba(255, 176, 32, 0.09);
        color: #ffd27a;
        padding: 2px 5px;
        font-size: 9px;
        font-weight: 900;
      }

.market-signal-value {
        color: var(--text);
        font-size: 18px;
        font-weight: 900;
        line-height: 1.05;
      }

.market-signal-note {
        margin-top: 5px;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.42);
        font-size: 10px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.market-risk-card,
      .market-fx-card,
      .market-sector-card {
        display: grid;
        align-content: start;
      }

.market-risk-value {
        margin-top: -1px;
        font-size: 18px;
        font-weight: 950;
        line-height: 1;
      }

.market-risk-value.neutral {
        color: #f4f7ff;
      }

.market-risk-value.up {
        color: #ff4d5a;
      }

.market-risk-value.down {
        color: #5b9cff;
      }

.market-risk-graph {
        position: relative;
        height: 58px;
        margin-top: 8px;
        border: 0.5px solid rgba(255, 255, 255, 0.045);
        background: rgba(0, 0, 0, 0.1);
      }

.market-risk-range {
        position: absolute;
        left: 7px;
        right: 7px;
        bottom: 3px;
        display: flex;
        justify-content: space-between;
        color: rgba(232, 237, 248, 0.28);
        font-size: 8px;
        font-weight: 900;
      }

.market-risk-zero {
        position: absolute;
        left: 7px;
        right: 7px;
        top: 50%;
        height: 1px;
        background: rgba(244, 247, 255, 0.64);
      }

.market-risk-bars {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 6px;
        bottom: 14px;
        display: flex;
        align-items: stretch;
        gap: 4px;
      }

.market-risk-bar {
        position: relative;
        flex: 1 1 0;
      }

.market-risk-bar::before {
        content: "";
        position: absolute;
        left: 16%;
        right: 16%;
        height: var(--bar-h);
        background: rgba(244, 247, 255, 0.84);
      }

.market-risk-bar.up::before {
        bottom: 50%;
      }

.market-risk-bar.down::before {
        top: 50%;
      }

.market-risk-bar.up:not(.neutral)::before {
        background: rgba(255, 77, 90, 0.92);
      }

.market-risk-bar.down:not(.neutral)::before {
        background: rgba(91, 156, 255, 0.92);
      }

.market-supply-card {
        display: grid;
        gap: 4px;
      }

.market-supply-body {
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(118px, 1.14fr);
        gap: 8px;
        align-items: end;
      }

.market-supply-copy {
        min-width: 0;
      }

.market-supply-summary {
        overflow: hidden;
        color: rgba(232, 237, 248, 0.9);
        font-size: 11px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.market-supply-lines {
        display: grid;
        gap: 3px;
        margin-top: 7px;
      }

.market-supply-line {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
        color: rgba(232, 237, 248, 0.6);
        font-size: 9px;
        font-weight: 850;
      }

.market-supply-line em {
        overflow: hidden;
        font-style: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.market-supply-line b {
        color: rgba(244, 247, 255, 0.9);
        font-size: 9px;
        font-weight: 950;
        white-space: nowrap;
      }

.market-supply-line.foreign em,
      .market-supply-line.foreign b {
        color: #ffb020;
      }

.market-supply-line.institution em,
      .market-supply-line.institution b {
        color: #58a6ff;
      }

.market-supply-line.individual em,
      .market-supply-line.individual b {
        color: #b982ff;
      }

.market-supply-balance {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

.market-supply-axis-labels {
        display: flex;
        justify-content: space-between;
        color: rgba(232, 237, 248, 0.35);
        font-size: 9px;
        font-weight: 900;
      }

.market-supply-track {
        position: relative;
        height: 49px;
        border: 0.5px solid rgba(255, 255, 255, 0.055);
        background:
          linear-gradient(90deg, rgba(255, 76, 86, 0.1), rgba(255, 255, 255, 0.035) 50%, rgba(43, 196, 138, 0.1)),
          rgba(0, 0, 0, 0.12);
      }

.market-supply-track::before {
        content: "";
        position: absolute;
        left: 7px;
        right: 7px;
        top: 23px;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12));
      }

.market-supply-zero {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 50%;
        width: 1px;
        background: rgba(232, 237, 248, 0.5);
        transform: translateX(-50%);
      }

.market-supply-zero em {
        position: absolute;
        bottom: 0;
        left: 50%;
        color: rgba(232, 237, 248, 0.54);
        font-size: 9px;
        font-style: normal;
        font-weight: 900;
        transform: translateX(-50%);
      }

.market-supply-dot {
        position: absolute;
        top: 16px;
        display: flex;
        align-items: center;
        gap: 3px;
        color: rgba(232, 237, 248, 0.66);
        font-size: 9px;
        font-weight: 900;
        transform: translateX(-50%);
        white-space: nowrap;
      }

.market-supply-dot i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.24);
      }

.market-supply-dot.foreign i {
        background: #ffb020;
      }

.market-supply-dot.institution i {
        background: #58a6ff;
      }

.market-supply-dot.individual i {
        background: #b982ff;
      }

.market-supply-dot em {
        font-style: normal;
      }

.market-risk-layout {
        display: grid;
        grid-template-columns: minmax(92px, 0.4fr) minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
        min-height: 100px;
      }

.market-risk-copy {
        display: grid;
        align-content: start;
        min-width: 0;
      }

.market-risk-desc {
        margin-top: 15px;
        color: rgba(232, 237, 248, 0.58);
        font-size: 10px;
        font-weight: 850;
        line-height: 1.38;
        word-break: keep-all;
      }

.market-risk-curve-wrap {
        position: relative;
        min-width: 0;
        min-height: 98px;
      }

.market-risk-interval {
        position: absolute;
        top: 0;
        right: 2px;
        z-index: 1;
        border: 0.5px solid rgba(255, 176, 32, 0.18);
        background: rgba(255, 176, 32, 0.065);
        color: rgba(255, 210, 122, 0.78);
        padding: 1px 4px;
        font-size: 8px;
        font-weight: 900;
      }

.market-risk-curve {
        display: block;
        width: 100%;
        height: 98px;
        overflow: visible;
      }

.market-risk-base {
        stroke: rgba(244, 247, 255, 0.42);
        stroke-dasharray: 2 3;
        stroke-width: 1;
        stroke-linecap: round;
      }

.market-risk-vgrid {
        stroke: rgba(142, 154, 180, 0.13);
        stroke-width: 0.7;
      }

.market-risk-area.up {
        fill: rgba(255, 57, 72, 0.2);
      }

.market-risk-area.down {
        fill: rgba(29, 141, 255, 0.2);
      }

.market-risk-line {
        fill: none;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
      }

.market-risk-line.up {
        stroke: #ff3948;
      }

.market-risk-line.down {
        stroke: #1d8dff;
      }

.market-risk-red-fill {
        fill: rgba(255, 57, 72, 0.12);
      }

.market-risk-red-line {
        fill: none;
        stroke: #ff3948;
        stroke-width: 4.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

.market-risk-red-tick {
        stroke: rgba(255, 57, 72, 0.86);
        stroke-width: 2.7;
        stroke-linecap: round;
      }

.market-risk-blue-fill {
        fill: rgba(29, 141, 255, 0.11);
      }

.market-risk-blue-line {
        fill: none;
        stroke: #1d8dff;
        stroke-width: 4.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

.market-risk-blue-tick {
        stroke: rgba(29, 141, 255, 0.88);
        stroke-width: 2.7;
        stroke-linecap: round;
      }

.market-supply-card {
        grid-template-rows: auto auto 1fr;
      }

.market-supply-card .market-signal-top {
        margin-bottom: 2px;
      }

.market-supply-summary {
        margin-bottom: -2px;
        color: rgba(244, 247, 255, 0.92);
        font-size: 11px;
        font-weight: 950;
      }

.market-supply-flow {
        display: grid;
        gap: 7px;
        margin-top: 4px;
      }

.market-supply-flow-row {
        display: grid;
        grid-template-columns: 34px minmax(42px, 0.34fr) minmax(72px, 1fr) minmax(42px, 0.34fr);
        align-items: center;
        gap: 5px;
        min-width: 0;
      }

.market-supply-flow-label {
        color: rgba(232, 237, 248, 0.78);
        font-size: 9px;
        font-weight: 950;
        white-space: nowrap;
      }

.market-supply-flow-row.foreign .market-supply-flow-label {
        color: #50d98b;
      }

.market-supply-flow-row.institution .market-supply-flow-label {
        color: #4ab4ff;
      }

.market-supply-flow-row.individual .market-supply-flow-label {
        color: #f4c74b;
      }

.market-supply-flow-edge {
        overflow: hidden;
        font-size: 8px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.market-supply-flow-edge.sell {
        color: rgba(255, 88, 100, 0.9);
        text-align: right;
      }

.market-supply-flow-edge.buy {
        color: rgba(54, 213, 132, 0.9);
        text-align: left;
      }

.market-supply-flow-track {
        position: relative;
        height: 14px;
        overflow: hidden;
        border: 0.5px solid rgba(255, 255, 255, 0.055);
        background: rgba(7, 12, 18, 0.72);
      }

.market-supply-flow-half {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        opacity: 0.45;
      }

.market-supply-flow-half.sell {
        left: 0;
        background: linear-gradient(90deg, rgba(188, 54, 66, 0.16), rgba(229, 71, 82, 0.34));
      }

.market-supply-flow-half.buy {
        right: 0;
        background: linear-gradient(90deg, rgba(49, 205, 126, 0.32), rgba(31, 143, 91, 0.12));
      }

.market-supply-flow-fill {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--fill-left);
        right: var(--fill-right);
        opacity: 0.92;
      }

.market-supply-flow-fill.sell {
        background: linear-gradient(90deg, rgba(194, 50, 63, 0.95), rgba(255, 89, 100, 0.78));
      }

.market-supply-flow-fill.buy {
        background: linear-gradient(90deg, rgba(58, 216, 135, 0.82), rgba(27, 154, 93, 0.94));
      }

.market-supply-flow-zero {
        position: absolute;
        top: -3px;
        bottom: -3px;
        left: 50%;
        width: 1px;
        background: rgba(244, 247, 255, 0.72);
        transform: translateX(-50%);
      }

.market-supply-flow-dot {
        position: absolute;
        top: 50%;
        left: var(--dot-left);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #f3f6ff;
        box-shadow:
          0 0 0 2px rgba(0, 0, 0, 0.36),
          0 0 8px rgba(244, 247, 255, 0.38);
        transform: translate(-50%, -50%);
      }

.market-supply-flow-dot.sell {
        background: #ffadb5;
      }

.market-supply-flow-dot.buy {
        background: #d8ffe6;
      }

.market-supply-flow-axis {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        margin: -2px 43px 0 84px;
        border-top: 0.5px solid rgba(142, 154, 180, 0.28);
        padding-top: 3px;
        color: rgba(232, 237, 248, 0.44);
        font-size: 8px;
        font-weight: 850;
      }

.market-supply-flow-axis span {
        text-align: center;
        white-space: nowrap;
      }

.market-supply-curve-wrap {
        position: relative;
        min-width: 0;
        min-height: 116px;
        padding-right: 4px;
      }

.market-supply-curve {
        display: block;
        width: 100%;
        height: 84px;
        overflow: visible;
      }

.market-supply-grid-line {
        stroke: rgba(142, 154, 180, 0.16);
        stroke-width: 0.7;
        vector-effect: non-scaling-stroke;
      }

.market-supply-grid-line.vertical {
        stroke: rgba(142, 154, 180, 0.12);
      }

.market-supply-zero-grid {
        stroke: rgba(244, 247, 255, 0.42);
        stroke-dasharray: 2 3;
        stroke-width: 0.9;
        vector-effect: non-scaling-stroke;
      }

.market-supply-curve-line {
        fill: none;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.28));
      }

.market-supply-curve-line.foreign {
        stroke: #ff8a2a;
      }

.market-supply-curve-line.institution {
        stroke: #2da7ff;
      }

.market-supply-curve-line.individual {
        stroke: #8d35ff;
      }

.market-supply-axis {
        stroke: rgba(244, 247, 255, 0.78);
        stroke-width: 3;
        stroke-linecap: round;
      }

.market-supply-axis-zero {
        stroke: rgba(244, 247, 255, 0.78);
        stroke-width: 3;
        stroke-linecap: round;
      }

.market-supply-zero-text {
        fill: rgba(244, 247, 255, 0.94);
        font-size: 14px;
        font-weight: 950;
        text-anchor: middle;
      }

.market-supply-curve-labels {
        position: absolute;
        top: 0;
        right: 0;
        width: min(38%, 112px);
        height: 84px;
        pointer-events: none;
      }

.market-supply-curve-label {
        position: absolute;
        top: var(--label-y, 40px);
        right: 0;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        font-size: 9px;
        font-weight: 950;
        line-height: 1;
        white-space: nowrap;
        transition: top 220ms ease;
      }

.market-supply-curve-label em {
        overflow: hidden;
        font-style: normal;
        text-overflow: ellipsis;
      }

.market-supply-curve-label b {
        font-size: 9px;
        font-weight: 950;
      }

.market-supply-curve-label.foreign,
      .market-supply-curve-label.foreign b {
        color: #ff8a2a;
      }

.market-supply-curve-label.institution,
      .market-supply-curve-label.institution b {
        color: #4ab4ff;
      }

.market-supply-curve-label.individual,
      .market-supply-curve-label.individual b {
        color: #a66aff;
      }

.market-supply-balance-bar {
        position: relative;
        height: 29px;
        margin-top: -4px;
      }

.market-supply-balance-label {
        position: absolute;
        top: 0;
        color: rgba(232, 237, 248, 0.42);
        font-size: 8px;
        font-weight: 900;
      }

.market-supply-balance-label.sell {
        left: 3px;
      }

.market-supply-balance-label.buy {
        right: 3px;
      }

.market-supply-balance-track {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 3px;
        height: 15px;
        border: 0.5px solid rgba(255, 255, 255, 0.055);
        background:
          linear-gradient(90deg, rgba(255, 77, 90, 0.1), rgba(244, 247, 255, 0.04) 50%, rgba(43, 196, 138, 0.11)),
          rgba(0, 0, 0, 0.16);
      }

.market-supply-balance-track::before {
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        top: 8px;
        height: 1px;
        background: rgba(244, 247, 255, 0.48);
      }

.market-supply-balance-zero {
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: 50%;
        width: 1px;
        background: rgba(244, 247, 255, 0.58);
        transform: translateX(-50%);
      }

.market-supply-balance-zero em {
        position: absolute;
        top: -10px;
        left: 50%;
        color: rgba(244, 247, 255, 0.74);
        font-size: 8px;
        font-style: normal;
        font-weight: 950;
        transform: translateX(-50%);
      }

.market-supply-balance-dot {
        position: absolute;
        top: 50%;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: rgba(232, 237, 248, 0.62);
        font-size: 8px;
        font-weight: 900;
        transform: translate(-50%, -50%);
        white-space: nowrap;
      }

.market-supply-balance-dot i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.34);
      }

.market-supply-balance-dot.foreign i {
        background: #ff8a2a;
      }

.market-supply-balance-dot.institution i {
        background: #2da7ff;
      }

.market-supply-balance-dot.individual i {
        background: #8d35ff;
      }

.market-supply-balance-dot em {
        font-style: normal;
      }

.market-visual-split {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(104px, 1fr);
        gap: 8px;
        align-items: end;
      }

.market-visual-copy {
        min-width: 0;
      }

.market-fx-chart {
        min-width: 0;
        height: 66px;
      }

.market-mini-line {
        display: block;
        width: 100%;
        height: 100%;
      }

.market-mini-line .market-mini-fill {
        fill: rgba(255, 255, 255, 0.035);
      }

.market-mini-line .market-mini-stroke {
        fill: none;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

.market-mini-line.up .market-mini-stroke {
        stroke: #ff4d5a;
      }

.market-mini-line.down .market-mini-stroke {
        stroke: #5b9cff;
      }

.market-mini-line.neutral .market-mini-stroke {
        stroke: #f4f7ff;
      }

.market-sector-top3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 11px;
      }

.market-sector-mini {
        min-width: 0;
        border: 0.5px solid rgba(255, 255, 255, 0.07);
        background: rgba(0, 0, 0, 0.14);
        padding: 7px 6px;
      }

.market-sector-mini span {
        color: rgba(232, 237, 248, 0.36);
        font-size: 8px;
        font-weight: 950;
      }

.market-sector-mini b {
        display: block;
        margin-top: 3px;
        overflow: hidden;
        color: rgba(244, 247, 255, 0.88);
        font-size: 10px;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.market-sector-mini em {
        display: block;
        margin-top: 3px;
        font-size: 9px;
        font-style: normal;
        font-weight: 950;
      }

.market-sector-mini.up {
        border-color: rgba(255, 77, 90, 0.18);
        background: rgba(255, 77, 90, 0.055);
      }

.market-sector-mini.up em {
        color: #ff4d5a;
      }

.market-sector-mini.down {
        border-color: rgba(91, 156, 255, 0.18);
        background: rgba(91, 156, 255, 0.055);
      }

.market-sector-mini.down em {
        color: #5b9cff;
      }

.market-overview {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 22px;
      }

.market-overview.home-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(132px, 1fr));
        grid-auto-rows: 1fr;
        gap: 8px;
        height: 100%;
        margin-bottom: 0;
      }

.market-index-card {
        position: relative;
        min-height: 184px;
        padding: 10px 12px 8px;
        overflow: hidden;
        background: #20252f;
        border-color: rgba(142, 154, 180, 0.34);
        border-radius: 6px;
      }

.home-index-grid .market-index-card {
        min-height: 132px;
        height: 100%;
        padding: 8px;
      }

.market-index-head {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 0 30px;
        color: rgba(221, 225, 236, 0.62);
        pointer-events: none;
      }

.home-index-grid .market-index-head {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 0 2px;
        align-items: start;
      }

.home-index-grid .market-index-date,
      .home-index-grid .market-index-change {
        text-align: left;
      }

.market-index-name {
        color: rgba(221, 225, 236, 0.72);
        font-size: 15px;
        font-weight: 600;
      }

.market-index-date {
        color: rgba(221, 225, 236, 0.52);
        font-size: 10px;
        text-align: center;
      }

.market-index-change {
        color: #00c878;
        font-size: 12px;
        font-weight: 700;
        text-align: right;
      }

.market-index-change.down {
        color: #ff525c;
      }

.market-index-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

/* FX flow map visual refresh. */
.fx-overview-grid {
        grid-template-columns: minmax(540px, 1fr) minmax(300px, 340px);
      }

.fx-map-panel {
        border-color: rgba(66, 154, 255, 0.22);
        background:
          linear-gradient(180deg, rgba(8, 18, 31, 0.97), rgba(2, 8, 14, 0.98));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 42px rgba(0, 0, 0, 0.22);
      }

.fx-map-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(5, 12, 19, 0.76), transparent 22%, transparent 76%, rgba(5, 12, 19, 0.7));
        pointer-events: none;
        z-index: 0;
      }

.fx-map-head {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(190px, 1fr) auto auto;
        align-items: start;
        border-bottom: 0;
        padding: 15px 18px 0;
      }

.fx-map-title {
        font-size: 26px;
        line-height: 1.05;
        letter-spacing: 0;
      }

.fx-map-sub {
        margin-top: 7px;
        color: rgba(197, 218, 238, 0.62);
        font-size: 12px;
        text-align: left;
      }

.fx-map-live {
        justify-self: start;
        margin-top: 33px;
        color: rgba(197, 218, 238, 0.65);
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
      }

.fx-map-live span {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 7px;
        border-radius: 999px;
        background: #27e79a;
        vertical-align: -1px;
      }

.fx-flow-strength {
        display: flex;
        align-items: end;
        gap: 4px;
        border: 0.5px solid rgba(116, 161, 215, 0.22);
        background: rgba(5, 13, 23, 0.54);
        color: rgba(197, 218, 238, 0.72);
        padding: 7px 9px;
      }

.fx-flow-strength span {
        margin-right: 5px;
        font-size: 10px;
        font-weight: 850;
      }

.fx-flow-strength i {
        width: 4px;
        display: block;
        background: linear-gradient(180deg, #ffb020, #ff7b2c);
      }

.fx-map-stage,
      .fx-overview-grid .fx-map-stage {
        height: clamp(270px, 23vw, 350px);
        min-height: 270px;
        background:
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 34px),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 42px);
      }

.fx-world-map {
        z-index: 1;
      }

.fx-world-image {
        opacity: 0.78;
        pointer-events: none;
      }

.fx-source-dot {
        stroke: rgba(248, 252, 255, 0.82);
        stroke-width: 2;
      }

.fx-source-dot.blue {
        fill: #3d6f97;
      }

.fx-source-dot.amber {
        fill: #c98a2c;
      }

.fx-hub-dot {
        fill: #d7a839;
        stroke: rgba(255, 246, 220, 0.92);
        stroke-width: 3;
      }

.fx-hub-label {
        fill: rgba(255, 237, 196, 0.9);
        font-size: 12px;
        font-weight: 900;
      }

.fx-flow-line,
      .fx-flow-group.secondary .fx-flow-line {
        stroke-width: 2.2;
        stroke-dasharray: none;
      }

.fx-flow-group.blue .fx-flow-line {
        stroke: #3d6f97;
      }

.fx-flow-group.amber .fx-flow-line {
        stroke: #c98a2c;
      }

.fx-flow-group:hover .fx-flow-line,
      .fx-flow-group:focus-within .fx-flow-line {
        stroke-width: 3;
      }

.fx-flow-hit {
        stroke-width: 28;
        cursor: crosshair;
      }

.fx-map-card,
      .fx-mini-card {
        position: absolute;
        z-index: 3;
        border: 0.5px solid rgba(78, 169, 255, 0.33);
        background: rgba(5, 17, 29, 0.72);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
        color: rgba(239, 246, 255, 0.9);
        backdrop-filter: blur(5px);
      }

.fx-map-card {
        min-width: 112px;
        padding: 8px 10px;
        margin: 0;
        appearance: none;
        text-align: left;
        font: inherit;
        cursor: pointer;
        pointer-events: auto;
      }

.fx-map-card:hover,
      .fx-map-card.active {
        border-color: rgba(215, 168, 57, 0.74);
        background: rgba(17, 28, 42, 0.88);
      }

.fx-map-card.active {
        box-shadow: inset 0 0 0 1px rgba(215, 168, 57, 0.3), 0 14px 34px rgba(0, 0, 0, 0.3);
      }

.fx-map-card.amber,
      .fx-mini-card.amber {
        border-color: rgba(255, 176, 32, 0.35);
        background: rgba(34, 20, 8, 0.7);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
      }

.fx-map-card b,
      .fx-mini-card b {
        display: block;
        color: rgba(242, 247, 255, 0.94);
        font-size: 12px;
        font-weight: 900;
      }

.fx-map-card strong {
        display: inline-block;
        margin-top: 8px;
        color: #fff;
        font-size: 17px;
        font-weight: 950;
      }

.fx-map-card span {
        margin-left: 8px;
        font-size: 10px;
        font-weight: 900;
      }

.fx-map-card span.up,
      .fx-mini-card em {
        color: #6f93b0;
        font-style: normal;
      }

.fx-map-card.amber span.up {
        color: #c98a2c;
      }

.fx-map-card span.down {
        color: #6f93b0;
      }

.fx-mini-card {
        min-width: 132px;
        padding: 8px 10px;
        pointer-events: none;
      }

.fx-mini-card span {
        display: block;
        margin-top: 4px;
        color: rgba(197, 218, 238, 0.6);
        font-size: 10px;
        font-weight: 800;
      }

.fx-card-usd {
        left: 7.5%;
        top: 35%;
      }

.fx-card-eur {
        left: 34%;
        top: 30%;
      }

.fx-card-cny {
        right: 5%;
        top: 28%;
      }

.fx-card-jpy {
        right: 1.5%;
        top: 48%;
      }

.fx-card-sgd {
        left: 30%;
        bottom: 9%;
      }

.fx-card-krw {
        right: 18%;
        top: 54%;
      }

.fx-card-eur-note {
        left: 55%;
        top: 6%;
      }

.fx-card-sgd-note {
        left: 54%;
        bottom: 14%;
      }

.fx-flow-metrics-panel,
      .fx-info-panel {
        border: 0.5px solid rgba(77, 113, 145, 0.26);
        background: linear-gradient(180deg, rgba(7, 16, 27, 0.96), rgba(5, 10, 17, 0.98));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 14px 34px rgba(0, 0, 0, 0.22);
      }

.fx-flow-metrics-panel {
        min-height: 270px;
        padding: 13px 12px;
        display: flex;
        flex-direction: column;
      }

.fx-widget-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 9px;
        border-bottom: 0.5px solid rgba(215, 168, 57, 0.18);
      }

.fx-widget-head h2 {
        margin: 0;
        color: rgba(240, 247, 255, 0.94);
        font-size: 14px;
        font-weight: 950;
        letter-spacing: 0;
      }

.fx-widget-head h2 span,
      .fx-widget-head > span {
        color: rgba(151, 166, 184, 0.74);
        font-size: 10px;
        font-weight: 850;
      }

.fx-dot-legend {
        display: flex;
        align-items: center;
        gap: 9px;
        color: rgba(151, 166, 184, 0.82);
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
      }

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

.fx-dot-legend i,
      .fx-insight-item i {
        width: 7px;
        height: 7px;
        display: inline-block;
        border-radius: 2px;
      }

.fx-dot-legend i.blue,
      .fx-insight-item i.blue {
        background: #2f78b9;
      }

.fx-dot-legend i.amber,
      .fx-insight-item i.amber {
        background: #c98a2c;
      }

.fx-donut-wrap {
        position: relative;
        width: 124px;
        height: 124px;
        margin: 13px auto 10px;
      }

.fx-donut-chart {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
      }

.fx-donut-track,
      .fx-donut-inflow,
      .fx-donut-outflow {
        fill: none;
        stroke-width: 18;
      }

.fx-donut-track {
        stroke: rgba(42, 53, 66, 0.88);
      }

.fx-donut-inflow {
        stroke: #2f78b9;
        stroke-linecap: butt;
        stroke-dasharray: 184 264;
        stroke-dashoffset: 0;
      }

.fx-donut-outflow {
        stroke: #c98a2c;
        stroke-linecap: butt;
        stroke-dasharray: 80 264;
        stroke-dashoffset: -184;
      }

.fx-donut-center {
        position: absolute;
        inset: 23px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

.fx-donut-center span {
        color: rgba(238, 245, 255, 0.9);
        font-size: 12px;
        font-weight: 950;
      }

.fx-donut-center small {
        margin-top: 3px;
        color: rgba(151, 166, 184, 0.76);
        font-size: 10px;
        font-weight: 850;
      }

.fx-donut-center strong {
        margin-top: 4px;
        color: #4fb491;
        font-size: 15px;
        font-weight: 950;
      }

.fx-flow-rank-title {
        color: rgba(198, 214, 232, 0.78);
        font-size: 11px;
        font-weight: 900;
        margin-bottom: 8px;
      }

.fx-flow-rank-list {
        display: grid;
        gap: 5px;
      }

.fx-flow-rank-list div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(198, 214, 232, 0.72);
        font-size: 11px;
        font-weight: 850;
      }

.fx-flow-rank-list b {
        color: #4fb491;
        font-weight: 950;
      }

.fx-subgrid {
        display: grid;
        grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr) minmax(300px, 1.05fr);
        gap: 10px;
        margin-top: 10px;
      }

.fx-info-panel {
        min-height: 190px;
        padding: 12px 13px;
      }

.fx-period-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
      }

.fx-period-tabs button {
        border: 0.5px solid rgba(77, 113, 145, 0.34);
        background: rgba(13, 21, 31, 0.9);
        color: rgba(184, 198, 216, 0.78);
        padding: 4px 6px;
        font-size: 10px;
        font-weight: 900;
        cursor: pointer;
      }

.fx-period-tabs button.active,
      .fx-period-tabs button:hover {
        border-color: rgba(215, 168, 57, 0.58);
        background: rgba(57, 39, 12, 0.82);
        color: #f2cd72;
      }

.fx-summary-table {
        margin-top: 10px;
      }

.fx-summary-row {
        display: grid;
        grid-template-columns: 1fr 0.9fr 0.78fr 1fr 0.72fr;
        align-items: center;
        gap: 9px;
        min-height: 22px;
        color: rgba(193, 208, 226, 0.74);
        font-size: 11px;
        font-weight: 800;
      }

.fx-summary-row.header {
        color: rgba(151, 166, 184, 0.7);
        font-size: 10px;
        min-height: 20px;
      }

.fx-summary-row b {
        color: rgba(236, 245, 255, 0.92);
        font-weight: 950;
      }

.fx-summary-row em {
        color: #4fb491;
        font-style: normal;
        font-weight: 950;
      }

.fx-summary-row.amber em {
        color: #d7a839;
      }

.fx-summary-row i {
        display: block;
        height: 6px;
        background: rgba(33, 45, 58, 0.8);
        overflow: hidden;
      }

.fx-summary-row i span {
        display: block;
        height: 100%;
        background: #2f78b9;
      }

.fx-summary-row.amber i span {
        background: #c98a2c;
      }

.fx-summary-row small {
        color: rgba(193, 208, 226, 0.76);
        font-size: 10px;
        font-weight: 900;
        text-align: right;
      }

.fx-trend-chart {
        width: 100%;
        height: 158px;
        margin-top: 8px;
        display: block;
      }

.fx-chart-grid {
        fill: none;
        stroke: rgba(125, 145, 166, 0.13);
        stroke-width: 1;
      }

.fx-chart-axis {
        fill: none;
        stroke: rgba(173, 190, 210, 0.22);
        stroke-width: 1;
        stroke-dasharray: 2 4;
      }

.fx-trend-area {
        fill: url(#fx-trend-fill);
      }

.fx-trend-line {
        fill: none;
        stroke: #2f78b9;
        stroke-width: 2.4;
      }

.fx-trend-end {
        fill: #2f78b9;
      }

.fx-trend-value {
        fill: #4fb491;
        font-size: 11px;
        font-weight: 950;
      }

.fx-chart-label {
        fill: rgba(151, 166, 184, 0.68);
        font-size: 10px;
        font-weight: 800;
      }

.fx-insight-list.scroll-panel {
        position: relative;
        margin-top: 10px;
        max-height: 154px;
        overflow-y: auto;
        padding-left: 8px;
      }

.fx-insight-list::before {
        content: "";
        position: absolute;
        left: 51px;
        top: 4px;
        bottom: 6px;
        width: 1px;
        background: rgba(77, 113, 145, 0.28);
      }

.fx-insight-item {
        position: relative;
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 0.5px solid rgba(77, 113, 145, 0.11);
      }

.fx-insight-item time {
        color: rgba(151, 166, 184, 0.86);
        font-size: 11px;
        font-weight: 900;
      }

.fx-insight-item b {
        display: flex;
        align-items: center;
        gap: 7px;
        color: rgba(234, 244, 255, 0.92);
        font-size: 12px;
        font-weight: 950;
      }

.fx-insight-item span {
        display: block;
        margin-top: 4px;
        color: rgba(151, 166, 184, 0.78);
        font-size: 11px;
        font-weight: 800;
      }

.fx-analysis-grid {
        display: grid;
        grid-template-columns: minmax(420px, 1.34fr) minmax(240px, 0.83fr) minmax(220px, 0.72fr);
        gap: 10px;
        margin-top: 10px;
      }

.fx-analysis-card {
        position: relative;
        min-height: 178px;
        padding: 13px 14px;
        border: 0.5px solid rgba(66, 154, 255, 0.18);
        background:
          linear-gradient(180deg, rgba(10, 20, 34, 0.94), rgba(5, 11, 19, 0.96));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
        overflow: hidden;
      }

.fx-analysis-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, rgba(255, 176, 32, 0.86), rgba(47, 120, 185, 0.36));
      }

.fx-analysis-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 30px),
          linear-gradient(90deg, rgba(215, 168, 57, 0.05), transparent 38%);
        pointer-events: none;
      }

.fx-analysis-head,
      .fx-analysis-head.compact {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 0.5px solid rgba(215, 168, 57, 0.16);
      }

.fx-analysis-head h2 {
        margin: 0;
        color: rgba(236, 245, 255, 0.94);
        font-size: 14px;
        font-weight: 950;
      }

.fx-analysis-head span {
        display: block;
        margin-top: 4px;
        color: rgba(151, 166, 184, 0.78);
        font-size: 10px;
        font-weight: 850;
      }

.fx-analysis-status {
        flex: 0 0 auto;
        border: 0.5px solid rgba(215, 168, 57, 0.5);
        background: rgba(57, 39, 12, 0.68);
        color: #f2cd72;
        padding: 4px 8px;
        font-size: 11px;
        font-style: normal;
        font-weight: 950;
      }

.fx-analysis-status.easing {
        border-color: rgba(79, 180, 145, 0.48);
        background: rgba(18, 53, 43, 0.62);
        color: #61d5a4;
      }

.fx-analysis-lead {
        position: relative;
        z-index: 1;
        margin: 12px 0 12px;
        color: rgba(223, 234, 248, 0.86);
        font-size: 12px;
        line-height: 1.62;
        font-weight: 850;
      }

.fx-impact-list,
      .fx-sector-impact-list,
      .fx-check-list {
        position: relative;
        z-index: 1;
      }

.fx-impact-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

.fx-impact-item {
        min-height: 70px;
        padding: 10px;
        border: 0.5px solid rgba(77, 113, 145, 0.24);
        background: rgba(7, 14, 23, 0.58);
      }

.fx-impact-item b {
        display: block;
        color: #f2cd72;
        font-size: 11px;
        font-weight: 950;
      }

.fx-impact-item span {
        display: block;
        margin-top: 7px;
        color: rgba(176, 194, 216, 0.82);
        font-size: 11px;
        line-height: 1.45;
        font-weight: 800;
      }

.fx-impact-item.caution b {
        color: #d7a839;
      }

.fx-sector-impact-list {
        display: grid;
        gap: 8px;
        margin-top: 12px;
      }

.fx-sector-impact-list div {
        display: grid;
        grid-template-columns: 52px 1fr;
        align-items: center;
        gap: 9px;
        min-height: 38px;
        padding: 8px 9px;
        border: 0.5px solid rgba(77, 113, 145, 0.22);
        background: rgba(7, 14, 23, 0.56);
      }

.fx-sector-impact-list strong {
        color: rgba(236, 245, 255, 0.92);
        font-size: 11px;
        font-weight: 950;
      }

.fx-sector-impact-list span {
        color: rgba(176, 194, 216, 0.82);
        font-size: 11px;
        font-weight: 850;
      }

.fx-sector-impact-list .positive {
        border-left: 2px solid rgba(79, 180, 145, 0.92);
      }

.fx-sector-impact-list .neutral {
        border-left: 2px solid rgba(47, 120, 185, 0.82);
      }

.fx-sector-impact-list .watch {
        border-left: 2px solid rgba(215, 168, 57, 0.9);
      }

.fx-analysis-note {
        position: relative;
        z-index: 1;
        margin: 11px 0 0;
        padding-top: 9px;
        border-top: 0.5px solid rgba(77, 113, 145, 0.18);
        color: rgba(151, 166, 184, 0.82);
        font-size: 11px;
        line-height: 1.5;
        font-weight: 800;
      }

.fx-check-list {
        display: grid;
        gap: 8px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
      }

.fx-check-list li {
        position: relative;
        min-height: 34px;
        padding: 9px 10px 9px 24px;
        border: 0.5px solid rgba(77, 113, 145, 0.22);
        background: rgba(7, 14, 23, 0.56);
        color: rgba(223, 234, 248, 0.86);
        font-size: 11px;
        line-height: 1.35;
        font-weight: 900;
      }

.fx-check-list li::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 14px;
        width: 6px;
        height: 6px;
        background: #d7a839;
      }

@media (max-width: 1180px) {
        .fx-overview-grid {
          grid-template-columns: 1fr;
        }

        .fx-subgrid,
        .fx-analysis-grid {
          grid-template-columns: 1fr;
        }

        .fx-impact-list {
          grid-template-columns: 1fr;
        }

        .fx-map-stage,
        .fx-overview-grid .fx-map-stage {
          min-height: 250px;
        }

        .fx-flow-strength {
          display: none;
        }
      }