/* Full-width workspace: data uses the screen; controls retain a readable size.
   This layer owns layout only. Chart coordinates and mobile table renderers
   remain owned by their component styles. */
:root {
  --workspace-gap: 20px;
  --workspace-radius: 12px;
}

.page-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: 28px; line-height: 1.3; letter-spacing: -.025em; }
.page-head p { max-width: 80ch; margin-top: 6px; }
.eyebrow { margin-bottom: 5px; letter-spacing: .06em; }
.module-tabs { gap: 6px; border-color: var(--line); }
.module-tabs a { border-radius: 7px 7px 0 0; }
.module-tabs a.active { background: var(--primary-soft); }
.card, .stat { border-radius: var(--workspace-radius); box-shadow: 0 3px 14px rgba(25, 45, 60, .035); }
.section-head, .section-heading { gap: 12px 20px; }
.section-head h2, .section-heading h2 { font-size: 18px; line-height: 1.45; }
.section-head > div, .section-heading > div { min-width: 0; }
.section-head small { display: block; margin-top: 4px; }
.numeric-cell, .stat strong { font-variant-numeric: tabular-nums; }
/* Keep long account/security names from pushing actions outside their cards. */
.page-head > div:first-child, .account-card > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.account-card .actions { flex-wrap: wrap; justify-content: flex-start; }
.account-card .actions form { margin: 0; }
.account-card h2 { font-size: 21px; }
.account-card p { color: var(--muted); }
.account-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--workspace-gap); }
.account-grid .account-card { flex-direction: column; align-items: stretch; gap: 20px; }
.account-grid .account-card .actions { padding-top: 16px; border-top: 1px solid var(--line); margin-top: auto; }

/* Full-width shell does not mean a 2500px password field. */
.login-card { width: 100%; max-width: 480px; margin-inline: auto; }
.password-card { max-width: 640px; }
.form-card:not(.password-card) { max-width: 1120px; }
.research-search { grid-template-columns: minmax(0, 680px) auto; justify-content: start; }
.research-search label { min-width: 0; }

@media (min-width: 1200px) {
  .position-filter-primary { grid-template-columns: 240px minmax(240px, 360px) 220px 220px; }
  .position-filter-more > div { max-width: 1100px; }
  .trade-filter-primary { grid-template-columns: 220px 240px minmax(300px, 400px) 180px; }
  .watchlist-filter-fields { grid-template-columns: minmax(280px, 520px) 240px; }
  .watchlist-filter-fields-advanced { grid-template-columns: repeat(5, minmax(120px, 220px)); }
  .screening-filter-form { grid-template-columns: 240px minmax(280px, 440px) minmax(200px, 260px); }
  .screening-filter-form > label { min-width: 0; }
  .screening-overview-primary .stat { padding: 12px 16px; }
  .screening-overview-primary .stat span { font-size: 12px; }
  .screening-overview-primary .stat strong { margin-top: 5px; font-size: 23px; }
  .research-search { padding: 22px; }
}

@media (max-width: 900px) {
  .page-head { padding-bottom: 14px; }
  .page-head h1 { font-size: 25px; }
  .page-head > div:first-child { width: 100%; }
  .module-tabs { gap: 2px; }
  .module-tabs a { padding-inline: 10px; }
  .account-grid { gap: 14px; }
}
@media (max-width: 600px) {
  :root { --workspace-gap: 14px; }
  .research-search { grid-template-columns: minmax(0, 1fr); justify-content: stretch; padding: 18px; }
  .login-card { padding: 24px; }
  .page-head h1 { font-size: 24px; }
}

/* Related information shares a row only when both panels have useful space.
   DOM order remains the same on mobile, keyboard traversal and live refresh. */
.dashboard-overview-grid > *, .research-personal-grid > *, .performance-charts-grid > * { min-width: 0; }
.dashboard-positions .numeric-cell > small { display: block; }
.research-personal-grid .detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.research-judgement-details .note, .validation-method-note, .data-technical-detail p { max-width: 90ch; overflow-wrap: anywhere; }

@media (min-width: 1600px) {
  .research-personal-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--workspace-gap); align-items: start; }
  .performance-charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--workspace-gap); align-items: start; margin-top: 22px; }
  .performance-charts-grid > .card { margin-top: 0; }
  .performance-charts-grid > :only-child { grid-column: 1 / -1; }
  .performance-charts-grid > .alert { grid-column: 1 / -1; }
  .performance-charts-grid .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Activity records: retain one semantic table and the original links/fields.
   On phones the identity precedes a compact metric row, without hiding data. */
@media (max-width: 650px) {
  .activity-page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  .activity-page-head > div:first-child { width: auto; }
  .activity-page-head > .actions { width: auto; margin-left: auto; gap: 6px; }
  .activity-page-head .actions .button, .activity-page-head .trade-list-more > summary { padding-inline: 10px; }
  .trade-filters, .ledger-filters { grid-template-columns: minmax(0, 1fr) auto; }
  .trade-filters > .trade-filter-primary, .ledger-filters > .trade-filter-primary { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .trade-filters > .trade-filter-more, .ledger-filters > .trade-filter-more { border-top: 0; align-self: center; }
  .trade-filters > .trade-filter-more > summary, .ledger-filters > .trade-filter-more > summary { padding-top: 0; }
  .trade-filters > .trade-filter-more[open], .ledger-filters > .trade-filter-more[open] { grid-column: 1 / -1; }
  .trade-filter-more[open] + .filter-actions { grid-column: 1 / -1; }
  .trade-filters .trade-filter-primary, .ledger-filters .trade-filter-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-filter-primary > label { min-width: 0; }
  .trade-filter-primary :is(input, select) { height: 44px; }
  .trade-filter-primary > .trade-date-filter { grid-column: 1 / -1; }
  .trade-filter-primary > .activity-side-filter { grid-column: 1 / -1; }

  .activity-record-table tr { display: grid; gap: 10px 14px; padding: 16px; }
  .trade-list-table.activity-record-table tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.45fr) minmax(0, .8fr);
    column-gap: 10px;
    grid-template-areas: "time time time actions" "security security security kind" "account account account account" "price quantity turnover fees" "tags tags tags tags";
  }
  .ledger-list-table.activity-record-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "time actions" "kind kind" "security security" "cash multiplier" "account account";
  }
  .activity-record-table td { display: block; width: auto; padding: 0; min-width: 0; text-align: left; overflow-wrap: anywhere; white-space: normal; }
  .activity-record-table td::before { display: block; margin-bottom: 4px; font-size: 11px; text-align: left; font-weight: 500; }
  .activity-record-table .record-time { grid-area: time; align-self: center; color: var(--muted); font-size: 12px; }
  .activity-record-table .record-actions { grid-area: actions; justify-self: end; align-self: center; }
  .activity-record-table .record-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 44px; padding-inline: 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
  .activity-record-table .record-security { grid-area: security; font-size: 15px; font-weight: 700; }
  .activity-record-table .record-security small { margin-top: 4px; font-size: 11px; font-weight: 400; }
  .activity-record-table .record-kind { grid-area: kind; }
  .trade-list-table .record-kind { justify-self: end; align-self: start; }
  .ledger-list-table .record-kind { font-size: 16px; font-weight: 700; }
  .ledger-list-table .record-security { color: var(--muted); font-size: 12px; font-weight: 400; }
  .activity-record-table .record-account { grid-area: account; color: var(--muted); font-size: 12px; }
  .activity-record-table .record-tags { grid-area: tags; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; }
  .activity-record-table .record-price { grid-area: price; }
  .activity-record-table .record-quantity { grid-area: quantity; }
  .activity-record-table .record-fees { grid-area: fees; }
  .activity-record-table .record-turnover { grid-area: turnover; }
  .activity-record-table .record-cash { grid-area: cash; }
  .activity-record-table .record-multiplier { grid-area: multiplier; }
  .activity-record-table .numeric-cell { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }
  .activity-record-table :is(.record-time, .record-actions, .record-security, .record-kind)::before { display: none; }
  .activity-record-table :is(.record-account, .record-tags)::before { display: inline; margin-right: 8px; }
  .activity-record-table .record-tags small { display: inline; margin-left: 5px; }
}

/* Bring holdings into view without hiding data-trust conclusions or filters. */
@media (max-width: 650px) {
  .positions-page .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  .positions-page .page-head > div:first-child, .positions-page .page-head .actions { width: auto; }
  .positions-page .position-filter-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .positions-page .position-filter-primary label { min-width: 0; }
  .positions-page .position-filter-primary :is(input, select) { height: 44px; }
  .positions-page .concentration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .positions-page .concentration-summary > div:not(.compact-summary-head) { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
  .positions-page .concentration-summary strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
}

/* Mobile watchlist cards put the discovery decision in the first viewport:
   quote, stage, reason and selection stay visible; notes remain expandable. */
@media (max-width: 650px) {
  .watchlist-mobile-card { padding: 14px; }
  .watchlist-mobile-card header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .watchlist-mobile-security { min-width: 0; overflow-wrap: anywhere; }
  .watchlist-mobile-head-actions { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; gap: 0; }
  .watchlist-mobile-quote { align-items: baseline; justify-content: flex-end; flex-wrap: wrap; max-width: 145px; gap: 2px 6px; margin: 0; overflow-wrap: anywhere; }
  .watchlist-mobile-quote strong { font-size: 17px; }
  .watchlist-mobile-select { display: flex; flex-direction: row; align-items: center; gap: 6px; min-height: 36px; padding-left: 8px; margin: 0; color: var(--primary); white-space: nowrap; font-size: 11px; }
  .watchlist-mobile-select input { margin: 0; }
  .watchlist-mobile-status, .watchlist-mobile-signal { min-width: 0; margin-top: 10px; }
  .watchlist-mobile-decision-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
  .watchlist-mobile-signal .watchlist-signal { -webkit-line-clamp: 2; line-clamp: 2; }
  .watchlist-mobile-actions { margin-top: 10px; }
  .watchlist-mobile-details { margin-top: 10px; }
}

/* Sector discovery: retain the desktop ranking and every field; group phone
   records by identity, return horizon, breadth and leading stock. */
@media (max-width: 650px) {
  .sector-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .sector-overview .stat { min-width: 0; padding: 12px 14px; }
  .sector-overview .stat strong { font-size: 18px; margin-top: 5px; overflow-wrap: anywhere; }
  .sector-overview .stat span { font-size: 11px; }
  .sector-filters :is(input, select) { height: 44px; }
  .sector-ranking-table tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 16px 14px;
    grid-template-areas: "identity identity change" "five twenty turnover" "rising breadth members" "leader leader leader-change";
  }
  .sector-ranking-table td { display: block; width: auto; padding: 0; min-width: 0; text-align: left; overflow-wrap: anywhere; white-space: normal; }
  .sector-ranking-table td::before { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 400; }
  .sector-ranking-table .sector-record-identity { grid-area: identity; font-weight: 700; font-size: 16px; }
  .sector-ranking-table .sector-record-identity::before { display: none; }
  .sector-ranking-table .sector-record-identity small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; }
  .sector-ranking-table .sector-record-change { grid-area: change; text-align: right; font-weight: 700; }
  .sector-ranking-table .sector-record-five { grid-area: five; }
  .sector-ranking-table .sector-record-twenty { grid-area: twenty; }
  .sector-ranking-table .sector-record-turnover { grid-area: turnover; }
  .sector-ranking-table .sector-record-rising { grid-area: rising; }
  .sector-ranking-table .sector-record-breadth { grid-area: breadth; }
  .sector-ranking-table .sector-record-members { grid-area: members; }
  .sector-ranking-table .sector-record-leader { grid-area: leader; }
  .sector-ranking-table .sector-record-leader-change { grid-area: leader-change; text-align: right; }
  .sector-ranking-table :is(.sector-record-leader, .sector-record-leader-change) { padding-top: 10px; border-top: 1px solid var(--line); }
}

/* A comparison is metric-first on phones as well as desktops. The existing
   per-security view remains available without JS and keeps all evidence. */
.comparison-view-switch, .comparison-scroll-hint { display: none; }
.comparison-workspace > p { margin-inline: 16px; max-width: 100ch; }
.comparison-mobile-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 650px) {
  .comparison-view-switch { display: flex; gap: 8px; border: 0; padding: 0; margin: 18px 14px 8px; }
  .comparison-view-switch legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
  .comparison-view-switch label { display: flex; flex-direction: row; align-items: center; gap: 6px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; cursor: pointer; }
  .comparison-view-switch label:has(:checked) { color: var(--primary); background: var(--primary-soft); border-color: var(--border-emphasis); }
  .comparison-view-switch input { width: auto; margin: 0; }
  .comparison-workspace .comparison-scroll-hint { display: block; margin: 8px 14px 12px; color: var(--muted); font-size: 11px; }
  .comparison-workspace .comparison-table-wrap { display: block; max-height: 68vh; min-height: 260px; overflow: auto; position: relative; border-top: 1px solid var(--line); scroll-padding-top: 95px; }
  .comparison-workspace .comparison-table { table-layout: fixed; min-width: 100%; width: max(100%, calc(80px + var(--comparison-columns) * 132px)); border-collapse: separate; border-spacing: 0; }
  .comparison-table .comparison-metric-column { width: 80px; }
  .comparison-workspace .comparison-table :is(th, td) { min-width: 0; padding: 10px 8px; vertical-align: top; overflow-wrap: anywhere; white-space: normal; }
  .comparison-workspace .comparison-table td { font-size: 13px; }
  .comparison-workspace .comparison-table th:first-child { width: auto; }
  .comparison-workspace .comparison-table tbody th { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 1px 0 var(--line); }
  .comparison-workspace .comparison-table .comparison-group th { position: static; background: var(--primary-soft); }
  .comparison-workspace .comparison-group th > span { position: sticky; left: 8px; display: block; width: max-content; max-width: calc(100vw - 64px); }
  .comparison-workspace .comparison-table thead th { position: sticky; top: 0; z-index: 3; background: var(--card); box-shadow: 0 1px var(--line); font-size: 13px; }
  .comparison-workspace .comparison-table thead th:first-child { left: 0; z-index: 4; }
  .comparison-workspace .comparison-copy { min-width: 0; max-width: none; }
  .comparison-workspace .comparison-table td small { font-size: 11px; line-height: 1.5; font-weight: 400; }
  .comparison-workspace .comparison-mobile-cards { display: none; }
  .comparison-workspace:has(#comparison-view-cards:checked) .comparison-table-wrap,
  .comparison-workspace:has(#comparison-view-cards:checked) .comparison-scroll-hint { display: none; }
  .comparison-workspace:has(#comparison-view-cards:checked) .comparison-mobile-cards { display: grid; }
}

/* Sector detail: compact context and complete constituent records on phones.
   Desktop retains its table; chart coordinates and panning are unchanged. */
.sector-detail-overview > .stat { min-width: 0; }
@media (max-width: 650px) {
  .sector-detail-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .sector-detail-overview .stat { padding: 12px 14px; }
  .sector-detail-overview .stat strong { margin-top: 5px; font-size: 18px; overflow-wrap: anywhere; }
  .sector-detail-overview .stat span { font-size: 11px; }
  .sector-members-section .sector-members-table,
  .sector-members-section .sector-members-table tbody { display: block; width: 100%; min-width: 0; }
  .sector-members-section .sector-members-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sector-members-section .sector-members-table tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px;
    grid-template-areas: "name name return" "symbol symbol return" "price ma20 volume" "pe pb turnover";
    padding: 16px 14px; border-bottom: 1px solid var(--line);
  }
  .sector-members-section .sector-members-table tr:last-child { border-bottom: 0; }
  .sector-members-section .sector-members-table td {
    display: block; position: static; min-width: 0; padding: 0; border: 0;
    overflow-wrap: anywhere; white-space: normal; text-align: left;
  }
  .sector-members-section .sector-members-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sector-members-section .sector-member-symbol { grid-area: symbol; font-size: 11px; }
  .sector-members-section .sector-member-name { grid-area: name; font-weight: 700; font-size: 16px; }
  .sector-members-section .sector-members-table :is(.sector-member-symbol, .sector-member-name)::before { display: none; }
  .sector-members-section .sector-members-table .sector-member-return { grid-area: return; text-align: right; font-weight: 700; }
  .sector-members-section .sector-member-price { grid-area: price; }
  .sector-members-section .sector-member-ma20 { grid-area: ma20; }
  .sector-members-section .sector-member-volume { grid-area: volume; }
  .sector-members-section .sector-member-pe { grid-area: pe; }
  .sector-members-section .sector-member-pb { grid-area: pb; }
  .sector-members-section .sector-member-turnover { grid-area: turnover; }
  .sector-members-section .sector-members-table :is(.sector-member-price, .sector-member-ma20, .sector-member-volume, .sector-member-pe, .sector-member-pb, .sector-member-turnover) { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
}


/* Research signal history: show the decision evidence together on phones.
   The full eleven-column table remains the desktop representation. */
@media (max-width: 650px) {
  .research-signal-history .table-wrap { overflow: visible; }
  .research-signal-history .research-signals-table,
  .research-signal-history .research-signals-table tbody { display: block; width: 100%; min-width: 0; }
  .research-signal-history .research-signals-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .research-signal-history .research-signals-table tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px;
    grid-template-areas: "date date score" "strategy strategy version" "result5 result20 result60" "mfe mae status" "basis basis basis";
    padding: 16px 14px; border-bottom: 1px solid var(--line);
  }
  .research-signal-history .research-signals-table tr:last-child { border-bottom: 0; }
  .research-signal-history .research-signals-table td {
    display: block; position: static; min-width: 0; padding: 0; border: 0;
    overflow-wrap: anywhere; white-space: normal; text-align: left;
  }
  .research-signal-history .research-signals-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
  .research-signal-history .research-signal-date { grid-area: date; font-size: 13px; font-weight: 700; }
  .research-signal-history .research-signal-strategy { grid-area: strategy; font-size: 15px; font-weight: 700; }
  .research-signal-history .research-signal-version { grid-area: version; text-align: right; font-size: 11px; }
  .research-signal-history .research-signal-score { grid-area: score; text-align: right; font-size: 16px; font-weight: 700; }
  .research-signal-history .research-signal-result-5 { grid-area: result5; }
  .research-signal-history .research-signal-result-20 { grid-area: result20; }
  .research-signal-history .research-signal-result-60 { grid-area: result60; }
  .research-signal-history .research-signal-mfe { grid-area: mfe; }
  .research-signal-history .research-signal-mae { grid-area: mae; }
  .research-signal-history .research-signal-status { grid-area: status; }
  .research-signal-history .research-signal-basis { grid-area: basis; padding-top: 9px !important; border-top: 1px solid var(--line) !important; color: var(--muted); font-size: 11px; }
  .research-signal-history .research-signals-table :is(
    .research-signal-result,
    .research-signal-mfe,
    .research-signal-mae,
    .research-signal-status
  ) { padding-top: 9px; border-top: 1px solid var(--line); }
}


/* Account holdings: keep quantity, cost and cumulative results together on
   phones; the full table remains the desktop representation. */
@media (max-width: 650px) {
  .account-holdings-section .table-wrap { overflow: visible; }
  .account-holdings-section .account-holdings-table,
  .account-holdings-section .account-holdings-table tbody { display: block; width: 100%; min-width: 0; }
  .account-holdings-section .account-holdings-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .account-holdings-section .account-holdings-table tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px;
    grid-template-areas: "security security" "quantity average" "cost realized" "income return";
    padding: 16px 14px; border-bottom: 1px solid var(--line);
  }
  .account-holdings-section .account-holdings-table tr:last-child { border-bottom: 0; }
  .account-holdings-section .account-holdings-table td {
    display: block; position: static; min-width: 0; padding: 0; border: 0;
    overflow-wrap: anywhere; white-space: normal; text-align: left;
  }
  .account-holdings-section .account-holdings-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
  .account-holdings-section .account-holding-security { grid-area: security; font-size: 16px; font-weight: 700; }
  .account-holdings-section .account-holding-quantity { grid-area: quantity; }
  .account-holdings-section .account-holding-average { grid-area: average; }
  .account-holdings-section .account-holding-cost { grid-area: cost; }
  .account-holdings-section .account-holding-realized { grid-area: realized; }
  .account-holdings-section .account-holding-income { grid-area: income; }
  .account-holdings-section .account-holding-return { grid-area: return; }
  .account-holdings-section .account-holdings-table :is(.account-holding-quantity, .account-holding-average, .account-holding-cost, .account-holding-realized, .account-holding-income, .account-holding-return) { padding-top: 9px; border-top: 1px solid var(--line); }
}


/* Account recent trades: keep the event, security and execution values in
   one scannable mobile record instead of hiding columns in a scroll strip. */
@media (max-width: 650px) {
  .account-recent-trades-section .table-wrap { overflow: visible; }
  .account-recent-trades-section .account-recent-trades-table,
  .account-recent-trades-section .account-recent-trades-table tbody { display: block; width: 100%; min-width: 0; }
  .account-recent-trades-section .account-recent-trades-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .account-recent-trades-section .account-recent-trades-table tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
    grid-template-areas: "time time" "security security" "side price" "quantity quantity";
    padding: 16px 14px; border-bottom: 1px solid var(--line);
  }
  .account-recent-trades-section .account-recent-trades-table tr:last-child { border-bottom: 0; }
  .account-recent-trades-section .account-recent-trades-table td {
    display: block; position: static; min-width: 0; padding: 0; border: 0;
    overflow-wrap: anywhere; white-space: normal; text-align: left;
  }
  .account-recent-trades-section .account-recent-trades-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
  .account-recent-trades-section .account-trade-time { grid-area: time; font-size: 12px; }
  .account-recent-trades-section .account-trade-security { grid-area: security; font-size: 16px; font-weight: 700; }
  .account-recent-trades-section .account-trade-side { grid-area: side; }
  .account-recent-trades-section .account-trade-price { grid-area: price; }
  .account-recent-trades-section .account-trade-quantity { grid-area: quantity; }
  .account-recent-trades-section .account-recent-trades-table :is(.account-trade-side, .account-trade-price, .account-trade-quantity) { padding-top: 9px; border-top: 1px solid var(--line); }
}
.dashboard-head { align-items: flex-start; }
.dashboard-head > .actions { min-width: min(100%, 420px); }
.dashboard-head .dashboard-account-filter { min-width: 150px; }
.dashboard-head .dashboard-account-filter select { max-width: 220px; }
@media (max-width: 900px) {
  .dashboard-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 14px; }
  .dashboard-head > div:first-child { width: auto; }
  .dashboard-head > .actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: auto; min-width: 0; grid-column: 1 / -1; gap: 8px; }
  .dashboard-head .dashboard-account-filter { grid-column: 1 / -1; }
  .dashboard-head .dashboard-account-filter label, .dashboard-head .dashboard-account-filter select { width: 100%; max-width: none; }
  .dashboard-head .button { min-height: 42px; justify-content: center; padding-inline: 10px; }
}
@media (max-width: 430px) {
  .dashboard-head { gap: 10px 12px; }
  .dashboard-head h1 { font-size: 23px; }
  .dashboard-head > .actions { grid-template-columns: 1fr 1.18fr; }
  .dashboard-head .button { font-size: 12px; }
}

/* Dashboard: full-width totals above a contribution / performance reading row.
   Keep the semantic DOM order, original fields and responsive mobile cards. */
@media (min-width: 1000px) {
  .dashboard-workspace .dashboard-head { margin-bottom: 16px; padding-bottom: 16px; }
  .dashboard-workspace .dashboard-primary-head { margin-bottom: 8px; }
  .dashboard-workspace .dashboard-primary-head > div { display: flex; align-items: baseline; gap: 14px; }
  .dashboard-workspace .dashboard-primary-head h2 { margin: 0; font-size: 14px; }
  .dashboard-workspace .dashboard-primary-head .data-scope { margin: 0; }
  .dashboard-workspace .dashboard-primary-section { margin-bottom: 0; }
  .dashboard-workspace .dashboard-primary-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 0; margin-bottom: 0; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: var(--card); }
  .dashboard-workspace .hero-stat { min-width: 0; min-height: 112px; padding: 14px 22px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .dashboard-workspace .hero-stat + .hero-stat { border-left: 1px solid var(--line); }
  .dashboard-workspace .hero-stat:first-child { background: var(--primary-soft); border-radius: 11px 0 0 0; }
  .dashboard-workspace .hero-stat > strong { margin-top: 9px; font-size: 32px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
  .dashboard-workspace .hero-stat:first-child > strong { font-size: 36px; }
  .dashboard-workspace .hero-stat small { font-size: 12px; }
  .dashboard-workspace .dashboard-account-overview { display: flex; flex-direction: column; margin-bottom: 18px; }
  .dashboard-workspace .dashboard-breakdown { order: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 10px 0; border-radius: 0 0 12px 12px; border-top: 0; box-shadow: none; }
  .dashboard-workspace .dashboard-breakdown div { padding: 0 22px; }
  .dashboard-workspace .dashboard-breakdown strong { font-size: 16px; font-variant-numeric: tabular-nums; }
  .dashboard-workspace .portfolio-data-status-dashboard { order: 2; margin: 12px 0 0; padding: 10px 16px; box-shadow: none; }
  .dashboard-workspace .portfolio-data-status-dashboard-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; }
  .dashboard-workspace .portfolio-data-status-dashboard-main > .eyebrow { grid-column: 1; }
  .dashboard-workspace .portfolio-data-status-dashboard-heading { grid-column: 1; }
  .dashboard-workspace .portfolio-data-status-dashboard-main > p { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .dashboard-workspace .dashboard-observation-alerts { order: 3; }
  .dashboard-workspace .dashboard-positions .section-head { padding: 18px 20px; }
  .dashboard-workspace .dashboard-positions .section-head h2 { font-size: 18px; }
  .dashboard-workspace .dashboard-positions .table-wrap { padding: 0 8px; }
  .dashboard-workspace .dashboard-positions table { min-width: 0; }
  .dashboard-workspace .dashboard-positions th { font-size: 11px; white-space: normal; }
  .dashboard-workspace .dashboard-positions .numeric-cell { overflow-wrap: anywhere; white-space: normal; }
  .dashboard-workspace .dashboard-positions .numeric-cell > small { font-size: 11px; }
  .dashboard-workspace .dashboard-positions td { padding: 14px 12px; }
  .dashboard-workspace .dashboard-positions td:nth-child(4) { background: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
  .dashboard-workspace .dashboard-positions td:nth-child(4) strong { font-size: 17px; }
  .dashboard-workspace .dashboard-positions tbody tr:hover { background: var(--surface-hover); }
  .dashboard-workspace .dashboard-risk-overview { margin-top: 18px; }
}
@media (min-width: 1280px) {
  .dashboard-analysis-grid { display: grid; grid-template-columns: minmax(640px, 1.15fr) minmax(0, 1fr); gap: var(--workspace-gap); align-items: stretch; }
  .dashboard-analysis-grid > .dashboard-positions,
  .dashboard-analysis-grid > .dashboard-performance-card { margin: 0; min-width: 0; }
  .dashboard-analysis-grid > :only-child { grid-column: 1 / -1; }
  .dashboard-analysis-grid .dashboard-performance-card { display: flex; flex-direction: column; padding: 18px 20px 16px; }
  .dashboard-analysis-grid .dashboard-trend-head { flex-wrap: wrap; gap: 12px; }
  .dashboard-analysis-grid .dashboard-periods a { padding: 6px 9px; }
  .dashboard-analysis-grid .dashboard-performance-metrics { gap: 16px; margin: 20px 0 12px; }
  .dashboard-analysis-grid .dashboard-performance-metrics > div { min-width: 0; flex: 0 1 auto; }
  .dashboard-analysis-grid .dashboard-performance-metrics > div + div { padding-left: 16px; }
  .dashboard-analysis-grid .dashboard-performance-metrics .dashboard-performance-primary > strong { font-size: 30px; }
  .dashboard-analysis-grid .dashboard-performance-context { padding-left: 16px; font-size: 12px; }
  .dashboard-analysis-grid .dashboard-performance-card .dashboard-trend-canvas { flex: 1 0 240px; min-height: 240px; max-height: 340px; height: 240px; }
  .dashboard-analysis-grid .dashboard-trend-chart { position: absolute; inset: 0; height: 100%; }
  .dashboard-analysis-grid .dashboard-performance-footer { gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 12px; }
  .dashboard-analysis-grid .dashboard-performance-footer p span { display: block; margin: 4px 0 0; }
  .dashboard-analysis-grid .dashboard-performance-footer > div { gap: 14px; }
}
@media (min-width: 2200px) {
  .dashboard-analysis-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dashboard-analysis-grid .dashboard-performance-card .dashboard-trend-canvas { height: 260px; }
}

/* In both themes, reserve color for meaning rather than decorative panels. */
:root .dashboard-workspace .hero-stat {
  background: var(--card);
  border-color: var(--line);
}
:root .dashboard-workspace .dashboard-positions td:nth-child(4) {
  background: transparent;
}
:root[data-theme="dark"] .dashboard-workspace .market-session.closed {
  background: var(--neutral-soft);
  color: var(--muted);
}
:root[data-theme="dark"] .dashboard-workspace .market-session.lunch_break,
:root[data-theme="dark"] .dashboard-workspace .market-session.pre_open {
  background: var(--warning-soft);
  color: var(--amber);
}
@media (min-width: 1000px) {
  :root .dashboard-workspace .hero-stat { background: transparent; }
}