:root {
        color-scheme: dark;
        --bg: #0f1419;
        --panel: #1a2332;
        --border: #2d3a4f;
        --text: #e7ecf3;
        --muted: #8b9cb3;
        --green: #3dd68c;
        --red: #ff6b6b;
        --amber: #f5c451;
        --blue: #5eb3ff;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        background: var(--bg);
        color: var(--text);
        line-height: 1.45;
        max-width: 100vw;
      }
      #equity-card {
        padding: 0.75rem 1rem;
        transition: border-color 0.2s ease, background-color 0.2s ease;
      }
      #equity-card.equity-card--live {
        border-color: rgba(61, 214, 140, 0.55);
        background: linear-gradient(135deg, rgba(61, 214, 140, 0.1) 0%, var(--panel) 58%);
      }
      #equity-card.equity-card--monitor-only,
      #equity-card.equity-card--robot-off {
        border-color: rgba(245, 196, 81, 0.55);
        background: linear-gradient(135deg, rgba(245, 196, 81, 0.12) 0%, var(--panel) 58%);
      }
      #equity-card.equity-card--rate-limited {
        border-color: rgba(255, 107, 107, 0.55);
        background: linear-gradient(135deg, rgba(255, 107, 107, 0.12) 0%, var(--panel) 58%);
      }
      .equity-operational-status {
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
        margin-bottom: 0.35rem;
        font-size: 0.75rem;
        line-height: 1.3;
        max-width: 100%;
      }
      .equity-operational-status__icon {
        font-size: 1.05rem;
        line-height: 1;
        flex-shrink: 0;
        margin-top: 0.02rem;
      }
      .equity-operational-status__text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
      }
      .equity-operational-status__detail {
        font-size: 0.68rem;
        font-weight: 400;
        color: var(--text);
        opacity: 0.9;
      }
      .equity-operational-status--live {
        color: var(--green);
      }
      .equity-operational-status--monitor-only,
      .equity-operational-status--robot-off {
        color: var(--amber);
      }
      .equity-operational-status--rate-limited {
        color: var(--red);
      }
      .equity-operational-status--loading {
        color: var(--muted);
      }
      .equity-total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      #equity-total {
        flex-shrink: 0;
        min-width: 0;
      }
      .equity-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0.12rem;
        text-align: right;
        font-size: 0.75rem;
        line-height: 1.35;
        color: var(--muted);
      }
      .equity-meta-line {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
      #equity-breakdown {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem 0.45rem;
        justify-content: flex-end;
      }
      .equity-breakdown-item {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .combined-weekly-profit {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0.35rem 0.6rem;
      }
      .combined-weekly-profit__label {
        color: var(--muted);
        font-size: 0.92em;
      }
      .combined-weekly-profit__value {
        font-variant-numeric: tabular-nums;
      }
      .combined-weekly-profit .target-label,
      .combined-weekly-profit .combined-path-daily {
        color: var(--muted);
        font-size: 0.92em;
        font-weight: 400;
      }
      #connection-status.live { color: var(--green); }
      #connection-status.offline { color: var(--red); }
      .dashboard-sounds-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0;
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: 0.75rem;
        line-height: 1.35;
        cursor: pointer;
        max-width: 100%;
      }
      .dashboard-sounds-toggle .material-symbols-rounded {
        font-size: 1rem;
        line-height: 1;
      }
      .dashboard-sounds-toggle:hover { color: var(--text); }
      .dashboard-sounds-toggle[aria-pressed="true"] { color: var(--green); }
      .dashboard-sounds-toggle[aria-pressed="true"].is-playing { color: #c878ff; }
      .dashboard-music-controls {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
        max-width: 100%;
      }
      .dashboard-music-volume {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: var(--muted);
        font-size: 0.75rem;
      }
      .dashboard-music-volume input[type="range"] {
        width: 5.5rem;
        accent-color: #c878ff;
        cursor: pointer;
      }
      .dashboard-sounds-toggle:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
        border-radius: 2px;
      }
      .live-market-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.65rem;
      }
      .live-market-header h2 {
        margin: 0;
      }
      .chart-card-top {
        flex-shrink: 0;
        min-height: 4.25rem;
      }
      .chart-card-top > h2 {
        margin-top: 0;
      }
      .chart-card-top--with-controls {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
      }
      .chart-card-top--with-controls > h2 {
        flex: 1 1 auto;
        min-width: 0;
      }
      .live-market-header-block {
        flex: 1 1 auto;
        min-width: 0;
      }
      .chart-range-select select {
        appearance: none;
        background: var(--surface-2, #1a1f2e);
        border: 1px solid var(--border, #2a3144);
        border-radius: 0.45rem;
        color: var(--text, #e8ecf4);
        font: inherit;
        font-size: 0.82rem;
        padding: 0.35rem 1.75rem 0.35rem 0.65rem;
        background-image: linear-gradient(45deg, transparent 50%, var(--muted, #8b95a8) 50%),
          linear-gradient(135deg, var(--muted, #8b95a8) 50%, transparent 50%);
        background-position: calc(100% - 14px) calc(50% + 2px), calc(100% - 9px) calc(50% + 2px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      .chart-range-select select:focus-visible {
        outline: 2px solid var(--blue, #5eb3ff);
        outline-offset: 2px;
      }
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .live-market-inline-quotes {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem 0.75rem;
      }
      .live-market-inline-quote {
        display: inline-flex;
        align-items: baseline;
        gap: 0.25rem;
        white-space: nowrap;
      }
      #dax-chart-card .live-market-header {
        margin-bottom: 0.35rem;
      }
      #dax-chart-card .live-market-value {
        font-size: 1.05rem;
      }
      #dax-chart-card .live-market-meta {
        margin-top: 0;
      }
      .live-market-status {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
      }
      .live-market-status.live { color: var(--green); }
      .live-market-status.stale { color: var(--amber); }
      .live-market-status.offline { color: var(--red); }
      .live-market-status.not-tradeable { color: var(--red); }
      #dax-chart-card.market-not-tradeable {
        border-color: rgba(224, 108, 117, 0.45);
        box-shadow: inset 0 0 0 1px rgba(224, 108, 117, 0.18);
      }
      #dax-chart-card.market-not-tradeable .live-market-value {
        color: var(--muted);
      }
      #dax-chart-card.market-not-tradeable .chart-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(12, 16, 24, 0.52);
        pointer-events: none;
        z-index: 1;
      }
      .dax-market-tradeable-banner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        max-width: calc(100% - 1.5rem);
        padding: 0.55rem 0.85rem;
        border-radius: 0.45rem;
        border: 1px solid rgba(224, 108, 117, 0.55);
        background: rgba(24, 12, 16, 0.92);
        color: #ffb4bc;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.35;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        pointer-events: none;
      }
      .dax-market-tradeable-banner.hidden { display: none; }
      #dax-tick-chart-meta .tick-meta-market-closed {
        color: #ffb4bc;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .live-market-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 1rem;
      }
      @media (min-width: 720px) {
        .live-market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }
      .live-market-quote {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
      }
      .live-market-label {
        font-size: 0.68rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .live-market-value {
        font-size: 1.35rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        transition: color 0.25s ease;
      }
      .live-market-value.muted { color: var(--muted); font-size: 1rem; font-weight: 600; }
      .live-market-value.tick-up { color: var(--green); }
      .live-market-value.tick-down { color: var(--red); }
      .live-market-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        margin-top: 0.55rem;
        font-size: 0.75rem;
        color: var(--muted);
      }
      .live-market-meta .change-up { color: var(--green); font-weight: 600; }
      .live-market-meta .change-down { color: var(--red); font-weight: 600; }
      .secondary-live-market-card .secondary-live-market-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-height: 240px;
      }
      .secondary-live-market-card .chart-card-top-controls {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.35rem;
        flex: 0 0 auto;
      }
      .secondary-live-market-card .secondary-market-chart-wrap {
        flex: 1 1 auto;
        min-height: 140px;
      }
      .secondary-live-market-card .chart-card-top h2 {
        margin: 0;
      }
      .secondary-live-market-card .live-market-value {
        font-size: 1.35rem;
      }
      #spread-eurusd-row.chart-grid > .card {
        min-height: 100%;
      }
      .muted { color: var(--muted); }
      main {
        padding: 1.25rem;
        display: grid;
        gap: 1rem;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
      }
      .grid { display: grid; gap: 1rem; }
      @media (min-width: 960px) {
        .grid { grid-template-columns: 1fr 1fr; }
      }
      .card {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 1rem;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
      }
      .card--expandable {
        position: relative;
      }
      .card-enlarge-btn {
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: rgba(15, 20, 25, 0.55);
        color: var(--muted);
        cursor: pointer;
      }
      .card-enlarge-btn .material-symbols-rounded {
        font-size: 1.1rem;
        line-height: 1;
      }
      .card-enlarge-btn:hover,
      .card-enlarge-btn:focus-visible {
        color: var(--text);
        border-color: var(--blue);
        outline: none;
      }
      .card--fullscreen .card-enlarge-btn {
        display: none;
      }
      body.card-fullscreen-open {
        overflow: hidden;
      }
      .card-fullscreen-overlay {
        position: fixed;
        inset: 0;
        z-index: 4000;
        display: flex;
        flex-direction: column;
        padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
        background: rgba(15, 20, 25, 0.94);
      }
      .card-fullscreen-overlay[hidden] {
        display: none !important;
      }
      .card-fullscreen-close {
        position: absolute;
        top: calc(0.75rem + env(safe-area-inset-top, 0px));
        right: calc(0.75rem + env(safe-area-inset-right, 0px));
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.65rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--panel);
        color: var(--text);
        font: inherit;
        font-size: 0.78rem;
        cursor: pointer;
      }
      .card-fullscreen-close:hover,
      .card-fullscreen-close:focus-visible {
        border-color: var(--blue);
        outline: none;
      }
      .card-fullscreen-close .material-symbols-rounded {
        font-size: 1.1rem;
        line-height: 1;
      }
      .card-fullscreen-equity-overlay {
        position: absolute;
        top: calc(0.75rem + env(safe-area-inset-top, 0px));
        left: calc(0.75rem + env(safe-area-inset-left, 0px));
        z-index: 2;
        max-width: min(42rem, calc(100% - 9rem));
        padding: 0.45rem 0.8rem;
        border-radius: 10px;
        background: rgba(26, 35, 50, 0.72);
        border: 1px solid rgba(45, 58, 79, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        pointer-events: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }
      .card-fullscreen-equity-overlay--live {
        border-color: rgba(61, 214, 140, 0.55);
        background: rgba(20, 32, 28, 0.82);
      }
      .card-fullscreen-equity-overlay--monitor-only,
      .card-fullscreen-equity-overlay--robot-off {
        border-color: rgba(245, 196, 81, 0.55);
        background: rgba(32, 28, 20, 0.82);
      }
      .card-fullscreen-equity-overlay--rate-limited {
        border-color: rgba(255, 107, 107, 0.55);
        background: rgba(32, 22, 22, 0.82);
      }
      .card-fullscreen-equity-overlay .equity-operational-status {
        margin-bottom: 0;
        font-size: 0.72rem;
      }
      .card-fullscreen-equity-overlay[hidden] {
        display: none !important;
      }
      .card-fullscreen-equity-overlay .equity-total-line {
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.4rem;
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.15;
      }
      .card-fullscreen-equity-overlay .equity-currency {
        font-size: 0.78em;
        color: var(--muted);
        font-weight: 500;
      }
      .card-fullscreen-equity-overlay .equity-overlay-value {
        font-variant-numeric: tabular-nums;
      }
      .card-fullscreen-equity-overlay .equity-overlay-value.counting-up { color: var(--green); }
      .card-fullscreen-equity-overlay .equity-overlay-value.counting-down { color: var(--red); }
      .card-fullscreen-equity-overlay .equity-overlay-mark {
        color: var(--amber);
        font-size: 0.65em;
        font-weight: 600;
        white-space: nowrap;
      }
      .card-fullscreen-equity-overlay .equity-24h-change {
        font-size: 0.82em;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .card-fullscreen-slot {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .card-fullscreen-slot > .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: auto;
        padding-top: 2.5rem;
      }
      .card--fullscreen .chart-wrap {
        flex: 1 1 auto;
        height: auto !important;
        min-height: min(55vh, 520px);
      }
      .card--fullscreen .account-info-grid.has-chart {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 38%);
      }
      .card--fullscreen .account-info-chart .weekly-rolloff-chart-wrap {
        min-height: min(40vh, 360px);
        height: min(40vh, 360px);
      }
      .card--fullscreen .record-list {
        max-height: none;
      }
      .card h2 {
        margin: 0 0 0.75rem;
        font-size: 0.95rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .metric {
        font-size: 1.6rem;
        font-weight: 700;
      }
      .metric small { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; }
      #equity-total.metric {
        font-size: 2.35rem;
        line-height: 1.05;
      }
      .equity-total-line { display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
      .equity-currency { font-size: 0.78em; color: var(--muted); font-weight: 500; }
      #equity-total-value {
        font-variant-numeric: tabular-nums;
        transition: color 0.35s ease;
      }
      #equity-total-value.counting-up { color: var(--green); }
      #equity-total-value.counting-down { color: var(--red); }
      #equity-total-ath,
      #equity-total-day-high { color: var(--amber); font-size: 0.65em; margin-left: 0.25rem; }
      .equity-24h-change {
        font-size: 0.82em;
        font-weight: 700;
        margin-left: 0.15rem;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .equity-24h-change.up { color: var(--green); }
      .equity-24h-change.down { color: var(--red); }
      .equity-24h-change.flat { color: var(--muted); }
      .account-info-grid {
        display: grid;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .account-info-grid.has-chart {
        grid-template-columns: minmax(0, 1fr) minmax(9rem, 40%);
        gap: 0.75rem 1rem;
        align-items: start;
      }
      .account-info-main {
        min-width: 0;
      }
      .account-info-main h2 {
        margin: 0 0 0.5rem;
      }
      .account-info-chart {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-left: 1px solid var(--border);
        padding-left: 0.75rem;
      }
      .account-info-chart .weekly-rolloff-chart-wrap {
        flex: none;
        height: 13rem;
        margin-top: 0;
      }
      .account-pnl {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
        align-items: flex-end;
      }
      .account-pnl .metric { font-size: 1.35rem; }
      .account-funds {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem 0.65rem;
        margin: 0 0 0.5rem;
        font-size: 0.82rem;
        line-height: 1.4;
      }
      .account-available {
        display: inline-flex;
        align-items: center;
        gap: 0.15rem;
        color: var(--muted);
      }
      .account-available strong {
        font-variant-numeric: tabular-nums;
        color: var(--text);
      }
      .account-available strong.neg { color: var(--red); }
      .account-fund-icon {
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
      }
      .account-fund-advices {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.45rem;
      }
      .account-fund-advice {
        display: inline-flex;
        align-items: center;
        gap: 0.15rem;
        padding: 0.12rem 0.45rem;
        border-radius: 999px;
        font-size: 0.76rem;
        font-variant-numeric: tabular-nums;
        border: 1px solid transparent;
        white-space: nowrap;
      }
      .account-fund-advice .dir-icon {
        font-size: 0.95rem;
      }
      .account-fund-advice--in {
        color: var(--green);
        border-color: rgba(61, 214, 140, 0.35);
        background: rgba(61, 214, 140, 0.08);
      }
      .account-fund-advice--out {
        color: var(--amber);
        border-color: rgba(245, 196, 81, 0.35);
        background: rgba(245, 196, 81, 0.08);
      }
      .account-fund-advice--shortfall {
        color: var(--red);
        border-color: rgba(255, 107, 107, 0.35);
        background: rgba(255, 107, 107, 0.08);
      }
      .account-fund-advice--trim {
        color: var(--blue);
        border-color: rgba(94, 179, 255, 0.35);
        background: rgba(94, 179, 255, 0.08);
      }
      .account-fund-advice--room {
        color: var(--amber);
        border-color: rgba(245, 196, 81, 0.35);
        background: rgba(245, 196, 81, 0.08);
      }
      .size-usage {
        margin: 0;
        font-size: 0.88rem;
      }
      .size-usage-secondary {
        color: var(--muted);
        font-size: 0.84rem;
      }
      .book-spread {
        margin: 0.35rem 0 0;
        font-size: 0.84rem;
        color: var(--muted);
      }
      .book-spread--warn {
        color: var(--amber);
      }
      .book-spread--warn strong {
        color: #fbbf24;
      }
      .accounts {
        display: grid;
        gap: 1rem;
        min-width: 0;
      }
      @media (min-width: 960px) {
        .accounts { grid-template-columns: 1fr 1fr; }
      }
      .dashboard-main-grid {
        display: grid;
        gap: 1rem;
        align-items: start;
      }
      @media (min-width: 960px) {
        .dashboard-main-grid {
          grid-template-columns: minmax(11.5rem, 16rem) minmax(0, 1fr);
        }
        .dashboard-main-grid .accounts {
          grid-template-columns: 1fr;
        }
      }
      @media (min-width: 1280px) {
        .dashboard-main-grid .accounts {
          grid-template-columns: 1fr 1fr;
        }
      }
      .equity-mini-charts {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        min-width: 0;
      }
      .equity-mini-chart-card {
        padding: 0.55rem 0.65rem;
      }
      .equity-mini-chart-card h2 {
        margin: 0 0 0.35rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0.01em;
      }
      .equity-mini-charts .chart-wrap--mini {
        flex: 0 0 5.5rem;
        height: 5.5rem;
      }
      .equity-mini-charts .chart-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 0.45rem;
        margin-top: 0.3rem;
        font-size: 0.82rem;
        line-height: 1.3;
      }
      .equity-mini-value {
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--text);
        font-variant-numeric: tabular-nums;
      }
      .equity-mini-pct {
        font-size: 0.98rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .equity-mini-sub {
        flex-basis: 100%;
        font-size: 0.72rem;
        color: var(--muted);
      }
      #dax-tick-chart-meta .tick-meta-equity {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--text);
      }
      @media (max-width: 959px) {
        .equity-mini-charts {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      @media (max-width: 767px) {
        .equity-mini-charts {
          grid-template-columns: 1fr;
        }
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
      }
      th, td {
        text-align: left;
        padding: 0.35rem 0.5rem;
        border-bottom: 1px solid var(--border);
      }
      th { color: var(--muted); font-weight: 500; }
      .pos { color: var(--green); }
      .neg { color: var(--red); }
      .position-pnl {
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        line-height: 1.25;
      }
      .locked-pnl {
        display: block;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--muted);
      }
      .locked-pnl.pos { color: var(--green); }
      .locked-pnl.neg { color: var(--red); }
      .target-met { color: var(--green); }
      .below-target { color: var(--amber); }
      .below-target.buy-target-met { color: #7ec8a8; }
      .target-value { color: var(--blue); }
      .pnl-vs-target { font-variant-numeric: tabular-nums; }
      .pnl-vs-target .target-sep { color: var(--muted); font-weight: 400; }
      .weekly-rolloff-info {
        margin: 0.5rem 0 0.35rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
      }
      .weekly-rolloff-1h {
        font-size: 1rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      .weekly-rolloff-note,
      .weekly-rolloff-chart-meta {
        display: block;
        margin-top: 0.25rem;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 400;
      }
      .account-info-chart .weekly-rolloff-chart-meta {
        margin-top: 0.2rem;
        flex-shrink: 0;
      }
      .rolloff-delta { font-weight: 500; }
      .rolloff-delta.pos { color: var(--green); }
      .rolloff-delta.neg { color: var(--red); }
      .rolloff-delta.zero { color: var(--muted); }
      .weekly-rolloff-expiring {
        margin-top: 0.45rem;
        min-width: 0;
      }
      .weekly-rolloff-details summary {
        cursor: pointer;
        color: var(--muted);
        font-size: 0.72rem;
        line-height: 1.35;
      }
      .account-info-chart .rolloff-table {
        font-size: 0.68rem;
      }
      .account-info-chart .rolloff-table th,
      .account-info-chart .rolloff-table td {
        padding: 0.2rem 0.25rem;
      }
      .weekly-rolloff-chart-wrap {
        position: relative;
        cursor: crosshair;
      }
      .room-ok { color: var(--green); }
      .room-warn { color: var(--amber); }
      .room-critical { color: var(--red); }
      .panic-mode-tag {
        display: inline-block;
        margin-left: 0.15rem;
        padding: 0.05rem 0.3rem;
        border-radius: 4px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.12);
        border: 1px solid rgba(251, 191, 36, 0.35);
        vertical-align: baseline;
      }
      .tag {
        display: inline-block;
        padding: 0.1rem 0.35rem;
        border-radius: 4px;
        font-size: 0.72rem;
        background: #243044;
      }
      .tag.buy { color: var(--blue); }
      .tag.sell { color: var(--amber); }
      .tag.would { color: var(--cyan, #5bc0de); border: 1px dashed currentColor; }
      .tag.limit-set { color: var(--amber); }
      .tag.limit-off { color: var(--muted, #8b9cb3); }
      .position-row--paper td { opacity: 0.85; }
      .position-row--paper [data-label="Trail"] .tag.would { font-style: italic; }
      .order-row--would td { border-left: 3px solid var(--cyan, #5bc0de); }
      .order-row--rejected td { border-left: 3px solid var(--red, #e74c3c); }
      .card--eurusd .account-instrument-label { margin: 0.15rem 0 0.5rem; }
      .material-symbols-rounded.dir-icon {
        font-size: 1.05em;
        line-height: 1;
        vertical-align: -0.2em;
        font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
      }
      .dir-icon-buy { color: var(--blue); }
      .dir-icon-sell { color: var(--amber); }
      .tag.buy .dir-icon,
      .tag.sell .dir-icon { color: inherit; }
      .dir-target-pair {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        white-space: nowrap;
      }
      .dir-target-pair .target-value { margin-left: 0.05rem; }
      .tag.trail-on { color: var(--green); }
      .tag.trail-watch { color: var(--muted); }
      .tag.trail-off { color: var(--muted); }
      @keyframes trail-recent-blink {
        0%, 100% {
          background: rgba(167, 139, 250, 0.16);
          box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45);
        }
        50% {
          background: rgba(167, 139, 250, 0.34);
          box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.85);
        }
      }
      .tag.trail-recent {
        background: rgba(167, 139, 250, 0.16);
        box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45);
        color: #c4b5fd;
        animation: trail-recent-blink 1.4s ease-in-out infinite;
        animation-delay: var(--trail-blink-delay, 0s);
      }
      @media (prefers-reduced-motion: reduce) {
        .tag.trail-recent { animation: none; }
      }
      .tag.trail-on.trail-recent { color: #86efac; }
      .tag.trail-watch.trail-recent { color: #c4b5fd; }
      .tag.trail-off.trail-recent { color: #c4b5fd; }
      .tag.limit-off.trail-recent,
      .tag.limit-set.trail-recent { color: #c4b5fd; }
      .tag.trim-executed { color: var(--green); }
      .tag.trim-failed, .tag.trim-rejected { color: var(--red); }
      .tag.trim-skipped { color: var(--muted); }
      .trim-targets {
        display: block;
        margin-top: 0.15rem;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 400;
      }
      .account-trims {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
      }
      .account-trims h3 {
        margin: 0 0 0.35rem;
        font-size: 0.78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 500;
      }
      .account-trailing-sync {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
      }
      .account-trailing-sync h3 {
        margin: 0 0 0.35rem;
        font-size: 0.78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 500;
      }
      .trailing-sync-log {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.35rem;
        max-width: 100%;
        min-width: 0;
      }
      .trailing-sync-line {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.35;
        color: var(--text);
        word-break: break-word;
      }
      .trailing-sync-line code {
        display: block;
        margin-top: 0.1rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.7rem;
        white-space: pre-wrap;
      }
      .trailing-sync-meta {
        display: block;
        color: var(--muted);
        font-size: 0.68rem;
      }
      .trailing-sync-line--ok code { color: var(--pos); }
      .trailing-sync-line--warn code { color: #d4a843; }
      .trailing-sync-line--error code { color: var(--neg); }
      .room-size-reduction,
      .book-spread-trim-blocked {
        margin-top: 0.65rem;
        padding: 0.65rem 0.75rem;
        border-radius: 8px;
        border: 1px solid rgba(245, 158, 11, 0.35);
        background: rgba(245, 158, 11, 0.08);
      }
      .room-size-reduction h3,
      .book-spread-trim-blocked h3 {
        margin: 0 0 0.35rem;
        font-size: 0.78rem;
        color: var(--amber);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
      }
      .room-size-reduction .checked-at,
      .book-spread-trim-blocked .checked-at {
        font-size: 0.75rem;
        color: var(--muted);
        margin: 0 0 0.45rem;
      }
      .room-size-reduction ul,
      .book-spread-trim-blocked ul {
        margin: 0;
        padding-left: 1.1rem;
      }
      .room-size-reduction li,
      .book-spread-trim-blocked li {
        margin: 0.25rem 0;
        font-size: 0.82rem;
        line-height: 1.35;
      }
      .room-size-reduction .reduction-context,
      .book-spread-trim-blocked .trim-blocked-context {
        color: var(--muted);
      }
      .trim-blocked-summary,
      .trim-blocked-why,
      .trim-blocked-plan {
        margin: 0.35rem 0 0;
        font-size: 0.82rem;
        line-height: 1.4;
      }
      .trim-blocked-why,
      .trim-blocked-plan {
        color: var(--text);
      }
      .trim-blocked-details {
        margin-top: 0.45rem;
        font-size: 0.78rem;
        color: var(--muted);
      }
      .trim-blocked-details summary {
        cursor: pointer;
        user-select: none;
      }
      .trim-blocked-details ul {
        margin: 0.35rem 0 0;
        padding-left: 1.1rem;
      }
      .trim-blocked-details li {
        margin: 0.2rem 0;
        line-height: 1.35;
      }
      .empty { color: var(--muted); font-size: 0.9rem; }
      .chart-grid {
        display: grid;
        gap: 1rem;
        align-items: stretch;
      }
      @media (min-width: 720px) {
        .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      .chart-grid > .card {
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      .chart-grid > .card[hidden] {
        display: none !important;
      }
      .chart-wrap {
        position: relative;
        flex: 0 0 240px;
        height: 240px;
      }
      .chart-meta {
        margin-top: 0.5rem;
        color: var(--muted);
        font-size: 0.78rem;
      }
      .chart-meta .equity-overlay-mark {
        color: var(--amber);
        font-size: 0.65em;
        font-weight: 600;
        white-space: nowrap;
      }
      .chart-range-note {
        margin: 0.15rem 0 0;
        color: var(--muted);
        font-size: 0.72rem;
      }
      .meta-footer {
        margin-top: 0.25rem;
        font-size: 0.82rem;
      }
      .meta-footer h2 {
        font-size: 0.78rem;
      }
      #fund-transfer-hint {
        position: fixed;
        top: calc(1rem + env(safe-area-inset-top, 0px));
        right: calc(1rem + env(safe-area-inset-right, 0px));
        z-index: 1000;
        max-width: 22rem;
        background: rgba(26, 35, 50, 0.5);
        border: 1px solid rgba(245, 196, 81, 0.5);
        border-radius: 10px;
        padding: 0.85rem 1rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        font-size: 0.82rem;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      #fund-transfer-hint[hidden] {
        display: none;
      }
      body.card-fullscreen-open #fund-transfer-hint {
        z-index: 4100;
        top: calc(3.5rem + env(safe-area-inset-top, 0px));
        max-height: min(40vh, calc(100vh - 4.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        overflow-y: auto;
      }
      #fund-transfer-hint h3 {
        margin: 0 0 0.5rem;
        font-size: 0.85rem;
        color: var(--amber);
        font-weight: 600;
      }
      #fund-transfer-hint ul {
        margin: 0;
        padding: 0 0 0 1.1rem;
      }
      #fund-transfer-hint li {
        margin: 0.35rem 0;
      }
      #fund-transfer-hint .fund-transfer-disclaimer {
        margin: 0.6rem 0 0;
        color: var(--muted);
        font-size: 0.75rem;
        line-height: 1.4;
      }
      .record-list {
        margin-top: 0.5rem;
        max-width: 100%;
        min-width: 0;
      }
      .account-trims .record-list,
      #recent-trims .record-list {
        overflow: visible;
      }
      .trim-table tbody tr.record-row td {
        overflow: visible;
      }
      .trim-table tbody tr.trim-row--highlight > td {
        background: rgba(245, 196, 81, 0.08);
        border-bottom-color: rgba(245, 196, 81, 0.22);
      }
      .trim-table tbody tr.trim-row--highlight > td:first-child {
        box-shadow: inset 3px 0 0 var(--amber);
      }
      .trim-table tbody tr.trim-row--highlight td[data-label="Kind"] {
        color: var(--amber);
        font-weight: 600;
      }
      .trim-table tbody tr.trim-row--kind-tooltip td[data-label="Kind"] {
        cursor: help;
      }
      .trim-kind-with-tooltip {
        position: relative;
      }
      .trim-kind-with-tooltip__label {
        border-bottom: 1px dotted rgba(245, 196, 81, 0.65);
      }
      .trim-kind-with-tooltip__popup {
        display: none;
        position: absolute;
        left: 0;
        top: calc(100% + 0.45rem);
        z-index: 30;
        width: min(22rem, 70vw);
        padding: 0.65rem 0.75rem;
        border-radius: 8px;
        border: 1px solid rgba(245, 196, 81, 0.35);
        background: #111a28;
        color: var(--text);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        font-size: 0.72rem;
        line-height: 1.45;
        font-weight: 400;
        text-align: left;
        pointer-events: none;
      }
      .trim-kind-with-tooltip__title {
        display: block;
        margin-bottom: 0.35rem;
        color: var(--amber);
        font-weight: 600;
      }
      .trim-kind-with-tooltip__section {
        display: block;
        margin-top: 0.35rem;
      }
      .trim-kind-with-tooltip__section strong {
        color: var(--amber);
        font-weight: 600;
      }
      .trim-kind-with-tooltip:hover .trim-kind-with-tooltip__popup,
      .trim-kind-with-tooltip:focus-within .trim-kind-with-tooltip__popup {
        display: block;
      }
      @media (max-width: 767px) {
        #equity-card { padding: 0.75rem 0.85rem; }
        .equity-total-row {
          flex-direction: column;
          align-items: stretch;
          gap: 0.75rem;
        }
        #equity-total {
          width: 100%;
        }
        #equity-total.metric {
          font-size: clamp(1.45rem, 7.5vw, 1.85rem);
          line-height: 1.1;
        }
        .equity-total-line {
          align-items: flex-start;
          gap: 0.2rem 0.4rem;
        }
        .equity-meta {
          align-items: flex-start;
          text-align: left;
          font-size: 0.72rem;
          gap: 0.4rem;
          width: 100%;
        }
        #equity-breakdown {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.2rem;
          width: 100%;
        }
        .equity-breakdown-item {
          white-space: normal;
        }
        .dashboard-sounds-toggle {
          font-size: 0.72rem;
          min-height: 2rem;
        }
        .dashboard-music-controls {
          flex-direction: column;
          align-items: stretch;
          gap: 0.35rem;
          width: 100%;
        }
        .dashboard-music-volume {
          width: 100%;
        }
        .dashboard-music-volume input[type="range"] {
          flex: 1;
          width: 100%;
          min-width: 0;
        }
        .equity-24h-change {
          margin-left: 0;
        }
        main { padding: 0.75rem; gap: 0.75rem; }
        .card { padding: 0.85rem; }
        .metric { font-size: 1.25rem; }
        .account-info-grid.has-chart {
          grid-template-columns: 1fr;
        }
        .account-info-chart {
          border-left: none;
          padding-left: 0;
          border-top: 1px solid var(--border);
          padding-top: 0.5rem;
        }
        .account-info-chart .weekly-rolloff-chart-wrap {
          min-height: 10rem;
          height: 192px;
        }
        .account-pnl {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
        }
        .account-pnl .metric { font-size: 1.1rem; }
        .account-funds,
        .size-usage {
          font-size: 0.75rem;
          line-height: 1.5;
          overflow-wrap: anywhere;
        }
        .account-fund-advice {
          white-space: normal;
        }
        .pnl-vs-target {
          overflow-wrap: anywhere;
        }
        .chart-wrap { height: 200px; }
        #fund-transfer-hint {
          top: auto;
          bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
          left: calc(1rem + env(safe-area-inset-left, 0px));
          right: calc(1rem + env(safe-area-inset-right, 0px));
          max-width: none;
          width: auto;
          max-height: calc(45vh - env(safe-area-inset-bottom, 0px));
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
        body.card-fullscreen-open #fund-transfer-hint {
          top: auto;
          bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
          max-height: min(45vh, calc(100vh - 5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        }
        .record-table thead {
          display: none;
        }
        .record-table tbody tr.record-row {
          display: block;
          padding: 0.65rem 0.75rem;
          border: 1px solid var(--border);
          border-radius: 8px;
          background: rgba(0, 0, 0, 0.12);
        }
        .record-table.trim-table tbody tr.record-row.trim-row--highlight {
          border-color: rgba(245, 196, 81, 0.35);
          background: rgba(245, 196, 81, 0.08);
          box-shadow: inset 3px 0 0 var(--amber);
        }
        .record-table tbody tr.record-row td {
          display: grid;
          grid-template-columns: 5.5rem 1fr;
          gap: 0.15rem 0.75rem;
          align-items: start;
          padding: 0.2rem 0;
          border-bottom: none;
          overflow-wrap: anywhere;
        }
        .record-table tbody tr.record-row td::before {
          content: attr(data-label);
          color: var(--muted);
          font-size: 0.68rem;
          text-transform: uppercase;
          letter-spacing: 0.03em;
        }
        .record-table tbody tr.record-row + tr.trim-targets-row {
          display: block;
          margin: -0.35rem 0 0.5rem;
          padding: 0 0.75rem 0.55rem;
          border: 1px solid var(--border);
          border-top: none;
          border-radius: 0 0 8px 8px;
          background: rgba(0, 0, 0, 0.12);
        }
        .record-table.trim-table tbody tr.trim-targets-row.trim-row--highlight {
          border-color: rgba(245, 196, 81, 0.35);
          background: rgba(245, 196, 81, 0.08);
          box-shadow: inset 3px 0 0 var(--amber);
        }
        .record-table tbody tr.trim-targets-row td {
          display: block;
          padding: 0;
          border: none;
          white-space: normal;
        }
        .record-table tbody tr.record-row {
          margin-bottom: 0.5rem;
        }
        .record-table tbody tr.record-row:last-child {
          margin-bottom: 0;
        }
        .record-table.trim-table tbody tr.record-row:has(+ tr.trim-targets-row) {
          margin-bottom: 0;
          border-radius: 8px 8px 0 0;
        }
        .record-table.trim-table tbody tr.record-row:has(+ tr.trim-targets-row):last-child {
          margin-bottom: 0;
        }
        .record-table tbody tr.record-row td[data-label="P&L"],
        .record-table tbody tr.record-row td[data-label="Unrealized"],
        .record-table tbody tr.record-row td[data-label="Est. P&L"] {
          margin-top: 0.35rem;
          padding-top: 0.45rem;
          border-top: 1px solid var(--border);
          font-size: 0.95rem;
          font-weight: 600;
        }
        .record-table tbody tr.record-row td[data-label="Status"] {
          font-weight: 600;
        }
        th, td {
          padding: 0.3rem 0.4rem;
        }
      }
      html.dashboard-tv {
        overflow-x: hidden;
        background: var(--bg);
      }
      body.dashboard-tv {
        zoom: var(--dashboard-scale, 0.5);
        width: calc(100vw / var(--dashboard-scale, 0.5));
        max-width: none;
        margin: 0;
      }
      body.dashboard-tv main {
        width: 100%;
        max-width: none;
      }
      body.dashboard-tv .dashboard-main-grid {
        grid-template-columns: minmax(11.5rem, 16rem) minmax(0, 1fr);
      }
      body.dashboard-tv .dashboard-main-grid .accounts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
      }
      /* Counter body zoom so range controls stay clickable on TV browsers. */
      body.dashboard-tv .chart-range-select {
        zoom: calc(1 / var(--dashboard-scale, 0.5));
        flex-shrink: 0;
      }
      body.dashboard-tv .chart-range-select select {
        font-size: 1rem;
        padding: 0.5rem 2rem 0.5rem 0.85rem;
      }
      /* Counter body zoom so Chart.js reads full-size containers (net ≈ desktop chart size on TV). */
      body.dashboard-tv {
        --tv-chart-height: 180px;
        --tv-chart-mini-height: 4rem;
        --tv-account-chart-height: 6.5rem;
      }
      body.dashboard-tv .chart-wrap,
      body.dashboard-tv .weekly-rolloff-chart-wrap,
      body.dashboard-tv .chart-wrap--mini {
        zoom: calc(1 / var(--dashboard-scale, 0.5));
      }
      body.dashboard-tv .chart-wrap {
        flex: 0 0 var(--tv-chart-height);
        height: var(--tv-chart-height);
      }
      body.dashboard-tv .equity-mini-charts .chart-wrap--mini {
        flex: 0 0 var(--tv-chart-mini-height);
        height: var(--tv-chart-mini-height);
      }
      body.dashboard-tv .account-info-chart .weekly-rolloff-chart-wrap {
        height: var(--tv-account-chart-height);
      }
      /* TV fullscreen — counter body zoom so overlay + charts fill the screen */
      body.dashboard-tv.card-fullscreen-open .card-fullscreen-overlay {
        zoom: calc(1 / var(--dashboard-scale, 0.5));
      }
      body.dashboard-tv .card-fullscreen-overlay .chart-wrap,
      body.dashboard-tv .card-fullscreen-overlay .weekly-rolloff-chart-wrap,
      body.dashboard-tv .card-fullscreen-overlay .chart-wrap--mini {
        zoom: 1;
      }
      body.dashboard-tv .card--fullscreen .chart-wrap {
        flex: 1 1 auto;
        height: auto !important;
        min-height: min(62vh, 720px);
      }
      body.dashboard-tv .card--fullscreen .chart-wrap--mini {
        flex: 1 1 auto;
        height: auto !important;
        min-height: min(50vh, 560px);
      }
      body.dashboard-tv .card--fullscreen .account-info-chart .weekly-rolloff-chart-wrap {
        flex: 1 1 auto;
        height: auto !important;
        min-height: min(50vh, 560px);
      }
      body.dashboard-tv .card-fullscreen-slot > .card {
        overflow: hidden;
      }
      body.dashboard-tv .card--fullscreen .account-info-grid.has-chart {
        flex: 1;
        min-height: 0;
        align-items: stretch;
      }
      body.dashboard-tv .card--fullscreen .account-info-chart {
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      @supports not (zoom: 1) {
        body.dashboard-tv {
          zoom: normal;
          transform: scale(var(--dashboard-scale, 0.5));
          transform-origin: top left;
          width: calc(100vw / var(--dashboard-scale, 0.5));
          min-height: calc(100vh / var(--dashboard-scale, 0.5));
        }
        body.dashboard-tv .chart-range-select {
          zoom: normal;
          transform: scale(calc(1 / var(--dashboard-scale, 0.5)));
          transform-origin: top right;
        }
      }
    </style>