:root {
  color-scheme: light;

  --color-bg: #f3f4f6;
  --color-surface: rgba(255, 255, 255, .88);
  --color-surface-soft: rgba(241, 245, 249, .92);
  --color-border: rgba(100, 116, 139, .24);
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-accent: #0284c7;
  --color-backdrop: rgba(15, 23, 42, .36);

  --font-family-app: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 19px;
  --line-tight: 1.2;
  --line-normal: 1.45;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 14px;
  --space-xl: 18px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --module-gap: 12px;
  --module-padding-x: 12px;
  --module-padding-y: 12px;

  font-family: var(--font-family-app);
  background: var(--color-bg);
  color: var(--color-text);
}

:root[data-resolved-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0f172a;
  --color-surface: rgba(15, 23, 42, .82);
  --color-surface-soft: rgba(30, 41, 59, .72);
  --color-border: rgba(148, 163, 184, .28);
  --color-text: #e5e7eb;
  --color-muted: #94a3b8;
  --color-accent: #38bdf8;
  --color-backdrop: rgba(2, 6, 23, .62);
}

:root[data-resolved-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.appShell {
  min-height: 100vh;
  padding: var(--space-md);
}

.appHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.appHeaderTitle {
  min-width: 0;
  text-align: center;
}

.appHeaderTitle h1,
.viewHeader h1 {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-tight);
}

.eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xs);
  line-height: 1.25;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.menuButton,
.headerActionButton,
.drawerCloseButton,
.selectField,
.inputField {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: var(--radius-md);
}

.menuButton,
.headerActionButton,
.drawerCloseButton {
  min-width: 46px;
  min-height: 46px;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0 var(--space-sm);
}

.headerActions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.headerActionButton--csv {
  min-width: 58px;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.headerActionButton--settings {
  font-size: var(--font-size-lg);
}

.selectFieldWrap,
.inputFieldWrap {
  display: grid;
  gap: 3px;
}

.selectFieldLabel,
.inputFieldLabel {
  font-size: 11px;
  line-height: 1.1;
  color: var(--color-muted);
}

.selectField,
.inputField {
  min-height: 46px;
  padding: 0 10px;
  font-size: var(--font-size-sm);
}


.appDrawer {
  position: fixed;
  inset: 0;
  opacity: 0;
}

.appDrawer.isOpen {
  opacity: 1;
}

.drawerBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-backdrop);
}

.drawerPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: min(330px, 86vw);
  height: 100%;
  padding: var(--space-lg);
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}


.drawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.drawerHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.appNavigation {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: 0 0 var(--space-md);
  margin: 0 0 var(--space-md);
}

.appNavigation--drawer {
  overflow: visible;
  padding: 0;
  margin: 0;
}

.navButton {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
}


.navButton.isActive {
  border-color: color-mix(in srgb, var(--color-accent) 65%, transparent);
  color: var(--color-text);
}

.appView {
  display: grid;
  gap: var(--module-gap);
}

.viewHeader {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--module-padding-y) var(--module-padding-x);
  background: var(--color-surface);
}

.moduleGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--module-gap);
}

.moduleCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}

.moduleCardHeader {
  padding: var(--module-padding-y) var(--module-padding-x) var(--space-sm);
}

.moduleCardHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

.moduleCardSubtitle,
.emptyHint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.moduleBody {
  padding: 0 var(--module-padding-x) var(--module-padding-y);
}

.statusPill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 9px;
  font-size: var(--font-size-xs);
  line-height: var(--line-tight);
  color: var(--color-muted);
  background: var(--color-surface-soft);
}

.statusPill--info {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

@media (min-width: 860px) {
  .appShell {
    padding: var(--space-xl);
  }

  .appHeaderTitle {
    text-align: left;
  }

  .appHeaderMeta {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--space-md);
  }

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

/* Settings panel foundation */
.settingsPanel {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
}

.settingsPanel.isOpen {
  pointer-events: auto;
  opacity: 1;
}

.settingsBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-backdrop);
}

.settingsPanelBody {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 90vw);
  height: 100%;
  padding: var(--space-lg);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  transform: translateX(100%);
  transition: transform .18s ease;
}

.settingsPanel.isOpen .settingsPanelBody {
  transform: translateX(0);
}

.settingsPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.settingsPanelHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.settingsCloseButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-width: 46px;
  min-height: 46px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.settingsGroup {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
}

.settingsGroup h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.settingsHint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

/* Central reusable UI renderer styles */


.uiButton--md {
  min-height: 40px;
}

.uiButton--primary {
  color: var(--color-text);
}

.uiButton--secondary {
  background: var(--color-surface-soft);
}


/* Central reusable UI renderer styles */
.uiButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
}

.uiButton--sm {
  min-height: 34px;
  padding: 0 10px;
  font-size: var(--font-size-xs);
}

.uiButton--primary {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.uiButton--ghost {
  background: transparent;
}


.uiButton--full {
  width: 100%;
}

.actionList {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.actionList--column {
  display: grid;
}

.noticeBox,
.emptyState {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
}

.noticeBox h3,
.emptyState h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.noticeBox p,
.emptyState p,
.fieldHint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.noticeBox--success {
  border-color: rgba(34, 197, 94, .42);
}

.noticeBox--warning {
  border-color: rgba(245, 158, 11, .48);
}

.noticeBox--danger {
  border-color: rgba(239, 68, 68, .45);
}

.dataTableWrap {
  display: grid;
  gap: var(--space-sm);
}

.dataTableScroller {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.dataTable th,
.dataTable td {
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.dataTable th {
  color: var(--color-muted);
  line-height: var(--line-tight);
}

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

.dataTable [data-align="right"] {
  text-align: right;
}

.tableActionBar {
  display: flex;
  justify-content: center;
}

/* CSV file input foundation */
.visuallyHiddenFileInput {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  inset: auto auto 0 0;
}

/* Import panel foundation */
.importPanel {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
}

.importPanel.isOpen {
  pointer-events: auto;
  opacity: 1;
}

.importBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-backdrop);
}

.importPanelBody {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  transform: translateX(100%);
  transition: transform .18s ease;
}

.importPanel.isOpen .importPanelBody {
  transform: translateX(0);
}

.importPanelHeader {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.importPanelHeader h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importCloseButton {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-width: 46px;
  min-height: 46px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.importGroup {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
  margin: 0 0 var(--space-md);
}

.importGroup h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importHint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

/* Import panel visual refinement */
.importPanelBody {
  width: min(420px, 94vw);
  padding: 18px 14px 22px;
}

.importPanelHeader {
  align-items: flex-start;
  margin-bottom: 14px;
}

.importPanelTitle {
  min-width: 0;
}

.importPanelTitle h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.importHeaderHint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.importCloseButton {
  flex: 0 0 auto;
}

.importDropCard {
  display: grid;
  gap: 12px;
  border: 1px dashed color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-accent) 8%);
  padding: 16px;
  margin: 0 0 12px;
}

.importDropIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: .04em;
}

.importDropContent {
  display: grid;
  gap: 4px;
}

.importDropContent h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importGroup {
  margin-top: 12px;
}

.importGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.importGroupHeader h3 {
  margin: 0;
}

.importGroup .dataTableScroller {
  border-radius: 14px;
}

.importGroup .dataTable {
  min-width: 0;
}

.importGroup .dataTable th,
.importGroup .dataTable td {
  white-space: normal;
}

@media (min-width: 860px) {
  .importPanelBody {
    padding: 20px 18px 24px;
  }
}

/* Targeted status cards in previous import drawer */
.importStatusCard,
.importStoredCard {
  display: grid;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
  margin: 0 0 var(--space-md);
}

.importMetaLabel {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
}

.importStatusCard h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importStatusText {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.importStoredCard strong {
  display: block;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1.1;
}

.importStatusCard--success {
  border-color: rgba(34, 197, 94, .42);
}

.importStatusCard--warning {
  border-color: rgba(245, 158, 11, .52);
}

.importStatusCard--danger {
  border-color: rgba(239, 68, 68, .48);
}

/* Upload trigger via icon, no separate file button */
.importDropIconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 74px;
  height: 62px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  padding: 0;
}

.importDropIconButton .importDropIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #2f6df6, #47c8ff);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

.importDropIconButton:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Legacy-like import text and delete card */
.importBrokerCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, var(--color-border));
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--module-padding-y) var(--module-padding-x);
  margin: 0 0 var(--space-md);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.importBrokerCardText {
  min-width: 0;
}

.importBrokerCardText h3 {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.importBrokerCardText p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.importBrokerDeleteButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  min-width: 54px;
  border: 1px solid rgba(239, 68, 68, .32);
  border-radius: 18px;
  background: rgba(239, 68, 68, .10);
  color: rgb(239, 68, 68);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}

/* Portfolio read UI foundation */
.portfolioSummaryGrid {
  display: grid;
  gap: var(--space-sm);
}

.portfolioSummaryRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
  padding: var(--space-sm) 0 0;
}

.portfolioSummaryRow:first-child {
  border-top: 0;
  padding-top: 0;
}

.portfolioSummaryRow span {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.portfolioSummaryRow strong {
  color: var(--color-text);
  font-size: var(--font-size-md);
  text-align: right;
}

/* Zentrale DataTable- und TableLimit-Darstellung */
.rawTableLimitNotice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

:root[data-resolved-theme="light"] .rawTableLimitNotice {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(248, 250, 252, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.rawTableLimitNotice strong {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.rawTableLimitNotice > span {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.rawTableLimitNotice > button,
.rawTableLimitNotice .uiButton {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  white-space: nowrap;
  width: auto;
  min-width: max-content;
  margin-left: auto;
}

.dataTable {
  font-size: 12px;
  table-layout: auto;
}

.dataTable th,
.dataTable td {
  padding: 7px 8px;
  white-space: nowrap;
  vertical-align: middle;
}

.dataTable th {
  font-size: 12px;
  font-weight: 750;
}

[data-table-id="portfolio-history-table"] {
  min-width: 1180px;
}

[data-table-id="portfolio-history-table"] th:first-child,
[data-table-id="portfolio-history-table"] td:first-child {
  min-width: 260px;
  text-align: left;
}

@media (min-width: 901px) {
  .rawTableLimitNotice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    width: 100%;
  }

  .rawTableLimitNotice > button,
  .rawTableLimitNotice .uiButton {
    justify-self: end;
    align-self: center;
  }
}

@media (max-width: 900px) {
  .rawTableLimitNotice {
    display: block;
  }

  .rawTableLimitNotice > button,
  .rawTableLimitNotice .uiButton {
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    margin-left: 0;
  }

  .dataTable th,
  .dataTable td {
    font-size: 12px;
    padding: 7px 8px;
  }
}

/* RapidAPI Settings Foundation */
.settingsCheckboxWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 14px;
  color: var(--color-text, #e5e7eb);
}

.settingsCheckboxWrap input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent, #60a5fa);
}

.settingsInlineActions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

/* Provider Gate Status read-only */
.providerGateStatus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.24));
  border-radius: 12px;
  background: var(--color-surface-muted, rgba(15, 23, 42, 0.45));
}

.providerGateStatus strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.providerGateStatus p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted, #94a3b8);
}

.providerGateStatusDot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-accent, #60a5fa);
}

.providerGateStatus.isBlocked .providerGateStatusDot {
  background: var(--color-warning, #f59e0b);
}

/* QuoteMapping Status read-only */
.quoteMappingStatus {
  padding: 10px 12px;
  border: 1px dashed var(--color-border, rgba(148, 163, 184, 0.28));
  border-radius: 12px;
  background: var(--color-surface-muted, rgba(15, 23, 42, 0.35));
}

.quoteMappingStatus strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.quoteMappingStatus p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted, #94a3b8);
}

/* QuoteMapping Preview read-only */
.quoteMappingPreview {
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.22));
  border-radius: 12px;
  background: var(--color-surface-muted, rgba(15, 23, 42, 0.30));
}

.quoteMappingPreview > strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 8px;
}

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

.quoteMappingPreviewItem {
  padding: 8px;
  border-radius: 10px;
  background: var(--color-surface, rgba(15, 23, 42, 0.42));
}

.quoteMappingPreviewItem span,
.quoteMappingPreviewItem small {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-muted, #94a3b8);
}

.quoteMappingPreviewItem b {
  display: block;
  margin: 2px 0;
  font-size: 15px;
  line-height: 1.25;
}

/* Settings Accordion Struktur */
.settingsAccordion {
  display: block;
}

.settingsAccordionSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 800;
  color: var(--text);
}

.settingsAccordionSummary::-webkit-details-marker {
  display: none;
}

.settingsAccordionSummary::after {
  content: "▾";
  font-size: 13px;
  color: var(--muted);
  transform: rotate(-90deg);
  transition: transform .16s ease;
}

.settingsAccordion[open] .settingsAccordionSummary::after {
  transform: rotate(0deg);
}

.settingsAccordionSummary span {
  font-size: 15px;
}

.settingsAccordion > :not(summary) {
  margin-top: 12px;
}

.moduleCardHeader > .moduleSubCardTitle:first-child {
  margin-top: 0;
}

.moduleSubCard .moduleCardHeader {
  padding-top: calc(var(--module-padding-y) * 0.55);
  padding-bottom: 3px;
}

.moduleSubCard .moduleBody {
  padding-top: 0;
  padding-bottom: calc(var(--module-padding-y) * 0.6);
}

.moduleSubCard .moduleCardHeader > .moduleSubCardTitle:first-child {
  margin-top: 0;
  margin-bottom: 0;
}

.moduleSubCard .moduleCardHeader {
  padding-left: calc(var(--module-padding-x) * 0.72);
  padding-right: calc(var(--module-padding-x) * 0.72);
}

.moduleSubCard .moduleBody {
  padding-left: calc(var(--module-padding-x) * 0.72);
  padding-right: calc(var(--module-padding-x) * 0.72);
}

.buttonStack {
  display: grid;
  gap: var(--space-sm);
}

/* RapidAPI Settings UI Removal Fallback */
details:has(#rapidApiProviderFamilySelect),
details:has(#rapidApiKeyInput),
details:has([data-rapid-api-enabled]),
details:has([data-rapid-api-key-input]) {
  display: none !important;
}

/* Settings Area Accordion Module Subcards START */

.settingsAreaAccordionList {
  display: flex;
  flex-direction: column;
}

.settingsAreaAccordionCard {
  display: block;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.26));
  overflow: hidden;
}


.settingsAreaAccordionSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.settingsAreaAccordionSummary::-webkit-details-marker {
  display: none;
}

.settingsAreaSummaryText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.settingsAreaTitle {
  display: block;
}

.settingsAreaHint {
  color: var(--muted, #64748b);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.settingsAreaChevron {
  flex: 0 0 auto;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}

.settingsAreaAccordionCard[open] .settingsAreaChevron {
  transform: rotate(-90deg);
}

.settingsAreaAccordionBody {
  display: flex;
  flex-direction: column;
}

.settingsAreaActiveToggle {
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.22));
  background: var(--panel2, rgba(15, 23, 42, 0.035));
  cursor: pointer;
}

.settingsAreaActiveToggle input[type="checkbox"],
.settingsModuleToggle input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.18rem 0 0;
}

.settingsAreaActiveText,
.settingsModuleToggleText {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.settingsAreaActiveText strong,
.settingsModuleTitle {
  display: block;
  font-weight: 750;
  line-height: 1.3;
}

.settingsAreaActiveText small {
  color: var(--muted, #64748b);
  font-size: 0.88rem;
  line-height: 1.4;
}


.settingsModuleSubcard {
  display: block;
}

.settingsModuleToggle {
  display: flex;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.settingsModuleTitle {
  font-size: 0.96rem;
}

@media (max-width: 640px) {
  
  
  
  .settingsAreaHint {
    font-size: 0.88rem;
  }

  
  .settingsModuleTitle {
    font-size: 0.94rem;
  }
}
/* Settings Area Accordion Module Subcards END */

/* Settings Area Text Clean Module Normal START */
.settingsAreaHint {
  display: none;
}


.settingsModuleTitle {
  font-weight: 500;
}


.settingsModuleToggleText strong {
  font-weight: 500;
}
/* Settings Area Text Clean Module Normal END */

/* Settings Compact Override START */
.settingsPanelBody {
  overflow-y: auto;
}

.settingsAreaAccordionList {
  gap: 8px;
  margin-top: 10px;
}

.settingsAreaAccordionCard {
  border-radius: 12px;
  background: var(--panel2, rgba(15, 23, 42, 0.035));
}

.settingsAreaAccordionCard[open] {
  background: var(--panel, rgba(255, 255, 255, 0.72));
}

.settingsAreaAccordionSummary {
  gap: 8px;
  min-height: 0;
}

.settingsAreaSummaryText {
  gap: 0;
}

.settingsAreaTitle {
  font-size: 15px;
  line-height: 1.15;
}

.settingsAreaChevron {
  font-size: 14px;
  font-weight: 800;
}


.settingsAreaActiveToggle {
  gap: 8px;
}

.settingsAreaActiveToggle input[type="checkbox"],
.settingsModuleToggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.settingsAreaActiveText strong {
  line-height: 1.25;
}

.settingsAreaActiveText small {
  display: none;
}


.settingsModuleToggle {
  gap: 8px;
  align-items: center;
}

.settingsModuleToggleText {
  gap: 0;
}

.settingsModuleTitle,
.settingsModuleToggleText strong {
  font-size: 13px;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .settingsAreaAccordionList {
    gap: 8px;
    margin-top: 10px;
  }

  .settingsAreaAccordionSummary {
    padding: 10px 12px;
  }

  .settingsAreaAccordionBody {
    padding: 0 10px 10px;
  }

  .settingsAreaTitle {
    font-size: 15px;
  }

  .settingsModuleSubcard {
    padding: 6px 8px;
  }

  .settingsModuleTitle,
  .settingsModuleToggleText strong {
    font-size: 13px;
    font-weight: 400;
  }
}
/* Settings Compact Override END */

/* Settings Area Title Normal Module Borderless START */
.settingsAreaTitle {
  font-weight: 500;
}

.settingsAreaAccordionSummary {
  font-weight: 500;
}

.settingsAreaAccordionSummary:hover,
.settingsAreaAccordionSummary:focus,
.settingsAreaAccordionSummary:active {
  background: transparent;
}


.settingsModuleTitle,
.settingsModuleToggleText strong {
  font-weight: 400;
}
/* Settings Area Title Normal Module Borderless END */

/* Settings Spacing Area Title Module List Frame START */

/* Abstand zwischen den Haupt-Accordions im Settings-Panel */
.settingsPanelBody > .settingsAccordion + .settingsAccordion,
.settingsPanelBody > .settingsGroup + .settingsGroup {
  margin-top: 12px !important;
}

/* Bereichstitel kleiner und normal */
.settingsAreaTitle,
.settingsAreaAccordionSummary .settingsAreaTitle {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* Bereich-Accordion kompakt halten */
.settingsAreaAccordionSummary {
  padding: 9px 12px !important;
}

.settingsAreaAccordionBody {
  padding: 0 10px 10px !important;
  gap: 8px !important;
}

/* Ein gemeinsamer Rahmen um alle Module im geöffneten Bereich */
.settingsModuleSubcards {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.24)) !important;
  border-radius: 10px !important;
  background: transparent !important;
}

/* Module selbst ohne Einzelrahmen und ohne Card-/Hover-Effekt */
.settingsModuleSubcard {
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleSubcard:hover,
.settingsModuleSubcard:focus-within,
.settingsModuleSubcard:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleToggle {
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleToggle:hover,
.settingsModuleToggle:focus,
.settingsModuleToggle:active {
  background: transparent !important;
  box-shadow: none !important;
}

.settingsModuleTitle,
.settingsModuleToggleText strong,
.settingsModuleToggleText span {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

/* Checkboxen kompakt ausrichten */
.settingsModuleToggle input[type="checkbox"],
.settingsAreaActiveToggle input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin-top: 1px !important;
}

/* Bereich-aktiv bleibt separat, aber kompakt */
.settingsAreaActiveToggle {
  padding: 7px 8px !important;
  border-radius: 10px !important;
}

.settingsAreaActiveText strong {
  font-size: 13px !important;
  font-weight: 650 !important;
}

/* Settings Spacing Area Title Module List Frame END */

/* Import Broker Actions Compact START */
.brokerImportCard {
  display: grid;
  gap: 8px;
}

.brokerImportCard.isActive {
  border-color: var(--accent, #37a2ff);
}

.brokerImportCardHeader {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.brokerImportCardText {
  min-width: 0;
}

.brokerImportCard h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.brokerImportCard .moduleCardSubtitle {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.brokerActiveBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--accent, #37a2ff);
  border-radius: 999px;
  background: rgba(55, 162, 255, 0.09);
  color: var(--accent, #2563eb);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.brokerImportActions {
  margin-top: 2px;
}

.brokerImportActions .uiButton,
.brokerImportActions .uiButton--full {
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.brokerImportActions [data-import-delete-broker] {
  color: var(--danger, #dc2626) !important;
  border-color: rgba(220, 38, 38, 0.24) !important;
  background: transparent !important;
}

.brokerImportActions [data-import-delete-broker]:hover,
.brokerImportActions [data-import-delete-broker]:focus {
  background: rgba(220, 38, 38, 0.08) !important;
}
/* Import Broker Actions Compact END */

/* Import Stored Broker Card Structure START */
.importStoredBrokerImportsCard {
  display: grid;
  gap: 12px;
}

.importStoredBrokerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brokerImportList {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.22));
}

.importStoredBrokerImportsCard .brokerImportCard {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.importStoredBrokerImportsCard .brokerImportCard + .brokerImportCard {
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.18));
}

.importStoredBrokerImportsCard .brokerImportCard.isActive {
  border-color: var(--line, rgba(148, 163, 184, 0.18));
}

.importStoredBrokerImportsCard .brokerImportActions {
  margin-top: 6px;
}
/* Import Stored Broker Card Structure END */

.importPanelBody,
.importStoredBrokerImportsCard,
.brokerImportList,
.brokerImportCard,
.brokerImportCardHeader,
.brokerImportCardText {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.importPanelBody {
  overflow-x: hidden;
}

.brokerImportCardHeader {
  display: block;
}

.brokerImportCard .moduleCardSubtitle {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.brokerImportActions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

.brokerActiveBadge {
  position: static;
  flex: 0 0 auto;
  max-width: 100%;
}

.brokerImportActions .uiButton,
.brokerImportActions .uiButton--full {
  flex: 0 0 auto;
  max-width: 100%;
}

.importStatusCard,
.importStatusCard *,
.importStatusText,
.importHeaderHint {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.importStatusText,
.importStatusCard h3,
.importHeaderHint {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.importStatusCard {
  overflow-x: hidden;
}


.settingsStrategyEditPanel {
  display: grid !important;
  gap: 14px !important;
}

.settingsStrategySelectStack {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.settingsStrategySelectField {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
}

.settingsStrategySelectLabel {
  display: block !important;
  width: 100% !important;
  line-height: 1.25 !important;
}

.settingsStrategySelectControl {
  display: block !important;
  width: 100% !important;
}

.settingsStrategySelect {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.settingsStrategyStyleInfo {
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 14px;
  padding: 10px 12px;
}

.settingsStrategyStyleInfo > summary {
  cursor: pointer;
  font-weight: 700;
}

.settingsStrategyStyleInfoBody {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.settingsStrategyMetaGrid {
  display: grid;
  gap: 8px;
}

.settingsStrategyMetaItem {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.crashModeVisibleNotice.crashModeBottomHint {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: var(--color-muted) !important;
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-normal) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* FONT_WEIGHT_METRIC_TONE_START */

/* Dashboard: Treemap-Titel und Prozentwerte normal */
#dashboardTreemapContent .vmTreemapTileTitle,
#dashboardTreemapContent .vmTreemapTilePct,
#assetClassTreemapContent .vmTreemapTileTitle,
#assetClassTreemapContent .vmTreemapTilePct,
#assetClassTreemapLegend b {
  font-weight: 400 !important;
}

/* Dashboard: Ziel vs. Ist Asset-Titel normal */
#chartGoalContent .vmGoalAsset,
#chartGoalContent .vmGoalAssetLabel,
#chartGoalContent .vmGoalLabel,
#chartGoalContent .vmGoalRowTitle,
#chartGoalContent [data-goal-asset],
#chartGoalContent .chartAssetLabel {
  font-weight: 400 !important;
}

/* Dashboard: Vermögensprognose Titel/Werte normal, Tabelle darunter bleibt Tabellenstil */
#chartForecastContent :where(.vmForecastLabel, .vmForecastValue, .vmForecastMetric, .forecastLabel, .forecastValue, .chartLabel, .chartValue, .metricLabel, .metricValue, strong, b):not(th):not(td) {
  font-weight: 400 !important;
}

#chartForecastContent table th,
#chartForecastContent table td,
#chartForecastContent table th *,
#chartForecastContent table td * {
  font-weight: inherit;
}

/* Portfolio-Modus: Werte fett */
[id^="portfolioMode"][id$="Value"],
#portfolioModeDashboardBox .extensionMetric .value,
#portfolioModeDashboardBox .metricValue,
#portfolioModeDashboardBox .value {
  font-weight: 700 !important;
}

/* Portfolio-Kennzahlen Übersicht: Werte fett */
[id^="advancedMetric"],
#advancedPortfolioAnalysisPanel .extensionMetric .value,
#advancedPortfolioAnalysisPanel .metricValue,
#portfolioAdvancedMetricsBox .value,
#portfolioAdvancedMetricsBox .metricValue {
  font-weight: 700 !important;
}

/* Währungsrisiko und Faktor/Style: Kennzahlenwerte fett, Tabellen normal */
[id^="currencyRisk"][id$="Value"],
[id^="factorStyle"][id$="Value"],
#currencyRiskBox .extensionMetric .value,
#factorStyleBox .extensionMetric .value,
#currencyRiskBox .metricValue,
#factorStyleBox .metricValue,
#currencyRiskBox .value,
#factorStyleBox .value {
  font-weight: 700 !important;
}

#currencyRiskBox table th,
#currencyRiskBox table td,
#currencyRiskBox table th *,
#currencyRiskBox table td *,
#factorStyleBox table th,
#factorStyleBox table td,
#factorStyleBox table th *,
#factorStyleBox table td * {
  font-weight: inherit !important;
}

/* Wertgewichtung */
.metricToneOk {
  color: #22c55e !important;
}

.metricToneWarn {
  color: #f59e0b !important;
}

.metricToneBad {
  color: #ef4444 !important;
}

/* FONT_WEIGHT_METRIC_TONE_END */

/* CARD_FONT_WEIGHT_START */

/* Aktive Treemap/Heatmap-Cards: Titel und Prozentwerte normal, nicht fett */
#dashboardTreemapContent :is(b, strong, [style*="font-weight"], .vmTreemapTileTitle, .vmTreemapTilePct, .treemapTitle, .treemapPct, .tileTitle, .tilePct),
#assetClassTreemapContent :is(b, strong, [style*="font-weight"], .vmTreemapTileTitle, .vmTreemapTilePct, .treemapTitle, .treemapPct, .tileTitle, .tilePct) {
  font-weight: 400 !important;
}

/* Häufige Card-Strukturen: erste Zeile/Titel und Prozent-Zeile normal */
#dashboardTreemapContent :is(.vmTreemapTile, .treemapTile, .graphicCard, .chartCard, .dashboardTile, .assetCard) > :first-child,
#dashboardTreemapContent :is(.vmTreemapTile, .treemapTile, .graphicCard, .chartCard, .dashboardTile, .assetCard) > :nth-child(2),
#assetClassTreemapContent :is(.vmTreemapTile, .treemapTile, .graphicCard, .chartCard, .dashboardTile, .assetCard) > :first-child,
#assetClassTreemapContent :is(.vmTreemapTile, .treemapTile, .graphicCard, .chartCard, .dashboardTile, .assetCard) > :nth-child(2) {
  font-weight: 400 !important;
}

/* Ziel vs. Ist: Asset-Titel normal */
#chartGoalContent :is(b, strong, [style*="font-weight"], .vmGoalAsset, .vmGoalAssetLabel, .vmGoalLabel, .vmGoalRowTitle, .chartAssetLabel, [data-goal-asset]) {
  font-weight: 400 !important;
}

/* CARD_FONT_WEIGHT_END */

/* ACTIVE_CARD_FONT_WEIGHTS_START */

/* Heatmap/Treemap + Assetklassen-Treemap: Card-Titel und Prozentwerte nicht fett */
#dashboardTreemapContent > div > div,
#dashboardTreemapContent > div > div *,
#assetClassTreemapContent > div > div,
#assetClassTreemapContent > div > div * {
  font-weight: 400 !important;
}

/* Ziel vs. Ist: Asset-Titel nicht fett */
#chartGoalContent .chartBox > div > div:first-child,
#chartGoalContent .chartBox > div > div:first-child *,
#chartGoalContent > div > div > div:first-child,
#chartGoalContent > div > div > div:first-child *,
#chartGoalContent b,
#chartGoalContent strong {
  font-weight: 400 !important;
}

/* Vermögensprognose: Titel/Werte außerhalb Tabelle normal */
#chartForecastContent :where(b, strong, .value, .metricValue, .forecastValue, .chartValue):not(table *),
#chartForecastContent > div:not(.tableWrap) *,
#chartForecastContent .chartBox:not(.tableWrap) * {
  font-weight: 400 !important;
}

/* Portfolio-Modus: Labels normal, Werte fett */
#portfolioModeDashboardBox .extensionMetric > :first-child,
#portfolioModeDashboardBox .moduleCardSubtitle:first-child {
  font-weight: 400 !important;
}

#portfolioModeDashboardBox .extensionMetric > :not(:first-child),
#portfolioModeDashboardBox [id^="portfolioMode"][id$="Value"],
#portfolioModeDashboardBox .value,
#portfolioModeDashboardBox .metricValue {
  font-weight: 700 !important;
}

/* Portfolio-Kennzahlen Übersicht: Kennzahl-Titel normal, nur Werte fett */
#advancedPortfolioAnalysisPanel .extensionMetric > :first-child,
#portfolioAdvancedMetricsBox .extensionMetric > :first-child,
#advancedPortfolioAnalysisPanel .metricLabel,
#portfolioAdvancedMetricsBox .metricLabel {
  font-weight: 400 !important;
}

#advancedPortfolioAnalysisPanel .extensionMetric > :not(:first-child),
#portfolioAdvancedMetricsBox .extensionMetric > :not(:first-child),
#advancedPortfolioAnalysisPanel [id^="advancedMetric"],
#portfolioAdvancedMetricsBox [id^="advancedMetric"],
#advancedPortfolioAnalysisPanel .metricValue,
#portfolioAdvancedMetricsBox .metricValue,
#advancedPortfolioAnalysisPanel .value,
#portfolioAdvancedMetricsBox .value {
  font-weight: 700 !important;
}

/* Währungsrisiko/Faktor bleiben: Tabellen nicht fett erzwingen */
#currencyRiskBox table *,
#factorStyleBox table * {
  font-weight: inherit !important;
}

/* ACTIVE_CARD_FONT_WEIGHTS_END */

/* TITLE_AWARE_FONT_WEIGHTS_START */
.uiWeightNormal {
  font-weight: 400 !important;
}

.uiWeightBold {
  font-weight: 700 !important;
}
/* TITLE_AWARE_FONT_WEIGHTS_END */

.portfolioModeValueText {
  font-weight: 700 !important;
  color: var(--text-muted, #64748b) !important;
}

.portfolioModeLabelText {
  font-weight: 400 !important;
  color: var(--text-muted, #64748b) !important;
}

/* ANALYSIS_REAL_METRIC_EDGE_START */
.analysisSignalMetricCard {
  position: relative !important;
  overflow: hidden !important;
}

.analysisSignalMetricCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ap22-analysis-signal-edge-color, var(--color-text-muted, #94a3b8));
  pointer-events: none;
  z-index: 1;
}

.analysisSignalMetricCard > * {
  position: relative;
  z-index: 2;
}

.analysisSignalMetricCard [data-analysis-content-part="metric-value"],
.analysisSignalMetricCard [data-analysis-content-part="metric-detail"] {
  color: var(--text-muted, var(--color-text-muted, #64748b)) !important;
}
/* ANALYSIS_REAL_METRIC_EDGE_END */

/* FOUR_METRIC_EDGE_CSS_START */
.metricSignalEdgeCard {
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-left-color: var(--metric-signal-edge-color, var(--color-border, rgba(148, 163, 184, 0.42))) !important;
}

#advancedMetricTotalGainLoss,
#advancedMetricXirr,
#advancedMetricFireSuccess,
#advancedMetricBenchmarkDifference {
  color: var(--text-muted, var(--color-text-muted, #64748b)) !important;
  font-weight: 700 !important;
}
/* FOUR_METRIC_EDGE_CSS_END */

.portfolioScoreContent {
  display: grid;
  gap: 1rem;
}

.portfolioScoreHero {
  display: grid;
  gap: 0.9rem;
  align-items: center;
}

.portfolioScoreRing {
  --portfolio-score-angle: 0deg;
  --portfolio-score-color: var(--color-success, #22c55e);
  --portfolio-score-track: var(--color-border, rgba(148, 163, 184, 0.34));
  width: min(8.25rem, 42vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background:
    conic-gradient(
      var(--portfolio-score-color) 0deg var(--portfolio-score-angle),
      var(--portfolio-score-track) var(--portfolio-score-angle) 342deg,
      transparent 342deg 360deg
    );
}

.portfolioScoreRing::after {
  content: "";
  position: absolute;
  inset: 0.82rem;
  border-radius: inherit;
  background: var(--color-surface, var(--surface, Canvas));
  box-shadow: inset 0 0 0 1px var(--color-border, rgba(148, 163, 184, 0.22));
}

.portfolioScoreRingValue {
  position: relative;
  z-index: 1;
  color: var(--color-text, var(--text, #0f172a));
  font-size: clamp(1.9rem, 8vw, 2.55rem);
  font-weight: 800;
  line-height: 1;
}

.portfolioScoreRating {
  display: grid;
  gap: 0.35rem;
}

.portfolioScoreRatingTitle {
  margin: 0;
  color: var(--color-text, var(--text, #0f172a));
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.25;
}

.portfolioScoreRatingText,
.portfolioScoreInfluenceText {
  margin: 0;
  color: var(--text-muted, var(--color-text-muted, #64748b));
  line-height: 1.42;
}

@media (min-width: 720px) {
  .portfolioScoreHero {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.portfolioScoreContent .portfolioScoreRating {
  gap: 0.16rem;
}

.portfolioScoreContent .portfolioScoreRatingText {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.32;
  color: var(--text-muted, var(--color-text-muted, #64748b));
}

.portfolioScoreContent .portfolioScoreInfluenceText {
  margin: -0.22rem 0 0;
  padding-top: 0;
  font-size: 0.76rem;
  line-height: 1.32;
  color: var(--text-muted, var(--color-text-muted, #64748b));
}

.portfolioScoreContent .dataTableWrap + .portfolioScoreInfluenceText {
  padding-top: 0;
}

#portfolioModeDashboardContent [data-dashboard-content-part="portfolio-mode-cards"] > :has(#portfolioModeSelectedStrategyCard) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}


.importQuoteLayerV2[data-open="true"] {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.importQuoteLayerV2Card {
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  padding: 14px 16px;
  color: var(--text-main, #0f172a);
}

.importQuoteLayerV2Header {
  display: flex;
  justify-content: space-between;
}

.importQuoteLayerV2Eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}

.importQuoteLayerV2 h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.importQuoteLayerV2Badge {
  flex: 0 0 auto;
  background: var(--accent-soft, rgba(14, 165, 233, 0.12));
  color: var(--accent, #0284c7);
  font-weight: 800;
}

.importQuoteLayerV2Meta {
  margin: 8px 0 10px;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
}


.importQuoteLayerV2Item {
  margin: 0;
  border-radius: 14px;
  background: var(--surface-soft, rgba(240, 249, 255, 0.82));
  padding: 7px 9px;
  font-size: 0.82rem;
  line-height: 1.28;
  color: var(--text-main, #0f172a);
}

.importQuoteLayerV2More {
  color: var(--text-muted, #64748b);
}

.importQuoteLayerV2Meta[hidden] {
  display: none !important;
}


.importQuoteLayerV2List {
  display: grid;
}

.importQuoteLayerV2Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(232, 242, 249, 0.88);
}


.importQuoteLayerV2RowName {
  color: #172033;
}

.importQuoteLayerV2RowMeta {
  margin-top: 4px;
  color: #66768a;
  font-size: 0.9rem;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
}

.importQuoteLayerV2RowIcon {
  position: relative;
}

.importQuoteLayerV2Icon {
  font-weight: 800;
}

.importQuoteLayerV2Row[data-state="pending"] .importQuoteLayerV2IconPause,
.importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2IconSpinner,
.importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2IconDone,
.importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2IconError {
  display: flex;
}

.importQuoteLayerV2Row[data-state="pending"] .importQuoteLayerV2IconPause {
  color: #8a98aa;
}


.importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2IconDone {
  color: #1f9b62;
}

.importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2IconError {
  color: #c64f4f;
}

@keyframes importQuoteLayerV2Spin {
  to {
    transform: rotate(360deg);
  }
}


.importQuoteLayerV2RowIcon {
  border: 1.5px solid rgba(117, 135, 155, 0.38);
  background: rgba(255, 255, 255, 0.78);
}


.importQuoteLayerV2Row[data-state="pending"] .importQuoteLayerV2RowIcon {
  color: #8a98aa;
  border-color: rgba(138, 152, 170, 0.42);
}

.importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2RowIcon {
  color: #1f8acb;
}

.importQuoteLayerV2Row[data-state="done"] .importQuoteLayerV2RowIcon {
  color: #209764;
  border-color: rgba(32, 151, 100, 0.52);
  background: rgba(236, 253, 245, 0.86);
}

.importQuoteLayerV2Row[data-state="error"] .importQuoteLayerV2RowIcon {
  color: #c84d4d;
  border-color: rgba(200, 77, 77, 0.52);
  background: rgba(255, 241, 241, 0.88);
}


.importQuoteLayerV2::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(244, 248, 252, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  backdrop-filter: blur(22px) saturate(118%);
}


.importQuoteLayerV2RowName {
  font-size: 0.91rem !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.importQuoteLayerV2RowIcon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 2px 6px rgba(24, 39, 64, 0.06);
}


.importQuoteLayerV2Badge {
  font-size: 0.88rem;
}

.importQuoteLayerV2Header h3,
.importQuoteLayerV2 [data-import-quote-layer-v2-title] {
  font-size: 1rem;
  line-height: 1.15;
}

.importQuoteLayerV2 {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 2147482000 !important;
  display: none !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: calc(env(safe-area-inset-top, 0px) + 92px) 16px 24px !important;
  background: rgba(15, 23, 42, 0.42) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
  pointer-events: none !important;
  isolation: auto !important;
}

.importQuoteLayerV2[data-open="true"] {
  display: flex !important;
  pointer-events: auto !important;
}

.importQuoteLayerV2::before {
  content: none !important;
  display: none !important;
}

.importQuoteLayerV2Card {
  position: relative !important;
  z-index: 1 !important;
  width: min(680px, 100%) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 24px !important;
}

.importQuoteLayerV2Header {
  align-items: center !important;
  gap: 10px !important;
}

.importQuoteLayerV2Eyebrow,
.importQuoteLayerV2 [data-import-quote-layer-v2-eyebrow],
.importQuoteLayerV2Badge,
.importQuoteLayerV2RowName {
  font-size: 0.78rem !important;
  line-height: 1.18 !important;
  letter-spacing: -0.005em !important;
}

.importQuoteLayerV2Eyebrow,
.importQuoteLayerV2 [data-import-quote-layer-v2-eyebrow],
.importQuoteLayerV2Badge {
  font-weight: 600 !important;
}

.importQuoteLayerV2RowName {
  font-weight: 500 !important;
}

.importQuoteLayerV2 [data-import-quote-layer-v2-title],
.importQuoteLayerV2 [data-import-quote-layer-v2-title][hidden] {
  display: none !important;
}

.importQuoteLayerV2Badge {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.importQuoteLayerV2List {
  gap: 6px !important;
  margin-top: 9px !important;
}

.importQuoteLayerV2Row {
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 13px !important;
  gap: 8px !important;
}

.importQuoteLayerV2RowText {
  flex: 1 1 auto !important;
}

.importQuoteLayerV2RowName {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.importQuoteLayerV2RowMeta {
  display: none !important;
}

.importQuoteLayerV2RowIcon {
  border-width: 1px !important;
}

.importQuoteLayerV2Icon {
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

.importQuoteLayerV2IconSpinner {
  border-width: 1.4px !important;
}

.importQuoteLayerV2RowIcon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.importQuoteLayerV2Icon {
  position: absolute !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.importQuoteLayerV2IconPause,
.importQuoteLayerV2IconDone,
.importQuoteLayerV2IconError {
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.importQuoteLayerV2IconSpinner {
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  border: 2px solid rgba(31, 138, 203, 0.20) !important;
  border-top-color: rgba(31, 138, 203, 0.98) !important;
  border-right-color: rgba(31, 138, 203, 0.58) !important;
  background: transparent !important;
  animation: importQuoteLayerV2Spin 0.72s linear infinite !important;
}

.importQuoteLayerV2Row[data-state="loading"] .importQuoteLayerV2RowIcon {
  border-color: rgba(31, 138, 203, 0.58) !important;
  background: rgba(238, 249, 255, 0.86) !important;
}

.importQuoteLayerV2 {
  overflow: hidden !important;
}

.importQuoteLayerV2Card {
  display: flex !important;
  flex-direction: column !important;
}

@supports not (height: 100dvh) {
  .importQuoteLayerV2Card {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 116px) !important;
  }
}

.importQuoteLayerV2Header {
  flex: 0 0 auto !important;
}

.importQuoteLayerV2Meta {
  flex: 0 0 auto !important;
}


.importQuoteLayerV2List::-webkit-scrollbar {
  width: 4px;
}

.importQuoteLayerV2List::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.28);
}

.importQuoteLayerV2Card {
  padding-right: 16px !important;
}

.importQuoteLayerV2List {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.importQuoteLayerV2Row {
  box-sizing: border-box !important;
}


.importQuoteLayerV2 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  align-items: flex-start !important;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px) !important;
}

.importQuoteLayerV2Card {
  max-height: none !important;
  overflow: visible !important;
}

.importQuoteLayerV2List {
  flex: none !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  scrollbar-gutter: auto !important;
}

.importQuoteLayerV2Row {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

.importQuoteLayerV2RowText {
  min-width: 0 !important;
}

.importQuoteLayerV2RowIcon {
  margin-right: 0 !important;
}

.importQuoteLayerV2[data-open="true"] .importQuoteLayerV2Eyebrow::after {
  content: "";
  display: inline-block;
  min-width: 1.2em;
  text-align: left;
  animation: importQuoteLayerV2Dots 1.15s steps(4, end) infinite;
}

@keyframes importQuoteLayerV2Dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

/* TREEMAP_FONT_WEIGHT_SOURCE_NORMAL_FINAL */
#dashboardTreemapContent .vmTreemapTileTitle,
#dashboardTreemapContent .vmTreemapTilePct,
#assetClassTreemapContent .vmTreemapTileTitle,
#assetClassTreemapContent .vmTreemapTilePct,
#dashboardTreemapContent .vmTreemapTileTitle.vmGoalCardMeta,
#dashboardTreemapContent .vmTreemapTilePct.vmGoalCardMeta,
#assetClassTreemapContent .vmTreemapTileTitle.vmGoalCardMeta,
#assetClassTreemapContent .vmTreemapTilePct.vmGoalCardMeta {
  font-weight: 400 !important;
}

#dashboardTreemapContent .vmTreemapTileValue,
#assetClassTreemapContent .vmTreemapTileValue,
#dashboardTreemapContent .vmTreemapTileValue.vmGoalCardMeta,
#assetClassTreemapContent .vmTreemapTileValue.vmGoalCardMeta {
  font-weight: 400 !important;
}

/* UI_CONTENT_UIBUTTON_PRIMARY_BORDER_START */
/*
  Einheitliche dezente Primary-Border nur für zentrale Inhaltsbuttons.
  Bewusst NICHT betroffen:
  - Navigation / navButton
  - Header / CSV / Einstellungen / Hamburger
  - Drawer-Buttons
  - native button global
*/
.uiButton:not(.uiButton--danger) {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.uiButton--secondary,
.uiButton--ghost {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
}

.uiButton--danger {
  border-color: rgba(239, 68, 68, .45);
}

.uiButton:focus-visible:not(.uiButton--danger) {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 58%, transparent);
  outline-offset: 2px;
}
/* UI_CONTENT_UIBUTTON_PRIMARY_BORDER_END */

/* UI_RAW_TABLE_LIMIT_BUTTON_PRIMARY_BORDER_START */
/*
  Sonderfall: Tabellenlimit-Buttons wie
  "Alle Zeilen anzeigen" / "Monatsansicht vollständig".
  Diese haben eigene rawTableLimitNotice-Regeln mit !important
  und brauchen deshalb einen gezielten Override.
*/
.rawTableLimitNotice > button,
.rawTableLimitNotice .uiButton {
  border-color: color-mix(in srgb, var(--color-accent) 52%, transparent) !important;
}

.rawTableLimitNotice > button:focus-visible,
.rawTableLimitNotice .uiButton:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 58%, transparent);
  outline-offset: 2px;
}
/* UI_RAW_TABLE_LIMIT_BUTTON_PRIMARY_BORDER_END */


.appHeaderTitle--area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.appHeaderAreaTitle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: var(--color-text, var(--text, currentColor)) !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.appHeaderAreaTitleText {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.appHeader1Icon,
.navIcon {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.menuButton,
.headerActionButton,
.navButton {
  display: inline-flex !important;
  align-items: center !important;
}

.menuButton,
.headerActionButton {
  justify-content: center !important;
}

.menuButton .appHeader1Icon,
.headerActionButton .appHeader1Icon {
  width: 22px !important;
  height: 22px !important;
}

.navButton {
  gap: 10px !important;
}

.navButtonText {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.appHeaderMeta {
  display: none !important;
}

.appDrawer {
  z-index: 99998 !important;
  pointer-events: none !important;
}

.appDrawer.isOpen {
  pointer-events: auto !important;
}

.drawerBackdrop {
  z-index: 99998 !important;
}

.drawerPanel {
  z-index: 99999 !important;
  will-change: transform !important;
  transform: translateX(-102%) !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
}

.appDrawer.isOpen .drawerPanel {
  transform: translateX(0) !important;
}

.settingsPanel,
.importPanel {
  z-index: 99998 !important;
  pointer-events: none !important;
}

.settingsPanel.isOpen,
.importPanel.isOpen {
  pointer-events: auto !important;
}

.settingsBackdrop,
.importBackdrop {
  z-index: 99998 !important;
}

.settingsPanelBody,
.importPanelBody {
  z-index: 99999 !important;
  will-change: transform !important;
  transform: translateX(102%) !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
}

.settingsPanel.isOpen .settingsPanelBody,
.importPanel.isOpen .importPanelBody {
  transform: translateX(0) !important;
}

.appHeader .menuButton,
.appHeader .headerActionButton {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

.appHeader .menuButton .appHeader1Icon,
.appHeader .headerActionButton .appHeader1Icon {
  width: 20px !important;
  height: 20px !important;
}

.appHeader .appHeaderAreaTitle .appHeader1Icon {
  width: 19px !important;
  height: 19px !important;
}

@media (max-width: 900px) {
  .appHeader .menuButton,
  .appHeader .headerActionButton {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  .appHeader .menuButton .appHeader1Icon,
  .appHeader .headerActionButton .appHeader1Icon {
    width: 19px !important;
    height: 19px !important;
  }

  .appHeader .appHeaderAreaTitle {
    gap: 7px !important;
    font-size: 16px !important;
  }

  .appHeader .appHeaderAreaTitle .appHeader1Icon {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 420px) {
  .appHeader .menuButton,
  .appHeader .headerActionButton {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .appHeader .menuButton .appHeader1Icon,
  .appHeader .headerActionButton .appHeader1Icon {
    width: 18px !important;
    height: 18px !important;
  }

  .appHeader .appHeaderAreaTitle {
    font-size: 15.5px !important;
  }
}


.appNavigation--drawer .navButton {
  min-height: 40px !important;
}


@media (max-width: 420px) {
  .appNavigation--drawer .navButton {
    min-height: 38px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .appNavigation--drawer .navButton .navIcon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }
}

.appNavigation--drawer {
  display: grid !important;
  gap: 8px !important;
}

.appNavigation--drawer .navButton {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(18, 28, 47, .72) !important;
  color: var(--color-text, var(--text, #eaf0fb)) !important;
  text-align: left !important;
  font-weight: 750 !important;
}

.appNavigation--drawer .navButton .navIcon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}

.appNavigation--drawer .navButtonText {
  display: inline-block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.appNavigation--drawer .navButton.isActive,
.appNavigation--drawer .navButton[aria-current="page"] {
  box-shadow: none !important;
}


@media (min-width: 901px) {
  .appNavigation--drawer .navButton .navIcon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }
}

.appHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: var(--color-bg, #0b1220) !important;
  border-bottom: 1px solid var(--color-border, rgba(148, 163, 184, .22)) !important;
  margin-top: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.appShell.isOverlayOpen .appHeader {
  z-index: 5 !important;
}

.drawerPanel,
.drawerBackdrop,
.settingsPanelBody,
.settingsBackdrop,
.importPanelBody,
.importBackdrop {
  position: fixed;
}

.apP123ModeHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.apP123ModeBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #38bdf8) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent, #38bdf8) 18%, transparent);
  color: var(--color-text, #eaf0fb);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.apP123ModeBadge.is-etf {
  border-color: rgba(56, 189, 248, .55);
}

.apP123ModeBadge.is-stocks {
  border-color: rgba(250, 204, 21, .62);
  background: rgba(250, 204, 21, .12);
}

.apP123ModeBadge.is-hybrid {
  border-color: rgba(168, 85, 247, .62);
  background: rgba(168, 85, 247, .12);
}

.apP123ModeBadge.is-crypto {
  border-color: rgba(248, 113, 113, .62);
  background: rgba(248, 113, 113, .12);
}

.apP123ModeStrategy {
  min-width: 0;
  color: var(--color-text, #eaf0fb);
  font-weight: 750;
  line-height: 1.25;
}

.apP123ModeDescription,
.apP123ModeAllocation {
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

.apP123SmartInsightList,
.apP123StockCapList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apP123SmartInsightItem,
.apP123StockCapItem {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, .18);
}

.apP123SmartInsightTitle,
.apP123StockCapTitle {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.apP123SmartInsightText,
.apP123StockCapText {
  color: var(--color-muted, #9fb0ca);
  font-size: 13px;
  line-height: 1.4;
}


@media (max-width: 520px) {
  .apP123SmartInsightItem,
  .apP123StockCapItem {
    padding: 9px 10px;
  }

  .apP123SmartInsightTitle,
  .apP123SmartInsightText,
  .apP123StockCapTitle,
  .apP123StockCapText {
    font-size: 12.5px;
  }
}

/* kleines Badge direkt neben Portfolio-Modus Titel */
[data-module-id="dashboard.portfolioMode"] h1,
[data-module-id="dashboard.portfolioMode"] h2,
[data-module-id="dashboard.portfolioMode"] h3,
[data-module-id="dashboard.portfolioMode"] .moduleTitle,
[data-module-id="dashboard.portfolioMode"] .moduleCardTitle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.apP123TitleModeBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--color-accent, var(--accent, #38bdf8)) 55%, transparent) !important;
  background: color-mix(in srgb, var(--color-accent, var(--accent, #38bdf8)) 14%, var(--color-surface, var(--panel, transparent))) !important;
  color: var(--color-text, var(--text, #0f172a)) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.apP123ModeHeader--content {
  margin-bottom: 8px !important;
}

.apP123ModeHeader--content .apP123ModeStrategy {
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* falsch platziertes Content-Badge sicher verstecken */
#portfolioModeStrategyAllocationCard .apP123ModeBadge {
  display: none !important;
}

/* P123-Karten tag/nacht-konform */
.apP123SmartInsightItem,
.apP123StockCapItem {
  background: var(--color-surface, var(--panel, #ffffff)) !important;
  color: var(--color-text, var(--text, #0f172a)) !important;
  border-color: var(--color-border, var(--line, rgba(148, 163, 184, .28))) !important;
}

.apP123SmartInsightTitle,
.apP123StockCapTitle {
  color: var(--color-text, var(--text, #0f172a)) !important;
}

.apP123SmartInsightText,
.apP123StockCapText,
.apP123ModeDescription,
.apP123ModeAllocation {
  color: var(--color-muted, var(--muted, #64748b)) !important;
}

.apP123SmartInsightItem.is-good,
.apP123StockCapItem.is-good {
  border-color: color-mix(in srgb, #22c55e 52%, var(--color-border, var(--line, transparent))) !important;
  background: color-mix(in srgb, #22c55e 5%, var(--color-surface, var(--panel, #ffffff))) !important;
}

.apP123SmartInsightItem.is-warn,
.apP123StockCapItem.is-warn {
  border-color: color-mix(in srgb, #facc15 55%, var(--color-border, var(--line, transparent))) !important;
  background: color-mix(in srgb, #facc15 6%, var(--color-surface, var(--panel, #ffffff))) !important;
}

.apP123SmartInsightItem.is-bad,
.apP123StockCapItem.is-bad {
  border-color: color-mix(in srgb, #f87171 58%, var(--color-border, var(--line, transparent))) !important;
  background: color-mix(in srgb, #f87171 6%, var(--color-surface, var(--panel, #ffffff))) !important;
}

.apP123SmartInsightItem.is-neutral,
.apP123StockCapItem.is-neutral {
  border-color: var(--color-border, var(--line, rgba(148, 163, 184, .28))) !important;
  background: var(--color-surface, var(--panel, #ffffff)) !important;
}

/* Navigation tag/nacht-konform */
.appNavigation--drawer .navButton:not(.isActive):not([aria-current="page"]) {
  background: var(--color-surface, var(--panel2, #ffffff)) !important;
  color: var(--color-text, var(--text, #0f172a)) !important;
  border-color: var(--color-border, var(--line, rgba(148, 163, 184, .28))) !important;
}

.appNavigation--drawer .navButton:not(.isActive):not([aria-current="page"]) .navIcon {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: .95 !important;
}

.appNavigation--drawer .navButton.isActive,
.appNavigation--drawer .navButton[aria-current="page"] {
  background: var(--color-accent, var(--accent, #38bdf8)) !important;
  border-color: var(--color-accent, var(--accent, #38bdf8)) !important;
  color: #001527 !important;
}

.appNavigation--drawer .navButton.isActive .navIcon,
.appNavigation--drawer .navButton[aria-current="page"] .navIcon {
  color: #001527 !important;
  stroke: #001527 !important;
}

/* Portfolio-Modus: Core/Satellite-Ausgabe oben nicht an der Card kleben lassen */
#portfolioModeStrategyAllocationCard {
  padding-top: 1.25rem;
}

#portfolioModeStrategyAllocationCard > :first-child {
  margin-top: 0;
}

/* Nur Vermögensprognose: Annahmen-Badges Schlecht / Realistisch / Gut */
.apP5ForecastThemeScope .apP5ForecastAssumptionLabel {
  color: var(--color-muted, var(--muted, #64748b)) !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--color-border, var(--line, rgba(148, 163, 184, .34))) !important;
  background: var(--color-surface-soft, var(--panel2, #f8fafc)) !important;
  color: var(--color-text, var(--text, #0f172a)) !important;
  opacity: 1 !important;
  filter: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge * {
  color: inherit !important;
  opacity: 1 !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge.is-bad {
  border-color: color-mix(in srgb, #ef4444 64%, var(--color-border, var(--line, transparent))) !important;
  background: color-mix(in srgb, #ef4444 12%, var(--color-surface-soft, var(--panel2, #f8fafc))) !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge.is-neutral {
  border-color: color-mix(in srgb, var(--color-accent, var(--accent, #38bdf8)) 62%, var(--color-border, var(--line, transparent))) !important;
  background: color-mix(in srgb, var(--color-accent, var(--accent, #38bdf8)) 12%, var(--color-surface-soft, var(--panel2, #f8fafc))) !important;
}

.apP5ForecastThemeScope .apP5ForecastPaBadge.is-good {
  border-color: color-mix(in srgb, #22c55e 64%, var(--color-border, var(--line, transparent))) !important;
  background: color-mix(in srgb, #22c55e 12%, var(--color-surface-soft, var(--panel2, #f8fafc))) !important;
}

@media (max-width: 520px) {
  .apP5ForecastThemeScope .apP5ForecastPaBadge {
    min-height: 25px !important;
    padding: 5px 9px !important;
    font-size: 11.5px !important;
  }
}

/* Nur während aktiver Eingabe in Planungswerte/Budgets: teure Drawer-Paints abschalten */
html.apBudgetInputEditing .settingsBackdrop,
html.apBudgetInputEditing .drawerBackdrop,
html.apBudgetInputEditing .importBackdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
}

html.apBudgetInputEditing .settingsPanelBody,
html.apBudgetInputEditing .settingsPanel,
html.apBudgetInputEditing .drawerPanel,
html.apBudgetInputEditing [data-broker-planning-settings="1"] {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

html.apBudgetInputEditing [data-broker-planning-settings="1"],
html.apBudgetInputEditing [data-broker-planning-settings="1"] * {
  scroll-behavior: auto !important;
}

html.apBudgetInputEditing [data-broker-planning-input] {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  touch-action: manipulation;
}

/* Mobile Dashboard Test: Modulgruppen als 1-Modul-Carousel */
@media (max-width: 760px) {
  .apMobileDashboardCarousel {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .apMobileDashboardCarouselViewport {
    width: 100%;
    min-width: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
  }

  .apMobileDashboardCarouselViewport::-webkit-scrollbar {
    display: none;
  }

  .apMobileDashboardCarouselTrack {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  
  .apMobileDashboardCarouselSlide > [data-module-id] {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .apMobileDashboardCarouselDots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 8px 0 12px;
  }

  .apMobileDashboardCarouselDot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;
    padding: 0;
    border-radius: 999px;
    border: 0;
    background: var(--color-border, rgba(148, 163, 184, .45));
    opacity: .72;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
  }

  .apMobileDashboardCarouselDot.isActive {
    width: 18px;
    background: var(--color-accent, var(--accent, #38bdf8));
    opacity: 1;
  }

  .apMobileDashboardCarouselDot:focus-visible {
    outline: 2px solid var(--color-accent, var(--accent, #38bdf8));
    outline-offset: 3px;
  }
}

@media (min-width: 761px) {
  .apMobileDashboardCarousel {
    display: contents !important;
  }

  .apMobileDashboardCarouselViewport,
  .apMobileDashboardCarouselTrack,
  .apMobileDashboardCarouselSlide {
    display: contents !important;
  }

  .apMobileDashboardCarouselDots {
    display: none !important;
  }
}

/* Mobile Carousel: alle Slides innerhalb einer Gruppe auf gleiche Höhe strecken */
@media (max-width: 760px) {
  
  
  .apMobileDashboardCarouselSlide {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
    height: auto !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id] {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id] > .moduleCardBody,
  .apMobileDashboardCarouselSlide > [data-module-id] > .moduleBody,
  .apMobileDashboardCarouselSlide > [data-module-id] > .cardBody {
    flex: 1 1 auto !important;
  }
}

/* Direkte Share-/Ranking-Liste für Heatmap/Treemap und Assetklassen-Treemap */
#dashboardTreemapContent.apTreemapShareListContent,
#assetClassTreemapContent.apTreemapShareListContent {
  display: grid !important;
  gap: 12px !important;
}

.apTreemapShareListEmpty {
  margin: 0 !important;
  color: var(--color-muted, var(--muted, #64748b)) !important;
  font-size: var(--font-size-sm, 13px) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.apTreemapShareList {
  display: grid;
  gap: 12px;
}

.apTreemapShareRow {
  --ap-share-color: var(--color-accent, #38bdf8);
  --ap-share-width: 0%;
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, .24));
  border-left: 4px solid var(--ap-share-color);
  background: var(--color-surface, var(--surface, var(--panel, #ffffff)));
  box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

.apTreemapShareTop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.apTreemapShareIndex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ap-share-color) 14%, transparent);
  color: var(--color-text, var(--text, #0f172a));
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
}

.apTreemapShareName {
  min-width: 0;
  color: var(--color-text, var(--text, #0f172a));
  font-size: 0.92rem;
  line-height: 1.22;
  font-weight: 400 !important;
  overflow-wrap: anywhere;
}

.apTreemapSharePct {
  white-space: nowrap;
  color: var(--color-text, var(--text, #0f172a));
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apTreemapShareBar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ap-share-color) 13%, var(--color-border, rgba(148, 163, 184, .22)));
}

.apTreemapShareBar span {
  display: block;
  width: var(--ap-share-width);
  height: 100%;
  border-radius: inherit;
  background: var(--ap-share-color);
}

.apTreemapShareMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-muted, var(--muted, #64748b));
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 400 !important;
}

.apTreemapShareName,
.apTreemapSharePct,
.apTreemapShareMeta,
.apTreemapShareIndex {
  font-weight: 400 !important;
}

#dashboardTreemapContent .apTreemapShareName,
#dashboardTreemapContent .apTreemapSharePct,
#dashboardTreemapContent .apTreemapShareMeta,
#assetClassTreemapContent .apTreemapShareName,
#assetClassTreemapContent .apTreemapSharePct,
#assetClassTreemapContent .apTreemapShareMeta {
  font-weight: 400 !important;
}

.apTreemapShareRow b,
.apTreemapShareRow strong,
.apTreemapShareRow [style*="font-weight"] {
  font-weight: 400 !important;
}

.apTreemapShareName,
.apTreemapSharePct {
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  #dashboardTreemapContent.apTreemapShareListContent,
  #assetClassTreemapContent.apTreemapShareListContent {
    gap: 11px !important;
  }

  .apTreemapShareList {
    gap: 11px;
  }

  .apTreemapShareRow {
    padding: 10px 11px;
    border-radius: 14px;
    gap: 6px;
  }

  .apTreemapShareName {
    font-size: 0.86rem;
    line-height: 1.2;
    font-weight: 400 !important;
  }

  .apTreemapSharePct {
    font-size: 0.84rem;
    font-weight: 400 !important;
  }

  .apTreemapShareMeta {
    font-size: 0.72rem;
    font-weight: 400 !important;
  }

  .apTreemapShareBar {
    height: 5px;
  }
}

/* Vermögensprognose: kompakte Szenario-Cards aus vmBuildForecastRows(), ohne Tabelle */
#chartForecastContent {
  min-width: 0;
}

.apForecastCompactShell {
  display: grid;
  gap: 12px;
}

.apForecastCompactGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.apForecastCompactCard {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, .24));
  background: var(--color-surface, var(--surface, var(--panel, #ffffff)));
  box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

.apForecastCompactCard.bad {
  border-left: 4px solid #f59e0b;
}

.apForecastCompactCard.mid {
  border-left: 4px solid #38bdf8;
}

.apForecastCompactCard.good {
  border-left: 4px solid #22c55e;
}

.apForecastCompactTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.apForecastCompactTitle {
  margin: 0 !important;
  color: var(--color-text, var(--text, #0f172a));
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apForecastCompactRate {
  white-space: nowrap;
  color: var(--color-muted, var(--muted, #64748b));
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 400 !important;
}

.apForecastCompactRows {
  display: grid;
  gap: 10px;
}

.apForecastCompactRow {
  --ap-forecast-width: 0%;
  display: grid;
  gap: 5px;
}

.apForecastCompactRowTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.apForecastCompactYear {
  color: var(--color-muted, var(--muted, #64748b));
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 400 !important;
}

.apForecastCompactValue {
  color: var(--color-text, var(--text, #0f172a));
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 400 !important;
  text-align: right;
}

.apForecastCompactTrack {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border, rgba(148, 163, 184, .22));
}

.apForecastCompactFill {
  display: block;
  width: var(--ap-forecast-width);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent, #38bdf8);
}

.apForecastCompactCard.bad .apForecastCompactFill {
  background: #f59e0b;
}

.apForecastCompactCard.mid .apForecastCompactFill {
  background: #38bdf8;
}

.apForecastCompactCard.good .apForecastCompactFill {
  background: #22c55e;
}

.apForecastCompactEmpty {
  margin: 0 !important;
  color: var(--color-muted, var(--muted, #64748b)) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

#chartForecastContent b,
#chartForecastContent strong,
#chartForecastContent [style*="font-weight"],
.apForecastCompactCard b,
.apForecastCompactCard strong,
.apForecastCompactCard [style*="font-weight"] {
  font-weight: 400 !important;
}

@media (max-width: 900px) {
  .apForecastCompactGrid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .apForecastCompactCard {
    border-radius: 15px;
    padding: 11px;
  }

  .apForecastCompactRows {
    gap: 9px;
  }

  .apForecastCompactTitle {
    font-size: 0.9rem;
  }

  .apForecastCompactRate,
  .apForecastCompactValue {
    font-size: 0.8rem;
  }

  .apForecastCompactYear {
    font-size: 0.74rem !important;
  }
}

/* Zentrale Mobile-Basis für Cards innerhalb von Modulen */
.apInnerCardsMobileDots {
  display: none;
}

@media (max-width: 760px) {
  [data-ap-innercards-mobile="1"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--ap-innercards-gap, 12px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  [data-ap-innercards-mobile="1"]::-webkit-scrollbar {
    display: none;
  }

  [data-ap-innercards-mobile="1"] > [data-ap-innercard="1"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-inline: 0;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  [data-ap-innercards-mobile="1"] > [data-ap-innercard="1"],
  [data-ap-innercards-mobile="1"] > [data-ap-innercard="1"] * {
    box-sizing: border-box;
    max-width: 100%;
  }

  .apInnerCardsMobileDots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 18px;
    margin-top: 8px;
  }

  .apInnerCardsMobileDots[hidden] {
    display: none !important;
  }

  .apInnerCardsMobileDot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-border, rgba(148, 163, 184, .28));
    opacity: .78;
    transition: width .18s ease, opacity .18s ease, background .18s ease;
  }

  .apInnerCardsMobileDot.active,
  .apInnerCardsMobileDot[aria-current="true"] {
    width: 22px;
    background: var(--color-accent, #0ea5e9);
    opacity: 1;
  }
}

/* Zentraler Abstand für Dashboard-Modul-Swipe auf Mobile */
@media (max-width: 760px) {
  .apMobileDashboardCarousel {
    --ap-mobile-dashboard-carousel-slide-gap: 14px;
  }

  .apMobileDashboardCarouselViewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 0 !important;
  }

  .apMobileDashboardCarouselTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--ap-mobile-dashboard-carousel-slide-gap) !important;
    align-items: stretch !important;
  }

  .apMobileDashboardCarouselSlide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box !important;
  }

  .apMobileDashboardCarouselSlide > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 760px) {
  .apPortfolioPositionCardsSwipe {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .apPortfolioPositionCardsSwipeViewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .apPortfolioPositionCardsSwipeViewport::-webkit-scrollbar {
    display: none;
  }

  .apPortfolioPositionCardsSwipeTrack {
    --ap-portfolio-position-cards-swipe-gap: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--ap-portfolio-position-cards-swipe-gap);
    width: 100%;
    box-sizing: border-box;
  }

  .apPortfolioPositionCardsSwipeTrack > [data-ap-portfolio-position-card-slide] {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  .apPortfolioPositionCardsSwipeTrack > [data-ap-portfolio-position-card-slide] > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .apPortfolioPositionCardsSwipeDots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
  }

  .apPortfolioPositionCardsSwipeDot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
  }

  .apPortfolioPositionCardsSwipeDot.active,
  .apPortfolioPositionCardsSwipeDot[aria-current="true"] {
    width: 18px;
    background: var(--accent, #38bdf8);
  }
}

/* Mobile: Carousel-Höhe folgt aktiver Slide, Dots rücken direkt darunter */
@media (max-width: 760px) {
  :root {
    --ap-mobile-carousel-after-gap: 10px;
    --ap-mobile-carousel-dot-top-gap: 6px;
  }

  .apMobileDashboardCarousel,
  .apPortfolioPositionCardsSwipe,
  [data-ap-mobile-dashboard-carousel],
  [data-ap-mobile-carousel],
  [data-ap-carousel-root],
  [data-ap-portfolio-position-cards-swipe="1"] {
    overflow: visible !important;
  }

  .apMobileDashboardCarouselViewport,
  .apPortfolioPositionCardsSwipeViewport,
  .apPortfolioPositionsSwipeViewport,
  [data-ap-mobile-carousel-viewport] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transition: height .14s ease;
  }

  .apMobileDashboardCarouselTrack,
  .apPortfolioPositionCardsSwipeTrack,
  .apPortfolioPositionsSwipeTrack,
  [data-ap-mobile-carousel-track] {
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transition: height .14s ease;
  }

  .apMobileDashboardCarouselSlide,
  [data-ap-mobile-carousel-slide],
  [data-ap-portfolio-position-card-slide],
  [data-ap-portfolio-position-slide] {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }

  .apMobileDashboardCarouselSlide > *,
  [data-ap-mobile-carousel-slide] > *,
  [data-ap-portfolio-position-card-slide] > *,
  [data-ap-portfolio-position-slide] > * {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  .apMobileDashboardCarouselDots,
  .apPortfolioPositionCardsSwipeDots,
  .apPortfolioPositionsSwipeDots,
  [data-ap-mobile-carousel-dots] {
    margin-top: var(--ap-mobile-carousel-dot-top-gap) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .apMobileDashboardCarousel + *,
  .apPortfolioPositionCardsSwipe + *,
  [data-ap-mobile-carousel] + *,
  [data-ap-carousel-root] + *,
  [data-ap-portfolio-position-cards-swipe="1"] + * {
    margin-top: var(--ap-mobile-carousel-after-gap) !important;
  }
}

/* Mobile: alle Carousel-/Swipe-Dots einheitlich färben */
@media (max-width: 760px) {
  :root {
    --ap-mobile-dot-active-color: #0284c7;
    --ap-mobile-dot-inactive-color: rgba(203, 213, 225, 0.75);
  }

  .apMobileDashboardCarouselDot,
  .apMobileDashboardCarouselDots button,
  .apPortfolioPositionCardsSwipeDot,
  .apPortfolioPositionsSwipeDot,
  .apInnerCardsMobileDot,
  .apInnerCardsMobileDots button,
  [data-ap-mobile-carousel-dots] button,
  [data-ap-innercards-dots] button {
    background: var(--ap-mobile-dot-inactive-color) !important;
  }

  .apMobileDashboardCarouselDot.active,
  .apMobileDashboardCarouselDot[aria-current="true"],
  .apMobileDashboardCarouselDots button.active,
  .apMobileDashboardCarouselDots button[aria-current="true"],
  .apPortfolioPositionCardsSwipeDot.active,
  .apPortfolioPositionCardsSwipeDot[aria-current="true"],
  .apPortfolioPositionsSwipeDot.active,
  .apPortfolioPositionsSwipeDot[aria-current="true"],
  .apInnerCardsMobileDot.active,
  .apInnerCardsMobileDot[aria-current="true"],
  .apInnerCardsMobileDots button.active,
  .apInnerCardsMobileDots button[aria-current="true"],
  [data-ap-mobile-carousel-dots] button.active,
  [data-ap-mobile-carousel-dots] button[aria-current="true"],
  [data-ap-innercards-dots] button.active,
  [data-ap-innercards-dots] button[aria-current="true"] {
    background: var(--ap-mobile-dot-active-color) !important;
  }
}

/* Mobile: Zusatzabstand nach Swipe-Gruppen entfernen.
   Übrig bleibt nur der normale Parent-Grid-Gap. */
@media (max-width: 760px) {
  .apMobileDashboardCarousel,
  .apPortfolioPositionCardsSwipe,
  [data-ap-mobile-dashboard-carousel],
  [data-ap-mobile-carousel],
  [data-ap-carousel-root],
  [data-ap-portfolio-position-cards-swipe="1"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .apMobileDashboardCarousel + *,
  .apPortfolioPositionCardsSwipe + *,
  [data-ap-mobile-dashboard-carousel] + *,
  [data-ap-mobile-carousel] + *,
  [data-ap-carousel-root] + *,
  [data-ap-portfolio-position-cards-swipe="1"] + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .apMobileDashboardCarouselDots,
  .apPortfolioPositionCardsSwipeDots,
  .apPortfolioPositionsSwipeDots,
  .apInnerCardsMobileDots,
  [data-ap-mobile-carousel-dots],
  [data-ap-innercards-dots] {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .apMobileDashboardCarouselViewport,
  .apMobileDashboardCarouselTrack,
  .apPortfolioPositionCardsSwipeViewport,
  .apPortfolioPositionCardsSwipeTrack,
  .apPortfolioPositionsSwipeViewport,
  .apPortfolioPositionsSwipeTrack,
  [data-ap-mobile-carousel-viewport],
  [data-ap-mobile-carousel-track] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Analyse: mobile Modul-Swipe-Gruppen über zentrale Carousel-Attribute */
@media (max-width: 760px) {
  .apAnalysisModuleSwipe,
  [data-ap-analysis-module-swipe="1"] {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .apAnalysisModuleSwipeViewport,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-viewport] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    box-sizing: border-box;
  }

  .apAnalysisModuleSwipeViewport::-webkit-scrollbar {
    display: none;
  }

  .apAnalysisModuleSwipeTrack,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-track] {
    --ap-analysis-module-swipe-gap: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ap-analysis-module-swipe-gap);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .apAnalysisModuleSwipeTrack > [data-ap-analysis-module-swipe-slide],
  [data-ap-analysis-module-swipe="1"] [data-ap-analysis-module-swipe-slide] {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
  }

  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button.active,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button.isActive,
  [data-ap-analysis-module-swipe="1"] [data-ap-mobile-carousel-dots] button[aria-current="true"] {
    width: 18px;
  }
}

/* Rebalancing/Sparplan/Crash-Modus/Liquidität: mobile Paar-Swipes mit zentralen Carousel-Dots */
@media (max-width: 760px) {
  .apSectionPairMobileSwipe,
  [data-ap-section-pair-mobile-swipe="1"] {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .apSectionPairMobileSwipeViewport,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-viewport] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    box-sizing: border-box;
  }

  .apSectionPairMobileSwipeViewport::-webkit-scrollbar {
    display: none;
  }

  .apSectionPairMobileSwipeTrack,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-track] {
    --ap-section-pair-mobile-swipe-gap: 14px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--ap-section-pair-mobile-swipe-gap);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .apSectionPairMobileSwipeTrack > [data-ap-section-pair-mobile-swipe-slide],
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-section-pair-mobile-swipe-slide] {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
  }

  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button.active,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button.isActive,
  [data-ap-section-pair-mobile-swipe="1"] [data-ap-mobile-carousel-dots] button[aria-current="true"] {
    width: 18px;
  }
}

/* Mobile: keine Module/Swipe-Tracks dürfen den Body initial horizontal verbreitern. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #app,
  .appShell,
  .appMain,
  .appContent,
  .viewContent,
  .appViewContent,
  .moduleGrid,
  .moduleList,
  .contentGrid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .moduleCard,
  .card,
  [data-module-id] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .apMobileDashboardCarousel,
  .apPortfolioPositionCardsSwipe,
  .apAnalysisModuleSwipe,
  .apSectionPairMobileSwipe,
  [data-ap-mobile-carousel],
  [data-ap-carousel-root],
  [data-ap-analysis-module-swipe="1"],
  [data-ap-section-pair-mobile-swipe="1"],
  [data-ap-portfolio-position-cards-swipe="1"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: inline-size !important;
  }

  .apMobileDashboardCarouselViewport,
  .apPortfolioPositionCardsSwipeViewport,
  .apAnalysisModuleSwipeViewport,
  .apSectionPairMobileSwipeViewport,
  [data-ap-mobile-carousel-viewport] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .apMobileDashboardCarouselTrack,
  .apPortfolioPositionCardsSwipeTrack,
  .apAnalysisModuleSwipeTrack,
  .apSectionPairMobileSwipeTrack,
  [data-ap-mobile-carousel-track] {
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .apMobileDashboardCarouselSlide,
  [data-ap-mobile-carousel-slide],
  [data-ap-analysis-module-swipe-slide],
  [data-ap-section-pair-mobile-swipe-slide],
  [data-ap-portfolio-position-card-slide] {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tableWrap,
  .miniTable,
  .chartBox,
  .moduleCardBody,
  .moduleBody,
  .cardBody {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tableWrap,
  .miniTable {
    overflow-x: auto !important;
  }
}

/* Mobile: Karten, die in Swipe-Gruppen gehören, nicht kurz normal untereinander anzeigen.
   Sobald JS sie ins Carousel verschiebt, bekommen sie data-ap-mobile-carousel-slide und werden sichtbar. */
@media (max-width: 760px) {
  [data-module-id="dashboard.assetClassTreemap"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="dashboard.taxCockpit"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="dashboard.feeTaxExtended"]:not([data-ap-mobile-carousel-slide]),

  [data-module-id="portfolio.endedPositions"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="portfolio.endedPositions"]:not([data-ap-portfolio-position-card-slide]),

  [data-module-id="strategyScoreSimulationPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="strategyEngineCheckAnalysisPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="benchmarkComparisonStandalone"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="dataQualityAssistantPanel"]:not([data-ap-mobile-carousel-slide]),

  [data-module-id="currencyRiskBoxPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="rebalanceAdvancedStandalone"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="autoSavingsOptimizationPanel"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="crashAdvancedStandalone"]:not([data-ap-mobile-carousel-slide]),
  [data-module-id="liquidityActionsPanel"]:not([data-ap-mobile-carousel-slide]) {
    display: none !important;
  }

  [data-ap-mobile-carousel-slide],
  [data-ap-analysis-module-swipe-slide],
  [data-ap-section-pair-mobile-swipe-slide],
  [data-ap-portfolio-position-card-slide] {
    display: block !important;
  }
}

@media (max-width: 760px) {
  .apMobileDashboardCarousel,
  .apPortfolioPositionCardsSwipe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: inline-size !important;
  }

  .apMobileDashboardCarouselViewport,
  .apPortfolioPositionCardsSwipeViewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .apMobileDashboardCarouselViewport::-webkit-scrollbar,
  .apPortfolioPositionCardsSwipeViewport::-webkit-scrollbar {
    display: none;
  }

  .apMobileDashboardCarouselTrack,
  .apPortfolioPositionCardsSwipeTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .apMobileDashboardCarouselSlide,
  .apPortfolioPositionCardsSwipeSlide,
  [data-ap-mobile-carousel-slide],
  [data-ap-portfolio-position-card-slide] {
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .apMobileDashboardCarouselTrack > .apMobileDashboardCarouselSlide,
  .apPortfolioPositionCardsSwipeTrack > .apPortfolioPositionCardsSwipeSlide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .apMobileDashboardCarouselSlide > [data-module-id],
  .apPortfolioPositionCardsSwipeSlide > [data-module-id] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* AP_SETTINGS_AREAS_MODULES_DARK_SURFACE_FIX_START */
[data-resolved-theme="dark"] :where(.settingsAreaAccordionCard),
[data-theme="dark"] :where(.settingsAreaAccordionCard) {
  background: var(--color-surface, var(--panel, #0f172a)) !important;
  background-color: var(--color-surface, var(--panel, #0f172a)) !important;
  border-color: var(--color-border, var(--line, rgba(148, 163, 184, 0.24))) !important;
  color: var(--color-text, var(--text, #eaf0fb)) !important;
}

[data-resolved-theme="dark"] :where(.settingsAreaAccordionSummary),
[data-theme="dark"] :where(.settingsAreaAccordionSummary),
[data-resolved-theme="dark"] :where(.settingsAreaAccordionBody),
[data-theme="dark"] :where(.settingsAreaAccordionBody),
[data-resolved-theme="dark"] :where(.settingsAreaAccordionList),
[data-theme="dark"] :where(.settingsAreaAccordionList),
[data-resolved-theme="dark"] :where(.settingsModuleSubcards),
[data-theme="dark"] :where(.settingsModuleSubcards) {
  background: transparent !important;
  background-color: transparent !important;
}

[data-resolved-theme="dark"] :where(.settingsAreaActiveToggle),
[data-theme="dark"] :where(.settingsAreaActiveToggle) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-resolved-theme="dark"] :where(.settingsModuleSubcard),
[data-theme="dark"] :where(.settingsModuleSubcard),
[data-resolved-theme="dark"] :where(.settingsModuleToggle),
[data-theme="dark"] :where(.settingsModuleToggle) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

[data-resolved-theme="dark"] :where(
  .settingsAreaAccordionCard,
  .settingsAreaAccordionSummary,
  .settingsAreaActiveToggle,
  .settingsModuleSubcard,
  .settingsModuleToggle
) {
  color: var(--color-text, var(--text, #eaf0fb)) !important;
}

[data-theme="dark"] :where(
  .settingsAreaAccordionCard,
  .settingsAreaAccordionSummary,
  .settingsAreaActiveToggle,
  .settingsModuleSubcard,
  .settingsModuleToggle
) {
  color: var(--color-text, var(--text, #eaf0fb)) !important;
}
/* AP_SETTINGS_AREAS_MODULES_DARK_SURFACE_FIX_END */

/* AP_18F_HIDDEN_GROUP_SINGLE_CHILD_FULL_WIDTH_START */
.moduleGrid.moduleGrid--singleHiddenGroupChild {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  max-width: 100%;
}

.moduleGrid.moduleGrid--singleHiddenGroupChild > .moduleCard {
  grid-column: 1 / -1 !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.moduleGrid.moduleGrid--singleHiddenGroupChild > .moduleCard .dataTableWrap,
.moduleGrid.moduleGrid--singleHiddenGroupChild > .moduleCard .dataTableScroller,
.moduleGrid.moduleGrid--singleHiddenGroupChild > .moduleCard .dataTable {
  width: 100%;
  max-width: 100%;
}
/* AP_18F_HIDDEN_GROUP_SINGLE_CHILD_FULL_WIDTH_END */

/* AP_24C2_DRAWER_VERTICAL_SCROLL_START */
.appDrawer.isOpen .drawerPanel {
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.appDrawer.isOpen .appNavigation--drawer {
  overflow: visible !important;
  padding-bottom: 24px !important;
}
/* AP_24C2_DRAWER_VERTICAL_SCROLL_END */

/* AP_24C3_DRAWER_VERTICAL_ONLY_SCROLL_START */
.appDrawer.isOpen .drawerPanel {
  overflow-x: hidden !important;
}

.appDrawer.isOpen .appNavigation--drawer {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}
/* AP_24C3_DRAWER_VERTICAL_ONLY_SCROLL_END */




/* PORTFOLIO_ASSET_DRILLDOWN_SELECT_STYLE_START */
.portfolioAssetDrilldownSelectField {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.portfolioAssetDrilldownSelectLabel {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.portfolioAssetDrilldownSelect {
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control, 12px);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-normal);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ASSET_DRILLDOWN_SELECT_TABLE_FONT_FIX */
@media (max-width: 760px) {
  .portfolioAssetDrilldownSelect {
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: var(--line-normal);
  }
}
/* PORTFOLIO_ASSET_DRILLDOWN_SELECT_STYLE_END */

/* RELEASE_LOG_STRUCTURED_VIEW_START */
.appView--releaseLog {
  display: block;
}

.releaseLogView {
  display: grid;
  gap: 16px;
}

.releaseLogCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 24px);
  background: var(--color-surface);
  box-shadow: var(--shadow-card, none);
  padding: 18px;
}

.releaseLogCardTitle {
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.25;
}

.releaseLogMetaGrid,
.releaseLogModuleGrid,
.releaseLogTimeline,
.releaseLogAuditList,
.releaseLogRemovedList {
  display: grid;
  gap: 10px;
}

.releaseLogMetaRow {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-soft, var(--color-border));
}

.releaseLogMetaRow:last-child {
  border-bottom: 0;
}

.releaseLogMetaLabel,
.releaseLogTimelineMeta,
.releaseLogAuditItem span,
.releaseLogMuted {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.releaseLogMetaValue,
.releaseLogAuditItem strong {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
  word-break: break-word;
}

.releaseLogTimelineItem,
.releaseLogModuleGroup,
.releaseLogAuditItem,
.releaseLogRemovedItem {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control, 16px);
  background: var(--color-surface-raised, var(--color-surface));
  padding: 12px;
}

.releaseLogTimelineTitle,
.releaseLogModuleGroup h3,
.releaseLogRemovedItem h3 {
  margin: 4px 0 6px;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.releaseLogAuditItem p,
.releaseLogRemovedItem p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.releaseLogList {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

.releaseLogList li + li {
  margin-top: 6px;
}

.releaseLogAuditItem {
  display: grid;
  gap: 4px;
}

@media (min-width: 761px) {
  .releaseLogMetaGrid,
  .releaseLogModuleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* RELEASE_LOG_STRUCTURED_VIEW_END */