.allocation-desktop-title, .allocation-desktop-total, .allocation-desktop-more { display: none; }
@layer allocation-desktop-spacing {
  @media (min-width: 1101px) {
    html body #sectors-section.active:is(.allocation-view-accounts, .allocation-view-countries, .allocation-view-dividends) .allocation-switch-wrapper {
      margin-bottom: 0 !important;
    }
    html body #sectors-section.active:is(.allocation-view-accounts, .allocation-view-countries, .allocation-view-dividends) .allocation-container {
      margin-top: 35mm !important;
    }
  }
}
@media (min-width: 1101px) {
  html body #sectors-section#sectors-section .allocation-hover-popup {
    transition: opacity 1500ms ease !important;
    transform: none !important;
  }
  html body #sectors-section#sectors-section .allocation-hover-popup.is-visible.is-fading {
    opacity: 0 !important;
    pointer-events: auto !important;
  }
  html body #sectors-section#sectors-section .allocation-hover-popup-header,
  html body #sectors-section#sectors-section .allocation-hover-popup-table {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Dividend allocation: compact status table, centered donut and readable holdings popup. */
@media (min-width: 1101px) {
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-switch-wrapper,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-container {
    width: calc(100% - 72px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-card {
    min-height: 0 !important; padding: 21px 28px 18px !important;
    border: 1px solid var(--allocation-border) !important; border-radius: 8px !important;
    background: var(--allocation-surface) !important; overflow: visible !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-card-heading,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-card-body {
    width: 100% !important; max-width: none !important; margin-inline: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-card-heading {
    margin-bottom: 17px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends #allocation-view-subtitle {
    margin: 0 !important; color: var(--allocation-muted) !important;
    font-size: clamp(13px, .78vw, 16px) !important; line-height: 1.25 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-card-body {
    display: grid !important; grid-template-columns: minmax(0, 37.45%) minmax(0, 1fr) !important;
    gap: 24px !important; align-items: start !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-stats.vertical-list {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    border: 1px solid var(--allocation-border) !important; border-radius: 6px !important;
    background: transparent !important; overflow: hidden !important; align-self: start !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-list-vertical {
    display: block !important; max-height: none !important; padding: 0 !important; overflow: visible !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends :is(.allocation-table-head, .allocation-item) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(76px, .9fr) minmax(78px, .85fr) minmax(54px, .62fr) !important;
    column-gap: 10px !important; padding-inline: 12px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-table-head {
    min-height: 50px !important; color: var(--allocation-muted) !important;
    border-bottom: 1px solid var(--allocation-border) !important; background: transparent !important;
    font-size: clamp(9px, .57vw, 11px) !important; line-height: 1.15 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-table-head span:first-child {
    max-width: 76px; white-space: normal !important; padding-left: 8px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-table-head span:not(:first-child) {
    text-align: center !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-item {
    height: clamp(42px, 2.4vw, 49px) !important; min-height: clamp(42px, 2.4vw, 49px) !important;
    max-height: none !important; grid-auto-rows: auto !important;
    border-bottom: 1px solid var(--allocation-border) !important; background: transparent !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-item:last-child { border-bottom: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-item.is-selected,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-item:hover {
    background: color-mix(in srgb, var(--allocation-accent) 13%, transparent) !important;
    box-shadow: inset 3px 0 var(--allocation-accent) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-name {
    min-width: 0 !important; gap: 9px !important; color: var(--allocation-text) !important;
    font-size: clamp(11px, .72vw, 15px) !important; line-height: 1.15 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-name i {
    width: 16px !important; height: 16px !important; flex: 0 0 16px !important; border-radius: 50% !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends :is(.allocation-value, .allocation-percentage, .allocation-holdings) {
    min-width: 0 !important; color: var(--allocation-text) !important;
    font-size: clamp(11px, .7vw, 14px) !important; line-height: 1.15 !important; white-space: nowrap !important;
    text-align: center !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-pie-wrapper.square-pie {
    position: relative !important; justify-self: start !important; align-self: start !important;
    width: clamp(350px, 20vw, 410px) !important; height: clamp(350px, 20vw, 410px) !important;
    max-width: none !important; max-height: none !important; margin: 10px 0 0 !important;
    overflow: visible !important; transform: none !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-pie-wrapper.square-pie canvas {
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-chart-center strong {
    color: var(--allocation-text) !important; font-size: clamp(23px, 1.55vw, 32px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-chart-center span {
    color: var(--allocation-muted) !important; font-size: clamp(13px, .82vw, 17px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup:not(.is-account-summary) {
    top: -48px !important; left: calc(100% + 16px) !important; right: auto !important;
    width: clamp(410px, 28vw, 570px) !important; max-width: min(570px, calc(100vw - 40px)) !important;
    max-height: min(482px, calc(100% + 58px)) !important; padding: 14px 16px 10px !important;
    border: 1px solid var(--allocation-muted) !important; border-radius: 9px !important;
    background: var(--allocation-surface) !important; color: var(--allocation-text) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22) !important; box-sizing: border-box !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-header {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important; align-items: start !important; gap: 4px 12px !important;
    margin: 0 !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--allocation-border) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-title {
    display: flex !important; grid-column: 1 !important; grid-row: 1 !important; align-items: center !important;
    gap: 10px !important; color: var(--allocation-text) !important; font-size: clamp(14px, .9vw, 18px) !important;
    font-weight: 700 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-title::before {
    content: ''; display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
    background: #10c6a8;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup[data-allocation-label="No dividends"] .allocation-hover-popup-title::before {
    background: #6591b8;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-percent {
    grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; padding-left: 26px !important;
    color: var(--allocation-muted) !important; font-size: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-percent::after {
    content: attr(data-holdings-count) ' holdings'; font-size: clamp(11px, .72vw, 14px);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-total {
    grid-column: 2 !important; grid-row: 1 / span 2 !important; color: var(--allocation-text) !important;
    font-size: clamp(15px, .9vw, 18px) !important; font-weight: 700 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-total::after {
    content: attr(data-portfolio-share) ' of portfolio'; display: block; margin-top: 4px;
    color: var(--allocation-muted); font-size: clamp(11px, .72vw, 14px); font-weight: 400;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-table {
    display: flex !important; min-height: 0 !important; gap: 0 !important; padding-top: 7px !important; overflow: hidden !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends :is(.allocation-hover-popup-row, .allocation-hover-popup-row--head) {
    display: grid !important; grid-template-columns: minmax(72px, .7fr) minmax(0, 2.25fr) minmax(72px, .72fr) !important;
    align-items: center !important; gap: 8px !important; min-height: 28px !important; padding: 0 5px !important;
    border-bottom: 0 !important; color: var(--allocation-text) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-row--head {
    min-height: 25px !important; color: var(--allocation-muted) !important; font-size: clamp(9px, .56vw, 11px) !important;
    border-bottom: 1px solid var(--allocation-border) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-row :is(.allocation-hover-popup-symbol, .allocation-hover-popup-company, .allocation-hover-popup-value) {
    min-width: 0 !important; color: var(--allocation-text) !important; font-size: clamp(10px, .66vw, 13px) !important;
    line-height: 1.15 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-row--head span:last-child,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-value { text-align: right !important; }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-row--head span:nth-child(2) { text-align: left !important; }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-body {
    min-height: 0 !important; max-height: 282px !important; padding: 0 6px 0 0 !important;
    margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important;
    scrollbar-width: thin; scrollbar-color: #3e7188 transparent;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-dividends .allocation-hover-popup-more:not(:empty) {
    min-height: 22px !important; padding-top: 7px !important; border-top: 1px solid var(--allocation-border) !important;
    color: var(--allocation-muted) !important; font-size: clamp(9px, .58vw, 11px) !important; text-align: left !important;
  }
}

/* Country allocation follows the compact desktop composition in the reference. */
@media (min-width: 1101px) {
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-switch-wrapper,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-container {
    width: calc(100% - 72px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-card {
    min-height: 0 !important;
    padding: 21px 28px 26px !important;
    border: 1px solid var(--allocation-border) !important;
    border-radius: 8px !important;
    background: var(--allocation-surface) !important;
    overflow: visible !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-card-heading,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-card-body {
    width: 100% !important; max-width: none !important; margin-inline: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-card-heading {
    margin-bottom: 17px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries #allocation-view-subtitle {
    margin: 0 !important; color: var(--allocation-muted) !important;
    font-size: clamp(14px, .98vw, 19px) !important; line-height: 1.25 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-card-body {
    --country-chart-size: clamp(240px, 17.1vw, 350px);
    --country-tooltip-size: clamp(300px, 23vw, 460px);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--country-chart-size) var(--country-tooltip-size) !important;
    gap: 18px !important; align-items: center !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-stats.vertical-list {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    align-self: center !important; overflow: visible !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-list-vertical {
    display: block !important; max-height: min(62vh, 620px) !important;
    overflow-y: auto !important; padding: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries :is(.allocation-table-head, .allocation-country-item) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(78px, .48fr) minmax(72px, .48fr) minmax(50px, .72fr) !important;
    column-gap: 10px !important; padding-inline: 9px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-table-head {
    min-height: 40px !important; color: var(--allocation-muted) !important;
    border-bottom: 1px solid var(--allocation-border) !important;
    background: transparent !important; font-size: clamp(9px, .58vw, 11px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-table-head span:first-child {
    padding-left: 48px !important; text-align: left !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-table-head span:nth-child(2),
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-table-head span:nth-child(3) {
    text-align: right !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-table-head span:nth-child(4) {
    display: block !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item {
    position: relative; align-items: center;
    height: clamp(48px, 3.6vw, 74px) !important; min-height: clamp(48px, 3.6vw, 74px) !important;
    border-bottom: 1px solid var(--allocation-border) !important;
    background: transparent !important; cursor: pointer;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item:is(.is-selected, :hover) {
    background: color-mix(in srgb, var(--allocation-color) 15%, transparent) !important;
    box-shadow: inset 4px 0 var(--allocation-color) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item .allocation-name {
    gap: 16px !important; color: var(--allocation-text) !important;
    font-size: clamp(12px, .82vw, 17px) !important; line-height: 1.15 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item .allocation-name i {
    width: clamp(17px, 1.13vw, 23px) !important; height: clamp(17px, 1.13vw, 23px) !important;
    flex-basis: clamp(17px, 1.13vw, 23px) !important; border-radius: 4px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item .allocation-value,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item .allocation-percentage {
    color: var(--allocation-text) !important; font-size: clamp(12px, .82vw, 17px) !important;
    line-height: 1.15 !important; white-space: nowrap !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item .allocation-value,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-item .allocation-percentage {
    text-align: right !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-bar {
    display: block !important; position: relative; height: 14px; overflow: hidden;
    border-radius: 999px; background: color-mix(in srgb, var(--allocation-muted) 18%, transparent);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-country-bar::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: var(--allocation-pct);
    border-radius: inherit; background: var(--allocation-color);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-holdings { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-pie-wrapper.square-pie {
    grid-column: 2 !important; position: relative !important;
    width: var(--country-chart-size) !important; height: var(--country-chart-size) !important;
    max-width: none !important; max-height: none !important; justify-self: start !important;
    align-self: center !important; margin: 0 !important; transform: none !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-hover-popup:not(.is-account-summary) {
    top: 0 !important; left: calc(100% + 18px) !important; right: auto !important;
    box-sizing: border-box !important;
    width: var(--country-tooltip-size) !important; max-width: var(--country-tooltip-size) !important;
    max-height: min(570px, calc(100% + 58px)) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-chart-center strong {
    color: var(--allocation-text) !important; font-size: clamp(22px, 1.45vw, 29px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-chart-center span {
    color: var(--allocation-muted) !important; font-size: clamp(13px, .82vw, 17px) !important;
  }
}
@media (min-width: 1101px) and (max-width: 1400px) {
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-card-body {
    gap: 18px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries :is(.allocation-table-head, .allocation-country-item) {
    grid-template-columns: minmax(0, 1fr) 78px 72px minmax(30px, .5fr) !important;
    column-gap: 6px !important; padding-inline: 4px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-countries .allocation-table-head span:first-child {
    padding-left: 38px !important;
  }
}
@media (min-width: 1101px) {
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-switch-wrapper,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-container {
    width: calc(100% - 40px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section {
    --allocation-surface: #0b1e27;
    --allocation-border: #1c3b49;
    --allocation-text: #edf2f7;
    --allocation-muted: #9bb3c4;
    --allocation-accent: #00bec7;
    --allocation-selected: #103942;
    gap: 0 !important;
  }
  html[data-appearance="light"] body #sectors-section#sectors-section#sectors-section {
    --allocation-surface: #fff;
    --allocation-border: #d8e6ef;
    --allocation-text: #173353;
    --allocation-muted: #6683a0;
    --allocation-accent: #009e9c;
    --allocation-selected: #e2f5f2;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-switch-wrapper {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: calc(100% - 72px) !important; max-width: none !important; height: 66px !important;
    margin: 28px auto 21px !important; padding: 7px 8px 7px 29px !important;
    border: 1px solid var(--allocation-border) !important; border-radius: 8px !important;
    background: var(--allocation-surface) !important; box-sizing: border-box;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-desktop-title {
    display: block; margin: 0; color: var(--allocation-text); font-size: 23px; font-weight: 700;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-switch-wrapper > .allocation-switch {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    width: 48% !important; height: 49px !important; margin: 0 !important; padding: 0 !important;
    border: 1px solid var(--allocation-border) !important; border-radius: 7px !important;
    background: transparent !important; box-shadow: none !important; overflow: hidden;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-option {
    display: flex !important; align-items: center; justify-content: center; gap: 14px;
    min-width: 0 !important; padding: 0 12px !important; height: 100% !important;
    border: 0 !important; border-right: 1px solid var(--allocation-border) !important;
    border-radius: 0 !important; color: var(--allocation-text) !important;
    background: transparent !important; font-size: 14px !important; box-shadow: none !important;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-option.active {
    color: var(--allocation-accent) !important; background: var(--allocation-selected) !important;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-option::after,
  html body #sectors-section#sectors-section#sectors-section .allocation-option::before { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section > .portfolio-summary-strip { min-height: 60px !important; margin-bottom: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section .switch-glow { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-container { margin: 0 auto !important; width: calc(100% - 72px) !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-accounts-card {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
    padding: 0 !important; min-height: 0 !important; border: 0 !important; background: transparent !important;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel {
    position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: 70px 1fr;
    column-gap: 22px; min-height: 394px; padding: 20px 29px 18px !important;
    border: 1px solid var(--allocation-border) !important; border-radius: 9px;
    background: var(--allocation-surface) !important; box-sizing: border-box;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel-heading {
    display: flex !important; grid-column: 1 / -1; justify-content: space-between; align-items: flex-start;
    min-height: 70px !important; gap: 12px; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel-heading > div { text-align: left !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel-icon { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel-heading h2 { color: var(--allocation-text) !important; font-size: 23px !important; font-weight: 700 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel-heading p { color: var(--allocation-text) !important; font-size: 16px !important; margin-top: 5px !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-desktop-total { display: block; color: var(--allocation-accent); font-size: 26px; white-space: nowrap; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-chart-wrap { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 283.5px; align-self: start; margin: 0 auto !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-chart-center:not(.is-account-hover) strong { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-chart-center { transition: opacity 1500ms ease !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-chart-center.is-fading { opacity: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-chart-center span { color: var(--allocation-muted) !important; font-size: 14px !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-legend { grid-column: 2; grid-row: 2; width: 100% !important; margin: 0 !important; align-self: start; background: transparent !important; border: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section :is(.allocation-account-legend-head, .allocation-account-legend-row) {
    display: flex !important; justify-content: space-between; align-items: center;
    min-height: 41px !important; padding: 0 8px !important; border: 0 !important;
    border-bottom: 1px solid var(--allocation-border) !important; background: transparent !important;
    color: var(--allocation-text) !important; font-size: 13px !important;
  }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-legend-head { min-height: 37px !important; border-top: 1px solid var(--allocation-border) !important; color: var(--allocation-muted) !important; font-weight: 500 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-legend-head span:first-child { padding: 0 0 0 4px !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-legend-name { gap: 10px !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-legend-name i { width: 14px; height: 14px; flex-basis: 14px; border-radius: 3px; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-legend:not(.show-all-accounts) .allocation-account-legend-row:nth-of-type(n+7) { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-desktop-more { display: block; position: absolute; bottom: 17px; left: calc(42% + 28px); padding: 0 8px; border: 0; background: transparent; color: var(--allocation-muted); font-size: 14px; cursor: pointer; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel:has(.show-all-accounts) { padding-bottom: 48px !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-desktop-more[hidden] { display: none !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--balance .allocation-account-panel-heading p { font-size: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--balance .allocation-account-panel-heading p::after { content: 'Current balance by account'; font-size: 16px; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--invested .allocation-account-panel-heading p { font-size: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--invested .allocation-account-panel-heading p::after { content: 'Capital contributed by account'; font-size: 16px; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--balance .allocation-account-chart-center:not(.is-account-hover) span { font-size: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--balance .allocation-account-chart-center:not(.is-account-hover) span::after { content: 'Balance'; font-size: 14px; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--invested .allocation-account-chart-center:not(.is-account-hover) span { font-size: 0 !important; }
  html body #sectors-section#sectors-section#sectors-section .allocation-account-panel--invested .allocation-account-chart-center:not(.is-account-hover) span::after { content: 'Invested'; font-size: 14px; }
}

/* Sector allocation uses the same desktop frame as Accounts. */
@media (min-width: 1101px) {
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-card {
    min-height: 0 !important;
    padding: 21px 28px 26px !important;
    border-color: var(--allocation-border) !important;
    border-radius: 8px !important;
    background: var(--allocation-surface) !important;
    overflow: visible !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-card-heading,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-card-body {
    width: 100% !important; max-width: none !important; margin-inline: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-card-heading {
    margin-bottom: 17px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors #allocation-view-subtitle {
    margin: 0 !important; color: var(--allocation-muted) !important;
    font-size: clamp(14px, .98vw, 19px) !important; line-height: 1.25 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-card-body {
    display: grid !important; grid-template-columns: minmax(0, 37.45%) minmax(0, 1fr) !important;
    gap: 24px !important; align-items: start !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-stats.vertical-list {
    width: 100% !important; max-width: none !important;
    border-color: var(--allocation-border) !important;
    border-radius: 6px !important;
    background: transparent !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-list-vertical {
    display: block !important; gap: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors :is(.allocation-table-head, .allocation-item) {
    grid-template-columns: minmax(0, 2.3fr) minmax(76px, 1.12fr) minmax(78px, 1fr) minmax(45px, .55fr) !important;
    column-gap: 8px !important; padding-inline: 16px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-table-head {
    min-height: clamp(30px, 1.8vw, 36px) !important;
    color: var(--allocation-muted) !important;
    border-bottom-color: var(--allocation-border) !important;
    background: rgba(4, 18, 27, .24) !important;
    font-size: clamp(9px, .58vw, 11px) !important;
  }
  html[data-appearance="light"] body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-table-head {
    background: #f4f8fb !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-table-head span:first-child {
    padding-left: 40px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-item {
    height: clamp(31px, 2.24vw, 46px) !important;
    min-height: clamp(31px, 2.24vw, 46px) !important;
    max-height: none !important; grid-auto-rows: auto !important;
    border-bottom: 1px solid var(--allocation-border) !important;
    background: transparent !important; cursor: pointer;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-item:last-child {
    border-bottom: 0 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-item.is-selected,
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-item:hover {
    background: color-mix(in srgb, var(--allocation-color) 22%, transparent) !important;
    box-shadow: inset 5px 0 var(--allocation-color) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors :is(.allocation-name, .allocation-value, .allocation-percentage, .allocation-holdings) {
    color: var(--allocation-text) !important;
    font-size: clamp(12px, .82vw, 17px) !important;
    line-height: 1.15 !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-name {
    gap: 16px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-name i {
    width: clamp(17px, 1.13vw, 23px) !important;
    height: clamp(17px, 1.13vw, 23px) !important;
    flex-basis: clamp(17px, 1.13vw, 23px) !important;
    border-radius: 4px !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-pie-wrapper.square-pie {
    width: clamp(440px, 31vw, 590px) !important;
    height: clamp(440px, 31vw, 590px) !important;
    max-width: none !important; max-height: none !important;
    justify-self: start !important; margin: 37px 0 0 0 !important;
    transform: none !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-chart-center strong {
    color: var(--allocation-text) !important;
    font-size: clamp(24px, 1.85vw, 38px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-chart-center span {
    color: var(--allocation-muted) !important;
    font-size: clamp(14px, 1vw, 20px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup:not(.is-account-summary) {
    top: -58px !important; left: auto !important;
    right: calc(-1 * var(--sector-detail-right-offset, 0px)) !important;
    width: clamp(360px, 28vw, 565px) !important;
    max-width: none !important;
    max-height: min(570px, calc(100% + 58px)) !important;
    padding: clamp(13px, .88vw, 18px) !important;
    border: 1px solid var(--allocation-muted) !important;
    border-radius: 10px !important;
    background: var(--allocation-surface) !important;
    color: var(--allocation-text) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24) !important;
    box-sizing: border-box;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto; gap: 6px 12px;
    align-items: start; padding: 0 8px 17px;
    border-bottom: 1px solid var(--allocation-border);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-title {
    display: flex; grid-column: 1; grid-row: 1; align-items: center; gap: 14px;
    color: var(--allocation-text); font-size: clamp(17px, 1.2vw, 24px); font-weight: 700;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-title::before {
    content: ''; display: inline-block; width: 22px; height: 22px; flex: 0 0 22px;
    border-radius: 4px; background: var(--sector-detail-color, #c8a63f);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-percent {
    grid-column: 1; grid-row: 2; justify-self: start; padding-left: 40px;
    color: var(--allocation-muted); font-size: 0;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-percent::after {
    content: attr(data-holdings-count) ' holdings'; font-size: clamp(11px, .82vw, 16px);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-total {
    grid-column: 2; grid-row: 1 / span 2; color: var(--allocation-text);
    font-size: clamp(17px, 1.17vw, 23px); font-weight: 700;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-total::after {
    content: attr(data-portfolio-share) ' of portfolio'; display: block;
    margin-top: 5px; color: var(--allocation-muted);
    font-size: clamp(11px, .75vw, 15px); font-weight: 400;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-table {
    gap: 0 !important; padding-top: 9px;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors :is(.allocation-hover-popup-row, .allocation-hover-popup-row--head) {
    grid-template-columns: minmax(80px, .75fr) minmax(0, 2.2fr) minmax(90px, .8fr) !important;
    min-height: clamp(27px, 1.9vw, 39px) !important;
    gap: 8px !important; padding: 0 7px;
    border-bottom: 1px solid var(--allocation-border);
    color: var(--allocation-text);
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-row--head {
    color: var(--allocation-muted) !important; font-size: clamp(10px, .58vw, 12px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-row :is(.allocation-hover-popup-symbol, .allocation-hover-popup-company, .allocation-hover-popup-value) {
    color: var(--allocation-text) !important; font-size: clamp(11px, .7vw, 14px) !important;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-row--head span:nth-child(2) {
    justify-self: center; text-align: center;
  }
  html body #sectors-section#sectors-section#sectors-section.active.allocation-view-sectors .allocation-hover-popup-body {
    max-height: min(480px, 26vw) !important; padding: 0 !important; margin: 0 !important;
  }
}