/* Full-Site UI/UX V1 foundation.
   Shared shell primitives are global; page and table migrations remain
   intentionally scoped so dense research/admin workflows can move later. */
:root {
  --brand-primary: #007f8b;
  --brand-primary-hover: #006b76;
  --brand-primary-active: #005963;
  --brand-primary-soft: #e2f6f7;
  --brand-cyan: #18aeb9;
  --brand-blue: #277fb8;
  --navy: #173b57;
  --navy-deep: #0d2a40;
  --page-bg: #eef7fa;
  --page-bg-accent: #e5f4f7;
  --surface: #ffffff;
  --surface-subtle: #f7fafc;
  --surface-raised: #ffffff;
  --text-primary: #172b3a;
  --text-secondary: #40576a;
  --text-muted: #6a7e8f;
  --border: #d9e4ea;
  --border-strong: #bccdd7;
  --price-up: #c43f3f;
  --price-down: #1f7a5b;
  --status-success: #24845e;
  --status-warning: #a66a13;
  --status-error: #b43e43;
  --status-info: #287da8;
  --accent-cyan: #18aeb9;
  --accent-blue: #357fc1;
  --accent-green: #319a73;
  --accent-orange: #e98533;
  --accent-violet: #776bc0;
  --accent-yellow: #d6a323;
  --accent-coral: #d96862;
  --accent-plum: #8a5a95;
  --viz-primary-turquoise: #008b95;
  --viz-cyan: #20b8c4;
  --viz-blue: #347fc4;
  --viz-green: #26976f;
  --viz-orange: #ee8a2d;
  --viz-violet: #7568c8;
  --viz-yellow: #d9a523;
  --viz-coral: #dd6d66;
  --viz-grid: #dfe9ee;
  --viz-axis: #6a7e8f;
  --viz-crosshair: #3c7087;
  --viz-selection: #007f8b;
  --viz-event-new: #18aeb9;
  --viz-event-add: #e98533;
  --viz-event-reduce: #776bc0;
  --viz-event-exit: #60788d;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-surface: 0 6px 20px rgba(20, 65, 82, 0.06);
  --shadow-raised: 0 12px 30px rgba(18, 52, 69, 0.12);
  --control-height: 40px;
  --touch-target: 44px;
  --mobile-identity-width: 108px;
  --mobile-numeric-width: 78px;
  --content-width: 1440px;

  /* Compatibility aliases let existing pages inherit the brand foundation
     without requiring a risky literal-color migration in this milestone. */
  --blue: var(--brand-primary);
  --blue-soft: var(--brand-primary-soft);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --line: var(--border);
  --bg: var(--page-bg);
}

/* ============================================================
   DESIGN SYSTEM V2 FOUNDATION
   Per docs/etf-tracker-visual-architecture-v2.md. Adds only new shared
   primitives on top of the V1 tokens/components above, which remain the
   single source of truth for color/spacing/radius/shadow. Nothing in this
   section changes an existing V1 value.

   Restrained surface hierarchy rule (formalized, not new — every existing
   surface in this file already follows it):
     - page header      = --radius-lg + --shadow-surface + 3px brand-primary top rule
     - panel/table/filter surface = --radius-md + --shadow-surface + 1px border
     - inline chip/badge = --radius-sm
     - --shadow-raised is reserved for overlays (drawers/popovers/open
       menus) and must never be used on a static panel.
   ============================================================ */
:root {
  /* KPI number tiers: exactly one hero metric per KPI strip, everything
     else stays at the supporting size. Apply --kpi-hero-size by adding the
     .v1-kpi-hero modifier class to that one cell. */
  --kpi-hero-size: 28px;
  --kpi-support-size: 17px;
}

@media (max-width: 700px) {
  :root {
    --kpi-hero-size: 25px;
    --kpi-support-size: 15px;
  }
}

/* Doubled class is intentional, not a typo: this modifier must reliably
   outrank a page's own "<kpi-strip> strong" supporting-tier rule regardless
   of that rule's source order, without hardcoding knowledge of every page
   that will use it in Phase B/C. */
.v1-kpi-hero.v1-kpi-hero strong {
  font-size: var(--kpi-hero-size);
  font-weight: 800;
}

/* Financial tabular-numeral utility for any ad-hoc numeric cell not already
   covered by .v1-page table, .performance-return, or .compact-snapshot. */
.v1-financial-number {
  font-variant-numeric: tabular-nums;
}

/* Shared 12-column desktop research grid. Not applied to any page yet —
   /performance is a comparison matrix and correctly stays full-width; this
   establishes the primitive Security Detail / ETF Detail (Phase B/C) will
   use for their primary-chart (8 cols) + insight-rail (4 cols) layout. */
.v1-research-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.v1-col-4 { grid-column: span 4; }
.v1-col-8 { grid-column: span 8; }
.v1-col-12 { grid-column: span 12; }

@media (max-width: 1050px) {
  .v1-research-grid {
    grid-template-columns: 1fr;
  }

  .v1-col-4,
  .v1-col-8,
  .v1-col-12 {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .v1-research-grid {
    gap: var(--space-4);
  }
}

/* Acceptance Fix V3 — reusable density and mobile data primitives. */
:root{--viz-royal-blue:#2563d9;--viz-indigo:#4f46b8;--viz-magenta:#c74491;--viz-amber:#d99a17;--viz-emerald:#159b72;--viz-lime:#70a82b}
.compact-context-strip{display:flex;align-items:center;flex-wrap:wrap;gap:7px 18px;margin:10px 0;padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:#f7fbfc;color:var(--text-secondary);font-size:12px}.compact-context-strip strong{color:var(--ink)}
.compact-snapshot{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.compact-snapshot>div{min-width:0;padding:11px 13px;border-right:1px solid var(--line)}.compact-snapshot>div:last-child{border-right:0}.compact-snapshot span,.compact-metrics-grid span{display:block;color:var(--muted);font-size:11px}.compact-snapshot strong,.compact-metrics-grid strong{display:block;margin-top:3px;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.compact-snapshot-panel{padding:0}.compact-snapshot-panel>.panel-title{padding:12px 15px 8px}.compact-snapshot-panel .compact-snapshot{border-width:1px 0 0;border-radius:0}
.progressive-disclosure>summary{min-height:40px;display:flex;align-items:center;color:var(--blue);font-size:13px;font-weight:750;cursor:pointer}.progressive-disclosure>summary::after{content:"＋";margin-left:auto}.progressive-disclosure[open]>summary::after{content:"−"}.progressive-disclosure dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:7px 0 12px}.progressive-disclosure dl>div{min-width:0}.progressive-disclosure dt{color:var(--muted);font-size:11px}.progressive-disclosure dd{margin:2px 0 0;font-size:13px;overflow-wrap:anywhere}
.compact-data-list,.mobile-comparison-list,.holding-mobile-list,.security-holder-mobile-list{display:none;margin:0;padding:0;list-style:none}.mobile-data-row,.mobile-comparison-row{border-bottom:1px solid var(--line);padding:10px 2px}
.composition-chart{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:10px;margin:10px 0;padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}.composition-copy strong,.composition-copy span{display:block}.composition-copy span{color:var(--muted);font-size:11px}.composition-track{display:flex;height:10px;overflow:hidden;border-radius:999px;background:#e8eff2}.composition-track i{min-width:2px}.composition-active,.composition-common{background:var(--viz-cyan)}.composition-passive,.composition-a{background:var(--viz-royal-blue)}.composition-b{background:var(--viz-magenta)}.composition-legend{display:flex;gap:9px;color:var(--muted);font-size:11px}.composition-legend span{display:flex;align-items:center;gap:4px}.composition-legend i{width:7px;height:7px;border-radius:50%}.composition-legend .active,.composition-legend .common{background:var(--viz-cyan)}.composition-legend .passive,.composition-legend .fund-a{background:var(--viz-royal-blue)}.composition-legend .fund-b{background:var(--viz-magenta)}
.dense-history-row{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:8px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line);font-size:12px}.dense-history-row>:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}.dense-history-head{position:sticky;top:0;background:#f4f8fa;color:var(--muted);font-weight:700}.aum-history-disclosure{margin-top:8px}.aum-history-disclosure .dense-history-list{max-height:340px;overflow:auto}
.security-detail-heading h1 span{color:var(--text-secondary);font-size:.62em}.security-snapshot{margin:10px 0 14px}.quote-strip{display:flex;align-items:center;justify-content:space-between}.chart-price-date{color:var(--muted);font-size:11px}.security-holder-main{display:flex;align-items:center;justify-content:space-between;gap:10px}.security-holder-main a{display:flex;min-width:0;gap:7px;align-items:baseline;text-decoration:none}.security-holder-main a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}.security-holder-main .weight{color:var(--viz-orange);font-size:17px}.security-holder-metrics{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:var(--muted);font-size:12px}
.mobile-comparison-security{display:flex;gap:7px;min-width:0}.mobile-comparison-security span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-comparison-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:7px}.mobile-comparison-values span{padding:6px;border-radius:6px;background:#f3f7f9;text-align:right;font-variant-numeric:tabular-nums}.mobile-comparison-values b{display:block;margin-bottom:2px;color:var(--muted);font-size:10px;text-align:left}.mobile-comparison-values .fund-a{border-top:3px solid var(--viz-royal-blue)}.mobile-comparison-values .fund-b{border-top:3px solid var(--viz-magenta)}.mobile-comparison-values .difference{border-top:3px solid var(--viz-orange)}
.profile-disclosure-panel{padding:0 15px 13px}.profile-disclosure-panel>.panel-title{padding-inline:0}.etf-profile-primary{margin-top:0}.strategy-disclosure{border-top:1px solid var(--line)}.strategy-disclosure .strategy{margin:0;padding:0 0 12px}.holding-mobile-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.holding-mobile-heading>span{display:flex;min-width:0;align-items:baseline;gap:7px}.holding-mobile-heading b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.holding-mobile-heading em{color:var(--muted);font-size:11px;font-style:normal}.holding-mobile-metrics{display:grid;grid-template-columns:1.35fr .65fr;gap:7px;margin-top:7px}.holding-mobile-metrics>div{padding:7px;background:#f4f8fa;border-radius:6px}.holding-mobile-metrics span{display:block;color:var(--muted);font-size:10px}.holding-mobile-metrics strong{display:block;margin-top:2px;font-size:14px}.holding-mobile-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:7px}.holding-mobile-actions a{display:grid;place-items:center;min-height:40px;border:1px solid #acdce0;border-radius:7px;background:#ecfbfb;color:#087f88;font-size:12px;font-weight:750;text-decoration:none}
.overlap-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.overlap-metrics>div{min-height:0;padding:10px 13px}.comparison-heading{padding-block:10px}.comparison-fund{padding-block:7px}.account-menu-toggle{box-shadow:inset 0 0 0 1px rgb(255 255 255/.18)}
.aum-filter-panel{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;align-items:end;gap:10px}.segmented-filter{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);border-radius:8px;background:#f2f7f9}.segmented-filter a{display:grid;place-items:center;min-height:36px;border-radius:6px;padding:0 13px;color:#3d5a70;font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap}.segmented-filter a:hover,.segmented-filter a:focus-visible{background:#dff3f4;color:#086f78}.segmented-filter a.active{background:var(--brand-primary);color:#fff;box-shadow:0 2px 7px rgb(0 127 139/.2)}
@media(max-width:700px){.compact-context-strip{gap:5px 10px;margin:7px 0;padding:7px 9px}.compact-snapshot{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-snapshot>div{padding:8px 9px;border-bottom:1px solid var(--line)}.compact-snapshot>div:nth-child(even){border-right:0}.compact-snapshot strong,.compact-metrics-grid strong{font-size:15px}.composition-chart{grid-template-columns:1fr;margin:7px 0;padding:8px 10px}.composition-legend{justify-content:space-between}.aum-filter-panel{padding:8px}.aum-filter-panel .filter-actions{display:none}.aum-style-filter{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.aum-style-filter a{display:grid;place-items:center;min-height:40px}.comparison-heading{margin-block:7px;padding:7px}.comparison-heading .comparison-fund{min-width:0}.comparison-heading .comparison-fund span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overlap-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.overlap-metrics>div{padding:7px 9px}.overlap-metrics strong{font-size:18px}.compare-common-panel .v1-comparison-scroll,.compare-common-panel .v1-scroll-hint{display:none}.mobile-comparison-list{display:block}.security-holder-desktop-table{display:none}.security-holder-mobile-list,.holding-mobile-list{display:block}.holdings-desktop-table{display:none}.holdings-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:8px}.holdings-filter label:first-child{grid-column:1/-1}.holdings-filter .search-field{min-width:0}.holdings-filter .button.secondary{display:none}.holdings-context-strip{margin-inline:0}.daily-report-page .operation-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:7px 8px 0}.daily-report-page .operation-summary button,.daily-report-page .operation-summary a{min-width:0;min-height:42px;padding-inline:2px;font-size:12px;white-space:nowrap}.security-chart-panel{margin-top:10px}.chart-header.quote-strip{align-items:flex-start;gap:8px}.chart-header-price{display:grid;grid-template-columns:auto auto;gap:2px 8px;text-align:right}.chart-price-volume,.chart-price-date{grid-column:1/-1}.account-menu-toggle{background:rgb(255 255 255/.2);border-color:rgb(255 255 255/.5)}.profile-disclosure dl{grid-template-columns:1fr}.holding-research .panel-title,.etf-daily-research .panel-title{padding-block:10px}.v1-page-header,.page-heading,.detail-heading{margin-bottom:8px}.compact-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.compact-filter-row button{min-width:64px}.compare-search{padding:8px}.compare-search button,.compare-search .button{min-height:40px;padding-inline:7px}}

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(0, 127, 139, 0.28);
  outline-offset: 2px;
}

:where(button, input, select):disabled,
:where(.button)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.site-header .logout-form button {
  min-height: var(--control-height);
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: transparent;
  color: #eaf7f8;
}

.site-header .logout-form button:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.1);
}

/* Global V1 research shell */
html {
  color-scheme: light;
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 92% 4%, rgba(24, 174, 185, 0.08), transparent 28rem),
    linear-gradient(180deg, var(--page-bg-accent) 0, var(--page-bg) 190px, var(--page-bg) 100%);
  color: var(--text-primary);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

.shell {
  width: min(var(--content-width), calc(100% - 48px));
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(110deg, #006c78 0%, var(--brand-primary) 55%, #1599a4 100%);
  box-shadow: 0 5px 18px rgba(8, 55, 66, 0.16);
}

.header-inner {
  position: relative;
  height: 68px;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.brand span {
  min-width: 38px;
  min-height: 30px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--brand-primary-hover);
  box-shadow: 0 3px 10px rgba(10, 65, 75, 0.15);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.brand b {
  font-weight: 760;
}

.site-navigation,
.site-nav-primary,
.site-nav-account {
  display: flex;
  align-items: center;
}

.site-navigation {
  min-width: 0;
  flex: 1;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-navigation > nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-nav-primary {
  gap: 4px;
}

.site-nav-account {
  flex: 0 0 auto;
  gap: 9px;
}

.site-header .site-navigation a {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border-radius: 7px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 650;
  transition: background-color 150ms ease, color 150ms ease;
}

.site-header .site-navigation a:hover,
.site-header .site-navigation a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.site-header .site-navigation a.active {
  background: rgba(255, 255, 255, 0.19);
  color: #fff;
  box-shadow: inset 0 -2px rgba(255, 255, 255, 0.9);
}

.signed-in-user {
  overflow: hidden;
  max-width: 130px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-form {
  margin: 0;
}

.site-header .logout-form button {
  height: 38px;
  min-height: 38px;
  border-radius: 7px;
  padding-inline: 13px;
  font-size: 13px;
}

.site-nav-toggle {
  display: none;
  min-width: 74px;
  min-height: var(--touch-target);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0 12px;
}

.site-nav-toggle-icon {
  display: grid;
  gap: 3px;
}

.site-nav-toggle-icon i {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

main.shell {
  padding-top: 30px;
}

footer.shell {
  border-color: rgba(142, 174, 187, 0.34);
}

/* Shared research page primitives */
.v1-page,
.performance-page {
  color: var(--text-primary);
}

.v1-page-header {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 136px;
  align-items: center;
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 20%, rgba(24, 174, 185, 0.13), transparent 15rem),
    var(--surface);
  box-shadow: var(--shadow-surface);
  padding: 25px 28px;
}

.v1-page-header-copy {
  min-width: 0;
  max-width: 790px;
}

.v1-page-header .eyebrow,
.v1-page-header-copy .eyebrow {
  margin: 0 0 7px;
  color: var(--brand-primary) !important;
  letter-spacing: 0.1em;
}

.v1-page-header h1 {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(28px, 2.25vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.v1-page-header-copy > p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.v1-page-header-copy > small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.v1-header-stat {
  min-width: 170px;
  margin-left: auto;
  border: 1px solid #b9e3e6;
  border-radius: var(--radius-md);
  background: var(--brand-primary-soft);
  color: var(--navy-deep);
  box-shadow: none;
  padding: 15px 18px;
}

.v1-header-stat span,
.v1-header-stat small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

.v1-header-stat strong {
  margin: 3px 0;
  color: var(--brand-primary-hover);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.v1-header-stat.accent-violet {
  border-color: #d9d3f0;
  background: #f2f0fa;
}

.v1-header-stat.accent-violet strong {
  color: var(--accent-violet);
}

.v1-header-metrics {
  display: grid;
  min-width: min(420px, 42%);
  margin-left: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.v1-header-metric {
  min-width: 0;
  padding: 14px 16px;
  border-left: 1px solid var(--border);
}

.v1-header-metric:first-child {
  border-left: 0;
}

.v1-header-metric span,
.v1-header-metric small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.v1-header-metric strong {
  display: block;
  overflow: hidden;
  margin: 4px 0 2px;
  color: var(--navy-deep);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v1-header-metric.accent-cyan {
  background: var(--brand-primary-soft);
}

.v1-header-metric.accent-cyan strong {
  color: var(--brand-primary-hover);
}

.v1-header-metric.accent-orange {
  background: #fff5eb;
}

.v1-header-metric.accent-orange strong {
  color: #c96724;
}

/* ETF research secondary navigation */
.etf-research-nav {
  max-width: 100%;
  margin: 0 0 var(--space-5);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 3px 12px rgba(20, 65, 82, 0.04);
}

.etf-research-nav .tab-nav {
  display: block;
  margin: 0;
}

.etf-research-nav-items {
  display: flex;
  gap: 3px;
  padding: 6px;
}

/* Each function gets a restrained accent identity (--nav-accent / --nav-
   accent-soft) reused from the existing --accent-* palette -- the SAME
   low-to-medium-saturation hues the KPI accent classes (.v2-accent-cyan
   etc) already use elsewhere, so this stays inside the site's established
   teal/green identity rather than introducing a new palette. This is
   Level "top function nav" -- deliberately never the solid brand-teal
   fill Level 1 primary buttons (確定) or Level 2 segmented controls
   (.v2-period-selector, 主動／全部／被動 etc) use, so the three levels
   stay visually distinct. */
.etf-research-nav a[data-nav="daily-report"] { --nav-accent: var(--brand-primary); --nav-accent-soft: var(--brand-primary-soft); }
.etf-research-nav a[data-nav="etf-list"] { --nav-accent: var(--accent-cyan); --nav-accent-soft: #e3f5f6; }
.etf-research-nav a[data-nav="premium-discount"] { --nav-accent: var(--accent-coral); --nav-accent-soft: #fbe9e8; }
.etf-research-nav a[data-nav="performance"] { --nav-accent: var(--accent-violet); --nav-accent-soft: #ece9f7; }
.etf-research-nav a[data-nav="aum"] { --nav-accent: var(--accent-green); --nav-accent-soft: #e3f3ec; }
.etf-research-nav a[data-nav="manager"] { --nav-accent: var(--accent-plum); --nav-accent-soft: #f2e8f3; }
.etf-research-nav a[data-nav="compare"] { --nav-accent: var(--accent-yellow); --nav-accent-soft: #faf0dc; }

.etf-research-nav a {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  border: 0;
  border-bottom: 2px solid var(--nav-accent, transparent);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.etf-research-nav a:hover:not(.active) {
  background: var(--nav-accent-soft, var(--brand-primary-soft));
  color: var(--nav-accent, var(--brand-primary-hover));
}

.etf-research-nav a.active {
  background: var(--nav-accent-soft, var(--brand-primary-soft));
  color: var(--nav-accent, var(--brand-primary));
  font-weight: 800;
}

/* Filter and control foundation for migrated pages */
.v1-filter-surface {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
}

.v1-filter-surface label > span {
  color: var(--text-secondary);
  font-size: 12px;
}

.v1-filter-surface input,
.v1-filter-surface select {
  height: var(--control-height);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.v1-filter-surface input:hover,
.v1-filter-surface select:hover {
  border-color: #8fb3be;
}

.v1-filter-surface input:focus,
.v1-filter-surface select:focus,
.v1-filter-surface .is-active input,
.v1-filter-surface .is-active select {
  border-color: var(--brand-primary);
  background: #f7fdfd;
  outline: 3px solid rgba(0, 127, 139, 0.12);
}

.v1-filter-surface button {
  background: var(--brand-primary);
}

.v1-filter-surface button:hover {
  background: var(--brand-primary-hover);
}

.v1-filter-surface .button.secondary {
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.v1-filter-surface .button.secondary:hover {
  border-color: var(--border-strong);
  background: #edf5f7;
  color: var(--navy-deep);
}

/* Surface and financial table foundation */
.v1-table-surface,
.v1-page .panel {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
}

.v1-page .panel-title {
  min-height: 64px;
  border-bottom-color: var(--border);
  background: linear-gradient(180deg, #fff, #fbfdfe);
}

.v1-page .panel-title h2 {
  color: var(--navy-deep);
  font-size: 19px;
  line-height: 1.25;
}

.v1-page .panel-title p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.v1-page table {
  font-variant-numeric: tabular-nums;
}

.v1-page th {
  border-bottom-color: var(--border-strong);
  background: #f1f7f9;
  color: var(--text-secondary);
  font-weight: 700;
}

.v1-page td {
  border-bottom-color: #e7eff2;
}

.v1-page tbody tr:hover td,
.v1-page tbody tr:focus-within td {
  background: #f5fafb;
}

.v1-page th.is-sorted,
.v1-page td.is-sorted {
  background: #eaf7f7;
}

.v1-page th.is-sorted {
  border-top: 2px solid var(--brand-primary);
}

.v1-page .sort-link.active {
  color: var(--brand-primary-hover);
}

.v1-page .etf-link strong,
.v1-page .primary-link {
  color: var(--brand-primary-hover);
}

.v1-page .positive {
  color: var(--price-up);
}

.v1-page .negative {
  color: var(--price-down);
}

.v1-comparison-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #91b7bf #edf4f6;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Reusable Mobile Reading UX roles. Their narrow/mobile dimensions are
   activated at the shared 700px breakpoint below. */
.comparison-scroller {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

.compact-data-list {
  list-style: none;
}

.compact-data-row {
  min-width: 0;
}

.expandable-detail summary {
  cursor: pointer;
}

/* Visualization UX V1 shared inspect/control surface. */
.viz-inspect-strip {
  display: flex;
  min-height: 42px;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: 0;
  border-block: 1px solid var(--border);
  background: #f1f9fa;
  color: var(--text-secondary);
  padding: 8px 16px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.viz-inspect-strip[hidden] { display: none; }
.viz-inspect-strip strong { color: var(--navy-deep); }

.viz-inspect-strip button,
.viz-reset-control {
  min-height: 34px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--brand-primary-hover);
  padding-inline: 10px;
  font-size: 12px;
}

.viz-inspect-strip button { margin-left: auto; }
.viz-inspect-strip button + button { margin-left: 0; }
.viz-advanced-controls > summary { display: none; }
.viz-advanced-controls:not([open]) > :not(summary) { display: flex; }

.period-label-mobile,
.aum-mobile-sort {
  display: none;
}

.v1-scroll-hint {
  display: none;
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: #f5fbfc;
  color: var(--text-muted);
  padding: 8px 14px;
  font-size: 12px;
  text-align: right;
}

.v1-scroll-hint span {
  color: var(--brand-primary);
  font-size: 15px;
}

@media (max-width: 700px) {
  .viz-inspect-strip { padding-inline: 12px; gap: 6px 10px; }
  .viz-inspect-strip button { min-height: 40px; }
}

.v1-empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
  padding: 40px 20px;
  text-align: center;
}

.v1-empty-state h2 {
  margin: 12px 0 5px;
  color: var(--navy-deep);
  font-size: 19px;
}

.v1-empty-state p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-state-mark {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
  padding: 0 14px;
  font-weight: 800;
}

/* ETF overview: retain the proven table/mobile-card information model. */
.etf-list-page .filter-panel {
  margin-bottom: var(--space-5);
}

.etf-list-page .v1-table-surface {
  overflow: visible;
}

.etf-list-page .etf-table-wrap {
  overflow-x: auto;
}

.etf-list-page .etf-table {
  min-width: 960px;
}

.etf-list-page .etf-card {
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
}

/* Mobile card: 經理人／上市／持股日／持股數 sit in a compact right-side
   column beside the ETF code/name instead of a separate full-width
   bottom block, so card height no longer grows by 3 extra lines per
   card. */
.etf-list-page .etf-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.etf-list-page .etf-card-header .etf-link {
  flex: 1 1 auto;
  min-width: 0;
}

.etf-list-page .card-side-meta {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1px;
  max-width: 42%;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
}

.etf-list-page .card-side-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etf-list-load-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.etf-list-load-more .button {
  min-height: var(--control-height);
  padding-inline: 20px;
}

/* Shared "確定／清除 always visible + 進階搜尋 disclosure that collapses on
   every viewport width" search-form pattern, first built for ETF List and
   reused as-is for ETF 績效 -- independent of the shared .mobile-filter-
   disclosure other pages (etf_aum.html) still use, which forces its
   fields open on desktop. Every selector below pairs the ETF List form
   (.etf-list-page .filter-panel.etf-list-search-form, 3 classes) with the
   ETF 績效 form (.performance-page .performance-filter-form.etf-list-
   search-form, 3 classes) so both outrank their page's pre-existing grid
   rules regardless of source order. */
.etf-list-page .filter-panel.etf-list-search-form,
.performance-page .performance-filter-form.etf-list-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.etf-list-page .filter-panel.etf-list-search-form .mobile-compact-search,
.performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search {
  display: flex;
  flex: 1 1 380px;
  align-items: end;
  gap: var(--space-3);
}

.etf-list-page .filter-panel.etf-list-search-form .mobile-compact-search > label,
.performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search > label {
  flex: 1 1 320px;
  min-width: 0;
}

.etf-list-page .filter-panel.etf-list-search-form .compact-search-actions,
.performance-page .performance-filter-form.etf-list-search-form .compact-search-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure {
  flex: 0 0 auto;
}

/* ETF 績效 desktop only (this selector intentionally does NOT pair with
   ETF List, unlike every rule above -- ETF List's own wider search row is
   unchanged): the shared .mobile-compact-search rule above grows
   (flex:1 1 380px) to fill the whole remaining row width. Now that the
   whole search <form> sits inside its own right-hand grid column
   (.performance-filter-surface, >=701px, alongside the 篩選 ETF heading)
   that column already caps the available width, so the wrapper just
   grows to fill it (up to a sanity max-width for very wide columns)
   instead of being additionally shrunk to a fraction of it -- this keeps
   the input at its existing (already-fixed, not-shrunk-further) size. */
.performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search {
  flex: 1 1 auto;
  max-width: 560px;
}

/* Collapsed: the 進階搜尋 toggle sits on the same row as the search field
   and 確定／清除 (the flex-wrap container above puts .mobile-compact-
   search and this <details> side by side). Open: flex-basis 100% forces
   it onto its own full-width line below, where .advanced-search-fields
   (already display:grid when [open], see above) grows naturally
   downward -- no absolute positioning, no overlay. */
.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure[open],
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure[open] {
  flex-basis: 100%;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure > summary,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary-hover);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure > summary::-webkit-details-marker,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure > summary::-webkit-details-marker {
  display: none;
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure > summary::before,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure[open] > summary::before,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure[open] > summary::before {
  transform: rotate(90deg);
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure > summary span,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure > summary span {
  border-radius: 999px;
  background: var(--brand-primary-soft);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-fields,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-fields {
  display: none;
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure[open] > .advanced-search-fields,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure[open] > .advanced-search-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.etf-list-page .filter-panel.etf-list-search-form .advanced-search-fields .filter-actions,
.performance-page .performance-filter-form.etf-list-search-form .advanced-search-fields .filter-actions {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure[open] > .advanced-search-fields,
  .performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure[open] > .advanced-search-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  /* Mobile compact row: 代號或名稱 label on its own line, then the input
     and 確定／清除 buttons SHARE one row (input flexible via minmax(0,1fr),
     buttons at their own compact intrinsic width via the auto column) --
     replaces the earlier flex-column stack (label box, then input, then
     buttons as three separate lines), which was both taller than needed
     and the source of the earlier flex-basis-flip height bug (a
     desktop-only width basis silently became a forced height once the
     axis turned vertical). The label itself contributes no box of its
     own here (display:contents) so its span/input children become direct
     grid items instead of being trapped inside one tall label box. */
  .etf-list-page .filter-panel.etf-list-search-form .mobile-compact-search,
  .performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label label" "input actions";
    align-items: center;
    gap: 6px 8px;
  }

  .etf-list-page .filter-panel.etf-list-search-form .mobile-compact-search > label,
  .performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search > label {
    display: contents;
  }

  .etf-list-page .filter-panel.etf-list-search-form .mobile-compact-search > label > span,
  .performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search > label > span {
    grid-area: label;
    position: static;
    clip: auto;
    overflow: visible;
    width: auto;
    height: auto;
  }

  /* minmax(0,1fr) on the grid column already stops a long placeholder
     from forcing the row wider; width:100% just fills that column --
     the placeholder truncates visually inside the input, never expands it. */
  .etf-list-page .filter-panel.etf-list-search-form .mobile-compact-search > label > input,
  .performance-page .performance-filter-form.etf-list-search-form .mobile-compact-search > label > input {
    grid-area: input;
    width: 100%;
    min-width: 0;
  }

  .etf-list-page .filter-panel.etf-list-search-form .compact-search-actions,
  .performance-page .performance-filter-form.etf-list-search-form .compact-search-actions {
    grid-area: actions;
    gap: 6px;
  }

  /* Compact, intrinsic-width buttons -- same height as the input
     (--control-height, unchanged), much smaller horizontal padding than
     the site-wide default (etf.css button,.button{padding:0 17px}), still
     comfortably tappable. */
  .etf-list-page .filter-panel.etf-list-search-form .compact-search-actions button,
  .etf-list-page .filter-panel.etf-list-search-form .compact-search-actions .button,
  .performance-page .performance-filter-form.etf-list-search-form .compact-search-actions button,
  .performance-page .performance-filter-form.etf-list-search-form .compact-search-actions .button {
    height: var(--control-height);
    padding-inline: 12px;
    white-space: nowrap;
  }

  .etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure,
  .performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure {
    margin-top: 2px;
  }

  .etf-list-page .filter-panel.etf-list-search-form .advanced-search-disclosure[open] > .advanced-search-fields,
  .performance-page .performance-filter-form.etf-list-search-form .advanced-search-disclosure[open] > .advanced-search-fields {
    grid-template-columns: 1fr;
  }
}

/* ETF List: one compact sort <select> replaces the old three per-column
   grouped <details> dropdowns (規模／人氣, 交易／資料, 日期) plus the
   separate mobile-only sort widget -- a single control, all viewports,
   with every option those three dropdowns used to offer. */
.etf-list-page .etf-list-panel-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.etf-list-page .etf-list-sort-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.etf-list-page .etf-list-sort-select select {
  height: var(--control-height);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  color: var(--text-primary);
  padding: 0 8px;
  font-size: 13px;
  max-width: 200px;
}

@media (max-width: 700px) {
  .etf-list-page .panel-title {
    flex-wrap: wrap;
  }

  .etf-list-page .etf-list-panel-meta {
    width: 100%;
    justify-content: space-between;
  }

  .etf-list-page .etf-list-sort-select select {
    max-width: 160px;
  }
}

.etf-list-page .metric-grid {
  border-color: var(--border);
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
  padding: 10px;
}

/* AUM ranking: desktop grid and purpose-built mobile summaries. */
.aum-overview-page .aum-filter-panel {
  grid-template-columns: minmax(260px, 1fr) auto;
}

.aum-ranking-panel {
  overflow: hidden;
}

.aum-ranking-panel .aum-table {
  min-width: 1050px;
}

.aum-ranking-panel .aum-table th:first-child {
  width: 220px;
}

.aum-ranking-cards {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aum-ranking-card {
  border-bottom: 1px solid var(--border);
  padding: 15px 14px;
}

.aum-ranking-card:last-child {
  border-bottom: 0;
}

.aum-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.aum-card-heading .etf-link {
  min-width: 0;
  gap: 2px;
}

.aum-card-asof {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.aum-card-core {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
}

.aum-card-core > div {
  min-width: 0;
  background: var(--surface-subtle);
  padding: 10px;
}

.aum-card-core span,
.aum-card-core strong {
  display: block;
}

.aum-card-core .aum-primary-value strong {
  color: var(--brand-primary-hover);
  font-size: 16px;
  font-weight: 800;
}

.aum-card-core span {
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.aum-card-core strong {
  overflow: hidden;
  color: var(--navy-deep);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aum-card-details {
  margin-top: 8px;
}

.aum-card-details summary {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  color: var(--brand-primary-hover);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.aum-card-details dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0 0 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.aum-card-details dl > div:last-child {
  grid-column: 1 / -1;
}

.aum-card-details dt {
  color: var(--text-muted);
  font-size: 11px;
}

.aum-card-details dd {
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Intraday NAV comparison contract. */
.intraday-header-metrics {
  min-width: min(500px, 48%);
}

.intraday-header-metrics .live-metric strong {
  font-size: 15px;
}

.live-metric i,
.live-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-success);
  box-shadow: 0 0 0 4px rgba(36, 132, 94, 0.12);
}

.intraday-results {
  overflow: hidden;
}

.intraday-results .live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #eaf7f0;
  color: #216d50;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.intraday-nav-page .intraday-nav-table {
  min-width: 900px;
}

.intraday-nav-page .intraday-nav-table th:first-child {
  width: 230px;
}

.intraday-nav-page .intraday-nav-table .premium-high {
  background: #fff5e8;
}

.intraday-nav-page .intraday-nav-table .premium-extreme {
  background: #ffebea;
  color: #ad3434;
}

/* Managers priority-collapse contract. */
.managers-page .relationship-search {
  display: grid;
  grid-template-columns: minmax(260px, 520px) auto auto;
}

.manager-table-wrap {
  overflow: visible;
}

.managers-page .relationship-table {
  min-width: 0;
  table-layout: fixed;
}

.managers-page .relationship-table th:first-child {
  width: 18%;
}

.managers-page .relationship-table th:nth-child(2) {
  width: 10%;
}

.managers-page .relationship-table th:nth-child(3) {
  width: 14%;
}

.managers-page .relationship-table .is-sorted {
  background: #eaf7f7;
}

.manager-name-link {
  font-size: 15px;
}

.manager-mobile-etfs {
  display: none;
}

.managers-page .symbol-list a {
  border: 1px solid #cde8ea;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

/* ETF comparison: persistent A/B visual identity. */
.compare-page .compare-search {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 42px minmax(180px, 260px) auto auto;
  justify-content: start;
}

.compare-page .compare-field-a input {
  border-left: 3px solid var(--accent-blue);
}

.compare-page .compare-field-b input {
  border-left: 3px solid var(--accent-violet);
}

.compare-page .versus {
  color: var(--brand-primary-hover);
}

.v1-comparison-heading {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
}

.comparison-fund {
  position: relative;
  border-left: 3px solid var(--accent-blue);
  padding-left: 15px;
}

.comparison-fund-b {
  border-right: 3px solid var(--accent-violet);
  border-left: 0;
  padding-right: 15px;
  padding-left: 0;
}

.compare-page .comparison-fund-a strong {
  color: var(--accent-blue);
}

.compare-page .comparison-fund-b strong {
  color: var(--accent-violet);
}

.compare-page .overlap-metrics > div {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
}

.compare-page .overlap-metrics > div::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--metric-accent, var(--brand-primary));
  content: "";
}

.compare-page .overlap-metrics .accent-cyan { --metric-accent: var(--accent-cyan); }
.compare-page .overlap-metrics .accent-blue { --metric-accent: var(--accent-blue); }
.compare-page .overlap-metrics .accent-violet { --metric-accent: var(--accent-violet); }
.compare-page .overlap-metrics .accent-orange { --metric-accent: var(--accent-orange); }

.compare-common-panel {
  overflow: hidden;
}

.compare-overlap-table {
  min-width: 880px;
}

.compare-overlap-table .fund-a-column {
  border-top: 2px solid var(--accent-blue);
}

.compare-overlap-table .fund-b-column {
  border-top: 2px solid var(--accent-violet);
}

.compare-page .exclusive-panel-a {
  border-top: 3px solid var(--accent-blue);
}

.compare-page .exclusive-panel-b {
  border-top: 3px solid var(--accent-violet);
}

.compare-page .compact-results > div {
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, auto);
}

/* C1/C3: only-A/only-B cards now show 張數・權重 together in this cell
   (previously just 權重) -- let it wrap onto a second line instead of
   forcing the row wider than its column, which stays overflow-safe. */
.compare-page .compact-results > div small {
  text-align: right;
  white-space: normal;
}

.compare-empty-state {
  margin-bottom: var(--space-6);
}

/* Broader V1 accent treatment for the original performance pilot. */
.performance-page-header {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 15%, rgba(24, 174, 185, 0.14), transparent 17rem),
    var(--surface);
}

.performance-summary-item:nth-child(1) {
  box-shadow: inset 0 3px var(--accent-blue);
}

.performance-summary-item:nth-child(2) {
  box-shadow: inset 0 3px var(--accent-cyan);
}

.performance-summary-item:nth-child(3) {
  box-shadow: inset 0 3px var(--accent-violet);
}

@media (max-width: 1050px) {
  .site-header .site-navigation a {
    padding-inline: 8px;
    font-size: 13px;
  }

  .signed-in-user {
    display: none;
  }

  .v1-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-5);
  }

  .v1-header-stat,
  .v1-header-metrics {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .etf-list-page .filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .etf-list-page .filter-actions {
    grid-column: 1 / -1;
  }

  .compare-page .compare-search {
    grid-template-columns: minmax(180px, 1fr) 42px minmax(180px, 1fr);
  }

  .compare-page .compare-search button,
  .compare-page .compare-search .button {
    min-height: var(--control-height);
  }
}

/* Tablet/mobile AUM replaces the nine-column ranking before it becomes a
   cramped horizontal grid; the underlying data and sort links are unchanged. */
@media (max-width: 800px) {
  .aum-desktop-table {
    display: none;
  }

  .aum-ranking-cards {
    display: block;
  }
}

/* Mobile navigation uses one accessible disclosure instead of wrapped rows. */
@media (max-width: 800px) {
  .shell {
    width: min(var(--content-width), calc(100% - 24px));
  }

  .header-inner {
    min-height: 64px;
    height: 64px;
    align-items: center;
    padding: 0;
  }

  .nav-enhanced .site-nav-toggle {
    display: inline-flex;
  }

  .site-navigation {
    position: fixed;
    z-index: 110;
    top: 64px;
    right: 12px;
    left: 12px;
    display: flex;
    max-height: calc(100dvh - 76px);
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    border: 1px solid rgba(203, 227, 232, 0.95);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: rgba(9, 57, 70, 0.98);
    box-shadow: var(--shadow-raised);
    padding: 10px;
  }

  .nav-enhanced .site-navigation:not(.is-open) {
    display: none;
  }

  .site-nav-primary,
  .site-nav-account {
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
  }

  .site-navigation > nav {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .site-nav-account {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 8px;
  }

  .site-header .site-navigation a,
  .site-header .logout-form button {
    width: 100%;
    min-height: var(--touch-target);
    justify-content: flex-start;
  }

  .site-header .site-navigation a.active {
    box-shadow: inset 3px 0 #fff;
  }

  .signed-in-user {
    display: block;
    max-width: none;
    padding: 7px 12px 2px;
  }

  .site-header .logout-form button {
    height: var(--touch-target);
  }
}

@media (max-width: 700px) {
  main.shell {
    padding-top: 18px;
  }

  .brand b {
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v1-page-header {
    min-height: 0;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: 20px 16px;
  }

  .v1-page-header h1 {
    font-size: clamp(24px, 7vw, 27px);
  }

  .v1-page-header-copy > p:not(.eyebrow) {
    font-size: 14px;
  }

  .v1-header-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px 14px;
  }

  .v1-header-stat strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 25px;
  }

  .v1-header-metric {
    padding: 12px;
  }

  .v1-header-metric strong {
    font-size: 20px;
  }

  .etf-research-nav {
    margin-bottom: var(--space-4);
    border-radius: 9px;
  }

  .etf-research-nav-items.mobile-navigation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
  }

  .etf-research-nav a {
    min-height: var(--touch-target);
    min-width: 0;
    justify-content: center;
    padding-inline: 13px;
  }

  .etf-research-nav a:last-child:nth-child(odd) {
    width: calc(50% - 2px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .v1-filter-surface input,
  .v1-filter-surface select,
  .v1-filter-surface button,
  .v1-filter-surface .button {
    min-height: var(--touch-target);
  }

  .v1-page .panel-title {
    min-height: 0;
    align-items: flex-start;
    padding: 15px 14px;
  }

  .v1-page .panel-title > span {
    flex: 0 0 auto;
  }

  .v1-scroll-hint {
    display: block;
  }

  /* ETF overview retains the existing mobile-card mode. */
  .etf-list-page .filter-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .etf-list-page .filter-actions {
    grid-column: auto;
  }

  .etf-list-page .filter-actions > * {
    flex: 1 1 0;
  }

  .etf-list-page .etf-table-wrap {
    display: none;
  }

  .etf-list-page .mobile-sort {
    margin: 0 14px 4px;
  }

  .etf-list-page .mobile-sort summary {
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
  }

  .etf-list-page .etf-cards {
    padding: 12px;
  }

  .etf-list-page .etf-card {
    padding: 15px;
  }

  /* AUM switches away from the nine-column grid on mobile. */
  .aum-overview-page .aum-filter-panel {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .aum-overview-page .filter-actions > * {
    flex: 1 1 0;
  }

  .aum-ranking-panel .v1-scroll-hint {
    text-align: left;
  }

  .aum-desktop-table {
    display: none;
  }

  .aum-ranking-cards {
    display: block;
  }

  .aum-mobile-sort {
    display: block;
    margin: 10px 14px 0;
  }

  .aum-mobile-sort summary {
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
    color: var(--brand-primary-hover);
    font-size: 12px;
    font-weight: 700;
  }

  .aum-mobile-sort > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding-bottom: 10px;
  }

  .aum-mobile-sort a {
    min-height: 38px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    padding: 6px 9px;
    font-size: 11px;
  }

  .aum-mobile-sort a.active {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-hover);
    font-weight: 750;
  }

  /* Intraday remains a comparison scroll with a sticky ETF identity. */
  .intraday-nav-page .intraday-nav-filter {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .intraday-nav-page .filter-actions > * {
    flex: 1 1 0;
  }

  .intraday-header-metrics .live-metric strong {
    font-size: 12px;
  }

  .intraday-nav-page .intraday-nav-table {
    min-width: 650px;
    table-layout: fixed;
  }

  .intraday-nav-page .intraday-nav-table .mobile-identity-column {
    width: var(--mobile-identity-width);
    max-width: var(--mobile-identity-width);
  }

  .intraday-nav-page .intraday-nav-table .mobile-numeric-column {
    width: 82px;
    padding-inline: 8px;
  }

  .intraday-nav-page .intraday-nav-table .etf-link {
    min-width: 0;
    gap: 2px;
  }

  .intraday-nav-page .intraday-nav-table .etf-link span {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intraday-nav-page .desktop-secondary-metadata {
    display: none;
  }

  .intraday-nav-page .intraday-nav-table th:first-child,
  .intraday-nav-page .intraday-nav-table td:first-child {
    position: sticky;
    z-index: 3;
    left: 0;
    background: var(--surface);
    box-shadow: 1px 0 var(--border), 7px 0 12px rgba(16, 53, 68, 0.04);
  }

  .intraday-nav-page .intraday-nav-table th:first-child {
    z-index: 4;
    background: #f1f7f9;
  }

  /* Managers expose three priority columns; ETF lists expand in-row. */
  .managers-page .relationship-search {
    grid-template-columns: 1fr 1fr;
    padding: 15px;
  }

  .managers-page .relationship-search label {
    width: auto;
    grid-column: 1 / -1;
  }

  .managers-page .manager-table-wrap {
    overflow: visible;
  }

  .managers-page .relationship-table {
    width: 100%;
    table-layout: auto;
  }

  .managers-page .relationship-table th,
  .managers-page .relationship-table td {
    padding: 12px 9px;
  }

  .managers-page .relationship-table th:first-child {
    width: auto;
  }

  .managers-page .relationship-table th:nth-child(2),
  .managers-page .relationship-table th:nth-child(3) {
    width: 72px;
  }

  .managers-page .manager-etfs-column {
    display: none;
  }

  .manager-mobile-etfs {
    display: block;
    margin-top: 5px;
  }

  .manager-mobile-etfs summary {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    color: var(--brand-primary-hover);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }

  .manager-mobile-etfs .symbol-list {
    min-width: min(270px, calc(100vw - 66px));
    margin: 7px 0 2px;
  }

  .manager-mobile-etfs .symbol-list a {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
  }

  /* ETF comparison keeps context and lets its genuine matrix own scrolling. */
  .compare-page .compare-search {
    grid-template-columns: 1fr 1fr;
    padding: 15px;
  }

  .compare-page .compare-search label {
    width: auto;
  }

  .compare-page .compare-search .versus {
    display: none;
  }

  .compare-page .compare-search button,
  .compare-page .compare-search .button {
    width: 100%;
  }

  .v1-comparison-heading {
    grid-template-columns: 1fr auto 1fr;
    gap: 9px;
    padding: 15px 12px;
  }

  .v1-comparison-heading b {
    display: block;
    font-size: 11px;
  }

  .v1-comparison-heading .comparison-fund {
    min-width: 0;
    padding-left: 9px;
  }

  .v1-comparison-heading .comparison-fund-b {
    padding-right: 9px;
    padding-left: 0;
    text-align: right;
  }

  .v1-comparison-heading strong {
    font-size: 20px;
  }

  .v1-comparison-heading span,
  .v1-comparison-heading small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compare-page .overlap-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare-page .overlap-metrics > div {
    padding: 14px;
  }

  .compare-page .comparison-columns {
    grid-template-columns: 1fr;
  }

  .compare-overlap-table th:first-child,
  .compare-overlap-table td:first-child {
    position: sticky;
    z-index: 3;
    left: 0;
    background: var(--surface);
    box-shadow: 1px 0 var(--border), 7px 0 12px rgba(16, 53, 68, 0.04);
  }

  .compare-overlap-table th:first-child {
    z-index: 4;
    background: #f1f7f9;
  }

  .compare-overlap-table .mobile-identity-column {
    width: 96px;
    max-width: 96px;
  }
}

@media (max-width: 390px) {
  .brand b {
    max-width: 125px;
  }

  .site-nav-toggle {
    min-width: 68px;
    padding-inline: 9px;
  }

  .v1-header-metrics {
    grid-template-columns: 1fr;
  }

  .v1-header-metric {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .v1-header-metric:first-child {
    border-top: 0;
  }

  .aum-card-core {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .aum-card-core > div {
    padding: 9px 7px;
  }

  .aum-card-core strong {
    font-size: 13px;
  }

  .managers-page .relationship-table th,
  .managers-page .relationship-table td {
    padding-inline: 6px;
    font-size: 13px;
  }

  .managers-page .relationship-table th:nth-child(2),
  .managers-page .relationship-table th:nth-child(3) {
    width: 65px;
  }
}

/* ETF Performance — comparison-scroll pilot */
.performance-page {
  color: var(--text-primary);
}

.performance-page-header,
.performance-filter-surface,
.performance-results {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 90% 15%, rgba(24, 174, 185, 0.14), transparent 17rem),
    var(--surface);
  box-shadow: var(--shadow-surface);
}

.performance-page-header {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(520px, 0.9fr);
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: 26px 28px;
  border-top: 3px solid var(--brand-primary);
}

.performance-page-intro .eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--brand-primary) !important;
  letter-spacing: 0.1em;
}

.performance-page-intro h1 {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(28px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.performance-page-intro > p:not(.eyebrow) {
  max-width: 660px;
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.performance-page-intro .performance-data-note {
  color: var(--text-muted);
  font-size: 13px;
}

.performance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  overflow: hidden;
}

.performance-summary-item {
  min-width: 0;
  padding: var(--space-4);
  border-left: 1px solid var(--border);
}

.performance-summary-item:first-child {
  border-left: 0;
}

.performance-summary-item-accent {
  background: var(--brand-primary-soft);
}

.performance-summary-item span,
.performance-summary-item small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.performance-summary-item strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--navy-deep);
  font-size: var(--kpi-support-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.performance-summary-item-accent strong {
  color: var(--brand-primary);
}

.performance-summary-item .performance-sort-summary {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-page > .tab-nav {
  margin-bottom: var(--space-5);
}

.performance-page > .tab-nav a.active {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.performance-filter-surface,
.performance-results {
  margin-bottom: var(--space-5);
}

.performance-filter-surface {
  padding: var(--space-4) var(--space-5);
}

.performance-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* Desktop only: 篩選 ETF title/description (left) and the search controls
   (right) share one row instead of stacking, so the card's height is
   governed by whichever side is taller, not their sum -- eliminating the
   unused band that used to sit below the heading. .performance-filter-
   surface's only two children already are .performance-section-heading
   and the search <form>, so no new wrapper element is needed; the form's
   own existing internal layout (search field + 確定／清除 + 進階搜尋,
   already grouped and capped from the two prior fixes) is placed as one
   unit in the right column, unchanged. Mobile (<=700px) is untouched --
   the existing @media(max-width:700px) block already fully overrides this
   with its own compact stacked/grid rules. */
@media (min-width: 701px) {
  .performance-filter-surface {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
    align-items: start;
    column-gap: var(--space-4);
  }

  .performance-filter-surface .performance-section-heading {
    margin-bottom: 0;
  }
}

.performance-section-heading h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
  line-height: 1.25;
}

.performance-section-heading p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.performance-filter-state,
.performance-result-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.performance-filter-form {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(135px, 1fr)) auto;
  gap: var(--space-3);
  align-items: end;
}

.performance-field {
  min-width: 0;
}

.performance-field > span {
  color: var(--text-secondary);
  font-size: 12px;
}

.performance-field input,
.performance-field select {
  height: var(--control-height);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.performance-field.is-active input,
.performance-field.is-active select {
  border-color: var(--brand-primary);
  background: #f5fcfc;
  box-shadow: 0 0 0 1px rgba(0, 127, 139, 0.08);
}

.performance-filter-actions {
  display: flex;
  gap: var(--space-2);
}

.performance-filter-actions button,
.performance-filter-actions .button {
  min-width: 92px;
  height: var(--control-height);
  white-space: nowrap;
}

.performance-filter-actions button {
  background: var(--brand-primary);
}

.performance-filter-actions button:hover {
  background: var(--brand-primary-hover);
}

.performance-filter-actions .secondary {
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.performance-results {
  overflow: hidden;
}

.performance-results-heading {
  margin: 0;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.performance-scroll-hint {
  display: none;
}

.performance-scroll-frame {
  position: relative;
}

.performance-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #9db9c1 #edf3f5;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.performance-table-scroll:focus-visible {
  outline-offset: -3px;
}

.performance-page .performance-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
}

.performance-page .performance-table th,
.performance-page .performance-table td {
  padding: 12px 14px;
}

.performance-page .performance-table th {
  border-bottom: 1px solid var(--border-strong);
  background: #f3f8fa;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.performance-page .performance-table th.period-short {
  border-top: 2px solid #36b8c1;
}

.performance-page .performance-table th.period-medium {
  border-top: 2px solid #4b8fc7;
}

.performance-page .performance-table th.period-long {
  border-top: 2px solid #7a72c5;
}

.performance-page .performance-table .performance-identity-column {
  width: 250px;
  border-top: 2px solid var(--navy);
  text-align: left;
}

.performance-page .performance-table th.is-sorted {
  background: #dff3f4;
  color: var(--brand-primary-hover);
  border-top: 2px solid var(--brand-primary);
}

.performance-sort-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.performance-sort-link b {
  color: var(--brand-primary);
  font-size: 14px;
}

.performance-sort-link .sort-idle {
  color: #93a8b5;
  font-weight: 500;
}

.performance-sort-link:hover {
  color: var(--brand-primary-hover);
}

.performance-page .performance-table td {
  border-bottom: 1px solid #e8eff3;
  background: var(--surface);
  transition: background-color 120ms ease;
}

.performance-page .performance-table tbody tr:last-child td {
  border-bottom: 0;
}

.performance-page .performance-table tbody tr:hover td,
.performance-page .performance-table tbody tr:focus-within td {
  background: #f4fafb;
}

.performance-page .performance-table td.is-sorted {
  background: #f2fafa;
  box-shadow: inset 1px 0 rgba(0, 127, 139, 0.08), inset -1px 0 rgba(0, 127, 139, 0.08);
}

.performance-page .performance-table tbody tr:hover td.is-sorted,
.performance-page .performance-table tbody tr:focus-within td.is-sorted {
  background: #e8f6f6;
}

.performance-etf-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  color: var(--text-primary);
  text-decoration: none;
}

.performance-etf-link strong {
  color: var(--brand-primary-hover);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.performance-etf-link span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-etf-link:hover strong,
.performance-etf-link:focus-visible strong {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.performance-etf-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin-top: 5px;
}

.performance-etf-meta span {
  border-radius: 999px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
  padding: 2px 6px;
  font-size: 11px;
}

.performance-etf-meta small {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-return {
  color: var(--text-secondary);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.performance-page .performance-return.positive {
  color: var(--price-up);
  font-weight: 700;
}

.performance-page .performance-return.negative {
  color: var(--price-down);
  font-weight: 700;
}

.performance-empty {
  padding: 46px 20px !important;
  text-align: center !important;
}

.performance-empty strong,
.performance-empty span {
  display: block;
}

.performance-empty strong {
  color: var(--navy-deep);
  font-size: 17px;
}

.performance-empty span {
  margin: 7px 0 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.performance-empty .button {
  min-height: var(--control-height);
}

/* Compact layout role: aligns with the existing 1050px data-layout step. */
@media (max-width: 1050px) {
  .performance-page-header {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

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

  .performance-search-field,
  .performance-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .performance-page-header {
    padding: var(--space-5) var(--space-4);
  }

  .performance-page-intro h1 {
    font-size: clamp(24px, 7vw, 27px);
  }

  .performance-summary-item {
    padding: var(--space-3);
  }

  .performance-summary-item strong {
    font-size: var(--kpi-support-size);
  }

  .performance-summary-item .performance-sort-summary {
    font-size: 15px;
  }

  .performance-page > .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 1px var(--space-2);
    scrollbar-width: thin;
  }

  .performance-page > .tab-nav a {
    min-height: var(--touch-target);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
  }

  .performance-filter-surface {
    padding: var(--space-4);
  }

  .performance-section-heading {
    align-items: flex-start;
  }

  .performance-section-heading h2 {
    font-size: 20px;
  }

  .performance-filter-form {
    grid-template-columns: 1fr;
  }

  .performance-search-field,
  .performance-filter-actions {
    grid-column: auto;
  }

  .performance-field input,
  .performance-field select,
  .performance-filter-actions button,
  .performance-filter-actions .button {
    min-height: var(--touch-target);
  }

  .performance-filter-actions > * {
    flex: 1 1 0;
  }

  .performance-results-heading {
    padding: var(--space-4);
  }

  .performance-results-heading p {
    max-width: 250px;
  }

  .performance-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: #f6fbfc;
    color: var(--text-muted);
    font-size: 12px;
  }

  .performance-scroll-hint span {
    color: var(--brand-primary);
    font-size: 16px;
  }

  .performance-scroll-frame::after {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    width: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 127, 139, 0.1));
    content: "";
    pointer-events: none;
  }

  .performance-page .performance-table {
    min-width: calc(var(--mobile-identity-width) + (7 * var(--mobile-numeric-width)));
  }

  .performance-page .performance-table th,
  .performance-page .performance-table td {
    padding: 10px 8px;
  }

  .performance-page .performance-table .performance-identity-column {
    width: var(--mobile-identity-width);
    max-width: var(--mobile-identity-width);
  }

  .performance-page .performance-table .mobile-numeric-column {
    width: var(--mobile-numeric-width);
    max-width: var(--mobile-numeric-width);
  }

  .performance-page .performance-table th:first-child,
  .performance-page .performance-table td:first-child {
    position: sticky;
    left: 0;
  }

  .performance-page .performance-table th:first-child {
    z-index: 4;
    box-shadow: 1px 0 0 var(--border-strong), 7px 0 12px rgba(16, 53, 68, 0.04);
  }

  .performance-page .performance-table td:first-child {
    z-index: 3;
    box-shadow: 1px 0 0 var(--border), 7px 0 12px rgba(16, 53, 68, 0.035);
  }

  .performance-etf-link {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .performance-etf-link strong {
    font-size: 14px;
  }

  .performance-etf-link span {
    font-size: 11px;
  }

  .performance-etf-meta,
  .desktop-secondary-metadata {
    display: none;
  }

  .period-label-full {
    display: none;
  }

  .period-label-mobile {
    display: inline;
  }

  .performance-sort-link {
    min-height: var(--touch-target);
  }
}

/* ETF Daily Report — V1 card-based research dashboard */
.daily-report-header-metrics .v1-header-metric:last-child strong {
  font-size: 18px;
}

.daily-report-controls,
.daily-report-selector {
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
  padding: var(--space-5);
}

.daily-report-controls-heading,
.daily-report-results-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.daily-report-controls-heading {
  margin-bottom: var(--space-4);
}

.daily-report-controls-heading h2,
.daily-report-results-heading h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
  line-height: 1.25;
}

.daily-report-controls-heading p,
.daily-report-results-heading p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.daily-report-controls-heading > span,
.daily-report-results-heading > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.daily-report-page .daily-report-top-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px;
  gap: var(--space-3);
  align-items: end;
  margin: 0;
}

.daily-report-page .daily-report-search {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.daily-report-selector .daily-report-search {
  grid-template-columns: minmax(260px, 1fr) auto;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.daily-report-selector-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.selector-group {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  padding: 14px;
}

.selector-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.selector-group-heading h3 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 16px;
}

.selector-group-heading span {
  color: var(--text-muted);
  font-size: 12px;
}

.selector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selector-chip {
  min-height: var(--touch-target);
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-primary);
  padding: 7px 10px;
  line-height: 1.2;
}

.selector-chip strong {
  color: var(--brand-primary-hover);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.selector-chip span {
  max-width: 150px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selector-chip small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.selector-chip:hover,
.selector-chip:focus-visible,
.selector-chip.active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

.selector-chip.active {
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.selector-more {
  margin-top: 10px;
}

.selector-more summary {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  color: var(--brand-primary-hover);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.selector-more[open] summary {
  margin-bottom: 9px;
}

.daily-report-intro {
  margin-bottom: var(--space-6);
}

.daily-report-page .etf-type-filter {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.daily-report-page .etf-type-filter select {
  width: 100%;
}

.daily-report-page .rank-tabs {
  display: flex;
  gap: 7px;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.daily-report-page .rank-tabs a,
.daily-report-page .rank-tabs button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 700;
}

.daily-report-page .rank-tabs a.active,
.daily-report-page .rank-tabs button.active {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 127, 139, 0.16);
}

.daily-report-page .rank-tabs a:hover:not(.active),
.daily-report-page .rank-tabs button:hover:not(.active) {
  border-color: #b8dadd;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

.daily-report-page > .notice {
  margin: 0 0 var(--space-4);
  border-color: #e5ca85;
  background: #fff9e8;
}

.daily-report-results {
  margin-bottom: var(--space-6);
}

.daily-report-results-heading {
  margin-bottom: var(--space-4);
  padding-inline: 2px;
}

.daily-report-page .daily-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.daily-report-page .daily-report-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.daily-report-page .daily-report-card:hover,
.daily-report-page .daily-report-card:focus-within {
  border-color: #bcd8de;
  box-shadow: 0 10px 26px rgba(20, 65, 82, 0.09);
}

.daily-report-page .daily-report-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 95% 0, rgba(24, 174, 185, 0.1), transparent 9rem),
    var(--surface);
  padding: 15px 16px 13px;
}

.daily-report-etf-heading {
  min-width: 0;
  margin: 0;
  font-size: 15px;
}

.daily-report-etf-heading .etf-link {
  gap: 2px;
  margin: 0;
}

.daily-report-etf-heading .etf-link strong {
  color: var(--brand-primary-hover);
  font-size: 17px;
}

.daily-report-etf-heading .etf-link span {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-report-page .daily-report-card-header > .tags {
  justify-content: flex-end;
  margin: 0;
}

.daily-report-page .daily-report-card-meta {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
}

.daily-report-page .daily-report-card-meta > span {
  min-width: 0;
  display: block;
  background: var(--surface-subtle);
  padding: 8px 10px;
}

.daily-report-card-meta small,
.daily-report-card-meta strong {
  display: block;
}

.daily-report-card-meta small {
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.daily-report-card-meta strong {
  overflow: hidden;
  color: var(--navy-deep);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-report-page .mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 12px 16px 0;
  padding: 4px;
  border-radius: 8px;
  background: #edf4f6;
}

.daily-report-page .mode-toggle a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
}

.daily-report-page .mode-toggle a.active {
  background: var(--surface);
  color: var(--brand-primary-hover);
  box-shadow: 0 2px 7px rgba(23, 59, 87, 0.1);
}

.daily-report-page .interval-controls {
  display: grid;
  grid-template-columns: minmax(115px, 1fr) auto minmax(115px, 1fr) auto;
  gap: 7px;
  align-items: end;
  padding: 12px 16px 0;
}

.daily-report-page .interval-controls label {
  min-width: 0;
}

.daily-report-page .interval-controls input,
.daily-report-page .interval-controls button {
  height: 36px;
}

.daily-report-page .interval-controls button {
  background: var(--brand-primary);
}

.daily-report-page .interval-sep {
  padding-bottom: 9px;
}

.daily-report-page .operation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 14px 16px 0;
}

.daily-report-page .op-filter {
  position: relative;
  min-height: 54px;
  overflow: hidden;
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.daily-report-page .op-filter::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--operation-color);
  content: "";
}

.daily-report-page .op-filter[data-filter="added"] { --operation-color: var(--accent-cyan); }
.daily-report-page .op-filter[data-filter="removed"] { --operation-color: #6b7885; }
.daily-report-page .op-filter[data-filter="increased"] { --operation-color: var(--accent-orange); }
.daily-report-page .op-filter[data-filter="decreased"] { --operation-color: var(--accent-violet); }

.daily-report-page .op-filter strong {
  color: var(--operation-color);
}

.daily-report-page .op-filter.active {
  border-color: var(--operation-color);
  background: color-mix(in srgb, var(--operation-color) 9%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--operation-color) 22%, transparent);
}

.daily-report-page .op-filter-all {
  min-height: 36px;
  border-color: var(--border);
  color: var(--text-secondary);
}

.daily-report-page .op-filter-all.active {
  border-color: #abdadd;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

.daily-report-page .operation-rows {
  padding: 10px 16px 4px;
}

.daily-report-page .operation-row {
  min-height: 45px;
  border-bottom-color: #e8eff2;
  color: var(--text-secondary);
}

.daily-report-page .operation-row:not(.operation-row-header):hover {
  background: #f7fbfc;
}

.daily-report-page .operation-row-header {
  min-height: 0;
  color: var(--text-muted);
}

.daily-report-page .op-name strong {
  color: var(--navy-deep);
}

.daily-report-page .op-tag {
  border: 1px solid transparent;
  border-radius: 5px;
}

.daily-report-page .op-tag-added {
  border-color: #b8e5e8;
  background: #e8f8f9;
  color: #087985;
}

.daily-report-page .op-tag-removed {
  border-color: #d5dde3;
  background: #f0f3f5;
  color: #536270;
}

.daily-report-page .op-tag-increased {
  border-color: #f1d0b4;
  background: #fff2e8;
  color: #b85d1e;
}

.daily-report-page .op-tag-decreased {
  border-color: #d8d1ef;
  background: #f2effa;
  color: #6759ac;
}

/* Holdings actions deliberately do not inherit red-up/green-down price
   semantics. Their text labels remain the primary meaning. */
.daily-report-page .operation-row[data-operation="added"] .positive,
.daily-report-page .operation-row[data-operation="added"] .negative {
  color: #087985;
}

.daily-report-page .operation-row[data-operation="increased"] .positive,
.daily-report-page .operation-row[data-operation="increased"] .negative {
  color: #b85d1e;
}

.daily-report-page .operation-row[data-operation="decreased"] .positive,
.daily-report-page .operation-row[data-operation="decreased"] .negative {
  color: #6759ac;
}

.daily-report-page .operation-row[data-operation="removed"] .positive,
.daily-report-page .operation-row[data-operation="removed"] .negative {
  color: #536270;
}

.daily-report-page .ca-marker {
  border: 1px solid #edd291;
  background: #fff7df;
  color: #825b08;
}

.daily-report-page .show-more {
  min-height: 38px;
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--brand-primary-hover);
}

.daily-report-page .show-more:hover {
  border-color: #b8dadd;
  background: var(--brand-primary-soft);
}

.daily-report-page .daily-report-empty {
  margin: 12px 16px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.daily-report-no-results {
  grid-column: 1 / -1;
}

body.modal-open {
  overflow: hidden;
}

.daily-report-page .modal-backdrop {
  z-index: 220;
  background: rgba(10, 34, 48, 0.58);
  backdrop-filter: blur(2px);
  padding: 20px;
}

.daily-report-page .favorites-modal {
  width: min(520px, 100%);
  max-height: min(88vh, 720px);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 22px 60px rgba(8, 42, 56, 0.26);
  padding: 22px;
}

.favorites-modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.favorites-modal-heading .eyebrow {
  margin: 0 0 5px;
}

.daily-report-page .favorites-modal-heading h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
}

.favorites-modal-close {
  width: var(--touch-target);
  height: var(--touch-target);
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  padding: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.favorites-modal-close:hover {
  border-color: var(--border-strong);
  background: #edf5f7;
  color: var(--navy-deep);
}

.daily-report-page .modal-hint {
  margin: 8px 0 17px;
  line-height: 1.55;
}

.daily-report-page .favorites-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.daily-report-page .favorites-inputs input {
  height: var(--control-height);
  border-color: var(--border-strong);
}

.daily-report-page .favorites-error {
  border: 1px solid #efc6c8;
  background: #fff0f0;
  color: var(--status-error);
}

.daily-report-page .modal-actions .button {
  min-height: var(--touch-target);
}

.daily-report-page #favorites-save {
  background: var(--brand-primary);
}

@media (max-width: 1050px) {
  .daily-report-selector-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .daily-report-page .daily-report-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .daily-report-controls,
  .daily-report-selector {
    margin-bottom: var(--space-5);
    padding: 15px;
  }

  .daily-report-controls-heading,
  .daily-report-results-heading {
    gap: 10px;
  }

  .daily-report-controls-heading h2,
  .daily-report-results-heading h2 {
    font-size: 19px;
  }

  .daily-report-page .daily-report-top-controls {
    grid-template-columns: 1fr;
  }

  .daily-report-page .daily-report-search {
    grid-template-columns: 1fr;
  }

  .daily-report-selector .daily-report-controls-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-report-selector .daily-report-controls-heading > button {
    width: 100%;
  }

  .daily-report-selector-groups {
    gap: 12px;
    margin-top: 15px;
  }

  .selector-group {
    padding: 12px;
  }

  .selector-group-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .selector-chip {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
    padding-inline: 8px;
  }

  .selector-chip span {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .daily-report-page .daily-report-search .filter-actions > * {
    flex: 1 1 0;
  }

  .daily-report-page .rank-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-report-page .rank-tabs a,
  .daily-report-page .rank-tabs button {
    min-height: var(--touch-target);
    padding-inline: 9px;
  }

  .daily-report-page .daily-report-card-header {
    padding-inline: 14px;
  }

  .daily-report-page .mode-toggle {
    margin-inline: 14px;
  }

  .daily-report-page .mode-toggle a {
    min-height: var(--touch-target);
  }

  .daily-report-page .interval-controls {
    grid-template-columns: 1fr 1fr;
    padding-inline: 14px;
  }

  .daily-report-page .interval-controls .interval-sep {
    display: none;
  }

  .daily-report-page .interval-controls button {
    min-height: var(--touch-target);
    grid-column: 1 / -1;
  }

  .daily-report-page .operation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .daily-report-page .op-filter {
    min-height: var(--touch-target);
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 10px;
  }

  .daily-report-page .op-filter-all {
    width: calc(100% - 28px);
    min-height: var(--touch-target);
    margin-inline: 14px;
  }

  .daily-report-page .operation-rows {
    padding-inline: 14px;
  }

  .daily-report-page .operation-row-header {
    display: none;
  }

  .daily-report-page .operation-row:not(.operation-row-header) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0;
    font-size: 13px;
  }

  .daily-report-page .operation-row[hidden] {
    display: none;
  }

  .daily-report-page .operation-row .op-name {
    grid-column: 1 / span 2;
  }

  .daily-report-page .operation-row .op-tag {
    align-self: center;
    justify-self: end;
  }

  .daily-report-page .operation-row > .num {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
  }

  .daily-report-page .operation-row > .num::before {
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 600;
  }

  .daily-report-page .op-name small {
    max-width: 190px;
    font-size: 12px;
  }

  .daily-report-page .show-more {
    width: calc(100% - 28px);
    min-height: var(--touch-target);
    margin-inline: 14px;
  }

  .daily-report-page .favorites-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 18px 16px;
  }

  .daily-report-page .favorites-inputs {
    grid-template-columns: 1fr;
  }

  .daily-report-page .favorites-inputs input {
    min-height: var(--touch-target);
  }

  .daily-report-page .modal-actions {
    position: sticky;
    bottom: -18px;
    margin-inline: -16px;
    margin-bottom: -18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 12px 16px 18px;
  }

  .daily-report-page .modal-actions > * {
    flex: 1 1 0;
  }
}

/* ETF 日報 V3 — market-wide daily highlights + ranking dashboard + two
   independent featured active-ETF panels. */
.v2-daily-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.v2-highlight-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
  padding: 16px 16px 14px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.v2-highlight-card:hover,
.v2-highlight-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(20, 65, 82, 0.1);
}

.v2-highlight-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
}

.v2-highlight-buy {
  border-color: #f1d0b4;
}

.v2-highlight-buy::before {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange));
}

.v2-highlight-sell {
  border-color: #d8d1ef;
}

.v2-highlight-sell::before {
  background: linear-gradient(90deg, var(--accent-violet), #6759ac);
}

.v2-highlight-empty-card {
  pointer-events: none;
  opacity: 0.7;
}

.v2-highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-bottom: 8px;
  font-size: 13px;
}

.v2-highlight-buy .v2-highlight-icon {
  background: color-mix(in srgb, var(--accent-orange) 14%, white);
  color: #b85d1e;
}

.v2-highlight-sell .v2-highlight-icon {
  background: color-mix(in srgb, var(--accent-violet) 14%, white);
  color: #6759ac;
}

.v2-highlight-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.v2-highlight-stock {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.v2-highlight-stock strong {
  color: var(--navy-deep);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.v2-highlight-stock small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-highlight-value {
  display: block;
  margin-bottom: 4px;
  color: var(--navy-deep);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.v2-highlight-context {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
}

.v2-ranking-dashboard {
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
  padding: var(--space-5);
}

.v2-ranking-dashboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.v2-ranking-dashboard-heading h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
}

.v2-ranking-dashboard-heading p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.v2-ranking-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.v2-period-selector {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  border-radius: 9px;
  background: var(--surface-subtle);
  padding: 3px;
}

/* Level 2 -- secondary/segmented control (主動／全部／被動、金額／張數、
   排行區間 windows, etc). Deliberately NEVER the solid brand-teal fill
   Level 1 primary buttons (確定) and the top ETF function nav use -- a
   pale tinted background + teal border/text keeps this level visually
   subordinate to both. border reserved (transparent) on every state so
   toggling active never shifts layout. */
.v2-period-selector a,
.v2-period-selector button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.v2-period-selector a.active,
.v2-period-selector button.active {
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary-hover);
  font-weight: 800;
}

.v2-period-selector a:hover:not(.active),
.v2-period-selector button:hover:not(.active) {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

.v2-ranking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.v2-ranking-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.v2-ranking-panel h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  color: var(--navy-deep);
  font-size: 14.5px;
}

.v2-ranking-panel h3 span {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.daily-report-rank-bar-list.v2-bar-list {
  padding: 4px 16px 10px;
}

.daily-report-rank-bar-list .v2-bar-row {
  grid-template-columns: 118px minmax(0, 1fr) 118px;
}

.daily-report-rank-bar-list .v2-bar-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: normal;
  font-weight: 700;
}

.daily-report-rank-bar-list .v2-bar-value small {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.v2-streak-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 16px 10px;
  list-style: none;
}

.v2-streak-row {
  display: grid;
  grid-template-columns: 22px 130px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.v2-streak-row:last-child {
  border-bottom: 0;
}

.v2-streak-rank {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.v2-streak-days {
  justify-self: start;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.v2-streak-buy {
  background: color-mix(in srgb, var(--accent-orange) 14%, white);
  color: #b85d1e;
}

.v2-streak-sell {
  background: color-mix(in srgb, var(--accent-violet) 14%, white);
  color: #6759ac;
}

.v2-streak-row .v2-bar-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: normal;
  font-weight: 700;
}

.v2-streak-row .v2-bar-value small {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.v2-featured-etf-section {
  margin-bottom: var(--space-6);
}

.v2-featured-etf-heading {
  margin-bottom: var(--space-4);
  padding-inline: 2px;
}

.v2-featured-etf-heading h2 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
}

.v2-featured-etf-heading p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.v2-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.v2-featured-panel {
  min-width: 0;
}

.v2-featured-panel-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  padding: 12px 14px;
}

.v2-featured-panel-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.v2-featured-search-form {
  display: flex;
  flex: 1 1 220px;
  gap: 6px;
}

.v2-featured-search-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-height);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 0 10px;
}

.v2-featured-search-form button {
  flex: 0 0 auto;
  height: var(--control-height);
}

.v2-featured-chips {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 6px;
}

.v2-featured-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}

.v2-featured-summary {
  min-width: 0;
}

.v2-featured-summary .operation-summary {
  padding: 0;
}

.v2-featured-amounts {
  display: flex;
  gap: var(--space-4);
  margin-top: 10px;
}

.v2-featured-amounts span {
  display: block;
}

.v2-featured-amounts small {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
}

.v2-featured-amounts strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.v2-featured-amount-buy strong {
  color: #b85d1e;
}

.v2-featured-amount-sell strong {
  color: #6759ac;
}

.v2-featured-body .v2-donut {
  width: 120px;
  height: 120px;
  margin: 0;
}

/* ETF 日報 V3.1 — scope selector band (全部／主動式／被動式). A single
   compact row between the secondary nav and the four highlight cards --
   deliberately not a card, just an integrated control band. */
.v2-scope-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: var(--space-4);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-surface);
}

.v2-scope-band-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.v2-scope-selector {
  flex: 0 0 auto;
}

.v2-scope-band-hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1150px) {
  .v2-daily-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-ranking-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-featured-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .v2-scope-band {
    border-radius: var(--radius-md);
    padding: 8px 10px;
  }

  .v2-scope-band-hint {
    display: none;
  }

  .v2-scope-selector {
    flex: 1 1 100%;
  }

  .v2-scope-selector a {
    flex: 1 1 0;
    padding-inline: 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  .v2-daily-highlights {
    gap: var(--space-2);
  }

  .v2-highlight-card {
    padding: 13px 13px 12px;
  }

  .v2-highlight-value {
    font-size: 20px;
  }

  .v2-ranking-dashboard {
    padding: 15px;
  }

  .v2-ranking-dashboard-heading {
    flex-direction: column;
  }

  .v2-ranking-controls {
    width: 100%;
    flex-direction: column;
  }

  .v2-period-selector {
    width: 100%;
  }

  .v2-period-selector a {
    flex: 1 1 0;
  }

  .daily-report-rank-bar-list .v2-bar-row,
  .etf-list-aum-bar-list .v2-bar-row,
  .intraday-premium-bar-list .v2-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity value" "track track";
    row-gap: 4px;
  }

  .daily-report-rank-bar-list .v2-bar-identity,
  .etf-list-aum-bar-list .v2-bar-identity,
  .intraday-premium-bar-list .v2-bar-identity { grid-area: identity; }
  .daily-report-rank-bar-list .v2-bar-track,
  .etf-list-aum-bar-list .v2-bar-track,
  .intraday-premium-bar-list .v2-bar-track { grid-area: track; }
  .daily-report-rank-bar-list .v2-bar-value,
  .etf-list-aum-bar-list .v2-bar-value,
  .intraday-premium-bar-list .v2-bar-value { grid-area: value; }

  /* ETF List's AUM Top 12 bars and 折溢價 Top 10 bars get the same
     full-width identity area as Daily Report's ranking rows, so the ETF
     name (re-enabled below) has room without crowding the value column. */
  .etf-list-aum-bar-list .v2-bar-identity span,
  .intraday-premium-bar-list .v2-bar-identity span {
    display: block;
  }

  .v2-streak-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "rank identity days" ". . value";
    row-gap: 4px;
  }

  .v2-streak-rank { grid-area: rank; }
  .v2-streak-row .v2-bar-identity { grid-area: identity; }
  .v2-streak-days { grid-area: days; justify-self: start; }
  .v2-streak-row .v2-bar-value { grid-area: value; justify-self: end; }

  .v2-featured-panel-select {
    padding: 10px 12px;
  }

  .v2-featured-search-form {
    flex-basis: 100%;
  }

  .v2-featured-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-inline: 14px;
  }

  .v2-featured-body .v2-donut {
    order: -1;
  }
}

/* UI/UX Refinement V1 — compact mobile navigation, filtering and priority rows. */
.mobile-compact-search,.mobile-filter-disclosure,.mobile-filter-fields{display:contents}
.mobile-filter-disclosure>summary{display:none}
.mobile-compact-search>button{display:none}
.intraday-mobile-list,.manager-mobile-list{display:none}
@media(min-width:701px){.mobile-filter-disclosure:not([open])>.mobile-filter-fields{display:contents}}

@media(max-width:700px){
  .etf-research-nav-items.mobile-navigation-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;padding:4px}
  .etf-research-nav-items.mobile-navigation-grid>a{grid-column:span 3;width:auto;min-height:40px;padding:4px 2px;font-size:11.5px;line-height:1.15}
  .etf-research-nav-items.mobile-navigation-grid>a:nth-child(n+5){grid-column:span 4}
  .etf-research-nav a:last-child:nth-child(odd){width:auto;grid-column:span 4;justify-self:stretch}

  .mobile-compact-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end}
  .mobile-compact-search>label{min-width:0}.mobile-compact-search>label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mobile-compact-search>button{display:block;min-width:58px;padding-inline:10px}
  .mobile-filter-disclosure{display:block}.mobile-filter-disclosure>summary{display:flex;min-height:38px;align-items:center;justify-content:space-between;color:var(--brand-primary-hover);cursor:pointer;font-size:12px;font-weight:800}
  .mobile-filter-disclosure>summary span{border-radius:999px;background:var(--brand-primary-soft);padding:3px 7px;font-size:10px}
  .mobile-filter-fields{display:none}.mobile-filter-disclosure[open]>.mobile-filter-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:3px}
  .mobile-filter-fields .filter-actions,.mobile-filter-fields .performance-filter-actions{grid-column:1/-1}

  .etf-list-page .v1-page-header-copy>p:not(.eyebrow),.daily-report-page .v1-page-header-copy>p:not(.eyebrow),.performance-page-intro>p:not(.eyebrow),.intraday-nav-page .v1-page-header-copy>p:not(.eyebrow),.managers-page .v1-page-header-copy>p:not(.eyebrow){display:none}
  .etf-list-page .v1-header-stat,.performance-page .performance-summary,.daily-report-page .daily-report-header-metrics,.intraday-nav-page .intraday-header-metrics,.managers-page .v1-header-stat{display:none}
  .etf-list-page .v1-page-header,.daily-report-page .v1-page-header,.performance-page .performance-page-header,.intraday-nav-page .v1-page-header,.managers-page .v1-page-header{padding:12px 14px}

  .etf-list-page .filter-panel,.performance-filter-surface{gap:7px;padding:11px;margin-bottom:11px}
  .etf-list-page .filter-panel>.mobile-compact-search,.etf-list-page .filter-panel>.mobile-filter-disclosure,.performance-filter-form>.mobile-compact-search,.performance-filter-form>.mobile-filter-disclosure{grid-column:1/-1}
  .performance-filter-surface>.performance-section-heading{display:none}.performance-filter-form{display:grid;gap:7px}
  .performance-results-heading{padding:10px 12px}.performance-results-heading p{display:none}
  .etf-list-page .panel-title,.performance-results-heading{align-items:center}.etf-list-page .panel-title{padding:10px 12px}
  .etf-list-page .etf-cards{padding:8px}.etf-list-page .etf-card{padding:12px}

  .daily-report-selector{padding:11px;margin-bottom:11px}
  .daily-report-selector .daily-report-controls-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:9px}
  .daily-report-selector .daily-report-controls-heading p{display:none}.daily-report-selector .daily-report-controls-heading>button{width:auto;min-height:38px;padding-inline:10px;font-size:11px}
  .daily-report-page .daily-report-search{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding-bottom:9px}
  .daily-report-page .daily-report-search .search-field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .daily-report-page .daily-report-search .filter-actions{gap:5px;flex-wrap:nowrap}.daily-report-page .daily-report-search .filter-actions>*{min-width:52px;padding-inline:8px}
  .daily-report-selector-groups{gap:8px;margin-top:9px}.daily-report-page .selector-group{padding:9px}
  .daily-report-page .selector-group-heading{flex-direction:row;align-items:baseline;margin-bottom:7px}.daily-report-page .selector-chip{min-height:39px;padding:5px 7px}.daily-report-page .selector-chip small{display:none}
  .daily-report-page[data-report-selected="true"] .daily-report-selector-groups{display:none}.daily-report-page[data-report-selected="true"] .daily-report-selector .daily-report-search{border-bottom:0;padding-bottom:0}

  /* Intraday is a priority list on mobile; the desktop table remains intact. */
  .intraday-nav-page .intraday-results .v1-scroll-hint,.intraday-nav-page .intraday-results .table-wrap{display:none}
  .intraday-mobile-list{display:grid;gap:0;margin:0;padding:0 10px 7px;list-style:none}.intraday-mobile-row{padding:11px 3px;border-bottom:1px solid var(--border)}
  .intraday-mobile-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}.intraday-mobile-heading .etf-link{min-width:0;grid-template-columns:auto minmax(0,1fr)}
  .intraday-mobile-heading .etf-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.intraday-premium{flex:0 0 auto;font-size:18px;font-variant-numeric:tabular-nums}
  .intraday-core-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0 5px}.intraday-core-metrics>div{display:flex;align-items:baseline;justify-content:space-between;border-radius:7px;background:var(--surface-subtle);padding:7px 9px}
  .intraday-core-metrics dt,.intraday-mobile-meta{color:var(--text-muted);font-size:11px}.intraday-core-metrics dd{margin:0;color:var(--navy-deep);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
  .intraday-mobile-meta{display:flex;justify-content:space-between;gap:8px}.intraday-nav-page .intraday-nav-filter{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:11px}.intraday-nav-page .intraday-nav-filter .filter-actions{grid-column:1/-1}

  /* Managers show ETF relationships directly instead of empty table space. */
  .managers-page .manager-table-wrap{display:none}.manager-mobile-list{display:grid;gap:8px;margin:0;padding:9px;list-style:none}
  .manager-mobile-card{border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:11px}.manager-mobile-summary{display:flex;align-items:start;justify-content:space-between;gap:10px}
  .manager-mobile-summary>div{display:grid;justify-items:end;gap:2px}.manager-mobile-summary span{color:var(--text-muted);font-size:11px}.manager-mobile-summary strong{color:var(--navy-deep);font-size:14px}
  .manager-mobile-symbols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:9px}.managers-page .manager-mobile-symbols a{min-width:0;min-height:37px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px;border-radius:7px;padding:5px 7px}
  .manager-mobile-symbols a strong{font-size:12px}.manager-mobile-symbols a span{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
  .manager-more summary{min-height:38px;display:flex;align-items:center;color:var(--brand-primary-hover);cursor:pointer;font-size:11px;font-weight:800}.managers-page .relationship-search{gap:7px;padding:11px}
}

/* V3 acceptance overrides live last so earlier page migrations cannot restore
   the superseded mobile table/card and action layouts. */
.aum-overview-page .aum-filter-panel{grid-template-columns:minmax(260px,1fr) auto auto;padding:12px}.aum-overview-page .aum-filter-panel .filter-actions{align-self:center}
@media(max-width:700px){
  .daily-report-page .operation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:7px 8px 0}
  .daily-report-page .operation-summary>button{min-width:0;min-height:42px;padding-inline:2px;font-size:12px;white-space:nowrap}
  .compare-common-panel .v1-comparison-scroll,.compare-common-panel .v1-scroll-hint,.security-holder-desktop-table,.holdings-desktop-table{display:none}
  .mobile-comparison-list,.security-holder-mobile-list,.holding-mobile-list{display:block}
  .compact-snapshot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .holding-research .kline-chart{height:clamp(360px,105vw,400px)}
  .aum-overview-page .aum-filter-panel{grid-template-columns:1fr;padding:8px}.aum-filter-panel .aum-style-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px}.aum-filter-panel .aum-style-filter a{min-width:0;padding-inline:4px}
  .security-primary-search,.managers-page .relationship-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:6px;padding:9px}.security-primary-search label,.managers-page .relationship-search label{width:auto;min-width:0}.managers-page .relationship-search label{grid-column:auto}.security-primary-search label>span,.managers-page .relationship-search label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.security-primary-search button,.security-primary-search .button,.managers-page .relationship-search button,.managers-page .relationship-search .button{width:auto;min-width:68px;min-height:40px;padding-inline:10px}
}

/* ============================================================
   V2 DASHBOARD PRODUCTION PRIMITIVES
   Formalizes the user-approved /ui-prototype/performance-v2 and
   /ui-prototype/etf-list-v2 visual language for production use
   (docs/etf-tracker-v2-migration-phase1.md). This is the single canonical
   copy of that shared language; static/css/prototype_performance_v2.css
   and prototype_etf_list_v2.css remain untouched/isolated for now.
   Deliberately placed last so it wins the cascade over the earlier
   .v1-page-header / .performance-page-header / .v1-filter-surface rules
   for the handful of properties (background, padding, border) it
   overrides -- pages keep those original classes for markup-contract
   compatibility (existing tests assert their literal substrings) and gain
   the new look additively via one more class, never a class removal.
   Reuses .v1-research-grid/.v1-col-4/.v1-col-8/.v1-col-12 (Design System V2
   Foundation, above) as the 12-column grid and .v1-page .panel/.panel-title
   as dashboard-panel chrome -- no duplicate grid or panel system. */

.v2-hero {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 92% 90%, rgba(6, 40, 46, 0.35), transparent 55%),
    linear-gradient(120deg, #00565f 0%, #007f8b 45%, #17b3bd 100%);
  box-shadow: 0 18px 40px rgba(6, 46, 53, 0.22);
  padding: 26px 32px;
}

.v2-hero::after {
  position: absolute;
  top: -40%;
  right: -6%;
  width: 46%;
  height: 220%;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
  content: "";
  pointer-events: none;
  transform: rotate(8deg);
}

.v2-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 620px;
}

.v2-hero .eyebrow {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.v2-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: -0.02em;
}

.v2-hero-copy > p:not(.eyebrow) {
  max-width: 520px;
  margin: 8px 0 0 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 14px;
  line-height: 1.55;
}

.v2-hero-context {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  text-align: right;
}

.v2-hero-context strong {
  margin-left: 6px;
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ETF Detail's classification tags sit directly in .v2-hero (Phase 3,
   docs/etf-tracker-v2-migration-phase3-etf-detail.md) -- readable on the
   dark gradient instead of their default light-blue-on-white treatment. */
.v2-hero .tags {
  position: relative;
  z-index: 1;
}

.v2-hero .tags span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Integrated KPI strip -- one surface, colored top accents, never six
   floating cards. */
.v2-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-surface);
}

.v2-kpi {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding: 16px 16px 14px;
}

.v2-kpi:first-child {
  border-left: 0;
}

.v2-kpi::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--v2-accent, var(--brand-primary));
  content: "";
}

.v2-accent-cyan { --v2-accent: var(--viz-cyan); }
.v2-accent-coral { --v2-accent: var(--viz-coral); }
.v2-accent-emerald { --v2-accent: var(--viz-emerald, #159b72); }
.v2-accent-blue { --v2-accent: var(--viz-royal-blue, #2563d9); }
.v2-accent-violet { --v2-accent: var(--viz-violet); }
.v2-accent-amber { --v2-accent: var(--viz-amber, #d99a17); }

.v2-kpi span {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
}

.v2-kpi strong {
  display: block;
  overflow: hidden;
  margin: 6px 0 2px;
  color: var(--navy-deep);
  font-size: var(--kpi-support-size);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-kpi.v1-kpi-hero strong,
.v2-kpi strong.v2-kpi-hero-value {
  font-size: var(--kpi-hero-size);
  font-weight: 800;
}

.v2-kpi strong.positive { color: var(--price-up); }
.v2-kpi strong.negative { color: var(--price-down); }

.v2-kpi small {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact dense research toolbar -- always one row at desktop widths,
   layered on top of the existing .v1-filter-surface control styling. */
.v2-toolbar {
  margin-bottom: var(--space-5);
}

.v2-toolbar-form {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(105px, 1fr)) auto auto;
  gap: var(--space-3);
  align-items: end;
}

/* Primary visualization: horizontal ranking bars. */
.v2-bar-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 6px 18px 14px;
  list-style: none;
}

.v2-bar-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.v2-bar-identity {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: baseline;
  color: var(--text-primary);
  text-decoration: none;
}

.v2-bar-identity strong {
  flex: 0 0 auto;
  color: var(--brand-primary-hover);
  font-size: 13px;
}

.v2-bar-identity span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-bar-track {
  position: relative;
  height: 16px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface-subtle);
}

.v2-bar-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 5px;
  transition: width 200ms ease;
}

.v2-bar-value {
  color: var(--navy-deep);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Secondary visualization: composition donut (SVG, server-rendered). */
.v2-donut {
  display: block;
  width: 148px;
  height: 148px;
  margin: 18px auto 6px;
}

.v2-donut circle {
  transition: stroke-dasharray 200ms ease;
}

.v2-donut-count {
  fill: var(--navy-deep);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.v2-donut-label {
  fill: var(--text-muted);
  font-size: 10px;
}

.v2-donut-legend {
  display: grid;
  gap: 8px;
  margin: 0;
  border-top: 1px solid var(--border);
  padding: 14px 18px 16px;
  list-style: none;
}

.v2-donut-legend li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.v2-donut-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.v2-donut-legend b {
  font-variant-numeric: tabular-nums;
}

.v2-donut-legend small {
  min-width: 40px;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Holdings-weight donut (ETF detail): donut + legend side by side on
   desktop, a positioned wrapper so the floating .chart-tooltip anchors to
   the chart rather than the page. */
.holding-weight-donut-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: 6px 18px 18px;
}

.holding-weight-donut-chart-wrap {
  position: relative;
  flex: 0 0 auto;
}

.holding-weight-donut {
  width: 180px;
  height: 180px;
  margin: 0;
}

.holding-weight-donut circle[data-slice] {
  cursor: pointer;
}

.holding-weight-donut circle[data-slice]:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.holding-weight-donut-legend {
  flex: 1 1 220px;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  border-top: none;
  padding: 0;
}

@media (max-width: 720px) {
  .holding-weight-donut-layout {
    flex-direction: column;
    padding: 6px 14px 16px;
  }
  .holding-weight-donut-legend {
    width: 100%;
    max-height: none;
  }
}

/* Multi-line normalized comparison chart (server-rendered SVG polylines). */
.v2-line-chart {
  display: block;
  width: 100%;
  height: 240px;
  background-image: repeating-linear-gradient(
    to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 25%
  );
  background-size: 100% 100%;
}

.v2-chart-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 0;
  border-top: 1px solid var(--border);
  padding: 12px 18px 16px;
  list-style: none;
}

.v2-chart-legend li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.v2-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.v2-chart-legend a {
  display: flex;
  min-width: 0;
  gap: 5px;
  align-items: baseline;
  color: var(--text-primary);
  text-decoration: none;
}

.v2-chart-legend strong {
  color: var(--brand-primary-hover);
  font-size: 12.5px;
}

.v2-chart-legend span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-chart-legend b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Quick-discovery segmented tabs. */
.v2-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
  padding: 3px;
}

.v2-tab {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.v2-tab.active {
  background: var(--brand-primary);
  color: #fff;
}

/* Compact ranking / quick-discovery list. */
.v2-ranking-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-ranking-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--border);
  padding: 9px 18px;
}

.v2-ranking-list li:nth-child(-n+2) {
  border-top: 0;
}

.v2-ranking-list li:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.v2-ranking-list b {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.v2-ranking-list a {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: baseline;
  color: var(--text-primary);
  text-decoration: none;
}

.v2-ranking-list a strong {
  flex: 0 0 auto;
  color: var(--brand-primary-hover);
  font-size: 13px;
}

.v2-ranking-list a span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-ranking-list em {
  font-style: normal;
  color: var(--navy-deep);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}


/* Single-column variant for a narrow 4/12 insight rail (2-up is too tight
   at typical rail widths -- Phase 2, docs/etf-tracker-v2-migration-
   phase2-security.md). */
.v2-ranking-list-compact {
  grid-template-columns: 1fr;
}

.v2-ranking-list-compact li:nth-child(-n+2) {
  border-top: 1px solid var(--border);
}

.v2-ranking-list-compact li:first-child {
  border-top: 0;
}

.v2-ranking-list-compact li {
  border-right: 0 !important;
}

/* Compact insight-rail donut: smaller than the full dashboard donut so it
   reads well beside a large primary chart rather than dominating a narrow
   4/12 column. */
.v2-donut-compact {
  width: 108px;
  height: 108px;
  margin: 14px auto 4px;
}

.v2-donut-compact .v2-donut-count {
  font-size: 16px;
}

@media (max-width: 1050px) {
  .v2-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .v2-kpi:nth-child(3n+1) {
    border-left: 0;
  }

  .v2-kpi:nth-child(n+4) {
    border-top: 1px solid var(--border);
  }

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

  .v2-bar-row {
    grid-template-columns: 120px minmax(0, 1fr) 74px;
  }
}

@media (max-width: 700px) {
  .v2-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .v2-hero-context {
    align-items: flex-start;
    text-align: left;
  }

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

  .v2-kpi:nth-child(3n+1) {
    border-left: 1px solid var(--border);
  }

  .v2-kpi:nth-child(odd) {
    border-left: 0;
  }

  .v2-kpi:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }

  .v2-toolbar-form {
    grid-template-columns: 1fr;
  }

  .v2-bar-row {
    grid-template-columns: 96px minmax(0, 1fr) 64px;
  }

  .v2-bar-identity span {
    display: none;
  }

  /* ETF Daily Report's net-buy/sell and streak rows already lay out a
     full-width identity area on this breakpoint (see the
     .daily-report-rank-bar-list / .v2-streak-row grid rules above), so the
     stock name can stay visible here without crowding -- unlike the other
     pages sharing the base .v2-bar-identity rule above, which keep names
     hidden. */
  .daily-report-page .v2-bar-identity span {
    display: block;
  }

  .v2-ranking-list {
    grid-template-columns: 1fr;
  }

  .v2-ranking-list li:nth-child(odd) {
    border-right: 0;
  }

  .v2-ranking-list li:nth-child(2) {
    border-top: 1px solid var(--border);
  }

  .v2-chart-legend {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   股票反查 ETF (Security Reverse Lookup) visual polish.
   docs task: rework the reverse-lookup page's 排行類型／ETF 類型
   selectors into visible Level 2 segmented tabs, a search RESULT
   SUMMARY card, and give the previously-unstyled ranking list/
   loading/error states a real visual language instead of raw
   browser-default <ol>/<li>/<select> markup.
   ============================================================ */

/* Desktop two-column layout (task section 10): search/result panel on the
   left (~45%), 熱門關聯查詢 ranking panel on the right (~55%). Independent
   card heights -- grid's default align-items: start (row) means neither
   column is stretched to match the other's height. Below 700px this block
   never applies, so the two <section>s simply stack as normal flow. */
@media (min-width: 701px) {
  .security-index-columns {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }
}

.security-search-panel {
  display: grid;
  gap: var(--space-3);
}

.security-result-kpi-strip {
  margin-bottom: 0;
}

/* This strip only ever renders 4 cells, never 6 -- the shared
   .v2-kpi-strip base (repeat(6, minmax(0, 1fr))) would otherwise leave 2
   empty track slots and squeeze all 4 real cells into 4/6 of the card
   width, which is what made "3017 奇鋐" truncate. Widen the first
   (code/name) cell to ~40% since it carries the most content; the mobile
   2/3-column reflow below 1050px/700px is untouched. */
@media (min-width: 701px) {
  .security-result-kpi-strip {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
}

/* The code/name cell must never truncate (real acceptance bug: "30..."
   instead of "3017 奇鋐") -- overrides the shared .v2-kpi strong rule's
   overflow:hidden/ellipsis/nowrap. Wrapping is fine (task: "mobile may
   wrap naturally"), so this applies at every width, not just desktop. */
.security-result-kpi-strip .v2-kpi-hero-value {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.security-search-result-actions {
  display: flex;
  justify-content: flex-end;
}

/* Search RESULT holder rows (task section 5): shares (張) before weight --
   a 4th grid column added to the shared .v2-ranking-list/-compact row
   layout, scoped to this page's list only so security_detail.html's own
   (unrelated) top_holders preview keeps its 3-column shape. */
.security-search-holders li {
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
}

.security-search-holder-quantity {
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.security-search-empty {
  margin: 0;
  padding: 22px 16px;
}

.security-scope-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
}

.security-scope-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.security-scope-label {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The ranking-type group carries 6 full-sentence labels (task: "do not
   invent new ranking types, use the existing real ones") that will never
   fit one row -- wrap rather than force a horizontal scroller. */
.ranking-type-tabs {
  flex-wrap: wrap;
}

/* Ranking list + row: previously plain <ol>/<li>/<a> with no CSS at all
   (the root of the "page feels empty and monotonous" complaint for this
   section). */
.ranking-panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ranking-panel-title h3 {
  margin: 0;
  color: var(--navy-deep);
  font-size: 14px;
}

.ranking-panel-controls select {
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 0 10px;
  color: var(--text-primary);
  font-size: 12.5px;
}

/* Ranking result: one locally scoped, bar-free row. */
.security-rank-list {
  margin: 0;
  padding: 2px 2px 4px;
  list-style: none;
}

.security-rank-item {
  display: block;
}

.security-rank-item:hover {
  background: var(--surface-subtle);
}

.security-rank-row {
  display: grid;
  grid-template-columns: 32px max-content minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.security-rank-item:last-child .security-rank-row {
  border-bottom: 0;
}

.security-rank-no {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.security-rank-row > .security-rank-code,
.security-rank-row > .security-rank-name {
  display: block;
  grid-template-columns: none;
  gap: 0;
  background: transparent;
  padding: 0;
}

.security-rank-row > .security-rank-code {
  overflow: visible;
  font-size: 13.5px;
  color: var(--brand-primary-hover);
  font-weight: 700;
  text-decoration: none;
  text-overflow: clip;
  white-space: nowrap;
}

.security-rank-row > .security-rank-name {
  min-width: 0;
  overflow: hidden;
  color: var(--navy-deep);
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-rank-value {
  display: block;
  width: auto;
  height: auto;
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 4px 7px;
  color: inherit;
  font: inherit;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.security-rank-value strong,
.security-rank-value small {
  display: block;
  overflow: visible;
  text-overflow: clip;
}

.security-rank-value strong {
  color: var(--navy-deep);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.security-rank-value small {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
}

.security-rank-toggle small::after {
  content: " ▾";
}

.security-rank-toggle[aria-expanded="true"] small::after {
  content: " ▴";
}

.security-rank-toggle:hover,
.security-rank-toggle[aria-expanded="true"] {
  background: var(--brand-primary-soft);
}

.security-rank-item > .security-rank-detail {
  margin: 0 14px 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  padding: 10px 12px;
}

.security-rank-detail[hidden] {
  display: none;
}

.security-rank-detail .table-wrap {
  border-radius: 6px;
  background: var(--surface);
}

.security-rank-detail .security-contributor-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

.security-contributor-table th:first-child,
.security-contributor-table td:first-child {
  width: 42%;
  min-width: 180px;
}

.security-rank-detail .security-contributor-etf-link {
  display: flex;
  grid-template-columns: none;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

.security-contributor-etf-code {
  min-width: 6.5ch;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--brand-primary-hover);
  font-weight: 700;
  text-overflow: clip;
  white-space: nowrap;
}

.security-contributor-etf-name {
  min-width: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.security-contributor-field-label {
  display: none;
}

.ranking-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Loading / error states (task section 6): the JS-driven fragment swap
   already produces these -- they were unstyled plain text before. */
.ranking-status,
.ranking-detail-loading {
  padding: 18px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.ranking-detail-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px;
  text-align: center;
  color: var(--accent-coral);
  font-size: 13px;
}

.ranking-retry,
.ranking-detail-retry {
  min-height: 30px;
  border: 1.5px solid var(--accent-coral);
  border-radius: 999px;
  background: transparent;
  padding: 0 12px;
  color: var(--accent-coral);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 700px) {
  .security-rank-row {
    grid-template-columns: 28px max-content minmax(0, 1fr) auto;
    column-gap: 10px;
    padding-inline: 10px;
  }

  .security-rank-item > .security-rank-detail {
    margin-inline: 10px;
    padding: 8px;
  }

  .security-rank-detail .table-wrap {
    overflow: visible;
  }

  .security-contributor-table th:first-child,
  .security-contributor-table td:first-child {
    width: auto;
    min-width: 0;
  }

  .security-rank-detail .security-contributor-etf-link {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 2px;
  }

  .security-rank-detail .security-contributor-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    padding: 9px 10px;
  }

  .security-rank-detail .security-contributor-table td {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 3px;
    padding: 8px 2px;
    text-align: left !important;
  }

  .security-rank-detail .security-contributor-table td::before {
    content: none;
  }

  .security-rank-detail .security-contributor-table .security-contributor-etf,
  .security-rank-detail .security-contributor-table .security-contributor-field-wide {
    grid-column: 1 / -1;
  }

  .security-contributor-field-label,
  .security-contributor-field-value {
    display: block;
    min-width: 0;
  }

  .security-contributor-field-label {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
  }

  .security-contributor-field-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
  }

  .security-scope-controls {
    flex-direction: column;
    gap: var(--space-3);
  }

  .ranking-type-tabs,
  .etf-type-tabs {
    width: 100%;
  }

  .ranking-type-tabs a,
  .etf-type-tabs a {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ===========================================================================
   Security/ETF Detail V2 acceptance fixes (2026-09-09)
   =========================================================================== */

/* 1. Title color -- code and name must read as ONE title, not two colors.
   These two pages' own heading classes (.security-detail-heading,
   .detail-heading) each carry a legacy/earlier "second color for the span"
   rule from etf.css / this same file (kept there for OTHER, non-.v2-hero
   contexts that still want that contrast) -- these two selectors are
   deliberately more specific (two classes) so they win over both without
   touching either legacy rule or any other page. */
.v2-hero.detail-heading h1 span,
.v2-hero.security-detail-heading h1 span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin-right: 0;
}

/* 2/8. Shared chart-control affordances: a floating tooltip/inspect panel
   or a filter popover must never be paintable-behind the sticky
   .site-header (z-index:100) -- every such floating element across all
   three chart engines (security_chart.js, etf_daily_research.js,
   holding_research.js) shares this one rule instead of three separate
   ad-hoc z-index values. */
.chart-tooltip,
.kline-tooltip,
.etf-kline-tooltip,
.chart-filter-popover,
.etf-detail-backdrop {
  z-index: 110;
}

/* Shared fullscreen mode: any chart panel wrapper opted in via
   [data-fullscreen-target] gets promoted to a fixed, full-viewport
   surface above the sticky header when [data-fullscreen-active] is set
   by the shared toggle helper (static/js/chart_fullscreen.js). The SAME
   chart instance/canvas keeps rendering -- this only repositions its
   existing container, never builds a second chart. */
[data-fullscreen-target][data-fullscreen-active] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-radius: 0;
  overflow-y: auto;
  padding-bottom: 12px;
}

[data-fullscreen-target][data-fullscreen-active] .chart-panel-price canvas,
[data-fullscreen-target][data-fullscreen-active] .etf-kline-chart canvas,
[data-fullscreen-target][data-fullscreen-active] .kline-chart canvas {
  height: min(48vh, 460px) !important;
}

/* Institutional (外資/投信) subplots must stay part of "the complete
   research chart" in fullscreen, not scrolled out of view below a
   dominant price canvas -- reordered directly under the price panel
   (ahead of the less critical volume panel), and given a little more
   height now that the price canvas above no longer monopolizes the
   viewport. Same real canvases/JS, only their position + size change. */
[data-fullscreen-target][data-fullscreen-active] .chart-panel-price { order: 1; }
[data-fullscreen-target][data-fullscreen-active] [data-panel="foreign"] { order: 2; }
[data-fullscreen-target][data-fullscreen-active] [data-panel="trust"] { order: 3; }
[data-fullscreen-target][data-fullscreen-active] [data-panel="volume"] { order: 4; }

[data-fullscreen-target][data-fullscreen-active] [data-panel="foreign"] canvas,
[data-fullscreen-target][data-fullscreen-active] [data-panel="trust"] canvas,
[data-fullscreen-target][data-fullscreen-active] [data-panel="volume"] canvas {
  height: 120px !important;
}

.chart-fullscreen-toggle {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
}

.chart-fullscreen-toggle:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

/* 3. Always-visible chart control groups -- MA toggles (and, on the
   security chart, every "advanced" toggle group) are no longer hidden
   behind a collapsed <details>/<summary> on ANY viewport; they render as
   a normal wrapping toolbar row. Mobile gets the SAME controls, just
   wrapping onto more lines instead of collapsing. */
.chart-toolbar-always,
.viz-ma-controls-always {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

/* 5/6/7. Estimated-cost / event columns and compact event badges, shared
   by the security-holders table and the ETF holdings table. */
.holding-event-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.holding-event-buy,
.holding-event-high {
  background: #e3f5ee;
  color: #0f7a5c;
}

.holding-event-sell,
.holding-event-low {
  background: #fbe9e8;
  color: #b3392f;
}

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

.holding-event-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.holding-event-more,
.holding-event-collapse {
  border: 1px solid var(--border-strong, #c7d2da);
  background: var(--surface, #fff);
  border-radius: 99px;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 7px;
  min-height: 20px;
  cursor: pointer;
}

.holding-event-more:hover,
.holding-event-collapse:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-hover);
}

.holding-event-extra {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.holding-event-extra[hidden] { display: none; }

.holding-event-collapse {
  white-space: nowrap;
}

/* Shared 資訊 (info-panel) toolbar toggle -- always in the always-visible
   toolbar row (never a collapsed <details>), given a stronger active
   state than the plain MA toggles so it stays clearly discoverable as
   the "is the info panel on" control across all three chart engines. */
.info-toggle.active {
  border-color: var(--brand-primary, #008b95);
  background: var(--brand-primary, #008b95);
  color: #fff;
}

.cost-estimate-cell {
  font-variant-numeric: tabular-nums;
}

/* Sortable table headers -- client-side, shared by both pages' holder /
   holdings tables. Never applied to descriptive (non-numeric) columns. */
th.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable-th .sort-indicator {
  display: inline-block;
  margin-left: 3px;
  color: var(--text-muted, #64748b);
  font-size: 11px;
}

th.sortable-th:not([data-sort-active]) .sort-indicator {
  opacity: .45;
}

th.sortable-th[data-sort-active] .sort-indicator {
  color: var(--brand-primary-hover);
  font-weight: 800;
  opacity: 1;
}

/* 5. Level-2 holder-style filter -- reuses .v2-period-selector/button
   styling verbatim (Section on shared visual levels above), client-side
   only: the holder dataset is already fully loaded for this page, so
   filtering never triggers another historical query. */
.holder-style-filter {
  margin: 0 0 12px;
}

/* 5b. Smaller, more balanced 持股權重分布 donut (was full-dashboard size;
   this card now matches the compact insight-rail donut size used
   elsewhere, e.g. .v2-donut-compact, so it no longer dominates the
   card). Preserves the exact same SVG/legend markup and real weight
   values -- sizing only. */
.holding-weight-donut-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.holding-weight-donut-chart-wrap {
  flex: 0 0 auto;
}

.holding-weight-donut-chart-wrap .holding-weight-donut {
  width: 132px;
  height: 132px;
}

.holding-weight-donut-legend {
  flex: 1 1 240px;
  min-width: 0;
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 700px) {
  .holding-weight-donut-chart-wrap .holding-weight-donut {
    width: 112px;
    height: 112px;
  }

  .holding-weight-donut-legend {
    max-height: none;
  }

  [data-fullscreen-target][data-fullscreen-active] .chart-panel-price canvas,
  [data-fullscreen-target][data-fullscreen-active] .etf-kline-chart canvas,
  [data-fullscreen-target][data-fullscreen-active] .kline-chart canvas {
    height: min(38vh, 340px) !important;
  }

  [data-fullscreen-target][data-fullscreen-active] [data-panel="foreign"] canvas,
  [data-fullscreen-target][data-fullscreen-active] [data-panel="trust"] canvas,
  [data-fullscreen-target][data-fullscreen-active] [data-panel="volume"] canvas {
    height: 100px !important;
  }

  .holder-style-filter .v2-period-selector {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .holder-style-filter .v2-period-selector button {
    padding-inline: 4px;
  }
}

/* Site maintenance page (2026-09-09) -- standalone (does not extend
   base.html: no nav into blocked pages), reusing this file's teal/navy
   brand tokens only. white-space: pre-line preserves the admin-entered
   維護告知事項's real line breaks while the text itself stays plain
   Jinja-escaped {{ notice }} (no HTML/script injection surface). */
body.maintenance-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy-deep, #0d2a40), var(--brand-primary, #007f8b));
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

.maintenance-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

.maintenance-card {
  width: min(560px, 100%);
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(13, 42, 64, 0.35);
}

.maintenance-brand {
  margin: 0 0 6px;
  color: var(--brand-primary, #007f8b);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.maintenance-title {
  margin: 0;
  color: var(--navy-deep, #0d2a40);
  font-size: 26px;
  font-weight: 800;
}

.maintenance-divider {
  margin: 22px 0;
  border: none;
  border-top: 1px solid var(--border, #d9e4ea);
}

.maintenance-notice {
  margin: 0;
  color: var(--text-secondary, #40576a);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-line;
  text-align: left;
}

/* 管理員登入: visible but restrained -- a secondary-style link/button
   (same visual weight as .button.secondary elsewhere), not the page's
   primary focal point. Routes through the SAME existing /login page,
   never a second login system. */
.maintenance-admin-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  background: #eef3f7;
  color: #36536d;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.maintenance-admin-login:hover {
  background: #e2ebf1;
}

@media (max-width: 700px) {
  body.maintenance-page {
    padding: 16px;
  }
  .maintenance-card {
    padding: 28px 22px;
  }
  .maintenance-title {
    font-size: 22px;
  }
  .maintenance-notice {
    font-size: 14px;
  }
}

/* Global announcement modal (全站公告) -- reuses the existing generic
   .modal-backdrop/.modal/.modal-actions component (static/css/
   etf_daily_report.css, loaded on every page) verbatim; only the
   announcement text's own line-break preservation is new. */
.announcement-text {
  margin: 0;
  color: var(--text-secondary, #40576a);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}