.etfp-section {
  --etfp-ink: #f4f7f3;
  --etfp-muted: #a9c2bd;
  --etfp-line: rgba(157, 210, 198, .18);
  --etfp-panel: #102b31;
  --etfp-deep: #0a2027;
  --etfp-sun: #ff715d;
  --etfp-moon: #76a9e4;
  margin: 34px auto 72px;
  padding: clamp(22px, 3vw, 44px);
  color: var(--etfp-ink);
  background: linear-gradient(145deg, #16483f 0%, #102b31 48%, #0d2530 100%);
  border: 1px solid rgba(126, 200, 184, .24);
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(3, 18, 22, .24);
}

.etfp-head,
.etfp-toolbar,
.etfp-summary,
.etfp-detail-top,
.etfp-picker-head {
  display: flex;
  align-items: center;
}

.etfp-head { justify-content: space-between; gap: 20px; }
.etfp-kicker { margin: 0 0 8px; color: #7fe0c7; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.etfp-head h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); letter-spacing: 0; }
.etfp-head p:last-child { margin: 8px 0 0; color: var(--etfp-muted); }
.etfp-asof { flex: 0 0 auto; padding: 10px 14px; border: 1px solid var(--etfp-line); border-radius: 999px; color: #d4e7e2; font-weight: 800; }

.etfp-tabs { display: inline-flex; gap: 4px; margin: 26px 0 18px; padding: 5px; background: rgba(5, 25, 30, .58); border: 1px solid var(--etfp-line); border-radius: 12px; }
.etfp-tabs button,
.etfp-toolbar button,
.etfp-category button,
.etfp-picker button,
.etfp-close,
.etfp-edit {
  border: 0;
  color: var(--etfp-muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.etfp-tabs button { padding: 10px 16px; border-radius: 8px; }
.etfp-tabs button.active { color: #fff; background: #2c665e; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }

.etfp-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.etfp-summary button {
  min-width: 0;
  padding: 15px 16px;
  text-align: left;
  color: var(--etfp-ink);
  background: rgba(7, 31, 37, .58);
  border: 1px solid var(--etfp-line);
  border-radius: 12px;
  cursor: pointer;
}
.etfp-summary button:nth-child(1) { border-top: 3px solid #ffbf5e; }
.etfp-summary button:nth-child(2) { border-top: 3px solid #ff715d; }
.etfp-summary button:nth-child(3) { border-top: 3px solid #76a9e4; }
.etfp-summary button:nth-child(4) { border-top: 3px solid #88d2c1; }
.etfp-summary button.active { background: rgba(68, 117, 106, .42); transform: translateY(-2px); }
.etfp-summary small { display: block; color: var(--etfp-muted); font-weight: 800; }
.etfp-summary small {
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
}
.etfp-summary button:nth-child(1) small { color: #ffd47d; background: rgba(255, 191, 94, .12); border-color: rgba(255, 191, 94, .3); }
.etfp-summary button:nth-child(2) small { color: #ff9a89; background: rgba(255, 113, 93, .12); border-color: rgba(255, 113, 93, .3); }
.etfp-summary button:nth-child(3) small { color: #9fc5f1; background: rgba(118, 169, 228, .13); border-color: rgba(118, 169, 228, .3); }
.etfp-summary button:nth-child(4) small { color: #9ce0cf; background: rgba(87, 205, 177, .12); border-color: rgba(87, 205, 177, .3); }
.etfp-summary strong { display: block; margin-top: 5px; font-size: 22px; }
.etfp-summary span { display: block; margin-top: 4px; color: #bdd2ce; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.etfp-toolbar { justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 18px 0 12px; }
.etfp-modes,
.etfp-regimes { display: inline-flex; gap: 4px; padding: 4px; background: rgba(4, 24, 30, .64); border: 1px solid var(--etfp-line); border-radius: 11px; }
.etfp-toolbar button { padding: 9px 13px; border-radius: 8px; }
.etfp-toolbar button.active { color: #fff; background: #326a62; }
.etfp-edit { padding: 10px 14px; color: #ffe29b; border: 1px solid rgba(255, 203, 99, .36); border-radius: 999px; }

.etfp-category { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; -ms-overflow-style: none; }
.etfp-category::-webkit-scrollbar { display: none; }
.etfp-category button { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--etfp-line); border-radius: 999px; }
.etfp-category button.active { color: #10262a; background: #d9e9e3; }

.etfp-chart-shell { position: relative; background: var(--etfp-deep); border: 1px solid var(--etfp-line); border-radius: 18px; overflow: hidden; }
.etfp-chart { display: block; width: 100%; height: auto; }
.etfp-grid { stroke: rgba(168, 210, 202, .11); stroke-width: 1; }
.etfp-axis { stroke: #5ed4c4; stroke-width: 2.2; }
.etfp-axis-label { fill: #8ae6d8; font-size: 17px; font-weight: 900; }
.etfp-quadrant-label { fill: #b9cdc9; font-size: 14px; font-weight: 800; opacity: .76; }
.etfp-star { cursor: pointer; transition: opacity .18s ease; }
.etfp-star circle { transition: transform .18s ease, filter .18s ease; transform-box: fill-box; transform-origin: center; }
.etfp-star:hover circle,
.etfp-star.active circle { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(255,255,255,.38)); }
.etfp-star.dim { opacity: .16; }
.etfp-star text { fill: #f8fbf8; font-size: 13px; font-weight: 900; text-anchor: middle; pointer-events: none; }
.etfp-ring-sun { stroke: var(--etfp-sun); }
.etfp-ring-moon { stroke: var(--etfp-moon); }
.etfp-fill-sun { fill: var(--etfp-sun); }
.etfp-fill-moon { fill: var(--etfp-moon); }
.etfp-new-badge rect {
  fill: rgba(17, 48, 54, .96);
  stroke: #ffd86d;
  stroke-width: 1.4px;
}
.etfp-star .etfp-new-badge text {
  fill: #ffe38c;
  stroke: none;
  font-size: 9px;
  font-weight: 900;
  text-anchor: middle;
}
.etfp-tick { fill: var(--etfp-muted); font-size: 12px; font-weight: 750; }
.etfp-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--etfp-muted); font-size: 13px; }
.etfp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; }

.etfp-detail { margin-top: 16px; padding: 18px; background: rgba(6, 28, 34, .58); border: 1px solid var(--etfp-line); border-radius: 14px; }
.etfp-detail-top { justify-content: space-between; gap: 12px; }
.etfp-detail h3 { margin: 0; font-size: 25px; }
.etfp-detail h3 small { margin-left: 8px; color: var(--etfp-muted); font-size: 14px; }
.etfp-tv { color: #fff; padding: 9px 13px; border: 1px solid rgba(125, 198, 231, .45); border-radius: 999px; text-decoration: none; font-weight: 800; }
.etfp-detail-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.etfp-detail-grid div { min-width: 0; padding: 12px; background: rgba(20, 59, 65, .62); border-radius: 9px; }
.etfp-detail-grid small { display: block; color: var(--etfp-muted); }
.etfp-detail-grid strong { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfp-up { color: #ff8979; }
.etfp-down { color: #8ebcf1; }

.etfp-picker[hidden] { display: none; }
.etfp-picker { margin: 15px 0; padding: 16px; background: rgba(8, 32, 38, .9); border: 1px solid var(--etfp-line); border-radius: 14px; }
.etfp-picker-head { justify-content: space-between; gap: 12px; }
.etfp-picker-head strong { font-size: 18px; }
.etfp-picker-head span { color: var(--etfp-muted); }
.etfp-close { width: 36px; height: 36px; border: 1px solid var(--etfp-line); border-radius: 50%; }
.etfp-picker-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.etfp-picker-list button { min-width: 0; padding: 10px; text-align: left; border: 1px solid var(--etfp-line); border-radius: 9px; }
.etfp-picker-list button.selected { color: #fff; background: #2c625b; border-color: #72c8b5; }
.etfp-picker-list b,
.etfp-picker-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etfp-picker-list small { margin-top: 3px; color: var(--etfp-muted); }

.etfp-picker-tools { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.etfp-picker-tools label { flex: 1; min-width: 180px; }
.etfp-picker-tools label span { display: block; margin-bottom: 5px; color: var(--etfp-muted); font-size: 12px; font-weight: 800; }
.etfp-picker-search { width: 100%; min-height: 42px; padding: 9px 12px; color: var(--etfp-ink); background: rgba(4,24,30,.52); border: 1px solid var(--etfp-line); border-radius: 9px; font: inherit; }
.etfp-picker-actions { display: flex; gap: 6px; }
.etfp-picker-actions button { min-height: 42px; padding: 8px 12px; border: 1px solid var(--etfp-line); border-radius: 9px; }
.etfp-picker-actions button:last-child { color: #102d34; background: #8bd4c1; }
.etfp-picker-status { min-height: 21px; margin: 9px 0 0; color: #ffd98a; font-weight: 800; }
.etfp-empty { grid-column: 1 / -1; color: var(--etfp-muted); }

.etfp-quick { margin-top: 16px; padding: 17px; background: rgba(6, 28, 34, .68); border: 1px solid var(--etfp-line); border-radius: 14px; }
.etfp-quick-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.etfp-quick-title span,
.etfp-quick-title small { color: var(--etfp-muted); font-weight: 800; }
.etfp-quick-title h3 { margin: 2px 0; font-size: 24px; }
.etfp-quick-title a,
.etfp-back-chart { padding: 9px 13px; color: #fff; background: transparent; border: 1px solid rgba(125,198,231,.45); border-radius: 999px; text-decoration: none; font: inherit; font-weight: 800; cursor: pointer; }
.etfp-quick-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.etfp-quick-grid > div { min-width: 0; padding: 11px; background: rgba(20,59,65,.62); border-radius: 9px; }
.etfp-quick-grid small { display: block; color: var(--etfp-muted); }
.etfp-quick-grid strong { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.etfp-board { margin-top: 18px; padding: 18px; background: rgba(5,25,31,.7); border: 1px solid var(--etfp-line); border-radius: 16px; scroll-margin-top: 16px; }
.etfp-board > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.etfp-board h3 { margin: 0; font-size: 27px; }
.etfp-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--etfp-line); border-radius: 12px; }
.etfp-board table { width: 100%; min-width: 900px; border-collapse: collapse; }
.etfp-board th,
.etfp-board td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--etfp-line); white-space: nowrap; }
.etfp-board th { color: var(--etfp-muted); background: rgba(5,25,31,.75); font-size: 12px; letter-spacing: .04em; }
.etfp-board tbody tr { cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
.etfp-board tbody tr:last-child td { border-bottom: 0; }
.etfp-board tbody tr:hover { background: rgba(66,115,105,.2); }
.etfp-board tbody tr.active { background: rgba(111,196,177,.18); box-shadow: inset 4px 0 #77d5bf; }
.etfp-board td a { display: flex; flex-direction: column; color: var(--etfp-ink); text-decoration: none; }
.etfp-board td a span,
.etfp-board td:nth-child(3) span { display: block; margin-top: 2px; color: var(--etfp-muted); font-size: 12px; }
.etfp-rank { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; padding: 4px; background: rgba(255,255,255,.06); border-radius: 50%; font-weight: 900; }
.etfp-regime { display: inline-block; padding: 6px 9px; border-radius: 999px; font-weight: 800; }
.etfp-regime.sun { color: #ff9b89; background: rgba(255,113,93,.12); border: 1px solid rgba(255,113,93,.28); }
.etfp-regime.moon { color: #9bc6f5; background: rgba(118,169,228,.12); border: 1px solid rgba(118,169,228,.28); }

html[data-theme="soft-light"] .etfp-section {
  --etfp-ink: #102d34;
  --etfp-muted: #526f6d;
  --etfp-line: rgba(45, 91, 83, .19);
  --etfp-panel: #d6e2dc;
  --etfp-deep: #dce8e2;
  background: linear-gradient(145deg, #cbdcd4, #dfe8e2 55%, #d2e1dc);
  box-shadow: 0 24px 52px rgba(51, 75, 66, .14);
}
html[data-theme="soft-light"] .etfp-kicker,
html[data-theme="soft-light"] .etfp-axis-label { color: #176b61; fill: #176b61; }
html[data-theme="soft-light"] .etfp-asof,
html[data-theme="soft-light"] .etfp-tv { color: #17383d; }
html[data-theme="soft-light"] .etfp-tabs,
html[data-theme="soft-light"] .etfp-modes,
html[data-theme="soft-light"] .etfp-regimes,
html[data-theme="soft-light"] .etfp-summary button,
html[data-theme="soft-light"] .etfp-detail,
html[data-theme="soft-light"] .etfp-picker { background: rgba(236, 243, 238, .72); }
html[data-theme="soft-light"] .etfp-detail-grid div { background: rgba(255,255,255,.5); }
html[data-theme="soft-light"] .etfp-picker-search,
html[data-theme="soft-light"] .etfp-quick,
html[data-theme="soft-light"] .etfp-board,
html[data-theme="soft-light"] .etfp-board th { background: rgba(236,243,238,.76); }
html[data-theme="soft-light"] .etfp-quick-grid > div { background: rgba(255,255,255,.52); }
html[data-theme="soft-light"] .etfp-quick-title a,
html[data-theme="soft-light"] .etfp-back-chart { color: #17383d; }
html[data-theme="soft-light"] .etfp-star text { fill: #102d34; }
html[data-theme="soft-light"] .etfp-grid { stroke: rgba(35, 77, 72, .14); }
html[data-theme="soft-light"] .etfp-quadrant-label { fill: #526f6d; }

@media (max-width: 900px) {
  .etfp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etfp-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etfp-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etfp-picker-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .etfp-section { margin: 20px 0 48px; padding: 18px 14px; border-radius: 20px; }
  .etfp-head { align-items: flex-start; }
  .etfp-head p:last-child { font-size: 13px; }
  .etfp-asof { padding: 8px 10px; font-size: 12px; }
  .etfp-tabs { display: flex; }
  .etfp-tabs button { flex: 1; padding: 9px 8px; }
  .etfp-summary { gap: 7px; }
  .etfp-summary button { padding: 11px; }
  .etfp-summary strong { font-size: 18px; }
  .etfp-toolbar { align-items: stretch; }
  .etfp-modes,
  .etfp-regimes { width: 100%; }
  .etfp-modes button,
  .etfp-regimes button { flex: 1; padding-inline: 7px; }
  .etfp-edit { width: 100%; }
  .etfp-chart-shell,
  .etfp-chart { min-height: 0; }
  .etfp-axis-label { font-size: 14px; }
  .etfp-quadrant-label { font-size: 12px; }
  .etfp-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etfp-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etfp-detail h3 { font-size: 20px; }
  .etfp-picker-tools { align-items: stretch; flex-direction: column; }
  .etfp-picker-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .etfp-picker-actions button { padding-inline: 5px; }
  .etfp-quick-title { align-items: flex-start; }
  .etfp-quick-title h3 { font-size: 19px; }
  .etfp-quick-title a { flex: 0 0 auto; padding: 8px 10px; font-size: 12px; }
  .etfp-quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .etfp-board { padding: 14px 10px; }
  .etfp-board h3 { font-size: 21px; }
  .etfp-back-chart { padding: 8px 10px; font-size: 12px; }
  .etfp-board th,
  .etfp-board td { padding-block: 10px; }
}

html[data-comfort-reading="true"] .etfp-section { font-size: 1.08em; }
html[data-comfort-reading="true"] .etfp-chart-shell { min-height: 0; }
@media (max-width: 600px) {
  html[data-comfort-reading="true"] .etfp-chart-shell,
  html[data-comfort-reading="true"] .etfp-chart { min-height: 0; }
}

/* ETF performance interaction refresh */
.etfp-selector-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 18px;
  padding: 12px 14px;
  background: rgba(5, 25, 30, .52);
  border: 1px solid var(--etfp-line);
  border-radius: 14px;
}
.etfp-selector-row p { margin: 0; color: var(--etfp-muted); font-size: 13px; }
.etfp-open-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(135deg, #2f7469, #23534e);
  border: 1px solid rgba(139, 212, 193, .42);
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}
.etfp-open-picker b { color: #ffe29b; font-size: 12px; }
.etfp-picker-list b { display: flex; align-items: center; gap: 7px; }
.etfp-picker-list b i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--etfp-line);
  border-radius: 5px;
  font-style: normal;
  font-size: 12px;
}
.etfp-picker-list button.selected b i { color: #14372f; background: #9de2cf; border-color: #9de2cf; }

.etfp-chart-actions {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.etfp-chart-actions button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #eaf8f3;
  background: rgba(17, 58, 62, .86);
  border: 1px solid rgba(142, 214, 197, .42);
  border-radius: 50%;
  font: 900 20px/1 inherit;
  cursor: pointer;
  backdrop-filter: blur(9px);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
.etfp-chart-actions button:hover { transform: translateY(-2px); background: #2c6b62; }

.etfp-board-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.etfp-board-sort {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(4, 24, 30, .72);
  border: 1px solid var(--etfp-line);
  border-radius: 999px;
}
.etfp-board-sort button {
  padding: 7px 11px;
  color: var(--etfp-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.etfp-board-sort button.active { color: #0c2c30; background: #8bd4c1; }
.etfp-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(255, 207, 105, .14), rgba(92, 205, 179, .12));
  border: 1px solid rgba(255, 216, 109, .42);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.etfp-selection[hidden] { display: none; }
.etfp-selection > div:first-child { display: flex; flex-direction: column; }
.etfp-selection > div:first-child strong { font-size: 19px; }
.etfp-selection > div:first-child span { color: var(--etfp-muted); font-size: 12px; }
.etfp-selection-metrics { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.etfp-selection-metrics > span,
.etfp-selection-metrics > a {
  padding: 7px 10px;
  color: var(--etfp-ink);
  background: rgba(8, 35, 40, .58);
  border: 1px solid var(--etfp-line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
}
.etfp-board tbody tr.active {
  position: relative;
  background: linear-gradient(90deg, rgba(255, 209, 105, .28), rgba(111,196,177,.16));
  box-shadow: inset 7px 0 #ffd86d, inset 0 1px rgba(255,216,109,.8), inset 0 -1px rgba(255,216,109,.8);
}
.etfp-board tbody tr.active td:first-child { border-left: 2px solid #ffd86d; }
.etfp-board tbody tr.active td:last-child { border-right: 2px solid #ffd86d; }
.etfp-board tbody tr.active td { color: #fff7d8; }
.feature-card.etfperf::before { background: linear-gradient(90deg, #5ed4c4, #ffd86d, #76a9e4); }
.feature-card.etfperf .feature-card-icon { color: #ffe69f; }

html[data-theme="soft-light"] .etfp-selector-row,
html[data-theme="soft-light"] .etfp-selection,
html[data-theme="soft-light"] .etfp-board-sort { background: rgba(241, 247, 243, .7); }
html[data-theme="soft-light"] .etfp-selection-metrics > span,
html[data-theme="soft-light"] .etfp-selection-metrics > a { color: #17383d; background: rgba(255,255,255,.54); }
html[data-theme="soft-light"] .etfp-board tbody tr.active td { color: #18363a; }
html[data-theme="soft-light"] .etfp-chart-actions button { color: #f7fffc; background: rgba(30, 92, 82, .88); }

@media (max-width: 900px) {
  .etfp-board > header { align-items: flex-start; }
  .etfp-board-tools { max-width: 58%; }
  .etfp-selection { align-items: flex-start; flex-direction: column; }
  .etfp-selection-metrics { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .etfp-selector-row { align-items: stretch; flex-direction: column; margin-top: 18px; }
  .etfp-open-picker { justify-content: space-between; width: 100%; }
  .etfp-selector-row p { font-size: 12px; }
  .etfp-board > header { flex-direction: column; }
  .etfp-board-tools { justify-content: space-between; width: 100%; max-width: none; }
  .etfp-board-sort button { padding: 7px 10px; }
  .etfp-selection-metrics > span,
  .etfp-selection-metrics > a { padding: 6px 8px; font-size: 12px; }
  .etfp-chart-actions { right: 10px; bottom: 10px; }
  .etfp-chart-actions button { width: 38px; height: 38px; }
}

/* Active ETF constellation refinement */
.etfp-section {
  isolation: isolate;
  background-image:
    radial-gradient(circle at 78% 12%, rgba(105, 212, 185, .09), transparent 28%),
    linear-gradient(145deg, #153d3a, #102a31 58%, #0b222a);
}
.etfp-head h2 { letter-spacing: 0; }
.etfp-summary button {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  background: linear-gradient(145deg, rgba(25, 68, 67, .92), rgba(8, 31, 39, .88));
  border-color: rgba(132, 207, 190, .24);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 26px rgba(1,16,22,.18);
}
.etfp-summary button::after {
  content: '';
  position: absolute;
  inset: auto -28px -48px auto;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(133, 221, 198, .12);
  border-radius: 50%;
}
.etfp-summary button.active {
  border-color: rgba(255, 216, 109, .8);
  box-shadow: inset 0 0 0 1px rgba(255,216,109,.28), 0 15px 30px rgba(1,16,22,.24);
}
.etfp-picker-list button.unavailable {
  cursor: not-allowed;
  opacity: .58;
  filter: saturate(.45);
}
.etfp-picker-list button.unavailable b i::after { content: '—'; }
.etfp-picker-list button.unavailable small { color: #e0bc75; }
.etfp-chart-shell {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(65, 143, 130, .1), transparent 42%),
    rgba(4, 24, 31, .84);
  border-color: rgba(122, 201, 183, .25);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 36px rgba(0,0,0,.17);
}
.etfp-quadrant-bg { opacity: .28; }
.etfp-quadrant-bg.q1 { fill: rgba(255, 113, 93, .13); }
.etfp-quadrant-bg.q2 { fill: rgba(255, 204, 90, .08); }
.etfp-quadrant-bg.q3 { fill: rgba(118, 169, 228, .11); }
.etfp-quadrant-bg.q4 { fill: rgba(87, 205, 177, .09); }
.etfp-quadrant-pill rect {
  fill: rgba(9, 38, 44, .92);
  stroke: rgba(133, 211, 193, .34);
}
.etfp-quadrant-pill.q1 rect { fill: rgba(101, 43, 39, .94); stroke: rgba(255, 126, 105, .78); }
.etfp-quadrant-pill.q2 rect { fill: rgba(96, 69, 21, .94); stroke: rgba(255, 198, 78, .76); }
.etfp-quadrant-pill.q3 rect { fill: rgba(31, 66, 105, .94); stroke: rgba(118, 169, 228, .76); }
.etfp-quadrant-pill.q4 rect { fill: rgba(24, 83, 72, .94); stroke: rgba(87, 205, 177, .76); }
.etfp-quadrant-pill text {
  fill: #f6fbf9;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}
.etfp-connector {
  stroke: rgba(163, 218, 205, .42);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.etfp-star { transition: opacity .18s ease; }
.etfp-star circle { transition: filter .18s ease, stroke-width .18s ease; }
.etfp-star:hover circle,
.etfp-star:focus circle,
.etfp-star.active circle { filter: drop-shadow(0 0 7px rgba(255, 223, 133, .72)); }
.etfp-star.active circle:first-of-type { stroke-width: 6; }
.etfp-new-badge { pointer-events: none; }
.etfp-na { color: var(--etfp-muted); font-size: 11px; }
.etfp-chart-actions {
  left: calc(50% + 210px);
  right: auto;
  bottom: 7px;
  transform: translateX(-50%);
}
.etfp-chart-actions button {
  width: 39px;
  height: 39px;
  border-color: rgba(255, 216, 109, .4);
  background: rgba(13, 54, 57, .92);
}
.etfp-table-wrap { scrollbar-color: #4f887f #102b31; }

html[data-theme="soft-light"] .etfp-section {
  background-image:
    radial-gradient(circle at 78% 12%, rgba(35, 127, 109, .08), transparent 28%),
    linear-gradient(145deg, #cbdcd4, #dfe8e2 55%, #d2e1dc);
}
html[data-theme="soft-light"] .etfp-summary button {
  background: linear-gradient(145deg, rgba(244,248,244,.9), rgba(214,228,220,.86));
  border-color: rgba(44, 104, 93, .24);
}
html[data-theme="soft-light"] .etfp-chart-shell {
  background:
    radial-gradient(circle at 50% 48%, rgba(70, 146, 129, .11), transparent 42%),
    rgba(224, 235, 229, .86);
}
html[data-theme="soft-light"] .etfp-quadrant-pill rect {
  fill: rgba(240, 246, 242, .94);
  stroke: rgba(44, 104, 93, .28);
}
html[data-theme="soft-light"] .etfp-quadrant-pill.q1 rect { fill: rgba(255, 224, 216, .96); stroke: rgba(183, 72, 55, .42); }
html[data-theme="soft-light"] .etfp-quadrant-pill.q2 rect { fill: rgba(255, 239, 191, .96); stroke: rgba(164, 112, 18, .4); }
html[data-theme="soft-light"] .etfp-quadrant-pill.q3 rect { fill: rgba(218, 233, 250, .96); stroke: rgba(55, 105, 160, .4); }
html[data-theme="soft-light"] .etfp-quadrant-pill.q4 rect { fill: rgba(214, 241, 233, .96); stroke: rgba(34, 119, 99, .4); }
html[data-theme="soft-light"] .etfp-quadrant-pill.q1 text { fill: #7d3028; }
html[data-theme="soft-light"] .etfp-quadrant-pill.q2 text { fill: #755212; }
html[data-theme="soft-light"] .etfp-quadrant-pill.q3 text { fill: #244f7c; }
html[data-theme="soft-light"] .etfp-quadrant-pill.q4 text { fill: #185e50; }
html[data-theme="soft-light"] .etfp-connector { stroke: rgba(31, 91, 81, .48); }

@media (max-width: 600px) {
  .etfp-summary button { min-height: 98px; }
  .etfp-chart-actions {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin: -2px 0 10px;
  }
  .etfp-chart-actions button { width: 36px; height: 36px; font-size: 17px; }
  .etfp-quadrant-pill text { font-size: 20px; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .etfp-chart-actions {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin: -2px 0 10px;
  }
}

/* SVG text is drawn on a 1000 x 600 viewBox, so compact layouts need
   larger SVG units to preserve the same perceived type size. */
@media (min-width: 601px) and (max-width: 900px) {
  .etfp-axis-label { font-size: 20px; }
  .etfp-tick { font-size: 17px; }
  .etfp-quadrant-pill text { font-size: 17px; }
  .etfp-star text { font-size: 17px; }
  .etfp-star .etfp-new-badge text { font-size: 10px; }
}

@media (max-width: 600px) {
  .etfp-axis-label { font-size: 24px; }
  .etfp-tick { font-size: 20px; }
  .etfp-star text { font-size: 20px; }
  .etfp-star .etfp-new-badge text { font-size: 10px; }
  .etfp-axis { stroke-width: 3px; }
  .etfp-grid { stroke-width: 1.4px; }
  .etfp-legend { gap: 8px 11px; font-size: 14px; line-height: 1.45; }
  .etfp-legend i { width: 11px; height: 11px; }
}

@media (max-width: 600px) {
  html[data-comfort-reading="true"] .etfp-axis-label { font-size: 27px; }
  html[data-comfort-reading="true"] .etfp-tick { font-size: 22px; }
  html[data-comfort-reading="true"] .etfp-quadrant-pill text { font-size: 22px; }
  html[data-comfort-reading="true"] .etfp-star text { font-size: 22px; }
  html[data-comfort-reading="true"] .etfp-star .etfp-new-badge text { font-size: 10px; }
  html[data-comfort-reading="true"] .etfp-legend { font-size: 15px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  html[data-comfort-reading="true"] .etfp-axis-label { font-size: 22px; }
  html[data-comfort-reading="true"] .etfp-tick { font-size: 19px; }
  html[data-comfort-reading="true"] .etfp-quadrant-pill text { font-size: 19px; }
  html[data-comfort-reading="true"] .etfp-star text { font-size: 19px; }
  html[data-comfort-reading="true"] .etfp-star .etfp-new-badge text { font-size: 10px; }
}

@media (min-width: 901px) {
  html[data-comfort-reading="true"] .etfp-axis-label { font-size: 19px; }
  html[data-comfort-reading="true"] .etfp-tick { font-size: 13.5px; }
  html[data-comfort-reading="true"] .etfp-quadrant-pill text { font-size: 14.5px; }
  html[data-comfort-reading="true"] .etfp-star text { font-size: 14.5px; }
  html[data-comfort-reading="true"] .etfp-star .etfp-new-badge text { font-size: 9px; }
}

html[data-theme="soft-light"] .etfp-tick { fill: #315d58; }
html[data-theme="soft-light"] .etfp-legend { color: #315d58; }

/* Keep active ETF names readable on touch layouts. Grid rows equalize the
   card heights while long fund names wrap instead of being clipped. */
@media (max-width: 1100px) {
  .etfp-picker-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  .etfp-picker-list button {
    display: flex;
    min-height: 98px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
  }
  .etfp-picker-list b,
  .etfp-picker-list small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .etfp-picker-list b {
    align-items: flex-start;
    line-height: 1.35;
  }
  .etfp-picker-list b i { margin-top: 2px; }
  .etfp-picker-list small {
    margin-top: 6px;
    line-height: 1.3;
  }
}

@media (max-width: 600px) {
  .etfp-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etfp-picker-list button {
    min-height: 104px;
    padding: 10px 9px;
  }
  .etfp-picker-list b { font-size: 14px; }
}

html[data-theme="soft-light"] .etfp-picker-list small { color: #405f5b; }
html[data-theme="soft-light"] .etfp-picker-list button.selected small { color: #d8f1e8; }